@yoobic/yobi 8.3.0-34 → 8.3.0-37

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

@@ -201,8 +201,8 @@ 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 {
+:host {
+  --border-size: 0.25rem;
   --dfBackgroundColor: rgba(255, 255, 255, 1);
   --dfBackgroundSize: 24px;
   --dfBackgroundImage: radial-gradient(rgba(191, 191, 191, 1) 1px, transparent 1px);
@@ -210,7 +210,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   --dfNodeTypeFloat: none;
   --dfNodeBackgroundColor: rgba(255, 255, 255, 1);
   --dfNodeTextColor: #000000;
-  --dfNodeBorderSize: 0.125rem;
+  --dfNodeBorderSize: var(--border-size);
   --dfNodeBorderColor: rgba(90, 48, 244, 1);
   --dfNodeBorderRadius: 16px;
   --dfNodeMinHeight: 40px;
@@ -224,7 +224,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   --dfNodeBoxShadowColor: rgba(0, 0, 0, 0.1);
   --dfNodeHoverBackgroundColor: rgba(90, 48, 244, 0.2);
   --dfNodeHoverTextColor: #000000;
-  --dfNodeHoverBorderSize: 0.125rem;
+  --dfNodeHoverBorderSize: var(--border-size);
   --dfNodeHoverBorderColor: rgba(90, 48, 244, 1);
   --dfNodeHoverBorderRadius: 16px;
   --dfNodeHoverBoxShadowHL: 0px;
@@ -234,7 +234,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   --dfNodeHoverBoxShadowColor: rgba(0, 0, 0, 0.1);
   --dfNodeSelectedBackgroundColor: rgba(90, 48, 244, 1);
   --dfNodeSelectedTextColor: #ffffff;
-  --dfNodeSelectedBorderSize: 0.125rem;
+  --dfNodeSelectedBorderSize: var(--border-size);
   --dfNodeSelectedBorderColor: rgba(90, 48, 244, 1);
   --dfNodeSelectedBorderRadius: 16px;
   --dfNodeSelectedBoxShadowHL: 0px;
@@ -243,52 +243,178 @@ 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: 0.125rem;
+  --dfInputBorderSize: var(--border-size);
   --dfInputBorderColor: rgba(255, 255, 255, 1);
   --dfInputBorderRadius: 50px;
   --dfInputLeft: -26px;
   --dfInputHeight: 20px;
   --dfInputWidth: 20px;
   --dfInputHoverBackgroundColor: rgba(255, 255, 255, 1);
-  --dfInputHoverBorderSize: 0.125rem;
+  --dfInputHoverBorderSize: var(--border-size);
   --dfInputHoverBorderColor: rgba(0, 0, 0, 1);
   --dfInputHoverBorderRadius: 50px;
   --dfOutputBackgroundColor: #ffffff;
-  --dfOutputBorderSize: 0.125rem;
+  --dfOutputBorderSize: var(--border-size);
   --dfOutputBorderColor: rgba(90, 48, 244, 1);
   --dfOutputBorderRadius: 50px;
   --dfOutputRight: -6px;
   --dfOutputHeight: 20px;
   --dfOutputWidth: 20px;
   --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 {
+  background: red;
+}
+:host .drawflow .drawflow-node:hover {
+  cursor: move;
+}
+: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: 2px;
+  left: -27px;
+  background: yellow;
+}
+:host .drawflow .drawflow-node .output {
+  top: 2px;
+  right: -3px;
+}
+: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;
@@ -296,7 +422,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   width: 100%;
   height: 100%;
 }
-.drawflow-container .drawflow .drawflow-node {
+:host .drawflow-container .drawflow .drawflow-node {
   display: var(--dfNodeType);
   width: auto;
   min-width: var(--dfNodeMinWidth);
@@ -307,24 +433,22 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   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);
   border: var(--dfNodeSelectedBorderSize) solid var(--dfNodeSelectedBackgroundColor);
   border-radius: var(--dfNodeSelectedBorderRadius);
   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);
@@ -332,15 +456,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);
@@ -348,32 +472,32 @@ 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 {
+: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);
@@ -381,16 +505,16 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   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 +523,11 @@ 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 yoo-icon,
+:host .drawflow-container .toolbar .spacing {
   margin-left: 1rem;
 }
