igniteui-angular-data-grids 19.1.0-beta.0

package/esm2015/lib/igx-checkbox-list-component.js

@@ -0,0 +1,904 @@
+import { Output, EventEmitter, Component, ViewChild, ElementRef, Input, ChangeDetectionStrategy } from '@angular/core';
+import { AngularRenderer } from "igniteui-angular-core";
+import { fromSize, toSize, ensureEnum, brushToString, stringToBrush, ensureBool, initializePropertiesFromCss, NamePatcher, toSpinal } from "igniteui-angular-core";
+import { FontInfo } from "igniteui-angular-core";
+import { delegateCombine } from "igniteui-angular-core";
+import { CheckboxList } from './CheckboxList';
+import { IgxCheckedChangedEventArgs } from "./igx-checked-changed-event-args";
+import { IgxSelectAllCheckboxChangedEventArgs } from "./igx-select-all-checkbox-changed-event-args";
+import { IgxDataGridComponent } from "./igx-data-grid-component";
+import { SyncableObservableCollection$1 } from "igniteui-angular-core";
+import { PrimaryKeyValue } from "./PrimaryKeyValue";
+import { IgxGridSelectedKeysCollection } from "./igx-grid-selected-keys-collection";
+import { GridSelectedKeysCollection as GridSelectedKeysCollection_internal } from "./GridSelectedKeysCollection";
+import { CheckboxListIndexType_$type } from "./CheckboxListIndexType";
+import { InputGroupDisplayType_$type } from "igniteui-angular-inputs";
+import { BaseControlTheme_$type } from "igniteui-angular-core";
+import { ControlDisplayDensity_$type } from "igniteui-angular-core";
+import { ScrollbarStyle_$type } from "igniteui-angular-core";
+import { IgxCheckboxListIndexTypeChangedEventArgs } from './igx-checkbox-list-index-type-changed-event-args';
+import { IgxCheckboxListKeysClearedEventArgs } from './igx-checkbox-list-keys-cleared-event-args';
+import * as i0 from "@angular/core";
+import * as i1 from "./igx-data-grid-component";
+// IgxDatasGridModule.register();
+export let IgxCheckboxListComponent = /*@__PURE__*/ (() => {
+    class IgxCheckboxListComponent {
+        constructor(renderer, _elRef, ngZone, injector, componentFactoryResolver) {
+            this.renderer = renderer;
+            this._elRef = _elRef;
+            this.ngZone = ngZone;
+            this.injector = injector;
+            this.componentFactoryResolver = componentFactoryResolver;
+            this._dataSource = null;
+            this._wrapper = null;
+            this._root = null;
+            this._implementation = null;
+            this._keys = null;
+            this.__p = null;
+            this._hasUserValues = new Set();
+            this._stylingContainer = null;
+            this._stylingParent = null;
+            this._inStyling = false;
+            this._selectedKeyAdded = null;
+            this._selectedKeyRemoved = null;
+            this._checkedChanged = null;
+            this._labelClicked = null;
+            this._indexTypeChanged = null;
+            this._keysCleared = null;
+            this._selectAllCheckboxChanged = null;
+            this._zoneRunner = null;
+            if (this._styling) {
+                NamePatcher.ensureStylablePatched(Object.getPrototypeOf(this));
+            }
+            this._implementation = this.createImplementation();
+            var checkboxList = this.i;
+            this._checkboxList = checkboxList;
+        }
+        set height(value) {
+            this._height = value;
+            this.renderer.setStyle(this._elRef.element.nativeElement, "height", value);
+            this._checkboxList.notifySizeChanged();
+        }
+        get height() {
+            return this._height;
+        }
+        set width(value) {
+            this._width = value;
+            this.renderer.setStyle(this._elRef.element.nativeElement, "width", value);
+            this._checkboxList.notifySizeChanged();
+        }
+        get width() {
+            return this._width;
+        }
+        set dataSource(value) {
+            this._dataSource = value;
+            if (this._checkboxList != null) {
+                this._checkboxList.itemsSource = this._dataSource;
+            }
+        }
+        get dataSource() {
+            return this._dataSource;
+        }
+        // supports angular themes or custom properties set in CSS
+        updateStyle() {
+            this._styling(this._root, this);
+        }
+        ngOnDestroy() {
+            this._checkboxList.destroy();
+            this._wrapper.destroy();
+        }
+        ngAfterViewInit() {
+            if (this.renderer && this._listGrid != null && this._listContainer != null) {
+                this.container = this._listContainer.nativeElement;
+                this._root = this.container;
+                var ren = new AngularRenderer(this.container, this.renderer, window.document, this.ngZone, true, null);
+                this._wrapper = ren;
+                var filterHr = ren.getWrapper(this._hrElement.nativeElement);
+                filterHr.setStyleProperty("margin", "3px 0px");
+                filterHr.setStyleProperty("border-top", "1px solid #dde2eb");
+                filterHr.setStyleProperty("border-left", "0px");
+                filterHr.setStyleProperty("border-right", "0px");
+                filterHr.setStyleProperty("border-bottom", "0px");
+                this.i.provideHrElement(filterHr);
+                var selectAllSectionWrapper = ren.getWrapper(this._selectAllSection.nativeElement);
+                this._checkboxList.provideContainer(ren, this._listGrid.i, selectAllSectionWrapper);
+                this._checkboxList.notifySizeChanged();
+                ren.addSizeWatcher(() => {
+                    this._checkboxList.notifySizeChanged();
+                });
+            }
+            this._styling(this._root, this);
+            this.i.notifySizeChanged();
+            this.updateStyle();
+        }
+        createImplementation() {
+            return new CheckboxList();
+        }
+        get i() {
+            return this._implementation;
+        }
+        /**
+         * Gets the collection responsible for selection in the CheckboxList. Selection is determined by two factors:
+         * whether everything is selected or deselected and the values present in this collection. If everything is
+         * selected then any items in this collection will be deselected. If everything is deselected then any items in
+         * this collection will be selected. The CheckboxList defaults all items as deselected. This state can change
+         * when you use the SelectAll and DeselectAll methods.
+        */
+        get keys() {
+            if (this._keys === null) {
+                let coll = new IgxGridSelectedKeysCollection();
+                let innerColl = this.i.keys;
+                if (!innerColl) {
+                    innerColl = new GridSelectedKeysCollection_internal();
+                }
+                this._keys = coll._fromInner(innerColl);
+            }
+            return this._keys;
+        }
+        set keys(v) {
+            if (this._keys !== null) {
+                this._keys._setSyncTarget(null);
+                this._keys = null;
+            }
+            let coll = new IgxGridSelectedKeysCollection();
+            this._keys = coll._fromOuter(v);
+            let syncColl = new SyncableObservableCollection$1(PrimaryKeyValue.$type);
+            let innerColl = this.i.keys;
+            if (!innerColl) {
+                innerColl = new GridSelectedKeysCollection_internal();
+            }
+            syncColl._inner = innerColl;
+            syncColl.clear();
+            this._keys._setSyncTarget(syncColl);
+        }
+        /**
+         * Gets or sets the primary key to use for the CheckboxList.
+        */
+        get primaryKey() {
+            return this.i.primaryKey;
+        }
+        set primaryKey(v) {
+            if (v && !Array.isArray(v) && typeof (v) == "string") {
+                const re = /\s*(?:,|\s|$)\s*/gm;
+                v = v.split(re);
+            }
+            this.i.primaryKey = v;
+        }
+        /**
+         * Gets or Sets the property name that contains the values.
+        */
+        get dataMemberPath() {
+            return this.i.dataMemberPath;
+        }
+        set dataMemberPath(v) {
+            this.i.dataMemberPath = v;
+        }
+        get dataLegendTarget() {
+            return this.i.bh;
+        }
+        set dataLegendTarget(v) {
+            this.i.bh = v;
+        }
+        /**
+         * Gets or Sets the property name that contains the values.
+        */
+        get subtitleMemberPath() {
+            return this.i.cw;
+        }
+        set subtitleMemberPath(v) {
+            this.i.cw = v;
+        }
+        get propertyTypeMemberPath() {
+            return this.i.cb;
+        }
+        set propertyTypeMemberPath(v) {
+            this.i.cb = v;
+        }
+        /**
+         * Gets or Sets the property name that contains the values.
+        */
+        get selectedMemberPath() {
+            return this.i.selectedMemberPath;
+        }
+        set selectedMemberPath(v) {
+            this.i.selectedMemberPath = v;
+        }
+        /**
+         * Gets or Sets the property name that contains the values.
+        */
+        get filterPlaceholderText() {
+            return this.i.b4;
+        }
+        set filterPlaceholderText(v) {
+            this.i.b4 = v;
+        }
+        /**
+         * Gets or Sets the property name that contains the values.
+        */
+        get searchInputType() {
+            return this.i.y;
+        }
+        set searchInputType(v) {
+            this.i.y = ensureEnum(InputGroupDisplayType_$type, v);
+        }
+        /**
+         * Gets or Sets the property name that contains the values.
+        */
+        get rowHeight() {
+            return this.i.be;
+        }
+        set rowHeight(v) {
+            this.i.be = +v;
+        }
+        get actualRowHeight() {
+            return this.i.bc;
+        }
+        /**
+         * Gets or Sets the property name that contains the values.
+        */
+        get cellTextStyle() {
+            if (this.i.am == null) {
+                return null;
+            }
+            return this.i.am.fontString;
+        }
+        set cellTextStyle(v) {
+            let fi = new FontInfo();
+            fi.fontString = v;
+            this.i.am = fi;
+        }
+        /**
+         * Gets or Sets the property name that contains the values.
+        */
+        get indexType() {
+            return this.i.indexType;
+        }
+        set indexType(v) {
+            this.i.indexType = ensureEnum(CheckboxListIndexType_$type, v);
+        }
+        /**
+         * Gets or Sets the property name that contains the values.
+        */
+        get baseTheme() {
+            return this.i.baseTheme;
+        }
+        set baseTheme(v) {
+            this.i.baseTheme = ensureEnum(BaseControlTheme_$type, v);
+        }
+        /**
+         * Gets or Sets the property name that contains the values.
+        */
+        get density() {
+            return this.i.density;
+        }
+        set density(v) {
+            this.i.density = ensureEnum(ControlDisplayDensity_$type, v);
+        }
+        /**
+         * Gets or sets the search icon color.
+        */
+        get searchIconColor() {
+            return brushToString(this.i.searchIconColor);
+        }
+        set searchIconColor(v) {
+            this.i.searchIconColor = stringToBrush(v);
+        }
+        /**
+         * Gets or sets the search background color.
+        */
+        get searchBackgroundColor() {
+            return brushToString(this.i.e1);
+        }
+        set searchBackgroundColor(v) {
+            this.i.e1 = stringToBrush(v);
+        }
+        /**
+         * Gets or sets the search background color.
+        */
+        get labelClickTriggersChange() {
+            return this.i.a1;
+        }
+        set labelClickTriggersChange(v) {
+            this.i.a1 = ensureBool(v);
+        }
+        /**
+         * Gets or sets the search text color.
+        */
+        get searchTextColor() {
+            return brushToString(this.i.searchTextColor);
+        }
+        set searchTextColor(v) {
+            this.i.searchTextColor = stringToBrush(v);
+        }
+        /**
+         * Gets or sets the search border color.
+        */
+        get searchBorderColor() {
+            return brushToString(this.i.e2);
+        }
+        set searchBorderColor(v) {
+            this.i.e2 = stringToBrush(v);
+        }
+        /**
+         * Gets or sets the text style.
+        */
+        get searchTextStyle() {
+            if (this.i.an == null) {
+                return null;
+            }
+            return this.i.an.fontString;
+        }
+        set searchTextStyle(v) {
+            let fi = new FontInfo();
+            fi.fontString = v;
+            this.i.an = fi;
+        }
+        /**
+         * Gets or sets the checkbox tick color.
+        */
+        get checkboxTickColor() {
+            return brushToString(this.i.et);
+        }
+        set checkboxTickColor(v) {
+            this.i.et = stringToBrush(v);
+        }
+        /**
+         * Gets or sets the checkbox background color when checked.
+        */
+        get checkboxCheckedBackgroundColor() {
+            return brushToString(this.i.er);
+        }
+        set checkboxCheckedBackgroundColor(v) {
+            this.i.er = stringToBrush(v);
+        }
+        /**
+         * Gets or sets the checkbox background color when unchecked.
+        */
+        get checkboxUncheckedBackgroundColor() {
+            return brushToString(this.i.eu);
+        }
+        set checkboxUncheckedBackgroundColor(v) {
+            this.i.eu = stringToBrush(v);
+        }
+        /**
+         * Gets or sets the checkbox border color when checked.
+        */
+        get checkboxCheckedBorderColor() {
+            return brushToString(this.i.es);
+        }
+        set checkboxCheckedBorderColor(v) {
+            this.i.es = stringToBrush(v);
+        }
+        /**
+         * Gets or sets the checkbox border color when unchecked.
+        */
+        get checkboxUncheckedBorderColor() {
+            return brushToString(this.i.ev);
+        }
+        set checkboxUncheckedBorderColor(v) {
+            this.i.ev = stringToBrush(v);
+        }
+        /**
+         * Gets or sets the corner radius to use for the checkbox.
+        */
+        get checkboxCornerRadius() {
+            return this.i.a7;
+        }
+        set checkboxCornerRadius(v) {
+            this.i.a7 = +v;
+        }
+        /**
+         * Gets or sets the style of scrollbar.
+        */
+        get scrollbarStyle() {
+            return this.i.ab;
+        }
+        set scrollbarStyle(v) {
+            this.i.ab = ensureEnum(ScrollbarStyle_$type, v);
+        }
+        /**
+         * Gets or sets the scrollbar background color.
+        */
+        get scrollbarBackground() {
+            return brushToString(this.i.e0);
+        }
+        set scrollbarBackground(v) {
+            this.i.e0 = stringToBrush(v);
+        }
+        /**
+         * Gets / sets the caption of the "Select All" checkbox.
+        */
+        get selectAllCaption() {
+            return this.i.cp;
+        }
+        set selectAllCaption(v) {
+            this.i.cp = v;
+        }
+        /**
+         * Gets or sets the color to use for the "Select All" label.
+        */
+        get selectAllCaptionTextColor() {
+            return brushToString(this.i.e5);
+        }
+        set selectAllCaptionTextColor(v) {
+            this.i.e5 = stringToBrush(v);
+        }
+        /**
+         * Gets or sets the color to use for the actual header selectAllCaption text.
+        */
+        get actualSelectAllCaptionTextColor() {
+            return brushToString(this.i.ep);
+        }
+        set actualSelectAllCaptionTextColor(v) {
+            this.i.ep = stringToBrush(v);
+        }
+        /**
+         * Gets / sets whether the "Select all" checkbox is visible.
+        */
+        get showSelectAll() {
+            return this.i.showSelectAll;
+        }
+        set showSelectAll(v) {
+            this.i.showSelectAll = ensureBool(v);
+        }
+        /**
+         * Gets or sets the color to use for the background of the component.
+        */
+        get backgroundColor() {
+            return brushToString(this.i.backgroundColor);
+        }
+        set backgroundColor(v) {
+            this.i.backgroundColor = stringToBrush(v);
+        }
+        /**
+         * Gets or sets the color to use when hovering over a grid row.
+        */
+        get rowHoverBackgroundColor() {
+            return brushToString(this.i.rowHoverBackgroundColor);
+        }
+        set rowHoverBackgroundColor(v) {
+            this.i.rowHoverBackgroundColor = stringToBrush(v);
+        }
+        /**
+         * Gets or sets the color to use for the text of the component.
+        */
+        get textColor() {
+            return brushToString(this.i.e7);
+        }
+        set textColor(v) {
+            this.i.e7 = stringToBrush(v);
+        }
+        /**
+         * Gets or sets whether the filter input is visible.
+        */
+        get showFilter() {
+            return this.i.a3;
+        }
+        set showFilter(v) {
+            this.i.a3 = ensureBool(v);
+        }
+        /**
+         * Gets or sets whether row hover highlighting is enabled.
+        */
+        get isRowHoverEnabled() {
+            return this.i.az;
+        }
+        set isRowHoverEnabled(v) {
+            this.i.az = ensureBool(v);
+        }
+        /**
+         * Gets or sets whether checkbox should be displayed to the right.
+        */
+        get checkboxAlignedRight() {
+            return this.i.av;
+        }
+        set checkboxAlignedRight(v) {
+            this.i.av = ensureBool(v);
+        }
+        findByName(name) {
+            if (this.findEphemera) {
+                if (name && name.indexOf("@@e:") == 0) {
+                    return this.findEphemera(name);
+                }
+            }
+            if (this.keys != null && this.keys.findByName && this.keys.findByName(name)) {
+                return this.keys.findByName(name);
+            }
+            return null;
+        }
+        get hasUserValues() {
+            return this._hasUserValues;
+        }
+        __m(propertyName) {
+            if (!this._inStyling) {
+                this._hasUserValues.add(propertyName);
+            }
+        }
+        _styling(container, component, parent) {
+            if (this._inStyling) {
+                return;
+            }
+            this._inStyling = true;
+            this._stylingContainer = container;
+            this._stylingParent = component;
+            let genericPrefix = "";
+            let typeName = this.i.$type.name;
+            if (typeName.indexOf("Xam") === 0) {
+                typeName = typeName.substring(3);
+            }
+            genericPrefix = toSpinal("CheckboxListComponent");
+            let additionalPrefixes = [];
+            let prefix = toSpinal(typeName);
+            additionalPrefixes.push(prefix + "-");
+            let b = this.i.$type.baseType;
+            while (b && b.name != "Object" &&
+                b.name != "Base" &&
+                b.name != "Control" &&
+                b.Name != "DependencyObject" &&
+                b.Name != "FrameworkElement") {
+                typeName = b.name;
+                if (typeName.indexOf("Xam") === 0) {
+                    typeName = typeName.substring(3);
+                }
+                let basePrefix = toSpinal(typeName);
+                additionalPrefixes.push(basePrefix + "-");
+                b = b.baseType;
+            }
+            if (parent) {
+                let parentTypeName = parent.i.$type.name;
+                if (parentTypeName.indexOf("Xam") === 0) {
+                    parentTypeName = parentTypeName.substring(3);
+                }
+                let parentPrefix = toSpinal(parentTypeName);
+                additionalPrefixes.push(parentPrefix + "-" + genericPrefix + "-");
+                additionalPrefixes.push(parentPrefix + "-" + prefix + "-");
+            }
+            initializePropertiesFromCss(container, this, genericPrefix + "-", this.hasUserValues, false, additionalPrefixes);
+            if (this._otherStyling) {
+                this._otherStyling(container, component, parent);
+            }
+            this._inStyling = false;
+        }
+        /**
+     * selects all the items in the checkbox list.
+    
+    */
+        selectAll() {
+            this.i.d3();
+        }
+        /**
+         * Deselects all the items in the checkbox list.
+        
+        */
+        deselectAll() {
+            this.i.c5();
+        }
+        notifySetItem(index, oldItem, newItem) {
+            this.i.dg(index, oldItem, newItem);
+        }
+        /**
+         * Manually notifies the checkboxlist's grid that the data it has bound to has been cleared and needs to be re-examined.
+         * This should not be called if the data that the grid is bound to is already observable.
+        
+        */
+        notifyClearItems() {
+            this.i.dc();
+        }
+        notifyInsertItem(index, newItem) {
+            this.i.dd(index, newItem);
+        }
+        notifyRemoveItem(index, oldItem) {
+            this.i.df(index, oldItem);
+        }
+        refresh() {
+            this.i.refresh();
+        }
+        addKeyValue(value) {
+            this.i.c0(value);
+        }
+        removeKeyValue(value) {
+            this.i.d1(value);
+        }
+        getDesiredSize(availableSize) {
+            let iv = this.i.getDesiredSize(toSize(availableSize));
+            return fromSize(iv);
+        }
+        /**
+         * Returns true if no items are selected / checked; otherwise false.
+        
+        */
+        isNothingSelected() {
+            let iv = this.i.ax();
+            return (iv);
+        }
+        /**
+         * Returns true if all of the items are selected / checked; otherwise false.
+        
+        */
+        isEverythingSelected() {
+            let iv = this.i.aw();
+            return (iv);
+        }
+        /**
+         * Called when an item is added.
+        */
+        get selectedKeyAdded() {
+            if (this._selectedKeyAdded == null) {
+                this._selectedKeyAdded = new EventEmitter();
+                this.i.selectedKeyAdded = delegateCombine(this.i.selectedKeyAdded, (o, e) => {
+                    let outerArgs = new IgxCheckedChangedEventArgs();
+                    outerArgs._provideImplementation(e);
+                    if (this.beforeSelectedKeyAdded) {
+                        this.beforeSelectedKeyAdded(this, outerArgs);
+                    }
+                    this._selectedKeyAdded.emit({
+                        sender: this,
+                        args: outerArgs
+                    });
+                });
+            }
+            return this._selectedKeyAdded;
+        }
+        /**
+         * Called when an item is removed.
+        */
+        get selectedKeyRemoved() {
+            if (this._selectedKeyRemoved == null) {
+                this._selectedKeyRemoved = new EventEmitter();
+                this.i.selectedKeyRemoved = delegateCombine(this.i.selectedKeyRemoved, (o, e) => {
+                    let outerArgs = new IgxCheckedChangedEventArgs();
+                    outerArgs._provideImplementation(e);
+                    if (this.beforeSelectedKeyRemoved) {
+                        this.beforeSelectedKeyRemoved(this, outerArgs);
+                    }
+                    this._selectedKeyRemoved.emit({
+                        sender: this,
+                        args: outerArgs
+                    });
+                });
+            }
+            return this._selectedKeyRemoved;
+        }
+        /**
+         * Called when a checkbox is checked or unchecked.
+        */
+        get checkedChanged() {
+            if (this._checkedChanged == null) {
+                this._checkedChanged = new EventEmitter();
+                this.i.checkedChanged = delegateCombine(this.i.checkedChanged, (o, e) => {
+                    let outerArgs = new IgxCheckedChangedEventArgs();
+                    outerArgs._provideImplementation(e);
+                    if (this.beforeCheckedChanged) {
+                        this.beforeCheckedChanged(this, outerArgs);
+                    }
+                    this._checkedChanged.emit({
+                        sender: this,
+                        args: outerArgs
+                    });
+                });
+            }
+            return this._checkedChanged;
+        }
+        get labelClicked() {
+            if (this._labelClicked == null) {
+                this._labelClicked = new EventEmitter();
+                this.i.labelClicked = delegateCombine(this.i.labelClicked, (o, e) => {
+                    let outerArgs = new IgxCheckedChangedEventArgs();
+                    outerArgs._provideImplementation(e);
+                    if (this.beforeLabelClicked) {
+                        this.beforeLabelClicked(this, outerArgs);
+                    }
+                    this._labelClicked.emit({
+                        sender: this,
+                        args: outerArgs
+                    });
+                });
+            }
+            return this._labelClicked;
+        }
+        get indexTypeChanged() {
+            if (this._indexTypeChanged == null) {
+                this._indexTypeChanged = new EventEmitter();
+                this.i.indexTypeChanged = delegateCombine(this.i.indexTypeChanged, (o, e) => {
+                    this._runInZone(() => {
+                        let outerArgs = new IgxCheckboxListIndexTypeChangedEventArgs();
+                        outerArgs._provideImplementation(e);
+                        if (this.beforeIndexTypeChanged) {
+                            this.beforeIndexTypeChanged(this, outerArgs);
+                        }
+                        this._indexTypeChanged.emit({
+                            sender: this,
+                            args: outerArgs
+                        });
+                    });
+                });
+            }
+            return this._indexTypeChanged;
+        }
+        get keysCleared() {
+            if (this._keysCleared == null) {
+                this._keysCleared = new EventEmitter();
+                this.i.keysCleared = delegateCombine(this.i.keysCleared, (o, e) => {
+                    this._runInZone(() => {
+                        let outerArgs = new IgxCheckboxListKeysClearedEventArgs();
+                        outerArgs._provideImplementation(e);
+                        if (this.beforeKeysCleared) {
+                            this.beforeKeysCleared(this, outerArgs);
+                        }
+                        this._keysCleared.emit({
+                            sender: this,
+                            args: outerArgs
+                        });
+                    });
+                });
+            }
+            return this._keysCleared;
+        }
+        /**
+         * Called when the SelectAll checkbox is checked or unchecked.
+        */
+        get selectAllCheckboxChanged() {
+            if (this._selectAllCheckboxChanged == null) {
+                this._selectAllCheckboxChanged = new EventEmitter();
+                this.i.selectAllCheckboxChanged = delegateCombine(this.i.selectAllCheckboxChanged, (o, e) => {
+                    let outerArgs = new IgxSelectAllCheckboxChangedEventArgs();
+                    outerArgs._provideImplementation(e);
+                    if (this.beforeSelectAllCheckboxChanged) {
+                        this.beforeSelectAllCheckboxChanged(this, outerArgs);
+                    }
+                    this._selectAllCheckboxChanged.emit({
+                        sender: this,
+                        args: outerArgs
+                    });
+                });
+            }
+            return this._selectAllCheckboxChanged;
+        }
+        _runInZone(act) {
+            if (this._zoneRunner != null) {
+                this._zoneRunner(act);
+            }
+            else {
+                act();
+            }
+        }
+    }
+    IgxCheckboxListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxCheckboxListComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ViewContainerRef }, { token: i0.NgZone }, { token: i0.Injector }, { token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Component });
+    IgxCheckboxListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: IgxCheckboxListComponent, selector: "igx-checkbox-list", inputs: { height: "height", width: "width", dataSource: "dataSource", keys: "keys", primaryKey: "primaryKey", dataMemberPath: "dataMemberPath", dataLegendTarget: "dataLegendTarget", subtitleMemberPath: "subtitleMemberPath", propertyTypeMemberPath: "propertyTypeMemberPath", selectedMemberPath: "selectedMemberPath", filterPlaceholderText: "filterPlaceholderText", searchInputType: "searchInputType", rowHeight: "rowHeight", cellTextStyle: "cellTextStyle", indexType: "indexType", baseTheme: "baseTheme", density: "density", searchIconColor: "searchIconColor", searchBackgroundColor: "searchBackgroundColor", labelClickTriggersChange: "labelClickTriggersChange", searchTextColor: "searchTextColor", searchBorderColor: "searchBorderColor", searchTextStyle: "searchTextStyle", checkboxTickColor: "checkboxTickColor", checkboxCheckedBackgroundColor: "checkboxCheckedBackgroundColor", checkboxUncheckedBackgroundColor: "checkboxUncheckedBackgroundColor", checkboxCheckedBorderColor: "checkboxCheckedBorderColor", checkboxUncheckedBorderColor: "checkboxUncheckedBorderColor", checkboxCornerRadius: "checkboxCornerRadius", scrollbarStyle: "scrollbarStyle", scrollbarBackground: "scrollbarBackground", selectAllCaption: "selectAllCaption", selectAllCaptionTextColor: "selectAllCaptionTextColor", actualSelectAllCaptionTextColor: "actualSelectAllCaptionTextColor", showSelectAll: "showSelectAll", backgroundColor: "backgroundColor", rowHoverBackgroundColor: "rowHoverBackgroundColor", textColor: "textColor", showFilter: "showFilter", isRowHoverEnabled: "isRowHoverEnabled", checkboxAlignedRight: "checkboxAlignedRight" }, outputs: { selectedKeyAdded: "selectedKeyAdded", selectedKeyRemoved: "selectedKeyRemoved", checkedChanged: "checkedChanged", labelClicked: "labelClicked", indexTypeChanged: "indexTypeChanged", keysCleared: "keysCleared", selectAllCheckboxChanged: "selectAllCheckboxChanged" }, host: { classAttribute: "ig-checkbox-list igx-checkbox-list" }, providers: [], viewQueries: [{ propertyName: "_listGrid", first: true, predicate: ["listGrid"], descendants: true, read: IgxDataGridComponent, static: true }, { propertyName: "_listContainer", first: true, predicate: ["listContainer"], descendants: true, read: ElementRef, static: true }, { propertyName: "_hrElement", first: true, predicate: ["hrElement"], descendants: true, read: ElementRef, static: true }, { propertyName: "_selectAllSection", first: true, predicate: ["selectAllSection"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: `<div #listContainer style="width: 100%; height: 100%">
+                <div>             
+                </div>
+                <hr #hrElement>
+                <div #selectAllSection key='checkBoxListSelectAllSection'></div>
+                <igx-data-grid #listGrid headerHeight="0"></igx-data-grid>
+                </div>`, isInline: true, styles: ["\n\t\t:host {\n\t\t\tdisplay: block;\n\t\t}\n\t"], components: [{ type: i1.IgxDataGridComponent, selector: "igx-data-grid", inputs: ["height", "width", "dataSource", "columnResizingMode", "columnMovingMode", "isRowHoverEnabled", "rowHoverBackground", "rowHoverTextColor", "editRowBorder", "editRowBorderWidthBottom", "editRowBorderWidthLeft", "editRowBorderWidthRight", "editRowBorderWidthTop", "sectionHeader", "summaryRowRoot", "summaryRowSection", "rowSeparator", "headerRowSeparator", "headerSeparator", "columnResizingSeparator", "columnMovingSeparator", "pinnedAreaSeparator", "autoGenerateDesiredProperties", "dataSourceDesiredProperties", "density", "actualRowHeight", "rowHeight", "defaultColumnMinWidth", "actualHeaderHeight", "headerHeight", "headerClickAction", "editMode", "editModeClickAction", "editOnKeyPress", "autoGenerateColumns", "rowSeparatorHeight", "isPlaceholderRenderingEnabled", "columnAddingAnimationMode", "columnPropertyUpdatingAnimationMode", "cellDataLoadedAnimationMode", "rowSelectionAnimationMode", "rowHoverAnimationMode", "cellSelectionAnimationMode", "animationSettings", "columnResizingAnimationMode", "columnShowingAnimationMode", "columnMovingAnimationMode", "columnHidingAnimationMode", "columnExchangingAnimationMode", "selectionMode", "activationMode", "selectionBehavior", "mouseDragSelectionEnabled", "selectedItems", "selectedKeys", "selectedCells", "selectedCellRanges", "pinnedItems", "pinnedKeys", "isColumnOptionsEnabled", "isGroupRowSticky", "isHeaderSeparatorVisible", "cellSelectedBackground", "sectionHeaderSelectedBackground", "summaryRootBackground", "summarySectionBackground", "pinnedRowOpacity", "editTextStyle", "editOpacity", "deletedTextColor", "stickyRowBackground", "pinnedRowBackground", "lastStickyRowBackground", "activeCell", "cellBackground", "cellTextColor", "headerSortIndicatorColor", "headerSortIndicatorStyle", "cellTextStyle", "sectionHeaderBackground", "sectionHeaderTextColor", "sectionHeaderTextStyle", "summaryRootLabelTextStyle", "summarySectionLabelTextStyle", "summaryRootValueTextColor", "summaryRootValueTextStyle", "summarySectionValueTextStyle", "summarySectionValueTextColor", "summaryRootLabelTextColor", "summarySectionLabelTextColor", "summaryRootSelectedBackground", "summarySectionSelectedBackground", "pinnedAreaSeparatorWidth", "headerSeparatorWidth", "headerSeparatorBackground", "headerBackground", "headerTextColor", "headerTextStyle", "rowSeparatorBackground", "headerRowSeparatorBackground", "rowSeparatorStickyRowBackground", "rowSeparatorLastStickyRowBackground", "rowSeparatorPinnedRowBackground", "columnResizingSeparatorWidth", "columnResizingSeparatorOpacity", "columnMovingSeparatorWidth", "columnMovingSeparatorOpacity", "columnResizingSeparatorBackground", "columnMovingSeparatorBackground", "shiftSectionContent", "columnOptionsIconAlignment", "columnOptionsIconColor", "columnOptionsIconBehavior", "border", "actualBorderWidth", "borderWidthBottom", "borderWidthLeft", "borderWidthRight", "borderWidthTop", "notifyOnAllSelectionChanges", "cornerRadiusBottomRight", "cornerRadiusBottomLeft", "cornerRadiusTopLeft", "cornerRadiusTopRight", "actualCornerRadiusBottomRight", "actualCornerRadiusBottomLeft", "actualCornerRadiusTopLeft", "actualCornerRadiusTopRight", "isActiveCellStyleEnabled", "responsiveStates", "initialSorts", "initialGroups", "initialSummaries", "summaryScope", "isGroupCollapsable", "groupHeaderDisplayMode", "isGroupExpandedDefault", "groupSummaryDisplayMode", "autoAcceptEdits", "primaryKey", "actualPrimaryKey", "actualColumns", "reactsToSortChanges", "reactsToGroupChanges", "reactsToFilterChanges", "enterBehavior", "enterBehaviorAfterEdit", "isColumnOptionsSummariesEnabled", "isColumnOptionsGroupingEnabled", "mergedCellMode", "mergedCellEvaluationCriteria", "mergedCellVerticalAlignment", "filterUIType", "filterLogicalOperator", "filterComparisonType", "todayOverride", "clearSelectionOnEscape", "pageSize", "isToolbarColumnChooserVisible", "isToolbarColumnPinningVisible", "toolbarTitle", "toolbarColumnChooserText", "toolbarColumnChooserTitle", "toolbarColumnPinningText", "toolbarColumnPinningTitle", "scrollbarStyle", "scrollbarBackground", "allowCopyOperation", "deferEventForRowDragSelection"], outputs: ["filterExpressionsChanging", "filterExpressionsChanged", "cellPreviewPointerDown", "cellPreviewPointerUp", "cellPointerDown", "cellPointerUp", "cellClicked", "sortDescriptionsChanged", "groupDescriptionsChanged", "summaryDescriptionsChanged", "columnHiddenChanged", "columnPinnedChanged", "cellValueChanging", "dataCommitted", "dataCommitting", "rootSummariesChanged", "sizeChanged", "actualColumnsChanged", "columnsAutoGenerated", "selectedItemsChanged", "selectedKeysChanged", "selectedCellsChanged", "selectionChanged", "activeCellChanged", "selectedCellRangesChanged", "columnWidthChanged", "cellEditStarted", "cellEditEnded", "rowEditStarted", "rowEditEnded", "customFilterRequested", "actualPrimaryKeyChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    return IgxCheckboxListComponent;
+})();
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxCheckboxListComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'igx-checkbox-list',
+                    template: `<div #listContainer style="width: 100%; height: 100%">
+                <div>             
+                </div>
+                <hr #hrElement>
+                <div #selectAllSection key='checkBoxListSelectAllSection'></div>
+                <igx-data-grid #listGrid headerHeight="0"></igx-data-grid>
+                </div>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [],
+                    host: { 'class': 'ig-checkbox-list igx-checkbox-list' },
+                    styles: [`
+		:host {
+			display: block;
+		}
+	`]
+                }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ViewContainerRef }, { type: i0.NgZone }, { type: i0.Injector }, { type: i0.ComponentFactoryResolver }]; }, propDecorators: { _listGrid: [{
+                type: ViewChild,
+                args: ["listGrid", { read: IgxDataGridComponent, static: true }]
+            }], _listContainer: [{
+                type: ViewChild,
+                args: ["listContainer", { read: ElementRef, static: true }]
+            }], _hrElement: [{
+                type: ViewChild,
+                args: ["hrElement", { read: ElementRef, static: true }]
+            }], _selectAllSection: [{
+                type: ViewChild,
+                args: ['selectAllSection', { read: ElementRef, static: true }]
+            }], height: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], dataSource: [{
+                type: Input
+            }], keys: [{
+                type: Input
+            }], primaryKey: [{
+                type: Input
+            }], dataMemberPath: [{
+                type: Input
+            }], dataLegendTarget: [{
+                type: Input
+            }], subtitleMemberPath: [{
+                type: Input
+            }], propertyTypeMemberPath: [{
+                type: Input
+            }], selectedMemberPath: [{
+                type: Input
+            }], filterPlaceholderText: [{
+                type: Input
+            }], searchInputType: [{
+                type: Input
+            }], rowHeight: [{
+                type: Input
+            }], cellTextStyle: [{
+                type: Input
+            }], indexType: [{
+                type: Input
+            }], baseTheme: [{
+                type: Input
+            }], density: [{
+                type: Input
+            }], searchIconColor: [{
+                type: Input
+            }], searchBackgroundColor: [{
+                type: Input
+            }], labelClickTriggersChange: [{
+                type: Input
+            }], searchTextColor: [{
+                type: Input
+            }], searchBorderColor: [{
+                type: Input
+            }], searchTextStyle: [{
+                type: Input
+            }], checkboxTickColor: [{
+                type: Input
+            }], checkboxCheckedBackgroundColor: [{
+                type: Input
+            }], checkboxUncheckedBackgroundColor: [{
+                type: Input
+            }], checkboxCheckedBorderColor: [{
+                type: Input
+            }], checkboxUncheckedBorderColor: [{
+                type: Input
+            }], checkboxCornerRadius: [{
+                type: Input
+            }], scrollbarStyle: [{
+                type: Input
+            }], scrollbarBackground: [{
+                type: Input
+            }], selectAllCaption: [{
+                type: Input
+            }], selectAllCaptionTextColor: [{
+                type: Input
+            }], actualSelectAllCaptionTextColor: [{
+                type: Input
+            }], showSelectAll: [{
+                type: Input
+            }], backgroundColor: [{
+                type: Input
+            }], rowHoverBackgroundColor: [{
+                type: Input
+            }], textColor: [{
+                type: Input
+            }], showFilter: [{
+                type: Input
+            }], isRowHoverEnabled: [{
+                type: Input
+            }], checkboxAlignedRight: [{
+                type: Input
+            }], selectedKeyAdded: [{
+                type: Output
+            }], selectedKeyRemoved: [{
+                type: Output
+            }], checkedChanged: [{
+                type: Output
+            }], labelClicked: [{
+                type: Output
+            }], indexTypeChanged: [{
+                type: Output
+            }], keysCleared: [{
+                type: Output
+            }], selectAllCheckboxChanged: [{
+                type: Output
+            }] } });