@aj-shadow/z-abs-complayer-bootstrap-client 0.0.0-aj-beta.221

package/project/client/icons-inline/icon-communication-instance.jsx

@@ -0,0 +1,28 @@
+
+'use strict';
+
+import InnerIconMessage from './inner-icons/inner-icon-message';
+import InnerIconInstanceType from './inner-icons/inner-icon-instance-type';
+import ReactComponentBase from 'z-abs-corelayer-client/client/react-component/react-component-base';
+import React from 'react';
+
+
+export default class IconCommunicationInstance extends ReactComponentBase {
+  constructor(props) {
+    super(props);
+  }
+  
+  shouldUpdate(nextProps, nextState) {
+    return !this.shallowCompare(this.props, nextProps);
+  }
+  
+  render() {
+    const stroke = "#333";
+    return (
+      <svg width="100%" height="100%" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <InnerIconMessage stroke={stroke} />
+        <InnerIconInstanceType />
+      </svg>
+    );  
+  }
+}

package/project/client/icons-inline/icon-communication-ip.jsx

@@ -0,0 +1,30 @@
+
+'use strict';
+
+import InnerIconMessage from './inner-icons/inner-icon-message'; 
+import ReactComponentBase from 'z-abs-corelayer-client/client/react-component/react-component-base';
+import React from 'react';
+
+
+export default class IconCommunicationIp extends ReactComponentBase {
+  constructor(props) {
+    super(props);
+  }
+  
+  static stroke = "#333";
+  static strokeWidth = "0.5";
+  
+  shouldUpdate(nextProps, nextState) {
+    return !this.shallowCompare(this.props, nextProps);
+  }
+  
+  render() {
+    return (
+      <svg width="100%" height="100%" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <InnerIconMessage stroke={IconCommunicationIp.stroke} />
+        <path stroke={IconCommunicationIp.stroke} strokeWidth={IconCommunicationIp.strokeWidth} d="M12 10 C9.66 10 7.5 11.8 7.5 14 C7.5 17.2 12 22 12 22 C12 22 16.5 17.2 16.5 14 C16.5 11.8 14.34 10 12 10 Z" fill="Gold" />
+        <circle stroke={IconCommunicationIp.stroke} strokeWidth={IconCommunicationIp.strokeWidth} cx="12" cy="14" r="2" fill="white"/>
+      </svg>
+    );  
+  }
+}

package/project/client/icons-inline/icon-communication-stack.jsx

@@ -0,0 +1,28 @@
+
+'use strict';
+
+import InnerIconMessage from './inner-icons/inner-icon-message';
+import InnerIconStackType from './inner-icons/inner-icon-stack-type';
+import ReactComponentBase from 'z-abs-corelayer-client/client/react-component/react-component-base';
+import React from 'react';
+
+
+export default class IconCommunicationStack extends ReactComponentBase {
+  constructor(props) {
+    super(props);
+  }
+  
+  shouldUpdate(nextProps, nextState) {
+    return !this.shallowCompare(this.props, nextProps);
+  }
+  
+  render() {
+    const stroke = "#333";
+    return (
+      <svg width="100%" height="100%" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <InnerIconMessage stroke={stroke} />
+        <InnerIconStackType />
+      </svg>
+    );  
+  }
+}

package/project/client/icons-inline/icon-communication-transport.jsx

@@ -0,0 +1,28 @@
+
+'use strict';
+
+import InnerIconMessage from './inner-icons/inner-icon-message'; 
+import ReactComponentBase from 'z-abs-corelayer-client/client/react-component/react-component-base';
+import React from 'react';
+
+
+export default class IconCommunicationTransport extends ReactComponentBase {
+  constructor(props) {
+    super(props);
+  }
+  
+  shouldUpdate(nextProps, nextState) {
+    return !this.shallowCompare(this.props, nextProps);
+  }
+  
+  render() {
+    const stroke = "#333";
+    const strokeWidth = "0.5";
+    return (
+      <svg width="100%" height="100%" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <InnerIconMessage stroke={stroke} />
+        <path stroke={stroke} strokeWidth={strokeWidth} d="M12 10 L17 12 L17 16 C17 19 14.5 22 12 22 C9.5 22 7 19 7 16 L7 12 Z" fill="Gold"/>
+      </svg>
+    );  
+  }
+}

