diff --git a/packages/igx-templates/igx-ts/action-strip/default/files/src/app/__path__/__filePrefix__.html b/packages/igx-templates/igx-ts/action-strip/default/files/src/app/__path__/__filePrefix__.html new file mode 100644 index 000000000..cf0716795 --- /dev/null +++ b/packages/igx-templates/igx-ts/action-strip/default/files/src/app/__path__/__filePrefix__.html @@ -0,0 +1,12 @@ +

igx-action-strip component sample.

+

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

+
+
Hover to reveal actions
+ + + +
diff --git a/packages/igx-templates/igx-ts/action-strip/default/files/src/app/__path__/__filePrefix__.scss b/packages/igx-templates/igx-ts/action-strip/default/files/src/app/__path__/__filePrefix__.scss new file mode 100644 index 000000000..9a567f513 --- /dev/null +++ b/packages/igx-templates/igx-ts/action-strip/default/files/src/app/__path__/__filePrefix__.scss @@ -0,0 +1,14 @@ +.action-strip-container { + position: relative; + width: 320px; + height: 160px; + display: flex; + align-items: center; + justify-content: center; + border: 1px dashed rgba(0, 0, 0, 0.25); + margin: 8px; + + &__placeholder { + color: rgba(0, 0, 0, 0.6); + } +} diff --git a/packages/igx-templates/igx-ts/action-strip/default/files/src/app/__path__/__filePrefix__.spec.ts b/packages/igx-templates/igx-ts/action-strip/default/files/src/app/__path__/__filePrefix__.spec.ts new file mode 100644 index 000000000..af618ae5c --- /dev/null +++ b/packages/igx-templates/igx-ts/action-strip/default/files/src/app/__path__/__filePrefix__.spec.ts @@ -0,0 +1,26 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { NoopAnimationsModule } from '@angular/platform-browser/animations'; +import { <%=ClassName%> } from './<%=filePrefix%>'; +import { IgxActionStripModule } from '<%=igxPackage%>'; + +describe('<%=ClassName%>', () => { + let component: <%=ClassName%>; + let fixture: ComponentFixture<<%=ClassName%>>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [NoopAnimationsModule, IgxActionStripModule, <%=ClassName%>] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(<%=ClassName%>); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/packages/igx-templates/igx-ts/action-strip/default/files/src/app/__path__/__filePrefix__.ts b/packages/igx-templates/igx-ts/action-strip/default/files/src/app/__path__/__filePrefix__.ts new file mode 100644 index 000000000..00bc61387 --- /dev/null +++ b/packages/igx-templates/igx-ts/action-strip/default/files/src/app/__path__/__filePrefix__.ts @@ -0,0 +1,14 @@ +import { Component } from '@angular/core'; +import { IgxActionStripComponent, IgxButtonDirective, IgxIconComponent } from '<%=igxPackage%>'; + +@Component({ + selector: 'app-<%=filePrefix%>', + templateUrl: './<%=filePrefix%>.html', + styleUrl: './<%=filePrefix%>.scss', + imports: [IgxActionStripComponent, IgxButtonDirective, IgxIconComponent], +}) +export class <%=ClassName%> { + public onFavorite(): void { + console.log('favorite clicked'); + } +} diff --git a/packages/igx-templates/igx-ts/action-strip/default/index.ts b/packages/igx-templates/igx-ts/action-strip/default/index.ts new file mode 100644 index 000000000..d313bfb76 --- /dev/null +++ b/packages/igx-templates/igx-ts/action-strip/default/index.ts @@ -0,0 +1,17 @@ +import { IGNITEUI_ANGULAR_PACKAGE } from "../../../constants"; +import { IgniteUIForAngularTemplate } from "../../../IgniteUIForAngularTemplate"; + +class IgxActionStripTemplate extends IgniteUIForAngularTemplate { + constructor() { + super(__dirname); + this.components = ["Action Strip"]; + this.controlGroup = "Interactions"; + this.listInComponentTemplates = true; + this.id = "action-strip"; + this.projectType = "igx-ts"; + this.name = "Action Strip"; + this.description = "Basic IgxActionStrip sample"; + this.packages = [IGNITEUI_ANGULAR_PACKAGE]; + } +} +module.exports = new IgxActionStripTemplate(); diff --git a/packages/igx-templates/igx-ts/action-strip/index.ts b/packages/igx-templates/igx-ts/action-strip/index.ts new file mode 100644 index 000000000..e4ef64168 --- /dev/null +++ b/packages/igx-templates/igx-ts/action-strip/index.ts @@ -0,0 +1,11 @@ +import { BaseComponent } from "@igniteui/cli-core"; + +class IgxActionStripComponent extends BaseComponent { + constructor() { + super(__dirname); + this.name = "Action Strip"; + this.group = "Grids & Lists"; + this.description = "provides a template area with one or more actions overlaid on a container"; + } +} +module.exports = new IgxActionStripComponent(); diff --git a/packages/igx-templates/igx-ts/avatar/default/files/src/app/__path__/__filePrefix__.html b/packages/igx-templates/igx-ts/avatar/default/files/src/app/__path__/__filePrefix__.html new file mode 100644 index 000000000..e9c740222 --- /dev/null +++ b/packages/igx-templates/igx-ts/avatar/default/files/src/app/__path__/__filePrefix__.html @@ -0,0 +1,9 @@ +

igx-avatar component sample.

+

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

+
+ + + +
diff --git a/packages/igx-templates/igx-ts/avatar/default/files/src/app/__path__/__filePrefix__.scss b/packages/igx-templates/igx-ts/avatar/default/files/src/app/__path__/__filePrefix__.scss new file mode 100644 index 000000000..973dd45ca --- /dev/null +++ b/packages/igx-templates/igx-ts/avatar/default/files/src/app/__path__/__filePrefix__.scss @@ -0,0 +1,6 @@ +.avatar-sample { + display: flex; + align-items: center; + gap: 16px; + margin: 8px; +} diff --git a/packages/igx-templates/igx-ts/avatar/default/files/src/app/__path__/__filePrefix__.spec.ts b/packages/igx-templates/igx-ts/avatar/default/files/src/app/__path__/__filePrefix__.spec.ts new file mode 100644 index 000000000..28b7b01d7 --- /dev/null +++ b/packages/igx-templates/igx-ts/avatar/default/files/src/app/__path__/__filePrefix__.spec.ts @@ -0,0 +1,26 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { NoopAnimationsModule } from '@angular/platform-browser/animations'; +import { <%=ClassName%> } from './<%=filePrefix%>'; +import { IgxAvatarModule } from '<%=igxPackage%>'; + +describe('<%=ClassName%>', () => { + let component: <%=ClassName%>; + let fixture: ComponentFixture<<%=ClassName%>>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [NoopAnimationsModule, IgxAvatarModule, <%=ClassName%>] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(<%=ClassName%>); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/packages/igx-templates/igx-ts/avatar/default/files/src/app/__path__/__filePrefix__.ts b/packages/igx-templates/igx-ts/avatar/default/files/src/app/__path__/__filePrefix__.ts new file mode 100644 index 000000000..fc315aca6 --- /dev/null +++ b/packages/igx-templates/igx-ts/avatar/default/files/src/app/__path__/__filePrefix__.ts @@ -0,0 +1,11 @@ +import { Component } from '@angular/core'; +import { IgxAvatarComponent } from '<%=igxPackage%>'; + +@Component({ + selector: 'app-<%=filePrefix%>', + templateUrl: './<%=filePrefix%>.html', + styleUrl: './<%=filePrefix%>.scss', + imports: [IgxAvatarComponent], +}) +export class <%=ClassName%> { +} diff --git a/packages/igx-templates/igx-ts/avatar/default/index.ts b/packages/igx-templates/igx-ts/avatar/default/index.ts new file mode 100644 index 000000000..ed7a4a12b --- /dev/null +++ b/packages/igx-templates/igx-ts/avatar/default/index.ts @@ -0,0 +1,17 @@ +import { IGNITEUI_ANGULAR_PACKAGE } from "../../../constants"; +import { IgniteUIForAngularTemplate } from "../../../IgniteUIForAngularTemplate"; + +class IgxAvatarTemplate extends IgniteUIForAngularTemplate { + constructor() { + super(__dirname); + this.components = ["Avatar"]; + this.controlGroup = "Data Entry & Display"; + this.listInComponentTemplates = true; + this.id = "avatar"; + this.projectType = "igx-ts"; + this.name = "Avatar"; + this.description = "Basic IgxAvatar sample"; + this.packages = [IGNITEUI_ANGULAR_PACKAGE]; + } +} +module.exports = new IgxAvatarTemplate(); diff --git a/packages/igx-templates/igx-ts/avatar/index.ts b/packages/igx-templates/igx-ts/avatar/index.ts new file mode 100644 index 000000000..f78475455 --- /dev/null +++ b/packages/igx-templates/igx-ts/avatar/index.ts @@ -0,0 +1,11 @@ +import { BaseComponent } from "@igniteui/cli-core"; + +class IgxAvatarComponent extends BaseComponent { + constructor() { + super(__dirname); + this.name = "Avatar"; + this.group = "Data Entry & Display"; + this.description = "displays an image, icon or initials to the user"; + } +} +module.exports = new IgxAvatarComponent(); diff --git a/packages/igx-templates/igx-ts/badge/default/files/src/app/__path__/__filePrefix__.html b/packages/igx-templates/igx-ts/badge/default/files/src/app/__path__/__filePrefix__.html new file mode 100644 index 000000000..72f475c1b --- /dev/null +++ b/packages/igx-templates/igx-ts/badge/default/files/src/app/__path__/__filePrefix__.html @@ -0,0 +1,14 @@ +

igx-badge component sample.

+

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

+
+
+ + +
+
+ + +
+
diff --git a/packages/igx-templates/igx-ts/badge/default/files/src/app/__path__/__filePrefix__.scss b/packages/igx-templates/igx-ts/badge/default/files/src/app/__path__/__filePrefix__.scss new file mode 100644 index 000000000..c683e1cf9 --- /dev/null +++ b/packages/igx-templates/igx-ts/badge/default/files/src/app/__path__/__filePrefix__.scss @@ -0,0 +1,16 @@ +.badge-sample { + display: flex; + gap: 24px; + margin: 8px; + + &__item { + position: relative; + display: inline-flex; + + igx-badge { + position: absolute; + top: -4px; + right: -4px; + } + } +} diff --git a/packages/igx-templates/igx-ts/badge/default/files/src/app/__path__/__filePrefix__.spec.ts b/packages/igx-templates/igx-ts/badge/default/files/src/app/__path__/__filePrefix__.spec.ts new file mode 100644 index 000000000..b39e9bf8a --- /dev/null +++ b/packages/igx-templates/igx-ts/badge/default/files/src/app/__path__/__filePrefix__.spec.ts @@ -0,0 +1,26 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { NoopAnimationsModule } from '@angular/platform-browser/animations'; +import { <%=ClassName%> } from './<%=filePrefix%>'; +import { IgxAvatarModule, IgxBadgeModule } from '<%=igxPackage%>'; + +describe('<%=ClassName%>', () => { + let component: <%=ClassName%>; + let fixture: ComponentFixture<<%=ClassName%>>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [NoopAnimationsModule, IgxAvatarModule, IgxBadgeModule, <%=ClassName%>] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(<%=ClassName%>); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/packages/igx-templates/igx-ts/badge/default/files/src/app/__path__/__filePrefix__.ts b/packages/igx-templates/igx-ts/badge/default/files/src/app/__path__/__filePrefix__.ts new file mode 100644 index 000000000..8b79b201f --- /dev/null +++ b/packages/igx-templates/igx-ts/badge/default/files/src/app/__path__/__filePrefix__.ts @@ -0,0 +1,11 @@ +import { Component } from '@angular/core'; +import { IgxAvatarComponent, IgxBadgeComponent } from '<%=igxPackage%>'; + +@Component({ + selector: 'app-<%=filePrefix%>', + templateUrl: './<%=filePrefix%>.html', + styleUrl: './<%=filePrefix%>.scss', + imports: [IgxAvatarComponent, IgxBadgeComponent], +}) +export class <%=ClassName%> { +} diff --git a/packages/igx-templates/igx-ts/badge/default/index.ts b/packages/igx-templates/igx-ts/badge/default/index.ts new file mode 100644 index 000000000..2b5911754 --- /dev/null +++ b/packages/igx-templates/igx-ts/badge/default/index.ts @@ -0,0 +1,17 @@ +import { IGNITEUI_ANGULAR_PACKAGE } from "../../../constants"; +import { IgniteUIForAngularTemplate } from "../../../IgniteUIForAngularTemplate"; + +class IgxBadgeTemplate extends IgniteUIForAngularTemplate { + constructor() { + super(__dirname); + this.components = ["Badge"]; + this.controlGroup = "Data Entry & Display"; + this.listInComponentTemplates = true; + this.id = "badge"; + this.projectType = "igx-ts"; + this.name = "Badge"; + this.description = "Basic IgxBadge sample"; + this.packages = [IGNITEUI_ANGULAR_PACKAGE]; + } +} +module.exports = new IgxBadgeTemplate(); diff --git a/packages/igx-templates/igx-ts/badge/index.ts b/packages/igx-templates/igx-ts/badge/index.ts new file mode 100644 index 000000000..ea25bf505 --- /dev/null +++ b/packages/igx-templates/igx-ts/badge/index.ts @@ -0,0 +1,11 @@ +import { BaseComponent } from "@igniteui/cli-core"; + +class IgxBadgeComponent extends BaseComponent { + constructor() { + super(__dirname); + this.name = "Badge"; + this.group = "Data Entry & Display"; + this.description = "displays visual notifications used to decorate avatars, menus, etc."; + } +} +module.exports = new IgxBadgeComponent(); diff --git a/packages/igx-templates/igx-ts/banner/default/files/src/app/__path__/__filePrefix__.html b/packages/igx-templates/igx-ts/banner/default/files/src/app/__path__/__filePrefix__.html new file mode 100644 index 000000000..d024d3a32 --- /dev/null +++ b/packages/igx-templates/igx-ts/banner/default/files/src/app/__path__/__filePrefix__.html @@ -0,0 +1,11 @@ +

igx-banner component sample.

+

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

+ + + This is the default template's message! + + + + diff --git a/packages/igx-templates/igx-ts/banner/default/files/src/app/__path__/__filePrefix__.scss b/packages/igx-templates/igx-ts/banner/default/files/src/app/__path__/__filePrefix__.scss new file mode 100644 index 000000000..56d5205c0 --- /dev/null +++ b/packages/igx-templates/igx-ts/banner/default/files/src/app/__path__/__filePrefix__.scss @@ -0,0 +1,3 @@ +button { + margin: 8px; +} diff --git a/packages/igx-templates/igx-ts/banner/default/files/src/app/__path__/__filePrefix__.spec.ts b/packages/igx-templates/igx-ts/banner/default/files/src/app/__path__/__filePrefix__.spec.ts new file mode 100644 index 000000000..4d31d2d8e --- /dev/null +++ b/packages/igx-templates/igx-ts/banner/default/files/src/app/__path__/__filePrefix__.spec.ts @@ -0,0 +1,26 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { NoopAnimationsModule } from '@angular/platform-browser/animations'; +import { <%=ClassName%> } from './<%=filePrefix%>'; +import { IgxBannerModule } from '<%=igxPackage%>'; + +describe('<%=ClassName%>', () => { + let component: <%=ClassName%>; + let fixture: ComponentFixture<<%=ClassName%>>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [NoopAnimationsModule, IgxBannerModule, <%=ClassName%>] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(<%=ClassName%>); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/packages/igx-templates/igx-ts/banner/default/files/src/app/__path__/__filePrefix__.ts b/packages/igx-templates/igx-ts/banner/default/files/src/app/__path__/__filePrefix__.ts new file mode 100644 index 000000000..9d75a339d --- /dev/null +++ b/packages/igx-templates/igx-ts/banner/default/files/src/app/__path__/__filePrefix__.ts @@ -0,0 +1,13 @@ +import { Component, ViewChild } from '@angular/core'; +import { IgxBannerComponent, IgxBannerActionsDirective, IgxButtonDirective } from '<%=igxPackage%>'; + +@Component({ + selector: 'app-<%=filePrefix%>', + templateUrl: './<%=filePrefix%>.html', + styleUrl: './<%=filePrefix%>.scss', + imports: [IgxBannerComponent, IgxBannerActionsDirective, IgxButtonDirective], +}) +export class <%=ClassName%> { + @ViewChild(IgxBannerComponent, { static: true }) + public banner!: IgxBannerComponent; +} diff --git a/packages/igx-templates/igx-ts/banner/default/index.ts b/packages/igx-templates/igx-ts/banner/default/index.ts new file mode 100644 index 000000000..6dc7132d2 --- /dev/null +++ b/packages/igx-templates/igx-ts/banner/default/index.ts @@ -0,0 +1,17 @@ +import { IGNITEUI_ANGULAR_PACKAGE } from "../../../constants"; +import { IgniteUIForAngularTemplate } from "../../../IgniteUIForAngularTemplate"; + +class IgxBannerTemplate extends IgniteUIForAngularTemplate { + constructor() { + super(__dirname); + this.components = ["Banner"]; + this.controlGroup = "Interactions"; + this.listInComponentTemplates = true; + this.id = "banner"; + this.projectType = "igx-ts"; + this.name = "Banner"; + this.description = "Basic IgxBanner sample"; + this.packages = [IGNITEUI_ANGULAR_PACKAGE]; + } +} +module.exports = new IgxBannerTemplate(); diff --git a/packages/igx-templates/igx-ts/banner/index.ts b/packages/igx-templates/igx-ts/banner/index.ts new file mode 100644 index 000000000..bc5ce8da0 --- /dev/null +++ b/packages/igx-templates/igx-ts/banner/index.ts @@ -0,0 +1,11 @@ +import { BaseComponent } from "@igniteui/cli-core"; + +class IgxBannerComponent extends BaseComponent { + constructor() { + super(__dirname); + this.name = "Banner"; + this.group = "Interactions"; + this.description = "shows a banner at the full width of the screen above the app content"; + } +} +module.exports = new IgxBannerComponent(); diff --git a/packages/igx-templates/igx-ts/button-group/default/files/src/app/__path__/__filePrefix__.html b/packages/igx-templates/igx-ts/button-group/default/files/src/app/__path__/__filePrefix__.html new file mode 100644 index 000000000..b436f99a8 --- /dev/null +++ b/packages/igx-templates/igx-ts/button-group/default/files/src/app/__path__/__filePrefix__.html @@ -0,0 +1,5 @@ +

igx-buttongroup component sample.

+

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

+ diff --git a/packages/igx-templates/igx-ts/button-group/default/files/src/app/__path__/__filePrefix__.scss b/packages/igx-templates/igx-ts/button-group/default/files/src/app/__path__/__filePrefix__.scss new file mode 100644 index 000000000..051769846 --- /dev/null +++ b/packages/igx-templates/igx-ts/button-group/default/files/src/app/__path__/__filePrefix__.scss @@ -0,0 +1,3 @@ +igx-buttongroup { + margin: 8px; +} diff --git a/packages/igx-templates/igx-ts/button-group/default/files/src/app/__path__/__filePrefix__.spec.ts b/packages/igx-templates/igx-ts/button-group/default/files/src/app/__path__/__filePrefix__.spec.ts new file mode 100644 index 000000000..381a90c58 --- /dev/null +++ b/packages/igx-templates/igx-ts/button-group/default/files/src/app/__path__/__filePrefix__.spec.ts @@ -0,0 +1,26 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { NoopAnimationsModule } from '@angular/platform-browser/animations'; +import { <%=ClassName%> } from './<%=filePrefix%>'; +import { IgxButtonGroupModule } from '<%=igxPackage%>'; + +describe('<%=ClassName%>', () => { + let component: <%=ClassName%>; + let fixture: ComponentFixture<<%=ClassName%>>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [NoopAnimationsModule, IgxButtonGroupModule, <%=ClassName%>] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(<%=ClassName%>); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/packages/igx-templates/igx-ts/button-group/default/files/src/app/__path__/__filePrefix__.ts b/packages/igx-templates/igx-ts/button-group/default/files/src/app/__path__/__filePrefix__.ts new file mode 100644 index 000000000..0e47bcc1d --- /dev/null +++ b/packages/igx-templates/igx-ts/button-group/default/files/src/app/__path__/__filePrefix__.ts @@ -0,0 +1,16 @@ +import { Component } from '@angular/core'; +import { IgxButtonGroupComponent } from '<%=igxPackage%>'; + +@Component({ + selector: 'app-<%=filePrefix%>', + templateUrl: './<%=filePrefix%>.html', + styleUrl: './<%=filePrefix%>.scss', + imports: [IgxButtonGroupComponent], +}) +export class <%=ClassName%> { + public fontOptions = [ + { icon: 'format_bold', selected: false }, + { icon: 'format_italic', selected: false }, + { icon: 'format_underlined', selected: false } + ]; +} diff --git a/packages/igx-templates/igx-ts/button-group/default/index.ts b/packages/igx-templates/igx-ts/button-group/default/index.ts new file mode 100644 index 000000000..4cf0b010f --- /dev/null +++ b/packages/igx-templates/igx-ts/button-group/default/index.ts @@ -0,0 +1,17 @@ +import { IGNITEUI_ANGULAR_PACKAGE } from "../../../constants"; +import { IgniteUIForAngularTemplate } from "../../../IgniteUIForAngularTemplate"; + +class IgxButtonGroupTemplate extends IgniteUIForAngularTemplate { + constructor() { + super(__dirname); + this.components = ["Button Group"]; + this.controlGroup = "Data Entry & Display"; + this.listInComponentTemplates = true; + this.id = "button-group"; + this.projectType = "igx-ts"; + this.name = "Button Group"; + this.description = "Basic IgxButtonGroup sample"; + this.packages = [IGNITEUI_ANGULAR_PACKAGE]; + } +} +module.exports = new IgxButtonGroupTemplate(); diff --git a/packages/igx-templates/igx-ts/button-group/index.ts b/packages/igx-templates/igx-ts/button-group/index.ts new file mode 100644 index 000000000..58c09da85 --- /dev/null +++ b/packages/igx-templates/igx-ts/button-group/index.ts @@ -0,0 +1,11 @@ +import { BaseComponent } from "@igniteui/cli-core"; + +class IgxButtonGroupComponent extends BaseComponent { + constructor() { + super(__dirname); + this.name = "Button Group"; + this.group = "Data Entry & Display"; + this.description = "displays a group of buttons either vertically or horizontally"; + } +} +module.exports = new IgxButtonGroupComponent(); diff --git a/packages/igx-templates/igx-ts/card/default/files/src/app/__path__/__filePrefix__.html b/packages/igx-templates/igx-ts/card/default/files/src/app/__path__/__filePrefix__.html new file mode 100644 index 000000000..6041d8b3b --- /dev/null +++ b/packages/igx-templates/igx-ts/card/default/files/src/app/__path__/__filePrefix__.html @@ -0,0 +1,24 @@ +

igx-card component sample.

+

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

+ + + +

Coffee Shop

+
Downtown
+ + + + Coffee shop + + + +

A cozy place to enjoy a fresh cup of coffee and get some work done.

+ + + + + + + diff --git a/packages/igx-templates/igx-ts/card/default/files/src/app/__path__/__filePrefix__.scss b/packages/igx-templates/igx-ts/card/default/files/src/app/__path__/__filePrefix__.scss new file mode 100644 index 000000000..70aa9243e --- /dev/null +++ b/packages/igx-templates/igx-ts/card/default/files/src/app/__path__/__filePrefix__.scss @@ -0,0 +1,4 @@ +igx-card { + max-width: 320px; + margin: 8px; +} diff --git a/packages/igx-templates/igx-ts/card/default/files/src/app/__path__/__filePrefix__.spec.ts b/packages/igx-templates/igx-ts/card/default/files/src/app/__path__/__filePrefix__.spec.ts new file mode 100644 index 000000000..7f814dea6 --- /dev/null +++ b/packages/igx-templates/igx-ts/card/default/files/src/app/__path__/__filePrefix__.spec.ts @@ -0,0 +1,26 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { NoopAnimationsModule } from '@angular/platform-browser/animations'; +import { <%=ClassName%> } from './<%=filePrefix%>'; +import { IgxCardModule, IgxAvatarModule, IgxButtonModule } from '<%=igxPackage%>'; + +describe('<%=ClassName%>', () => { + let component: <%=ClassName%>; + let fixture: ComponentFixture<<%=ClassName%>>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [NoopAnimationsModule, IgxCardModule, IgxAvatarModule, IgxButtonModule, <%=ClassName%>] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(<%=ClassName%>); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/packages/igx-templates/igx-ts/card/default/files/src/app/__path__/__filePrefix__.ts b/packages/igx-templates/igx-ts/card/default/files/src/app/__path__/__filePrefix__.ts new file mode 100644 index 000000000..195013d7b --- /dev/null +++ b/packages/igx-templates/igx-ts/card/default/files/src/app/__path__/__filePrefix__.ts @@ -0,0 +1,34 @@ +import { Component } from '@angular/core'; +import { + IgxCardComponent, + IgxCardHeaderComponent, + IgxCardHeaderTitleDirective, + IgxCardHeaderSubtitleDirective, + IgxCardMediaDirective, + IgxCardContentDirective, + IgxCardActionsComponent, + IgxAvatarComponent, + IgxButtonDirective +} from '<%=igxPackage%>'; + +@Component({ + selector: 'app-<%=filePrefix%>', + templateUrl: './<%=filePrefix%>.html', + styleUrl: './<%=filePrefix%>.scss', + imports: [ + IgxCardComponent, + IgxCardHeaderComponent, + IgxCardHeaderTitleDirective, + IgxCardHeaderSubtitleDirective, + IgxCardMediaDirective, + IgxCardContentDirective, + IgxCardActionsComponent, + IgxAvatarComponent, + IgxButtonDirective + ], +}) +export class <%=ClassName%> { + public openUrl(url: string): void { + window.open(url, '_blank'); + } +} diff --git a/packages/igx-templates/igx-ts/card/default/index.ts b/packages/igx-templates/igx-ts/card/default/index.ts new file mode 100644 index 000000000..073fbc4f4 --- /dev/null +++ b/packages/igx-templates/igx-ts/card/default/index.ts @@ -0,0 +1,17 @@ +import { IGNITEUI_ANGULAR_PACKAGE } from "../../../constants"; +import { IgniteUIForAngularTemplate } from "../../../IgniteUIForAngularTemplate"; + +class IgxCardTemplate extends IgniteUIForAngularTemplate { + constructor() { + super(__dirname); + this.components = ["Card"]; + this.controlGroup = "Layouts"; + this.listInComponentTemplates = true; + this.id = "card"; + this.projectType = "igx-ts"; + this.name = "Card"; + this.description = "Basic IgxCard sample"; + this.packages = [IGNITEUI_ANGULAR_PACKAGE]; + } +} +module.exports = new IgxCardTemplate(); diff --git a/packages/igx-templates/igx-ts/card/index.ts b/packages/igx-templates/igx-ts/card/index.ts new file mode 100644 index 000000000..1c81eb5e4 --- /dev/null +++ b/packages/igx-templates/igx-ts/card/index.ts @@ -0,0 +1,11 @@ +import { BaseComponent } from "@igniteui/cli-core"; + +class IgxCardComponent extends BaseComponent { + constructor() { + super(__dirname); + this.name = "Card"; + this.group = "Layouts"; + this.description = "a sheet of material that serves as an entry point to more detailed information"; + } +} +module.exports = new IgxCardComponent(); diff --git a/packages/igx-templates/igx-ts/chat/default/files/src/app/__path__/__filePrefix__.html b/packages/igx-templates/igx-ts/chat/default/files/src/app/__path__/__filePrefix__.html new file mode 100644 index 000000000..3883467d7 --- /dev/null +++ b/packages/igx-templates/igx-ts/chat/default/files/src/app/__path__/__filePrefix__.html @@ -0,0 +1,5 @@ +

igx-chat component sample.

+

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

+ diff --git a/packages/igx-templates/igx-ts/chat/default/files/src/app/__path__/__filePrefix__.scss b/packages/igx-templates/igx-ts/chat/default/files/src/app/__path__/__filePrefix__.scss new file mode 100644 index 000000000..5d6bb878f --- /dev/null +++ b/packages/igx-templates/igx-ts/chat/default/files/src/app/__path__/__filePrefix__.scss @@ -0,0 +1,5 @@ +igx-chat { + display: block; + height: 480px; + margin: 8px; +} diff --git a/packages/igx-templates/igx-ts/chat/default/files/src/app/__path__/__filePrefix__.spec.ts b/packages/igx-templates/igx-ts/chat/default/files/src/app/__path__/__filePrefix__.spec.ts new file mode 100644 index 000000000..8969c4278 --- /dev/null +++ b/packages/igx-templates/igx-ts/chat/default/files/src/app/__path__/__filePrefix__.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { NoopAnimationsModule } from '@angular/platform-browser/animations'; +import { <%=ClassName%> } from './<%=filePrefix%>'; + +describe('<%=ClassName%>', () => { + let component: <%=ClassName%>; + let fixture: ComponentFixture<<%=ClassName%>>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [NoopAnimationsModule, <%=ClassName%>] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(<%=ClassName%>); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/packages/igx-templates/igx-ts/chat/default/files/src/app/__path__/__filePrefix__.ts b/packages/igx-templates/igx-ts/chat/default/files/src/app/__path__/__filePrefix__.ts new file mode 100644 index 000000000..4df6bdeb8 --- /dev/null +++ b/packages/igx-templates/igx-ts/chat/default/files/src/app/__path__/__filePrefix__.ts @@ -0,0 +1,16 @@ +import { Component } from '@angular/core'; +import { IgxChatComponent } from '<%=igxPackage%>/chat'; +import type { IgcChatMessage } from 'igniteui-webcomponents'; + +@Component({ + selector: 'app-<%=filePrefix%>', + templateUrl: './<%=filePrefix%>.html', + styleUrl: './<%=filePrefix%>.scss', + imports: [IgxChatComponent], +}) +export class <%=ClassName%> { + public messages: IgcChatMessage[] = [ + { id: '1', sender: 'bot', text: 'Hello! How can I help you today?', timestamp: new Date().toISOString() }, + { id: '2', sender: 'user', text: 'Tell me more about the igx-chat component.', timestamp: new Date().toISOString() } + ]; +} diff --git a/packages/igx-templates/igx-ts/chat/default/index.ts b/packages/igx-templates/igx-ts/chat/default/index.ts new file mode 100644 index 000000000..43823f9ef --- /dev/null +++ b/packages/igx-templates/igx-ts/chat/default/index.ts @@ -0,0 +1,17 @@ +import { IGNITEUI_ANGULAR_PACKAGE } from "../../../constants"; +import { IgniteUIForAngularTemplate } from "../../../IgniteUIForAngularTemplate"; + +class IgxChatTemplate extends IgniteUIForAngularTemplate { + constructor() { + super(__dirname); + this.components = ["Chat"]; + this.controlGroup = "Interactions"; + this.listInComponentTemplates = true; + this.id = "chat"; + this.projectType = "igx-ts"; + this.name = "Chat"; + this.description = "Basic IgxChat sample"; + this.packages = [IGNITEUI_ANGULAR_PACKAGE, "igniteui-webcomponents@^7.2.1"]; + } +} +module.exports = new IgxChatTemplate(); diff --git a/packages/igx-templates/igx-ts/chat/index.ts b/packages/igx-templates/igx-ts/chat/index.ts new file mode 100644 index 000000000..66100e74c --- /dev/null +++ b/packages/igx-templates/igx-ts/chat/index.ts @@ -0,0 +1,11 @@ +import { BaseComponent } from "@igniteui/cli-core"; + +class IgxChatComponent extends BaseComponent { + constructor() { + super(__dirname); + this.name = "Chat"; + this.group = "Data Entry & Display"; + this.description = "provides a chat interface for conversational experiences"; + } +} +module.exports = new IgxChatComponent(); diff --git a/packages/igx-templates/igx-ts/checkbox/default/files/src/app/__path__/__filePrefix__.html b/packages/igx-templates/igx-ts/checkbox/default/files/src/app/__path__/__filePrefix__.html new file mode 100644 index 000000000..b3f3dea01 --- /dev/null +++ b/packages/igx-templates/igx-ts/checkbox/default/files/src/app/__path__/__filePrefix__.html @@ -0,0 +1,11 @@ +

igx-checkbox component sample.

+

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

+ diff --git a/packages/igx-templates/igx-ts/checkbox/default/files/src/app/__path__/__filePrefix__.scss b/packages/igx-templates/igx-ts/checkbox/default/files/src/app/__path__/__filePrefix__.scss new file mode 100644 index 000000000..af98ee7bc --- /dev/null +++ b/packages/igx-templates/igx-ts/checkbox/default/files/src/app/__path__/__filePrefix__.scss @@ -0,0 +1,5 @@ +.task-list { + list-style: none; + margin: 8px; + padding: 0; +} diff --git a/packages/igx-templates/igx-ts/checkbox/default/files/src/app/__path__/__filePrefix__.spec.ts b/packages/igx-templates/igx-ts/checkbox/default/files/src/app/__path__/__filePrefix__.spec.ts new file mode 100644 index 000000000..410a69885 --- /dev/null +++ b/packages/igx-templates/igx-ts/checkbox/default/files/src/app/__path__/__filePrefix__.spec.ts @@ -0,0 +1,26 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { NoopAnimationsModule } from '@angular/platform-browser/animations'; +import { <%=ClassName%> } from './<%=filePrefix%>'; +import { IgxCheckboxModule } from '<%=igxPackage%>'; + +describe('<%=ClassName%>', () => { + let component: <%=ClassName%>; + let fixture: ComponentFixture<<%=ClassName%>>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [NoopAnimationsModule, IgxCheckboxModule, <%=ClassName%>] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(<%=ClassName%>); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/packages/igx-templates/igx-ts/checkbox/default/files/src/app/__path__/__filePrefix__.ts b/packages/igx-templates/igx-ts/checkbox/default/files/src/app/__path__/__filePrefix__.ts new file mode 100644 index 000000000..66fefb934 --- /dev/null +++ b/packages/igx-templates/igx-ts/checkbox/default/files/src/app/__path__/__filePrefix__.ts @@ -0,0 +1,17 @@ +import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { IgxCheckboxComponent } from '<%=igxPackage%>'; + +@Component({ + selector: 'app-<%=filePrefix%>', + templateUrl: './<%=filePrefix%>.html', + styleUrl: './<%=filePrefix%>.scss', + imports: [FormsModule, IgxCheckboxComponent], +}) +export class <%=ClassName%> { + public tasks = [ + { description: 'Design mock-ups', done: true }, + { description: 'Implement feature', done: false }, + { description: 'Write unit tests', done: false } + ]; +} diff --git a/packages/igx-templates/igx-ts/checkbox/default/index.ts b/packages/igx-templates/igx-ts/checkbox/default/index.ts new file mode 100644 index 000000000..69604d0b5 --- /dev/null +++ b/packages/igx-templates/igx-ts/checkbox/default/index.ts @@ -0,0 +1,17 @@ +import { IGNITEUI_ANGULAR_PACKAGE } from "../../../constants"; +import { IgniteUIForAngularTemplate } from "../../../IgniteUIForAngularTemplate"; + +class IgxCheckboxTemplate extends IgniteUIForAngularTemplate { + constructor() { + super(__dirname); + this.components = ["Checkbox"]; + this.controlGroup = "Data Entry & Display"; + this.listInComponentTemplates = true; + this.id = "checkbox"; + this.projectType = "igx-ts"; + this.name = "Checkbox"; + this.description = "Basic IgxCheckbox sample"; + this.packages = [IGNITEUI_ANGULAR_PACKAGE]; + } +} +module.exports = new IgxCheckboxTemplate(); diff --git a/packages/igx-templates/igx-ts/checkbox/index.ts b/packages/igx-templates/igx-ts/checkbox/index.ts new file mode 100644 index 000000000..fe7acc556 --- /dev/null +++ b/packages/igx-templates/igx-ts/checkbox/index.ts @@ -0,0 +1,11 @@ +import { BaseComponent } from "@igniteui/cli-core"; + +class IgxCheckboxComponent extends BaseComponent { + constructor() { + super(__dirname); + this.name = "Checkbox"; + this.group = "Data Entry & Display"; + this.description = "a selection component that allows users to make a binary choice for a condition"; + } +} +module.exports = new IgxCheckboxComponent(); diff --git a/packages/igx-templates/igx-ts/circular-progress/default/files/src/app/__path__/__filePrefix__.html b/packages/igx-templates/igx-ts/circular-progress/default/files/src/app/__path__/__filePrefix__.html new file mode 100644 index 000000000..2fcd7f62e --- /dev/null +++ b/packages/igx-templates/igx-ts/circular-progress/default/files/src/app/__path__/__filePrefix__.html @@ -0,0 +1,6 @@ +

igx-circular-bar component sample.

+

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

+ + diff --git a/packages/igx-templates/igx-ts/circular-progress/default/files/src/app/__path__/__filePrefix__.scss b/packages/igx-templates/igx-ts/circular-progress/default/files/src/app/__path__/__filePrefix__.scss new file mode 100644 index 000000000..5dd294e27 --- /dev/null +++ b/packages/igx-templates/igx-ts/circular-progress/default/files/src/app/__path__/__filePrefix__.scss @@ -0,0 +1,8 @@ +igx-circular-bar { + margin: 8px; +} + +button { + display: block; + margin: 8px; +} diff --git a/packages/igx-templates/igx-ts/circular-progress/default/files/src/app/__path__/__filePrefix__.spec.ts b/packages/igx-templates/igx-ts/circular-progress/default/files/src/app/__path__/__filePrefix__.spec.ts new file mode 100644 index 000000000..42561514d --- /dev/null +++ b/packages/igx-templates/igx-ts/circular-progress/default/files/src/app/__path__/__filePrefix__.spec.ts @@ -0,0 +1,26 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { NoopAnimationsModule } from '@angular/platform-browser/animations'; +import { <%=ClassName%> } from './<%=filePrefix%>'; +import { IgxProgressBarModule } from '<%=igxPackage%>'; + +describe('<%=ClassName%>', () => { + let component: <%=ClassName%>; + let fixture: ComponentFixture<<%=ClassName%>>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [NoopAnimationsModule, IgxProgressBarModule, <%=ClassName%>] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(<%=ClassName%>); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/packages/igx-templates/igx-ts/circular-progress/default/files/src/app/__path__/__filePrefix__.ts b/packages/igx-templates/igx-ts/circular-progress/default/files/src/app/__path__/__filePrefix__.ts new file mode 100644 index 000000000..35211470d --- /dev/null +++ b/packages/igx-templates/igx-ts/circular-progress/default/files/src/app/__path__/__filePrefix__.ts @@ -0,0 +1,16 @@ +import { Component } from '@angular/core'; +import { IgxCircularProgressBarComponent, IgxButtonDirective } from '<%=igxPackage%>'; + +@Component({ + selector: 'app-<%=filePrefix%>', + templateUrl: './<%=filePrefix%>.html', + styleUrl: './<%=filePrefix%>.scss', + imports: [IgxCircularProgressBarComponent, IgxButtonDirective], +}) +export class <%=ClassName%> { + public currentValue = 25; + + public increment(): void { + this.currentValue = Math.min(this.currentValue + 25, 100); + } +} diff --git a/packages/igx-templates/igx-ts/circular-progress/default/index.ts b/packages/igx-templates/igx-ts/circular-progress/default/index.ts new file mode 100644 index 000000000..a637ed042 --- /dev/null +++ b/packages/igx-templates/igx-ts/circular-progress/default/index.ts @@ -0,0 +1,17 @@ +import { IGNITEUI_ANGULAR_PACKAGE } from "../../../constants"; +import { IgniteUIForAngularTemplate } from "../../../IgniteUIForAngularTemplate"; + +class IgxCircularProgressTemplate extends IgniteUIForAngularTemplate { + constructor() { + super(__dirname); + this.components = ["Circular Progress"]; + this.controlGroup = "Data Entry & Display"; + this.listInComponentTemplates = true; + this.id = "circular-progress"; + this.projectType = "igx-ts"; + this.name = "Circular Progress"; + this.description = "Basic IgxCircularProgressBar sample"; + this.packages = [IGNITEUI_ANGULAR_PACKAGE]; + } +} +module.exports = new IgxCircularProgressTemplate(); diff --git a/packages/igx-templates/igx-ts/circular-progress/index.ts b/packages/igx-templates/igx-ts/circular-progress/index.ts new file mode 100644 index 000000000..534d45054 --- /dev/null +++ b/packages/igx-templates/igx-ts/circular-progress/index.ts @@ -0,0 +1,11 @@ +import { BaseComponent } from "@igniteui/cli-core"; + +class IgxCircularProgressComponent extends BaseComponent { + constructor() { + super(__dirname); + this.name = "Circular Progress"; + this.group = "Data Entry & Display"; + this.description = "displays progress in a circle and updates its appearance as its state changes"; + } +} +module.exports = new IgxCircularProgressComponent(); diff --git a/packages/igx-templates/igx-ts/date-time-editor/default/files/src/app/__path__/__filePrefix__.html b/packages/igx-templates/igx-ts/date-time-editor/default/files/src/app/__path__/__filePrefix__.html new file mode 100644 index 000000000..78d1fe6ce --- /dev/null +++ b/packages/igx-templates/igx-ts/date-time-editor/default/files/src/app/__path__/__filePrefix__.html @@ -0,0 +1,8 @@ +

igxDateTimeEditor directive sample.

+

You can read more about configuring the igxDateTimeEditor directive in the +README or the +official documentation.

+ + + + diff --git a/packages/igx-templates/igx-ts/date-time-editor/default/files/src/app/__path__/__filePrefix__.scss b/packages/igx-templates/igx-ts/date-time-editor/default/files/src/app/__path__/__filePrefix__.scss new file mode 100644 index 000000000..d4ec3549c --- /dev/null +++ b/packages/igx-templates/igx-ts/date-time-editor/default/files/src/app/__path__/__filePrefix__.scss @@ -0,0 +1,4 @@ +igx-input-group { + max-width: 320px; + margin: 8px; +} diff --git a/packages/igx-templates/igx-ts/date-time-editor/default/files/src/app/__path__/__filePrefix__.spec.ts b/packages/igx-templates/igx-ts/date-time-editor/default/files/src/app/__path__/__filePrefix__.spec.ts new file mode 100644 index 000000000..c423039da --- /dev/null +++ b/packages/igx-templates/igx-ts/date-time-editor/default/files/src/app/__path__/__filePrefix__.spec.ts @@ -0,0 +1,26 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { NoopAnimationsModule } from '@angular/platform-browser/animations'; +import { <%=ClassName%> } from './<%=filePrefix%>'; +import { IgxDateTimeEditorModule, IgxInputGroupModule } from '<%=igxPackage%>'; + +describe('<%=ClassName%>', () => { + let component: <%=ClassName%>; + let fixture: ComponentFixture<<%=ClassName%>>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [NoopAnimationsModule, IgxDateTimeEditorModule, IgxInputGroupModule, <%=ClassName%>] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(<%=ClassName%>); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/packages/igx-templates/igx-ts/date-time-editor/default/files/src/app/__path__/__filePrefix__.ts b/packages/igx-templates/igx-ts/date-time-editor/default/files/src/app/__path__/__filePrefix__.ts new file mode 100644 index 000000000..c895bc7e5 --- /dev/null +++ b/packages/igx-templates/igx-ts/date-time-editor/default/files/src/app/__path__/__filePrefix__.ts @@ -0,0 +1,13 @@ +import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { IgxDateTimeEditorDirective, IgxInputGroupComponent, IgxInputDirective, IgxLabelDirective } from '<%=igxPackage%>'; + +@Component({ + selector: 'app-<%=filePrefix%>', + templateUrl: './<%=filePrefix%>.html', + styleUrl: './<%=filePrefix%>.scss', + imports: [FormsModule, IgxDateTimeEditorDirective, IgxInputGroupComponent, IgxInputDirective, IgxLabelDirective], +}) +export class <%=ClassName%> { + public date = new Date(); +} diff --git a/packages/igx-templates/igx-ts/date-time-editor/default/index.ts b/packages/igx-templates/igx-ts/date-time-editor/default/index.ts new file mode 100644 index 000000000..c91725d5d --- /dev/null +++ b/packages/igx-templates/igx-ts/date-time-editor/default/index.ts @@ -0,0 +1,17 @@ +import { IGNITEUI_ANGULAR_PACKAGE } from "../../../constants"; +import { IgniteUIForAngularTemplate } from "../../../IgniteUIForAngularTemplate"; + +class IgxDateTimeEditorTemplate extends IgniteUIForAngularTemplate { + constructor() { + super(__dirname); + this.components = ["Date Time Editor"]; + this.controlGroup = "Data Entry & Display"; + this.listInComponentTemplates = true; + this.id = "date-time-editor"; + this.projectType = "igx-ts"; + this.name = "Date Time Editor"; + this.description = "Basic igxDateTimeEditor sample"; + this.packages = [IGNITEUI_ANGULAR_PACKAGE]; + } +} +module.exports = new IgxDateTimeEditorTemplate(); diff --git a/packages/igx-templates/igx-ts/date-time-editor/index.ts b/packages/igx-templates/igx-ts/date-time-editor/index.ts new file mode 100644 index 000000000..50a4709de --- /dev/null +++ b/packages/igx-templates/igx-ts/date-time-editor/index.ts @@ -0,0 +1,11 @@ +import { BaseComponent } from "@igniteui/cli-core"; + +class IgxDateTimeEditorComponent extends BaseComponent { + constructor() { + super(__dirname); + this.name = "Date Time Editor"; + this.group = "Data Entry & Display"; + this.description = "allows the user to set and edit date and time in a chosen input element"; + } +} +module.exports = new IgxDateTimeEditorComponent(); diff --git a/packages/igx-templates/igx-ts/divider/default/files/src/app/__path__/__filePrefix__.html b/packages/igx-templates/igx-ts/divider/default/files/src/app/__path__/__filePrefix__.html new file mode 100644 index 000000000..74a63f950 --- /dev/null +++ b/packages/igx-templates/igx-ts/divider/default/files/src/app/__path__/__filePrefix__.html @@ -0,0 +1,8 @@ +

igx-divider directive sample.

+

You can read more about configuring the igx-divider directive in the +README or the +official documentation.

+

Solid divider

+ +

Dashed, inset divider

+ diff --git a/packages/igx-templates/igx-ts/divider/default/files/src/app/__path__/__filePrefix__.scss b/packages/igx-templates/igx-ts/divider/default/files/src/app/__path__/__filePrefix__.scss new file mode 100644 index 000000000..45f25884b --- /dev/null +++ b/packages/igx-templates/igx-ts/divider/default/files/src/app/__path__/__filePrefix__.scss @@ -0,0 +1,4 @@ +:host { + display: block; + margin: 8px; +} diff --git a/packages/igx-templates/igx-ts/divider/default/files/src/app/__path__/__filePrefix__.spec.ts b/packages/igx-templates/igx-ts/divider/default/files/src/app/__path__/__filePrefix__.spec.ts new file mode 100644 index 000000000..9f7bcbe4f --- /dev/null +++ b/packages/igx-templates/igx-ts/divider/default/files/src/app/__path__/__filePrefix__.spec.ts @@ -0,0 +1,26 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { NoopAnimationsModule } from '@angular/platform-browser/animations'; +import { <%=ClassName%> } from './<%=filePrefix%>'; +import { IgxDividerModule } from '<%=igxPackage%>'; + +describe('<%=ClassName%>', () => { + let component: <%=ClassName%>; + let fixture: ComponentFixture<<%=ClassName%>>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [NoopAnimationsModule, IgxDividerModule, <%=ClassName%>] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(<%=ClassName%>); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/packages/igx-templates/igx-ts/divider/default/files/src/app/__path__/__filePrefix__.ts b/packages/igx-templates/igx-ts/divider/default/files/src/app/__path__/__filePrefix__.ts new file mode 100644 index 000000000..001a22ab7 --- /dev/null +++ b/packages/igx-templates/igx-ts/divider/default/files/src/app/__path__/__filePrefix__.ts @@ -0,0 +1,11 @@ +import { Component } from '@angular/core'; +import { IgxDividerComponent } from '<%=igxPackage%>'; + +@Component({ + selector: 'app-<%=filePrefix%>', + templateUrl: './<%=filePrefix%>.html', + styleUrl: './<%=filePrefix%>.scss', + imports: [IgxDividerComponent], +}) +export class <%=ClassName%> { +} diff --git a/packages/igx-templates/igx-ts/divider/default/index.ts b/packages/igx-templates/igx-ts/divider/default/index.ts new file mode 100644 index 000000000..87ea4ed6d --- /dev/null +++ b/packages/igx-templates/igx-ts/divider/default/index.ts @@ -0,0 +1,17 @@ +import { IGNITEUI_ANGULAR_PACKAGE } from "../../../constants"; +import { IgniteUIForAngularTemplate } from "../../../IgniteUIForAngularTemplate"; + +class IgxDividerTemplate extends IgniteUIForAngularTemplate { + constructor() { + super(__dirname); + this.components = ["Divider"]; + this.controlGroup = "Layouts"; + this.listInComponentTemplates = true; + this.id = "divider"; + this.projectType = "igx-ts"; + this.name = "Divider"; + this.description = "Basic igx-divider sample"; + this.packages = [IGNITEUI_ANGULAR_PACKAGE]; + } +} +module.exports = new IgxDividerTemplate(); diff --git a/packages/igx-templates/igx-ts/divider/index.ts b/packages/igx-templates/igx-ts/divider/index.ts new file mode 100644 index 000000000..a43913a16 --- /dev/null +++ b/packages/igx-templates/igx-ts/divider/index.ts @@ -0,0 +1,11 @@ +import { BaseComponent } from "@igniteui/cli-core"; + +class IgxDividerComponent extends BaseComponent { + constructor() { + super(__dirname); + this.name = "Divider"; + this.group = "Layouts"; + this.description = "separates content into clear groups"; + } +} +module.exports = new IgxDividerComponent(); diff --git a/packages/igx-templates/igx-ts/expansion-panel/default/files/src/app/__path__/__filePrefix__.html b/packages/igx-templates/igx-ts/expansion-panel/default/files/src/app/__path__/__filePrefix__.html new file mode 100644 index 000000000..e70a18313 --- /dev/null +++ b/packages/igx-templates/igx-ts/expansion-panel/default/files/src/app/__path__/__filePrefix__.html @@ -0,0 +1,13 @@ +

igx-expansion-panel component sample.

+

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

+ + + Order #10248 + Placed on 2024-01-05 + + +

Lengthier and more detailed description. Only visible when the panel is expanded.

+ + diff --git a/packages/igx-templates/igx-ts/expansion-panel/default/files/src/app/__path__/__filePrefix__.scss b/packages/igx-templates/igx-ts/expansion-panel/default/files/src/app/__path__/__filePrefix__.scss new file mode 100644 index 000000000..87e82ec43 --- /dev/null +++ b/packages/igx-templates/igx-ts/expansion-panel/default/files/src/app/__path__/__filePrefix__.scss @@ -0,0 +1,4 @@ +igx-expansion-panel { + max-width: 480px; + margin: 8px; +} diff --git a/packages/igx-templates/igx-ts/expansion-panel/default/files/src/app/__path__/__filePrefix__.spec.ts b/packages/igx-templates/igx-ts/expansion-panel/default/files/src/app/__path__/__filePrefix__.spec.ts new file mode 100644 index 000000000..22b4678be --- /dev/null +++ b/packages/igx-templates/igx-ts/expansion-panel/default/files/src/app/__path__/__filePrefix__.spec.ts @@ -0,0 +1,26 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { NoopAnimationsModule } from '@angular/platform-browser/animations'; +import { <%=ClassName%> } from './<%=filePrefix%>'; +import { IgxExpansionPanelModule } from '<%=igxPackage%>'; + +describe('<%=ClassName%>', () => { + let component: <%=ClassName%>; + let fixture: ComponentFixture<<%=ClassName%>>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [NoopAnimationsModule, IgxExpansionPanelModule, <%=ClassName%>] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(<%=ClassName%>); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/packages/igx-templates/igx-ts/expansion-panel/default/files/src/app/__path__/__filePrefix__.ts b/packages/igx-templates/igx-ts/expansion-panel/default/files/src/app/__path__/__filePrefix__.ts new file mode 100644 index 000000000..9ead2880d --- /dev/null +++ b/packages/igx-templates/igx-ts/expansion-panel/default/files/src/app/__path__/__filePrefix__.ts @@ -0,0 +1,23 @@ +import { Component } from '@angular/core'; +import { + IgxExpansionPanelComponent, + IgxExpansionPanelHeaderComponent, + IgxExpansionPanelTitleDirective, + IgxExpansionPanelDescriptionDirective, + IgxExpansionPanelBodyComponent +} from '<%=igxPackage%>'; + +@Component({ + selector: 'app-<%=filePrefix%>', + templateUrl: './<%=filePrefix%>.html', + styleUrl: './<%=filePrefix%>.scss', + imports: [ + IgxExpansionPanelComponent, + IgxExpansionPanelHeaderComponent, + IgxExpansionPanelTitleDirective, + IgxExpansionPanelDescriptionDirective, + IgxExpansionPanelBodyComponent + ], +}) +export class <%=ClassName%> { +} diff --git a/packages/igx-templates/igx-ts/expansion-panel/default/index.ts b/packages/igx-templates/igx-ts/expansion-panel/default/index.ts new file mode 100644 index 000000000..9c5104f41 --- /dev/null +++ b/packages/igx-templates/igx-ts/expansion-panel/default/index.ts @@ -0,0 +1,17 @@ +import { IGNITEUI_ANGULAR_PACKAGE } from "../../../constants"; +import { IgniteUIForAngularTemplate } from "../../../IgniteUIForAngularTemplate"; + +class IgxExpansionPanelTemplate extends IgniteUIForAngularTemplate { + constructor() { + super(__dirname); + this.components = ["Expansion Panel"]; + this.controlGroup = "Layouts"; + this.listInComponentTemplates = true; + this.id = "expansion-panel"; + this.projectType = "igx-ts"; + this.name = "Expansion Panel"; + this.description = "Basic IgxExpansionPanel sample"; + this.packages = [IGNITEUI_ANGULAR_PACKAGE]; + } +} +module.exports = new IgxExpansionPanelTemplate(); diff --git a/packages/igx-templates/igx-ts/expansion-panel/index.ts b/packages/igx-templates/igx-ts/expansion-panel/index.ts new file mode 100644 index 000000000..caaa7187e --- /dev/null +++ b/packages/igx-templates/igx-ts/expansion-panel/index.ts @@ -0,0 +1,11 @@ +import { BaseComponent } from "@igniteui/cli-core"; + +class IgxExpansionPanelComponent extends BaseComponent { + constructor() { + super(__dirname); + this.name = "Expansion Panel"; + this.group = "Layouts"; + this.description = "a light and highly templateable component that allows you to dynamically display content"; + } +} +module.exports = new IgxExpansionPanelComponent(); diff --git a/packages/igx-templates/igx-ts/grid-lite/default/files/src/app/__path__/__filePrefix__.html b/packages/igx-templates/igx-ts/grid-lite/default/files/src/app/__path__/__filePrefix__.html new file mode 100644 index 000000000..bfde15920 --- /dev/null +++ b/packages/igx-templates/igx-ts/grid-lite/default/files/src/app/__path__/__filePrefix__.html @@ -0,0 +1,10 @@ +

igx-grid-lite component sample.

+

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

+ + + + + + diff --git a/packages/igx-templates/igx-ts/grid-lite/default/files/src/app/__path__/__filePrefix__.scss b/packages/igx-templates/igx-ts/grid-lite/default/files/src/app/__path__/__filePrefix__.scss new file mode 100644 index 000000000..298ad8fa1 --- /dev/null +++ b/packages/igx-templates/igx-ts/grid-lite/default/files/src/app/__path__/__filePrefix__.scss @@ -0,0 +1,4 @@ +igx-grid-lite { + display: block; + margin: 8px; +} diff --git a/packages/igx-templates/igx-ts/grid-lite/default/files/src/app/__path__/__filePrefix__.spec.ts b/packages/igx-templates/igx-ts/grid-lite/default/files/src/app/__path__/__filePrefix__.spec.ts new file mode 100644 index 000000000..8969c4278 --- /dev/null +++ b/packages/igx-templates/igx-ts/grid-lite/default/files/src/app/__path__/__filePrefix__.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { NoopAnimationsModule } from '@angular/platform-browser/animations'; +import { <%=ClassName%> } from './<%=filePrefix%>'; + +describe('<%=ClassName%>', () => { + let component: <%=ClassName%>; + let fixture: ComponentFixture<<%=ClassName%>>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [NoopAnimationsModule, <%=ClassName%>] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(<%=ClassName%>); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/packages/igx-templates/igx-ts/grid-lite/default/files/src/app/__path__/__filePrefix__.ts b/packages/igx-templates/igx-ts/grid-lite/default/files/src/app/__path__/__filePrefix__.ts new file mode 100644 index 000000000..246f0040f --- /dev/null +++ b/packages/igx-templates/igx-ts/grid-lite/default/files/src/app/__path__/__filePrefix__.ts @@ -0,0 +1,16 @@ +import { Component } from '@angular/core'; +import { IgxGridLiteComponent, IgxGridLiteColumnComponent } from '<%=igxPackage%>/grids/lite'; + +@Component({ + selector: 'app-<%=filePrefix%>', + templateUrl: './<%=filePrefix%>.html', + styleUrl: './<%=filePrefix%>.scss', + imports: [IgxGridLiteComponent, IgxGridLiteColumnComponent], +}) +export class <%=ClassName%> { + public data = [ + { id: 1, firstName: 'John', lastName: 'Doe', age: 30 }, + { id: 2, firstName: 'Jane', lastName: 'Smith', age: 25 }, + { id: 3, firstName: 'Alex', lastName: 'Turner', age: 41 } + ]; +} diff --git a/packages/igx-templates/igx-ts/grid-lite/default/index.ts b/packages/igx-templates/igx-ts/grid-lite/default/index.ts new file mode 100644 index 000000000..6b9804ba1 --- /dev/null +++ b/packages/igx-templates/igx-ts/grid-lite/default/index.ts @@ -0,0 +1,17 @@ +import { IGNITEUI_ANGULAR_PACKAGE } from "../../../constants"; +import { IgniteUIForAngularTemplate } from "../../../IgniteUIForAngularTemplate"; + +class IgxGridLiteTemplate extends IgniteUIForAngularTemplate { + constructor() { + super(__dirname); + this.components = ["Grid Lite"]; + this.controlGroup = "Grids & Lists"; + this.listInComponentTemplates = true; + this.id = "grid-lite"; + this.projectType = "igx-ts"; + this.name = "Grid Lite"; + this.description = "Basic IgxGridLite sample"; + this.packages = [IGNITEUI_ANGULAR_PACKAGE, "igniteui-grid-lite@~0.10.0"]; + } +} +module.exports = new IgxGridLiteTemplate(); diff --git a/packages/igx-templates/igx-ts/grid-lite/index.ts b/packages/igx-templates/igx-ts/grid-lite/index.ts new file mode 100644 index 000000000..5f26065b7 --- /dev/null +++ b/packages/igx-templates/igx-ts/grid-lite/index.ts @@ -0,0 +1,11 @@ +import { BaseComponent } from "@igniteui/cli-core"; + +class IgxGridLiteComponent extends BaseComponent { + constructor() { + super(__dirname); + this.name = "Grid Lite"; + this.group = "Grids & Lists"; + this.description = "a lightweight, performant data grid solution with sorting, filtering and virtualization"; + } +} +module.exports = new IgxGridLiteComponent(); diff --git a/packages/igx-templates/igx-ts/icon/default/files/src/app/__path__/__filePrefix__.html b/packages/igx-templates/igx-ts/icon/default/files/src/app/__path__/__filePrefix__.html new file mode 100644 index 000000000..07e7b2180 --- /dev/null +++ b/packages/igx-templates/igx-ts/icon/default/files/src/app/__path__/__filePrefix__.html @@ -0,0 +1,9 @@ +

igx-icon component sample.

+

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

+
+ + + +
diff --git a/packages/igx-templates/igx-ts/icon/default/files/src/app/__path__/__filePrefix__.scss b/packages/igx-templates/igx-ts/icon/default/files/src/app/__path__/__filePrefix__.scss new file mode 100644 index 000000000..ae1a7cdfc --- /dev/null +++ b/packages/igx-templates/igx-ts/icon/default/files/src/app/__path__/__filePrefix__.scss @@ -0,0 +1,6 @@ +.icon-sample { + display: flex; + gap: 16px; + margin: 8px; + font-size: 32px; +} diff --git a/packages/igx-templates/igx-ts/icon/default/files/src/app/__path__/__filePrefix__.spec.ts b/packages/igx-templates/igx-ts/icon/default/files/src/app/__path__/__filePrefix__.spec.ts new file mode 100644 index 000000000..95265eba2 --- /dev/null +++ b/packages/igx-templates/igx-ts/icon/default/files/src/app/__path__/__filePrefix__.spec.ts @@ -0,0 +1,26 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { NoopAnimationsModule } from '@angular/platform-browser/animations'; +import { <%=ClassName%> } from './<%=filePrefix%>'; +import { IgxIconModule } from '<%=igxPackage%>'; + +describe('<%=ClassName%>', () => { + let component: <%=ClassName%>; + let fixture: ComponentFixture<<%=ClassName%>>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [NoopAnimationsModule, IgxIconModule, <%=ClassName%>] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(<%=ClassName%>); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/packages/igx-templates/igx-ts/icon/default/files/src/app/__path__/__filePrefix__.ts b/packages/igx-templates/igx-ts/icon/default/files/src/app/__path__/__filePrefix__.ts new file mode 100644 index 000000000..fbf4a6c78 --- /dev/null +++ b/packages/igx-templates/igx-ts/icon/default/files/src/app/__path__/__filePrefix__.ts @@ -0,0 +1,11 @@ +import { Component } from '@angular/core'; +import { IgxIconComponent } from '<%=igxPackage%>'; + +@Component({ + selector: 'app-<%=filePrefix%>', + templateUrl: './<%=filePrefix%>.html', + styleUrl: './<%=filePrefix%>.scss', + imports: [IgxIconComponent], +}) +export class <%=ClassName%> { +} diff --git a/packages/igx-templates/igx-ts/icon/default/index.ts b/packages/igx-templates/igx-ts/icon/default/index.ts new file mode 100644 index 000000000..4ca3c1aff --- /dev/null +++ b/packages/igx-templates/igx-ts/icon/default/index.ts @@ -0,0 +1,17 @@ +import { IGNITEUI_ANGULAR_PACKAGE } from "../../../constants"; +import { IgniteUIForAngularTemplate } from "../../../IgniteUIForAngularTemplate"; + +class IgxIconTemplate extends IgniteUIForAngularTemplate { + constructor() { + super(__dirname); + this.components = ["Icon"]; + this.controlGroup = "Data Entry & Display"; + this.listInComponentTemplates = true; + this.id = "icon"; + this.projectType = "igx-ts"; + this.name = "Icon"; + this.description = "Basic IgxIcon sample"; + this.packages = [IGNITEUI_ANGULAR_PACKAGE]; + } +} +module.exports = new IgxIconTemplate(); diff --git a/packages/igx-templates/igx-ts/icon/index.ts b/packages/igx-templates/igx-ts/icon/index.ts new file mode 100644 index 000000000..5eb5af05e --- /dev/null +++ b/packages/igx-templates/igx-ts/icon/index.ts @@ -0,0 +1,11 @@ +import { BaseComponent } from "@igniteui/cli-core"; + +class IgxIconComponent extends BaseComponent { + constructor() { + super(__dirname); + this.name = "Icon"; + this.group = "Data Entry & Display"; + this.description = "unifies various icon/font sets and custom SVG icons for interchangeable usage"; + } +} +module.exports = new IgxIconComponent(); diff --git a/packages/igx-templates/igx-ts/linear-progress/default/files/src/app/__path__/__filePrefix__.html b/packages/igx-templates/igx-ts/linear-progress/default/files/src/app/__path__/__filePrefix__.html new file mode 100644 index 000000000..fc1ef5b6b --- /dev/null +++ b/packages/igx-templates/igx-ts/linear-progress/default/files/src/app/__path__/__filePrefix__.html @@ -0,0 +1,6 @@ +

igx-linear-bar component sample.

+

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

+ + diff --git a/packages/igx-templates/igx-ts/linear-progress/default/files/src/app/__path__/__filePrefix__.scss b/packages/igx-templates/igx-ts/linear-progress/default/files/src/app/__path__/__filePrefix__.scss new file mode 100644 index 000000000..a2f127b8c --- /dev/null +++ b/packages/igx-templates/igx-ts/linear-progress/default/files/src/app/__path__/__filePrefix__.scss @@ -0,0 +1,9 @@ +igx-linear-bar { + display: block; + margin: 8px; +} + +button { + display: block; + margin: 8px; +} diff --git a/packages/igx-templates/igx-ts/linear-progress/default/files/src/app/__path__/__filePrefix__.spec.ts b/packages/igx-templates/igx-ts/linear-progress/default/files/src/app/__path__/__filePrefix__.spec.ts new file mode 100644 index 000000000..42561514d --- /dev/null +++ b/packages/igx-templates/igx-ts/linear-progress/default/files/src/app/__path__/__filePrefix__.spec.ts @@ -0,0 +1,26 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { NoopAnimationsModule } from '@angular/platform-browser/animations'; +import { <%=ClassName%> } from './<%=filePrefix%>'; +import { IgxProgressBarModule } from '<%=igxPackage%>'; + +describe('<%=ClassName%>', () => { + let component: <%=ClassName%>; + let fixture: ComponentFixture<<%=ClassName%>>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [NoopAnimationsModule, IgxProgressBarModule, <%=ClassName%>] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(<%=ClassName%>); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/packages/igx-templates/igx-ts/linear-progress/default/files/src/app/__path__/__filePrefix__.ts b/packages/igx-templates/igx-ts/linear-progress/default/files/src/app/__path__/__filePrefix__.ts new file mode 100644 index 000000000..c0dd9dd29 --- /dev/null +++ b/packages/igx-templates/igx-ts/linear-progress/default/files/src/app/__path__/__filePrefix__.ts @@ -0,0 +1,16 @@ +import { Component } from '@angular/core'; +import { IgxLinearProgressBarComponent, IgxButtonDirective } from '<%=igxPackage%>'; + +@Component({ + selector: 'app-<%=filePrefix%>', + templateUrl: './<%=filePrefix%>.html', + styleUrl: './<%=filePrefix%>.scss', + imports: [IgxLinearProgressBarComponent, IgxButtonDirective], +}) +export class <%=ClassName%> { + public currentValue = 25; + + public increment(): void { + this.currentValue = Math.min(this.currentValue + 25, 100); + } +} diff --git a/packages/igx-templates/igx-ts/linear-progress/default/index.ts b/packages/igx-templates/igx-ts/linear-progress/default/index.ts new file mode 100644 index 000000000..ca211a90e --- /dev/null +++ b/packages/igx-templates/igx-ts/linear-progress/default/index.ts @@ -0,0 +1,17 @@ +import { IGNITEUI_ANGULAR_PACKAGE } from "../../../constants"; +import { IgniteUIForAngularTemplate } from "../../../IgniteUIForAngularTemplate"; + +class IgxLinearProgressTemplate extends IgniteUIForAngularTemplate { + constructor() { + super(__dirname); + this.components = ["Linear Progress"]; + this.controlGroup = "Data Entry & Display"; + this.listInComponentTemplates = true; + this.id = "linear-progress"; + this.projectType = "igx-ts"; + this.name = "Linear Progress"; + this.description = "Basic IgxLinearProgressBar sample"; + this.packages = [IGNITEUI_ANGULAR_PACKAGE]; + } +} +module.exports = new IgxLinearProgressTemplate(); diff --git a/packages/igx-templates/igx-ts/linear-progress/index.ts b/packages/igx-templates/igx-ts/linear-progress/index.ts new file mode 100644 index 000000000..04e4c3549 --- /dev/null +++ b/packages/igx-templates/igx-ts/linear-progress/index.ts @@ -0,0 +1,11 @@ +import { BaseComponent } from "@igniteui/cli-core"; + +class IgxLinearProgressComponent extends BaseComponent { + constructor() { + super(__dirname); + this.name = "Linear Progress"; + this.group = "Data Entry & Display"; + this.description = "displays a progress bar and updates its appearance as its state changes"; + } +} +module.exports = new IgxLinearProgressComponent(); diff --git a/packages/igx-templates/igx-ts/mask/default/files/src/app/__path__/__filePrefix__.html b/packages/igx-templates/igx-ts/mask/default/files/src/app/__path__/__filePrefix__.html new file mode 100644 index 000000000..0175c848a --- /dev/null +++ b/packages/igx-templates/igx-ts/mask/default/files/src/app/__path__/__filePrefix__.html @@ -0,0 +1,8 @@ +

igxMask directive sample.

+

You can read more about configuring the igxMask directive in the +README or the +official documentation.

+ + + + diff --git a/packages/igx-templates/igx-ts/mask/default/files/src/app/__path__/__filePrefix__.scss b/packages/igx-templates/igx-ts/mask/default/files/src/app/__path__/__filePrefix__.scss new file mode 100644 index 000000000..d4ec3549c --- /dev/null +++ b/packages/igx-templates/igx-ts/mask/default/files/src/app/__path__/__filePrefix__.scss @@ -0,0 +1,4 @@ +igx-input-group { + max-width: 320px; + margin: 8px; +} diff --git a/packages/igx-templates/igx-ts/mask/default/files/src/app/__path__/__filePrefix__.spec.ts b/packages/igx-templates/igx-ts/mask/default/files/src/app/__path__/__filePrefix__.spec.ts new file mode 100644 index 000000000..06e2bf6fc --- /dev/null +++ b/packages/igx-templates/igx-ts/mask/default/files/src/app/__path__/__filePrefix__.spec.ts @@ -0,0 +1,26 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { NoopAnimationsModule } from '@angular/platform-browser/animations'; +import { <%=ClassName%> } from './<%=filePrefix%>'; +import { IgxMaskModule, IgxInputGroupModule } from '<%=igxPackage%>'; + +describe('<%=ClassName%>', () => { + let component: <%=ClassName%>; + let fixture: ComponentFixture<<%=ClassName%>>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [NoopAnimationsModule, IgxMaskModule, IgxInputGroupModule, <%=ClassName%>] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(<%=ClassName%>); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/packages/igx-templates/igx-ts/mask/default/files/src/app/__path__/__filePrefix__.ts b/packages/igx-templates/igx-ts/mask/default/files/src/app/__path__/__filePrefix__.ts new file mode 100644 index 000000000..1ab171400 --- /dev/null +++ b/packages/igx-templates/igx-ts/mask/default/files/src/app/__path__/__filePrefix__.ts @@ -0,0 +1,13 @@ +import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { IgxMaskDirective, IgxInputGroupComponent, IgxInputDirective, IgxLabelDirective } from '<%=igxPackage%>'; + +@Component({ + selector: 'app-<%=filePrefix%>', + templateUrl: './<%=filePrefix%>.html', + styleUrl: './<%=filePrefix%>.scss', + imports: [FormsModule, IgxMaskDirective, IgxInputGroupComponent, IgxInputDirective, IgxLabelDirective], +}) +export class <%=ClassName%> { + public phoneNumber = '1234567890'; +} diff --git a/packages/igx-templates/igx-ts/mask/default/index.ts b/packages/igx-templates/igx-ts/mask/default/index.ts new file mode 100644 index 000000000..fbde4f2d5 --- /dev/null +++ b/packages/igx-templates/igx-ts/mask/default/index.ts @@ -0,0 +1,17 @@ +import { IGNITEUI_ANGULAR_PACKAGE } from "../../../constants"; +import { IgniteUIForAngularTemplate } from "../../../IgniteUIForAngularTemplate"; + +class IgxMaskTemplate extends IgniteUIForAngularTemplate { + constructor() { + super(__dirname); + this.components = ["Mask"]; + this.controlGroup = "Data Entry & Display"; + this.listInComponentTemplates = true; + this.id = "mask"; + this.projectType = "igx-ts"; + this.name = "Mask"; + this.description = "Basic igxMask sample"; + this.packages = [IGNITEUI_ANGULAR_PACKAGE]; + } +} +module.exports = new IgxMaskTemplate(); diff --git a/packages/igx-templates/igx-ts/mask/index.ts b/packages/igx-templates/igx-ts/mask/index.ts new file mode 100644 index 000000000..c5be692e3 --- /dev/null +++ b/packages/igx-templates/igx-ts/mask/index.ts @@ -0,0 +1,11 @@ +import { BaseComponent } from "@igniteui/cli-core"; + +class IgxMaskComponent extends BaseComponent { + constructor() { + super(__dirname); + this.name = "Mask"; + this.group = "Data Entry & Display"; + this.description = "controls user input and formats the visible value based on configurable mask rules"; + } +} +module.exports = new IgxMaskComponent(); diff --git a/packages/igx-templates/igx-ts/navbar/default/files/src/app/__path__/__filePrefix__.html b/packages/igx-templates/igx-ts/navbar/default/files/src/app/__path__/__filePrefix__.html new file mode 100644 index 000000000..a15d70161 --- /dev/null +++ b/packages/igx-templates/igx-ts/navbar/default/files/src/app/__path__/__filePrefix__.html @@ -0,0 +1,9 @@ +

igx-navbar component sample.

+

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

+ + diff --git a/packages/igx-templates/igx-ts/navbar/default/files/src/app/__path__/__filePrefix__.scss b/packages/igx-templates/igx-ts/navbar/default/files/src/app/__path__/__filePrefix__.scss new file mode 100644 index 000000000..d62117ec7 --- /dev/null +++ b/packages/igx-templates/igx-ts/navbar/default/files/src/app/__path__/__filePrefix__.scss @@ -0,0 +1,3 @@ +igx-navbar { + margin-bottom: 8px; +} diff --git a/packages/igx-templates/igx-ts/navbar/default/files/src/app/__path__/__filePrefix__.spec.ts b/packages/igx-templates/igx-ts/navbar/default/files/src/app/__path__/__filePrefix__.spec.ts new file mode 100644 index 000000000..cd87612cd --- /dev/null +++ b/packages/igx-templates/igx-ts/navbar/default/files/src/app/__path__/__filePrefix__.spec.ts @@ -0,0 +1,26 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { NoopAnimationsModule } from '@angular/platform-browser/animations'; +import { <%=ClassName%> } from './<%=filePrefix%>'; +import { IgxNavbarModule } from '<%=igxPackage%>'; + +describe('<%=ClassName%>', () => { + let component: <%=ClassName%>; + let fixture: ComponentFixture<<%=ClassName%>>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [NoopAnimationsModule, IgxNavbarModule, <%=ClassName%>] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(<%=ClassName%>); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/packages/igx-templates/igx-ts/navbar/default/files/src/app/__path__/__filePrefix__.ts b/packages/igx-templates/igx-ts/navbar/default/files/src/app/__path__/__filePrefix__.ts new file mode 100644 index 000000000..993a71b74 --- /dev/null +++ b/packages/igx-templates/igx-ts/navbar/default/files/src/app/__path__/__filePrefix__.ts @@ -0,0 +1,16 @@ +import { Component } from '@angular/core'; +import { IgxNavbarComponent } from '<%=igxPackage%>'; + +@Component({ + selector: 'app-<%=filePrefix%>', + templateUrl: './<%=filePrefix%>.html', + styleUrl: './<%=filePrefix%>.scss', + imports: [IgxNavbarComponent], +}) +export class <%=ClassName%> { + public canGoBack = true; + + public navigateBack(): void { + console.log('navigate back'); + } +} diff --git a/packages/igx-templates/igx-ts/navbar/default/index.ts b/packages/igx-templates/igx-ts/navbar/default/index.ts new file mode 100644 index 000000000..5783bde5f --- /dev/null +++ b/packages/igx-templates/igx-ts/navbar/default/index.ts @@ -0,0 +1,17 @@ +import { IGNITEUI_ANGULAR_PACKAGE } from "../../../constants"; +import { IgniteUIForAngularTemplate } from "../../../IgniteUIForAngularTemplate"; + +class IgxNavbarTemplate extends IgniteUIForAngularTemplate { + constructor() { + super(__dirname); + this.components = ["Navbar"]; + this.controlGroup = "Layouts"; + this.listInComponentTemplates = true; + this.id = "navbar"; + this.projectType = "igx-ts"; + this.name = "Navbar"; + this.description = "Basic IgxNavbar sample"; + this.packages = [IGNITEUI_ANGULAR_PACKAGE]; + } +} +module.exports = new IgxNavbarTemplate(); diff --git a/packages/igx-templates/igx-ts/navbar/index.ts b/packages/igx-templates/igx-ts/navbar/index.ts new file mode 100644 index 000000000..46aceadd6 --- /dev/null +++ b/packages/igx-templates/igx-ts/navbar/index.ts @@ -0,0 +1,11 @@ +import { BaseComponent } from "@igniteui/cli-core"; + +class IgxNavbarComponent extends BaseComponent { + constructor() { + super(__dirname); + this.name = "Navbar"; + this.group = "Layouts"; + this.description = "positioned on top, represents current state and enables a user defined action"; + } +} +module.exports = new IgxNavbarComponent(); diff --git a/packages/igx-templates/igx-ts/navigation-drawer/default/files/src/app/__path__/__filePrefix__.html b/packages/igx-templates/igx-ts/navigation-drawer/default/files/src/app/__path__/__filePrefix__.html new file mode 100644 index 000000000..d73ea526e --- /dev/null +++ b/packages/igx-templates/igx-ts/navigation-drawer/default/files/src/app/__path__/__filePrefix__.html @@ -0,0 +1,12 @@ +

igx-nav-drawer component sample.

+

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

+ + + + Drawer Title + Home + Selected Item + + diff --git a/packages/igx-templates/igx-ts/navigation-drawer/default/files/src/app/__path__/__filePrefix__.scss b/packages/igx-templates/igx-ts/navigation-drawer/default/files/src/app/__path__/__filePrefix__.scss new file mode 100644 index 000000000..9555fcdd7 --- /dev/null +++ b/packages/igx-templates/igx-ts/navigation-drawer/default/files/src/app/__path__/__filePrefix__.scss @@ -0,0 +1,7 @@ +button { + margin: 8px; +} + +igx-nav-drawer { + height: 320px; +} diff --git a/packages/igx-templates/igx-ts/navigation-drawer/default/files/src/app/__path__/__filePrefix__.spec.ts b/packages/igx-templates/igx-ts/navigation-drawer/default/files/src/app/__path__/__filePrefix__.spec.ts new file mode 100644 index 000000000..a8d768762 --- /dev/null +++ b/packages/igx-templates/igx-ts/navigation-drawer/default/files/src/app/__path__/__filePrefix__.spec.ts @@ -0,0 +1,26 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { NoopAnimationsModule } from '@angular/platform-browser/animations'; +import { <%=ClassName%> } from './<%=filePrefix%>'; +import { IgxNavigationDrawerModule } from '<%=igxPackage%>'; + +describe('<%=ClassName%>', () => { + let component: <%=ClassName%>; + let fixture: ComponentFixture<<%=ClassName%>>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [NoopAnimationsModule, IgxNavigationDrawerModule, <%=ClassName%>] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(<%=ClassName%>); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/packages/igx-templates/igx-ts/navigation-drawer/default/files/src/app/__path__/__filePrefix__.ts b/packages/igx-templates/igx-ts/navigation-drawer/default/files/src/app/__path__/__filePrefix__.ts new file mode 100644 index 000000000..762899f4d --- /dev/null +++ b/packages/igx-templates/igx-ts/navigation-drawer/default/files/src/app/__path__/__filePrefix__.ts @@ -0,0 +1,24 @@ +import { Component } from '@angular/core'; +import { + IgxNavigationDrawerComponent, + IgxNavDrawerItemDirective, + IgxNavDrawerTemplateDirective, + IgxRippleDirective, + IgxButtonDirective +} from '<%=igxPackage%>'; + +@Component({ + selector: 'app-<%=filePrefix%>', + templateUrl: './<%=filePrefix%>.html', + styleUrl: './<%=filePrefix%>.scss', + imports: [ + IgxNavigationDrawerComponent, + IgxNavDrawerItemDirective, + IgxNavDrawerTemplateDirective, + IgxRippleDirective, + IgxButtonDirective + ], +}) +export class <%=ClassName%> { + public isOpen = true; +} diff --git a/packages/igx-templates/igx-ts/navigation-drawer/default/index.ts b/packages/igx-templates/igx-ts/navigation-drawer/default/index.ts new file mode 100644 index 000000000..bb90038f8 --- /dev/null +++ b/packages/igx-templates/igx-ts/navigation-drawer/default/index.ts @@ -0,0 +1,17 @@ +import { IGNITEUI_ANGULAR_PACKAGE } from "../../../constants"; +import { IgniteUIForAngularTemplate } from "../../../IgniteUIForAngularTemplate"; + +class IgxNavigationDrawerTemplate extends IgniteUIForAngularTemplate { + constructor() { + super(__dirname); + this.components = ["Navigation Drawer"]; + this.controlGroup = "Layouts"; + this.listInComponentTemplates = true; + this.id = "navigation-drawer"; + this.projectType = "igx-ts"; + this.name = "Navigation Drawer"; + this.description = "Basic IgxNavigationDrawer sample"; + this.packages = [IGNITEUI_ANGULAR_PACKAGE]; + } +} +module.exports = new IgxNavigationDrawerTemplate(); diff --git a/packages/igx-templates/igx-ts/navigation-drawer/index.ts b/packages/igx-templates/igx-ts/navigation-drawer/index.ts new file mode 100644 index 000000000..5cfc3840e --- /dev/null +++ b/packages/igx-templates/igx-ts/navigation-drawer/index.ts @@ -0,0 +1,11 @@ +import { BaseComponent } from "@igniteui/cli-core"; + +class IgxNavigationDrawerComponent extends BaseComponent { + constructor() { + super(__dirname); + this.name = "Navigation Drawer"; + this.group = "Layouts"; + this.description = "a container element for side navigation, providing quick access between views"; + } +} +module.exports = new IgxNavigationDrawerComponent(); diff --git a/packages/igx-templates/igx-ts/paginator/default/files/src/app/__path__/__filePrefix__.html b/packages/igx-templates/igx-ts/paginator/default/files/src/app/__path__/__filePrefix__.html new file mode 100644 index 000000000..8e1a839b8 --- /dev/null +++ b/packages/igx-templates/igx-ts/paginator/default/files/src/app/__path__/__filePrefix__.html @@ -0,0 +1,11 @@ +

igx-paginator component sample.

+

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

+ + diff --git a/packages/igx-templates/igx-ts/paginator/default/files/src/app/__path__/__filePrefix__.scss b/packages/igx-templates/igx-ts/paginator/default/files/src/app/__path__/__filePrefix__.scss new file mode 100644 index 000000000..6819fc82a --- /dev/null +++ b/packages/igx-templates/igx-ts/paginator/default/files/src/app/__path__/__filePrefix__.scss @@ -0,0 +1,3 @@ +igx-paginator { + margin: 8px; +} diff --git a/packages/igx-templates/igx-ts/paginator/default/files/src/app/__path__/__filePrefix__.spec.ts b/packages/igx-templates/igx-ts/paginator/default/files/src/app/__path__/__filePrefix__.spec.ts new file mode 100644 index 000000000..8969c4278 --- /dev/null +++ b/packages/igx-templates/igx-ts/paginator/default/files/src/app/__path__/__filePrefix__.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { NoopAnimationsModule } from '@angular/platform-browser/animations'; +import { <%=ClassName%> } from './<%=filePrefix%>'; + +describe('<%=ClassName%>', () => { + let component: <%=ClassName%>; + let fixture: ComponentFixture<<%=ClassName%>>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [NoopAnimationsModule, <%=ClassName%>] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(<%=ClassName%>); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/packages/igx-templates/igx-ts/paginator/default/files/src/app/__path__/__filePrefix__.ts b/packages/igx-templates/igx-ts/paginator/default/files/src/app/__path__/__filePrefix__.ts new file mode 100644 index 000000000..53f1af999 --- /dev/null +++ b/packages/igx-templates/igx-ts/paginator/default/files/src/app/__path__/__filePrefix__.ts @@ -0,0 +1,17 @@ +import { Component } from '@angular/core'; +import { IgxPaginatorComponent } from '<%=igxPackage%>/paginator'; + +@Component({ + selector: 'app-<%=filePrefix%>', + templateUrl: './<%=filePrefix%>.html', + styleUrl: './<%=filePrefix%>.scss', + imports: [IgxPaginatorComponent], +}) +export class <%=ClassName%> { + public totalRecords = 250; + public perPage = 25; + + public onPageChanged(page: number): void { + console.log('page changed', page); + } +} diff --git a/packages/igx-templates/igx-ts/paginator/default/index.ts b/packages/igx-templates/igx-ts/paginator/default/index.ts new file mode 100644 index 000000000..f6142a1e1 --- /dev/null +++ b/packages/igx-templates/igx-ts/paginator/default/index.ts @@ -0,0 +1,17 @@ +import { IGNITEUI_ANGULAR_PACKAGE } from "../../../constants"; +import { IgniteUIForAngularTemplate } from "../../../IgniteUIForAngularTemplate"; + +class IgxPaginatorTemplate extends IgniteUIForAngularTemplate { + constructor() { + super(__dirname); + this.components = ["Paginator"]; + this.controlGroup = "Grids & Lists"; + this.listInComponentTemplates = true; + this.id = "paginator"; + this.projectType = "igx-ts"; + this.name = "Paginator"; + this.description = "Basic IgxPaginator sample"; + this.packages = [IGNITEUI_ANGULAR_PACKAGE]; + } +} +module.exports = new IgxPaginatorTemplate(); diff --git a/packages/igx-templates/igx-ts/paginator/index.ts b/packages/igx-templates/igx-ts/paginator/index.ts new file mode 100644 index 000000000..d7c251db0 --- /dev/null +++ b/packages/igx-templates/igx-ts/paginator/index.ts @@ -0,0 +1,11 @@ +import { BaseComponent } from "@igniteui/cli-core"; + +class IgxPaginatorComponent extends BaseComponent { + constructor() { + super(__dirname); + this.name = "Paginator"; + this.group = "Grids & Lists"; + this.description = "displays paging information and lets users navigate through large data sets"; + } +} +module.exports = new IgxPaginatorComponent(); diff --git a/packages/igx-templates/igx-ts/query-builder/default/files/src/app/__path__/__filePrefix__.html b/packages/igx-templates/igx-ts/query-builder/default/files/src/app/__path__/__filePrefix__.html new file mode 100644 index 000000000..21a5c8598 --- /dev/null +++ b/packages/igx-templates/igx-ts/query-builder/default/files/src/app/__path__/__filePrefix__.html @@ -0,0 +1,5 @@ +

igx-query-builder component sample.

+

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

+ diff --git a/packages/igx-templates/igx-ts/query-builder/default/files/src/app/__path__/__filePrefix__.scss b/packages/igx-templates/igx-ts/query-builder/default/files/src/app/__path__/__filePrefix__.scss new file mode 100644 index 000000000..3ea4643dc --- /dev/null +++ b/packages/igx-templates/igx-ts/query-builder/default/files/src/app/__path__/__filePrefix__.scss @@ -0,0 +1,5 @@ +igx-query-builder { + display: block; + height: 480px; + margin: 8px; +} diff --git a/packages/igx-templates/igx-ts/query-builder/default/files/src/app/__path__/__filePrefix__.spec.ts b/packages/igx-templates/igx-ts/query-builder/default/files/src/app/__path__/__filePrefix__.spec.ts new file mode 100644 index 000000000..9e0c5dcf8 --- /dev/null +++ b/packages/igx-templates/igx-ts/query-builder/default/files/src/app/__path__/__filePrefix__.spec.ts @@ -0,0 +1,26 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { NoopAnimationsModule } from '@angular/platform-browser/animations'; +import { <%=ClassName%> } from './<%=filePrefix%>'; +import { IgxQueryBuilderModule } from '<%=igxPackage%>'; + +describe('<%=ClassName%>', () => { + let component: <%=ClassName%>; + let fixture: ComponentFixture<<%=ClassName%>>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [NoopAnimationsModule, IgxQueryBuilderModule, <%=ClassName%>] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(<%=ClassName%>); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/packages/igx-templates/igx-ts/query-builder/default/files/src/app/__path__/__filePrefix__.ts b/packages/igx-templates/igx-ts/query-builder/default/files/src/app/__path__/__filePrefix__.ts new file mode 100644 index 000000000..118008ceb --- /dev/null +++ b/packages/igx-templates/igx-ts/query-builder/default/files/src/app/__path__/__filePrefix__.ts @@ -0,0 +1,22 @@ +import { Component } from '@angular/core'; +import { IgxQueryBuilderComponent, EntityType } from '<%=igxPackage%>'; + +@Component({ + selector: 'app-<%=filePrefix%>', + templateUrl: './<%=filePrefix%>.html', + styleUrl: './<%=filePrefix%>.scss', + imports: [IgxQueryBuilderComponent], +}) +export class <%=ClassName%> { + public entities: EntityType[] = [ + { + name: 'Products', + fields: [ + { field: 'ProductName', dataType: 'string' }, + { field: 'UnitPrice', dataType: 'number' }, + { field: 'InStock', dataType: 'boolean' }, + { field: 'OrderDate', dataType: 'date' } + ] + } + ]; +} diff --git a/packages/igx-templates/igx-ts/query-builder/default/index.ts b/packages/igx-templates/igx-ts/query-builder/default/index.ts new file mode 100644 index 000000000..10cd8420e --- /dev/null +++ b/packages/igx-templates/igx-ts/query-builder/default/index.ts @@ -0,0 +1,17 @@ +import { IGNITEUI_ANGULAR_PACKAGE } from "../../../constants"; +import { IgniteUIForAngularTemplate } from "../../../IgniteUIForAngularTemplate"; + +class IgxQueryBuilderTemplate extends IgniteUIForAngularTemplate { + constructor() { + super(__dirname); + this.components = ["Query Builder"]; + this.controlGroup = "Grids & Lists"; + this.listInComponentTemplates = true; + this.id = "query-builder"; + this.projectType = "igx-ts"; + this.name = "Query Builder"; + this.description = "Basic IgxQueryBuilder sample"; + this.packages = [IGNITEUI_ANGULAR_PACKAGE]; + } +} +module.exports = new IgxQueryBuilderTemplate(); diff --git a/packages/igx-templates/igx-ts/query-builder/index.ts b/packages/igx-templates/igx-ts/query-builder/index.ts new file mode 100644 index 000000000..815b8d8f2 --- /dev/null +++ b/packages/igx-templates/igx-ts/query-builder/index.ts @@ -0,0 +1,11 @@ +import { BaseComponent } from "@igniteui/cli-core"; + +class IgxQueryBuilderComponent extends BaseComponent { + constructor() { + super(__dirname); + this.name = "Query Builder"; + this.group = "Grids & Lists"; + this.description = "provides a way to build complex queries through the UI"; + } +} +module.exports = new IgxQueryBuilderComponent(); diff --git a/packages/igx-templates/igx-ts/radio/default/files/src/app/__path__/__filePrefix__.html b/packages/igx-templates/igx-ts/radio/default/files/src/app/__path__/__filePrefix__.html new file mode 100644 index 000000000..9051a6014 --- /dev/null +++ b/packages/igx-templates/igx-ts/radio/default/files/src/app/__path__/__filePrefix__.html @@ -0,0 +1,7 @@ +

igx-radio component sample.

+

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

+@for (option of options; track option) { + {{ option }} +} diff --git a/packages/igx-templates/igx-ts/radio/default/files/src/app/__path__/__filePrefix__.scss b/packages/igx-templates/igx-ts/radio/default/files/src/app/__path__/__filePrefix__.scss new file mode 100644 index 000000000..2cfec17d1 --- /dev/null +++ b/packages/igx-templates/igx-ts/radio/default/files/src/app/__path__/__filePrefix__.scss @@ -0,0 +1,4 @@ +igx-radio { + display: block; + margin: 8px; +} diff --git a/packages/igx-templates/igx-ts/radio/default/files/src/app/__path__/__filePrefix__.spec.ts b/packages/igx-templates/igx-ts/radio/default/files/src/app/__path__/__filePrefix__.spec.ts new file mode 100644 index 000000000..31255d375 --- /dev/null +++ b/packages/igx-templates/igx-ts/radio/default/files/src/app/__path__/__filePrefix__.spec.ts @@ -0,0 +1,26 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { NoopAnimationsModule } from '@angular/platform-browser/animations'; +import { <%=ClassName%> } from './<%=filePrefix%>'; +import { IgxRadioModule } from '<%=igxPackage%>'; + +describe('<%=ClassName%>', () => { + let component: <%=ClassName%>; + let fixture: ComponentFixture<<%=ClassName%>>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [NoopAnimationsModule, IgxRadioModule, <%=ClassName%>] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(<%=ClassName%>); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/packages/igx-templates/igx-ts/radio/default/files/src/app/__path__/__filePrefix__.ts b/packages/igx-templates/igx-ts/radio/default/files/src/app/__path__/__filePrefix__.ts new file mode 100644 index 000000000..daee7d0cb --- /dev/null +++ b/packages/igx-templates/igx-ts/radio/default/files/src/app/__path__/__filePrefix__.ts @@ -0,0 +1,14 @@ +import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { IgxRadioComponent } from '<%=igxPackage%>'; + +@Component({ + selector: 'app-<%=filePrefix%>', + templateUrl: './<%=filePrefix%>.html', + styleUrl: './<%=filePrefix%>.scss', + imports: [FormsModule, IgxRadioComponent], +}) +export class <%=ClassName%> { + public options = ['Small', 'Medium', 'Large']; + public selected = 'Medium'; +} diff --git a/packages/igx-templates/igx-ts/radio/default/index.ts b/packages/igx-templates/igx-ts/radio/default/index.ts new file mode 100644 index 000000000..9b88a1ac7 --- /dev/null +++ b/packages/igx-templates/igx-ts/radio/default/index.ts @@ -0,0 +1,17 @@ +import { IGNITEUI_ANGULAR_PACKAGE } from "../../../constants"; +import { IgniteUIForAngularTemplate } from "../../../IgniteUIForAngularTemplate"; + +class IgxRadioTemplate extends IgniteUIForAngularTemplate { + constructor() { + super(__dirname); + this.components = ["Radio"]; + this.controlGroup = "Data Entry & Display"; + this.listInComponentTemplates = true; + this.id = "radio"; + this.projectType = "igx-ts"; + this.name = "Radio"; + this.description = "Basic IgxRadio sample"; + this.packages = [IGNITEUI_ANGULAR_PACKAGE]; + } +} +module.exports = new IgxRadioTemplate(); diff --git a/packages/igx-templates/igx-ts/radio/index.ts b/packages/igx-templates/igx-ts/radio/index.ts new file mode 100644 index 000000000..158dc2d5e --- /dev/null +++ b/packages/igx-templates/igx-ts/radio/index.ts @@ -0,0 +1,11 @@ +import { BaseComponent } from "@igniteui/cli-core"; + +class IgxRadioComponent extends BaseComponent { + constructor() { + super(__dirname); + this.name = "Radio"; + this.group = "Data Entry & Display"; + this.description = "renders a set of radio buttons to allow the user to make a single choice"; + } +} +module.exports = new IgxRadioComponent(); diff --git a/packages/igx-templates/igx-ts/rating/default/files/src/app/__path__/__filePrefix__.html b/packages/igx-templates/igx-ts/rating/default/files/src/app/__path__/__filePrefix__.html new file mode 100644 index 000000000..006ed229a --- /dev/null +++ b/packages/igx-templates/igx-ts/rating/default/files/src/app/__path__/__filePrefix__.html @@ -0,0 +1,4 @@ +

igc-rating component sample.

+

You can read more about configuring the igc-rating component in the +official documentation.

+ diff --git a/packages/igx-templates/igx-ts/rating/default/files/src/app/__path__/__filePrefix__.scss b/packages/igx-templates/igx-ts/rating/default/files/src/app/__path__/__filePrefix__.scss new file mode 100644 index 000000000..57314c4b1 --- /dev/null +++ b/packages/igx-templates/igx-ts/rating/default/files/src/app/__path__/__filePrefix__.scss @@ -0,0 +1,4 @@ +igc-rating { + display: block; + margin: 8px; +} diff --git a/packages/igx-templates/igx-ts/rating/default/files/src/app/__path__/__filePrefix__.spec.ts b/packages/igx-templates/igx-ts/rating/default/files/src/app/__path__/__filePrefix__.spec.ts new file mode 100644 index 000000000..8969c4278 --- /dev/null +++ b/packages/igx-templates/igx-ts/rating/default/files/src/app/__path__/__filePrefix__.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { NoopAnimationsModule } from '@angular/platform-browser/animations'; +import { <%=ClassName%> } from './<%=filePrefix%>'; + +describe('<%=ClassName%>', () => { + let component: <%=ClassName%>; + let fixture: ComponentFixture<<%=ClassName%>>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [NoopAnimationsModule, <%=ClassName%>] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(<%=ClassName%>); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/packages/igx-templates/igx-ts/rating/default/files/src/app/__path__/__filePrefix__.ts b/packages/igx-templates/igx-ts/rating/default/files/src/app/__path__/__filePrefix__.ts new file mode 100644 index 000000000..ccb6316df --- /dev/null +++ b/packages/igx-templates/igx-ts/rating/default/files/src/app/__path__/__filePrefix__.ts @@ -0,0 +1,13 @@ +import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; +import { defineComponents, IgcRatingComponent } from 'igniteui-webcomponents'; + +defineComponents(IgcRatingComponent); + +@Component({ + selector: 'app-<%=filePrefix%>', + templateUrl: './<%=filePrefix%>.html', + styleUrl: './<%=filePrefix%>.scss', + schemas: [CUSTOM_ELEMENTS_SCHEMA] +}) +export class <%=ClassName%> { +} diff --git a/packages/igx-templates/igx-ts/rating/default/index.ts b/packages/igx-templates/igx-ts/rating/default/index.ts new file mode 100644 index 000000000..7bdde2805 --- /dev/null +++ b/packages/igx-templates/igx-ts/rating/default/index.ts @@ -0,0 +1,16 @@ +import { IgniteUIForAngularTemplate } from "../../../IgniteUIForAngularTemplate"; + +class IgxRatingTemplate extends IgniteUIForAngularTemplate { + constructor() { + super(__dirname); + this.components = ["Rating"]; + this.controlGroup = "Data Entry & Display"; + this.listInComponentTemplates = true; + this.id = "rating"; + this.projectType = "igx-ts"; + this.name = "Rating"; + this.description = "Basic igc-rating sample"; + this.packages = ["igniteui-webcomponents@^7.2.1"]; + } +} +module.exports = new IgxRatingTemplate(); diff --git a/packages/igx-templates/igx-ts/rating/index.ts b/packages/igx-templates/igx-ts/rating/index.ts new file mode 100644 index 000000000..077917745 --- /dev/null +++ b/packages/igx-templates/igx-ts/rating/index.ts @@ -0,0 +1,11 @@ +import { BaseComponent } from "@igniteui/cli-core"; + +class IgxRatingComponent extends BaseComponent { + constructor() { + super(__dirname); + this.name = "Rating"; + this.group = "Data Entry & Display"; + this.description = "allows users to select a value from a range of rating symbols"; + } +} +module.exports = new IgxRatingComponent(); diff --git a/packages/igx-templates/igx-ts/ripple/default/files/src/app/__path__/__filePrefix__.html b/packages/igx-templates/igx-ts/ripple/default/files/src/app/__path__/__filePrefix__.html new file mode 100644 index 000000000..d7eb2751c --- /dev/null +++ b/packages/igx-templates/igx-ts/ripple/default/files/src/app/__path__/__filePrefix__.html @@ -0,0 +1,6 @@ +

igxRipple directive sample.

+

You can read more about configuring the igxRipple directive in the +README or the +official documentation.

+
Click me
+
Centered ripple
diff --git a/packages/igx-templates/igx-ts/ripple/default/files/src/app/__path__/__filePrefix__.scss b/packages/igx-templates/igx-ts/ripple/default/files/src/app/__path__/__filePrefix__.scss new file mode 100644 index 000000000..4790884c4 --- /dev/null +++ b/packages/igx-templates/igx-ts/ripple/default/files/src/app/__path__/__filePrefix__.scss @@ -0,0 +1,12 @@ +.ripple-box { + display: inline-flex; + align-items: center; + justify-content: center; + width: 160px; + height: 80px; + margin: 8px; + border: 1px solid rgba(0, 0, 0, 0.25); + overflow: hidden; + position: relative; + cursor: pointer; +} diff --git a/packages/igx-templates/igx-ts/ripple/default/files/src/app/__path__/__filePrefix__.spec.ts b/packages/igx-templates/igx-ts/ripple/default/files/src/app/__path__/__filePrefix__.spec.ts new file mode 100644 index 000000000..d221ea8e2 --- /dev/null +++ b/packages/igx-templates/igx-ts/ripple/default/files/src/app/__path__/__filePrefix__.spec.ts @@ -0,0 +1,26 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { NoopAnimationsModule } from '@angular/platform-browser/animations'; +import { <%=ClassName%> } from './<%=filePrefix%>'; +import { IgxRippleModule } from '<%=igxPackage%>'; + +describe('<%=ClassName%>', () => { + let component: <%=ClassName%>; + let fixture: ComponentFixture<<%=ClassName%>>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [NoopAnimationsModule, IgxRippleModule, <%=ClassName%>] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(<%=ClassName%>); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/packages/igx-templates/igx-ts/ripple/default/files/src/app/__path__/__filePrefix__.ts b/packages/igx-templates/igx-ts/ripple/default/files/src/app/__path__/__filePrefix__.ts new file mode 100644 index 000000000..85c91d99d --- /dev/null +++ b/packages/igx-templates/igx-ts/ripple/default/files/src/app/__path__/__filePrefix__.ts @@ -0,0 +1,11 @@ +import { Component } from '@angular/core'; +import { IgxRippleDirective } from '<%=igxPackage%>'; + +@Component({ + selector: 'app-<%=filePrefix%>', + templateUrl: './<%=filePrefix%>.html', + styleUrl: './<%=filePrefix%>.scss', + imports: [IgxRippleDirective], +}) +export class <%=ClassName%> { +} diff --git a/packages/igx-templates/igx-ts/ripple/default/index.ts b/packages/igx-templates/igx-ts/ripple/default/index.ts new file mode 100644 index 000000000..ade61c46b --- /dev/null +++ b/packages/igx-templates/igx-ts/ripple/default/index.ts @@ -0,0 +1,17 @@ +import { IGNITEUI_ANGULAR_PACKAGE } from "../../../constants"; +import { IgniteUIForAngularTemplate } from "../../../IgniteUIForAngularTemplate"; + +class IgxRippleTemplate extends IgniteUIForAngularTemplate { + constructor() { + super(__dirname); + this.components = ["Ripple"]; + this.controlGroup = "Interactions"; + this.listInComponentTemplates = true; + this.id = "ripple"; + this.projectType = "igx-ts"; + this.name = "Ripple"; + this.description = "Basic igxRipple sample"; + this.packages = [IGNITEUI_ANGULAR_PACKAGE]; + } +} +module.exports = new IgxRippleTemplate(); diff --git a/packages/igx-templates/igx-ts/ripple/index.ts b/packages/igx-templates/igx-ts/ripple/index.ts new file mode 100644 index 000000000..cfe6e5fe9 --- /dev/null +++ b/packages/igx-templates/igx-ts/ripple/index.ts @@ -0,0 +1,11 @@ +import { BaseComponent } from "@igniteui/cli-core"; + +class IgxRippleComponent extends BaseComponent { + constructor() { + super(__dirname); + this.name = "Ripple"; + this.group = "Interactions"; + this.description = "defines an area in which a ripple animates in response to a user action"; + } +} +module.exports = new IgxRippleComponent(); diff --git a/packages/igx-templates/igx-ts/simple-combo/default/files/src/app/__path__/__filePrefix__.html b/packages/igx-templates/igx-ts/simple-combo/default/files/src/app/__path__/__filePrefix__.html new file mode 100644 index 000000000..bb705e715 --- /dev/null +++ b/packages/igx-templates/igx-ts/simple-combo/default/files/src/app/__path__/__filePrefix__.html @@ -0,0 +1,5 @@ +

igx-simple-combo component sample.

+

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

+ diff --git a/packages/igx-templates/igx-ts/simple-combo/default/files/src/app/__path__/__filePrefix__.scss b/packages/igx-templates/igx-ts/simple-combo/default/files/src/app/__path__/__filePrefix__.scss new file mode 100644 index 000000000..315363e93 --- /dev/null +++ b/packages/igx-templates/igx-ts/simple-combo/default/files/src/app/__path__/__filePrefix__.scss @@ -0,0 +1,4 @@ +igx-simple-combo { + max-width: 320px; + margin: 8px; +} diff --git a/packages/igx-templates/igx-ts/simple-combo/default/files/src/app/__path__/__filePrefix__.spec.ts b/packages/igx-templates/igx-ts/simple-combo/default/files/src/app/__path__/__filePrefix__.spec.ts new file mode 100644 index 000000000..2d63802d6 --- /dev/null +++ b/packages/igx-templates/igx-ts/simple-combo/default/files/src/app/__path__/__filePrefix__.spec.ts @@ -0,0 +1,26 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { NoopAnimationsModule } from '@angular/platform-browser/animations'; +import { <%=ClassName%> } from './<%=filePrefix%>'; +import { IgxSimpleComboModule } from '<%=igxPackage%>'; + +describe('<%=ClassName%>', () => { + let component: <%=ClassName%>; + let fixture: ComponentFixture<<%=ClassName%>>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [NoopAnimationsModule, IgxSimpleComboModule, <%=ClassName%>] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(<%=ClassName%>); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/packages/igx-templates/igx-ts/simple-combo/default/files/src/app/__path__/__filePrefix__.ts b/packages/igx-templates/igx-ts/simple-combo/default/files/src/app/__path__/__filePrefix__.ts new file mode 100644 index 000000000..3c97ad74a --- /dev/null +++ b/packages/igx-templates/igx-ts/simple-combo/default/files/src/app/__path__/__filePrefix__.ts @@ -0,0 +1,16 @@ +import { Component } from '@angular/core'; +import { IgxSimpleComboComponent } from '<%=igxPackage%>'; + +@Component({ + selector: 'app-<%=filePrefix%>', + templateUrl: './<%=filePrefix%>.html', + styleUrl: './<%=filePrefix%>.scss', + imports: [IgxSimpleComboComponent], +}) +export class <%=ClassName%> { + public localData = [ + { ProductID: 1, ProductName: 'Chai' }, + { ProductID: 2, ProductName: 'Chang' }, + { ProductID: 3, ProductName: 'Aniseed Syrup' } + ]; +} diff --git a/packages/igx-templates/igx-ts/simple-combo/default/index.ts b/packages/igx-templates/igx-ts/simple-combo/default/index.ts new file mode 100644 index 000000000..e70637237 --- /dev/null +++ b/packages/igx-templates/igx-ts/simple-combo/default/index.ts @@ -0,0 +1,17 @@ +import { IGNITEUI_ANGULAR_PACKAGE } from "../../../constants"; +import { IgniteUIForAngularTemplate } from "../../../IgniteUIForAngularTemplate"; + +class IgxSimpleComboTemplate extends IgniteUIForAngularTemplate { + constructor() { + super(__dirname); + this.components = ["Simple Combo"]; + this.controlGroup = "Grids & Lists"; + this.listInComponentTemplates = true; + this.id = "simple-combo"; + this.projectType = "igx-ts"; + this.name = "Simple Combo"; + this.description = "Basic IgxSimpleCombo sample"; + this.packages = [IGNITEUI_ANGULAR_PACKAGE]; + } +} +module.exports = new IgxSimpleComboTemplate(); diff --git a/packages/igx-templates/igx-ts/simple-combo/index.ts b/packages/igx-templates/igx-ts/simple-combo/index.ts new file mode 100644 index 000000000..10e6f07a9 --- /dev/null +++ b/packages/igx-templates/igx-ts/simple-combo/index.ts @@ -0,0 +1,11 @@ +import { BaseComponent } from "@igniteui/cli-core"; + +class IgxSimpleComboComponent extends BaseComponent { + constructor() { + super(__dirname); + this.name = "Simple Combo"; + this.group = "Grids & Lists"; + this.description = "a single-selection combo with editable input for filtering data"; + } +} +module.exports = new IgxSimpleComboComponent(); diff --git a/packages/igx-templates/igx-ts/slider/default/files/src/app/__path__/__filePrefix__.html b/packages/igx-templates/igx-ts/slider/default/files/src/app/__path__/__filePrefix__.html new file mode 100644 index 000000000..3cbc24032 --- /dev/null +++ b/packages/igx-templates/igx-ts/slider/default/files/src/app/__path__/__filePrefix__.html @@ -0,0 +1,5 @@ +

igx-slider component sample.

+

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

+ diff --git a/packages/igx-templates/igx-ts/slider/default/files/src/app/__path__/__filePrefix__.scss b/packages/igx-templates/igx-ts/slider/default/files/src/app/__path__/__filePrefix__.scss new file mode 100644 index 000000000..4f23d2fe9 --- /dev/null +++ b/packages/igx-templates/igx-ts/slider/default/files/src/app/__path__/__filePrefix__.scss @@ -0,0 +1,4 @@ +igx-slider { + max-width: 400px; + margin: 8px; +} diff --git a/packages/igx-templates/igx-ts/slider/default/files/src/app/__path__/__filePrefix__.spec.ts b/packages/igx-templates/igx-ts/slider/default/files/src/app/__path__/__filePrefix__.spec.ts new file mode 100644 index 000000000..cb162c795 --- /dev/null +++ b/packages/igx-templates/igx-ts/slider/default/files/src/app/__path__/__filePrefix__.spec.ts @@ -0,0 +1,26 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { NoopAnimationsModule } from '@angular/platform-browser/animations'; +import { <%=ClassName%> } from './<%=filePrefix%>'; +import { IgxSliderModule } from '<%=igxPackage%>'; + +describe('<%=ClassName%>', () => { + let component: <%=ClassName%>; + let fixture: ComponentFixture<<%=ClassName%>>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [NoopAnimationsModule, IgxSliderModule, <%=ClassName%>] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(<%=ClassName%>); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/packages/igx-templates/igx-ts/slider/default/files/src/app/__path__/__filePrefix__.ts b/packages/igx-templates/igx-ts/slider/default/files/src/app/__path__/__filePrefix__.ts new file mode 100644 index 000000000..f29439c03 --- /dev/null +++ b/packages/igx-templates/igx-ts/slider/default/files/src/app/__path__/__filePrefix__.ts @@ -0,0 +1,11 @@ +import { Component } from '@angular/core'; +import { IgxSliderComponent } from '<%=igxPackage%>'; + +@Component({ + selector: 'app-<%=filePrefix%>', + templateUrl: './<%=filePrefix%>.html', + styleUrl: './<%=filePrefix%>.scss', + imports: [IgxSliderComponent], +}) +export class <%=ClassName%> { +} diff --git a/packages/igx-templates/igx-ts/slider/default/index.ts b/packages/igx-templates/igx-ts/slider/default/index.ts new file mode 100644 index 000000000..4646e3800 --- /dev/null +++ b/packages/igx-templates/igx-ts/slider/default/index.ts @@ -0,0 +1,17 @@ +import { IGNITEUI_ANGULAR_PACKAGE } from "../../../constants"; +import { IgniteUIForAngularTemplate } from "../../../IgniteUIForAngularTemplate"; + +class IgxSliderTemplate extends IgniteUIForAngularTemplate { + constructor() { + super(__dirname); + this.components = ["Slider"]; + this.controlGroup = "Interactions"; + this.listInComponentTemplates = true; + this.id = "slider"; + this.projectType = "igx-ts"; + this.name = "Slider"; + this.description = "Basic IgxSlider sample"; + this.packages = [IGNITEUI_ANGULAR_PACKAGE]; + } +} +module.exports = new IgxSliderTemplate(); diff --git a/packages/igx-templates/igx-ts/slider/index.ts b/packages/igx-templates/igx-ts/slider/index.ts new file mode 100644 index 000000000..001b628a3 --- /dev/null +++ b/packages/igx-templates/igx-ts/slider/index.ts @@ -0,0 +1,11 @@ +import { BaseComponent } from "@igniteui/cli-core"; + +class IgxSliderComponent extends BaseComponent { + constructor() { + super(__dirname); + this.name = "Slider"; + this.group = "Interactions"; + this.description = "allows users to select a single value or a range from a set of values"; + } +} +module.exports = new IgxSliderComponent(); diff --git a/packages/igx-templates/igx-ts/snackbar/default/files/src/app/__path__/__filePrefix__.html b/packages/igx-templates/igx-ts/snackbar/default/files/src/app/__path__/__filePrefix__.html new file mode 100644 index 000000000..f43a222eb --- /dev/null +++ b/packages/igx-templates/igx-ts/snackbar/default/files/src/app/__path__/__filePrefix__.html @@ -0,0 +1,10 @@ +

igx-snackbar component sample.

+

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

+ + + diff --git a/packages/igx-templates/igx-ts/snackbar/default/files/src/app/__path__/__filePrefix__.scss b/packages/igx-templates/igx-ts/snackbar/default/files/src/app/__path__/__filePrefix__.scss new file mode 100644 index 000000000..56d5205c0 --- /dev/null +++ b/packages/igx-templates/igx-ts/snackbar/default/files/src/app/__path__/__filePrefix__.scss @@ -0,0 +1,3 @@ +button { + margin: 8px; +} diff --git a/packages/igx-templates/igx-ts/snackbar/default/files/src/app/__path__/__filePrefix__.spec.ts b/packages/igx-templates/igx-ts/snackbar/default/files/src/app/__path__/__filePrefix__.spec.ts new file mode 100644 index 000000000..38c83ca44 --- /dev/null +++ b/packages/igx-templates/igx-ts/snackbar/default/files/src/app/__path__/__filePrefix__.spec.ts @@ -0,0 +1,26 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { NoopAnimationsModule } from '@angular/platform-browser/animations'; +import { <%=ClassName%> } from './<%=filePrefix%>'; +import { IgxSnackbarModule } from '<%=igxPackage%>'; + +describe('<%=ClassName%>', () => { + let component: <%=ClassName%>; + let fixture: ComponentFixture<<%=ClassName%>>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [NoopAnimationsModule, IgxSnackbarModule, <%=ClassName%>] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(<%=ClassName%>); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/packages/igx-templates/igx-ts/snackbar/default/files/src/app/__path__/__filePrefix__.ts b/packages/igx-templates/igx-ts/snackbar/default/files/src/app/__path__/__filePrefix__.ts new file mode 100644 index 000000000..51325b9ab --- /dev/null +++ b/packages/igx-templates/igx-ts/snackbar/default/files/src/app/__path__/__filePrefix__.ts @@ -0,0 +1,13 @@ +import { Component, ViewChild } from '@angular/core'; +import { IgxSnackbarComponent, IgxButtonDirective } from '<%=igxPackage%>'; + +@Component({ + selector: 'app-<%=filePrefix%>', + templateUrl: './<%=filePrefix%>.html', + styleUrl: './<%=filePrefix%>.scss', + imports: [IgxSnackbarComponent, IgxButtonDirective], +}) +export class <%=ClassName%> { + @ViewChild(IgxSnackbarComponent, { static: true }) + public snackbar!: IgxSnackbarComponent; +} diff --git a/packages/igx-templates/igx-ts/snackbar/default/index.ts b/packages/igx-templates/igx-ts/snackbar/default/index.ts new file mode 100644 index 000000000..f03c22ffa --- /dev/null +++ b/packages/igx-templates/igx-ts/snackbar/default/index.ts @@ -0,0 +1,17 @@ +import { IGNITEUI_ANGULAR_PACKAGE } from "../../../constants"; +import { IgniteUIForAngularTemplate } from "../../../IgniteUIForAngularTemplate"; + +class IgxSnackbarTemplate extends IgniteUIForAngularTemplate { + constructor() { + super(__dirname); + this.components = ["Snackbar"]; + this.controlGroup = "Interactions"; + this.listInComponentTemplates = true; + this.id = "snackbar"; + this.projectType = "igx-ts"; + this.name = "Snackbar"; + this.description = "Basic IgxSnackbar sample"; + this.packages = [IGNITEUI_ANGULAR_PACKAGE]; + } +} +module.exports = new IgxSnackbarTemplate(); diff --git a/packages/igx-templates/igx-ts/snackbar/index.ts b/packages/igx-templates/igx-ts/snackbar/index.ts new file mode 100644 index 000000000..963a42718 --- /dev/null +++ b/packages/igx-templates/igx-ts/snackbar/index.ts @@ -0,0 +1,11 @@ +import { BaseComponent } from "@igniteui/cli-core"; + +class IgxSnackbarComponent extends BaseComponent { + constructor() { + super(__dirname); + this.name = "Snackbar"; + this.group = "Interactions"; + this.description = "provides feedback about an operation by showing a brief message"; + } +} +module.exports = new IgxSnackbarComponent(); diff --git a/packages/igx-templates/igx-ts/splitter/default/files/src/app/__path__/__filePrefix__.html b/packages/igx-templates/igx-ts/splitter/default/files/src/app/__path__/__filePrefix__.html new file mode 100644 index 000000000..2e38860f0 --- /dev/null +++ b/packages/igx-templates/igx-ts/splitter/default/files/src/app/__path__/__filePrefix__.html @@ -0,0 +1,8 @@ +

igx-splitter component sample.

+

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

+ + Navigation + Content + diff --git a/packages/igx-templates/igx-ts/splitter/default/files/src/app/__path__/__filePrefix__.scss b/packages/igx-templates/igx-ts/splitter/default/files/src/app/__path__/__filePrefix__.scss new file mode 100644 index 000000000..6e03e72d0 --- /dev/null +++ b/packages/igx-templates/igx-ts/splitter/default/files/src/app/__path__/__filePrefix__.scss @@ -0,0 +1,9 @@ +igx-splitter { + display: block; + height: 240px; + margin: 8px; +} + +igx-splitter-pane { + padding: 8px; +} diff --git a/packages/igx-templates/igx-ts/splitter/default/files/src/app/__path__/__filePrefix__.spec.ts b/packages/igx-templates/igx-ts/splitter/default/files/src/app/__path__/__filePrefix__.spec.ts new file mode 100644 index 000000000..8969c4278 --- /dev/null +++ b/packages/igx-templates/igx-ts/splitter/default/files/src/app/__path__/__filePrefix__.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { NoopAnimationsModule } from '@angular/platform-browser/animations'; +import { <%=ClassName%> } from './<%=filePrefix%>'; + +describe('<%=ClassName%>', () => { + let component: <%=ClassName%>; + let fixture: ComponentFixture<<%=ClassName%>>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [NoopAnimationsModule, <%=ClassName%>] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(<%=ClassName%>); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/packages/igx-templates/igx-ts/splitter/default/files/src/app/__path__/__filePrefix__.ts b/packages/igx-templates/igx-ts/splitter/default/files/src/app/__path__/__filePrefix__.ts new file mode 100644 index 000000000..b47fde6cd --- /dev/null +++ b/packages/igx-templates/igx-ts/splitter/default/files/src/app/__path__/__filePrefix__.ts @@ -0,0 +1,12 @@ +import { Component } from '@angular/core'; +import { IGX_SPLITTER_DIRECTIVES, SplitterType } from '<%=igxPackage%>/splitter'; + +@Component({ + selector: 'app-<%=filePrefix%>', + templateUrl: './<%=filePrefix%>.html', + styleUrl: './<%=filePrefix%>.scss', + imports: [IGX_SPLITTER_DIRECTIVES], +}) +export class <%=ClassName%> { + public orientation = SplitterType.Horizontal; +} diff --git a/packages/igx-templates/igx-ts/splitter/default/index.ts b/packages/igx-templates/igx-ts/splitter/default/index.ts new file mode 100644 index 000000000..09af9305c --- /dev/null +++ b/packages/igx-templates/igx-ts/splitter/default/index.ts @@ -0,0 +1,17 @@ +import { IGNITEUI_ANGULAR_PACKAGE } from "../../../constants"; +import { IgniteUIForAngularTemplate } from "../../../IgniteUIForAngularTemplate"; + +class IgxSplitterTemplate extends IgniteUIForAngularTemplate { + constructor() { + super(__dirname); + this.components = ["Splitter"]; + this.controlGroup = "Layouts"; + this.listInComponentTemplates = true; + this.id = "splitter"; + this.projectType = "igx-ts"; + this.name = "Splitter"; + this.description = "Basic IgxSplitter sample"; + this.packages = [IGNITEUI_ANGULAR_PACKAGE]; + } +} +module.exports = new IgxSplitterTemplate(); diff --git a/packages/igx-templates/igx-ts/splitter/index.ts b/packages/igx-templates/igx-ts/splitter/index.ts new file mode 100644 index 000000000..42ada8024 --- /dev/null +++ b/packages/igx-templates/igx-ts/splitter/index.ts @@ -0,0 +1,11 @@ +import { BaseComponent } from "@igniteui/cli-core"; + +class IgxSplitterComponent extends BaseComponent { + constructor() { + super(__dirname); + this.name = "Splitter"; + this.group = "Layouts"; + this.description = "a responsive layout component to divide content with live resizing and collapse behavior"; + } +} +module.exports = new IgxSplitterComponent(); diff --git a/packages/igx-templates/igx-ts/switch/default/files/src/app/__path__/__filePrefix__.html b/packages/igx-templates/igx-ts/switch/default/files/src/app/__path__/__filePrefix__.html new file mode 100644 index 000000000..bd2dd0fbd --- /dev/null +++ b/packages/igx-templates/igx-ts/switch/default/files/src/app/__path__/__filePrefix__.html @@ -0,0 +1,11 @@ +

igx-switch component sample.

+

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

+ diff --git a/packages/igx-templates/igx-ts/switch/default/files/src/app/__path__/__filePrefix__.scss b/packages/igx-templates/igx-ts/switch/default/files/src/app/__path__/__filePrefix__.scss new file mode 100644 index 000000000..af98ee7bc --- /dev/null +++ b/packages/igx-templates/igx-ts/switch/default/files/src/app/__path__/__filePrefix__.scss @@ -0,0 +1,5 @@ +.task-list { + list-style: none; + margin: 8px; + padding: 0; +} diff --git a/packages/igx-templates/igx-ts/switch/default/files/src/app/__path__/__filePrefix__.spec.ts b/packages/igx-templates/igx-ts/switch/default/files/src/app/__path__/__filePrefix__.spec.ts new file mode 100644 index 000000000..48ffa96f6 --- /dev/null +++ b/packages/igx-templates/igx-ts/switch/default/files/src/app/__path__/__filePrefix__.spec.ts @@ -0,0 +1,26 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { NoopAnimationsModule } from '@angular/platform-browser/animations'; +import { <%=ClassName%> } from './<%=filePrefix%>'; +import { IgxSwitchModule } from '<%=igxPackage%>'; + +describe('<%=ClassName%>', () => { + let component: <%=ClassName%>; + let fixture: ComponentFixture<<%=ClassName%>>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [NoopAnimationsModule, IgxSwitchModule, <%=ClassName%>] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(<%=ClassName%>); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/packages/igx-templates/igx-ts/switch/default/files/src/app/__path__/__filePrefix__.ts b/packages/igx-templates/igx-ts/switch/default/files/src/app/__path__/__filePrefix__.ts new file mode 100644 index 000000000..fc0b13d82 --- /dev/null +++ b/packages/igx-templates/igx-ts/switch/default/files/src/app/__path__/__filePrefix__.ts @@ -0,0 +1,16 @@ +import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { IgxSwitchComponent } from '<%=igxPackage%>'; + +@Component({ + selector: 'app-<%=filePrefix%>', + templateUrl: './<%=filePrefix%>.html', + styleUrl: './<%=filePrefix%>.scss', + imports: [FormsModule, IgxSwitchComponent], +}) +export class <%=ClassName%> { + public tasks = [ + { description: 'Enable notifications', done: true }, + { description: 'Enable dark mode', done: false } + ]; +} diff --git a/packages/igx-templates/igx-ts/switch/default/index.ts b/packages/igx-templates/igx-ts/switch/default/index.ts new file mode 100644 index 000000000..cd3223811 --- /dev/null +++ b/packages/igx-templates/igx-ts/switch/default/index.ts @@ -0,0 +1,17 @@ +import { IGNITEUI_ANGULAR_PACKAGE } from "../../../constants"; +import { IgniteUIForAngularTemplate } from "../../../IgniteUIForAngularTemplate"; + +class IgxSwitchTemplate extends IgniteUIForAngularTemplate { + constructor() { + super(__dirname); + this.components = ["Switch"]; + this.controlGroup = "Data Entry & Display"; + this.listInComponentTemplates = true; + this.id = "switch"; + this.projectType = "igx-ts"; + this.name = "Switch"; + this.description = "Basic IgxSwitch sample"; + this.packages = [IGNITEUI_ANGULAR_PACKAGE]; + } +} +module.exports = new IgxSwitchTemplate(); diff --git a/packages/igx-templates/igx-ts/switch/index.ts b/packages/igx-templates/igx-ts/switch/index.ts new file mode 100644 index 000000000..6949a7bfc --- /dev/null +++ b/packages/igx-templates/igx-ts/switch/index.ts @@ -0,0 +1,11 @@ +import { BaseComponent } from "@igniteui/cli-core"; + +class IgxSwitchComponent extends BaseComponent { + constructor() { + super(__dirname); + this.name = "Switch"; + this.group = "Data Entry & Display"; + this.description = "a selection component that allows users to make a binary choice for a condition"; + } +} +module.exports = new IgxSwitchComponent(); diff --git a/packages/igx-templates/igx-ts/toast/default/files/src/app/__path__/__filePrefix__.html b/packages/igx-templates/igx-ts/toast/default/files/src/app/__path__/__filePrefix__.html new file mode 100644 index 000000000..2cb397242 --- /dev/null +++ b/packages/igx-templates/igx-ts/toast/default/files/src/app/__path__/__filePrefix__.html @@ -0,0 +1,6 @@ +

igx-toast component sample.

+

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

+ +Well, hi there! diff --git a/packages/igx-templates/igx-ts/toast/default/files/src/app/__path__/__filePrefix__.scss b/packages/igx-templates/igx-ts/toast/default/files/src/app/__path__/__filePrefix__.scss new file mode 100644 index 000000000..56d5205c0 --- /dev/null +++ b/packages/igx-templates/igx-ts/toast/default/files/src/app/__path__/__filePrefix__.scss @@ -0,0 +1,3 @@ +button { + margin: 8px; +} diff --git a/packages/igx-templates/igx-ts/toast/default/files/src/app/__path__/__filePrefix__.spec.ts b/packages/igx-templates/igx-ts/toast/default/files/src/app/__path__/__filePrefix__.spec.ts new file mode 100644 index 000000000..3050fcd21 --- /dev/null +++ b/packages/igx-templates/igx-ts/toast/default/files/src/app/__path__/__filePrefix__.spec.ts @@ -0,0 +1,26 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { NoopAnimationsModule } from '@angular/platform-browser/animations'; +import { <%=ClassName%> } from './<%=filePrefix%>'; +import { IgxToastModule } from '<%=igxPackage%>'; + +describe('<%=ClassName%>', () => { + let component: <%=ClassName%>; + let fixture: ComponentFixture<<%=ClassName%>>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [NoopAnimationsModule, IgxToastModule, <%=ClassName%>] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(<%=ClassName%>); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/packages/igx-templates/igx-ts/toast/default/files/src/app/__path__/__filePrefix__.ts b/packages/igx-templates/igx-ts/toast/default/files/src/app/__path__/__filePrefix__.ts new file mode 100644 index 000000000..00a5ed9a2 --- /dev/null +++ b/packages/igx-templates/igx-ts/toast/default/files/src/app/__path__/__filePrefix__.ts @@ -0,0 +1,13 @@ +import { Component, ViewChild } from '@angular/core'; +import { IgxToastComponent, IgxButtonDirective } from '<%=igxPackage%>'; + +@Component({ + selector: 'app-<%=filePrefix%>', + templateUrl: './<%=filePrefix%>.html', + styleUrl: './<%=filePrefix%>.scss', + imports: [IgxToastComponent, IgxButtonDirective], +}) +export class <%=ClassName%> { + @ViewChild(IgxToastComponent, { static: true }) + public toast!: IgxToastComponent; +} diff --git a/packages/igx-templates/igx-ts/toast/default/index.ts b/packages/igx-templates/igx-ts/toast/default/index.ts new file mode 100644 index 000000000..b92cee839 --- /dev/null +++ b/packages/igx-templates/igx-ts/toast/default/index.ts @@ -0,0 +1,17 @@ +import { IGNITEUI_ANGULAR_PACKAGE } from "../../../constants"; +import { IgniteUIForAngularTemplate } from "../../../IgniteUIForAngularTemplate"; + +class IgxToastTemplate extends IgniteUIForAngularTemplate { + constructor() { + super(__dirname); + this.components = ["Toast"]; + this.controlGroup = "Interactions"; + this.listInComponentTemplates = true; + this.id = "toast"; + this.projectType = "igx-ts"; + this.name = "Toast"; + this.description = "Basic IgxToast sample"; + this.packages = [IGNITEUI_ANGULAR_PACKAGE]; + } +} +module.exports = new IgxToastTemplate(); diff --git a/packages/igx-templates/igx-ts/toast/index.ts b/packages/igx-templates/igx-ts/toast/index.ts new file mode 100644 index 000000000..5b2e1e3ac --- /dev/null +++ b/packages/igx-templates/igx-ts/toast/index.ts @@ -0,0 +1,11 @@ +import { BaseComponent } from "@igniteui/cli-core"; + +class IgxToastComponent extends BaseComponent { + constructor() { + super(__dirname); + this.name = "Toast"; + this.group = "Interactions"; + this.description = "shows application messages in a stylized, non-interactive pop-up box"; + } +} +module.exports = new IgxToastComponent();