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

package/esm2015/lib/igc-multi-column-combo-box-component.js

@@ -0,0 +1,1431 @@
+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';
+export let IgcMultiColumnComboBoxComponent = /*@__PURE__*/ (() => {
+    class IgcMultiColumnComboBoxComponent extends IgcHTMLElement {
+        set height(value) {
+            this._height = value;
+            this.style.height = value;
+            this.i.notifySizeChanged();
+        }
+        get height() {
+            return this._height;
+        }
+        set width(value) {
+            this._width = value;
+            this.style.width = value;
+            this.i.notifySizeChanged();
+        }
+        get width() {
+            return this._width;
+        }
+        constructor() {
+            super();
+            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(() => {
+                this.i.notifySizeChanged();
+            });
+        }
+        // supports angular themes or custom properties set in CSS
+        updateStyle() {
+            this._styling(this, this);
+        }
+        destroy() {
+            this._implementation.destroy();
+            this._webComponentRenderer.destroy();
+        }
+        createImplementation() {
+            return new MultiColumnComboBox();
+        }
+        get i() {
+            return this._implementation;
+        }
+        disconnectedCallback() {
+            this._disconnected = true;
+        }
+        connectedCallback() {
+            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();
+        }
+        afterContentInit() {
+            this.i.notifySizeChanged();
+        }
+        /**
+         * Gets or sets the default column width to use if a column as no local width.
+         * */
+        get defaultColumnWidth() {
+            let ext = this.i.defaultColumnWidth.externalObject;
+            if (!ext) {
+                ext = new IgcColumnWidth();
+                ext._implementation = this.i.defaultColumnWidth;
+            }
+            return ext;
+        }
+        set defaultColumnWidth(value) {
+            if (typeof value == "string") {
+                let int = ColumnWidth_internal.parse(value);
+                let ext = new IgcColumnWidth();
+                ext._implementation = int;
+                value = ext;
+            }
+            else if (typeof value == "number") {
+                let int = ColumnWidth_internal.parse(value.toString());
+                let ext = new IgcColumnWidth();
+                ext._implementation = int;
+                value = ext;
+            }
+            this.i.defaultColumnWidth = value.i;
+        }
+        attributeSynced(name, value) {
+            // an attribute was set by the component renderer.
+            if (name === 'name') {
+                this.i.setName(value);
+            }
+        }
+        _enqueueSetAttribute(attrName, attrValue) {
+            this._queuedSetAttributes.push({ attrName: attrName, attrValue: attrValue });
+        }
+        _flushQueuedAttributes() {
+            this._settingAttributes = true;
+            for (let i = 0; i < this._queuedSetAttributes.length; i++) {
+                this.setAttribute(this._queuedSetAttributes[i].attrName, this._queuedSetAttributes[i].attrValue);
+            }
+            this._settingAttributes = false;
+            this._queuedSetAttributes.length = 0;
+        }
+        _a(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;
+        }
+        static get observedAttributes() {
+            if (IgcMultiColumnComboBoxComponent._observedAttributesIgcMultiColumnComboBoxComponent == null) {
+                let names = getAllPropertyNames(IgcMultiColumnComboBoxComponent);
+                for (let i = 0; i < names.length; i++) {
+                    names[i] = toSpinal(names[i]);
+                }
+                IgcMultiColumnComboBoxComponent._observedAttributesIgcMultiColumnComboBoxComponent = names;
+            }
+            return IgcMultiColumnComboBoxComponent._observedAttributesIgcMultiColumnComboBoxComponent;
+        }
+        attributeChangedCallback(name, oldValue, newValue) {
+            if (this._settingAttributes) {
+                return;
+            }
+            let setName = fromSpinal(name);
+            this._updatingFromAttribute = true;
+            this[setName] = newValue;
+            this._updatingFromAttribute = false;
+        }
+        static register() {
+            if (!IgcMultiColumnComboBoxComponent._isElementRegistered) {
+                IgcMultiColumnComboBoxComponent._isElementRegistered = true;
+                RegisterElementHelper.registerElement(IgcMultiColumnComboBoxComponent.htmlTagName, IgcMultiColumnComboBoxComponent);
+            }
+        }
+        /**
+     * Gets or sets the ShowClearButton property to detirmine if the clear button is shown
+    */
+        get showClearButton() {
+            return this.i.bq;
+        }
+        set showClearButton(v) {
+            this.i.bq = ensureBool(v);
+            this._a("showClearButton", this.i.bq);
+        }
+        /**
+         * 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 fields() {
+            return this.i.g;
+        }
+        set fields(v) {
+            if (v && !Array.isArray(v) && typeof (v) == "string") {
+                const re = /\s*(?:,|\s|$)\s*/gm;
+                v = v.split(re);
+            }
+            this.i.g = v;
+        }
+        /**
+         * Gets or sets the background color to use for the input group.
+        */
+        get backgroundColor() {
+            return brushToString(this.i.hw);
+        }
+        set backgroundColor(v) {
+            this.i.hw = stringToBrush(v);
+            this._a("backgroundColor", brushToString(this.i.hw));
+        }
+        /**
+         * Gets the actual opacity to use for the underline ripple element.
+        */
+        get actualBackgroundColor() {
+            return brushToString(this.i.hl);
+        }
+        set actualBackgroundColor(v) {
+            this.i.hl = stringToBrush(v);
+            this._a("actualBackgroundColor", brushToString(this.i.hl));
+        }
+        /**
+         * Gets or sets the base built in theme to use for the component.
+        */
+        get baseTheme() {
+            return this.i.ai;
+        }
+        set baseTheme(v) {
+            this.i.ai = ensureEnum(BaseControlTheme_$type, v);
+            this._a("baseTheme", enumToString(BaseControlTheme_$type, this.i.ai));
+        }
+        /**
+         * Gets the actual display baseTheme to use for the component.
+        */
+        get actualBaseTheme() {
+            return this.i.ah;
+        }
+        set actualBaseTheme(v) {
+            this.i.ah = ensureEnum(BaseControlTheme_$type, v);
+            this._a("actualBaseTheme", enumToString(BaseControlTheme_$type, this.i.ah));
+        }
+        /**
+         * Gets or sets the color to use the border of the input group.
+        */
+        get borderColor() {
+            return brushToString(this.i.hx);
+        }
+        set borderColor(v) {
+            this.i.hx = stringToBrush(v);
+            this._a("borderColor", brushToString(this.i.hx));
+        }
+        /**
+         * Gets the actual item background color.
+        */
+        get actualBorderColor() {
+            return brushToString(this.i.hm);
+        }
+        set actualBorderColor(v) {
+            this.i.hm = stringToBrush(v);
+            this._a("actualBorderColor", brushToString(this.i.hm));
+        }
+        /**
+         * Gets or sets the border width to use for the border of the item group.
+        */
+        get borderWidth() {
+            return this.i.cm;
+        }
+        set borderWidth(v) {
+            this.i.cm = +v;
+            this._a("borderWidth", this.i.cm);
+        }
+        /**
+         * Gets the actual item border width.
+        */
+        get actualBorderWidth() {
+            return this.i.cc;
+        }
+        set actualBorderWidth(v) {
+            this.i.cc = +v;
+            this._a("actualBorderWidth", this.i.cc);
+        }
+        /**
+         * Gets or sets the visibility of the drop down button.
+        */
+        get columnHeadersVisible() {
+            return this.i.columnHeadersVisible;
+        }
+        set columnHeadersVisible(v) {
+            this.i.columnHeadersVisible = ensureBool(v);
+            this._a("columnHeadersVisible", this.i.columnHeadersVisible);
+        }
+        get contentPaddingBottom() {
+            return this.i.im ? this.i.im.bottom : NaN;
+        }
+        set contentPaddingBottom(v) {
+            this.ensureContentPadding();
+            this.i.im.bottom = +v;
+            this._a("contentPaddingBottom", this.i.im.bottom);
+            this.i.im = this.i.im;
+        }
+        get contentPaddingLeft() {
+            return this.i.im ? this.i.im.left : NaN;
+        }
+        set contentPaddingLeft(v) {
+            this.ensureContentPadding();
+            this.i.im.left = +v;
+            this._a("contentPaddingLeft", this.i.im.left);
+            this.i.im = this.i.im;
+        }
+        get contentPaddingRight() {
+            return this.i.im ? this.i.im.right : NaN;
+        }
+        set contentPaddingRight(v) {
+            this.ensureContentPadding();
+            this.i.im.right = +v;
+            this._a("contentPaddingRight", this.i.im.right);
+            this.i.im = this.i.im;
+        }
+        get contentPaddingTop() {
+            return this.i.im ? this.i.im.top : NaN;
+        }
+        set contentPaddingTop(v) {
+            this.ensureContentPadding();
+            this.i.im.top = +v;
+            this._a("contentPaddingTop", this.i.im.top);
+            this.i.im = this.i.im;
+        }
+        ensureContentPadding() {
+            if (this.i.im) {
+                return;
+            }
+            this.i.im = new Thickness(2);
+        }
+        get actualContentPaddingBottom() {
+            return this.i.il ? this.i.il.bottom : NaN;
+        }
+        set actualContentPaddingBottom(v) {
+            this.ensureActualContentPadding();
+            this.i.il.bottom = +v;
+            this._a("actualContentPaddingBottom", this.i.il.bottom);
+            this.i.il = this.i.il;
+        }
+        get actualContentPaddingLeft() {
+            return this.i.il ? this.i.il.left : NaN;
+        }
+        set actualContentPaddingLeft(v) {
+            this.ensureActualContentPadding();
+            this.i.il.left = +v;
+            this._a("actualContentPaddingLeft", this.i.il.left);
+            this.i.il = this.i.il;
+        }
+        get actualContentPaddingRight() {
+            return this.i.il ? this.i.il.right : NaN;
+        }
+        set actualContentPaddingRight(v) {
+            this.ensureActualContentPadding();
+            this.i.il.right = +v;
+            this._a("actualContentPaddingRight", this.i.il.right);
+            this.i.il = this.i.il;
+        }
+        get actualContentPaddingTop() {
+            return this.i.il ? this.i.il.top : NaN;
+        }
+        set actualContentPaddingTop(v) {
+            this.ensureActualContentPadding();
+            this.i.il.top = +v;
+            this._a("actualContentPaddingTop", this.i.il.top);
+            this.i.il = this.i.il;
+        }
+        ensureActualContentPadding() {
+            if (this.i.il) {
+                return;
+            }
+            this.i.il = new Thickness(2);
+        }
+        get cornerRadiusBottomRight() {
+            return this.i.gx ? this.i.gx.c : NaN;
+        }
+        set cornerRadiusBottomRight(v) {
+            this.ensureCornerRadius();
+            this.i.gx.c = +v;
+            this._a("cornerRadiusBottomRight", this.i.gx.c);
+            this.i.gx = this.i.gx;
+        }
+        get cornerRadiusBottomLeft() {
+            return this.i.gx ? this.i.gx.b : NaN;
+        }
+        set cornerRadiusBottomLeft(v) {
+            this.ensureCornerRadius();
+            this.i.gx.b = +v;
+            this._a("cornerRadiusBottomLeft", this.i.gx.b);
+            this.i.gx = this.i.gx;
+        }
+        get cornerRadiusTopLeft() {
+            return this.i.gx ? this.i.gx.d : NaN;
+        }
+        set cornerRadiusTopLeft(v) {
+            this.ensureCornerRadius();
+            this.i.gx.d = +v;
+            this._a("cornerRadiusTopLeft", this.i.gx.d);
+            this.i.gx = this.i.gx;
+        }
+        get cornerRadiusTopRight() {
+            return this.i.gx ? this.i.gx.e : NaN;
+        }
+        set cornerRadiusTopRight(v) {
+            this.ensureCornerRadius();
+            this.i.gx.e = +v;
+            this._a("cornerRadiusTopRight", this.i.gx.e);
+            this.i.gx = this.i.gx;
+        }
+        ensureCornerRadius() {
+            if (this.i.gx) {
+                return;
+            }
+            this.i.gx = new CornerRadius(2);
+        }
+        get actualCornerRadiusBottomRight() {
+            return this.i.gw ? this.i.gw.c : NaN;
+        }
+        set actualCornerRadiusBottomRight(v) {
+            this.ensureActualCornerRadius();
+            this.i.gw.c = +v;
+            this._a("actualCornerRadiusBottomRight", this.i.gw.c);
+            this.i.gw = this.i.gw;
+        }
+        get actualCornerRadiusBottomLeft() {
+            return this.i.gw ? this.i.gw.b : NaN;
+        }
+        set actualCornerRadiusBottomLeft(v) {
+            this.ensureActualCornerRadius();
+            this.i.gw.b = +v;
+            this._a("actualCornerRadiusBottomLeft", this.i.gw.b);
+            this.i.gw = this.i.gw;
+        }
+        get actualCornerRadiusTopLeft() {
+            return this.i.gw ? this.i.gw.d : NaN;
+        }
+        set actualCornerRadiusTopLeft(v) {
+            this.ensureActualCornerRadius();
+            this.i.gw.d = +v;
+            this._a("actualCornerRadiusTopLeft", this.i.gw.d);
+            this.i.gw = this.i.gw;
+        }
+        get actualCornerRadiusTopRight() {
+            return this.i.gw ? this.i.gw.e : NaN;
+        }
+        set actualCornerRadiusTopRight(v) {
+            this.ensureActualCornerRadius();
+            this.i.gw.e = +v;
+            this._a("actualCornerRadiusTopRight", this.i.gw.e);
+            this.i.gw = this.i.gw;
+        }
+        ensureActualCornerRadius() {
+            if (this.i.gw) {
+                return;
+            }
+            this.i.gw = new CornerRadius(2);
+        }
+        /**
+         * 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 dataSourceDesiredProperties() {
+            return this.i.f;
+        }
+        set dataSourceDesiredProperties(v) {
+            if (v && !Array.isArray(v) && typeof (v) == "string") {
+                const re = /\s*(?:,|\s|$)\s*/gm;
+                v = v.split(re);
+            }
+            this.i.f = v;
+        }
+        /**
+         * Gets or sets the display Density to use for the buttons and dropdown grid.
+        */
+        get density() {
+            return this.i.density;
+        }
+        set density(v) {
+            this.i.density = ensureEnum(ControlDisplayDensity_$type, v);
+            this._a("density", enumToString(ControlDisplayDensity_$type, this.i.density));
+        }
+        /**
+         * Gets the actual display Density to use for the component.
+        */
+        get actualDensity() {
+            return this.i.am;
+        }
+        set actualDensity(v) {
+            this.i.am = ensureEnum(ControlDisplayDensity_$type, v);
+            this._a("actualDensity", enumToString(ControlDisplayDensity_$type, this.i.am));
+        }
+        /**
+         * Gets or sets the visibility of the drop down button.
+        */
+        get dropDownButtonVisible() {
+            return this.i.dropDownButtonVisible;
+        }
+        set dropDownButtonVisible(v) {
+            this.i.dropDownButtonVisible = ensureBool(v);
+            this._a("dropDownButtonVisible", this.i.dropDownButtonVisible);
+        }
+        /**
+         * Gets or sets the color to use the hovered background of the inputs in the group.
+        */
+        get focusBorderColor() {
+            return brushToString(this.i.h9);
+        }
+        set focusBorderColor(v) {
+            this.i.h9 = stringToBrush(v);
+            this._a("focusBorderColor", brushToString(this.i.h9));
+        }
+        /**
+         * Gets the actual item border color.
+        */
+        get actualFocusBorderColor() {
+            return brushToString(this.i.hn);
+        }
+        set actualFocusBorderColor(v) {
+            this.i.hn = stringToBrush(v);
+            this._a("actualFocusBorderColor", brushToString(this.i.hn));
+        }
+        /**
+         * Gets or sets the border width to use for the border of the item group when focused.
+        */
+        get focusBorderWidth() {
+            return this.i.cy;
+        }
+        set focusBorderWidth(v) {
+            this.i.cy = +v;
+            this._a("focusBorderWidth", this.i.cy);
+        }
+        /**
+         * Gets the actual item border width.
+        */
+        get actualFocusBorderWidth() {
+            return this.i.cd;
+        }
+        set actualFocusBorderWidth(v) {
+            this.i.cd = +v;
+            this._a("actualFocusBorderWidth", this.i.cd);
+        }
+        /**
+         * Gets or sets the color to use for the underline element.
+        */
+        get focusUnderlineColor() {
+            return brushToString(this.i.ia);
+        }
+        set focusUnderlineColor(v) {
+            this.i.ia = stringToBrush(v);
+            this._a("focusUnderlineColor", brushToString(this.i.ia));
+        }
+        /**
+         * Gets the actual color to use for the underline element when focused.
+        */
+        get actualFocusUnderlineColor() {
+            return brushToString(this.i.ho);
+        }
+        set actualFocusUnderlineColor(v) {
+            this.i.ho = stringToBrush(v);
+            this._a("actualFocusUnderlineColor", brushToString(this.i.ho));
+        }
+        /**
+         * Gets or sets the color to use for the underline element.
+        */
+        get focusUnderlineOpacity() {
+            return this.i.cz;
+        }
+        set focusUnderlineOpacity(v) {
+            this.i.cz = +v;
+            this._a("focusUnderlineOpacity", this.i.cz);
+        }
+        /**
+         * Gets the actual opacity to use for the underline element when focused.
+        */
+        get actualFocusUnderlineOpacity() {
+            return this.i.ce;
+        }
+        set actualFocusUnderlineOpacity(v) {
+            this.i.ce = +v;
+            this._a("actualFocusUnderlineOpacity", this.i.ce);
+        }
+        /**
+         * Gets or sets the opacity to use for the underline ripple element when focused.
+        */
+        get focusUnderlineRippleOpacity() {
+            return this.i.c0;
+        }
+        set focusUnderlineRippleOpacity(v) {
+            this.i.c0 = +v;
+            this._a("focusUnderlineRippleOpacity", this.i.c0);
+        }
+        /**
+         * Gets the actual opacity to use for the underline ripple element when focused.
+        */
+        get actualFocusUnderlineRippleOpacity() {
+            return this.i.cf;
+        }
+        set actualFocusUnderlineRippleOpacity(v) {
+            this.i.cf = +v;
+            this._a("actualFocusUnderlineRippleOpacity", this.i.cf);
+        }
+        /**
+         * Gets or sets the color to use for the underline element.
+        */
+        get hoverUnderlineColor() {
+            return brushToString(this.i.ib);
+        }
+        set hoverUnderlineColor(v) {
+            this.i.ib = stringToBrush(v);
+            this._a("hoverUnderlineColor", brushToString(this.i.ib));
+        }
+        /**
+         * Gets the actual color to use for the underline element.
+        */
+        get actualHoverUnderlineColor() {
+            return brushToString(this.i.hp);
+        }
+        set actualHoverUnderlineColor(v) {
+            this.i.hp = stringToBrush(v);
+            this._a("actualHoverUnderlineColor", brushToString(this.i.hp));
+        }
+        /**
+         * Gets or sets the color to use for the underline element.
+        */
+        get hoverUnderlineOpacity() {
+            return this.i.c1;
+        }
+        set hoverUnderlineOpacity(v) {
+            this.i.c1 = +v;
+            this._a("hoverUnderlineOpacity", this.i.c1);
+        }
+        /**
+         * Gets the actual opacity to use for the underline element when hovered.
+        */
+        get actualHoverUnderlineOpacity() {
+            return this.i.cg;
+        }
+        set actualHoverUnderlineOpacity(v) {
+            this.i.cg = +v;
+            this._a("actualHoverUnderlineOpacity", this.i.cg);
+        }
+        /**
+         * Gets or sets the width to use for the underline element when hovered.
+        */
+        get hoverUnderlineWidth() {
+            return this.i.c2;
+        }
+        set hoverUnderlineWidth(v) {
+            this.i.c2 = +v;
+            this._a("hoverUnderlineWidth", this.i.c2);
+        }
+        /**
+         * Gets the width to use for the underline element when hovered.
+        */
+        get actualHoverUnderlineWidth() {
+            return this.i.ch;
+        }
+        set actualHoverUnderlineWidth(v) {
+            this.i.ch = +v;
+            this._a("actualHoverUnderlineWidth", this.i.ch);
+        }
+        /**
+         * 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 dataSource() {
+            return this.i.itemsSource;
+        }
+        set dataSource(v) {
+            this.i.itemsSource = v;
+        }
+        /**
+         * 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 actualDataSource() {
+            return this.i.actualDataSource;
+        }
+        /**
+         * The text displayed in the label portion of the control.
+        */
+        get label() {
+            return this.i.fb;
+        }
+        set label(v) {
+            this.i.fb = v;
+        }
+        /**
+         * Gets or sets the color to use for the text.
+        */
+        get labelTextColor() {
+            return brushToString(this.i.ic);
+        }
+        set labelTextColor(v) {
+            this.i.ic = stringToBrush(v);
+            this._a("labelTextColor", brushToString(this.i.ic));
+        }
+        /**
+         * Gets the actual color to use for the text color.
+        */
+        get actualLabelTextColor() {
+            return brushToString(this.i.hq);
+        }
+        set actualLabelTextColor(v) {
+            this.i.hq = stringToBrush(v);
+            this._a("actualLabelTextColor", brushToString(this.i.hq));
+        }
+        /**
+         * Gets or sets the font to use for the combobox.
+        */
+        get labelTextStyle() {
+            if (this.i.a2 == null) {
+                return null;
+            }
+            return this.i.a2.fontString;
+        }
+        set labelTextStyle(v) {
+            let fi = new FontInfo();
+            fi.fontString = v;
+            this.i.a2 = fi;
+            this._a("labelTextStyle", this.i.a2 != null ? this.i.a2.fontString : "");
+        }
+        /**
+         * Gets or sets the visibility of the label.
+        */
+        get actualLabelVisible() {
+            return this.i.actualLabelVisible;
+        }
+        set actualLabelVisible(v) {
+            this.i.actualLabelVisible = ensureBool(v);
+            this._a("actualLabelVisible", this.i.actualLabelVisible);
+        }
+        /**
+         * Gets or sets the text to display on the list when no suggested matches are found.
+        */
+        get noMatchesFoundLabel() {
+            return this.i.fh;
+        }
+        set noMatchesFoundLabel(v) {
+            this.i.fh = v;
+        }
+        /**
+         * Gets the actual text to display on the list when no suggested matches are found.
+        */
+        get actualNoMatchesFoundLabel() {
+            return this.i.actualNoMatchesFoundLabel;
+        }
+        set actualNoMatchesFoundLabel(v) {
+            this.i.actualNoMatchesFoundLabel = v;
+        }
+        /**
+         * Gets or sets the color to use for the "no matches found" label.
+        */
+        get noMatchesFoundLabelBackgroundColor() {
+            return brushToString(this.i.id);
+        }
+        set noMatchesFoundLabelBackgroundColor(v) {
+            this.i.id = stringToBrush(v);
+            this._a("noMatchesFoundLabelBackgroundColor", brushToString(this.i.id));
+        }
+        /**
+         * Gets the actual color to use for the "no matches found" label.
+        */
+        get actualNoMatchesFoundLabelBackgroundColor() {
+            return brushToString(this.i.hr);
+        }
+        set actualNoMatchesFoundLabelBackgroundColor(v) {
+            this.i.hr = stringToBrush(v);
+            this._a("actualNoMatchesFoundLabelBackgroundColor", brushToString(this.i.hr));
+        }
+        /**
+         * Gets or sets the color to use for the "no matches found" label.
+        */
+        get noMatchesFoundLabelTextColor() {
+            return brushToString(this.i.ie);
+        }
+        set noMatchesFoundLabelTextColor(v) {
+            this.i.ie = stringToBrush(v);
+            this._a("noMatchesFoundLabelTextColor", brushToString(this.i.ie));
+        }
+        /**
+         * Gets the actual color to use for the "no matches found" label.
+        */
+        get actualNoMatchesFoundLabelTextColor() {
+            return brushToString(this.i.hs);
+        }
+        set actualNoMatchesFoundLabelTextColor(v) {
+            this.i.hs = stringToBrush(v);
+            this._a("actualNoMatchesFoundLabelTextColor", brushToString(this.i.hs));
+        }
+        /**
+         * Gets or sets the font to use for the combobox.
+        */
+        get noMatchesFoundLabelTextStyle() {
+            if (this.i.a3 == null) {
+                return null;
+            }
+            return this.i.a3.fontString;
+        }
+        set noMatchesFoundLabelTextStyle(v) {
+            let fi = new FontInfo();
+            fi.fontString = v;
+            this.i.a3 = fi;
+            this._a("noMatchesFoundLabelTextStyle", this.i.a3 != null ? this.i.a3.fontString : "");
+        }
+        /**
+         * Placeholder text which gives the user a hint about what kind of text is expected.
+        */
+        get placeholder() {
+            return this.i.fn;
+        }
+        set placeholder(v) {
+            this.i.fn = v;
+        }
+        /**
+         * Gets or sets the visibility of the row separators in the drop down.
+        */
+        get rowSeparatorsVisible() {
+            return this.i.rowSeparatorsVisible;
+        }
+        set rowSeparatorsVisible(v) {
+            this.i.rowSeparatorsVisible = ensureBool(v);
+            this._a("rowSeparatorsVisible", this.i.rowSeparatorsVisible);
+        }
+        /**
+         * Gets or sets the color to use for the text.
+        */
+        get textColor() {
+            return brushToString(this.i.ig);
+        }
+        set textColor(v) {
+            this.i.ig = stringToBrush(v);
+            this._a("textColor", brushToString(this.i.ig));
+        }
+        /**
+         * Gets the actual color to use for the text color.
+        */
+        get actualTextColor() {
+            return brushToString(this.i.ht);
+        }
+        set actualTextColor(v) {
+            this.i.ht = stringToBrush(v);
+            this._a("actualTextColor", brushToString(this.i.ht));
+        }
+        /**
+         * Gets or sets the font to use for the combobox.
+        */
+        get textStyle() {
+            if (this.i.a4 == null) {
+                return null;
+            }
+            return this.i.a4.fontString;
+        }
+        set textStyle(v) {
+            let fi = new FontInfo();
+            fi.fontString = v;
+            this.i.a4 = fi;
+            this._a("textStyle", this.i.a4 != null ? this.i.a4.fontString : "");
+        }
+        /**
+         * Gets or sets the color to use for the underline element.
+        */
+        get underlineColor() {
+            return brushToString(this.i.ih);
+        }
+        set underlineColor(v) {
+            this.i.ih = stringToBrush(v);
+            this._a("underlineColor", brushToString(this.i.ih));
+        }
+        /**
+         * Gets the actual color to use for the underline element.
+        */
+        get actualUnderlineColor() {
+            return brushToString(this.i.hu);
+        }
+        set actualUnderlineColor(v) {
+            this.i.hu = stringToBrush(v);
+            this._a("actualUnderlineColor", brushToString(this.i.hu));
+        }
+        /**
+         * Gets or sets the color to use for the underline element.
+        */
+        get underlineOpacity() {
+            return this.i.c3;
+        }
+        set underlineOpacity(v) {
+            this.i.c3 = +v;
+            this._a("underlineOpacity", this.i.c3);
+        }
+        /**
+         * Gets the actual opacity to use for the underline element.
+        */
+        get actualUnderlineOpacity() {
+            return this.i.ci;
+        }
+        set actualUnderlineOpacity(v) {
+            this.i.ci = +v;
+            this._a("actualUnderlineOpacity", this.i.ci);
+        }
+        /**
+         * Gets or sets the color to use for the underline ripple element.
+        */
+        get underlineRippleColor() {
+            return brushToString(this.i.ii);
+        }
+        set underlineRippleColor(v) {
+            this.i.ii = stringToBrush(v);
+            this._a("underlineRippleColor", brushToString(this.i.ii));
+        }
+        /**
+         * Gets the actual color to use for the underline ripple element.
+        */
+        get actualUnderlineRippleColor() {
+            return brushToString(this.i.hv);
+        }
+        set actualUnderlineRippleColor(v) {
+            this.i.hv = stringToBrush(v);
+            this._a("actualUnderlineRippleColor", brushToString(this.i.hv));
+        }
+        /**
+         * Gets or sets the opacity to use for the underline ripple element.
+        */
+        get underlineRippleOpacity() {
+            return this.i.c4;
+        }
+        set underlineRippleOpacity(v) {
+            this.i.c4 = +v;
+            this._a("underlineRippleOpacity", this.i.c4);
+        }
+        /**
+         * Gets the actual opacity to use for the underline ripple element.
+        */
+        get actualUnderlineRippleOpacity() {
+            return this.i.cj;
+        }
+        set actualUnderlineRippleOpacity(v) {
+            this.i.cj = +v;
+            this._a("actualUnderlineRippleOpacity", this.i.cj);
+        }
+        /**
+         * Gets or sets the width to use for the underline element.
+        */
+        get underlineRippleWidth() {
+            return this.i.c5;
+        }
+        set underlineRippleWidth(v) {
+            this.i.c5 = +v;
+            this._a("underlineRippleWidth", this.i.c5);
+        }
+        /**
+         * Gets the actual width to use for the underline element.
+        */
+        get actualUnderlineRippleWidth() {
+            return this.i.ck;
+        }
+        set actualUnderlineRippleWidth(v) {
+            this.i.ck = +v;
+            this._a("actualUnderlineRippleWidth", this.i.ck);
+        }
+        /**
+         * Gets or sets the width to use for the underline element.
+        */
+        get underlineWidth() {
+            return this.i.c6;
+        }
+        set underlineWidth(v) {
+            this.i.c6 = +v;
+            this._a("underlineWidth", this.i.c6);
+        }
+        /**
+         * Gets the actual width to use for the underline element.
+        */
+        get actualUnderlineWidth() {
+            return this.i.cl;
+        }
+        set actualUnderlineWidth(v) {
+            this.i.cl = +v;
+            this._a("actualUnderlineWidth", this.i.cl);
+        }
+        /**
+         * Whether to allow filtering of the combo
+        */
+        get allowFilter() {
+            return this.i.bg;
+        }
+        set allowFilter(v) {
+            this.i.bg = ensureBool(v);
+            this._a("allowFilter", this.i.bg);
+        }
+        /**
+         * Returns/sets the action to take when a column header is clicked.
+        */
+        get sortMode() {
+            return this.i.x;
+        }
+        set sortMode(v) {
+            this.i.x = ensureEnum(SortMode_$type, v);
+            this._a("sortMode", enumToString(SortMode_$type, this.i.x));
+        }
+        /**
+         * Determines the name of the field in the data source will be used as the Text of the MultiColumnComboBox.
+        */
+        get textField() {
+            return this.i.fv;
+        }
+        set textField(v) {
+            this.i.fv = v;
+        }
+        /**
+         * The text displayed in the edit portion of the control.
+        */
+        get text() {
+            return this.i.text;
+        }
+        set text(v) {
+            this.i.text = v;
+        }
+        /**
+         * 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 valueField() {
+            return this.i.j;
+        }
+        set valueField(v) {
+            if (v && !Array.isArray(v) && typeof (v) == "string") {
+                const re = /\s*(?:,|\s|$)\s*/gm;
+                v = v.split(re);
+            }
+            this.i.j = v;
+        }
+        /**
+         * Gets the actual name of the field in the data source will be used as the Value of the MultiColumnComboBox.
+        */
+        get actualValueField() {
+            return this.i.e;
+        }
+        set actualValueField(v) {
+            if (v && !Array.isArray(v) && typeof (v) == "string") {
+                const re = /\s*(?:,|\s|$)\s*/gm;
+                v = v.split(re);
+            }
+            this.i.e = v;
+        }
+        /**
+         * 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 value() {
+            return this.i.value;
+        }
+        set value(v) {
+            this.i.value = v;
+        }
+        /**
+         * Indicates that the dropdown will position itself relative to the window instead of the document.
+        */
+        get isFixed() {
+            return this.i.bn;
+        }
+        set isFixed(v) {
+            this.i.bn = ensureBool(v);
+            this._a("isFixed", this.i.bn);
+        }
+        /**
+         * Indicates that the dropdown should open as a child of the combobox.
+        */
+        get openAsChild() {
+            return this.i.bo;
+        }
+        set openAsChild(v) {
+            this.i.bo = ensureBool(v);
+            this._a("openAsChild", this.i.bo);
+        }
+        /**
+         * Indicates that the dropdown will place itself into the browser top layer.
+        */
+        get useTopLayer() {
+            return this.i.br;
+        }
+        set useTopLayer(v) {
+            this.i.br = ensureBool(v);
+            this._a("useTopLayer", this.i.br);
+        }
+        findByName(name) {
+            if (this.findEphemera) {
+                if (name && name.indexOf("@@e:") == 0) {
+                    return this.findEphemera(name);
+                }
+            }
+            return null;
+        }
+        get hasUserValues() {
+            return this._hasUserValues;
+        }
+        __m(propertyName) {
+            if (!this._inStyling) {
+                this._hasUserValues.add(propertyName);
+            }
+        }
+        _styling(container, component, parent) {
+            if (this._inStyling) {
+                return;
+            }
+            this._inStyling = true;
+            this._stylingContainer = container;
+            this._stylingParent = component;
+            let genericPrefix = "";
+            let typeName = this.i.$type.name;
+            if (typeName.indexOf("Xam") === 0) {
+                typeName = typeName.substring(3);
+            }
+            genericPrefix = toSpinal("MultiColumnComboBoxComponent");
+            let additionalPrefixes = [];
+            let prefix = toSpinal(typeName);
+            additionalPrefixes.push(prefix + "-");
+            let b = this.i.$type.baseType;
+            while (b && b.name != "Object" &&
+                b.name != "Base" &&
+                b.name != "Control" &&
+                b.Name != "DependencyObject" &&
+                b.Name != "FrameworkElement") {
+                typeName = b.name;
+                if (typeName.indexOf("Xam") === 0) {
+                    typeName = typeName.substring(3);
+                }
+                let basePrefix = toSpinal(typeName);
+                additionalPrefixes.push(basePrefix + "-");
+                b = b.baseType;
+            }
+            if (parent) {
+                let parentTypeName = parent.i.$type.name;
+                if (parentTypeName.indexOf("Xam") === 0) {
+                    parentTypeName = parentTypeName.substring(3);
+                }
+                let parentPrefix = toSpinal(parentTypeName);
+                additionalPrefixes.push(parentPrefix + "-" + genericPrefix + "-");
+                additionalPrefixes.push(parentPrefix + "-" + prefix + "-");
+            }
+            initializePropertiesFromCss(container, this, genericPrefix + "-", this.hasUserValues, false, additionalPrefixes);
+            if (this._otherStyling) {
+                this._otherStyling(container, component, parent);
+            }
+            this._inStyling = false;
+        }
+        /**
+     * Programmatically closes the list.
+    
+    */
+        closeUp() {
+            this.i.closeUp();
+        }
+        /**
+         * Programmatically drops down the list.
+        
+        */
+        dropDown() {
+            this.i.dropDown();
+        }
+        /**
+         * Selects all the text in the combo input area.
+        
+        */
+        select() {
+            this.i.select();
+        }
+        /**
+         * Exports visual information about the current state of the grid.
+        
+        */
+        exportVisualModel() {
+            let iv = this.i.c9();
+            return (iv);
+        }
+        /**
+         * Returns a serialized copy of the exported visual model
+        
+        */
+        exportSerializedVisualModel() {
+            let iv = this.i.ew();
+            return (iv);
+        }
+        get gotFocus() {
+            return this._gotFocus;
+        }
+        set gotFocus(ev) {
+            if (this._gotFocus_wrapped !== null) {
+                this.i.gotFocus = delegateRemove(this.i.gotFocus, this._gotFocus_wrapped);
+                this._gotFocus_wrapped = null;
+                this._gotFocus = null;
+            }
+            this._gotFocus = ev;
+            this._gotFocus_wrapped = (o, e) => {
+                let outerArgs = new IgcGotFocusEventArgs();
+                outerArgs._provideImplementation(e);
+                if (this.beforeGotFocus) {
+                    this.beforeGotFocus(this, outerArgs);
+                }
+                if (this._gotFocus) {
+                    this._gotFocus(this, outerArgs);
+                }
+            };
+            this.i.gotFocus = delegateCombine(this.i.gotFocus, this._gotFocus_wrapped);
+            ;
+        }
+        get lostFocus() {
+            return this._lostFocus;
+        }
+        set lostFocus(ev) {
+            if (this._lostFocus_wrapped !== null) {
+                this.i.lostFocus = delegateRemove(this.i.lostFocus, this._lostFocus_wrapped);
+                this._lostFocus_wrapped = null;
+                this._lostFocus = null;
+            }
+            this._lostFocus = ev;
+            this._lostFocus_wrapped = (o, e) => {
+                let outerArgs = new IgcLostFocusEventArgs();
+                outerArgs._provideImplementation(e);
+                if (this.beforeLostFocus) {
+                    this.beforeLostFocus(this, outerArgs);
+                }
+                if (this._lostFocus) {
+                    this._lostFocus(this, outerArgs);
+                }
+            };
+            this.i.lostFocus = delegateCombine(this.i.lostFocus, this._lostFocus_wrapped);
+            ;
+        }
+        get textValueChanged() {
+            return this._textValueChanged;
+        }
+        set textValueChanged(ev) {
+            if (this._textValueChanged_wrapped !== null) {
+                this.i.textValueChanged = delegateRemove(this.i.textValueChanged, this._textValueChanged_wrapped);
+                this._textValueChanged_wrapped = null;
+                this._textValueChanged = null;
+            }
+            this._textValueChanged = ev;
+            this._textValueChanged_wrapped = (o, e) => {
+                let outerArgs = new IgcMultiColumnComboBoxTextChangedEventArgs();
+                outerArgs._provideImplementation(e);
+                if (this.beforeTextValueChanged) {
+                    this.beforeTextValueChanged(this, outerArgs);
+                }
+                if (this._textValueChanged) {
+                    this._textValueChanged(this, outerArgs);
+                }
+            };
+            this.i.textValueChanged = delegateCombine(this.i.textValueChanged, this._textValueChanged_wrapped);
+            ;
+        }
+        get selectedValueChanged() {
+            return this._selectedValueChanged;
+        }
+        set selectedValueChanged(ev) {
+            if (this._selectedValueChanged_wrapped !== null) {
+                this.i.selectedValueChanged = delegateRemove(this.i.selectedValueChanged, this._selectedValueChanged_wrapped);
+                this._selectedValueChanged_wrapped = null;
+                this._selectedValueChanged = null;
+            }
+            this._selectedValueChanged = ev;
+            this._selectedValueChanged_wrapped = (o, e) => {
+                let outerArgs = new IgcMultiColumnComboBoxValueChangedEventArgs();
+                outerArgs._provideImplementation(e);
+                if (this.beforeSelectedValueChanged) {
+                    this.beforeSelectedValueChanged(this, outerArgs);
+                }
+                if (this._selectedValueChanged) {
+                    this._selectedValueChanged(this, outerArgs);
+                }
+            };
+            this.i.selectedValueChanged = delegateCombine(this.i.selectedValueChanged, this._selectedValueChanged_wrapped);
+            ;
+        }
+        get keyDown() {
+            return this._keyDown;
+        }
+        set keyDown(ev) {
+            if (this._keyDown_wrapped !== null) {
+                this.i.keyDown = delegateRemove(this.i.keyDown, this._keyDown_wrapped);
+                this._keyDown_wrapped = null;
+                this._keyDown = null;
+            }
+            this._keyDown = ev;
+            this._keyDown_wrapped = (o, e) => {
+                let outerArgs = new IgcKeyEventArgs();
+                outerArgs._provideImplementation(e);
+                if (this.beforeKeyDown) {
+                    this.beforeKeyDown(this, outerArgs);
+                }
+                if (this._keyDown) {
+                    this._keyDown(this, outerArgs);
+                }
+            };
+            this.i.keyDown = delegateCombine(this.i.keyDown, this._keyDown_wrapped);
+            ;
+        }
+        get change() {
+            return this._change;
+        }
+        set change(ev) {
+            if (this._change_wrapped !== null) {
+                this.i.change = delegateRemove(this.i.change, this._change_wrapped);
+                this._change_wrapped = null;
+                this._change = null;
+            }
+            this._change = ev;
+            this._change_wrapped = (o, e) => {
+                let outerArgs = new IgcInputChangeEventArgs();
+                outerArgs._provideImplementation(e);
+                if (this.beforeChange) {
+                    this.beforeChange(this, outerArgs);
+                }
+                if (this._change) {
+                    this._change(this, outerArgs);
+                }
+            };
+            this.i.change = delegateCombine(this.i.change, this._change_wrapped);
+            ;
+        }
+        get changing() {
+            return this._changing;
+        }
+        set changing(ev) {
+            if (this._changing_wrapped !== null) {
+                this.i.changing = delegateRemove(this.i.changing, this._changing_wrapped);
+                this._changing_wrapped = null;
+                this._changing = null;
+            }
+            this._changing = ev;
+            this._changing_wrapped = (o, e) => {
+                let outerArgs = new IgcInputChangeEventArgs();
+                outerArgs._provideImplementation(e);
+                if (this.beforeChanging) {
+                    this.beforeChanging(this, outerArgs);
+                }
+                if (this._changing) {
+                    this._changing(this, outerArgs);
+                }
+            };
+            this.i.changing = delegateCombine(this.i.changing, this._changing_wrapped);
+            ;
+        }
+        get textChange() {
+            return this._textChange;
+        }
+        set textChange(ev) {
+            if (this._textChange_wrapped !== null) {
+                this.i.propertyChanged = delegateRemove(this.i.propertyChanged, this._textChange_wrapped);
+                this._textChange_wrapped = null;
+                this._textChange = null;
+            }
+            this._textChange = ev;
+            this._textChange_wrapped = (o, e) => {
+                let ext = this.text;
+                if (e.propertyName == 'Text') {
+                    if (this.beforeTextChange) {
+                        this.beforeTextChange(this, ext);
+                    }
+                    if (this._textChange) {
+                        this._textChange(this, ext);
+                    }
+                }
+            };
+            this.i.propertyChanged = delegateCombine(this.i.propertyChanged, this._textChange_wrapped);
+        }
+        get valueChange() {
+            return this._valueChange;
+        }
+        set valueChange(ev) {
+            if (this._valueChange_wrapped !== null) {
+                this.i.propertyChanged = delegateRemove(this.i.propertyChanged, this._valueChange_wrapped);
+                this._valueChange_wrapped = null;
+                this._valueChange = null;
+            }
+            this._valueChange = ev;
+            this._valueChange_wrapped = (o, e) => {
+                let ext = this.value;
+                if (e.propertyName == 'Value') {
+                    if (this.beforeValueChange) {
+                        this.beforeValueChange(this, ext);
+                    }
+                    if (this._valueChange) {
+                        this._valueChange(this, ext);
+                    }
+                }
+            };
+            this.i.propertyChanged = delegateCombine(this.i.propertyChanged, this._valueChange_wrapped);
+        }
+    }
+    IgcMultiColumnComboBoxComponent._observedAttributesIgcMultiColumnComboBoxComponent = null;
+    IgcMultiColumnComboBoxComponent.htmlTagName = "igc-multi-column-combo-box";
+    IgcMultiColumnComboBoxComponent._isElementRegistered = false;
+    return IgcMultiColumnComboBoxComponent;
+})();