@golemui/gui-lit 1.3.0 → 1.4.0-rc.0

package/repeater.element-DGEbwvhY.js

@@ -1,138 +0,0 @@
-import { getItemKey as c } from "@golemui/gui-shared/internals";
-import { InputWidgetAdapter as l, formContext as h, inputContext as m } from "@golemui/lit";
-import { consume as g, provide as b } from "@lit/context";
-import { LitElement as f, nothing as i, html as a } from "lit";
-import { repeat as $ } from "lit-html/directives/repeat.js";
-import { property as v, state as _, query as I } from "lit/decorators.js";
-import { safeDefine as C } from "@golemui/lit/internals";
-import "rxjs";
-import "@golemui/gui-components/label";
-import "@golemui/gui-components/errors";
-var w = Object.defineProperty, n = (d, e, r, o) => {
-  for (var t = void 0, u = d.length - 1, p; u >= 0; u--)
-    (p = d[u]) && (t = p(e, r, t) || t);
-  return t && w(e, r, t), t;
-};
-let y = 0;
-const x = () => y++;
-class s extends f {
-  constructor() {
-    super(...arguments), this.adapter = new l(), this.isFocused = !1, this.subscriptions = [];
-  }
-  createRenderRoot() {
-    return this;
-  }
-  updated(e) {
-    super.updated(e);
-    const r = this.adapter.templateData.size;
-    r ? this.style.flex = String(r) : this.style.removeProperty("flex");
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.classList.add("gui-repeater", "gui-field"), this.adapter.context = this.formContext, this.adapter.init(this.widget), this.subscriptions.push(
-      this.adapter.templateDataChanged$.subscribe(() => this.requestUpdate())
-    );
-  }
-  onFocusIn(e) {
-    e.stopPropagation(), this.isFocused = !0;
-  }
-  onFocusOut(e) {
-    e.stopPropagation(), this.adapter.onBlur(), this.isFocused = !1;
-  }
-  render() {
-    const e = this.adapter.templateData, r = e.touched && e.errors && e.errors.length > 0;
-    return a`
-      <div
-        id=${this.widget.uid}
-        class=${`gui-repeater__main-card gui-repeater__card ${this.isFocused ? "gui-repeater__card--focused" : ""}`}
-        @focusin=${this.onFocusIn}
-        @focusout=${this.onFocusOut}
-      >
-        <gui-label
-          .targetElement=${[this._repeaterRef]}
-          .uid=${this.widget.uid}
-          .label=${e.label}
-          .errors=${e.errors}
-          .touched=${e.touched}
-          .required=${e.validator?.required}
-          .native=${!1}
-        ></gui-label>
-        ${e.value ? $(
-      e.value,
-      (o) => c(o, x),
-      (o, t) => a`
-                <div class="gui-repeater__card">
-                  <div class="gui-repeater__card-header">
-                    ${e.title ? a`<span class="gui-repeater__card-title"
-                          >${e.title} ${t + 1}</span
-                        >` : i}
-                    <button
-                      type="button"
-                      tabindex="0"
-                      class="gui-button gui-button--sm gui-repeater__remove-btn"
-                      @click=${() => this.removeItem(t)}
-                    >
-                      ${e.removeButtonIcon ? a`<span
-                            class="gui-widget-icon gui-button-icon ${e.removeButtonIcon}"
-                            data-icon=${e.removeButtonIcon}
-                          ></span>` : i}
-                      ${e.removeLabel ?? "Remove"}
-                    </button>
-                  </div>
-                  <gui-repeater-widget
-                    .repeaterIndex=${t}
-                    .widget=${e.template}
-                  ></gui-repeater-widget>
-                </div>
-              `
-    ) : i}
-
-        <button
-          type="button"
-          tabindex="0"
-          class="gui-button gui-repeater__add-btn"
-          @click=${() => this.addItem()}
-          ?disabled=${!!(e.limit && e.limit === e.value?.length)}
-        >
-          ${e.addButtonIcon ? a`<span
-                class="gui-widget-icon gui-button-icon ${e.addButtonIcon}"
-                data-icon=${e.addButtonIcon}
-              ></span>` : i}
-          ${e.addLabel ?? "Add"}
-        </button>
-      </div>
-      ${r ? a`<gui-errors
-            .uid=${this.widget.uid}
-            .errors=${e.errors}
-            .touched=${e.touched}
-          ></gui-errors>` : i}
-    `;
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this.adapter.destroy(), this.subscriptions.forEach((e) => e.unsubscribe());
-  }
-  addItem() {
-    const e = [...this.adapter.templateData.value ?? [], {}];
-    this.adapter.valueChanged(e), this.requestUpdate();
-  }
-  removeItem(e) {
-    const r = (this.adapter.templateData.value ?? []).filter((o, t) => e !== t);
-    "structuredClone" in window ? this.adapter.valueChanged(structuredClone(r)) : this.adapter.valueChanged(JSON.parse(JSON.stringify(r))), this.requestUpdate();
-  }
-}
-n([
-  g({ context: h }),
-  v({ attribute: !1 })
-], s.prototype, "formContext");
-n([
-  b({ context: m })
-], s.prototype, "adapter");
-n([
-  _()
-], s.prototype, "isFocused");
-n([
-  I(".gui-repeater__main-card")
-], s.prototype, "_repeaterRef");
-C("gui-repeater-input", s);
-export {
-  s as RepeaterElement
-};