package/project/client/icons-inline/icon-communication.jsx

@@ -0,0 +1,28 @@
+
+'use strict';
+
+import InnerIconMessage from './inner-icons/inner-icon-message'; 
+import ReactComponentBase from 'z-abs-corelayer-client/client/react-component/react-component-base';
+import React from 'react';
+
+
+export default class IconCommunication extends ReactComponentBase {
+  constructor(props) {
+    super(props);
+  }
+  
+  shouldUpdate(nextProps, nextState) {
+    return !this.shallowCompare(this.props, nextProps);
+  }
+  
+  render() {
+    const stroke = "#333";
+    return (
+      <svg width="100%" height="100%" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <g transform="translate(0,6.5)">
+          <InnerIconMessage stroke={stroke} />
+        </g>
+      </svg>
+    );  
+  }
+}

package/project/client/icons-inline/icon-con-connection-events.jsx

@@ -0,0 +1,29 @@
+
+'use strict';
+
+import InnerIconConnection from './inner-icons/inner-icon-connection'; 
+import ReactComponentBase from 'z-abs-corelayer-client/client/react-component/react-component-base';
+import React from 'react';
+
+
+export default class IconConConnectionEvents extends ReactComponentBase {
+  constructor(props) {
+    super(props);
+  }
+  
+  shouldUpdate(nextProps, nextState) {
+    return !this.shallowCompare(this.props, nextProps);
+  }
+  
+  render() {
+    const stroke = "#333";
+    return (
+      <svg width="100%" height="100%" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <InnerIconConnection stroke={stroke} />
+        <g transform="translate(24,10) scale(-1, 1)">
+          <InnerIconConnection stroke={stroke} />
+        </g>
+      </svg>
+    );  
+  }
+}

package/project/client/icons-inline/icon-con-message-events.jsx

@@ -0,0 +1,29 @@
+
+'use strict';
+
+import InnerIconMessage from './inner-icons/inner-icon-message'; 
+import ReactComponentBase from 'z-abs-corelayer-client/client/react-component/react-component-base';
+import React from 'react';
+
+
+export default class IconConMessageEvents extends ReactComponentBase {
+  constructor(props) {
+    super(props);
+  }
+  
+  shouldUpdate(nextProps, nextState) {
+    return !this.shallowCompare(this.props, nextProps);
+  }
+  
+  render() {
+    const stroke = "#333";
+    return (
+      <svg width="100%" height="100%" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <InnerIconMessage stroke={stroke} />
+        <g transform="translate(24,10) scale(-1, 1)">
+          <InnerIconMessage stroke={stroke} />
+        </g>
+      </svg>
+    );  
+  }
+}

package/project/client/icons-inline/icon-con-messages.jsx

