Upgraded Accordion, Checkbox, Collapse

Author: edcarroll

angular-cli.json

@@ -1,32 +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
+    "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": "+"
     }
-  ],
-  "addons": [],
-  "packages": [],
-  "e2e": {
-    "protractor": {
-      "config": "demo/config/protractor.conf.js"
-    }
-  },
-  "test": {
-    "karma": {
-      "config": "demo/config/karma.conf.js"
-    }
-  },
-  "defaults": {
-    "prefix": "app",
-    "sourceDir": "demo",
-    "styleExt": "css",
-    "prefixInterfaces": false,
-    "lazyRoutePrefix": "+"
-  }
 }

components/accordion/accordion-panel.component.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;
+        }
+    }
+}

components/accordion/accordion-panel.ts

@@ -0,0 +1,11 @@
+import {NgModule} from '@angular/core';
+import {SUI_ACCORDION_DIRECTIVES, SUI_ACCORDION_PROVIDERS} from "./accordion";
+import {SuiCollapseModule} from "../collapse/collapse.module";
+
+@NgModule({
+    imports: [SuiCollapseModule],
+    declarations: SUI_ACCORDION_DIRECTIVES,
+    exports: SUI_ACCORDION_DIRECTIVES,
+    providers: SUI_ACCORDION_PROVIDERS
+})
+export class SuiAccordionModule {}

components/accordion/accordion.component.ts

@@ -0,0 +1,25 @@
+import {SuiAccordionPanel} from "./accordion-panel";
+
+export class SuiAccordionService {
+    // State
+    public closeOthers:boolean = true;
+
+    public panels:SuiAccordionPanel[] = [];
+
+    public addPanel(panel:SuiAccordionPanel) {
+        panel.service = this;
+        this.panels.push(panel);
+    }
+
+    public closeOtherPanels(panel:SuiAccordionPanel) {
+        if (!this.closeOthers) {
+            return;
+        }
+
+        this.panels.forEach((p:SuiAccordionPanel) => {
+            if (p !== panel) {
+                p.isOpen = false;
+            }
+        });
+    }
+}

components/accordion/accordion.module.ts

@@ -0,0 +1,53 @@
+import {
+    Component, Input, HostBinding, ContentChildren, QueryList,
+    AfterContentInit
+} from "@angular/core";
+import {SuiAccordionPanel} from "./accordion-panel";
+import {SuiAccordionService} from "./accordion.service";
+
+@Component({
+    selector: 'sui-accordion',
+    exportAs: 'suiAccordion',
+    template: `
+<ng-content></ng-content>
+`,
+    styles: [`
+/* Fix for general styling issues */
+:host {
+    display: block;
+}
+/* Fix for styled border issue */
+:host.styled sui-accordion-panel:first-child .title {
+    border-top: none
+}
+
+`]
+})
+export class SuiAccordion implements AfterContentInit {
+    @Input()
+    public get closeOthers():boolean {
+        return this._service.closeOthers;
+    }
+
+    public set closeOthers(value:boolean) {
+        this._service.closeOthers = value;
+    }
+
+    @HostBinding('class.ui')
+    @HostBinding('class.accordion') classes = true;
+
+    protected _service:SuiAccordionService;
+    @ContentChildren(SuiAccordionPanel)
+    protected panels:QueryList<SuiAccordionPanel>;
+
+    constructor() {
+        this._service = new SuiAccordionService();
+    }
+
+    ngAfterContentInit() {
+        this.panels.forEach(p => this._service.addPanel(p));
+    }
+}
+
+export const SUI_ACCORDION_DIRECTIVES = [SuiAccordion, SuiAccordionPanel];
+export const SUI_ACCORDION_PROVIDERS = [SuiAccordionService];

components/accordion/accordion.service.ts

@@ -0,0 +1,11 @@
+import {NgModule} from '@angular/core';
+import {FormsModule} from "@angular/forms";
+import {SUI_CHECKBOX_DIRECTIVES} from "./checkbox";
+import {SUI_RADIOBUTTON_DIRECTIVES} from "./radiobutton";
+
+@NgModule({
+    imports: [FormsModule],
+    declarations: [SUI_CHECKBOX_DIRECTIVES, SUI_RADIOBUTTON_DIRECTIVES],
+    exports: [SUI_CHECKBOX_DIRECTIVES, SUI_RADIOBUTTON_DIRECTIVES]
+})
+export class SuiCheckboxModule {}