@golemui/gui-lit 1.6.0 → 2.0.0-rc.1

package/accordion.element-BEenQrCh.js

@@ -1,102 +0,0 @@
-import { LayoutWidgetAdapter as u, formContext as f, layoutContext as m } from "@golemui/lit";
-import { repeaterIndexSuffix as g, accordionSectionId as c, accordionButtonId as p } from "@golemui/gui-shared/internals";
-import { consume as v, provide as w } from "@lit/context";
-import { LitElement as x, html as s, nothing as l } from "lit";
-import { property as b } from "lit/decorators.js";
-import { unsubscribeAll as S, safeDefine as $ } from "@golemui/lit/internals";
-import "rxjs";
-import { repeat as y } from "lit-html/directives/repeat.js";
-import { classMap as C } from "lit/directives/class-map.js";
-var D = Object.defineProperty, h = (r, t, e, a) => {
-  for (var i = void 0, d = r.length - 1, n; d >= 0; d--)
-    (n = r[d]) && (i = n(t, e, i) || i);
-  return i && D(t, e, i), i;
-};
-class o extends x {
-  constructor() {
-    super(...arguments), this.activeSections = {}, this.adapter = new u(), this.subscriptions = [], this.rowIndexSuffix = "";
-  }
-  createRenderRoot() {
-    return this;
-  }
-  updated(t) {
-    super.updated(t);
-    const e = this.adapter.templateData.size;
-    e ? this.style.flex = String(e) : this.style.removeProperty("flex");
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.classList.add("gui-accordion", "gui-field"), this.adapter.context = this.formContext, this.adapter.init(this.widget), this.activeSections = { ...this.adapter.templateData.defaultOpen ?? {} }, this.rowIndexSuffix = g(this.widget.uid), this.subscriptions.push(
-      this.adapter.templateDataChanged$.subscribe(() => this.requestUpdate())
-    );
-  }
-  onClickButton(t) {
-    this.adapter.templateData.singleOpen && Object.keys(this.activeSections).filter((e) => e !== t).forEach((e) => {
-      this.activeSections[e] = !1;
-    }), this.activeSections[t] = !this.activeSections[t], this.adapter.change({ ...this.activeSections }), this.requestUpdate();
-  }
-  getChild(t) {
-    return (this.adapter.templateData.children ?? []).find((a) => a.uid === `${t}${this.rowIndexSuffix}`);
-  }
-  render() {
-    return this.adapter.templateData ? s`
-      <div class="gui-widget" id=${this.widget.uid}>
-        ${this.adapter.templateData.sections ? y(
-      this.adapter.templateData.sections,
-      (t) => t.uid,
-      (t) => {
-        const e = this.getChild(t.uid), a = e !== void 0 && (this.activeSections[t.uid] || this.adapter.templateData.renderMode !== "activeOnly") ? s`<section
-                        class="gui-widget"
-                        role="region"
-                        id=${c(this.widget.uid, t.uid)}
-                        ?hidden=${!this.activeSections[t.uid] && this.adapter.templateData.renderMode !== "activeOnly"}
-                        aria-labelledby=${p(this.widget.uid, t.uid)}
-                      >
-                        <gui-widget .widget=${e}></gui-widget>
-                      </section>` : l;
-        return s`<div class="gui-accordion__section">
-                  <button
-                    type="button"
-                    tabindex="0"
-                    class=${C({
-          active: this.activeSections[t.uid]
-        })}
-                    id=${p(this.widget.uid, t.uid)}
-                    aria-controls=${c(this.widget.uid, t.uid)}
-                    aria-expanded=${this.activeSections[t.uid] ? "true" : "false"}
-                    @click=${() => this.onClickButton(t.uid)}
-                  >
-                    ${t.label}<span class="gui-accordion__arrow"
-                      ><svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        width="16"
-                        height="16"
-                        viewBox="0 0 256 256"
-                      >
-                        <path
-                          d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"
-                        ></path></svg
-                    ></span>
-                  </button>
-
-                  ${a}
-                </div>`;
-      }
-    ) : l}
-      </div>
-    ` : s``;
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this.adapter.destroy(), S(this.subscriptions);
-  }
-}
-h([
-  v({ context: f }),
-  b({ attribute: !1 })
-], o.prototype, "formContext");
-h([
-  w({ context: m })
-], o.prototype, "adapter");
-$("gui-accordion-layout", o);
-export {
-  o as AccordionElement
-};

