@lukso/web-components 1.93.0 → 1.94.1

package/dist/components/index.cjs

@@ -6,7 +6,7 @@ const components_luksoButton_index = require('./lukso-button/index.cjs');
 const components_luksoCard_index = require('./lukso-card/index.cjs');
 const components_luksoCheckbox_index = require('./lukso-checkbox/index.cjs');
 const components_luksoColorPicker_index = require('./lukso-color-picker/index.cjs');
-const components_luksoDropdown_index = require('../index-3e12bd24.cjs');
+const components_luksoDropdown_index = require('../index-fb4ea5c3.cjs');
 const components_luksoDropdownOption_index = require('./lukso-dropdown-option/index.cjs');
 const components_luksoFooter_index = require('./lukso-footer/index.cjs');
 const components_luksoIcon_index = require('./lukso-icon/index.cjs');

package/dist/components/index.js

@@ -2,7 +2,7 @@ export { LuksoButton } from './lukso-button/index.js';
 export { LuksoCard } from './lukso-card/index.js';
 export { LuksoCheckbox } from './lukso-checkbox/index.js';
 export { LuksoColorPicker } from './lukso-color-picker/index.js';
-export { L as LuksoDropdown } from '../index-6fb7dc60.js';
+export { L as LuksoDropdown } from '../index-68890bd1.js';
 export { LuksoDropdownOption } from './lukso-dropdown-option/index.js';
 export { LuksoFooter } from './lukso-footer/index.js';
 export { LuksoIcon } from './lukso-icon/index.js';

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

@@ -346,9 +346,7 @@ exports.LuksoCard = class LuksoCard extends shared_tailwindElement_index.Tailwin
             <slot name="header"></slot>
           </div>
         </div>
-        <div
-          class="bg-neutral-100 shadow-neutral-above-shadow-1xl rounded-t-0 rounded-b-[inherit] relative"
-        >
+        <div class="bg-neutral-100 rounded-t-0 rounded-b-[inherit] relative">
           <slot name="content"></slot>
         </div>
       </div>

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-card/index.ts"],"names":[],"mappings":"AAYA,OAAO,4BAA4B,CAAA;AAGnC,OAAO,0BAA0B,CAAA;AAEjC,MAAM,MAAM,YAAY,GACpB,OAAO,GACP,aAAa,GACb,SAAS,GACT,WAAW,GACX,MAAM,GACN,MAAM,CAAA;AAEV,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAA;AAE1D,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;;AAEtD,qBACa,SAAU,SAAQ,cAA4B;IAEzD,OAAO,EAAE,YAAY,CAAU;IAG/B,aAAa,SAAK;IAGlB,UAAU,SAAK;IAGf,cAAc,SAAK;IAGnB,KAAK,EAAE,MAAM,GAAG,SAAS,CAAY;IAGrC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAY;IAGtC,WAAW,SAAK;IAGhB,WAAW,SAAK;IAGhB,YAAY,EAAE,gBAAgB,CAAW;IAGzC,MAAM,EAAE,WAAW,CAAU;IAG7B,WAAW,UAAQ;IAGnB,UAAU,UAAQ;IAGlB,OAAO,CAAC,WAAW,CAAyB;IAG5C,OAAO,CAAC,SAAS,CAAQ;IAEzB,OAAO,CAAC,kBAAkB;IAI1B,OAAO,CAAC,kBAAkB;IAa1B,OAAO,CAAC,UAAU,CAqChB;IAEF,aAAa;IAsBb,kBAAkB;IA8BlB,eAAe;IAqEf,gBAAgB;IAwEhB,YAAY;IAyCZ,YAAY;IA2CZ,MAAM;CAgBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAA;KACxB;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-card/index.ts"],"names":[],"mappings":"AAYA,OAAO,4BAA4B,CAAA;AAGnC,OAAO,0BAA0B,CAAA;AAEjC,MAAM,MAAM,YAAY,GACpB,OAAO,GACP,aAAa,GACb,SAAS,GACT,WAAW,GACX,MAAM,GACN,MAAM,CAAA;AAEV,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAA;AAE1D,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;;AAEtD,qBACa,SAAU,SAAQ,cAA4B;IAEzD,OAAO,EAAE,YAAY,CAAU;IAG/B,aAAa,SAAK;IAGlB,UAAU,SAAK;IAGf,cAAc,SAAK;IAGnB,KAAK,EAAE,MAAM,GAAG,SAAS,CAAY;IAGrC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAY;IAGtC,WAAW,SAAK;IAGhB,WAAW,SAAK;IAGhB,YAAY,EAAE,gBAAgB,CAAW;IAGzC,MAAM,EAAE,WAAW,CAAU;IAG7B,WAAW,UAAQ;IAGnB,UAAU,UAAQ;IAGlB,OAAO,CAAC,WAAW,CAAyB;IAG5C,OAAO,CAAC,SAAS,CAAQ;IAEzB,OAAO,CAAC,kBAAkB;IAI1B,OAAO,CAAC,kBAAkB;IAa1B,OAAO,CAAC,UAAU,CAqChB;IAEF,aAAa;IAsBb,kBAAkB;IA8BlB,eAAe;IAqEf,gBAAgB;IAwEhB,YAAY;IAyCZ,YAAY;IAyCZ,MAAM;CAgBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAA;KACxB;CACF"}

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

