@lukso/web-components 1.6.3 → 1.7.3

package/dist/components/lukso-button/index.cjs

@@ -0,0 +1,144 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const shared_tailwindElement_index = require('../../index-4aafbf5c.cjs');
+const directive = require('../../directive-db00f5fb.cjs');
+const state = require('../../state-a62a7d5d.cjs');
+const index = require('../../index-7dc05ee5.cjs');
+
+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.TailwindElement {
+  constructor() {
+    super(...arguments);
+    this.variant = "primary";
+    this.size = "medium";
+    this.disabled = false;
+    this.isFullWidth = false;
+    this.isLongPress = false;
+    this.isPressed = false;
+    this.noTransition = false;
+    this.timer = 0;
+    this.defaultStyles = `flex justify-center items-center relative
+    border border-solid cursor-pointer transition duration-0
+    hover:duration-250 active:scale-98 active:duration-25
+    disabled:shadow-none disabled:cursor-not-allowed disabled:scale-100`;
+    this.secondaryStyles = `bg-neutral-100 border-neutral-90 text-neutral-20
+    disabled:bg-neutral-90 disabled:border-neutral-90 disabled:text-neutral-100
+    hover:shadow-button-hover-secondary active:shadow-button-press-secondary`;
+    this.primaryStyles = `bg-neutral-20 border-neutral-20 text-neutral-100
+    disabled:bg-neutral-90 disabled:border-neutral-90
+    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:bg-neutral-90 disabled:border-neutral-90
+    hover:shadow-button-hover-primary hover:bg-purple-58 hover:border-purple-58
+    active:shadow-button-press-primary
+    before:bg-purple-51`;
+    this.linkStyles = `bg-transparent border-none text-neutral-20
+    hover:text-neutral-35
+    active:text-neutral-35 active:scale-100
+    disabled:text-neutral-90`;
+    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-none`;
+    this.pressedStyles = `before:w-full before:z-[-1]`;
+    this.noTransitionStyles = `before:transition-none`;
+    this.mediumSize = `py-3 px-6 paragraph-16-semi-bold rounded-xl`;
+    this.smallSize = `py-1 px-3 paragraph-12-regular rounded-lg hover:shadow-none active:shadow-none`;
+  }
+  handleMouseDown() {
+    if (this.variant !== "primary" && this.variant !== "landing") {
+      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);
+  }
+  render() {
+    return shared_tailwindElement_index.y`
+      <button
+        data-testid="button"
+        ?disabled=${this.disabled}
+        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.linkStyles]: this.variant === "link",
+      ["w-full"]: this.isFullWidth,
+      [this.longPressStyles]: this.isLongPress,
+      [this.pressedStyles]: this.isPressed,
+      [this.noTransitionStyles]: this.noTransition
+    })}
+        @mousedown=${this.handleMouseDown}
+        @mouseup=${this.handleMouseUp}
+        @mouseleave=${this.handleMouseUp}
+      >
+        <slot></slot>
+      </button>
+    `;
+  }
+};
+__decorateClass([
+  directive.e({ type: String })
+], exports.LuksoButton.prototype, "variant", 2);
+__decorateClass([
+  directive.e({ type: String })
+], exports.LuksoButton.prototype, "size", 2);
+__decorateClass([
+  directive.e({ type: Boolean })
+], exports.LuksoButton.prototype, "disabled", 2);
+__decorateClass([
+  directive.e({ type: Boolean, attribute: "is-full-width" })
+], exports.LuksoButton.prototype, "isFullWidth", 2);
+__decorateClass([
+  directive.e({ type: Boolean, attribute: "is-long-press" })
+], exports.LuksoButton.prototype, "isLongPress", 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([
+  directive.e$1("lukso-button")
+], exports.LuksoButton);