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

package/igx-ts-legacy/hierarchical-grid/hierarchical-grid-summaries/index.d.ts

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

package/igx-ts-legacy/hierarchical-grid/hierarchical-grid-summaries/index.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const IgniteUIForAngularTemplate_1 = require("../../../IgniteUIForAngularTemplate");
+class IgxHierarchicalGridTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngularTemplate {
+    constructor() {
+        super(__dirname);
+        this.components = ["Hierarchical Grid With Summaries"];
+        this.controlGroup = "Grids & Lists";
+        this.listInComponentTemplates = true;
+        this.id = "hierarchical-grid-summaries";
+        this.projectType = "igx-ts";
+        this.name = "Hierarchical Grid With Summaries";
+        this.description = "IgxHierarchicalGrid with summaries";
+        this.dependencies = [
+            { import: ["IgxGridModule", "IgxHierarchicalGridModule"], from: "<%=igxPackage%>" }
+        ];
+    }
+}
+module.exports = new IgxHierarchicalGridTemplate();

package/igx-ts-legacy/hierarchical-grid/index.d.ts

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

package/igx-ts-legacy/hierarchical-grid/index.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const cli_core_1 = require("@igniteui/cli-core");
+class IgxHierarchicalGridComponent extends cli_core_1.BaseComponent {
+    constructor() {
+        super(__dirname);
+        this.name = "Hierarchical Grid";
+        this.group = "Grids & Lists";
+        this.description = "pick from grids: basic or custom";
+        this.groupPriority = 10;
+    }
+}
+module.exports = new IgxHierarchicalGridComponent();

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

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

package/igx-ts-legacy/index.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const cli_core_1 = require("@igniteui/cli-core");
+class IgxProjectLibrary extends cli_core_1.BaseProjectLibrary {
+    constructor() {
+        super(__dirname);
+        this.name = "Ignite UI for Angular NgModules (legacy)";
+        this.projectType = "igx-ts-legacy";
+        this.themes = ["Custom", "Default"];
+        const groups = require("./groups.json");
+        // tslint:disable-next-line:forin
+        for (const key in groups) {
+            this.groupDescriptions.set(key, groups[key]);
+        }
+    }
+}
+module.exports = new IgxProjectLibrary();

package/igx-ts-legacy/input-group/default/files/src/app/__path__/__filePrefix__.component.html

