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

package/tabs.element-BiVaQlvt.js

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