@golemui/gui-lit 1.2.0 → 1.2.1-rc.0

package/date-time-picker.element-HHpwjWTQ.js

@@ -0,0 +1,107 @@
+import { InputWidgetAdapter as l, formContext as d, inputContext as m } from "@golemui/lit";
+import "@golemui/gui-components/date-time-picker";
+import { consume as p, provide as u } from "@lit/context";
+import { LitElement as h, html as b } from "lit";
+import { property as c } from "lit/decorators.js";
+import { safeDefine as $ } from "@golemui/lit/internals";
+import "rxjs";
+var g = Object.defineProperty, o = (i, e, t, M) => {
+  for (var a = void 0, r = i.length - 1, n; r >= 0; r--)
+    (n = i[r]) && (a = n(e, t, a) || a);
+  return a && g(e, t, a), a;
+};
+class s extends h {
+  constructor() {
+    super(...arguments), this.adapter = new l(), this.subscriptions = [];
+  }
+  createRenderRoot() {
+    return this;
+  }
+  updated(e) {
+    super.updated(e);
+    const t = this.adapter.templateData.size;
+    t ? this.style.flex = String(t) : this.style.removeProperty("flex");
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.classList.add("gui-date-time-picker", "gui-field"), this.adapter.context = this.formContext, this.adapter.init(this.widget), this.subscriptions.push(
+      this.adapter.templateDataChanged$.subscribe(() => this.requestUpdate())
+    );
+  }
+  render() {
+    super.render();
+    const e = this.adapter.templateData;
+    return b`
+      <gui-date-time-picker
+        .uid=${this.widget.uid}
+        .label=${e.label}
+        .hint=${e.hint}
+        .errors=${e.errors}
+        ?touched=${e.touched}
+        ?required=${e.validator?.required}
+        ?disabled=${e.disabled}
+        ?readonly=${e.readonly}
+        .value=${e.value}
+        .icon=${e.icon}
+        .localeId=${e.lang}
+        .toggleAriaLabel=${e.toggleAriaLabel}
+        .dayAriaLabel=${e.dayAriaLabel}
+        .monthAriaLabel=${e.monthAriaLabel}
+        .yearAriaLabel=${e.yearAriaLabel}
+        .hourAriaLabel=${e.hourAriaLabel}
+        .minuteAriaLabel=${e.minuteAriaLabel}
+        .dayPeriodAriaLabel=${e.dayPeriodAriaLabel}
+        .prevMonthIcon=${e.prevMonthIcon}
+        .nextMonthIcon=${e.nextMonthIcon}
+        .prevMonthAriaLabel=${e.prevMonthAriaLabel}
+        .nextMonthAriaLabel=${e.nextMonthAriaLabel}
+        .selectYearAriaLabel=${e.selectYearAriaLabel}
+        .yearGridAriaLabel=${e.yearGridAriaLabel}
+        .dayFormat=${e.dayFormat}
+        .weekdayFormat=${e.weekdayFormat}
+        .monthFormat=${e.monthFormat}
+        .minDate=${e.minDate}
+        .maxDate=${e.maxDate}
+        .disabledRanges=${e.disabledRanges}
+        .numberOfMonths=${e.numberOfMonths}
+        .hourFormat=${e.hourFormat}
+        .minuteStep=${e.minuteStep}
+        .minTime=${e.minTime}
+        .maxTime=${e.maxTime}
+        .disabledTimeRanges=${e.disabledTimeRanges}
+        ?allow-custom-time=${e.allowCustomTime}
+        .invalidDateMessage=${e.invalidDateMessage}
+        .minDateMessage=${e.minDateMessage}
+        .maxDateMessage=${e.maxDateMessage}
+        .disabledDateRangeMessage=${e.disabledDateRangeMessage}
+        .minTimeMessage=${e.minTimeMessage}
+        .maxTimeMessage=${e.maxTimeMessage}
+        .disabledTimeRangeMessage=${e.disabledTimeRangeMessage}
+        .noAvailableTimesMessage=${e.noAvailableTimesMessage}
+        .incompleteMessage=${e.incompleteMessage}
+        @inputError=${this.onInputError}
+        @blur=${() => this.adapter.onBlur()}
+        @change=${this.valueChanged}
+      ></gui-date-time-picker>
+    `;
+  }
+  valueChanged(e) {
+    this.adapter.injectValidationIssues(null), this.adapter.valueChanged(e.detail.value);
+  }
+  onInputError(e) {
+    this.adapter.injectValidationIssues([e.detail.message]);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.adapter.destroy(), this.subscriptions.forEach((e) => e.unsubscribe());
+  }
+}
+o([
+  p({ context: d }),
+  c({ attribute: !1 })
+], s.prototype, "formContext");
+o([
+  u({ context: m })
+], s.prototype, "adapter");
+$("gui-date-time-picker-input", s);
+export {
+  s as DateTimePickerElement
+};

