@lukso/web-components 1.85.0 → 1.86.0

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

@@ -2,14 +2,14 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-e653a9ff.cjs');
+const shared_tailwindElement_index = require('../../index-df36fb06.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-d5e45650.cjs');
 const state = require('../../state-d9fb972b.cjs');
 const index = require('../../index-e9668573.cjs');
 require('../lukso-icon/index.cjs');
 require('../lukso-sanitize/index.cjs');
 require('../../directive-8278ab14.cjs');
-require('../../style-map-a6d61d04.cjs');
+require('../../style-map-7ce21e2c.cjs');
 
 const style = ":host {\n    display: flex;\n    height: 100%\n}";
 

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

@@ -1,11 +1,11 @@
-import { T as TailwindStyledElement, x } from '../../index-f72579d6.js';
+import { T as TailwindStyledElement, x } from '../../index-b2b49383.js';
 import { n, e } from '../../query-assigned-elements-1c8c9e90.js';
 import { t } from '../../state-b9ca4e74.js';
 import { c as customClassMap } from '../../index-5e194caf.js';
 import '../lukso-icon/index.js';
 import '../lukso-sanitize/index.js';
 import '../../directive-2bb7789e.js';
-import '../../style-map-ad97bcc3.js';
+import '../../style-map-6e8b083a.js';
 
 const style = ":host {\n    display: flex;\n    height: 100%\n}";
 

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-e653a9ff.cjs');
+const shared_tailwindElement_index = require('../../index-df36fb06.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-d5e45650.cjs');
 const directive = require('../../directive-8278ab14.cjs');
 

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

@@ -1,4 +1,4 @@
-import { b as T$1, T as TailwindStyledElement, x as x$1 } from '../../index-f72579d6.js';
+import { b as T$1, T as TailwindStyledElement, x as x$1 } from '../../index-b2b49383.js';
 import { n as n$3, e as e$3 } from '../../query-assigned-elements-1c8c9e90.js';
 import { e as e$2, i as i$3, t as t$3 } from '../../directive-2bb7789e.js';
 

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

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-e653a9ff.cjs');
+const shared_tailwindElement_index = require('../../index-df36fb06.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-d5e45650.cjs');
 const state = require('../../state-d9fb972b.cjs');
 const index = require('../../index-1d3f4a5a.cjs');
-const styleMap = require('../../style-map-a6d61d04.cjs');
+const styleMap = require('../../style-map-7ce21e2c.cjs');
 require('../../bundle-mjs-d58a83c6.cjs');
 require('../../directive-8278ab14.cjs');
 

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

@@ -1,8 +1,8 @@
-import { T as TailwindStyledElement, x } from '../../index-f72579d6.js';
+import { T as TailwindStyledElement, x } from '../../index-b2b49383.js';
 import { n, e } from '../../query-assigned-elements-1c8c9e90.js';
 import { t } from '../../state-b9ca4e74.js';
 import { c as ce } from '../../index-ca8e900d.js';
-import { o } from '../../style-map-ad97bcc3.js';
+import { o } from '../../style-map-6e8b083a.js';
 import '../../bundle-mjs-fbc6e2a8.js';
 import '../../directive-2bb7789e.js';
 

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

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-e653a9ff.cjs');
+const shared_tailwindElement_index = require('../../index-df36fb06.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-d5e45650.cjs');
 const index = require('../../index-1d3f4a5a.cjs');
-const index$1 = require('../../index-3b498928.cjs');
+const index$1 = require('../../index-bf97dd78.cjs');
 require('../../tailwind-config.cjs');
 const cn = require('../../cn-5ceac001.cjs');
 require('../../bundle-mjs-d58a83c6.cjs');

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

@@ -1,7 +1,7 @@
-import { T as TailwindStyledElement, x, A } from '../../index-f72579d6.js';
+import { T as TailwindStyledElement, x, A } from '../../index-b2b49383.js';
 import { n, e } from '../../query-assigned-elements-1c8c9e90.js';
 import { c as ce } from '../../index-ca8e900d.js';
-import { c as customStyleMap } from '../../index-8043be8a.js';
+import { c as customStyleMap } from '../../index-f1acf332.js';
 import '../../tailwind-config.js';
 import { c as cn } from '../../cn-b54dcc61.js';
 import '../../bundle-mjs-fbc6e2a8.js';

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-e653a9ff.cjs');
+const shared_tailwindElement_index = require('../../index-df36fb06.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-d5e45650.cjs');
 const directive = require('../../directive-8278ab14.cjs');
 const index = require('../../index-1d3f4a5a.cjs');

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

