@repobit/dex-system-design 0.23.40 → 0.23.42

package/src/components/tabs/tabs.js

@@ -1,193 +1,189 @@
 import { LitElement, html } from "lit";
 import { tokens } from "../../tokens/tokens.js";
+import "../accordion/accordion.js";
 import "../heading/heading.js";
 import "../highlight/highlight.js";
-import "../list/list-item/list-item.js";
-import "../list/list.js";
+import "../icons/family-icon.js";
+import "../icons/globe-icon.js";
+import "../icons/individual-icon.js";
+import "../icons/laurel-icon.js";
 import "../paragraph/paragraph.js";
-import tabsCSS from "../tabs/tabs.css.js";
+import tabsCSS from "./tabs.css.js";
 
-class TabsComponent extends LitElement {
+// ─── BdTabPanel — Light DOM wrapper ──────────────────────────────────────────
+
+class BdTabPanel extends HTMLElement {
+  connectedCallback() {
+    this.style.display = "none";
+  }
+}
+customElements.define("bd-tab-panel", BdTabPanel);
+
+// ─── BdTabCol — Light DOM wrapper ────────────────────────────────────────────
+
+class BdTabCol extends HTMLElement {}
+customElements.define("bd-tab-col", BdTabCol);
+
+// ─── BdTabs ──────────────────────────────────────────────────────────────────
+
+class BdTabs extends LitElement {
   static properties = {
-    selectedTab: { type: Number }
+    title      : { type: String },
+    subtitle   : { type: String },
+    selectedTab: { type: Number, state: true },
+    _minHeight : { state: true }
   };
 
+  static styles = [tokens, tabsCSS];
+
   constructor() {
     super();
+    this.title       = "";
+    this.subtitle    = "";
     this.selectedTab = 0;
+    this._minHeight  = 0;
+  }
+
+  _getPanels() {
+    return Array.from(this.querySelectorAll(":scope > bd-tab-panel"));
+  }
+
+  _getCols(panel) {
+    return Array.from(panel.querySelectorAll(":scope > bd-tab-col"));
   }
 
   selectTab(index) {
     this.selectedTab = index;
-    this.requestUpdate();
+    this.updateComplete.then(() => this._equalizeRows());
+  }
+
+  async firstUpdated() {
+    await this._measureMaxHeight();
+  }
+
+  _equalizeRows() {
+    const container = this.renderRoot.querySelector(".bd-columns-container");
+    if (!container) return;
+
+    const icons        = container.querySelectorAll(".col-icon-wrapper");
+    const titles       = container.querySelectorAll(".col-title-wrapper");
+    const descriptions = container.querySelectorAll(".col-description");
+
+    // Reset
+    icons.forEach(el        => el.style.height = "");
+    titles.forEach(el       => el.style.height = "");
+    descriptions.forEach(el => el.style.height = "");
+
+    // Egalizează icon-uri
+    let maxH = 0;
+    icons.forEach(el => { if (el.scrollHeight > maxH) maxH = el.scrollHeight; });
+    icons.forEach(el => el.style.height = `${maxH}px`);
+
+    // Egalizează titluri
+    maxH = 0;
+    titles.forEach(el => { if (el.scrollHeight > maxH) maxH = el.scrollHeight; });
+    titles.forEach(el => el.style.height = `${maxH}px`);
+
+    // Egalizează descrieri
+    maxH = 0;
+    descriptions.forEach(el => { if (el.scrollHeight > maxH) maxH = el.scrollHeight; });
+    descriptions.forEach(el => el.style.height = `${maxH}px`);
+  }
+
+  async _measureMaxHeight() {
+    const panels    = this._getPanels();
+    const container = this.renderRoot.querySelector(".bd-columns-container");
+    if (!container || panels.length === 0) return;
+
+    let maxHeight     = 0;
+    const originalTab = this.selectedTab;
+
+    for (let i = 0; i < panels.length; i++) {
+      this.selectedTab = i;
+      await this.updateComplete;
+      this._equalizeRows();
+      await new Promise(resolve => requestAnimationFrame(resolve));
+      const h = container.scrollHeight;
+      if (h > maxHeight) maxHeight = h;
+    }
+
+    this.selectedTab = originalTab;
+    this._minHeight  = maxHeight;
+    await this.updateComplete;
+    this._equalizeRows();
+  }
+
+  _renderCol(col) {
+    const descEl      = col.querySelector("[slot='description']");
+    const iconEl      = col.querySelector("[slot='icon']");
+    const accordionEl = col.querySelector("bd-accordion-section");
+    const title       = col.getAttribute("title");
+
+    return html`
+      <div class="bd-col">
+        <div class="col-icon-wrapper">
+          ${iconEl ? iconEl.cloneNode(true) : ""}
+        </div>
+        <div class="col-title-wrapper">
+           <bd-h as="h4">${title}</bd-h>
+        </div>
+        ${descEl
+          ? html`<div class="col-description"><bd-p kind="regular">${descEl.textContent}</bd-p></div>`
+          : ""}
+        ${accordionEl
+          ? accordionEl.cloneNode(true)
+          : ""}
+      </div>
+    `;
   }
 
   render() {
-    const tabs = [
-      {
-        title    : "Privacy Protection",
-        imageBase: "/assets/tabs-img1.png",
-        icon     : "/assets/pic1.png"
-      },
-      {
-        title    : "Identity Protection",
-        imageBase: "/assets/tabs-img2.png",
-        icon     : "/assets/pic2.png"
-      },
-      {
-        title    : "Device Protection",
-        imageBase: "/assets/tabs-img3.png",
-        icon     : "/assets/pic3.png"
-      },
-      {
-        title    : "Financial Insurance",
-        imageBase: "/assets/tabs-img3.png",
-        icon     : "/assets/pic3.png"
-      }
-    ];
-
-    const content = [
-      {
-        heading    : "Take back your family's digital privacy",
-        description: () => html`
-          <bd-list type="unordered" spacing="md" variant="default" orientation="vertical">
-            <bd-li kind="bullet" size="md">
-              <bd-p kind="small">Enjoy complete data privacy with
-              <strong>Bitdefender Premium VPN</strong>.</bd-p>
-            </bd-li>
-            <bd-li kind="bullet" size="md">
-              <bd-p kind="small">Escape intrusive ads and trackers with our advanced
-              <strong>Ad-Blocker</strong> and
-              <strong>Anti-Tracker</strong> features.</bd-p>
-            </bd-li>
-            <bd-li kind="bullet" size="md">
-              <bd-p kind="small">Shield yourself with robust
-              <strong>Webcam and Microphone Protection</strong>.</bd-p>
-            </bd-li>
-          </bd-list>`,
-        href: "#1"
-      },
-      {
-        heading    : "Safe data. Safe you.",
-        description: () => html`
-          <bd-p kind="small">Get instant alerts for potential threats to your personal data and
-            finances.</bd-p>
-          <bd-p kind="small">Receive clear and concise advice on handling data breaches.</bd-p>
-          <bd-p kind="small">Reduce the risk of online ID theft by scanning your digital
-            footprint.</bd-p>`,
-        href: "#2"
-      },
-      {
-        heading    : "We secure what you hold dear",
-        description: () => html`
-          <bd-p kind="small">Enjoy seamless security across all devices.</bd-p>
-          <bd-p kind="small">Protection from corrupt websites, risky downloads, and phishing
-            attempts.</bd-p>
-          <bd-p kind="small">Lightweight performance ensures smooth device operation.</bd-p>`,
-        href: "#3"
-      },
-      {
-        heading    : "Financial Insurance",
-        description: () => html`
-          <bd-p kind="small">Enjoy seamless security across all devices.</bd-p>
-          <bd-p kind="small">Protection from corrupt websites, risky downloads, and phishing
-            attempts.</bd-p>
-          <bd-p kind="small">Lightweight performance ensures smooth device operation.</bd-p>`,
-        href: "#4"
-      }
-    ];
-
-    const selectedTabData = tabs[this.selectedTab];
+    const panels      = this._getPanels();
+    const activePanel = panels[this.selectedTab];
+    const cols        = activePanel ? this._getCols(activePanel) : [];
+    const colCount    = cols.length;
 
     return html`
       <div class="bd-tabs-component">
-        <bd-highlight highlight-text="family member">
-          Customized online protection for each family member - Smart, Private &
-          Safe
-        </bd-highlight>
-        <bd-p kind="regular" class="bd-tabs-subtitle">Your family is unique and so should be your online security. Our family protection plan adapts to each member's needs, offering the ideal mix of privacy, freedom, and safety.</bd-p>
-        <div class="bd-tabs-container">
-          ${tabs.map(
-            (tab, index) => html`
-              <button
-                role="tab"
-                aria-selected="${this.selectedTab === index ? "true" : "false"}"
-                class=${this.selectedTab === index
-                  ? "bd-selected bd-tab-button"
-                  : "bd-tab-button"}
-                @click=${() => this.selectTab(index)}
-                aria-controls="tab-content-${index}"
-                id="tab-${index}"
-              >
-                <img src="${tab.icon}" alt="${tab.title} Icon" />
-                <bd-p kind="small"><strong>${tab.title}</strong></bd-p>
-              </button>
-            `
-          )}
-        </div>
-        <div class="bd-card-container">
-          <div class="bd-left">
-            <picture>
-              ${["webp", "png"].map((format) =>
-                ["2000", "750"].map(
-                  (width) => html`
-                    <source
-                      type="image/${format}"
-                      srcset="
-                        ${selectedTabData.imageBase}?width=${width}&format=${format}&optimize=medium
-                      "
-                      media="${width === "2000" ? "(min-width: 600px)" : ""}"
-                    />
-                  `
-                )
-              )}
-              <img
-                loading="lazy"
-                alt="${selectedTabData.title} Image"
-                src="${selectedTabData.imageBase}?width=750&format=png&optimize=medium"
-              />
-            </picture>
-          </div>
-          <div class="bd-right">
-            <bd-h as="h3" id="tab-content-heading-${this.selectedTab}">
-              ${content[this.selectedTab].heading}
-            </bd-h>
-            <div
-              id="tab-content-${this.selectedTab}"
-              aria-labelledby="tab-content-heading-${this.selectedTab}"
-            >
-              ${content[this.selectedTab].description()}
-            </div>
-            <a
-              href="${content[this.selectedTab].href}"
-              class="bd-find-out-more"
-              aria-label="Find out more about ${content[this.selectedTab]
-                .heading}"
+
+        ${this.title
+          ? html`<bd-highlight highlight-text="">${this.title}</bd-highlight>`
+          : ""}
+
+        ${this.subtitle
+          ? html`<bd-p kind="large" class="bd-tabs-subtitle">${this.subtitle}</bd-p>`
+          : ""}
+
+        <!-- Tab buttons -->
+        <div class="bd-tabs-container" role="tablist">
+          ${panels.map((panel, index) => html`
+            <button
+              role="tab"
+              aria-selected="${this.selectedTab === index ? "true" : "false"}"
+              aria-controls="tab-panel-${index}"
+              id="tab-btn-${index}"
+              class="bd-tab-button ${this.selectedTab === index ? "bd-selected" : ""}"
+              @click=${() => this.selectTab(index)}
             >
-              <bd-p kind="small">Find out more</bd-p>
-              <span class="bd-arrow">
-                <svg
-                  width="14"
-                  height="14"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="3"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                >
-                  <path d="M5 12h14"></path>
-                  <path d="M12 5l7 7-7 7"></path>
-                </svg>
-              </span>
-            </a>
-          </div>
+              <span class="bd-tab-label">${panel.getAttribute("title")}</span>
+            </button>
+          `)}
+        </div>
+
+        <!-- Active panel — grid cu coloane -->
+        <div
+          id="tab-panel-${this.selectedTab}"
+          role="tabpanel"
+          aria-labelledby="tab-btn-${this.selectedTab}"
+          class="bd-columns-container"
+          style="grid-template-columns: repeat(${colCount}, 300px); ${this._minHeight ? `min-height: ${this._minHeight}px;` : ""}"
+        >
+          ${cols.map(col => this._renderCol(col))}
         </div>
+
       </div>
     `;
   }
 }
 
-TabsComponent.styles = [tokens, tabsCSS];
-
-customElements.define("bd-tabs-component", TabsComponent);
+customElements.define("bd-tabs", BdTabs);