gamma-app-controller 2.0.5 → 2.0.7

package/fesm2020/gamma-app-controller.mjs

@@ -3584,6 +3584,7 @@ class GoogleGeoMapComponent {
                         };
                     }
                     else if (this.mapTYpe == "choroplethMap") {
+                        debugger;
                         let choroplethMapDataSource = new Map();
                         let choroplethTooltipDataSource = new Map();
                         let chartConfig = value.kpiConfig.dataConfig;
@@ -3984,7 +3985,7 @@ class GoogleGeoMapComponent {
         };
     }
     initChoroplethMapMap(chartConfig, tootTipColumn, choroplethMapDataSource, choroplethTooltipDataSource) {
-        const map = new google.maps.Map(document.getElementById('googlemap'), {
+        const map = new google.maps.Map(this.googlMap.nativeElement, {
             center: { lat: parseFloat(chartConfig.centerLat), lng: parseFloat(chartConfig.centerLng) },
             zoom: parseInt(chartConfig.zoom)
         });
@@ -4041,10 +4042,10 @@ class GoogleGeoMapComponent {
     }
 }
 GoogleGeoMapComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: GoogleGeoMapComponent, deps: [{ token: CommonService }], target: i0.ɵɵFactoryTarget.Component });
-GoogleGeoMapComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: GoogleGeoMapComponent, selector: "app-google-geo-map", inputs: { rightClickEnable: "rightClickEnable", chartDataSource: "chartDataSource" }, outputs: { getTableConfigOutPut: "getTableConfigOutPut", oRowClick: "oRowClick", onrightClickContextSelection: "onrightClickContextSelection" }, viewQueries: [{ propertyName: "googlMap", first: true, predicate: ["googlMap"], descendants: true }], ngImport: i0, template: "<div class=\"mx-2 bg-gray-800\">\n  <ng-container *ngIf=\"isLoader\">\n    <div class=\"flex justify-center items-start bg-gray-800 p-2\">\n      <app-loader></app-loader>\n    </div>\n  </ng-container>\n\n  <div class=\"mx-2 pb-2\">\n\n    <ng-container>\n      <!-- <div id=\"regions_div\" style=\"width: 100%\" ></div>   -->\n      <div id=\"regions_div\" #googlMap style=\"width: 100%\"></div>\n      <div id=\"googlemap\" style=\"width: 100%;\" [style.height]=\"chartHeight\"></div>\n\n    </ng-container>\n\n\n\n  </div>\n\n\n</div>", dependencies: [{ kind: "directive", type: i4$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LoaderComponent, selector: "app-loader" }] });
+GoogleGeoMapComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: GoogleGeoMapComponent, selector: "app-google-geo-map", inputs: { rightClickEnable: "rightClickEnable", chartDataSource: "chartDataSource" }, outputs: { getTableConfigOutPut: "getTableConfigOutPut", oRowClick: "oRowClick", onrightClickContextSelection: "onrightClickContextSelection" }, viewQueries: [{ propertyName: "googlMap", first: true, predicate: ["googlMap"], descendants: true }], ngImport: i0, template: "<div class=\"mx-2 bg-gray-800\">\n  <ng-container *ngIf=\"isLoader\">\n    <div class=\"flex justify-center items-start bg-gray-800 p-2\">\n      <app-loader></app-loader>\n    </div>\n  </ng-container>\n\n  <div class=\"mx-2 pb-2\">\n\n    <ng-container>\n      <!-- <div id=\"regions_div\" style=\"width: 100%\" ></div>   -->\n      <div id=\"regions_div\" #googlMap style=\"width: 100%\"></div>\n      <!-- <div id=\"googlemap\" style=\"width: 100%;\" [style.height]=\"chartHeight\"></div> -->\n\n    </ng-container>\n\n\n\n  </div>\n\n\n</div>", dependencies: [{ kind: "directive", type: i4$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LoaderComponent, selector: "app-loader" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: GoogleGeoMapComponent, decorators: [{
             type: Component,
-            args: [{ selector: "app-google-geo-map", template: "<div class=\"mx-2 bg-gray-800\">\n  <ng-container *ngIf=\"isLoader\">\n    <div class=\"flex justify-center items-start bg-gray-800 p-2\">\n      <app-loader></app-loader>\n    </div>\n  </ng-container>\n\n  <div class=\"mx-2 pb-2\">\n\n    <ng-container>\n      <!-- <div id=\"regions_div\" style=\"width: 100%\" ></div>   -->\n      <div id=\"regions_div\" #googlMap style=\"width: 100%\"></div>\n      <div id=\"googlemap\" style=\"width: 100%;\" [style.height]=\"chartHeight\"></div>\n\n    </ng-container>\n\n\n\n  </div>\n\n\n</div>" }]
+            args: [{ selector: "app-google-geo-map", template: "<div class=\"mx-2 bg-gray-800\">\n  <ng-container *ngIf=\"isLoader\">\n    <div class=\"flex justify-center items-start bg-gray-800 p-2\">\n      <app-loader></app-loader>\n    </div>\n  </ng-container>\n\n  <div class=\"mx-2 pb-2\">\n\n    <ng-container>\n      <!-- <div id=\"regions_div\" style=\"width: 100%\" ></div>   -->\n      <div id=\"regions_div\" #googlMap style=\"width: 100%\"></div>\n      <!-- <div id=\"googlemap\" style=\"width: 100%;\" [style.height]=\"chartHeight\"></div> -->\n\n    </ng-container>\n\n\n\n  </div>\n\n\n</div>" }]
         }], ctorParameters: function () { return [{ type: CommonService }]; }, propDecorators: { googlMap: [{
                 type: ViewChild,
                 args: ["googlMap"]
@@ -9804,6 +9805,9 @@ class GammaGeoChartComponent {
         this.oRowClick = new EventEmitter();
         this.onrightClickContextSelection = new EventEmitter();
         this.rightClickEnable = true;
+        this.choropleth_map_data_source = new Map();
+        this.minChoroplethMapCnt = Infinity;
+        this.maxChoroplethMapCnt = -Infinity;
     }
     set chartDataSource(value) {
         if (value === undefined || value.length === 0) {
@@ -9853,6 +9857,28 @@ class GammaGeoChartComponent {
                             zoom: this.zoomValuForAll,
                         };
                     }
+                    else if (this.mapTYpe == "choroplethMap") {
+                        debugger;
+                        let choroplethMapDataSource = new Map();
+                        let choroplethTooltipDataSource = new Map();
+                        let chartConfig = value.kpiConfig.dataConfig;
+                        this.chartHeight = `${chartConfig.size}px`;
+                        let tootTipColumn = chartConfig.chart_config
+                            .filter(c => c.displayFor === 'map' || c.displayFor === 'tooltip');
+                        const valueField = chartConfig.chart_config.find(c => c.displayFor === 'map')?.dataField;
+                        value.kpiConfig.dataSource.forEach(d => {
+                            const key = d[chartConfig.argumentField].toUpperCase();
+                            const val = d[valueField];
+                            choroplethMapDataSource.set(key, val);
+                            choroplethTooltipDataSource.set(key, d);
+                            this.minChoroplethMapCnt = Math.min(this.minChoroplethMapCnt, d[valueField]);
+                            this.maxChoroplethMapCnt = Math.max(this.maxChoroplethMapCnt, d[valueField]);
+                        });
+                        this.initChoroplethMapMap(chartConfig, tootTipColumn, choroplethMapDataSource, choroplethTooltipDataSource);
+                        setTimeout(() => {
+                            this.isLoader = false;
+                        }, 200);
+                    }
                     else {
                         this.locations = value.kpiConfig.dataSource;
                         this.tootTipColumn = value.kpiConfig.dataConfig.chart_config;
@@ -9907,6 +9933,9 @@ class GammaGeoChartComponent {
                 this.initializeHeatWithMarkerMap(this.locations);
             }
         }
+        else if (this.mapTYpe == "choroplethMap") {
+            return;
+        }
         else {
             this.isLoader = false;
             this.initializeMap();
@@ -10109,8 +10138,10 @@ class GammaGeoChartComponent {
         });
         this.locations.forEach((location) => {
             const marker = new google.maps.Marker({
-                position: { lat: parseFloat(location[this.page_config.kpiConfig.dataConfig.markerLatitude]),
-                    lng: parseFloat(location[this.page_config.kpiConfig.dataConfig.markerLongitude]), },
+                position: {
+                    lat: parseFloat(location[this.page_config.kpiConfig.dataConfig.markerLatitude]),
+                    lng: parseFloat(location[this.page_config.kpiConfig.dataConfig.markerLongitude]),
+                },
                 icon: this.page_config.kpiConfig.dataConfig.icon ? {
                     url: this.page_config.kpiConfig.dataConfig.icon,
                     scaledSize: {
@@ -10202,12 +10233,92 @@ class GammaGeoChartComponent {
             d.sales_percentage = Math.min(Math.max(normalize(d[this.page_config.kpiConfig.dataConfig.agrumentValue], minSales, maxSales), minPercentage), maxPercentage);
         });
     }
+    getColor(cnt, startColor, endColor) {
+        if (cnt === undefined || cnt === null || this.maxChoroplethMapCnt === this.minChoroplethMapCnt) {
+            return '#cccccc';
+        }
+        const ratio = Math.min(Math.max((cnt - this.minChoroplethMapCnt) / (this.maxChoroplethMapCnt - this.minChoroplethMapCnt), 0), 1);
+        const start = this.hexToRgb(startColor);
+        const end = this.hexToRgb(endColor);
+        const r = this.lerp(start.r, end.r, ratio);
+        const g = this.lerp(start.g, end.g, ratio);
+        const b = this.lerp(start.b, end.b, ratio);
+        return `rgb(${r}, ${g}, ${b})`;
+    }
+    lerp(start, end, ratio) {
+        return Math.round(start + (end - start) * ratio);
+    }
+    hexToRgb(hex) {
+        const cleanHex = hex.replace('#', '');
+        const bigint = parseInt(cleanHex, 16);
+        return {
+            r: (bigint >> 16) & 255,
+            g: (bigint >> 8) & 255,
+            b: bigint & 255
+        };
+    }
+    initChoroplethMapMap(chartConfig, tootTipColumn, choroplethMapDataSource, choroplethTooltipDataSource) {
+        const map = new google.maps.Map(document.getElementById("googlemap"), {
+            center: { lat: parseFloat(chartConfig.centerLat), lng: parseFloat(chartConfig.centerLng) },
+            zoom: parseInt(chartConfig.zoom)
+        });
+        map.data.loadGeoJson(chartConfig.gjsonFilePath);
+        map.data.setStyle((feature) => {
+            const district = feature.getProperty('d')?.toUpperCase();
+            const cnt = choroplethMapDataSource.get(district);
+            return {
+                fillColor: this.getColor(cnt, chartConfig.colorOne, chartConfig.colorTwo),
+                strokeColor: '#555',
+                strokeWeight: 1,
+                fillOpacity: 0.75
+            };
+        });
+        const infoWindow = new google.maps.InfoWindow();
+        map.data.addListener('mouseover', (event) => {
+            const district = event.feature.getProperty('d');
+            const key = district?.toUpperCase();
+            const row = choroplethTooltipDataSource.get(key);
+            infoWindow.setContent(this.buildInfoWindowContent(district, row, tootTipColumn));
+            infoWindow.setPosition(event.latLng);
+            infoWindow.open(map);
+        });
+        map.data.addListener('mouseout', () => infoWindow.close());
+    }
+    getFeatureCenter(feature) {
+        const bounds = new google.maps.LatLngBounds();
+        feature.getGeometry()?.forEachLatLng((latLng) => {
+            bounds.extend(latLng);
+        });
+        return bounds.getCenter();
+    }
+    buildInfoWindowContent(district, row, tootTipColumn) {
+        const rows = tootTipColumn.map(c => `
+    <div style="display:flex; justify-content:space-between;">
+      <span>${c.caption}</span>
+      <strong>${row?.[c.dataField] ?? 'No data'}</strong>
+    </div>
+  `).join('');
+        return `
+    <div style="
+      color:#000;
+      background:#fff;
+      padding:8px 12px;
+      font-size:13px;
+      min-width:150px;
+    ">
+      <div style="font-weight:600; margin-bottom:6px;">
+        ${district}
+      </div>
+      ${rows}
+    </div>
+  `;
+    }
 }
 GammaGeoChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: GammaGeoChartComponent, deps: [{ token: CommonService }], target: i0.ɵɵFactoryTarget.Component });
-GammaGeoChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: GammaGeoChartComponent, selector: "app-gamma-geo-chart", inputs: { rightClickEnable: "rightClickEnable", chartDataSource: "chartDataSource" }, outputs: { getTableConfigOutPut: "getTableConfigOutPut", oRowClick: "oRowClick", onrightClickContextSelection: "onrightClickContextSelection" }, viewQueries: [{ propertyName: "googlMap", first: true, predicate: ["googlMap"], descendants: true }], ngImport: i0, template: "\n<div class=\"mx-2 bg-gray-800\">\n    <ng-container *ngIf=\"isLoader\">\n        <div class=\"flex justify-center items-start bg-gray-800 p-2\">\n            <app-loader></app-loader>\n        </div>\n    </ng-container>\n\n    <div class=\"mx-2 pb-2\">\n\n      <ng-container>\n        <div id=\"regions_div\" #googlMap style=\"width: 100%\" ></div>    \n      </ng-container>\n      \n       \n\n    </div>\n\n\n</div>\n", dependencies: [{ kind: "directive", type: i4$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LoaderComponent, selector: "app-loader" }] });
+GammaGeoChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: GammaGeoChartComponent, selector: "app-gamma-geo-chart", inputs: { rightClickEnable: "rightClickEnable", chartDataSource: "chartDataSource" }, outputs: { getTableConfigOutPut: "getTableConfigOutPut", oRowClick: "oRowClick", onrightClickContextSelection: "onrightClickContextSelection" }, viewQueries: [{ propertyName: "googlMap", first: true, predicate: ["googlMap"], descendants: true }], ngImport: i0, template: "<div class=\"mx-2 bg-gray-800\">\n  <ng-container *ngIf=\"isLoader\">\n    <div class=\"flex justify-center items-start bg-gray-800 p-2\">\n      <app-loader></app-loader>\n    </div>\n  </ng-container>\n\n  <div class=\"mx-2 pb-2\">\n\n    <ng-container>\n      <div id=\"regions_div\" #googlMap style=\"width: 100%\"></div>\n      <div id=\"googlemap\" style=\"width: 100%;\" [style.height]=\"chartHeight\"></div>\n\n    </ng-container>\n\n\n\n  </div>\n\n\n</div>", dependencies: [{ kind: "directive", type: i4$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LoaderComponent, selector: "app-loader" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: GammaGeoChartComponent, decorators: [{
             type: Component,
-            args: [{ selector: "app-gamma-geo-chart", template: "\n<div class=\"mx-2 bg-gray-800\">\n    <ng-container *ngIf=\"isLoader\">\n        <div class=\"flex justify-center items-start bg-gray-800 p-2\">\n            <app-loader></app-loader>\n        </div>\n    </ng-container>\n\n    <div class=\"mx-2 pb-2\">\n\n      <ng-container>\n        <div id=\"regions_div\" #googlMap style=\"width: 100%\" ></div>    \n      </ng-container>\n      \n       \n\n    </div>\n\n\n</div>\n" }]
+            args: [{ selector: "app-gamma-geo-chart", template: "<div class=\"mx-2 bg-gray-800\">\n  <ng-container *ngIf=\"isLoader\">\n    <div class=\"flex justify-center items-start bg-gray-800 p-2\">\n      <app-loader></app-loader>\n    </div>\n  </ng-container>\n\n  <div class=\"mx-2 pb-2\">\n\n    <ng-container>\n      <div id=\"regions_div\" #googlMap style=\"width: 100%\"></div>\n      <div id=\"googlemap\" style=\"width: 100%;\" [style.height]=\"chartHeight\"></div>\n\n    </ng-container>\n\n\n\n  </div>\n\n\n</div>" }]
         }], ctorParameters: function () { return [{ type: CommonService }]; }, propDecorators: { googlMap: [{
                 type: ViewChild,
                 args: ["googlMap"]
@@ -13442,6 +13553,7 @@ class ApplicationCreateMenuComponent {
             menuId: "",
             title: "",
             subtitle: "",
+            aliases: [],
             type: "",
             active: true,
             disabled: false,
@@ -13568,10 +13680,10 @@ class ApplicationCreateMenuComponent {
     }
 }
 ApplicationCreateMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ApplicationCreateMenuComponent, deps: [{ token: CommonService }, { token: ApplicationContentService }, { token: i4$1.ToastrService }, { token: i2.ActivatedRoute }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component });
-ApplicationCreateMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ApplicationCreateMenuComponent, selector: "lib-application-create-menu", ngImport: i0, template: "<div class=\"flex flex-col flex-auto min-w-0\">\n\n    <lib-common-header [pageTitle]=\"'Add Menu'\"></lib-common-header>\n\n    <div class=\"p-4 w-full\">\n        <div class=\"m-3 p-4 bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700\">\n            <h6 class=\"mb-2 text-lg tracking-tight text-gray-900\n                dark:text-white border-b pb-3 flex items-center\">\n                Basic Information\n                <div class=\"ml-auto\">\n                    <button class=\"{{commonservice.btn_purple_md}}\" (click)=\"menuList()\">\n                        All Menu Items\n                    </button>\n                </div>\n            </h6>\n\n            <div class=\"w-full m-2\">\n                <div class=\"flex flex-row\">\n                    <div class=\"mx-2 w-1/3\">\n                        <div class=\"text-md p-2 capitalize\">Menu Type</div>\n                        <div class=\"\">\n                            <dx-select-box [items]=\"['child','parent']\" [(ngModel)]=\"menuObject.menuType\"\n                                (onValueChanged)=\"getMenuType($event)\"></dx-select-box>\n                        </div>\n                    </div>\n                    <div class=\"mx-2 w-1/3\">\n                        <div class=\"text-md p-2 capitalize\">Parent Menu</div>\n                        <div class=\"\">\n                            <dx-select-box [showClearButton]=\"true\" [value]=\"defaultSelectedParent\"\n                                (onValueChanged)=\"getMenuTidType($event)\" [items]=\"paparentMenuDatasource\"\n                                valueExpr=\"menuId\" displayExpr=\"title\"></dx-select-box>\n                        </div>\n                    </div>\n                    <div class=\"mx-2 w-1/3\">\n                        <div class=\"text-md p-2 capitalize\">Parent Menu TID</div>\n                        <div class=\"\">\n                            <dx-text-box [(ngModel)]=\"menuObject.parentMenuTid\"></dx-text-box>\n                        </div>\n                    </div>\n                    <div class=\"mx-2 w-1/3\">\n                        <div class=\"text-md p-2 capitalize\">Child Menu TID</div>\n                        <div class=\"\">\n                            <dx-text-box [(ngModel)]=\"menuObject.childMenuTid\"\n                                [value]=\"menuObject.childMenuTid\"></dx-text-box>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n\n    <ng-container *ngIf=\"ismenuContainer\">\n        <div class=\"p-4 w-full\">\n            <div\n                class=\"m-3 p-4 bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700\">\n                <h6 class=\"mb-2 text-lg tracking-tight text-gray-900\n                dark:text-white border-b pb-3 flex items-center\">\n                    Item Information\n                    <div class=\"ml-auto\">\n\n                    </div>\n                </h6>\n\n                <div class=\"w-full m-2\">\n                    <div class=\"flex flex-row\">\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">Menu ID</div>\n                            <div class=\"\">\n                                <dx-text-box [(ngModel)]=\"menuObject.menuId\"></dx-text-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">Title</div>\n                            <div class=\"\">\n                                <dx-text-box [(ngModel)]=\"menuObject.title\"></dx-text-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">subtitle</div>\n                            <div class=\"\">\n                                <dx-text-box [(ngModel)]=\"menuObject.subtitle\"></dx-text-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">Type</div>\n                            <div class=\"\">\n                                <dx-select-box [items]=\"['aside','basic','collapsable','divider','group','spacer']\"\n                                    [(ngModel)]=\"menuObject.type\"></dx-select-box>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"flex flex-row mt-2\">\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">tooltip</div>\n                            <div class=\"\">\n                                <dx-text-box [(ngModel)]=\"menuObject.tooltip\"></dx-text-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">link</div>\n                            <div class=\"\">\n                                <dx-text-box [(ngModel)]=\"menuObject.link\"></dx-text-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">fragment</div>\n                            <div class=\"\">\n                                <dx-text-box [(ngModel)]=\"menuObject.fragment\"></dx-text-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">target</div>\n                            <div class=\"\">\n                                <dx-select-box [items]=\"['_blank','_self','_parent','_top']\"\n                                    [(ngModel)]=\"menuObject.target\"></dx-select-box>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"flex flex-row mt-2\">\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">preserveFragment</div>\n                            <div class=\"\">\n                                <dx-text-box [(ngModel)]=\"menuObject.preserveFragment\"></dx-text-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">queryParams</div>\n                            <div class=\"\">\n                                <dx-text-box [(ngModel)]=\"selectedQueryParamStr\"></dx-text-box>\n                            </div>\n                        </div>\n\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">icon</div>\n                            <div class=\"\">\n                                <dx-text-box [(ngModel)]=\"menuObject.icon\"></dx-text-box>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"flex flex-row mt-2\">\n\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"m-10\">\n                                <dx-check-box [(ngModel)]=\"menuObject.children\" text=\"Children\"></dx-check-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n\n                            <div class=\"mt-10\">\n                                <dx-check-box [(ngModel)]=\"menuObject.externalLink\" text=\"External Link\"></dx-check-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"mt-10\">\n                                <dx-check-box [(ngModel)]=\"menuObject.active\" text=\"Active\"></dx-check-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"mt-10\">\n                                <dx-check-box [(ngModel)]=\"menuObject.disabled\" text=\"Disabled\"></dx-check-box>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"flex flex-row mt-2\">\n\n                        <div class=\"mx-2 w-full\">\n                            <textarea id=\"message\" rows=\"7\"\n                                class=\"block p-2.5 w-full text-lg text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500\"\n                                placeholder=\"Write Menu Description\" [(ngModel)]=\"menuObject.description\"\n                                id=\"exampleTextarea\"></textarea>\n                        </div>\n\n                    </div>\n                </div>\n\n            </div>\n        </div>\n\n\n        <div class=\"p-4 w-full\">\n            <div\n                class=\"m-3 p-4 bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700\">\n\n\n                <app-user-access [(userOptionContainer)]=\"userOptionContainer\">\n                </app-user-access>\n\n                <div class=\"flex flex-row justify-end mt-4 border-t mt-8 py-4\" *ngIf=\"!isContentType\">\n                    <div class=\"{{commonservice.btn_success_md}}\" (click)=\"submitNewMenu()\">Create Menu</div>\n                </div>\n                <div class=\"flex flex-row justify-end mt-4 border-t mt-8 py-4\" *ngIf=\"isContentType\">\n                    <div class=\"{{commonservice.btn_success_md}}\" (click)=\"updateMenu()\">Update Menu</div>\n                </div>\n\n            </div>\n        </div>\n    </ng-container>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i4$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5$1.DxCheckBoxComponent, selector: "dx-check-box", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "iconSize", "isValid", "name", "readOnly", "rtlEnabled", "tabIndex", "text", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "visible", "width"], outputs: ["onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconSizeChange", "isValidChange", "nameChange", "readOnlyChange", "rtlEnabledChange", "tabIndexChange", "textChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "component", type: i6$1.DxSelectBoxComponent, selector: "dx-select-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "buttons", "dataSource", "deferRendering", "disabled", "displayExpr", "displayValue", "dropDownButtonTemplate", "dropDownOptions", "elementAttr", "fieldTemplate", "focusStateEnabled", "grouped", "groupTemplate", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "items", "itemTemplate", "label", "labelMode", "maxLength", "minSearchLength", "name", "noDataText", "opened", "openOnFieldClick", "placeholder", "readOnly", "rtlEnabled", "searchEnabled", "searchExpr", "searchMode", "searchTimeout", "selectedItem", "showClearButton", "showDataBeforeSearch", "showDropDownButton", "showSelectionControls", "spellcheck", "stylingMode", "tabIndex", "text", "useItemTextAsTitle", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueChangeEvent", "valueExpr", "visible", "width", "wrapItemText"], outputs: ["onChange", "onClosed", "onContentReady", "onCopy", "onCustomItemCreating", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onItemClick", "onKeyDown", "onKeyUp", "onOpened", "onOptionChanged", "onPaste", "onSelectionChanged", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "dataSourceChange", "deferRenderingChange", "disabledChange", "displayExprChange", "displayValueChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "elementAttrChange", "fieldTemplateChange", "focusStateEnabledChange", "groupedChange", "groupTemplateChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "itemsChange", "itemTemplateChange", "labelChange", "labelModeChange", "maxLengthChange", "minSearchLengthChange", "nameChange", "noDataTextChange", "openedChange", "openOnFieldClickChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "searchEnabledChange", "searchExprChange", "searchModeChange", "searchTimeoutChange", "selectedItemChange", "showClearButtonChange", "showDataBeforeSearchChange", "showDropDownButtonChange", "showSelectionControlsChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useItemTextAsTitleChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "valueExprChange", "visibleChange", "widthChange", "wrapItemTextChange", "onBlur"] }, { kind: "component", type: i7.DxTextBoxComponent, selector: "dx-text-box", inputs: ["accessKey", "activeStateEnabled", "buttons", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "label", "labelMode", "mask", "maskChar", "maskInvalidMessage", "maskRules", "maxLength", "mode", "name", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showMaskMode", "spellcheck", "stylingMode", "tabIndex", "text", "useMaskedValue", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueChangeEvent", "visible", "width"], outputs: ["onChange", "onContentReady", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOptionChanged", "onPaste", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "labelChange", "labelModeChange", "maskChange", "maskCharChange", "maskInvalidMessageChange", "maskRulesChange", "maxLengthChange", "modeChange", "nameChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showMaskModeChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useMaskedValueChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: UserAccessComponent, selector: "app-user-access", inputs: ["userOptionContainer"], outputs: ["userOptionContainerChange"] }, { kind: "component", type: CommonHeaderComponent, selector: "lib-common-header", inputs: ["pageTitle"] }] });
+ApplicationCreateMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ApplicationCreateMenuComponent, selector: "lib-application-create-menu", ngImport: i0, template: "<div class=\"flex flex-col flex-auto min-w-0\">\n\n    <lib-common-header [pageTitle]=\"'Add Menu'\"></lib-common-header>\n\n    <div class=\"p-4 w-full\">\n        <div class=\"m-3 p-4 bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700\">\n            <h6 class=\"mb-2 text-lg tracking-tight text-gray-900\n                dark:text-white border-b pb-3 flex items-center\">\n                Basic Information\n                <div class=\"ml-auto\">\n                    <button class=\"{{commonservice.btn_purple_md}}\" (click)=\"menuList()\">\n                        All Menu Items\n                    </button>\n                </div>\n            </h6>\n\n            <div class=\"w-full m-2\">\n                <div class=\"flex flex-row\">\n                    <div class=\"mx-2 w-1/3\">\n                        <div class=\"text-md p-2 capitalize\">Menu Type</div>\n                        <div class=\"\">\n                            <dx-select-box [items]=\"['child','parent']\" [(ngModel)]=\"menuObject.menuType\"\n                                (onValueChanged)=\"getMenuType($event)\"></dx-select-box>\n                        </div>\n                    </div>\n                    <div class=\"mx-2 w-1/3\">\n                        <div class=\"text-md p-2 capitalize\">Parent Menu</div>\n                        <div class=\"\">\n                            <dx-select-box [showClearButton]=\"true\" [value]=\"defaultSelectedParent\"\n                                (onValueChanged)=\"getMenuTidType($event)\" [items]=\"paparentMenuDatasource\"\n                                valueExpr=\"menuId\" displayExpr=\"title\"></dx-select-box>\n                        </div>\n                    </div>\n                    <div class=\"mx-2 w-1/3\">\n                        <div class=\"text-md p-2 capitalize\">Parent Menu TID</div>\n                        <div class=\"\">\n                            <dx-text-box [(ngModel)]=\"menuObject.parentMenuTid\"></dx-text-box>\n                        </div>\n                    </div>\n                    <div class=\"mx-2 w-1/3\">\n                        <div class=\"text-md p-2 capitalize\">Child Menu TID</div>\n                        <div class=\"\">\n                            <dx-text-box [(ngModel)]=\"menuObject.childMenuTid\"\n                                [value]=\"menuObject.childMenuTid\"></dx-text-box>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n\n    <ng-container *ngIf=\"ismenuContainer\">\n        <div class=\"p-4 w-full\">\n            <div\n                class=\"m-3 p-4 bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700\">\n                <h6 class=\"mb-2 text-lg tracking-tight text-gray-900\n                dark:text-white border-b pb-3 flex items-center\">\n                    Item Information\n                    <div class=\"ml-auto\">\n\n                    </div>\n                </h6>\n\n                <div class=\"w-full m-2\">\n                    <div class=\"flex flex-row\">\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">Menu ID</div>\n                            <div class=\"\">\n                                <dx-text-box [(ngModel)]=\"menuObject.menuId\"></dx-text-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">Title</div>\n                            <div class=\"\">\n                                <dx-text-box [(ngModel)]=\"menuObject.title\"></dx-text-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">Aliases</div>\n                            <div class=\"\">\n                                <dx-tag-box [acceptCustomValue]=\"true\" [(ngModel)]=\"menuObject.aliases\"></dx-tag-box>\n\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">subtitle</div>\n                            <div class=\"\">\n                                <dx-text-box [(ngModel)]=\"menuObject.subtitle\"></dx-text-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">Type</div>\n                            <div class=\"\">\n                                <dx-select-box [items]=\"['aside','basic','collapsable','divider','group','spacer']\"\n                                    [(ngModel)]=\"menuObject.type\"></dx-select-box>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"flex flex-row mt-2\">\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">tooltip</div>\n                            <div class=\"\">\n                                <dx-text-box [(ngModel)]=\"menuObject.tooltip\"></dx-text-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">link</div>\n                            <div class=\"\">\n                                <dx-text-box [(ngModel)]=\"menuObject.link\"></dx-text-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">fragment</div>\n                            <div class=\"\">\n                                <dx-text-box [(ngModel)]=\"menuObject.fragment\"></dx-text-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">target</div>\n                            <div class=\"\">\n                                <dx-select-box [items]=\"['_blank','_self','_parent','_top']\"\n                                    [(ngModel)]=\"menuObject.target\"></dx-select-box>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"flex flex-row mt-2\">\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">preserveFragment</div>\n                            <div class=\"\">\n                                <dx-text-box [(ngModel)]=\"menuObject.preserveFragment\"></dx-text-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">queryParams</div>\n                            <div class=\"\">\n                                <dx-text-box [(ngModel)]=\"selectedQueryParamStr\"></dx-text-box>\n                            </div>\n                        </div>\n\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">icon</div>\n                            <div class=\"\">\n                                <dx-text-box [(ngModel)]=\"menuObject.icon\"></dx-text-box>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"flex flex-row mt-2\">\n\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"m-10\">\n                                <dx-check-box [(ngModel)]=\"menuObject.children\" text=\"Children\"></dx-check-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n\n                            <div class=\"mt-10\">\n                                <dx-check-box [(ngModel)]=\"menuObject.externalLink\" text=\"External Link\"></dx-check-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"mt-10\">\n                                <dx-check-box [(ngModel)]=\"menuObject.active\" text=\"Active\"></dx-check-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"mt-10\">\n                                <dx-check-box [(ngModel)]=\"menuObject.disabled\" text=\"Disabled\"></dx-check-box>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"flex flex-row mt-2\">\n\n                        <div class=\"mx-2 w-full\">\n                            <textarea id=\"message\" rows=\"7\"\n                                class=\"block p-2.5 w-full text-lg text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500\"\n                                placeholder=\"Write Menu Description\" [(ngModel)]=\"menuObject.description\"\n                                id=\"exampleTextarea\"></textarea>\n                        </div>\n\n                    </div>\n                </div>\n\n            </div>\n        </div>\n\n\n        <div class=\"p-4 w-full\">\n            <div\n                class=\"m-3 p-4 bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700\">\n\n\n                <app-user-access [(userOptionContainer)]=\"userOptionContainer\">\n                </app-user-access>\n\n                <div class=\"flex flex-row justify-end mt-4 border-t mt-8 py-4\" *ngIf=\"!isContentType\">\n                    <div class=\"{{commonservice.btn_success_md}}\" (click)=\"submitNewMenu()\">Create Menu</div>\n                </div>\n                <div class=\"flex flex-row justify-end mt-4 border-t mt-8 py-4\" *ngIf=\"isContentType\">\n                    <div class=\"{{commonservice.btn_success_md}}\" (click)=\"updateMenu()\">Update Menu</div>\n                </div>\n\n            </div>\n        </div>\n    </ng-container>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i4$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5$1.DxCheckBoxComponent, selector: "dx-check-box", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "iconSize", "isValid", "name", "readOnly", "rtlEnabled", "tabIndex", "text", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "visible", "width"], outputs: ["onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconSizeChange", "isValidChange", "nameChange", "readOnlyChange", "rtlEnabledChange", "tabIndexChange", "textChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "component", type: i6$1.DxSelectBoxComponent, selector: "dx-select-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "buttons", "dataSource", "deferRendering", "disabled", "displayExpr", "displayValue", "dropDownButtonTemplate", "dropDownOptions", "elementAttr", "fieldTemplate", "focusStateEnabled", "grouped", "groupTemplate", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "items", "itemTemplate", "label", "labelMode", "maxLength", "minSearchLength", "name", "noDataText", "opened", "openOnFieldClick", "placeholder", "readOnly", "rtlEnabled", "searchEnabled", "searchExpr", "searchMode", "searchTimeout", "selectedItem", "showClearButton", "showDataBeforeSearch", "showDropDownButton", "showSelectionControls", "spellcheck", "stylingMode", "tabIndex", "text", "useItemTextAsTitle", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueChangeEvent", "valueExpr", "visible", "width", "wrapItemText"], outputs: ["onChange", "onClosed", "onContentReady", "onCopy", "onCustomItemCreating", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onItemClick", "onKeyDown", "onKeyUp", "onOpened", "onOptionChanged", "onPaste", "onSelectionChanged", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "dataSourceChange", "deferRenderingChange", "disabledChange", "displayExprChange", "displayValueChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "elementAttrChange", "fieldTemplateChange", "focusStateEnabledChange", "groupedChange", "groupTemplateChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "itemsChange", "itemTemplateChange", "labelChange", "labelModeChange", "maxLengthChange", "minSearchLengthChange", "nameChange", "noDataTextChange", "openedChange", "openOnFieldClickChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "searchEnabledChange", "searchExprChange", "searchModeChange", "searchTimeoutChange", "selectedItemChange", "showClearButtonChange", "showDataBeforeSearchChange", "showDropDownButtonChange", "showSelectionControlsChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useItemTextAsTitleChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "valueExprChange", "visibleChange", "widthChange", "wrapItemTextChange", "onBlur"] }, { kind: "component", type: i8$1.DxTagBoxComponent, selector: "dx-tag-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "applyValueMode", "buttons", "dataSource", "deferRendering", "disabled", "displayExpr", "dropDownButtonTemplate", "dropDownOptions", "elementAttr", "fieldTemplate", "focusStateEnabled", "grouped", "groupTemplate", "height", "hideSelectedItems", "hint", "hoverStateEnabled", "inputAttr", "isValid", "items", "itemTemplate", "label", "labelMode", "maxDisplayedTags", "maxFilterQueryLength", "maxLength", "minSearchLength", "multiline", "name", "noDataText", "opened", "openOnFieldClick", "placeholder", "readOnly", "rtlEnabled", "searchEnabled", "searchExpr", "searchMode", "searchTimeout", "selectAllMode", "selectAllText", "selectedItems", "showClearButton", "showDataBeforeSearch", "showDropDownButton", "showMultiTagOnly", "showSelectionControls", "stylingMode", "tabIndex", "tagTemplate", "text", "useItemTextAsTitle", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueExpr", "visible", "width", "wrapItemText"], outputs: ["onChange", "onClosed", "onContentReady", "onCustomItemCreating", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onItemClick", "onKeyDown", "onKeyUp", "onMultiTagPreparing", "onOpened", "onOptionChanged", "onSelectAllValueChanged", "onSelectionChanged", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "applyValueModeChange", "buttonsChange", "dataSourceChange", "deferRenderingChange", "disabledChange", "displayExprChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "elementAttrChange", "fieldTemplateChange", "focusStateEnabledChange", "groupedChange", "groupTemplateChange", "heightChange", "hideSelectedItemsChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "itemsChange", "itemTemplateChange", "labelChange", "labelModeChange", "maxDisplayedTagsChange", "maxFilterQueryLengthChange", "maxLengthChange", "minSearchLengthChange", "multilineChange", "nameChange", "noDataTextChange", "openedChange", "openOnFieldClickChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "searchEnabledChange", "searchExprChange", "searchModeChange", "searchTimeoutChange", "selectAllModeChange", "selectAllTextChange", "selectedItemsChange", "showClearButtonChange", "showDataBeforeSearchChange", "showDropDownButtonChange", "showMultiTagOnlyChange", "showSelectionControlsChange", "stylingModeChange", "tabIndexChange", "tagTemplateChange", "textChange", "useItemTextAsTitleChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueExprChange", "visibleChange", "widthChange", "wrapItemTextChange", "onBlur"] }, { kind: "component", type: i7.DxTextBoxComponent, selector: "dx-text-box", inputs: ["accessKey", "activeStateEnabled", "buttons", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "label", "labelMode", "mask", "maskChar", "maskInvalidMessage", "maskRules", "maxLength", "mode", "name", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showMaskMode", "spellcheck", "stylingMode", "tabIndex", "text", "useMaskedValue", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueChangeEvent", "visible", "width"], outputs: ["onChange", "onContentReady", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOptionChanged", "onPaste", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "labelChange", "labelModeChange", "maskChange", "maskCharChange", "maskInvalidMessageChange", "maskRulesChange", "maxLengthChange", "modeChange", "nameChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showMaskModeChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useMaskedValueChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: UserAccessComponent, selector: "app-user-access", inputs: ["userOptionContainer"], outputs: ["userOptionContainerChange"] }, { kind: "component", type: CommonHeaderComponent, selector: "lib-common-header", inputs: ["pageTitle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ApplicationCreateMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-application-create-menu', template: "<div class=\"flex flex-col flex-auto min-w-0\">\n\n    <lib-common-header [pageTitle]=\"'Add Menu'\"></lib-common-header>\n\n    <div class=\"p-4 w-full\">\n        <div class=\"m-3 p-4 bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700\">\n            <h6 class=\"mb-2 text-lg tracking-tight text-gray-900\n                dark:text-white border-b pb-3 flex items-center\">\n                Basic Information\n                <div class=\"ml-auto\">\n                    <button class=\"{{commonservice.btn_purple_md}}\" (click)=\"menuList()\">\n                        All Menu Items\n                    </button>\n                </div>\n            </h6>\n\n            <div class=\"w-full m-2\">\n                <div class=\"flex flex-row\">\n                    <div class=\"mx-2 w-1/3\">\n                        <div class=\"text-md p-2 capitalize\">Menu Type</div>\n                        <div class=\"\">\n                            <dx-select-box [items]=\"['child','parent']\" [(ngModel)]=\"menuObject.menuType\"\n                                (onValueChanged)=\"getMenuType($event)\"></dx-select-box>\n                        </div>\n                    </div>\n                    <div class=\"mx-2 w-1/3\">\n                        <div class=\"text-md p-2 capitalize\">Parent Menu</div>\n                        <div class=\"\">\n                            <dx-select-box [showClearButton]=\"true\" [value]=\"defaultSelectedParent\"\n                                (onValueChanged)=\"getMenuTidType($event)\" [items]=\"paparentMenuDatasource\"\n                                valueExpr=\"menuId\" displayExpr=\"title\"></dx-select-box>\n                        </div>\n                    </div>\n                    <div class=\"mx-2 w-1/3\">\n                        <div class=\"text-md p-2 capitalize\">Parent Menu TID</div>\n                        <div class=\"\">\n                            <dx-text-box [(ngModel)]=\"menuObject.parentMenuTid\"></dx-text-box>\n                        </div>\n                    </div>\n                    <div class=\"mx-2 w-1/3\">\n                        <div class=\"text-md p-2 capitalize\">Child Menu TID</div>\n                        <div class=\"\">\n                            <dx-text-box [(ngModel)]=\"menuObject.childMenuTid\"\n                                [value]=\"menuObject.childMenuTid\"></dx-text-box>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n\n    <ng-container *ngIf=\"ismenuContainer\">\n        <div class=\"p-4 w-full\">\n            <div\n                class=\"m-3 p-4 bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700\">\n                <h6 class=\"mb-2 text-lg tracking-tight text-gray-900\n                dark:text-white border-b pb-3 flex items-center\">\n                    Item Information\n                    <div class=\"ml-auto\">\n\n                    </div>\n                </h6>\n\n                <div class=\"w-full m-2\">\n                    <div class=\"flex flex-row\">\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">Menu ID</div>\n                            <div class=\"\">\n                                <dx-text-box [(ngModel)]=\"menuObject.menuId\"></dx-text-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">Title</div>\n                            <div class=\"\">\n                                <dx-text-box [(ngModel)]=\"menuObject.title\"></dx-text-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">subtitle</div>\n                            <div class=\"\">\n                                <dx-text-box [(ngModel)]=\"menuObject.subtitle\"></dx-text-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">Type</div>\n                            <div class=\"\">\n                                <dx-select-box [items]=\"['aside','basic','collapsable','divider','group','spacer']\"\n                                    [(ngModel)]=\"menuObject.type\"></dx-select-box>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"flex flex-row mt-2\">\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">tooltip</div>\n                            <div class=\"\">\n                                <dx-text-box [(ngModel)]=\"menuObject.tooltip\"></dx-text-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">link</div>\n                            <div class=\"\">\n                                <dx-text-box [(ngModel)]=\"menuObject.link\"></dx-text-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">fragment</div>\n                            <div class=\"\">\n                                <dx-text-box [(ngModel)]=\"menuObject.fragment\"></dx-text-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">target</div>\n                            <div class=\"\">\n                                <dx-select-box [items]=\"['_blank','_self','_parent','_top']\"\n                                    [(ngModel)]=\"menuObject.target\"></dx-select-box>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"flex flex-row mt-2\">\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">preserveFragment</div>\n                            <div class=\"\">\n                                <dx-text-box [(ngModel)]=\"menuObject.preserveFragment\"></dx-text-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">queryParams</div>\n                            <div class=\"\">\n                                <dx-text-box [(ngModel)]=\"selectedQueryParamStr\"></dx-text-box>\n                            </div>\n                        </div>\n\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">icon</div>\n                            <div class=\"\">\n                                <dx-text-box [(ngModel)]=\"menuObject.icon\"></dx-text-box>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"flex flex-row mt-2\">\n\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"m-10\">\n                                <dx-check-box [(ngModel)]=\"menuObject.children\" text=\"Children\"></dx-check-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n\n                            <div class=\"mt-10\">\n                                <dx-check-box [(ngModel)]=\"menuObject.externalLink\" text=\"External Link\"></dx-check-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"mt-10\">\n                                <dx-check-box [(ngModel)]=\"menuObject.active\" text=\"Active\"></dx-check-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"mt-10\">\n                                <dx-check-box [(ngModel)]=\"menuObject.disabled\" text=\"Disabled\"></dx-check-box>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"flex flex-row mt-2\">\n\n                        <div class=\"mx-2 w-full\">\n                            <textarea id=\"message\" rows=\"7\"\n                                class=\"block p-2.5 w-full text-lg text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500\"\n                                placeholder=\"Write Menu Description\" [(ngModel)]=\"menuObject.description\"\n                                id=\"exampleTextarea\"></textarea>\n                        </div>\n\n                    </div>\n                </div>\n\n            </div>\n        </div>\n\n\n        <div class=\"p-4 w-full\">\n            <div\n                class=\"m-3 p-4 bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700\">\n\n\n                <app-user-access [(userOptionContainer)]=\"userOptionContainer\">\n                </app-user-access>\n\n                <div class=\"flex flex-row justify-end mt-4 border-t mt-8 py-4\" *ngIf=\"!isContentType\">\n                    <div class=\"{{commonservice.btn_success_md}}\" (click)=\"submitNewMenu()\">Create Menu</div>\n                </div>\n                <div class=\"flex flex-row justify-end mt-4 border-t mt-8 py-4\" *ngIf=\"isContentType\">\n                    <div class=\"{{commonservice.btn_success_md}}\" (click)=\"updateMenu()\">Update Menu</div>\n                </div>\n\n            </div>\n        </div>\n    </ng-container>\n</div>" }]
+            args: [{ selector: 'lib-application-create-menu', template: "<div class=\"flex flex-col flex-auto min-w-0\">\n\n    <lib-common-header [pageTitle]=\"'Add Menu'\"></lib-common-header>\n\n    <div class=\"p-4 w-full\">\n        <div class=\"m-3 p-4 bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700\">\n            <h6 class=\"mb-2 text-lg tracking-tight text-gray-900\n                dark:text-white border-b pb-3 flex items-center\">\n                Basic Information\n                <div class=\"ml-auto\">\n                    <button class=\"{{commonservice.btn_purple_md}}\" (click)=\"menuList()\">\n                        All Menu Items\n                    </button>\n                </div>\n            </h6>\n\n            <div class=\"w-full m-2\">\n                <div class=\"flex flex-row\">\n                    <div class=\"mx-2 w-1/3\">\n                        <div class=\"text-md p-2 capitalize\">Menu Type</div>\n                        <div class=\"\">\n                            <dx-select-box [items]=\"['child','parent']\" [(ngModel)]=\"menuObject.menuType\"\n                                (onValueChanged)=\"getMenuType($event)\"></dx-select-box>\n                        </div>\n                    </div>\n                    <div class=\"mx-2 w-1/3\">\n                        <div class=\"text-md p-2 capitalize\">Parent Menu</div>\n                        <div class=\"\">\n                            <dx-select-box [showClearButton]=\"true\" [value]=\"defaultSelectedParent\"\n                                (onValueChanged)=\"getMenuTidType($event)\" [items]=\"paparentMenuDatasource\"\n                                valueExpr=\"menuId\" displayExpr=\"title\"></dx-select-box>\n                        </div>\n                    </div>\n                    <div class=\"mx-2 w-1/3\">\n                        <div class=\"text-md p-2 capitalize\">Parent Menu TID</div>\n                        <div class=\"\">\n                            <dx-text-box [(ngModel)]=\"menuObject.parentMenuTid\"></dx-text-box>\n                        </div>\n                    </div>\n                    <div class=\"mx-2 w-1/3\">\n                        <div class=\"text-md p-2 capitalize\">Child Menu TID</div>\n                        <div class=\"\">\n                            <dx-text-box [(ngModel)]=\"menuObject.childMenuTid\"\n                                [value]=\"menuObject.childMenuTid\"></dx-text-box>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n\n    <ng-container *ngIf=\"ismenuContainer\">\n        <div class=\"p-4 w-full\">\n            <div\n                class=\"m-3 p-4 bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700\">\n                <h6 class=\"mb-2 text-lg tracking-tight text-gray-900\n                dark:text-white border-b pb-3 flex items-center\">\n                    Item Information\n                    <div class=\"ml-auto\">\n\n                    </div>\n                </h6>\n\n                <div class=\"w-full m-2\">\n                    <div class=\"flex flex-row\">\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">Menu ID</div>\n                            <div class=\"\">\n                                <dx-text-box [(ngModel)]=\"menuObject.menuId\"></dx-text-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">Title</div>\n                            <div class=\"\">\n                                <dx-text-box [(ngModel)]=\"menuObject.title\"></dx-text-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">Aliases</div>\n                            <div class=\"\">\n                                <dx-tag-box [acceptCustomValue]=\"true\" [(ngModel)]=\"menuObject.aliases\"></dx-tag-box>\n\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">subtitle</div>\n                            <div class=\"\">\n                                <dx-text-box [(ngModel)]=\"menuObject.subtitle\"></dx-text-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">Type</div>\n                            <div class=\"\">\n                                <dx-select-box [items]=\"['aside','basic','collapsable','divider','group','spacer']\"\n                                    [(ngModel)]=\"menuObject.type\"></dx-select-box>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"flex flex-row mt-2\">\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">tooltip</div>\n                            <div class=\"\">\n                                <dx-text-box [(ngModel)]=\"menuObject.tooltip\"></dx-text-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">link</div>\n                            <div class=\"\">\n                                <dx-text-box [(ngModel)]=\"menuObject.link\"></dx-text-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">fragment</div>\n                            <div class=\"\">\n                                <dx-text-box [(ngModel)]=\"menuObject.fragment\"></dx-text-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">target</div>\n                            <div class=\"\">\n                                <dx-select-box [items]=\"['_blank','_self','_parent','_top']\"\n                                    [(ngModel)]=\"menuObject.target\"></dx-select-box>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"flex flex-row mt-2\">\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">preserveFragment</div>\n                            <div class=\"\">\n                                <dx-text-box [(ngModel)]=\"menuObject.preserveFragment\"></dx-text-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">queryParams</div>\n                            <div class=\"\">\n                                <dx-text-box [(ngModel)]=\"selectedQueryParamStr\"></dx-text-box>\n                            </div>\n                        </div>\n\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">icon</div>\n                            <div class=\"\">\n                                <dx-text-box [(ngModel)]=\"menuObject.icon\"></dx-text-box>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"flex flex-row mt-2\">\n\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"m-10\">\n                                <dx-check-box [(ngModel)]=\"menuObject.children\" text=\"Children\"></dx-check-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n\n                            <div class=\"mt-10\">\n                                <dx-check-box [(ngModel)]=\"menuObject.externalLink\" text=\"External Link\"></dx-check-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"mt-10\">\n                                <dx-check-box [(ngModel)]=\"menuObject.active\" text=\"Active\"></dx-check-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"mt-10\">\n                                <dx-check-box [(ngModel)]=\"menuObject.disabled\" text=\"Disabled\"></dx-check-box>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"flex flex-row mt-2\">\n\n                        <div class=\"mx-2 w-full\">\n                            <textarea id=\"message\" rows=\"7\"\n                                class=\"block p-2.5 w-full text-lg text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500\"\n                                placeholder=\"Write Menu Description\" [(ngModel)]=\"menuObject.description\"\n                                id=\"exampleTextarea\"></textarea>\n                        </div>\n\n                    </div>\n                </div>\n\n            </div>\n        </div>\n\n\n        <div class=\"p-4 w-full\">\n            <div\n                class=\"m-3 p-4 bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700\">\n\n\n                <app-user-access [(userOptionContainer)]=\"userOptionContainer\">\n                </app-user-access>\n\n                <div class=\"flex flex-row justify-end mt-4 border-t mt-8 py-4\" *ngIf=\"!isContentType\">\n                    <div class=\"{{commonservice.btn_success_md}}\" (click)=\"submitNewMenu()\">Create Menu</div>\n                </div>\n                <div class=\"flex flex-row justify-end mt-4 border-t mt-8 py-4\" *ngIf=\"isContentType\">\n                    <div class=\"{{commonservice.btn_success_md}}\" (click)=\"updateMenu()\">Update Menu</div>\n                </div>\n\n            </div>\n        </div>\n    </ng-container>\n</div>" }]
         }], ctorParameters: function () { return [{ type: CommonService }, { type: ApplicationContentService }, { type: i4$1.ToastrService }, { type: i2.ActivatedRoute }, { type: i2.Router }]; } });
 
 class PageConfigMultilayoutComponent {
@@ -17702,10 +17814,26 @@ class CreateKpiTreeComponent {
     getKpiItemValue(e) {
         if (e.event) {
             const kpi_data = this.keiParentDataSource.find((item) => item.kpiId === e.value);
-            const tidKey = this.select_tag_type === 'child' && this.isEditKpiAdded ? 'childTid' : 'parentTid';
-            this.selected_kpi_tid = kpi_data[tidKey];
+            if (this.isEditKpiAdded) {
+                const tidKey = this.select_tag_type === 'child' && this.isEditKpiAdded ? 'childTid' : 'parentTid';
+                this.selected_kpi_tid = kpi_data[tidKey];
+            }
+            else {
+                const tidKey = kpi_data.childTid && kpi_data.childTid.length > 1 ? 'childTid' : 'parentTid';
+                this.selected_kpi_tid = kpi_data[tidKey];
+                this.selected_kpi_child_tid = this.getNextChildTid(this.selected_kpi_tid, this.kpiConfigDataSource);
+            }
         }
     }
+    getNextChildTid(parentTid, kpiConfigDataSource) {
+        const children = kpiConfigDataSource.filter(item => item.parentTid === parentTid && item.childTid);
+        const maxChildNumber = children.reduce((max, item) => {
+            const parts = item.childTid.split('.');
+            const lastNumber = Number(parts[parts.length - 1]);
+            return lastNumber > max ? lastNumber : max;
+        }, 0);
+        return `${parentTid}.${maxChildNumber + 1}`;
+    }
     addNewKpi() {
         this.isNewKpiAdded = true;
         this.isEditKpiAdded = false;
@@ -17780,10 +17908,10 @@ class CreateKpiTreeComponent {
     }
 }
 CreateKpiTreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CreateKpiTreeComponent, deps: [{ token: CommonService }, { token: i8.FormBuilder }, { token: CreateKpIService }, { token: i4$1.ToastrService }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component });
-CreateKpiTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CreateKpiTreeComponent, selector: "app-create-kpi", ngImport: i0, template: "<app-loading *ngIf=\"loadingModal\"></app-loading>\n<div class=\"p-4 flex flex-row w-full\" *ngIf=\"!loadingModal\">\n    <div class=\"mx-2 bg-white dark:bg-transparent border-r\">\n        <!-- <ng-container *ngIf=\"isKpiTreePrepared\"> -->\n            <treeview class=\"dark bg-gray-900 dark:bg-transparent\" [name]=\"'mainNavigation'\" [routeKey]=\"'raKpi'\"\n                [navigation]=\"kpiData\" [isSearchBox]=\"false\" [isEditIcon]=\"true\"\n                (editableKpiData)=\"getEditableKpi($event)\">\n            </treeview>\n        <!-- </ng-container> -->\n\n    </div>\n    <div class=\"mx-2 w-full\">\n        <!-- <div class=\"flex flex-row item-center justify-center my-8\">\n            <button class=\"{{commonService.btn_warning_md}}\" (click)=\"addNewKpi()\">Add New KPI</button>\n            <button class=\"{{commonService.btn_primary_md}}\" (click)=\"routeToKpiConfig()\"\n                routerLinkActive=\"router-link-active\">Configure KPI</button>\n        </div> -->\n        <!-- <ng-container *ngIf=\"isNewKpiAdded\"> -->\n        <!-- <div class=\"px-2 w-full\"> -->\n        <div class=\"m-1\">\n            <div class=\"px-2 pt-1 w-full\">\n                <p class=\"text-lg mt-2\">Name</p>\n                <dx-text-box [(ngModel)]=\"select_kpi_name\"></dx-text-box>\n            </div>\n        </div>\n        <div class=\"flex flex-row w-full\">\n            <div class=\"m-1 w-1/3\">\n                <div class=\"px-2 pt-1  w-full\">\n                    <p class=\"text-lg mt-2\"> Tag Type</p>\n                    <dx-select-box [dataSource]=\"tagType\" [(ngModel)]=\"select_tag_type\"\n                        (onValueChanged)=\"addTagtypeValue($event)\"></dx-select-box>\n                </div>\n            </div>\n            <!-- (onCustomItemCreating)=\"onCustomDimentionCreating($event)\" -->\n            <div class=\"m-1 w-full\">\n                <div class=\"px-2 pt-1  w-full\">\n                    <p class=\"text-lg mt-2\">Aliases</p>\n                    <dx-tag-box [acceptCustomValue]=\"true\" [(ngModel)]=\"selected_aliases\"></dx-tag-box>\n                </div>\n            </div>\n        </div>\n        <div class=\"m-1\">\n            <div class=\"px-2 pt-1  w-full\">\n                <p class=\"text-lg mt-2\">Page ID</p>\n                <!-- <dx-text-box [(ngModel)]=\"selected_page_id\"></dx-text-box> -->\n                <dx-select-box [items]=\"templateDataSource\" valueExpr=\"pageId\" displayExpr=\"pageName\"\n                    [searchEnabled]=\"true\" [(ngModel)]=\"selected_page_id\"></dx-select-box>\n            </div>\n        </div>\n        <div class=\"m-1\">\n            <div class=\"px-2 pt-1  w-full\">\n                <p class=\"text-lg mt-2\">Description</p>\n                <dx-html-editor height=\"'auto'\" [(ngModel)]=\"selected_desc\">\n                    <dxo-toolbar [multiline]=\"false\">\n\n                        <dxi-item name=\"size\" [acceptedValues]=\"['8pt', '10pt', '12pt', '14pt', '18pt', '24pt', '36pt']\"\n                            [options]=\"{ inputAttr: { 'aria-label': 'Font size' } }\"></dxi-item>\n                        <dxi-item name=\"font\" [acceptedValues]=\"[\n                                    'Arial',\n                                    'Courier New',\n                                    'Georgia',\n                                    'Impact',\n                                    'Lucida Console',\n                                    'Tahoma',\n                                    'Times New Roman',\n                                    'Verdana'\n                                  ]\" [options]=\"{ inputAttr: { 'aria-label': 'Font family' } }\"></dxi-item>\n                        <dxi-item name=\"separator\"></dxi-item>\n                        <dxi-item name=\"bold\"></dxi-item>\n                        <dxi-item name=\"italic\"></dxi-item>\n                        <dxi-item name=\"underline\"></dxi-item>\n                        <dxi-item name=\"separator\"></dxi-item>\n                        <dxi-item name=\"alignLeft\"></dxi-item>\n                        <dxi-item name=\"alignCenter\"></dxi-item>\n                        <dxi-item name=\"alignRight\"></dxi-item>\n                        <dxi-item name=\"alignJustify\"></dxi-item>\n                        <dxi-item name=\"separator\"></dxi-item>\n                        <dxi-item name=\"orderedList\"></dxi-item>\n                        <dxi-item name=\"bulletList\"></dxi-item>\n                        <dxi-item name=\"separator\"></dxi-item>\n                        <dxi-item name=\"header\" [acceptedValues]=\"[false, 1, 2, 3, 4, 5]\"\n                            [options]=\"{ inputAttr: { 'aria-label': 'Header' } }\"></dxi-item>\n                        <dxi-item name=\"separator\"></dxi-item>\n                        <dxi-item name=\"color\"></dxi-item>\n                        <dxi-item name=\"background\"></dxi-item>\n                        <dxi-item name=\"separator\"></dxi-item>\n                        <dxi-item name=\"link\"></dxi-item>\n                        <dxi-item name=\"image\"></dxi-item>\n                        <dxi-item name=\"separator\"></dxi-item>\n                        <dxi-item name=\"clear\"></dxi-item>\n                        <dxi-item name=\"codeBlock\"></dxi-item>\n                    </dxo-toolbar>\n                    <dxo-media-resizing [enabled]=\"true\"> </dxo-media-resizing>\n                    <dxo-image-upload [tabs]=\"['file', 'url']\" fileUploadMode=\"base64\">\n                    </dxo-image-upload>\n                </dx-html-editor>\n            </div>\n        </div>\n\n\n        <div class=\"flex flex-row w-full\">\n            <div class=\"m-1 w-full\">\n                <div class=\"px-2 pt-1 w-full\">\n                    <p class=\"text-lg mt-2\"> Parent Component </p>\n                    <dx-select-box [items]=\"keiParentDataSource\" displayExpr=\"kpiName\" valueExpr=\"kpiId\"\n                        (onValueChanged)=\"getKpiItemValue($event)\" [(ngModel)]=\"parante_kpi_name\"></dx-select-box>\n                </div>\n            </div>\n            <div class=\"m-1 w-full\">\n                <div class=\"px-2 pt-1  w-full\">\n                    <p class=\"text-lg mt-2\">Parent TID</p>\n                    <dx-text-box [(ngModel)]=\"selected_kpi_tid\" [readOnly]=\"false\"></dx-text-box>\n                </div>\n            </div>\n            <div class=\"m-1 w-full\">\n                <div class=\"px-2 pt-1  w-full\">\n                    <p class=\"text-lg mt-2\">Child TID</p>\n                    <dx-text-box [(ngModel)]=\"selected_kpi_child_tid\" [readOnly]=\"false\"></dx-text-box>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"flex flex-row justify-between mt-3\">\n            <div class=\"px-2 pt-1  w-full\">\n                <dx-check-box [(ngModel)]=\"kpi_visibility\" text=\"Visibility\"></dx-check-box>\n            </div>\n            <div class=\"px-2 pt-1  w-full\">\n                <dx-check-box [(ngModel)]=\"kpi_external\" text=\"External KPI\"></dx-check-box>\n            </div>\n        </div>\n        <!-- <div class=\"m-1\">\n                    <div class=\"px-2 pt-1  w-full\">\n                        <p class=\"text-lg mt-2\">KPI Info</p>\n                        <dx-html-editor height=\"'auto'\" [(ngModel)]=\"selected_info\">\n                            <dxo-toolbar [multiline]=\"false\">\n\n                                <dxi-item name=\"size\"\n                                    [acceptedValues]=\"['8pt', '10pt', '12pt', '14pt', '18pt', '24pt', '36pt']\"\n                                    [options]=\"{ inputAttr: { 'aria-label': 'Font size' } }\"></dxi-item>\n                                <dxi-item name=\"font\" [acceptedValues]=\"[\n                                                    'Arial',\n                                                    'Courier New',\n                                                    'Georgia',\n                                                    'Impact',\n                                                    'Lucida Console',\n                                                    'Tahoma',\n                                                    'Times New Roman',\n                                                    'Verdana'\n                                                  ]\"\n                                    [options]=\"{ inputAttr: { 'aria-label': 'Font family' } }\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"bold\"></dxi-item>\n                                <dxi-item name=\"italic\"></dxi-item>\n                                <dxi-item name=\"underline\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"alignLeft\"></dxi-item>\n                                <dxi-item name=\"alignCenter\"></dxi-item>\n                                <dxi-item name=\"alignRight\"></dxi-item>\n                                <dxi-item name=\"alignJustify\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"orderedList\"></dxi-item>\n                                <dxi-item name=\"bulletList\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"header\" [acceptedValues]=\"[false, 1, 2, 3, 4, 5]\"\n                                    [options]=\"{ inputAttr: { 'aria-label': 'Header' } }\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"color\"></dxi-item>\n                                <dxi-item name=\"background\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"link\"></dxi-item>\n                                <dxi-item name=\"image\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"clear\"></dxi-item>\n                                <dxi-item name=\"codeBlock\"></dxi-item>\n                            </dxo-toolbar>\n                            <dxo-media-resizing [enabled]=\"true\"> </dxo-media-resizing>\n                            <dxo-image-upload [tabs]=\"['file', 'url']\" fileUploadMode=\"base64\">\n                            </dxo-image-upload>\n                        </dx-html-editor>\n                    </div>\n                </div> -->\n\n        <app-user-access [(userOptionContainer)]=\"userOptionContainer\">\n        </app-user-access>\n\n        <div class=\"flex flex-auto mt-5 justify-end\">\n            <button class=\"{{commonService.btn_success_md}}\" (click)=\"getUpdateKpi()\" *ngIf=\"isEditKpiAdded\">Update KPI\n                    </button>\n            <button class=\"{{commonService.btn_danger_md}}\" (click)=\"getDeletKpi()\" *ngIf=\"isEditKpiAdded\">Delete KPI\n                    </button>\n            <button class=\"{{commonService.btn_success_md}}\" (click)=\"makeNewKpiWithUserEntity()\" *ngIf=\"!isEditKpiAdded\">Create KPI\n            </button>\n            <button class=\"{{commonService.btn_warning_md}}\" (click)=\"getReseteKpi()\">Reset</button>\n\n        </div>\n        <!-- </div> -->\n        <!-- </ng-container> -->\n    </div>\n\n\n\n\n</div>", styles: [":host ::ng-deep treeview .treeview-wrapper{width:100%!important}\n"], dependencies: [{ kind: "directive", type: i4$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LoadingComponent$1, selector: "app-loading" }, { kind: "component", type: i6.DxiItemComponent, selector: "dxi-item", inputs: ["disabled", "html", "icon", "template", "text", "title", "visible", "onClick", "stylingMode", "type", "baseSize", "box", "ratio", "shrink", "elementAttr", "hint", "beginGroup", "closeMenuOnClick", "items", "selectable", "selected", "colSpan", "cssClass", "dataField", "editorOptions", "editorType", "helpText", "isRequired", "itemType", "label", "name", "validationRules", "visibleIndex", "alignItemLabels", "caption", "colCount", "colCountByScreen", "tabPanelOptions", "tabs", "badge", "tabTemplate", "buttonOptions", "horizontalAlignment", "verticalAlignment", "locateInMenu", "location", "menuItemTemplate", "options", "showText", "widget", "height", "width", "imageAlt", "imageSrc", "acceptedValues", "formatName", "formatValues", "key", "showChevron", "menuTemplate", "heightRatio", "widthRatio", "expanded", "hasItems", "id", "parentId"] }, { kind: "component", type: i5$1.DxCheckBoxComponent, selector: "dx-check-box", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "iconSize", "isValid", "name", "readOnly", "rtlEnabled", "tabIndex", "text", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "visible", "width"], outputs: ["onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconSizeChange", "isValidChange", "nameChange", "readOnlyChange", "rtlEnabledChange", "tabIndexChange", "textChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "component", type: i6.DxoToolbarComponent, selector: "dxo-toolbar", inputs: ["disabled", "items", "visible", "fileSelectionItems", "container", "multiline"] }, { kind: "component", type: i10$2.DxHtmlEditorComponent, selector: "dx-html-editor", inputs: ["accessKey", "activeStateEnabled", "allowSoftLineBreak", "customizeModules", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "imageUpload", "isValid", "mediaResizing", "mentions", "name", "placeholder", "readOnly", "rtlEnabled", "stylingMode", "tabIndex", "tableContextMenu", "tableResizing", "toolbar", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueType", "variables", "visible", "width"], outputs: ["onContentReady", "onDisposing", "onFocusIn", "onFocusOut", "onInitialized", "onOptionChanged", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "allowSoftLineBreakChange", "customizeModulesChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "imageUploadChange", "isValidChange", "mediaResizingChange", "mentionsChange", "nameChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "stylingModeChange", "tabIndexChange", "tableContextMenuChange", "tableResizingChange", "toolbarChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueTypeChange", "variablesChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "component", type: i6.DxoImageUploadComponent, selector: "dxo-image-upload", inputs: ["fileUploaderOptions", "fileUploadMode", "tabs", "uploadDirectory", "uploadUrl"] }, { kind: "component", type: i6.DxoMediaResizingComponent, selector: "dxo-media-resizing", inputs: ["allowedTargets", "enabled"] }, { kind: "component", type: i6$1.DxSelectBoxComponent, selector: "dx-select-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "buttons", "dataSource", "deferRendering", "disabled", "displayExpr", "displayValue", "dropDownButtonTemplate", "dropDownOptions", "elementAttr", "fieldTemplate", "focusStateEnabled", "grouped", "groupTemplate", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "items", "itemTemplate", "label", "labelMode", "maxLength", "minSearchLength", "name", "noDataText", "opened", "openOnFieldClick", "placeholder", "readOnly", "rtlEnabled", "searchEnabled", "searchExpr", "searchMode", "searchTimeout", "selectedItem", "showClearButton", "showDataBeforeSearch", "showDropDownButton", "showSelectionControls", "spellcheck", "stylingMode", "tabIndex", "text", "useItemTextAsTitle", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueChangeEvent", "valueExpr", "visible", "width", "wrapItemText"], outputs: ["onChange", "onClosed", "onContentReady", "onCopy", "onCustomItemCreating", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onItemClick", "onKeyDown", "onKeyUp", "onOpened", "onOptionChanged", "onPaste", "onSelectionChanged", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "dataSourceChange", "deferRenderingChange", "disabledChange", "displayExprChange", "displayValueChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "elementAttrChange", "fieldTemplateChange", "focusStateEnabledChange", "groupedChange", "groupTemplateChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "itemsChange", "itemTemplateChange", "labelChange", "labelModeChange", "maxLengthChange", "minSearchLengthChange", "nameChange", "noDataTextChange", "openedChange", "openOnFieldClickChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "searchEnabledChange", "searchExprChange", "searchModeChange", "searchTimeoutChange", "selectedItemChange", "showClearButtonChange", "showDataBeforeSearchChange", "showDropDownButtonChange", "showSelectionControlsChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useItemTextAsTitleChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "valueExprChange", "visibleChange", "widthChange", "wrapItemTextChange", "onBlur"] }, { kind: "component", type: i8$1.DxTagBoxComponent, selector: "dx-tag-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "applyValueMode", "buttons", "dataSource", "deferRendering", "disabled", "displayExpr", "dropDownButtonTemplate", "dropDownOptions", "elementAttr", "fieldTemplate", "focusStateEnabled", "grouped", "groupTemplate", "height", "hideSelectedItems", "hint", "hoverStateEnabled", "inputAttr", "isValid", "items", "itemTemplate", "label", "labelMode", "maxDisplayedTags", "maxFilterQueryLength", "maxLength", "minSearchLength", "multiline", "name", "noDataText", "opened", "openOnFieldClick", "placeholder", "readOnly", "rtlEnabled", "searchEnabled", "searchExpr", "searchMode", "searchTimeout", "selectAllMode", "selectAllText", "selectedItems", "showClearButton", "showDataBeforeSearch", "showDropDownButton", "showMultiTagOnly", "showSelectionControls", "stylingMode", "tabIndex", "tagTemplate", "text", "useItemTextAsTitle", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueExpr", "visible", "width", "wrapItemText"], outputs: ["onChange", "onClosed", "onContentReady", "onCustomItemCreating", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onItemClick", "onKeyDown", "onKeyUp", "onMultiTagPreparing", "onOpened", "onOptionChanged", "onSelectAllValueChanged", "onSelectionChanged", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "applyValueModeChange", "buttonsChange", "dataSourceChange", "deferRenderingChange", "disabledChange", "displayExprChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "elementAttrChange", "fieldTemplateChange", "focusStateEnabledChange", "groupedChange", "groupTemplateChange", "heightChange", "hideSelectedItemsChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "itemsChange", "itemTemplateChange", "labelChange", "labelModeChange", "maxDisplayedTagsChange", "maxFilterQueryLengthChange", "maxLengthChange", "minSearchLengthChange", "multilineChange", "nameChange", "noDataTextChange", "openedChange", "openOnFieldClickChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "searchEnabledChange", "searchExprChange", "searchModeChange", "searchTimeoutChange", "selectAllModeChange", "selectAllTextChange", "selectedItemsChange", "showClearButtonChange", "showDataBeforeSearchChange", "showDropDownButtonChange", "showMultiTagOnlyChange", "showSelectionControlsChange", "stylingModeChange", "tabIndexChange", "tagTemplateChange", "textChange", "useItemTextAsTitleChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueExprChange", "visibleChange", "widthChange", "wrapItemTextChange", "onBlur"] }, { kind: "component", type: i7.DxTextBoxComponent, selector: "dx-text-box", inputs: ["accessKey", "activeStateEnabled", "buttons", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "label", "labelMode", "mask", "maskChar", "maskInvalidMessage", "maskRules", "maxLength", "mode", "name", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showMaskMode", "spellcheck", "stylingMode", "tabIndex", "text", "useMaskedValue", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueChangeEvent", "visible", "width"], outputs: ["onChange", "onContentReady", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOptionChanged", "onPaste", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "labelChange", "labelModeChange", "maskChange", "maskCharChange", "maskInvalidMessageChange", "maskRulesChange", "maxLengthChange", "modeChange", "nameChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showMaskModeChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useMaskedValueChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: UserAccessComponent, selector: "app-user-access", inputs: ["userOptionContainer"], outputs: ["userOptionContainerChange"] }, { kind: "component", type: TreeviewComponent, selector: "treeview", inputs: ["autoCollapse", "inner", "navigation", "opened", "isEditIcon", "isSearchBox", "transparentOverlay", "treeListForSearchBox", "name", "openTreeId", "routeKey"], outputs: ["editableKpiData"] }] });
+CreateKpiTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CreateKpiTreeComponent, selector: "app-create-kpi", ngImport: i0, template: "<app-loading *ngIf=\"loadingModal\"></app-loading>\n<div class=\"p-4 flex flex-row w-full\" *ngIf=\"!loadingModal\">\n    <div class=\"mx-2 bg-white dark:bg-transparent border-r\">\n        <!-- <ng-container *ngIf=\"isKpiTreePrepared\"> -->\n            <treeview class=\"dark bg-gray-900 dark:bg-transparent\" [name]=\"'mainNavigation'\" [routeKey]=\"'raKpi'\"\n                [navigation]=\"kpiData\" [isSearchBox]=\"false\" [isEditIcon]=\"true\"\n                (editableKpiData)=\"getEditableKpi($event)\">\n            </treeview>\n        <!-- </ng-container> -->\n\n    </div>\n    <div class=\"mx-2 w-full\">\n        <!-- <div class=\"flex flex-row item-center justify-center my-8\">\n            <button class=\"{{commonService.btn_warning_md}}\" (click)=\"addNewKpi()\">Add New KPI</button>\n            <button class=\"{{commonService.btn_primary_md}}\" (click)=\"routeToKpiConfig()\"\n                routerLinkActive=\"router-link-active\">Configure KPI</button>\n        </div> -->\n        <!-- <ng-container *ngIf=\"isNewKpiAdded\"> -->\n        <!-- <div class=\"px-2 w-full\"> -->\n        <div class=\"m-1\">\n            <div class=\"px-2 pt-1 w-full\">\n                <p class=\"text-lg mt-2\">Name</p>\n                <dx-text-box [(ngModel)]=\"select_kpi_name\"></dx-text-box>\n            </div>\n        </div>\n        <div class=\"flex flex-row w-full\">\n            <div class=\"m-1 w-1/3\">\n                <div class=\"px-2 pt-1  w-full\">\n                    <p class=\"text-lg mt-2\"> Tag Type</p>\n                    <dx-select-box [dataSource]=\"tagType\" [(ngModel)]=\"select_tag_type\"\n                        (onValueChanged)=\"addTagtypeValue($event)\"></dx-select-box>\n                </div>\n            </div>\n            <!-- (onCustomItemCreating)=\"onCustomDimentionCreating($event)\" -->\n            <div class=\"m-1 w-full\">\n                <div class=\"px-2 pt-1  w-full\">\n                    <p class=\"text-lg mt-2\">Aliases</p>\n                    <dx-tag-box [acceptCustomValue]=\"true\" [(ngModel)]=\"selected_aliases\"></dx-tag-box>\n                </div>\n            </div>\n        </div>\n        <div class=\"m-1\">\n            <div class=\"px-2 pt-1  w-full\">\n                <p class=\"text-lg mt-2\">Page ID</p>\n                <!-- <dx-text-box [(ngModel)]=\"selected_page_id\"></dx-text-box> -->\n                <dx-select-box [items]=\"templateDataSource\" valueExpr=\"pageId\" displayExpr=\"pageName\"\n                    [searchEnabled]=\"true\" [(ngModel)]=\"selected_page_id\"></dx-select-box>\n            </div>\n        </div>\n        <div class=\"m-1\">\n            <div class=\"px-2 pt-1  w-full\">\n                <p class=\"text-lg mt-2\">Description</p>\n                <dx-html-editor height=\"'auto'\" [(ngModel)]=\"selected_desc\">\n                    <dxo-toolbar [multiline]=\"false\">\n\n                        <dxi-item name=\"size\" [acceptedValues]=\"['8pt', '10pt', '12pt', '14pt', '18pt', '24pt', '36pt']\"\n                            [options]=\"{ inputAttr: { 'aria-label': 'Font size' } }\"></dxi-item>\n                        <dxi-item name=\"font\" [acceptedValues]=\"[\n                                    'Arial',\n                                    'Courier New',\n                                    'Georgia',\n                                    'Impact',\n                                    'Lucida Console',\n                                    'Tahoma',\n                                    'Times New Roman',\n                                    'Verdana'\n                                  ]\" [options]=\"{ inputAttr: { 'aria-label': 'Font family' } }\"></dxi-item>\n                        <dxi-item name=\"separator\"></dxi-item>\n                        <dxi-item name=\"bold\"></dxi-item>\n                        <dxi-item name=\"italic\"></dxi-item>\n                        <dxi-item name=\"underline\"></dxi-item>\n                        <dxi-item name=\"separator\"></dxi-item>\n                        <dxi-item name=\"alignLeft\"></dxi-item>\n                        <dxi-item name=\"alignCenter\"></dxi-item>\n                        <dxi-item name=\"alignRight\"></dxi-item>\n                        <dxi-item name=\"alignJustify\"></dxi-item>\n                        <dxi-item name=\"separator\"></dxi-item>\n                        <dxi-item name=\"orderedList\"></dxi-item>\n                        <dxi-item name=\"bulletList\"></dxi-item>\n                        <dxi-item name=\"separator\"></dxi-item>\n                        <dxi-item name=\"header\" [acceptedValues]=\"[false, 1, 2, 3, 4, 5]\"\n                            [options]=\"{ inputAttr: { 'aria-label': 'Header' } }\"></dxi-item>\n                        <dxi-item name=\"separator\"></dxi-item>\n                        <dxi-item name=\"color\"></dxi-item>\n                        <dxi-item name=\"background\"></dxi-item>\n                        <dxi-item name=\"separator\"></dxi-item>\n                        <dxi-item name=\"link\"></dxi-item>\n                        <dxi-item name=\"image\"></dxi-item>\n                        <dxi-item name=\"separator\"></dxi-item>\n                        <dxi-item name=\"clear\"></dxi-item>\n                        <dxi-item name=\"codeBlock\"></dxi-item>\n                    </dxo-toolbar>\n                    <dxo-media-resizing [enabled]=\"true\"> </dxo-media-resizing>\n                    <dxo-image-upload [tabs]=\"['file', 'url']\" fileUploadMode=\"base64\">\n                    </dxo-image-upload>\n                </dx-html-editor>\n            </div>\n        </div>\n\n\n        <div class=\"flex flex-row w-full\">\n            <div class=\"m-1 w-full\">\n                <div class=\"px-2 pt-1 w-full\">\n                    <p class=\"text-lg mt-2\"> Parent Component </p>\n                    <dx-select-box [items]=\"keiParentDataSource\" displayExpr=\"kpiName\" valueExpr=\"kpiId\"\n                        (onValueChanged)=\"getKpiItemValue($event)\" [(ngModel)]=\"parante_kpi_name\"></dx-select-box>\n                </div>\n            </div>\n            <div class=\"m-1 w-full\">\n                <div class=\"px-2 pt-1  w-full\">\n                    <p class=\"text-lg mt-2\">Parent TID</p>\n                    <dx-text-box [(ngModel)]=\"selected_kpi_tid\" [readOnly]=\"false\"></dx-text-box>\n                </div>\n            </div>\n            <div class=\"m-1 w-full\">\n                <div class=\"px-2 pt-1  w-full\">\n                    <p class=\"text-lg mt-2\">TID</p>\n                    <dx-text-box [(ngModel)]=\"selected_kpi_child_tid\" [readOnly]=\"false\"></dx-text-box>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"flex flex-row justify-between mt-3\">\n            <div class=\"px-2 pt-1  w-full\">\n                <dx-check-box [(ngModel)]=\"kpi_visibility\" text=\"Visibility\"></dx-check-box>\n            </div>\n            <div class=\"px-2 pt-1  w-full\">\n                <dx-check-box [(ngModel)]=\"kpi_external\" text=\"External KPI\"></dx-check-box>\n            </div>\n        </div>\n        <!-- <div class=\"m-1\">\n                    <div class=\"px-2 pt-1  w-full\">\n                        <p class=\"text-lg mt-2\">KPI Info</p>\n                        <dx-html-editor height=\"'auto'\" [(ngModel)]=\"selected_info\">\n                            <dxo-toolbar [multiline]=\"false\">\n\n                                <dxi-item name=\"size\"\n                                    [acceptedValues]=\"['8pt', '10pt', '12pt', '14pt', '18pt', '24pt', '36pt']\"\n                                    [options]=\"{ inputAttr: { 'aria-label': 'Font size' } }\"></dxi-item>\n                                <dxi-item name=\"font\" [acceptedValues]=\"[\n                                                    'Arial',\n                                                    'Courier New',\n                                                    'Georgia',\n                                                    'Impact',\n                                                    'Lucida Console',\n                                                    'Tahoma',\n                                                    'Times New Roman',\n                                                    'Verdana'\n                                                  ]\"\n                                    [options]=\"{ inputAttr: { 'aria-label': 'Font family' } }\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"bold\"></dxi-item>\n                                <dxi-item name=\"italic\"></dxi-item>\n                                <dxi-item name=\"underline\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"alignLeft\"></dxi-item>\n                                <dxi-item name=\"alignCenter\"></dxi-item>\n                                <dxi-item name=\"alignRight\"></dxi-item>\n                                <dxi-item name=\"alignJustify\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"orderedList\"></dxi-item>\n                                <dxi-item name=\"bulletList\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"header\" [acceptedValues]=\"[false, 1, 2, 3, 4, 5]\"\n                                    [options]=\"{ inputAttr: { 'aria-label': 'Header' } }\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"color\"></dxi-item>\n                                <dxi-item name=\"background\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"link\"></dxi-item>\n                                <dxi-item name=\"image\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"clear\"></dxi-item>\n                                <dxi-item name=\"codeBlock\"></dxi-item>\n                            </dxo-toolbar>\n                            <dxo-media-resizing [enabled]=\"true\"> </dxo-media-resizing>\n                            <dxo-image-upload [tabs]=\"['file', 'url']\" fileUploadMode=\"base64\">\n                            </dxo-image-upload>\n                        </dx-html-editor>\n                    </div>\n                </div> -->\n\n        <app-user-access [(userOptionContainer)]=\"userOptionContainer\">\n        </app-user-access>\n\n        <div class=\"flex flex-auto mt-5 justify-end\">\n            <button class=\"{{commonService.btn_success_md}}\" (click)=\"getUpdateKpi()\" *ngIf=\"isEditKpiAdded\">Update KPI\n                    </button>\n            <button class=\"{{commonService.btn_danger_md}}\" (click)=\"getDeletKpi()\" *ngIf=\"isEditKpiAdded\">Delete KPI\n                    </button>\n            <button class=\"{{commonService.btn_success_md}}\" (click)=\"makeNewKpiWithUserEntity()\" *ngIf=\"!isEditKpiAdded\">Create KPI\n            </button>\n            <button class=\"{{commonService.btn_warning_md}}\" (click)=\"getReseteKpi()\">Reset</button>\n\n        </div>\n        <!-- </div> -->\n        <!-- </ng-container> -->\n    </div>\n\n\n\n\n</div>", styles: [":host ::ng-deep treeview .treeview-wrapper{width:100%!important}\n"], dependencies: [{ kind: "directive", type: i4$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LoadingComponent$1, selector: "app-loading" }, { kind: "component", type: i6.DxiItemComponent, selector: "dxi-item", inputs: ["disabled", "html", "icon", "template", "text", "title", "visible", "onClick", "stylingMode", "type", "baseSize", "box", "ratio", "shrink", "elementAttr", "hint", "beginGroup", "closeMenuOnClick", "items", "selectable", "selected", "colSpan", "cssClass", "dataField", "editorOptions", "editorType", "helpText", "isRequired", "itemType", "label", "name", "validationRules", "visibleIndex", "alignItemLabels", "caption", "colCount", "colCountByScreen", "tabPanelOptions", "tabs", "badge", "tabTemplate", "buttonOptions", "horizontalAlignment", "verticalAlignment", "locateInMenu", "location", "menuItemTemplate", "options", "showText", "widget", "height", "width", "imageAlt", "imageSrc", "acceptedValues", "formatName", "formatValues", "key", "showChevron", "menuTemplate", "heightRatio", "widthRatio", "expanded", "hasItems", "id", "parentId"] }, { kind: "component", type: i5$1.DxCheckBoxComponent, selector: "dx-check-box", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "iconSize", "isValid", "name", "readOnly", "rtlEnabled", "tabIndex", "text", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "visible", "width"], outputs: ["onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconSizeChange", "isValidChange", "nameChange", "readOnlyChange", "rtlEnabledChange", "tabIndexChange", "textChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "component", type: i6.DxoToolbarComponent, selector: "dxo-toolbar", inputs: ["disabled", "items", "visible", "fileSelectionItems", "container", "multiline"] }, { kind: "component", type: i10$2.DxHtmlEditorComponent, selector: "dx-html-editor", inputs: ["accessKey", "activeStateEnabled", "allowSoftLineBreak", "customizeModules", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "imageUpload", "isValid", "mediaResizing", "mentions", "name", "placeholder", "readOnly", "rtlEnabled", "stylingMode", "tabIndex", "tableContextMenu", "tableResizing", "toolbar", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueType", "variables", "visible", "width"], outputs: ["onContentReady", "onDisposing", "onFocusIn", "onFocusOut", "onInitialized", "onOptionChanged", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "allowSoftLineBreakChange", "customizeModulesChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "imageUploadChange", "isValidChange", "mediaResizingChange", "mentionsChange", "nameChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "stylingModeChange", "tabIndexChange", "tableContextMenuChange", "tableResizingChange", "toolbarChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueTypeChange", "variablesChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "component", type: i6.DxoImageUploadComponent, selector: "dxo-image-upload", inputs: ["fileUploaderOptions", "fileUploadMode", "tabs", "uploadDirectory", "uploadUrl"] }, { kind: "component", type: i6.DxoMediaResizingComponent, selector: "dxo-media-resizing", inputs: ["allowedTargets", "enabled"] }, { kind: "component", type: i6$1.DxSelectBoxComponent, selector: "dx-select-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "buttons", "dataSource", "deferRendering", "disabled", "displayExpr", "displayValue", "dropDownButtonTemplate", "dropDownOptions", "elementAttr", "fieldTemplate", "focusStateEnabled", "grouped", "groupTemplate", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "items", "itemTemplate", "label", "labelMode", "maxLength", "minSearchLength", "name", "noDataText", "opened", "openOnFieldClick", "placeholder", "readOnly", "rtlEnabled", "searchEnabled", "searchExpr", "searchMode", "searchTimeout", "selectedItem", "showClearButton", "showDataBeforeSearch", "showDropDownButton", "showSelectionControls", "spellcheck", "stylingMode", "tabIndex", "text", "useItemTextAsTitle", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueChangeEvent", "valueExpr", "visible", "width", "wrapItemText"], outputs: ["onChange", "onClosed", "onContentReady", "onCopy", "onCustomItemCreating", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onItemClick", "onKeyDown", "onKeyUp", "onOpened", "onOptionChanged", "onPaste", "onSelectionChanged", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "dataSourceChange", "deferRenderingChange", "disabledChange", "displayExprChange", "displayValueChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "elementAttrChange", "fieldTemplateChange", "focusStateEnabledChange", "groupedChange", "groupTemplateChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "itemsChange", "itemTemplateChange", "labelChange", "labelModeChange", "maxLengthChange", "minSearchLengthChange", "nameChange", "noDataTextChange", "openedChange", "openOnFieldClickChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "searchEnabledChange", "searchExprChange", "searchModeChange", "searchTimeoutChange", "selectedItemChange", "showClearButtonChange", "showDataBeforeSearchChange", "showDropDownButtonChange", "showSelectionControlsChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useItemTextAsTitleChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "valueExprChange", "visibleChange", "widthChange", "wrapItemTextChange", "onBlur"] }, { kind: "component", type: i8$1.DxTagBoxComponent, selector: "dx-tag-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "applyValueMode", "buttons", "dataSource", "deferRendering", "disabled", "displayExpr", "dropDownButtonTemplate", "dropDownOptions", "elementAttr", "fieldTemplate", "focusStateEnabled", "grouped", "groupTemplate", "height", "hideSelectedItems", "hint", "hoverStateEnabled", "inputAttr", "isValid", "items", "itemTemplate", "label", "labelMode", "maxDisplayedTags", "maxFilterQueryLength", "maxLength", "minSearchLength", "multiline", "name", "noDataText", "opened", "openOnFieldClick", "placeholder", "readOnly", "rtlEnabled", "searchEnabled", "searchExpr", "searchMode", "searchTimeout", "selectAllMode", "selectAllText", "selectedItems", "showClearButton", "showDataBeforeSearch", "showDropDownButton", "showMultiTagOnly", "showSelectionControls", "stylingMode", "tabIndex", "tagTemplate", "text", "useItemTextAsTitle", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueExpr", "visible", "width", "wrapItemText"], outputs: ["onChange", "onClosed", "onContentReady", "onCustomItemCreating", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onItemClick", "onKeyDown", "onKeyUp", "onMultiTagPreparing", "onOpened", "onOptionChanged", "onSelectAllValueChanged", "onSelectionChanged", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "applyValueModeChange", "buttonsChange", "dataSourceChange", "deferRenderingChange", "disabledChange", "displayExprChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "elementAttrChange", "fieldTemplateChange", "focusStateEnabledChange", "groupedChange", "groupTemplateChange", "heightChange", "hideSelectedItemsChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "itemsChange", "itemTemplateChange", "labelChange", "labelModeChange", "maxDisplayedTagsChange", "maxFilterQueryLengthChange", "maxLengthChange", "minSearchLengthChange", "multilineChange", "nameChange", "noDataTextChange", "openedChange", "openOnFieldClickChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "searchEnabledChange", "searchExprChange", "searchModeChange", "searchTimeoutChange", "selectAllModeChange", "selectAllTextChange", "selectedItemsChange", "showClearButtonChange", "showDataBeforeSearchChange", "showDropDownButtonChange", "showMultiTagOnlyChange", "showSelectionControlsChange", "stylingModeChange", "tabIndexChange", "tagTemplateChange", "textChange", "useItemTextAsTitleChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueExprChange", "visibleChange", "widthChange", "wrapItemTextChange", "onBlur"] }, { kind: "component", type: i7.DxTextBoxComponent, selector: "dx-text-box", inputs: ["accessKey", "activeStateEnabled", "buttons", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "label", "labelMode", "mask", "maskChar", "maskInvalidMessage", "maskRules", "maxLength", "mode", "name", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showMaskMode", "spellcheck", "stylingMode", "tabIndex", "text", "useMaskedValue", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueChangeEvent", "visible", "width"], outputs: ["onChange", "onContentReady", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOptionChanged", "onPaste", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "labelChange", "labelModeChange", "maskChange", "maskCharChange", "maskInvalidMessageChange", "maskRulesChange", "maxLengthChange", "modeChange", "nameChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showMaskModeChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useMaskedValueChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: UserAccessComponent, selector: "app-user-access", inputs: ["userOptionContainer"], outputs: ["userOptionContainerChange"] }, { kind: "component", type: TreeviewComponent, selector: "treeview", inputs: ["autoCollapse", "inner", "navigation", "opened", "isEditIcon", "isSearchBox", "transparentOverlay", "treeListForSearchBox", "name", "openTreeId", "routeKey"], outputs: ["editableKpiData"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CreateKpiTreeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-create-kpi', template: "<app-loading *ngIf=\"loadingModal\"></app-loading>\n<div class=\"p-4 flex flex-row w-full\" *ngIf=\"!loadingModal\">\n    <div class=\"mx-2 bg-white dark:bg-transparent border-r\">\n        <!-- <ng-container *ngIf=\"isKpiTreePrepared\"> -->\n            <treeview class=\"dark bg-gray-900 dark:bg-transparent\" [name]=\"'mainNavigation'\" [routeKey]=\"'raKpi'\"\n                [navigation]=\"kpiData\" [isSearchBox]=\"false\" [isEditIcon]=\"true\"\n                (editableKpiData)=\"getEditableKpi($event)\">\n            </treeview>\n        <!-- </ng-container> -->\n\n    </div>\n    <div class=\"mx-2 w-full\">\n        <!-- <div class=\"flex flex-row item-center justify-center my-8\">\n            <button class=\"{{commonService.btn_warning_md}}\" (click)=\"addNewKpi()\">Add New KPI</button>\n            <button class=\"{{commonService.btn_primary_md}}\" (click)=\"routeToKpiConfig()\"\n                routerLinkActive=\"router-link-active\">Configure KPI</button>\n        </div> -->\n        <!-- <ng-container *ngIf=\"isNewKpiAdded\"> -->\n        <!-- <div class=\"px-2 w-full\"> -->\n        <div class=\"m-1\">\n            <div class=\"px-2 pt-1 w-full\">\n                <p class=\"text-lg mt-2\">Name</p>\n                <dx-text-box [(ngModel)]=\"select_kpi_name\"></dx-text-box>\n            </div>\n        </div>\n        <div class=\"flex flex-row w-full\">\n            <div class=\"m-1 w-1/3\">\n                <div class=\"px-2 pt-1  w-full\">\n                    <p class=\"text-lg mt-2\"> Tag Type</p>\n                    <dx-select-box [dataSource]=\"tagType\" [(ngModel)]=\"select_tag_type\"\n                        (onValueChanged)=\"addTagtypeValue($event)\"></dx-select-box>\n                </div>\n            </div>\n            <!-- (onCustomItemCreating)=\"onCustomDimentionCreating($event)\" -->\n            <div class=\"m-1 w-full\">\n                <div class=\"px-2 pt-1  w-full\">\n                    <p class=\"text-lg mt-2\">Aliases</p>\n                    <dx-tag-box [acceptCustomValue]=\"true\" [(ngModel)]=\"selected_aliases\"></dx-tag-box>\n                </div>\n            </div>\n        </div>\n        <div class=\"m-1\">\n            <div class=\"px-2 pt-1  w-full\">\n                <p class=\"text-lg mt-2\">Page ID</p>\n                <!-- <dx-text-box [(ngModel)]=\"selected_page_id\"></dx-text-box> -->\n                <dx-select-box [items]=\"templateDataSource\" valueExpr=\"pageId\" displayExpr=\"pageName\"\n                    [searchEnabled]=\"true\" [(ngModel)]=\"selected_page_id\"></dx-select-box>\n            </div>\n        </div>\n        <div class=\"m-1\">\n            <div class=\"px-2 pt-1  w-full\">\n                <p class=\"text-lg mt-2\">Description</p>\n                <dx-html-editor height=\"'auto'\" [(ngModel)]=\"selected_desc\">\n                    <dxo-toolbar [multiline]=\"false\">\n\n                        <dxi-item name=\"size\" [acceptedValues]=\"['8pt', '10pt', '12pt', '14pt', '18pt', '24pt', '36pt']\"\n                            [options]=\"{ inputAttr: { 'aria-label': 'Font size' } }\"></dxi-item>\n                        <dxi-item name=\"font\" [acceptedValues]=\"[\n                                    'Arial',\n                                    'Courier New',\n                                    'Georgia',\n                                    'Impact',\n                                    'Lucida Console',\n                                    'Tahoma',\n                                    'Times New Roman',\n                                    'Verdana'\n                                  ]\" [options]=\"{ inputAttr: { 'aria-label': 'Font family' } }\"></dxi-item>\n                        <dxi-item name=\"separator\"></dxi-item>\n                        <dxi-item name=\"bold\"></dxi-item>\n                        <dxi-item name=\"italic\"></dxi-item>\n                        <dxi-item name=\"underline\"></dxi-item>\n                        <dxi-item name=\"separator\"></dxi-item>\n                        <dxi-item name=\"alignLeft\"></dxi-item>\n                        <dxi-item name=\"alignCenter\"></dxi-item>\n                        <dxi-item name=\"alignRight\"></dxi-item>\n                        <dxi-item name=\"alignJustify\"></dxi-item>\n                        <dxi-item name=\"separator\"></dxi-item>\n                        <dxi-item name=\"orderedList\"></dxi-item>\n                        <dxi-item name=\"bulletList\"></dxi-item>\n                        <dxi-item name=\"separator\"></dxi-item>\n                        <dxi-item name=\"header\" [acceptedValues]=\"[false, 1, 2, 3, 4, 5]\"\n                            [options]=\"{ inputAttr: { 'aria-label': 'Header' } }\"></dxi-item>\n                        <dxi-item name=\"separator\"></dxi-item>\n                        <dxi-item name=\"color\"></dxi-item>\n                        <dxi-item name=\"background\"></dxi-item>\n                        <dxi-item name=\"separator\"></dxi-item>\n                        <dxi-item name=\"link\"></dxi-item>\n                        <dxi-item name=\"image\"></dxi-item>\n                        <dxi-item name=\"separator\"></dxi-item>\n                        <dxi-item name=\"clear\"></dxi-item>\n                        <dxi-item name=\"codeBlock\"></dxi-item>\n                    </dxo-toolbar>\n                    <dxo-media-resizing [enabled]=\"true\"> </dxo-media-resizing>\n                    <dxo-image-upload [tabs]=\"['file', 'url']\" fileUploadMode=\"base64\">\n                    </dxo-image-upload>\n                </dx-html-editor>\n            </div>\n        </div>\n\n\n        <div class=\"flex flex-row w-full\">\n            <div class=\"m-1 w-full\">\n                <div class=\"px-2 pt-1 w-full\">\n                    <p class=\"text-lg mt-2\"> Parent Component </p>\n                    <dx-select-box [items]=\"keiParentDataSource\" displayExpr=\"kpiName\" valueExpr=\"kpiId\"\n                        (onValueChanged)=\"getKpiItemValue($event)\" [(ngModel)]=\"parante_kpi_name\"></dx-select-box>\n                </div>\n            </div>\n            <div class=\"m-1 w-full\">\n                <div class=\"px-2 pt-1  w-full\">\n                    <p class=\"text-lg mt-2\">Parent TID</p>\n                    <dx-text-box [(ngModel)]=\"selected_kpi_tid\" [readOnly]=\"false\"></dx-text-box>\n                </div>\n            </div>\n            <div class=\"m-1 w-full\">\n                <div class=\"px-2 pt-1  w-full\">\n                    <p class=\"text-lg mt-2\">Child TID</p>\n                    <dx-text-box [(ngModel)]=\"selected_kpi_child_tid\" [readOnly]=\"false\"></dx-text-box>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"flex flex-row justify-between mt-3\">\n            <div class=\"px-2 pt-1  w-full\">\n                <dx-check-box [(ngModel)]=\"kpi_visibility\" text=\"Visibility\"></dx-check-box>\n            </div>\n            <div class=\"px-2 pt-1  w-full\">\n                <dx-check-box [(ngModel)]=\"kpi_external\" text=\"External KPI\"></dx-check-box>\n            </div>\n        </div>\n        <!-- <div class=\"m-1\">\n                    <div class=\"px-2 pt-1  w-full\">\n                        <p class=\"text-lg mt-2\">KPI Info</p>\n                        <dx-html-editor height=\"'auto'\" [(ngModel)]=\"selected_info\">\n                            <dxo-toolbar [multiline]=\"false\">\n\n                                <dxi-item name=\"size\"\n                                    [acceptedValues]=\"['8pt', '10pt', '12pt', '14pt', '18pt', '24pt', '36pt']\"\n                                    [options]=\"{ inputAttr: { 'aria-label': 'Font size' } }\"></dxi-item>\n                                <dxi-item name=\"font\" [acceptedValues]=\"[\n                                                    'Arial',\n                                                    'Courier New',\n                                                    'Georgia',\n                                                    'Impact',\n                                                    'Lucida Console',\n                                                    'Tahoma',\n                                                    'Times New Roman',\n                                                    'Verdana'\n                                                  ]\"\n                                    [options]=\"{ inputAttr: { 'aria-label': 'Font family' } }\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"bold\"></dxi-item>\n                                <dxi-item name=\"italic\"></dxi-item>\n                                <dxi-item name=\"underline\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"alignLeft\"></dxi-item>\n                                <dxi-item name=\"alignCenter\"></dxi-item>\n                                <dxi-item name=\"alignRight\"></dxi-item>\n                                <dxi-item name=\"alignJustify\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"orderedList\"></dxi-item>\n                                <dxi-item name=\"bulletList\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"header\" [acceptedValues]=\"[false, 1, 2, 3, 4, 5]\"\n                                    [options]=\"{ inputAttr: { 'aria-label': 'Header' } }\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"color\"></dxi-item>\n                                <dxi-item name=\"background\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"link\"></dxi-item>\n                                <dxi-item name=\"image\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"clear\"></dxi-item>\n                                <dxi-item name=\"codeBlock\"></dxi-item>\n                            </dxo-toolbar>\n                            <dxo-media-resizing [enabled]=\"true\"> </dxo-media-resizing>\n                            <dxo-image-upload [tabs]=\"['file', 'url']\" fileUploadMode=\"base64\">\n                            </dxo-image-upload>\n                        </dx-html-editor>\n                    </div>\n                </div> -->\n\n        <app-user-access [(userOptionContainer)]=\"userOptionContainer\">\n        </app-user-access>\n\n        <div class=\"flex flex-auto mt-5 justify-end\">\n            <button class=\"{{commonService.btn_success_md}}\" (click)=\"getUpdateKpi()\" *ngIf=\"isEditKpiAdded\">Update KPI\n                    </button>\n            <button class=\"{{commonService.btn_danger_md}}\" (click)=\"getDeletKpi()\" *ngIf=\"isEditKpiAdded\">Delete KPI\n                    </button>\n            <button class=\"{{commonService.btn_success_md}}\" (click)=\"makeNewKpiWithUserEntity()\" *ngIf=\"!isEditKpiAdded\">Create KPI\n            </button>\n            <button class=\"{{commonService.btn_warning_md}}\" (click)=\"getReseteKpi()\">Reset</button>\n\n        </div>\n        <!-- </div> -->\n        <!-- </ng-container> -->\n    </div>\n\n\n\n\n</div>", styles: [":host ::ng-deep treeview .treeview-wrapper{width:100%!important}\n"] }]
+            args: [{ selector: 'app-create-kpi', template: "<app-loading *ngIf=\"loadingModal\"></app-loading>\n<div class=\"p-4 flex flex-row w-full\" *ngIf=\"!loadingModal\">\n    <div class=\"mx-2 bg-white dark:bg-transparent border-r\">\n        <!-- <ng-container *ngIf=\"isKpiTreePrepared\"> -->\n            <treeview class=\"dark bg-gray-900 dark:bg-transparent\" [name]=\"'mainNavigation'\" [routeKey]=\"'raKpi'\"\n                [navigation]=\"kpiData\" [isSearchBox]=\"false\" [isEditIcon]=\"true\"\n                (editableKpiData)=\"getEditableKpi($event)\">\n            </treeview>\n        <!-- </ng-container> -->\n\n    </div>\n    <div class=\"mx-2 w-full\">\n        <!-- <div class=\"flex flex-row item-center justify-center my-8\">\n            <button class=\"{{commonService.btn_warning_md}}\" (click)=\"addNewKpi()\">Add New KPI</button>\n            <button class=\"{{commonService.btn_primary_md}}\" (click)=\"routeToKpiConfig()\"\n                routerLinkActive=\"router-link-active\">Configure KPI</button>\n        </div> -->\n        <!-- <ng-container *ngIf=\"isNewKpiAdded\"> -->\n        <!-- <div class=\"px-2 w-full\"> -->\n        <div class=\"m-1\">\n            <div class=\"px-2 pt-1 w-full\">\n                <p class=\"text-lg mt-2\">Name</p>\n                <dx-text-box [(ngModel)]=\"select_kpi_name\"></dx-text-box>\n            </div>\n        </div>\n        <div class=\"flex flex-row w-full\">\n            <div class=\"m-1 w-1/3\">\n                <div class=\"px-2 pt-1  w-full\">\n                    <p class=\"text-lg mt-2\"> Tag Type</p>\n                    <dx-select-box [dataSource]=\"tagType\" [(ngModel)]=\"select_tag_type\"\n                        (onValueChanged)=\"addTagtypeValue($event)\"></dx-select-box>\n                </div>\n            </div>\n            <!-- (onCustomItemCreating)=\"onCustomDimentionCreating($event)\" -->\n            <div class=\"m-1 w-full\">\n                <div class=\"px-2 pt-1  w-full\">\n                    <p class=\"text-lg mt-2\">Aliases</p>\n                    <dx-tag-box [acceptCustomValue]=\"true\" [(ngModel)]=\"selected_aliases\"></dx-tag-box>\n                </div>\n            </div>\n        </div>\n        <div class=\"m-1\">\n            <div class=\"px-2 pt-1  w-full\">\n                <p class=\"text-lg mt-2\">Page ID</p>\n                <!-- <dx-text-box [(ngModel)]=\"selected_page_id\"></dx-text-box> -->\n                <dx-select-box [items]=\"templateDataSource\" valueExpr=\"pageId\" displayExpr=\"pageName\"\n                    [searchEnabled]=\"true\" [(ngModel)]=\"selected_page_id\"></dx-select-box>\n            </div>\n        </div>\n        <div class=\"m-1\">\n            <div class=\"px-2 pt-1  w-full\">\n                <p class=\"text-lg mt-2\">Description</p>\n                <dx-html-editor height=\"'auto'\" [(ngModel)]=\"selected_desc\">\n                    <dxo-toolbar [multiline]=\"false\">\n\n                        <dxi-item name=\"size\" [acceptedValues]=\"['8pt', '10pt', '12pt', '14pt', '18pt', '24pt', '36pt']\"\n                            [options]=\"{ inputAttr: { 'aria-label': 'Font size' } }\"></dxi-item>\n                        <dxi-item name=\"font\" [acceptedValues]=\"[\n                                    'Arial',\n                                    'Courier New',\n                                    'Georgia',\n                                    'Impact',\n                                    'Lucida Console',\n                                    'Tahoma',\n                                    'Times New Roman',\n                                    'Verdana'\n                                  ]\" [options]=\"{ inputAttr: { 'aria-label': 'Font family' } }\"></dxi-item>\n                        <dxi-item name=\"separator\"></dxi-item>\n                        <dxi-item name=\"bold\"></dxi-item>\n                        <dxi-item name=\"italic\"></dxi-item>\n                        <dxi-item name=\"underline\"></dxi-item>\n                        <dxi-item name=\"separator\"></dxi-item>\n                        <dxi-item name=\"alignLeft\"></dxi-item>\n                        <dxi-item name=\"alignCenter\"></dxi-item>\n                        <dxi-item name=\"alignRight\"></dxi-item>\n                        <dxi-item name=\"alignJustify\"></dxi-item>\n                        <dxi-item name=\"separator\"></dxi-item>\n                        <dxi-item name=\"orderedList\"></dxi-item>\n                        <dxi-item name=\"bulletList\"></dxi-item>\n                        <dxi-item name=\"separator\"></dxi-item>\n                        <dxi-item name=\"header\" [acceptedValues]=\"[false, 1, 2, 3, 4, 5]\"\n                            [options]=\"{ inputAttr: { 'aria-label': 'Header' } }\"></dxi-item>\n                        <dxi-item name=\"separator\"></dxi-item>\n                        <dxi-item name=\"color\"></dxi-item>\n                        <dxi-item name=\"background\"></dxi-item>\n                        <dxi-item name=\"separator\"></dxi-item>\n                        <dxi-item name=\"link\"></dxi-item>\n                        <dxi-item name=\"image\"></dxi-item>\n                        <dxi-item name=\"separator\"></dxi-item>\n                        <dxi-item name=\"clear\"></dxi-item>\n                        <dxi-item name=\"codeBlock\"></dxi-item>\n                    </dxo-toolbar>\n                    <dxo-media-resizing [enabled]=\"true\"> </dxo-media-resizing>\n                    <dxo-image-upload [tabs]=\"['file', 'url']\" fileUploadMode=\"base64\">\n                    </dxo-image-upload>\n                </dx-html-editor>\n            </div>\n        </div>\n\n\n        <div class=\"flex flex-row w-full\">\n            <div class=\"m-1 w-full\">\n                <div class=\"px-2 pt-1 w-full\">\n                    <p class=\"text-lg mt-2\"> Parent Component </p>\n                    <dx-select-box [items]=\"keiParentDataSource\" displayExpr=\"kpiName\" valueExpr=\"kpiId\"\n                        (onValueChanged)=\"getKpiItemValue($event)\" [(ngModel)]=\"parante_kpi_name\"></dx-select-box>\n                </div>\n            </div>\n            <div class=\"m-1 w-full\">\n                <div class=\"px-2 pt-1  w-full\">\n                    <p class=\"text-lg mt-2\">Parent TID</p>\n                    <dx-text-box [(ngModel)]=\"selected_kpi_tid\" [readOnly]=\"false\"></dx-text-box>\n                </div>\n            </div>\n            <div class=\"m-1 w-full\">\n                <div class=\"px-2 pt-1  w-full\">\n                    <p class=\"text-lg mt-2\">TID</p>\n                    <dx-text-box [(ngModel)]=\"selected_kpi_child_tid\" [readOnly]=\"false\"></dx-text-box>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"flex flex-row justify-between mt-3\">\n            <div class=\"px-2 pt-1  w-full\">\n                <dx-check-box [(ngModel)]=\"kpi_visibility\" text=\"Visibility\"></dx-check-box>\n            </div>\n            <div class=\"px-2 pt-1  w-full\">\n                <dx-check-box [(ngModel)]=\"kpi_external\" text=\"External KPI\"></dx-check-box>\n            </div>\n        </div>\n        <!-- <div class=\"m-1\">\n                    <div class=\"px-2 pt-1  w-full\">\n                        <p class=\"text-lg mt-2\">KPI Info</p>\n                        <dx-html-editor height=\"'auto'\" [(ngModel)]=\"selected_info\">\n                            <dxo-toolbar [multiline]=\"false\">\n\n                                <dxi-item name=\"size\"\n                                    [acceptedValues]=\"['8pt', '10pt', '12pt', '14pt', '18pt', '24pt', '36pt']\"\n                                    [options]=\"{ inputAttr: { 'aria-label': 'Font size' } }\"></dxi-item>\n                                <dxi-item name=\"font\" [acceptedValues]=\"[\n                                                    'Arial',\n                                                    'Courier New',\n                                                    'Georgia',\n                                                    'Impact',\n                                                    'Lucida Console',\n                                                    'Tahoma',\n                                                    'Times New Roman',\n                                                    'Verdana'\n                                                  ]\"\n                                    [options]=\"{ inputAttr: { 'aria-label': 'Font family' } }\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"bold\"></dxi-item>\n                                <dxi-item name=\"italic\"></dxi-item>\n                                <dxi-item name=\"underline\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"alignLeft\"></dxi-item>\n                                <dxi-item name=\"alignCenter\"></dxi-item>\n                                <dxi-item name=\"alignRight\"></dxi-item>\n                                <dxi-item name=\"alignJustify\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"orderedList\"></dxi-item>\n                                <dxi-item name=\"bulletList\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"header\" [acceptedValues]=\"[false, 1, 2, 3, 4, 5]\"\n                                    [options]=\"{ inputAttr: { 'aria-label': 'Header' } }\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"color\"></dxi-item>\n                                <dxi-item name=\"background\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"link\"></dxi-item>\n                                <dxi-item name=\"image\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"clear\"></dxi-item>\n                                <dxi-item name=\"codeBlock\"></dxi-item>\n                            </dxo-toolbar>\n                            <dxo-media-resizing [enabled]=\"true\"> </dxo-media-resizing>\n                            <dxo-image-upload [tabs]=\"['file', 'url']\" fileUploadMode=\"base64\">\n                            </dxo-image-upload>\n                        </dx-html-editor>\n                    </div>\n                </div> -->\n\n        <app-user-access [(userOptionContainer)]=\"userOptionContainer\">\n        </app-user-access>\n\n        <div class=\"flex flex-auto mt-5 justify-end\">\n            <button class=\"{{commonService.btn_success_md}}\" (click)=\"getUpdateKpi()\" *ngIf=\"isEditKpiAdded\">Update KPI\n                    </button>\n            <button class=\"{{commonService.btn_danger_md}}\" (click)=\"getDeletKpi()\" *ngIf=\"isEditKpiAdded\">Delete KPI\n                    </button>\n            <button class=\"{{commonService.btn_success_md}}\" (click)=\"makeNewKpiWithUserEntity()\" *ngIf=\"!isEditKpiAdded\">Create KPI\n            </button>\n            <button class=\"{{commonService.btn_warning_md}}\" (click)=\"getReseteKpi()\">Reset</button>\n\n        </div>\n        <!-- </div> -->\n        <!-- </ng-container> -->\n    </div>\n\n\n\n\n</div>", styles: [":host ::ng-deep treeview .treeview-wrapper{width:100%!important}\n"] }]
         }], ctorParameters: function () { return [{ type: CommonService }, { type: i8.FormBuilder }, { type: CreateKpIService }, { type: i4$1.ToastrService }, { type: i2.Router }]; } });
 
 class TreeViewDividerItemComponent {