package/tabs.element-BYDNF_pm.js

@@ -1,161 +0,0 @@
-import { LayoutWidgetAdapter as f, formContext as m, layoutContext as v } from "@golemui/lit";
-import { createIntersectionObserver as c } from "@golemui/gui-components/internals";
-import { safeDefine as $ } from "@golemui/lit/internals";
-import { consume as y, provide as w } from "@lit/context";
-import { LitElement as T, html as d, nothing as _ } from "lit";
-import { repeat as p } from "lit-html/directives/repeat.js";
-import { query as h, state as b, queryAll as x, property as g } from "lit/decorators.js";
-import { classMap as u } from "lit/directives/class-map.js";
-import "rxjs";
-var k = Object.defineProperty, o = (l, s, e, i) => {
-  for (var t = void 0, n = l.length - 1, a; n >= 0; n--)
-    (a = l[n]) && (t = a(s, e, t) || t);
-  return t && k(s, e, t), t;
-};
-class r extends T {
-  constructor() {
-    super(...arguments), this.activeTab = "", this.adapter = new f(), this.subscriptions = [];
-  }
-  createRenderRoot() {
-    return this;
-  }
-  updated(s) {
-    super.updated(s);
-    const e = this.adapter.templateData.size;
-    e ? this.style.flex = String(e) : this.style.removeProperty("flex");
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.classList.add("gui-tabs", "gui-field");
-    const s = this.widget.props;
-    this.adapter.context = this.formContext, this.adapter.init(this.widget), this.activeTab = s.defaultOpen ?? s.tabs[0].uid, this.subscriptions.push(
-      this.adapter.templateDataChanged$.subscribe(() => {
-        this.requestUpdate();
-      })
-    );
-  }
-  firstUpdated(s) {
-    this.startObserver = c(
-      this.startSentinel,
-      (t) => this.isStartVisible = t
-    ), this.endObserver = c(
-      this.endSentinel,
-      (t) => this.isEndVisible = t
-    );
-    const i = this.widget.props.tabs.findIndex((t) => t.uid === this.activeTab);
-    this.tabButtons[i].scrollIntoView({ block: "nearest", inline: "nearest" });
-  }
-  render() {
-    if (!this.adapter.templateData) return d``;
-    const s = this.widget.children.filter(
-      (i) => i.uid === this.activeTab || this.adapter.templateData.renderMode !== "activeOnly"
-    ), e = {
-      "gui-widget": !0,
-      "gui-widget--horizontal": !0,
-      "gui-tabs--start-shadow": !this.isStartVisible,
-      "gui-tabs--end-shadow": !this.isEndVisible
-    };
-    return d`<nav class=${u(e)} id=${this.widget.uid}>
-        <ul role="tablist">
-          <li role="presentation" id="start-sentinel" class="gui-sentinel"></li>
-          ${this.adapter.templateData.tabs ? p(
-      this.adapter.templateData.tabs,
-      (i, t) => d`
-                  <li role="presentation">
-                    <button
-                      type="button"
-                      role="tab"
-                      tabindex=${i.uid === this.activeTab ? "0" : "-1"}
-                      data-cy=${`tab_${this.widget.uid}_${t}`}
-                      id=${`tab_${this.widget.uid}_${t}`}
-                      aria-controls=${`tabpanel_${this.widget.uid}_${t}`}
-                      aria-selected=${i.uid === this.activeTab ? "true" : "false"}
-                      class=${u({ active: i.uid === this.activeTab })}
-                      @click=${() => this.onClickTab(i.uid)}
-                      @keydown=${this.onKeyDown}
-                      @focus=${(n) => n.target.scrollIntoView({
-        block: "nearest",
-        inline: "nearest"
-      })}
-                    >
-                      ${i.label}
-                    </button>
-                  </li>
-                `
-    ) : _}
-          <li role="presentation" id="end-sentinel" class="gui-sentinel gui-sentinel__end"></li>
-        </ul>
-      </nav>
-      ${p(
-      s,
-      (i) => i?.uid,
-      (i, t) => d`<section
-            role="tabpanel"
-            tabindex="0"
-            data-cy=${`tabpanel_${this.widget.uid}_${t}`}
-            id=${`tabpanel_${this.widget.uid}_${t}`}
-            ?hidden=${i.uid !== this.activeTab && this.adapter.templateData.renderMode !== "activeOnly"}
-            aria-labelledby=${`tab_${this.widget.uid}_${t}`}
-          >
-            <gui-widget .widget=${i}></gui-widget>
-          </section>`
-    )}`;
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this.adapter.destroy(), this.subscriptions.forEach((s) => s.unsubscribe()), this.startObserver?.disconnect(), this.endObserver?.disconnect();
-  }
-  onClickTab(s) {
-    this.activeTab = s, this.adapter.change(s), this.requestUpdate();
-  }
-  onKeyDown(s) {
-    const e = this.widget.props.tabs, i = e.findIndex((a) => a.uid === this.activeTab), t = Array.from(this.tabButtons), n = window.getComputedStyle(this).direction === "rtl";
-    switch (s.key) {
-      case "ArrowLeft": {
-        const a = i + (n ? 1 : -1);
-        a >= 0 && a < e.length && (this.activeTab = e[a].uid, t[a].focus());
-        break;
-      }
-      case "ArrowRight": {
-        const a = i + (n ? -1 : 1);
-        a >= 0 && a < e.length && (this.activeTab = e[a].uid, t[a].focus());
-        break;
-      }
-      case "Home":
-        this.activeTab = e[0].uid, t[0].focus();
-        break;
-      case "End":
-        this.activeTab = e[e.length - 1].uid, t[e.length - 1].focus();
-        break;
-      default:
-        return;
-    }
-  }
-}
-o([
-  h("#start-sentinel")
-], r.prototype, "startSentinel");
-o([
-  h("#end-sentinel")
-], r.prototype, "endSentinel");
-o([
-  b()
-], r.prototype, "isStartVisible");
-o([
-  b()
-], r.prototype, "isEndVisible");
-o([
-  x('button[role="tab"]')
-], r.prototype, "tabButtons");
-o([
-  g({ type: String })
-], r.prototype, "activeTab");
-o([
-  y({ context: m }),
-  g({ attribute: !1 })
-], r.prototype, "formContext");
-o([
-  w({ context: v })
-], r.prototype, "adapter");
-$("gui-tabs-layout", r);
-export {
-  r as TabsElement
-};