@@ -342,9 +342,7 @@ let LuksoCard = class extends TailwindStyledElement(style) {
             <slot name="header"></slot>
           </div>
         </div>
-        <div
-          class="bg-neutral-100 shadow-neutral-above-shadow-1xl rounded-t-0 rounded-b-[inherit] relative"
-        >
+        <div class="bg-neutral-100 rounded-t-0 rounded-b-[inherit] relative">
           <slot name="content"></slot>
         </div>
       </div>

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

@@ -8,7 +8,7 @@ require('../../index-1d3f4a5a.cjs');
 require('../lukso-icon/index.cjs');
 require('../lukso-profile/index.cjs');
 require('../lukso-username/index.cjs');
-const components_luksoDropdown_index = require('../../index-3e12bd24.cjs');
+const components_luksoDropdown_index = require('../../index-fb4ea5c3.cjs');
 require('../../bundle-mjs-d58a83c6.cjs');
 require('../../style-map-77b74f74.cjs');
 require('../../directive-8278ab14.cjs');

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-dropdown/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;AAKxD,OAAO,yBAAyB,CAAA;AAChC,OAAO,4BAA4B,CAAA;AACnC,OAAO,6BAA6B,CAAA;AAIpC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAE/C,MAAM,MAAM,gCAAgC,GAAG;IAC7C,MAAM,EAAE,OAAO,CAAA;CAChB,CAAA;;AAED,qBACa,aAAc,SAAQ,kBAA4B;IAE7D,EAAE,SAAK;IAGP,SAAS,SAAK;IAGd,MAAM,UAAQ;IAGd,oBAAoB,UAAQ;IAG5B,OAAO,UAAQ;IAGf,OAAO,UAAQ;IAGf,WAAW,UAAQ;IAGnB,IAAI,EAAE,SAAS,CAAW;;IAU1B,OAAO,CAAC,MAAM,CA8BZ;IAEF,iBAAiB;IAKjB,oBAAoB;IAKd,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC;IAiBxD,OAAO,CAAC,WAAW;IAenB,MAAM;CAcP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,aAAa,CAAA;KAChC;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-dropdown/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;AAKxD,OAAO,yBAAyB,CAAA;AAChC,OAAO,4BAA4B,CAAA;AACnC,OAAO,6BAA6B,CAAA;AAKpC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAE/C,MAAM,MAAM,gCAAgC,GAAG;IAC7C,MAAM,EAAE,OAAO,CAAA;CAChB,CAAA;;AAED,qBACa,aAAc,SAAQ,kBAA4B;IAE7D,EAAE,SAAK;IAGP,SAAS,SAAK;IAGd,MAAM,UAAQ;IAGd,oBAAoB,UAAQ;IAG5B,OAAO,UAAQ;IAGf,OAAO,UAAQ;IAGf,WAAW,UAAQ;IAGnB,IAAI,EAAE,SAAS,CAAW;;IAU1B,OAAO,CAAC,MAAM,CA8BZ;IAEF,iBAAiB;IAKjB,oBAAoB;IAKd,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC;IAiBxD,OAAO,CAAC,WAAW,CAajB;IAEF,MAAM;CAgBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,aAAa,CAAA;KAChC;CACF"}

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

@@ -4,7 +4,7 @@ import '../../index-ca8e900d.js';
 import '../lukso-icon/index.js';
 import '../lukso-profile/index.js';
 import '../lukso-username/index.js';
-export { L as LuksoDropdown } from '../../index-6fb7dc60.js';
+export { L as LuksoDropdown } from '../../index-68890bd1.js';
 import '../../bundle-mjs-fbc6e2a8.js';
 import '../../style-map-d5d85b80.js';
 import '../../directive-2bb7789e.js';

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

@@ -10,7 +10,7 @@ require('../lukso-icon/index.cjs');
 require('../lukso-profile/index.cjs');
 require('../lukso-username/index.cjs');
 require('../lukso-input/index.cjs');
-require('../../index-3e12bd24.cjs');
+require('../../index-fb4ea5c3.cjs');
 require('../lukso-dropdown-option/index.cjs');
 require('../../bundle-mjs-d58a83c6.cjs');
 require('../../style-map-77b74f74.cjs');

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

@@ -6,7 +6,7 @@ import '../lukso-icon/index.js';
 import '../lukso-profile/index.js';
 import '../lukso-username/index.js';
 import '../lukso-input/index.js';
-import '../../index-6fb7dc60.js';
+import '../../index-68890bd1.js';
 import '../lukso-dropdown-option/index.js';
 import '../../bundle-mjs-fbc6e2a8.js';
 import '../../style-map-d5d85b80.js';

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

@@ -9,7 +9,7 @@ const index = require('../../index-1d3f4a5a.cjs');
 require('../lukso-icon/index.cjs');
 require('../lukso-profile/index.cjs');
 require('../lukso-username/index.cjs');
-const components_luksoDropdown_index = require('../../index-3e12bd24.cjs');
+const components_luksoDropdown_index = require('../../index-fb4ea5c3.cjs');
 require('../lukso-dropdown-option/index.cjs');
 require('../../bundle-mjs-d58a83c6.cjs');
 require('../../style-map-77b74f74.cjs');

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

@@ -5,7 +5,7 @@ import { c as ce } from '../../index-ca8e900d.js';
 import '../lukso-icon/index.js';
 import '../lukso-profile/index.js';
 import '../lukso-username/index.js';
-import { u as uniqId } from '../../index-6fb7dc60.js';
+import { u as uniqId } from '../../index-68890bd1.js';
 import '../lukso-dropdown-option/index.js';
 import '../../bundle-mjs-fbc6e2a8.js';
 import '../../style-map-d5d85b80.js';

package/dist/{index-6fb7dc60.js → index-68890bd1.js}

@@ -12,6 +12,16 @@ const uniqId = () => {
   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) => {
@@ -65,6 +75,16 @@ let LuksoDropdown = class extends TailwindStyledElement(style) {
         }
       ]
     });