@@ -0,0 +1,97 @@
+<div class="description-container">
+  <p>Form view with <b>igx-input-group</b>, <b>igx-select</b> and <b>igx-combo</b> that allows to book a movie ticket.
+    You can read more about configuring those components, using the following links:
+    <b>igx-input-group</b> -
+    <a href="https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/input-group/README.md"
+      target="_blank">README</a> or the
+    <a href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/input-group"
+      target="_blank">official documentation</a>,
+    <b>igx-select</b> -
+    <a href="https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/select/README.md"
+      target="_blank">README</a> or the
+    <a href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/select" target="_blank">official
+      documentation</a>,
+    <b>igx-combo</b> -
+    <a href="https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/combo/README.md"
+      target="_blank">README</a> or the
+    <a href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/combo" target="_blank">official
+      documentation</a>.
+    <b>igx-date-picker</b> -
+    <a href="https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/date-picker/README.md"
+      target="_blank">README</a> or the
+    <a href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/date-picker"
+      target="_blank">official documentation</a>.
+    <b>igx-time-picker</b> -
+    <a href="https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/time-picker/README.md"
+      target="_blank">README</a> or the
+    <a href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/time-picker"
+      target="_blank">official documentation</a>.
+    <b>igx-date-range-picker</b> -
+    <a href="https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/date-range-picker/README.md"
+      target="_blank">README</a> or the
+    <a href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/date-range-picker"
+      target="_blank">official documentation</a>.
+  </p>
+</div>
+<div class="sample-wrapper">
+  <section class="sample-content">
+    <article class="sample-column">
+      <form class="input-group-form" [formGroup]="user" (ngSubmit)="onSubmit()">
+        <h4>Book your movie ticket</h4>
+        <div class="container">
+          <igx-select #select name="movies" formControlName="movie">
+            <igx-select-item-group *ngFor="let genre of genres" [label]="genre.type">
+              <igx-select-item *ngFor="let movie of genre.movies" [value]="movie">
+                {{ movie }}
+              </igx-select-item>
+            </igx-select-item-group>
+            <label igxLabel for="movies">Movie</label>
+            <ng-template igxSelectToggleIcon>
+              <igx-icon family="material">local_movies</igx-icon>
+            </ng-template>
+          </igx-select>
+          <igx-input-group>
+            <input igxInput name="fullName" type="text" formControlName="fullName" />
+            <label igxLabel for="fullName">Full Name</label>
+            <igx-suffix>
+              <igx-icon>person</igx-icon>
+            </igx-suffix>
+          </igx-input-group>
+          <igx-input-group>
+            <igx-prefix>+359</igx-prefix>
+            <label igxLabel for="phone">Phone</label>
+            <input igxInput name="phone" type="tel" formControlName="phone" />
+            <igx-suffix>
+              <igx-icon>phone</igx-icon>
+            </igx-suffix>
+            <igx-hint position="start">Ex.: +359 888 123 456</igx-hint>
+          </igx-input-group>
+          <igx-input-group>
+            <label igxLabel for="email">Email address</label>
+            <input igxInput name="email" type="email" formControlName="email" />
+            <igx-suffix>
+              <igx-icon>email</igx-icon>
+            </igx-suffix>
+          </igx-input-group>
+          <igx-combo #combo1 class="input-container" [itemsMaxHeight]="130" [data]="genres" [valueKey]="'type'"
+            [displayKey]="'type'" type="line" formControlName="genres" placeholder="Select your favorite genres"
+            searchPlaceholder="Search...">
+          </igx-combo>
+          <igx-date-picker name="date" formControlName="date" [minValue]="minDate" [maxValue]="maxDate"
+            placeholder="Date">
+            <igx-picker-toggle igxSuffix>
+              <igx-icon>today</igx-icon>
+            </igx-picker-toggle>
+          </igx-date-picker>
+          <igx-time-picker name="time" formControlName="time" [minValue]="minTime" [maxValue]="maxTime"
+            placeholder="Time">
+            <igx-picker-toggle igxSuffix>
+              <igx-icon>access_time</igx-icon>
+            </igx-picker-toggle>
+          </igx-time-picker>
+          <button igxButton="raised" igxRipple type="submit" [disabled]="!user.valid">Book</button>
+        </div>
+      </form>
+    </article>
+  </section>
+</div>

package/igx-ts-legacy/input-group/default/files/src/app/__path__/__filePrefix__.component.scss

@@ -0,0 +1,29 @@
+.container {
+  height: 100%;
+  overflow: auto;
+}
+
+.container > * {
+  margin-top: 32px;
+}
+
+.sample-wrapper {
+  width: 70%;
+  height: 100%;
+  position: relative;
+  margin: 0 auto;
+  background: transparent;
+  margin-top: 30px;
+}
+
+.input-group-form {
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
+  padding: 24px;
+  margin-bottom: 48px;
+}
+
+.description-container {
+  width: 70%;
+  display: flex;
+  align-self: center;
+}

package/igx-ts-legacy/input-group/default/files/src/app/__path__/__filePrefix__.component.spec.ts