-.drawflow-container .outer-container {
+:host .drawflow-container .outer-container {
   flex: 1;
   width: 100%;
   height: 100%;
@@ -411,223 +535,231 @@ 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 .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 .drawflow .drawflow-node {
   border-color: var(--accent, #276ef1);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.multimedia, .drawflow-container .outer-container .drawflow .drawflow-node.learn, .drawflow-container .outer-container .drawflow .drawflow-node.uiactions, .drawflow-container .outer-container .drawflow .drawflow-node.action {
+:host .drawflow-container .outer-container .drawflow .drawflow-node.multimedia, :host .drawflow-container .outer-container .drawflow .drawflow-node.learn, :host .drawflow-container .outer-container .drawflow .drawflow-node.uiactions, :host .drawflow-container .outer-container .drawflow .drawflow-node.action {
   border-color: var(--info, #d84c96);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.multimedia.selected, .drawflow-container .outer-container .drawflow .drawflow-node.learn.selected, .drawflow-container .outer-container .drawflow .drawflow-node.uiactions.selected, .drawflow-container .outer-container .drawflow .drawflow-node.action.selected {
+:host .drawflow-container .outer-container .drawflow .drawflow-node.multimedia.selected, :host .drawflow-container .outer-container .drawflow .drawflow-node.learn.selected, :host .drawflow-container .outer-container .drawflow .drawflow-node.uiactions.selected, :host .drawflow-container .outer-container .drawflow .drawflow-node.action.selected {
   background: var(--info, #d84c96);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.multimedia:hover, .drawflow-container .outer-container .drawflow .drawflow-node.learn:hover, .drawflow-container .outer-container .drawflow .drawflow-node.uiactions:hover, .drawflow-container .outer-container .drawflow .drawflow-node.action:hover {
+:host .drawflow-container .outer-container .drawflow .drawflow-node.multimedia:hover, :host .drawflow-container .outer-container .drawflow .drawflow-node.learn:hover, :host .drawflow-container .outer-container .drawflow .drawflow-node.uiactions:hover, :host .drawflow-container .outer-container .drawflow .drawflow-node.action:hover {
   background: var(--info-20, rgba(216, 76, 150, 0.2));
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.multimedia .input, .drawflow-container .outer-container .drawflow .drawflow-node.learn .input, .drawflow-container .outer-container .drawflow .drawflow-node.uiactions .input, .drawflow-container .outer-container .drawflow .drawflow-node.action .input {
+: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 {
   background: var(--info, #d84c96);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.multimedia .output, .drawflow-container .outer-container .drawflow .drawflow-node.learn .output, .drawflow-container .outer-container .drawflow .drawflow-node.uiactions .output, .drawflow-container .outer-container .drawflow .drawflow-node.action .output {
+: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 {
   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, .drawflow-container .outer-container .drawflow .drawflow-node.trigger {
+:host .drawflow-container .outer-container .drawflow .drawflow-node.select, :host .drawflow-container .outer-container .drawflow .drawflow-node.events, :host .drawflow-container .outer-container .drawflow .drawflow-node.dataevents, :host .drawflow-container .outer-container .drawflow .drawflow-node.trigger {
   border-color: var(--accent, #276ef1);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.select.selected, .drawflow-container .outer-container .drawflow .drawflow-node.events.selected, .drawflow-container .outer-container .drawflow .drawflow-node.dataevents.selected, .drawflow-container .outer-container .drawflow .drawflow-node.trigger.selected {
+:host .drawflow-container .outer-container .drawflow .drawflow-node.select.selected, :host .drawflow-container .outer-container .drawflow .drawflow-node.events.selected, :host .drawflow-container .outer-container .drawflow .drawflow-node.dataevents.selected, :host .drawflow-container .outer-container .drawflow .drawflow-node.trigger.selected {
   color: var(--light, #ffffff);
   background: var(--accent, #276ef1);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.select.selected yoo-icon, .drawflow-container .outer-container .drawflow .drawflow-node.events.selected yoo-icon, .drawflow-container .outer-container .drawflow .drawflow-node.dataevents.selected yoo-icon, .drawflow-container .outer-container .drawflow .drawflow-node.trigger.selected yoo-icon {
+:host .drawflow-container .outer-container .drawflow .drawflow-node.select.selected yoo-icon, :host .drawflow-container .outer-container .drawflow .drawflow-node.events.selected yoo-icon, :host .drawflow-container .outer-container .drawflow .drawflow-node.dataevents.selected yoo-icon, :host .drawflow-container .outer-container .drawflow .drawflow-node.trigger.selected yoo-icon {
   fill: var(--light, #ffffff);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.select:hover, .drawflow-container .outer-container .drawflow .drawflow-node.events:hover, .drawflow-container .outer-container .drawflow .drawflow-node.dataevents:hover, .drawflow-container .outer-container .drawflow .drawflow-node.trigger:hover {
+:host .drawflow-container .outer-container .drawflow .drawflow-node.select:hover, :host .drawflow-container .outer-container .drawflow .drawflow-node.events:hover, :host .drawflow-container .outer-container .drawflow .drawflow-node.dataevents:hover, :host .drawflow-container .outer-container .drawflow .drawflow-node.trigger:hover {
   background: var(--accent-20, rgba(39, 110, 241, 0.2));
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.select .input, .drawflow-container .outer-container .drawflow .drawflow-node.events .input, .drawflow-container .outer-container .drawflow .drawflow-node.dataevents .input, .drawflow-container .outer-container .drawflow .drawflow-node.trigger .input {
+: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 {
   background: var(--accent, #276ef1);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.select .output, .drawflow-container .outer-container .drawflow .drawflow-node.events .output, .drawflow-container .outer-container .drawflow .drawflow-node.dataevents .output, .drawflow-container .outer-container .drawflow .drawflow-node.trigger .output {
+: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 {
   border-color: var(--accent, #276ef1);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.textcategory, .drawflow-container .outer-container .drawflow .drawflow-node.condition {
+:host .drawflow-container .outer-container .drawflow .drawflow-node.textcategory, :host .drawflow-container .outer-container .drawflow .drawflow-node.condition {
   border-color: var(--energized, #ffc043);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.textcategory.selected, .drawflow-container .outer-container .drawflow .drawflow-node.condition.selected {
+:host .drawflow-container .outer-container .drawflow .drawflow-node.textcategory.selected, :host .drawflow-container .outer-container .drawflow .drawflow-node.condition.selected {
   color: var(--dark, #000000);
   background: var(--energized, #ffc043);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.textcategory:hover, .drawflow-container .outer-container .drawflow .drawflow-node.condition:hover {
+:host .drawflow-container .outer-container .drawflow .drawflow-node.textcategory:hover, :host .drawflow-container .outer-container .drawflow .drawflow-node.condition:hover {
   background: var(--energized-20, rgba(255, 192, 67, 0.2));
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.textcategory .input, .drawflow-container .outer-container .drawflow .drawflow-node.condition .input {
+:host .drawflow-container .outer-container .drawflow .drawflow-node.textcategory .input, :host .drawflow-container .outer-container .drawflow .drawflow-node.condition .input {
   background: var(--energized, #ffc043);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.textcategory .output, .drawflow-container .outer-container .drawflow .drawflow-node.condition .output {
+:host .drawflow-container .outer-container .drawflow .drawflow-node.textcategory .output, :host .drawflow-container .outer-container .drawflow .drawflow-node.condition .output {
   border-color: var(--energized, #ffc043);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.number, .drawflow-container .outer-container .drawflow .drawflow-node.appcreatorapp, .drawflow-container .outer-container .drawflow .drawflow-node.customfield, .drawflow-container .outer-container .drawflow .drawflow-node.lesson, .drawflow-container .outer-container .drawflow .drawflow-node.boostcontent {
+:host .drawflow-container .outer-container .drawflow .drawflow-node.number, :host .drawflow-container .outer-container .drawflow .drawflow-node.appcreatorapp, :host .drawflow-container .outer-container .drawflow .drawflow-node.customfield, :host .drawflow-container .outer-container .drawflow .drawflow-node.lesson, :host .drawflow-container .outer-container .drawflow .drawflow-node.boostcontent {
   border-color: var(--app-color, #5a30f4);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.number.selected, .drawflow-container .outer-container .drawflow .drawflow-node.appcreatorapp.selected, .drawflow-container .outer-container .drawflow .drawflow-node.customfield.selected, .drawflow-container .outer-container .drawflow .drawflow-node.lesson.selected, .drawflow-container .outer-container .drawflow .drawflow-node.boostcontent.selected {
+:host .drawflow-container .outer-container .drawflow .drawflow-node.number.selected, :host .drawflow-container .outer-container .drawflow .drawflow-node.appcreatorapp.selected, :host .drawflow-container .outer-container .drawflow .drawflow-node.customfield.selected, :host .drawflow-container .outer-container .drawflow .drawflow-node.lesson.selected, :host .drawflow-container .outer-container .drawflow .drawflow-node.boostcontent.selected {
   color: var(--light, #ffffff);
   background: var(--app-color, #5a30f4);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.number.selected yoo-icon, .drawflow-container .outer-container .drawflow .drawflow-node.appcreatorapp.selected yoo-icon, .drawflow-container .outer-container .drawflow .drawflow-node.customfield.selected yoo-icon, .drawflow-container .outer-container .drawflow .drawflow-node.lesson.selected yoo-icon, .drawflow-container .outer-container .drawflow .drawflow-node.boostcontent.selected yoo-icon {
+:host .drawflow-container .outer-container .drawflow .drawflow-node.number.selected yoo-icon, :host .drawflow-container .outer-container .drawflow .drawflow-node.appcreatorapp.selected yoo-icon, :host .drawflow-container .outer-container .drawflow .drawflow-node.customfield.selected yoo-icon, :host .drawflow-container .outer-container .drawflow .drawflow-node.lesson.selected yoo-icon, :host .drawflow-container .outer-container .drawflow .drawflow-node.boostcontent.selected yoo-icon {
   fill: var(--light, #ffffff);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.number:hover, .drawflow-container .outer-container .drawflow .drawflow-node.appcreatorapp:hover, .drawflow-container .outer-container .drawflow .drawflow-node.customfield:hover, .drawflow-container .outer-container .drawflow .drawflow-node.lesson:hover, .drawflow-container .outer-container .drawflow .drawflow-node.boostcontent:hover {
+:host .drawflow-container .outer-container .drawflow .drawflow-node.number:hover, :host .drawflow-container .outer-container .drawflow .drawflow-node.appcreatorapp:hover, :host .drawflow-container .outer-container .drawflow .drawflow-node.customfield:hover, :host .drawflow-container .outer-container .drawflow .drawflow-node.lesson:hover, :host .drawflow-container .outer-container .drawflow .drawflow-node.boostcontent:hover {
   background: var(--app-color-20, rgba(90, 48, 244, 0.2));
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.number .input, .drawflow-container .outer-container .drawflow .drawflow-node.appcreatorapp .input, .drawflow-container .outer-container .drawflow .drawflow-node.customfield .input, .drawflow-container .outer-container .drawflow .drawflow-node.lesson .input, .drawflow-container .outer-container .drawflow .drawflow-node.boostcontent .input {
+: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 {
   background: var(--app-color, #5a30f4);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.number .output, .drawflow-container .outer-container .drawflow .drawflow-node.appcreatorapp .output, .drawflow-container .outer-container .drawflow .drawflow-node.customfield .output, .drawflow-container .outer-container .drawflow .drawflow-node.lesson .output, .drawflow-container .outer-container .drawflow .drawflow-node.boostcontent .output {
+: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 {
   border-color: var(--app-color, #5a30f4);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.contactdetail, .drawflow-container .outer-container .drawflow .drawflow-node.engage, .drawflow-container .outer-container .drawflow .drawflow-node.information, .drawflow-container .outer-container .drawflow .drawflow-node.nativeactions, .drawflow-container .outer-container .drawflow .drawflow-node.entity, .drawflow-container .outer-container .drawflow .drawflow-node.notification {
+:host .drawflow-container .outer-container .drawflow .drawflow-node.contactdetail, :host .drawflow-container .outer-container .drawflow .drawflow-node.engage, :host .drawflow-container .outer-container .drawflow .drawflow-node.information, :host .drawflow-container .outer-container .drawflow .drawflow-node.nativeactions, :host .drawflow-container .outer-container .drawflow .drawflow-node.entity, :host .drawflow-container .outer-container .drawflow .drawflow-node.notification {
   border-color: var(--warning, #ed6e33);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.contactdetail.selected, .drawflow-container .outer-container .drawflow .drawflow-node.engage.selected, .drawflow-container .outer-container .drawflow .drawflow-node.information.selected, .drawflow-container .outer-container .drawflow .drawflow-node.nativeactions.selected, .drawflow-container .outer-container .drawflow .drawflow-node.entity.selected, .drawflow-container .outer-container .drawflow .drawflow-node.notification.selected {
+:host .drawflow-container .outer-container .drawflow .drawflow-node.contactdetail.selected, :host .drawflow-container .outer-container .drawflow .drawflow-node.engage.selected, :host .drawflow-container .outer-container .drawflow .drawflow-node.information.selected, :host .drawflow-container .outer-container .drawflow .drawflow-node.nativeactions.selected, :host .drawflow-container .outer-container .drawflow .drawflow-node.entity.selected, :host .drawflow-container .outer-container .drawflow .drawflow-node.notification.selected {
   color: var(--light, #ffffff);
   background: var(--warning, #ed6e33);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.contactdetail.selected yoo-icon, .drawflow-container .outer-container .drawflow .drawflow-node.engage.selected yoo-icon, .drawflow-container .outer-container .drawflow .drawflow-node.information.selected yoo-icon, .drawflow-container .outer-container .drawflow .drawflow-node.nativeactions.selected yoo-icon, .drawflow-container .outer-container .drawflow .drawflow-node.entity.selected yoo-icon, .drawflow-container .outer-container .drawflow .drawflow-node.notification.selected yoo-icon {
+:host .drawflow-container .outer-container .drawflow .drawflow-node.contactdetail.selected yoo-icon, :host .drawflow-container .outer-container .drawflow .drawflow-node.engage.selected yoo-icon, :host .drawflow-container .outer-container .drawflow .drawflow-node.information.selected yoo-icon, :host .drawflow-container .outer-container .drawflow .drawflow-node.nativeactions.selected yoo-icon, :host .drawflow-container .outer-container .drawflow .drawflow-node.entity.selected yoo-icon, :host .drawflow-container .outer-container .drawflow .drawflow-node.notification.selected yoo-icon {
   fill: var(--light, #ffffff);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.contactdetail:hover, .drawflow-container .outer-container .drawflow .drawflow-node.engage:hover, .drawflow-container .outer-container .drawflow .drawflow-node.information:hover, .drawflow-container .outer-container .drawflow .drawflow-node.nativeactions:hover, .drawflow-container .outer-container .drawflow .drawflow-node.entity:hover, .drawflow-container .outer-container .drawflow .drawflow-node.notification:hover {
+:host .drawflow-container .outer-container .drawflow .drawflow-node.contactdetail:hover, :host .drawflow-container .outer-container .drawflow .drawflow-node.engage:hover, :host .drawflow-container .outer-container .drawflow .drawflow-node.information:hover, :host .drawflow-container .outer-container .drawflow .drawflow-node.nativeactions:hover, :host .drawflow-container .outer-container .drawflow .drawflow-node.entity:hover, :host .drawflow-container .outer-container .drawflow .drawflow-node.notification:hover {
   background: var(--warning-20, rgba(237, 110, 51, 0.2));
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.contactdetail .input, .drawflow-container .outer-container .drawflow .drawflow-node.engage .input, .drawflow-container .outer-container .drawflow .drawflow-node.information .input, .drawflow-container .outer-container .drawflow .drawflow-node.nativeactions .input, .drawflow-container .outer-container .drawflow .drawflow-node.entity .input, .drawflow-container .outer-container .drawflow .drawflow-node.notification .input {
+: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 {
   background: var(--warning, #ed6e33);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.contactdetail .output, .drawflow-container .outer-container .drawflow .drawflow-node.engage .output, .drawflow-container .outer-container .drawflow .drawflow-node.information .output, .drawflow-container .outer-container .drawflow .drawflow-node.nativeactions .output, .drawflow-container .outer-container .drawflow .drawflow-node.entity .output, .drawflow-container .outer-container .drawflow .drawflow-node.notification .output {
+:host .drawflow-container .outer-container .drawflow .drawflow-node.contactdetail .output, :host .drawflow-container .outer-container .drawflow .drawflow-node.engage .output, :host .drawflow-container .outer-container .drawflow .drawflow-node.information .output, :host .drawflow-container .outer-container .drawflow .drawflow-node.nativeactions .output, :host .drawflow-container .outer-container .drawflow .drawflow-node.entity .output, :host .drawflow-container .outer-container .drawflow .drawflow-node.notification .output {
   border-color: var(--warning, #ed6e33);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.no-scoring {
+:host .drawflow-container .outer-container .drawflow .drawflow-node.no-scoring {
   border-color: var(--text-color, #807f83);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.no-scoring.selected {
+:host .drawflow-container .outer-container .drawflow .drawflow-node.no-scoring.selected {
   color: var(--dark, #000000);
   background: var(--text-color, #807f83);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.no-scoring:hover {
+:host .drawflow-container .outer-container .drawflow .drawflow-node.no-scoring:hover {
   background: var(--text-color-20, rgba(128, 127, 131, 0.2));
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.no-scoring .input {
+:host .drawflow-container .outer-container .drawflow .drawflow-node.no-scoring .input {
   background: var(--text-color, #807f83);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.no-scoring .output {
+:host .drawflow-container .outer-container .drawflow .drawflow-node.no-scoring .output {
   border-color: var(--text-color, #807f83);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.actioncategory, .drawflow-container .outer-container .drawflow .drawflow-node.logic {
+:host .drawflow-container .outer-container .drawflow .drawflow-node.actioncategory, :host .drawflow-container .outer-container .drawflow .drawflow-node.logic {
   border-color: var(--anthracite, #1a1a1a);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.actioncategory.selected, .drawflow-container .outer-container .drawflow .drawflow-node.logic.selected {
+:host .drawflow-container .outer-container .drawflow .drawflow-node.actioncategory.selected, :host .drawflow-container .outer-container .drawflow .drawflow-node.logic.selected {
   color: var(--light, #ffffff);
   background: var(--anthracite, #1a1a1a);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.actioncategory.selected yoo-icon, .drawflow-container .outer-container .drawflow .drawflow-node.logic.selected yoo-icon {
+:host .drawflow-container .outer-container .drawflow .drawflow-node.actioncategory.selected yoo-icon, :host .drawflow-container .outer-container .drawflow .drawflow-node.logic.selected yoo-icon {
   fill: var(--light, #ffffff);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.actioncategory:hover, .drawflow-container .outer-container .drawflow .drawflow-node.logic:hover {
+:host .drawflow-container .outer-container .drawflow .drawflow-node.actioncategory:hover, :host .drawflow-container .outer-container .drawflow .drawflow-node.logic:hover {
   background: var(--anthracite-20, rgba(26, 26, 26, 0.2));
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.actioncategory .input, .drawflow-container .outer-container .drawflow .drawflow-node.logic .input {
+:host .drawflow-container .outer-container .drawflow .drawflow-node.actioncategory .input, :host .drawflow-container .outer-container .drawflow .drawflow-node.logic .input {
   background: var(--anthracite, #1a1a1a);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.actioncategory .output, .drawflow-container .outer-container .drawflow .drawflow-node.logic .output {
+:host .drawflow-container .outer-container .drawflow .drawflow-node.actioncategory .output, :host .drawflow-container .outer-container .drawflow .drawflow-node.logic .output {
   border-color: var(--anthracite, #1a1a1a);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.dateandtime, .drawflow-container .outer-container .drawflow .drawflow-node.waitfor {
+:host .drawflow-container .outer-container .drawflow .drawflow-node.dateandtime, :host .drawflow-container .outer-container .drawflow .drawflow-node.waitfor {
   border-color: var(--dark, #000000);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.dateandtime.selected, .drawflow-container .outer-container .drawflow .drawflow-node.waitfor.selected {
+:host .drawflow-container .outer-container .drawflow .drawflow-node.dateandtime.selected, :host .drawflow-container .outer-container .drawflow .drawflow-node.waitfor.selected {
   color: var(--light, #ffffff);
   background: var(--dark, #000000);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.dateandtime.selected yoo-icon, .drawflow-container .outer-container .drawflow .drawflow-node.waitfor.selected yoo-icon {
+:host .drawflow-container .outer-container .drawflow .drawflow-node.dateandtime.selected yoo-icon, :host .drawflow-container .outer-container .drawflow .drawflow-node.waitfor.selected yoo-icon {
   fill: var(--light, #ffffff);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.dateandtime:hover, .drawflow-container .outer-container .drawflow .drawflow-node.waitfor:hover {
+:host .drawflow-container .outer-container .drawflow .drawflow-node.dateandtime:hover, :host .drawflow-container .outer-container .drawflow .drawflow-node.waitfor:hover {
   background: var(--dark-20, rgba(0, 0, 0, 0.2));
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.dateandtime .input, .drawflow-container .outer-container .drawflow .drawflow-node.waitfor .input {
+:host .drawflow-container .outer-container .drawflow .drawflow-node.dateandtime .input, :host .drawflow-container .outer-container .drawflow .drawflow-node.waitfor .input {
   background: var(--dark, #000000);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.dateandtime .output, .drawflow-container .outer-container .drawflow .drawflow-node.waitfor .output {
+:host .drawflow-container .outer-container .drawflow .drawflow-node.dateandtime .output, :host .drawflow-container .outer-container .drawflow .drawflow-node.waitfor .output {
   border-color: var(--dark, #000000);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.catalogandbarcode, .drawflow-container .outer-container .drawflow .drawflow-node.notifications {
+:host .drawflow-container .outer-container .drawflow .drawflow-node.catalogandbarcode, :host .drawflow-container .outer-container .drawflow .drawflow-node.notifications {
   border-color: var(--danger, #d44333);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.catalogandbarcode.selected, .drawflow-container .outer-container .drawflow .drawflow-node.notifications.selected {
+:host .drawflow-container .outer-container .drawflow .drawflow-node.catalogandbarcode.selected, :host .drawflow-container .outer-container .drawflow .drawflow-node.notifications.selected {
   color: var(--light, #ffffff);
   background: var(--danger, #d44333);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.catalogandbarcode.selected yoo-icon, .drawflow-container .outer-container .drawflow .drawflow-node.notifications.selected yoo-icon {
+:host .drawflow-container .outer-container .drawflow .drawflow-node.catalogandbarcode.selected yoo-icon, :host .drawflow-container .outer-container .drawflow .drawflow-node.notifications.selected yoo-icon {
   fill: var(--light, #ffffff);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.catalogandbarcode:hover, .drawflow-container .outer-container .drawflow .drawflow-node.notifications:hover {
+:host .drawflow-container .outer-container .drawflow .drawflow-node.catalogandbarcode:hover, :host .drawflow-container .outer-container .drawflow .drawflow-node.notifications:hover {
   background: var(--danger-20, rgba(212, 67, 51, 0.2));
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.catalogandbarcode .input, .drawflow-container .outer-container .drawflow .drawflow-node.notifications .input {
+:host .drawflow-container .outer-container .drawflow .drawflow-node.catalogandbarcode .input, :host .drawflow-container .outer-container .drawflow .drawflow-node.notifications .input {
   background: var(--danger, #d44333);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.catalogandbarcode .output, .drawflow-container .outer-container .drawflow .drawflow-node.notifications .output {
+:host .drawflow-container .outer-container .drawflow .drawflow-node.catalogandbarcode .output, :host .drawflow-container .outer-container .drawflow .drawflow-node.notifications .output {
   border-color: var(--danger, #d44333);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.condition {
+:host .drawflow-container .outer-container .drawflow .drawflow-node.condition {
   border-color: var(--stable, #adadad);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.condition.selected {
+:host .drawflow-container .outer-container .drawflow .drawflow-node.condition.selected {
   color: var(--dark, #000000);
   background: var(--stable, #adadad);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.condition:hover {
+:host .drawflow-container .outer-container .drawflow .drawflow-node.condition:hover {
   background: var(--stable-20, rgba(173, 173, 173, 0.2));
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.condition .input {
+:host .drawflow-container .outer-container .drawflow .drawflow-node.condition .input {
   background: var(--stable, #adadad);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.condition .output {
+:host .drawflow-container .outer-container .drawflow .drawflow-node.condition .output {
   border-color: var(--stable, #adadad);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.page, .drawflow-container .outer-container .drawflow .drawflow-node.dataactions, .drawflow-container .outer-container .drawflow .drawflow-node.operate {
+:host .drawflow-container .outer-container .drawflow .drawflow-node.page, :host .drawflow-container .outer-container .drawflow .drawflow-node.dataactions, :host .drawflow-container .outer-container .drawflow .drawflow-node.operate {
   border-color: var(--success, #3aa76d);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.page.selected, .drawflow-container .outer-container .drawflow .drawflow-node.dataactions.selected, .drawflow-container .outer-container .drawflow .drawflow-node.operate.selected {
+:host .drawflow-container .outer-container .drawflow .drawflow-node.page.selected, :host .drawflow-container .outer-container .drawflow .drawflow-node.dataactions.selected, :host .drawflow-container .outer-container .drawflow .drawflow-node.operate.selected {
   color: var(--light, #ffffff);
   background: var(--success, #3aa76d);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.page.selected yoo-icon, .drawflow-container .outer-container .drawflow .drawflow-node.dataactions.selected yoo-icon, .drawflow-container .outer-container .drawflow .drawflow-node.operate.selected yoo-icon {
+:host .drawflow-container .outer-container .drawflow .drawflow-node.page.selected yoo-icon, :host .drawflow-container .outer-container .drawflow .drawflow-node.dataactions.selected yoo-icon, :host .drawflow-container .outer-container .drawflow .drawflow-node.operate.selected yoo-icon {
   fill: var(--light, #ffffff);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.page:hover, .drawflow-container .outer-container .drawflow .drawflow-node.dataactions:hover, .drawflow-container .outer-container .drawflow .drawflow-node.operate:hover {
+:host .drawflow-container .outer-container .drawflow .drawflow-node.page:hover, :host .drawflow-container .outer-container .drawflow .drawflow-node.dataactions:hover, :host .drawflow-container .outer-container .drawflow .drawflow-node.operate:hover {
   background: var(--success-20, rgba(58, 167, 109, 0.2));
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.page .input, .drawflow-container .outer-container .drawflow .drawflow-node.dataactions .input, .drawflow-container .outer-container .drawflow .drawflow-node.operate .input {
+: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 {
   background: var(--success, #3aa76d);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node.page .output, .drawflow-container .outer-container .drawflow .drawflow-node.dataactions .output, .drawflow-container .outer-container .drawflow .drawflow-node.operate .output {
+: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 {
   border-color: var(--success, #3aa76d);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node .title-box {
+:host .drawflow-container .outer-container .drawflow .drawflow-node .block-container {
   display: flex;
+  flex-direction: column;
+}
+:host .drawflow-container .outer-container .drawflow .drawflow-node .title-box {
+  display: flex;
+  flex: 1;
+}
+:host .drawflow-container .outer-container .drawflow .drawflow-node .title-box .title-text {
+  flex: 1;
 }
-.drawflow-container .outer-container .drawflow .drawflow-node .title-box yoo-icon.margin-right {
+:host .drawflow-container .outer-container .drawflow .drawflow-node .title-box yoo-icon.margin-right {
   margin-right: var(--spacing-08, 0.5rem);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node .title-box yoo-icon.margin-left {
+:host .drawflow-container .outer-container .drawflow .drawflow-node .title-box yoo-icon.margin-left {
   margin-left: var(--spacing-08, 0.5rem);
 }
-.drawflow-container .outer-container .drawflow .drawflow-node .title-box:hover yoo-icon[name=settings] {
+:host .drawflow-container .outer-container .drawflow .drawflow-node .title-box:hover yoo-icon[name=settings] {
   opacity: 1;
 }
-.drawflow-container .outer-container .drawflow .drawflow-node .title-box yoo-icon[name=settings] {
+:host .drawflow-container .outer-container .drawflow .drawflow-node .title-box yoo-icon[name=settings] {
   cursor: pointer;
   opacity: 0.3;
 }