feat(list): add initial commit for ly-list

.package.conf.yml

@@ -22,3 +22,4 @@ components:
   '@alyle/ui/snack-bar': snack-bar
   '@alyle/ui/tooltip': tooltip
   '@alyle/ui/avatar': avatar
+  '@alyle/ui/list': list

.prerender.conf.json

@@ -25,6 +25,8 @@
     "components/checkbox",
     "components/icon",
     "components/toolbar",
-    "components/tooltip"
+    "components/tooltip",
+    "components/avatar",
+    "components/list"
   ]
 }

src/app/components/routes-app.service.ts

@@ -45,6 +45,7 @@ export class RoutesAppService {
           { route: 'drawer', name: 'Drawer' },
           { route: 'field', name: 'Field' },
           { route: 'icon', name: 'Icon' },
+          { route: 'list', name: 'List' },
           { route: 'menu', name: 'Menu' },
           { route: 'radio', name: 'Radio' },
           { route: 'resizing-cropping-images', name: 'Resizing & cropping' },

src/app/docs/components/list-demo/folder-list/folder-list.component.html

@@ -0,0 +1,28 @@
+<div [className]="classes.root">
+  <ly-paper>
+    <ly-list>
+      <button ly-list-item>
+        <ly-avatar>
+          <ly-icon>photo</ly-icon>
+        </ly-avatar>
+        <h4 ly-line>Photos</h4>
+        <p ly-line>Dec 9, 2018</p>
+      </button>
+      <button ly-list-item>
+        <ly-avatar>
+          <ly-icon>library_music</ly-icon>
+        </ly-avatar>
+        <h4 ly-line>Music</h4>
+        <p ly-line>Jan 1, 2018</p>
+      </button>
+      <button ly-list-item>
+        <ly-avatar>
+          <ly-icon>work</ly-icon>
+        </ly-avatar>
+        <h4 ly-line>Work</h4>
+        <p ly-line>Jan 21, 2018</p>
+      </button>
+    </ly-list>
+  </ly-paper>
+</div>
+

src/app/docs/components/list-demo/folder-list/folder-list.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FolderListComponent } from './folder-list.component';
+
+describe('FolderListComponent', () => {
+  let component: FolderListComponent;
+  let fixture: ComponentFixture<FolderListComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ FolderListComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FolderListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/docs/components/list-demo/folder-list/folder-list.component.ts

@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+import { LyTheme2, ThemeVariables } from '@alyle/ui';
+
+const styles = (theme: ThemeVariables) => ({
+  root: {
+    width: '100%',
+    maxWidth: '360px'
+  }
+});
+
+@Component({
+  selector: 'aui-folder-list',
+  templateUrl: './folder-list.component.html'
+})
+export class FolderListComponent {
+  readonly classes = this.theme.addStyleSheet(styles);
+  constructor(
+    private theme: LyTheme2
+  ) { }
+}

src/app/docs/components/list-demo/folder-list/folder-list.module.spec.ts

@@ -0,0 +1,13 @@
+import { FolderListModule } from './folder-list.module';
+
+describe('FolderListModule', () => {
+  let folderListModule: FolderListModule;
+
+  beforeEach(() => {
+    folderListModule = new FolderListModule();
+  });
+
+  it('should create an instance', () => {
+    expect(folderListModule).toBeTruthy();
+  });
+});

src/app/docs/components/list-demo/folder-list/folder-list.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { LyListModule } from '@alyle/ui/list';
+import { LyAvatarModule } from '@alyle/ui/avatar';
+import { LyIconModule } from '@alyle/ui/icon';
+
+import { FolderListComponent } from './folder-list.component';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    LyListModule,
+    LyAvatarModule,
+    LyIconModule
+  ],
+  exports: [FolderListComponent],
+  declarations: [FolderListComponent]
+})
+export class FolderListModule { }

src/app/docs/components/list-demo/list-demo.component.html