@@ -0,0 +1,46 @@
+
+'use strict';
+
+import ReactComponentBase from 'z-abs-corelayer-client/client/react-component/react-component-base';
+import React from 'react';
+
+
+export default class IconConMessages extends ReactComponentBase {
+  constructor(props) {
+    super(props);
+  }
+  
+  shouldUpdate(nextProps, nextState) {
+    return !this.shallowCompare(this.props, nextProps);
+  }
+  
+  static TOP_POINT = 4;
+  static MIDDLE_TOP_POINT = IconConMessages.TOP_POINT + 4;
+  static MIDDLE_BOTTOM_POINT = IconConMessages.MIDDLE_TOP_POINT + 4;
+  static BOTTOM_POINT = IconConMessages.MIDDLE_BOTTOM_POINT + 4;
+  static WIDTH = 8;
+  static WIDTH_R = 16;
+  static LEFT_POINT = 4;
+  static MIDDLE_POINT = IconConMessages.LEFT_POINT + IconConMessages.WIDTH;
+  static RIGHT_POINT = IconConMessages.MIDDLE_POINT + IconConMessages.WIDTH;
+  
+  render() {
+    if(this.props.active) {
+      return (
+        <svg width="100%" height="100%" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <rect x={IconConMessages.LEFT_POINT} y={IconConMessages.TOP_POINT + 4} width={IconConMessages.WIDTH_R} height="8" stroke="none" strokeWidth="0.5" fill="White" />
+          <polygon stroke="#333" strokeWidth="0.5" fill="Gold" points={`${IconConMessages.LEFT_POINT},${IconConMessages.MIDDLE_TOP_POINT} ${IconConMessages.MIDDLE_POINT},${IconConMessages.MIDDLE_BOTTOM_POINT} ${IconConMessages.RIGHT_POINT},${IconConMessages.MIDDLE_TOP_POINT} ${IconConMessages.RIGHT_POINT},${IconConMessages.BOTTOM_POINT} ${IconConMessages.LEFT_POINT},${IconConMessages.BOTTOM_POINT} ${IconConMessages.LEFT_POINT},${IconConMessages.MIDDLE_TOP_POINT} ${IconConMessages.MIDDLE_POINT},${IconConMessages.TOP_POINT} ${IconConMessages.RIGHT_POINT},${IconConMessages.MIDDLE_TOP_POINT}`} />
+        </svg>
+      );
+    }
+    else {
+      return (
+        <svg width="100%" height="100%" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <rect x={IconConMessages.LEFT_POINT} y={IconConMessages.TOP_POINT + 4} width={IconConMessages.WIDTH_R} height="8" stroke="none" strokeWidth="0.5" fill="White" />
+          <polygon stroke="#333" strokeWidth="0.5" fill="Gold" points={`${IconConMessages.LEFT_POINT},${IconConMessages.MIDDLE_TOP_POINT} ${IconConMessages.MIDDLE_POINT},${IconConMessages.MIDDLE_BOTTOM_POINT} ${IconConMessages.RIGHT_POINT},${IconConMessages.MIDDLE_TOP_POINT} ${IconConMessages.RIGHT_POINT},${IconConMessages.BOTTOM_POINT} ${IconConMessages.LEFT_POINT},${IconConMessages.BOTTOM_POINT} ${IconConMessages.LEFT_POINT},${IconConMessages.MIDDLE_TOP_POINT}`} />
+          <polygon stroke="#333" strokeWidth="0.5" fill="Gold" points={`${IconConMessages.LEFT_POINT + 2},${IconConMessages.MIDDLE_TOP_POINT} ${IconConMessages.MIDDLE_POINT},${IconConMessages.MIDDLE_BOTTOM_POINT - 1} ${IconConMessages.RIGHT_POINT - 2},${IconConMessages.MIDDLE_TOP_POINT}`} />
+        </svg>
+      );
+    }
+  }
+}

package/project/client/icons-inline/icon-con-server-events.jsx

@@ -0,0 +1,29 @@
+
+'use strict';
+
+import InnerIconConnection from './inner-icons/inner-icon-connection'; 
+import ReactComponentBase from 'z-abs-corelayer-client/client/react-component/react-component-base';
+import React from 'react';
+
+
+export default class IconConServerEvents extends ReactComponentBase {
+  constructor(props) {
+    super(props);
+  }
+  
+  static stroke = "#333";
+  static strokeWidth = "0.3";
+  
+  shouldUpdate(nextProps, nextState) {
+    return !this.shallowCompare(this.props, nextProps);
+  }
+  
+  render() {
+    return (
+      <svg width="100%" height="100%" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <path d="M7,3.5 L15,8.5 L7,13.5 z" stroke={IconConServerEvents.stroke} strokeWidth={IconConServerEvents.strokeWidth} fill="Gold" />
+        <rect x="14" y="13" width="8" height="8" stroke={IconConServerEvents.stroke} strokeWidth={IconConServerEvents.strokeWidth} fill="Gold" />
+      </svg>
+    );  
+  }
+}

package/project/client/icons-inline/icon-debug-breakpoints-deactivate.jsx

