@progress/kendo-angular-schematics 13.5.0-develop.3 → 13.5.0-develop.4

package/src/chart/schema.d.ts

@@ -0,0 +1,230 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+export declare enum DataSource {
+    /**
+     * An example data source will be added to the project with predefined column definitions.
+     * The data and column definitions can not be modified.
+     *
+     * This is the default.
+     */
+    "Example" = "Example",
+    /**
+     * The user is expected to provide column definitions.
+     * A mock data will be generated out of the column definitions.
+     */
+    "Mock Data" = "Mock Data",
+    /**
+     * The user can specify a basic module to bind to and provide column definitions,
+     * but in general the user will have to author some code to connect the data.
+     */
+    "Existing App Data" = "Existing App Data"
+}
+export interface Series {
+    type: CategoricalChartType;
+    categoryField: string;
+    currentField: string;
+    field: string;
+    name: string;
+    width: number;
+}
+export interface CategoryAxis {
+    name?: string;
+    title?: string;
+    type: CategoryAxisType;
+}
+export interface ValueAxis {
+    name?: string;
+    title?: string;
+    type: ValueAxisType;
+}
+export interface Schema {
+    renderAs?: 'canvas' | 'svg';
+    legend?: boolean;
+    legendTitleText?: string;
+    legendTitleAlign?: 'left' | 'right' | 'center';
+    legendTitlePosition?: 'top' | 'bottom';
+    legendAlign?: 'center' | 'start' | 'end';
+    legendOrientation?: 'vertical' | 'horizontal';
+    legendPosition?: 'top' | 'bottom' | 'left' | 'right' | 'custom';
+    dataSource: DataSource;
+    series?: Series[];
+    categoryAxis?: CategoryAxis[];
+    valueAxis?: ValueAxis[];
+    dataPath?: string;
+    dataName: string;
+    dataSourceType?: string;
+    dataSourceModule?: string;
+    dataSourceMember?: string;
+    dataSourceMethod?: string;
+}
+export interface SchemaCircular {
+    renderAs?: 'canvas' | 'svg';
+    series?: string;
+    showLabels?: boolean;
+    legend?: boolean;
+    legendTitleText?: string;
+    legendTitleAlign?: 'left' | 'right' | 'center';
+    legendTitlePosition?: 'top' | 'bottom';
+    legendAlign?: 'center' | 'start' | 'end';
+    legendOrientation?: 'vertical' | 'horizontal';
+    legendPosition?: 'top' | 'bottom' | 'left' | 'right' | 'custom';
+    dataPath?: string;
+    dataName: string;
+    mockedData?: boolean;
+    dataSourceType?: string;
+    dataSourceModule?: string;
+    dataSourceMember?: string;
+    dataSourceMethod?: string;
+}
+export interface SchemaStock {
+    renderAs?: 'canvas' | 'svg';
+    series?: string;
+    categoryAxis?: string;
+    valueAxis?: string;
+    legend?: boolean;
+    legendTitleText?: string;
+    legendTitleAlign?: 'left' | 'right' | 'center';
+    legendTitlePosition?: 'top' | 'bottom';
+    legendAlign?: 'center' | 'start' | 'end';
+    legendOrientation?: 'vertical' | 'horizontal';
+    legendPosition?: 'top' | 'bottom' | 'left' | 'right' | 'custom';
+    navigator?: boolean;
+    navigatorFrom?: string;
+    navigatorТо?: string;
+    navigatorSeries?: string;
+    dataPath?: string;
+    dataName: string;
+    mockedData?: boolean;
+    dataSourceType?: string;
+    dataSourceModule?: string;
+    dataSourceMember?: string;
+    dataSourceMethod?: string;
+}
+export interface SchemaScatter {
+    renderAs?: 'canvas' | 'svg';
+    series?: string;
+    categoryAxis?: string;
+    valueAxis?: string;
+    legend?: boolean;
+    legendTitleText?: string;
+    legendTitleAlign?: 'left' | 'right' | 'center';
+    legendTitlePosition?: 'top' | 'bottom';
+    legendAlign?: 'center' | 'start' | 'end';
+    legendOrientation?: 'vertical' | 'horizontal';
+    legendPosition?: 'top' | 'bottom' | 'left' | 'right' | 'custom';
+    dataPath?: string;
+    dataName: string;
+    mockedData?: boolean;
+    dataSourceType?: string;
+    dataSourceModule?: string;
+    dataSourceMember?: string;
+    dataSourceMethod?: string;
+}
+export interface AngularComponentSchema {
+    name: string;
+    path?: string;
+    project?: string;
+    module?: string;
+    selector?: string;
+    prefix: string;
+    style?: "css" | "scss" | "sass" | "less" | "none";
+    flat?: boolean;
+    type?: string;
+    displayBlock?: boolean;
+    inlineStyle: boolean;
+    inlineTemplate: boolean;
+    skipTests: boolean;
+}
+export interface KendoChartPageLayoutSchema {
+    title: boolean;
+    legend: boolean;
+}
+export declare enum CategoricalChartType {
+    "area" = "area",
+    "bar" = "bar",
+    "bullet" = "bullet",
+    "column" = "column",
+    "horizontalWaterfall" = "horizontalWaterfall",
+    "line" = "line",
+    "radarArea" = "radarArea",
+    "radarColumn" = "radarColumn",
+    "radarLine" = "radarLine",
+    "rangeArea" = "rangeArea",
+    "rangeBar" = "rangeBar",
+    "rangeColumn" = "rangeColumn",
+    "waterfall" = "waterfall"
+}
+export declare enum ValueAxisType {
+    "numeric" = "numeric",
+    "log" = "log"
+}
+export declare enum CategoryAxisType {
+    "category" = "category",
+    "date" = "date"
+}
+export interface CommonCategoricalChartSchema extends AngularComponentSchema, KendoChartPageLayoutSchema {
+    /**
+     * Time charts do not group in discrete categories but show data over continuous time range.
+     */
+    time: boolean;
+    /**
+     * Show time navigator for time charts.
+     */
+    navigator: boolean;
+    /**
+     * The category name of the single category axis chart.
+     */
+    category: string;
+    categories: string[];
+    /**
+     * Series for the single category.
+     */
+    series: string[];
+    /**
+     * Use logarithmic scale for the single value axis.
+     */
+    log: boolean;
+    renderAs: "svg" | "canvas";
+    /**
+     * Value name of a single axis categorical chart.
+     */
+    value: string;
+}
+export declare function isCategorical(chart: KendoAngularChartSchema): chart is CategoricalChartSchema;
+export interface CategoricalChartSchema extends CommonCategoricalChartSchema {
+    chartType: "area" | "bar" | "bullet" | "column" | "horizontalWaterfall" | "line" | "radarArea" | "radarColumn" | "radarLine" | "waterfall";
+}
+export declare function isCategoricalRange(chart: KendoAngularChartSchema): chart is CategoricalRangeChartSchema;
+export interface CategoricalRangeChartSchema extends CommonCategoricalChartSchema {
+    chartType: "rangeArea" | "rangeBar" | "rangeColumn";
+}
+export interface ScatterChartSchema extends AngularComponentSchema, KendoChartPageLayoutSchema {
+    chartType: "scatter";
+}
+export interface StockChartSchema extends CommonCategoricalChartSchema, KendoChartPageLayoutSchema {
+    chartType: "stock";
+    navigator: boolean;
+    navigatorFrom: string;
+    navigatorTo: string;
+}
+export interface CircularChartSchema extends AngularComponentSchema, KendoChartPageLayoutSchema {
+}
+export interface PieChartSchema extends CircularChartSchema {
+    chartType: "pie";
+    time: false;
+    value: string;
+    series: ["value"];
+    category: string;
+    categories: string[];
+}
+export interface DonutChartSchema extends CircularChartSchema {
+    chartType: "donut";
+    time: false;
+    value: string;
+    series: ["value"];
+    category: string;
+    categories: string[];
+}
+export declare type KendoAngularChartSchema = CategoricalChartSchema | CategoricalRangeChartSchema | ScatterChartSchema | StockChartSchema | PieChartSchema | DonutChartSchema;

