Rewritten select component

Author: edcarroll

components/dimmer/dimmer.module.ts

@@ -0,0 +1,8 @@
+import {NgModule} from '@angular/core';
+import {SUI_DIMMER_DIRECTIVES} from "./dimmer";
+
+@NgModule({
+    declarations: SUI_DIMMER_DIRECTIVES,
+    exports: SUI_DIMMER_DIRECTIVES
+})
+export class SuiDimmerModule {}

old-components/dimmer/dimmer.component.ts renamed to components/dimmer/dimmer.ts

@@ -2,6 +2,7 @@ import {Component, Input, Output, HostBinding, HostListener, EventEmitter} from
 
 @Component({
     selector: 'sui-dimmer',
+    exportAs: 'suiDimmer',
     template: `
 <div class="content">
     <div class="center">
@@ -21,7 +22,7 @@ import {Component, Input, Output, HostBinding, HostListener, EventEmitter} from
 }
 `]
 })
-export class Dimmer {
+export class SuiDimmer {
     @HostBinding('class.ui')
     @HostBinding('class.dimmer') classes = true;
 
@@ -30,7 +31,7 @@ export class Dimmer {
     @HostBinding('class.active')
     @Input() public isDimmed:boolean = false;
 
-    @Output() public isDimmedChange:EventEmitter<boolean> = new EventEmitter(false);
+    @Output() public isDimmedChange:EventEmitter<boolean> = new EventEmitter<boolean>(false);
 
     @HostListener('click')
     private click() {
@@ -40,3 +41,5 @@ export class Dimmer {
         }
     }
 }
+
+export const SUI_DIMMER_DIRECTIVES = [SuiDimmer];

old-components/dropdown/dropdown-menu.directive.ts renamed to components/dropdown/dropdown-menu.ts

@@ -1,10 +1,12 @@
 import {Directive, ElementRef, HostBinding} from '@angular/core';
-import {DropdownService} from './dropdown.service';
+import {SuiDropdownService} from './dropdown.service';
 
-@Directive({ selector: '[suiDropdownMenu]' })
-export class DropdownMenu {
-    private _service:DropdownService;
-    public set service(service:DropdownService) {
+@Directive({
+    selector: '[suiDropdownMenu]'
+})
+export class SuiDropdownMenu {
+    private _service:SuiDropdownService;
+    public set service(service:SuiDropdownService) {
         this._service = service;
         this._service.menuElement = this.el;
     }

components/dropdown/dropdown.module.ts

@@ -0,0 +1,9 @@
+import {NgModule} from '@angular/core';
+import {SUI_DROPDOWN_DIRECTIVES, SUI_DROPDOWN_PROVIDERS} from "./dropdown";
+
+@NgModule({
+    declarations: SUI_DROPDOWN_DIRECTIVES,
+    exports: SUI_DROPDOWN_DIRECTIVES,
+    providers: SUI_DROPDOWN_PROVIDERS
+})
+export class SuiDropdownModule {}

old-components/dropdown/dropdown.service.ts renamed to components/dropdown/dropdown.service.ts

@@ -15,15 +15,15 @@ export const KEYCODE = {
     BACKSPACE: 	8
 };
 
-export class DropdownService {
+export class SuiDropdownService {
     // State
     private _isOpen:boolean;
     public isDisabled:boolean;
     public autoClose:string;
 
     // State Events
-    public onToggle:EventEmitter<boolean> = new EventEmitter(false);
-    public isOpenChange:EventEmitter<boolean> = new EventEmitter(false);
+    public onToggle:EventEmitter<boolean> = new EventEmitter<boolean>(false);
+    public isOpenChange:EventEmitter<boolean> = new EventEmitter<boolean>(false);
 
     // Important Elements
     public dropdownElement:ElementRef;
@@ -124,6 +124,7 @@ export class DropdownService {
             return;
         }
 
+        //noinspection TypeScriptUnresolvedFunction
         if (this.isOpen &&
             ([KEYCODE.ENTER, KEYCODE.UP, KEYCODE.RIGHT, KEYCODE.DOWN, KEYCODE.LEFT]
                 .find(keyCode => event.which == keyCode))) {
@@ -200,4 +201,4 @@ export class DropdownService {
             }
         }
     }
-}
+}

old-components/dropdown/dropdown.directive.ts renamed to components/dropdown/dropdown.ts

@@ -1,13 +1,13 @@
 import {Directive, Input, Output, HostBinding, EventEmitter, ElementRef, HostListener, AfterContentInit, ContentChild} from '@angular/core';
-import {DropdownService} from './dropdown.service';
-import {DropdownMenu} from './dropdown-menu.directive';
+import {SuiDropdownService} from './dropdown.service';
+import {SuiDropdownMenu} from './dropdown-menu';
 
 @Directive({
     selector: '[suiDropdown]'
 })
-export class Dropdown implements AfterContentInit {
-    protected _service:DropdownService;
-    @ContentChild(DropdownMenu) protected _menu:DropdownMenu;
+export class SuiDropdown implements AfterContentInit {
+    protected _service:SuiDropdownService;
+    @ContentChild(SuiDropdownMenu) protected _menu:SuiDropdownMenu;
 
     @HostBinding('class.visible')
     @Input()
@@ -49,7 +49,7 @@ export class Dropdown implements AfterContentInit {
     }
 
     public constructor(el: ElementRef) {
-        this._service = new DropdownService();
+        this._service = new SuiDropdownService();
         this._service.dropdownElement = el;
     }
 
@@ -67,3 +67,6 @@ export class Dropdown implements AfterContentInit {
         return false;
     }
 }
+
+export const SUI_DROPDOWN_DIRECTIVES = [SuiDropdown, SuiDropdownMenu];
+export const SUI_DROPDOWN_PROVIDERS = [SuiDropdownService];

components/index.ts

@@ -3,13 +3,28 @@ import {NgModule} from "@angular/core";
 import {SuiCollapseModule} from "./collapse/collapse.module";
 import {SuiAccordionModule} from "./accordion/accordion.module";
 import {SuiCheckboxModule} from "./checkbox/checkbox.module";
+import {SuiDimmerModule} from "./dimmer/dimmer.module";
+import {SuiDropdownModule} from "./dropdown/dropdown.module";
+import {SuiMessageModule} from "./message/message.module";
+import {SuiProgressModule} from "./progress/progress.module";
+import {SuiRatingModule} from "./rating/rating.module";
+import {SuiSearchModule} from "./search/search.module";
+import {SuiTabsModule} from "./tabs/tab.module";
+import {SuiSelectModule} from "./select/select.module";
 
 @NgModule({
     exports: [
         SuiAccordionModule,
         SuiCheckboxModule,
-        SuiCollapseModule
+        SuiCollapseModule,
+        SuiDimmerModule,
+        SuiDropdownModule,
+        SuiMessageModule,
+        SuiProgressModule,
+        SuiRatingModule,
+        SuiSearchModule,
+        SuiSelectModule,
+        SuiTabsModule
     ]
 })
-export class SuiModule {
-}
+export class SuiModule {}

components/message/message.module.ts

@@ -0,0 +1,10 @@
+import {NgModule} from '@angular/core';
+import {SUI_MESSAGE_DIRECTIVES} from "./message";
+import {CommonModule} from "@angular/common";
+
+@NgModule({
+    imports: [CommonModule],
+    declarations: SUI_MESSAGE_DIRECTIVES,
+    exports: SUI_MESSAGE_DIRECTIVES
+})
+export class SuiMessageModule {}

old-components/message/message.component.ts renamed to components/message/message.ts

@@ -2,18 +2,18 @@ import {Component, Input, Output, EventEmitter} from '@angular/core';
 
 @Component({
     selector: 'sui-message',
-    directives: [],
+    exportAs: 'suiMessage',
     template: `
 <div class="ui message {{ classes }}" *ngIf="!dismissed">
     <i class="close icon" *ngIf="dismissible" (click)="dismiss()"></i>
     <ng-content></ng-content>
 </div>
 `
 })
-export class Message {
+export class SuiMessage {
     @Input() public dismissible:boolean = true;
 
-    @Output() public onDismiss:EventEmitter<Message> = new EventEmitter(false);
+    @Output() public onDismiss:EventEmitter<SuiMessage> = new EventEmitter<SuiMessage>(false);
 
     private dismissed:boolean = false;
 
@@ -24,4 +24,6 @@ export class Message {
 
     @Input("class")
     private classes:string = "";
-}
+}
+
+export const SUI_MESSAGE_DIRECTIVES = [SuiMessage];

components/progress/progress.module.ts

@@ -0,0 +1,10 @@
+import {NgModule} from '@angular/core';
+import {SUI_PROGRESS_DIRECTIVES} from "./progress";
+import {CommonModule} from "@angular/common";
+
+@NgModule({
+    imports: [CommonModule],
+    declarations: SUI_PROGRESS_DIRECTIVES,
+    exports: SUI_PROGRESS_DIRECTIVES
+})
+export class SuiProgressModule {}