checkbox-selection-input 15.0.4

package/esm2022/lib/models/selection-basic.model.mjs

@@ -0,0 +1,10 @@
+export 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);
+    }
+}
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VsZWN0aW9uLWJhc2ljLm1vZGVsLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY2hlY2tib3gtc2VsZWN0aW9uLWlucHV0L3NyYy9saWIvbW9kZWxzL3NlbGVjdGlvbi1iYXNpYy5tb2RlbC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFLQSxNQUFNLE9BQU8sY0FBYztJQUV6QixZQUNTLEtBQUssQ0FBQyxFQUNOLFFBQVEsRUFBRTtRQURWLE9BQUUsR0FBRixFQUFFLENBQUk7UUFDTixVQUFLLEdBQUwsS0FBSyxDQUFLO0lBQ2hCLENBQUM7SUFFSixNQUFNLENBQUMsS0FBSyxDQUFDLElBQVU7UUFFckIsT0FBTyxJQUFJLGNBQWMsQ0FDdkIsSUFBSSxFQUFFLEVBQUUsRUFDUixDQUFDLElBQUksRUFBRSxLQUFLLENBQUMsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUNsQyxDQUFDO0lBQ0osQ0FBQztDQUVGIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IGludGVyZmFjZSBTZWxlY3Rpb25CYXNpY0ludGVyZmFjZSB7XG4gIGlkOiBudW1iZXJ8c3RyaW5nO1xuICB2YWx1ZTogc3RyaW5nO1xufVxuXG5leHBvcnQgY2xhc3MgU2VsZWN0aW9uQmFzaWMgaW1wbGVtZW50cyBTZWxlY3Rpb25CYXNpY0ludGVyZmFjZSB7XG5cbiAgY29uc3RydWN0b3IoXG4gICAgcHVibGljIGlkID0gMCxcbiAgICBwdWJsaWMgdmFsdWUgPSAnJyxcbiAgKSB7fVxuXG4gIHN0YXRpYyBhZGFwdChpdGVtPzogYW55KSB7XG5cbiAgICByZXR1cm4gbmV3IFNlbGVjdGlvbkJhc2ljKFxuICAgICAgaXRlbT8uaWQsXG4gICAgICAoaXRlbT8udmFsdWUpID8gaXRlbS52YWx1ZSA6IGl0ZW0sXG4gICAgKTtcbiAgfVxuXG59XG4iXX0=

package/esm2022/lib/models/selection-item.model.mjs

