igniteui-webcomponents-data-grids 5.5.0-beta.0

package/esm5/lib/igc-checkbox-list-component.js

@@ -0,0 +1,1149 @@
+import { __extends } from "tslib";
+import { fromSize, toSize, ensureEnum, brushToString, stringToBrush, ensureBool, initializePropertiesFromCss, NamePatcher, toSpinal, enumToString, getAllPropertyNames, fromSpinal } from "igniteui-webcomponents-core";
+import { FontInfo } from "igniteui-webcomponents-core";
+import { WebComponentRenderer } from "igniteui-webcomponents-core";
+import { delegateCombine, delegateRemove } from "igniteui-webcomponents-core";
+import { SyncableObservableCollection$1 } from "igniteui-webcomponents-core";
+import { TypeRegistrar } from "igniteui-webcomponents-core";
+import { RegisterElementHelper } from "igniteui-webcomponents-core";
+import { CheckboxList } from './CheckboxList';
+import { IgcCheckedChangedEventArgs } from "./igc-checked-changed-event-args";
+import { IgcSelectAllCheckboxChangedEventArgs } from "./igc-select-all-checkbox-changed-event-args";
+import { PrimaryKeyValue } from "./PrimaryKeyValue";
+import { IgcGridSelectedKeysCollection } from "./igc-grid-selected-keys-collection";
+import { GridSelectedKeysCollection as GridSelectedKeysCollection_internal } from "./GridSelectedKeysCollection";
+import { CheckboxListIndexType_$type } from "./CheckboxListIndexType";
+import { InputGroupDisplayType_$type } from "igniteui-webcomponents-inputs";
+import { BaseControlTheme_$type } from "igniteui-webcomponents-core";
+import { ControlDisplayDensity_$type } from "igniteui-webcomponents-core";
+import { ScrollbarStyle_$type } from "igniteui-webcomponents-core";
+import { IgcHTMLElement } from "igniteui-webcomponents-core";
+import { IgcCheckboxListIndexTypeChangedEventArgs } from './igc-checkbox-list-index-type-changed-event-args';
+import { IgcCheckboxListKeysClearedEventArgs } from './igc-checkbox-list-keys-cleared-event-args';
+var IgcCheckboxListComponent = /** @class */ /*@__PURE__*/ (function (_super) {
+    __extends(IgcCheckboxListComponent, _super);
+    function IgcCheckboxListComponent() {
+        var _this = _super.call(this) || this;
+        _this._dataSource = null;
+        _this._disconnected = false;
+        _this._settingAttributes = false;
+        _this._attached = false;
+        _this._queuedSetAttributes = [];
+        _this._updatingFromAttribute = false;
+        _this._keys = null;
+        _this.__p = null;
+        _this._hasUserValues = new Set();
+        _this._stylingContainer = null;
+        _this._stylingParent = null;
+        _this._inStyling = false;
+        _this._selectedKeyAdded = null;
+        _this._selectedKeyAdded_wrapped = null;
+        _this._selectedKeyRemoved = null;
+        _this._selectedKeyRemoved_wrapped = null;
+        _this._checkedChanged = null;
+        _this._checkedChanged_wrapped = null;
+        _this._labelClicked = null;
+        _this._labelClicked_wrapped = null;
+        _this._indexTypeChanged = null;
+        _this._indexTypeChanged_wrapped = null;
+        _this._keysCleared = null;
+        _this._keysCleared_wrapped = null;
+        _this._selectAllCheckboxChanged = null;
+        _this._selectAllCheckboxChanged_wrapped = null;
+        if (_this._styling) {
+            NamePatcher.ensureStylablePatched(Object.getPrototypeOf(_this));
+        }
+        _this._renderer = new WebComponentRenderer(_this, document, true, null);
+        _this._implementation = _this.createImplementation();
+        _this._container = _this._renderer.createElement("div");
+        _this._renderer.updateRoot(_this._container);
+        _this._container.setStyleProperty("display", "block");
+        _this._container.setStyleProperty("width", "100%");
+        _this._container.setStyleProperty("height", "100%");
+        var checkboxList = _this.i;
+        _this._checkboxList = checkboxList;
+        _this._renderer.addSizeWatcher(function () {
+            _this._checkboxList.notifySizeChanged();
+        });
+        return _this;
+    }
+    Object.defineProperty(IgcCheckboxListComponent.prototype, "height", {
+        get: function () {
+            return this._height;
+        },
+        set: function (value) {
+            this._height = value;
+            this.style.height = value;
+            this.i.notifySizeChanged();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcCheckboxListComponent.prototype, "width", {
+        get: function () {
+            return this._width;
+        },
+        set: function (value) {
+            this._width = value;
+            this.style.width = value;
+            this.i.notifySizeChanged();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcCheckboxListComponent.prototype, "dataSource", {
+        get: function () {
+            return this._dataSource;
+        },
+        set: function (value) {
+            this._dataSource = value;
+            if (this._checkboxList != null) {
+                this._checkboxList.itemsSource = this._dataSource;
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    // supports angular themes or custom properties set in CSS
+    IgcCheckboxListComponent.prototype.updateStyle = function () {
+        this._styling(this, this);
+    };
+    IgcCheckboxListComponent.prototype.destroy = function () {
+        this._checkboxList.destroy();
+    };
+    IgcCheckboxListComponent.prototype.createImplementation = function () {
+        return new CheckboxList();
+    };
+    IgcCheckboxListComponent.prototype.disconnectedCallback = function () {
+        this._disconnected = true;
+    };
+    IgcCheckboxListComponent.prototype.connectedCallback = function () {
+        if (this._disconnected) {
+            this._disconnected = false;
+            return;
+        }
+        this.classList.add("ig-checkbox-list");
+        this.classList.add("igc-checkbox-list");
+        var rootWrapper = this._renderer.rootWrapper;
+        var rootElement = rootWrapper.getNativeElement();
+        this.appendChild(rootElement);
+        this._attached = true;
+        this.style.display = "block";
+        this.style.height = this._height;
+        this.style.width = this._width;
+        var filterContainer = this._renderer.createElement("div");
+        this._container.append(filterContainer);
+        var filterHr = this._renderer.createElement("hr");
+        this._container.append(filterHr);
+        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 filterInput = this._renderer.createElement("input");
+        filterInput.getNativeElement().type = "text";
+        filterContainer.append(filterInput);*/
+        var selectAllSection = this._renderer.createElement("div");
+        this._container.append(selectAllSection);
+        var grid = this._renderer.createElement("igc-data-grid");
+        grid.getNativeElement().headerHeight = 0;
+        this._container.append(grid);
+        this._checkboxList.provideContainer(this._renderer, grid.getNativeElement().i, selectAllSection);
+        this._checkboxList.notifySizeChanged();
+        this._flushQueuedAttributes();
+        // supports themes or custom properties set in CSS 
+        this._styling(this, this);
+        this.afterContentInit();
+    };
+    IgcCheckboxListComponent.prototype.afterContentInit = function () {
+        this.i.notifySizeChanged();
+    };
+    Object.defineProperty(IgcCheckboxListComponent.prototype, "i", {
+        /**
+         * @hidden
+         */
+        get: function () {
+            return this._implementation;
+        } /**
+                                     * @hidden
+                                     */,
+        enumerable: false,
+        configurable: true
+    });
+    IgcCheckboxListComponent._createFromInternal = function (internal) {
+        if (!internal) {
+            return null;
+        }
+        if (!internal.$type) {
+            return null;
+        }
+        var name = internal.$type.name;
+        var externalName = "Igc" + name + "Component";
+        if (!TypeRegistrar.isRegistered(externalName)) {
+            return null;
+        }
+        return TypeRegistrar.create(externalName);
+    };
+    IgcCheckboxListComponent.prototype._enqueueSetAttribute = function (attrName, attrValue) {
+        this._queuedSetAttributes.push({ attrName: attrName, attrValue: attrValue });
+    };
+    IgcCheckboxListComponent.prototype._flushQueuedAttributes = function () {
+        this._settingAttributes = true;
+        for (var i = 0; i < this._queuedSetAttributes.length; i++) {
+            this.setAttribute(this._queuedSetAttributes[i].attrName, this._queuedSetAttributes[i].attrValue);
+        }
+        this._settingAttributes = false;
+        this._queuedSetAttributes.length = 0;
+    };
+    IgcCheckboxListComponent.prototype._a = function (attrName, attrValue) {
+        if (this._updatingFromAttribute) {
+            return;
+        }
+        if (attrValue) {
+            attrValue = attrValue.toString();
+        }
+        this._settingAttributes = true;
+        attrName = toSpinal(attrName);
+        if (this._attached) {
+            this.setAttribute(attrName, attrValue);
+        }
+        else {
+            this._enqueueSetAttribute(attrName, attrValue);
+        }
+        this._settingAttributes = false;
+    };
+    Object.defineProperty(IgcCheckboxListComponent, "observedAttributes", {
+        get: function () {
+            if (IgcCheckboxListComponent._observedAttributesIgcCheckboxListComponent == null) {
+                var names = getAllPropertyNames(IgcCheckboxListComponent);
+                for (var i = 0; i < names.length; i++) {
+                    names[i] = toSpinal(names[i]);
+                }
+                IgcCheckboxListComponent._observedAttributesIgcCheckboxListComponent = names;
+            }
+            return IgcCheckboxListComponent._observedAttributesIgcCheckboxListComponent;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    IgcCheckboxListComponent.prototype.attributeChangedCallback = function (name, oldValue, newValue) {
+        if (this._settingAttributes) {
+            return;
+        }
+        var setName = fromSpinal(name);
+        this._updatingFromAttribute = true;
+        this[setName] = newValue;
+        this._updatingFromAttribute = false;
+    };
+    IgcCheckboxListComponent.register = function () {
+        if (!IgcCheckboxListComponent._isElementRegistered) {
+            IgcCheckboxListComponent._isElementRegistered = true;
+            RegisterElementHelper.registerElement(IgcCheckboxListComponent.htmlTagName, IgcCheckboxListComponent);
+        }
+    };
+    Object.defineProperty(IgcCheckboxListComponent.prototype, "keys", {
+        /**
+         * 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: function () {
+            if (this._keys === null) {
+                var coll = new IgcGridSelectedKeysCollection();
+                var innerColl = this.i.keys;
+                if (!innerColl) {
+                    innerColl = new GridSelectedKeysCollection_internal();
+                }
+                this._keys = coll._fromInner(innerColl);
+            }
+            return this._keys;
+        },
+        set: function (v) {
+            if (this._keys !== null) {
+                this._keys._setSyncTarget(null);
+                this._keys = null;
+            }
+            var coll = new IgcGridSelectedKeysCollection();
+            this._keys = coll._fromOuter(v);
+            var syncColl = new SyncableObservableCollection$1(PrimaryKeyValue.$type);
+            var innerColl = this.i.keys;
+            if (!innerColl) {
+                innerColl = new GridSelectedKeysCollection_internal();
+            }
+            syncColl._inner = innerColl;
+            syncColl.clear();
+            this._keys._setSyncTarget(syncColl);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcCheckboxListComponent.prototype, "primaryKey", {
+        /**
+         * Gets or sets the primary key to use for the CheckboxList.
+        */
+        get: function () {
+            return this.i.primaryKey;
+        },
+        set: function (v) {
+            if (v && !Array.isArray(v) && typeof (v) == "string") {
+                var re = /\s*(?:,|\s|$)\s*/gm;
+                v = v.split(re);
+            }
+            this.i.primaryKey = v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcCheckboxListComponent.prototype, "dataMemberPath", {
+        /**
+         * Gets or Sets the property name that contains the values.
+        */
+        get: function () {
+            return this.i.dataMemberPath;
+        },
+        set: function (v) {
+            this.i.dataMemberPath = v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcCheckboxListComponent.prototype, "dataLegendTarget", {
+        get: function () {
+            return this.i.bh;
+        },
+        set: function (v) {
+            this.i.bh = v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcCheckboxListComponent.prototype, "subtitleMemberPath", {
+        /**
+         * Gets or Sets the property name that contains the values.
+        */
+        get: function () {
+            return this.i.cw;
+        },
+        set: function (v) {
+            this.i.cw = v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcCheckboxListComponent.prototype, "propertyTypeMemberPath", {
+        get: function () {
+            return this.i.cb;
+        },
+        set: function (v) {
+            this.i.cb = v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcCheckboxListComponent.prototype, "selectedMemberPath", {
+        /**
+         * Gets or Sets the property name that contains the values.
+        */
+        get: function () {
+            return this.i.selectedMemberPath;
+        },
+        set: function (v) {
+            this.i.selectedMemberPath = v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcCheckboxListComponent.prototype, "filterPlaceholderText", {
+        /**
+         * Gets or Sets the property name that contains the values.
+        */
+        get: function () {
+            return this.i.b4;
+        },
+        set: function (v) {
+            this.i.b4 = v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcCheckboxListComponent.prototype, "searchInputType", {
+        /**
+         * Gets or Sets the property name that contains the values.
+        */
+        get: function () {
+            return this.i.y;
+        },
+        set: function (v) {
+            this.i.y = ensureEnum(InputGroupDisplayType_$type, v);
+            this._a("searchInputType", enumToString(InputGroupDisplayType_$type, this.i.y));
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcCheckboxListComponent.prototype, "rowHeight", {
+        /**
+         * Gets or Sets the property name that contains the values.
+        */
+        get: function () {
+            return this.i.be;
+        },
+        set: function (v) {
+            this.i.be = +v;
+            this._a("rowHeight", this.i.be);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcCheckboxListComponent.prototype, "actualRowHeight", {
+        get: function () {
+            return this.i.bc;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcCheckboxListComponent.prototype, "cellTextStyle", {
+        /**
+         * Gets or Sets the property name that contains the values.
+        */
+        get: function () {
+            if (this.i.am == null) {
+                return null;
+            }
+            return this.i.am.fontString;
+        },
+        set: function (v) {
+            var fi = new FontInfo();
+            fi.fontString = v;
+            this.i.am = fi;
+            this._a("cellTextStyle", this.i.am != null ? this.i.am.fontString : "");
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcCheckboxListComponent.prototype, "indexType", {
+        /**
+         * Gets or Sets the property name that contains the values.
+        */
+        get: function () {
+            return this.i.indexType;
+        },
+        set: function (v) {
+            this.i.indexType = ensureEnum(CheckboxListIndexType_$type, v);
+            this._a("indexType", enumToString(CheckboxListIndexType_$type, this.i.indexType));
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcCheckboxListComponent.prototype, "baseTheme", {
+        /**
+         * Gets or Sets the property name that contains the values.
+        */
+        get: function () {
+            return this.i.baseTheme;
+        },
+        set: function (v) {
+            this.i.baseTheme = ensureEnum(BaseControlTheme_$type, v);
+            this._a("baseTheme", enumToString(BaseControlTheme_$type, this.i.baseTheme));
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcCheckboxListComponent.prototype, "density", {
+        /**
+         * Gets or Sets the property name that contains the values.
+        */
+        get: function () {
+            return this.i.density;
+        },
+        set: function (v) {
+            this.i.density = ensureEnum(ControlDisplayDensity_$type, v);
+            this._a("density", enumToString(ControlDisplayDensity_$type, this.i.density));
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcCheckboxListComponent.prototype, "searchIconColor", {
+        /**
+         * Gets or sets the search icon color.
+        */
+        get: function () {
+            return brushToString(this.i.searchIconColor);
+        },
+        set: function (v) {
+            this.i.searchIconColor = stringToBrush(v);
+            this._a("searchIconColor", brushToString(this.i.searchIconColor));
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcCheckboxListComponent.prototype, "searchBackgroundColor", {
+        /**
+         * Gets or sets the search background color.
+        */
+        get: function () {
+            return brushToString(this.i.e1);
+        },
+        set: function (v) {
+            this.i.e1 = stringToBrush(v);
+            this._a("searchBackgroundColor", brushToString(this.i.e1));
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcCheckboxListComponent.prototype, "labelClickTriggersChange", {
+        /**
+         * Gets or sets the search background color.
+        */
+        get: function () {
+            return this.i.a1;
+        },
+        set: function (v) {
+            this.i.a1 = ensureBool(v);
+            this._a("labelClickTriggersChange", this.i.a1);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcCheckboxListComponent.prototype, "searchTextColor", {
+        /**
+         * Gets or sets the search text color.
+        */
+        get: function () {
+            return brushToString(this.i.searchTextColor);
+        },
+        set: function (v) {
+            this.i.searchTextColor = stringToBrush(v);
+            this._a("searchTextColor", brushToString(this.i.searchTextColor));
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcCheckboxListComponent.prototype, "searchBorderColor", {
+        /**
+         * Gets or sets the search border color.
+        */
+        get: function () {
+            return brushToString(this.i.e2);
+        },
+        set: function (v) {
+            this.i.e2 = stringToBrush(v);
+            this._a("searchBorderColor", brushToString(this.i.e2));
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcCheckboxListComponent.prototype, "searchTextStyle", {
+        /**
+         * Gets or sets the text style.
+        */
+        get: function () {
+            if (this.i.an == null) {
+                return null;
+            }
+            return this.i.an.fontString;
+        },
+        set: function (v) {
+            var fi = new FontInfo();
+            fi.fontString = v;
+            this.i.an = fi;
+            this._a("searchTextStyle", this.i.an != null ? this.i.an.fontString : "");
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcCheckboxListComponent.prototype, "checkboxTickColor", {
+        /**
+         * Gets or sets the checkbox tick color.
+        */
+        get: function () {
+            return brushToString(this.i.et);
+        },
+        set: function (v) {
+            this.i.et = stringToBrush(v);
+            this._a("checkboxTickColor", brushToString(this.i.et));
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcCheckboxListComponent.prototype, "checkboxCheckedBackgroundColor", {
+        /**
+         * Gets or sets the checkbox background color when checked.
+        */
+        get: function () {
+            return brushToString(this.i.er);
+        },
+        set: function (v) {
+            this.i.er = stringToBrush(v);
+            this._a("checkboxCheckedBackgroundColor", brushToString(this.i.er));
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcCheckboxListComponent.prototype, "checkboxUncheckedBackgroundColor", {
+        /**
+         * Gets or sets the checkbox background color when unchecked.
+        */
+        get: function () {
+            return brushToString(this.i.eu);
+        },
+        set: function (v) {
+            this.i.eu = stringToBrush(v);
+            this._a("checkboxUncheckedBackgroundColor", brushToString(this.i.eu));
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcCheckboxListComponent.prototype, "checkboxCheckedBorderColor", {
+        /**
+         * Gets or sets the checkbox border color when checked.
+        */
+        get: function () {
+            return brushToString(this.i.es);
+        },
+        set: function (v) {
+            this.i.es = stringToBrush(v);
+            this._a("checkboxCheckedBorderColor", brushToString(this.i.es));
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcCheckboxListComponent.prototype, "checkboxUncheckedBorderColor", {
+        /**
+         * Gets or sets the checkbox border color when unchecked.
+        */
+        get: function () {
+            return brushToString(this.i.ev);
+        },
+        set: function (v) {
+            this.i.ev = stringToBrush(v);
+            this._a("checkboxUncheckedBorderColor", brushToString(this.i.ev));
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcCheckboxListComponent.prototype, "checkboxCornerRadius", {
+        /**
+         * Gets or sets the corner radius to use for the checkbox.
+        */
+        get: function () {
+            return this.i.a7;
+        },
+        set: function (v) {
+            this.i.a7 = +v;
+            this._a("checkboxCornerRadius", this.i.a7);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcCheckboxListComponent.prototype, "scrollbarStyle", {
+        /**
+         * Gets or sets the style of scrollbar.
+        */
+        get: function () {
+            return this.i.ab;
+        },
+        set: function (v) {
+            this.i.ab = ensureEnum(ScrollbarStyle_$type, v);
+            this._a("scrollbarStyle", enumToString(ScrollbarStyle_$type, this.i.ab));
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcCheckboxListComponent.prototype, "scrollbarBackground", {
+        /**
+         * Gets or sets the scrollbar background color.
+        */
+        get: function () {
+            return brushToString(this.i.e0);
+        },
+        set: function (v) {
+            this.i.e0 = stringToBrush(v);
+            this._a("scrollbarBackground", brushToString(this.i.e0));
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcCheckboxListComponent.prototype, "selectAllCaption", {
+        /**
+         * Gets / sets the caption of the "Select All" checkbox.
+        */
+        get: function () {
+            return this.i.cp;
+        },
+        set: function (v) {
+            this.i.cp = v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcCheckboxListComponent.prototype, "selectAllCaptionTextColor", {
+        /**
+         * Gets or sets the color to use for the "Select All" label.
+        */
+        get: function () {
+            return brushToString(this.i.e5);
+        },
+        set: function (v) {
+            this.i.e5 = stringToBrush(v);
+            this._a("selectAllCaptionTextColor", brushToString(this.i.e5));
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcCheckboxListComponent.prototype, "actualSelectAllCaptionTextColor", {
+        /**
+         * Gets or sets the color to use for the actual header selectAllCaption text.
+        */
+        get: function () {
+            return brushToString(this.i.ep);
+        },
+        set: function (v) {
+            this.i.ep = stringToBrush(v);
+            this._a("actualSelectAllCaptionTextColor", brushToString(this.i.ep));
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcCheckboxListComponent.prototype, "showSelectAll", {
+        /**
+         * Gets / sets whether the "Select all" checkbox is visible.
+        */
+        get: function () {
+            return this.i.showSelectAll;
+        },
+        set: function (v) {
+            this.i.showSelectAll = ensureBool(v);
+            this._a("showSelectAll", this.i.showSelectAll);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcCheckboxListComponent.prototype, "backgroundColor", {
+        /**
+         * Gets or sets the color to use for the background of the component.
+        */
+        get: function () {
+            return brushToString(this.i.backgroundColor);
+        },
+        set: function (v) {
+            this.i.backgroundColor = stringToBrush(v);
+            this._a("backgroundColor", brushToString(this.i.backgroundColor));
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcCheckboxListComponent.prototype, "rowHoverBackgroundColor", {
+        /**
+         * Gets or sets the color to use when hovering over a grid row.
+        */
+        get: function () {
+            return brushToString(this.i.rowHoverBackgroundColor);
+        },
+        set: function (v) {
+            this.i.rowHoverBackgroundColor = stringToBrush(v);
+            this._a("rowHoverBackgroundColor", brushToString(this.i.rowHoverBackgroundColor));
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcCheckboxListComponent.prototype, "textColor", {
+        /**
+         * Gets or sets the color to use for the text of the component.
+        */
+        get: function () {
+            return brushToString(this.i.e7);
+        },
+        set: function (v) {
+            this.i.e7 = stringToBrush(v);
+            this._a("textColor", brushToString(this.i.e7));
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcCheckboxListComponent.prototype, "showFilter", {
+        /**
+         * Gets or sets whether the filter input is visible.
+        */
+        get: function () {
+            return this.i.a3;
+        },
+        set: function (v) {
+            this.i.a3 = ensureBool(v);
+            this._a("showFilter", this.i.a3);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcCheckboxListComponent.prototype, "isRowHoverEnabled", {
+        /**
+         * Gets or sets whether row hover highlighting is enabled.
+        */
+        get: function () {
+            return this.i.az;
+        },
+        set: function (v) {
+            this.i.az = ensureBool(v);
+            this._a("isRowHoverEnabled", this.i.az);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcCheckboxListComponent.prototype, "checkboxAlignedRight", {
+        /**
+         * Gets or sets whether checkbox should be displayed to the right.
+        */
+        get: function () {
+            return this.i.av;
+        },
+        set: function (v) {
+            this.i.av = ensureBool(v);
+            this._a("checkboxAlignedRight", this.i.av);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    IgcCheckboxListComponent.prototype.findByName = function (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;
+    };
+    Object.defineProperty(IgcCheckboxListComponent.prototype, "hasUserValues", {
+        get: function () {
+            return this._hasUserValues;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    IgcCheckboxListComponent.prototype.__m = function (propertyName) {
+        if (!this._inStyling) {
+            this._hasUserValues.add(propertyName);
+        }
+    };
+    IgcCheckboxListComponent.prototype._styling = function (container, component, parent) {
+        if (this._inStyling) {
+            return;
+        }
+        this._inStyling = true;
+        this._stylingContainer = container;
+        this._stylingParent = component;
+        var genericPrefix = "";
+        var typeName = this.i.$type.name;
+        if (typeName.indexOf("Xam") === 0) {
+            typeName = typeName.substring(3);
+        }
+        genericPrefix = toSpinal("CheckboxListComponent");
+        var additionalPrefixes = [];
+        var prefix = toSpinal(typeName);
+        additionalPrefixes.push(prefix + "-");
+        var 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);
+            }
+            var basePrefix = toSpinal(typeName);
+            additionalPrefixes.push(basePrefix + "-");
+            b = b.baseType;
+        }
+        if (parent) {
+            var parentTypeName = parent.i.$type.name;
+            if (parentTypeName.indexOf("Xam") === 0) {
+                parentTypeName = parentTypeName.substring(3);
+            }
+            var 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.
+
+*/
+    IgcCheckboxListComponent.prototype.selectAll = function () {
+        this.i.d3();
+    };
+    /**
+     * Deselects all the items in the checkbox list.
+    
+    */
+    IgcCheckboxListComponent.prototype.deselectAll = function () {
+        this.i.c5();
+    };
+    IgcCheckboxListComponent.prototype.notifySetItem = function (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.
+    
+    */
+    IgcCheckboxListComponent.prototype.notifyClearItems = function () {
+        this.i.dc();
+    };
+    IgcCheckboxListComponent.prototype.notifyInsertItem = function (index, newItem) {
+        this.i.dd(index, newItem);
+    };
+    IgcCheckboxListComponent.prototype.notifyRemoveItem = function (index, oldItem) {
+        this.i.df(index, oldItem);
+    };
+    IgcCheckboxListComponent.prototype.refresh = function () {
+        this.i.refresh();
+    };
+    IgcCheckboxListComponent.prototype.addKeyValue = function (value) {
+        this.i.c0(value);
+    };
+    IgcCheckboxListComponent.prototype.removeKeyValue = function (value) {
+        this.i.d1(value);
+    };
+    IgcCheckboxListComponent.prototype.getDesiredSize = function (availableSize) {
+        var iv = this.i.getDesiredSize(toSize(availableSize));
+        return fromSize(iv);
+    };
+    /**
+     * Returns true if no items are selected / checked; otherwise false.
+    
+    */
+    IgcCheckboxListComponent.prototype.isNothingSelected = function () {
+        var iv = this.i.ax();
+        return (iv);
+    };
+    /**
+     * Returns true if all of the items are selected / checked; otherwise false.
+    
+    */
+    IgcCheckboxListComponent.prototype.isEverythingSelected = function () {
+        var iv = this.i.aw();
+        return (iv);
+    };
+    Object.defineProperty(IgcCheckboxListComponent.prototype, "selectedKeyAdded", {
+        /**
+         * Called when an item is added.
+        */
+        get: function () {
+            return this._selectedKeyAdded;
+        },
+        set: function (ev) {
+            var _this = this;
+            if (this._selectedKeyAdded_wrapped !== null) {
+                this.i.selectedKeyAdded = delegateRemove(this.i.selectedKeyAdded, this._selectedKeyAdded_wrapped);
+                this._selectedKeyAdded_wrapped = null;
+                this._selectedKeyAdded = null;
+            }
+            this._selectedKeyAdded = ev;
+            this._selectedKeyAdded_wrapped = function (o, e) {
+                var outerArgs = new IgcCheckedChangedEventArgs();
+                outerArgs._provideImplementation(e);
+                if (_this.beforeSelectedKeyAdded) {
+                    _this.beforeSelectedKeyAdded(_this, outerArgs);
+                }
+                if (_this._selectedKeyAdded) {
+                    _this._selectedKeyAdded(_this, outerArgs);
+                }
+            };
+            this.i.selectedKeyAdded = delegateCombine(this.i.selectedKeyAdded, this._selectedKeyAdded_wrapped);
+            ;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcCheckboxListComponent.prototype, "selectedKeyRemoved", {
+        /**
+         * Called when an item is removed.
+        */
+        get: function () {
+            return this._selectedKeyRemoved;
+        },
+        set: function (ev) {
+            var _this = this;
+            if (this._selectedKeyRemoved_wrapped !== null) {
+                this.i.selectedKeyRemoved = delegateRemove(this.i.selectedKeyRemoved, this._selectedKeyRemoved_wrapped);
+                this._selectedKeyRemoved_wrapped = null;
+                this._selectedKeyRemoved = null;
+            }
+            this._selectedKeyRemoved = ev;
+            this._selectedKeyRemoved_wrapped = function (o, e) {
+                var outerArgs = new IgcCheckedChangedEventArgs();
+                outerArgs._provideImplementation(e);
+                if (_this.beforeSelectedKeyRemoved) {
+                    _this.beforeSelectedKeyRemoved(_this, outerArgs);
+                }
+                if (_this._selectedKeyRemoved) {
+                    _this._selectedKeyRemoved(_this, outerArgs);
+                }
+            };
+            this.i.selectedKeyRemoved = delegateCombine(this.i.selectedKeyRemoved, this._selectedKeyRemoved_wrapped);
+            ;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcCheckboxListComponent.prototype, "checkedChanged", {
+        /**
+         * Called when a checkbox is checked or unchecked.
+        */
+        get: function () {
+            return this._checkedChanged;
+        },
+        set: function (ev) {
+            var _this = this;
+            if (this._checkedChanged_wrapped !== null) {
+                this.i.checkedChanged = delegateRemove(this.i.checkedChanged, this._checkedChanged_wrapped);
+                this._checkedChanged_wrapped = null;
+                this._checkedChanged = null;
+            }
+            this._checkedChanged = ev;
+            this._checkedChanged_wrapped = function (o, e) {
+                var outerArgs = new IgcCheckedChangedEventArgs();
+                outerArgs._provideImplementation(e);
+                if (_this.beforeCheckedChanged) {
+                    _this.beforeCheckedChanged(_this, outerArgs);
+                }
+                if (_this._checkedChanged) {
+                    _this._checkedChanged(_this, outerArgs);
+                }
+            };
+            this.i.checkedChanged = delegateCombine(this.i.checkedChanged, this._checkedChanged_wrapped);
+            ;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcCheckboxListComponent.prototype, "labelClicked", {
+        get: function () {
+            return this._labelClicked;
+        },
+        set: function (ev) {
+            var _this = this;
+            if (this._labelClicked_wrapped !== null) {
+                this.i.labelClicked = delegateRemove(this.i.labelClicked, this._labelClicked_wrapped);
+                this._labelClicked_wrapped = null;
+                this._labelClicked = null;
+            }
+            this._labelClicked = ev;
+            this._labelClicked_wrapped = function (o, e) {
+                var outerArgs = new IgcCheckedChangedEventArgs();
+                outerArgs._provideImplementation(e);
+                if (_this.beforeLabelClicked) {
+                    _this.beforeLabelClicked(_this, outerArgs);
+                }
+                if (_this._labelClicked) {
+                    _this._labelClicked(_this, outerArgs);
+                }
+            };
+            this.i.labelClicked = delegateCombine(this.i.labelClicked, this._labelClicked_wrapped);
+            ;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcCheckboxListComponent.prototype, "indexTypeChanged", {
+        get: function () {
+            return this._indexTypeChanged;
+        },
+        set: function (ev) {
+            var _this = this;
+            if (this._indexTypeChanged_wrapped !== null) {
+                this.i.indexTypeChanged = delegateRemove(this.i.indexTypeChanged, this._indexTypeChanged_wrapped);
+                this._indexTypeChanged_wrapped = null;
+                this._indexTypeChanged = null;
+            }
+            this._indexTypeChanged = ev;
+            this._indexTypeChanged_wrapped = function (o, e) {
+                var outerArgs = new IgcCheckboxListIndexTypeChangedEventArgs();
+                outerArgs._provideImplementation(e);
+                if (_this.beforeIndexTypeChanged) {
+                    _this.beforeIndexTypeChanged(_this, outerArgs);
+                }
+                if (_this._indexTypeChanged) {
+                    _this._indexTypeChanged(_this, outerArgs);
+                }
+            };
+            this.i.indexTypeChanged = delegateCombine(this.i.indexTypeChanged, this._indexTypeChanged_wrapped);
+            ;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcCheckboxListComponent.prototype, "keysCleared", {
+        get: function () {
+            return this._keysCleared;
+        },
+        set: function (ev) {
+            var _this = this;
+            if (this._keysCleared_wrapped !== null) {
+                this.i.keysCleared = delegateRemove(this.i.keysCleared, this._keysCleared_wrapped);
+                this._keysCleared_wrapped = null;
+                this._keysCleared = null;
+            }
+            this._keysCleared = ev;
+            this._keysCleared_wrapped = function (o, e) {
+                var outerArgs = new IgcCheckboxListKeysClearedEventArgs();
+                outerArgs._provideImplementation(e);
+                if (_this.beforeKeysCleared) {
+                    _this.beforeKeysCleared(_this, outerArgs);
+                }
+                if (_this._keysCleared) {
+                    _this._keysCleared(_this, outerArgs);
+                }
+            };
+            this.i.keysCleared = delegateCombine(this.i.keysCleared, this._keysCleared_wrapped);
+            ;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcCheckboxListComponent.prototype, "selectAllCheckboxChanged", {
+        /**
+         * Called when the SelectAll checkbox is checked or unchecked.
+        */
+        get: function () {
+            return this._selectAllCheckboxChanged;
+        },
+        set: function (ev) {
+            var _this = this;
+            if (this._selectAllCheckboxChanged_wrapped !== null) {
+                this.i.selectAllCheckboxChanged = delegateRemove(this.i.selectAllCheckboxChanged, this._selectAllCheckboxChanged_wrapped);
+                this._selectAllCheckboxChanged_wrapped = null;
+                this._selectAllCheckboxChanged = null;
+            }
+            this._selectAllCheckboxChanged = ev;
+            this._selectAllCheckboxChanged_wrapped = function (o, e) {
+                var outerArgs = new IgcSelectAllCheckboxChangedEventArgs();
+                outerArgs._provideImplementation(e);
+                if (_this.beforeSelectAllCheckboxChanged) {
+                    _this.beforeSelectAllCheckboxChanged(_this, outerArgs);
+                }
+                if (_this._selectAllCheckboxChanged) {
+                    _this._selectAllCheckboxChanged(_this, outerArgs);
+                }
+            };
+            this.i.selectAllCheckboxChanged = delegateCombine(this.i.selectAllCheckboxChanged, this._selectAllCheckboxChanged_wrapped);
+            ;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    IgcCheckboxListComponent._observedAttributesIgcCheckboxListComponent = null;
+    IgcCheckboxListComponent.htmlTagName = "igc-checkbox-list";
+    IgcCheckboxListComponent._isElementRegistered = false;
+    return IgcCheckboxListComponent;
+}(IgcHTMLElement));
+export { IgcCheckboxListComponent };