jb-image-input/lib/jb-image-input.html

image input web component

<div class="jb-image-input-web-component">
  <div class="placeholder-wrapper">
    <slot name="placeholder">
      <div class="default-placeholder">
        <div class="icon-wrapper">
          <svg viewBox="0 0 59.19 47.06">
            <g id="Layer_2" data-name="Layer 2">
              <g id="Layer_1-2" data-name="Layer 1">
                <g>
                  <path class="cls-1"
                    d="M27.45,14.85A5.65,5.65,0,1,0,21.8,20.5,5.66,5.66,0,0,0,27.45,14.85ZM21.8,17.5a2.65,2.65,0,1,1,2.65-2.65A2.65,2.65,0,0,1,21.8,17.5Z" />
                  <path class="cls-2"
                    d="M58.7,31.38c.46-5.51.87-11.91-.15-18.18-.75-4.61-2.74-7.85-5.92-9.62C48.77,1.43,44.45,1,40.26.6L39.43.52a97.08,97.08,0,0,0-25.09.65A30.45,30.45,0,0,0,8.68,2.51,12.08,12.08,0,0,0,3.27,6.08C1.16,8.63.7,11.94.45,14.83A88.28,88.28,0,0,0,0,25.12c0,1.38.09,3,.23,4.59.26,3.1.84,7.08,3,10.38,2.87,4.4,7.65,5.44,11,5.83a130.41,130.41,0,0,0,14.84,1.14h.32a101.76,101.76,0,0,0,14.85-1.22C48.06,45.28,52,44.43,54.74,42a10.24,10.24,0,0,0,2.86-4.45,1.43,1.43,0,0,0,.08-.24A26.47,26.47,0,0,0,58.7,31.38ZM43.8,42.87a102.62,102.62,0,0,1-14.72,1.19,128.34,128.34,0,0,1-14.5-1.12c-3.91-.46-6.49-1.6-8.2-3.65l8.08-8.08a2.62,2.62,0,0,1,3.57,0c.68.72,6.72,7.06,7.72,8a1.5,1.5,0,1,0,2-2.23C27,36.22,22,31,20.18,29.09a5.54,5.54,0,0,0-7.83,0L4.8,36.63a23.31,23.31,0,0,1-1.56-7.18C3.11,27.93,3.06,26.37,3,25a85.56,85.56,0,0,1,.41-9.94C3.66,12.54,4,9.88,5.58,8A9.2,9.2,0,0,1,9.7,5.33h0A27.68,27.68,0,0,1,14.8,4.14,95.81,95.81,0,0,1,29.42,3a93.76,93.76,0,0,1,9.7.51l.85.08c3.88.38,7.88.77,11.2,2.62C53.51,7.51,55,10,55.59,13.68c1,5.93.57,12.11.12,17.44-.08.95-.18,1.88-.32,2.78L40.93,19.42A5.5,5.5,0,0,0,37,17.79h0a5.5,5.5,0,0,0-3.92,1.62l-8.88,8.88a1.5,1.5,0,0,0,2.12,2.12l8.88-8.88a2.53,2.53,0,0,1,1.8-.74h0a2.52,2.52,0,0,1,1.8.75L54.49,37.25a7,7,0,0,1-1.74,2.49C50.48,41.76,46.94,42.41,43.8,42.87Z" />
                </g>
              </g>
            </g>
          </svg>
        </div>
        <div class="placeholder-title">انتخاب تصویر</div>
        <div class="message-box" part="message"></div>
      </div>
      
    </slot>

  </div>
  <div class="upload-loading-wrapper">
    <span>در حال آپلود</span>
  </div>
  <div class="download-loading-wrapper">
    <span>در حال آماده سازی</span>
  </div>
  <div class="image-wrapper">
    <img src="">
    <div class="image-overlay">
      <div class="reselect-button">انتخاب مجدد تصویر</div>
      <div class="download-button">
        <svg id="DownloadIcon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path id="S1" d="M15.0382 12.5084L12.1222 15.4364L9.20621 12.5084"  stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
          <path id="S3" d="M12.1222 15.4361L12.1222 3.39508"  stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
          <path id="S2" d="M16.7549 8.12799H17.6879C19.7229 8.12799 21.3719 9.77699 21.3719 11.813V16.697C21.3719 18.727 19.7269 20.372 17.6969 20.372L6.55695 20.372C4.52195 20.372 2.87195 18.722 2.87195 16.687V11.802C2.87195 9.77299 4.51795 8.12799 6.54695 8.12799L7.48895 8.12799" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </div>
      <div class="delete-button">
        <svg id="DeleteIcon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path id="BinBody" d="M19.325 9.4682C19.325 9.4682 18.782 16.2032 18.467 19.0402C18.317 20.3952 17.48 21.1892 16.109 21.2142C13.5 21.2612 10.888 21.2642 8.28003 21.2092C6.96103 21.1822 6.13803 20.3782 5.99103 19.0472C5.67403 16.1852 5.13403 9.4682 5.13403 9.4682" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
            <path id="BinLine" d="M20.7082 6.23969H3.75024" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
            <path id="BinHead" d="M17.4406 6.23967C16.6556 6.23967 15.9796 5.68467 15.8256 4.91567L15.5826 3.69967C15.4326 3.13867 14.9246 2.75067 14.3456 2.75067H10.1126C9.53358 2.75067 9.02558 3.13867 8.87558 3.69967L8.63258 4.91567C8.47858 5.68467 7.80258 6.23967 7.01758 6.23967" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </div>
    </div>
  </div>
  <div class="error-overlay">
    <!-- this container used to show flashed error and disappear after -->
     <div class="error-content">
          <svg class="error-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12 14.75C11.59 14.75 11.25 14.41 11.25 14V9C11.25 8.59 11.59 8.25 12 8.25C12.41 8.25 12.75 8.59 12.75 9V14C12.75 14.41 12.41 14.75 12 14.75Z" />
            <path d="M12 18C11.94 18 11.87 17.99 11.8 17.98C11.74 17.97 11.68 17.95 11.62 17.92C11.56 17.9 11.5 17.87 11.44 17.83C11.39 17.79 11.34 17.75 11.29 17.71C11.11 17.52 11 17.26 11 17C11 16.74 11.11 16.48 11.29 16.29C11.34 16.25 11.39 16.21 11.44 16.17C11.5 16.13 11.56 16.1 11.62 16.08C11.68 16.05 11.74 16.03 11.8 16.02C11.93 15.99 12.07 15.99 12.19 16.02C12.26 16.03 12.32 16.05 12.38 16.08C12.44 16.1 12.5 16.13 12.56 16.17C12.61 16.21 12.66 16.25 12.71 16.29C12.89 16.48 13 16.74 13 17C13 17.26 12.89 17.52 12.71 17.71C12.66 17.75 12.61 17.79 12.56 17.83C12.5 17.87 12.44 17.9 12.38 17.92C12.32 17.95 12.26 17.97 12.19 17.98C12.13 17.99 12.06 18 12 18Z" />
            <path d="M18.06 22.16H5.94001C3.99001 22.16 2.50001 21.45 1.74001 20.17C0.990006 18.89 1.09001 17.24 2.04001 15.53L8.10001 4.63C9.10001 2.83 10.48 1.84 12 1.84C13.52 1.84 14.9 2.83 15.9 4.63L21.96 15.54C22.91 17.25 23.02 18.89 22.26 20.18C21.5 21.45 20.01 22.16 18.06 22.16ZM12 3.34C11.06 3.34 10.14 4.06 9.41001 5.36L3.36001 16.27C2.68001 17.49 2.57001 18.61 3.04001 19.42C3.51001 20.23 4.55001 20.67 5.95001 20.67H18.07C19.47 20.67 20.5 20.23 20.98 19.42C21.46 18.61 21.34 17.5 20.66 16.27L14.59 5.36C13.86 4.06 12.94 3.34 12 3.34Z" />
            </svg>
            <span class="error-message"></span>            
     </div>
  </div>
</div>