package/alert.element-Dzv49O-1.js

@@ -1,55 +0,0 @@
-import { LitElement as p, html as l } from "lit";
-import { property as n } from "lit/decorators.js";
-import { unsubscribeAll as c, safeDefine as u } from "@golemui/lit/internals";
-import { consume as m, provide as f } from "@lit/context";
-import { DisplayWidgetAdapter as h, formContext as g, displayWidgetContext as b } from "@golemui/lit";
-import "rxjs";
-var v = Object.defineProperty, d = (r, i, e, x) => {
-  for (var t = void 0, a = r.length - 1, o; a >= 0; a--)
-    (o = r[a]) && (t = o(i, e, t) || t);
-  return t && v(i, e, t), t;
-};
-class s extends p {
-  constructor() {
-    super(...arguments), this.adapter = new h(), this.subscriptions = [];
-  }
-  createRenderRoot() {
-    return this;
-  }
-  updated(i) {
-    super.updated(i);
-    const e = this.adapter.templateData.size;
-    e ? this.style.flex = String(e) : this.style.removeProperty("flex");
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.classList.add("gui-alert", "gui-field"), this.adapter.context = this.formContext, this.adapter.init(this.widget), this.subscriptions.push(
-      this.adapter.templateDataChanged$.subscribe(() => this.requestUpdate())
-    );
-  }
-  render() {
-    return l`
-      <div class="gui-widget" id=${this.widget.uid}>
-        <div
-          role="alert"
-          class="gui-alert-notification gui-alert-notification--${this.adapter.templateData.level || "default"}"
-        >
-          ${this.adapter.templateData.text}
-        </div>
-      </div>
-    `;
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this.adapter.destroy(), c(this.subscriptions);
-  }
-}
-d([
-  m({ context: g }),
-  n({ attribute: !1 })
-], s.prototype, "formContext");
-d([
-  f({ context: b })
-], s.prototype, "adapter");
-u("gui-alert-display", s);
-export {
-  s as AlertElement
-};

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

@@ -1,24 +0,0 @@
-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/flex.element-BW0_kx8z.js

@@ -1,79 +0,0 @@
-import { LayoutWidgetAdapter as n, formContext as o, layoutContext as u } from "@golemui/lit";
-import { consume as g, provide as c } from "@lit/context";
-import { LitElement as m, html as l } from "lit";
-import { property as f } from "lit/decorators.js";
-import { cspStyleMap as h, unsubscribeAll as _, safeDefine as x } from "@golemui/lit/internals";
-import "rxjs";
-import { repeat as w } from "lit-html/directives/repeat.js";
-import { classMap as y } from "lit/directives/class-map.js";
-var D = Object.defineProperty, d = (i, e, t, b) => {
-  for (var a = void 0, r = i.length - 1, p; r >= 0; r--)
-    (p = i[r]) && (a = p(e, t, a) || a);
-  return a && D(e, t, a), a;
-};
-class s extends m {
-  constructor() {
-    super(...arguments), this.adapter = new n(), 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-flex", "gui-field"), this.adapter.context = this.formContext, this.adapter.init(this.widget), this.subscriptions.push(
-      this.adapter.templateDataChanged$.subscribe(() => this.requestUpdate())
-    );
-  }
-  render() {
-    const e = {
-      "gui-flex__widget": !0,
-      "gui-flex__widget--row": this.adapter.templateData.direction === "row",
-      "gui-flex__widget--row-reverse": this.adapter.templateData.direction === "row-reverse",
-      "gui-flex__widget--column": !this.adapter.templateData.direction || this.adapter.templateData.direction === "column",
-      "gui-flex__widget--column-reverse": this.adapter.templateData.direction === "column-reverse",
-      "gui-flex__widget--justify-center": this.adapter.templateData.justify === "center",
-      "gui-flex__widget--justify-start": this.adapter.templateData.justify === "start",
-      "gui-flex__widget--justify-end": this.adapter.templateData.justify === "end",
-      "gui-flex__widget--justify-stretch": !this.adapter.templateData.justify || this.adapter.templateData.justify === "stretch",
-      "gui-flex__widget--align-start": !this.adapter.templateData.align || this.adapter.templateData.align === "start",
-      "gui-flex__widget--align-end": this.adapter.templateData.align === "end",
-      "gui-flex__widget--align-center": this.adapter.templateData.align === "center",
-      "gui-flex__widget--align-space-between": this.adapter.templateData.align === "space-between",
-      "gui-flex__widget--align-space-around": this.adapter.templateData.align === "space-around",
-      "gui-flex__widget--align-space-evenly": this.adapter.templateData.align === "space-evenly"
-    };
-    return l`
-      <div
-        class=${y(e)}
-        id=${this.widget?.uid}
-        style=${h(
-      this.adapter.templateData.gap ? { gap: `${this.adapter.templateData.gap}px` } : {}
-    )}
-      >
-        ${w(
-      this.adapter.templateData.children || [],
-      (t) => t?.uid,
-      (t) => l`<gui-widget .widget=${t}></gui-widget>`
-    )}
-      </div>
-    `;
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this.adapter.destroy(), _(this.subscriptions);
-  }
-}
-d([
-  g({ context: o }),
-  f({ attribute: !1 })
-], s.prototype, "formContext");
-d([
-  c({ context: u })
-], s.prototype, "adapter");
-x("gui-flex-layout", s);
-export {
-  s as FlexElement
-};

