diff --git a/packages/cli/lib/templates/IgniteUIForWebComponentsTemplate.ts b/packages/cli/lib/templates/IgniteUIForWebComponentsTemplate.ts index 241bef587..a69fc5d70 100644 --- a/packages/cli/lib/templates/IgniteUIForWebComponentsTemplate.ts +++ b/packages/cli/lib/templates/IgniteUIForWebComponentsTemplate.ts @@ -52,7 +52,8 @@ export class IgniteUIForWebComponentsTemplate implements Template { !(options && options.skipRoute) && App.container.get(FS_TOKEN).fileExists(routeModulePath) ) { - const modulePath = `./${Util.lowerDashed(fullName)}/${Util.lowerDashed(fullName)}-routing` + const modulePath = `./${Util.lowerDashed(fullName)}/${Util.lowerDashed(fullName)}-routing`; + const componentTag = `app-${this.fileName(fullName)}`; const child: RouteLike = { identifierName: ROUTES_VARIABLE_NAME, aliasName: options.routerChildren, @@ -61,7 +62,7 @@ export class IgniteUIForWebComponentsTemplate implements Template { if (defaultPath) { routingModule.addRoute({ path: "", - redirectTo: options.selector, + redirectTo: componentTag, name: Util.nameFromPath(fullName) } ); @@ -72,7 +73,7 @@ export class IgniteUIForWebComponentsTemplate implements Template { routingModule.addRoute({ path: this.fileName(fullName), - identifierName: options.selector, + identifierName: componentTag, name: Util.nameFromPath(fullName) }, false // multiline diff --git a/packages/igx-templates/igx-ts/grid/default/files/src/app/__path__/localData.ts b/packages/cli/shared-data/grid/files/src/app/__path__/data.ts similarity index 100% rename from packages/igx-templates/igx-ts/grid/default/files/src/app/__path__/localData.ts rename to packages/cli/shared-data/grid/files/src/app/__path__/data.ts diff --git a/packages/igx-templates/igx-ts/hierarchical-grid/default/files/src/app/__path__/data.ts b/packages/cli/shared-data/hierarchical-grid/files/src/app/__path__/data.ts similarity index 100% rename from packages/igx-templates/igx-ts/hierarchical-grid/default/files/src/app/__path__/data.ts rename to packages/cli/shared-data/hierarchical-grid/files/src/app/__path__/data.ts diff --git a/packages/igx-templates/igx-ts/pivot-grid/default/files/src/app/__path__/data.ts b/packages/cli/shared-data/pivot-grid/files/src/app/__path__/data.ts similarity index 100% rename from packages/igx-templates/igx-ts/pivot-grid/default/files/src/app/__path__/data.ts rename to packages/cli/shared-data/pivot-grid/files/src/app/__path__/data.ts diff --git a/packages/igx-templates/igx-ts/tree-grid/tree-grid-custom/files/src/app/__path__/localData.ts b/packages/cli/shared-data/tree-grid/files/src/app/__path__/data.ts similarity index 100% rename from packages/igx-templates/igx-ts/tree-grid/tree-grid-custom/files/src/app/__path__/localData.ts rename to packages/cli/shared-data/tree-grid/files/src/app/__path__/data.ts diff --git a/packages/cli/templates/react/igr-ts/grid/basic/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/grid/basic/files/src/app/__path__/__filePrefix__.tsx index 40afd1495..e2d1ac522 100644 --- a/packages/cli/templates/react/igr-ts/grid/basic/files/src/app/__path__/__filePrefix__.tsx +++ b/packages/cli/templates/react/igr-ts/grid/basic/files/src/app/__path__/__filePrefix__.tsx @@ -2,50 +2,59 @@ import style from './style.module.css'; import { IgrGrid, IgrColumn } from 'igniteui-react-grids'; import 'igniteui-react-grids/grids/themes/light/bootstrap.css'; -import data from './data'; +import { employeesData } from './data'; export default function $(ClassName)() { - const title = 'Grid'; + const title = '$(name)'; return ( -
-

{title}

-
- Read more on the  - - official documentation page - -
-
-
- - - - - - - - - - - - -
+
+

{title}

+

+ IgrGrid component with auto generated columns and local data.
+ You can read more about configuring the IgrGrid component in the  + + official documentation + . +

+
+ + + + + + + + + + + + + + + +
); diff --git a/packages/cli/templates/react/igr-ts/grid/basic/files/src/app/__path__/data.tsx b/packages/cli/templates/react/igr-ts/grid/basic/files/src/app/__path__/data.tsx deleted file mode 100644 index 54ff21bd4..000000000 --- a/packages/cli/templates/react/igr-ts/grid/basic/files/src/app/__path__/data.tsx +++ /dev/null @@ -1,46 +0,0 @@ -export default [{ - Discontinued: false, - OrderDate: new Date('2012-02-12'), - ProductID: 1, - ProductName: 'Chai', - QuantityPerUnit: '10 boxes x 20 bags', - ReorderLevel: 10, - UnitPrice: 18.0000, - UnitsInStock: 39 -}, { - Discontinued: false, - OrderDate: new Date('2003-03-17'), - ProductID: 2, - ProductName: 'Chang', - QuantityPerUnit: '24 - 12 oz bottles', - ReorderLevel: 25, - UnitPrice: 19.0000, - UnitsInStock: 17 -}, { - Discontinued: false, - OrderDate: new Date('2006-03-17'), - ProductID: 3, - ProductName: 'Aniseed Syrup', - QuantityPerUnit: '12 - 550 ml bottles', - ReorderLevel: 25, - UnitPrice: 10.0000, - UnitsInStock: 13 -}, { - Discontinued: false, - OrderDate: new Date('2016-03-17'), - ProductID: 4, - ProductName: 'Chef Antons Cajun Seasoning', - QuantityPerUnit: '48 - 6 oz jars', - ReorderLevel: 0, - UnitPrice: 22.0000, - UnitsInStock: 53 -}, { - Discontinued: true, - OrderDate: new Date('2011-11-11'), - ProductID: 5, - ProductName: 'Chef Antons Gumbo Mix', - QuantityPerUnit: '36 boxes', - ReorderLevel: 0, - UnitPrice: 21.3500, - UnitsInStock: 0 -}]; diff --git a/packages/cli/templates/react/igr-ts/grid/basic/files/src/app/__path__/style.module.css b/packages/cli/templates/react/igr-ts/grid/basic/files/src/app/__path__/style.module.css index 2866d55fa..8797056de 100644 --- a/packages/cli/templates/react/igr-ts/grid/basic/files/src/app/__path__/style.module.css +++ b/packages/cli/templates/react/igr-ts/grid/basic/files/src/app/__path__/style.module.css @@ -1,17 +1,27 @@ -:local(.container) { - padding-top: 24px; +:local(.page) { + width: 100%; + margin-top: 40px; + padding: 0 48px; display: flex; - flex-flow: column; - justify-content: center; + flex-direction: column; align-items: center; } :local(.title) { color: rgb(0, 153, 255); + text-align: center; + font-size: 2.5rem; + font-weight: 600; +} + +:local(.subtitle) { + text-align: center; + margin-bottom: 32px; + margin-top: 16px; + font-size: 14px; } :local(.grid) { - width: 80%; - margin-bottom: 24px; - border: 1px solid rgb(0, 153, 255); + width: 100%; + max-width: 1200px; } diff --git a/packages/cli/templates/react/igr-ts/grid/basic/index.ts b/packages/cli/templates/react/igr-ts/grid/basic/index.ts index a6ad1af75..90de0455f 100644 --- a/packages/cli/templates/react/igr-ts/grid/basic/index.ts +++ b/packages/cli/templates/react/igr-ts/grid/basic/index.ts @@ -1,23 +1,33 @@ import { IgniteUIForReactTemplate } from "../../../../../lib/templates/IgniteUIForReactTemplate"; import { IGNITEUI_REACT_GRIDS_PACKAGE } from "../../constants"; +import * as path from "path"; + +const SHARED_DATA_ROOT = path.join(__dirname, "../../../../../shared-data"); class GridTemplate extends IgniteUIForReactTemplate { - /** - * - */ - constructor() { - super(__dirname); - this.id = "grid"; - this.name = "Grid"; - this.widget = "igGrid"; - this.description = "IgrGrid template for React"; - this.projectType = "igr-ts"; - this.components = ["Grid"]; - this.controlGroup = "Data Grids"; - this.packages = [IGNITEUI_REACT_GRIDS_PACKAGE]; + /** + * + */ + constructor() { + super(__dirname); + this.id = "grid"; + this.name = "Grid"; + this.widget = "igGrid"; + this.description = "IgrGrid template for React"; + this.projectType = "igr-ts"; + this.components = ["Grid"]; + this.controlGroup = "Data Grids"; + this.packages = [IGNITEUI_REACT_GRIDS_PACKAGE]; + + this.hasExtraConfiguration = false; + } - this.hasExtraConfiguration = false; - } + public get templatePaths(): string[] { + return [ + ...super.templatePaths, + path.join(SHARED_DATA_ROOT, "grid", "files") + ]; + } } module.exports = new GridTemplate(); diff --git a/packages/cli/templates/react/igr-ts/hierarchical-grid/basic/files/src/app/__path__/__filePrefix__.test.tsx b/packages/cli/templates/react/igr-ts/hierarchical-grid/basic/files/src/app/__path__/__filePrefix__.test.tsx new file mode 100644 index 000000000..854681a3a --- /dev/null +++ b/packages/cli/templates/react/igr-ts/hierarchical-grid/basic/files/src/app/__path__/__filePrefix__.test.tsx @@ -0,0 +1,13 @@ +import { beforeAll, expect, test } from 'vitest'; +import { render } from '@testing-library/react'; +import $(ClassName) from './$(path)'; +import { setupTestMocks } from '../../setupTests'; + +beforeAll(() => { + setupTestMocks(); +}) + +test('renders $(ClassName) component', () => { + const wrapper = render(<$(ClassName) />); + expect(wrapper).toBeTruthy(); +}); diff --git a/packages/cli/templates/react/igr-ts/hierarchical-grid/basic/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/hierarchical-grid/basic/files/src/app/__path__/__filePrefix__.tsx new file mode 100644 index 000000000..8729f77a0 --- /dev/null +++ b/packages/cli/templates/react/igr-ts/hierarchical-grid/basic/files/src/app/__path__/__filePrefix__.tsx @@ -0,0 +1,43 @@ +import style from './style.module.css'; +import { IgrHierarchicalGrid, IgrRowIsland, IgrColumn } from 'igniteui-react-grids'; +import 'igniteui-react-grids/grids/themes/light/bootstrap.css'; + +import { ARTISTS } from './data'; + +export default function $(ClassName)() { + const title = '$(name)'; + + return ( +
+

{title}

+

+ IgrHierarchicalGrid with basic configuration.
+ You can read more about configuring the IgrHierarchicalGrid component in the  + + official documentation + . +

+
+ + + + + + + + + + + + + + + + + + + +
+
+ ); +} diff --git a/packages/cli/templates/react/igr-ts/hierarchical-grid/basic/files/src/app/__path__/style.module.css b/packages/cli/templates/react/igr-ts/hierarchical-grid/basic/files/src/app/__path__/style.module.css new file mode 100644 index 000000000..8797056de --- /dev/null +++ b/packages/cli/templates/react/igr-ts/hierarchical-grid/basic/files/src/app/__path__/style.module.css @@ -0,0 +1,27 @@ +:local(.page) { + width: 100%; + margin-top: 40px; + padding: 0 48px; + display: flex; + flex-direction: column; + align-items: center; +} + +:local(.title) { + color: rgb(0, 153, 255); + text-align: center; + font-size: 2.5rem; + font-weight: 600; +} + +:local(.subtitle) { + text-align: center; + margin-bottom: 32px; + margin-top: 16px; + font-size: 14px; +} + +:local(.grid) { + width: 100%; + max-width: 1200px; +} diff --git a/packages/cli/templates/react/igr-ts/hierarchical-grid/basic/index.ts b/packages/cli/templates/react/igr-ts/hierarchical-grid/basic/index.ts new file mode 100644 index 000000000..de52c8ce7 --- /dev/null +++ b/packages/cli/templates/react/igr-ts/hierarchical-grid/basic/index.ts @@ -0,0 +1,28 @@ +import { IgniteUIForReactTemplate } from "../../../../../lib/templates/IgniteUIForReactTemplate"; +import { IGNITEUI_REACT_GRIDS_PACKAGE } from "../../constants"; +import * as path from "path"; + +const SHARED_DATA_ROOT = path.join(__dirname, "../../../../../shared-data"); + +class HierarchicalGridTemplate extends IgniteUIForReactTemplate { + constructor() { + super(__dirname); + this.id = "hierarchical-grid"; + this.name = "Hierarchical Grid"; + this.widget = "igHierarchicalGrid"; + this.description = "IgrHierarchicalGrid template for React"; + this.projectType = "igr-ts"; + this.components = ["Hierarchical Grid"]; + this.controlGroup = "Data Grids"; + this.packages = [IGNITEUI_REACT_GRIDS_PACKAGE]; + this.hasExtraConfiguration = false; + } + + public get templatePaths(): string[] { + return [ + ...super.templatePaths, + path.join(SHARED_DATA_ROOT, "hierarchical-grid", "files") + ]; + } +} +module.exports = new HierarchicalGridTemplate(); diff --git a/packages/cli/templates/react/igr-ts/hierarchical-grid/index.ts b/packages/cli/templates/react/igr-ts/hierarchical-grid/index.ts new file mode 100644 index 000000000..cffbc84b6 --- /dev/null +++ b/packages/cli/templates/react/igr-ts/hierarchical-grid/index.ts @@ -0,0 +1,11 @@ +import { BaseComponent } from "@igniteui/cli-core"; + +class IgrTsHierarchicalGridComponent extends BaseComponent { + constructor() { + super(__dirname); + this.name = "Hierarchical Grid"; + this.group = "Grids & Lists"; + this.description = "IgrHierarchicalGrid component for React"; + } +} +module.exports = new IgrTsHierarchicalGridComponent(); diff --git a/packages/cli/templates/react/igr-ts/pivot-grid/basic/files/src/app/__path__/__filePrefix__.test.tsx b/packages/cli/templates/react/igr-ts/pivot-grid/basic/files/src/app/__path__/__filePrefix__.test.tsx new file mode 100644 index 000000000..854681a3a --- /dev/null +++ b/packages/cli/templates/react/igr-ts/pivot-grid/basic/files/src/app/__path__/__filePrefix__.test.tsx @@ -0,0 +1,13 @@ +import { beforeAll, expect, test } from 'vitest'; +import { render } from '@testing-library/react'; +import $(ClassName) from './$(path)'; +import { setupTestMocks } from '../../setupTests'; + +beforeAll(() => { + setupTestMocks(); +}) + +test('renders $(ClassName) component', () => { + const wrapper = render(<$(ClassName) />); + expect(wrapper).toBeTruthy(); +}); diff --git a/packages/cli/templates/react/igr-ts/pivot-grid/basic/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/pivot-grid/basic/files/src/app/__path__/__filePrefix__.tsx new file mode 100644 index 000000000..5a10ce754 --- /dev/null +++ b/packages/cli/templates/react/igr-ts/pivot-grid/basic/files/src/app/__path__/__filePrefix__.tsx @@ -0,0 +1,54 @@ +import style from './style.module.css'; +import { IgrPivotGrid } from 'igniteui-react-grids'; +import 'igniteui-react-grids/grids/themes/light/bootstrap.css'; + +import { DATA } from './data'; + +export default function $(ClassName)() { + const title = '$(name)'; + + const pivotConfiguration = { + columns: [ + { + memberName: 'Product', + memberFunction: (data: any) => data.Product.Name, + enabled: true + } + ], + rows: [ + { + memberName: 'Seller', + memberFunction: (data: any) => data.Seller.Name, + enabled: true + } + ], + values: [ + { + member: 'NumberOfUnits', + aggregate: { + aggregatorName: 'SUM', + key: 'sum', + label: 'Sum' + }, + enabled: true + } + ], + filters: null + }; + + return ( +
+

{title}

+

+ Basic IgrPivotGrid component.
+ You can read more about configuring the IgrPivotGrid component in the  + + official documentation + . +

+
+ +
+
+ ); +} diff --git a/packages/cli/templates/react/igr-ts/pivot-grid/basic/files/src/app/__path__/style.module.css b/packages/cli/templates/react/igr-ts/pivot-grid/basic/files/src/app/__path__/style.module.css new file mode 100644 index 000000000..8797056de --- /dev/null +++ b/packages/cli/templates/react/igr-ts/pivot-grid/basic/files/src/app/__path__/style.module.css @@ -0,0 +1,27 @@ +:local(.page) { + width: 100%; + margin-top: 40px; + padding: 0 48px; + display: flex; + flex-direction: column; + align-items: center; +} + +:local(.title) { + color: rgb(0, 153, 255); + text-align: center; + font-size: 2.5rem; + font-weight: 600; +} + +:local(.subtitle) { + text-align: center; + margin-bottom: 32px; + margin-top: 16px; + font-size: 14px; +} + +:local(.grid) { + width: 100%; + max-width: 1200px; +} diff --git a/packages/cli/templates/react/igr-ts/pivot-grid/basic/index.ts b/packages/cli/templates/react/igr-ts/pivot-grid/basic/index.ts new file mode 100644 index 000000000..78f46cd92 --- /dev/null +++ b/packages/cli/templates/react/igr-ts/pivot-grid/basic/index.ts @@ -0,0 +1,28 @@ +import { IgniteUIForReactTemplate } from "../../../../../lib/templates/IgniteUIForReactTemplate"; +import { IGNITEUI_REACT_GRIDS_PACKAGE } from "../../constants"; +import * as path from "path"; + +const SHARED_DATA_ROOT = path.join(__dirname, "../../../../../shared-data"); + +class PivotGridTemplate extends IgniteUIForReactTemplate { + constructor() { + super(__dirname); + this.id = "pivot-grid"; + this.name = "Pivot Grid"; + this.widget = "igPivotGrid"; + this.description = "IgrPivotGrid template for React"; + this.projectType = "igr-ts"; + this.components = ["Pivot Grid"]; + this.controlGroup = "Data Grids"; + this.packages = [IGNITEUI_REACT_GRIDS_PACKAGE]; + this.hasExtraConfiguration = false; + } + + public get templatePaths(): string[] { + return [ + ...super.templatePaths, + path.join(SHARED_DATA_ROOT, "pivot-grid", "files") + ]; + } +} +module.exports = new PivotGridTemplate(); diff --git a/packages/cli/templates/react/igr-ts/pivot-grid/index.ts b/packages/cli/templates/react/igr-ts/pivot-grid/index.ts new file mode 100644 index 000000000..e3c37ca8b --- /dev/null +++ b/packages/cli/templates/react/igr-ts/pivot-grid/index.ts @@ -0,0 +1,11 @@ +import { BaseComponent } from "@igniteui/cli-core"; + +class IgrTsPivotGridComponent extends BaseComponent { + constructor() { + super(__dirname); + this.name = "Pivot Grid"; + this.group = "Grids & Lists"; + this.description = "IgrPivotGrid component for React"; + } +} +module.exports = new IgrTsPivotGridComponent(); diff --git a/packages/cli/templates/react/igr-ts/projects/side-nav-auth/files/src/app/app.tsx b/packages/cli/templates/react/igr-ts/projects/side-nav-auth/files/src/app/app.tsx index 4bca942fa..ee9884b43 100644 --- a/packages/cli/templates/react/igr-ts/projects/side-nav-auth/files/src/app/app.tsx +++ b/packages/cli/templates/react/igr-ts/projects/side-nav-auth/files/src/app/app.tsx @@ -60,8 +60,10 @@ function AppContent() { return () => mediaQuery.removeEventListener("change", updateDrawerState); }, []); + const toAbsPath = (p: string) => p.startsWith('/') ? p : `/${p}`; + const handleRouteClick = (path: string) => { - navigate(path); + navigate(toAbsPath(path)); if (window.matchMedia("(max-width: 1024px)").matches) { setDrawerOpen(false); @@ -92,7 +94,7 @@ function AppContent() { {visibleRoutes.map((route) => ( handleRouteClick(route.path)} > {route.text} diff --git a/packages/cli/templates/react/igr-ts/projects/side-nav-mini-auth/files/src/app/app.tsx b/packages/cli/templates/react/igr-ts/projects/side-nav-mini-auth/files/src/app/app.tsx index 94cc0a76c..a6a2aeace 100644 --- a/packages/cli/templates/react/igr-ts/projects/side-nav-mini-auth/files/src/app/app.tsx +++ b/packages/cli/templates/react/igr-ts/projects/side-nav-mini-auth/files/src/app/app.tsx @@ -36,6 +36,7 @@ function AppContent() { const navigate = useNavigate(); const location = useLocation(); const { currentUser } = useAuth(); + const toAbsPath = (p: string) => p.startsWith('/') ? p : `/${p}`; const navRoutes = useMemo(() => routes.filter((r) => { if (!r.text) return false; @@ -71,14 +72,14 @@ function AppContent() { {navRoutes.map((route) => ( navigate(route.path)} + active={location.pathname === toAbsPath(route.path)} + onClick={() => navigate(toAbsPath(route.path))} > {route.text} diff --git a/packages/cli/templates/react/igr-ts/projects/side-nav-mini/files/src/app/app.tsx b/packages/cli/templates/react/igr-ts/projects/side-nav-mini/files/src/app/app.tsx index 6a5c3eed2..ecc17f974 100644 --- a/packages/cli/templates/react/igr-ts/projects/side-nav-mini/files/src/app/app.tsx +++ b/packages/cli/templates/react/igr-ts/projects/side-nav-mini/files/src/app/app.tsx @@ -32,6 +32,7 @@ export default function App() { const [drawerOpen, setDrawerOpen] = useState(true); const navigate = useNavigate(); const location = useLocation(); + const toAbsPath = (p: string) => p.startsWith('/') ? p : `/${p}`; useEffect(() => { const mq = window.matchMedia('(min-width: 1025px)'); @@ -59,14 +60,14 @@ export default function App() { {navRoutes.map((route) => ( navigate(route.path)} + active={location.pathname === toAbsPath(route.path)} + onClick={() => navigate(toAbsPath(route.path))} > {route.text} diff --git a/packages/cli/templates/react/igr-ts/projects/side-nav/files/src/app/app.tsx b/packages/cli/templates/react/igr-ts/projects/side-nav/files/src/app/app.tsx index 406cc84bb..ad87730ce 100644 --- a/packages/cli/templates/react/igr-ts/projects/side-nav/files/src/app/app.tsx +++ b/packages/cli/templates/react/igr-ts/projects/side-nav/files/src/app/app.tsx @@ -50,8 +50,10 @@ export default function App() { return () => mediaQuery.removeEventListener("change", updateDrawerState); }, []); + const toAbsPath = (p: string) => p.startsWith('/') ? p : `/${p}`; + const handleRouteClick = (path: string) => { - navigate(path); + navigate(toAbsPath(path)); if (window.matchMedia("(max-width: 1024px)").matches) { setDrawerOpen(false); @@ -80,7 +82,7 @@ export default function App() { {visibleRoutes.map((route) => ( handleRouteClick(route.path)} > {route.text} diff --git a/packages/cli/templates/react/igr-ts/tree-grid/basic/files/src/app/__path__/__filePrefix__.test.tsx b/packages/cli/templates/react/igr-ts/tree-grid/basic/files/src/app/__path__/__filePrefix__.test.tsx new file mode 100644 index 000000000..854681a3a --- /dev/null +++ b/packages/cli/templates/react/igr-ts/tree-grid/basic/files/src/app/__path__/__filePrefix__.test.tsx @@ -0,0 +1,13 @@ +import { beforeAll, expect, test } from 'vitest'; +import { render } from '@testing-library/react'; +import $(ClassName) from './$(path)'; +import { setupTestMocks } from '../../setupTests'; + +beforeAll(() => { + setupTestMocks(); +}) + +test('renders $(ClassName) component', () => { + const wrapper = render(<$(ClassName) />); + expect(wrapper).toBeTruthy(); +}); diff --git a/packages/cli/templates/react/igr-ts/tree-grid/basic/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/tree-grid/basic/files/src/app/__path__/__filePrefix__.tsx new file mode 100644 index 000000000..b3cc5feac --- /dev/null +++ b/packages/cli/templates/react/igr-ts/tree-grid/basic/files/src/app/__path__/__filePrefix__.tsx @@ -0,0 +1,30 @@ +import style from './style.module.css'; +import { IgrTreeGrid, IgrColumn } from 'igniteui-react-grids'; +import 'igniteui-react-grids/grids/themes/light/bootstrap.css'; + +import { EMPLOYEE_DATA } from './data'; + +export default function $(ClassName)() { + const title = '$(name)'; + + return ( +
+

{title}

+

+ IgrTreeGrid component displaying hierarchical data using a child collection.
+ You can read more about configuring the IgrTreeGrid component in the  + + official documentation + . +

+
+ + + + + + +
+
+ ); +} diff --git a/packages/cli/templates/react/igr-ts/tree-grid/basic/files/src/app/__path__/style.module.css b/packages/cli/templates/react/igr-ts/tree-grid/basic/files/src/app/__path__/style.module.css new file mode 100644 index 000000000..8797056de --- /dev/null +++ b/packages/cli/templates/react/igr-ts/tree-grid/basic/files/src/app/__path__/style.module.css @@ -0,0 +1,27 @@ +:local(.page) { + width: 100%; + margin-top: 40px; + padding: 0 48px; + display: flex; + flex-direction: column; + align-items: center; +} + +:local(.title) { + color: rgb(0, 153, 255); + text-align: center; + font-size: 2.5rem; + font-weight: 600; +} + +:local(.subtitle) { + text-align: center; + margin-bottom: 32px; + margin-top: 16px; + font-size: 14px; +} + +:local(.grid) { + width: 100%; + max-width: 1200px; +} diff --git a/packages/cli/templates/react/igr-ts/tree-grid/basic/index.ts b/packages/cli/templates/react/igr-ts/tree-grid/basic/index.ts new file mode 100644 index 000000000..fb6f7d058 --- /dev/null +++ b/packages/cli/templates/react/igr-ts/tree-grid/basic/index.ts @@ -0,0 +1,28 @@ +import { IgniteUIForReactTemplate } from "../../../../../lib/templates/IgniteUIForReactTemplate"; +import { IGNITEUI_REACT_GRIDS_PACKAGE } from "../../constants"; +import * as path from "path"; + +const SHARED_DATA_ROOT = path.join(__dirname, "../../../../../shared-data"); + +class TreeGridTemplate extends IgniteUIForReactTemplate { + constructor() { + super(__dirname); + this.id = "tree-grid"; + this.name = "Tree Grid"; + this.widget = "igTreeGrid"; + this.description = "IgrTreeGrid template for React"; + this.projectType = "igr-ts"; + this.components = ["Tree Grid"]; + this.controlGroup = "Data Grids"; + this.packages = [IGNITEUI_REACT_GRIDS_PACKAGE]; + this.hasExtraConfiguration = false; + } + + public get templatePaths(): string[] { + return [ + ...super.templatePaths, + path.join(SHARED_DATA_ROOT, "tree-grid", "files") + ]; + } +} +module.exports = new TreeGridTemplate(); diff --git a/packages/cli/templates/react/igr-ts/tree-grid/index.ts b/packages/cli/templates/react/igr-ts/tree-grid/index.ts new file mode 100644 index 000000000..0c1f1d1f3 --- /dev/null +++ b/packages/cli/templates/react/igr-ts/tree-grid/index.ts @@ -0,0 +1,11 @@ +import { BaseComponent } from "@igniteui/cli-core"; + +class IgrTsTreeGridComponent extends BaseComponent { + constructor() { + super(__dirname); + this.name = "Tree Grid"; + this.group = "Grids & Lists"; + this.description = "IgrTreeGrid component for React"; + } +} +module.exports = new IgrTsTreeGridComponent(); diff --git a/packages/cli/templates/webcomponents/igc-ts/grid/default/files/src/app/__path__/__filePrefix__.ts b/packages/cli/templates/webcomponents/igc-ts/grid/default/files/src/app/__path__/__filePrefix__.ts index e3bf9188d..0b4b79a5c 100644 --- a/packages/cli/templates/webcomponents/igc-ts/grid/default/files/src/app/__path__/__filePrefix__.ts +++ b/packages/cli/templates/webcomponents/igc-ts/grid/default/files/src/app/__path__/__filePrefix__.ts @@ -1,76 +1,89 @@ import { html, css, LitElement } from 'lit'; import { customElement, state } from 'lit/decorators.js'; -import { IgcGridComponent, type IgcGroupingExpression, SortingDirection } from 'igniteui-webcomponents-grids'; +import { IgcGridComponent } from 'igniteui-webcomponents-grids'; import gridThemeLightMaterial from 'igniteui-webcomponents-grids/grids/themes/light/material.css?inline' +import { employeesData, type Employee } from './data.js'; + IgcGridComponent.register(); @customElement('app-$(path)') export default class $(ClassName) extends LitElement { static styles = css` :host { - height: 100%; - margin: 0px; - padding-right: 20px; - width: calc(100% - 600px); + display: block; + width: 100%; } - igc-grid img { - object-fit: contain; - height: 100%; + + .page { width: 100%; + margin-top: 40px; + padding: 0 48px; + box-sizing: border-box; + display: flex; + flex-direction: column; + align-items: center; } - `; - @state() - data: any[] = [{ - country: 'USA', - countryFlag: 'https://static.infragistics.com/xplatform/images/flags/USA.png', - margin: 0.03, - orderDate: new Date(2021, 4, 3), - orderItems: 7, - orderValue: 500, - productID: 1001, - productName: 'Patriot Memory', - productPrice: 2000, - status: 'Shipped', - }, - { - country: 'Croatia', - countryFlag: 'https://static.infragistics.com/xplatform/images/flags/Croatia.png', - margin: 0.05, - orderDate: new Date(2021, 1, 10), - orderItems: 11, - orderValue: 760, - productID: 1002, - productName: 'Asus GPU', - productPrice: 3000, - status: 'Packing', - }]; + .title { + color: rgb(0, 153, 255); + text-align: center; + font-size: 2.5rem; + font-weight: 600; + margin-top: 0; + margin-bottom: 0; + } + + .subtitle { + text-align: center; + margin-bottom: 32px; + margin-top: 16px; + font-size: 14px; + } + + .subtitle a { + color: rgb(0, 153, 255); + } + + .grid-wrapper { + width: 100%; + max-width: 1200px; + } + `; @state() - groupingExpressions: IgcGroupingExpression[] = [ - { fieldName: 'status', dir: SortingDirection.Desc }, - ]; + data: Employee[] = employeesData; render() { return html` - - - - - - - - - - +
+

$(name)

+

+ IgcGrid component with auto generated columns and local data.
+ You can read more about configuring the IgcGrid component in the + + official documentation + . +

+
+ + + + + + + + + +
+
`; } } diff --git a/packages/cli/templates/webcomponents/igc-ts/grid/default/index.ts b/packages/cli/templates/webcomponents/igc-ts/grid/default/index.ts index 6c502014c..d3783af52 100644 --- a/packages/cli/templates/webcomponents/igc-ts/grid/default/index.ts +++ b/packages/cli/templates/webcomponents/igc-ts/grid/default/index.ts @@ -1,16 +1,26 @@ import { IgniteUIForWebComponentsTemplate } from "../../../../../lib/templates/IgniteUIForWebComponentsTemplate"; +import * as path from "path"; + +const SHARED_DATA_ROOT = path.join(__dirname, "../../../../../shared-data"); class IgcGridTemplate extends IgniteUIForWebComponentsTemplate { - constructor() { - super(__dirname); - this.components = ["Grid"]; - this.controlGroup = "Grids & Lists"; - this.listInComponentTemplates = true; - this.id = "grid"; - this.projectType = "igc-ts"; - this.name = "Grid"; - this.description = "IgcGrid with local data"; - this.packages = [ "igniteui-webcomponents-grids@~7.1.0" ]; - } + constructor() { + super(__dirname); + this.components = ["Grid"]; + this.controlGroup = "Grids & Lists"; + this.listInComponentTemplates = true; + this.id = "grid"; + this.projectType = "igc-ts"; + this.name = "Grid"; + this.description = "IgcGrid with local data"; + this.packages = [ "igniteui-webcomponents-grids@~7.1.0" ]; + } + + public get templatePaths(): string[] { + return [ + ...super.templatePaths, + path.join(SHARED_DATA_ROOT, "grid", "files") + ]; + } } module.exports = new IgcGridTemplate(); diff --git a/packages/cli/templates/webcomponents/igc-ts/hierarchical-grid/basic/files/src/app/__path__/__filePrefix__.test.ts b/packages/cli/templates/webcomponents/igc-ts/hierarchical-grid/basic/files/src/app/__path__/__filePrefix__.test.ts new file mode 100644 index 000000000..004c11844 --- /dev/null +++ b/packages/cli/templates/webcomponents/igc-ts/hierarchical-grid/basic/files/src/app/__path__/__filePrefix__.test.ts @@ -0,0 +1,9 @@ +import { describe, it, expect } from 'vitest'; +import $(ClassName) from './$(path).js'; + +describe('IgcHierarchicalGridComponent', () => { + it(' is an instance of $(ClassName)', async () => { + const element = document.createElement('app-$(path)'); + expect(element).to.be.instanceOf($(ClassName)); + }); +}); diff --git a/packages/cli/templates/webcomponents/igc-ts/hierarchical-grid/basic/files/src/app/__path__/__filePrefix__.ts b/packages/cli/templates/webcomponents/igc-ts/hierarchical-grid/basic/files/src/app/__path__/__filePrefix__.ts new file mode 100644 index 000000000..cafece423 --- /dev/null +++ b/packages/cli/templates/webcomponents/igc-ts/hierarchical-grid/basic/files/src/app/__path__/__filePrefix__.ts @@ -0,0 +1,100 @@ +import { html, css, LitElement } from 'lit'; +import { customElement, state } from 'lit/decorators.js'; +import { IgcHierarchicalGridComponent, IgcRowIslandComponent } from 'igniteui-webcomponents-grids'; +import { ARTISTS, type Artist } from './data.js'; + +import gridTheme from 'igniteui-webcomponents-grids/grids/themes/light/material.css?inline'; + +IgcHierarchicalGridComponent.register(); +IgcRowIslandComponent.register(); + +@customElement('app-$(path)') +export default class $(ClassName) extends LitElement { + static styles = css` + :host { + display: block; + width: 100%; + } + + .page { + width: 100%; + margin-top: 40px; + padding: 0 48px; + box-sizing: border-box; + display: flex; + flex-direction: column; + align-items: center; + } + + .title { + color: rgb(0, 153, 255); + text-align: center; + font-size: 2.5rem; + font-weight: 600; + margin-top: 0; + margin-bottom: 0; + } + + .subtitle { + text-align: center; + margin-bottom: 32px; + margin-top: 16px; + font-size: 14px; + } + + .subtitle a { + color: rgb(0, 153, 255); + } + + .grid-wrapper { + width: 100%; + max-width: 1200px; + } + `; + + @state() + data: Artist[] = ARTISTS; + + render() { + return html` + +
+

$(name)

+

+ IgcHierarchicalGrid with basic configuration.
+ You can read more about configuring the IgcHierarchicalGrid component in the + + official documentation + . +

+
+ + + + + + + + + + + + + + + + + + + +
+
+ `; + } +} diff --git a/packages/cli/templates/webcomponents/igc-ts/hierarchical-grid/basic/index.ts b/packages/cli/templates/webcomponents/igc-ts/hierarchical-grid/basic/index.ts new file mode 100644 index 000000000..10aaa1ab3 --- /dev/null +++ b/packages/cli/templates/webcomponents/igc-ts/hierarchical-grid/basic/index.ts @@ -0,0 +1,26 @@ +import { IgniteUIForWebComponentsTemplate } from "../../../../../lib/templates/IgniteUIForWebComponentsTemplate"; +import * as path from "path"; + +const SHARED_DATA_ROOT = path.join(__dirname, "../../../../../shared-data"); + +class IgcHierarchicalGridTemplate extends IgniteUIForWebComponentsTemplate { + constructor() { + super(__dirname); + this.components = ["Hierarchical Grid"]; + this.controlGroup = "Grids & Lists"; + this.listInComponentTemplates = true; + this.id = "hierarchical-grid"; + this.projectType = "igc-ts"; + this.name = "Hierarchical Grid"; + this.description = "IgcHierarchicalGrid with basic configuration"; + this.packages = [ "igniteui-webcomponents-grids@~7.1.0" ]; + } + + public get templatePaths(): string[] { + return [ + ...super.templatePaths, + path.join(SHARED_DATA_ROOT, "hierarchical-grid", "files") + ]; + } +} +module.exports = new IgcHierarchicalGridTemplate(); diff --git a/packages/cli/templates/webcomponents/igc-ts/hierarchical-grid/index.ts b/packages/cli/templates/webcomponents/igc-ts/hierarchical-grid/index.ts new file mode 100644 index 000000000..a1a035e4a --- /dev/null +++ b/packages/cli/templates/webcomponents/igc-ts/hierarchical-grid/index.ts @@ -0,0 +1,11 @@ +import { BaseComponent } from "@igniteui/cli-core"; + +class IgcHierarchicalGridComponent extends BaseComponent { + constructor() { + super(__dirname); + this.name = "Hierarchical Grid"; + this.group = "Grids & Lists"; + this.description = "pick from different hierarchical grid views"; + } +} +module.exports = new IgcHierarchicalGridComponent(); diff --git a/packages/cli/templates/webcomponents/igc-ts/pivot-grid/basic/files/src/app/__path__/__filePrefix__.test.ts b/packages/cli/templates/webcomponents/igc-ts/pivot-grid/basic/files/src/app/__path__/__filePrefix__.test.ts new file mode 100644 index 000000000..5eae10f3f --- /dev/null +++ b/packages/cli/templates/webcomponents/igc-ts/pivot-grid/basic/files/src/app/__path__/__filePrefix__.test.ts @@ -0,0 +1,9 @@ +import { describe, it, expect } from 'vitest'; +import $(ClassName) from './$(path).js'; + +describe('IgcPivotGridComponent', () => { + it(' is an instance of $(ClassName)', async () => { + const element = document.createElement('app-$(path)'); + expect(element).to.be.instanceOf($(ClassName)); + }); +}); diff --git a/packages/cli/templates/webcomponents/igc-ts/pivot-grid/basic/files/src/app/__path__/__filePrefix__.ts b/packages/cli/templates/webcomponents/igc-ts/pivot-grid/basic/files/src/app/__path__/__filePrefix__.ts new file mode 100644 index 000000000..a1033c718 --- /dev/null +++ b/packages/cli/templates/webcomponents/igc-ts/pivot-grid/basic/files/src/app/__path__/__filePrefix__.ts @@ -0,0 +1,113 @@ +import { html, css, LitElement } from 'lit'; +import { customElement, state } from 'lit/decorators.js'; +import { + IgcPivotGridComponent, + type IgcPivotConfiguration +} from 'igniteui-webcomponents-grids'; +import { DATA } from './data.js'; + +import gridTheme from 'igniteui-webcomponents-grids/grids/themes/light/material.css?inline'; + +IgcPivotGridComponent.register(); + +@customElement('app-$(path)') +export default class $(ClassName) extends LitElement { + static styles = css` + :host { + display: block; + width: 100%; + } + + .page { + width: 100%; + margin-top: 40px; + padding: 0 48px; + box-sizing: border-box; + display: flex; + flex-direction: column; + align-items: center; + } + + .title { + color: rgb(0, 153, 255); + text-align: center; + font-size: 2.5rem; + font-weight: 600; + margin-top: 0; + margin-bottom: 0; + } + + .subtitle { + text-align: center; + margin-bottom: 32px; + margin-top: 16px; + font-size: 14px; + } + + .subtitle a { + color: rgb(0, 153, 255); + } + + .grid-wrapper { + width: 100%; + max-width: 1200px; + } + `; + + @state() + data: any[] = DATA; + + pivotConfig: IgcPivotConfiguration = { + columns: [ + { + memberName: 'Product', + memberFunction: (data: any) => data.Product.Name, + enabled: true + } + ], + rows: [ + { + memberName: 'Seller', + memberFunction: (data: any) => data.Seller.Name, + enabled: true + } + ], + values: [ + { + member: 'NumberOfUnits', + aggregate: { + aggregatorName: 'SUM' as const, + key: 'sum', + label: 'Sum' + }, + enabled: true + } + ], + filters: null + }; + + render() { + return html` + +
+

$(name)

+

+ Basic IgcPivotGrid component.
+ You can read more about configuring the IgcPivotGrid component in the + + official documentation + . +

+
+ +
+
+ `; + } +} diff --git a/packages/cli/templates/webcomponents/igc-ts/pivot-grid/basic/index.ts b/packages/cli/templates/webcomponents/igc-ts/pivot-grid/basic/index.ts new file mode 100644 index 000000000..b908f5d16 --- /dev/null +++ b/packages/cli/templates/webcomponents/igc-ts/pivot-grid/basic/index.ts @@ -0,0 +1,26 @@ +import { IgniteUIForWebComponentsTemplate } from "../../../../../lib/templates/IgniteUIForWebComponentsTemplate"; +import * as path from "path"; + +const SHARED_DATA_ROOT = path.join(__dirname, "../../../../../shared-data"); + +class IgcPivotGridTemplate extends IgniteUIForWebComponentsTemplate { + constructor() { + super(__dirname); + this.components = ["Pivot Grid"]; + this.controlGroup = "Grids & Lists"; + this.listInComponentTemplates = true; + this.id = "pivot-grid"; + this.projectType = "igc-ts"; + this.name = "Pivot Grid"; + this.description = "Basic IgcPivotGrid component"; + this.packages = [ "igniteui-webcomponents-grids@~7.1.0" ]; + } + + public get templatePaths(): string[] { + return [ + ...super.templatePaths, + path.join(SHARED_DATA_ROOT, "pivot-grid", "files") + ]; + } +} +module.exports = new IgcPivotGridTemplate(); diff --git a/packages/cli/templates/webcomponents/igc-ts/pivot-grid/index.ts b/packages/cli/templates/webcomponents/igc-ts/pivot-grid/index.ts new file mode 100644 index 000000000..5ed2c3c91 --- /dev/null +++ b/packages/cli/templates/webcomponents/igc-ts/pivot-grid/index.ts @@ -0,0 +1,11 @@ +import { BaseComponent } from "@igniteui/cli-core"; + +class IgcPivotGridComponent extends BaseComponent { + constructor() { + super(__dirname); + this.name = "Pivot Grid"; + this.group = "Grids & Lists"; + this.description = "pick from different pivot grid views"; + } +} +module.exports = new IgcPivotGridComponent(); diff --git a/packages/cli/templates/webcomponents/igc-ts/projects/_base/files/index.html b/packages/cli/templates/webcomponents/igc-ts/projects/_base/files/index.html index 0ddbd388a..b0470b8bd 100644 --- a/packages/cli/templates/webcomponents/igc-ts/projects/_base/files/index.html +++ b/packages/cli/templates/webcomponents/igc-ts/projects/_base/files/index.html @@ -5,6 +5,7 @@ <%=ApplicationTitle%> + diff --git a/packages/cli/templates/webcomponents/igc-ts/projects/_base_with_home/files/index.html b/packages/cli/templates/webcomponents/igc-ts/projects/_base_with_home/files/index.html index c759abc08..1548f06fb 100644 --- a/packages/cli/templates/webcomponents/igc-ts/projects/_base_with_home/files/index.html +++ b/packages/cli/templates/webcomponents/igc-ts/projects/_base_with_home/files/index.html @@ -8,6 +8,7 @@ Ignite UI for Web Components + diff --git a/packages/cli/templates/webcomponents/igc-ts/projects/side-nav-auth/files/index.html b/packages/cli/templates/webcomponents/igc-ts/projects/side-nav-auth/files/index.html index 890fe862f..19000e30d 100644 --- a/packages/cli/templates/webcomponents/igc-ts/projects/side-nav-auth/files/index.html +++ b/packages/cli/templates/webcomponents/igc-ts/projects/side-nav-auth/files/index.html @@ -9,6 +9,7 @@ + diff --git a/packages/cli/templates/webcomponents/igc-ts/projects/side-nav-auth/files/src/app/app.ts b/packages/cli/templates/webcomponents/igc-ts/projects/side-nav-auth/files/src/app/app.ts index ce02e1fef..3b0d9f503 100644 --- a/packages/cli/templates/webcomponents/igc-ts/projects/side-nav-auth/files/src/app/app.ts +++ b/packages/cli/templates/webcomponents/igc-ts/projects/side-nav-auth/files/src/app/app.ts @@ -176,7 +176,7 @@ export default class App extends LitElement { > ${visibleRoutes.map((route) => html` this.navigate(route.path)} > { this.drawerOpen = !this.drawerOpen; }; private navigate(path: string) { - this.currentPath = path; - Router.go(path); + const targetPath = this.toAbsPath(path); + + this.currentPath = targetPath; + Router.go(targetPath); if (!this.mediaQuery?.matches) { this.drawerOpen = false; diff --git a/packages/cli/templates/webcomponents/igc-ts/projects/side-nav-mini-auth/files/src/app/app.ts b/packages/cli/templates/webcomponents/igc-ts/projects/side-nav-mini-auth/files/src/app/app.ts index eacbec635..9f48cc336 100644 --- a/packages/cli/templates/webcomponents/igc-ts/projects/side-nav-mini-auth/files/src/app/app.ts +++ b/packages/cli/templates/webcomponents/igc-ts/projects/side-nav-mini-auth/files/src/app/app.ts @@ -192,13 +192,14 @@ export default class App extends LitElement { > ${visibleRoutes.map((route) => html` this.navigate(route.path)} > ${route.name} @@ -234,13 +235,19 @@ export default class App extends LitElement { router.setRoutes(routes); } + private toAbsPath(p: string) { + return p.startsWith('/') ? p : '/' + p; + } + private toggleDrawer = () => { this.drawerOpen = !this.drawerOpen; }; private navigate(path: string) { - this.currentPath = path; - Router.go(path); + const targetPath = this.toAbsPath(path); + + this.currentPath = targetPath; + Router.go(targetPath); } private updateDrawerState = () => { diff --git a/packages/cli/templates/webcomponents/igc-ts/projects/side-nav-mini/files/src/app/app.ts b/packages/cli/templates/webcomponents/igc-ts/projects/side-nav-mini/files/src/app/app.ts index 172eaa16f..df8915e24 100644 --- a/packages/cli/templates/webcomponents/igc-ts/projects/side-nav-mini/files/src/app/app.ts +++ b/packages/cli/templates/webcomponents/igc-ts/projects/side-nav-mini/files/src/app/app.ts @@ -181,13 +181,14 @@ export default class App extends LitElement { > ${visibleRoutes.map((route) => html` this.navigate(route.path)} > ${route.name} @@ -219,13 +220,19 @@ export default class App extends LitElement { router.setRoutes(routes); } + private toAbsPath(p: string) { + return p.startsWith('/') ? p : '/' + p; + } + private toggleDrawer = () => { this.drawerOpen = !this.drawerOpen; }; private navigate(path: string) { - this.currentPath = path; - Router.go(path); + const targetPath = this.toAbsPath(path); + + this.currentPath = targetPath; + Router.go(targetPath); } private updateDrawerState = () => { diff --git a/packages/cli/templates/webcomponents/igc-ts/projects/side-nav/files/src/app/app.ts b/packages/cli/templates/webcomponents/igc-ts/projects/side-nav/files/src/app/app.ts index 45e08088c..e04e34dae 100644 --- a/packages/cli/templates/webcomponents/igc-ts/projects/side-nav/files/src/app/app.ts +++ b/packages/cli/templates/webcomponents/igc-ts/projects/side-nav/files/src/app/app.ts @@ -162,13 +162,14 @@ export default class App extends LitElement { > ${visibleRoutes.map((route) => html` this.navigate(route.path)} > ${route.name} @@ -202,13 +203,19 @@ export default class App extends LitElement { router.setRoutes(routes); } + private toAbsPath(p: string) { + return p.startsWith('/') ? p : '/' + p; + } + private toggleDrawer = () => { this.drawerOpen = !this.drawerOpen; }; private navigate(path: string) { - this.currentPath = path; - Router.go(path); + const targetPath = this.toAbsPath(path); + + this.currentPath = targetPath; + Router.go(targetPath); if (!this.mediaQuery?.matches) { this.drawerOpen = false; diff --git a/packages/cli/templates/webcomponents/igc-ts/tree-grid/basic/files/src/app/__path__/__filePrefix__.test.ts b/packages/cli/templates/webcomponents/igc-ts/tree-grid/basic/files/src/app/__path__/__filePrefix__.test.ts new file mode 100644 index 000000000..70f0f5289 --- /dev/null +++ b/packages/cli/templates/webcomponents/igc-ts/tree-grid/basic/files/src/app/__path__/__filePrefix__.test.ts @@ -0,0 +1,9 @@ +import { describe, it, expect } from 'vitest'; +import $(ClassName) from './$(path).js'; + +describe('IgcTreeGridComponent', () => { + it(' is an instance of $(ClassName)', async () => { + const element = document.createElement('app-$(path)'); + expect(element).to.be.instanceOf($(ClassName)); + }); +}); diff --git a/packages/cli/templates/webcomponents/igc-ts/tree-grid/basic/files/src/app/__path__/__filePrefix__.ts b/packages/cli/templates/webcomponents/igc-ts/tree-grid/basic/files/src/app/__path__/__filePrefix__.ts new file mode 100644 index 000000000..e2b6e9315 --- /dev/null +++ b/packages/cli/templates/webcomponents/igc-ts/tree-grid/basic/files/src/app/__path__/__filePrefix__.ts @@ -0,0 +1,87 @@ +import { html, css, LitElement } from 'lit'; +import { customElement, state } from 'lit/decorators.js'; +import { IgcTreeGridComponent } from 'igniteui-webcomponents-grids'; +import { EMPLOYEE_DATA, type Employee } from './data.js'; + +import gridTheme from 'igniteui-webcomponents-grids/grids/themes/light/material.css?inline'; + +IgcTreeGridComponent.register(); + +@customElement('app-$(path)') +export default class $(ClassName) extends LitElement { + static styles = css` + :host { + display: block; + width: 100%; + } + + .page { + width: 100%; + margin-top: 40px; + padding: 0 48px; + box-sizing: border-box; + display: flex; + flex-direction: column; + align-items: center; + } + + .title { + color: rgb(0, 153, 255); + text-align: center; + font-size: 2.5rem; + font-weight: 600; + margin-top: 0; + margin-bottom: 0; + } + + .subtitle { + text-align: center; + margin-bottom: 32px; + margin-top: 16px; + font-size: 14px; + } + + .subtitle a { + color: rgb(0, 153, 255); + } + + .grid-wrapper { + width: 100%; + max-width: 1200px; + } + `; + + @state() + data: Employee[] = EMPLOYEE_DATA; + + render() { + return html` + +
+

$(name)

+

+ IgcTreeGrid component displaying hierarchical data using a child collection.
+ You can read more about configuring the IgcTreeGrid component in the + + official documentation + . +

+
+ + + + + + +
+
+ `; + } +} diff --git a/packages/cli/templates/webcomponents/igc-ts/tree-grid/basic/index.ts b/packages/cli/templates/webcomponents/igc-ts/tree-grid/basic/index.ts new file mode 100644 index 000000000..3a5679b28 --- /dev/null +++ b/packages/cli/templates/webcomponents/igc-ts/tree-grid/basic/index.ts @@ -0,0 +1,26 @@ +import { IgniteUIForWebComponentsTemplate } from "../../../../../lib/templates/IgniteUIForWebComponentsTemplate"; +import * as path from "path"; + +const SHARED_DATA_ROOT = path.join(__dirname, "../../../../../shared-data"); + +class IgcTreeGridTemplate extends IgniteUIForWebComponentsTemplate { + constructor() { + super(__dirname); + this.components = ["Tree Grid"]; + this.controlGroup = "Grids & Lists"; + this.listInComponentTemplates = true; + this.id = "tree-grid"; + this.projectType = "igc-ts"; + this.name = "Tree Grid"; + this.description = "IgcTreeGrid with hierarchical data"; + this.packages = [ "igniteui-webcomponents-grids@~7.1.0" ]; + } + + public get templatePaths(): string[] { + return [ + ...super.templatePaths, + path.join(SHARED_DATA_ROOT, "tree-grid", "files") + ]; + } +} +module.exports = new IgcTreeGridTemplate(); diff --git a/packages/cli/templates/webcomponents/igc-ts/tree-grid/index.ts b/packages/cli/templates/webcomponents/igc-ts/tree-grid/index.ts new file mode 100644 index 000000000..385cd5190 --- /dev/null +++ b/packages/cli/templates/webcomponents/igc-ts/tree-grid/index.ts @@ -0,0 +1,11 @@ +import { BaseComponent } from "@igniteui/cli-core"; + +class IgcTreeGridComponent extends BaseComponent { + constructor() { + super(__dirname); + this.name = "Tree Grid"; + this.group = "Grids & Lists"; + this.description = "pick from different tree grid views"; + } +} +module.exports = new IgcTreeGridComponent(); diff --git a/packages/igx-templates/igx-ts/grid/default/files/src/app/__path__/__filePrefix__.html b/packages/igx-templates/igx-ts/grid/default/files/src/app/__path__/__filePrefix__.html index dc3a9937d..fbcd33b94 100644 --- a/packages/igx-templates/igx-ts/grid/default/files/src/app/__path__/__filePrefix__.html +++ b/packages/igx-templates/igx-ts/grid/default/files/src/app/__path__/__filePrefix__.html @@ -1,8 +1,13 @@ -

igx-grid component with auto generated columns below and local data.

-

You can read more about configuring the igx-grid component in the - README or the - official documentation. -

- - - +
+

{{ title }}

+

igx-grid component with auto generated columns below and local data.
+ You can read more about configuring the igx-grid component in the + README or the + official documentation. +

+
+ + + +
+
diff --git a/packages/igx-templates/igx-ts/grid/default/files/src/app/__path__/__filePrefix__.scss b/packages/igx-templates/igx-ts/grid/default/files/src/app/__path__/__filePrefix__.scss index e69de29bb..9093386e0 100644 --- a/packages/igx-templates/igx-ts/grid/default/files/src/app/__path__/__filePrefix__.scss +++ b/packages/igx-templates/igx-ts/grid/default/files/src/app/__path__/__filePrefix__.scss @@ -0,0 +1,34 @@ +:host { + width: 100%; +} + +.page { + width: 100%; + margin-top: 40px; + padding: 0 48px; + box-sizing: border-box; + display: flex; + flex-direction: column; + align-items: center; +} + +.title { + color: rgb(0, 153, 255); + text-align: center; + font-size: 2.5rem; + font-weight: 600; + margin-top: 10px; + margin-bottom: 10px; +} + +.subtitle { + text-align: center; + margin-bottom: 32px; + margin-top: 16px; + font-size: 14px; +} + +.grid-wrapper { + width: 100%; + max-width: 1200px; +} diff --git a/packages/igx-templates/igx-ts/grid/default/files/src/app/__path__/__filePrefix__.ts b/packages/igx-templates/igx-ts/grid/default/files/src/app/__path__/__filePrefix__.ts index 4172c1443..c93f96459 100644 --- a/packages/igx-templates/igx-ts/grid/default/files/src/app/__path__/__filePrefix__.ts +++ b/packages/igx-templates/igx-ts/grid/default/files/src/app/__path__/__filePrefix__.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { ColumnType, IgxGridComponent, IgxPaginatorComponent } from '<%=igxPackage%>'; -import { Employee, employeesData } from './localData'; +import { Employee, employeesData } from './data'; @Component({ selector: 'app-<%=filePrefix%>', diff --git a/packages/igx-templates/igx-ts/grid/default/index.ts b/packages/igx-templates/igx-ts/grid/default/index.ts index 288cfa021..e1f74b270 100644 --- a/packages/igx-templates/igx-ts/grid/default/index.ts +++ b/packages/igx-templates/igx-ts/grid/default/index.ts @@ -1,17 +1,27 @@ import { IGNITEUI_ANGULAR_PACKAGE } from "../../../constants"; import { IgniteUIForAngularTemplate } from "../../../IgniteUIForAngularTemplate"; +import * as path from "path"; + +const SHARED_DATA_ROOT = path.join(__dirname, "../../../../cli/shared-data"); class IgxGridTemplate extends IgniteUIForAngularTemplate { - constructor() { - super(__dirname); - this.components = ["Grid"]; - this.controlGroup = "Grids & Lists"; - this.listInComponentTemplates = true; - this.id = "grid"; - this.projectType = "igx-ts"; - this.name = "Grid"; - this.description = "basic IgxGrid"; - this.packages = [IGNITEUI_ANGULAR_PACKAGE]; - } + constructor() { + super(__dirname); + this.components = ["Grid"]; + this.controlGroup = "Grids & Lists"; + this.listInComponentTemplates = true; + this.id = "grid"; + this.projectType = "igx-ts"; + this.name = "Grid"; + this.description = "basic IgxGrid"; + this.packages = [IGNITEUI_ANGULAR_PACKAGE]; + } + + public get templatePaths(): string[] { + return [ + ...super.templatePaths, + path.join(SHARED_DATA_ROOT, "grid", "files") + ]; + } } module.exports = new IgxGridTemplate(); diff --git a/packages/igx-templates/igx-ts/hierarchical-grid/default/files/src/app/__path__/__filePrefix__.html b/packages/igx-templates/igx-ts/hierarchical-grid/default/files/src/app/__path__/__filePrefix__.html index f6df67e94..dae571b16 100644 --- a/packages/igx-templates/igx-ts/hierarchical-grid/default/files/src/app/__path__/__filePrefix__.html +++ b/packages/igx-templates/igx-ts/hierarchical-grid/default/files/src/app/__path__/__filePrefix__.html @@ -1,25 +1,31 @@ -

IgxHierarchicalGrid with basic configuration.

-

You can read more about configuring the igx-hierarchical-gird component in the - README or the - official documentation.

- - - - - - - +
+

{{ title }}

+

IgxHierarchicalGrid with basic configuration.
+ You can read more about configuring the igx-hierarchical-grid component in the + README or the + official documentation. +

+
+ + + + + + + - - - - - - - - - - - - - + + + + + + + + + + + + + +
+
diff --git a/packages/igx-templates/igx-ts/hierarchical-grid/default/files/src/app/__path__/__filePrefix__.scss b/packages/igx-templates/igx-ts/hierarchical-grid/default/files/src/app/__path__/__filePrefix__.scss index e69de29bb..9093386e0 100644 --- a/packages/igx-templates/igx-ts/hierarchical-grid/default/files/src/app/__path__/__filePrefix__.scss +++ b/packages/igx-templates/igx-ts/hierarchical-grid/default/files/src/app/__path__/__filePrefix__.scss @@ -0,0 +1,34 @@ +:host { + width: 100%; +} + +.page { + width: 100%; + margin-top: 40px; + padding: 0 48px; + box-sizing: border-box; + display: flex; + flex-direction: column; + align-items: center; +} + +.title { + color: rgb(0, 153, 255); + text-align: center; + font-size: 2.5rem; + font-weight: 600; + margin-top: 10px; + margin-bottom: 10px; +} + +.subtitle { + text-align: center; + margin-bottom: 32px; + margin-top: 16px; + font-size: 14px; +} + +.grid-wrapper { + width: 100%; + max-width: 1200px; +} diff --git a/packages/igx-templates/igx-ts/hierarchical-grid/default/files/src/app/__path__/__filePrefix__.ts b/packages/igx-templates/igx-ts/hierarchical-grid/default/files/src/app/__path__/__filePrefix__.ts index f6ac8fc4a..ca788ca74 100644 --- a/packages/igx-templates/igx-ts/hierarchical-grid/default/files/src/app/__path__/__filePrefix__.ts +++ b/packages/igx-templates/igx-ts/hierarchical-grid/default/files/src/app/__path__/__filePrefix__.ts @@ -9,5 +9,6 @@ import { IgxHierarchicalGridComponent, IgxColumnComponent, IgxRowIslandComponent imports: [IgxHierarchicalGridComponent, IgxColumnComponent, IgxRowIslandComponent] }) export class <%=ClassName%> { + public title = '<%=name%>'; public localData: Artist[] = ARTISTS; } diff --git a/packages/igx-templates/igx-ts/hierarchical-grid/default/index.ts b/packages/igx-templates/igx-ts/hierarchical-grid/default/index.ts index 6e821f0e2..68170a776 100644 --- a/packages/igx-templates/igx-ts/hierarchical-grid/default/index.ts +++ b/packages/igx-templates/igx-ts/hierarchical-grid/default/index.ts @@ -1,17 +1,27 @@ import { IGNITEUI_ANGULAR_PACKAGE } from "../../../constants"; import { IgniteUIForAngularTemplate } from "../../../IgniteUIForAngularTemplate"; +import * as path from "path"; + +const SHARED_DATA_ROOT = path.join(__dirname, "../../../../cli/shared-data"); class IgxHierarchicalGridTemplate extends IgniteUIForAngularTemplate { - constructor() { - super(__dirname); - this.components = ["Hierarchical Grid"]; - this.controlGroup = "Grids & Lists"; - this.listInComponentTemplates = true; - this.id = "hierarchical-grid"; - this.projectType = "igx-ts"; - this.name = "Hierarchical Grid"; - this.description = "basic IgxHierarchicalGrid"; - this.packages = [IGNITEUI_ANGULAR_PACKAGE]; - } + constructor() { + super(__dirname); + this.components = ["Hierarchical Grid"]; + this.controlGroup = "Grids & Lists"; + this.listInComponentTemplates = true; + this.id = "hierarchical-grid"; + this.projectType = "igx-ts"; + this.name = "Hierarchical Grid"; + this.description = "basic IgxHierarchicalGrid"; + this.packages = [IGNITEUI_ANGULAR_PACKAGE]; + } + + public get templatePaths(): string[] { + return [ + ...super.templatePaths, + path.join(SHARED_DATA_ROOT, "hierarchical-grid", "files") + ]; + } } module.exports = new IgxHierarchicalGridTemplate(); diff --git a/packages/igx-templates/igx-ts/pivot-grid/default/files/src/app/__path__/__filePrefix__.html b/packages/igx-templates/igx-ts/pivot-grid/default/files/src/app/__path__/__filePrefix__.html index be5332c75..2586686a8 100644 --- a/packages/igx-templates/igx-ts/pivot-grid/default/files/src/app/__path__/__filePrefix__.html +++ b/packages/igx-templates/igx-ts/pivot-grid/default/files/src/app/__path__/__filePrefix__.html @@ -1,7 +1,12 @@ -

Basic pivot grid.

-

You can read more about configuring the igx-pivot-grid component in the - official documentation. -

- - +
+

{{ title }}

+

Basic pivot grid.
+ You can read more about configuring the igx-pivot-grid component in the + official documentation. +

+
+ + +
+
diff --git a/packages/igx-templates/igx-ts/pivot-grid/default/files/src/app/__path__/__filePrefix__.scss b/packages/igx-templates/igx-ts/pivot-grid/default/files/src/app/__path__/__filePrefix__.scss index b9bc65ea4..9093386e0 100644 --- a/packages/igx-templates/igx-ts/pivot-grid/default/files/src/app/__path__/__filePrefix__.scss +++ b/packages/igx-templates/igx-ts/pivot-grid/default/files/src/app/__path__/__filePrefix__.scss @@ -1,3 +1,34 @@ :host { width: 100%; } + +.page { + width: 100%; + margin-top: 40px; + padding: 0 48px; + box-sizing: border-box; + display: flex; + flex-direction: column; + align-items: center; +} + +.title { + color: rgb(0, 153, 255); + text-align: center; + font-size: 2.5rem; + font-weight: 600; + margin-top: 10px; + margin-bottom: 10px; +} + +.subtitle { + text-align: center; + margin-bottom: 32px; + margin-top: 16px; + font-size: 14px; +} + +.grid-wrapper { + width: 100%; + max-width: 1200px; +} diff --git a/packages/igx-templates/igx-ts/pivot-grid/default/files/src/app/__path__/__filePrefix__.ts b/packages/igx-templates/igx-ts/pivot-grid/default/files/src/app/__path__/__filePrefix__.ts index fac6a0770..07e6b25da 100644 --- a/packages/igx-templates/igx-ts/pivot-grid/default/files/src/app/__path__/__filePrefix__.ts +++ b/packages/igx-templates/igx-ts/pivot-grid/default/files/src/app/__path__/__filePrefix__.ts @@ -9,6 +9,7 @@ import { IPivotConfiguration, IgxPivotNumericAggregate, IgxPivotGridComponent } imports: [IgxPivotGridComponent] }) export class <%=ClassName%> { + public title = '<%=name%>'; public data = DATA; public pivotConfigHierarchy: IPivotConfiguration = { columns: [ diff --git a/packages/igx-templates/igx-ts/pivot-grid/default/index.ts b/packages/igx-templates/igx-ts/pivot-grid/default/index.ts index 12f47f56e..a183b6d33 100644 --- a/packages/igx-templates/igx-ts/pivot-grid/default/index.ts +++ b/packages/igx-templates/igx-ts/pivot-grid/default/index.ts @@ -1,16 +1,26 @@ import { IGNITEUI_ANGULAR_PACKAGE } from "../../../constants"; import { IgniteUIForAngularTemplate } from "../../../IgniteUIForAngularTemplate"; +import * as path from "path"; + +const SHARED_DATA_ROOT = path.join(__dirname, "../../../../cli/shared-data"); class IgxPivotGridTemplate extends IgniteUIForAngularTemplate { - constructor() { - super(__dirname); - this.components = ["Pivot Grid"]; - this.controlGroup = "Grids & Lists"; - this.listInComponentTemplates = true; - this.id = "pivot-grid"; - this.projectType = "igx-ts"; - this.name = "Pivot Grid"; - this.packages = [IGNITEUI_ANGULAR_PACKAGE]; - } + constructor() { + super(__dirname); + this.components = ["Pivot Grid"]; + this.controlGroup = "Grids & Lists"; + this.listInComponentTemplates = true; + this.id = "pivot-grid"; + this.projectType = "igx-ts"; + this.name = "Pivot Grid"; + this.packages = [IGNITEUI_ANGULAR_PACKAGE]; + } + + public get templatePaths(): string[] { + return [ + ...super.templatePaths, + path.join(SHARED_DATA_ROOT, "pivot-grid", "files") + ]; + } } module.exports = new IgxPivotGridTemplate(); diff --git a/packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/app.routes.ts b/packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/app.routes.ts index 00960a1fb..1460ed4e5 100644 --- a/packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/app.routes.ts +++ b/packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/app.routes.ts @@ -2,9 +2,13 @@ import { Routes } from '@angular/router'; import { Home } from './home/home'; import { AUTH_ROUTES } from './authentication'; import { AUTH_BASE_PATH } from './authentication/services/external-auth-configs'; +import { NotFound } from './error-routing/not-found/not-found'; +import { UncaughtError } from './error-routing/error/uncaught-error'; export const routes: Routes = [ { path: '', redirectTo: '/home', pathMatch: 'full' }, { path: 'home', component: Home, data: { text: 'Home', icon: 'home' } }, - { path: AUTH_BASE_PATH, children: AUTH_ROUTES } + { path: AUTH_BASE_PATH, children: AUTH_ROUTES }, + { path: 'error', component: UncaughtError }, + { path: '**', component: NotFound } ]; diff --git a/packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/app.ts b/packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/app.ts index b038a6168..35c2ee917 100644 --- a/packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/app.ts +++ b/packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/app.ts @@ -42,13 +42,7 @@ export class App implements OnInit { path: string, name: string, icon: string - }[] = [ - { - name: 'Home', - path: '/home', - icon: 'home' - } - ]; + }[] = []; private readonly profileNavLinks: { path: string, @@ -63,9 +57,9 @@ export class App implements OnInit { ]; public get topNavLinks() { - return this.userStore.currentUser - ? [...this.homeNavLinks, ...this.profileNavLinks] - : this.homeNavLinks; + if (!this.userStore.currentUser) return this.homeNavLinks; + const [home, ...rest] = this.homeNavLinks; + return [home, ...this.profileNavLinks, ...rest]; } public navdrawer = viewChild.required(IgxNavigationDrawerComponent); @@ -76,11 +70,11 @@ export class App implements OnInit { constructor() { for (const route of routes) { if (route.path && route.data && route.path.indexOf('*') === -1) { - this.homeNavLinks[0] = { + this.homeNavLinks.push({ name: route.data['text'], path: '/' + route.path, icon: route.data['icon'] || 'home' - }; + }); } } } diff --git a/packages/igx-templates/igx-ts/projects/side-nav-mini-auth/files/src/app/app.ts b/packages/igx-templates/igx-ts/projects/side-nav-mini-auth/files/src/app/app.ts index 89d89f1d7..f67b6c361 100644 --- a/packages/igx-templates/igx-ts/projects/side-nav-mini-auth/files/src/app/app.ts +++ b/packages/igx-templates/igx-ts/projects/side-nav-mini-auth/files/src/app/app.ts @@ -43,18 +43,16 @@ const MINI_BREAKPOINT = 1024; export class App implements OnInit, AfterViewInit { public appTitle = '<%=name%>'; - private readonly homeNavLinks: { path: string; name: string; icon: string }[] = [ - { name: 'Home', path: '/home', icon: 'home' } - ]; + private readonly homeNavLinks: { path: string; name: string; icon: string }[] = []; private readonly profileNavLinks: { path: string; name: string; icon: string }[] = [ { name: 'Profile', path: '/auth/profile', icon: 'account_circle' } ]; public get topNavLinks() { - return this.userStore.currentUser - ? [...this.homeNavLinks, ...this.profileNavLinks] - : this.homeNavLinks; + if (!this.userStore.currentUser) return this.homeNavLinks; + const [home, ...rest] = this.homeNavLinks; + return [home, ...this.profileNavLinks, ...rest]; } public readonly initiallyOpen = window.innerWidth > MINI_BREAKPOINT; @@ -66,11 +64,11 @@ export class App implements OnInit, AfterViewInit { constructor() { for (const route of routes) { if (route.path && route.data && route.path.indexOf('*') === -1) { - this.homeNavLinks[0] = { + this.homeNavLinks.push({ name: route.data['text'], path: '/' + route.path, icon: route.data['icon'] || 'home' - }; + }); } } } diff --git a/packages/igx-templates/igx-ts/tree-grid/tree-grid-custom/files/src/app/__path__/__filePrefix__.html b/packages/igx-templates/igx-ts/tree-grid/tree-grid-custom/files/src/app/__path__/__filePrefix__.html index 4084664b0..c64065c36 100644 --- a/packages/igx-templates/igx-ts/tree-grid/tree-grid-custom/files/src/app/__path__/__filePrefix__.html +++ b/packages/igx-templates/igx-ts/tree-grid/tree-grid-custom/files/src/app/__path__/__filePrefix__.html @@ -1,17 +1,20 @@ -

- <%=description%>
- You can read more about configuring the igx-grid component in the +

+

{{ title }}

+

<%=description%>
+ You can read more about configuring the igx-tree-grid component in the README or the official documentation. -

-<%=selectedFeatures%> - -> - <%=columnPinning%>> - > - > - ><%=additionalMarkup%> - +

+ <%=selectedFeatures%> +
+ > + <%=columnPinning%>> + > + > + ><%=additionalMarkup%> + +
+
diff --git a/packages/igx-templates/igx-ts/tree-grid/tree-grid-custom/files/src/app/__path__/__filePrefix__.scss b/packages/igx-templates/igx-ts/tree-grid/tree-grid-custom/files/src/app/__path__/__filePrefix__.scss index e69de29bb..9093386e0 100644 --- a/packages/igx-templates/igx-ts/tree-grid/tree-grid-custom/files/src/app/__path__/__filePrefix__.scss +++ b/packages/igx-templates/igx-ts/tree-grid/tree-grid-custom/files/src/app/__path__/__filePrefix__.scss @@ -0,0 +1,34 @@ +:host { + width: 100%; +} + +.page { + width: 100%; + margin-top: 40px; + padding: 0 48px; + box-sizing: border-box; + display: flex; + flex-direction: column; + align-items: center; +} + +.title { + color: rgb(0, 153, 255); + text-align: center; + font-size: 2.5rem; + font-weight: 600; + margin-top: 10px; + margin-bottom: 10px; +} + +.subtitle { + text-align: center; + margin-bottom: 32px; + margin-top: 16px; + font-size: 14px; +} + +.grid-wrapper { + width: 100%; + max-width: 1200px; +} diff --git a/packages/igx-templates/igx-ts/tree-grid/tree-grid-custom/files/src/app/__path__/__filePrefix__.ts b/packages/igx-templates/igx-ts/tree-grid/tree-grid-custom/files/src/app/__path__/__filePrefix__.ts index 7803e3c0f..76689deca 100644 --- a/packages/igx-templates/igx-ts/tree-grid/tree-grid-custom/files/src/app/__path__/__filePrefix__.ts +++ b/packages/igx-templates/igx-ts/tree-grid/tree-grid-custom/files/src/app/__path__/__filePrefix__.ts @@ -1,5 +1,5 @@ import { Component, OnInit } from '@angular/core'; -import { Employee, EMPLOYEE_DATA } from './localData'; +import { Employee, EMPLOYEE_DATA } from './data'; @Component({ selector: 'app-<%=filePrefix%>', diff --git a/packages/igx-templates/igx-ts/tree-grid/tree-grid-custom/index.ts b/packages/igx-templates/igx-ts/tree-grid/tree-grid-custom/index.ts index 339017a65..deaf9ebe6 100644 --- a/packages/igx-templates/igx-ts/tree-grid/tree-grid-custom/index.ts +++ b/packages/igx-templates/igx-ts/tree-grid/tree-grid-custom/index.ts @@ -1,5 +1,8 @@ import { ControlExtraConfigType, ControlExtraConfiguration, TemplateDependency } from "@igniteui/cli-core"; import { IgniteUIForAngularTemplate } from "../../../IgniteUIForAngularTemplate"; +import * as path from "path"; + +const SHARED_DATA_ROOT = path.join(__dirname, "../../../../cli/shared-data"); class IgxCustomTreeGridTemplate extends IgniteUIForAngularTemplate { private userExtraConfiguration: {} = {}; @@ -207,5 +210,12 @@ class IgxCustomTreeGridTemplate extends IgniteUIForAngularTemplate { columnFeatures.push(text); columnBoolFeatures.push(text); } + + public get templatePaths(): string[] { + return [ + ...super.templatePaths, + path.join(SHARED_DATA_ROOT, "tree-grid", "files") + ]; + } } module.exports = new IgxCustomTreeGridTemplate();