@@ -0,0 +1,28 @@
+
+'use strict';
+
+import ReactComponentBase from 'z-abs-corelayer-client/client/react-component/react-component-base';
+import React from 'react';
+
+
+export default class IconDebugBreakpointsDeactivate extends ReactComponentBase {
+  constructor(props) {
+    super(props);
+  }
+  
+  static stroke = "cornflowerblue";
+  static fill = "none";
+  static strokeWidth = "2";
+  
+  shouldUpdate(nextProps, nextState) {
+    return !this.shallowCompare(this.props, nextProps);
+  }
+  
+  render() {
+    return (
+      <svg width="100%" height="100%" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <path className={this.props.colorMark} d="M4,9 L15,9 L19,12 L15,15 L4,15 z" stroke={IconDebugBreakpointsDeactivate.stroke} strokeWidth={IconDebugBreakpointsDeactivate.strokeWidth} fill={IconDebugBreakpointsDeactivate.fill} />
+      </svg>
+    );  
+  }
+}

package/project/client/icons-inline/icon-debug-breakpoints-remove.jsx

@@ -0,0 +1,27 @@
+
+'use strict';
+
+import ReactComponentBase from 'z-abs-corelayer-client/client/react-component/react-component-base';
+import React from 'react';
+
+
+export default class IconDebugBreakpointsRemove extends ReactComponentBase {
+  constructor(props) {
+    super(props);
+  }
+  
+  static stroke = "cornflowerblue";
+  static strokeWidth = "2";
+  
+  shouldUpdate(nextProps, nextState) {
+    return !this.shallowCompare(this.props, nextProps);
+  }
+  
+  render() {
+    return (
+      <svg width="100%" height="100%" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <path className={this.props.colorMark} d="M4,9 L15,9 L19,12 L15,15 L4,15 z" stroke={IconDebugBreakpointsRemove.stroke} strokeWidth={IconDebugBreakpointsRemove.strokeWidth} fill={IconDebugBreakpointsRemove.stroke} />
+      </svg>
+    );  
+  }
+}

package/project/client/icons-inline/icon-debug-continue.jsx

@@ -0,0 +1,27 @@
+
+'use strict';
+
+import ReactComponentBase from 'z-abs-corelayer-client/client/react-component/react-component-base';
+import React from 'react';
+
+
+export default class IconDebugContinue extends ReactComponentBase {
+  constructor(props) {
+    super(props);
+  }
+  
+  static stroke = "Crimson";
+  static strokeWidth = "0.3";
+  
+  shouldUpdate(nextProps, nextState) {
+    return !this.shallowCompare(this.props, nextProps);
+  }
+  
+  render() {
+    return (
+      <svg width="100%" height="100%" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <path className={this.props.colorMark} d="M9,7 L16,11.5 L9,16 z" stroke={IconDebugContinue.stroke} strokeWidth={IconDebugContinue.strokeWidth} fill={IconDebugContinue.stroke} />
+      </svg>
+    );  
+  }
+}

package/project/client/icons-inline/icon-debug-enter.jsx

@@ -0,0 +1,29 @@
+
+'use strict';
+
+import ReactComponentBase from 'z-abs-corelayer-client/client/react-component/react-component-base';
+import React from 'react';
+
+
+  export default class IconDebugEnter extends ReactComponentBase {
+  constructor(props) {
+    super(props);
+  }
+  
+  static stroke = "#333";
+  static strokeWidth = "1.5";
+  
+  shouldUpdate(nextProps, nextState) {
+    return !this.shallowCompare(this.props, nextProps);
+  }
+  
+  render() {
+    return (
+      <svg className="icon-inline" width="100%" height="100%" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+        <rect className={`icon_${this.props.colorMark}`} x="7" y="4.5" width="8" height="9" rx="2" ry="2" strokeWidth={IconDebugEnter.strokeWidth} fill="#eee" />
+        <line className={`icon_${this.props.colorMark}`} x1="2" x2="10" y1="9" y2="9" strokeWidth={IconDebugEnter.strokeWidth} />
+        <path className={`icon_${this.props.colorMark}`} d="M11,9, L9.5,8 L9.5,10 z" strokeWidth={IconDebugEnter.strokeWidth} />
+      </svg>
+    );
+  }
+}

package/project/client/icons-inline/icon-debug-gui.jsx