package/grid.element-C019lV76.js

@@ -1,78 +0,0 @@
-import { LayoutWidgetAdapter as o, formContext as u, layoutContext as c } from "@golemui/lit";
-import { consume as m, provide as h } from "@lit/context";
-import { LitElement as _, html as n } from "lit";
-import { property as f } from "lit/decorators.js";
-import { cspStyleMap as l, unsubscribeAll as w, safeDefine as y } from "@golemui/lit/internals";
-import "rxjs";
-import { repeat as D } from "lit-html/directives/repeat.js";
-import { classMap as b } from "lit/directives/class-map.js";
-var v = Object.defineProperty, g = (s, a, t, p) => {
-  for (var e = void 0, i = s.length - 1, r; i >= 0; i--)
-    (r = s[i]) && (e = r(a, t, e) || e);
-  return e && v(a, t, e), e;
-};
-class d extends _ {
-  constructor() {
-    super(...arguments), this.adapter = new o(), this.subscriptions = [];
-  }
-  createRenderRoot() {
-    return this;
-  }
-  updated(a) {
-    super.updated(a);
-    const t = this.adapter.templateData.size;
-    t ? this.style.flex = String(t) : this.style.removeProperty("flex");
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.classList.add("gui-grid", "gui-field"), this.adapter.context = this.formContext, this.adapter.init(this.widget), this.subscriptions.push(
-      this.adapter.templateDataChanged$.subscribe(() => this.requestUpdate())
-    );
-  }
-  render() {
-    const a = this.adapter.templateData.direction === "column", t = !a, p = this.adapter.templateData.autoFit ?? !0, e = {
-      "gui-grid__widget": !0,
-      "gui-grid__widget--row": t,
-      "gui-grid__widget--row--auto-fit": t && p,
-      "gui-grid__widget--column": a,
-      "gui-grid__widget--align-center": this.adapter.templateData.align === "center",
-      "gui-grid__widget--align-start": this.adapter.templateData.align === "start",
-      "gui-grid__widget--align-end": this.adapter.templateData.align === "end",
-      "gui-grid__widget--align-space-between": this.adapter.templateData.align === "space-between",
-      "gui-grid__widget--align-space-around": this.adapter.templateData.align === "space-around",
-      "gui-grid__widget--align-space-evenly": this.adapter.templateData.align === "space-evenly",
-      "gui-grid__widget--align-stretch": !this.adapter.templateData.align || this.adapter.templateData.align === "stretch",
-      "gui-grid__widget--justify-center": this.adapter.templateData.justify === "center",
-      "gui-grid__widget--justify-start": this.adapter.templateData.justify === "start",
-      "gui-grid__widget--justify-end": this.adapter.templateData.justify === "end",
-      "gui-grid__widget--justify-stretch": this.adapter.templateData.justify === "stretch"
-    }, i = {};
-    return this.adapter.templateData.columnGap !== void 0 && (i["column-gap"] = `${this.adapter.templateData.columnGap}px`), this.adapter.templateData.rowGap !== void 0 && (i["row-gap"] = `${this.adapter.templateData.rowGap}px`), n`
-      <div class=${b(e)} id=${this.widget?.uid} style=${l(i)}>
-        ${D(
-      this.adapter.templateData.children || [],
-      (r) => r?.uid,
-      (r) => n`<div
-              class="gui-grid__cell"
-              style=${l({ "grid-column": `span ${r.size || 1}` })}
-            >
-              <gui-widget .widget=${r}></gui-widget>
-            </div>`
-    )}
-      </div>
-    `;
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this.adapter.destroy(), w(this.subscriptions);
-  }
-}
-g([
-  m({ context: u }),
-  f({ attribute: !1 })
-], d.prototype, "formContext");
-g([
-  h({ context: c })
-], d.prototype, "adapter");
-y("gui-grid-layout", d);
-export {
-  d as GridElement
-};

