@safe-stars/components/dist/index-CfJmZxsA.cjs

React component library for buying Telegram Stars in Telegram Mini Apps via Safe Stars.

"use strict";const a=require("./index-CtZaCMo8.cjs"),l=require("./if-defined-MmHKu2JE.cjs"),e=a.proxy({message:"",open:!1,triggerRect:{width:0,height:0,top:0,left:0},variant:"shade"}),g={state:e,subscribe(o){return a.subscribe(e,()=>o(e))},subscribeKey(o,t){return a.subscribeKey(e,o,t)},showTooltip({message:o,triggerRect:t,variant:i}){e.open=!0,e.message=o,e.triggerRect=t,e.variant=i},hide(){e.open=!1,e.message="",e.triggerRect={width:0,height:0,top:0,left:0}}},n=a.withErrorBoundary(g),w=a.i`
  :host {
    pointer-events: none;
  }

  :host > wui-flex {
    display: var(--w3m-tooltip-display);
    opacity: var(--w3m-tooltip-opacity);
    padding: 9px var(--wui-spacing-s) 10px var(--wui-spacing-s);
    border-radius: var(--wui-border-radius-xxs);
    color: var(--wui-color-bg-100);
    position: fixed;
    top: var(--w3m-tooltip-top);
    left: var(--w3m-tooltip-left);
    transform: translate(calc(-50% + var(--w3m-tooltip-parent-width)), calc(-100% - 8px));
    max-width: calc(var(--w3m-modal-width) - var(--wui-spacing-xl));
    transition: opacity 0.2s var(--wui-ease-out-power-2);
    will-change: opacity;
  }

  :host([data-variant='shade']) > wui-flex {
    background-color: var(--wui-color-bg-150);
    border: 1px solid var(--wui-color-gray-glass-005);
  }

  :host([data-variant='shade']) > wui-flex > wui-text {
    color: var(--wui-color-fg-150);
  }

  :host([data-variant='fill']) > wui-flex {
    background-color: var(--wui-color-fg-100);
    border: none;
  }

  wui-icon {
    position: absolute;
    width: 12px !important;
    height: 4px !important;
    color: var(--wui-color-bg-150);
  }

  wui-icon[data-placement='top'] {
    bottom: 0px;
    left: 50%;
    transform: translate(-50%, 95%);
  }

  wui-icon[data-placement='bottom'] {
    top: 0;
    left: 50%;
    transform: translate(-50%, -95%) rotate(180deg);
  }

  wui-icon[data-placement='right'] {
    top: 50%;
    left: 0;
    transform: translate(-65%, -50%) rotate(90deg);
  }

  wui-icon[data-placement='left'] {
    top: 50%;
    right: 0%;
    transform: translate(65%, -50%) rotate(270deg);
  }
`;var c=function(o,t,i,p){var u=arguments.length,r=u<3?t:p===null?p=Object.getOwnPropertyDescriptor(t,i):p,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(o,t,i,p);else for(var h=o.length-1;h>=0;h--)(d=o[h])&&(r=(u<3?d(r):u>3?d(t,i,r):d(t,i))||r);return u>3&&r&&Object.defineProperty(t,i,r),r};let s=class extends a.i$1{constructor(){super(),this.unsubscribe=[],this.open=n.state.open,this.message=n.state.message,this.triggerRect=n.state.triggerRect,this.variant=n.state.variant,this.unsubscribe.push(n.subscribe(t=>{this.open=t.open,this.message=t.message,this.triggerRect=t.triggerRect,this.variant=t.variant}))}disconnectedCallback(){this.unsubscribe.forEach(t=>t())}render(){this.dataset.variant=this.variant;const t=this.triggerRect.top,i=this.triggerRect.left;return this.style.cssText=`
    --w3m-tooltip-top: ${t}px;
    --w3m-tooltip-left: ${i}px;
    --w3m-tooltip-parent-width: ${this.triggerRect.width/2}px;
    --w3m-tooltip-display: ${this.open?"flex":"none"};
    --w3m-tooltip-opacity: ${this.open?1:0};
    `,a.x`<wui-flex>
      <wui-icon data-placement="top" color="fg-100" size="inherit" name="cursor"></wui-icon>
      <wui-text color="inherit" variant="small-500">${this.message}</wui-text>
    </wui-flex>`}};s.styles=[w];c([l.r()],s.prototype,"open",void 0);c([l.r()],s.prototype,"message",void 0);c([l.r()],s.prototype,"triggerRect",void 0);c([l.r()],s.prototype,"variant",void 0);s=c([l.customElement("w3m-tooltip"),l.customElement("w3m-tooltip")],s);exports.TooltipController=n;
//# sourceMappingURL=index-CfJmZxsA.cjs.map