igniteui-angular-data-grids 19.1.0-beta.0

package/esm2015/lib/igx-grid-column-options-component.js

@@ -0,0 +1,705 @@
+import { Output, EventEmitter, Component, ViewChild, ElementRef, Input, ChangeDetectionStrategy } from '@angular/core';
+import { ensureEnum, brushToString, stringToBrush, ensureBool, NamePatcher } from "igniteui-angular-core";
+import { FontInfo } from "igniteui-angular-core";
+import { AngularRenderer } from "igniteui-angular-core";
+import { delegateCombine } from "igniteui-angular-core";
+import { DataGridStylingDefaults } from './DataGridStylingDefaults';
+import { GridColumnOptions } from './GridColumnOptions';
+import { IgxGridColumnOptionsBaseComponent } from "./igx-grid-column-options-base-component";
+import { IgxApplyButtonClickEventArgs } from './igx-apply-button-click-event-args';
+import { IgxCancelButtonClickEventArgs } from './igx-cancel-button-click-event-args';
+import { ControlDisplayDensity_$type } from "igniteui-angular-core";
+import * as i0 from "@angular/core";
+import * as i1 from "./igx-grid-column-group-options-component";
+import * as i2 from "./igx-grid-column-hide-options-component";
+import * as i3 from "./igx-grid-column-sort-options-component";
+import * as i4 from "./igx-grid-column-move-options-component";
+import * as i5 from "./igx-grid-column-pin-options-component";
+import * as i6 from "./igx-grid-column-summary-options-component";
+import * as i7 from "./igx-grid-column-filter-options-component";
+import * as i8 from "./igx-grid-column-button-options-component";
+export let IgxGridColumnOptionsComponent = /*@__PURE__*/ (() => {
+    class IgxGridColumnOptionsComponent extends IgxGridColumnOptionsBaseComponent {
+        constructor(renderer, _elRef, ngZone, injector, componentFactoryResolver) {
+            super();
+            this.renderer = renderer;
+            this._elRef = _elRef;
+            this.ngZone = ngZone;
+            this.injector = injector;
+            this.componentFactoryResolver = componentFactoryResolver;
+            this._angularRenderer = null;
+            this._applyButtonClick = null;
+            this._cancelButtonClick = null;
+            if (this._styling) {
+                NamePatcher.ensureStylablePatched(Object.getPrototypeOf(this));
+            }
+        }
+        set height(value) {
+            this._height = value;
+            this.renderer.setStyle(this._elRef.element.nativeElement, "height", value);
+            this.i.notifySizeChanged();
+        }
+        get height() {
+            return this._height;
+        }
+        set width(value) {
+            this._width = value;
+            this.renderer.setStyle(this._elRef.element.nativeElement, "width", value);
+            this.i.notifySizeChanged();
+        }
+        get width() {
+            return this._width;
+        }
+        // supports angular themes or custom properties set in CSS
+        updateStyle() {
+            this._styling(this._mainDiv, this);
+        }
+        ngOnDestroy() {
+            this.i.destroy();
+            this._angularRenderer.destroy();
+        }
+        ngAfterContentInit() {
+            this._mainDiv = this._mainDivRef.nativeElement;
+            var renderer = this.renderer;
+            if (renderer) {
+                renderer.appendChild(this._elRef.element.nativeElement, this._mainDiv);
+                renderer.setStyle(this._mainDiv, "display", "block");
+                renderer.setStyle(this._mainDiv, "width", "100%");
+                renderer.setStyle(this._mainDiv, "height", "100%");
+            }
+            var columnOptions = this.i;
+            if (renderer) {
+                var ren = new AngularRenderer(this._mainDiv, renderer, window.document, this.ngZone, true, DataGridStylingDefaults);
+                this._angularRenderer = ren;
+                columnOptions.provideRenderer(ren);
+                columnOptions.notifySizeChanged();
+                ren.addSizeWatcher(() => {
+                    columnOptions.notifySizeChanged();
+                });
+            }
+            var headerSectionWrapper = this._angularRenderer.getWrapper(this._headerSectionRef.nativeElement);
+            var sortSectionWrapper = this._angularRenderer.getWrapper(this._sortSectionRef.nativeElement);
+            var moveSectionWrapper = this._angularRenderer.getWrapper(this._moveSectionRef.nativeElement);
+            var pinSectionWrapper = this._angularRenderer.getWrapper(this._pinSectionRef.nativeElement);
+            var filterSectionWrapper = this._angularRenderer.getWrapper(this._filterSectionRef.nativeElement);
+            var summarySectionWrapper = this._angularRenderer.getWrapper(this._summarySectionRef.nativeElement);
+            var buttonSectionWrapper = this._angularRenderer.getWrapper(this._buttonSectionRef.nativeElement);
+            var headerColumnNameSectionWrapper = this._angularRenderer.getWrapper(this._headerColumnNameSectionRef.nativeElement);
+            var headerButtonsSectionWrapper = this._angularRenderer.getWrapper(this._headerButtonsSectionRef.nativeElement);
+            var hideSectionWrapper = this._angularRenderer.getWrapper(this._hideSectionRef.nativeElement);
+            var groupSectionWrapper = this._angularRenderer.getWrapper(this._groupSectionRef.nativeElement);
+            this.i.provideContent(headerSectionWrapper, sortSectionWrapper, moveSectionWrapper, pinSectionWrapper, filterSectionWrapper, summarySectionWrapper, buttonSectionWrapper, headerColumnNameSectionWrapper, headerButtonsSectionWrapper, hideSectionWrapper, groupSectionWrapper, this._sortOptionsRef.i, this._moveOptionsRef.i, this._pinOptionsRef.i, this._hideOptionsRef.i, this._groupOptionsRef.i, this._filterOptionsRef.i, this._summaryOptionsRef.i, this._buttonOptionsRef.i);
+            this.i.notifySizeChanged();
+            this.updateStyle();
+        }
+        createImplementation() {
+            return new GridColumnOptions();
+        }
+        get i() {
+            return this._implementation;
+        }
+        get headerOptionsVisibleResolved() {
+            return this.i.cp;
+        }
+        get sortOptionsVisibleResolved() {
+            return this.i.c3;
+        }
+        get moveOptionsVisibleResolved() {
+            return this.i.cx;
+        }
+        get pinOptionsVisibleResolved() {
+            return this.i.c0;
+        }
+        get hideOptionsVisibleResolved() {
+            return this.i.cu;
+        }
+        get groupOptionsVisibleResolved() {
+            return this.i.co;
+        }
+        get filterOptionsVisibleResolved() {
+            return this.i.cl;
+        }
+        get summaryOptionsVisibleResolved() {
+            return this.i.c6;
+        }
+        /**
+         * Gets or sets the font to use for columnNames.
+        */
+        get columnNameTextStyle() {
+            if (this.i.cg == null) {
+                return null;
+            }
+            return this.i.cg.fontString;
+        }
+        set columnNameTextStyle(v) {
+            let fi = new FontInfo();
+            fi.fontString = v;
+            this.i.cg = fi;
+        }
+        /**
+         * Gets or sets the amount of left padding to use for the left edge of the component.
+        */
+        get paddingLeft() {
+            return this.i.dh;
+        }
+        set paddingLeft(v) {
+            this.i.dh = +v;
+        }
+        /**
+         * Gets or sets the amount of left padding to use for the top edge of the component.
+        */
+        get paddingTop() {
+            return this.i.dj;
+        }
+        set paddingTop(v) {
+            this.i.dj = +v;
+        }
+        /**
+         * Gets or sets the amount of left padding to use for the right edge of the component.
+        */
+        get paddingRight() {
+            return this.i.di;
+        }
+        set paddingRight(v) {
+            this.i.di = +v;
+        }
+        /**
+         * Gets or sets the amount of left padding to use for the bottom edge of the component.
+        */
+        get paddingBottom() {
+            return this.i.dg;
+        }
+        set paddingBottom(v) {
+            this.i.dg = +v;
+        }
+        get headerVisible() {
+            return this.i.cr;
+        }
+        set headerVisible(v) {
+            this.i.cr = ensureBool(v);
+        }
+        get sortOptionsVisible() {
+            return this.i.c2;
+        }
+        set sortOptionsVisible(v) {
+            this.i.c2 = ensureBool(v);
+        }
+        get moveOptionsVisible() {
+            return this.i.cw;
+        }
+        set moveOptionsVisible(v) {
+            this.i.cw = ensureBool(v);
+        }
+        get pinOptionsVisible() {
+            return this.i.cz;
+        }
+        set pinOptionsVisible(v) {
+            this.i.cz = ensureBool(v);
+        }
+        get hideOptionsVisible() {
+            return this.i.ct;
+        }
+        set hideOptionsVisible(v) {
+            this.i.ct = ensureBool(v);
+        }
+        get groupOptionsVisible() {
+            return this.i.cn;
+        }
+        set groupOptionsVisible(v) {
+            this.i.cn = ensureBool(v);
+        }
+        get filterOptionsVisible() {
+            return this.i.ck;
+        }
+        set filterOptionsVisible(v) {
+            this.i.ck = ensureBool(v);
+        }
+        get summaryOptionsVisible() {
+            return this.i.c5;
+        }
+        set summaryOptionsVisible(v) {
+            this.i.c5 = ensureBool(v);
+        }
+        get sortHeaderCaption() {
+            return this.i.e4;
+        }
+        set sortHeaderCaption(v) {
+            this.i.e4 = v;
+        }
+        get sortAscendingCaption() {
+            return this.i.ey;
+        }
+        set sortAscendingCaption(v) {
+            this.i.ey = v;
+        }
+        get sortDescendingCaption() {
+            return this.i.e1;
+        }
+        set sortDescendingCaption(v) {
+            this.i.e1 = v;
+        }
+        get moveHeaderCaption() {
+            return this.i.ea;
+        }
+        set moveHeaderCaption(v) {
+            this.i.ea = v;
+        }
+        get moveLeftCaption() {
+            return this.i.ed;
+        }
+        set moveLeftCaption(v) {
+            this.i.ed = v;
+        }
+        get moveRightCaption() {
+            return this.i.eh;
+        }
+        set moveRightCaption(v) {
+            this.i.eh = v;
+        }
+        get pinHeaderCaption() {
+            return this.i.eo;
+        }
+        set pinHeaderCaption(v) {
+            this.i.eo = v;
+        }
+        get pinLeftCaption() {
+            return this.i.er;
+        }
+        set pinLeftCaption(v) {
+            this.i.er = v;
+        }
+        get pinRightCaption() {
+            return this.i.ev;
+        }
+        set pinRightCaption(v) {
+            this.i.ev = v;
+        }
+        get applyFiltersButtonCaption() {
+            return this.i.dp;
+        }
+        set applyFiltersButtonCaption(v) {
+            this.i.dp = v;
+        }
+        get cancelFiltersButtonCaption() {
+            return this.i.ds;
+        }
+        set cancelFiltersButtonCaption(v) {
+            this.i.ds = v;
+        }
+        get clearColumnFiltersCaption() {
+            return this.i.dv;
+        }
+        set clearColumnFiltersCaption(v) {
+            this.i.dv = v;
+        }
+        /**
+         * Gets or sets the display density to use for the summary list menu.
+        */
+        get summaryListDensity() {
+            return this.i.summaryListDensity;
+        }
+        set summaryListDensity(v) {
+            this.i.summaryListDensity = ensureEnum(ControlDisplayDensity_$type, v);
+        }
+        /**
+         * Gets the actual display density used for the summary list menu.
+        */
+        get actualSummaryListDensity() {
+            return this.i.b8;
+        }
+        set actualSummaryListDensity(v) {
+            this.i.b8 = ensureEnum(ControlDisplayDensity_$type, v);
+        }
+        /**
+         * Gets or sets the display Density to use for the buttons in the component.
+        */
+        get filterListDensity() {
+            return this.i.filterListDensity;
+        }
+        set filterListDensity(v) {
+            this.i.filterListDensity = ensureEnum(ControlDisplayDensity_$type, v);
+        }
+        /**
+         * Gets the actual display filterListDensity to use for the component.
+        */
+        get actualFilterListDensity() {
+            return this.i.b7;
+        }
+        set actualFilterListDensity(v) {
+            this.i.b7 = ensureEnum(ControlDisplayDensity_$type, v);
+        }
+        get filterListPlaceholderText() {
+            return this.i.d1;
+        }
+        set filterListPlaceholderText(v) {
+            this.i.d1 = v;
+        }
+        /**
+         * Gets or sets the text color for the summary options menu.
+        */
+        get summaryListTextColor() {
+            return brushToString(this.i.fm);
+        }
+        set summaryListTextColor(v) {
+            this.i.fm = stringToBrush(v);
+        }
+        /**
+         * Gets or sets the background color for the summary options menu.
+        */
+        get summaryListBackground() {
+            return brushToString(this.i.fl);
+        }
+        set summaryListBackground(v) {
+            this.i.fl = stringToBrush(v);
+        }
+        get applyButtonClick() {
+            if (this._applyButtonClick == null) {
+                this._applyButtonClick = new EventEmitter();
+                this.i.applyButtonClick = delegateCombine(this.i.applyButtonClick, (o, e) => {
+                    this._runInZone(() => {
+                        let outerArgs = new IgxApplyButtonClickEventArgs();
+                        outerArgs._provideImplementation(e);
+                        if (this.beforeApplyButtonClick) {
+                            this.beforeApplyButtonClick(this, outerArgs);
+                        }
+                        this._applyButtonClick.emit({
+                            sender: this,
+                            args: outerArgs
+                        });
+                    });
+                });
+            }
+            return this._applyButtonClick;
+        }
+        get cancelButtonClick() {
+            if (this._cancelButtonClick == null) {
+                this._cancelButtonClick = new EventEmitter();
+                this.i.cancelButtonClick = delegateCombine(this.i.cancelButtonClick, (o, e) => {
+                    this._runInZone(() => {
+                        let outerArgs = new IgxCancelButtonClickEventArgs();
+                        outerArgs._provideImplementation(e);
+                        if (this.beforeCancelButtonClick) {
+                            this.beforeCancelButtonClick(this, outerArgs);
+                        }
+                        this._cancelButtonClick.emit({
+                            sender: this,
+                            args: outerArgs
+                        });
+                    });
+                });
+            }
+            return this._cancelButtonClick;
+        }
+    }
+    IgxGridColumnOptionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxGridColumnOptionsComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ViewContainerRef }, { token: i0.NgZone }, { token: i0.Injector }, { token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Component });
+    IgxGridColumnOptionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: IgxGridColumnOptionsComponent, selector: "igx-grid-column-options", inputs: { height: "height", width: "width", columnNameTextStyle: "columnNameTextStyle", paddingLeft: "paddingLeft", paddingTop: "paddingTop", paddingRight: "paddingRight", paddingBottom: "paddingBottom", headerVisible: "headerVisible", sortOptionsVisible: "sortOptionsVisible", moveOptionsVisible: "moveOptionsVisible", pinOptionsVisible: "pinOptionsVisible", hideOptionsVisible: "hideOptionsVisible", groupOptionsVisible: "groupOptionsVisible", filterOptionsVisible: "filterOptionsVisible", summaryOptionsVisible: "summaryOptionsVisible", sortHeaderCaption: "sortHeaderCaption", sortAscendingCaption: "sortAscendingCaption", sortDescendingCaption: "sortDescendingCaption", moveHeaderCaption: "moveHeaderCaption", moveLeftCaption: "moveLeftCaption", moveRightCaption: "moveRightCaption", pinHeaderCaption: "pinHeaderCaption", pinLeftCaption: "pinLeftCaption", pinRightCaption: "pinRightCaption", applyFiltersButtonCaption: "applyFiltersButtonCaption", cancelFiltersButtonCaption: "cancelFiltersButtonCaption", clearColumnFiltersCaption: "clearColumnFiltersCaption", summaryListDensity: "summaryListDensity", actualSummaryListDensity: "actualSummaryListDensity", filterListDensity: "filterListDensity", actualFilterListDensity: "actualFilterListDensity", filterListPlaceholderText: "filterListPlaceholderText", summaryListTextColor: "summaryListTextColor", summaryListBackground: "summaryListBackground" }, outputs: { applyButtonClick: "applyButtonClick", cancelButtonClick: "cancelButtonClick" }, providers: [], viewQueries: [{ propertyName: "_mainDivRef", first: true, predicate: ["_mainDivRef"], descendants: true, read: ElementRef, static: true }, { propertyName: "_headerSectionRef", first: true, predicate: ["_headerSectionRef"], descendants: true, read: ElementRef, static: true }, { propertyName: "_sortSectionRef", first: true, predicate: ["_sortSectionRef"], descendants: true, read: ElementRef, static: true }, { propertyName: "_moveSectionRef", first: true, predicate: ["_moveSectionRef"], descendants: true, read: ElementRef, static: true }, { propertyName: "_pinSectionRef", first: true, predicate: ["_pinSectionRef"], descendants: true, read: ElementRef, static: true }, { propertyName: "_filterSectionRef", first: true, predicate: ["_filterSectionRef"], descendants: true, read: ElementRef, static: true }, { propertyName: "_summarySectionRef", first: true, predicate: ["_summarySectionRef"], descendants: true, read: ElementRef, static: true }, { propertyName: "_buttonSectionRef", first: true, predicate: ["_buttonSectionRef"], descendants: true, read: ElementRef, static: true }, { propertyName: "_headerColumnNameSectionRef", first: true, predicate: ["_headerColumnNameSectionRef"], descendants: true, read: ElementRef, static: true }, { propertyName: "_headerButtonsSectionRef", first: true, predicate: ["_headerButtonsSectionRef"], descendants: true, read: ElementRef, static: true }, { propertyName: "_hideSectionRef", first: true, predicate: ["_hideSectionRef"], descendants: true, read: ElementRef, static: true }, { propertyName: "_groupSectionRef", first: true, predicate: ["_groupSectionRef"], descendants: true, read: ElementRef, static: true }, { propertyName: "_sortOptionsRef", first: true, predicate: ["_sortOptionsRef"], descendants: true, static: true }, { propertyName: "_moveOptionsRef", first: true, predicate: ["_moveOptionsRef"], descendants: true, static: true }, { propertyName: "_pinOptionsRef", first: true, predicate: ["_pinOptionsRef"], descendants: true, static: true }, { propertyName: "_hideOptionsRef", first: true, predicate: ["_hideOptionsRef"], descendants: true, static: true }, { propertyName: "_groupOptionsRef", first: true, predicate: ["_groupOptionsRef"], descendants: true, static: true }, { propertyName: "_filterOptionsRef", first: true, predicate: ["_filterOptionsRef"], descendants: true, static: true }, { propertyName: "_summaryOptionsRef", first: true, predicate: ["_summaryOptionsRef"], descendants: true, static: true }, { propertyName: "_buttonOptionsRef", first: true, predicate: ["_buttonOptionsRef"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `<div #_mainDivRef
+                    class="ig-grid-column-options igx-grid-column-options"
+               >
+                    <div
+                        #_headerSectionRef
+                        key="headerSection"
+                    >
+                        <div
+                            #_headerColumnNameSectionRef
+                            key="headerColumnNameSection"
+                        ></div>
+                        <div
+                            #_headerButtonsSectionRef
+                            key="headerbuttonsSection"
+                        >
+                        <div
+                            #_groupSectionRef
+                            key="groupSection">
+                            <igx-grid-column-group-options
+                                #_groupOptionsRef                    
+                                key="groupOptions"
+                            ></igx-grid-column-group-options>
+                        </div>
+                        <div
+                            #_hideSectionRef
+                            key="hideSection">
+                            <igx-grid-column-hide-options
+                                #_hideOptionsRef                    
+                                key="hideOptions"
+                            ></igx-grid-column-hide-options>
+                        </div>
+                        </div>                        
+                    </div>
+                    <div
+                        #_sortSectionRef
+                        key="sortSection">
+                        <igx-grid-column-sort-options
+                            #_sortOptionsRef                    
+                            key="sortOptions"
+                        ></igx-grid-column-sort-options>                        
+                    </div>
+                    <div
+                        #_moveSectionRef
+                        key="moveSection">
+                            <igx-grid-column-move-options
+                                #_moveOptionsRef                    
+                                key="moveOptions"
+                            ></igx-grid-column-move-options>
+                    </div>
+                    <div
+                        #_pinSectionRef
+                        key="pinSection">
+                        <igx-grid-column-pin-options
+                            #_pinOptionsRef                    
+                            key="pinOptions"
+                        ></igx-grid-column-pin-options>
+                    </div>
+                    <div
+                        #_summarySectionRef
+                        key="summarySection">
+                        <igx-grid-column-summary-options
+                            #_summaryOptionsRef                    
+                            key="summaryOptions"
+                        ></igx-grid-column-summary-options>                        
+                    </div>
+                    <div
+                        #_filterSectionRef
+                        key="filterSection">
+                        <igx-grid-column-filter-options
+                            #_filterOptionsRef                    
+                            key="filterOptions"
+                        ></igx-grid-column-filter-options>                        
+                    </div>
+                    <div
+                        #_buttonSectionRef
+                        key="buttonSection">
+                        <igx-grid-column-button-options
+                            #_buttonOptionsRef
+                            key="buttonOptions"
+                        ></igx-grid-column-button-options>
+                    </div>
+                </div>`, isInline: true, styles: ["\n\t\t:host {\n\t\t\tdisplay: block;\n\t\t}\n\t"], components: [{ type: i1.IgxGridColumnGroupOptionsComponent, selector: "igx-grid-column-group-options" }, { type: i2.IgxGridColumnHideOptionsComponent, selector: "igx-grid-column-hide-options" }, { type: i3.IgxGridColumnSortOptionsComponent, selector: "igx-grid-column-sort-options", inputs: ["ascendingCaption", "descendingCaption", "sortDirection"] }, { type: i4.IgxGridColumnMoveOptionsComponent, selector: "igx-grid-column-move-options", inputs: ["moveLeftCaption", "moveRightCaption"] }, { type: i5.IgxGridColumnPinOptionsComponent, selector: "igx-grid-column-pin-options", inputs: ["pinLeftCaption", "pinRightCaption"] }, { type: i6.IgxGridColumnSummaryOptionsComponent, selector: "igx-grid-column-summary-options", inputs: ["summaryCaption", "summaryListDensity", "actualSummaryListDensity", "activeCount", "summaryListTextColor", "summaryListBackground"] }, { type: i7.IgxGridColumnFilterOptionsComponent, selector: "igx-grid-column-filter-options", inputs: ["clearColumnFiltersCaption", "filterListPlaceholderText", "filterListDensity", "actualFilterListDensity", "textFilterCaption"] }, { type: i8.IgxGridColumnButtonOptionsComponent, selector: "igx-grid-column-button-options", inputs: ["applyButtonCaption", "cancelButtonCaption"], outputs: ["applyButtonClick", "cancelButtonClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    return IgxGridColumnOptionsComponent;
+})();
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxGridColumnOptionsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'igx-grid-column-options',
+                    template: `<div #_mainDivRef
+                    class="ig-grid-column-options igx-grid-column-options"
+               >
+                    <div
+                        #_headerSectionRef
+                        key="headerSection"
+                    >
+                        <div
+                            #_headerColumnNameSectionRef
+                            key="headerColumnNameSection"
+                        ></div>
+                        <div
+                            #_headerButtonsSectionRef
+                            key="headerbuttonsSection"
+                        >
+                        <div
+                            #_groupSectionRef
+                            key="groupSection">
+                            <igx-grid-column-group-options
+                                #_groupOptionsRef                    
+                                key="groupOptions"
+                            ></igx-grid-column-group-options>
+                        </div>
+                        <div
+                            #_hideSectionRef
+                            key="hideSection">
+                            <igx-grid-column-hide-options
+                                #_hideOptionsRef                    
+                                key="hideOptions"
+                            ></igx-grid-column-hide-options>
+                        </div>
+                        </div>                        
+                    </div>
+                    <div
+                        #_sortSectionRef
+                        key="sortSection">
+                        <igx-grid-column-sort-options
+                            #_sortOptionsRef                    
+                            key="sortOptions"
+                        ></igx-grid-column-sort-options>                        
+                    </div>
+                    <div
+                        #_moveSectionRef
+                        key="moveSection">
+                            <igx-grid-column-move-options
+                                #_moveOptionsRef                    
+                                key="moveOptions"
+                            ></igx-grid-column-move-options>
+                    </div>
+                    <div
+                        #_pinSectionRef
+                        key="pinSection">
+                        <igx-grid-column-pin-options
+                            #_pinOptionsRef                    
+                            key="pinOptions"
+                        ></igx-grid-column-pin-options>
+                    </div>
+                    <div
+                        #_summarySectionRef
+                        key="summarySection">
+                        <igx-grid-column-summary-options
+                            #_summaryOptionsRef                    
+                            key="summaryOptions"
+                        ></igx-grid-column-summary-options>                        
+                    </div>
+                    <div
+                        #_filterSectionRef
+                        key="filterSection">
+                        <igx-grid-column-filter-options
+                            #_filterOptionsRef                    
+                            key="filterOptions"
+                        ></igx-grid-column-filter-options>                        
+                    </div>
+                    <div
+                        #_buttonSectionRef
+                        key="buttonSection">
+                        <igx-grid-column-button-options
+                            #_buttonOptionsRef
+                            key="buttonOptions"
+                        ></igx-grid-column-button-options>
+                    </div>
+                </div>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [],
+                    styles: [`
+		:host {
+			display: block;
+		}
+	`]
+                }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ViewContainerRef }, { type: i0.NgZone }, { type: i0.Injector }, { type: i0.ComponentFactoryResolver }]; }, propDecorators: { _mainDivRef: [{
+                type: ViewChild,
+                args: ['_mainDivRef', { read: ElementRef, static: true }]
+            }], _headerSectionRef: [{
+                type: ViewChild,
+                args: ['_headerSectionRef', { read: ElementRef, static: true }]
+            }], _sortSectionRef: [{
+                type: ViewChild,
+                args: ['_sortSectionRef', { read: ElementRef, static: true }]
+            }], _moveSectionRef: [{
+                type: ViewChild,
+                args: ['_moveSectionRef', { read: ElementRef, static: true }]
+            }], _pinSectionRef: [{
+                type: ViewChild,
+                args: ['_pinSectionRef', { read: ElementRef, static: true }]
+            }], _filterSectionRef: [{
+                type: ViewChild,
+                args: ['_filterSectionRef', { read: ElementRef, static: true }]
+            }], _summarySectionRef: [{
+                type: ViewChild,
+                args: ['_summarySectionRef', { read: ElementRef, static: true }]
+            }], _buttonSectionRef: [{
+                type: ViewChild,
+                args: ['_buttonSectionRef', { read: ElementRef, static: true }]
+            }], _headerColumnNameSectionRef: [{
+                type: ViewChild,
+                args: ['_headerColumnNameSectionRef', { read: ElementRef, static: true }]
+            }], _headerButtonsSectionRef: [{
+                type: ViewChild,
+                args: ['_headerButtonsSectionRef', { read: ElementRef, static: true }]
+            }], _hideSectionRef: [{
+                type: ViewChild,
+                args: ['_hideSectionRef', { read: ElementRef, static: true }]
+            }], _groupSectionRef: [{
+                type: ViewChild,
+                args: ['_groupSectionRef', { read: ElementRef, static: true }]
+            }], _sortOptionsRef: [{
+                type: ViewChild,
+                args: ['_sortOptionsRef', { static: true }]
+            }], _moveOptionsRef: [{
+                type: ViewChild,
+                args: ['_moveOptionsRef', { static: true }]
+            }], _pinOptionsRef: [{
+                type: ViewChild,
+                args: ['_pinOptionsRef', { static: true }]
+            }], _hideOptionsRef: [{
+                type: ViewChild,
+                args: ['_hideOptionsRef', { static: true }]
+            }], _groupOptionsRef: [{
+                type: ViewChild,
+                args: ['_groupOptionsRef', { static: true }]
+            }], _filterOptionsRef: [{
+                type: ViewChild,
+                args: ['_filterOptionsRef', { static: true }]
+            }], _summaryOptionsRef: [{
+                type: ViewChild,
+                args: ['_summaryOptionsRef', { static: true }]
+            }], _buttonOptionsRef: [{
+                type: ViewChild,
+                args: ['_buttonOptionsRef', { static: true }]
+            }], height: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], columnNameTextStyle: [{
+                type: Input
+            }], paddingLeft: [{
+                type: Input
+            }], paddingTop: [{
+                type: Input
+            }], paddingRight: [{
+                type: Input
+            }], paddingBottom: [{
+                type: Input
+            }], headerVisible: [{
+                type: Input
+            }], sortOptionsVisible: [{
+                type: Input
+            }], moveOptionsVisible: [{
+                type: Input
+            }], pinOptionsVisible: [{
+                type: Input
+            }], hideOptionsVisible: [{
+                type: Input
+            }], groupOptionsVisible: [{
+                type: Input
+            }], filterOptionsVisible: [{
+                type: Input
+            }], summaryOptionsVisible: [{
+                type: Input
+            }], sortHeaderCaption: [{
+                type: Input
+            }], sortAscendingCaption: [{
+                type: Input
+            }], sortDescendingCaption: [{
+                type: Input
+            }], moveHeaderCaption: [{
+                type: Input
+            }], moveLeftCaption: [{
+                type: Input
+            }], moveRightCaption: [{
+                type: Input
+            }], pinHeaderCaption: [{
+                type: Input
+            }], pinLeftCaption: [{
+                type: Input
+            }], pinRightCaption: [{
+                type: Input
+            }], applyFiltersButtonCaption: [{
+                type: Input
+            }], cancelFiltersButtonCaption: [{
+                type: Input
+            }], clearColumnFiltersCaption: [{
+                type: Input
+            }], summaryListDensity: [{
+                type: Input
+            }], actualSummaryListDensity: [{
+                type: Input
+            }], filterListDensity: [{
+                type: Input
+            }], actualFilterListDensity: [{
+                type: Input
+            }], filterListPlaceholderText: [{
+                type: Input
+            }], summaryListTextColor: [{
+                type: Input
+            }], summaryListBackground: [{
+                type: Input
+            }], applyButtonClick: [{
+                type: Output
+            }], cancelButtonClick: [{
+                type: Output
+            }] } });