@recursyve/forms-frontend
Version:
735 lines (714 loc) • 63.1 kB
JavaScript
import { __decorate, __extends, __awaiter, __generator, __values } from 'tslib';
import { Overlay, OverlayModule } from '@angular/cdk/overlay';
import { CdkColumnDef } from '@angular/cdk/table';
import { CommonModule } from '@angular/common';
import { EventEmitter, Input, Output, Component, ViewEncapsulation, Injectable, ViewChild, HostBinding, Directive, Pipe, NgModule } from '@angular/core';
import { FlexModule } from '@angular/flex-layout';
import { FormsModule } from '@angular/forms';
import { MatButtonModule, MatCardModule, MatCheckboxModule, MatDatepickerModule, MatFormFieldModule, MatIconModule, MatInputModule, MatLineModule, MatNativeDateModule, MatProgressSpinnerModule, MatSelectModule, MatTableModule, MatTooltipModule, MatBadgeModule } from '@angular/material';
import { MatCarouselComponent, MatCarouselModule } from '@ngmodule/material-carousel';
import { TranslateModule } from '@ngx-translate/core';
import { NgxMaterialTimepickerModule } from 'ngx-material-timepicker';
import { v4 } from 'uuid';
import { isNullOrUndefined as isNullOrUndefined$1 } from 'util';
import idx from 'idx';
import { ComponentPortal } from '@angular/cdk/portal';
import { BehaviorSubject } from 'rxjs';
import { DomSanitizer } from '@angular/platform-browser';
var FormViewBase = /** @class */ (function () {
function FormViewBase() {
this.editable = false;
this.onValueChange = new EventEmitter();
}
FormViewBase.prototype.onModelChange = function (value) {
if (this.config) {
if (!isNullOrUndefined$1(value)) {
if (!this.model) {
this.model = { value: value };
}
else {
this.model.value = value;
}
}
this.onValueChange.emit({ key: this.config.keyName, viewModel: this.model });
}
};
__decorate([
Input()
], FormViewBase.prototype, "config", void 0);
__decorate([
Input()
], FormViewBase.prototype, "model", void 0);
__decorate([
Input()
], FormViewBase.prototype, "editable", void 0);
__decorate([
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 = 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([
Component({
encapsulation: 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([
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([
Component({
encapsulation: 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([
Component({
encapsulation: 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([
Component({
encapsulation: 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 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([
Input()
], FormViewComponent.prototype, "config", void 0);
__decorate([
Input()
], FormViewComponent.prototype, "model", void 0);
__decorate([
Input()
], FormViewComponent.prototype, "editable", void 0);
__decorate([
Input()
], FormViewComponent.prototype, "depth", void 0);
__decorate([
Output()
], FormViewComponent.prototype, "onValueChange", void 0);
FormViewComponent = __decorate([
Component({
encapsulation: 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([
Input()
], GroupComponent.prototype, "depth", void 0);
GroupComponent = __decorate([
Component({
encapsulation: 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([
Component({
encapsulation: 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 EventEmitter();
}
PictureModalComponent.prototype.changePicture = function (newSelectedIndex) {
this.selectedPictureIndex = newSelectedIndex;
};
PictureModalComponent.prototype.clickClose = function () {
this.close.emit();
};
__decorate([
Output()
], PictureModalComponent.prototype, "close", void 0);
__decorate([
ViewChild(MatCarouselComponent, { static: true })
], PictureModalComponent.prototype, "matCarousel", void 0);
PictureModalComponent = __decorate([
Component({
encapsulation: 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 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 }
]; };
PictureModalService = __decorate([
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 = 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([
Component({
encapsulation: 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=\"row wrap\" fxLayoutGap=\"10px\">\n <ng-container *ngIf=\"this.pictureUrls && this.pictureUrls.length > 0\">\n <div *ngFor=\"let imageUrl of this.pictureUrls; let i = index;\" fxLayout=\"row\">\n <div class=\"scrolling-carousel-image-container\">\n <img\n class=\"scrolling-carousel-image\"\n [src]=\"imageUrl\"\n (click)=\"clickView(i)\"\n [alt]=\"imageUrl\"\n />\n </div>\n <div class=\"remove-button\" (click)=\"removeImage(i)\" *ngIf=\"editable\">\n <mat-icon class=\"close-icon\">close</mat-icon>\n </div>\n </div>\n </ng-container>\n <div *ngIf=\"!this.pictureUrls || this.pictureUrls.length <= 0\">\n {{ \"recursyve_forms.components.picture.no_picture\" | translate }}\n </div>\n </div>\n <div [hidden]=\"!editable\">\n <input\n id=\"input-{{id}}\"\n (change)=\"handleFile($event.target.files)\"\n type=\"file\"\n accept=\"image/*\"\n multiple\n [disabled]=\"uploading\"\n />\n <div fxLayout=\"row\" fxLayoutAlign=\"start center\" fxLayoutGap=\"5px\">\n <button mat-raised-button id=\"button-{{id}}\" color=\"accent\" [disabled]=\"uploading\">\n {{ (\"recursyve_forms.components.picture.add_picture\" | translate) }}\n </button>\n <mat-spinner [diameter]=\"22\" *ngIf=\"uploading\" color=\"accent\" [mode]=\"'indeterminate'\"></mat-spinner>\n </div>\n </div>\n</div>\n",
styles: [".scrolling-carousel{display:block;padding-bottom:1.25em}.scrolling-carousel-image-container{border:1px solid #d3d3d3;border-radius:5px;background-color:#f5f5f5;max-width:300px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;margin-right:auto;margin-top:10px}.scrolling-carousel-image{height:100px;margin:2px 4px}.scrolling-carousel-add{font-size:30px;margin:auto 0 auto 10px}.input-container{margin:1em auto}input[type=file]{display:none;position:absolute}.remove-button{width:24px;height:24px;border-radius:50%;background-color:#f44336;position:relative;top:3px;right:12px;cursor:pointer;box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)}.close-icon{font-size:15px!important;position:relative;left:5px;top:4px;color:#fff;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}"]
})
], PictureComponent);
return PictureComponent;
}(FormViewBase));
var ShortTextComponent = /** @class */ (function (_super) {
__extends(ShortTextComponent, _super);
function ShortTextComponent() {
return _super.call(this) || this;
}
ShortTextComponent.prototype.ngOnInit = function () {
if (!this.model) {
this.model = { value: "" };
}
else if (!this.model.value) {
this.model.value = "";
}
};
ShortTextComponent = __decorate([
Component({
encapsulation: ViewEncapsulation.None,
selector: "form-short-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 short-text-content\">\n <ng-container *ngIf=\"editable\">\n <mat-form-field>\n <input matInput type=\"text\" [ngModel]=\"model.value\" (ngModelChange)=\"onModelChange($event)\" />\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: [".short-text-content mat-form-field{width:100%}"]
})
], ShortTextComponent);
return ShortTextComponent;
}(FormViewBase));
var TableComponent = /** @class */ (function (_super) {
__extends(TableComponent, _super);
function TableComponent() {
var _this = _super.call(this) || this;
_this.dataSource = new BehaviorSubject([]);
return _this;
}
TableComponent.prototype.getColHeaders = function (withDelete) {
if (withDelete === void 0) { withDelete = false; }
if (withDelete && this.editable) {
return this.config.typeConfig.colHeaders.concat(["delete"]);
}
return this.config.typeConfig.colHeaders;
};
TableComponent.prototype.ngOnInit = function () {
if (!this.model || !this.model.value) {
this.model = { value: [Array(this.config.typeConfig.colHeaders.length)] };
this.dataSource.next(this.model.value);
this.onModelChange();
}
else {
this.dataSource.next(this.model.value);
}
};
TableComponent.prototype.addRow = function () {
if (!this.model) {
this.model = { value: [] };
}
this.model.value.push(Array(this.config.typeConfig.colHeaders.length));
this.dataSource.next(this.model.value);
this.onModelChange();
};
TableComponent.prototype.removeRow = function (index) {
if (!this.model) {
this.model = { value: [] };
}
else {
this.model.value.splice(index, 1);
}
this.dataSource.next(this.model.value);
this.onModelChange();
};
TableComponent.prototype.trackByFn = function (item) {
return item;
};
TableComponent = __decorate([
Component({
encapsulation: ViewEncapsulation.None,
selector: "form-table",
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 fxLayout=\"column\" fxLayoutAlign=\"start start\" fxLayoutGap=\"15px\" class=\"form-view-content\">\n <div class=\"table-container mat-elevation-z4\">\n <table\n mat-table\n [dataSource]=\"dataSource\"\n [trackBy]=\"trackByFn\"\n [class.sticky-column-left-padding]=\"editable\"\n >\n <ng-container [matColumnDef]=\"colDef\" *ngFor=\"let colDef of getColHeaders(); let col = index\">\n <th mat-header-cell *matHeaderCellDef>\n <span [innerHTML]=\"colDef | trust: 'html'\"></span>\n </th>\n <td mat-cell *matCellDef=\"let element; let row = index\">\n <ng-container *ngIf=\"editable\">\n <mat-form-field>\n <input\n matInput\n [disabled]=\"!editable\"\n type=\"text\"\n [(ngModel)]=\"model.value[row][col]\"\n (ngModelChange)=\"this.onModelChange()\"\n />\n </mat-form-field>\n </ng-container>\n <ng-container *ngIf=\"!editable\">\n <div>\n <span>\n {{ model.value[row][col] || (\"recursyve_forms.general.not_available\" | translate) }}\n </span>\n </div>\n </ng-container>\n </td>\n </ng-container>\n\n <ng-container *ngIf=\"editable\">\n <ng-container matColumnDef=\"delete\" stickyEnd>\n <th mat-header-cell *matHeaderCellDef></th>\n <td mat-cell *matCellDef=\"let element; let i = index\">\n <button\n mat-icon-button\n color=\"accent\"\n (click)=\"removeRow(i)\"\n [matTooltip]=\"'recursyve_forms.general.delete' | translate\"\n [matTooltipPosition]=\"'above'\"\n >\n <mat-icon color=\"warn\" class=\"material-icons\">close</mat-icon>\n </button>\n </td>\n </ng-container>\n </ng-container>\n\n <tr mat-header-row *matHeaderRowDef=\"getColHeaders(true); sticky: true\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: getColHeaders(true);\"></tr>\n </table>\n </div>\n <ng-container *ngIf=\"editable\">\n <button mat-raised-button color=\"accent\" class=\"add-row-button\" (click)=\"addRow()\" *ngIf=\"editable\">\n {{ \"recursyve_forms.components.table.add_row\" | translate }}\n </button>\n </ng-container>\n </div>\n</div>\n",
styles: [".table-container{width:100%;max-height:400px;overflow:auto}.table-container .sticky-column-left-padding td:last-of-type{padding-left:.75rem}.table-container table{width:100%}.table-container table th{font-weight:600!important}.table-container table th span{margin-right:.75rem}.table-container table td>*{width:calc(100% - .75rem)}.add-row-button{margin-left:auto}"]
})
], TableComponent);
return TableComponent;
}(FormViewBase));
var TextComponent = /** @class */ (function (_super) {
__extends(TextComponent, _super);
function TextComponent() {
return _super.call(this) || this;
}
TextComponent.prototype.ngOnInit = function () {
if (!this.model) {
this.model = { value: "" };
}
else if (!this.model.value) {
this.model.value = "";
}
};
TextComponent = __decorate([
Component({
encapsulation: ViewEncapsulation.None,
selector: "form-text",
template: "<div *ngIf=\"config?.typeConfig?.text?.length > 0\" [innerHTML]=\"config.typeConfig.text | trust: 'html'\"></div>\n",
styles: [""]
})
], TextComponent);
return TextComponent;
}(FormViewBase));
var TimeComponent = /** @class */ (function (_super) {
__extends(TimeComponent, _super);
function TimeComponent() {
return _super.call(this) || this;
}
TimeComponent.prototype.ngOnInit = function () {
if (!this.model) {
this.model = { value: "00:00" };
}
else if (!this.model.value) {
this.model.value = "00:00";
}
};
TimeComponent = __decorate([
Component({
encapsulation: ViewEncapsulation.None,
selector: "form-time",
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 time-content\">\n <ng-container *ngIf=\"editable\">\n <mat-form-field>\n <input\n matInput\n [(ngModel)]=\"model.value\"\n (ngModelChange)=\"onModelChange()\"\n [ngxTimepicker]=\"toggleTimepicker\"\n [value]=\"model.value\"\n readonly\n />\n <ngx-material-timepicker-toggle matSuffix [for]=\"toggleTimepicker\"></ngx-material-timepicker-toggle>\n <ngx-material-timepicker\n (timeSet)=\"onModelChange($event)\"\n [ESC]=\"true\"\n [enableKeyboardInput]=\"true\"\n #toggleTimepicker\n ></ngx-material-timepicker>\n </mat-form-field>\n </ng-container>\n <ng-container *ngIf=\"!editable\">\n <span>\n {{ model.value || (\"recursyve_forms.general.not_available\" | translate) }}\n </span>\n </ng-container>\n </div>\n</div>\n",
styles: [".time-content mat-form-field{width:100%}.time-content mat-form-field .mat-form-field-suffix{height:21px}.time-content mat-form-field ngx-material-timepicker-toggle .ngx-material-timepicker-toggle{padding:0!important;height:100%}.time-content mat-form-field ngx-material-timepicker-toggle .ngx-material-timepicker-toggle svg{height:14px!important;width:14px!important}"]
})
], TimeComponent);
return TimeComponent;
}(FormViewBase));
var TooltipComponent = /** @class */ (function () {
function TooltipComponent() {
}
TooltipComponent.prototype.toggle = function (matTooltip) {
matTooltip.toggle();
};
TooltipComponent.prototype.onHoverIn = function (matTooltip) {
matTooltip.show();
};
TooltipComponent.prototype.onHoverOut = function (matTooltip) {
matTooltip.hide();
};
__decorate([
Input()
], TooltipComponent.prototype, "tooltipContent", void 0);
TooltipComponent = __decorate([
Component({
encapsulation: ViewEncapsulation.None,
selector: "tooltip",