+
-
`
})
class ListTestComponent {
- @ViewChild(IgxList) public list: IgxList;
+ @ViewChild(IgxListComponent) public list: IgxListComponent;
@ViewChild("wrapper") public wrapper;
}
@@ -300,8 +300,8 @@ class ListTestComponent {
`
})
-class ListWithPanningAllowed {
- @ViewChild(IgxList) public list: IgxList;
+class ListWithPanningAllowedComponent {
+ @ViewChild(IgxListComponent) public list: IgxListComponent;
}
@Component({
@@ -313,8 +313,8 @@ class ListWithPanningAllowed {
`
})
-class ListWithRightPanningAllowed {
- @ViewChild(IgxList) public list: IgxList;
+class ListWithRightPanningAllowedComponent {
+ @ViewChild(IgxListComponent) public list: IgxListComponent;
}
@Component({
@@ -326,8 +326,8 @@ class ListWithRightPanningAllowed {
`
})
-class ListWithLeftPanningAllowed {
- @ViewChild(IgxList) public list: IgxList;
+class ListWithLeftPanningAllowedComponent {
+ @ViewChild(IgxListComponent) public list: IgxListComponent;
}
@Component({
@@ -339,8 +339,8 @@ class ListWithLeftPanningAllowed {
`
})
-class ListWithNoItems {
- @ViewChild(IgxList) public list: IgxList;
+class ListWithNoItemsComponent {
+ @ViewChild(IgxListComponent) public list: IgxListComponent;
}
@Component({
@@ -352,6 +352,6 @@ class ListWithNoItems {
`
})
-class ListWithCustomNoItemsTemplate {
- @ViewChild(IgxList) public list: IgxList;
+class ListWithCustomNoItemsTemplateComponent {
+ @ViewChild(IgxListComponent) public list: IgxListComponent;
}
diff --git a/src/list/list.component.ts b/src/list/list.component.ts
index 3479604eb9c..2b9177a507a 100644
--- a/src/list/list.component.ts
+++ b/src/list/list.component.ts
@@ -3,9 +3,9 @@ import {
AfterContentInit, Component, ContentChildren, ElementRef, EventEmitter, forwardRef, HostBinding,
Inject, Input, NgModule, OnDestroy, OnInit, Output, QueryList, Renderer2, ViewChild
} from "@angular/core";
-import { IgxButtonModule } from "../button/button.directive";
import { HammerGesturesManager } from "../core/touch";
-import { IgxRippleModule } from "../directives/ripple.directive";
+import { IgxButtonModule } from "../directives/button/button.directive";
+import { IgxRippleModule } from "../directives/ripple/ripple.directive";
export interface IListChild {
index: number;
@@ -16,23 +16,21 @@ export enum IgxListPanState { NONE, LEFT, RIGHT }
// ====================== LIST ================================
// The `
+
diff --git a/src/dialog/dialog.component.spec.ts b/src/dialog/dialog.component.spec.ts
index c6de42c66ba..52d774c552b 100644
--- a/src/dialog/dialog.component.spec.ts
+++ b/src/dialog/dialog.component.spec.ts
@@ -3,17 +3,17 @@ import { async, ComponentFixture, TestBed } from "@angular/core/testing";
import { By } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
-import { IgxDialog, IgxDialogModule } from "./dialog.component";
+import { IgxDialogComponent, IgxDialogModule } from "./dialog.component";
describe("Dialog", () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
- declarations: [Alert, Dialog, CustomDialog],
+ declarations: [AlertComponent, DialogComponent, CustomDialogComponent],
imports: [BrowserAnimationsModule, IgxDialogModule]
}).compileComponents();
}));
it("Should set dialog title.", () => {
- const fixture = TestBed.createComponent(Alert);
+ const fixture = TestBed.createComponent(AlertComponent);
const dialog = fixture.componentInstance.dialog;
const expectedTitle = "alert";
@@ -27,7 +27,7 @@ describe("Dialog", () => {
});
it("Should set dialog message.", () => {
- const fixture = TestBed.createComponent(Alert);
+ const fixture = TestBed.createComponent(AlertComponent);
const dialog = fixture.componentInstance.dialog;
const expectedMessage = "message";
@@ -40,7 +40,7 @@ describe("Dialog", () => {
});
it("Should set custom modal message.", () => {
- const fixture = TestBed.createComponent(CustomDialog);
+ const fixture = TestBed.createComponent(CustomDialogComponent);
const dialog = fixture.componentInstance.dialog;
dialog.open();
@@ -53,7 +53,7 @@ describe("Dialog", () => {
});
it("Should set left and right button properties.", () => {
- const fixture = TestBed.createComponent(Dialog);
+ const fixture = TestBed.createComponent(DialogComponent);
const dialog = fixture.componentInstance.dialog;
fixture.detectChanges();
@@ -73,7 +73,7 @@ describe("Dialog", () => {
});
it("Should execute open/close methods.", () => {
- const fixture = TestBed.createComponent(Alert);
+ const fixture = TestBed.createComponent(AlertComponent);
const dialog = fixture.componentInstance.dialog;
fixture.detectChanges();
@@ -89,7 +89,7 @@ describe("Dialog", () => {
});
it("Should set closeOnOutsideSelect.", () => {
- const fixture = TestBed.createComponent(Alert);
+ const fixture = TestBed.createComponent(AlertComponent);
const dialog = fixture.componentInstance.dialog;
dialog.open();
@@ -108,7 +108,7 @@ describe("Dialog", () => {
});
it("Should test events.", () => {
- const fixture = TestBed.createComponent(Dialog);
+ const fixture = TestBed.createComponent(DialogComponent);
const dialog = fixture.componentInstance.dialog;
spyOn(dialog.onOpen, "emit");
@@ -139,14 +139,14 @@ describe("Dialog", () => {
});
it("Should set ARIA attributes.", () => {
- const alertFixture = TestBed.createComponent(Alert);
+ const alertFixture = TestBed.createComponent(AlertComponent);
const alert = alertFixture.componentInstance.dialog;
alert.open();
alertFixture.detectChanges();
expect(alert.role).toEqual("alertdialog");
- const dialogFixture = TestBed.createComponent(Dialog);
+ const dialogFixture = TestBed.createComponent(DialogComponent);
const dialog = dialogFixture.componentInstance.dialog;
dialog.open();
@@ -157,7 +157,7 @@ describe("Dialog", () => {
expect(titleWrapper.attributes.id).toEqual(dialogWindow.attributes["aria-labelledby"]);
});
- function testDialogIsOpen(debugElement: DebugElement, dialog: IgxDialog, isOpen: boolean) {
+ function testDialogIsOpen(debugElement: DebugElement, dialog: IgxDialogComponent, isOpen: boolean) {
const dialogDebugElement = debugElement.query(By.css(".igx-dialog"));
expect(dialog.isOpen).toEqual(isOpen);
@@ -177,8 +177,8 @@ describe("Dialog", () => {
leftButtonLabel="OK">
` })
-class Alert {
- @ViewChild("dialog") public dialog: IgxDialog;
+class AlertComponent {
+ @ViewChild("dialog") public dialog: IgxDialogComponent;
}
@Component({ template: `
@@ -196,8 +196,8 @@ class Alert {
rightButtonRipple="white">
` })
-class Dialog {
- @ViewChild("dialog") public dialog: IgxDialog;
+class DialogComponent {
+ @ViewChild("dialog") public dialog: IgxDialogComponent;
}
@Component({ template: `
@@ -207,6 +207,6 @@ class Dialog {
` })
-class CustomDialog {
- @ViewChild("dialog") public dialog: IgxDialog;
+class CustomDialogComponent {
+ @ViewChild("dialog") public dialog: IgxDialogComponent;
}
diff --git a/src/dialog/dialog.component.ts b/src/dialog/dialog.component.ts
index 36593906fcb..0ec693b2146 100644
--- a/src/dialog/dialog.component.ts
+++ b/src/dialog/dialog.component.ts
@@ -14,8 +14,8 @@ import {
import { EaseOut } from "../animations/easings";
import { fadeIn, fadeOut, slideInBottom } from "../animations/main";
-import { IgxButtonModule } from "../button/button.directive";
-import { IgxRippleModule } from "../directives/ripple.directive";
+import { IgxButtonModule } from "../directives/button/button.directive";
+import { IgxRippleModule } from "../directives/ripple/ripple.directive";
@Component({
animations: [
@@ -32,26 +32,26 @@ import { IgxRippleModule } from "../directives/ripple.directive";
styleUrls: ["./dialog.component.scss"],
templateUrl: "dialog-content.component.html"
})
-export class IgxDialog {
- private static NEXT_ID: number = 1;
+export class IgxDialogComponent {
+ private static NEXT_ID = 1;
private static readonly DIALOG_CLASS = "igx-dialog";
- @Input() public title: string = "";
- @Input() public message: string = "";
+ @Input() public title = "";
+ @Input() public message = "";
- @Input() public leftButtonLabel: string = "";
- @Input() public leftButtonType: string = "flat";
- @Input() public leftButtonColor: string = "";
- @Input() public leftButtonBackgroundColor: string = "";
- @Input() public leftButtonRipple: string = "";
+ @Input() public leftButtonLabel = "";
+ @Input() public leftButtonType = "flat";
+ @Input() public leftButtonColor = "";
+ @Input() public leftButtonBackgroundColor = "";
+ @Input() public leftButtonRipple = "";
- @Input() public rightButtonLabel: string = "";
- @Input() public rightButtonType: string = "flat";
- @Input() public rightButtonColor: string = "";
- @Input() public rightButtonBackgroundColor: string = "";
- @Input() public rightButtonRipple: string = "";
+ @Input() public rightButtonLabel = "";
+ @Input() public rightButtonType = "flat";
+ @Input() public rightButtonColor = "";
+ @Input() public rightButtonBackgroundColor = "";
+ @Input() public rightButtonRipple = "";
- @Input() public closeOnOutsideSelect: boolean = false;
+ @Input() public closeOnOutsideSelect = false;
@Output() public onOpen = new EventEmitter();
@Output() public onClose = new EventEmitter();
@@ -94,7 +94,7 @@ export class IgxDialog {
}
constructor() {
- this._titleId = IgxDialog.NEXT_ID++ + "_title";
+ this._titleId = IgxDialogComponent.NEXT_ID++ + "_title";
}
public open() {
@@ -119,7 +119,7 @@ export class IgxDialog {
if (
this.isOpen &&
this.closeOnOutsideSelect &&
- event.target.classList.contains(IgxDialog.DIALOG_CLASS)
+ event.target.classList.contains(IgxDialogComponent.DIALOG_CLASS)
) {
this.close();
}
@@ -140,8 +140,8 @@ export class IgxDialog {
}
@NgModule({
- declarations: [IgxDialog],
- exports: [IgxDialog],
+ declarations: [IgxDialogComponent],
+ exports: [IgxDialogComponent],
imports: [CommonModule, IgxButtonModule, IgxRippleModule]
})
export class IgxDialogModule { }
diff --git a/src/button/README.md b/src/directives/button/README.md
similarity index 100%
rename from src/button/README.md
rename to src/directives/button/README.md
diff --git a/src/button/button.directive.spec.ts b/src/directives/button/button.directive.spec.ts
similarity index 86%
rename from src/button/button.directive.spec.ts
rename to src/directives/button/button.directive.spec.ts
index 18d97e762db..f34bb5ca3ac 100644
--- a/src/button/button.directive.spec.ts
+++ b/src/directives/button/button.directive.spec.ts
@@ -4,22 +4,22 @@ import {
TestBed
} from "@angular/core/testing";
import { By } from "@angular/platform-browser";
-import { IgxButton } from "./button.directive";
+import { IgxButtonDirective } from "./button.directive";
describe("IgxButton", () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
- InitButton,
- ButtonWithAttribs,
- IgxButton
+ InitButtonComponent,
+ ButtonWithAttribsComponent,
+ IgxButtonDirective
]
})
.compileComponents();
}));
it("Initializes a button", () => {
- const fixture = TestBed.createComponent(InitButton);
+ const fixture = TestBed.createComponent(InitButtonComponent);
fixture.detectChanges();
expect(fixture.debugElement.query(By.css("span.igx-button--flat"))).toBeTruthy();
@@ -27,7 +27,7 @@ describe("IgxButton", () => {
});
it("Button with properties", () => {
- const fixture = TestBed.createComponent(ButtonWithAttribs);
+ const fixture = TestBed.createComponent(ButtonWithAttribsComponent);
fixture.detectChanges();
const button = fixture.debugElement.query(By.css("span")).nativeElement;
@@ -58,7 +58,7 @@ describe("IgxButton", () => {
add
`
})
-class InitButton {
+class InitButtonComponent {
}
@Component({
@@ -68,7 +68,7 @@ class InitButton {
[igxButtonBackground]="background"
[disabled]="isDisabled">Test`
})
-class ButtonWithAttribs {
+class ButtonWithAttribsComponent {
public isDisabled = true;
public foreground = "white";
public background = "black";
diff --git a/src/button/button.directive.ts b/src/directives/button/button.directive.ts
similarity index 80%
rename from src/button/button.directive.ts
rename to src/directives/button/button.directive.ts
index 519a9142b48..796b6891d81 100644
--- a/src/button/button.directive.ts
+++ b/src/directives/button/button.directive.ts
@@ -1,20 +1,19 @@
-import { Directive, ElementRef, Input, NgModule, OnInit, Renderer2 } from "@angular/core";
+import { Directive, ElementRef, HostBinding, Input, NgModule, OnInit, Renderer2 } from "@angular/core";
@Directive({
- host: {
- role: "button"
- },
selector: "[igxButton]"
})
-export class IgxButton {
- private _type: string = "flat";
- private _cssClass: string = "igx-button";
+export class IgxButtonDirective {
+ private _type = "flat";
+ private _cssClass = "igx-button";
private _color: string;
private _label: string;
private _backgroundColor: string;
constructor(private _el: ElementRef, private _renderer: Renderer2) {}
+ @HostBinding("attr.role") public role = "button";
+
@Input("igxButton") set type(value: string) {
this._type = value || this._type;
this._renderer.addClass(this._el.nativeElement, `${this._cssClass}--${this._type}`);
@@ -46,7 +45,7 @@ export class IgxButton {
}
@NgModule({
- declarations: [IgxButton],
- exports: [IgxButton]
+ declarations: [IgxButtonDirective],
+ exports: [IgxButtonDirective]
})
export class IgxButtonModule {}
diff --git a/src/directives/dragdrop.directive.ts b/src/directives/dragdrop/dragdrop.directive.ts
similarity index 96%
rename from src/directives/dragdrop.directive.ts
rename to src/directives/dragdrop/dragdrop.directive.ts
index 9ca53a8c98c..266f6b94582 100644
--- a/src/directives/dragdrop.directive.ts
+++ b/src/directives/dragdrop/dragdrop.directive.ts
@@ -25,7 +25,7 @@ export class IgxDraggableDirective implements OnInit, OnDestroy {
@Input("igxDraggable") public data: any;
@Input() public dragClass: string;
- @Input() public effectAllowed: string = "move";
+ @Input() public effectAllowed = "move";
@HostBinding("draggable") public draggable: boolean;
@@ -64,7 +64,7 @@ export class IgxDroppableDirective {
@Input("igxDroppable") public data: any;
@Input() public dropClass: string;
- @Input() public dropEffect: string = "move";
+ @Input() public dropEffect = "move";
@Output() public onDrop = new EventEmitter();
diff --git a/src/directives/README-FILTER.md b/src/directives/filter/README-FILTER.md
similarity index 100%
rename from src/directives/README-FILTER.md
rename to src/directives/filter/README-FILTER.md
diff --git a/src/directives/filter.directive.spec.ts b/src/directives/filter/filter.directive.spec.ts
similarity index 90%
rename from src/directives/filter.directive.spec.ts
rename to src/directives/filter/filter.directive.spec.ts
index c1b00ee2cae..aa598867601 100644
--- a/src/directives/filter.directive.spec.ts
+++ b/src/directives/filter/filter.directive.spec.ts
@@ -1,7 +1,7 @@
import { Component, ContentChildren, ViewChild } from "@angular/core";
import { async, ComponentFixtureAutoDetect, TestBed } from "@angular/core/testing";
import { By } from "@angular/platform-browser";
-import { IgxList, IgxListItem, IgxListModule } from "../list/list.component";
+import { IgxListComponent, IgxListItemComponent, IgxListModule } from "../../list/list.component";
import { IgxFilterDirective, IgxFilterModule, IgxFilterOptions, IgxFilterPipe } from "./filter.directive";
describe("Filter", () => {
@@ -27,7 +27,7 @@ describe("Filter", () => {
items = list.items;
for (const item of items) {
- expect(item instanceof IgxListItem).toBeTruthy();
+ expect(item instanceof IgxListItemComponent).toBeTruthy();
}
visibleItems = items.filter((listItem) => !listItem.hidden);
@@ -38,7 +38,7 @@ describe("Filter", () => {
visibleItems = items.filter((listItem) => !listItem.hidden);
expect(visibleItems.length).toBe(1);
- expect(visibleItems[0] instanceof IgxListItem).toBeTruthy();
+ expect(visibleItems[0] instanceof IgxListItemComponent).toBeTruthy();
fixture.componentInstance.filterValue = "";
fixture.detectChanges();
@@ -55,7 +55,7 @@ describe("Filter", () => {
expect(list.items.length).toBe(4);
for (const item of list.items) {
- expect(item instanceof IgxListItem).toBeTruthy();
+ expect(item instanceof IgxListItemComponent).toBeTruthy();
}
expect(list.items.length).toBe(4);
@@ -64,7 +64,7 @@ describe("Filter", () => {
fixture.detectChanges();
expect(list.items.length).toBe(1);
- expect(list.items[0] instanceof IgxListItem).toBeTruthy();
+ expect(list.items[0] instanceof IgxListItemComponent).toBeTruthy();
fixture.componentInstance.filterValue = "";
fixture.detectChanges();
@@ -79,7 +79,7 @@ describe("Filter", () => {
const logInput = fixture.componentInstance.logInput;
fixture.detectChanges();
- visibleItems = list.items.filter((listItem) => !(listItem as IgxListItem).hidden);
+ visibleItems = list.items.filter((listItem) => !(listItem as IgxListItemComponent).hidden);
expect(list.items.length).toBe(3);
expect(visibleItems.length).toBe(3);
@@ -89,7 +89,7 @@ describe("Filter", () => {
fixture.componentInstance.filterValue = "2";
fixture.detectChanges();
- visibleItems = list.items.filter((listItem) => !(listItem as IgxListItem).hidden);
+ visibleItems = list.items.filter((listItem) => !(listItem as IgxListItemComponent).hidden);
expect(visibleItems.length).toBe(1);
expect(logInput.nativeElement.value).toBe("filtering;filtered;");
@@ -114,7 +114,7 @@ describe("Filter", () => {
const logInput = fixture.componentInstance.logInput;
fixture.detectChanges();
- visibleItems = list.items.filter((listItem) => !(listItem as IgxListItem).hidden);
+ visibleItems = list.items.filter((listItem) => !(listItem as IgxListItemComponent).hidden);
expect(list.items.length).toBe(3);
expect(visibleItems.length).toBe(3);
@@ -125,7 +125,7 @@ describe("Filter", () => {
fixture.componentInstance.filterValue = "2";
fixture.detectChanges();
- visibleItems = list.items.filter((listItem) => !(listItem as IgxListItem).hidden);
+ visibleItems = list.items.filter((listItem) => !(listItem as IgxListItemComponent).hidden);
expect(visibleItems.length).toBe(3);
expect(logInput.nativeElement.value).toBe("filtering;");
@@ -151,11 +151,11 @@ describe("Filter", () => {
})
class DeclarativeListTestComponent {
public filterValue: string;
- public isCanceled: boolean = false;
+ public isCanceled = false;
public filteringArgs: FilteringArgs;
public filteredArgs: FilteringArgs;
- @ViewChild(IgxList) public list: IgxList;
+ @ViewChild(IgxListComponent) public list: IgxListComponent;
@ViewChild("logInput") public logInput: any;
get fo() {
@@ -187,9 +187,9 @@ class DeclarativeListTestComponent {
})
class DynamicListTestComponent {
public filterValue: string;
- public isCanceled: boolean = false;
+ public isCanceled = false;
- @ViewChild(IgxList) public list: IgxList;
+ @ViewChild(IgxListComponent) public list: IgxListComponent;
protected dataSourceItems: object[] = [
{ key: "1", text: "Nav1" },
@@ -208,6 +208,6 @@ class DynamicListTestComponent {
class FilteringArgs {
public cancel: boolean;
- public items: IgxListItem[];
- public filteredItems: IgxListItem[];
+ public items: IgxListItemComponent[];
+ public filteredItems: IgxListItemComponent[];
}
diff --git a/src/directives/filter.directive.ts b/src/directives/filter/filter.directive.ts
similarity index 98%
rename from src/directives/filter.directive.ts
rename to src/directives/filter/filter.directive.ts
index 02fa3ca581e..01ae6c62689 100644
--- a/src/directives/filter.directive.ts
+++ b/src/directives/filter/filter.directive.ts
@@ -95,7 +95,7 @@ export class IgxFilterPipe implements PipeTransform {
export class IgxFilterOptions {
// Input text value that will be used as a filtering pattern (matching condition is based on it)
- public inputValue: string = "";
+ public inputValue = "";
// Item property, which value should be used for filtering
public key: string;
@@ -109,7 +109,7 @@ export class IgxFilterOptions {
// Default behavior - returns "key"- named property value of item if key si provided,
// otherwise textContent of the item's html element
public get_value(item: any, key: string): string {
- let result: string = "";
+ let result = "";
if (key) {
result = item[key].toString();
diff --git a/src/input/README.md b/src/directives/input/README.md
similarity index 100%
rename from src/input/README.md
rename to src/directives/input/README.md
diff --git a/src/input/input.directive.spec.ts b/src/directives/input/input.directive.spec.ts
similarity index 88%
rename from src/input/input.directive.spec.ts
rename to src/directives/input/input.directive.spec.ts
index 07d89dd039d..7e2049cf59d 100644
--- a/src/input/input.directive.spec.ts
+++ b/src/directives/input/input.directive.spec.ts
@@ -5,17 +5,17 @@ import {
} from "@angular/core/testing";
import { By } from "@angular/platform-browser";
import { IgxLabelModule } from "../label/label.directive";
-import { IgxInput } from "./input.directive";
+import { IgxInputModule } from "./input.directive";
describe("IgxInput", () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
- InitInput,
- InputWithAttribs
+ InitInputComponent,
+ InputWithAttribsComponent
],
imports: [
- IgxInput,
+ IgxInputModule,
IgxLabelModule
]
})
@@ -23,14 +23,14 @@ describe("IgxInput", () => {
}));
it("Initializes an empty input", () => {
- const fixture = TestBed.createComponent(InitInput);
+ const fixture = TestBed.createComponent(InitInputComponent);
fixture.detectChanges();
expect(fixture.debugElement.query(By.css("input"))).toBeTruthy();
});
it("Initializes an empty input with attributes", () => {
- const fixture = TestBed.createComponent(InputWithAttribs);
+ const fixture = TestBed.createComponent(InputWithAttribsComponent);
fixture.detectChanges();
const inputEl = fixture.debugElement.query(By.css("input")).nativeElement;
@@ -62,7 +62,7 @@ describe("IgxInput", () => {
});
@Component({ template: `` })
-class InitInput {
+class InitInputComponent {
}
@Component({
@@ -73,6 +73,6 @@ class InitInput {
`
})
-class InputWithAttribs {
+class InputWithAttribsComponent {
public placeholder = "Please enter a name";
}
diff --git a/src/input/input.directive.ts b/src/directives/input/input.directive.ts
similarity index 76%
rename from src/input/input.directive.ts
rename to src/directives/input/input.directive.ts
index d797345b27c..b275199716c 100644
--- a/src/input/input.directive.ts
+++ b/src/directives/input/input.directive.ts
@@ -11,18 +11,18 @@ import {
@Directive({
selector: "[igxInput]"
})
-export class IgxInputClass implements DoCheck {
+export class IgxInputDirective implements DoCheck {
@HostBinding("class.igx-form-group__input")
- public isInput: boolean = true;
+ public isInput = true;
@HostBinding("class.igx-form-group__input--focused")
- public focused: boolean = false;
+ public focused = false;
@HostBinding("class.igx-form-group__input--filled")
- public filled: boolean = false;
+ public filled = false;
@HostBinding("class.igx-form-group__input--placeholder")
- public placeholder: boolean = false;
+ public placeholder = false;
constructor(protected el: ElementRef) {}
@@ -45,8 +45,8 @@ export class IgxInputClass implements DoCheck {
}
@NgModule({
- declarations: [IgxInputClass],
- exports: [IgxInputClass],
+ declarations: [IgxInputDirective],
+ exports: [IgxInputDirective],
imports: [CommonModule]
})
-export class IgxInput {}
+export class IgxInputModule {}
diff --git a/src/label/README.md b/src/directives/label/README.md
similarity index 100%
rename from src/label/README.md
rename to src/directives/label/README.md
diff --git a/src/label/label.directive.ts b/src/directives/label/label.directive.ts
similarity index 75%
rename from src/label/label.directive.ts
rename to src/directives/label/label.directive.ts
index 66035ed49cb..979b1ae69b1 100644
--- a/src/label/label.directive.ts
+++ b/src/directives/label/label.directive.ts
@@ -9,14 +9,14 @@ import {
@Directive({
selector: "[igxLabel]"
})
-export class IgxLabel {
+export class IgxLabelDirective {
constructor(el: ElementRef, renderer: Renderer2) {
renderer.addClass(el.nativeElement, "igx-form-group__label");
}
}
@NgModule({
- declarations: [IgxLabel],
- exports: [IgxLabel]
+ declarations: [IgxLabelDirective],
+ exports: [IgxLabelDirective]
})
export class IgxLabelModule {}
diff --git a/src/layout/README.md b/src/directives/layout/README.md
similarity index 100%
rename from src/layout/README.md
rename to src/directives/layout/README.md
diff --git a/src/layout/layout.directive.ts b/src/directives/layout/layout.directive.ts
similarity index 64%
rename from src/layout/layout.directive.ts
rename to src/directives/layout/layout.directive.ts
index 8e06074107d..9923b3d75de 100644
--- a/src/layout/layout.directive.ts
+++ b/src/directives/layout/layout.directive.ts
@@ -4,11 +4,11 @@ import { Directive, HostBinding, Input, NgModule } from "@angular/core";
selector: "[igxLayout]"
})
export class IgxLayoutDirective {
- @Input("igxLayoutDir") public dir: string = "row";
- @Input("igxLayoutReverse") public reverse: boolean = false;
- @Input("igxLayoutWrap") public wrap: string = "nowrap";
- @Input("igxLayoutJustify") public justify: string = "flex-start";
- @Input("igxLayoutItemAlign") public itemAlign: string = "flex-start";
+ @Input("igxLayoutDir") public dir = "row";
+ @Input("igxLayoutReverse") public reverse = false;
+ @Input("igxLayoutWrap") public wrap = "nowrap";
+ @Input("igxLayoutJustify") public justify = "flex-start";
+ @Input("igxLayoutItemAlign") public itemAlign = "flex-start";
@HostBinding("style.display") public display = "flex";
@HostBinding("style.flex-wrap") get flexwrap() { return this.wrap; }
@@ -28,10 +28,10 @@ export class IgxLayoutDirective {
selector: "[igxFlex]"
})
export class IgxFlexDirective {
- @Input("igxFlexGrow") public grow: number = 1;
- @Input("igxFlexShrink") public shrink: number = 1;
- @Input("igxFlex") public flex: string = "";
- @Input("igxFlexOrder") public order: number = 0;
+ @Input("igxFlexGrow") public grow = 1;
+ @Input("igxFlexShrink") public shrink = 1;
+ @Input("igxFlex") public flex = "";
+ @Input("igxFlexOrder") public order = 0;
@HostBinding("style.flex")
get style() {
@@ -48,7 +48,7 @@ export class IgxFlexDirective {
}
@NgModule({
- declarations: [IgxLayoutDirective, IgxFlexDirective],
+ declarations: [IgxFlexDirective, IgxLayoutDirective],
exports: [IgxFlexDirective, IgxLayoutDirective]
})
-export class IgxLayout { }
+export class IgxLayoutModule { }
diff --git a/src/directives/README-RIPPLE.md b/src/directives/ripple/README-RIPPLE.md
similarity index 100%
rename from src/directives/README-RIPPLE.md
rename to src/directives/ripple/README-RIPPLE.md
diff --git a/src/directives/ripple.directive.ts b/src/directives/ripple/ripple.directive.ts
similarity index 94%
rename from src/directives/ripple.directive.ts
rename to src/directives/ripple/ripple.directive.ts
index 9f4f7da8eea..e3a3117ab87 100644
--- a/src/directives/ripple.directive.ts
+++ b/src/directives/ripple/ripple.directive.ts
@@ -4,13 +4,13 @@ import { Directive, ElementRef, HostListener, Input, NgModule, NgZone, Renderer2
selector: "[igxRipple]"
})
export class IgxRippleDirective {
- @Input("igxRippleTarget") public rippleTarget: string = "";
+ @Input("igxRippleTarget") public rippleTarget = "";
@Input("igxRipple") public rippleColor: string;
- @Input("igxRippleDuration") public rippleDuration: number = 600;
+ @Input("igxRippleDuration") public rippleDuration = 600;
protected container: HTMLElement;
- private _centered: boolean = false;
+ private _centered = false;
private animationQueue = [];
@Input("igxRippleCentered") set centered(value: boolean) {
diff --git a/src/grid/cell.spec.ts b/src/grid/cell.spec.ts
index b43aeafc59e..ed27e86fe69 100644
--- a/src/grid/cell.spec.ts
+++ b/src/grid/cell.spec.ts
@@ -14,15 +14,15 @@ describe("IgxGrid - Cell component", () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
- DefaultGrid,
- CtrlKeyKeyboardNagivation
+ DefaultGridComponent,
+ CtrlKeyKeyboardNagivationComponent
],
imports: [IgxGridModule.forRoot()]
}).compileComponents();
}));
it("@Input properties and getters", () => {
- const fix = TestBed.createComponent(DefaultGrid);
+ const fix = TestBed.createComponent(DefaultGridComponent);
fix.detectChanges();
const grid = fix.componentInstance.instance;
@@ -38,7 +38,7 @@ describe("IgxGrid - Cell component", () => {
});
it("selection and selection events", () => {
- const fix = TestBed.createComponent(DefaultGrid);
+ const fix = TestBed.createComponent(DefaultGridComponent);
fix.detectChanges();
const grid = fix.componentInstance.instance;
@@ -57,7 +57,7 @@ describe("IgxGrid - Cell component", () => {
});
it("edit mode", fakeAsync(() => {
- const fix = TestBed.createComponent(DefaultGrid);
+ const fix = TestBed.createComponent(DefaultGridComponent);
fix.detectChanges();
const grid = fix.componentInstance.instance;
@@ -99,7 +99,7 @@ describe("IgxGrid - Cell component", () => {
}));
it("edit mode - leaves edit mode on blur", fakeAsync(() => {
- const fix = TestBed.createComponent(DefaultGrid);
+ const fix = TestBed.createComponent(DefaultGridComponent);
fix.detectChanges();
const grid = fix.componentInstance.instance;
@@ -125,7 +125,7 @@ describe("IgxGrid - Cell component", () => {
}));
it("keyboard navigation", fakeAsync(() => {
- const fix = TestBed.createComponent(DefaultGrid);
+ const fix = TestBed.createComponent(DefaultGridComponent);
fix.detectChanges();
const grid = fix.componentInstance.instance;
@@ -173,7 +173,7 @@ describe("IgxGrid - Cell component", () => {
}));
it("keyboard navigation - first/last cell jump with Ctrl", fakeAsync(() => {
- const fix = TestBed.createComponent(CtrlKeyKeyboardNagivation);
+ const fix = TestBed.createComponent(CtrlKeyKeyboardNagivationComponent);
fix.detectChanges();
const grid = fix.componentInstance.instance;
@@ -206,7 +206,7 @@ describe("IgxGrid - Cell component", () => {
`
})
-export class DefaultGrid {
+export class DefaultGridComponent {
public data = [
{ index: 1, value: 1},
@@ -228,7 +228,7 @@ export class DefaultGrid {
+
- ;
+ let fixture: ComponentFixture;
let resolver;
let drawer;
const result = new Promise((resolve) => {
@@ -131,7 +133,7 @@ describe("Navigation Drawer", () => {
});
// compile after overrides, not in before each: https://github.com/angular/angular/issues/10712
TestBed.compileComponents().then(() => {
- fixture = TestBed.createComponent(TestComponentDI);
+ fixture = TestBed.createComponent(TestComponentDIComponent);
fixture.detectChanges();
drawer = fixture.componentInstance.viewChild;
@@ -170,16 +172,16 @@ describe("Navigation Drawer", () => {
it("should properly initialize with min template", async(() => {
const template = `
-
-
+
+
`;
- TestBed.overrideComponent(TestComponentDI, {
+ TestBed.overrideComponent(TestComponentDIComponent, {
set: {
template
}});
// compile after overrides, not in before each: https://github.com/angular/angular/issues/10712
TestBed.compileComponents().then(() => {
- const fixture = TestBed.createComponent(TestComponentDI);
+ const fixture = TestBed.createComponent(TestComponentDIComponent);
fixture.detectChanges();
expect(fixture.componentInstance.viewChild.hasAnimateWidth).toBeTruthy();
@@ -218,10 +220,10 @@ describe("Navigation Drawer", () => {
}));
it("should toggle on edge swipe gesture", (done) => {
- let fixture: ComponentFixture;
+ let fixture: ComponentFixture;
TestBed.compileComponents().then(() => {
- fixture = TestBed.createComponent(TestComponentDI);
+ fixture = TestBed.createComponent(TestComponentDIComponent);
fixture.detectChanges();
expect(fixture.componentInstance.viewChild.isOpen).toEqual(false);
@@ -248,11 +250,11 @@ describe("Navigation Drawer", () => {
it("should toggle on edge pan gesture", (done) => {
let navDrawer;
- let fixture: ComponentFixture;
+ let fixture: ComponentFixture;
// Using bare minimum of timeouts, jasmine.DEFAULT_TIMEOUT_INTERVAL can be modified only in beforeEach
TestBed.compileComponents().then(() => {
- fixture = TestBed.createComponent(TestComponentDI);
+ fixture = TestBed.createComponent(TestComponentDIComponent);
fixture.detectChanges();
navDrawer = fixture.componentInstance.viewChild;
@@ -290,18 +292,18 @@ describe("Navigation Drawer", () => {
it("should update edge zone with mini width", async(() => {
const template = `
-
+
`;
- let fixture: ComponentFixture;
- TestBed.overrideComponent(TestComponentDI, {
+ let fixture: ComponentFixture;
+ TestBed.overrideComponent(TestComponentDIComponent, {
set: {
template
}});
// compile after overrides, not in before each: https://github.com/angular/angular/issues/10712
TestBed.compileComponents().then(() => {
- fixture = TestBed.createComponent(TestComponentDI);
+ fixture = TestBed.createComponent(TestComponentDIComponent);
fixture.detectChanges();
- const drawer: Infragistics.IgxNavigationDrawer = fixture.componentInstance.viewChild;
+ const drawer: Infragistics.IgxNavigationDrawerComponent = fixture.componentInstance.viewChild;
fixture.componentInstance.drawerMiniWidth = 60;
fixture.detectChanges();
@@ -319,17 +321,17 @@ describe("Navigation Drawer", () => {
it("should update width from css or property", (done) => {
const template = `
-
-
+
+
`;
- let fixture: ComponentFixture;
- TestBed.overrideComponent(TestComponentDI, {
+ let fixture: ComponentFixture;
+ TestBed.overrideComponent(TestComponentDIComponent, {
set: {
template
}});
// compile after overrides, not in before each: https://github.com/angular/angular/issues/10712
TestBed.compileComponents().then(() => {
- fixture = TestBed.createComponent(TestComponentDI);
+ fixture = TestBed.createComponent(TestComponentDIComponent);
fixture.detectChanges();
// defaults:
@@ -449,26 +451,26 @@ describe("Navigation Drawer", () => {
});
@Component({
- selector: "test-cmp",
+ selector: "igx-test-cmp",
template: "
- * ;
- @ContentChildren(forwardRef(() => IgxTabPanel)) public panels: QueryList;
+export class IgxTabBarComponent implements AfterViewInit {
+ @ViewChildren(forwardRef(() => IgxTabComponent)) public tabs: QueryList;
+ @ContentChildren(forwardRef(() => IgxTabPanelComponent)) public panels: QueryList;
@Output() public onTabSelected = new EventEmitter();
@Output() public onTabDeselected = new EventEmitter();
- public selectedIndex: number = -1;
+ public selectedIndex = -1;
public get itemStyle(): string {
return this._itemStyle;
}
- private _itemStyle: string = "igx-tab-bar";
+ private _itemStyle = "igx-tab-bar";
- get selectedTab(): IgxTab {
+ get selectedTab(): IgxTabComponent {
if (this.tabs && this.selectedIndex !== undefined) {
return this.tabs.toArray()[this.selectedIndex];
}
@@ -64,6 +63,7 @@ export class IgxTabBar implements AfterViewInit {
}, 0);
}
+ @HostListener("onTabSelected", ["$event"])
public _selectedPanelHandler(args) {
this.selectedIndex = args.panel.index;
@@ -74,7 +74,7 @@ export class IgxTabBar implements AfterViewInit {
});
}
- private _deselectPanel(panel: IgxTabPanel) {
+ private _deselectPanel(panel: IgxTabPanelComponent) {
// Cannot deselect the selected tab - this will mean that there will be not selected tab left
if (panel.isDisabled || this.selectedTab.index === panel.index) {
return;
@@ -85,43 +85,54 @@ export class IgxTabBar implements AfterViewInit {
}
}
-// ================================= IgxTabPanel ======================================
+// ================================= IgxTabPanelComponent ======================================
@Component({
- host: {
- "[attr.aria-labelledby]": "'igx-tab-' + index",
- "[class.igx-tab-bar__panel--selected]": "isSelected",
- "[class.igx-tab-bar__panel]": "!isSelected",
- "[id]": "'igx-tab-bar__panel-' + index",
- "role": "tabpanel"
- },
selector: "igx-tab-panel",
templateUrl: "tab-panel.component.html"
})
-export class IgxTabPanel {
- public isSelected: boolean = false;
+export class IgxTabPanelComponent {
+ private _itemStyle = "igx-tab-panel";
+ public isSelected = false;
@Input() public label: string;
@Input() public icon: string;
@Input() public isDisabled: boolean;
+ @HostBinding("attr.role") public role = "tabpanel";
+
+ @HostBinding("class.igx-tab-bar__panel")
+ get styleClass(): boolean {
+ return (!this.isSelected);
+ }
+ @HostBinding("class.igx-tab-bar__panel--selected")
+ get selected(): boolean {
+ return this.isSelected;
+ }
+ @HostBinding("attr.aria-labelledby")
+ get labelledBy(): string {
+ return "igx-tab-" + this.index;
+ }
+
+ @HostBinding("attr.id")
+ get id(): string {
+ return "igx-tab-bar__panel-" + this.index;
+ }
+
public get itemStyle(): string {
return this._itemStyle;
}
- private _itemStyle: string = "igx-tab-panel";
- get relatedTab(): IgxTab {
+ get relatedTab(): IgxTabComponent {
if (this._tabBar.tabs) {
return this._tabBar.tabs.toArray()[this.index];
}
}
-
get index() {
return this._tabBar.panels.toArray().indexOf(this);
}
-
- constructor(private _tabBar: IgxTabBar) {
+ constructor(private _tabBar: IgxTabBarComponent) {
}
public select() {
@@ -134,21 +145,20 @@ export class IgxTabPanel {
}
}
-// ======================================= IgxTab ==========================================
+// ======================================= IgxTabComponent ==========================================
@Component({
- host: {
- class: "igx-tab-bar__menu-item",
- role: "tab"
- },
selector: "igx-tab",
templateUrl: "tab.component.html"
})
-export class IgxTab {
- @Input() public relatedPanel: IgxTabPanel;
+export class IgxTabComponent {
+
+ @HostBinding("attr.role") public role = "tab";
+
+ @Input() public relatedPanel: IgxTabPanelComponent;
- private _changesCount: number = 0; // changes and updates accordingly applied to the tab.
+ private _changesCount = 0; // changes and updates accordingly applied to the tab.
get changesCount(): number {
return this._changesCount;
@@ -174,7 +184,7 @@ export class IgxTab {
return this._tabBar.tabs.toArray().indexOf(this);
}
- constructor(private _tabBar: IgxTabBar, private _element: ElementRef) {
+ constructor(private _tabBar: IgxTabBarComponent, private _element: ElementRef) {
}
public select() {
@@ -183,8 +193,8 @@ export class IgxTab {
}
@NgModule({
- declarations: [IgxTabBar, IgxTabPanel, IgxTab],
- exports: [IgxTabBar, IgxTabPanel, IgxTab],
+ declarations: [IgxTabBarComponent, IgxTabPanelComponent, IgxTabComponent],
+ exports: [IgxTabBarComponent, IgxTabPanelComponent, IgxTabComponent],
imports: [CommonModule, IgxBadgeModule, IgxIconModule]
})
export class IgxTabBarModule {
diff --git a/src/toast/toast.component.spec.ts b/src/toast/toast.component.spec.ts
index f92833af9cd..6e0a69e2c1a 100644
--- a/src/toast/toast.component.spec.ts
+++ b/src/toast/toast.component.spec.ts
@@ -2,7 +2,7 @@ import {Component, ViewChild} from "@angular/core";
import {async, TestBed } from "@angular/core/testing";
import {By} from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
-import {IgxToast, IgxToastModule, IgxToastPosition} from "./toast.component";
+import {IgxToastComponent, IgxToastModule, IgxToastPosition} from "./toast.component";
const oldTimeout = jasmine.DEFAULT_TIMEOUT_INTERVAL;
@@ -92,7 +92,7 @@ describe("IgxToast", () => {
const fixture = TestBed.createComponent(ToastInitializeTestComponent);
fixture.detectChanges();
- const displayTime: number = 1000;
+ const displayTime = 1000;
fixture.componentInstance.toast.displayTime = displayTime;
fixture.componentInstance.toast.show();
@@ -114,7 +114,7 @@ describe("IgxToast", () => {
const fixture = TestBed.createComponent(ToastInitializeTestComponent);
fixture.detectChanges();
- const displayTime: number = 1000;
+ const displayTime = 1000;
fixture.componentInstance.toast.displayTime = displayTime;
fixture.componentInstance.toast.autoHide = false;
@@ -133,10 +133,9 @@ describe("IgxToast", () => {
});
});
@Component({
- selector: "snackbar-test-component",
template: `
`
})
class ToastInitializeTestComponent {
- @ViewChild(IgxToast) public toast: IgxToast;
+ @ViewChild(IgxToastComponent) public toast: IgxToastComponent;
}
diff --git a/src/toast/toast.component.ts b/src/toast/toast.component.ts
index f41b8a801d5..1d012959653 100644
--- a/src/toast/toast.component.ts
+++ b/src/toast/toast.component.ts
@@ -20,14 +20,11 @@ import { Component, EventEmitter, Input, NgModule, Output } from "@angular/core"
transition("show => *", animate(".40s ease-out"))
])
],
- host: {
- role: "alert"
- },
selector: "igx-toast",
styleUrls: ["./toast.component.scss"],
templateUrl: "toast.component.html"
})
-export class IgxToast {
+export class IgxToastComponent {
public readonly CSS_CLASSES = {
IGX_TOAST_BOTTOM: "igx-toast--bottom",
IGX_TOAST_MIDDLE: "igx-toast--middle",
@@ -62,13 +59,15 @@ export class IgxToast {
@Output()
public onHidden = new EventEmitter();
+ @Input()
+ public role = "alert";
/**
* Sets if the IgxToast component will be hidden after shown
* Default value is true
* @type {number}
*/
@Input()
- public autoHide: boolean = true;
+ public autoHide = true;
/**
* The duration of time span in ms which the IgxToast component will be visible
@@ -77,14 +76,14 @@ export class IgxToast {
* @type {number}
*/
@Input()
- public displayTime: number = 4000;
+ public displayTime = 4000;
/**
* The IgxToast component visual state state
* @type {boolean}
*/
@Input()
- public isVisible: boolean = false;
+ public isVisible = false;
/**
* The message that will be shown message by the IgxToast component
@@ -161,8 +160,8 @@ export enum IgxToastPosition {
}
@NgModule({
- declarations: [IgxToast],
- exports: [IgxToast],
+ declarations: [IgxToastComponent],
+ exports: [IgxToastComponent],
imports: [CommonModule]
})
export class IgxToastModule { }
diff --git a/tslint.json b/tslint.json
index 94ceba8a707..e65ef73e7b5 100644
--- a/tslint.json
+++ b/tslint.json
@@ -1,14 +1,150 @@
{
- "extends": "tslint:latest",
+ "extends": "tslint:latest",
+ "rulesDirectory": [
+ "node_modules/codelyzer"
+ ],
"rules": {
- "indent": [true, "spaces"],
- "variable-name": [true, "allow-leading-underscore"],
"interface-name": [true, "always-prefix"],
"trailing-comma": [true, {"multiline": "never", "singleline": "never"}],
- "no-empty": false,
- "no-bitwise": false,
"no-submodule-imports": [true, "rxjs", "@angular/platform-browser", "@angular/core/testing"],
"max-classes-per-file": [false],
- "prefer-object-spread": false
+ "prefer-object-spread": false,
+ "arrow-return-shorthand": true,
+ "callable-types": true,
+ "class-name": true,
+ "comment-format": [
+ true,
+ "check-space"
+ ],
+ "curly": true,
+ "deprecation": {
+ "severity": "warn"
+ },
+ "eofline": true,
+ "forin": true,
+ "import-blacklist": [
+ true,
+ "rxjs",
+ "rxjs/Rx"
+ ],
+ "import-spacing": true,
+ "indent": [
+ true,
+ "spaces"
+ ],
+ "interface-over-type-literal": true,
+ "label-position": true,
+ "max-line-length": [
+ true,
+ 140
+ ],
+ "member-access": false,
+ "member-ordering": [
+ true,
+ {
+ "order": [
+ "static-field",
+ "instance-field",
+ "static-method",
+ "instance-method"
+ ]
+ }
+ ],
+ "no-arg": true,
+ "no-bitwise": true,
+ "no-console": [
+ true,
+ "debug",
+ "info",
+ "time",
+ "timeEnd",
+ "trace"
+ ],
+ "no-construct": true,
+ "no-debugger": true,
+ "no-duplicate-super": true,
+ "no-empty": false,
+ "no-empty-interface": true,
+ "no-eval": true,
+ "no-inferrable-types": [
+ true,
+ "ignore-params"
+ ],
+ "no-misused-new": true,
+ "no-non-null-assertion": true,
+ "no-shadowed-variable": true,
+ "no-string-literal": false,
+ "no-string-throw": true,
+ "no-switch-case-fall-through": true,
+ "no-trailing-whitespace": true,
+ "no-unnecessary-initializer": true,
+ "no-unused-expression": true,
+ "no-use-before-declare": true,
+ "no-var-keyword": true,
+ "object-literal-sort-keys": false,
+ "one-line": [
+ true,
+ "check-open-brace",
+ "check-catch",
+ "check-else",
+ "check-whitespace"
+ ],
+ "prefer-const": true,
+ "quotemark": [
+ true,
+ "double"
+ ],
+ "radix": true,
+ "semicolon": [
+ true,
+ "always"
+ ],
+ "triple-equals": [
+ true,
+ "allow-null-check"
+ ],
+ "typedef-whitespace": [
+ true,
+ {
+ "call-signature": "nospace",
+ "index-signature": "nospace",
+ "parameter": "nospace",
+ "property-declaration": "nospace",
+ "variable-declaration": "nospace"
+ }
+ ],
+ "typeof-compare": true,
+ "unified-signatures": true,
+ "variable-name": [true, "allow-leading-underscore"],
+ "whitespace": [
+ true,
+ "check-branch",
+ "check-decl",
+ "check-operator",
+ "check-separator",
+ "check-type"
+ ],
+ "directive-selector": [
+ true,
+ "attribute",
+ "igx",
+ "camelCase"
+ ],
+ "component-selector": [
+ true,
+ "element",
+ "igx",
+ "kebab-case"
+ ],
+ "no-output-on-prefix": false,
+ "use-input-property-decorator": true,
+ "use-output-property-decorator": true,
+ "use-host-property-decorator": true,
+ "no-input-rename": false,
+ "no-output-rename": true,
+ "use-life-cycle-interface": true,
+ "use-pipe-transform-interface": true,
+ "component-class-suffix": true,
+ "directive-class-suffix": true
}
}
Drawer Title
+
+
\ No newline at end of file
diff --git a/src/navigation-drawer/navigation-drawer.component.scss b/src/navigation-drawer/navigation-drawer.component.scss
index d7aadb1c521..6abc636a08f 100644
--- a/src/navigation-drawer/navigation-drawer.component.scss
+++ b/src/navigation-drawer/navigation-drawer.component.scss
@@ -2,7 +2,7 @@
@import "../themes/material/config";
// Main Navigation Drawer state styles
-@include b(ig-nav-drawer) {
+@include b(igx-nav-drawer) {
position: fixed;
width: em(242px);
height: 100%;
@@ -71,7 +71,7 @@
}
// Navigation Drawer overlay styles
-.ig-nav-drawer-overlay {
+.igx-nav-drawer-overlay {
opacity: 1;
background-color: $overlay-color;
transition-property: opacity, visibility; // opacity must match drawer transition, step over visibility to reduce animation cost
diff --git a/src/navigation-drawer/navigation-drawer.component.spec.ts b/src/navigation-drawer/navigation-drawer.component.spec.ts
index bbbc1a62d0a..4309f2f479e 100644
--- a/src/navigation-drawer/navigation-drawer.component.spec.ts
+++ b/src/navigation-drawer/navigation-drawer.component.spec.ts
@@ -7,7 +7,7 @@ import {
} from "@angular/core/testing";
import { Component, DebugElement, ViewChild } from "@angular/core";
-import { Observable } from "rxjs/Rx";
+import { Observable } from "rxjs/Observable";
import * as Infragistics from "../../src/main";
// HammerJS simulator from https://github.com/hammerjs/simulator, manual typings TODO
@@ -19,10 +19,10 @@ describe("Navigation Drawer", () => {
jasmine.DEFAULT_TIMEOUT_INTERVAL = 10000;
TestBed.configureTestingModule({
declarations: [
- Infragistics.IgxNavigationClose,
- Infragistics.IgxNavigationToggle,
+ Infragistics.IgxNavigationCloseDirective,
+ Infragistics.IgxNavigationToggleDirective,
TestComponent,
- TestComponentDI,
+ TestComponentDIComponent,
TestComponentPin],
imports: [Infragistics.IgxNavigationDrawerModule]
});
@@ -36,18 +36,20 @@ describe("Navigation Drawer", () => {
TestBed.compileComponents().then(() => {
const fixture = TestBed.createComponent(TestComponent);
fixture.detectChanges();
- expect(fixture.componentInstance.viewChild instanceof Infragistics.IgxNavigationDrawer).toBeTruthy();
+ expect(fixture.componentInstance.viewChild instanceof
+ Infragistics.IgxNavigationDrawerComponent).toBeTruthy();
expect(fixture.componentInstance.viewChild.state).toBeNull();
});
}));
it("should initialize with DI service", async(() => {
TestBed.compileComponents().then(() => {
- const fixture = TestBed.createComponent(TestComponentDI);
+ const fixture = TestBed.createComponent(TestComponentDIComponent);
fixture.detectChanges();
expect(fixture.componentInstance.viewChild).toBeDefined();
- expect(fixture.componentInstance.viewChild instanceof Infragistics.IgxNavigationDrawer).toBeTruthy();
+ expect(fixture.componentInstance.viewChild instanceof
+ Infragistics.IgxNavigationDrawerComponent).toBeTruthy();
expect(fixture.componentInstance.viewChild.state instanceof Infragistics.IgxNavigationService)
.toBeTruthy();
});
@@ -55,11 +57,11 @@ describe("Navigation Drawer", () => {
it("should properly initialize all elements and properties", async(() => {
TestBed.compileComponents().then(() => {
- const fixture = TestBed.createComponent(TestComponentDI);
+ const fixture = TestBed.createComponent(TestComponentDIComponent);
fixture.detectChanges();
- expect(fixture.componentInstance.viewChild.drawer.classList).toContain("ig-nav-drawer");
- expect(fixture.componentInstance.viewChild.overlay.classList).toContain("ig-nav-drawer-overlay");
+ expect(fixture.componentInstance.viewChild.drawer.classList).toContain("igx-nav-drawer");
+ expect(fixture.componentInstance.viewChild.overlay.classList).toContain("igx-nav-drawer-overlay");
expect(fixture.componentInstance.viewChild.styleDummy.classList).toContain("style-dummy");
expect(fixture.componentInstance.viewChild.hasAnimateWidth).toBeFalsy();
@@ -69,14 +71,14 @@ describe("Navigation Drawer", () => {
}));
it("should attach events and register to nav service and detach on destroy", async(() => {
- const template = '
☰
@@ -35,8 +35,8 @@ The **igx-nav-drawer** is a container element for side navigation, providing qui
| `isOpen` | boolean | State of the drawer. |
| `pin` | boolean | Pinned state of the drawer. Currently only support. |
| `pinThreshold` | number | Minimum device width required for automatic pin to be toggled. Default is 1024, can be set to falsy value to ignore. |
-| `width` | string| Width of the drawer in its open state. Defaults to 300px based on the `.ig-nav-drawer` style. Can be used to override or dynamically modify the width.|
-| `miniWidth` | string | Width of the drawer in its mini state. Defaults to 60px based on the `.ig-nav-drawer.mini` style. Can be used to override or dynamically modify the width. |
+| `width` | string| Width of the drawer in its open state. Defaults to 300px based on the `.igx-nav-drawer` style. Can be used to override or dynamically modify the width.|
+| `miniWidth` | string | Width of the drawer in its mini state. Defaults to 60px based on the `.igx-nav-drawer.mini` style. Can be used to override or dynamically modify the width. |
## Methods
| Name | Description |
@@ -66,7 +66,7 @@ export class MainDrawerSampleComponent {
open: boolean = false;
position = "left";
drawerMiniWidth = "";
- @ViewChild(IgxNavigationDrawer) viewChild: IgxNavigationDrawer;
+ @ViewChild(IgxNavigationDrawerComponent) viewChild: IgxNavigationDrawerComponent;
/** Sample-specific configurations: */
showMiniWidth: boolean = false;
showEventLog: boolean = true;
diff --git a/src/navigation-drawer/navigation-drawer.component.html b/src/navigation-drawer/navigation-drawer.component.html
index 2ee431be5bf..a99cd176296 100644
--- a/src/navigation-drawer/navigation-drawer.component.html
+++ b/src/navigation-drawer/navigation-drawer.component.html
@@ -1,12 +1,12 @@
-
-
+ *
`
})
class BottomTabBarTestComponent {
- @ViewChild(IgxTabBar) public tabbar: IgxTabBar;
+ @ViewChild(IgxTabBarComponent) public tabbar: IgxTabBarComponent;
@ViewChild("wrapperDiv") public wrapperDiv: any;
}
diff --git a/src/tabbar/tabbar.component.ts b/src/tabbar/tabbar.component.ts
index b41946fcba5..8b453706f22 100644
--- a/src/tabbar/tabbar.component.ts
+++ b/src/tabbar/tabbar.component.ts
@@ -6,6 +6,8 @@ import {
ElementRef,
EventEmitter,
forwardRef,
+ HostBinding,
+ HostListener,
Input,
NgModule,
Output,
@@ -18,30 +20,27 @@ import { IgxBadgeModule } from "../badge/badge.component";
import { IgxIconModule } from "../icon/icon.component";
@Component({
encapsulation: ViewEncapsulation.None,
- host: {
- "(onTabSelected)": "_selectedPanelHandler($event)"
- },
selector: "igx-tab-bar",
styleUrls: ["./tabbar.component.scss"],
templateUrl: "tab-bar-content.component.html"
})
-export class IgxTabBar implements AfterViewInit {
- @ViewChildren(forwardRef(() => IgxTab)) public tabs: QueryList
*
*
*
* ```
- * Can also include an optional ``.
+ * Can also include an optional `Radio ` })
-class InitRadio {}
+class InitRadioComponent {}
@Component({
template: `
@@ -67,8 +67,8 @@ class InitRadio {}
value="{{item}}"
name="group" [(ngModel)]="selected">{{item}}`
})
-class RadioWithModel {
- @ViewChildren(IgxRadio) public radios;
+class RadioWithModelComponent {
+ @ViewChildren(IgxRadioComponent) public radios;
public selected = "Foo";
}
diff --git a/src/radio/radio.component.ts b/src/radio/radio.component.ts
index 637eaf3a7f3..d8829e7c15d 100644
--- a/src/radio/radio.component.ts
+++ b/src/radio/radio.component.ts
@@ -14,16 +14,16 @@ let nextId = 0;
const noop = () => { };
@Component({
- providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: IgxRadio, multi: true }],
+ providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: IgxRadioComponent, multi: true }],
selector: "igx-radio",
styleUrls: ["./radio.component.scss"],
templateUrl: "radio.component.html"
})
-export class IgxRadio implements ControlValueAccessor {
+export class IgxRadioComponent implements ControlValueAccessor {
@Input() public value: any;
- @Input() public id: string = `igx-radio-${nextId++}`;
+ @Input() public id = `igx-radio-${nextId++}`;
@Input() public name: string;
@@ -81,7 +81,7 @@ export class IgxRadio implements ControlValueAccessor {
}
@NgModule({
- declarations: [IgxRadio],
- exports: [IgxRadio]
+ declarations: [IgxRadioComponent],
+ exports: [IgxRadioComponent]
})
export class IgxRadioModule { }
diff --git a/src/scroll/README.md b/src/scroll/README.md
index e95e42b0d17..b28ac261b31 100644
--- a/src/scroll/README.md
+++ b/src/scroll/README.md
@@ -47,7 +47,7 @@ export class IgxScrollSampleComponent {
To use the IgxSlider import the IgxSlider:
```typescript
-import { IgxScroll } from "../../../src/main";
+import { IgxScrollComponent } from "../../../src/main";
```
## API
diff --git a/src/scroll/scroll.component.spec.ts b/src/scroll/scroll.component.spec.ts
index 425e8057d21..54acc07e5a5 100644
--- a/src/scroll/scroll.component.spec.ts
+++ b/src/scroll/scroll.component.spec.ts
@@ -1,6 +1,6 @@
import {Component, ViewChild} from "@angular/core";
import {async, TestBed} from "@angular/core/testing";
-import {IgxScroll, IgxScrollEvent, IgxScrollModule} from "./scroll.component";
+import {IgxScrollComponent, IgxScrollEvent, IgxScrollModule} from "./scroll.component";
declare var Simulator: any;
@@ -262,7 +262,6 @@ describe("IgxScroll", () => {
}
});
@Component({
- selector: "scroll-test-component",
template: `
{
`
})
class ScrollInitializeTestComponent {
- @ViewChild(IgxScroll) public scroll: IgxScroll;
+ @ViewChild(IgxScrollComponent) public scroll: IgxScrollComponent;
public items: string[] = [];
public visibleItems: string[] = [];
- public visibleItemsCount: number = 5;
+ public visibleItemsCount = 5;
- public currentTop: number = 0;
+ public currentTop = 0;
public constructor() {
for (let i = 1; i <= 5000; i++) {
diff --git a/src/scroll/scroll.component.ts b/src/scroll/scroll.component.ts
index d75ed0a738e..a4b6df07519 100644
--- a/src/scroll/scroll.component.ts
+++ b/src/scroll/scroll.component.ts
@@ -27,7 +27,7 @@ export interface IgxScrollEvent {
styleUrls: ["./scroll.component.scss"],
templateUrl: "scroll.component.html"
})
-export class IgxScroll {
+export class IgxScrollComponent {
/**
* Gets the scroll top of the scroll
* @returns {number}
@@ -139,8 +139,8 @@ export class IgxScroll {
}
@NgModule({
- declarations: [IgxScroll],
- exports: [IgxScroll],
+ declarations: [IgxScrollComponent],
+ exports: [IgxScrollComponent],
imports: [CommonModule],
providers: [{
provide: HAMMER_GESTURE_CONFIG,
diff --git a/src/slider/README.md b/src/slider/README.md
index 8b97668f58d..577ea305e20 100644
--- a/src/slider/README.md
+++ b/src/slider/README.md
@@ -26,10 +26,10 @@ Based on its configuration it's a slider or range slider.
### Dependencies
-To use the IgxSlider import the IgxSlider:
+To use the IgxSlider import the IgxSliderComponent:
```typescript
-import { IgxSlider } from "../../../src/main";
+import { IgxSliderComponent } from "../../../src/main";
```
## API
diff --git a/src/slider/slider.component.spec.ts b/src/slider/slider.component.spec.ts
index 73deecba436..41e810521eb 100644
--- a/src/slider/slider.component.spec.ts
+++ b/src/slider/slider.component.spec.ts
@@ -1,6 +1,6 @@
import { Component, ViewChild } from "@angular/core";
import { async, TestBed } from "@angular/core/testing";
-import {IgxSlider, IgxSliderModule, IRangeSliderValue, SliderType} from "./slider.component";
+import {IgxSliderComponent, IgxSliderModule, IRangeSliderValue, SliderType} from "./slider.component";
declare var Simulator: any;
@@ -303,7 +303,7 @@ describe("IgxSlider", () => {
xit("should move thumb slider to value 60", (done) => {
let fixture;
- let slider: IgxSlider;
+ let slider: IgxSliderComponent;
TestBed.compileComponents().then(() => {
fixture = TestBed.createComponent(SliderInitializeTestComponent);
slider = fixture.componentInstance.slider;
@@ -324,7 +324,7 @@ describe("IgxSlider", () => {
it("should not move thumb slider and value should remain the same when slider is disabled", (done) => {
let fixture;
- let slider: IgxSlider;
+ let slider: IgxSliderComponent;
TestBed.compileComponents().then(() => {
fixture = TestBed.createComponent(SliderInitializeTestComponent);
slider = fixture.componentInstance.slider;
@@ -363,7 +363,7 @@ describe("IgxSlider", () => {
it("should change value from 60 to 61 when right arrow is pressed and slider is SLIDER", (done) => {
let fixture;
- let slider: IgxSlider;
+ let slider: IgxSliderComponent;
TestBed.compileComponents().then(() => {
fixture = TestBed.createComponent(SliderInitializeTestComponent);
slider = fixture.componentInstance.slider;
@@ -384,7 +384,7 @@ describe("IgxSlider", () => {
it("should change value from 60 to 59 when left arrow is pressed and slider is SLIDER", (done) => {
let fixture;
- let slider: IgxSlider;
+ let slider: IgxSliderComponent;
TestBed.compileComponents().then(() => {
fixture = TestBed.createComponent(SliderInitializeTestComponent);
slider = fixture.componentInstance.slider;
@@ -406,7 +406,7 @@ describe("IgxSlider", () => {
it("should switch from left thumb to be focused upper when lower value is near upper" +
"when slider is RANGE", (done) => {
let fixture;
- let slider: IgxSlider;
+ let slider: IgxSliderComponent;
TestBed.compileComponents().then(() => {
fixture = TestBed.createComponent(SliderInitializeTestComponent);
slider = fixture.componentInstance.slider;
@@ -435,7 +435,7 @@ describe("IgxSlider", () => {
it("should switch from right thumb to be focused lower when upper value is near lower" +
"when slider is RANGE", (done) => {
let fixture;
- let slider: IgxSlider;
+ let slider: IgxSliderComponent;
TestBed.compileComponents().then(() => {
fixture = TestBed.createComponent(SliderInitializeTestComponent);
slider = fixture.componentInstance.slider;
@@ -463,7 +463,7 @@ describe("IgxSlider", () => {
it("should not change value if different key from arrows is pressed and slider is SLIDER", (done) => {
let fixture;
- let slider: IgxSlider;
+ let slider: IgxSliderComponent;
TestBed.compileComponents().then(() => {
fixture = TestBed.createComponent(SliderInitializeTestComponent);
slider = fixture.componentInstance.slider;
@@ -492,7 +492,7 @@ describe("IgxSlider", () => {
it("should increment lower value when lower thumb is focused" +
"if right arrow is pressed and slider is RANGE", (done) => {
let fixture;
- let slider: IgxSlider;
+ let slider: IgxSliderComponent;
TestBed.compileComponents().then(() => {
fixture = TestBed.createComponent(SliderInitializeTestComponent);
slider = fixture.componentInstance.slider;
@@ -521,7 +521,7 @@ describe("IgxSlider", () => {
it("should increment upper value when upper thumb is focused" +
"if right arrow is pressed and slider is RANGE", (done) => {
let fixture;
- let slider: IgxSlider;
+ let slider: IgxSliderComponent;
TestBed.compileComponents().then(() => {
fixture = TestBed.createComponent(SliderInitializeTestComponent);
slider = fixture.componentInstance.slider;
@@ -549,7 +549,7 @@ describe("IgxSlider", () => {
it("should not increment upper value when slider is disabled", (done) => {
let fixture;
- let slider: IgxSlider;
+ let slider: IgxSliderComponent;
TestBed.compileComponents().then(() => {
fixture = TestBed.createComponent(SliderInitializeTestComponent);
slider = fixture.componentInstance.slider;
@@ -604,10 +604,10 @@ describe("IgxSlider", () => {
});
});
@Component({
- selector: "slider-test-component",
+ selector: "igx-slider-test-component",
template: `
`
})
class SliderInitializeTestComponent {
- @ViewChild(IgxSlider) public slider: IgxSlider;
+ @ViewChild(IgxSliderComponent) public slider: IgxSliderComponent;
}
diff --git a/src/slider/slider.component.ts b/src/slider/slider.component.ts
index 3480acef955..d5527a03700 100644
--- a/src/slider/slider.component.ts
+++ b/src/slider/slider.component.ts
@@ -30,12 +30,12 @@ const noop = () => {
};
@Component({
- providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: IgxSlider, multi: true }],
+ providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: IgxSliderComponent, multi: true }],
selector: "igx-slider",
styleUrls: ["./slider.component.scss"],
templateUrl: "slider.component.html"
})
-export class IgxSlider implements ControlValueAccessor, OnInit, AfterViewInit {
+export class IgxSliderComponent implements ControlValueAccessor, OnInit, AfterViewInit {
/**
* Disables or enables UI interaction.
*/
@@ -47,7 +47,7 @@ export class IgxSlider implements ControlValueAccessor, OnInit, AfterViewInit {
* Discrete slider does not have ticks and does not shows bubble labels for values.
*/
@Input()
- public isContinuous: boolean = false;
+ public isContinuous = false;
/**
* The type of the slider. The slider can be SliderType.SLIDER or SliderType.RANGE
@@ -61,7 +61,7 @@ export class IgxSlider implements ControlValueAccessor, OnInit, AfterViewInit {
* @type {number}
*/
@Input()
- public thumbLabelVisibilityDuration: number = 750;
+ public thumbLabelVisibilityDuration = 750;
/**
* The incremental/decremental step of the value when dragging the thumb.
@@ -69,7 +69,7 @@ export class IgxSlider implements ControlValueAccessor, OnInit, AfterViewInit {
* @type {number}
*/
@Input()
- public step: number = 1;
+ public step = 1;
/**
* This event is emitted when user has stopped interacting the thumb and value is changed.
@@ -78,7 +78,7 @@ export class IgxSlider implements ControlValueAccessor, OnInit, AfterViewInit {
@Output()
public onValueChange = new EventEmitter();
- public isActiveLabel: boolean = false;
+ public isActiveLabel = false;
private activeHandle: SliderHandle = SliderHandle.TO;
@@ -97,22 +97,22 @@ export class IgxSlider implements ControlValueAccessor, OnInit, AfterViewInit {
@ViewChild("thumbTo")
private thumbTo: ElementRef;
- private _minValue: number = 0;
+ private _minValue = 0;
// Measures & Coordinates
- private width: number = 0;
- private xOffset: number = 0;
- private xPointer: number = 0;
- private pPointer: number = 0;
+ private width = 0;
+ private xOffset = 0;
+ private xPointer = 0;
+ private pPointer = 0;
// Limit handle travel zone
- private pMin: number = 0;
- private pMax: number = 1;
+ private pMin = 0;
+ private pMax = 1;
// From/upperValue in percent values
- private hasViewInit: boolean = false;
+ private hasViewInit = false;
private timer;
- private _maxValue: number = 100;
+ private _maxValue = 100;
private _lowerBound?: number;
private _upperBound?: number;
private _lowerValue: number;
@@ -671,8 +671,8 @@ export class IgxSlider implements ControlValueAccessor, OnInit, AfterViewInit {
}
@NgModule({
- declarations: [IgxSlider],
- exports: [IgxSlider],
+ declarations: [IgxSliderComponent],
+ exports: [IgxSliderComponent],
imports: [CommonModule]
})
export class IgxSliderModule {
diff --git a/src/snackbar/snackbar.component.spec.ts b/src/snackbar/snackbar.component.spec.ts
index 0b2651c0ed8..d4a5493d74a 100644
--- a/src/snackbar/snackbar.component.spec.ts
+++ b/src/snackbar/snackbar.component.spec.ts
@@ -1,7 +1,7 @@
import {Component, ViewChild} from "@angular/core";
import {async, TestBed } from "@angular/core/testing";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
-import {IgxSnackbar, IgxSnackbarModule} from "./snackbar.component";
+import {IgxSnackbarComponent, IgxSnackbarModule} from "./snackbar.component";
const oldTimeout = jasmine.DEFAULT_TIMEOUT_INTERVAL;
@@ -44,7 +44,7 @@ describe("IgxSnackbar", () => {
const fixture = TestBed.createComponent(SnackbarInitializeTestComponent);
fixture.detectChanges();
- const displayTime: number = 1000;
+ const displayTime = 1000;
fixture.componentInstance.snackbar.displayTime = displayTime;
fixture.componentInstance.snackbar.show();
@@ -66,7 +66,7 @@ describe("IgxSnackbar", () => {
const fixture = TestBed.createComponent(SnackbarInitializeTestComponent);
fixture.detectChanges();
- const displayTime: number = 1000;
+ const displayTime = 1000;
fixture.componentInstance.snackbar.displayTime = displayTime;
fixture.componentInstance.snackbar.autoHide = false;
@@ -103,11 +103,10 @@ describe("IgxSnackbar", () => {
}));
});
@Component({
- selector: "snackbar-test-component",
template: `
`
})
class SnackbarInitializeTestComponent {
public text: string;
- @ViewChild(IgxSnackbar) public snackbar: IgxSnackbar;
+ @ViewChild(IgxSnackbarComponent) public snackbar: IgxSnackbarComponent;
}
diff --git a/src/snackbar/snackbar.component.ts b/src/snackbar/snackbar.component.ts
index c013954ad13..d189527c8a2 100644
--- a/src/snackbar/snackbar.component.ts
+++ b/src/snackbar/snackbar.component.ts
@@ -73,7 +73,7 @@ import { fadeIn, fadeOut, slideInBottom, slideOutBottom } from "../animations/ma
styleUrls: ["./snackbar.component.scss"],
templateUrl: "snackbar.component.html"
})
-export class IgxSnackbar {
+export class IgxSnackbarComponent {
/**
* The message that will be shown message by the IgxSnackbar component
* @type {string}
@@ -84,14 +84,14 @@ export class IgxSnackbar {
* The IgxSnackbar component visual state state
* @type {boolean}
*/
- @Input() public isVisible: boolean = false;
+ @Input() public isVisible = false;
/**
* Sets if the IgxSnackbar component will be hidden after shown
* Default value is true
* @type {number}
*/
- @Input() public autoHide: boolean = true;
+ @Input() public autoHide = true;
/**
* The duration of time span in ms which the IgxSnackbar component will be visible
@@ -99,7 +99,7 @@ export class IgxSnackbar {
* Default value is 4000
* @type {number}
*/
- @Input() public displayTime: number = 4000;
+ @Input() public displayTime = 4000;
/**
* The text of the IgxSnackbar component action
@@ -172,8 +172,8 @@ export class IgxSnackbar {
}
@NgModule({
- declarations: [IgxSnackbar],
- exports: [IgxSnackbar],
+ declarations: [IgxSnackbarComponent],
+ exports: [IgxSnackbarComponent],
imports: [CommonModule]
})
export class IgxSnackbarModule { }
diff --git a/src/switch/switch.component.ts b/src/switch/switch.component.ts
index f0855b335c0..9fe580a3cd2 100644
--- a/src/switch/switch.component.ts
+++ b/src/switch/switch.component.ts
@@ -13,29 +13,29 @@ const noop = () => { };
let nextId = 0;
@Component({
- providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: IgxSwitch, multi: true }],
+ providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: IgxSwitchComponent, multi: true }],
selector: "igx-switch",
styleUrls: ["./switch.component.scss"],
templateUrl: "switch.component.html"
})
-export class IgxSwitch implements ControlValueAccessor {
+export class IgxSwitchComponent implements ControlValueAccessor {
@Input() public value: any;
- @Input() public id: string = `igx-switch-${nextId++}`;
+ @Input() public id = `igx-switch-${nextId++}`;
@Input()
get labelId() {
return this.id + "_label";
}
@Input() public name: string;
- @Input() public disabled: boolean = false;
+ @Input() public disabled = false;
@Input() public tabindex: number = null;
- @Input() public checked: boolean = false;
+ @Input() public checked = false;
@Output() public change = new EventEmitter();
@ViewChild("checkbox") public nativeCheckbox;
- public focused: boolean = false;
+ public focused = false;
protected _value: any;
@@ -74,7 +74,7 @@ export class IgxSwitch implements ControlValueAccessor {
}
@NgModule({
- declarations: [IgxSwitch],
- exports: [IgxSwitch]
+ declarations: [IgxSwitchComponent],
+ exports: [IgxSwitchComponent]
})
export class IgxSwitchModule { }
diff --git a/src/tabbar/tabbar.component.spec.ts b/src/tabbar/tabbar.component.spec.ts
index eb7d5434096..ebc2c41144a 100644
--- a/src/tabbar/tabbar.component.spec.ts
+++ b/src/tabbar/tabbar.component.spec.ts
@@ -1,7 +1,7 @@
import { AfterContentChecked, AfterViewChecked, Component, ContentChildren, QueryList, ViewChild } from "@angular/core";
import { async, TestBed } from "@angular/core/testing";
import { By } from "@angular/platform-browser";
-import { IgxTab, IgxTabBar, IgxTabBarModule, IgxTabPanel } from "./tabbar.component";
+import { IgxTabBarComponent, IgxTabBarModule, IgxTabComponent, IgxTabPanelComponent } from "./tabbar.component";
describe("TabBar", () => {
beforeEach(async(() => {
@@ -15,8 +15,8 @@ describe("TabBar", () => {
it("should initialize igx-tab-bar, igx-tab-panel and igx-tab", () => {
const fixture = TestBed.createComponent(TabBarTestComponent);
const tabbar = fixture.componentInstance.tabbar;
- let panels: IgxTabPanel[];
- let tabs: IgxTab[];
+ let panels: IgxTabPanelComponent[];
+ let tabs: IgxTabComponent[];
fixture.detectChanges();
@@ -24,12 +24,12 @@ describe("TabBar", () => {
tabs = tabbar.tabs.toArray();
expect(tabbar).toBeDefined();
- expect(tabbar instanceof IgxTabBar).toBeTruthy();
+ expect(tabbar instanceof IgxTabBarComponent).toBeTruthy();
expect(tabbar.panels instanceof QueryList).toBeTruthy();
expect(tabbar.panels.length).toBe(3);
for (let i = 0; i < tabbar.panels.length; i++) {
- expect(panels[i] instanceof IgxTabPanel).toBeTruthy();
+ expect(panels[i] instanceof IgxTabPanelComponent).toBeTruthy();
expect(panels[i].relatedTab).toBe(tabs[i]);
}
@@ -37,7 +37,7 @@ describe("TabBar", () => {
expect(tabbar.tabs.length).toBe(3);
for (let i = 0; i < tabbar.tabs.length; i++) {
- expect(tabs[i] instanceof IgxTab).toBeTruthy();
+ expect(tabs[i] instanceof IgxTabComponent).toBeTruthy();
expect(tabs[i].relatedPanel).toBe(panels[i]);
}
});
@@ -84,8 +84,8 @@ describe("TabBar", () => {
const fixture = TestBed.createComponent(TabBarTestComponent);
const tabbar = fixture.componentInstance.tabbar;
let tabs;
- let tab1: IgxTab;
- let tab2: IgxTab;
+ let tab1: IgxTabComponent;
+ let tab2: IgxTabComponent;
expect(tabbar.selectedIndex).toBe(-1);
fixture.componentInstance.tabSelectedHandler = () => {
@@ -161,7 +161,7 @@ describe("TabBar", () => {
`
})
class TabBarTestComponent {
- @ViewChild(IgxTabBar) public tabbar: IgxTabBar;
+ @ViewChild(IgxTabBarComponent) public tabbar: IgxTabBarComponent;
@ViewChild("wrapperDiv") public wrapperDiv: any;
public tabSelectedHandler(args) {
@@ -200,6 +200,6 @@ class TabBarTestComponent {
`.
* ID required to register with NavigationService allow directives to target the control.
*/
@Component({
@@ -42,7 +42,7 @@ import { HammerGesturesManager } from "../core/touch";
styleUrls: ["./navigation-drawer.component.scss"],
templateUrl: "navigation-drawer.component.html"
})
-export class IgxNavigationDrawer extends BaseComponent implements IToggleView,
+export class IgxNavigationDrawerComponent extends BaseComponent implements IToggleView,
OnInit,
AfterContentInit,
OnDestroy,
@@ -54,34 +54,34 @@ export class IgxNavigationDrawer extends BaseComponent implements IToggleView,
/**
* Position of the Navigation Drawer. Can be "left"(default) or "right". Only has effect when not pinned.
*/
- @Input() public position: string = "left";
+ @Input() public position = "left";
/**
* Enables the use of touch gestures to manipulate the drawer - such as swipe/pan from edge to open,
* swipe toggle and pan drag.
*/
- @Input() public enableGestures: boolean = true;
+ @Input() public enableGestures = true;
/** State of the drawer. */
- @Input() public isOpen: boolean = false;
+ @Input() public isOpen = false;
/** Pinned state of the drawer. Currently only support */
- @Input() public pin: boolean = false;
+ @Input() public pin = false;
/**
* Minimum device width required for automatic pin to be toggled.
* Deafult is 1024, can be set to falsy value to ignore.
*/
- @Input() public pinThreshold: number = 1024;
+ @Input() public pinThreshold = 1024;
/**
- * Width of the drawer in its open state. Defaults to 300px based on the `.ig-nav-drawer` style.
+ * Width of the drawer in its open state. Defaults to 300px based on the `.igx-nav-drawer` style.
* Can be used to override or dynamically modify the width.
*/
@Input() public width: string;
/**
- * Width of the drawer in its mini state. Defaults to 60px based on the `.ig-nav-drawer.mini` style.
+ * Width of the drawer in its mini state. Defaults to 60px based on the `.igx-nav-drawer.mini` style.
* Can be used to override or dynamically modify the width.
*/
@Input() public miniWidth: string;
@@ -97,15 +97,15 @@ export class IgxNavigationDrawer extends BaseComponent implements IToggleView,
/** Event fired when the Navigation Drawer has closed. */
@Output() public closed = new EventEmitter();
- public _hasMimiTempl: boolean = false;
- private _gesturesAttached: boolean = false;
+ public _hasMimiTempl = false;
+ private _gesturesAttached = false;
private _widthCache: { width: number, miniWidth: number } = { width: null, miniWidth: null };
private _resizeObserver: Subscription;
private css: { [name: string]: string; } = {
- drawer: "ig-nav-drawer",
+ drawer: "igx-nav-drawer",
mini: "mini",
- miniProjection: ".ig-drawer-mini-content",
- overlay: "ig-nav-drawer-overlay",
+ miniProjection: ".igx-drawer-mini-content",
+ overlay: "igx-nav-drawer-overlay",
styleDummy: "style-dummy"
};
private _resolveOpen: (value?: any | PromiseLike) => void;
@@ -135,7 +135,7 @@ export class IgxNavigationDrawer extends BaseComponent implements IToggleView,
}
/** Pan animation properties */
- private _panning: boolean = false;
+ private _panning = false;
private _panStartWidth: number;
private _panLimit: number;
private _previousDeltaX: number;
@@ -147,7 +147,7 @@ export class IgxNavigationDrawer extends BaseComponent implements IToggleView,
return this.pin || this._hasMimiTempl;
}
- private _maxEdgeZone: number = 50;
+ private _maxEdgeZone = 50;
/**
* Used for touch gestures (swipe and pan).
* Defaults to 50 (in px) and is extended to at least 110% of the mini template width if available.
@@ -609,8 +609,8 @@ export class IgxNavigationDrawer extends BaseComponent implements IToggleView,
}
@NgModule({
- declarations: [IgxNavigationDrawer],
- exports: [IgxNavigationDrawer]
+ declarations: [IgxNavigationDrawerComponent],
+ exports: [IgxNavigationDrawerComponent]
})
export class IgxNavigationDrawerModule {
}
diff --git a/src/progressbar/circularbar.component.spec.ts b/src/progressbar/circularbar.component.spec.ts
index 552b2430c76..a8a33c846e6 100644
--- a/src/progressbar/circularbar.component.spec.ts
+++ b/src/progressbar/circularbar.component.spec.ts
@@ -6,23 +6,23 @@ import {
tick
} from "@angular/core/testing";
import { By } from "@angular/platform-browser";
-import { IgxCircularProgressBar } from "./progressbar.component";
+import { IgxCircularProgressBarComponent } from "./progressbar.component";
describe("IgCircularBar", () => {
const tickTime = 2000;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
- InitCircularProgressBar,
- CircularBar,
- IgxCircularProgressBar
+ InitCircularProgressBarComponent,
+ CircularBarComponent,
+ IgxCircularProgressBarComponent
]
})
.compileComponents();
}));
it("Initialize circularProgressbar with default values", fakeAsync(() => {
- const fixture = TestBed.createComponent(InitCircularProgressBar);
+ const fixture = TestBed.createComponent(InitCircularProgressBarComponent);
tick(tickTime);
fixture.detectChanges();
@@ -40,7 +40,7 @@ describe("IgCircularBar", () => {
it("should set value to 0 for negative numbers", fakeAsync(() => {
const negativeValue = -20;
const expectedValue = 0;
- const fixture = TestBed.createComponent(InitCircularProgressBar);
+ const fixture = TestBed.createComponent(InitCircularProgressBarComponent);
tick(tickTime);
fixture.detectChanges();
tick(tickTime);
@@ -58,7 +58,7 @@ describe("IgCircularBar", () => {
it("If passed value is higher then max it should stay equal to maximum (default max size)", fakeAsync(() => {
const progressBarValue = 120;
const expectedMaxValue = 100;
- const fixture = TestBed.createComponent(InitCircularProgressBar);
+ const fixture = TestBed.createComponent(InitCircularProgressBarComponent);
fixture.componentInstance.circularBar.value = 11;
tick(tickTime);
fixture.detectChanges();
@@ -77,7 +77,7 @@ describe("IgCircularBar", () => {
it("If passed value is higher then max it should stay equal to maximum (custom max size)", fakeAsync(() => {
const progressBarMaxValue = 150;
const progressBarValue = 170;
- const fixture = TestBed.createComponent(InitCircularProgressBar);
+ const fixture = TestBed.createComponent(InitCircularProgressBarComponent);
tick(tickTime);
fixture.detectChanges();
tick(tickTime);
@@ -96,7 +96,7 @@ describe("IgCircularBar", () => {
it("should not update value if max is updated", fakeAsync(() => {
let progressBarMaxValue = 150;
const progressBarValue = 120;
- const fixture = TestBed.createComponent(InitCircularProgressBar);
+ const fixture = TestBed.createComponent(InitCircularProgressBarComponent);
tick(tickTime);
fixture.detectChanges();
@@ -123,7 +123,7 @@ describe("IgCircularBar", () => {
}));
it("Should update value when we try to decrease it", fakeAsync(() => {
- const fixture = TestBed.createComponent(CircularBar);
+ const fixture = TestBed.createComponent(CircularBarComponent);
const progressBar = fixture.componentInstance.circularBar;
let expectedValue = 50;
@@ -146,7 +146,7 @@ describe("IgCircularBar", () => {
}));
it("Should update value when we try to decrease it (without animation)", fakeAsync(() => {
- const fixture = TestBed.createComponent(CircularBar);
+ const fixture = TestBed.createComponent(CircularBarComponent);
const progressBar = fixture.componentInstance.circularBar;
let expectedValue = 50;
@@ -166,7 +166,7 @@ describe("IgCircularBar", () => {
// UI TESTS
it("The value representation should respond to passed value correctly", fakeAsync(() => {
- const fixture = TestBed.createComponent(CircularBar);
+ const fixture = TestBed.createComponent(CircularBarComponent);
const expectedValue = 30;
@@ -189,7 +189,7 @@ describe("IgCircularBar", () => {
}));
it("The max representation should respond correctly to passed maximum value", fakeAsync(() => {
- const fixture = TestBed.createComponent(CircularBar);
+ const fixture = TestBed.createComponent(CircularBarComponent);
const expectedValue = 30;
@@ -219,8 +219,8 @@ describe("IgCircularBar", () => {
});
@Component({ template: `
`
})
-class CircularBar {
- @ViewChild(IgxCircularProgressBar) public progressbar: IgxCircularProgressBar;
+class CircularBarComponent {
+ @ViewChild(IgxCircularProgressBarComponent) public progressbar: IgxCircularProgressBarComponent;
@ViewChild("wrapper") public wrapper;
@ViewChild("circularBar") public circularBar;
- public value: number = 30;
- public max: number = 100;
- public animate: boolean = true;
+ public value = 30;
+ public max = 100;
+ public animate = true;
}
diff --git a/src/progressbar/linearbar.component.spec.ts b/src/progressbar/linearbar.component.spec.ts
index 8c78610e693..dc6e291b7dc 100644
--- a/src/progressbar/linearbar.component.spec.ts
+++ b/src/progressbar/linearbar.component.spec.ts
@@ -6,23 +6,23 @@ import {
tick
} from "@angular/core/testing";
import { By } from "@angular/platform-browser";
-import { IgxLinearProgressBar } from "./progressbar.component";
+import { IgxLinearProgressBarComponent } from "./progressbar.component";
describe("IgLinearBar", () => {
const tickTime = 2000;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
- InitLinearProgressBar,
- LinearBar,
- IgxLinearProgressBar
+ InitLinearProgressBarComponent,
+ LinearBarComponent,
+ IgxLinearProgressBarComponent
]
})
.compileComponents();
}));
it("should initialize linearProgressbar with default values", fakeAsync(() => {
- const fixture = TestBed.createComponent(InitLinearProgressBar);
+ const fixture = TestBed.createComponent(InitLinearProgressBarComponent);
tick(tickTime);
fixture.detectChanges();
@@ -44,7 +44,7 @@ describe("IgLinearBar", () => {
it("should set value to 0 for negative values", fakeAsync(() => {
const negativeValue = -20;
const expectedValue = 0;
- const fixture = TestBed.createComponent(InitLinearProgressBar);
+ const fixture = TestBed.createComponent(InitLinearProgressBarComponent);
tick(tickTime);
fixture.detectChanges();
@@ -63,7 +63,7 @@ describe("IgLinearBar", () => {
it("If passed value is higher then max it should stay equal to maximum (default max size)", fakeAsync(() => {
const progressBarValue = 120;
const expectedMaxValue = 100;
- const fixture = TestBed.createComponent(InitLinearProgressBar);
+ const fixture = TestBed.createComponent(InitLinearProgressBarComponent);
tick(tickTime);
fixture.detectChanges();
@@ -83,7 +83,7 @@ describe("IgLinearBar", () => {
"(custom max size and without animation)", fakeAsync(() => {
const progressBarMaxValue = 150;
const progressBarValue = 170;
- const fixture = TestBed.createComponent(InitLinearProgressBar);
+ const fixture = TestBed.createComponent(InitLinearProgressBarComponent);
fixture.detectChanges();
@@ -100,7 +100,7 @@ describe("IgLinearBar", () => {
it("should not update value if max is decreased", fakeAsync(() => {
let progressBarMaxValue = 200;
const progressBarValue = 80;
- const fixture = TestBed.createComponent(InitLinearProgressBar);
+ const fixture = TestBed.createComponent(InitLinearProgressBarComponent);
tick(tickTime);
fixture.detectChanges();
@@ -129,7 +129,7 @@ describe("IgLinearBar", () => {
it("should not update value if max is increased (without animation)", fakeAsync(() => {
let progressBarMaxValue = 100;
const progressBarValue = 50;
- const fixture = TestBed.createComponent(InitLinearProgressBar);
+ const fixture = TestBed.createComponent(InitLinearProgressBarComponent);
fixture.detectChanges();
@@ -151,7 +151,7 @@ describe("IgLinearBar", () => {
}));
it("Should update value when we try to decrese it", fakeAsync(() => {
- const fixture = TestBed.createComponent(LinearBar);
+ const fixture = TestBed.createComponent(LinearBarComponent);
const progressBar = fixture.componentInstance.linearBar;
let expectedValue = 50;
@@ -174,7 +174,7 @@ describe("IgLinearBar", () => {
}));
it("Should update value when we try to decrease it (without animation)", fakeAsync(() => {
- const fixture = TestBed.createComponent(LinearBar);
+ const fixture = TestBed.createComponent(LinearBarComponent);
const progressBar = fixture.componentInstance.linearBar;
let expectedValue = 50;
@@ -195,7 +195,7 @@ describe("IgLinearBar", () => {
// UI Tests
it("The percentage representation should respond to passed value correctly", fakeAsync(() => {
- const fixture = TestBed.createComponent(LinearBar);
+ const fixture = TestBed.createComponent(LinearBarComponent);
const expectedValue = 30;
@@ -206,7 +206,7 @@ describe("IgLinearBar", () => {
tick(tickTime);
const progressBarElem = fixture.componentInstance.linearBar.elementRef.nativeElement
- .querySelectorAll('[class*="progress-linear__bar--"]')[0];
+ .querySelectorAll("[class*='progress-linear__bar--']")[0];
fixture.detectChanges();
@@ -215,11 +215,11 @@ describe("IgLinearBar", () => {
}));
it("Should change class suffix which would be relevant to the type that had been passed", fakeAsync(() => {
- const fixture = TestBed.createComponent(LinearBar);
+ const fixture = TestBed.createComponent(LinearBarComponent);
fixture.detectChanges();
const progressBarElem = fixture.componentInstance.linearBar.elementRef.nativeElement
- .querySelectorAll('[class*="progress-linear__bar--"]')[0];
+ .querySelectorAll("[class*='progress-linear__bar--']")[0];
expect(progressBarElem.classList.contains("progress-linear__bar--default")).toBeTruthy();
@@ -230,7 +230,7 @@ describe("IgLinearBar", () => {
}));
it("Change progressbar style to be striped", fakeAsync(() => {
- const fixture = TestBed.createComponent(LinearBar);
+ const fixture = TestBed.createComponent(LinearBarComponent);
fixture.detectChanges();
const progressElem = fixture.componentInstance.linearBar.elementRef.nativeElement
@@ -245,13 +245,13 @@ describe("IgLinearBar", () => {
}));
it("should stay striped when the type has changed", fakeAsync(() => {
- const fixture = TestBed.createComponent(LinearBar);
+ const fixture = TestBed.createComponent(LinearBarComponent);
fixture.detectChanges();
const progressElem = fixture.componentInstance.linearBar.elementRef.nativeElement
.getElementsByClassName("progress-linear")[0];
const progressBarElem = fixture.componentInstance.linearBar.elementRef.nativeElement
- .querySelectorAll('[class*="progress-linear__bar--"]')[0];
+ .querySelectorAll("[class*='progress-linear__bar--']")[0];
fixture.componentInstance.striped = true;
fixture.detectChanges();
@@ -268,8 +268,8 @@ describe("IgLinearBar", () => {
});
@Component({ template: `
@@ -277,14 +277,14 @@ class InitLinearProgressBar {
[animate]="animate" [type]="type" [striped]="striped">
` })
-class LinearBar {
- @ViewChild(IgxLinearProgressBar) public progressbar: IgxLinearProgressBar;
+class LinearBarComponent {
+ @ViewChild(IgxLinearProgressBarComponent) public progressbar: IgxLinearProgressBarComponent;
@ViewChild("wrapper") public wrapper;
@ViewChild("linearBar") public linearBar;
- public value: number = 30;
- public max: number = 100;
- public type: string = "default";
- public striped: boolean = false;
- public animate: boolean = true;
+ public value = 30;
+ public max = 100;
+ public type = "default";
+ public striped = false;
+ public animate = true;
}
diff --git a/src/progressbar/progressbar.component.ts b/src/progressbar/progressbar.component.ts
index b068ce20eec..285f2958c1d 100644
--- a/src/progressbar/progressbar.component.ts
+++ b/src/progressbar/progressbar.component.ts
@@ -15,8 +15,8 @@ import {
export abstract class BaseProgress {
protected requestAnimationId: number = undefined;
- protected _valueInPercent: number = 0;
- protected _max: number = 100;
+ protected _valueInPercent = 0;
+ protected _max = 100;
protected _value = 0;
protected _animate = true;
@@ -71,10 +71,10 @@ export abstract class BaseProgress {
styleUrls: ["progressbar.component.scss"],
templateUrl: "templates/linear-bar.component.html"
})
-export class IgxLinearProgressBar extends BaseProgress {
+export class IgxLinearProgressBarComponent extends BaseProgress {
- @Input() public striped: boolean = false;
- @Input() public type: string = "default";
+ @Input() public striped = false;
+ @Input() public type = "default";
@Input()
set animate(animate: boolean) {
this._animate = animate;
@@ -130,7 +130,7 @@ export class IgxLinearProgressBar extends BaseProgress {
styleUrls: ["progressbar.component.scss"],
templateUrl: "templates/circular-bar.component.html"
})
-export class IgxCircularProgressBar extends BaseProgress implements AfterViewInit {
+export class IgxCircularProgressBarComponent extends BaseProgress implements AfterViewInit {
@Output() public onProgressChanged = new EventEmitter();
@@ -180,7 +180,7 @@ export class IgxCircularProgressBar extends BaseProgress implements AfterViewIni
this.onProgressChanged.emit(changedValues);
}
- private _radius: number = 0;
+ private _radius = 0;
private _circumference: number;
@ViewChild("circle") private _svgCircle: ElementRef;
@@ -240,8 +240,8 @@ export function convertInPercentage(value: number, max: number) {
}
@NgModule({
- declarations: [IgxLinearProgressBar, IgxCircularProgressBar],
- exports: [IgxLinearProgressBar, IgxCircularProgressBar],
+ declarations: [IgxLinearProgressBarComponent, IgxCircularProgressBarComponent],
+ exports: [IgxLinearProgressBarComponent, IgxCircularProgressBarComponent],
imports: [CommonModule]
})
export class IgxProgressBarModule {
diff --git a/src/radio/radio.component.spec.ts b/src/radio/radio.component.spec.ts
index 87151db2044..394f431e592 100644
--- a/src/radio/radio.component.spec.ts
+++ b/src/radio/radio.component.spec.ts
@@ -5,16 +5,16 @@ import {
} from "@angular/core/testing";
import { FormsModule } from "@angular/forms";
import { By } from "@angular/platform-browser";
-import { IgxRadio } from "./radio.component";
+import { IgxRadioComponent } from "./radio.component";
describe("IgRadio", () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
- InitRadio,
- RadioWithModel,
- IgxRadio
+ InitRadioComponent,
+ RadioWithModelComponent,
+ IgxRadioComponent
],
imports: [FormsModule]
})
@@ -22,7 +22,7 @@ describe("IgRadio", () => {
}));
it("Init a radio", () => {
- const fixture = TestBed.createComponent(InitRadio);
+ const fixture = TestBed.createComponent(InitRadioComponent);
fixture.detectChanges();
const nativeRadio = fixture.debugElement.query(By.css("input")).nativeElement;
@@ -35,7 +35,7 @@ describe("IgRadio", () => {
});
it("Binding to ngModel", async(() => {
- const fixture = TestBed.createComponent(RadioWithModel);
+ const fixture = TestBed.createComponent(RadioWithModelComponent);
fixture.detectChanges();
const radios = fixture.componentInstance.radios.toArray();
@@ -59,7 +59,7 @@ describe("IgRadio", () => {
});
@Component({ template: `