import { T as TailwindStyledElement, x, A } from '../../index-b654b619.js';
import { n, e } from '../../query-assigned-elements-5d94572f.js';
import { t } from '../../state-0a779257.js';
import { s as se } from '../../index-c55a1069.js';
import '../../tailwind-config.js';
import { c as cn } from '../../cn-616567d4.js';

const style = ":host {\n\n    display: inline-flex\n}\n\n:host([is-full-width]) {\n\n    display: flex;\n\n    width: 100%\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;
};
const LONG_PRESS_ANIMATION_DURATION_IN_MS = 2e3;
let LuksoButton = class extends TailwindStyledElement(style) {
  constructor() {
    super(...arguments);
    this.variant = "primary";
    this.size = "medium";
    this.disabled = false;
    this.isFullWidth = false;
    this.isLongPress = false;
    this.isLink = false;
    this.isLoading = false;
    this.type = "button";
    this.href = "";
    this.target = "_blank";
    this.rel = "";
    this.loadingText = "";
    this.customClass = "";
    this.isActive = false;
    this.count = "";
    this.isPressed = false;
    this.noTransition = false;
    this.timer = 0;
    this.counterStyles = se({
      base: `ml-2 border border-neutral-20 rounded-4 px-[2px] py-[1px] paragraph-inter-10-semi-bold text-neutral-20 bg-neutral-100`,
      variants: {
        isActive: {
          true: `text-neutral-100 bg-neutral-20`
        }
      }
    });
    this.buttonStyles = se({
      base: `flex justify-center items-center relative text-center
      border border-solid cursor-pointer transition
      duration-250 active:scale-98 active:duration-25
      disabled:shadow-none disabled:cursor-not-allowed disabled:scale-100 disabled:opacity-50`,
      variants: {
        color: {
          primary: `bg-neutral-20 border-neutral-20 text-neutral-100
            disabled:hover:!bg-neutral-20 disabled:hover:!border-neutral-20
            hover:shadow-button-hover-primary hover:bg-neutral-25 hover:border-neutral-25
            active:shadow-button-press-primary active:bg-neutral-25 active:border-neutral-25
            before:bg-neutral-10`,
          secondary: `bg-neutral-100 border-neutral-90 text-neutral-20
            hover:shadow-button-hover-secondary active:shadow-button-press-secondary`,
          landing: `bg-purple-51 border-purple-51 text-neutral-100
            disabled:hover:!bg-purple-51 disabled:hover:!border-purple-51
            hover:shadow-button-hover-primary hover:bg-purple-58 hover:border-purple-58
            active:shadow-button-press-primary
            before:bg-purple-51`,
          text: `bg-transparent border-none text-neutral-20
            hover:text-neutral-35
            active:text-neutral-35 active:scale-100
            disabled:text-neutral-90`,
          link: `bg-transparent border-none active:!scale-100 underline text-purple-51 hover:text-purple-41`,
          "nav-button": `nav-apax-12-medium-uppercase text-purple-41 !text-12`,
          "nav-text": `bg-transparent border-none nav-apax-12-medium-uppercase text-purple-63 hover:text-purple-41 !text-12 transition`
        },
        size: {
          medium: `h-[48px] px-6 paragraph-inter-16-semi-bold rounded-12`,
          small: `h-[28px] px-3 paragraph-inter-12-medium rounded-8 hover:shadow-none active:shadow-none`
        },
        isLongPress: {
          true: `relative overflow-hidden z-[1] active:outline-0
          before:absolute before:content-[''] before:top-0 before:left-0 before:w-0 before:h-[48px]
          before:transition-all before:duration-[2000ms] before:z-[-1] before:rounded-0`
        },
        isFullWidth: {
          true: `w-full`
        },
        isPressed: {
          true: `before:w-full before:z-[-1]`
        },
        noTransition: {
          true: `before:transition-none`
        },
        isActive: {
          true: `border-neutral-20`
        }
      },
      compoundVariants: [
        {
          isActive: true,
          color: "nav-text",
          class: "text-purple-41"
        },
        {
          size: ["medium", "small"],
          color: "link",
          class: "p-0 h-[initial]"
        }
      ]
    });
  }
  handleMouseDown() {
    if (this.variant !== "primary" && this.variant !== "landing" && this.isLongPress) {
      return console.warn(
        "Long press is only available for primary and landing variants"
      );
    }
    if (!this.isLongPress) {
      return;
    }
    this.isPressed = true;
    this.timer = window.setTimeout(() => {
      const event = new CustomEvent("on-long-press-complete", {
        bubbles: true,
        composed: true
      });
      this.dispatchEvent(event);
    }, LONG_PRESS_ANIMATION_DURATION_IN_MS);
  }
  handleMouseUp() {
    if (!this.isLongPress) {
      return;
    }
    this.isPressed = false;
    this.noTransition = true;
    setTimeout(() => {
      this.noTransition = false;
    }, 100);
    this.timer && clearTimeout(this.timer);
  }
  loadingTemplate() {
    return x`<lukso-icon
        name="spinner"
        color=${this.variant === "secondary" || this.variant === "text" ? "neutral-20" : "neutral-100"}
        class="animate-spin"
      ></lukso-icon>
      ${!!this.loadingText ? x`<span class="ml-2">${this.loadingText}</span>` : A}`;
  }
  counterTemplate() {
    const counterStyles = this.counterStyles({
      isActive: this.isActive
    });
    return x` <span class=${counterStyles}>${this.count}</span> `;
  }
  buttonTemplate() {
    const buttonStyles = this.buttonStyles({
      size: this.size,
      color: this.variant,
      isLongPress: this.isLongPress,
      isFullWidth: this.isFullWidth,
      isPressed: this.isPressed,
      isActive: this.isActive
    });
    return x`
      <button
        data-testid="button"
        ?disabled=${this.disabled || this.isLoading}
        type=${this.type}
        class=${cn(buttonStyles, this.customClass)}
        @mousedown=${this.handleMouseDown}
        @mouseup=${this.handleMouseUp}
        @mouseleave=${this.handleMouseUp}
      >
        ${this.isLoading ? this.loadingTemplate() : x`<slot></slot>`}
        ${this.count ? this.counterTemplate() : A}
      </button>
    `;
  }
  linkTemplate() {
    const buttonStyles = this.buttonStyles({
      size: this.size,
      color: this.variant,
      isLongPress: this.isLongPress,
      isFullWidth: this.isFullWidth,
      isPressed: this.isPressed
    });
    return x`
      <a
        data-testid="link"
        class=${cn(buttonStyles, this.customClass)}
        href=${this.href}
        target=${this.target}
        rel=${this.rel}
      >
        <slot></slot>
      </a>
    `;
  }
  render() {
    return x` ${this.isLink ? this.linkTemplate() : this.buttonTemplate()} `;
  }
};
__decorateClass([
  n({ type: String })
], LuksoButton.prototype, "variant", 2);
__decorateClass([
  n({ type: String })
], LuksoButton.prototype, "size", 2);
__decorateClass([
  n({ type: Boolean })
], LuksoButton.prototype, "disabled", 2);
__decorateClass([
  n({ type: Boolean, attribute: "is-full-width" })
], LuksoButton.prototype, "isFullWidth", 2);
__decorateClass([
  n({ type: Boolean, attribute: "is-long-press" })
], LuksoButton.prototype, "isLongPress", 2);
__decorateClass([
  n({ type: Boolean, attribute: "is-link" })
], LuksoButton.prototype, "isLink", 2);
__decorateClass([
  n({ type: Boolean, attribute: "is-loading" })
], LuksoButton.prototype, "isLoading", 2);
__decorateClass([
  n({ type: String })
], LuksoButton.prototype, "type", 2);
__decorateClass([
  n({ type: String })
], LuksoButton.prototype, "href", 2);
__decorateClass([
  n({ type: String })
], LuksoButton.prototype, "target", 2);
__decorateClass([
  n({ type: String })
], LuksoButton.prototype, "rel", 2);
__decorateClass([
  n({ type: String, attribute: "loading-text" })
], LuksoButton.prototype, "loadingText", 2);
__decorateClass([
  n({ type: String, attribute: "custom-class" })
], LuksoButton.prototype, "customClass", 2);
__decorateClass([
  n({ type: Boolean, attribute: "is-active" })
], LuksoButton.prototype, "isActive", 2);
__decorateClass([
  n({ type: Number })
], LuksoButton.prototype, "count", 2);
__decorateClass([
  t()
], LuksoButton.prototype, "isPressed", 2);
__decorateClass([
  t()
], LuksoButton.prototype, "noTransition", 2);
__decorateClass([
  t()
], LuksoButton.prototype, "timer", 2);
LuksoButton = __decorateClass([
  e("lukso-button")
], LuksoButton);

export { LuksoButton };