package/src/chart/schema.js

@@ -0,0 +1,72 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isCategoricalRange = exports.isCategorical = exports.CategoryAxisType = exports.ValueAxisType = exports.CategoricalChartType = exports.DataSource = void 0;
+var DataSource;
+(function (DataSource) {
+    /**
+     * An example data source will be added to the project with predefined column definitions.
+     * The data and column definitions can not be modified.
+     *
+     * This is the default.
+     */
+    DataSource["Example"] = "Example";
+    /**
+     * The user is expected to provide column definitions.
+     * A mock data will be generated out of the column definitions.
+     */
+    DataSource["Mock Data"] = "Mock Data";
+    /**
+     * The user can specify a basic module to bind to and provide column definitions,
+     * but in general the user will have to author some code to connect the data.
+     */
+    DataSource["Existing App Data"] = "Existing App Data";
+})(DataSource = exports.DataSource || (exports.DataSource = {}));
+;
+var CategoricalChartType;
+(function (CategoricalChartType) {
+    CategoricalChartType["area"] = "area";
+    CategoricalChartType["bar"] = "bar";
+    CategoricalChartType["bullet"] = "bullet";
+    CategoricalChartType["column"] = "column";
+    CategoricalChartType["horizontalWaterfall"] = "horizontalWaterfall";
+    CategoricalChartType["line"] = "line";
+    CategoricalChartType["radarArea"] = "radarArea";
+    CategoricalChartType["radarColumn"] = "radarColumn";
+    CategoricalChartType["radarLine"] = "radarLine";
+    CategoricalChartType["rangeArea"] = "rangeArea";
+    CategoricalChartType["rangeBar"] = "rangeBar";
+    CategoricalChartType["rangeColumn"] = "rangeColumn";
+    CategoricalChartType["waterfall"] = "waterfall";
+})(CategoricalChartType = exports.CategoricalChartType || (exports.CategoricalChartType = {}));
+var ValueAxisType;
+(function (ValueAxisType) {
+    ValueAxisType["numeric"] = "numeric";
+    ValueAxisType["log"] = "log";
+})(ValueAxisType = exports.ValueAxisType || (exports.ValueAxisType = {}));
+var CategoryAxisType;
+(function (CategoryAxisType) {
+    CategoryAxisType["category"] = "category";
+    CategoryAxisType["date"] = "date";
+})(CategoryAxisType = exports.CategoryAxisType || (exports.CategoryAxisType = {}));
+function isCategorical(chart) {
+    return chart.chartType == "area" ||
+        chart.chartType == "bar" ||
+        chart.chartType == "bullet" ||
+        chart.chartType == "column" ||
+        chart.chartType == "horizontalWaterfall" ||
+        chart.chartType == "line" ||
+        chart.chartType == "radarArea" ||
+        chart.chartType == "radarColumn" ||
+        chart.chartType == "radarLine" ||
+        chart.chartType == "waterfall";
+}
+exports.isCategorical = isCategorical;
+function isCategoricalRange(chart) {
+    return chart.chartType == "rangeArea" || chart.chartType == "rangeBar" || chart.chartType == "rangeColumn";
+}
+exports.isCategoricalRange = isCategoricalRange;
+//# sourceMappingURL=schema.js.map