@@ -1,4 +1,4 @@
-import { j, b as T, T as TailwindStyledElement, x } from '../../index-f72579d6.js';
+import { j, b as T, T as TailwindStyledElement, x } from '../../index-b2b49383.js';
 import { n, e as e$1 } from '../../query-assigned-elements-1c8c9e90.js';
 import { e, i, t } from '../../directive-2bb7789e.js';
 import { c as ce } from '../../index-ca8e900d.js';

package/dist/index-30881141.js

@@ -0,0 +1,141 @@
+import { T as TailwindStyledElement, A, x } from './index-b2b49383.js';
+import { n, e } from './query-assigned-elements-1c8c9e90.js';
+import { t } from './state-b9ca4e74.js';
+import { c as ce } from './index-ca8e900d.js';
+import './components/lukso-icon/index.js';
+import './components/lukso-profile/index.js';
+import './components/lukso-username/index.js';
+
+const style = ":host {\n    display: flex;\n    width: 100%\n}";
+
+const uniqId = () => {
+  const s4 = () => ((1 + Math.random()) * 65536 | 0).toString(16).substring(1);
+  return `${s4() + s4()}-${s4()}-${s4()}-${s4()}-${s4()}${s4()}${s4()}`;
+};
+
+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 LuksoDropdown = class extends TailwindStyledElement(style) {
+  constructor() {
+    super();
+    this.id = "";
+    this.triggerId = "";
+    this.isOpen = false;
+    this.isOpenOnOutsideClick = false;
+    this.openTop = false;
+    this.isRight = false;
+    this.isFullWidth = false;
+    this.size = "medium";
+    this._isOpen = false;
+    this.styles = ce({
+      base: `bg-neutral-100 border w-full border-neutral-90 shadow-1xl z-50
+      flex absolute flex-col gap-1 overflow-y-auto max-h-64 `,
+      variants: {
+        openTop: {
+          true: "bottom-[48px] mb-2 mt-0"
+        },
+        size: {
+          small: "rounded-8 p-2 mt-1 min-w-[120px] paragraph-inter-12-regular",
+          medium: "rounded-12 p-3 mt-2 min-w-[200px] paragraph-inter-14-regular"
+        },
+        isRight: {
+          true: "right-0"
+        },
+        isFullWidth: {
+          true: "w-full"
+        }
+      },
+      compoundVariants: [
+        {
+          isFullWidth: false,
+          size: "small",
+          class: "max-w-[200px]"
+        },
+        {
+          isFullWidth: false,
+          size: "medium",
+          class: "max-w-[300px]"
+        }
+      ]
+    });
+    if (!this.id) {
+      this.id = uniqId();
+    }
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    window.addEventListener("click", this.handleClick.bind(this));
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    window.removeEventListener("click", this.handleClick);
+  }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("isOpen")) {
+      this._isOpen = this.isOpen;
+    }
+  }
+  handleClick(event) {
+    const element = event.target;
+    if (element.id === this.triggerId || this.id === element.id) {
+      this._isOpen = !this._isOpen;
+      return;
+    }
+    if (!this.isOpenOnOutsideClick) {
+      this._isOpen = false;
+    }
+  }
+  render() {
+    const styles = this.styles({
+      openTop: this.openTop,
+      size: this.size,
+      isRight: this.isRight,
+      isFullWidth: this.isFullWidth
+    });
+    if (!this._isOpen) {
+      return A;
+    }
+    return x`<div class="${styles}"><slot></slot></div>`;
+  }
+};
+__decorateClass([
+  n({ type: String })
+], LuksoDropdown.prototype, "id", 2);
+__decorateClass([
+  n({ type: String, attribute: "trigger-id" })
+], LuksoDropdown.prototype, "triggerId", 2);
+__decorateClass([
+  n({ type: Boolean, attribute: "is-open" })
+], LuksoDropdown.prototype, "isOpen", 2);
+__decorateClass([
+  n({ type: Boolean, attribute: "is-open-on-outside-click" })
+], LuksoDropdown.prototype, "isOpenOnOutsideClick", 2);
+__decorateClass([
+  n({ type: Boolean, attribute: "open-top" })
+], LuksoDropdown.prototype, "openTop", 2);
+__decorateClass([
+  n({ type: Boolean, attribute: "is-right" })
+], LuksoDropdown.prototype, "isRight", 2);
+__decorateClass([
+  n({ type: Boolean, attribute: "is-full-width" })
+], LuksoDropdown.prototype, "isFullWidth", 2);
+__decorateClass([
+  n({ type: String })
+], LuksoDropdown.prototype, "size", 2);
+__decorateClass([
+  t()
+], LuksoDropdown.prototype, "_isOpen", 2);
+LuksoDropdown = __decorateClass([
+  e("lukso-dropdown")
+], LuksoDropdown);
+
+export { LuksoDropdown as L, uniqId as u };

package/dist/index-abf15ef1.cjs

