@yoobic/yobi 8.3.0-47 → 8.3.0-50

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

@@ -573,6 +573,7 @@ export class YooGridComponent {
     this.filteredItems = this.getFilteredItems();
   }
   componentDidUpdate() {
+    var _a, _b;
     this.updateSlides();
     if (!this.markersOnly) {
       this.flyToPosition();
@@ -583,7 +584,7 @@ export class YooGridComponent {
     this.onForceInputFocused();
     this.updateItemsSliding();
     if (this.infiniteScroll) {
-      this.infiniteScroll.enableScrollEvents(!this.infiniteScrollDisabled);
+      (_b = (_a = this.infiniteScroll).enableScrollEvents) === null || _b === void 0 ? void 0 : _b.call(_a, !this.infiniteScrollDisabled);
     }
   }
   connectedCallback() {
@@ -1218,7 +1219,7 @@ export class YooGridComponent {
     return false;
   }
   onItemSelect(item, checkBoxClick = false, ev) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e;
     if (this.disconnected || ((_a = this.extraClass) === null || _a === void 0 ? void 0 : _a.includes('only-allow-secondary-actions'))) {
       return;
     }
@@ -1269,6 +1270,7 @@ export class YooGridComponent {
       }
       else {
         if (isPresent(this.maxSelectionNumber) && this.maxSelectionNumber >= 0 && this.multiple && this.selection && this.selection.length >= this.maxSelectionNumber) {
+          (_e = (_d = this.gridExtraOptions) === null || _d === void 0 ? void 0 : _d.maxSelectionCallback) === null || _e === void 0 ? void 0 : _e.call(_d);
           return;
         }
         this.selection = [...this.selection, item];

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

@@ -482,7 +482,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   height: 100%;
 }
 :host(.mission-detail-deprecated) .mission-detail .scroll-spacer {
-  height: 5.75rem;
+  height: calc(var(--safe-area-inset-bottom) + 5.75rem);
 }
 :host(.mission-detail-deprecated) .mission-detail .mission-content {
   padding: 0 var(--spacing-16, 1rem) var(--spacing-16, 1rem);

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

@@ -202,9 +202,9 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 /* spacing for padding, margin, etc... */
 /* shadow */
 :host {
-  --border-size: 0.25rem;
-  --dfBackgroundColor: rgba(255, 255, 255, 1);
-  --dfBackgroundSize: 24px;
+  --border-size: 0.125rem;
+  --dfBackgroundColor: var(--stable-alt-20);
+  --dfBackgroundSize: 0.75rem;
   --dfBackgroundImage: radial-gradient(rgba(191, 191, 191, 1) 1px, transparent 1px);
   --dfNodeType: flex;
   --dfNodeTypeFloat: none;
@@ -246,9 +246,9 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   --dfInputBorderSize: var(--border-size);
   --dfInputBorderColor: rgba(255, 255, 255, 1);
   --dfInputBorderRadius: 50px;
-  --dfInputLeft: -1.875rem;
-  --dfInputHeight: 20px;
-  --dfInputWidth: 20px;
+  --dfInputLeft: -26px;
+  --dfInputHeight: 11px;
+  --dfInputWidth: 11px;
   --dfInputHoverBackgroundColor: rgba(255, 255, 255, 1);
   --dfInputHoverBorderSize: var(--border-size);
   --dfInputHoverBorderColor: rgba(0, 0, 0, 1);
@@ -257,9 +257,9 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   --dfOutputBorderSize: var(--border-size);
   --dfOutputBorderColor: rgba(90, 48, 244, 1);
   --dfOutputBorderRadius: 50px;
-  --dfOutputRight: -0.1875rem;
-  --dfOutputHeight: 20px;
-  --dfOutputWidth: 20px;
+  --dfOutputRight: -7px;
+  --dfOutputHeight: 11px;
+  --dfOutputWidth: 11px;
   --dfOutputHoverBackgroundColor: #ffffff;
   --dfOutputHoverBorderSize: var(--border-size);
   --dfOutputHoverBorderColor: #000000;
@@ -321,7 +321,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   background: var(--light, #ffffff);
 }
 :host .drawflow .drawflow-node:hover {
-  cursor: move;
+  cursor: grab;
 }
 :host .drawflow .drawflow-node .inputs,
 :host .drawflow .drawflow-node .outputs {
@@ -422,7 +422,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 :host .drawflow-container .drawflow .drawflow-node {
   display: var(--dfNodeType);
-  align-items: flex-start;
+  align-items: center;
   width: auto;
   min-width: var(--dfNodeMinWidth);
   min-height: var(--dfNodeMinHeight);
@@ -522,13 +522,21 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   justify-content: flex-end;
   padding: 1rem;
 }
-:host .drawflow-container .toolbar yoo-icon,
 :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 .toolbar .flex {
+  flex: 1;
+}
+:host .drawflow-container .toolbar .button-container {
+  display: flex;
+  padding: var(--spacing-08, 0.5rem);
+  column-gap: var(--spacing-08, 0.5rem);
+  background: var(--dark-60, rgba(0, 0, 0, 0.6));
+  border-radius: var(--spacing-04, 0.25rem);
+}
+:host .drawflow-container .toolbar .button-container yoo-icon {
+  cursor: pointer;
 }
 :host .drawflow-container .outer-container {
   flex: 1;
@@ -538,231 +546,224 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   background-image: var(--dfBackgroundImage);
   background-size: var(--dfBackgroundSize) var(--dfBackgroundSize);
 }
-:host .drawflow-container .outer-container .drawflow .parent-node .drawflow-delete {
+:host .drawflow-container .outer-container.header-container .drawflow .parent-node .drawflow-delete {
   display: flex;
   align-items: center;
   justify-content: center;
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node {
   border-color: var(--accent, #276ef1);
 }
-: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 {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.multimedia, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.learn, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.uiactions, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.action {
   border-color: var(--info, #d84c96);
 }
-: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 {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.multimedia.selected1, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.learn.selected1, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.uiactions.selected1, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.action.selected1 {
   background: var(--info, #d84c96);
 }
-: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 {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.multimedia.hover1, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.learn.hover1, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.uiactions.hover1, :host .drawflow-container .outer-container.header-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 {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.multimedia .input, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.learn .input, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.uiactions .input, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.action .input {
   background: var(--info, #d84c96);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.multimedia .output, :host .drawflow-container .outer-container .drawflow .drawflow-node.learn .output, :host .drawflow-container .outer-container .drawflow .drawflow-node.uiactions .output, :host .drawflow-container .outer-container .drawflow .drawflow-node.action .output {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.multimedia .output, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.learn .output, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.uiactions .output, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.action .output {
   border-color: var(--info, #d84c96);
 }
-: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 {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.select, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.events, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.dataevents, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.trigger {
   border-color: var(--accent, #276ef1);
 }
-: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 {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.select.selected1, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.events.selected1, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.dataevents.selected1, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.trigger.selected1 {
   color: var(--light, #ffffff);
   background: var(--accent, #276ef1);
 }
-: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 {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.select.selected1 yoo-icon, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.events.selected1 yoo-icon, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.dataevents.selected1 yoo-icon, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.trigger.selected1 yoo-icon {
   fill: var(--light, #ffffff);
 }
-: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 {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.select.hover1, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.events.hover1, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.dataevents.hover1, :host .drawflow-container .outer-container.header-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 {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.select .input, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.events .input, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.dataevents .input, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.trigger .input {
   background: var(--accent, #276ef1);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.select .output, :host .drawflow-container .outer-container .drawflow .drawflow-node.events .output, :host .drawflow-container .outer-container .drawflow .drawflow-node.dataevents .output, :host .drawflow-container .outer-container .drawflow .drawflow-node.trigger .output {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.select .output, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.events .output, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.dataevents .output, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.trigger .output {
   border-color: var(--accent, #276ef1);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.textcategory, :host .drawflow-container .outer-container .drawflow .drawflow-node.condition {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.textcategory, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.condition {
   border-color: var(--energized, #ffc043);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.textcategory.selected1, :host .drawflow-container .outer-container .drawflow .drawflow-node.condition.selected1 {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.textcategory.selected1, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.condition.selected1 {
   color: var(--dark, #000000);
   background: var(--energized, #ffc043);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.textcategory.hover1, :host .drawflow-container .outer-container .drawflow .drawflow-node.condition.hover1 {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.textcategory.hover1, :host .drawflow-container .outer-container.header-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 {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.textcategory .input, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.condition .input {
   background: var(--energized, #ffc043);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.textcategory .output, :host .drawflow-container .outer-container .drawflow .drawflow-node.condition .output {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.textcategory .output, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.condition .output {
   border-color: var(--energized, #ffc043);
 }
-: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 {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.number, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.appcreatorapp, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.customfield, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.lesson, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.boostcontent {
   border-color: var(--app-color, #5a30f4);
 }
-: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 {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.number.selected1, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.appcreatorapp.selected1, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.customfield.selected1, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.lesson.selected1, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.boostcontent.selected1 {
   color: var(--light, #ffffff);
   background: var(--app-color, #5a30f4);
 }
-: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 {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.number.selected1 yoo-icon, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.appcreatorapp.selected1 yoo-icon, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.customfield.selected1 yoo-icon, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.lesson.selected1 yoo-icon, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.boostcontent.selected1 yoo-icon {
   fill: var(--light, #ffffff);
 }
-: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 {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.number.hover1, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.appcreatorapp.hover1, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.customfield.hover1, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.lesson.hover1, :host .drawflow-container .outer-container.header-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 {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.number .input, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.appcreatorapp .input, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.customfield .input, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.lesson .input, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.boostcontent .input {
   background: var(--app-color, #5a30f4);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.number .output, :host .drawflow-container .outer-container .drawflow .drawflow-node.appcreatorapp .output, :host .drawflow-container .outer-container .drawflow .drawflow-node.customfield .output, :host .drawflow-container .outer-container .drawflow .drawflow-node.lesson .output, :host .drawflow-container .outer-container .drawflow .drawflow-node.boostcontent .output {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.number .output, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.appcreatorapp .output, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.customfield .output, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.lesson .output, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.boostcontent .output {
   border-color: var(--app-color, #5a30f4);
 }
-: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 {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.contactdetail, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.engage, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.information, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.nativeactions, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.entity, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.notification {
   border-color: var(--warning, #ed6e33);
 }
-: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 {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.contactdetail.selected1, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.engage.selected1, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.information.selected1, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.nativeactions.selected1, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.entity.selected1, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.notification.selected1 {
   color: var(--light, #ffffff);
   background: var(--warning, #ed6e33);
 }
-: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 {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.contactdetail.selected1 yoo-icon, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.engage.selected1 yoo-icon, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.information.selected1 yoo-icon, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.nativeactions.selected1 yoo-icon, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.entity.selected1 yoo-icon, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.notification.selected1 yoo-icon {
   fill: var(--light, #ffffff);
 }
-: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 {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.contactdetail.hover1, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.engage.hover1, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.information.hover1, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.nativeactions.hover1, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.entity.hover1, :host .drawflow-container .outer-container.header-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 {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.contactdetail .input, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.engage .input, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.information .input, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.nativeactions .input, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.entity .input, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.notification .input {
   background: var(--warning, #ed6e33);
 }
-: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 {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.contactdetail .output, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.engage .output, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.information .output, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.nativeactions .output, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.entity .output, :host .drawflow-container .outer-container.header-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.waitfor {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.no-scoring, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.waitfor {
   border-color: var(--text-color, #807f83);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.no-scoring.selected1, :host .drawflow-container .outer-container .drawflow .drawflow-node.waitfor.selected1 {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.no-scoring.selected1, :host .drawflow-container .outer-container.header-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.hover1, :host .drawflow-container .outer-container .drawflow .drawflow-node.waitfor.hover1 {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.no-scoring.hover1, :host .drawflow-container .outer-container.header-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.waitfor .input {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.no-scoring .input, :host .drawflow-container .outer-container.header-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.waitfor .output {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.no-scoring .output, :host .drawflow-container .outer-container.header-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 {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.actioncategory, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.logic {
   border-color: var(--anthracite, #1a1a1a);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.actioncategory.selected1, :host .drawflow-container .outer-container .drawflow .drawflow-node.logic.selected1 {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.actioncategory.selected1, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.logic.selected1 {
   color: var(--light, #ffffff);
   background: var(--anthracite, #1a1a1a);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.actioncategory.selected1 yoo-icon, :host .drawflow-container .outer-container .drawflow .drawflow-node.logic.selected1 yoo-icon {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.actioncategory.selected1 yoo-icon, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.logic.selected1 yoo-icon {
   fill: var(--light, #ffffff);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.actioncategory.hover1, :host .drawflow-container .outer-container .drawflow .drawflow-node.logic.hover1 {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.actioncategory.hover1, :host .drawflow-container .outer-container.header-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 {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.actioncategory .input, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.logic .input {
   background: var(--anthracite, #1a1a1a);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.actioncategory .output, :host .drawflow-container .outer-container .drawflow .drawflow-node.logic .output {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.actioncategory .output, :host .drawflow-container .outer-container.header-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.header-container .drawflow .drawflow-node.dateandtime {
   border-color: var(--dark, #000000);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.dateandtime.selected1 {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.dateandtime.selected1 {
   color: var(--light, #ffffff);
   background: var(--dark, #000000);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.dateandtime.selected1 yoo-icon {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.dateandtime.selected1 yoo-icon {
   fill: var(--light, #ffffff);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.dateandtime.hover1 {
+:host .drawflow-container .outer-container.header-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.header-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.header-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 {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.catalogandbarcode, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.notifications {
   border-color: var(--danger, #d44333);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.catalogandbarcode.selected1, :host .drawflow-container .outer-container .drawflow .drawflow-node.notifications.selected1 {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.catalogandbarcode.selected1, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.notifications.selected1 {
   color: var(--light, #ffffff);
   background: var(--danger, #d44333);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.catalogandbarcode.selected1 yoo-icon, :host .drawflow-container .outer-container .drawflow .drawflow-node.notifications.selected1 yoo-icon {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.catalogandbarcode.selected1 yoo-icon, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.notifications.selected1 yoo-icon {
   fill: var(--light, #ffffff);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.catalogandbarcode.hover1, :host .drawflow-container .outer-container .drawflow .drawflow-node.notifications.hover1 {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.catalogandbarcode.hover1, :host .drawflow-container .outer-container.header-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 {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.catalogandbarcode .input, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.notifications .input {
   background: var(--danger, #d44333);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.catalogandbarcode .output, :host .drawflow-container .outer-container .drawflow .drawflow-node.notifications .output {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.catalogandbarcode .output, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.notifications .output {
   border-color: var(--danger, #d44333);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.condition {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.condition {
   border-color: var(--stable, #adadad);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.condition.selected1 {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.condition.selected1 {
   color: var(--dark, #000000);
   background: var(--stable, #adadad);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.condition.hover1 {
+:host .drawflow-container .outer-container.header-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 {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.condition .input {
   background: var(--stable, #adadad);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.condition .output {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.condition .output {
   border-color: var(--stable, #adadad);
 }
-: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 {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.page, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.dataactions, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.operate {
   border-color: var(--success, #3aa76d);
 }
-: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 {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.page.selected1, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.dataactions.selected1, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.operate.selected1 {
   color: var(--light, #ffffff);
   background: var(--success, #3aa76d);
 }
-: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 {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.page.selected1 yoo-icon, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.dataactions.selected1 yoo-icon, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.operate.selected1 yoo-icon {
   fill: var(--light, #ffffff);
 }
-: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 {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.page.hover1, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.dataactions.hover1, :host .drawflow-container .outer-container.header-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 {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.page .input, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.dataactions .input, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.operate .input {
   background: var(--success, #3aa76d);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node.page .output, :host .drawflow-container .outer-container .drawflow .drawflow-node.dataactions .output, :host .drawflow-container .outer-container .drawflow .drawflow-node.operate .output {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.page .output, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.dataactions .output, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.operate .output {
   border-color: var(--success, #3aa76d);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node .block-container {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node .block-container {
   display: flex;
   flex-direction: column;
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node .title-box {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node .title-box {
   display: flex;
   flex: 1;
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node .title-box .title-text {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node .title-box .title-text {
   flex: 1;
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node .title-box yoo-icon.margin-right {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node .title-box yoo-icon.margin-right {
   margin-right: var(--spacing-08, 0.5rem);
 }
-:host .drawflow-container .outer-container .drawflow .drawflow-node .title-box yoo-icon.margin-left {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node .title-box yoo-icon.margin-left {
   margin-left: var(--spacing-08, 0.5rem);
-}
-:host .drawflow-container .outer-container .drawflow .drawflow-node .title-box:hover yoo-icon[name=settings] {
-  opacity: 1;
-}
-:host .drawflow-container .outer-container .drawflow .drawflow-node .title-box yoo-icon[name=settings] {
-  cursor: pointer;
-  opacity: 0.3;
 }

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

@@ -1,5 +1,5 @@
-import { findParent, translate } from '@shared/utils';
-import { Component, Event, forceUpdate, h, Method, Prop } from '@stencil/core';
+import { findParent, showContextMenu, translate } from '@shared/utils';
+import { Component, Event, forceUpdate, h, Host, Method, Prop } from '@stencil/core';
 import Drawflow from 'drawflow';
 import { isEmpty, keys, max } from 'lodash-es';
 export class YooDrawFlowComponent {
@@ -50,8 +50,19 @@ export class YooDrawFlowComponent {
     this.registerEvents();
     this.editor.on('nodeSelected', () => { });
     this.editor.on('click', (ev) => {
-      var _a, _b;
-      if (((_b = (_a = ev.target) === null || _a === void 0 ? void 0 : _a.tagName) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === 'yoo-collapsible') {
+      var _a, _b, _c, _d;
+      if (((_b = (_a = ev.target) === null || _a === void 0 ? void 0 : _a.tagName) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === 'yoo-icon' && ev.target.name === 'more') {
+        const nodeId = findParent(ev.target, '.drawflow-node').id;
+        if (nodeId) {
+          const node = this.editor.getNodeFromId(nodeId.replace('node-', ''));
+          ev.stopPropagation();
+          ev.preventDefault();
+          setTimeout(() => {
+            this.showContextMenu(node, 0, 0, ev.target);
+          }, 100);
+        }
+      }
+      else if (((_d = (_c = ev.target) === null || _c === void 0 ? void 0 : _c.tagName) === null || _d === void 0 ? void 0 : _d.toLowerCase()) === 'yoo-collapsible') {
         this.toggleCollapsed(ev.target);
       }
     });
@@ -66,6 +77,11 @@ export class YooDrawFlowComponent {
       this.lastCreatedId = id;
       this.editor.container.querySelector('#node-' + id + ' yoo-collapsible').collapsed = false;
     });
+    this.editor.on('nodeRemoved', (id) => {
+      if (this.lastCreatedId === id) {
+        this.lastCreatedId = null;
+      }
+    });
     this.editor.zoom = ((_a = this.config) === null || _a === void 0 ? void 0 : _a.zoom) || this.editor.zoom;
     this.editor.canvas_x = ((_b = this.config) === null || _b === void 0 ? void 0 : _b.canvas_x) || this.editor.canvas_x;
     this.editor.canvas_y = ((_c = this.config) === null || _c === void 0 ? void 0 : _c.canvas_y) || this.editor.canvas_y;
@@ -83,6 +99,23 @@ export class YooDrawFlowComponent {
       this.lastCreatedId = null;
     }
   }
+  showContextMenu(node, pageX, pageY, hostElement) {
+    showContextMenu({ pageX, pageY }, {
+      multipleSelection: false,
+      contentButtons: [{
+          text: translate('DELETE'),
+          handler: () => {
+            if (this.lastCreatedId === node.id) {
+              this.lastCreatedId = null;
+            }
+            this.editor.removeNodeId('node-' + node.id);
+            this.onUpdate();
+          }
+        }],
+      className: 'width-unset',
+      hostElement
+    });
+  }
   toggleCollapsed(target) {
     var _a;
     if (((_a = target === null || target === void 0 ? void 0 : target.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === 'yoo-collapsible') {
@@ -143,13 +176,14 @@ export class YooDrawFlowComponent {
     const template = `
       <div class="block-container">
       <yoo-collapsible 
-        class="bold full-width"
+        class="bold full-width drawfow"
         header="${translate(block.title)}"
         icon="${block.icon}" 
         icon-color="${block.iconColor}"
         icon-size="medium"
         toggle-with-arrow-only="true"
       >
+          <yoo-icon slot="title-extra-icon" name="more" size="small"></yoo-icon>
           <slot name="block-${block.slotName}"></slot>
         </yoo-collapsible>
       </div>
@@ -157,18 +191,29 @@ export class YooDrawFlowComponent {
     return template;
   }
   render() {
-    var _a;
-    return (h("div", { class: "drawflow-container" },
-      h("div", { ref: (el) => (this.containerEl = el), class: "outer-container" }),
-      h("div", { class: "toolbar" },
-        h("yoo-icon", { name: "side-menu-collapse", size: "medium", onClick: () => this.onCollapseAll() }),
-        h("yoo-icon", { name: "side-menu-expand", size: "medium", onClick: () => this.onExpandAll() }),
-        h("div", { class: "spacing" }),
-        h("yoo-icon", { name: ((_a = this.editor) === null || _a === void 0 ? void 0 : _a.editor_mode) === 'fixed' ? 'unlocked' : 'lock', size: "medium", onClick: () => this.onToggleEditMode() }),
-        h("div", { class: "spacing" }),
-        h("yoo-icon", { name: "circle-minor", size: "medium", onClick: () => this.onZoomOut() }),
-        h("yoo-icon", { name: "circle1", size: "medium", onClick: () => this.onZoomReset() }),
-        h("yoo-icon", { name: "circle-plus", size: "medium", onClick: () => this.onZoomIn() }))));
+    var _a, _b;
+    // class needed for the context menu display
+    return h(Host, { class: "camera-container" },
+      h("div", { class: "drawflow-container" },
+        h("div", { ref: (el) => (this.containerEl = el), class: "outer-container" }),
+        h("div", { class: "toolbar" },
+          h("div", { class: "button-container" },
+            h("yoo-tooltip", { hoverable: true, placement: "top", content: translate('YOOBICDRAWFLOWEXPANDALL') },
+              h("yoo-icon", { color: "light", name: "maximize-web", size: "medium", onClick: () => this.onExpandAll() })),
+            h("yoo-tooltip", { hoverable: true, placement: "top", content: translate('YOOBICDRAWFLOWCOLLAPSEALL') },
+              h("yoo-icon", { color: "light", name: "minimize-web", size: "medium", onClick: () => this.onCollapseAll() }))),
+          h("div", { class: "flex" }),
+          h("div", { class: "button-container" },
+            h("yoo-tooltip", { hoverable: true, placement: "top", content: translate(((_a = this.editor) === null || _a === void 0 ? void 0 : _a.editor_mode) === 'fixed' ? 'YOOBICDRAWFLOWUNLOCK' : 'YOOBICDRAWFLOWLOCK') },
+              h("yoo-icon", { color: "light", name: ((_b = this.editor) === null || _b === void 0 ? void 0 : _b.editor_mode) === 'fixed' ? 'unlocked' : 'lock', size: "medium", onClick: () => this.onToggleEditMode() }))),
+          h("div", { class: "spacing" }),
+          h("div", { class: "button-container" },
+            h("yoo-tooltip", { hoverable: true, placement: "top", content: translate('YOOBICDRAWFLOWZOOMRESET') },
+              h("yoo-icon", { color: "light", name: "gps", size: "medium", onClick: () => this.onZoomReset() })),
+            h("yoo-tooltip", { hoverable: true, placement: "top", content: translate('YOOBICDRAWFLOWZOOMOUT') },
+              h("yoo-icon", { color: "light", name: "zoom-out", size: "medium", onClick: () => this.onZoomOut() })),
+            h("yoo-tooltip", { hoverable: true, placement: "top", content: translate('YOOBICDRAWFLOWZOOMIN') },
+              h("yoo-icon", { color: "light", name: "zoom-in", size: "medium", onClick: () => this.onZoomIn() }))))));
   }
   static get is() { return "yoo-draw-flow"; }
   static get encapsulation() { return "shadow"; }

package/dist/design-system/{button.factory-6c7aab55.js → button.factory-360481b8.js}

@@ -1,6 +1,6 @@
-import './index-1b38d4f3.js';
+import './index-896d4c0c.js';
 import { h } from './index-becca019.js';
-import { Z as translateMulti } from './overlays-be5a9ab3.js';
+import { Z as translateMulti } from './overlays-f516b003.js';
 
 const getButton = (button) => {
   return !button.isVisible || button.isVisible() ? (h("yoo-button", { class: button.cssClass, color: button.color || 'light', type: button.type || 'button', size: button.size || 'medium', shape: button.shape || 'rectangular', fill: button.fill || 'solid', rippleType: button.rippleType || 'bounded', disabled: button.disabled === null ? false : button.disabled, animated: button.animated === null ? true : button.animated, onClick: button.handler },

package/dist/{esm/camera-helpers-34aebfda.js → design-system/camera-helpers-48df14b6.js}

@@ -1,5 +1,5 @@
-import { cm as cordova, cn as AwesomeCordovaNativePlugin, co as cordovaPropertyGet, cp as cordovaPropertySet, cq as registerPlugin, a3 as getSession, cr as isIonic, j as isNativeMobile, cs as Device, k as isAndroid, H as isIOS, ct as getMediaDevices, z as showModal, y as getModalAnimation, A as isWeb } from './overlays-be5a9ab3.js';
-import './index-c7d02f02.js';
+import { cn as cordova, co as AwesomeCordovaNativePlugin, cp as cordovaPropertyGet, cq as cordovaPropertySet, cr as registerPlugin, a3 as getSession, cs as isIonic, j as isNativeMobile, ct as Device, k as isAndroid, H as isIOS, cu as getMediaDevices, z as showModal, y as getModalAnimation, A as isWeb } from './overlays-f516b003.js';
+import './index-5120ceae.js';
 
 var __extends$2 = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -243,7 +243,7 @@ var CameraResultType;
 })(CameraResultType || (CameraResultType = {}));
 
 const Camera = registerPlugin('Camera', {
-    web: () => import('./web-54bac092.js').then(m => new m.CameraWeb()),
+    web: () => import('./web-1bb24c6a.js').then(m => new m.CameraWeb()),
 });
 
 var MediaPictureOptions;