Merge pull request #45 from edcarroll/develop

v0.5.0 into master
edcarroll · Mar 22, 2017 · 7560e32 · 7560e32
2 parents 7de1e8f + 041aa70
commit 7560e32
Show file tree

Hide file tree

Showing 156 changed files with 3,559 additions and 2,021 deletions.
diff --git a/.gitattributes b/.gitattributes
diff --git a/.gitignore b/.gitignore
@@ -4,6 +4,11 @@
 /dist
 /tmp
 
+## ngc logs
+
+*.ngfactory.ts
+*.ngsummary.json
+
 # dependencies
 /node_modules
 /bower_components
@@ -14,6 +19,7 @@
 .classpath
 *.launch
 .settings/
+.vscode
 
 # misc
 /.sass-cache
@@ -24,15 +30,18 @@ npm-debug.log
 testem.log
 /typings
 
-# e2e
-/e2e/*.js
-/e2e/*.map
-
-#System Files
+# System Files
 .DS_Store
 Thumbs.db
 
-# TypeScript
-*.js
-*.map
+# Non TS files
 *.d.ts
+*.metadata.json
+*.js
+*.js.map
+
+# Config Files
+!*.config.js
+
+# Output Files
+demo/dist
diff --git a/.npmignore b/.npmignore
@@ -21,3 +21,7 @@ Desktop.ini
 # Mac
 .DS_Store
 **/.DS_Store
+
+# TS Files
+*.ts
+!*.d.ts
diff --git a/README.md b/README.md
@@ -4,7 +4,7 @@ Semantic UI Angular 2 Integrations, written in pure AngularJS - **no JQuery requ
 
 ## Demo & Usage
 
