@lukso/web-components 1.119.0 → 1.120.0

package/dist/index.cjs

@@ -6,7 +6,7 @@ const components_luksoButton_index = require('./components/lukso-button/index.cj
 const components_luksoCard_index = require('./components/lukso-card/index.cjs');
 const components_luksoCheckbox_index = require('./components/lukso-checkbox/index.cjs');
 const components_luksoColorPicker_index = require('./components/lukso-color-picker/index.cjs');
-const components_luksoDropdown_index = require('./index-104cf124.cjs');
+const components_luksoDropdown_index = require('./components/lukso-dropdown/index.cjs');
 const components_luksoDropdownOption_index = require('./components/lukso-dropdown-option/index.cjs');
 const components_luksoFooter_index = require('./components/lukso-footer/index.cjs');
 const components_luksoIcon_index = require('./components/lukso-icon/index.cjs');
@@ -15,7 +15,7 @@ const components_luksoInput_index = require('./components/lukso-input/index.cjs'
 const components_luksoModal_index = require('./components/lukso-modal/index.cjs');
 const components_luksoNavbar_index = require('./components/lukso-navbar/index.cjs');
 const components_luksoPagination_index = require('./components/lukso-pagination/index.cjs');
-const components_luksoProfile_index = require('./index-67915f32.cjs');
+const components_luksoProfile_index = require('./index-2c4a91c9.cjs');
 const components_luksoProgress_index = require('./components/lukso-progress/index.cjs');
 const components_luksoSanitize_index = require('./components/lukso-sanitize/index.cjs');
 const components_luksoSearch_index = require('./components/lukso-search/index.cjs');
@@ -29,16 +29,17 @@ const components_luksoTextarea_index = require('./components/lukso-textarea/inde
 const components_luksoTooltip_index = require('./components/lukso-tooltip/index.cjs');
 const components_luksoUsername_index = require('./components/lukso-username/index.cjs');
 const components_luksoWizard_index = require('./components/lukso-wizard/index.cjs');
-const shared_tailwindElement_index = require('./index-68c61387.cjs');
+const shared_tailwindElement_index = require('./index-f785b4c0.cjs');
 const cn = require('./cn-b6daa995.cjs');
-require('./property-bf2eee83.cjs');
-require('./state-375dfffc.cjs');
+require('./property-0715f936.cjs');
+require('./state-908940e8.cjs');
 require('./index-2b104ecb.cjs');
 require('./tailwind-config.cjs');
-require('./style-map-8e54f508.cjs');
+require('./style-map-074a8e8b.cjs');
 require('./directive-8278ab14.cjs');
-require('./index-3926da18.cjs');
+require('./index-b1f10728.cjs');
 require('./index-e9668573.cjs');
+require('./uniq-id-f0b18085.cjs');
 
 
 

package/dist/index.js

@@ -2,7 +2,7 @@ export { LuksoButton } from './components/lukso-button/index.js';
 export { LuksoCard } from './components/lukso-card/index.js';
 export { LuksoCheckbox } from './components/lukso-checkbox/index.js';
 export { LuksoColorPicker } from './components/lukso-color-picker/index.js';
-export { L as LuksoDropdown } from './index-12775596.js';
+export { LuksoDropdown } from './components/lukso-dropdown/index.js';
 export { LuksoDropdownOption } from './components/lukso-dropdown-option/index.js';
 export { LuksoFooter } from './components/lukso-footer/index.js';
 export { LuksoIcon } from './components/lukso-icon/index.js';
@@ -11,7 +11,7 @@ export { LuksoInput } from './components/lukso-input/index.js';
 export { LuksoModal } from './components/lukso-modal/index.js';
 export { LuksoNavbar } from './components/lukso-navbar/index.js';
 export { LuksoPagination } from './components/lukso-pagination/index.js';
-export { L as LuksoProfile } from './index-ff8d75cd.js';
+export { L as LuksoProfile } from './index-0fc204c6.js';
 export { LuksoProgress } from './components/lukso-progress/index.js';
 export { LuksoSanitize } from './components/lukso-sanitize/index.js';
 export { LuksoSearch } from './components/lukso-search/index.js';
@@ -25,13 +25,14 @@ export { LuksoTextarea } from './components/lukso-textarea/index.js';
 export { LuksoTooltip } from './components/lukso-tooltip/index.js';
 export { LuksoUsername } from './components/lukso-username/index.js';
 export { LuksoWizard } from './components/lukso-wizard/index.js';
-export { a as TailwindElement, T as TailwindStyledElement } from './index-92dc158d.js';
+export { a as TailwindElement, T as TailwindStyledElement } from './index-c074fb48.js';
 export { c as cn } from './cn-90c03edf.js';
-import './property-eaa52bd9.js';
-import './state-1fc9a224.js';
+import './property-db140eda.js';
+import './state-13f19dcc.js';
 import './index-d14b6a34.js';
 import './tailwind-config.js';
-import './style-map-5aef4b6f.js';
+import './style-map-3fe95282.js';
 import './directive-2bb7789e.js';
-import './index-7bb28a79.js';
+import './index-81a8cb3d.js';
 import './index-5e194caf.js';
+import './uniq-id-ce2d165c.js';

package/dist/{property-bf2eee83.cjs → property-0715f936.cjs}

@@ -1,6 +1,6 @@
 'use strict';
 
-const shared_tailwindElement_index = require('./index-68c61387.cjs');
+const shared_tailwindElement_index = require('./index-f785b4c0.cjs');
 
 /**
  * @license

package/dist/{property-eaa52bd9.js → property-db140eda.js}

@@ -1,4 +1,4 @@
-import { u, f } from './index-92dc158d.js';
+import { u, f } from './index-c074fb48.js';
 
 /**
  * @license

package/dist/shared/tailwind-element/index.cjs

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-68c61387.cjs');
+const shared_tailwindElement_index = require('../../index-f785b4c0.cjs');
 
 
 

package/dist/shared/tailwind-element/index.js

@@ -1 +1 @@
-export { a as TailwindElement, T as TailwindStyledElement } from '../../index-92dc158d.js';
+export { a as TailwindElement, T as TailwindStyledElement } from '../../index-c074fb48.js';

package/dist/{state-1fc9a224.js → state-13f19dcc.js}

@@ -1,4 +1,4 @@
-import { n } from './property-eaa52bd9.js';
+import { n } from './property-db140eda.js';
 
 /**
  * @license

package/dist/{state-375dfffc.cjs → state-908940e8.cjs}

@@ -1,6 +1,6 @@
 'use strict';
 
-const property = require('./property-bf2eee83.cjs');
+const property = require('./property-0715f936.cjs');
 
 /**
  * @license

package/dist/{style-map-8e54f508.cjs → style-map-074a8e8b.cjs}

@@ -1,6 +1,6 @@
 'use strict';
 
-const shared_tailwindElement_index = require('./index-68c61387.cjs');
+const shared_tailwindElement_index = require('./index-f785b4c0.cjs');
 const directive = require('./directive-8278ab14.cjs');
 
 /**

package/dist/{style-map-5aef4b6f.js → style-map-3fe95282.js}

@@ -1,4 +1,4 @@
-import { b as T } from './index-92dc158d.js';
+import { b as T } from './index-c074fb48.js';
 import { e, i as i$1, t } from './directive-2bb7789e.js';
 
 /**

package/dist/uniq-id-ce2d165c.js

@@ -0,0 +1,6 @@
+const uniqId = () => {
+  const s4 = () => ((1 + Math.random()) * 65536 | 0).toString(16).substring(1);
+  return `${s4() + s4()}-${s4()}-${s4()}-${s4()}-${s4()}${s4()}${s4()}`;
+};
+
+export { uniqId as u };

package/dist/uniq-id-f0b18085.cjs

@@ -0,0 +1,8 @@
+'use strict';
+
+const uniqId = () => {
+  const s4 = () => ((1 + Math.random()) * 65536 | 0).toString(16).substring(1);
+  return `${s4() + s4()}-${s4()}-${s4()}-${s4()}-${s4()}${s4()}${s4()}`;
+};
+
+exports.uniqId = uniqId;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lukso/web-components",
-  "version": "1.119.0",
+  "version": "1.120.0",
   "type": "module",
   "files": [
     "dist",

package/dist/index-104cf124.cjs

@@ -1,161 +0,0 @@
-'use strict';
-
-const shared_tailwindElement_index = require('./index-68c61387.cjs');
-const property = require('./property-bf2eee83.cjs');
-const index = require('./index-2b104ecb.cjs');
-require('./components/lukso-icon/index.cjs');
-require('./index-67915f32.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()}`;
-};
-
-const debounceFunction = (func, timeout = 100) => {
-  let timer;
-  return (...args) => {
-    clearTimeout(timer);
-    timer = setTimeout(() => {
-      typeof func === "function" && func.apply(void 0, args);
-    }, timeout);
-  };
-};
-
-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.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 w-[max-content]`,
-      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]"
-        }
-      ]
-    });
-    this.handleClick = debounceFunction((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;
-      }
-    });
-    if (!this.id) {
-      this.id = uniqId();
-    }
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    window.addEventListener("click", this.handleClick.bind(this));
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    window.removeEventListener("click", this.handleClick);
-  }
-  async willUpdate(changedProperties) {
-    if (changedProperties.has("isOpen")) {
-      await this.updateComplete;
-      const changeEvent = new CustomEvent(
-        "on-change",
-        {
-          detail: {
-            isOpen: this.isOpen
-          },
-          bubbles: false,
-          composed: true
-        }
-      );
-      this.dispatchEvent(changeEvent);
-    }
-  }
-  render() {
-    const styles = this.styles({
-      openTop: this.openTop,
-      size: this.size,
-      isRight: this.isRight,
-      isFullWidth: this.isFullWidth
-    });
-    if (!this.isOpen) {
-      return shared_tailwindElement_index.E;
-    }
-    return shared_tailwindElement_index.x`<div class="${styles} animate-fade-in animation-duration-200">
-      <slot></slot>
-    </div>`;
-  }
-};
-__decorateClass([
-  property.n({ type: String })
-], exports.LuksoDropdown.prototype, "id", 2);
-__decorateClass([
-  property.n({ type: String, attribute: "trigger-id" })
-], exports.LuksoDropdown.prototype, "triggerId", 2);
-__decorateClass([
-  property.n({ type: Boolean, attribute: "is-open", reflect: true })
-], exports.LuksoDropdown.prototype, "isOpen", 2);
-__decorateClass([
-  property.n({ type: Boolean, attribute: "is-open-on-outside-click" })
-], exports.LuksoDropdown.prototype, "isOpenOnOutsideClick", 2);
-__decorateClass([
-  property.n({ type: Boolean, attribute: "open-top" })
-], exports.LuksoDropdown.prototype, "openTop", 2);
-__decorateClass([
-  property.n({ type: Boolean, attribute: "is-right" })
-], exports.LuksoDropdown.prototype, "isRight", 2);
-__decorateClass([
-  property.n({ type: Boolean, attribute: "is-full-width" })
-], exports.LuksoDropdown.prototype, "isFullWidth", 2);
-__decorateClass([
-  property.n({ type: String })
-], exports.LuksoDropdown.prototype, "size", 2);
-exports.LuksoDropdown = __decorateClass([
-  property.t("lukso-dropdown")
-], exports.LuksoDropdown);
-
-exports.uniqId = uniqId;

package/dist/index-12775596.js

@@ -1,159 +0,0 @@
-import { T as TailwindStyledElement, E, x } from './index-92dc158d.js';
-import { n, t } from './property-eaa52bd9.js';
-import { c as ce } from './index-d14b6a34.js';
-import './components/lukso-icon/index.js';
-import './index-ff8d75cd.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()}`;
-};
-
-const debounceFunction = (func, timeout = 100) => {
-  let timer;
-  return (...args) => {
-    clearTimeout(timer);
-    timer = setTimeout(() => {
-      typeof func === "function" && func.apply(void 0, args);
-    }, timeout);
-  };
-};
-
-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.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 w-[max-content]`,
-      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]"
-        }
-      ]
-    });
-    this.handleClick = debounceFunction((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;
-      }
-    });
-    if (!this.id) {
-      this.id = uniqId();
-    }
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    window.addEventListener("click", this.handleClick.bind(this));
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    window.removeEventListener("click", this.handleClick);
-  }
-  async willUpdate(changedProperties) {
-    if (changedProperties.has("isOpen")) {
-      await this.updateComplete;
-      const changeEvent = new CustomEvent(
-        "on-change",
-        {
-          detail: {
-            isOpen: this.isOpen
-          },
-          bubbles: false,
-          composed: true
-        }
-      );
-      this.dispatchEvent(changeEvent);
-    }
-  }
-  render() {
-    const styles = this.styles({
-      openTop: this.openTop,
-      size: this.size,
-      isRight: this.isRight,
-      isFullWidth: this.isFullWidth
-    });
-    if (!this.isOpen) {
-      return E;
-    }
-    return x`<div class="${styles} animate-fade-in animation-duration-200">
-      <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", reflect: true })
-], 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);
-LuksoDropdown = __decorateClass([
-  t("lukso-dropdown")
-], LuksoDropdown);
-
-export { LuksoDropdown as L, uniqId as u };