+    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();
     }
@@ -93,16 +113,6 @@ let LuksoDropdown = class extends TailwindStyledElement(style) {
       this.dispatchEvent(changeEvent);
     }
   }
-  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,
@@ -113,7 +123,9 @@ let LuksoDropdown = class extends TailwindStyledElement(style) {
     if (!this.isOpen) {
       return A;
     }
-    return x`<div class="${styles}"><slot></slot></div>`;
+    return x`<div class="${styles} animate-fade-in animation-duration-200">
+      <slot></slot>
+    </div>`;
   }
 };
 __decorateClass([

package/dist/{index-3e12bd24.cjs → index-fb4ea5c3.cjs}

@@ -14,6 +14,16 @@ const uniqId = () => {
   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) => {
@@ -67,6 +77,16 @@ exports.LuksoDropdown = class LuksoDropdown extends shared_tailwindElement_index
         }
       ]
     });
+    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();
     }
@@ -95,16 +115,6 @@ exports.LuksoDropdown = class LuksoDropdown extends shared_tailwindElement_index
       this.dispatchEvent(changeEvent);
     }
   }
-  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,
@@ -115,7 +125,9 @@ exports.LuksoDropdown = class LuksoDropdown extends shared_tailwindElement_index
     if (!this.isOpen) {
       return shared_tailwindElement_index.A;
     }