package/src/chart/schema.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"schema.js","sourceRoot":"","sources":["../../../../../libs/schematics/src/chart/schema.ts"],"names":[],"mappings":";;;AAAA,IAAY,UAoBX;AApBD,WAAY,UAAU;IAClB;;;;;OAKG;IACH,iCAAqB,CAAA;IAErB;;;OAGG;IACH,qCAAyB,CAAA;IAEzB;;;OAGG;IACH,qDAAyC,CAAA;AAC7C,CAAC,EApBW,UAAU,GAAV,kBAAU,KAAV,kBAAU,QAoBrB;AAmIA,CAAC;AAOF,IAAY,oBAcX;AAdD,WAAY,oBAAoB;IAC5B,qCAAe,CAAA;IACf,mCAAa,CAAA;IACb,yCAAmB,CAAA;IACnB,yCAAmB,CAAA;IACnB,mEAA6C,CAAA;IAC7C,qCAAe,CAAA;IACf,+CAAyB,CAAA;IACzB,mDAA6B,CAAA;IAC7B,+CAAyB,CAAA;IACzB,+CAAyB,CAAA;IACzB,6CAAuB,CAAA;IACvB,mDAA6B,CAAA;IAC7B,+CAAyB,CAAA;AAC7B,CAAC,EAdW,oBAAoB,GAApB,4BAAoB,KAApB,4BAAoB,QAc/B;AAED,IAAY,aAGX;AAHD,WAAY,aAAa;IACrB,oCAAqB,CAAA;IACrB,4BAAa,CAAA;AACjB,CAAC,EAHW,aAAa,GAAb,qBAAa,KAAb,qBAAa,QAGxB;AAED,IAAY,gBAGX;AAHD,WAAY,gBAAgB;IACxB,yCAAuB,CAAA;IACvB,iCAAe,CAAA;AACnB,CAAC,EAHW,gBAAgB,GAAhB,wBAAgB,KAAhB,wBAAgB,QAG3B;AAoCD,SAAgB,aAAa,CAAC,KAA8B;IACxD,OAAO,KAAK,CAAC,SAAS,IAAI,MAAM;QAC5B,KAAK,CAAC,SAAS,IAAI,KAAK;QACxB,KAAK,CAAC,SAAS,IAAI,QAAQ;QAC3B,KAAK,CAAC,SAAS,IAAI,QAAQ;QAC3B,KAAK,CAAC,SAAS,IAAI,qBAAqB;QACxC,KAAK,CAAC,SAAS,IAAI,MAAM;QACzB,KAAK,CAAC,SAAS,IAAI,WAAW;QAC9B,KAAK,CAAC,SAAS,IAAI,aAAa;QAChC,KAAK,CAAC,SAAS,IAAI,WAAW;QAC9B,KAAK,CAAC,SAAS,IAAI,WAAW,CAAC;AACvC,CAAC;AAXD,sCAWC;AAMD,SAAgB,kBAAkB,CAAC,KAA8B;IAC7D,OAAO,KAAK,CAAC,SAAS,IAAI,WAAW,IAAI,KAAK,CAAC,SAAS,IAAI,UAAU,IAAI,KAAK,CAAC,SAAS,IAAI,aAAa,CAAC;AAC/G,CAAC;AAFD,gDAEC"}

