@noaestudio/forms
Version:
Dynamic forms extension for Covalent
1,015 lines (996 loc) • 467 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/forms'), require('@ngx-translate/core'), require('is-json'), require('moment'), require('@angular/material'), require('@angular/cdk/collections'), require('@angular/cdk/tree'), require('@angular/material/tree'), require('rxjs'), require('@angular/material/dialog'), require('@angular/cdk/drag-drop'), require('lodash'), require('@angular/cdk/portal'), require('rxjs/operators'), require('angular-tree-component'), require('@covalent/core/loading'), require('@angular/material-moment-adapter'), 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/tabs'), require('@angular/material/chips'), require('@covalent/core/common'), require('@covalent/core/file'), require('ngx-editor'), require('angular-font-awesome'), require('material-community-components'), require('@ng-select/ng-select'), require('ngx-material-timepicker'), require('@ngx-translate/http-loader')) :
typeof define === 'function' && define.amd ? define('@covalent/dynamic-forms', ['exports', '@angular/core', '@angular/forms', '@ngx-translate/core', 'is-json', 'moment', '@angular/material', '@angular/cdk/collections', '@angular/cdk/tree', '@angular/material/tree', 'rxjs', '@angular/material/dialog', '@angular/cdk/drag-drop', 'lodash', '@angular/cdk/portal', 'rxjs/operators', 'angular-tree-component', '@covalent/core/loading', '@angular/material-moment-adapter', '@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/tabs', '@angular/material/chips', '@covalent/core/common', '@covalent/core/file', 'ngx-editor', 'angular-font-awesome', 'material-community-components', '@ng-select/ng-select', 'ngx-material-timepicker', '@ngx-translate/http-loader'], factory) :
(factory((global.covalent = global.covalent || {}, global.covalent['dynamic-forms'] = {}),global.ng.core,global.ng.forms,null,null,null,global.ng.material,global.ng.cdk.collections,global.ng.cdk.tree,global.ng.material.tree,global.rxjs,global.ng.material.dialog,global.ng.cdk['drag-drop'],null,global.ng.cdk.portal,global.rxjs.operators,null,global.covalent.core.loading,global.ng['material-moment-adapter'],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.tabs,global.ng.material.chips,global.covalent.core.common,global.covalent.core.file,null,null,null,null,null,null));
}(this, (function (exports,core,forms,core$1,_isjson_,moment,material,collections,tree,tree$1,rxjs,dialog,dragDrop,lodash_,portal,operators,angularTreeComponent,loading,materialMomentAdapter,common,input,select,checkbox,slider,slideToggle,icon,button,datepicker,tabs,chips,common$1,file,ngxEditor,angularFontAwesome,materialCommunityComponents,ngSelect,ngxMaterialTimepicker,httpLoader) { '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 __());
}
function __awaiter(thisArg, _arguments, P, generator) {
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try {
step(generator.next(value));
}
catch (e) {
reject(e);
} }
function rejected(value) { try {
step(generator["throw"](value));
}
catch (e) {
reject(e);
} }
function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
}
function __generator(thisArg, body) {
var _ = { label: 0, sent: function () { if (t[0] & 1)
throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function () { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f)
throw new TypeError("Generator is already executing.");
while (_)
try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done)
return t;
if (y = 0, t)
op = [op[0] & 2, t.value];
switch (op[0]) {
case 0:
case 1:
t = op;
break;
case 4:
_.label++;
return { value: op[1], done: false };
case 5:
_.label++;
y = op[1];
op = [0];
continue;
case 7:
op = _.ops.pop();
_.trys.pop();
continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
_ = 0;
continue;
}
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) {
_.label = op[1];
break;
}
if (op[0] === 6 && _.label < t[1]) {
_.label = t[1];
t = op;
break;
}
if (t && _.label < t[2]) {
_.label = t[2];
_.ops.push(op);
break;
}
if (t[2])
_.ops.pop();
_.trys.pop();
continue;
}
op = body.call(thisArg, _);
}
catch (e) {
op = [6, e];
y = 0;
}
finally {
f = t = 0;
}
if (op[0] & 5)
throw op[1];
return { value: op[0] ? op[1] : void 0, done: true };
}
}
function __values(o) {
var m = typeof Symbol === "function" && o[Symbol.iterator], i = 0;
if (m)
return m.call(o);
return {
next: function () {
if (o && i >= o.length)
o = void 0;
return { value: o && o[i++], done: !o };
}
};
}
function __read(o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m)
return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done)
ar.push(r.value);
}
catch (error) {
e = { error: error };
}
finally {
try {
if (r && !r.done && (m = i["return"]))
m.call(i);
}
finally {
if (e)
throw e.error;
}
}
return ar;
}
function __spread() {
for (var ar = [], i = 0; i < arguments.length; i++)
ar = ar.concat(__read(arguments[i]));
return ar;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var /** @type {?} */ noop = function () {
// empty method
};
/**
* @abstract
*/
var /**
* @abstract
*/ AbstractControlValueAccessor = (function () {
function AbstractControlValueAccessor() {
/**
* Implemented as part of ControlValueAccessor.
*/
this._value = undefined;
this.onChange = function (_) { return noop; };
this.onTouched = function () { return noop; };
}
Object.defineProperty(AbstractControlValueAccessor.prototype, "value", {
// get/set accessor (needed for ControlValueAccessor)
get: /**
* @return {?}
*/ function () { return this._value; },
set: /**
* @param {?} v
* @return {?}
*/ function (v) {
if (v !== this._value) {
this._value = v;
this.onChange(v);
}
},
enumerable: true,
configurable: true
});
/**
* Implemented as part of ControlValueAccessor.
*/
/**
* Implemented as part of ControlValueAccessor.
* @param {?} value
* @return {?}
*/
AbstractControlValueAccessor.prototype.writeValue = /**
* Implemented as part of ControlValueAccessor.
* @param {?} value
* @return {?}
*/
function (value) {
this.value = value;
};
/**
* @param {?} fn
* @return {?}
*/
AbstractControlValueAccessor.prototype.registerOnChange = /**
* @param {?} fn
* @return {?}
*/
function (fn) {
this.onChange = fn;
};
/**
* @param {?} fn
* @return {?}
*/
AbstractControlValueAccessor.prototype.registerOnTouched = /**
* @param {?} fn
* @return {?}
*/
function (fn) {
this.onTouched = fn;
};
return AbstractControlValueAccessor;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var /** @type {?} */ INPUT_INPUT_CONTROL_VALUE_ACCESSOR = {
provide: forms.NG_VALUE_ACCESSOR,
useExisting: core.forwardRef(function () { return TdDynamicInputComponent; }),
multi: true,
};
var TdDynamicInputComponent = (function (_super) {
__extends(TdDynamicInputComponent, _super);
function TdDynamicInputComponent() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.label = '';
_this.type = undefined;
_this.required = undefined;
_this.min = undefined;
_this.max = undefined;
_this.minLength = undefined;
_this.maxLength = undefined;
_this.step = undefined;
_this.autocomplete = 'off';
return _this;
}
/**
* @return {?}
*/
TdDynamicInputComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
if (this.type == 'password') {
this.autocomplete = 'new-password';
}
else {
this.autocomplete = 'off';
}
};
TdDynamicInputComponent.decorators = [
{ type: core.Component, args: [{
providers: [INPUT_INPUT_CONTROL_VALUE_ACCESSOR],
selector: 'td-dynamic-input',
styles: [".td-dynamic-input-wrapper{-ms-flex-direction:row;flex-direction:row;display:-ms-flexbox;display:flex;box-sizing:border-box}.td-dynamic-input-wrapper .td-dynamic-input-field{-ms-flex:1;flex:1;box-sizing:border-box}"],
template: "<div class=\"td-dynamic-input-wrapper\">\n <mat-form-field class=\"td-dynamic-input-field\">\n <input #elementInput matInput [(ngModel)]=\"value\" [formControl]=\"control\" [placeholder]=\"label\"\n [type]=\"type\" [autocomplete]=\"autocomplete\" [required]=\"required\" [attr.min]=\"min\" [attr.max]=\"max\"\n [attr.minLength]=\"minLength\" [attr.maxLength]=\"maxLength\" [attr.step]=\"step\" />\n </mat-form-field>\n</div>\n",
},] },
];
/** @nocollapse */
TdDynamicInputComponent.ctorParameters = function () { return []; };
return TdDynamicInputComponent;
}(AbstractControlValueAccessor));
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var /** @type {?} */ UPLOAD_INPUT_CONTROL_VALUE_ACCESSOR = {
provide: forms.NG_VALUE_ACCESSOR,
useExisting: core.forwardRef(function () { return TdDynamicFileInputComponent; }),
multi: true,
};
var TdDynamicFileInputComponent = (function (_super) {
__extends(TdDynamicFileInputComponent, _super);
function TdDynamicFileInputComponent() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.required = undefined;
_this.label = '';
return _this;
}
TdDynamicFileInputComponent.decorators = [
{ type: core.Component, args: [{
providers: [UPLOAD_INPUT_CONTROL_VALUE_ACCESSOR],
selector: 'td-dynamic-file-input',
styles: [".td-dynamic-file-input-wrapper{-ms-flex-direction:row;flex-direction:row;display:-ms-flexbox;display:flex;box-sizing:border-box}.td-dynamic-file-input-wrapper .td-dynamic-file-input-field{-ms-flex:1;flex:1;box-sizing:border-box}.td-file-input{margin-left:10px}"],
template: "<div class=\"td-dynamic-file-input-wrapper\">\n\t<mat-form-field tdFileDrop\n\t\tclass=\"td-dynamic-file-input-field\"\n\t\tfloatLabel=\"never\"\n\t\t[disabled]=\"control?.disabled\"\n\t\t(fileDrop)=\"value = $event\"\n\t\t(click)=\"!control?.disabled && fileInput.inputElement.click()\"\n\t\t(keyup.enter)=\"!control?.disabled && fileInput.inputElement.click()\"\n\t\t(keyup.delete)=\"fileInput.clear()\"\n\t\t(keyup.backspace)=\"fileInput.clear()\" >\n\t\t\t<input matInput\n\t\t\t\t[value]=\"value?.name\"\n\t\t\t\t[placeholder]=\"label\"\n\t\t\t\t[disabled]=\"control?.disabled\"\n\t\t\t\tautocomplete=\"off\"\n\t\t\t\treadonly />\n\t</mat-form-field>\n\t<button mat-icon-button *ngIf=\"value\" (click)=\"fileInput.clear()\" (keyup.enter)=\"fileInput.clear()\">\n\t\t<mat-icon>cancel</mat-icon>\n\t</button>\n\t<td-file-input class=\"td-file-input\" #fileInput [(ngModel)]=\"value\">\n\t\t<mat-icon>folder</mat-icon>\n\t\t<span>{{ label }}</span>\n\t</td-file-input>\n</div>\n",
},] },
];
/** @nocollapse */
TdDynamicFileInputComponent.ctorParameters = function () { return []; };
return TdDynamicFileInputComponent;
}(AbstractControlValueAccessor));
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var /** @type {?} */ TEXTAREA_INPUT_CONTROL_VALUE_ACCESSOR = {
provide: forms.NG_VALUE_ACCESSOR,
useExisting: core.forwardRef(function () { return TdDynamicTextareaComponent; }),
multi: true,
};
var TdDynamicTextareaComponent = (function (_super) {
__extends(TdDynamicTextareaComponent, _super);
function TdDynamicTextareaComponent() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.label = '';
_this.required = undefined;
return _this;
}
TdDynamicTextareaComponent.decorators = [
{ type: core.Component, args: [{
providers: [TEXTAREA_INPUT_CONTROL_VALUE_ACCESSOR],
selector: 'td-dynamic-textarea',
styles: [".td-dynamic-textarea-wrapper{-ms-flex-direction:row;flex-direction:row;display:-ms-flexbox;display:flex;box-sizing:border-box}.td-dynamic-textarea-wrapper .td-dynamic-textarea-field{-ms-flex:1;flex:1;box-sizing:border-box}"],
template: "<div class=\"td-dynamic-textarea-wrapper\">\n <mat-form-field class=\"td-dynamic-textarea-field\">\n <textarea #elementInput\n matInput\n [(ngModel)]=\"value\"\n [placeholder]=\"label\"\n [required]=\"required\"\n rows=\"4\">\n </textarea>\n </mat-form-field>\n</div>",
},] },
];
/** @nocollapse */
TdDynamicTextareaComponent.ctorParameters = function () { return []; };
return TdDynamicTextareaComponent;
}(AbstractControlValueAccessor));
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var /** @type {?} */ SLIDE_TOGGLE_INPUT_CONTROL_VALUE_ACCESSOR = {
provide: forms.NG_VALUE_ACCESSOR,
useExisting: core.forwardRef(function () { return TdDynamicSlideToggleComponent; }),
multi: true,
};
var TdDynamicSlideToggleComponent = (function (_super) {
__extends(TdDynamicSlideToggleComponent, _super);
function TdDynamicSlideToggleComponent() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.label = '';
_this.required = false;
return _this;
}
TdDynamicSlideToggleComponent.decorators = [
{ type: core.Component, args: [{
providers: [SLIDE_TOGGLE_INPUT_CONTROL_VALUE_ACCESSOR],
selector: 'td-dynamic-slide-toggle',
styles: [""],
template: "<div class=\"td-dynamic-slide-toggle-wrapper\">\n <mat-slide-toggle [(ngModel)]=\"value\"\n [required]=\"required\">\n {{label}}\n </mat-slide-toggle>\n</div>",
},] },
];
/** @nocollapse */
TdDynamicSlideToggleComponent.ctorParameters = function () { return []; };
return TdDynamicSlideToggleComponent;
}(AbstractControlValueAccessor));
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var /** @type {?} */ CHECKBOX_INPUT_CONTROL_VALUE_ACCESSOR = {
provide: forms.NG_VALUE_ACCESSOR,
useExisting: core.forwardRef(function () { return TdDynamicCheckboxComponent; }),
multi: true,
};
var TdDynamicCheckboxComponent = (function (_super) {
__extends(TdDynamicCheckboxComponent, _super);
function TdDynamicCheckboxComponent() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.label = '';
_this.required = false;
return _this;
}
TdDynamicCheckboxComponent.decorators = [
{ type: core.Component, args: [{
providers: [CHECKBOX_INPUT_CONTROL_VALUE_ACCESSOR],
selector: 'td-dynamic-checkbox',
styles: [""],
template: "<div class=\"td-dynamic-checkbox-wrapper\">\n <mat-checkbox [(ngModel)]=\"value\"\n [required]=\"required\">\n {{label}}\n </mat-checkbox>\n</div>",
},] },
];
/** @nocollapse */
TdDynamicCheckboxComponent.ctorParameters = function () { return []; };
return TdDynamicCheckboxComponent;
}(AbstractControlValueAccessor));
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var /** @type {?} */ SLIDER_INPUT_CONTROL_VALUE_ACCESSOR = {
provide: forms.NG_VALUE_ACCESSOR,
useExisting: core.forwardRef(function () { return TdDynamicSliderComponent; }),
multi: true,
};
var TdDynamicSliderComponent = (function (_super) {
__extends(TdDynamicSliderComponent, _super);
function TdDynamicSliderComponent() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.label = '';
_this.required = undefined;
_this.min = undefined;
_this.max = undefined;
return _this;
}
TdDynamicSliderComponent.decorators = [
{ type: core.Component, args: [{
providers: [SLIDER_INPUT_CONTROL_VALUE_ACCESSOR],
selector: 'td-dynamic-slider',
styles: [".td-dynamic-slider-field{position:relative;margin-top:8px;-ms-flex-direction:row;flex-direction:row;display:-ms-flexbox;display:flex;box-sizing:border-box}.td-dynamic-slider-field .td-dynamic-slider{-ms-flex:1;flex:1}"],
template: "<div class=\"td-dynamic-slider-wrapper\">\n <div class=\"mat-form-field-placeholder-wrapper mat-form-field-can-float mat-form-field-should-float\"\n [class.mat-focused]=\"slider._isActive\">\n <label class=\"mat-form-field-placeholder mat-float mat-form-field-float td-slider-label\"> {{label}} <span *ngIf=\"required\" class=\"mat-placeholder-required\">*</span></label>\n </div>\n <div class=\"td-dynamic-slider-field\">\n <mat-slider #slider\n class=\"td-dynamic-slider\"\n [(ngModel)]=\"value\"\n [min]=\"min\"\n [max]=\"max\"\n thumbLabel\n tickInterval=\"auto\"\n [required]=\"required\">\n </mat-slider>\n </div>\n</div>\n",
},] },
];
/** @nocollapse */
TdDynamicSliderComponent.ctorParameters = function () { return []; };
return TdDynamicSliderComponent;
}(AbstractControlValueAccessor));
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var /** @type {?} */ isJSON = _isjson_;
var /** @type {?} */ SELECT_TOGGLE_INPUT_CONTROL_VALUE_ACCESSOR = {
provide: forms.NG_VALUE_ACCESSOR,
useExisting: core.forwardRef(function () { return TdDynamicSelectComponent; }),
multi: true,
};
var TdDynamicSelectComponent = (function (_super) {
__extends(TdDynamicSelectComponent, _super);
function TdDynamicSelectComponent(translator) {
var _this = _super.call(this) || this;
_this.translator = translator;
_this.label = '';
_this.required = undefined;
_this.selections = undefined;
_this.selectComplex = false;
_this.selectMultiple = false;
_this.flex = 100;
_this.flexPerc = _this.flex / 100;
return _this;
}
/**
* @return {?}
*/
TdDynamicSelectComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
var _this = this;
if (this.selections) {
this.selections.forEach(function (sel) {
if (sel.label) {
sel.label = _this.translateLabel(sel.label);
}
});
}
};
/**
* @param {?} value
* @return {?}
*/
TdDynamicSelectComponent.prototype.translateLabel = /**
* @param {?} value
* @return {?}
*/
function (value) {
var /** @type {?} */ selectedLang = this.translator.currentLang;
var /** @type {?} */ defaultLang = this.translator.defaultLang;
if (isJSON(value)) {
var /** @type {?} */ json = JSON.parse(value);
if (json[selectedLang]) {
return json[selectedLang];
}
else if (json[defaultLang]) {
return json[defaultLang];
}
else {
for (var /** @type {?} */ entry in json) {
return json[entry];
}
}
}
else {
return this.translator.instant(value);
}
};
TdDynamicSelectComponent.decorators = [
{ type: core.Component, args: [{
providers: [SELECT_TOGGLE_INPUT_CONTROL_VALUE_ACCESSOR],
selector: 'td-dynamic-select',
styles: [".td-dynamic-select-wrapper{-ms-flex-direction:row;flex-direction:row;display:-ms-flexbox;display:flex;box-sizing:border-box}.td-dynamic-select-wrapper .td-dynamic-select-field{-ms-flex:1;flex:1;box-sizing:border-box}"],
template: "<div class=\"td-dynamic-select-wrapper\">\n\n\t<mat-form-field *ngIf=\"!selectComplex\" class=\"td-dynamic-select-field\">\n\t\t<mat-select [(ngModel)]=\"value\" [placeholder]=\"label\" [required]=\"required\">\n\t\t\t<mat-option *ngFor=\"let selection of selections\" [value]=\"selection.value || selection\">{{selection.label || selection}}</mat-option>\n\t\t</mat-select>\n\t</mat-form-field>\n\n\t<ng-select style=\"padding-bottom: 2.25em;\" *ngIf=\"selectComplex\" [(ngModel)]=\"value\" placeholder=\"{{label + (required ? ' *' : '')}}\" [required]=\"required\" [multiple]=\"selectMultiple\" [items]=\"selections\"\n\t\t [searchable]=\"true\" bindLabel=\"label\" bindValue=\"value\" appendTo=\"body\" [style.flex]=\"flexPerc\">\n\t</ng-select>\n\n</div>\n",
},] },
];
/** @nocollapse */
TdDynamicSelectComponent.ctorParameters = function () {
return [
{ type: core$1.TranslateService, },
];
};
return TdDynamicSelectComponent;
}(AbstractControlValueAccessor));
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var /** @type {?} */ DATEPICKER_INPUT_CONTROL_VALUE_ACCESSOR = {
provide: forms.NG_VALUE_ACCESSOR,
useExisting: core.forwardRef(function () { return TdDynamicDatepickerComponent; }),
multi: true,
};
var TdDynamicDatepickerComponent = (function (_super) {
__extends(TdDynamicDatepickerComponent, _super);
function TdDynamicDatepickerComponent() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.label = '';
_this.type = undefined;
_this.required = undefined;
_this.min = undefined;
_this.max = undefined;
return _this;
}
TdDynamicDatepickerComponent.decorators = [
{ type: core.Component, args: [{
providers: [DATEPICKER_INPUT_CONTROL_VALUE_ACCESSOR],
selector: 'td-dynamic-datepicker',
styles: [".td-dynamic-datepicker-wrapper{-ms-flex-direction:row;flex-direction:row;display:-ms-flexbox;display:flex;box-sizing:border-box}.td-dynamic-datepicker-wrapper .td-dynamic-datepicker-field{-ms-flex:1;flex:1;box-sizing:border-box}"],
template: "<div class=\"td-dynamic-datepicker-wrapper\">\n <mat-form-field class=\"td-dynamic-datepicker-field\">\n <input #elementInput\n matInput\n [matDatepicker]=\"dynamicDatePicker\"\n [(ngModel)]=\"value\"\n [formControl]=\"control\"\n autocomplete=\"off\"\n [placeholder]=\"label\"\n [required]=\"required\"\n [min]=\"min\"\n [max]=\"max\"/>\n <mat-datepicker-toggle matSuffix [for]=\"dynamicDatePicker\"></mat-datepicker-toggle>\n <mat-datepicker #dynamicDatePicker></mat-datepicker>\n </mat-form-field>\n</div>\n",
},] },
];
/** @nocollapse */
TdDynamicDatepickerComponent.ctorParameters = function () { return []; };
return TdDynamicDatepickerComponent;
}(AbstractControlValueAccessor));
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var /** @type {?} */ INPUT_INPUT_CONTROL_VALUE_ACCESSOR$1 = {
provide: forms.NG_VALUE_ACCESSOR,
useExisting: core.forwardRef(function () { return TextEditorComponent; }),
multi: true,
};
var TextEditorComponent = (function (_super) {
__extends(TextEditorComponent, _super);
function TextEditorComponent() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.label = '';
_this.type = undefined;
_this.required = undefined;
_this.min = undefined;
_this.max = undefined;
_this.minLength = undefined;
_this.maxLength = undefined;
_this.height = "150px";
_this.toolbarConfig = [
['bold', 'italic', 'underline'],
['fontName', 'fontSize', 'color'],
['justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull', 'indent', 'outdent'],
['cut', 'copy', 'delete', 'removeFormat', 'undo', 'redo'],
['horizontalLine', 'orderedList', 'unorderedList'],
['link', 'unlink']
];
return _this;
}
TextEditorComponent.decorators = [
{ type: core.Component, args: [{
providers: [INPUT_INPUT_CONTROL_VALUE_ACCESSOR$1],
selector: 'text-editor',
styles: [".td-dynamic-input-wrapper{-ms-flex-direction:row;flex-direction:row;display:-ms-flexbox;display:flex;box-sizing:border-box}.td-dynamic-input-wrapper .td-dynamic-input-field{-ms-flex:1;flex:1;box-sizing:border-box}.td-dynamic-input-wrapper .ngx-editor{margin-top:10px}"],
template: "<style>\n\n.ngx-editor {\n\tmargin-top: 10px;\n}\n\n</style>\n\n<div class=\"td-dynamic-input-wrapper\" style=\"display: block;\">\n\t<label>{{label}} {{required ? '*' : ''}}</label>\n\t<app-ngx-editor [(ngModel)]=\"value\" [height]=\"height\" [minHeight]=\"height\" [toolbar]=\"toolbarConfig\" style=\"width:100%;\">\n\t</app-ngx-editor>\n</div>\n",
},] },
];
/** @nocollapse */
TextEditorComponent.ctorParameters = function () { return []; };
return TextEditorComponent;
}(AbstractControlValueAccessor));
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var /** @type {?} */ INPUT_INPUT_CONTROL_VALUE_ACCESSOR$2 = {
provide: forms.NG_VALUE_ACCESSOR,
useExisting: core.forwardRef(function () { return ColorPickerComponent; }),
multi: true,
};
var ColorPickerComponent = (function (_super) {
__extends(ColorPickerComponent, _super);
function ColorPickerComponent() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.label = '';
_this.type = undefined;
_this.required = undefined;
_this.min = undefined;
_this.max = undefined;
_this.minLength = undefined;
_this.maxLength = undefined;
_this.hideUsedColors = true;
return _this;
}
/**
* @param {?} value
* @return {?}
*/
ColorPickerComponent.prototype.selectColor = /**
* @param {?} value
* @return {?}
*/
function (value) {
this.control.setValue(value);
};
ColorPickerComponent.decorators = [
{ type: core.Component, args: [{
providers: [INPUT_INPUT_CONTROL_VALUE_ACCESSOR$2],
selector: 'color-picker',
styles: [".td-dynamic-input-wrapper{-ms-flex-direction:row;flex-direction:row;display:-ms-flexbox;display:flex;box-sizing:border-box}.td-dynamic-input-wrapper .td-dynamic-input-field{-ms-flex:1;flex:1;box-sizing:border-box}.td-dynamic-input-wrapper .ngx-editor{margin-top:10px}"],
template: "<style>\n\n.ngx-editor {\n\tmargin-top: 10px;\n}\n\n</style>\n\n<div class=\"td-dynamic-input-wrapper\" style=\"display: block;\">\n\t<label style=\"display: block; margin-right: 10px;\">{{label}} {{required ? '*' : ''}}</label>\n\t<mcc-color-picker [selectedColor]=\"value\" (selected)=\"selectColor($event)\" [hideUsedColors]=\"hideUsedColors\"></mcc-color-picker>\n</div>\n",
},] },
];
/** @nocollapse */
ColorPickerComponent.ctorParameters = function () { return []; };
return ColorPickerComponent;
}(AbstractControlValueAccessor));
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var /** @type {?} */ DATEPICKER_INPUT_CONTROL_VALUE_ACCESSOR$1 = {
provide: forms.NG_VALUE_ACCESSOR,
useExisting: core.forwardRef(function () { return TimePickerComponent; }),
multi: true,
};
var TimePickerComponent = (function (_super) {
__extends(TimePickerComponent, _super);
function TimePickerComponent() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.label = '';
_this.type = undefined;
_this.required = undefined;
_this.min = undefined;
_this.max = undefined;
_this.format = 24;
return _this;
}
/**
* @param {?} value
* @return {?}
*/
TimePickerComponent.prototype.selectValue = /**
* @param {?} value
* @return {?}
*/
function (value) {
this.control.setValue(value);
};
TimePickerComponent.decorators = [
{ type: core.Component, args: [{
providers: [DATEPICKER_INPUT_CONTROL_VALUE_ACCESSOR$1],
selector: 'td-time-picker',
styles: [".td-dynamic-timepicker-wrapper{-ms-flex-direction:row;flex-direction:row;display:-ms-flexbox;display:flex;box-sizing:border-box}.td-dynamic-timepicker-wrapper .td-dynamic-timepicker-field{-ms-flex:1;flex:1;box-sizing:border-box}"],
template: "<div class=\"td-time-picker\">\n\t<mat-form-field class=\"td-dynamic-timepicker-field\">\n\t\t<input matInput [(ngModel)]=\"value\" (ngModelChange)=\"selectValue($event)\" [format]=\"format\" [ngxTimepicker]=\"pickerT\"\n\t\t\t[placeholder]=\"label\" [required]=\"required\" [min]=\"min\" [max]=\"max\" autocomplete=\"off\"/>\n\t\t<ngx-material-timepicker #pickerT></ngx-material-timepicker>\n </mat-form-field>\n</div>\n",
},] },
];
/** @nocollapse */
TimePickerComponent.ctorParameters = function () { return []; };
return TimePickerComponent;
}(AbstractControlValueAccessor));
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var /** @type {?} */ moment$1 = moment;
var /** @type {?} */ DATEPICKER_INPUT_CONTROL_VALUE_ACCESSOR$2 = {
provide: forms.NG_VALUE_ACCESSOR,
useExisting: core.forwardRef(function () { return DateTimePickerComponent; }),
multi: true,
};
var DateTimePickerComponent = (function (_super) {
__extends(DateTimePickerComponent, _super);
function DateTimePickerComponent() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.label = '';
_this.type = undefined;
_this.required = undefined;
_this.min = undefined;
_this.max = undefined;
_this.format = 24;
_this.dateTime = moment$1.utc();
_this.dateValue = null;
_this.timeValue = '';
return _this;
}
/**
* @return {?}
*/
DateTimePickerComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
if (this.value) {
this.dateTime = this.value;
this.initValues();
}
else {
this.dateTime = moment$1.utc();
this.control.setValue(this.dateTime);
}
};
/**
* @return {?}
*/
DateTimePickerComponent.prototype.initValues = /**
* @return {?}
*/
function () {
this.dateValue = moment$1.utc(this.dateTime.clone());
this.timeValue = this.dateTime.format('HH:mm');
};
/**
* @param {?} value
* @return {?}
*/
DateTimePickerComponent.prototype.selectDateValue = /**
* @param {?} value
* @return {?}
*/
function (value) {
if (this.dateTime == null) {
this.dateTime = moment$1.utc();
}
this.dateTime.year(value.year()).month(value.month()).date(value.date());
this.control.setValue(this.dateTime);
};
/**
* @param {?} value
* @return {?}
*/
DateTimePickerComponent.prototype.selectTimeValue = /**
* @param {?} value
* @return {?}
*/
function (value) {
var /** @type {?} */ timeMoment = moment$1.utc(this.timeValue, 'HH:mm');
if (this.dateTime == null) {
this.dateTime = moment$1.utc();
}
this.dateTime.hour(timeMoment.hour()).minute(timeMoment.minute()).second(timeMoment.second());
this.control.setValue(this.dateTime);
};
DateTimePickerComponent.decorators = [
{ type: core.Component, args: [{
providers: [DATEPICKER_INPUT_CONTROL_VALUE_ACCESSOR$2],
selector: 'td-date-time-picker',
styles: [".td-dynamic-timepicker-wrapper{-ms-flex-direction:row;flex-direction:row;display:-ms-flexbox;display:flex;box-sizing:border-box}.td-dynamic-timepicker-wrapper .td-dynamic-timepicker-field{-ms-flex:1;flex:1;box-sizing:border-box}"],
template: "<style>\n\n.timeLabel {\n\tdisplay: block;\n\tmargin-bottom: 5px;\n\tcolor: rgba(0, 0, 0, 0.54);\n\tfont-size: 11px;\n}\n\n.timeInput {\n\tborder: none;\n border-bottom: 1px solid rgba(0, 0, 0, 0.54);\n width: 201px;\n}\n\n.timeIcon {\n\tdisplay: inline-flex;\n\tvertical-align: middle;\n}\n\n</style>\n\n<div class=\"td-dynamic-datepicker-wrapper\">\n\t<label>{{label}}</label>\n\n\t<br />\n\t<br />\n\n\t<mat-form-field class=\"td-dynamic-datepicker-field\">\n\t\t<input #elementInput matInput [matDatepicker]=\"dynamicDatePicker\" autocomplete=\"off\"\n\t\t\t[(ngModel)]=\"dateValue\" (ngModelChange)=\"selectDateValue($event)\"\n\t\t\tplaceholder=\"Fecha\" [required]=\"required\" [min]=\"min\" [max]=\"max\"\n\t\t/>\n\t\t<mat-datepicker-toggle matSuffix [for]=\"dynamicDatePicker\"></mat-datepicker-toggle>\n\t\t<mat-datepicker #dynamicDatePicker></mat-datepicker>\n\n\t</mat-form-field>\n\n\t<br />\n\n\t<label class=\"timeLabel\">Hora</label>\n\t<input class=\"timeInput\" [ngxTimepicker]=\"pickerDT\" [(ngModel)]=\"timeValue\" (ngModelChange)=\"selectTimeValue($event)\"\n\t\t[disableClick]=\"true\" readonly [format]=\"format\" [required]=\"required\" autocomplete=\"off\" />\n <ngx-material-timepicker-toggle class=\"timeIcon\" [for]=\"pickerDT\"></ngx-material-timepicker-toggle>\n <ngx-material-timepicker #pickerDT></ngx-material-timepicker>\n\n</div>\n",
},] },
];
/** @nocollapse */
DateTimePickerComponent.ctorParameters = function () { return []; };
return DateTimePickerComponent;
}(AbstractControlValueAccessor));
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var TranslateDialogComponent = (function () {
function TranslateDialogComponent(dialogRef, data) {
this.dialogRef = dialogRef;
this.data = data;
this.remainingLangs = [];
this.selectedLang = '';
if (this.data && this.data.langs) {
this.remainingLangs = this.data.langs;
}
}
/**
* @return {?}
*/
TranslateDialogComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
};
TranslateDialogComponent.decorators = [
{ type: core.Component, args: [{
selector: 'translate-dialog',
template: "<h4 mat-dialog-title>{{'newLanguage' | translate}}</h4>\n<div mat-dialog-content>\n\t<mat-form-field>\n\t\t<mat-select placeholder=\"{{'language' | translate}}\" [(ngModel)]=\"selectedLang\">\n\t\t <mat-option *ngFor=\"let lang of remainingLangs\" [value]=\"lang\">\n\t\t\t\t{{lang | translate}}\n\t\t </mat-option>\n\t\t</mat-select>\n\t</mat-form-field>\n</div>\n<div mat-dialog-actions>\n \t<button mat-button style=\"float:right;\" (click)=\"dialogRef.close(selectedLang)\">OK</button>\n</div>\n"
},] },
];
/** @nocollapse */
TranslateDialogComponent.ctorParameters = function () {
return [
{ type: material.MatDialogRef, },
{ type: undefined, decorators: [{ type: core.Inject, args: [material.MAT_DIALOG_DATA,] },] },
];
};
return TranslateDialogComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var /** @type {?} */ INPUT_INPUT_CONTROL_VALUE_ACCESSOR$3 = {
provide: forms.NG_VALUE_ACCESSOR,
useExisting: core.forwardRef(function () { return TranslateComponent; }),
multi: true,
};
var TranslateComponent = (function (_super) {
__extends(TranslateComponent, _super);
function TranslateComponent(dialog$$1, changeDetector) {
var _this = _super.call(this) || this;
_this.dialog = dialog$$1;
_this.changeDetector = changeDetector;
_this.height = "150px";
_this.toolbarConfig = [
['bold', 'italic', 'underline'],
['fontName', 'fontSize', 'color'],
['justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull', 'indent', 'outdent'],
['cut', 'copy', 'delete', 'removeFormat', 'undo', 'redo'],
['horizontalLine', 'orderedList', 'unorderedList'],
['link', 'unlink']
];
_this.label = '';
_this.type = undefined;
_this.required = undefined;
_this.min = undefined;
_this.max = undefined;
_this.minLength = undefined;
_this.maxLength = undefined;
_this.langs = ['es'];
//TODO: Guachau...
_this.allLangs = ['es', 'en', 'fr', 'de'];
_this.selectedIndex = 0;
_this.selectedLang = '';
_this.templateType = '';
return _this;
}
/**
* @return {?}
*/
TranslateComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this.selectedLang = this.langs[0];
this.templateType = TranslateComponent.getTemplateType(this.type);
this.initValue(this.value);
};
/**
* @param {?} arr
* @param {?} value
* @return {?}
*/
TranslateComponent.prototype.inArray = /**
* @param {?} arr
* @param {?} value
* @return {?}
*/
function (arr, value) {
return arr.indexOf(value) > -1;
};
/**
* @param {?} value
* @return {?}
*/
TranslateComponent.prototype.initValue = /**
* @param {?} value
* @return {?}
*/
function (value) {
this.valuesJSON = {};
if (value) {
if (typeof value === 'string') {
value = JSON.parse(value);
}
this.langs = [];
for (var /** @type {?} */ lang in value) {
if (this.inArray(this.allLangs, lang)) {
this.langs.push(lang);
}
}
}
try {
for (var _a = __values(this.langs), _b = _a.next(); !_b.done; _b = _a.next()) {
var lang = _b.value;
if (value) {
this.valuesJSON[lang] = (value[lang] || '');
}
else {
this.valuesJSON[lang] = '';
}
}
}
catch (e_1_1) {
e_1 = { error: e_1_1 };
}
finally {
try {
if (_b && !_b.done && (_c = _a.return))
_c.call(_a);
}
finally {
if (e_1)
throw e_1.error;
}
}
this.values = this.parseInit(this.valuesJSON);
var /** @type {?} */ jsonValue = JSON.stringify(this.valuesJSON);
this.control.setValue(jsonValue);
var e_1, _c;
};
/**
* @param {?} valuesJSON
* @return {?}
*/
TranslateComponent.prototype.parseInit = /**
* @param {?} valuesJSON
* @return {?}
*/
function (valuesJSON) {
var /** @type {?} */ values = {};
for (var /** @type {?} */ lang in valuesJSON) {
values[lang] = this.parseValue(valuesJSON[lang]);
}
return values;
};
/**
* @param {?} value
* @return {?}
*/
TranslateComponent.prototype.parseValue = /**
* @param {?} value
* @return {?}
*/
function (value) {
if (this.templateType == 'file-input') {
return undefined;
}
else {
return value;
}
};
/**
* @param {?} type
* @return {?}
*/
TranslateComponent.getTemplateType = /**
* @param {?} type
* @return {?}
*/
function (type) {
switch (type) {
case 'text':
case 'input':
return 'input';
case 'textarea':
return 'area';
case 'text-editor':
return 'editor';
case 'file-input':
return 'file-input';
default:
return '';
}
};
/**
* @param {?} lang
* @return {?}
*/
TranslateComponent.prototype.selectLang = /**
* @param {?} lang
* @return {?}
*/
function (lang) {
var /** @type {?} */ index = this.langs.findIndex(function (row) {
return row == lang;
});
if (index != this.selectedIndex) {
this.selectedIndex = index;