@lukso/web-components 1.6.2 → 1.7.3

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

@@ -0,0 +1,70 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const shared_tailwindElement_index = require('../../index-4aafbf5c.cjs');
+const directive = require('../../directive-db00f5fb.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;
+};
+exports.LuksoModal = class LuksoModal extends shared_tailwindElement_index.TailwindElement {
+  constructor() {
+    super(...arguments);
+    this.isOpen = false;
+    this.size = "small";
+    this.wrapperStyles = `opacity-0 fixed z-[1000] transition-opacity top-0 left-0 p-6 animate-fade-in animation-duration-200`;
+    this.openStyles = `flex opacity-100 visible items-center justify-center w-[100vw] h-[100vh]`;
+    this.overlayStyles = `bg-[rgba(36,53,66,0.8)] backdrop-blur-sm fixed top-0 left-0 w-[100vw] h-[100vh] z-[999]`;
+    this.dialogStyles = `bg-neutral-98 rounded-xl shadow-neutral-drop-shadow-3xl z-[1001]`;
+  }
+  close() {
+    this.isOpen = false;
+  }
+  render() {
+    return shared_tailwindElement_index.y`
+      <div
+        data-testid="modal"
+        class=${index.customClassMap({
+      [this.wrapperStyles]: true,
+      [this.openStyles]: this.isOpen,
+      ["invisible"]: !this.isOpen
+    })}
+      >
+        <div
+          class=${index.customClassMap({
+      [this.overlayStyles]: true
+    })}
+        ></div>
+        <div
+          class=${index.customClassMap({
+      [this.dialogStyles]: true,
+      ["w-[352px]"]: this.size === "small",
+      ["w-[849px]"]: this.size === "medium",
+      ["w-full"]: this.size === "full"
+    })}
+        >
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  directive.e({ type: Boolean, attribute: "is-open" })
+], exports.LuksoModal.prototype, "isOpen", 2);
+__decorateClass([
+  directive.e({ type: String })
+], exports.LuksoModal.prototype, "size", 2);
+exports.LuksoModal = __decorateClass([
+  directive.e$1("lukso-modal")
+], exports.LuksoModal);

package/dist/components/lukso-modal/index.d.ts

@@ -0,0 +1,18 @@
+import { TailwindElement } from '../../shared/tailwind-element';
+export declare type ModalSizes = 'small' | 'medium' | 'full';
+export declare class LuksoModal extends TailwindElement {
+    isOpen: boolean;
+    size: ModalSizes;
+    private wrapperStyles;
+    private openStyles;
+    private overlayStyles;
+    private dialogStyles;
+    private close;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lukso-modal': LuksoModal;
+    }
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/components/lukso-modal/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAG3D,oBAAY,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAA;AAEpD,qBACa,UAAW,SAAQ,eAAe;IAE7C,MAAM,UAAQ;IAGd,IAAI,EAAE,UAAU,CAAU;IAE1B,OAAO,CAAC,aAAa,CAAwG;IAC7H,OAAO,CAAC,UAAU,CAA6E;IAC/F,OAAO,CAAC,aAAa,CAA4F;IACjH,OAAO,CAAC,YAAY,CAAqE;IAEzF,OAAO,CAAC,KAAK;IAIb,MAAM;CA4BP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAA;KAC1B;CACF"}

package/dist/components/lukso-modal/index.js

@@ -0,0 +1,68 @@
+import { a as TailwindElement, y } from '../../index-e1077e02.js';
+import { e, a as e$1 } from '../../directive-9ec64c08.js';
+import { c as customClassMap } from '../../index-714323c9.js';
+
+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;
+};
+let LuksoModal = class extends TailwindElement {
+  constructor() {
+    super(...arguments);
+    this.isOpen = false;
+    this.size = "small";
+    this.wrapperStyles = `opacity-0 fixed z-[1000] transition-opacity top-0 left-0 p-6 animate-fade-in animation-duration-200`;
+    this.openStyles = `flex opacity-100 visible items-center justify-center w-[100vw] h-[100vh]`;
+    this.overlayStyles = `bg-[rgba(36,53,66,0.8)] backdrop-blur-sm fixed top-0 left-0 w-[100vw] h-[100vh] z-[999]`;
+    this.dialogStyles = `bg-neutral-98 rounded-xl shadow-neutral-drop-shadow-3xl z-[1001]`;
+  }
+  close() {
+    this.isOpen = false;
+  }
+  render() {
+    return y`
+      <div
+        data-testid="modal"
+        class=${customClassMap({
+      [this.wrapperStyles]: true,
+      [this.openStyles]: this.isOpen,
+      ["invisible"]: !this.isOpen
+    })}
+      >
+        <div
+          class=${customClassMap({
+      [this.overlayStyles]: true
+    })}
+        ></div>
+        <div
+          class=${customClassMap({
+      [this.dialogStyles]: true,
+      ["w-[352px]"]: this.size === "small",
+      ["w-[849px]"]: this.size === "medium",
+      ["w-full"]: this.size === "full"
+    })}
+        >
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  e({ type: Boolean, attribute: "is-open" })
+], LuksoModal.prototype, "isOpen", 2);
+__decorateClass([
+  e({ type: String })
+], LuksoModal.prototype, "size", 2);
+LuksoModal = __decorateClass([
+  e$1("lukso-modal")
+], LuksoModal);
+
+export { LuksoModal };

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

@@ -0,0 +1,74 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const shared_tailwindElement_index = require('../../index-4aafbf5c.cjs');
+const directive = require('../../directive-db00f5fb.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;
+};
+exports.LuksoNavbar = class LuksoNavbar extends shared_tailwindElement_index.TailwindElement {
+  constructor() {
+    super(...arguments);
+    this.title = "";
+    this.isCenter = false;
+    this.isSticky = false;
+    this.defaultStyles = `bg-neutral-100 shadow-pink-drop-shadow h-78 flex`;
+    this.centerStyles = `justify-center`;
+    this.stickyStyles = `sticky top-0 z-[1000]`;
+  }
+  _onBrandClick() {
+    const event = new CustomEvent("on-brand-click", {
+      bubbles: true,
+      composed: true
+    });
+    this.dispatchEvent(event);
+  }
+  render() {
+    return shared_tailwindElement_index.y`
+      <nav
+        data-testid="navbar"
+        class=${index.customClassMap({
+      [this.defaultStyles]: true,
+      [this.centerStyles]: this.isCenter,
+      [this.stickyStyles]: this.isSticky
+    })}
+      >
+        <div
+          class="flex items-center px-10 h-full cursor-pointer"
+          @click=${this._onBrandClick}
+        >
+          <img src="/assets/images/lukso-logo.svg" class="mr-4" />
+          <div
+            class="text-purple-51 heading-h4-medium-uppercase-apax whitespace-pre-line flex leading-none"
+          >
+            ${this.title}
+          </div>
+        </div>
+        <slot></slot>
+      </nav>
+    `;
+  }
+};
+__decorateClass([
+  directive.e({ type: String })
+], exports.LuksoNavbar.prototype, "title", 2);
+__decorateClass([
+  directive.e({ type: Boolean, attribute: "is-center" })
+], exports.LuksoNavbar.prototype, "isCenter", 2);
+__decorateClass([
+  directive.e({ type: Boolean, attribute: "is-sticky" })
+], exports.LuksoNavbar.prototype, "isSticky", 2);
+exports.LuksoNavbar = __decorateClass([
+  directive.e$1("lukso-navbar")
+], exports.LuksoNavbar);