package/src/chart/schema.json

@@ -0,0 +1,235 @@
+{
+	"progress:name": "Chart",
+	"progress:description": "Generate new Kendo UI for Angular Chart page",
+	"$schema": "http://json-schema.org/schema",
+	"$id": "KendoAngularChart",
+	"type": "object",
+	"properties": {
+		"path": {
+			"type": "string",
+			"format": "path",
+			"$default": {
+				"$source": "workingDirectory"
+			},
+			"description": "The path at which to create the component file, relative to the current workspace. Default is a folder with the same name as the component in the project root.",
+			"visible": false,
+			"progress:editorVisible": false
+		},
+		"project": {
+			"type": "string",
+			"description": "The name of the project.",
+			"$default": {
+				"$source": "projectName"
+			},
+			"progress:editorVisible": false
+		},
+		"name": {
+			"type": "string",
+			"description": "The name of the component.",
+			"$default": {
+				"$source": "argv",
+				"index": 0
+			},
+			"default": "Chart",
+			"x-prompt": "What name would you like to use for the component?"
+		},
+		"module": {
+			"type": "string",
+			"description": "The declaring NgModule.",
+			"alias": "m",
+			"progress:editorVisible": false
+		},
+		"selector": {
+			"type": "string",
+			"format": "html-selector",
+			"description": "The HTML selector to use for this component.",
+			"progress:editorVisible": false
+		},
+		"type": {
+			"type": "string",
+			"description": "Adds a developer-defined type to the filename, in the format \"name.type.ts\".",
+			"default": "Component",
+			"progress:editorVisible": false
+		},
+		"displayBlock": {
+			"description": "Specifies if the style will contain `:host { display: block; }`.",
+			"type": "boolean",
+			"default": false,
+			"alias": "b",
+			"progress:editorVisible": false
+		},
+		"standalone": {
+			"description": "Whether the generated component is standalone.",
+			"type": "boolean",
+			"default": false,
+			"x-user-analytics": 15,
+			"progress:editorVisible": false
+		},
+		"changeDetection": {
+			"description": "The change detection strategy to use in the new component.",
+			"enum": ["Default", "OnPush"],
+			"type": "string",
+			"default": "Default",
+			"alias": "c",
+			"progress:editorVisible": false
+		},
+		"viewEncapsulation": {
+			"description": "The view encapsulation strategy to use in the new component.",
+			"enum": ["Emulated", "None", "ShadowDom"],
+			"type": "string",
+			"alias": "v",
+			"x-user-analytics": 11,
+			"progress:editorVisible": false
+		},
+		"skipSelector": {
+			"type": "boolean",
+			"default": false,
+			"description": "Specifies if the component should have a selector or not.",
+			"progress:editorVisible": false
+		},
+
+		"inlineTemplate": {
+			"progress:category": "Code Generation",
+			"progress:display-name": "Inline template",
+			"description": "Include template inline in the component.ts file. By default, an external template file is created and referenced in the component.ts file.",
+			"type": "boolean",
+			"default": false,
+			"alias": "t"
+		},
+		"style": {
+			"description": "The file extension or preprocessor to use for style files, or 'none' to skip generating the style file.",
+			"type": "string",
+			"default": "css",
+			"enum": ["css", "scss", "sass", "less", "none"],
+			"x-user-analytics": "ep.ng_style"
+		},
+		"inlineStyle": {
+			"progress:category": "Code Generation",
+			"description": "Include styles inline in the component.ts file. Only CSS styles can be included inline. By default, an external styles file is created and referenced in the component.ts file.",
+			"type": "boolean",
+			"default": false,
+			"alias": "s"
+		},
+		"skipTests": {
+			"progress:category": "Code Generation",
+			"type": "boolean",
+			"description": "Do not create \"spec.ts\" test files for the new component.",
+			"default": false
+		},
+		"chartType": {
+			"type": "string",
+			"displayName": "Chart Type",
+			"enum": [
+				"bar",
+				"area",
+				"scatter",
+				"stock",
+				"pie",
+				"donut",
+				"bullet",
+				"column",
+				"line",
+				"radarArea",
+				"radarColumn",
+				"radarLine",
+				"rangeArea",
+				"rangeBar",
+				"rangeColumn",
+				"waterfall",
+				"horizontalWaterfall"
+			],
+			"default": "bar",
+			"description": "Choose your Chart type.",
+			"progress:attributes": [{ "type": "chartTypeEditorList" }]
+		},
+
+		"renderAs": {
+			"progress:category": "Chart Options",
+            "type": "string",
+            "enum": [ "svg", "canvas" ],
+			"default": "svg"
+        },
+
+		"title": {
+			"progress:category": "Chart Options",
+			"type": "boolean",
+			"default": true
+		},
+		"legend": {
+			"progress:category": "Chart Options",
+			"type": "boolean",
+			"default": true
+		},
+
+		"time": {
+			"progress:category": "Data",
+			"description": "Time charts do not group in discrete categories but show data over continuous time range.",
+			"type": "boolean",
+			"default": false,
+			"progress:attributes": [{ "type": "hideOnPropertyValue", "property": "chartType", "values": [ "stock", "scatter" ] }]
+		},
+		"navigator": {
+			"progress:category": "Data",
+			"description": "Time charts do not group in discrete categories but show data over continuous time range.",
+			"type": "boolean",
+			"default": true,
+			"progress:attributes": [{ "type": "hideOnPropertyValue", "property": "chartType", "values": [
+				"bar",
+				"area",
+				"scatter",
+				"pie",
+				"donut",
+				"bullet",
+				"column",
+				"line",
+				"radarArea",
+				"radarColumn",
+				"radarLine",
+				"rangeArea",
+				"rangeBar",
+				"rangeColumn",
+				"waterfall",
+				"horizontalWaterfall"
+			]}]
+		},
+		"log": {
+			"progress:category": "Data",
+			"description": "Use logarithmic scale for the single value axis.",
+			"type": "boolean",
+			"default": false,
+			"progress:attributes": [{ "type": "hideOnPropertyValue", "property": "chartType", "values": [ "scatter" ] }]
+		},
+
+		"category": {
+			"progress:category": "Data",
+			"description": "The category name of the single category axis chart. Example: Products, Vehicles, Countries...",
+			"type": "string",
+			"progress:attributes": [{ "type": "hideOnPropertyValue", "property": "chartType", "values": [ "scatter" ] }]
+		},
+		"categories": {
+			"progress:category": "Data",
+			"type": "array",
+			"items": { "type": "string" },
+			"progress:attributes": [
+				{ "type": "hideOnPropertyValue", "property": "time", "values": [ true ] },
+				{ "type": "hideOnPropertyValue", "property": "chartType", "values": [ "stock", "scatter" ] }
+			]
+		},
+		"series": {
+			"progress:category": "Data",
+			"type": "array",
+			"items": { "type": "string" },
+			"progress:attributes": [{ "type": "hideOnPropertyValue", "property": "chartType", "values": [ "scatter", "pie", "donut" ] }]
+		},
+
+		"value": {
+			"progress:category": "Data",
+			"description": "The value name of the single value axis chart. Example: Price, Sales, Temperature...",
+			"type": "string",
+			"progress:attributes": [{ "type": "hideOnPropertyValue", "property": "chartType", "values": [ "scatter" ] }]
+		}
+	},
+	"required": [
+		"name"
+	]
+}

