'use strict';

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

const shared_tailwindElement_index = require('../../index-68c61387.cjs');
const property = require('../../property-bf2eee83.cjs');
const state = require('../../state-375dfffc.cjs');
const index = require('../../index-2b104ecb.cjs');
require('../../tailwind-config.cjs');
const cn = require('../../cn-b6daa995.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.isIcon = false;
    this.label = "";
    this.isPressed = false;
    this.noTransition = false;
    this.timer = 0;
    this.counterStyles = index.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 = index.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",
          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-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",
          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: {
          medium: "h-[48px] px-6 paragraph-inter-16-semi-bold rounded-12",
          small: "h-[28px] px-3 paragraph-inter-12-medium rounded-8"
        },
        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"
        },
        isIcon: {
          true: ""
        }
      },
      compoundVariants: [
        {
          isActive: true,
          color: "nav-text",
          class: "text-purple-41"
        },
        {
          size: ["medium", "small"],
          color: "link",
          class: "p-0 h-[initial]"
        },
        {
          size: ["medium"],
          color: ["primary", "landing", "success", "danger", "warning"],
          class: "hover:shadow-button-medium-hover-primary active:shadow-button-medium-press-primary"
        },
        {
          size: ["medium"],
          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: ["medium"],
          class: "px-3"
        },
        {
          isIcon: true,
          size: ["small"],
          class: "px-[1px]"
        }
      ]
    });
    this.loadingStyles = index.ce({
      slots: {
        icon: "animate-spin",
        text: ""
      },
      variants: {
        size: {
          small: {
            text: "ml-1"
          },
          medium: {
            text: "ml-2"
          }
        }
      }
    });
  }
  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 shared_tailwindElement_index.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 ? shared_tailwindElement_index.x`<span class=${text()}>${this.loadingText}</span>` : shared_tailwindElement_index.E}`;
  }
  counterTemplate() {
    const counterStyles = this.counterStyles({
      isActive: this.isActive
    });
    return shared_tailwindElement_index.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 shared_tailwindElement_index.x`
      <button
        data-testid="button"
        ?disabled=${this.disabled || this.isLoading}
        type=${this.type}
        class=${cn.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() : shared_tailwindElement_index.x`<slot></slot>`}
        ${this.count ? this.counterTemplate() : shared_tailwindElement_index.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 shared_tailwindElement_index.x`
      <a
        data-testid="link"
        class=${cn.cn(buttonStyles, this.customClass)}
        href=${this.href}
        target=${this.target}
        rel=${this.rel}
        aria-label=${this.label}
      >
        <slot></slot>
      </a>
    `;
  }
  render() {
    return shared_tailwindElement_index.x` ${this.isLink ? this.linkTemplate() : this.buttonTemplate()} `;
  }
};
__decorateClass([
  property.n({ type: String })
], exports.LuksoButton.prototype, "variant", 2);
__decorateClass([
  property.n({ type: String })
], exports.LuksoButton.prototype, "size", 2);
__decorateClass([
  property.n({ type: Boolean })
], exports.LuksoButton.prototype, "disabled", 2);
__decorateClass([
  property.n({ type: Boolean, attribute: "is-full-width" })
], exports.LuksoButton.prototype, "isFullWidth", 2);
__decorateClass([
  property.n({ type: Boolean, attribute: "is-long-press" })
], exports.LuksoButton.prototype, "isLongPress", 2);
__decorateClass([
  property.n({ type: Boolean, attribute: "is-link" })
], exports.LuksoButton.prototype, "isLink", 2);
__decorateClass([
  property.n({ type: Boolean, attribute: "is-loading" })
], exports.LuksoButton.prototype, "isLoading", 2);
__decorateClass([
  property.n({ type: String })
], exports.LuksoButton.prototype, "type", 2);
__decorateClass([
  property.n({ type: String })
], exports.LuksoButton.prototype, "href", 2);
__decorateClass([
  property.n({ type: String })
], exports.LuksoButton.prototype, "target", 2);
__decorateClass([
  property.n({ type: String })
], exports.LuksoButton.prototype, "rel", 2);
__decorateClass([
  property.n({ type: String, attribute: "loading-text" })
], exports.LuksoButton.prototype, "loadingText", 2);
__decorateClass([
  property.n({ type: String, attribute: "custom-class" })
], exports.LuksoButton.prototype, "customClass", 2);
__decorateClass([
  property.n({ type: Boolean, attribute: "is-active" })
], exports.LuksoButton.prototype, "isActive", 2);
__decorateClass([
  property.n({ type: Number })
], exports.LuksoButton.prototype, "count", 2);
__decorateClass([
  property.n({ type: Boolean, attribute: "is-icon" })
], exports.LuksoButton.prototype, "isIcon", 2);
__decorateClass([
  property.n({ type: String })
], exports.LuksoButton.prototype, "label", 2);
__decorateClass([
  state.r()
], exports.LuksoButton.prototype, "isPressed", 2);
__decorateClass([
  state.r()
], exports.LuksoButton.prototype, "noTransition", 2);
__decorateClass([
  state.r()
], exports.LuksoButton.prototype, "timer", 2);
exports.LuksoButton = __decorateClass([
  property.t("lukso-button")
], exports.LuksoButton);
