scandit-web-datacapture-core/build/js/private/ui/atoms/ShutterButton.js

Scandit Data Capture SDK for the Web

import { a as a$2 } from '../../../chunks/chunk-3A4KLILV.js';
import { a } from '../../../chunks/chunk-U6BTTEV6.js';
import { a as a$1 } from '../../../chunks/chunk-EV4OEANA.js';
import { a as a$3 } from '../../../chunks/chunk-GE4CBD4E.js';

var h="play",u="pause",d=a`
  <svg viewBox="0 0 100 100">
    <style>
      .rotating .border {
        /* total length is 301 (svg.querySelector("circle.border")!.getTotalLength()) */
        /* the "dashing" starts on the "EAST" point of the circle */
        stroke-dasharray: 302 301;
        animation-name: rotating-stroke;
        animation-iteration-count: infinite;
        animation-duration: 4s;
        animation-direction: normal;
        animation-fill-mode: forwards;
        animation-timing-function: linear;
        transform-origin: center;
      }

      @keyframes rotating-stroke {
        0% {
          stroke-dasharray: 302 301;
          transform: rotate(0);
        }

        50% {
          stroke-dasharray: 1 301;
        }
        51% {
          /* once we reached the middle, we start with a gap */
          stroke-dasharray: 0 291 10;
        }

        100% {
          stroke-dasharray: 0 1 301;
          transform: rotate(-720deg);
        }
      }
    </style>
    <defs>
      <mask id="${h}">
        <rect width="100" height="100" fill="white" />
        <path
          d="M40 59.4416V40.5584C40 39.8297 40.7543 39.3457 41.4167 39.6493L62.0166 49.0909C62.7944 49.4474 62.7944 50.5526 62.0166 50.9091L41.4167 60.3507C40.7543 60.6543 40 60.1703 40 59.4416Z"
          fill="black"
        />
      </mask>
      <mask id="${u}">
        <rect width="100" height="100" fill="white" />
        <rect x="40" y="38" width="8" height="24" rx="2" fill="black" />
        <rect x="52" y="38" width="8" height="24" rx="2" fill="black" />
      </mask>
    </defs>
    <g class="">
      <circle id="main-circle" class="center" cx="50" cy="50" r="40" fill="white" mask="url(#${h})" />
      <circle class="border" cx="50" cy="50" r="48" fill="none" stroke-width="3" stroke="white" />
    </g>
  </svg>
`;function p(){return a$3`
    :host {
      --button-width: 0px;
      display: inline-block;
      /* disables zoom on double-tap */
      touch-action: manipulation;
    }

    :host([hidden]) {
      display: none;
    }

    button {
      margin: 0;
      padding: 0;
      border: none;
      line-height: 0;
      background: none;
      border-radius: 100%;
      /* disables zoom on double-tap */
      touch-action: manipulation;
    }

    /* the pulsating is done with box-shadow. Doing it with an SVG circle makes it hard to
  size the button because it will be then based on the maximum diameter of this pulsating circle */
    button.pulse {
      box-shadow: 0 0 0 0px rgb(255 255 255 / 0.5);
      border-radius: 100%;
      animation: pulsate 2s infinite;
      animation-delay: 300ms;
    }

    svg {
      width: 100%;
      position: relative;
    }

    @keyframes pulsate {
      0% {
        transform: scale(1);
      }
      5% {
        transform: scale(0.9);
        box-shadow: 0 0 0 0 rgb(255 255 255 / 0.5);
      }
      20% {
        transform: scale(1);
      }
      100% {
        box-shadow: 0 0 0 calc(var(--button-width) / 2) rgb(255 255 255 / 0);
      }
    }
  `}var c={default:"default",play:"play",pause:"pause"},e=class e extends a$1{constructor(){super();this._variant="default";this._mainSVGCircle=null;this._rotating=!1;this._pulse=!1;this.shadowRoot||this.attachShadow({mode:"open"});}static get observedAttributes(){return ["variant","pulse","rotating"]}set variant(t){var i;this._variant=t,this._button&&(this.refreshButtonWidth(),this._button.classList.add(this._variant),(i=this._mainSVGCircle)==null||i.setAttribute("mask",`url(#${this._variant})`));}get variant(){return this._variant}set pulse(t){var i;this._pulse=t,this.refreshButtonWidth(),(i=this._button)==null||i.classList.toggle("pulse",t);}get pulse(){return this._pulse}set rotating(t){var i;this._rotating=t,(i=this._button)==null||i.classList.toggle("rotating",t);}get rotating(){return this._rotating}static register(){a$2({[e.tag]:e});}static create(){return document.createElement(e.tag)}attributeChangedCallback(t,i,a){if(t==="variant"){if(!this.isValidState(a)){console.warn(`Invalid variant: "${a}". Must be one of ${Object.values(c).toString()}`);return}this.variant=a;}t==="pulse"&&(this.pulse=this.hasAttribute(t)),t==="rotating"&&(this.rotating=this.hasAttribute(t));}refreshButtonWidth(){var i;let{width:t}=this.getBoundingClientRect();(i=this._button)==null||i.style.setProperty("--button-width",`${t}px`);}connectedCallback(){var t;this._button||(this._button=document.createElement("button"),this._button.innerHTML=d,this._button.classList.add(this._variant),this._button.classList.toggle("pulse",this._pulse),this._button.classList.toggle("rotating",this._rotating),this.shadowRoot.append(this._button),this.appendStyle(),this._mainSVGCircle=this._button.querySelector("#main-circle"),(t=this._mainSVGCircle)==null||t.setAttribute("mask",`url(#${this._variant})`),this.refreshButtonWidth());}isValidState(t){return Object.values(c).includes(t)}appendStyle(){var t;(t=this.shadowRoot)==null||t.append(p().cloneNode(!0));}};e.tag="scandit-shutter-button";var s=e;s.register();

export { s as ShutterButton, c as VARIANTS };