igniteui-webcomponents-grids 1.4.2 → 3.2.2

package/esm2015/lib/igc-data-grid-module.js

@@ -11,6 +11,8 @@ import { IgcXInputGroupModule } from "igniteui-webcomponents-inputs";
 import { IgcMultiColumnComboBoxModule } from './igc-multi-column-combo-box-module';
 import { IgcFilterOperandModule } from './igc-filter-operand-module';
 import { IgcColumnGroupingModule } from './igc-column-grouping-module';
+import { IgcDataGridPagerModule } from './igc-data-grid-pager-module';
+import { IgcDataGridToolbarModule } from './igc-data-grid-toolbar-module';
 export class IgcDataGridModule {
     static register() {
         IgcDataGridAllColumnsModule.register();
@@ -20,5 +22,7 @@ export class IgcDataGridModule {
         IgcMultiColumnComboBoxModule.register();
         IgcFilterOperandModule.register();
         IgcColumnGroupingModule.register();
+        IgcDataGridPagerModule.register();
+        IgcDataGridToolbarModule.register();
     }
 }

package/esm2015/lib/igc-data-grid-pager-component.js

@@ -0,0 +1,368 @@
+import { delegateCombine, delegateRemove } from "igniteui-webcomponents-core";
+import { getAllPropertyNames, fromSpinal, toSpinal, brushToString, stringToBrush, initializePropertiesFromCss, NamePatcher } from "igniteui-webcomponents-core";
+import { WebComponentRenderer } from "igniteui-webcomponents-core";
+import { RegisterElementHelper } from "igniteui-webcomponents-core";
+import { FontInfo } from "igniteui-webcomponents-core";
+import { BrowserExecutionContext } from "./BrowserExecutionContext";
+import { Pager } from "./Pager";
+import { IgcHTMLElement } from "igniteui-webcomponents-core";
+import { IgcPageChangedEventArgs } from "./igc-page-changed-event-args";
+let PagerStylingDefaults = {};
+export let IgcDataGridPagerComponent = /*@__PURE__*/ (() => {
+    class IgcDataGridPagerComponent extends IgcHTMLElement {
+        constructor() {
+            super();
+            this._contentInitialized = false;
+            this._renderer = null;
+            this._disconnected = false;
+            this.containerResized = function () {
+                //var width = this._container.getNativeElement().clientWidth;
+                //var height = this._container.getNativeElement().clientHeight;
+            };
+            this._dataSource = null;
+            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._pageChanged = null;
+            this._pageChanged_wrapped = null;
+            if (this._styling) {
+                NamePatcher.ensureStylablePatched(Object.getPrototypeOf(this));
+            }
+            this._renderer = new WebComponentRenderer(this, document, true, PagerStylingDefaults, null);
+            this._implementation = new Pager();
+            this._implementation.executionContext = new BrowserExecutionContext(null);
+            this._implementation.externalObject = this;
+            this._renderer.addSizeWatcher(() => {
+                this.containerResized();
+            });
+        }
+        set height(value) {
+            this._height = value;
+            this.style.height = value;
+            this.containerResized();
+        }
+        get height() {
+            return this._height;
+        }
+        set width(value) {
+            this._width = value;
+            this.style.width = value;
+            this.containerResized();
+        }
+        get width() {
+            return this._width;
+        }
+        createImplementation() {
+            return new Pager();
+        }
+        get i() {
+            return this._implementation;
+        }
+        onImplementationCreated() {
+        }
+        disconnectedCallback() {
+            this._disconnected = true;
+            this._attached = false;
+        }
+        connectedCallback() {
+            if (this._disconnected) {
+                this._disconnected = false;
+                return;
+            }
+            // Apparently if you read or write the DOM in the constructor of the WebComponent the browser will error. We're supposed to do that
+            // stuff in the connectedCallback.
+            if (!this._contentInitialized) {
+                this._implementation.provideContainer(this._renderer);
+                this._contentInitialized = true;
+            }
+            this.classList.add("ig-data-grid-pager");
+            this.classList.add("igc-data-grid-pager");
+            this._attached = true;
+            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.targetGrid = this.targetGrid.i;
+            if (!this.targetGrid) {
+                this.i.itemsSource = this._dataSource;
+            }
+        }
+        get actualDataSource() {
+            return this.i.actualDataSource;
+        }
+        /**
+         * Gets or sets the data used by the pager.
+         * */
+        set dataSource(value) {
+            this._dataSource = value;
+            if (this.i != null) {
+                this.i.itemsSource = this._dataSource;
+            }
+        }
+        get dataSource() {
+            return this._dataSource;
+        }
+        /**
+         * Gets or sets the target grid for the pager.
+         * */
+        set targetGrid(value) {
+            value == null ? this.i.targetGrid = null : this.i.targetGrid = value.i;
+        }
+        get targetGrid() {
+            if (this.i.targetGrid == null) {
+                return null;
+            }
+            return this.i.targetGrid.externalObject;
+        }
+        _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 (IgcDataGridPagerComponent._observedAttributesIgcDataGridPagerComponent == null) {
+                let names = getAllPropertyNames(IgcDataGridPagerComponent);
+                for (let i = 0; i < names.length; i++) {
+                    names[i] = toSpinal(names[i]);
+                }
+                IgcDataGridPagerComponent._observedAttributesIgcDataGridPagerComponent = names;
+            }
+            return IgcDataGridPagerComponent._observedAttributesIgcDataGridPagerComponent;
+        }
+        attributeChangedCallback(name, oldValue, newValue) {
+            if (this._settingAttributes) {
+                return;
+            }
+            let setName = fromSpinal(name);
+            this._updatingFromAttribute = true;
+            this[setName] = newValue;
+            this._updatingFromAttribute = false;
+        }
+        static register() {
+            if (!IgcDataGridPagerComponent._isElementRegistered) {
+                IgcDataGridPagerComponent._isElementRegistered = true;
+                RegisterElementHelper.registerElement(IgcDataGridPagerComponent.htmlTagName, IgcDataGridPagerComponent);
+            }
+        }
+        get pagerText() {
+            return this.i.a9;
+        }
+        set pagerText(v) {
+            this.i.a9 = v;
+        }
+        /**
+         * Gets or sets the page size.
+        */
+        get pageSize() {
+            return this.i.ao;
+        }
+        set pageSize(v) {
+            this.i.ao = +v;
+            this._a("pageSize", this.i.ao);
+        }
+        /**
+         * Gets the page count.
+        */
+        get pageCount() {
+            return this.i.an;
+        }
+        set pageCount(v) {
+            this.i.an = +v;
+            this._a("pageCount", this.i.an);
+        }
+        /**
+         * Gets or sets the current page for the pager.
+        */
+        get currentPage() {
+            return this.i.ak;
+        }
+        set currentPage(v) {
+            this.i.ak = +v;
+            this._a("currentPage", this.i.ak);
+        }
+        /**
+         * Gets or sets the font to use for content cells
+        */
+        get textStyle() {
+            if (this.i.s == null) {
+                return null;
+            }
+            return this.i.s.fontString;
+        }
+        set textStyle(v) {
+            let fi = new FontInfo();
+            fi.fontString = v;
+            this.i.s = fi;
+            this._a("textStyle", this.i.s != null ? this.i.s.fontString : "");
+        }
+        /**
+         * Gets or sets the background color to use.
+        */
+        get background() {
+            return brushToString(this.i.ca);
+        }
+        set background(v) {
+            this.i.ca = stringToBrush(v);
+            this._a("background", brushToString(this.i.ca));
+        }
+        /**
+         * Gets or sets the border color around the grid.
+        */
+        get border() {
+            return brushToString(this.i.border);
+        }
+        set border(v) {
+            this.i.border = stringToBrush(v);
+            this._a("border", brushToString(this.i.border));
+        }
+        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("DataGridPagerComponent");
+            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;
+        }
+        nextPage() {
+            this.i.bn();
+        }
+        previousPage() {
+            this.i.by();
+        }
+        firstPage() {
+            this.i.bk();
+        }
+        lastPage() {
+            this.i.bm();
+        }
+        provideContainer(container) {
+            this.i.provideContainer(container);
+        }
+        /**
+         * Exports visual information about the current state of the grid.
+        
+        */
+        exportVisualModel() {
+            let iv = this.i.as();
+            return (iv);
+        }
+        /**
+         * Returns a serialized copy of the exported visual model
+        
+        */
+        exportSerializedVisualModel() {
+            let iv = this.i.az();
+            return (iv);
+        }
+        /**
+         * Event called when the page has changed.
+        */
+        get pageChanged() {
+            return this._pageChanged;
+        }
+        set pageChanged(ev) {
+            if (this._pageChanged_wrapped !== null) {
+                this.i.pageChanged = delegateRemove(this.i.pageChanged, this._pageChanged_wrapped);
+                this._pageChanged_wrapped = null;
+                this._pageChanged = null;
+            }
+            this._pageChanged = ev;
+            this._pageChanged_wrapped = (o, e) => {
+                let outerArgs = new IgcPageChangedEventArgs();
+                outerArgs._provideImplementation(e);
+                if (this.beforePageChanged) {
+                    this.beforePageChanged(this, outerArgs);
+                }
+                if (this._pageChanged) {
+                    this._pageChanged(this, outerArgs);
+                }
+            };
+            this.i.pageChanged = delegateCombine(this.i.pageChanged, this._pageChanged_wrapped);
+        }
+    }
+    IgcDataGridPagerComponent._observedAttributesIgcDataGridPagerComponent = null;
+    IgcDataGridPagerComponent.htmlTagName = "igc-data-grid-pager";
+    IgcDataGridPagerComponent._isElementRegistered = false;
+    return IgcDataGridPagerComponent;
+})();

