@prioticket/design-system-web 1.0.5 → 1.0.7

package/dist/components/pd-tabs.es.js

@@ -1,64 +1,54 @@
-import { css as u, LitElement as p, html as c } from "lit";
-import { property as r, state as m, customElement as h } from "lit/decorators.js";
+import { css as u, LitElement as b, html as l } from "lit";
+import { property as r, state as m, queryAssignedElements as v, customElement as h } from "lit/decorators.js";
 import "@material/web/tabs/tabs.js";
 import "@material/web/tabs/primary-tab.js";
 import "@material/web/tabs/secondary-tab.js";
 import "@material/web/icon/icon.js";
-var v = Object.defineProperty, T = Object.getOwnPropertyDescriptor, o = (t, a, i, s) => {
-  for (var e = s > 1 ? void 0 : s ? T(a, i) : a, d = t.length - 1, b; d >= 0; d--)
-    (b = t[d]) && (e = (s ? b(a, i, e) : b(e)) || e);
-  return s && e && v(a, i, e), e;
+var y = Object.defineProperty, T = Object.getOwnPropertyDescriptor, i = (t, a, e, d) => {
+  for (var s = d > 1 ? void 0 : d ? T(a, e) : a, c = t.length - 1, p; c >= 0; c--)
+    (p = t[c]) && (s = (d ? p(a, e, s) : p(s)) || s);
+  return d && s && y(a, e, s), s;
 };
-let l = class extends p {
+let n = class extends b {
   constructor() {
     super(...arguments), this.activeTabIndex = 0, this.autoActivate = !1, this.tabs = [], this.slottedTabs = [];
   }
-  connectedCallback() {
-    super.connectedCallback(), setTimeout(() => this.collectTabsFromSlot(), 0);
-  }
   firstUpdated() {
-    this.collectTabsFromSlot(), this.updateComplete.then(() => this.forceActiveTabUpdate());
+    this.updateTabsFromSlot();
   }
-  collectTabsFromSlot() {
-    const t = this.shadowRoot?.querySelector("slot");
-    if (!t) return;
-    const a = t.assignedElements({ flatten: !0 }), i = [];
-    a.forEach((s) => {
-      if (s.tagName === "PD-TAB") {
-        const e = s;
-        i.push({
-          label: e.textContent?.trim() || "",
-          icon: e.getAttribute("icon") || void 0,
-          secondary: e.hasAttribute("secondary"),
-          inlineIcon: e.hasAttribute("inline-icon"),
-          ariaLabel: e.getAttribute("aria-label") || void 0
-        });
-      }
-    }), this.slottedTabs = i, this.requestUpdate();
+  updateTabsFromSlot() {
+    const a = (this.assignedTabs ?? []).map((e) => ({
+      label: e.textContent?.trim() || "",
+      icon: e.getAttribute("icon") || void 0,
+      secondary: e.hasAttribute("secondary"),
+      inlineIcon: e.hasAttribute("inline-icon"),
+      ariaLabel: e.getAttribute("aria-label") || void 0
+    }));
+    this.slottedTabs = a, this.requestUpdate(), this.updateComplete.then(() => this.forceActiveTabUpdate());
   }
   handleSlotChange() {
-    this.collectTabsFromSlot(), this.updateComplete.then(() => this.forceActiveTabUpdate());
+    this.updateTabsFromSlot();
   }
   forceActiveTabUpdate() {
     const t = this.shadowRoot?.querySelector("md-tabs");
     t && this.activeTabIndex !== void 0 && (t.activeTabIndex = this.activeTabIndex);
   }
   renderTab(t, a) {
-    const i = t.icon ? c`<md-icon slot="icon">${t.icon}</md-icon>` : "";
-    return t.secondary ? c`
+    const e = t.icon ? l`<md-icon slot="icon">${t.icon}</md-icon>` : "";
+    return t.secondary ? l`
         <md-secondary-tab
           ?inline-icon=${t.inlineIcon}
           aria-label=${t.ariaLabel || t.label}
         >
-          ${i}
+          ${e}
           ${t.label}
         </md-secondary-tab>
-      ` : c`
+      ` : l`
       <md-primary-tab
         ?inline-icon=${t.inlineIcon}
         aria-label=${t.ariaLabel || t.label}
       >
-        ${i}
+        ${e}
         ${t.label}
       </md-primary-tab>
     `;
@@ -68,13 +58,13 @@ let l = class extends p {
   }
   render() {
     const t = this.tabs.length > 0 ? this.tabs : this.slottedTabs;
-    return c`
+    return l`
       <md-tabs
         .activeTabIndex=${this.activeTabIndex}
         ?auto-activate=${this.autoActivate}
         @change=${this.handleChange}
       >
-        ${t.map((a, i) => this.renderTab(a, i))}
+        ${t.map((a, e) => this.renderTab(a, e))}
       </md-tabs>
       <div style="display: none;">
         <slot @slotchange=${this.handleSlotChange}></slot>
@@ -90,50 +80,53 @@ let l = class extends p {
     }));
   }
 };
-o([
+i([
   r({ type: Number, attribute: "active-tab-index" })
-], l.prototype, "activeTabIndex", 2);
-o([
+], n.prototype, "activeTabIndex", 2);
+i([
   r({ type: Boolean, attribute: "auto-activate" })
-], l.prototype, "autoActivate", 2);
-o([
+], n.prototype, "autoActivate", 2);
+i([
   r({ type: Array })
-], l.prototype, "tabs", 2);
-o([
+], n.prototype, "tabs", 2);
+i([
   m()
-], l.prototype, "slottedTabs", 2);
-l = o([
+], n.prototype, "slottedTabs", 2);
+i([
+  v({ flatten: !0, selector: "pd-tab" })
+], n.prototype, "assignedTabs", 2);
+n = i([
   h("pd-tabs")
-], l);
-let n = class extends p {
+], n);
+let o = class extends b {
   constructor() {
     super(...arguments), this.secondary = !1, this.inlineIcon = !1, this.icon = "", this.ariaLabel = "";
   }
   render() {
-    return c`<slot></slot>`;
+    return l`<slot></slot>`;
   }
 };
-n.styles = u`
+o.styles = u`
     :host {
       display: none;
     }
   `;
-o([
+i([
   r({ type: Boolean })
-], n.prototype, "secondary", 2);
-o([
+], o.prototype, "secondary", 2);
+i([
   r({ type: Boolean, attribute: "inline-icon" })
-], n.prototype, "inlineIcon", 2);
-o([
+], o.prototype, "inlineIcon", 2);
+i([
   r({ type: String })
-], n.prototype, "icon", 2);
-o([
+], o.prototype, "icon", 2);
+i([
   r({ type: String, attribute: "aria-label" })
-], n.prototype, "ariaLabel", 2);
-n = o([
+], o.prototype, "ariaLabel", 2);
+o = i([
   h("pd-tab")
-], n);
+], o);
 export {
-  n as PdTab,
-  l as PdTabs
+  o as PdTab,
+  n as PdTabs
 };