@@ -0,0 +1,12 @@
+<p>
+  Lists are a continuous group of text or images.
+</p>
+<h2 [lyTyp]="'display1'" gutter>Simple List</h2>
+<demo-view path="docs/components/list-demo/simple-list">
+  <aui-simple-list></aui-simple-list>
+</demo-view>
+
+<h2 [lyTyp]="'display1'" gutter>Folder List</h2>
+<demo-view path="docs/components/list-demo/folder-list">
+  <aui-folder-list></aui-folder-list>
+</demo-view>

src/app/docs/components/list-demo/list-demo.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ListDemoComponent } from './list-demo.component';
+
+describe('ListDemoComponent', () => {
+  let component: ListDemoComponent;
+  let fixture: ComponentFixture<ListDemoComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ListDemoComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ListDemoComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/docs/components/list-demo/list-demo.component.ts

@@ -0,0 +1,8 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+
+@Component({
+  selector: 'aui-list-demo',
+  templateUrl: './list-demo.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ListDemoComponent { }

src/app/docs/components/list-demo/simple-list/simple-list.component.html

@@ -0,0 +1,18 @@
+<div [className]="classes.root">
+  <ly-paper>
+    <ly-list>
+      <button ly-list-item>
+        <ly-icon ly-list-icon>mail</ly-icon>
+        <span ly-line>Inbox</span>
+      </button>
+      <button ly-list-item>
+        <ly-icon ly-list-icon>bookmark</ly-icon>
+        <span ly-line>Bookmark</span>
+      </button>
+      <button ly-list-item>
+        <ly-icon ly-list-icon>message</ly-icon>
+        <span ly-line>Chat</span>
+      </button>
+    </ly-list>
+  </ly-paper>
+</div>

src/app/docs/components/list-demo/simple-list/simple-list.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SimpleListComponent } from './simple-list.component';
+
+describe('SimpleListComponent', () => {
+  let component: SimpleListComponent;
+  let fixture: ComponentFixture<SimpleListComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SimpleListComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SimpleListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/docs/components/list-demo/simple-list/simple-list.component.ts

@@ -0,0 +1,21 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { LyTheme2, ThemeVariables } from '@alyle/ui';
+
+const styles = (theme: ThemeVariables) => ({
+  root: {
+    width: '100%',
+    maxWidth: '360px'
+  }
+});
+
+@Component({
+  selector: 'aui-simple-list',
+  templateUrl: './simple-list.component.html',
+  // changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class SimpleListComponent {
+  readonly classes = this.theme.addStyleSheet(styles);
+  constructor(
+    private theme: LyTheme2
+  ) { }
+}

src/app/docs/components/list-demo/simple-list/simple-list.module.spec.ts

@@ -0,0 +1,13 @@
+import { SimpleListModule } from './simple-list.module';
+
+describe('SimpleListModule', () => {
+  let simpleListModule: SimpleListModule;
+
+  beforeEach(() => {
+    simpleListModule = new SimpleListModule();
+  });
+
+  it('should create an instance', () => {
+    expect(simpleListModule).toBeTruthy();
+  });
+});

src/app/docs/components/list-demo/simple-list/simple-list.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SimpleListComponent } from './simple-list.component';
+import { LyListModule } from '@alyle/ui/list';
+import { LyAvatarModule } from '@alyle/ui/avatar';
+import { LyIconModule } from '@alyle/ui/icon';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    LyListModule,
+    LyAvatarModule,
+    LyIconModule
+  ],
+  exports: [SimpleListComponent],
+  declarations: [SimpleListComponent]
+})
+export class SimpleListModule { }

src/app/docs/docs.module.ts

@@ -89,6 +89,11 @@ import { MenuDemo01Module } from './components/menu-demo/menu-demo-01/menu-demo-
 /** Avatar */
 import { AvatarDemoComponent } from './components/avatar-demo/avatar-demo.component';
 import { BasicUsesAvatarModule } from './components/avatar-demo/basic-uses-avatar/basic-uses-avatar.module';
+import { ListDemoComponent } from './components/list-demo/list-demo.component';
+
+/** List */
+import { SimpleListModule } from './components/list-demo/simple-list/simple-list.module';
+import { FolderListModule } from './components/list-demo/folder-list/folder-list.module';
 
 
 @NgModule({
@@ -146,7 +151,10 @@ import { BasicUsesAvatarModule } from './components/avatar-demo/basic-uses-avata
     /** Menu */
     MenuDemo01Module,
     /** Avatar */
-    BasicUsesAvatarModule
+    BasicUsesAvatarModule,
+    /** List */
+    SimpleListModule,
+    FolderListModule
   ],
   declarations: [
     ThemingComponent,
@@ -182,6 +190,8 @@ import { BasicUsesAvatarModule } from './components/avatar-demo/basic-uses-avata
     MenuDemoComponent,
     /** Avatar */
     AvatarDemoComponent,
+    /** List */
+    ListDemoComponent,
   ]
 })
 export class DocsModule { }

src/app/docs/docs.routing.ts

@@ -17,6 +17,7 @@ import { IconDemoComponent } from './components/icon-demo/icon-demo.component';
 import { TooltipDemoComponent } from './components/tooltip-demo/tooltip-demo.component';
 import { MenuDemoComponent } from './components/menu-demo/menu-demo.component';
 import { AvatarDemoComponent } from './components/avatar-demo/avatar-demo.component';
+import { ListDemoComponent } from './components/list-demo/list-demo.component';
 
 const routes: Routes = [
   /** layout */
@@ -55,6 +56,7 @@ const routes: Routes = [
       { path: 'tooltip', component: TooltipDemoComponent },
       { path: 'menu', component: MenuDemoComponent },
       { path: 'avatar', component: AvatarDemoComponent },
+      { path: 'list', component: ListDemoComponent }
     ]
   }
 ];

