igniteui-webcomponents-layouts 7.1.1-beta.2 → 7.1.1-beta.3

package/esm2022/lib/igc-list-panel-component.js

@@ -0,0 +1,1118 @@
+import { ensureEnum, brushToString, stringToBrush, ensureBool, initializePropertiesFromCss, NamePatcher, toSpinal, enumToString, getAllPropertyNames, fromSpinal } from "igniteui-webcomponents-core";
+import { FontInfo } from "igniteui-webcomponents-core";
+import { WebComponentRenderer, WebComponentWrapper } from "igniteui-webcomponents-core";
+import { Base, delegateCombine, delegateRemove } from "igniteui-webcomponents-core";
+import { RegisterElementHelper } from "igniteui-webcomponents-core";
+import { ListPanel } from "./ListPanel";
+import { IgcHTMLElement } from "igniteui-webcomponents-core";
+import { SyncableObservableCollection$1 } from "igniteui-webcomponents-core";
+import { IgcListPanelTemplateItemUpdatingEventArgs } from './igc-list-panel-template-item-updating-event-args';
+import { ListPanelOrientation_$type } from './ListPanelOrientation';
+import { IgcListPanelContentRefreshedEventArgs } from './igc-list-panel-content-refreshed-event-args';
+import { IgcListPanelTemplateWidthRequestedEventArgs } from './igc-list-panel-template-width-requested-event-args';
+import { IgcListPanelTemplateHeightRequestedEventArgs } from './igc-list-panel-template-height-requested-event-args';
+import { LocalDataSource } from "igniteui-webcomponents-core";
+import { Scroller } from "igniteui-webcomponents-core";
+import { ScrollbarStyle_$type } from "igniteui-webcomponents-core";
+import { ListPanelScrollerKeyboardListener } from './ListPanelScrollerKeyboardListener';
+import { IgcListPanelItemEventArgs } from './igc-list-panel-item-event-args';
+import { IgcListPanelActiveRowChangedEventArgs } from './igc-list-panel-active-row-changed-event-args';
+import { IgcListPanelSelectionChangedEventArgs } from './igc-list-panel-selection-changed-event-args';
+import { IgcListPanelSelectedKeysChangedEventArgs } from './igc-list-panel-selected-keys-changed-event-args';
+import { IgcListPanelSelectedItemsChangedEventArgs } from './igc-list-panel-selected-items-changed-event-args';
+import { IgcListPanelPrimaryKeyValue } from './igc-list-panel-primary-key-value';
+import { IgcListPanelSelectedKeysCollection } from './igc-list-panel-selected-keys-collection';
+import { ListPanelPrimaryKeyValue } from './ListPanelPrimaryKeyValue';
+import { ListPanelSelectedKeysCollection as ListPanelSelectedKeysCollection_internal } from './ListPanelSelectedKeysCollection';
+import { ListPanelSelectionMode_$type } from './ListPanelSelectionMode';
+import { ListPanelActivationMode_$type } from './ListPanelActivationMode';
+import { ListPanelSelectionBehavior_$type } from './ListPanelSelectionBehavior';
+import { IgcListPanelSelectedItemsCollection } from './igc-list-panel-selected-items-collection';
+import { ListPanelSelectedItemsCollection as ListPanelSelectedItemsCollection_internal } from './ListPanelSelectedItemsCollection';
+import { IgcListPanelContentRecycledEventArgs } from './igc-list-panel-content-recycled-event-args';
+import { IgcListPanelContentRebindEventArgs } from './igc-list-panel-content-rebind-event-args';
+class IgcListPanelComponent extends IgcHTMLElement {
+    setScrollbarStyle(style) {
+        if (this._scroller) {
+            this._scroller.scrollbarStyle = style;
+        }
+    }
+    setScrollbarColor(color) {
+        if (this._scroller) {
+            this._scroller.scrollbarBrush = color;
+        }
+    }
+    set height(value) {
+        this._height = value;
+        this.style.height = value;
+        this.notifySizeChanged();
+    }
+    get height() {
+        return this._height;
+    }
+    set width(value) {
+        this._width = value;
+        this.style.width = value;
+        this.notifySizeChanged();
+    }
+    get width() {
+        return this._width;
+    }
+    ensureStretch() {
+        this.width = "100%";
+        this.height = "100%";
+    }
+    createLocalDataSource(itemsSource, schemaIncludedProperties) {
+        let lds = new LocalDataSource();
+        lds.schemaIncludedProperties = schemaIncludedProperties;
+        lds.dataSource = itemsSource;
+        return lds;
+    }
+    onContentSizeChanged() {
+        var width = this.i.absoluteWidth;
+        var height = this.i.absoluteHeight;
+        if (this._scroller != null &&
+            !isNaN(width) && !isNaN(height)) {
+            this._scroller.contentWidth = width;
+            this._scroller.contentHeight = height;
+        }
+    }
+    constructor() {
+        super();
+        this._implementation = null;
+        this._scroller = null;
+        this._disconnected = false;
+        this._dataSource = null;
+        this._settingAttributes = false;
+        this._attached = false;
+        this._queuedSetAttributes = [];
+        this._updatingFromAttribute = false;
+        this._selectedItems = null;
+        this._selectedKeys = null;
+        this.__p = null;
+        this._hasUserValues = new Set();
+        this._stylingContainer = null;
+        this._stylingParent = null;
+        this._inStyling = false;
+        this._itemRecycled = null;
+        this._itemRecycled_wrapped = null;
+        this._itemRebind = null;
+        this._itemRebind_wrapped = null;
+        this._selectedItemsChanged = null;
+        this._selectedItemsChanged_wrapped = null;
+        this._selectedKeysChanged = null;
+        this._selectedKeysChanged_wrapped = null;
+        this._selectionChanged = null;
+        this._selectionChanged_wrapped = null;
+        this._activeRowChanged = null;
+        this._activeRowChanged_wrapped = null;
+        this._contentRefreshed = null;
+        this._contentRefreshed_wrapped = null;
+        this._rowUpdating = null;
+        this._rowUpdating_wrapped = null;
+        this._itemWidthRequested = null;
+        this._itemWidthRequested_wrapped = null;
+        this._itemHeightRequested = null;
+        this._itemHeightRequested_wrapped = null;
+        this._itemClicked = null;
+        this._itemClicked_wrapped = null;
+        this._actualPrimaryKeyChange = null;
+        this._actualPrimaryKeyChange_wrapped = null;
+        if (this._styling) {
+            NamePatcher.ensureStylablePatched(Object.getPrototypeOf(this));
+        }
+        this._implementation = this.createImplementation();
+        this._implementation.externalObject = this;
+        this._webComponentRenderer = new WebComponentRenderer(this, document, true, {});
+        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.externalListPanel = this;
+        this.i.provideContainer(this._webComponentRenderer);
+        this.i.viewportManager = this;
+        let scroller = new Scroller();
+        scroller.scrollbarStyle = this.scrollbarStyle;
+        this._scroller = scroller;
+        this._scroller.keyboardListener = new ListPanelScrollerKeyboardListener(this.i);
+        scroller.provideContainer(this._webComponentRenderer);
+        this._content = (this.i.view.contentGrid);
+        scroller.provideContent(new WebComponentWrapper(this._content, this._webComponentRenderer));
+        scroller.onScrolling = () => this.onScroll();
+        scroller.onScrollStart = () => this.onScrollStart();
+        scroller.onScrollStop = () => this.onScrollStop();
+        scroller.viewportWidth = this._webComponentRenderer.rootWrapper.width();
+        scroller.viewportHeight = this._webComponentRenderer.rootWrapper.height();
+        this.notifySizeChanged();
+        this._webComponentRenderer.addSizeWatcher(() => {
+            this.notifySizeChanged();
+        });
+    }
+    moveViewportTo(x, y) {
+        this._scroller.scrollTo(x, y);
+    }
+    onScroll() {
+        let top = this._scroller.scrollTop;
+        let left = this._scroller.scrollLeft;
+        let width = this._scroller.viewportWidth;
+        let height = this._scroller.viewportHeight;
+        //console.log("top:" + top);
+        this.i.setViewport(left, top, left + width, top + height);
+    }
+    onScrollStart() {
+        //this.i.notifyScrollStart();
+    }
+    onScrollStop() {
+        //this.i.notifyScrollStop();
+    }
+    _scrollTo(x, y) {
+        this._scroller.scrollTo(x, y);
+        //let width = this._scroller.viewportWidth;
+        //let height = this._scroller.viewportHeight;
+        //this._grid.setViewport(x, y, x + width, y + height);
+    }
+    // supports angular themes or custom properties set in CSS
+    updateStyle() {
+        this._styling(this, this);
+    }
+    destroy() {
+        this._implementation.destroy();
+        this._webComponentRenderer.destroy();
+    }
+    createImplementation() {
+        return new ListPanel();
+    }
+    get i() {
+        return this._implementation;
+    }
+    disconnectedCallback() {
+        if (!this._disconnected) {
+            if (this.i) {
+                if (this._scroller) {
+                    this._scroller.onDetachedFromUI();
+                }
+            }
+        }
+        this._disconnected = true;
+    }
+    notifySizeChanged() {
+        if (this._webComponentRenderer) {
+            var width = this._webComponentRenderer.rootWrapper.width();
+            var height = this._webComponentRenderer.rootWrapper.height();
+            this._scroller.viewportWidth = width;
+            this._scroller.viewportHeight = height;
+            this._scroller.onViewportSizeChanged(width, height, true);
+        }
+        this.i.notifySizeChanged();
+    }
+    connectedCallback() {
+        if (this._disconnected) {
+            this._disconnected = false;
+            if (this.i) {
+                if (this._scroller) {
+                    this._scroller.onAttachedToUI();
+                }
+            }
+            return;
+        }
+        this.classList.add("ig-list-panel");
+        this.classList.add("igc-list-panel");
+        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.notifySizeChanged();
+    }
+    set dataSource(value) {
+        this._dataSource = value;
+        if (this._implementation != null) {
+            this._implementation.itemsSource = this._dataSource;
+        }
+    }
+    get dataSource() {
+        return this._dataSource;
+    }
+    _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 { this._observedAttributesIgcListPanelComponent = null; }
+    static get observedAttributes() {
+        if (IgcListPanelComponent._observedAttributesIgcListPanelComponent == null) {
+            let names = getAllPropertyNames(IgcListPanelComponent);
+            for (let i = 0; i < names.length; i++) {
+                names[i] = toSpinal(names[i]);
+            }
+            IgcListPanelComponent._observedAttributesIgcListPanelComponent = names;
+        }
+        return IgcListPanelComponent._observedAttributesIgcListPanelComponent;
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (this._settingAttributes) {
+            return;
+        }
+        let setName = fromSpinal(name);
+        this._updatingFromAttribute = true;
+        this[setName] = newValue;
+        this._updatingFromAttribute = false;
+    }
+    static { this.htmlTagName = "igc-list-panel"; }
+    static { this._isElementRegistered = false; }
+    static register() {
+        if (!IgcListPanelComponent._isElementRegistered) {
+            IgcListPanelComponent._isElementRegistered = true;
+            RegisterElementHelper.registerElement(IgcListPanelComponent.htmlTagName, IgcListPanelComponent);
+        }
+    }
+    /**
+ * Sets or gets the grid selection mode.
+*/
+    get selectionMode() {
+        return this.i.as;
+    }
+    set selectionMode(v) {
+        this.i.as = ensureEnum(ListPanelSelectionMode_$type, v);
+        this._a("selectionMode", enumToString(ListPanelSelectionMode_$type, this.i.as));
+    }
+    /**
+     * Gets or sets whether the active row style will be applied to rows when made active.
+    */
+    get isActiveRowStyleEnabled() {
+        return this.i.by;
+    }
+    set isActiveRowStyleEnabled(v) {
+        this.i.by = ensureBool(v);
+        this._a("isActiveRowStyleEnabled", this.i.by);
+    }
+    /**
+     * Gets or sets the background color to use for the cells when they are selected
+    */
+    get selectedBackground() {
+        return brushToString(this.i.h8);
+    }
+    set selectedBackground(v) {
+        this.i.h8 = stringToBrush(v);
+        this._a("selectedBackground", brushToString(this.i.h8));
+    }
+    /**
+     * Gets or sets the background color to use.
+    */
+    get normalBackground() {
+        return brushToString(this.i.h6);
+    }
+    set normalBackground(v) {
+        this.i.h6 = stringToBrush(v);
+        this._a("normalBackground", brushToString(this.i.h6));
+    }
+    /**
+     * Gets or sets the activation border color to use.
+    */
+    get activationBorder() {
+        return brushToString(this.i.h2);
+    }
+    set activationBorder(v) {
+        this.i.h2 = stringToBrush(v);
+        this._a("activationBorder", brushToString(this.i.h2));
+    }
+    /**
+     * Gets or sets the amount of left activation border to use for the cell content for this column.
+    */
+    get activationBorderLeftWidth() {
+        return this.i.dt;
+    }
+    set activationBorderLeftWidth(v) {
+        this.i.dt = +v;
+        this._a("activationBorderLeftWidth", this.i.dt);
+    }
+    /**
+     * Gets or sets the amount of top activation border to use for the cell content for this column.
+    */
+    get activationBorderTopWidth() {
+        return this.i.dv;
+    }
+    set activationBorderTopWidth(v) {
+        this.i.dv = +v;
+        this._a("activationBorderTopWidth", this.i.dv);
+    }
+    /**
+     * Gets or sets the amount of right activation border to use for the cell content of this column.
+    */
+    get activationBorderRightWidth() {
+        return this.i.du;
+    }
+    set activationBorderRightWidth(v) {
+        this.i.du = +v;
+        this._a("activationBorderRightWidth", this.i.du);
+    }
+    /**
+     * Gets or sets the amount of bottom activation border to use for the cell content of this column.
+    */
+    get activationBorderBottomWidth() {
+        return this.i.ds;
+    }
+    set activationBorderBottomWidth(v) {
+        this.i.ds = +v;
+        this._a("activationBorderBottomWidth", this.i.ds);
+    }
+    /**
+     * Sets or gets the grid selection mode.
+    */
+    get activationMode() {
+        return this.i.r;
+    }
+    set activationMode(v) {
+        this.i.r = ensureEnum(ListPanelActivationMode_$type, v);
+        this._a("activationMode", enumToString(ListPanelActivationMode_$type, this.i.r));
+    }
+    /**
+     * Sets or gets how selection behaves in the grid.
+    */
+    get selectionBehavior() {
+        return this.i.an;
+    }
+    set selectionBehavior(v) {
+        this.i.an = ensureEnum(ListPanelSelectionBehavior_$type, v);
+        this._a("selectionBehavior", enumToString(ListPanelSelectionBehavior_$type, this.i.an));
+    }
+    /**
+     * Sets or gets the user provided primary key to assume for the data. Certain functionality of the grid 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 primaryKey() {
+        return this.i.f;
+    }
+    set primaryKey(v) {
+        if (v && !Array.isArray(v) && typeof (v) == "string") {
+            const re = /\s*(?:,|\s|$)\s*/gm;
+            v = v.split(re);
+        }
+        this.i.f = v;
+    }
+    /**
+     * Gets either the inferred primary key from the data source, or the user provided primary key, if present. Represents the actual primary key that the grid will use in operations that require it.
+    */
+    get actualPrimaryKey() {
+        return this.i.d;
+    }
+    set actualPrimaryKey(v) {
+        if (v && !Array.isArray(v) && typeof (v) == "string") {
+            const re = /\s*(?:,|\s|$)\s*/gm;
+            v = v.split(re);
+        }
+        this.i.d = v;
+    }
+    /**
+     * Gets which items are currently selected in the grid. Collection can be updated to programatically select items.
+    */
+    get selectedItems() {
+        if (this._selectedItems === null) {
+            let coll = new IgcListPanelSelectedItemsCollection();
+            let innerColl = this.i.ai;
+            if (!innerColl) {
+                innerColl = new ListPanelSelectedItemsCollection_internal();
+            }
+            this._selectedItems = coll._fromInner(innerColl);
+        }
+        return this._selectedItems;
+    }
+    set selectedItems(v) {
+        if (this._selectedItems !== null) {
+            this._selectedItems._setSyncTarget(null);
+            this._selectedItems = null;
+        }
+        let coll = new IgcListPanelSelectedItemsCollection();
+        this._selectedItems = coll._fromOuter(v);
+        let syncColl = new SyncableObservableCollection$1(Base.$type);
+        let innerColl = this.i.ai;
+        if (!innerColl) {
+            innerColl = new ListPanelSelectedItemsCollection_internal();
+        }
+        syncColl._inner = innerColl;
+        syncColl.clear();
+        this._selectedItems._setSyncTarget(syncColl);
+    }
+    /**
+     * Gets which primary key values are currently selected in the grid. Collection can be updated to programatically select items.
+    */
+    get selectedKeys() {
+        if (this._selectedKeys === null) {
+            let coll = new IgcListPanelSelectedKeysCollection();
+            let innerColl = this.i.al;
+            if (!innerColl) {
+                innerColl = new ListPanelSelectedKeysCollection_internal();
+            }
+            this._selectedKeys = coll._fromInner(innerColl);
+        }
+        return this._selectedKeys;
+    }
+    set selectedKeys(v) {
+        if (this._selectedKeys !== null) {
+            this._selectedKeys._setSyncTarget(null);
+            this._selectedKeys = null;
+        }
+        let coll = new IgcListPanelSelectedKeysCollection();
+        this._selectedKeys = coll._fromOuter(v);
+        let syncColl = new SyncableObservableCollection$1(ListPanelPrimaryKeyValue.$type);
+        let innerColl = this.i.al;
+        if (!innerColl) {
+            innerColl = new ListPanelSelectedKeysCollection_internal();
+        }
+        syncColl._inner = innerColl;
+        syncColl.clear();
+        this._selectedKeys._setSyncTarget(syncColl);
+    }
+    /**
+     * Gets either the filtered properties to include in the schema of the data source.
+    */
+    get schemaIncludedProperties() {
+        return this.i.g;
+    }
+    set schemaIncludedProperties(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 spacing between items.
+    */
+    get itemSpacing() {
+        return this.i.c9;
+    }
+    set itemSpacing(v) {
+        this.i.c9 = +v;
+        this._a("itemSpacing", this.i.c9);
+    }
+    /**
+     * Gets or Sets the property name that contains the values.
+    */
+    get rowHeight() {
+        return this.i.ef;
+    }
+    set rowHeight(v) {
+        this.i.ef = +v;
+        this._a("rowHeight", this.i.ef);
+    }
+    get actualRowHeight() {
+        return this.i.c6;
+    }
+    set actualRowHeight(v) {
+        this.i.c6 = +v;
+        this._a("actualRowHeight", this.i.c6);
+    }
+    /**
+     * Gets or Sets the property name that contains the values.
+    */
+    get cellTextStyle() {
+        if (this.i.a4 == null) {
+            return null;
+        }
+        return this.i.a4.fontString;
+    }
+    set cellTextStyle(v) {
+        let fi = new FontInfo();
+        fi.fontString = v;
+        this.i.a4 = fi;
+        this._a("cellTextStyle", this.i.a4 != null ? this.i.a4.fontString : "");
+    }
+    get hasUnevenSizes() {
+        return this.i.bw;
+    }
+    /**
+     * Gets or sets the style of scrollbar.
+    */
+    get scrollbarStyle() {
+        return this.i.a0;
+    }
+    set scrollbarStyle(v) {
+        this.i.a0 = ensureEnum(ScrollbarStyle_$type, v);
+        this._a("scrollbarStyle", enumToString(ScrollbarStyle_$type, this.i.a0));
+    }
+    /**
+     * Gets or sets the scrollbar background color.
+    */
+    get scrollbarBackground() {
+        return brushToString(this.i.h7);
+    }
+    set scrollbarBackground(v) {
+        this.i.h7 = stringToBrush(v);
+        this._a("scrollbarBackground", brushToString(this.i.h7));
+    }
+    /**
+     * Gets or sets the color to use for the background of the component.
+    */
+    get backgroundColor() {
+        return brushToString(this.i.h3);
+    }
+    set backgroundColor(v) {
+        this.i.h3 = stringToBrush(v);
+        this._a("backgroundColor", brushToString(this.i.h3));
+    }
+    /**
+     * Gets or sets the color to use for the background of the component.
+    */
+    get orientation() {
+        return this.i.ad;
+    }
+    set orientation(v) {
+        this.i.ad = ensureEnum(ListPanelOrientation_$type, v);
+        this._a("orientation", enumToString(ListPanelOrientation_$type, this.i.ad));
+    }
+    /**
+     * Gets or sets the color to use for the background of the component.
+    */
+    get isCustomRowHeightEnabled() {
+        return this.i.b0;
+    }
+    set isCustomRowHeightEnabled(v) {
+        this.i.b0 = ensureBool(v);
+        this._a("isCustomRowHeightEnabled", this.i.b0);
+    }
+    /**
+     * Gets or sets the color to use for the text of the component.
+    */
+    get textColor() {
+        return brushToString(this.i.h9);
+    }
+    set textColor(v) {
+        this.i.h9 = stringToBrush(v);
+        this._a("textColor", brushToString(this.i.h9));
+    }
+    /**
+     * Gets or sets the position of the active row.
+    */
+    get activeRow() {
+        return this.i.dw;
+    }
+    set activeRow(v) {
+        this.i.dw = +v;
+        this._a("activeRow", this.i.dw);
+    }
+    /**
+     * Gets or sets if the grid should notify on programmatic selection changes as well as changes from the UI.
+    */
+    get notifyOnAllSelectionChanges() {
+        return this.i.b3;
+    }
+    set notifyOnAllSelectionChanges(v) {
+        this.i.b3 = ensureBool(v);
+        this._a("notifyOnAllSelectionChanges", this.i.b3);
+    }
+    findByName(name) {
+        if (this.findEphemera) {
+            if (name && name.indexOf("@@e:") == 0) {
+                return this.findEphemera(name);
+            }
+        }
+        if (this.selectedKeys != null && this.selectedKeys.findByName && this.selectedKeys.findByName(name)) {
+            return this.selectedKeys.findByName(name);
+        }
+        return null;
+    }
+    get hasUserValues() {
+        return this._hasUserValues;
+    }
+    __m(propertyName) {
+        if (!this._inStyling) {
+            this._hasUserValues.add(propertyName);
+        }
+    }
+    _styling(container, component, parent) {
+        if (this._inStyling) {
+            return;
+        }
+        this._inStyling = true;
+        this._stylingContainer = container;
+        this._stylingParent = component;
+        let genericPrefix = "";
+        let typeName = this.i.$type.name;
+        if (typeName.indexOf("Xam") === 0) {
+            typeName = typeName.substring(3);
+        }
+        genericPrefix = toSpinal("ListPanelComponent");
+        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;
+    }
+    getRowKey(primaryKey, rowIndex) {
+        let iv = this.i.af(primaryKey, rowIndex);
+        let ret = null;
+        if (iv && iv.externalObject) {
+            ret = iv.externalObject;
+        }
+        else {
+            if (iv) {
+                let e = new IgcListPanelPrimaryKeyValue();
+                e._implementation = iv;
+                Object.defineProperty(iv, 'externalObject', { value: e, enumerable: false, configurable: true, writable: true });
+                ret = e;
+            }
+        }
+        return ret;
+    }
+    getItemKey(primaryKey, item_) {
+        let iv = this.i.ae(primaryKey, item_);
+        let ret = null;
+        if (iv && iv.externalObject) {
+            ret = iv.externalObject;
+        }
+        else {
+            if (iv) {
+                let e = new IgcListPanelPrimaryKeyValue();
+                e._implementation = iv;
+                Object.defineProperty(iv, 'externalObject', { value: e, enumerable: false, configurable: true, writable: true });
+                ret = e;
+            }
+        }
+        return ret;
+    }
+    /**
+     * Gets the last visible index in the grid.
+    
+    */
+    getLastVisibleIndex() {
+        let iv = this.i.d5();
+        return (iv);
+    }
+    /**
+     * Gets the first visible index in the grid.
+    
+    */
+    getFirstVisibleIndex() {
+        let iv = this.i.d3();
+        return (iv);
+    }
+    /**
+     * Invalidates the bound data for the rows currently visible.
+    
+    */
+    invalidateVisibleItems() {
+        this.i.f7();
+    }
+    notifySetItem(index, oldItem, newItem) {
+        this.i.gd(index, oldItem, newItem);
+    }
+    /**
+     * Manually notifies the grid's data source that the data it has bound to has been cleared and needs to be re-examined.
+     * This should not be called if the data that the grid is bound to is already observable.
+    
+    */
+    notifyClearItems() {
+        this.i.ga();
+    }
+    notifyInsertItem(index, newItem) {
+        this.i.gb(index, newItem);
+    }
+    notifyRemoveItem(index, oldItem) {
+        this.i.gc(index, oldItem);
+    }
+    /**
+     * Returns the data index of an item within the bound data source.
+    
+    * @param item  * The item from which to get the index.
+    */
+    dataIndexOfItem(item) {
+        let iv = this.i.dy(item);
+        return (iv);
+    }
+    dataIndexOfPrimaryKey(key) {
+        let iv = this.i.dz(key);
+        return (iv);
+    }
+    exportVisualData() {
+        let iv = this.i.ei();
+        return (iv);
+    }
+    exportSerializedVisualData() {
+        let iv = this.i.e0();
+        return (iv);
+    }
+    /**
+     * Selects all of the rows in the grid.
+    
+    */
+    selectAllRows() {
+        this.i.hl();
+    }
+    /**
+     * Scrolls the grid to given row, by index
+    
+    * @param rowNumber  * The row index to scroll to.
+    */
+    scrollToRowByIndex(rowNumber) {
+        this.i.hj(rowNumber);
+    }
+    /**
+     * Scrolls the grid so that a row is the last visible, by index.
+    
+    * @param rowNumber  * The row index to scroll to.
+    */
+    scrollToLastRowByIndex(rowNumber) {
+        this.i.hh(rowNumber);
+    }
+    /**
+     * Deselects all currently selected rows.
+    
+    */
+    deselectAllRows() {
+        this.i.fq();
+    }
+    /**
+     * Called when item content is recycled.
+    */
+    get itemRecycled() {
+        return this._itemRecycled;
+    }
+    set itemRecycled(ev) {
+        if (this._itemRecycled_wrapped !== null) {
+            this.i.itemRecycled = delegateRemove(this.i.itemRecycled, this._itemRecycled_wrapped);
+            this._itemRecycled_wrapped = null;
+            this._itemRecycled = null;
+        }
+        this._itemRecycled = ev;
+        this._itemRecycled_wrapped = (o, e) => {
+            let outerArgs = new IgcListPanelContentRecycledEventArgs();
+            outerArgs._provideImplementation(e);
+            if (this.beforeItemRecycled) {
+                this.beforeItemRecycled(this, outerArgs);
+            }
+            if (this._itemRecycled) {
+                this._itemRecycled(this, outerArgs);
+            }
+        };
+        this.i.itemRecycled = delegateCombine(this.i.itemRecycled, this._itemRecycled_wrapped);
+        ;
+    }
+    /**
+     * Called when item content is rebound.
+    */
+    get itemRebind() {
+        return this._itemRebind;
+    }
+    set itemRebind(ev) {
+        if (this._itemRebind_wrapped !== null) {
+            this.i.itemRebind = delegateRemove(this.i.itemRebind, this._itemRebind_wrapped);
+            this._itemRebind_wrapped = null;
+            this._itemRebind = null;
+        }
+        this._itemRebind = ev;
+        this._itemRebind_wrapped = (o, e) => {
+            let outerArgs = new IgcListPanelContentRebindEventArgs();
+            outerArgs._provideImplementation(e);
+            if (this.beforeItemRebind) {
+                this.beforeItemRebind(this, outerArgs);
+            }
+            if (this._itemRebind) {
+                this._itemRebind(this, outerArgs);
+            }
+        };
+        this.i.itemRebind = delegateCombine(this.i.itemRebind, this._itemRebind_wrapped);
+        ;
+    }
+    /**
+     * Called when the selected items change.
+    */
+    get selectedItemsChanged() {
+        return this._selectedItemsChanged;
+    }
+    set selectedItemsChanged(ev) {
+        if (this._selectedItemsChanged_wrapped !== null) {
+            this.i.selectedItemsChanged = delegateRemove(this.i.selectedItemsChanged, this._selectedItemsChanged_wrapped);
+            this._selectedItemsChanged_wrapped = null;
+            this._selectedItemsChanged = null;
+        }
+        this._selectedItemsChanged = ev;
+        this._selectedItemsChanged_wrapped = (o, e) => {
+            let outerArgs = new IgcListPanelSelectedItemsChangedEventArgs();
+            outerArgs._provideImplementation(e);
+            if (this.beforeSelectedItemsChanged) {
+                this.beforeSelectedItemsChanged(this, outerArgs);
+            }
+            if (this._selectedItemsChanged) {
+                this._selectedItemsChanged(this, outerArgs);
+            }
+        };
+        this.i.selectedItemsChanged = delegateCombine(this.i.selectedItemsChanged, this._selectedItemsChanged_wrapped);
+        ;
+    }
+    /**
+     * Called when the selected keys change.
+    */
+    get selectedKeysChanged() {
+        return this._selectedKeysChanged;
+    }
+    set selectedKeysChanged(ev) {
+        if (this._selectedKeysChanged_wrapped !== null) {
+            this.i.selectedKeysChanged = delegateRemove(this.i.selectedKeysChanged, this._selectedKeysChanged_wrapped);
+            this._selectedKeysChanged_wrapped = null;
+            this._selectedKeysChanged = null;
+        }
+        this._selectedKeysChanged = ev;
+        this._selectedKeysChanged_wrapped = (o, e) => {
+            let outerArgs = new IgcListPanelSelectedKeysChangedEventArgs();
+            outerArgs._provideImplementation(e);
+            if (this.beforeSelectedKeysChanged) {
+                this.beforeSelectedKeysChanged(this, outerArgs);
+            }
+            if (this._selectedKeysChanged) {
+                this._selectedKeysChanged(this, outerArgs);
+            }
+        };
+        this.i.selectedKeysChanged = delegateCombine(this.i.selectedKeysChanged, this._selectedKeysChanged_wrapped);
+        ;
+    }
+    /**
+     * Called when an individual selection operation has been made.
+    */
+    get selectionChanged() {
+        return this._selectionChanged;
+    }
+    set selectionChanged(ev) {
+        if (this._selectionChanged_wrapped !== null) {
+            this.i.selectionChanged = delegateRemove(this.i.selectionChanged, this._selectionChanged_wrapped);
+            this._selectionChanged_wrapped = null;
+            this._selectionChanged = null;
+        }
+        this._selectionChanged = ev;
+        this._selectionChanged_wrapped = (o, e) => {
+            let outerArgs = new IgcListPanelSelectionChangedEventArgs();
+            outerArgs._provideImplementation(e);
+            if (this.beforeSelectionChanged) {
+                this.beforeSelectionChanged(this, outerArgs);
+            }
+            if (this._selectionChanged) {
+                this._selectionChanged(this, outerArgs);
+            }
+        };
+        this.i.selectionChanged = delegateCombine(this.i.selectionChanged, this._selectionChanged_wrapped);
+        ;
+    }
+    /**
+     * Called when the active row changes.
+    */
+    get activeRowChanged() {
+        return this._activeRowChanged;
+    }
+    set activeRowChanged(ev) {
+        if (this._activeRowChanged_wrapped !== null) {
+            this.i.activeRowChanged = delegateRemove(this.i.activeRowChanged, this._activeRowChanged_wrapped);
+            this._activeRowChanged_wrapped = null;
+            this._activeRowChanged = null;
+        }
+        this._activeRowChanged = ev;
+        this._activeRowChanged_wrapped = (o, e) => {
+            let outerArgs = new IgcListPanelActiveRowChangedEventArgs();
+            outerArgs._provideImplementation(e);
+            if (this.beforeActiveRowChanged) {
+                this.beforeActiveRowChanged(this, outerArgs);
+            }
+            if (this._activeRowChanged) {
+                this._activeRowChanged(this, outerArgs);
+            }
+        };
+        this.i.activeRowChanged = delegateCombine(this.i.activeRowChanged, this._activeRowChanged_wrapped);
+        ;
+    }
+    get contentRefreshed() {
+        return this._contentRefreshed;
+    }
+    set contentRefreshed(ev) {
+        if (this._contentRefreshed_wrapped !== null) {
+            this.i.contentRefreshed = delegateRemove(this.i.contentRefreshed, this._contentRefreshed_wrapped);
+            this._contentRefreshed_wrapped = null;
+            this._contentRefreshed = null;
+        }
+        this._contentRefreshed = ev;
+        this._contentRefreshed_wrapped = (o, e) => {
+            let outerArgs = new IgcListPanelContentRefreshedEventArgs();
+            outerArgs._provideImplementation(e);
+            if (this.beforeContentRefreshed) {
+                this.beforeContentRefreshed(this, outerArgs);
+            }
+            if (this._contentRefreshed) {
+                this._contentRefreshed(this, outerArgs);
+            }
+        };
+        this.i.contentRefreshed = delegateCombine(this.i.contentRefreshed, this._contentRefreshed_wrapped);
+        ;
+    }
+    get rowUpdating() {
+        return this._rowUpdating;
+    }
+    set rowUpdating(ev) {
+        if (this._rowUpdating_wrapped !== null) {
+            this.i.rowUpdating = delegateRemove(this.i.rowUpdating, this._rowUpdating_wrapped);
+            this._rowUpdating_wrapped = null;
+            this._rowUpdating = null;
+        }
+        this._rowUpdating = ev;
+        this._rowUpdating_wrapped = (o, e) => {
+            let outerArgs = new IgcListPanelTemplateItemUpdatingEventArgs();
+            outerArgs._provideImplementation(e);
+            if (this.beforeRowUpdating) {
+                this.beforeRowUpdating(this, outerArgs);
+            }
+            if (this._rowUpdating) {
+                this._rowUpdating(this, outerArgs);
+            }
+        };
+        this.i.rowUpdating = delegateCombine(this.i.rowUpdating, this._rowUpdating_wrapped);
+        ;
+    }
+    get itemWidthRequested() {
+        return this._itemWidthRequested;
+    }
+    set itemWidthRequested(ev) {
+        if (this._itemWidthRequested_wrapped !== null) {
+            this.i.itemWidthRequested = delegateRemove(this.i.itemWidthRequested, this._itemWidthRequested_wrapped);
+            this._itemWidthRequested_wrapped = null;
+            this._itemWidthRequested = null;
+        }
+        this._itemWidthRequested = ev;
+        this._itemWidthRequested_wrapped = (o, e) => {
+            let outerArgs = new IgcListPanelTemplateWidthRequestedEventArgs();
+            outerArgs._provideImplementation(e);
+            if (this.beforeItemWidthRequested) {
+                this.beforeItemWidthRequested(this, outerArgs);
+            }
+            if (this._itemWidthRequested) {
+                this._itemWidthRequested(this, outerArgs);
+            }
+        };
+        this.i.itemWidthRequested = delegateCombine(this.i.itemWidthRequested, this._itemWidthRequested_wrapped);
+        ;
+    }
+    get itemHeightRequested() {
+        return this._itemHeightRequested;
+    }
+    set itemHeightRequested(ev) {
+        if (this._itemHeightRequested_wrapped !== null) {
+            this.i.itemHeightRequested = delegateRemove(this.i.itemHeightRequested, this._itemHeightRequested_wrapped);
+            this._itemHeightRequested_wrapped = null;
+            this._itemHeightRequested = null;
+        }
+        this._itemHeightRequested = ev;
+        this._itemHeightRequested_wrapped = (o, e) => {
+            let outerArgs = new IgcListPanelTemplateHeightRequestedEventArgs();
+            outerArgs._provideImplementation(e);
+            if (this.beforeItemHeightRequested) {
+                this.beforeItemHeightRequested(this, outerArgs);
+            }
+            if (this._itemHeightRequested) {
+                this._itemHeightRequested(this, outerArgs);
+            }
+        };
+        this.i.itemHeightRequested = delegateCombine(this.i.itemHeightRequested, this._itemHeightRequested_wrapped);
+        ;
+    }
+    get itemClicked() {
+        return this._itemClicked;
+    }
+    set itemClicked(ev) {
+        if (this._itemClicked_wrapped !== null) {
+            this.i.itemClicked = delegateRemove(this.i.itemClicked, this._itemClicked_wrapped);
+            this._itemClicked_wrapped = null;
+            this._itemClicked = null;
+        }
+        this._itemClicked = ev;
+        this._itemClicked_wrapped = (o, e) => {
+            let outerArgs = new IgcListPanelItemEventArgs();
+            outerArgs._provideImplementation(e);
+            if (this.beforeItemClicked) {
+                this.beforeItemClicked(this, outerArgs);
+            }
+            if (this._itemClicked) {
+                this._itemClicked(this, outerArgs);
+            }
+        };
+        this.i.itemClicked = delegateCombine(this.i.itemClicked, this._itemClicked_wrapped);
+        ;
+    }
+    get actualPrimaryKeyChange() {
+        return this._actualPrimaryKeyChange;
+    }
+    set actualPrimaryKeyChange(ev) {
+        if (this._actualPrimaryKeyChange_wrapped !== null) {
+            this.i.propertyChanged = delegateRemove(this.i.propertyChanged, this._actualPrimaryKeyChange_wrapped);
+            this._actualPrimaryKeyChange_wrapped = null;
+            this._actualPrimaryKeyChange = null;
+        }
+        this._actualPrimaryKeyChange = ev;
+        this._actualPrimaryKeyChange_wrapped = (o, e) => {
+            let ext = this.actualPrimaryKey;
+            if (e.propertyName == 'D') {
+                if (this.beforeActualPrimaryKeyChange) {
+                    this.beforeActualPrimaryKeyChange(this, ext);
+                }
+                if (this._actualPrimaryKeyChange) {
+                    this._actualPrimaryKeyChange(this, ext);
+                }
+            }
+        };
+        this.i.propertyChanged = delegateCombine(this.i.propertyChanged, this._actualPrimaryKeyChange_wrapped);
+    }
+}
+export { IgcListPanelComponent };