Merge branch 'master' into observable_card_container

# Conflicts:
#	source/ui.module.ts

Author: KorinaGraber

bootstrapper/bootstrapper.css

@@ -0,0 +1,7 @@
+.rl-tab-item.error {
+	color: red;
+}
+
+.rl-tab-item.current {
+	color: blue;
+}

bootstrapper/forms/formsNg2.html

@@ -4,7 +4,7 @@ <h5>Form with validation</h5>
 <rlForm [save]="waitCallback">
 	<rlTextbox rlRequired="This is a required field" label="Required textbox" maxlength="10"></rlTextbox>
 	<rlValidationGroup [model]="rating" [validator]="validator">
-		<rlUserRating [(value)]="rating" [range]="3"></rlUserRating>
+		<rlUserRating [value]="rating" (valueChange)="setRating($event)" [range]="3"></rlUserRating>
 	</rlValidationGroup>
 	<rlButtonSubmit>Submit</rlButtonSubmit>
 </rlForm>
@@ -27,7 +27,7 @@ <h5>Form with names</h5>
 	<rlButtonSubmit rightAligned="true">Submit right</rlButtonSubmit>
 </rlForm>
 <h5>Autosave form</h5>
-<rlBusy [loading]="autosaveAction.saving || autosaveAction.complete"></rlBusy>
+<rlBusy [loading]="(autosaveAction.saving$ | async) || (autosaveAction.complete$ | async)"></rlBusy>
 <rlForm #autosaveForm [save]="waitCallback" rlAutosave [saveWhenInvalid]="true">
 	<rlTextbox name="textbox1" label="Autosave textbox" rlRequired="Required textbox"></rlTextbox>
 </rlForm>

bootstrapper/forms/formsNg2Bootstrapper.ts

@@ -1,4 +1,5 @@
 import { Component, ViewChild } from '@angular/core';
+import { Observable, BehaviorSubject } from 'rxjs';
 
 import { FormComponent } from '../../source/components/form/form';
 import { AutosaveActionService } from '../../source/services/autosaveAction/autosaveAction.service';
