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

package/project/client/images/actor-image.jsx

@@ -0,0 +1,260 @@
+
+'use strict';
+
+import ReactComponentBase from 'z-abs-corelayer-client/client/react-component/react-component-base';
+import React from 'react';
+
+
+export default class ActorImage extends ReactComponentBase {
+  constructor(props) {
+    super(props);
+    this.svgId1 = `actor_image_id_${++ActorImage.ID}`;
+    this.gradientId1 = `actor_image_id_${++ActorImage.ID}`;
+    this.gradientId2 = `actor_image_id_${++ActorImage.ID}`;
+    this.clipFaceId1 = `actor_image_id_${++ActorImage.ID}`;
+    this.clipFaceId2 = `actor_image_id_${++ActorImage.ID}`;
+    this.clipEyesId1 = `actor_image_id_${++ActorImage.ID}`;
+    this.clipEyesId2 = `actor_image_id_${++ActorImage.ID}`;
+    this.clipEyesId3 = `actor_image_id_${++ActorImage.ID}`;
+    this.clipEyesId4 = `actor_image_id_${++ActorImage.ID}`;
+    this.clipMouthId1 = `actor_image_id_${++ActorImage.ID}`;
+    this.clipMouthId2 = `actor_image_id_${++ActorImage.ID}`;
+  }
+  
+  shouldUpdate(nextProps, nextState) {
+    return !this.shallowCompare(this.props, nextProps)
+  }
+  
+  renderHappyEyes() {
+    return (
+      <>
+        <defs>
+          <clipPath id={this.clipEyesId1}>
+            <rect x="-17.963" y="24.643" width="35.509" height="13.947" style={{fill:'#00ffff',opacity:.88,strokeWidth:.5}}/>
+          </clipPath>
+          <clipPath id={this.clipEyesId2}>
+            <path d="m-187.33 23.75h40.461v25.231h-40.461zm40.937 18.69a20.621 10.097 0 0 0-20.621-10.097 20.621 10.097 0 0 0-20.621 10.097 20.621 10.097 0 0 0 20.621 10.097 20.621 10.097 0 0 0 20.621-10.097z" style={{fill:'#000000',strokeWidth:.5}}/>
+          </clipPath>
+          <mask id={this.clipEyesId4} maskUnits="userSpaceOnUse">
+            <rect x="-187.94" y="17.834" width="100.11" height="18.311" style={{fill:'#00ffff',strokeWidth:.39097}}/>
+          </mask>
+          <clipPath id={this.clipEyesId3}>
+            <rect x="43.387" y="24.643" width="35.509" height="13.947" style={{fill:'#00ffff',opacity:.88,strokeWidth:.5}}/>
+          </clipPath>
+        </defs>
+        <g transform="translate(-48.095 -72.04)">
+          <g transform="matrix(.26458 0 0 .26458 58.163 73.501)" clipPath={`url(#${this.clipEyesId3})`} style={{fill:'#000000'}}>
+            <g style={{fill:'#000000'}}>
+              <path transform="translate(227.26 2.3958)" d="m-151.87 36.365c-4.5191 10.664-25.942 10.664-30.461 0 3.0147-9.9982 27.128-10.829 30.461 0z" clipPath={`url(#${this.clipEyesId2})`} style={{fill:'#000000',strokeWidth:.5}}/>
+           </g>
+          </g>
+          <g transform="matrix(.26458 0 0 .26458 58.163 73.501)" clipPath={`url(#${this.clipEyesId1})`} style={{fill:'#000000'}}>
+            <path transform="translate(168.22 2.3964)" d="m-151.87 36.365c-4.5191 10.664-25.942 10.664-30.461 0 3.0147-9.9982 27.128-10.829 30.461 0z" clipPath={`url(#${this.clipEyesId2})`} mask={`url(#${this.clipEyesId4})`} style={{fill:'#000000',strokeWidth:.5}}/>
+            <g style={{fill:'#000000'}}>
+              <g style={{fill:'#000000'}}>
+                <path transform="translate(168.22 2.3964)" d="m-151.87 36.365c-4.5191 10.664-25.942 10.664-30.461 0 3.0147-9.9982 27.128-10.829 30.461 0z" clipPath={`url(#${this.clipEyesId2})`} style={{fill:'#000000',strokeWidth:.5}}/>
+              </g>
+            </g>
+          </g>
+        </g>
+      </>
+    );
+  }
+  
+  renderHappyMouth() {
+    return (
+      <>
+        <defs>
+          <clipPath id={this.clipMouthId1}>
+            <rect x="157.19" y="81.681" width="50.312" height="15.863" style={{fill:'#00ffff',opacity:.81,strokeWidth:.32444}}/>
+          </clipPath>
+          <clipPath id={this.clipMouthId2}>
+            <ellipse cx="166.94" cy="92.752" rx="44.665" ry="18.482" d="M 211.60769,92.752457 A 44.664925,18.482038 0 0 1 166.94276,111.2345 44.664925,18.482038 0 0 1 122.27784,92.752457 44.664925,18.482038 0 0 1 166.94276,74.270418 44.664925,18.482038 0 0 1 211.60769,92.752457 Z" style={{display:'none',fill:'#00ffff',strokeWidth:.55464}}/>
+            <path d="m122.07 69.27h89.747v52.611h-89.747zm89.538 23.482a44.665 18.482 0 0 0-44.665-18.482 44.665 18.482 0 0 0-44.665 18.482 44.665 18.482 0 0 0 44.665 18.482 44.665 18.482 0 0 0 44.665-18.482z" style={{fill:'#00ffff',strokeWidth:.55464}}/>
+          </clipPath>
+        </defs>
+        <g transform="translate(-48.095 -72.04)">
+          <g transform="matrix(.26458 0 0 .26458 58.163 73.501)" style={{fill:'#000000'}}>
+            <g transform="matrix(1.2299 0 0 1.2299 -193.91 -18.281)" clipPath={`url(#${this.clipMouthId1})`} style={{fill:'#000000'}}>
+              <path transform="matrix(.65233 0 0 1 73.612 -20.193)" d="m206.82 95.576a39.873 21.306 0 0 1-39.873 21.306 39.873 21.306 0 0 1-39.873-21.306 39.873 21.306 0 0 1 39.873-21.306 39.873 21.306 0 0 1 39.873 21.306z" clipPath={`url(#${this.clipMouthId2})`} style={{fill:'#000000',strokeWidth:.6466}}/>
+            </g>
+          </g>
+        </g>
+      </>
+    );
+  }
+  
+  renderOrigDef(gradient, className) {
+    const style = gradient ? {stopColor:'#ffffff'} : null;
+    return (gradient ? (
+      <linearGradient id={this.gradientId1} x1="85.044" x2="48.234" y1="72.133" y2="109.13" gradientUnits="userSpaceOnUse">
+        <stop style={{stopColor:'#ffffff'}} offset="0"/>
+        <stop className={className} offset="0.7"/>
+      </linearGradient>
+    ) : (
+      <linearGradient id={this.gradientId1} x1="85.044" x2="48.234" y1="72.133" y2="109.13" gradientUnits="userSpaceOnUse">
+        <stop className={className} offset="0"/>
+        <stop className={className} offset="0.7"/>
+      </linearGradient>
+    ));
+  }  
+  
+  renderOrigFace(className, gradient) {
+    return (
+      <>
+        <defs>
+          {this.renderOrigDef(gradient, className)}
+        </defs>
+        <g transform="translate(-48.095 -72.04)">
+          <path d="m51.343 77.901c-0.46729 6.4835-0.49861 12.41 1.8452 18.243 2.0701 4.8317 6.6449 9.519 10.048 10.639 3.1257 0.93514 6.5325 0.51298 9.4631-1.3636 2.8381-1.8766 5.675-4.7414 7.5944-9.6711 1.7519-4.2279 1.851-12.866 1.5023-18.494-0.10415-1.7519-0.92328-3.8275-3.0785-3.0805s-7.341 1.9927-11.151 2.0221c-4.2614 0.20295-8.4599-0.77321-12.475-2.1147-1.7444-0.5435-3.3795-0.07766-3.5576 1.8434-0.04341 0.2718-0.02793-0.14819-0.19029 1.9758z" fill="#ffffff" stroke="#000000" strokeWidth="1.292" style={{fill:`url(#${this.gradientId1})`,stroke:'#000000'}}/>
+        </g>
+      </>
+    );
+  }
+  
+  renderTermFace(className) {
+    return (
+      <>
+        <defs>
+          <linearGradient id={this.gradientId1} x1="48.234" x2="85.044" y1="72.133" y2="109.13" gradientUnits="userSpaceOnUse">
+            <stop style={{stopColor:'#ffffff'}} offset="0"/>
+            <stop className={className} offset="0.7"/>
+          </linearGradient>
+        </defs>
+        <g transform="translate(-48.095 -72.04)">
+          <path d="m51.343 77.901c-0.46729 6.4835-0.49861 12.41 1.8452 18.243 2.0701 4.8317 6.6449 9.519 10.048 10.639 3.1257 0.93514 6.5325 0.51298 9.4631-1.3636 2.8381-1.8766 5.675-4.7414 7.5944-9.6711 1.7519-4.2279 1.851-12.866 1.5023-18.494-0.10415-1.7519-0.92328-3.8275-3.0785-3.0805s-7.341 1.9927-11.151 2.0221c-4.2614 0.20295-8.4599-0.77321-12.475-2.1147-1.7444-0.5435-3.3795-0.07766-3.5576 1.8434-0.04341 0.2718-0.02793-0.14819-0.19029 1.9758z" fill="#ffffff" stroke="#000000" strokeWidth="1.292" style={{fill:`url(#${this.gradientId1})`,stroke:'#000000'}}/>
+        </g>
+      </>
+    );
+  }
+  
+  renderProxyDef(part, gradient, className) {
+    let left = null;
+    let right = null;
+    let leftGrad = null;
+    let rightGrad = null;
+    const style = gradient ? {stopColor:'#ffffff'} : null;
+    if(ActorImage.PROXY_PART_ALL === part || ActorImage.PROXY_PART_LEFT === part) {
+      left = (
+        <clipPath id={this.clipFaceId2}>
+          <rect x="48.234" y="72.133" width="18.7" height="37.042"/>
+        </clipPath>
+      );
+      leftGrad = (gradient ? (
+        <linearGradient id={this.gradientId2} x1="48.234" x2="85.044" y1="72.133" y2="109.13" gradientUnits="userSpaceOnUse">
+          <stop style={style} offset="0"/>
+          <stop className={className} offset="0.6"/>
+        </linearGradient>
+      ) : (
+        <linearGradient id={this.gradientId2} x1="48.234" x2="85.044" y1="72.133" y2="109.13" gradientUnits="userSpaceOnUse">
+          <stop className={className} offset="0"/>
+          <stop className={className} offset="0.6"/>
+        </linearGradient>
+      ));
+    }
+    if(ActorImage.PROXY_PART_ALL === part|| ActorImage.PROXY_PART_RIGHT === part) {
+      right = (
+        <clipPath id={this.clipFaceId1}>
+          <rect x="66.755" y="72.133" width="18.7" height="37.042"/>
+        </clipPath>
+      );
+      rightGrad = (gradient ? (
+        <linearGradient id={this.gradientId1} x1="85.044" x2="48.234" y1="72.133" y2="109.13" gradientUnits="userSpaceOnUse">
+          <stop style={style} offset="0"/>
+          <stop className={className} offset="0.6"/>
+        </linearGradient>
+      ) : (
+        <linearGradient id={this.gradientId1} x1="85.044" x2="48.234" y1="72.133" y2="109.13" gradientUnits="userSpaceOnUse">
+          <stop className={className} offset="0"/>
+          <stop className={className} offset="0.6"/>
+        </linearGradient>
+      ));
+    }
+    return (
+      <>
+        {left}
+        {leftGrad}
+        {right}
+        {rightGrad}
+      </>
+    );
+  }
+  
+  renderProxyFace(className, part, grad) {
+    return (
+      <>
+        <defs>
+          {this.renderProxyDef(part, grad, className)}
+        </defs>
+        <g transform="translate(-48.095 -72.04)">
+          <path d="m51.343 77.901c-0.46729 6.4835-0.49861 12.41 1.8452 18.243 2.0701 4.8317 6.6449 9.519 10.048 10.639 3.1257 0.93514 6.5325 0.51298 9.4631-1.3636 2.8381-1.8766 5.675-4.7414 7.5944-9.6711 1.7519-4.2279 1.851-12.866 1.5023-18.494-0.10415-1.7519-0.92328-3.8275-3.0785-3.0805s-7.341 1.9927-11.151 2.0221c-4.2614 0.20295-8.4599-0.77321-12.475-2.1147-1.7444-0.5435-3.3795-0.07766-3.5576 1.8434-0.04341 0.2718-0.02793-0.14819-0.19029 1.9758z" fill="#ffffff" stroke="#000000" strokeWidth="1.292" style={{fill:`url(#${this.gradientId1})`,stroke:'#000000'}} clipPath={`url(#${this.clipFaceId1})`} />
+          <path d="m51.343 77.901c-0.46729 6.4835-0.49861 12.41 1.8452 18.243 2.0701 4.8317 6.6449 9.519 10.048 10.639 3.1257 0.93514 6.5325 0.51298 9.4631-1.3636 2.8381-1.8766 5.675-4.7414 7.5944-9.6711 1.7519-4.2279 1.851-12.866 1.5023-18.494-0.10415-1.7519-0.92328-3.8275-3.0785-3.0805s-7.341 1.9927-11.151 2.0221c-4.2614 0.20295-8.4599-0.77321-12.475-2.1147-1.7444-0.5435-3.3795-0.07766-3.5576 1.8434-0.04341 0.2718-0.02793-0.14819-0.19029 1.9758z" fill="#ffffff" stroke="#000000" strokeWidth="1.292" style={{fill:`url(#${this.gradientId2})`,stroke:'#000000'}} clipPath={`url(#${this.clipFaceId2})`} />
+        </g>
+      </>
+    );
+  }
+  
+  renderFace(className) {
+    if('orig' === this.props.template.properties.face) {
+      return this.renderOrigFace(className, true);
+    }
+    else if('term' === this.props.template.properties.face) {
+      return this.renderTermFace(className);
+    }
+    else if('proxy' === this.props.template.properties.face) {
+      return this.renderProxyFace(className, ActorImage.PROXY_PART_ALL, true);
+    }
+    else if('cond' === this.props.template.properties.face) {
+      return this.renderOrigFace(className, true);
+    }
+    else if('local' === this.props.template.properties.face) {
+      return this.renderOrigFace(className, false);
+    }
+    else if('sut' === this.props.template.properties.face) {
+      return this.renderProxyFace(className, ActorImage.PROXY_PART_ALL, false);
+    }
+    else if('proxy_left' === this.props.template.properties.face) {
+      return this.renderProxyFace(className, ActorImage.PROXY_PART_LEFT, true);
+    }
+    else if('proxy_right' === this.props.template.properties.face) {
+      return this.renderProxyFace(className, ActorImage.PROXY_PART_RIGHT, true);
+    }
+  }
+  
+  renderEyes() {
+    if('happy' === this.props.template.properties.eyes) {
+      return this.renderHappyEyes();
+    }
+    else if('sad' === this.props.template.properties.eyes) {
+      return this.renderSadEyes();
+    }
+  }
+  
+  renderMouth() {
+    if('happy' === this.props.template.properties.mouth) {
+      return this.renderHappyMouth();
+    }
+    else if('sad' === this.props.template.properties.mouth) {
+      return this.renderSadMouth();
+    }
+  }
+  
+  render() {
+    const className = `seq_dia_protocol_${this.props.stackName}`;
+    return (
+      <div className="modal_dialog_icon">
+        <svg id={this.svgId1} width="100%" height="100%" version="1.1" viewBox="0 0 37.042 37.042" xmlns="http://www.w3.org/2000/svg">
+          {this.renderFace(className)}
+          {this.renderEyes()}
+          {this.renderMouth()}
+        </svg>
+      </div>
+    );
+  }
+}
+
+ActorImage.ID = 0;
+
+ActorImage.PROXY_PART_ALL = 0;
+ActorImage.PROXY_PART_LEFT = 1;
+ActorImage.PROXY_PART_RIGHT = 2;

