!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/common/http"),require("rxjs"),require("rxjs/operators"),require("uuid"),require("ng-zorro-antd/modal"),require("tf-ng-form"),require("@angular/common"),require("@angular/forms"),require("tf-ng-core"),require("angular-froala-wysiwyg"),require("ng-zorro-antd/typography"),require("ng-zorro-antd/layout"),require("ng-zorro-antd/menu"),require("ng-zorro-antd/drawer"),require("ng-zorro-antd/grid"),require("ng-zorro-antd/breadcrumb"),require("ng-zorro-antd/divider"),require("ng-zorro-antd/icon"),require("ng-zorro-antd/form"),require("ng-zorro-antd/input"),require("ng-zorro-antd/auto-complete"),require("ng-zorro-antd/checkbox"),require("ng-zorro-antd/radio"),require("ng-zorro-antd/switch"),require("ng-zorro-antd/date-picker"),require("ng-zorro-antd/select"),require("ng-zorro-antd/upload"),require("ng-zorro-antd/button"),require("ng-zorro-antd/dropdown"),require("ng-zorro-antd/calendar"),require("ng-zorro-antd/list"),require("ng-zorro-antd/table"),require("ng-zorro-antd/tabs"),require("ng-zorro-antd/tooltip"),require("ng-zorro-antd/popover"),require("ng-zorro-antd/carousel"),require("ng-zorro-antd/message"),require("ng-zorro-antd/empty"),require("ng-zorro-antd/tree"),require("ng-zorro-antd/collapse"),require("@angular/platform-browser")):"function"==typeof define&&define.amd?define("tf-ng-form-editor",["exports","@angular/core","@angular/common/http","rxjs","rxjs/operators","uuid","ng-zorro-antd/modal","tf-ng-form","@angular/common","@angular/forms","tf-ng-core","angular-froala-wysiwyg","ng-zorro-antd/typography","ng-zorro-antd/layout","ng-zorro-antd/menu","ng-zorro-antd/drawer","ng-zorro-antd/grid","ng-zorro-antd/breadcrumb","ng-zorro-antd/divider","ng-zorro-antd/icon","ng-zorro-antd/form","ng-zorro-antd/input","ng-zorro-antd/auto-complete","ng-zorro-antd/checkbox","ng-zorro-antd/radio","ng-zorro-antd/switch","ng-zorro-antd/date-picker","ng-zorro-antd/select","ng-zorro-antd/upload","ng-zorro-antd/button","ng-zorro-antd/dropdown","ng-zorro-antd/calendar","ng-zorro-antd/list","ng-zorro-antd/table","ng-zorro-antd/tabs","ng-zorro-antd/tooltip","ng-zorro-antd/popover","ng-zorro-antd/carousel","ng-zorro-antd/message","ng-zorro-antd/empty","ng-zorro-antd/tree","ng-zorro-antd/collapse","@angular/platform-browser"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self)["tf-ng-form-editor"]={},e.ng.core,e.ng.common.http,e.rxjs,e.rxjs.operators,e.uuid,e.i3,e.tfNgForm,e.ng.common,e.ng.forms,e.tfNgCore,e.angularFroalaWysiwyg,e.typography,e.layout,e.menu,e.drawer,e.grid,e.breadcrumb,e.divider,e.icon,e.form,e.input,e.autoComplete,e.checkbox,e.radio,e._switch,e.datePicker,e.select,e.upload,e.button,e.dropdown,e.calendar,e.list,e.table,e.tabs,e.tooltip,e.popover,e.carousel,e.message,e.empty,e.tree,e.collapse,e.ng.platformBrowser)}(this,(function(e,t,n,o,i,r,l,a,s,d,p,m,c,u,f,h,b,g,y,v,I,z,w,C,x,F,S,T,O,E,M,D,k,P,N,L,G,_,R,j,U,A,V){"use strict";
/*! *****************************************************************************
    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.
    ***************************************************************************** */function q(e,t,n,o){return new(n||(n=Promise))((function(i,r){function l(e){try{s(o.next(e))}catch(e){r(e)}}function a(e){try{s(o.throw(e))}catch(e){r(e)}}function s(e){var t;e.done?i(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(l,a)}s((o=o.apply(e,t||[])).next())}))}function B(e,t){var n,o,i,r,l={label:0,sent:function(){if(1&i[0])throw i[1];return i[1]},trys:[],ops:[]};return r={next:a(0),throw:a(1),return:a(2)},"function"==typeof Symbol&&(r[Symbol.iterator]=function(){return this}),r;function a(r){return function(a){return function(r){if(n)throw new TypeError("Generator is already executing.");for(;l;)try{if(n=1,o&&(i=2&r[0]?o.return:r[0]?o.throw||((i=o.return)&&i.call(o),0):o.next)&&!(i=i.call(o,r[1])).done)return i;switch(o=0,i&&(r=[2&r[0],i.value]),r[0]){case 0:case 1:i=r;break;case 4:return l.label++,{value:r[1],done:!1};case 5:l.label++,o=r[1],r=[0];continue;case 7:r=l.ops.pop(),l.trys.pop();continue;default:if(!(i=l.trys,(i=i.length>0&&i[i.length-1])||6!==r[0]&&2!==r[0])){l=0;continue}if(3===r[0]&&(!i||r[1]>i[0]&&r[1]<i[3])){l.label=r[1];break}if(6===r[0]&&l.label<i[1]){l.label=i[1],i=r;break}if(i&&l.label<i[2]){l.label=i[2],l.ops.push(r);break}i[2]&&l.ops.pop(),l.trys.pop();continue}r=t.call(e,l)}catch(e){r=[6,e],o=0}finally{n=i=0}if(5&r[0])throw r[1];return{value:r[0]?r[1]:void 0,done:!0}}([r,a])}}}Object.create;function K(e,t){var n="function"==typeof Symbol&&e[Symbol.iterator];if(!n)return e;var o,i,r=n.call(e),l=[];try{for(;(void 0===t||t-- >0)&&!(o=r.next()).done;)l.push(o.value)}catch(e){i={error:e}}finally{try{o&&!o.done&&(n=r.return)&&n.call(r)}finally{if(i)throw i.error}}return l}function H(){for(var e=[],t=0;t<arguments.length;t++)e=e.concat(K(arguments[t]));return e}var $,W,J;Object.create;($=e.SelectableWrapper||(e.SelectableWrapper={})).FORM_FIELD="form-field",$.DATE_FIELD="date-field",$.GRID_CELL_FIELD="grid-cell-field",(W=e.SelectableCategory||(e.SelectableCategory={})).SIMPLE="Simple",W.COMPLEX="Complex",W.LAYOUT="Layout",W.HIDDEN="Hidden",(J=e.EditableConfigType||(e.EditableConfigType={}))[J.GENERAL=0]="GENERAL",J[J.INPUT=1]="INPUT",J[J.NUMBER=2]="NUMBER",J[J.SELECT=3]="SELECT",J[J.RADIO=4]="RADIO",J[J.CHECKBOX=5]="CHECKBOX",J[J.CHECKBOX_GROUP=6]="CHECKBOX_GROUP",J[J.LAYOUT=7]="LAYOUT",J[J.STATIC=8]="STATIC",J[J.TEXT=9]="TEXT",J[J.NESTED=10]="NESTED",J[J.GRID=11]="GRID",J[J.TABS=12]="TABS",J[J.TAB=13]="TAB",J[J.DATE=14]="DATE";var X,Y,Q,Z,ee=function(){function t(){this._types=[{type:"text",id:"text",label:"Paragraph",description:"Good for introducing the form or key parts. It allows you to add text and images",category:e.SelectableCategory.SIMPLE,editableConfigType:e.EditableConfigType.TEXT},{type:"input",id:"input",label:"Text Input",category:e.SelectableCategory.SIMPLE,description:"Allow the form user to add a single line of text",editableConfigType:e.EditableConfigType.INPUT},{type:"number",id:"number",label:"Number Input",category:e.SelectableCategory.SIMPLE,description:"Allow the form user to add a number",editableConfigType:e.EditableConfigType.NUMBER},{type:"email",id:"email",label:"Email Input",wrappers:[e.SelectableWrapper.FORM_FIELD],category:e.SelectableCategory.SIMPLE,description:"Allow the form user to add a email address",editableConfigType:e.EditableConfigType.INPUT},{type:"text-area",id:"text-area",label:"Multiline Text Input",wrappers:[e.SelectableWrapper.FORM_FIELD],category:e.SelectableCategory.SIMPLE,description:"Allow the form user to add multiple lines of text",editableConfigType:e.EditableConfigType.INPUT},{type:"select",id:"select",label:"Dropdown Select",category:e.SelectableCategory.SIMPLE,editableConfigType:e.EditableConfigType.SELECT},{type:"radio-group",id:"radio-group",label:"Single Select",description:"For when you want the user to give a single answer to a question or statement",wrappers:[e.SelectableWrapper.FORM_FIELD],category:e.SelectableCategory.SIMPLE,editableConfigType:e.EditableConfigType.CHECKBOX_GROUP,editableConfigOptionsName:"checkboxOptions"},{type:"checkbox-group",id:"checkbox-group",label:"Multi Select",description:"Ideal for when you want the user to have multiple options to choose from",wrappers:[e.SelectableWrapper.FORM_FIELD],category:e.SelectableCategory.SIMPLE,editableConfigType:e.EditableConfigType.CHECKBOX_GROUP,editableConfigOptionsName:"checkboxOptions"},{type:"rate",id:"rate",label:"Rating",description:"For when you want to ask the form user to give a star rating for something",wrappers:[e.SelectableWrapper.FORM_FIELD],category:e.SelectableCategory.SIMPLE,editableConfigType:e.EditableConfigType.CHECKBOX,editableConfigOptionsName:"rateOptions"},{type:"date",id:"date",label:"Date",wrappers:[e.SelectableWrapper.DATE_FIELD],description:"Allow the form user to add key dates such as their date of birth",category:e.SelectableCategory.SIMPLE,editableConfigType:e.EditableConfigType.DATE,editableConfigOptionsName:"dateOptions"},{type:"date-range",id:"date-range",label:"Date Range",wrappers:[e.SelectableWrapper.DATE_FIELD],description:"For when you want to capture a range of dates such as start and end date",category:e.SelectableCategory.SIMPLE,editableConfigType:e.EditableConfigType.DATE,editableConfigOptionsName:"dateOptions"},{type:"address",id:"address",label:"Address",category:e.SelectableCategory.COMPLEX,editableConfigType:e.EditableConfigType.NESTED},{type:"tabs",id:"tabs",label:"Sections",category:e.SelectableCategory.LAYOUT,description:"Using sections allows you to split the form into multiple sections instead of the form being presented on one page.",editableConfigType:e.EditableConfigType.TABS},{type:"tab",id:"tab",label:"Section",category:e.SelectableCategory.HIDDEN,editableConfigType:e.EditableConfigType.TAB},{type:"radio",id:"radio",label:"Radio Select",category:e.SelectableCategory.HIDDEN,editableConfigType:e.EditableConfigType.RADIO},{type:"checkbox",id:"checkbox",label:"Single Checkbox",category:e.SelectableCategory.HIDDEN,editableConfigType:e.EditableConfigType.CHECKBOX},{type:"divider",id:"divider",label:"Divider",category:e.SelectableCategory.LAYOUT,description:"A graphical divider that helps to break up key parts of your form",editableConfigType:e.EditableConfigType.STATIC},{type:"nested",id:"nested",label:"Group",description:"This allows you to group together multiple inputs to create one form element",category:e.SelectableCategory.COMPLEX,editableConfigType:e.EditableConfigType.NESTED},{type:"grid",id:"grid",label:"Table",category:e.SelectableCategory.COMPLEX,editableConfigType:e.EditableConfigType.GRID,editableConfigOptionsName:"gridOptions"},{type:"grid-row",id:"grid-row",label:null,category:e.SelectableCategory.HIDDEN,editableConfigType:e.EditableConfigType.GENERAL},{type:"empty-grid-cell",id:"empty",label:null,category:e.SelectableCategory.HIDDEN,editableConfigType:e.EditableConfigType.GENERAL}],this._editableConfigs=[{type:e.EditableConfigType.INPUT,id:"config-input",setLabel:!0,setDesc:!0,setHelp:!0,setPlaceholder:!0,setRequired:!0,setPermissions:!0,setReadonlyPermissions:!0},{type:e.EditableConfigType.NUMBER,id:"config-number",setLabel:!0,setDesc:!0,setHelp:!0,setPlaceholder:!0,setRequired:!0,setPermissions:!0,setReadonlyPermissions:!0,hasNumberOptions:!0},{type:e.EditableConfigType.SELECT,id:"config-select",setLabel:!0,setDesc:!0,setHelp:!0,setPlaceholder:!0,setRequired:!0,setPermissions:!0,setReadonlyPermissions:!0,setHideExpressions:!1,hasComponentOptions:!0},{type:e.EditableConfigType.RADIO,id:"config-radio",setLabel:!0,setDesc:!0,setHelp:!0,setPlaceholder:!1,setRequired:!0,setPermissions:!0,setReadonlyPermissions:!0,setHideExpressions:!1,hasComponentOptions:!0},{type:e.EditableConfigType.STATIC,id:"config-static",disableEdit:!0},{type:e.EditableConfigType.LAYOUT,id:"config-layout",setLabel:!1,setDesc:!1,setHelp:!1,setPlaceholder:!1,setRequired:!1,setPermissions:!1,setReadonlyPermissions:!1,setHideExpressions:!1,hasComponentOptions:!0},{type:e.EditableConfigType.TEXT,id:"config-text",setLabel:!0,setDesc:!0},{type:e.EditableConfigType.CHECKBOX,id:"config-checkbox",setLabel:!0,setDesc:!0,setHelp:!0,setRequired:!0,setPermissions:!0,setReadonlyPermissions:!0},{type:e.EditableConfigType.CHECKBOX_GROUP,id:"config-checkbox-group",setLabel:!0,setDesc:!0,setHelp:!0,setPlaceholder:!1,setRequired:!0,setPermissions:!0,setReadonlyPermissions:!0,setHideExpressions:!1,hasComponentOptions:!0,hasLayoutOptions:!0,hasShowBlocks:!0},{type:e.EditableConfigType.NESTED,id:"config-nested",setLabel:!0,setDesc:!0,setHelp:!0,hasFieldGroup:!0},{type:e.EditableConfigType.TABS,setLabel:!0,id:"config-tabs",hasFieldGroup:!0},{type:e.EditableConfigType.TAB,id:"config-tab",setLabel:!0,hasFieldGroup:!0},{type:e.EditableConfigType.GRID,id:"config-grid",setLabel:!0,setDesc:!0,setHelp:!0,hasGridOptions:!0},{type:e.EditableConfigType.GENERAL,id:"config-general"},{type:e.EditableConfigType.DATE,id:"config-date",setLabel:!0,setDesc:!0,setHelp:!0,setPlaceholder:!0,multiplePlaceholders:!0,setRequired:!0,setPermissions:!0,setReadonlyPermissions:!0,hasDateOptions:!0}],this._columnDefinitions=[{id:"oneCol",label:"One Column",column:1,columnWidths:[{label:"24",percentages:"100",widths:[24],default:!0}]},{id:"twoCol",label:"Two Columns",column:2,columnWidths:[{label:"16-8",percentages:"60-40",widths:[16,8],default:!0},{label:"8-16",percentages:"40-60",widths:[8,16]},{label:"12-12",percentages:"50-50",widths:[12,12]}]},{id:"threeCol",label:"Three Columns",column:3,columnWidths:[{label:"12-6-6",percentages:"50-25-25",widths:[12,6,6],default:!0},{label:"8-8-8",percentages:"33.3-33.3-33.3",widths:[8,8,8]},{label:"10-10-4",percentages:"44-40-20",widths:[10,10,4]}]},{id:"fourCol",label:"Four Columns",column:4,columnWidths:[{label:"9-5-5-5",percentages:"40-20-20-20",widths:[9,5,5,5],default:!0},{label:"6-6-6-6",percentages:"25-25-25-25",widths:[6,6,6,6]}]}],this.preDefinedComplexItems=[{type:"address",label:"Address",componentOptions:{},fieldGroup:[{type:"input",key:"addressLine1",label:"Address Line 1",required:!0},{type:"input",key:"addressLine2",label:"Address Line 2"},{type:"input",key:"town",label:"Town",required:!0},{type:"input",key:"county",label:"County",required:!0},{type:"input",key:"postcode",label:"Postcode",required:!0}]},{type:"grid",componentOptions:{gridOptions:{columnCount:1,columnWidths:[24],columnDefs:[{width:24}]}}},{type:"tabs",componentOptions:{tabsOptions:{size:"small",showSubmitButton:!0}}},{type:"number",componentOptions:{min:Number.MIN_SAFE_INTEGER,max:Number.MAX_SAFE_INTEGER}},{type:"date",componentOptions:{dateOptions:{format:"dd/MM/yyyy"}}},{type:"date-range",componentOptions:{dateOptions:{format:"dd/MM/yyyy"}}}],this._selectableItems=new o.BehaviorSubject(this._types),this._selectableItem=new o.Subject}return Object.defineProperty(t.prototype,"selectableItems",{get:function(){return this._selectableItems.asObservable().pipe(i.map((function(e){return e?H(e):null})))},enumerable:!1,configurable:!0}),t.prototype.getSelectableItemFromType=function(e){var t=this;return this._selectableItems.asObservable().pipe(i.map((function(n,o){if(n){var i=n.filter((function(t){return t.type===e}));if(i.length){var r=Object.assign({},i[0]),l=t._editableConfigs.filter((function(e){return e.type===r.editableConfigType}))[0];return t._types[o].editableConfig=r.editableConfig=l,r}return null}return null})))},t.prototype.getSelectableItemFromId=function(e){return this._selectableItems.asObservable().pipe(i.map((function(t){if(t){var n=t.filter((function(t){return t.id===e}));return n.length?n[0]:null}return null})))},t}();ee.ɵprov=t.ɵɵdefineInjectable({factory:function(){return new ee},token:ee,providedIn:"root"}),ee.decorators=[{type:t.Injectable,args:[{providedIn:"root"}]}],ee.ctorParameters=function(){return[]},(X=e.EditorModeEnum||(e.EditorModeEnum={})).EDIT="edit",X.PREVIEW="preview",X.NONE="none",(Y=e.SaveTypeEnum||(e.SaveTypeEnum={})).DRAFT="draft",Y.PUBLISH="publish",(Q=e.OrdinalDirectionEnum||(e.OrdinalDirectionEnum={}))[Q.UP=0]="UP",Q[Q.DOWN=1]="DOWN",(Z=e.CheckFormMetaDataStatus||(e.CheckFormMetaDataStatus={}))[Z.UNSET=-1]="UNSET",Z[Z.PENDING=0]="PENDING",Z[Z.ALLOW=1]="ALLOW",Z[Z.DISALLOW=2]="DISALLOW";var te=function(){function t(t,n,i){this.http=t,this.formEditorConfig=n,this.modal=i,this.unsavedItems=!1,this._form=new o.BehaviorSubject(null),this._formTree=new o.BehaviorSubject(null),this._selectedTreeKey=new o.BehaviorSubject(null),this._editorMode=new o.BehaviorSubject(e.EditorModeEnum.EDIT),this._metaUpdated=new o.Subject,this._formUpdated=new o.Subject,this._save=new o.Subject,this._close=new o.Subject,this._checkFormMetaOutput=new o.Subject,this._checkFormMetaInput=new o.Subject,this.form=this._form.asObservable(),this.formTree=this._formTree.asObservable(),this.selectedTreeKey=this._selectedTreeKey.asObservable(),this.editorMode=this._editorMode.asObservable(),this.metaUpdated=this._metaUpdated.asObservable(),this.formUpdated=this._formUpdated.asObservable(),this.save=this._save.asObservable(),this.close=this._close.asObservable(),this.checkFormMetaOutput=this._checkFormMetaOutput.asObservable(),this.checkFormMetaInput=this._checkFormMetaInput.asObservable(),this.initialiseFormSubscription()}return Object.defineProperty(t.prototype,"froalaKey",{get:function(){return this._froalaKey},set:function(e){this._froalaKey=e},enumerable:!1,configurable:!0}),t.prototype.addFormItem=function(e,t){var n=this;void 0===t&&(t=null),this.form.pipe(i.take(1)).subscribe((function(t){var o=Object.assign({},t);o.schema.push(e),n.setSelectedTreeKey(e.uuid),n._form.next(o)}))},t.prototype.addTabsFormItem=function(e){var t=this;this.form.pipe(i.take(1)).subscribe((function(n){var o=new Array;n.schema.map((function(e){o.push(Object.assign({},e))})),t.formEditorConfig.getSelectableItemFromId("tab").pipe(i.take(1)).subscribe((function(i){var r=t.getFieldItemFromSelection(i);r.label="Default Tab",r.key="defaultTab",r.fieldGroup=H(o),e.fieldGroup=[],e.fieldGroup.push(r);var l={meta:n.meta,schema:[],model:n.model};l.schema.push(Object.assign({},e)),t.setSelectedTreeKey(e.uuid),t._form.next(l)}))}))},t.prototype.addFormItemToFieldGroup=function(e,t,n){var o=this;void 0===n&&(n=null),e.fieldGroup||(e.fieldGroup=[]),null===n?e.fieldGroup.push(t):e.fieldGroup[n]=t,this.form.pipe(i.take(1)).subscribe((function(t){var n=Object.assign({},t),i=n.schema.findIndex((function(t){return t.uuid===e.uuid}));n.schema[i]=e,o._form.next(n)}))},t.prototype.updateFormItemsFieldGroup=function(e,t){var n=this;this.form.pipe(i.take(1)).subscribe((function(o){var i=Object.assign({},o),r=i.schema.findIndex((function(t){return t.uuid===e.uuid}));e.fieldGroup=H(t),i.schema[r]=Object.assign({},e),n._form.next(i)}))},t.prototype.updateFormItem=function(e){var t=this;this.form.pipe(i.take(1)).subscribe((function(n){var o=Object.assign({},n);t.updateFieldItem(o.schema,e),setTimeout((function(){t._form.next(o)}),50)}))},t.prototype.deleteFormItem=function(e,t){var n=this;void 0===t&&(t=null),this.form.pipe(i.take(1)).subscribe((function(o){var r=Object.assign({},o),l=t?n.findFieldItemFromTreeKey(r.schema,t).fieldGroup:r.schema,a=l.findIndex((function(t){return t.uuid===e}));l.splice(a,1),n.selectedTreeKey.pipe(i.take(1)).subscribe((function(o){o===e&&n._selectedTreeKey.next(t),n._form.next(r)}))}))},t.prototype.getUuid=function(){return r.v4()},t.prototype.duplicateFormItem=function(e,t){var n=this;void 0===t&&(t=null),this.form.pipe(i.take(1)).subscribe((function(o){var i=Object.assign({},o),r=t?n.findFieldItemFromTreeKey(i.schema,t):{},l=t?r.fieldGroup:i.schema,a=l.findIndex((function(t){return t.uuid===e})),s=Object.assign({},l[a]),d=n.getUuid(),p=Object.assign(Object.assign({},s),{key:d,uuid:d}),m=l.reduce((function(e,t,n){return n===a?e.concat([t,p]):e.concat([t])}),[]);t?r.fieldGroup=H(m):i.schema=H(m),n._form.next(i),n.setSelectedTreeKey(d)}))},t.prototype.updateFormItemOrdinal=function(t,n,o,r){var l=this;void 0===o&&(o=null),void 0===r&&(r=1),this.form.pipe(i.take(1)).subscribe((function(i){var a=Object.assign({},i),s=o?l.findFieldItemFromTreeKey(a.schema,o).fieldGroup:a.schema,d=s.length-1,p=s.findIndex((function(e){return e.uuid===t}));if(n===e.OrdinalDirectionEnum.UP?p>0:p<d){var m=n===e.OrdinalDirectionEnum.UP?p-r:p+r,c=s[p],u=s[m];s[p]=u,s[m]=c,l._form.next(a)}}))},t.prototype.getFieldItemFromTreeKey=function(e){var t=this;return this._form.asObservable().pipe(i.map((function(n){return n?t.findFieldItemFromTreeKey(n.schema,e):null})))},t.prototype.getTreeItemFromKey=function(e){var t=this;return this._formTree.asObservable().pipe(i.map((function(n){return n?t.findTreeItemFromKey(n,e):null})))},t.prototype.findFieldItemFromTreeKey=function(e,t){if(e)for(var n=0;n<e.length;n++){if(e[n].uuid==t)return e[n];var o=this.findFieldItemFromTreeKey(e[n].fieldGroup,t);if(o)return o}},t.prototype.findTreeItemFromKey=function(e,t){if(e)for(var n=0;n<e.length;n++){if(e[n].key==t)return e[n];var o=this.findTreeItemFromKey(e[n].children,t);if(o)return o}},t.prototype.updateFieldItem=function(e,t){if(e)for(var n=0;n<e.length;n++){if(e[n].uuid==t.uuid)return e[n]=Object.assign(Object.assign({},e[n]),t),e[n];var o=this.updateFieldItem(e[n].fieldGroup,t);if(o)return o}},t.prototype.isTreeChildSelected=function(e){if(e)for(var t=0;t<e.length;t++){if(e[t].selected)return!0;if(e[t].children){var n=this.isTreeChildSelected(e[t].children);if(n)return n}}},t.prototype.removeFieldItemKeys=function(e){if(e){for(var t=0;t<e.length;t++)e[t].uuid==e[t].key&&delete e[t].key,e[t].fieldGroup&&(e[t].fieldGroup=this.removeFieldItemKeys(e[t].fieldGroup));return e}},t.prototype.getFieldItemFromSelection=function(e){var t={},n=this.getUuid();t.uuid=t.key=n,t.label=e.label,t.type=e.type,e.wrappers&&(t.wrappers=H(e.wrappers));var o=this.formEditorConfig.preDefinedComplexItems.filter((function(t){return t.type===e.type}))[0];return o&&(t=Object.assign(Object.assign({},t),o)),t},t.prototype.initialiseNewForm=function(e){var t=this;this.nullifyForm().subscribe((function(n){t._form.next({meta:e,schema:[],model:{}}),t.unsavedItems=!1}))},t.prototype.updateMetaData=function(e){var t=this;this.form.pipe(i.take(1)).subscribe((function(n){if(n){var o=Object.assign(Object.assign({},n.meta),e),i=Object.assign(Object.assign({},n),{meta:o});t._form.next(i),t._metaUpdated.next(!0)}}))},t.prototype.getData=function(e){var t=this;return this.http.get(e).pipe(i.tap((function(e){e.meta,e.schema,e.model;t._form.next(e),t.unsavedItems=!1,t._metaUpdated.next(!0)})))},t.prototype.setFormFromJson=function(e){var t=Object.assign({},JSON.parse(e));this._form.next(t)},t.prototype.setFormFromModel=function(e){this._form.next(e)},t.prototype.nullifyForm=function(){return this._form.next(null),this.unsavedItems=!1,o.of(!0)},t.prototype.resetForm=function(){return this.initialiseNewForm({title:"",version:""}),o.of(!0)},t.prototype.getFormDataAsJSON=function(){this.form.pipe(i.take(1)).subscribe((function(e){return JSON.stringify(e)}))},t.prototype.initialiseFormSubscription=function(){var e=this;this.formSubscription=this.form.subscribe((function(t){t&&(e.selectedTreeKey.pipe(i.take(1)).subscribe((function(n){e.parseFormToTree(t.schema,n).pipe(i.take(1)).subscribe((function(t){e._formTree.next(H(t))}))})),e._formUpdated.next(!0),e.formUpdateSubscription||e.initialiseFormUpdateSubscription())}))},t.prototype.forceParseFormToTree=function(){var e=this;this.form.pipe(i.take(1)).subscribe((function(t){t&&e.selectedTreeKey.pipe(i.take(1)).subscribe((function(n){e.parseFormToTree(t.schema,n).pipe(i.take(1)).subscribe((function(t){e._formTree.next(H(t))}))}))}))},t.prototype.initialiseFormUpdateSubscription=function(){var e=this;this.formUpdateSubscription=this.formUpdated.subscribe((function(t){t&&(e.unsavedItems=!0)}))},t.prototype.parseFormToTree=function(e,t){var n,i=this;return n=e.map((function(e){return i.parseItemToLeaf(e,t,null)})),o.of(n)},t.prototype.parseItemToLeaf=function(e,t,n){var o=this;e.uuid||(e.uuid=this.getUuid());var r={key:e.uuid,title:e.label,parentKey:n,selected:e.uuid===t,expanded:e.uuid===t};if(this.formEditorConfig.getSelectableItemFromType(e.type).pipe(i.take(1)).subscribe((function(e){e&&(r.isLeaf=!e.editableConfig.hasFieldGroup)})),e.fieldGroup){var l=e.fieldGroup.map((function(n){return o.parseItemToLeaf(n,t,e.uuid)}));"tabs"===e.type?(r.expanded=!0,r.isTab=!0):r.expanded||(r.expanded=this.isTreeChildSelected(l)),r.children=l}return r},t.prototype.setSelectedTreeKey=function(e){this._selectedTreeKey.next(e)},t.prototype.nullifySelectedTreeKey=function(){this._selectedTreeKey.next(null)},t.prototype.setEditorMode=function(e){this._editorMode.next(e)},t.prototype.saveForm=function(e){var t=this;this.form.pipe(i.take(1)).subscribe((function(n){if(n){var o=JSON.parse(JSON.stringify(n.schema)),i={meta:n.meta,schema:t.removeFieldItemKeys(o),model:n.model},r={type:e,data:JSON.stringify(i)};t._save.next(r),t.unsavedItems=!1}}))},t.prototype.closeFormEditor=function(){this._close.next(!0)},t.prototype.checkFormMetaDataOutput=function(e){this._checkFormMetaOutput.next(e)},t.prototype.checkFormMetaDataInput=function(e){this._checkFormMetaInput.next(e)},t.prototype.canDeactivate=function(){return q(this,void 0,void 0,(function(){var e,t,n=this;return B(this,(function(o){return t=new Promise((function(t,n){e=t,n})),this.unsavedItems?({minWidth:"450px",overflow:"auto"},this.modal.confirm({nzTitle:"Are you sure you want to leave?",nzContent:"\n          <p>Your latest work on this form will be lost. Are you sure you want to close the editor?</p>\n        ",nzCancelText:"Cancel",nzOnCancel:function(){return q(n,void 0,void 0,(function(){return B(this,(function(t){return e(!1),[2,!0]}))}))},nzOkText:"Yes, close without saving",nzOnOk:function(){return q(n,void 0,void 0,(function(){return B(this,(function(t){return e(!0),[2,!0]}))}))}})):e(!0),[2,t]}))}))},t.prototype.ngOnDestroy=function(){this.formSubscription.unsubscribe(),this.formUpdateSubscription.unsubscribe()},t}();te.ɵprov=t.ɵɵdefineInjectable({factory:function(){return new te(t.ɵɵinject(n.HttpClient),t.ɵɵinject(ee),t.ɵɵinject(l.NzModalService))},token:te,providedIn:"root"}),te.decorators=[{type:t.Injectable,args:[{providedIn:"root"}]}],te.ctorParameters=function(){return[{type:n.HttpClient},{type:ee},{type:l.NzModalService}]};var ne=function(){function t(e,t){this.formService=e,this.formEditorService=t,this.showInlinePreview=!0,this.ready=!1,this.initForm=!1,this.hasTabs=!1,this.hasFormSchema=!1}return t.prototype.onShowInlinePreviewUpdated=function(e){this.showInlinePreview=e},t.prototype.ngOnInit=function(){var e=this;this.initialiseEditorModeSubscription(),this.formEditorService.form.pipe(i.take(1)).subscribe((function(t){t?e.initialiseFormSubscription():setTimeout((function(){e.initForm=!0}),500)}),(function(e){console.log("Form Editor service subscription error")}))},t.prototype.onFormCreated=function(){var e=this;this.initForm=!1,setTimeout((function(){e.initialiseFormSubscription()}),500)},t.prototype.initialiseFormSubscription=function(){var e=this;this.formSubscription=this.formEditorService.form.subscribe((function(t){e.formEditorService.form.pipe(i.take(1)).subscribe((function(t){if(t){var n=!1;t.schema.map((function(e){"tabs"===e.type&&(n=!0)})),e.hasTabs=n,e.hasFormSchema=t.schema.length>0,e.formService.setData(JSON.stringify(t)).subscribe((function(e){}))}}))})),setTimeout((function(){e.ready=!0}),500)},t.prototype.initialiseEditorModeSubscription=function(){var t=this;this.editorModeSubscription=this.formEditorService.editorMode.subscribe((function(n){n===e.EditorModeEnum.PREVIEW?(t.editorMode=e.EditorModeEnum.NONE,setTimeout((function(){t.formService.forceFullFormWidth=!1,t.formService.forceHideFormTitle=!1,t.editorMode=n}),50)):t.editorMode=n}))},t.prototype.ngOnDestroy=function(){this.formService.forceFullFormWidth=!1,this.formService.forceHideFormTitle=!1,this.formSubscription&&this.formSubscription.unsubscribe,this.editorModeSubscription&&this.editorModeSubscription.unsubscribe},t}();ne.decorators=[{type:t.Component,args:[{selector:"tf-ng-form-editor",template:'\n<div nz-row nzJustify="center" nzAlign="middle" class="initial-page-wrapper" *ngIf="!ready">\n  <div nz-col *ngIf="!initForm">\n    <i class="white text-super-xl" nz-icon [nzType]="\'loading\'"></i>\n  </div>\n  <form-editor-new-form nz-col nzFlex="auto" *ngIf="initForm" (formInited)="onFormCreated()"></form-editor-new-form>\n</div>\n\n\n\x3c!-- Form has been created --\x3e\n<div nz-row class="form-editor-page" *ngIf="ready">\n\n  <div nz-col nzFlex="80px" class="form-editor-navigation">\n    <form-editor-navigation\n      [disabled]="editorMode !== \'edit\'"\n      [hasTabs]="hasTabs"\n      [hasFormSchema]="hasFormSchema"\n    ></form-editor-navigation>\n  </div>\n\n  <div nz-col nzFlex="auto" class="form-editor-content">\n    <div nz-row nzFlex="auto" class="form-editor-page-title">\n\n      <form-editor-page-header></form-editor-page-header>\n\n    </div> \x3c!-- END form-editor-title--\x3e\n\n    <div nz-row nzGutter="16" class="form-editor-page-details" *ngIf="editorMode === \'edit\'">\n\n      \x3c!-- TREE VIEW --\x3e\n      <div nz-col nzFlex="300px">\n        <div class="form-editor-field-detail rounded bg-white">\n          <form-editor-tree-view></form-editor-tree-view>\n        </div>\n      </div>\n\n      \x3c!-- <div nz-col nzFlex="345px">\n        <div class="form-editor-field-detail rounded bg-white">\n          <form-editor-field-details></form-editor-field-details>\n        </div>\n      </div> --\x3e\n\n      \x3c!-- FIELD --\x3e\n      <div nz-col nzFlex="auto" *ngIf="hasFormSchema">\n        <div class="form-editor-field-detail rounded bg-white">\n          <form-editor-field></form-editor-field>\n        </div>\n      </div>\n\n      \x3c!-- INLINE PREVIEW --\x3e\n      <div nz-col [nzFlex]="showInlinePreview ? \'450px\' : \'30px\' " class="dynamic-width" *ngIf="hasFormSchema">\n        <form-editor-inline-preview\n          [showInlinePreview]="showInlinePreview"\n          (updatedShowInlinePreview)="onShowInlinePreviewUpdated($event)"\n        ></form-editor-inline-preview>\n      </div>\n\n    </div> \x3c!-- END form-editor-details--\x3e\n\n\n    <div\n      nz-row nzGutter="16"\n      class="form-editor-preview-wrapper"\n      *ngIf="editorMode === \'preview\'"\n    >\n\n      <div nz-col nzFlex="auto">\n        <div class="form-editor-preview rounded bg-white">\n          <tf-ng-form></tf-ng-form>\n        </div>\n      </div>\n\n      <div nz-col nzFlex="280px">\n        <div class="form-editor-field-detail rounded bg-white">\n          <form-editor-preview-settings></form-editor-preview-settings>\n        </div>\n      </div>\n\n    </div> \x3c!-- END form-editor-details--\x3e\n\n  </div>\n\n</div> \x3c!-- END form-editor-page--\x3e\n\n\n\n',styles:[":host{display:block}.form-editor-page,.initial-page-wrapper{display:flex;min-height:100vh;position:relative;margin-top:-98px}.form-editor-page{flex-wrap:nowrap;margin-left:-.6rem}@media (min-width:640px){.form-editor-page{margin-left:-1.4rem}}.form-editor-content{display:flex;flex-direction:column}.form-editor-page-title{height:85px;display:flex}.form-editor-page-details,.form-editor-preview-wrapper{flex:1 0 0;padding-bottom:1.4rem;flex-flow:row}.form-editor-field-detail,.form-editor-fields{display:flex;flex-direction:column;min-height:100%;flex:1 0 0}.form-editor-fields{padding:1.4rem}.form-editor-preview{display:flex;flex-direction:column;min-height:100%;flex:1 0 0;padding:0}.dynamic-width{transition-property:flex;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.text-super-xl{font-size:40px}"]}]}],ne.ctorParameters=function(){return[{type:a.TfNgFormService},{type:te}]};var oe=function(){function n(n){this.formEditorConfig=n,this.selectedField=new t.EventEmitter,this._category=e.SelectableCategory.SIMPLE}return Object.defineProperty(n.prototype,"category",{get:function(){return this._category},set:function(e){this._category=e,this.setTypes()},enumerable:!1,configurable:!0}),n.prototype.setTypes=function(){var e=this;this.formEditorConfig.selectableItems.pipe(i.take(1)).subscribe((function(t){e.types=t?H(t.filter((function(t){return t.category===e.category}))):[]}))},n.prototype.add=function(e){var t=this;this.formEditorConfig.getSelectableItemFromId(e).pipe(i.take(1)).subscribe((function(e){t.selectedField.emit(e)}))},n}();oe.decorators=[{type:t.Component,args:[{selector:"form-editor-field-picker",template:'\x3c!-- <form novalidate [formGroup]="form">\n  <div class="form-group">\n\n    <select [formControl]="type">\n      <option *ngFor="let type of types" [ngValue]="type.id">{{ type.label }}</option>\n    </select>\n\n    <button type="button" [disabled]="form.invalid" (click)="add()">\n      Add\n    </button>\n  </div>\n</form> --\x3e\n\n<ul nz-menu nzMode="inline" class="inline-menu-blue" nzTheme="dark">\n  <li nz-menu-item *ngFor="let item of types">\n    <form-editor-navigation-item\n      [item]="item"\n      (click)="add(item.id)"\n    ></form-editor-navigation-item>\n  </li>\n</ul>\n\n',styles:[":host{display:block}"]}]}],oe.ctorParameters=function(){return[{type:ee}]},oe.propDecorators={selectedField:[{type:t.Output,args:["selectedField"]}],category:[{type:t.Input,args:["category"]}]};var ie=function(){};ie.decorators=[{type:t.NgModule,args:[{declarations:[],imports:[s.CommonModule,c.NzTypographyModule,u.NzLayoutModule,f.NzMenuModule,h.NzDrawerModule,b.NzGridModule,g.NzBreadCrumbModule,y.NzDividerModule,v.NzIconModule,I.NzFormModule,z.NzInputModule,w.NzAutocompleteModule,C.NzCheckboxModule,x.NzRadioModule,F.NzSwitchModule,S.NzDatePickerModule,T.NzSelectModule,O.NzUploadModule,E.NzButtonModule,M.NzDropDownModule,D.NzCalendarModule,k.NzListModule,P.NzTableModule,N.NzTabsModule,L.NzToolTipModule,G.NzPopoverModule,_.NzCarouselModule,l.NzModalModule,R.NzMessageModule,j.NzEmptyModule,U.NzTreeModule,A.NzCollapseModule],exports:[c.NzTypographyModule,u.NzLayoutModule,f.NzMenuModule,h.NzDrawerModule,b.NzGridModule,g.NzBreadCrumbModule,y.NzDividerModule,v.NzIconModule,I.NzFormModule,z.NzInputModule,w.NzAutocompleteModule,C.NzCheckboxModule,x.NzRadioModule,F.NzSwitchModule,S.NzDatePickerModule,T.NzSelectModule,O.NzUploadModule,E.NzButtonModule,M.NzDropDownModule,D.NzCalendarModule,k.NzListModule,P.NzTableModule,N.NzTabsModule,L.NzToolTipModule,G.NzPopoverModule,_.NzCarouselModule,l.NzModalModule,R.NzMessageModule,j.NzEmptyModule,U.NzTreeModule,A.NzCollapseModule]}]}];var re=function(){function e(e,t){this.formEditorService=e,this.modal=t,this._disabled=!1,this._hasTabs=!1,this.hasFormSchema=!1,this.hide=!1,this.hideNavigation=!1,this.animateHideToggles=!0,this.isMobile=!0,this.isCollapsed=!0,this.currentMenuColour="blue",this.sideBarIsActive=!1,this.drawIsActive=!1,this.anyMenuVisable=!1,this.layoutMenuVisible=!1,this.complexMenuVisible=!1,this.singleMenuVisible=!1,this.formMenuVisible=!1,this.navigationItems=[{label:"Layout",type:"layout-menu",icon:"edit"},{label:"Basic Inputs",type:"single-menu",icon:"export"},{label:"Advanced Layouts",type:"complex-menu",icon:"appstore"},{label:"Settings",type:"form-menu",icon:"form"}]}return Object.defineProperty(e.prototype,"disabled",{get:function(){return this._disabled},set:function(e){e&&this.closeAll(),this._disabled=e},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"hasTabs",{get:function(){return this._hasTabs},set:function(e){e&&this.closeAll(),this._hasTabs=e},enumerable:!1,configurable:!0}),e.prototype.ngOnInit=function(){},e.prototype.onToggleDrawer=function(e){if(!this.disabled)switch(e){case"layout-menu":if(this.hasTabs)return;this.anyMenuVisable=this.layoutMenuVisible=!this.layoutMenuVisible,this.complexMenuVisible=!1,this.singleMenuVisible=!1,this.formMenuVisible=!1;break;case"complex-menu":if(this.hasTabs)return;this.layoutMenuVisible=!1,this.anyMenuVisable=this.complexMenuVisible=!this.complexMenuVisible,this.singleMenuVisible=!1,this.formMenuVisible=!1;break;case"single-menu":if(this.hasTabs)return;this.layoutMenuVisible=!1,this.complexMenuVisible=!1,this.anyMenuVisable=this.singleMenuVisible=!this.singleMenuVisible,this.formMenuVisible=!1;break;case"form-menu":this.layoutMenuVisible=!1,this.complexMenuVisible=!1,this.singleMenuVisible=!1,this.anyMenuVisable=this.formMenuVisible=!this.formMenuVisible}},e.prototype.getHexMenuColour=function(e){switch(e){case"layout-menu":return{hex:this.layoutMenuVisible?"white":"blue",icon:this.layoutMenuVisible?"blue":"white"};case"complex-menu":return{hex:this.complexMenuVisible?"white":"blue",icon:this.complexMenuVisible?"blue":"white"};case"single-menu":return{hex:this.singleMenuVisible?"white":"blue",icon:this.singleMenuVisible?"blue":"white"};case"form-menu":return{hex:this.formMenuVisible?"white":"blue",icon:this.formMenuVisible?"blue":"white"}}},e.prototype.getMenuDrawerStateClass=function(e){switch(e){case"layout-menu":return this.layoutMenuVisible?"show":"hide";case"complex-menu":return this.complexMenuVisible?"show":"hide";case"single-menu":return this.singleMenuVisible?"show":"hide";case"form-menu":return this.formMenuVisible?"show":"hide"}},e.prototype.closeAll=function(){this.layoutMenuVisible=!1,this.complexMenuVisible=!1,this.singleMenuVisible=!1,this.formMenuVisible=!1,this.anyMenuVisable=!1},e.prototype.getIsDisabled=function(e){return!!this.disabled||!(!this.hasTabs||"form-menu"===e)},e.prototype.onSelectedField=function(e){var t=this,n=this.formEditorService.getFieldItemFromSelection(e);"tabs"===n.type?this.formEditorService.form.pipe(i.take(1)).subscribe((function(e){e&&t.modal.confirm({nzTitle:"<b>Adding sections</b>",nzContent:"\n              <p>When adding the sections feature to a form it changes the structure. This means that every element within the form needs to be placed into a section.</p>\n              "+(e.schema.length>0?"<p><b>The fields you have added already will be placed into the first section</b></p>":"")+"\n            ",nzOnOk:function(){t.formEditorService.updateMetaData({showSubmitButton:!1}),e.schema.length>0?(t.formEditorService.addTabsFormItem(n),t.closeAll()):t.addFormItem(n)}})})):this.addFormItem(n)},e.prototype.addFormItem=function(e){this.formEditorService.addFormItem(e),this.closeAll()},e}();re.decorators=[{type:t.Component,args:[{selector:"form-editor-navigation",template:'\n<div class="wrapper">\n  <nz-layout\n    class="form-editor-side-bar"\n    [ngClass]="[\n      \'bg-\'+currentMenuColour,\n      !sideBarIsActive ? \' inactive\' : \' active\',\n      hide || hideNavigation ? \'hide\' : \'show\',\n      animateHideToggles ? \'hide-toggle-animate\' : \'hide-toggle-static\',\n    ]"\n  >\n\n  \x3c!-- nz-tooltip\n  [nzTooltipTitle]="item.label"\n  nzTooltipOverlayClassName="tf-sidebar-tooltip"\n  nzTooltipPlacement="right" --\x3e\n\n    <form-editor-navigation-side-bar>\n      <div body class="form-editor-side-bar-nav-wrapper">\n\n        <tf-ng-hexagon\n          *ngFor="let item of navigationItems"\n          (click)="onToggleDrawer(item.type)"\n          [colour]="getHexMenuColour(item.type).hex"\n          [disabled]="getIsDisabled(item.type)"\n\n\n\n          outline-colour="white"\n          size="m"\n          [as-button]="true"\n        >\n          \x3c!-- <i\n            nz-icon\n            [ngClass]="getHexMenuColour(item.type).icon"\n            [nzType]="item.icon" nzTheme="outline"\n          ></i> --\x3e\n\n          <tf-ng-tf-ng-icon-layout\n            [ngClass]="item.type"\n            *ngIf="item.type === \'layout-menu\'"\n            [colour]="getHexMenuColour(item.type).icon"\n          ></tf-ng-tf-ng-icon-layout>\n          <tf-ng-icon-basic-input\n            [ngClass]="item.type"\n            *ngIf="item.type === \'single-menu\'"\n            [colour]="getHexMenuColour(item.type).icon"\n          ></tf-ng-icon-basic-input>\n          <tf-ng-icon-pre-built-items\n            [ngClass]="item.type"\n            *ngIf="item.type === \'complex-menu\'"\n            [colour]="getHexMenuColour(item.type).icon"\n          ></tf-ng-icon-pre-built-items>\n          <tf-ng-tf-ng-icon-edit\n            [ngClass]="item.type"\n            *ngIf="item.type === \'form-menu\'"\n            [colour]="getHexMenuColour(item.type).icon"\n          ></tf-ng-tf-ng-icon-edit>\n\n        </tf-ng-hexagon>\n\n      </div>\n    </form-editor-navigation-side-bar>\n  </nz-layout>\n\n\n\n  <div\n    class="form-editor-navigation-drawer-wrapper"\n    [ngClass]="anyMenuVisable ? \'show\' : \'hide\'"\n  >\n    <div\n      class="form-editor-navigation-drawer-bg"\n      [ngClass]="anyMenuVisable ? \'show\' : \'hide\'"\n      (click)="closeAll()"\n    ></div>\n\n    <div\n      *ngFor="let item of navigationItems"\n      class="form-editor-navigation-drawer"\n      [ngClass]="[\n        getMenuDrawerStateClass(item.type),\n        item.type,\n        item.type === \'form-menu\' ? \'bg-white\' : \'bg-blue\'\n      ]"\n    >\n      <div class="title-wrapper">\n        <tf-ng-form-title class="title">\n          <h4 [ngClass]="item.type === \'form-menu\' ? \'blue\' : \'white\'">\n            {{ item.label }}\n          </h4>\n        </tf-ng-form-title>\n      </div>\n\n\n      <form-editor-field-picker\n        *ngIf="item.type === \'layout-menu\'"\n        category="Layout"\n        (selectedField)="onSelectedField($event)"\n      ></form-editor-field-picker>\n\n      <form-editor-field-picker\n        *ngIf="item.type === \'complex-menu\'"\n        category="Complex"\n        (selectedField)="onSelectedField($event)"\n      ></form-editor-field-picker>\n\n\n      <form-editor-field-picker\n        *ngIf="item.type === \'single-menu\'"\n        category="Simple"\n        (selectedField)="onSelectedField($event)"\n      ></form-editor-field-picker>\n\n      <div\n        class="content-wrapper"\n        *ngIf="item.type === \'form-menu\'"\n      >\n        <form-editor-meta-settings></form-editor-meta-settings>\n      </div>\n\n\n    </div>\n  </div>\n\n\n\n  \x3c!-- <div\n    *ngFor="let item of navigationItems"\n    class="form-editor-navigation-drawer"\n    [ngClass]="[\n      getMenuDrawerStateClass(item.type),\n      item.type,\n      item.type === \'form-menu\' ? \'bg-white\' : \'bg-blue\'\n    ]"\n  >\n    <div class="title-wrapper">\n      <tf-ng-form-title class="title">\n        <h4 [ngClass]="item.type === \'form-menu\' ? \'blue\' : \'white\'">\n          {{ item.label }}\n        </h4>\n      </tf-ng-form-title>\n    </div>\n\n\n    <form-editor-field-picker\n      *ngIf="item.type === \'layout-menu\'"\n      category="Layout"\n      (selectedField)="onSelectedField($event)"\n    ></form-editor-field-picker>\n\n    <form-editor-field-picker\n      *ngIf="item.type === \'complex-menu\'"\n      category="Complex"\n      (selectedField)="onSelectedField($event)"\n    ></form-editor-field-picker>\n\n\n    <form-editor-field-picker\n      *ngIf="item.type === \'single-menu\'"\n      category="Simple"\n      (selectedField)="onSelectedField($event)"\n    ></form-editor-field-picker>\n\n    <div\n      class="content-wrapper"\n      *ngIf="item.type === \'form-menu\'"\n    >\n      <form-editor-meta-settings></form-editor-meta-settings>\n    </div>\n\n\n  </div> --\x3e\n\n\n\n</div>\n',styles:[":host{display:block}.wrapper{display:flex;position:relative}tf-ng-side-bar{height:calc(100vh - 0px)!important}.form-editor-side-bar{min-height:calc(100vh - 20px);position:relative;min-width:80px;max-width:80px;display:none;flex-direction:column;transition-property:color,background-color,border-color;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);z-index:50}.form-editor-side-bar.hide{left:-80px;opacity:1;pointer-events:none}.form-editor-side-bar.show{left:0;opacity:1;pointer-events:all;display:flex}.form-editor-side-bar.hide-toggle-animate{transition-property:opacity,left}.form-editor-navigation-drawer-wrapper{position:absolute;display:flex;height:100%;min-height:100vh;width:calc(100vw - 95px);min-width:100%;z-index:25;pointer-events:none}.form-editor-navigation-drawer-bg{position:relative;height:100%;min-height:100vh;width:100%;min-width:100%}.form-editor-navigation-drawer-bg.show{display:flex;pointer-events:all}.form-editor-navigation-drawer-bg.hide{display:none;pointer-events:none}.form-editor-navigation-drawer{position:absolute;display:flex;flex-direction:column;height:100vh;min-height:100vh;z-index:25;transition:left .3s cubic-bezier(.7,.3,.1,1),box-shadow .3s cubic-bezier(.7,.3,.1,1)}.form-editor-navigation-drawer.form-menu{width:320px}.form-editor-navigation-drawer.complex-menu,.form-editor-navigation-drawer.layout-menu,.form-editor-navigation-drawer.single-menu{width:250px}.form-editor-navigation-drawer.show{left:80px;box-shadow:6px 0 16px -8px rgb(0 0 0/8%),9px 0 28px 0 rgb(0 0 0/5%),12px 0 48px 16px rgb(0 0 0/3%);pointer-events:all}.form-editor-navigation-drawer.hide{left:-170px;box-shadow:6px 0 16px -8px rgb(0 0 0/0),9px 0 28px 0 rgb(0 0 0/0),12px 0 48px 16px rgb(0 0 0/0);pointer-events:none}.form-editor-navigation-drawer.form-menu.hide{left:-240px}.form-editor-navigation-drawer .title-wrapper{padding:1.4rem 1.4rem 0;margin-top:55px}.form-editor-navigation-drawer .content-wrapper{padding:0 0 1.4rem}.form-editor-side-bar-nav-wrapper tf-ng-hexagon{margin-bottom:1rem;cursor:pointer}.complex-menu,.layout-menu{height:30px;pointer-events:none}.single-menu{width:35px;pointer-events:none}.form-menu{height:36px;pointer-events:none}"]}]}],re.ctorParameters=function(){return[{type:te},{type:l.NzModalService}]},re.propDecorators={disabled:[{type:t.Input,args:["disabled"]}],hasTabs:[{type:t.Input,args:["hasTabs"]}],hasFormSchema:[{type:t.Input,args:["hasFormSchema"]}],hide:[{type:t.Input,args:["hide"]}],hideNavigation:[{type:t.Input,args:["hideNavigation"]}],animateHideToggles:[{type:t.Input,args:["animateHideToggles"]}]};var le=function(){};le.decorators=[{type:t.Component,args:[{selector:"form-editor-navigation-side-bar",template:'<div class="side-bar-left-column">\n\n  <div class="header-content">\n    <ng-content select="[header]"></ng-content>\n  </div>\n\n  <div class="body-content content">\n    <ng-content select="[body]"></ng-content>\n  </div>\n\n  <div class="footer-content content">\n    <ng-content select="[footer]"></ng-content>\n  </div>\n\n</div>\n\n',styles:[":host{display:flex;height:100vh}.side-bar-left-column{flex:1 0 0%;position:relative;display:flex;flex-direction:column;color:#fff}.header-content{align-items:flex-end;min-height:74px;height:74px}.content,.header-content{display:flex;justify-content:center;overflow:hidden}.content{position:relative;padding:.7rem 0}.content>div{display:flex;flex-direction:column}.body-content{flex:1 0 0%}.footer-content{align-items:flex-end;margin:20px 0}"]}]}];var ae=function(){function e(){this.mouseIn=!1}return Object.defineProperty(e.prototype,"item",{get:function(){return this._item},set:function(e){this._item=e},enumerable:!1,configurable:!0}),e.prototype.onMouseOver=function(){this.mouseIn=!0},e.prototype.onMouseOut=function(){this.mouseIn=!1},e}();ae.decorators=[{type:t.Component,args:[{selector:"form-editor-navigation-item",template:'\n<div\n  class="navigation-item"\n  (mouseover)="onMouseOver()"\n  (mouseout)="onMouseOut()"\n>\n  {{ item?.label}}\n</div>\n',styles:[":host{display:block}.navigation-item{display:flex;flex-direction:row;justify-content:flex-start;align-items:center}.navigation-item tf-ng-hexagon{margin-right:12px;margin-top:2px}"]}]}],ae.ctorParameters=function(){return[]},ae.propDecorators={item:[{type:t.Input,args:["item"]}]};var se=function(){function t(t,n,o){this.formEditorService=t,this.fb=n,this.message=o,this.loaded=!1,this.metaFormUpdating=!1,this.allowTitle=e.CheckFormMetaDataStatus.UNSET,this.allowCode=e.CheckFormMetaDataStatus.UNSET}return t.prototype.ngOnInit=function(){this.initialiseMetaUpdateSubscription(),this.getMetaData()},t.prototype.initialiseMetaUpdateSubscription=function(){var e=this;this.metaUpdateSubscription=this.formEditorService.metaUpdated.subscribe((function(t){t&&e.getMetaData()}),(function(e){}))},t.prototype.getMetaData=function(){var e=this;this.formEditorService.form.pipe(i.take(1)).subscribe((function(t){t&&(e.metaData=t.meta,e.initForm(),e.loaded=!0)}),(function(e){}))},t.prototype.initForm=function(){this.metaForm=this.fb.group({title:[this.metaData.title,{validators:[d.Validators.required],updateOn:"change"}],showTitle:[this.metaData.showTitle||null,{updateOn:"change"}],code:[this.metaData.code||null,{updateOn:"change"}],version:[this.metaData.version]}),this.metaForm.controls.version.disable(),this.metaForm.markAsPristine()},t.prototype.onMetaFormUpdate=function(){var t=this;if(this.metaForm.valid){this.metaFormUpdating=!0,this.returnedCheckedFormMetaData={};var n=0,o={};this.metaData.title!==this.metaForm.value.title&&(n++,o.title=this.metaForm.value.title,o.allowTitle=this.allowTitle=e.CheckFormMetaDataStatus.PENDING),this.metaData.code!==this.metaForm.value.code&&(n++,o.code=this.metaForm.value.code,o.allowCode=this.allowCode=e.CheckFormMetaDataStatus.PENDING),n>0?(this.checkFormMetaInputSubscription=this.formEditorService.checkFormMetaInput.subscribe((function(o){t.checkFormMetaInputSubscription.unsubscribe();var i=0;o?(t.returnedCheckedFormMetaData=o,o.allowTitle&&(o.allowTitle===e.CheckFormMetaDataStatus.ALLOW&&(i++,t.metaData=Object.assign(Object.assign({},t.metaData),{title:o.title})),t.allowTitle=o.allowTitle),o.allowCode&&(o.allowCode===e.CheckFormMetaDataStatus.ALLOW&&(i++,t.metaData=Object.assign(Object.assign({},t.metaData),{code:o.code})),t.allowCode=o.allowCode),i===n?t.syncFormDataToModel():(t.metaForm.markAsPristine(),t.metaFormUpdating=!1)):(t.metaForm.markAsPristine(),t.metaFormUpdating=!1)})),this.formEditorService.checkFormMetaDataOutput(o)):this.syncFormDataToModel()}},t.prototype.syncFormDataToModel=function(){this.metaForm.markAsPristine(),this.metaFormUpdating=!1,0!==this.allowTitle&&2!==this.allowTitle&&0!==this.allowCode&&2!==this.allowCode&&(this.metaData=Object.assign(Object.assign({},this.metaData),this.metaForm.value),this.formEditorService.updateMetaData(this.metaData),this.message.create("success","Your form settings have been updated"))},t.prototype.ngOnDestroy=function(){this.metaUpdateSubscription.unsubscribe,this.checkFormMetaInputSubscription&&this.checkFormMetaInputSubscription.unsubscribe},t}();se.decorators=[{type:t.Component,args:[{selector:"form-editor-meta-settings",template:'\n<div class="wrapper" *ngIf="loaded">\n\n  <form nz-form [formGroup]="metaForm" nzLayout="vertical" class="width-all">\n\n    <nz-form-item>\n      <nz-form-control\n        [nzValidateStatus]="allowTitle === 2 ? \'error\' : \'\'"\n        [nzErrorTip]="returnedCheckedFormMetaData?.titleErrMessage || \'Form title cannot be used in this format. Please change and try again\'"\n      >\n\n        <nz-form-label nzFor="title">Form Title</nz-form-label>\n\n        <nz-input-group [nzSuffix]="suffixTitle">\n          <input nz-input formControlName="title" maxlength="255"/>\n        </nz-input-group>\n\n        <ng-template #suffixTitle>\n          <i nz-icon nzType="sync" [nzSpin]="true" class="grey" *ngIf="allowTitle === 0"></i>\n          <i nz-icon nzType="check-circle" nzTheme="outline" class="green" *ngIf="allowTitle === 1"></i>\n          <i nz-icon nzType="close-circle" nzTheme="outline" class="red" *ngIf="allowTitle === 2"></i>\n        </ng-template>\n\n\n      </nz-form-control>\n    </nz-form-item>\n\n    <div\n      nz-row nzAlign="middle" nzJustify="end"\n      class="switch-wrapper"\n    >\n      <nz-form-label\n        nz-col nzFlex="auto"\n        nzFor="showTitle"\n      >Show title in form</nz-form-label>\n      <nz-form-control nz-col nzFlex="45px">\n        <nz-switch formControlName="showTitle"></nz-switch>\n      </nz-form-control>\n    </div>\n    \x3c!-- <nz-divider></nz-divider> --\x3e\n\n    <nz-form-item>\n      <nz-form-control\n        [nzValidateStatus]="allowCode === 2 ? \'error\' : \'\'"\n        [nzErrorTip]="returnedCheckedFormMetaData?.codeErrMessage || \'Form code cannot be used in this format. Please change and try again\'"\n      >\n        <nz-form-label nzFor="code">Code</nz-form-label>\n        <nz-input-group  [nzSuffix]="suffixCode">\n          <input nz-input formControlName="code" placeholder="eg: form-001" maxlength="255"/>\n        </nz-input-group>\n\n        <ng-template #suffixCode>\n          <i nz-icon nzType="sync" [nzSpin]="true" class="grey" *ngIf="allowCode === 0"></i>\n          <i nz-icon nzType="check-circle" nzTheme="outline" class="green" *ngIf="allowCode === 1"></i>\n          <i nz-icon nzType="close-circle" nzTheme="outline" class="red" *ngIf="allowCode === 2"></i>\n        </ng-template>\n\n      </nz-form-control>\n    </nz-form-item>\n\n    <nz-form-item>\n      <nz-form-control>\n        <nz-form-label nzFor="code">Version</nz-form-label>\n        <input nz-input formControlName="version" maxlength="255"/>\n      </nz-form-control>\n    </nz-form-item>\n\n    <p nz-typography *ngIf="allowCode === 0 || allowTitle === 0" class="grey">\n      Checking form {{ allowTitle === 0 ? \'title\' : \'\' }}{{ allowTitle === 0 && allowCode === 0 ? \' and \' : \'\' }}{{ allowCode === 0 ? \'code\' : \'\' }}...\n    </p>\n    <p nz-typography *ngIf="allowCode !== 0 && allowTitle !== 0">&nbsp;</p>\n\n    <div nz-row nzJustify="end" nzAlign="top" class="form-submit-wrapper">\n      <button\n        nz-col nz-button\n        nzType="primary" type="submit"\n        [ngClass]="!(metaForm.dirty && metaForm.valid) ? \'grey\' : \'aqua\' "\n        [disabled]="!(metaForm.dirty && metaForm.valid)"\n        (click)="onMetaFormUpdate()"\n        [nzLoading]="metaFormUpdating"\n      >\n        {{ metaFormUpdating ? \'Updating\' : \'Update\' }}\n      </button>\n    </div>\n\n  </form>\n\n  \x3c!-- <pre>{{ selectableItem |json }}</pre> --\x3e\n</div>\n',styles:[":host{display:block}.wrapper{padding:0}.no-padding,.switch-wrapper .ant-form-item-label{padding:0!important}.switch-wrapper{margin-bottom:8px}.form-submit-wrapper{flex-wrap:nowrap}.form-submit-wrapper p{margin-right:10px}"]}]}],se.ctorParameters=function(){return[{type:te},{type:d.FormBuilder},{type:R.NzMessageService}]};var de=function(){function e(e){this.formEditorService=e}return e.prototype.nzClick=function(e){this.formEditorService.setSelectedTreeKey(e.keys[0])},e.prototype.ngOnInit=function(){this.initialiseFormSubscription(),this.initialiseKeySelectedSubscription()},e.prototype.nzEvent=function(e){},e.prototype.initialiseFormSubscription=function(){var e=this;this.formSubscription=this.formEditorService.formTree.subscribe((function(t){e.nodes=H(t)}))},e.prototype.initialiseKeySelectedSubscription=function(){var e=this;this.selectedKeySubscription=this.formEditorService.selectedTreeKey.subscribe((function(t){e.formEditorService.forceParseFormToTree()}))},e.prototype.onSupressExpansion=function(e){e.stopPropagation(),e.preventDefault()},e.prototype.ngOnDestroy=function(){this.formSubscription.unsubscribe(),this.selectedKeySubscription.unsubscribe()},e}();de.decorators=[{type:t.Component,args:[{selector:"form-editor-tree-view",template:'<div class="wrapper width-all ant-form">\n  <tf-ng-form-title class="title">\n    <h4 ng-typography nz-col nzFlex="auto" class="blue">\n      Overview\n    </h4>\n  </tf-ng-form-title>\n  <p *ngIf="!nodes.length" class="navy">To get started choose an element from the menus on the left</p>\n</div>\n\n<div class="tree-wrapper">\n  <nz-tree\n    class="tf-app-tree"\n    #nzTreeComponent\n    [nzData]="nodes"\n    [nzExpandedIcon]="multiExpandedIconTpl"\n    [nzTreeTemplate]="nzTreeTemplate"\n    (nzClick)="nzClick($event)"\n  ></nz-tree>\n</div>\n\n<ng-template #multiExpandedIconTpl let-node let-origin="origin">\n  \x3c!-- <i *ngIf="origin.isTab" nz-icon [nzType]="node.isExpanded ? \'folder-open\' : \'folder\'" class="ant-tree-switcher-line-icon"></i> --\x3e\n  <div *ngIf="origin.isTab" class="node-switcher" (click)="onSupressExpansion($event)">\n    <i nz-icon nzType="caret-down" class="grey ant-tree-switcher-line-icon"></i>\n  </div>\n  <i *ngIf="!origin.isTab" nz-icon [nzType]="node.isExpanded ? \'caret-down\' : \'caret-right\'" class="ant-tree-switcher-line-icon"></i>\n</ng-template>\n\n<ng-template #nzTreeTemplate let-node let-origin="origin">\n  <form-editor-tree-item\n    [node]="node"\n    [isOpen]="origin.isOpen"\n    [origin]="origin"\n  ></form-editor-tree-item>\n</ng-template>\n',styles:[":host{display:block}.tree-wrapper{display:flex;flex-direction:column;min-height:100%;flex:1 0 0;padding:0 1.4rem 1.4rem 0}.custom-node{cursor:pointer;line-height:24px;display:inline-flex;width:100%}.custom-node,.file-name,.folder-name{margin-left:4px}.tree-node-popover .ant-popover-inner-content{padding:0!important}.ant-tree-switcher-line-icon{font-size:10px}.node-switcher{position:absolute;display:flex;justify-content:center;align-items:center;width:34px;height:34px;cursor:default}.tf-app-tree .ant-tree-node-content-wrapper.ant-tree-node-selected{background-color:#ff69b4!important}"]}]}],de.ctorParameters=function(){return[{type:te}]},de.propDecorators={nzTreeComponent:[{type:t.ViewChild,args:["nzTreeComponent",{static:!1}]}]};var pe=function(){function e(e,t,n){this.formEditorService=e,this.formEditorConfig=t,this.fb=n}return Object.defineProperty(e.prototype,"key",{get:function(){return this._key},set:function(e){this._key=e,this.initialiseFormSubscription()},enumerable:!1,configurable:!0}),e.prototype.ngOnInit=function(){},e.prototype.initialiseFormSubscription=function(){var e=this;this.key?this.formEditorService.getFieldItemFromTreeKey(this.key).subscribe((function(t){t&&(e.fieldItem=t,e.selectableItem||e.initialiseItemConfigData())})):(this.fieldItem=null,this.selectableItem=null)},e.prototype.initialiseItemConfigData=function(){var e=this;this.formEditorConfig.getSelectableItemFromType(this.fieldItem.type).pipe(i.take(1)).subscribe((function(t){t?(e.selectableItem=Object.assign({},t),e.initForm()):e.selectableItem=null}))},e.prototype.initForm=function(){this.form=this.fb.group({}),this.selectableItem.editableConfig.setLabel&&this.form.addControl("label",new d.FormControl(this.fieldItem.label,[])),this.selectableItem.editableConfig.setDesc&&this.form.addControl("description",new d.FormControl(this.fieldItem.description,[])),this.selectableItem.editableConfig.setPlaceholder&&this.form.addControl("placeholder",new d.FormControl(this.fieldItem.placeholder,[])),this.selectableItem.editableConfig.hasComponentOptions&&this.form.addControl("componentOptions",new d.FormControl(this.fieldItem.componentOptions,[])),this.selectableItem.editableConfig.hasFieldGroup&&this.form.addControl("fieldGroup",new d.FormControl(this.fieldItem.fieldGroup,[])),this.onChanges()},e.prototype.onChanges=function(){var e=this;this.form.valueChanges.subscribe((function(t){e.fieldItem=Object.assign(Object.assign({},e.fieldItem),e.form.value),e.formEditorService.updateFormItem(e.fieldItem)}))},e.prototype.onOptionsUpdated=function(e){var t=Object.assign(Object.assign({},this.fieldItem.componentOptions),{options:e});this.fieldItem=Object.assign(Object.assign({},this.fieldItem),{componentOptions:t}),this.formEditorService.updateFormItem(this.fieldItem)},e.prototype.addFieldGroupItem=function(e){var t=this.formEditorService.getFieldItemFromSelection(e);this.formEditorService.addFormItemToFieldGroup(this.fieldItem,t)},e.prototype.ngOnDestroy=function(){},e}();pe.decorators=[{type:t.Component,args:[{selector:"form-editor-field-item",template:'\x3c!-- <p>field-item works! {{ key }}</p> --\x3e\n<div *ngIf="!fieldItem">\n  no item\n</div>\n\n\n\n\n<div class="wrapper" *ngIf="fieldItem && selectableItem">\n\n\n  <form nz-form [formGroup]="form" nzLayout="vertical" class="width-all">\n\n\n    <nz-form-item *ngIf="selectableItem?.editableConfig.setLabel">\n      <nz-form-control>\n        <nz-form-label nzFor="label">Label</nz-form-label>\n        <input nz-input formControlName="label" placeholder="Label" maxlength="255"/>\n      </nz-form-control>\n    </nz-form-item>\n\n    <nz-divider></nz-divider>\n\n    <nz-form-item *ngIf="selectableItem?.editableConfig.setDesc">\n      <nz-form-control>\n        <nz-form-label nzFor="description">Description</nz-form-label>\n        <textarea rows="1" nz-input formControlName="description" maxlength="255"></textarea>\n      </nz-form-control>\n    </nz-form-item>\n\n    <nz-form-item *ngIf="selectableItem?.editableConfig.setPlaceholder">\n      <nz-form-control>\n        <nz-form-label nzFor="placeholder">Placeholder</nz-form-label>\n        <input nz-input formControlName="placeholder" maxlength="255"/>\n      </nz-form-control>\n    </nz-form-item>\n\n  </form>\n\n  <div *ngIf="selectableItem.editableConfig.hasComponentOptions">\n    <form-editor-field-item-options\n      [optionItems]="fieldItem.componentOptions?.options"\n      (updated)="onOptionsUpdated($event)"\n    ></form-editor-field-item-options>\n  </div>\n\n  <div *ngIf="selectableItem.editableConfig.hasFieldGroup">\n    <form-item-field-group\n      [selectableItem]="selectableItem"\n      [fieldItem]="fieldItem"\n      (updated)="onComponentOptionsUpdated($event)"\n      (selectedField)="addFieldGroupItem($event)"\n    ></form-item-field-group>\n  </div>\n\n  <div>\n    {{ selectableItem.editableConfig.type }}\n    {{ selectableItem.editableConfig.id }}\n  </div>\n\n  \x3c!-- <pre>\n    {{ selectableItem.editableConfig |json }}\n  </pre> --\x3e\n\n</div>\n',styles:[":host{display:block}"]}]}],pe.ctorParameters=function(){return[{type:te},{type:ee},{type:d.FormBuilder}]},pe.propDecorators={key:[{type:t.Input,args:["key"]}]};var me=function(){function t(e,t){this.formEditorService=e,this.modal=t,this.popoverVisible=!1}return t.prototype.ngOnInit=function(){var e=this;this.formEditorService.getFieldItemFromTreeKey(this.node.key).pipe(i.take(1)).subscribe((function(t){t&&(e.fieldItem=t)}))},t.prototype.stopButtonEvent=function(e){var t=this;e.preventDefault(),e.stopPropagation(),setTimeout((function(){t.popoverVisible=!1}),100)},t.prototype.onOrderUp=function(t){var n;this.stopButtonEvent(t),this.formEditorService.updateFormItemOrdinal(this.node.key,e.OrdinalDirectionEnum.UP,null===(n=this.node.parentNode)||void 0===n?void 0:n.key)},t.prototype.onOrderDown=function(t){var n;this.stopButtonEvent(t),this.formEditorService.updateFormItemOrdinal(this.node.key,e.OrdinalDirectionEnum.DOWN,null===(n=this.node.parentNode)||void 0===n?void 0:n.key)},t.prototype.onDuplicate=function(e){var t;this.stopButtonEvent(e),"tabs"!==this.fieldItem.type&&"tab"!==this.fieldItem.type&&this.formEditorService.duplicateFormItem(this.node.key,null===(t=this.node.parentNode)||void 0===t?void 0:t.key)},t.prototype.onUser=function(e){this.stopButtonEvent(e)},t.prototype.onDelete=function(e){var t=this;this.stopButtonEvent(e);this.modal.confirm({nzTitle:"<b>Are you sure?</b>",nzContent:"<p>Are you sure you want to delete the selected item?</p>",nzOkText:"Yes, delete it",nzMaskStyle:{backgroundColor:"rgb(34,69,149, 0.8)",overflow:"auto"},nzOnOk:function(){var e;t.formEditorService.deleteFormItem(t.node.key,null===(e=t.node.parentNode)||void 0===e?void 0:e.key)}})},t.prototype.ngOnDestroy=function(){},t}();me.decorators=[{type:t.Component,args:[{selector:"form-editor-tree-item",template:'\n\x3c!-- [ngClass]="isOpen ? \'bg-grey\' : \'bg-white\' " --\x3e\n<div\n  nz-row\n  nzJustify="space-between"\n  nzAlign="middle"\n  class="tree-item-wrapper"\n\n>\n  \x3c!-- <div\n    nz-row\n    nzJustify="space-between"\n    nzAlign="middle"\n    class="tree-item"\n  > --\x3e\n    <span\n      nz-col\n      nzFlex="auto"\n      class="node-name"\n      [title]="node.title"\n    >\n      {{ node.title }}\n    </span>\n\n    <i\n      nz-col nz-icon\n      nzType="ellipsis" nzTheme="outline"\n      nz-button nz-popover\n      [nzPopoverTitle]="titleTemplate"\n      [nzPopoverContent]="contentTemplate"\n      [(nzPopoverVisible)]="popoverVisible"\n      nzPopoverPlacement="right" nzPopoverOverlayClassName="no-popover-content-padding"\n    ></i>\n\n  \x3c!-- </div> --\x3e\n</div>\n\n\n\x3c!-- <pre>{{ node |json }}</pre> --\x3e\n\n\n<ng-template #titleTemplate>\n  Options\n</ng-template>\n\n<ng-template #contentTemplate class="no-padding">\n  <ul nz-menu class="bg-white" *ngIf="fieldItem">\n    <li\n      id="move-up" nz-menu-item (click)="onOrderUp($event)"\n      [nzDisabled]="fieldItem.type === \'tabs\' "\n    >\n      <i nz-icon nzType="arrow-up" nzTheme="outline"></i>\n      Move up\n    </li>\n    <li\n      id="move-down" nz-menu-item (click)="onOrderDown($event)"\n      [nzDisabled]="fieldItem.type === \'tabs\' "\n    >\n      <i nz-icon nzType="arrow-down" nzTheme="outline"></i>\n      Move down\n    </li>\n    <li id="move-up" nz-menu-divider></li>\n    \x3c!-- <li id="permission" nz-menu-item (click)="onUser($event)" nzDisabled>\n      <i nz-icon nzType="user" nzTheme="outline"></i>User rights\n    </li> --\x3e\n    <li id="duplicate" nz-menu-item (click)="onDuplicate($event)" [nzDisabled]="fieldItem.type === \'tabs\' || fieldItem.type === \'tab\' " >\n      <i nz-icon nzType="copy" nzTheme="outline"></i>\n      Duplicate\n    </li>\n    <li id="delete" nz-menu-item (click)="onDelete($event)">\n      <span class="red">\n        <i nz-icon nzType="delete" nzTheme="outline"></i>\n        Delete\n      </span>\n    </li>\n  </ul>\n</ng-template>\n',styles:[":host{display:block}.custom-node{line-height:24px;display:inline-flex;width:100%;border:2px solid #fff}.custom-node.selected{border-color:#363154}.custom-node.unselected{border-color:#fff;cursor:pointer}.custom-node-inner{display:flex;flex:1 0 0%;flex-direction:column}.custom-node-details.show{opacity:1;max-height:100vh;pointer-events:all}.custom-node-details.hide{opacity:0;max-height:0;pointer-events:none}.tree-item-wrapper{flex-wrap:nowrap}"]}]}],me.ctorParameters=function(){return[{type:te},{type:l.NzModalService}]},me.propDecorators={node:[{type:t.Input,args:["node"]}],origin:[{type:t.Input,args:["origin"]}]};var ce=function(){function e(e,t,n){this.formEditorService=e,this.formEditorConfig=t,this.fb=n}return e.prototype.ngOnInit=function(){this.initialiseFormSubscription()},e.prototype.initialiseFormSubscription=function(){var e=this;this.selectedKeySubscription=this.formEditorService.selectedTreeKey.subscribe((function(t){t?(e.fieldItem=null,e.selectableItem=null,e.formEditorService.getFieldItemFromTreeKey(t).subscribe((function(t){t?(e.fieldItem=t,e.formEditorConfig.getSelectableItemFromType(t.type).subscribe((function(t){t?(e.selectableItem=t,e.initForm()):e.selectableItem=null}))):e.fieldItem=null}))):(e.fieldItem=null,e.selectableItem=null)}))},e.prototype.initialiseItemConfigData=function(){var e=this;this.formEditorConfig.getSelectableItemFromType(this.fieldItem.type).pipe(i.take(1)).subscribe((function(t){t?(e.selectableItem=Object.assign({},t),e.initForm()):e.selectableItem=null}))},e.prototype.initForm=function(){this.form=this.fb.group({}),this.selectableItem.editableConfig.setRequired&&this.form.addControl("required",new d.FormControl(this.fieldItem.required,[])),this.selectableItem.editableConfig.setPermissions&&this.form.addControl("permissions",new d.FormControl(this.fieldItem.permissions,[])),this.selectableItem.editableConfig.setHelp&&this.form.addControl("help",new d.FormControl(this.fieldItem.help,[])),this.selectableItem.editableConfig.hasLayoutOptions&&this.form.addControl("layout",new d.FormControl(this.fieldItem,[])),this.showDetailsComponentOptions()&&this.form.addControl("componentOptions",new d.FormControl(this.fieldItem.componentOptions,[])),this.onChanges()},e.prototype.onChanges=function(){var e=this;this.form.valueChanges.subscribe((function(t){e.fieldItem=Object.assign(Object.assign({},e.fieldItem),e.form.value),e.formEditorService.updateFormItem(e.fieldItem)}))},e.prototype.onComponentOptionsUpdated=function(e){var t=Object.assign(Object.assign({},this.fieldItem.componentOptions),e);this.fieldItem=Object.assign(Object.assign({},this.fieldItem),{componentOptions:t}),this.formEditorService.updateFormItem(this.fieldItem)},e.prototype.showDetailsComponentOptions=function(){var e=!1;return this.selectableItem?((this.selectableItem.editableConfig.hasLayoutOptions||this.selectableItem.editableConfig.hasGridOptions)&&(e=!0),e):e},e.prototype.ngOnDestroy=function(){this.selectedKeySubscription.unsubscribe},e}();ce.decorators=[{type:t.Component,args:[{selector:"form-editor-field-details",template:'\n<div *ngIf="!fieldItem">\n  no item\n</div>\n\n\n\n<div class="wrapper" *ngIf="fieldItem && selectableItem">\n\n  <form nz-form [formGroup]="form" nzLayout="vertical" class="width-all">\n    <div class="title-wrapper">\n\n      <tf-ng-form-title class="title">\n        <h4 class="blue">\n          {{ selectableItem?.label }}\n        </h4>\n      </tf-ng-form-title>\n\n      <p *ngIf="selectableItem.description" >\n        {{ selectableItem?.description }}\n      </p>\n\n      \x3c!-- REQUIRED --\x3e\n      <form-editor-switch-wrapper *ngIf="selectableItem?.editableConfig.setRequired">\n        <nz-form-label label nzFor="required">\n          Required\n        </nz-form-label>\n        <nz-switch switch formControlName="required"></nz-switch>\n      </form-editor-switch-wrapper>\n\n      \x3c!-- HELP --\x3e\n      <nz-form-item *ngIf="selectableItem?.editableConfig.setHelp">\n        <nz-form-control>\n          <nz-form-label nzFor="help">Help text</nz-form-label>\n          <input nz-input formControlName="help" maxlength="255"/>\n        </nz-form-control>\n      </nz-form-item>\n\n    </div>\n\n  </form>\n\n  \x3c!-- [selectableItem]="selectableItem" --\x3e\n  <div *ngIf="showDetailsComponentOptions()">\n    <field-details-component-options\n\n      [fieldItem]="fieldItem"\n      (updated)="onComponentOptionsUpdated($event)"\n    ></field-details-component-options>\n  </div>\n\n  \x3c!-- <div>\n    {{ selectableItem.editableConfig.type }}\n    {{ selectableItem.editableConfig.id }}\n  </div> --\x3e\n  \x3c!-- <pre>{{ selectableItem |json }}</pre> --\x3e\n\n</div>\n\n',styles:[":host{display:block}.wrapper{display:flex;flex-direction:column}"]}]}],ce.ctorParameters=function(){return[{type:te},{type:ee},{type:d.FormBuilder}]};var ue=function(){function t(e){this.formEditorService=e}return t.prototype.ngOnInit=function(){},t.prototype.stopButtonEvent=function(e){e.preventDefault(),e.stopPropagation()},t.prototype.onOrderUp=function(t){this.stopButtonEvent(t),this.formEditorService.updateFormItemOrdinal(this.node.key,e.OrdinalDirectionEnum.UP)},t.prototype.onOrderDown=function(t){this.stopButtonEvent(t),this.formEditorService.updateFormItemOrdinal(this.node.key,e.OrdinalDirectionEnum.DOWN)},t.prototype.onDuplicate=function(e){this.stopButtonEvent(e),this.formEditorService.duplicateFormItem(this.node.key)},t.prototype.onUser=function(e){this.stopButtonEvent(e)},t.prototype.onDelete=function(e){this.stopButtonEvent(e),this.formEditorService.deleteFormItem(this.node.key)},t}();ue.decorators=[{type:t.Component,args:[{selector:"form-editor-field-item-header",template:'<div class="node-header-wrapper">\n  \x3c!-- Closed --\x3e\n  <div\n    class="custom-node-header padding"\n    [ngClass]="isOpen ? \'hide\' : \'show\' "\n  >\n    <h5 nz-typography class="text blue"><strong>{{ node.title }}</strong></h5>\n  </div>\n\n  \x3c!-- Opened --\x3e\n\n  <div\n    class="custom-node-header"\n    [ngClass]="isOpen ? \'show\' : \'hide\' "\n  >\n    <div class="header-button-container bg-navy">\n      <button\n        (click)="onOrderUp($event)"\n        nz-button nzShape="square"\n        nzSize="extra-small"\n        class="grey"\n      >\n        <i nz-icon nzType="arrow-up" nzTheme="outline"></i>\n      </button>\n      <button\n        (click)="onOrderDown($event)"\n        nz-button nzShape="square"\n        nzSize="extra-small"\n        class="grey"\n      >\n        <i nz-icon nzType="arrow-down" nzTheme="outline"></i>\n      </button>\n    </div>\n    <h5 nz-typography class="text text-center blue">{{ node.title }}</h5>\n    <div class="header-button-container bg-navy">\n      <button\n        (click)="onUser($event)"\n        nz-button nzShape="square"\n        nzSize="extra-small"\n        class="grey"\n      >\n        <i nz-icon nzType="user" nzTheme="outline"></i>\n      </button>\n      <button\n        (click)="onDuplicate($event)"\n        nz-button nzShape="square"\n        nzSize="extra-small"\n        class="grey"\n      >\n        <i nz-icon nzType="copy" nzTheme="outline"></i>\n      </button>\n      <button\n        (click)="onDelete($event)"\n        nz-button nzShape="square"\n        nzSize="extra-small"\n        class="grey"\n      >\n        <i nz-icon nzType="delete" nzTheme="outline"></i>\n      </button>\n    </div>\n  </div>\n</div>\n',styles:[":host{display:block}.node-header-wrapper{display:flex;height:50px;position:relative;width:100%;justify-content:start;align-items:start}.custom-node-header{display:flex;width:100%;position:absolute}.custom-node-header .text{flex:1 0 0%}.custom-node-header h5{pointer-events:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.custom-node-header.padding{padding:0 1.4rem}.custom-node-header.show{opacity:1;pointer-events:all;cursor:pointer}.custom-node-header.hide{opacity:0;pointer-events:none}.header-button-container{height:30px}.header-button-container button{margin:0 3px}"]}]}],ue.ctorParameters=function(){return[{type:te}]},ue.propDecorators={node:[{type:t.Input,args:["node"]}],isOpen:[{type:t.Input,args:["isOpen"]}]};var fe=function(){function t(e,t){this.formEditorService=e,this.modal=t,this.loaded=!1,this.disabledSave=!0}return t.prototype.ngOnInit=function(){this.initialiseEditorModeSubscription(),this.initialiseMetaUpdateSubscription(),this.initialiseFormUpdateSubscription(),this.getMetaData()},t.prototype.initialiseMetaUpdateSubscription=function(){var e=this;this.metaUpdateSubscription=this.formEditorService.metaUpdated.subscribe((function(t){t&&e.getMetaData()}),(function(e){}))},t.prototype.initialiseEditorModeSubscription=function(){var e=this;this.editorModeSubscription=this.formEditorService.editorMode.subscribe((function(t){e.editorMode=t}))},t.prototype.initialiseFormUpdateSubscription=function(){var e=this;this.formUpdateSubscription=this.formEditorService.formUpdated.subscribe((function(t){t&&(e.disabledSave=!1)}))},t.prototype.getMetaData=function(){var e=this;this.formEditorService.form.pipe(i.take(1)).subscribe((function(t){t&&(e.metaData=t.meta,e.loaded=!0)}),(function(e){}))},t.prototype.onModeToggle=function(){var t=this.editorMode===e.EditorModeEnum.EDIT?e.EditorModeEnum.PREVIEW:e.EditorModeEnum.EDIT;this.formEditorService.setEditorMode(t)},t.prototype.onDraftSave=function(){this.onSave(e.SaveTypeEnum.DRAFT)},t.prototype.onPublishSave=function(){this.onSave(e.SaveTypeEnum.PUBLISH)},t.prototype.onSave=function(e){this.disabledSave=!0,this.formEditorService.saveForm(e)},t.prototype.onClose=function(){var e=this;this.disabledSave?this.modal.confirm({nzTitle:"Form Editor",nzContent:"\n          <p>Are you sure you want to close the form editor?</p>",nzCancelText:"Cancel",nzOnCancel:function(){return e.handleCancelClose()},nzOkText:"Yes, close form editor",nzOnOk:function(){return e.formEditorService.closeFormEditor()}}):this.modal.warning({nzTitle:"Are you sure you want to leave?",nzContent:"\n          <p>Your latest work on this form will be lost. Are you sure you want to close the editor?</p>\n        ",nzCancelText:"Take me back to the editor  ",nzOnCancel:function(){return e.handleCancelClose()},nzOkText:"Yes, close without saving",nzOnOk:function(){return e.formEditorService.closeFormEditor()}})},t.prototype.handleCancelClose=function(){},t.prototype.ngOnDestroy=function(){this.metaUpdateSubscription.unsubscribe,this.editorModeSubscription.unsubscribe,this.formUpdateSubscription.unsubscribe},t}();fe.decorators=[{type:t.Component,args:[{selector:"form-editor-page-header",template:'<div class="wrapper" *ngIf="loaded">\n  <div class="title">\n    <h4 nz-typography class="white">{{ metaData.title }}</h4>\n  </div>\n  <div class="save">\n    <button\n      nz-button\n      class="aqua"\n      nz-dropdown\n      nzPlacement="bottomRight"\n      [nzDropdownMenu]="saveOptions"\n      [disabled]="disabledSave || editorMode !== \'edit\'"\n    >\n      Save<i nz-icon nzType="down"></i>\n    </button>\n  </div>\n  <div class="buttons">\n\n    <tf-ng-hexagon\n      [colour]="editorMode === \'edit\' ? \'blue\' : \'aqua\' "\n      outline-colour="aqua"\n      size="m"\n      [as-button]="true"\n      (click)="onModeToggle()"\n    >\n      <i\n        nz-icon\n        [ngClass]="editorMode === \'edit\' ? \'aqua\' : \'blue\'"\n        [nzType]="editorMode === \'edit\' ? \'eye\' : \'edit\'"\n        nzTheme="outline"\n      ></i>\n    </tf-ng-hexagon>\n\n\n    \x3c!-- <tf-ng-hexagon\n      colour="blue"\n      outline-colour="white"\n      size="m"\n      [as-button]="true"\n      (click)="onClose()"\n    >\n      <i\n        nz-icon\n        class="white"\n        nzType="close" nzTheme="outline"\n      ></i>\n    </tf-ng-hexagon> --\x3e\n  </div>\n</div>\n\n\n<nz-dropdown-menu #saveOptions="nzDropdownMenu">\n  <ul nz-menu>\n    <li (click)="onDraftSave()" nz-menu-item>Save as draft</li>\n    <li (click)="onPublishSave()" nz-menu-item>Save and publish</li>\n  </ul>\n</nz-dropdown-menu>\n',styles:[".wrapper,:host{display:flex;flex:1 0 0%}.wrapper{justify-content:flex-start;align-items:center}.title{flex:1 0 0%;margin-right:1rem}.buttons{display:flex}.buttons tf-ng-hexagon{margin-left:1rem;cursor:pointer!important}"]}]}],fe.ctorParameters=function(){return[{type:te},{type:l.NzModalService}]};var he=function(){function e(e){this.fb=e,this.updated=new t.EventEmitter,this._optionItems=[],this.formReady=!1}return Object.defineProperty(e.prototype,"optionItems",{set:function(e){e&&(this._optionItems=H(e))},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"fieldItem",{get:function(){return this._fieldItem},set:function(e){var t;this.fieldItem&&e.uuid!=this.fieldItem.uuid&&(this.formReady=!1,this._optionItems=[]),(null===(t=e.componentOptions)||void 0===t?void 0:t.options)&&(this.optionItems=e.componentOptions.options),this.fieldItem&&e.uuid!=this.fieldItem.uuid?(this._fieldItem=e,this.initForm()):this._fieldItem=e},enumerable:!1,configurable:!0}),e.prototype.ngOnInit=function(){this.initForm(),this.onChanges()},e.prototype.initForm=function(){var e=this,t=[];this._optionItems.map((function(n,o){t.push(e.createOptionFormGroup(n.label))})),this.form=this.fb.group({options:this.fb.array(H(t))}),this.onChanges(),this.formReady=!0},e.prototype.onChanges=function(){var e=this;this.form.valueChanges.subscribe((function(t){e.updated.emit(e.form.value.options)}))},e.prototype.onEnterKeyPressed=function(){this.inviableInputElement.nativeElement.focus()},e.prototype.onSubmit=function(e){e.stopPropagation(),e.preventDefault()},e.prototype.addItem=function(e){void 0===e&&(e=null),this.form.get("options").push(this.createOptionFormGroup(e))},e.prototype.createOptionFormGroup=function(e){void 0===e&&(e=null);var t=this.fb.group({label:e,value:e});return t.controls.label.valueChanges.subscribe((function(e){t.controls.value.setValue(e)})),t},e.prototype.removeItem=function(e){this.form.get("options").removeAt(e)},e}();he.decorators=[{type:t.Component,args:[{selector:"form-editor-field-item-options",template:'\n\n<div *ngIf="formReady">\n  <form nz-form [formGroup]="form" nzLayout="vertical" class="width-all" (ngSubmit)="onSubmit($event)">\n\n    <nz-form-control>\n      <nz-form-label>Options</nz-form-label>\n    </nz-form-control>\n\n    <nz-form-item\n      formArrayName="options"\n      *ngFor="let optionItem of form.get(\'options\')[\'controls\']; let i = index"\n    >\n      <div\n        nz-row\n        nzJustify="space-between" nzAlign="middle"\n        class="option-label-wrapper"\n        [formGroup]="optionItem"\n      >\n\n        <div nz-col nzFlex="auto" class="option-input-wrapper">\n          <input\n            nz-input\n            formControlName="label"\n            placeholder="Label"\n            (keydown.enter)="onEnterKeyPressed()"\n            maxlength="255"\n          />\n        </div>\n\n        \x3c!-- <div nz-col> --\x3e\n          <button nz-button nzShape="square" (click)="removeItem(i)" type="button">\n            <i nz-icon nzType="close" nzTheme="outline"></i>\n          </button>\n        \x3c!-- </div> --\x3e\n\n      </div>\n\n    </nz-form-item>\n\n\n    <form-editor-add-row>\n      <tf-ng-hexagon\n        colour="white"\n        outline-colour="blue"\n        size="xs"\n        (click)="addItem()"\n      >\n        <i nz-icon nzType="plus" nzTheme="outline" class="blue"></i>\n      </tf-ng-hexagon>\n    </form-editor-add-row>\n\n\n  </form>\n\n  <input #inviableInput class="invisable-input"/>\n\n</div>\n\n',styles:[":host{display:block}.width-all{width:100%;min-width:100%}.option-input-wrapper{margin-right:10px}.invisable-input{opacity:0;pointer-events:none;width:1px;height:1px}"]}]}],he.ctorParameters=function(){return[{type:d.FormBuilder}]},he.propDecorators={updated:[{type:t.Output,args:["updated"]}],fieldItem:[{type:t.Input,args:["fieldItem"]}],inviableInputElement:[{type:t.ViewChild,args:["inviableInput"]}]};var be=function(){function e(){}return e.prototype.ngOnInit=function(){},e}();be.decorators=[{type:t.Component,args:[{selector:"form-editor-add-row",template:'<div\n  nz-row\n  nzJustify="space-between" nzAlign="middle"\n  class="wrapper"\n>\n\n  <div nz-col nzFlex="auto" class="line-wrapper left">\n    <div class="line bg-grey"></div>\n  </div>\n\n  <div nz-col class="content-wrapper">\n    <ng-content></ng-content>\n  </div>\n\n  <div nz-col nzFlex="auto" class="line-wrapper right">\n    <div class="line bg-grey"></div>\n  </div>\n\n</div>\n',styles:[":host{display:block}.line{display:flex;width:100%;height:1px}.content-wrapper{display:flex;justify-content:center;align-items:center;margin:0 1rem}"]}]}],be.ctorParameters=function(){return[]};var ge=function(){function e(e,n){this.fb=e,this.formEditorConfig=n,this.updated=new t.EventEmitter,this.nextStep=new t.EventEmitter,this.formReady=!1,this.columnDefinitions=n._columnDefinitions}return Object.defineProperty(e.prototype,"selectableItem",{get:function(){return this._selectableItem},set:function(e){this.optionsName=e.editableConfigOptionsName||null,this._selectableItem=e},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"fieldItem",{get:function(){return this._fieldItem},set:function(e){var t=this;this.formReady=!1,this.formEditorConfig.getSelectableItemFromType(e.type).pipe(i.take(1)).subscribe((function(n){n&&(t.selectableItem=n,t._fieldItem=e,t.initForm())}))},enumerable:!1,configurable:!0}),e.prototype.ngOnInit=function(){},e.prototype.initForm=function(){this.selectableItem.editableConfig.hasGridOptions&&this.initialiseColumnDefinitions(),this.form=this.fb.group({}),this.selectableItem.editableConfig.hasLayoutOptions&&this.form.addControl("layout",new d.FormControl(this.getComponentOptionData("layout",this.optionsName),[])),this.selectableItem.editableConfig.hasShowBlocks&&this.form.addControl("showBlocks",new d.FormControl(this.getComponentOptionData("showBlocks",this.optionsName),[])),this.form.markAsPristine(),this.onChanges(),this.formReady=!0},e.prototype.onChanges=function(){var e=this;this.form.valueChanges.subscribe((function(t){var n={};e.optionsName?n[e.optionsName]=Object.assign({},e.form.value):n=Object.assign({},e.form.value),e.updated.emit(n)}))},e.prototype.getComponentOptionData=function(e,t){return(!t||this.fieldItem.componentOptions&&this.fieldItem.componentOptions[t])&&this.fieldItem.componentOptions?t?this.fieldItem.componentOptions[t][e]:this.fieldItem.componentOptions[e]:null},e.prototype.initialiseColumnDefinitions=function(){var e=this;if(!this.selectedColumnLayout){var t=this.getComponentOptionData("columnDefs",this.optionsName);if(t){var n=this.columnDefinitions.filter((function(e){return e.column===t.length}))[0];this.selectedColumnDefinition=n,setTimeout((function(){e.selectedColumnLayout=H(t.map((function(e){return e.width})))}),50)}}},e.prototype.onColumnDefinitionChange=function(e){this.selectedColumnDefinition=e,this.onColumnLayoutChange(this.selectedColumnDefinition.columnWidths.filter((function(e){return e.default}))[0].widths)},e.prototype.onColumnLayoutChange=function(e){this.selectedColumnLayout=e;var t=this.getComponentOptionData("columnDefs",this.optionsName),n=e.map((function(e,n){var o=t&&t[n]||{};return Object.assign(Object.assign({},o),{width:e})})),o={};this.optionsName?o[this.optionsName]={columnCount:this.selectedColumnLayout.length,columnWidths:this.selectedColumnLayout,columnDefs:n}:o=Object.assign({},n),this.updated.emit(o)},e.prototype.onNextStep=function(){this.nextStep.emit(!0)},e}();ge.decorators=[{type:t.Component,args:[{selector:"field-details-component-options",template:'<div *ngIf="formReady">\n  <form nz-form [formGroup]="form" nzLayout="vertical" class="width-all">\n\n     \x3c!-- GRID --\x3e\n     <nz-form-item *ngIf="selectableItem?.editableConfig.hasGridOptions">\n      <nz-form-control>\n        <nz-form-label>\n          Select table layout\n        </nz-form-label>\n        <nz-select\n          [(ngModel)]="selectedColumnDefinition"\n          [ngModelOptions]="{standalone: true}"\n          (ngModelChange)="onColumnDefinitionChange($event)"\n          nzPlaceHolder="Select the number of columns"\n        >\n          <nz-option\n            *ngFor="let item of columnDefinitions"\n            [nzLabel]="item.label" [nzValue]="item"\n          ></nz-option>\n        </nz-select>\n      </nz-form-control>\n\n\n      <form-editor-grid-column-layout-selection\n        *ngIf="selectedColumnLayout && selectedColumnDefinition.columnWidths.length > 1"\n        [selectedColumnDefinition]="selectedColumnDefinition"\n        [selectedColumnLayout]="selectedColumnLayout"\n        (onSelectedColumnLayout)="onColumnLayoutChange($event)"\n      ></form-editor-grid-column-layout-selection>\n\n      \x3c!-- [ngClass]="!form.dirty ? \'grey\' : \'blue\' "\n      [disabled]="!form.dirty" --\x3e\n\n      \x3c!-- <div nz-row nzJustify="end">\n        <button nz-button\n        (click)="onNextStep($event)"\n        class="blue outline next-step"\n      >\n          Start editing your table\n        </button>\n      </div> --\x3e\n\n\n    </nz-form-item>\n\n\n    \x3c!-- LAYOUT --\x3e\n    <nz-form-item *ngIf="selectableItem?.editableConfig.hasLayoutOptions">\n      <nz-form-control>\n        <nz-form-label nzFor="layout">Layout options</nz-form-label>\n        <nz-radio-group formControlName="layout" name="layout">\n          <label nz-radio nzValue="vertical">Vertical</label>\n          <label nz-radio nzValue="horizontal">Horizontal</label>\n        </nz-radio-group>\n      </nz-form-control>\n    </nz-form-item>\n\n    \x3c!-- SHOW AS BLOCKS --\x3e\n    <form-editor-switch-wrapper *ngIf="selectableItem?.editableConfig.hasShowBlocks">\n      <nz-form-label label nzFor="showBlocks">\n        Show options as blocks\n      </nz-form-label>\n      <nz-switch switch formControlName="showBlocks"></nz-switch>\n    </form-editor-switch-wrapper>\n\n  </form>\n\n</div>\n',styles:[":host{display:block}.width-all{width:100%;min-width:100%}.next-step{margin-top:15px}"]}]}],ge.ctorParameters=function(){return[{type:d.FormBuilder},{type:ee}]},ge.propDecorators={updated:[{type:t.Output,args:["updated"]}],nextStep:[{type:t.Output,args:["nextStep"]}],fieldItem:[{type:t.Input,args:["fieldItem"]}]};var ye=function(){};ye.decorators=[{type:t.Component,args:[{selector:"form-editor-switch-wrapper",template:'<div\n  nz-row nzAlign="middle" nzJustify="end"\n  class="switch-wrapper"\n>\n  <div nz-col nzFlex="auto" class="label-wrapper">\n    <ng-content select="[label]"></ng-content>\n  </div>\n  <nz-form-control nz-col nzFlex="45px">\n    <ng-content select="[switch]"></ng-content>\n  </nz-form-control>\n</div>\n',styles:[":host{display:block}.label-wrapper .ant-form-item-label,.no-padding,.switch-wrapper .ant-form-item-label{padding:0!important}.switch-wrapper{margin-bottom:8px}.label-wrapper{margin-bottom:-8px}"]}]}];var ve=function(){function n(e,n){this.fb=e,this.formEditorConfig=n,this.updated=new t.EventEmitter,this.selectedField=new t.EventEmitter,this.formReady=!1}return Object.defineProperty(n.prototype,"selectableItem",{get:function(){return this._selectableItem},set:function(e){this._selectableItem=e},enumerable:!1,configurable:!0}),Object.defineProperty(n.prototype,"fieldItem",{get:function(){return this._fieldItem},set:function(e){var t=this;this.formReady=!1,this.formEditorConfig.getSelectableItemFromType(e.type).pipe(i.take(1)).subscribe((function(n){n&&(t.selectableItem=n,t._fieldItem=e)}))},enumerable:!1,configurable:!0}),n.prototype.ngOnInit=function(){this.initAvailableItems()},n.prototype.initAvailableItems=function(){var t=this;this.formEditorConfig.selectableItems.pipe(i.take(1)).subscribe((function(n){n?(t.types=H(n.filter((function(t){return t.category===e.SelectableCategory.SIMPLE}))),t.complexTypes=t.parseComplexTypes(n),t.initForm(),t.onChanges()):(t.types=[],t.complexTypes=[])}))},n.prototype.parseComplexTypes=function(e){return e.filter((function(e){return"grid"===e.type}))},n.prototype.initForm=function(){this.form=this.fb.group({})},n.prototype.onChanges=function(){var e=this;this.form.valueChanges.subscribe((function(t){e.updated.emit(e.form.value.options)}))},n.prototype.onSelectItemChange=function(e){this.add(e)},n.prototype.add=function(e){var t=this;this.formEditorConfig.getSelectableItemFromId(e).pipe(i.take(1)).subscribe((function(e){t.selectedField.emit(e)}))},n}();ve.decorators=[{type:t.Component,args:[{selector:"form-item-field-group",template:'\n\x3c!-- <pre>\n  {{ fieldItem |json }}\n</pre> --\x3e\n\n<form nz-form nzLayout="vertical" class="width-all">\n\n  <div nz-row nzJustify="space-between" nzAlign="middle" nzGutter="16">\n    <div nz-col nzFlex="auto">Select a form input to add to this group</div>\n    <div nz-col>Number of inputs added:{{ fieldItem.fieldGroup?.length || 0 }}</div></div>\n\n  <nz-form-item>\n    <nz-form-control>\n      <nz-select\n        nzShowSearch\n        [ngModel]="types"\n        [ngModelOptions]="{standalone: true}"\n        (ngModelChange)="onSelectItemChange($event)"\n        nzPlaceHolder="Select an field item to add"\n      >\n\n\n        <nz-option-group nzLabel="Basic Inputs">\n          <nz-option\n            *ngFor="let item of types"\n            [nzLabel]="item.label" [nzValue]="item.id"\n          ></nz-option>\n        </nz-option-group>\n\n        <nz-option-group nzLabel="Advanced Layouts">\n          <nz-option\n            *ngFor="let complexItem of complexTypes"\n            [nzLabel]="complexItem.label" [nzValue]="complexItem.id"\n          ></nz-option>\n        </nz-option-group>\n\n      </nz-select>\n    </nz-form-control>\n  </nz-form-item>\n\n</form>\n',styles:[":host{display:block}.width-all{width:100%;min-width:100%}"]}]}],ve.ctorParameters=function(){return[{type:d.FormBuilder},{type:ee}]},ve.propDecorators={updated:[{type:t.Output,args:["updated"]}],selectedField:[{type:t.Output,args:["selectedField"]}],fieldItem:[{type:t.Input,args:["fieldItem"]}]};var Ie=function(){function e(e){this.formEditorService=e}return e.prototype.ngOnInit=function(){this.initialiseFormSubscription()},e.prototype.initialiseFormSubscription=function(){var e=this;this.formSubscription=this.formEditorService.formTree.subscribe((function(t){e.nodes=H(t)}))},e.prototype.nzClick=function(e){this.formEditorService.setSelectedTreeKey(e.keys[0])},e.prototype.ngOnDestroy=function(){this.formSubscription.unsubscribe},e}();Ie.decorators=[{type:t.Component,args:[{selector:"form-editor-tree-dev",template:'<nz-tree\n  [nzData]="nodes"\n  (nzClick)="nzClick($event)"\n></nz-tree>\n',styles:[":host{display:block}"]}]}],Ie.ctorParameters=function(){return[{type:te}]},Ie.propDecorators={nzTreeComponent:[{type:t.ViewChild,args:["nzTreeComponent",{static:!1}]}]};var ze=function(){function t(e,t){this.formEditorService=e,this.formEditorConfig=t,this.availableTabs=[],this.formReady=!1}return t.prototype.ngOnInit=function(){this.initialiseFormSubscription()},t.prototype.initialiseFormSubscription=function(){var e=this;this.selectedKeySubscription=this.formEditorService.selectedTreeKey.subscribe((function(t){t?(e.fieldItem=null,e.selectableItem=null,e.formEditorService.getFieldItemFromTreeKey(t).pipe(i.take(1)).subscribe((function(t){t?(e.fieldItem=t,setTimeout((function(){e.formEditorService.getTreeItemFromKey(t.uuid).pipe(i.take(1)).subscribe((function(n){n&&(e.treeItem=n,e.formEditorConfig.getSelectableItemFromType(t.type).pipe(i.take(1)).subscribe((function(t){t?(e.selectableItem=t,e.editorItemModel={fieldItem:e.fieldItem,selectableItem:e.selectableItem},e.initTabNavigation()):e.selectableItem=null})))}))}),100)):(e.selectableItem=null,e.fieldItem=null)}))):(e.fieldItem=null,e.selectableItem=null)}))},t.prototype.stopButtonEvent=function(e){e.preventDefault(),e.stopPropagation()},t.prototype.onOrderUp=function(t){this.stopButtonEvent(t),this.formEditorService.updateFormItemOrdinal(this.fieldItem.uuid,e.OrdinalDirectionEnum.UP,this.treeItem.parentKey)},t.prototype.onOrderDown=function(t){this.stopButtonEvent(t),this.formEditorService.updateFormItemOrdinal(this.fieldItem.uuid,e.OrdinalDirectionEnum.DOWN,this.treeItem.parentKey)},t.prototype.onDuplicate=function(e){this.stopButtonEvent(e),this.formEditorService.duplicateFormItem(this.fieldItem.uuid,this.treeItem.parentKey)},t.prototype.onUser=function(e){this.stopButtonEvent(e)},t.prototype.onDelete=function(e){this.stopButtonEvent(e),this.formEditorService.deleteFormItem(this.fieldItem.uuid,this.treeItem.parentKey)},t.prototype.onUpdatedFieldItem=function(e){this.fieldItem=Object.assign({},e),this.editorItemModel={fieldItem:this.fieldItem,selectableItem:this.selectableItem}},t.prototype.initTabNavigation=function(){this.availableTabs=[],this.tabIndex=0,this.selectableItem.editableConfig.hasGridOptions&&this.availableTabs.push({label:"Table Layout",value:"layout",disabled:!1}),this.selectableItem.editableConfig.disableEdit||this.availableTabs.push({label:"Editor",value:"editor",disabled:!1}),this.selectableItem.editableConfig.hasLayoutOptions&&this.availableTabs.push({label:"Layout",value:"layout",disabled:!1}),(this.selectableItem.editableConfig.setRequired||this.selectableItem.editableConfig.setHelp||this.selectableItem.editableConfig.hasDateOptions)&&this.availableTabs.push({label:"Options",value:"options",disabled:!1}),(this.selectableItem.editableConfig.setPermissions||this.selectableItem.editableConfig.setReadonlyPermissions)&&this.availableTabs.push({label:"Permissions",value:"permissions",disabled:!1})},t.prototype.onSelectedTabIndexChange=function(e){this.tabIndex=e},t.prototype.onNextStep=function(e){this.tabIndex=1},t.prototype.ngOnDestroy=function(){this.selectedKeySubscription.unsubscribe},t}();ze.decorators=[{type:t.Component,args:[{selector:"form-editor-field",template:'<div *ngIf="!fieldItem" class="wrapper width-all ant-form">\n  <tf-ng-form-title class="title">\n    <h4 ng-typography nz-col nzFlex="auto" class="blue">\n      Selected field details\n    </h4>\n  </tf-ng-form-title>\n  <p class="grey">Select a field item from the \'Overview\' tree to start editing</p>\n</div>\n\n<div class="wrapper width-all ant-form" *ngIf="fieldItem && selectableItem">\n\n  <tf-ng-form-title class="title">\n\n    <div nz-row nzJustify="space-between" nzAlign="middle" class="flex-title-wrapper">\n      <h4 ng-typography nz-col nzFlex="auto" class="blue">\n        {{ fieldItem?.label }}\n      </h4>\n      <span nz-col class="blue">\n        Type: {{ selectableItem?.label }}\n      </span>\n    </div>\n\n  </tf-ng-form-title>\n\n\n  <p *ngIf="selectableItem?.description" >\n    {{ selectableItem?.description }}\n  </p>\n\n\n\n  <field-item-editor\n    *ngIf="availableTabs.length === 1"\n    active="true"\n    [editorItemModel]="editorItemModel"\n    (updatedFieldItem)="onUpdatedFieldItem($event)"\n  ></field-item-editor>\n\n  <nz-tabset\n    class="navy"\n    (nzSelectedIndexChange)="onSelectedTabIndexChange($event)"\n    [nzSelectedIndex]="tabIndex"\n    *ngIf="availableTabs.length > 1"\n  >\n\n    <nz-tab\n      *ngFor="let tab of availableTabs"\n      [nzTitle]="tab.label"\n      [nzDisabled]="tab.disabled"\n    >\n\n      <field-item-editor\n        *ngIf="tab.value === \'editor\'"\n        [active]="availableTabs[tabIndex].value === \'editor\'"\n        [editorItemModel]="editorItemModel"\n        (updatedFieldItem)="onUpdatedFieldItem($event)"\n      ></field-item-editor>\n\n      <field-item-layout\n        *ngIf="tab.value === \'layout\'"\n        [active]="availableTabs[tabIndex].value === \'layout\'"\n        [editorItemModel]="editorItemModel"\n        (updatedFieldItem)="onUpdatedFieldItem($event)"\n        (nextStep)="onNextStep($event)"\n      ></field-item-layout>\n\n      <field-item-config-options\n        *ngIf="tab.value === \'options\'"\n        [active]="availableTabs[tabIndex].value === \'options\'"\n        [editorItemModel]="editorItemModel"\n        (updatedFieldItem)="onUpdatedFieldItem($event)"\n      ></field-item-config-options>\n\n      <field-item-permissions\n        *ngIf="tab.value === \'permissions\'"\n        [active]="availableTabs[tabIndex].value === \'permissions\'"\n        [editorItemModel]="editorItemModel"\n      ></field-item-permissions>\n\n    </nz-tab>\n\n  </nz-tabset>\n\n</div>\n',styles:[":host{display:block}.wrapper{display:flex;flex-direction:column}.custom-node-header{display:flex;width:100%}.custom-node-header .text{flex:1 0 0%}.header-button-container{height:30px}.header-button-container button{margin:0 3px}.flex-title-wrapper{margin-top:-7px}"]}]}],ze.ctorParameters=function(){return[{type:te},{type:ee}]};var we=function(){function n(e,n,o){this.fb=e,this.formEditorConfig=n,this.formEditorService=o,this.updated=new t.EventEmitter,this.updatedFieldGroup=new t.EventEmitter,this.selectedField=new t.EventEmitter,this.formReady=!1,this.colDefaultsSpans=n._columnDefinitions.map((function(e){return e.columnWidths.filter((function(e){return e.default}))[0].widths}))}return Object.defineProperty(n.prototype,"selectableItem",{get:function(){return this._selectableItem},set:function(e){this._selectableItem=e},enumerable:!1,configurable:!0}),Object.defineProperty(n.prototype,"fieldItem",{get:function(){return this._fieldItem},set:function(e){var t=this;this.formEditorConfig.getSelectableItemFromType(e.type).pipe(i.take(1)).subscribe((function(n){var o,i,r,l,a,s;if(n){var d=JSON.stringify(null===(i=null===(o=e.componentOptions)||void 0===o?void 0:o.gridOptions)||void 0===i?void 0:i.columnWidths)||"",p=t.fieldItem?JSON.stringify(null===(l=null===(r=t.fieldItem.componentOptions)||void 0===r?void 0:r.gridOptions)||void 0===l?void 0:l.columnWidths):null;t.fieldItem&&d===p?t._fieldItem=e:(t.selectableItem=n,t.columnDefs=(null===(s=null===(a=e.componentOptions)||void 0===a?void 0:a.gridOptions)||void 0===s?void 0:s.columnDefs)||[],t._fieldItem=e,t.initForm(),setTimeout((function(){t.onChanges(),t.formReady=!0}),10))}}),(function(e){}))},enumerable:!1,configurable:!0}),n.prototype.ngOnInit=function(){this.initAvailableItems(),this.columnDefinitions=this.formEditorConfig._columnDefinitions},n.prototype.initAvailableItems=function(){var t=this;this.formEditorConfig.selectableItems.pipe(i.take(1)).subscribe((function(n){t.types=n?H(n.filter((function(t){return t.category===e.SelectableCategory.SIMPLE}))):[]}))},n.prototype.initForm=function(){var e=this,t=[];this.columnDefs.map((function(n,o){t.push(e.createColumnDefFormGroup(n,o))})),this.form=this.fb.group({columnCount:this.fb.control(this.columnDefs.length,[]),columnWidths:this.fb.control(this.columnDefs.map((function(e){return e.width}))),columnDefs:this.fb.array(H(t))})},n.prototype.createColumnDefFormGroup=function(e,t){return this.fb.group({headerName:e.headerName||null,field:e.field||"col-"+(t+1),width:e.width})},n.prototype.onChanges=function(){var e=this;this.form.valueChanges.subscribe((function(t){e.updated.emit(e.form.value)}))},n.prototype.addRow=function(){var t,n,o=this,i=(null===(t=this.fieldItem.fieldGroup)||void 0===t?void 0:t.length)>0?this.fieldItem.fieldGroup[(null===(n=this.fieldItem.fieldGroup)||void 0===n?void 0:n.length)-1]:null;this.formEditorConfig.getSelectableItemFromType("grid-row").subscribe((function(t){var n;if(t){var r=o.formEditorService.getFieldItemFromSelection(t);r.key="row-"+((null===(n=o.fieldItem.fieldGroup)||void 0===n?void 0:n.length)||0),r.fieldGroup=[],o.formEditorConfig.getSelectableItemFromType("empty-grid-cell").subscribe((function(t){var n=o.formEditorService.getFieldItemFromSelection(t);n.label="",n.wrappers=[e.SelectableWrapper.GRID_CELL_FIELD],o.columnDefs.map((function(e,t){if(n.key=e.field,i){var l=Object.assign({},i.fieldGroup[t]);r.fieldGroup.push(Object.assign(Object.assign({},l),{uuid:o.formEditorService.getUuid()}))}else r.fieldGroup.push(Object.assign({},n))})),o.formEditorService.addFormItemToFieldGroup(o.fieldItem,r)}))}}))},n.prototype.onRowUpdated=function(e){this.fieldItem.fieldGroup[e.index]=Object.assign(Object.assign({},this.fieldItem.fieldGroup[e.index]),e.fieldItem),this.updatedFieldGroup.emit(this.fieldItem.fieldGroup)},n.prototype.getColSpan=function(e,t){var n=this.columnDefs.length;return e.width?Math.round(e.width||24/n):this.colDefaultsSpans[n-1][t]},n.prototype.getColFormation=function(){var e=this.form.value,t=e.columnCount,n=e.columnWidths;return 1===Number(t)?"":" with a "+this.columnDefinitions.filter((function(e){return e.column===t}))[0].columnWidths.filter((function(e){return JSON.stringify(e.widths)===JSON.stringify(n)}))[0].percentages+" split."},n}();we.decorators=[{type:t.Component,args:[{selector:"form-item-grid",template:'\n<div *ngIf="formReady">\n  <form nz-form [formGroup]="form" nzLayout="vertical" class="width-all">\n\n    <p ng-typography class="grid-width-desc">\n      You have chosen {{ form.value.columnCount }} {{ form.value.columnCount != \'1\' ? \'columns\' : \'column.\' }} {{ getColFormation() }}\n    </p>\n\n    <div class="form-grid">\n      <div nz-row class="grid-header-row" nzGutter="16">\n        <div\n          *ngFor="let col of columnDefs; let i = index;"\n          nz-col [nzSpan]="getColSpan(col, i)"\n          class="grid-header-cell bg-grey-50"\n          [ngClass]="\'row-\' + i"\n        >\n\n          <div\n            class="form-item-wrapper"\n            [formGroup]="form.get(\'columnDefs\')[\'controls\'][i]"\n          >\n            <nz-form-item>\n              <nz-form-control>\n                <input nz-input placeholder="Header" formControlName="headerName" maxlength="255"/>\n              </nz-form-control>\n            </nz-form-item>\n\n            <nz-form-item>\n              <nz-form-control>\n                <input nz-input placeholder="Identifier" formControlName="field" maxlength="255"/>\n              </nz-form-control>\n            </nz-form-item>\n\n          </div>\n\n        </div>\n      </div>\n\n    </div>\n  </form>\n\n\n  \x3c!-- <form\n    *ngIf="columnDefs.length"\n    nz-form [formGroup]="rowForm" nzLayout="vertical" class="width-all"\n  > --\x3e\n  <div class="width-all ant-form">\n    \x3c!-- <nz-form-control> --\x3e\n      <nz-form-label>Add your table rows</nz-form-label>\n    \x3c!-- </nz-form-control> --\x3e\n  </div>\n\n\n  <form-grid-row\n    *ngFor="let row of fieldItem?.fieldGroup; let rowIdx = index"\n    [index]="rowIdx"\n    [columnDefs]="columnDefs"\n    [fieldItem]="fieldItem"\n    (updated)="onRowUpdated($event)"\n  ></form-grid-row>\n\n    \x3c!-- <nz-form-item\n      *ngFor="let row of rowForm[\'controls\']; let rowIndex = index"\n      [formGroup]="row"\n      class="grid-row-form-item bg-grey-50"\n    >\n\n      <div\n        nz-row\n        nzJustify="space-between" nzAlign="middle"\n        class="option-label-wrapper"\n      >\n\n        <div nz-col nzFlex="auto" class="row-key-input-wrapper">\n          <input nz-input formControlName="key" placeholder="Key / Row Identifiew"/>\n        </div>\n\n\n          <button nz-button nzShape="square" (click)="removeRow(rowIndex)" >\n            <i nz-icon nzType="close" nzTheme="outline"></i>\n          </button>\n\n\n      </div>\n\n\n      <div nz-row class="grid-row" nzGutter="16">\n        <div\n          formArrayName="fieldGroup"\n          *ngFor="let col of row.get(\'fieldGroup\')[\'controls\']; let colIndex = index;"\n          nz-col [nzSpan]="getColSpan(columnDefs[colIndex], colIndex)"\n          class="grid-row-cell bg-white"\n          [ngClass]="\'row-\' + colIndex"\n        >\n\n          <div  class="form-item-wrapper">\n\n            <form-item-grid-cell-formgroup\n              [formGroup]="col"\n            ></form-item-grid-cell-formgroup>\n          </div>\n\n        </div>\n\n      </div>\n\n\n    </nz-form-item> --\x3e\n  <div class="width-all ant-form">\n    <form-editor-add-row>\n      <tf-ng-hexagon\n        colour="white"\n        outline-colour="blue"\n        size="xs"\n        (click)="addRow()"\n      >\n        <i nz-icon nzType="plus" nzTheme="outline" class="blue"></i>\n      </tf-ng-hexagon>\n    </form-editor-add-row>\n\n  \x3c!-- </form> --\x3e\n  </div>\n\n\n</div>\n\n\n\n\n\n',styles:[":host{display:block}.width-all{width:100%;min-width:100%}.form-grid{margin-bottom:10px}.grid-header-row,.grid-row{padding:0 8px;flex-wrap:nowrap}.grid-row{margin-top:5px}.grid-header-cell{border-bottom:1px solid #363154;border-top:1px solid #363154;border-right:1px solid #363154;min-height:125px}.grid-header-cell.row-0{border-left:1px solid #363154}.grid-row-cell{border-bottom:1px solid #d2d7de;border-top:1px solid #d2d7de;border-right:1px solid #d2d7de;min-height:55px}.grid-row-cell.row-0{border-left:1px solid #d2d7de}.grid-content-row{min-height:15px}.form-item-wrapper{display:flex;flex-direction:column;position:absolute;width:calc(100% - 16px);padding-top:10px}.grid-row-form-item{padding:8px}.row-key-input-wrapper{margin-right:10px}p.grid-width-desc{margin:10px 0}"]}]}],we.ctorParameters=function(){return[{type:d.FormBuilder},{type:ee},{type:te}]},we.propDecorators={updated:[{type:t.Output,args:["updated"]}],updatedFieldGroup:[{type:t.Output,args:["updatedFieldGroup"]}],selectedField:[{type:t.Output,args:["selectedField"]}],fieldItem:[{type:t.Input,args:["fieldItem"]}]};var Ce=function(){function n(e,n,o){this.fb=e,this.formEditorConfig=n,this.formEditorService=o,this.selectedField=new t.EventEmitter,this.fieldItem=new t.EventEmitter,this.toSelect=!1}return Object.defineProperty(n.prototype,"formGroup",{get:function(){return this._formGroup},set:function(e){e.controls.type.value||(this.toSelect=!0),this._formGroup=e},enumerable:!1,configurable:!0}),n.prototype.ngOnInit=function(){this.initAvailableItems()},n.prototype.initAvailableItems=function(){var t=this;this.formEditorConfig.selectableItems.pipe(i.take(1)).subscribe((function(n){t.types=n?H(n.filter((function(t){return t.category===e.SelectableCategory.SIMPLE}))):[]}))},n.prototype.onSelectItemChange=function(e){this.add(e)},n.prototype.add=function(e){var t=this;this.formEditorConfig.getSelectableItemFromId(e).pipe(i.take(1)).subscribe((function(e){if(e){var n=t.formEditorService.getFieldItemFromSelection(e);t.formGroup.controls.type.setValue(n.type)}}))},n}();Ce.decorators=[{type:t.Component,args:[{selector:"form-item-grid-cell-formgroup",template:'<nz-form-item [formGroup]="formGroup">\n\n\n  <nz-form-control *ngIf="toSelect">\n    <nz-select\n      [ngModel]="types"\n      [ngModelOptions]="{standalone: true}"\n      (ngModelChange)="onSelectItemChange($event)"\n      nzPlaceHolder="Select an field item"\n    >\n      <nz-option\n        *ngFor="let item of types"\n        [nzLabel]="item.label" [nzValue]="item.id"\n      ></nz-option>\n    </nz-select>\n  </nz-form-control>\n\n  <nz-form-control *ngIf="!toSelect">\n    {{ formGroup.controls[\'type\'].value }}\n  </nz-form-control>\n\n</nz-form-item>\n',styles:[":host{display:block}"]}]}],Ce.ctorParameters=function(){return[{type:d.FormBuilder},{type:ee},{type:te}]},Ce.propDecorators={formGroup:[{type:t.Input,args:["formGroup"]}],selectedField:[{type:t.Output,args:["selectedField"]}],fieldItem:[{type:t.Output,args:["fieldItem"]}]};var xe=function(){function e(e,t,n){this.fb=e,this.formEditorConfig=t,this.formEditorService=n,this.formReady=!1,this.availableTabs=[]}return Object.defineProperty(e.prototype,"selectableItem",{get:function(){return this._selectableItem},set:function(e){this._selectableItem=e},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"fieldItem",{get:function(){return this._fieldItem},set:function(e){var t=this;this.fieldItem&&this.fieldItem.uuid===e.uuid?this._fieldItem=e:this.formEditorConfig.getSelectableItemFromType(e.type).pipe(i.take(1)).subscribe((function(n){n&&(t.selectableItem=n,t._fieldItem=e,t.editorItemModel={fieldItem:t.fieldItem,selectableItem:t.selectableItem},t.initTabNavigation(),t.formReady=!0)}),(function(e){console.log("err")}))},enumerable:!1,configurable:!0}),e.prototype.ngOnInit=function(){},e.prototype.onUpdatedFieldItem=function(e){this.fieldItem=Object.assign({},e),this.editorItemModel={fieldItem:this.fieldItem,selectableItem:this.selectableItem}},e.prototype.initTabNavigation=function(){this.availableTabs=[],this.tabIndex=0,this.selectableItem.editableConfig.hasGridOptions&&this.availableTabs.push({label:"Grid Layout",value:"layout",disabled:!1}),this.selectableItem.editableConfig.disableEdit||this.availableTabs.push({label:"Editor",value:"editor",disabled:!1}),this.selectableItem.editableConfig.hasLayoutOptions&&this.availableTabs.push({label:"Layout",value:"layout",disabled:!1}),(this.selectableItem.editableConfig.setRequired||this.selectableItem.editableConfig.setHelp||this.selectableItem.editableConfig.hasDateOptions)&&this.availableTabs.push({label:"Options",value:"options",disabled:!1}),(this.selectableItem.editableConfig.setPermissions||this.selectableItem.editableConfig.setReadonlyPermissions)&&this.availableTabs.push({label:"Permissions",value:"permissions",disabled:!1})},e.prototype.onSelectedTabIndexChange=function(e){this.tabIndex=e},e}();xe.decorators=[{type:t.Component,args:[{selector:"form-editor-cell-field-item",template:'\x3c!--\n<div class="wrapper" *ngIf="fieldItem && selectableItem">\n\n\n    <form nz-form [formGroup]="form" nzLayout="vertical" class="width-all">\n\n\n      <nz-form-item *ngIf="selectableItem?.editableConfig.setLabel">\n        <nz-form-control>\n          <nz-form-label nzFor="label">Label</nz-form-label>\n          <input nz-input formControlName="label" placeholder="Label"/>\n        </nz-form-control>\n      </nz-form-item>\n\n      <nz-form-item *ngIf="selectableItem?.editableConfig.setDesc">\n\n        <form-editor-rich-text\n          [title]="getDescriptionFieldLabel()"\n          [passedFormControlName]="\'description\'"\n          [passedFormControl]="form?.controls[\'description\']"\n        ></form-editor-rich-text>\n      </nz-form-item>\n\n      <nz-form-item *ngIf="selectableItem?.editableConfig.setPlaceholder">\n        <nz-form-control>\n          <nz-form-label nzFor="placeholder">Placeholder</nz-form-label>\n          <input nz-input formControlName="placeholder"/>\n        </nz-form-control>\n      </nz-form-item>\n\n    </form>\n\n\n\n    <div *ngIf="selectableItem.editableConfig.hasComponentOptions">\n      <form-editor-field-item-options\n        [fieldItem]="fieldItem"\n        (updated)="onOptionsUpdated($event)"\n      ></form-editor-field-item-options>\n    </div>\n\n\n  </div>\n --\x3e\n <div class="wrapper width-all ant-form" *ngIf="fieldItem && selectableItem">\n\n  <p *ngIf="selectableItem?.description" >\n    {{ selectableItem?.description }}\n  </p>\n\n\n\n  <field-item-editor\n    *ngIf="availableTabs.length === 1"\n    active="true"\n    [editorItemModel]="editorItemModel"\n    (updatedFieldItem)="onUpdatedFieldItem($event)"\n  ></field-item-editor>\n\n  <nz-tabset\n    class="navy"\n    (nzSelectedIndexChange)="onSelectedTabIndexChange($event)"\n    [nzSelectedIndex]="tabIndex"\n    *ngIf="availableTabs.length > 1"\n  >\n\n    <nz-tab\n      *ngFor="let tab of availableTabs"\n      [nzTitle]="tab.label"\n      [nzDisabled]="tab.disabled"\n    >\n\n      <field-item-editor\n        *ngIf="tab.value === \'editor\'"\n        [active]="availableTabs[tabIndex].value === \'editor\'"\n        [editorItemModel]="editorItemModel"\n        (updatedFieldItem)="onUpdatedFieldItem($event)"\n      ></field-item-editor>\n\n      <field-item-layout\n        *ngIf="tab.value === \'layout\'"\n        [active]="availableTabs[tabIndex].value === \'layout\'"\n        [editorItemModel]="editorItemModel"\n        (updatedFieldItem)="onUpdatedFieldItem($event)"\n        (nextStep)="onNextStep($event)"\n      ></field-item-layout>\n\n      <field-item-config-options\n        *ngIf="tab.value === \'options\'"\n        [active]="availableTabs[tabIndex].value === \'options\'"\n        [editorItemModel]="editorItemModel"\n        (updatedFieldItem)="onUpdatedFieldItem($event)"\n      ></field-item-config-options>\n\n      <field-item-permissions\n        *ngIf="tab.value === \'permissions\'"\n        [active]="availableTabs[tabIndex].value === \'permissions\'"\n        [editorItemModel]="editorItemModel"\n      ></field-item-permissions>\n\n    </nz-tab>\n\n  </nz-tabset>\n\x3c!--\n  <p *ngIf="selectableItem?.description" >\n    {{ selectableItem?.description }}\n  </p>\n\n  <nz-tabset\n    class="navy"\n    (nzSelectedIndexChange)="onSelectedTabIndexChange($event)"\n  >\n\n    <nz-tab\n      *ngFor="let tab of availableTabs"\n      [(nzSelectedIndex)]="tabIndex"\n      [nzTitle]="tab.label"\n      [nzDisabled]="tab.disabled"\n    >\n\n      <field-item-editor\n        *ngIf="tab.value === \'editor\'"\n        [active]="availableTabs[tabIndex].value === \'editor\'"\n        [editorItemModel]="editorItemModel"\n        (updatedFieldItem)="onUpdatedFieldItem($event)"\n      ></field-item-editor>\n\n      <field-item-layout\n        *ngIf="tab.value === \'layout\'"\n        [active]="availableTabs[tabIndex].value === \'layout\'"\n        [editorItemModel]="editorItemModel"\n        (updatedFieldItem)="onUpdatedFieldItem($event)"\n      ></field-item-layout>\n\n      <field-item-config-options\n        *ngIf="tab.value === \'options\'"\n        [active]="availableTabs[tabIndex].value === \'options\'"\n        [editorItemModel]="editorItemModel"\n        (updatedFieldItem)="onUpdatedFieldItem($event)"\n      ></field-item-config-options>\n\n      <field-item-permissions\n        *ngIf="tab.value === \'permissions\'"\n        [active]="availableTabs[tabIndex].value === \'permissions\'"\n        [editorItemModel]="editorItemModel"\n      ></field-item-permissions>\n\n    </nz-tab>\n\n  </nz-tabset> --\x3e\n\n</div>\n',styles:[":host{display:block}"]}]}],xe.ctorParameters=function(){return[{type:d.FormBuilder},{type:ee},{type:te}]},xe.propDecorators={fieldItem:[{type:t.Input,args:["fieldItem"]}]};var Fe=function(){function n(e,n,o,i){this.fb=e,this.formEditorConfig=n,this.formEditorService=o,this.modal=i,this.updated=new t.EventEmitter,this.formReady=!1,this.toSelect=!0,this.popoverVisible=!1,this.dropdownStyle={minWidth:"180px"}}return Object.defineProperty(n.prototype,"selectableItem",{get:function(){return this._selectableItem},set:function(e){this._selectableItem=e},enumerable:!1,configurable:!0}),Object.defineProperty(n.prototype,"fieldItem",{get:function(){return this._fieldItem},set:function(e){var t=this;this.formEditorConfig.getSelectableItemFromType(e.type).pipe(i.take(1)).subscribe((function(n){n&&(t.selectableItem=n,t.toSelect="empty-grid-cell"===e.type,t._fieldItem=e,t.initForm(),t.onChanges(),t.formReady=!0)}),(function(e){console.log("err")}))},enumerable:!1,configurable:!0}),n.prototype.ngOnInit=function(){this.initAvailableItems(),this.initForm()},n.prototype.initAvailableItems=function(){var t=this;this.formEditorConfig.selectableItems.pipe(i.take(1)).subscribe((function(n){t.types=n?H(n.filter((function(t){return t.category===e.SelectableCategory.SIMPLE}))):[]}))},n.prototype.initForm=function(){var e;this.form=this.fb.group({}),this.form.addControl("type",new d.FormControl((null===(e=this.fieldItem)||void 0===e?void 0:e.type)||null))},n.prototype.onChanges=function(){var e=this;this.form.valueChanges.subscribe((function(t){e.updated.emit(e.form.value)}))},n.prototype.onSelectItemChange=function(e){this.add(e)},n.prototype.add=function(t){var n=this;this.formEditorConfig.getSelectableItemFromId(t).pipe(i.take(1)).subscribe((function(o){if(o){var i=n.formEditorService.getFieldItemFromSelection(o);i.label="","number"===t&&(i.placeholder=" "),i.key=n.columnDef.field,i.wrappers=[e.SelectableWrapper.GRID_CELL_FIELD],n.formEditorService.addFormItemToFieldGroup(n.parentFieldItem,i,n.index)}}))},n.prototype.onCellFieldEdit=function(){this.showFieldItemModal()},n.prototype.onCellDelete=function(){this.add("empty"),this.popoverVisible=!1},n.prototype.showFieldItemModal=function(e){void 0===e&&(e="Edit Field Item");this.modal.create({nzTitle:e,nzContent:xe,nzComponentParams:{fieldItem:this.fieldItem},nzMask:!0,nzMaskStyle:{backgroundColor:"rgb(34,69,149, 0.8)",overflow:"auto"},nzBodyStyle:{maxHeight:"800px",overflow:"auto"}})},n}();Fe.decorators=[{type:t.Component,args:[{selector:"form-grid-cell",template:'\n<nz-form-item [formGroup]="form">\n\n\n  <nz-form-control *ngIf="toSelect">\n    <nz-select\n      [ngModel]="types"\n      [nzDropdownStyle]="dropdownStyle"\n      [ngModelOptions]="{standalone: true}"\n      (ngModelChange)="onSelectItemChange($event)"\n      nzPlaceHolder="Select an field item"\n    >\n      <nz-option\n        *ngFor="let item of types"\n        [nzLabel]="item.label" [nzValue]="item.id"\n      ></nz-option>\n    </nz-select>\n  </nz-form-control>\n\n  <nz-form-control *ngIf="!toSelect">\n\n\n    <div\n      nz-row\n      nzJustify="space-between" nzAlign="middle"\n      class="label-button-wrapper"\n    >\n\n      <div nz-col nzFlex="auto" class="row-key-input-wrapper" [title]="selectableItem.label">\n        \x3c!-- {{ form.controls[\'type\'].value }} --\x3e\n        {{ selectableItem.label }}\n      </div>\n\n      \x3c!-- <button nz-button nzShape="square" class="grey" (click)="onCellFieldEdit()">\n        <i nz-icon nzType="edit" nzTheme="outline"></i>\n      </button> --\x3e\n\n      <i\n        nz-col nz-icon\n        nzType="ellipsis" nzTheme="outline"\n        nz-button nz-popover\n        [nzPopoverTitle]="titleTemplate"\n        [nzPopoverContent]="contentTemplate"\n        [(nzPopoverVisible)]="popoverVisible"\n        nzPopoverPlacement="right" nzPopoverOverlayClassName="no-popover-content-padding"\n      ></i>\n\n    </div>\n  </nz-form-control>\n\n</nz-form-item>\n\n\n\n \x3c!-- <div *ngIf="toSelect">\n  <nz-select\n    [ngModel]="types"\n    [ngModelOptions]="{standalone: true}"\n    (ngModelChange)="onSelectItemChange($event)"\n    nzPlaceHolder="Select an field item"\n  >\n    <nz-option\n      *ngFor="let item of types"\n      [nzLabel]="item.label" [nzValue]="item.id"\n    ></nz-option>\n  </nz-select>\n</div> --\x3e\n\n\x3c!-- <form nz-form [formGroup]="form" nzLayout="vertical" class="width-all"> --\x3e\n\n\x3c!-- <nz-form-item [formGroup]="form">\n\n\n  <nz-form-control *ngIf="!toSelect">\n    {{ formGroup.controls[\'type\'].value }}\n  </nz-form-control>\n\n</nz-form-item> --\x3e\n\n\n\x3c!-- </form> --\x3e\n\n\n<ng-template #contentTemplate class="no-padding">\n  <ul nz-menu class="bg-white" *ngIf="fieldItem">\n    <li id="edit-cell" nz-menu-item (click)="onCellFieldEdit()">\n      <i nz-icon nzType="edit" nzTheme="outline"></i>\n      Edit\n    </li>\n    <li id="delete-cell" nz-menu-item (click)="onCellDelete()">\n      <span class="red">\n        <i nz-icon nzType="delete" nzTheme="outline"></i>\n        Delete\n      </span>\n    </li>\n  </ul>\n</ng-template>\n',styles:[":host{display:block}.row-key-input-wrapper{margin-right:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.label-button-wrapper{flex-wrap:nowrap}"]}]}],Fe.ctorParameters=function(){return[{type:d.FormBuilder},{type:ee},{type:te},{type:l.NzModalService}]},Fe.propDecorators={updated:[{type:t.Output,args:["updated"]}],parentFieldItem:[{type:t.Input,args:["parentFieldItem"]}],parentKey:[{type:t.Input,args:["parentKey"]}],index:[{type:t.Input,args:["index"]}],columnDef:[{type:t.Input,args:["columnDef"]}],fieldItem:[{type:t.Input,args:["fieldItem"]}]};var Se=function(){function n(e,n,o){this.fb=e,this.formEditorConfig=n,this.formEditorService=o,this.updated=new t.EventEmitter,this.formReady=!1,this.colDefaultsSpans=n._columnDefinitions.map((function(e){return e.columnWidths.filter((function(e){return e.default}))[0].widths}))}return Object.defineProperty(n.prototype,"selectableItem",{get:function(){return this._selectableItem},set:function(e){this._selectableItem=e},enumerable:!1,configurable:!0}),Object.defineProperty(n.prototype,"columnDefs",{get:function(){return this._columnDefs},set:function(t){var n=this;if(this.fieldItem&&this.fieldItem.fieldGroup){if(this.fieldItem.fieldGroup.length>t.length){var o=[];t.map((function(e,t){o.push(n.fieldItem.fieldGroup[t])})),this.formEditorService.updateFormItemsFieldGroup(this.fieldItem,o)}if(this.fieldItem.fieldGroup.length<t.length){var i=[];this.formEditorConfig.getSelectableItemFromType("empty-grid-cell").subscribe((function(o){var r=n.formEditorService.getFieldItemFromSelection(o);r.label="",r.wrappers=[e.SelectableWrapper.GRID_CELL_FIELD],t.map((function(e,t){var o={};n.fieldItem.fieldGroup[t]?o=Object.assign({},n.fieldItem.fieldGroup[t]):(r.key=e.field,o=Object.assign({},r)),i.push(o)})),n.formEditorService.updateFormItemsFieldGroup(n.fieldItem,i)}))}}this._columnDefs=t},enumerable:!1,configurable:!0}),Object.defineProperty(n.prototype,"fieldItem",{get:function(){return this._fieldItem},set:function(t){var n=this;this.formEditorConfig.getSelectableItemFromType(t.type).pipe(i.take(1)).subscribe((function(o){if(o&&(n.selectableItem=o,!n.fieldItem)){if(n.parentKey=t.uuid,n._fieldItem=t.fieldGroup[n.index],!n._fieldItem.fieldGroup){var r=[];n.formEditorConfig.selectableItems.pipe(i.take(1)).subscribe((function(t){if(t){var o=n.formEditorService.getFieldItemFromSelection(t.filter((function(e){return"empty-grid-cell"===e.type}))[0]);o.label="",o.wrappers=[e.SelectableWrapper.GRID_CELL_FIELD],n.columnDefs.map((function(e,t){o.key=e.field,r.push(o)}))}}))}n.initForm(),n.onChanges(),n.formReady=!0}}),(function(e){console.log("err")}))},enumerable:!1,configurable:!0}),n.prototype.ngOnInit=function(){},n.prototype.initForm=function(){this.form=this.fb.group({}),this.form.addControl("key",new d.FormControl(this.fieldItem.key||null,{updateOn:"blur"}))},n.prototype.onChanges=function(){var e=this;this.form.valueChanges.subscribe((function(t){e.updated.emit({fieldItem:e.form.value,index:e.index})}))},n.prototype.onEnterKeyPressed=function(){this.inviableInputElement.nativeElement.focus()},n.prototype.onSubmit=function(e){e.stopPropagation(),e.preventDefault()},n.prototype.removeRow=function(){this.formEditorService.deleteFormItem(this.fieldItem.uuid,this.parentKey)},n.prototype.getCellFieldItem=function(e){var t={};return this.fieldItem.fieldGroup&&(t=this.fieldItem.fieldGroup[e]||{}),t},n.prototype.getColSpan=function(e,t){var n=this.columnDefs.length;return e.width?Math.round(e.width||24/n):this.colDefaultsSpans[n-1][t]},n}();Se.decorators=[{type:t.Component,args:[{selector:"form-grid-row",template:'<form nz-form [formGroup]="form" nzLayout="vertical" class="width-all" (ngSubmit)="onSubmit($event)">\n\n  <div class="grid-row-form-item bg-grey-50">\n\n\n    <div\n      nz-row\n      nzJustify="space-between" nzAlign="middle"\n      class="option-label-wrapper"\n    >\n\n      <div nz-col nzFlex="auto" class="row-key-input-wrapper">\n        <input nz-input formControlName="key" placeholder="Key / Row Identifier" maxlength="255" (keydown.enter)="onEnterKeyPressed()"/>\n      </div>\n\n      <span nz-tooltip nzTooltipTitle="This is the row identifier key that represents the row within the final form model" class="row-key-input-wrapper">\n        <i nz-icon nzType="info-circle" nzTheme="outline"></i>\n      </span>\n\n      <button nz-button nzShape="square" (click)="removeRow()" type="button">\n        <i nz-icon nzType="close" nzTheme="outline"></i>\n      </button>\n\n    </div>\n\n\n    <div nz-row class="grid-row" nzGutter="16">\n      <div\n        *ngFor="let col of columnDefs; let colIndex = index;"\n        nz-col [nzSpan]="getColSpan(columnDefs[colIndex], colIndex)"\n        class="grid-row-cell bg-white"\n        [ngClass]="\'row-\' + colIndex"\n      >\n\n        <div  class="form-item-wrapper">\n          \x3c!-- (fieldItem)="onRowCelFieldItem($event, rowIndex, colIndex)" --\x3e\n          \x3c!-- <form-item-grid-cell-formgroup\n            [formGroup]="col"\n          ></form-item-grid-cell-formgroup> --\x3e\n          <form-grid-cell\n            [parentFieldItem]="fieldItem"\n            [parentKey]="parentKey"\n            [index]="colIndex"\n            [columnDef]="columnDefs[colIndex]"\n            [fieldItem]="getCellFieldItem(colIndex)"\n          >\n          </form-grid-cell>\n        </div>\n\n      </div>\n\n    </div>\n  </div>\n</form>\n\n<input #inviableInput class="invisable-input"/>\n',styles:[":host{display:block;margin-bottom:10px}.width-all{width:100%;min-width:100%}.grid-row-form-item{padding:8px}.row-key-input-wrapper{margin-right:10px}.grid-row{margin-top:5px;padding:0 8px}.grid-row-cell{border-bottom:1px solid #d2d7de;border-top:1px solid #d2d7de;border-right:1px solid #d2d7de;min-height:55px}.grid-row-cell.row-0{border-left:1px solid #d2d7de}.form-item-wrapper{display:flex;flex-direction:column;position:absolute;width:calc(100% - 16px);padding-top:10px}.invisable-input{opacity:0;pointer-events:none;width:1px;height:1px}"]}]}],Se.ctorParameters=function(){return[{type:d.FormBuilder},{type:ee},{type:te}]},Se.propDecorators={updated:[{type:t.Output,args:["updated"]}],index:[{type:t.Input,args:["index"]}],columnDefs:[{type:t.Input,args:["columnDefs"]}],fieldItem:[{type:t.Input,args:["fieldItem"]}],inviableInputElement:[{type:t.ViewChild,args:["inviableInput"]}]};var Te=function(){function n(e,n){this.fb=e,this.formEditorConfig=n,this.updated=new t.EventEmitter,this.updatedFieldGroup=new t.EventEmitter,this.selectedField=new t.EventEmitter,this._tabItems=[],this.formReady=!1}return Object.defineProperty(n.prototype,"selectableItem",{get:function(){return this._selectableItem},set:function(e){this._selectableItem=e},enumerable:!1,configurable:!0}),Object.defineProperty(n.prototype,"fieldItem",{get:function(){return this._fieldItem},set:function(e){var t=this;this.formReady=!1,this.formEditorConfig.getSelectableItemFromType(e.type).pipe(i.take(1)).subscribe((function(n){n&&(e.fieldGroup?t.tabItems=e.fieldGroup:t.tabItems=[],t.selectableItem=n,t._fieldItem=e)}))},enumerable:!1,configurable:!0}),Object.defineProperty(n.prototype,"tabItems",{set:function(e){e&&(this._tabItems=H(e))},enumerable:!1,configurable:!0}),n.prototype.ngOnInit=function(){this.initAvailableItems()},n.prototype.initAvailableItems=function(){var t=this;this.formEditorConfig.selectableItems.pipe(i.take(1)).subscribe((function(n){n?(t.types=H(n.filter((function(t){return t.category===e.SelectableCategory.SIMPLE}))),t.initForm(),t.onChanges()):t.types=[]}))},n.prototype.initForm=function(){var e=this,t=[];this._tabItems.map((function(n,o){t.push(e.createTabFormGroup(n))})),this.form=this.fb.group({fieldGroup:this.fb.array(H(t))}),this.onChanges(),this.formReady=!0},n.prototype.createTabFormGroup=function(e){var t,n=[];return(null===(t=e.fieldGroup)||void 0===t?void 0:t.length)&&e.fieldGroup.map((function(e){n.push(e)})),this.fb.group({label:e.label,key:e.key,type:e.type,uuid:e.uuid,fieldGroup:this.fb.array(H(n))})},n.prototype.onChanges=function(){var e=this;this.form.valueChanges.subscribe((function(t){e.updatedFieldGroup.emit(e.form.value.fieldGroup)}))},n.prototype.onEnterKey=function(){this.inviableInputElement.nativeElement.focus()},n.prototype.onSubmit=function(e){e.stopPropagation(),e.preventDefault()},n.prototype.addItem=function(e){var t=this;void 0===e&&(e=null),this.formEditorConfig.getSelectableItemFromId("tab").pipe(i.take(1)).subscribe((function(n){n.label=e,t.form.get("fieldGroup").push(t.createTabFormGroup(n))}))},n.prototype.removeItem=function(e){this.form.get("fieldGroup").removeAt(e)},n}();Te.decorators=[{type:t.Component,args:[{selector:"form-tab-items",template:'\n<form nz-form [formGroup]="form" nzLayout="vertical" class="width-all" (ngSubmit)="onSubmit($event)">\n  \x3c!-- <div>Number of tabs in this tabGroup: {{ fieldItem.fieldGroup?.length || 0 }}</div> --\x3e\n\n  <nz-form-control>\n    <nz-form-label>Add your form sections</nz-form-label>\n  </nz-form-control>\n\n  <nz-form-item\n    formArrayName="fieldGroup"\n    *ngFor="let fieldGroup of form.get(\'fieldGroup\')[\'controls\']; let i = index"\n  >\n    <div\n      nz-row\n      nzJustify="space-between" nzAlign="middle"\n      class="option-label-wrapper"\n      [formGroup]="fieldGroup"\n    >\n\n      <div nz-col nzFlex="auto" class="option-input-wrapper">\n        <input\n          nz-input\n          formControlName="label"\n          placeholder="Label"\n          (keyup.enter)="onEnterKey()"\n          maxlength="255"\n        />\n      </div>\n\n      \x3c!-- <div nz-col> --\x3e\n        <button nz-button nzShape="square" (click)="removeItem(i)" type="button">\n          <i nz-icon nzType="close" nzTheme="outline"></i>\n        </button>\n      \x3c!-- </div> --\x3e\n\n    </div>\n\n  </nz-form-item>\n\n\n\n  <form-editor-add-row>\n    <tf-ng-hexagon\n      colour="white"\n      outline-colour="blue"\n      size="xs"\n      (click)="addItem()"\n    >\n      <i nz-icon nzType="plus" nzTheme="outline" class="blue"></i>\n    </tf-ng-hexagon>\n  </form-editor-add-row>\n\n</form>\n\n<input #inviableInput class="invisable-input"/>\n',styles:[":host{display:block}.width-all{width:100%;min-width:100%}.option-input-wrapper{margin-right:10px}.invisable-input{opacity:0;pointer-events:none;width:1px;height:1px}"]}]}],Te.ctorParameters=function(){return[{type:d.FormBuilder},{type:ee}]},Te.propDecorators={updated:[{type:t.Output,args:["updated"]}],updatedFieldGroup:[{type:t.Output,args:["updatedFieldGroup"]}],selectedField:[{type:t.Output,args:["selectedField"]}],fieldItem:[{type:t.Input,args:["fieldItem"]}],inviableInputElement:[{type:t.ViewChild,args:["inviableInput"]}]};var Oe=function(){function n(e,n,o){this.formEditorService=e,this.formEditorConfig=n,this.fb=o,this.updatedFieldItem=new t.EventEmitter,this.formReady=!1}return Object.defineProperty(n.prototype,"editorItemModel",{get:function(){return this._editorItemModel},set:function(e){this.formReady=!1,this.selectableItem=e.selectableItem,this.fieldItem=e.fieldItem,this.initForm()},enumerable:!1,configurable:!0}),n.prototype.ngOnInit=function(){},n.prototype.initForm=function(){this.form=this.fb.group({}),this.selectableItem.editableConfig.setLabel&&this.form.addControl("label",new d.FormControl(this.fieldItem.label,[])),this.selectableItem.editableConfig.setDesc&&this.form.addControl("description",new d.FormControl(this.fieldItem.description,[])),this.selectableItem.editableConfig.setPlaceholder&&this.form.addControl("placeholder",new d.FormControl(this.fieldItem.placeholder,[])),this.selectableItem.editableConfig.hasComponentOptions&&this.form.addControl("componentOptions",new d.FormControl(this.fieldItem.componentOptions,[])),this.selectableItem.editableConfig.hasFieldGroup&&this.form.addControl("fieldGroup",new d.FormControl(this.fieldItem.fieldGroup,[])),this.onChanges(),this.formReady=!0},n.prototype.onChanges=function(){var e=this;this.form.valueChanges.subscribe((function(t){e.fieldItem=Object.assign(Object.assign({},e.fieldItem),e.form.value),e.formEditorService.updateFormItem(e.fieldItem),e.updatedFieldItem.emit(e.fieldItem)}))},n.prototype.onOptionsUpdated=function(e){this.updateComponentOptions(Object.assign(Object.assign({},this.fieldItem.componentOptions),{options:e}))},n.prototype.onGridOptionsUpdated=function(e){this.updateComponentOptions(Object.assign(Object.assign({},this.fieldItem.componentOptions),{gridOptions:e}))},n.prototype.updateComponentOptions=function(e){this.fieldItem=Object.assign(Object.assign({},this.fieldItem),{componentOptions:e}),this.formEditorService.updateFormItem(this.fieldItem),this.updatedFieldItem.emit(this.fieldItem)},n.prototype.addFieldGroupItem=function(e){var t=this.formEditorService.getFieldItemFromSelection(e);this.formEditorService.addFormItemToFieldGroup(this.fieldItem,t)},n.prototype.onFieldGroupUpdated=function(e){this.fieldItem=Object.assign(Object.assign({},this.fieldItem),{fieldGroup:e}),this.formEditorService.updateFormItem(this.fieldItem)},n.prototype.addFieldGridItem=function(e){this.formEditorService.getFieldItemFromSelection(e)},n.prototype.hasFieldGroup=function(){return!!this.selectableItem.editableConfig.hasFieldGroup&&this.selectableItem.editableConfig.type!==e.EditableConfigType.TABS},n.prototype.hasTabs=function(){return this.selectableItem.editableConfig.type===e.EditableConfigType.TABS},n.prototype.getDescriptionFieldLabel=function(){return"text"===this.selectableItem.type?"Text":"Description"},n.prototype.onMultiplePlaceholderUpdate=function(e,t){var n=this.form.controls.placeholder.value||[];n[t]=e.target.value,this.form.controls.placeholder.setValue(n)},n}();Oe.decorators=[{type:t.Component,args:[{selector:"field-item-editor",template:'<form\n  *ngIf="formReady"\n  nz-form [formGroup]="form"\n  nzLayout="vertical" class="width-all"\n>\n\n\n  <nz-form-item *ngIf="selectableItem?.editableConfig.setLabel">\n    <nz-form-control>\n      <nz-form-label nzFor="label">Label</nz-form-label>\n      <input nz-input formControlName="label" placeholder="Label" maxlength="255"/>\n    </nz-form-control>\n  </nz-form-item>\n\n  <nz-form-item *ngIf="selectableItem?.editableConfig.setDesc">\n    <form-editor-rich-text\n      [title]="getDescriptionFieldLabel()"\n      [passedFormControlName]="\'description\'"\n      [passedFormControl]="form?.controls[\'description\']"\n    ></form-editor-rich-text>\n\n  </nz-form-item>\n\n  <nz-form-item *ngIf="selectableItem?.editableConfig.setPlaceholder">\n    <nz-form-control *ngIf="!selectableItem.editableConfig.multiplePlaceholders">\n      <nz-form-label nzFor="placeholder">Placeholder</nz-form-label>\n      <input nz-input formControlName="placeholder" maxlength="255"/>\n    </nz-form-control>\n\n    <nz-form-control *ngIf="selectableItem.editableConfig.multiplePlaceholders">\n      <nz-form-label>Placeholder{{ selectableItem.type !== \'date\' ? \'s\' : \'\'}}</nz-form-label>\n      <div nz-row nzGutter="16">\n        <div nz-col [nzSpan]="selectableItem.type !== \'date\' ? 12 : 24">\n          <input nz-input [value]="fieldItem.placeholder ? fieldItem.placeholder[0] ? fieldItem.placeholder[0] : \'\' : \'\'"\n            (keyup)="onMultiplePlaceholderUpdate($event, 0)" maxlength="255"\n          />\n        </div>\n        <div nz-col nzSpan="12" *ngIf="selectableItem.type !== \'date\' ">\n          <input nz-input [value]="fieldItem.placeholder ? fieldItem.placeholder[1] ? fieldItem.placeholder[1] : \'\' : \'\'"\n            (keyup)="onMultiplePlaceholderUpdate($event, 1)" maxlength="255"\n          />\n        </div>\n      </div>\n    </nz-form-control>\n\n  </nz-form-item>\n\n</form>\n\n<form-editor-number-options *ngIf="selectableItem.editableConfig.hasNumberOptions">\n</form-editor-number-options>\n\n\x3c!-- [optionItems]="fieldItem.componentOptions?.options || null" --\x3e\n<div *ngIf="selectableItem.editableConfig.hasComponentOptions">\n  <form-editor-field-item-options\n    [fieldItem]="fieldItem"\n    (updated)="onOptionsUpdated($event)"\n  ></form-editor-field-item-options>\n</div>\n\n\n\x3c!-- Items for fieldGroup --\x3e\n<div *ngIf="selectableItem.editableConfig.hasFieldGroup">\n  \x3c!-- (updated)="onComponentOptionsUpdated($event)" --\x3e\n  <div *ngIf="hasFieldGroup()">\n    <form-item-field-group\n      [fieldItem]="fieldItem"\n      (selectedField)="addFieldGroupItem($event)"\n    ></form-item-field-group>\n  </div>\n\n\n  \x3c!-- (selectedField)="addFieldGroupItem($event)" --\x3e\n  <div *ngIf="hasTabs()">\n    <form-tab-items\n      [fieldItem]="fieldItem"\n      (updatedFieldGroup)="onFieldGroupUpdated($event)"\n    ></form-tab-items>\n  </div>\n</div>\n\n\n<div *ngIf="selectableItem.editableConfig.hasGridOptions">\n  <form-item-grid\n    (updated)="onGridOptionsUpdated($event)"\n    (updatedFieldGroup)="onFieldGroupUpdated($event)"\n    [fieldItem]="fieldItem"\n    (selectedField)="addFieldGridItem($event)"\n  >\n  </form-item-grid>\n</div>\n',styles:[":host{display:block}.width-all{width:100%;min-width:100%}"]}]}],Oe.ctorParameters=function(){return[{type:te},{type:ee},{type:d.FormBuilder}]},Oe.propDecorators={updatedFieldItem:[{type:t.Output,args:["updatedFieldItem"]}],active:[{type:t.Input,args:["active"]}],editorItemModel:[{type:t.Input,args:["editorItemModel"]}]};var Ee=function(){function e(e,n,o){this.formEditorService=e,this.formEditorConfig=n,this.fb=o,this.updatedFieldItem=new t.EventEmitter,this.nextStep=new t.EventEmitter,this.formReady=!1}return Object.defineProperty(e.prototype,"editorItemModel",{get:function(){return this._editorItemModel},set:function(e){var t;this.active&&e.fieldItem.uuid===(null===(t=this.fieldItem)||void 0===t?void 0:t.uuid)||(this.formReady=!1,this.selectableItem=e.selectableItem,this.fieldItem=e.fieldItem,this.initForm())},enumerable:!1,configurable:!0}),e.prototype.ngOnInit=function(){},e.prototype.initForm=function(){this.form=this.fb.group({}),this.selectableItem.editableConfig.hasLayoutOptions&&this.form.addControl("layout",new d.FormControl(this.fieldItem,[])),this.showDetailsComponentOptions()&&this.form.addControl("componentOptions",new d.FormControl(this.fieldItem.componentOptions,[])),this.onChanges(),this.formReady=!0},e.prototype.onChanges=function(){var e=this;this.form.valueChanges.subscribe((function(t){e.fieldItem=Object.assign(Object.assign({},e.fieldItem),e.form.value),e.formEditorService.updateFormItem(e.fieldItem)}))},e.prototype.onComponentOptionsUpdated=function(e){var t=Object.assign(Object.assign({},this.fieldItem.componentOptions),e);this.fieldItem=Object.assign(Object.assign({},this.fieldItem),{componentOptions:t}),this.formEditorService.updateFormItem(this.fieldItem),this.updatedFieldItem.emit(this.fieldItem)},e.prototype.showDetailsComponentOptions=function(){var e=!1;return this.selectableItem?((this.selectableItem.editableConfig.hasLayoutOptions||this.selectableItem.editableConfig.hasGridOptions)&&(e=!0),e):e},e.prototype.onNextStep=function(){this.nextStep.emit(!0)},e}();Ee.decorators=[{type:t.Component,args:[{selector:"field-item-layout",template:'\x3c!-- <form\n  *ngIf="formReady"\n  nz-form [formGroup]="form"\n  nzLayout="vertical" class="width-all"\n>\n\n\n\n</form> --\x3e\n<div *ngIf="showDetailsComponentOptions()">\n  <field-details-component-options\n    [fieldItem]="fieldItem"\n    (updated)="onComponentOptionsUpdated($event)"\n    (nextStep)="onNextStep($event)"\n  ></field-details-component-options>\n</div>\n',styles:[":host{display:block}.width-all{width:100%;min-width:100%}"]}]}],Ee.ctorParameters=function(){return[{type:te},{type:ee},{type:d.FormBuilder}]},Ee.propDecorators={updatedFieldItem:[{type:t.Output,args:["updatedFieldItem"]}],nextStep:[{type:t.Output,args:["nextStep"]}],active:[{type:t.Input,args:["active"]}],editorItemModel:[{type:t.Input,args:["editorItemModel"]}]};var Me=function(){function e(e,n,o,i){this.formEditorService=e,this.formEditorConfig=n,this.fb=o,this.formPermissionService=i,this.updatedFieldItem=new t.EventEmitter,this.formReady=!1}return Object.defineProperty(e.prototype,"editorItemModel",{get:function(){return this._editorItemModel},set:function(e){var t;this.active&&e.fieldItem.uuid===(null===(t=this.fieldItem)||void 0===t?void 0:t.uuid)||(this.formReady=!1,this.selectableItem=e.selectableItem,this.fieldItem=e.fieldItem,this.initForm())},enumerable:!1,configurable:!0}),e.prototype.ngOnInit=function(){},e.prototype.initForm=function(){this.form=this.fb.group({}),this.selectableItem.editableConfig.setRequired&&this.form.addControl("required",new d.FormControl(this.fieldItem.required,[])),this.selectableItem.editableConfig.setHelp&&this.form.addControl("help",new d.FormControl(this.fieldItem.help,[])),this.onChanges(),this.formReady=!0},e.prototype.onChanges=function(){var e=this;this.form.valueChanges.subscribe((function(t){e.fieldItem=Object.assign(Object.assign({},e.fieldItem),e.form.value),e.formEditorService.updateFormItem(e.fieldItem),e.updatedFieldItem.emit(e.fieldItem)}))},e.prototype.onComponentOptionsUpdated=function(e){var t=Object.assign(Object.assign({},this.fieldItem.componentOptions),e);this.fieldItem=Object.assign(Object.assign({},this.fieldItem),{componentOptions:t}),this.formEditorService.updateFormItem(this.fieldItem),this.updatedFieldItem.emit(this.fieldItem)},e.prototype.showDetailsComponentOptions=function(){var e=!1;return this.selectableItem?(this.selectableItem.editableConfig.hasDateOptions&&(e=!0),e):e},e}();Me.decorators=[{type:t.Component,args:[{selector:"field-item-config-options",template:'<form\n  *ngIf="formReady"\n  nz-form [formGroup]="form"\n  nzLayout="vertical" class="width-all"\n>\n  <div class="title-wrapper">\n\n    \x3c!-- REQUIRED --\x3e\n    <form-editor-switch-wrapper *ngIf="selectableItem?.editableConfig.setRequired">\n      <nz-form-label label nzFor="required" >\n        Required\n      </nz-form-label>\n      <nz-switch switch formControlName="required"></nz-switch>\n    </form-editor-switch-wrapper>\n\n    \x3c!-- HELP --\x3e\n    <nz-form-item *ngIf="selectableItem?.editableConfig.setHelp">\n      <nz-form-control>\n        <nz-form-label nzFor="help">Help text</nz-form-label>\n        <input nz-input formControlName="help" maxlength="255"/>\n      </nz-form-control>\n    </nz-form-item>\n\n\n\n  </div>\n\n</form>\n\n<div *ngIf="selectableItem.editableConfig.hasDateOptions">\n  <form-item-date-options\n    [fieldItem]="fieldItem"\n    (updated)="onComponentOptionsUpdated($event)"\n  ></form-item-date-options>\n</div>\n',styles:[":host{display:block}.width-all{width:100%;min-width:100%}"]}]}],Me.ctorParameters=function(){return[{type:te},{type:ee},{type:d.FormBuilder},{type:a.TfNgFormPermissionService}]},Me.propDecorators={updatedFieldItem:[{type:t.Output,args:["updatedFieldItem"]}],active:[{type:t.Input,args:["active"]}],editorItemModel:[{type:t.Input,args:["editorItemModel"]}]};var De=function(){function e(e){this.formService=e,this.updatedShowInlinePreview=new t.EventEmitter,this.hasFields=!1}return e.prototype.ngOnInit=function(){var e=this;this.dataSubscription=this.formService.data.subscribe((function(t){e.hasFields=e.formService.fields.length>0}),(function(t){e.hasFields=!1}))},e.prototype.onToggleShowInlinePreview=function(){this.updatedShowInlinePreview.emit(!this.showInlinePreview)},e.prototype.ngOnDestroy=function(){this.dataSubscription.unsubscribe()},e}();De.decorators=[{type:t.Component,args:[{selector:"form-editor-inline-preview",template:'<div\n  class="form-editor-field-detail rounded"\n  [ngClass]="[\n    showInlinePreview ? \'bg-white\' : \'bg-blue\'\n  ]">\n\n\n  <div *ngIf="showInlinePreview" class="wrapper width-all ant-form">\n\n    <tf-ng-form-title class="title">\n\n      <div nz-row nzJustify="space-between" nzAlign="middle" class="flex-title-wrapper">\n\n        <h4 ng-typography nz-col nzFlex="auto" class="blue" >\n          Preview\n        </h4>\n        <tf-ng-hexagon\n          nz-col\n          colour="aqua"\n          outline-colour="white"\n          size="xs" (click)="onToggleShowInlinePreview()"\n        >\n          <i\n            nz-icon class="blue"\n            nzType="arrow-right" nzTheme="outline"\n          ></i>\n        </tf-ng-hexagon>\n\n      </div>\n    </tf-ng-form-title>\n    <p *ngIf="!hasFields" class="grey">There are no items in the form.</p>\n  </div>\n\n\n  <div *ngIf="!showInlinePreview" class="open-button wrapper width-all ant-form">\n    <tf-ng-hexagon\n      nz-col\n      colour="aqua"\n      outline-colour="blue"\n      size="xs" (click)="onToggleShowInlinePreview()"\n    >\n      <i\n        nz-icon class="blue"\n        nzType="arrow-left" nzTheme="outline"\n      ></i>\n    </tf-ng-hexagon>\n\n  </div>\n\n  <tf-ng-form\n    *ngIf="showInlinePreview && hasFields"\n    [forceHideFormTitle]="true"\n    [forceFullFormWidth]="true"\n  ></tf-ng-form>\n</div>\n',styles:[":host{margin:0;padding:0}.form-editor-field-detail,:host{display:flex;flex-direction:column;min-height:100%;flex:1 0 0}.wrapper{display:flex;flex-direction:column}.flex-title-wrapper{margin-top:-7px}tf-ng-form{margin-top:-32px}.open-button{margin-top:13px}"]}]}],De.ctorParameters=function(){return[{type:a.TfNgFormService}]},De.propDecorators={showInlinePreview:[{type:t.Input,args:["showInlinePreview"]}],updatedShowInlinePreview:[{type:t.Output,args:["updatedShowInlinePreview"]}]};var ke=function(){function n(n,o){this.formEditorService=n,this.fb=o,this.loaded=!1,this.metaFormUpdating=!1,this.allowTitle=e.CheckFormMetaDataStatus.UNSET,this.allowCode=e.CheckFormMetaDataStatus.UNSET,this.formInited=new t.EventEmitter}return n.prototype.ngOnInit=function(){this.metaData={title:null,code:null,showTitle:!0,version:"1"},this.initForm()},n.prototype.initForm=function(){this.metaForm=this.fb.group({title:[this.metaData.title,[d.Validators.required]],showTitle:[this.metaData.showTitle],code:[this.metaData.code],version:[this.metaData.version]}),this.metaForm.controls.version.disable(),this.metaForm.markAsPristine()},n.prototype.onMetaFormUpdate=function(){var t=this;if(this.metaForm.valid){this.metaFormUpdating=!0,this.returnedCheckedFormMetaData={};var n=0,o={};this.metaData.title!==this.metaForm.value.title&&(n++,o.title=this.metaForm.value.title,o.allowTitle=this.allowTitle=e.CheckFormMetaDataStatus.PENDING),this.metaData.code!==this.metaForm.value.code&&(n++,o.code=this.metaForm.value.code,o.allowCode=this.allowCode=e.CheckFormMetaDataStatus.PENDING),n>0?(this.checkFormMetaInputSubscription=this.formEditorService.checkFormMetaInput.subscribe((function(o){t.checkFormMetaInputSubscription.unsubscribe();var i=0;o?(t.returnedCheckedFormMetaData=o,o.allowTitle&&(o.allowTitle===e.CheckFormMetaDataStatus.ALLOW&&(i++,t.metaData=Object.assign(Object.assign({},t.metaData),{title:o.title})),t.allowTitle=o.allowTitle),o.allowCode&&(o.allowCode===e.CheckFormMetaDataStatus.ALLOW&&(i++,t.metaData=Object.assign(Object.assign({},t.metaData),{code:o.code})),t.allowCode=o.allowCode),i===n?t.setMetaData():(t.metaForm.markAsPristine(),t.metaFormUpdating=!1)):(t.metaForm.markAsPristine(),t.metaFormUpdating=!1)})),this.formEditorService.checkFormMetaDataOutput(o)):this.setMetaData()}},n.prototype.setMetaData=function(){this.metaForm.controls.version.enable(),this.formEditorService.initialiseNewForm(Object.assign(Object.assign({},this.metaForm.value),{jsonSchema:!0})),this.metaForm.markAsPristine(),this.metaFormUpdating=!1,this.formInited.emit(!0)},n.prototype.ngOnDestroy=function(){this.checkFormMetaInputSubscription&&this.checkFormMetaInputSubscription.unsubscribe},n}();ke.decorators=[{type:t.Component,args:[{selector:"form-editor-new-form",template:'\n\n<div nz-row nzJustify="center" nzAlign="middle">\n  <div nz-col nzSpan="12" nzLg="10" nzXl="8">\n    <tf-ng-card colour="white">\n      <tf-ng-form-title>\n        <h2 nz-typography class="navy">Create a new form</h2>\n      </tf-ng-form-title>\n\n      <form nz-form [formGroup]="metaForm" nzLayout="vertical">\n\n        <nz-form-item>\n          <nz-form-control\n            [nzValidateStatus]="allowTitle === 2 ? \'error\' : \'\'"\n            [nzErrorTip]="returnedCheckedFormMetaData?.titleErrMessage || \'Form title cannot be used in this format. Please change and try again\'"\n          >\n            <nz-form-label nzFor="title">Form Title</nz-form-label>\n            <nz-input-group [nzSuffix]="suffixTitle">\n              <input nz-input formControlName="title" placeholder="eg: My Form" maxlength="255" />\n            </nz-input-group>\n\n            <ng-template #suffixTitle>\n              <i nz-icon nzType="sync" [nzSpin]="true" class="grey" *ngIf="allowTitle === 0"></i>\n              <i nz-icon nzType="check-circle" nzTheme="outline" class="green" *ngIf="allowTitle === 1"></i>\n              <i nz-icon nzType="close-circle" nzTheme="outline" class="red" *ngIf="allowTitle === 2"></i>\n            </ng-template>\n\n\n          </nz-form-control>\n        </nz-form-item>\n\n        <div\n          nz-row nzAlign="middle" nzJustify="end"\n          class="switch-wrapper"\n        >\n          <nz-form-label\n            nz-col nzFlex="auto"\n            nzFor="showTitle"\n          >Show title in form</nz-form-label>\n          <nz-form-control nz-col nzFlex="45px">\n            <nz-switch formControlName="showTitle"></nz-switch>\n          </nz-form-control>\n        </div>\n\n\n        <nz-form-item>\n          <nz-form-control\n            [nzValidateStatus]="allowCode === 2 ? \'error\' : \'\'"\n            [nzErrorTip]="returnedCheckedFormMetaData?.codeErrMessage || \'Form code cannot be used in this format. Please change and try again\'"\n          >\n            <nz-form-label nzFor="code">Code</nz-form-label>\n            <nz-input-group  [nzSuffix]="suffixCode">\n              <input nz-input formControlName="code" placeholder="eg: form-001" maxlength="255"/>\n            </nz-input-group>\n\n            <ng-template #suffixCode>\n              <i nz-icon nzType="sync" [nzSpin]="true" class="grey" *ngIf="allowCode === 0"></i>\n              <i nz-icon nzType="check-circle" nzTheme="outline" class="green" *ngIf="allowCode === 1"></i>\n              <i nz-icon nzType="close-circle" nzTheme="outline" class="red" *ngIf="allowCode === 2"></i>\n            </ng-template>\n\n          </nz-form-control>\n        </nz-form-item>\n\n        <nz-form-item>\n          <nz-form-control>\n            <nz-form-label nzFor="code">Version</nz-form-label>\n            <input nz-input formControlName="version" maxlength="255"/>\n          </nz-form-control>\n        </nz-form-item>\n\n        <p nz-typography *ngIf="allowCode === 0 || allowTitle === 0" class="grey">\n          Checking form {{ allowTitle === 0 ? \'title\' : \'\' }}{{ allowTitle === 0 && allowCode === 0 ? \' and \' : \'\' }}{{ allowCode === 0 ? \'code\' : \'\' }}...\n        </p>\n        <p nz-typography *ngIf="allowCode !== 0 && allowTitle !== 0">&nbsp;</p>\n\n        <div nz-row nzJustify="end" nzAlign="top" class="form-submit-wrapper">\n          <button\n            nz-col nz-button\n            nzType="primary" type="submit"\n            [ngClass]="!(metaForm.dirty && metaForm.valid) ? \'grey\' : \'aqua\' "\n            [disabled]="!(metaForm.dirty && metaForm.valid)"\n            (click)="onMetaFormUpdate()"\n            [nzLoading]="metaFormUpdating"\n          >\n            {{ metaFormUpdating ? \'Creating\' : \'Create Form\' }}\n          </button>\n        </div>\n\n      </form>\n\n    </tf-ng-card>\n  </div>\n</div>\n',styles:[":host{display:block}"]}]}],ke.ctorParameters=function(){return[{type:te},{type:d.FormBuilder}]},ke.propDecorators={formInited:[{type:t.Output,args:["formInited"]}]};var Pe=function(){function e(e,t,n,o){this.formService=e,this.displayJsonService=t,this.formPermissionService=n,this.formEditorService=o}return e.prototype.ngOnInit=function(){var e=this;this.formPermissionService.userPermissions.pipe(i.take(1)).subscribe((function(t){e.permissions=t,e.formPermissionService.userPermissionLevel.pipe(i.take(1)).subscribe((function(t){e.selectedPermissionLevel=t,setTimeout((function(){e.updateForm()}),0)}))}))},e.prototype.onPermissionChange=function(e){this.formPermissionService.setUserPermissionLevel(e),this.updateForm()},e.prototype.updateForm=function(){var e=this;this.formEditorService.form.pipe(i.take(1)).subscribe((function(t){t&&e.formService.setData(JSON.stringify(t)).subscribe((function(e){}))}))},e.prototype.showFormSource=function(){var e=this;this.formService.data.pipe(i.take(1)).subscribe((function(t){e.displayJsonService.show(JSON.stringify(t),"Form JSON source")}))},e}();Pe.decorators=[{type:t.Component,args:[{selector:"form-editor-preview-settings",template:'\n<tf-ng-item colour="white">\n  <h4>Permissions</h4>\n  <p nz-typography>Set the current user permissions</p>\n  <nz-select\n    nzPlaceHolder="Select User Permissions..."\n    [(ngModel)]="selectedPermissionLevel"\n    (ngModelChange)="onPermissionChange($event)"\n    class="select-item"\n  >\n    <nz-option *ngFor="let p of permissions" [nzLabel]="p.label" [nzValue]="p.level"></nz-option>\n  </nz-select>\n</tf-ng-item>\n\n<nz-divider></nz-divider>\n\n<tf-ng-item colour="white">\n  <button nz-button nzType="primary" nzBlock (click)="showFormSource()">\n    <i nz-icon nzType="code" nzTheme="outline"></i>\n    Show source\n  </button>\n</tf-ng-item>\n',styles:[":host{display:block}.select-item{width:100%}"]}]}],Pe.ctorParameters=function(){return[{type:a.TfNgFormService},{type:a.DisplayJsonService},{type:a.TfNgFormPermissionService},{type:te}]};var Ne,Le=function(){function e(e,t,n,o){this.formEditorService=e,this.formEditorConfig=t,this.formPermissionService=n,this.modal=o,this.message="Permissions allow you set how each user interacts with the form. By default all inputs are fillable for all users."}return Object.defineProperty(e.prototype,"editorItemModel",{get:function(){return this._editorItemModel},set:function(e){var t;this.active&&e.fieldItem.uuid===(null===(t=this.fieldItem)||void 0===t?void 0:t.uuid)||(this.selectableItem=e.selectableItem,this.fieldItem=e.fieldItem,this.getPermissions())},enumerable:!1,configurable:!0}),e.prototype.ngOnInit=function(){},e.prototype.getPermissions=function(){var e=this;this.formPermissionService.userPermissions.pipe(i.take(1)).subscribe((function(t){t?(e.selectedPermissions=e.fieldItem.permissions?H(e.fieldItem.permissions):[],e.availablePermissions=t.map((function(t){return{label:t.label,value:t.level,checked:e.selectedPermissions.includes(t.level)}}))):e.availablePermissions=[],e.selectableItem.editableConfig.setReadonlyPermissions?e.getReadOnlyPermissions():e.initSetPermissionsToggle()}))},e.prototype.getReadOnlyPermissions=function(){var e=this;this.formPermissionService.userPermissions.pipe(i.take(1)).subscribe((function(t){t?(e.selectedReadOnlyPermissions=e.fieldItem.readonlyPermissions?H(e.fieldItem.readonlyPermissions):[],e.availableReadOnlyPermissions=t.map((function(t){return{label:t.label,value:t.level,checked:e.selectedReadOnlyPermissions.includes(t.level)}}))):e.availableReadOnlyPermissions=[],e.initSetPermissionsToggle()}))},e.prototype.initSetPermissionsToggle=function(){this.selectedPermissions.length||this.selectedReadOnlyPermissions.length?this.allowSetPermissions=!0:this.allowSetPermissions=!1},e.prototype.toggleAllowSetPermissions=function(e){e?(this.selectedReadOnlyPermissions=[],this.selectedPermissions=this.availablePermissions.map((function(e){return e.value}))):(this.selectedReadOnlyPermissions=[],this.selectedPermissions=[],this.update()),this.allowSetPermissions=e},e.prototype.update=function(){this.fieldItem=Object.assign(Object.assign({},this.fieldItem),{permissions:this.selectedPermissions,readonlyPermissions:this.selectedReadOnlyPermissions}),this.formEditorService.updateFormItem(this.fieldItem)},e.prototype.onPermissionUpdated=function(e){this.selectedPermissions=H(e),this.update()},e.prototype.onReadOnlyPermissionUpdated=function(e){this.selectedReadOnlyPermissions=H(e),this.update()},e.prototype.getLevelPermission=function(e){return this.selectedReadOnlyPermissions.includes(e)?"read-only":this.selectedPermissions.includes(e)?"fillable":"hidden"},e.prototype.onPermissionSelected=function(e,t){var n=this,o=Number(t),i=H(this.selectedPermissions),r=H(this.selectedReadOnlyPermissions);"read-only"===e&&(i.includes(o)||i.push(o),r.includes(o)||r.push(o)),"read-only"!==e&&(r.includes(o)&&(r=r.filter((function(e){return e!==o}))),"hidden"===e?i.includes(o)&&(i=i.filter((function(e){return e!==o}))):i.includes(o)||i.push(o)),this.selectedReadOnlyPermissions=H(r),this.selectedPermissions=H(i),this.selectedPermissions.length?this.update():this.modal.warning({nzTitle:"Alert",nzContent:"\n          <p>You cannot set all user groups to 'hidden'. The permissions will be reverted back to the default setting</p>\n        ",nzOkText:"OK",nzOnOk:function(){n.update(),n.allowSetPermissions=!1}})},e}();Le.decorators=[{type:t.Component,args:[{selector:"field-item-permissions",template:'\x3c!-- <form\n  *ngIf="formReady"\n  nz-form [formGroup]="form"\n  nzLayout="vertical" class="width-all"\n> --\x3e\n\n  <div class="title-wrapper" *ngIf="selectableItem?.editableConfig.setPermissions">\n\n    <div nz-row>\n      <div nz-col nzSpan="24">\n        <form-editor-switch-wrapper>\n          <nz-form-label label>\n            Set permissions\n          </nz-form-label>\n          <nz-switch\n            switch\n            [ngModel]="allowSetPermissions"\n            (ngModelChange)="toggleAllowSetPermissions($event)"\n          ></nz-switch>\n        </form-editor-switch-wrapper>\n      </div>\n    </div>\n\n    <div\n      class="permissions-wrapper"\n      [ngClass]="allowSetPermissions ? \'show\' : \'hide\' ">\n      \x3c!-- PERMISSIONS --\x3e\n      <nz-form-item *ngIf="allowSetPermissions">\n        \x3c!-- <span class="navy">Set user permission levels;</span> --\x3e\n        <div nz-row>\n\n          \x3c!-- Titles --\x3e\n          <div nz-col nzSpan="8">\n            <h6 class="tf-app-column-header-text navy">User Level</h6>\n            <div class="col-items">\n              <div class="item" *ngFor="let pt of availablePermissions">\n                <label>{{pt.label}}</label>\n              </div>\n            </div>\n          </div>\n\n          \x3c!-- DROP DOWN SELECT --\x3e\n          <div nz-col nzSpan="16">\n            <h6 class="tf-app-column-header-text navy">Permission</h6>\n            <div class="col-items">\n              <div class="item" *ngFor="let p of availablePermissions">\n                <nz-select\n                  [ngModel]="getLevelPermission(p.value)"\n                  [ngModelOptions]="{standalone: true}"\n                  (ngModelChange)="onPermissionSelected($event, p.value)"\n                >\n                  <nz-option nzValue="fillable" nzLabel="Fillable"></nz-option>\n                  <nz-option nzValue="read-only" nzLabel="Read Only"></nz-option>\n                  <nz-option nzValue="hidden" nzLabel="Hidden"></nz-option>\n                </nz-select>\n              </div>\n            </div>\n          </div>\n          <div class="message-wrapper">\n            <i nz-icon nzType="info-circle" nzTheme="fill" class="icon dark-grey"></i>\n            <span nz-typography class="dark-grey">Please note you can’t set all users to hidden. If you do permissions will be reverted back to the default setting\n              </span>\n          </div>\n          \x3c!-- read / write --\x3e\n          \x3c!-- <div nz-col nzSpan="8">\n            <h6 class="tf-app-column-header-text navy">Visible</h6>\n            <nz-checkbox-wrapper\n              (nzOnChange)="onPermissionUpdated($event)"\n            >\n              <div>\n                <div *ngFor="let p of availablePermissions">\n                  <label\n                    nz-checkbox\n                    [ngModel]="p.checked"\n                    [ngModelOptions]="{standalone: true}"\n                    [nzValue]="p.value"\n                    [nzDisabled]="selectedReadOnlyPermissions.includes(p.value)"\n                  ></label>\n                </div>\n              </div>\n            </nz-checkbox-wrapper>\n          </div> --\x3e\n\n          \x3c!-- READ-ONLY-PERMISSIONS --\x3e\n          \x3c!-- <div nz-col nzSpan="8" *ngIf="selectableItem?.editableConfig.setReadonlyPermissions">\n            <h6 class="tf-app-column-header-text navy">Read Only</h6>\n            <nz-checkbox-wrapper\n              (nzOnChange)="onReadOnlyPermissionUpdated($event)"\n            >\n              <div>\n                <div *ngFor="let rop of availableReadOnlyPermissions">\n                  <label\n                    nz-checkbox\n                    [ngModel]="rop.checked"\n                    [ngModelOptions]="{standalone: true}"\n                    [nzValue]="rop.value"\n                  ></label>\n                </div>\n              </div>\n            </nz-checkbox-wrapper>\n          </div> --\x3e\n\n        </div>\n\n      </nz-form-item>\n    </div>\n\n    <div\n      class="message-wrapper"\n      [ngClass]="!allowSetPermissions ? \'show\' : \'hide\' "\n    >\n      <i nz-icon nzType="info-circle" nzTheme="fill" class="icon dark-grey"></i>\n      <span nz-typography class="dark-grey">{{ message }}</span>\n    </div>\n\n  </div>\n\n\x3c!-- </form> --\x3e\n',styles:[":host{display:block}.width-all{width:100%;min-width:100%}.col-items .item{height:40px;min-height:40px;display:flex;align-items:center}.permissions-wrapper{display:block;overflow:hidden;height:100%}.permissions-wrapper.show{max-height:100vh;opacity:1;pointer-events:all;transition-property:all;transition-timing-function:cubic-bezier(0,0,.2,1);transition-duration:.35s}.permissions-wrapper.hide{max-height:0;opacity:0;pointer-events:none;transition-property:all;transition-timing-function:cubic-bezier(.4,0,1,1);transition-duration:.2s}.message-wrapper{display:flex;overflow:hidden;height:100%}.message-wrapper.show{opacity:1;pointer-events:all;transition-property:all;transition-timing-function:cubic-bezier(.4,0,1,1);transition-duration:.35s}.message-wrapper.hide{opacity:0;pointer-events:none;transition-property:all;transition-timing-function:cubic-bezier(0,0,.2,1);transition-duration:.1s}.dark-grey{color:#737a7c}.message-wrapper .icon{display:block;margin-right:15px;font-size:30px}.message-wrapper .span{display:block}"]}]}],Le.ctorParameters=function(){return[{type:te},{type:ee},{type:a.TfNgFormPermissionService},{type:l.NzModalService}]},Le.propDecorators={active:[{type:t.Input,args:["active"]}],editorItemModel:[{type:t.Input,args:["editorItemModel"]}]},function(e){e.FroalaFocus="INTERNAL_FROALA_FOCUS",e.FroalaBlur="INTERNAL_FROALA_BLUR",e.FroalaChange="INTERNAL_FROALA_CHANGE"}(Ne||(Ne={}));var Ge,_e,Re,je=function(e){return!(e||"").replace(/<([^>]+?)([^>]*?)>(.*?)<\/\1>/gi,"").replace(/(<([^>]+)>)/gi,"").trim()},Ue=function(){function e(e,t){var n=this;this.sanitizer=e,this.formEditorService=t,this.froalaOptions={placeholderText:"Start typing your rich text...",charCounterCount:!1,events:{focus:function(e){return n.onFroalaEvent(Ne.FroalaFocus,e)},blur:function(e){return n.onFroalaEvent(Ne.FroalaBlur,e)},contentChanged:function(e){return n.onFroalaEvent(Ne.FroalaChange,e)}}},this.rowCount=1,this._isDynamic=!1,this.ready=!1,this.froalaKey=t.froalaKey,this.froalaOptions.key=this.froalaKey}return Object.defineProperty(e.prototype,"passedFormControl",{get:function(){return this._passedFormControl},set:function(e){this._passedFormControl=e;var t=decodeURIComponent(e.value);je(t)?(this.froalaContent=t,this.isDynamic=!0):this.isDynamic=!1,this.ready=!0},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"isDynamic",{get:function(){return this._isDynamic},set:function(e){var t=decodeURIComponent(this.passedFormControl.value);if("null"==t&&(t=""),e)this.froalaContent=t;else if(this.froalaContent){var n=document.createElement("div");n.innerHTML=t;var o=n.textContent||n.innerText||"";this.passedFormControl.setValue(o)}this._isDynamic=e},enumerable:!1,configurable:!0}),e.prototype.onFroalaEvent=function(e,t){e===Ne.FroalaChange&&(this.sanitizeRichText(this.froalaContent),this.passedFormControl.setValue(this.encodedContent))},e.prototype.sanitizeRichText=function(e){var n=this.sanitizer.sanitize(t.SecurityContext.NONE,e);this.encodedContent=encodeURIComponent(n)},e.prototype.decodeRichText=function(e){return decodeURIComponent(e)},e.prototype.onToggleEditMode=function(){this.isDynamic=!this.isDynamic},e}();Ue.decorators=[{type:t.Component,args:[{selector:"form-editor-rich-text",template:'\n\n<nz-form-control *ngIf="ready">\n\n  <div nz-row nzJustify="space-between" nzAlign="middle">\n    <div nz-col nzFlex="auto" class="title-wrapper">\n      <nz-form-label [nzFor]="passedFormControlName">\n        {{ title }}\n      </nz-form-label>\n    </div>\n\n    <span nz-col class="icon-toggle-wrapper">\n      <div nz-button nzType="text" class="toggle-icon-button grey" nzSize="small" (click)="onToggleEditMode()">\n        <i nz-icon nzType="edit" [nzTheme]="isDynamic ? \'fill\' : \'outline\' " [ngClass]="isDynamic ? \'blue\' : \'navy\'"></i>\n      </div>\n    </span>\n\n  </div>\n\n\n  <textarea\n    *ngIf="!isDynamic"\n    [rows]="rowCount" nz-input\n    [formControl]="passedFormControl"\n  ></textarea>\n\n  <div\n    *ngIf="isDynamic"\n    [froalaEditor]="froalaOptions"\n    [(froalaModel)]="froalaContent"\n  >\n  </div>\n</nz-form-control>\n',styles:[":host{display:block}.title-wrapper{margin-right:10px}.toggle-icon-button{cursor:pointer}"]}]}],Ue.ctorParameters=function(){return[{type:V.DomSanitizer},{type:te}]},Ue.propDecorators={passedFormControlName:[{type:t.Input,args:["passedFormControlName"]}],title:[{type:t.Input,args:["title"]}],passedFormControl:[{type:t.Input,args:["passedFormControl"]}],rowCount:[{type:t.Input,args:["rowCount"]}]},(Ge=e.FieldItemLayoutOption||(e.FieldItemLayoutOption={})).VERTICAL="vertical",Ge.HORIZONTAL="horizontal",(_e=e.FieldItemType||(e.FieldItemType={})).NUMBER="number",_e.PASSWORD="password",(Re=e.FieldItemDateModeOption||(e.FieldItemDateModeOption={})).DEFAULT="",Re.WEEK="week",Re.MONTH="month",Re.YEAR="year";var Ae=function(){function n(n,o){this.fb=n,this.formEditorConfig=o,this.updated=new t.EventEmitter,this.formReady=!1,this.availableDateModes=[{label:"Default",value:e.FieldItemDateModeOption.DEFAULT},{label:"Week",value:e.FieldItemDateModeOption.WEEK},{label:"Month",value:e.FieldItemDateModeOption.MONTH},{label:"Year",value:e.FieldItemDateModeOption.YEAR}]}return Object.defineProperty(n.prototype,"selectableItem",{get:function(){return this._selectableItem},set:function(e){this.optionsName=e.editableConfigOptionsName||null,this._selectableItem=e},enumerable:!1,configurable:!0}),Object.defineProperty(n.prototype,"fieldItem",{get:function(){return this._fieldItem},set:function(e){var t=this;this.formReady=!1,this.formEditorConfig.getSelectableItemFromType(e.type).pipe(i.take(1)).subscribe((function(n){n&&(t.selectableItem=n,t._fieldItem=e,t.initForm())}))},enumerable:!1,configurable:!0}),n.prototype.ngOnInit=function(){},n.prototype.initForm=function(){this.form=this.fb.group({}),this.selectableItem.editableConfig.hasDateOptions&&(this.form.addControl("mode",new d.FormControl(this.getComponentOptionData("mode",this.optionsName),[])),this.form.addControl("format",new d.FormControl(this.getComponentOptionData("format",this.optionsName),[]))),this.onChanges(),this.formReady=!0},n.prototype.onChanges=function(){var e=this;this.form.valueChanges.subscribe((function(t){var n={};e.optionsName?n[e.optionsName]=Object.assign({},e.form.value):n=Object.assign({},e.form.value),e.updated.emit(n)}))},n.prototype.getComponentOptionData=function(e,t,n){return void 0===n&&(n=null),(!t||this.fieldItem.componentOptions&&this.fieldItem.componentOptions[t])&&this.fieldItem.componentOptions?t?this.fieldItem.componentOptions[t][e]|n:this.fieldItem.componentOptions[e]|n:null},n.prototype.onModeChange=function(e){this.form.controls.mode.setValue(e)},n}();Ae.decorators=[{type:t.Component,args:[{selector:"form-item-date-options",template:'<div>\n  <nz-divider></nz-divider>\n</div>\n\n<div *ngIf="formReady">\n  <form nz-form [formGroup]="form" nzLayout="vertical" class="width-all">\n\n    <nz-form-item>\n      <nz-form-label>Date Mode</nz-form-label>\n      <nz-form-control [nzSpan]="24">\n        <nz-select\n          name="mode"\n          nzPlaceHolder="Select a date mode"\n          [(ngModel)]="selectedMode"\n          [ngModelOptions]="{standalone: true}"\n          (ngModelChange)="onModeChange($event)"\n        >\n          <nz-option\n            *ngFor="let item of availableDateModes"\n            [nzLabel]="item.label" [nzValue]="item.value"\n          ></nz-option>\n\n        </nz-select>\n      </nz-form-control>\n    </nz-form-item>\n\n\n  </form>\n\n</div>\n',styles:[":host{display:block}.width-all{width:100%;min-width:100%}"]}]}],Ae.ctorParameters=function(){return[{type:d.FormBuilder},{type:ee}]},Ae.propDecorators={updated:[{type:t.Output,args:["updated"]}],fieldItem:[{type:t.Input,args:["fieldItem"]}]};var Ve=function(){function e(){}return e.prototype.canDeactivate=function(e){return!e.canDeactivate||e.canDeactivate()},e}();Ve.decorators=[{type:t.Injectable}];var qe=function(){function e(e){this.formEditorConfig=e,this.onSelectedColumnLayout=new t.EventEmitter}return Object.defineProperty(e.prototype,"selectedColumnLayout",{set:function(e){this.selected=e.toString(),this._selectedColumnLayout=e},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"selectedColumnDefinition",{get:function(){return this._selectedColumnDefinition},set:function(e){this._selectedColumnDefinition=e},enumerable:!1,configurable:!0}),e.prototype.ngOnInit=function(){this.columnDefinitions=this.formEditorConfig._columnDefinitions},e.prototype.onColumnLayoutChange=function(e){this._selectedColumnLayout=this.selected.split(",").map((function(e){return Number(e)})),this.onSelectedColumnLayout.emit(this._selectedColumnLayout)},e}();qe.decorators=[{type:t.Component,args:[{selector:"form-editor-grid-column-layout-selection",template:'\n\x3c!-- <p ng-typography class="grid-width-desc">\n  Select your table column formation.\n</p> --\x3e\n\n<nz-form-label>\n  Select your table column formation.\n</nz-form-label>\n\n<nz-radio-group\n  class="grid-width-selection-group"\n  [(ngModel)]="selected"\n  [ngModelOptions]="{standalone: true}"\n  (ngModelChange)="onColumnLayoutChange($event)"\n>\n  <label\n    *ngFor="let col of selectedColumnDefinition.columnWidths"\n    nz-radio [nzValue]="col.widths.toString()"\n    class="grid-label-wrapper"\n  >\n\n    <div nz-row class="grid-label">\n      <span nz-col nzFlex="auto" class="label-text">{{ col.percentages }}</span>\n      <span nz-row class="grid-label-row">\n        <div *ngFor="let w of col.widths" nz-col [nzSpan]="w" class="grid-label-col bg-grey"></div>\n      </span>\n    </div>\n\n  </label>\n\n</nz-radio-group>\n',styles:[":host{display:block;margin-top:10px}nz-radio-group.grid-width-selection-group{width:275px;display:flex;flex-direction:column}.grid-label,label.grid-label-wrapper{display:flex;align-items:center;flex-direction:row;flex-wrap:nowrap;width:100%}label.grid-label-wrapper{margin-top:5px;flex:1 0 0%}span.grid-label{justify-content:space-between;min-width:240px}.label-text{margin-right:5px;overflow:hidden;white-space:nowrap}.grid-label-row{display:flex;flex-direction:row;flex-wrap:nowrap;min-width:180px;height:100%;margin-left:10px;flex:1 0 0%}.grid-label-col{margin:0 1px;height:15px}"]}]}],qe.ctorParameters=function(){return[{type:ee}]},qe.propDecorators={selectedColumnLayout:[{type:t.Input,args:["selectedColumnLayout"]}],selectedColumnDefinition:[{type:t.Input,args:["selectedColumnDefinition"]}],onSelectedColumnLayout:[{type:t.Output,args:["onSelectedColumnLayout"]}]};var Be=function(){function e(){this.minValue=-1/0,this.maxValue=1/0}return e.prototype.ngOnInit=function(){},e}();Be.decorators=[{type:t.Component,args:[{selector:"form-editor-number-options",template:'\n\x3c!-- <form nz-form nzLayout="vertical" class="width-all">\n\n  <div nz-row nzGutter="16">\n\n    <nz-form-item>\n      <nz-form-control>\n        <nz-form-label>Min</nz-form-label>\n        <nz-input-number\n          nzMin="-Infinity"\n          nzMax="Infinity"\n          nzStep="1"\n        ></nz-input-number>\n      </nz-form-control>\n    </nz-form-item>\n\n    <nz-form-item>\n      <nz-form-control>\n        <nz-form-label>Max</nz-form-label>\n        <nz-input-number\n          nzMin="-Infinity"\n          nzMax="Infinity"\n          nzStep="1"\n        ></nz-input-number>\n      </nz-form-control>\n    </nz-form-item>\n\n  </div>\n\n</form> --\x3e\n',styles:[":host{display:block}"]}]}],Be.ctorParameters=function(){return[]};var Ke=function(){};Ke.decorators=[{type:t.NgModule,args:[{declarations:[ne,oe,re,le,ae,se,de,pe,me,ce,ue,fe,he,be,ge,ye,ve,Ie,ze,we,Ce,Fe,Se,xe,Te,Oe,Ee,Me,De,ke,Pe,Le,Ue,Ae,qe,Be],imports:[s.CommonModule,d.FormsModule,d.ReactiveFormsModule,p.TfNgCoreModule,a.TfNgFormModule,ie,m.FroalaEditorModule,m.FroalaViewModule],exports:[ne],providers:[Ve]}]}],e.CanDeactivateGuard=Ve,e.FormEditorConfigService=ee,e.TfNgFormEditorComponent=ne,e.TfNgFormEditorModule=Ke,e.TfNgFormEditorService=te,e.ɵa=oe,e.ɵb=re,e.ɵba=Me,e.ɵbb=De,e.ɵbc=ke,e.ɵbd=Pe,e.ɵbe=Le,e.ɵbf=Ue,e.ɵbg=Ae,e.ɵbh=qe,e.ɵbi=Be,e.ɵbj=ie,e.ɵc=le,e.ɵd=ae,e.ɵe=se,e.ɵf=de,e.ɵg=pe,e.ɵh=me,e.ɵi=ce,e.ɵj=ue,e.ɵk=fe,e.ɵl=he,e.ɵm=be,e.ɵn=ge,e.ɵo=ye,e.ɵp=ve,e.ɵq=Ie,e.ɵr=ze,e.ɵs=we,e.ɵt=Ce,e.ɵu=Fe,e.ɵv=Se,e.ɵw=xe,e.ɵx=Te,e.ɵy=Oe,e.ɵz=Ee,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=tf-ng-form-editor.umd.min.js.map