package/src/grid/files/__name@dasherize@if-flat__/__name@dasherize__.__type@dasherize__.__style__.template

@@ -0,0 +1,6 @@
+<% if(displayBlock){ if(style != 'sass') { %>:host {
+  display: block;
+}
+<% } else { %>\:host
+  display: block;
+<% }} %>

package/src/grid/files/__name@dasherize@if-flat__/__name@dasherize__.__type@dasherize__.html.template

@@ -0,0 +1 @@
+<%= include("grid.html.include") %>

package/src/grid/files/__name@dasherize@if-flat__/__name@dasherize__.__type@dasherize__.spec.ts.template

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { <%= classify(name) %><%= classify(type) %> } from './<%= dasherize(name) %><%= type ? '.' + dasherize(type): '' %>';
+
+describe('<%= classify(name) %><%= classify(type) %>', () => {
+  let component: <%= classify(name) %><%= classify(type) %>;
+  let fixture: ComponentFixture<<%= classify(name) %><%= classify(type) %>>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      <%= standalone ? 'imports' : 'declarations' %>: [<%= classify(name) %><%= classify(type) %>]
+    });
+    fixture = TestBed.createComponent(<%= classify(name) %><%= classify(type) %>);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/grid/files/__name@dasherize@if-flat__/__name@dasherize__.__type@dasherize__.ts.template