package/project/client/images/file-image.jsx

@@ -0,0 +1,44 @@
+
+'use strict';
+
+import ReactComponentBase from 'z-abs-corelayer-client/client/react-component/react-component-base';
+import React from 'react';
+
+
+export default class FileImage extends ReactComponentBase {
+  constructor(props) {
+    super(props);
+  }
+  
+  shouldUpdate(nextProps, nextState) {
+    return !this.shallowCompare(this.props, nextProps)
+  }
+  
+  renderInner() {
+    if('class' === this.props.id) {
+      return (
+        <g id={`${this.props.id}_g`} transform="translate(-55.998 .001)" style={{fill:'#155193'}} aria-label="{;}">
+          <path d="m157 301.18q9.2448 5.7292 14.453 12.891 5.2083 7.0313 7.2917 18.099 2.0833 10.938 2.0833 28.125 0 12.891 0.52083 19.01 0.65105 6.1198 2.3438 9.2448 1.8229 3.2552 4.2969 4.1667 2.474 1.0417 8.4636 1.9531 4.9479 0.65104 8.2031 4.8177 3.2552 4.1667 3.2552 10.938 0 15.755-19.141 15.755-11.849 0-21.224-4.9479-9.2448-4.9479-14.323-14.063-5.0781-8.9844-5.2083-20.703-0.39063-19.792-0.78125-31.771-0.39063-11.979-1.1719-15.495-1.9531-8.724-5.8594-13.151-3.776-4.4271-10.026-8.2031-6.1198-3.9063-8.724-6.901-2.6042-3.125-2.6042-9.7656 0-9.6354 7.5521-14.453 9.375-5.8594 13.281-9.8958 4.0365-4.1667 5.599-10.547 1.6927-6.5104 1.9531-14.063 0.26042-7.6823 0.78125-36.719 0.39063-17.969 11.328-28.646 11.068-10.807 29.427-10.807 19.141 0 19.141 15.495 0 7.0313-3.2552 11.068-3.125 4.0365-8.2031 4.6875-7.5521 1.0417-10.547 3.125-2.9948 2.0833-3.9062 8.0729t-1.1719 23.177q-0.26042 16.797-2.0833 27.604-1.6927 10.677-6.901 18.229-5.0781 7.5521-14.844 13.672z"/>
+          <path d="m253.74 373.7q-8.5938 0-14.844-5.2083-6.25-5.3386-6.25-14.844 0-8.2031 6.1198-13.802 6.1198-5.599 14.453-5.599 6.25 0 11.328 3.3854t7.9427 10.026q2.8646 6.5104 2.8646 16.146 0 12.891-5.4688 24.089-5.4688 11.328-13.411 17.839-7.8125 6.6406-14.193 6.6406-4.0365 0-6.5104-2.7344-2.474-2.6042-2.474-6.1198 0-5.3386 5.2083-8.5938 15.234-8.3334 15.234-21.224zm-17.839-125.39q0-9.2448 5.7292-14.323 5.8594-5.0781 14.063-5.0781 7.9427 0 13.672 5.2083 5.7292 5.0781 5.7292 14.193 0 7.4219-6.1198 13.542-5.9896 5.9896-13.281 5.9896-5.4688 0-10.026-2.6042-4.4271-2.6042-7.1615-6.901-2.6042-4.4271-2.6042-10.026z"/>
+          <path d="m354 301.18q-7.0313-4.4271-11.458-9.2448-4.4271-4.8177-7.2917-11.719t-4.0365-16.276q-1.1719-9.5052-1.1719-22.266 0-12.37-0.52083-18.88-0.52084-6.6406-2.0833-9.6354t-4.4271-4.0365q-2.7344-1.1719-8.4636-1.8229-4.8177-0.65104-8.2031-4.6875-3.2552-4.0365-3.2552-11.068 0-15.495 18.88-15.495 12.109 0 21.224 4.9479 9.2448 4.8177 14.453 13.932 5.3386 8.9844 5.4688 20.573 0.78125 43.229 1.8229 47.526 2.0833 8.5938 6.1198 13.151 4.0365 4.4271 9.7656 7.9427 5.7292 3.3854 8.4636 6.7708 2.8646 3.3854 2.8646 10.286 0 9.7656-7.4219 14.323-9.1146 5.599-13.281 9.8958-4.0365 4.1667-5.7292 10.547-1.5625 6.25-1.9531 18.88-0.26042 12.63-0.65104 31.641-0.39063 17.969-11.589 28.776-11.068 10.938-29.557 10.938-9.1146 0-14.063-4.0365-4.8177-4.0365-4.8177-11.719 0-4.2969 1.5625-7.9427 1.5625-3.5156 4.0365-5.4688 2.6042-1.9531 5.8594-2.3438 5.8594-0.78125 8.724-1.9531 2.8646-1.1719 4.2969-4.4271 1.5625-3.2552 1.9531-9.6354 0.52083-6.25 0.52083-18.359 0.26042-17.969 2.0833-28.125 1.8229-10.156 6.901-17.448 5.0781-7.2917 14.974-13.542z"/>
+        </g>
+      );
+    }
+    else {
+      return null;
+    }
+  }
+  
+  render() {
+    return (
+      <div className="modal_dialog_icon">
+        <svg id={`${this.props.id}_svg`} width="100%" height="100%" viewBox="0 0 399 511" xmlns="http://www.w3.org/2000/svg">
+          <path d="m6.102 28.752 18.84-16.527 262.11-1.3221-1.3221 76.683 21.815 23.798 80.98 1.3221-0.99159 368.21-17.518 18.675-338.79 4.1316-23.137-20.823z" style={{fill:'#deebfa'}} />
+          <path d="m285.73 87.587 1.3221-76.683 101.47 101.8-80.98-1.3221z" style={{fill:'#8fbcef'}}/>
+          <path d="m398.96 110.75c-0.018-0.185-0.05-0.365-0.081-0.545-0.011-0.06-0.016-0.122-0.028-0.182-0.043-0.215-0.098-0.425-0.159-0.632-7e-3 -0.025-0.012-0.052-0.02-0.077-0.065-0.213-0.141-0.421-0.224-0.625-8e-3 -0.021-0.015-0.043-0.023-0.064-0.081-0.195-0.173-0.384-0.269-0.57-0.016-0.031-0.029-0.063-0.045-0.094-0.093-0.173-0.196-0.339-0.301-0.504-0.027-0.042-0.05-0.086-0.077-0.127-0.103-0.154-0.216-0.3-0.33-0.446-0.037-0.048-0.07-0.098-0.109-0.145-0.142-0.173-0.294-0.338-0.45-0.498-0.015-0.015-0.027-0.031-0.042-0.046l-104-104c-0.018-0.018-0.038-0.033-0.057-0.051-0.156-0.153-0.317-0.301-0.486-0.44-0.055-0.045-0.113-0.083-0.169-0.126-0.138-0.107-0.275-0.214-0.42-0.311-0.051-0.034-0.105-0.062-0.156-0.095-0.156-0.099-0.312-0.197-0.475-0.284-0.036-0.019-0.074-0.035-0.111-0.053-0.181-0.093-0.365-0.183-0.554-0.262-0.024-0.01-0.049-0.017-0.074-0.027-0.202-0.081-0.406-0.157-0.616-0.221-0.027-8e-3 -0.054-0.013-0.081-0.021-0.206-0.06-0.415-0.115-0.628-0.158-0.063-0.013-0.128-0.018-0.192-0.029-0.177-0.031-0.354-0.062-0.536-0.08-0.248-0.025-0.498-0.038-0.749-0.038h-248c-21.78 0-39.5 17.72-39.5 39.5v432c0 21.78 17.72 39.5 39.5 39.5h320c21.78 0 39.5-17.72 39.5-39.5v-360c0-0.251-0.013-0.501-0.038-0.749zm-103.96-85.145 78.394 78.394h-53.894c-13.509 0-24.5-10.99-24.5-24.5zm64.5 470.39h-320c-13.509 0-24.5-10.99-24.5-24.5v-432c0-13.51 10.991-24.5 24.5-24.5h240.5v64.5c0 21.78 17.72 39.5 39.5 39.5h64.5v352.5c0 13.51-10.991 24.5-24.5 24.5z" style={{fill:"#227ce0"}}/>
+          {this.renderInner()}
+        </svg>
+      </div>
+    );
+  }
+}