package/lib/components/flex.element.d.ts

@@ -1,16 +0,0 @@
-import { LayoutWidget, WithWidget } from '@golemui/core';
-import { LayoutWidgetAdapter, LitFormContext } from '@golemui/lit';
-import { FlexProps } from '@golemui/gui-shared/internals';
-import { LitElement } from 'lit';
-import { Subscription } from 'rxjs';
-export declare class FlexElement extends LitElement implements WithWidget {
-    widget: LayoutWidget;
-    formContext: LitFormContext<any>;
-    adapter: LayoutWidgetAdapter<FlexProps>;
-    subscriptions: Subscription[];
-    createRenderRoot(): this;
-    updated(changedProperties: any): void;
-    connectedCallback(): void;
-    render(): import('lit-html').TemplateResult<1>;
-    disconnectedCallback(): void;
-}

package/list.element-UIKmXzeH.js

@@ -1,148 +0,0 @@
-import { InputWidgetAdapter as $, formContext as _, inputContext as v } from "@golemui/lit";
-import { consume as I, provide as x } from "@lit/context";
-import { LitElement as y, nothing as o, html as u } from "lit";
-import { property as C, state as h, query as R } from "lit/decorators.js";
-import { unsubscribeAll as w, cspStyleMap as D, safeDefine as L } from "@golemui/lit/internals";
-import "rxjs";
-import { d as k } from "./default-list-item-renderer-CuPJ9jUD.js";
-import "@golemui/gui-components/label";
-import "@golemui/gui-components/list";
-import "@golemui/gui-components/errors";
-var F = Object.defineProperty, r = (n, e, i, p) => {
-  for (var s = void 0, t = n.length - 1, d; t >= 0; t--)
-    (d = n[t]) && (s = d(e, i, s) || s);
-  return s && F(e, i, s), s;
-};
-class a extends y {
-  constructor() {
-    super(...arguments), this.adapter = new $(), this.subscriptions = [], this._range = { start: 0, end: 10 }, this._listItems = [], this._focusedIndex = -1;
-  }
-  createRenderRoot() {
-    return this;
-  }
-  updated(e) {
-    super.updated(e);
-    const i = this.adapter.templateData.size;
-    i ? this.style.flex = String(i) : this.style.removeProperty("flex");
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.classList.add("gui-list", "gui-field"), this.adapter.context = this.formContext, this.adapter.init(this.widget), this.subscriptions.push(
-      this.adapter.templateDataChanged$.subscribe(() => {
-        const e = this.adapter.templateData;
-        e.items && this._listItems.length === 0 && (this._listItems = e.items), this.requestUpdate();
-      })
-    );
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this.adapter.destroy(), w(this.subscriptions);
-  }
-  render() {
-    const e = this.adapter.templateData, i = e.touched && e.errors && e.errors.length > 0, p = this._listItems.slice(this._range.start, this._range.end), s = this.adapter.getItemRenderer(
-      e.itemRenderer,
-      k
-    );
-    return u`
-      <gui-label
-        .targetElement=${this._guiListRef}
-        .uid=${this.widget.uid}
-        .label=${e.label}
-        .hint=${e.hint}
-        .errors=${e.errors}
-        .touched=${e.touched}
-        .required=${e.validator?.required}
-        .native=${!1}
-      ></gui-label>
-
-      <div class="gui-widget">
-        <gui-list
-          .uid=${this.widget.uid}
-          .value=${e.value ?? ""}
-          .valueField=${e.valueField}
-          .items=${e.items}
-          .itemHeight=${e.itemHeight}
-          .height=${e.height}
-          ?required=${e.validator?.required}
-          ?touched=${e.touched}
-          ?disabled=${e.disabled}
-          ?readonly=${e.readonly}
-          aria-labelledby=${e.label ? `${this.widget.uid}_label` : o}
-          aria-describedby=${e.hint ? `${this.widget.uid}_hint` : o}
-          @gui-range-change=${this._onRangeChange}
-          @gui-update-items=${this._onUpdateItems}
-          @gui-focus-change=${this._onFocusChange}
-          @blur=${() => this.adapter.onBlur()}
-          @change=${this._valueChanged}
-        >
-          ${p.map((t, d) => {
-      const l = this._range.start + d, c = e.value === t.value, f = this._focusedIndex === l, g = !!e.disabled || !!t.disabled, m = e.labelField ?? "label", b = t.template !== null && typeof t.template == "object" && m && !e.itemRenderer ? t.template[m] : t.template;
-      return u`
-              <div
-                role="option"
-                tabindex="-1"
-                class="gui-list__item-wrapper"
-                id="${this.widget.uid}-item-${l}"
-                style=${D({ height: `${e.itemHeight || 40}px` })}
-                aria-selected=${c ? "true" : "false"}
-                aria-disabled=${g ? "true" : "false"}
-                @click=${() => this._onClickItem(t, l)}
-              >
-                ${s({
-        template: b,
-        value: t.value,
-        index: l,
-        selected: c,
-        disabled: g,
-        focused: f
-      })}
-              </div>
-            `;
-    })}
-        </gui-list>
-      </div>
-
-      ${i ? u`<gui-errors
-            .uid=${this.widget.uid}
-            .errors=${e.errors}
-            .touched=${e.touched}
-          ></gui-errors>` : o}
-    `;
-  }
-  _onRangeChange(e) {
-    this._range = { start: e.detail.startIndex, end: e.detail.endIndex };
-  }
-  _onUpdateItems(e) {
-    this._listItems = e.detail || [];
-  }
-  _onFocusChange(e) {
-    this._focusedIndex = e.detail.index;
-  }
-  _onClickItem(e, i) {
-    this.adapter.templateData.disabled || e.disabled || (this.adapter.valueChanged(e.value), this._focusedIndex = i, this._guiListRef && typeof this._guiListRef.focusItemAtIndex == "function" && this._guiListRef.focusItemAtIndex(i));
-  }
-  _valueChanged(e) {
-    this.adapter.templateData.readonly || this.adapter.valueChanged(e.detail.value);
-  }
-}
-r([
-  I({ context: _ }),
-  C({ attribute: !1 })
-], a.prototype, "formContext");
-r([
-  x({ context: v })
-], a.prototype, "adapter");
-r([
-  h()
-], a.prototype, "_range");
-r([
-  h()
-], a.prototype, "_listItems");
-r([
-  h()
-], a.prototype, "_focusedIndex");
-r([
-  R("gui-list")
-], a.prototype, "_guiListRef");
-L("gui-list-input", a);
-export {
-  a as ListElement
-};