@@ -0,0 +1,36 @@
+
+'use strict';
+
+import ReactComponentBase from 'z-abs-corelayer-client/client/react-component/react-component-base';
+import React from 'react';
+
+
+  export default class IconDebugGui extends ReactComponentBase {
+  constructor(props) {
+    super(props);
+  }
+  
+  static crossStrokeWidth = "0.3";
+  static ropeStorke = "#555";
+  static ropeStrokeWidth="0.5";
+    
+  shouldUpdate(nextProps, nextState) {
+    return !this.shallowCompare(this.props, nextProps);
+  }
+    
+  render() {
+    return (
+      <svg className="icon-inline" width="100%" height="100%" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <g transform="translate(1,2)">
+          <line x1="11" x2="11" y1="20" y2="6" strokeLinecap="round" stroke={IconDebugGui.ropeStorke} strokeWidth={IconDebugGui.ropeStrokeWidth} />
+        	<line x1="7" x2="2" y1="20" y2="8" strokeLinecap="round" stroke={IconDebugGui.ropeStorke} strokeWidth={IconDebugGui.ropeStrokeWidth} />
+        	<line x1="15" x2="20" y1="20" y2="8" strokeLinecap="round" stroke={IconDebugGui.ropeStorke} strokeWidth={IconDebugGui.ropeStrokeWidth} />
+        	<line x1="9" x2="2" y1="20" y2="3" strokeLinecap="round" stroke={IconDebugGui.ropeStorke} strokeWidth={IconDebugGui.ropeStrokeWidth} />
+        	<line x1="13" x2="20" y1="20" y2="3" strokeLinecap="round" stroke={IconDebugGui.ropeStorke} strokeWidth={IconDebugGui.ropeStrokeWidth} />
+          <polygon className={`icon_${this.props.colorMark}`} strokeWidth={IconDebugGui.crossStrokeWidth} points="11,4 3,1 1,2 1,3 8,5 1,7 1,8 3,9 11,6.3 19,9 21,8 21,7 14,5 21,3 21,2 19,1" />
+          <path className={`icon_${this.props.colorMark}`} strokeWidth={IconDebugGui.crossStrokeWidth} fill="none" d="M11,4 L3,1 L1,2 L1,3 L8,5 L1,7 L1,8 L3,9 L11,6.3 L19,9 L21,8 L21,7 L14,5.1 L21,3 L21,2 L19,1 z M1,7 L3,8 L3,9 M3,8 L21,2 M19,9 L19,8 L21,7 M19,8 L11,5.3 M8,5 L11,4 M1,2 L9.35,4.5 M12.7,4.8 L14,5.1 M11,5.3 L11,6.3" />
+        </g>
+      </svg>
+    );
+  }
+}

package/project/client/icons-inline/icon-debug-ip.jsx

@@ -0,0 +1,28 @@
+
+'use strict';
+
+import ReactComponentBase from 'z-abs-corelayer-client/client/react-component/react-component-base';
+import React from 'react';
+
+
+  export default class IconDebugIp extends ReactComponentBase {
+  constructor(props) {
+    super(props);
+  }
+  
+  static stroke = "#333";
+  static strokeWidth = "0.3";
+  
+  shouldUpdate(nextProps, nextState) {
+    return !this.shallowCompare(this.props, nextProps);
+  }
+  
+  render() {
+    return (
+      <svg className="icon-inline" width="100%" height="100%" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+        <rect className={`icon_${this.props.colorMark}`} x="3" y="8" width="10" height="3" stroke={this.props.stroke} strokeWidth={IconDebugIp.strokeWidth} fill="#333" />
+        <path className={`icon_${this.props.colorMark}`} d="M11,6.5 L16,9.5 L11,12.5 z" stroke={this.props.stroke} strokeWidth={IconDebugIp.strokeWidth} fill={this.props.stroke} />
+      </svg>
+    );
+  }
+}

package/project/client/icons-inline/icon-debug-leave.jsx