package/project/client/images/msg-image.jsx

@@ -0,0 +1,31 @@
+
+'use strict';
+
+import ReactComponentBase from 'z-abs-corelayer-client/client/react-component/react-component-base';
+import React from 'react';
+
+
+export default class MsgImage extends ReactComponentBase {
+  constructor(props) {
+    super(props);
+  }
+  
+  shouldUpdate(nextProps, nextState) {
+    return !this.shallowCompare(this.props, nextProps)
+  }
+  
+  render() {
+    return (
+      <div className="modal_dialog_icon">
+        <svg id={`${this.props.id}_svg`} width="100%" height="100%" viewBox="0 0 136.52 87.519" xmlns="http://www.w3.org/2000/svg">
+          <g id={`${this.props.id}_g`} transform="translate(-32.924 -102.83)">
+            <rect id={`${this.props.id}_rect`} x="35.924" y="105.83" width="130.52" height="81.519" ry="7.8849" style={{fill:'#fad137',strokeLinejoin:'round',strokeWidth:6,stroke:'#555'}}/>
+            <path id={`${this.props.id}_path`} d="m38.787 108.69 62.356 46.738 62.578-46.435" style={{fill:'none',strokeLinejoin:'round',strokeWidth:6,stroke:'#555'}}/>
+          </g>
+        </svg>
+      </div>
+    );
+  }
+}
+
+