import{j as e,r as t,k as i,l as o,N as n,m as a}from"./p-BxEPsDRj.js";import{n as r,c as s}from"./p-CrMmJdZ6.js";import"./p-CbOrugAV.js";var u=e`
  :host {
    width: 100%;
  }

  button {
    padding: ${({spacing:e})=>e[3]};
    display: flex;
    gap: ${({spacing:e})=>e[3]};
    justify-content: space-between;
    width: 100%;
    border-radius: ${({borderRadius:e})=>e[4]};
    background-color: transparent;
  }

  @media (hover: hover) {
    button:hover:enabled {
      background-color: ${({tokens:e})=>e.theme.foregroundSecondary};
    }
  }

  button:focus-visible:enabled {
    background-color: ${({tokens:e})=>e.theme.foregroundSecondary};
    box-shadow: 0 0 0 4px ${({tokens:e})=>e.core.foregroundAccent040};
  }

  button[data-clickable='false'] {
    pointer-events: none;
    background-color: transparent;
  }

  wui-image,
  wui-icon {
    width: ${({spacing:e})=>e[10]};
    height: ${({spacing:e})=>e[10]};
  }

  wui-image {
    border-radius: ${({borderRadius:e})=>e[16]};
  }

  .token-name-container {
    flex: 1;
  }
`;var l=undefined&&undefined.__decorate||function(e,t,i,o){var n=arguments.length,a=n<3?t:o===null?o=Object.getOwnPropertyDescriptor(t,i):o,r;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")a=Reflect.decorate(e,t,i,o);else for(var s=e.length-1;s>=0;s--)if(r=e[s])a=(n<3?r(a):n>3?r(t,i,a):r(t,i))||a;return n>3&&a&&Object.defineProperty(t,i,a),a};let c=class e extends o{constructor(){super(...arguments);this.tokenName="";this.tokenImageUrl="";this.tokenValue=0;this.tokenAmount="0.0";this.tokenCurrency="";this.clickable=false}render(){return a`
      <button data-clickable=${String(this.clickable)}>
        <wui-flex gap="2" alignItems="center">
          ${this.visualTemplate()}
          <wui-flex
            flexDirection="column"
            justifyContent="space-between"
            gap="1"
            class="token-name-container"
          >
            <wui-text variant="md-regular" color="primary" lineClamp="1">
              ${this.tokenName}
            </wui-text>
            <wui-text variant="sm-regular-mono" color="secondary">
              ${n.formatNumberToLocalString(this.tokenAmount,4)} ${this.tokenCurrency}
            </wui-text>
          </wui-flex>
        </wui-flex>
        <wui-flex
          flexDirection="column"
          justifyContent="space-between"
          gap="1"
          alignItems="flex-end"
          width="auto"
        >
          <wui-text variant="md-regular-mono" color="primary"
            >$${this.tokenValue.toFixed(2)}</wui-text
          >
          <wui-text variant="sm-regular-mono" color="secondary">
            ${n.formatNumberToLocalString(this.tokenAmount,4)}
          </wui-text>
        </wui-flex>
      </button>
    `}visualTemplate(){if(this.tokenName&&this.tokenImageUrl){return a`<wui-image alt=${this.tokenName} src=${this.tokenImageUrl}></wui-image>`}return a`<wui-icon name="coinPlaceholder" color="default"></wui-icon>`}};c.styles=[t,i,u];l([r()],c.prototype,"tokenName",void 0);l([r()],c.prototype,"tokenImageUrl",void 0);l([r({type:Number})],c.prototype,"tokenValue",void 0);l([r()],c.prototype,"tokenAmount",void 0);l([r()],c.prototype,"tokenCurrency",void 0);l([r({type:Boolean})],c.prototype,"clickable",void 0);c=l([s("wui-list-token")],c);
//# sourceMappingURL=p-DGY68jkO.js.map