@recursyve/forms-frontend/bundles/recursyve-forms-frontend.umd.min.js

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(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")):"function"==typeof define&&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"],e):e(((t=t||self).recursyve=t.recursyve||{},t.recursyve["forms-frontend"]={}),t.ng.cdk.overlay,t.ng.cdk.table,t.ng.common,t.ng.core,t.ng["flex-layout"],t.ng.forms,t.ng.material,t["@ngmodule/material-carousel"],t["@ngx-translate/core"],t["ngx-material-timepicker"],t.uuid,t.util,t.idx,t.ng.cdk.portal,t.rxjs,t.ng.platformBrowser)}(this,(function(t,e,n,o,i,a,r,l,s,c,u,d,f,p,m,g,h){"use strict";p=p&&p.hasOwnProperty("default")?p.default:p;
/*! *****************************************************************************
    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.
    ***************************************************************************** */
var v=function(t,e){return(v=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])})(t,e)};function y(t,e){function n(){this.constructor=t}v(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}function x(t,e,n,o){var i,a=arguments.length,r=a<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,n):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,e,n,o);else for(var l=t.length-1;l>=0;l--)(i=t[l])&&(r=(a<3?i(r):a>3?i(e,n,r):i(e,n))||r);return a>3&&r&&Object.defineProperty(e,n,r),r}function b(t,e,n,o){return new(n||(n=Promise))((function(i,a){function r(t){try{s(o.next(t))}catch(t){a(t)}}function l(t){try{s(o.throw(t))}catch(t){a(t)}}function s(t){var e;t.done?i(t.value):(e=t.value,e instanceof n?e:new n((function(t){t(e)}))).then(r,l)}s((o=o.apply(t,e||[])).next())}))}function w(t,e){var n,o,i,a,r={label:0,sent:function(){if(1&i[0])throw i[1];return i[1]},trys:[],ops:[]};return a={next:l(0),throw:l(1),return:l(2)},"function"==typeof Symbol&&(a[Symbol.iterator]=function(){return this}),a;function l(a){return function(l){return function(a){if(n)throw new TypeError("Generator is already executing.");for(;r;)try{if(n=1,o&&(i=2&a[0]?o.return:a[0]?o.throw||((i=o.return)&&i.call(o),0):o.next)&&!(i=i.call(o,a[1])).done)return i;switch(o=0,i&&(a=[2&a[0],i.value]),a[0]){case 0:case 1:i=a;break;case 4:return r.label++,{value:a[1],done:!1};case 5:r.label++,o=a[1],a=[0];continue;case 7:a=r.ops.pop(),r.trys.pop();continue;default:if(!(i=r.trys,(i=i.length>0&&i[i.length-1])||6!==a[0]&&2!==a[0])){r=0;continue}if(3===a[0]&&(!i||a[1]>i[0]&&a[1]<i[3])){r.label=a[1];break}if(6===a[0]&&r.label<i[1]){r.label=i[1],i=a;break}if(i&&r.label<i[2]){r.label=i[2],r.ops.push(a);break}i[2]&&r.ops.pop(),r.trys.pop();continue}a=e.call(t,r)}catch(t){a=[6,t],o=0}finally{n=i=0}if(5&a[0])throw a[1];return{value:a[0]?a[1]:void 0,done:!0}}([a,l])}}}function C(t){var e="function"==typeof Symbol&&Symbol.iterator,n=e&&t[e],o=0;if(n)return n.call(t);if(t&&"number"==typeof t.length)return{next:function(){return t&&o>=t.length&&(t=void 0),{value:t&&t[o++],done:!t}}};throw new TypeError(e?"Object is not iterable.":"Symbol.iterator is not defined.")}var M,k=function(){function t(){this.editable=!1,this.onValueChange=new i.EventEmitter}return t.prototype.onModelChange=function(t){this.config&&(f.isNullOrUndefined(t)||(this.model?this.model.value=t:this.model={value:t}),this.onValueChange.emit({key:this.config.keyName,viewModel:this.model}))},x([i.Input()],t.prototype,"config",void 0),x([i.Input()],t.prototype,"model",void 0),x([i.Input()],t.prototype,"editable",void 0),x([i.Output()],t.prototype,"onValueChange",void 0),t}(),I=function(t){function e(){var e=t.call(this)||this;return e.id=d.v4(),e}return y(e,t),e.prototype.ngOnInit=function(){this.model||(this.model={value:null}),!this.config.typeConfig.multi||null!==this.model.value&&void 0!==this.model.value||(this.model.value=[]),this.config.typeConfig.multi&&"number"==typeof this.model.value&&(this.model.value=[this.model.value])},e.prototype.onCheck=function(t){if(this.config.typeConfig.multi)if(this.model.value.includes(t)){var e=this.model.value.indexOf(t);e>=0&&this.model.value.splice(e,1)}else this.model.value.push(t);else this.model.value===t?this.model.value=null:this.model.value=t;this.onModelChange()},e.prototype.isChecked=function(t){return this.config.typeConfig.multi?this.model.value.indexOf(t)>=0:this.model.value===t},e=x([i.Component({encapsulation:i.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}"]})],e)}(k),L=function(){function t(){}return t.prototype.getCurrentGeolocation=function(t){return new Promise((function(e,n){navigator.geolocation.getCurrentPosition((function(t){e(t)}),(function(t){n(t)}),t)}))},t=x([i.Injectable()],t)}(),O=function(t){function e(e){var n=t.call(this)||this;return n.geolocationService=e,n}return y(e,t),e.prototype.ngOnInit=function(){this.initModel()},e.prototype.initModel=function(){return this.model?this.model.value||(this.model.value={}):this.model={value:{}},!0},e.prototype.onLatitudeChange=function(t){this.model.value.latitude=t,this.onModelChange()},e.prototype.onLongitudeChange=function(t){this.model.value.longitude=t,this.onModelChange()},e.prototype.setCoordWithDevice=function(){var t=this;this.geolocationService.getCurrentGeolocation().then((function(e){t.model.value.latitude=e.coords.latitude,t.model.value.longitude=e.coords.longitude,t.onModelChange()}))},e.ctorParameters=function(){return[{type:L}]},e=x([i.Component({encapsulation:i.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}"]})],e)}(k),T=function(t){function e(){return t.call(this)||this}return y(e,t),e.prototype.ngOnInit=function(){this.model?this.model.value||(this.model.value=new Date):this.model={value:new Date}},e=x([i.Component({encapsulation:i.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%}"]})],e)}(k),G=function(t){function e(){return t.call(this)||this}return y(e,t),e.prototype.ngOnInit=function(){this.model||(this.model={})},e.prototype.onSelectOption=function(t){var e=t.value;this.config&&(this.model?this.model.value=e.value:this.model={value:e.value},this.onModelChange())},e.prototype.getSelectedOption=function(){var t=this;return this.config.typeConfig.options.find((function(e){return e.value===t.model.value}))},e=x([i.Component({encapsulation:i.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%}"]})],e)}(k);function H(t){return null==t}!function(t){t.DATE="date",t.LONG_TEXT="long_text",t.SHORT_TEXT="short_text",t.CHECKBOX="checkbox",t.PICTURE="picture",t.TIME="time",t.GROUP="group",t.TABLE="table",t.COORD="coord",t.DROPDOWN="dropdown",t.TEXT="text"}(M||(M={}));var S=function(){function t(){this.editable=!1,this.depth=0,this.onValueChange=new i.EventEmitter,this.types=M}return t.prototype.isTypeOf=function(t){return this.config.type===t},t.prototype.onModelChange=function(t){this.onValueChange.emit(t)},t.prototype.onAppendableChange=function(t){this.model[t.key]=t.viewModel,this.onModelChange({key:this.config.keyName,viewModel:this.model})},t.prototype.showAppendable=function(t){if(null===t.expectedParentValue||void 0===t.expectedParentValue)return!0;if(this.config.type===M.CHECKBOX){var e=p(this.model,(function(t){return t.value}));return!H(e)&&(this.config.typeConfig.multi?e.some((function(e){return e===t.expectedParentValue})):e===t.expectedParentValue)}return this.model.value===t.expectedParentValue},x([i.Input()],t.prototype,"config",void 0),x([i.Input()],t.prototype,"model",void 0),x([i.Input()],t.prototype,"editable",void 0),x([i.Input()],t.prototype,"depth",void 0),x([i.Output()],t.prototype,"onValueChange",void 0),t=x([i.Component({encapsulation:i.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:[""]})],t)}(),_=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e.depth=0,e}return y(e,t),e.prototype.getModel=function(t){return this.model||(this.model={}),this.model[t]||this.onChildModelChange({key:t,viewModel:{}}),this.model[t]},e.prototype.onChildModelChange=function(t){this.config&&(this.model||(this.model={}),this.model[t.key]=t.viewModel,this.onModelChange())},x([i.Input()],e.prototype,"depth",void 0),e=x([i.Component({encapsulation:i.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:[""]})],e)}(k),V=function(t){function e(){return t.call(this)||this}return y(e,t),e.prototype.ngOnInit=function(){this.model?this.model.value||(this.model.value=""):this.model={value:""}},e=x([i.Component({encapsulation:i.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%}"]})],e)}(k),E=function(){function t(){this.selectedPictureIndex=0,this.editable=!1,this.close=new i.EventEmitter}return t.prototype.changePicture=function(t){this.selectedPictureIndex=t},t.prototype.clickClose=function(){this.close.emit()},x([i.Output()],t.prototype,"close",void 0),x([i.ViewChild(s.MatCarouselComponent,{static:!0})],t.prototype,"matCarousel",void 0),t=x([i.Component({encapsulation:i.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}"]})],t)}(),F=function(){function t(t){this.overlay=t}return t.prototype.open=function(t){var e=this.overlay.position().global().centerHorizontally().centerVertically(),n=this.overlay.create({backdropClass:"cdk-overlay-dark-backdrop",hasBackdrop:!0,positionStrategy:e,scrollStrategy:this.overlay.scrollStrategies.block(),width:"70%"}),o=new m.ComponentPortal(E),i=n.attach(o);i.instance.close.subscribe((function(){n.dispose()})),i.instance.editable=t.editable,i.instance.pictures=t.pictures,i.instance.selectedPictureIndex=t.selectedIndex,n.backdropClick().subscribe((function(){return n.dispose()}))},t.ctorParameters=function(){return[{type:e.Overlay}]},t=x([i.Injectable()],t)}(),B=function(){},D=function(t){function e(e,n){var o=t.call(this)||this;return o.pictureModalService=e,o.storageService=n,o.id=d.v4(),o.pictureUrls=[],o.uploading=!1,o}return y(e,t),e.prototype.ngOnInit=function(){return b(this,void 0,void 0,(function(){var t,e,n,o,i,a,r;return w(this,(function(l){switch(l.label){case 0:this.model?this.model.value||(this.model.value=[]):this.model={value:[]},"string"==typeof this.model.value&&(this.model.value=[this.model.value]),l.label=1;case 1:l.trys.push([1,6,7,8]),n=C(this.model.value),o=n.next(),l.label=2;case 2:return o.done?[3,5]:(i=o.value,[4,this.storageService.getDownloadUrl(i)]);case 3:a=l.sent(),this.pictureUrls.push(a),l.label=4;case 4:return o=n.next(),[3,2];case 5:return[3,8];case 6:return r=l.sent(),t={error:r},[3,8];case 7:try{o&&!o.done&&(e=n.return)&&e.call(n)}finally{if(t)throw t.error}return[7];case 8:return[2]}}))}))},e.prototype.ngAfterViewInit=function(){var t=document.getElementById("input-"+this.id);document.getElementById("button-"+this.id).addEventListener("click",(function(){t.click()}))},e.prototype.handleFile=function(t){var e=this;if(!(t.length<=0)){this.uploading=!0;for(var n=0,o=[],i=0;i<t.length;++i)o.push(t[i]);o.forEach((function(o){return b(e,void 0,void 0,(function(){var i,a;return w(this,(function(r){switch(r.label){case 0:return[4,this.storageService.upload(o,"files/work-orders/")];case 1:return i=r.sent()[0],this.model.value.push(i),[4,this.storageService.getDownloadUrl(i)];case 2:return a=r.sent(),this.pictureUrls.push(a),this.onModelChange(),++n>=t.length&&(e.uploading=!1),[2]}}))}))}))}},e.prototype.clickView=function(t){this.uploading||this.pictureModalService.open({closeIfAllRemoved:!0,editable:this.editable,pictures:this.pictureUrls,selectedIndex:t})},e.prototype.removeImage=function(t){this.model.value.splice(t,1),this.pictureUrls.splice(t,1),this.onModelChange()},e.prototype.onModelChange=function(){this.onValueChange.emit({key:this.config.keyName,viewModel:this.model})},e.ctorParameters=function(){return[{type:F},{type:B}]},e=x([i.Component({encapsulation:i.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}"]})],e)}(k),A=function(t){function e(){return t.call(this)||this}return y(e,t),e.prototype.ngOnInit=function(){this.model?this.model.value||(this.model.value=""):this.model={value:""}},e=x([i.Component({encapsulation:i.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%}"]})],e)}(k),R=function(t){function e(){var e=t.call(this)||this;return e.dataSource=new g.BehaviorSubject([]),e}return y(e,t),e.prototype.getColHeaders=function(t){return void 0===t&&(t=!1),t&&this.editable?this.config.typeConfig.colHeaders.concat(["delete"]):this.config.typeConfig.colHeaders},e.prototype.ngOnInit=function(){this.model&&this.model.value?this.dataSource.next(this.model.value):(this.model={value:[Array(this.config.typeConfig.colHeaders.length)]},this.dataSource.next(this.model.value),this.onModelChange())},e.prototype.addRow=function(){this.model||(this.model={value:[]}),this.model.value.push(Array(this.config.typeConfig.colHeaders.length)),this.dataSource.next(this.model.value),this.onModelChange()},e.prototype.removeRow=function(t){this.model?this.model.value.splice(t,1):this.model={value:[]},this.dataSource.next(this.model.value),this.onModelChange()},e.prototype.trackByFn=function(t){return t},e=x([i.Component({encapsulation:i.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}"]})],e)}(k),P=function(t){function e(){return t.call(this)||this}return y(e,t),e.prototype.ngOnInit=function(){this.model?this.model.value||(this.model.value=""):this.model={value:""}},e=x([i.Component({encapsulation:i.ViewEncapsulation.None,selector:"form-text",template:'<div *ngIf="config?.typeConfig?.text?.length > 0" [innerHTML]="config.typeConfig.text | trust: \'html\'"></div>\n',styles:[""]})],e)}(k),N=function(t){function e(){return t.call(this)||this}return y(e,t),e.prototype.ngOnInit=function(){this.model?this.model.value||(this.model.value="00:00"):this.model={value:"00:00"}},e=x([i.Component({encapsulation:i.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}"]})],e)}(k),j=function(){function t(){}return t.prototype.toggle=function(t){t.toggle()},t.prototype.onHoverIn=function(t){t.show()},t.prototype.onHoverOut=function(t){t.hide()},x([i.Input()],t.prototype,"tooltipContent",void 0),t=x([i.Component({encapsulation:i.ViewEncapsulation.None,selector:"tooltip",template:'<ng-container *ngIf="tooltipContent && tooltipContent.length > 0">\n    <button\n        mat-icon-button\n        (click)="toggle(tooltip)"\n        (mouseenter)="onHoverIn(tooltip)"\n        (mouseleave)="onHoverOut(tooltip)"\n        #tooltip="matTooltip"\n        [matTooltip]="tooltipContent"\n        matTooltipPosition="right"\n    >\n        <mat-icon color="accent" class="material-icons">help_outline</mat-icon>\n    </button>\n</ng-container>\n',styles:[".mat-tooltip{font-size:14px}.checkbox-line{min-height:40px}mat-icon{margin-bottom:4px}"]})],t)}(),$=function(){function t(){this.isFlexGroup=!1,this.isFlexGroupItem=!1,this.applyBasicStyling=!0}return t.prototype.ngOnInit=function(){this.updateStyle()},t.prototype.updateStyle=function(){this.updateBasicStyling(),this.updateFlexGroupStyling(),this.updateFlexGroupItemStyling()},t.prototype.updateBasicStyling=function(){this.applyBasicStyling&&(this.display=this.safeGet((function(t){return t.display}),"block"),this.width=this.safeGet((function(t){return t.width.width}),"auto"),this.minWidth=this.safeGet((function(t){return t.width.minWidth}),"0"),this.maxWidth=this.safeGet((function(t){return t.width.maxWidth}),"none"),this.height=this.safeGet((function(t){return t.height.height}),"auto"),this.minHeight=this.safeGet((function(t){return t.height.minHeight}),"0"),this.maxHeight=this.safeGet((function(t){return t.height.maxHeight}),"none"),this.marginTop=this.safeGet((function(t){return t.margin.top}),this.safeGet((function(t){return t.margin.margin}),"0")),this.marginRight=this.safeGet((function(t){return t.margin.right}),this.safeGet((function(t){return t.margin.margin}),"0")),this.marginBottom=this.safeGet((function(t){return t.margin.bottom}),this.safeGet((function(t){return t.margin.margin}),"0")),this.marginLeft=this.safeGet((function(t){return t.margin.left}),this.safeGet((function(t){return t.margin.margin}),"0")))},t.prototype.updateFlexGroupStyling=function(){this.isFlexGroup&&this.safeGet((function(t){return t.fxConfig.flexGroup}),null)&&(this.display="flex",this.flexDirection=this.safeGet((function(t){return t.fxConfig.flexGroup.layout.direction}),"row"),this.flexWrap=this.safeGet((function(t){return t.fxConfig.flexGroup.layout.wrap}),"nowrap"),this.justifyContent=this.safeGet((function(t){return t.fxConfig.flexGroup.alignment.mainAxis}),"flex-start"),this.alignItems=this.safeGet((function(t){return t.fxConfig.flexGroup.alignment.crossAxis}),"stretch"),this.alignContent=this.safeGet((function(t){return t.fxConfig.flexGroup.alignment.crossAxis}),"stretch"))},t.prototype.updateFlexGroupItemStyling=function(){this.isFlexGroupItem&&this.safeGet((function(t){return t.fxConfig.flexGroupItem}),null)&&(this.flexGrow=this.safeGet((function(t){return t.fxConfig.flexGroupItem.flex.grow}),"1"),this.flexShrink=this.safeGet((function(t){return t.fxConfig.flexGroupItem.flex.shrink}),"1"),this.flexBasis=this.safeGet((function(t){return t.fxConfig.flexGroupItem.flex.basis}),"0%"))},t.prototype.safeGet=function(t,e){var n=p(this.displayConfig,t);return H(n)?e:n},x([i.Input()],t.prototype,"displayConfig",void 0),x([i.Input()],t.prototype,"isFlexGroup",void 0),x([i.Input()],t.prototype,"isFlexGroupItem",void 0),x([i.Input()],t.prototype,"applyBasicStyling",void 0),x([i.HostBinding("style.display")],t.prototype,"display",void 0),x([i.HostBinding("style.width")],t.prototype,"width",void 0),x([i.HostBinding("style.min-width")],t.prototype,"minWidth",void 0),x([i.HostBinding("style.max-width")],t.prototype,"maxWidth",void 0),x([i.HostBinding("style.height")],t.prototype,"height",void 0),x([i.HostBinding("style.min-height")],t.prototype,"minHeight",void 0),x([i.HostBinding("style.max-height")],t.prototype,"maxHeight",void 0),x([i.HostBinding("style.margin-top")],t.prototype,"marginTop",void 0),x([i.HostBinding("style.margin-right")],t.prototype,"marginRight",void 0),x([i.HostBinding("style.margin-bottom")],t.prototype,"marginBottom",void 0),x([i.HostBinding("style.margin-left")],t.prototype,"marginLeft",void 0),x([i.HostBinding("style.justify-content")],t.prototype,"justifyContent",void 0),x([i.HostBinding("style.align-items")],t.prototype,"alignItems",void 0),x([i.HostBinding("style.align-content")],t.prototype,"alignContent",void 0),x([i.HostBinding("style.flex-direction")],t.prototype,"flexDirection",void 0),x([i.HostBinding("style.flex-wrap")],t.prototype,"flexWrap",void 0),x([i.HostBinding("style.flex-grow")],t.prototype,"flexGrow",void 0),x([i.HostBinding("style.flex-shrink")],t.prototype,"flexShrink",void 0),x([i.HostBinding("style.flex-basis")],t.prototype,"flexBasis",void 0),t=x([i.Directive({selector:"[display]"})],t)}(),U=function(){function t(t){this.sanitizer=t}return t.prototype.transform=function(t,e){if(!t||0===t.length)return"";switch(e){case"html":return this.sanitizer.bypassSecurityTrustHtml(t);case"style":return this.sanitizer.bypassSecurityTrustStyle(t)}return t},t.ctorParameters=function(){return[{type:h.DomSanitizer}]},t=x([i.Pipe({name:"trust"})],t)}(),q=function(){function t(){this.editable=!1,this.onFormResultChange=new i.EventEmitter}return t.prototype.ngOnInit=function(){var t,e;H(this.formResult.value)&&(this.formResult.value={});try{for(var n=C(this.formDescriptor.viewConfigs),o=n.next();!o.done;o=n.next()){var i=o.value;H(this.formResult.value[i.keyName])&&this.onModelChange(i.keyName,{})}}catch(e){t={error:e}}finally{try{o&&!o.done&&(e=n.return)&&e.call(n)}finally{if(t)throw t.error}}},t.prototype.onModelChange=function(t,e){this.formResult&&this.formResult.value&&(this.formResult.value[t]=e,this.onFormResultChange.emit(this.formResult))},x([i.Input()],t.prototype,"editable",void 0),x([i.Input()],t.prototype,"formResult",void 0),x([i.Input()],t.prototype,"formDescriptor",void 0),x([i.Output()],t.prototype,"onFormResultChange",void 0),t=x([i.Component({encapsulation:i.ViewEncapsulation.None,selector:"recursyve-form",template:'<ng-container *ngIf="formDescriptor && formResult">\n    <div class="form-container">\n        <div display [displayConfig]="formDescriptor.displayConfig" [isFlexGroup]="true">\n            <ng-container *ngFor="let subViewConfig of formDescriptor?.viewConfigs">\n                <div display [displayConfig]="subViewConfig.displayConfig" [isFlexGroupItem]="true">\n                    <form-view\n                        [config]="subViewConfig"\n                        [model]="formResult.value[subViewConfig.keyName]"\n                        [editable]="editable"\n                        [depth]="0"\n                        (onValueChange)="onModelChange($event.key, $event.viewModel)"\n                    ></form-view>\n                </div>\n            </ng-container>\n        </div>\n    </div>\n</ng-container>\n',styles:[".form-container mat-form-field .mat-form-field-infix{border:none!important}.form-container .text-justify{text-align:justify}.form-container .fullWidth{width:100%}.form-container .fullHeight{height:100%}.form-container .form-view{width:100%}.form-container .form-view-title{margin-bottom:16px;width:100%}.form-container .form-view-title h4{margin:0}.form-container .form-view-content{width:100%}.form-container .m-0{margin:0}"]})],t)}(),W=function(){function t(){}return t=x([i.NgModule({declarations:[q,j,U,$,I,O,T,G,S,_,V,D,E,A,R,P,N],entryComponents:[E],exports:[q],imports:[o.CommonModule,a.FlexModule,r.FormsModule,e.OverlayModule,c.TranslateModule,l.MatButtonModule,l.MatCardModule,s.MatCarouselModule,l.MatCheckboxModule,l.MatDatepickerModule,l.MatFormFieldModule,l.MatIconModule,l.MatInputModule,l.MatLineModule,l.MatNativeDateModule,l.MatProgressSpinnerModule,l.MatSelectModule,l.MatTableModule,l.MatTooltipModule,u.NgxMaterialTimepickerModule,l.MatBadgeModule],providers:[n.CdkColumnDef,L,l.MatDatepickerModule,F]})],t)}();t.FormStorageInterface=B,t.RecursyveFormModule=W,t.ɵa=q,t.ɵb=j,t.ɵc=U,t.ɵd=$,t.ɵe=I,t.ɵf=k,t.ɵg=O,t.ɵh=L,t.ɵi=T,t.ɵj=G,t.ɵk=S,t.ɵl=_,t.ɵm=V,t.ɵn=D,t.ɵo=F,t.ɵp=E,t.ɵq=A,t.ɵr=R,t.ɵs=P,t.ɵt=N,Object.defineProperty(t,"__esModule",{value:!0})}));
//# sourceMappingURL=recursyve-forms-frontend.umd.min.js.map