package/{date-time.element-CLLxM2nV.js → date-time.element-ucETvSTC.js}

@@ -1,27 +1,28 @@
-import { InputWidgetAdapter as m, formContext as n, inputContext as o } from "@golemui/lit";
-import { a as h } from "./templates-Df7abEkB.js";
-import "./date-time-input-DrY68YDX.js";
+import { InputWidgetAdapter as l, formContext as m, inputContext as n } from "@golemui/lit";
+import { addIcon as o } from "@golemui/gui-components/internals";
+import { safeDefine as h } from "@golemui/lit/internals";
+import "@golemui/gui-components/date-time-input";
 import { consume as u, provide as c } from "@lit/context";
 import { LitElement as D, html as $ } from "lit";
-import { property as b, customElement as g } from "lit/decorators.js";
+import { property as b } from "lit/decorators.js";
 import "rxjs";
-import { classMap as f } from "lit/directives/class-map.js";
-var x = Object.defineProperty, v = Object.getOwnPropertyDescriptor, l = (t, a, s, i) => {
-  for (var e = i > 1 ? void 0 : i ? v(a, s) : a, p = t.length - 1, d; p >= 0; p--)
-    (d = t[p]) && (e = (i ? d(a, s, e) : d(e)) || e);
-  return i && e && x(a, s, e), e;
+import { classMap as g } from "lit/directives/class-map.js";
+var f = Object.defineProperty, d = (i, t, e, x) => {
+  for (var a = void 0, r = i.length - 1, p; r >= 0; r--)
+    (p = i[r]) && (a = p(t, e, a) || a);
+  return a && f(t, e, a), a;
 };
-let r = class extends D {
+class s extends D {
   constructor() {
-    super(...arguments), this.adapter = new m(), this.subscriptions = [];
+    super(...arguments), this.adapter = new l(), this.subscriptions = [];
   }
   createRenderRoot() {
     return this;
   }
   updated(t) {
     super.updated(t);
-    const a = this.adapter.templateData.size;
-    a ? this.style.flex = String(a) : this.style.removeProperty("flex");
+    const e = this.adapter.templateData.size;
+    e ? this.style.flex = String(e) : this.style.removeProperty("flex");
   }
   connectedCallback() {
     super.connectedCallback(), this.classList.add("gui-date-time", "gui-field"), this.adapter.context = this.formContext, this.adapter.init(this.widget), this.subscriptions.push(
@@ -30,10 +31,10 @@ let r = class extends D {
   }
   render() {
     super.render();
-    const t = h("date-time", this.adapter.templateData);
+    const t = o("date-time", this.adapter.templateData);
     return $`
       <gui-date-time
-        class=${f(t.widgetClasses)}
+        class=${g(t.widgetClasses)}
         .uid=${this.widget.uid}
         .label=${this.adapter.templateData.label}
         .hint=${this.adapter.templateData.hint}
@@ -60,6 +61,7 @@ let r = class extends D {
         .maxDateMessage=${this.adapter.templateData.maxDateMessage}
         .minTimeMessage=${this.adapter.templateData.minTimeMessage}
         .maxTimeMessage=${this.adapter.templateData.maxTimeMessage}
+        .incompleteMessage=${this.adapter.templateData.incompleteMessage}
         .hourFormat=${this.adapter.templateData.hourFormat}
         .minuteStep=${this.adapter.templateData.minuteStep}
         @inputError=${this.onInputError}
@@ -77,17 +79,15 @@ let r = class extends D {
   disconnectedCallback() {
     super.disconnectedCallback(), this.adapter.destroy(), this.subscriptions.forEach((t) => t.unsubscribe());
   }
-};
-l([
-  u({ context: n }),
+}
+d([
+  u({ context: m }),
   b({ attribute: !1 })
-], r.prototype, "formContext", 2);
-l([
-  c({ context: o })
-], r.prototype, "adapter", 2);
-r = l([
-  g("gui-date-time-input")
-], r);
+], s.prototype, "formContext");
+d([
+  c({ context: n })
+], s.prototype, "adapter");
+h("gui-date-time-input", s);
 export {
-  r as DateTimeElement
+  s as DateTimeElement
 };

package/{date.element-B8ZHK9KJ.js → date.element-BEHGxRFF.js}

@@ -1,27 +1,28 @@
-import { InputWidgetAdapter as n, formContext as o, inputContext as h } from "@golemui/lit";
-import { a as m } from "./templates-Df7abEkB.js";
-import "./date-input-B3yHsn-g.js";
+import { InputWidgetAdapter as l, formContext as n, inputContext as o } from "@golemui/lit";
+import { addIcon as m } from "@golemui/gui-components/internals";
+import { safeDefine as h } from "@golemui/lit/internals";
+import "@golemui/gui-components/date-input";
 import { consume as u, provide as c } from "@lit/context";
-import { LitElement as D, html as b } from "lit";
-import { property as g, customElement as $ } from "lit/decorators.js";
+import { LitElement as D, html as g } from "lit";
+import { property as $ } from "lit/decorators.js";
 import "rxjs";
-import { classMap as f } from "lit/directives/class-map.js";
-var v = Object.defineProperty, x = Object.getOwnPropertyDescriptor, l = (t, e, i, r) => {
-  for (var a = r > 1 ? void 0 : r ? x(e, i) : e, p = t.length - 1, d; p >= 0; p--)
-    (d = t[p]) && (a = (r ? d(e, i, a) : d(a)) || a);
-  return r && a && v(e, i, a), a;
+import { classMap as b } from "lit/directives/class-map.js";
+var f = Object.defineProperty, d = (r, t, a, v) => {
+  for (var e = void 0, i = r.length - 1, p; i >= 0; i--)
+    (p = r[i]) && (e = p(t, a, e) || e);
+  return e && f(t, a, e), e;
 };
-let s = class extends D {
+class s extends D {
   constructor() {
-    super(...arguments), this.adapter = new n(), this.subscriptions = [];
+    super(...arguments), this.adapter = new l(), this.subscriptions = [];
   }
   createRenderRoot() {
     return this;
   }
   updated(t) {
     super.updated(t);
-    const e = this.adapter.templateData.size;
-    e ? this.style.flex = String(e) : this.style.removeProperty("flex");
+    const a = this.adapter.templateData.size;
+    a ? this.style.flex = String(a) : this.style.removeProperty("flex");
   }
   connectedCallback() {
     super.connectedCallback(), this.classList.add("gui-date", "gui-field"), this.adapter.context = this.formContext, this.adapter.init(this.widget), this.subscriptions.push(
@@ -31,9 +32,9 @@ let s = class extends D {
   render() {
     super.render();
     const t = m("date", this.adapter.templateData);
-    return b`
+    return g`
       <gui-date
-        class=${f(t.widgetClasses)}
+        class=${b(t.widgetClasses)}
         .uid=${this.widget.uid}
         .label=${this.adapter.templateData.label}
         .hint=${this.adapter.templateData.hint}
@@ -53,6 +54,7 @@ let s = class extends D {
         .maxDate=${this.adapter.templateData.maxDate}
         .minDateMessage=${this.adapter.templateData.minDateMessage}
         .maxDateMessage=${this.adapter.templateData.maxDateMessage}
+        .incompleteMessage=${this.adapter.templateData.incompleteMessage}
         @inputError=${this.onInputError}
         @blur=${() => this.adapter.onBlur()}
         @change=${this.valueChanged}
@@ -68,17 +70,15 @@ let s = class extends D {
   disconnectedCallback() {
     super.disconnectedCallback(), this.adapter.destroy(), this.subscriptions.forEach((t) => t.unsubscribe());
   }
-};
-l([
-  u({ context: o }),
-  g({ attribute: !1 })
-], s.prototype, "formContext", 2);
-l([
-  c({ context: h })
-], s.prototype, "adapter", 2);
-s = l([
-  $("gui-date-input")
-], s);
+}
+d([
+  u({ context: n }),
+  $({ attribute: !1 })
+], s.prototype, "formContext");
+d([
+  c({ context: o })
+], s.prototype, "adapter");
+h("gui-date-input", s);
 export {
   s as DateElement
 };

package/default-list-item-renderer-CuPJ9jUD.js

@@ -0,0 +1,24 @@
+import { html as i } from "lit";
+import { classMap as t } from "lit/directives/class-map.js";
+import "@golemui/core";
+const r = (e) => {
+  const s = {
+    "gui-list__item": !0,
+    "gui-list__item-selected": !!e.selected,
+    "gui-list__item-focused": !!e.focused,
+    "gui-list__item-disabled": !!e.disabled
+  };
+  return i`
+    <div
+      role="option"
+      class=${t(s)}
+      aria-selected=${e.selected ? "true" : "false"}
+      aria-disabled=${e.disabled ? "true" : "false"}
+    >
+      ${e.template}
+    </div>
+  `;
+};
+export {
+  r as d
+};

package/{dropdown.element-DMZ7oL5n.js → dropdown.element-DUqG_p1x.js}

@@ -1,21 +1,24 @@
-import { InputWidgetAdapter as w, formContext as y, inputContext as F } from "@golemui/lit";
-import { consume as x, provide as C } from "@lit/context";
-import { LitElement as D, nothing as f, html as g } from "lit";
-import { property as L, state as c, query as I, customElement as R } from "lit/decorators.js";
-import { Subject as V, debounceTime as k } from "rxjs";
-import { d as j } from "./list-D730tmGN.js";
-import "./errors-Bs_vYN-_.js";
-var O = Object.defineProperty, S = Object.getOwnPropertyDescriptor, l = (e, t, i, s) => {
-  for (var r = s > 1 ? void 0 : s ? S(t, i) : t, d = e.length - 1, h; d >= 0; d--)
-    (h = e[d]) && (r = (s ? h(t, i, r) : h(r)) || r);
-  return s && r && O(t, i, r), r;
+import { InputWidgetAdapter as y, formContext as F, inputContext as x } from "@golemui/lit";
+import { consume as C, provide as D } from "@lit/context";
+import { LitElement as L, nothing as _, html as b } from "lit";
+import { property as R, state as d, query as v } from "lit/decorators.js";
+import { safeDefine as k } from "@golemui/lit/internals";
+import { Subject as V, debounceTime as j } from "rxjs";
+import { d as S } from "./default-list-item-renderer-CuPJ9jUD.js";
+import "@golemui/gui-components/label";
+import "@golemui/gui-components/list";
+import "@golemui/gui-components/errors";
+var q = Object.defineProperty, l = (f, e, t, s) => {
+  for (var i = void 0, h = f.length - 1, u; h >= 0; h--)
+    (u = f[h]) && (i = u(e, t, i) || i);
+  return i && q(e, t, i), i;
 };
-let a = class extends D {
+class a extends L {
   constructor() {
-    super(...arguments), this.adapter = new w(), this.debouncer = new V(), this.subscriptions = [], this._range = { start: 0, end: 10 }, this._filteredItems = [], this._listItems = [], this._focusedIndex = -1, this._isFiltering = !1, this._isListVisible = !1, this._selectedItem = void 0, this._ignoreNextFocus = !1, this.onDocumentClick = (e) => {
+    super(...arguments), this.adapter = new y(), this.debouncer = new V(), this.subscriptions = [], this._range = { start: 0, end: 10 }, this._filteredItems = [], this._listItems = [], this._focusedIndex = -1, this._isFiltering = !1, this._isListVisible = !1, this._selectedItem = void 0, this._ignoreNextFocus = !1, this.onDocumentClick = (e) => {
       if (!this._isListVisible) return;
-      const t = e.composedPath(), i = this._inputRef && t.includes(this._inputRef), s = this._listRef && t.includes(this._listRef);
-      !i && !s && (this._isListVisible = !1);
+      const t = e.composedPath(), s = this._inputRef && t.includes(this._inputRef), i = this._listRef && t.includes(this._listRef);
+      !s && !i && (this._isListVisible = !1);
     };
   }
   createRenderRoot() {
@@ -32,7 +35,7 @@ let a = class extends D {
         const e = this.adapter.templateData;
         e.items && this._listItems?.length === 0 && this._filteredItems?.length === 0 && (this._filteredItems = e.items, this._listItems = e.items), this.requestUpdate();
       }),
-      this.debouncer.pipe(k(this.adapter.templateData.inputDebounce ?? 500)).subscribe((e) => {
+      this.debouncer.pipe(j(this.adapter.templateData.inputDebounce ?? 500)).subscribe((e) => {
         this._filterItems(e);
       })
     );
@@ -46,10 +49,10 @@ let a = class extends D {
   _onUpdateItems(e) {
     const t = e.detail || [];
     if (this._listItems = t, !this._selectedItem && this.adapter.templateData.value != null) {
-      const i = t.find(
-        (s) => s.value === this.adapter.templateData.value
+      const s = t.find(
+        (i) => i.value === this.adapter.templateData.value
       );
-      i && (this._selectedItem = i);
+      s && (this._selectedItem = s);
     }
   }
   _onFocusChange(e) {
@@ -57,12 +60,12 @@ let a = class extends D {
   }
   _onClickItem(e, t) {
     if (this.adapter.templateData.readonly || e.disabled) return;
-    const i = this.adapter.templateData;
-    this.adapter.valueChanged(e.value), this.adapter.filterChanged(""), this._focusedIndex = t, this._selectedItem = e, this._isFiltering = !1, this._isListVisible = !1, this._listRef && (this._listRef.focusItemAtIndex(t), this._inputRef.value = i.valueField ? e.template[i.valueField] : e.template);
+    const s = this.adapter.templateData;
+    this.adapter.valueChanged(e.value), this.adapter.filterChanged(""), this._focusedIndex = t, this._selectedItem = e, this._isFiltering = !1, this._isListVisible = !1, this._listRef && (this._listRef.focusItemAtIndex(t), this._inputRef.value = s.valueField ? e.template[s.valueField] : e.template);
   }
   _onValueChange(e) {
     const t = e.detail.value;
-    this.adapter.valueChanged(t), this.adapter.filterChanged(""), this._selectedItem = this._listItems.find((i) => i.value === t), this._isFiltering = !1, this._isListVisible = !1;
+    this.adapter.valueChanged(t), this.adapter.filterChanged(""), this._selectedItem = this._listItems.find((s) => s.value === t), this._isFiltering = !1, this._isListVisible = !1;
   }
   async _onKeyDown(e) {
     switch (e.key) {
@@ -79,18 +82,18 @@ let a = class extends D {
     this.debouncer.next(t);
   }
   _filterItems(e) {
-    const t = this.adapter.templateData, i = !!this.widget.on?.filter;
-    if (this.adapter.filterChanged(e), e && !i) {
+    const t = this.adapter.templateData, s = !!this.widget.on?.filter;
+    if (this.adapter.filterChanged(e), e && !s) {
       this._isFiltering = !0, this._isListVisible = !0;
-      const s = t.searchFields ?? [t.labelField, t.valueField].filter(
-        (n) => !!n
-      ), r = s.length > 0, h = (t.items || []).filter((n) => {
-        if (n === null || typeof n != "object")
-          return n != null && n.toString().toLowerCase().includes(e.toLowerCase());
-        const _ = Object.keys(n), u = (p, m) => p || n[m].toString().toLowerCase().includes(e.toLowerCase());
-        return r ? _.filter((p) => s.includes(p)).reduce(u, !1) : _.reduce(u, !1);
+      const i = t.searchFields ?? [t.labelField, t.valueField].filter(
+        (r) => !!r
+      ), h = i.length > 0, m = (t.items || []).filter((r) => {
+        if (r === null || typeof r != "object")
+          return r != null && r.toString().toLowerCase().includes(e.toLowerCase());
+        const p = Object.keys(r), o = (c, g) => c || r[g].toString().toLowerCase().includes(e.toLowerCase());
+        return h ? p.filter((c) => i.includes(c)).reduce(o, !1) : p.reduce(o, !1);
       });
-      this._filteredItems = [...h];
+      this._filteredItems = [...m];
     } else
       this._isFiltering = !1, this._filteredItems = [...t.items];
   }
@@ -110,11 +113,11 @@ let a = class extends D {
     this.adapter.onBlur(), this._isListVisible = !1, this._isFiltering = !1;
   }
   render() {
-    const e = this.adapter.templateData, t = e.touched && e.errors && e.errors.length > 0, i = this._listItems.slice(this._range.start, this._range.end), s = this.adapter.getItemRenderer(
+    const e = this.adapter.templateData, t = e.touched && e.errors && e.errors.length > 0, s = this._listItems.slice(this._range.start, this._range.end), i = this.adapter.getItemRenderer(
       e.itemRenderer,
-      j
-    ), d = this._selectedItem?.template !== null && typeof this._selectedItem?.template == "object" ? e.labelField ?? "label" : null, h = d ? this._selectedItem?.template[d] : this._selectedItem?.template, n = !!this.widget.on?.filter;
-    return g`
+      S
+    ), u = this._selectedItem?.template !== null && typeof this._selectedItem?.template == "object" ? e.labelField ?? "label" : null, m = u ? this._selectedItem?.template[u] : this._selectedItem?.template, r = !!this.widget.on?.filter;
+    return b`
       <gui-label
         .targetElement=${[this._listRef, this._inputRef]}
         .uid=${this.widget.uid}
@@ -133,12 +136,12 @@ let a = class extends D {
           id=${this.widget.uid}
           data-cy=${`${this.widget.uid}_textinput`}
           class="gui-widget-input"
-          .value=${h ?? e.value ?? ""}
+          .value=${m ?? e.value ?? ""}
           ?required=${e.validator?.required}
           ?disabled=${e.disabled}
           ?readonly=${e.readonly}
           placeholder=${e.placeholder ?? ""}
-          autocomplete=${e.autocomplete || f}
+          autocomplete=${e.autocomplete || _}
           @keydown=${this._onKeyDown}
           @input=${this._onInput}
           @focusout=${this._onFocusOutInput}
@@ -146,8 +149,8 @@ let a = class extends D {
           aria-expanded=${this._isListVisible ? "true" : "false"}
           aria-controls=${`${this.widget.uid}-list`}
           aria-autocomplete="list"
-          aria-labelledby=${e.label ? `${this.widget.uid}_label` : f}
-          aria-describedby=${e.hint ? `${this.widget.uid}_hint` : f}
+          aria-labelledby=${e.label ? `${this.widget.uid}_label` : _}
+          aria-describedby=${e.hint ? `${this.widget.uid}_hint` : _}
         />
         <span class="gui-dropdown__arrow"
           ><svg
@@ -167,7 +170,7 @@ let a = class extends D {
           .uid=${this.widget.uid}
           .value=${e.value ?? ""}
           .valueField=${e.valueField}
-          .items=${this._isFiltering && !n ? this._filteredItems : e.items}
+          .items=${this._isFiltering && !r ? this._filteredItems : e.items}
           .itemHeight=${e.itemHeight}
           .height=${e.height}
           ?required=${e.validator?.required}
@@ -182,26 +185,26 @@ let a = class extends D {
           @blur=${this._onBlur}
           @change=${this._onValueChange}
         >
-          ${i.map((o, _) => {
-      const u = this._range.start + _, p = e.value === o.value, m = this._focusedIndex === u, b = !!e.disabled || !!o.disabled, $ = e.labelField ?? "label", v = o.template !== null && typeof o.template == "object" && $ && !e.itemRenderer ? o.template[$] : o.template;
-      return g`
+          ${s.map((n, p) => {
+      const o = this._range.start + p, c = e.value === n.value, g = this._focusedIndex === o, $ = !!e.disabled || !!n.disabled, I = e.labelField ?? "label", w = n.template !== null && typeof n.template == "object" && I && !e.itemRenderer ? n.template[I] : n.template;
+      return b`
               <div
                 role="option"
                 tabindex="-1"
                 class="gui-list__item-wrapper"
-                id="${this.widget.uid}-item-${u}"
+                id="${this.widget.uid}-item-${o}"
                 style="height: ${e.itemHeight || 40}px"
-                aria-selected=${p ? "true" : "false"}
-                aria-disabled=${b ? "true" : "false"}
-                @click=${() => this._onClickItem(o, u)}
+                aria-selected=${c ? "true" : "false"}
+                aria-disabled=${$ ? "true" : "false"}
+                @click=${() => this._onClickItem(n, o)}
               >
-                ${s({
-        template: v,
-        value: o.value,
-        index: u,
-        selected: p,
-        disabled: b,
-        focused: m
+                ${i({
+        template: w,
+        value: n.value,
+        index: o,
+        selected: c,
+        disabled: $,
+        focused: g
       })}
               </div>
             `;
@@ -209,51 +212,49 @@ let a = class extends D {
         </gui-list>
       </div>
 
-      ${t ? g`<gui-errors
+      ${t ? b`<gui-errors
             .uid=${this.widget.uid}
             .errors=${e.errors}
             .touched=${e.touched}
-          ></gui-errors>` : f}
+          ></gui-errors>` : _}
     `;
   }
-};
+}
 l([
-  x({ context: y }),
-  L({ attribute: !1 })
-], a.prototype, "formContext", 2);
+  C({ context: F }),
+  R({ attribute: !1 })
+], a.prototype, "formContext");
 l([
-  C({ context: F })
-], a.prototype, "adapter", 2);
+  D({ context: x })
+], a.prototype, "adapter");
 l([
-  c()
-], a.prototype, "_range", 2);
+  d()
+], a.prototype, "_range");
 l([
-  c()
-], a.prototype, "_filteredItems", 2);
+  d()
+], a.prototype, "_filteredItems");
 l([
-  c()
-], a.prototype, "_listItems", 2);
+  d()
+], a.prototype, "_listItems");
 l([
-  c()
-], a.prototype, "_focusedIndex", 2);
+  d()
+], a.prototype, "_focusedIndex");
 l([
-  c()
-], a.prototype, "_isFiltering", 2);
+  d()
+], a.prototype, "_isFiltering");
 l([
-  c()
-], a.prototype, "_isListVisible", 2);
+  d()
+], a.prototype, "_isListVisible");
 l([
-  c()
-], a.prototype, "_selectedItem", 2);
+  d()
+], a.prototype, "_selectedItem");
 l([
-  I("input")
-], a.prototype, "_inputRef", 2);
+  v("input")
+], a.prototype, "_inputRef");
 l([
-  I("gui-list")
-], a.prototype, "_listRef", 2);
-a = l([
-  R("gui-dropdown-input")
-], a);
+  v("gui-list")
+], a.prototype, "_listRef");
+k("gui-dropdown-input", a);
 export {
   a as DropdownElement
 };