@@ -0,0 +1,12 @@
+export 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);
+    }
+}
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VsZWN0aW9uLWl0ZW0ubW9kZWwuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jaGVja2JveC1zZWxlY3Rpb24taW5wdXQvc3JjL2xpYi9tb2RlbHMvc2VsZWN0aW9uLWl0ZW0ubW9kZWwudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBT0EsTUFBTSxPQUFPLGFBQWE7SUFFeEIsWUFDUyxLQUFLLE1BQU0sQ0FBQyxVQUFVLEVBQUUsRUFDeEIsUUFBUSxFQUFFLEVBQ1YsUUFBa0IsRUFDbEIsUUFBa0I7UUFIbEIsT0FBRSxHQUFGLEVBQUUsQ0FBc0I7UUFDeEIsVUFBSyxHQUFMLEtBQUssQ0FBSztRQUNWLGFBQVEsR0FBUixRQUFRLENBQVU7UUFDbEIsYUFBUSxHQUFSLFFBQVEsQ0FBVTtJQUN4QixDQUFDO0lBRUosTUFBTSxDQUFDLEtBQUssQ0FBQyxJQUFVO1FBRXJCLE9BQU8sSUFBSSxhQUFhLENBQ3RCLElBQUksRUFBRSxFQUFFLEVBQ1IsQ0FBQyxJQUFJLEVBQUUsS0FBSyxDQUFDLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLElBQUksRUFDakMsQ0FBQyxJQUFJLEVBQUUsUUFBUSxDQUFDLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsS0FBSyxFQUMvQixDQUFDLElBQUksRUFBRSxRQUFRLENBQUMsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQ2hDLENBQUM7SUFDSixDQUFDO0NBRUYiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgaW50ZXJmYWNlIFNlbGVjdGlvbkl0ZW1JbnRlcmZhY2Uge1xuICBpZDogbnVtYmVyfHN0cmluZztcbiAgdmFsdWU6IHN0cmluZztcbiAgZGlzYWJsZWQ/OiBib29sZWFuO1xuICBzZWxlY3RlZD86IGJvb2xlYW47XG59XG5cbmV4cG9ydCBjbGFzcyBTZWxlY3Rpb25JdGVtIGltcGxlbWVudHMgU2VsZWN0aW9uSXRlbUludGVyZmFjZSB7XG5cbiAgY29uc3RydWN0b3IoXG4gICAgcHVibGljIGlkID0gY3J5cHRvLnJhbmRvbVVVSUQoKSxcbiAgICBwdWJsaWMgdmFsdWUgPSAnJyxcbiAgICBwdWJsaWMgZGlzYWJsZWQ/OiBib29sZWFuLFxuICAgIHB1YmxpYyBzZWxlY3RlZD86IGJvb2xlYW4sXG4gICkge31cblxuICBzdGF0aWMgYWRhcHQoaXRlbT86IGFueSkge1xuXG4gICAgcmV0dXJuIG5ldyBTZWxlY3Rpb25JdGVtKFxuICAgICAgaXRlbT8uaWQsXG4gICAgICAoaXRlbT8udmFsdWUpID8gaXRlbS52YWx1ZSA6IGl0ZW0sXG4gICAgICAoaXRlbT8uZGlzYWJsZWQpID8gdHJ1ZSA6IGZhbHNlLFxuICAgICAgKGl0ZW0/LnNlbGVjdGVkKSA/IHRydWUgOiBmYWxzZSxcbiAgICApO1xuICB9XG5cbn1cbiJdfQ==

package/esm2022/lib/pipes/remove-underscore.pipe.mjs

@@ -0,0 +1,17 @@
+import { Pipe } from '@angular/core';
+import * as i0 from "@angular/core";
+export 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
+                }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmVtb3ZlLXVuZGVyc2NvcmUucGlwZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NoZWNrYm94LXNlbGVjdGlvbi1pbnB1dC9zcmMvbGliL3BpcGVzL3JlbW92ZS11bmRlcnNjb3JlLnBpcGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLElBQUksRUFBaUIsTUFBTSxlQUFlLENBQUM7O0FBTXBELE1BQU0sT0FBTyxvQkFBb0I7SUFDL0IsU0FBUyxDQUFDLEtBQWE7UUFDckIsT0FBTyxLQUFLLENBQUEsQ0FBQyxDQUFDLEtBQUssQ0FBQyxPQUFPLENBQUMsSUFBSSxFQUFFLEdBQUcsQ0FBQyxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUM7SUFDakQsQ0FBQzsrR0FIVSxvQkFBb0I7NkdBQXBCLG9CQUFvQjs7NEZBQXBCLG9CQUFvQjtrQkFKaEMsSUFBSTttQkFBQztvQkFDSixJQUFJLEVBQUUsa0JBQWtCO29CQUN4QixVQUFVLEVBQUUsSUFBSTtpQkFDakIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBQaXBlLCBQaXBlVHJhbnNmb3JtIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBQaXBlKHtcbiAgbmFtZTogJ3JlbW92ZVVuZGVyc2NvcmUnLFxuICBzdGFuZGFsb25lOiB0cnVlXG59KVxuZXhwb3J0IGNsYXNzIFJlbW92ZVVuZGVyc2NvcmVQaXBlIGltcGxlbWVudHMgUGlwZVRyYW5zZm9ybSB7XG4gIHRyYW5zZm9ybSh2YWx1ZTogc3RyaW5nKTogc3RyaW5nIHtcbiAgICByZXR1cm4gdmFsdWU/IHZhbHVlLnJlcGxhY2UoL18vZywgXCIgXCIpIDogdmFsdWU7XG4gIH1cbn1cbiJdfQ==

package/esm2022/public-api.mjs

