4 files changed, 145 insertions, 0 deletions
diff --git a/src/angular/popup-menu/popup-menu-item.component.spec.ts b/src/angular/popup-menu/popup-menu-item.component.spec.ts
new file mode 100644
index 0000000..25b2694
--- /dev/null
+++ b/src/angular/popup-menu/popup-menu-item.component.spec.ts
@@ -0,0 +1,25 @@
+import { Component, Input, Output, ContentChildren, SimpleChanges, QueryList, EventEmitter, OnChanges, AfterContentInit } from '@angular/core';
+import { FormsModule } from "@angular/forms";
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { PopupMenuItemComponent } from './popup-menu-item.component';
+import { PopupMenuListComponent } from './popup-menu-list.component';
+
+describe('Popup Menu', () => {
+    let component: PopupMenuListComponent;
+    let fixture: ComponentFixture<PopupMenuListComponent>;
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [ PopupMenuListComponent ],
+        }).compileComponents();
+        fixture = TestBed.createComponent(PopupMenuListComponent);
+        component = fixture.componentInstance;
+    }));
+
+    it('Popup menu component should be created', () => {
+        expect(component).toBeTruthy();
+    });
+
+    it('Set Position to Popup Menu', () => {
+        expect(component.position).toEqual({ x: 0, y: 0 })
+    });
+})
diff --git a/src/angular/popup-menu/popup-menu-item.component.ts b/src/angular/popup-menu/popup-menu-item.component.ts
new file mode 100644
index 0000000..fb5a71d
--- /dev/null
+++ b/src/angular/popup-menu/popup-menu-item.component.ts
@@ -0,0 +1,34 @@
+import { Component, Input, Output, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
+import { PopupMenuListComponent } from "./popup-menu-list.component";
+
+@Component({
+    selector: 'popup-menu-item',
+    template:
+        `<li [ngClass]="[className || '', type || '', type == 'separator'? '': 'sdc-menu-item']" (click)="performAction($event)">
+    <ng-content *ngIf="type != 'separator'"></ng-content>
+</li>`
+})
+export class PopupMenuItemComponent {
+    @Input() public className: string;
+    @Input() public type: undefined|'disabled'|'selected'|'separator';
+    @Output() public action: EventEmitter<any> = new EventEmitter<any>();
+
+    public parentMenu: PopupMenuListComponent;
+    public index: number = 0;
+
+    public performAction(evt) {
+        evt.stopPropagation();
+
+        if (['disabled', 'separator'].indexOf(this.type) !== -1) {
+            return;
+        }
+
+        if (this.parentMenu instanceof PopupMenuListComponent) {
+            this.parentMenu.open = false;
+        }
+
+        if (this.action) {
+            this.action.emit();
+        }
+    }
+}
diff --git a/src/angular/popup-menu/popup-menu-list.component.ts b/src/angular/popup-menu/popup-menu-list.component.ts
new file mode 100644
index 0000000..6a20423
--- /dev/null
+++ b/src/angular/popup-menu/popup-menu-list.component.ts
@@ -0,0 +1,65 @@
+import { Component, Input, Output, ContentChildren, SimpleChanges, QueryList, EventEmitter, OnChanges, AfterContentInit } from '@angular/core';
+import { PopupMenuItemComponent } from "./popup-menu-item.component";
+
+export interface IPoint {
+    x: number;
+    y: number;
+}
+
+@Component({
+    selector: 'popup-menu-list',
+    template:
+    `<ul
+        class="sdc-menu-list"
+        *ngIf="open"
+        [ngClass]="[className || '', relative? 'relative': '']"
+        [ngStyle]="{'left': position.x + 'px', 'top': position.y + 'px'}"
+        (click)="$event.stopPropagation()">
+        <ng-content></ng-content>
+    </ul>`
+})
+export class PopupMenuListComponent implements AfterContentInit {
+    @Input()
+    public get open(): boolean {
+        return this._open;
+    }
+    public set open(isOpen: boolean) {
+        isOpen = isOpen !== undefined ? isOpen : false;
+        if (this._open !== isOpen) {
+            this._open = isOpen;
+            this.openChange.emit(this._open);
+        }
+    }
+    @Input()
+    public get position(): IPoint {
+        return this._position;
+    }
+    public set position(position: IPoint) {
+        position = position !== undefined ? position : {x: 0, y: 0};
+        if (this._position.x !== position.x || this._position.y !== position.y) {
+            this._position = position;
+            this.positionChange.emit(this._position);
+        }
+    }
+    @Input() public className: string;
+    @Input() public relative: boolean = false;
+    @Output() public openChange: EventEmitter<boolean> = new EventEmitter<boolean>();
+    @Output() public positionChange: EventEmitter<IPoint> = new EventEmitter<IPoint>();
+
+    @ContentChildren(PopupMenuItemComponent) private menuItems: QueryList<PopupMenuItemComponent>;
+
+    private _open: boolean = false;
+    private _position: IPoint = {x: 0, y: 0};
+
+    public ngAfterContentInit() {
+        this._updateMenuItemsList(this.menuItems);
+        this.menuItems.changes.subscribe(this._updateMenuItemsList);
+    }
+
+    private _updateMenuItemsList(menuItemsList: QueryList<PopupMenuItemComponent>) {
+        menuItemsList.forEach((c, idx) => {
+            c.parentMenu = this;
+            c.index = idx;
+        });
+    }
+}
diff --git a/src/angular/popup-menu/popup-menu.module.ts b/src/angular/popup-menu/popup-menu.module.ts
new file mode 100644
index 0000000..3a58b91
--- /dev/null
+++ b/src/angular/popup-menu/popup-menu.module.ts
@@ -0,0 +1,21 @@
+import { NgModule } from "@angular/core";
+import { PopupMenuListComponent } from "./popup-menu-list.component";
+import { PopupMenuItemComponent } from "./popup-menu-item.component";
+import { CommonModule } from "@angular/common";
+
+
+@NgModule({
+    declarations: [
+        PopupMenuListComponent,
+        PopupMenuItemComponent
+    ],
+    imports: [
+        CommonModule
+    ],
+    exports: [
+        PopupMenuListComponent,
+        PopupMenuItemComponent
+    ],
+})
+export class PopupMenuModule {
+}