@adins/ucsearch 2.2.53 → 2.2.55

package/fesm2015/adins-ucsearch.js

@@ -187,19 +187,33 @@ ExportTypeConstant.EXP_TYPE_DOCX = 4;
  */
 class ListKeyValueMonth {
     constructor() {
+        this.DictOfMonth = {};
         this.ListOfMonth = new Array();
+        this.DictOfMonth = {};
         this.ListOfMonth.push({ key: 1, value: "January" });
+        this.DictOfMonth[1] = "January";
         this.ListOfMonth.push({ key: 2, value: "February" });
+        this.DictOfMonth[2] = "February";
         this.ListOfMonth.push({ key: 3, value: "March" });
+        this.DictOfMonth[3] = "March";
         this.ListOfMonth.push({ key: 4, value: "April" });
+        this.DictOfMonth[4] = "April";
         this.ListOfMonth.push({ key: 5, value: "May" });
+        this.DictOfMonth[5] = "May";
         this.ListOfMonth.push({ key: 6, value: "June" });
+        this.DictOfMonth[6] = "June";
         this.ListOfMonth.push({ key: 7, value: "July" });
+        this.DictOfMonth[7] = "July";
         this.ListOfMonth.push({ key: 8, value: "August" });
+        this.DictOfMonth[8] = "August";
         this.ListOfMonth.push({ key: 9, value: "September" });
+        this.DictOfMonth[9] = "September";
         this.ListOfMonth.push({ key: 10, value: "October" });
+        this.DictOfMonth[10] = "October";
         this.ListOfMonth.push({ key: 11, value: "November" });
+        this.DictOfMonth[11] = "November";
         this.ListOfMonth.push({ key: 12, value: "December" });
+        this.DictOfMonth[12] = "December";
     }
 }
 
