import { b as TailwindStyledElement, E, x } from '../../chunks/index-5X9ujrWL.js';
import { n } from '../../chunks/property-DfumgIL6.js';
import { r } from '../../chunks/state-CaelFSbE.js';
import { c as ce } from '../../chunks/index-B9iart53.js';
import { w as withTheme } from '../../chunks/chunk-LQIOVPBE-CGhQ79Di.js';
import '../../tailwind-config.js';
import { c as cn } from '../../chunks/axe-DJKac19y.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 __decorateClass = (decorators, target, key, kind) => {
  var result = void 0 ;
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
    if (decorator = decorators[i])
      result = (decorator(target, key, result) ) || result;
  if (result) __defProp(target, key, result);
  return result;
};
const LONG_PRESS_ANIMATION_DURATION_IN_MS = 2e3;
class LuksoButton extends withTheme(TailwindStyledElement(style)) {
  constructor() {
    super(...arguments);
    this.variant = "primary";
    this.size = "large";
    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.isIcon = false;
    this.label = "";
    this.isPressed = false;
    this.noTransition = false;
    this.timer = 0;
    this.counterStyles = ce({
      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 = ce({
      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:bg-neutral-25 hover:border-neutral-25
            active:bg-neutral-25 active:border-neutral-25 before:bg-neutral-10`,
          secondary: "bg-neutral-100 border-neutral-90 text-neutral-20 dark:border-neutral-20 dark:bg-neutral-20 dark:text-neutral-100",
          landing: `bg-purple-51 border-purple-51 text-neutral-100
            disabled:hover:!bg-purple-51 disabled:hover:!border-purple-51
            hover:bg-purple-58 hover:border-purple-58 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-inter-12-medium-uppercase text-purple-41 !text-12",
          "nav-text": "bg-transparent border-none nav-inter-12-medium-uppercase text-purple-63 hover:text-purple-41 !text-12 transition",
          success: `bg-green-54 border-green-54 text-neutral-100
            disabled:hover:!bg-green-54 disabled:hover:!border-green-54
            hover:bg-green-63 hover:border-green-63 before:bg-green-54`,
          danger: `bg-red-55 border-red-55 text-neutral-100
          disabled:hover:!bg-red-55 disabled:hover:!border-red-55
          hover:bg-red-65 hover:border-red-65 before:bg-red-55`,
          warning: `bg-yellow-55 border-yellow-55 text-neutral-100
          disabled:hover:!bg-yellow-55 disabled:hover:!border-yellow-55
          hover:bg-yellow-65 hover:border-yellow-65 before:bg-yellow-55`
        },
        size: {
          small: "h-7 px-3 paragraph-inter-12-medium rounded-8",
          medium: "h-10 px-4 paragraph-inter-14-semi-bold rounded-10",
          large: "h-12 px-6 paragraph-inter-16-semi-bold rounded-12",
          "x-large": ""
        },
        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-12
          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"
        },
        isIcon: {
          true: ""
        }
      },
      compoundVariants: [
        {
          isActive: true,
          color: "nav-text",
          class: "text-purple-41"
        },
        {
          size: ["medium", "small", "large"],
          color: "link",
          class: "p-0 h-[initial]"
        },
        {
          size: ["medium", "large"],
          color: ["primary", "landing", "success", "danger", "warning"],
          class: "hover:shadow-button-medium-hover-primary active:shadow-button-medium-press-primary"
        },
        {
          size: ["medium", "large"],
          color: ["secondary"],
          class: "hover:shadow-button-medium-hover-secondary active:shadow-button-medium-press-secondary"
        },
        {
          size: ["small"],
          color: ["primary", "landing", "success", "danger", "warning"],
          class: "hover:shadow-button-small-hover-primary active:shadow-button-small-press-primary"
        },
        {
          size: ["small"],
          color: ["secondary"],
          class: "hover:shadow-button-small-hover-secondary active:shadow-button-small-press-secondary"
        },
        {
          isIcon: true,
          size: ["small"],
          class: "px-0 w-7"
        },
        {
          isIcon: true,
          size: ["medium"],
          class: "px-0 w-10"
        },
        {
          isIcon: true,
          size: ["large"],
          class: "px-0 w-12"
        }
      ]
    });
    this.loadingStyles = ce({
      slots: {
        icon: "animate-spin",
        text: ""
      },
      variants: {
        size: {
          small: {
            text: "ml-1"
          },
          medium: {
            text: "ml-[6px]"
          },
          large: {
            text: "ml-2"
          },
          "x-large": {}
        }
      }
    });
  }
  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() {
    const { icon, text } = this.loadingStyles({
      size: this.size
    });
    return x`<lukso-icon
        name="spinner"
        size=${this.size}
        color=${this.variant === "secondary" || this.variant === "text" ? "neutral-20" : "neutral-100"}
        class=${icon()}
      ></lukso-icon>
      ${this.loadingText ? x`<span class=${text()}>${this.loadingText}</span>` : E}`;
  }
  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,
      isIcon: this.isIcon
    });
    return x`
      <button
        data-testid="button"
        ?disabled=${this.disabled || this.isLoading}
        type=${this.type}
        class=${cn(buttonStyles, this.customClass)}
        aria-label=${this.label}
        @mousedown=${this.handleMouseDown}
        @touchstart=${this.handleMouseDown}
        @touchend=${this.handleMouseUp}
        @touchcancel=${this.handleMouseUp}
        @mouseup=${this.handleMouseUp}
        @mouseleave=${this.handleMouseUp}
      >
        ${this.isLoading ? this.loadingTemplate() : x`<slot></slot>`}
        ${this.count ? this.counterTemplate() : E}
      </button>
    `;
  }
  linkTemplate() {
    const buttonStyles = this.buttonStyles({
      size: this.size,
      color: this.variant,
      isLongPress: this.isLongPress,
      isFullWidth: this.isFullWidth,
      isPressed: this.isPressed,
      isIcon: this.isIcon
    });
    return x`
      <a
        data-testid="link"
        class=${cn(buttonStyles, this.customClass)}
        href=${this.href}
        target=${this.target}
        rel=${this.rel}
        aria-label=${this.label}
      >
        <slot></slot>
      </a>
    `;
  }
  render() {
    return x` ${this.isLink ? this.linkTemplate() : this.buttonTemplate()} `;
  }
}
__decorateClass([
  n({ type: String })
], LuksoButton.prototype, "variant");
__decorateClass([
  n({ type: String })
], LuksoButton.prototype, "size");
__decorateClass([
  n({ type: Boolean })
], LuksoButton.prototype, "disabled");
__decorateClass([
  n({ type: Boolean, attribute: "is-full-width" })
], LuksoButton.prototype, "isFullWidth");
__decorateClass([
  n({ type: Boolean, attribute: "is-long-press" })
], LuksoButton.prototype, "isLongPress");
__decorateClass([
  n({ type: Boolean, attribute: "is-link" })
], LuksoButton.prototype, "isLink");
__decorateClass([
  n({ type: Boolean, attribute: "is-loading" })
], LuksoButton.prototype, "isLoading");
__decorateClass([
  n({ type: String })
], LuksoButton.prototype, "type");
__decorateClass([
  n({ type: String })
], LuksoButton.prototype, "href");
__decorateClass([
  n({ type: String })
], LuksoButton.prototype, "target");
__decorateClass([
  n({ type: String })
], LuksoButton.prototype, "rel");
__decorateClass([
  n({ type: String, attribute: "loading-text" })
], LuksoButton.prototype, "loadingText");
__decorateClass([
  n({ type: String, attribute: "custom-class" })
], LuksoButton.prototype, "customClass");
__decorateClass([
  n({ type: Boolean, attribute: "is-active" })
], LuksoButton.prototype, "isActive");
__decorateClass([
  n({ type: Number })
], LuksoButton.prototype, "count");
__decorateClass([
  n({ type: Boolean, attribute: "is-icon" })
], LuksoButton.prototype, "isIcon");
__decorateClass([
  n({ type: String })
], LuksoButton.prototype, "label");
__decorateClass([
  r()
], LuksoButton.prototype, "isPressed");
__decorateClass([
  r()
], LuksoButton.prototype, "noTransition");
__decorateClass([
  r()
], LuksoButton.prototype, "timer");
customElements.define("lukso-button", LuksoButton);

export { LuksoButton };
