@recursyve/forms-frontend
Version:
790 lines (747 loc) • 79.3 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/cdk/overlay'), require('@angular/cdk/table'), require('@angular/common'), require('@angular/core'), require('@angular/flex-layout'), require('@angular/forms'), require('@angular/material'), require('@ngmodule/material-carousel'), require('@ngx-translate/core'), require('ngx-material-timepicker'), require('uuid'), require('util'), require('idx'), require('@angular/cdk/portal'), require('rxjs'), require('@angular/platform-browser')) :
typeof define === 'function' && define.amd ? define('@recursyve/forms-frontend', ['exports', '@angular/cdk/overlay', '@angular/cdk/table', '@angular/common', '@angular/core', '@angular/flex-layout', '@angular/forms', '@angular/material', '@ngmodule/material-carousel', '@ngx-translate/core', 'ngx-material-timepicker', 'uuid', 'util', 'idx', '@angular/cdk/portal', 'rxjs', '@angular/platform-browser'], factory) :
(global = global || self, factory((global.recursyve = global.recursyve || {}, global.recursyve['forms-frontend'] = {}), global.ng.cdk.overlay, global.ng.cdk.table, global.ng.common, global.ng.core, global.ng['flex-layout'], global.ng.forms, global.ng.material, global['@ngmodule/material-carousel'], global['@ngx-translate/core'], global['ngx-material-timepicker'], global.uuid, global.util, global.idx, global.ng.cdk.portal, global.rxjs, global.ng.platformBrowser));
}(this, (function (exports, overlay, table, common, core, flexLayout, forms, material, materialCarousel, core$1, ngxMaterialTimepicker, uuid, util, idx, portal, rxjs, platformBrowser) { 'use strict';
idx = idx && idx.hasOwnProperty('default') ? idx['default'] : idx;
/*! *****************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
/* 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);
};
function __rest(s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
}
function __decorate(decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
}
function __param(paramIndex, decorator) {
return function (target, key) { decorator(target, key, paramIndex); }
}
function __metadata(metadataKey, metadataValue) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
}
function __awaiter(thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
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) : adopt(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 __createBinding(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}
function __exportStar(m, exports) {
for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) exports[p] = m[p];
}
function __values(o) {
var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
if (m) return m.call(o);
if (o && typeof o.length === "number") return {
next: function () {
if (o && i >= o.length) o = void 0;
return { value: o && o[i++], done: !o };
}
};
throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
}
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;
}
function __spreadArrays() {
for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
for (var r = Array(s), k = 0, i = 0; i < il; i++)
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
r[k] = a[j];
return r;
};
function __await(v) {
return this instanceof __await ? (this.v = v, this) : new __await(v);
}
function __asyncGenerator(thisArg, _arguments, generator) {
if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
var g = generator.apply(thisArg, _arguments || []), i, q = [];
return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
function verb(n) { if (g[n]) i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }
function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
function fulfill(value) { resume("next", value); }
function reject(value) { resume("throw", value); }
function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); }
}
function __asyncDelegator(o) {
var i, p;
return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
}
function __asyncValues(o) {
if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
var m = o[Symbol.asyncIterator], i;
return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }
}
function __makeTemplateObject(cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
function __importStar(mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
result.default = mod;
return result;
}
function __importDefault(mod) {
return (mod && mod.__esModule) ? mod : { default: mod };
}
function __classPrivateFieldGet(receiver, privateMap) {
if (!privateMap.has(receiver)) {
throw new TypeError("attempted to get private field on non-instance");
}
return privateMap.get(receiver);
}
function __classPrivateFieldSet(receiver, privateMap, value) {
if (!privateMap.has(receiver)) {
throw new TypeError("attempted to set private field on non-instance");
}
privateMap.set(receiver, value);
return value;
}
var FormViewBase = /** @class */ (function () {
function FormViewBase() {
this.editable = false;
this.onValueChange = new core.EventEmitter();
}
FormViewBase.prototype.onModelChange = function (value) {
if (this.config) {
if (!util.isNullOrUndefined(value)) {
if (!this.model) {
this.model = { value: value };
}
else {
this.model.value = value;
}
}
this.onValueChange.emit({ key: this.config.keyName, viewModel: this.model });
}
};
__decorate([
core.Input()
], FormViewBase.prototype, "config", void 0);
__decorate([
core.Input()
], FormViewBase.prototype, "model", void 0);
__decorate([
core.Input()
], FormViewBase.prototype, "editable", void 0);
__decorate([
core.Output()
], FormViewBase.prototype, "onValueChange", void 0);
return FormViewBase;
}());
var CheckboxComponent = /** @class */ (function (_super) {
__extends(CheckboxComponent, _super);
function CheckboxComponent() {
var _this = _super.call(this) || this;
_this.id = uuid.v4();
return _this;
}
CheckboxComponent.prototype.ngOnInit = function () {
if (!this.model) {
this.model = { value: null };
}
if (this.config.typeConfig.multi && (this.model.value === null || this.model.value === undefined)) {
this.model.value = [];
}
if (this.config.typeConfig.multi && typeof this.model.value === "number") {
this.model.value = [this.model.value];
}
};
CheckboxComponent.prototype.onCheck = function (optionValue) {
if (this.config.typeConfig.multi) {
if (this.model.value.includes(optionValue)) {
var valueIndex = this.model.value.indexOf(optionValue);
if (valueIndex >= 0) {
this.model.value.splice(valueIndex, 1);
}
}
else {
this.model.value.push(optionValue);
}
}
else {
if (this.model.value === optionValue) {
this.model.value = null;
}
else {
this.model.value = optionValue;
}
}
this.onModelChange();
};
CheckboxComponent.prototype.isChecked = function (optionValue) {
if (this.config.typeConfig.multi) {
return this.model.value.indexOf(optionValue) >= 0;
}
else {
return this.model.value === optionValue;
}
};
CheckboxComponent = __decorate([
core.Component({
encapsulation: core.ViewEncapsulation.None,
selector: "form-checkbox",
template: "<div class=\"form-view\" mat-line fxLayout=\"column\" fxLayoutAlign=\"start start\">\n <div class=\"form-view-title\">\n <h4>\n <strong [innerHTML]=\"config?.title | trust: 'html'\"></strong>\n </h4>\n </div>\n <div fxLayout=\"row wrap\" fxLayoutAlign=\"start center\" fxLayoutGap=\"5px\" class=\"form-view-content\">\n <ng-container *ngFor=\"let option of config?.typeConfig?.options\">\n <div class=\"checkbox-line\" fxFlex=\"1 1 calc(50% - 5px)\" fxLayout=\"row\" fxLayoutAlign=\"start center\">\n <mat-checkbox\n fxFlex=\"0 1 auto\"\n id=\"{{id}}{{option.value}}\"\n [checked]=\"isChecked(option.value)\"\n (change)=\"onCheck(option.value)\"\n [disabled]=\"!editable\">\n <div [innerHTML]=\"option.text | trust: 'html'\"></div>\n </mat-checkbox>\n <tooltip fxFlex=\"1 0 auto\" [tooltipContent]=\"option.description\"></tooltip>\n </div>\n </ng-container>\n </div>\n</div>\n",
styles: [".mat-checkbox span{word-break:normal;white-space:normal}.checkbox-line{min-height:40px;min-width:200px!important}"]
})
], CheckboxComponent);
return CheckboxComponent;
}(FormViewBase));
var GeolocationService = /** @class */ (function () {
function GeolocationService() {
}
GeolocationService.prototype.getCurrentGeolocation = function (options) {
return new Promise(function (resolve, reject) {
navigator.geolocation.getCurrentPosition(function (position) {
resolve(position);
}, function (positionError) {
reject(positionError);
}, options);
});
};
GeolocationService = __decorate([
core.Injectable()
], GeolocationService);
return GeolocationService;
}());
var CoordComponent = /** @class */ (function (_super) {
__extends(CoordComponent, _super);
function CoordComponent(geolocationService) {
var _this = _super.call(this) || this;
_this.geolocationService = geolocationService;
return _this;
}
CoordComponent.prototype.ngOnInit = function () {
this.initModel();
};
CoordComponent.prototype.initModel = function () {
if (!this.model) {
this.model = { value: {} };
}
else if (!this.model.value) {
this.model.value = {};
}
return true;
};
CoordComponent.prototype.onLatitudeChange = function (value) {
this.model.value.latitude = value;
this.onModelChange();
};
CoordComponent.prototype.onLongitudeChange = function (value) {
this.model.value.longitude = value;
this.onModelChange();
};
CoordComponent.prototype.setCoordWithDevice = function () {
var _this = this;
this.geolocationService.getCurrentGeolocation().then(function (position) {
_this.model.value.latitude = position.coords.latitude;
_this.model.value.longitude = position.coords.longitude;
_this.onModelChange();
});
};
CoordComponent.ctorParameters = function () { return [
{ type: GeolocationService }
]; };
CoordComponent = __decorate([
core.Component({
encapsulation: core.ViewEncapsulation.None,
selector: "form-coord",
template: "<div mat-line fxLayout=\"column\" fxLayoutAlign=\"start start\" class=\"form-view\">\n <div class=\"form-view-title\">\n <h4>\n <strong [innerHTML]=\"config?.title | trust: 'html'\"></strong>s\n </h4>\n </div>\n <div fxLayout=\"column\" fxLayoutAlign=\"start start\" fxLayoutGap=\"5px\" class=\"form-view-content coord-content\">\n <ng-container *ngIf=\"editable\">\n <div fxLayout=\"row wrap\" fxLayoutAlign=\"start center\" fxLayoutGap=\"5px\" class=\"fullWidth\">\n <mat-form-field fxFlex=\"calc(50% - 5px)\">\n <input\n matInput\n [placeholder]=\"'recursyve_forms.components.coord.latitude' | translate\"\n [ngModel]=\"model?.value?.latitude\"\n (ngModelChange)=\"onLatitudeChange($event)\"\n />\n </mat-form-field>\n <mat-form-field fxFlex=\"50%\">\n <input\n matInput\n [placeholder]=\"'recursyve_forms.components.coord.longitude' | translate\"\n [ngModel]=\"model?.value?.longitude\"\n (ngModelChange)=\"onLongitudeChange($event)\"\n />\n </mat-form-field>\n </div>\n <button mat-raised-button color=\"accent\" (click)=\"setCoordWithDevice()\">\n {{ \"recursyve_forms.components.coord.update_with_user_location\" | translate }}\n <mat-icon class=\"material-icons\">my_location</mat-icon>\n </button>\n </ng-container>\n <ng-container *ngIf=\"!editable\">\n <div fxLayout=\"row wrap\" fxLayoutAlign=\"start center\" fxLayoutGap=\"5px\" class=\"fullWidth\">\n <div fxFlex=\"calc(50% - 5px)\">\n <span>\n {{ \"recursyve_forms.components.coord.latitude\" | translate | titlecase }}: {{\n model.value.latitude || (\"recursyve_forms.general.not_available\" | translate) }}\n </span>\n </div>\n <div fxFlex=\"50%\">\n <span>\n {{ \"recursyve_forms.components.coord.longitude\" | translate | titlecase }}: {{\n model.value.longitude || (\"recursyve_forms.general.not_available\" | translate) }}\n </span>\n </div>\n </div>\n </ng-container>\n </div>\n</div>\n",
styles: [".coord-content mat-form-field{min-width:100px!important}"]
})
], CoordComponent);
return CoordComponent;
}(FormViewBase));
var DateComponent = /** @class */ (function (_super) {
__extends(DateComponent, _super);
function DateComponent() {
return _super.call(this) || this;
}
DateComponent.prototype.ngOnInit = function () {
if (!this.model) {
this.model = { value: new Date() };
}
else if (!this.model.value) {
this.model.value = new Date();
}
};
DateComponent = __decorate([
core.Component({
encapsulation: core.ViewEncapsulation.None,
selector: "form-date",
template: "<div mat-line fxLayout=\"column\" fxLayoutAlign=\"start start\" class=\"form-view\">\n <div class=\"form-view-title\">\n <h4>\n <strong>\n <strong [innerHTML]=\"config?.title | trust: 'html'\"></strong>\n </strong>\n </h4>\n </div>\n <div class=\"form-view-content date-content\">\n <ng-container *ngIf=\"editable\">\n <mat-form-field>\n <input\n matInput\n #date_picker_input\n [value]=\"model.value\"\n (dateChange)=\"onModelChange($event.value)\"\n [matDatepicker]=\"date_picker\"\n (focus)=\"date_picker.open()\"\n />\n <mat-datepicker-toggle matSuffix [for]=\"date_picker\"></mat-datepicker-toggle>\n <mat-datepicker #date_picker (closed)=\"date_picker_input.blur()\"></mat-datepicker>\n </mat-form-field>\n </ng-container>\n <ng-container *ngIf=\"!editable\">\n <span>\n {{ (model.value | date: 'fullDate') || (\"recursyve_forms.general.not_available\" | translate) }}\n </span>\n </ng-container>\n </div>\n</div>\n",
styles: [".date-content mat-form-field{width:100%}"]
})
], DateComponent);
return DateComponent;
}(FormViewBase));
var DropdownComponent = /** @class */ (function (_super) {
__extends(DropdownComponent, _super);
function DropdownComponent() {
return _super.call(this) || this;
}
DropdownComponent.prototype.ngOnInit = function () {
if (!this.model) {
this.model = {};
}
};
DropdownComponent.prototype.onSelectOption = function (matSelectChange) {
var option = matSelectChange.value;
if (this.config) {
if (!this.model) {
this.model = { value: option.value };
}
else {
this.model.value = option.value;
}
this.onModelChange();
}
};
DropdownComponent.prototype.getSelectedOption = function () {
var _this = this;
return this.config.typeConfig.options.find(function (option) { return option.value === _this.model.value; });
};
DropdownComponent = __decorate([
core.Component({
encapsulation: core.ViewEncapsulation.None,
selector: "form-dropdown",
template: "<div mat-line fxLayout=\"column\" fxLayoutAlign=\"start start\" class=\"form-view\">\n <div class=\"form-view-title\">\n <h4>\n <strong>\n <strong [innerHTML]=\"config?.title | trust: 'html'\"></strong>\n </strong>\n </h4>\n </div>\n <div class=\"form-view-content dropdown-content\">\n <ng-container *ngIf=\"editable\">\n <div class=\"checkbox-line\" fxFlex=\"1 1 calc(50% - 5px)\" fxLayout=\"row\" fxLayoutAlign=\"start center\">\n <mat-form-field>\n <mat-select [value]=\"getSelectedOption()\" (selectionChange)=\"onSelectOption($event)\">\n <mat-option *ngFor=\"let option of config?.typeConfig?.options\" [value]=\"option\">\n <div [innerHTML]=\"option?.text | trust: 'html'\"></div>\n </mat-option>\n </mat-select>\n </mat-form-field>\n <tooltip fxFlex=\"1 0 auto\" [tooltipContent]=\"getSelectedOption()?.description\"></tooltip>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!editable\">\n <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n <div fxFlex=\"0 1 auto\" class=\"text-justify\">\n <span *ngIf=\"getSelectedOption()?.text; else noValue\"\n [innerHTML]=\"getSelectedOption().text | trust: 'html'\"\n ></span>\n <ng-template #noValue>\n <span>{{ \"recursyve_forms.general.not_available\" | translate }}</span>\n </ng-template>\n </div>\n <tooltip fxFlex=\"1 0 auto\" [tooltipContent]=\"getSelectedOption()?.description\"></tooltip>\n </div>\n </ng-container>\n </div>\n</div>\n",
styles: [".dropdown-content mat-form-field{width:100%}"]
})
], DropdownComponent);
return DropdownComponent;
}(FormViewBase));
var ViewType;
(function (ViewType) {
ViewType["DATE"] = "date";
ViewType["LONG_TEXT"] = "long_text";
ViewType["SHORT_TEXT"] = "short_text";
ViewType["CHECKBOX"] = "checkbox";
ViewType["PICTURE"] = "picture";
ViewType["TIME"] = "time";
ViewType["GROUP"] = "group";
ViewType["TABLE"] = "table";
ViewType["COORD"] = "coord";
ViewType["DROPDOWN"] = "dropdown";
ViewType["TEXT"] = "text";
})(ViewType || (ViewType = {}));
function isNullOrUndefined(value) {
return value === null || value === undefined;
}
var FormViewComponent = /** @class */ (function () {
function FormViewComponent() {
this.editable = false;
this.depth = 0;
this.onValueChange = new core.EventEmitter();
this.types = ViewType;
}
FormViewComponent.prototype.isTypeOf = function (type) {
return this.config.type === type;
};
FormViewComponent.prototype.onModelChange = function (valueChangeEvent) {
this.onValueChange.emit(valueChangeEvent);
};
FormViewComponent.prototype.onAppendableChange = function (valueChangeEvent) {
this.model[valueChangeEvent.key] = valueChangeEvent.viewModel;
this.onModelChange({ key: this.config.keyName, viewModel: this.model });
};
FormViewComponent.prototype.showAppendable = function (appendable) {
if (appendable.expectedParentValue === null || appendable.expectedParentValue === undefined) {
return true;
}
if (this.config.type === ViewType.CHECKBOX) {
var value = idx(this.model, function (_) { return _.value; });
if (isNullOrUndefined(value)) {
return false;
}
if (this.config.typeConfig.multi) {
return value.some(function (v) { return v === appendable.expectedParentValue; });
}
return value === appendable.expectedParentValue;
}
else {
return this.model.value === appendable.expectedParentValue;
}
};
__decorate([
core.Input()
], FormViewComponent.prototype, "config", void 0);
__decorate([
core.Input()
], FormViewComponent.prototype, "model", void 0);
__decorate([
core.Input()
], FormViewComponent.prototype, "editable", void 0);
__decorate([
core.Input()
], FormViewComponent.prototype, "depth", void 0);
__decorate([
core.Output()
], FormViewComponent.prototype, "onValueChange", void 0);
FormViewComponent = __decorate([
core.Component({
encapsulation: core.ViewEncapsulation.None,
selector: "form-view",
template: "<ng-container *ngIf=\"config\">\n <form-date\n *ngIf=\"isTypeOf(types.DATE)\"\n [model]=\"model\"\n [config]=\"config\"\n [editable]=\"editable\"\n (onValueChange)=\"onModelChange($event)\"\n ></form-date>\n <form-long-text\n *ngIf=\"isTypeOf(types.LONG_TEXT)\"\n [model]=\"model\"\n [config]=\"config\"\n [editable]=\"editable\"\n (onValueChange)=\"onModelChange($event)\"\n ></form-long-text>\n <form-short-text\n *ngIf=\"isTypeOf(types.SHORT_TEXT)\"\n [model]=\"model\"\n [config]=\"config\"\n [editable]=\"editable\"\n (onValueChange)=\"onModelChange($event)\"\n ></form-short-text>\n <form-checkbox\n *ngIf=\"isTypeOf(types.CHECKBOX)\"\n [model]=\"model\"\n [config]=\"config\"\n [editable]=\"editable\"\n (onValueChange)=\"onModelChange($event)\"\n ></form-checkbox>\n <form-picture\n *ngIf=\"isTypeOf(types.PICTURE)\"\n [model]=\"model\"\n [config]=\"config\"\n [editable]=\"editable\"\n (onValueChange)=\"onModelChange($event)\"\n ></form-picture>\n <form-time\n *ngIf=\"isTypeOf(types.TIME)\"\n [model]=\"model\"\n [config]=\"config\"\n [editable]=\"editable\"\n (onValueChange)=\"onModelChange($event)\"\n ></form-time>\n <form-group\n *ngIf=\"isTypeOf(types.GROUP)\"\n [config]=\"config\"\n [model]=\"model\"\n [editable]=\"editable\"\n [depth]=\"depth + 1\"\n (onValueChange)=\"onModelChange($event)\"\n ></form-group>\n <form-table\n *ngIf=\"isTypeOf(types.TABLE)\"\n [model]=\"model\"\n [config]=\"config\"\n [editable]=\"editable\"\n (onValueChange)=\"onModelChange($event)\"\n ></form-table>\n <form-coord\n *ngIf=\"isTypeOf(types.COORD)\"\n [model]=\"model\"\n [config]=\"config\"\n [editable]=\"editable\"\n (onValueChange)=\"onModelChange($event)\"\n ></form-coord>\n <form-dropdown\n *ngIf=\"isTypeOf(types.DROPDOWN)\"\n [model]=\"model\"\n [config]=\"config\"\n [editable]=\"editable\"\n (onValueChange)=\"onModelChange($event)\"\n ></form-dropdown>\n <form-text *ngIf=\"isTypeOf(types.TEXT)\" [config]=\"config\"></form-text>\n <ng-container *ngIf=\"config?.appendables?.length > 0\">\n <ng-container *ngFor=\"let appendable of config?.appendables\">\n <ng-container *ngIf=\"showAppendable(appendable)\">\n <form-view\n [config]=\"appendable.viewConfig\"\n [model]=\"model[appendable.viewConfig.keyName]\"\n [editable]=\"editable\"\n (onValueChange)=\"onAppendableChange($event)\"\n >\n </form-view>\n </ng-container>\n </ng-container>\n </ng-container>\n</ng-container>\n",
styles: [""]
})
], FormViewComponent);
return FormViewComponent;
}());
var GroupComponent = /** @class */ (function (_super) {
__extends(GroupComponent, _super);
function GroupComponent() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.depth = 0;
return _this;
}
GroupComponent.prototype.getModel = function (key) {
if (!this.model) {
this.model = {};
}
if (!this.model[key]) {
this.onChildModelChange({ key: key, viewModel: {} });
}
return this.model[key];
};
GroupComponent.prototype.onChildModelChange = function (valueChangeEvent) {
if (this.config) {
if (!this.model) {
this.model = {};
}
this.model[valueChangeEvent.key] = valueChangeEvent.viewModel;
this.onModelChange();
}
};
__decorate([
core.Input()
], GroupComponent.prototype, "depth", void 0);
GroupComponent = __decorate([
core.Component({
encapsulation: core.ViewEncapsulation.None,
selector: "form-group",
template: "<ng-container *ngIf=\"config?.typeConfig?.viewConfigs?.length > 0\">\n <ng-container *ngIf=\"depth <= 1\">\n <mat-card>\n <mat-card-header *ngIf=\"config?.title\">\n <mat-card-title>\n <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\n </mat-card-title>\n </mat-card-header>\n <mat-card-content>\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </mat-card-content>\n </mat-card>\n </ng-container>\n <ng-container *ngIf=\"depth > 1\">\n <div fxLayout=\"column\" fxLayoutAlign=\"start start\">\n <ng-container *ngIf=\"config?.title\" [ngTemplateOutlet]=\"title\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </div>\n </ng-container>\n</ng-container>\n\n<ng-template #title>\n <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n <span *ngIf=\"config?.title\" [innerHTML]=\"config?.title | trust: 'html'\"></span>\n <tooltip [tooltipContent]=\"config.description\"></tooltip>\n </div>\n</ng-template>\n\n<ng-template #content>\n <div display [displayConfig]=\"config?.displayConfig\" [isFlexGroup]=\"true\">\n <ng-container *ngFor=\"let subViewConfig of config?.typeConfig?.viewConfigs\">\n <div display [displayConfig]=\"subViewConfig?.displayConfig\" [isFlexGroupItem]=\"true\">\n <form-view\n [config]=\"subViewConfig\"\n [model]=\"getModel(subViewConfig.keyName)\"\n [editable]=\"editable\"\n [depth]=\"depth\"\n (onValueChange)=\"onChildModelChange($event)\"\n ></form-view>\n </div>\n </ng-container>\n </div>\n</ng-template>\n",
styles: [""]
})
], GroupComponent);
return GroupComponent;
}(FormViewBase));
var LongTextComponent = /** @class */ (function (_super) {
__extends(LongTextComponent, _super);
function LongTextComponent() {
return _super.call(this) || this;
}
LongTextComponent.prototype.ngOnInit = function () {
if (!this.model) {
this.model = { value: "" };
}
else if (!this.model.value) {
this.model.value = "";
}
};
LongTextComponent = __decorate([
core.Component({
encapsulation: core.ViewEncapsulation.None,
selector: "form-long-text",
template: "<div mat-line fxLayout=\"column\" fxLayoutAlign=\"start start\" class=\"form-view\">\n <div class=\"form-view-title\">\n <h4>\n <strong [innerHTML]=\"config?.title | trust: 'html'\"></strong>\n </h4>\n </div>\n <div class=\"form-view-content long-text-content\">\n <ng-container *ngIf=\"editable\">\n <mat-form-field>\n <textarea\n matInput\n type=\"text\"\n [ngModel]=\"model.value\"\n (ngModelChange)=\"onModelChange($event)\"\n ></textarea>\n </mat-form-field>\n </ng-container>\n <ng-container *ngIf=\"!editable\">\n <div class=\"text-justify\">\n <span>\n {{ model.value || (\"recursyve_forms.general.not_available\" | translate) }}\n </span>\n </div>\n </ng-container>\n </div>\n</div>\n",
styles: [".long-text-content mat-form-field{width:100%}"]
})
], LongTextComponent);
return LongTextComponent;
}(FormViewBase));
var PictureModalComponent = /** @class */ (function () {
function PictureModalComponent() {
this.selectedPictureIndex = 0;
this.editable = false;
this.close = new core.EventEmitter();
}
PictureModalComponent.prototype.changePicture = function (newSelectedIndex) {
this.selectedPictureIndex = newSelectedIndex;
};
PictureModalComponent.prototype.clickClose = function () {
this.close.emit();
};
__decorate([
core.Output()
], PictureModalComponent.prototype, "close", void 0);
__decorate([
core.ViewChild(materialCarousel.MatCarouselComponent, { static: true })
], PictureModalComponent.prototype, "matCarousel", void 0);
PictureModalComponent = __decorate([
core.Component({
encapsulation: core.ViewEncapsulation.None,
selector: "form-picture-modal",
template: "<mat-card>\n <mat-card-content>\n <div fxLayout=\"column\" fxLayoutAlign=\"start center\" fxLayoutGap=\"10px\" class=\"picture-modal-inner-container\">\n <div fxFlex=\"90%\" fxLayoutAlign=\"center center\" class=\"carousel-container\">\n <mat-carousel\n timings=\"250ms ease-in\"\n [autoplay]=\"false\"\n interval=\"5000\"\n color=\"accent\"\n maxWidth=\"auto\"\n proportion=\"88\"\n [slides]=\"pictures.length\"\n [loop]=\"true\"\n [hideArrows]=\"false\"\n [hideIndicators]=\"false\"\n [useKeyboard]=\"true\"\n [useMouseWheel]=\"true\"\n orientation=\"ltr\"\n (change)=\"changePicture($event)\"\n >\n <mat-carousel-slide\n #matCarouselSlide\n *ngFor=\"let picture of pictures\"\n [image]=\"picture\"\n overlayColor=\"#00000000\"\n [hideOverlay]=\"false\"\n ></mat-carousel-slide>\n </mat-carousel>\n </div>\n <div fxFlex=\"10%\" fxLayoutAlign=\"center center\" class=\"action-container\">\n <button mat-raised-button color=\"accent\" (click)=\"clickClose()\">\n {{ \"recursyve_forms.general.close\" | translate }}\n </button>\n </div>\n </div>\n </mat-card-content>\n</mat-card>\n",
styles: ["form-picture-modal{height:100%;max-width:750px;margin:auto;width:100%}form-picture-modal mat-card{box-sizing:border-box;height:100%;width:100%}form-picture-modal mat-card mat-card-content{height:100%}form-picture-modal mat-card mat-card-content .picture-modal-inner-container{height:100%;width:100%}form-picture-modal mat-card mat-card-content .picture-modal-inner-container .action-container,form-picture-modal mat-card mat-card-content .picture-modal-inner-container .carousel-container{width:100%}form-picture-modal mat-card mat-card-content .picture-modal-inner-container .carousel-container mat-carousel{height:100%;width:100%}form-picture-modal mat-card mat-card-content .picture-modal-inner-container .carousel-container mat-carousel .carousel .carousel-list>li>div{background-size:contain}"]
})
], PictureModalComponent);
return PictureModalComponent;
}());
var PictureModalService = /** @class */ (function () {
function PictureModalService(overlay) {
this.overlay = overlay;
}
PictureModalService.prototype.open = function (config) {
var positionStrategy = this.overlay
.position()
.global()
.centerHorizontally()
.centerVertically();
var overlayRef = this.overlay.create({
backdropClass: "cdk-overlay-dark-backdrop",
hasBackdrop: true,
positionStrategy: positionStrategy,
scrollStrategy: this.overlay.scrollStrategies.block(),
width: "70%"
});
var pictureModalPortal = new portal.ComponentPortal(PictureModalComponent);
var pictureModalRef = overlayRef.attach(pictureModalPortal);
pictureModalRef.instance.close.subscribe(function () {
overlayRef.dispose();
});
pictureModalRef.instance.editable = config.editable;
pictureModalRef.instance.pictures = config.pictures;
pictureModalRef.instance.selectedPictureIndex = config.selectedIndex;
overlayRef.backdropClick().subscribe(function () { return overlayRef.dispose(); });
};
PictureModalService.ctorParameters = function () { return [
{ type: overlay.Overlay }
]; };
PictureModalService = __decorate([
core.Injectable()
], PictureModalService);
return PictureModalService;
}());
var FormStorageInterface = /** @class */ (function () {
function FormStorageInterface() {
}
return FormStorageInterface;
}());
var PictureComponent = /** @class */ (function (_super) {
__extends(PictureComponent, _super);
function PictureComponent(pictureModalService, storageService) {
var _this = _super.call(this) || this;
_this.pictureModalService = pictureModalService;
_this.storageService = storageService;
_this.id = uuid.v4();
_this.pictureUrls = [];
_this.uploading = false;
return _this;
}
PictureComponent.prototype.ngOnInit = function () {
return __awaiter(this, void 0, void 0, function () {
var e_1, _a, _b, _c, storageId, url, e_1_1;
return __generator(this, function (_d) {
switch (_d.label) {
case 0:
if (!this.model) {
this.model = { value: [] };
}
else if (!this.model.value) {
this.model.value = [];
}
if (typeof this.model.value === "string") {
this.model.value = [this.model.value];
}
_d.label = 1;
case 1:
_d.trys.push([1, 6, 7, 8]);
_b = __values(this.model.value), _c = _b.next();
_d.label = 2;
case 2:
if (!!_c.done) return [3 /*break*/, 5];
storageId = _c.value;
return [4 /*yield*/, this.storageService.getDownloadUrl(storageId)];
case 3:
url = _d.sent();
this.pictureUrls.push(url);
_d.label = 4;
case 4:
_c = _b.next();
return [3 /*break*/, 2];
case 5: return [3 /*break*/, 8];
case 6:
e_1_1 = _d.sent();
e_1 = { error: e_1_1 };
return [3 /*break*/, 8];
case 7:
try {
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
}
finally { if (e_1) throw e_1.error; }
return [7 /*endfinally*/];
case 8: return [2 /*return*/];
}
});
});
};
PictureComponent.prototype.ngAfterViewInit = function () {
var input = document.getElementById("input-" + this.id);
var button = document.getElementById("button-" + this.id);
button.addEventListener("click", function () {
input.click();
});
};
PictureComponent.prototype.handleFile = function (fileList) {
var _this = this;
if (fileList.length <= 0) {
return;
}
this.uploading = true;
var uploadCount = 0;
var uploaded = function () {
uploadCount++;
if (uploadCount >= fileList.length) {
_this.uploading = false;
}
};
var files = [];
for (var i = 0; i < fileList.length; ++i) {
files.push(fileList[i]);
}
files.forEach(function (file) { return __awaiter(_this, void 0, void 0, function () {
var storageId, url;
return __generator(this, function (_a) {
switch (_a.label) {
case 0: return [4 /*yield*/, this.storageService.upload(file, "files/work-orders/")];
case 1:
storageId = (_a.sent())[0];
this.model.value.push(storageId);
return [4 /*yield*/, this.storageService.getDownloadUrl(storageId)];
case 2:
url = _a.sent();
this.pictureUrls.push(url);
this.onModelChange();
uploaded();
return [2 /*return*/];
}
});
}); });
};
PictureComponent.prototype.clickView = function (i) {
if (this.uploading) {
return;
}
this.pictureModalService.open({
closeIfAllRemoved: true,
editable: this.editable,
pictures: this.pictureUrls,
selectedIndex: i
});
};
PictureComponent.prototype.removeImage = function (i) {
this.model.value.splice(i, 1);
this.pictureUrls.splice(i, 1);
this.onModelChange();
};
PictureComponent.prototype.onModelChange = function () {
this.onValueChange.emit({ key: this.config.keyName, viewModel: this.model });
};
PictureComponent.ctorParameters = function () { return [
{ type: PictureModalService },
{ type: FormStorageInterface }
]; };
PictureComponent = __decorate([
core.Component({
encapsulation: core.ViewEncapsulation.None,
selector: "form-picture",
template: "<div mat-line fxLayout=\"column\" fxLayoutAlign=\"start start\" class=\"form-view\">\n <div class=\"form-view-title\">\n <h4>\n <strong [innerHTML]=\"config?.title | trust: 'html'\"></strong>\n </h4>\n </div>\n <div class=\"form-view-content scrolling-carousel\" fxLayout