feat(ExpandableListItemComponent): isExpanded property

isExpanded property support to bind the status of the list-item element; removed mandatory `item`
attribute into the `expandable-list-divider` directive

closes #4

Author: andreasonny83

README.md

@@ -16,14 +16,17 @@ Plunker DEMO available [here](https://embed.plnkr.co/uAPJq0/)
 
 ## Table of contents
 
-*   [Installation](#installation)
-*   [Setup](#setup)
-*   [Usage](#usage)
-*   [Design your list](#design-your-list)
-*   [Demo App](#demo-app)
-*   [Contributing](#contributing)
-*   [Changelog](#changelog)
-*   [License](#license)
+* [Installation](#installation)
+* [Setup](#setup)
+* [Usage](#usage)
+* [Design your list](#design-your-list)
+* [Demo App](#demo-app)
+* [Contributing](#contributing)
+* [Options](#options)
+  * [Properties](#properties)
+  * [Attributes](#attributes)
+* [Changelog](#changelog)
+* [License](#license)
 
 ## Installation
 
@@ -104,6 +107,7 @@ import { Component } from '@angular/core';
       <span title>My List</span>
       <a item href="http://www.goo.gl">Google</a>
       <a item href="http://www.goo.gl">Google</a>
+      <expandable-list-divider></expandable-list-divider>
       <a item href="http://www.goo.gl">Google</a>
     </expandable-list-item>
   </expandable-list>
@@ -158,7 +162,7 @@ Now you're ready to fill your list with some items.
 ```
 
 It is important to append the html attribute `item` to each of the item you want
-to render in the list and it's up to you which HTML tag to use. We've just filled
+to be rendered in the list and it's up to you which HTML tag to use. We've just filled
 our list with anchor link but feel free to use any other tag.
 
 ### Dividers
@@ -170,15 +174,12 @@ our list with anchor link but feel free to use any other tag.
     <span secondary>Secondary</span>
     <a item href="http://www.goo.gl">Google</a>
     <a item href="http://www.goo.gl">Google</a>
-    <expandable-list-divider item></expandable-list-divider>
+    <expandable-list-divider></expandable-list-divider>
     <a item href="http://www.goo.gl">Google</a>
   </expandable-list-item>
 </expandable-list>
 ```
 
-We still need to postfix the `expandable-list-divider` with the `item` attribute to
-see that divider rendered on the page.
-
 ### Create more
 
 Now you can create as many `<expandable-list-item>` nodes as you want inside
@@ -191,7 +192,7 @@ your `<expandable-list>`.
     <span secondary>Secondary</span>
     <a item href="http://www.goo.gl">Google</a>
     <a item href="http://www.goo.gl">Google</a>
-    <expandable-list-divider item></expandable-list-divider>
+    <expandable-list-divider></expandable-list-divider>
     <a item href="http://www.goo.gl">Google</a>
   </expandable-list-item>
 
@@ -217,6 +218,46 @@ $ npm run demo
 Open your browser to [http://localhost:9007/](http://localhost:9007/)
 to see the application running.
 
+## Options
+
+## Properties
+
+### isExpanded
+
+| Type | Default value |
+| --- | --- |
+| boolean | false |
+
+Used for interacting with the `expandable-list-item` element.
+
+Example:
+
+```ts
+@Component({
+  selector: 'app',
+  template: `
+    <expandable-list class="expandable-list">
+      <expandable-list-item [isExpanded]="listExpanded">
+        <span title>My list</span>
+        <a item href="http://www.goo.gl">Google</a>
+        <a item href="http://www.goo.gl">Google</a>
+        <a item href="http://www.goo.gl">Google</a>
+      </expandable-list-item>
+    </expandable-list>
+  `
+})
+export class AppComponent {
+  listExpanded = true;
+}
+```
+
+## Attributes
+
+| Name | Type | Description |
+| --- | --- | --- |
+| disabled | boolean | When applied to the `expandable-list-item`, disabled the
+| is-expanded | boolean | Reflect the expandable state of the item list element
+
 ## Contributing
 
 This package is using the AngularJS commit messages as default way to contribute

config/webpack.demo.js

@@ -51,13 +51,30 @@ module.exports = {
       },
 
       {
-        test: /\.(css|html)?$/,
+        test: /\.css$/,
         use: [
           {
             loader: 'raw-loader'
           },
+          {
+            loader: 'postcss-loader',
+            options: {
+              plugins: function() {
+                return [
+                  require('autoprefixer')({
+                    browsers: ['last 3 versions', '> 2%']
+                  })
+                ]
+              }
+            }
+          },
         ]
       },
+
+      {
+        test: /\.html$/,
+        use: [ 'raw-loader' ]
+      },
     ]
   },
 

demo/app.component.ts

@@ -17,7 +17,7 @@ import { Component } from '@angular/core';
   `],
   template: `
     <expandable-list class="expandable-list">
-      <expandable-list-item *ngFor="let item of items">
+      <expandable-list-item *ngFor="let item of items" [isExpanded]="listAExpanded">
         <span title>{{ item.title }}</span>
         <a item *ngFor="let i of item.items"
            [href]="i.link">
@@ -30,28 +30,30 @@ import { Component } from '@angular/core';
         <span secondary>disabled</span>
       </expandable-list-item>
 
-      <expandable-list-item>
+      <expandable-list-item [isExpanded]="listCExpanded">
         <span title>Manual</span>
         <span secondary>first</span>
-        <a href="http://www.goo.gl">Something else</a>
+
+        <a href="http://www.goo.gl">THIS WON'T BE RENDERED!</a>
+
         <a item href="http://www.goo.gl">Google</a>
         <a item href="http://www.goo.gl">Google</a>
         <a item href="http://www.goo.gl">Google</a>
 
-        <expandable-list-divider item></expandable-list-divider>
+        <expandable-list-divider></expandable-list-divider>
 
-        <a item href="http://www.goo.gl">Google</a>
+        <a item href="http://www.goo.gl">Google after</a>
       </expandable-list-item>
 
-      <expandable-list-item>
+      <expandable-list-item [isExpanded]="listBExpanded" disabled>
         <span title>Manual</span>
         <span secondary>second</span>
         <a href="http://www.goo.gl">Something else</a>
         <a item href="http://www.goo.gl">Google</a>
         <a item href="http://www.goo.gl">Google</a>
         <a item href="http://www.goo.gl">Google</a>
 
-        <expandable-list-divider item></expandable-list-divider>
+        <expandable-list-divider></expandable-list-divider>
 
         <a item href="http://www.goo.gl">Google</a>
       </expandable-list-item>
@@ -60,6 +62,9 @@ import { Component } from '@angular/core';
 })
 export class AppComponent {
   items: any;
+  listAExpanded = false;
+  listBExpanded = true;
+  listCExpanded = false;
 
   constructor() {
     this.items = [

src/expandable-list-item.html

@@ -28,6 +28,6 @@
        [ngStyle]="{'margin-top': marginTop }"
        [attr.aria-hidden]="!isExpanded"
        #contentEl>
-    <ng-content select="[item]"></ng-content>
+    <ng-content select="[item], expandable-list-divider"></ng-content>
   </div>
 </div>

src/expandable-list.component.ts

@@ -1,10 +1,20 @@
+/**
+ * angular2-expandable-list
+ *
+ * Copyright 2017, @andreasonny83, All rights reserved.
+ *
+ * @author: @andreasonny83 <andreasonny83@gmail.com>
+ */
+
 import {
   Component,
   Directive,
   ViewEncapsulation,
   HostBinding,
   Input,
   AfterViewInit,
+  OnChanges,
+  SimpleChanges,
   ElementRef,
   ViewChild,
 } from '@angular/core';
@@ -42,12 +52,17 @@ export class ExpandableListDividerStyler { }
     '[class.expandable-list-item]': 'true',
   },
   templateUrl: './expandable-list-item.html',
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
 })
-export class ExpandableListItemComponent implements AfterViewInit {
-  public isExpanded: boolean;
+export class ExpandableListItemComponent implements AfterViewInit, OnChanges {
   public marginTop: string;
 
+  @Input('isExpanded')
+  get isExpanded() { return this.expanded; }
+  set isExpanded(value: boolean) {
+    this.expanded = (value !== null && `${value}` !== 'false') ? true : false;
+  }
+
   @Input('disabled')
   get disabled() { return this.isDisabled; }
   set disabled(value: boolean) {
@@ -62,13 +77,17 @@ export class ExpandableListItemComponent implements AfterViewInit {
   @HostBinding('attr.disabled')
   private isDisabled: boolean;
 
-  constructor() {
-    this.isExpanded = false;
-  }
+  @HostBinding('attr.is-expanded')
+  private expanded: boolean = false;
 
   public ngAfterViewInit() {
     this.elHeight = this.elementView.nativeElement.offsetHeight;
-    this.marginTop = `-${this.elHeight}px`;
+  }
+
+  public ngOnChanges(changes: SimpleChanges) {
+    if ('isExpanded' in changes) {
+      this.updateMarginTop();
+    }
   }
 
   public onClick() {
@@ -78,6 +97,10 @@ export class ExpandableListItemComponent implements AfterViewInit {
 
     this.isExpanded = !this.isExpanded;
 
+    this.updateMarginTop();
+  }
+
+  private updateMarginTop() {
     if (!this.isExpanded) {
       this.marginTop = `-${this.elHeight}px`;
     } else {

src/expandable-list.css

@@ -9,7 +9,13 @@
   background: #FFF;
 }
 
-.expandable-list [disabled].expandable-list-item {
+.expandable-list .expandable-list-item[disabled],
+.expandable-list .expandable-list-item[disabled] * {
+  pointer-events: none;
+  cursor: default;
+}
+
+.expandable-list .expandable-list-item[disabled].expandable-list-item {
   background: #eeeeee;
 }
 
@@ -28,10 +34,6 @@
   cursor: pointer;
 }
 
-.expandable-list [disabled].expandable-list-item .expandable-list-item-title {
-  cursor: default;
-}
-
 .expandable-list .expandable-list-item .expandable-list-item-title .expandable-list-item--title,
 .expandable-list .expandable-list-item .expandable-list-item-title .expandable-list-item--secondary {
   flex: 1;
@@ -110,6 +112,7 @@
   font-size: 16px;
   opacity: 0;
   pointer-events: none;
+  will-change: margin-top, opacity;
   transition: opacity 0.15s ease-out,
               margin-top 0.3s ease-out;
 }

src/expandable-list.module.ts

@@ -1,3 +1,11 @@
+/**
+ * angular2-expandable-list
+ *
+ * Copyright 2017, @andreasonny83, All rights reserved.
+ *
+ * @author: @andreasonny83 <andreasonny83@gmail.com>
+ */
+
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import {