'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 state = require('../../state-f73a8b4f.cjs');
const index = require('../../index-e9668573.cjs');
require('../../directive-8278ab14.cjs');

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;
exports.LuksoButton = class LuksoButton extends shared_tailwindElement_index.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.defaultStyles = `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`;
    this.secondaryStyles = `bg-neutral-100 border-neutral-90 text-neutral-20
    hover:shadow-button-hover-secondary active:shadow-button-press-secondary`;
    this.primaryStyles = `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`;
    this.landingStyles = `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`;
    this.textStyles = `bg-transparent border-none text-neutral-20
    hover:text-neutral-35
    active:text-neutral-35 active:scale-100
    disabled:text-neutral-90`;
    this.linkStyles = `!p-0 active:!scale-100 underline text-purple-51 hover:text-purple-41`;
    this.longPressStyles = `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`;
    this.pressedStyles = `before:w-full before:z-[-1]`;
    this.noTransitionStyles = `before:transition-none`;
    this.mediumSize = `h-[48px] px-6 paragraph-inter-16-semi-bold rounded-12`;
    this.smallSize = `h-[28px] px-3 paragraph-inter-12-regular rounded-8 hover:shadow-none active:shadow-none`;
  }
  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 shared_tailwindElement_index.x`<lukso-icon
        name="spinner"
        color=${this.variant === "secondary" || this.variant === "text" ? "neutral-20" : "neutral-100"}
        class=${index.customClassMap({
      "animate-spin": true,
      "mr-2": !!this.loadingText
    })}
      ></lukso-icon>
      ${this.loadingText}`;
  }
  counterTemplate() {
    return shared_tailwindElement_index.x`
      <span
        class=${index.customClassMap({
      "ml-2 border border-neutral-20 rounded-4 px-[2px] py-[1px] paragraph-inter-10-semi-bold": true,
      ["text-neutral-100 bg-neutral-20"]: this.isActive,
      ["text-neutral-20 bg-neutral-100"]: !this.isActive
    })}
        >${this.count}</span
      >
    `;
  }
  buttonTemplate() {
    return shared_tailwindElement_index.x`
      <button
        data-testid="button"
        ?disabled=${this.disabled || this.isLoading}
        type=${this.type}
        class=${index.customClassMap({
      [this.defaultStyles]: true,
      [this.mediumSize]: this.size === "medium",
      [this.smallSize]: this.size === "small",
      [this.primaryStyles]: this.variant === "primary",
      [this.secondaryStyles]: this.variant === "secondary",
      [this.landingStyles]: this.variant === "landing",
      [this.textStyles]: this.variant === "text",
      ["w-full"]: this.isFullWidth,
      [this.longPressStyles]: this.isLongPress,
      [this.pressedStyles]: this.isPressed,
      [this.noTransitionStyles]: this.noTransition,
      ["!border-neutral-20"]: this.isActive && this.variant === "secondary",
      [this.customClass]: !!this.customClass
    })}
        @mousedown=${this.handleMouseDown}
        @mouseup=${this.handleMouseUp}
        @mouseleave=${this.handleMouseUp}
      >
        ${this.isLoading ? this.loadingTemplate() : shared_tailwindElement_index.x`<slot></slot>`}
        ${this.count ? this.counterTemplate() : ""}
      </button>
    `;
  }
  linkTemplate() {
    return shared_tailwindElement_index.x`
      <a
        data-testid="link"
        class=${index.customClassMap({
      [this.defaultStyles]: true,
      [this.mediumSize]: this.size === "medium",
      [this.smallSize]: this.size === "small",
      [this.primaryStyles]: this.variant === "primary",
      [this.secondaryStyles]: this.variant === "secondary",
      [this.landingStyles]: this.variant === "landing",
      [this.textStyles]: this.variant === "text",
      [this.linkStyles]: this.variant === "text",
      ["w-full"]: this.isFullWidth,
      ["!border-neutral-20"]: this.isActive && this.variant === "secondary",
      [this.customClass]: !!this.customClass
    })}
        href=${this.href}
        target=${this.target}
        rel=${this.rel}
      >
        <slot></slot>
      </a>
    `;
  }
  render() {
    return shared_tailwindElement_index.x` ${this.isLink ? this.linkTemplate() : this.buttonTemplate()} `;
  }
};
__decorateClass([
  queryAssignedElements.n({ type: String })
], exports.LuksoButton.prototype, "variant", 2);
__decorateClass([
  queryAssignedElements.n({ type: String })
], exports.LuksoButton.prototype, "size", 2);
__decorateClass([
  queryAssignedElements.n({ type: Boolean })
], exports.LuksoButton.prototype, "disabled", 2);
__decorateClass([
  queryAssignedElements.n({ type: Boolean, attribute: "is-full-width" })
], exports.LuksoButton.prototype, "isFullWidth", 2);
__decorateClass([
  queryAssignedElements.n({ type: Boolean, attribute: "is-long-press" })
], exports.LuksoButton.prototype, "isLongPress", 2);
__decorateClass([
  queryAssignedElements.n({ type: Boolean, attribute: "is-link" })
], exports.LuksoButton.prototype, "isLink", 2);
__decorateClass([
  queryAssignedElements.n({ type: Boolean, attribute: "is-loading" })
], exports.LuksoButton.prototype, "isLoading", 2);
__decorateClass([
  queryAssignedElements.n({ type: String })
], exports.LuksoButton.prototype, "type", 2);
__decorateClass([
  queryAssignedElements.n({ type: String })
], exports.LuksoButton.prototype, "href", 2);
__decorateClass([
  queryAssignedElements.n({ type: String })
], exports.LuksoButton.prototype, "target", 2);
__decorateClass([
  queryAssignedElements.n({ type: String })
], exports.LuksoButton.prototype, "rel", 2);
__decorateClass([
  queryAssignedElements.n({ type: String, attribute: "loading-text" })
], exports.LuksoButton.prototype, "loadingText", 2);
__decorateClass([
  queryAssignedElements.n({ type: String, attribute: "custom-class" })
], exports.LuksoButton.prototype, "customClass", 2);
__decorateClass([
  queryAssignedElements.n({ type: Boolean, attribute: "is-active" })
], exports.LuksoButton.prototype, "isActive", 2);
__decorateClass([
  queryAssignedElements.n({ type: Number })
], exports.LuksoButton.prototype, "count", 2);
__decorateClass([
  state.t()
], exports.LuksoButton.prototype, "isPressed", 2);
__decorateClass([
  state.t()
], exports.LuksoButton.prototype, "noTransition", 2);
__decorateClass([
  state.t()
], exports.LuksoButton.prototype, "timer", 2);
exports.LuksoButton = __decorateClass([
  queryAssignedElements.e("lukso-button")
], exports.LuksoButton);
