@golemui/gui-lit 0.12.1 → 0.13.0

package/list-CtFsv7GB.js

@@ -0,0 +1,284 @@
+import { html as c, LitElement as p, nothing as h } from "lit";
+import { classMap as m } from "lit/directives/class-map.js";
+import "@golemui/core";
+import { property as a, state as d, query as f, customElement as v } from "lit/decorators.js";
+import "@golemui/gui-shared";
+const T = (e) => {
+  const t = {
+    "gui-list__item": !0,
+    "gui-list__item-selected": !!e.selected,
+    "gui-list__item-focused": !!e.focused,
+    "gui-list__item-disabled": !!e.disabled
+  };
+  return c`
+    <div
+      role="option"
+      class=${m(t)}
+      aria-selected=${e.selected ? "true" : "false"}
+      aria-disabled=${e.disabled ? "true" : "false"}
+    >
+      ${e.template}
+    </div>
+  `;
+}, g = (e) => e !== null && typeof e == "object" && Object.prototype.hasOwnProperty.call(e, "template") && Object.prototype.hasOwnProperty.call(e, "value");
+function b(e) {
+  const t = typeof e;
+  return t === "string" || t === "number";
+}
+const y = (e, { valueField: t }) => {
+  if (e === null || typeof e != "object")
+    return !1;
+  const i = e, o = t ?? "value";
+  return !!Object.prototype.hasOwnProperty.call(i, o);
+};
+function w(e, { valueField: t }) {
+  if (e === null || typeof e != "object")
+    throw new Error("Provided value is not an object");
+  const i = e, o = t ?? "value", s = Object.prototype.hasOwnProperty.call(i, o) ? o : void 0;
+  if (!s)
+    throw new Error("No valueField exists on the object");
+  return (n) => {
+    if (n === null || typeof n != "object")
+      throw new Error("Item is not an object");
+    return {
+      template: n,
+      value: s ? n[s] : ""
+    };
+  };
+}
+const I = (e, t) => {
+  if (Array.isArray(e) && e.length > 0 && !g(e[0])) {
+    if (b(e[0]))
+      return e.map((i) => ({
+        template: i,
+        value: i
+      }));
+    if (y(e[0], t)) {
+      const i = w(e[0], t);
+      return e.map(i);
+    } else
+      throw new Error("Invalid list item shape");
+  }
+  return e;
+};
+var _ = Object.defineProperty, x = Object.getOwnPropertyDescriptor, r = (e, t, i, o) => {
+  for (var s = o > 1 ? void 0 : o ? x(t, i) : t, n = e.length - 1, u; n >= 0; n--)
+    (u = e[n]) && (s = (o ? u(t, i, s) : u(s)) || s);
+  return o && s && _(t, i, s), s;
+};
+let l = class extends p {
+  constructor() {
+    super(...arguments), this.uid = void 0, this.touched = !1, this.required = !1, this.disabled = !1, this.readOnly = !1, this.value = void 0, this.valueField = void 0, this.label = void 0, this.hint = void 0, this.items = [], this.itemHeight = void 0, this.height = void 0, this._items = [], this._scrollTop = 0, this._viewportHeight = 0, this._focusedIndex = -1, this.buffer = 5;
+  }
+  willUpdate(e) {
+    super.willUpdate(e), e.has("items") && this.updateItems(), (e.has("items") || e.has("_scrollTop") || e.has("height")) && this.emitRangeChange();
+  }
+  firstUpdated() {
+    this.measureViewport(), new ResizeObserver(() => this.measureViewport()).observe(this.viewportElement);
+  }
+  render() {
+    const e = this.height ?? 300, t = this.itemHeight ?? 40, i = (this.items?.length ?? 0) * t, { offsetY: o } = this.calculateRange(), s = this._focusedIndex >= 0 ? `${this.uid}-item-${this._focusedIndex}` : void 0;
+    return c`
+      <div
+        role="listbox"
+        id=${this.uid}
+        tabindex=${this.disabled ? -1 : 0}
+        class="gui-list__scroll-viewport"
+        style="max-height: ${e}px; overflow-y: auto; position: relative; display: block;"
+        @scroll="${this.onScroll}"
+        @keydown="${this.onKeyDown}"
+        @focus="${this.onFocus}"
+        @focusout="${this.onFocusOut}"
+        aria-required=${this.required ? "true" : h}
+        aria-disabled=${this.disabled || this.readOnly ? "true" : h}
+        aria-activedescendant="${s ?? h}"
+        aria-label=${this.label ?? h}
+        aria-description=${this.hint ?? h}
+      >
+        <div
+          class="gui-list__spacer"
+          style="height: ${i}px; width: 1px; opacity: 0; pointer-events: none;"
+        ></div>
+
+        <div
+          class="gui-list__content"
+          style="transform: translateY(${o}px); position: absolute; top: 0; left: 0; width: 100%;"
+        >
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+  focus(e) {
+    this.viewportElement ? this.viewportElement.focus(e) : super.focus(e);
+  }
+  focusItemAtIndex(e) {
+    this._focusedIndex = e;
+  }
+  scrollToSelectedIndex() {
+    const e = this.items.findIndex((t) => (this.valueField ? t[this.valueField] : t) === this.value);
+    this.scrollToIndex(e);
+  }
+  onKeyDown(e) {
+    if (this.disabled || this.readOnly) return;
+    const t = this.itemHeight ?? 40, i = Math.ceil(this._viewportHeight / t), o = this.items.length - 1;
+    let s = !1;
+    switch (e.key) {
+      case "ArrowDown":
+        this.setFocusedIndex(Math.min(this._focusedIndex + 1, o)), s = !0;
+        break;
+      case "ArrowUp":
+        this.setFocusedIndex(Math.max(this._focusedIndex - 1, 0)), s = !0;
+        break;
+      case "PageDown":
+        this.setFocusedIndex(Math.min(this._focusedIndex + i, o)), s = !0;
+        break;
+      case "PageUp":
+        this.setFocusedIndex(Math.max(this._focusedIndex - i, 0)), s = !0;
+        break;
+      case "Home":
+        this.setFocusedIndex(0), s = !0;
+        break;
+      case "End":
+        this.setFocusedIndex(o), s = !0;
+        break;
+      case "Enter":
+      case " ": {
+        const n = this.items[this._focusedIndex], u = n != null;
+        this._focusedIndex >= 0 && u && this.selectItem(this.items[this._focusedIndex]), s = !0;
+        break;
+      }
+    }
+    s && e.preventDefault();
+  }
+  onFocus() {
+    if (!this.value || !this.items.length) return;
+    const e = this.items.findIndex((t) => (this.valueField ? t[this.valueField] : t) === this.value);
+    this._focusedIndex = e, this.scrollToIndex(e), this.dispatchEvent(
+      new CustomEvent("gui-focus-change", {
+        detail: { index: e },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  onFocusOut(e) {
+    e.relatedTarget && this.contains(e.relatedTarget) || (this._focusedIndex = -1, this.dispatchEvent(
+      new CustomEvent("gui-focus-change", {
+        detail: { index: -1 },
+        bubbles: !0,
+        composed: !0
+      })
+    ), this.dispatchEvent(new CustomEvent("blur", { bubbles: !0, composed: !0 })));
+  }
+  scrollToIndex(e) {
+    const t = this.itemHeight ?? 40, i = this.height ?? 300, o = e * t, s = o + t, n = this.viewportElement.scrollTop, u = n + i;
+    o < n ? this.viewportElement.scrollTop = o : s > u && (this.viewportElement.scrollTop = s - i);
+  }
+  selectItem(e) {
+    this.dispatchEvent(
+      new CustomEvent("change", {
+        detail: { value: this.valueField ? e[this.valueField] : e },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  setFocusedIndex(e) {
+    e < 0 || e >= this.items.length || (this._focusedIndex = e, this.scrollToIndex(e), this.dispatchEvent(
+      new CustomEvent("gui-focus-change", {
+        detail: { index: e },
+        bubbles: !0,
+        composed: !0
+      })
+    ));
+  }
+  updateItems() {
+    this._items = I(this.items, { valueField: this.valueField }), this.dispatchEvent(
+      new CustomEvent("gui-update-items", {
+        detail: this._items,
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  emitRangeChange() {
+    const { startIndex: e, endIndex: t } = this.calculateRange();
+    this.dispatchEvent(
+      new CustomEvent("gui-range-change", {
+        detail: { startIndex: e, endIndex: t },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  measureViewport() {
+    this.viewportElement && (this._viewportHeight = this.viewportElement.offsetHeight, this.emitRangeChange());
+  }
+  onScroll(e) {
+    const t = e.target;
+    this._scrollTop = t.scrollTop;
+  }
+  calculateRange() {
+    const e = this.itemHeight ?? 40, t = this.items?.length ?? 0, i = Math.ceil(this._viewportHeight / e), o = Math.floor(this._scrollTop / e), s = Math.max(0, o - this.buffer), n = Math.min(t, o + i + this.buffer), u = s * e;
+    return { startIndex: s, endIndex: n, offsetY: u };
+  }
+};
+r([
+  a({ type: String })
+], l.prototype, "uid", 2);
+r([
+  a({ type: Boolean })
+], l.prototype, "touched", 2);
+r([
+  a({ type: Boolean })
+], l.prototype, "required", 2);
+r([
+  a({ type: Boolean })
+], l.prototype, "disabled", 2);
+r([
+  a({ type: Boolean, attribute: "readonly" })
+], l.prototype, "readOnly", 2);
+r([
+  a({ type: String })
+], l.prototype, "value", 2);
+r([
+  a({ type: String })
+], l.prototype, "valueField", 2);
+r([
+  a({ type: String })
+], l.prototype, "label", 2);
+r([
+  a({ type: String })
+], l.prototype, "hint", 2);
+r([
+  a({ type: Array })
+], l.prototype, "items", 2);
+r([
+  a({ type: Number })
+], l.prototype, "itemHeight", 2);
+r([
+  a({ type: Number })
+], l.prototype, "height", 2);
+r([
+  d()
+], l.prototype, "_items", 2);
+r([
+  d()
+], l.prototype, "_scrollTop", 2);
+r([
+  d()
+], l.prototype, "_viewportHeight", 2);
+r([
+  d()
+], l.prototype, "_focusedIndex", 2);
+r([
+  f(".gui-list__scroll-viewport")
+], l.prototype, "viewportElement", 2);
+l = r([
+  v("gui-list")
+], l);
+typeof customElements < "u" && !customElements.get("gui-list") && customElements.define("gui-list", l);
+export {
+  T as d
+};

package/{list.element-DIIgN_Ww.js → list.element-G8RNRZXU.js}

@@ -1,16 +1,19 @@
-import * as h from "@golemui/lit";
-import { consume as _, provide as b } from "@lit/context";
-import { LitElement as $, nothing as o, html as u } from "lit";
-import { property as v, state as c, query as I, customElement as x } from "lit/decorators.js";
-import { d as y } from "./default-list-item-renderer-DNVEjKSX.js";
-var C = Object.defineProperty, R = Object.getOwnPropertyDescriptor, r = (e, i, l, d) => {
-  for (var t = d > 1 ? void 0 : d ? R(i, l) : i, n = e.length - 1, s; n >= 0; n--)
-    (s = e[n]) && (t = (d ? s(i, l, t) : s(t)) || t);
-  return d && t && C(i, l, t), t;
+import { InputWidgetAdapter as f, formContext as _, inputContext as b } from "@golemui/lit";
+import "@golemui/gui-shared";
+import { consume as $, provide as v } from "@lit/context";
+import { LitElement as I, nothing as n, html as u } from "lit";
+import { property as x, state as h, query as y, customElement as C } from "lit/decorators.js";
+import "rxjs";
+import { d as R } from "./list-CtFsv7GB.js";
+import "./errors-QjKhr6mA.js";
+var w = Object.defineProperty, D = Object.getOwnPropertyDescriptor, r = (e, i, l, d) => {
+  for (var t = d > 1 ? void 0 : d ? D(i, l) : i, o = e.length - 1, s; o >= 0; o--)
+    (s = e[o]) && (t = (d ? s(i, l, t) : s(t)) || t);
+  return d && t && w(i, l, t), t;
 };
-let a = class extends $ {
+let a = class extends I {
   constructor() {
-    super(...arguments), this.adapter = new h.InputWidgetAdapter(), this.subscriptions = [], this._range = { start: 0, end: 10 }, this._listItems = [], this._focusedIndex = -1;
+    super(...arguments), this.adapter = new f(), this.subscriptions = [], this._range = { start: 0, end: 10 }, this._listItems = [], this._focusedIndex = -1;
   }
   createRenderRoot() {
     return this;
@@ -34,7 +37,7 @@ let a = class extends $ {
   render() {
     const e = this.adapter.templateData, i = e.touched && e.errors && e.errors.length > 0, l = this._listItems.slice(this._range.start, this._range.end), d = this.adapter.getItemRenderer(
       e.itemRenderer,
-      y
+      R
     );
     return u`
       <gui-label
@@ -60,16 +63,16 @@ let a = class extends $ {
           ?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}
+          aria-labelledby=${e.label ? `${this.widget.uid}_label` : n}
+          aria-describedby=${e.hint ? `${this.widget.uid}_hint` : n}
           @gui-range-change=${this._onRangeChange}
           @gui-update-items=${this._onUpdateItems}
           @gui-focus-change=${this._onFocusChange}
           @blur=${() => this.adapter.onBlur()}
           @change=${this._valueChanged}
         >
-          ${l.map((t, n) => {
-      const s = this._range.start + n, p = e.value === t.value, m = this._focusedIndex === s, g = e.labelField ?? "label", f = t.template !== null && typeof t.template == "object" && g && !e.itemRenderer ? t.template[g] : t.template;
+          ${l.map((t, o) => {
+      const s = this._range.start + o, p = e.value === t.value, g = this._focusedIndex === s, c = e.labelField ?? "label", m = t.template !== null && typeof t.template == "object" && c && !e.itemRenderer ? t.template[c] : t.template;
       return u`
               <div
                 role="option"
@@ -82,12 +85,12 @@ let a = class extends $ {
                 @click=${() => this._onClickItem(t, s)}
               >
                 ${d({
-        template: f,
+        template: m,
         value: t.value,
         index: s,
         selected: p,
         disabled: !!e.disabled,
-        focused: m
+        focused: g
       })}
               </div>
             `;
@@ -99,7 +102,7 @@ let a = class extends $ {
             .uid=${this.widget.uid}
             .errors=${e.errors}
             .touched=${e.touched}
-          ></gui-errors>` : o}
+          ></gui-errors>` : n}
     `;
   }
   _onRangeChange(e) {
@@ -119,26 +122,26 @@ let a = class extends $ {
   }
 };
 r([
-  _({ context: h.formContext }),
-  v({ attribute: !1 })
+  $({ context: _ }),
+  x({ attribute: !1 })
 ], a.prototype, "formContext", 2);
 r([
-  b({ context: h.inputContext })
+  v({ context: b })
 ], a.prototype, "adapter", 2);
 r([
-  c()
+  h()
 ], a.prototype, "_range", 2);
 r([
-  c()
+  h()
 ], a.prototype, "_listItems", 2);
 r([
-  c()
+  h()
 ], a.prototype, "_focusedIndex", 2);
 r([
-  I("gui-list")
+  y("gui-list")
 ], a.prototype, "_guiListRef", 2);
 a = r([
-  x("gui-list-input")
+  C("gui-list-input")
 ], a);
 export {
   a as ListElement

package/markdown-text-X-BRJT6K.js

@@ -0,0 +1,30 @@
+import { LitElement as u, html as c } from "lit";
+import { property as d, customElement as f } from "lit/decorators.js";
+import { unsafeHTML as a } from "lit/directives/unsafe-html.js";
+import "@golemui/gui-shared";
+var l = Object.defineProperty, v = Object.getOwnPropertyDescriptor, i = (p, r, o, n) => {
+  for (var e = n > 1 ? void 0 : n ? v(r, o) : r, s = p.length - 1, m; s >= 0; s--)
+    (m = p[s]) && (e = (n ? m(r, o, e) : m(e)) || e);
+  return n && e && l(r, o, e), e;
+};
+let t = class extends u {
+  constructor() {
+    super(...arguments), this.md = void 0, this.dependencies = void 0;
+  }
+  createRenderRoot() {
+    return this;
+  }
+  render() {
+    return c`${a(this.dependencies?.markdown?.parse(this.md ?? ""))}`;
+  }
+};
+i([
+  d({ type: String })
+], t.prototype, "md", 2);
+i([
+  d({ type: Object })
+], t.prototype, "dependencies", 2);
+t = i([
+  f("gui-markdown-text")
+], t);
+typeof customElements < "u" && !customElements.get("gui-markdown-text") && customElements.define("gui-markdown-text", t);

package/{markdown-text.element-DY7b-dU5.js → markdown-text.element-C_1OqrGa.js}

@@ -1,21 +1,24 @@
-import { LitElement as c, html as l } from "lit";
-import { property as u, customElement as m } from "lit/decorators.js";
-import { consume as h, provide as f } from "@lit/context";
-import * as p from "@golemui/lit";
-var x = Object.defineProperty, b = Object.getOwnPropertyDescriptor, n = (s, t, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? b(t, a) : t, o = s.length - 1, d; o >= 0; o--)
-    (d = s[o]) && (e = (r ? d(t, a, e) : d(e)) || e);
-  return r && e && x(t, a, e), e;
+import { LitElement as n, html as c } from "lit";
+import { property as l, customElement as m } from "lit/decorators.js";
+import { consume as u, provide as h } from "@lit/context";
+import { DisplayWidgetAdapter as f, formContext as x, displayWidgetContext as b } from "@golemui/lit";
+import "@golemui/gui-shared";
+import "./markdown-text-X-BRJT6K.js";
+import "rxjs";
+var g = Object.defineProperty, w = Object.getOwnPropertyDescriptor, d = (r, t, a, s) => {
+  for (var e = s > 1 ? void 0 : s ? w(t, a) : t, o = r.length - 1, p; o >= 0; o--)
+    (p = r[o]) && (e = (s ? p(t, a, e) : p(e)) || e);
+  return s && e && g(t, a, e), e;
 };
-let i = class extends c {
+let i = class extends n {
   constructor() {
-    super(...arguments), this.adapter = new p.DisplayWidgetAdapter(), this.subscriptions = [];
+    super(...arguments), this.adapter = new f(), this.subscriptions = [];
   }
   createRenderRoot() {
     return this;
   }
-  updated(s) {
-    super.updated(s);
+  updated(r) {
+    super.updated(r);
     const t = this.adapter.templateData.size;
     t ? this.style.flex = String(t) : this.style.removeProperty("flex");
   }
@@ -25,7 +28,7 @@ let i = class extends c {
     );
   }
   render() {
-    return l`
+    return c`
       <div class="gui-widget" id=${this.widget.uid}>
         <gui-markdown-text
           .md=${this.adapter.templateData.md}
@@ -35,17 +38,17 @@ let i = class extends c {
     `;
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this.adapter.destroy(), this.subscriptions.forEach((s) => s.unsubscribe());
+    super.disconnectedCallback(), this.adapter.destroy(), this.subscriptions.forEach((r) => r.unsubscribe());
   }
 };
-n([
-  h({ context: p.formContext }),
-  u({ attribute: !1 })
+d([
+  u({ context: x }),
+  l({ attribute: !1 })
 ], i.prototype, "formContext", 2);
-n([
-  f({ context: p.displayWidgetContext })
+d([
+  h({ context: b })
 ], i.prototype, "adapter", 2);
-i = n([
+i = d([
   m("gui-markdown-text-display")
 ], i);
 export {