@@ -0,0 +1,143 @@
+'use strict';
+
+const shared_tailwindElement_index = require('./index-df36fb06.cjs');
+const queryAssignedElements = require('./query-assigned-elements-d5e45650.cjs');
+const state = require('./state-d9fb972b.cjs');
+const index = require('./index-1d3f4a5a.cjs');
+require('./components/lukso-icon/index.cjs');
+require('./components/lukso-profile/index.cjs');
+require('./components/lukso-username/index.cjs');
+
+const style = ":host {\n    display: flex;\n    width: 100%\n}";
+
+const uniqId = () => {
+  const s4 = () => ((1 + Math.random()) * 65536 | 0).toString(16).substring(1);
+  return `${s4() + s4()}-${s4()}-${s4()}-${s4()}-${s4()}${s4()}${s4()}`;
+};
+
+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.LuksoDropdown = class LuksoDropdown extends shared_tailwindElement_index.TailwindStyledElement(style) {
+  constructor() {
+    super();
+    this.id = "";
+    this.triggerId = "";
+    this.isOpen = false;
+    this.isOpenOnOutsideClick = false;
+    this.openTop = false;
+    this.isRight = false;
+    this.isFullWidth = false;
+    this.size = "medium";
+    this._isOpen = false;
+    this.styles = index.ce({
+      base: `bg-neutral-100 border w-full border-neutral-90 shadow-1xl z-50
+      flex absolute flex-col gap-1 overflow-y-auto max-h-64 `,
+      variants: {
+        openTop: {
+          true: "bottom-[48px] mb-2 mt-0"
+        },
+        size: {
+          small: "rounded-8 p-2 mt-1 min-w-[120px] paragraph-inter-12-regular",
+          medium: "rounded-12 p-3 mt-2 min-w-[200px] paragraph-inter-14-regular"
+        },
+        isRight: {
+          true: "right-0"
+        },
+        isFullWidth: {
+          true: "w-full"
+        }
+      },
+      compoundVariants: [
+        {
+          isFullWidth: false,
+          size: "small",
+          class: "max-w-[200px]"
+        },
+        {
+          isFullWidth: false,
+          size: "medium",
+          class: "max-w-[300px]"
+        }
+      ]
+    });
+    if (!this.id) {
+      this.id = uniqId();
+    }
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    window.addEventListener("click", this.handleClick.bind(this));
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    window.removeEventListener("click", this.handleClick);
+  }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("isOpen")) {
+      this._isOpen = this.isOpen;
+    }
+  }
+  handleClick(event) {
+    const element = event.target;
+    if (element.id === this.triggerId || this.id === element.id) {
+      this._isOpen = !this._isOpen;
+      return;
+    }
+    if (!this.isOpenOnOutsideClick) {
+      this._isOpen = false;
+    }
+  }
+  render() {
+    const styles = this.styles({
+      openTop: this.openTop,
+      size: this.size,
+      isRight: this.isRight,
+      isFullWidth: this.isFullWidth
+    });
+    if (!this._isOpen) {
+      return shared_tailwindElement_index.A;
+    }
+    return shared_tailwindElement_index.x`<div class="${styles}"><slot></slot></div>`;
+  }
+};
+__decorateClass([
+  queryAssignedElements.n({ type: String })
+], exports.LuksoDropdown.prototype, "id", 2);
+__decorateClass([
+  queryAssignedElements.n({ type: String, attribute: "trigger-id" })
+], exports.LuksoDropdown.prototype, "triggerId", 2);
+__decorateClass([
+  queryAssignedElements.n({ type: Boolean, attribute: "is-open" })
+], exports.LuksoDropdown.prototype, "isOpen", 2);
+__decorateClass([
+  queryAssignedElements.n({ type: Boolean, attribute: "is-open-on-outside-click" })
+], exports.LuksoDropdown.prototype, "isOpenOnOutsideClick", 2);
+__decorateClass([
+  queryAssignedElements.n({ type: Boolean, attribute: "open-top" })
+], exports.LuksoDropdown.prototype, "openTop", 2);
+__decorateClass([
+  queryAssignedElements.n({ type: Boolean, attribute: "is-right" })
+], exports.LuksoDropdown.prototype, "isRight", 2);
+__decorateClass([
+  queryAssignedElements.n({ type: Boolean, attribute: "is-full-width" })
+], exports.LuksoDropdown.prototype, "isFullWidth", 2);
+__decorateClass([
+  queryAssignedElements.n({ type: String })
+], exports.LuksoDropdown.prototype, "size", 2);
+__decorateClass([
+  state.t()
+], exports.LuksoDropdown.prototype, "_isOpen", 2);
+exports.LuksoDropdown = __decorateClass([
+  queryAssignedElements.e("lukso-dropdown")
+], exports.LuksoDropdown);
+
+exports.uniqId = uniqId;