package/esm2015/lib/{igc-property-editor-property-description-module.js → igc-data-grid-pager-module.js}

@@ -4,13 +4,13 @@ https://www.infragistics.com/legal/license/igultimate-la
 https://www.infragistics.com/legal/license/igultimate-eula
 GOVERNS THE LICENSING, INSTALLATION AND USE OF INFRAGISTICS SOFTWARE. BY DOWNLOADING AND/OR INSTALLING AND USING INFRAGISTICS SOFTWARE: you are indicating that you have read and understand this Agreement, and agree to be legally bound by it on behalf of the yourself and your company.
 */
-import { IgcPropertyEditorPropertyDescriptionComponent } from './igc-property-editor-property-description-component';
-import { PropertyEditorPropertyDescription } from './PropertyEditorPropertyDescription';
+import { IgcXButtonModule } from "igniteui-webcomponents-inputs";
+import { IgcDataGridPagerComponent } from './igc-data-grid-pager-component';
 import { TypeRegistrar } from "igniteui-webcomponents-core";
-export class IgcPropertyEditorPropertyDescriptionModule {
+export class IgcDataGridPagerModule {
     static register() {
-        IgcPropertyEditorPropertyDescriptionComponent.register();
-        TypeRegistrar.registerCons("IgcPropertyEditorPropertyDescriptionComponent", IgcPropertyEditorPropertyDescriptionComponent);
-        TypeRegistrar.register("PropertyEditorPropertyDescription", PropertyEditorPropertyDescription.$type);
+        IgcXButtonModule.register();
+        IgcDataGridPagerComponent.register();
+        TypeRegistrar.registerCons('IgcDataGridPagerComponent', IgcDataGridPagerComponent);
     }
 }

package/esm2015/lib/igc-data-grid-toolbar-component.js

@@ -7,6 +7,7 @@ import { DataGridToolbar } from './DataGridToolbar';
 import { ControlDisplayDensity_$type } from "igniteui-webcomponents-core";
 import { BaseControlTheme_$type } from "igniteui-webcomponents-core";
 import { IgcHTMLElement } from "igniteui-webcomponents-core";
+import { Thickness } from "igniteui-webcomponents-core";
 export let IgcDataGridToolbarComponent = /*@__PURE__*/ (() => {
     class IgcDataGridToolbarComponent extends IgcHTMLElement {
         constructor() {
@@ -199,131 +200,173 @@ export let IgcDataGridToolbarComponent = /*@__PURE__*/ (() => {
          * Gets or Sets the property name that contains the values.
         */
         get toolbarTitle() {
-            return this.i.ap;
+            return this.i.ar;
         }
         set toolbarTitle(v) {
-            this.i.ap = v;
+            this.i.ar = v;
         }
         /**
          * Gets or Sets the property name that contains the values.
         */
         get toolbarTitleStyle() {
-            if (this.i.m == null) {
+            if (this.i.n == null) {
                 return null;
             }
-            return this.i.m.fontString;
+            return this.i.n.fontString;
         }
         set toolbarTitleStyle(v) {
             let fi = new FontInfo();
             fi.fontString = v;
-            this.i.m = fi;
-            this._a("toolbarTitleStyle", this.i.m != null ? this.i.m.fontString : "");
+            this.i.n = fi;
+            this._a("toolbarTitleStyle", this.i.n != null ? this.i.n.fontString : "");
         }
         /**
          * Gets or Sets the property name that contains the values.
         */
         get toolbarTitleColor() {
-            return brushToString(this.i.bd);
+            return brushToString(this.i.bg);
         }
         set toolbarTitleColor(v) {
-            this.i.bd = stringToBrush(v);
-            this._a("toolbarTitleColor", brushToString(this.i.bd));
+            this.i.bg = stringToBrush(v);
+            this._a("toolbarTitleColor", brushToString(this.i.bg));
         }
         /**
          * Gets or Sets the property name that contains the values.
         */
         get backgroundColor() {
-            return brushToString(this.i.bb);
+            return brushToString(this.i.be);
         }
         set backgroundColor(v) {
-            this.i.bb = stringToBrush(v);
-            this._a("backgroundColor", brushToString(this.i.bb));
+            this.i.be = stringToBrush(v);
+            this._a("backgroundColor", brushToString(this.i.be));
         }
         /**
          * Gets or Sets the property name that contains the values.
         */
         get dialogBackgroundColor() {
-            return brushToString(this.i.bc);
+            return brushToString(this.i.bf);
         }
         set dialogBackgroundColor(v) {
-            this.i.bc = stringToBrush(v);
-            this._a("dialogBackgroundColor", brushToString(this.i.bc));
+            this.i.bf = stringToBrush(v);
+            this._a("dialogBackgroundColor", brushToString(this.i.bf));
         }
         /**
          * Gets or Sets the property name that contains the values.
         */
         get columnChooser() {
-            return this.i.p;
+            return this.i.q;
         }
         set columnChooser(v) {
-            this.i.p = ensureBool(v);
-            this._a("columnChooser", this.i.p);
+            this.i.q = ensureBool(v);
+            this._a("columnChooser", this.i.q);
         }
         /**
          * Gets or Sets the property name that contains the values.
         */
         get columnChooserText() {
-            return this.i.ab;
+            return this.i.ad;
         }
         set columnChooserText(v) {
-            this.i.ab = v;
+            this.i.ad = v;
         }
         /**
          * Gets or Sets the property name that contains the values.
         */
         get columnChooserTitle() {
-            return this.i.ad;
+            return this.i.af;
         }
         set columnChooserTitle(v) {
-            this.i.ad = v;
+            this.i.af = v;
         }
         /**
          * Gets or Sets the property name that contains the values.
         */
         get columnPinning() {
-            return this.i.q;
+            return this.i.r;
         }
         set columnPinning(v) {
-            this.i.q = ensureBool(v);
-            this._a("columnPinning", this.i.q);
+            this.i.r = ensureBool(v);
+            this._a("columnPinning", this.i.r);
         }
         /**
          * Gets or Sets the property name that contains the values.
         */
         get columnPinningText() {
-            return this.i.ag;
+            return this.i.ai;
         }
         set columnPinningText(v) {
-            this.i.ag = v;
+            this.i.ai = v;
         }
         /**
          * Gets or Sets the property name that contains the values.
         */
         get columnPinningTitle() {
-            return this.i.ai;
+            return this.i.ak;
         }
         set columnPinningTitle(v) {
-            this.i.ai = v;
+            this.i.ak = v;
+        }
+        get borderWidthBottom() {
+            return this.i.bi ? this.i.bi.bottom : NaN;
+        }
+        set borderWidthBottom(v) {
+            this.ensureBorderWidth();
+            this.i.bi.bottom = +v;
+            this._a("borderWidthBottom", this.i.bi.bottom);
+            this.i.bi = this.i.bi;
+        }
+        get borderWidthLeft() {
+            return this.i.bi ? this.i.bi.left : NaN;
+        }
+        set borderWidthLeft(v) {
+            this.ensureBorderWidth();
+            this.i.bi.left = +v;
+            this._a("borderWidthLeft", this.i.bi.left);
+            this.i.bi = this.i.bi;
+        }
+        get borderWidthRight() {
+            return this.i.bi ? this.i.bi.right : NaN;
+        }
+        set borderWidthRight(v) {
+            this.ensureBorderWidth();
+            this.i.bi.right = +v;
+            this._a("borderWidthRight", this.i.bi.right);
+            this.i.bi = this.i.bi;
+        }
+        get borderWidthTop() {
+            return this.i.bi ? this.i.bi.top : NaN;
+        }
+        set borderWidthTop(v) {
+            this.ensureBorderWidth();
+            this.i.bi.top = +v;
+            this._a("borderWidthTop", this.i.bi.top);
+            this.i.bi = this.i.bi;
+        }
+        ensureBorderWidth() {
+            if (this.i.bi) {
+                return;
+            }
+            this.i.bi = new Thickness(2);
         }
         /**
          * Gets or Sets the property name that contains the values.
         */
         get density() {
-            return this.i.k;
+            return this.i.l;
         }
         set density(v) {
-            this.i.k = ensureEnum(ControlDisplayDensity_$type, v);
-            this._a("density", enumToString(ControlDisplayDensity_$type, this.i.k));
+            this.i.l = ensureEnum(ControlDisplayDensity_$type, v);
+            this._a("density", enumToString(ControlDisplayDensity_$type, this.i.l));
         }
         /**
          * Gets or Sets the property name that contains the values.
         */
         get baseTheme() {
-            return this.i.i;
+            return this.i.j;
         }
         set baseTheme(v) {
-            this.i.i = ensureEnum(BaseControlTheme_$type, v);
-            this._a("baseTheme", enumToString(BaseControlTheme_$type, this.i.i));
+            this.i.j = ensureEnum(BaseControlTheme_$type, v);
+            this._a("baseTheme", enumToString(BaseControlTheme_$type, this.i.j));
         }
         findByName(name) {
             if (this.targetGrid && this.targetGrid.name && this.targetGrid.name == name) {
@@ -387,6 +430,22 @@ export let IgcDataGridToolbarComponent = /*@__PURE__*/ (() => {
             }
             this._inStyling = false;
         }
+        /**
+     * Exports visual information about the current state of the toolbar.
+    
+    */
+        exportVisualModel() {
+            let iv = this.i.exportVisualModel();
+            return (iv);
+        }
+        /**
+         * Returns a serialized copy of the exported visual model
+        
+        */
+        exportSerializedVisualModel() {
+            let iv = this.i.exportSerializedVisualModel();
+            return (iv);
+        }
     }
     IgcDataGridToolbarComponent._observedAttributesIgcDataGridToolbarComponent = null;
     IgcDataGridToolbarComponent.htmlTagName = "igc-data-grid-toolbar";