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

package/multi-list.element-CZfmTbCf.js

@@ -0,0 +1,139 @@
+import { InputWidgetAdapter as h, formContext as c, inputContext as m } from "@golemui/lit";
+import { consume as g, provide as b } from "@lit/context";
+import { LitElement as $, nothing as u, html as n } from "lit";
+import { property as f, state as v, query as _ } from "lit/decorators.js";
+import { unsubscribeAll as y, cspStyleMap as C, safeDefine as x } from "@golemui/lit/internals";
+import "rxjs";
+import { d as w } from "./default-multi-list-item-renderer-CG3Fuye0.js";
+import "@golemui/gui-components/label";
+import "@golemui/gui-components/multi-list";
+import "@golemui/gui-components/errors";
+import { live as I } from "lit/directives/live.js";
+var R = Object.defineProperty, d = (o, e, r, a) => {
+  for (var i = void 0, t = o.length - 1, s; t >= 0; t--)
+    (s = o[t]) && (i = s(e, r, i) || i);
+  return i && R(e, r, i), i;
+};
+class l extends $ {
+  constructor() {
+    super(...arguments), this.adapter = new h(), this.subscriptions = [], this._visibleItems = [];
+  }
+  createRenderRoot() {
+    return this;
+  }
+  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(() => this.requestUpdate())
+    );
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.adapter.destroy(), y(this.subscriptions);
+  }
+  render() {
+    const e = this.adapter.templateData, r = e.touched && e.errors && e.errors.length > 0, a = this._currentValues(), i = this.adapter.getItemRenderer(
+      e.itemRenderer,
+      w
+    );
+    return n`
+      <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}
+        .disabled=${e.disabled}
+        .readOnly=${e.readonly}
+        .native=${!1}
+      ></gui-label>
+
+      <div class="gui-widget">
+        <gui-multi-list
+          .uid=${this.widget.uid}
+          .values=${I(a)}
+          .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-visible-items-change=${this._onVisibleItemsChange}
+          @gui-blur=${() => this.adapter.onBlur()}
+          @gui-item-toggle=${this._valueChanged}
+        >
+          ${this._visibleItems.map((t) => {
+      const s = e.labelField ?? "label", p = t.template !== null && typeof t.template == "object" && s && !e.itemRenderer ? t.template[s] : t.template;
+      return n`
+              <div
+                role="option"
+                tabindex="-1"
+                class="gui-list__item-wrapper"
+                id=${t.id}
+                style=${C({ height: `${e.itemHeight || 40}px` })}
+                aria-selected=${t.selected ? "true" : "false"}
+                aria-disabled=${t.disabled ? "true" : "false"}
+              >
+                ${i({
+        template: p,
+        value: t.value,
+        index: t.index,
+        selected: t.selected,
+        disabled: t.disabled,
+        focused: t.focused
+      })}
+              </div>
+            `;
+    })}
+        </gui-multi-list>
+      </div>
+
+      ${r ? n`<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 r = this.adapter.templateData;
+    if (r.disabled || r.readonly) return;
+    const a = this._currentValues();
+    if (a.includes(e)) {
+      this.adapter.valueChanged(a.filter((i) => i !== e));
+      return;
+    }
+    this.adapter.valueChanged([...a, e]);
+  }
+  _onVisibleItemsChange(e) {
+    this._visibleItems = e.detail;
+  }
+  _valueChanged(e) {
+    this.adapter.templateData.readonly || this._toggleValue(e.detail.value);
+  }
+}
+d([
+  g({ context: c }),
+  f({ attribute: !1 })
+], l.prototype, "formContext");
+d([
+  b({ context: m })
+], l.prototype, "adapter");
+d([
+  v()
+], l.prototype, "_visibleItems");
+d([
+  _("gui-multi-list")
+], l.prototype, "_guiListRef");
+x("gui-multi-list-input", l);
+export {
+  l as MultiListElement
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@golemui/gui-lit",
-  "version": "2.0.0-rc.0",
+  "version": "2.0.0-rc.1",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -25,11 +25,11 @@
     "*.md"
   ],
   "peerDependencies": {
-    "@golemui/lit": "2.0.0-rc.0",
-    "@golemui/core": "2.0.0-rc.0",
-    "@golemui/gui-components": "2.0.0-rc.0",
-    "@golemui/gui-shared": "2.0.0-rc.0",
-    "@golemui/gui-validators": "2.0.0-rc.0",
+    "@golemui/lit": "2.0.0-rc.1",
+    "@golemui/core": "2.0.0-rc.1",
+    "@golemui/gui-components": "2.0.0-rc.1",
+    "@golemui/gui-shared": "2.0.0-rc.1",
+    "@golemui/gui-validators": "2.0.0-rc.1",
     "@lit/context": "^1.1.6",
     "lit-html": "^3.3.1",
     "lit": "^3.3.1",

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/list.element-DfLD2X8s.js

@@ -1,147 +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 u, html as h } from "lit";
-import { property as C, state as p, query as R } from "lit/decorators.js";
-import { unsubscribeAll as w, cspStyleMap as L, safeDefine as D } 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";
-import { live as F } from "lit/directives/live.js";
-var q = Object.defineProperty, r = (o, e, s, d) => {
-  for (var i = void 0, t = o.length - 1, l; t >= 0; t--)
-    (l = o[t]) && (i = l(e, s, i) || i);
-  return i && q(e, s, i), i;
-};
-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;
-  }
-  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, s = e.touched && e.errors && e.errors.length > 0, d = this._listItems.slice(this._range.start, this._range.end), i = this.adapter.getItemRenderer(
-      e.itemRenderer,
-      k
-    );
-    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}
-        .disabled=${e.disabled}
-        .readOnly=${e.readonly}
-        .native=${!1}
-      ></gui-label>
-
-      <div class="gui-widget">
-        <gui-list
-          .uid=${this.widget.uid}
-          .value=${F(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` : 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}
-          @gui-blur=${() => this.adapter.onBlur()}
-          @gui-input=${this._valueChanged}
-        >
-          ${d.map((t, l) => {
-      const n = this._range.start + l, c = e.value === t.value, b = this._focusedIndex === n, g = !!e.disabled || !!t.disabled, m = e.labelField ?? "label", f = t.template !== null && typeof t.template == "object" && m && !e.itemRenderer ? t.template[m] : t.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(t, n)}
-              >
-                ${i({
-        template: f,
-        value: t.value,
-        index: n,
-        selected: c,
-        disabled: g,
-        focused: b
-      })}
-              </div>
-            `;
-    })}
-        </gui-list>
-      </div>
-
-      ${s ? h`<gui-errors
-            .uid=${this.widget.uid}
-            .errors=${e.errors}
-            .touched=${e.touched}
-          ></gui-errors>` : u}
-    `;
-  }
-  _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, s) {
-    const { disabled: d, readonly: i } = this.adapter.templateData;
-    d || i || e.disabled || (this.adapter.valueChanged(e.value), this._focusedIndex = s, this._guiListRef && typeof this._guiListRef.focusItemAtIndex == "function" && this._guiListRef.focusItemAtIndex(s));
-  }
-  _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([
-  p()
-], a.prototype, "_range");
-r([
-  p()
-], a.prototype, "_listItems");
-r([
-  p()
-], a.prototype, "_focusedIndex");
-r([
-  R("gui-list")
-], a.prototype, "_guiListRef");
-D("gui-list-input", a);
-export {
-  a as ListElement
-};

package/multi-list.element-CNVHVkj0.js

@@ -1,161 +0,0 @@
-import { InputWidgetAdapter as $, formContext as v, inputContext as I } from "@golemui/lit";
-import { consume as y, provide as x } from "@lit/context";
-import { LitElement as C, nothing as u, html as h } from "lit";
-import { property as R, state as c, 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";
-import { live as q } from "lit/directives/live.js";
-var A = Object.defineProperty, d = (o, e, s, a) => {
-  for (var t = void 0, l = o.length - 1, i; l >= 0; l--)
-    (i = o[l]) && (t = i(e, s, t) || t);
-  return t && A(e, s, t), t;
-};
-class r extends C {
-  constructor() {
-    super(...arguments), this.adapter = new $(), this.subscriptions = [], this._range = { start: 0, end: 10 }, this._listItems = [], this._focusedIndex = -1;
-  }
-  createRenderRoot() {
-    return this;
-  }
-  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, s = e.touched && e.errors && e.errors.length > 0, a = this._listItems.slice(this._range.start, this._range.end), t = 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}
-        .disabled=${e.disabled}
-        .readOnly=${e.readonly}
-        .native=${!1}
-      ></gui-label>
-
-      <div class="gui-widget">
-        <gui-multi-list
-          .uid=${this.widget.uid}
-          .values=${q(t)}
-          .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}
-          @gui-blur=${() => this.adapter.onBlur()}
-          @gui-item-toggle=${this._valueChanged}
-        >
-          ${a.map((i, f) => {
-      const n = this._range.start + f, p = t.includes(i.value), _ = this._focusedIndex === n, g = !!e.disabled || !!i.disabled, m = e.labelField ?? "label", b = i.template !== null && typeof i.template == "object" && m && !e.itemRenderer ? i.template[m] : i.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=${p ? "true" : "false"}
-                aria-disabled=${g ? "true" : "false"}
-                @click=${() => this._onClickItem(i, n)}
-              >
-                ${l({
-        template: b,
-        value: i.value,
-        index: n,
-        selected: p,
-        disabled: g,
-        focused: _
-      })}
-              </div>
-            `;
-    })}
-        </gui-multi-list>
-      </div>
-
-      ${s ? 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 s = this.adapter.templateData;
-    if (s.disabled || s.readonly) return;
-    const a = this._currentValues();
-    if (a.includes(e)) {
-      this.adapter.valueChanged(a.filter((t) => t !== e));
-      return;
-    }
-    this.adapter.valueChanged([...a, 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, s) {
-    const { disabled: a, readonly: t } = this.adapter.templateData;
-    a || t || e.disabled || (this._toggleValue(e.value), this._focusedIndex = s, this._guiListRef && typeof this._guiListRef.focusItemAtIndex == "function" && this._guiListRef.focusItemAtIndex(s));
-  }
-  _valueChanged(e) {
-    this.adapter.templateData.readonly || this._toggleValue(e.detail.value);
-  }
-}
-d([
-  y({ context: v }),
-  R({ attribute: !1 })
-], r.prototype, "formContext");
-d([
-  x({ context: I })
-], r.prototype, "adapter");
-d([
-  c()
-], r.prototype, "_range");
-d([
-  c()
-], r.prototype, "_listItems");
-d([
-  c()
-], r.prototype, "_focusedIndex");
-d([
-  w("gui-multi-list")
-], r.prototype, "_guiListRef");
-k("gui-multi-list-input", r);
-export {
-  r as MultiListElement
-};