src/lib/avatar/avatar.ts

@@ -7,13 +7,14 @@ import {
   mixinOutlined,
   mixinRaised,
   mixinShadowColor,
-  mixinStyleUpdater
+  mixinStyleUpdater,
+  ThemeVariables
   } from '@alyle/ui';
 
 const STYLE_PRIORITY = -2;
 const DEFAULT_SIZE = 40;
-const DEFAULT_BG = 'background:base';
-const STYLES = ({
+const DEFAULT_BG = 'action';
+const STYLES = (theme: ThemeVariables) => ({
   root: {
     display: 'inline-flex',
     position: 'relative',
@@ -24,6 +25,7 @@ const STYLES = ({
     borderRadius: '50%',
     textAlign: 'center',
     justifyContent: 'center',
+    ...theme.avatar.root,
     '&>img': {
       width: '100%',
       height: '100%',

src/lib/button/button.ts

@@ -161,14 +161,14 @@ export class LyButton extends LyButtonMixinBase implements OnChanges, OnInit, Af
     if (!this.size && !this.appearance) {
       this.size = DEFAULT_SIZE;
     }
+    // set default disable ripple
+    if (this.disableRipple == null) {
+      this.disableRipple = DEFAULT_DISABLE_RIPPLE;
+    }
   }
 
   ngAfterViewInit() {
     this._renderer.addClass(this._el.nativeElement, this.classes.animations);
-    // set default disable ripple
-    if (this.disableRipple === null) {
-      this.disableRipple = DEFAULT_DISABLE_RIPPLE;
-    }
 
     const focusState = this._focusState.listen(this._el);
     if (focusState) {

src/lib/checkbox/checkbox.ts

@@ -295,7 +295,7 @@ export class LyCheckbox extends LyCheckboxMixinBase implements ControlValueAcces
     this._rippleContainer = this._innerContainer;
 
     // set default disable ripple
-    if (this.disableRipple === null) {
+    if (this.disableRipple == null) {
       this.disableRipple = DEFAULT_DISABLE_RIPPLE;
     }
     this._renderer.addClass(this._el.nativeElement, this.classes.animations);

src/lib/list/index.ts

@@ -0,0 +1 @@
+export * from './public_api';

src/lib/list/list-item.html

@@ -0,0 +1,7 @@
+<span [ngClass]="listItemClasses">
+  <ng-content></ng-content>
+  <div *ngIf="_lines?.length" [className]="classes.lines">
+    <ng-content select="[ly-line]"></ng-content>
+  </div>
+</span>
+<div *ngIf="_isBrowser" #rippleContainer [className]="_rippleService.classes.container"></div>