igniteui-webcomponents-grids/esm5/lib/igc-multi-column-combo-box-component.js

Ignite UI Web Components grid components.

import { __extends } from "tslib";
import { ensureEnum, brushToString, stringToBrush, ensureBool, initializePropertiesFromCss, NamePatcher, toSpinal, enumToString, getAllPropertyNames, fromSpinal } from "igniteui-webcomponents-core";
import { FontInfo } from "igniteui-webcomponents-core";
import { WebComponentRenderer, PortalManager } from "igniteui-webcomponents-core";
import { delegateCombine, delegateRemove } from "igniteui-webcomponents-core";
import { RegisterElementHelper } from "igniteui-webcomponents-core";
import { MultiColumnComboBox } from "./MultiColumnComboBox";
import { BaseControlTheme_$type } from "igniteui-webcomponents-core";
import { ControlDisplayDensity_$type } from "igniteui-webcomponents-core";
import { SortMode_$type } from './SortMode';
import { CornerRadius } from "igniteui-webcomponents-core";
import { Thickness } from "igniteui-webcomponents-core";
import { IgcMultiColumnComboBoxTextChangedEventArgs } from './igc-multi-column-combo-box-text-changed-event-args';
import { IgcMultiColumnComboBoxValueChangedEventArgs } from './igc-multi-column-combo-box-value-changed-event-args';
import { IgcGotFocusEventArgs } from './igc-got-focus-event-args';
import { IgcLostFocusEventArgs } from './igc-lost-focus-event-args';
import { IgcHTMLElement } from "igniteui-webcomponents-core";
import { IgcKeyEventArgs } from "igniteui-webcomponents-core";
import { IgcInputChangeEventArgs } from "igniteui-webcomponents-inputs";
import { IgcColumnWidth } from './igc-column-width';
import { ColumnWidth as ColumnWidth_internal } from './ColumnWidth';
var IgcMultiColumnComboBoxComponent = /** @class */ /*@__PURE__*/ (function (_super) {
    __extends(IgcMultiColumnComboBoxComponent, _super);
    function IgcMultiColumnComboBoxComponent() {
        var _this = _super.call(this) || this;
        _this._implementation = null;
        _this._disconnected = false;
        _this._settingAttributes = false;
        _this._attached = false;
        _this._queuedSetAttributes = [];
        _this._updatingFromAttribute = false;
        _this.__p = null;
        _this._hasUserValues = new Set();
        _this._stylingContainer = null;
        _this._stylingParent = null;
        _this._inStyling = false;
        _this._gotFocus = null;
        _this._gotFocus_wrapped = null;
        _this._lostFocus = null;
        _this._lostFocus_wrapped = null;
        _this._textValueChanged = null;
        _this._textValueChanged_wrapped = null;
        _this._selectedValueChanged = null;
        _this._selectedValueChanged_wrapped = null;
        _this._keyDown = null;
        _this._keyDown_wrapped = null;
        _this._change = null;
        _this._change_wrapped = null;
        _this._changing = null;
        _this._changing_wrapped = null;
        _this._textChange = null;
        _this._textChange_wrapped = null;
        _this._valueChange = null;
        _this._valueChange_wrapped = null;
        if (_this._styling) {
            NamePatcher.ensureStylablePatched(Object.getPrototypeOf(_this));
        }
        _this._implementation = _this.createImplementation();
        _this._implementation.externalObject = _this;
        _this._portalManager = new PortalManager("multiColumnComboBoxContent");
        _this._webComponentRenderer = new WebComponentRenderer(_this, document, true, {}, _this._portalManager);
        _this._webComponentWrapper = _this._webComponentRenderer.createElement("div");
        _this._webComponentRenderer.updateRoot(_this._webComponentWrapper);
        _this._webComponentWrapper.setStyleProperty("display", "block");
        _this._webComponentWrapper.setStyleProperty("width", "100%");
        _this._webComponentWrapper.setStyleProperty("height", "100%");
        _this.i.provideRenderer(_this._webComponentRenderer);
        _this.i.notifySizeChanged();
        _this._webComponentRenderer.addSizeWatcher(function () {
            _this.i.notifySizeChanged();
        });
        return _this;
    }
    Object.defineProperty(IgcMultiColumnComboBoxComponent.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(IgcMultiColumnComboBoxComponent.prototype, "width", {
        get: function () {
            return this._width;
        },
        set: function (value) {
            this._width = value;
            this.style.width = value;
            this.i.notifySizeChanged();
        },
        enumerable: false,
        configurable: true
    });
    // supports angular themes or custom properties set in CSS
    IgcMultiColumnComboBoxComponent.prototype.updateStyle = function () {
        this._styling(this, this);
    };
    IgcMultiColumnComboBoxComponent.prototype.destroy = function () {
        this._implementation.destroy();
        this._webComponentRenderer.destroy();
    };
    IgcMultiColumnComboBoxComponent.prototype.createImplementation = function () {
        return new MultiColumnComboBox();
    };
    Object.defineProperty(IgcMultiColumnComboBoxComponent.prototype, "i", {
        get: function () {
            return this._implementation;
        },
        enumerable: false,
        configurable: true
    });
    IgcMultiColumnComboBoxComponent.prototype.disconnectedCallback = function () {
        this._disconnected = true;
    };
    IgcMultiColumnComboBoxComponent.prototype.connectedCallback = function () {
        if (this._disconnected) {
            this._disconnected = false;
            return;
        }
        this.classList.add("ig-multi-column-combo-box");
        this.classList.add("igc-multi-column-combo-box");
        var rootWrapper = this._webComponentRenderer.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;
        this._flushQueuedAttributes();
        // supports themes or custom properties set in CSS
        this._styling(this, this);
        this.afterContentInit();
    };
    IgcMultiColumnComboBoxComponent.prototype.afterContentInit = function () {
        this.i.notifySizeChanged();
    };
    Object.defineProperty(IgcMultiColumnComboBoxComponent.prototype, "defaultColumnWidth", {
        /**
         * Gets or sets the default column width to use if a column as no local width.
         * */
        get: function () {
            var ext = this.i.defaultColumnWidth.externalObject;
            if (!ext) {
                ext = new IgcColumnWidth();
                ext._implementation = this.i.defaultColumnWidth;
            }
            return ext;
        },
        set: function (value) {
            if (typeof value == "string") {
                var int = ColumnWidth_internal.parse(value);
                var ext = new IgcColumnWidth();
                ext._implementation = int;
                value = ext;
            }
            else if (typeof value == "number") {
                var int = ColumnWidth_internal.parse(value.toString());
                var ext = new IgcColumnWidth();
                ext._implementation = int;
                value = ext;
            }
            this.i.defaultColumnWidth = value.i;
        },
        enumerable: false,
        configurable: true
    });
    IgcMultiColumnComboBoxComponent.prototype.attributeSynced = function (name, value) {
        // an attribute was set by the component renderer.
        if (name === 'name') {
            this.i.setName(value);
        }
    };
    IgcMultiColumnComboBoxComponent.prototype._enqueueSetAttribute = function (attrName, attrValue) {
        this._queuedSetAttributes.push({ attrName: attrName, attrValue: attrValue });
    };
    IgcMultiColumnComboBoxComponent.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;
    };
    IgcMultiColumnComboBoxComponent.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(IgcMultiColumnComboBoxComponent, "observedAttributes", {
        get: function () {
            if (IgcMultiColumnComboBoxComponent._observedAttributesIgcMultiColumnComboBoxComponent == null) {
                var names = getAllPropertyNames(IgcMultiColumnComboBoxComponent);
                for (var i = 0; i < names.length; i++) {
                    names[i] = toSpinal(names[i]);
                }
                IgcMultiColumnComboBoxComponent._observedAttributesIgcMultiColumnComboBoxComponent = names;
            }
            return IgcMultiColumnComboBoxComponent._observedAttributesIgcMultiColumnComboBoxComponent;
        },
        enumerable: false,
        configurable: true
    });
    IgcMultiColumnComboBoxComponent.prototype.attributeChangedCallback = function (name, oldValue, newValue) {
        if (this._settingAttributes) {
            return;
        }
        var setName = fromSpinal(name);
        this._updatingFromAttribute = true;
        this[setName] = newValue;
        this._updatingFromAttribute = false;
    };
    IgcMultiColumnComboBoxComponent.register = function () {
        if (!IgcMultiColumnComboBoxComponent._isElementRegistered) {
            IgcMultiColumnComboBoxComponent._isElementRegistered = true;
            RegisterElementHelper.registerElement(IgcMultiColumnComboBoxComponent.htmlTagName, IgcMultiColumnComboBoxComponent);
        }
    };
    Object.defineProperty(IgcMultiColumnComboBoxComponent.prototype, "showClearButton", {
        /**
     * Gets or sets the ShowClearButton property to detirmine if the clear button is shown
    */
        get: function () {
            return this.i.bq;
        },
        set: function (v) {
            this.i.bq = ensureBool(v);
            this._a("showClearButton", this.i.bq);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcMultiColumnComboBoxComponent.prototype, "fields", {
        /**
         * Gets or sets the desired properties for the data source to load. If specified the data source may decide to constrain the properties it fetches to these properties and must make sure that at least those properties are loaded, rather than the default behavior for that data source.
        */
        get: function () {
            return this.i.g;
        },
        set: function (v) {
            if (v && !Array.isArray(v) && typeof (v) == "string") {
                var re = /\s*(?:,|\s|$)\s*/gm;
                v = v.split(re);
            }
            this.i.g = v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcMultiColumnComboBoxComponent.prototype, "backgroundColor", {
        /**
         * Gets or sets the background color to use for the input group.
        */
        get: function () {
            return brushToString(this.i.hw);
        },
        set: function (v) {
            this.i.hw = stringToBrush(v);
            this._a("backgroundColor", brushToString(this.i.hw));
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcMultiColumnComboBoxComponent.prototype, "actualBackgroundColor", {
        /**
         * Gets the actual opacity to use for the underline ripple element.
        */
        get: function () {
            return brushToString(this.i.hl);
        },
        set: function (v) {
            this.i.hl = stringToBrush(v);
            this._a("actualBackgroundColor", brushToString(this.i.hl));
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcMultiColumnComboBoxComponent.prototype, "baseTheme", {
        /**
         * Gets or sets the base built in theme to use for the component.
        */
        get: function () {
            return this.i.ai;
        },
        set: function (v) {
            this.i.ai = ensureEnum(BaseControlTheme_$type, v);
            this._a("baseTheme", enumToString(BaseControlTheme_$type, this.i.ai));
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcMultiColumnComboBoxComponent.prototype, "actualBaseTheme", {
        /**
         * Gets the actual display baseTheme to use for the component.
        */
        get: function () {
            return this.i.ah;
        },
        set: function (v) {
            this.i.ah = ensureEnum(BaseControlTheme_$type, v);
            this._a("actualBaseTheme", enumToString(BaseControlTheme_$type, this.i.ah));
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcMultiColumnComboBoxComponent.prototype, "borderColor", {
        /**
         * Gets or sets the color to use the border of the input group.
        */
        get: function () {
            return brushToString(this.i.hx);
        },
        set: function (v) {
            this.i.hx = stringToBrush(v);
            this._a("borderColor", brushToString(this.i.hx));
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcMultiColumnComboBoxComponent.prototype, "actualBorderColor", {
        /**
         * Gets the actual item background color.
        */
        get: function () {
            return brushToString(this.i.hm);
        },
        set: function (v) {
            this.i.hm = stringToBrush(v);
            this._a("actualBorderColor", brushToString(this.i.hm));
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcMultiColumnComboBoxComponent.prototype, "borderWidth", {
        /**
         * Gets or sets the border width to use for the border of the item group.
        */
        get: function () {
            return this.i.cm;
        },
        set: function (v) {
            this.i.cm = +v;
            this._a("borderWidth", this.i.cm);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcMultiColumnComboBoxComponent.prototype, "actualBorderWidth", {
        /**
         * Gets the actual item border width.
        */
        get: function () {
            return this.i.cc;
        },
        set: function (v) {
            this.i.cc = +v;
            this._a("actualBorderWidth", this.i.cc);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcMultiColumnComboBoxComponent.prototype, "columnHeadersVisible", {
        /**
         * Gets or sets the visibility of the drop down button.
        */
        get: function () {
            return this.i.columnHeadersVisible;
        },
        set: function (v) {
            this.i.columnHeadersVisible = ensureBool(v);
            this._a("columnHeadersVisible", this.i.columnHeadersVisible);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcMultiColumnComboBoxComponent.prototype, "contentPaddingBottom", {
        get: function () {
            return this.i.im ? this.i.im.bottom : NaN;
        },
        set: function (v) {
            this.ensureContentPadding();
            this.i.im.bottom = +v;
            this._a("contentPaddingBottom", this.i.im.bottom);
            this.i.im = this.i.im;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcMultiColumnComboBoxComponent.prototype, "contentPaddingLeft", {
        get: function () {
            return this.i.im ? this.i.im.left : NaN;
        },
        set: function (v) {
            this.ensureContentPadding();
            this.i.im.left = +v;
            this._a("contentPaddingLeft", this.i.im.left);
            this.i.im = this.i.im;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcMultiColumnComboBoxComponent.prototype, "contentPaddingRight", {
        get: function () {
            return this.i.im ? this.i.im.right : NaN;
        },
        set: function (v) {
            this.ensureContentPadding();
            this.i.im.right = +v;
            this._a("contentPaddingRight", this.i.im.right);
            this.i.im = this.i.im;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcMultiColumnComboBoxComponent.prototype, "contentPaddingTop", {
        get: function () {
            return this.i.im ? this.i.im.top : NaN;
        },
        set: function (v) {
            this.ensureContentPadding();
            this.i.im.top = +v;
            this._a("contentPaddingTop", this.i.im.top);
            this.i.im = this.i.im;
        },
        enumerable: false,
        configurable: true
    });
    IgcMultiColumnComboBoxComponent.prototype.ensureContentPadding = function () {
        if (this.i.im) {
            return;
        }
        this.i.im = new Thickness(2);
    };
    Object.defineProperty(IgcMultiColumnComboBoxComponent.prototype, "actualContentPaddingBottom", {
        get: function () {
            return this.i.il ? this.i.il.bottom : NaN;
        },
        set: function (v) {
            this.ensureActualContentPadding();
            this.i.il.bottom = +v;
            this._a("actualContentPaddingBottom", this.i.il.bottom);
            this.i.il = this.i.il;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcMultiColumnComboBoxComponent.prototype, "actualContentPaddingLeft", {
        get: function () {
            return this.i.il ? this.i.il.left : NaN;
        },
        set: function (v) {
            this.ensureActualContentPadding();
            this.i.il.left = +v;
            this._a("actualContentPaddingLeft", this.i.il.left);
            this.i.il = this.i.il;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcMultiColumnComboBoxComponent.prototype, "actualContentPaddingRight", {
        get: function () {
            return this.i.il ? this.i.il.right : NaN;
        },
        set: function (v) {
            this.ensureActualContentPadding();
            this.i.il.right = +v;
            this._a("actualContentPaddingRight", this.i.il.right);
            this.i.il = this.i.il;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcMultiColumnComboBoxComponent.prototype, "actualContentPaddingTop", {
        get: function () {
            return this.i.il ? this.i.il.top : NaN;
        },
        set: function (v) {
            this.ensureActualContentPadding();
            this.i.il.top = +v;
            this._a("actualContentPaddingTop", this.i.il.top);
            this.i.il = this.i.il;
        },
        enumerable: false,
        configurable: true
    });
    IgcMultiColumnComboBoxComponent.prototype.ensureActualContentPadding = function () {
        if (this.i.il) {
            return;
        }
        this.i.il = new Thickness(2);
    };
    Object.defineProperty(IgcMultiColumnComboBoxComponent.prototype, "cornerRadiusBottomRight", {
        get: function () {
            return this.i.gx ? this.i.gx.c : NaN;
        },
        set: function (v) {
            this.ensureCornerRadius();
            this.i.gx.c = +v;
            this._a("cornerRadiusBottomRight", this.i.gx.c);
            this.i.gx = this.i.gx;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcMultiColumnComboBoxComponent.prototype, "cornerRadiusBottomLeft", {
        get: function () {
            return this.i.gx ? this.i.gx.b : NaN;
        },
        set: function (v) {
            this.ensureCornerRadius();
            this.i.gx.b = +v;
            this._a("cornerRadiusBottomLeft", this.i.gx.b);
            this.i.gx = this.i.gx;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcMultiColumnComboBoxComponent.prototype, "cornerRadiusTopLeft", {
        get: function () {
            return this.i.gx ? this.i.gx.d : NaN;
        },
        set: function (v) {
            this.ensureCornerRadius();
            this.i.gx.d = +v;
            this._a("cornerRadiusTopLeft", this.i.gx.d);
            this.i.gx = this.i.gx;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcMultiColumnComboBoxComponent.prototype, "cornerRadiusTopRight", {
        get: function () {
            return this.i.gx ? this.i.gx.e : NaN;
        },
        set: function (v) {
            this.ensureCornerRadius();
            this.i.gx.e = +v;
            this._a("cornerRadiusTopRight", this.i.gx.e);
            this.i.gx = this.i.gx;
        },
        enumerable: false,
        configurable: true
    });
    IgcMultiColumnComboBoxComponent.prototype.ensureCornerRadius = function () {
        if (this.i.gx) {
            return;
        }
        this.i.gx = new CornerRadius(2);
    };
    Object.defineProperty(IgcMultiColumnComboBoxComponent.prototype, "actualCornerRadiusBottomRight", {
        get: function () {
            return this.i.gw ? this.i.gw.c : NaN;
        },
        set: function (v) {
            this.ensureActualCornerRadius();
            this.i.gw.c = +v;
            this._a("actualCornerRadiusBottomRight", this.i.gw.c);
            this.i.gw = this.i.gw;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcMultiColumnComboBoxComponent.prototype, "actualCornerRadiusBottomLeft", {
        get: function () {
            return this.i.gw ? this.i.gw.b : NaN;
        },
        set: function (v) {
            this.ensureActualCornerRadius();
            this.i.gw.b = +v;
            this._a("actualCornerRadiusBottomLeft", this.i.gw.b);
            this.i.gw = this.i.gw;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcMultiColumnComboBoxComponent.prototype, "actualCornerRadiusTopLeft", {
        get: function () {
            return this.i.gw ? this.i.gw.d : NaN;
        },
        set: function (v) {
            this.ensureActualCornerRadius();
            this.i.gw.d = +v;
            this._a("actualCornerRadiusTopLeft", this.i.gw.d);
            this.i.gw = this.i.gw;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcMultiColumnComboBoxComponent.prototype, "actualCornerRadiusTopRight", {
        get: function () {
            return this.i.gw ? this.i.gw.e : NaN;
        },
        set: function (v) {
            this.ensureActualCornerRadius();
            this.i.gw.e = +v;
            this._a("actualCornerRadiusTopRight", this.i.gw.e);
            this.i.gw = this.i.gw;
        },
        enumerable: false,
        configurable: true
    });
    IgcMultiColumnComboBoxComponent.prototype.ensureActualCornerRadius = function () {
        if (this.i.gw) {
            return;
        }
        this.i.gw = new CornerRadius(2);
    };
    Object.defineProperty(IgcMultiColumnComboBoxComponent.prototype, "dataSourceDesiredProperties", {
        /**
         * Gets or sets the desired properties for the data source to load. If specified the data source may decide to constrain the properties it fetches to these properties and must make sure that at least those properties are loaded, rather than the default behavior for that data source.
        */
        get: function () {
            return this.i.f;
        },
        set: function (v) {
            if (v && !Array.isArray(v) && typeof (v) == "string") {
                var re = /\s*(?:,|\s|$)\s*/gm;
                v = v.split(re);
            }
            this.i.f = v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcMultiColumnComboBoxComponent.prototype, "density", {
        /**
         * Gets or sets the display Density to use for the buttons and dropdown grid.
        */
        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(IgcMultiColumnComboBoxComponent.prototype, "actualDensity", {
        /**
         * Gets the actual display Density to use for the component.
        */
        get: function () {
            return this.i.am;
        },
        set: function (v) {
            this.i.am = ensureEnum(ControlDisplayDensity_$type, v);
            this._a("actualDensity", enumToString(ControlDisplayDensity_$type, this.i.am));
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcMultiColumnComboBoxComponent.prototype, "dropDownButtonVisible", {
        /**
         * Gets or sets the visibility of the drop down button.
        */
        get: function () {
            return this.i.dropDownButtonVisible;
        },
        set: function (v) {
            this.i.dropDownButtonVisible = ensureBool(v);
            this._a("dropDownButtonVisible", this.i.dropDownButtonVisible);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcMultiColumnComboBoxComponent.prototype, "focusBorderColor", {
        /**
         * Gets or sets the color to use the hovered background of the inputs in the group.
        */
        get: function () {
            return brushToString(this.i.h9);
        },
        set: function (v) {
            this.i.h9 = stringToBrush(v);
            this._a("focusBorderColor", brushToString(this.i.h9));
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcMultiColumnComboBoxComponent.prototype, "actualFocusBorderColor", {
        /**
         * Gets the actual item border color.
        */
        get: function () {
            return brushToString(this.i.hn);
        },
        set: function (v) {
            this.i.hn = stringToBrush(v);
            this._a("actualFocusBorderColor", brushToString(this.i.hn));
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcMultiColumnComboBoxComponent.prototype, "focusBorderWidth", {
        /**
         * Gets or sets the border width to use for the border of the item group when focused.
        */
        get: function () {
            return this.i.cy;
        },
        set: function (v) {
            this.i.cy = +v;
            this._a("focusBorderWidth", this.i.cy);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcMultiColumnComboBoxComponent.prototype, "actualFocusBorderWidth", {
        /**
         * Gets the actual item border width.
        */
        get: function () {
            return this.i.cd;
        },
        set: function (v) {
            this.i.cd = +v;
            this._a("actualFocusBorderWidth", this.i.cd);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcMultiColumnComboBoxComponent.prototype, "focusUnderlineColor", {
        /**
         * Gets or sets the color to use for the underline element.
        */
        get: function () {
            return brushToString(this.i.ia);
        },
        set: function (v) {
            this.i.ia = stringToBrush(v);
            this._a("focusUnderlineColor", brushToString(this.i.ia));
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcMultiColumnComboBoxComponent.prototype, "actualFocusUnderlineColor", {
        /**
         * Gets the actual color to use for the underline element when focused.
        */
        get: function () {
            return brushToString(this.i.ho);
        },
        set: function (v) {
            this.i.ho = stringToBrush(v);
            this._a("actualFocusUnderlineColor", brushToString(this.i.ho));
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcMultiColumnComboBoxComponent.prototype, "focusUnderlineOpacity", {
        /**
         * Gets or sets the color to use for the underline element.
        */
        get: function () {
            return this.i.cz;
        },
        set: function (v) {
            this.i.cz = +v;
            this._a("focusUnderlineOpacity", this.i.cz);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcMultiColumnComboBoxComponent.prototype, "actualFocusUnderlineOpacity", {
        /**
         * Gets the actual opacity to use for the underline element when focused.
        */
        get: function () {
            return this.i.ce;
        },
        set: function (v) {
            this.i.ce = +v;
            this._a("actualFocusUnderlineOpacity", this.i.ce);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcMultiColumnComboBoxComponent.prototype, "focusUnderlineRippleOpacity", {
        /**
         * Gets or sets the opacity to use for the underline ripple element when focused.
        */
        get: function () {
            return this.i.c0;
        },
        set: function (v) {
            this.i.c0 = +v;
            this._a("focusUnderlineRippleOpacity", this.i.c0);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcMultiColumnComboBoxComponent.prototype, "actualFocusUnderlineRippleOpacity", {
        /**
         * Gets the actual opacity to use for the underline ripple element when focused.
        */
        get: function () {
            return this.i.cf;
        },
        set: function (v) {
            this.i.cf = +v;
            this._a("actualFocusUnderlineRippleOpacity", this.i.cf);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcMultiColumnComboBoxComponent.prototype, "hoverUnderlineColor", {
        /**
         * Gets or sets the color to use for the underline element.
        */
        get: function () {
            return brushToString(this.i.ib);
        },
        set: function (v) {
            this.i.ib = stringToBrush(v);
            this._a("hoverUnderlineColor", brushToString(this.i.ib));
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcMultiColumnComboBoxComponent.prototype, "actualHoverUnderlineColor", {
        /**
         * Gets the actual color to use for the underline element.
        */
        get: function () {
            return brushToString(this.i.hp);
        },
        set: function (v) {
            this.i.hp = stringToBrush(v);
            this._a("actualHoverUnderlineColor", brushToString(this.i.hp));
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcMultiColumnComboBoxComponent.prototype, "hoverUnderlineOpacity", {
        /**
         * Gets or sets the color to use for the underline element.
        */
        get: function () {
            return this.i.c1;
        },
        set: function (v) {
            this.i.c1 = +v;
            this._a("hoverUnderlineOpacity", this.i.c1);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcMultiColumnComboBoxComponent.prototype, "actualHoverUnderlineOpacity", {
        /**
         * Gets the actual opacity to use for the underline element when hovered.
        */
        get: function () {
            return this.i.cg;
        },
        set: function (v) {
            this.i.cg = +v;
            this._a("actualHoverUnderlineOpacity", this.i.cg);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcMultiColumnComboBoxComponent.prototype, "hoverUnderlineWidth", {
        /**
         * Gets or sets the width to use for the underline element when hovered.
        */
        get: function () {
            return this.i.c2;
        },
        set: function (v) {
            this.i.c2 = +v;
            this._a("hoverUnderlineWidth", this.i.c2);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcMultiColumnComboBoxComponent.prototype, "actualHoverUnderlineWidth", {
        /**
         * Gets the width to use for the underline element when hovered.
        */
        get: function () {
            return this.i.ch;
        },
        set: function (v) {
            this.i.ch = +v;
            this._a("actualHoverUnderlineWidth", this.i.ch);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcMultiColumnComboBoxComponent.prototype, "dataSource", {
        /**
         * Gets or sets the data to which to bind the combo box list. This can be some type of array or list, or it can
         * be an IDataSource instance.
        */
        get: function () {
            return this.i.itemsSource;
        },
        set: function (v) {
            this.i.itemsSource = v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcMultiColumnComboBoxComponent.prototype, "actualDataSource", {
        /**
         * Gets the actual data source that is being used by the combo box list. If a collection was provided for the combo box data, an implicit LocalDataSource has been created, and this is available via this property.
        */
        get: function () {
            return this.i.actualDataSource;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcMultiColumnComboBoxComponent.prototype, "label", {
        /**
         * The text displayed in the label portion of the control.
        */
        get: function () {
            return this.i.fb;
        },
        set: function (v) {
            this.i.fb = v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcMultiColumnComboBoxComponent.prototype, "labelTextColor", {
        /**
         * Gets or sets the color to use for the text.
        */
        get: function () {
            return brushToString(this.i.ic);
        },
        set: function (v) {
            this.i.ic = stringToBrush(v);
            this._a("labelTextColor", brushToString(this.i.ic));
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcMultiColumnComboBoxComponent.prototype, "actualLabelTextColor", {
        /**
         * Gets the actual color to use for the text color.
        */
        get: function () {
            return brushToString(this.i.hq);
        },
        set: function (v) {
            this.i.hq = stringToBrush(v);
            this._a("actualLabelTextColor", brushToString(this.i.hq));
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcMultiColumnComboBoxComponent.prototype, "labelTextStyle", {
        /**
         * Gets or sets the font to use for the combobox.
        */
        get: function () {
            if (this.i.a2 == null) {
                return null;
            }
            return this.i.a2.fontString;
        },
        set: function (v) {
            var fi = new FontInfo();
            fi.fontString = v;
            this.i.a2 = fi;
            this._a("labelTextStyle", this.i.a2 != null ? this.i.a2.fontString : "");
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcMultiColumnComboBoxComponent.prototype, "actualLabelVisible", {
        /**
         * Gets or sets the visibility of the label.
        */
        get: function () {
            return this.i.actualLabelVisible;
        },
        set: function (v) {
            this.i.actualLabelVisible = ensureBool(v);
            this._a("actualLabelVisible", this.i.actualLabelVisible);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcMultiColumnComboBoxComponent.prototype, "noMatchesFoundLabel", {
        /**
         * Gets or sets the text to display on the list when no suggested matches are found.
        */
        get: function () {
            return this.i.fh;
        },
        set: function (v) {
            this.i.fh = v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcMultiColumnComboBoxComponent.prototype, "actualNoMatchesFoundLabel", {
        /**
         * Gets the actual text to display on the list when no suggested matches are found.
        */
        get: function () {
            return this.i.actualNoMatchesFoundLabel;
        },
        set: function (v) {
            this.i.actualNoMatchesFoundLabel = v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcMultiColumnComboBoxComponent.prototype, "noMatchesFoundLabelBackgroundColor", {
        /**
         * Gets or sets the color to use for the "no matches found" label.
        */
        get: function () {
            return brushToString(this.i.id);
        },
        set: function (v) {
            this.i.id = stringToBrush(v);
            this._a("noMatchesFoundLabelBackgroundColor", brushToString(this.i.id));
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcMultiColumnComboBoxComponent.prototype, "actualNoMatchesFoundLabelBackgroundColor", {
        /**
         * Gets the actual color to use for the "no matches found" label.
        */
        get: function () {
            return brushToString(this.i.hr);
        },
        set: function (v) {
            this.i.hr = stringToBrush(v);
            this._a("actualNoMatchesFoundLabelBackgroundColor", brushToString(this.i.hr));
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcMultiColumnComboBoxComponent.prototype, "noMatchesFoundLabelTextColor", {
        /**
         * Gets or sets the color to use for the "no matches found" label.
        */
        get: function () {
            return brushToString(this.i.ie);
        },
        set: function (v) {
            this.i.ie = stringToBrush(v);
            this._a("noMatchesFoundLabelTextColor", brushToString(this.i.ie));
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcMultiColumnComboBoxComponent.prototype, "actualNoMatchesFoundLabelTextColor", {
        /**
         * Gets the actual color to use for the "no matches found" label.
        */
        get: function () {
            return brushToString(this.i.hs);
        },
        set: function (v) {
            this.i.hs = stringToBrush(v);
            this._a("actualNoMatchesFoundLabelTextColor", brushToString(this.i.hs));
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcMultiColumnComboBoxComponent.prototype, "noMatchesFoundLabelTextStyle", {
        /**
         * Gets or sets the font to use for the combobox.
        */
        get: function () {
            if (this.i.a3 == null) {
                return null;
            }
            return this.i.a3.fontString;
        },
        set: function (v) {
            var fi = new FontInfo();
            fi.fontString = v;
            this.i.a3 = fi;
            this._a("noMatchesFoundLabelTextStyle", this.i.a3 != null ? this.i.a3.fontString : "");
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcMultiColumnComboBoxComponent.prototype, "placeholder", {
        /**
         * Placeholder text which gives the user a hint about what kind of text is expected.
        */
        get: function () {
            return this.i.fn;
        },
        set: function (v) {
            this.i.fn = v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcMultiColumnComboBoxComponent.prototype, "rowSeparatorsVisible", {
        /**
         * Gets or sets the visibility of the row separators in the drop down.
        */
        get: function () {
            return this.i.rowSeparatorsVisible;
        },
        set: function (v) {
            this.i.rowSeparatorsVisible = ensureBool(v);
            this._a("rowSeparatorsVisible", this.i.rowSeparatorsVisible);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcMultiColumnComboBoxComponent.prototype, "textColor", {
        /**
         * Gets or sets the color to use for the text.
        */
        get: function () {
            return brushToString(this.i.ig);
        },
        set: function (v) {
            this.i.ig = stringToBrush(v);
            this._a("textColor", brushToString(this.i.ig));
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcMultiColumnComboBoxComponent.prototype, "actualTextColor", {
        /**
         * Gets the actual color to use for the text color.
        */
        get: function () {
            return brushToString(this.i.ht);
        },
        set: function (v) {
            this.i.ht = stringToBrush(v);
            this._a("actualTextColor", brushToString(this.i.ht));
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcMultiColumnComboBoxComponent.prototype, "textStyle", {
        /**
         * Gets or sets the font to use for the combobox.
        */
        get: function () {
            if (this.i.a4 == null) {
                return null;
            }
            return this.i.a4.fontString;
        },
        set: function (v) {
            var fi = new FontInfo();
            fi.fontString = v;
            this.i.a4 = fi;
            this._a("textStyle", this.i.a4 != null ? this.i.a4.fontString : "");
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcMultiColumnComboBoxComponent.prototype, "underlineColor", {
        /**
         * Gets or sets the color to use for the underline element.
        */
        get: function () {
            return brushToString(this.i.ih);
        },
        set: function (v) {
            this.i.ih = stringToBrush(v);
            this._a("underlineColor", brushToString(this.i.ih));
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcMultiColumnComboBoxComponent.prototype, "actualUnderlineColor", {
        /**
         * Gets the actual color to use for the underline element.
        */
        get: function () {
            return brushToString(this.i.hu);
        },
        set: function (v) {
            this.i.hu = stringToBrush(v);
            this._a("actualUnderlineColor", brushToString(this.i.hu));
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcMultiColumnComboBoxComponent.prototype, "underlineOpacity", {
        /**
         * Gets or sets the color to use for the underline element.
        */
        get: function () {
            return this.i.c3;
        },
        set: function (v) {
            this.i.c3 = +v;
            this._a("underlineOpacity", this.i.c3);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcMultiColumnComboBoxComponent.prototype, "actualUnderlineOpacity", {
        /**
         * Gets the actual opacity to use for the underline element.
        */
        get: function () {
            return this.i.ci;
        },
        set: function (v) {
            this.i.ci = +v;
            this._a("actualUnderlineOpacity", this.i.ci);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcMultiColumnComboBoxComponent.prototype, "underlineRippleColor", {
        /**
         * Gets or sets the color to use for the underline ripple element.
        */
        get: function () {
            return brushToString(this.i.ii);
        },
        set: function (v) {
            this.i.ii = stringToBrush(v);
            this._a("underlineRippleColor", brushToString(this.i.ii));
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcMultiColumnComboBoxComponent.prototype, "actualUnderlineRippleColor", {
        /**
         * Gets the actual color to use for the underline ripple element.
        */
        get: function () {
            return brushToString(this.i.hv);
        },
        set: function (v) {
            this.i.hv = stringToBrush(v);
            this._a("actualUnderlineRippleColor", brushToString(this.i.hv));
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcMultiColumnComboBoxComponent.prototype, "underlineRippleOpacity", {
        /**
         * Gets or sets the opacity to use for the underline ripple element.
        */
        get: function () {
            return this.i.c4;
        },
        set: function (v) {
            this.i.c4 = +v;
            this._a("underlineRippleOpacity", this.i.c4);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcMultiColumnComboBoxComponent.prototype, "actualUnderlineRippleOpacity", {
        /**
         * Gets the actual opacity to use for the underline ripple element.
        */
        get: function () {
            return this.i.cj;
        },
        set: function (v) {
            this.i.cj = +v;
            this._a("actualUnderlineRippleOpacity", this.i.cj);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcMultiColumnComboBoxComponent.prototype, "underlineRippleWidth", {
        /**
         * Gets or sets the width to use for the underline element.
        */
        get: function () {
            return this.i.c5;
        },
        set: function (v) {
            this.i.c5 = +v;
            this._a("underlineRippleWidth", this.i.c5);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcMultiColumnComboBoxComponent.prototype, "actualUnderlineRippleWidth", {
        /**
         * Gets the actual width to use for the underline element.
        */
        get: function () {
            return this.i.ck;
        },
        set: function (v) {
            this.i.ck = +v;
            this._a("actualUnderlineRippleWidth", this.i.ck);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcMultiColumnComboBoxComponent.prototype, "underlineWidth", {
        /**
         * Gets or sets the width to use for the underline element.
        */
        get: function () {
            return this.i.c6;
        },
        set: function (v) {
            this.i.c6 = +v;
            this._a("underlineWidth", this.i.c6);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcMultiColumnComboBoxComponent.prototype, "actualUnderlineWidth", {
        /**
         * Gets the actual width to use for the underline element.
        */
        get: function () {
            return this.i.cl;
        },
        set: function (v) {
            this.i.cl = +v;
            this._a("actualUnderlineWidth", this.i.cl);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcMultiColumnComboBoxComponent.prototype, "allowFilter", {
        /**
         * Whether to allow filtering of the combo
        */
        get: function () {
            return this.i.bg;
        },
        set: function (v) {
            this.i.bg = ensureBool(v);
            this._a("allowFilter", this.i.bg);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcMultiColumnComboBoxComponent.prototype, "sortMode", {
        /**
         * Returns/sets the action to take when a column header is clicked.
        */
        get: function () {
            return this.i.x;
        },
        set: function (v) {
            this.i.x = ensureEnum(SortMode_$type, v);
            this._a("sortMode", enumToString(SortMode_$type, this.i.x));
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcMultiColumnComboBoxComponent.prototype, "textField", {
        /**
         * Determines the name of the field in the data source will be used as the Text of the MultiColumnComboBox.
        */
        get: function () {
            return this.i.fv;
        },
        set: function (v) {
            this.i.fv = v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgcMultiColumnComboBoxComponent.prototype, "text", {
        /**
         * The text dis