Merge pull request #346 from IgniteUI/PMiteva/dropdown-template

Create dropdown template

templates/angular/igx-ts/dropdown/default/files/src/app/__path__/__name__.component.css

@@ -0,0 +1,13 @@
+:host {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+.drop-down-wrapper {
+    margin: 10px;
+    width: 200px;
+}
+button {
+    width: 100%;
+}

templates/angular/igx-ts/dropdown/default/files/src/app/__path__/__name__.component.html

@@ -0,0 +1,14 @@
+<p>igx-dropdown component.</p>
+<p>You can read more about configuring the igx-dropdown component in the 
+<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>.</p>
+
+<div class="sample-wrapper drop-down-wrapper">
+    <button #button igxButton="raised" igxRipple (click)="toggleDropDown($event)">Toggle dropdown</button>
+    <igx-drop-down #dropdown>
+		<igx-drop-down-item *ngFor="let item of items" disabled={{item.disabled}} isHeader={{item.header}}>
+			{{ item.field }}
+		</igx-drop-down-item>
+	</igx-drop-down>
+</div>
+

templates/angular/igx-ts/dropdown/default/files/src/app/__path__/__name__.component.spec.ts

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

templates/angular/igx-ts/dropdown/default/files/src/app/__path__/__name__.component.ts

@@ -0,0 +1,47 @@
+import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
+import {
+    IgxDropDownComponent,
+    ConnectedPositioningStrategy,
+    OverlaySettings,
+    PositionSettings,
+    NoOpScrollStrategy,
+    HorizontalAlignment,
+    VerticalAlignment
+} from 'igniteui-angular';
+import { data } from './local-data';
+
+@Component({
+    selector: 'app-$(filePrefix)',
+    templateUrl: './$(filePrefix).component.html',
+    styleUrls: ['./$(filePrefix).component.css']
+})
+
+export class $(ClassName)Component implements OnInit {
+    @ViewChild(IgxDropDownComponent) public igxDropDown: IgxDropDownComponent;
+    @ViewChild('button') public button: ElementRef;
+
+    private _positionSettings: PositionSettings = {
+        horizontalStartPoint: HorizontalAlignment.Left,
+        verticalStartPoint: VerticalAlignment.Bottom
+    };
+
+    private _overlaySettings: OverlaySettings = {
+      closeOnOutsideClick: true,
+      modal: false,
+      positionStrategy: new ConnectedPositioningStrategy(this._positionSettings),
+      scrollStrategy: new NoOpScrollStrategy()
+  };
+    public items: any[] = [];
+
+    constructor() { }
+
+    public ngOnInit() {
+        this.items = data;
+        this.igxDropDown.width = '200px';
+    }
+
+    public toggleDropDown(eventArgs) {
+        this._overlaySettings.positionStrategy.settings.target = eventArgs.target;
+        this.igxDropDown.toggle(this._overlaySettings);
+    }
+}

templates/angular/igx-ts/dropdown/default/files/src/app/__path__/local-data.ts

@@ -0,0 +1,16 @@
+const data: any[] = [
+{ field: "EU", header: true },
+{ field: "Germany" },
+{ field: "Bulgaria" },
+{ field: "UK", disabled: true },
+{ field: "NA", header: true },
+{ field: "Canada" },
+{ field: "USA" },
+{ field: "Mexico" },
+{ field: "SA", header: true },
+{ field: "Brazil" },
+{ field: "Colombia", disabled: true },
+{ field: "Argentina" }];
+
+export { data };
+

templates/angular/igx-ts/dropdown/default/index.ts

@@ -0,0 +1,19 @@
+import { IgniteUIForAngularTemplate } from "../../../../../lib/templates/IgniteUIForAngularTemplate";
+
+class IgxDropDownTemplate extends IgniteUIForAngularTemplate {
+	constructor() {
+		super(__dirname);
+		this.components = ["Drop Down"];
+		this.controlGroup = "Data Entry & Display";
+		this.listInComponentTemplates = true;
+		this.id = "dropdown";
+		this.projectType = "igx-ts";
+		this.name = "Drop Down";
+		this.description = "Basic IgxDropDown sample";
+		this.dependencies = [{
+			from: "igniteui-angular",
+			import: ["IgxDropDownModule", "IgxButtonModule", "IgxToggleModule"]
+		}];
+	}
+}
+module.exports = new IgxDropDownTemplate();

templates/angular/igx-ts/dropdown/index.ts

@@ -0,0 +1,14 @@
+
+import { BaseComponent } from "../../../../lib/BaseComponent";
+
+class IgxDropDownComponent extends BaseComponent {
+	/**
+	 *
+	 */
+	constructor() {
+		super(__dirname);
+		this.name  = "Drop Down";
+		this.group = "Data Entry & Display";
+	}
+}
+module.exports = new IgxDropDownComponent();