@@ -0,0 +1,9 @@
+/*
+ * Public API Surface of checkbox-selection-input
+ */
+export * from './lib/models/index';
+export * from './lib/pipes/remove-underscore.pipe';
+export * from './lib/checkbox-demo/checkbox-demo.component';
+export * from './lib/checkbox-selection-input/checkbox-selection-input.component';
+export * from './lib/checkbox-selection-input.module';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL2NoZWNrYm94LXNlbGVjdGlvbi1pbnB1dC9zcmMvcHVibGljLWFwaS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUVILGNBQWMsb0JBQW9CLENBQUM7QUFFbkMsY0FBYyxvQ0FBb0MsQ0FBQztBQUVuRCxjQUFjLDZDQUE2QyxDQUFDO0FBQzVELGNBQWMsbUVBQW1FLENBQUM7QUFDbEYsY0FBYyx1Q0FBdUMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBQdWJsaWMgQVBJIFN1cmZhY2Ugb2YgY2hlY2tib3gtc2VsZWN0aW9uLWlucHV0XG4gKi9cblxuZXhwb3J0ICogZnJvbSAnLi9saWIvbW9kZWxzL2luZGV4JztcblxuZXhwb3J0ICogZnJvbSAnLi9saWIvcGlwZXMvcmVtb3ZlLXVuZGVyc2NvcmUucGlwZSc7XG5cbmV4cG9ydCAqIGZyb20gJy4vbGliL2NoZWNrYm94LWRlbW8vY2hlY2tib3gtZGVtby5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvY2hlY2tib3gtc2VsZWN0aW9uLWlucHV0L2NoZWNrYm94LXNlbGVjdGlvbi1pbnB1dC5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvY2hlY2tib3gtc2VsZWN0aW9uLWlucHV0Lm1vZHVsZSc7XG4iXX0=

package/fesm2022/checkbox-selection-input.mjs

