@wizni/quiver
Version:
Quiver- Angular frontend development tools.
1,356 lines (1,355 loc) • 344 kB
JavaScript
/**
* @license Wizni Quiver v1.0.0
* Copyright (c) 2017 Wizni, Inc. https://wizni.com/
* License: MIT
*/
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/forms'), require('@angular/common'), require('@angular/material'), require('rxjs/Observable'), require('rxjs/Subject'), require('rxjs/add/observable/timer'), require('rxjs/add/operator/debounceTime'), require('@angular/animations/browser'), require('@angular/animations'), require('@angular/router'), require('@angular/platform-browser'), require('@angular/http'), require('rxjs/add/operator/skip'), require('highlight.js/lib')) :
typeof define === 'function' && define.amd ? define(['exports', '@angular/core', '@angular/forms', '@angular/common', '@angular/material', 'rxjs/Observable', 'rxjs/Subject', 'rxjs/add/observable/timer', 'rxjs/add/operator/debounceTime', '@angular/animations/browser', '@angular/animations', '@angular/router', '@angular/platform-browser', '@angular/http', 'rxjs/add/operator/skip', 'highlight.js/lib'], factory) :
(factory((global.wq = global.wq || {}, global.wq.quiver = global.wq.quiver || {}),global.ng.core,global.ng.forms,global.ng.common,global.ng.material,global.Rx,global.Rx,global.Rx.Observable,global.Rx.Observable.prototype,global.ng.animations.browser,global.ng.animations,global.ng.router,global.ng.platformBrowser,global.ng.http,global.Rx.Observable.prototype,global.hljs));
}(this, (function (exports,_angular_core,_angular_forms,_angular_common,_angular_material,rxjs_Observable,rxjs_Subject,rxjs_add_observable_timer,rxjs_add_operator_debounceTime,_angular_animations_browser,_angular_animations,_angular_router,_angular_platformBrowser,_angular_http,rxjs_add_operator_skip,highlight_js_lib) { 'use strict';
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
/**
* @license Wizni Quiver v1.0.0
* Copyright (c) 2017 Wizni, Inc. https://wizni.com/
* License: MIT
*/
var noop = function () {
// empty method
};
var TD_CHIPS_CONTROL_VALUE_ACCESSOR = {
provide: _angular_forms.NG_VALUE_ACCESSOR,
useExisting: _angular_core.forwardRef(function () { return TdChipsComponent; }),
multi: true
};
var TdChipsComponent = (function () {
function TdChipsComponent() {
/**
* Implemented as part of ControlValueAccessor.
*/
this._value = [];
this._length = 0;
this._requireMatch = false;
this._readOnly = false;
this._chipAddition = true;
/**
* Boolean value that specifies if the input is valid against the provieded list.
*/
this.matches = true;
/**
* Flag that is true when autocomplete is focused.
*/
this.focused = false;
/**
* FormControl for the mdInput element.
*/
this.inputControl = new _angular_forms.FormControl();
/**
* Subject to control what items to render in the autocomplete
*/
this.subject = new rxjs_Subject.Subject();
/**
* Observable of items to render in the autocomplete
*/
this.filteredItems = this.subject.asObservable();
/**
* items?: string[]
* Enables Autocompletion with the provided list of strings.
*/
this.items = [];
/**
* add?: function
* Method to be executed when string is added as chip through the autocomplete.
* Sends chip value as event.
*/
this.add = new _angular_core.EventEmitter();
/**
* remove?: function
* Method to be executed when string is removed as chip with the "remove" button.
* Sends chip value as event.
*/
this.remove = new _angular_core.EventEmitter();
this.onChange = function (_) { return noop; };
this.onTouched = function () { return noop; };
}
Object.defineProperty(TdChipsComponent.prototype, "requireMatch", {
/**
* @return {?}
*/
get: function () {
return this._requireMatch;
},
/**
* requireMatch?: boolean
* Validates input against the provided list before adding it to the model.
* If it doesnt exist, it cancels the event.
* @param {?} requireMatch
* @return {?}
*/
set: function (requireMatch) {
this._requireMatch = requireMatch !== '' ? (requireMatch === 'true' || requireMatch === true) : true;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TdChipsComponent.prototype, "readOnly", {
/**
* @return {?}
*/
get: function () {
return this._readOnly;
},
/**
* readOnly?: boolean
* Disables the chips input and chip removal icon.
* @param {?} readOnly
* @return {?}
*/
set: function (readOnly) {
this._readOnly = readOnly;
this._toggleInput();
},
enumerable: true,
configurable: true
});
Object.defineProperty(TdChipsComponent.prototype, "chipAddition", {
/**
* @return {?}
*/
get: function () {
return this._chipAddition;
},
/**
* chipAddition?: boolean
* Disables the ability to add chips. If it doesn't exist chip addition defaults to true.
* When setting readOnly as true, this will be overriden.
* @param {?} chipAddition
* @return {?}
*/
set: function (chipAddition) {
this._chipAddition = chipAddition;
this._toggleInput();
},
enumerable: true,
configurable: true
});
Object.defineProperty(TdChipsComponent.prototype, "canAddChip", {
/**
* Checks if not in readOnly state and if chipAddition is set to 'true'
* States if a chip can be added and if the input is available
* @return {?}
*/
get: function () {
return this.chipAddition && !this.readOnly;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TdChipsComponent.prototype, "value", {
/**
* @return {?}
*/
get: function () {
return this._value;
},
/**
* Implemented as part of ControlValueAccessor.
* @param {?} v
* @return {?}
*/
set: function (v) {
if (v !== this._value) {
this._value = v;
this._length = this._value ? this._value.length : 0;
if (this._value) {
this._filter(this.inputControl.value);
}
}
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
TdChipsComponent.prototype.ngOnInit = function () {
var _this = this;
this.inputControl.valueChanges
.debounceTime(100)
.subscribe(function (value) {
_this.matches = true;
_this._filter(value);
});
// filter the autocomplete options after everything is rendered
rxjs_Observable.Observable.timer().subscribe(function () {
_this._filter(_this.inputControl.value);
});
};
/**
* @return {?}
*/
TdChipsComponent.prototype.ngDoCheck = function () {
// Throw onChange event only if array changes size.
if (this._value && this._value.length !== this._length) {
this._length = this._value.length;
this.onChange(this._value);
}
};
/**
* Returns a list of filtered items.
* @param {?} val
* @return {?}
*/
TdChipsComponent.prototype.filter = function (val) {
return this.items.filter(function (item) {
return val ? item.indexOf(val) > -1 : true;
});
};
/**
* Method that is executed when trying to create a new chip from the autocomplete.
* returns 'true' if successful, 'false' if it fails.
* @param {?} value
* @return {?}
*/
TdChipsComponent.prototype.addChip = function (value) {
if (value.trim() === '' || this._value.indexOf(value) > -1) {
this.matches = false;
return false;
}
if (this.items && this.requireMatch) {
if (this.items.indexOf(value) < 0) {
this.matches = false;
return false;
}
}
this._value.push(value);
this.add.emit(value);
this.onChange(this._value);
this.inputControl.setValue('');
this.matches = true;
return true;
};
/**
* Method that is executed when trying to remove a chip.
* returns 'true' if successful, 'false' if it fails.
* @param {?} value
* @return {?}
*/
TdChipsComponent.prototype.removeChip = function (value) {
var /** @type {?} */ index = this._value.indexOf(value);
if (index < 0) {
return false;
}
this._value.splice(index, 1);
this.remove.emit(value);
this.onChange(this._value);
this.inputControl.setValue('');
return true;
};
/**
* @return {?}
*/
TdChipsComponent.prototype.handleFocus = function () {
this.focused = true;
return true;
};
/**
* @return {?}
*/
TdChipsComponent.prototype.handleBlur = function () {
this.focused = false;
this.matches = true;
this.onTouched();
return true;
};
/**
* Programmatically focus the input. Since its the component entry point
* @return {?}
*/
TdChipsComponent.prototype.focus = function () {
if (this.canAddChip) {
this._inputChild.focus();
}
};
/**
* Passes relevant input key presses.
* @param {?} event
* @return {?}
*/
TdChipsComponent.prototype._inputKeydown = function (event) {
switch (event.keyCode) {
case _angular_material.LEFT_ARROW:
case _angular_material.DELETE:
case _angular_material.BACKSPACE:
/** Check to see if input is empty when pressing left arrow to move to the last chip */
if (!this._inputChild.value) {
this._focusLastChip();
event.preventDefault();
}
break;
case _angular_material.RIGHT_ARROW:
/** Check to see if input is empty when pressing right arrow to move to the first chip */
if (!this._inputChild.value) {
this._focusFirstChip();
event.preventDefault();
}
break;
default:
}
};
/**
* Passes relevant chip key presses.
* @param {?} event
* @param {?} index
* @return {?}
*/
TdChipsComponent.prototype._chipKeydown = function (event, index) {
switch (event.keyCode) {
case _angular_material.DELETE:
case _angular_material.BACKSPACE:
/** Check to see if not in [readOnly] state to delete a chip */
if (!this.readOnly) {
/**
* Checks if deleting last single chip, to focus input afterwards
* Else check if its not the last chip of the list to focus the next one.
*/
if (index === (this._totalChips - 1) && index === 0) {
this.focus();
}
else if (index < (this._totalChips - 1)) {
this._focusChip(index + 1);
}
this.removeChip(this.value[index]);
}
break;
case _angular_material.LEFT_ARROW:
/**
* Check to see if left arrow was pressed while focusing the first chip to focus input next
* Also check if input should be focused
*/
if (index === 0 && this.canAddChip) {
this.focus();
event.stopPropagation();
}
break;
case _angular_material.RIGHT_ARROW:
/**
* Check to see if right arrow was pressed while focusing the last chip to focus input next
* Also check if input should be focused
*/
if (index === (this._totalChips - 1) && this.canAddChip) {
this.focus();
event.stopPropagation();
}
break;
case _angular_material.ESCAPE:
this.focus();
break;
default:
}
};
/**
* Implemented as part of ControlValueAccessor.
* @param {?} value
* @return {?}
*/
TdChipsComponent.prototype.writeValue = function (value) {
this.value = value;
};
/**
* @param {?} fn
* @return {?}
*/
TdChipsComponent.prototype.registerOnChange = function (fn) {
this.onChange = fn;
};
/**
* @param {?} fn
* @return {?}
*/
TdChipsComponent.prototype.registerOnTouched = function (fn) {
this.onTouched = fn;
};
/**
*
* Method to filter the options for the autocomplete
* @param {?} value
* @return {?}
*/
TdChipsComponent.prototype._filter = function (value) {
var _this = this;
var /** @type {?} */ items = this.filter(value);
items = items.filter(function (filteredItem) {
return _this._value && filteredItem ? _this._value.indexOf(filteredItem) < 0 : true;
});
this.subject.next(items);
};
Object.defineProperty(TdChipsComponent.prototype, "_totalChips", {
/**
* Get total of chips
* @return {?}
*/
get: function () {
var /** @type {?} */ chips = this._chipsChildren.toArray();
return chips.length;
},
enumerable: true,
configurable: true
});
/**
* Method to focus a desired chip by index
* @param {?} index
* @return {?}
*/
TdChipsComponent.prototype._focusChip = function (index) {
/** check to see if index exists in the array before focusing */
if (index > -1 && this._totalChips > index) {
this._chipsChildren.toArray()[index].focus();
}
};
/**
* Method to focus first chip
* @return {?}
*/
TdChipsComponent.prototype._focusFirstChip = function () {
this._focusChip(0);
};
/**
* Method to focus last chip
* @return {?}
*/
TdChipsComponent.prototype._focusLastChip = function () {
this._focusChip(this._totalChips - 1);
};
/**
* Method to toggle the disable state of input
* Checks if not in readOnly state and if chipAddition is set to 'true'
* @return {?}
*/
TdChipsComponent.prototype._toggleInput = function () {
if (this.canAddChip) {
this.inputControl.enable();
}
else {
this.inputControl.disable();
}
};
return TdChipsComponent;
}());
TdChipsComponent.decorators = [
{ type: _angular_core.Component, args: [{ providers: [TD_CHIPS_CONTROL_VALUE_ACCESSOR],
selector: 'td-chips',
template: "<div flex> <md-chip-list [tabIndex]=\"-1\" (focus)=\"focus()\"> <ng-template let-chip let-index=\"index\" ngFor [ngForOf]=\"value\"> <md-basic-chip [class.td-chip-disabled]=\"readOnly\" (keydown)=\"_chipKeydown($event, index)\"> <span>{{chip}}</span> <md-icon *ngIf=\"!readOnly\" (click)=\"removeChip(chip)\"> cancel </md-icon> </md-basic-chip> </ng-template> <md-input-container floatPlaceholder=\"never\" [style.width.px]=\"canAddChip ? null : 0\" [color]=\"matches ? 'primary' : 'warn'\"> <input mdInput flex=\"100\" #input [mdAutocomplete]=\"autocomplete\" [formControl]=\"inputControl\" [placeholder]=\"canAddChip? placeholder : ''\" (keydown)=\"_inputKeydown($event)\" (keyup.enter)=\"addChip(input.value)\" (focus)=\"handleFocus()\" (blur)=\"handleBlur()\"> </md-input-container> <md-autocomplete #autocomplete=\"mdAutocomplete\"> <ng-template let-item ngFor [ngForOf]=\"filteredItems | async\"> <md-option (click)=\"addChip(item)\" [value]=\"item\">{{item}}</md-option> </ng-template> </md-autocomplete> </md-chip-list> <div *ngIf=\"chipAddition\" class=\"mat-input-underline\" [class.mat-disabled]=\"readOnly\"> <span class=\"mat-input-ripple\" [class.mat-focused]=\"focused\" [class.mat-warn]=\"!matches\"></span> </div> </div> ",
styles: [":host{display:block;padding:0 5px 0 5px}:host /deep/ .mat-input-wrapper{margin-bottom:2px}:host /deep/ .mat-basic-chip{display:inline-block;cursor:default;border-radius:16px;line-height:32px;margin:8px 8px 0 0;padding:0 12px;box-sizing:border-box;max-width:100%;position:relative}html[dir=rtl] :host /deep/ .mat-basic-chip{margin:8px 0 0 8px;unicode-bidi:embed}body[dir=rtl] :host /deep/ .mat-basic-chip{margin:8px 0 0 8px;unicode-bidi:embed}[dir=rtl] :host /deep/ .mat-basic-chip{margin:8px 0 0 8px;unicode-bidi:embed}:host /deep/ .mat-basic-chip bdo[dir=rtl]{direction:rtl;unicode-bidi:bidi-override}:host /deep/ .mat-basic-chip bdo[dir=ltr]{direction:ltr;unicode-bidi:bidi-override}:host /deep/ .mat-basic-chip md-icon{position:relative;top:5px;left:5px;right:auto;height:18px;width:18px;font-size:19px}html[dir=rtl] :host /deep/ .mat-basic-chip md-icon{left:auto;unicode-bidi:embed}body[dir=rtl] :host /deep/ .mat-basic-chip md-icon{left:auto;unicode-bidi:embed}[dir=rtl] :host /deep/ .mat-basic-chip md-icon{left:auto;unicode-bidi:embed}:host /deep/ .mat-basic-chip md-icon bdo[dir=rtl]{direction:rtl;unicode-bidi:bidi-override}:host /deep/ .mat-basic-chip md-icon bdo[dir=ltr]{direction:ltr;unicode-bidi:bidi-override}html[dir=rtl] :host /deep/ .mat-basic-chip md-icon{right:5px;unicode-bidi:embed}body[dir=rtl] :host /deep/ .mat-basic-chip md-icon{right:5px;unicode-bidi:embed}[dir=rtl] :host /deep/ .mat-basic-chip md-icon{right:5px;unicode-bidi:embed}:host /deep/ .mat-basic-chip md-icon bdo[dir=rtl]{direction:rtl;unicode-bidi:bidi-override}:host /deep/ .mat-basic-chip md-icon bdo[dir=ltr]{direction:ltr;unicode-bidi:bidi-override}:host /deep/ .mat-basic-chip md-icon:hover{cursor:pointer}.mat-input-underline{position:relative;height:1px;width:100%}.mat-input-underline.mat-disabled{border-top:0;background-position:0;background-size:4px 1px;background-repeat:repeat-x}.mat-input-underline .mat-input-ripple{position:absolute;height:2px;z-index:1;top:-1px;width:100%;transform-origin:top;opacity:0;transform:scaleY(0)}.mat-input-underline .mat-input-ripple.mat-warn{opacity:1;transform:scaleY(1)}.mat-input-underline .mat-input-ripple.mat-focused{opacity:1;transform:scaleY(1)}:host /deep/ md-input-container input::-webkit-calendar-picker-indicator{display:none}:host /deep/ md-input-container .mat-input-underline{display:none} /*# sourceMappingURL=chips.component.css.map */ "]
},] },
];
/**
* @nocollapse
*/
TdChipsComponent.ctorParameters = function () { return []; };
TdChipsComponent.propDecorators = {
'_inputChild': [{ type: _angular_core.ViewChild, args: [_angular_material.MdInputDirective,] },],
'_chipsChildren': [{ type: _angular_core.ViewChildren, args: [_angular_material.MdChip,] },],
'items': [{ type: _angular_core.Input, args: ['items',] },],
'requireMatch': [{ type: _angular_core.Input, args: ['requireMatch',] },],
'readOnly': [{ type: _angular_core.Input, args: ['readOnly',] },],
'chipAddition': [{ type: _angular_core.Input, args: ['chipAddition',] },],
'placeholder': [{ type: _angular_core.Input, args: ['placeholder',] },],
'add': [{ type: _angular_core.Output, args: ['add',] },],
'remove': [{ type: _angular_core.Output, args: ['remove',] },],
'value': [{ type: _angular_core.Input },],
};
var QuiverChipsModule = (function () {
function QuiverChipsModule() {
}
return QuiverChipsModule;
}());
QuiverChipsModule.decorators = [
{ type: _angular_core.NgModule, args: [{
imports: [
_angular_forms.ReactiveFormsModule,
_angular_common.CommonModule,
_angular_material.MdInputModule,
_angular_material.MdIconModule,
_angular_material.MdChipsModule,
_angular_material.MdAutocompleteModule
],
declarations: [
TdChipsComponent
],
exports: [
TdChipsComponent
]
},] },
];
/**
* @nocollapse
*/
QuiverChipsModule.ctorParameters = function () { return []; };
var TdToggleDirective = (function () {
/**
* @param {?} _renderer
* @param {?} _element
* @param {?} _changeDetectorRef
* @param {?} animationDriver
* @param {?} animationStyleNormalizer
*/
function TdToggleDirective(_renderer, _element, _changeDetectorRef, animationDriver, animationStyleNormalizer) {
this._renderer = _renderer;
this._element = _element;
this._changeDetectorRef = _changeDetectorRef;
/**
* duration?: number
* Sets duration of toggle animation in miliseconds.
* Defaults to 150 ms.
*/
this.duration = 150;
this._engine = new _angular_animations_browser.ɵDomAnimationEngine(animationDriver, animationStyleNormalizer);
}
Object.defineProperty(TdToggleDirective.prototype, "state", {
/**
* tdToggle: boolean
* Toggles element, hides if its 'true', shows if its 'false'.
* @param {?} state
* @return {?}
*/
set: function (state$$1) {
this._state = state$$1;
if (this._animationPlayer) {
this._animationPlayer.destroy();
this._animationPlayer = undefined;
}
if (state$$1) {
this.hide();
}
else {
this.show();
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(TdToggleDirective.prototype, "ariaExpandedBinding", {
/**
* Binds native 'aria-expanded' attribute.
* @return {?}
*/
get: function () {
return !this._state;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TdToggleDirective.prototype, "ariaHiddenBinding", {
/**
* Binds native 'aria-hidden' attribute.
* @return {?}
*/
get: function () {
return this._state;
},
enumerable: true,
configurable: true
});
/**
* Hides element: sets "display:[default]" so animation is shown,
* starts animation and adds "display:'none'" style at the end.
* @return {?}
*/
TdToggleDirective.prototype.hide = function () {
var _this = this;
this._defaultDisplay = this._element.nativeElement.style.display;
this._defaultOverflow = this._element.nativeElement.style.overflow;
this._animationPlayer = this._engine.animateTimeline(this._element.nativeElement, new _angular_animations_browser.ɵAnimation([_angular_animations.animate(this.duration + 'ms ease-out')]).buildTimelines([{ height: this._element.nativeElement.scrollHeight + 'px' }], [{ height: 0 }]));
this._renderer.setStyle(this._element.nativeElement, 'overflow', 'hidden');
this._changeDetectorRef.markForCheck();
this._animationPlayer.play();
this._animationPlayer.onDone(function () {
_this._animationPlayer.destroy();
_this._renderer.setStyle(_this._element.nativeElement, 'overflow', _this._defaultOverflow);
_this._renderer.setStyle(_this._element.nativeElement, 'display', 'none');
_this._changeDetectorRef.markForCheck();
});
};
/**
* Shows element: sets "display:[default]" so animation is shown,
* starts animation and adds "overflow:[default]" style again at the end.
* @return {?}
*/
TdToggleDirective.prototype.show = function () {
var _this = this;
this._renderer.setStyle(this._element.nativeElement, 'display', this._defaultDisplay);
this._changeDetectorRef.markForCheck();
this._animationPlayer = this._engine.animateTimeline(this._element.nativeElement, new _angular_animations_browser.ɵAnimation([_angular_animations.animate(this.duration + 'ms ease-in')]).buildTimelines([{ height: 0 }], [{ height: this._element.nativeElement.scrollHeight + 'px' }]));
this._renderer.setStyle(this._element.nativeElement, 'overflow', 'hidden');
this._animationPlayer.play();
this._animationPlayer.onDone(function () {
_this._animationPlayer.destroy();
_this._renderer.setStyle(_this._element.nativeElement, 'overflow', _this._defaultOverflow);
_this._changeDetectorRef.markForCheck();
});
};
return TdToggleDirective;
}());
TdToggleDirective.decorators = [
{ type: _angular_core.Directive, args: [{
selector: '[tdToggle]',
},] },
];
/**
* @nocollapse
*/
TdToggleDirective.ctorParameters = function () { return [
{ type: _angular_core.Renderer2, },
{ type: _angular_core.ElementRef, },
{ type: _angular_core.ChangeDetectorRef, },
{ type: _angular_animations_browser.AnimationDriver, },
{ type: _angular_animations_browser.ɵAnimationStyleNormalizer, },
]; };
TdToggleDirective.propDecorators = {
'duration': [{ type: _angular_core.Input },],
'state': [{ type: _angular_core.Input, args: ['tdToggle',] },],
'ariaExpandedBinding': [{ type: _angular_core.HostBinding, args: ['attr.aria-expanded',] },],
'ariaHiddenBinding': [{ type: _angular_core.HostBinding, args: ['attr.aria-hidden',] },],
};
var TdFadeDirective = (function () {
/**
* @param {?} _renderer
* @param {?} _element
* @param {?} _changeDetectorRef
* @param {?} animationDriver
* @param {?} animationStyleNormalizer
*/
function TdFadeDirective(_renderer, _element, _changeDetectorRef, animationDriver, animationStyleNormalizer) {
this._renderer = _renderer;
this._element = _element;
this._changeDetectorRef = _changeDetectorRef;
/**
* duration?: number
* Sets duration of fade animation in miliseconds.
* Defaults to 150 ms.
*/
this.duration = 150;
/**
* fadeIn?: function
* Method to be executed when fadeIn animation ends.
*/
this.fadeIn = new _angular_core.EventEmitter();
/**
* fadeOut?: function
* Method to be executed when fadeOut animation ends.
*/
this.fadeOut = new _angular_core.EventEmitter();
this._engine = new _angular_animations_browser.ɵDomAnimationEngine(animationDriver, animationStyleNormalizer);
}
Object.defineProperty(TdFadeDirective.prototype, "state", {
/**
* tdFade: boolean
* Fades element, FadesOut if its 'true', FadesIn if its 'false'.
* @param {?} state
* @return {?}
*/
set: function (state$$1) {
this._state = state$$1;
if (this._animationPlayer) {
this._animationPlayer.destroy();
this._animationPlayer = undefined;
}
if (state$$1) {
this.hide();
}
else {
this.show();
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(TdFadeDirective.prototype, "ariaExpandedBinding", {
/**
* Binds native 'aria-expanded' attribute.
* @return {?}
*/
get: function () {
return !this._state;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TdFadeDirective.prototype, "ariaHiddenBinding", {
/**
* Binds native 'aria-hidden' attribute.
* @return {?}
*/
get: function () {
return this._state;
},
enumerable: true,
configurable: true
});
/**
* Hides element: starts animation and adds "display:'none'" style at the end.
* @return {?}
*/
TdFadeDirective.prototype.hide = function () {
var _this = this;
this._defaultDisplay = this._element.nativeElement.style.display;
this._defaultOpacity = !this._element.nativeElement.style.opacity ? 1 : this._element.nativeElement.style.opacity;
this._animationPlayer = this._engine.animateTimeline(this._element.nativeElement, new _angular_animations_browser.ɵAnimation([_angular_animations.animate(this.duration + 'ms ease-out')]).buildTimelines([{ opacity: this._defaultOpacity }], [{ opacity: 0 }]));
this._changeDetectorRef.markForCheck();
this._animationPlayer.play();
this._animationPlayer.onDone(function () {
_this._animationPlayer.destroy();
_this._renderer.setStyle(_this._element.nativeElement, 'display', 'none');
_this._changeDetectorRef.markForCheck();
});
};
/**
* Shows element: sets "display:[default]" so animation is shown.
* @return {?}
*/
TdFadeDirective.prototype.show = function () {
var _this = this;
this._renderer.setStyle(this._element.nativeElement, 'display', this._defaultDisplay);
this._changeDetectorRef.markForCheck();
this._animationPlayer = this._engine.animateTimeline(this._element.nativeElement, new _angular_animations_browser.ɵAnimation([_angular_animations.animate(this.duration + 'ms ease-in')]).buildTimelines([{ opacity: 0 }], [{ opacity: this._defaultOpacity }]));
this._animationPlayer.play();
this._animationPlayer.onDone(function () {
_this._animationPlayer.destroy();
_this._changeDetectorRef.markForCheck();
});
};
return TdFadeDirective;
}());
TdFadeDirective.decorators = [
{ type: _angular_core.Directive, args: [{
selector: '[tdFade]',
},] },
];
/**
* @nocollapse
*/
TdFadeDirective.ctorParameters = function () { return [
{ type: _angular_core.Renderer2, },
{ type: _angular_core.ElementRef, },
{ type: _angular_core.ChangeDetectorRef, },
{ type: _angular_animations_browser.AnimationDriver, },
{ type: _angular_animations_browser.ɵAnimationStyleNormalizer, },
]; };
TdFadeDirective.propDecorators = {
'duration': [{ type: _angular_core.Input },],
'state': [{ type: _angular_core.Input, args: ['tdFade',] },],
'fadeIn': [{ type: _angular_core.Output, args: ['fadeIn',] },],
'fadeOut': [{ type: _angular_core.Output, args: ['fadeOut',] },],
'ariaExpandedBinding': [{ type: _angular_core.HostBinding, args: ['attr.aria-expanded',] },],
'ariaHiddenBinding': [{ type: _angular_core.HostBinding, args: ['attr.aria-hidden',] },],
};
/**
* Function TdCollapseAnimation
*
* params:
* * duration: Duration of animation in miliseconds. Defaults to 120 ms.
*
* Returns an [AnimationTriggerMetadata] object with states for a collapse/expand animation.
*
* usage: [\@tdCollapse]="true|false"
* @param {?=} duration
* @return {?}
*/
function TdCollapseAnimation(duration) {
if (duration === void 0) { duration = 120; }
return _angular_animations.trigger('tdCollapse', [
_angular_animations.state('1', _angular_animations.style({
height: '0',
display: 'none',
})),
_angular_animations.state('0', _angular_animations.style({
height: _angular_animations.AUTO_STYLE,
display: _angular_animations.AUTO_STYLE,
})),
_angular_animations.transition('0 => 1', [
_angular_animations.style({ overflow: 'hidden' }),
_angular_animations.animate(duration + 'ms ease-in', _angular_animations.style({ height: '0' })),
]),
_angular_animations.transition('1 => 0', [
_angular_animations.style({ overflow: 'hidden' }),
_angular_animations.animate(duration + 'ms ease-out', _angular_animations.style({ height: _angular_animations.AUTO_STYLE })),
]),
]);
}
/**
* Function TdFadeInOutAnimation
*
* params:
* * duration: Duration of animation in miliseconds. Defaults to 150 ms.
*
* Returns an [AnimationTriggerMetadata] object with states for a fading animation.
*
* usage: [\@tdFadeInOut]="true|false"
* @param {?=} duration
* @return {?}
*/
function TdFadeInOutAnimation(duration) {
if (duration === void 0) { duration = 150; }
return _angular_animations.trigger('tdFadeInOut', [
_angular_animations.state('0', _angular_animations.style({
opacity: '0',
display: 'none',
})),
_angular_animations.state('1', _angular_animations.style({
opacity: '*',
display: '*',
})),
_angular_animations.transition('0 => 1', _angular_animations.animate(duration + 'ms ease-in')),
_angular_animations.transition('1 => 0', _angular_animations.animate(duration + 'ms ease-out')),
]);
}
var TdAutoTrimDirective = (function () {
/**
* @param {?} _model
*/
function TdAutoTrimDirective(_model) {
this._model = _model;
}
/**
* Listens to host's (blur) event and trims value.
* @param {?} event
* @return {?}
*/
TdAutoTrimDirective.prototype.onBlur = function (event) {
if (this._model && this._model.value && typeof (this._model.value) === 'string') {
this._model.update.emit(this._model.value.trim());
}
};
return TdAutoTrimDirective;
}());
TdAutoTrimDirective.decorators = [
{ type: _angular_core.Directive, args: [{
selector: '[tdAutoTrim]',
},] },
];
/**
* @nocollapse
*/
TdAutoTrimDirective.ctorParameters = function () { return [
{ type: _angular_forms.NgModel, decorators: [{ type: _angular_core.Optional }, { type: _angular_core.Host },] },
]; };
TdAutoTrimDirective.propDecorators = {
'onBlur': [{ type: _angular_core.HostListener, args: ['blur', ['$event'],] },],
};
var CovalentValidators = (function () {
function CovalentValidators() {
}
/**
* @param {?} minValue
* @return {?}
*/
CovalentValidators.min = function (minValue) {
var /** @type {?} */ func = function (c) {
if (!!_angular_forms.Validators.required(c) || (!minValue && minValue !== 0)) {
return undefined;
}
var /** @type {?} */ v = c.value;
return v < minValue ?
{ min: { minValue: minValue, actualValue: v } } :
undefined;
};
return func;
};
/**
* @param {?} maxValue
* @return {?}
*/
CovalentValidators.max = function (maxValue) {
var /** @type {?} */ func = function (c) {
if (!!_angular_forms.Validators.required(c) || (!maxValue && maxValue !== 0)) {
return undefined;
}
var /** @type {?} */ v = c.value;
return v > maxValue ?
{ max: { maxValue: maxValue, actualValue: v } } :
undefined;
};
return func;
};
/**
* @param {?} c
* @return {?}
*/
CovalentValidators.numberRequired = function (c) {
return (Number.isNaN(c.value)) ?
{ required: true } :
undefined;
};
return CovalentValidators;
}());
var MIN_VALIDATOR = {
provide: _angular_forms.NG_VALIDATORS,
useExisting: _angular_core.forwardRef(function () { return TdMinValidator; }),
multi: true,
};
var TdMinValidator = (function () {
function TdMinValidator() {
}
Object.defineProperty(TdMinValidator.prototype, "min", {
/**
* @param {?} min
* @return {?}
*/
set: function (min) {
this._validator = CovalentValidators.min(min);
},
enumerable: true,
configurable: true
});
/**
* @param {?} c
* @return {?}
*/
TdMinValidator.prototype.validate = function (c) {
return this._validator(c);
};
return TdMinValidator;
}());
TdMinValidator.decorators = [
{ type: _angular_core.Directive, args: [{
selector: '[min][formControlName],[min][formControl],[min][ngModel]',
providers: [MIN_VALIDATOR],
},] },
];
/**
* @nocollapse
*/
TdMinValidator.ctorParameters = function () { return []; };
TdMinValidator.propDecorators = {
'min': [{ type: _angular_core.Input, args: ['min',] },],
};
var MAX_VALIDATOR = {
provide: _angular_forms.NG_VALIDATORS,
useExisting: _angular_core.forwardRef(function () { return TdMaxValidator; }),
multi: true,
};
var TdMaxValidator = (function () {
function TdMaxValidator() {
}
Object.defineProperty(TdMaxValidator.prototype, "max", {
/**
* @param {?} max
* @return {?}
*/
set: function (max) {
this._validator = CovalentValidators.max(max);
},
enumerable: true,
configurable: true
});
/**
* @param {?} c
* @return {?}
*/
TdMaxValidator.prototype.validate = function (c) {
return this._validator(c);
};
return TdMaxValidator;
}());
TdMaxValidator.decorators = [
{ type: _angular_core.Directive, args: [{
selector: '[max][formControlName],[max][formControl],[max][ngModel]',
providers: [MAX_VALIDATOR],
},] },
];
/**
* @nocollapse
*/
TdMaxValidator.ctorParameters = function () { return []; };
TdMaxValidator.propDecorators = {
'max': [{ type: _angular_core.Input, args: ['max',] },],
};
var TdTimeAgoPipe = (function () {
function TdTimeAgoPipe() {
}
/**
* @param {?} time
* @param {?} reference
* @return {?}
*/
TdTimeAgoPipe.prototype.transform = function (time, reference) {
// Convert time to date object if not already
time = new Date(time);
var /** @type {?} */ ref = new Date(reference);
// If not a valid timestamp, return 'Invalid Date'
if (!time.getTime()) {
return 'Invalid Date';
}
// For unit testing, we need to be able to declare a static start time
// for calculations, or else speed of tests can bork.
var /** @type {?} */ startTime = isNaN(ref.getTime()) ? Date.now() : ref.getTime();
var /** @type {?} */ diff = Math.floor((startTime - time.getTime()) / 1000);
if (diff < 2) {
return '1 second ago';
}
if (diff < 60) {
return Math.floor(diff) + ' seconds ago';
}
// Minutes
diff = diff / 60;
if (diff < 2) {
return '1 minute ago';
}
if (diff < 60) {
return Math.floor(diff) + ' minutes ago';
}
// Hours
diff = diff / 60;
if (diff < 2) {
return '1 hour ago';
}
if (diff < 24) {
return Math.floor(diff) + ' hours ago';
}
// Days
diff = diff / 24;
if (diff < 2) {
return '1 day ago';
}
if (diff < 30) {
return Math.floor(diff) + ' days ago';
}
// Months
diff = diff / 30;
if (diff < 2) {
return '1 month ago';
}
if (diff < 12) {
return Math.floor(diff) + ' months ago';
}
// Years
diff = diff / 12;
if (diff < 2) {
return '1 year ago';
}
else {
return Math.floor(diff) + ' years ago';
}
};
return TdTimeAgoPipe;
}());
TdTimeAgoPipe.decorators = [
{ type: _angular_core.Pipe, args: [{
name: 'timeAgo',
},] },
];
/**
* @nocollapse
*/
TdTimeAgoPipe.ctorParameters = function () { return []; };
var TdTimeDifferencePipe = (function () {
function TdTimeDifferencePipe() {
}
/**
* @param {?} start
* @param {?} end
* @return {?}
*/
TdTimeDifferencePipe.prototype.transform = function (start, end) {
var /** @type {?} */ startTime = new Date(start);
var /** @type {?} */ endTime;
if (end !== undefined) {
endTime = new Date(end);
}
else {
endTime = new Date();
}
if (!startTime.getTime() || !endTime.getTime()) {
return 'Invalid Date';
}
var /** @type {?} */ diff = Math.floor((endTime.getTime() - startTime.getTime()) / 1000);
var /** @type {?} */ days = Math.floor(diff / (60 * 60 * 24));
diff = diff - (days * (60 * 60 * 24));
var /** @type {?} */ hours = Math.floor(diff / (60 * 60));
diff = diff - (hours * (60 * 60));
var /** @type {?} */ minutes = Math.floor(diff / (60));
diff -= minutes * (60);
var /** @type {?} */ seconds = diff;
var /** @type {?} */ pad = '00';
var /** @type {?} */ daysFormatted = '';
if (days > 0 && days < 2) {
daysFormatted = ' day - ';
}
else if (days > 1) {
daysFormatted = ' days - ';
}
return (days > 0 ? days + daysFormatted : daysFormatted) +
pad.substring(0, pad.length - (hours + '').length) + hours + ':' +
pad.substring(0, pad.length - (minutes + '').length) + minutes + ':' +
pad.substring(0, pad.length - (seconds + '').length) + seconds;
};
return TdTimeDifferencePipe;
}());
TdTimeDifferencePipe.decorators = [
{ type: _angular_core.Pipe, args: [{
name: 'timeDifference',
},] },
];
/**
* @nocollapse
*/
TdTimeDifferencePipe.ctorParameters = function () { return []; };
var TdBytesPipe = (function () {
function TdBytesPipe() {
}
/**
* @param {?} bytes
* @param {?=} precision
* @return {?}
*/
TdBytesPipe.prototype.transform = function (bytes, precision) {
if (precision === void 0) { precision = 2; }
if (bytes === 0) {
return '0 B';
}
else if (isNaN(parseInt(bytes, 10))) {
/* If not a valid number, return 'Invalid Number' */
return 'Invalid Number';
}
var /** @type {?} */ k = 1024;
var /** @type {?} */ sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
var /** @type {?} */ i = Math.floor(Math.log(bytes) / Math.log(k));
// if less than 1
if (i < 0) {
return 'Invalid Number';
}
return parseFloat((bytes / Math.pow(k, i)).toFixed(precision)) + ' ' + sizes[i];
};
return TdBytesPipe;
}());
TdBytesPipe.decorators = [
{ type: _angular_core.Pipe, args: [{
name: 'bytes',
},] },
];
/**
* @nocollapse
*/
TdBytesPipe.ctorParameters = function () { return []; };
var TdDigitsPipe = (function () {
/**
* @param {?=} _locale
*/
function TdDigitsPipe(_locale) {
if (_locale === void 0) { _locale = 'en'; }
this._locale = _locale;
this._decimalPipe = new _angular_common.DecimalPipe(this._locale);
}
/**
* @param {?} digits
* @param {?=} precision
* @return {?}
*/
TdDigitsPipe.prototype.transform = function (digits, precision) {
if (precision === void 0) { precision = 1; }
if (digits === 0) {
return '0';
}
else if (isNaN(parseInt(digits, 10))) {
/* If not a valid number, return the value */
return digits;
}
else if (digits < 1) {
return this._decimalPipe.transform(digits.toFixed(precision));
}
var /** @type {?} */ k = 1000;
var /** @type {?} */ sizes = ['', 'K', 'M', 'B', 'T', 'Q'];
var /** @type {?} */ i = Math.floor(Math.log(digits) / Math.log(k));
var /** @type {?} */ size = sizes[i];
return this._decimalPipe.transform(parseFloat((digits / Math.pow(k, i)).toFixed(precision))) + (size ? ' ' + size : '');
};
return TdDigitsPipe;
}());
TdDigitsPipe.decorators = [
{ type: _angular_core.Pipe, args: [{
name: 'digits',
},] },
];
/**
* @nocollapse
*/
TdDigitsPipe.ctorParameters = function () { return [
{ type: undefined, decorators: [{ type: _angular_core.Inject, args: [_angular_core.LOCALE_ID,] },] },
]; };
var TdTruncatePipe = (function () {
function TdTruncatePipe() {
}
/**
* @param {?} text
* @param {?} length
* @return {?}
*/
TdTruncatePipe.prototype.transform = function (text, length) {
if (typeof text !== 'string') {
return '';
}
// Truncate
var /** @type {?} */ truncated = text.substr(0, length);
if (text.length > length) {
if (truncated.lastIndexOf(' ') > 0) {
truncated = truncated.trim();
}
truncated += '…';
}
return truncated;
};
return TdTruncatePipe;
}());
TdTruncatePipe.decorators = [
{ type: _angular_core.Pipe, args: [{
name: 'truncate',
},] },
];
/**
* @nocollapse
*/
TdTruncatePipe.ctorParameters = function () { return []; };
var RouterPathService = (function () {
/**
* @param {?} _router
*/
function RouterPathService(_router) {
this._router = _router;
this._router.events
.filter(function (e) { return e instanceof _angular_router.RoutesRecognized; })
.pairwise()
.subscribe(function (e) {
RouterPathService._previousRoute = e[0].urlAfterRedirects;
});
}
/**
* @return {?}
*/
RouterPathService.prototype.getPreviousRoute = function () {
return RouterPathService._previousRoute;
};
return RouterPathService;
}());
RouterPathService._previousRoute = '/';
RouterPathService.decorators = [
{ type: _angular_core.Injectable },
];
/**
* @nocollapse
*/
RouterPathService.ctorParameters = function () { return [
{ type: _angular_router.Router, },
]; };
/**
* ANIMATIONS
*/
var TD_ANIMATIONS = [
TdToggleDirective,
TdFadeDirective,
];
/**
* FORMS
*/
// Form Directives
var TD_FORMS = [
TdAutoTrimDirective,
];
// Validators
var TD_VALIDATORS = [
TdMinValidator,
TdMaxValidator,
];
/**
* PIPES
*/
var TD_PIPES = [
TdTimeAgoPipe,
TdTimeDifferencePipe,
TdBytesPipe,
TdDigitsPipe,
TdTruncatePipe,
];
var QuiverCommonModule = (function () {
function QuiverCommonModule() {
}
return QuiverCommonModule;
}());
QuiverCommonModule.decorators = [
{ type: _angular_core.NgModule, args: [{
imports: [
_angular_forms.FormsModule,
_angular_common.CommonModule,
],
declarations: [
TD_FORMS,
TD_PIPES,
TD_ANIMATIONS,
TD_VALIDATORS,
],
exports: [
_angular_forms.FormsModule,
_angular_common.CommonModule,
TD_FORMS,
TD_PIPES,
TD_ANIMATIONS,
TD_VALIDATORS,
],
providers: [
RouterPathService,
],
},] },
];
/**
* @nocollapse
*/
QuiverCommonModule.ctorParameters = function () { return []; };
var TdDataTableRowComponent = (function () {
/**
* @param {?} _elementRef
* @param {?} _renderer
*/
function TdDataTableRowComponent(_elementRef, _renderer) {
this._elementRef = _elementRef;
this._renderer = _renderer;
this._renderer.addClass(this._elementRef.nativeElement, 'td-data-table-row');
}
/**
* @return {?}
*/
TdDataTableRowComponent.prototype.focus = function () {
this._elementRef.nativeElement.focus();
};
return TdDataTableRowComponent;
}());
TdDataTableRowComponent.decorators = [
{ type: _angular_core.Component, args: [{
selector: 'tr[td-data-table-row]',
styles: [":host{border-bottom-style:solid;border-bottom-width:1px}tbody>:host{height:48px}thead>:host{height:56px} /*# sourceMappingURL=data-table-row.component.css.map */ "],
template: "<ng-content></ng-content>",
},] },
];
/**
* @nocollapse
*/
TdDataTableRowComponent.ctorParameters = function () { return [
{ type: _angular_core.ElementRef, },
{ type: _angular_core.Renderer2, },
]; };
var TdDataTableTemplateDirective = (function (_super) {
__extends(TdDataTableTemplateDirective, _super);
/**
* @param {?} templateRef
* @param {?} viewContainerRef
*/
function TdDataTableTemplateDirective(templateRef, viewContainerRef) {
return