@yoobic/yobi 8.3.0-36 → 8.3.0-39

package/dist/collection/components/form/slides-media/slides-media.js

@@ -640,6 +640,7 @@ export class YooSlidesMediaComponent {
     return;
   }
   renderSlideContent(item, index) {
+    const isTypeVideo = isVideo(this.getPhotoSrc(item));
     if (this.displayType || item.type === 'audio') {
       return this.renderSlideContentByDisplayType(item, index);
     }
@@ -647,7 +648,7 @@ export class YooSlidesMediaComponent {
       return [
         item.type !== 'photo' && this.renderActionButtons(item),
         h("div", { class: "content-container" },
-          item.type === 'video' ? this.renderVideoPlayer(item, index) : this.renderPhotoEditor(item, index),
+          item.type === 'video' || isTypeVideo ? this.renderVideoPlayer(item, index) : this.renderPhotoEditor(item, index),
           this.showBottomContainer && this.renderBottomContainer(item, index)),
         (item.user || item.missiondescription || item.fieldTitle || item.tags) && h("div", { class: "toolbar-shadow-portrait" })
       ];
@@ -905,7 +906,7 @@ export class YooSlidesMediaComponent {
       "mutable": false,
       "complexType": {
         "original": "CardType",
-        "resolved": "\"calendar\" | \"card-calendar\" | \"card-battle\" | \"card-battle-result\" | \"card-campaign\" | \"card-cell\" | \"card-cell-color\" | \"card-cell-image\" | \"card-chat\" | \"card-course\" | \"card-course-info\" | \"card-course-row\" | \"card-course-row-compact\" | \"card-default\" | \"card-feed\" | \"card-feed-row\" | \"card-file\" | \"card-grid\" | \"card-image\" | \"card-inbox\" | \"card-inbox-ongoing\" | \"card-incentive\" | \"card-incentive-rank\" | \"card-kanban\" | \"card-list\" | \"card-list-color\" | \"card-location\" | \"card-map\" | \"card-media\" | \"card-menu\" | \"card-notification\" | \"card-plan\" | \"card-recommendation\" | \"card-sticky\" | \"card-tag\" | \"card-tag-single\" | \"card-template\" | \"kanban\" | \"tree\"",
+        "resolved": "\"calendar\" | \"card-calendar\" | \"card-battle\" | \"card-battle-result\" | \"card-campaign\" | \"card-cell\" | \"card-cell-color\" | \"card-cell-image\" | \"card-chat\" | \"card-course\" | \"card-course-info\" | \"card-course-row\" | \"card-course-row-compact\" | \"card-default\" | \"card-feed\" | \"card-feed-row\" | \"card-file\" | \"card-grid\" | \"card-image\" | \"card-inbox\" | \"card-inbox-ongoing\" | \"card-incentive\" | \"card-incentive-rank\" | \"card-kanban\" | \"card-list\" | \"card-list-color\" | \"card-list-simple\" | \"card-location\" | \"card-map\" | \"card-media\" | \"card-menu\" | \"card-notification\" | \"card-plan\" | \"card-recommendation\" | \"card-sticky\" | \"card-tag\" | \"card-tag-single\" | \"card-template\" | \"kanban\" | \"tree\"",
         "references": {
           "CardType": {
             "location": "import",

package/dist/collection/components/form-creator/form-creator-block-expandable/form-creator-block-expandable.css

@@ -348,8 +348,9 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host .outer-container .parent-block-container.notification {
   border-color: var(--warning, #ed6e33);
 }
-:host .outer-container .parent-block-condition.no-scoring,
-:host .outer-container .parent-block-container.no-scoring {
+:host .outer-container .parent-block-condition.no-scoring, :host .outer-container .parent-block-condition.waitfor,
+:host .outer-container .parent-block-container.no-scoring,
+:host .outer-container .parent-block-container.waitfor {
   border-color: var(--text-color, #807f83);
 }
 :host .outer-container .parent-block-condition.actioncategory, :host .outer-container .parent-block-condition.logic,
@@ -357,9 +358,8 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host .outer-container .parent-block-container.logic {
   border-color: var(--anthracite, #1a1a1a);
 }
-:host .outer-container .parent-block-condition.dateandtime, :host .outer-container .parent-block-condition.waitfor,
-:host .outer-container .parent-block-container.dateandtime,
-:host .outer-container .parent-block-container.waitfor {
+:host .outer-container .parent-block-condition.dateandtime,
+:host .outer-container .parent-block-container.dateandtime {
   border-color: var(--dark, #000000);
 }
 :host .outer-container .parent-block-condition.catalogandbarcode, :host .outer-container .parent-block-condition.notifications,
@@ -421,8 +421,9 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host .outer-container .parent-block-container .header .form-icon.notification {
   background-color: var(--warning, #ed6e33);
 }
-:host .outer-container .parent-block-condition .header .form-icon.no-scoring,
-:host .outer-container .parent-block-container .header .form-icon.no-scoring {
+:host .outer-container .parent-block-condition .header .form-icon.no-scoring, :host .outer-container .parent-block-condition .header .form-icon.waitfor,
+:host .outer-container .parent-block-container .header .form-icon.no-scoring,
+:host .outer-container .parent-block-container .header .form-icon.waitfor {
   background-color: var(--text-color, #807f83);
 }
 :host .outer-container .parent-block-condition .header .form-icon.actioncategory, :host .outer-container .parent-block-condition .header .form-icon.logic,
@@ -430,9 +431,8 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host .outer-container .parent-block-container .header .form-icon.logic {
   background-color: var(--anthracite, #1a1a1a);
 }
-:host .outer-container .parent-block-condition .header .form-icon.dateandtime, :host .outer-container .parent-block-condition .header .form-icon.waitfor,
-:host .outer-container .parent-block-container .header .form-icon.dateandtime,
-:host .outer-container .parent-block-container .header .form-icon.waitfor {
+:host .outer-container .parent-block-condition .header .form-icon.dateandtime,
+:host .outer-container .parent-block-container .header .form-icon.dateandtime {
   background-color: var(--dark, #000000);
 }
 :host .outer-container .parent-block-condition .header .form-icon.catalogandbarcode, :host .outer-container .parent-block-condition .header .form-icon.notifications,
@@ -649,13 +649,13 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host .outer-container .child-block .child-block-container .child-block-marker.contactdetail, :host .outer-container .child-block .child-block-container .child-block-marker.engage, :host .outer-container .child-block .child-block-container .child-block-marker.information, :host .outer-container .child-block .child-block-container .child-block-marker.nativeactions, :host .outer-container .child-block .child-block-container .child-block-marker.entity, :host .outer-container .child-block .child-block-container .child-block-marker.notification {
   background-color: var(--warning, #ed6e33);
 }
-:host .outer-container .child-block .child-block-container .child-block-marker.no-scoring {
+:host .outer-container .child-block .child-block-container .child-block-marker.no-scoring, :host .outer-container .child-block .child-block-container .child-block-marker.waitfor {
   background-color: var(--text-color, #807f83);
 }
 :host .outer-container .child-block .child-block-container .child-block-marker.actioncategory, :host .outer-container .child-block .child-block-container .child-block-marker.logic {
   background-color: var(--anthracite, #1a1a1a);
 }
-:host .outer-container .child-block .child-block-container .child-block-marker.dateandtime, :host .outer-container .child-block .child-block-container .child-block-marker.waitfor {
+:host .outer-container .child-block .child-block-container .child-block-marker.dateandtime {
   background-color: var(--dark, #000000);
 }
 :host .outer-container .child-block .child-block-container .child-block-marker.catalogandbarcode, :host .outer-container .child-block .child-block-container .child-block-marker.notifications {
@@ -709,13 +709,13 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host .outer-container .child-block .child-block-container .child-block-marker.has-hover-affect:hover .tooltip-container yoo-icon:not(.stable).contactdetail, :host .outer-container .child-block .child-block-container .child-block-marker.has-hover-affect:hover .tooltip-container yoo-icon:not(.stable).engage, :host .outer-container .child-block .child-block-container .child-block-marker.has-hover-affect:hover .tooltip-container yoo-icon:not(.stable).information, :host .outer-container .child-block .child-block-container .child-block-marker.has-hover-affect:hover .tooltip-container yoo-icon:not(.stable).nativeactions, :host .outer-container .child-block .child-block-container .child-block-marker.has-hover-affect:hover .tooltip-container yoo-icon:not(.stable).entity, :host .outer-container .child-block .child-block-container .child-block-marker.has-hover-affect:hover .tooltip-container yoo-icon:not(.stable).notification {
   color: var(--warning, #ed6e33);
 }
-:host .outer-container .child-block .child-block-container .child-block-marker.has-hover-affect:hover .tooltip-container yoo-icon:not(.stable).no-scoring {
+:host .outer-container .child-block .child-block-container .child-block-marker.has-hover-affect:hover .tooltip-container yoo-icon:not(.stable).no-scoring, :host .outer-container .child-block .child-block-container .child-block-marker.has-hover-affect:hover .tooltip-container yoo-icon:not(.stable).waitfor {
   color: var(--text-color, #807f83);
 }
 :host .outer-container .child-block .child-block-container .child-block-marker.has-hover-affect:hover .tooltip-container yoo-icon:not(.stable).actioncategory, :host .outer-container .child-block .child-block-container .child-block-marker.has-hover-affect:hover .tooltip-container yoo-icon:not(.stable).logic {
   color: var(--anthracite, #1a1a1a);
 }
-:host .outer-container .child-block .child-block-container .child-block-marker.has-hover-affect:hover .tooltip-container yoo-icon:not(.stable).dateandtime, :host .outer-container .child-block .child-block-container .child-block-marker.has-hover-affect:hover .tooltip-container yoo-icon:not(.stable).waitfor {
+:host .outer-container .child-block .child-block-container .child-block-marker.has-hover-affect:hover .tooltip-container yoo-icon:not(.stable).dateandtime {
   color: var(--dark, #000000);
 }
 :host .outer-container .child-block .child-block-container .child-block-marker.has-hover-affect:hover .tooltip-container yoo-icon:not(.stable).catalogandbarcode, :host .outer-container .child-block .child-block-container .child-block-marker.has-hover-affect:hover .tooltip-container yoo-icon:not(.stable).notifications {
@@ -766,13 +766,13 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host .outer-container .child-block-indicator.contactdetail, :host .outer-container .child-block-indicator.engage, :host .outer-container .child-block-indicator.information, :host .outer-container .child-block-indicator.nativeactions, :host .outer-container .child-block-indicator.entity, :host .outer-container .child-block-indicator.notification {
   background-color: var(--warning, #ed6e33);
 }
-:host .outer-container .child-block-indicator.no-scoring {
+:host .outer-container .child-block-indicator.no-scoring, :host .outer-container .child-block-indicator.waitfor {
   background-color: var(--text-color, #807f83);
 }
 :host .outer-container .child-block-indicator.actioncategory, :host .outer-container .child-block-indicator.logic {
   background-color: var(--anthracite, #1a1a1a);
 }
-:host .outer-container .child-block-indicator.dateandtime, :host .outer-container .child-block-indicator.waitfor {
+:host .outer-container .child-block-indicator.dateandtime {
   background-color: var(--dark, #000000);
 }
 :host .outer-container .child-block-indicator.catalogandbarcode, :host .outer-container .child-block-indicator.notifications {

package/dist/collection/components/form-creator/form-creator-block-simple/form-creator-block-simple.css

@@ -237,13 +237,13 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host .outer-container .form-icon.contactdetail, :host .outer-container .form-icon.engage, :host .outer-container .form-icon.information, :host .outer-container .form-icon.nativeactions, :host .outer-container .form-icon.entity, :host .outer-container .form-icon.notification {
   background-color: var(--warning, #ed6e33);
 }
-:host .outer-container .form-icon.no-scoring {
+:host .outer-container .form-icon.no-scoring, :host .outer-container .form-icon.waitfor {
   background-color: var(--text-color, #807f83);
 }
 :host .outer-container .form-icon.actioncategory, :host .outer-container .form-icon.logic {
   background-color: var(--anthracite, #1a1a1a);
 }
-:host .outer-container .form-icon.dateandtime, :host .outer-container .form-icon.waitfor {
+:host .outer-container .form-icon.dateandtime {
   background-color: var(--dark, #000000);
 }
 :host .outer-container .form-icon.catalogandbarcode, :host .outer-container .form-icon.notifications {

package/dist/collection/components/form-creator/form-creator-condition-block/form-creator-condition-block.css

@@ -325,13 +325,13 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host .outer-container .header .form-icon.contactdetail, :host .outer-container .header .form-icon.engage, :host .outer-container .header .form-icon.information, :host .outer-container .header .form-icon.nativeactions, :host .outer-container .header .form-icon.entity, :host .outer-container .header .form-icon.notification {
   background-color: var(--warning, #ed6e33);
 }
-:host .outer-container .header .form-icon.no-scoring {
+:host .outer-container .header .form-icon.no-scoring, :host .outer-container .header .form-icon.waitfor {
   background-color: var(--text-color, #807f83);
 }
 :host .outer-container .header .form-icon.actioncategory, :host .outer-container .header .form-icon.logic {
   background-color: var(--anthracite, #1a1a1a);
 }
-:host .outer-container .header .form-icon.dateandtime, :host .outer-container .header .form-icon.waitfor {
+:host .outer-container .header .form-icon.dateandtime {
   background-color: var(--dark, #000000);
 }
 :host .outer-container .header .form-icon.catalogandbarcode, :host .outer-container .header .form-icon.notifications {

package/dist/collection/components/form-creator/form-creator-score-expandable/form-creator-score-expandable.css

@@ -344,8 +344,9 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host .outer-container .parent-block-container.notification {
   border-color: var(--warning, #ed6e33);
 }
-:host .outer-container .parent-block-condition.no-scoring,
-:host .outer-container .parent-block-container.no-scoring {
+:host .outer-container .parent-block-condition.no-scoring, :host .outer-container .parent-block-condition.waitfor,
+:host .outer-container .parent-block-container.no-scoring,
+:host .outer-container .parent-block-container.waitfor {
   border-color: var(--text-color, #807f83);
 }
 :host .outer-container .parent-block-condition.actioncategory, :host .outer-container .parent-block-condition.logic,
@@ -353,9 +354,8 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host .outer-container .parent-block-container.logic {
   border-color: var(--anthracite, #1a1a1a);
 }
-:host .outer-container .parent-block-condition.dateandtime, :host .outer-container .parent-block-condition.waitfor,
-:host .outer-container .parent-block-container.dateandtime,
-:host .outer-container .parent-block-container.waitfor {
+:host .outer-container .parent-block-condition.dateandtime,
+:host .outer-container .parent-block-container.dateandtime {
   border-color: var(--dark, #000000);
 }
 :host .outer-container .parent-block-condition.catalogandbarcode, :host .outer-container .parent-block-condition.notifications,
@@ -417,8 +417,9 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host .outer-container .parent-block-container .header .form-icon.notification {
   background-color: var(--warning, #ed6e33);
 }
-:host .outer-container .parent-block-condition .header .form-icon.no-scoring,
-:host .outer-container .parent-block-container .header .form-icon.no-scoring {
+:host .outer-container .parent-block-condition .header .form-icon.no-scoring, :host .outer-container .parent-block-condition .header .form-icon.waitfor,
+:host .outer-container .parent-block-container .header .form-icon.no-scoring,
+:host .outer-container .parent-block-container .header .form-icon.waitfor {
   background-color: var(--text-color, #807f83);
 }
 :host .outer-container .parent-block-condition .header .form-icon.actioncategory, :host .outer-container .parent-block-condition .header .form-icon.logic,
@@ -426,9 +427,8 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host .outer-container .parent-block-container .header .form-icon.logic {
   background-color: var(--anthracite, #1a1a1a);
 }
-:host .outer-container .parent-block-condition .header .form-icon.dateandtime, :host .outer-container .parent-block-condition .header .form-icon.waitfor,
-:host .outer-container .parent-block-container .header .form-icon.dateandtime,
-:host .outer-container .parent-block-container .header .form-icon.waitfor {
+:host .outer-container .parent-block-condition .header .form-icon.dateandtime,
+:host .outer-container .parent-block-container .header .form-icon.dateandtime {
   background-color: var(--dark, #000000);
 }
 :host .outer-container .parent-block-condition .header .form-icon.catalogandbarcode, :host .outer-container .parent-block-condition .header .form-icon.notifications,

package/dist/collection/components/form-creator/form-creator-translate/form-creator-translate.js

@@ -90,10 +90,20 @@ export class YooFormCreatorTranslateComponent {
             icon: 'file-excel',
             handler: () => this.onExport('xlsx')
           },
+          {
+            text: translate('EXCELKEEPHTML'),
+            icon: 'file-excel',
+            handler: () => this.onExport('xlsx', true)
+          },
           {
             text: translate('CSV'),
             icon: 'file-csv',
             handler: () => this.onExport('csv')
+          },
+          {
+            text: translate('CSVKEEPHTML'),
+            icon: 'file-csv',
+            handler: () => this.onExport('csv', true)
           }
         ]
       },
@@ -279,9 +289,9 @@ export class YooFormCreatorTranslateComponent {
   onImport() {
     this.translationImport.emit();
   }
-  onExport(type) {
+  onExport(type, forceHTML) {
     if (this.grid) {
-      this.grid.doPrintLocal(type);
+      this.grid.doPrintLocal(type, forceHTML);
     }
   }
   onBaseLanguageChanged(ev) {

package/dist/collection/components/grid/ag-grid/grid-renderers.js

@@ -44,7 +44,7 @@ function defaultRenderer(params) {
       retVal = title || retVal;
     }
     if (params.isExport) {
-      return translateFunction(stripHtml((retVal === null || retVal === void 0 ? void 0 : retVal.toString()) || ''));
+      return translateFunction(params.forceHtml ? ((retVal === null || retVal === void 0 ? void 0 : retVal.toString()) || '') : (stripHtml((retVal === null || retVal === void 0 ? void 0 : retVal.toString()) || '')));
     }
     return color ? `<yoo-tag custom-color="${color}">${translateFunction(retVal.toString())}</yoo-tag>` : '<div>' + translateFunction(retVal.toString()) + '</div>';
   }

package/dist/collection/components/grid/grid/grid.js

@@ -383,12 +383,12 @@ export class YooGridComponent {
       this.selection = this.selection.filter((i) => i._id !== item._id);
     }
   }
-  async doPrintLocal(type) {
+  async doPrintLocal(type, forceHtml) {
     if (this.gridApi && !this.disconnected) {
       const options = {
         columnKeys: map(sortBy(this.finalGridConfig.columnDefs, 'exportOrder'), (c) => c.field),
         allColumns: true,
-        processCellCallback: (params) => getRenderer('exportRenderer')(params)
+        processCellCallback: (params) => getRenderer('exportRenderer')({ ...params, forceHtml })
       };
       if (type === 'xlsx') {
         this.gridApi.exportDataAsExcel(options);
@@ -3359,7 +3359,7 @@ export class YooGridComponent {
       "mutable": true,
       "complexType": {
         "original": "CardType",
-        "resolved": "\"calendar\" | \"card-calendar\" | \"card-battle\" | \"card-battle-result\" | \"card-campaign\" | \"card-cell\" | \"card-cell-color\" | \"card-cell-image\" | \"card-chat\" | \"card-course\" | \"card-course-info\" | \"card-course-row\" | \"card-course-row-compact\" | \"card-default\" | \"card-feed\" | \"card-feed-row\" | \"card-file\" | \"card-grid\" | \"card-image\" | \"card-inbox\" | \"card-inbox-ongoing\" | \"card-incentive\" | \"card-incentive-rank\" | \"card-kanban\" | \"card-list\" | \"card-list-color\" | \"card-location\" | \"card-map\" | \"card-media\" | \"card-menu\" | \"card-notification\" | \"card-plan\" | \"card-recommendation\" | \"card-sticky\" | \"card-tag\" | \"card-tag-single\" | \"card-template\" | \"kanban\" | \"tree\"",
+        "resolved": "\"calendar\" | \"card-calendar\" | \"card-battle\" | \"card-battle-result\" | \"card-campaign\" | \"card-cell\" | \"card-cell-color\" | \"card-cell-image\" | \"card-chat\" | \"card-course\" | \"card-course-info\" | \"card-course-row\" | \"card-course-row-compact\" | \"card-default\" | \"card-feed\" | \"card-feed-row\" | \"card-file\" | \"card-grid\" | \"card-image\" | \"card-inbox\" | \"card-inbox-ongoing\" | \"card-incentive\" | \"card-incentive-rank\" | \"card-kanban\" | \"card-list\" | \"card-list-color\" | \"card-list-simple\" | \"card-location\" | \"card-map\" | \"card-media\" | \"card-menu\" | \"card-notification\" | \"card-plan\" | \"card-recommendation\" | \"card-sticky\" | \"card-tag\" | \"card-tag-single\" | \"card-template\" | \"kanban\" | \"tree\"",
         "references": {
           "CardType": {
             "location": "import",
@@ -6601,7 +6601,7 @@ export class YooGridComponent {
       },
       "complexType": {
         "original": "CardType",
-        "resolved": "\"calendar\" | \"card-calendar\" | \"card-battle\" | \"card-battle-result\" | \"card-campaign\" | \"card-cell\" | \"card-cell-color\" | \"card-cell-image\" | \"card-chat\" | \"card-course\" | \"card-course-info\" | \"card-course-row\" | \"card-course-row-compact\" | \"card-default\" | \"card-feed\" | \"card-feed-row\" | \"card-file\" | \"card-grid\" | \"card-image\" | \"card-inbox\" | \"card-inbox-ongoing\" | \"card-incentive\" | \"card-incentive-rank\" | \"card-kanban\" | \"card-list\" | \"card-list-color\" | \"card-location\" | \"card-map\" | \"card-media\" | \"card-menu\" | \"card-notification\" | \"card-plan\" | \"card-recommendation\" | \"card-sticky\" | \"card-tag\" | \"card-tag-single\" | \"card-template\" | \"kanban\" | \"tree\"",
+        "resolved": "\"calendar\" | \"card-calendar\" | \"card-battle\" | \"card-battle-result\" | \"card-campaign\" | \"card-cell\" | \"card-cell-color\" | \"card-cell-image\" | \"card-chat\" | \"card-course\" | \"card-course-info\" | \"card-course-row\" | \"card-course-row-compact\" | \"card-default\" | \"card-feed\" | \"card-feed-row\" | \"card-file\" | \"card-grid\" | \"card-image\" | \"card-inbox\" | \"card-inbox-ongoing\" | \"card-incentive\" | \"card-incentive-rank\" | \"card-kanban\" | \"card-list\" | \"card-list-color\" | \"card-list-simple\" | \"card-location\" | \"card-map\" | \"card-media\" | \"card-menu\" | \"card-notification\" | \"card-plan\" | \"card-recommendation\" | \"card-sticky\" | \"card-tag\" | \"card-tag-single\" | \"card-template\" | \"kanban\" | \"tree\"",
         "references": {
           "CardType": {
             "location": "import",
@@ -7706,10 +7706,13 @@ export class YooGridComponent {
     },
     "doPrintLocal": {
       "complexType": {
-        "signature": "(type: TExport) => Promise<void>",
+        "signature": "(type: TExport, forceHtml?: boolean) => Promise<void>",
         "parameters": [{
             "tags": [],
             "text": ""
+          }, {
+            "tags": [],
+            "text": ""
           }],
         "references": {
           "Promise": {

package/dist/collection/feature-operate/mission/mission-score/mission-score.js

@@ -68,7 +68,7 @@ export class YooMissionScoreComponent {
         maxValue: isPercentage ? 100 : total,
         metric: isPercentage ? 'percentage' : 'points',
         allowNonAvailableValue: true,
-        numberDecimalAfterComaProgressValue: 2,
+        numberDecimalAfterComaProgressValue: 0,
         percentValueColorScheme: isPercentage,
         ...(!isPercentage && { class: 'app-color' })
       },

package/dist/collection/feature-platform/admin/draw-flow/draw-flow.css

@@ -214,15 +214,15 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   --dfNodeBorderColor: rgba(90, 48, 244, 1);
   --dfNodeBorderRadius: 16px;
   --dfNodeMinHeight: 40px;
-  --dfNodeMinWidth: 160px;
-  --dfNodePaddingTop: 16px;
-  --dfNodePaddingBottom: 16px;
+  --dfNodeMinWidth: 12.5rem;
+  --dfNodePaddingTop: 0;
+  --dfNodePaddingBottom: 0.5rem;
   --dfNodeBoxShadowHL: 0px;
   --dfNodeBoxShadowVL: 2px;
   --dfNodeBoxShadowBR: 16px;
   --dfNodeBoxShadowS: 2px;
   --dfNodeBoxShadowColor: rgba(0, 0, 0, 0.1);
-  --dfNodeHoverBackgroundColor: rgba(90, 48, 244, 0.2);
+  --dfNodeHoverBackgroundColor: rgba(255, 255, 255, 1);
   --dfNodeHoverTextColor: #000000;
   --dfNodeHoverBorderSize: var(--border-size);
   --dfNodeHoverBorderColor: rgba(90, 48, 244, 1);
@@ -317,7 +317,8 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   border-radius: 4px;
 }
 :host .drawflow .drawflow-node.selected {
-  background: red;
+  z-index: 100;
+  background: var(--light, #ffffff);
 }
 :host .drawflow .drawflow-node:hover {
   cursor: move;
@@ -527,6 +528,10 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host .drawflow-container .toolbar .spacing {
   margin-left: 1rem;
 }
+:host .drawflow-container .toolbar yoo-icon[name=side-menu-collapse],
+:host .drawflow-container .toolbar yoo-icon[name=side-menu-expand] {
+  transform: rotate(90deg);
+}
 :host .drawflow-container .outer-container {
   flex: 1;
   width: 100%;
@@ -546,10 +551,10 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host .drawflow-container .outer-container .drawflow .drawflow-node.multimedia, :host .drawflow-container .outer-container .drawflow .drawflow-node.learn, :host .drawflow-container .outer-container .drawflow .drawflow-node.uiactions, :host .drawflow-container .outer-container .drawflow .drawflow-node.action {
   border-color: var(--info, #d84c96);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.multimedia.selected, :host .drawflow-container .outer-container .drawflow .drawflow-node.learn.selected, :host .drawflow-container .outer-container .drawflow .drawflow-node.uiactions.selected, :host .drawflow-container .outer-container .drawflow .drawflow-node.action.selected {
+:host .drawflow-container .outer-container .drawflow .drawflow-node.multimedia.selected1, :host .drawflow-container .outer-container .drawflow .drawflow-node.learn.selected1, :host .drawflow-container .outer-container .drawflow .drawflow-node.uiactions.selected1, :host .drawflow-container .outer-container .drawflow .drawflow-node.action.selected1 {
   background: var(--info, #d84c96);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.multimedia:hover, :host .drawflow-container .outer-container .drawflow .drawflow-node.learn:hover, :host .drawflow-container .outer-container .drawflow .drawflow-node.uiactions:hover, :host .drawflow-container .outer-container .drawflow .drawflow-node.action:hover {
+:host .drawflow-container .outer-container .drawflow .drawflow-node.multimedia.hover1, :host .drawflow-container .outer-container .drawflow .drawflow-node.learn.hover1, :host .drawflow-container .outer-container .drawflow .drawflow-node.uiactions.hover1, :host .drawflow-container .outer-container .drawflow .drawflow-node.action.hover1 {
   background: var(--info-20, rgba(216, 76, 150, 0.2));
 }
 :host .drawflow-container .outer-container .drawflow .drawflow-node.multimedia .input, :host .drawflow-container .outer-container .drawflow .drawflow-node.learn .input, :host .drawflow-container .outer-container .drawflow .drawflow-node.uiactions .input, :host .drawflow-container .outer-container .drawflow .drawflow-node.action .input {
@@ -561,14 +566,14 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host .drawflow-container .outer-container .drawflow .drawflow-node.select, :host .drawflow-container .outer-container .drawflow .drawflow-node.events, :host .drawflow-container .outer-container .drawflow .drawflow-node.dataevents, :host .drawflow-container .outer-container .drawflow .drawflow-node.trigger {
   border-color: var(--accent, #276ef1);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.select.selected, :host .drawflow-container .outer-container .drawflow .drawflow-node.events.selected, :host .drawflow-container .outer-container .drawflow .drawflow-node.dataevents.selected, :host .drawflow-container .outer-container .drawflow .drawflow-node.trigger.selected {
+:host .drawflow-container .outer-container .drawflow .drawflow-node.select.selected1, :host .drawflow-container .outer-container .drawflow .drawflow-node.events.selected1, :host .drawflow-container .outer-container .drawflow .drawflow-node.dataevents.selected1, :host .drawflow-container .outer-container .drawflow .drawflow-node.trigger.selected1 {
   color: var(--light, #ffffff);
   background: var(--accent, #276ef1);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.select.selected yoo-icon, :host .drawflow-container .outer-container .drawflow .drawflow-node.events.selected yoo-icon, :host .drawflow-container .outer-container .drawflow .drawflow-node.dataevents.selected yoo-icon, :host .drawflow-container .outer-container .drawflow .drawflow-node.trigger.selected yoo-icon {
+:host .drawflow-container .outer-container .drawflow .drawflow-node.select.selected1 yoo-icon, :host .drawflow-container .outer-container .drawflow .drawflow-node.events.selected1 yoo-icon, :host .drawflow-container .outer-container .drawflow .drawflow-node.dataevents.selected1 yoo-icon, :host .drawflow-container .outer-container .drawflow .drawflow-node.trigger.selected1 yoo-icon {
   fill: var(--light, #ffffff);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.select:hover, :host .drawflow-container .outer-container .drawflow .drawflow-node.events:hover, :host .drawflow-container .outer-container .drawflow .drawflow-node.dataevents:hover, :host .drawflow-container .outer-container .drawflow .drawflow-node.trigger:hover {
+:host .drawflow-container .outer-container .drawflow .drawflow-node.select.hover1, :host .drawflow-container .outer-container .drawflow .drawflow-node.events.hover1, :host .drawflow-container .outer-container .drawflow .drawflow-node.dataevents.hover1, :host .drawflow-container .outer-container .drawflow .drawflow-node.trigger.hover1 {
   background: var(--accent-20, rgba(39, 110, 241, 0.2));
 }
 :host .drawflow-container .outer-container .drawflow .drawflow-node.select .input, :host .drawflow-container .outer-container .drawflow .drawflow-node.events .input, :host .drawflow-container .outer-container .drawflow .drawflow-node.dataevents .input, :host .drawflow-container .outer-container .drawflow .drawflow-node.trigger .input {
@@ -580,11 +585,11 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host .drawflow-container .outer-container .drawflow .drawflow-node.textcategory, :host .drawflow-container .outer-container .drawflow .drawflow-node.condition {
   border-color: var(--energized, #ffc043);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.textcategory.selected, :host .drawflow-container .outer-container .drawflow .drawflow-node.condition.selected {
+:host .drawflow-container .outer-container .drawflow .drawflow-node.textcategory.selected1, :host .drawflow-container .outer-container .drawflow .drawflow-node.condition.selected1 {
   color: var(--dark, #000000);
   background: var(--energized, #ffc043);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.textcategory:hover, :host .drawflow-container .outer-container .drawflow .drawflow-node.condition:hover {
+:host .drawflow-container .outer-container .drawflow .drawflow-node.textcategory.hover1, :host .drawflow-container .outer-container .drawflow .drawflow-node.condition.hover1 {
   background: var(--energized-20, rgba(255, 192, 67, 0.2));
 }
 :host .drawflow-container .outer-container .drawflow .drawflow-node.textcategory .input, :host .drawflow-container .outer-container .drawflow .drawflow-node.condition .input {
@@ -596,14 +601,14 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host .drawflow-container .outer-container .drawflow .drawflow-node.number, :host .drawflow-container .outer-container .drawflow .drawflow-node.appcreatorapp, :host .drawflow-container .outer-container .drawflow .drawflow-node.customfield, :host .drawflow-container .outer-container .drawflow .drawflow-node.lesson, :host .drawflow-container .outer-container .drawflow .drawflow-node.boostcontent {
   border-color: var(--app-color, #5a30f4);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.number.selected, :host .drawflow-container .outer-container .drawflow .drawflow-node.appcreatorapp.selected, :host .drawflow-container .outer-container .drawflow .drawflow-node.customfield.selected, :host .drawflow-container .outer-container .drawflow .drawflow-node.lesson.selected, :host .drawflow-container .outer-container .drawflow .drawflow-node.boostcontent.selected {
+:host .drawflow-container .outer-container .drawflow .drawflow-node.number.selected1, :host .drawflow-container .outer-container .drawflow .drawflow-node.appcreatorapp.selected1, :host .drawflow-container .outer-container .drawflow .drawflow-node.customfield.selected1, :host .drawflow-container .outer-container .drawflow .drawflow-node.lesson.selected1, :host .drawflow-container .outer-container .drawflow .drawflow-node.boostcontent.selected1 {
   color: var(--light, #ffffff);
   background: var(--app-color, #5a30f4);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.number.selected yoo-icon, :host .drawflow-container .outer-container .drawflow .drawflow-node.appcreatorapp.selected yoo-icon, :host .drawflow-container .outer-container .drawflow .drawflow-node.customfield.selected yoo-icon, :host .drawflow-container .outer-container .drawflow .drawflow-node.lesson.selected yoo-icon, :host .drawflow-container .outer-container .drawflow .drawflow-node.boostcontent.selected yoo-icon {
+:host .drawflow-container .outer-container .drawflow .drawflow-node.number.selected1 yoo-icon, :host .drawflow-container .outer-container .drawflow .drawflow-node.appcreatorapp.selected1 yoo-icon, :host .drawflow-container .outer-container .drawflow .drawflow-node.customfield.selected1 yoo-icon, :host .drawflow-container .outer-container .drawflow .drawflow-node.lesson.selected1 yoo-icon, :host .drawflow-container .outer-container .drawflow .drawflow-node.boostcontent.selected1 yoo-icon {
   fill: var(--light, #ffffff);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.number:hover, :host .drawflow-container .outer-container .drawflow .drawflow-node.appcreatorapp:hover, :host .drawflow-container .outer-container .drawflow .drawflow-node.customfield:hover, :host .drawflow-container .outer-container .drawflow .drawflow-node.lesson:hover, :host .drawflow-container .outer-container .drawflow .drawflow-node.boostcontent:hover {
+:host .drawflow-container .outer-container .drawflow .drawflow-node.number.hover1, :host .drawflow-container .outer-container .drawflow .drawflow-node.appcreatorapp.hover1, :host .drawflow-container .outer-container .drawflow .drawflow-node.customfield.hover1, :host .drawflow-container .outer-container .drawflow .drawflow-node.lesson.hover1, :host .drawflow-container .outer-container .drawflow .drawflow-node.boostcontent.hover1 {
   background: var(--app-color-20, rgba(90, 48, 244, 0.2));
 }
 :host .drawflow-container .outer-container .drawflow .drawflow-node.number .input, :host .drawflow-container .outer-container .drawflow .drawflow-node.appcreatorapp .input, :host .drawflow-container .outer-container .drawflow .drawflow-node.customfield .input, :host .drawflow-container .outer-container .drawflow .drawflow-node.lesson .input, :host .drawflow-container .outer-container .drawflow .drawflow-node.boostcontent .input {
@@ -615,14 +620,14 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host .drawflow-container .outer-container .drawflow .drawflow-node.contactdetail, :host .drawflow-container .outer-container .drawflow .drawflow-node.engage, :host .drawflow-container .outer-container .drawflow .drawflow-node.information, :host .drawflow-container .outer-container .drawflow .drawflow-node.nativeactions, :host .drawflow-container .outer-container .drawflow .drawflow-node.entity, :host .drawflow-container .outer-container .drawflow .drawflow-node.notification {
   border-color: var(--warning, #ed6e33);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.contactdetail.selected, :host .drawflow-container .outer-container .drawflow .drawflow-node.engage.selected, :host .drawflow-container .outer-container .drawflow .drawflow-node.information.selected, :host .drawflow-container .outer-container .drawflow .drawflow-node.nativeactions.selected, :host .drawflow-container .outer-container .drawflow .drawflow-node.entity.selected, :host .drawflow-container .outer-container .drawflow .drawflow-node.notification.selected {
+:host .drawflow-container .outer-container .drawflow .drawflow-node.contactdetail.selected1, :host .drawflow-container .outer-container .drawflow .drawflow-node.engage.selected1, :host .drawflow-container .outer-container .drawflow .drawflow-node.information.selected1, :host .drawflow-container .outer-container .drawflow .drawflow-node.nativeactions.selected1, :host .drawflow-container .outer-container .drawflow .drawflow-node.entity.selected1, :host .drawflow-container .outer-container .drawflow .drawflow-node.notification.selected1 {
   color: var(--light, #ffffff);
   background: var(--warning, #ed6e33);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.contactdetail.selected yoo-icon, :host .drawflow-container .outer-container .drawflow .drawflow-node.engage.selected yoo-icon, :host .drawflow-container .outer-container .drawflow .drawflow-node.information.selected yoo-icon, :host .drawflow-container .outer-container .drawflow .drawflow-node.nativeactions.selected yoo-icon, :host .drawflow-container .outer-container .drawflow .drawflow-node.entity.selected yoo-icon, :host .drawflow-container .outer-container .drawflow .drawflow-node.notification.selected yoo-icon {
+:host .drawflow-container .outer-container .drawflow .drawflow-node.contactdetail.selected1 yoo-icon, :host .drawflow-container .outer-container .drawflow .drawflow-node.engage.selected1 yoo-icon, :host .drawflow-container .outer-container .drawflow .drawflow-node.information.selected1 yoo-icon, :host .drawflow-container .outer-container .drawflow .drawflow-node.nativeactions.selected1 yoo-icon, :host .drawflow-container .outer-container .drawflow .drawflow-node.entity.selected1 yoo-icon, :host .drawflow-container .outer-container .drawflow .drawflow-node.notification.selected1 yoo-icon {
   fill: var(--light, #ffffff);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.contactdetail:hover, :host .drawflow-container .outer-container .drawflow .drawflow-node.engage:hover, :host .drawflow-container .outer-container .drawflow .drawflow-node.information:hover, :host .drawflow-container .outer-container .drawflow .drawflow-node.nativeactions:hover, :host .drawflow-container .outer-container .drawflow .drawflow-node.entity:hover, :host .drawflow-container .outer-container .drawflow .drawflow-node.notification:hover {
+:host .drawflow-container .outer-container .drawflow .drawflow-node.contactdetail.hover1, :host .drawflow-container .outer-container .drawflow .drawflow-node.engage.hover1, :host .drawflow-container .outer-container .drawflow .drawflow-node.information.hover1, :host .drawflow-container .outer-container .drawflow .drawflow-node.nativeactions.hover1, :host .drawflow-container .outer-container .drawflow .drawflow-node.entity.hover1, :host .drawflow-container .outer-container .drawflow .drawflow-node.notification.hover1 {
   background: var(--warning-20, rgba(237, 110, 51, 0.2));
 }
 :host .drawflow-container .outer-container .drawflow .drawflow-node.contactdetail .input, :host .drawflow-container .outer-container .drawflow .drawflow-node.engage .input, :host .drawflow-container .outer-container .drawflow .drawflow-node.information .input, :host .drawflow-container .outer-container .drawflow .drawflow-node.nativeactions .input, :host .drawflow-container .outer-container .drawflow .drawflow-node.entity .input, :host .drawflow-container .outer-container .drawflow .drawflow-node.notification .input {
@@ -631,33 +636,33 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host .drawflow-container .outer-container .drawflow .drawflow-node.contactdetail .output, :host .drawflow-container .outer-container .drawflow .drawflow-node.engage .output, :host .drawflow-container .outer-container .drawflow .drawflow-node.information .output, :host .drawflow-container .outer-container .drawflow .drawflow-node.nativeactions .output, :host .drawflow-container .outer-container .drawflow .drawflow-node.entity .output, :host .drawflow-container .outer-container .drawflow .drawflow-node.notification .output {
   border-color: var(--warning, #ed6e33);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.no-scoring {
+:host .drawflow-container .outer-container .drawflow .drawflow-node.no-scoring, :host .drawflow-container .outer-container .drawflow .drawflow-node.waitfor {
   border-color: var(--text-color, #807f83);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.no-scoring.selected {
+:host .drawflow-container .outer-container .drawflow .drawflow-node.no-scoring.selected1, :host .drawflow-container .outer-container .drawflow .drawflow-node.waitfor.selected1 {
   color: var(--dark, #000000);
   background: var(--text-color, #807f83);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.no-scoring:hover {
+:host .drawflow-container .outer-container .drawflow .drawflow-node.no-scoring.hover1, :host .drawflow-container .outer-container .drawflow .drawflow-node.waitfor.hover1 {
   background: var(--text-color-20, rgba(128, 127, 131, 0.2));
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.no-scoring .input {
+:host .drawflow-container .outer-container .drawflow .drawflow-node.no-scoring .input, :host .drawflow-container .outer-container .drawflow .drawflow-node.waitfor .input {
   background: var(--text-color, #807f83);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.no-scoring .output {
+:host .drawflow-container .outer-container .drawflow .drawflow-node.no-scoring .output, :host .drawflow-container .outer-container .drawflow .drawflow-node.waitfor .output {
   border-color: var(--text-color, #807f83);
 }
 :host .drawflow-container .outer-container .drawflow .drawflow-node.actioncategory, :host .drawflow-container .outer-container .drawflow .drawflow-node.logic {
   border-color: var(--anthracite, #1a1a1a);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.actioncategory.selected, :host .drawflow-container .outer-container .drawflow .drawflow-node.logic.selected {
+:host .drawflow-container .outer-container .drawflow .drawflow-node.actioncategory.selected1, :host .drawflow-container .outer-container .drawflow .drawflow-node.logic.selected1 {
   color: var(--light, #ffffff);
   background: var(--anthracite, #1a1a1a);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.actioncategory.selected yoo-icon, :host .drawflow-container .outer-container .drawflow .drawflow-node.logic.selected yoo-icon {
+:host .drawflow-container .outer-container .drawflow .drawflow-node.actioncategory.selected1 yoo-icon, :host .drawflow-container .outer-container .drawflow .drawflow-node.logic.selected1 yoo-icon {
   fill: var(--light, #ffffff);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.actioncategory:hover, :host .drawflow-container .outer-container .drawflow .drawflow-node.logic:hover {
+:host .drawflow-container .outer-container .drawflow .drawflow-node.actioncategory.hover1, :host .drawflow-container .outer-container .drawflow .drawflow-node.logic.hover1 {
   background: var(--anthracite-20, rgba(26, 26, 26, 0.2));
 }
 :host .drawflow-container .outer-container .drawflow .drawflow-node.actioncategory .input, :host .drawflow-container .outer-container .drawflow .drawflow-node.logic .input {
@@ -666,36 +671,36 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host .drawflow-container .outer-container .drawflow .drawflow-node.actioncategory .output, :host .drawflow-container .outer-container .drawflow .drawflow-node.logic .output {
   border-color: var(--anthracite, #1a1a1a);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.dateandtime, :host .drawflow-container .outer-container .drawflow .drawflow-node.waitfor {
+:host .drawflow-container .outer-container .drawflow .drawflow-node.dateandtime {
   border-color: var(--dark, #000000);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.dateandtime.selected, :host .drawflow-container .outer-container .drawflow .drawflow-node.waitfor.selected {
+:host .drawflow-container .outer-container .drawflow .drawflow-node.dateandtime.selected1 {
   color: var(--light, #ffffff);
   background: var(--dark, #000000);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.dateandtime.selected yoo-icon, :host .drawflow-container .outer-container .drawflow .drawflow-node.waitfor.selected yoo-icon {
+:host .drawflow-container .outer-container .drawflow .drawflow-node.dateandtime.selected1 yoo-icon {
   fill: var(--light, #ffffff);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.dateandtime:hover, :host .drawflow-container .outer-container .drawflow .drawflow-node.waitfor:hover {
+:host .drawflow-container .outer-container .drawflow .drawflow-node.dateandtime.hover1 {
   background: var(--dark-20, rgba(0, 0, 0, 0.2));
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.dateandtime .input, :host .drawflow-container .outer-container .drawflow .drawflow-node.waitfor .input {
+:host .drawflow-container .outer-container .drawflow .drawflow-node.dateandtime .input {
   background: var(--dark, #000000);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.dateandtime .output, :host .drawflow-container .outer-container .drawflow .drawflow-node.waitfor .output {
+:host .drawflow-container .outer-container .drawflow .drawflow-node.dateandtime .output {
   border-color: var(--dark, #000000);
 }
 :host .drawflow-container .outer-container .drawflow .drawflow-node.catalogandbarcode, :host .drawflow-container .outer-container .drawflow .drawflow-node.notifications {
   border-color: var(--danger, #d44333);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.catalogandbarcode.selected, :host .drawflow-container .outer-container .drawflow .drawflow-node.notifications.selected {
+:host .drawflow-container .outer-container .drawflow .drawflow-node.catalogandbarcode.selected1, :host .drawflow-container .outer-container .drawflow .drawflow-node.notifications.selected1 {
   color: var(--light, #ffffff);
   background: var(--danger, #d44333);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.catalogandbarcode.selected yoo-icon, :host .drawflow-container .outer-container .drawflow .drawflow-node.notifications.selected yoo-icon {
+:host .drawflow-container .outer-container .drawflow .drawflow-node.catalogandbarcode.selected1 yoo-icon, :host .drawflow-container .outer-container .drawflow .drawflow-node.notifications.selected1 yoo-icon {
   fill: var(--light, #ffffff);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.catalogandbarcode:hover, :host .drawflow-container .outer-container .drawflow .drawflow-node.notifications:hover {
+:host .drawflow-container .outer-container .drawflow .drawflow-node.catalogandbarcode.hover1, :host .drawflow-container .outer-container .drawflow .drawflow-node.notifications.hover1 {
   background: var(--danger-20, rgba(212, 67, 51, 0.2));
 }
 :host .drawflow-container .outer-container .drawflow .drawflow-node.catalogandbarcode .input, :host .drawflow-container .outer-container .drawflow .drawflow-node.notifications .input {
@@ -707,11 +712,11 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host .drawflow-container .outer-container .drawflow .drawflow-node.condition {
   border-color: var(--stable, #adadad);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.condition.selected {
+:host .drawflow-container .outer-container .drawflow .drawflow-node.condition.selected1 {
   color: var(--dark, #000000);
   background: var(--stable, #adadad);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.condition:hover {
+:host .drawflow-container .outer-container .drawflow .drawflow-node.condition.hover1 {
   background: var(--stable-20, rgba(173, 173, 173, 0.2));
 }
 :host .drawflow-container .outer-container .drawflow .drawflow-node.condition .input {
@@ -723,14 +728,14 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host .drawflow-container .outer-container .drawflow .drawflow-node.page, :host .drawflow-container .outer-container .drawflow .drawflow-node.dataactions, :host .drawflow-container .outer-container .drawflow .drawflow-node.operate {
   border-color: var(--success, #3aa76d);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.page.selected, :host .drawflow-container .outer-container .drawflow .drawflow-node.dataactions.selected, :host .drawflow-container .outer-container .drawflow .drawflow-node.operate.selected {
+:host .drawflow-container .outer-container .drawflow .drawflow-node.page.selected1, :host .drawflow-container .outer-container .drawflow .drawflow-node.dataactions.selected1, :host .drawflow-container .outer-container .drawflow .drawflow-node.operate.selected1 {
   color: var(--light, #ffffff);
   background: var(--success, #3aa76d);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.page.selected yoo-icon, :host .drawflow-container .outer-container .drawflow .drawflow-node.dataactions.selected yoo-icon, :host .drawflow-container .outer-container .drawflow .drawflow-node.operate.selected yoo-icon {
+:host .drawflow-container .outer-container .drawflow .drawflow-node.page.selected1 yoo-icon, :host .drawflow-container .outer-container .drawflow .drawflow-node.dataactions.selected1 yoo-icon, :host .drawflow-container .outer-container .drawflow .drawflow-node.operate.selected1 yoo-icon {
   fill: var(--light, #ffffff);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.page:hover, :host .drawflow-container .outer-container .drawflow .drawflow-node.dataactions:hover, :host .drawflow-container .outer-container .drawflow .drawflow-node.operate:hover {
+:host .drawflow-container .outer-container .drawflow .drawflow-node.page.hover1, :host .drawflow-container .outer-container .drawflow .drawflow-node.dataactions.hover1, :host .drawflow-container .outer-container .drawflow .drawflow-node.operate.hover1 {
   background: var(--success-20, rgba(58, 167, 109, 0.2));
 }
 :host .drawflow-container .outer-container .drawflow .drawflow-node.page .input, :host .drawflow-container .outer-container .drawflow .drawflow-node.dataactions .input, :host .drawflow-container .outer-container .drawflow .drawflow-node.operate .input {