Google Git
Sign in
apache / nifi-fds / 6435e394f6c7c31d3f61a4bfc9702bde2a1659fa / . / node_modules / @covalent / core / fesm2015 / covalent-core.js
blob: ffe6c87457ad963fadd0326f2e7c0a0f7fbab064 [file] [log] [blame]
import { MatChip, MatChipsModule } from '@angular/material/chips';
import { MatAutocompleteTrigger, MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatDialogRef, MatDialog, MatDialogConfig, MatDialogModule } from '@angular/material/dialog';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatCardModule } from '@angular/material/card';
import { MatSidenav, MatSidenavModule } from '@angular/material/sidenav';
import { Router, RoutesRecognized } from '@angular/router';
import { DomSanitizer } from '@angular/platform-browser';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { Overlay, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
import { MatMenuModule } from '@angular/material/menu';
import { MatDividerModule } from '@angular/material/divider';
import { MatButtonModule } from '@angular/material/button';
import { MatInput, MatInputModule } from '@angular/material/input';
import { trigger, state, style, transition, animate, query, animateChild, group, AUTO_STYLE, keyframes } from '@angular/animations';
import { MatIconModule } from '@angular/material/icon';
import { MatOption, MatPseudoCheckboxModule, MatRippleModule } from '@angular/material/core';
import { Dir, Directionality } from '@angular/cdk/bidi';
import { UP_ARROW, DOWN_ARROW, ESCAPE, LEFT_ARROW, RIGHT_ARROW, DELETE, BACKSPACE, TAB, ENTER, SPACE } from '@angular/cdk/keycodes';
import { ScrollDispatchModule, ViewportRuler } from '@angular/cdk/scrolling';
import { Subject, Subscription, timer, merge, fromEvent, Observable, BehaviorSubject, of } from 'rxjs';
import { debounceTime, filter, pairwise, takeUntil, distinctUntilChanged, skip } from 'rxjs/operators';
import { CommonModule, DOCUMENT, DecimalPipe } from '@angular/common';
import { MatTabsModule } from '@angular/material/tabs';
import { NgModel, FormsModule, Validators, NG_VALUE_ACCESSOR, FormControl, ReactiveFormsModule } from '@angular/forms';
import { coerceNumberProperty, coerceBooleanProperty } from '@angular/cdk/coercion';
import { Component, Input, Output, EventEmitter, Optional, ChangeDetectorRef, ChangeDetectionStrategy, NgModule, Directive, TemplateRef, ViewContainerRef, ContentChild, ViewChildren, ElementRef, HostListener, Renderer2, HostBinding, ViewChild, Host, Inject, Pipe, LOCALE_ID, Injectable, forwardRef, ContentChildren, SkipSelf, SecurityContext, ComponentFactoryResolver, Injector, NgZone } from '@angular/core';
import { TemplatePortalDirective, PortalModule, TemplatePortal, ComponentPortal } from '@angular/cdk/portal';
import { tdCollapseAnimation, mixinDisabled, mixinControlValueAccessor, mixinDisableRipple, tdRotateAnimation, tdFadeInOutAnimation, CovalentCommonModule } from '@covalent/core/common';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class TdPagingBarComponent {
/**
* @param {?} _dir
* @param {?} _changeDetectorRef
*/
constructor(_dir, _changeDetectorRef) {
this._dir = _dir;
this._changeDetectorRef = _changeDetectorRef;
this._pageSize = 50;
this._total = 0;
this._page = 1;
this._fromRow = 1;
this._toRow = 1;
this._initialized = false;
this._pageLinks = [];
this._pageLinkCount = 0;
// special case when 2 pageLinks, detect when hit end of pages so can lead in correct direction
this._hitEnd = false;
// special case when 2 pageLinks, detect when hit start of pages so can lead in correct direction
this._hitStart = false;
/**
* firstLast?: boolean
* Shows or hides the first and last page buttons of the paging bar. Defaults to 'false'
*/
this.firstLast = true;
/**
* initialPage?: number
* Sets starting page for the paging bar. Defaults to '1'
*/
this.initialPage = 1;
/**
* change?: function
* Method to be executed when page size changes or any button is clicked in the paging bar.
* Emits an [IPageChangeEvent] implemented object.
*/
this.onChange = new EventEmitter();
}
/**
* pageLinkCount?: number
* Amount of page navigation links for the paging bar. Defaults to '0'
* @param {?} pageLinkCount
* @return {?}
*/
set pageLinkCount(pageLinkCount) {
this._pageLinkCount = coerceNumberProperty(pageLinkCount);
this._calculatePageLinks();
this._changeDetectorRef.markForCheck();
}
/**
* @return {?}
*/
get pageLinkCount() {
return this._pageLinkCount;
}
/**
* pageSize?: number
* Selected page size for the pagination. Defaults 50.
* @param {?} pageSize
* @return {?}
*/
set pageSize(pageSize) {
this._pageSize = coerceNumberProperty(pageSize);
this._page = 1;
if (this._initialized) {
this._handleOnChange();
}
this._changeDetectorRef.markForCheck();
}
/**
* @return {?}
*/
get pageSize() {
return this._pageSize;
}
/**
* total: number
* Total rows for the pagination.
* @param {?} total
* @return {?}
*/
set total(total) {
this._total = coerceNumberProperty(total);
this._calculateRows();
this._calculatePageLinks();
this._changeDetectorRef.markForCheck();
}
/**
* @return {?}
*/
get total() {
return this._total;
}
/**
* pageLinks: number[]
* Returns the pageLinks in an array
* @return {?}
*/
get pageLinks() {
return this._pageLinks;
}
/**
* range: string
* Returns the range of the rows.
* @return {?}
*/
get range() {
return `${!this._toRow ? 0 : this._fromRow}-${this._toRow}`;
}
/**
* page: number
* Returns the current page.
* @return {?}
*/
get page() {
return this._page;
}
/**
* page: number
* Returns the max page for the current pageSize and total.
* @return {?}
*/
get maxPage() {
return Math.ceil(this._total / this._pageSize);
}
/**
* @return {?}
*/
get isRTL() {
if (this._dir) {
return this._dir.dir === 'rtl';
}
return false;
}
/**
* @return {?}
*/
ngOnInit() {
this._page = coerceNumberProperty(this.initialPage);
this._calculateRows();
this._calculatePageLinks();
this._initialized = true;
this._changeDetectorRef.markForCheck();
}
/**
* navigateToPage?: function
* Navigates to a specific valid page. Returns 'true' if page is valid, else 'false'.
* @param {?} page
* @return {?}
*/
navigateToPage(page) {
if (page === 1 || (page >= 1 && page <= this.maxPage)) {
this._page = coerceNumberProperty(Math.floor(page));
this._handleOnChange();
return true;
}
return false;
}
/**
* firstPage?: function
* Navigates to the first page. Returns 'true' if page is valid, else 'false'.
* @return {?}
*/
firstPage() {
return this.navigateToPage(1);
}
/**
* prevPage?: function
* Navigates to the previous page. Returns 'true' if page is valid, else 'false'.
* @return {?}
*/
prevPage() {
return this.navigateToPage(this._page - 1);
}
/**
* nextPage?: function
* Navigates to the next page. Returns 'true' if page is valid, else 'false'.
* @return {?}
*/
nextPage() {
return this.navigateToPage(this._page + 1);
}
/**
* lastPage?: function
* Navigates to the last page. Returns 'true' if page is valid, else 'false'.
* @return {?}
*/
lastPage() {
return this.navigateToPage(this.maxPage);
}
/**
* @return {?}
*/
isMinPage() {
return this._page <= 1;
}
/**
* @return {?}
*/
isMaxPage() {
return this._page >= this.maxPage;
}
/**
* @return {?}
*/
_calculateRows() {
/** @type {?} */
let top = (this._pageSize * this._page);
this._fromRow = (this._pageSize * (this._page - 1)) + 1;
this._toRow = this._total > top ? top : this._total;
}
/**
* _calculatePageLinks?: function
* Calculates the page links that should be shown to the user based on the current state of the paginator
* @return {?}
*/
_calculatePageLinks() {
// special case when 2 pageLinks, detect when hit end of pages so can lead in correct direction
if (this.isMaxPage()) {
this._hitEnd = true;
this._hitStart = false;
}
// special case when 2 pageLinks, detect when hit start of pages so can lead in correct direction
if (this.isMinPage()) {
this._hitEnd = false;
this._hitStart = true;
}
// If the pageLinkCount goes above max possible pages based on perpage setting then reset it to maxPage
/** @type {?} */
let actualPageLinkCount = this.pageLinkCount;
if (this.pageLinkCount > this.maxPage) {
actualPageLinkCount = this.maxPage;
}
// reset the pageLinks array
this._pageLinks = [];
// fill in the array with the pageLinks based on the current selected page
/** @type {?} */
let middlePageLinks = Math.floor(actualPageLinkCount / 2);
for (let x = 0; x < actualPageLinkCount; x++) {
// don't go past the maxPage in the pageLinks
// have to handle even and odd pageLinkCounts differently so can still lead to the next numbers
if ((actualPageLinkCount % 2 === 0 && (this.page + middlePageLinks > this.maxPage)) ||
(actualPageLinkCount % 2 !== 0 && (this.page + middlePageLinks >= this.maxPage))) {
this._pageLinks[x] = this.maxPage - (actualPageLinkCount - (x + 1));
// if the selected page is after the middle then set that page as middle and get the correct balance on left and right
// special handling when there are only 2 pageLinks to just drop to next if block so can lead to next numbers when moving to right
// when moving to the left then go into this block
}
else if ((actualPageLinkCount > 2 || actualPageLinkCount <= 2 && this._hitEnd) && (this.page - middlePageLinks) > 0) {
this._pageLinks[x] = (this.page - middlePageLinks) + x;
// if the selected page is before the middle then set the pages based on the x index leading up to and after selected page
}
else if ((this.page - middlePageLinks) <= 0) {
this._pageLinks[x] = x + 1;
// other wise just set the array in order starting from the selected page
}
else {
this._pageLinks[x] = this.page + x;
}
}
}
/**
* @return {?}
*/
_handleOnChange() {
this._calculateRows();
this._calculatePageLinks();
/** @type {?} */
let event = {
page: this._page,
maxPage: this.maxPage,
pageSize: this._pageSize,
total: this._total,
fromRow: this._fromRow,
toRow: this._toRow,
};
this._changeDetectorRef.markForCheck();
this.onChange.emit(event);
}
}
TdPagingBarComponent.decorators = [
{ type: Component, args: [{
changeDetection: ChangeDetectionStrategy.OnPush,
selector: 'td-paging-bar',
template: "<div class=\"td-paging-bar\" (change)=\"$event.stopPropagation()\" >\n <ng-content></ng-content>\n <div class=\"td-paging-bar-navigation\">\n <button mat-icon-button class=\"td-paging-bar-first-page\" type=\"button\" *ngIf=\"firstLast\" [disabled]=\"isMinPage()\" (click)=\"firstPage()\">\n <mat-icon>{{ isRTL ? 'skip_next' : 'skip_previous' }}</mat-icon>\n </button>\n <button mat-icon-button class=\"td-paging-bar-prev-page\" type=\"button\" [disabled]=\"isMinPage()\" (click)=\"prevPage()\">\n <mat-icon>{{ isRTL ? 'navigate_next' : 'navigate_before' }}</mat-icon>\n </button>\n <ng-template *ngIf=\"pageLinkCount > 0\" let-link let-index=\"index\" ngFor [ngForOf]=\"pageLinks\">\n <button class=\"td-paging-bar-link-page\" mat-icon-button type=\"button\" [color]=\"page === link ? 'accent' : ''\" (click)=\"navigateToPage(link)\">{{link}}</button>\n </ng-template>\n <button mat-icon-button class=\"td-paging-bar-next-page\" type=\"button\" [disabled]=\"isMaxPage()\" (click)=\"nextPage()\">\n <mat-icon>{{ isRTL ? 'navigate_before' : 'navigate_next' }}</mat-icon>\n </button>\n <button mat-icon-button class=\"td-paging-bar-last-page\" type=\"button\" *ngIf=\"firstLast\" [disabled]=\"isMaxPage()\" (click)=\"lastPage()\">\n <mat-icon>{{ isRTL ? 'skip_previous' : 'skip_next' }}</mat-icon>\n </button>\n </div>\n</div>",
styles: [":host{display:block}:host .td-paging-bar{height:48px;-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:center;align-content:center;max-width:100%;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}:host .td-paging-bar ::ng-deep>*{margin:0 10px}:host .td-paging-bar [mat-icon-button]{font-size:12px;font-weight:400}"]
}] }
];
/** @nocollapse */
TdPagingBarComponent.ctorParameters = () => [
{ type: Dir, decorators: [{ type: Optional }] },
{ type: ChangeDetectorRef }
];
TdPagingBarComponent.propDecorators = {
firstLast: [{ type: Input, args: ['firstLast',] }],
initialPage: [{ type: Input, args: ['initialPage',] }],
pageLinkCount: [{ type: Input, args: ['pageLinkCount',] }],
pageSize: [{ type: Input, args: ['pageSize',] }],
total: [{ type: Input, args: ['total',] }],
onChange: [{ type: Output, args: ['change',] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class CovalentPagingModule {
}
CovalentPagingModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule,
MatIconModule,
MatButtonModule,
],
declarations: [
TdPagingBarComponent,
],
exports: [
TdPagingBarComponent,
],
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class TdVirtualScrollRowDirective extends TemplatePortalDirective {
/**
* @param {?} templateRef
* @param {?} viewContainerRef
*/
constructor(templateRef, viewContainerRef) {
super(templateRef, viewContainerRef);
}
}
TdVirtualScrollRowDirective.decorators = [
{ type: Directive, args: [{ selector: '[tdVirtualScrollRow]' },] }
];
/** @nocollapse */
TdVirtualScrollRowDirective.ctorParameters = () => [
{ type: TemplateRef },
{ type: ViewContainerRef }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/** @type {?} */
const TD_VIRTUAL_OFFSET = 2;
/** @type {?} */
const SCROLL_DEBOUNCE = 200;
class TdVirtualScrollContainerComponent {
/**
* @param {?} _elementRef
* @param {?} _domSanitizer
* @param {?} _renderer
* @param {?} _changeDetectorRef
*/
constructor(_elementRef, _domSanitizer, _renderer, _changeDetectorRef) {
this._elementRef = _elementRef;
this._domSanitizer = _domSanitizer;
this._renderer = _renderer;
this._changeDetectorRef = _changeDetectorRef;
this._subs = [];
this._bottom = new Subject();
this._initialized = false;
this._totalHeight = 0;
this._hostHeight = 0;
this._scrollVerticalOffset = 0;
this._fromRow = 0;
this._toRow = 0;
/**
* bottom: function
* Method to be executed when user scrolled to the last item of the list.
* An [ITdVirtualScrollBottomEvent] event is emitted
*/
this.bottom = new EventEmitter();
/**
* trackBy?: TrackByFunction
* This accepts the same trackBy function [ngFor] does.
* https://angular.io/api/core/TrackByFunction
*/
this.trackBy = (index, item) => {
return item;
};
}
/**
* data: any[]
* List of items to virtually iterate on.
* @param {?} data
* @return {?}
*/
set data(data) {
this._data = data;
if (this._initialized) {
this._calculateVirtualRows();
}
this._changeDetectorRef.markForCheck();
}
/**
* @return {?}
*/
get data() {
return this._data;
}
/**
* @return {?}
*/
get virtualData() {
return this._virtualData;
}
/**
* @return {?}
*/
get rowHeight() {
if (this._rows && this._rows.toArray()[0]) {
return this._rows.toArray()[0].nativeElement.getBoundingClientRect().height;
}
return 0;
}
/**
* @return {?}
*/
get totalHeight() {
return this._totalHeight;
}
/**
* @return {?}
*/
get fromRow() {
return this._fromRow;
}
/**
* @return {?}
*/
get toRow() {
return this._toRow;
}
/**
* @return {?}
*/
get offsetTransform() {
return this._offsetTransform;
}
/**
* @return {?}
*/
ngAfterViewInit() {
this._subs.push(this._rows.changes.subscribe(() => {
this._calculateVirtualRows();
}));
this._initialized = true;
this._calculateVirtualRows();
this._subs.push(this._bottom.pipe(debounceTime(SCROLL_DEBOUNCE)).subscribe(() => {
this.bottom.emit({
lastRow: this._data[this._data.length - 1],
lastIndex: this.toRow,
});
}));
}
/**
* @return {?}
*/
ngAfterViewChecked() {
/** @type {?} */
let newHostHeight = this._elementRef.nativeElement.getBoundingClientRect().height;
if (this._hostHeight !== newHostHeight) {
this._hostHeight = newHostHeight;
if (this._initialized) {
this._calculateVirtualRows();
}
}
}
/**
* @return {?}
*/
ngOnDestroy() {
if (this._subs) {
this._subs.forEach((sub) => {
sub.unsubscribe();
});
}
}
/**
* @param {?} event
* @return {?}
*/
handleScroll(event) {
/** @type {?} */
let element = ((/** @type {?} */ (event.target)));
if (element) {
/** @type {?} */
let verticalScroll = element.scrollTop;
if (this._scrollVerticalOffset !== verticalScroll) {
this._scrollVerticalOffset = verticalScroll;
if (this._initialized) {
this._calculateVirtualRows();
}
}
if (this._initialized) {
// check to see if bottom was hit to throw the bottom event
if ((this._data.length * this.rowHeight) - (verticalScroll + this._hostHeight) === 0) {
this._bottom.next();
}
}
}
}
/**
* Method to refresh and recalculate the virtual rows
* e.g. after changing the [data] content
* @return {?}
*/
refresh() {
this._calculateVirtualRows();
}
/**
* Method to scroll to a specific row of the list.
* @param {?} row
* @return {?}
*/
scrollTo(row) {
this._elementRef.nativeElement.scrollTop = row * this.rowHeight;
this._changeDetectorRef.markForCheck();
}
/**
* Method to scroll to the start of the list.
* @return {?}
*/
scrollToStart() {
this.scrollTo(0);
this._changeDetectorRef.markForCheck();
}
/**
* Method to scroll to the end of the list.
* @return {?}
*/
scrollToEnd() {
this.scrollTo(this.totalHeight / this.rowHeight);
this._changeDetectorRef.markForCheck();
}
/**
* @return {?}
*/
_calculateVirtualRows() {
if (this._data) {
this._totalHeight = this._data.length * this.rowHeight;
/** @type {?} */
let fromRow = Math.floor((this._scrollVerticalOffset / this.rowHeight)) - TD_VIRTUAL_OFFSET;
this._fromRow = fromRow > 0 ? fromRow : 0;
/** @type {?} */
let range = Math.floor((this._hostHeight / this.rowHeight)) + (TD_VIRTUAL_OFFSET * 2);
/** @type {?} */
let toRow = range + this.fromRow;
if (isFinite(toRow) && toRow > this._data.length) {
toRow = this._data.length;
}
else if (!isFinite(toRow)) {
toRow = TD_VIRTUAL_OFFSET;
}
this._toRow = toRow;
}
else {
this._totalHeight = 0;
this._fromRow = 0;
this._toRow = 0;
}
/** @type {?} */
let offset = 0;
if (this._scrollVerticalOffset > (TD_VIRTUAL_OFFSET * this.rowHeight)) {
offset = this.fromRow * this.rowHeight;
}
this._offsetTransform = this._domSanitizer.bypassSecurityTrustStyle('translateY(' + (offset - this.totalHeight) + 'px)');
if (this._data) {
this._virtualData = this.data.slice(this.fromRow, this.toRow);
}
// mark for check at the end of the queue so we are sure
// that the changes will be marked
Promise.resolve().then(() => {
this._changeDetectorRef.markForCheck();
});
}
}
TdVirtualScrollContainerComponent.decorators = [
{ type: Component, args: [{
selector: 'td-virtual-scroll-container',
template: "<div [style.height.px]=\"totalHeight\"></div>\n<div [style.transform]=\"offsetTransform\"\n [style.position]=\"'absolute'\"\n [style.width.%]=\"100\">\n <ng-template let-row\n let-index=\"index\"\n ngFor\n [ngForOf]=\"virtualData\"\n [ngForTrackBy]=\"trackBy\">\n <div #rowElement\n [style.width.%]=\"100\">\n <ng-template *ngIf=\"_rowTemplate\"\n [ngTemplateOutlet]=\"_rowTemplate.templateRef\"\n [ngTemplateOutletContext]=\"{row: row,\n index: (fromRow + index),\n first: (fromRow + index) === 0,\n last: (fromRow + index) === (data.length - 1),\n odd: ((fromRow + index + 1) % 2) === 1,\n even: ((fromRow + index + 1) % 2) === 0}\">\n </ng-template>\n </div>\n </ng-template>\n</div>",
changeDetection: ChangeDetectionStrategy.OnPush,
styles: [":host{display:block;height:100%;width:100%;overflow:auto;position:relative}"]
}] }
];
/** @nocollapse */
TdVirtualScrollContainerComponent.ctorParameters = () => [
{ type: ElementRef },
{ type: DomSanitizer },
{ type: Renderer2 },
{ type: ChangeDetectorRef }
];
TdVirtualScrollContainerComponent.propDecorators = {
data: [{ type: Input, args: ['data',] }],
bottom: [{ type: Output }],
_rows: [{ type: ViewChildren, args: ['rowElement',] }],
_rowTemplate: [{ type: ContentChild, args: [TdVirtualScrollRowDirective,] }],
trackBy: [{ type: Input, args: ['trackBy',] }],
handleScroll: [{ type: HostListener, args: ['scroll', ['$event'],] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/** @type {?} */
const TD_VIRTUAL_SCROLL = [
TdVirtualScrollRowDirective,
TdVirtualScrollContainerComponent,
];
class CovalentVirtualScrollModule {
}
CovalentVirtualScrollModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule,
],
declarations: [
TD_VIRTUAL_SCROLL,
],
exports: [
TD_VIRTUAL_SCROLL,
],
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/** @enum {string} */
const TdNotificationCountPositionY = {
Top: 'top',
Bottom: 'bottom',
Center: 'center',
};
/** @enum {string} */
const TdNotificationCountPositionX = {
Before: 'before',
After: 'after',
Center: 'center',
};
/** @type {?} */
const DEFAULT_NOTIFICATION_LIMIT = 99;
class TdNotificationCountComponent {
constructor() {
this._notifications = 0;
this._limit = DEFAULT_NOTIFICATION_LIMIT;
/**
* color?: "primary" | "accent" | "warn"
* Sets the theme color of the notification tip. Defaults to "warn"
*/
this.color = 'warn';
}
/**
* positionX?: TdNotificationCountPositionX or "before" | "after" | "center"
* Sets the X position of the notification tip.
* Defaults to "after" if it has content, else 'center'.
* @param {?} positionX
* @return {?}
*/
set positionX(positionX) {
this._positionX = positionX;
}
/**
* @return {?}
*/
get positionX() {
return this._positionX;
}
/**
* positionY?: TdNotificationCountPositionY or "top" | "bottom" | "center"
* Sets the Y position of the notification tip.
* Defaults to "top" if it has content, else 'center'.
* @param {?} positionY
* @return {?}
*/
set positionY(positionY) {
this._positionY = positionY;
}
/**
* @return {?}
*/
get positionY() {
return this._positionY;
}
/**
* notifications?: number | boolean
* Number for the notification count. Shows component only if the input is a positive number or 'true'
* @param {?} notifications
* @return {?}
*/
set notifications(notifications) {
this._notifications = notifications;
}
/**
* limit?: number
* Limit for notification count. If the number of notifications is greater than limit, then + will be added. Defaults to 99.
* @param {?} limit
* @return {?}
*/
set limit(limit) {
this._limit = limit;
}
/**
* @return {?}
*/
get hideHost() {
return !this.show && !this._hasContent();
}
/**
* Sets the component in its 'noCount' state if [notifications] is a boolean 'true'.
* Makes the notification tip show without a count.
* @return {?}
*/
get noCount() {
return this._notifications === true;
}
/**
* Notification display string when a count is available.
* Anything over 99 gets set as 99+
* @return {?}
*/
get notificationsDisplay() {
if (this._notifications > this._limit) {
return `${this._limit}+`;
}
return this._notifications.toString();
}
/**
* Shows notification tip only when [notifications] is true or a positive integer.
* @return {?}
*/
get show() {
return this._notifications === true || (!isNaN((/** @type {?} */ (this._notifications))) && this._notifications > 0);
}
/**
* Check if [positionX] and [positionY] have been set as inputs, else use defaults depending on component content.
* @return {?}
*/
ngAfterContentInit() {
if (!this._positionX) {
this.positionX = this._hasContent() ? TdNotificationCountPositionX.After : TdNotificationCountPositionX.Center;
}
if (!this._positionY) {
this.positionY = this._hasContent() ? TdNotificationCountPositionY.Top : TdNotificationCountPositionY.Center;
}
}
/**
* Method to check if element has any kind of content (elements or text)
* @return {?}
*/
_hasContent() {
if (this.content) {
/** @type {?} */
let contentElement = this.content.nativeElement;
return contentElement && (contentElement.children.length > 0 || !!contentElement.textContent.trim());
}
return false;
}
}
TdNotificationCountComponent.decorators = [
{ type: Component, args: [{
selector: 'td-notification-count',
template: "<div #content class=\"td-notification-content\">\n <ng-content></ng-content>\n</div>\n<div *ngIf=\"show\"\n class=\"td-notification-count mat-{{color}}\"\n [class.td-notification-top]=\"positionY === 'top'\"\n [class.td-notification-bottom]=\"positionY === 'bottom'\"\n [class.td-notification-before]=\"positionX === 'before'\"\n [class.td-notification-after]=\"positionX === 'after'\"\n [class.td-notification-center-y]=\"positionY === 'center'\"\n [class.td-notification-center-x]=\"positionX === 'center'\"\n [class.td-notification-no-count]=\"noCount\">\n {{noCount ? '' : notificationsDisplay}}\n</div>",
changeDetection: ChangeDetectionStrategy.OnPush,
styles: [":host{position:relative;display:block;text-align:center;min-width:40px;height:40px}:host.td-notification-hidden{min-width:0}.td-notification-count{line-height:21px;width:20px;height:20px;position:absolute;font-size:10px;font-weight:600;border-radius:50%;z-index:1}.td-notification-count.td-notification-center-x{margin-left:auto;margin-right:auto;left:0;right:0}.td-notification-count.td-notification-center-y{margin-top:auto;margin-bottom:auto;top:0;bottom:0}.td-notification-count.td-notification-top{top:0}.td-notification-count.td-notification-bottom{bottom:0}.td-notification-count.td-notification-before{left:0}.td-notification-count.td-notification-after{right:0}.td-notification-count.td-notification-no-count{width:8px;height:8px}.td-notification-count.td-notification-no-count.td-notification-top{top:8px}.td-notification-count.td-notification-no-count.td-notification-bottom{bottom:8px}.td-notification-count.td-notification-no-count.td-notification-before{left:8px}.td-notification-count.td-notification-no-count.td-notification-after{right:8px}::ng-deep [dir=rtl] .td-notification-count.td-notification-before{right:0;left:auto}::ng-deep [dir=rtl] .td-notification-count.td-notification-after{left:0;right:auto}::ng-deep [dir=rtl] .td-notification-count.td-notification-no-count.td-notification-before{right:8px;left:auto}::ng-deep [dir=rtl] .td-notification-count.td-notification-no-count.td-notification-after{left:8px;right:auto}.td-notification-content,.td-notification-content ::ng-deep>*{line-height:40px}"]
}] }
];
TdNotificationCountComponent.propDecorators = {
content: [{ type: ViewChild, args: ['content',] }],
color: [{ type: Input }],
positionX: [{ type: Input }],
positionY: [{ type: Input }],
notifications: [{ type: Input }],
limit: [{ type: Input }],
hideHost: [{ type: HostBinding, args: ['class.td-notification-hidden',] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/** @type {?} */
const TD_NOTIFICATIONS = [
TdNotificationCountComponent,
];
class CovalentNotificationsModule {
}
CovalentNotificationsModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule,
],
declarations: [
TD_NOTIFICATIONS,
],
exports: [
TD_NOTIFICATIONS,
],
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class TdAutoTrimDirective {
/**
* @param {?} _model
*/
constructor(_model) {
this._model = _model;
}
/**
* Listens to host's (blur) event and trims value.
* @param {?} event
* @return {?}
*/
onBlur(event) {
if (this._model && this._model.value && typeof (this._model.value) === 'string') {
this._model.update.emit(this._model.value.trim());
}
}
}
TdAutoTrimDirective.decorators = [
{ type: Directive, args: [{
selector: '[tdAutoTrim]',
},] }
];
/** @nocollapse */
TdAutoTrimDirective.ctorParameters = () => [
{ type: NgModel, decorators: [{ type: Optional }, { type: Host }] }
];
TdAutoTrimDirective.propDecorators = {
onBlur: [{ type: HostListener, args: ['blur', ['$event'],] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class TdFullscreenDirective {
/**
* @param {?} _document
* @param {?} _el
*/
constructor(_document, _el) {
this._document = _document;
this._el = _el;
this.fullScreenIsActive = false;
}
/**
* @param {?} event
* @return {?}
*/
fsChangeHandler(event) {
this.fullScreenIsActive = event.srcElement === this._getFullScreenElement();
}
/**
* @return {?}
*/
toggleFullScreen() {
this._getFullScreenElement() === this._el.nativeElement ? this.exitFullScreen() : this.enterFullScreen();
}
/**
* @return {?}
*/
enterFullScreen() {
const { _el: { nativeElement } } = this;
/** @type {?} */
const enterFullScreenMap = {
requestFullscreen: () => nativeElement.requestFullscreen(),
// Chrome
webkitRequestFullscreen: () => nativeElement.webkitRequestFullscreen(),
// Safari
mozRequestFullScreen: () => nativeElement.mozRequestFullScreen(),
// Firefox
msRequestFullscreen: () => nativeElement.msRequestFullscreen(),
};
for (const handler of Object.keys(enterFullScreenMap)) {
if (nativeElement[handler]) {
enterFullScreenMap[handler]();
}
}
}
/**
* @return {?}
*/
exitFullScreen() {
const { _document, _el: { nativeElement } } = this;
/** @type {?} */
const exitFullScreenMap = {
exitFullscreen: () => _document.exitFullscreen(),
// Chrome
webkitExitFullscreen: () => _document.webkitExitFullscreen(),
// Safari
mozCancelFullScreen: () => _document.mozCancelFullScreen(),
// Firefox
msExitFullscreen: () => _document.msExitFullscreen(),
};
for (const handler of Object.keys(exitFullScreenMap)) {
if (_document[handler] && this._getFullScreenElement() === nativeElement) {
exitFullScreenMap[handler]();
}
}
}
/**
* @return {?}
*/
_getFullScreenElement() {
const { _document } = this;
/** @type {?} */
const tdFullScreenElementMap = {
fullscreenElement: () => _document.fullscreenElement,
// Chrome, Opera
webkitFullscreenElement: () => _document.webkitFullscreenElement,
// Safari
mozFullscreenElement: () => _document.mozFullscreenElement,
// Firefox
msFullscreenElement: () => _document.msFullscreenElement,
};
for (const props of Object.keys(tdFullScreenElementMap)) {
if (_document[props]) {
return _document[props];
}
}
}
}
TdFullscreenDirective.decorators = [
{ type: Directive, args: [{
selector: '[tdFullScreen]',
exportAs: 'tdFullScreen',
},] }
];
/** @nocollapse */
TdFullscreenDirective.ctorParameters = () => [
{ type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] },
{ type: ElementRef }
];
TdFullscreenDirective.propDecorators = {
fsChangeHandler: [{ type: HostListener, args: ['document:fullscreenchange', ['$event'],] }, { type: HostListener, args: ['document:webkitfullscreenchange', ['$event'],] }, { type: HostListener, args: ['document:mozfullscreenchange', ['$event'],] }, { type: HostListener, args: ['document:msfullscreenchange', ['$event'],] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class TdTimeAgoPipe {
/**
* @param {?} time
* @param {?=} reference
* @return {?}
*/
transform(time, reference) {
// Convert time to date object if not already
time = new Date(time);
/** @type {?} */
let 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.
/** @type {?} */
let startTime = isNaN(ref.getTime()) ? Date.now() : ref.getTime();
/** @type {?} */
let 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';
}
}
}
TdTimeAgoPipe.decorators = [
{ type: Pipe, args: [{
name: 'timeAgo',
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class TdTimeDifferencePipe {
/**
* @param {?} start
* @param {?=} end
* @return {?}
*/
transform(start, end) {
/** @type {?} */
let startTime = new Date(start);
/** @type {?} */
let endTime;
if (end !== undefined) {
endTime = new Date(end);
}
else {
endTime = new Date();
}
if (!startTime.getTime() || !endTime.getTime()) {
return 'Invalid Date';
}
/** @type {?} */
let diff = Math.floor((endTime.getTime() - startTime.getTime()) / 1000);
/** @type {?} */
let days = Math.floor(diff / (60 * 60 * 24));
diff = diff - (days * (60 * 60 * 24));
/** @type {?} */
let hours = Math.floor(diff / (60 * 60));
diff = diff - (hours * (60 * 60));
/** @type {?} */
let minutes = Math.floor(diff / (60));
diff -= minutes * (60);
/** @type {?} */
let seconds = diff;
/** @type {?} */
let pad = '00';
/** @type {?} */
let 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;
}
}
TdTimeDifferencePipe.decorators = [
{ type: Pipe, args: [{
name: 'timeDifference',
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class TdTimeUntilPipe {
/**
* @param {?} time
* @param {?=} reference
* @return {?}
*/
transform(time, reference) {
// Convert time to date object if not already
time = new Date(time);
/** @type {?} */
let 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.
/** @type {?} */
let startTime = isNaN(ref.getTime()) ? Date.now() : ref.getTime();
/** @type {?} */
let diff = Math.floor((time.getTime() - startTime) / 1000);
if (diff < 2) {
return 'in 1 second';
}
if (diff < 60) {
return 'in ' + Math.floor(diff) + ' seconds';
}
// Minutes
diff = diff / 60;
if (diff < 2) {
return 'in 1 minute';
}
if (diff < 60) {
return 'in ' + Math.floor(diff) + ' minutes';
}
// Hours
diff = diff / 60;
if (diff < 2) {
return 'in 1 hour';
}
if (diff < 24) {
return 'in ' + Math.floor(diff) + ' hours';
}
// Days
diff = diff / 24;
if (diff < 2) {
return 'in 1 day';
}
if (diff < 30) {
return 'in ' + Math.floor(diff) + ' days';
}
// Months
diff = diff / 30;
if (diff < 2) {
return 'in 1 month';
}
if (diff < 12) {
return 'in ' + Math.floor(diff) + ' months';
}
// Years
diff = diff / 12;
if (diff < 2) {
return 'in 1 year';
}
else {
return 'in ' + Math.floor(diff) + ' years';
}
}
}
TdTimeUntilPipe.decorators = [
{ type: Pipe, args: [{
name: 'timeUntil',
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class TdBytesPipe {
/* `bytes` needs to be `any` or TypeScript complains
Tried both `number` and `number | string` */
/**
* @param {?} bytes
* @param {?=} precision
* @return {?}
*/
transform(bytes, 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';
}
/** @type {?} */
let k = 1024;
/** @type {?} */
let sizes = ['B', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
/** @type {?} */
let 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];
}
}
TdBytesPipe.decorators = [
{ type: Pipe, args: [{
name: 'bytes',
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class TdDecimalBytesPipe {
/* `bytes` needs to be `any` or TypeScript complains
Tried both `number` and `number | string` */
/**
* @param {?} bytes
* @param {?=} precision
* @return {?}
*/
transform(bytes, 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';
}
/** @type {?} */
let k = 1000;
/** @type {?} */
let sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
/** @type {?} */
let 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];
}
}
TdDecimalBytesPipe.decorators = [
{ type: Pipe, args: [{
name: 'decimalBytes',
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class TdDigitsPipe {
/**
* @param {?=} _locale
*/
constructor(_locale = 'en') {
this._locale = _locale;
this._decimalPipe = new DecimalPipe(this._locale);
}
/* `digits` needs to be type `digits: any` or TypeScript complains */
/**
* @param {?} digits
* @param {?=} precision
* @return {?}
*/
transform(digits, 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));
}
/** @type {?} */
let k = 1000;
/** @type {?} */
let sizes = ['', 'K', 'M', 'B', 'T', 'Q'];
/** @type {?} */
let i = Math.floor(Math.log(digits) / Math.log(k));
/** @type {?} */
let size = sizes[i];
return this._decimalPipe.transform(parseFloat((digits / Math.pow(k, i)).toFixed(precision))) + (size ? ' ' + size : '');
}
}
TdDigitsPipe.decorators = [
{ type: Pipe, args: [{
name: 'digits',
},] }
];
/** @nocollapse */
TdDigitsPipe.ctorParameters = () => [
{ type: String, decorators: [{ type: Inject, args: [LOCALE_ID,] }] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class TdTruncatePipe {
/**
* @param {?} text
* @param {?} length
* @return {?}
*/
transform(text, length) {
if (typeof text !== 'string') {
return '';
}
// Truncate
/** @type {?} */
let truncated = text.substr(0, length);
if (text.length > length) {
if (truncated.lastIndexOf(' ') > 0) {
truncated = truncated.trim();
}
truncated += '…';
}
return truncated;
}
}
TdTruncatePipe.decorators = [
{ type: Pipe, args: [{
name: 'truncate',
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class RouterPathService {
/**
* @param {?} _router
*/
constructor(_router) {
this._router = _router;
this._router.events.pipe(filter((e) => e instanceof RoutesRecognized), pairwise()).subscribe((e) => {
RouterPathService._previousRoute = e[0].urlAfterRedirects;
});
}
/*
* Utility function to get the route the user previously went to
* good for use in a "back button"
*/
/**
* @return {?}
*/
getPreviousRoute() {
return RouterPathService._previousRoute;
}
}
RouterPathService._previousRoute = '/';
RouterPathService.decorators = [
{ type: Injectable }
];
/** @nocollapse */
RouterPathService.ctorParameters = () => [
{ type: Router }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class IconService {
constructor() {
this._icons = [
'access_alarm',
'access_alarms',
'access_time',
'accessibility',
'account_balance',
'account_balance_wallet',
'account_box',
'account_circle',
'add',
'add_alarm',
'add_box',
'add_circle',
'add_circle_outline',
'add_shopping_cart',
'add_to_photos',
'adjust',
'alarm',
'alarm_add',
'alarm_off',
'alarm_on',
'album',
'android',
'announcement',
'apps',
'archive',
'arrow_back',
'arrow_drop_down',
'arrow_drop_down_circle',
'arrow_drop_up',
'arrow_forward',
'aspect_ratio',
'assessment',
'assignment',
'assignment_ind',
'assignment_late',
'assignment_return',
'assignment_returned',
'assignment_turned_in',
'assistant_photo',
'attach_file',
'attach_money',
'attachment',
'audiotrack',
'autorenew',
'av_timer',
'backspace',
'backup',
'battery_alert',
'battery_charging_full',
'battery_full',
'battery_std',
'battery_unknown',
'beenhere',
'block',
'bluetooth',
'bluetooth_audio',
'bluetooth_connected',
'bluetooth_disabled',
'bluetooth_searching',
'blur_circular',
'blur_linear',
'blur_off',
'blur_on',
'book',
'bookmark',
'bookmark_border',
'border_all',
'border_bottom',
'border_clear',
'border_color',
'border_horizontal',
'border_inner',
'border_left',
'border_outer',
'border_right',
'border_style',
'border_top',
'border_vertical',
'brightness_1',
'brightness_2',
'brightness_3',
'brightness_4',
'brightness_5',
'brightness_6',
'brightness_7',
'brightness_auto',
'brightness_high',
'brightness_low',
'brightness_medium',
'broken_image',
'brush',
'bug_report',
'build',
'business',
'cached',
'cake',
'call',
'call_end',
'call_made',
'call_merge',
'call_missed',
'call_received',
'call_split',
'camera',
'camera_alt',
'camera_front',
'camera_rear',
'camera_roll',
'cancel',
'cast',
'cast_connected',
'center_focus_strong',
'center_focus_weak',
'chat',
'check',
'check_box',
'check_box_outline_blank',
'check_circle',
'chevron_left',
'chevron_right',
'class',
'clear',
'clear_all',
'close',
'closed_caption',
'cloud',
'cloud_circle',
'cloud_done',
'cloud_download',
'cloud_off',
'cloud_queue',
'cloud_upload',
'collections',
'collections_bookmark',
'color_lens',
'colorize',
'comment',
'compare',
'computer',
'confirmation_number',
'contact_phone',
'contacts',
'content_copy',
'content_cut',
'content_paste',
'control_point',
'control_point_duplicate',
'create',
'credit_card',
'crop',
'crop_16_9',
'crop_3_2',
'crop_5_4',
'crop_7_5',
'crop_din',
'crop_free',
'crop_landscape',
'crop_original',
'crop_portrait',
'crop_square',
'dashboard',
'data_usage',
'dehaze',
'delete',
'description',
'desktop_mac',
'desktop_windows',
'details',
'developer_board',
'developer_mode',
'device_hub',
'devices',
'dialer_sip',
'dialpad',
'directions',
'directions_bike',
'directions_boat',
'directions_bus',
'directions_car',
'directions_railway',
'directions_run',
'directions_subway',
'directions_transit',
'directions_walk',
'disc_full',
'dns',
'do_not_disturb',
'do_not_disturb_alt',
'dock',
'domain',
'done',
'done_all',
'drafts',
'drive_eta',
'dvr',
'edit',
'eject',
'email',
'equalizer',
'error',
'error_outline',
'event',
'event_available',
'event_busy',
'event_note',
'event_seat',
'exit_to_app',
'expand_less',
'expand_more',
'explicit',
'explore',
'exposure',
'exposure_neg_1',
'exposure_neg_2',
'exposure_plus_1',
'exposure_plus_2',
'exposure_zero',
'extension',
'face',
'fast_forward',
'fast_rewind',
'favorite',
'favorite_border',
'feedback',
'file_download',
'file_upload',
'filter',
'filter_1',
'filter_2',
'filter_3',
'filter_4',
'filter_5',
'filter_6',
'filter_7',
'filter_8',
'filter_9',
'filter_9_plus',
'filter_b_and_w',
'filter_center_focus',
'filter_drama',
'filter_frames',
'filter_hdr',
'filter_list',
'filter_none',
'filter_tilt_shift',
'filter_vintage',
'find_in_page',
'find_replace',
'flag',
'flare',
'flash_auto',
'flash_off',
'flash_on',
'flight',
'flight_land',
'flight_takeoff',
'flip',
'flip_to_back',
'flip_to_front',
'folder',
'folder_open',
'folder_shared',
'folder_special',
'font_download',
'format_align_center',
'format_align_justify',
'format_align_left',
'format_align_right',
'format_bold',
'format_clear',
'format_color_fill',
'format_color_reset',
'format_color_text',
'format_indent_decrease',
'format_indent_increase',
'format_italic',
'format_line_spacing',
'format_list_bulleted',
'format_list_numbered',
'format_paint',
'format_quote',
'format_size',
'format_strikethrough',
'format_textdirection_l_to_r',
'format_textdirection_r_to_l',
'format_underlined',
'forum',
'forward',
'forward_10',
'forward_30',
'forward_5',
'fullscreen',
'fullscreen_exit',
'functions',
'gamepad',
'games',
'gesture',
'get_app',
'gif',
'gps_fixed',
'gps_not_fixed',
'gps_off',
'grade',
'gradient',
'grain',
'graphic_eq',
'grid_off',
'grid_on',
'group',
'group_add',
'group_work',
'hd',
'hdr_off',
'hdr_on',
'hdr_strong',
'hdr_weak',
'headset',
'headset_mic',
'healing',
'hearing',
'help',
'help_outline',
'high_quality',
'highlight_off',
'history',
'home',
'hotel',
'hourglass_empty',
'hourglass_full',
'http',
'https',
'image',
'image_aspect_ratio',
'import_export',
'inbox',
'indeterminate_check_box',
'info',
'info_outline',
'input',
'insert_chart',
'insert_comment',
'insert_drive_file',
'insert_emoticon',
'insert_invitation',
'insert_link',
'insert_photo',
'invert_colors',
'invert_colors_off',
'iso',
'keyboard',
'keyboard_arrow_down',
'keyboard_arrow_left',
'keyboard_arrow_right',
'keyboard_arrow_up',
'keyboard_backspace',
'keyboard_capslock',
'keyboard_hide',
'keyboard_return',
'keyboard_tab',
'keyboard_voice',
'label',
'label_outline',
'landscape',
'language',
'laptop',
'laptop_chromebook',
'laptop_mac',
'laptop_windows',
'launch',
'layers',
'layers_clear',
'leak_add',
'leak_remove',
'lens',
'library_add',
'library_books',
'library_music',
'link',
'list',
'live_help',
'live_tv',
'local_activity',
'local_airport',
'local_atm',
'local_bar',
'local_cafe',
'local_car_wash',
'local_convenience_store',
'local_dining',
'local_drink',
'local_florist',
'local_gas_station',
'local_grocery_store',
'local_hospital',
'local_hotel',
'local_laundry_service',
'local_library',
'local_mall',
'local_movies',
'local_offer',
'local_parking',
'local_pharmacy',
'local_phone',
'local_pizza',
'local_play',
'local_post_office',
'local_printshop',
'local_see',
'local_shipping',
'local_taxi',
'location_city',
'location_disabled',
'location_off',
'location_on',
'location_searching',
'lock',
'lock_open',
'lock_outline',
'looks',
'looks_3',
'looks_4',
'looks_5',
'looks_6',
'looks_one',
'looks_two',
'loop',
'loupe',
'loyalty',
'mail',
'map',
'markunread',
'markunread_mailbox',
'memory',
'menu',
'merge_type',
'message',
'mic',
'mic_none',
'mic_off',
'mms',
'mode_comment',
'mode_edit',
'money_off',
'monochrome_photos',
'mood',
'mood_bad',
'more',
'more_horiz',
'more_vert',
'mouse',
'movie',
'movie_creation',
'music_note',
'my_library_add',
'my_library_books',
'my_library_music',
'my_location',
'nature',
'nature_people',
'navigate_before',
'navigate_next',
'navigation',
'network_cell',
'network_locked',
'network_wifi',
'new_releases',
'nfc',
'no_sim',
'not_interested',
'note_add',
'notifications',
'notifications_active',
'notifications_none',
'notifications_off',
'notifications_paused',
'offline_pin',
'ondemand_video',
'open_in_browser',
'open_in_new',
'open_with',
'pages',
'pageview',
'palette',
'panorama',
'panorama_fish_eye',
'panorama_horizontal',
'panorama_vertical',
'panorama_wide_angle',
'party_mode',
'pause',
'pause_circle_filled',
'pause_circle_outline',
'payment',
'people',
'people_outline',
'perm_camera_mic',
'perm_contact_calendar',
'perm_data_setting',
'perm_device_information',
'perm_identity',
'perm_media',
'perm_phone_msg',
'perm_scan_wifi',
'person',
'person_add',
'person_outline',
'person_pin',
'personal_video',
'phone',
'phone_android',
'phone_bluetooth_speaker',
'phone_forwarded',
'phone_in_talk',
'phone_iphone',
'phone_locked',
'phone_missed',
'phone_paused',
'phonelink',
'phonelink_erase',
'phonelink_lock',
'phonelink_off',
'phonelink_ring',
'phonelink_setup',
'photo',
'photo_album',
'photo_camera',
'photo_library',
'photo_size_select_actual',
'photo_size_select_large',
'photo_size_select_small',
'picture_as_pdf',
'picture_in_picture',
'pin_drop',
'place',
'play_arrow',
'play_circle_filled',
'play_circle_outline',
'play_for_work',
'play_shopping_bag',
'playlist_add',
'plus_one',
'poll',
'polymer',
'portable_wifi_off',
'portrait',
'power',
'power_input',
'power_settings_new',
'present_to_all',
'print',
'public',
'publish',
'query_builder',
'question_answer',
'queue',
'queue_music',
'radio',
'radio_button_checked',
'radio_button_unchecked',
'rate_review',
'receipt',
'recent_actors',
'redeem',
'redo',
'refresh',
'remove',
'remove_circle',
'remove_circle_outline',
'remove_red_eye',
'reorder',
'repeat',
'repeat_one',
'replay',
'replay_10',
'replay_30',
'replay_5',
'reply',
'reply_all',
'report',
'report_problem',
'restaurant_menu',
'restore',
'ring_volume',
'room',
'rotate_90_degrees_ccw',
'rotate_left',
'rotate_right',
'router',
'satellite',
'save',
'scanner',
'schedule',
'school',
'screen_lock_landscape',
'screen_lock_portrait',
'screen_lock_rotation',
'screen_rotation',
'sd_card',
'sd_storage',
'search',
'security',
'select_all',
'send',
'settings',
'settings_applications',
'settings_backup_restore',
'settings_bluetooth',
'settings_brightness',
'settings_cell',
'settings_ethernet',
'settings_input_antenna',
'settings_input_component',
'settings_input_composite',
'settings_input_hdmi',
'settings_input_svideo',
'settings_overscan',
'settings_phone',
'settings_power',
'settings_remote',
'settings_system_daydream',
'settings_voice',
'share',
'shop',
'shop_two',
'shopping_basket',
'shopping_cart',
'shuffle',
'signal_cellular_4_bar',
'signal_cellular_connected_no_internet_4_bar',
'signal_cellular_no_sim',
'signal_cellular_null',
'signal_cellular_off',
'signal_wifi_4_bar',
'signal_wifi_4_bar_lock',
'signal_wifi_off',
'sim_card',
'sim_card_alert',
'skip_next',
'skip_previous',
'slideshow',
'smartphone',
'sms',
'sms_failed',
'snooze',
'sort',
'sort_by_alpha',
'space_bar',
'speaker',
'speaker_group',
'speaker_notes',
'speaker_phone',
'spellcheck',
'star',
'star_border',
'star_half',
'stars',
'stay_current_landscape',
'stay_current_portrait',
'stay_primary_landscape',
'stay_primary_portrait',
'stop',
'storage',
'store',
'store_mall_directory',
'straighten',
'strikethrough_s',
'style',
'subject',
'subtitles',
'supervisor_account',
'surround_sound',
'swap_calls',
'swap_horiz',
'swap_vert',
'swap_vertical_circle',
'switch_camera',
'switch_video',
'sync',
'sync_disabled',
'sync_problem',
'system_update',
'system_update_alt',
'tab',
'tab_unselected',
'tablet',
'tablet_android',
'tablet_mac',
'tag_faces',
'tap_and_play',
'terrain',
'text_format',
'textsms',
'texture',
'theaters',
'thumb_down',
'thumb_up',
'thumbs_up_down',
'time_to_leave',
'timelapse',
'timer',
'timer_10',
'timer_3',
'timer_off',
'toc',
'today',
'toll',
'tonality',
'toys',
'track_changes',
'traffic',
'transform',
'translate',
'trending_down',
'trending_flat',
'trending_up',
'tune',
'turned_in',
'turned_in_not',
'tv',
'undo',
'unfold_less',
'unfold_more',
'usb',
'verified_user',
'vertical_align_bottom',
'vertical_align_center',
'vertical_align_top',
'vibration',
'video_library',
'videocam',
'videocam_off',
'view_agenda',
'view_array',
'view_carousel',
'view_column',
'view_comfy',
'view_compact',
'view_day',
'view_headline',
'view_list',
'view_module',
'view_quilt',
'view_stream',
'view_week',
'vignette',
'visibility',
'visibility_off',
'voice_chat',
'voicemail',
'volume_down',
'volume_mute',
'volume_off',
'volume_up',
'vpn_key',
'vpn_lock',
'wallpaper',
'warning',
'watch',
'wb_auto',
'wb_cloudy',
'wb_incandescent',
'wb_iridescent',
'wb_sunny',
'wc',
'web',
'whatshot',
'widgets',
'wifi',
'wifi_lock',
'wifi_tethering',
'work',
'wrap_text',
'youtube_searched_for',
'zoom_in',
'zoom_out',
];
}
/**
* @return {?}
*/
get icons() {
return this._icons;
}
/**
* @param {?} query
* @return {?}
*/
filter(query$$1) {
return this.icons.filter((el) => {
return el.toLowerCase().indexOf(query$$1 ? query$$1.toLowerCase() : '') > -1;
});
}
}
IconService.decorators = [
{ type: Injectable }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/** @type {?} */
const TD_DIRECTIVES = [TdAutoTrimDirective, TdFullscreenDirective];
// Validators
/** @type {?} */
const TD_VALIDATORS = [];
/** @type {?} */
const TD_PIPES = [
TdTimeAgoPipe,
TdTimeDifferencePipe,
TdTimeUntilPipe,
TdBytesPipe,
TdDecimalBytesPipe,
TdDigitsPipe,
TdTruncatePipe,
];
class CovalentCommonModule$1 {
}
CovalentCommonModule$1.decorators = [
{ type: NgModule, args: [{
imports: [FormsModule, CommonModule],
declarations: [TD_DIRECTIVES, TD_PIPES, TD_VALIDATORS],
exports: [FormsModule, CommonModule, TD_DIRECTIVES, TD_PIPES, TD_VALIDATORS],
providers: [RouterPathService, IconService],
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/**
* const tdRotateAnimation
*
* Parameter Options:
* * degressStart: Degrees of rotation that the dom object will end up in during the "false" state
* * degreesEnd: Degrees of rotation that the dom object will end up in during the "true" state
* * duration: Duration the animation will run in milliseconds. Defaults to 150 ms.
* * delay: Delay before the animation will run in milliseconds. Defaults to 0 ms.
* * ease: Animation accelerates and decelerates. Defaults to ease-in.
*
* Returns an [AnimationTriggerMetadata] object with boolean states for a rotation animation.
*
* usage: [\@tdRotate]="{ value: true | false, params: { degreesEnd: 90 }}"
* @type {?}
*/
const tdRotateAnimation$1 = trigger('tdRotate', [
state('0', style({
transform: 'rotate({{ degressStart }}deg)',
}), { params: { degressStart: 0 } }),
state('1', style({
transform: 'rotate({{ degreesEnd }}deg)',
}), { params: { degreesEnd: 180 } }),
transition('0 <=> 1', [
group([
query('@*', animateChild(), { optional: true }),
animate('{{ duration }}ms {{ delay }}ms {{ ease }}'),
]),
], { params: { duration: 250, delay: '0', ease: 'ease-in' } }),
]);
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/**
* const tdCollapseAnimation
*
* Parameter Options:
* * duration: Duration the animation will run in milliseconds. Defaults to 150 ms.
* * delay: Delay before the animation will run in milliseconds. Defaults to 0 ms.
* * easeOnClose: Animation accelerates and decelerates when closing. Defaults to ease-in.
* * easeOnOpen: Animation accelerates and decelerates when opening. Defaults to ease-out.
*
* Returns an [AnimationTriggerMetadata] object with boolean states for a collapse/expand animation.
*
* usage: [\@tdCollapse]="{ value: true | false, params: { duration: 500 }}"
* @type {?}
*/
const tdCollapseAnimation$1 = trigger('tdCollapse', [
state('1', style({
height: '0',
overflow: 'hidden',
})),
state('0', style({
height: AUTO_STYLE,
overflow: AUTO_STYLE,
})),
transition('0 => 1', [
style({
overflow: 'hidden',
height: AUTO_STYLE,
}),
group([
query('@*', animateChild(), { optional: true }),
animate('{{ duration }}ms {{ delay }}ms {{ ease }}', style({
height: '0',
overflow: 'hidden',
})),
]),
], { params: { duration: 150, delay: '0', ease: 'ease-in' } }),
transition('1 => 0', [
style({
height: '0',
overflow: 'hidden',
}),
group([
query('@*', animateChild(), { optional: true }),
animate('{{ duration }}ms {{ delay }}ms {{ ease }}', style({
overflow: 'hidden',
height: AUTO_STYLE,
})),
]),
], { params: { duration: 150, delay: '0', ease: 'ease-out' } }),
]);
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/**
* const tdFadeInOutAnimation
*
* Parameter Options:
* * duration: Duration the animation will run in milliseconds. Defaults to 150 ms.
* * delay: Delay before the animation will run in milliseconds. Defaults to 0 ms.
* * easeOnIn: Animation accelerates and decelerates when fading in. Defaults to ease-in.
* * easeOnOut: Animation accelerates and decelerates when fading out. Defaults to ease-out.
*
* Returns an [AnimationTriggerMetadata] object with boolean states for a fade animation.
*
* usage: [\@tdFadeInOut]="{ value: true | false, params: { duration: 200 }}"
* @type {?}
*/
const tdFadeInOutAnimation$1 = trigger('tdFadeInOut', [
state('0', style({
opacity: '0',
visibility: 'hidden',
})),
state('1', style({
opacity: AUTO_STYLE,
visibility: AUTO_STYLE,
})),
transition('0 => 1', [
group([
query('@*', animateChild(), { optional: true }),
animate('{{ duration }}ms {{ delay }}ms {{ easeOnIn }}'),
]),
], { params: { duration: 150, delay: '0', easeOnIn: 'ease-in' } }),
transition('1 => 0', [
group([
query('@*', animateChild(), { optional: true }),
animate('{{ duration }}ms {{ delay }}ms {{ easeOnOut }}'),
]),
], { params: { duration: 150, delay: '0', easeOnOut: 'ease-out' } }),
]);
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/**
* const tdBounceAnimation
*
* Parameter Options:
* * duration: Duration the animation will run in milliseconds. Defaults to 500 ms.
* * delay: Delay before the animation will run in milliseconds. Defaults to 0 ms.
* * ease: Animation accelerate and decelerate style. Defaults to ease-out.
*
* Returns an [AnimationTriggerMetadata] object with boolean states for a bounce animation.
*
* usage: [\@tdBounce]="{ value: true | false, params: { duration: 200 }}"
* @type {?}
*/
const tdBounceAnimation = trigger('tdBounce', [
state('0', style({
transform: 'translate3d(0, 0, 0)',
})),
state('1', style({
transform: 'translate3d(0, 0, 0)',
})),
transition('0 <=> 1', [
group([
query('@*', animateChild(), { optional: true }),
animate('{{ duration }}ms {{ delay }}ms {{ ease }}', keyframes([
style({ animationTimingFunction: 'cubic-bezier(0.215, 0.610, 0.355, 1.000)', transform: 'translate3d(0, 0, 0)', offset: 0 }),
style({ animationTimingFunction: 'cubic-bezier(0.215, 0.610, 0.355, 1.000)', transform: 'translate3d(0, 0, 0)', offset: 0.2 }),
style({ animationTimingFunction: 'cubic-bezier(0.755, 0.050, 0.855, 0.060)', transform: 'translate3d(0, -30px, 0)', offset: 0.4 }),
style({ animationTimingFunction: 'cubic-bezier(0.755, 0.050, 0.855, 0.060)', transform: 'translate3d(0, -30px, 0)', offset: 0.43 }),
style({ animationTimingFunction: 'cubic-bezier(0.215, 0.610, 0.355, 1.000)', transform: 'translate3d(0, 0, 0)', offset: 0.53 }),
style({ animationTimingFunction: 'cubic-bezier(0.755, 0.050, 0.855, 0.060)', transform: 'translate3d(0, -15px, 0)', offset: .7 }),
style({ animationTimingFunction: 'cubic-bezier(0.215, 0.610, 0.355, 1.000)', transform: 'translate3d(0, 0, 0)', offset: 0.8 }),
style({ transform: 'translate3d(0, -4px, 0)', offset: .9 }),
style({ animationTimingFunction: 'cubic-bezier(0.215, 0.610, 0.355, 1.000)', transform: 'translate3d(0, 0, 0)', offset: 1.0 }),
])),
]),
], { params: { duration: 500, delay: '0', ease: 'ease-out' } }),
]);
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/**
* const tdFlashAnimation
*
* Parameter Options:
* * duration: Duration the animation will run in milliseconds. Defaults to 500 ms.
* * delay: Delay before the animation will run in milliseconds. Defaults to 0 ms.
* * ease: Animation accelerate and decelerate style. Defaults to ease-out.
*
* Returns an [AnimationTriggerMetadata] object with boolean states for a flash animation.
*
* usage: [\@tdFlash]="{ value: true | false, params: { duration: 200 }}"
* @type {?}
*/
const tdFlashAnimation = trigger('tdFlash', [
state('0', style({
opacity: 1,
})),
state('1', style({
opacity: 1,
})),
transition('0 <=> 1', [
group([
query('@*', animateChild(), { optional: true }),
animate('{{ duration }}ms {{ delay }}ms {{ ease }}', keyframes([
style({ opacity: 1, offset: 0 }),
style({ opacity: 0, offset: 0.25 }),
style({ opacity: 1, offset: 0.5 }),
style({ opacity: 0, offset: 0.75 }),
style({ opacity: 1, offset: 1.0 }),
])),
]),
], { params: { duration: 500, delay: '0', ease: 'ease-out' } }),
]);
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/**
* const tdHeadshakeAnimation
*
* Parameter Options:
* * duration: Duration the animation will run in milliseconds. Defaults to 500 ms.
* * delay: Delay before the animation will run in milliseconds. Defaults to 0 ms.
* * ease: Animation accelerate and decelerate style. Defaults to ease-out.
*
* Returns an [AnimationTriggerMetadata] object with boolean states for a headshake animation.
*
* usage: [\@tdHeadshake]="{ value: true | false, params: { duration: 200 }}"
* @type {?}
*/
const tdHeadshakeAnimation = trigger('tdHeadshake', [
state('0', style({
transform: 'translateX(0)',
})),
state('1', style({
transform: 'translateX(0)',
})),
transition('0 <=> 1', [
group([
query('@*', animateChild(), { optional: true }),
animate('{{ duration }}ms {{ delay }}ms {{ ease }}', keyframes([
style({ transform: 'translateX(0)', offset: 0 }),
style({ transform: 'translateX(-6px) rotateY(-9deg)', offset: 0.065 }),
style({ transform: 'translateX(5px) rotateY(7deg)', offset: 0.185 }),
style({ transform: 'translateX(-3px) rotateY(-5deg)', offset: 0.315 }),
style({ transform: 'translateX(2px) rotateY(3deg)', offset: 0.435 }),
style({ transform: 'translateX(0)', offset: 0.50 }),
])),
]),
], { params: { duration: 500, delay: '0', ease: 'ease-out' } }),
]);
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/**
* const tdJelloAnimation
*
* Parameter Options:
* * duration: Duration the animation will run in milliseconds. Defaults to 500 ms.
* * delay: Delay before the animation will run in milliseconds. Defaults to 0 ms.
* * ease: Animation accelerate and decelerate style. Defaults to ease-out.
*
* Returns an [AnimationTriggerMetadata] object with boolean states for a jello animation.
*
* usage: [\@tdJello]="{ value: true | false, params: { duration: 200 }}"
* @type {?}
*/
const tdJelloAnimation = trigger('tdJello', [
state('0', style({
transform: 'none',
})),
state('1', style({
transform: 'none',
})),
transition('0 <=> 1', [
group([
query('@*', animateChild(), { optional: true }),
animate('{{ duration }}ms {{ delay }}ms {{ ease }}', keyframes([
style({ transform: 'none', offset: 0 }),
style({ transform: 'none', offset: 0.011 }),
style({ transform: 'skewX(-12.5deg) skewY(-12.5deg)', offset: 0.222 }),
style({ transform: 'skewX(6.25deg) skewY(6.25deg)', offset: 0.333 }),
style({ transform: 'skewX(-3.125deg) skewY(-3.125deg)', offset: 0.444 }),
style({ transform: 'skewX(1.5625deg) skewY(1.5625deg)', offset: 0.555 }),
style({ transform: 'skewX(-0.78125deg) skewY(-0.78125deg)', offset: 0.666 }),
style({ transform: 'skewX(0.390625deg) skewY(0.390625deg)', offset: 0.777 }),
style({ transform: 'skewX(-0.1953125deg) skewY(-0.1953125deg)', offset: 0.888 }),
])),
]),
], { params: { duration: 500, delay: '0', ease: 'ease-out' } }),
]);
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/**
* const tdPulseAnimation
*
* Parameter Options:
* * duration: Duration the animation will run in milliseconds. Defaults to 500 ms.
* * delay: Delay before the animation will run in milliseconds. Defaults to 0 ms.
* * ease: Animation accelerate and decelerate style. Defaults to ease-out.
*
* Returns an [AnimationTriggerMetadata] object with boolean states for a pulse animation.
*
* usage: [\@tdPulse]="{ value: true | false, params: { duration: 200 }}"
* @type {?}
*/
const tdPulseAnimation = trigger('tdPulse', [
state('0', style({
transform: 'scale3d(1, 1, 1)',
})),
state('1', style({
transform: 'scale3d(1, 1, 1)',
})),
transition('0 <=> 1', [
group([
query('@*', animateChild(), { optional: true }),
animate('{{ duration }}ms {{ delay }}ms {{ ease }}', keyframes([
style({ transform: 'scale3d(1, 1, 1)', offset: 0 }),
style({ transform: 'scale3d(1.05, 1.05, 1.05)', offset: 0.5 }),
style({ transform: 'scale3d(1, 1, 1)', offset: 1.0 }),
])),
]),
], { params: { duration: 500, delay: '0', ease: 'ease-out' } }),
]);
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/** @type {?} */
const noop = () => {
// empty method
};
/**
* Mixin to augment a component with ngModel support.
* @template T
* @param {?} base
* @param {?=} initialValue
* @return {?}
*/
function mixinControlValueAccessor$1(base, initialValue) {
return class extends base {
/**
* @param {...?} args
*/
constructor(...args) {
super(...args);
this._value = initialValue instanceof Array ? Object.assign([], initialValue) : initialValue;
this.onChange = (_) => noop;
this.onTouched = () => noop;
this._subjectValueChanges = new Subject();
this.valueChanges = this._subjectValueChanges.asObservable();
}
/**
* @param {?} v
* @return {?}
*/
set value(v) {
if (v !== this._value) {
this._value = v;
this.onChange(v);
this._changeDetectorRef.markForCheck();
this._subjectValueChanges.next(v);
}
}
/**
* @return {?}
*/
get value() {
return this._value;
}
/**
* @param {?} value
* @return {?}
*/
writeValue(value) {
this.value = value;
this._changeDetectorRef.markForCheck();
}
/**
* @param {?} fn
* @return {?}
*/
registerOnChange(fn) {
this.onChange = fn;
}
/**
* @param {?} fn
* @return {?}
*/
registerOnTouched(fn) {
this.onTouched = fn;
}
};
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/**
* Mixin to augment a component or directive with a `disabled` property.
* @template T
* @param {?} base
* @return {?}
*/
function mixinDisabled$1(base) {
return class extends base {
/**
* @param {...?} args
*/
constructor(...args) {
super(...args);
this._disabled = false;
}
/**
* @return {?}
*/
get disabled() {
return this._disabled;
}
/**
* @param {?} value
* @return {?}
*/
set disabled(value) {
/** @type {?} */
let newValue = coerceBooleanProperty(value);
if (this._disabled !== newValue) {
this._disabled = newValue;
this.onDisabledChange(this._disabled);
}
}
/**
* @param {?} v
* @return {?}
*/
onDisabledChange(v) {
/** NOT IMPLEMENTED, this needs to be overriden by subclasses if needed */
}
};
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/**
* Mixin to augment a component or directive with a `disabled` property.
* @template T
* @param {?} base
* @return {?}
*/
function mixinDisableRipple$1(base) {
return class extends base {
/**
* @param {...?} args
*/
constructor(...args) {
super(...args);
this._disableRipple = false;
}
/**
* @return {?}
*/
get disableRipple() {
return this._disableRipple;
}
/**
* @param {?} value
* @return {?}
*/
set disableRipple(value) {
/** @type {?} */
let newValue = coerceBooleanProperty(value);
if (this._disableRipple !== newValue) {
this._disableRipple = newValue;
this.onDisableRippleChange(this._disableRipple);
}
}
/**
* @param {?} v
* @return {?}
*/
onDisableRippleChange(v) {
/** NOT IMPLEMENTED, this needs to be overriden by subclasses if needed */
}
};
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class CovalentValidators {
/**
* @param {?} minValue
* @return {?}
*/
static min(minValue) {
/** @type {?} */
let func = (c) => {
if (!!Validators.required(c) || (!minValue && minValue !== 0)) {
return undefined;
}
/** @type {?} */
let v = c.value;
return v < minValue ?
{ min: { minValue: minValue, actualValue: v } } :
undefined;
};
return func;
}
/**
* @param {?} maxValue
* @return {?}
*/
static max(maxValue) {
/** @type {?} */
let func = (c) => {
if (!!Validators.required(c) || (!maxValue && maxValue !== 0)) {
return undefined;
}
/** @type {?} */
let v = c.value;
return v > maxValue ?
{ max: { maxValue: maxValue, actualValue: v } } :
undefined;
};
return func;
}
/**
* @param {?} c
* @return {?}
*/
static numberRequired(c) {
return (Number.isNaN(c.value)) ?
{ required: true } :
undefined;
}
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class TdMessageContainerDirective {
/**
* @param {?} viewContainer
*/
constructor(viewContainer) {
this.viewContainer = viewContainer;
}
}
TdMessageContainerDirective.decorators = [
{ type: Directive, args: [{
selector: '[tdMessageContainer]',
},] }
];
/** @nocollapse */
TdMessageContainerDirective.ctorParameters = () => [
{ type: ViewContainerRef }
];
class TdMessageComponent {
/**
* @param {?} _renderer
* @param {?} _changeDetectorRef
* @param {?} _elementRef
*/
constructor(_renderer, _changeDetectorRef, _elementRef) {
this._renderer = _renderer;
this._changeDetectorRef = _changeDetectorRef;
this._elementRef = _elementRef;
this._opened = true;
this._hidden = false;
this._animating = false;
this._initialized = false;
/**
* icon?: string
*
* The icon to be displayed before the title.
* Defaults to `info_outline` icon
*/
this.icon = 'info_outline';
this._renderer.addClass(this._elementRef.nativeElement, 'td-message');
}
/**
* Binding host to tdCollapse animation
* @return {?}
*/
get collapsedAnimation() {
return { value: !this._opened, duration: 100 };
}
/**
* Binding host to display style when hidden
* @return {?}
*/
get hidden() {
return this._hidden ? 'none' : undefined;
}
/**
* color?: primary | accent | warn
*
* Sets the color of the message.
* Can also use any material color: purple | light-blue, etc.
* @param {?} color
* @return {?}
*/
set color(color) {
this._renderer.removeClass(this._elementRef.nativeElement, 'mat-' + this._color);
this._renderer.removeClass(this._elementRef.nativeElement, 'bgc-' + this._color + '-100');
this._renderer.removeClass(this._elementRef.nativeElement, 'tc-' + this._color + '-700');
if (color === 'primary' || color === 'accent' || color === 'warn') {
this._renderer.addClass(this._elementRef.nativeElement, 'mat-' + color);
}
else {
this._renderer.addClass(this._elementRef.nativeElement, 'bgc-' + color + '-100');
this._renderer.addClass(this._elementRef.nativeElement, 'tc-' + color + '-700');
}
this._color = color;
this._changeDetectorRef.markForCheck();
}
/**
* @return {?}
*/
get color() {
return this._color;
}
/**
* opened?: boolean
*
* Shows or hiddes the message depending on its value.
* Defaults to 'true'.
* @param {?} opened
* @return {?}
*/
set opened(opened) {
if (this._initialized) {
if (opened) {
this.open();
}
else {
this.close();
}
}
else {
this._opened = opened;
}
}
/**
* @return {?}
*/
get opened() {
return this._opened;
}
/**
* Detach element when close animation is finished to set animating state to false
* hidden state to true and detach element from DOM
* @return {?}
*/
animationDoneListener() {
if (!this._opened) {
this._hidden = true;
this._detach();
}
this._animating = false;
this._changeDetectorRef.markForCheck();
}
/**
* Initializes the component and attaches the content.
* @return {?}
*/
ngAfterViewInit() {
Promise.resolve(undefined).then(() => {
if (this._opened) {
this._attach();
}
this._initialized = true;
});
}
/**
* Renders the message on screen
* Validates if there is an animation currently and if its already opened
* @return {?}
*/
open() {
if (!this._opened && !this._animating) {
this._opened = true;
this._attach();
this._startAnimationState();
}
}
/**
* Removes the message content from screen.
* Validates if there is an animation currently and if its already closed
* @return {?}
*/
close() {
if (this._opened && !this._animating) {
this._opened = false;
this._startAnimationState();
}
}
/**
* Toggles between open and close depending on state.
* @return {?}
*/
toggle() {
if (this._opened) {
this.close();
}
else {
this.open();
}
}
/**
* Method to set the state before starting an animation
* @return {?}
*/
_startAnimationState() {
this._animating = true;
this._hidden = false;
this._changeDetectorRef.markForCheck();
}
/**
* Method to attach template to DOM
* @return {?}
*/
_attach() {
this._childElement.viewContainer.createEmbeddedView(this._template);
this._changeDetectorRef.markForCheck();
}
/**
* Method to detach template from DOM
* @return {?}
*/
_detach() {
this._childElement.viewContainer.clear();
this._changeDetectorRef.markForCheck();
}
}
TdMessageComponent.decorators = [
{ type: Component, args: [{
selector: 'td-message',
template: "<div tdMessageContainer></div>\n<ng-template>\n <div class=\"td-message-wrapper\">\n <mat-icon class=\"td-message-icon\">{{icon}}</mat-icon>\n <div class=\"td-message-labels\">\n <div *ngIf=\"label\" class=\"td-message-label\">{{label}}</div>\n <div *ngIf=\"sublabel\" class=\"td-message-sublabel\">{{sublabel}}</div>\n </div>\n <ng-content select=\"[td-message-actions]\"></ng-content>\n </div>\n</ng-template>",
animations: [
tdCollapseAnimation,
],
styles: [":host{display:block}:host .td-message-wrapper{padding:8px 16px;min-height:52px;-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:center;align-content:center;max-width:100%;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}:host .td-message-wrapper .td-message-labels{-webkit-box-flex:1;-ms-flex:1;flex:1}.td-message-icon{margin-right:16px}::ng-deep [dir=rtl] .td-message-icon{margin-left:16px;margin-right:0}"]
}] }
];
/** @nocollapse */
TdMessageComponent.ctorParameters = () => [
{ type: Renderer2 },
{ type: ChangeDetectorRef },
{ type: ElementRef }
];
TdMessageComponent.propDecorators = {
_childElement: [{ type: ViewChild, args: [TdMessageContainerDirective,] }],
_template: [{ type: ViewChild, args: [TemplateRef,] }],
collapsedAnimation: [{ type: HostBinding, args: ['@tdCollapse',] }],
hidden: [{ type: HostBinding, args: ['style.display',] }],
label: [{ type: Input, args: ['label',] }],
sublabel: [{ type: Input, args: ['sublabel',] }],
icon: [{ type: Input, args: ['icon',] }],
color: [{ type: Input, args: ['color',] }],
opened: [{ type: Input, args: ['opened',] }],
animationDoneListener: [{ type: HostListener, args: ['@tdCollapse.done',] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/** @type {?} */
const TD_MESSAGE = [
TdMessageComponent,
TdMessageContainerDirective,
];
class CovalentMessageModule {
}
CovalentMessageModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule,
MatIconModule,
],
declarations: [
TD_MESSAGE,
],
exports: [
TD_MESSAGE,
],
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class TdChipDirective extends TemplatePortalDirective {
/**
* @param {?} templateRef
* @param {?} viewContainerRef
*/
constructor(templateRef, viewContainerRef) {
super(templateRef, viewContainerRef);
}
}
TdChipDirective.decorators = [
{ type: Directive, args: [{
selector: '[td-chip]ng-template',
},] }
];
/** @nocollapse */
TdChipDirective.ctorParameters = () => [
{ type: TemplateRef },
{ type: ViewContainerRef }
];
class TdAutocompleteOptionDirective extends TemplatePortalDirective {
/**
* @param {?} templateRef
* @param {?} viewContainerRef
*/
constructor(templateRef, viewContainerRef) {
super(templateRef, viewContainerRef);
}
}
TdAutocompleteOptionDirective.decorators = [
{ type: Directive, args: [{
selector: '[td-autocomplete-option]ng-template',
},] }
];
/** @nocollapse */
TdAutocompleteOptionDirective.ctorParameters = () => [
{ type: TemplateRef },
{ type: ViewContainerRef }
];
class TdChipsBase {
/**
* @param {?} _changeDetectorRef
*/
constructor(_changeDetectorRef) {
this._changeDetectorRef = _changeDetectorRef;
}
}
/* tslint:disable-next-line */
/** @type {?} */
const _TdChipsMixinBase = mixinControlValueAccessor(mixinDisabled(TdChipsBase), []);
class TdChipsComponent extends _TdChipsMixinBase {
/**
* @param {?} _elementRef
* @param {?} _renderer
* @param {?} _document
* @param {?} _changeDetectorRef
*/
constructor(_elementRef, _renderer, _document, _changeDetectorRef) {
super(_changeDetectorRef);
this._elementRef = _elementRef;
this._renderer = _renderer;
this._document = _document;
this._outsideClickSubs = Subscription.EMPTY;
this._inputValueChangesSubs = Subscription.EMPTY;
this._isMousedown = false;
this._length = 0;
this._stacked = false;
this._requireMatch = false;
this._color = 'primary';
this._inputPosition = 'after';
this._chipAddition = true;
this._chipRemoval = true;
this._focused = false;
this._required = false;
this._tabIndex = 0;
this._touchendDebounce = 100;
this._internalClick = false;
this._internalActivateOption = false;
/**
* FormControl for the matInput element.
*/
this.inputControl = new FormControl();
/**
* debounce?: number
* Debounce timeout between keypresses. Defaults to 200.
*/
this.debounce = 200;
/**
* add?: function
* Method to be executed when a chip is added.
* Sends chip value as event.
*/
this.onAdd = new EventEmitter();
/**
* remove?: function
* Method to be executed when a chip is removed.
* Sends chip value as event.
*/
this.onRemove = new EventEmitter();
/**
* inputChange?: function
* Method to be executed when the value in the autocomplete input changes.
* Sends string value as event.
*/
this.onInputChange = new EventEmitter();
/**
* chipFocus?: function
* Method to be executed when a chip is focused.
* Sends chip value as event.
*/
this.onChipFocus = new EventEmitter();
/**
* blur?: function
* Method to be executed when a chip is blurred.
* Sends chip value as event.
*/
this.onChipBlur = new EventEmitter();
/**
* compareWith? function
* Function used to check whether a chip value already exists.
* Defaults to strict equality comparison ===
*/
this.compareWith = (o1, o2) => {
return o1 === o2;
};
this._renderer.addClass(this._elementRef.nativeElement, 'mat-' + this._color);
}
/**
* Flag that is true when autocomplete is focused.
* @return {?}
*/
get focused() {
return this._focused;
}
/**
* items?: any[]
* Renders the `mat-autocomplete` with the provided list to display as options.
* @param {?} items
* @return {?}
*/
set items(items) {
this._items = items;
this._setFirstOptionActive();
this._changeDetectorRef.markForCheck();
}
/**
* @return {?}
*/
get items() {
return this._items;
}
/**
* stacked?: boolean
* Set stacked or horizontal chips depending on value.
* Defaults to false.
* @param {?} stacked
* @return {?}
*/
set stacked(stacked) {
this._stacked = coerceBooleanProperty(stacked);
}
/**
* @return {?}
*/
get stacked() {
return this._stacked;
}
/**
* inputPosition?: 'before' | 'after'
* Set input position before or after the chips.
* Defaults to 'after'.
* @param {?} inputPosition
* @return {?}
*/
set inputPosition(inputPosition) {
this._inputPosition = inputPosition;
}
/**
* @return {?}
*/
get inputPosition() {
return this._inputPosition;
}
/**
* requireMatch?: boolean
* Blocks custom inputs and only allows selections from the autocomplete list.
* @param {?} requireMatch
* @return {?}
*/
set requireMatch(requireMatch) {
this._requireMatch = coerceBooleanProperty(requireMatch);
}
/**
* @return {?}
*/
get requireMatch() {
return this._requireMatch;
}
/**
* required?: boolean
* Value is set to true if at least one chip is needed
* Defaults to false
* @param {?} required
* @return {?}
*/
set required(required) {
this._required = coerceBooleanProperty(required);
}
/**
* @return {?}
*/
get required() {
return this._required;
}
/**
* chipAddition?: boolean
* Disables the ability to add chips. When setting disabled as true, this will be overriden.
* Defaults to true.
* @param {?} chipAddition
* @return {?}
*/
set chipAddition(chipAddition) {
this._chipAddition = chipAddition;
this._toggleInput();
}
/**
* @return {?}
*/
get chipAddition() {
return this._chipAddition;
}
/**
* Checks if not in disabled state and if chipAddition is set to 'true'
* States if a chip can be added and if the input is available
* @return {?}
*/
get canAddChip() {
return this.chipAddition && !this.disabled;
}
/**
* chipRemoval?: boolean
* Disables the ability to remove chips. If it doesn't exist chip remmoval defaults to true.
* When setting disabled as true, this will be overriden to false.
* @param {?} chipRemoval
* @return {?}
*/
set chipRemoval(chipRemoval) {
this._chipRemoval = chipRemoval;
}
/**
* @return {?}
*/
get chipRemoval() {
return this._chipRemoval;
}
/**
* Checks if not in disabled state and if chipRemoval is set to 'true'
* States if a chip can be removed
* @return {?}
*/
get canRemoveChip() {
return this.chipRemoval && !this.disabled;
}
/**
* returns the display placeholder
* @return {?}
*/
get displayPlaceHolder() {
if (!this.canAddChip) {
return '';
}
return (this._required) ? `${this.placeholder} *` : this.placeholder;
}
/**
* color?: 'primary' | 'accent' | 'warn'
* Sets the color for the input and focus/selected state of the chips.
* Defaults to 'primary'
* @param {?} color
* @return {?}
*/
set color(color) {
if (color) {
this._renderer.removeClass(this._elementRef.nativeElement, 'mat-' + this._color);
this._color = color;
this._renderer.addClass(this._elementRef.nativeElement, 'mat-' + this._color);
}
}
/**
* @return {?}
*/
get color() {
return this._color;
}
/**
* Hostbinding to set the a11y of the TdChipsComponent depending on its state
* @return {?}
*/
get tabIndex() {
return this.disabled ? -1 : this._tabIndex;
}
/**
* Listens to host focus event to act on it
* @param {?} event
* @return {?}
*/
focusListener(event) {
// should only focus if its not via mousedown to prevent clashing with autocomplete
if (!this._isMousedown) {
this.focus();
}
event.preventDefault();
}
/**
* Listens to host mousedown event to act on it
* @param {?} event
* @return {?}
*/
mousedownListener(event) {
// sets a flag to know if there was a mousedown and then it returns it back to false
this._isMousedown = true;
timer().toPromise().then(() => {
this._isMousedown = false;
});
}
/**
* If clicking on :host or `td-chips-wrapper`, then we stop the click propagation so the autocomplete
* doesnt close automatically.
* @param {?} event
* @return {?}
*/
clickListener(event) {
/** @type {?} */
const clickTarget = (/** @type {?} */ (event.target));
if (clickTarget === this._elementRef.nativeElement ||
clickTarget.className.indexOf('td-chips-wrapper') > -1) {
this.focus();
event.preventDefault();
event.stopPropagation();
}
}
/**
* Listens to host keydown event to act on it depending on the keypress
* @param {?} event
* @return {?}
*/
keydownListener(event) {
switch (event.keyCode) {
case TAB:
// if tabing out, then unfocus the component
timer().toPromise().then(() => {
this.removeFocusedState();
});
break;
case ESCAPE:
if (this._inputChild.focused) {
this._nativeInput.nativeElement.blur();
this.removeFocusedState();
this._closeAutocomplete();
}
else {
this.focus();
}
break;
default:
// default
}
}
/**
* @return {?}
*/
ngOnInit() {
this._inputValueChangesSubs = this.inputControl.valueChanges.pipe(debounceTime(this.debounce)).subscribe((value) => {
this.onInputChange.emit(value ? value : '');
});
this._changeDetectorRef.markForCheck();
}
/**
* @return {?}
*/
ngAfterViewInit() {
this._watchOutsideClick();
this._changeDetectorRef.markForCheck();
}
/**
* @return {?}
*/
ngDoCheck() {
// 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);
}
}
/**
* @return {?}
*/
ngOnDestroy() {
this._outsideClickSubs.unsubscribe();
this._inputValueChangesSubs.unsubscribe();
}
/**
* @return {?}
*/
_setInternalClick() {
this._internalClick = true;
}
/**
* Method executed when the disabled value changes
* @param {?} v
* @return {?}
*/
onDisabledChange(v) {
this._toggleInput();
}
/**
* Method that is executed when trying to create a new chip from the autocomplete.
* It check if [requireMatch] is enabled, and tries to add the first active option
* else if just adds the value thats on the input
* returns 'true' if successful, 'false' if it fails.
* @return {?}
*/
_handleAddChip() {
/** @type {?} */
let value;
if (this.requireMatch) {
/** @type {?} */
let selectedOptions = this._options.toArray().filter((option) => {
return option.active;
});
if (selectedOptions.length > 0) {
value = selectedOptions[0].value;
selectedOptions[0].setInactiveStyles();
}
if (!value) {
return false;
}
}
else {
// if there is a selection, then use that
// else use the input value as chip
if (this._autocompleteTrigger.activeOption) {
value = this._autocompleteTrigger.activeOption.value;
this._autocompleteTrigger.activeOption.setInactiveStyles();
}
else {
value = this._inputChild.value;
if (value.trim() === '') {
return false;
}
}
}
return this.addChip(value);
}
/**
* Method thats exectuted when trying to add a value as chip
* returns 'true' if successful, 'false' if it fails.
* @param {?} value
* @return {?}
*/
addChip(value) {
/**
* add a debounce ms delay when reopening the autocomplete to give it time
* to rerender the next list and at the correct spot
*/
this._closeAutocomplete();
timer(this.debounce).toPromise().then(() => {
this.setFocusedState();
this._setFirstOptionActive();
this._openAutocomplete();
});
this.inputControl.setValue('');
// check if value is already part of the model
if (this.value.findIndex((item) => this.compareWith(item, value)) > -1) {
return false;
}
this.value.push(value);
this.onAdd.emit(value);
this.onChange(this.value);
this._changeDetectorRef.markForCheck();
return true;
}
/**
* Method that is executed when trying to remove a chip.
* returns 'true' if successful, 'false' if it fails.
* @param {?} index
* @return {?}
*/
removeChip(index) {
/** @type {?} */
let removedValues = this.value.splice(index, 1);
if (removedValues.length === 0) {
return false;
}
/**
* 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._inputChild.focus();
}
else if (index < (this._totalChips - 1)) {
this._focusChip(index + 1);
}
else if (index > 0) {
this._focusChip(index - 1);
}
this.onRemove.emit(removedValues[0]);
this.onChange(this.value);
this.inputControl.setValue('');
this._changeDetectorRef.markForCheck();
return true;
}
/**
* Sets blur of chip and sends out event
* @param {?} event
* @param {?} value
* @return {?}
*/
_handleChipBlur(event, value) {
this.onChipBlur.emit(value);
}
/**
* Sets focus of chip and sends out event
* @param {?} event
* @param {?} value
* @return {?}
*/
_handleChipFocus(event, value) {
this.setFocusedState();
this.onChipFocus.emit(value);
}
/**
* @return {?}
*/
_handleFocus() {
this.setFocusedState();
this._setFirstOptionActive();
return true;
}
/**
* Sets focus state of the component
* @return {?}
*/
setFocusedState() {
if (!this.disabled) {
this._focused = true;
this._tabIndex = -1;
this._changeDetectorRef.markForCheck();
}
}
/**
* Removes focus state of the component
* @return {?}
*/
removeFocusedState() {
this._focused = false;
this._tabIndex = 0;
this._changeDetectorRef.markForCheck();
}
/**
* Programmatically focus the input or first chip. Since its the component entry point
* depending if a user can add or remove chips
* @return {?}
*/
focus() {
if (this.canAddChip) {
this._inputChild.focus();
}
else if (!this.disabled) {
this._focusFirstChip();
}
}
/**
* Passes relevant input key presses.
* @param {?} event
* @return {?}
*/
_inputKeydown(event) {
switch (event.keyCode) {
case UP_ARROW:
/**
* Since the first item is highlighted on [requireMatch], we need to inactivate it
* when pressing the up key
*/
if (this.requireMatch) {
/** @type {?} */
let length = this._options.length;
if (length > 1 && this._options.toArray()[0].active && this._internalActivateOption) {
this._options.toArray()[0].setInactiveStyles();
this._internalActivateOption = false;
// prevent default window scrolling
event.preventDefault();
}
}
break;
case LEFT_ARROW:
case DELETE:
case BACKSPACE:
this._closeAutocomplete();
/** Check to see if input is empty when pressing left arrow to move to the last chip */
if (!this._inputChild.value) {
this._focusLastChip();
// prevent default window scrolling
event.preventDefault();
}
break;
case RIGHT_ARROW:
this._closeAutocomplete();
/** Check to see if input is empty when pressing right arrow to move to the first chip */
if (!this._inputChild.value) {
this._focusFirstChip();
// prevent default window scrolling
event.preventDefault();
}
break;
default:
// default
}
}
/**
* Passes relevant chip key presses.
* @param {?} event
* @param {?} index
* @return {?}
*/
_chipKeydown(event, index) {
switch (event.keyCode) {
case DELETE:
case BACKSPACE:
/** Check to see if we can delete a chip */
if (this.canRemoveChip) {
this.removeChip(index);
}
break;
case UP_ARROW:
case LEFT_ARROW:
/**
* Check to see if left/down arrow was pressed while focusing the first chip to focus input next
* Also check if input should be focused
*/
if (index === 0) {
// only try to target input if pressing left
if (this.canAddChip && event.keyCode === LEFT_ARROW) {
this._inputChild.focus();
}
else {
this._focusLastChip();
}
}
else if (index > 0) {
this._focusChip(index - 1);
}
// prevent default window scrolling
event.preventDefault();
break;
case DOWN_ARROW:
case RIGHT_ARROW:
/**
* Check to see if right/up arrow was pressed while focusing the last chip to focus input next
* Also check if input should be focused
*/
if (index === (this._totalChips - 1)) {
// only try to target input if pressing right
if (this.canAddChip && event.keyCode === RIGHT_ARROW) {
this._inputChild.focus();
}
else {
this._focusFirstChip();
}
}
else if (index < (this._totalChips - 1)) {
this._focusChip(index + 1);
}
// prevent default window scrolling
event.preventDefault();
break;
default:
// default
}
}
/**
* Method to remove from display the value added from the autocomplete since it goes directly as chip.
* @return {?}
*/
_removeInputDisplay() {
return '';
}
/**
* Method to open the autocomplete manually if its not already opened
* @return {?}
*/
_openAutocomplete() {
if (!this._autocompleteTrigger.panelOpen) {
this._autocompleteTrigger.openPanel();
this._changeDetectorRef.markForCheck();
}
}
/**
* Method to close the autocomplete manually if its not already closed
* @return {?}
*/
_closeAutocomplete() {
if (this._autocompleteTrigger.panelOpen) {
this._autocompleteTrigger.closePanel();
this._changeDetectorRef.markForCheck();
}
}
/**
* Get total of chips
* @return {?}
*/
get _totalChips() {
/** @type {?} */
let chips = this._chipsChildren.toArray();
return chips.length;
}
/**
* Method to focus a desired chip by index
* @param {?} index
* @return {?}
*/
_focusChip(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 {?}
*/
_focusFirstChip() {
this._focusChip(0);
}
/**
* Method to focus last chip
* @return {?}
*/
_focusLastChip() {
this._focusChip(this._totalChips - 1);
}
/**
* Method to toggle the disable state of input
* Checks if not in disabled state and if chipAddition is set to 'true'
* @return {?}
*/
_toggleInput() {
if (this.canAddChip) {
this.inputControl.enable();
}
else {
this.inputControl.disable();
}
this._changeDetectorRef.markForCheck();
}
/**
* Sets first option as active to let the user know which one will be added when pressing enter
* Only if [requireMatch] has been set
* @return {?}
*/
_setFirstOptionActive() {
if (this.requireMatch) {
// need to use a timer here to wait until the autocomplete has been opened (end of queue)
timer().toPromise().then(() => {
if (this.focused && this._options && this._options.length > 0) {
// clean up of previously active options
this._options.toArray().forEach((option) => {
option.setInactiveStyles();
});
// set the first one as active
this._options.toArray()[0].setActiveStyles();
this._internalActivateOption = true;
this._changeDetectorRef.markForCheck();
}
});
}
}
/**
* Watches clicks outside of the component to remove the focus
* The autocomplete panel is considered inside the component so we
* need to use a flag to find out when its clicked.
* @return {?}
*/
_watchOutsideClick() {
if (this._document) {
this._outsideClickSubs = merge(fromEvent(this._document, 'click'), fromEvent(this._document, 'touchend')).pipe(debounceTime(this._touchendDebounce), filter((event) => {
/** @type {?} */
const clickTarget = (/** @type {?} */ (event.target));
setTimeout(() => {
this._internalClick = false;
});
return this.focused &&
(clickTarget !== this._elementRef.nativeElement) &&
!this._elementRef.nativeElement.contains(clickTarget) && !this._internalClick;
})).subscribe(() => {
if (this.focused) {
this._autocompleteTrigger.closePanel();
this.removeFocusedState();
this.onTouched();
this._changeDetectorRef.markForCheck();
}
});
}
return undefined;
}
}
TdChipsComponent.decorators = [
{ type: Component, args: [{
providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => TdChipsComponent),
multi: true,
}],
selector: 'td-chips',
inputs: ['disabled', 'value'],
template: "<div class=\"td-chips-wrapper\"\n [class.td-chips-stacked]=\"stacked\"\n [class.td-chips-input-before-position]=\"inputPosition === 'before'\">\n <ng-template let-chip let-first=\"first\" let-index=\"index\" ngFor [ngForOf]=\"value\">\n <mat-basic-chip [class.td-chip-disabled]=\"disabled\"\n [class.td-chip-after-pad]=\"!canRemoveChip\"\n [disableRipple]=\"true\"\n [color]=\"color\"\n (keydown)=\"_chipKeydown($event, index)\"\n (blur)=\"_handleChipBlur($event, chip)\"\n (focus)=\"_handleChipFocus($event, chip)\">\n <div class=\"td-chip\" [class.td-chip-stacked]=\"stacked\">\n <span class=\"td-chip-content\">\n <span *ngIf=\"!_chipTemplate?.templateRef\">{{chip}}</span>\n <ng-template\n *ngIf=\"_chipTemplate?.templateRef\"\n [ngTemplateOutlet]=\"_chipTemplate?.templateRef\"\n [ngTemplateOutletContext]=\"{ chip: chip }\">\n </ng-template>\n </span>\n <mat-icon *ngIf=\"canRemoveChip\" class=\"td-chip-removal\" (click)=\"_internalClick = removeChip(index)\">\n cancel\n </mat-icon>\n </div>\n </mat-basic-chip>\n </ng-template>\n <mat-form-field floatLabel=\"never\"\n class=\"td-chips-form-field\"\n [style.width.px]=\"canAddChip ? null : 0\"\n [style.height.px]=\"canAddChip ? null : 0\"\n [color]=\"color\">\n <input matInput\n #input\n [tabIndex]=\"-1\"\n [matAutocomplete]=\"autocomplete\"\n [formControl]=\"inputControl\"\n [placeholder]=\"displayPlaceHolder\"\n (keydown)=\"_inputKeydown($event)\"\n (keyup.enter)=\"_handleAddChip()\"\n (focus)=\"_handleFocus()\">\n </mat-form-field>\n <mat-autocomplete #autocomplete=\"matAutocomplete\"\n [displayWith]=\"_removeInputDisplay\"\n (optionSelected)=\"addChip($event.option.value)\">\n <ng-template let-item let-first=\"first\" ngFor [ngForOf]=\"items\">\n <mat-option (click)=\"_setInternalClick()\" [value]=\"item\">\n <span *ngIf=\"!_autocompleteOptionTemplate?.templateRef\">{{item}}</span>\n <ng-template\n *ngIf=\"_autocompleteOptionTemplate?.templateRef\"\n [ngTemplateOutlet]=\"_autocompleteOptionTemplate?.templateRef\"\n [ngTemplateOutletContext]=\"{ option: item }\">\n </ng-template>\n </mat-option>\n </ng-template>\n </mat-autocomplete>\n</div>\n<div *ngIf=\"chipAddition\" class=\"mat-form-field-underline\"\n [class.mat-disabled]=\"disabled\">\n <span class=\"mat-form-field-ripple\"\n [class.mat-focused]=\"focused\"></span>\n</div>\n<ng-content></ng-content>",
changeDetection: ChangeDetectionStrategy.OnPush,
styles: [":host{display:block;padding:0 5px;min-height:48px}:host .td-chips-wrapper{min-height:42px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}:host .td-chips-wrapper.td-chips-stacked .mat-basic-chip,:host .td-chips-wrapper.td-chips-stacked .td-chips-form-field{width:100%}:host .td-chips-wrapper.td-chips-input-before-position .td-chips-form-field{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}:host .td-chip,:host .td-chip>.td-chip-content{-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;max-width:100%;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:center;align-content:center;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;min-width:0}:host .td-chip.td-chip-stacked,:host .td-chip>.td-chip-content.td-chip-stacked{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}:host ::ng-deep .mat-form-field-wrapper{padding-bottom:2px}:host ::ng-deep .mat-basic-chip{display:inline-block;cursor:default;border-radius:16px;margin:8px 8px 0 0;-webkit-box-sizing:border-box;box-sizing:border-box;max-width:100%;position:relative}html[dir=rtl] :host ::ng-deep .mat-basic-chip{margin:8px 0 0 8px;unicode-bidi:embed}body[dir=rtl] :host ::ng-deep .mat-basic-chip{margin:8px 0 0 8px;unicode-bidi:embed}[dir=rtl] :host ::ng-deep .mat-basic-chip{margin:8px 0 0 8px;unicode-bidi:embed}:host ::ng-deep .mat-basic-chip bdo[dir=rtl]{direction:rtl;unicode-bidi:bidi-override}:host ::ng-deep .mat-basic-chip bdo[dir=ltr]{direction:ltr;unicode-bidi:bidi-override}:host ::ng-deep .mat-basic-chip .td-chip{min-height:32px;line-height:32px;font-size:13px;padding:0 0 0 12px}html[dir=rtl] :host ::ng-deep .mat-basic-chip .td-chip{padding:0 12px 0 0;unicode-bidi:embed}body[dir=rtl] :host ::ng-deep .mat-basic-chip .td-chip{padding:0 12px 0 0;unicode-bidi:embed}[dir=rtl] :host ::ng-deep .mat-basic-chip .td-chip{padding:0 12px 0 0;unicode-bidi:embed}:host ::ng-deep .mat-basic-chip .td-chip bdo[dir=rtl]{direction:rtl;unicode-bidi:bidi-override}:host ::ng-deep .mat-basic-chip .td-chip bdo[dir=ltr]{direction:ltr;unicode-bidi:bidi-override}:host ::ng-deep .mat-basic-chip .td-chip [td-chip-avatar]{display:inline-block;-webkit-box-ordinal-group:-19;-ms-flex-order:-20;order:-20;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;text-align:center;height:32px;width:32px;margin:0 8px 0 -12px;border-radius:50%;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;-webkit-box-sizing:border-box;box-sizing:border-box}html[dir=rtl] :host ::ng-deep .mat-basic-chip .td-chip [td-chip-avatar]{margin:0 -12px 0 8px;unicode-bidi:embed}body[dir=rtl] :host ::ng-deep .mat-basic-chip .td-chip [td-chip-avatar]{margin:0 -12px 0 8px;unicode-bidi:embed}[dir=rtl] :host ::ng-deep .mat-basic-chip .td-chip [td-chip-avatar]{margin:0 -12px 0 8px;unicode-bidi:embed}:host ::ng-deep .mat-basic-chip .td-chip [td-chip-avatar] bdo[dir=rtl]{direction:rtl;unicode-bidi:bidi-override}:host ::ng-deep .mat-basic-chip .td-chip [td-chip-avatar] bdo[dir=ltr]{direction:ltr;unicode-bidi:bidi-override}:host ::ng-deep .mat-basic-chip.td-chip-after-pad{padding:0 12px 0 0}html[dir=rtl] :host ::ng-deep .mat-basic-chip.td-chip-after-pad{padding:0 0 0 12px;unicode-bidi:embed}body[dir=rtl] :host ::ng-deep .mat-basic-chip.td-chip-after-pad{padding:0 0 0 12px;unicode-bidi:embed}[dir=rtl] :host ::ng-deep .mat-basic-chip.td-chip-after-pad{padding:0 0 0 12px;unicode-bidi:embed}:host ::ng-deep .mat-basic-chip.td-chip-after-pad bdo[dir=rtl]{direction:rtl;unicode-bidi:bidi-override}:host ::ng-deep .mat-basic-chip.td-chip-after-pad bdo[dir=ltr]{direction:ltr;unicode-bidi:bidi-override}:host ::ng-deep .mat-basic-chip mat-icon.td-chip-removal{margin:0 4px;font-size:21px;line-height:22px}:host ::ng-deep .mat-basic-chip mat-icon.td-chip-removal:hover{cursor:pointer}:host ::ng-deep .td-chips-stacked .mat-basic-chip{margin:4px 0}:host ::ng-deep .td-chips-stacked .mat-basic-chip:first-of-type{margin:8px 0 4px}:host ::ng-deep .td-chips-stacked .mat-basic-chip:last-of-type{margin:4px 0 8px}:host .mat-form-field-underline{position:relative;height:1px;width:100%;bottom:0}:host .mat-form-field-underline.mat-disabled{background-position:0;bottom:-4px;background-color:transparent}:host .mat-form-field-underline .mat-form-field-ripple{position:absolute;height:2px;top:0;width:100%;-webkit-transform-origin:50%;-ms-transform-origin:50%;transform-origin:50%;-webkit-transform:scaleX(.5);-ms-transform:scaleX(.5);transform:scaleX(.5);visibility:hidden;opacity:0;-webkit-transition:background-color .3s cubic-bezier(.55,0,.55,.2);transition:background-color .3s cubic-bezier(.55,0,.55,.2)}:host .mat-form-field-underline .mat-form-field-ripple.mat-focused{visibility:visible;opacity:1;-webkit-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1);-webkit-transition:background-color .3s cubic-bezier(.55,0,.55,.2),-webkit-transform 150ms linear;transition:transform 150ms linear,background-color .3s cubic-bezier(.55,0,.55,.2),-webkit-transform 150ms linear}:host.ng-invalid .mat-form-field-underline .mat-form-field-ripple{visibility:visible;opacity:1;-webkit-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1);-webkit-transition:background-color .3s cubic-bezier(.55,0,.55,.2),-webkit-transform 150ms linear;transition:transform 150ms linear,background-color .3s cubic-bezier(.55,0,.55,.2),-webkit-transform 150ms linear}:host ::ng-deep mat-form-field .mat-form-field-underline{display:none}"]
}] }
];
/** @nocollapse */
TdChipsComponent.ctorParameters = () => [
{ type: ElementRef },
{ type: Renderer2 },
{ type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [DOCUMENT,] }] },
{ type: ChangeDetectorRef }
];
TdChipsComponent.propDecorators = {
_nativeInput: [{ type: ViewChild, args: ['input',] }],
_inputChild: [{ type: ViewChild, args: [MatInput,] }],
_autocompleteTrigger: [{ type: ViewChild, args: [MatAutocompleteTrigger,] }],
_chipsChildren: [{ type: ViewChildren, args: [MatChip,] }],
_chipTemplate: [{ type: ContentChild, args: [TdChipDirective,] }],
_autocompleteOptionTemplate: [{ type: ContentChild, args: [TdAutocompleteOptionDirective,] }],
_options: [{ type: ViewChildren, args: [MatOption,] }],
items: [{ type: Input, args: ['items',] }],
stacked: [{ type: Input, args: ['stacked',] }],
inputPosition: [{ type: Input, args: ['inputPosition',] }],
requireMatch: [{ type: Input, args: ['requireMatch',] }],
required: [{ type: Input, args: ['required',] }],
chipAddition: [{ type: Input, args: ['chipAddition',] }],
chipRemoval: [{ type: Input, args: ['chipRemoval',] }],
placeholder: [{ type: Input, args: ['placeholder',] }],
debounce: [{ type: Input, args: ['debounce',] }],
color: [{ type: Input, args: ['color',] }],
onAdd: [{ type: Output, args: ['add',] }],
onRemove: [{ type: Output, args: ['remove',] }],
onInputChange: [{ type: Output, args: ['inputChange',] }],
onChipFocus: [{ type: Output, args: ['chipFocus',] }],
onChipBlur: [{ type: Output, args: ['chipBlur',] }],
tabIndex: [{ type: HostBinding, args: ['attr.tabindex',] }],
compareWith: [{ type: Input, args: ['compareWith',] }],
focusListener: [{ type: HostListener, args: ['focus', ['$event'],] }],
mousedownListener: [{ type: HostListener, args: ['mousedown', ['$event'],] }],
clickListener: [{ type: HostListener, args: ['click', ['$event'],] }],
keydownListener: [{ type: HostListener, args: ['keydown', ['$event'],] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class CovalentChipsModule {
}
CovalentChipsModule.decorators = [
{ type: NgModule, args: [{
imports: [
ReactiveFormsModule,
CommonModule,
MatInputModule,
MatIconModule,
MatChipsModule,
MatAutocompleteModule,
],
declarations: [
TdChipsComponent,
TdChipDirective,
TdAutocompleteOptionDirective,
],
exports: [
TdChipsComponent,
TdChipDirective,
TdAutocompleteOptionDirective,
],
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class TdDataTableColumnRowComponent {
/**
* @param {?} _elementRef
* @param {?} _renderer
*/
constructor(_elementRef, _renderer) {
this._elementRef = _elementRef;
this._renderer = _renderer;
this._renderer.addClass(this._elementRef.nativeElement, 'td-data-table-column-row');
}
}
TdDataTableColumnRowComponent.decorators = [
{ type: Component, args: [{
/* tslint:disable-next-line */
selector: 'tr[td-data-table-column-row]',
template: "<ng-content></ng-content>",
styles: [":host{border-bottom-style:solid;border-bottom-width:1px}:host.td-data-table-row{height:48px}:host.td-data-table-column-row{height:56px}"]
}] }
];
/** @nocollapse */
TdDataTableColumnRowComponent.ctorParameters = () => [
{ type: ElementRef },
{ type: Renderer2 }
];
class TdDataTableRowComponent {
/**
* @param {?} _elementRef
* @param {?} _renderer
*/
constructor(_elementRef, _renderer) {
this._elementRef = _elementRef;
this._renderer = _renderer;
this._selected = false;
this._renderer.addClass(this._elementRef.nativeElement, 'td-data-table-row');
}
/**
* @param {?} selected
* @return {?}
*/
set selected(selected) {
if (selected) {
this._renderer.addClass(this._elementRef.nativeElement, 'td-selected');
}
else {
this._renderer.removeClass(this._elementRef.nativeElement, 'td-selected');
}
this._selected = selected;
}
/**
* @return {?}
*/
get selected() {
return this._selected;
}
/**
* @return {?}
*/
get height() {
/** @type {?} */
let height = 48;
if (this._elementRef.nativeElement) {
height = ((/** @type {?} */ (this._elementRef.nativeElement))).getBoundingClientRect().height;
}
return height;
}
/**
* Listening to click event to explicitly focus the row element.
* @return {?}
*/
clickListener() {
this.focus();
}
/**
* @return {?}
*/
focus() {
this._elementRef.nativeElement.focus();
}
}
TdDataTableRowComponent.decorators = [
{ type: Component, args: [{
/* tslint:disable-next-line */
selector: 'tr[td-data-table-row]',
template: "<ng-content></ng-content>",
styles: [":host{border-bottom-style:solid;border-bottom-width:1px}:host.td-data-table-row{height:48px}:host.td-data-table-column-row{height:56px}"]
}] }
];
/** @nocollapse */
TdDataTableRowComponent.ctorParameters = () => [
{ type: ElementRef },
{ type: Renderer2 }
];
TdDataTableRowComponent.propDecorators = {
selected: [{ type: Input, args: ['selected',] }],
clickListener: [{ type: HostListener, args: ['click',] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class TdDataTableTemplateDirective extends TemplatePortalDirective {
/**
* @param {?} templateRef
* @param {?} viewContainerRef
*/
constructor(templateRef, viewContainerRef) {
super(templateRef, viewContainerRef);
}
}
TdDataTableTemplateDirective.decorators = [
{ type: Directive, args: [{ selector: '[tdDataTableTemplate]ng-template' },] }
];
/** @nocollapse */
TdDataTableTemplateDirective.ctorParameters = () => [
{ type: TemplateRef },
{ type: ViewContainerRef }
];
TdDataTableTemplateDirective.propDecorators = {
tdDataTableTemplate: [{ type: Input }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/** @enum {string} */
const TdDataTableSortingOrder = {
Ascending: 'ASC',
Descending: 'DESC',
};
/**
* Constant to set the rows offset before and after the viewport
* @type {?}
*/
const TD_VIRTUAL_OFFSET$1 = 2;
/**
* Constant to set default row height if none is provided
* @type {?}
*/
const TD_VIRTUAL_DEFAULT_ROW_HEIGHT = 48;
class TdDataTableBase {
/**
* @param {?} _changeDetectorRef
*/
constructor(_changeDetectorRef) {
this._changeDetectorRef = _changeDetectorRef;
}
}
/* tslint:disable-next-line */
/** @type {?} */
const _TdDataTableMixinBase = mixinControlValueAccessor(TdDataTableBase, []);
class TdDataTableComponent extends _TdDataTableMixinBase {
/**
* @param {?} _document
* @param {?} _elementRef
* @param {?} _domSanitizer
* @param {?} _changeDetectorRef
*/
constructor(_document, _elementRef, _domSanitizer, _changeDetectorRef) {
super(_changeDetectorRef);
this._document = _document;
this._elementRef = _elementRef;
this._domSanitizer = _domSanitizer;
this._hostWidth = 0;
/**
* manually resizable columns
*/
this._resizableColumns = false;
this._columnClientX = 0;
this._onColumnResize = new Subject();
this._widths = [];
this._onResize = new Subject();
this._scrollHorizontalOffset = 0;
this._onHorizontalScroll = new Subject();
this._onVerticalScroll = new Subject();
// Array of cached row heights to allow dynamic row heights
this._rowHeightCache = [];
// Total pseudo height of all the elements
this._totalHeight = 0;
// Total host height for the viewport
this._hostHeight = 0;
// Scrolled vertical pixels
this._scrollVerticalOffset = 0;
// Variables that set from and to which rows will be rendered
this._fromRow = 0;
this._toRow = 0;
this._selectable = false;
this._clickable = false;
this._multiple = true;
this._allSelected = false;
this._indeterminate = false;
/**
* sorting
*/
this._sortable = false;
this._sortOrder = TdDataTableSortingOrder.Ascending;
/**
* shift select
*/
this._shiftPreviouslyPressed = false;
this._lastSelectedIndex = -1;
this._firstSelectedIndex = -1;
this._firstCheckboxValue = false;
/**
* template fetching support
*/
this._templateMap = new Map();
/**
* sortChange?: function
* Event emitted when the column headers are clicked. [sortable] needs to be enabled.
* Emits an [ITdDataTableSortChangeEvent] implemented object.
*/
this.onSortChange = new EventEmitter();
/**
* rowSelect?: function
* Event emitted when a row is selected/deselected. [selectable] needs to be enabled.
* Emits an [ITdDataTableSelectEvent] implemented object.
*/
this.onRowSelect = new EventEmitter();
/**
* rowClick?: function
* Event emitted when a row is clicked.
* Emits an [ITdDataTableRowClickEvent] implemented object.
*/
this.onRowClick = new EventEmitter();
/**
* selectAll?: function
* Event emitted when all rows are selected/deselected by the all checkbox. [selectable] needs to be enabled.
* Emits an [ITdDataTableSelectAllEvent] implemented object.
*/
this.onSelectAll = new EventEmitter();
/**
* compareWith?: function(row, model): boolean
* Allows custom comparison between row and model to see if row is selected or not
* Default comparation is by reference
*/
this.compareWith = (row, model) => {
return row === model;
};
}
/**
* @return {?}
*/
get resizingColumn() {
return this._resizingColumn;
}
/**
* @return {?}
*/
get hostWidth() {
// if the checkboxes are rendered, we need to remove their width
// from the total width to calculate properly
if (this.selectable) {
return this._hostWidth - 42;
}
return this._hostWidth;
}
/**
* Returns the offset style with a proper calculation on how much it should move
* over the y axis of the total height
* @return {?}
*/
get offsetTransform() {
return this._offsetTransform;
}
/**
* Returns the assumed total height of the rows
* @return {?}
*/
get totalHeight() {
return this._totalHeight;
}
/**
* Returns the initial row to render in the viewport
* @return {?}
*/
get fromRow() {
return this._fromRow;
}
/**
* Returns the last row to render in the viewport
* @return {?}
*/
get toRow() {
return this._toRow;
}
/**
* Returns scroll position to reposition column headers
* @return {?}
*/
get columnsLeftScroll() {
return this._scrollHorizontalOffset * -1;
}
/**
* Returns true if all values are selected.
* @return {?}
*/
get allSelected() {
return this._allSelected;
}
/**
* Returns true if all values are not deselected
* and at least one is.
* @return {?}
*/
get indeterminate() {
return this._indeterminate;
}
/**
* data?: {[key: string]: any}[]
* Sets the data to be rendered as rows.
* @param {?} data
* @return {?}
*/
set data(data) {
this._data = data;
this._rowHeightCache = [];
Promise.resolve().then(() => {
this.refresh();
// scroll back to the top if the data has changed
this._scrollableDiv.nativeElement.scrollTop = 0;
});
}
/**
* @return {?}
*/
get data() {
return this._data;
}
/**
* @return {?}
*/
get virtualData() {
return this._virtualData;
}
/**
* columns?: ITdDataTableColumn[]
* Sets additional column configuration. [ITdDataTableColumn.name] has to exist in [data] as key.
* Defaults to [data] keys.
* @param {?} cols
* @return {?}
*/
set columns(cols) {
this._columns = cols;
}
/**
* @return {?}
*/
get columns() {
if (this._columns) {
return this._columns;
}
if (this.hasData) {
this._columns = [];
// if columns is undefined, use key in [data] rows as name and label for column headers.
/** @type {?} */
let row = this._data[0];
Object.keys(row).forEach((k) => {
if (!this._columns.find((c) => c.name === k)) {
this._columns.push({ name: k, label: k });
}
});
return this._columns;
}
else {
return [];
}
}
/**
* resizableColumns?: boolean
* Enables manual column resize.
* Defaults to 'false'
* @param {?} resizableColumns
* @return {?}
*/
set resizableColumns(resizableColumns) {
this._resizableColumns = coerceBooleanProperty(resizableColumns);
}
/**
* @return {?}
*/
get resizableColumns() {
return this._resizableColumns;
}
/**
* selectable?: boolean
* Enables row selection events, hover and selected row states.
* Defaults to 'false'
* @param {?} selectable
* @return {?}
*/
set selectable(selectable) {
this._selectable = coerceBooleanProperty(selectable);
}
/**
* @return {?}
*/
get selectable() {
return this._selectable;
}
/**
* clickable?: boolean
* Enables row click events, hover.
* Defaults to 'false'
* @param {?} clickable
* @return {?}
*/
set clickable(clickable) {
this._clickable = coerceBooleanProperty(clickable);
}
/**
* @return {?}
*/
get clickable() {
return this._clickable;
}
/**
* multiple?: boolean
* Enables multiple row selection. [selectable] needs to be enabled.
* Defaults to 'false'
* @param {?} multiple
* @return {?}
*/
set multiple(multiple) {
this._multiple = coerceBooleanProperty(multiple);
}
/**
* @return {?}
*/
get multiple() {
return this._multiple;
}
/**
* sortable?: boolean
* Enables sorting events, sort icons and active column states.
* Defaults to 'false'
* @param {?} sortable
* @return {?}
*/
set sortable(sortable) {
this._sortable = coerceBooleanProperty(sortable);
}
/**
* @return {?}
*/
get sortable() {
return this._sortable;
}
/**
* sortBy?: string
* Sets the active sort column. [sortable] needs to be enabled.
* @param {?} columnName
* @return {?}
*/
set sortBy(columnName) {
if (!columnName) {
return;
}
/** @type {?} */
const column = this.columns.find((c) => c.name === columnName);
if (!column) {
throw new Error('[sortBy] must be a valid column name');
}
this._sortBy = column;
}
/**
* @return {?}
*/
get sortByColumn() {
return this._sortBy;
}
/**
* sortOrder?: ['ASC' | 'DESC'] or TdDataTableSortingOrder
* Sets the sort order of the [sortBy] column. [sortable] needs to be enabled.
* Defaults to 'ASC' or TdDataTableSortingOrder.Ascending
* @param {?} order
* @return {?}
*/
set sortOrder(order) {
/** @type {?} */
let sortOrder = order ? order.toUpperCase() : 'ASC';
if (sortOrder !== 'DESC' && sortOrder !== 'ASC') {
throw new Error('[sortOrder] must be empty, ASC or DESC');
}
this._sortOrder = sortOrder === 'ASC' ?
TdDataTableSortingOrder.Ascending : TdDataTableSortingOrder.Descending;
}
/**
* @return {?}
*/
get sortOrderEnum() {
return this._sortOrder;
}
/**
* @return {?}
*/
get hasData() {
return this._data && this._data.length > 0;
}
/**
* Initialize observable for resize and scroll events
* @return {?}
*/
ngOnInit() {
// initialize observable for resize calculations
this._resizeSubs = this._onResize.asObservable().subscribe(() => {
if (this._rows) {
this._rows.toArray().forEach((row, index) => {
this._rowHeightCache[this.fromRow + index] = row.height + 1;
});
}
this._calculateWidths();
this._calculateVirtualRows();
});
// initialize observable for column resize calculations
this._columnResizeSubs = this._onColumnResize.asObservable().pipe(debounceTime(0)).subscribe((clientX) => {
this._columnClientX = clientX;
this._calculateWidths();
this._changeDetectorRef.markForCheck();
});
// initialize observable for scroll column header reposition
this._horizontalScrollSubs = this._onHorizontalScroll.asObservable()
.subscribe((horizontalScroll) => {
this._scrollHorizontalOffset = horizontalScroll;
this._changeDetectorRef.markForCheck();
});
// initialize observable for virtual scroll rendering
this._verticalScrollSubs = this._onVerticalScroll.asObservable()
.subscribe((verticalScroll) => {
this._scrollVerticalOffset = verticalScroll;
this._calculateVirtualRows();
this._changeDetectorRef.markForCheck();
});
this._valueChangesSubs = this.valueChanges.subscribe((value) => {
this.refresh();
});
}
/**
* Loads templates and sets them in a map for faster access.
* @return {?}
*/
ngAfterContentInit() {
for (let i = 0; i < this._templates.toArray().length; i++) {
this._templateMap.set(this._templates.toArray()[i].tdDataTableTemplate, this._templates.toArray()[i].templateRef);
}
}
/**
* Checks hosts native elements widths to see if it has changed (resize check)
* @return {?}
*/
ngAfterContentChecked() {
// check if the scroll has been reset when element is hidden
if (this._scrollVerticalOffset - this._scrollableDiv.nativeElement.scrollTop > 5) {
// scroll back to the top if element has been reset
this._onVerticalScroll.next(0);
}
if (this._elementRef.nativeElement) {
/** @type {?} */
let newHostWidth = this._elementRef.nativeElement.getBoundingClientRect().width;
// if the width has changed then we throw a resize event.
if (this._hostWidth !== newHostWidth) {
setTimeout(() => {
this._hostWidth = newHostWidth;
this._onResize.next();
}, 0);
}
}
if (this._scrollableDiv.nativeElement) {
/** @type {?} */
let newHostHeight = this._scrollableDiv.nativeElement.getBoundingClientRect().height;
// if the height of the viewport has changed, then we mark for check
if (this._hostHeight !== newHostHeight) {
this._hostHeight = newHostHeight;
this._calculateVirtualRows();
this._changeDetectorRef.markForCheck();
}
}
}
/**
* Registers to an observable that checks if all rows have been rendered
* so we can start calculating the widths
* @return {?}
*/
ngAfterViewInit() {
this._rowsChangedSubs = this._rows.changes.pipe(debounceTime(0)).subscribe(() => {
this._onResize.next();
});
this._calculateVirtualRows();
}
/**
* Unsubscribes observables when data table is destroyed
* @return {?}
*/
ngOnDestroy() {
if (this._resizeSubs) {
this._resizeSubs.unsubscribe();
}
if (this._columnResizeSubs) {
this._columnResizeSubs.unsubscribe();
}
if (this._horizontalScrollSubs) {
this._horizontalScrollSubs.unsubscribe();
}
if (this._verticalScrollSubs) {
this._verticalScrollSubs.unsubscribe();
}
if (this._rowsChangedSubs) {
this._rowsChangedSubs.unsubscribe();
}
if (this._valueChangesSubs) {
this._valueChangesSubs.unsubscribe();
}
}
/**
* Method that gets executed every time there is a scroll event
* Calls the scroll observable
* @param {?} event
* @return {?}
*/
handleScroll(event) {
/** @type {?} */
let element = ((/** @type {?} */ (event.target)));
if (element) {
/** @type {?} */
let horizontalScroll = element.scrollLeft;
if (this._scrollHorizontalOffset !== horizontalScroll) {
this._onHorizontalScroll.next(horizontalScroll);
}
/** @type {?} */
let verticalScroll = element.scrollTop;
if (this._scrollVerticalOffset !== verticalScroll) {
this._onVerticalScroll.next(verticalScroll);
}
}
}
/**
* Returns the width needed for the columns via index
* @param {?} index
* @return {?}
*/
getColumnWidth(index) {
if (this._widths[index]) {
return this._widths[index].value;
}
return undefined;
}
/**
* @param {?} column
* @param {?} value
* @return {?}
*/
getCellValue(column, value) {
if (column.nested === undefined || column.nested) {
return this._getNestedValue(column.name, value);
}
return value[column.name];
}
/**
* Getter method for template references
* @param {?} name
* @return {?}
*/
getTemplateRef(name) {
return this._templateMap.get(name);
}
/**
* Clears model (ngModel) of component by removing all values in array.
* @return {?}
*/
clearModel() {
this.value.splice(0, this.value.length);
}
/**
* Refreshes data table and rerenders [data] and [columns]
* @return {?}
*/
refresh() {
this._calculateVirtualRows();
this._calculateWidths();
this._calculateCheckboxState();
this._changeDetectorRef.markForCheck();
}
/**
* Selects or clears all rows depending on 'checked' value.
* @param {?} checked
* @return {?}
*/
selectAll(checked) {
/** @type {?} */
let toggledRows = [];
if (checked) {
this._data.forEach((row) => {
// skiping already selected rows
if (!this.isRowSelected(row)) {
this.value.push(row);
// checking which ones are being toggled
toggledRows.push(row);
}
});
this._allSelected = true;
this._indeterminate = true;
}
else {
this._data.forEach((row) => {
// checking which ones are being toggled
if (this.isRowSelected(row)) {
toggledRows.push(row);
/** @type {?} */
let modelRow = this.value.filter((val) => {
return this.compareWith(row, val);
})[0];
/** @type {?} */
let index = this.value.indexOf(modelRow);
if (index > -1) {
this.value.splice(index, 1);
}
}
});
this._allSelected = false;
this._indeterminate = false;
}
this.onSelectAll.emit({ rows: toggledRows, selected: checked });
this.onChange(this.value);
}
/**
* Checks if row is selected
* @param {?} row
* @return {?}
*/
isRowSelected(row) {
// compare items by [compareWith] function
return this.value ? this.value.filter((val) => {
return this.compareWith(row, val);
}).length > 0 : false;
}
/**
* Selects or clears a row depending on 'checked' value if the row 'isSelectable'
* handles cntrl clicks and shift clicks for multi-select
* @param {?} row
* @param {?} event
* @param {?} currentSelected
* @return {?}
*/
select(row, event, currentSelected) {
if (this.selectable) {
this.blockEvent(event);
// Check to see if Shift key is selected and need to select everything in between
/** @type {?} */
let mouseEvent = (/** @type {?} */ (event));
if (this.multiple && mouseEvent && mouseEvent.shiftKey && this._lastSelectedIndex > -1) {
/** @type {?} */
let firstIndex = currentSelected;
/** @type {?} */
let lastIndex = this._lastSelectedIndex;
if (currentSelected > this._lastSelectedIndex) {
firstIndex = this._lastSelectedIndex;
lastIndex = currentSelected;
}
// if clicking a checkbox behind the initial check, then toggle all selections expect the initial checkbox
// else the checkboxes clicked are all after the initial one
if ((this._firstSelectedIndex >= currentSelected && this._lastSelectedIndex > this._firstSelectedIndex) ||
(this._firstSelectedIndex <= currentSelected && this._lastSelectedIndex < this._firstSelectedIndex)) {
for (let i = firstIndex; i <= lastIndex; i++) {
if (this._firstSelectedIndex !== i) {
this._doSelection(this._data[i], i);
}
}
}
else if ((this._firstSelectedIndex > currentSelected) || (this._firstSelectedIndex < currentSelected)) {
// change indexes depending on where the next checkbox is selected (before or after)
if (this._firstSelectedIndex > currentSelected) {
lastIndex--;
}
else if (this._firstSelectedIndex < currentSelected) {
firstIndex++;
}
for (let i = firstIndex; i <= lastIndex; i++) {
/** @type {?} */
let rowSelected = this.isRowSelected(this._data[i]);
// if row is selected and first checkbox was selected
// or if row was unselected and first checkbox was unselected
// we ignore the toggle
if ((this._firstCheckboxValue && !rowSelected) ||
(!this._firstCheckboxValue && rowSelected)) {
this._doSelection(this._data[i], i);
}
else if (this._shiftPreviouslyPressed) {
// else if the checkbox selected was in the middle of the last selection and the first selection
// then we undo the selections
if ((currentSelected >= this._firstSelectedIndex && currentSelected <= this._lastSelectedIndex) ||
(currentSelected <= this._firstSelectedIndex && currentSelected >= this._lastSelectedIndex)) {
this._doSelection(this._data[i], i);
}
}
}
}
this._shiftPreviouslyPressed = true;
// if shift wasnt pressed, then we take the element checked as the first row
// incase the next click uses shift
}
else if (mouseEvent && !mouseEvent.shiftKey) {
this._firstCheckboxValue = this._doSelection(row, currentSelected);
this._shiftPreviouslyPressed = false;
this._firstSelectedIndex = currentSelected;
}
this._lastSelectedIndex = currentSelected;
}
}
/**
* Overrides the onselectstart method of the document so other text on the page
* doesn't get selected when doing shift selections.
* @return {?}
*/
disableTextSelection() {
if (this._document) {
this._document.onselectstart = function () {
return false;
};
}
}
/**
* Resets the original onselectstart method.
* @return {?}
*/
enableTextSelection() {
if (this._document) {
this._document.onselectstart = undefined;
}
}
/**
* emits the onRowClickEvent when a row is clicked
* if clickable is true and selectable is false then select the row
* @param {?} row
* @param {?} index
* @param {?} event
* @return {?}
*/
handleRowClick(row, index, event) {
if (this.clickable) {
// ignoring linting rules here because attribute it actually null or not there
// can't check for undefined
/** @type {?} */
const srcElement = event.srcElement || event.currentTarget;
/** @type {?} */
let element = (/** @type {?} */ (event.target));
/* tslint:disable-next-line */
if (srcElement.getAttribute('stopRowClick') === null && element.tagName.toLowerCase() !== 'mat-pseudo-checkbox') {
this.onRowClick.emit({
row: row,
index: index,
});
}
}
}
/**
* Method handle for sort click event in column headers.
* @param {?} column
* @return {?}
*/
handleSort(column) {
if (this._sortBy === column) {
this._sortOrder = this._sortOrder === TdDataTableSortingOrder.Ascending ?
TdDataTableSortingOrder.Descending : TdDataTableSortingOrder.Ascending;
}
else {
this._sortBy = column;
this._sortOrder = TdDataTableSortingOrder.Ascending;
}
this.onSortChange.next({ name: this._sortBy.name, order: this._sortOrder });
}
/**
* Handle all keyup events when focusing a data table row
* @param {?} event
* @param {?} row
* @param {?} index
* @return {?}
*/
_rowKeyup(event, row, index) {
switch (event.keyCode) {
case ENTER:
case SPACE:
/** if user presses enter or space, the row should be selected */
if (this.selectable) {
this._doSelection(this._data[this.fromRow + index], this.fromRow + index);
}
break;
case UP_ARROW:
/**
* if users presses the up arrow, we focus the prev row
* unless its the first row
*/
if (index > 0) {
this._rows.toArray()[index - 1].focus();
}
this.blockEvent(event);
if (this.selectable && this.multiple && event.shiftKey && this.fromRow + index >= 0) {
this._doSelection(this._data[this.fromRow + index], this.fromRow + index);
}
break;
case DOWN_ARROW:
/**
* if users presses the down arrow, we focus the next row
* unless its the last row
*/
if (index < (this._rows.toArray().length - 1)) {
this._rows.toArray()[index + 1].focus();
}
this.blockEvent(event);
if (this.selectable && this.multiple && event.shiftKey && this.fromRow + index < this._data.length) {
this._doSelection(this._data[this.fromRow + index], this.fromRow + index);
}
break;
default:
// default
}
}
/**
* Sets column index of the dragged column and initial clientX of column
* @param {?} index
* @param {?} event
* @return {?}
*/
_handleStartColumnDrag(index, event) {
this._columnClientX = event.clientX;
this._resizingColumn = index;
}
/**
* Calculates new width depending on new clientX of dragger column
* @param {?} event
* @return {?}
*/
_handleColumnDrag(event) {
// check if there was been a separator clicked for resize
if (this._resizingColumn !== undefined && event.clientX > 0) {
/** @type {?} */
let xPosition = event.clientX;
// checks if the separator is being moved to try and resize the column, else dont do anything
if (xPosition > 0 && this._columnClientX > 0 && (xPosition - this._columnClientX) !== 0) {
// calculate the new width depending if making the column bigger or smaller
/** @type {?} */
let proposedManualWidth = this._widths[this._resizingColumn].value + (xPosition - this._columnClientX);
// if the proposed new width is less than the projected min width of the column, use projected min width
if (proposedManualWidth < this._colElements.toArray()[this._resizingColumn].projectedWidth) {
proposedManualWidth = this._colElements.toArray()[this._resizingColumn].projectedWidth;
}
this.columns[this._resizingColumn].width = proposedManualWidth;
// update new x position for the resized column
this._onColumnResize.next(xPosition);
}
}
}
/**
* Ends dragged flags
* @return {?}
*/
_handleEndColumnDrag() {
this._columnClientX = undefined;
this._resizingColumn = undefined;
}
/**
* Method to prevent the default events
* @param {?} event
* @return {?}
*/
blockEvent(event) {
event.preventDefault();
}
/**
* @param {?} name
* @param {?} value
* @return {?}
*/
_getNestedValue(name, value) {
if (!(value instanceof Object) || !name) {
return value;
}
if (name.indexOf('.') > -1) {
/** @type {?} */
let splitName = name.split(/\.(.+)/, 2);
return this._getNestedValue(splitName[1], value[splitName[0]]);
}
else {
return value[name];
}
}
/**
* Does the actual Row Selection
* @param {?} row
* @param {?} rowIndex
* @return {?}
*/
_doSelection(row, rowIndex) {
/** @type {?} */
let wasSelected = this.isRowSelected(row);
if (!wasSelected) {
if (!this._multiple) {
this.clearModel();
}
this.value.push(row);
}
else {
// compare items by [compareWith] function
row = this.value.filter((val) => {
return this.compareWith(row, val);
})[0];
/** @type {?} */
let index = this.value.indexOf(row);
if (index > -1) {
this.value.splice(index, 1);
}
}
this._calculateCheckboxState();
this.onRowSelect.emit({ row: row, index: rowIndex, selected: !wasSelected });
this.onChange(this.value);
return !wasSelected;
}
/**
* Calculate all the state of all checkboxes
* @return {?}
*/
_calculateCheckboxState() {
if (this._data) {
this._allSelected = typeof this._data.find((d) => !this.isRowSelected(d)) === 'undefined';
this._indeterminate = false;
for (let row of this._data) {
if (!this.isRowSelected(row)) {
continue;
}
this._indeterminate = true;
break;
}
}
}
/**
* Calculates the widths for columns and cells depending on content
* @return {?}
*/
_calculateWidths() {
if (this._colElements && this._colElements.length) {
this._widths = [];
this._colElements.forEach((col, index) => {
this._adjustColumnWidth(index, this._calculateWidth());
});
this._adjustColumnWidhts();
this._changeDetectorRef.markForCheck();
}
}
/**
* Adjusts columns after calculation to see if they need to be recalculated.
* @return {?}
*/
_adjustColumnWidhts() {
/** @type {?} */
let fixedTotalWidth = 0;
// get the number of total columns that have flexible widths (not fixed or hidden)
/** @type {?} */
let flexibleWidths = this._widths.filter((width, index) => {
if (this.columns[index].hidden) {
return false;
}
if (width.limit || width.max || width.min) {
fixedTotalWidth += width.value;
}
return !width.limit && !width.max && !width.min;
}).length;
// calculate how much pixes are left that could be spread across
// the flexible columns
/** @type {?} */
let recalculateHostWidth = 0;
if (fixedTotalWidth < this.hostWidth) {
recalculateHostWidth = this.hostWidth - fixedTotalWidth;
}
// if we have flexible columns and pixels to spare on them
// we try and spread the pixels across them
if (flexibleWidths && recalculateHostWidth) {
/** @type {?} */
let newValue = Math.floor(recalculateHostWidth / flexibleWidths);
/** @type {?} */
let adjustedNumber = 0;
// adjust the column widths with the spread pixels
this._widths.forEach((colWidth) => {
if (this._widths[colWidth.index].max && this._widths[colWidth.index].value > newValue ||
this._widths[colWidth.index].min && this._widths[colWidth.index].value < newValue ||
!this._widths[colWidth.index].limit) {
this._adjustColumnWidth(colWidth.index, newValue);
adjustedNumber++;
}
});
// if there are still columns that need to be recalculated, we start over
/** @type {?} */
let newFlexibleWidths = this._widths.filter((width) => {
return !width.limit && !width.max;
}).length;
if (newFlexibleWidths !== adjustedNumber && newFlexibleWidths !== flexibleWidths) {
this._adjustColumnWidhts();
}
}
}
/**
* Adjusts a single column to see if it can be recalculated
* @param {?} index
* @param {?} value
* @return {?}
*/
_adjustColumnWidth(index, value) {
this._widths[index] = {
value: value,
index: index,
limit: false,
min: false,
max: false,
};
// flag to see if we need to skip the min width projection
// depending if a width or min width has been provided
/** @type {?} */
let skipMinWidthProjection = false;
if (this.columns[index]) {
// if the provided width has min/max, then we check to see if we need to set it
if (typeof this.columns[index].width === 'object') {
/** @type {?} */
let widthOpts = (/** @type {?} */ (this.columns[index].width));
// if the column width is less than the configured min, we override it
skipMinWidthProjection = (widthOpts && !!widthOpts.min);
if (widthOpts && widthOpts.min >= this._widths[index].value) {
this._widths[index].value = widthOpts.min;
this._widths[index].min = true;
// if the column width is more than the configured max, we override it
}
else if (widthOpts && widthOpts.max <= this._widths[index].value) {
this._widths[index].value = widthOpts.max;
this._widths[index].max = true;
}
// if it has a fixed width, then we just set it
}
else if (typeof this.columns[index].width === 'number') {
this._widths[index].value = (/** @type {?} */ (this.columns[index].width));
skipMinWidthProjection = this._widths[index].limit = true;
}
}
// if there wasn't any width or min width provided, we set a min to what the column width min should be
if (!skipMinWidthProjection &&
this._widths[index].value < this._colElements.toArray()[index].projectedWidth) {
this._widths[index].value = this._colElements.toArray()[index].projectedWidth;
this._widths[index].min = true;
this._widths[index].limit = false;
}
}
/**
* Generic method to calculate column width
* @return {?}
*/
_calculateWidth() {
/** @type {?} */
let renderedColumns = this.columns.filter((col) => !col.hidden);
return Math.floor(this.hostWidth / renderedColumns.length);
}
/**
* Method to calculate the rows to be rendered in the viewport
* @return {?}
*/
_calculateVirtualRows() {
/** @type {?} */
let scrolledRows = 0;
if (this._data) {
this._totalHeight = 0;
/** @type {?} */
let rowHeightSum = 0;
// loop through all rows to see if we have their height cached
// and sum them all to calculate the total height
this._data.forEach((d, i) => {
// iterate through all rows at first and assume all
// rows are the same height as the first one
if (!this._rowHeightCache[i]) {
this._rowHeightCache[i] = this._rowHeightCache[0] || TD_VIRTUAL_DEFAULT_ROW_HEIGHT;
}
rowHeightSum += this._rowHeightCache[i];
// check how many rows have been scrolled
if (this._scrollVerticalOffset - rowHeightSum > 0) {
scrolledRows++;
}
});
this._totalHeight = rowHeightSum;
// set the initial row to be rendered taking into account the row offset
/** @type {?} */
let fromRow = scrolledRows - TD_VIRTUAL_OFFSET$1;
this._fromRow = fromRow > 0 ? fromRow : 0;
/** @type {?} */
let hostHeight = this._hostHeight;
/** @type {?} */
let index = 0;
// calculate how many rows can fit in the viewport
while (hostHeight > 0) {
hostHeight -= this._rowHeightCache[this.fromRow + index];
index++;
}
// set the last row to be rendered taking into account the row offset
/** @type {?} */
let range = (index - 1) + (TD_VIRTUAL_OFFSET$1 * 2);
/** @type {?} */
let toRow = range + this.fromRow;
// if last row is greater than the total length, then we use the total length
if (isFinite(toRow) && toRow > this._data.length) {
toRow = this._data.length;
}
else if (!isFinite(toRow)) {
toRow = TD_VIRTUAL_OFFSET$1;
}
this._toRow = toRow;
}
else {
this._totalHeight = 0;
this._fromRow = 0;
this._toRow = 0;
}
/** @type {?} */
let offset = 0;
// calculate the proper offset depending on how many rows have been scrolled
if (scrolledRows > TD_VIRTUAL_OFFSET$1) {
for (let index = 0; index < this.fromRow; index++) {
offset += this._rowHeightCache[index];
}
}
this._offsetTransform = this._domSanitizer.bypassSecurityTrustStyle('translateY(' + (offset - this.totalHeight) + 'px)');
if (this._data) {
this._virtualData = this.data.slice(this.fromRow, this.toRow);
}
// mark for check at the end of the queue so we are sure
// that the changes will be marked
Promise.resolve().then(() => {
this._changeDetectorRef.markForCheck();
});
}
}
TdDataTableComponent.decorators = [
{ type: Component, args: [{
providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => TdDataTableComponent),
multi: true,
}],
selector: 'td-data-table',
template: "<table td-data-table\n [style.left.px]=\"columnsLeftScroll\"\n [class.mat-selectable]=\"selectable\">\n <thead class=\"td-data-table-head\"\n (dragover)=\"_handleColumnDrag($event)\">\n <tr td-data-table-column-row>\n <th td-data-table-column class=\"mat-checkbox-column\" *ngIf=\"selectable\">\n <mat-checkbox\n #checkBoxAll\n *ngIf=\"multiple\"\n [disabled]=\"!hasData\"\n [indeterminate]=\"indeterminate && !allSelected && hasData\"\n [checked]=\"allSelected && hasData\"\n (click)=\"blockEvent($event); selectAll(!checkBoxAll.checked)\"\n (keyup.enter)=\"selectAll(!checkBoxAll.checked)\"\n (keyup.space)=\"selectAll(!checkBoxAll.checked)\"\n (keydown.space)=\"blockEvent($event)\">\n </mat-checkbox>\n </th>\n <th td-data-table-column\n #columnElement\n *ngFor=\"let column of columns; let i = index; let last = last\"\n [style.min-width.px]=\"getColumnWidth(i)\"\n [style.max-width.px]=\"getColumnWidth(i)\"\n [name]=\"column.name\"\n [numeric]=\"column.numeric\"\n [active]=\"(column.sortable || sortable) && column === sortByColumn\"\n [sortable]=\"column.sortable || (sortable && column.sortable !== false)\"\n [sortOrder]=\"sortOrderEnum\"\n [hidden]=\"column.hidden\"\n (sortChange)=\"handleSort(column)\">\n <span [matTooltip]=\"column.tooltip\">{{column.label}}</span>\n <span td-column-resizer\n *ngIf=\"resizableColumns\"\n draggable=\"true\"\n class=\"td-data-table-column-resizer\"\n [class.td-resizing]=\"i === resizingColumn\"\n (mousedown)=\"_handleStartColumnDrag(i, $event)\"\n (dragstart)=\"$event?.dataTransfer?.setData('text', '')\"\n (drag)=\"_handleColumnDrag($event)\"\n (dragend)=\"_handleEndColumnDrag()\"\n (mouseup)=\"_handleEndColumnDrag()\">\n <span class=\"td-data-table-column-separator\"></span>\n </span>\n </th>\n </tr>\n </thead>\n</table>\n<div #scrollableDiv class=\"td-data-table-scrollable\"\n (scroll)=\"handleScroll($event)\">\n <div [style.height.px]=\"totalHeight\"></div>\n <table td-data-table\n [style.transform]=\"offsetTransform\"\n [style.position]=\"'absolute'\"\n [class.mat-selectable]=\"selectable\"\n [class.mat-clickable]=\"clickable\">\n <tbody class=\"td-data-table-body\">\n <tr td-data-table-row\n #dtRow\n [tabIndex]=\"selectable ? 0 : -1\"\n [selected]=\"(clickable || selectable) && isRowSelected(row)\"\n *ngFor=\"let row of virtualData; let rowIndex = index\"\n (click)=\"handleRowClick(row, fromRow + rowIndex, $event)\"\n (keyup)=\"selectable && _rowKeyup($event, row, rowIndex)\"\n (keydown.space)=\"blockEvent($event)\"\n (keydown.shift.space)=\"blockEvent($event)\"\n (keydown.shift)=\"disableTextSelection()\"\n (keyup.shift)=\"enableTextSelection()\">\n <td td-data-table-cell class=\"mat-checkbox-cell\" *ngIf=\"selectable\">\n <mat-pseudo-checkbox\n [state]=\"dtRow.selected ? 'checked' : 'unchecked'\"\n (mousedown)=\"disableTextSelection()\"\n (mouseup)=\"enableTextSelection()\"\n stopRowClick\n (click)=\"select(row, $event, fromRow + rowIndex)\">\n </mat-pseudo-checkbox>\n </td>\n <td td-data-table-cell\n [numeric]=\"column.numeric\"\n [hidden]=\"column.hidden\"\n *ngFor=\"let column of columns; let i = index\"\n [style.min-width.px]=\"getColumnWidth(i)\"\n [style.max-width.px]=\"getColumnWidth(i)\">\n <span *ngIf=\"!getTemplateRef(column.name)\">{{column.format ? column.format(getCellValue(column, row)) : getCellValue(column, row)}}</span>\n <ng-template\n *ngIf=\"getTemplateRef(column.name)\"\n [ngTemplateOutlet]=\"getTemplateRef(column.name)\"\n [ngTemplateOutletContext]=\"{ value: getCellValue(column, row), row: row, column: column.name, index: rowIndex }\">\n </ng-template>\n </td>\n </tr>\n </tbody>\n </table>\n</div>\n<ng-content></ng-content>\n",
inputs: ['value'],
changeDetection: ChangeDetectionStrategy.OnPush,
styles: [":host{display:block;overflow:hidden}:host .td-data-table-scrollable{position:relative;overflow:auto;height:calc(100% - 56px)}.td-data-table-column-resizer{right:0;width:6px;cursor:col-resize}.td-data-table-column-resizer,.td-data-table-column-resizer .td-data-table-column-separator{position:absolute;height:100%;top:0}.td-data-table-column-resizer .td-data-table-column-separator{left:2px}.td-data-table-column-resizer.td-resizing{cursor:-webkit-grabbing}table.td-data-table{width:auto!important}table.td-data-table.mat-selectable tbody>tr.td-data-table-row{-webkit-transition:background-color .2s;transition:background-color .2s}table.td-data-table.mat-selectable .td-data-table-column:first-child>.td-data-table-column-content-wrapper,table.td-data-table.mat-selectable td.td-data-table-cell:first-child>.td-data-table-column-content-wrapper,table.td-data-table.mat-selectable th.td-data-table-column:first-child>.td-data-table-column-content-wrapper{width:18px;min-width:18px;padding:0 24px}table.td-data-table.mat-selectable .td-data-table-column:nth-child(2)>.td-data-table-column-content-wrapper,table.td-data-table.mat-selectable td.td-data-table-cell:nth-child(2)>.td-data-table-column-content-wrapper,table.td-data-table.mat-selectable th.td-data-table-column:nth-child(2)>.td-data-table-column-content-wrapper{padding-left:0}[dir=rtl] table.td-data-table.mat-selectable .td-data-table-column:nth-child(2)>.td-data-table-column-content-wrapper,[dir=rtl] table.td-data-table.mat-selectable td.td-data-table-cell:nth-child(2)>.td-data-table-column-content-wrapper,[dir=rtl] table.td-data-table.mat-selectable th.td-data-table-column:nth-child(2)>.td-data-table-column-content-wrapper{padding-right:0;padding-left:28px}table.td-data-table td.mat-checkbox-cell,table.td-data-table th.mat-checkbox-column{min-width:42px;width:42px;font-size:0!important}table.td-data-table td.mat-checkbox-cell mat-pseudo-checkbox,table.td-data-table th.mat-checkbox-column mat-pseudo-checkbox{width:18px;height:18px}::ng-deep table.td-data-table td.mat-checkbox-cell mat-pseudo-checkbox.mat-pseudo-checkbox-checked::after,::ng-deep table.td-data-table th.mat-checkbox-column mat-pseudo-checkbox.mat-pseudo-checkbox-checked::after{width:11px!important;height:4px!important}table.td-data-table td.mat-checkbox-cell mat-checkbox ::ng-deep .mat-checkbox-inner-container,table.td-data-table th.mat-checkbox-column mat-checkbox ::ng-deep .mat-checkbox-inner-container{width:18px;height:18px;margin:0}"]
}] }
];
/** @nocollapse */
TdDataTableComponent.ctorParameters = () => [
{ type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [DOCUMENT,] }] },
{ type: ElementRef },
{ type: DomSanitizer },
{ type: ChangeDetectorRef }
];
TdDataTableComponent.propDecorators = {
_templates: [{ type: ContentChildren, args: [TdDataTableTemplateDirective,] }],
_scrollableDiv: [{ type: ViewChild, args: ['scrollableDiv',] }],
_colElements: [{ type: ViewChildren, args: ['columnElement',] }],
_rows: [{ type: ViewChildren, args: [TdDataTableRowComponent,] }],
data: [{ type: Input, args: ['data',] }],
columns: [{ type: Input, args: ['columns',] }],
resizableColumns: [{ type: Input, args: ['resizableColumns',] }],
selectable: [{ type: Input, args: ['selectable',] }],
clickable: [{ type: Input, args: ['clickable',] }],
multiple: [{ type: Input, args: ['multiple',] }],
sortable: [{ type: Input, args: ['sortable',] }],
sortBy: [{ type: Input, args: ['sortBy',] }],
sortOrder: [{ type: Input, args: ['sortOrder',] }],
onSortChange: [{ type: Output, args: ['sortChange',] }],
onRowSelect: [{ type: Output, args: ['rowSelect',] }],
onRowClick: [{ type: Output, args: ['rowClick',] }],
onSelectAll: [{ type: Output, args: ['selectAll',] }],
compareWith: [{ type: Input, args: ['compareWith',] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class TdDataTableColumnComponent {
/**
* @param {?} _elementRef
* @param {?} _renderer
*/
constructor(_elementRef, _renderer) {
this._elementRef = _elementRef;
this._renderer = _renderer;
this._sortOrder = TdDataTableSortingOrder.Ascending;
/**
* name?: string
* Sets unique column [name] for [sortable] events.
*/
this.name = '';
/**
* sortable?: boolean
* Enables sorting events, sort icons and active column states.
* Defaults to 'false'
*/
this.sortable = false;
/**
* active?: boolean
* Sets column to active state when 'true'.
* Defaults to 'false'
*/
this.active = false;
/**
* numeric?: boolean
* Makes column follow the numeric data-table specs and sort icon.
* Defaults to 'false'
*/
this.numeric = false;
/**
* sortChange?: function
* Event emitted when the column headers are clicked. [sortable] needs to be enabled.
* Emits an [ITdDataTableSortChangeEvent] implemented object.
*/
this.onSortChange = new EventEmitter();
this._renderer.addClass(this._elementRef.nativeElement, 'td-data-table-column');
}
/**
* @return {?}
*/
get projectedWidth() {
if (this._columnContent && this._columnContent.nativeElement) {
return ((/** @type {?} */ (this._columnContent.nativeElement))).getBoundingClientRect().width;
}
return 100;
}
/**
* sortOrder?: ['ASC' | 'DESC'] or TdDataTableSortingOrder
* Sets the sort order of column.
* Defaults to 'ASC' or TdDataTableSortingOrder.Ascending
* @param {?} order
* @return {?}
*/
set sortOrder(order) {
/** @type {?} */
let sortOrder = order ? order.toUpperCase() : 'ASC';
if (sortOrder !== 'DESC' && sortOrder !== 'ASC') {
throw new Error('[sortOrder] must be empty, ASC or DESC');
}
this._sortOrder = sortOrder === 'ASC' ?
TdDataTableSortingOrder.Ascending : TdDataTableSortingOrder.Descending;
}
/**
* @return {?}
*/
get bindClickable() {
return this.sortable;
}
/**
* @return {?}
*/
get bingSortable() {
return this.sortable;
}
/**
* @return {?}
*/
get bindActive() {
return this.active;
}
/**
* @return {?}
*/
get bindNumeric() {
return this.numeric;
}
/**
* Listening to click event on host to throw a sort event
* @return {?}
*/
handleClick() {
if (this.sortable) {
this.onSortChange.emit({ name: this.name, order: this._sortOrder });
}
}
/**
* @return {?}
*/
isAscending() {
return this._sortOrder === TdDataTableSortingOrder.Ascending;
}
/**
* @return {?}
*/
isDescending() {
return this._sortOrder === TdDataTableSortingOrder.Descending;
}
}
TdDataTableColumnComponent.decorators = [
{ type: Component, args: [{
/* tslint:disable-next-line */
selector: 'th[td-data-table-column]',
template: "<span #columnContent class=\"td-data-table-heading\">\n <mat-icon \n class=\"td-data-table-sort-icon\" \n *ngIf=\"sortable && numeric\"\n [class.mat-asc]=\"isAscending()\"\n [class.mat-desc]=\"isDescending()\">\n arrow_upward\n </mat-icon>\n <span>\n <ng-content></ng-content>\n </span>\n <mat-icon \n class=\"td-data-table-sort-icon\" \n *ngIf=\"sortable && !numeric\"\n [class.mat-asc]=\"isAscending()\"\n [class.mat-desc]=\"isDescending()\">\n arrow_upward\n </mat-icon>\n</span>\n<ng-content select=\"[td-column-resizer]\"></ng-content>\n",
styles: [":host{white-space:nowrap;position:relative;padding:0;vertical-align:middle;text-align:left}:host>.td-data-table-heading{padding:0 28px}:host:first-child>.td-data-table-heading{padding-left:24px;padding-right:initial}html[dir=rtl] :host:first-child>.td-data-table-heading{padding-left:initial;unicode-bidi:embed;padding-right:24px;unicode-bidi:embed}body[dir=rtl] :host:first-child>.td-data-table-heading{padding-left:initial;unicode-bidi:embed;padding-right:24px;unicode-bidi:embed}[dir=rtl] :host:first-child>.td-data-table-heading{padding-left:initial;unicode-bidi:embed;padding-right:24px;unicode-bidi:embed}:host:first-child>.td-data-table-heading bdo[dir=rtl]{direction:rtl;unicode-bidi:bidi-override}:host:first-child>.td-data-table-heading bdo[dir=ltr]{direction:ltr;unicode-bidi:bidi-override}:host:last-child>.td-data-table-heading{padding-left:28px;padding-right:24px}html[dir=rtl] :host:last-child>.td-data-table-heading{padding-left:24px;unicode-bidi:embed;padding-right:28px;unicode-bidi:embed}body[dir=rtl] :host:last-child>.td-data-table-heading{padding-left:24px;unicode-bidi:embed;padding-right:28px;unicode-bidi:embed}[dir=rtl] :host:last-child>.td-data-table-heading{padding-left:24px;unicode-bidi:embed;padding-right:28px;unicode-bidi:embed}:host:last-child>.td-data-table-heading bdo[dir=rtl]{direction:rtl;unicode-bidi:bidi-override}:host:last-child>.td-data-table-heading bdo[dir=ltr]{direction:ltr;unicode-bidi:bidi-override}:host mat-icon{height:16px;width:16px;font-size:16px!important;line-height:16px!important}:host mat-icon.td-data-table-sort-icon{opacity:0;-webkit-transition:-webkit-transform .25s;transition:transform .25s;transition:transform .25s,-webkit-transform .25s;position:absolute;top:0}:host mat-icon.td-data-table-sort-icon.mat-asc{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0)}:host mat-icon.td-data-table-sort-icon.mat-desc{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}:host.mat-active.mat-sortable mat-icon.td-data-table-sort-icon,:host:hover.mat-sortable mat-icon.td-data-table-sort-icon{opacity:1}html[dir=rtl] :host{text-align:right;unicode-bidi:embed}body[dir=rtl] :host{text-align:right;unicode-bidi:embed}[dir=rtl] :host{text-align:right;unicode-bidi:embed}:host bdo[dir=rtl]{direction:rtl;unicode-bidi:bidi-override}:host bdo[dir=ltr]{direction:ltr;unicode-bidi:bidi-override}:host>*{vertical-align:middle}:host.mat-clickable{cursor:pointer}:host.mat-clickable:focus{outline:0}:host .td-data-table-heading{display:inline-block;position:relative}:host.mat-numeric{text-align:right}html[dir=rtl] :host.mat-numeric{text-align:left;unicode-bidi:embed}body[dir=rtl] :host.mat-numeric{text-align:left;unicode-bidi:embed}[dir=rtl] :host.mat-numeric{text-align:left;unicode-bidi:embed}:host.mat-numeric bdo[dir=rtl]{direction:rtl;unicode-bidi:bidi-override}:host.mat-numeric bdo[dir=ltr]{direction:ltr;unicode-bidi:bidi-override}:host.mat-numeric mat-icon.td-data-table-sort-icon{margin-left:-22px;margin-right:initial}html[dir=rtl] :host.mat-numeric mat-icon.td-data-table-sort-icon{margin-left:initial;unicode-bidi:embed;margin-right:-22px;unicode-bidi:embed}body[dir=rtl] :host.mat-numeric mat-icon.td-data-table-sort-icon{margin-left:initial;unicode-bidi:embed;margin-right:-22px;unicode-bidi:embed}[dir=rtl] :host.mat-numeric mat-icon.td-data-table-sort-icon{margin-left:initial;unicode-bidi:embed;margin-right:-22px;unicode-bidi:embed}:host.mat-numeric mat-icon.td-data-table-sort-icon bdo[dir=rtl]{direction:rtl;unicode-bidi:bidi-override}:host.mat-numeric mat-icon.td-data-table-sort-icon bdo[dir=ltr]{direction:ltr;unicode-bidi:bidi-override}:host:not(.mat-numeric) mat-icon.td-data-table-sort-icon{margin-left:6px;margin-right:initial}html[dir=rtl] :host:not(.mat-numeric) mat-icon.td-data-table-sort-icon{margin-left:initial;unicode-bidi:embed;margin-right:6px;unicode-bidi:embed}body[dir=rtl] :host:not(.mat-numeric) mat-icon.td-data-table-sort-icon{margin-left:initial;unicode-bidi:embed;margin-right:6px;unicode-bidi:embed}[dir=rtl] :host:not(.mat-numeric) mat-icon.td-data-table-sort-icon{margin-left:initial;unicode-bidi:embed;margin-right:6px;unicode-bidi:embed}:host:not(.mat-numeric) mat-icon.td-data-table-sort-icon bdo[dir=rtl]{direction:rtl;unicode-bidi:bidi-override}:host:not(.mat-numeric) mat-icon.td-data-table-sort-icon bdo[dir=ltr]{direction:ltr;unicode-bidi:bidi-override}"]
}] }
];
/** @nocollapse */
TdDataTableColumnComponent.ctorParameters = () => [
{ type: ElementRef },
{ type: Renderer2 }
];
TdDataTableColumnComponent.propDecorators = {
_columnContent: [{ type: ViewChild, args: ['columnContent', { read: ElementRef },] }],
name: [{ type: Input, args: ['name',] }],
sortable: [{ type: Input, args: ['sortable',] }],
active: [{ type: Input, args: ['active',] }],
numeric: [{ type: Input, args: ['numeric',] }],
sortOrder: [{ type: Input, args: ['sortOrder',] }],
onSortChange: [{ type: Output, args: ['sortChange',] }],
bindClickable: [{ type: HostBinding, args: ['class.mat-clickable',] }],
bingSortable: [{ type: HostBinding, args: ['class.mat-sortable',] }],
bindActive: [{ type: HostBinding, args: ['class.mat-active',] }],
bindNumeric: [{ type: HostBinding, args: ['class.mat-numeric',] }],
handleClick: [{ type: HostListener, args: ['click',] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class TdDataTableCellComponent {
/**
* @param {?} _elementRef
* @param {?} _renderer
*/
constructor(_elementRef, _renderer) {
this._elementRef = _elementRef;
this._renderer = _renderer;
/**
* numeric?: boolean
* Makes cell follow the numeric data-table specs.
* Defaults to 'false'
*/
this.numeric = false;
this._renderer.addClass(this._elementRef.nativeElement, 'td-data-table-cell');
}
/**
* align?: 'start' | 'center' | 'end'
* Makes cell content align on demand
* Defaults to 'left', overrides numeric
* @param {?} align
* @return {?}
*/
set align(align) {
this._align = align;
}
/**
* @return {?}
*/
get align() {
return this._align;
}
/**
* @return {?}
*/
get bindNumeric() {
return this.numeric;
}
}
TdDataTableCellComponent.decorators = [
{ type: Component, args: [{
/* tslint:disable-next-line */
selector: 'td[td-data-table-cell]',
template: "<div class=\"td-data-table-cell-content-wrapper\"\n [class.td-data-table-cell-numeric]=\"numeric\"\n [class.td-data-table-cell-align-center]=\"align === 'center'\"\n [class.td-data-table-cell-align-end]=\"align === 'end'\"\n [class.td-data-table-cell-align-start]=\"align === 'start'\"\n >\n <ng-content></ng-content>\n</div>",
styles: [":host{vertical-align:middle;text-align:left;padding:0}html[dir=rtl] :host{text-align:right;unicode-bidi:embed}body[dir=rtl] :host{text-align:right;unicode-bidi:embed}[dir=rtl] :host{text-align:right;unicode-bidi:embed}:host bdo[dir=rtl]{direction:rtl;unicode-bidi:bidi-override}:host bdo[dir=ltr]{direction:ltr;unicode-bidi:bidi-override}:host>.td-data-table-cell-content-wrapper{padding:0 28px;-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:center;align-content:center;max-width:100%;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}:host>.td-data-table-cell-content-wrapper.td-data-table-cell-numeric{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}:host>.td-data-table-cell-content-wrapper.td-data-table-cell-align-start{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}:host>.td-data-table-cell-content-wrapper.td-data-table-cell-align-end{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}:host>.td-data-table-cell-content-wrapper.td-data-table-cell-align-center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}:host:first-child>.td-data-table-cell-content-wrapper{padding-left:24px;padding-right:initial}html[dir=rtl] :host:first-child>.td-data-table-cell-content-wrapper{padding-left:initial;unicode-bidi:embed;padding-right:24px;unicode-bidi:embed}body[dir=rtl] :host:first-child>.td-data-table-cell-content-wrapper{padding-left:initial;unicode-bidi:embed;padding-right:24px;unicode-bidi:embed}[dir=rtl] :host:first-child>.td-data-table-cell-content-wrapper{padding-left:initial;unicode-bidi:embed;padding-right:24px;unicode-bidi:embed}:host:first-child>.td-data-table-cell-content-wrapper bdo[dir=rtl]{direction:rtl;unicode-bidi:bidi-override}:host:first-child>.td-data-table-cell-content-wrapper bdo[dir=ltr]{direction:ltr;unicode-bidi:bidi-override}:host:last-child>.td-data-table-cell-content-wrapper{padding-left:28px;padding-right:24px}html[dir=rtl] :host:last-child>.td-data-table-cell-content-wrapper{padding-left:24px;unicode-bidi:embed;padding-right:28px;unicode-bidi:embed}body[dir=rtl] :host:last-child>.td-data-table-cell-content-wrapper{padding-left:24px;unicode-bidi:embed;padding-right:28px;unicode-bidi:embed}[dir=rtl] :host:last-child>.td-data-table-cell-content-wrapper{padding-left:24px;unicode-bidi:embed;padding-right:28px;unicode-bidi:embed}:host:last-child>.td-data-table-cell-content-wrapper bdo[dir=rtl]{direction:rtl;unicode-bidi:bidi-override}:host:last-child>.td-data-table-cell-content-wrapper bdo[dir=ltr]{direction:ltr;unicode-bidi:bidi-override}:host>*{vertical-align:middle}:host.mat-clickable{cursor:pointer}:host.mat-clickable:focus{outline:0}:host.mat-numeric{text-align:right}html[dir=rtl] :host.mat-numeric{text-align:left;unicode-bidi:embed}body[dir=rtl] :host.mat-numeric{text-align:left;unicode-bidi:embed}[dir=rtl] :host.mat-numeric{text-align:left;unicode-bidi:embed}:host.mat-numeric bdo[dir=rtl]{direction:rtl;unicode-bidi:bidi-override}:host.mat-numeric bdo[dir=ltr]{direction:ltr;unicode-bidi:bidi-override}"]
}] }
];
/** @nocollapse */
TdDataTableCellComponent.ctorParameters = () => [
{ type: ElementRef },
{ type: Renderer2 }
];
TdDataTableCellComponent.propDecorators = {
numeric: [{ type: Input, args: ['numeric',] }],
align: [{ type: Input }],
bindNumeric: [{ type: HostBinding, args: ['class.mat-numeric',] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class TdDataTableTableComponent {
/**
* @param {?} _elementRef
* @param {?} _renderer
*/
constructor(_elementRef, _renderer) {
this._elementRef = _elementRef;
this._renderer = _renderer;
this._renderer.addClass(this._elementRef.nativeElement, 'td-data-table');
}
}
TdDataTableTableComponent.decorators = [
{ type: Component, args: [{
/* tslint:disable-next-line */
selector: 'table[td-data-table]',
template: "<ng-content></ng-content>",
styles: [":host{width:100%;position:relative;border-spacing:0;overflow:hidden;border-collapse:collapse}"]
}] }
];
/** @nocollapse */
TdDataTableTableComponent.ctorParameters = () => [
{ type: ElementRef },
{ type: Renderer2 }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class TdDataTableService {
/**
* params:
* - data: any[]
* - searchTerm: string
* - ignoreCase: boolean = false
* - excludedColumns: string[] = []
*
* Searches [data] parameter for [searchTerm] matches and returns a new array with them.
* @param {?} data
* @param {?} searchTerm
* @param {?=} ignoreCase
* @param {?=} excludedColumns
* @return {?}
*/
filterData(data, searchTerm, ignoreCase = false, excludedColumns) {
/** @type {?} */
let filter$$1 = searchTerm ? (ignoreCase ? searchTerm.toLowerCase() : searchTerm) : '';
if (filter$$1) {
data = data.filter((item) => {
/** @type {?} */
const res = Object.keys(item).find((key) => {
if (!excludedColumns || excludedColumns.indexOf(key) === -1) {
/** @type {?} */
const preItemValue = ('' + item[key]);
/** @type {?} */
const itemValue = ignoreCase ? preItemValue.toLowerCase() : preItemValue;
return itemValue.indexOf(filter$$1) > -1;
}
});
return !(typeof res === 'undefined');
});
}
return data;
}
/**
* params:
* - data: any[]
* - sortBy: string
* - sortOrder: TdDataTableSortingOrder = TdDataTableSortingOrder.Ascending
*
* Sorts [data] parameter by [sortBy] and [sortOrder] and returns the sorted data.
* @param {?} data
* @param {?} sortBy
* @param {?=} sortOrder
* @return {?}
*/
sortData(data, sortBy, sortOrder = TdDataTableSortingOrder.Ascending) {
if (sortBy) {
data = Array.from(data); // Change the array reference to trigger OnPush and not mutate original array
data.sort((a, b) => {
/** @type {?} */
let compA = a[sortBy];
/** @type {?} */
let compB = b[sortBy];
/** @type {?} */
let direction = 0;
if (!Number.isNaN(Number.parseFloat(compA)) && !Number.isNaN(Number.parseFloat(compB))) {
direction = Number.parseFloat(compA) - Number.parseFloat(compB);
}
else {
if (compA < compB) {
direction = -1;
}
else if (compA > compB) {
direction = 1;
}
}
return direction * (sortOrder === TdDataTableSortingOrder.Descending ? -1 : 1);
});
}
return data;
}
/**
* params:
* - data: any[]
* - fromRow: number
* - toRow: : number
*
* Returns a section of the [data] parameter starting from [fromRow] and ending in [toRow].
* @param {?} data
* @param {?} fromRow
* @param {?} toRow
* @return {?}
*/
pageData(data, fromRow, toRow) {
if (fromRow >= 1) {
data = data.slice(fromRow - 1, toRow);
}
return data;
}
}
TdDataTableService.decorators = [
{ type: Injectable }
];
/**
* @param {?} parent
* @return {?}
*/
function DATA_TABLE_PROVIDER_FACTORY(parent) {
return parent || new TdDataTableService();
}
/** @type {?} */
const DATA_TABLE_PROVIDER = {
// If there is already a service available, use that. Otherwise, provide a new one.
provide: TdDataTableService,
deps: [[new Optional(), new SkipSelf(), TdDataTableService]],
useFactory: DATA_TABLE_PROVIDER_FACTORY,
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/** @type {?} */
const TD_DATA_TABLE = [
TdDataTableComponent,
TdDataTableTemplateDirective,
TdDataTableColumnComponent,
TdDataTableCellComponent,
TdDataTableRowComponent,
TdDataTableColumnRowComponent,
TdDataTableTableComponent,
];
class CovalentDataTableModule {
}
CovalentDataTableModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule,
MatCheckboxModule,
MatTooltipModule,
MatIconModule,
MatPseudoCheckboxModule,
],
declarations: [
TD_DATA_TABLE,
],
exports: [
TD_DATA_TABLE,
],
providers: [
DATA_TABLE_PROVIDER,
],
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class TdDialogTitleDirective {
}
TdDialogTitleDirective.decorators = [
{ type: Directive, args: [{ selector: 'td-dialog-title' },] }
];
class TdDialogContentDirective {
}
TdDialogContentDirective.decorators = [
{ type: Directive, args: [{ selector: 'td-dialog-content' },] }
];
class TdDialogActionsDirective {
}
TdDialogActionsDirective.decorators = [
{ type: Directive, args: [{ selector: 'td-dialog-actions' },] }
];
class TdDialogComponent {
/**
* @return {?}
*/
ngAfterContentInit() {
if (this.dialogTitle.length > 1) {
throw new Error('Duplicate td-dialog-title component at in td-dialog.');
}
if (this.dialogContent.length > 1) {
throw new Error('Duplicate td-dialog-content component at in td-dialog.');
}
if (this.dialogActions.length > 1) {
throw new Error('Duplicate td-dialog-actions component at in td-dialog.');
}
}
}
TdDialogComponent.decorators = [
{ type: Component, args: [{
selector: 'td-dialog',
template: "<div class=\"td-dialog-wrapper\">\n <h3 class=\"td-dialog-title\" *ngIf=\"dialogTitle.length > 0\">\n <ng-content select=\"td-dialog-title\"></ng-content>\n </h3>\n <div class=\"td-dialog-content\" *ngIf=\"dialogContent.length > 0\">\n <ng-content select=\"td-dialog-content\"></ng-content>\n </div>\n <div class=\"td-dialog-actions\" *ngIf=\"dialogActions.length > 0\">\n <span class=\"td-dialog-spacer\"></span>\n <ng-content select=\"td-dialog-actions\"></ng-content>\n </div>\n</div>",
styles: [".td-dialog-title{margin-top:0;margin-bottom:20px}.td-dialog-content{margin-bottom:16px}.td-dialog-actions{position:relative;top:16px;left:16px}::ng-deep [dir=rtl] .td-dialog-actions{right:16px;left:auto}:host{display:block}:host .td-dialog-actions{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex}:host .td-dialog-actions .td-dialog-spacer{-webkit-box-flex:1;-ms-flex:1;flex:1}:host .td-dialog-actions ::ng-deep button{text-transform:uppercase;margin-left:8px;padding-left:8px;padding-right:8px;min-width:64px}[dir=rtl] :host .td-dialog-actions ::ng-deep button{margin-right:8px;margin-left:inherit}"]
}] }
];
TdDialogComponent.propDecorators = {
dialogTitle: [{ type: ContentChildren, args: [TdDialogTitleDirective,] }],
dialogContent: [{ type: ContentChildren, args: [TdDialogContentDirective,] }],
dialogActions: [{ type: ContentChildren, args: [TdDialogActionsDirective,] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class TdAlertDialogComponent {
/**
* @param {?} _dialogRef
*/
constructor(_dialogRef) {
this._dialogRef = _dialogRef;
this.closeButton = 'CLOSE';
}
/**
* @return {?}
*/
close() {
this._dialogRef.close();
}
}
TdAlertDialogComponent.decorators = [
{ type: Component, args: [{
selector: 'td-alert-dialog',
template: "<td-dialog>\n <td-dialog-title *ngIf=\"title\">\n {{title}}\n </td-dialog-title>\n <td-dialog-content>\n <span class=\"td-dialog-message\">{{message}}</span>\n </td-dialog-content>\n <td-dialog-actions>\n <button mat-button color=\"accent\" (click)=\"close()\">{{closeButton}}</button>\n </td-dialog-actions>\n</td-dialog>",
styles: [".td-dialog-message{word-break:break-word}"]
}] }
];
/** @nocollapse */
TdAlertDialogComponent.ctorParameters = () => [
{ type: MatDialogRef }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class TdConfirmDialogComponent {
/**
* @param {?} _dialogRef
*/
constructor(_dialogRef) {
this._dialogRef = _dialogRef;
this.cancelButton = 'CANCEL';
this.acceptButton = 'ACCEPT';
}
/**
* @return {?}
*/
cancel() {
this._dialogRef.close(false);
}
/**
* @return {?}
*/
accept() {
this._dialogRef.close(true);
}
}
TdConfirmDialogComponent.decorators = [
{ type: Component, args: [{
selector: 'td-confirm-dialog',
template: "<td-dialog>\n <td-dialog-title *ngIf=\"title\">\n {{title}}\n </td-dialog-title>\n <td-dialog-content>\n <span class=\"td-dialog-message\">{{message}}</span>\n </td-dialog-content>\n <td-dialog-actions>\n <button mat-button\n #closeBtn \n (keydown.arrowright)=\"acceptBtn.focus()\"\n (click)=\"cancel()\">{{cancelButton}}</button>\n <button mat-button\n color=\"accent\"\n #acceptBtn\n (keydown.arrowleft)=\"closeBtn.focus()\"\n (click)=\"accept()\">{{acceptButton}}</button>\n </td-dialog-actions>\n</td-dialog>",
styles: [".td-dialog-message{word-break:break-word}"]
}] }
];
/** @nocollapse */
TdConfirmDialogComponent.ctorParameters = () => [
{ type: MatDialogRef }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class TdPromptDialogComponent {
/**
* @param {?} _dialogRef
*/
constructor(_dialogRef) {
this._dialogRef = _dialogRef;
this.cancelButton = 'CANCEL';
this.acceptButton = 'ACCEPT';
}
/**
* @return {?}
*/
ngAfterViewInit() {
// focus input once everything is rendered and good to go
Promise.resolve().then(() => {
((/** @type {?} */ (this._input.nativeElement))).focus();
});
}
/**
* Method executed when input is focused
* Selects all text
* @return {?}
*/
handleInputFocus() {
((/** @type {?} */ (this._input.nativeElement))).select();
}
/**
* @return {?}
*/
cancel() {
this._dialogRef.close(undefined);
}
/**
* @return {?}
*/
accept() {
this._dialogRef.close(this.value);
}
}
TdPromptDialogComponent.decorators = [
{ type: Component, args: [{
selector: 'td-prompt-dialog',
template: "<td-dialog>\n <td-dialog-title *ngIf=\"title\">\n {{title}}\n </td-dialog-title>\n <td-dialog-content>\n <span class=\"td-dialog-message\">{{message}}</span>\n <form #form=\"ngForm\" novalidate>\n <div class=\"td-dialog-input-wrapper\">\n <mat-form-field class=\"td-dialog-input\">\n <input matInput\n #input\n (focus)=\"handleInputFocus()\"\n (keydown.enter)=\"$event.preventDefault(); form.valid && accept()\"\n [(ngModel)]=\"value\"\n name=\"value\"\n required/>\n </mat-form-field>\n </div>\n </form>\n </td-dialog-content>\n <td-dialog-actions>\n <button mat-button\n #closeBtn \n (keydown.arrowright)=\"acceptBtn.focus()\"\n (click)=\"cancel()\">{{cancelButton}}</button>\n <button mat-button\n color=\"accent\"\n #acceptBtn\n (keydown.arrowleft)=\"closeBtn.focus()\"\n [disabled]=\"!form.valid\"\n (click)=\"accept()\">{{acceptButton}}</button>\n </td-dialog-actions>\n</td-dialog>",
styles: [".td-dialog-input-wrapper{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex}.td-dialog-input-wrapper .td-dialog-input{-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-sizing:border-box;box-sizing:border-box}.td-dialog-message{word-break:break-word}"]
}] }
];
/** @nocollapse */
TdPromptDialogComponent.ctorParameters = () => [
{ type: MatDialogRef }
];
TdPromptDialogComponent.propDecorators = {
_input: [{ type: ViewChild, args: ['input',] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class TdDialogService {
/**
* @param {?} _dialogService
*/
constructor(_dialogService) {
this._dialogService = _dialogService;
}
/**
* params:
* - component: ComponentType<T>
* - config: MatDialogConfig
* Wrapper function over the open() method in MatDialog.
* Opens a modal dialog containing the given component.
* @template T
* @param {?} component
* @param {?=} config
* @return {?}
*/
open(component, config) {
return this._dialogService.open(component, config);
}
/**
* Wrapper function over the closeAll() method in MatDialog.
* Closes all of the currently-open dialogs.
* @return {?}
*/
closeAll() {
this._dialogService.closeAll();
}
/**
* params:
* - config: IAlertConfig {
* message: string;
* title?: string;
* viewContainerRef?: ViewContainerRef;
* closeButton?: string;
* }
*
* Opens an alert dialog with the provided config.
* Returns an MatDialogRef<TdAlertDialogComponent> object.
* @param {?} config
* @return {?}
*/
openAlert(config) {
/** @type {?} */
let dialogConfig = this._createConfig(config);
/** @type {?} */
let dialogRef = this._dialogService.open(TdAlertDialogComponent, dialogConfig);
/** @type {?} */
let alertDialogComponent = dialogRef.componentInstance;
alertDialogComponent.title = config.title;
alertDialogComponent.message = config.message;
if (config.closeButton) {
alertDialogComponent.closeButton = config.closeButton;
}
return dialogRef;
}
/**
* params:
* - config: IConfirmConfig {
* message: string;
* title?: string;
* viewContainerRef?: ViewContainerRef;
* acceptButton?: string;
* cancelButton?: string;
* }
*
* Opens a confirm dialog with the provided config.
* Returns an MatDialogRef<TdConfirmDialogComponent> object.
* @param {?} config
* @return {?}
*/
openConfirm(config) {
/** @type {?} */
let dialogConfig = this._createConfig(config);
/** @type {?} */
let dialogRef = this._dialogService.open(TdConfirmDialogComponent, dialogConfig);
/** @type {?} */
let confirmDialogComponent = dialogRef.componentInstance;
confirmDialogComponent.title = config.title;
confirmDialogComponent.message = config.message;
if (config.acceptButton) {
confirmDialogComponent.acceptButton = config.acceptButton;
}
if (config.cancelButton) {
confirmDialogComponent.cancelButton = config.cancelButton;
}
return dialogRef;
}
/**
* params:
* - config: IPromptConfig {
* message: string;
* title?: string;
* value?: string;
* viewContainerRef?: ViewContainerRef;
* acceptButton?: string;
* cancelButton?: string;
* }
*
* Opens a prompt dialog with the provided config.
* Returns an MatDialogRef<TdPromptDialogComponent> object.
* @param {?} config
* @return {?}
*/
openPrompt(config) {
/** @type {?} */
let dialogConfig = this._createConfig(config);
/** @type {?} */
let dialogRef = this._dialogService.open(TdPromptDialogComponent, dialogConfig);
/** @type {?} */
let promptDialogComponent = dialogRef.componentInstance;
promptDialogComponent.title = config.title;
promptDialogComponent.message = config.message;
promptDialogComponent.value = config.value;
if (config.acceptButton) {
promptDialogComponent.acceptButton = config.acceptButton;
}
if (config.cancelButton) {
promptDialogComponent.cancelButton = config.cancelButton;
}
return dialogRef;
}
/**
* @param {?} config
* @return {?}
*/
_createConfig(config) {
/** @type {?} */
let dialogConfig = new MatDialogConfig();
dialogConfig.width = '400px';
Object.assign(dialogConfig, config);
return dialogConfig;
}
}
TdDialogService.decorators = [
{ type: Injectable }
];
/** @nocollapse */
TdDialogService.ctorParameters = () => [
{ type: MatDialog }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/** @type {?} */
const TD_DIALOGS = [
TdAlertDialogComponent,
TdConfirmDialogComponent,
TdPromptDialogComponent,
TdDialogComponent,
TdDialogTitleDirective,
TdDialogActionsDirective,
TdDialogContentDirective,
];
/** @type {?} */
const TD_DIALOGS_ENTRY_COMPONENTS = [
TdAlertDialogComponent,
TdConfirmDialogComponent,
TdPromptDialogComponent,
];
class CovalentDialogsModule {
}
CovalentDialogsModule.decorators = [
{ type: NgModule, args: [{
imports: [
FormsModule,
CommonModule,
MatDialogModule,
MatInputModule,
MatButtonModule,
],
declarations: [
TD_DIALOGS,
],
exports: [
TD_DIALOGS,
],
providers: [
TdDialogService,
],
entryComponents: [
TD_DIALOGS_ENTRY_COMPONENTS,
],
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class TdExpansionPanelHeaderDirective extends TemplatePortalDirective {
/**
* @param {?} templateRef
* @param {?} viewContainerRef
*/
constructor(templateRef, viewContainerRef) {
super(templateRef, viewContainerRef);
}
}
TdExpansionPanelHeaderDirective.decorators = [
{ type: Directive, args: [{
selector: '[td-expansion-panel-header]ng-template',
},] }
];
/** @nocollapse */
TdExpansionPanelHeaderDirective.ctorParameters = () => [
{ type: TemplateRef },
{ type: ViewContainerRef }
];
class TdExpansionPanelLabelDirective extends TemplatePortalDirective {
/**
* @param {?} templateRef
* @param {?} viewContainerRef
*/
constructor(templateRef, viewContainerRef) {
super(templateRef, viewContainerRef);
}
}
TdExpansionPanelLabelDirective.decorators = [
{ type: Directive, args: [{
selector: '[td-expansion-panel-label]ng-template',
},] }
];
/** @nocollapse */
TdExpansionPanelLabelDirective.ctorParameters = () => [
{ type: TemplateRef },
{ type: ViewContainerRef }
];
class TdExpansionPanelSublabelDirective extends TemplatePortalDirective {
/**
* @param {?} templateRef
* @param {?} viewContainerRef
*/
constructor(templateRef, viewContainerRef) {
super(templateRef, viewContainerRef);
}
}
TdExpansionPanelSublabelDirective.decorators = [
{ type: Directive, args: [{
selector: '[td-expansion-panel-sublabel]ng-template',
},] }
];
/** @nocollapse */
TdExpansionPanelSublabelDirective.ctorParameters = () => [
{ type: TemplateRef },
{ type: ViewContainerRef }
];
class TdExpansionPanelSummaryComponent {
}
TdExpansionPanelSummaryComponent.decorators = [
{ type: Component, args: [{
selector: 'td-expansion-summary',
template: '<ng-content></ng-content>'
}] }
];
class TdExpansionPanelBase {
}
/* tslint:disable-next-line */
/** @type {?} */
const _TdExpansionPanelMixinBase = mixinDisableRipple(mixinDisabled(TdExpansionPanelBase));
class TdExpansionPanelComponent extends _TdExpansionPanelMixinBase {
/**
* @param {?} _renderer
* @param {?} _elementRef
*/
constructor(_renderer, _elementRef) {
super();
this._renderer = _renderer;
this._elementRef = _elementRef;
this._expand = false;
/**
* expanded?: function
* Event emitted when [TdExpansionPanelComponent] is expanded.
*/
this.expanded = new EventEmitter();
/**
* collapsed?: function
* Event emitted when [TdExpansionPanelComponent] is collapsed.
*/
this.collapsed = new EventEmitter();
this._renderer.addClass(this._elementRef.nativeElement, 'td-expansion-panel');
}
/**
* expand?: boolean
* Toggles [TdExpansionPanelComponent] between expand/collapse.
* @param {?} expand
* @return {?}
*/
set expand(expand) {
this._setExpand(coerceBooleanProperty(expand));
}
/**
* @return {?}
*/
get expand() {
return this._expand;
}
/**
* Method executed when [TdExpansionPanelComponent] is clicked.
* @return {?}
*/
clickEvent() {
this._setExpand(!this._expand);
}
/**
* Toggle expand state of [TdExpansionPanelComponent]
* retuns 'true' if successful, else 'false'.
* @return {?}
*/
toggle() {
return this._setExpand(!this._expand);
}
/**
* Opens [TdExpansionPanelComponent]
* retuns 'true' if successful, else 'false'.
* @return {?}
*/
open() {
return this._setExpand(true);
}
/**
* Closes [TdExpansionPanelComponent]
* retuns 'true' if successful, else 'false'.
* @return {?}
*/
close() {
return this._setExpand(false);
}
/**
* Method executed when the disabled value changes
* @param {?} v
* @return {?}
*/
onDisabledChange(v) {
if (v && this._expand) {
this._expand = false;
this._onCollapsed();
}
}
/**
* Method to change expand state internally and emit the [onExpanded] event if 'true' or [onCollapsed]
* event if 'false'. (Blocked if [disabled] is 'true')
* @param {?} newExpand
* @return {?}
*/
_setExpand(newExpand) {
if (this.disabled) {
return false;
}
if (this._expand !== newExpand) {
this._expand = newExpand;
if (newExpand) {
this._renderer.addClass(this._elementRef.nativeElement, 'td-expanded');
this._onExpanded();
}
else {
this._renderer.removeClass(this._elementRef.nativeElement, 'td-expanded');
this._onCollapsed();
}
return true;
}
return false;
}
/**
* @return {?}
*/
_onExpanded() {
this.expanded.emit(undefined);
}
/**
* @return {?}
*/
_onCollapsed() {
this.collapsed.emit(undefined);
}
}
TdExpansionPanelComponent.decorators = [
{ type: Component, args: [{
selector: 'td-expansion-panel',
template: "<div class=\"td-expansion-panel-header\"\n [class.mat-disabled]=\"disabled\"\n matRipple\n [matRippleDisabled]=\"disabled || disableRipple\"\n [tabIndex]=\"disabled? -1 : 0\"\n (keydown.enter)=\"clickEvent()\"\n (click)=\"clickEvent()\">\n <ng-template [cdkPortalOutlet]=\"expansionPanelHeader\"></ng-template>\n <div class=\"td-expansion-panel-header-content\"\n [class.mat-disabled]=\"disabled\"\n *ngIf=\"!expansionPanelHeader\">\n <div *ngIf=\"label || expansionPanelLabel\" class=\"td-expansion-label\">\n <ng-template [cdkPortalOutlet]=\"expansionPanelLabel\"></ng-template>\n <ng-template [ngIf]=\"!expansionPanelLabel\">{{label}}</ng-template>\n </div>\n <div *ngIf=\"sublabel || expansionPanelSublabel\" class=\"td-expansion-sublabel\">\n <ng-template [cdkPortalOutlet]=\"expansionPanelSublabel\"></ng-template>\n <ng-template [ngIf]=\"!expansionPanelSublabel\">{{sublabel}}</ng-template>\n </div>\n <mat-icon class=\"td-expand-icon\" *ngIf=\"!disabled\" [@tdRotate]=\"expand\">keyboard_arrow_down</mat-icon>\n </div>\n</div>\n<div class=\"td-expansion-content\"\n [@tdCollapse]=\"!expand\">\n <ng-content></ng-content>\n</div>\n<div class=\"td-expansion-summary\"\n [@tdCollapse]=\"expand\">\n <ng-content select=\"td-expansion-summary\"></ng-content>\n</div>\n",
inputs: ['disabled', 'disableRipple'],
animations: [
tdCollapseAnimation,
tdRotateAnimation,
],
styles: [":host{display:block}:host .td-expansion-panel-header{position:relative;outline:0}:host .td-expansion-panel-header:focus:not(.mat-disabled),:host .td-expansion-panel-header:hover:not(.mat-disabled){cursor:pointer}:host .td-expansion-panel-header .td-expansion-panel-header-content{height:48px;padding:0 24px;-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:center;align-content:center;max-width:100%}:host .td-expansion-panel-header .td-expansion-panel-header-content .td-expansion-label,:host .td-expansion-panel-header .td-expansion-panel-header-content .td-expansion-sublabel{-webkit-box-flex:1;-ms-flex:1;flex:1}:host .td-expansion-content.ng-animating,:host .td-expansion-summary.ng-animating{overflow:hidden}.td-expansion-label,.td-expansion-sublabel{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:16px}::ng-deep [dir=rtl] .td-expansion-label,::ng-deep [dir=rtl] .td-expansion-sublabel{margin-left:16px;margin-right:inherit}"]
}] }
];
/** @nocollapse */
TdExpansionPanelComponent.ctorParameters = () => [
{ type: Renderer2 },
{ type: ElementRef }
];
TdExpansionPanelComponent.propDecorators = {
expansionPanelHeader: [{ type: ContentChild, args: [TdExpansionPanelHeaderDirective,] }],
expansionPanelLabel: [{ type: ContentChild, args: [TdExpansionPanelLabelDirective,] }],
expansionPanelSublabel: [{ type: ContentChild, args: [TdExpansionPanelSublabelDirective,] }],
label: [{ type: Input }],
sublabel: [{ type: Input }],
expand: [{ type: Input, args: ['expand',] }],
expanded: [{ type: Output }],
collapsed: [{ type: Output }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class TdExpansionPanelGroupComponent {
/**
* @param {?} _renderer
* @param {?} _elementRef
*/
constructor(_renderer, _elementRef) {
this._renderer = _renderer;
this._elementRef = _elementRef;
this._multi = false;
this._lastOpenedPanels = [];
this._destroyed = new Subject();
this._stopWatchingPanels = new Subject();
this._renderer.addClass(this._elementRef.nativeElement, 'td-expansion-panel-group');
}
/**
* multi?: boolean
* Sets whether multiple panels can be opened at a given time.
* Set to false for accordion mode.
* Defaults to false.
* @param {?} multi
* @return {?}
*/
set multi(multi) {
this._multi = coerceBooleanProperty(multi);
if (this._multi === false && this._lastOpenedPanels.length > 0) {
this._closeAllExcept(this._lastOpenedPanels[this._lastOpenedPanels.length - 1]);
}
}
/**
* @return {?}
*/
ngOnDestroy() {
this._destroyed.next(true);
this._destroyed.unsubscribe();
this._stopWatchingPanels.next(true);
this._stopWatchingPanels.unsubscribe();
}
/**
* @return {?}
*/
ngAfterContentInit() {
if (!this._multi) {
/** @type {?} */
const openedPanels = this.expansionPanels.filter((expansionPanel) => expansionPanel.expand);
/** @type {?} */
const numOpenedPanels = openedPanels.length;
if (numOpenedPanels > 1) {
this._closeAllExcept(openedPanels[numOpenedPanels - 1]);
}
}
this._attachListeners(this.expansionPanels);
this.expansionPanels.changes
.pipe(takeUntil(this._destroyed))
.subscribe((expansionPanels) => {
this._stopWatchingPanels.next(true);
this._stopWatchingPanels.unsubscribe();
this._stopWatchingPanels = new Subject();
this._attachListeners(expansionPanels);
});
}
/**
* Opens all expansion panels, only if multi set set to true.
* @return {?}
*/
openAll() {
if (this._multi) {
this.expansionPanels.forEach((expansionPanel) => {
expansionPanel.open();
});
}
}
/**
* Closes all expansion panels
* @return {?}
*/
closeAll() {
this.expansionPanels.forEach((expansionPanel) => {
expansionPanel.close();
});
}
/**
* @param {?} expansionPanels
* @return {?}
*/
_attachListeners(expansionPanels) {
this._lastOpenedPanels = [];
expansionPanels.forEach((expansionPanel) => {
expansionPanel.expanded
.pipe(takeUntil(this._stopWatchingPanels))
.subscribe(() => {
/** @type {?} */
const indexOfPanel = this._lastOpenedPanels.indexOf(expansionPanel);
if (indexOfPanel !== -1) {
this._lastOpenedPanels.splice(indexOfPanel, 1);
}
this._lastOpenedPanels.push(expansionPanel);
if (!this._multi) {
this._closeAllExcept(expansionPanel);
}
});
expansionPanel.collapsed
.pipe(takeUntil(this._stopWatchingPanels))
.subscribe(() => {
/** @type {?} */
const indexOfPanel = this._lastOpenedPanels.indexOf(expansionPanel);
if (indexOfPanel !== -1) {
this._lastOpenedPanels.splice(indexOfPanel, 1);
}
});
});
}
/**
* @param {?} expansionPanel
* @return {?}
*/
_closeAllExcept(expansionPanel) {
this.expansionPanels.forEach((panel) => {
if (panel !== expansionPanel) {
panel.close();
}
});
}
}
TdExpansionPanelGroupComponent.decorators = [
{ type: Component, args: [{
selector: 'td-expansion-panel-group',
template: "<ng-content></ng-content>",
styles: [""]
}] }
];
/** @nocollapse */
TdExpansionPanelGroupComponent.ctorParameters = () => [
{ type: Renderer2 },
{ type: ElementRef }
];
TdExpansionPanelGroupComponent.propDecorators = {
multi: [{ type: Input, args: ['multi',] }],
expansionPanels: [{ type: ContentChildren, args: [TdExpansionPanelComponent,] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/** @type {?} */
const TD_EXPANSION_PANEL = [
TdExpansionPanelGroupComponent,
TdExpansionPanelComponent,
TdExpansionPanelHeaderDirective,
TdExpansionPanelLabelDirective,
TdExpansionPanelSublabelDirective,
TdExpansionPanelSummaryComponent,
];
class CovalentExpansionPanelModule {
}
CovalentExpansionPanelModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule,
MatRippleModule,
MatIconModule,
PortalModule,
],
declarations: [
TD_EXPANSION_PANEL,
],
exports: [
TD_EXPANSION_PANEL,
],
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class TdFileSelectDirective {
/**
* @param {?} model
*/
constructor(model) {
this.model = model;
this._multiple = false;
/**
* fileSelect?: function
* Event emitted when a file or files are selected in host [HTMLInputElement].
* Emits a [FileList | File] object.
* Alternative to not use [(ngModel)].
*/
this.onFileSelect = new EventEmitter();
}
/**
* multiple?: boolean
* Sets whether multiple files can be selected at once in host element, or just a single file.
* Can also be 'multiple' native attribute.
* @param {?} multiple
* @return {?}
*/
set multiple(multiple) {
this._multiple = coerceBooleanProperty(multiple);
}
/**
* Binds native 'multiple' attribute if [multiple] property is 'true'.
* @return {?}
*/
get multipleBinding() {
return this._multiple ? '' : undefined;
}
/**
* Listens to 'change' host event to get [HTMLInputElement] files.
* Emits the 'onFileSelect' event with a [FileList] or [File] depending if 'multiple' attr exists in host.
* Uses [(ngModel)] if declared, instead of emitting 'onFileSelect' event.
* @param {?} event
* @return {?}
*/
onChange(event) {
if (event.target instanceof HTMLInputElement) {
/** @type {?} */
let fileInputEl = ((/** @type {?} */ (event.target)));
/** @type {?} */
let files = fileInputEl.files;
if (files.length) {
/** @type {?} */
let value = this._multiple ? (files.length > 1 ? files : files[0]) : files[0];
this.model ? this.model.update.emit(value) : this.onFileSelect.emit(value);
}
}
}
}
TdFileSelectDirective.decorators = [
{ type: Directive, args: [{
selector: '[tdFileSelect]',
},] }
];
/** @nocollapse */
TdFileSelectDirective.ctorParameters = () => [
{ type: NgModel, decorators: [{ type: Optional }, { type: Host }] }
];
TdFileSelectDirective.propDecorators = {
multiple: [{ type: Input, args: ['multiple',] }],
onFileSelect: [{ type: Output, args: ['fileSelect',] }],
multipleBinding: [{ type: HostBinding, args: ['attr.multiple',] }],
onChange: [{ type: HostListener, args: ['change', ['$event'],] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class TdFileDropBase {
}
/* tslint:disable-next-line */
/** @type {?} */
const _TdFileDropMixinBase = mixinDisabled(TdFileDropBase);
class TdFileDropDirective extends _TdFileDropMixinBase {
/**
* @param {?} _renderer
* @param {?} _element
*/
constructor(_renderer, _element) {
super();
this._renderer = _renderer;
this._element = _element;
this._multiple = false;
/**
* fileDrop?: function
* Event emitted when a file or files are dropped in host element after being validated.
* Emits a [FileList | File] object.
*/
this.onFileDrop = new EventEmitter();
}
/**
* multiple?: boolean
* Sets whether multiple files can be dropped at once in host element, or just a single file.
* Can also be 'multiple' native attribute.
* @param {?} multiple
* @return {?}
*/
set multiple(multiple) {
this._multiple = coerceBooleanProperty(multiple);
}
/**
* Binds native 'multiple' attribute if [multiple] property is 'true'.
* @return {?}
*/
get multipleBinding() {
return this._multiple ? '' : undefined;
}
/**
* Binds native 'disabled' attribute if [disabled] property is 'true'.
* @return {?}
*/
get disabledBinding() {
return this.disabled ? '' : undefined;
}
/**
* Listens to 'drop' host event to get validated transfer items.
* Emits the 'onFileDrop' event with a [FileList] or [File] depending if 'multiple' attr exists in host.
* Stops event propagation and default action from browser for 'drop' event.
* @param {?} event
* @return {?}
*/
onDrop(event) {
if (!this.disabled) {
/** @type {?} */
let transfer = ((/** @type {?} */ (event))).dataTransfer;
/** @type {?} */
let files = transfer.files;
if (files.length) {
/** @type {?} */
let value = this._multiple ? (files.length > 1 ? files : files[0]) : files[0];
this.onFileDrop.emit(value);
}
}
this._renderer.removeClass(this._element.nativeElement, 'drop-zone');
this._stopEvent(event);
}
/**
* Listens to 'dragover' host event to validate transfer items.
* Checks if 'multiple' attr exists in host to allow multiple file drops.
* Stops event propagation and default action from browser for 'dragover' event.
* @param {?} event
* @return {?}
*/
onDragOver(event) {
/** @type {?} */
let transfer = ((/** @type {?} */ (event))).dataTransfer;
transfer.dropEffect = this._typeCheck(transfer.types);
if (this.disabled || (!this._multiple &&
((transfer.items && transfer.items.length > 1) || ((/** @type {?} */ (transfer))).mozItemCount > 1))) {
transfer.dropEffect = 'none';
}
else {
transfer.dropEffect = 'copy';
}
this._stopEvent(event);
}
/**
* Listens to 'dragenter' host event to add animation class 'drop-zone' which can be overriden in host.
* Stops event propagation and default action from browser for 'dragenter' event.
* @param {?} event
* @return {?}
*/
onDragEnter(event) {
if (!this.disabled) {
this._renderer.addClass(this._element.nativeElement, 'drop-zone');
}
this._stopEvent(event);
}
/**
* Listens to 'dragleave' host event to remove animation class 'drop-zone'.
* Stops event propagation and default action from browser for 'dragleave' event.
* @param {?} event
* @return {?}
*/
onDragLeave(event) {
this._renderer.removeClass(this._element.nativeElement, 'drop-zone');
this._stopEvent(event);
}
/**
* Validates if the transfer item types are 'Files'.
* @param {?} types
* @return {?}
*/
_typeCheck(types) {
/** @type {?} */
let dropEffect = 'none';
if (types) {
if ((((/** @type {?} */ (types))).contains && ((/** @type {?} */ (types))).contains('Files'))
|| (((/** @type {?} */ (types))).indexOf && ((/** @type {?} */ (types))).indexOf('Files') !== -1)) {
dropEffect = 'copy';
}
}
return dropEffect;
}
/**
* @param {?} event
* @return {?}
*/
_stopEvent(event) {
event.preventDefault();
event.stopPropagation();
}
}
TdFileDropDirective.decorators = [
{ type: Directive, args: [{
selector: '[tdFileDrop]',
inputs: ['disabled'],
},] }
];
/** @nocollapse */
TdFileDropDirective.ctorParameters = () => [
{ type: Renderer2 },
{ type: ElementRef }
];
TdFileDropDirective.propDecorators = {
multiple: [{ type: Input, args: ['multiple',] }],
onFileDrop: [{ type: Output, args: ['fileDrop',] }],
multipleBinding: [{ type: HostBinding, args: ['attr.multiple',] }],
disabledBinding: [{ type: HostBinding, args: ['attr.disabled',] }],
onDrop: [{ type: HostListener, args: ['drop', ['$event'],] }],
onDragOver: [{ type: HostListener, args: ['dragover', ['$event'],] }],
onDragEnter: [{ type: HostListener, args: ['dragenter', ['$event'],] }],
onDragLeave: [{ type: HostListener, args: ['dragleave', ['$event'],] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class TdFileInputLabelDirective extends TemplatePortalDirective {
/**
* @param {?} templateRef
* @param {?} viewContainerRef
*/
constructor(templateRef, viewContainerRef) {
super(templateRef, viewContainerRef);
}
}
TdFileInputLabelDirective.decorators = [
{ type: Directive, args: [{
selector: '[td-file-input-label]ng-template',
},] }
];
/** @nocollapse */
TdFileInputLabelDirective.ctorParameters = () => [
{ type: TemplateRef },
{ type: ViewContainerRef }
];
class TdFileInputBase {
/**
* @param {?} _changeDetectorRef
*/
constructor(_changeDetectorRef) {
this._changeDetectorRef = _changeDetectorRef;
}
}
/* tslint:disable-next-line */
/** @type {?} */
const _TdFileInputMixinBase = mixinControlValueAccessor(mixinDisabled(TdFileInputBase));
class TdFileInputComponent extends _TdFileInputMixinBase {
/**
* @param {?} _renderer
* @param {?} _changeDetectorRef
*/
constructor(_renderer, _changeDetectorRef) {
super(_changeDetectorRef);
this._renderer = _renderer;
this._multiple = false;
/**
* select?: function
* Event emitted a file is selected
* Emits a [File | FileList] object.
*/
this.onSelect = new EventEmitter();
}
/**
* @return {?}
*/
get inputElement() {
return this._inputElement.nativeElement;
}
/**
* multiple?: boolean
* Sets if multiple files can be dropped/selected at once in [TdFileInputComponent].
* @param {?} multiple
* @return {?}
*/
set multiple(multiple) {
this._multiple = coerceBooleanProperty(multiple);
}
/**
* @return {?}
*/
get multiple() {
return this._multiple;
}
/**
* Method executed when a file is selected.
* @param {?} files
* @return {?}
*/
handleSelect(files) {
this.writeValue(files);
this.onSelect.emit(files);
}
/**
* Used to clear the selected files from the [TdFileInputComponent].
* @return {?}
*/
clear() {
this.writeValue(undefined);
this._renderer.setProperty(this.inputElement, 'value', '');
}
/**
* Method executed when the disabled value changes
* @param {?} v
* @return {?}
*/
onDisabledChange(v) {
if (v) {
this.clear();
}
}
/**
* Sets disable to the component. Implemented as part of ControlValueAccessor.
* @param {?} isDisabled
* @return {?}
*/
setDisabledState(isDisabled) {
this.disabled = isDisabled;
}
}
TdFileInputComponent.decorators = [
{ type: Component, args: [{
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => TdFileInputComponent),
multi: true,
}],
selector: 'td-file-input',
inputs: ['disabled', 'value'],
template: "<div>\n <button mat-raised-button\n class=\"td-file-input\"\n type=\"button\"\n [color]=\"color\" \n [multiple]=\"multiple\" \n [disabled]=\"disabled\"\n (keyup.enter)=\"fileInput.click()\"\n (click)=\"fileInput.click()\"\n (fileDrop)=\"handleSelect($event)\"\n tdFileDrop>\n <ng-content></ng-content>\n </button>\n <input #fileInput \n class=\"td-file-input-hidden\" \n type=\"file\"\n [attr.accept]=\"accept\" \n (fileSelect)=\"handleSelect($event)\"\n [multiple]=\"multiple\" \n [disabled]=\"disabled\"\n tdFileSelect>\n</div>",
styles: [":host .td-file-input{padding-left:8px;padding-right:8px}:host input.td-file-input-hidden{display:none}:host .drop-zone{border-radius:3px}:host .drop-zone *{pointer-events:none}"]
}] }
];
/** @nocollapse */
TdFileInputComponent.ctorParameters = () => [
{ type: Renderer2 },
{ type: ChangeDetectorRef }
];
TdFileInputComponent.propDecorators = {
_inputElement: [{ type: ViewChild, args: ['fileInput',] }],
color: [{ type: Input, args: ['color',] }],
multiple: [{ type: Input, args: ['multiple',] }],
accept: [{ type: Input, args: ['accept',] }],
onSelect: [{ type: Output, args: ['select',] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class TdFileUploadBase {
/**
* @param {?} _changeDetectorRef
*/
constructor(_changeDetectorRef) {
this._changeDetectorRef = _changeDetectorRef;
}
}
/* tslint:disable-next-line */
/** @type {?} */
const _TdFileUploadMixinBase = mixinControlValueAccessor(mixinDisabled(TdFileUploadBase));
class TdFileUploadComponent extends _TdFileUploadMixinBase {
/**
* @param {?} _changeDetectorRef
*/
constructor(_changeDetectorRef) {
super(_changeDetectorRef);
this._multiple = false;
this._required = false;
/**
* defaultColor?: string
* Sets browse button color. Uses same color palette accepted as [MatButton] and defaults to 'primary'.
*/
this.defaultColor = 'primary';
/**
* activeColor?: string
* Sets upload button color. Uses same color palette accepted as [MatButton] and defaults to 'accent'.
*/
this.activeColor = 'accent';
/**
* cancelColor?: string
* Sets cancel button color. Uses same color palette accepted as [MatButton] and defaults to 'warn'.
*/
this.cancelColor = 'warn';
/**
* select?: function
* Event emitted when a file is selected.
* Emits a [File | FileList] object.
*/
this.onSelect = new EventEmitter();
/**
* upload?: function
* Event emitted when upload button is clicked.
* Emits a [File | FileList] object.
*/
this.onUpload = new EventEmitter();
/**
* cancel?: function
* Event emitted when cancel button is clicked.
*/
this.onCancel = new EventEmitter();
}
/**
* multiple?: boolean
* Sets if multiple files can be dropped/selected at once in [TdFileUploadComponent].
* @param {?} multiple
* @return {?}
*/
set multiple(multiple) {
this._multiple = coerceBooleanProperty(multiple);
}
/**
* @return {?}
*/
get multiple() {
return this._multiple;
}
/**
* required?: boolean
* Forces at least one file upload.
* Defaults to 'false'
* @param {?} required
* @return {?}
*/
set required(required) {
this._required = coerceBooleanProperty(required);
}
/**
* @return {?}
*/
get required() {
return this._required;
}
/**
* Method executed when upload button is clicked.
* @return {?}
*/
uploadPressed() {
if (this.value) {
this.onUpload.emit(this.value);
}
}
/**
* Method executed when a file is selected.
* @param {?} value
* @return {?}
*/
handleSelect(value) {
this.value = value;
this.onSelect.emit(value);
}
/**
* Methods executed when cancel button is clicked.
* Clears files.
* @return {?}
*/
cancel() {
this.value = undefined;
this.onCancel.emit(undefined);
// check if the file input is rendered before clearing it
if (this.fileInput) {
this.fileInput.clear();
}
}
/**
* Method executed when the disabled value changes
* @param {?} v
* @return {?}
*/
onDisabledChange(v) {
if (v) {
this.cancel();
}
}
}
TdFileUploadComponent.decorators = [
{ type: Component, args: [{
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => TdFileUploadComponent),
multi: true,
}],
selector: 'td-file-upload',
inputs: ['disabled', 'value'],
template: "<td-file-input *ngIf=\"!value\"\n [(ngModel)]=\"value\"\n [multiple]=\"multiple\"\n [disabled]=\"disabled\"\n [accept]=\"accept\"\n [color]=\"defaultColor\"\n (select)=\"handleSelect($event)\">\n <ng-template [cdkPortalOutlet]=\"inputLabel\" [ngIf]=\"true\"></ng-template>\n</td-file-input>\n<div *ngIf=\"value\">\n <button #fileUpload\n class=\"td-file-upload\"\n mat-raised-button\n type=\"button\"\n [color]=\"activeColor\"\n (keyup.delete)=\"cancel()\"\n (keyup.backspace)=\"cancel()\"\n (keyup.escape)=\"cancel()\"\n (click)=\"uploadPressed()\"> \n <ng-content></ng-content>\n </button>\n <button mat-icon-button\n type=\"button\"\n class=\"td-file-upload-cancel\"\n [color]=\"cancelColor\" \n (click)=\"cancel()\">\n <mat-icon>cancel</mat-icon>\n </button>\n</div>",
styles: [".td-file-upload{padding-left:8px;padding-right:8px}.td-file-upload-cancel{height:24px;width:24px;position:relative;top:24px;left:-12px}::ng-deep [dir=rtl] .td-file-upload-cancel{right:-12px;left:0}.td-file-upload-cancel mat-icon{border-radius:12px;vertical-align:baseline}.drop-zone{border-radius:3px}.drop-zone *{pointer-events:none}"]
}] }
];
/** @nocollapse */
TdFileUploadComponent.ctorParameters = () => [
{ type: ChangeDetectorRef }
];
TdFileUploadComponent.propDecorators = {
fileInput: [{ type: ViewChild, args: [TdFileInputComponent,] }],
inputLabel: [{ type: ContentChild, args: [TdFileInputLabelDirective,] }],
defaultColor: [{ type: Input, args: ['defaultColor',] }],
activeColor: [{ type: Input, args: ['activeColor',] }],
cancelColor: [{ type: Input, args: ['cancelColor',] }],
multiple: [{ type: Input, args: ['multiple',] }],
required: [{ type: Input, args: ['required',] }],
accept: [{ type: Input, args: ['accept',] }],
onSelect: [{ type: Output, args: ['select',] }],
onUpload: [{ type: Output, args: ['upload',] }],
onCancel: [{ type: Output, args: ['cancel',] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class TdFileService {
constructor() {
this._progressSubject = new Subject();
this._progressObservable = this._progressSubject.asObservable();
}
/**
* Gets progress observable to keep track of the files being uploaded.
* Needs to be supported by backend.
* @return {?}
*/
get progress() {
return this._progressObservable;
}
/**
* params:
* - options: IUploadOptions {
* url: string,
* method: 'post' | 'put',
* file?: File,
* headers?: {[key: string]: string},
* formData?: FormData
* }
*
* Uses underlying [XMLHttpRequest] to upload a file to a url.
* Will be depricated when Angular fixes [Http] to allow [FormData] as body.
* @param {?} options
* @return {?}
*/
upload(options) {
return new Observable((subscriber) => {
/** @type {?} */
let xhr = new XMLHttpRequest();
/** @type {?} */
let formData = new FormData();
if (options.file !== undefined) {
formData.append('file', options.file);
}
else if (options.formData !== undefined) {
formData = options.formData;
}
else {
return subscriber.error('For [IUploadOptions] you have to set either the [file] or the [formData] property.');
}
xhr.upload.onprogress = (event) => {
/** @type {?} */
let progress = 0;
if (event.lengthComputable) {
progress = Math.round(event.loaded / event.total * 100);
}
this._progressSubject.next(progress);
};
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300) {
subscriber.next(xhr.response);
subscriber.complete();
}
else {
subscriber.error(xhr.response);
}
}
};
xhr.open(options.method, options.url, true);
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
if (options.headers) {
for (let key in options.headers) {
xhr.setRequestHeader(key, options.headers[key]);
}
}
xhr.send(formData);
});
}
}
TdFileService.decorators = [
{ type: Injectable }
];
/** @nocollapse */
TdFileService.ctorParameters = () => [];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/** @type {?} */
const TD_FILE = [
TdFileSelectDirective,
TdFileDropDirective,
TdFileUploadComponent,
TdFileInputComponent,
TdFileInputLabelDirective,
];
class CovalentFileModule {
}
CovalentFileModule.decorators = [
{ type: NgModule, args: [{
imports: [
FormsModule,
CommonModule,
MatIconModule,
MatButtonModule,
PortalModule,
],
declarations: [
TD_FILE,
],
exports: [
TD_FILE,
],
providers: [
TdFileService,
],
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class TdJsonFormatterComponent {
/**
* @param {?} _changeDetectorRef
* @param {?} _dir
*/
constructor(_changeDetectorRef, _dir) {
this._changeDetectorRef = _changeDetectorRef;
this._dir = _dir;
this._open = false;
this._levelsOpen = 0;
}
/**
* levelsOpen?: number
* Levels opened by default when JS object is formatted and rendered.
* @param {?} levelsOpen
* @return {?}
*/
set levelsOpen(levelsOpen) {
if (!Number.isInteger(levelsOpen)) {
throw new Error('[levelsOpen] needs to be an integer.');
}
this._levelsOpen = levelsOpen;
this._open = levelsOpen > 0;
}
/**
* @return {?}
*/
get levelsOpen() {
return this._levelsOpen;
}
/**
* @return {?}
*/
get open() {
return this._open;
}
/**
* key?: string
* Tag to be displayed next to formatted object.
* @param {?} key
* @return {?}
*/
set key(key) {
this._key = key;
}
/**
* @return {?}
*/
get key() {
/** @type {?} */
let elipsis = this._key && this._key.length > TdJsonFormatterComponent.KEY_MAX_LENGTH ? '…' : '';
return this._key ? this._key.substring(0, TdJsonFormatterComponent.KEY_MAX_LENGTH) + elipsis : this._key;
}
/**
* data: any
* JS object to be formatted.
* @param {?} data
* @return {?}
*/
set data(data) {
this._data = data;
this.parseChildren();
}
/**
* @return {?}
*/
get data() {
return this._data;
}
/**
* @return {?}
*/
get children() {
return this._children;
}
/**
* @return {?}
*/
get isRTL() {
if (this._dir) {
return this._dir.dir === 'rtl';
}
return false;
}
/**
* Refreshes json-formatter and rerenders [data]
* @return {?}
*/
refresh() {
this._changeDetectorRef.markForCheck();
}
/**
* Toggles collapse/expanded state of component.
* @return {?}
*/
toggle() {
this._open = !this._open;
}
/**
* @return {?}
*/
isObject() {
return this.getType(this._data) === 'object';
}
/**
* @return {?}
*/
isArray() {
return Array.isArray(this._data);
}
/**
* @return {?}
*/
hasChildren() {
return this._children && this._children.length > 0;
}
/**
* Gets parsed value depending on value type.
* @param {?} value
* @return {?}
*/
getValue(value) {
/** @type {?} */
let type = this.getType(value);
if (type === 'undefined' || (type === 'null')) {
return type;
}
else if (type === 'date') {
value = new Date(value).toString();
}
else if (type === 'string') {
value = '"' + value + '"';
}
else if (type === 'function') {
// Remove content of the function
return value.toString()
.replace(/[\r\n]/g, '')
.replace(/\{.*\}/, '') + '{…}';
}
else if (Array.isArray(value)) {
return this.getObjectName() + ' [' + value.length + ']';
}
return value;
}
/**
* Gets type of object.
* returns 'null' if object is null and 'date' if value is object and can be parsed to a date.
* @param {?} object
* @return {?}
*/
getType(object) {
if (typeof object === 'object') {
if (!object) {
return 'null';
}
if (Array.isArray(object)) {
return 'object';
}
/** @type {?} */
let date = new Date(object);
if (Object.prototype.toString.call(date) === '[object Date]') {
if (!Number.isNaN(date.getTime())) {
return 'date';
}
}
}
return typeof object;
}
/**
* Generates string representation depending if its an object or function.
* see: http://stackoverflow.com/a/332429
* @return {?}
*/
getObjectName() {
/** @type {?} */
let object = this._data;
if (this.isObject() && !object.constructor) {
return 'Object';
}
/** @type {?} */
let funcNameRegex = /function (.{1,})\(/;
/** @type {?} */
let results = (funcNameRegex).exec((object).constructor.toString());
if (results && results.length > 1) {
return results[1];
}
else {
return '';
}
}
/**
* Creates preview of nodes children to render in tooltip depending if its an array or an object.
* @return {?}
*/
getPreview() {
/** @type {?} */
let previewData;
/** @type {?} */
let startChar = '{ ';
/** @type {?} */
let endChar = ' }';
if (this.isArray()) {
/** @type {?} */
let previewArray = this._data.slice(0, TdJsonFormatterComponent.PREVIEW_LIMIT);
previewData = previewArray.map((obj) => {
return this.getValue(obj);
});
startChar = '[';
endChar = ']';
}
else {
/** @type {?} */
let previewKeys = this._children.slice(0, TdJsonFormatterComponent.PREVIEW_LIMIT);
previewData = previewKeys.map((key) => {
return key + ': ' + this.getValue(this._data[key]);
});
}
/** @type {?} */
let previewString = previewData.join(', ');
/** @type {?} */
let ellipsis = previewData.length >= TdJsonFormatterComponent.PREVIEW_LIMIT ||
previewString.length > TdJsonFormatterComponent.PREVIEW_STRING_MAX_LENGTH ? '…' : '';
return startChar + previewString.substring(0, TdJsonFormatterComponent.PREVIEW_STRING_MAX_LENGTH) +
ellipsis + endChar;
}
/**
* @return {?}
*/
parseChildren() {
if (this.isObject()) {
this._children = [];
for (let key in this._data) {
this._children.push(key);
}
}
}
}
/**
* Max length for property names. Any names bigger than this get trunctated.
*/
TdJsonFormatterComponent.KEY_MAX_LENGTH = 30;
/**
* Max length for preview string. Any names bigger than this get trunctated.
*/
TdJsonFormatterComponent.PREVIEW_STRING_MAX_LENGTH = 80;
/**
* Max tooltip preview elements.
*/
TdJsonFormatterComponent.PREVIEW_LIMIT = 5;
TdJsonFormatterComponent.decorators = [
{ type: Component, args: [{
changeDetection: ChangeDetectionStrategy.OnPush,
selector: 'td-json-formatter',
template: "<div class=\"td-json-formatter-wrapper\">\n <a class=\"td-key\"\n [class.td-key-node]=\"hasChildren()\"\n [class.td-key-leaf]=\"!hasChildren()\"\n [tabIndex]=\"isObject()? 0 : -1\"\n (keydown.enter)=\"toggle()\"\n (click)=\"toggle()\">\n <mat-icon class=\"td-node-icon\" *ngIf=\"hasChildren()\">{{open? 'keyboard_arrow_down' : (isRTL ? 'keyboard_arrow_left' : 'keyboard_arrow_right')}}</mat-icon>\n <span *ngIf=\"key\" class=\"key\">{{key}}:</span>\n <span class=\"value\">\n <span [class.td-empty]=\"!hasChildren()\" *ngIf=\"isObject()\" [matTooltip]=\"getPreview()\" matTooltipPosition=\"after\">\n <span class=\"td-object-name\">{{getObjectName()}}</span>\n <span class=\"td-array-length\" *ngIf=\"isArray()\">[{{data.length}}]</span>\n </span>\n <span *ngIf=\"!isObject()\" [class]=\"getType(data)\">{{getValue(data)}}</span>\n </span>\n </a>\n <div class=\"td-object-children\" [@tdCollapse]=\"!(hasChildren() && open)\">\n <ng-template let-key ngFor [ngForOf]=\"children\">\n <td-json-formatter [key]=\"key\" [data]=\"data[key]\" [levelsOpen]=\"levelsOpen - 1\"></td-json-formatter>\n </ng-template>\n </div>\n</div>",
animations: [
tdCollapseAnimation,
],
styles: [":host{display:block}.td-json-formatter-wrapper{padding-top:2px;padding-bottom:2px}.td-json-formatter-wrapper .td-key{-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-ms-flex-line-pack:center;align-content:center;max-width:100%;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.td-json-formatter-wrapper .td-key.td-key-node:hover{cursor:pointer}.td-json-formatter-wrapper .td-object-children.ng-animating{overflow:hidden}.td-json-formatter-wrapper .td-object-children .td-key,.td-json-formatter-wrapper .td-object-children .td-object-children{padding-left:24px}::ng-deep [dir=rtl] .td-json-formatter-wrapper .td-object-children .td-key,::ng-deep [dir=rtl] .td-json-formatter-wrapper .td-object-children .td-object-children{padding-right:24px;padding-left:0}.td-json-formatter-wrapper .td-object-children .td-key.td-key-leaf,.td-json-formatter-wrapper .td-object-children .td-object-children.td-key-leaf{padding-left:48px}::ng-deep [dir=rtl] .td-json-formatter-wrapper .td-object-children .td-key.td-key-leaf,::ng-deep [dir=rtl] .td-json-formatter-wrapper .td-object-children .td-object-children.td-key-leaf{padding-right:48px;padding-left:0}.td-json-formatter-wrapper .value{margin-left:5px}::ng-deep [dir=rtl] .td-json-formatter-wrapper .value{padding-right:5px;padding-left:0}.td-json-formatter-wrapper .value .td-empty{opacity:.5;text-decoration:line-through}.td-json-formatter-wrapper .value .date,.td-json-formatter-wrapper .value .string{word-break:break-word}"]
}] }
];
/** @nocollapse */
TdJsonFormatterComponent.ctorParameters = () => [
{ type: ChangeDetectorRef },
{ type: Dir, decorators: [{ type: Optional }] }
];
TdJsonFormatterComponent.propDecorators = {
levelsOpen: [{ type: Input, args: ['levelsOpen',] }],
key: [{ type: Input, args: ['key',] }],
data: [{ type: Input, args: ['data',] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class CovalentJsonFormatterModule {
}
CovalentJsonFormatterModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule,
MatTooltipModule,
MatIconModule,
],
declarations: [
TdJsonFormatterComponent,
],
exports: [
TdJsonFormatterComponent,
],
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class TdLayoutComponent {
constructor() {
/**
* mode?: 'side', 'push' or 'over'
*
* The mode or styling of the sidenav.
* Defaults to "over".
* See "MatSidenav" documentation for more info.
*
* https://github.com/angular/material2/tree/master/src/lib/sidenav
*/
this.mode = 'over';
/**
* opened?: boolean
*
* Whether or not the sidenav is opened. Use this binding to open/close the sidenav.
* Defaults to "false".
*
* See "MatSidenav" documentation for more info.
*
* https://github.com/angular/material2/tree/master/src/lib/sidenav
*/
this.opened = false;
/**
* sidenavWidth?: string
*
* Sets the "width" of the sidenav in either "px" or "%"
* Defaults to "320px".
*
* https://github.com/angular/material2/tree/master/src/lib/sidenav
*/
this.sidenavWidth = '320px';
/**
* containerAutosize?: boolean
*
* Sets "autosize" of the sidenav-container.
* Defaults to "false".
*
* See documentation for more info and potential performance risks.
*
* https://github.com/angular/material2/blob/master/src/lib/sidenav/sidenav.md#resizing-an-open-sidenav
*/
this.containerAutosize = false;
}
/**
* Checks if `ESC` should close the sidenav
* Should only close it for `push` and `over` modes
* @return {?}
*/
get disableClose() {
return this.mode === 'side';
}
/**
* Proxy toggle method to access sidenav from outside (from td-layout template).
* @return {?}
*/
toggle() {
return this.sidenav.toggle(!this.sidenav.opened);
}
/**
* Proxy open method to access sidenav from outside (from td-layout template).
* @return {?}
*/
open() {
return this.sidenav.open();
}
/**
* Proxy close method to access sidenav from outside (from td-layout template).
* @return {?}
*/
close() {
return this.sidenav.close();
}
}
TdLayoutComponent.decorators = [
{ type: Component, args: [{
selector: 'td-layout',
template: "<mat-sidenav-container fullscreen [autosize]=\"containerAutosize\">\n <mat-sidenav #sidenav\n class=\"td-layout-sidenav\"\n [mode]=\"mode\"\n [opened]=\"opened\"\n [style.max-width]=\"sidenavWidth\"\n [style.min-width]=\"sidenavWidth\"\n [disableClose]=\"disableClose\">\n <ng-content select=\"td-navigation-drawer\"></ng-content>\n <ng-content select=\"[td-sidenav-content]\"></ng-content>\n </mat-sidenav>\n <ng-content></ng-content>\n</mat-sidenav-container>\n",
styles: [":host{display:-webkit-box;display:-ms-flexbox;display:flex;margin:0;width:100%;min-height:100%;height:100%;overflow:hidden}:host ::ng-deep>mat-sidenav-container .mat-drawer>.mat-drawer-inner-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}"]
}] }
];
TdLayoutComponent.propDecorators = {
sidenav: [{ type: ViewChild, args: [MatSidenav,] }],
mode: [{ type: Input, args: ['mode',] }],
opened: [{ type: Input, args: ['opened',] }],
sidenavWidth: [{ type: Input, args: ['sidenavWidth',] }],
containerAutosize: [{ type: Input, args: ['containerAutosize',] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class LayoutToggleBase {
}
/* tslint:disable-next-line */
/** @type {?} */
const _TdLayoutToggleMixinBase = mixinDisabled(LayoutToggleBase);
/**
* @abstract
*/
class LayoutToggle extends _TdLayoutToggleMixinBase {
/**
* @param {?} _layout
* @param {?} _renderer
* @param {?} _elementRef
*/
constructor(_layout, _renderer, _elementRef) {
super();
this._layout = _layout;
this._renderer = _renderer;
this._elementRef = _elementRef;
this._initialized = false;
this._hideWhenOpened = false;
// if layout has not been provided
// show warn message
if (!this._layout) {
this._noLayoutMessage();
}
this._renderer.addClass(this._elementRef.nativeElement, 'td-layout-menu-button');
}
/**
* hideWhenOpened?: boolean
* When this is set to true, the host will be hidden when
* the sidenav is opened.
* @param {?} hideWhenOpened
* @return {?}
*/
set hideWhenOpened(hideWhenOpened) {
this._hideWhenOpened = hideWhenOpened;
if (this._initialized) {
this._toggleVisibility();
}
}
/**
* @return {?}
*/
ngAfterViewInit() {
this._initialized = true;
if (this._layout && this._layout.sidenav) {
this._toggleSubs = this._layout.sidenav._animationStarted.subscribe(() => {
this._toggleVisibility();
});
}
// execute toggleVisibility since the onOpenStart and onCloseStart
// methods might not be executed always when the element is rendered
this._toggleVisibility();
}
/**
* @return {?}
*/
ngOnDestroy() {
if (this._toggleSubs) {
this._toggleSubs.unsubscribe();
this._toggleSubs = undefined;
}
}
/**
* Listens to host click event to trigger the layout toggle
* @param {?} event
* @return {?}
*/
clickListener(event) {
event.preventDefault();
if (!this.disabled) {
// if layout has been provided, try triggering the click on it
// else show warn message
if (this._layout && this._layout.open) {
this.onClick();
}
else {
this._noLayoutMessage();
}
}
}
/**
* @return {?}
*/
_toggleVisibility() {
if (this._layout) {
if (this._layout.sidenav.opened && this._hideWhenOpened) {
this._renderer.setStyle(this._elementRef.nativeElement, 'display', 'none');
}
else {
this._renderer.setStyle(this._elementRef.nativeElement, 'display', '');
}
}
}
/**
* @return {?}
*/
_noLayoutMessage() {
/* tslint:disable-next-line */
console.warn('Covalent: Parent layout not found for layout toggle directive');
}
}
LayoutToggle.propDecorators = {
hideWhenOpened: [{ type: Input, args: ['hideWhenOpened',] }],
clickListener: [{ type: HostListener, args: ['click', ['$event'],] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class TdLayoutToggleDirective extends LayoutToggle {
/**
* @param {?} layout
* @param {?} renderer
* @param {?} elementRef
*/
constructor(layout, renderer, elementRef) {
super(layout, renderer, elementRef);
}
/**
* @param {?} tdLayoutToggle
* @return {?}
*/
set tdLayoutToggle(tdLayoutToggle) {
this.disabled = !((/** @type {?} */ (tdLayoutToggle)) === '' || tdLayoutToggle);
}
/**
* @return {?}
*/
onClick() {
this._layout.toggle();
}
}
TdLayoutToggleDirective.decorators = [
{ type: Directive, args: [{
selector: '[tdLayoutToggle]',
},] }
];
/** @nocollapse */
TdLayoutToggleDirective.ctorParameters = () => [
{ type: TdLayoutComponent, decorators: [{ type: Optional }, { type: Inject, args: [forwardRef(() => TdLayoutComponent),] }] },
{ type: Renderer2 },
{ type: ElementRef }
];
TdLayoutToggleDirective.propDecorators = {
tdLayoutToggle: [{ type: Input, args: ['tdLayoutToggle',] }]
};
class TdLayoutCloseDirective extends LayoutToggle {
/**
* @param {?} layout
* @param {?} renderer
* @param {?} elementRef
*/
constructor(layout, renderer, elementRef) {
super(layout, renderer, elementRef);
}
/**
* @param {?} tdLayoutClose
* @return {?}
*/
set tdLayoutClose(tdLayoutClose) {
this.disabled = !((/** @type {?} */ (tdLayoutClose)) === '' || tdLayoutClose);
}
/**
* @return {?}
*/
onClick() {
this._layout.close();
}
}
TdLayoutCloseDirective.decorators = [
{ type: Directive, args: [{
selector: '[tdLayoutClose]',
},] }
];
/** @nocollapse */
TdLayoutCloseDirective.ctorParameters = () => [
{ type: TdLayoutComponent, decorators: [{ type: Optional }, { type: Inject, args: [forwardRef(() => TdLayoutComponent),] }] },
{ type: Renderer2 },
{ type: ElementRef }
];
TdLayoutCloseDirective.propDecorators = {
tdLayoutClose: [{ type: Input, args: ['tdLayoutClose',] }]
};
class TdLayoutOpenDirective extends LayoutToggle {
/**
* @param {?} layout
* @param {?} renderer
* @param {?} elementRef
*/
constructor(layout, renderer, elementRef) {
super(layout, renderer, elementRef);
}
/**
* @param {?} tdLayoutOpen
* @return {?}
*/
set tdLayoutClose(tdLayoutOpen) {
this.disabled = !((/** @type {?} */ (tdLayoutOpen)) === '' || tdLayoutOpen);
}
/**
* @return {?}
*/
onClick() {
this._layout.open();
}
}
TdLayoutOpenDirective.decorators = [
{ type: Directive, args: [{
selector: '[tdLayoutOpen]',
},] }
];
/** @nocollapse */
TdLayoutOpenDirective.ctorParameters = () => [
{ type: TdLayoutComponent, decorators: [{ type: Optional }, { type: Inject, args: [forwardRef(() => TdLayoutComponent),] }] },
{ type: Renderer2 },
{ type: ElementRef }
];
TdLayoutOpenDirective.propDecorators = {
tdLayoutClose: [{ type: Input, args: ['tdLayoutOpen',] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class TdLayoutNavComponent {
/**
* @param {?} _router
*/
constructor(_router) {
this._router = _router;
/**
* color?: string
*
* toolbar color option: primary | accent | warn.
* If [color] is not set, primary is used.
*/
this.color = 'primary';
}
/**
* Checks if router was injected.
* @return {?}
*/
get routerEnabled() {
return !!this._router && !!this.navigationRoute;
}
/**
* @return {?}
*/
handleNavigationClick() {
if (this.routerEnabled) {
this._router.navigateByUrl(this.navigationRoute);
}
}
}
TdLayoutNavComponent.decorators = [
{ type: Component, args: [{
selector: 'td-layout-nav',
template: "<div class=\"td-layout-nav-wrapper\">\n <mat-toolbar [color]=\"color\">\n <ng-content select=\"[td-menu-button]\"></ng-content>\n <span *ngIf=\"icon || logo || toolbarTitle\"\n [class.cursor-pointer]=\"routerEnabled\"\n (click)=\"handleNavigationClick()\"\n class=\"td-layout-nav-toolbar-content\">\n <mat-icon *ngIf=\"icon\">{{icon}}</mat-icon>\n <mat-icon *ngIf=\"logo && !icon\" class=\"mat-icon-logo\" [svgIcon]=\"logo\"></mat-icon>\n <span *ngIf=\"toolbarTitle\">{{toolbarTitle}}</span>\n </span>\n <ng-content select=\"[td-toolbar-content]\"></ng-content>\n </mat-toolbar>\n <div class=\"td-layout-nav-content\" cdkScrollable>\n <ng-content></ng-content>\n </div>\n <ng-content select=\"td-layout-footer\"></ng-content>\n</div>\n",
styles: [".td-menu-button{margin-left:0}::ng-deep [dir=rtl] .td-menu-button{margin-right:0;margin-left:6px}:host{display:-webkit-box;display:-ms-flexbox;display:flex;margin:0;width:100%;min-height:100%;height:100%;overflow:hidden}:host .td-layout-nav-wrapper{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;margin:0;width:100%;min-height:100%;height:100%}:host .td-layout-nav-wrapper .td-layout-nav-toolbar-content{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:center;align-content:center;max-width:100%;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}:host .td-layout-nav-wrapper .td-layout-nav-content{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}"]
}] }
];
/** @nocollapse */
TdLayoutNavComponent.ctorParameters = () => [
{ type: Router, decorators: [{ type: Optional }] }
];
TdLayoutNavComponent.propDecorators = {
toolbarTitle: [{ type: Input, args: ['toolbarTitle',] }],
icon: [{ type: Input, args: ['icon',] }],
logo: [{ type: Input, args: ['logo',] }],
color: [{ type: Input, args: ['color',] }],
navigationRoute: [{ type: Input, args: ['navigationRoute',] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class TdLayoutNavListComponent {
/**
* @param {?} _router
*/
constructor(_router) {
this._router = _router;
/**
* color?: string
*
* toolbar color option: primary | accent | warn.
* If [color] is not set, primary is used.
*/
this.color = 'primary';
/**
* mode?: 'side', 'push' or 'over'
*
* The mode or styling of the sidenav.
* Defaults to "side".
* See "MatSidenav" documentation for more info.
*
* https://github.com/angular/material2/tree/master/src/lib/sidenav
*/
this.mode = 'side';
/**
* opened?: boolean
* Whether or not the sidenav is opened. Use this binding to open/close the sidenav.
* Defaults to "true".
*
* See "MatSidenav" documentation for more info.
*
* https://github.com/angular/material2/tree/master/src/lib/sidenav
*/
this.opened = true;
/**
* sidenavWidth?: string
*
* Sets the "width" of the sidenav in either "px" or "%"
* Defaults to "350px".
*
* https://github.com/angular/material2/tree/master/src/lib/sidenav
*/
this.sidenavWidth = '350px';
/**
* containerAutosize?: boolean
*
* Sets "autosize" of the sidenav-container.
* Defaults to "false".
*
* See documentation for more info and potential performance risks.
*
* https://github.com/angular/material2/blob/master/src/lib/sidenav/sidenav.md#resizing-an-open-sidenav
*/
this.containerAutosize = false;
}
/**
* Checks if `ESC` should close the sidenav
* Should only close it for `push` and `over` modes
* @return {?}
*/
get disableClose() {
return this.mode === 'side';
}
/**
* Checks if router was injected.
* @return {?}
*/
get routerEnabled() {
return !!this._router && !!this.navigationRoute;
}
/**
* @return {?}
*/
handleNavigationClick() {
if (this.routerEnabled) {
this._router.navigateByUrl(this.navigationRoute);
}
}
/**
* Proxy toggle method to access sidenav from outside (from td-layout template).
* @return {?}
*/
toggle() {
return this.sidenav.toggle(!this.sidenav.opened);
}
/**
* Proxy open method to access sidenav from outside (from td-layout template).
* @return {?}
*/
open() {
return this.sidenav.open();
}
/**
* Proxy close method to access sidenav from outside (from td-layout template).
* @return {?}
*/
close() {
return this.sidenav.close();
}
}
TdLayoutNavListComponent.decorators = [
{ type: Component, args: [{
selector: 'td-layout-nav-list',
template: "<div class=\"td-layout-nav-list-wrapper\">\n <mat-sidenav-container fullscreen [autosize]=\"containerAutosize\" class=\"td-layout-nav-list\">\n <mat-sidenav #sidenav\n position=\"start\"\n [mode]=\"mode\"\n [opened]=\"opened\"\n [disableClose]=\"disableClose\"\n [style.max-width]=\"sidenavWidth\"\n [style.min-width]=\"sidenavWidth\">\n <mat-toolbar [color]=\"color\">\n <ng-content select=\"[td-menu-button]\"></ng-content>\n <span *ngIf=\"icon || logo || toolbarTitle\"\n class=\"td-layout-nav-list-toolbar-content\"\n [class.cursor-pointer]=\"routerEnabled\"\n (click)=\"handleNavigationClick()\">\n <mat-icon *ngIf=\"icon\">{{icon}}</mat-icon>\n <mat-icon *ngIf=\"logo && !icon\" class=\"mat-icon-logo\" [svgIcon]=\"logo\"></mat-icon>\n <span *ngIf=\"toolbarTitle\">{{toolbarTitle}}</span>\n </span>\n <ng-content select=\"[td-sidenav-toolbar-content]\"></ng-content>\n </mat-toolbar>\n <div class=\"td-layout-nav-list-content\" cdkScrollable>\n <ng-content select=\"[td-sidenav-content]\"></ng-content>\n </div>\n </mat-sidenav>\n <div class=\"td-layout-nav-list-main\">\n <mat-toolbar [color]=\"color\">\n <ng-content select=\"[td-toolbar-content]\"></ng-content>\n </mat-toolbar>\n <div class=\"td-layout-nav-list-content\" cdkScrollable>\n <ng-content></ng-content>\n </div>\n <ng-content select=\"td-layout-footer-inner\"></ng-content>\n </div>\n </mat-sidenav-container>\n</div>\n<ng-content select=\"td-layout-footer\"></ng-content>",
styles: [":host{margin:0;width:100%;min-height:100%;height:100%;overflow:hidden;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1}:host .td-layout-nav-list-wrapper>.mat-sidenav-container>mat-sidenav.mat-drawer-side{border-right:0}[dir=rtl] :host .td-layout-nav-list-wrapper>.mat-sidenav-container>mat-sidenav.mat-drawer-side{border-left:0}:host .td-layout-nav-list-wrapper{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}:host .td-layout-nav-list-wrapper .td-layout-nav-list-toolbar-content{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:center;align-content:center;max-width:100%;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}:host .td-layout-nav-list-wrapper .td-layout-nav-list-content{text-align:start;-webkit-box-flex:1;-ms-flex:1;flex:1;display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}:host .td-layout-nav-list-wrapper .td-layout-nav-list-main{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;margin:0;width:100%;min-height:100%;height:100%;position:relative;overflow:auto}:host .td-layout-nav-list-wrapper .td-layout-nav-list-main .td-layout-nav-list-content{display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch;-webkit-box-flex:1;-ms-flex:1;flex:1}:host .td-layout-nav-list-wrapper mat-sidenav-container.td-layout-nav-list{-webkit-box-flex:1;-ms-flex:1;flex:1}:host .td-layout-nav-list-wrapper mat-sidenav-container.td-layout-nav-list>mat-sidenav.mat-drawer-closed,:host .td-layout-nav-list-wrapper mat-sidenav-container.td-layout-nav-list>mat-sidenav.mat-drawer-closing,:host .td-layout-nav-list-wrapper mat-sidenav-container.td-layout-nav-list>mat-sidenav.mat-drawer-opened,:host .td-layout-nav-list-wrapper mat-sidenav-container.td-layout-nav-list>mat-sidenav.mat-drawer-opening{-webkit-box-shadow:none;box-shadow:none}:host ::ng-deep mat-sidenav-container.td-layout-nav-list>.mat-drawer-content{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}:host ::ng-deep mat-sidenav-container.td-layout-nav-list>.mat-drawer>.mat-drawer-inner-container{-webkit-box-shadow:0 1px 3px 0 rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 2px 1px -1px rgba(0,0,0,.12);box-shadow:0 1px 3px 0 rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 2px 1px -1px rgba(0,0,0,.12);-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}"]
}] }
];
/** @nocollapse */
TdLayoutNavListComponent.ctorParameters = () => [
{ type: Router, decorators: [{ type: Optional }] }
];
TdLayoutNavListComponent.propDecorators = {
sidenav: [{ type: ViewChild, args: [MatSidenav,] }],
toolbarTitle: [{ type: Input, args: ['toolbarTitle',] }],
icon: [{ type: Input, args: ['icon',] }],
logo: [{ type: Input, args: ['logo',] }],
color: [{ type: Input, args: ['color',] }],
mode: [{ type: Input, args: ['mode',] }],
opened: [{ type: Input, args: ['opened',] }],
sidenavWidth: [{ type: Input, args: ['sidenavWidth',] }],
containerAutosize: [{ type: Input, args: ['containerAutosize',] }],
navigationRoute: [{ type: Input, args: ['navigationRoute',] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class TdLayoutNavListToggleDirective extends LayoutToggle {
/**
* @param {?} layout
* @param {?} renderer
* @param {?} elementRef
*/
constructor(layout, renderer, elementRef) {
super(layout, renderer, elementRef);
}
/**
* @param {?} tdLayoutNavListToggle
* @return {?}
*/
set tdLayoutNavListToggle(tdLayoutNavListToggle) {
this.disabled = !((/** @type {?} */ (tdLayoutNavListToggle)) === '' || tdLayoutNavListToggle);
}
/**
* @return {?}
*/
onClick() {
this._layout.toggle();
}
}
TdLayoutNavListToggleDirective.decorators = [
{ type: Directive, args: [{
selector: '[tdLayoutNavListToggle]',
},] }
];
/** @nocollapse */
TdLayoutNavListToggleDirective.ctorParameters = () => [
{ type: TdLayoutNavListComponent, decorators: [{ type: Optional }, { type: Inject, args: [forwardRef(() => TdLayoutNavListComponent),] }] },
{ type: Renderer2 },
{ type: ElementRef }
];
TdLayoutNavListToggleDirective.propDecorators = {
tdLayoutNavListToggle: [{ type: Input, args: ['tdLayoutNavListToggle',] }]
};
class TdLayoutNavListCloseDirective extends LayoutToggle {
/**
* @param {?} layout
* @param {?} renderer
* @param {?} elementRef
*/
constructor(layout, renderer, elementRef) {
super(layout, renderer, elementRef);
}
/**
* @param {?} tdLayoutNavListClose
* @return {?}
*/
set tdLayoutNavListClose(tdLayoutNavListClose) {
this.disabled = !((/** @type {?} */ (tdLayoutNavListClose)) === '' || tdLayoutNavListClose);
}
/**
* @return {?}
*/
onClick() {
this._layout.close();
}
}
TdLayoutNavListCloseDirective.decorators = [
{ type: Directive, args: [{
selector: '[tdLayoutNavListClose]',
},] }
];
/** @nocollapse */
TdLayoutNavListCloseDirective.ctorParameters = () => [
{ type: TdLayoutNavListComponent, decorators: [{ type: Optional }, { type: Inject, args: [forwardRef(() => TdLayoutNavListComponent),] }] },
{ type: Renderer2 },
{ type: ElementRef }
];
TdLayoutNavListCloseDirective.propDecorators = {
tdLayoutNavListClose: [{ type: Input, args: ['tdLayoutNavListClose',] }]
};
class TdLayoutNavListOpenDirective extends LayoutToggle {
/**
* @param {?} layout
* @param {?} renderer
* @param {?} elementRef
*/
constructor(layout, renderer, elementRef) {
super(layout, renderer, elementRef);
}
/**
* @param {?} tdLayoutNavListOpen
* @return {?}
*/
set tdLayoutNavListOpen(tdLayoutNavListOpen) {
this.disabled = !((/** @type {?} */ (tdLayoutNavListOpen)) === '' || tdLayoutNavListOpen);
}
/**
* @return {?}
*/
onClick() {
this._layout.open();
}
}
TdLayoutNavListOpenDirective.decorators = [
{ type: Directive, args: [{
selector: '[tdLayoutNavListOpen]',
},] }
];
/** @nocollapse */
TdLayoutNavListOpenDirective.ctorParameters = () => [
{ type: TdLayoutNavListComponent, decorators: [{ type: Optional }, { type: Inject, args: [forwardRef(() => TdLayoutNavListComponent),] }] },
{ type: Renderer2 },
{ type: ElementRef }
];
TdLayoutNavListOpenDirective.propDecorators = {
tdLayoutNavListOpen: [{ type: Input, args: ['tdLayoutNavListOpen',] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class TdLayoutCardOverComponent {
constructor() {
/**
* cardWidth?: string
*
* Card flex width in %.
* Defaults to 70%.
*/
this.cardWidth = 70;
/**
* color?: string
*
* toolbar color option: primary | accent | warn.
* If [color] is not set, primary is used.
*/
this.color = 'primary';
}
}
TdLayoutCardOverComponent.decorators = [
{ type: Component, args: [{
selector: 'td-layout-card-over',
template: "<mat-toolbar [color]=\"color\">\n</mat-toolbar>\n<div class=\"td-layout-card-over-wrapper\">\n <div class=\"td-layout-card-over\"\n [style.max-width.%]=\"cardWidth\"\n [style.flex]=\"'1 1 ' + cardWidth + '%'\"\n [style.-ms-flex]=\"'1 1 ' + cardWidth + '%'\"\n [style.-webkit-box-flex]=\"1\">\n <mat-card>\n <mat-card-title *ngIf=\"cardTitle\">{{cardTitle}}</mat-card-title>\n <mat-card-subtitle *ngIf=\"cardSubtitle\">{{cardSubtitle}}</mat-card-subtitle>\n <mat-divider *ngIf=\"cardTitle || cardSubtitle\"></mat-divider>\n <ng-content></ng-content>\n </mat-card>\n <ng-content select=\"[td-after-card]\"></ng-content>\n </div>\n</div>\n",
styles: [":host{position:relative;display:block;z-index:2;width:100%;min-height:100%;height:100%}:host [td-after-card]{display:block}.td-layout-card-over-wrapper{margin:-64px 0;width:100%;min-height:100%;height:100%}@media (min-width:600px){.td-layout-card-over-wrapper{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-ms-flex-line-pack:start;align-content:flex-start;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.td-layout-card-over-wrapper .td-layout-card-over{max-height:100%;-webkit-box-sizing:border-box;box-sizing:border-box}}@media (max-width:599px){.td-layout-card-over-wrapper .td-layout-card-over{max-width:100%!important}}"]
}] }
];
TdLayoutCardOverComponent.propDecorators = {
cardTitle: [{ type: Input, args: ['cardTitle',] }],
cardSubtitle: [{ type: Input, args: ['cardSubtitle',] }],
cardWidth: [{ type: Input, args: ['cardWidth',] }],
color: [{ type: Input, args: ['color',] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class TdLayoutManageListComponent {
constructor() {
/**
* mode?: 'side', 'push' or 'over'
*
* The mode or styling of the sidenav.
* Defaults to "side".
* See "MatSidenav" documentation for more info.
*
* https://github.com/angular/material2/tree/master/src/lib/sidenav
*/
this.mode = 'side';
/**
* opened?: boolean
*
* Whether or not the sidenav is opened. Use this binding to open/close the sidenav.
* Defaults to "true".
*
* See "MatSidenav" documentation for more info.
*
* https://github.com/angular/material2/tree/master/src/lib/sidenav
*/
this.opened = true;
/**
* sidenavWidth?: string
*
* Sets the "width" of the sidenav in either "px" or "%"
* Defaults to "257px".
*
* https://github.com/angular/material2/tree/master/src/lib/sidenav
*/
this.sidenavWidth = '257px';
/**
* containerAutosize?: boolean
*
* Sets "autosize" of the sidenav-container.
* Defaults to "false".
*
* See documentation for more info and potential performance risks.
*
* https://github.com/angular/material2/blob/master/src/lib/sidenav/sidenav.md#resizing-an-open-sidenav
*/
this.containerAutosize = false;
}
/**
* Checks if `ESC` should close the sidenav
* Should only close it for `push` and `over` modes
* @return {?}
*/
get disableClose() {
return this.mode === 'side';
}
/**
* Proxy toggle method to access sidenav from outside (from td-layout template).
* @return {?}
*/
toggle() {
return this.sidenav.toggle(!this.sidenav.opened);
}
/**
* Proxy open method to access sidenav from outside (from td-layout template).
* @return {?}
*/
open() {
return this.sidenav.open();
}
/**
* Proxy close method to access sidenav from outside (from td-layout template).
* @return {?}
*/
close() {
return this.sidenav.close();
}
}
TdLayoutManageListComponent.decorators = [
{ type: Component, args: [{
selector: 'td-layout-manage-list',
template: "<mat-sidenav-container fullscreen [autosize]=\"containerAutosize\" class=\"td-layout-manage-list\">\n <mat-sidenav #sidenav\n position=\"start\"\n [mode]=\"mode\"\n [opened]=\"opened\"\n [disableClose]=\"disableClose\"\n [style.max-width]=\"sidenavWidth\"\n [style.min-width]=\"sidenavWidth\">\n <ng-content select=\"mat-toolbar[td-sidenav-content]\"></ng-content>\n <div class=\"td-layout-manage-list-sidenav\" cdkScrollable>\n <ng-content select=\"[td-sidenav-content]\"></ng-content>\n </div>\n </mat-sidenav>\n <div class=\"td-layout-manage-list-main\">\n <ng-content select=\"mat-toolbar\"></ng-content>\n <div class=\"td-layout-manage-list-content\" cdkScrollable>\n <ng-content></ng-content>\n </div>\n <ng-content select=\"td-layout-footer-inner\"></ng-content>\n </div>\n</mat-sidenav-container>\n",
styles: [":host{display:-webkit-box;display:-ms-flexbox;display:flex;margin:0;width:100%;min-height:100%;height:100%;overflow:hidden}:host mat-sidenav-container.td-layout-manage-list{-webkit-box-flex:1;-ms-flex:1;flex:1}:host mat-sidenav-container.td-layout-manage-list>.mat-drawer>.mat-drawer-inner-container.mat-drawer-closed,:host mat-sidenav-container.td-layout-manage-list>.mat-drawer>.mat-drawer-inner-container.mat-drawer-closing,:host mat-sidenav-container.td-layout-manage-list>.mat-drawer>.mat-drawer-inner-container.mat-drawer-opened,:host mat-sidenav-container.td-layout-manage-list>.mat-drawer>.mat-drawer-inner-container.mat-drawer-opening{-webkit-box-shadow:0 1px 3px 0 rgba(0,0,0,.2);box-shadow:0 1px 3px 0 rgba(0,0,0,.2)}:host .td-layout-manage-list-sidenav{text-align:start;-webkit-box-flex:1;-ms-flex:1;flex:1;display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}:host .td-layout-manage-list-main{margin:0;width:100%;min-height:100%;height:100%;position:relative;overflow:auto;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex}:host .td-layout-manage-list-main .td-layout-manage-list-content{display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch;-webkit-box-flex:1;-ms-flex:1;flex:1}:host ::ng-deep mat-sidenav-container.td-layout-manage-list>.mat-drawer-content{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}:host ::ng-deep mat-sidenav-container.td-layout-manage-list>.mat-drawer>.mat-drawer-inner-container{-webkit-box-shadow:0 1px 3px 0 rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 2px 1px -1px rgba(0,0,0,.12);box-shadow:0 1px 3px 0 rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 2px 1px -1px rgba(0,0,0,.12);-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}:host ::ng-deep mat-nav-list a[mat-list-item] .mat-list-item-content{font-size:14px}:host ::ng-deep .mat-toolbar{font-weight:400}"]
}] }
];
TdLayoutManageListComponent.propDecorators = {
sidenav: [{ type: ViewChild, args: [MatSidenav,] }],
mode: [{ type: Input, args: ['mode',] }],
opened: [{ type: Input, args: ['opened',] }],
sidenavWidth: [{ type: Input, args: ['sidenavWidth',] }],
containerAutosize: [{ type: Input, args: ['containerAutosize',] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class TdLayoutManageListToggleDirective extends LayoutToggle {
/**
* @param {?} layout
* @param {?} renderer
* @param {?} elementRef
*/
constructor(layout, renderer, elementRef) {
super(layout, renderer, elementRef);
}
/**
* @param {?} tdLayoutManageListToggle
* @return {?}
*/
set tdLayoutManageListToggle(tdLayoutManageListToggle) {
this.disabled = !((/** @type {?} */ (tdLayoutManageListToggle)) === '' || tdLayoutManageListToggle);
}
/**
* @return {?}
*/
onClick() {
this._layout.toggle();
}
}
TdLayoutManageListToggleDirective.decorators = [
{ type: Directive, args: [{
selector: '[tdLayoutManageListToggle]',
},] }
];
/** @nocollapse */
TdLayoutManageListToggleDirective.ctorParameters = () => [
{ type: TdLayoutManageListComponent, decorators: [{ type: Optional }, { type: Inject, args: [forwardRef(() => TdLayoutManageListComponent),] }] },
{ type: Renderer2 },
{ type: ElementRef }
];
TdLayoutManageListToggleDirective.propDecorators = {
tdLayoutManageListToggle: [{ type: Input, args: ['tdLayoutManageListToggle',] }]
};
class TdLayoutManageListCloseDirective extends LayoutToggle {
/**
* @param {?} layout
* @param {?} renderer
* @param {?} elementRef
*/
constructor(layout, renderer, elementRef) {
super(layout, renderer, elementRef);
}
/**
* @param {?} tdLayoutManageListClose
* @return {?}
*/
set tdLayoutManageListClose(tdLayoutManageListClose) {
this.disabled = !((/** @type {?} */ (tdLayoutManageListClose)) === '' || tdLayoutManageListClose);
}
/**
* @return {?}
*/
onClick() {
this._layout.close();
}
}
TdLayoutManageListCloseDirective.decorators = [
{ type: Directive, args: [{
selector: '[tdLayoutManageListClose]',
},] }
];
/** @nocollapse */
TdLayoutManageListCloseDirective.ctorParameters = () => [
{ type: TdLayoutManageListComponent, decorators: [{ type: Optional }, { type: Inject, args: [forwardRef(() => TdLayoutManageListComponent),] }] },
{ type: Renderer2 },
{ type: ElementRef }
];
TdLayoutManageListCloseDirective.propDecorators = {
tdLayoutManageListClose: [{ type: Input, args: ['tdLayoutManageListClose',] }]
};
class TdLayoutManageListOpenDirective extends LayoutToggle {
/**
* @param {?} layout
* @param {?} renderer
* @param {?} elementRef
*/
constructor(layout, renderer, elementRef) {
super(layout, renderer, elementRef);
}
/**
* @param {?} tdLayoutManageListOpen
* @return {?}
*/
set tdLayoutManageListOpen(tdLayoutManageListOpen) {
this.disabled = !((/** @type {?} */ (tdLayoutManageListOpen)) === '' || tdLayoutManageListOpen);
}
/**
* @return {?}
*/
onClick() {
this._layout.open();
}
}
TdLayoutManageListOpenDirective.decorators = [
{ type: Directive, args: [{
selector: '[tdLayoutManageListOpen]',
},] }
];
/** @nocollapse */
TdLayoutManageListOpenDirective.ctorParameters = () => [
{ type: TdLayoutManageListComponent, decorators: [{ type: Optional }, { type: Inject, args: [forwardRef(() => TdLayoutManageListComponent),] }] },
{ type: Renderer2 },
{ type: ElementRef }
];
TdLayoutManageListOpenDirective.propDecorators = {
tdLayoutManageListOpen: [{ type: Input, args: ['tdLayoutManageListOpen',] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class TdLayoutFooterComponent {
/**
* @param {?} _renderer
* @param {?} _elementRef
*/
constructor(_renderer, _elementRef) {
this._renderer = _renderer;
this._elementRef = _elementRef;
this._renderer.addClass(this._elementRef.nativeElement, 'td-layout-footer');
}
/**
* color?: string
*
* Optional color option: primary | accent | warn.
* @param {?} color
* @return {?}
*/
set color(color) {
if (color) {
this._renderer.removeClass(this._elementRef.nativeElement, 'mat-' + this._color);
this._color = color;
this._renderer.addClass(this._elementRef.nativeElement, 'mat-' + this._color);
}
}
/**
* @return {?}
*/
get color() {
return this._color;
}
}
TdLayoutFooterComponent.decorators = [
{ type: Component, args: [{
/* tslint:disable-next-line */
selector: 'td-layout-footer,td-layout-footer-inner',
template: "<ng-content></ng-content>\n",
styles: [":host{display:block;padding:10px 16px}"]
}] }
];
/** @nocollapse */
TdLayoutFooterComponent.ctorParameters = () => [
{ type: Renderer2 },
{ type: ElementRef }
];
TdLayoutFooterComponent.propDecorators = {
color: [{ type: Input, args: ['color',] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class TdNavigationDrawerMenuDirective {
}
TdNavigationDrawerMenuDirective.decorators = [
{ type: Directive, args: [{
selector: '[td-navigation-drawer-menu]',
},] }
];
class TdNavigationDrawerToolbarDirective {
}
TdNavigationDrawerToolbarDirective.decorators = [
{ type: Directive, args: [{
selector: '[td-navigation-drawer-toolbar]',
},] }
];
class TdNavigationDrawerComponent {
/**
* @param {?} _layout
* @param {?} _router
* @param {?} _sanitize
*/
constructor(_layout, _router, _sanitize) {
this._layout = _layout;
this._router = _router;
this._sanitize = _sanitize;
this._menuToggled = false;
}
/**
* @return {?}
*/
get menuToggled() {
return this._menuToggled;
}
/**
* Checks if there is a [TdNavigationDrawerMenuDirective] has content.
* @return {?}
*/
get isMenuAvailable() {
return this._drawerMenu ? this._drawerMenu.length > 0 : false;
}
/**
* Checks if there is a [TdNavigationDrawerToolbarDirective] has content.
* @return {?}
*/
get isCustomToolbar() {
return this._toolbar ? this._toolbar.length > 0 : false;
}
/**
* Checks if there is a background image for the toolbar.
* @return {?}
*/
get isBackgroundAvailable() {
return !!this._backgroundImage;
}
/**
* backgroundUrl?: SafeResourceUrl
*
* image to be displayed as the background of the toolbar.
* URL used will be sanitized, but it should be always from a trusted source to avoid XSS.
* @param {?} backgroundUrl
* @return {?}
*/
set backgroundUrl(backgroundUrl) {
if (backgroundUrl) {
/** @type {?} */
let sanitizedUrl = this._sanitize.sanitize(SecurityContext.RESOURCE_URL, backgroundUrl);
this._backgroundImage = this._sanitize.sanitize(SecurityContext.STYLE, 'url(' + sanitizedUrl + ')');
}
}
/**
* @return {?}
*/
get backgroundImage() {
return this._backgroundImage;
}
/**
* Checks if router was injected.
* @return {?}
*/
get routerEnabled() {
return !!this._router && !!this.navigationRoute;
}
/**
* @return {?}
*/
ngOnInit() {
this._closeSubscription = this._layout.sidenav.openedChange.subscribe((opened) => {
if (!opened) {
this._menuToggled = false;
}
});
}
/**
* @return {?}
*/
ngOnDestroy() {
if (this._closeSubscription) {
this._closeSubscription.unsubscribe();
this._closeSubscription = undefined;
}
}
/**
* @return {?}
*/
toggleMenu() {
if (this.isMenuAvailable) {
this._menuToggled = !this._menuToggled;
}
}
/**
* @return {?}
*/
handleNavigationClick() {
if (this.routerEnabled) {
this._router.navigateByUrl(this.navigationRoute);
this.close();
}
}
/**
* Proxy toggle method to access sidenav from outside (from td-layout template).
* @return {?}
*/
toggle() {
return this._layout.toggle();
}
/**
* Proxy open method to access sidenav from outside (from td-layout template).
* @return {?}
*/
open() {
return this._layout.open();
}
/**
* Proxy close method to access sidenav from outside (from td-layout template).
* @return {?}
*/
close() {
return this._layout.close();
}
}
TdNavigationDrawerComponent.decorators = [
{ type: Component, args: [{
selector: 'td-navigation-drawer',
template: "<mat-toolbar [color]=\"color\"\n [style.background-image]=\"backgroundImage\"\n [class.td-toolbar-background]=\"!!isBackgroundAvailable\"\n class=\"td-nagivation-drawer-toolbar\">\n <ng-content select=\"[td-navigation-drawer-toolbar]\"></ng-content>\n <ng-container *ngIf=\"!isCustomToolbar\">\n <div *ngIf=\"icon || logo || sidenavTitle || avatar\"\n class=\"td-navigation-drawer-toolbar-content\"\n [class.cursor-pointer]=\"routerEnabled\"\n (click)=\"handleNavigationClick()\">\n <mat-icon *ngIf=\"icon\">{{icon}}</mat-icon>\n <mat-icon *ngIf=\"logo && !icon\" class=\"mat-icon-logo\" [svgIcon]=\"logo\"></mat-icon>\n <img *ngIf=\"avatar && !logo && !icon\" class=\"td-nagivation-drawer-toolbar-avatar\" [attr.src]=\"avatar\" />\n <span *ngIf=\"sidenavTitle\" class=\"td-navigation-drawer-title\">{{sidenavTitle}}</span>\n </div>\n <div class=\"td-navigation-drawer-name\" *ngIf=\"email && name\">{{name}}</div>\n <div class=\"td-navigation-drawer-menu-toggle\"\n href\n *ngIf=\"email || name\"\n (click)=\"toggleMenu()\">\n <span class=\"td-navigation-drawer-label\">{{email || name}}</span>\n <button mat-icon-button class=\"td-navigation-drawer-menu-button\" *ngIf=\"isMenuAvailable\">\n <mat-icon *ngIf=\"!menuToggled\">arrow_drop_down</mat-icon>\n <mat-icon *ngIf=\"menuToggled\">arrow_drop_up</mat-icon>\n </button>\n </div>\n </ng-container>\n</mat-toolbar>\n<div class=\"td-navigation-drawer-content\" [@tdCollapse]=\"menuToggled\">\n <ng-content></ng-content>\n</div>\n<div class=\"td-navigation-drawer-menu-content\" [@tdCollapse]=\"!menuToggled\">\n <ng-content select=\"[td-navigation-drawer-menu]\"></ng-content>\n</div>\n",
animations: [tdCollapseAnimation],
styles: [":host{width:100%}:host .td-navigation-drawer-content.ng-animating,:host .td-navigation-drawer-menu-content.ng-animating{overflow:hidden}:host mat-toolbar{padding:16px}:host mat-toolbar.td-toolbar-background{background-repeat:no-repeat;background-size:cover}:host mat-toolbar.td-nagivation-drawer-toolbar{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;height:auto!important;display:block!important}:host mat-toolbar .td-navigation-drawer-toolbar-content{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:center;align-content:center;max-width:100%;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}:host mat-toolbar .td-navigation-drawer-toolbar-content .td-nagivation-drawer-toolbar-avatar{border-radius:50%;height:60px;width:60px;margin:0 12px 12px 0}:host mat-toolbar .td-navigation-drawer-menu-toggle{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex}:host mat-toolbar .td-navigation-drawer-menu-toggle .td-navigation-drawer-label{-webkit-box-flex:1;-ms-flex:1;flex:1}:host mat-toolbar .td-navigation-drawer-menu-toggle .td-navigation-drawer-menu-button{height:24px;line-height:24px;width:24px}:host>div{overflow:hidden}"]
}] }
];
/** @nocollapse */
TdNavigationDrawerComponent.ctorParameters = () => [
{ type: TdLayoutComponent, decorators: [{ type: Inject, args: [forwardRef(() => TdLayoutComponent),] }] },
{ type: Router, decorators: [{ type: Optional }] },
{ type: DomSanitizer }
];
TdNavigationDrawerComponent.propDecorators = {
_drawerMenu: [{ type: ContentChildren, args: [TdNavigationDrawerMenuDirective,] }],
_toolbar: [{ type: ContentChildren, args: [TdNavigationDrawerToolbarDirective,] }],
sidenavTitle: [{ type: Input, args: ['sidenavTitle',] }],
icon: [{ type: Input, args: ['icon',] }],
logo: [{ type: Input, args: ['logo',] }],
avatar: [{ type: Input, args: ['avatar',] }],
color: [{ type: Input, args: ['color',] }],
navigationRoute: [{ type: Input, args: ['navigationRoute',] }],
backgroundUrl: [{ type: Input, args: ['backgroundUrl',] }],
name: [{ type: Input, args: ['name',] }],
email: [{ type: Input, args: ['email',] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/** @type {?} */
const TD_LAYOUTS = [
TdLayoutComponent,
TdLayoutToggleDirective,
TdLayoutCloseDirective,
TdLayoutOpenDirective,
TdLayoutNavComponent,
TdLayoutNavListComponent,
TdLayoutNavListToggleDirective,
TdLayoutNavListCloseDirective,
TdLayoutNavListOpenDirective,
TdLayoutCardOverComponent,
TdLayoutManageListComponent,
TdLayoutManageListToggleDirective,
TdLayoutManageListCloseDirective,
TdLayoutManageListOpenDirective,
TdLayoutFooterComponent,
TdNavigationDrawerComponent,
TdNavigationDrawerMenuDirective,
TdNavigationDrawerToolbarDirective,
];
class CovalentLayoutModule {
}
CovalentLayoutModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule,
ScrollDispatchModule,
MatSidenavModule,
MatToolbarModule,
MatButtonModule,
MatIconModule,
MatCardModule,
MatDividerModule,
],
declarations: [
TD_LAYOUTS,
],
exports: [
TD_LAYOUTS,
],
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/** @enum {string} */
const LoadingType = {
Circular: 'circular',
Linear: 'linear',
};
/** @enum {string} */
const LoadingMode = {
Determinate: 'determinate',
Indeterminate: 'indeterminate',
};
/** @enum {string} */
const LoadingStrategy = {
Overlay: 'overlay',
Replace: 'replace',
};
/** @enum {string} */
const LoadingStyle = {
FullScreen: 'fullscreen',
Overlay: 'overlay',
None: 'none',
};
/** @type {?} */
const TD_CIRCLE_DIAMETER = 100;
class TdLoadingComponent {
/**
* @param {?} _elementRef
* @param {?} _changeDetectorRef
*/
constructor(_elementRef, _changeDetectorRef) {
this._elementRef = _elementRef;
this._changeDetectorRef = _changeDetectorRef;
this._animationIn = new Subject();
this._animationOut = new Subject();
this._mode = LoadingMode.Indeterminate;
this._defaultMode = LoadingMode.Indeterminate;
this._value = 0;
this._circleDiameter = TD_CIRCLE_DIAMETER;
/**
* Flag for animation
*/
this.animation = false;
this.style = LoadingStyle.None;
/**
* type: LoadingType
* Sets type of [TdLoadingComponent] rendered.
*/
this.type = LoadingType.Circular;
/**
* color: primary' | 'accent' | 'warn'
* Sets theme color of [TdLoadingComponent] rendered.
*/
this.color = 'primary';
}
/**
* Sets mode of [TdLoadingComponent] to LoadingMode.Determinate or LoadingMode.Indeterminate
* @param {?} mode
* @return {?}
*/
set mode(mode) {
this._defaultMode = mode;
}
/**
* @return {?}
*/
get mode() {
return this._mode;
}
/**
* Sets value of [TdLoadingComponent] if mode is 'LoadingMode.Determinate'
* @param {?} value
* @return {?}
*/
set value(value) {
this._value = value;
// Check for changes for `OnPush` change detection
this._changeDetectorRef.markForCheck();
}
/**
* @return {?}
*/
get value() {
return this._value;
}
/**
* @return {?}
*/
ngDoCheck() {
// When overlay is used and the host width has a value greater than 1px
// set the circle diameter when possible incase the loading component was rendered in a hidden state
if (this.isOverlay() && this._hostHeight() > 1) {
if (this.animation) {
this._setCircleDiameter();
this._changeDetectorRef.markForCheck();
}
}
}
/**
* @return {?}
*/
getHeight() {
// Ignore height if style is `overlay` or `fullscreen`.
// Add height if child elements have a height and style is `none`, else return default height.
if (this.isOverlay() || this.isFullScreen()) {
return undefined;
}
else {
return this.height ? `${this.height}px` : '150px';
}
}
/**
* @return {?}
*/
getCircleDiameter() {
return this._circleDiameter;
}
/**
* @return {?}
*/
getCircleStrokeWidth() {
// we calculate the stroke width by setting it as 10% of its diameter
/** @type {?} */
let strokeWidth = this.getCircleDiameter() / 10;
return Math.abs(strokeWidth);
}
/**
* @return {?}
*/
isCircular() {
return this.type === LoadingType.Circular;
}
/**
* @return {?}
*/
isLinear() {
return this.type === LoadingType.Linear;
}
/**
* @return {?}
*/
isFullScreen() {
return this.style === LoadingStyle.FullScreen;
}
/**
* @return {?}
*/
isOverlay() {
return this.style === LoadingStyle.Overlay;
}
/**
* @param {?} event
* @return {?}
*/
animationComplete(event) {
// Check to see if its "in" or "out" animation to execute the proper callback
if (!event.fromState) {
this.inAnimationCompleted();
}
else {
this.outAnimationCompleted();
}
}
/**
* @return {?}
*/
inAnimationCompleted() {
this._animationIn.next(undefined);
}
/**
* @return {?}
*/
outAnimationCompleted() {
/* little hack to reset the loader value and animation before removing it from DOM
* else, the loader will appear with prev value when its registered again
* and will do an animation going prev value to 0.
*/
this.value = 0;
// Check for changes for `OnPush` change detection
this._changeDetectorRef.markForCheck();
this._animationOut.next(undefined);
}
/**
* Starts in animation and returns an observable for completition event.
* @return {?}
*/
startInAnimation() {
/* need to switch back to the selected mode, so we have saved it in another variable
* and then recover it. (issue with protractor)
*/
this._mode = this._defaultMode;
// Set values before the animations starts
this._setCircleDiameter();
// Check for changes for `OnPush` change detection
this.animation = true;
this._changeDetectorRef.markForCheck();
return this._animationIn.asObservable();
}
/**
* Starts out animation and returns an observable for completition event.
* @return {?}
*/
startOutAnimation() {
this.animation = false;
/* need to switch back and forth from determinate/indeterminate so the setInterval()
* inside mat-progress-spinner stops and protractor doesnt timeout waiting to sync.
*/
this._mode = LoadingMode.Determinate;
// Check for changes for `OnPush` change detection
this._changeDetectorRef.markForCheck();
return this._animationOut.asObservable();
}
/**
* Calculate the proper diameter for the circle and set it
* @return {?}
*/
_setCircleDiameter() {
// we set a default diameter of 100 since this is the default in material
/** @type {?} */
let diameter = TD_CIRCLE_DIAMETER;
// if height is provided, then we take that as diameter
if (this.height) {
diameter = this.height;
// else if its not provided, then we take the host height
}
else if (this.height === undefined) {
diameter = this._hostHeight();
}
// if the diameter is over TD_CIRCLE_DIAMETER, we set TD_CIRCLE_DIAMETER
if (!!diameter && diameter <= TD_CIRCLE_DIAMETER) {
this._circleDiameter = Math.floor(diameter);
}
else {
this._circleDiameter = TD_CIRCLE_DIAMETER;
}
}
/**
* Returns the host height of the loading component
* @return {?}
*/
_hostHeight() {
if ((/** @type {?} */ (this._elementRef.nativeElement))) {
return ((/** @type {?} */ (this._elementRef.nativeElement))).getBoundingClientRect().height;
}
return 0;
}
}
TdLoadingComponent.decorators = [
{ type: Component, args: [{
selector: 'td-loading',
template: "<div class=\"td-loading-wrapper\"\n [style.min-height]=\"getHeight()\"\n [class.td-overlay-circular]=\"(isOverlay() || isFullScreen()) && !isLinear()\"\n [class.td-overlay]=\"isOverlay() || isFullScreen()\" \n [class.td-fullscreen]=\"isFullScreen()\">\n <div [@tdFadeInOut]=\"animation\"\n (@tdFadeInOut.done)=\"animationComplete($event)\"\n [style.min-height]=\"getHeight()\"\n class=\"td-loading\">\n <mat-progress-spinner *ngIf=\"isCircular()\" \n [mode]=\"mode\"\n [value]=\"value\" \n [color]=\"color\" \n [diameter]=\"getCircleDiameter()\"\n [strokeWidth]=\"getCircleStrokeWidth()\">\n </mat-progress-spinner>\n <mat-progress-bar *ngIf=\"isLinear()\" \n [mode]=\"mode\"\n [value]=\"value\"\n [color]=\"color\">\n </mat-progress-bar>\n </div>\n <ng-template [cdkPortalOutlet]=\"content\"></ng-template>\n</div>",
animations: [
tdFadeInOutAnimation,
],
styles: [".td-loading-wrapper{position:relative;display:block}.td-loading-wrapper.td-fullscreen{position:inherit}.td-loading-wrapper .td-loading{-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:center;align-content:center;max-width:100%;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-flex:1;-ms-flex:1;flex:1}.td-loading-wrapper.td-overlay .td-loading{position:absolute;margin:0;top:0;left:0;right:0;z-index:1000}.td-loading-wrapper.td-overlay .td-loading mat-progress-bar{position:absolute;top:0;left:0;right:0}.td-loading-wrapper.td-overlay-circular .td-loading{bottom:0}"]
}] }
];
/** @nocollapse */
TdLoadingComponent.ctorParameters = () => [
{ type: ElementRef },
{ type: ChangeDetectorRef }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/**
* NOTE: \@internal usage only.
*/
class TdLoadingFactory {
/**
* @param {?} _componentFactoryResolver
* @param {?} _overlay
* @param {?} _injector
*/
constructor(_componentFactoryResolver, _overlay, _injector) {
this._componentFactoryResolver = _componentFactoryResolver;
this._overlay = _overlay;
this._injector = _injector;
}
/**
* Uses material `Overlay` services to create a DOM element and attach the loading component
* into it. Leveraging the state and configuration from it.
*
* Saves a reference in context to be called when registering/resolving the loading element.
* @param {?} options
* @return {?}
*/
createFullScreenComponent(options) {
((/** @type {?} */ (options))).height = undefined;
((/** @type {?} */ (options))).style = LoadingStyle.FullScreen;
/** @type {?} */
let loadingRef = this._initializeContext();
/** @type {?} */
let loading = false;
/** @type {?} */
let overlayRef;
loadingRef.observable.pipe(distinctUntilChanged()).subscribe((registered) => {
if (registered > 0 && !loading) {
loading = true;
overlayRef = this._createOverlay();
loadingRef.componentRef = overlayRef.attach(new ComponentPortal(TdLoadingComponent));
this._mapOptions(options, loadingRef.componentRef.instance);
loadingRef.componentRef.instance.startInAnimation();
loadingRef.componentRef.changeDetectorRef.detectChanges();
}
else if (registered <= 0 && loading) {
loading = false;
/** @type {?} */
let subs = loadingRef.componentRef.instance.startOutAnimation().subscribe(() => {
subs.unsubscribe();
loadingRef.componentRef.destroy();
overlayRef.detach();
overlayRef.dispose();
});
}
});
return loadingRef;
}
/**
* Creates a loading component dynamically and attaches it into the given viewContainerRef.
* Leverages TemplatePortals from material to inject the template inside of it so it fits
* perfectly when overlaying it.
*
* Saves a reference in context to be called when registering/resolving the loading element.
* @param {?} options
* @param {?} viewContainerRef
* @param {?} templateRef
* @return {?}
*/
createOverlayComponent(options, viewContainerRef, templateRef) {
((/** @type {?} */ (options))).height = undefined;
((/** @type {?} */ (options))).style = LoadingStyle.Overlay;
/** @type {?} */
let loadingRef = this._createComponent(options);
/** @type {?} */
let loading = false;
loadingRef.componentRef.instance.content = new TemplatePortal(templateRef, viewContainerRef);
viewContainerRef.clear();
viewContainerRef.insert(loadingRef.componentRef.hostView, 0);
loadingRef.observable.pipe(distinctUntilChanged()).subscribe((registered) => {
if (registered > 0 && !loading) {
loading = true;
loadingRef.componentRef.instance.startInAnimation();
}
else if (registered <= 0 && loading) {
loading = false;
loadingRef.componentRef.instance.startOutAnimation();
}
});
return loadingRef;
}
/**
* Creates a loading component dynamically and attaches it into the given viewContainerRef.
* Replaces the template with the loading component depending if it was registered or resolved.
*
* Saves a reference in context to be called when registering/resolving the loading element.
* @param {?} options
* @param {?} viewContainerRef
* @param {?} templateRef
* @param {?} context
* @return {?}
*/
createReplaceComponent(options, viewContainerRef, templateRef, context) {
/** @type {?} */
let nativeElement = (/** @type {?} */ (templateRef.elementRef.nativeElement));
((/** @type {?} */ (options))).height = nativeElement.nextElementSibling ?
nativeElement.nextElementSibling.scrollHeight : undefined;
((/** @type {?} */ (options))).style = LoadingStyle.None;
/** @type {?} */
let loadingRef = this._createComponent(options);
/** @type {?} */
let loading = false;
// passing context so when the template is attached, we can keep the reference of the variables
/** @type {?} */
let contentRef = viewContainerRef.createEmbeddedView(templateRef, context);
loadingRef.observable.pipe(distinctUntilChanged()).subscribe((registered) => {
if (registered > 0 && !loading) {
loading = true;
// detach the content and attach the loader if loader is there
/** @type {?} */
let index = viewContainerRef.indexOf(loadingRef.componentRef.hostView);
if (index < 0) {
viewContainerRef.detach(viewContainerRef.indexOf(contentRef));
viewContainerRef.insert(loadingRef.componentRef.hostView, 0);
}
loadingRef.componentRef.instance.startInAnimation();
}
else if (registered <= 0 && loading) {
loading = false;
/** @type {?} */
let subs = loadingRef.componentRef.instance.startOutAnimation().subscribe(() => {
subs.unsubscribe();
// detach loader and attach the content if content is there
/** @type {?} */
let index = viewContainerRef.indexOf(contentRef);
if (index < 0) {
viewContainerRef.detach(viewContainerRef.indexOf(loadingRef.componentRef.hostView));
viewContainerRef.insert(contentRef, 0);
}
/**
* Need to call "markForCheck" and "detectChanges" on attached template, so its detected by parent component when attached
* with "OnPush" change detection
*/
contentRef.detectChanges();
contentRef.markForCheck();
});
}
});
return loadingRef;
}
/**
* Creates a fullscreen overlay for the loading usage.
* @return {?}
*/
_createOverlay() {
/** @type {?} */
let state$$1 = new OverlayConfig();
state$$1.hasBackdrop = false;
state$$1.positionStrategy = this._overlay.position().global().centerHorizontally().centerVertically();
return this._overlay.create(state$$1);
}
/**
* Creates a generic component dynamically waiting to be attached to a viewContainerRef.
* @param {?} options
* @return {?}
*/
_createComponent(options) {
/** @type {?} */
let compRef = this._initializeContext();
compRef.componentRef = this._componentFactoryResolver
.resolveComponentFactory(TdLoadingComponent).create(this._injector);
this._mapOptions(options, compRef.componentRef.instance);
return compRef;
}
/**
* Initialize context for loading component.
* @return {?}
*/
_initializeContext() {
/** @type {?} */
let subject = new Subject();
return {
observable: subject.asObservable(),
subject: subject,
componentRef: undefined,
times: 0,
};
}
/**
* Maps configuration to the loading component instance.
* @param {?} options
* @param {?} instance
* @return {?}
*/
_mapOptions(options, instance) {
instance.style = options.style;
if (options.type !== undefined) {
instance.type = options.type;
}
if (options.height !== undefined) {
instance.height = options.height;
}
if (options.mode !== undefined) {
instance.mode = options.mode;
}
if (options.color !== undefined) {
instance.color = options.color;
}
}
}
TdLoadingFactory.decorators = [
{ type: Injectable }
];
/** @nocollapse */
TdLoadingFactory.ctorParameters = () => [
{ type: ComponentFactoryResolver },
{ type: Overlay },
{ type: Injector }
];
/**
* @param {?} parent
* @param {?} componentFactoryResolver
* @param {?} overlay
* @param {?} injector
* @return {?}
*/
function LOADING_FACTORY_PROVIDER_FACTORY(parent, componentFactoryResolver, overlay, injector) {
return parent || new TdLoadingFactory(componentFactoryResolver, overlay, injector);
}
/** @type {?} */
const LOADING_FACTORY_PROVIDER = {
// If there is already a service available, use that. Otherwise, provide a new one.
provide: TdLoadingFactory,
deps: [[new Optional(), new SkipSelf(), TdLoadingFactory], ComponentFactoryResolver, Overlay, Injector],
useFactory: LOADING_FACTORY_PROVIDER_FACTORY,
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class TdLoadingConfig {
/**
* @param {?} config
*/
constructor(config) {
this.name = config.name;
if (!this.name) {
throw Error('Name is required for [TdLoading] configuration.');
}
this.mode = config.mode ? config.mode : LoadingMode.Indeterminate;
this.type = config.type ? config.type : LoadingType.Circular;
this.color = config.color ? config.color : 'primary';
}
}
class TdLoadingDirectiveConfig extends TdLoadingConfig {
/**
* @param {?} config
*/
constructor(config) {
super(config);
this.strategy = config.strategy ? config.strategy : LoadingStrategy.Replace;
}
}
class TdLoadingService {
/**
* @param {?} _loadingFactory
*/
constructor(_loadingFactory) {
this._loadingFactory = _loadingFactory;
this._context = {};
this._timeouts = {};
this.create({
name: 'td-loading-main',
});
}
/**
* params:
* - config: ILoadingDirectiveConfig
* - viewContainerRef: ViewContainerRef
* - templateRef: TemplateRef<Object>
*
* Creates an replace loading mask and attaches it to the viewContainerRef.
* Replaces the templateRef with the mask when a request is registered on it.
*
* NOTE: \@internal usage only.
* @param {?} config
* @param {?} viewContainerRef
* @param {?} templateRef
* @param {?} context
* @return {?}
*/
createComponent(config, viewContainerRef, templateRef, context) {
/** @type {?} */
let directiveConfig = new TdLoadingDirectiveConfig(config);
if (this._context[directiveConfig.name]) {
throw Error(`Name duplication: [TdLoading] directive has a name conflict with ${directiveConfig.name}.`);
}
if (directiveConfig.strategy === LoadingStrategy.Overlay) {
this._context[directiveConfig.name] = this._loadingFactory.createOverlayComponent(directiveConfig, viewContainerRef, templateRef);
}
else {
this._context[directiveConfig.name] = this._loadingFactory.createReplaceComponent(directiveConfig, viewContainerRef, templateRef, context);
}
return this._context[directiveConfig.name];
}
/**
* params:
* - config: ITdLoadingConfig
*
* Creates a fullscreen loading mask and attaches it to the DOM with the given configuration.
* Only displayed when the mask has a request registered on it.
* @param {?} config
* @return {?}
*/
create(config) {
/** @type {?} */
let fullscreenConfig = new TdLoadingConfig(config);
this.removeComponent(fullscreenConfig.name);
this._context[fullscreenConfig.name] = this._loadingFactory.createFullScreenComponent(fullscreenConfig);
}
/**
* params:
* - name: string
*
* Removes `loading` component from service context.
* @param {?} name
* @return {?}
*/
removeComponent(name) {
if (this._context[name]) {
this._context[name].subject.unsubscribe();
if (this._context[name].componentRef) {
this._context[name].componentRef.destroy();
}
this._context[name] = undefined;
delete this._context[name];
}
}
/**
* params:
* - name: string
* - registers?: number
* returns: true if successful
*
* Resolves a request for the loading mask referenced by the name parameter.
* Can optionally pass registers argument to set a number of register calls.
*
* If no paramemeters are used, then default main mask will be used.
*
* e.g. loadingService.register()
* @param {?=} name
* @param {?=} registers
* @return {?}
*/
register(name = 'td-loading-main', registers = 1) {
// try registering into the service if the loading component has been instanciated or if it exists.
if (this._context[name]) {
registers = registers < 1 ? 1 : registers;
this._context[name].times += registers;
this._context[name].subject.next(this._context[name].times);
return true;
}
else {
// if it doesnt exist, set a timeout so its registered after change detection happens
// this in case "register" occured on the `ngOnInit` lifehook cycle.
if (!this._timeouts[name]) {
this._timeouts[name] = setTimeout(() => {
this.register(name, registers);
});
}
else {
// if it timeout occured and still doesnt exist, it means the tiemout wasnt needed so we clear it.
this._clearTimeout(name);
}
}
return false;
}
/**
* params:
* - name: string
* - resolves?: number
* returns: true if successful
*
* Resolves a request for the loading mask referenced by the name parameter.
* Can optionally pass resolves argument to set a number of resolve calls.
*
* If no paramemeters are used, then default main mask will be used.
*
* e.g. loadingService.resolve()
* @param {?=} name
* @param {?=} resolves
* @return {?}
*/
resolve(name = 'td-loading-main', resolves = 1) {
// clear timeout if the loading component is "resolved" before its "registered"
this._clearTimeout(name);
if (this._context[name]) {
resolves = resolves < 1 ? 1 : resolves;
if (this._context[name].times > 0) {
/** @type {?} */
let times = this._context[name].times;
times -= resolves;
this._context[name].times = times < 0 ? 0 : times;
}
this._context[name].subject.next(this._context[name].times);
return true;
}
return false;
}
/**
* params:
* - name: string
* returns: true if successful
*
* Resolves all request for the loading mask referenced by the name parameter.
*
* If no paramemeters are used, then default main mask will be used.
*
* e.g. loadingService.resolveAll()
* @param {?=} name
* @return {?}
*/
resolveAll(name = 'td-loading-main') {
// clear timeout if the loading component is "resolved" before its "registered"
this._clearTimeout(name);
if (this._context[name]) {
this._context[name].times = 0;
this._context[name].subject.next(this._context[name].times);
return true;
}
return false;
}
/**
* params:
* - name: string
* - value: number
* returns: true if successful
*
* Set value on a loading mask referenced by the name parameter.
* Usage only available if its mode is 'determinate' and if loading is showing.
* @param {?} name
* @param {?} value
* @return {?}
*/
setValue(name, value) {
if (this._context[name]) {
/** @type {?} */
let instance = this._context[name].componentRef.instance;
if (instance.mode === LoadingMode.Determinate && instance.animation) {
instance.value = value;
return true;
}
}
return false;
}
/**
* Clears timeout linked to the name.
* @param {?} name Name of the loading component to be cleared
* @return {?}
*/
_clearTimeout(name) {
clearTimeout(this._timeouts[name]);
delete this._timeouts[name];
}
}
TdLoadingService.decorators = [
{ type: Injectable }
];
/** @nocollapse */
TdLoadingService.ctorParameters = () => [
{ type: TdLoadingFactory }
];
/**
* @param {?} parent
* @param {?} loadingFactory
* @return {?}
*/
function LOADING_PROVIDER_FACTORY(parent, loadingFactory) {
return parent || new TdLoadingService(loadingFactory);
}
/** @type {?} */
const LOADING_PROVIDER = {
// If there is already a service available, use that. Otherwise, provide a new one.
provide: TdLoadingService,
deps: [[new Optional(), new SkipSelf(), TdLoadingService], TdLoadingFactory],
useFactory: LOADING_PROVIDER_FACTORY,
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/**
* Context class for variable reference
*/
class TdLoadingContext {
constructor() {
this.$implicit = undefined;
this.tdLoading = undefined;
}
}
// Constant for generation of the id for the next component
/** @type {?} */
let TD_LOADING_NEXT_ID = 0;
class TdLoadingDirective {
/**
* @param {?} _viewContainerRef
* @param {?} _templateRef
* @param {?} _loadingService
*/
constructor(_viewContainerRef, _templateRef, _loadingService) {
this._viewContainerRef = _viewContainerRef;
this._templateRef = _templateRef;
this._loadingService = _loadingService;
this._context = new TdLoadingContext();
/**
* tdLoadingColor?: "primary" | "accent" | "warn"
* Sets the theme color of the loading component. Defaults to "primary"
*/
this.color = 'primary';
}
/**
* tdLoading: string
* Name reference of the loading mask, used to register/resolve requests to the mask.
* @param {?} name
* @return {?}
*/
set name(name) {
if (!this._name) {
if (name) {
this._name = name;
}
}
}
/**
* tdLoadingUntil?: any
* If its null, undefined or false it will be used to register requests to the mask.
* Else if its any value that can be resolved as true, it will resolve the mask.
* [name] is optional when using [until], but can still be used to register/resolve it manually.
* @param {?} until
* @return {?}
*/
set until(until) {
if (!this._name) {
this._name = 'td-loading-until-' + TD_LOADING_NEXT_ID++;
}
this._context.$implicit = this._context.tdLoading = until;
if (!until) {
this._loadingService.register(this._name);
}
else {
this._loadingService.resolveAll(this._name);
}
}
/**
* tdLoadingType?: LoadingType or ['linear' | 'circular']
* Sets the type of loading mask depending on value.
* Defaults to [LoadingType.Circular | 'circular'].
* @param {?} type
* @return {?}
*/
set type(type) {
switch (type) {
case LoadingType.Linear:
this._type = LoadingType.Linear;
break;
default:
this._type = LoadingType.Circular;
break;
}
}
/**
* tdLoadingMode?: LoadingMode or ['determinate' | 'indeterminate']
* Sets the mode of loading mask depending on value.
* Defaults to [LoadingMode.Indeterminate | 'indeterminate'].
* @param {?} mode
* @return {?}
*/
set mode(mode) {
switch (mode) {
case LoadingMode.Determinate:
this._mode = LoadingMode.Determinate;
break;
default:
this._mode = LoadingMode.Indeterminate;
break;
}
}
/**
* tdLoadingStrategy?: LoadingStrategy or ['replace' | 'overlay']
* Sets the strategy of loading mask depending on value.
* Defaults to [LoadingMode.Replace | 'replace'].
* @param {?} stategy
* @return {?}
*/
set strategy(stategy) {
switch (stategy) {
case LoadingStrategy.Overlay:
this._strategy = LoadingStrategy.Overlay;
break;
default:
this._strategy = LoadingStrategy.Replace;
break;
}
}
/**
* Registers component in the DOM, so it will be available when calling resolve/register.
* @return {?}
*/
ngOnInit() {
this._registerComponent();
}
/**
* Remove component when directive is destroyed.
* @return {?}
*/
ngOnDestroy() {
this._loadingService.removeComponent(this._name);
this._loadingRef = undefined;
}
/**
* Creates [TdLoadingComponent] and attaches it to this directive's [ViewContainerRef].
* Passes this directive's [TemplateRef] to modify DOM depending on loading `strategy`.
* @return {?}
*/
_registerComponent() {
if (!this._name) {
throw new Error('Name is needed to register loading directive');
}
// Check if `TdLoadingComponent` has been created before trying to add one again.
// There is a weird edge case when using `[routerLinkActive]` that calls the `ngOnInit` twice in a row
if (!this._loadingRef) {
this._loadingRef = this._loadingService.createComponent({
name: this._name,
type: this._type,
mode: this._mode,
color: this.color,
strategy: this._strategy,
}, this._viewContainerRef, this._templateRef, this._context);
}
}
}
TdLoadingDirective.decorators = [
{ type: Directive, args: [{
selector: '[tdLoading]',
},] }
];
/** @nocollapse */
TdLoadingDirective.ctorParameters = () => [
{ type: ViewContainerRef },
{ type: TemplateRef },
{ type: TdLoadingService }
];
TdLoadingDirective.propDecorators = {
name: [{ type: Input, args: ['tdLoading',] }],
until: [{ type: Input, args: ['tdLoadingUntil',] }],
type: [{ type: Input, args: ['tdLoadingType',] }],
mode: [{ type: Input, args: ['tdLoadingMode',] }],
strategy: [{ type: Input, args: ['tdLoadingStrategy',] }],
color: [{ type: Input, args: ['tdLoadingColor',] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/** @type {?} */
const TD_LOADING = [
TdLoadingComponent,
TdLoadingDirective,
];
/** @type {?} */
const TD_LOADING_ENTRY_COMPONENTS = [
TdLoadingComponent,
];
class CovalentLoadingModule {
}
CovalentLoadingModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule,
MatProgressBarModule,
MatProgressSpinnerModule,
OverlayModule,
PortalModule,
],
declarations: [
TD_LOADING,
],
exports: [
TD_LOADING,
],
providers: [
LOADING_FACTORY_PROVIDER,
LOADING_PROVIDER,
],
entryComponents: [
TD_LOADING_ENTRY_COMPONENTS,
],
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class TdMediaService {
/**
* @param {?} _ngZone
*/
constructor(_ngZone) {
this._ngZone = _ngZone;
this._resizing = false;
this._queryMap = new Map();
this._querySources = {};
this._queryObservables = {};
this._queryMap.set('xs', '(max-width: 599px)');
this._queryMap.set('gt-xs', '(min-width: 600px)');
this._queryMap.set('sm', '(min-width: 600px) and (max-width: 959px)');
this._queryMap.set('gt-sm', '(min-width: 960px)');
this._queryMap.set('md', '(min-width: 960px) and (max-width: 1279px)');
this._queryMap.set('gt-md', '(min-width: 1280px)');
this._queryMap.set('lg', '(min-width: 1280px) and (max-width: 1919px)');
this._queryMap.set('gt-lg', '(min-width: 1920px)');
this._queryMap.set('xl', '(min-width: 1920px)');
this._queryMap.set('landscape', '(orientation: landscape)');
this._queryMap.set('portrait', '(orientation: portrait)');
this._queryMap.set('print', 'print');
this._resizing = false;
// we make sure that the resize checking happend outside of Angular since it happens often
this._globalSubscription = this._ngZone.runOutsideAngular(() => {
return fromEvent(window, 'resize').subscribe(() => {
// way to prevent the resize event from triggering the match media if there is already one event running already.
if (!this._resizing) {
this._resizing = true;
setTimeout(() => {
this._onResize();
this._resizing = false;
}, 100);
}
});
});
}
/**
* Deregisters a query so its stops being notified or used.
* @param {?} query
* @return {?}
*/
deregisterQuery(query$$1) {
if (this._queryMap.get(query$$1.toLowerCase())) {
query$$1 = this._queryMap.get(query$$1.toLowerCase());
}
this._querySources[query$$1].unsubscribe();
delete this._querySources[query$$1];
delete this._queryObservables[query$$1];
}
/**
* Used to evaluate whether a given media query is true or false given the current device's screen / window size.
* @param {?} query
* @return {?}
*/
query(query$$1) {
if (this._queryMap.get(query$$1.toLowerCase())) {
query$$1 = this._queryMap.get(query$$1.toLowerCase());
}
return this._ngZone.run(() => {
return matchMedia(query$$1).matches;
});
}
/**
* Registers a media query and returns an [Observable] that will re-evaluate and
* return if the given media query matches on window resize.
* Note: don't forget to unsubscribe from [Observable] when finished watching.
* @param {?} query
* @return {?}
*/
registerQuery(query$$1) {
if (this._queryMap.get(query$$1.toLowerCase())) {
query$$1 = this._queryMap.get(query$$1.toLowerCase());
}
if (!this._querySources[query$$1]) {
this._querySources[query$$1] = new BehaviorSubject(matchMedia(query$$1).matches);
this._queryObservables[query$$1] = this._querySources[query$$1].asObservable();
}
return this._queryObservables[query$$1];
}
/**
* Trigger a match media event on all subscribed observables.
* @return {?}
*/
broadcast() {
this._onResize();
}
/**
* @return {?}
*/
_onResize() {
for (let query$$1 in this._querySources) {
this._ngZone.run(() => {
this._matchMediaTrigger(query$$1);
});
}
}
/**
* @param {?} query
* @return {?}
*/
_matchMediaTrigger(query$$1) {
this._querySources[query$$1].next(matchMedia(query$$1).matches);
}
}
TdMediaService.decorators = [
{ type: Injectable }
];
/** @nocollapse */
TdMediaService.ctorParameters = () => [
{ type: NgZone }
];
/**
* @param {?} parent
* @param {?} ngZone
* @return {?}
*/
function MEDIA_PROVIDER_FACTORY(parent, ngZone) {
return parent || new TdMediaService(ngZone);
}
/** @type {?} */
const MEDIA_PROVIDER = {
// If there is already a service available, use that. Otherwise, provide a new one.
provide: TdMediaService,
deps: [[new Optional(), new SkipSelf(), TdMediaService], NgZone],
useFactory: MEDIA_PROVIDER_FACTORY,
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class TdMediaToggleDirective {
/**
* @param {?} _renderer
* @param {?} _elementRef
* @param {?} _mediaService
*/
constructor(_renderer, _elementRef, _mediaService) {
this._renderer = _renderer;
this._elementRef = _elementRef;
this._mediaService = _mediaService;
this._matches = false;
this._attributes = {};
this._styles = {};
this._classes = [];
}
/**
* tdMediaToggle: string
* Media query used to evaluate screen/window size.
* Toggles attributes, classes and styles if media query is matched.
* @param {?} query
* @return {?}
*/
set query(query$$1) {
if (!query$$1) {
throw new Error('Query needed for [tdMediaToggle] directive.');
}
this._query = query$$1;
}
/**
* mediaAttributes: {[key: string]: string}
* Attributes to be toggled when media query matches.
* @param {?} attributes
* @return {?}
*/
set attributes(attributes) {
this._attributes = attributes;
}
/**
* mediaClasses: string[]
* CSS Classes to be toggled when media query matches.
* @param {?} classes
* @return {?}
*/
set classes(classes) {
this._classes = classes;
}
/**
* mediaStyles: {[key: string]: string}
* CSS Styles to be toggled when media query matches.
* @param {?} styles
* @return {?}
*/
set styles(styles) {
this._styles = styles;
}
/**
* @return {?}
*/
ngOnInit() {
this._mediaChange(this._mediaService.query(this._query));
this._subscription = this._mediaService.registerQuery(this._query).subscribe((matches) => {
this._mediaChange(matches);
});
}
/**
* @return {?}
*/
ngOnDestroy() {
if (this._subscription) {
this._subscription.unsubscribe();
}
}
/**
* @param {?} matches
* @return {?}
*/
_mediaChange(matches) {
this._matches = matches;
this._changeAttributes();
this._changeClasses();
this._changeStyles();
}
/**
* @return {?}
*/
_changeAttributes() {
for (let attr in this._attributes) {
if (this._matches) {
this._renderer.setAttribute(this._elementRef.nativeElement, attr, this._attributes[attr]);
}
else {
this._renderer.removeAttribute(this._elementRef.nativeElement, attr);
}
}
}
/**
* @return {?}
*/
_changeClasses() {
this._classes.forEach((className) => {
if (this._matches) {
this._renderer.addClass(this._elementRef.nativeElement, className);
}
else {
this._renderer.removeClass(this._elementRef.nativeElement, className);
}
});
}
/**
* @return {?}
*/
_changeStyles() {
for (let style$$1 in this._styles) {
if (this._matches) {
this._renderer.setStyle(this._elementRef.nativeElement, style$$1, this._styles[style$$1]);
}
else {
this._renderer.removeStyle(this._elementRef.nativeElement, style$$1);
}
}
}
}
TdMediaToggleDirective.decorators = [
{ type: Directive, args: [{
selector: '[tdMediaToggle]',
},] }
];
/** @nocollapse */
TdMediaToggleDirective.ctorParameters = () => [
{ type: Renderer2 },
{ type: ElementRef },
{ type: TdMediaService }
];
TdMediaToggleDirective.propDecorators = {
query: [{ type: Input, args: ['tdMediaToggle',] }],
attributes: [{ type: Input, args: ['mediaAttributes',] }],
classes: [{ type: Input, args: ['mediaClasses',] }],
styles: [{ type: Input, args: ['mediaStyles',] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/** @type {?} */
const TD_MEDIA = [
TdMediaToggleDirective,
];
class CovalentMediaModule {
}
CovalentMediaModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule,
],
declarations: [
TD_MEDIA,
],
exports: [
TD_MEDIA,
],
providers: [
MEDIA_PROVIDER,
],
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class TdMenuComponent {
}
TdMenuComponent.decorators = [
{ type: Component, args: [{
selector: 'td-menu',
template: "<ng-content select=\"[td-menu-header]\"></ng-content>\n<mat-divider></mat-divider>\n<div class=\"td-menu-content\">\n <ng-content></ng-content>\n</div>\n<mat-divider></mat-divider>\n<ng-content select=\"[td-menu-footer]\"></ng-content>",
styles: [":host{margin-top:-8px;margin-bottom:-8px;-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}:host ::ng-deep [td-menu-header]{padding:8px;text-align:center}:host ::ng-deep mat-list a[mat-list-item].mat-2-line,:host ::ng-deep mat-list mat-list-item.mat-2-line,:host ::ng-deep mat-list[dense] a[mat-list-item].mat-2-line,:host ::ng-deep mat-list[dense] mat-list-item.mat-2-line,:host ::ng-deep mat-nav-list a[mat-list-item].mat-2-line,:host ::ng-deep mat-nav-list mat-list-item.mat-2-line,:host ::ng-deep mat-nav-list[dense] a[mat-list-item].mat-2-line,:host ::ng-deep mat-nav-list[dense] mat-list-item.mat-2-line{height:auto}:host ::ng-deep mat-list a[mat-list-item].mat-2-line .mat-list-item-content,:host ::ng-deep mat-list mat-list-item.mat-2-line .mat-list-item-content,:host ::ng-deep mat-list[dense] a[mat-list-item].mat-2-line .mat-list-item-content,:host ::ng-deep mat-list[dense] mat-list-item.mat-2-line .mat-list-item-content,:host ::ng-deep mat-nav-list a[mat-list-item].mat-2-line .mat-list-item-content,:host ::ng-deep mat-nav-list mat-list-item.mat-2-line .mat-list-item-content,:host ::ng-deep mat-nav-list[dense] a[mat-list-item].mat-2-line .mat-list-item-content,:host ::ng-deep mat-nav-list[dense] mat-list-item.mat-2-line .mat-list-item-content{height:auto;padding:8px}:host ::ng-deep mat-list a[mat-list-item].mat-2-line .mat-list-item-content .mat-list-text,:host ::ng-deep mat-list mat-list-item.mat-2-line .mat-list-item-content .mat-list-text,:host ::ng-deep mat-list[dense] a[mat-list-item].mat-2-line .mat-list-item-content .mat-list-text,:host ::ng-deep mat-list[dense] mat-list-item.mat-2-line .mat-list-item-content .mat-list-text,:host ::ng-deep mat-nav-list a[mat-list-item].mat-2-line .mat-list-item-content .mat-list-text,:host ::ng-deep mat-nav-list mat-list-item.mat-2-line .mat-list-item-content .mat-list-text,:host ::ng-deep mat-nav-list[dense] a[mat-list-item].mat-2-line .mat-list-item-content .mat-list-text,:host ::ng-deep mat-nav-list[dense] mat-list-item.mat-2-line .mat-list-item-content .mat-list-text{padding-right:0}[dir=rtl] :host ::ng-deep mat-list a[mat-list-item].mat-2-line .mat-list-item-content .mat-list-text,[dir=rtl] :host ::ng-deep mat-list mat-list-item.mat-2-line .mat-list-item-content .mat-list-text,[dir=rtl] :host ::ng-deep mat-list[dense] a[mat-list-item].mat-2-line .mat-list-item-content .mat-list-text,[dir=rtl] :host ::ng-deep mat-list[dense] mat-list-item.mat-2-line .mat-list-item-content .mat-list-text,[dir=rtl] :host ::ng-deep mat-nav-list a[mat-list-item].mat-2-line .mat-list-item-content .mat-list-text,[dir=rtl] :host ::ng-deep mat-nav-list mat-list-item.mat-2-line .mat-list-item-content .mat-list-text,[dir=rtl] :host ::ng-deep mat-nav-list[dense] a[mat-list-item].mat-2-line .mat-list-item-content .mat-list-text,[dir=rtl] :host ::ng-deep mat-nav-list[dense] mat-list-item.mat-2-line .mat-list-item-content .mat-list-text{padding-left:0;padding-right:16px}:host ::ng-deep mat-list a[mat-list-item].mat-2-line .mat-list-item-content [matLine]+[matLine],:host ::ng-deep mat-list mat-list-item.mat-2-line .mat-list-item-content [matLine]+[matLine],:host ::ng-deep mat-list[dense] a[mat-list-item].mat-2-line .mat-list-item-content [matLine]+[matLine],:host ::ng-deep mat-list[dense] mat-list-item.mat-2-line .mat-list-item-content [matLine]+[matLine],:host ::ng-deep mat-nav-list a[mat-list-item].mat-2-line .mat-list-item-content [matLine]+[matLine],:host ::ng-deep mat-nav-list mat-list-item.mat-2-line .mat-list-item-content [matLine]+[matLine],:host ::ng-deep mat-nav-list[dense] a[mat-list-item].mat-2-line .mat-list-item-content [matLine]+[matLine],:host ::ng-deep mat-nav-list[dense] mat-list-item.mat-2-line .mat-list-item-content [matLine]+[matLine]{margin-top:4px}.td-menu-content{max-height:calc(50vh);overflow-y:auto}"]
}] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/** @type {?} */
const TD_MENU = [
TdMenuComponent,
];
class CovalentMenuModule {
}
CovalentMenuModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule,
MatMenuModule,
MatDividerModule,
],
declarations: [
TD_MENU,
],
exports: [
TD_MENU,
],
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class TdSearchInputBase {
/**
* @param {?} _changeDetectorRef
*/
constructor(_changeDetectorRef) {
this._changeDetectorRef = _changeDetectorRef;
}
}
/* tslint:disable-next-line */
/** @type {?} */
const _TdSearchInputMixinBase = mixinControlValueAccessor(TdSearchInputBase);
class TdSearchInputComponent extends _TdSearchInputMixinBase {
/**
* @param {?} _dir
* @param {?} _changeDetectorRef
*/
constructor(_dir, _changeDetectorRef) {
super(_changeDetectorRef);
this._dir = _dir;
/**
* showUnderline?: boolean
* Sets if the input underline should be visible. Defaults to 'false'.
*/
this.showUnderline = false;
/**
* debounce?: number
* Debounce timeout between keypresses. Defaults to 400.
*/
this.debounce = 400;
/**
* clearIcon?: string
* The icon used to clear the search input.
* Defaults to 'cancel' icon.
*/
this.clearIcon = 'cancel';
/**
* searchDebounce: function($event)
* Event emitted after the [debounce] timeout.
*/
this.onSearchDebounce = new EventEmitter();
/**
* search: function($event)
* Event emitted after the key enter has been pressed.
*/
this.onSearch = new EventEmitter();
/**
* clear: function()
* Event emitted after the clear icon has been clicked.
*/
this.onClear = new EventEmitter();
/**
* blur: function()
* Event emitted after the blur event has been called in underlying input.
*/
this.onBlur = new EventEmitter();
}
/**
* @return {?}
*/
get isRTL() {
if (this._dir) {
return this._dir.dir === 'rtl';
}
return false;
}
/**
* @return {?}
*/
ngOnInit() {
this._input.ngControl.valueChanges.pipe(debounceTime(this.debounce), skip(1)).subscribe((value) => {
this._searchTermChanged(value);
});
}
/**
* Method to focus to underlying input.
* @return {?}
*/
focus() {
this._input.focus();
}
/**
* @return {?}
*/
handleBlur() {
this.onBlur.emit(undefined);
}
/**
* @param {?} event
* @return {?}
*/
stopPropagation(event) {
event.stopPropagation();
}
/**
* @param {?} event
* @return {?}
*/
handleSearch(event) {
this.stopPropagation(event);
this.onSearch.emit(this.value);
}
/**
* Method to clear the underlying input.
* @return {?}
*/
clearSearch() {
this.value = '';
this._changeDetectorRef.markForCheck();
this.onClear.emit(undefined);
}
/**
* @param {?} value
* @return {?}
*/
_searchTermChanged(value) {
this.onSearchDebounce.emit(value);
}
}
TdSearchInputComponent.decorators = [
{ type: Component, args: [{
providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => TdSearchInputComponent),
multi: true,
}],
selector: 'td-search-input',
template: "<div class=\"td-search-input\">\n <mat-form-field class=\"td-search-input-field\"\n [class.mat-hide-underline]=\"!showUnderline\"\n [appearance]=\"appearance\"\n floatLabel=\"never\">\n <input matInput\n #searchElement\n type=\"search\"\n [(ngModel)]=\"value\"\n [placeholder]=\"placeholder\"\n (blur)=\"handleBlur()\"\n (search)=\"stopPropagation($event)\"\n (keyup.enter)=\"handleSearch($event)\"/>\n <span matSuffix *ngIf=\"appearance === 'fill' || appearance === 'outline' || appearance === 'standard'\">\n <ng-template\n [ngTemplateOutlet]=\"clearButton\">\n </ng-template>\n </span>\n </mat-form-field>\n <ng-template\n *ngIf=\"!appearance || appearance === 'legacy'\"\n [ngTemplateOutlet]=\"clearButton\">\n </ng-template>\n</div>\n<ng-template #clearButton>\n <button mat-icon-button\n class=\"td-search-input-clear\"\n type=\"button\"\n [@searchState]=\"(searchElement.value ? 'show' : (isRTL ? 'hide-left' : 'hide-right'))\"\n (click)=\"clearSearch()\">\n <mat-icon>{{clearIcon}}</mat-icon>\n </button>\n</ng-template>\n",
changeDetection: ChangeDetectionStrategy.OnPush,
inputs: ['value'],
animations: [
trigger('searchState', [
state('hide-left', style({
transform: 'translateX(-150%)',
display: 'none',
})),
state('hide-right', style({
transform: 'translateX(150%)',
display: 'none',
})),
state('show', style({
transform: 'translateX(0%)',
display: 'block',
})),
transition('* => show', animate('200ms ease-in')),
transition('show => *', animate('200ms ease-out')),
]),
],
styles: [":host .td-search-input{overflow-x:hidden;-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline;-ms-flex-line-pack:center;align-content:center;max-width:100%;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}:host .td-search-input .td-search-input-field{-webkit-box-flex:1;-ms-flex:1;flex:1}:host .td-search-input ::ng-deep mat-form-field.mat-form-field-appearance-outline .mat-form-field-wrapper{padding-bottom:0}:host .td-search-input ::ng-deep mat-form-field.mat-form-field-appearance-fill .mat-form-field-wrapper{padding-bottom:0}:host .td-search-input ::ng-deep mat-form-field.mat-form-field-appearance-fill .mat-form-field-wrapper .mat-form-field-flex{height:52px}:host .td-search-input ::ng-deep mat-form-field.mat-form-field-appearance-fill .mat-form-field-wrapper .mat-form-field-underline{bottom:0}:host .td-search-input ::ng-deep mat-form-field.mat-form-field-appearance-standard .mat-form-field-wrapper{padding-bottom:0}:host .td-search-input ::ng-deep mat-form-field.mat-form-field-appearance-standard .mat-form-field-wrapper .mat-form-field-infix{bottom:.4em}:host .td-search-input ::ng-deep mat-form-field.mat-form-field-appearance-standard .mat-form-field-wrapper .mat-form-field-underline{bottom:0}:host .td-search-input ::ng-deep mat-form-field.mat-form-field-appearance-legacy .mat-form-field-infix{-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center}:host .td-search-input ::ng-deep mat-form-field .mat-input-element{caret-color:currentColor}:host .td-search-input ::ng-deep mat-form-field.mat-hide-underline .mat-form-field-underline{display:none}:host .td-search-input .td-search-input-clear{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center}"]
}] }
];
/** @nocollapse */
TdSearchInputComponent.ctorParameters = () => [
{ type: Dir, decorators: [{ type: Optional }] },
{ type: ChangeDetectorRef }
];
TdSearchInputComponent.propDecorators = {
_input: [{ type: ViewChild, args: [MatInput,] }],
appearance: [{ type: Input, args: ['appearance',] }],
showUnderline: [{ type: Input, args: ['showUnderline',] }],
debounce: [{ type: Input, args: ['debounce',] }],
placeholder: [{ type: Input, args: ['placeholder',] }],
clearIcon: [{ type: Input, args: ['clearIcon',] }],
onSearchDebounce: [{ type: Output, args: ['searchDebounce',] }],
onSearch: [{ type: Output, args: ['search',] }],
onClear: [{ type: Output, args: ['clear',] }],
onBlur: [{ type: Output, args: ['blur',] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class TdSearchBoxBase {
/**
* @param {?} _changeDetectorRef
*/
constructor(_changeDetectorRef) {
this._changeDetectorRef = _changeDetectorRef;
}
}
/* tslint:disable-next-line */
/** @type {?} */
const _TdSearchBoxMixinBase = mixinControlValueAccessor(TdSearchBoxBase);
class TdSearchBoxComponent extends _TdSearchBoxMixinBase {
/**
* @param {?} _changeDetectorRef
*/
constructor(_changeDetectorRef) {
super(_changeDetectorRef);
this._searchVisible = false;
/**
* backIcon?: string
* The icon used to close the search toggle, only shown when [alwaysVisible] is false.
* Defaults to 'search' icon.
*/
this.backIcon = 'search';
/**
* searchIcon?: string
* The icon used to open/focus the search toggle.
* Defaults to 'search' icon.
*/
this.searchIcon = 'search';
/**
* clearIcon?: string
* The icon used to clear the search input.
* Defaults to 'cancel' icon.
*/
this.clearIcon = 'cancel';
/**
* showUnderline?: boolean
* Sets if the input underline should be visible. Defaults to 'false'.
*/
this.showUnderline = false;
/**
* debounce?: number
* Debounce timeout between keypresses. Defaults to 400.
*/
this.debounce = 400;
/**
* alwaysVisible?: boolean
* Sets if the input should always be visible. Defaults to 'false'.
*/
this.alwaysVisible = false;
/**
* searchDebounce: function($event)
* Event emitted after the [debounce] timeout.
*/
this.onSearchDebounce = new EventEmitter();
/**
* search: function($event)
* Event emitted after the key enter has been pressed.
*/
this.onSearch = new EventEmitter();
/**
* clear: function()
* Event emitted after the clear icon has been clicked.
*/
this.onClear = new EventEmitter();
/**
* blur: function()
* Event emitted after the blur event has been called in underlying input.
*/
this.onBlur = new EventEmitter();
}
/**
* @return {?}
*/
get searchVisible() {
return this._searchVisible;
}
/**
* Method executed when the search icon is clicked.
* @return {?}
*/
searchClicked() {
if (!this.alwaysVisible && this._searchVisible) {
this.value = '';
this.handleClear();
}
else if (this.alwaysVisible || !this._searchVisible) {
this._searchInput.focus();
}
this.toggleVisibility();
}
/**
* @return {?}
*/
toggleVisibility() {
this._searchVisible = !this._searchVisible;
this._changeDetectorRef.markForCheck();
}
/**
* @param {?} value
* @return {?}
*/
handleSearchDebounce(value) {
this.onSearchDebounce.emit(value);
}
/**
* @param {?} value
* @return {?}
*/
handleSearch(value) {
this.onSearch.emit(value);
}
/**
* @return {?}
*/
handleClear() {
this.onClear.emit(undefined);
}
/**
* @return {?}
*/
handleBlur() {
this.onBlur.emit(undefined);
}
}
TdSearchBoxComponent.decorators = [
{ type: Component, args: [{
providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => TdSearchBoxComponent),
multi: true,
}],
selector: 'td-search-box',
template: "<div class=\"td-search-box\">\n <button mat-icon-button type=\"button\" class=\"td-search-icon\" (click)=\"searchClicked()\">\n <mat-icon *ngIf=\"searchVisible && !alwaysVisible\">{{backIcon}}</mat-icon>\n <mat-icon *ngIf=\"!searchVisible || alwaysVisible\">{{searchIcon}}</mat-icon>\n </button>\n <td-search-input #searchInput\n [@inputState]=\"alwaysVisible || searchVisible\"\n [debounce]=\"debounce\"\n [(ngModel)]=\"value\"\n [showUnderline]=\"showUnderline\"\n [placeholder]=\"placeholder\"\n [clearIcon]=\"clearIcon\"\n (searchDebounce)=\"handleSearchDebounce($event)\"\n (search)=\"handleSearch($event)\"\n (clear)=\"handleClear(); toggleVisibility()\"\n (blur)=\"handleBlur()\">\n </td-search-input>\n</div>\n",
changeDetection: ChangeDetectionStrategy.OnPush,
inputs: ['value'],
animations: [
trigger('inputState', [
state('0', style({
width: '0%',
margin: '0px',
})),
state('1', style({
width: '100%',
margin: AUTO_STYLE,
})),
transition('0 => 1', animate('200ms ease-in')),
transition('1 => 0', animate('200ms ease-out')),
]),
],
styles: [":host{display:block}.td-search-box{-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline;-ms-flex-line-pack:center;align-content:center;max-width:100%;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.td-search-box .td-search-icon{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center}.td-search-box td-search-input{margin-left:12px}::ng-deep [dir=rtl] .td-search-box td-search-input{margin-right:12px;margin-left:0!important}.td-search-box td-search-input ::ng-deep .mat-form.field.mat-form-field-appearance-legacy .mat-form-field-wrapper{padding-bottom:1em}"]
}] }
];
/** @nocollapse */
TdSearchBoxComponent.ctorParameters = () => [
{ type: ChangeDetectorRef }
];
TdSearchBoxComponent.propDecorators = {
_searchInput: [{ type: ViewChild, args: [TdSearchInputComponent,] }],
backIcon: [{ type: Input, args: ['backIcon',] }],
searchIcon: [{ type: Input, args: ['searchIcon',] }],
clearIcon: [{ type: Input, args: ['clearIcon',] }],
showUnderline: [{ type: Input, args: ['showUnderline',] }],
debounce: [{ type: Input, args: ['debounce',] }],
alwaysVisible: [{ type: Input, args: ['alwaysVisible',] }],
placeholder: [{ type: Input, args: ['placeholder',] }],
onSearchDebounce: [{ type: Output, args: ['searchDebounce',] }],
onSearch: [{ type: Output, args: ['search',] }],
onClear: [{ type: Output, args: ['clear',] }],
onBlur: [{ type: Output, args: ['blur',] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class CovalentSearchModule {
}
CovalentSearchModule.decorators = [
{ type: NgModule, args: [{
imports: [
FormsModule,
CommonModule,
MatInputModule,
MatIconModule,
MatButtonModule,
],
declarations: [
TdSearchInputComponent,
TdSearchBoxComponent,
],
exports: [
TdSearchInputComponent,
TdSearchBoxComponent,
],
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class TdBreadcrumbComponent {
/**
* @param {?} _elementRef
* @param {?} _changeDetectorRef
*/
constructor(_elementRef, _changeDetectorRef) {
this._elementRef = _elementRef;
this._changeDetectorRef = _changeDetectorRef;
this._displayCrumb = true;
this._width = 0;
// Sets the icon url shown between breadcrumbs. Defaults to 'chevron_right'
this.separatorIcon = 'chevron_right';
// Should show the right chevron or not before the label
this._displayIcon = true;
}
/**
* @return {?}
*/
get displayCrumb() {
return this._displayCrumb;
}
/**
* Whether to display the crumb or not
* @param {?} shouldDisplay
* @return {?}
*/
set displayCrumb(shouldDisplay) {
this._displayCrumb = shouldDisplay;
this._changeDetectorRef.markForCheck();
}
/**
* Width of the DOM element of the crumb
* @return {?}
*/
get width() {
return this._width;
}
/**
* Gets the display style of the crumb
* @return {?}
*/
get displayBinding() {
// Set the display to none on the component, just in case the end user is hiding
// and showing them instead of the component doing itself for reasons like responsive
return this._displayCrumb ? undefined : 'none';
}
/**
* @return {?}
*/
ngAfterViewInit() {
// set the width from the actual rendered DOM element
setTimeout(() => {
this._width = ((/** @type {?} */ (this._elementRef.nativeElement))).getBoundingClientRect().width;
this._changeDetectorRef.markForCheck();
});
}
/**
* Stop click propagation when clicking on icon
* @param {?} event
* @return {?}
*/
_handleIconClick(event) {
event.stopPropagation();
event.preventDefault();
}
}
TdBreadcrumbComponent.decorators = [
{ type: Component, args: [{
selector: 'td-breadcrumb, a[td-breadcrumb]',
template: "<ng-content></ng-content>\n<mat-icon *ngIf=\"_displayIcon\"\n class=\"td-breadcrumb-separator-icon\"\n [style.cursor]=\"'default'\"\n (click)=\"_handleIconClick($event)\">\n {{separatorIcon}}\n</mat-icon>\n",
/* tslint:disable-next-line */
host: {
class: 'mat-button td-breadcrumb',
},
changeDetection: ChangeDetectionStrategy.OnPush,
styles: [":host.td-breadcrumb{display:inline-block;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:center;align-content:center;max-width:100%;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}:host.td-breadcrumb ::ng-deep>*{margin:0 10px}:host .td-breadcrumb-separator-icon{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle}:host.mat-button{min-width:0;padding:0}"]
}] }
];
/** @nocollapse */
TdBreadcrumbComponent.ctorParameters = () => [
{ type: ElementRef },
{ type: ChangeDetectorRef }
];
TdBreadcrumbComponent.propDecorators = {
displayBinding: [{ type: HostBinding, args: ['style.display',] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class TdBreadcrumbsComponent {
/**
* @param {?} _elementRef
* @param {?} _changeDetectorRef
*/
constructor(_elementRef, _changeDetectorRef) {
this._elementRef = _elementRef;
this._changeDetectorRef = _changeDetectorRef;
this._resizeSubscription = Subscription.EMPTY;
this._widthSubject = new Subject();
this._resizing = false;
// the list of hidden breadcrumbs not shown right now (responsive)
this.hiddenBreadcrumbs = [];
/**
* Sets the icon url shown between breadcrumbs. Defaults to 'chevron_right'.
*/
this.separatorIcon = 'chevron_right';
}
/**
* @return {?}
*/
ngOnInit() {
this._resizeSubscription = merge(fromEvent(window, 'resize').pipe(debounceTime(10)), this._widthSubject.asObservable().pipe(distinctUntilChanged())).subscribe(() => {
if (!this._resizing) {
this._resizing = true;
setTimeout(() => {
this._calculateVisibility();
this._resizing = false;
this._changeDetectorRef.markForCheck();
}, 100);
}
});
}
/**
* @return {?}
*/
ngDoCheck() {
if (this._elementRef && this._elementRef.nativeElement) {
this._widthSubject.next(this.nativeElementWidth);
}
}
/**
* @return {?}
*/
ngAfterContentInit() {
this.setCrumbIcons();
this._changeDetectorRef.markForCheck();
}
/**
* @return {?}
*/
ngOnDestroy() {
this._resizeSubscription.unsubscribe();
}
/*
* Current width of the element container
*/
/**
* @return {?}
*/
get nativeElementWidth() {
/** @type {?} */
let element = ((/** @type {?} */ (this._elementRef.nativeElement)));
// Need to take into account border, margin and padding that might be around all the crumbs
/** @type {?} */
let style$$1 = window.getComputedStyle(element);
/** @type {?} */
let borderLeft = parseInt(style$$1.borderLeft, 10);
/** @type {?} */
let borderRight = parseInt(style$$1.borderRight, 10);
/** @type {?} */
let marginLeft = parseInt(style$$1.marginLeft, 10);
/** @type {?} */
let marginRight = parseInt(style$$1.marginRight, 10);
/** @type {?} */
let paddingLeft = parseInt(style$$1.paddingLeft, 10);
/** @type {?} */
let paddingRight = parseInt(style$$1.paddingRight, 10);
return element.getBoundingClientRect().width - borderLeft - borderRight - marginLeft - marginRight - paddingLeft - paddingRight;
}
/**
* The total count of individual breadcrumbs
* @return {?}
*/
get count() {
return this._breadcrumbs ? this._breadcrumbs.length : 0;
}
/**
* Set the crumb icon separators
* @return {?}
*/
setCrumbIcons() {
/** @type {?} */
let breadcrumbArray = this._breadcrumbs.toArray();
if (breadcrumbArray.length > 0) {
// don't show the icon on the last breadcrumb
breadcrumbArray[breadcrumbArray.length - 1]._displayIcon = false;
}
breadcrumbArray.forEach((breadcrumb) => {
breadcrumb.separatorIcon = this.separatorIcon;
});
}
/**
* @return {?}
*/
_calculateVisibility() {
/** @type {?} */
let crumbsArray = this._breadcrumbs.toArray();
/** @type {?} */
let crumbWidthSum = 0;
/** @type {?} */
let hiddenCrumbs = [];
// loop through crumbs in reverse order to calculate which ones should be removed
for (let i = crumbsArray.length - 1; i >= 0; i--) {
/** @type {?} */
let breadcrumb = crumbsArray[i];
// if crumb exceeds width, then we skip it from the sum and add it into the hiddencrumbs array
// and hide it
if ((crumbWidthSum + breadcrumb.width) > this.nativeElementWidth) {
breadcrumb.displayCrumb = false;
hiddenCrumbs.push(breadcrumb);
}
else {
// else we show it
breadcrumb.displayCrumb = true;
}
crumbWidthSum += breadcrumb.width;
}
this.hiddenBreadcrumbs = hiddenCrumbs;
this._changeDetectorRef.markForCheck();
}
}
TdBreadcrumbsComponent.decorators = [
{ type: Component, args: [{
selector: 'td-breadcrumbs',
template: "<ng-content></ng-content>\n",
/* tslint:disable-next-line */
host: {
class: 'td-breadcrumbs',
},
changeDetection: ChangeDetectionStrategy.OnPush,
styles: [":host{display:block;width:100%}:host.td-breadcrumbs{white-space:nowrap}"]
}] }
];
/** @nocollapse */
TdBreadcrumbsComponent.ctorParameters = () => [
{ type: ElementRef },
{ type: ChangeDetectorRef }
];
TdBreadcrumbsComponent.propDecorators = {
_breadcrumbs: [{ type: ContentChildren, args: [TdBreadcrumbComponent,] }],
separatorIcon: [{ type: Input, args: ['separatorIcon',] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class CovalentBreadcrumbsModule {
}
CovalentBreadcrumbsModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule,
MatIconModule,
],
declarations: [
TdBreadcrumbsComponent,
TdBreadcrumbComponent,
],
exports: [
TdBreadcrumbsComponent,
TdBreadcrumbComponent,
],
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/** @enum {string} */
const StepState = {
None: 'none',
Required: 'required',
Complete: 'complete',
};
class TdStepLabelDirective extends TemplatePortalDirective {
/**
* @param {?} templateRef
* @param {?} viewContainerRef
*/
constructor(templateRef, viewContainerRef) {
super(templateRef, viewContainerRef);
}
}
TdStepLabelDirective.decorators = [
{ type: Directive, args: [{
selector: '[td-step-label]ng-template',
},] }
];
/** @nocollapse */
TdStepLabelDirective.ctorParameters = () => [
{ type: TemplateRef },
{ type: ViewContainerRef }
];
class TdStepActionsDirective extends TemplatePortalDirective {
/**
* @param {?} templateRef
* @param {?} viewContainerRef
*/
constructor(templateRef, viewContainerRef) {
super(templateRef, viewContainerRef);
}
}
TdStepActionsDirective.decorators = [
{ type: Directive, args: [{
selector: '[td-step-actions]ng-template',
},] }
];
/** @nocollapse */
TdStepActionsDirective.ctorParameters = () => [
{ type: TemplateRef },
{ type: ViewContainerRef }
];
class TdStepSummaryDirective extends TemplatePortalDirective {
/**
* @param {?} templateRef
* @param {?} viewContainerRef
*/
constructor(templateRef, viewContainerRef) {
super(templateRef, viewContainerRef);
}
}
TdStepSummaryDirective.decorators = [
{ type: Directive, args: [{
selector: '[td-step-summary]ng-template',
},] }
];
/** @nocollapse */
TdStepSummaryDirective.ctorParameters = () => [
{ type: TemplateRef },
{ type: ViewContainerRef }
];
class TdStepBase {
}
/* tslint:disable-next-line */
/** @type {?} */
const _TdStepMixinBase = mixinDisableRipple(mixinDisabled(TdStepBase));
class TdStepComponent extends _TdStepMixinBase {
/**
* @param {?} _viewContainerRef
*/
constructor(_viewContainerRef) {
super();
this._viewContainerRef = _viewContainerRef;
this._active = false;
this._state = StepState.None;
/**
* activated?: function
* Event emitted when [TdStepComponent] is activated.
*/
this.onActivated = new EventEmitter();
/**
* deactivated?: function
* Event emitted when [TdStepComponent] is deactivated.
*/
this.onDeactivated = new EventEmitter();
}
/**
* @return {?}
*/
get stepContent() {
return this._contentPortal;
}
/**
* active?: boolean
* Toggles [TdStepComponent] between active/deactive.
* @param {?} active
* @return {?}
*/
set active(active) {
this._setActive(coerceBooleanProperty(active));
}
/**
* @return {?}
*/
get active() {
return this._active;
}
/**
* state?: StepState or ['none' | 'required' | 'complete']
* Sets state of [TdStepComponent] depending on value.
* Defaults to [StepState.None | 'none'].
* @param {?} state
* @return {?}
*/
set state(state$$1) {
switch (state$$1) {
case StepState.Complete:
this._state = StepState.Complete;
break;
case StepState.Required:
this._state = StepState.Required;
break;
default:
this._state = StepState.None;
break;
}
}
/**
* @return {?}
*/
get state() {
return this._state;
}
/**
* @return {?}
*/
ngOnInit() {
this._contentPortal = new TemplatePortal(this._content, this._viewContainerRef);
}
/**
* Toggle active state of [TdStepComponent]
* retuns 'true' if successful, else 'false'.
* @return {?}
*/
toggle() {
return this._setActive(!this._active);
}
/**
* Opens [TdStepComponent]
* retuns 'true' if successful, else 'false'.
* @return {?}
*/
open() {
return this._setActive(true);
}
/**
* Closes [TdStepComponent]
* retuns 'true' if successful, else 'false'.
* @return {?}
*/
close() {
return this._setActive(false);
}
/**
* Returns 'true' if [state] equals to [StepState.Complete | 'complete'], else 'false'.
* @return {?}
*/
isComplete() {
return this._state === StepState.Complete;
}
/**
* Method executed when the disabled value changes
* @param {?} v
* @return {?}
*/
onDisabledChange(v) {
if (v && this._active) {
this._active = false;
this._onDeactivated();
}
}
/**
* Method to change active state internally and emit the [onActivated] event if 'true' or [onDeactivated]
* event if 'false'. (Blocked if [disabled] is 'true')
* returns true if successfully changed state
* @param {?} newActive
* @return {?}
*/
_setActive(newActive) {
if (this.disabled) {
return false;
}
if (this._active !== newActive) {
this._active = newActive;
if (newActive) {
this._onActivated();
}
else {
this._onDeactivated();
}
return true;
}
return false;
}
/**
* @return {?}
*/
_onActivated() {
this.onActivated.emit(undefined);
}
/**
* @return {?}
*/
_onDeactivated() {
this.onDeactivated.emit(undefined);
}
}
TdStepComponent.decorators = [
{ type: Component, args: [{
selector: 'td-step',
inputs: ['disabled', 'disableRipple'],
template: "<ng-template>\n <ng-content></ng-content>\n</ng-template>"
}] }
];
/** @nocollapse */
TdStepComponent.ctorParameters = () => [
{ type: ViewContainerRef }
];
TdStepComponent.propDecorators = {
_content: [{ type: ViewChild, args: [TemplateRef,] }],
stepLabel: [{ type: ContentChild, args: [TdStepLabelDirective,] }],
stepActions: [{ type: ContentChild, args: [TdStepActionsDirective,] }],
stepSummary: [{ type: ContentChild, args: [TdStepSummaryDirective,] }],
label: [{ type: Input, args: ['label',] }],
sublabel: [{ type: Input, args: ['sublabel',] }],
active: [{ type: Input, args: ['active',] }],
state: [{ type: Input, args: ['state',] }],
onActivated: [{ type: Output, args: ['activated',] }],
onDeactivated: [{ type: Output, args: ['deactivated',] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/** @enum {string} */
const StepMode = {
Vertical: 'vertical',
Horizontal: 'horizontal',
};
class TdStepsComponent {
constructor() {
this._mode = StepMode.Vertical;
/**
* stepChange?: function
* Method to be executed when [onStepChange] event is emitted.
* Emits an [IStepChangeEvent] implemented object.
*/
this.onStepChange = new EventEmitter();
}
/**
* @param {?} steps
* @return {?}
*/
set stepsContent(steps) {
if (steps) {
this._steps = steps;
this._registerSteps();
}
}
/**
* @return {?}
*/
get steps() {
return this._steps.toArray();
}
/**
* mode?: StepMode or ["vertical" | "horizontal"]
* Defines if the mode of the [TdStepsComponent]. Defaults to [StepMode.Vertical | "vertical"]
* @param {?} mode
* @return {?}
*/
set mode(mode) {
switch (mode) {
case StepMode.Horizontal:
this._mode = StepMode.Horizontal;
break;
default:
this._mode = StepMode.Vertical;
}
}
/**
* @return {?}
*/
get mode() {
return this._mode;
}
/**
* Executed after content is initialized, loops through any [TdStepComponent] children elements,
* assigns them a number and subscribes as an observer to their [onActivated] event.
* @return {?}
*/
ngAfterContentInit() {
this._registerSteps();
}
/**
* Unsubscribes from [TdStepComponent] children elements when component is destroyed.
* @return {?}
*/
ngOnDestroy() {
this._deregisterSteps();
}
/**
* Returns 'true' if [mode] equals to [StepMode.Horizontal | 'horizontal'], else 'false'.
* @return {?}
*/
isHorizontal() {
return this._mode === StepMode.Horizontal;
}
/**
* Returns 'true' if [mode] equals to [StepMode.Vertical | 'vertical'], else 'false'.
* @return {?}
*/
isVertical() {
return this._mode === StepMode.Vertical;
}
/**
* @return {?}
*/
areStepsActive() {
return this._steps.filter((step) => {
return step.active;
}).length > 0;
}
/**
* Wraps previous and new [TdStepComponent] numbers in an object that implements [IStepChangeEvent]
* and emits [onStepChange] event.
* @param {?} step
* @return {?}
*/
_onStepSelection(step) {
if (this.prevStep !== step) {
/** @type {?} */
let prevStep = this.prevStep;
this.prevStep = step;
/** @type {?} */
let event = {
newStep: step,
prevStep: prevStep,
};
this._deactivateAllBut(step);
this.onStepChange.emit(event);
}
}
/**
* Loops through [TdStepComponent] children elements and deactivates them ignoring the one passed as an argument.
* @param {?} activeStep
* @return {?}
*/
_deactivateAllBut(activeStep) {
this._steps.filter((step) => step !== activeStep)
.forEach((step) => {
step.active = false;
});
}
/**
* @return {?}
*/
_registerSteps() {
this._subcriptions = [];
this._steps.toArray().forEach((step) => {
/** @type {?} */
let subscription = step.onActivated.asObservable().subscribe(() => {
this._onStepSelection(step);
});
this._subcriptions.push(subscription);
});
}
/**
* @return {?}
*/
_deregisterSteps() {
if (this._subcriptions) {
this._subcriptions.forEach((subs) => {
subs.unsubscribe();
});
this._subcriptions = undefined;
}
}
}
TdStepsComponent.decorators = [
{ type: Component, args: [{
selector: 'td-steps',
template: "<div *ngIf=\"isHorizontal()\" class=\"td-steps-header\">\n <ng-template let-step let-index=\"index\" let-last=\"last\" ngFor [ngForOf]=\"steps\">\n <td-step-header class=\"td-step-horizontal-header\"\n (keydown.enter)=\"step.open()\"\n [number]=\"index + 1\"\n [active]=\"step.active\"\n [disableRipple]=\"step.disableRipple\"\n [disabled]=\"step.disabled\" \n [state]=\"step.state\"\n (click)=\"step.open()\">\n <ng-template td-step-header-label [cdkPortalOutlet]=\"step.stepLabel\"></ng-template>\n <ng-template td-step-header-label [ngIf]=\"!step.stepLabel\">{{step.label}}</ng-template>\n <ng-template td-step-header-sublabel [ngIf]=\"true\">{{step.sublabel | truncate:30}}</ng-template>\n </td-step-header>\n <span *ngIf=\"!last\" class=\"td-horizontal-line\"></span>\n </ng-template>\n</div>\n<div *ngFor=\"let step of steps; let index = index; let last = last\" class=\"td-step\">\n <td-step-header class=\"td-step-vertical-header\"\n (keydown.enter)=\"step.toggle()\"\n [number]=\"index + 1\"\n [active]=\"step.active\" \n [disabled]=\"step.disabled\"\n [disableRipple]=\"step.disableRipple\"\n [state]=\"step.state\"\n (click)=\"step.toggle()\"\n *ngIf=\"isVertical()\">\n <ng-template td-step-header-label [cdkPortalOutlet]=\"step.stepLabel\"></ng-template>\n <ng-template td-step-header-label [ngIf]=\"!step.stepLabel\">{{step.label}}</ng-template>\n <ng-template td-step-header-sublabel [ngIf]=\"true\">{{step.sublabel}}</ng-template>\n </td-step-header>\n <ng-template [ngIf]=\"isVertical() || step.active || (!areStepsActive() && prevStep === step)\">\n <td-step-body [active]=\"step.active\" [state]=\"step.state\">\n <div *ngIf=\"isVertical()\" class=\"td-line-wrapper\">\n <div *ngIf=\"!last\" class=\"td-vertical-line\"></div>\n </div>\n <ng-template td-step-body-content [cdkPortalOutlet]=\"step.stepContent\"></ng-template>\n <ng-template td-step-body-actions [cdkPortalOutlet]=\"step.stepActions\"></ng-template>\n <ng-template td-step-body-summary [cdkPortalOutlet]=\"step.stepSummary\"></ng-template>\n </td-step-body>\n </ng-template>\n</div>\n",
/* tslint:disable-next-line */
host: {
class: 'td-steps',
},
styles: [".td-line-wrapper,.td-step{position:relative}.td-steps-header{-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.td-line-wrapper{width:24px;min-height:1px}.td-horizontal-line{border-bottom-width:1px;border-bottom-style:solid;height:1px;position:relative;top:36px;min-width:15px;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-sizing:border-box;box-sizing:border-box}::ng-deep :not([dir=rtl]) .td-horizontal-line{left:-6px;right:-3px}::ng-deep [dir=rtl] .td-horizontal-line{left:-3px;right:-6px}.td-vertical-line{position:absolute;bottom:-16px;top:-16px;border-left-width:1px;border-left-style:solid}::ng-deep :not([dir=rtl]) .td-vertical-line{left:20px;right:auto}::ng-deep [dir=rtl] .td-vertical-line{left:auto;right:20px}"]
}] }
];
TdStepsComponent.propDecorators = {
stepsContent: [{ type: ContentChildren, args: [TdStepComponent,] }],
mode: [{ type: Input, args: ['mode',] }],
onStepChange: [{ type: Output, args: ['stepChange',] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class TdStepHeaderBase {
}
/* tslint:disable-next-line */
/** @type {?} */
const _TdStepHeaderMixinBase = mixinDisableRipple(mixinDisabled(TdStepHeaderBase));
class TdStepHeaderComponent extends _TdStepHeaderMixinBase {
constructor() {
super(...arguments);
/**
* state?: StepState or ['none' | 'required' | 'complete']
* Sets styles for state of header.
* Defaults to [StepState.None | 'none'].
*/
this.state = StepState.None;
}
/**
* Returns 'true' if [state] equals to [StepState.Complete | 'complete'], else 'false'.
* @return {?}
*/
isComplete() {
return this.state === StepState.Complete;
}
/**
* Returns 'true' if [state] equals to [StepState.Required | 'required'], else 'false'.
* @return {?}
*/
isRequired() {
return this.state === StepState.Required;
}
}
TdStepHeaderComponent.decorators = [
{ type: Component, args: [{
selector: 'td-step-header',
inputs: ['disabled', 'disableRipple'],
template: "<div class=\"td-step-header\"\n [class.mat-disabled]=\"disabled\"\n matRipple\n [matRippleDisabled]=\"disabled || disableRipple\"\n [tabIndex]=\"disabled ? -1 : (tabIndex || 0)\">\n <div class=\"td-circle\"\n [class.mat-inactive]=\"(!active && !isComplete()) || disabled\"\n [class.mat-active]=\"active && !disabled\"\n *ngIf=\"!isRequired() && !isComplete()\">\n <span *ngIf=\"(active || !isComplete())\">{{number || ''}}</span>\n </div>\n <div class=\"td-complete\" *ngIf=\"isComplete()\">\n <mat-icon class=\"mat-complete\">check_circle</mat-icon>\n </div>\n <div class=\"td-triangle\"\n [class.bg-muted]=\"disabled\"\n *ngIf=\"isRequired()\">\n <mat-icon class=\"mat-warn\">warning</mat-icon>\n </div>\n <div class=\"td-step-label-wrapper\"\n [class.mat-inactive]=\"(!active && !isComplete()) || disabled\"\n [class.mat-warn]=\"isRequired() && !disabled\">\n <div class=\"td-step-label\">\n <ng-content select=\"[td-step-header-label]\"></ng-content>\n </div>\n <div class=\"td-step-sublabel\">\n <ng-content select=\"[td-step-header-sublabel]\"></ng-content>\n </div>\n </div>\n <span class=\"td-step-header-separator\"></span>\n <mat-icon class=\"td-edit-icon\" *ngIf=\"isComplete() && !active && !disabled\">mode_edit</mat-icon>\n</div>",
styles: [".td-step-header{position:relative;outline:0;min-width:120px;height:72px;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:center;align-content:center;max-width:100%}.td-step-header:hover:not(.mat-disabled){cursor:pointer}.td-step-header mat-icon.td-edit-icon{margin:0 8px}.td-step-header mat-icon.mat-warn{font-size:24px;height:24px;width:24px}.td-step-header mat-icon.mat-complete{position:relative;left:-2px;top:2px;font-size:28px;height:24px;width:24px}.td-step-header .td-circle{height:24px;width:24px;line-height:24px;border-radius:99%;text-align:center;-webkit-box-flex:0;-ms-flex:none;flex:none}.td-step-header .td-circle mat-icon{margin-top:2px;font-weight:700}.td-step-header .td-triangle>mat-icon{font-size:25px}::ng-deep :not([dir=rtl]) .td-step-header .td-circle,::ng-deep :not([dir=rtl]) .td-step-header .td-complete,::ng-deep :not([dir=rtl]) .td-step-header .td-triangle{margin-left:8px;margin-right:0}::ng-deep [dir=rtl] .td-step-header .td-circle,::ng-deep [dir=rtl] .td-step-header .td-complete,::ng-deep [dir=rtl] .td-step-header .td-triangle{margin-left:0;margin-right:8px}.td-step-header .td-circle,.td-step-header .td-complete{font-size:14px}.td-step-header .td-step-label-wrapper{padding-left:8px;padding-right:8px}.td-step-header .td-step-header-separator{-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-sizing:border-box;box-sizing:border-box}"]
}] }
];
TdStepHeaderComponent.propDecorators = {
number: [{ type: Input, args: ['number',] }],
active: [{ type: Input, args: ['active',] }],
state: [{ type: Input, args: ['state',] }],
tabIndex: [{ type: Input, args: ['tabIndex',] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class TdStepBodyComponent {
constructor() {
/**
* state?: StepState or ['none' | 'required' | 'complete']
* Sets styles for state of body.
* Defaults to [StepState.None | 'none'].
*/
this.state = StepState.None;
}
/**
* @return {?}
*/
get hasContent() {
return this.contentRef &&
(this.contentRef.nativeElement.children.length > 0 || !!this.contentRef.nativeElement.textContent.trim());
}
/**
* @return {?}
*/
get hasActions() {
return this.actionsRef &&
(this.actionsRef.nativeElement.children.length > 0 || !!this.actionsRef.nativeElement.textContent.trim());
}
/**
* @return {?}
*/
get hasSummary() {
return this.summaryRef &&
(this.summaryRef.nativeElement.children.length > 0 || !!this.summaryRef.nativeElement.textContent.trim());
}
/**
* Returns 'true' if [state] equals to [StepState.Complete | 'complete'], else 'false'.
* @return {?}
*/
isComplete() {
return this.state === StepState.Complete;
}
}
TdStepBodyComponent.decorators = [
{ type: Component, args: [{
selector: 'td-step-body',
template: "<ng-content></ng-content>\n<div class=\"td-step-body\">\n <div class=\"td-step-content-wrapper\"\n [@tdCollapse]=\"!active\">\n <div #contentRef cdkScrollable [class.td-step-content]=\"hasContent\">\n <ng-content select=\"[td-step-body-content]\"></ng-content>\n </div>\n <div #actionsRef\n [class.td-step-actions]=\"hasActions\">\n <ng-content select=\"[td-step-body-actions]\"></ng-content>\n </div>\n </div>\n <div #summaryRef\n [@tdCollapse]=\"active || !isComplete()\"\n [class.td-step-summary]=\"hasSummary\">\n <ng-content select=\"[td-step-body-summary]\"></ng-content>\n </div>\n</div>",
animations: [
tdCollapseAnimation,
],
styles: [":host{-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}:host .td-step-body{overflow-x:hidden;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-sizing:border-box;box-sizing:border-box}:host .td-step-body .td-step-content-wrapper.ng-animating,:host .td-step-body .td-step-summary.ng-animating{overflow:hidden}:host .td-step-body .td-step-content{overflow-x:auto}:host .td-step-body .td-step-actions{-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}"]
}] }
];
TdStepBodyComponent.propDecorators = {
contentRef: [{ type: ViewChild, args: ['contentRef', { read: ElementRef },] }],
actionsRef: [{ type: ViewChild, args: ['actionsRef', { read: ElementRef },] }],
summaryRef: [{ type: ViewChild, args: ['summaryRef', { read: ElementRef },] }],
active: [{ type: Input, args: ['active',] }],
state: [{ type: Input, args: ['state',] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class TdNavStepLinkComponent extends _TdStepMixinBase {
/**
* @param {?} _changeDetectorRef
* @param {?} elementRef
*/
constructor(_changeDetectorRef, elementRef) {
super();
this._changeDetectorRef = _changeDetectorRef;
this.elementRef = elementRef;
this._active = false;
this._state = StepState.None;
}
/**
* state?: StepState or ['none' | 'required' | 'complete']
* Sets state of component depending on value.
* Defaults to [StepState.None | 'none'].
* @param {?} state
* @return {?}
*/
set state(state$$1) {
switch (state$$1) {
case StepState.Complete:
this._state = StepState.Complete;
break;
case StepState.Required:
this._state = StepState.Required;
break;
default:
this._state = StepState.None;
break;
}
}
/**
* @return {?}
*/
get state() {
return this._state;
}
/**
* active?: boolean
* Toggles component between active/deactive.
* @param {?} active
* @return {?}
*/
set active(active) {
this._active = coerceBooleanProperty(active);
this._changeDetectorRef.markForCheck();
}
/**
* @return {?}
*/
get active() {
return this._active;
}
/**
* @param {?} click
* @return {?}
*/
_handleClick(click) {
if (this.disabled) {
click.preventDefault();
click.stopImmediatePropagation();
}
}
}
TdNavStepLinkComponent.decorators = [
{ type: Component, args: [{
selector: '[td-step-link],[tdStepLink]',
template: "<td-step-header class=\"td-step-header-wrapper\"\n [tabIndex]=\"-1\"\n [number]=\"number\"\n [active]=\"active\"\n [disableRipple]=\"disableRipple || disabled\"\n [disabled]=\"disabled\" \n [state]=\"state\">\n <ng-template td-step-header-label [ngIf]=\"true\">{{label}}</ng-template>\n <ng-template td-step-header-sublabel [ngIf]=\"true\">{{sublabel | truncate:30}}</ng-template>\n <ng-content></ng-content>\n</td-step-header>",
inputs: ['disabled', 'disableRipple'],
changeDetection: ChangeDetectionStrategy.OnPush,
/* tslint:disable-next-line */
host: {
'[class.td-step-link]': 'true',
'[attr.tabindex]': 'disabled ? -1 : (tabIndex || 0)',
'[attr.disabled]': 'disabled || null',
'[class.mat-disabled]': 'disabled || null',
'(click)': '_handleClick($event)',
},
styles: [":host{-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:center;align-content:center;max-width:100%;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}:host.mat-disabled{pointer-events:none}:host .td-step-header-wrapper{width:100%}"]
}] }
];
/** @nocollapse */
TdNavStepLinkComponent.ctorParameters = () => [
{ type: ChangeDetectorRef },
{ type: ElementRef }
];
TdNavStepLinkComponent.propDecorators = {
state: [{ type: Input, args: ['state',] }],
label: [{ type: Input, args: ['label',] }],
sublabel: [{ type: Input, args: ['sublabel',] }],
active: [{ type: Input, args: ['active',] }],
tabIndex: [{ type: Input, args: ['tabIndex',] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class TdNavStepsHorizontalComponent {
/**
* @param {?} _elementRef
* @param {?} _viewportRuler
* @param {?} _dir
* @param {?} _renderer
* @param {?} _changeDetectorRef
*/
constructor(_elementRef, _viewportRuler, _dir, _renderer, _changeDetectorRef) {
this._elementRef = _elementRef;
this._viewportRuler = _viewportRuler;
this._dir = _dir;
this._renderer = _renderer;
this._changeDetectorRef = _changeDetectorRef;
this._separators = [];
/**
* Emits when the component is destroyed.
*/
this._destroyed = new Subject();
this._widthSubject = new Subject();
this._scrollDistance = 0;
this._scrollDistanceChanged = false;
/**
* Whether the controls for pagination should be displayed
*/
this._showPaginationControls = false;
/**
* Whether the step list can be scrolled more towards the end.
*/
this._disableScrollAfter = true;
/**
* Whether the step list can be scrolled more towards the beginning.
*/
this._disableScrollBefore = true;
}
/*
* Current width of the element container
*/
/**
* @return {?}
*/
get nativeElementWidth() {
/** @type {?} */
let element = ((/** @type {?} */ (this._elementRef.nativeElement)));
// Need to take into account border, margin and padding that might be around all the crumbs
/** @type {?} */
let style$$1 = window.getComputedStyle(element);
/** @type {?} */
let borderLeft = parseInt(style$$1.borderLeft, 10);
/** @type {?} */
let borderRight = parseInt(style$$1.borderRight, 10);
/** @type {?} */
let marginLeft = parseInt(style$$1.marginLeft, 10);
/** @type {?} */
let marginRight = parseInt(style$$1.marginRight, 10);
/** @type {?} */
let paddingLeft = parseInt(style$$1.paddingLeft, 10);
/** @type {?} */
let paddingRight = parseInt(style$$1.paddingRight, 10);
return element.getBoundingClientRect().width - borderLeft - borderRight - marginLeft - marginRight - paddingLeft - paddingRight;
}
/**
* @return {?}
*/
ngAfterContentInit() {
merge(this._widthSubject.asObservable().pipe(distinctUntilChanged()), this._viewportRuler.change(150), this._dir ? this._dir.change : of(undefined), this._steps.changes).pipe(takeUntil(this._destroyed)).subscribe(() => {
this._configureSteps();
this.updatePagination();
this._changeDetectorRef.markForCheck();
});
this._configureSteps();
this._changeDetectorRef.markForCheck();
}
/**
* @return {?}
*/
ngAfterContentChecked() {
if (this._elementRef && this._elementRef.nativeElement) {
this._widthSubject.next(this.nativeElementWidth);
}
if (this._scrollDistanceChanged) {
this._updateStepScrollPosition();
this._scrollDistanceChanged = false;
this._changeDetectorRef.markForCheck();
}
}
/**
* @return {?}
*/
ngOnDestroy() {
this._destroyed.next();
this._destroyed.complete();
}
/**
* Listen to right and left key events to move the the viewport.
* @param {?} event
* @return {?}
*/
_handleKeydown(event) {
switch (event.keyCode) {
case LEFT_ARROW:
this._scrollHeader('before');
event.preventDefault();
break;
case RIGHT_ARROW:
this._scrollHeader('after');
event.preventDefault();
break;
default:
// do something
}
}
/**
* Updates the view whether pagination should be enabled or not.
* @return {?}
*/
updatePagination() {
this._checkPaginationEnabled();
this._checkScrollingControls();
this._updateStepScrollPosition();
}
/**
* The layout direction of the containing app.
* @return {?}
*/
_getLayoutDirection() {
return this._dir && this._dir.value === 'rtl' ? 'rtl' : 'ltr';
}
/**
* Performs the CSS transformation on the step list that will cause the list to scroll.
* @return {?}
*/
_updateStepScrollPosition() {
/** @type {?} */
const translateX = this._getLayoutDirection() === 'ltr' ? -this.scrollDistance : this.scrollDistance;
// Move step list the amount of pixels scrolled
this._stepList.nativeElement.style.transform = `translateX(${Math.round(translateX)}px)`;
// Setting the `transform` on IE will change the scroll offset of the parent, causing the
// position to be thrown off in some cases. We have to reset it ourselves to ensure that
// it doesn't get thrown off.
if (this._getLayoutDirection() === 'ltr') {
this._stepListContainer.nativeElement.scrollLeft = 0;
}
else {
this._stepListContainer.nativeElement.scrollLeft = this._getMaxScrollDistance();
}
}
/**
* Sets the distance in pixels that the step header should be transformed in the X-axis.
* @return {?}
*/
get scrollDistance() { return this._scrollDistance; }
/**
* @param {?} v
* @return {?}
*/
set scrollDistance(v) {
this._scrollDistance = Math.max(0, Math.min(this._getMaxScrollDistance(), v));
// Mark that the scroll distance has changed so that after the view is checked, the CSS
// transformation can move the header.
this._scrollDistanceChanged = true;
this._checkScrollingControls();
}
/**
* Moves the step list in the 'before' or 'after' direction (towards the beginning of the list or
* the end of the list, respectively).
* @param {?} scrollDir
* @return {?}
*/
_scrollHeader(scrollDir) {
// Move the scroll distance one-half the length of the step list's viewport.
this.scrollDistance += (scrollDir === 'before' ? -1 : 1) * this._stepListContainer.nativeElement.offsetWidth / 2;
}
/**
* Evaluate whether the pagination controls should be displayed. If the scroll width of the
* step list is wider than the size of the header container, then the pagination controls should
* be shown.
* @return {?}
*/
_checkPaginationEnabled() {
/** @type {?} */
const isEnabled = this._stepList.nativeElement.scrollWidth > this._elementRef.nativeElement.offsetWidth;
if (!isEnabled) {
this.scrollDistance = 0;
}
if (isEnabled !== this._showPaginationControls) {
this._changeDetectorRef.markForCheck();
}
this._showPaginationControls = isEnabled;
}
/**
* Evaluate whether the before and after controls should be enabled or disabled.
* If the header is at the beginning of the list (scroll distance is equal to 0) then disable the
* before button. If the header is at the end of the list (scroll distance is equal to the
* maximum distance we can scroll), then disable the after button.
* @return {?}
*/
_checkScrollingControls() {
// Check if the pagination arrows should be activated.
this._disableScrollBefore = this.scrollDistance === 0;
this._disableScrollAfter = this.scrollDistance === this._getMaxScrollDistance();
this._changeDetectorRef.markForCheck();
}
/**
* Determines what is the maximum length in pixels that can be set for the scroll distance. This
* is equal to the difference in width between the step list container and step header container.
* @return {?}
*/
_getMaxScrollDistance() {
return (this._stepList.nativeElement.scrollWidth - this._stepListContainer.nativeElement.offsetWidth) || 0;
}
/**
* Set the step line separators and display numbers
* @return {?}
*/
_configureSteps() {
this._separators.forEach((separator) => {
this._renderer.removeChild(this._stepList.nativeElement, separator);
});
/** @type {?} */
let stepsArray = this._steps.toArray();
// set the index number of the step so can display that number in circle
stepsArray.forEach((step, index) => {
if (index > 0 && index < stepsArray.length) {
/** @type {?} */
let separator = this._renderer.createElement('div');
this._renderer.addClass(separator, 'td-horizontal-line');
this._separators.push(separator);
this._renderer.insertBefore(this._stepList.nativeElement, separator, step.elementRef.nativeElement);
}
step.number = index + 1;
});
}
}
TdNavStepsHorizontalComponent.decorators = [
{ type: Component, args: [{
selector: 'nav[td-steps][horizontal]',
template: "<div class=\"td-steps-header\">\n <div class=\"td-step-header-pagination td-step-header-pagination-before mat-elevation-z4\"\n aria-hidden=\"true\"\n mat-ripple [matRippleDisabled]=\"_disableScrollBefore\"\n [class.td-step-header-pagination-disabled]=\"_disableScrollBefore\"\n (click)=\"_scrollHeader('before')\">\n <div class=\"td-step-header-pagination-chevron\"></div>\n </div>\n <div #stepListContainer class=\"td-steps-header-container\" (keydown)=\"_handleKeydown($event)\">\n <div #stepList class=\"td-steps-header-list\">\n <ng-content></ng-content>\n </div>\n </div>\n <div class=\"td-step-header-pagination td-step-header-pagination-after mat-elevation-z4\"\n aria-hidden=\"true\"\n mat-ripple [matRippleDisabled]=\"_disableScrollAfter\"\n [class.td-step-header-pagination-disabled]=\"_disableScrollAfter\"\n (click)=\"_scrollHeader('after')\">\n <div class=\"td-step-header-pagination-chevron\"></div>\n </div>\n</div>\n",
changeDetection: ChangeDetectionStrategy.OnPush,
/* tslint:disable-next-line */
host: {
class: 'td-steps td-steps-horizontal',
'[class.td-step-header-pagination-controls-enabled]': '_showPaginationControls',
'[class.td-step-header-rtl]': "_getLayoutDirection() == 'rtl'",
},
styles: [":host{width:100%;display:block}.td-steps-header,.td-steps-header-list{-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.td-steps-header-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;overflow:hidden;z-index:1}.td-steps-header-list{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;position:relative;-webkit-transition:-webkit-transform .5s cubic-bezier(.35,0,.25,1);transition:transform .5s cubic-bezier(.35,0,.25,1),-webkit-transform .5s cubic-bezier(.35,0,.25,1);-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:center;align-content:center;max-width:100%;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.td-step-header-pagination{position:relative;display:none;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-width:32px;cursor:pointer;z-index:2}:host.td-step-header-pagination-controls-enabled .td-step-header-pagination{display:-webkit-box;display:-ms-flexbox;display:flex}.td-step-header-pagination-before,:host.td-step-header-rtl .td-step-header-pagination-after{padding-left:4px}.td-step-header-pagination-before .td-step-header-pagination-chevron,:host.td-step-header-rtl .td-step-header-pagination-after .td-step-header-pagination-chevron{-webkit-transform:rotate(-135deg);-ms-transform:rotate(-135deg);transform:rotate(-135deg)}.td-step-header-pagination-after,:host.td-step-header-rtl .td-step-header-pagination-before{padding-right:4px}.td-step-header-pagination-after .td-step-header-pagination-chevron,:host.td-step-header-rtl .td-step-header-pagination-before .td-step-header-pagination-chevron{-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.td-step-header-pagination-chevron{border-style:solid;border-width:2px 2px 0 0;content:'';height:8px;width:8px}.td-step-header-pagination-disabled{-webkit-box-shadow:none;box-shadow:none;cursor:default}.td-horizontal-line{border-bottom-width:1px;border-bottom-style:solid;height:1px;min-width:20px;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-sizing:border-box;box-sizing:border-box}"]
}] }
];
/** @nocollapse */
TdNavStepsHorizontalComponent.ctorParameters = () => [
{ type: ElementRef },
{ type: ViewportRuler },
{ type: Directionality, decorators: [{ type: Optional }] },
{ type: Renderer2 },
{ type: ChangeDetectorRef }
];
TdNavStepsHorizontalComponent.propDecorators = {
_steps: [{ type: ContentChildren, args: [TdNavStepLinkComponent,] }],
_stepListContainer: [{ type: ViewChild, args: ['stepListContainer',] }],
_stepList: [{ type: ViewChild, args: ['stepList',] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class TdNavStepsVerticalComponent {
/**
* @param {?} _renderer
* @param {?} _changeDetectorRef
*/
constructor(_renderer, _changeDetectorRef) {
this._renderer = _renderer;
this._changeDetectorRef = _changeDetectorRef;
this._separators = [];
/**
* Emits when the component is destroyed.
*/
this._destroyed = new Subject();
}
/**
* @return {?}
*/
ngAfterContentInit() {
this._steps.changes.pipe(takeUntil(this._destroyed)).subscribe(() => {
this._configureSteps();
this._changeDetectorRef.markForCheck();
});
this._configureSteps();
this._changeDetectorRef.markForCheck();
}
/**
* @return {?}
*/
ngOnDestroy() {
this._destroyed.next();
this._destroyed.complete();
}
/**
* Set the step line separators and display numbers
* @return {?}
*/
_configureSteps() {
this._separators.forEach((separator) => {
this._renderer.removeChild(this._stepList.nativeElement, separator);
});
/** @type {?} */
let stepsArray = this._steps.toArray();
// set the index number of the step so can display that number in circle
stepsArray.forEach((step, index) => {
if (index > 0 && index < stepsArray.length) {
/** @type {?} */
let separator = this._renderer.createElement('div');
this._renderer.addClass(separator, 'td-vertical-line-wrapper');
/** @type {?} */
let separatorChild = this._renderer.createElement('div');
this._renderer.addClass(separatorChild, 'td-vertical-line');
this._renderer.appendChild(separator, separatorChild);
this._separators.push(separator);
this._renderer.insertBefore(this._stepList.nativeElement, separator, step.elementRef.nativeElement);
}
step.number = index + 1;
});
}
}
TdNavStepsVerticalComponent.decorators = [
{ type: Component, args: [{
selector: 'nav[td-steps][vertical]',
template: "<div class=\"td-steps-header\">\n <div class=\"td-steps-header-container\">\n <div #stepList class=\"td-steps-header-list\">\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n ",
changeDetection: ChangeDetectionStrategy.OnPush,
/* tslint:disable-next-line */
host: {
class: 'td-steps td-steps-vertical',
},
styles: [".td-vertical-line-wrapper{position:relative}.td-vertical-line-wrapper .td-vertical-line{position:absolute;top:-16px;height:34px;border-left-width:1px;border-left-style:solid}::ng-deep :not([dir=rtl]) .td-vertical-line-wrapper .td-vertical-line{left:20px;right:auto}::ng-deep [dir=rtl] .td-vertical-line-wrapper .td-vertical-line{left:auto;right:20px}"]
}] }
];
/** @nocollapse */
TdNavStepsVerticalComponent.ctorParameters = () => [
{ type: Renderer2 },
{ type: ChangeDetectorRef }
];
TdNavStepsVerticalComponent.propDecorators = {
_steps: [{ type: ContentChildren, args: [TdNavStepLinkComponent,] }],
_stepList: [{ type: ViewChild, args: ['stepList',] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/** @type {?} */
const TD_STEPS = [
TdStepsComponent,
TdStepComponent,
TdStepHeaderComponent,
TdStepBodyComponent,
TdStepLabelDirective,
TdStepActionsDirective,
TdStepSummaryDirective,
TdNavStepsHorizontalComponent,
TdNavStepsVerticalComponent,
TdNavStepLinkComponent,
];
class CovalentStepsModule {
}
CovalentStepsModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule,
MatIconModule,
MatRippleModule,
PortalModule,
ScrollDispatchModule,
CovalentCommonModule,
],
declarations: [
TD_STEPS,
],
exports: [
TD_STEPS,
],
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class TdTabOptionBase {
/**
* @param {?} _viewContainerRef
* @param {?} _changeDetectorRef
*/
constructor(_viewContainerRef, _changeDetectorRef) {
this._viewContainerRef = _viewContainerRef;
this._changeDetectorRef = _changeDetectorRef;
}
}
/* tslint:disable-next-line */
/** @type {?} */
const _TdTabOptionMixinBase = mixinDisabled(TdTabOptionBase);
class TdTabOptionComponent extends _TdTabOptionMixinBase {
/**
* @param {?} _viewContainerRef
* @param {?} _changeDetectorRef
*/
constructor(_viewContainerRef, _changeDetectorRef) {
super(_viewContainerRef, _changeDetectorRef);
}
/**
* @return {?}
*/
get content() {
return this._contentPortal;
}
/**
* @return {?}
*/
ngOnInit() {
this._contentPortal = new TemplatePortal(this._content, this._viewContainerRef);
}
}
TdTabOptionComponent.decorators = [
{ type: Component, args: [{
selector: 'td-tab-option',
template: "<ng-template>\n <ng-content></ng-content>\n</ng-template>\n",
changeDetection: ChangeDetectionStrategy.OnPush,
/* tslint:disable-next-line */
inputs: ['disabled'],
styles: [""]
}] }
];
/** @nocollapse */
TdTabOptionComponent.ctorParameters = () => [
{ type: ViewContainerRef },
{ type: ChangeDetectorRef }
];
TdTabOptionComponent.propDecorators = {
_content: [{ type: ViewChild, args: [TemplateRef,] }],
value: [{ type: Input, args: ['value',] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class TdTabSelectBase {
/**
* @param {?} _changeDetectorRef
*/
constructor(_changeDetectorRef) {
this._changeDetectorRef = _changeDetectorRef;
}
}
/* tslint:disable-next-line */
/** @type {?} */
const _TdTabSelectMixinBase = mixinControlValueAccessor(mixinDisabled(mixinDisableRipple(TdTabSelectBase)));
class TdTabSelectComponent extends _TdTabSelectMixinBase {
/**
* @param {?} _changeDetectorRef
*/
constructor(_changeDetectorRef) {
super(_changeDetectorRef);
this._subs = [];
this._values = [];
this._selectedIndex = 0;
this._stretchTabs = false;
/**
* Event that emits whenever the raw value of the select changes. This is here primarily
* to facilitate the two-way binding for the `value` input.
*/
this.valueChange = new EventEmitter();
}
/**
* @return {?}
*/
get selectedIndex() {
return this._selectedIndex;
}
/**
* @return {?}
*/
get tabOptions() {
return this._tabOptions ? this._tabOptions.toArray() : undefined;
}
/**
* Makes the tabs stretch to fit the parent container.
* @param {?} stretchTabs
* @return {?}
*/
set stretchTabs(stretchTabs) {
this._stretchTabs = coerceBooleanProperty(stretchTabs);
}
/**
* @return {?}
*/
get stretchTabs() {
return this._stretchTabs;
}
/**
* @return {?}
*/
ngOnInit() {
// subscribe to check if value changes and update the selectedIndex internally.
this._subs.push(this.valueChanges.subscribe((value) => {
this._setValue(value);
}));
}
/**
* @return {?}
*/
ngAfterContentInit() {
// subscribe to listen to any tab changes.
this._refreshValues();
this._subs.push(this._tabOptions.changes.subscribe(() => {
this._refreshValues();
}));
// initialize value
Promise.resolve().then(() => {
this._setValue(this.value);
});
}
/**
* @return {?}
*/
ngOnDestroy() {
if (this._subs && this._subs.length) {
this._subs.forEach((sub) => {
sub.unsubscribe();
});
}
}
/**
* Method executed when user selects a different tab
* This updates the new selectedIndex and infers what value should be mapped to.
* @param {?} selectedIndex
* @return {?}
*/
selectedIndexChange(selectedIndex) {
this._selectedIndex = selectedIndex;
/** @type {?} */
let value = this._values[selectedIndex];
this.value = value;
this.valueChange.emit(value);
this.onChange(value);
}
/**
* Refresh the values array whenever the number of tabs gets updated
* @return {?}
*/
_refreshValues() {
this._values = this.tabOptions.map((tabOption) => {
return tabOption.value;
});
this._changeDetectorRef.markForCheck();
}
/**
* Try to set value depending if its part of our options
* else set the value of the first tab.
* @param {?} value
* @return {?}
*/
_setValue(value) {
/** @type {?} */
let index = this._values.indexOf(value);
if (index > -1) {
this._selectedIndex = index;
}
else {
this.value = this._values.length ? this._values[0] : undefined;
this._selectedIndex = 0;
}
this._changeDetectorRef.markForCheck();
}
}
TdTabSelectComponent.decorators = [
{ type: Component, args: [{
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => TdTabSelectComponent),
multi: true,
}],
selector: 'td-tab-select',
template: "<mat-tab-group [attr.mat-stretch-tabs]=\"stretchTabs ? true : undefined\"\n [backgroundColor]=\"backgroundColor\"\n [color]=\"color\"\n [disableRipple]=\"disableRipple\"\n [selectedIndex]=\"selectedIndex\"\n (selectedIndexChange)=\"selectedIndexChange($event)\">\n <ng-template let-tabOption\n ngFor\n [ngForOf]=\"tabOptions\">\n <mat-tab [disabled]=\"tabOption.disabled || disabled\">\n <ng-template matTabLabel>\n <ng-template *ngIf=\"tabOption.content\" [cdkPortalOutlet]=\"tabOption.content\">\n </ng-template>\n </ng-template>\n </mat-tab>\n </ng-template>\n</mat-tab-group>\n",
/* tslint:disable-next-line */
inputs: ['value', 'disabled', 'disableRipple'],
styles: [":host::ng-deep>.mat-tab-group>.mat-tab-body-wrapper{display:none}"]
}] }
];
/** @nocollapse */
TdTabSelectComponent.ctorParameters = () => [
{ type: ChangeDetectorRef }
];
TdTabSelectComponent.propDecorators = {
_tabOptions: [{ type: ContentChildren, args: [TdTabOptionComponent,] }],
stretchTabs: [{ type: Input, args: ['stretchTabs',] }],
color: [{ type: Input, args: ['color',] }],
backgroundColor: [{ type: Input, args: ['backgroundColor',] }],
valueChange: [{ type: Output }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class CovalentTabSelectModule {
}
CovalentTabSelectModule.decorators = [
{ type: NgModule, args: [{
declarations: [
TdTabSelectComponent,
TdTabOptionComponent,
],
// directives, components, and pipes owned by this NgModule
imports: [
/** Angular Modules */
CommonModule,
FormsModule,
/** Material Modules */
PortalModule,
MatTabsModule,
],
// modules needed to run this module
exports: [
TdTabSelectComponent,
TdTabOptionComponent,
],
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
export { CovalentPagingModule, TdPagingBarComponent, CovalentVirtualScrollModule, TdVirtualScrollContainerComponent, TdVirtualScrollRowDirective, CovalentNotificationsModule, TdNotificationCountPositionY, TdNotificationCountPositionX, DEFAULT_NOTIFICATION_LIMIT, TdNotificationCountComponent, CovalentCommonModule$1 as CovalentCommonModule, tdRotateAnimation$1 as tdRotateAnimation, tdCollapseAnimation$1 as tdCollapseAnimation, tdFadeInOutAnimation$1 as tdFadeInOutAnimation, tdBounceAnimation, tdFlashAnimation, tdHeadshakeAnimation, tdJelloAnimation, tdPulseAnimation, mixinControlValueAccessor$1 as mixinControlValueAccessor, mixinDisabled$1 as mixinDisabled, mixinDisableRipple$1 as mixinDisableRipple, TdAutoTrimDirective, CovalentValidators, TdTimeAgoPipe, TdTimeDifferencePipe, TdBytesPipe, TdDigitsPipe, TdTruncatePipe, TdDecimalBytesPipe, CovalentMessageModule, TdMessageContainerDirective, TdMessageComponent, CovalentChipsModule, TdChipDirective, TdAutocompleteOptionDirective, TdChipsBase, _TdChipsMixinBase, TdChipsComponent, CovalentDataTableModule, TdDataTableSortingOrder, TdDataTableBase, _TdDataTableMixinBase, TdDataTableComponent, TdDataTableCellComponent, TdDataTableColumnComponent, TdDataTableColumnRowComponent, TdDataTableRowComponent, TdDataTableTableComponent, TdDataTableTemplateDirective, DATA_TABLE_PROVIDER_FACTORY, TdDataTableService, DATA_TABLE_PROVIDER, CovalentDialogsModule, TdDialogTitleDirective, TdDialogContentDirective, TdDialogActionsDirective, TdDialogComponent, TdAlertDialogComponent, TdConfirmDialogComponent, TdPromptDialogComponent, TdDialogService, CovalentExpansionPanelModule, TdExpansionPanelHeaderDirective, TdExpansionPanelLabelDirective, TdExpansionPanelSublabelDirective, TdExpansionPanelSummaryComponent, TdExpansionPanelBase, _TdExpansionPanelMixinBase, TdExpansionPanelComponent, TdExpansionPanelGroupComponent, CovalentFileModule, TdFileDropBase, _TdFileDropMixinBase, TdFileDropDirective, TdFileSelectDirective, TdFileInputLabelDirective, TdFileInputBase, _TdFileInputMixinBase, TdFileInputComponent, TdFileUploadBase, _TdFileUploadMixinBase, TdFileUploadComponent, TdFileService, CovalentJsonFormatterModule, TdJsonFormatterComponent, CovalentLayoutModule, TdLayoutComponent, TdLayoutToggleDirective, TdLayoutCloseDirective, TdLayoutOpenDirective, LayoutToggleBase, _TdLayoutToggleMixinBase, LayoutToggle, TdLayoutCardOverComponent, TdLayoutFooterComponent, TdLayoutManageListComponent, TdLayoutManageListToggleDirective, TdLayoutManageListCloseDirective, TdLayoutManageListOpenDirective, TdLayoutNavComponent, TdLayoutNavListComponent, TdLayoutNavListToggleDirective, TdLayoutNavListCloseDirective, TdLayoutNavListOpenDirective, TdNavigationDrawerMenuDirective, TdNavigationDrawerToolbarDirective, TdNavigationDrawerComponent, CovalentLoadingModule, LoadingType, LoadingMode, LoadingStrategy, LoadingStyle, TD_CIRCLE_DIAMETER, TdLoadingComponent, TdLoadingContext, TdLoadingDirective, LOADING_PROVIDER_FACTORY, TdLoadingConfig, TdLoadingDirectiveConfig, TdLoadingService, LOADING_PROVIDER, LOADING_FACTORY_PROVIDER_FACTORY, TdLoadingFactory, LOADING_FACTORY_PROVIDER, CovalentMediaModule, TdMediaToggleDirective, MEDIA_PROVIDER_FACTORY, TdMediaService, MEDIA_PROVIDER, CovalentMenuModule, TdMenuComponent, CovalentSearchModule, TdSearchBoxBase, _TdSearchBoxMixinBase, TdSearchBoxComponent, TdSearchInputBase, _TdSearchInputMixinBase, TdSearchInputComponent, CovalentBreadcrumbsModule, TdBreadcrumbsComponent, CovalentStepsModule, StepState, TdStepLabelDirective, TdStepActionsDirective, TdStepSummaryDirective, TdStepBase, _TdStepMixinBase, TdStepComponent, StepMode, TdStepsComponent, TdStepBodyComponent, TdStepHeaderBase, _TdStepHeaderMixinBase, TdStepHeaderComponent, CovalentTabSelectModule, TdTabSelectBase, _TdTabSelectMixinBase, TdTabSelectComponent, TdTabOptionBase, _TdTabOptionMixinBase, TdTabOptionComponent, TdBreadcrumbComponent as ɵe, TdFullscreenDirective as ɵa, TdTimeUntilPipe as ɵb, IconService as ɵd, RouterPathService as ɵc, TdNavStepLinkComponent as ɵg, TdNavStepsHorizontalComponent as ɵf, TdNavStepsVerticalComponent as ɵh };
//# sourceMappingURL=covalent-core.js.map