@lukso/web-components 1.54.0 → 1.55.0

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

@@ -1,13 +1,14 @@
-import { T as TailwindStyledElement, x, A } from '../../index-122da399.js';
+import { T as TailwindStyledElement, x, A } from '../../index-3373dd2c.js';
 import { n, e } from '../../query-assigned-elements-5d94572f.js';
 import { t } from '../../state-0a779257.js';
-import { c as customClassMap } from '../../index-5e194caf.js';
+import { s as se } from '../../index-c55a1069.js';
 import '../lukso-icon/index.js';
 import '../lukso-profile/index.js';
 import '../lukso-username/index.js';
+import '../../style-map-04ec407e.js';
 import '../../directive-2bb7789e.js';
-import '../../style-map-d0fa91c8.js';
-import '../../index-9c2f800a.js';
+import '../../index-5e194caf.js';
+import '../../index-b02bfbc3.js';
 
 const style = ":host {\n\n    display: inline-flex\n}\n\n:host([is-full-width]) {\n\n    display: flex;\n\n    width: 100%\n}";
 
@@ -39,11 +40,62 @@ let LuksoSelect = class extends TailwindStyledElement(style) {
     this.selected = void 0;
     this.isOpen = false;
     this.openTop = false;
+    this.isLargeIcon = false;
     this.optionsParsed = [];
     this.valueParsed = void 0;
-    this.defaultInputStyles = `bg-neutral-100 paragraph-inter-14-regular px-4 py-3 pr-11
-    border-solid h-[48px] placeholder:text-neutral-70 select-none whitespace-nowrap
-    outline-none transition transition-all duration-150 appearance-none rounded-12`;
+    this.inputStyles = se({
+      base: `bg-neutral-100 paragraph-inter-14-regular px-4 py-3 pr-11
+      border border-solid h-[48px] placeholder:text-neutral-70 select-none whitespace-nowrap
+      outline-none transition transition-all duration-150 appearance-none rounded-12
+      text-neutral-20 cursor-pointer border-neutral-90 group-hover:border-neutral-35
+      flex items-center`,
+      variants: {
+        isFullWidth: {
+          true: `w-full`
+        },
+        isDisabled: {
+          true: `cursor-not-allowed text-neutral-60 group-hover:border-neutral-90`
+        },
+        hasError: {
+          true: `border-red-85 group-hover:border-red-65`
+        },
+        borderless: {
+          true: `border-0`
+        }
+      }
+    });
+    this.dropdownWrapperStyles = se({
+      base: `bg-neutral-100 border w-full border-neutral-90 shadow-1xl rounded-12 p-3 z-50
+      flex absolute flex-col gap-1 overflow-y-auto max-h-64 mt-2`,
+      variants: {
+        openTop: {
+          true: `bottom-[48px] mb-2 mt-0`
+        }
+      }
+    });
+    this.optionsStyles = se({
+      base: `paragraph-inter-14-regular text-neutral-20 cursor-pointer rounded-8 p-2
+      whitespace-nowrap hover:bg-neutral-98 flex items-center`,
+      variants: {
+        isSelected: {
+          true: `bg-neutral-95 hover:bg-neutral-95`
+        },
+        isActive: {
+          true: `bg-neutral-98`
+        }
+      }
+    });
+    this.iconStyles = se({
+      base: `absolute right-0 mr-3 transition cursor-pointer`,
+      variants: {
+        isDisabled: {
+          true: `opacity-60 cursor-not-allowed`
+        },
+        isOpen: {
+          true: `rotate-180`
+        }
+      }
+    });
   }
   connectedCallback() {
     super.connectedCallback();
@@ -87,19 +139,17 @@ let LuksoSelect = class extends TailwindStyledElement(style) {
     }
   }
   inputTemplate() {
+    const inputStyles = this.inputStyles({
+      isFullWidth: this.isFullWidth,
+      isDisabled: this.isDisabled,
+      hasError: !!this.error,
+      borderless: this.borderless
+    });
     return x`
       <div
         id=${this.id}
         data-testid=${this.id ? `select-${this.id}` : "select"}
-        class=${customClassMap({
-      [this.defaultInputStyles]: true,
-      ["border-neutral-90 group-hover:border-neutral-35"]: !!!this.error && !this.isDisabled,
-      ["border-red-85 group-hover:border-red-65"]: !!this.error,
-      ["w-full"]: this.isFullWidth,
-      ["cursor-not-allowed text-neutral-60"]: this.isDisabled,
-      ["text-neutral-20 cursor-pointer"]: !this.isDisabled,
-      [this.borderless ? "border-0" : "border"]: true
-    })}
+        class=${inputStyles}
         @blur=${this.handleBlur}
         @click=${this.handleClick}
       >
@@ -132,6 +182,8 @@ let LuksoSelect = class extends TailwindStyledElement(style) {
       const index = Number(option[0]);
       if ("value" in option[1]) {
         optionTemplates.push(this.optionStringTemplate(option[1], index));
+      } else if ("address" in option[1]) {
+        optionTemplates.push(this.optionProfileTemplate(option[1], index));
       } else {
         console.error("Unknown option type", option);
       }
@@ -139,40 +191,71 @@ let LuksoSelect = class extends TailwindStyledElement(style) {
     return x`${this.dropdownWrapperTemplate(optionTemplates)}`;
   }
   dropdownWrapperTemplate(innerTemplate) {
+    const dropdownWrapperStyles = this.dropdownWrapperStyles({
+      openTop: this.openTop
+    });
+    return x`<div class="${dropdownWrapperStyles}">${innerTemplate}</div>`;
+  }
+  optionStringTemplate(option, index) {
+    const optionsStyles = this.optionsStyles({
+      isSelected: this.valueParsed?.id === option.id,
+      isActive: this.selected === index + 1 && this.valueParsed?.id !== option.id
+    });
     return x`<div
-      class="bg-neutral-100 border w-full border-neutral-90 shadow-1xl rounded-12 p-3 z-50 flex absolute flex-col gap-1 overflow-y-auto max-h-64 ${customClassMap(
-      {
-        ["bottom-[48px] mb-2"]: this.openTop,
-        ["mt-2"]: !this.openTop
-      }
-    )}
-      )}"
+      data-id="${option.id}"
+      data-index="${index + 1}"
+      class="${optionsStyles}"
+      @click=${() => this.handleSelect(option)}
     >
