ps-toolkit-ui 1.21.79 → 1.21.83

package/bundles/ps-toolkit-ui.umd.js

@@ -1,8 +1,10 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('lodash'), require('jalali-moment'), require('@angular/router'), require('rxjs'), require('jquery-ui-dist/jquery-ui'), require('@angular/forms'), require('@angular/common'), require('@angular/platform-browser'), require('ckeditor4-angular'), require('file-saver'), require('xlsx'), require('highcharts'), require('highcharts/modules/exporting'), require('highcharts/modules/export-data')) :
-    typeof define === 'function' && define.amd ? define('ps-toolkit-ui', ['exports', '@angular/core', 'lodash', 'jalali-moment', '@angular/router', 'rxjs', 'jquery-ui-dist/jquery-ui', '@angular/forms', '@angular/common', '@angular/platform-browser', 'ckeditor4-angular', 'file-saver', 'xlsx', 'highcharts', 'highcharts/modules/exporting', 'highcharts/modules/export-data'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['ps-toolkit-ui'] = {}, global.ng.core, global._, global.moment, global.ng.router, global.rxjs, null, global.ng.forms, global.ng.common, global.ng.platformBrowser, global.ckeditor4Angular, global.FileSaver, global.XLSX, global.Highcharts, global.HighchartsExporting, global.HighchartsExportData));
-}(this, (function (exports, core, _, moment, router, rxjs, jqueryUi, forms, common, platformBrowser, ckeditor4Angular, FileSaver, XLSX, Highcharts, HighchartsExporting, HighchartsExportData) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('lodash'), require('jalali-moment'), require('@angular/router'), require('rxjs'), require('jquery-ui-dist/jquery-ui'), require('json-formatter-js'), require('@angular/forms'), require('@angular/common'), require('@angular/platform-browser'), require('ckeditor4-angular'), require('file-saver'), require('xlsx'), require('highcharts'), require('highcharts/modules/exporting'), require('highcharts/modules/export-data')) :
+    typeof define === 'function' && define.amd ? define('ps-toolkit-ui', ['exports', '@angular/core', 'lodash', 'jalali-moment', '@angular/router', 'rxjs', 'jquery-ui-dist/jquery-ui', 'json-formatter-js', '@angular/forms', '@angular/common', '@angular/platform-browser', 'ckeditor4-angular', 'file-saver', 'xlsx', 'highcharts', 'highcharts/modules/exporting', 'highcharts/modules/export-data'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['ps-toolkit-ui'] = {}, global.ng.core, global._, global.moment, global.ng.router, global.rxjs, null, global.JSONFormatter, global.ng.forms, global.ng.common, global.ng.platformBrowser, global.ckeditor4Angular, global.FileSaver, global.XLSX, global.Highcharts, global.HighchartsExporting, global.HighchartsExportData));
+}(this, (function (exports, core, _, moment, router, rxjs, jqueryUi, JSONFormatter, forms, common, platformBrowser, ckeditor4Angular, FileSaver, XLSX, Highcharts, HighchartsExporting, HighchartsExportData) { 'use strict';
+
+    function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
     function _interopNamespace(e) {
         if (e && e.__esModule) { return e; } else {
@@ -26,6 +28,7 @@
     }
 
     var moment__namespace = /*#__PURE__*/_interopNamespace(moment);
+    var JSONFormatter__default = /*#__PURE__*/_interopDefaultLegacy(JSONFormatter);
     var Highcharts__namespace = /*#__PURE__*/_interopNamespace(Highcharts);
     var HighchartsExporting__namespace = /*#__PURE__*/_interopNamespace(HighchartsExporting);
     var HighchartsExportData__namespace = /*#__PURE__*/_interopNamespace(HighchartsExportData);
@@ -463,39 +466,40 @@
         InputType[InputType["Check"] = 21] = "Check";
         InputType[InputType["TextArea"] = 22] = "TextArea";
         InputType[InputType["Label"] = 23] = "Label";
-        InputType[InputType["Button"] = 24] = "Button";
-        InputType[InputType["Submit"] = 25] = "Submit";
-        InputType[InputType["Icon"] = 26] = "Icon";
-        InputType[InputType["File"] = 27] = "File";
-        InputType[InputType["Url"] = 28] = "Url";
-        InputType[InputType["Price"] = 29] = "Price";
-        InputType[InputType["Radio"] = 30] = "Radio";
-        InputType[InputType["Tree"] = 31] = "Tree";
-        InputType[InputType["TreeRadio"] = 32] = "TreeRadio";
-        InputType[InputType["Plaque"] = 33] = "Plaque";
-        InputType[InputType["PlaqueM"] = 34] = "PlaqueM";
-        InputType[InputType["PlaqueF"] = 35] = "PlaqueF";
-        InputType[InputType["PlaqueG"] = 36] = "PlaqueG";
-        InputType[InputType["SelectAutoCompletePlaque"] = 37] = "SelectAutoCompletePlaque";
-        InputType[InputType["SelectAutoCompletePlaqueM"] = 38] = "SelectAutoCompletePlaqueM";
-        InputType[InputType["SelectAutoCompletePlaqueF"] = 39] = "SelectAutoCompletePlaqueF";
-        InputType[InputType["SelectAutoCompletePlaqueG"] = 40] = "SelectAutoCompletePlaqueG";
-        InputType[InputType["BankCard"] = 41] = "BankCard";
-        InputType[InputType["Constant"] = 42] = "Constant";
-        InputType[InputType["Hidden"] = 43] = "Hidden";
-        InputType[InputType["Table"] = 44] = "Table";
-        InputType[InputType["Tag"] = 45] = "Tag";
-        InputType[InputType["VehicleSearch"] = 46] = "VehicleSearch";
-        InputType[InputType["Vehicle"] = 47] = "Vehicle";
-        InputType[InputType["Finger"] = 48] = "Finger";
-        InputType[InputType["Color"] = 49] = "Color";
-        InputType[InputType["Star"] = 50] = "Star";
-        InputType[InputType["Toggle"] = 51] = "Toggle";
-        InputType[InputType["BillNumber"] = 52] = "BillNumber";
-        InputType[InputType["Ckeditor"] = 53] = "Ckeditor";
-        InputType[InputType["Uploader"] = 54] = "Uploader";
-        InputType[InputType["Slide"] = 55] = "Slide";
-        InputType[InputType["Username"] = 56] = "Username";
+        InputType[InputType["Pre"] = 24] = "Pre";
+        InputType[InputType["Button"] = 25] = "Button";
+        InputType[InputType["Submit"] = 26] = "Submit";
+        InputType[InputType["Icon"] = 27] = "Icon";
+        InputType[InputType["File"] = 28] = "File";
+        InputType[InputType["Url"] = 29] = "Url";
+        InputType[InputType["Price"] = 30] = "Price";
+        InputType[InputType["Radio"] = 31] = "Radio";
+        InputType[InputType["Tree"] = 32] = "Tree";
+        InputType[InputType["TreeRadio"] = 33] = "TreeRadio";
+        InputType[InputType["Plaque"] = 34] = "Plaque";
+        InputType[InputType["PlaqueM"] = 35] = "PlaqueM";
+        InputType[InputType["PlaqueF"] = 36] = "PlaqueF";
+        InputType[InputType["PlaqueG"] = 37] = "PlaqueG";
+        InputType[InputType["SelectAutoCompletePlaque"] = 38] = "SelectAutoCompletePlaque";
+        InputType[InputType["SelectAutoCompletePlaqueM"] = 39] = "SelectAutoCompletePlaqueM";
+        InputType[InputType["SelectAutoCompletePlaqueF"] = 40] = "SelectAutoCompletePlaqueF";
+        InputType[InputType["SelectAutoCompletePlaqueG"] = 41] = "SelectAutoCompletePlaqueG";
+        InputType[InputType["BankCard"] = 42] = "BankCard";
+        InputType[InputType["Constant"] = 43] = "Constant";
+        InputType[InputType["Hidden"] = 44] = "Hidden";
+        InputType[InputType["Table"] = 45] = "Table";
+        InputType[InputType["Tag"] = 46] = "Tag";
+        InputType[InputType["VehicleSearch"] = 47] = "VehicleSearch";
+        InputType[InputType["Vehicle"] = 48] = "Vehicle";
+        InputType[InputType["Finger"] = 49] = "Finger";
+        InputType[InputType["Color"] = 50] = "Color";
+        InputType[InputType["Star"] = 51] = "Star";
+        InputType[InputType["Toggle"] = 52] = "Toggle";
+        InputType[InputType["BillNumber"] = 53] = "BillNumber";
+        InputType[InputType["Ckeditor"] = 54] = "Ckeditor";
+        InputType[InputType["Uploader"] = 55] = "Uploader";
+        InputType[InputType["Slide"] = 56] = "Slide";
+        InputType[InputType["Username"] = 57] = "Username";
     })(exports.InputType || (exports.InputType = {}));
     (function (OperationEnum) {
         OperationEnum[OperationEnum["All"] = -1] = "All";
@@ -2017,6 +2021,9 @@
             if (token != null) {
                 h.AuthorizationCu = tokenCu;
             }
+            if (this.environment.apiVersion) {
+                h.ApiVersion = this.environment.apiVersion;
+            }
             if (!(data instanceof FormData)) {
                 data = HelperClass.jsonToFormData(data);
             }
@@ -5203,7 +5210,7 @@
     FormComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'lib-form',
-                    template: "<form [style]=\"form.style\" *ngIf=\"form\" [id]=\"form.id + 'Form'\" [className]=\"'form w-100 m-0' + (form.class ? ' ' + form.class : '')\">\r\n  <div *ngIf=\"form.displayLabel\" [className]=\"(form.subName ? '' : 'underline ') + 'title'\">{{this.form.l(this.form.name)}}</div>\r\n  <div *ngIf=\"form.displayLabel && form.subName\" class=\"sub-title underline\" [innerHTML]=\"this.form.l(this.form.subName)\"></div>\r\n  <div *ngIf=\"form.loading\" class=\"loading\">\r\n    <div class=\"text\" [innerHTML]=\"form.l('LoadingTable', 'Processing')\"></div>\r\n  </div>\r\n  <div *ngIf=\"!form.permission\" class=\"loading\">\r\n    <div class=\"text\"><i class=\"fas fa-shield-alt icon\"></i>{{ form.l(\"PermissionDenied\") }}</div>\r\n  </div>\r\n  <ng-content></ng-content>\r\n  <div class=\"inputs\">\r\n    <span *ngFor=\"let inp of form.inputs; let i = index\">\r\n      <lib-form-textbox (changeIndex)=\"changeIndex(i, $event)\" *ngIf=\"inp.visible && (inp.type == type.Text || inp.type == type.Password || inp.type == type.Mobile || inp.type == type.Username || inp.type == type.Phone || inp.type == type.Email || inp.type == type.NationalCode || inp.type == type.NationalNum || inp.type == type.NationalCodeNum || inp.type == type.EconomicNum || inp.type == type.Number || inp.type == type.Url || inp.type == type.PostalCode || inp.type == type.Price || inp.type == type.Sheba || inp.type == type.Color || inp.type == type.BillNumber)\" [inp]=\"inp\"></lib-form-textbox>\r\n      <lib-form-textarea (changeIndex)=\"changeIndex(i, $event)\" *ngIf=\"inp.visible && inp.type == type.TextArea\" [inp]=\"inp\"></lib-form-textarea>\r\n      <lib-form-checkbox (changeIndex)=\"changeIndex(i, $event)\" *ngIf=\"inp.visible && inp.type == type.Check\" [inp]=\"inp\"></lib-form-checkbox>\r\n      <lib-form-select (changeIndex)=\"changeIndex(i, $event)\" *ngIf=\"inp.visible && (inp.type == type.Select || inp.type == type.SelectSearch || inp.type == type.SelectSearchRadio || inp.type == type.SelectAutoComplete)\" [inp]=\"inp\" [inForm]=\"true\"></lib-form-select>\r\n      <lib-form-date (changeIndex)=\"changeIndex(i, $event)\" *ngIf=\"inp.visible && (inp.type == type.Date || inp.type == type.Month || inp.type == type.Year)\" [inp]=\"inp\" [inForm]=\"true\"></lib-form-date>\r\n      <lib-form-time (changeIndex)=\"changeIndex(i, $event)\" *ngIf=\"inp.visible && inp.type == type.Time\" [inp]=\"inp\" [inForm]=\"true\"></lib-form-time>\r\n      <lib-form-datetime (changeIndex)=\"changeIndex(i, $event)\" *ngIf=\"inp.visible && inp.type == type.DateTime\" [inp]=\"inp\" [inForm]=\"true\"></lib-form-datetime>\r\n      <lib-form-file (changeIndex)=\"changeIndex(i, $event)\" *ngIf=\"inp.visible && inp.type == type.File\" [inp]=\"inp\"></lib-form-file>\r\n      <lib-form-button (changeIndex)=\"changeIndex(i, $event)\" *ngIf=\"inp.visible && (inp.type == type.Button || inp.type == type.Submit)\" [inp]=\"inp\"></lib-form-button>\r\n      <lib-form-icon (changeIndex)=\"changeIndex(i, $event)\" *ngIf=\"inp.visible && inp.type == type.Icon\" [inp]=\"inp\"></lib-form-icon>\r\n      <lib-form-radio (changeIndex)=\"changeIndex(i, $event)\" *ngIf=\"inp.visible && inp.type == type.Radio\" [inp]=\"inp\"></lib-form-radio>\r\n      <lib-form-tree (changeIndex)=\"changeIndex(i, $event)\" *ngIf=\"inp.visible && (inp.type == type.Tree || inp.type == type.TreeRadio)\" [inp]=\"inp\"></lib-form-tree>\r\n      <lib-form-plaque (changeIndex)=\"changeIndex(i, $event)\" *ngIf=\"inp.visible && (inp.type == type.Plaque || inp.type == type.PlaqueM || inp.type == type.PlaqueF || inp.type == type.PlaqueG)\" [inp]=\"inp\"></lib-form-plaque>\r\n      <lib-form-plaque-select (changeIndex)=\"changeIndex(i, $event)\" *ngIf=\"inp.visible && (inp.type == type.SelectAutoCompletePlaque || inp.type == type.SelectAutoCompletePlaqueM || inp.type == type.SelectAutoCompletePlaqueF || inp.type == type.SelectAutoCompletePlaqueG)\" [inp]=\"inp\"></lib-form-plaque-select>\r\n      <lib-form-bank-card (changeIndex)=\"changeIndex(i, $event)\" *ngIf=\"inp.visible && inp.type == type.BankCard\" [inp]=\"inp\"></lib-form-bank-card>\r\n      <lib-form-vehicle-search (changeIndex)=\"changeIndex(i, $event)\" *ngIf=\"inp.visible && inp.type == type.VehicleSearch\" [inp]=\"inp\"></lib-form-vehicle-search>\r\n      <lib-form-vehicle (changeIndex)=\"changeIndex(i, $event)\" *ngIf=\"inp.visible && inp.type == type.Vehicle\" [inp]=\"inp\"></lib-form-vehicle>\r\n      <lib-form-finger (changeIndex)=\"changeIndex(i, $event)\" *ngIf=\"inp.visible && inp.type == type.Finger\" [inp]=\"inp\"></lib-form-finger>\r\n      <lib-form-star (changeIndex)=\"changeIndex(i, $event)\" *ngIf=\"inp.visible && inp.type == type.Star\" [inp]=\"inp\"></lib-form-star>\r\n      <lib-form-toggle (changeIndex)=\"changeIndex(i, $event)\" *ngIf=\"inp.visible && inp.type == type.Toggle\" [inp]=\"inp\"></lib-form-toggle>\r\n      <lib-form-table *ngIf=\"inp.visible && inp.type == type.Table\" [inp]=\"inp\"></lib-form-table>\r\n      <lib-form-tag (changeIndex)=\"changeIndex(i, $event)\" *ngIf=\"inp.visible && inp.type == type.Tag\" [inp]=\"inp\"></lib-form-tag>\r\n      <lib-form-ckeditor (changeIndex)=\"changeIndex(i, $event)\" *ngIf=\"inp.visible && inp.type == type.Ckeditor\" [inp]=\"inp\"></lib-form-ckeditor>\r\n      <lib-form-uploader (changeIndex)=\"changeIndex(i, $event)\" *ngIf=\"inp.visible && inp.type == type.Uploader\" [inp]=\"inp\"></lib-form-uploader>\r\n      <lib-form-slide (changeIndex)=\"changeIndex(i, $event)\" *ngIf=\"inp.visible && inp.type == type.Slide\" [inp]=\"inp\"></lib-form-slide>\r\n      <lib-form-hidden *ngIf=\"inp.type == type.Hidden\" [inp]=\"inp\"></lib-form-hidden>\r\n      <lib-form-label *ngIf=\"inp.visible && inp.type == type.Label\" [inp]=\"inp\"></lib-form-label>\r\n    </span>\r\n  </div>\r\n</form>\r\n",
+                    template: "<form [style]=\"form.style\" *ngIf=\"form\" [id]=\"form.id + 'Form'\" [className]=\"'form w-100 m-0' + (form.class ? ' ' + form.class : '')\">\r\n  <div *ngIf=\"form.displayLabel\" [className]=\"(form.subName ? '' : 'underline ') + 'title'\">{{this.form.l(this.form.name)}}</div>\r\n  <div *ngIf=\"form.displayLabel && form.subName\" class=\"sub-title underline\" [innerHTML]=\"this.form.l(this.form.subName)\"></div>\r\n  <div *ngIf=\"form.loading\" class=\"loading\">\r\n    <div class=\"text\" [innerHTML]=\"form.l('LoadingTable', 'Processing')\"></div>\r\n  </div>\r\n  <div *ngIf=\"!form.permission\" class=\"loading\">\r\n    <div class=\"text\"><i class=\"fas fa-shield-alt icon\"></i>{{ form.l(\"PermissionDenied\") }}</div>\r\n  </div>\r\n  <ng-content></ng-content>\r\n  <div class=\"inputs\">\r\n    <span *ngFor=\"let inp of form.inputs; let i = index\">\r\n      <lib-form-textbox (changeIndex)=\"changeIndex(i, $event)\" *ngIf=\"inp.visible && (inp.type == type.Text || inp.type == type.Password || inp.type == type.Mobile || inp.type == type.Username || inp.type == type.Phone || inp.type == type.Email || inp.type == type.NationalCode || inp.type == type.NationalNum || inp.type == type.NationalCodeNum || inp.type == type.EconomicNum || inp.type == type.Number || inp.type == type.Url || inp.type == type.PostalCode || inp.type == type.Price || inp.type == type.Sheba || inp.type == type.Color || inp.type == type.BillNumber)\" [inp]=\"inp\"></lib-form-textbox>\r\n      <lib-form-textarea (changeIndex)=\"changeIndex(i, $event)\" *ngIf=\"inp.visible && inp.type == type.TextArea\" [inp]=\"inp\"></lib-form-textarea>\r\n      <lib-form-checkbox (changeIndex)=\"changeIndex(i, $event)\" *ngIf=\"inp.visible && inp.type == type.Check\" [inp]=\"inp\"></lib-form-checkbox>\r\n      <lib-form-select (changeIndex)=\"changeIndex(i, $event)\" *ngIf=\"inp.visible && (inp.type == type.Select || inp.type == type.SelectSearch || inp.type == type.SelectSearchRadio || inp.type == type.SelectAutoComplete)\" [inp]=\"inp\" [inForm]=\"true\"></lib-form-select>\r\n      <lib-form-date (changeIndex)=\"changeIndex(i, $event)\" *ngIf=\"inp.visible && (inp.type == type.Date || inp.type == type.Month || inp.type == type.Year)\" [inp]=\"inp\" [inForm]=\"true\"></lib-form-date>\r\n      <lib-form-time (changeIndex)=\"changeIndex(i, $event)\" *ngIf=\"inp.visible && inp.type == type.Time\" [inp]=\"inp\" [inForm]=\"true\"></lib-form-time>\r\n      <lib-form-datetime (changeIndex)=\"changeIndex(i, $event)\" *ngIf=\"inp.visible && inp.type == type.DateTime\" [inp]=\"inp\" [inForm]=\"true\"></lib-form-datetime>\r\n      <lib-form-file (changeIndex)=\"changeIndex(i, $event)\" *ngIf=\"inp.visible && inp.type == type.File\" [inp]=\"inp\"></lib-form-file>\r\n      <lib-form-button (changeIndex)=\"changeIndex(i, $event)\" *ngIf=\"inp.visible && (inp.type == type.Button || inp.type == type.Submit)\" [inp]=\"inp\"></lib-form-button>\r\n      <lib-form-icon (changeIndex)=\"changeIndex(i, $event)\" *ngIf=\"inp.visible && inp.type == type.Icon\" [inp]=\"inp\"></lib-form-icon>\r\n      <lib-form-radio (changeIndex)=\"changeIndex(i, $event)\" *ngIf=\"inp.visible && inp.type == type.Radio\" [inp]=\"inp\"></lib-form-radio>\r\n      <lib-form-tree (changeIndex)=\"changeIndex(i, $event)\" *ngIf=\"inp.visible && (inp.type == type.Tree || inp.type == type.TreeRadio)\" [inp]=\"inp\"></lib-form-tree>\r\n      <lib-form-plaque (changeIndex)=\"changeIndex(i, $event)\" *ngIf=\"inp.visible && (inp.type == type.Plaque || inp.type == type.PlaqueM || inp.type == type.PlaqueF || inp.type == type.PlaqueG)\" [inp]=\"inp\"></lib-form-plaque>\r\n      <lib-form-plaque-select (changeIndex)=\"changeIndex(i, $event)\" *ngIf=\"inp.visible && (inp.type == type.SelectAutoCompletePlaque || inp.type == type.SelectAutoCompletePlaqueM || inp.type == type.SelectAutoCompletePlaqueF || inp.type == type.SelectAutoCompletePlaqueG)\" [inp]=\"inp\"></lib-form-plaque-select>\r\n      <lib-form-bank-card (changeIndex)=\"changeIndex(i, $event)\" *ngIf=\"inp.visible && inp.type == type.BankCard\" [inp]=\"inp\"></lib-form-bank-card>\r\n      <lib-form-vehicle-search (changeIndex)=\"changeIndex(i, $event)\" *ngIf=\"inp.visible && inp.type == type.VehicleSearch\" [inp]=\"inp\"></lib-form-vehicle-search>\r\n      <lib-form-vehicle (changeIndex)=\"changeIndex(i, $event)\" *ngIf=\"inp.visible && inp.type == type.Vehicle\" [inp]=\"inp\"></lib-form-vehicle>\r\n      <lib-form-finger (changeIndex)=\"changeIndex(i, $event)\" *ngIf=\"inp.visible && inp.type == type.Finger\" [inp]=\"inp\"></lib-form-finger>\r\n      <lib-form-star (changeIndex)=\"changeIndex(i, $event)\" *ngIf=\"inp.visible && inp.type == type.Star\" [inp]=\"inp\"></lib-form-star>\r\n      <lib-form-toggle (changeIndex)=\"changeIndex(i, $event)\" *ngIf=\"inp.visible && inp.type == type.Toggle\" [inp]=\"inp\"></lib-form-toggle>\r\n      <lib-form-table *ngIf=\"inp.visible && inp.type == type.Table\" [inp]=\"inp\"></lib-form-table>\r\n      <lib-form-tag (changeIndex)=\"changeIndex(i, $event)\" *ngIf=\"inp.visible && inp.type == type.Tag\" [inp]=\"inp\"></lib-form-tag>\r\n      <lib-form-ckeditor (changeIndex)=\"changeIndex(i, $event)\" *ngIf=\"inp.visible && inp.type == type.Ckeditor\" [inp]=\"inp\"></lib-form-ckeditor>\r\n      <lib-form-uploader (changeIndex)=\"changeIndex(i, $event)\" *ngIf=\"inp.visible && inp.type == type.Uploader\" [inp]=\"inp\"></lib-form-uploader>\r\n      <lib-form-slide (changeIndex)=\"changeIndex(i, $event)\" *ngIf=\"inp.visible && inp.type == type.Slide\" [inp]=\"inp\"></lib-form-slide>\r\n      <lib-form-hidden *ngIf=\"inp.type == type.Hidden\" [inp]=\"inp\"></lib-form-hidden>\r\n      <lib-form-label *ngIf=\"inp.visible && inp.type == type.Label\" [inp]=\"inp\"></lib-form-label>\r\n      <lib-form-pre *ngIf=\"inp.visible && inp.type == type.Pre\" [inp]=\"inp\"></lib-form-pre>\r\n    </span>\r\n  </div>\r\n</form>\r\n",
                     styles: [".form{border-radius:var(--border-radius-base);padding:20px;position:relative}.form>.title{font-size:16px;font-weight:var(--font-bold);height:40px}.form>.sub-title,.form>.title{float:right;line-height:30px;margin-bottom:10px;position:relative;text-align:right;width:100%}.form>.sub-title{color:var(--black-light);font-size:12px;font-weight:var(--font-light);height:30px}.form .loading{background-color:#fff;border-radius:var(--border-radius-base);height:100%;right:0;top:0;z-index:104}.form .loading,.form .loading .text{position:absolute;text-align:center;width:100%}.form .loading .text{font-weight:var(--font-bold);height:35px;line-height:35px;top:calc(50% - 20px)}::ng-deep .form .loading .icon{font-size:20px!important;line-height:30px;margin-left:5px;position:relative;top:5px}.form-buttons,.form-error{float:right;width:100%}.form-error{color:var(--red-light);font-size:11px;height:15px;line-height:8px;margin-top:10px;padding:0 10px;position:relative;text-align:center}.form-error .message{float:left;width:calc(100% - 40px)}.form-error .icon{float:right;height:20px;line-height:6px;right:0;top:0;width:40px}.form .inputs{margin:0 -15px}"]
                 },] }
     ];
