@yoobic/yobi 8.3.0-32 → 8.3.0-35

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

@@ -1178,11 +1178,12 @@ export class YooGridComponent {
     }
   }
   findIndex(item, useSelectionRemoved = false) {
+    var _a;
     const selection = [].concat(useSelectionRemoved ? this.selectionRemoved : this.selection);
     if (isString(item) || isNumber(item) || isBoolean(item)) {
       return findIndex(selection, (s) => s && isEqual(item, s));
     }
-    else if (item.tag === 'documentuploader' && item.filename && !item._id) {
+    else if ((item === null || item === void 0 ? void 0 : item.tag) === 'documentuploader' && ((_a = item) === null || _a === void 0 ? void 0 : _a.filename) && !(item === null || item === void 0 ? void 0 : item._id)) {
       // TODO: remove during upload refactor
       return findIndex(selection, (s) => s && isEqual(item, s));
     }
@@ -3453,7 +3454,7 @@ export class YooGridComponent {
       "mutable": false,
       "complexType": {
         "original": "EntityType",
-        "resolved": "\"aisles\" | \"community\" | \"courses\" | \"dashboards\" | \"operations\" | \"pages\" | \"questions\" | \"scoring\" | \"tableau\" | \"tag\" | \"user\" | \"weekdays\" | \"campaignfilters\" | \"channel\" | \"communities\" | \"custommodels\" | \"geofilters\" | \"hierarchy\" | \"incentives\" | \"locationtypes\" | \"plans\" | \"translations\" | \"aclRole\" | \"blog\" | \"emails\" | \"feeds\" | \"files\" | \"groups\" | \"htmltemplates\" | \"lessons\" | \"locations\" | \"memos\" | \"missiondescriptions\" | \"missiondescriptiontemplates\" | \"missions\" | \"productbatch\" | \"products\" | \"tenants\" | \"userranks\" | \"users\" | \"type\" | \"aclPermission\" | \"aclPermissionList\" | \"aislelist\" | \"algorithm\" | \"apps\" | \"arexperience\" | \"armodel\" | \"audiences\" | \"badges\" | \"broadcasts\" | \"calendarEvents\" | \"creationtypes\" | \"catalogs\" | \"certificates\" | \"channels\" | \"charttype\" | \"contacts\" | \"coursecategories\" | \"courses-small\" | \"courseselection\" | \"currencies\" | \"customapps\" | \"customforms\" | \"days\" | \"entitycomments\" | \"environnement\" | \"feedsComments\" | \"filesFolders\" | \"folders\" | \"formfield\" | \"giphy\" | \"googlemaps\" | \"hashtags\" | \"icons\" | \"language\" | \"lessondescriptions\" | \"liveshoppings\" | \"locationsaudience\" | \"locationspublic\" | \"markas\" | \"mediacapturedevices\" | \"memolist\" | \"missiondatas\" | \"missiondescriptioncategories\" | \"missiondescriptionreviewhistories\" | \"missionfield\" | \"notes\" | \"notifications\" | \"photos\" | \"productbatchlist\" | \"productweightpair\" | \"publicAPITokens\" | \"questionsAnswers\" | \"regex\" | \"reporttemplates\" | \"reviewapps\" | \"salesdata\" | \"scorms\" | \"scormcloud\" | \"slots\" | \"tableauShared\" | \"tagGroups\" | \"topusers\" | \"unsplash\" | \"useraudience\" | \"userlearningmanager\" | \"usercourseinfo\" | \"violetproducts\" | \"violetproductofferskus\" | \"violetbasketitems\" | \"violetshippingmethods\" | \"version\" | \"videocallusers\" | \"visits\" | \"waitlistvisit\" | \"waitlistcustomer\" | \"waitliststats\" | \"plansorlessons\" | \"widgets\"",
+        "resolved": "\"aisles\" | \"community\" | \"courses\" | \"dashboards\" | \"operations\" | \"pages\" | \"questions\" | \"scoring\" | \"tableau\" | \"tag\" | \"user\" | \"weekdays\" | \"campaignfilters\" | \"channel\" | \"communities\" | \"custommodels\" | \"geofilters\" | \"hierarchy\" | \"incentives\" | \"locationtypes\" | \"plans\" | \"translations\" | \"aclRole\" | \"blog\" | \"emails\" | \"feeds\" | \"files\" | \"groups\" | \"htmltemplates\" | \"lessons\" | \"locations\" | \"memos\" | \"missiondescriptions\" | \"missiondescriptiontemplates\" | \"missions\" | \"productbatch\" | \"products\" | \"tenants\" | \"userranks\" | \"users\" | \"type\" | \"aclPermission\" | \"aclPermissionList\" | \"aislelist\" | \"algorithm\" | \"apps\" | \"arexperience\" | \"armodel\" | \"audiences\" | \"badges\" | \"broadcasts\" | \"calendarEvents\" | \"creationtypes\" | \"catalogs\" | \"certificates\" | \"channels\" | \"charttype\" | \"contacts\" | \"coursecategories\" | \"courses-small\" | \"courseselection\" | \"currencies\" | \"customapps\" | \"customforms\" | \"days\" | \"entitycomments\" | \"environnement\" | \"feedsComments\" | \"filesFolders\" | \"folders\" | \"formfield\" | \"giphy\" | \"googlemaps\" | \"hashtags\" | \"icons\" | \"journeys\" | \"language\" | \"lessondescriptions\" | \"liveshoppings\" | \"locationsaudience\" | \"locationspublic\" | \"markas\" | \"mediacapturedevices\" | \"memolist\" | \"missiondatas\" | \"missiondescriptioncategories\" | \"missiondescriptionreviewhistories\" | \"missionfield\" | \"notes\" | \"notifications\" | \"photos\" | \"productbatchlist\" | \"productweightpair\" | \"publicAPITokens\" | \"questionsAnswers\" | \"regex\" | \"reporttemplates\" | \"reviewapps\" | \"salesdata\" | \"scorms\" | \"scormcloud\" | \"slots\" | \"tableauShared\" | \"tagGroups\" | \"topusers\" | \"unsplash\" | \"useraudience\" | \"userlearningmanager\" | \"usercourseinfo\" | \"violetproducts\" | \"violetproductofferskus\" | \"violetbasketitems\" | \"violetshippingmethods\" | \"version\" | \"videocallusers\" | \"visits\" | \"waitlistvisit\" | \"waitlistcustomer\" | \"waitliststats\" | \"plansorlessons\" | \"widgets\"",
         "references": {
           "EntityType": {
             "location": "import",

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

@@ -686,7 +686,7 @@ export class YooGridCalendarComponent {
       "mutable": false,
       "complexType": {
         "original": "EntityType",
-        "resolved": "\"aisles\" | \"community\" | \"courses\" | \"dashboards\" | \"operations\" | \"pages\" | \"questions\" | \"scoring\" | \"tableau\" | \"tag\" | \"user\" | \"weekdays\" | \"campaignfilters\" | \"channel\" | \"communities\" | \"custommodels\" | \"geofilters\" | \"hierarchy\" | \"incentives\" | \"locationtypes\" | \"plans\" | \"translations\" | \"aclRole\" | \"blog\" | \"emails\" | \"feeds\" | \"files\" | \"groups\" | \"htmltemplates\" | \"lessons\" | \"locations\" | \"memos\" | \"missiondescriptions\" | \"missiondescriptiontemplates\" | \"missions\" | \"productbatch\" | \"products\" | \"tenants\" | \"userranks\" | \"users\" | \"type\" | \"aclPermission\" | \"aclPermissionList\" | \"aislelist\" | \"algorithm\" | \"apps\" | \"arexperience\" | \"armodel\" | \"audiences\" | \"badges\" | \"broadcasts\" | \"calendarEvents\" | \"creationtypes\" | \"catalogs\" | \"certificates\" | \"channels\" | \"charttype\" | \"contacts\" | \"coursecategories\" | \"courses-small\" | \"courseselection\" | \"currencies\" | \"customapps\" | \"customforms\" | \"days\" | \"entitycomments\" | \"environnement\" | \"feedsComments\" | \"filesFolders\" | \"folders\" | \"formfield\" | \"giphy\" | \"googlemaps\" | \"hashtags\" | \"icons\" | \"language\" | \"lessondescriptions\" | \"liveshoppings\" | \"locationsaudience\" | \"locationspublic\" | \"markas\" | \"mediacapturedevices\" | \"memolist\" | \"missiondatas\" | \"missiondescriptioncategories\" | \"missiondescriptionreviewhistories\" | \"missionfield\" | \"notes\" | \"notifications\" | \"photos\" | \"productbatchlist\" | \"productweightpair\" | \"publicAPITokens\" | \"questionsAnswers\" | \"regex\" | \"reporttemplates\" | \"reviewapps\" | \"salesdata\" | \"scorms\" | \"scormcloud\" | \"slots\" | \"tableauShared\" | \"tagGroups\" | \"topusers\" | \"unsplash\" | \"useraudience\" | \"userlearningmanager\" | \"usercourseinfo\" | \"violetproducts\" | \"violetproductofferskus\" | \"violetbasketitems\" | \"violetshippingmethods\" | \"version\" | \"videocallusers\" | \"visits\" | \"waitlistvisit\" | \"waitlistcustomer\" | \"waitliststats\" | \"plansorlessons\" | \"widgets\"",
+        "resolved": "\"aisles\" | \"community\" | \"courses\" | \"dashboards\" | \"operations\" | \"pages\" | \"questions\" | \"scoring\" | \"tableau\" | \"tag\" | \"user\" | \"weekdays\" | \"campaignfilters\" | \"channel\" | \"communities\" | \"custommodels\" | \"geofilters\" | \"hierarchy\" | \"incentives\" | \"locationtypes\" | \"plans\" | \"translations\" | \"aclRole\" | \"blog\" | \"emails\" | \"feeds\" | \"files\" | \"groups\" | \"htmltemplates\" | \"lessons\" | \"locations\" | \"memos\" | \"missiondescriptions\" | \"missiondescriptiontemplates\" | \"missions\" | \"productbatch\" | \"products\" | \"tenants\" | \"userranks\" | \"users\" | \"type\" | \"aclPermission\" | \"aclPermissionList\" | \"aislelist\" | \"algorithm\" | \"apps\" | \"arexperience\" | \"armodel\" | \"audiences\" | \"badges\" | \"broadcasts\" | \"calendarEvents\" | \"creationtypes\" | \"catalogs\" | \"certificates\" | \"channels\" | \"charttype\" | \"contacts\" | \"coursecategories\" | \"courses-small\" | \"courseselection\" | \"currencies\" | \"customapps\" | \"customforms\" | \"days\" | \"entitycomments\" | \"environnement\" | \"feedsComments\" | \"filesFolders\" | \"folders\" | \"formfield\" | \"giphy\" | \"googlemaps\" | \"hashtags\" | \"icons\" | \"journeys\" | \"language\" | \"lessondescriptions\" | \"liveshoppings\" | \"locationsaudience\" | \"locationspublic\" | \"markas\" | \"mediacapturedevices\" | \"memolist\" | \"missiondatas\" | \"missiondescriptioncategories\" | \"missiondescriptionreviewhistories\" | \"missionfield\" | \"notes\" | \"notifications\" | \"photos\" | \"productbatchlist\" | \"productweightpair\" | \"publicAPITokens\" | \"questionsAnswers\" | \"regex\" | \"reporttemplates\" | \"reviewapps\" | \"salesdata\" | \"scorms\" | \"scormcloud\" | \"slots\" | \"tableauShared\" | \"tagGroups\" | \"topusers\" | \"unsplash\" | \"useraudience\" | \"userlearningmanager\" | \"usercourseinfo\" | \"violetproducts\" | \"violetproductofferskus\" | \"violetbasketitems\" | \"violetshippingmethods\" | \"version\" | \"videocallusers\" | \"visits\" | \"waitlistvisit\" | \"waitlistcustomer\" | \"waitliststats\" | \"plansorlessons\" | \"widgets\"",
         "references": {
           "EntityType": {
             "location": "import",

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

@@ -449,7 +449,7 @@ export class YooKanbanComponent {
       "mutable": false,
       "complexType": {
         "original": "EntityType",
-        "resolved": "\"aisles\" | \"community\" | \"courses\" | \"dashboards\" | \"operations\" | \"pages\" | \"questions\" | \"scoring\" | \"tableau\" | \"tag\" | \"user\" | \"weekdays\" | \"campaignfilters\" | \"channel\" | \"communities\" | \"custommodels\" | \"geofilters\" | \"hierarchy\" | \"incentives\" | \"locationtypes\" | \"plans\" | \"translations\" | \"aclRole\" | \"blog\" | \"emails\" | \"feeds\" | \"files\" | \"groups\" | \"htmltemplates\" | \"lessons\" | \"locations\" | \"memos\" | \"missiondescriptions\" | \"missiondescriptiontemplates\" | \"missions\" | \"productbatch\" | \"products\" | \"tenants\" | \"userranks\" | \"users\" | \"type\" | \"aclPermission\" | \"aclPermissionList\" | \"aislelist\" | \"algorithm\" | \"apps\" | \"arexperience\" | \"armodel\" | \"audiences\" | \"badges\" | \"broadcasts\" | \"calendarEvents\" | \"creationtypes\" | \"catalogs\" | \"certificates\" | \"channels\" | \"charttype\" | \"contacts\" | \"coursecategories\" | \"courses-small\" | \"courseselection\" | \"currencies\" | \"customapps\" | \"customforms\" | \"days\" | \"entitycomments\" | \"environnement\" | \"feedsComments\" | \"filesFolders\" | \"folders\" | \"formfield\" | \"giphy\" | \"googlemaps\" | \"hashtags\" | \"icons\" | \"language\" | \"lessondescriptions\" | \"liveshoppings\" | \"locationsaudience\" | \"locationspublic\" | \"markas\" | \"mediacapturedevices\" | \"memolist\" | \"missiondatas\" | \"missiondescriptioncategories\" | \"missiondescriptionreviewhistories\" | \"missionfield\" | \"notes\" | \"notifications\" | \"photos\" | \"productbatchlist\" | \"productweightpair\" | \"publicAPITokens\" | \"questionsAnswers\" | \"regex\" | \"reporttemplates\" | \"reviewapps\" | \"salesdata\" | \"scorms\" | \"scormcloud\" | \"slots\" | \"tableauShared\" | \"tagGroups\" | \"topusers\" | \"unsplash\" | \"useraudience\" | \"userlearningmanager\" | \"usercourseinfo\" | \"violetproducts\" | \"violetproductofferskus\" | \"violetbasketitems\" | \"violetshippingmethods\" | \"version\" | \"videocallusers\" | \"visits\" | \"waitlistvisit\" | \"waitlistcustomer\" | \"waitliststats\" | \"plansorlessons\" | \"widgets\"",
+        "resolved": "\"aisles\" | \"community\" | \"courses\" | \"dashboards\" | \"operations\" | \"pages\" | \"questions\" | \"scoring\" | \"tableau\" | \"tag\" | \"user\" | \"weekdays\" | \"campaignfilters\" | \"channel\" | \"communities\" | \"custommodels\" | \"geofilters\" | \"hierarchy\" | \"incentives\" | \"locationtypes\" | \"plans\" | \"translations\" | \"aclRole\" | \"blog\" | \"emails\" | \"feeds\" | \"files\" | \"groups\" | \"htmltemplates\" | \"lessons\" | \"locations\" | \"memos\" | \"missiondescriptions\" | \"missiondescriptiontemplates\" | \"missions\" | \"productbatch\" | \"products\" | \"tenants\" | \"userranks\" | \"users\" | \"type\" | \"aclPermission\" | \"aclPermissionList\" | \"aislelist\" | \"algorithm\" | \"apps\" | \"arexperience\" | \"armodel\" | \"audiences\" | \"badges\" | \"broadcasts\" | \"calendarEvents\" | \"creationtypes\" | \"catalogs\" | \"certificates\" | \"channels\" | \"charttype\" | \"contacts\" | \"coursecategories\" | \"courses-small\" | \"courseselection\" | \"currencies\" | \"customapps\" | \"customforms\" | \"days\" | \"entitycomments\" | \"environnement\" | \"feedsComments\" | \"filesFolders\" | \"folders\" | \"formfield\" | \"giphy\" | \"googlemaps\" | \"hashtags\" | \"icons\" | \"journeys\" | \"language\" | \"lessondescriptions\" | \"liveshoppings\" | \"locationsaudience\" | \"locationspublic\" | \"markas\" | \"mediacapturedevices\" | \"memolist\" | \"missiondatas\" | \"missiondescriptioncategories\" | \"missiondescriptionreviewhistories\" | \"missionfield\" | \"notes\" | \"notifications\" | \"photos\" | \"productbatchlist\" | \"productweightpair\" | \"publicAPITokens\" | \"questionsAnswers\" | \"regex\" | \"reporttemplates\" | \"reviewapps\" | \"salesdata\" | \"scorms\" | \"scormcloud\" | \"slots\" | \"tableauShared\" | \"tagGroups\" | \"topusers\" | \"unsplash\" | \"useraudience\" | \"userlearningmanager\" | \"usercourseinfo\" | \"violetproducts\" | \"violetproductofferskus\" | \"violetbasketitems\" | \"violetshippingmethods\" | \"version\" | \"videocallusers\" | \"visits\" | \"waitlistvisit\" | \"waitlistcustomer\" | \"waitliststats\" | \"plansorlessons\" | \"widgets\"",
         "references": {
           "EntityType": {
             "location": "import",

package/dist/collection/feature-communicate/feed/card-feed/default/card-feed.js

@@ -233,7 +233,7 @@ export class YooCardFeedComponent {
   }
   renderFeedTags() {
     var _a, _b, _c;
-    return (h("div", { class: "feed-hashtags" }, (_c = (_b = (_a = this.entry) === null || _a === void 0 ? void 0 : _a.tags) === null || _b === void 0 ? void 0 : _b.map) === null || _c === void 0 ? void 0 : _c.call(_b, (a) => (a === null || a === void 0 ? void 0 : a.toLowerCase) && h("span", { class: "hashtag", innerHTML: `#${translateMulti(a).toLowerCase()} ` }))));
+    return (h("div", { class: "feed-hashtags" }, (_c = (_b = (_a = this.entry) === null || _a === void 0 ? void 0 : _a.tags) === null || _b === void 0 ? void 0 : _b.map) === null || _c === void 0 ? void 0 : _c.call(_b, (a) => (a === null || a === void 0 ? void 0 : a.toLowerCase) && h("span", { class: "hashtag", onClick: (ev) => { var _a; return this.onEmbeddedEntityClicked({ tag: a, custom: true, communityRef: (_a = this.entry.community) === null || _a === void 0 ? void 0 : _a._id }, 'feeds', ev); }, innerHTML: `#${translateMulti(a).toLowerCase()} ` }))));
   }
   renderTopActions() {
     return (h("div", { class: "info-feed" }, this.entry.topActions.map((a) => (h("span", { onClick: (ev) => execHandlerAndStopEvent(ev, a.handler) }, a.text)))));

package/dist/collection/feature-communicate/feed/user-wizard/user-wizard.js

@@ -8,6 +8,7 @@ export class YooUserWizardComponent {
     this.addIconSize = 'small';
     this.showAdd = true;
     this.isImageCard = false;
+    this.addIconUser = getSession().user;
     this.clampedItems = [];
   }
   onItemSelected(item) {
@@ -40,7 +41,8 @@ export class YooUserWizardComponent {
   }
   renderAddImageCard() {
     var _a;
-    return h("yoo-card-image", { class: "item", onClick: () => this.onItemSelected(), heading: this.addText, headingPosition: "below", icon: this.addIcon, image: { instant: false, src: (_a = getSession().user) === null || _a === void 0 ? void 0 : _a.imageData } });
+    const src = (_a = this.addIconUser) === null || _a === void 0 ? void 0 : _a.imageData;
+    return h("yoo-card-image", { class: { item: true, empty: !src }, onClick: () => this.onItemSelected(), heading: this.addText, headingPosition: "below", icon: this.addIcon, avatar: !src ? h("yoo-avatar", { user: this.addIconUser, size: "extra-large" }) : undefined, image: { instant: false, src } });
   }
   renderAddButton() {
     return this.isImageCard ? this.renderAddImageCard() : this.renderAddAvatar();
@@ -297,6 +299,27 @@ export class YooUserWizardComponent {
       },
       "attribute": "fallback-icon",
       "reflect": false
+    },
+    "addIconUser": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "IUser",
+        "resolved": "IUser",
+        "references": {
+          "IUser": {
+            "location": "import",
+            "path": "@shared/interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "defaultValue": "getSession().user"
     }
   }; }
   static get events() { return [{

package/dist/collection/feature-operate/mission/announcement-heading/announcement-heading.css

@@ -225,6 +225,25 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   --max-lines: 4;
   --line-height: initial;
 }
+:host .outer-container .progress {
+  display: flex;
+  justify-content: space-between;
+}
+:host .outer-container .progress .quick-task-progress {
+  display: flex;
+  align-items: center;
+  max-width: 12rem;
+}
+:host .outer-container .progress .quick-task-progress yoo-progress-bar {
+  --svg-width: 1rem;
+  --trail-bar-color: var(--app-color-20, rgba(90, 48, 244, 0.2));
+}
+:host .outer-container .progress .quick-task-progress yoo-truncate {
+  margin: 0 var(--spacing-08, 0.5rem);
+}
+:host .outer-container .progress .quick-task-progress yoo-truncate.app-color {
+  color: var(--app-color, #5a30f4);
+}
 :host .outer-container .tags yoo-tag {
   margin-right: var(--spacing-08, 0.5rem);
   margin-bottom: var(--spacing-08, 0.5rem);
@@ -233,10 +252,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   margin-bottom: var(--spacing-08, 0.5rem);
   border-bottom: 1px solid var(--announcement-color);
 }
-:host .outer-container .progress {
-  display: flex;
-  justify-content: space-between;
-}
 
 :host(.feed) {
   display: flex;

package/dist/collection/feature-operate/mission/announcement-heading/announcement-heading.js

@@ -1,6 +1,6 @@
 import { dateFormat, fromToday, getCssColor, getMissionPublicationDate, isDateAfter, isPresent, isToday, translate, translateMulti } from '@shared/utils';
 import { Component, h, Host, Prop } from '@stencil/core';
-import { getMissionDueDate } from '../../../feature-operate/mission/helpers/missions-helpers';
+import { getMissionDueDate, getMissionProgress } from '../../../feature-operate/mission/helpers/missions-helpers';
 import { execHandlerAndStopEvent } from '../../../utils/helpers/common-helpers';
 import { MissionLockedBanner } from '../mission-locked-banner/mission-locked-banner';
 export class YooAnnouncementHeadingComponent {
@@ -64,6 +64,18 @@ export class YooAnnouncementHeadingComponent {
       return this.renderTag(translate((_b = this.announcement.category) === null || _b === void 0 ? void 0 : _b.title), 'tag', this.isLayoutFeed && this.hasPhotos ? getCssColor('light') : null);
     }
   }
+  renderAnnouncementProgress() {
+    var _a, _b;
+    const announcementProgress = getMissionProgress(this.announcement);
+    const renderProgress = ((_b = (_a = this.announcement.todo) === null || _a === void 0 ? void 0 : _a.values) === null || _b === void 0 ? void 0 : _b.length) > 0;
+    if ((announcementProgress === null || announcementProgress === void 0 ? void 0 : announcementProgress.value) >= 0 && renderProgress) {
+      return h("div", { class: "progress" },
+        h("div", { class: "quick-task-progress" },
+          h("yoo-progress-bar", { class: "app-color", shape: "circle", hideProgressValue: true, value: announcementProgress.value, metric: announcementProgress.unit, maxValue: announcementProgress.max }),
+          h("yoo-truncate", { class: "app-color", style: { cssText: '--max-lines: 1' } },
+            h("span", null, translate('ACTIONSCOMPLETED', { smart_count: announcementProgress.value, total: announcementProgress.max })))));
+    }
+  }
   renderDueDate(dueDate) {
     let dateText = isToday(dueDate) ? translate('YOOBICTODAY').toLowerCase() : fromToday(dueDate);
     dateText = [translate('YOOBICYESTERDAY'), translate('YOOBICTOMORROW')].includes(dateText) ? dateText.toLowerCase() : dateText;
@@ -76,6 +88,7 @@ export class YooAnnouncementHeadingComponent {
     return [
       h("div", { class: "title" },
         h("yoo-truncate", null, translateMulti(this.announcement.title))),
+      this.renderAnnouncementProgress(),
       h("div", { class: "tags" },
         this.isLayoutFeed && dueDate && this.renderDueDate(dueDate),
         !this.isLayoutFeed && this.renderPublicationDate(),

package/dist/collection/feature-operate/mission/helpers/missions-helpers.js

@@ -60,8 +60,8 @@ export function getMissionDate(mission, isOngoing) {
 }
 export function getMissionProgress(mission, forceProgressDisplay) {
   var _a, _b;
-  const isActionPlanWithTodos = !!((_b = (_a = mission === null || mission === void 0 ? void 0 : mission.todo) === null || _a === void 0 ? void 0 : _a.values) === null || _b === void 0 ? void 0 : _b.length) && isMissionActionPlan(mission);
-  if (isActionPlanWithTodos && (!isMissionDone(mission) || forceProgressDisplay)) {
+  const isTodoMissionWithTodos = !!((_b = (_a = mission === null || mission === void 0 ? void 0 : mission.todo) === null || _a === void 0 ? void 0 : _a.values) === null || _b === void 0 ? void 0 : _b.length) && isMissionActionPlan(mission);
+  if (isTodoMissionWithTodos && (!isMissionDone(mission) || forceProgressDisplay)) {
     return {
       value: mission.todo.values.filter((todo) => { var _a, _b; return ((_a = todo.finished) === null || _a === void 0 ? void 0 : _a.value) === true || ((_b = todo.finished) === null || _b === void 0 ? void 0 : _b.value) === false; }).length,
       max: mission.todo.values.length,

package/dist/collection/feature-operate/mission/mission-heading/mission-heading.css

@@ -241,11 +241,11 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host .sub-heading .action-plan-progress {
   display: flex;
   align-items: center;
-  max-width: 11rem;
-  margin-right: var(--spacing-08, 0.5rem);
+  max-width: 12rem;
 }
 :host .sub-heading .action-plan-progress yoo-progress-bar {
-  width: var(--spacing-16, 1rem);
+  --svg-width: 1rem;
+  --trail-bar-color: var(--app-color-20, rgba(90, 48, 244, 0.2));
 }
 :host .sub-heading .action-plan-progress yoo-truncate {
   margin: 0 var(--spacing-08, 0.5rem);

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

@@ -210,7 +210,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   --dfNodeTypeFloat: none;
   --dfNodeBackgroundColor: rgba(255, 255, 255, 1);
   --dfNodeTextColor: #000000;
-  --dfNodeBorderSize: 4px;
+  --dfNodeBorderSize: 0.125rem;
   --dfNodeBorderColor: rgba(90, 48, 244, 1);
   --dfNodeBorderRadius: 16px;
   --dfNodeMinHeight: 40px;
@@ -224,7 +224,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   --dfNodeBoxShadowColor: rgba(0, 0, 0, 0.1);
   --dfNodeHoverBackgroundColor: rgba(90, 48, 244, 0.2);
   --dfNodeHoverTextColor: #000000;
-  --dfNodeHoverBorderSize: 4px;
+  --dfNodeHoverBorderSize: 0.125rem;
   --dfNodeHoverBorderColor: rgba(90, 48, 244, 1);
   --dfNodeHoverBorderRadius: 16px;
   --dfNodeHoverBoxShadowHL: 0px;
@@ -234,7 +234,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   --dfNodeHoverBoxShadowColor: rgba(0, 0, 0, 0.1);
   --dfNodeSelectedBackgroundColor: rgba(90, 48, 244, 1);
   --dfNodeSelectedTextColor: #ffffff;
-  --dfNodeSelectedBorderSize: 4px;
+  --dfNodeSelectedBorderSize: 0.125rem;
   --dfNodeSelectedBorderColor: rgba(90, 48, 244, 1);
   --dfNodeSelectedBorderRadius: 16px;
   --dfNodeSelectedBoxShadowHL: 0px;
@@ -243,18 +243,18 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   --dfNodeSelectedBoxShadowS: 2px;
   --dfNodeSelectedBoxShadowColor: rgba(0, 0, 0, 0.1);
   --dfInputBackgroundColor: rgba(90, 48, 244, 1);
-  --dfInputBorderSize: 4px;
+  --dfInputBorderSize: 0.125rem;
   --dfInputBorderColor: rgba(255, 255, 255, 1);
   --dfInputBorderRadius: 50px;
   --dfInputLeft: -26px;
   --dfInputHeight: 20px;
   --dfInputWidth: 20px;
   --dfInputHoverBackgroundColor: rgba(255, 255, 255, 1);
-  --dfInputHoverBorderSize: 4px;
+  --dfInputHoverBorderSize: 0.125rem;
   --dfInputHoverBorderColor: rgba(0, 0, 0, 1);
   --dfInputHoverBorderRadius: 50px;
   --dfOutputBackgroundColor: #ffffff;
-  --dfOutputBorderSize: 4px;
+  --dfOutputBorderSize: 0.125rem;
   --dfOutputBorderColor: rgba(90, 48, 244, 1);
   --dfOutputBorderRadius: 50px;
   --dfOutputRight: -6px;
@@ -289,6 +289,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 
 .drawflow-container {
+  position: relative;
   display: flex;
   flex: 1;
   flex-direction: column;
@@ -319,11 +320,9 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 .drawflow-container .drawflow .drawflow-node.selected {
   color: var(--dfNodeSelectedTextColor);
-  background: var(--dfNodeSelectedBackgroundColor);
-  border: var(--dfNodeSelectedBorderSize) solid var(--dfNodeSelectedBorderColor);
+  border: var(--dfNodeSelectedBorderSize) solid var(--dfNodeSelectedBackgroundColor);
   border-radius: var(--dfNodeSelectedBorderRadius);
-  -webkit-box-shadow: var(--dfNodeSelectedBoxShadowHL) var(--dfNodeSelectedBoxShadowVL) var(--dfNodeSelectedBoxShadowBR) var(--dfNodeSelectedBoxShadowS) var(--dfNodeSelectedBoxShadowColor);
-  box-shadow: var(--dfNodeSelectedBoxShadowHL) var(--dfNodeSelectedBoxShadowVL) var(--dfNodeSelectedBoxShadowBR) var(--dfNodeSelectedBoxShadowS) var(--dfNodeSelectedBoxShadowColor);
+  box-shadow: var(--shadow-04, 0 0.75rem 1.5rem 0 rgba(0, 0, 0, 0.1));
 }
 .drawflow-container .drawflow .drawflow-node .input {
   left: var(--dfInputLeft);
@@ -355,8 +354,8 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   border-radius: var(--dfOutputHoverBorderRadius);
 }
 .drawflow-container .drawflow .connection .main-path {
-  stroke-width: var(--dfLineWidth);
   stroke: var(--dfLineColor);
+  stroke-width: var(--dfLineWidth);
 }
 .drawflow-container .drawflow .connection .main-path:hover {
   stroke: var(--dfLineHoverColor);
@@ -376,6 +375,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 .drawflow-container .drawflow-delete {
   display: var(--dfDeleteDisplay);
+  box-sizing: content-box;
   color: var(--dfDeleteColor);
   background: var(--dfDeleteBackgroundColor);
   border: var(--dfDeleteBorderSize) solid var(--dfDeleteBorderColor);
@@ -419,136 +419,215 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 .drawflow-container .outer-container .drawflow .drawflow-node {
   border-color: var(--accent, #276ef1);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.multimedia, .drawflow-container .outer-container .drawflow .drawflow-node.learn, .drawflow-container .outer-container .drawflow .drawflow-node.uiactions {
+.drawflow-container .outer-container .drawflow .drawflow-node.multimedia, .drawflow-container .outer-container .drawflow .drawflow-node.learn, .drawflow-container .outer-container .drawflow .drawflow-node.uiactions, .drawflow-container .outer-container .drawflow .drawflow-node.action {
   border-color: var(--info, #d84c96);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.select, .drawflow-container .outer-container .drawflow .drawflow-node.events, .drawflow-container .outer-container .drawflow .drawflow-node.dataevents {
-  border-color: var(--accent, #276ef1);
+.drawflow-container .outer-container .drawflow .drawflow-node.multimedia.selected, .drawflow-container .outer-container .drawflow .drawflow-node.learn.selected, .drawflow-container .outer-container .drawflow .drawflow-node.uiactions.selected, .drawflow-container .outer-container .drawflow .drawflow-node.action.selected {
+  background: var(--info, #d84c96);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.textcategory {
-  border-color: var(--energized, #ffc043);
+.drawflow-container .outer-container .drawflow .drawflow-node.multimedia:hover, .drawflow-container .outer-container .drawflow .drawflow-node.learn:hover, .drawflow-container .outer-container .drawflow .drawflow-node.uiactions:hover, .drawflow-container .outer-container .drawflow .drawflow-node.action:hover {
+  background: var(--info-20, rgba(216, 76, 150, 0.2));
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.number, .drawflow-container .outer-container .drawflow .drawflow-node.appcreatorapp, .drawflow-container .outer-container .drawflow .drawflow-node.customfield {
-  border-color: var(--app-color, #5a30f4);
+.drawflow-container .outer-container .drawflow .drawflow-node.multimedia .input, .drawflow-container .outer-container .drawflow .drawflow-node.learn .input, .drawflow-container .outer-container .drawflow .drawflow-node.uiactions .input, .drawflow-container .outer-container .drawflow .drawflow-node.action .input {
+  background: var(--info, #d84c96);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.contactdetail, .drawflow-container .outer-container .drawflow .drawflow-node.engage, .drawflow-container .outer-container .drawflow .drawflow-node.information, .drawflow-container .outer-container .drawflow .drawflow-node.nativeactions {
-  border-color: var(--warning, #ed6e33);
+.drawflow-container .outer-container .drawflow .drawflow-node.multimedia .output, .drawflow-container .outer-container .drawflow .drawflow-node.learn .output, .drawflow-container .outer-container .drawflow .drawflow-node.uiactions .output, .drawflow-container .outer-container .drawflow .drawflow-node.action .output {
+  border-color: var(--info, #d84c96);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.no-scoring {
-  border-color: var(--text-color, #807f83);
+.drawflow-container .outer-container .drawflow .drawflow-node.select, .drawflow-container .outer-container .drawflow .drawflow-node.events, .drawflow-container .outer-container .drawflow .drawflow-node.dataevents, .drawflow-container .outer-container .drawflow .drawflow-node.trigger {
+  border-color: var(--accent, #276ef1);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.actioncategory, .drawflow-container .outer-container .drawflow .drawflow-node.logic {
-  border-color: var(--anthracite, #1a1a1a);
+.drawflow-container .outer-container .drawflow .drawflow-node.select.selected, .drawflow-container .outer-container .drawflow .drawflow-node.events.selected, .drawflow-container .outer-container .drawflow .drawflow-node.dataevents.selected, .drawflow-container .outer-container .drawflow .drawflow-node.trigger.selected {
+  color: var(--light, #ffffff);
+  background: var(--accent, #276ef1);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.dateandtime {
-  border-color: var(--dark, #000000);
+.drawflow-container .outer-container .drawflow .drawflow-node.select.selected yoo-icon, .drawflow-container .outer-container .drawflow .drawflow-node.events.selected yoo-icon, .drawflow-container .outer-container .drawflow .drawflow-node.dataevents.selected yoo-icon, .drawflow-container .outer-container .drawflow .drawflow-node.trigger.selected yoo-icon {
+  fill: var(--light, #ffffff);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.catalogandbarcode, .drawflow-container .outer-container .drawflow .drawflow-node.notifications {
-  border-color: var(--danger, #d44333);
+.drawflow-container .outer-container .drawflow .drawflow-node.select:hover, .drawflow-container .outer-container .drawflow .drawflow-node.events:hover, .drawflow-container .outer-container .drawflow .drawflow-node.dataevents:hover, .drawflow-container .outer-container .drawflow .drawflow-node.trigger:hover {
+  background: var(--accent-20, rgba(39, 110, 241, 0.2));
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.condition {
-  border-color: var(--stable, #adadad);
+.drawflow-container .outer-container .drawflow .drawflow-node.select .input, .drawflow-container .outer-container .drawflow .drawflow-node.events .input, .drawflow-container .outer-container .drawflow .drawflow-node.dataevents .input, .drawflow-container .outer-container .drawflow .drawflow-node.trigger .input {
+  background: var(--accent, #276ef1);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.page, .drawflow-container .outer-container .drawflow .drawflow-node.dataactions, .drawflow-container .outer-container .drawflow .drawflow-node.operate {
-  border-color: var(--success, #3aa76d);
+.drawflow-container .outer-container .drawflow .drawflow-node.select .output, .drawflow-container .outer-container .drawflow .drawflow-node.events .output, .drawflow-container .outer-container .drawflow .drawflow-node.dataevents .output, .drawflow-container .outer-container .drawflow .drawflow-node.trigger .output {
+  border-color: var(--accent, #276ef1);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.lesson, .drawflow-container .outer-container .drawflow .drawflow-node.boostcontent {
-  border-color: var(--app-color, #5a30f4);
+.drawflow-container .outer-container .drawflow .drawflow-node.textcategory, .drawflow-container .outer-container .drawflow .drawflow-node.condition {
+  border-color: var(--energized, #ffc043);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.uiactions {
-  border-color: var(--info, #d84c96);
+.drawflow-container .outer-container .drawflow .drawflow-node.textcategory.selected, .drawflow-container .outer-container .drawflow .drawflow-node.condition.selected {
+  color: var(--dark, #000000);
+  background: var(--energized, #ffc043);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.uiactions.selected {
-  background: var(--info, #d84c96);
+.drawflow-container .outer-container .drawflow .drawflow-node.textcategory:hover, .drawflow-container .outer-container .drawflow .drawflow-node.condition:hover {
+  background: var(--energized-20, rgba(255, 192, 67, 0.2));
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.uiactions:hover {
-  background: var(--info-20, rgba(216, 76, 150, 0.2));
+.drawflow-container .outer-container .drawflow .drawflow-node.textcategory .input, .drawflow-container .outer-container .drawflow .drawflow-node.condition .input {
+  background: var(--energized, #ffc043);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.uiactions .input {
-  background: var(--info, #d84c96);
+.drawflow-container .outer-container .drawflow .drawflow-node.textcategory .output, .drawflow-container .outer-container .drawflow .drawflow-node.condition .output {
+  border-color: var(--energized, #ffc043);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.uiactions .output {
-  border-color: var(--info, #d84c96);
+.drawflow-container .outer-container .drawflow .drawflow-node.number, .drawflow-container .outer-container .drawflow .drawflow-node.appcreatorapp, .drawflow-container .outer-container .drawflow .drawflow-node.customfield, .drawflow-container .outer-container .drawflow .drawflow-node.lesson, .drawflow-container .outer-container .drawflow .drawflow-node.boostcontent {
+  border-color: var(--app-color, #5a30f4);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.events, .drawflow-container .outer-container .drawflow .drawflow-node.dataevents {
-  border-color: var(--accent, #276ef1);
+.drawflow-container .outer-container .drawflow .drawflow-node.number.selected, .drawflow-container .outer-container .drawflow .drawflow-node.appcreatorapp.selected, .drawflow-container .outer-container .drawflow .drawflow-node.customfield.selected, .drawflow-container .outer-container .drawflow .drawflow-node.lesson.selected, .drawflow-container .outer-container .drawflow .drawflow-node.boostcontent.selected {
+  color: var(--light, #ffffff);
+  background: var(--app-color, #5a30f4);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.events.selected, .drawflow-container .outer-container .drawflow .drawflow-node.dataevents.selected {
-  background: var(--accent, #276ef1);
+.drawflow-container .outer-container .drawflow .drawflow-node.number.selected yoo-icon, .drawflow-container .outer-container .drawflow .drawflow-node.appcreatorapp.selected yoo-icon, .drawflow-container .outer-container .drawflow .drawflow-node.customfield.selected yoo-icon, .drawflow-container .outer-container .drawflow .drawflow-node.lesson.selected yoo-icon, .drawflow-container .outer-container .drawflow .drawflow-node.boostcontent.selected yoo-icon {
+  fill: var(--light, #ffffff);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.events:hover, .drawflow-container .outer-container .drawflow .drawflow-node.dataevents:hover {
-  background: var(--accent-20, rgba(39, 110, 241, 0.2));
+.drawflow-container .outer-container .drawflow .drawflow-node.number:hover, .drawflow-container .outer-container .drawflow .drawflow-node.appcreatorapp:hover, .drawflow-container .outer-container .drawflow .drawflow-node.customfield:hover, .drawflow-container .outer-container .drawflow .drawflow-node.lesson:hover, .drawflow-container .outer-container .drawflow .drawflow-node.boostcontent:hover {
+  background: var(--app-color-20, rgba(90, 48, 244, 0.2));
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.events .input, .drawflow-container .outer-container .drawflow .drawflow-node.dataevents .input {
-  background: var(--accent, #276ef1);
+.drawflow-container .outer-container .drawflow .drawflow-node.number .input, .drawflow-container .outer-container .drawflow .drawflow-node.appcreatorapp .input, .drawflow-container .outer-container .drawflow .drawflow-node.customfield .input, .drawflow-container .outer-container .drawflow .drawflow-node.lesson .input, .drawflow-container .outer-container .drawflow .drawflow-node.boostcontent .input {
+  background: var(--app-color, #5a30f4);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.events .output, .drawflow-container .outer-container .drawflow .drawflow-node.dataevents .output {
-  border-color: var(--accent, #276ef1);
+.drawflow-container .outer-container .drawflow .drawflow-node.number .output, .drawflow-container .outer-container .drawflow .drawflow-node.appcreatorapp .output, .drawflow-container .outer-container .drawflow .drawflow-node.customfield .output, .drawflow-container .outer-container .drawflow .drawflow-node.lesson .output, .drawflow-container .outer-container .drawflow .drawflow-node.boostcontent .output {
+  border-color: var(--app-color, #5a30f4);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.nativeactions {
+.drawflow-container .outer-container .drawflow .drawflow-node.contactdetail, .drawflow-container .outer-container .drawflow .drawflow-node.engage, .drawflow-container .outer-container .drawflow .drawflow-node.information, .drawflow-container .outer-container .drawflow .drawflow-node.nativeactions, .drawflow-container .outer-container .drawflow .drawflow-node.entity, .drawflow-container .outer-container .drawflow .drawflow-node.notification {
   border-color: var(--warning, #ed6e33);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.nativeactions.selected {
+.drawflow-container .outer-container .drawflow .drawflow-node.contactdetail.selected, .drawflow-container .outer-container .drawflow .drawflow-node.engage.selected, .drawflow-container .outer-container .drawflow .drawflow-node.information.selected, .drawflow-container .outer-container .drawflow .drawflow-node.nativeactions.selected, .drawflow-container .outer-container .drawflow .drawflow-node.entity.selected, .drawflow-container .outer-container .drawflow .drawflow-node.notification.selected {
+  color: var(--light, #ffffff);
   background: var(--warning, #ed6e33);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.nativeactions:hover {
+.drawflow-container .outer-container .drawflow .drawflow-node.contactdetail.selected yoo-icon, .drawflow-container .outer-container .drawflow .drawflow-node.engage.selected yoo-icon, .drawflow-container .outer-container .drawflow .drawflow-node.information.selected yoo-icon, .drawflow-container .outer-container .drawflow .drawflow-node.nativeactions.selected yoo-icon, .drawflow-container .outer-container .drawflow .drawflow-node.entity.selected yoo-icon, .drawflow-container .outer-container .drawflow .drawflow-node.notification.selected yoo-icon {
+  fill: var(--light, #ffffff);
+}
+.drawflow-container .outer-container .drawflow .drawflow-node.contactdetail:hover, .drawflow-container .outer-container .drawflow .drawflow-node.engage:hover, .drawflow-container .outer-container .drawflow .drawflow-node.information:hover, .drawflow-container .outer-container .drawflow .drawflow-node.nativeactions:hover, .drawflow-container .outer-container .drawflow .drawflow-node.entity:hover, .drawflow-container .outer-container .drawflow .drawflow-node.notification:hover {
   background: var(--warning-20, rgba(237, 110, 51, 0.2));
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.nativeactions .input {
+.drawflow-container .outer-container .drawflow .drawflow-node.contactdetail .input, .drawflow-container .outer-container .drawflow .drawflow-node.engage .input, .drawflow-container .outer-container .drawflow .drawflow-node.information .input, .drawflow-container .outer-container .drawflow .drawflow-node.nativeactions .input, .drawflow-container .outer-container .drawflow .drawflow-node.entity .input, .drawflow-container .outer-container .drawflow .drawflow-node.notification .input {
   background: var(--warning, #ed6e33);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.nativeactions .output {
+.drawflow-container .outer-container .drawflow .drawflow-node.contactdetail .output, .drawflow-container .outer-container .drawflow .drawflow-node.engage .output, .drawflow-container .outer-container .drawflow .drawflow-node.information .output, .drawflow-container .outer-container .drawflow .drawflow-node.nativeactions .output, .drawflow-container .outer-container .drawflow .drawflow-node.entity .output, .drawflow-container .outer-container .drawflow .drawflow-node.notification .output {
   border-color: var(--warning, #ed6e33);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.logic {
+.drawflow-container .outer-container .drawflow .drawflow-node.no-scoring {
+  border-color: var(--text-color, #807f83);
+}
+.drawflow-container .outer-container .drawflow .drawflow-node.no-scoring.selected {
+  color: var(--dark, #000000);
+  background: var(--text-color, #807f83);
+}
+.drawflow-container .outer-container .drawflow .drawflow-node.no-scoring:hover {
+  background: var(--text-color-20, rgba(128, 127, 131, 0.2));
+}
+.drawflow-container .outer-container .drawflow .drawflow-node.no-scoring .input {
+  background: var(--text-color, #807f83);
+}
+.drawflow-container .outer-container .drawflow .drawflow-node.no-scoring .output {
+  border-color: var(--text-color, #807f83);
+}
+.drawflow-container .outer-container .drawflow .drawflow-node.actioncategory, .drawflow-container .outer-container .drawflow .drawflow-node.logic {
   border-color: var(--anthracite, #1a1a1a);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.logic.selected {
+.drawflow-container .outer-container .drawflow .drawflow-node.actioncategory.selected, .drawflow-container .outer-container .drawflow .drawflow-node.logic.selected {
+  color: var(--light, #ffffff);
   background: var(--anthracite, #1a1a1a);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.logic:hover {
+.drawflow-container .outer-container .drawflow .drawflow-node.actioncategory.selected yoo-icon, .drawflow-container .outer-container .drawflow .drawflow-node.logic.selected yoo-icon {
+  fill: var(--light, #ffffff);
+}
+.drawflow-container .outer-container .drawflow .drawflow-node.actioncategory:hover, .drawflow-container .outer-container .drawflow .drawflow-node.logic:hover {
   background: var(--anthracite-20, rgba(26, 26, 26, 0.2));
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.logic .input {
+.drawflow-container .outer-container .drawflow .drawflow-node.actioncategory .input, .drawflow-container .outer-container .drawflow .drawflow-node.logic .input {
   background: var(--anthracite, #1a1a1a);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.logic .output {
+.drawflow-container .outer-container .drawflow .drawflow-node.actioncategory .output, .drawflow-container .outer-container .drawflow .drawflow-node.logic .output {
   border-color: var(--anthracite, #1a1a1a);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.notifications {
+.drawflow-container .outer-container .drawflow .drawflow-node.dateandtime, .drawflow-container .outer-container .drawflow .drawflow-node.waitfor {
+  border-color: var(--dark, #000000);
+}
+.drawflow-container .outer-container .drawflow .drawflow-node.dateandtime.selected, .drawflow-container .outer-container .drawflow .drawflow-node.waitfor.selected {
+  color: var(--light, #ffffff);
+  background: var(--dark, #000000);
+}
+.drawflow-container .outer-container .drawflow .drawflow-node.dateandtime.selected yoo-icon, .drawflow-container .outer-container .drawflow .drawflow-node.waitfor.selected yoo-icon {
+  fill: var(--light, #ffffff);
+}
+.drawflow-container .outer-container .drawflow .drawflow-node.dateandtime:hover, .drawflow-container .outer-container .drawflow .drawflow-node.waitfor:hover {
+  background: var(--dark-20, rgba(0, 0, 0, 0.2));
+}
+.drawflow-container .outer-container .drawflow .drawflow-node.dateandtime .input, .drawflow-container .outer-container .drawflow .drawflow-node.waitfor .input {
+  background: var(--dark, #000000);
+}
+.drawflow-container .outer-container .drawflow .drawflow-node.dateandtime .output, .drawflow-container .outer-container .drawflow .drawflow-node.waitfor .output {
+  border-color: var(--dark, #000000);
+}
+.drawflow-container .outer-container .drawflow .drawflow-node.catalogandbarcode, .drawflow-container .outer-container .drawflow .drawflow-node.notifications {
   border-color: var(--danger, #d44333);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.notifications.selected {
+.drawflow-container .outer-container .drawflow .drawflow-node.catalogandbarcode.selected, .drawflow-container .outer-container .drawflow .drawflow-node.notifications.selected {
+  color: var(--light, #ffffff);
   background: var(--danger, #d44333);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.notifications:hover {
+.drawflow-container .outer-container .drawflow .drawflow-node.catalogandbarcode.selected yoo-icon, .drawflow-container .outer-container .drawflow .drawflow-node.notifications.selected yoo-icon {
+  fill: var(--light, #ffffff);
+}
+.drawflow-container .outer-container .drawflow .drawflow-node.catalogandbarcode:hover, .drawflow-container .outer-container .drawflow .drawflow-node.notifications:hover {
   background: var(--danger-20, rgba(212, 67, 51, 0.2));
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.notifications .input {
+.drawflow-container .outer-container .drawflow .drawflow-node.catalogandbarcode .input, .drawflow-container .outer-container .drawflow .drawflow-node.notifications .input {
   background: var(--danger, #d44333);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.notifications .output {
+.drawflow-container .outer-container .drawflow .drawflow-node.catalogandbarcode .output, .drawflow-container .outer-container .drawflow .drawflow-node.notifications .output {
   border-color: var(--danger, #d44333);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.dataactions {
+.drawflow-container .outer-container .drawflow .drawflow-node.condition {
+  border-color: var(--stable, #adadad);
+}
+.drawflow-container .outer-container .drawflow .drawflow-node.condition.selected {
+  color: var(--dark, #000000);
+  background: var(--stable, #adadad);
+}
+.drawflow-container .outer-container .drawflow .drawflow-node.condition:hover {
+  background: var(--stable-20, rgba(173, 173, 173, 0.2));
+}
+.drawflow-container .outer-container .drawflow .drawflow-node.condition .input {
+  background: var(--stable, #adadad);
+}
+.drawflow-container .outer-container .drawflow .drawflow-node.condition .output {
+  border-color: var(--stable, #adadad);
+}
+.drawflow-container .outer-container .drawflow .drawflow-node.page, .drawflow-container .outer-container .drawflow .drawflow-node.dataactions, .drawflow-container .outer-container .drawflow .drawflow-node.operate {
   border-color: var(--success, #3aa76d);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.dataactions.selected {
+.drawflow-container .outer-container .drawflow .drawflow-node.page.selected, .drawflow-container .outer-container .drawflow .drawflow-node.dataactions.selected, .drawflow-container .outer-container .drawflow .drawflow-node.operate.selected {
+  color: var(--light, #ffffff);
   background: var(--success, #3aa76d);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.dataactions:hover {
+.drawflow-container .outer-container .drawflow .drawflow-node.page.selected yoo-icon, .drawflow-container .outer-container .drawflow .drawflow-node.dataactions.selected yoo-icon, .drawflow-container .outer-container .drawflow .drawflow-node.operate.selected yoo-icon {
+  fill: var(--light, #ffffff);
+}
+.drawflow-container .outer-container .drawflow .drawflow-node.page:hover, .drawflow-container .outer-container .drawflow .drawflow-node.dataactions:hover, .drawflow-container .outer-container .drawflow .drawflow-node.operate:hover {
   background: var(--success-20, rgba(58, 167, 109, 0.2));
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.dataactions .input {
+.drawflow-container .outer-container .drawflow .drawflow-node.page .input, .drawflow-container .outer-container .drawflow .drawflow-node.dataactions .input, .drawflow-container .outer-container .drawflow .drawflow-node.operate .input {
   background: var(--success, #3aa76d);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.dataactions .output {
+.drawflow-container .outer-container .drawflow .drawflow-node.page .output, .drawflow-container .outer-container .drawflow .drawflow-node.dataactions .output, .drawflow-container .outer-container .drawflow .drawflow-node.operate .output {
   border-color: var(--success, #3aa76d);
 }
 .drawflow-container .outer-container .drawflow .drawflow-node .title-box {
   display: flex;
-  color: var(--dark, #000000);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node .title-box yoo-icon {
+.drawflow-container .outer-container .drawflow .drawflow-node .title-box yoo-icon.margin-right {
   margin-right: var(--spacing-08, 0.5rem);
+}
+.drawflow-container .outer-container .drawflow .drawflow-node .title-box yoo-icon.margin-left {
+  margin-left: var(--spacing-08, 0.5rem);
+}
+.drawflow-container .outer-container .drawflow .drawflow-node .title-box:hover yoo-icon[name=settings] {
+  opacity: 1;
+}
+.drawflow-container .outer-container .drawflow .drawflow-node .title-box yoo-icon[name=settings] {
+  cursor: pointer;
+  opacity: 0.3;
 }