How to use the ag-grid-community.Component function in ag-grid-community

__decorate([
        ag_grid_community_1.Autowired("gridOptionsWrapper"),
        __metadata("design:type", ag_grid_community_1.GridOptionsWrapper)
    ], SideBarButtonComp.prototype, "gridOptionsWrapper", void 0);
    __decorate([
        ag_grid_community_1.RefSelector('eToggleButton'),
        __metadata("design:type", HTMLButtonElement)
    ], SideBarButtonComp.prototype, "eToggleButton", void 0);
    __decorate([
        ag_grid_community_1.PostConstruct,
        __metadata("design:type", Function),
        __metadata("design:paramtypes", []),
        __metadata("design:returntype", void 0)
    ], SideBarButtonComp.prototype, "postConstruct", null);
    return SideBarButtonComp;
}(ag_grid_community_1.Component));

ag_grid_community_1._.addOrRemoveCssClass(this.wrappers[wrapper], 'ag-selected', wrapper === type);
        }
    };
    MiniChartsContainer.TEMPLATE = '<div class="ag-chart-settings-mini-wrapper"></div>';
    __decorate([
        ag_grid_community_1.Autowired('chartTranslator'),
        __metadata("design:type", chartTranslator_1.ChartTranslator)
    ], MiniChartsContainer.prototype, "chartTranslator", void 0);
    __decorate([
        ag_grid_community_1.PostConstruct,
        __metadata("design:type", Function),
        __metadata("design:paramtypes", []),
        __metadata("design:returntype", void 0)
    ], MiniChartsContainer.prototype, "init", null);
    return MiniChartsContainer;
}(ag_grid_community_1.Component));
exports.MiniChartsContainer = MiniChartsContainer;
var MiniChart = /** @class */ (function (_super) {
    __extends(MiniChart, _super);
    function MiniChart() {
        var _this = _super !== null &amp;&amp; _super.apply(this, arguments) || this;
        _this.size = 58;
        _this.padding = 5;
        _this.root = new group_1.Group();
        _this.scene = (function () {
            var scene = new scene_1.Scene({
                width: _this.size,
                height: _this.size
            });
            scene.root = _this.root;
            return scene;
        })();

__decorate([
        ag_grid_community_1.RefSelector('seriesMarkerStrokeWidthSlider'),
        __metadata("design:type", ag_grid_community_1.AgSlider)
    ], MarkersPanel.prototype, "seriesMarkerStrokeWidthSlider", void 0);
    __decorate([
        ag_grid_community_1.Autowired('chartTranslator'),
        __metadata("design:type", chartTranslator_1.ChartTranslator)
    ], MarkersPanel.prototype, "chartTranslator", void 0);
    __decorate([
        ag_grid_community_1.PostConstruct,
        __metadata("design:type", Function),
        __metadata("design:paramtypes", []),
        __metadata("design:returntype", void 0)
    ], MarkersPanel.prototype, "init", null);
    return MarkersPanel;
}(ag_grid_community_1.Component));
exports.MarkersPanel = MarkersPanel;

});
        this.refreshSelected();
    };
    MiniChartsContainer.prototype.refreshSelected = function () {
        var type = this.chartController.getChartType();
        ag_grid_community_1._.radioCssClass(this.wrappers[type], 'ag-selected');
    };
    MiniChartsContainer.TEMPLATE = '<div class="ag-chart-settings-mini-wrapper"></div>';
    __decorate([
        ag_grid_community_1.PostConstruct,
        __metadata("design:type", Function),
        __metadata("design:paramtypes", []),
        __metadata("design:returntype", void 0)
    ], MiniChartsContainer.prototype, "init", null);
    return MiniChartsContainer;
}(ag_grid_community_1.Component));
exports.MiniChartsContainer = MiniChartsContainer;
var group_1 = require("../../../charts/scene/group");
var scene_1 = require("../../../charts/scene/scene");
var angle_1 = require("../../../charts/util/angle");
var sector_1 = require("../../../charts/scene/shape/sector");
var path_1 = require("../../../charts/scene/shape/path");
var linearScale_1 = require("../../../charts/scale/linearScale");
var line_1 = require("../../../charts/scene/shape/line");
var clipRect_1 = require("../../../charts/scene/clipRect");
var rect_1 = require("../../../charts/scene/shape/rect");
var bandScale_1 = require("../../../charts/scale/bandScale");
var MiniChart = /** @class */ (function () {
    function MiniChart() {
        var _this = this;
        this.size = 80;
        this.padding = 5;

__decorate([
        ag_grid_community_1.Autowired('valueFormatterService'),
        __metadata("design:type", ag_grid_community_1.ValueFormatterService)
    ], SetFilterListItem.prototype, "valueFormatterService", void 0);
    __decorate([
        ag_grid_community_1.Autowired('userComponentFactory'),
        __metadata("design:type", ag_grid_community_1.UserComponentFactory)
    ], SetFilterListItem.prototype, "userComponentFactory", void 0);
    __decorate([
        ag_grid_community_1.PostConstruct,
        __metadata("design:type", Function),
        __metadata("design:paramtypes", []),
        __metadata("design:returntype", void 0)
    ], SetFilterListItem.prototype, "init", null);
    return SetFilterListItem;
}(ag_grid_community_1.Component));
exports.SetFilterListItem = SetFilterListItem;

};
    DetailCellRenderer.TEMPLATE = "<div class="\&quot;ag-details-row\&quot;">\n            <div class="\&quot;ag-details-grid\&quot;/">\n        </div>";
    __decorate([
        ag_grid_community_1.RefSelector('eDetailGrid'),
        __metadata("design:type", HTMLElement)
    ], DetailCellRenderer.prototype, "eDetailGrid", void 0);
    __decorate([
        ag_grid_community_1.Autowired('gridOptionsWrapper'),
        __metadata("design:type", ag_grid_community_1.GridOptionsWrapper)
    ], DetailCellRenderer.prototype, "gridOptionsWrapper", void 0);
    __decorate([
        ag_grid_community_1.Autowired('environment'),
        __metadata("design:type", ag_grid_community_1.Environment)
    ], DetailCellRenderer.prototype, "environment", void 0);
    return DetailCellRenderer;
}(ag_grid_community_1.Component));
exports.DetailCellRenderer = DetailCellRenderer;
</div>