-    return shared_tailwindElement_index.x`<div class="${styles}"><slot></slot></div>`;
+    return shared_tailwindElement_index.x`<div class="${styles} animate-fade-in animation-duration-200">
+      <slot></slot>
+    </div>`;
   }
 };
 __decorateClass([

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-3e12bd24.cjs');
+const components_luksoDropdown_index = require('./index-fb4ea5c3.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');

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-6fb7dc60.js';
+export { L as LuksoDropdown } from './index-68890bd1.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';

package/package.json

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

package/tailwind.config.cjs

@@ -5,9 +5,9 @@ const { colorPalette, boxShadows, fontWeights, fontSizes, lineHeights, scales, h
 /**
  * Add animation delay utilities. Example: .animation-delay-1000
  */
-const animationDelayPlugin = plugin(function ({ addUtilities, theme, e }) {
+const animationDelayPlugin = plugin(({ addUtilities, theme, e }) => {
   const values = theme('animationDelay')
-  var utilities = Object.entries(values).map(([key, value]) => {
+  const utilities = Object.entries(values).map(([key, value]) => {
     return {
       [`.${e(`animation-delay-${key}`)}`]: { animationDelay: `${value}` },
     }
@@ -18,9 +18,9 @@ const animationDelayPlugin = plugin(function ({ addUtilities, theme, e }) {
 /**
  * Add animation iteration utilities. Example: .animation-iteration-infinite
  */
-const animationIterationPlugin = plugin(function ({ addUtilities, theme, e }) {
+const animationIterationPlugin = plugin(({ addUtilities, theme, e }) => {
   const values = theme('animationIteration')
-  var utilities = Object.entries(values).map(([key, value]) => {
+  const utilities = Object.entries(values).map(([key, value]) => {
     return {
       [`.${e(`animation-iteration-${key}`)}`]: {
         animationIterationCount: `${value}`,
@@ -33,9 +33,9 @@ const animationIterationPlugin = plugin(function ({ addUtilities, theme, e }) {
 /**
  * Add animation duration utilities. Example: .animation-duration-1000
  */
-const animationDuration = plugin(function ({ addUtilities, theme, e }) {
+const animationDuration = plugin(({ addUtilities, theme, e }) => {
   const values = theme('animationDuration')
-  var utilities = Object.entries(values).map(([key, value]) => {
+  const utilities = Object.entries(values).map(([key, value]) => {
     return {
       [`.${e(`animation-duration-${key}`)}`]: {
         animationDuration: `${value}`,
@@ -48,9 +48,9 @@ const animationDuration = plugin(function ({ addUtilities, theme, e }) {
 /**
  * Add animation fill mode  utilities. Example: .animation-fill-forwards
  */
-const animationFill = plugin(function ({ addUtilities, theme, e }) {
+const animationFill = plugin(({ addUtilities, theme, e }) => {
   const values = theme('animationFill')
-  var utilities = Object.entries(values).map(([key, value]) => {
+  const utilities = Object.entries(values).map(([key, value]) => {
     return {
       [`.${e(`animation-fill-${key}`)}`]: {
         animationFillMode: `${value}`,

package/tools/debounceFunction.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Debounce function execution to prevent multiple calls in a short period of time.
+ *
+ * @param func
+ * @param timeout
+ */
+export declare const debounceFunction: (func: unknown, timeout?: number) => (...args: any[]) => void;
+//# sourceMappingURL=debounceFunction.d.ts.map

package/tools/debounceFunction.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"debounceFunction.d.ts","sourceRoot":"","sources":["../../src/shared/tools/debounceFunction.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,SAAU,OAAO,+CAU7C,CAAA"}