ps-toolkit-ui 1.21.73 → 1.21.82

package/fesm2015/ps-toolkit-ui.js

@@ -1,6 +1,4 @@
 import { Inject, Component, Input, Injectable, EventEmitter, Output, ViewChild, HostListener, Pipe, NgModule } from '@angular/core';
-import * as $$1 from 'jquery';
-import { ajax, param } from 'jquery';
 import { merge, get, groupBy, set, cloneDeep } from 'lodash';
 import * as moment from 'jalali-moment';
 import { now } from 'jalali-moment';
@@ -35,9 +33,9 @@ class AccordionComponent {
     constructor() {
     }
     toggle(e) {
-        const chOpen = $$1(e.target).closest('.accordion').find('.content.open');
+        const chOpen = $(e.target).closest('.accordion').find('.content.open');
         const ocOpen = chOpen.closest('.accordion-item').find('.header > .icon');
-        const ch = $$1(e.target).closest('.accordion-item').find(' > .content');
+        const ch = $(e.target).closest('.accordion-item').find(' > .content');
         const oc = ch.closest('.accordion-item').find(' > .header > .icon');
         if (ch.hasClass('open')) {
             ch.removeClass('open');
@@ -442,39 +440,40 @@ var InputType;
     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";
 })(InputType || (InputType = {}));
 var OperationEnum;
 (function (OperationEnum) {
@@ -638,7 +637,7 @@ class HeaderComponent {
     }
     get type() { return InputType; }
     showUserDropDown(e) {
-        $$1(e.target).closest('#Header').find('.user-drop-down').slideToggle(100);
+        $(e.target).closest('#Header').find('.user-drop-down').slideToggle(100);
     }
 }
 HeaderComponent.decorators = [
@@ -1137,9 +1136,9 @@ class HelperClass {
     static addNotification(m, e = true) {
         const id = HelperClass.random(20);
         // tslint:disable-next-line
-        $$1('#Notifications').append('<div id="' + id + '" class="con"><div class="item ' + (e ? 'error' : 'success') + '"><i class="fas fa-times"></i><div>' + m + '</div></div></div>');
+        $('#Notifications').append('<div id="' + id + '" class="con"><div class="item ' + (e ? 'error' : 'success') + '"><i class="fas fa-times"></i><div>' + m + '</div></div></div>');
         setTimeout(() => {
-            const d = $$1('#' + id);
+            const d = $('#' + id);
             d.fadeOut(300, () => {
                 d.remove();
             });
@@ -1225,7 +1224,7 @@ class HelperClass {
                 if (inp.type === InputType.Text) {
                     inp.setValue(s, false);
                     setTimeout(() => {
-                        $$1('#' + inp.id + 'TextInput .control').click();
+                        $('#' + inp.id + 'TextInput .control').click();
                     }, 100);
                 }
                 if (inp.onBarcodeReaderChange !== null) {
@@ -1478,6 +1477,9 @@ class RequestClass {
         if (token != null) {
             h.AuthorizationCu = tokenCu;
         }
+        if (this.environment.apiVersion) {
+            h.ApiVersion = this.environment.apiVersion;
+        }
         if (!(data instanceof FormData)) {
             data = HelperClass.jsonToFormData(data);
         }
@@ -1495,7 +1497,7 @@ class RequestClass {
         if (request != null) {
             request.abort();
         }
-        request = ajax(settings);
+        request = $.ajax(settings);
         request.done((response) => {
             if (!this.environment.production) {
                 console.log('%c' + Method[method].toString() + ' : ' + url, 'background: #2f6054; color: white', response);
@@ -2164,13 +2166,13 @@ class AccordionRowClass {
     }
     toggle() {
         setTimeout(() => {
-            $$1('#AccordionRow' + this.id + ' > .header').click();
+            $('#AccordionRow' + this.id + ' > .header').click();
         }, 100);
     }
     open() {
         setTimeout(() => {
-            if (!$$1('#AccordionRow' + this.id + ' > .content').hasClass('open')) {
-                $$1('#AccordionRow' + this.id + ' > .header').click();
+            if (!$('#AccordionRow' + this.id + ' > .content').hasClass('open')) {
+                $('#AccordionRow' + this.id + ' > .header').click();
             }
         }, 100);
     }
@@ -2207,7 +2209,7 @@ class SidebarItemComponent {
         };
     }
     openClose(e) {
-        const op = $$1(e.target).closest('.user-sidebar-item');
+        const op = $(e.target).closest('.user-sidebar-item');
         if (op.hasClass('open')) {
             op.removeClass('open');
             op.find(' > .children').slideUp();
@@ -2229,7 +2231,7 @@ class SidebarItemComponent {
         return false;
     }
     closeSidebar() {
-        $$1('#Sidebar').addClass('open').removeClass('close');
+        $('#Sidebar').addClass('open').removeClass('close');
     }
 }
 SidebarItemComponent.decorators = [
@@ -2353,7 +2355,7 @@ class SidebarComponent {
         return null;
     }
     toggleSidebar() {
-        $$1('#Sidebar').toggleClass('open').toggleClass('close');
+        $('#Sidebar').toggleClass('open').toggleClass('close');
     }
 }
 SidebarComponent.decorators = [
@@ -2583,13 +2585,13 @@ class TableRowComponent {
     get type() { return InputType; }
     get tableOptionType() { return TableOptionType; }
     mouseOut(e) {
-        $$1(e.target).find('.options-con').removeClass('show-group');
+        $(e.target).find('.options-con').removeClass('show-group');
     }
     ngOnInit() {
         this.row.subTable = this.table.subTable != null ? HelperClass.clone(this.table.subTable) : null;
         this.group = new InputClass(this.table.environment, this.table.l, 'ShowOptions', 'fas fa-ellipsis-vertical', InputType.Icon, 'blue m-h-5 h-25 d-ib va-m f-u');
         this.group.onFocusIn = (e) => {
-            $$1(e.target).closest('.options-con').addClass('show-group');
+            $(e.target).closest('.options-con').addClass('show-group');
         };
         this.group.onFocusOut = (e) => {
             // $(e.target).closest('.options-con').removeClass('show-group');
@@ -2614,8 +2616,8 @@ class TableRowComponent {
             this.showChildren = new InputClass(this.table.environment, this.table.l, this.table.name + 'SubsetTitle', 'fad fa-angle-left f-s-22', this.row.Data.CountChild > 0 || (!this.table.childrenAutoLoad && this.children.length > 0) || this.row.subTable != null ? InputType.Icon : InputType.Hidden, 'h-25 m-h-5 d-ib va-m f-u');
             this.showChildren.onClick = () => {
                 var _a, _b;
-                if ($$1(this.childrenDiv.nativeElement).is(':visible')) {
-                    $$1(this.childrenDiv.nativeElement).slideUp();
+                if ($(this.childrenDiv.nativeElement).is(':visible')) {
+                    $(this.childrenDiv.nativeElement).slideUp();
                     this.showChildren.icon = 'fad fa-angle-left f-s-22';
                 }
                 else if (this.table.hasChildren && this.children.length === 0) {
@@ -2631,11 +2633,11 @@ class TableRowComponent {
                     ps.Accesses = (_b = (_a = this.table.permissions.Accesses) === null || _a === void 0 ? void 0 : _a.filter(x => x.ParentId === acc.Id)) !== null && _b !== void 0 ? _b : [];
                     this.row.subTable.permissions = ps;
                     this.row.subTable.set();
-                    $$1(this.childrenDiv.nativeElement).slideDown();
+                    $(this.childrenDiv.nativeElement).slideDown();
                     this.showChildren.icon = 'fad fa-angle-down f-s-22';
                 }
                 else {
-                    $$1(this.childrenDiv.nativeElement).slideDown();
+                    $(this.childrenDiv.nativeElement).slideDown();
                     this.showChildren.icon = 'fad fa-angle-down f-s-22';
                 }
             };
@@ -2656,7 +2658,7 @@ class TableRowComponent {
         new RequestClass(this.table.environment, this.table.l).send(this.table.url + `/${p}`, Method.Post, data, this.showChildren, (result) => {
             this.children = result.List;
             setTimeout(() => {
-                $$1(this.childrenDiv.nativeElement).slideDown();
+                $(this.childrenDiv.nativeElement).slideDown();
                 this.showChildren.icon = 'fad fa-angle-down f-s-22';
             }, 50);
         }, () => { });
@@ -2677,14 +2679,14 @@ class TableRowComponent {
         if (this.table.hasChildren) {
             setTimeout(() => {
                 // @ts-ignore
-                $$1(this.childrenDiv.nativeElement).sortable({
+                $(this.childrenDiv.nativeElement).sortable({
                     axis: 'y',
                     items: '.row',
                     handle: '> .handle-con > .handle.handle-sortable',
                     update: () => {
                         const data = [];
                         // @ts-ignore
-                        $$1(this.childrenDiv.nativeElement).sortable('toArray', { attribute: 'data-id' }).forEach(x => {
+                        $(this.childrenDiv.nativeElement).sortable('toArray', { attribute: 'data-id' }).forEach(x => {
                             data.push(parseInt(x, 10));
                         });
                         const p = new PermissionClass();
@@ -2950,7 +2952,7 @@ class TableRowComponent {
     }
     selectRow(e) {
         if (this.table.withSelect) {
-            if ($$1(e.target).closest('.handle-con').hasClass('handle-con') || $$1(e.target).closest('.options-cell').hasClass('options-cell')) {
+            if ($(e.target).closest('.handle-con').hasClass('handle-con') || $(e.target).closest('.options-cell').hasClass('options-cell')) {
                 return;
             }
             const s = this.table.rows.find(x => x.selected);
@@ -2965,7 +2967,7 @@ class TableRowComponent {
     }
     dblclickRow(e) {
         if (this.table.withSelect) {
-            if ($$1(e.target).closest('.handle-con').hasClass('handle-con') || $$1(e.target).closest('.options-cell').hasClass('options-cell')) {
+            if ($(e.target).closest('.handle-con').hasClass('handle-con') || $(e.target).closest('.options-cell').hasClass('options-cell')) {
                 return;
             }
             const s = this.table.rows.find(x => x.selected);
@@ -3028,8 +3030,8 @@ class ModalClass {
         if (this.onShow) {
             this.onShow(data);
         }
-        $$1('body').addClass('open-modal');
-        $$1('#' + this.id + 'Modal').fadeIn(300, () => {
+        $('body').addClass('open-modal');
+        $('#' + this.id + 'Modal').fadeIn(300, () => {
             if (this.form != null) {
                 if (this.form.onShowModal) {
                     this.form.onShowModal();
@@ -3039,8 +3041,8 @@ class ModalClass {
         });
     }
     hide() {
-        $$1('body').removeClass('open-modal');
-        $$1('#' + this.id + 'Modal').fadeOut(300, () => {
+        $('body').removeClass('open-modal');
+        $('#' + this.id + 'Modal').fadeOut(300, () => {
             if (this.onHide) {
                 this.onHide();
             }
@@ -3128,7 +3130,7 @@ class TableComponent {
             this.table.load(this.reload);
         };
         this.export.onClick = () => {
-            $$1(this.exportDropDown.nativeElement).slideToggle();
+            $(this.exportDropDown.nativeElement).slideToggle();
         };
         this.pdf.onClick = () => {
             this.exportTable(TableExportType.Pdf, this.pdf);
@@ -3143,12 +3145,12 @@ class TableComponent {
             this.exportTable(TableExportType.Print, this.print);
         };
         this.maximum.onClick = () => {
-            $$1(this.tableDiv.nativeElement).toggleClass('maximum');
+            $(this.tableDiv.nativeElement).toggleClass('maximum');
             this.maximum.icon = this.maximum.name === 'Minimum' ? 'fad fa-arrows-maximize' : 'fad fa-arrows-minimize';
             this.maximum.name = this.maximum.name === 'Minimum' ? 'Maximum' : 'Minimum';
         };
         this.expertSearch.onClick = () => {
-            $$1(this.tableDiv.nativeElement).addClass('show-expert-search');
+            $(this.tableDiv.nativeElement).addClass('show-expert-search');
         };
         this.table.showConfirm = (l, url, data, accept) => {
             this.confirm.show(l, url, data, accept);
@@ -3208,14 +3210,14 @@ class TableComponent {
     setSortable() {
         setTimeout(() => {
             // @ts-ignore
-            $$1(this.rows.nativeElement).sortable({
+            $(this.rows.nativeElement).sortable({
                 axis: 'y',
                 items: '.row',
                 handle: '> .handle-con > .handle.handle-sortable',
                 update: () => {
                     const data = [];
                     // @ts-ignore
-                    $$1(this.rows.nativeElement).sortable('toArray', { attribute: 'data-id' }).forEach(x => {
+                    $(this.rows.nativeElement).sortable('toArray', { attribute: 'data-id' }).forEach(x => {
                         data.push(parseInt(x, 10));
                     });
                     const p = new PermissionClass();
@@ -3253,7 +3255,7 @@ class TableComponent {
         this.confirm.show(this.table.l(e.action + 'Confirm'), e.url, e.data, e.accept);
     }
     changeSort(e, s) {
-        if ($$1(e.target).closest('.header-search').hasClass('header-search')) {
+        if ($(e.target).closest('.header-search').hasClass('header-search')) {
             return;
         }
         this.table.sortType = this.table.sort === s ? this.table.sortType === 'ASC' ? 'DESC' : null : 'ASC';
@@ -3264,8 +3266,8 @@ class TableComponent {
         return this.table.optionsActions.filter(x => x instanceof ModalClass);
     }
     hideExpertSearch(e) {
-        if (this.table.expertSearch && $$1(e.target).hasClass('search-form')) {
-            $$1(this.tableDiv.nativeElement).removeClass('show-expert-search');
+        if (this.table.expertSearch && $(e.target).hasClass('search-form')) {
+            $(this.tableDiv.nativeElement).removeClass('show-expert-search');
         }
     }
 }
@@ -3427,10 +3429,10 @@ class FormBankCardComponent {
     setIcon() {
         const b = this.banks.filter(x => { var _a, _b; return x.startWith.includes(((_a = this.part1.data()) !== null && _a !== void 0 ? _a : '').toString() + ((_b = this.part2.data()) !== null && _b !== void 0 ? _b : '').toString().substring(0, 2)); });
         if (b.length > 0) {
-            $$1(this.inputIcon.nativeElement).removeClass('fa-money-check').addClass(b[0].name);
+            $(this.inputIcon.nativeElement).removeClass('fa-money-check').addClass(b[0].name);
         }
         else {
-            $$1(this.inputIcon.nativeElement).addClass('fa-money-check').removeClass(this.banks.map(x => x.name));
+            $(this.inputIcon.nativeElement).addClass('fa-money-check').removeClass(this.banks.map(x => x.name));
         }
     }
     changeFocus(p, a) {
@@ -3511,7 +3513,7 @@ class FormButtonComponent {
         };
     }
     onFocusIn() {
-        $$1(this.inputBase.nativeElement).focus();
+        $(this.inputBase.nativeElement).focus();
     }
     onClick(e) {
         if (e.screenX && e.screenX !== 0 && e.screenY && e.screenY !== 0) {
@@ -3689,7 +3691,7 @@ class FormDateComponent {
             this.openCalendar();
         };
         this.inp.focusOut = () => {
-            $$1(this.inputBase.nativeElement).blur();
+            $(this.inputBase.nativeElement).blur();
         };
     }
     setInpValue(v) {
@@ -3814,16 +3816,16 @@ class FormDateComponent {
     }
     openCalendar() {
         this.setPosition();
-        $$1(this.inputBase.nativeElement).focus();
+        $(this.inputBase.nativeElement).focus();
     }
     onKeyDown(e) {
         const code = e.keyCode || e.which;
         if (code === 9 || code === 13) {
             e.preventDefault();
-            $$1(this.inputDiv.nativeElement).removeClass('top');
+            $(this.inputDiv.nativeElement).removeClass('top');
             this.changeIndex.emit(code === 9 ? e.shiftKey ? 'ShiftTab' : 'Tab' : e.shiftKey ? 'ShiftEnter' : 'Enter');
             if (!this.inForm) {
-                $$1(this.inputBase.nativeElement).blur();
+                $(this.inputBase.nativeElement).blur();
             }
         }
     }
@@ -3861,7 +3863,7 @@ class FormDateComponent {
         }
     }
     onFocusOut() {
-        $$1(this.inputDiv.nativeElement).removeClass('top');
+        $(this.inputDiv.nativeElement).removeClass('top');
         this.inp.search = this.inp.value != null ?
             (this.inp.type === InputType.Year ?
                 moment(this.inp.value, 'jYYYY/jMM/jDD').locale('fa').format('jYYYY') :
@@ -3876,10 +3878,10 @@ class FormDateComponent {
         const offsetOfBottom = window.innerHeight - rect.bottom;
         const height = this.inputCalendarDiv.nativeElement.offsetHeight;
         if (offsetOfBottom < height) {
-            $$1(this.inputDiv.nativeElement).addClass('top');
+            $(this.inputDiv.nativeElement).addClass('top');
         }
         else {
-            $$1(this.inputDiv.nativeElement).removeClass('top');
+            $(this.inputDiv.nativeElement).removeClass('top');
         }
     }
     selectDate(d) {
@@ -3894,10 +3896,10 @@ class FormDateComponent {
         d.selected = true;
         this.cSearch = this.inp.search;
         setTimeout(() => {
-            $$1(this.inputDiv.nativeElement).removeClass('top');
+            $(this.inputDiv.nativeElement).removeClass('top');
             this.changeIndex.emit('Tab');
             if (!this.inForm) {
-                $$1(this.inputBase.nativeElement).blur();
+                $(this.inputBase.nativeElement).blur();
             }
         }, 10);
         if (this.inp.onChange) {
@@ -4117,7 +4119,7 @@ class FormFileComponent {
         });
     }
     onClick() {
-        $$1(this.inputBase.nativeElement).focus();
+        $(this.inputBase.nativeElement).focus();
     }
     onChange(e) {
         this.inp.error = null;
@@ -4136,7 +4138,7 @@ class FormFileComponent {
         }
     }
     onFocusIn() {
-        $$1(this.inputBase.nativeElement).focus();
+        $(this.inputBase.nativeElement).focus();
     }
     title() {
         if (this.inp.value == null || (this.inp.value instanceof Array && this.inp.value.length === 0)) {
@@ -4178,7 +4180,7 @@ class FormIconComponent {
         };
     }
     onFocusIn(e = null) {
-        $$1(this.inputBase.nativeElement).focus();
+        $(this.inputBase.nativeElement).focus();
         if (this.inp.onFocusIn) {
             this.inp.onFocusIn(e);
         }
@@ -4285,7 +4287,7 @@ class FormComponent {
 FormComponent.decorators = [
     { type: 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}"]
             },] }
 ];
@@ -4325,6 +4327,37 @@ FormLabelComponent.propDecorators = {
     inp: [{ type: Input }]
 };
 
+class FormPreComponent {
+    constructor() {
+    }
+    ngOnInit() {
+        this.inp.setValue = (v) => {
+            this.inp.value = typeof v === 'string' ? JSON.stringify(v, null, 2) : v;
+        };
+        this.inp.isValid = () => {
+            return true;
+        };
+        this.inp.clear = () => {
+        };
+    }
+    onClick() {
+        if (this.inp.onClick) {
+            this.inp.onClick(this.inp);
+        }
+    }
+}
+FormPreComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'lib-form-pre',
+                template: "<pre [id]=\"inp.id + 'PreInput'\" (click)=\"onClick()\" #inputDiv [className]=\"'form-input pre w-100' + ' ' + inp.class\" [innerHTML]=\"inp.l(inp.value)\">\r\n</pre>\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 = () => [];
+FormPreComponent.propDecorators = {
+    inp: [{ type: Input }]
+};
+
 class FormPlaqueSelectComponent {
     constructor() {
         this.changeIndex = new EventEmitter();
@@ -4505,8 +4538,8 @@ class FormPlaqueSelectComponent {
         };
     }
     onFocusOutCloseOptions(e) {
-        if ($$1(e.relatedTarget).length !== 0 || $$1(e.rangeParent).length !== 0) {
-            if (!$$1(e.relatedTarget).closest('.form-input.plaque-select').hasClass('plaque-select') && !$$1(e.rangeParent).closest('.form-input.plaque-select').hasClass('plaque-select')) {
+        if ($(e.relatedTarget).length !== 0 || $(e.rangeParent).length !== 0) {
+            if (!$(e.relatedTarget).closest('.form-input.plaque-select').hasClass('plaque-select') && !$(e.rangeParent).closest('.form-input.plaque-select').hasClass('plaque-select')) {
                 if (this.open) {
                     this.closeOptions();
                 }
@@ -4539,7 +4572,7 @@ class FormPlaqueSelectComponent {
     closeOptions() {
         setTimeout(() => {
             this.open = false;
-            $$1(this.inputDiv.nativeElement).removeClass('top');
+            $(this.inputDiv.nativeElement).removeClass('top');
             this.removeHover();
             if (this.inp.value === null) {
                 this.inp.search = '';
@@ -4557,10 +4590,10 @@ class FormPlaqueSelectComponent {
         const offsetOfBottom = window.innerHeight - rect.bottom;
         const height = this.inputOptionsDiv.nativeElement.offsetHeight;
         if (offsetOfBottom < height) {
-            $$1(this.inputDiv.nativeElement).addClass('top');
+            $(this.inputDiv.nativeElement).addClass('top');
         }
         else {
-            $$1(this.inputDiv.nativeElement).removeClass('top');
+            $(this.inputDiv.nativeElement).removeClass('top');
         }
     }
     onKeyDown(e) {
@@ -5107,7 +5140,7 @@ class FormRadioComponent {
         }
     }
     onFocusIn() {
-        $$1(this.inputBase.nativeElement).focus();
+        $(this.inputBase.nativeElement).focus();
     }
 }
 FormRadioComponent.decorators = [
@@ -5221,7 +5254,7 @@ class FormSelectComponent {
             return d;
         };
         this.inp.focusOut = () => {
-            $$1(this.inputBase.nativeElement).blur();
+            $(this.inputBase.nativeElement).blur();
         };
         if (this.inp.hasBarcodeReader) {
             HelperClass.setBarcodeReader(this.inp);
@@ -5259,14 +5292,14 @@ class FormSelectComponent {
     openOptions() {
         this.setPosition();
         this.setHoverCenter();
-        $$1(this.inputBase.nativeElement).focus();
+        $(this.inputBase.nativeElement).focus();
     }
     onFocusOut() {
         this.closeOptions();
     }
     closeOptions() {
         setTimeout(() => {
-            $$1(this.inputDiv.nativeElement).removeClass('top');
+            $(this.inputDiv.nativeElement).removeClass('top');
             this.removeHover();
             if (this.inp.value === null) {
                 if (!this.inp.addNew) {
@@ -5287,10 +5320,10 @@ class FormSelectComponent {
         const offsetOfBottom = window.innerHeight - rect.bottom;
         const height = this.inputOptionsDiv.nativeElement.offsetHeight;
         if (offsetOfBottom < height) {
-            $$1(this.inputDiv.nativeElement).addClass('top');
+            $(this.inputDiv.nativeElement).addClass('top');
         }
         else {
-            $$1(this.inputDiv.nativeElement).removeClass('top');
+            $(this.inputDiv.nativeElement).removeClass('top');
         }
     }
     setOptions(r = this.inp.options) {
@@ -5308,7 +5341,7 @@ class FormSelectComponent {
         }
         else if (code === 13) {
             e.preventDefault();
-            if ($$1(this.inputBase.nativeElement).is(':focus')) {
+            if ($(this.inputBase.nativeElement).is(':focus')) {
                 const h = this.getSelectedHover();
                 if (!h) {
                     if (this.inp.addNew) {
@@ -5332,7 +5365,7 @@ class FormSelectComponent {
         }
     }
     toggleOption(e) {
-        if ((this.inp.multiple || this.inp.type === InputType.SelectSearchRadio) && $$1(e.target).closest('.option').hasClass('option')) {
+        if ((this.inp.multiple || this.inp.type === InputType.SelectSearchRadio) && $(e.target).closest('.option').hasClass('option')) {
             return;
         }
         this.openOptions();
@@ -5478,7 +5511,7 @@ class FormSelectComponent {
         setTimeout(() => {
             this.changeIndex.emit(i);
             if (!this.inForm) {
-                $$1(this.inputBase.nativeElement).blur();
+                $(this.inputBase.nativeElement).blur();
             }
         }, 10);
         setTimeout(() => {
@@ -6049,7 +6082,7 @@ class FormTimeComponent {
             this.openOptions();
         };
         this.inp.focusOut = () => {
-            $$1(this.inputBase.nativeElement).blur();
+            $(this.inputBase.nativeElement).blur();
         };
     }
     toggleTime() {
@@ -6057,27 +6090,27 @@ class FormTimeComponent {
     }
     openOptions() {
         this.setPosition();
-        $$1(this.inputBase.nativeElement).focus();
+        $(this.inputBase.nativeElement).focus();
     }
     setPosition() {
         const rect = this.inputDiv.nativeElement.getBoundingClientRect();
         const offsetOfBottom = window.innerHeight - rect.bottom;
         const height = this.inputOptionsDiv.nativeElement.offsetHeight;
         if (offsetOfBottom < height) {
-            $$1(this.inputDiv.nativeElement).addClass('top');
+            $(this.inputDiv.nativeElement).addClass('top');
         }
         else {
-            $$1(this.inputDiv.nativeElement).removeClass('top');
+            $(this.inputDiv.nativeElement).removeClass('top');
         }
     }
     onKeyDown(e) {
         const code = e.keyCode || e.which;
         if (code === 9 || code === 13) {
             e.preventDefault();
-            $$1(this.inputDiv.nativeElement).removeClass('top');
+            $(this.inputDiv.nativeElement).removeClass('top');
             this.changeIndex.emit(code === 9 ? e.shiftKey ? 'ShiftTab' : 'Tab' : e.shiftKey ? 'ShiftEnter' : 'Enter');
             if (!this.inForm) {
-                $$1(this.inputBase.nativeElement).blur();
+                $(this.inputBase.nativeElement).blur();
             }
         }
     }
@@ -6100,7 +6133,7 @@ class FormTimeComponent {
         }
     }
     onFocusOut() {
-        $$1(this.inputDiv.nativeElement).removeClass('top');
+        $(this.inputDiv.nativeElement).removeClass('top');
         this.inp.search = this.inp.value;
     }
     selectTime(v, s) {
@@ -6148,8 +6181,8 @@ class FormTreeItemComponent {
         this.item.parent = this.parent;
     }
     openClose(e) {
-        const ch = $$1(e.target).closest('.row-item').find(' > .children');
-        const oc = $$1(e.target).closest('.row-item').find(' > .open-close');
+        const ch = $(e.target).closest('.row-item').find(' > .children');
+        const oc = $(e.target).closest('.row-item').find(' > .open-close');
         if (ch.hasClass('open')) {
             ch.removeClass('open');
             ch.stop().slideUp();
@@ -6227,7 +6260,7 @@ class FormTreeComponent {
         }
     }
     onFocusIn() {
-        $$1(this.inputBase.nativeElement).focus();
+        $(this.inputBase.nativeElement).focus();
     }
     getSelected() {
         let l = [];
@@ -7395,7 +7428,7 @@ class FormStarComponent {
         this.onFocusIn();
     }
     onFocusIn() {
-        $$1(this.inputBase.nativeElement).focus();
+        $(this.inputBase.nativeElement).focus();
     }
     onKeyDown(e) {
         const code = e.keyCode || e.which;
@@ -7470,7 +7503,7 @@ class FormTagComponent {
         }
     }
     onKeyDown(e) {
-        const v = $$1(this.inputBase.nativeElement);
+        const v = $(this.inputBase.nativeElement);
         if (this.inp.onKeyDown) {
             this.inp.onKeyDown(e);
         }
@@ -7493,7 +7526,7 @@ class FormTagComponent {
         this.inp.error = null;
     }
     onFocusOut() {
-        const v = $$1(this.inputBase.nativeElement);
+        const v = $(this.inputBase.nativeElement);
         this.setValue(v);
     }
     removeTag(t) {
@@ -7768,7 +7801,7 @@ class FormUploaderComponent {
         });
     }
     onClick() {
-        $$1(this.inputBase.nativeElement).focus();
+        $(this.inputBase.nativeElement).focus();
     }
     onChange(e) {
         var _a, _b;
@@ -7802,7 +7835,7 @@ class FormUploaderComponent {
         }
     }
     onFocusIn() {
-        $$1(this.inputBase.nativeElement).focus();
+        $(this.inputBase.nativeElement).focus();
     }
     title() {
         if (this.inp.value == null || (this.inp.value instanceof Array && this.inp.value.length === 0)) {
@@ -7896,7 +7929,7 @@ class FormSlideComponent {
         }
     }
     onFocusIn() {
-        $$1(this.inputBase.nativeElement).focus();
+        $(this.inputBase.nativeElement).focus();
     }
 }
 FormSlideComponent.decorators = [
@@ -7934,7 +7967,7 @@ PsToolkitUiModule.decorators = [
                     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: [
                     CommonModule,
@@ -7952,6 +7985,7 @@ PsToolkitUiModule.decorators = [
                     FormTimeComponent, NotificationComponent, FormFingerComponent, FormVehicleSearchComponent, FormCkeditorComponent, FormUploaderComponent,
                     LayoutComponent, LoadingComponent, NotfoundComponent, FormVehicleComponent, FormHiddenComponent, CalendarComponent, FormToggleComponent,
                     ClockComponent, ChartComponent, FormTagComponent, ErrorComponent, LoginComponent, FormStarComponent, FormSlideComponent,
+                    FormPreComponent
                 ]
             },] }
 ];
@@ -8456,7 +8490,7 @@ class TableClass {
                     p.Area = this.permissions.Area;
                     p.Controller = 'print';
                     p.Action = this.permissions.Controller + (this.permissions.Action ? this.permissions.Action : '');
-                    const params = param(this.searchData(true));
+                    const params = $.param(this.searchData(true));
                     const u = this.getUrl(access.Url);
                     window.open('/report' + u + (params ? (u.includes('?') ? '&' : '?') + params : ''), '_blank');
                 };
@@ -8925,5 +8959,5 @@ class HeaderClass {
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionClass, AccordionComponent, AccordionRowClass, AddModalClass, AlertComponent, BaseComponent, ChartClass, ConfirmComponent, CurrentDataClass, DayClass, EnumUtils, ErrorComponent, ExcelClass, FileIcons, FooterComponent, FormBankCardComponent, FormButtonComponent, FormCheckboxComponent, FormCkeditorComponent, FormClass, FormComponent, FormDateComponent, FormDatetimeComponent, FormFileComponent, FormFingerComponent, FormIconComponent, FormLabelComponent, FormPlaqueComponent, FormPlaqueSelectComponent, FormRadioComponent, FormSelectComponent, FormSlideComponent, FormStarComponent, FormTableComponent, FormTextareaComponent, FormTextboxComponent, FormTimeComponent, FormToggleComponent, FormTreeComponent, FormUploaderComponent, FormVehicleComponent, FormVehicleSearchComponent, HeaderClass, HeaderComponent, HelperClass, InputClass, InputError, InputType, LangClass, LayoutComponent, LoadingComponent, LoginClass, LoginStepClass, Method, ModalClass, ModalComponent, NotfoundComponent, OperationEnum, OptionClass, PaymentStatusEnum, PermissionAccessTypeEnum, PermissionClass, PermissionInputActionEnum, PermissionInputTypeEnum, PermissionTypeEnum, Progress, PsToolkitUiModule, RequestClass, ResultStatusEnum, SidebarClass, SidebarComponent, SidebarService, StatusEnum, StepsClass, StepsComponent, StepsItemClass, SubHeaderComponent, TableClass, TableCollClass, TableCollType, TableComponent, TableExportType, TableOptionType, TableRowStatus, TooltipComponent, TreeRowClass, UserType, VehicleType, FormSelectItemComponent as ɵa, TablePaginationComponent as ɵb, SidebarItemComponent as ɵc, PsToolkitUiConfigService as ɵd, TableLoadingComponent as ɵe, FormTreeItemComponent as ɵf, TableRowComponent as ɵg, NotificationComponent as ɵh, FormHiddenComponent as ɵi, CalendarComponent as ɵj, ClockComponent as ɵk, ChartComponent as ɵl, FormTagComponent as ɵm, LoginComponent as ɵn, SafeStylePipe as ɵo, SafeHtmlPipe as ɵp };
+export { AccordionClass, AccordionComponent, AccordionRowClass, AddModalClass, AlertComponent, BaseComponent, ChartClass, ConfirmComponent, CurrentDataClass, DayClass, EnumUtils, ErrorComponent, ExcelClass, FileIcons, FooterComponent, FormBankCardComponent, FormButtonComponent, FormCheckboxComponent, FormCkeditorComponent, FormClass, FormComponent, FormDateComponent, FormDatetimeComponent, FormFileComponent, FormFingerComponent, FormIconComponent, FormLabelComponent, FormPlaqueComponent, FormPlaqueSelectComponent, FormRadioComponent, FormSelectComponent, FormSlideComponent, FormStarComponent, FormTableComponent, FormTextareaComponent, FormTextboxComponent, FormTimeComponent, FormToggleComponent, FormTreeComponent, FormUploaderComponent, FormVehicleComponent, FormVehicleSearchComponent, HeaderClass, HeaderComponent, HelperClass, InputClass, InputError, InputType, LangClass, LayoutComponent, LoadingComponent, LoginClass, LoginStepClass, Method, ModalClass, ModalComponent, NotfoundComponent, OperationEnum, OptionClass, PaymentStatusEnum, PermissionAccessTypeEnum, PermissionClass, PermissionInputActionEnum, PermissionInputTypeEnum, PermissionTypeEnum, Progress, PsToolkitUiModule, RequestClass, ResultStatusEnum, SidebarClass, SidebarComponent, SidebarService, StatusEnum, StepsClass, StepsComponent, StepsItemClass, SubHeaderComponent, TableClass, TableCollClass, TableCollType, TableComponent, TableExportType, TableOptionType, TableRowStatus, TooltipComponent, TreeRowClass, UserType, VehicleType, FormSelectItemComponent as ɵa, TablePaginationComponent as ɵb, SidebarItemComponent as ɵc, PsToolkitUiConfigService as ɵd, TableLoadingComponent as ɵe, FormTreeItemComponent as ɵf, TableRowComponent as ɵg, NotificationComponent as ɵh, FormHiddenComponent as ɵi, CalendarComponent as ɵj, ClockComponent as ɵk, ChartComponent as ɵl, FormTagComponent as ɵm, LoginComponent as ɵn, SafeStylePipe as ɵo, SafeHtmlPipe as ɵp, FormPreComponent as ɵq };
 //# sourceMappingURL=ps-toolkit-ui.js.map