Merge pull request #325 from cal-smith/list

Add list components

Author: zvonimirfras

package-lock.json

@@ -14,7 +14,7 @@ export * from "./icon/icon.module";
 export * from "./inline-loading/inline-loading.module";
 export * from "./input/input.module";
 export * from "./link/link.module";
-export * from "./list-group/list-group.module";
+export * from "./list/list.module";
 export * from "./loading/loading.module";
 export * from "./modal/modal.module";
 export * from "./notification/notification.module";
@@ -26,6 +26,7 @@ export * from "./progress-indicator/progress-indicator.module";
 export * from "./radio/radio.module";
 export * from "./search/search.module";
 export * from "./select/select.module";
+export * from "./structured-list/structured-list.module";
 export * from "./switch/switch.module";
 export * from "./table/table.module";
 export * from "./tabs/tabs.module";

src/index.ts

@@ -0,0 +1,11 @@
+import { Directive, HostBinding } from "@angular/core";
+
+/**
+ * Applies list styling to the item it is used on. Best used with `li`s.
+ */
+@Directive({
+	selector: "[ibmListItem]"
+})
+export class ListItemDirective {
+	@HostBinding("class.bx--list__item") wrapper = true;
+}

src/list-group/list-group.component.spec.ts

@@ -0,0 +1,29 @@
+import { Directive, ElementRef, HostBinding } from "@angular/core";
+
+/**
+ * Applies either ordered or unordered styling to the list container it is applied to.
+ *
+ * For `ul`s it will apply unordered list styles, and for `ol`s it will apply ordered list styles.
+ *
+ * If a `ul` or `ol` is nested within a `li` the directive will apply nested list styling.
+ */
+@Directive({
+	selector: "[ibmList]"
+})
+export class List {
+	@HostBinding("class.bx--list--ordered") get ordered() {
+		if (this.nested) { return false; }
+		return this.elementRef.nativeElement.tagName === "OL";
+	}
+
+	@HostBinding("class.bx--list--unordered") get unordered() {
+		if (this.nested) { return false; }
+		return this.elementRef.nativeElement.tagName === "UL";
+	}
+
+	@HostBinding("class.bx--list--nested") get nested() {
+		return this.elementRef.nativeElement.parentElement.tagName === "LI";
+	}
+
+	constructor(protected elementRef: ElementRef) {}
+}

src/list-group/list-group.component.ts

@@ -0,0 +1,24 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+
+import { ListItemDirective } from "./list-item.directive";
+import { List } from "./list.directive";
+
+@NgModule({
+	declarations: [
+		ListItemDirective,
+		List
+	],
+	exports: [
+		ListItemDirective,
+		List
+	],
+	imports: [CommonModule]
+})
+class ListModule {}
+
+export {
+	ListModule,
+	ListItemDirective,
+	List
+};