import { T as TailwindStyledElement, x, A } from '../../index-b500cc08.js';
import { n, e } from '../../query-assigned-elements-1c8c9e90.js';
import { c as ce } from '../../index-ca8e900d.js';
import { c as customStyleMap } from '../../index-b2b55120.js';
import '../../tailwind-config.js';
import { c as cn } from '../../cn-b54dcc61.js';
import '../../bundle-mjs-fbc6e2a8.js';
import '../../directive-2bb7789e.js';

const sliceAddress = (address, startSliceBy = 6, endSliceBy) => {
  if (!address) {
    return "";
  }
  let sliceAddress2 = "";
  endSliceBy = endSliceBy || startSliceBy;
  if (address.length < startSliceBy + endSliceBy) {
    return address;
  }
  sliceAddress2 = address.length > startSliceBy + 2 ? `${address.slice(0, startSliceBy + 2)}...${address.slice(-endSliceBy)}` : address;
  return sliceAddress2;
};

const style = ":host {\n    display: inline-flex\n}";

var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __decorateClass = (decorators, target, key, kind) => {
  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
    if (decorator = decorators[i])
      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
  if (kind && result)
    __defProp(target, key, result);
  return result;
};
let LuksoUsername = class extends TailwindStyledElement(style) {
  constructor() {
    super(...arguments);
    this.name = "";
    this.address = "";
    this.maxWidth = 200;
    this.size = "large";
    this.sliceBy = 8;
    this.addressColor = "";
    this.nameColor = "";
    this.customClass = "";
    this.hidePrefix = false;
    this.prefix = "@";
    this.noTransform = false;
    /** Width of the first 4 bytes of the address */
    this.bytesWidth = 52;
    this.styles = ce({
      slots: {
        wrapper: "inline-flex",
        name: "inline-block whitespace-nowrap overflow-hidden text-ellipsis",
        address: "inline-block",
        bytes: "inline-block"
      },
      variants: {
        size: {
          "x-small": {
            wrapper: "paragraph-ptmono-10-bold"
          },
          small: {
            wrapper: "paragraph-ptmono-12-bold"
          },
          medium: {
            wrapper: "paragraph-ptmono-14-bold"
          },
          large: {
            wrapper: "paragraph-ptmono-16-bold"
          },
          "x-large": {
            wrapper: "paragraph-ptmono-24-bold"
          }
        },
        hasNameColor: {
          false: {
            name: "text-transparent bg-clip-text bg-gradient-to-r from-gradient-1-start to-gradient-1-end"
          }
        },
        hasAddressColor: {
          false: {
            address: "text-neutral-20",
            bytes: "text-neutral-60"
          }
        }
      }
    });
  }
  validateName(name) {
    if (this.noTransform) {
      return name;
    }
    return name?.toLowerCase();
  }
  addressBytesTemplate(styles) {
    return x`<div
      class=${styles}
      style=${customStyleMap({
      [`color: var(--${this.addressColor})`]: this.addressColor !== ""
    })}
    >
      #${this.address.slice(2, 6)}
    </div>`;
  }
  nameTemplate(styles) {
    return x`<div
      class=${styles}
      style=${customStyleMap({
      [`max-width: ${this.maxWidth - this.bytesWidth}px`]: true,
      [`color: var(--${this.nameColor})`]: this.nameColor !== ""
    })}
    >
      ${this.hidePrefix ? A : this.prefix}${this.validateName(this.name)}
    </div>`;
  }
  addressTemplate(styles) {
    return x`<div
      class=${styles}
      style=${customStyleMap({
      [`color: var(--${this.addressColor})`]: this.addressColor !== ""
    })}
    >
      ${sliceAddress(this.address, this.sliceBy, this.sliceBy)}
    </div>`;
  }
  render() {
    const { wrapper, name, address, bytes } = this.styles({
      size: this.size,
      hasNameColor: this.nameColor !== "",
      hasAddressColor: this.addressColor !== ""
    });
    const template = (() => {
      if (this.name && this.address) {
        return x`${this.nameTemplate(name())}${this.addressBytesTemplate(
          bytes()
        )}`;
      }
      if (this.name) {
        return this.nameTemplate(name());
      }
      if (this.address) {
        return this.addressTemplate(address());
      }
    })();
    return x`<div class=${cn(wrapper(), this.customClass)}>${template}</div>`;
  }
};
__decorateClass([
  n({ type: String })
], LuksoUsername.prototype, "name", 2);
__decorateClass([
  n({ type: String })
], LuksoUsername.prototype, "address", 2);
__decorateClass([
  n({ type: Number, attribute: "max-width" })
], LuksoUsername.prototype, "maxWidth", 2);
__decorateClass([
  n({ type: "string" })
], LuksoUsername.prototype, "size", 2);
__decorateClass([
  n({ type: Number, attribute: "slice-by" })
], LuksoUsername.prototype, "sliceBy", 2);
__decorateClass([
  n({ type: String, attribute: "address-color" })
], LuksoUsername.prototype, "addressColor", 2);
__decorateClass([
  n({ type: String, attribute: "name-color" })
], LuksoUsername.prototype, "nameColor", 2);
__decorateClass([
  n({ type: String, attribute: "custom-class" })
], LuksoUsername.prototype, "customClass", 2);
__decorateClass([
  n({ type: Boolean, attribute: "hide-prefix" })
], LuksoUsername.prototype, "hidePrefix", 2);
__decorateClass([
  n({ type: String })
], LuksoUsername.prototype, "prefix", 2);
__decorateClass([
  n({ type: Boolean, attribute: "no-transform" })
], LuksoUsername.prototype, "noTransform", 2);
LuksoUsername = __decorateClass([
  e("lukso-username")
], LuksoUsername);

export { LuksoUsername };