@@ -0,0 +1,29 @@
+
+'use strict';
+
+import ReactComponentBase from 'z-abs-corelayer-client/client/react-component/react-component-base';
+import React from 'react';
+
+
+  export default class IconDebugLeave extends ReactComponentBase {
+  constructor(props) {
+    super(props);
+  }
+  
+  static stroke = "#333";
+  static strokeWidth = "1.5";
+  
+  shouldUpdate(nextProps, nextState) {
+    return !this.shallowCompare(this.props, nextProps);
+  }
+  
+  render() {
+    return (
+      <svg className="icon-inline" width="100%" height="100%" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+        <rect className={`icon_${this.props.colorMark}`} x="7" y="4.5" width="8" height="9" rx="2" ry="2" strokeWidth={IconDebugLeave.strokeWidth} fill="#eee" />
+        <line className={`icon_${this.props.colorMark}`} x1="2" x2="11" y1="9" y2="9" strokeWidth={IconDebugLeave.strokeWidth} />
+        <path className={`icon_${this.props.colorMark}`} d="M2,9, L4,8 L4,10 z" strokeWidth={IconDebugLeave.strokeWidth} />
+      </svg>
+    );
+  }
+}

package/project/client/icons-inline/icon-debug-pause.jsx

@@ -0,0 +1,28 @@
+
+'use strict';
+
+import ReactComponentBase from 'z-abs-corelayer-client/client/react-component/react-component-base';
+import React from 'react';
+
+
+export default class IconDebugPause extends ReactComponentBase {
+  constructor(props) {
+    super(props);
+  }
+  
+  static stroke = "Crimson";
+  static strokeWidth = "3";
+  
+  shouldUpdate(nextProps, nextState) {
+    return !this.shallowCompare(this.props, nextProps);
+  }
+  
+  render() {
+    return (
+      <svg width="100%" height="100%" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <line x1="10" x2="10" y1="7.5" y2="16.5" stroke={IconDebugPause.stroke} strokeWidth={IconDebugPause.strokeWidth} fill={IconDebugPause.stroke} />
+        <line x1="14" x2="14" y1="7.5" y2="16.5" stroke={IconDebugPause.stroke} strokeWidth={IconDebugPause.strokeWidth} fill={IconDebugPause.stroke} />
+      </svg>
+    );  
+  }
+}

package/project/client/icons-inline/icon-debug-step-in.jsx

@@ -0,0 +1,30 @@
+
+'use strict';
+
+import ReactComponentBase from 'z-abs-corelayer-client/client/react-component/react-component-base';
+import React from 'react';
+
+
+export default class IconDebugStepIn extends ReactComponentBase {
+  constructor(props) {
+    super(props);
+  }
+  
+  static stroke = "Crimson";
+  static strokeWidth = "1.5";
+  
+  shouldUpdate(nextProps, nextState) {
+    return !this.shallowCompare(this.props, nextProps);
+  }
+  
+  render() {
+    return (
+      <svg width="100%" height="100%" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <circle cx="12" cy="18" r="2" stroke={IconDebugStepIn.stroke} strokeWidth={IconDebugStepIn.strokeWidth} fill={IconDebugStepIn.stroke} />
+        <line x1="12" x2="12" y1="4" y2="12" stroke={IconDebugStepIn.stroke} strokeWidth={IconDebugStepIn.strokeWidth} fill={IconDebugStepIn.stroke} />
+        <line x1="9" x2="12" y1="9" y2="12" stroke={IconDebugStepIn.stroke} strokeWidth={IconDebugStepIn.strokeWidth} fill={IconDebugStepIn.stroke} />
+        <line x1="15" x2="12" y1="9" y2="12" stroke={IconDebugStepIn.stroke} strokeWidth={IconDebugStepIn.strokeWidth} fill={IconDebugStepIn.stroke} />
+      </svg>
+    );  
+  }
+}

package/project/client/icons-inline/icon-debug-step-out.jsx