-[ng2-semantic-ui](http://edcarroll.github.io/ng2-semantic-ui/)
+[ng2-semantic-ui](https://edcarroll.github.io/ng2-semantic-ui/)
 
 ## Installation
 
@@ -20,12 +20,12 @@ Next include the Semantic UI CSS file in your `index.html` (you can include a ma
 
 Once installed you need to import the main module:
 ```ts
-import {SuiModule} from 'ng2-semantic-ui/ng2-semantic-ui';
+import {SuiModule} from 'ng2-semantic-ui';
 ```
 
 Finally import the main module into your application module:
 ```ts
-import {SuiModule} from 'ng2-semantic-ui/ng2-semantic-ui';
+import {SuiModule} from 'ng2-semantic-ui';
 
 @NgModule({
     declarations: [AppComponent, ...],
@@ -37,32 +37,33 @@ export class AppModule {}
 
 N.B. you can import individual component modules:
 ```ts
-import {SuiCheckboxModule, SuiRatingModule} from 'ng2-semantic-ui/ng2-semantic-ui';
+import {SuiCheckboxModule, SuiRatingModule} from 'ng2-semantic-ui';
 ```
 
 Now you're good to go!
 
 ## Dependencies
 
-* [Angular 2](https://angular.io) (^2.0.0 final)
+* [Angular 2](https://angular.io) (>=2.0.0)
 * [Semantic UI CSS](http://semantic-ui.com/) (jQuery is **not** required)
 
 ## Components
 
 The current list of available components with links to their docs is below:
 
-* [Accordion](http://edcarroll.github.io/ng2-semantic-ui/#/components/accordion)
-* [Checkbox](http://edcarroll.github.io/ng2-semantic-ui/#/components/checkbox)
-* [Collapse](http://edcarroll.github.io/ng2-semantic-ui/#/components/collapse)
-* [Dimmer](http://edcarroll.github.io/ng2-semantic-ui/#/components/dimmer)
-* [Dropdown](http://edcarroll.github.io/ng2-semantic-ui/#/components/dropdown)
-* [Message](http://edcarroll.github.io/ng2-semantic-ui/#/components/message)
-* [Progress](http://edcarroll.github.io/ng2-semantic-ui/#/components/progress)
-* [Rating](http://edcarroll.github.io/ng2-semantic-ui/#/components/rating)
-* [Search](http://edcarroll.github.io/ng2-semantic-ui/#/components/search)
-* [Select](http://edcarroll.github.io/ng2-semantic-ui/#/components/select)
-* [Tabs](http://edcarroll.github.io/ng2-semantic-ui/#/components/tabs)
-* [Transition](http://edcarroll.github.io/ng2-semantic-ui/#/components/transition)
+* [Accordion](https://edcarroll.github.io/ng2-semantic-ui/#/components/accordion)
+* [Checkbox](https://edcarroll.github.io/ng2-semantic-ui/#/components/checkbox)
+* [Collapse](https://edcarroll.github.io/ng2-semantic-ui/#/components/collapse)
+* [Dimmer](https://edcarroll.github.io/ng2-semantic-ui/#/components/dimmer)
+* [Dropdown](https://edcarroll.github.io/ng2-semantic-ui/#/components/dropdown)
+* [Message](https://edcarroll.github.io/ng2-semantic-ui/#/components/message)
+* [Popup](https://edcarroll.github.io/ng2-semantic-ui/#/components/popup)
+* [Progress](https://edcarroll.github.io/ng2-semantic-ui/#/components/progress)
+* [Rating](https://edcarroll.github.io/ng2-semantic-ui/#/components/rating)
+* [Search](https://edcarroll.github.io/ng2-semantic-ui/#/components/search)
+* [Select](https://edcarroll.github.io/ng2-semantic-ui/#/components/select)
+* [Tabs](https://edcarroll.github.io/ng2-semantic-ui/#/components/tabs)
+* [Transition](https://edcarroll.github.io/ng2-semantic-ui/#/components/transition)
 
 ## Development
 

diff --git a/angular-cli.json b/angular-cli.json
@@ -1,28 +1,27 @@
 {
   "project": {
-    "version": "1.0.0-beta.11-webpack.8",
+    "version": "1.0.0-beta.31",
     "name": "ng2-semantic-ui"
   },
   "apps": [
     {
-      "root": "demo",
-      "outDir": "dist",
-      "assets": "assets",
+      "root": "demo/src",
+      "outDir": "demo/dist",
+      "assets": [
+        "assets",
+        "favicon.ico"
+      ],
       "index": "index.html",
       "main": "main.ts",
-      "test": "test.ts",
       "tsconfig": "tsconfig.json",
-      "prefix": "app",
+      "prefix": "demo",
       "mobile": false,
-      "styles": [
-          "css/style.css",
-          "css/code.css"
-      ],
+      "styles": ["styles.css"],
       "scripts": [],
+      "environmentSource": "environments/environment.ts",
       "environments": {
-        "source": "environments/environment.ts",
-        "prod": "environments/environment.prod.ts",
-        "dev": "environments/environment.dev.ts"
+        "dev": "environments/environment.ts",
+        "prod": "environments/environment.prod.ts"
       }
     }
   ],
@@ -41,6 +40,17 @@
   "defaults": {
     "styleExt": "css",
     "prefixInterfaces": false,
-    "lazyRoutePrefix": "+"
+    "inline": {
+      "style": false,
+      "template": false
+    },
+    "spec": {
+      "class": false,
+      "component": true,
+      "directive": true,
+      "module": false,
+      "pipe": true,
+      "service": true
+    }
   }
 }
diff --git a/components/accordion/accordion-panel.ts b/components/accordion/accordion-panel.ts
@@ -1,55 +1,93 @@
 import {Component, Input, Output, EventEmitter} from '@angular/core';
 import {SuiAccordionService} from "./accordion.service";
+import {TransitionController} from '../transition/transition-controller';
+import {Transition, TransitionDirection} from '../transition/transition';
 
 @Component({
     selector: 'sui-accordion-panel',
     exportAs: 'suiAccordionPanel',
     template: `
-<div class="title" [class.active]="isOpen" (click)="toggleOpen($event)">
+<!-- Title -->
+<div class="title" [class.active]="isOpen" (click)="toggleOpen($event)" >
     <ng-content select="[title]"></ng-content>
 </div>
-<div [suiCollapse]="!isOpen">
-    <div class="content" [class.active]="isOpen">
+<!-- Content -->
+<div [suiCollapse]="!isOpen" [collapseDuration]="transitionDuration">
+    <div class="content" [class.active]="isOpen" [suiTransition]="transitionController">
         <ng-content select="[content]"></ng-content>
     </div>
 </div>
 `,
     styles: [`
+/* Manual style as Semantic UI relies on > selector */
 .content {
-    padding: .5em 0 1em
+    padding: .5em 0 1em;
 }
 
-:host:last-child .content {
-    padding-bottom: 0
+/* Another > selector fix */
+:host:first-child .title {
+    border-top: none;
 }
 `]
 })
 export class SuiAccordionPanel {
     private _service:SuiAccordionService;
+
+    public transitionController:TransitionController;
+
     public set service(service:SuiAccordionService) {
         this._service = service;
     }
 
-    @Input() public isDisabled:boolean;
+    @Input()
+    public isDisabled:boolean;
+
+    private _isOpen:boolean;
 
     @Input()
-    public get isOpen():boolean {
+    public get isOpen() {
         return this._isOpen;
     }
-    @Output() public isOpenChange:EventEmitter<boolean> = new EventEmitter<boolean>(false);
 
     public set isOpen(value:boolean) {
-        this._isOpen = value;
-        if (value && this._service) {
-            this._service.closeOtherPanels(this);
+        if (value != this.isOpen) {
+            // Only update if the value has changed.
+            this._isOpen = value;
+
+            if (value && this._service) {
+                // If we are opening this panel, we must close the other ones.
+                this._service.closeOtherPanels(this);
+            }
+            this.isOpenChange.emit(this.isOpen);
+
+            // Cancel all current animations, and fade the contents. The direction is automatic.
+            this.transitionController.stopAll();
+            this.transitionController.animate(new Transition("fade", this.transitionDuration));
+        }
+    }
+
+    public get transitionDuration() {
+        if (this._service) {
+            // Return the service defined transition duration.
+            return this._service.transitionDuration;
         }
-        this.isOpenChange.emit(this._isOpen);
+        // Revert to instantaneous if the service is not yet loaded.
+        return 0;
     }
 
-    private _isOpen:boolean = false;
+    @Output()
+    public isOpenChange:EventEmitter<boolean>;
+
+    constructor() {
+        this.transitionController = new TransitionController(false);
 
-    public toggleOpen(event:MouseEvent):any {
+        this._isOpen = false;
+        this.isOpenChange = new EventEmitter<boolean>(false);
+    }
+
+    public toggleOpen(event:MouseEvent) {
         event.preventDefault();
+
         if (!this.isDisabled) {
             this.isOpen = !this.isOpen;
         }

diff --git a/components/accordion/accordion.module.ts b/components/accordion/accordion.module.ts
@@ -1,12 +1,24 @@
 import {NgModule} from '@angular/core';
-import {SUI_ACCORDION_DIRECTIVES, SUI_ACCORDION_PROVIDERS} from "./accordion";
 import {SuiCollapseModule} from "../collapse/collapse.module";
 import {CommonModule} from "@angular/common";
+import {SuiAccordion} from './accordion';
+import {SuiAccordionPanel} from './accordion-panel';
+import {SuiTransitionModule} from '../transition/transition.module';
 
 @NgModule({
-    imports: [CommonModule, SuiCollapseModule],
-    declarations: SUI_ACCORDION_DIRECTIVES,
-    exports: SUI_ACCORDION_DIRECTIVES,
-    providers: SUI_ACCORDION_PROVIDERS
+    imports: [
+        CommonModule,
+        SuiCollapseModule,
+        SuiTransitionModule
+    ],
+    declarations: [
+        SuiAccordion,
+        SuiAccordionPanel
+    ],
+    exports: [
+        SuiAccordion,
+        SuiAccordionPanel
+    ],
+    providers: []
 })
 export class SuiAccordionModule {}
diff --git a/components/accordion/accordion.service.ts b/components/accordion/accordion.service.ts
@@ -1,10 +1,18 @@
 import {SuiAccordionPanel} from "./accordion-panel";
 
 export class SuiAccordionService {
-    // State
-    public closeOthers:boolean = true;
+    public closeOthers:boolean;
 
-    public panels:SuiAccordionPanel[] = [];
+    public transitionDuration:number;
+
+    public panels:SuiAccordionPanel[];
+
+    constructor() {
+        this.closeOthers = true;
+        this.transitionDuration = 350;
+
+        this.panels = [];
+    }
 
     public addPanel(panel:SuiAccordionPanel) {
         panel.service = this;
@@ -16,7 +24,7 @@ export class SuiAccordionService {
             return;
         }
 
-        this.panels.forEach((p:SuiAccordionPanel) => {
+        this.panels.forEach(p => {
             if (p !== panel) {
                 p.isOpen = false;
             }