import {a as a$2}from'./chunk-M7AZ5E5Z.js';import {b as b$1}from'./chunk-5DP5VNWQ.js';import {a as a$1,b as b$3}from'./chunk-OPL5NVVM.js';import {b as b$2}from'./chunk-YZHF42BC.js';import {a as a$3}from'./chunk-T2Y2C76P.js';import {e,f as f$1,a,b as b$4,d,c}from'./chunk-DVHTYKDX.js';import {f}from'./chunk-YBD5JYCX.js';import {Point}from'@scandit/web-datacapture-core';import {ScanditHTMLElement,defineCustomElements,safeCancelAnimation}from'@scandit/web-datacapture-core/build/js/private/utils/index.js';var b=class f$2 extends ScanditHTMLElement{constructor(){super(...arguments);this._pointerDownListener=this.onPointerDown.bind(this);this._pointerUpListener=this.onPointerUp.bind(this);this._longPressController=new b$1(this);this._longPressStartListener=this.onLongPressStart.bind(this);}get minimized(){return !this.hasAttribute("expanded")}set minimized(t){this.toggleAttribute("minimized",!t);}get expanded(){return this.hasAttribute("expanded")}set expanded(t){this.toggleAttribute("expanded",t),this._dragController&&(this._dragController.margin=t?new Point(-65,-65):new Point(0,0),this._dragController.repositionIfOutOfBounds());}get pressed(){return this.hasAttribute("pressed")}set pressed(t){this.toggleAttribute("pressed",t);}get visible(){return this.hasAttribute("visible")}set visible(t){this.toggleAttribute("visible",t);}static create(){return defineCustomElements({[f]:f$2}),document.createElement(f)}connectedCallback(){var t;this.append(this.render()),this._dragController=new b$2(this,(t=this.parentElement)==null?void 0:t.parentElement),this._dragController.connect(),this.addEventListener("pointerdown",this._pointerDownListener),this.addEventListener("pointerup",this._pointerUpListener),this.addEventListener("longpressstart",this._longPressStartListener),this._longPressController.connect(),this._longPressController.elementsAllowedToTriggerLongPressEvents.add(this),this._pulse=this.querySelector(".pulse"),this._pulseAnimation=new Animation(new KeyframeEffect(this._pulse,[{background:"rgba(0, 0, 0, 0)"},{background:`var(${e})`,transform:"translate(-50%, -50%) scale(1.1)"},{background:"rgba(0, 0, 0, 0)"}],{duration:1100,easing:"ease-out",iterations:Number.POSITIVE_INFINITY}));}disconnectedCallback(){var t;this.removeEventListener("pointerdown",this._pointerDownListener),this.removeEventListener("pointerup",this._pointerUpListener),this.removeEventListener("longpressstart",this._longPressStartListener),(t=this._dragController)==null||t.disconnect(),this._longPressController.disconnect(),this.innerHTML="";}repositionIfOutOfBounds(){var t;(t=this._dragController)==null||t.repositionIfOutOfBounds();}translateTo(t){var i;(i=this._dragController)==null||i.translateTo(t,false);}setImage(t){var n;let i=this.querySelector("div");(n=i.firstElementChild)==null||n.remove(),t&&i.append(t);}startPulsating(){var t;(t=this._pulseAnimation)==null||t.play();}stopPulsating(){this._pulseAnimation&&(safeCancelAnimation(this._pulseAnimation),this._pulseAnimation.currentTime=0);}render(){return a$2`
      <div>
        <div class="pulse"></div>
        <svg width="49" height="26" viewBox="0 0 49 26" fill="none" xmlns="http://www.w3.org/2000/svg">
          <rect
            x="7.57422"
            y="-0.00390625"
            width="3.20017"
            height="25.7171"
            rx="0.5"
            fill="white"
            style="fill: var(${f$1})"
          />
          <path
            d="M44.8418 0.496094C44.8418 0.219952 45.0657 -0.00390625 45.3418 -0.00390625H48.001C48.2771 -0.00390625 48.501 0.219951 48.501 0.496094V25.2132C48.501 25.4894 48.2771 25.7132 48.001 25.7132H45.3418C45.0657 25.7132 44.8418 25.4894 44.8418 25.2132V0.496094Z"
            fill="white"
            style="fill: var(${f$1})"
          />
          <path
            d="M33.8271 0.896094C33.8271 0.399038 34.2301 -0.00390625 34.7271 -0.00390625H39.1368C39.6338 -0.00390625 40.0368 0.399038 40.0368 0.896094V24.8132C40.0368 25.3103 39.6338 25.7132 39.1368 25.7132H34.7271C34.2301 25.7132 33.8271 25.3103 33.8271 24.8132V0.896094Z"
            fill="white"
            style="fill: var(${f$1})"
          />
          <path
            d="M16.3154 0.746095C16.3154 0.331881 16.6512 -0.00390625 17.0654 -0.00390625H20.1879C20.6021 -0.00390625 20.9379 0.33188 20.9379 0.746094V24.9632C20.9379 25.3774 20.6021 25.7132 20.1879 25.7132H17.0654C16.6512 25.7132 16.3154 25.3774 16.3154 24.9632V0.746095Z"
            fill="white"
            style="fill: var(${f$1})"
          />
          <path
            d="M0.5 0.246094C0.5 0.108023 0.611929 -0.00390625 0.75 -0.00390625H2.2897C2.42777 -0.00390625 2.5397 0.108023 2.5397 0.246094V25.4632C2.5397 25.6013 2.42777 25.7132 2.2897 25.7132H0.75C0.611929 25.7132 0.5 25.6013 0.5 25.4632V0.246094Z"
            fill="white"
            style="fill: var(${f$1})"
          />
          <rect
            x="25.9688"
            y="-0.00390625"
            width="3.05794"
            height="25.7171"
            rx="0.5"
            fill="white"
            style="fill: var(${f$1})"
          />
        </svg>
      </div>

      <style>
        ${f} {
          position: absolute;
          top: 0;
          left: 0;
          width: 90px;
          height: 90px;
          display: none;
          background: rgba(0, 0, 0, 0);
          border-radius: 50%;
          z-index: 10;
        }

        ${f}[expanded] {
          width: 220px;
          height: 220px;
          margin-top: -65px;
          margin-left: -65px;
        }

        ${f}[visible] {
          display: flex;
          justify-content: center;
          align-items: center;
        }

        ${f} div {
          position: relative;
          width: 90px;
          height: 90px;
          background: var(${a});
          border-radius: 50%;
          filter: drop-shadow(0px 2px 6px #${a$1.toJSON()})
            drop-shadow(0px 1px 2px #${b$3.toJSON()});
          transition: filter 0.3s ease;
        }

        ${f} div .pulse {
          position: absolute;
          top: 50%;
          left: 50%;
          width: 100%;
          height: 100%;
          background: transparent;
          opacity: 0.3;
          pointer-events: none;
          transform: translate(-50%, -50%);
          z-index: -1;
        }

        ${f}[pressed] div {
          background: var(${b$4});
          filter: drop-shadow(0px 4px 4px #${a$1.toJSON()})
            drop-shadow(0px 8px 12px #${b$3.toJSON()});
        }

        ${f}[pressed][expanded] div {
          background: var(${d});
        }

        ${f}[expanded] div {
          width: 200px;
          height: 200px;
          background: var(${c});
        }

        ${f} div img,
        ${f} div svg {
          position: absolute;
          top: 50%;
          left: 50%;
          width: 100%;
          height: auto;
          max-width: 48px;
          max-height: 48px;
          transform: translate(-50%, -50%);
        }

        ${f}[expanded] div img,
        ${f}[expanded] div svg {
          max-width: 64px;
          max-height: 64px;
        }
      </style>
    `}onPointerDown(t){t instanceof PointerEvent&&(this._dragController&&(this._dragController.draggable=this.minimized),this._holdStart=Date.now(),this.setPointerCapture(t.pointerId));}onPointerUp(t){var i;if(t instanceof PointerEvent){let n=this._holdStart!=null&&Date.now()-this._holdStart<400,C=!((i=this._dragController)!=null&&i.pointerDownEvent)||!a$3(this._dragController.pointerDownEvent,t);n&&C&&this.dispatchEvent(new CustomEvent("tap")),this.pressed=false,this._holdStart=void 0,this.releasePointerCapture(t.pointerId);}}onLongPressStart(){this._dragController&&(this._dragController.draggable=true),this.pressed=true,this._holdStart=void 0;}};export{b as a};