@@ -0,0 +1,30 @@
+
+'use strict';
+
+import ReactComponentBase from 'z-abs-corelayer-client/client/react-component/react-component-base';
+import React from 'react';
+
+
+export default class IconDebugStepOut extends ReactComponentBase {
+  constructor(props) {
+    super(props);
+  }
+  
+  static stroke = "Crimson";
+  static strokeWidth = "1.5";
+  
+  shouldUpdate(nextProps, nextState) {
+    return !this.shallowCompare(this.props, nextProps);
+  }
+  
+  render() {
+    return (
+      <svg width="100%" height="100%" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <circle cx="12" cy="18" r="2" stroke={IconDebugStepOut.stroke} strokeWidth={IconDebugStepOut.strokeWidth} fill={IconDebugStepOut.stroke} />
+        <line x1="12" x2="12" y1="4" y2="12" stroke={IconDebugStepOut.stroke} strokeWidth={IconDebugStepOut.strokeWidth} fill={IconDebugStepOut.stroke} />
+        <line x1="9" x2="12" y1="7" y2="4" stroke={IconDebugStepOut.stroke} strokeWidth={IconDebugStepOut.strokeWidth} fill={IconDebugStepOut.stroke} />
+        <line x1="15" x2="12" y1="7" y2="4" stroke={IconDebugStepOut.stroke} strokeWidth={IconDebugStepOut.strokeWidth} fill={IconDebugStepOut.stroke} />
+      </svg>
+    );  
+  }
+}

package/project/client/icons-inline/icon-debug-step-over.jsx

@@ -0,0 +1,30 @@
+
+'use strict';
+
+import ReactComponentBase from 'z-abs-corelayer-client/client/react-component/react-component-base';
+import React from 'react';
+
+
+export default class IconDebugStepOver extends ReactComponentBase {
+  constructor(props) {
+    super(props);
+  }
+  
+  static stroke = "Crimson";
+  static strokeWidth = "1.5";
+  
+  shouldUpdate(nextProps, nextState) {
+    return !this.shallowCompare(this.props, nextProps);
+  }
+  
+  render() {
+    return (
+      <svg width="100%" height="100%" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <circle cx="12" cy="18" r="2" stroke={IconDebugStepOver.stroke} strokeWidth={IconDebugStepOver.strokeWidth} fill={IconDebugStepOver.stroke} />
+        <path d="M6 12 A6 5 0 0 1 18 12" stroke={IconDebugStepOver.stroke} strokeWidth={IconDebugStepOver.strokeWidth} fill="none" />
+        <line x1="18.5" x2="19" y1="11" y2="7" stroke={IconDebugStepOver.stroke} strokeWidth={IconDebugStepOver.strokeWidth} fill={IconDebugStepOver.stroke} />
+        <line x1="19" x2="14" y1="12" y2="10" stroke={IconDebugStepOver.stroke} strokeWidth={IconDebugStepOver.strokeWidth} fill={IconDebugStepOver.stroke} />
+      </svg>
+    );  
+  }
+}

package/project/client/icons-inline/icon-debug-step.jsx

@@ -0,0 +1,32 @@
+
+'use strict';
+
+import ReactComponentBase from 'z-abs-corelayer-client/client/react-component/react-component-base';
+import React from 'react';
+
+
+export default class IconDebugStep extends ReactComponentBase {
+  constructor(props) {
+    super(props);
+  }
+  
+  static stroke = "Crimson";
+  static strokeWidth = "1.5";
+  
+  shouldUpdate(nextProps, nextState) {
+    return !this.shallowCompare(this.props, nextProps);
+  }
+  
+  render() {
+    return (
+      <svg width="100%" height="100%" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <g transform="rotate(270, 12, 12)">
+          <circle cx="12" cy="18" r="2" stroke={IconDebugStep.stroke} strokeWidth={IconDebugStep.strokeWidth} fill={IconDebugStep.stroke} />
+          <line x1="12" x2="12" y1="4" y2="12" stroke={IconDebugStep.stroke} strokeWidth={IconDebugStep.strokeWidth} fill={IconDebugStep.stroke} />
+          <line x1="9" x2="12" y1="9" y2="12" stroke={IconDebugStep.stroke} strokeWidth={IconDebugStep.strokeWidth} fill={IconDebugStep.stroke} />
+          <line x1="15" x2="12" y1="9" y2="12" stroke={IconDebugStep.stroke} strokeWidth={IconDebugStep.strokeWidth} fill={IconDebugStep.stroke} />
+        </g>
+      </svg>
+    );  
+  }
+}