npm - @yoobic/yobi - Versions diffs - 8.3.0-9 → 8.3.0 - Mend

@yoobic/yobi 8.3.0-9 → 8.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1594) hide show

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

@@ -201,30 +201,32 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 /* used for logos */
 /* spacing for padding, margin, etc... */
 /* shadow */
-.drawflow,.drawflow .parent-node{position:relative}.parent-drawflow{display:flex;overflow:hidden;touch-action:none;outline:0}.drawflow{width:100%;height:100%;user-select:none;perspective:0}.drawflow .drawflow-node{display:flex;align-items:center;position:absolute;background:#0ff;width:160px;min-height:40px;border-radius:4px;border:2px solid #000;color:#000;z-index:2;padding:15px}.drawflow .drawflow-node.selected{background:red}.drawflow .drawflow-node:hover{cursor:move}.drawflow .drawflow-node .inputs,.drawflow .drawflow-node .outputs{width:0}.drawflow .drawflow-node .drawflow_content_node{width:100%;display:block}.drawflow .drawflow-node .input,.drawflow .drawflow-node .output{position:relative;width:20px;height:20px;background:#fff;border-radius:50%;border:2px solid #000;cursor:crosshair;z-index:1;margin-bottom:5px}.drawflow .drawflow-node .input{left:-27px;top:2px;background:#ff0}.drawflow .drawflow-node .output{right:-3px;top:2px}.drawflow svg{z-index:0;position:absolute;overflow:visible!important}.drawflow .connection{position:absolute;pointer-events:none;aspect-ratio:1/1}.drawflow .connection .main-path{fill:none;stroke-width:5px;stroke:#4682b4;pointer-events:all}.drawflow .connection .main-path:hover{stroke:#1266ab;cursor:pointer}.drawflow .connection .main-path.selected{stroke:#43b993}.drawflow .connection .point{cursor:move;stroke:#000;stroke-width:2;fill:#fff;pointer-events:all}.drawflow .connection .point.selected,.drawflow .connection .point:hover{fill:#1266ab}.drawflow .main-path{fill:none;stroke-width:5px;stroke:#4682b4}.drawflow-delete{position:absolute;display:block;width:30px;height:30px;background:#000;color:#fff;z-index:4;border:2px solid #fff;line-height:30px;font-weight:700;text-align:center;border-radius:50%;font-family:monospace;cursor:pointer}.drawflow>.drawflow-delete{margin-left:-15px;margin-top:15px}.parent-node .drawflow-delete{right:-15px;top:-15px}
-:root {
-  --dfBackgroundColor: rgba(255, 255, 255, 1);
-  --dfBackgroundSize: 24px;
+:host {
+  --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;
   --dfNodeBackgroundColor: rgba(255, 255, 255, 1);
   --dfNodeTextColor: #000000;
-  --dfNodeBorderSize: 4px;
+  --dfNodeBorderSize: var(--border-size);
   --dfNodeBorderColor: rgba(90, 48, 244, 1);
   --dfNodeBorderRadius: 16px;
   --dfNodeMinHeight: 40px;
-  --dfNodeMinWidth: 160px;
-  --dfNodePaddingTop: 16px;
-  --dfNodePaddingBottom: 16px;
+  --dfNodeMinWidth: 0;
+  --dfNodePaddingTop: 0;
+  --dfNodePaddingLeft:var(--spacing-08);
+  --dfNodePaddingRight:var(--spacing-08);
+  --dfNodePaddingBottom: 0rem;
   --dfNodeBoxShadowHL: 0px;
   --dfNodeBoxShadowVL: 2px;
   --dfNodeBoxShadowBR: 16px;
   --dfNodeBoxShadowS: 2px;
   --dfNodeBoxShadowColor: rgba(0, 0, 0, 0.1);
-  --dfNodeHoverBackgroundColor: rgba(90, 48, 244, 0.2);
+  --dfNodeHoverBackgroundColor: rgba(255, 255, 255, 1);
   --dfNodeHoverTextColor: #000000;
-  --dfNodeHoverBorderSize: 4px;
+  --dfNodeHoverBorderSize: var(--border-size);
   --dfNodeHoverBorderColor: rgba(90, 48, 244, 1);
   --dfNodeHoverBorderRadius: 16px;
   --dfNodeHoverBoxShadowHL: 0px;
@@ -234,7 +236,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: var(--border-size);
   --dfNodeSelectedBorderColor: rgba(90, 48, 244, 1);
   --dfNodeSelectedBorderRadius: 16px;
   --dfNodeSelectedBoxShadowHL: 0px;
@@ -243,89 +245,213 @@ 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: var(--border-size);
   --dfInputBorderColor: rgba(255, 255, 255, 1);
   --dfInputBorderRadius: 50px;
   --dfInputLeft: -26px;
-  --dfInputHeight: 20px;
-  --dfInputWidth: 20px;
+  --dfInputHeight: 11px;
+  --dfInputWidth: 11px;
   --dfInputHoverBackgroundColor: rgba(255, 255, 255, 1);
-  --dfInputHoverBorderSize: 4px;
+  --dfInputHoverBorderSize: var(--border-size);
   --dfInputHoverBorderColor: rgba(0, 0, 0, 1);
   --dfInputHoverBorderRadius: 50px;
   --dfOutputBackgroundColor: #ffffff;
-  --dfOutputBorderSize: 4px;
+  --dfOutputBorderSize: var(--border-size);
   --dfOutputBorderColor: rgba(90, 48, 244, 1);
   --dfOutputBorderRadius: 50px;
-  --dfOutputRight: -6px;
-  --dfOutputHeight: 20px;
-  --dfOutputWidth: 20px;
+  --dfOutputRight: -7px;
+  --dfOutputHeight: 11px;
+  --dfOutputWidth: 11px;
   --dfOutputHoverBackgroundColor: #ffffff;
-  --dfOutputHoverBorderSize: 4px;
+  --dfOutputHoverBorderSize: var(--border-size);
   --dfOutputHoverBorderColor: #000000;
   --dfOutputHoverBorderRadius: 50px;
-  --dfLineWidth: 4px;
+  --dfLineWidth: var(--border-size);
   --dfLineColor: rgba(208, 208, 208, 1);
   --dfLineHoverColor: rgba(90, 48, 244, 1);
   --dfLineSelectedColor: rgba(255, 198, 27, 1);
-  --dfRerouteBorderWidth: 4px;
+  --dfRerouteBorderWidth: var(--border-size);
   --dfRerouteBorderColor: rgba(90, 48, 244, 1);
   --dfRerouteBackgroundColor: #ffffff;
-  --dfRerouteHoverBorderWidth: 4px;
+  --dfRerouteHoverBorderWidth: var(--border-size);
   --dfRerouteHoverBorderColor: #000000;
   --dfRerouteHoverBackgroundColor: #ffffff;
   --dfDeleteDisplay: block;
   --dfDeleteColor: #ffffff;
   --dfDeleteBackgroundColor: rgba(212, 67, 51, 1);
-  --dfDeleteBorderSize: 4px;
+  --dfDeleteBorderSize: var(--border-size);
   --dfDeleteBorderColor: #ffffff;
   --dfDeleteBorderRadius: 50px;
   --dfDeleteTop: -24px;
   --dfDeleteHoverColor: rgba(255, 255, 255, 1);
   --dfDeleteHoverBackgroundColor: rgba(210, 79, 76, 1);
-  --dfDeleteHoverBorderSize: 4px;
+  --dfDeleteHoverBorderSize: var(--border-size);
   --dfDeleteHoverBorderColor: rgba(255, 255, 255, 1);
   --dfDeleteHoverBorderRadius: 50px;
 }
-.drawflow-container {
+:host .parent-drawflow {
+  display: flex;
+  overflow: hidden;
+  outline: none;
+  touch-action: none;
+}
+:host .drawflow {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  perspective: 0;
+  user-select: none;
+}
+:host .drawflow .parent-node {
+  position: relative;
+}
+:host .drawflow .drawflow-node {
+  position: absolute;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  width: 160px;
+  min-height: 40px;
+  padding: 15px;
+  color: black;
+  background: cyan;
+  border: 2px solid black;
+  border-radius: 4px;
+}
+:host .drawflow .drawflow-node.selected {
+  z-index: 100;
+  background: var(--light, #ffffff);
+}
+:host .drawflow .drawflow-node:hover {
+  cursor: grab;
+}
+:host .drawflow .drawflow-node .inputs,
+:host .drawflow .drawflow-node .outputs {
+  width: 0px;
+}
+:host .drawflow .drawflow-node .drawflow_content_node {
+  display: block;
+  width: 100%;
+}
+:host .drawflow .drawflow-node .input,
+:host .drawflow .drawflow-node .output {
+  position: relative;
+  z-index: 1;
+  width: 20px;
+  height: 20px;
+  margin-bottom: 5px;
+  background: white;
+  border: 2px solid black;
+  border-radius: 50%;
+  cursor: crosshair;
+}
+:host .drawflow .drawflow-node .input {
+  top: 0.375rem;
+}
+:host .drawflow .drawflow-node .output {
+  top: 0.375rem;
+}
+:host .drawflow svg {
+  position: absolute;
+  z-index: 0;
+  overflow: visible !important;
+}
+:host .drawflow .connection {
+  position: absolute;
+  pointer-events: none;
+  aspect-ratio: 1/1;
+}
+:host .drawflow .connection .main-path {
+  pointer-events: all;
+  fill: none;
+  stroke: steelblue;
+  stroke-width: 5px;
+}
+:host .drawflow .connection .main-path:hover {
+  cursor: pointer;
+  stroke: #1266ab;
+}
+:host .drawflow .connection .main-path.selected {
+  stroke: #43b993;
+}
+:host .drawflow .connection .point {
+  cursor: move;
+  pointer-events: all;
+  fill: white;
+  stroke: black;
+  stroke-width: 2;
+}
+:host .drawflow .connection .point.selected,
+:host .drawflow .connection .point:hover {
+  fill: #1266ab;
+}
+:host .drawflow .main-path {
+  fill: none;
+  stroke-width: 5px;
+  stroke: steelblue;
+}
+:host .drawflow-delete {
+  position: absolute;
+  z-index: 4;
+  display: block;
+  width: 30px;
+  height: 30px;
+  color: white;
+  font-weight: bold;
+  font-family: monospace;
+  line-height: 30px;
+  text-align: center;
+  background: black;
+  border: 2px solid white;
+  border-radius: 50%;
+  cursor: pointer;
+}
+:host .drawflow > .drawflow-delete {
+  margin-top: 15px;
+  margin-left: -15px;
+}
+:host .parent-node .drawflow-delete {
+  top: -15px;
+  right: -15px;
+}
+:host .drawflow-container {
+  position: relative;
   display: flex;
   flex: 1;
   flex-direction: column;
   width: 100%;
   height: 100%;
 }
-.drawflow-container .drawflow .drawflow-node {
+:host .drawflow-container .drawflow .drawflow-node {
   display: var(--dfNodeType);
+  align-items: center;
   width: auto;
   min-width: var(--dfNodeMinWidth);
   min-height: var(--dfNodeMinHeight);
   padding-top: var(--dfNodePaddingTop);
+  padding-right: var(--dfNodePaddingRight);
   padding-bottom: var(--dfNodePaddingBottom);
+  padding-left: var(--dfNodePaddingLeft);
   color: var(--dfNodeTextColor);
   background: var(--dfNodeBackgroundColor);
   border: var(--dfNodeBorderSize) solid var(--dfNodeBorderColor);
   border-radius: var(--dfNodeBorderRadius);
-  -webkit-box-shadow: var(--dfNodeBoxShadowHL) var(--dfNodeBoxShadowVL) var(--dfNodeBoxShadowBR) var(--dfNodeBoxShadowS) var(--dfNodeBoxShadowColor);
   box-shadow: var(--dfNodeBoxShadowHL) var(--dfNodeBoxShadowVL) var(--dfNodeBoxShadowBR) var(--dfNodeBoxShadowS) var(--dfNodeBoxShadowColor);
 }
-.drawflow-container .drawflow .drawflow-node:hover {
+:host .drawflow-container .drawflow .drawflow-node:hover {
   color: var(--dfNodeHoverTextColor);
   background: var(--dfNodeHoverBackgroundColor);
   border: var(--dfNodeHoverBorderSize) solid var(--dfNodeHoverBorderColor);
   border-radius: var(--dfNodeHoverBorderRadius);
-  -webkit-box-shadow: var(--dfNodeHoverBoxShadowHL) var(--dfNodeHoverBoxShadowVL) var(--dfNodeHoverBoxShadowBR) var(--dfNodeHoverBoxShadowS) var(--dfNodeHoverBoxShadowColor);
   box-shadow: var(--dfNodeHoverBoxShadowHL) var(--dfNodeHoverBoxShadowVL) var(--dfNodeHoverBoxShadowBR) var(--dfNodeHoverBoxShadowS) var(--dfNodeHoverBoxShadowColor);
 }
-.drawflow-container .drawflow .drawflow-node.selected {
+:host .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 {
+:host .drawflow-container .drawflow .drawflow-node .input {
   left: var(--dfInputLeft);
   width: var(--dfInputWidth);
   height: var(--dfInputHeight);
@@ -333,15 +459,15 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   border: var(--dfInputBorderSize) solid var(--dfInputBorderColor);
   border-radius: var(--dfInputBorderRadius);
 }
-.drawflow-container .drawflow .drawflow-node .input:hover {
+:host .drawflow-container .drawflow .drawflow-node .input:hover {
   background: var(--dfInputHoverBackgroundColor);
   border: var(--dfInputHoverBorderSize) solid var(--dfInputHoverBorderColor);
   border-radius: var(--dfInputHoverBorderRadius);
 }
-.drawflow-container .drawflow .drawflow-node .outputs {
+:host .drawflow-container .drawflow .drawflow-node .outputs {
   float: var(--dfNodeTypeFloat);
 }
-.drawflow-container .drawflow .drawflow-node .output {
+:host .drawflow-container .drawflow .drawflow-node .output {
   right: var(--dfOutputRight);
   width: var(--dfOutputWidth);
   height: var(--dfOutputHeight);
@@ -349,48 +475,49 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   border: var(--dfOutputBorderSize) solid var(--dfOutputBorderColor);
   border-radius: var(--dfOutputBorderRadius);
 }
-.drawflow-container .drawflow .drawflow-node .output:hover {
+:host .drawflow-container .drawflow .drawflow-node .output:hover {
   background: var(--dfOutputHoverBackgroundColor);
   border: var(--dfOutputHoverBorderSize) solid var(--dfOutputHoverBorderColor);
   border-radius: var(--dfOutputHoverBorderRadius);
 }
-.drawflow-container .drawflow .connection .main-path {
-  stroke-width: var(--dfLineWidth);
+:host .drawflow-container .drawflow .connection .main-path {
   stroke: var(--dfLineColor);
+  stroke-width: var(--dfLineWidth);
 }
-.drawflow-container .drawflow .connection .main-path:hover {
+:host .drawflow-container .drawflow .connection .main-path:hover {
   stroke: var(--dfLineHoverColor);
 }
-.drawflow-container .drawflow .connection .main-path.selected {
+:host .drawflow-container .drawflow .connection .main-path.selected {
   stroke: var(--dfLineSelectedColor);
 }
-.drawflow-container .drawflow .connection .point {
+:host .drawflow-container .drawflow .connection .point {
   fill: var(--dfRerouteBackgroundColor);
   stroke: var(--dfRerouteBorderColor);
   stroke-width: var(--dfRerouteBorderWidth);
 }
-.drawflow-container .drawflow .connection .point:hover {
+:host .drawflow-container .drawflow .connection .point:hover {
   fill: var(--dfRerouteHoverBackgroundColor);
   stroke: var(--dfRerouteHoverBorderColor);
   stroke-width: var(--dfRerouteHoverBorderWidth);
 }
-.drawflow-container .drawflow-delete {
+:host .drawflow-container .drawflow-delete {
   display: var(--dfDeleteDisplay);
+  box-sizing: content-box;
   color: var(--dfDeleteColor);
   background: var(--dfDeleteBackgroundColor);
   border: var(--dfDeleteBorderSize) solid var(--dfDeleteBorderColor);
   border-radius: var(--dfDeleteBorderRadius);
 }
-.drawflow-container .parent-node .drawflow-delete {
+:host .drawflow-container .parent-node .drawflow-delete {
   top: var(--dfDeleteTop);
 }
-.drawflow-container .drawflow-delete:hover {
+:host .drawflow-container .drawflow-delete:hover {
   color: var(--dfDeleteHoverColor);
   background: var(--dfDeleteHoverBackgroundColor);
   border: var(--dfDeleteHoverBorderSize) solid var(--dfDeleteHoverBorderColor);
   border-radius: var(--dfDeleteHoverBorderRadius);
 }
-.drawflow-container .toolbar {
+:host .drawflow-container .toolbar {
   position: absolute;
   right: 0;
   bottom: 0;
@@ -399,11 +526,23 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   justify-content: flex-end;
   padding: 1rem;
 }
-.drawflow-container .toolbar yoo-icon,
-.drawflow-container .toolbar .spacing {
+:host .drawflow-container .toolbar .spacing {
   margin-left: 1rem;
 }
-.drawflow-container .outer-container {
+: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;
   width: 100%;
   height: 100%;
@@ -411,144 +550,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);
 }
-.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;
 }
-.drawflow-container .outer-container .drawflow .drawflow-node {
+:host .drawflow-container .outer-container.header-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 {
+: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);
 }
-.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);
+: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);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.textcategory {
-  border-color: var(--energized, #ffc043);
+: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));
 }
-.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);
+: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);
 }
-.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);
+: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);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.no-scoring {
-  border-color: var(--text-color, #807f83);
+: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);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.actioncategory, .drawflow-container .outer-container .drawflow .drawflow-node.logic {
-  border-color: var(--anthracite, #1a1a1a);
+: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);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.dateandtime {
-  border-color: var(--dark, #000000);
+: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);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.catalogandbarcode, .drawflow-container .outer-container .drawflow .drawflow-node.notifications {
-  border-color: var(--danger, #d44333);
+: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));
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.condition {
-  border-color: var(--stable, #adadad);
+: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);
 }
-.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);
+: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);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.lesson, .drawflow-container .outer-container .drawflow .drawflow-node.boostcontent {
-  border-color: var(--app-color, #5a30f4);
+: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);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.uiactions {
-  border-color: var(--info, #d84c96);
+: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);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.uiactions.selected {
-  background: var(--info, #d84c96);
+: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));
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.uiactions:hover {
-  background: var(--info-20, rgba(216, 76, 150, 0.2));
+: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);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.uiactions .input {
-  background: var(--info, #d84c96);
+: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);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.uiactions .output {
-  border-color: var(--info, #d84c96);
+: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);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.events, .drawflow-container .outer-container .drawflow .drawflow-node.dataevents {
-  border-color: var(--accent, #276ef1);
+: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);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.events.selected, .drawflow-container .outer-container .drawflow .drawflow-node.dataevents.selected {
-  background: var(--accent, #276ef1);
+: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);
 }
-.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));
+: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));
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.events .input, .drawflow-container .outer-container .drawflow .drawflow-node.dataevents .input {
-  background: var(--accent, #276ef1);
+: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);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.events .output, .drawflow-container .outer-container .drawflow .drawflow-node.dataevents .output {
-  border-color: var(--accent, #276ef1);
+: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);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.nativeactions {
+: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);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.nativeactions.selected {
+: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);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.nativeactions:hover {
+: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.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));
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.nativeactions .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);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.nativeactions .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);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.logic {
+: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.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.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.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.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.header-container .drawflow .drawflow-node.actioncategory, :host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.logic {
   border-color: var(--anthracite, #1a1a1a);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.logic.selected {
+: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);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.logic:hover {
+: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.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));
 }
-.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);
 }
-.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);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.notifications {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.dateandtime {
+  border-color: var(--dark, #000000);
+}
+: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.header-container .drawflow .drawflow-node.dateandtime.selected1 yoo-icon {
+  fill: var(--light, #ffffff);
+}
+: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.header-container .drawflow .drawflow-node.dateandtime .input {
+  background: var(--dark, #000000);
+}
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.dateandtime .output {
+  border-color: var(--dark, #000000);
+}
+: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);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.notifications.selected {
+: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);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.notifications:hover {
+: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.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));
 }
-.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);
 }
-.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);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.dataactions {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.condition {
+  border-color: var(--stable, #adadad);
+}
+: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.header-container .drawflow .drawflow-node.condition.hover1 {
+  background: var(--stable-20, rgba(173, 173, 173, 0.2));
+}
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.condition .input {
+  background: var(--stable, #adadad);
+}
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node.condition .output {
+  border-color: var(--stable, #adadad);
+}
+: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);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.dataactions.selected {
+: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);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.dataactions:hover {
+: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.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));
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.dataactions .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);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.dataactions .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);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node .title-box {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node .block-container {
   display: flex;
-  color: var(--dark, #000000);
+  flex-direction: column;
 }
-.drawflow-container .outer-container .drawflow .drawflow-node .title-box yoo-icon {
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node .title-box {
+  display: flex;
+  flex: 1;
+}
+:host .drawflow-container .outer-container.header-container .drawflow .drawflow-node .title-box .title-text {
+  flex: 1;
+}
+: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.header-container .drawflow .drawflow-node .title-box yoo-icon.margin-left {
+  margin-left: var(--spacing-08, 0.5rem);
 }