-      ${innerTemplate}
+      ${this.optionStringValue(option)}
     </div>`;
   }
-  optionStringTemplate(option, index) {
+  optionProfileTemplate(option, index) {
+    const optionsStyles = this.optionsStyles({
+      isSelected: this.valueParsed?.id === option.id,
+      isActive: this.selected === index + 1 && this.valueParsed?.id !== option.id
+    });
     return x`<div
       data-id="${option.id}"
       data-index="${index + 1}"
-      class="paragraph-inter-14-regular text-neutral-20 cursor-pointer rounded-8 p-2 whitespace-nowrap ${customClassMap(
-      {
-        ["bg-neutral-95 hover:bg-neutral-95"]: this.valueParsed?.id === option.id,
-        ["bg-neutral-98"]: this.selected === index + 1 && this.valueParsed?.id !== option.id,
-        ["hover:bg-neutral-98"]: this.valueParsed?.id !== option.id
-      }
-    )}"
+      class="${optionsStyles}"
       @click=${() => this.handleSelect(option)}
     >
-      ${option.value}
+      ${this.optionProfileValue(option)}
     </div>`;
   }
+  optionStringValue(option) {
+    return option.value;
+  }
+  optionProfileValue(option) {
+    return x`<lukso-profile
+        profile-address="${option.address}"
+        profile-url="${option.image}"
+        size="x-small"
+        has-identicon
+        class="mr-2"
+      ></lukso-profile>
+      <lukso-username
+        name="${option.name?.toLowerCase()}"
+        address="${option.address}"
+        name-color="neutral-20"
+        max-width="150"
+        slice-by="4"
+        size="medium"
+      ></lukso-username>`;
+  }
   selectedValue() {
     const foundValue = this.optionsParsed.find(
       (option) => option.id === this.valueParsed?.id
     );
     if (foundValue) {
-      return foundValue.value;
+      if ("value" in foundValue) {
+        return this.optionStringValue(foundValue);
+      } else if ("address" in foundValue) {
+        return this.optionProfileValue(foundValue);
+      } else {
+        console.error("Unknown value type", foundValue);
+      }
     }
     return "";
   }
@@ -238,6 +321,10 @@ let LuksoSelect = class extends TailwindStyledElement(style) {
     this.isOpen = !this.isOpen;
   }
   render() {
+    const iconStyles = this.iconStyles({
+      isDisabled: this.isDisabled,
+      isOpen: this.isOpen
+    });
     return x`
       <div class="relative w-[inherit]">
         ${this.label ? this.labelTemplate() : A}
