@igniteui/angular-templates 17.0.1302 → 17.0.1310-beta.2

package/igx-ts-legacy/autocomplete/autocomplete-custom/files/src/app/__path__/__filePrefix__.component.scss

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

package/igx-ts-legacy/autocomplete/autocomplete-custom/files/src/app/__path__/__filePrefix__.component.spec.ts

@@ -0,0 +1,28 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { FormsModule } from '@angular/forms';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { IgxAutocompleteModule, IgxDropDownModule, IgxInputGroupModule } from '<%=igxPackage%>';
+import { <%=ClassName%>Component, <%=ClassName%>PipeStartsWith } from './<%=filePrefix%>.component';
+
+describe('<%=ClassName%>Component', () => {
+  let component: <%=ClassName%>Component;
+  let fixture: ComponentFixture<<%=ClassName%>Component>;
+
+  beforeEach(waitForAsync(() => {
+    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();
+  });
+});

package/igx-ts-legacy/autocomplete/autocomplete-custom/files/src/app/__path__/__filePrefix__.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: string[];
+  public townSelected = '';
+
+  constructor() {
+    this.towns = Towns;
+  }
+}
+
+@Pipe({ name: '<%=camelCaseName%>StartsWith' })
+export class <%=ClassName%>PipeStartsWith implements PipeTransform {
+  public transform(collection: string[], term = '') {
+    return collection.filter(item => item.toLowerCase().startsWith(term.trim().toLowerCase()));
+  }
+}

package/igx-ts-legacy/autocomplete/autocomplete-custom/files/src/app/__path__/towns-data.ts

@@ -0,0 +1,27 @@
+export const Towns: string[] = [
+  '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'
+];

package/igx-ts-legacy/autocomplete/autocomplete-custom/index.d.ts

@@ -0,0 +1 @@
+export {};

package/igx-ts-legacy/autocomplete/autocomplete-custom/index.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const IgniteUIForAngularTemplate_1 = require("../../../IgniteUIForAngularTemplate");
+class IgxAutocompleteTemplate extends IgniteUIForAngularTemplate_1.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: "<%=igxPackage%>"
+            }, {
+                import: ["FormsModule"],
+                from: "@angular/forms"
+            }, {
+                declare: ["<%=ClassName%>PipeStartsWith"],
+                from: "./src/app/<%=path%>/<%=filePrefix%>.component.ts"
+            }];
+    }
+}
+module.exports = new IgxAutocompleteTemplate();

package/igx-ts-legacy/autocomplete/autocomplete-extended/files/src/app/__path__/__filePrefix__.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" (selectionChanging)="getPostalCode($event)">
+      <igx-drop-down-item-group
+	  *ngFor="let eRegion of 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>Postal Code: {{postalCode}}"</igx-toast>
+  </div>
+</div>

package/igx-ts-legacy/autocomplete/autocomplete-extended/files/src/app/__path__/__filePrefix__.component.scss

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

package/igx-ts-legacy/autocomplete/autocomplete-extended/files/src/app/__path__/__filePrefix__.component.spec.ts

@@ -0,0 +1,32 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { FormsModule } from '@angular/forms';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { IgxAutocompleteModule, IgxDropDownModule, IgxInputGroupModule, IgxToastModule } from '<%=igxPackage%>';
+import {
+  <%=ClassName%>Component,
+  <%=ClassName%>PipeStartsWith,
+  <%=ClassName%>RegionContains }
+from './<%=filePrefix%>.component';
+
+describe('<%=ClassName%>Component', () => {
+  let component: <%=ClassName%>Component;
+  let fixture: ComponentFixture<<%=ClassName%>Component>;
+
+  beforeEach(waitForAsync(() => {
+    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();
+  });
+});

package/igx-ts-legacy/autocomplete/autocomplete-extended/files/src/app/__path__/__filePrefix__.component.ts

@@ -0,0 +1,58 @@
+import { Component, Pipe, PipeTransform, ViewChild } from '@angular/core';
+import { IgxToastComponent, ISelectionEventArgs, PositionSettings, HorizontalAlignment, VerticalAlignment } from '<%=igxPackage%>';
+import { Region, Town, townsExtended } from './towns-data-extended';
+
+@Component({
+  selector: 'app-<%=filePrefix%>',
+  templateUrl: './<%=filePrefix%>.component.html',
+  styleUrls: ['./<%=filePrefix%>.component.scss']
+})
+export class <%=ClassName%>Component {
+  public regions!: Region[];
+  public townSelected!: string;
+  public postalCode?: number;
+  private messagePositionSettings: PositionSettings = {
+    horizontalDirection: HorizontalAlignment.Center,
+    verticalDirection: VerticalAlignment.Middle
+  };
+
+  @ViewChild(IgxToastComponent, { static: true })
+  public toast!: IgxToastComponent;
+
+  constructor() {
+    this.regions = townsExtended;
+  }
+
+  public getPostalCode(e: ISelectionEventArgs): void {
+
+    // Flatten the structure of the regions array
+    const allTowns = this.regions.map(region => region.towns).reduce((prev, curr) => prev.concat(curr), []);
+
+    const townEntry = allTowns.find(t => t.name === e.newSelection.value);
+
+    this.postalCode = townEntry?.postalCode;
+    this.toast.open(undefined, this.messagePositionSettings);
+  }
+}
+
+@Pipe({ name: '<%=camelCaseName%>StartsWith' })
+export class  <%=ClassName%>PipeStartsWith implements PipeTransform {
+  public transform(collection: Town[], term = '') {
+    return collection.filter(item => item.name.toLowerCase().startsWith(term.trim().toLowerCase()));
+  }
+}
+
+@Pipe({ name: '<%=camelCaseName%>RegionContains' })
+export class <%=ClassName%>RegionContains implements PipeTransform {
+  transform(regions: Region[], term = '') {
+    return this.filterRegions(regions, term);
+  }
+
+  private filterRegions(regions: Region[], term: string) {
+    return regions.filter(region => this.filterTowns(region.towns, term.toLowerCase()).length > 0);
+  }
+
+  private filterTowns(towns: Town[], term: string) {
+    return towns.filter(town => town.name.toLowerCase().startsWith(term));
+  }
+}