@golemui/gui-lit 1.3.0 → 1.4.0

package/tabs.element-BiVaQlvt.js

@@ -0,0 +1,171 @@
+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
+};

package/{tags.element-BSN3i9Gx.js → tags.element-CGvxhMmX.js}

@@ -1,14 +1,14 @@
 import { InputWidgetAdapter as d, formContext as o, inputContext as n } from "@golemui/lit";
 import "@golemui/gui-components/tags";
-import { consume as h, provide as u } from "@lit/context";
+import { consume as u, provide as h } from "@lit/context";
 import { LitElement as m, html as c } from "lit";
-import { property as f } from "lit/decorators.js";
-import { safeDefine as D } from "@golemui/lit/internals";
+import { property as b } from "lit/decorators.js";
+import { unsubscribeAll as f, safeDefine as g } from "@golemui/lit/internals";
 import "rxjs";
-var b = Object.defineProperty, l = (r, t, e, g) => {
+var D = Object.defineProperty, l = (r, e, t, v) => {
   for (var a = void 0, i = r.length - 1, p; i >= 0; i--)
-    (p = r[i]) && (a = p(t, e, a) || a);
-  return a && b(t, e, a), a;
+    (p = r[i]) && (a = p(e, t, a) || a);
+  return a && D(e, t, a), a;
 };
 class s extends m {
   constructor() {
@@ -17,10 +17,10 @@ class s extends m {
   createRenderRoot() {
     return this;
   }
-  updated(t) {
-    super.updated(t);
-    const e = this.adapter.templateData.size;
-    e ? this.style.flex = String(e) : this.style.removeProperty("flex");
+  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-tags", "gui-field"), this.adapter.context = this.formContext, this.adapter.init(this.widget), this.subscriptions.push(
@@ -44,7 +44,6 @@ class s extends m {
         .separators=${this.adapter.templateData.separators}
         .allowDuplicates=${this.adapter.templateData.allowDuplicates ?? !0}
         .trim=${this.adapter.templateData.trim ?? !0}
-        .limit=${this.adapter.templateData.limit}
         .removeAriaLabel=${this.adapter.templateData.removeAriaLabel}
         .removeIcon=${this.adapter.templateData.removeIcon}
         @change=${this.valueChanged}
@@ -52,22 +51,22 @@ class s extends m {
       ></gui-tags>
     `;
   }
-  valueChanged(t) {
-    const e = t.detail.value;
-    this.adapter.valueChanged(e);
+  valueChanged(e) {
+    const t = e.detail.value;
+    this.adapter.valueChanged(t);
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this.adapter.destroy(), this.subscriptions.forEach((t) => t.unsubscribe());
+    super.disconnectedCallback(), this.adapter.destroy(), f(this.subscriptions);
   }
 }
 l([
-  h({ context: o }),
-  f({ attribute: !1 })
+  u({ context: o }),
+  b({ attribute: !1 })
 ], s.prototype, "formContext");
 l([
-  u({ context: n })
+  h({ context: n })
 ], s.prototype, "adapter");
-D("gui-tags-input", s);
+g("gui-tags-input", s);
 export {
   s as TagsElement
 };

package/{textarea.element-Dl1ZEOqO.js → textarea.element-E2ntRBtE.js}

@@ -3,12 +3,12 @@ import "@golemui/gui-components/textarea";
 import { consume as u, provide as h } from "@lit/context";
 import { LitElement as m, html as c } from "lit";
 import { property as f } from "lit/decorators.js";
-import { safeDefine as b } from "@golemui/lit/internals";
+import { unsubscribeAll as b, safeDefine as g } from "@golemui/lit/internals";
 import "rxjs";
-var g = Object.defineProperty, d = (r, t, e, x) => {
+var x = Object.defineProperty, d = (r, e, t, $) => {
   for (var a = void 0, i = r.length - 1, p; i >= 0; i--)
-    (p = r[i]) && (a = p(t, e, a) || a);
-  return a && g(t, e, a), a;
+    (p = r[i]) && (a = p(e, t, a) || a);
+  return a && x(e, t, a), a;
 };
 class s extends m {
   constructor() {
@@ -17,10 +17,10 @@ class s extends m {
   createRenderRoot() {
     return this;
   }
-  updated(t) {
-    super.updated(t);
-    const e = this.adapter.templateData.size;
-    e ? this.style.flex = String(e) : this.style.removeProperty("flex");
+  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-textarea", "gui-field"), this.adapter.context = this.formContext, this.adapter.init(this.widget), this.subscriptions.push(
@@ -50,12 +50,12 @@ class s extends m {
       ></gui-textarea>
     `;
   }
-  valueChanged(t) {
-    const e = t.detail.value;
-    this.adapter.valueChanged(e);
+  valueChanged(e) {
+    const t = e.detail.value;
+    this.adapter.valueChanged(t);
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this.adapter.destroy(), this.subscriptions.forEach((t) => t.unsubscribe());
+    super.disconnectedCallback(), this.adapter.destroy(), b(this.subscriptions);
   }
 }
 d([
@@ -65,7 +65,7 @@ d([
 d([
   h({ context: n })
 ], s.prototype, "adapter");
-b("gui-textarea-input", s);
+g("gui-textarea-input", s);
 export {
   s as TextareaElement
 };

package/{textinput.element-C5Vbbkxq.js → textinput.element-0q5F5ol3.js}

@@ -1,26 +1,26 @@
-import { InputWidgetAdapter as o, formContext as l, inputContext as n } from "@golemui/lit";
+import { InputWidgetAdapter as l, formContext as o, inputContext as n } from "@golemui/lit";
 import "@golemui/gui-components/textinput";
 import { consume as u, provide as h } from "@lit/context";
 import { LitElement as c, html as m } from "lit";
 import { property as f } from "lit/decorators.js";
-import { safeDefine as b } from "@golemui/lit/internals";
+import { unsubscribeAll as b, safeDefine as x } from "@golemui/lit/internals";
 import "rxjs";
-var x = Object.defineProperty, d = (r, t, e, v) => {
+var v = Object.defineProperty, d = (r, e, t, $) => {
   for (var a = void 0, i = r.length - 1, p; i >= 0; i--)
-    (p = r[i]) && (a = p(t, e, a) || a);
-  return a && x(t, e, a), a;
+    (p = r[i]) && (a = p(e, t, a) || a);
+  return a && v(e, t, a), a;
 };
 class s extends c {
   constructor() {
-    super(...arguments), this.adapter = new o(), this.subscriptions = [];
+    super(...arguments), this.adapter = new l(), this.subscriptions = [];
   }
   createRenderRoot() {
     return this;
   }
-  updated(t) {
-    super.updated(t);
-    const e = this.adapter.templateData.size;
-    e ? this.style.flex = String(e) : this.style.removeProperty("flex");
+  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-textinput", "gui-field"), this.adapter.context = this.formContext, this.adapter.init(this.widget), this.subscriptions.push(
@@ -47,22 +47,22 @@ class s extends c {
       ></gui-textinput>
     `;
   }
-  valueChanged(t) {
-    const e = t.detail.value;
-    this.adapter.valueChanged(e);
+  valueChanged(e) {
+    const t = e.detail.value;
+    this.adapter.valueChanged(t);
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this.adapter.destroy(), this.subscriptions.forEach((t) => t.unsubscribe());
+    super.disconnectedCallback(), this.adapter.destroy(), b(this.subscriptions);
   }
 }
 d([
-  u({ context: l }),
+  u({ context: o }),
   f({ attribute: !1 })
 ], s.prototype, "formContext");
 d([
   h({ context: n })
 ], s.prototype, "adapter");
-b("gui-textinput-input", s);
+x("gui-textinput-input", s);
 export {
   s as TextinputElement
 };

package/{time-picker.element-Crmj9YDy.js → time-picker.element-BiLaLr_c.js}

@@ -3,12 +3,12 @@ import "@golemui/gui-components/time-picker";
 import { consume as p, provide as u } from "@lit/context";
 import { LitElement as h, html as c } from "lit";
 import { property as g } from "lit/decorators.js";
-import { safeDefine as b } from "@golemui/lit/internals";
+import { unsubscribeAll as b, safeDefine as $ } from "@golemui/lit/internals";
 import "rxjs";
-var $ = Object.defineProperty, n = (a, e, i, f) => {
+var f = Object.defineProperty, n = (a, e, i, v) => {
   for (var t = void 0, r = a.length - 1, o; r >= 0; r--)
     (o = a[r]) && (t = o(e, i, t) || t);
-  return t && $(e, i, t), t;
+  return t && f(e, i, t), t;
 };
 class s extends h {
   constructor() {
@@ -73,7 +73,7 @@ class s extends h {
     this.adapter.injectValidationIssues([e.detail.message]);
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this.adapter.destroy(), this.subscriptions.forEach((e) => e.unsubscribe());
+    super.disconnectedCallback(), this.adapter.destroy(), b(this.subscriptions);
   }
 }
 n([
@@ -83,7 +83,7 @@ n([
 n([
   u({ context: m })
 ], s.prototype, "adapter");
-b("gui-time-picker-input", s);
+$("gui-time-picker-input", s);
 export {
   s as TimePickerElement
 };

package/{time.element-DfSeAZp4.js → time.element-92goKRwJ.js}

@@ -1,18 +1,18 @@
 import { InputWidgetAdapter as l, formContext as o, inputContext as m } from "@golemui/lit";
 import { addIcon as n } from "@golemui/gui-components/internals";
-import { safeDefine as h } from "@golemui/lit/internals";
+import { unsubscribeAll as h, safeDefine as u } from "@golemui/lit/internals";
 import "@golemui/gui-components/time-input";
-import { consume as u, provide as c } from "@lit/context";
-import { LitElement as $, html as b } from "lit";
-import { property as g } from "lit/decorators.js";
+import { consume as c, provide as $ } from "@lit/context";
+import { LitElement as b, html as g } from "lit";
+import { property as D } from "lit/decorators.js";
 import "rxjs";
-import { classMap as D } from "lit/directives/class-map.js";
-var f = Object.defineProperty, d = (i, t, a, x) => {
+import { classMap as f } from "lit/directives/class-map.js";
+var x = Object.defineProperty, d = (i, t, a, v) => {
   for (var e = void 0, r = i.length - 1, p; r >= 0; r--)
     (p = i[r]) && (e = p(t, a, e) || e);
-  return e && f(t, a, e), e;
+  return e && x(t, a, e), e;
 };
-class s extends $ {
+class s extends b {
   constructor() {
     super(...arguments), this.adapter = new l(), this.subscriptions = [];
   }
@@ -32,9 +32,9 @@ class s extends $ {
   render() {
     super.render();
     const t = n("time", this.adapter.templateData);
-    return b`
+    return g`
       <gui-time
-        class=${D(t.widgetClasses)}
+        class=${f(t.widgetClasses)}
         .uid=${this.widget.uid}
         .label=${this.adapter.templateData.label}
         .hint=${this.adapter.templateData.hint}
@@ -69,17 +69,17 @@ class s extends $ {
     this.adapter.injectValidationIssues([t.detail.message]);
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this.adapter.destroy(), this.subscriptions.forEach((t) => t.unsubscribe());
+    super.disconnectedCallback(), this.adapter.destroy(), h(this.subscriptions);
   }
 }
 d([
-  u({ context: o }),
-  g({ attribute: !1 })
+  c({ context: o }),
+  D({ attribute: !1 })
 ], s.prototype, "formContext");
 d([
-  c({ context: m })
+  $({ context: m })
 ], s.prototype, "adapter");
-h("gui-time-input", s);
+u("gui-time-input", s);
 export {
   s as TimeElement
 };

package/{toggle.element-ORsprZ2M.js → toggle.element-zDUc9Vja.js}

@@ -1,26 +1,26 @@
 import { InputWidgetAdapter as p, formContext as l, inputContext as n } from "@golemui/lit";
 import "@golemui/gui-components/toggle";
 import { consume as u, provide as h } from "@lit/context";
-import { LitElement as c, html as m } from "lit";
+import { LitElement as m, html as c } from "lit";
 import { property as g } from "lit/decorators.js";
-import { safeDefine as f } from "@golemui/lit/internals";
+import { unsubscribeAll as f, safeDefine as b } from "@golemui/lit/internals";
 import "rxjs";
-var b = Object.defineProperty, d = (r, t, e, v) => {
+var v = Object.defineProperty, d = (r, e, t, C) => {
   for (var a = void 0, i = r.length - 1, o; i >= 0; i--)
-    (o = r[i]) && (a = o(t, e, a) || a);
-  return a && b(t, e, a), a;
+    (o = r[i]) && (a = o(e, t, a) || a);
+  return a && v(e, t, a), a;
 };
-class s extends c {
+class s extends m {
   constructor() {
     super(...arguments), this.adapter = new p(), this.subscriptions = [];
   }
   createRenderRoot() {
     return this;
   }
-  updated(t) {
-    super.updated(t);
-    const e = this.adapter.templateData.size;
-    e ? this.style.flex = String(e) : this.style.removeProperty("flex");
+  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-toggle", "gui-field"), this.adapter.context = this.formContext, this.adapter.init(this.widget), this.subscriptions.push(
@@ -28,7 +28,7 @@ class s extends c {
     );
   }
   render() {
-    return super.render(), m`
+    return super.render(), c`
       <gui-toggle
         .uid=${this.widget.uid}
         .label=${this.adapter.templateData.label}
@@ -45,12 +45,12 @@ class s extends c {
       ></gui-toggle>
     `;
   }
-  valueChanged(t) {
-    const e = t.detail.value;
-    this.adapter.valueChanged(e);
+  valueChanged(e) {
+    const t = e.detail.value;
+    this.adapter.valueChanged(t);
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this.adapter.destroy(), this.subscriptions.forEach((t) => t.unsubscribe());
+    super.disconnectedCallback(), this.adapter.destroy(), f(this.subscriptions);
   }
 }
 d([
@@ -60,7 +60,7 @@ d([
 d([
   h({ context: n })
 ], s.prototype, "adapter");
-f("gui-toggle-input", s);
+b("gui-toggle-input", s);
 export {
   s as ToggleElement
 };

package/accordion.element-C9GzfKrY.js

@@ -1,103 +0,0 @@
-import { LayoutWidgetAdapter as l, formContext as h, layoutContext as u } from "@golemui/lit";
-import { consume as g, provide as m } from "@lit/context";
-import { LitElement as f, html as s, nothing as c } from "lit";
-import { property as v } from "lit/decorators.js";
-import { safeDefine as b } from "@golemui/lit/internals";
-import "rxjs";
-import { repeat as w } from "lit-html/directives/repeat.js";
-import { classMap as $ } from "lit/directives/class-map.js";
-var _ = Object.defineProperty, p = (r, t, e, a) => {
-  for (var i = void 0, o = r.length - 1, d; o >= 0; o--)
-    (d = r[o]) && (i = d(t, e, i) || i);
-  return i && _(t, e, i), i;
-};
-class n extends f {
-  constructor() {
-    super(...arguments), this.activeSections = {}, this.adapter = new l(), this.subscriptions = [];
-  }
-  createRenderRoot() {
-    return this;
-  }
-  updated(t) {
-    super.updated(t);
-    const e = this.adapter.templateData.size;
-    e ? this.style.flex = String(e) : this.style.removeProperty("flex");
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.classList.add("gui-accordion", "gui-field");
-    const t = this.widget.props;
-    this.adapter.context = this.formContext, this.adapter.init(this.widget), this.activeSections = t.defaultOpen ?? {}, this.subscriptions.push(
-      this.adapter.templateDataChanged$.subscribe(() => this.requestUpdate())
-    );
-  }
-  onClickButton(t) {
-    this.widget.props.singleOpen && Object.keys(this.activeSections).filter((a) => a !== t).forEach((a) => {
-      this.activeSections[a] = !1;
-    }), this.activeSections[t] = !this.activeSections[t], this.adapter.change(this.activeSections), this.requestUpdate();
-  }
-  getChild(t) {
-    return this.widget.children.find((e) => e.uid === t);
-  }
-  render() {
-    return this.adapter.templateData ? s`
-      <div class="gui-widget" id=${this.widget.uid}>
-        ${this.adapter.templateData.sections ? w(
-      this.adapter.templateData.sections,
-      (t) => t.uid,
-      (t) => {
-        const e = this.activeSections[t.uid] || this.adapter.templateData.renderMode !== "activeOnly" ? s`<section
-                        class="gui-widget"
-                        role="region"
-                        id=${`accordion_section_${t.uid}`}
-                        ?hidden=${!this.activeSections[t.uid] && this.adapter.templateData.renderMode !== "activeOnly"}
-                        aria-labelledby=${`accordion_button_${t.uid}`}
-                      >
-                        <gui-widget .widget=${this.getChild(t.uid)}></gui-widget>
-                      </section>` : c;
-        return s`<div class="gui-accordion__section">
-                  <button
-                    type="button"
-                    tabindex="0"
-                    class=${$({
-          active: this.activeSections[t.uid]
-        })}
-                    id=${`accordion_button_${t.uid}`}
-                    aria-controls=${`accordion_section_${t.uid}`}
-                    aria-expanded=${this.activeSections[t.uid] ? "true" : "false"}
-                    @click=${() => this.onClickButton(t.uid)}
-                  >
-                    ${t.label}<span class="gui-accordion__arrow"
-                      ><svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        width="16"
-                        height="16"
-                        viewBox="0 0 256 256"
-                      >
-                        <path
-                          d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"
-                        ></path></svg
-                    ></span>
-                  </button>
-
-                  ${e}
-                </div>`;
-      }
-    ) : c}
-      </div>
-    ` : s``;
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this.adapter.destroy(), this.subscriptions.forEach((t) => t.unsubscribe());
-  }
-}
-p([
-  g({ context: h }),
-  v({ attribute: !1 })
-], n.prototype, "formContext");
-p([
-  m({ context: u })
-], n.prototype, "adapter");
-b("gui-accordion-layout", n);
-export {
-  n as AccordionElement
-};