@@ -245,12 +332,8 @@ let LuksoSelect = class extends TailwindStyledElement(style) {
         <div class="group">
           <div class="flex relative items-center">
             ${this.inputTemplate()}<lukso-icon
-              name=${this.isFullWidth ? "arrow-down-lg" : "arrow-down-sm"}
-              class="absolute right-0 mr-3 transition ${customClassMap({
-      ["opacity-60 cursor-not-allowed"]: this.isDisabled,
-      ["cursor-pointer"]: !this.isDisabled,
-      ["rotate-180"]: this.isOpen
-    })}"
+              name=${this.isLargeIcon ? "arrow-down-lg" : "arrow-down-sm"}
+              class="${iconStyles}"
               @click=${this.handleClick}
             ></lukso-icon>
           </div>
@@ -305,6 +388,9 @@ __decorateClass([
 __decorateClass([
   n({ type: Boolean, attribute: "open-top" })
 ], LuksoSelect.prototype, "openTop", 2);
+__decorateClass([
+  n({ type: Boolean, attribute: "is-large-icon" })
+], LuksoSelect.prototype, "isLargeIcon", 2);
 __decorateClass([
   t()
 ], LuksoSelect.prototype, "optionsParsed", 2);

package/dist/components/lukso-select/lukso-select.stories.d.ts

@@ -6,4 +6,6 @@ export default meta;
 export declare const DefaultSelect: any;
 /** Example of select that open top.  */
 export declare const OpenTop: any;
+/** Example of select with `profile` values.  */
+export declare const ProfileSelect: any;
 //# sourceMappingURL=lukso-select.stories.d.ts.map

package/dist/components/lukso-select/lukso-select.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"lukso-select.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-select/lukso-select.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAA;AAGhD,OAAO,SAAS,CAAA;AAEhB,+DAA+D;AAC/D,QAAA,MAAM,IAAI,EAAE,IAiLX,CAAA;AAED,eAAe,IAAI,CAAA;AAgDnB,+CAA+C;AAC/C,eAAO,MAAM,aAAa,KAAoB,CAAA;AAK9C,wCAAwC;AACxC,eAAO,MAAM,OAAO,KAAoB,CAAA"}
+{"version":3,"file":"lukso-select.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-select/lukso-select.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAA;AAGhD,OAAO,SAAS,CAAA;AAEhB,+DAA+D;AAC/D,QAAA,MAAM,IAAI,EAAE,IAiMX,CAAA;AAED,eAAe,IAAI,CAAA;AAkDnB,+CAA+C;AAC/C,eAAO,MAAM,aAAa,KAAoB,CAAA;AAK9C,wCAAwC;AACxC,eAAO,MAAM,OAAO,KAAoB,CAAA;AAMxC,gDAAgD;AAChD,eAAO,MAAM,aAAa,KAAoB,CAAA"}

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-f25fc3ea.cjs');
+const shared_tailwindElement_index = require('../../index-534893a1.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-1d5d9d4c.cjs');
 
 const style = ":host {\n    display: inline-flex\n}";

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

@@ -1,4 +1,4 @@
-import { T as TailwindStyledElement, x } from '../../index-122da399.js';
+import { T as TailwindStyledElement, x } from '../../index-3373dd2c.js';
 import { n, e } from '../../query-assigned-elements-5d94572f.js';
 
 const style = ":host {\n    display: inline-flex\n}";

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-f25fc3ea.cjs');
+const shared_tailwindElement_index = require('../../index-534893a1.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-1d5d9d4c.cjs');
-const styleMap = require('../../style-map-a31b1d87.cjs');
+const styleMap = require('../../style-map-beffabf7.cjs');
 const index = require('../../index-e9668573.cjs');
 require('../../directive-8278ab14.cjs');
 

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

@@ -1,6 +1,6 @@
-import { a as TailwindElement, x } from '../../index-122da399.js';
+import { a as TailwindElement, x } from '../../index-3373dd2c.js';
 import { n, e } from '../../query-assigned-elements-5d94572f.js';
-import { o } from '../../style-map-d0fa91c8.js';
+import { o } from '../../style-map-04ec407e.js';
 import { c as customClassMap } from '../../index-5e194caf.js';
 import '../../directive-2bb7789e.js';
 

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-f25fc3ea.cjs');
+const shared_tailwindElement_index = require('../../index-534893a1.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-1d5d9d4c.cjs');
-const styleMap = require('../../style-map-a31b1d87.cjs');
+const styleMap = require('../../style-map-beffabf7.cjs');
 const index = require('../../index-e9668573.cjs');
 require('../../directive-8278ab14.cjs');
 

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

@@ -1,6 +1,6 @@
-import { T as TailwindStyledElement, x } from '../../index-122da399.js';
+import { T as TailwindStyledElement, x } from '../../index-3373dd2c.js';
 import { n, e } from '../../query-assigned-elements-5d94572f.js';
-import { o } from '../../style-map-d0fa91c8.js';
+import { o } from '../../style-map-04ec407e.js';
 import { c as customClassMap } from '../../index-5e194caf.js';
 import '../../directive-2bb7789e.js';
 

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

@@ -2,14 +2,14 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-f25fc3ea.cjs');
+const shared_tailwindElement_index = require('../../index-534893a1.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-1d5d9d4c.cjs');
 const state = require('../../state-f73a8b4f.cjs');
 const index = require('../../index-e9668573.cjs');
 require('../lukso-icon/index.cjs');
 require('../lukso-sanitize/index.cjs');
 require('../../directive-8278ab14.cjs');
-require('../../style-map-a31b1d87.cjs');
+require('../../style-map-beffabf7.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-122da399.js';
+import { T as TailwindStyledElement, x } from '../../index-3373dd2c.js';
 import { n, e } from '../../query-assigned-elements-5d94572f.js';
 import { t } from '../../state-0a779257.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-d0fa91c8.js';
+import '../../style-map-04ec407e.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-f25fc3ea.cjs');
+const shared_tailwindElement_index = require('../../index-534893a1.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-1d5d9d4c.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-122da399.js';
+import { b as T$1, T as TailwindStyledElement, x as x$1 } from '../../index-3373dd2c.js';
 import { n as n$3, e as e$3 } from '../../query-assigned-elements-5d94572f.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,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-f25fc3ea.cjs');
+const shared_tailwindElement_index = require('../../index-534893a1.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-1d5d9d4c.cjs');
 const state = require('../../state-f73a8b4f.cjs');
 const index = require('../../index-e9668573.cjs');

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

@@ -1,4 +1,4 @@
-import { T as TailwindStyledElement, x } from '../../index-122da399.js';
+import { T as TailwindStyledElement, x } from '../../index-3373dd2c.js';
 import { n, e } from '../../query-assigned-elements-5d94572f.js';
 import { t } from '../../state-0a779257.js';
 import { c as customClassMap } from '../../index-5e194caf.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-f25fc3ea.cjs');
