Merge pull request #10 from edcarroll/develop

v0.3.0 into Master

Author: edcarroll

.editorconfig

@@ -0,0 +1,14 @@
+# Editor configuration, see http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 4
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = 0
+trim_trailing_whitespace = false

.gitignore

@@ -1,27 +1,38 @@
-# Node
-node_modules
-npm-debug.log
+# See http://help.github.com/ignore-files/ for more about ignoring files.
 
-# TypeScript
-*.js
-!make.js
-!demo/make-demo.js
-*.map
-*.d.ts
-typings
-bundles
-!demo/js/**/*.js
-demo/js/**/*.json
+# compiled output
+/dist
+/tmp
+
+# dependencies
+/node_modules
+/bower_components
 
-# JetBrains
-.idea
+# IDEs and editors
+/.idea
 .project
-.settings
+.classpath
+*.launch
+.settings/
 
-# Windows
-Thumbs.db
-Desktop.ini
+# misc
+/.sass-cache
+/connect.lock
+/coverage/*
+/libpeerconnection.log
+npm-debug.log
+testem.log
+/typings
 
-# Mac
+# e2e
+/e2e/*.js
+/e2e/*.map
+
+#System Files
 .DS_Store
-**/.DS_Store
+Thumbs.db
+
+# TypeScript
+*.js
+*.map
+*.d.ts

.npmignore

@@ -7,7 +7,6 @@ npm-debug.log
 # *.js
 # *.map
 # *.d.ts
-typings
 demo
 
 # JetBrains
@@ -21,4 +20,4 @@ Desktop.ini
 
 # Mac
 .DS_Store
-**/.DS_Store
+**/.DS_Store

.travis.yml

@@ -1,4 +1,4 @@
 language: node_js
 sudo: false
 node_js:
-- '4.2.1'
+- '6'

README.md

@@ -9,23 +9,39 @@ Semantic UI Angular 2 Integrations, written in pure AngularJS - **no JQuery requ
 ## Installation
 
 To install this library, run:
-
 ```bash
 $ npm install ng2-semantic-ui --save
 ```
 
-Add a reference to your `index.html` file: (also ensure you have a reference to the Semantic UI CSS file)
-
+Next include the Semantic UI CSS file in your `index.html` (you can include a manually compiled one if you use themes):
 ```html
-<script src="node_modules/ng2-semantic-ui/bundles/ng2-semantic-ui.min.js"></script>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.css">
 ```
 
-Start using the directives:
+Once installed you need to import the main module:
+```ts
+import {SuiModule} from 'ng2-semantic-ui';
+```
 
+Finally import the main module into your application module:
 ```ts
-import {DIRECTIVES} from `ng2-semantic-ui/ng2-semantic-ui';
+import {SuiModule} from 'ng2-semantic-ui';
+
+@NgModule({
+    declarations: [AppComponent, ...],
+    imports: [SuiModule, ...],  
+    bootstrap: [AppComponent]
+})
+export class AppModule {}
 ```
 
+Now you're good to go!
+
+## Dependencies
+
+* [Angular 2](https://angular.io) (2.0.0-rc.5)
+* [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:
@@ -39,54 +55,21 @@ The current list of available components with links to their docs is below:
 * [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)
 * [Tab](http://edcarroll.github.io/ng2-semantic-ui/#/components/tab)
 
-## Quick start (from scratch)
-
-Clone the [angular2-quickstart](https://github.com/valor-software/angular2-quickstart) repository, and set everything up.
-
-Add the following lines to your `index.html`:
-```html
-<script src="node_modules/ng2-semantic-ui/bundles/ng2-semantic-ui.min.js"></script>
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.css">
-```
-
-Update your `app.component.ts` to be the following:
-
-```ts
-import {Component} from 'angular2/core';
-import {CHECKBOX_DIRECTIVES} from 'ng2-semantic-ui/ng2-semantic-ui';
-
-@Component({
-  selector: 'my-app',
-  directives: [CHECKBOX_DIRECTIVES],
-  template: `
-<sui-checkbox>Checkbox example</sui-checkbox>
-`
-})
-export class AppComponent {}
-```
-
-And you're good to go!
-
 ## Development
 
 To generate all library `*.js`, `*.js.map` and `*.d.ts` files:
 
 ```bash
-$ npm run tsc
-```
-
-To run the demo app:
-```bash
-$ npm run demo
+$ npm run compile
+# use compile:w to watch for changes
 ```
 
-To compile the demo app without running it:
-
+To run the demo app (you must have [Angular-CLI](https://github.com/angular/angular-cli) installed):
 ```bash
-$ npm run tsc-demo
-# use tsc-demo:w to watch for changes
+$ ng serve
 ```
 
 ## License

angular-cli.json

@@ -0,0 +1,32 @@
+{
+    "project": {
+        "version": "1.0.0-beta.11-webpack.2",
+        "name": "ng2-semantic-ui"
+    },
+    "apps": [
+        {
+            "main": "demo/main.ts",
+            "tsconfig": "demo/tsconfig.json",
+            "mobile": false
+        }
+    ],
+    "addons": [],
+    "packages": [],
+    "e2e": {
+        "protractor": {
+            "config": "demo/config/protractor.conf.js"
+        }
+    },
+    "test": {
+        "karma": {
+            "config": "demo/config/karma.conf.js"
+        }
+    },
+    "defaults": {
+        "prefix": "demo",
+        "sourceDir": "demo",
+        "styleExt": "css",
+        "prefixInterfaces": false,
+        "lazyRoutePrefix": "+"
+    }
+}

components/accordion.ts

@@ -0,0 +1,57 @@
+import {Component, Input, Output, EventEmitter} from '@angular/core';
+import {SuiAccordionService} from "./accordion.service";
+
+@Component({
+    selector: 'sui-accordion-panel',
+    exportAs: 'suiAccordionPanel',
+    template: `
+<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">
+        <ng-content select="[content]"></ng-content>
+    </div>
+</div>
+`,
+    styles: [`
+.content {
+    padding: .5em 0 1em
+}
+
+:host:last-child .content {
+    padding-bottom: 0
+}
+`]
+})
+export class SuiAccordionPanel {
+    private _service:SuiAccordionService;
+    public set service(service:SuiAccordionService) {
+        this._service = service;
+    }
+
+    @Input() public isDisabled:boolean;
+
+    @Input()
+    public get isOpen():boolean {
+        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);
+        }
+        this.isOpenChange.emit(this._isOpen);
+    }
+
+    private _isOpen:boolean = false;
+
+    public toggleOpen(event:MouseEvent):any {
+        event.preventDefault();
+        if (!this.isDisabled) {
+            this.isOpen = !this.isOpen;
+        }
+    }
+}