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

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/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
-};