'use strict';

Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });

const shared_tailwindElement_index = require('../../index-aaa67d55.cjs');
const queryAssignedElements = require('../../query-assigned-elements-1d5d9d4c.cjs');
const index = require('../../index-e9668573.cjs');
const directive = require('../../directive-8278ab14.cjs');

class CustomStyleMapDirective extends directive.i {
  constructor(partInfo) {
    super(partInfo);
    if (partInfo.type !== directive.t.ATTRIBUTE || partInfo.name !== "style" || partInfo.strings?.length > 2) {
      throw new Error(
        "`customStyleMap()` can only be used in the `style` attribute and must be the only part in the attribute."
      );
    }
  }
  render(styleInfoList) {
    const styles = Object.keys(styleInfoList).filter((key) => styleInfoList[key]);
    if (styles.length === 0) {
      return shared_tailwindElement_index.A;
    }
    return ` ${styles.join("; ")} `;
  }
}
const customStyleMap = directive.e(CustomStyleMapDirective);

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;
};
exports.LuksoUsername = class LuksoUsername extends shared_tailwindElement_index.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 = "@";
    /** Width of the first 4 bytes of the address */
    this.bytesWidth = 52;
  }
  addressBytesTemplate() {
    return shared_tailwindElement_index.x`<div
      class="inline-block ${index.customClassMap({
      ["text-neutral-60"]: this.addressColor === ""
    })}"
      style=${customStyleMap({
      [`color: var(--${this.addressColor})`]: this.addressColor !== ""
    })}
    >
      #${this.address.slice(2, 6)}
    </div>`;
  }
  nameTemplate() {
    return shared_tailwindElement_index.x`<div
      class="inline-block whitespace-nowrap overflow-hidden text-ellipsis ${index.customClassMap(
      {
        ["text-transparent bg-clip-text bg-gradient-to-r from-gradient-1-start to-gradient-1-end"]: this.nameColor === ""
      }
    )}"
      style=${customStyleMap({
      [`max-width: ${this.maxWidth - this.bytesWidth}px`]: true,
      [`color: var(--${this.nameColor})`]: this.nameColor !== ""
    })}
    >
      ${this.hidePrefix ? shared_tailwindElement_index.A : this.prefix}${this.name}
    </div>`;
  }
  addressTemplate() {
    return shared_tailwindElement_index.x`<div
      class="inline-block ${index.customClassMap({
      ["text-" + this.addressColor]: this.addressColor !== "",
      ["text-neutral-20"]: this.addressColor === ""
    })}"
    >
      ${sliceAddress(this.address, this.sliceBy, this.sliceBy)}
    </div>`;
  }
  render() {
    const template = (() => {
      if (this.name && this.address) {
        return shared_tailwindElement_index.x`${this.nameTemplate()}${this.addressBytesTemplate()}`;
      }
      if (this.name) {
        return this.nameTemplate();
      }
      if (this.address) {
        return this.addressTemplate();
      }
    })();
    return shared_tailwindElement_index.x`<div
      class="inline-flex ${index.customClassMap({
      [this.customClass]: true,
      "paragraph-ptmono-10-bold": this.size === "x-small",
      "paragraph-ptmono-12-bold": this.size === "small",
      "paragraph-ptmono-14-bold": this.size === "medium",
      "paragraph-ptmono-16-bold": this.size === "large"
    })}"
    >
      ${template}
    </div>`;
  }
};
__decorateClass([
  queryAssignedElements.n({ type: String })
], exports.LuksoUsername.prototype, "name", 2);
__decorateClass([
  queryAssignedElements.n({ type: String })
], exports.LuksoUsername.prototype, "address", 2);
__decorateClass([
  queryAssignedElements.n({ type: Number, attribute: "max-width" })
], exports.LuksoUsername.prototype, "maxWidth", 2);
__decorateClass([
  queryAssignedElements.n({ type: "string" })
], exports.LuksoUsername.prototype, "size", 2);
__decorateClass([
  queryAssignedElements.n({ type: Number, attribute: "slice-by" })
], exports.LuksoUsername.prototype, "sliceBy", 2);
__decorateClass([
  queryAssignedElements.n({ type: String, attribute: "address-color" })
], exports.LuksoUsername.prototype, "addressColor", 2);
__decorateClass([
  queryAssignedElements.n({ type: String, attribute: "name-color" })
], exports.LuksoUsername.prototype, "nameColor", 2);
__decorateClass([
  queryAssignedElements.n({ type: String, attribute: "custom-class" })
], exports.LuksoUsername.prototype, "customClass", 2);
__decorateClass([
  queryAssignedElements.n({ type: Boolean, attribute: "hide-prefix" })
], exports.LuksoUsername.prototype, "hidePrefix", 2);
__decorateClass([
  queryAssignedElements.n({ type: String })
], exports.LuksoUsername.prototype, "prefix", 2);
exports.LuksoUsername = __decorateClass([
  queryAssignedElements.e("lukso-username")
], exports.LuksoUsername);