@@ -0,0 +1,472 @@
+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 { Validators, FormBuilder, 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 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/checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+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 { MatInputModule } from '@angular/material/input';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatOptionModule } from '@angular/material/core';
+import { MatSelectModule } from '@angular/material/select';
+
+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 CheckboxSelectionInputComponent {
+    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 data(value) {
+        this.selectionControl = this.fb.group({});
+        this.isObjects = this.hasObjects(value);
+        this.raw = value;
+        this._data = (value) ? value.map(item => SelectionItem.adapt(item)) : [];
+        const selected = this.data.filter(item => item.selected).length;
+        if (this.maxSelection > 0 && selected >= this.maxSelection) {
+            for (let index = this.maxSelection + 1; index < this.data.length; index++) {
+                this.data[index].selected = false;
+            }
+        }
+        this.data.map(item => {
+            const disabled = (item?.disabled) ? item.disabled : false;
+            const selected = (item?.selected) ? item.selected : false;
+            const newControl = this.fb.control({ value: selected, disabled }, Validators.required);
+            this.selectionControl.addControl(item.value, newControl);
+        });
+        this.initSelection();
+    }
+    get data() {
+        return this._data;
+    }
+    constructor() {
+        this.fb = inject(FormBuilder);
+        this.selectionControl = this.fb.group({});
+        this.disableMax = false;
+        this.useDefaultReset = false;
+        this._minSelection = 0;
+        this._maxSelection = 0;
+        this.isObjects = false;
+        this.formInitialized = false;
+        this.raw = [];
+        this._data = [];
+        this.selectionChange = new EventEmitter();
+        this.onChange = () => { };
+        this.onTouch = () => { };
+        // invalid = false
+        this.disabled = false;
+        this.isArray = (obj) => Array.isArray(obj);
+        this.isObject = (obj) => typeof obj === 'object' && obj !== null && !Array.isArray(obj);
+        this.hasObjects = (obj) => (this.isArray(obj) && obj.length > 0) ? this.isObject(obj[0]) : false;
+        this.objectIsEmpty = (obj) => Object.keys(obj).length === 0;
+        this.selectedCheckboxes = (obj) => Object.keys(obj).filter(key => obj[key]);
+    }
+    ngOnInit() {
+    }
+    ngAfterViewInit() {
+        this.formInitialized = true;
+    }
+    initSelection() {
+        const selectedCount = this.selectedCheckboxes(this.selectionControl.value).length;
+        const hasMax = selectedCount >= this.maxSelection && this.maxSelection > 0;
+        if (hasMax && this.disableMax) {
+            const disable = this.selectedValues(this.selectionControl.value, false);
+            disable.map(item => this.selectionControl.controls[item].disable());
+        }
+        else {
+            const enable = this.data.filter(item => (!item.disabled)).map(item => item.value);
+            enable.map(item => this.selectionControl.controls[item].enable());
+        }
+    }
+    writeValue(value) {
+        const selected = value?.reduce((acc, item) => { return { ...acc, [item]: true }; }, {});
+        const newSelected = (selected && Object.keys(selected).length > this.maxSelection && this.maxSelection > 0)
+            ? this.removeLast(selected, Object.keys(selected).length - this.maxSelection)
+            : selected;
+        if (newSelected) {
+            this.selectionControl.patchValue(newSelected, { emitEvent: false });
+        }
+        else {
+            if (this.formInitialized)
+                this.selectionControl.reset();
+        }
+        this.formInitialized = true;
+    }
+    validate(control) {
+        const isRequired = control.hasValidator(Validators.required) ? true : false;
+        let errors = { 'minRequired': false, 'maxExceeded': false };
+        const selectedCount = this.selectedCheckboxes(this.selectionControl.value).length;
+        const hasValue = selectedCount > 0;
+        const hasMin = selectedCount < this.minSelection;
+        if (this.minSelection > 0)
+            errors.minRequired = hasMin;
+        const hasMax = selectedCount >= this.maxSelection && this.maxSelection > 0;
+        if (this.maxSelection > 0)
+            errors.maxExceeded = hasMax;
+        if (hasMax && this.disableMax) {
+            const disable = this.selectedValues(this.selectionControl.value, false);
+            disable.map(item => this.selectionControl.controls[item].disable());
+        }
+        else {
+            const enable = this.data.filter(item => (!item.disabled)).map(item => item.value);
+            enable.map(item => this.selectionControl.controls[item].enable());
+        }
+        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();
+        }
+    }
+    onSelectionChange() {
+        const data = this.selectedCheckboxes(this.selectionControl.value);
+        const selectedData = (this.isObjects) ? this.raw.filter(item => data.includes(item.value)) : data;
+        this.onChange(selectedData);
+        this.selectionChange.emit(selectedData);
+    }
+    selectedValues(obj, state = false) {
+        return Object.entries(obj).filter(([key, value]) => value === state).map(([key, _]) => key);
+    }
+    removeLast(obj, index) {
+        const entries = Object.entries(obj);
+        const slicedEntries = entries.slice(0, entries.length - index);
+        return Object.fromEntries(slicedEntries);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CheckboxSelectionInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CheckboxSelectionInputComponent, selector: "app-checkbox-selection-input", inputs: { label: "label", placeholder: "placeholder", error: "error", disableMax: "disableMax", useDefaultReset: "useDefaultReset", minSelection: "minSelection", maxSelection: "maxSelection", data: "data" }, outputs: { selectionChange: "selectionChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => CheckboxSelectionInputComponent),
+                multi: true
+            },
+            {
+                provide: NG_VALIDATORS,
+                useExisting: forwardRef(() => CheckboxSelectionInputComponent),
+                multi: true
+            }
+        ], ngImport: i0, template: "<div style=\"display: flex; flex-direction: column;\">\n  <mat-label style=\"padding-left: 1rem; font-size: larger;\">\n    {{ label }}\n  </mat-label>\n  <mat-label style=\"padding-left: 1rem; color: grey;\">\n    {{ placeholder }}\n  </mat-label>\n  <ng-container *ngIf=\"data.length > 0; else NODATA\">\n    <section\n      [formGroup]=\"selectionControl\"\n      class=\"container\"\n    >\n      <mat-checkbox\n        class=\"item\"\n        color=\"primary\"\n        *ngFor=\"let option of data\"\n        [formControlName]=\"option.value\"\n        [value]=\"option.value\"\n        (change)=\"onSelectionChange()\"\n      >\n        {{option.value}}\n      </mat-checkbox>\n    </section>\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: [".container{display:grid;grid-template-columns:repeat(auto-fit,minmax(192px,1fr));grid-auto-rows:minmax(auto,auto)}.item{flex:1 1 calc(33.33% - 2rem);margin:.25rem;margin-bottom:0;box-sizing:border-box;padding:.25rem;white-space:nowrap}.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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "component", type: i4.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CheckboxSelectionInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-checkbox-selection-input', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => CheckboxSelectionInputComponent),
+                            multi: true
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: forwardRef(() => CheckboxSelectionInputComponent),
+                            multi: true
+                        }
+                    ], template: "<div style=\"display: flex; flex-direction: column;\">\n  <mat-label style=\"padding-left: 1rem; font-size: larger;\">\n    {{ label }}\n  </mat-label>\n  <mat-label style=\"padding-left: 1rem; color: grey;\">\n    {{ placeholder }}\n  </mat-label>\n  <ng-container *ngIf=\"data.length > 0; else NODATA\">\n    <section\n      [formGroup]=\"selectionControl\"\n      class=\"container\"\n    >\n      <mat-checkbox\n        class=\"item\"\n        color=\"primary\"\n        *ngFor=\"let option of data\"\n        [formControlName]=\"option.value\"\n        [value]=\"option.value\"\n        (change)=\"onSelectionChange()\"\n      >\n        {{option.value}}\n      </mat-checkbox>\n    </section>\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: [".container{display:grid;grid-template-columns:repeat(auto-fit,minmax(192px,1fr));grid-auto-rows:minmax(auto,auto)}.item{flex:1 1 calc(33.33% - 2rem);margin:.25rem;margin-bottom:0;box-sizing:border-box;padding:.25rem;white-space:nowrap}.wrapper:not(:empty)+.default{display:none}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { label: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], error: [{
+                type: Input
+            }], disableMax: [{
+                type: Input
+            }], useDefaultReset: [{
+                type: Input
+            }], minSelection: [{
+                type: Input
+            }], maxSelection: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], selectionChange: [{
+                type: Output
+            }] } });
+
+class CheckboxSelectionDemoComponent {
+    constructor() {
+        this.fb = inject(FormBuilder);
+        this.data_1 = [
+            { id: 11, value: 'Telus', selected: true },
+            { 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'];
+        this.data = this.data_2;
+        //  CHECKBOX
+        this.selectionControl_1 = this.fb.control(null);
+        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, Validators.required);
+        this.selectionControl_5 = this.fb.control(null, Validators.required);
+        this.selectionControl_6 = this.fb.control(null, Validators.required);
+        //CHANGE
+        this.changeDetection_1 = this.fb.control(null);
+        this.changeDetection_2 = this.fb.control(null);
+        this.changeDetection_3 = this.fb.control(null);
+        this.changeDetection_4 = this.fb.control(null);
+        this.changeDetection_5 = this.fb.control(null);
+        this.changeDetection_6 = this.fb.control(null);
+    }
+    ngOnInit() {
+        // CHECKBOX
+        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);
+        });
+    }
+    // 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();
+        }
+    }
+    onPerformPatch() {
+        this.selectionControl_1.patchValue(['Bell', 'Rogers']);
+        this.selectionControl_2.patchValue(['Bell', 'Telus']);
+        this.selectionControl_3.patchValue(['Telus', 'Bell']);
+        this.selectionControl_4.patchValue(['Rogers']);
+        this.selectionControl_5.patchValue(['Rogers']);
+        this.selectionControl_6.patchValue(['Telus', 'Bell', 'Rogers']);
+    }
+    onChangeDataType(type) {
+        if (type === 'strings') {
+            this.data = this.data_2;
+        }
+        else {
+            this.data = this.data_1;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CheckboxSelectionDemoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CheckboxSelectionDemoComponent, selector: "app-checkbox-selection-demo", ngImport: i0, template: "<div style=\"display: flex;\">\n  <h1>Checkbox 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      <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\n<div>\n  <div style=\"display: flex;\">\n    <span style=\"flex:1\"></span>\n  </div>\n  <app-checkbox-selection-input error=\"No Data Provided\">\n    <h3 style=\"color: red; margin-top: 0; margin-bottom: 0;\">No Data</h3>\n  </app-checkbox-selection-input>\n  <div style=\"margin-top: .5rem; margin-bottom: 1rem;\">\n    <mat-divider></mat-divider>\n  </div>\n</div>\n\n<div>\n  <h3 style=\"margin-bottom: 0;\">Checkbox Selection - {{ varTypes.value | uppercase }}</h3>\n\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-checkbox-selection-input\n    [data]=\"data\"\n    [formControl]=\"selectionControl_1\"\n    ></app-checkbox-selection-input>\n  <div style=\"display: flex; gap: 2rem; margin-top: 2rem;\">\n    <mat-slide-toggle [formControl]=\"changeDetection_1\">Change Detection</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 and Placeholder<br>\n    Not Required<br>\n    Valid {{ selectionControl_1.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_2.reset()\">Reset</button>\n  </div>\n  <app-checkbox-selection-input\n    [data]=\"data\"\n    label=\"Selections\"\n    placeholder=\"My placeholder\"\n    [formControl]=\"selectionControl_2\"\n    ></app-checkbox-selection-input>\n  <div *ngIf=\"error2.checked\">\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: 2rem;\">\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-checkbox-selection-input\n    [data]=\"data\"\n    label=\"Providers\"\n    [formControl]=\"selectionControl_3\"\n    [minSelection]=\"2\"\n  ></app-checkbox-selection-input>\n  <div *ngIf=\"error3.checked\">\n    <mat-error *ngIf=\"selectionControl_3.hasError('minRequired')\">Minimum of 1 required</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: 2rem;\">\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<br>\n    Minimum of 2 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\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-checkbox-selection-input\n    [data]=\"data\"\n    label=\"Providers\"\n    [formControl]=\"selectionControl_4\"\n    [maxSelection]=\"2\"\n    [disableMax]=\"false\"\n  ></app-checkbox-selection-input>\n  <div *ngIf=\"error4.checked\">\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: 2rem;\">\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    Label<br>\n    Maximum of 2 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-checkbox-selection-input\n    [data]=\"data\"\n    label=\"Providers\"\n    [formControl]=\"selectionControl_5\"\n    [maxSelection]=\"2\"\n    [disableMax]=\"true\"\n  ></app-checkbox-selection-input>\n  <div *ngIf=\"error5.checked\">\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<br>\n    Maximum of 2 Required<br>\n    Disable if Max Reached<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\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-checkbox-selection-input\n    [data]=\"data\"\n    label=\"Providers\"\n    [formControl]=\"selectionControl_6\"\n    [minSelection]=\"1\"\n    [maxSelection]=\"2\"\n    [disableMax]=\"true\"\n  ></app-checkbox-selection-input>\n  <div *ngIf=\"error6.checked\">\n    <mat-error *ngIf=\"selectionControl_6.hasError('minRequired')\">Minimum of 1 required</mat-error>\n    <mat-error *ngIf=\"selectionControl_6.hasError('maxExceeded')\">Maximum reached</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    Label<br>\n    Minimum of 1 Required<br>\n    Maximum of 2 Required<br>\n    Disable if Max Reached<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", 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.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i5.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: CheckboxSelectionInputComponent, selector: "app-checkbox-selection-input", inputs: ["label", "placeholder", "error", "disableMax", "useDefaultReset", "minSelection", "maxSelection", "data"], outputs: ["selectionChange"] }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CheckboxSelectionDemoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-checkbox-selection-demo', template: "<div style=\"display: flex;\">\n  <h1>Checkbox 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      <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\n<div>\n  <div style=\"display: flex;\">\n    <span style=\"flex:1\"></span>\n  </div>\n  <app-checkbox-selection-input error=\"No Data Provided\">\n    <h3 style=\"color: red; margin-top: 0; margin-bottom: 0;\">No Data</h3>\n  </app-checkbox-selection-input>\n  <div style=\"margin-top: .5rem; margin-bottom: 1rem;\">\n    <mat-divider></mat-divider>\n  </div>\n</div>\n\n<div>\n  <h3 style=\"margin-bottom: 0;\">Checkbox Selection - {{ varTypes.value | uppercase }}</h3>\n\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-checkbox-selection-input\n    [data]=\"data\"\n    [formControl]=\"selectionControl_1\"\n    ></app-checkbox-selection-input>\n  <div style=\"display: flex; gap: 2rem; margin-top: 2rem;\">\n    <mat-slide-toggle [formControl]=\"changeDetection_1\">Change Detection</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 and Placeholder<br>\n    Not Required<br>\n    Valid {{ selectionControl_1.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_2.reset()\">Reset</button>\n  </div>\n  <app-checkbox-selection-input\n    [data]=\"data\"\n    label=\"Selections\"\n    placeholder=\"My placeholder\"\n    [formControl]=\"selectionControl_2\"\n    ></app-checkbox-selection-input>\n  <div *ngIf=\"error2.checked\">\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: 2rem;\">\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-checkbox-selection-input\n    [data]=\"data\"\n    label=\"Providers\"\n    [formControl]=\"selectionControl_3\"\n    [minSelection]=\"2\"\n  ></app-checkbox-selection-input>\n  <div *ngIf=\"error3.checked\">\n    <mat-error *ngIf=\"selectionControl_3.hasError('minRequired')\">Minimum of 1 required</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: 2rem;\">\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<br>\n    Minimum of 2 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\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-checkbox-selection-input\n    [data]=\"data\"\n    label=\"Providers\"\n    [formControl]=\"selectionControl_4\"\n    [maxSelection]=\"2\"\n    [disableMax]=\"false\"\n  ></app-checkbox-selection-input>\n  <div *ngIf=\"error4.checked\">\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: 2rem;\">\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    Label<br>\n    Maximum of 2 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-checkbox-selection-input\n    [data]=\"data\"\n    label=\"Providers\"\n    [formControl]=\"selectionControl_5\"\n    [maxSelection]=\"2\"\n    [disableMax]=\"true\"\n  ></app-checkbox-selection-input>\n  <div *ngIf=\"error5.checked\">\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<br>\n    Maximum of 2 Required<br>\n    Disable if Max Reached<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\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-checkbox-selection-input\n    [data]=\"data\"\n    label=\"Providers\"\n    [formControl]=\"selectionControl_6\"\n    [minSelection]=\"1\"\n    [maxSelection]=\"2\"\n    [disableMax]=\"true\"\n  ></app-checkbox-selection-input>\n  <div *ngIf=\"error6.checked\">\n    <mat-error *ngIf=\"selectionControl_6.hasError('minRequired')\">Minimum of 1 required</mat-error>\n    <mat-error *ngIf=\"selectionControl_6.hasError('maxExceeded')\">Maximum reached</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    Label<br>\n    Minimum of 1 Required<br>\n    Maximum of 2 Required<br>\n    Disable if Max Reached<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" }]
+        }], ctorParameters: function () { return []; } });
+
+class CheckboxSelectionInputModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CheckboxSelectionInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: CheckboxSelectionInputModule, declarations: [CheckboxSelectionInputComponent,
+            CheckboxSelectionDemoComponent], imports: [CommonModule,
+            FormsModule,
+            ReactiveFormsModule,
+            MatSliderModule,
+            MatButtonModule,
+            MatIconModule,
+            MatFormFieldModule,
+            MatToolbarModule,
+            MatCheckboxModule,
+            MatMenuModule,
+            MatButtonToggleModule,
+            MatDividerModule,
+            MatRadioModule,
+            MatInputModule,
+            MatAutocompleteModule,
+            RemoveUnderscorePipe,
+            MatSelectModule,
+            MatOptionModule,
+            MatSlideToggleModule], exports: [CheckboxSelectionInputComponent,
+            CheckboxSelectionDemoComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CheckboxSelectionInputModule, 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: CheckboxSelectionInputModule, 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: [
+                        CheckboxSelectionInputComponent,
+                        CheckboxSelectionDemoComponent,
+                    ],
+                    exports: [
+                        CheckboxSelectionInputComponent,
+                        CheckboxSelectionDemoComponent
+                    ]
+                }]
+        }] });
+
+/*
+ * Public API Surface of checkbox-selection-input
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CheckboxSelectionDemoComponent, CheckboxSelectionInputComponent, CheckboxSelectionInputModule, RemoveUnderscorePipe, SelectionBasic, SelectionItem };
+//# sourceMappingURL=checkbox-selection-input.mjs.map