@lukso/web-components 1.48.0 → 1.49.1

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

@@ -0,0 +1,315 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const shared_tailwindElement_index = require('../../index-c04e4744.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-profile/index.cjs');
+require('../lukso-username/index.cjs');
+require('../../directive-8278ab14.cjs');
+require('../../style-map-ea2513e4.cjs');
+
+const style = ":host {\n\n    display: inline-flex\n}\n\n:host([is-full-width]) {\n\n    display: flex;\n\n    width: 100%\n}";
+
+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.LuksoSelect = class LuksoSelect extends shared_tailwindElement_index.TailwindStyledElement(style) {
+  constructor() {
+    super(...arguments);
+    this.value = "";
+    this.placeholder = "";
+    this.label = "";
+    this.id = "";
+    this.description = "";
+    this.error = "";
+    this.isFullWidth = false;
+    this.isReadonly = false;
+    this.isDisabled = false;
+    this.borderless = false;
+    this.options = "";
+    this.selected = void 0;
+    this.isOpen = false;
+    this.openTop = 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`;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    window.addEventListener("click", this.handleOutsideDropdownClick.bind(this));
+    window.addEventListener("keydown", this.handleDropdownKeydown.bind(this));
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    window.removeEventListener("click", this.handleOutsideDropdownClick);
+    window.removeEventListener("keydown", this.handleDropdownKeydown);
+  }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("selected")) {
+      const selectedOption = this.shadowRoot?.querySelector(
+        `[data-index="${changedProperties.get("selected")}"`
+      );
+      if (selectedOption) {
+        selectedOption.scrollIntoView({
+          behavior: "smooth",
+          block: "center"
+        });
+      }
+    }
+    if (changedProperties.has("options")) {
+      try {
+        this.optionsParsed = JSON.parse(this.options);
+      } catch (error) {
+        console.warn("Could not parse options", error);
+      }
+    }
+    if (changedProperties.has("value")) {
+      try {
+        this.valueParsed = JSON.parse(this.value);
+      } catch (error) {
+        console.warn("Could not parse value", error);
+      }
+    }
+  }
+  inputTemplate() {
+    return shared_tailwindElement_index.x`
+      <div
+        id=${this.id}
+        data-testid=${this.id ? `select-${this.id}` : "select"}
+        class=${index.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
+    })}
+        @blur=${this.handleBlur}
+        @click=${this.handleClick}
+      >
+        ${this.value ? this.selectedValue() : this.placeholder}
+      </div>
+    `;
+  }
+  labelTemplate() {
+    return shared_tailwindElement_index.x`
+      <div class="heading-inter-14-bold text-neutral-20 pb-2 block">
+        ${this.label}
+      </div>
+    `;
+  }
+  descriptionTemplate() {
+    return shared_tailwindElement_index.x`
+      <div class="paragraph-inter-12-regular text-neutral-20 pb-2">
+        ${this.description ?? shared_tailwindElement_index.A}
+      </div>
+    `;
+  }
+  errorTemplate() {
+    return shared_tailwindElement_index.x`<div class="paragraph-inter-12-regular text-red-65 pt-2">
+      ${this.error}
+    </div>`;
+  }
+  optionsTemplate() {
+    const optionTemplates = [];
+    for (const option of Object.entries(this.optionsParsed)) {
+      const index = Number(option[0]);
+      if ("value" in option[1]) {
+        optionTemplates.push(this.optionStringTemplate(option[1], index));
+      } else {
+        console.error("Unknown option type", option);
+      }
+    }
+    return shared_tailwindElement_index.x`${this.dropdownWrapperTemplate(optionTemplates)}`;
+  }
+  dropdownWrapperTemplate(innerTemplate) {
+    return shared_tailwindElement_index.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 ${index.customClassMap(
+      {
+        ["bottom-[48px] mb-2"]: this.openTop,
+        ["mt-2"]: !this.openTop
+      }
+    )}
+      )}"
+    >
+      ${innerTemplate}
+    </div>`;
+  }
+  optionStringTemplate(option, index$1) {
+    return shared_tailwindElement_index.x`<div
+      data-id="${option.id}"
+      data-index="${index$1 + 1}"
+      class="paragraph-inter-14-regular text-neutral-20 cursor-pointer rounded-8 p-2 whitespace-nowrap ${index.customClassMap(
+      {
+        ["bg-neutral-95 hover:bg-neutral-95"]: this.valueParsed?.id === option.id,
+        ["bg-neutral-98"]: this.selected === index$1 + 1 && this.valueParsed?.id !== option.id,
+        ["hover:bg-neutral-98"]: this.valueParsed?.id !== option.id
+      }
+    )}"
+      @click=${() => this.handleSelect(option)}
+    >
+      ${option.value}
+    </div>`;
+  }
+  selectedValue() {
+    const foundValue = this.optionsParsed.find(
+      (option) => option.id === this.valueParsed?.id
+    );
+    if (foundValue) {
+      return foundValue.value;
+    }
+    return "";
+  }
+  handleOutsideDropdownClick(event) {
+    const element = event.target;
+    if (element.tagName === "LUKSO-SELECT") {
+      return;
+    }
+    this.isOpen = false;
+  }
+  async handleDropdownKeydown(event) {
+    if (event.key === "ArrowUp" && this.selected && this.selected > 1 && this.isOpen) {
+      event.preventDefault();
+      this.selected = this.selected - 1;
+    }
+    if (event.key === "ArrowDown" && this.optionsParsed?.length && this.isOpen) {
+      event.preventDefault();
+      if (!this.selected) {
+        this.selected = 1;
+      } else if (this.selected < this.optionsParsed.length) {
+        this.selected = this.selected + 1;
+      }
+    }
+    if (event.key === "Enter" && this.isOpen) {
+      if (this.optionsParsed?.length && this.selected) {
+        const selectedResult = this.optionsParsed[this.selected - 1];
+        await this.handleSelect(selectedResult);
+      }
+    }
+  }
+  async handleSelect(option) {
+    if (this.isReadonly || this.isDisabled) {
+      return;
+    }
+    await this.updateComplete;
+    this.isOpen = false;
+    const selectEvent = new CustomEvent("on-select", {
+      detail: {
+        value: option
+      },
+      bubbles: false,
+      composed: true
+    });
+    this.dispatchEvent(selectEvent);
+  }
+  async handleBlur(event) {
+    await this.updateComplete;
+    const target = event.target;
+    const blurEvent = new CustomEvent("on-blur", {
+      detail: {
+        value: target.value,
+        event
+      },
+      bubbles: false,
+      composed: true
+    });
+    this.dispatchEvent(blurEvent);
+  }
+  handleClick() {
+    if (this.isDisabled) {
+      return;
+    }
+    this.isOpen = !this.isOpen;
+  }
+  render() {
+    return shared_tailwindElement_index.x`
+      <div class="relative w-[inherit]">
+        ${this.label ? this.labelTemplate() : shared_tailwindElement_index.A}
+        ${this.description ? this.descriptionTemplate() : shared_tailwindElement_index.A}
+        <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 ${index.customClassMap({
+      ["opacity-60 cursor-not-allowed"]: this.isDisabled,
+      ["cursor-pointer"]: !this.isDisabled,
+      ["rotate-180"]: this.isOpen
+    })}"
+              @click=${this.handleClick}
+            ></lukso-icon>
+          </div>
+          <!-- options dropdown -->
+          ${this.isOpen && this.optionsParsed.length > 0 ? this.optionsTemplate() : shared_tailwindElement_index.A}
+        </div>
+        <!-- error -->
+        ${this.error ? this.errorTemplate() : shared_tailwindElement_index.A}
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  queryAssignedElements.n({ type: String })
+], exports.LuksoSelect.prototype, "value", 2);
+__decorateClass([
+  queryAssignedElements.n({ type: String })
+], exports.LuksoSelect.prototype, "placeholder", 2);
+__decorateClass([
+  queryAssignedElements.n({ type: String })
+], exports.LuksoSelect.prototype, "label", 2);
+__decorateClass([
+  queryAssignedElements.n({ type: String })
+], exports.LuksoSelect.prototype, "id", 2);
+__decorateClass([
+  queryAssignedElements.n({ type: String })
+], exports.LuksoSelect.prototype, "description", 2);
+__decorateClass([
+  queryAssignedElements.n({ type: String })
+], exports.LuksoSelect.prototype, "error", 2);
+__decorateClass([
+  queryAssignedElements.n({ type: Boolean, attribute: "is-full-width" })
+], exports.LuksoSelect.prototype, "isFullWidth", 2);
+__decorateClass([
+  queryAssignedElements.n({ type: Boolean, attribute: "is-readonly" })
+], exports.LuksoSelect.prototype, "isReadonly", 2);
+__decorateClass([
+  queryAssignedElements.n({ type: Boolean, attribute: "is-disabled" })
+], exports.LuksoSelect.prototype, "isDisabled", 2);
+__decorateClass([
+  queryAssignedElements.n({ type: Boolean })
+], exports.LuksoSelect.prototype, "borderless", 2);
+__decorateClass([
+  queryAssignedElements.n({ type: String })
+], exports.LuksoSelect.prototype, "options", 2);
+__decorateClass([
+  queryAssignedElements.n({ type: Number })
+], exports.LuksoSelect.prototype, "selected", 2);
+__decorateClass([
+  queryAssignedElements.n({ type: Boolean, attribute: "is-open" })
+], exports.LuksoSelect.prototype, "isOpen", 2);
+__decorateClass([
+  queryAssignedElements.n({ type: Boolean, attribute: "open-top" })
+], exports.LuksoSelect.prototype, "openTop", 2);
+__decorateClass([
+  state.t()
+], exports.LuksoSelect.prototype, "optionsParsed", 2);
+__decorateClass([
+  state.t()
+], exports.LuksoSelect.prototype, "valueParsed", 2);
+exports.LuksoSelect = __decorateClass([
+  queryAssignedElements.e("lukso-select")
+], exports.LuksoSelect);

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

@@ -0,0 +1,50 @@
+import { PropertyValues, TemplateResult } from 'lit';
+export type SelectStringOption = {
+    id?: string;
+    value: string;
+};
+export type SelectOption = SelectStringOption;
+declare const LuksoSelect_base: typeof import("lit").LitElement;
+export declare class LuksoSelect extends LuksoSelect_base {
+    value: string;
+    placeholder: string;
+    label: string;
+    id: string;
+    description: string;
+    error: string;
+    isFullWidth: boolean;
+    isReadonly: boolean;
+    isDisabled: boolean;
+    borderless: boolean;
+    options: string;
+    selected: any;
+    isOpen: boolean;
+    openTop: boolean;
+    private optionsParsed;
+    private valueParsed;
+    private defaultInputStyles;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    willUpdate(changedProperties: PropertyValues<this>): void;
+    inputTemplate(): TemplateResult<1>;
+    labelTemplate(): TemplateResult<1>;
+    descriptionTemplate(): TemplateResult<1>;
+    errorTemplate(): TemplateResult<1>;
+    optionsTemplate(): TemplateResult<1>;
+    dropdownWrapperTemplate(innerTemplate: TemplateResult<1> | TemplateResult<1>[]): TemplateResult<1>;
+    optionStringTemplate(option: SelectStringOption, index: number): TemplateResult<1>;
+    private selectedValue;
+    private handleOutsideDropdownClick;
+    private handleDropdownKeydown;
+    private handleSelect;
+    private handleBlur;
+    private handleClick;
+    render(): TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lukso-select': LuksoSelect;
+    }
+}
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-select/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,cAAc,EAAiB,MAAM,KAAK,CAAA;AAMnE,OAAO,yBAAyB,CAAA;AAChC,OAAO,4BAA4B,CAAA;AACnC,OAAO,6BAA6B,CAAA;AAEpC,MAAM,MAAM,kBAAkB,GAAG;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,YAAY,GAAG,kBAAkB,CAAA;;AAE7C,qBACa,WAAY,SAAQ,gBAA4B;IAE3D,KAAK,SAAK;IAGV,WAAW,SAAK;IAGhB,KAAK,SAAK;IAGV,EAAE,SAAK;IAGP,WAAW,SAAK;IAGhB,KAAK,SAAK;IAGV,WAAW,UAAQ;IAGnB,UAAU,UAAQ;IAGlB,UAAU,UAAQ;IAGlB,UAAU,UAAQ;IAGlB,OAAO,SAAK;IAGZ,QAAQ,MAAY;IAGpB,MAAM,EAAE,OAAO,CAAQ;IAGvB,OAAO,EAAE,OAAO,CAAQ;IAGxB,OAAO,CAAC,aAAa,CAAqB;IAG1C,OAAO,CAAC,WAAW,CAAsC;IAEzD,OAAO,CAAC,kBAAkB,CAEuD;IAEjF,iBAAiB;IAKjB,oBAAoB;IAMpB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC;IAgClD,aAAa;IAuBb,aAAa;IAQb,mBAAmB;IAQnB,aAAa;IAMb,eAAe;IAgBf,uBAAuB,CACrB,aAAa,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,EAAE;IAexD,oBAAoB,CAAC,MAAM,EAAE,kBAAkB,EAAE,KAAK,EAAE,MAAM;IAmB9D,OAAO,CAAC,aAAa;IAYrB,OAAO,CAAC,0BAA0B;YAUpB,qBAAqB;YAiCrB,YAAY;YAiBZ,UAAU;IAcxB,OAAO,CAAC,WAAW;IAQnB,MAAM;CA2BP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAA;KAC5B;CACF"}

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

@@ -0,0 +1,313 @@
+import { T as TailwindStyledElement, x, A } from '../../index-cfea1b58.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-profile/index.js';
+import '../lukso-username/index.js';
+import '../../directive-2bb7789e.js';
+import '../../style-map-b2a337a1.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}";
+
+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 LuksoSelect = class extends TailwindStyledElement(style) {
+  constructor() {
+    super(...arguments);
+    this.value = "";
+    this.placeholder = "";
+    this.label = "";
+    this.id = "";
+    this.description = "";
+    this.error = "";
+    this.isFullWidth = false;
+    this.isReadonly = false;
+    this.isDisabled = false;
+    this.borderless = false;
+    this.options = "";
+    this.selected = void 0;
+    this.isOpen = false;
+    this.openTop = 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`;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    window.addEventListener("click", this.handleOutsideDropdownClick.bind(this));
+    window.addEventListener("keydown", this.handleDropdownKeydown.bind(this));
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    window.removeEventListener("click", this.handleOutsideDropdownClick);
+    window.removeEventListener("keydown", this.handleDropdownKeydown);
+  }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("selected")) {
+      const selectedOption = this.shadowRoot?.querySelector(
+        `[data-index="${changedProperties.get("selected")}"`
+      );
+      if (selectedOption) {
+        selectedOption.scrollIntoView({
+          behavior: "smooth",
+          block: "center"
+        });
+      }
+    }
+    if (changedProperties.has("options")) {
+      try {
+        this.optionsParsed = JSON.parse(this.options);
+      } catch (error) {
+        console.warn("Could not parse options", error);
+      }
+    }
+    if (changedProperties.has("value")) {
+      try {
+        this.valueParsed = JSON.parse(this.value);
+      } catch (error) {
+        console.warn("Could not parse value", error);
+      }
+    }
+  }
+  inputTemplate() {
+    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
+    })}
+        @blur=${this.handleBlur}
+        @click=${this.handleClick}
+      >
+        ${this.value ? this.selectedValue() : this.placeholder}
+      </div>
+    `;
+  }
+  labelTemplate() {
+    return x`
+      <div class="heading-inter-14-bold text-neutral-20 pb-2 block">
+        ${this.label}
+      </div>
+    `;
+  }
+  descriptionTemplate() {
+    return x`
+      <div class="paragraph-inter-12-regular text-neutral-20 pb-2">
+        ${this.description ?? A}
+      </div>
+    `;
+  }
+  errorTemplate() {
+    return x`<div class="paragraph-inter-12-regular text-red-65 pt-2">
+      ${this.error}
+    </div>`;
+  }
+  optionsTemplate() {
+    const optionTemplates = [];
+    for (const option of Object.entries(this.optionsParsed)) {
+      const index = Number(option[0]);
+      if ("value" in option[1]) {
+        optionTemplates.push(this.optionStringTemplate(option[1], index));
+      } else {
+        console.error("Unknown option type", option);
+      }
+    }
+    return x`${this.dropdownWrapperTemplate(optionTemplates)}`;
+  }
+  dropdownWrapperTemplate(innerTemplate) {
+    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
+      }
+    )}
+      )}"
+    >
+      ${innerTemplate}
+    </div>`;
+  }
+  optionStringTemplate(option, index) {
+    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
+      }
+    )}"
+      @click=${() => this.handleSelect(option)}
+    >
+      ${option.value}
+    </div>`;
+  }
+  selectedValue() {
+    const foundValue = this.optionsParsed.find(
+      (option) => option.id === this.valueParsed?.id
+    );
+    if (foundValue) {
+      return foundValue.value;
+    }
+    return "";
+  }
+  handleOutsideDropdownClick(event) {
+    const element = event.target;
+    if (element.tagName === "LUKSO-SELECT") {
+      return;
+    }
+    this.isOpen = false;
+  }
+  async handleDropdownKeydown(event) {
+    if (event.key === "ArrowUp" && this.selected && this.selected > 1 && this.isOpen) {
+      event.preventDefault();
+      this.selected = this.selected - 1;
+    }
+    if (event.key === "ArrowDown" && this.optionsParsed?.length && this.isOpen) {
+      event.preventDefault();
+      if (!this.selected) {
+        this.selected = 1;
+      } else if (this.selected < this.optionsParsed.length) {
+        this.selected = this.selected + 1;
+      }
+    }
+    if (event.key === "Enter" && this.isOpen) {
+      if (this.optionsParsed?.length && this.selected) {
+        const selectedResult = this.optionsParsed[this.selected - 1];
+        await this.handleSelect(selectedResult);
+      }
+    }
+  }
+  async handleSelect(option) {
+    if (this.isReadonly || this.isDisabled) {
+      return;
+    }
+    await this.updateComplete;
+    this.isOpen = false;
+    const selectEvent = new CustomEvent("on-select", {
+      detail: {
+        value: option
+      },
+      bubbles: false,
+      composed: true
+    });
+    this.dispatchEvent(selectEvent);
+  }
+  async handleBlur(event) {
+    await this.updateComplete;
+    const target = event.target;
+    const blurEvent = new CustomEvent("on-blur", {
+      detail: {
+        value: target.value,
+        event
+      },
+      bubbles: false,
+      composed: true
+    });
+    this.dispatchEvent(blurEvent);
+  }
+  handleClick() {
+    if (this.isDisabled) {
+      return;
+    }
+    this.isOpen = !this.isOpen;
+  }
+  render() {
+    return x`
+      <div class="relative w-[inherit]">
+        ${this.label ? this.labelTemplate() : A}
+        ${this.description ? this.descriptionTemplate() : A}
+        <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
+    })}"
+              @click=${this.handleClick}
+            ></lukso-icon>
+          </div>
+          <!-- options dropdown -->
+          ${this.isOpen && this.optionsParsed.length > 0 ? this.optionsTemplate() : A}
+        </div>
+        <!-- error -->
+        ${this.error ? this.errorTemplate() : A}
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  n({ type: String })
+], LuksoSelect.prototype, "value", 2);
+__decorateClass([
+  n({ type: String })
+], LuksoSelect.prototype, "placeholder", 2);
+__decorateClass([
+  n({ type: String })
+], LuksoSelect.prototype, "label", 2);
+__decorateClass([
+  n({ type: String })
+], LuksoSelect.prototype, "id", 2);
+__decorateClass([
+  n({ type: String })
+], LuksoSelect.prototype, "description", 2);
+__decorateClass([
+  n({ type: String })
+], LuksoSelect.prototype, "error", 2);
+__decorateClass([
+  n({ type: Boolean, attribute: "is-full-width" })
+], LuksoSelect.prototype, "isFullWidth", 2);
+__decorateClass([
+  n({ type: Boolean, attribute: "is-readonly" })
+], LuksoSelect.prototype, "isReadonly", 2);
+__decorateClass([
+  n({ type: Boolean, attribute: "is-disabled" })
+], LuksoSelect.prototype, "isDisabled", 2);
+__decorateClass([
+  n({ type: Boolean })
+], LuksoSelect.prototype, "borderless", 2);
+__decorateClass([
+  n({ type: String })
+], LuksoSelect.prototype, "options", 2);
+__decorateClass([
+  n({ type: Number })
+], LuksoSelect.prototype, "selected", 2);
+__decorateClass([
+  n({ type: Boolean, attribute: "is-open" })
+], LuksoSelect.prototype, "isOpen", 2);
+__decorateClass([
+  n({ type: Boolean, attribute: "open-top" })
+], LuksoSelect.prototype, "openTop", 2);
+__decorateClass([
+  t()
+], LuksoSelect.prototype, "optionsParsed", 2);
+__decorateClass([
+  t()
+], LuksoSelect.prototype, "valueParsed", 2);
+LuksoSelect = __decorateClass([
+  e("lukso-select")
+], LuksoSelect);
+
+export { LuksoSelect };

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

@@ -0,0 +1,9 @@
+import { Meta } from '@storybook/web-components';
+/**  Documentation and examples of `lukso-select` component. */
+declare const meta: Meta;
+export default meta;
+/** Example of select with `string` values.  */
+export declare const DefaultSelect: any;
+/** Example of select that open top.  */
+export declare const OpenTop: any;
+//# sourceMappingURL=lukso-select.stories.d.ts.map

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

@@ -0,0 +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"}