igniteui-react-grids/esm5/lib/igr-multi-column-combo-box.js

Ignite UI React grid components.

import { __extends, __values } from "tslib";
import * as React from 'react';
import { ensureEnum, brushToString, stringToBrush, ensureBool, initializePropertiesFromCss, NamePatcher, isValidProp, toSpinal, getModifiedProps } from "igniteui-react-core";
import { FontInfo } from "igniteui-react-core";
import { ReactRenderer, PortalManager } from "igniteui-react-core";
import { delegateCombine, delegateRemove } from "igniteui-react-core";
import { MultiColumnComboBox } from './MultiColumnComboBox';
import { BaseControlTheme_$type } from "igniteui-react-core";
import { ControlDisplayDensity_$type } from "igniteui-react-core";
import { SortMode_$type } from './SortMode';
import { CornerRadius } from "igniteui-react-core";
import { Thickness } from "igniteui-react-core";
import { IgrMultiColumnComboBoxTextChangedEventArgs } from './igr-multi-column-combo-box-text-changed-event-args';
import { IgrMultiColumnComboBoxValueChangedEventArgs } from './igr-multi-column-combo-box-value-changed-event-args';
import { IgrGotFocusEventArgs } from './igr-got-focus-event-args';
import { IgrLostFocusEventArgs } from './igr-lost-focus-event-args';
import { IgrKeyEventArgs } from "igniteui-react-core";
import { IgrInputChangeEventArgs } from "igniteui-react-inputs";
import { IgrColumnWidth } from './igr-column-width';
import { ColumnWidth as ColumnWidth_internal } from './ColumnWidth';
var IgrMultiColumnComboBox = /** @class */ /*@__PURE__*/ (function (_super) {
    __extends(IgrMultiColumnComboBox, _super);
    function IgrMultiColumnComboBox(props) {
        var _this = _super.call(this, props) || this;
        _this._implementation = null;
        _this._reactRenderer = null;
        _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._getMainRef = _this._getMainRef.bind(_this);
        var multiColumnComboBox = _this.i;
        multiColumnComboBox.notifySizeChanged();
        if (props) {
            _this.initializeProperties();
        }
        _this._initialized = true;
        return _this;
    }
    Object.defineProperty(IgrMultiColumnComboBox.prototype, "height", {
        get: function () {
            return this._height;
        },
        set: function (value) {
            this._height = value;
            if (this._elRef) {
                this._elRef.style.height = value;
                this.i.notifySizeChanged();
            }
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrMultiColumnComboBox.prototype, "width", {
        get: function () {
            return this._width;
        },
        set: function (value) {
            this._width = value;
            if (this._elRef) {
                this._elRef.style.height = value;
                this.i.notifySizeChanged();
            }
        },
        enumerable: false,
        configurable: true
    });
    IgrMultiColumnComboBox.prototype._getMainRef = function (ref) {
        this._elRef = ref;
        this.verifyReferences();
    };
    IgrMultiColumnComboBox.prototype.render = function () {
        var children = [];
        // We don't actually want to support child content. 
        //let propChildren = this.props.children;        
        //React.Children.forEach(
        //    propChildren, (ch: any) => {
        //        children.push(React.cloneElement(ch));
        //    });
        if (this._portalManager)
            this._portalManager.onRender(children);
        var div = React.createElement("div", {
            ref: this._getMainRef,
            className: "ig-multi-column-combo-box igr-multi-column-combo-box",
            children: children
        });
        return div;
    };
    IgrMultiColumnComboBox.prototype.verifyReferences = function () {
        var _this = this;
        if (this._elRef) {
            this.requestRender = this.requestRender.bind(this);
            this._portalManager = new PortalManager("popupContent", this.requestRender);
            this._reactRenderer = new ReactRenderer(this._elRef, document, true, {}, this._portalManager);
            if (document) {
                this._elRef.style.display = "block";
                this._elRef.style.width = "100%";
                this._elRef.style.height = "100%";
            }
            // render needs to fire again after the portalManager is created. 
            this.requestRender();
            this.i.provideRenderer(this._reactRenderer);
            this._reactRenderer.addSizeWatcher(function () {
                _this.i.notifySizeChanged();
            });
        }
    };
    IgrMultiColumnComboBox.prototype.requestRender = function () {
        if (this._initialized)
            this.setState({});
    };
    IgrMultiColumnComboBox.prototype.shouldComponentUpdate = function (nextProps, nextState) {
        var e_1, _a;
        var mod = getModifiedProps(this.props, nextProps);
        try {
            for (var _b = __values(Object.keys(mod)), _c = _b.next(); !_c.done; _c = _b.next()) {
                var p = _c.value;
                if (isValidProp(this, p)) {
                    this[p] = mod[p];
                }
            }
        }
        catch (e_1_1) {
            e_1 = { error: e_1_1 };
        }
        finally {
            try {
                if (_c && !_c.done && (_a = _b.return))
                    _a.call(_b);
            }
            finally {
                if (e_1)
                    throw e_1.error;
            }
        }
        return true;
    };
    IgrMultiColumnComboBox.prototype.initializeProperties = function () {
        var e_2, _a;
        try {
            for (var _b = __values(Object.keys(this.props)), _c = _b.next(); !_c.done; _c = _b.next()) {
                var p = _c.value;
                if (isValidProp(this, p)) {
                    this[p] = this.props[p];
                }
            }
        }
        catch (e_2_1) {
            e_2 = { error: e_2_1 };
        }
        finally {
            try {
                if (_c && !_c.done && (_a = _b.return))
                    _a.call(_b);
            }
            finally {
                if (e_2)
                    throw e_2.error;
            }
        }
    };
    // supports angular themes or custom properties set in CSS
    IgrMultiColumnComboBox.prototype.updateStyle = function () {
        this._styling(this._elRef, this);
    };
    IgrMultiColumnComboBox.prototype.destroy = function () {
        this.i.destroy();
        if (this._reactRenderer)
            this._reactRenderer.destroy();
    };
    IgrMultiColumnComboBox.prototype.componentWillUnmount = function () {
    };
    IgrMultiColumnComboBox.prototype.componentDidMount = function () {
        this._elRef.style.width = this._width ? this._width : "";
        this._elRef.style.height = this._height ? this._height : "";
        this.i.notifySizeChanged();
        this.initializeContent();
    };
    IgrMultiColumnComboBox.prototype.initializeContent = function () {
        this._styling(this._elRef, this);
        this.updateStyle();
        this.i.notifySizeChanged();
    };
    IgrMultiColumnComboBox.prototype.createImplementation = function () {
        return new MultiColumnComboBox();
    };
    Object.defineProperty(IgrMultiColumnComboBox.prototype, "i", {
        get: function () {
            return this._implementation;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrMultiColumnComboBox.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 IgrColumnWidth();
                ext._implementation = this.i.defaultColumnWidth;
            }
            return ext;
        },
        set: function (value) {
            if (typeof value == "string") {
                var int = ColumnWidth_internal.parse(value);
                var ext = new IgrColumnWidth();
                ext._implementation = int;
                value = ext;
            }
            else if (typeof value == "number") {
                var int = ColumnWidth_internal.parse(value.toString());
                var ext = new IgrColumnWidth();
                ext._implementation = int;
                value = ext;
            }
            this.i.defaultColumnWidth = value.i;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrMultiColumnComboBox.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);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrMultiColumnComboBox.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(IgrMultiColumnComboBox.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);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrMultiColumnComboBox.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);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrMultiColumnComboBox.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);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrMultiColumnComboBox.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);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrMultiColumnComboBox.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);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrMultiColumnComboBox.prototype, "actualBorderColor", {
        /**
         * Gets the actual item background color.
        */
        get: function () {
            return brushToString(this.i.hm);
        },
        set: function (v) {
            this.i.hm = stringToBrush(v);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrMultiColumnComboBox.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;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrMultiColumnComboBox.prototype, "actualBorderWidth", {
        /**
         * Gets the actual item border width.
        */
        get: function () {
            return this.i.cc;
        },
        set: function (v) {
            this.i.cc = +v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrMultiColumnComboBox.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);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrMultiColumnComboBox.prototype, "contentPaddingBottom", {
        get: function () {
            return this.i.im ? this.i.im.bottom : NaN;
        },
        set: function (v) {
            this.ensureContentPadding();
            this.i.im.bottom = +v;
            this.i.im = this.i.im;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrMultiColumnComboBox.prototype, "contentPaddingLeft", {
        get: function () {
            return this.i.im ? this.i.im.left : NaN;
        },
        set: function (v) {
            this.ensureContentPadding();
            this.i.im.left = +v;
            this.i.im = this.i.im;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrMultiColumnComboBox.prototype, "contentPaddingRight", {
        get: function () {
            return this.i.im ? this.i.im.right : NaN;
        },
        set: function (v) {
            this.ensureContentPadding();
            this.i.im.right = +v;
            this.i.im = this.i.im;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrMultiColumnComboBox.prototype, "contentPaddingTop", {
        get: function () {
            return this.i.im ? this.i.im.top : NaN;
        },
        set: function (v) {
            this.ensureContentPadding();
            this.i.im.top = +v;
            this.i.im = this.i.im;
        },
        enumerable: false,
        configurable: true
    });
    IgrMultiColumnComboBox.prototype.ensureContentPadding = function () {
        if (this.i.im) {
            return;
        }
        this.i.im = new Thickness(2);
    };
    Object.defineProperty(IgrMultiColumnComboBox.prototype, "actualContentPaddingBottom", {
        get: function () {
            return this.i.il ? this.i.il.bottom : NaN;
        },
        set: function (v) {
            this.ensureActualContentPadding();
            this.i.il.bottom = +v;
            this.i.il = this.i.il;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrMultiColumnComboBox.prototype, "actualContentPaddingLeft", {
        get: function () {
            return this.i.il ? this.i.il.left : NaN;
        },
        set: function (v) {
            this.ensureActualContentPadding();
            this.i.il.left = +v;
            this.i.il = this.i.il;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrMultiColumnComboBox.prototype, "actualContentPaddingRight", {
        get: function () {
            return this.i.il ? this.i.il.right : NaN;
        },
        set: function (v) {
            this.ensureActualContentPadding();
            this.i.il.right = +v;
            this.i.il = this.i.il;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrMultiColumnComboBox.prototype, "actualContentPaddingTop", {
        get: function () {
            return this.i.il ? this.i.il.top : NaN;
        },
        set: function (v) {
            this.ensureActualContentPadding();
            this.i.il.top = +v;
            this.i.il = this.i.il;
        },
        enumerable: false,
        configurable: true
    });
    IgrMultiColumnComboBox.prototype.ensureActualContentPadding = function () {
        if (this.i.il) {
            return;
        }
        this.i.il = new Thickness(2);
    };
    Object.defineProperty(IgrMultiColumnComboBox.prototype, "cornerRadiusBottomRight", {
        get: function () {
            return this.i.gx ? this.i.gx.c : NaN;
        },
        set: function (v) {
            this.ensureCornerRadius();
            this.i.gx.c = +v;
            this.i.gx = this.i.gx;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrMultiColumnComboBox.prototype, "cornerRadiusBottomLeft", {
        get: function () {
            return this.i.gx ? this.i.gx.b : NaN;
        },
        set: function (v) {
            this.ensureCornerRadius();
            this.i.gx.b = +v;
            this.i.gx = this.i.gx;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrMultiColumnComboBox.prototype, "cornerRadiusTopLeft", {
        get: function () {
            return this.i.gx ? this.i.gx.d : NaN;
        },
        set: function (v) {
            this.ensureCornerRadius();
            this.i.gx.d = +v;
            this.i.gx = this.i.gx;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrMultiColumnComboBox.prototype, "cornerRadiusTopRight", {
        get: function () {
            return this.i.gx ? this.i.gx.e : NaN;
        },
        set: function (v) {
            this.ensureCornerRadius();
            this.i.gx.e = +v;
            this.i.gx = this.i.gx;
        },
        enumerable: false,
        configurable: true
    });
    IgrMultiColumnComboBox.prototype.ensureCornerRadius = function () {
        if (this.i.gx) {
            return;
        }
        this.i.gx = new CornerRadius(2);
    };
    Object.defineProperty(IgrMultiColumnComboBox.prototype, "actualCornerRadiusBottomRight", {
        get: function () {
            return this.i.gw ? this.i.gw.c : NaN;
        },
        set: function (v) {
            this.ensureActualCornerRadius();
            this.i.gw.c = +v;
            this.i.gw = this.i.gw;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrMultiColumnComboBox.prototype, "actualCornerRadiusBottomLeft", {
        get: function () {
            return this.i.gw ? this.i.gw.b : NaN;
        },
        set: function (v) {
            this.ensureActualCornerRadius();
            this.i.gw.b = +v;
            this.i.gw = this.i.gw;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrMultiColumnComboBox.prototype, "actualCornerRadiusTopLeft", {
        get: function () {
            return this.i.gw ? this.i.gw.d : NaN;
        },
        set: function (v) {
            this.ensureActualCornerRadius();
            this.i.gw.d = +v;
            this.i.gw = this.i.gw;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrMultiColumnComboBox.prototype, "actualCornerRadiusTopRight", {
        get: function () {
            return this.i.gw ? this.i.gw.e : NaN;
        },
        set: function (v) {
            this.ensureActualCornerRadius();
            this.i.gw.e = +v;
            this.i.gw = this.i.gw;
        },
        enumerable: false,
        configurable: true
    });
    IgrMultiColumnComboBox.prototype.ensureActualCornerRadius = function () {
        if (this.i.gw) {
            return;
        }
        this.i.gw = new CornerRadius(2);
    };
    Object.defineProperty(IgrMultiColumnComboBox.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(IgrMultiColumnComboBox.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);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrMultiColumnComboBox.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);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrMultiColumnComboBox.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);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrMultiColumnComboBox.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);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrMultiColumnComboBox.prototype, "actualFocusBorderColor", {
        /**
         * Gets the actual item border color.
        */
        get: function () {
            return brushToString(this.i.hn);
        },
        set: function (v) {
            this.i.hn = stringToBrush(v);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrMultiColumnComboBox.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;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrMultiColumnComboBox.prototype, "actualFocusBorderWidth", {
        /**
         * Gets the actual item border width.
        */
        get: function () {
            return this.i.cd;
        },
        set: function (v) {
            this.i.cd = +v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrMultiColumnComboBox.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);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrMultiColumnComboBox.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);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrMultiColumnComboBox.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;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrMultiColumnComboBox.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;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrMultiColumnComboBox.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;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrMultiColumnComboBox.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;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrMultiColumnComboBox.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);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrMultiColumnComboBox.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);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrMultiColumnComboBox.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;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrMultiColumnComboBox.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;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrMultiColumnComboBox.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;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrMultiColumnComboBox.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;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrMultiColumnComboBox.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(IgrMultiColumnComboBox.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(IgrMultiColumnComboBox.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(IgrMultiColumnComboBox.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);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrMultiColumnComboBox.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);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrMultiColumnComboBox.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;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrMultiColumnComboBox.prototype, "actualLabelVisible", {
        /**
         * Gets or sets the visibility of the label.
        */
        get: function () {
            return this.i.actualLabelVisible;
        },
        set: function (v) {
            this.i.actualLabelVisible = ensureBool(v);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrMultiColumnComboBox.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(IgrMultiColumnComboBox.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(IgrMultiColumnComboBox.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);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrMultiColumnComboBox.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);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrMultiColumnComboBox.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);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrMultiColumnComboBox.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);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrMultiColumnComboBox.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;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrMultiColumnComboBox.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(IgrMultiColumnComboBox.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);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrMultiColumnComboBox.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);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrMultiColumnComboBox.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);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrMultiColumnComboBox.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;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrMultiColumnComboBox.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);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrMultiColumnComboBox.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);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrMultiColumnComboBox.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;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrMultiColumnComboBox.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;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrMultiColumnComboBox.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);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrMultiColumnComboBox.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);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrMultiColumnComboBox.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;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrMultiColumnComboBox.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;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrMultiColumnComboBox.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;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrMultiColumnComboBox.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;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrMultiColumnComboBox.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;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrMultiColumnComboBox.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;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrMultiColumnComboBox.prototype, "allowFilter", {
        /**
         * Whether to allow filtering of the combo
        */
        get: function () {
            return this.i.bg;
        },
        set: function (v) {
            this.i.bg = ensureBool(v);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrMultiColumnComboBox.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);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrMultiColumnComboBox.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(IgrMultiColumnComboBox.prototype, "text", {
        /**
         * The text displayed in the edit portion of the control.
        */
        get: function () {
            return this.i.text;
        },
        set: function (v) {
            this.i.text = v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrMultiColumnComboBox.prototype, "valueField", {
        /**
         * Sets or gets the user provided primary key to assume for the data. Certain functionality of the combo (such as the the current Value) requires
         * a way to uniquely identify items in order to work correctly.
         * If a primary key cannot be inferred from the data source, you may need to provide one here.
        */
        get: function () {
            return this.i.j;
        },
        set: function (v) {
            if (v && !Array.isArray(v) && typeof (v) == "string") {
                var re = /\s*(?:,|\s|$)\s*/gm;
                v = v.split(re);
            }
            this.i.j = v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrMultiColumnComboBox.prototype, "actualValueField", {
        /**
         * Gets the actual name of the field in the data source will be used as the Value of the MultiColumnComboBox.
        */
        get: function () {
            return this.i.e;
        },
        set: function (v) {
            if (v && !Array.isArray(v) && typeof (v) == "string") {
                var re = /\s*(?:,|\s|$)\s*/gm;
                v = v.split(re);
            }
            this.i.e = v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrMultiColumnComboBox.prototype, "value", {
        /**
         * Gets or sets the Value of the combo.
         * When the user selects an item from, the value is set based on the specified ValueField field. If not ValueField is specified, then the first field in the data source is used.
         * When the user enters text into the combo, the list is searched based on the TextField field. If a matching string is found, the Value of the combo is the value of the ValueField field in the same row.
         * If the text entered in the combo does not match any item on the list, then the value will return null.
        */
        get: function () {
            return this.i.value;
        },
        set: function (v) {
            this.i.value = v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrMultiColumnComboBox.prototype, "isFixed", {
        /**
         * Indicates that the dropdown will position itself relative to the window instead of the document.
        */
        get: function () {
            return this.i.bn;
        },
        set: function (v) {
            this.i.bn = ensureBool(v);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrMultiColumnComboBox.prototype, "openAsChild", {
        /**
         * Indicates that the dropdown should open as a child of the combobox.
        */
        get: function () {
            return this.i.bo;
        },
        set: function (v) {
            this.i.bo = ensureBool(v);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(IgrMultiColumnComboBox.prototype, "useTopLayer", {
        /**
         * Indicates that the dropdown will place itself into the browser top layer.
        */
        get: function () {
            return this.i.br;
        },
        set: function (v) {
            this.i.br = ensureBool(v);
        },
        enumerable: false,
        configurable: true
    });
    IgrMultiColumnComboBox.prototype.findByName = function (name) {
        if (this.findEphemera) {
            if (name && name.indexOf("@@e:") == 0) {
                return this.findEphemera(name);
            }
        }
        return null;
    };
    Object.defineProperty(IgrMultiColumnComboBox.prototype, "hasUserValues", {
        get: function () {
            return this._hasUserValues;
        },
        enumerable: false,
        configurable: true
    });
    IgrMultiColumnComboBox.prototype.__m = function (propertyName) {
        if (!this._inStyling) {
            this._hasUserValues.add(propertyName);
        }
    };
    IgrMultiColumnComboBox.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("MultiColumnComboBox");
        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;
    };
    /**
 * Programmatically closes the list.

*/
    IgrMultiColumnComboBox.prototype.closeUp = function () {
        this.i.closeUp();
    };
    /**
     * Programmatically drops down the list.
    
    */
    IgrMultiColumnComboBox.prototype.dropDown = function () {
        this