@@ -5245,6 +5252,38 @@
         inp: [{ type: core.Input }]
     };
 
+    var FormPreComponent = /** @class */ (function () {
+        function FormPreComponent() {
+        }
+        FormPreComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.inp.setValue = function (v) {
+                var formatter = new JSONFormatter__default['default'](typeof v === 'string' ? JSON.parse(v) : v, 2, {
+                    theme: 'dark'
+                });
+                _this.jsonContainer.nativeElement.appendChild(formatter.render());
+            };
+            this.inp.isValid = function () {
+                return true;
+            };
+            this.inp.clear = function () {
+            };
+        };
+        return FormPreComponent;
+    }());
+    FormPreComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'lib-form-pre',
+                    template: "<div #jsonContainer [id]=\"inp.id + 'PreInput'\" [className]=\"'form-input pre w-100' + ' ' + inp.class\">\r\n</div>\r\n",
+                    styles: [".form-input.pre{-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;cursor:default;font-size:12px;line-height:30px;min-height:30px!important;padding:0 15px;position:relative;text-align:center}"]
+                },] }
+    ];
+    FormPreComponent.ctorParameters = function () { return []; };
+    FormPreComponent.propDecorators = {
+        jsonContainer: [{ type: core.ViewChild, args: ['jsonContainer', { static: true },] }],
+        inp: [{ type: core.Input }]
+    };
+
     var FormPlaqueSelectComponent = /** @class */ (function () {
         function FormPlaqueSelectComponent() {
             this.changeIndex = new core.EventEmitter();
@@ -9092,7 +9131,7 @@
                         FormTimeComponent, NotificationComponent, FormFingerComponent, FormVehicleSearchComponent, FormCkeditorComponent, FormUploaderComponent,
                         LayoutComponent, LoadingComponent, NotfoundComponent, FormVehicleComponent, FormHiddenComponent, CalendarComponent, FormToggleComponent,
                         ClockComponent, ChartComponent, FormTagComponent, ErrorComponent, LoginComponent, FormStarComponent, FormSlideComponent,
-                        SafeStylePipe, SafeHtmlPipe,
+                        SafeStylePipe, SafeHtmlPipe, FormPreComponent
                     ],
                     imports: [
                         common.CommonModule,
@@ -9110,6 +9149,7 @@
                         FormTimeComponent, NotificationComponent, FormFingerComponent, FormVehicleSearchComponent, FormCkeditorComponent, FormUploaderComponent,
                         LayoutComponent, LoadingComponent, NotfoundComponent, FormVehicleComponent, FormHiddenComponent, CalendarComponent, FormToggleComponent,
                         ClockComponent, ChartComponent, FormTagComponent, ErrorComponent, LoginComponent, FormStarComponent, FormSlideComponent,
+                        FormPreComponent
                     ]
                 },] }
     ];
@@ -10316,6 +10356,7 @@
     exports.ɵn = LoginComponent;
     exports.ɵo = SafeStylePipe;
     exports.ɵp = SafeHtmlPipe;
+    exports.ɵq = FormPreComponent;
 
     Object.defineProperty(exports, '__esModule', { value: true });