@@ -12,6 +13,7 @@ export class FormsBootstrapper {
 	rating: number;
 	validator: any;
 	brokenValidator: any;
+	rating$: BehaviorSubject<any>;
 
 	@ViewChild('testForm') testForm: FormComponent;
 
@@ -20,16 +22,21 @@ export class FormsBootstrapper {
 	constructor(autosaveAction: AutosaveActionService) {
 		this.autosaveAction = autosaveAction;
 
+		this.rating$ = new BehaviorSubject(null);
+
 		this.validator = {
-			validate: () => this.rating >= 3,
-			errorMessage: 'You must give at least 3 stars',
+			validate: () => this.rating$.map(rating => rating >= 3 ? null : 'You must give at least 3 stars'),
 		};
 		this.brokenValidator = {
-			validate: () => false,
-			errorMessage: null,
+			validate: () => Observable.of('error'),
 		};
 	}
 
+	setRating(rating): void {
+		this.rating = rating;
+		this.rating$.next(rating);
+	}
+
 	waitCallback: { (data: any): Promise<void> } = (data: any) => {
 		return new Promise<void>((resolve: Function, reject: Function): void => {
 			setTimeout(() => {
@@ -45,4 +52,4 @@ export class FormsBootstrapper {
 		}
 		return false;
 	}
-}
+}

bootstrapper/inputs/inputsNg1.html

@@ -88,7 +88,7 @@ <h3><a href="https://github.com/SamGraber/TypeScript-Angular-Components/blob/mas
 
 <div>
 	<label><a href="https://github.com/SamGraber/TypeScript-Angular-Components/tree/master/source/behaviors/required/required.md">Required input</a>:</label>
-	<rl-textbox ng-model="input.requiredText" rl-required="Input required"></rl-textbox>
+	<rl-textbox ng-model="input.requiredText" warning="true"></rl-textbox>
 </div>
 <div>
 	<label>One validator:</label>

bootstrapper/inputs/inputsNg2.html

@@ -34,7 +34,7 @@ <h3><a href="https://github.com/SamGraber/TypeScript-Angular-Components/blob/mas
 	<rlSelect [(value)]="selection" label="Select" [options]="options" transform="value">
 		<template let-option>#{{option.value}}</template>
 	</rlSelect>
-	<rlSelect name="select1" label="Select" [options]="optionsAsync" transform="value" rlRequired="Required select" nullOption="None"></rlSelect>
+	<rlSelect name="select1" label="Select" [options]="optionsAsync | async" transform="value" rlRequired="Required select" nullOption="None"></rlSelect>
 	<rlSelect [value]="selection" (change)="log($event)" label="Output event" [options]="options" transform="value"></rlSelect>
 </div>
 <div>

bootstrapper/msi/msi.ng2.html

@@ -1,6 +1,12 @@
 <h3>Multi Step Indicator Angular 2</h3>
 <rlMultiStepIndicator
-    [numbered]="numbered"
-    [checked]="checked"
-    [steps]="steps">
+	[numbered]="numbered"
+	[checked]="checked"
+	[steps]="steps">
 </rlMultiStepIndicator>
+<h3>rlStep</h3>
+<rlStep title="Inputs"
+		link="/inputs/ng2"
+		[valid]="false"></rlStep>
+<rlStep title="MSI"
+		link="../ng2"></rlStep>

index.html

@@ -11,6 +11,7 @@
 		<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
 		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
 		<link rel="stylesheet" href="/dist/components.css">
+		<link rel="stylesheet" href="/bootstrapper/bootstrapper.css">
 
 		<div>
 			<ts-app></ts-app>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "typescript-angular-components",
-  "version": "3.3.0",
+  "version": "3.7.2",
   "description": "Reusable responsive angular components",
   "author": "Renovo Development Team",
   "keywords": [
@@ -47,7 +47,7 @@
     "bundle-deps": "gulp bundle-bootstrapper-vendor && gulp bundle-bootstrapper-renovo && gulp bundle-tests-vendor && gulp bundle-tests-renovo"
   },
   "devDependencies": {
-    "@renovolive/gulp-utilities": "~2.3.0",
+    "@renovolive/gulp-utilities": "~2.4.0",
     "chai": "~3.5.0",
     "concurrently": "~2.0.0",
     "del": "^2.2.0",
@@ -93,7 +93,7 @@
     "@types/jquery": "^2.0.32",
     "@types/jquery.jsignature": "^2.0.28",
     "@types/lodash": "^4.14.36",
-    "@types/moment-timezone": "^0.2.31",
+    "@types/moment-timezone": "0.2.31",
     "@types/sinon": "^1.16.31",
     "angular": "~1.5.3",
     "angular-animate": "~1.5.3",
@@ -112,8 +112,7 @@
     "rl-http": "~1.2.0",
     "rxjs": "5.0.0-beta.12",
     "systemjs": "^0.19.28",
-    "typescript": "^2.0.3",
-    "typescript-angular-utilities": "~3.8.0",
+    "typescript-angular-utilities": "~3.9.0",
     "ui-select": "~0.14.7",
     "zone.js": "~0.6.25"
   },

source/animations/index.ts

@@ -0,0 +1,5 @@
+import * as slide from './slide/slide.animate';
+
+export {
+	slide,
+}

source/animations/slide/slide.animate.ts

@@ -0,0 +1,17 @@
+import { AnimationEntryMetadata, trigger, state, style, transition, animate } from '@angular/core';
+
+export const show: string = 'show';
+export const hide: string = 'hide';
+
+export const animation = trigger('slide', [
+	state(hide, style({
+		zIndex: 1,
+		opacity: 0,
+		transform: 'translateY(100%)',
+	})),
+	state(show, style({
+		opacity: 1,
+		transform: 'translateY(0)',
+	})),
+	transition(`${hide} <=> ${show}`, animate('250ms ease')),
+]);

source/behaviors/autosave/autosave.tests.ts

@@ -6,7 +6,8 @@ import { services } from 'typescript-angular-utilities';
 import { AutosaveDirective, DEFAULT_AUTOSAVE_DEBOUNCE } from './autosave';
 
 interface IFormMock {
-	form: { statusChanges: Subject<void> };
+	dirty: boolean;
+	form: {	statusChanges: Subject<void> };
 	validate: Sinon.SinonSpy;
 	submitAndWait: Sinon.SinonSpy;
 	saveForm: Sinon.SinonSpy;
@@ -23,7 +24,10 @@ describe('AutosaveDirective', () => {
 
 	beforeEach(() => {
 		form = {
-			form: { statusChanges: new Subject<void>() },
+			dirty: true,
+			form: {
+				statusChanges: new Subject<void>(),
+			},
 			validate: sinon.spy(() => true),
 			submitAndWait: sinon.spy(),
 			saveForm: sinon.spy(),
@@ -89,6 +93,19 @@ describe('AutosaveDirective', () => {
 			sinon.assert.notCalled(autosaveSpy);
 		}));
 
+		it('should not trigger an autosave if the form is pristine', rlFakeAsync(() => {
+			const autosaveSpy = sinon.spy();
+			autosave.autosave = autosaveSpy;
+			form.dirty = false;
+
+			autosave.setDebounce();
+
+			rlTick(DEFAULT_AUTOSAVE_DEBOUNCE);
+			flushMicrotasks();
+
+			sinon.assert.notCalled(autosaveSpy);
+		}));
+
 		it('should still trigger an autosave if the form is invalid but saveWhenInvalid is enabled', rlFakeAsync(() => {
 			const autosaveSpy = sinon.spy();
 			autosave.autosave = autosaveSpy;

source/behaviors/autosave/autosave.ts

@@ -34,7 +34,7 @@ export class AutosaveDirective implements AfterViewInit {
 	}
 
 	setDebounce = (): void => {
-		if (!this.timer && (this.saveWhenInvalid || this.form.validate())) {
+		if (!this.timer && this.form.dirty && (this.saveWhenInvalid || this.form.validate())) {
 			this.timer = this.timeoutService.setTimeout(this.autosave, DEFAULT_AUTOSAVE_DEBOUNCE)
 											.catch(() => null);
 		}

source/components/cardContainer/cardContainer.ng1.html

@@ -39,7 +39,7 @@
 					</template>
 				</rl-generic-container>
 
-				<div class="alert alert-info" ng-show="!cardContainer.hasItems">
+				<div class="alert alert-info" ng-show="cardContainer.dataSource.needsRefinedSearch">
 					Please refine your search results
 				</div>
 				<div class="alert alert-info" ng-show="cardContainer.dataSource.isEmpty">

source/components/cardContainer/cardContainer.ng1.tests.ts

@@ -592,27 +592,6 @@ describe('CardContainerController', () => {
 		});
 	});
 
-	describe('hasItems', (): void => {
-		it('should return true if the data set is not empty', (): void => {
-			let dataSource: IDataSourceMock;
-			dataSource = buildMockedDataSource();
-			dataSource.rawDataSet = [
-				{ id: 0 },
-				{ id: 1 },
-			];
-			dataSource.dataSet = dataSource.rawDataSet;
-			buildController();
-
-			cardContainer.dataSource.dataSet = [];
-
-			expect(cardContainer.hasItems).to.be.false;
-
-			cardContainer.dataSource.dataSet = [1];
-
-			expect(cardContainer.hasItems).to.be.true;
-		});
-	});
-
 	function buildController(): void {
 		if (cardContainer.dataSource == null && builder._dataSource == null) {
 			mockedDataSource = buildMockedDataSource();

source/components/cardContainer/cardContainer.ng1.ts

@@ -240,10 +240,6 @@ export class CardContainerController {
 		this.selectionChangedEvent();
 	}
 
-	get hasItems(): boolean {
-		return this.dataSource.dataSet && !!this.dataSource.dataSet.length;
-	}
-
 	private syncFilters(): void {
 		if (!this.object.isNullOrEmpty(this.filters)) {
 			this.dataSource.filters = this.filters;

source/components/cardContainer/dataSources/simpleDataSource/simpleDataSource.service.ts

@@ -14,6 +14,7 @@ export class SimpleDataSource<TDataType> extends DataSourceBaseOld<TDataType> {
 		super(dataSourceProcessor, array);
 		this.countFilterGroups = false;
 		this.rawDataSet = data;
+		this.isEmpty = !(data && data.length);
 		this.processData();
 	}
 }

source/components/inputs/absoluteTime/absoluteTime.html

@@ -1,10 +1,14 @@
 <div class="field input-group"
-	[class.error]="!control.valid"
+	[class.warning]="warning"
+	[class.error]="componentValidator.error$ | async"
 	(offClick)="closeTimes()">
-	<label class="label-slide angular-animate" [hidden]="!(value && label)">{{label}}</label>
+	<label [@slide]="labelState">{{label}}</label>
 	<input type="text"
-		   class="form-control angular-animate"
+		   class="form-control"
+		   [class.hide-placeholder]="hidePlaceholder"
 		   [value]="displayTime"
+		   (focus)="showLabel()"
+		   (blur)="hideLabelIfEmpty()"
 		   (click)="toggleTimes()"
 		   [placeholder]="label"
 		   [disabled]="disabled" />
@@ -42,7 +46,7 @@
 			</div>
 		</div>
 	</div>
-	<div [hidden]="control.valid" class="error-string">
-		{{componentValidator.error}}
+	<div *ngIf="componentValidator.error$ | async" class="error-string">
+		{{componentValidator.error$ | async}}
 	</div>
-</div>
+</div>

source/components/inputs/absoluteTime/absoluteTime.tests.ts

@@ -1,3 +1,4 @@
+import { Observable } from 'rxjs';
 import { services } from 'typescript-angular-utilities';
 import __time = services.time;
 import __object = services.object;
@@ -14,8 +15,8 @@ describe('AbsoluteTimeComponent', () => {
 
 	beforeEach(() => {
 		const validator: any = {
-			validate: sinon.spy(),
-			setValidators: sinon.spy(),
+			validate: sinon.spy(() => Observable.empty()),
+			initValidator: sinon.spy(),
 		};
 		setValue = sinon.spy();
 

source/components/inputs/absoluteTime/absoluteTime.ts

@@ -12,12 +12,15 @@ import { ValidatedInputComponent, validationInputs, baseOutputs } from '../valid
 import { ComponentValidator } from '../../../services/componentValidator/componentValidator.service';
 import { FormComponent } from '../../form/form';
 
+import { baseAnimations } from '../input';
+
 @Component({
 	selector: 'rlAbsoluteTime',
 	template: require('./absoluteTime.html'),
 	inputs: validationInputs,
 	outputs: baseOutputs,
 	providers: [ComponentValidator],
+	animations: baseAnimations,
 })
 export class AbsoluteTimeComponent extends ValidatedInputComponent<string> implements OnInit {
 	@Input() minuteInterval: number = 15;

source/components/inputs/dateTime/dateTime.html

@@ -1,12 +1,16 @@
 <div class="field date-time"
+	 [class.warning]="warning"
 	 [class.has-warning]="!validFormat"
-	 [class.error]="!control.valid"
+	 [class.error]="componentValidator.error$ | async"
 	 [class.datepicker-with-clear]="showClear">
 	<span #datepicker class="datepicker-input-group">
-		<label class="label-slide angular-animate" [hidden]="!(value && label)">{{label}}</label>
+		<label [@slide]="labelState">{{label}}</label>
 		<input type="text"
 			   #dateinput
 			   class="form-control"
+			   [class.hide-placeholder]="hidePlaceholder"
+			   (focus)="showLabel()"
+			   (blur)="hideLabelIfEmpty()"
 			   [value]="valueAsString"
 			   [placeholder]="label"
 			   [disabled]="disabled" />
@@ -21,7 +25,7 @@
 			<i class="fa fa-times"></i>
 		</rlButton>
 	</span>
-	<div [hidden]="control.valid" class="error-string">
-		{{componentValidator.error}}
+	<div *ngIf="componentValidator.error$ | async" class="error-string">
+		{{componentValidator.error$ | async}}
 	</div>
-</div>
+</div>

source/components/inputs/dateTime/dateTime.ng1.html

@@ -1,4 +1,4 @@
-<div class="field date-time" ng-class="{ 'has-warning': !dateTime.validFormat, 'error': dateTime.ngModel.$invalid, 'datepicker-with-clear': dateTime.clearButton }">
+<div class="field date-time" ng-class="{ 'has-warning': !dateTime.validFormat, 'warning': input.warning, 'error': dateTime.ngModel.$invalid, 'datepicker-with-clear': dateTime.clearButton }">
 	<span class="show-date-picker datepicker-input-group">
 		<label class="label-slide angular-animate" ng-show="dateTime.ngModel.$viewValue | isEmpty:false && dateTime.label">{{dateTime.label}}</label>
 		<input type="text" class="form-control" ng-model="dateTime.ngModel.$viewValue" placeholder="{{dateTime.label}}"/>