ru.coon 3.0.8 → 3.0.9

package/CHANGELOG.md

@@ -1,3 +1,14 @@
+# Version 3.0.9, [link](http://gitlab-dbr.sigma-it.local/dbr/ru.coon/-/commit/59c87d3246401ff37a357319af2e14f2c5842409)
+* ## Fixes
+* <span style='color:red'>fix error on invalid menuItem id in url</span> ([2ea41b], [link](http://gitlab-dbr.sigma-it.local/dbr/ru.coon/-/commit/2ea41b986155f8457088d5f11c988418d645c9ac))
+* <span style='color:red'> HT-12211 fix indents</span> ([6e199c], [link](http://gitlab-dbr.sigma-it.local/dbr/ru.coon/-/commit/6e199c0b9d3ade1640e9d8e2c9525316a9e95007))
+
+* add openInEditor in component hierarchy ([08f577], [link](http://gitlab-dbr.sigma-it.local/dbr/ru.coon/-/commit/08f5779e801d80935e5fb34256e157939b5f8fee))
+* HT-12472 fix: Исправление отображения «Меню навигации» и другого в старых версиях браузера chrome ([798820], [link](http://gitlab-dbr.sigma-it.local/dbr/ru.coon/-/commit/798820de0189e38991454e2021eb9b76fb6d7644))
+* upd ([54c87f], [link](http://gitlab-dbr.sigma-it.local/dbr/ru.coon/-/commit/54c87ffec22a37948ab641830cec5d2a14cd9737))
+* upd ([dda64e], [link](http://gitlab-dbr.sigma-it.local/dbr/ru.coon/-/commit/dda64ecc374a53275f2853238f07fcc53ec941b2))
+* update: CHANGELOG.md ([c0b5c0], [link](http://gitlab-dbr.sigma-it.local/dbr/ru.coon/-/commit/c0b5c0f2e8793ddc134beba8d3d5d99981e1521c))
+
 # Version 3.0.8, [link](http://gitlab-dbr.sigma-it.local/dbr/ru.coon/-/commit/d002a5973cb3a56e4efc7376e0651fb859700ab1)
 * ## Features
 * <span style='color:green'>feat: HT-12388 add opening as a tab in CenterView option in OpenPanelPlugin</span> ([83a2f8], [link](http://gitlab-dbr.sigma-it.local/dbr/ru.coon/-/commit/83a2f83dc1781307946e4f4d7dcbdd400fb95c38))

package/package.json

@@ -4,7 +4,7 @@
     "name": "ru.coon"
   },
   "description": "",
-  "version": "3.0.8",
+  "version": "3.0.9",
   "repository": {
     "type": "git",
     "url": "git+http://gitlab-dbr.sigma-it.local/dbr/ru.coon"

package/src/app/Router.js

@@ -3,20 +3,11 @@ Ext.define('Coon.app.Router', {
     singleton: true,
     constructor() {
         this.setRoutes({
+            '*': {before: 'onAny'},
             ':{id}': {
                 action: 'onRouteEnter',
                 before: 'validateMenuItem',
             },
-            // ':{type}/:{id}/:{params...}': {
-            //     action: 'onRouteEnter',
-            //     types: {
-            //         '...': {
-            //             re: '(.+)?',
-            //             split: '/',
-            //             parse: (value) => value,
-            //         },
-            //     },
-            // },
         });
         Ext.on('router:goToLastRoute', () => {
             this.onRouteEnter(this.lastRoute);
@@ -25,25 +16,40 @@ Ext.define('Coon.app.Router', {
 
     lastRoute: null,
 
-    async validateMenuItem(route) {
-        if (!Ext.getApplication().isAuthenticated()) {
+    onAny(action) {
+        if (Ext.getApplication().isAuthenticated()) {
+            action.resume();
+        } else {
+            Coon.log.debug('beforeAnyRoute: not authorized');
+            if (action.stop) {
+                action.stop();
+            }
             return false;
         }
+    },
+
+    async validateMenuItem(route) {
+        Coon.log.debug('validateMenuItem.run', route.id);
         try {
             route.menuItem = await Coon.nav.MenuEntity.getMenuItem(route.id);
             if (!route.menuItem) {
-                return false;
+                Coon.log.debug('validateMenuItem: miss menuItem', route.id);
+                route.stop();
+                return;
             }
             route.uiElement = await Coon.util.promisifyCmd(
                 'Coon.uielement.command.GetUIElementCommand',
                 route.menuItem.UI_ELEMENT_CD
             );
             if (!route.uiElement) {
-                return false;
+                Coon.log.debug('validateMenuItem: miss uiElement');
+                route.stop();
+                return;
             }
             return true;
         } catch (ex) {
-            return false;
+            route.stop();
+            return;
         }
     },
 
@@ -71,10 +77,6 @@ Ext.define('Coon.app.Router', {
 
     onRouteEnter(route) {
         this.lastRoute = route;
-        if (!this.onBeforeRouteEnter()) {
-            this.onBeforeRouteEnterFailed();
-            return;
-        }
         const app = Ext.getApplication();
         if (!app.initialRoute) {
             app.initialRoute = route;

package/src/app/viewPort/CenterView.js

@@ -95,6 +95,10 @@ Ext.define('Coon.app.viewPort.CenterView', {
             return;
         }
         const component = Coon.common.ComponentFactory.createTabComponent(route);
+        if (Error.isError(component)) {
+            Coon.log.error(component);
+            return;
+        }
         const active = this.setActiveComponent(component);
         active && active.fireEvent('activatecomponent', active);
     },

package/src/app/viewPort/CenterView.scss

@@ -48,6 +48,7 @@
     }
     span.x-tab-icon-el {
       mask-size: 16px!important;
+      -webkit-mask-size: 16px!important;
       background-color: gray;
     }
     .x-tab-wrap {

package/src/common/ComponentFactory.js

@@ -45,8 +45,8 @@ Ext.define('Coon.common.ComponentFactory', {
 
     getRootComponentConfig(route, useCache = true) {
         const {id, params = [], menuItem} = route;
-        if (!id) {
-            throw new Error('не задан id у пункта меню');
+        if (!id || !menuItem) {
+            return new Error('не задан id у пункта меню или id невалидный');
         }
         const uiElementCd = menuItem.UI_ELEMENT_CD;
         const cacheKey = JSON.stringify({uiElementCd, params});
@@ -127,6 +127,9 @@ Ext.define('Coon.common.ComponentFactory', {
 
     createTabComponent(route) {
         const config = this.getRootComponentConfig(route);
+        if (Error.isError(config)) {
+            return config;
+        }
         const menuItem = config.menuItem;
         config.layout = config.layout || 'fit';
         const onIconClick = function() {

package/src/common/button/DropdownContentButton.scss

@@ -43,9 +43,13 @@
 
     &-icon {
         mask-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0zLjI5Mjg5IDcuMjkyODlDMy42ODM0MiA2LjkwMjM3IDQuMzE2NTggNi45MDIzNyA0LjcwNzExIDcuMjkyODlMMTIgMTQuNTg1OEwxOS4yOTI5IDcuMjkyODlDMTkuNjgzNCA2LjkwMjM3IDIwLjMxNjYgNi45MDIzNyAyMC43MDcxIDcuMjkyODlDMjEuMDk3NiA3LjY4MzQyIDIxLjA5NzYgOC4zMTY1OCAyMC43MDcxIDguNzA3MTFMMTIuNzA3MSAxNi43MDcxQzEyLjMxNjYgMTcuMDk3NiAxMS42ODM0IDE3LjA5NzYgMTEuMjkyOSAxNi43MDcxTDMuMjkyODkgOC43MDcxMUMyLjkwMjM3IDguMzE2NTggMi45MDIzNyA3LjY4MzQyIDMuMjkyODkgNy4yOTI4OVoiIGZpbGw9ImJsYWNrIi8+PC9zdmc+");
+        -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0zLjI5Mjg5IDcuMjkyODlDMy42ODM0MiA2LjkwMjM3IDQuMzE2NTggNi45MDIzNyA0LjcwNzExIDcuMjkyODlMMTIgMTQuNTg1OEwxOS4yOTI5IDcuMjkyODlDMTkuNjgzNCA2LjkwMjM3IDIwLjMxNjYgNi45MDIzNyAyMC43MDcxIDcuMjkyODlDMjEuMDk3NiA3LjY4MzQyIDIxLjA5NzYgOC4zMTY1OCAyMC43MDcxIDguNzA3MTFMMTIuNzA3MSAxNi43MDcxQzEyLjMxNjYgMTcuMDk3NiAxMS42ODM0IDE3LjA5NzYgMTEuMjkyOSAxNi43MDcxTDMuMjkyODkgOC43MDcxMUMyLjkwMjM3IDguMzE2NTggMi45MDIzNyA3LjY4MzQyIDMuMjkyODkgNy4yOTI4OVoiIGZpbGw9ImJsYWNrIi8+PC9zdmc+");
         mask-size: 100%;
+        -webkit-mask-size: 100%;
         mask-repeat: no-repeat;
+        -webkit-mask-repeat: no-repeat;
         mask-position: center;
+        -webkit-mask-position: center;
         background-color: #3d6780;
       }
 

package/src/common/panel/StopwatchWindow.scss

@@ -3,6 +3,7 @@
     min-height: 48px !important;
     min-width: 48px !important;
     mask-size: 48px;
+    -webkit-mask-size: 48px;
   }
   .svg-icon-color-green {
     background-color: rgba(82, 148, 100, 1);

package/src/common/panel/WindowWrap.js

@@ -101,8 +101,7 @@ Ext.define('Coon.common.panel.WindowWrap', {
         const me = this;
         const panel = this.items;
         panel.header = false;
-        this.constrainView = Ext.getBody();// Coon.app.Config.get('mainViewXType');
-        // this.constrainTo = this.constrainView.getEl();
+        this.constrainView = Ext.getBody();
         this.updateDimensions(panel);
         this.constrainView.on('resize', this.updateConstraints, this);
         this.tools = this.tools || [];

package/src/nav/AppNavigationPanel.scss

@@ -1,5 +1,6 @@
 .svg-icon-size-18{
     mask-size: 18px;
+    -webkit-mask-size: 18px;
 }
 .search-compare{
     background-color: #ffcd29 !important;
@@ -73,11 +74,12 @@
         ul{
             width: 400px;
             list-style: none;
-            padding-left: 10px;
+            padding-left: 28px;
             li{
                 margin: 10px 0;
                 color: #1E3B4C;
                 display: block;
+                position: relative;
                 .parent-menu-item{
                     color: #112b39;
                     font-weight: 600;
@@ -88,6 +90,9 @@
                 min-width: 20px;
                 height: 20px;
                 display: inline-block;
+                position: absolute;
+                left: -20px;
+                top: -2px;
             }
             .star{
                 width: 20px;
@@ -104,6 +109,7 @@
             li.ref-item {
                 display: flex;
                 flex-wrap: nowrap;
+                width: max-content;
                 cursor: pointer;
             }
             li.ref-item:hover {

package/src/report/column/BigNumIndicationColumn.js

@@ -20,15 +20,6 @@ Ext.define('Coon.report.column.BigNumIndicationColumn', {
             <div ext:qtip="${value}, (${record.get(meta.column.lftField)},${record.get(meta.column.rgtField)}), Системный расчет #>">
                 ${value}
             </div>`;
-            // return '<div ext:qtip="' +
-            //     value +
-            //     ', (' + record.get(meta.column.lftField) +
-            //     ',' +
-            //     record.get(meta.column.rgtField) +
-            //     '), Системный расчет #>' +
-            //     '">' +
-            //     value +
-            //     '</div>';
         }
     },
 });

package/src/report/component/reportpanel/NorthPanel.scss

@@ -68,6 +68,7 @@
     min-width: 16px !important;
     min-height: 16px !important;
     mask-size: 16px !important;
+    -webkit-mask-size: 16px !important;
   }
 
 }

package/src/report/component/reportpanel/ReportGrid.scss

@@ -45,6 +45,7 @@
     min-width: 16px !important;
     min-height: 16px !important;
     mask-size: 16px !important;
+    -webkit-mask-size: 16px !important;
     &.x-fa {
       font-size: 16px !important
     }

package/src/report/plugin/grid/addFilterConditionPlugin/FilterItem.scss

@@ -16,6 +16,7 @@
     min-height: 20px !important;
     min-width: 20px !important;
     mask-size: 20px;
+    -webkit-mask-size: 20px;
   }
 
 }

package/src/report/plugin/grid/addFilterConditionPlugin/InfoMenuItem.scss

@@ -25,6 +25,7 @@
     min-height: 18px !important;
     min-width: 18px !important;
     mask-size: 15px;
+    -webkit-mask-size: 15px;
   }
 
   .system-button-type {

package/src/report/toolbar/dropdown/ToolbarOverflowButton.scss

@@ -42,13 +42,18 @@
     top:3px;
     background-color: #6493CC;
     mask-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNiA2IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxjaXJjbGUgY3g9IjMiIGN5PSIzIiByPSIzIiBmaWxsPSJibGFjayIvPjwvc3ZnPg==");
+    -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNiA2IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxjaXJjbGUgY3g9IjMiIGN5PSIzIiByPSIzIiBmaWxsPSJibGFjayIvPjwvc3ZnPg==");
     mask-size: 100%;
+    -webkit-mask-size: 100%;
   }
 
   .ToolbarOverflowButtonIcon{
     mask-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0zLjI5Mjg5IDcuMjkyODlDMy42ODM0MiA2LjkwMjM3IDQuMzE2NTggNi45MDIzNyA0LjcwNzExIDcuMjkyODlMMTIgMTQuNTg1OEwxOS4yOTI5IDcuMjkyODlDMTkuNjgzNCA2LjkwMjM3IDIwLjMxNjYgNi45MDIzNyAyMC43MDcxIDcuMjkyODlDMjEuMDk3NiA3LjY4MzQyIDIxLjA5NzYgOC4zMTY1OCAyMC43MDcxIDguNzA3MTFMMTIuNzA3MSAxNi43MDcxQzEyLjMxNjYgMTcuMDk3NiAxMS42ODM0IDE3LjA5NzYgMTEuMjkyOSAxNi43MDcxTDMuMjkyODkgOC43MDcxMUMyLjkwMjM3IDguMzE2NTggMi45MDIzNyA3LjY4MzQyIDMuMjkyODkgNy4yOTI4OVoiIGZpbGw9ImJsYWNrIi8+PC9zdmc+");
+    -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0zLjI5Mjg5IDcuMjkyODlDMy42ODM0MiA2LjkwMjM3IDQuMzE2NTggNi45MDIzNyA0LjcwNzExIDcuMjkyODlMMTIgMTQuNTg1OEwxOS4yOTI5IDcuMjkyODlDMTkuNjgzNCA2LjkwMjM3IDIwLjMxNjYgNi45MDIzNyAyMC43MDcxIDcuMjkyODlDMjEuMDk3NiA3LjY4MzQyIDIxLjA5NzYgOC4zMTY1OCAyMC43MDcxIDguNzA3MTFMMTIuNzA3MSAxNi43MDcxQzEyLjMxNjYgMTcuMDk3NiAxMS42ODM0IDE3LjA5NzYgMTEuMjkyOSAxNi43MDcxTDMuMjkyODkgOC43MDcxMUMyLjkwMjM3IDguMzE2NTggMi45MDIzNyA3LjY4MzQyIDMuMjkyODkgNy4yOTI4OVoiIGZpbGw9ImJsYWNrIi8+PC9zdmc+");
     mask-size: 100%;
+    -webkit-mask-size: 100%;
     mask-repeat: no-repeat;
+    -webkit-mask-repeat: no-repeat;
     background-color: #3d6780;
   }
 }
@@ -60,29 +65,36 @@
 
 .go-to-button{
   mask-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzkxN18yNDU4KSI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMi43MDcxIDE2LjcwNzFMMTYuNzA3MSAxMi43MDcxQzE3LjA5NzYgMTIuMzE2NiAxNy4wOTc2IDExLjY4MzQgMTYuNzA3MSAxMS4yOTI5TDEyLjcwNzEgNy4yOTI4OUMxMi4zMTY2IDYuOTAyMzcgMTEuNjgzNCA2LjkwMjM3IDExLjI5MjkgNy4yOTI4OUMxMC45MDI0IDcuNjgzNDIgMTAuOTAyNCA4LjMxNjU4IDExLjI5MjkgOC43MDcxMUwxMy41ODU4IDExTDkuMDkwOTEgMTFDNi4zMTc4NSAxMSA0IDEzLjE2ODggNCAxNS45Mjg2TDQgMjNDNCAyMy41NTIzIDQuNDQ3NzIgMjQgNSAyNEM1LjU1MjI5IDI0IDYgMjMuNTUyMyA2IDIzTDYgMTUuOTI4NkM2IDE0LjM0ODkgNy4zNDUzMiAxMyA5LjA5MDkxIDEzTDEzLjU4NTggMTNMMTEuMjkyOSAxNS4yOTI5QzEwLjkwMjQgMTUuNjgzNCAxMC45MDI0IDE2LjMxNjYgMTEuMjkyOSAxNi43MDcxQzExLjY4MzQgMTcuMDk3NiAxMi4zMTY2IDE3LjA5NzYgMTIuNzA3MSAxNi43MDcxWiIgZmlsbD0iYmxhY2siLz48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTExLjI5MjkgMC4yOTI4OTNDMTEuNjgzNCAtMC4wOTc2MzExIDEyLjMxNjYgLTAuMDk3NjMxMSAxMi43MDcxIDAuMjkyODkzTDIzLjcwNzEgMTEuMjkyOUMyNC4wOTc2IDExLjY4MzQgMjQuMDk3NiAxMi4zMTY2IDIzLjcwNzEgMTIuNzA3MUwxMi43MDcxIDIzLjcwNzFDMTIuNTE5NiAyMy44OTQ2IDEyLjI2NTIgMjQgMTIgMjRDMTEuNzM0OCAyNCAxMS40ODA0IDIzLjg5NDYgMTEuMjkyOSAyMy43MDcxTDcuNDQyODkgMTkuODU3MUM3LjA1MjM3IDE5LjQ2NjYgNy4wNTIzNyAxOC44MzM0IDcuNDQyODkgMTguNDQyOUM3LjgzMzQyIDE4LjA1MjQgOC40NjY1OCAxOC4wNTI0IDguODU3MTEgMTguNDQyOUwxMiAyMS41ODU4TDIxLjU4NTggMTJMMTIgMi40MTQyMUwyLjQxNDIxIDEyTDIuNzA3MTEgMTIuMjkyOUMzLjA5NzYzIDEyLjY4MzQgMy4wOTc2MyAxMy4zMTY2IDIuNzA3MTEgMTMuNzA3MUMyLjMxNjU4IDE0LjA5NzYgMS42ODM0MiAxNC4wOTc2IDEuMjkyODkgMTMuNzA3MUwwLjI5Mjg5MyAxMi43MDcxQy0wLjA5NzYzMTEgMTIuMzE2NiAtMC4wOTc2MzExIDExLjY4MzQgMC4yOTI4OTMgMTEuMjkyOUwxMS4yOTI5IDAuMjkyODkzWiIgZmlsbD0iYmxhY2siIGZpbGwtb3BhY2l0eT0iMC41Ii8+PC9nPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDBfOTE3XzI0NTgiPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9IndoaXRlIi8+PC9jbGlwUGF0aD48L2RlZnM+PC9zdmc+");
+  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzkxN18yNDU4KSI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMi43MDcxIDE2LjcwNzFMMTYuNzA3MSAxMi43MDcxQzE3LjA5NzYgMTIuMzE2NiAxNy4wOTc2IDExLjY4MzQgMTYuNzA3MSAxMS4yOTI5TDEyLjcwNzEgNy4yOTI4OUMxMi4zMTY2IDYuOTAyMzcgMTEuNjgzNCA2LjkwMjM3IDExLjI5MjkgNy4yOTI4OUMxMC45MDI0IDcuNjgzNDIgMTAuOTAyNCA4LjMxNjU4IDExLjI5MjkgOC43MDcxMUwxMy41ODU4IDExTDkuMDkwOTEgMTFDNi4zMTc4NSAxMSA0IDEzLjE2ODggNCAxNS45Mjg2TDQgMjNDNCAyMy41NTIzIDQuNDQ3NzIgMjQgNSAyNEM1LjU1MjI5IDI0IDYgMjMuNTUyMyA2IDIzTDYgMTUuOTI4NkM2IDE0LjM0ODkgNy4zNDUzMiAxMyA5LjA5MDkxIDEzTDEzLjU4NTggMTNMMTEuMjkyOSAxNS4yOTI5QzEwLjkwMjQgMTUuNjgzNCAxMC45MDI0IDE2LjMxNjYgMTEuMjkyOSAxNi43MDcxQzExLjY4MzQgMTcuMDk3NiAxMi4zMTY2IDE3LjA5NzYgMTIuNzA3MSAxNi43MDcxWiIgZmlsbD0iYmxhY2siLz48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTExLjI5MjkgMC4yOTI4OTNDMTEuNjgzNCAtMC4wOTc2MzExIDEyLjMxNjYgLTAuMDk3NjMxMSAxMi43MDcxIDAuMjkyODkzTDIzLjcwNzEgMTEuMjkyOUMyNC4wOTc2IDExLjY4MzQgMjQuMDk3NiAxMi4zMTY2IDIzLjcwNzEgMTIuNzA3MUwxMi43MDcxIDIzLjcwNzFDMTIuNTE5NiAyMy44OTQ2IDEyLjI2NTIgMjQgMTIgMjRDMTEuNzM0OCAyNCAxMS40ODA0IDIzLjg5NDYgMTEuMjkyOSAyMy43MDcxTDcuNDQyODkgMTkuODU3MUM3LjA1MjM3IDE5LjQ2NjYgNy4wNTIzNyAxOC44MzM0IDcuNDQyODkgMTguNDQyOUM3LjgzMzQyIDE4LjA1MjQgOC40NjY1OCAxOC4wNTI0IDguODU3MTEgMTguNDQyOUwxMiAyMS41ODU4TDIxLjU4NTggMTJMMTIgMi40MTQyMUwyLjQxNDIxIDEyTDIuNzA3MTEgMTIuMjkyOUMzLjA5NzYzIDEyLjY4MzQgMy4wOTc2MyAxMy4zMTY2IDIuNzA3MTEgMTMuNzA3MUMyLjMxNjU4IDE0LjA5NzYgMS42ODM0MiAxNC4wOTc2IDEuMjkyODkgMTMuNzA3MUwwLjI5Mjg5MyAxMi43MDcxQy0wLjA5NzYzMTEgMTIuMzE2NiAtMC4wOTc2MzExIDExLjY4MzQgMC4yOTI4OTMgMTEuMjkyOUwxMS4yOTI5IDAuMjkyODkzWiIgZmlsbD0iYmxhY2siIGZpbGwtb3BhY2l0eT0iMC41Ii8+PC9nPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDBfOTE3XzI0NTgiPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9IndoaXRlIi8+PC9jbGlwUGF0aD48L2RlZnM+PC9zdmc+");
 }
 
 .print-pdf-button{
   mask-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00LjAwMDAxIDAuOTg5OTlDMy40NDc3MiAwLjk4OTk5IDMuMDAwMDEgMS40Mzc3MSAzLjAwMDAxIDEuOTg5OTlWMTAuOTlDMy4wMDAwMSAxMS41NDIzIDMuNDQ3NzIgMTEuOTkgNC4wMDAwMSAxMS45OUM0LjU1MjI5IDExLjk5IDUuMDAwMDEgMTEuNTQyMyA1LjAwMDAxIDEwLjk5VjIuOTg5OTlIMTRWNi45ODk5OUMxNCA3LjU0MjI3IDE0LjQ0NzcgNy45ODk5OSAxNSA3Ljk4OTk5SDE5VjEwLjk5QzE5IDExLjU0MjMgMTkuNDQ3NyAxMS45OSAyMCAxMS45OUMyMC41NTIzIDExLjk5IDIxIDExLjU0MjMgMjEgMTAuOTlWNi45ODk5OUMyMSA2LjcyNDc3IDIwLjg5NDcgNi40NzA0MiAyMC43MDcxIDYuMjgyODhMMTUuNzA3MSAxLjI4Mjg4QzE1LjUxOTYgMS4wOTUzNSAxNS4yNjUyIDAuOTg5OTkgMTUgMC45ODk5OUg0LjAwMDAxWk0xNy41ODU4IDUuOTg5OTlMMTYgNC40MDQyVjUuOTg5OTlIMTcuNTg1OFpNMy4zMDQ5MyAyMC4wNTQ5SDQuNzU4MDZDNS40Mzc3NCAyMC4wNTQ5IDYuMDE5NzggMTkuOTQzNiA2LjUwNDE1IDE5LjcyMDlDNi45OTI0MyAxOS40OTQ0IDcuMzY1NDggMTkuMTc4IDcuNjIzMjkgMTguNzcxN0M3Ljg4NTAxIDE4LjM2NTUgOC4wMTU4NyAxNy44ODcgOC4wMTU4NyAxNy4zMzYyQzguMDE1ODcgMTYuNzg1NCA3Ljg4NTAxIDE2LjI5NzEgNy42MjMyOSAxNS44NzEzQzcuMzY1NDggMTUuNDQxNyA2Ljk5MjQzIDE1LjEwMzggNi41MDQxNSAxNC44NTc3QzYuMDE5NzggMTQuNjExNiA1LjQzNzc0IDE0LjQ4ODUgNC43NTgwNiAxNC40ODg1SDEuMzk0NzhWMjMuMDE5OEgzLjMwNDkzVjIwLjA1NDlaTTMuMzA0OTMgMTguNTcyNVYxNS45NzA5SDQuNzU4MDZDNS4wNzQ0NiAxNS45NzA5IDUuMzI4MzcgMTYuMDM1NCA1LjUxOTc4IDE2LjE2NDNDNS43MTUwOSAxNi4yOTMyIDUuODU3NjcgMTYuNDYzMSA1Ljk0NzUxIDE2LjY3NDFDNi4wNDEyNiAxNi44ODExIDYuMDg4MTMgMTcuMTA1NyA2LjA4ODEzIDE3LjM0NzlDNi4wODgxMyAxNy41ODIzIDYuMDQxMjYgMTcuNzkzMiA1Ljk0NzUxIDE3Ljk4MDdDNS44NTc2NyAxOC4xNjQzIDUuNzE1MDkgMTguMzA4OCA1LjUxOTc4IDE4LjQxNDNDNS4zMjgzNyAxOC41MTk4IDUuMDc0NDYgMTguNTcyNSA0Ljc1ODA2IDE4LjU3MjVIMy4zMDQ5M1pNMTEuMzI2MiAyMy4wMTk4SDEyLjExNzJDMTIuNjkxNCAyMy4wMTk4IDEzLjIxNjggMjIuOTIyMSAxMy42OTM0IDIyLjcyNjhDMTQuMTY5OSAyMi41MzE1IDE0LjU4MiAyMi4yNTQyIDE0LjkyOTcgMjEuODk0OEMxNS4yODEzIDIxLjUzMTUgMTUuNTUyNyAyMS4xMDE4IDE1Ljc0NDIgMjAuNjA1N0MxNS45MzU2IDIwLjEwNTcgMTYuMDMxMyAxOS41NTMgMTYuMDMxMyAxOC45NDc1VjE4LjU2NjdDMTYuMDMxMyAxNy45NTczIDE1LjkzNTYgMTcuNDA0NSAxNS43NDQyIDE2LjkwODRDMTUuNTUyNyAxNi40MTI0IDE1LjI4MTMgMTUuOTgyNyAxNC45Mjk3IDE1LjYxOTRDMTQuNTgyIDE1LjI1NjEgMTQuMTY4IDE0Ljk3NjggMTMuNjg3NSAxNC43ODE1QzEzLjIxMDkgMTQuNTg2MiAxMi42ODM2IDE0LjQ4ODUgMTIuMTA1NSAxNC40ODg1SDExLjMyNjJIMTAuMjA3SDkuNDE2MDNWMjMuMDE5OEgxMC4yNDIySDExLjMyNjJaTTExLjMyNjIgMjEuNTQzMkgxMi4xMTcyQzEyLjU0MyAyMS41NDMyIDEyLjkwMjQgMjEuNDQ1NiAxMy4xOTUzIDIxLjI1MDJDMTMuNDg4MyAyMS4wNTEgMTMuNzEwOSAyMC43NTgxIDEzLjg2MzMgMjAuMzcxM0MxNC4wMTU2IDE5Ljk4MDcgMTQuMDkxOCAxOS41MDYxIDE0LjA5MTggMTguOTQ3NVYxOC41NTQ5QzE0LjA5MTggMTguMTMzMSAxNC4wNDg4IDE3Ljc2MiAxMy45NjI5IDE3LjQ0MTdDMTMuODc3IDE3LjExNzQgMTMuNzUgMTYuODQ1OSAxMy41ODIgMTYuNjI3MkMxMy40MTQxIDE2LjQwODQgMTMuMjA1MSAxNi4yNDQ0IDEyLjk1NTEgMTYuMTM1QzEyLjcwOSAxNi4wMjU2IDEyLjQyNTggMTUuOTcwOSAxMi4xMDU1IDE1Ljk3MDlIMTEuMzI2MlYyMS41NDMyWk0xOS4zNDc0IDE4LjA4NjJWMTUuOTcwOUgyMy4wNzk5VjE0LjQ4ODVIMTkuMzQ3NEgxOC44MTQySDE3LjQzNzNWMjMuMDE5OEgxOS4zNDc0VjE5LjU2MjdIMjIuNzA0OVYxOC4wODYySDE5LjM0NzRaIiBmaWxsPSJibGFjayIvPjwvc3ZnPg==");
+  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00LjAwMDAxIDAuOTg5OTlDMy40NDc3MiAwLjk4OTk5IDMuMDAwMDEgMS40Mzc3MSAzLjAwMDAxIDEuOTg5OTlWMTAuOTlDMy4wMDAwMSAxMS41NDIzIDMuNDQ3NzIgMTEuOTkgNC4wMDAwMSAxMS45OUM0LjU1MjI5IDExLjk5IDUuMDAwMDEgMTEuNTQyMyA1LjAwMDAxIDEwLjk5VjIuOTg5OTlIMTRWNi45ODk5OUMxNCA3LjU0MjI3IDE0LjQ0NzcgNy45ODk5OSAxNSA3Ljk4OTk5SDE5VjEwLjk5QzE5IDExLjU0MjMgMTkuNDQ3NyAxMS45OSAyMCAxMS45OUMyMC41NTIzIDExLjk5IDIxIDExLjU0MjMgMjEgMTAuOTlWNi45ODk5OUMyMSA2LjcyNDc3IDIwLjg5NDcgNi40NzA0MiAyMC43MDcxIDYuMjgyODhMMTUuNzA3MSAxLjI4Mjg4QzE1LjUxOTYgMS4wOTUzNSAxNS4yNjUyIDAuOTg5OTkgMTUgMC45ODk5OUg0LjAwMDAxWk0xNy41ODU4IDUuOTg5OTlMMTYgNC40MDQyVjUuOTg5OTlIMTcuNTg1OFpNMy4zMDQ5MyAyMC4wNTQ5SDQuNzU4MDZDNS40Mzc3NCAyMC4wNTQ5IDYuMDE5NzggMTkuOTQzNiA2LjUwNDE1IDE5LjcyMDlDNi45OTI0MyAxOS40OTQ0IDcuMzY1NDggMTkuMTc4IDcuNjIzMjkgMTguNzcxN0M3Ljg4NTAxIDE4LjM2NTUgOC4wMTU4NyAxNy44ODcgOC4wMTU4NyAxNy4zMzYyQzguMDE1ODcgMTYuNzg1NCA3Ljg4NTAxIDE2LjI5NzEgNy42MjMyOSAxNS44NzEzQzcuMzY1NDggMTUuNDQxNyA2Ljk5MjQzIDE1LjEwMzggNi41MDQxNSAxNC44NTc3QzYuMDE5NzggMTQuNjExNiA1LjQzNzc0IDE0LjQ4ODUgNC43NTgwNiAxNC40ODg1SDEuMzk0NzhWMjMuMDE5OEgzLjMwNDkzVjIwLjA1NDlaTTMuMzA0OTMgMTguNTcyNVYxNS45NzA5SDQuNzU4MDZDNS4wNzQ0NiAxNS45NzA5IDUuMzI4MzcgMTYuMDM1NCA1LjUxOTc4IDE2LjE2NDNDNS43MTUwOSAxNi4yOTMyIDUuODU3NjcgMTYuNDYzMSA1Ljk0NzUxIDE2LjY3NDFDNi4wNDEyNiAxNi44ODExIDYuMDg4MTMgMTcuMTA1NyA2LjA4ODEzIDE3LjM0NzlDNi4wODgxMyAxNy41ODIzIDYuMDQxMjYgMTcuNzkzMiA1Ljk0NzUxIDE3Ljk4MDdDNS44NTc2NyAxOC4xNjQzIDUuNzE1MDkgMTguMzA4OCA1LjUxOTc4IDE4LjQxNDNDNS4zMjgzNyAxOC41MTk4IDUuMDc0NDYgMTguNTcyNSA0Ljc1ODA2IDE4LjU3MjVIMy4zMDQ5M1pNMTEuMzI2MiAyMy4wMTk4SDEyLjExNzJDMTIuNjkxNCAyMy4wMTk4IDEzLjIxNjggMjIuOTIyMSAxMy42OTM0IDIyLjcyNjhDMTQuMTY5OSAyMi41MzE1IDE0LjU4MiAyMi4yNTQyIDE0LjkyOTcgMjEuODk0OEMxNS4yODEzIDIxLjUzMTUgMTUuNTUyNyAyMS4xMDE4IDE1Ljc0NDIgMjAuNjA1N0MxNS45MzU2IDIwLjEwNTcgMTYuMDMxMyAxOS41NTMgMTYuMDMxMyAxOC45NDc1VjE4LjU2NjdDMTYuMDMxMyAxNy45NTczIDE1LjkzNTYgMTcuNDA0NSAxNS43NDQyIDE2LjkwODRDMTUuNTUyNyAxNi40MTI0IDE1LjI4MTMgMTUuOTgyNyAxNC45Mjk3IDE1LjYxOTRDMTQuNTgyIDE1LjI1NjEgMTQuMTY4IDE0Ljk3NjggMTMuNjg3NSAxNC43ODE1QzEzLjIxMDkgMTQuNTg2MiAxMi42ODM2IDE0LjQ4ODUgMTIuMTA1NSAxNC40ODg1SDExLjMyNjJIMTAuMjA3SDkuNDE2MDNWMjMuMDE5OEgxMC4yNDIySDExLjMyNjJaTTExLjMyNjIgMjEuNTQzMkgxMi4xMTcyQzEyLjU0MyAyMS41NDMyIDEyLjkwMjQgMjEuNDQ1NiAxMy4xOTUzIDIxLjI1MDJDMTMuNDg4MyAyMS4wNTEgMTMuNzEwOSAyMC43NTgxIDEzLjg2MzMgMjAuMzcxM0MxNC4wMTU2IDE5Ljk4MDcgMTQuMDkxOCAxOS41MDYxIDE0LjA5MTggMTguOTQ3NVYxOC41NTQ5QzE0LjA5MTggMTguMTMzMSAxNC4wNDg4IDE3Ljc2MiAxMy45NjI5IDE3LjQ0MTdDMTMuODc3IDE3LjExNzQgMTMuNzUgMTYuODQ1OSAxMy41ODIgMTYuNjI3MkMxMy40MTQxIDE2LjQwODQgMTMuMjA1MSAxNi4yNDQ0IDEyLjk1NTEgMTYuMTM1QzEyLjcwOSAxNi4wMjU2IDEyLjQyNTggMTUuOTcwOSAxMi4xMDU1IDE1Ljk3MDlIMTEuMzI2MlYyMS41NDMyWk0xOS4zNDc0IDE4LjA4NjJWMTUuOTcwOUgyMy4wNzk5VjE0LjQ4ODVIMTkuMzQ3NEgxOC44MTQySDE3LjQzNzNWMjMuMDE5OEgxOS4zNDc0VjE5LjU2MjdIMjIuNzA0OVYxOC4wODYySDE5LjM0NzRaIiBmaWxsPSJibGFjayIvPjwvc3ZnPg==");
 }
 
 .masked-system-button{
   padding: 0 !important;
   background-color: #3d6780;
   mask-size: 100%;
+  -webkit-mask-size: 100%;
   mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
 }
 
 .print-excel-button{
   mask-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00LjAwMDAxIDAuOTg5OTlDMy40NDc3MiAwLjk4OTk5IDMuMDAwMDEgMS40Mzc3MSAzLjAwMDAxIDEuOTg5OTlWMTAuOTlDMy4wMDAwMSAxMS41NDIzIDMuNDQ3NzIgMTEuOTkgNC4wMDAwMSAxMS45OUM0LjU1MjI5IDExLjk5IDUuMDAwMDEgMTEuNTQyMyA1LjAwMDAxIDEwLjk5VjIuOTg5OTlIMTRWNi45ODk5OUMxNCA3LjU0MjI3IDE0LjQ0NzcgNy45ODk5OSAxNSA3Ljk4OTk5SDE5VjEwLjk5QzE5IDExLjU0MjMgMTkuNDQ3NyAxMS45OSAyMCAxMS45OUMyMC41NTIzIDExLjk5IDIxIDExLjU0MjMgMjEgMTAuOTlWNi45ODk5OUMyMSA2LjcyNDc3IDIwLjg5NDcgNi40NzA0MiAyMC43MDcxIDYuMjgyODhMMTUuNzA3MSAxLjI4Mjg4QzE1LjUxOTYgMS4wOTUzNSAxNS4yNjUyIDAuOTg5OTkgMTUgMC45ODk5OUg0LjAwMDAxWk0xNy41ODU4IDUuOTg5OTlMMTYgNC40MDQyVjUuOTg5OTlIMTcuNTg1OFpNNC43ODE0OSAxNy4zOTQ4TDMuMjgxNDkgMTQuNDg4NUgxLjEwMTgxTDMuNTMzNDUgMTguNzE5TDEuMDM3MzUgMjMuMDE5OEgzLjI0MDQ4TDQuNzgxNDkgMjAuMDYwOEw2LjMyODM3IDIzLjAxOThIOC41MjU2M0w2LjAzNTQgMTguNzE5TDguNDYxMTggMTQuNDg4NUg2LjI4MTQ5TDQuNzgxNDkgMTcuMzk0OFpNMTUuMTExMyAyMy4wMTk4VjIxLjU0MzJIMTEuNDU1MVYxNC40ODg1SDkuNTQ0OTNWMjMuMDE5OEgxMC44MDQ3SDExLjQ1NTFIMTUuMTExM1pNMjAuNjQ4MiAyMC4zODMxQzIwLjY5MTIgMjAuNDk2MyAyMC43MTI3IDIwLjYyNTIgMjAuNzEyNyAyMC43Njk4QzIwLjcxMjcgMjAuOTQxNyAyMC42Njk3IDIxLjA5NzkgMjAuNTgzOCAyMS4yMzg1QzIwLjQ5NzggMjEuMzc5MiAyMC4zNjUgMjEuNDkwNSAyMC4xODUzIDIxLjU3MjVDMjAuMDA5NSAyMS42NTA2IDE5Ljc3OTEgMjEuNjg5NyAxOS40OTM5IDIxLjY4OTdDMTkuMjQ3OCAyMS42ODk3IDE5LjAyNTIgMjEuNjY2MyAxOC44MjU5IDIxLjYxOTRDMTguNjI2NyAyMS41NzI1IDE4LjQ1NjggMjEuNDk0NCAxOC4zMTYyIDIxLjM4NUMxOC4xNzk1IDIxLjI3NTYgMTguMDc0IDIxLjEzMzEgMTcuOTk5OCAyMC45NTczQzE3LjkyNTYgMjAuNzc3NiAxNy44ODg0IDIwLjU1ODggMTcuODg4NCAyMC4zMDFIMTUuOTc4M0MxNS45NzgzIDIwLjc5MzIgMTYuMDc3OSAyMS4yMTkgMTYuMjc3MSAyMS41Nzg0QzE2LjQ4MDIgMjEuOTMzOCAxNi43NDk4IDIyLjIyNjggMTcuMDg1NyAyMi40NTczQzE3LjQyNTYgMjIuNjg3NyAxNy44MDQ1IDIyLjg1OTYgMTguMjIyNCAyMi45NzI5QzE4LjY0MDQgMjMuMDgyMyAxOS4wNjQyIDIzLjEzNyAxOS40OTM5IDIzLjEzN0MxOS45NjY2IDIzLjEzNyAyMC4zOTQzIDIzLjA4NDIgMjAuNzc3MSAyMi45Nzg4QzIxLjE1OTkgMjIuODczMyAyMS40ODgxIDIyLjcxOSAyMS43NjE1IDIyLjUxNTlDMjIuMDM4OCAyMi4zMDg4IDIyLjI0OTggMjIuMDU4OCAyMi4zOTQzIDIxLjc2NTlDMjIuNTQyNyAyMS40NzI5IDIyLjYxNyAyMS4xMzcgMjIuNjE3IDIwLjc1ODFDMjIuNjE3IDIwLjQwMjYgMjIuNTU0NSAyMC4wODQyIDIyLjQyOTUgMTkuODAzQzIyLjMwODQgMTkuNTIxNyAyMi4xMjY3IDE5LjI2OTggMjEuODg0NSAxOS4wNDcxQzIxLjY0MjQgMTguODI0NSAyMS4zNDM1IDE4LjYyNTIgMjAuOTg4MSAxOC40NDk1QzIwLjYzNjUgMTguMjczNyAyMC4yMzIyIDE4LjExMzUgMTkuNzc1MiAxNy45NjlDMTkuNTEzNCAxNy44OTA5IDE5LjI4MSAxNy44MDg4IDE5LjA3NzkgMTcuNzIyOUMxOC44NzQ4IDE3LjYzNyAxOC43MDI5IDE3LjU0NzEgMTguNTYyMyAxNy40NTM0QzE4LjQyNTYgMTcuMzU1NyAxOC4zMjAxIDE3LjI1MjIgMTguMjQ1OSAxNy4xNDI4QzE4LjE3NTYgMTcuMDI5NSAxOC4xNDA0IDE2LjkwNDUgMTguMTQwNCAxNi43Njc4QzE4LjE0MDQgMTYuNTk1OSAxOC4xODczIDE2LjQzNzcgMTguMjgxIDE2LjI5MzJDMTguMzc4NyAxNi4xNDg3IDE4LjUyMTMgMTYuMDM1NCAxOC43MDg4IDE1Ljk1MzRDMTguOTAwMiAxNS44Njc0IDE5LjEzNjUgMTUuODI0NSAxOS40MTc3IDE1LjgyNDVDMTkuNzA2OCAxNS44MjQ1IDE5Ljk0NyAxNS44NzUyIDIwLjEzODQgMTUuOTc2OEMyMC4zMzM4IDE2LjA3ODQgMjAuNDc4MyAxNi4yMTkgMjAuNTcyIDE2LjM5ODdDMjAuNjY5NyAxNi41NzQ1IDIwLjcxODUgMTYuNzc3NiAyMC43MTg1IDE3LjAwODFIMjIuNjE3QzIyLjYxNyAxNi40ODQ2IDIyLjQ4NDEgMTYuMDI1NiAyMi4yMTg1IDE1LjYzMTFDMjEuOTUyOSAxNS4yMzI3IDIxLjU4MTggMTQuOTI0MSAyMS4xMDUyIDE0LjcwNTNDMjAuNjMyNiAxNC40ODI3IDIwLjA4MzggMTQuMzcxMyAxOS40NTg4IDE0LjM3MTNDMTguOTkgMTQuMzcxMyAxOC41NjAzIDE0LjQyOCAxOC4xNjk3IDE0LjU0MTNDMTcuNzc5MSAxNC42NTA2IDE3LjQzOTIgMTQuODEwOCAxNy4xNTAyIDE1LjAyMTdDMTYuODYxMSAxNS4yMjg4IDE2LjYzNjUgMTUuNDc4OCAxNi40NzYzIDE1Ljc3MTdDMTYuMzE2MiAxNi4wNjQ3IDE2LjIzNjEgMTYuMzkyOCAxNi4yMzYxIDE2Ljc1NjFDMTYuMjM2MSAxNy4xMzExIDE2LjMxMjMgMTcuNDU5MiAxNi40NjQ2IDE3Ljc0MDVDMTYuNjIwOSAxOC4wMjE3IDE2LjgzMzggMTguMjY3OCAxNy4xMDMzIDE4LjQ3ODhDMTcuMzcyOCAxOC42ODk3IDE3LjY3OTUgMTguODc1MiAxOC4wMjMyIDE5LjAzNTRDMTguMzcwOSAxOS4xOTE3IDE4LjczNjEgMTkuMzMyMyAxOS4xMTg5IDE5LjQ1NzNDMTkuNDU0OSAxOS41NjI3IDE5LjcyNjMgMTkuNjY2MyAxOS45MzM0IDE5Ljc2NzhDMjAuMTQwNCAxOS44NjU1IDIwLjMwMDYgMTkuOTYzMSAyMC40MTM4IDIwLjA2MDhDMjAuNTI3MSAyMC4xNTg0IDIwLjYwNTIgMjAuMjY1OSAyMC42NDgyIDIwLjM4MzFaIiBmaWxsPSJibGFjayIvPjwvc3ZnPg==");
+  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00LjAwMDAxIDAuOTg5OTlDMy40NDc3MiAwLjk4OTk5IDMuMDAwMDEgMS40Mzc3MSAzLjAwMDAxIDEuOTg5OTlWMTAuOTlDMy4wMDAwMSAxMS41NDIzIDMuNDQ3NzIgMTEuOTkgNC4wMDAwMSAxMS45OUM0LjU1MjI5IDExLjk5IDUuMDAwMDEgMTEuNTQyMyA1LjAwMDAxIDEwLjk5VjIuOTg5OTlIMTRWNi45ODk5OUMxNCA3LjU0MjI3IDE0LjQ0NzcgNy45ODk5OSAxNSA3Ljk4OTk5SDE5VjEwLjk5QzE5IDExLjU0MjMgMTkuNDQ3NyAxMS45OSAyMCAxMS45OUMyMC41NTIzIDExLjk5IDIxIDExLjU0MjMgMjEgMTAuOTlWNi45ODk5OUMyMSA2LjcyNDc3IDIwLjg5NDcgNi40NzA0MiAyMC43MDcxIDYuMjgyODhMMTUuNzA3MSAxLjI4Mjg4QzE1LjUxOTYgMS4wOTUzNSAxNS4yNjUyIDAuOTg5OTkgMTUgMC45ODk5OUg0LjAwMDAxWk0xNy41ODU4IDUuOTg5OTlMMTYgNC40MDQyVjUuOTg5OTlIMTcuNTg1OFpNNC43ODE0OSAxNy4zOTQ4TDMuMjgxNDkgMTQuNDg4NUgxLjEwMTgxTDMuNTMzNDUgMTguNzE5TDEuMDM3MzUgMjMuMDE5OEgzLjI0MDQ4TDQuNzgxNDkgMjAuMDYwOEw2LjMyODM3IDIzLjAxOThIOC41MjU2M0w2LjAzNTQgMTguNzE5TDguNDYxMTggMTQuNDg4NUg2LjI4MTQ5TDQuNzgxNDkgMTcuMzk0OFpNMTUuMTExMyAyMy4wMTk4VjIxLjU0MzJIMTEuNDU1MVYxNC40ODg1SDkuNTQ0OTNWMjMuMDE5OEgxMC44MDQ3SDExLjQ1NTFIMTUuMTExM1pNMjAuNjQ4MiAyMC4zODMxQzIwLjY5MTIgMjAuNDk2MyAyMC43MTI3IDIwLjYyNTIgMjAuNzEyNyAyMC43Njk4QzIwLjcxMjcgMjAuOTQxNyAyMC42Njk3IDIxLjA5NzkgMjAuNTgzOCAyMS4yMzg1QzIwLjQ5NzggMjEuMzc5MiAyMC4zNjUgMjEuNDkwNSAyMC4xODUzIDIxLjU3MjVDMjAuMDA5NSAyMS42NTA2IDE5Ljc3OTEgMjEuNjg5NyAxOS40OTM5IDIxLjY4OTdDMTkuMjQ3OCAyMS42ODk3IDE5LjAyNTIgMjEuNjY2MyAxOC44MjU5IDIxLjYxOTRDMTguNjI2NyAyMS41NzI1IDE4LjQ1NjggMjEuNDk0NCAxOC4zMTYyIDIxLjM4NUMxOC4xNzk1IDIxLjI3NTYgMTguMDc0IDIxLjEzMzEgMTcuOTk5OCAyMC45NTczQzE3LjkyNTYgMjAuNzc3NiAxNy44ODg0IDIwLjU1ODggMTcuODg4NCAyMC4zMDFIMTUuOTc4M0MxNS45NzgzIDIwLjc5MzIgMTYuMDc3OSAyMS4yMTkgMTYuMjc3MSAyMS41Nzg0QzE2LjQ4MDIgMjEuOTMzOCAxNi43NDk4IDIyLjIyNjggMTcuMDg1NyAyMi40NTczQzE3LjQyNTYgMjIuNjg3NyAxNy44MDQ1IDIyLjg1OTYgMTguMjIyNCAyMi45NzI5QzE4LjY0MDQgMjMuMDgyMyAxOS4wNjQyIDIzLjEzNyAxOS40OTM5IDIzLjEzN0MxOS45NjY2IDIzLjEzNyAyMC4zOTQzIDIzLjA4NDIgMjAuNzc3MSAyMi45Nzg4QzIxLjE1OTkgMjIuODczMyAyMS40ODgxIDIyLjcxOSAyMS43NjE1IDIyLjUxNTlDMjIuMDM4OCAyMi4zMDg4IDIyLjI0OTggMjIuMDU4OCAyMi4zOTQzIDIxLjc2NTlDMjIuNTQyNyAyMS40NzI5IDIyLjYxNyAyMS4xMzcgMjIuNjE3IDIwLjc1ODFDMjIuNjE3IDIwLjQwMjYgMjIuNTU0NSAyMC4wODQyIDIyLjQyOTUgMTkuODAzQzIyLjMwODQgMTkuNTIxNyAyMi4xMjY3IDE5LjI2OTggMjEuODg0NSAxOS4wNDcxQzIxLjY0MjQgMTguODI0NSAyMS4zNDM1IDE4LjYyNTIgMjAuOTg4MSAxOC40NDk1QzIwLjYzNjUgMTguMjczNyAyMC4yMzIyIDE4LjExMzUgMTkuNzc1MiAxNy45NjlDMTkuNTEzNCAxNy44OTA5IDE5LjI4MSAxNy44MDg4IDE5LjA3NzkgMTcuNzIyOUMxOC44NzQ4IDE3LjYzNyAxOC43MDI5IDE3LjU0NzEgMTguNTYyMyAxNy40NTM0QzE4LjQyNTYgMTcuMzU1NyAxOC4zMjAxIDE3LjI1MjIgMTguMjQ1OSAxNy4xNDI4QzE4LjE3NTYgMTcuMDI5NSAxOC4xNDA0IDE2LjkwNDUgMTguMTQwNCAxNi43Njc4QzE4LjE0MDQgMTYuNTk1OSAxOC4xODczIDE2LjQzNzcgMTguMjgxIDE2LjI5MzJDMTguMzc4NyAxNi4xNDg3IDE4LjUyMTMgMTYuMDM1NCAxOC43MDg4IDE1Ljk1MzRDMTguOTAwMiAxNS44Njc0IDE5LjEzNjUgMTUuODI0NSAxOS40MTc3IDE1LjgyNDVDMTkuNzA2OCAxNS44MjQ1IDE5Ljk0NyAxNS44NzUyIDIwLjEzODQgMTUuOTc2OEMyMC4zMzM4IDE2LjA3ODQgMjAuNDc4MyAxNi4yMTkgMjAuNTcyIDE2LjM5ODdDMjAuNjY5NyAxNi41NzQ1IDIwLjcxODUgMTYuNzc3NiAyMC43MTg1IDE3LjAwODFIMjIuNjE3QzIyLjYxNyAxNi40ODQ2IDIyLjQ4NDEgMTYuMDI1NiAyMi4yMTg1IDE1LjYzMTFDMjEuOTUyOSAxNS4yMzI3IDIxLjU4MTggMTQuOTI0MSAyMS4xMDUyIDE0LjcwNTNDMjAuNjMyNiAxNC40ODI3IDIwLjA4MzggMTQuMzcxMyAxOS40NTg4IDE0LjM3MTNDMTguOTkgMTQuMzcxMyAxOC41NjAzIDE0LjQyOCAxOC4xNjk3IDE0LjU0MTNDMTcuNzc5MSAxNC42NTA2IDE3LjQzOTIgMTQuODEwOCAxNy4xNTAyIDE1LjAyMTdDMTYuODYxMSAxNS4yMjg4IDE2LjYzNjUgMTUuNDc4OCAxNi40NzYzIDE1Ljc3MTdDMTYuMzE2MiAxNi4wNjQ3IDE2LjIzNjEgMTYuMzkyOCAxNi4yMzYxIDE2Ljc1NjFDMTYuMjM2MSAxNy4xMzExIDE2LjMxMjMgMTcuNDU5MiAxNi40NjQ2IDE3Ljc0MDVDMTYuNjIwOSAxOC4wMjE3IDE2LjgzMzggMTguMjY3OCAxNy4xMDMzIDE4LjQ3ODhDMTcuMzcyOCAxOC42ODk3IDE3LjY3OTUgMTguODc1MiAxOC4wMjMyIDE5LjAzNTRDMTguMzcwOSAxOS4xOTE3IDE4LjczNjEgMTkuMzMyMyAxOS4xMTg5IDE5LjQ1NzNDMTkuNDU0OSAxOS41NjI3IDE5LjcyNjMgMTkuNjY2MyAxOS45MzM0IDE5Ljc2NzhDMjAuMTQwNCAxOS44NjU1IDIwLjMwMDYgMTkuOTYzMSAyMC40MTM4IDIwLjA2MDhDMjAuNTI3MSAyMC4xNTg0IDIwLjYwNTIgMjAuMjY1OSAyMC42NDgyIDIwLjM4MzFaIiBmaWxsPSJibGFjayIvPjwvc3ZnPg==");
 }
 
 .print-csv-button{
   mask-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00LjAwMDAxIDAuOTg5OTlDMy40NDc3MiAwLjk4OTk5IDMuMDAwMDEgMS40Mzc3MSAzLjAwMDAxIDEuOTg5OTlWMTAuOTlDMy4wMDAwMSAxMS41NDIzIDMuNDQ3NzIgMTEuOTkgNC4wMDAwMSAxMS45OUM0LjU1MjI5IDExLjk5IDUuMDAwMDEgMTEuNTQyMyA1LjAwMDAxIDEwLjk5VjIuOTg5OTlIMTRWNi45ODk5OUMxNCA3LjU0MjI3IDE0LjQ0NzcgNy45ODk5OSAxNSA3Ljk4OTk5SDE5VjEwLjk5QzE5IDExLjU0MjMgMTkuNDQ3NyAxMS45OSAyMCAxMS45OUMyMC41NTIzIDExLjk5IDIxIDExLjU0MjMgMjEgMTAuOTlWNi45ODk5OUMyMSA2LjcyNDc3IDIwLjg5NDcgNi40NzA0MiAyMC43MDcxIDYuMjgyODhMMTUuNzA3MSAxLjI4Mjg4QzE1LjUxOTYgMS4wOTUzNSAxNS4yNjUyIDAuOTg5OTkgMTUgMC45ODk5OUg0LjAwMDAxWk0xNy41ODU4IDUuOTg5OTlMMTYgNC40MDQyVjUuOTg5OTlIMTcuNTg1OFpNNy42NjQzMSAyMC4xNjA0SDUuNzY1ODdDNS43NDYzNCAyMC40OTI0IDUuNjc2MDMgMjAuNzY3OCA1LjU1NDkzIDIwLjk4NjZDNS40MzM4NCAyMS4yMDUzIDUuMjYwMDEgMjEuMzY5NCA1LjAzMzQ1IDIxLjQ3ODhDNC44MDY4OCAyMS41ODQyIDQuNTIzNjggMjEuNjM3IDQuMTgzODQgMjEuNjM3QzMuODg2OTYgMjEuNjM3IDMuNjM1MDEgMjEuNTg0MiAzLjQyNzk4IDIxLjQ3ODhDMy4yMjA5NSAyMS4zNzMzIDMuMDUxMDMgMjEuMjEzMSAyLjkxODIxIDIwLjk5ODNDMi43ODkzMSAyMC43ODM0IDIuNjk1NTYgMjAuNTEyIDIuNjM2OTYgMjAuMTgzOEMyLjU3ODM3IDE5Ljg1NTcgMi41NDkwNyAxOS40NjcgMi41NDkwNyAxOS4wMTc4VjE4LjQ4NDZDMi41NDkwNyAxOC4wMzE1IDIuNTgyMjggMTcuNjQwOSAyLjY0ODY4IDE3LjMxMjdDMi43MTUwOSAxNi45ODA3IDIuODE0NyAxNi43MDczIDIuOTQ3NTEgMTYuNDkyNEMzLjA4NDIzIDE2LjI3NzYgMy4yNTQxNSAxNi4xMTk0IDMuNDU3MjggMTYuMDE3OEMzLjY2NDMxIDE1LjkxNjMgMy45MDQ1NCAxNS44NjU1IDQuMTc3OTggMTUuODY1NUM0LjU1Mjk4IDE1Ljg2NTUgNC44NTM3NiAxNS45MjQxIDUuMDgwMzIgMTYuMDQxM0M1LjMwNjg4IDE2LjE1ODQgNS40NzQ4NSAxNi4zMzIzIDUuNTg0MjMgMTYuNTYyN0M1LjY5MzYgMTYuNzg5MyA1Ljc1NjEgMTcuMDY4NiA1Ljc3MTczIDE3LjQwMDZINy42NzYwM0M3LjYyMTM0IDE2LjgxNDcgNy40NTUzMiAxNi4yOTMyIDcuMTc3OTggMTUuODM2MkM2LjkwNDU0IDE1LjM3OTIgNi41MTc4MiAxNS4wMTk4IDYuMDE3ODIgMTQuNzU4MUM1LjUxNzgyIDE0LjQ5NjMgNC45MDQ1NCAxNC4zNjU1IDQuMTc3OTggMTQuMzY1NUMzLjYzODkyIDE0LjM2NTUgMy4xNTA2MyAxNC40NjEyIDIuNzEzMTMgMTQuNjUyNkMyLjI3NTYzIDE0Ljg0NCAxLjkwMDYzIDE1LjExOTQgMS41ODgxMyAxNS40Nzg4QzEuMjc1NjMgMTUuODM4MSAxLjAzNTQgMTYuMjcxNyAwLjg2NzQzMiAxNi43Nzk1QzAuNjk5NDYzIDE3LjI4NzQgMC42MTU0NzkgMTcuODU5NiAwLjYxNTQ3OSAxOC40OTYzVjE5LjAxNzhDMC42MTU0NzkgMTkuNjU0NSAwLjY5NTU1NyAyMC4yMjY4IDAuODU1NzEzIDIwLjczNDZDMS4wMTk3OCAyMS4yMzg1IDEuMjU0MTUgMjEuNjcwMiAxLjU1ODg0IDIyLjAyOTVDMS44Njc0MyAyMi4zODUgMi4yNDI0MyAyMi42NTg0IDIuNjgzODQgMjIuODQ5OUMzLjEyNTI0IDIzLjA0MTMgMy42MjUyNCAyMy4xMzcgNC4xODM4NCAyMy4xMzdDNC44ODMwNiAyMy4xMzcgNS40ODY1NyAyMy4wMTIgNS45OTQzOCAyMi43NjJDNi41MDIyIDIyLjUwODEgNi44OTg2OCAyMi4xNTg0IDcuMTgzODQgMjEuNzEzMUM3LjQ3MjkgMjEuMjYzOSA3LjYzMzA2IDIwLjc0NjMgNy42NjQzMSAyMC4xNjA0Wk0xMy4zMjQyIDIwLjM4MzFDMTMuMzY3MiAyMC40OTYzIDEzLjM4ODcgMjAuNjI1MiAxMy4zODg3IDIwLjc2OThDMTMuMzg4NyAyMC45NDE3IDEzLjM0NTcgMjEuMDk3OSAxMy4yNTk4IDIxLjIzODVDMTMuMTczOCAyMS4zNzkyIDEzLjA0MSAyMS40OTA1IDEyLjg2MTMgMjEuNTcyNUMxMi42ODU2IDIxLjY1MDYgMTIuNDU1MSAyMS42ODk3IDEyLjE2OTkgMjEuNjg5N0MxMS45MjM4IDIxLjY4OTcgMTEuNzAxMiAyMS42NjYzIDExLjUwMiAyMS42MTk0QzExLjMwMjcgMjEuNTcyNSAxMS4xMzI4IDIxLjQ5NDQgMTAuOTkyMiAyMS4zODVDMTAuODU1NSAyMS4yNzU2IDEwLjc1IDIxLjEzMzEgMTAuNjc1OCAyMC45NTczQzEwLjYwMTYgMjAuNzc3NiAxMC41NjQ1IDIwLjU1ODggMTAuNTY0NSAyMC4zMDFIOC42NTQzMUM4LjY1NDMxIDIwLjc5MzIgOC43NTM5MiAyMS4yMTkgOC45NTMxMyAyMS41Nzg0QzkuMTU2MjYgMjEuOTMzOCA5LjQyNTc5IDIyLjIyNjggOS43NjE3MyAyMi40NTczQzEwLjEwMTYgMjIuNjg3NyAxMC40ODA1IDIyLjg1OTYgMTAuODk4NCAyMi45NzI5QzExLjMxNjQgMjMuMDgyMyAxMS43NDAyIDIzLjEzNyAxMi4xNjk5IDIzLjEzN0MxMi42NDI2IDIzLjEzNyAxMy4wNzAzIDIzLjA4NDIgMTMuNDUzMSAyMi45Nzg4QzEzLjgzNTkgMjIuODczMyAxNC4xNjQxIDIyLjcxOSAxNC40Mzc1IDIyLjUxNTlDMTQuNzE0OSAyMi4zMDg4IDE0LjkyNTggMjIuMDU4OCAxNS4wNzAzIDIxLjc2NTlDMTUuMjE4OCAyMS40NzI5IDE1LjI5MyAyMS4xMzcgMTUuMjkzIDIwLjc1ODFDMTUuMjkzIDIwLjQwMjYgMTUuMjMwNSAyMC4wODQyIDE1LjEwNTUgMTkuODAzQzE0Ljk4NDQgMTkuNTIxNyAxNC44MDI3IDE5LjI2OTggMTQuNTYwNiAxOS4wNDcxQzE0LjMxODQgMTguODI0NSAxNC4wMTk1IDE4LjYyNTIgMTMuNjY0MSAxOC40NDk1QzEzLjMxMjUgMTguMjczNyAxMi45MDgyIDE4LjExMzUgMTIuNDUxMiAxNy45NjlDMTIuMTg5NSAxNy44OTA5IDExLjk1NyAxNy44MDg4IDExLjc1MzkgMTcuNzIyOUMxMS41NTA4IDE3LjYzNyAxMS4zNzg5IDE3LjU0NzEgMTEuMjM4MyAxNy40NTM0QzExLjEwMTYgMTcuMzU1NyAxMC45OTYxIDE3LjI1MjIgMTAuOTIxOSAxNy4xNDI4QzEwLjg1MTYgMTcuMDI5NSAxMC44MTY0IDE2LjkwNDUgMTAuODE2NCAxNi43Njc4QzEwLjgxNjQgMTYuNTk1OSAxMC44NjMzIDE2LjQzNzcgMTAuOTU3IDE2LjI5MzJDMTEuMDU0NyAxNi4xNDg3IDExLjE5NzMgMTYuMDM1NCAxMS4zODQ4IDE1Ljk1MzRDMTEuNTc2MiAxNS44Njc0IDExLjgxMjUgMTUuODI0NSAxMi4wOTM4IDE1LjgyNDVDMTIuMzgyOCAxNS44MjQ1IDEyLjYyMzEgMTUuODc1MiAxMi44MTQ1IDE1Ljk3NjhDMTMuMDA5OCAxNi4wNzg0IDEzLjE1NDMgMTYuMjE5IDEzLjI0ODEgMTYuMzk4N0MxMy4zNDU3IDE2LjU3NDUgMTMuMzk0NSAxNi43Nzc2IDEzLjM5NDUgMTcuMDA4MUgxNS4yOTNDMTUuMjkzIDE2LjQ4NDYgMTUuMTYwMiAxNi4wMjU2IDE0Ljg5NDUgMTUuNjMxMUMxNC42Mjg5IDE1LjIzMjcgMTQuMjU3OCAxNC45MjQxIDEzLjc4MTMgMTQuNzA1M0MxMy4zMDg2IDE0LjQ4MjcgMTIuNzU5OCAxNC4zNzEzIDEyLjEzNDggMTQuMzcxM0MxMS42NjYgMTQuMzcxMyAxMS4yMzYzIDE0LjQyOCAxMC44NDU3IDE0LjU0MTNDMTAuNDU1MSAxNC42NTA2IDEwLjExNTIgMTQuODEwOCA5LjgyNjE4IDE1LjAyMTdDOS41MzcxMiAxNS4yMjg4IDkuMzEyNTEgMTUuNDc4OCA5LjE1MjM1IDE1Ljc3MTdDOC45OTIyIDE2LjA2NDcgOC45MTIxMiAxNi4zOTI4IDguOTEyMTIgMTYuNzU2MUM4LjkxMjEyIDE3LjEzMTEgOC45ODgyOSAxNy40NTkyIDkuMTQwNjMgMTcuNzQwNUM5LjI5Njg4IDE4LjAyMTcgOS41MDk3OCAxOC4yNjc4IDkuNzc5MzEgMTguNDc4OEMxMC4wNDg4IDE4LjY4OTcgMTAuMzU1NSAxOC44NzUyIDEwLjY5OTIgMTkuMDM1NEMxMS4wNDY5IDE5LjE5MTcgMTEuNDEyMSAxOS4zMzIzIDExLjc5NDkgMTkuNDU3M0MxMi4xMzA5IDE5LjU2MjcgMTIuNDAyNCAxOS42NjYzIDEyLjYwOTQgMTkuNzY3OEMxMi44MTY0IDE5Ljg2NTUgMTIuOTc2NiAxOS45NjMxIDEzLjA4OTkgMjAuMDYwOEMxMy4yMDMxIDIwLjE1ODQgMTMuMjgxMyAyMC4yNjU5IDEzLjMyNDIgMjAuMzgzMVpNMTkuNTIzMiAyMy4wMTk4SDE4Ljg2N0wxNS45NjA3IDE0LjQ4ODVIMTguMDgxOEwxOS44OTI1IDIwLjgzOTlMMjEuNzA4OCAxNC40ODg1SDIzLjgzNTdMMjAuOTExOSAyMy4wMTk4SDIwLjI3MzJIMTkuNTIzMloiIGZpbGw9ImJsYWNrIi8+PC9zdmc+");
+  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00LjAwMDAxIDAuOTg5OTlDMy40NDc3MiAwLjk4OTk5IDMuMDAwMDEgMS40Mzc3MSAzLjAwMDAxIDEuOTg5OTlWMTAuOTlDMy4wMDAwMSAxMS41NDIzIDMuNDQ3NzIgMTEuOTkgNC4wMDAwMSAxMS45OUM0LjU1MjI5IDExLjk5IDUuMDAwMDEgMTEuNTQyMyA1LjAwMDAxIDEwLjk5VjIuOTg5OTlIMTRWNi45ODk5OUMxNCA3LjU0MjI3IDE0LjQ0NzcgNy45ODk5OSAxNSA3Ljk4OTk5SDE5VjEwLjk5QzE5IDExLjU0MjMgMTkuNDQ3NyAxMS45OSAyMCAxMS45OUMyMC41NTIzIDExLjk5IDIxIDExLjU0MjMgMjEgMTAuOTlWNi45ODk5OUMyMSA2LjcyNDc3IDIwLjg5NDcgNi40NzA0MiAyMC43MDcxIDYuMjgyODhMMTUuNzA3MSAxLjI4Mjg4QzE1LjUxOTYgMS4wOTUzNSAxNS4yNjUyIDAuOTg5OTkgMTUgMC45ODk5OUg0LjAwMDAxWk0xNy41ODU4IDUuOTg5OTlMMTYgNC40MDQyVjUuOTg5OTlIMTcuNTg1OFpNNy42NjQzMSAyMC4xNjA0SDUuNzY1ODdDNS43NDYzNCAyMC40OTI0IDUuNjc2MDMgMjAuNzY3OCA1LjU1NDkzIDIwLjk4NjZDNS40MzM4NCAyMS4yMDUzIDUuMjYwMDEgMjEuMzY5NCA1LjAzMzQ1IDIxLjQ3ODhDNC44MDY4OCAyMS41ODQyIDQuNTIzNjggMjEuNjM3IDQuMTgzODQgMjEuNjM3QzMuODg2OTYgMjEuNjM3IDMuNjM1MDEgMjEuNTg0MiAzLjQyNzk4IDIxLjQ3ODhDMy4yMjA5NSAyMS4zNzMzIDMuMDUxMDMgMjEuMjEzMSAyLjkxODIxIDIwLjk5ODNDMi43ODkzMSAyMC43ODM0IDIuNjk1NTYgMjAuNTEyIDIuNjM2OTYgMjAuMTgzOEMyLjU3ODM3IDE5Ljg1NTcgMi41NDkwNyAxOS40NjcgMi41NDkwNyAxOS4wMTc4VjE4LjQ4NDZDMi41NDkwNyAxOC4wMzE1IDIuNTgyMjggMTcuNjQwOSAyLjY0ODY4IDE3LjMxMjdDMi43MTUwOSAxNi45ODA3IDIuODE0NyAxNi43MDczIDIuOTQ3NTEgMTYuNDkyNEMzLjA4NDIzIDE2LjI3NzYgMy4yNTQxNSAxNi4xMTk0IDMuNDU3MjggMTYuMDE3OEMzLjY2NDMxIDE1LjkxNjMgMy45MDQ1NCAxNS44NjU1IDQuMTc3OTggMTUuODY1NUM0LjU1Mjk4IDE1Ljg2NTUgNC44NTM3NiAxNS45MjQxIDUuMDgwMzIgMTYuMDQxM0M1LjMwNjg4IDE2LjE1ODQgNS40NzQ4NSAxNi4zMzIzIDUuNTg0MjMgMTYuNTYyN0M1LjY5MzYgMTYuNzg5MyA1Ljc1NjEgMTcuMDY4NiA1Ljc3MTczIDE3LjQwMDZINy42NzYwM0M3LjYyMTM0IDE2LjgxNDcgNy40NTUzMiAxNi4yOTMyIDcuMTc3OTggMTUuODM2MkM2LjkwNDU0IDE1LjM3OTIgNi41MTc4MiAxNS4wMTk4IDYuMDE3ODIgMTQuNzU4MUM1LjUxNzgyIDE0LjQ5NjMgNC45MDQ1NCAxNC4zNjU1IDQuMTc3OTggMTQuMzY1NUMzLjYzODkyIDE0LjM2NTUgMy4xNTA2MyAxNC40NjEyIDIuNzEzMTMgMTQuNjUyNkMyLjI3NTYzIDE0Ljg0NCAxLjkwMDYzIDE1LjExOTQgMS41ODgxMyAxNS40Nzg4QzEuMjc1NjMgMTUuODM4MSAxLjAzNTQgMTYuMjcxNyAwLjg2NzQzMiAxNi43Nzk1QzAuNjk5NDYzIDE3LjI4NzQgMC42MTU0NzkgMTcuODU5NiAwLjYxNTQ3OSAxOC40OTYzVjE5LjAxNzhDMC42MTU0NzkgMTkuNjU0NSAwLjY5NTU1NyAyMC4yMjY4IDAuODU1NzEzIDIwLjczNDZDMS4wMTk3OCAyMS4yMzg1IDEuMjU0MTUgMjEuNjcwMiAxLjU1ODg0IDIyLjAyOTVDMS44Njc0MyAyMi4zODUgMi4yNDI0MyAyMi42NTg0IDIuNjgzODQgMjIuODQ5OUMzLjEyNTI0IDIzLjA0MTMgMy42MjUyNCAyMy4xMzcgNC4xODM4NCAyMy4xMzdDNC44ODMwNiAyMy4xMzcgNS40ODY1NyAyMy4wMTIgNS45OTQzOCAyMi43NjJDNi41MDIyIDIyLjUwODEgNi44OTg2OCAyMi4xNTg0IDcuMTgzODQgMjEuNzEzMUM3LjQ3MjkgMjEuMjYzOSA3LjYzMzA2IDIwLjc0NjMgNy42NjQzMSAyMC4xNjA0Wk0xMy4zMjQyIDIwLjM4MzFDMTMuMzY3MiAyMC40OTYzIDEzLjM4ODcgMjAuNjI1MiAxMy4zODg3IDIwLjc2OThDMTMuMzg4NyAyMC45NDE3IDEzLjM0NTcgMjEuMDk3OSAxMy4yNTk4IDIxLjIzODVDMTMuMTczOCAyMS4zNzkyIDEzLjA0MSAyMS40OTA1IDEyLjg2MTMgMjEuNTcyNUMxMi42ODU2IDIxLjY1MDYgMTIuNDU1MSAyMS42ODk3IDEyLjE2OTkgMjEuNjg5N0MxMS45MjM4IDIxLjY4OTcgMTEuNzAxMiAyMS42NjYzIDExLjUwMiAyMS42MTk0QzExLjMwMjcgMjEuNTcyNSAxMS4xMzI4IDIxLjQ5NDQgMTAuOTkyMiAyMS4zODVDMTAuODU1NSAyMS4yNzU2IDEwLjc1IDIxLjEzMzEgMTAuNjc1OCAyMC45NTczQzEwLjYwMTYgMjAuNzc3NiAxMC41NjQ1IDIwLjU1ODggMTAuNTY0NSAyMC4zMDFIOC42NTQzMUM4LjY1NDMxIDIwLjc5MzIgOC43NTM5MiAyMS4yMTkgOC45NTMxMyAyMS41Nzg0QzkuMTU2MjYgMjEuOTMzOCA5LjQyNTc5IDIyLjIyNjggOS43NjE3MyAyMi40NTczQzEwLjEwMTYgMjIuNjg3NyAxMC40ODA1IDIyLjg1OTYgMTAuODk4NCAyMi45NzI5QzExLjMxNjQgMjMuMDgyMyAxMS43NDAyIDIzLjEzNyAxMi4xNjk5IDIzLjEzN0MxMi42NDI2IDIzLjEzNyAxMy4wNzAzIDIzLjA4NDIgMTMuNDUzMSAyMi45Nzg4QzEzLjgzNTkgMjIuODczMyAxNC4xNjQxIDIyLjcxOSAxNC40Mzc1IDIyLjUxNTlDMTQuNzE0OSAyMi4zMDg4IDE0LjkyNTggMjIuMDU4OCAxNS4wNzAzIDIxLjc2NTlDMTUuMjE4OCAyMS40NzI5IDE1LjI5MyAyMS4xMzcgMTUuMjkzIDIwLjc1ODFDMTUuMjkzIDIwLjQwMjYgMTUuMjMwNSAyMC4wODQyIDE1LjEwNTUgMTkuODAzQzE0Ljk4NDQgMTkuNTIxNyAxNC44MDI3IDE5LjI2OTggMTQuNTYwNiAxOS4wNDcxQzE0LjMxODQgMTguODI0NSAxNC4wMTk1IDE4LjYyNTIgMTMuNjY0MSAxOC40NDk1QzEzLjMxMjUgMTguMjczNyAxMi45MDgyIDE4LjExMzUgMTIuNDUxMiAxNy45NjlDMTIuMTg5NSAxNy44OTA5IDExLjk1NyAxNy44MDg4IDExLjc1MzkgMTcuNzIyOUMxMS41NTA4IDE3LjYzNyAxMS4zNzg5IDE3LjU0NzEgMTEuMjM4MyAxNy40NTM0QzExLjEwMTYgMTcuMzU1NyAxMC45OTYxIDE3LjI1MjIgMTAuOTIxOSAxNy4xNDI4QzEwLjg1MTYgMTcuMDI5NSAxMC44MTY0IDE2LjkwNDUgMTAuODE2NCAxNi43Njc4QzEwLjgxNjQgMTYuNTk1OSAxMC44NjMzIDE2LjQzNzcgMTAuOTU3IDE2LjI5MzJDMTEuMDU0NyAxNi4xNDg3IDExLjE5NzMgMTYuMDM1NCAxMS4zODQ4IDE1Ljk1MzRDMTEuNTc2MiAxNS44Njc0IDExLjgxMjUgMTUuODI0NSAxMi4wOTM4IDE1LjgyNDVDMTIuMzgyOCAxNS44MjQ1IDEyLjYyMzEgMTUuODc1MiAxMi44MTQ1IDE1Ljk3NjhDMTMuMDA5OCAxNi4wNzg0IDEzLjE1NDMgMTYuMjE5IDEzLjI0ODEgMTYuMzk4N0MxMy4zNDU3IDE2LjU3NDUgMTMuMzk0NSAxNi43Nzc2IDEzLjM5NDUgMTcuMDA4MUgxNS4yOTNDMTUuMjkzIDE2LjQ4NDYgMTUuMTYwMiAxNi4wMjU2IDE0Ljg5NDUgMTUuNjMxMUMxNC42Mjg5IDE1LjIzMjcgMTQuMjU3OCAxNC45MjQxIDEzLjc4MTMgMTQuNzA1M0MxMy4zMDg2IDE0LjQ4MjcgMTIuNzU5OCAxNC4zNzEzIDEyLjEzNDggMTQuMzcxM0MxMS42NjYgMTQuMzcxMyAxMS4yMzYzIDE0LjQyOCAxMC44NDU3IDE0LjU0MTNDMTAuNDU1MSAxNC42NTA2IDEwLjExNTIgMTQuODEwOCA5LjgyNjE4IDE1LjAyMTdDOS41MzcxMiAxNS4yMjg4IDkuMzEyNTEgMTUuNDc4OCA5LjE1MjM1IDE1Ljc3MTdDOC45OTIyIDE2LjA2NDcgOC45MTIxMiAxNi4zOTI4IDguOTEyMTIgMTYuNzU2MUM4LjkxMjEyIDE3LjEzMTEgOC45ODgyOSAxNy40NTkyIDkuMTQwNjMgMTcuNzQwNUM5LjI5Njg4IDE4LjAyMTcgOS41MDk3OCAxOC4yNjc4IDkuNzc5MzEgMTguNDc4OEMxMC4wNDg4IDE4LjY4OTcgMTAuMzU1NSAxOC44NzUyIDEwLjY5OTIgMTkuMDM1NEMxMS4wNDY5IDE5LjE5MTcgMTEuNDEyMSAxOS4zMzIzIDExLjc5NDkgMTkuNDU3M0MxMi4xMzA5IDE5LjU2MjcgMTIuNDAyNCAxOS42NjYzIDEyLjYwOTQgMTkuNzY3OEMxMi44MTY0IDE5Ljg2NTUgMTIuOTc2NiAxOS45NjMxIDEzLjA4OTkgMjAuMDYwOEMxMy4yMDMxIDIwLjE1ODQgMTMuMjgxMyAyMC4yNjU5IDEzLjMyNDIgMjAuMzgzMVpNMTkuNTIzMiAyMy4wMTk4SDE4Ljg2N0wxNS45NjA3IDE0LjQ4ODVIMTguMDgxOEwxOS44OTI1IDIwLjgzOTlMMjEuNzA4OCAxNC40ODg1SDIzLjgzNTdMMjAuOTExOSAyMy4wMTk4SDIwLjI3MzJIMTkuNTIzMloiIGZpbGw9ImJsYWNrIi8+PC9zdmc+");
 }
 
 .print-txt-button{
   mask-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00LjUwMDAxIDFDMy45NDc3MiAxIDMuNTAwMDEgMS40NDc3MiAzLjUwMDAxIDJWMTFDMy41MDAwMSAxMS41NTIzIDMuOTQ3NzIgMTIgNC41MDAwMSAxMkM1LjA1MjI5IDEyIDUuNTAwMDEgMTEuNTUyMyA1LjUwMDAxIDExVjNIMTQuNVY3QzE0LjUgNy41NTIyOCAxNC45NDc3IDggMTUuNSA4SDE5LjVWMTFDMTkuNSAxMS41NTIzIDE5Ljk0NzcgMTIgMjAuNSAxMkMyMS4wNTIzIDEyIDIxLjUgMTEuNTUyMyAyMS41IDExVjdDMjEuNSA2LjczNDc4IDIxLjM5NDcgNi40ODA0MyAyMS4yMDcxIDYuMjkyODlMMTYuMjA3MSAxLjI5Mjg5QzE2LjAxOTYgMS4xMDUzNiAxNS43NjUyIDEgMTUuNSAxSDQuNTAwMDFaTTE4LjA4NTggNkwxNi41IDQuNDE0MjFWNkgxOC4wODU4WiIgZmlsbD0iYmxhY2siLz48cGF0aCBkPSJNNS4xMDM3NiAyMy4yNDUyVjE2LjE5NjRINy42OTk0NlYxNC43MTM5SDAuNjU2NDk0VjE2LjE5NjRIMy4xOTk0NlYyMy4yNDUySDUuMTAzNzZaIiBmaWxsPSJibGFjayIvPjxwYXRoIGQ9Ik0xMiAxNy42MjAyTDEwLjUgMTQuNzEzOUg4LjMyMDMyTDEwLjc1MiAxOC45NDQ0TDguMjU1ODcgMjMuMjQ1MkgxMC40NTlMMTIgMjAuMjg2MkwxMy41NDY5IDIzLjI0NTJIMTUuNzQ0MkwxMy4yNTM5IDE4Ljk0NDRMMTUuNjc5NyAxNC43MTM5SDEzLjVMMTIgMTcuNjIwMloiIGZpbGw9ImJsYWNrIi8+PHBhdGggZD0iTTIwLjczNjEgMjMuMjQ1MlYxNi4xOTY0SDIzLjMzMThWMTQuNzEzOUgxNi4yODg4VjE2LjE5NjRIMTguODMxOFYyMy4yNDUySDIwLjczNjFaIiBmaWxsPSJibGFjayIvPjwvc3ZnPg==");
+  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00LjUwMDAxIDFDMy45NDc3MiAxIDMuNTAwMDEgMS40NDc3MiAzLjUwMDAxIDJWMTFDMy41MDAwMSAxMS41NTIzIDMuOTQ3NzIgMTIgNC41MDAwMSAxMkM1LjA1MjI5IDEyIDUuNTAwMDEgMTEuNTUyMyA1LjUwMDAxIDExVjNIMTQuNVY3QzE0LjUgNy41NTIyOCAxNC45NDc3IDggMTUuNSA4SDE5LjVWMTFDMTkuNSAxMS41NTIzIDE5Ljk0NzcgMTIgMjAuNSAxMkMyMS4wNTIzIDEyIDIxLjUgMTEuNTUyMyAyMS41IDExVjdDMjEuNSA2LjczNDc4IDIxLjM5NDcgNi40ODA0MyAyMS4yMDcxIDYuMjkyODlMMTYuMjA3MSAxLjI5Mjg5QzE2LjAxOTYgMS4xMDUzNiAxNS43NjUyIDEgMTUuNSAxSDQuNTAwMDFaTTE4LjA4NTggNkwxNi41IDQuNDE0MjFWNkgxOC4wODU4WiIgZmlsbD0iYmxhY2siLz48cGF0aCBkPSJNNS4xMDM3NiAyMy4yNDUyVjE2LjE5NjRINy42OTk0NlYxNC43MTM5SDAuNjU2NDk0VjE2LjE5NjRIMy4xOTk0NlYyMy4yNDUySDUuMTAzNzZaIiBmaWxsPSJibGFjayIvPjxwYXRoIGQ9Ik0xMiAxNy42MjAyTDEwLjUgMTQuNzEzOUg4LjMyMDMyTDEwLjc1MiAxOC45NDQ0TDguMjU1ODcgMjMuMjQ1MkgxMC40NTlMMTIgMjAuMjg2MkwxMy41NDY5IDIzLjI0NTJIMTUuNzQ0MkwxMy4yNTM5IDE4Ljk0NDRMMTUuNjc5NyAxNC43MTM5SDEzLjVMMTIgMTcuNjIwMloiIGZpbGw9ImJsYWNrIi8+PHBhdGggZD0iTTIwLjczNjEgMjMuMjQ1MlYxNi4xOTY0SDIzLjMzMThWMTQuNzEzOUgxNi4yODg4VjE2LjE5NjRIMTguODMxOFYyMy4yNDUySDIwLjczNjFaIiBmaWxsPSJibGFjayIvPjwvc3ZnPg==");
 }
 
 .indicator-elem{

package/src/report/toolbar/dropdown/ToolbarOverflowPanel.scss

@@ -44,6 +44,7 @@
   width: 100%;
   height: 100%;
   mask-size: 100%;
+  -webkit-mask-size: 100%;
   position: absolute;
   cursor: pointer;
 }

package/src/research/componentHierarchy/ComponentHierarchyLoader.js

@@ -4,8 +4,6 @@ Ext.define('Coon.research.componentHierarchy.ComponentHierarchyLoader', {
 
     cmpCache: new Map(),
 
-    maxLevel: 6,
-
     loadReport(id) {
         return Coon.util.promisifyCmd('command.LoadDynamicReportCommand', id, true);
     },
@@ -22,11 +20,16 @@ Ext.define('Coon.research.componentHierarchy.ComponentHierarchyLoader', {
             });
     },
 
-    getReportIds(config) {
+    getReportIds(config, cid) {
         const acc = [];
         const filterReports = (data) => {
             if (data.xtype === 'ReportPanel' && (data.reportId || data.reportID)) {
-                acc.push({name: data.title || data.xtype, id: data.reportId || data.reportID});
+                acc.push({
+                    source: `UiCP:${cid}`,
+                    name: data.title || data.xtype,
+                    cid: data.reportId || data.reportID,
+                    xtype: 'ReportPanel',
+                });
                 return;
             }
             for (const [k, v] of Object.entries(data)) {
@@ -65,94 +68,89 @@ Ext.define('Coon.research.componentHierarchy.ComponentHierarchyLoader', {
         }
     },
 
-    async reportLoader(id, name, level) {
-        console.log('reportLoader', level, id, name);
-        const cacheId = `R_${id}`;
+    async reportLoader(cid, name) {
+        Coon.log.debug('reportLoader', cid, name);
+        const cacheId = `R_${cid}`;
         if (this.cmpCache.has(cacheId)) {
             const node = this.cmpCache.get(cacheId);
             name && (node.name = name);
-            node.children = false;
-            console.log('CACHED: reportLoader', cacheId);
-            return node;
+            node.name = node.name || cacheId;
+            const cacheState = '<span style="color:blue">[cached]</span>';
+            node.name = !node.name.includes(cacheState) && `${node.name}${cacheState}`,
+            Coon.log.debug('CACHED: reportLoader', cacheId);
+            return Object.assign({}, node);
         }
-        const config = await this.loadReport(id);
+        const config = await this.loadReport(cid);
         const node = {
-            // config,
-            name: name || config.reportDescription,
-            id,
+            name: name || config.reportDescription || 'noname!',
+            cid,
+            cacheId,
             xtype: 'ReportPanel',
+            leaf: true,
         };
-        if (level >= this.maxLevel) {
-            return node;
-        }
         if (!Ext.isObject(config) || !Array.isArray(config.plugins)) {
             return node;
         }
         const cpRefIds = config.plugins.reduce((acc, {uiElement: plugin}) => {
             if (plugin.xtype === 'OpenCustomPanelButtonPlugin') {
                 const ocpbConfig = plugin.propertyData = Ext.decode(plugin.propertyData, true);
-                if (ocpbConfig.xtypeSelector === 'UI_LIST') {
-                    acc.push(ocpbConfig.UIElement);
+                if (ocpbConfig.xtypeSelector === 'UI_LIST' && ocpbConfig.UIElement) {
+                    acc.push({
+                        source: 'OpenCustomPanelButtonPlugin',
+                        plugin,
+                        xtype: 'UiCustomPanel',
+                        cid: ocpbConfig.UIElement,
+                        name: ocpbConfig.buttonText || '---',
+                    });
                 }
             }
             return acc;
         }, []);
-        node.cpRefIds = cpRefIds;
-        if (cpRefIds.length) {
-            node.children = await this.promisesExecuter(cpRefIds.map((id) => this.customPanelLoader(id, false, level + 1), this));
-        }
+        node.refIds = cpRefIds;
+        node.leaf = node.refIds.length === 0;
         this.cmpCache.set(cacheId, node);
-        return node;
+        return Object.assign({}, node);
     },
 
-    async customPanelLoader(id, name, level) {
-        console.log('customPanelLoader', level, id, name);
-        const cacheId = `CP_${id}`;
+    async customPanelLoader(cid, name) {
+        Coon.log.debug('customPanelLoader', cid, name);
+        const cacheId = `CP_${cid}`;
         if (this.cmpCache.has(cacheId)) {
             const node = this.cmpCache.get(cacheId);
             name && (node.name = name);
-            node.name = `Loopback: ${node.name}`,
-            node.children = false;
-            console.log('CACHED: customPanelLoader', cacheId);
-            return node;
+            node.name = node.name || cacheId;
+            const cacheState = '<span style="color:blue">[cached]</span>';
+            node.name = !node.name.includes(cacheState) && `${node.name}${cacheState}`,
+            Coon.log.debug('CACHED: customPanelLoader', cacheId);
+            return Object.assign({}, node);
         }
-        const config = await this.loadUiElement(id);
+        const config = await this.loadUiElement(cid);
         if (!config) {
             return;
         }
         const node = {
             xtype: 'UiCustomPanel',
-            name: name || config.description,
-            id,
+            name: name || config.description || 'noname',
+            cid,
+            cacheId,
+            leaf: true,
         };
-        if (level >= this.maxLevel) {
-            return node;
-        }
-        const usedReports = this.getReportIds(config.properties);
-        if (usedReports.length) {
-            node.children = await this.promisesExecuter(
-                usedReports.map(({name, id}) => this.reportLoader(id, name, level + 1), this)
-            );
-        }
+        const usedReports = this.getReportIds(config.properties, cid);
         const cpRefIds = (config.properties.plugins || []).reduce((acc, plugin) => {
-            if (plugin.ptype === 'OpenPanelPlugin') {
+            if (plugin.ptype === 'OpenPanelPlugin' && plugin.uiElementCd) {
                 acc.push({
-                    name: plugin.handlerName,
-                    id: plugin.uiElementCd,
+                    source: 'OpenPanelPlugin',
+                    plugin,
+                    xtype: 'UiCustomPanel',
+                    name: plugin.handlerName || '---',
+                    cid: plugin.uiElementCd,
                 });
             }
             return acc;
         }, []);
-        node.cpRefIds = cpRefIds;
-        if (cpRefIds.length) {
-            const cpNodes = await this.promisesExecuter(
-                cpRefIds.map(({name, id}) => this.customPanelLoader(id, name, level + 1), this)
-            );
-            node.children = Array.isArray(node.children) && node.children.length ?
-                node.children.concat(cpNodes) :
-                cpNodes;
-        }
+        node.refIds = cpRefIds.concat(usedReports);
+        node.leaf = node.refIds.length === 0;
         this.cmpCache.set(cacheId, node);
-        return node;
+        return Object.assign({}, node);
     },
 });

package/src/research/componentHierarchy/ComponentOptionsView.js

@@ -0,0 +1,39 @@
+Ext.define('Coon.research.componentHierarchy.ComponentOptionsView', {
+    extend: 'Ext.tab.Panel',
+
+    requires: [
+        'Coon.research.componentHierarchy.ComponentOptionsViewController'
+    ],
+
+    controller: 'ComponentOptionsViewController',
+
+    xtype: 'ComponentOptionsView',
+
+    layout: 'fit',
+    items: [
+        {
+            title: 'опции',
+            xtype: 'panel',
+            disabled: true,
+            bind: {
+                disabled: '{!selectedComponent}',
+            },
+            layout: 'form',
+            items: [
+                {
+                    xtype: 'button',
+                    text: 'открыть в редакторе',
+                    itemId: 'openInEditorBtn',
+                }
+            ],
+        },
+        {
+            title: 'debugInfo',
+            xtype: 'UiAceEditor',
+            scrollable: 'y',
+            layout: 'fit',
+            reference: 'preview',
+        }
+    ],
+
+});

package/src/research/componentHierarchy/ComponentOptionsViewController.js

@@ -0,0 +1,56 @@
+Ext.define('Coon.research.componentHierarchy.ComponentOptionsViewController', {
+    extend: 'Ext.app.ViewController',
+    alias: 'controller.ComponentOptionsViewController',
+
+    control: {
+        'button#openInEditorBtn': {
+            click: 'openInEditor',
+        },
+    },
+
+    init() {
+        this.vm = this.getViewModel();
+        this.vm.bind('{ui}', this.setDebugInfo, this);
+        // this.vm.bind('{selectedComponent}', (v) =>
+        //     console.log(`selectedComponent: ${v && v.get('id')}`, {v, data: v && v.getData()})
+        // , this);
+    },
+
+    setDebugInfo(ui) {
+        const menuItem = this.vm.get('menuItem');
+        const preview = this.lookup('preview');
+        if (!ui) {
+            preview.setValue('');
+        } else {
+            preview.loadJSON5({ui, menuItem});
+        }
+    },
+
+    openInEditor() {
+        const component = this.vm.get('selectedComponent');
+        const cid = component.get('cid');
+        const xtype = component.get('xtype');
+        if (xtype === 'ReportPanel' && cid) {
+            const view = Ext.create({
+                xtype: 'WindowWrap',
+                maximized: true,
+                autoShow: true,
+                items: [
+                    {xtype: 'ReportFormEditPanel'}
+                ],
+            });
+            view.down('ReportFormEditPanel').getController().doInit(cid);
+        }
+        if (xtype === 'UiCustomPanel' && cid) {
+            const view = Ext.create({
+                xtype: 'WindowWrap',
+                maximized: true,
+                autoShow: true,
+                items: [
+                    {xtype: 'UiCustomPanelEditor'}
+                ],
+            });
+            view.down('UiCustomPanelEditor').getController().doInit(cid);
+        }
+    },
+});

package/src/research/componentHierarchy/ComponentTreeView.js

@@ -4,21 +4,28 @@ Ext.define('Coon.research.componentHierarchy.ComponentTreeView', {
 
     requires: [
         'Coon.research.componentHierarchy.ComponentTreeViewController',
-        'Coon.research.componentHierarchy.ComponentHierarchyLoader'
+        'Coon.research.componentHierarchy.ComponentHierarchyLoader',
+        'Coon.research.componentHierarchy.ComponentOptionsView'
     ],
 
     controller: 'ComponentTreeViewController',
 
+    viewModel: {},
+
     layout: {
-        type: 'hbox',
-        align: 'stretch',
+        type: 'border',
+    },
+    defaults: {
+        menuDisabled: true,
     },
-
     items: [
         {
             xtype: 'treepanel',
+            region: 'center',
+            // flex: 3,
+            layout: 'fit',
             reference: 'componentTreePanel',
-            flex: 1,
+            // flex: 1,
             store: {
                 type: 'tree',
                 defaultRootText: 'name',
@@ -26,22 +33,29 @@ Ext.define('Coon.research.componentHierarchy.ComponentTreeView', {
             columns: [
                 {xtype: 'treecolumn', dataIndex: 'name', text: 'name', flex: 1},
                 {dataIndex: 'xtype', text: 'xtype', minWidth: 200},
+                {dataIndex: 'source', text: 'src', minWidth: 200},
                 {
-                    dataIndex: 'componentId',
+                    dataIndex: 'cid',
                     text: 'componentId',
                     minWidth: 200,
                     renderer(v, meta, rec) {
-                        return v || rec.get('id');
+                        return v || rec.get('cid');
                     },
                 }
             ],
+            bind: {
+                selection: '{selectedComponent}',
+            },
         },
         {
-            xtype: 'UiAceEditor',
-            flex: 1,
-            scrollable: 'y',
-            layout: 'fit',
-            reference: 'preview',
+            xtype: 'ComponentOptionsView',
+            region: 'east',
+            split: true,
+            width: 400,
+            title: 'Opts',
+            collapsible: true,
+            collapseMode: 'header',
+            // collapsed: true,
         }
     ],
 });

package/src/research/componentHierarchy/ComponentTreeViewController.js

@@ -4,9 +4,14 @@ Ext.define('Coon.research.componentHierarchy.ComponentTreeViewController', {
     alias: 'controller.ComponentTreeViewController',
 
     init() {
+        this.vm = this.getViewModel();
         Coon.util.bindMethods(['loadMenuItem'], this, this.getView(), this);
+        this.lookup('componentTreePanel').on('itemdblclick', this.loadChildren, this);
+        this.lookup('componentTreePanel').on('itemexpand', this.expandNode, this);
     },
 
+    parser: Ext.create({xtype: 'ComponentHierarchyLoader'}),
+
     loadUiElement(id) {
         return Coon.util.promisifyCmd('command.GetUIElementCommand', id, true)
             .then((data) => {
@@ -19,83 +24,84 @@ Ext.define('Coon.research.componentHierarchy.ComponentTreeViewController', {
             });
     },
 
-    // loadReport(id) {
-    //     return Coon.util.promisifyCmd('command.LoadDynamicReportCommand', id, true);
-    // },
+    expandNode(record) {
+        this.loadChildren(this.lookup('componentTreePanel'), record);
+    },
 
-    // async parseCP(node) {
-    //     const cpParser = Ext.create('Coon.aka.CustomPanelParser');
-    //     const children = await Promise.all(cpParser.parse(node.properties));
-    //     const usedReports = node.properties.usedReports;
-    //     if (Array.isArray(usedReports) && usedReports.length) {
-    //         for (const {title, id} of usedReports) {
-    //             const child = {properties: {reportId: id}, componentName: title, xtype: 'ReportPanel', componentId: id};
-    //             await this.parseReport(child);
-    //             children.push(child);
-    //         }
-    //     }
-    //     return children;
-    // },
+    async loadChildren(view, record) {
+        if (!Array.isArray(record.get('refIds')) || !record.get('refIds').length || record._isLoaded || record.leaf) {
+            return;
+        }
+        view.mask('load children...');
+        try {
+            for (const child of record.get('refIds')) {
+                let childNode;
+                if (child.xtype === 'UiCustomPanel') {
+                    childNode = await this.parser.customPanelLoader(child.cid, child.name);
+                }
+                if (child.xtype === 'ReportPanel') {
+                    childNode = await this.parser.reportLoader(child.cid, child.name);
+                }
+                if (childNode) {
+                    childNode.source = child.source;
+                    childNode.plugin = child.plugin;
+                    record.appendChild(childNode);
+                }
+            }
+            record.expand();
+            record._isLoaded = true;
+        } catch (ex) {
+            console.error(ex, {record});
+            Ext.Msg.alert('ошибка', ex.toString());
+        }
+        if (view.destroyed) {
+            return;
+        }
+        view.unmask();
+    },
 
     makeTreeData(ui) {
-        return {
-            name: ui.description || ui.name,
-            id: 'root',
-            componentId: ui.componentId || ui.id,
-            xtype: ui.xtype,
-            children: ui.children,
-            // children: ui.children && ui.children.map((el) => {
-            //     return {
-            //         name: el.name || el.componentName,
-            //         componentId: el.id || el.componentId,
-            //         xtype: el.xtype,
-            //         children: el.children,
-            //     };
-            // }),
-        };
+        ui.id = 'root';
+        ui.name = ui.description || ui.name;
+        ui.cid = ui.cid || ui.componentId;
+        return ui;
     },
 
-    // async parseReport(node) {
-    //     node.componentId = node.properties.reportId || node.properties.reportID;
-    //     if (!node.componentId) {
-    //         node.name = `${node.name}: reportId not found!`;
-    //         return;
-    //     }
-    //     node.children = await this.loadReport(node.componentId)
-    //         .then((config) => {
-    //             const reportParser = Ext.create('Coon.aka.ReportParser');
-    //             return Promise.all(reportParser.parse(config));
-    //         });
-    // },
-
     async loadMenuItem(menuItem) {
-        const parser = Ext.create({xtype: 'ComponentHierarchyLoader'});
         this.getView().mask();
-        const preview = this.lookup('preview');
-        preview.setValue('');
+        this.vm.set('ui', false);
+        this.vm.set('menuItem', menuItem);
         try {
             const ui = await this.loadUiElement(menuItem.get('UI_ELEMENT_CD')).catch((error) => ({error}));
+            ui.description = `${menuItem.get('WORKSPACE_DESCR')}/${menuItem.get('MENU_ENTRY_DESCR')}`;
             if (!ui.properties) {
                 ui.parsingError = 'cant parse';
                 console.error('invalid ui', ui);
-                preview.setValue(ui);
+                this.vm.set('ui', ui);
                 return;
             }
-            ui.description = 'uiElement';
             if (['ReportPanel', 'DynamicReportForm'].includes(ui.xtype)) {
                 const id = ui.properties.reportId || ui.properties.reportID;
-                ui.children = await parser.reportLoader(id, false, 1).then((node) => ([node]));
+                ui.children = await this.parser.reportLoader(id)
+                    .then((node) => {
+                        node.source = 'menuUiElement';
+                        return [node];
+                    });
             }
             if (['UiCustomPanel'].includes(ui.xtype)) {
-                // ui.children = await this.parseCP(ui);
+                ui.children = await this.parser.customPanelLoader(ui.id)
+                    .then((node) => {
+                        node.source = 'menuUiElement';
+                        return [node];
+                    });
             }
-            preview.loadJSON5({ui, menuItem});
+            this.vm.set('ui', ui);
             this.lookup('componentTreePanel').setRootNode(this.makeTreeData(ui));
             this.lookup('componentTreePanel').expandAll();
             this.getView().unmask();
         } catch (ex) {
             console.error(ex);
-            preview.loadJSON5(ex);
+            this.vm.set('ui', ex);
             this.getView().unmask();
         }
     },

package/src/version.js

@@ -1,4 +1,4 @@
 Ext.define('Coon.version', {
     singleton: true,
-    number: '3.0.8',
+    number: '3.0.9',
 });