+const shared_tailwindElement_index = require('../../index-534893a1.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-1d5d9d4c.cjs');
 const index = require('../../index-e9668573.cjs');
-const index$1 = require('../../index-97f126f3.cjs');
+const index$1 = require('../../index-21cb1f33.cjs');
 require('../../directive-8278ab14.cjs');
 
 const sliceAddress = (address, startSliceBy = 6, endSliceBy) => {

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

@@ -1,7 +1,7 @@
-import { T as TailwindStyledElement, x, A } from '../../index-122da399.js';
+import { T as TailwindStyledElement, x, A } from '../../index-3373dd2c.js';
 import { n, e } from '../../query-assigned-elements-5d94572f.js';
 import { c as customClassMap } from '../../index-5e194caf.js';
-import { c as customStyleMap } from '../../index-9c2f800a.js';
+import { c as customStyleMap } from '../../index-b02bfbc3.js';
 import '../../directive-2bb7789e.js';
 
 const sliceAddress = (address, startSliceBy = 6, endSliceBy) => {

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

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

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

@@ -1,4 +1,4 @@
-import { j, b as T, T as TailwindStyledElement, x } from '../../index-122da399.js';
+import { j, b as T, T as TailwindStyledElement, x } from '../../index-3373dd2c.js';
 import { n, e as e$1 } from '../../query-assigned-elements-5d94572f.js';
 import { e, i, t } from '../../directive-2bb7789e.js';
 import { c as customClassMap } from '../../index-5e194caf.js';

package/dist/{index-97f126f3.cjs → index-21cb1f33.cjs}

@@ -1,6 +1,6 @@
 'use strict';
 
-const shared_tailwindElement_index = require('./index-f25fc3ea.cjs');
+const shared_tailwindElement_index = require('./index-534893a1.cjs');
 const directive = require('./directive-8278ab14.cjs');
 
 class CustomStyleMapDirective extends directive.i {