@@ -0,0 +1,37 @@
+import { <% if(changeDetection !== 'Default') { %>ChangeDetectionStrategy, <% }%>Component<% if(!!viewEncapsulation) { %>, ViewEncapsulation<% }%> } from '@angular/core';<% if(standalone) {%>
+import { CommonModule } from '@angular/common';<% } %><% if (dataSource === "Example") {%>
+import { products } from './<%= dasherize(name) %>.sample-data'; <% } %><% if (dataSource === "Mock Data") {%>
+import data from './<%= dasherize(name) %>.sample-data';<% } %><% if (editing) {%>
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { CreateFormGroupArgs } from '@progress/kendo-angular-grid';<% } %>
+
+@Component({<% if(!skipSelector) {%>
+  selector: '<%= selector %>',<%}%><% if(standalone) {%>
+  standalone: true,
+  imports: [CommonModule],<%}%><% if(inlineTemplate) { %>
+  template: `<%= include("grid.html.include") %>`<% } else { %>
+  templateUrl: './<%= dasherize(name) %><%= type ? '.' + dasherize(type): '' %>.html'<% } if(inlineStyle) { %>,
+  styles: [<% if(displayBlock){ %>
+    `
+      :host {
+        display: block;
+      }
+    `<% } %>
+  ]<% } else if (style !== 'none') { %>,
+  styleUrls: ['./<%= dasherize(name) %><%= type ? '.' + dasherize(type): '' %>.<%= style %>']<% } %><% if(!!viewEncapsulation) { %>,
+  encapsulation: ViewEncapsulation.<%= viewEncapsulation %><% } if (changeDetection !== 'Default') { %>,
+  changeDetection: ChangeDetectionStrategy.<%= changeDetection %><% } %>
+})
+export class <%= classify(name) %><%= classify(type) %> {
+  public gridData: any[] = <% if (dataSource === "Example") { %>products<% } else if (dataSource === "Mock Data") { %>data<% } else if (dataName) { %><%=dataName%><% } else { %>products<%} %>;<% if (paging) { %>
+  public pageSize: number = <%=pageSize%>;<% } %><% if (editing) {%>
+
+  constructor(private formBuilder: FormBuilder) { }
+
+  public createFormGroup = (args: CreateFormGroupArgs): FormGroup => {
+    // TODO: Implement default item factory.
+    const item = args.isNew ? Object.keys(this.gridData[0]).reduce((acc, curr) => (acc as any)[curr] = null || acc, {}) : args.dataItem;
+
+    return this.formBuilder.group(item);
+  };<% } %>
+}