Merge pull request #458 from IgniteUI/bpenkov/autocomplete-samples

Add IgxAutocomplete templates

lib/Util.ts

@@ -306,7 +306,7 @@ class Util {
 	 */
 	public static merge(target: any, source: any) {
 		if (!source) {
-			return  target;
+			return target;
 		}
 
 		for (const key of Object.keys(source)) {
@@ -358,7 +358,7 @@ class Util {
 	 */
 	public static gitInit(parentRoot, projectName) {
 		try {
-			const options = { cwd: path.join(parentRoot, projectName), stdio: [ process.stdin, "ignore", "ignore" ] };
+			const options = { cwd: path.join(parentRoot, projectName), stdio: [process.stdin, "ignore", "ignore"] };
 			Util.exec("git init", options);
 			Util.exec("git add .", options);
 			Util.exec("git commit -m " + "\"Initial commit for project: " + projectName + "\"", options);
@@ -469,6 +469,14 @@ class Util {
 		return name.trim();
 	}
 
+	public static camelCase(str: string) {
+		if (!str)  {
+			return null;
+		}
+		const result = this.className(str);
+		return result[0].toLowerCase() + result.substring(1, result.length);
+	}
+
 	private static propertyByPath(object: any, propPath: string) {
 		if (!propPath) {
 			return object;

lib/templates/AngularTemplate.ts

@@ -94,6 +94,7 @@ export class AngularTemplate implements Template {
 		config["$(filePrefix)"] = this.fileName(name);
 		config["$(description)"] = this.description;
 		config["$(cliVersion)"] = Util.version();
+		config["$(camelCaseName)"] = Util.camelCase(name);
 
 		if (this.widget) {
 			config["$(widget)"] = this.widget;

spec/unit/base-templates/AngularTemplate-spec.ts

@@ -27,6 +27,7 @@ describe("Unit - AngularTemplate Base", () => {
 			"$(filePrefix)": "my-component",
 			"$(description)": "test description",
 			"$(cliVersion)": process.env.npm_package_version,
+			"$(camelCaseName)": "myComponent",
 			"$(nameMerged)": "TestTemplate"
 		};
 		spyOn(Util, "processTemplates");
@@ -57,6 +58,7 @@ describe("Unit - AngularTemplate Base", () => {
 			"$(widget)": "widget no-process",
 			// extra
 			"$(extraConfig1)" : "extraConfig1",
+			"$(camelCaseName)": "page",
 			"$(gridFeatures)" : "{ features }",
 			"$(cliVersion)": process.env.npm_package_version
 		};

templates/angular/igx-ts/autocomplete/autocomplete-custom/files/src/app/__path__/__name__.component.html

@@ -0,0 +1,20 @@
+<p>The <b>igx-autocomplete</b> directive provides a way to enhance a text input by showing a panel of suggested options provided by the developer.</p>
+<p>You can read more about configuring the <b>igx-autocomplete</b> in the 
+<a href="https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/directives/autocomplete/README.md" target="_blank">README</a> or the 
+<a href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/autocomplete.html" target="_blank">official documentation</a>.</p>
+
+<section class="sample-content">
+	<article class="sample-column">
+		<form class="input-group-form">
+			<igx-input-group>
+				<label igxLabel for="town">Town</label>
+				<input igxInput name="town" type="text" [igxAutocomplete]="townsPanel" [(ngModel)]="townSelected" />
+			</igx-input-group>
+			<igx-drop-down #townsPanel maxHeight="300px">
+				<igx-drop-down-item *ngFor="let town of towns | $(camelCaseName)StartsWith:townSelected" [value]="town">
+					{{town}}
+				</igx-drop-down-item>
+			</igx-drop-down>
+		</form>
+	</article>
+</section>

templates/angular/igx-ts/autocomplete/autocomplete-custom/files/src/app/__path__/__name__.component.scss

@@ -0,0 +1,7 @@
+.sample-content {
+	padding-top: 100px;
+}
+
+.input-group-form {
+	width: 300px;
+}

templates/angular/igx-ts/autocomplete/autocomplete-custom/files/src/app/__path__/__name__.component.spec.ts

@@ -0,0 +1,28 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { $(ClassName)Component, $(ClassName)PipeStartsWith } from './$(filePrefix).component';
+import { IgxDropDownModule, IgxAutocompleteModule, IgxInputGroupModule } from 'igniteui-angular';
+import { FormsModule } from '@angular/forms';
+
+describe('$(ClassName)Component', () => {
+    let component: $(ClassName)Component;
+    let fixture: ComponentFixture<$(ClassName)Component>;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [$(ClassName)Component, $(ClassName)PipeStartsWith],
+            imports: [FormsModule, IgxDropDownModule, IgxAutocompleteModule, NoopAnimationsModule, IgxInputGroupModule]
+        })
+            .compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent($(ClassName)Component);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});

templates/angular/igx-ts/autocomplete/autocomplete-custom/files/src/app/__path__/__name__.component.ts

@@ -0,0 +1,23 @@
+import { Component, Pipe, PipeTransform } from '@angular/core';
+import { Towns } from './towns-data';
+
+@Component({
+    selector: 'app-$(filePrefix)',
+    templateUrl: './$(filePrefix).component.html',
+    styleUrls: ['./$(filePrefix).component.scss']
+})
+export class $(ClassName)Component {
+    public towns: any;
+    public townSelected;
+
+    constructor() {
+        this.towns = Towns;
+    }
+}
+
+@Pipe({ name: '$(camelCaseName)StartsWith' })
+export class $(ClassName)PipeStartsWith implements PipeTransform {
+    public transform(collection: any[], term = '') {
+        return collection.filter((item) => item.toString().toLowerCase().startsWith(term.trim().toLowerCase()));
+    }
+}

templates/angular/igx-ts/autocomplete/autocomplete-custom/files/src/app/__path__/towns-data.ts

@@ -0,0 +1,27 @@
+export const Towns = [
+    'Sofia', 'Plovdiv', 'Varna', 'Burgas', 'Ruse', 'Stara Zagora', 'Pleven', 'Dobrich', 'Sliven', 'Shumen',
+    'Pernik', 'Haskovo', 'Yambol', 'Pazardzhik', 'Blagoevgrad', 'Veliko Tarnovo', 'Vratsa', 'Gabrovo', 'Asenovgrad',
+    'Vidin', 'Kazanlak', 'Kyustendil', 'Kardzhali', 'Montana', 'Dimitrovgrad', 'Targovishte', 'Lovech', 'Silistra', 'Dupnitsa',
+    'Svishtov', 'Razgrad', 'Gorna Oryahovitsa', 'Smolyan', 'Petrich', 'Sandanski', 'Samokov', 'Sevlievo', 'Lom',
+    'Karlovo', 'Velingrad', 'Nova Zagora', 'Troyan', 'Aytos', 'Botevgrad', 'Gotse Delchev', 'Peshtera', 'Harmanli', 'Karnobat',
+    'Svilengrad', 'Panagyurishte', 'Chirpan', 'Popovo', 'Rakovski', 'Radomir', 'Novi Iskar', 'Kozloduy', 'Parvomay', 'Berkovitsa',
+    'Cherven Bryag', 'Pomorie', 'Ihtiman', 'Radnevo', 'Provadiya', 'Novi Pazar', 'Razlog', 'Byala Slatina', 'Nesebar', 'Balchik',
+    'Kostinbrod', 'Stamboliyski', 'Kavarna', 'Knezha', 'Pavlikeni', 'Mezdra', 'Etropole', 'Levski', 'Teteven', 'Elhovo', 'Bankya',
+    'Tryavna', 'Lukovit', 'Tutrakan', 'Sredets', 'Sopot', 'Byala', 'Veliki Preslav', 'Isperih', 'Belene', 'Omurtag', 'Bansko', 'Krichim',
+    'Galabovo', 'Devnya', 'Septemvri', 'Rakitovo', 'Lyaskovets', 'Svoge', 'Aksakovo', 'Kubrat', 'Dryanovo', 'Beloslav', 'Pirdop',
+    'Lyubimets', 'Momchilgrad', 'Slivnitsa', 'Hisarya', 'Zlatograd', 'Kostenets', 'Devin', 'General Toshevo', 'Simeonovgrad', 'Simitli',
+    'Elin Pelin', 'Dolni Chiflik', 'Tervel', 'Dulovo', 'Varshets', 'Kotel', 'Madan', 'Straldzha', 'Saedinenie', 'Bobov Dol', 'Tsarevo',
+    'Kuklen', 'Tvarditsa', 'Yakoruda', 'Elena', 'Topolovgrad', 'Bozhurishte', 'Chepelare', 'Oryahovo', 'Sozopol', 'Belogradchik',
+    'Perushtitsa', 'Zlatitsa', 'Strazhitsa', 'Krumovgrad', 'Kameno', 'Dalgopol', 'Vetovo', 'Suvorovo', 'Dolni Dabnik', 'Dolna Banya',
+    'Pravets', 'Nedelino', 'Polski Trambesh', 'Trastenik', 'Bratsigovo', 'Koynare', 'Godech', 'Slavyanovo', 'Dve Mogili', 'Kostandovo',
+    'Debelets', 'Strelcha', 'Sapareva Banya', 'Ignatievo', 'Smyadovo', 'Breznik', 'Sveti Vlas', 'Nikopol', 'Shivachevo', 'Belovo',
+    'Tsar Kaloyan', 'Ivaylovgrad', 'Valchedram', 'Marten', 'Glodzhevo', 'Sarnitsa', 'Letnitsa', 'Varbitsa', 'Iskar', 'Ardino', 'Shabla',
+    'Rudozem', 'Vetren', 'Kresna', 'Banya', 'Batak', 'Maglizh', 'Valchi Dol', 'Gulyantsi', 'Dragoman', 'Zavet', 'Kran', 'Miziya',
+    'Primorsko', 'Sungurlare', 'Dolna Mitropoliya', 'Krivodol', 'Kula', 'Kalofer', 'Slivo Pole', 'Kaspichan', 'Apriltsi', 'Belitsa',
+    'Roman', 'Dzhebel', 'Dolna Oryahovitsa', 'Buhovo', 'Gurkovo', 'Pavel Banya', 'Nikolaevo', 'Yablanitsa', 'Kableshkovo', 'Opaka',
+    'Rila', 'Ugarchin', 'Dunavtsi', 'Dobrinishte', 'Hadzhidimovo', 'Bregovo', 'Byala Cherkva', 'Zlataritsa', 'Kocherinovo', 'Dospat',
+    'Tran', 'Sadovo', 'Laki', 'Koprivshtitsa', 'Malko Tarnovo', 'Loznitsa', 'Obzor', 'Kilifarevo', 'Borovo',
+    'Batanovtsi', 'Chernomorets', 'Aheloy', 'Byala', 'Pordim', 'Suhindol', 'Merichleri', 'Glavinitsa', 'Chiprovtsi', 'Kermen', 'Brezovo',
+    'Plachkovtsi', 'Zemen', 'Balgarovo', 'Alfatar', 'Boychinovtsi', 'Gramada', 'Senovo', 'Momin Prohod', 'Kaolinovo', 'Shipka',
+    'Antonovo', 'Ahtopol', 'Boboshevo', 'Bolyarovo', 'Brusartsi', 'Klisura', 'Dimovo', 'Kiten', 'Pliska', 'Madzharovo', 'Melnik'
+];

templates/angular/igx-ts/autocomplete/autocomplete-custom/index.ts

@@ -0,0 +1,22 @@
+import { IgniteUIForAngularTemplate } from "../../../../../lib/templates/IgniteUIForAngularTemplate";
+
+class IgxAutocompleteTemplate extends IgniteUIForAngularTemplate {
+	constructor() {
+		super(__dirname);
+		this.components = ["Autocomplete"];
+		this.controlGroup = "Data Entry & Display";
+		this.listInComponentTemplates = true;
+		this.id = "autocomplete";
+		this.projectType = "igx-ts";
+		this.name = "Simple Autocomplete";
+		this.description = "Simple IgxAutocomplete";
+		this.dependencies = [{
+			import: ["IgxAutocompleteModule", "IgxDropDownModule", "IgxInputGroupModule"],
+			from: "igniteui-angular"
+		}, {
+			declare: ["$(ClassName)PipeStartsWith"],
+			from: "./src/app/__path__/__name__.component.ts"
+		}];
+	}
+}
+module.exports = new IgxAutocompleteTemplate();

templates/angular/igx-ts/autocomplete/autocomplete-extended/files/src/app/__path__/__name__.component.html

@@ -0,0 +1,37 @@
+<div class="content-wrapper">
+	<p>The <b>igx-autocomplete</b> directive provides a way to enhance a text input by showing a panel of suggested options provided by the developer.<br />
+	Using the <b>igx-drop-down</b> as a provider, allows using its functionalities like grouping, templating, etc.</p>
+	<p>You can read more about configuring those components, using the following links:</p>
+	<ul>
+		<li>
+			<b>igx-autocomplete</b> - 
+			<a href="https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/directives/autocomplete/README.md" target="_blank">README</a> or the 
+			<a href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/autocomplete.html" target="_blank">official documentation</a>.
+		</li>
+		<li>
+			<b>igx-drop-down</b> - 
+			<a href="https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/drop-down/README.md" target="_blank">README</a> or the
+			<a href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/drop_down.html" target="_blank">official documentation</a>.
+		</li>
+	</ul>
+	<p>The following sample demonstrates igx-drop-down with defined groups:</p>
+	<div class="enhanced-groups">
+		<igx-input-group>
+			<label igxLabel for="townEhanced">Town</label>
+			<input igxInput name="townEhanced" type="text" [igxAutocomplete]="townsEnhancedPanel"
+				[(ngModel)]="townSelected"/>
+		</igx-input-group>
+		<igx-drop-down #townsEnhancedPanel maxHeight="300px" (onSelection)="getPostalCode($event)">
+			<igx-drop-down-item-group
+				*ngFor="let eRegion of extendedTowns.regions | $(camelCaseName)RegionContains:townSelected"
+				[label]="eRegion.name">
+				<igx-drop-down-item *ngFor="let town of eRegion.towns | $(camelCaseName)StartsWith:townSelected"
+					[value]="town.name">
+					{{town.name}}
+				</igx-drop-down-item>
+			</igx-drop-down-item-group>
+		</igx-drop-down>
+
+		<igx-toast #message message="Postal Code: {{postalCode}}" [position]="messagePosition"></igx-toast>
+	</div>
+</div>

templates/angular/igx-ts/autocomplete/autocomplete-extended/files/src/app/__path__/__name__.component.scss

@@ -0,0 +1,9 @@
+.enhanced-groups {
+	width: 300px;
+    padding-top: 100px;
+}
+
+.content-wrapper {
+    display: flex;
+    flex-flow: column;
+}

templates/angular/igx-ts/autocomplete/autocomplete-extended/files/src/app/__path__/__name__.component.spec.ts

@@ -0,0 +1,29 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { $(ClassName)Component, $(ClassName)PipeStartsWith,
+    $(ClassName)RegionContains } from './$(filePrefix).component';
+import { IgxDropDownModule, IgxAutocompleteModule, IgxInputGroupModule, IgxToastModule } from 'igniteui-angular';
+import { FormsModule } from '@angular/forms';
+
+describe('$(ClassName)Component', () => {
+    let component: $(ClassName)Component;
+    let fixture: ComponentFixture<$(ClassName)Component>;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [$(ClassName)Component, $(ClassName)PipeStartsWith, $(ClassName)RegionContains],
+            imports: [FormsModule, IgxDropDownModule, IgxAutocompleteModule, NoopAnimationsModule, IgxInputGroupModule, IgxToastModule]
+        })
+            .compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent($(ClassName)Component);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});

templates/angular/igx-ts/autocomplete/autocomplete-extended/files/src/app/__path__/__name__.component.ts

@@ -0,0 +1,50 @@
+import { Component, Pipe, PipeTransform, ViewChild } from '@angular/core';
+import { townsExtended } from './towns-data-extended';
+import { IgxToastComponent, IgxToastPosition } from 'igniteui-angular';
+
+@Component({
+    selector: 'app-$(filePrefix)',
+    templateUrl: './$(filePrefix).component.html',
+    styleUrls: ['./$(filePrefix).component.scss']
+})
+export class $(ClassName)Component {
+    public extendedTowns: any;
+    public townSelected: string;
+    public postalCode: string;
+    public messagePosition = IgxToastPosition.Middle;
+
+    @ViewChild(IgxToastComponent)
+    public toast: IgxToastComponent;
+
+    constructor() {
+        this.extendedTowns = townsExtended;
+    }
+
+    public getPostalCode(event) {
+        const targetRegion = this.extendedTowns.regions.filter((r) => r.name === event.newSelection.group.label)[0];
+        this.postalCode = targetRegion.towns.filter(t => t.name === event.newSelection.value)[0].postalCode;
+        this.toast.show();
+    }
+}
+
+@Pipe({ name: '$(camelCaseName)StartsWith' })
+export class  $(ClassName)PipeStartsWith implements PipeTransform {
+    public transform(collection: any[], term = '') {
+        return collection.filter((item) => item.name.toString().toLowerCase().startsWith(term.trim().toLowerCase()));
+    }
+}
+
+@Pipe({ name: '$(camelCaseName)RegionContains' })
+export class $(ClassName)RegionContains implements PipeTransform {
+    transform(regions: any[], term = '') {
+        return this.filterRegions(regions, term);
+    }
+
+    private filterRegions(regions: any[], term: string) {
+        return regions.filter((region: any) => this.filterTowns(region.towns, term.toLowerCase()).length > 0);
+    }
+
+    private filterTowns(towns: any[], term: string) {
+        return towns.filter((town: any) => town.name.toLowerCase().startsWith(term));
+    }
+}