@nuarch/dynamic-forms
Version:
Teradata UI Platform Dynamic Forms Module
923 lines (908 loc) • 916 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('rxjs/operators'), require('@angular/material'), require('lodash'), require('@angular/forms'), require('@angular/cdk/portal'), require('@covalent/core/common'), require('@covalent/core/media'), require('@angular/common'), require('@angular/material/input'), require('@angular/material/select'), require('@angular/material/checkbox'), require('@angular/material/slider'), require('@angular/material/slide-toggle'), require('@angular/material/icon'), require('@angular/material/button'), require('@angular/material/datepicker'), require('@angular/material/autocomplete'), require('@covalent/core/file'), require('@covalent/core/message'), require('@covalent/core')) :
typeof define === 'function' && define.amd ? define('@nuarch/dynamic-forms', ['exports', '@angular/core', 'rxjs', 'rxjs/operators', '@angular/material', 'lodash', '@angular/forms', '@angular/cdk/portal', '@covalent/core/common', '@covalent/core/media', '@angular/common', '@angular/material/input', '@angular/material/select', '@angular/material/checkbox', '@angular/material/slider', '@angular/material/slide-toggle', '@angular/material/icon', '@angular/material/button', '@angular/material/datepicker', '@angular/material/autocomplete', '@covalent/core/file', '@covalent/core/message', '@covalent/core'], factory) :
(factory((global.nuarch = global.nuarch || {}, global.nuarch['dynamic-forms'] = {}),global.ng.core,global.rxjs,global.rxjs.operators,global.ng.material,global.lodash,global.ng.forms,global.ng.cdk.portal,global.covalent.core.common,global.covalent.core.media,global.ng.common,global.ng.material.input,global.ng.material.select,global.ng.material.checkbox,global.ng.material.slider,global.ng.material['slide-toggle'],global.ng.material.icon,global.ng.material.button,global.ng.material.datepicker,global.ng.material.autocomplete,global.covalent.core.file,global.covalent.core.message,global.covalent.core));
}(this, (function (exports,core,rxjs,operators,material,lodash,forms,portal,common,media,common$1,input,select,checkbox,slider,slideToggle,icon,button,datepicker,autocomplete,file,message,core$1) { 'use strict';
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
/* global Reflect, Promise */
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b)
if (b.hasOwnProperty(p))
d[p] = b[p]; };
return extendStatics(d, b);
};
function __extends(d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
var __assign = function () {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s)
if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
var TdDynamicSelectComponent = /** @class */ (function () {
function TdDynamicSelectComponent() {
this.label = '';
this.hint = '';
this.name = '';
this.required = undefined;
this.selections = undefined;
this.multiple = undefined;
this.errorMessageTemplate = undefined;
}
Object.defineProperty(TdDynamicSelectComponent.prototype, "isAsyncSelections", {
get: /**
* @return {?}
*/ function () {
return this.selections instanceof rxjs.Observable;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TdDynamicSelectComponent.prototype, "asyncSelections", {
get: /**
* @return {?}
*/ function () {
return ( /** @type {?} */(this.selections));
},
enumerable: true,
configurable: true
});
TdDynamicSelectComponent.decorators = [
{ type: core.Component, args: [{
selector: 'td-dynamic-select',
template: "<div class=\"td-dynamic-select-wrapper\">\r\n <mat-form-field class=\"td-dynamic-select-field\">\r\n <mat-select [formControl]=\"control\"\r\n [placeholder]=\"label\"\r\n [required]=\"required\"\r\n [attr.name]=\"name\"\r\n [multiple]=\"multiple\">\r\n <mat-option *ngFor=\"let selection of (isAsyncSelections ? (asyncSelections | async) : selections)\"\r\n [value]=\"selection.value || selection\">{{selection.label || selection}}</mat-option>\r\n </mat-select>\r\n <mat-hint>{{hint}}</mat-hint>\r\n <mat-error>\r\n <ng-template\r\n [ngTemplateOutlet]=\"errorMessageTemplate\"\r\n [ngTemplateOutletContext]=\"{control: control, errors: control?.errors}\">\r\n </ng-template>\r\n </mat-error>\r\n </mat-form-field>\r\n</div>\r\n",
styles: [".td-dynamic-select-wrapper{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;display:-webkit-box;display:-ms-flexbox;display:flex;box-sizing:border-box}.td-dynamic-select-wrapper .td-dynamic-select-field{-webkit-box-flex:1;-ms-flex:1;flex:1;box-sizing:border-box}"]
}] }
];
return TdDynamicSelectComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
var TdDynamicAutocompleteComponent = /** @class */ (function (_super) {
__extends(TdDynamicAutocompleteComponent, _super);
function TdDynamicAutocompleteComponent() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.showMore = false;
_this.maximumOptions = 10;
return _this;
}
/**
* @return {?}
*/
TdDynamicAutocompleteComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
var _this = this;
this._filteredSelections = this.filterSelections(this.control.value);
// tslint:disable-next-line:no-any
this.control.valueChanges.subscribe(function (value) {
_this._filteredSelections = _this.filterSelections(value);
});
};
// tslint:disable-next-line:no-any
// tslint:disable-next-line:no-any
/**
* @param {?} value
* @return {?}
*/
TdDynamicAutocompleteComponent.prototype.filterSelections =
// tslint:disable-next-line:no-any
/**
* @param {?} value
* @return {?}
*/
function (value) {
var _this = this;
if (!value) {
return this.selections;
}
if (this.selections instanceof rxjs.Observable) {
// tslint:disable-next-line:no-any
return this.selections.pipe(operators.map(function (selections) { return lodash.filter(selections, function (selection) { return _this.isValueMatched(selection, value); }); }));
}
else {
// tslint:disable-next-line:no-any
return lodash.filter(this.selections, (function (selection) { return _this.isValueMatched(selection, value); }));
}
};
/**
* @param {?} $event
* @return {?}
*/
TdDynamicAutocompleteComponent.prototype.setShowMore = /**
* @param {?} $event
* @return {?}
*/
function ($event) {
$event.preventDefault();
$event.stopPropagation();
this.showMore = true;
};
/**
* @return {?}
*/
TdDynamicAutocompleteComponent.prototype.resetShowMore = /**
* @return {?}
*/
function () {
this.showMore = false;
};
Object.defineProperty(TdDynamicAutocompleteComponent.prototype, "filteredSelections", {
get: /**
* @return {?}
*/ function () {
return this._filteredSelections instanceof rxjs.Observable ? this._filteredSelections : rxjs.of(this._filteredSelections);
},
enumerable: true,
configurable: true
});
/**
* @param {?} index
* @param {?} numberOfOptions
* @return {?}
*/
TdDynamicAutocompleteComponent.prototype.showButton = /**
* @param {?} index
* @param {?} numberOfOptions
* @return {?}
*/
function (index, numberOfOptions) {
return (index === (this.maximumOptions - 1)) && !this.showMore && (numberOfOptions > this.maximumOptions);
};
Object.defineProperty(TdDynamicAutocompleteComponent.prototype, "truncatedSelections", {
get: /**
* @return {?}
*/ function () {
var _this = this;
return this.filteredSelections.pipe(operators.filter(function (selection) { return !!selection; }), operators.map(function (selection) {
return _this.showMore ? selection.slice() : selection.slice(0, _this.maximumOptions);
}));
},
enumerable: true,
configurable: true
});
// tslint:disable-next-line:no-any
// tslint:disable-next-line:no-any
/**
* @param {?} selection
* @param {?} value
* @return {?}
*/
TdDynamicAutocompleteComponent.prototype.isValueMatched =
// tslint:disable-next-line:no-any
/**
* @param {?} selection
* @param {?} value
* @return {?}
*/
function (selection, value) {
if (selection.deleted) {
return false;
}
if (!value) {
return true;
}
if (typeof selection !== 'string') {
if (typeof value === 'string') {
return selection.label.toLowerCase().includes(value.toLowerCase());
}
else {
return selection.label.toLowerCase().includes(value.label.toLowerCase());
}
}
else {
return selection.toLowerCase().includes(value.toLowerCase());
}
};
/**
* @param {?} selection
* @return {?}
*/
TdDynamicAutocompleteComponent.prototype.autocompleteDisplay = /**
* @param {?} selection
* @return {?}
*/
function (selection) {
return !!selection && selection.label ? selection.label : selection;
};
/**
* @param {?} control
* @return {?}
*/
TdDynamicAutocompleteComponent.prototype.clear = /**
* @param {?} control
* @return {?}
*/
function (control) {
var _this = this;
control.patchValue('', { emitEvent: true });
setTimeout(function () {
_this.trigger.openPanel();
});
};
TdDynamicAutocompleteComponent.decorators = [
{ type: core.Component, args: [{
selector: 'td-dynamic-autocomplete',
template: "<div class=\"td-dynamic-autocomplete-wrapper\">\r\n <mat-form-field class=\"td-dynamic-autocomplete-field\">\r\n <input matInput #trigger\r\n [matAutocomplete]=\"auto\"\r\n [formControl]=\"control\"\r\n [placeholder]=\"label\"\r\n [required]=\"required\"/>\r\n <mat-hint>{{hint}}</mat-hint>\r\n <button mat-button *ngIf=\"control?.value && control?.enabled\" matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"clear(control);\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n <mat-autocomplete #auto=\"matAutocomplete\" [displayWith]=\"autocompleteDisplay\"\r\n (closed)=\"resetShowMore()\">\r\n <ng-container *ngFor=\"let selection of truncatedSelections | async; let i = index; let l = count;\">\r\n <mat-option [value]=\"selection\">\r\n <span>{{selection.label || selection}}</span>\r\n </mat-option>\r\n <button mat-button *ngIf=\"showButton(i, (filteredSelections | async)?.length)\"\r\n (click)=\"setShowMore($event)\" class=\"show-more\">\r\n <mat-icon class=\"icon\">expand_more</mat-icon>\r\n Show More\r\n </button>\r\n </ng-container>\r\n </mat-autocomplete>\r\n <mat-error>\r\n <ng-template\r\n [ngTemplateOutlet]=\"errorMessageTemplate\"\r\n [ngTemplateOutletContext]=\"{control: control, errors: control?.errors}\">\r\n </ng-template>\r\n </mat-error>\r\n </mat-form-field>\r\n</div>\r\n",
styles: [".td-dynamic-autocomplete-wrapper{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;display:-webkit-box;display:-ms-flexbox;display:flex;box-sizing:border-box}.td-dynamic-autocomplete-wrapper .td-dynamic-autocomplete-field{-webkit-box-flex:1;-ms-flex:1;flex:1;box-sizing:border-box}"]
}] }
];
TdDynamicAutocompleteComponent.propDecorators = {
trigger: [{ type: core.ViewChild, args: ['trigger', { read: material.MatAutocompleteTrigger },] }]
};
return TdDynamicAutocompleteComponent;
}(TdDynamicSelectComponent));
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
var TdDynamicAutocompleteDynamicListComponent = /** @class */ (function (_super) {
__extends(TdDynamicAutocompleteDynamicListComponent, _super);
function TdDynamicAutocompleteDynamicListComponent() {
return _super !== null && _super.apply(this, arguments) || this;
}
Object.defineProperty(TdDynamicAutocompleteDynamicListComponent.prototype, "isAsyncSelections", {
get: /**
* @return {?}
*/ function () {
return this.selections instanceof rxjs.Observable;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TdDynamicAutocompleteDynamicListComponent.prototype, "asyncSelections", {
get: /**
* @return {?}
*/ function () {
return ( /** @type {?} */(this.selections));
},
enumerable: true,
configurable: true
});
/**
* @param {?} selection
* @return {?}
*/
TdDynamicAutocompleteDynamicListComponent.prototype.autocompleteDisplay = /**
* @param {?} selection
* @return {?}
*/
function (selection) {
return !!selection && selection.value ? selection.value : selection;
};
/**
* @param {?} control
* @return {?}
*/
TdDynamicAutocompleteDynamicListComponent.prototype.clear = /**
* @param {?} control
* @return {?}
*/
function (control) {
var _this = this;
control.patchValue('', { emitEvent: true });
setTimeout(function () {
_this.trigger.openPanel();
});
};
TdDynamicAutocompleteDynamicListComponent.decorators = [
{ type: core.Component, args: [{
selector: 'td-dynamic-autocomplete-dynamic-list',
template: "<div class=\"td-dynamic-autocomplete-wrapper\">\r\n <mat-form-field class=\"td-dynamic-autocomplete-field\">\r\n <input matInput #trigger\r\n [matAutocomplete]=\"auto\"\r\n [formControl]=\"control\"\r\n [placeholder]=\"label\"\r\n [required]=\"required\"/>\r\n <mat-hint>{{hint}}</mat-hint>\r\n <button mat-button *ngIf=\"control?.value && control?.enabled\" matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"clear(control);\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n <mat-autocomplete #auto=\"matAutocomplete\" [displayWith]=\"autocompleteDisplay\">\r\n <ng-container *ngFor=\"let selection of (isAsyncSelections ? (asyncSelections | async) : selections)\">\r\n <mat-option [value]=\"selection\">\r\n <span>{{selection.label || selection}}</span>\r\n </mat-option>\r\n </ng-container>\r\n </mat-autocomplete>\r\n <mat-error>\r\n <ng-template\r\n [ngTemplateOutlet]=\"errorMessageTemplate\"\r\n [ngTemplateOutletContext]=\"{control: control, errors: control?.errors}\">\r\n </ng-template>\r\n </mat-error>\r\n </mat-form-field>\r\n</div>\r\n",
styles: [".td-dynamic-autocomplete-wrapper{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;display:-webkit-box;display:-ms-flexbox;display:flex;box-sizing:border-box}.td-dynamic-autocomplete-wrapper .td-dynamic-autocomplete-field{-webkit-box-flex:1;-ms-flex:1;flex:1;box-sizing:border-box}"]
}] }
];
TdDynamicAutocompleteDynamicListComponent.propDecorators = {
trigger: [{ type: core.ViewChild, args: ['trigger', { read: material.MatAutocompleteTrigger },] }]
};
return TdDynamicAutocompleteDynamicListComponent;
}(TdDynamicSelectComponent));
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
var TdDynamicCheckboxComponent = /** @class */ (function () {
function TdDynamicCheckboxComponent() {
this.label = '';
this.name = '';
this.hint = '';
this.required = false;
}
TdDynamicCheckboxComponent.decorators = [
{ type: core.Component, args: [{
selector: 'td-dynamic-checkbox',
template: "<div class=\"td-dynamic-checkbox-wrapper\">\r\n <mat-checkbox [formControl]=\"control\"\r\n [name]=\"name\"\r\n [required]=\"required\">\r\n {{label}}\r\n </mat-checkbox>\r\n <span class=\"mat-hint td-dynamic-element-hint\">{{hint}}</span>\r\n</div>",
styles: [""]
}] }
];
return TdDynamicCheckboxComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
var TdDynamicDatepickerComponent = /** @class */ (function () {
function TdDynamicDatepickerComponent() {
this.label = '';
this.hint = '';
this.name = '';
this.type = undefined;
this.required = undefined;
this.min = undefined;
this.max = undefined;
this.errorMessageTemplate = undefined;
}
/**
* @param {?} control
* @return {?}
*/
TdDynamicDatepickerComponent.prototype.clear = /**
* @param {?} control
* @return {?}
*/
function (control) {
control.patchValue('', { emitEvent: true });
};
TdDynamicDatepickerComponent.decorators = [
{ type: core.Component, args: [{
selector: 'td-dynamic-datepicker',
template: "<div class=\"td-dynamic-datepicker-wrapper\">\r\n <mat-form-field class=\"td-dynamic-datepicker-field\">\r\n <input #elementInput\r\n matInput\r\n [matDatepicker]=\"dynamicDatePicker\"\r\n readonly\r\n [formControl]=\"control\"\r\n [placeholder]=\"label\"\r\n [required]=\"required\"\r\n [name]=\"name\"\r\n [min]=\"min\"\r\n [max]=\"max\"/>\r\n <mat-hint>{{hint}}</mat-hint>\r\n <button mat-button *ngIf=\"control?.value && control?.enabled\" matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"clear(control);\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n <mat-error>\r\n <ng-template\r\n [ngTemplateOutlet]=\"errorMessageTemplate\"\r\n [ngTemplateOutletContext]=\"{control: control, errors: control?.errors}\">\r\n </ng-template>\r\n </mat-error>\r\n <mat-datepicker-toggle matSuffix [for]=\"dynamicDatePicker\"></mat-datepicker-toggle>\r\n <mat-datepicker #dynamicDatePicker></mat-datepicker>\r\n </mat-form-field>\r\n</div>\r\n",
styles: [".td-dynamic-datepicker-wrapper{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;display:-webkit-box;display:-ms-flexbox;display:flex;box-sizing:border-box}.td-dynamic-datepicker-wrapper .td-dynamic-datepicker-field{-webkit-box-flex:1;-ms-flex:1;flex:1;box-sizing:border-box}"]
}] }
];
return TdDynamicDatepickerComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
var TdDynamicFileInputComponent = /** @class */ (function () {
function TdDynamicFileInputComponent() {
this.required = undefined;
this.label = '';
this.name = '';
this.hint = '';
this.errorMessageTemplate = undefined;
}
/**
* @param {?} value
* @return {?}
*/
TdDynamicFileInputComponent.prototype._handlefileDrop = /**
* @param {?} value
* @return {?}
*/
function (value) {
this.control.setValue(value);
};
TdDynamicFileInputComponent.decorators = [
{ type: core.Component, args: [{
selector: 'td-dynamic-file-input',
template: "<div class=\"td-dynamic-file-input-wrapper\">\r\n <mat-form-field tdFileDrop\r\n class=\"td-dynamic-file-input-field\"\r\n floatLabel=\"never\"\r\n [disabled]=\"control?.disabled\"\r\n (fileDrop)=\"_handlefileDrop($event)\"\r\n (click)=\"!control?.disabled && fileInput.inputElement.click()\"\r\n (keyup.enter)=\"!control?.disabled && fileInput.inputElement.click()\"\r\n (keyup.delete)=\"fileInput.clear()\"\r\n (keyup.backspace)=\"fileInput.clear()\">\r\n <input matInput\r\n [value]=\"control?.value?.name\"\r\n [placeholder]=\"label\"\r\n [attr.name]=\"name\"\r\n [disabled]=\"control?.disabled\"\r\n readonly/>\r\n <mat-hint>{{hint}}</mat-hint>\r\n <mat-error>\r\n <ng-template\r\n [ngTemplateOutlet]=\"errorMessageTemplate\"\r\n [ngTemplateOutletContext]=\"{control: control, errors: control?.errors}\">\r\n </ng-template>\r\n </mat-error>\r\n </mat-form-field>\r\n <button mat-icon-button *ngIf=\"control.value\" (click)=\"fileInput.clear()\" (keyup.enter)=\"fileInput.clear()\">\r\n <mat-icon>cancel</mat-icon>\r\n </button>\r\n <td-file-input class=\"td-file-input\"\r\n #fileInput\r\n [formControl]=\"control\">\r\n <mat-icon>folder</mat-icon>\r\n <span>{{ label }}</span>\r\n </td-file-input>\r\n</div>",
styles: [".td-dynamic-file-input-wrapper{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;display:-webkit-box;display:-ms-flexbox;display:flex;box-sizing:border-box}.td-dynamic-file-input-wrapper .td-dynamic-file-input-field{-webkit-box-flex:1;-ms-flex:1;flex:1;box-sizing:border-box}.td-file-input{margin-left:10px}"]
}] }
];
return TdDynamicFileInputComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
var TdDynamicInputComponent = /** @class */ (function () {
function TdDynamicInputComponent() {
this.label = '';
this.hint = '';
this.type = undefined;
this.required = undefined;
this.name = '';
this.min = undefined;
this.max = undefined;
this.minLength = undefined;
this.maxLength = undefined;
this.errorMessageTemplate = undefined;
}
TdDynamicInputComponent.decorators = [
{ type: core.Component, args: [{
selector: 'td-dynamic-input',
template: "<div class=\"td-dynamic-input-wrapper\">\r\n <mat-form-field class=\"td-dynamic-input-field\">\r\n <input #elementInput\r\n matInput\r\n [formControl]=\"control\"\r\n [placeholder]=\"label\"\r\n [type]=\"type\"\r\n [required]=\"required\"\r\n [attr.name]=\"name\"\r\n [attr.min]=\"min\"\r\n [attr.max]=\"max\"\r\n [attr.minLength]=\"minLength\"\r\n [attr.maxLength]=\"maxLength\"/>\r\n <mat-hint>{{hint}}</mat-hint>\r\n <mat-error>\r\n <ng-template\r\n [ngTemplateOutlet]=\"errorMessageTemplate\"\r\n [ngTemplateOutletContext]=\"{control: control, errors: control?.errors}\">\r\n </ng-template>\r\n </mat-error>\r\n </mat-form-field>\r\n</div>\r\n",
styles: [".td-dynamic-input-wrapper{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;display:-webkit-box;display:-ms-flexbox;display:flex;box-sizing:border-box}.td-dynamic-input-wrapper .td-dynamic-input-field{-webkit-box-flex:1;-ms-flex:1;flex:1;box-sizing:border-box}"]
}] }
];
return TdDynamicInputComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
var TdDynamicSlideToggleComponent = /** @class */ (function () {
function TdDynamicSlideToggleComponent() {
this.label = '';
this.name = '';
this.hint = '';
this.required = false;
}
TdDynamicSlideToggleComponent.decorators = [
{ type: core.Component, args: [{
selector: 'td-dynamic-slide-toggle',
template: "<div class=\"td-dynamic-slide-toggle-wrapper\">\r\n <mat-slide-toggle [formControl]=\"control\"\r\n [attr.name]=\"name\"\r\n [required]=\"required\">\r\n {{label}}\r\n </mat-slide-toggle>\r\n <span class=\"mat-hint td-dynamic-element-hint\">{{hint}}</span>\r\n</div>",
styles: [""]
}] }
];
return TdDynamicSlideToggleComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
var TdDynamicSliderComponent = /** @class */ (function () {
function TdDynamicSliderComponent(_changeDetectorRef) {
this._changeDetectorRef = _changeDetectorRef;
this.label = '';
this.required = undefined;
this.name = '';
this.hint = '';
this.min = undefined;
this.max = undefined;
}
/**
* @return {?}
*/
TdDynamicSliderComponent.prototype._handleBlur = /**
* @return {?}
*/
function () {
var _this = this;
setTimeout(function () {
_this._changeDetectorRef.markForCheck();
});
};
TdDynamicSliderComponent.decorators = [
{ type: core.Component, args: [{
selector: 'td-dynamic-slider',
template: "<div class=\"td-dynamic-slider-wrapper mat-form-field mat-form-field-can-float mat-form-field-should-float\"\r\n [class.mat-focused]=\"slider._isActive\">\r\n <span class=\"mat-form-field-label-wrapper\">\r\n <label class=\"mat-form-field-label mat-primary td-slider-label\">\r\n {{label}}\r\n <span *ngIf=\"required && !control?.disabled\" class=\"mat-form-field-required-marker\">*</span>\r\n </label>\r\n </span>\r\n <div class=\"td-dynamic-slider-field\">\r\n <mat-slider #slider\r\n class=\"td-dynamic-slider\"\r\n [formControl]=\"control\"\r\n [attr.name]=\"name\"\r\n [min]=\"min\"\r\n [max]=\"max\"\r\n thumbLabel\r\n tickInterval=\"auto\"\r\n [required]=\"required\"\r\n (blur)=\"_handleBlur()\">\r\n </mat-slider>\r\n </div> \r\n <span class=\"mat-hint td-dynamic-element-hint\">{{hint}}</span>\r\n</div>",
styles: [":host .td-dynamic-slider-wrapper{display:block}.td-dynamic-slider-field{position:relative;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;display:-webkit-box;display:-ms-flexbox;display:flex;box-sizing:border-box}.td-dynamic-slider-field .td-dynamic-slider{-webkit-box-flex:1;-ms-flex:1;flex:1}"]
}] }
];
/** @nocollapse */
TdDynamicSliderComponent.ctorParameters = function () {
return [
{ type: core.ChangeDetectorRef }
];
};
return TdDynamicSliderComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
var TdDynamicTextareaComponent = /** @class */ (function () {
function TdDynamicTextareaComponent() {
this.label = '';
this.hint = '';
this.name = '';
this.required = undefined;
this.errorMessageTemplate = undefined;
}
TdDynamicTextareaComponent.decorators = [
{ type: core.Component, args: [{
selector: 'td-dynamic-textarea',
template: "<div class=\"td-dynamic-textarea-wrapper\">\r\n <mat-form-field class=\"td-dynamic-textarea-field\">\r\n <textarea #elementInput\r\n matInput\r\n [formControl]=\"control\"\r\n [placeholder]=\"label\"\r\n [required]=\"required\"\r\n [attr.name]=\"name\"\r\n rows=\"4\">\r\n </textarea>\r\n <mat-hint>{{hint}}</mat-hint>\r\n <mat-error>\r\n <ng-template\r\n [ngTemplateOutlet]=\"errorMessageTemplate\"\r\n [ngTemplateOutletContext]=\"{control: control, errors: control?.errors}\">\r\n </ng-template>\r\n </mat-error>\r\n </mat-form-field>\r\n</div>",
styles: [".td-dynamic-textarea-wrapper{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;display:-webkit-box;display:-ms-flexbox;display:flex;box-sizing:border-box}.td-dynamic-textarea-wrapper .td-dynamic-textarea-field{-webkit-box-flex:1;-ms-flex:1;flex:1;box-sizing:border-box}"]
}] }
];
return TdDynamicTextareaComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/** @enum {string} */
var TdDynamicType = {
Text: 'text',
Boolean: 'boolean',
Number: 'number',
Array: 'array',
Date: 'date',
};
/** @enum {string} */
var TdDynamicElement = {
Input: 'input',
Datepicker: 'datepicker',
Password: 'password',
Textarea: 'textarea',
Slider: 'slider',
SlideToggle: 'slide-toggle',
Checkbox: 'checkbox',
Select: 'select',
FileInput: 'file-input',
Autocomplete: 'autocomplete',
AutocompleteDynamic: 'autocomplete-dynamic',
};
/** @type {?} */
var DYNAMIC_ELEMENT_NAME_REGEX = /^[^0-9][^\@]*$/;
var TdDynamicFormsService = /** @class */ (function () {
function TdDynamicFormsService() {
}
/**
* Method to validate if the [name] is a proper element name.
* Throws error if name is not valid.
*/
/**
* Method to validate if the [name] is a proper element name.
* Throws error if name is not valid.
* @param {?} name
* @return {?}
*/
TdDynamicFormsService.prototype.validateDynamicElementName = /**
* Method to validate if the [name] is a proper element name.
* Throws error if name is not valid.
* @param {?} name
* @return {?}
*/
function (name) {
if (!DYNAMIC_ELEMENT_NAME_REGEX.test(name)) {
throw new Error('Dynamic element name: "${name}" is not valid.');
}
};
/**
* Gets component to be rendered depending on [TdDynamicElement | TdDynamicType]
* Throws error if it does not exists or not supported.
*/
/**
* Gets component to be rendered depending on [TdDynamicElement | TdDynamicType]
* Throws error if it does not exists or not supported.
* @param {?} element
* @return {?}
*/
TdDynamicFormsService.prototype.getDynamicElement = /**
* Gets component to be rendered depending on [TdDynamicElement | TdDynamicType]
* Throws error if it does not exists or not supported.
* @param {?} element
* @return {?}
*/
function (element) {
switch (element) {
case TdDynamicType.Text:
case TdDynamicType.Number:
case TdDynamicElement.Input:
case TdDynamicElement.Password:
return TdDynamicInputComponent;
case TdDynamicElement.Textarea:
return TdDynamicTextareaComponent;
case TdDynamicType.Boolean:
case TdDynamicElement.SlideToggle:
return TdDynamicSlideToggleComponent;
case TdDynamicElement.Checkbox:
return TdDynamicCheckboxComponent;
case TdDynamicElement.Slider:
return TdDynamicSliderComponent;
case TdDynamicType.Array:
case TdDynamicElement.Select:
return TdDynamicSelectComponent;
case TdDynamicElement.FileInput:
return TdDynamicFileInputComponent;
case TdDynamicElement.Datepicker:
case TdDynamicType.Date:
return TdDynamicDatepickerComponent;
case TdDynamicElement.Autocomplete:
return TdDynamicAutocompleteComponent;
case TdDynamicElement.AutocompleteDynamic:
return TdDynamicAutocompleteDynamicListComponent;
default:
throw new Error("Error: type " + element + " does not exist or not supported.");
}
};
/**
* Creates form control for element depending [ITdDynamicElementConfig] properties.
*/
/**
* Creates form control for element depending [ITdDynamicElementConfig] properties.
* @param {?} config
* @return {?}
*/
TdDynamicFormsService.prototype.createFormControl = /**
* Creates form control for element depending [ITdDynamicElementConfig] properties.
* @param {?} config
* @return {?}
*/
function (config) {
/** @type {?} */
var validator = this.createValidators(config);
return new forms.FormControl({ value: config.default, disabled: config.disabled }, validator);
};
/**
* Creates form validationdepending [ITdDynamicElementConfig] properties.
*/
/**
* Creates form validationdepending [ITdDynamicElementConfig] properties.
* @param {?} config
* @return {?}
*/
TdDynamicFormsService.prototype.createValidators = /**
* Creates form validationdepending [ITdDynamicElementConfig] properties.
* @param {?} config
* @return {?}
*/
function (config) {
/** @type {?} */
var validator;
if (config.required) {
validator = forms.Validators.required;
}
if (config.max || config.max === 0) {
validator = forms.Validators.compose([validator, forms.Validators.max(parseFloat(config.max))]);
}
if (config.min || config.min === 0) {
validator = forms.Validators.compose([validator, forms.Validators.min(parseFloat(config.min))]);
}
if (config.maxLength || config.maxLength === 0) {
validator = forms.Validators.compose([validator, forms.Validators.maxLength(parseFloat(config.maxLength))]);
}
if (config.minLength || config.minLength === 0) {
validator = forms.Validators.compose([validator, forms.Validators.minLength(parseFloat(config.minLength))]);
}
// Add provided custom validators to the validator function
if (config.validators) {
config.validators.forEach(function (validatorConfig) {
validator = forms.Validators.compose([validator, validatorConfig.validator]);
});
}
return validator;
};
TdDynamicFormsService.decorators = [
{ type: core.Injectable }
];
return TdDynamicFormsService;
}());
/**
* @param {?} parent
* @return {?}
*/
function DYNAMIC_FORMS_PROVIDER_FACTORY(parent) {
return parent || new TdDynamicFormsService();
}
/** @type {?} */
var DYNAMIC_FORMS_PROVIDER = {
// If there is already a service available, use that. Otherwise, provide a new one.
provide: TdDynamicFormsService,
deps: [[new core.Optional(), new core.SkipSelf(), TdDynamicFormsService]],
useFactory: DYNAMIC_FORMS_PROVIDER_FACTORY,
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
var TdDynamicElementBase = /** @class */ (function () {
function TdDynamicElementBase(_changeDetectorRef) {
this._changeDetectorRef = _changeDetectorRef;
}
return TdDynamicElementBase;
}());
/* tslint:disable-next-line */
/** @type {?} */
var _TdDynamicElementMixinBase = common.mixinControlValueAccessor(TdDynamicElementBase);
var TdDynamicFormsErrorTemplate = /** @class */ (function (_super) {
__extends(TdDynamicFormsErrorTemplate, _super);
function TdDynamicFormsErrorTemplate(templateRef, viewContainerRef) {
return _super.call(this, templateRef, viewContainerRef) || this;
}
TdDynamicFormsErrorTemplate.decorators = [
{ type: core.Directive, args: [{ selector: '[tdDynamicFormsError]ng-template' },] }
];
/** @nocollapse */
TdDynamicFormsErrorTemplate.ctorParameters = function () {
return [
{ type: core.TemplateRef },
{ type: core.ViewContainerRef }
];
};
TdDynamicFormsErrorTemplate.propDecorators = {
tdDynamicFormsError: [{ type: core.Input }]
};
return TdDynamicFormsErrorTemplate;
}(portal.TemplatePortalDirective));
var TdDynamicElementDirective = /** @class */ (function () {
function TdDynamicElementDirective(viewContainer) {
this.viewContainer = viewContainer;
}
TdDynamicElementDirective.decorators = [
{ type: core.Directive, args: [{
selector: '[tdDynamicContainer]',
},] }
];
/** @nocollapse */
TdDynamicElementDirective.ctorParameters = function () {
return [
{ type: core.ViewContainerRef }
];
};
return TdDynamicElementDirective;
}());
var TdDynamicElementComponent = /** @class */ (function (_super) {
__extends(TdDynamicElementComponent, _super);
function TdDynamicElementComponent(_componentFactoryResolver, _dynamicFormsService, _changeDetectorRef) {
var _this = _super.call(this, _changeDetectorRef) || this;
_this._componentFactoryResolver = _componentFactoryResolver;
_this._dynamicFormsService = _dynamicFormsService;
/**
* Sets label to be displayed.
*/
_this.label = '';
/**
* Sets hint to be displayed.
*/
_this.hint = '';
/**
* Sets name to be displayed as attribute.
*/
_this.name = '';
/**
* Sets type or element of element to be rendered.
* Throws error if does not exist or no supported.
*/
_this.type = undefined;
/**
* Sets required validation checkup (if supported by element).
*/
_this.required = undefined;
/**
* Sets min validation checkup (if supported by element).
*/
_this.min = undefined;
/**
* Sets max validation checkup (if supported by element).
*/
_this.max = undefined;
/**
* Sets minLength validation checkup (if supported by element).
*/
_this.minLength = undefined;
/**
* Sets maxLength validation checkup (if supported by element).
*/
_this.maxLength = undefined;
/**
* Sets selections for array elements (if supported by element).
*/
_this.selections = undefined;
/**
* Sets multiple property for array elements (if supported by element).
*/
_this.multiple = undefined;
/**
* Sets error message template so it can be injected into dynamic components.
*/
_this.errorMessageTemplate = undefined;
return _this;
}
Object.defineProperty(TdDynamicElementComponent.prototype, "maxAttr", {
get: /**
* @return {?}
*/ function () {
return this.max;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TdDynamicElementComponent.prototype, "minAttr", {
get: /**
* @return {?}
*/ function () {
return this.min;
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
TdDynamicElementComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
/** @type {?} */
var component = ( /** @type {?} */(this.type)) instanceof core.Type ? this.type : this._dynamicFormsService.getDynamicElement(this.type);
/** @type {?} */
var ref = this._componentFactoryResolver.
resolveComponentFactory(component)
.create(this.childElement.viewContainer.injector);
this.childElement.viewContainer.insert(ref.hostView);
this._instance = ref.instance;
this._instance.control = this.dynamicControl;
this._instance.label = this.label;
this._instance.hint = this.hint;
this._instance.name = this.name;
this._instance.type = this.type;
this._instance.value = this.value;
this._instance.required = this.required;
this._instance.min = this.min;
this._instance.max = this.max;
this._instance.minLength = this.minLength;
this._instance.maxLength = this.maxLength;
this._instance.selections = this.selections;
this._instance.multiple = this.multiple;
this._instance.errorMessageTemplate = this.errorMessageTemplate;
};
/**
* Reassign any inputs that have changed
*/
/**
* Reassign any inputs that have changed
* @param {?} changes
* @return {?}
*/
TdDynamicElementComponent.prototype.ngOnChanges = /**
* Reassign any inputs that have changed
* @param {?} changes
* @return {?}
*/
function (changes) {
if (this._instance) {
for (var prop in changes) {
this._instance[prop] = changes[prop].currentValue;
}
}
};
TdDynamicElementComponent.decorators = [
{ type: core.Component, args: [{
providers: [TdDynamicFormsService, {
provide: forms.NG_VALUE_ACCESSOR,
useExisting: core.forwardRef(function () { return TdDynamicElementComponent; }),
multi: true,
}],
selector: 'td-dynamic-element',
template: '<div tdDynamicContainer></div>'
}] }
];
/** @nocollapse */
TdDynamicElementComponent.ctorParameters = function () {
return [
{ type: core.ComponentFactoryResolver },
{ type: TdDynamicFormsService },
{ type: core.ChangeDetectorRef }
];
};
TdDynamicElementComponent.propDecorators = {
dynamicControl: [{ type: core.Input }],
label: [{ type: core.Input }],
hint: [{ type: core.Input }],
name: [{ type: core.Input }],
type: [{ type: core.Input }],
required: [{ type: core.Input }],
min: [{ type: core.Input }],
max: [{ type: core.Input }],
minLength: [{ type: core.Input }],
maxLength: [{ type: core.Input }],
selections: [{ type: core.Input }],
multiple: [{ type: core.Input }],
errorMessageTemplate: [{ type: core.Input }],
childEle