@repobit/dex-system-design 0.18.1 → 0.19.0

package/src/components/footer/footer-lp.js

@@ -10,30 +10,20 @@ import { localeMap } from './localeMap.js';
 
 export class BdFooterLP extends LitElement {
   static properties = {
-    _countriesOpen     : { state: true },
-    selectedCountry    : { state: true },
-    currentLocale      : { type: String },
-    maxColumnsPerRow   : { type: Number },
-    _isMobile          : { state: true },
-    _countriesContainer: { state: true } // Referință la containerul cu țări
+    currentLocale: { type: String },
+    _isMobile    : { state: true }
   };
 
   constructor() {
     super();
-    this._countriesOpen = false;
-    this.maxColumnsPerRow = 2;
     this.currentLocale = 'en';
-    this.selectedCountry = 'Choose your country';
     this._isMobile = window.innerWidth <= 768;
-    this._countriesContainer = null;
-    console.log('Constructor - isMobile:', this._isMobile, 'Window width:', window.innerWidth);
   }
 
   connectedCallback() {
     super.connectedCallback();
-    this._initLocaleFromUrl();
+    this._initLocaleFromUrl(); // Adaugă inițializarea locale-ului din URL
     window.addEventListener('resize', this._handleResize.bind(this));
-    console.log('Connected - isMobile:', this._isMobile);
   }
 
   disconnectedCallback() {
@@ -43,54 +33,12 @@ export class BdFooterLP extends LitElement {
 
   firstUpdated() {
     super.firstUpdated();
-    this._updateNavLinks();
-    // Obține referința la containerul cu țări
-    // this._countriesContainer = this.shadowRoot.querySelector('.footer-countries-container');
+    this._toggleImpressumVisibility(); // Apelează la initializare
   }
 
   updated(changedProps) {
     if (changedProps.has('currentLocale')) {
-      this._updateNavLinks();
-    }
-
-    // Dacă s-a deschis lista de țări, fac scroll smooth către ea
-    if (changedProps.has('_countriesOpen') && this._countriesOpen) {
-    // Obține referința la containerul cu țări doar când este deschis
-      this._countriesContainer = this.shadowRoot.querySelector('.footer-countries-container');
-      this._scrollToCountries();
-    }
-  }
-
-  _scrollToCountries() {
-  // Obține referința la container doar atunci când este necesar
-    const container = this.shadowRoot.querySelector('.footer-countries-container');
-    if (container) {
-    // Așteaptă ca render-ul să se finalizeze
-      setTimeout(() => {
-        container.scrollIntoView({
-          behavior: 'smooth',
-          block   : 'start'
-        });
-      }, 100);
-    }
-  }
-
-  _scrollToTop() {
-    // Scroll smooth către începutul footer-ului
-    this.scrollIntoView({
-      behavior: 'smooth',
-      block   : 'start'
-    });
-  }
-
-  _handleResize() {
-    this._isMobile = window.innerWidth <= 768;
-    const newIsMobile = window.innerWidth <= 768;
-    console.log('Resize - Old isMobile:', this._isMobile, 'New isMobile:', newIsMobile, 'Window width:', window.innerWidth);
-
-    if (this._isMobile !== newIsMobile) {
-      this._isMobile = newIsMobile;
-      console.log('isMobile changed to:', this._isMobile);
+      this._toggleImpressumVisibility(); // Apelează când se schimbă locale-ul
     }
   }
 
@@ -98,7 +46,6 @@ export class BdFooterLP extends LitElement {
     const urlLocale = window.location.pathname.split('/')[1]?.toLowerCase();
 
     if (!urlLocale) {
-      this._updateNavLinks();
       return;
     }
 
@@ -150,134 +97,60 @@ export class BdFooterLP extends LitElement {
       }
     }
 
-    // Setează valorile pentru țară și locale
-    if (country) {
-      this.selectedCountry = country;
-    }
-
     if (this.currentLocale !== urlLocale) {
       const originalKey = Object.keys(localeMap).find(k =>
         k.toLowerCase() === urlLocale
       );
       this.currentLocale = originalKey || urlLocale;
     }
-
-    // Actualizează linkurile de navigație
-    this._updateNavLinks();
-  }
-
-  _toggleCountries() {
-    this._countriesOpen = !this._countriesOpen;
-
-    // Dacă se închide dropdown-ul, fac scroll înapoi sus
-    if (!this._countriesOpen) {
-      this._scrollToTop();
-    }
-  }
-
-  _closeCountries() {
-    this._countriesOpen = false;
-
-    // Doar pentru desktop, facem scroll înapoi sus
-    if (!this._isMobile) {
-      this._scrollToTop();
-    }
   }
 
-  _handleCountryClick(e, countryLabel, locale) {
-    e.preventDefault();
-    this._selectCountry(countryLabel);
-
-    // Redirect către pagina cu noul locale
-    const newPath = `/${locale.toLowerCase()}/`;
-    window.location.href = newPath;
-  }
-
-  _selectCountry(countryLabel) {
-    this.selectedCountry = countryLabel;
-    this._countriesOpen = false;
+  _toggleImpressumVisibility() {
+    const showImpressum = this.locale === 'de-de' || this.locale === 'de';
+    const slot = this.shadowRoot?.querySelector('slot[name="secondary-nav"]');
+    const assignedElements = slot?.assignedElements({ flatten: true }) || [];
+
+    if (assignedElements.length > 0) {
+      const footerNav = assignedElements[0];
+      const impressumLink = footerNav.querySelector('.impressum-link');
+
+      // Găsește separatorul care precede link-ul Impressum
+      let impressumDivider = null;
+      if (impressumLink) {
+        impressumDivider = impressumLink.previousElementSibling;
+
+        // Verifică dacă elementul anterior este un divider și este imediat înainte
+        if (impressumDivider && impressumDivider.tagName === 'BD-DIVIDER-VERTICAL' &&
+            impressumDivider.nextElementSibling === impressumLink) {
+          // Este separatorul corect
+        } else {
+          impressumDivider = null;
+        }
+      }
 
-    // Găsește locale-ul corespunzător pentru țara selectată
-    const localeEntry = Object.entries(localeMap).find(
-      ([, country]) => country === countryLabel
-    );
+      if (impressumLink) {
+        // Ascunde/afișează link-ul Impressum
+        impressumLink.style.display = showImpressum ? '' : 'none';
 
-    if (localeEntry) {
-      this.currentLocale = localeEntry[0];
+        // Ascunde/afișează și separatorul dinaintea lui
+        if (impressumDivider && impressumDivider.tagName === 'BD-DIVIDER-VERTICAL') {
+          impressumDivider.style.display = showImpressum ? '' : 'none';
+        }
+      }
     }
-
-    this._updateNavLinks();
-    this._scrollToTop();
-  }
-
-  getCountriesList() {
-    return Object.entries(localeMap).map(([locale, country]) => ({
-      locale,
-      label: country
-    }));
   }
 
-  renderQuickLinksSection(slotName) {
-    const assignedElements = this.shadowRoot?.querySelector(`slot[name="${slotName}"]`)?.assignedElements({ flatten: true }) || [];
-    if (assignedElements.length === 0) return null;
-
-    const maxCols = this.maxColumnsPerRow || 3;
-    const rows = Math.ceil(assignedElements.length / maxCols);
-
-    const groupedRows = Array.from({ length: rows }, (_, rowIndex) => {
-      const start = rowIndex * maxCols;
-      return assignedElements.slice(start, start + maxCols);
-    });
-
-    return html`
-      <div class="quick-links-section" style="display: flex; flex-direction: column; gap: 1rem;">
-        ${groupedRows.map(row => html`
-          <div style="display: grid; grid-template-columns: repeat(${row.length}, 1fr); gap: 1rem;">
-            ${row.map(el => html`${el}`)}
-          </div>
-        `)}
-      </div>
-    `;
+  _handleResize() {
+    this._isMobile = window.innerWidth <= 768;
   }
 
   get locale() {
-    const val = (this.currentLocale || 'en').toLowerCase();
-    return val;
-  }
-
-  _updateSlotStyles() {
-    const isMobile = window.innerWidth <= 768;
-    const slot = this.shadowRoot.querySelector('slot[name="nav"]');
-    const assignedElements = slot.assignedElements();
-
-    assignedElements.forEach(element => {
-      if (isMobile) {
-        element.style.color = '#151719';
-        element.style.setProperty('color', '#151719', 'important');
-      } else {
-        element.style.color = '';
-        element.style.removeProperty('color');
-      }
-    });
-  }
-
-  _updateNavLinks() {
-    // Actualizează linkurile care sunt acum în shadow DOM
-    const links = this.shadowRoot.querySelectorAll('.footer-nav-main a');
-    const linkPaths = ['consumer', 'small-business', 'business', 'partners'];
-    const currentLocale = this.locale;
-
-    links.forEach((link, index) => {
-      if (index < linkPaths.length) {
-        link.href = `/${currentLocale}/${linkPaths[index]}/`;
-      }
-    });
+    return (this.currentLocale || 'en').toLowerCase();
   }
 
   render() {
     const year = new Date().getFullYear();
     const showAnpc = this.locale.startsWith('ro');
-    const showImpressum = this.locale === 'de-de' || this.locale === 'de';
 
     const masterbrandUrl = this._isMobile
       ? '/assets/Bitdefender-Masterbrand_mobile.png'
@@ -289,8 +162,6 @@ export class BdFooterLP extends LitElement {
 
     const logoUrl = '/assets/BD_logo.png';
 
-
-
     return html`
     <div class="footer-top-bleed">
       <div class="container">
@@ -302,8 +173,8 @@ export class BdFooterLP extends LitElement {
           </div>
           <div class="footer-top-right">
             <slot name="top-right">
-              <div slot="top-right">
-                <span slot="logo">
+              <div>
+                <span>
                   <img src="${masterbrandUrl}" alt="Bitdefender Masterbrand">
                 </span>
               </div>
@@ -314,54 +185,66 @@ export class BdFooterLP extends LitElement {
     </div>
 
     <footer class="container">
-
-      <div class="footer-middle-line-lp">
-         <bd-footer-nav>
-        <div class="footer-nav-main">
-          <a href="legal/">Legal Information</a>
-          <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
-          <a href="site/view/legal-privacy-policy-for-bitdefender-websites/">Privacy Policy</a>
-          <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
-          <a href="sitemap/">Site Map</a>
-          <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
-          <a href="company/">Company</a>
-          <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
-          <a href="https://www.bitdefender.com/consumer/support/">Contact Us</a>
-          <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
-            <a href="#">Privacy Settings</a>
-          ${showImpressum
-            ? html`
-            <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
-            <a href="#" class="impressum-link">Impressum</a>
-          `
-            : ''}
-        </div>
-      </bd-footer-nav>
-            <bd-divider-horizontal width="100%" color="white" opacity="0.25"></bd-divider-horizontal>
-
+      <div class="footer-main-content">
+        <slot name="content"></slot>
       </div>
 
-
+      <div class="footer-secondary-nav">
+        <slot name="secondary-nav"></slot>
+      </div>
+      <bd-divider-horizontal width="100%" color="white" opacity="0.25"></bd-divider-horizontal>
       <div class="footer-extra">
-        <div class="footer-copy">Copyright © 1997 - ${year} Bitdefender</div>
+        <div class="footer-copy">
+          <slot name="copyright">
+            Copyright © 1997 - ${year} Bitdefender
+          </slot>
+        </div>
+        
         ${showAnpc
           ? html`
           <div class="footer-anpc-lp">
             <slot name="anpc">
-              <div slot="anpc">
-                <img src="${anpcUrl}" alt="Certificat" />
-              </div>
+              <img src="${anpcUrl}" alt="Certificat" />
             </slot>
           </div>
         `
-          : null}
-       
+          : ''}
       </div>
-
- 
     </footer>
   `;
   }
+
+  // Metodă specifică pentru secondary-nav care verifică și elementele custom
+  _hasSecondaryNavContent() {
+    const slot = this.shadowRoot?.querySelector('slot[name="secondary-nav"]');
+    if (!slot) return false;
+
+    const assignedNodes = slot.assignedNodes({ flatten: true });
+
+    // Verifică dacă există noduri care nu sunt doar spații albe
+    const hasContent = assignedNodes.some(node => {
+      if (node.nodeType === Node.ELEMENT_NODE) {
+        return true;
+      }
+      if (node.nodeType === Node.TEXT_NODE) {
+        return node.textContent.trim() !== '';
+      }
+      return false;
+    });
+
+    return hasContent;
+  }
+
+  // Metodă helper pentru a verifica dacă un slot are conținut
+  _hasSlotContent(slotName) {
+    const slot = this.shadowRoot?.querySelector(`slot[name="${slotName}"]`);
+    if (!slot) return false;
+
+    const assignedNodes = slot.assignedNodes({ flatten: true });
+    return assignedNodes.length > 0 &&
+           !(assignedNodes.length === 1 && assignedNodes[0].nodeType === Node.TEXT_NODE && assignedNodes[0].textContent.trim() === '');
+  }
+
   static styles = [tokens, footerCSS];
 }
 

package/src/components/footer/footer-nav-menu.css.js

@@ -1,24 +1,38 @@
 import { css } from 'lit';
 
 export default css`
+  .footer-nav-main {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: var(--spacing-16);
+    flex-wrap: wrap;
+    font-size: var(--typography-body-regular-fontSize);
+    font-family: var(--typography-fontFamily-sans, 'IBM Plex Sans');
+    font-weight: var(--typography-label-default-fontWeight);
+  }
 
- .footer-nav-main {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  gap: 1rem;
-  flex-wrap: wrap;
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-  font-size: var(--typography-body-regular-fontSize);
-  font-family: var(--typography-fontFamily-sans, 'IBM Plex Sans');
-  font-weight: var(--typography-label-default-fontWeight)
-}
+  .footer-nav-main.footer-nav-bold {
+    font-weight: var(--typography-heading-h3-fontWeight);
+  }
 
-.footer-nav-main.footer-nav-bold {
-  font-weight: var(--typography-heading-h3-fontWeight);
-}
-  a{
-  color: white;
-  text-decoration: none}
-`;
+  /* Corect: stilizare pentru elementele slottate */
+  ::slotted(a) {
+    color: white !important;
+    text-decoration: none;
+  }
+
+  /* Stiluri pentru mobil */
+  @media (max-width: 768px) {
+    .footer-nav-main {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: var(--spacing-16);
+    }
+
+    .footer-nav-main ::slotted(bd-divider-vertical) {
+      display: none !important;
+    }
+  }
+ 
+`;

package/src/components/footer/footer-nav-menu.js

@@ -24,9 +24,9 @@ export class BdFooterNav extends LitElement {
       .join(' ');
 
     return html`
-      <nav class=${classString}>
-        <slot></slot>
-      </nav>
+     <nav class=${classString} part="links">
+      <slot></slot>
+    </nav>
     `;
   }