fix: change list component to directive

docs/app/documentation/component-docs/file-input/examples/file-input-custom-example/file-input-custom-example.component.html

@@ -61,15 +61,15 @@
                 </span>
             </div>
             <div class="content-div" *ngIf="files && files.length > 0">
-                <fd-list style="display: block; width: 100%; height: 100%; max-height: 100%; overflow: auto;">
+                <ul fd-list style="display: block; width: 100%; height: 100%; max-height: 100%; overflow: auto;">
                     <li fd-list-item *ngFor="let file of files; let i = index;">
                         {{file.name}}
                         <span style="flex-grow: 1;"></span>
                         <span class="delete-icon">
                             <fd-icon [glyph]="'sys-cancel'" [size]="'l'" (click)="removeFile(i)"></fd-icon>
                         </span>
                     </li>
-                </fd-list>
+                </ul>
             </div>
         </div>
     </div>

docs/app/documentation/component-docs/list/examples/list-actions-example.component.html

@@ -1,4 +1,4 @@
-<fd-list>
+<ul fd-list>
     <li fd-list-item>List item 1
         <fd-list-action>
             <button fd-button [options]="'light'" [glyph]="'edit'"></button>
@@ -19,4 +19,4 @@
             <button fd-button [options]="'light'" [glyph]="'edit'"></button>
         </fd-list-action>
     </li>
-</fd-list>
+</ul>

docs/app/documentation/component-docs/list/examples/list-checkbox-example.component.html

@@ -1,4 +1,4 @@
-<fd-list>
+<ul fd-list>
     <li fd-list-item>
         <fd-list-checkbox>List item 1</fd-list-checkbox>
     </li>
@@ -11,4 +11,4 @@
     <li fd-list-item>
         <fd-list-checkbox>List item 4</fd-list-checkbox>
     </li>
-</fd-list>
+</ul>

docs/app/documentation/component-docs/list/examples/list-example.component.html

@@ -1,4 +1,4 @@
-<fd-list>
+<ul fd-list>
     <li fd-list-item>
         <a href="#">List item 1</a>
     </li>
@@ -7,4 +7,4 @@
         <a href="#">List item 3</a>
     </li>
     <li fd-list-item>List item 4</li>
-</fd-list>
+</ul>

docs/app/documentation/component-docs/list/examples/list-infinite-scroll-example.component.html

@@ -1,9 +1,9 @@
-<fd-list fdInfiniteScroll (onScrollAction)="loadMoreElements()" [scrollPercent]="scrollPercent"
+<ul fd-list fdInfiniteScroll (onScrollAction)="loadMoreElements()" [scrollPercent]="scrollPercent"
          style="display: block;
          overflow-y: scroll;
          max-height: 120px;
          border: 1px solid black;">
     <li fd-list-item *ngFor="let object of displayedList">
         {{object.label}}
     </li>
-</fd-list>
+</ul>

docs/app/documentation/component-docs/list/examples/list-single-select-example.component.html

@@ -1,8 +1,8 @@
-<fd-list>
+<ul fd-list>
     <li fd-list-item *ngFor="let number of [0, 1, 2, 3, 4]">
         <input type="radio" [id]="number" [value]="number" [(ngModel)]="this.selectedItem"/>
         <label [for]="number" style="padding-left: 10px;">List item {{number}}</label>
     </li>
-</fd-list>
+</ul>
 
 Selected Item: {{selectedItem}}

docs/app/documentation/utilities/api-files.ts

@@ -92,10 +92,10 @@ export const API_FILES = {
         'InputGroupSearchComponent'
     ],
     list: [
-        'ListComponent',
+        'ListDirective',
         'ListActionDirective',
         'ListCheckboxComponent',
-        'ListItemComponent'
+        'ListItemDirective'
     ],
     loadingSpinner: [
         'LoadingSpinnerComponent'

library/src/lib/list/list-item.directive.spec.ts

@@ -0,0 +1,39 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { Component, ElementRef, ViewChild } from '@angular/core';
+import { ListModule } from './list.module';
+
+@Component({
+    template: `
+        <li #directiveElement fd-list-item>List Item Test Text</li>
+    `
+})
+class TestComponent {
+    @ViewChild('directiveElement')
+    ref: ElementRef;
+}
+
+describe('ListItemDirective', () => {
+    let component: TestComponent;
+    let fixture: ComponentFixture<TestComponent>;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [TestComponent],
+            imports: [ListModule]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(TestComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+
+    it('should assign class', () => {
+        expect(component.ref.nativeElement.className).toBe('fd-list-group__item');
+    });
+});

library/src/lib/list/list-item.directive.ts

@@ -0,0 +1,23 @@
+import { Component, Directive, HostBinding, ViewEncapsulation } from '@angular/core';
+
+/**
+ * The component that represents a list item.
+ * The list item can contain plain text, links or actions.
+ * 
+ * ```html
+ * <ul fd-list>
+ *    <li fd-list-item>
+ *        List item 1
+ *    </li>
+ * </ul>
+ * ```
+ */
+@Directive({
+    // TODO to be discussed
+    // tslint:disable-next-line:directive-selector
+    selector: '[fd-list-item]',
+    host: {
+        'class': 'fd-list-group__item'
+    }
+})
+export class ListItemDirective {}

library/src/lib/list/list.directive.spec.ts

@@ -0,0 +1,39 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { Component, ElementRef, ViewChild } from '@angular/core';
+import { ListModule } from './list.module';
+
+@Component({
+    template: `
+        <ul #directiveElement fd-list>Action Bar Title Test Text</ul>
+    `
+})
+class TestComponent {
+    @ViewChild('directiveElement')
+    ref: ElementRef;
+}
+
+describe('ListDirective', () => {
+    let component: TestComponent;
+    let fixture: ComponentFixture<TestComponent>;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [TestComponent],
+            imports: [ListModule]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(TestComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+
+    it('should assign class', () => {
+        expect(component.ref.nativeElement.className).toBe('fd-list-group');
+    });
+});

library/src/lib/list/list.directive.ts

@@ -0,0 +1,14 @@
+import { Component, Directive, ViewEncapsulation } from '@angular/core';
+
+/**
+ * The directive that represents a list.
+ * It is used to display a list of items with simple information such as scopes, names, etc. 
+ */
+@Directive({
+    // tslint:disable-next-line:directive-selector
+    selector: '[fd-list]',
+    host: {
+        class: 'fd-list-group'
+    }
+})
+export class ListDirective {}

library/src/lib/list/list.module.ts

@@ -1,15 +1,15 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { ListComponent } from './list.component';
-import { ListItemComponent } from './list-item.component';
+import { ListDirective } from './list.directive';
+import { ListItemDirective } from './list-item.directive';
 import { ListCheckboxComponent } from './list-checkbox.component';
 import { ListActionDirective } from './list-action.directive';
 import { ButtonModule } from '../button/button.module';
 import { IconModule } from '../icon/icon.module';
 import { FormsModule } from '@angular/forms';
 @NgModule({
-    declarations: [ListComponent, ListItemComponent, ListActionDirective, ListCheckboxComponent],
+    declarations: [ListDirective, ListItemDirective, ListActionDirective, ListCheckboxComponent],
     imports: [CommonModule, ButtonModule, IconModule, FormsModule],
-    exports: [ListComponent, ListItemComponent, ListActionDirective, ListCheckboxComponent]
+    exports: [ListDirective, ListItemDirective, ListActionDirective, ListCheckboxComponent]
 })
 export class ListModule {}