package/multi-list.element-Bs-UN2Cy.js

@@ -1,162 +0,0 @@
-import { InputWidgetAdapter as $, formContext as v, inputContext as I } from "@golemui/lit";
-import { consume as x, provide as y } from "@lit/context";
-import { LitElement as C, nothing as u, html as h } from "lit";
-import { property as R, state as p, query as w } from "lit/decorators.js";
-import { unsubscribeAll as D, cspStyleMap as L, safeDefine as k } from "@golemui/lit/internals";
-import "rxjs";
-import { d as F } from "./default-multi-list-item-renderer-Cv-guvEX.js";
-import "@golemui/gui-components/label";
-import "@golemui/gui-components/multi-list";
-import "@golemui/gui-components/errors";
-var q = Object.defineProperty, d = (o, e, t, r) => {
-  for (var i = void 0, l = o.length - 1, s; l >= 0; l--)
-    (s = o[l]) && (i = s(e, t, i) || i);
-  return i && q(e, t, i), i;
-};
-class a extends C {
-  constructor() {
-    super(...arguments), this.adapter = new $(), this.subscriptions = [], this._range = { start: 0, end: 10 }, this._listItems = [], this._focusedIndex = -1;
-  }
-  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-multi-list-widget", "gui-field"), this.adapter.context = this.formContext, this.adapter.init(this.widget), this.subscriptions.push(
-      this.adapter.templateDataChanged$.subscribe(() => {
-        const e = this.adapter.templateData;
-        e.items && this._listItems.length === 0 && (this._listItems = e.items), this.requestUpdate();
-      })
-    );
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this.adapter.destroy(), D(this.subscriptions);
-  }
-  render() {
-    const e = this.adapter.templateData, t = e.touched && e.errors && e.errors.length > 0, r = this._listItems.slice(this._range.start, this._range.end), i = this._currentValues(), l = this.adapter.getItemRenderer(
-      e.itemRenderer,
-      F
-    );
-    return h`
-      <gui-label
-        .targetElement=${this._guiListRef}
-        .uid=${this.widget.uid}
-        .label=${e.label}
-        .hint=${e.hint}
-        .errors=${e.errors}
-        .touched=${e.touched}
-        .required=${e.validator?.required}
-        .native=${!1}
-      ></gui-label>
-
-      <div class="gui-widget">
-        <gui-multi-list
-          .uid=${this.widget.uid}
-          .values=${i}
-          .valueField=${e.valueField}
-          .items=${e.items}
-          .itemHeight=${e.itemHeight}
-          .height=${e.height}
-          ?required=${e.validator?.required}
-          ?touched=${e.touched}
-          ?disabled=${e.disabled}
-          ?readonly=${e.readonly}
-          aria-labelledby=${e.label ? `${this.widget.uid}_label` : u}
-          aria-describedby=${e.hint ? `${this.widget.uid}_hint` : u}
-          @gui-range-change=${this._onRangeChange}
-          @gui-update-items=${this._onUpdateItems}
-          @gui-focus-change=${this._onFocusChange}
-          @blur=${() => this.adapter.onBlur()}
-          @change=${this._valueChanged}
-        >
-          ${r.map((s, f) => {
-      const n = this._range.start + f, c = i.includes(s.value), _ = this._focusedIndex === n, g = !!e.disabled || !!s.disabled, m = e.labelField ?? "label", b = s.template !== null && typeof s.template == "object" && m && !e.itemRenderer ? s.template[m] : s.template;
-      return h`
-              <div
-                role="option"
-                tabindex="-1"
-                class="gui-list__item-wrapper"
-                id="${this.widget.uid}-item-${n}"
-                style=${L({ height: `${e.itemHeight || 40}px` })}
-                aria-selected=${c ? "true" : "false"}
-                aria-disabled=${g ? "true" : "false"}
-                @click=${() => this._onClickItem(s, n)}
-              >
-                ${l({
-        template: b,
-        value: s.value,
-        index: n,
-        selected: c,
-        disabled: g,
-        focused: _
-      })}
-              </div>
-            `;
-    })}
-        </gui-multi-list>
-      </div>
-
-      ${t ? h`<gui-errors
-            .uid=${this.widget.uid}
-            .errors=${e.errors}
-            .touched=${e.touched}
-          ></gui-errors>` : u}
-    `;
-  }
-  _currentValues() {
-    const e = this.adapter.templateData.value;
-    return Array.isArray(e) ? e : [];
-  }
-  _toggleValue(e) {
-    const t = this.adapter.templateData;
-    if (t.disabled || t.readonly) return;
-    const r = this._currentValues();
-    if (r.includes(e)) {
-      this.adapter.valueChanged(r.filter((i) => i !== e));
-      return;
-    }
-    this.adapter.valueChanged([...r, e]);
-  }
-  _onRangeChange(e) {
-    this._range = { start: e.detail.startIndex, end: e.detail.endIndex };
-  }
-  _onUpdateItems(e) {
-    this._listItems = e.detail || [];
-  }
-  _onFocusChange(e) {
-    this._focusedIndex = e.detail.index;
-  }
-  _onClickItem(e, t) {
-    this.adapter.templateData.disabled || e.disabled || (this._toggleValue(e.value), this._focusedIndex = t, this._guiListRef && typeof this._guiListRef.focusItemAtIndex == "function" && this._guiListRef.focusItemAtIndex(t));
-  }
-  _valueChanged(e) {
-    this.adapter.templateData.readonly || this._toggleValue(e.detail.value);
-  }
-}
-d([
-  x({ context: v }),
-  R({ attribute: !1 })
-], a.prototype, "formContext");
-d([
-  y({ context: I })
-], a.prototype, "adapter");
-d([
-  p()
-], a.prototype, "_range");
-d([
-  p()
-], a.prototype, "_listItems");
-d([
-  p()
-], a.prototype, "_focusedIndex");
-d([
-  w("gui-multi-list")
-], a.prototype, "_guiListRef");
-k("gui-multi-list-input", a);
-export {
-  a as MultiListElement
-};