@@ -0,0 +1,49 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import {
+  IgxButtonModule,
+  IgxComboModule,
+  IgxDatePickerModule,
+  IgxIconModule,
+  IgxInputGroupModule,
+  IgxRippleModule,
+  IgxSelectModule,
+  IgxTimePickerModule
+} from '<%=igxPackage%>';
+import { <%=ClassName%>Component } from './<%=filePrefix%>.component';
+
+describe('<%=ClassName%>Component', () => {
+  let component: <%=ClassName%>Component;
+  let fixture: ComponentFixture<<%=ClassName%>Component>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [<%=ClassName%>Component],
+      imports: [
+        FormsModule,
+		ReactiveFormsModule,
+        NoopAnimationsModule,
+        IgxInputGroupModule,
+        IgxButtonModule,
+        IgxRippleModule,
+        IgxIconModule,
+        IgxComboModule,
+        IgxDatePickerModule,
+        IgxTimePickerModule,
+        IgxSelectModule
+      ]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(<%=ClassName%>Component);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/igx-ts-legacy/input-group/default/files/src/app/__path__/__filePrefix__.component.ts

@@ -0,0 +1,54 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+
+interface Genre {
+  type: string;
+  movies: string[];
+}
+
+@Component({
+  selector: 'app-<%=filePrefix%>',
+  templateUrl: './<%=filePrefix%>.component.html',
+  styleUrls: ['./<%=filePrefix%>.component.scss']
+})
+export class <%=ClassName%>Component implements OnInit {
+  public genres!: Genre[];
+  public user!: FormGroup;
+  public minTime = '06:15:30';
+  public maxTime = '09:15:30';
+  public minDate = new Date();
+  public maxDate = new Date(new Date(this.minDate.getFullYear(), this.minDate.getMonth(), this.minDate.getDate() + 14));
+
+  constructor(private fb: FormBuilder) { }
+
+  public ngOnInit(): void {
+    this.genres = [
+      { type: 'Action', movies: ['The Matrix', 'Kill Bill: Vol.1', 'The Dark Knight Rises'] },
+      { type: 'Adventure', movies: ['Interstellar', 'Inglourious Basterds', 'Inception'] },
+      { type: 'Comedy', movies: ['Wild Tales', 'In Bruges', 'Three Billboards Outside Ebbing, Missouri', 'Untouchable', '3 idiots'] },
+      { type: 'Crime', movies: ['Training Day', 'Heat', 'American Gangster'] },
+      { type: 'Drama', movies: ['Fight Club', 'A Beautiful Mind', 'Good Will Hunting', 'City of God'] },
+      { type: 'Biography', movies: ['Amadeus', 'Bohemian Rhapsody'] },
+      { type: 'Mystery', movies: ['The Prestige', 'Memento', 'Cloud Atlas'] },
+      { type: 'Musical', movies: ['All That Jazz'] },
+      { type: 'Romance', movies: ['Love Actually', 'In The Mood for Love'] },
+      { type: 'Sci-Fi', movies: ['The Fifth Element'] },
+      { type: 'Thriller', movies: ['The Usual Suspects'] },
+      { type: 'Western', movies: ['Django Unchained'] }
+    ];
+
+    this.user = this.fb.group({
+      date: ['', Validators.required],
+      time: ['', Validators.required],
+      email: ['', Validators.required],
+      fullName: ['', Validators.required],
+      genres: [''],
+      movie: ['', Validators.required],
+      phone: ['']
+    });
+  }
+
+  public onSubmit() {
+    console.log(this.user);
+  }
+}

package/igx-ts-legacy/input-group/default/index.d.ts

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

package/igx-ts-legacy/input-group/default/index.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const IgniteUIForAngularTemplate_1 = require("../../../IgniteUIForAngularTemplate");
+class IgxInputGroupTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngularTemplate {
+    constructor() {
+        super(__dirname);
+        this.components = ["Input Group"];
+        this.controlGroup = "Data Entry & Display";
+        this.listInComponentTemplates = true;
+        this.id = "input-group";
+        this.projectType = "igx-ts";
+        this.name = "Input Group";
+        this.description = "IgxInputGroup form view template";
+        this.dependencies = [{
+                import: [
+                    "IgxButtonModule",
+                    "IgxComboModule",
+                    "IgxDatePickerModule",
+                    "IgxIconModule",
+                    "IgxInputGroupModule",
+                    "IgxRippleModule",
+                    "IgxTimePickerModule",
+                    "IgxSelectModule"
+                ],
+                from: "<%=igxPackage%>"
+            },
+            { import: "FormsModule, ReactiveFormsModule", from: "@angular/forms" }
+        ];
+    }
+}
+module.exports = new IgxInputGroupTemplate();

package/igx-ts-legacy/input-group/index.d.ts

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

package/igx-ts-legacy/input-group/index.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const cli_core_1 = require("@igniteui/cli-core");
+class IgxInputGroupComponent extends cli_core_1.BaseComponent {
+    /**
+     *
+     */
+    constructor() {
+        super(__dirname);
+        this.name = "Input Group";
+        this.group = "Data Entry & Display";
+    }
+}
+module.exports = new IgxInputGroupComponent();

package/igx-ts-legacy/linear-gauge/default/files/src/app/__path__/__filePrefix__.component.html

@@ -0,0 +1,32 @@
+<div igxLayout igxLayoutDir="columns" igxLayoutItemAlign="center">
+  <p>You can read more about configuring the linear gauge component in the
+    <a href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/linear-gauge"
+      target="_blank">official documentation page
+    </a>.
+  </p>
+  <div class="sample-container">
+    <div class="buttons-container">
+      <button igxButton="raised" (click)="animateToGauge1()" igxButtonColor="black" igxButtonBackground="#e2e2e2"
+        class="sample-button">Gauge Animation #1</button>
+      <button igxButton="raised" (click)="animateToGauge2()" igxButtonColor="black" igxButtonBackground="#e2e2e2"
+        class="sample-button">Gauge Animation #2</button>
+      <button igxButton="raised" (click)="animateToGauge3()" igxButtonColor="black" igxButtonBackground="#e2e2e2"
+        class="sample-button">Gauge Animation #3</button>
+    </div>
+
+    <div class="sample-control">
+      <!--
+				Note the linear gauge requires settings only for
+				minimumValue, maximumValue, and value properties.
+				All other properties are optional and listed here
+				for demonstration purpose only
+			-->
+      <igx-linear-gauge #linearGauge height="80px" width="100%" [minimumValue]="0" [maximumValue]="10" [value]="5"
+        [interval]="1" [labelInterval]="1" [labelExtent]="0.0" [minorTickEndExtent]="0.10" [minorTickStartExtent]="0.20"
+        [tickStartExtent]="0.25" [tickEndExtent]="0.05" [tickStrokeThickness]="2" [needleShape]="needleShape.Needle"
+        needleBrush="#79797a" needleOutline="#79797a" [scaleStrokeThickness]=0 scaleBrush="#ffffff"
+        scaleOutline="#d3d3d3" backingBrush="#ffffff" backingOutline="#d1d1d1" [backingStrokeThickness]="0">
+      </igx-linear-gauge>
+    </div>
+  </div>
+</div>

package/igx-ts-legacy/linear-gauge/default/files/src/app/__path__/__filePrefix__.component.scss

@@ -0,0 +1,26 @@
+.sample-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.buttons-container {
+  display: flex;
+  margin-bottom: 5px;
+}
+
+.sample-button {
+  margin: 3px;
+  flex-grow: 1;
+  height: 30px;
+  font: 12px Titillium Web, sans-serif;
+  min-width: 5.5rem;
+  height: 2.25rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: 1;
+  text-align: center;
+  border: none;
+  border-radius: 2px;
+  text-transform: uppercase;
+  cursor: pointer;
+}

package/igx-ts-legacy/linear-gauge/default/files/src/app/__path__/__filePrefix__.component.spec.ts

@@ -0,0 +1,29 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { IgxLinearGaugeModule } from 'igniteui-angular-gauges';
+import { <%=ClassName%>Component } from './<%=filePrefix%>.component';
+
+describe('<%=ClassName%>Component', () => {
+  let component: <%=ClassName%>Component;
+  let fixture: ComponentFixture<<%=ClassName%>Component>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [<%=ClassName%>Component],
+      imports: [IgxLinearGaugeModule, NoopAnimationsModule]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(<%=ClassName%>Component);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+    // disable animation
+    component.linearGauge.transitionDuration = 0;
+  });
+});