@@ -337,15 +351,15 @@ class UCSearchComponent {
             if (this.searchInput.title != undefined && this.searchInput.title != "") {
                 this.configuration.title = this.searchInput.title;
             }
-            for (var i = 0; i < this.countForm; i++) {
+            for (let i = 0; i < this.countForm; i++) {
                 //ini kalau datanya di load dari URL
                 if (data.component[i].isFromURL == true) {
                     /** @type {?} */
-                    var request = new RequestCriteriaObj();
+                    let request = new RequestCriteriaObj();
                     /** @type {?} */
-                    var arrayCrit = new Array();
+                    let arrayCrit = new Array();
                     /** @type {?} */
-                    var criteriaObject = new CriteriaObj();
+                    let criteriaObject = new CriteriaObj();
                     criteriaObject.DataType = "text";
                     criteriaObject.propName = data.component[i].criteriaPropName;
                     criteriaObject.value = data.component[i].criteriaPropValue;
@@ -388,15 +402,15 @@ class UCSearchComponent {
                 //pengecekan ddl
                 if (data.component[i].type == "dropdown") {
                     if (data.component[i].dtmType != undefined) {
-                        if (data.component[i].dtmType == "month") {
+                        if (data.component[i].dtmType.includes("month")) {
                             if (data.component[i].value != undefined && data.component[i].value.includes("BD")) {
-                                data.component[i].value = this.BusinessDt.getMonth() + 1;
+                                data.component[i].value = this.setDefaultValueMonth(data.component[i].value);
                             }
-                            data.component[i].items = this.ListOfMonth.ListOfMonth;
+                            data.component[i].items = this.setMonthDDL(data.component[i].dtmType);
                         }
                         if (data.component[i].dtmType.includes("year")) {
                             if (data.component[i].value != undefined && data.component[i].value.includes("BD")) {
-                                data.component[i].value = this.BusinessDt.getFullYear();
+                                data.component[i].value = this.setDefaultValueYear(data.component[i].value);
                             }
                             data.component[i].items = this.setYearDDL(data.component[i].dtmType);
                         }
@@ -418,26 +432,26 @@ class UCSearchComponent {
                             businessDate = new Date(this.BisDt);
                         }
                         /** @type {?} */
-                        var operator = data.component[i].value.charAt(2);
+                        let operator = data.component[i].value.charAt(2);
                         /** @type {?} */
-                        var dateShow = new Date();
+                        let dateShow = new Date();
                         if (operator == "-") {
                             /** @type {?} */
-                            var tempMinus = data.component[i].value.split("-", 2);
+                            let tempMinus = data.component[i].value.split("-", 2);
                             /** @type {?} */
-                            var numDay = parseInt(tempMinus[1]);
+                            let numDay = parseInt(tempMinus[1]);
                             businessDate.setDate(businessDate.getDate() - numDay);
                         }
                         else if (operator == "+") {
                             /** @type {?} */
-                            var tempMinus = data.component[i].value.split("+", 2);
+                            let tempMinus = data.component[i].value.split("+", 2);
                             /** @type {?} */
-                            var numDay = parseInt(tempMinus[1]);
+                            let numDay = parseInt(tempMinus[1]);
                             businessDate.setDate(businessDate.getDate() + numDay);
                         }
                         dateShow = businessDate;
                         /** @type {?} */
-                        var dateText = formatDate(dateShow, 'yyyy-MM-dd', 'en-US');
+                        let dateText = formatDate(dateShow, 'yyyy-MM-dd', 'en-US');
                         data.component[i].value = dateText;
                     }
                     if (data.component[i].restriction != undefined && data.component[i].restriction != "") {
@@ -505,6 +519,100 @@ class UCSearchComponent {
         }
         this.searchInput.integrationObj.requestObj["OfficeRoleCodes"] = listOfficeRoleCodes;
     }
+    /**
+     * @param {?} value
+     * @return {?}
+     */
+    setDefaultValueMonth(value) {
+        /** @type {?} */
+        let businessDate = new Date(this.BusinessDt);
+        /** @type {?} */
+        let operator = value.charAt(2);
+        /** @type {?} */
+        let tempValue = value.split(operator, 2);
+        /** @type {?} */
+        let numMonth = parseInt(tempValue[1]);
+        if (!numMonth)
+            numMonth = 1;
+        if (operator == "-") {
+            businessDate.setMonth(businessDate.getMonth() - numMonth);
+        }
+        else if (operator == "+") {
+            businessDate.setMonth(businessDate.getMonth() + numMonth);
+        }
+        return businessDate.getMonth();
+    }
+    /**
+     * @param {?} month
+     * @return {?}
+     */
+    setMonthDDL(month) {
+        /** @type {?} */
+        let ListOfMonth;
+        /** @type {?} */
+        let equation = month.match("[\\/+][-]|[-][\\/+]|\\/+|-");
+        /** @type {?} */
+        let toMin = this.BusinessDt.getMonth();
+        /** @type {?} */
+        let toMax = this.BusinessDt.getMonth();
+        /** @type {?} */
+        let tempEquation = equation[0];
+        /** @type {?} */
+        let minMax = parseInt(month.substring(equation.index + equation[0].length));
+        if (minMax >= 12)
+            return this.ListOfMonth.ListOfMonth;
+        if ((tempEquation == "+-" || tempEquation == "-+") && minMax >= 6)
+            return this.ListOfMonth.ListOfMonth;
+        /** @type {?} */
+        let dictOfMonth = this.ListOfMonth.DictOfMonth;
+        ListOfMonth.push({ key: toMin, value: dictOfMonth[toMin] });
+        for (let q = 0; q < minMax; q++) {
+            if (tempEquation.includes("-")) {
+                toMin--;
+                if (toMin == 0)
+                    toMin = 12;
+                ListOfMonth.push({ key: toMin, value: dictOfMonth[toMin] });
+            }
+            if (tempEquation.includes("+")) {
+                toMax++;
+                if (toMax == 13)
+                    toMax = 1;
+                ListOfMonth.push({ key: toMax, value: dictOfMonth[toMax] });
+            }
+        }
+        ListOfMonth.sort((/**
+         * @param {?} a
+         * @param {?} b
+         * @return {?}
+         */
+        (a, b) => {
+            return a.key - b.key;
+        }));
+        return ListOfMonth;
+    }
+    /**
+     * @param {?} value
+     * @return {?}
+     */
+    setDefaultValueYear(value) {
+        /** @type {?} */
+        let businessDate = new Date(this.BusinessDt);
+        /** @type {?} */
+        let operator = value.charAt(2);
+        /** @type {?} */
+        let tempValue = value.split(operator, 2);
+        /** @type {?} */
+        let numYear = parseInt(tempValue[1]);
+        if (!numYear)
+            numYear = 1;
+        if (operator == "-") {
+            businessDate.setFullYear(businessDate.getFullYear() - numYear);
+        }
+        else if (operator == "+") {
+            businessDate.setFullYear(businessDate.getFullYear() + numYear);
+        }
+        return businessDate.getFullYear();
+    }
     /**
      * @param {?} year
      * @return {?}
@@ -663,15 +771,15 @@ class UCSearchComponent {
                         this.toastr.warning("Please select " + label);
                         break;
                     }
+                    if (component.getAttribute('data-crit-datatable') != "" && component.getAttribute('data-crit-datatable') != null) {
+                        critObj.isCriteriaDataTable = component.getAttribute('data-crit-datatable');
+                    }
                     if (this.configuration.component[i].type == "taskDefinitionKey" || this.configuration.component[i].type == "officeRoleCodes")
                         continue;
                     if (this.configuration.component[i].type == "claim") {
                         critObj.propName = component.getAttribute('data-name');
                         critObj.restriction = text;
                         critObj.value = null;
-                        if (component.getAttribute('data-crit-datatable') != "" && component.getAttribute('data-crit-datatable') != null) {
-                            critObj.isCriteriaDataTable = component.getAttribute('data-crit-datatable');
-                        }
                         arrCrit.push(critObj);
                     }
                     else {
@@ -747,18 +855,18 @@ class UCSearchComponent {
         }
         if (addCrit != null && addCrit != undefined) {
             if (addCrit.length != 0) {
-                for (var i = 0; i < addCrit.length; i++) {
+                for (let i = 0; i < addCrit.length; i++) {
                     arrCrit.push(addCrit[i]);
                 }
             }
             else if (this.searchInput.addCritInput != null || this.searchInput.addCritInput != undefined) {
-                for (var i = 0; i < this.searchInput.addCritInput.length; i++) {
+                for (let i = 0; i < this.searchInput.addCritInput.length; i++) {
                     arrCrit.push(this.searchInput.addCritInput[i]);
                 }
             }
         }
         else if (this.searchInput.addCritInput != null || this.searchInput.addCritInput != undefined) {
-            for (var i = 0; i < this.searchInput.addCritInput.length; i++) {
+            for (let i = 0; i < this.searchInput.addCritInput.length; i++) {
                 arrCrit.push(this.searchInput.addCritInput[i]);
             }
         }
@@ -847,7 +955,7 @@ class UCSearchComponent {
      */
     exportAsXLSX() {
         /** @type {?} */
-        var request = new RequestCriteriaObj();
+        let request = new RequestCriteriaObj();
         request.pageNo = 1;
         request.rowPerPage = 9999;
         request.orderBy = null;
@@ -881,17 +989,17 @@ class UCSearchComponent {
      */
     onChangeEvent(optValue, afFilter) {
         /** @type {?} */
-        var jsonComp = this.configuration.component;
-        for (var i = 0; i < afFilter.affectedFilter.length; i++) {
-            for (var j = 0; j < jsonComp.length; j++) {
+        let jsonComp = this.configuration.component;
+        for (let i = 0; i < afFilter.affectedFilter.length; i++) {
+            for (let j = 0; j < jsonComp.length; j++) {
                 if (jsonComp[j].name == afFilter.affectedFilter[i]) {
                     /** @type {?} */
-                    var request = new RequestCriteriaObj();
+                    let request = new RequestCriteriaObj();
                     /** @type {?} */
-                    var arrayCrit = new Array();
+                    let arrayCrit = new Array();
                     if (optValue != "all" && optValue != "one") {
                         /** @type {?} */
-                        var critObj = new CriteriaObj();
+                        let critObj = new CriteriaObj();
                         critObj.DataType = afFilter.datatype;
                         if (afFilter.filterPropName != undefined || afFilter.filterPropName != "") {
                             request[afFilter.filterPropName] = optValue;
@@ -957,10 +1065,10 @@ class UCSearchComponent {
      */
     switchCase(condList) {
         /** @type {?} */
-        var condition = false;
-        for (var i = 0; i < condList.conditions.length; i++) {
+        let condition = false;
+        for (let i = 0; i < condList.conditions.length; i++) {
             /** @type {?} */
-            var idx = this.searchInput.switchValue.findIndex((/**
+            let idx = this.searchInput.switchValue.findIndex((/**
              * @param {?} x
              * @return {?}
              */
@@ -977,7 +1085,7 @@ class UCSearchComponent {
                 }
                 else {
                     /** @type {?} */
-                    var username = localStorage.getItem("Username");
+                    let username = localStorage.getItem("Username");
                     if (this.searchInput.switchValue[idx].value == username) {
                         condition = true;
                     }
@@ -999,7 +1107,7 @@ class UCSearchComponent {
                 }
                 else {
                     /** @type {?} */
-                    var username = localStorage.getItem("Username");
+                    let username = localStorage.getItem("Username");
                     if (this.searchInput.switchValue[idx].value != username) {
                         condition = true;
                     }
@@ -1021,7 +1129,7 @@ class UCSearchComponent {
                 }
                 else {
                     /** @type {?} */
-                    var username = localStorage.getItem("Username");
+                    let username = localStorage.getItem("Username");
                     if (this.searchInput.switchValue[idx].value > username) {
                         condition = true;
                     }
@@ -1043,7 +1151,7 @@ class UCSearchComponent {
                 }
                 else {
                     /** @type {?} */
-                    var username = localStorage.getItem("Username");
+                    let username = localStorage.getItem("Username");
                     if (this.searchInput.switchValue[idx].value >= username) {
                         condition = true;
                     }
@@ -1065,7 +1173,7 @@ class UCSearchComponent {
                 }
                 else {
                     /** @type {?} */
-                    var username = localStorage.getItem("Username");
+                    let username = localStorage.getItem("Username");
                     if (this.searchInput.switchValue[idx].value < username) {
                         condition = true;
                     }
@@ -1087,7 +1195,7 @@ class UCSearchComponent {
                 }
                 else {
                     /** @type {?} */
-                    var username = localStorage.getItem("Username");
+                    let username = localStorage.getItem("Username");
                     if (this.searchInput.switchValue[idx].value <= username) {
                         condition = true;
                     }
@@ -1111,13 +1219,13 @@ class UCSearchComponent {
             chipperText == undefined || chipperText.trim() == '')
             return chipperText;
         /** @type {?} */
-        var chipperKeyArr = enc.Utf8.parse(chipperKey);
+        let chipperKeyArr = enc.Utf8.parse(chipperKey);
         /** @type {?} */
-        var iv = lib.WordArray.create([0x00, 0x00, 0x00, 0x00]);
+        let iv = lib.WordArray.create([0x00, 0x00, 0x00, 0x00]);
         /** @type {?} */
-        var decrypted = AES.decrypt(chipperText, chipperKeyArr, { iv: iv });
+        let decrypted = AES.decrypt(chipperText, chipperKeyArr, { iv: iv });
         /** @type {?} */
-        var plainText = decrypted.toString(enc.Utf8);
+        let plainText = decrypted.toString(enc.Utf8);
         return plainText;
     }
     /**
@@ -1212,7 +1320,7 @@ class UCSearchComponent {
 UCSearchComponent.decorators = [
     { type: Component, args: [{
                 selector: 'lib-UCSearch',
-                template: "<!-- Basic form layout section start -->\r\n<section id=\"horizontal-form-layouts\">\r\n  <div class=\"row text-left\">\r\n    <div class=\"col-md-12\">\r\n      <div class=\"card\">\r\n        <div class=\"pl-3 mb-2 mt-2\" *ngIf=\"configuration?.title != undefined && configuration?.title != ''\">\r\n          <h4 class=\"card-title ucSearch-title\" translate>{{configuration.title}}</h4>\r\n        </div>\r\n        <div class=\"card-body\">\r\n          <div class=\"px-3\">\r\n            <form class=\"form form-horizontal\" id=\"formSearch\" #formIdSearch #enjiForm=\"ngForm\"\r\n              (ngSubmit)=\"enjiForm.valid && searchClick()\">\r\n              <div class=\"form-body\">\r\n                <h4 class=\"form-section font-weight-bold\">\r\n                  <div (click)=\"changeState()\" class=\"btn no-padding cursor-pointer flip\">\r\n                    <i class=\"fa\" style=\"font-size: 15px; margin: 0px 0px 5px -15px;\"\r\n                      [ngClass]=\"isHidden ? 'fa-chevron-right' : 'fa-chevron-down'\"></i>\r\n                  </div>\r\n                  <span\r\n                    *ngIf=\"configuration?.sectionTitle != undefined && configuration?.sectionTitle != ''; then inputSectionTitle else defaultSectionTitle\"></span>\r\n                  <ng-template #inputSectionTitle>\r\n                    {{configuration?.sectionTitle}}\r\n                  </ng-template>\r\n                  <ng-template #defaultSectionTitle>\r\n                    Paging\r\n                  </ng-template>\r\n                </h4>\r\n                <!-- Ini Digunakan untuk Generate Dynamic Component -->\r\n                <!-- [hidden]=\"isHidden\" -->\r\n                <div class=\"panel-active\" [@changeDivSize]=currentState>\r\n                  <div class=\"row\">\r\n                    <div class=\"col-md-6 form-group\" *ngFor=\"let question of configuration?.component; let i = index\">\r\n                      <div class=\"col-md-12\">\r\n                        <div class=\"row\">\r\n                          <label class=\"col-md-5 no-padding\" for=\"{{question.id}}\"\r\n                            [ngClass]=\"{'adins-required-label': (question.isRequired || (question?.ddlType != undefined && question.ddlType == 'one'))}\"\r\n                            translate>{{question.label}}</label>\r\n                          <div class=\"col-md-7 no-padding\">\r\n                            <div *ngIf=\"question.type=='textbox'\">\r\n                              <input type=\"text\" id=\"{{question.id}}\" class=\"form-control search-form-control\"\r\n                                [ngModel]=\"question.value\" [required]=\"question.isRequired\" name=\"{{question.name}}\"\r\n                                attr.data-crit-datatable=\"{{question.isCriteriaDataTable}}\"\r\n                                attr.data-required=\"{{question.isRequired}}\" value=\"{{question.value}}\"\r\n                                (keyup.enter)=\"searchClick()\" attr.data-type=\"{{question.datatype}}\"\r\n                                attr.data-name=\"{{question.name}}\" attr.data-restriction=\"{{question.restriction}}\"\r\n                                attr.label=\"{{question.label}}\"\r\n                                [ngClass]=\"{ 'is-invalid':(enjiForm.submitted || enjiForm.form.controls[question.name]?.touched || enjiForm.form.controls[question.name]?.dirty) && enjiForm.form.controls[question.name]?.invalid }\">\r\n                            </div>\r\n                            <div *ngIf=\"question.type=='textarea'\">\r\n                              <textarea type=\"text\" id=\"{{question.id}}\" class=\"form-control search-form-control\"\r\n                                [ngModel]=\"question.value\" [required]=\"question.isRequired\" name=\"{{question.name}}\"\r\n                                attr.data-required=\"{{question.isRequired}}\" attr.data-type=\"{{question.datatype}}\"\r\n                                attr.data-name=\"{{question.name}}\" value=\"{{question.value}}\"\r\n                                attr.label=\"{{question.label}}\"\r\n                                [ngClass]=\"{ 'is-invalid':(enjiForm.submitted || enjiForm.form.controls[question.name]?.touched || enjiForm.form.controls[question.name]?.dirty) && enjiForm.form.controls[question.name]?.invalid }\"></textarea>\r\n                            </div>\r\n                            <div *ngIf=\"question.type=='numeric'\">\r\n                              <input type=\"number\" id=\"{{question.id}}\" (focus)=\"transformToDecimal($event)\"\r\n                                (blur)=\"transformAmount($event)\" class=\"form-control search-form-control\"\r\n                                [ngModel]=\"question.value\" [required]=\"question.isRequired\" name=\"{{question.name+[i]}}\"\r\n                                attr.data-required=\"{{question.isRequired}}\" value=\"{{question.value}}\"\r\n                                (keyup.enter)=\"searchClick()\" attr.data-restriction=\"{{question.restriction}}\"\r\n                                attr.data-type=\"{{question.datatype}}\" attr.data-name=\"{{question.name}}\"\r\n                                attr.label=\"{{question.label}}\"\r\n                                [ngClass]=\"{ 'is-invalid':(enjiForm.submitted || enjiForm.form.controls[question.name+[i]]?.touched || enjiForm.form.controls[question.name+[i]]?.dirty) && enjiForm.form.controls[question.name+[i]]?.invalid }\">\r\n                            </div>\r\n                            <div *ngIf=\"question.type=='currency'\">\r\n                              <div *ngIf=\"question?.isCustom != undefined && question?.isCustom\">\r\n                                <input type=\"\" id=\"{{question.id}}\" class=\"form-control search-form-control\"\r\n                                  [required]=\"question.isRequired\" name=\"{{question.name}}\"\r\n                                  (keyup.enter)=\"searchClick()\" attr.data-restriction=\"{{question.restriction}}\"\r\n                                  attr.data-type=\"{{question.datatype}}\" attr.data-name=\"{{question.name}}\"\r\n                                  attr.data-required=\"{{question.isRequired}}\" currencyMask [ngModel]=\"question.value\"\r\n                                  [(ngModel)]=\"question.value\" [ngModelOptions]=\"{standalone: true}\"\r\n                                  attr.label=\"{{question.label}}\"\r\n                                  [options]=\"{ thousands: question.thousands, decimal: question.decimal, align: question.align, allowNegative: question.allowNegative, allowZero: question.allowZero, precision: question.precision, nullable: question.nullable }\"\r\n                                  [ngClass]=\"{ 'is-invalid':(enjiForm.submitted || enjiForm.form.controls[question.name]?.touched || enjiForm.form.controls[question.name]?.dirty) && enjiForm.form.controls[question.name]?.invalid }\">\r\n                              </div>\r\n                              <div *ngIf=\"question?.isCustom == undefined || !question?.isCustom\">\r\n                                <input type=\"text\" id=\"{{question.id}}\" class=\"form-control search-form-control\"\r\n                                  [required]=\"question.isRequired\" name=\"{{question.name}}\"\r\n                                  (keyup.enter)=\"searchClick()\" attr.data-restriction=\"{{question.restriction}}\"\r\n                                  attr.data-type=\"{{question.datatype}}\" attr.data-name=\"{{question.name}}\"\r\n                                  attr.data-required=\"{{question.isRequired}}\" currencyMask [ngModel]=\"question.value\"\r\n                                  [(ngModel)]=\"question.value\" [ngModelOptions]=\"{standalone: true}\"\r\n                                  attr.label=\"{{question.label}}\"\r\n                                  [options]=\"{ thousands: ',', decimal: '.', align: 'right', allowNegative: false, allowZero:true, precision: 2, nullable: false }\"\r\n                                  [ngClass]=\"{ 'is-invalid':(enjiForm.submitted || enjiForm.form.controls[question.name]?.touched || enjiForm.form.controls[question.name]?.dirty) && enjiForm.form.controls[question.name]?.invalid }\">\r\n                              </div>\r\n                            </div>\r\n\r\n                            <!-- End Hardcode Lookup didalem-->\r\n                            <div *ngIf=\"question.type=='datepicker'\">\r\n                              <input type=\"{{question.isTime ? 'datetime-local' : 'date'}}\" id=\"{{question.id}}\"\r\n                                class=\"form-control search-form-control btn-lookup\" name=\"{{question.name+[i]}}\"\r\n                                [ngModel]=\"question.value\" [required]=\"question.isRequired\"\r\n                                attr.data-required=\"{{question.isRequired}}\" value=\"{{question.value}}\"\r\n                                attr.data-type=\"{{question.datatype}}\" attr.data-name=\"{{question.name}}\" attr.data-crit-datatable=\"{{question.isCriteriaDataTable}}\"\r\n                                (keyup.enter)=\"searchClick()\" attr.data-restriction=\"{{question.restriction}}\"\r\n                                attr.label=\"{{question.label}}\" min=\"{{question.minDate | date:'yyyy-MM-dd'}}\"\r\n                                max=\"{{question.maxDate | date:'yyyy-MM-dd'}}\" (focusout)=\"checkInputDate(question)\"\r\n                                [ngClass]=\"{ 'is-invalid':(enjiForm.submitted || enjiForm.form.controls[question.name+[i]]?.touched || enjiForm.form.controls[question.name+[i]]?.dirty) && enjiForm.form.controls[question.name+[i]]?.invalid }\">\r\n                            </div>\r\n                            <div *ngIf=\"question.type == 'taskDefinitionKey' || question.type == 'officeRoleCodes'\">\r\n                              <select name=\"{{question.name}}\" attr.data-required=\"{{question.isRequired}}\"\r\n                                [required]=\"question.isRequired\" class=\"form-control search-form-control\"\r\n                                attr.query-in=\"{{question.isQueryIn}}\" attr.data-type=\"{{question.datatype}}\"\r\n                                attr.label=\"{{question.label}}\" [hidden]=\"question?.itemsUrl?.length == 1\"\r\n                                (change)=\"question.type == 'taskDefinitionKey' ? SetProcessKey(i) : SetRoleOfficeCodes(i)\"\r\n                                [ngClass]=\"{ 'is-invalid':(enjiForm.submitted || enjiForm.form.controls[question.name]?.touched || enjiForm.form.controls[question.name]?.dirty) && enjiForm.form.controls[question.name]?.invalid }\">\r\n                                <option *ngIf=\"question.ddlType == 'one' && question?.itemsUrl?.length != 1\"\r\n                                  value=\"one\">Select One</option>\r\n                                <option\r\n                                  *ngIf=\"(question?.ddlType == undefined || question.ddlType == 'all') && question?.itemsUrl?.length != 1\"\r\n                                  value=\"all\">All</option>\r\n                                <option *ngFor=\"let item of question?.itemsUrl\" value=\"{{item.Key}}\">\r\n                                  {{item.Value}}\r\n                                </option>\r\n                              </select>\r\n                              <label *ngIf=\"question?.itemsUrl?.length == 1\">{{question.itemsUrl[0].Value}}</label>\r\n                            </div>\r\n                            <div *ngIf=\"question.type=='dropdown'\">\r\n                              <select name=\"{{question.name}}\" attr.data-required=\"{{question.isRequired}}\"\r\n                                [(ngModel)]=\"question.value\" [required]=\"question.isRequired\"\r\n                                class=\"form-control search-form-control\" attr.query-in=\"{{question.isQueryIn}}\"\r\n                                attr.data-type=\"{{question.datatype}}\" attr.data-name=\"{{question.name}}\"\r\n                                attr.label=\"{{question.label}}\"\r\n                                [hidden]=\"!question.isFromURL ? question?.items?.length == 1 : question?.itemsUrl?.length == 1\"\r\n                                (change)=\"question.isEvent ? onChangeEvent($event.target.value, question) : ''\"\r\n                                [ngClass]=\"{ 'is-invalid':(enjiForm.submitted || enjiForm.form.controls[question.name]?.touched || enjiForm.form.controls[question.name]?.dirty) && enjiForm.form.controls[question.name]?.invalid }\">\r\n                                <option\r\n                                  *ngIf=\"question.ddlType == 'one' && (!question.isFromURL ? question?.items?.length != 1 : question?.itemsUrl?.length != 1)\"\r\n                                  value=\"one\">\r\n                                  Select One</option>\r\n                                <option\r\n                                  *ngIf=\"(question?.ddlType == undefined || question.ddlType == 'all') && (!question.isFromURL ? question?.items?.length != 1 : question?.itemsUrl?.length != 1)\"\r\n                                  value=\"all\">All</option>\r\n                                <option *ngFor=\"let item of !question.isFromURL ? question?.items : question?.itemsUrl\"\r\n                                  value=\"{{!question.isFromURL ? item.key : item.Key}}\">\r\n                                  {{!question.isFromURL ? item.value : item.Value}}\r\n                                </option>\r\n                              </select>\r\n                              <label\r\n                                *ngIf=\"!question.isFromURL ? question?.items?.length == 1 : question?.itemsUrl?.length == 1\">{{!question.isFromURL\r\n                                ? question.items[0].value : question.itemsUrl[0].Value}}</label>\r\n                            </div>\r\n                            <div *ngIf=\"question.type=='claim'\">\r\n                              <select name=\"{{'claim'+[i]}}\" class=\"form-control search-form-control\"\r\n                                attr.data-type=\"{{'text'}}\" attr.data-crit-datatable=\"{{question.isCriteriaDataTable}}\"\r\n                                attr.data-name=\"{{'Assignee'}}\" [hidden]=\"ClaimList?.length == 1\"\r\n                                [ngClass]=\"{ 'is-invalid':(enjiForm.submitted || enjiForm.form.controls['claim'+[i]]?.touched || enjiForm.form.controls['claim'+[i]]?.dirty) && enjiForm.form.controls['claim'+[i]]?.invalid }\">\r\n                                <option *ngIf=\"question.ddlType == 'one' && ClaimList?.length != 1\" value=\"one\">Select\r\n                                  One</option>\r\n                                <option\r\n                                  *ngIf=\"(question?.ddlType == undefined || question.ddlType == 'all') && ClaimList?.length != 1\"\r\n                                  value=\"all\">All</option>\r\n                                <option *ngFor=\"let item of ClaimList\" value=\"{{item.Key}}\">\r\n                                  {{item.Value}}\r\n                                </option>\r\n                              </select>\r\n                            </div>\r\n                            <lib-uc-show-errors *ngIf=\"question.type!='datepicker'\"\r\n                              [control]=\"enjiForm.form.controls[question.name]\" [submit]=\"enjiForm.submitted\">\r\n                            </lib-uc-show-errors>\r\n                            <lib-uc-show-errors *ngIf=\"question.type=='datepicker'\"\r\n                              [control]=\"enjiForm.form.controls[question.name+[i]]\" [submit]=\"enjiForm.submitted\">\r\n                            </lib-uc-show-errors>\r\n                          </div>\r\n                        </div>\r\n                      </div>\r\n                    </div>\r\n                    <div class=\"col-md-6 form-group\" *ngIf=\"(isReport != undefined && isReport)\">\r\n                      <div class=\"col-md-12\">\r\n                        <div class=\"row\">\r\n                          <label class=\"col-md-5 no-padding\" translate>Report Type</label>\r\n                          <div class=\"col-md-7 no-padding\">\r\n                            <select name=\"ExportType\" [(ngModel)]=\"ExportType\" class=\"form-control search-form-control\"\r\n                              attr.data-type=\"text\">\r\n                              <option *ngFor=\"let item of ExportTypeList\" [value]=\"item.key\">{{item.value}}</option>\r\n                            </select>\r\n                          </div>\r\n                        </div>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"col-md-12 no-padding\">\r\n                    <div class=\"form-actions right\">\r\n                      <button *ngIf=\"exportData == true\" type=\"button\" (click)=\"exportAsXLSX()\"\r\n                        class=\"btn btn-raised btn-success mr-1\" translate>\r\n                        <i class=\"fa ft-download\"></i>&nbsp;<span translate>Export Excel</span>\r\n                      </button>\r\n                      <button type=\"button\" (click)=\"reset()\" class=\"btn btn-raised btn-warning mr-1\" translate>\r\n                        <i class=\"fa fa-times\"></i>&nbsp;<span translate>Reset</span>\r\n                      </button>\r\n                      <button *ngIf=\"(isReport == undefined || !isReport)\" type=\"submit\"\r\n                        class=\"btn btn-raised btn-primary\" #UCSearchClick>\r\n                        <i class=\"fa fa-search\"></i>&nbsp;<span translate>Search</span>\r\n                      </button>\r\n                      <button *ngIf=\"(isReport != undefined && isReport)\" type=\"button\" (click)=\"GenerateReport()\"\r\n                        class=\"btn btn-raised btn-primary\">\r\n                        <i class=\"fa ft-download\"></i>&nbsp;<span translate>Generate Report</span>\r\n                      </button>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </form>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</section>\r\n<br>\r\n<!-- // Basic form layout section end -->",
+                template: "<!-- Basic form layout section start -->\r\n<section id=\"horizontal-form-layouts\">\r\n  <div class=\"row text-left\">\r\n    <div class=\"col-md-12\">\r\n      <div class=\"card\">\r\n        <div class=\"pl-3 mb-2 mt-2\" *ngIf=\"configuration?.title != undefined && configuration?.title != ''\">\r\n          <h4 class=\"card-title ucSearch-title\" translate>{{configuration.title}}</h4>\r\n        </div>\r\n        <div class=\"card-body\">\r\n          <div class=\"px-3\">\r\n            <form class=\"form form-horizontal\" id=\"formSearch\" #formIdSearch #enjiForm=\"ngForm\"\r\n              (ngSubmit)=\"enjiForm.valid && searchClick()\">\r\n              <div class=\"form-body\">\r\n                <h4 class=\"form-section font-weight-bold\">\r\n                  <div (click)=\"changeState()\" class=\"btn no-padding cursor-pointer flip\">\r\n                    <i class=\"fa\" style=\"font-size: 15px; margin: 0px 0px 5px -15px;\"\r\n                      [ngClass]=\"isHidden ? 'fa-chevron-right' : 'fa-chevron-down'\"></i>\r\n                  </div>\r\n                  <span\r\n                    *ngIf=\"configuration?.sectionTitle != undefined && configuration?.sectionTitle != ''; then inputSectionTitle else defaultSectionTitle\"></span>\r\n                  <ng-template #inputSectionTitle>\r\n                    {{configuration?.sectionTitle}}\r\n                  </ng-template>\r\n                  <ng-template #defaultSectionTitle>\r\n                    Paging\r\n                  </ng-template>\r\n                </h4>\r\n                <!-- Ini Digunakan untuk Generate Dynamic Component -->\r\n                <!-- [hidden]=\"isHidden\" -->\r\n                <div class=\"panel-active\" [@changeDivSize]=currentState>\r\n                  <div class=\"row\">\r\n                    <div class=\"col-md-6 form-group\" *ngFor=\"let question of configuration?.component; let i = index\">\r\n                      <div class=\"col-md-12\">\r\n                        <div class=\"row\">\r\n                          <label class=\"col-md-5 no-padding\" for=\"{{question.id}}\"\r\n                            [ngClass]=\"{'adins-required-label': (question.isRequired || (question?.ddlType != undefined && question.ddlType == 'one'))}\"\r\n                            translate>{{question.label}}</label>\r\n                          <div class=\"col-md-7 no-padding\">\r\n                            <div *ngIf=\"question.type=='textbox'\">\r\n                              <input type=\"text\" id=\"{{question.id}}\" class=\"form-control search-form-control\"\r\n                                [ngModel]=\"question.value\" [required]=\"question.isRequired\" name=\"{{question.name}}\"\r\n                                attr.data-crit-datatable=\"{{question.isCriteriaDataTable}}\"\r\n                                attr.data-required=\"{{question.isRequired}}\" value=\"{{question.value}}\"\r\n                                (keyup.enter)=\"searchClick()\" attr.data-type=\"{{question.datatype}}\"\r\n                                attr.data-name=\"{{question.name}}\" attr.data-restriction=\"{{question.restriction}}\"\r\n                                attr.label=\"{{question.label}}\"\r\n                                [ngClass]=\"{ 'is-invalid':(enjiForm.submitted || enjiForm.form.controls[question.name]?.touched || enjiForm.form.controls[question.name]?.dirty) && enjiForm.form.controls[question.name]?.invalid }\">\r\n                            </div>\r\n                            <div *ngIf=\"question.type=='textarea'\">\r\n                              <textarea type=\"text\" id=\"{{question.id}}\" class=\"form-control search-form-control\"\r\n                                [ngModel]=\"question.value\" [required]=\"question.isRequired\" name=\"{{question.name}}\"\r\n                                attr.data-required=\"{{question.isRequired}}\" attr.data-type=\"{{question.datatype}}\"\r\n                                attr.data-name=\"{{question.name}}\" value=\"{{question.value}}\"\r\n                                attr.label=\"{{question.label}}\"\r\n                                [ngClass]=\"{ 'is-invalid':(enjiForm.submitted || enjiForm.form.controls[question.name]?.touched || enjiForm.form.controls[question.name]?.dirty) && enjiForm.form.controls[question.name]?.invalid }\"></textarea>\r\n                            </div>\r\n                            <div *ngIf=\"question.type=='numeric'\">\r\n                              <input type=\"number\" id=\"{{question.id}}\" (focus)=\"transformToDecimal($event)\"\r\n                                (blur)=\"transformAmount($event)\" class=\"form-control search-form-control\"\r\n                                [ngModel]=\"question.value\" [required]=\"question.isRequired\" name=\"{{question.name+[i]}}\"\r\n                                attr.data-required=\"{{question.isRequired}}\" value=\"{{question.value}}\"\r\n                                (keyup.enter)=\"searchClick()\" attr.data-restriction=\"{{question.restriction}}\"\r\n                                attr.data-type=\"{{question.datatype}}\" attr.data-name=\"{{question.name}}\"\r\n                                attr.label=\"{{question.label}}\"\r\n                                [ngClass]=\"{ 'is-invalid':(enjiForm.submitted || enjiForm.form.controls[question.name+[i]]?.touched || enjiForm.form.controls[question.name+[i]]?.dirty) && enjiForm.form.controls[question.name+[i]]?.invalid }\">\r\n                            </div>\r\n                            <div *ngIf=\"question.type=='currency'\">\r\n                              <div *ngIf=\"question?.isCustom != undefined && question?.isCustom\">\r\n                                <input type=\"\" id=\"{{question.id}}\" class=\"form-control search-form-control\"\r\n                                  [required]=\"question.isRequired\" name=\"{{question.name}}\"\r\n                                  (keyup.enter)=\"searchClick()\" attr.data-restriction=\"{{question.restriction}}\"\r\n                                  attr.data-type=\"{{question.datatype}}\" attr.data-name=\"{{question.name}}\"\r\n                                  attr.data-required=\"{{question.isRequired}}\" currencyMask [ngModel]=\"question.value\"\r\n                                  [(ngModel)]=\"question.value\" [ngModelOptions]=\"{standalone: true}\"\r\n                                  attr.label=\"{{question.label}}\"\r\n                                  [options]=\"{ thousands: question.thousands, decimal: question.decimal, align: question.align, allowNegative: question.allowNegative, allowZero: question.allowZero, precision: question.precision, nullable: question.nullable }\"\r\n                                  [ngClass]=\"{ 'is-invalid':(enjiForm.submitted || enjiForm.form.controls[question.name]?.touched || enjiForm.form.controls[question.name]?.dirty) && enjiForm.form.controls[question.name]?.invalid }\">\r\n                              </div>\r\n                              <div *ngIf=\"question?.isCustom == undefined || !question?.isCustom\">\r\n                                <input type=\"text\" id=\"{{question.id}}\" class=\"form-control search-form-control\"\r\n                                  [required]=\"question.isRequired\" name=\"{{question.name}}\"\r\n                                  (keyup.enter)=\"searchClick()\" attr.data-restriction=\"{{question.restriction}}\"\r\n                                  attr.data-type=\"{{question.datatype}}\" attr.data-name=\"{{question.name}}\"\r\n                                  attr.data-required=\"{{question.isRequired}}\" currencyMask [ngModel]=\"question.value\"\r\n                                  [(ngModel)]=\"question.value\" [ngModelOptions]=\"{standalone: true}\"\r\n                                  attr.label=\"{{question.label}}\"\r\n                                  [options]=\"{ thousands: ',', decimal: '.', align: 'right', allowNegative: false, allowZero:true, precision: 2, nullable: false }\"\r\n                                  [ngClass]=\"{ 'is-invalid':(enjiForm.submitted || enjiForm.form.controls[question.name]?.touched || enjiForm.form.controls[question.name]?.dirty) && enjiForm.form.controls[question.name]?.invalid }\">\r\n                              </div>\r\n                            </div>\r\n\r\n                            <!-- End Hardcode Lookup didalem-->\r\n                            <div *ngIf=\"question.type=='datepicker'\">\r\n                              <input type=\"{{question.isTime ? 'datetime-local' : 'date'}}\" id=\"{{question.id}}\"\r\n                                class=\"form-control search-form-control btn-lookup\" name=\"{{question.name+[i]}}\"\r\n                                [ngModel]=\"question.value\" [required]=\"question.isRequired\"\r\n                                attr.data-required=\"{{question.isRequired}}\" value=\"{{question.value}}\"\r\n                                attr.data-type=\"{{question.datatype}}\" attr.data-name=\"{{question.name}}\" attr.data-crit-datatable=\"{{question.isCriteriaDataTable}}\"\r\n                                (keyup.enter)=\"searchClick()\" attr.data-restriction=\"{{question.restriction}}\"\r\n                                attr.label=\"{{question.label}}\" min=\"{{question.minDate | date:'yyyy-MM-dd'}}\"\r\n                                max=\"{{question.maxDate | date:'yyyy-MM-dd'}}\" (focusout)=\"checkInputDate(question)\"\r\n                                [ngClass]=\"{ 'is-invalid':(enjiForm.submitted || enjiForm.form.controls[question.name+[i]]?.touched || enjiForm.form.controls[question.name+[i]]?.dirty) && enjiForm.form.controls[question.name+[i]]?.invalid }\">\r\n                            </div>\r\n                            <div *ngIf=\"question.type == 'taskDefinitionKey' || question.type == 'officeRoleCodes'\">\r\n                              <select name=\"{{question.name}}\" attr.data-required=\"{{question.isRequired}}\"\r\n                                [required]=\"question.isRequired\" class=\"form-control search-form-control\"\r\n                                attr.query-in=\"{{question.isQueryIn}}\" attr.data-type=\"{{question.datatype}}\"\r\n                                attr.label=\"{{question.label}}\" [hidden]=\"question?.itemsUrl?.length == 1\"\r\n                                (change)=\"question.type == 'taskDefinitionKey' ? SetProcessKey(i) : SetRoleOfficeCodes(i)\"\r\n                                [ngClass]=\"{ 'is-invalid':(enjiForm.submitted || enjiForm.form.controls[question.name]?.touched || enjiForm.form.controls[question.name]?.dirty) && enjiForm.form.controls[question.name]?.invalid }\">\r\n                                <option *ngIf=\"question.ddlType == 'one' && question?.itemsUrl?.length != 1\"\r\n                                  value=\"one\">Select One</option>\r\n                                <option\r\n                                  *ngIf=\"(question?.ddlType == undefined || question.ddlType == 'all') && question?.itemsUrl?.length != 1\"\r\n                                  value=\"all\">All</option>\r\n                                <option *ngFor=\"let item of question?.itemsUrl\" value=\"{{item.Key}}\">\r\n                                  {{item.Value}}\r\n                                </option>\r\n                              </select>\r\n                              <label *ngIf=\"question?.itemsUrl?.length == 1\">{{question.itemsUrl[0].Value}}</label>\r\n                            </div>\r\n                            <div *ngIf=\"question.type=='dropdown'\">\r\n                              <select name=\"{{question.name}}\" attr.data-required=\"{{question.isRequired}}\"\r\n                                [(ngModel)]=\"question.value\" [required]=\"question.isRequired\"\r\n                                class=\"form-control search-form-control\" attr.query-in=\"{{question.isQueryIn}}\"\r\n                                attr.data-type=\"{{question.datatype}}\" attr.data-name=\"{{question.name}}\"\r\n                                attr.label=\"{{question.label}}\" attr.data-crit-datatable=\"{{question.isCriteriaDataTable}}\"\r\n                                [hidden]=\"!question.isFromURL ? question?.items?.length == 1 : question?.itemsUrl?.length == 1\"\r\n                                (change)=\"question.isEvent ? onChangeEvent($event.target.value, question) : ''\"\r\n                                [ngClass]=\"{ 'is-invalid':(enjiForm.submitted || enjiForm.form.controls[question.name]?.touched || enjiForm.form.controls[question.name]?.dirty) && enjiForm.form.controls[question.name]?.invalid }\">\r\n                                <option\r\n                                  *ngIf=\"question.ddlType == 'one' && (!question.isFromURL ? question?.items?.length != 1 : question?.itemsUrl?.length != 1)\"\r\n                                  value=\"one\">\r\n                                  Select One</option>\r\n                                <option\r\n                                  *ngIf=\"(question?.ddlType == undefined || question.ddlType == 'all') && (!question.isFromURL ? question?.items?.length != 1 : question?.itemsUrl?.length != 1)\"\r\n                                  value=\"all\">All</option>\r\n                                <option *ngFor=\"let item of !question.isFromURL ? question?.items : question?.itemsUrl\"\r\n                                  value=\"{{!question.isFromURL ? item.key : item.Key}}\">\r\n                                  {{!question.isFromURL ? item.value : item.Value}}\r\n                                </option>\r\n                              </select>\r\n                              <label\r\n                                *ngIf=\"!question.isFromURL ? question?.items?.length == 1 : question?.itemsUrl?.length == 1\">{{!question.isFromURL\r\n                                ? question.items[0].value : question.itemsUrl[0].Value}}</label>\r\n                            </div>\r\n                            <div *ngIf=\"question.type=='claim'\">\r\n                              <select name=\"{{'claim'+[i]}}\" class=\"form-control search-form-control\"\r\n                                attr.data-type=\"{{'text'}}\" attr.data-crit-datatable=\"{{question.isCriteriaDataTable}}\"\r\n                                attr.data-name=\"{{'Assignee'}}\" [hidden]=\"ClaimList?.length == 1\"\r\n                                [ngClass]=\"{ 'is-invalid':(enjiForm.submitted || enjiForm.form.controls['claim'+[i]]?.touched || enjiForm.form.controls['claim'+[i]]?.dirty) && enjiForm.form.controls['claim'+[i]]?.invalid }\">\r\n                                <option *ngIf=\"question.ddlType == 'one' && ClaimList?.length != 1\" value=\"one\">Select\r\n                                  One</option>\r\n                                <option\r\n                                  *ngIf=\"(question?.ddlType == undefined || question.ddlType == 'all') && ClaimList?.length != 1\"\r\n                                  value=\"all\">All</option>\r\n                                <option *ngFor=\"let item of ClaimList\" value=\"{{item.Key}}\">\r\n                                  {{item.Value}}\r\n                                </option>\r\n                              </select>\r\n                            </div>\r\n                            <lib-uc-show-errors *ngIf=\"question.type!='datepicker'\"\r\n                              [control]=\"enjiForm.form.controls[question.name]\" [submit]=\"enjiForm.submitted\">\r\n                            </lib-uc-show-errors>\r\n                            <lib-uc-show-errors *ngIf=\"question.type=='datepicker'\"\r\n                              [control]=\"enjiForm.form.controls[question.name+[i]]\" [submit]=\"enjiForm.submitted\">\r\n                            </lib-uc-show-errors>\r\n                          </div>\r\n                        </div>\r\n                      </div>\r\n                    </div>\r\n                    <div class=\"col-md-6 form-group\" *ngIf=\"(isReport != undefined && isReport)\">\r\n                      <div class=\"col-md-12\">\r\n                        <div class=\"row\">\r\n                          <label class=\"col-md-5 no-padding\" translate>Report Type</label>\r\n                          <div class=\"col-md-7 no-padding\">\r\n                            <select name=\"ExportType\" [(ngModel)]=\"ExportType\" class=\"form-control search-form-control\"\r\n                              attr.data-type=\"text\">\r\n                              <option *ngFor=\"let item of ExportTypeList\" [value]=\"item.key\">{{item.value}}</option>\r\n                            </select>\r\n                          </div>\r\n                        </div>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"col-md-12 no-padding\">\r\n                    <div class=\"form-actions right\">\r\n                      <button *ngIf=\"exportData == true\" type=\"button\" (click)=\"exportAsXLSX()\"\r\n                        class=\"btn btn-raised btn-success mr-1\" translate>\r\n                        <i class=\"fa ft-download\"></i>&nbsp;<span translate>Export Excel</span>\r\n                      </button>\r\n                      <button type=\"button\" (click)=\"reset()\" class=\"btn btn-raised btn-warning mr-1\" translate>\r\n                        <i class=\"fa fa-times\"></i>&nbsp;<span translate>Reset</span>\r\n                      </button>\r\n                      <button *ngIf=\"(isReport == undefined || !isReport)\" type=\"submit\"\r\n                        class=\"btn btn-raised btn-primary\" #UCSearchClick>\r\n                        <i class=\"fa fa-search\"></i>&nbsp;<span translate>Search</span>\r\n                      </button>\r\n                      <button *ngIf=\"(isReport != undefined && isReport)\" type=\"button\" (click)=\"GenerateReport()\"\r\n                        class=\"btn btn-raised btn-primary\">\r\n                        <i class=\"fa ft-download\"></i>&nbsp;<span translate>Generate Report</span>\r\n                      </button>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </form>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</section>\r\n<br>\r\n<!-- // Basic form layout section end -->",
                 providers: [ExcelService, DatePipe],
                 animations: [
                     trigger('changeDivSize', [