__decorate([
        ag_grid_community_1.RefSelector('paddingLeftSlider'),
        __metadata("design:type", ag_grid_community_1.AgSlider)
    ], PaddingPanel.prototype, "paddingLeftSlider", void 0);
    __decorate([
        ag_grid_community_1.Autowired('chartTranslator'),
        __metadata("design:type", chartTranslator_1.ChartTranslator)
    ], PaddingPanel.prototype, "chartTranslator", void 0);
    __decorate([
        ag_grid_community_1.PostConstruct,
        __metadata("design:type", Function),
        __metadata("design:paramtypes", []),
        __metadata("design:returntype", void 0)
    ], PaddingPanel.prototype, "init", null);
    return PaddingPanel;
}(ag_grid_community_1.Component));
exports.PaddingPanel = PaddingPanel;

}
        this.columnComps = {};
    };
    ChartDataPanel.TEMPLATE = "<div class="\&quot;ag-chart-data-wrapper\&quot;"></div>";
    __decorate([
        ag_grid_community_1.Autowired('gridOptionsWrapper'),
        __metadata("design:type", ag_grid_community_1.GridOptionsWrapper)
    ], ChartDataPanel.prototype, "gridOptionsWrapper", void 0);
    __decorate([
        ag_grid_community_1.PostConstruct,
        __metadata("design:type", Function),
        __metadata("design:paramtypes", []),
        __metadata("design:returntype", void 0)
    ], ChartDataPanel.prototype, "init", null);
    return ChartDataPanel;
}(ag_grid_community_1.Component));
exports.ChartDataPanel = ChartDataPanel;

__decorate([
        ag_grid_community_1.Autowired("gridOptionsWrapper"),
        __metadata("design:type", ag_grid_community_1.GridOptionsWrapper)
    ], SideBarComp.prototype, "gridOptionsWrapper", void 0);
    __decorate([
        ag_grid_community_1.RefSelector('sideBarButtons'),
        __metadata("design:type", sideBarButtonsComp_1.SideBarButtonsComp)
    ], SideBarComp.prototype, "sideBarButtonsComp", void 0);
    __decorate([
        ag_grid_community_1.PostConstruct,
        __metadata("design:type", Function),
        __metadata("design:paramtypes", []),
        __metadata("design:returntype", void 0)
    ], SideBarComp.prototype, "postConstruct", null);
    return SideBarComp;
}(ag_grid_community_1.Component));
exports.SideBarComp = SideBarComp;

__decorate([
        ag_grid_community_1.RefSelector('maxAggregationComp'),
        __metadata("design:type", nameValueComp_1.NameValueComp)
    ], AggregationComp.prototype, "maxAggregationComp", void 0);
    __decorate([
        ag_grid_community_1.RefSelector('avgAggregationComp'),
        __metadata("design:type", nameValueComp_1.NameValueComp)
    ], AggregationComp.prototype, "avgAggregationComp", void 0);
    __decorate([
        ag_grid_community_1.PostConstruct,
        __metadata("design:type", Function),
        __metadata("design:paramtypes", []),
        __metadata("design:returntype", void 0)
    ], AggregationComp.prototype, "postConstruct", null);
    return AggregationComp;
}(ag_grid_community_1.Component));
exports.AggregationComp = AggregationComp;