From baa8513559efae2bb1d74b4877640dcfed3e2d74 Mon Sep 17 00:00:00 2001
From: Andrea Stagi <stagi.andrea@gmail.com>
Date: Wed, 7 Feb 2024 23:29:39 +0100
Subject: [PATCH] feat: use ng containers for megamenu

---
 .../megamenu/megamenu.component.html          | 78 +------------------
 .../header-example.component.html             | 54 ++++++++++++-
 2 files changed, 56 insertions(+), 76 deletions(-)

diff --git a/projects/design-angular-kit/src/lib/components/navigation/megamenu/megamenu.component.html b/projects/design-angular-kit/src/lib/components/navigation/megamenu/megamenu.component.html
index 4757c198..3914efe5 100644
--- a/projects/design-angular-kit/src/lib/components/navigation/megamenu/megamenu.component.html
+++ b/projects/design-angular-kit/src/lib/components/navigation/megamenu/megamenu.component.html
@@ -4,89 +4,17 @@
       <div class="row">
         <div class="col-12 it-vertical it-description pb-lg-3">
           <div class="description-content ps-4 ps-sm-5 ms-3">
-            <div class="ratio ratio-21x9 lightgrey-bg-a1 mb-4 rounded">
-              <figure class="figure">
-                <img
-                  src="https://via.placeholder.com/560x240/ebebeb/808080/?text=Immagine"
-                  class="figure-img img-fluid rounded"
-                  alt="Segnaposto" />
-              </figure>
-            </div>
-            <p>Testo utile a fornire una descrizione dei contenuti della sezione <strong>megamenu 1</strong>.</p>
+            <ng-content select="[megamenuLeftZone]"></ng-content>
           </div>
         </div>
       </div>
     </div>
     <div class="col-12 col-lg-8">
       <div class="it-heading-link-wrapper">
-        <a class="it-heading-link" href="#"
-          ><svg role="img" class="icon icon-sm me-2 mb-1">
-            <use href="/bootstrap-italia/dist/svg/sprites.svg#it-arrow-right-triangle"></use>
-          </svg>
-          <span>Esplora la sezione megamenu 1</span>
-        </a>
+        <ng-content select="[megamenuHeadingLink]"></ng-content>
       </div>
       <div class="row">
-        <div class="col-12 col-lg-6">
-          <div class="link-list-wrapper">
-            <ul class="link-list">
-              <li>
-                <a class="list-item dropdown-item" href="#">
-                  <svg role="img" class="icon icon-sm me-2">
-                    <use href="/bootstrap-italia/dist/svg/sprites.svg#it-arrow-right-triangle"></use>
-                  </svg>
-                  <span>Link lista 1</span>
-                </a>
-              </li>
-              <li>
-                <a class="list-item dropdown-item" href="#">
-                  <svg role="img" class="icon icon-sm me-2">
-                    <use href="/bootstrap-italia/dist/svg/sprites.svg#it-arrow-right-triangle"></use>
-                  </svg>
-                  <span>Link lista 2</span>
-                </a>
-              </li>
-              <li>
-                <a class="list-item dropdown-item" href="#">
-                  <svg role="img" class="icon icon-sm me-2">
-                    <use href="/bootstrap-italia/dist/svg/sprites.svg#it-arrow-right-triangle"></use>
-                  </svg>
-                  <span>Link lista 3</span>
-                </a>
-              </li>
-            </ul>
-          </div>
-        </div>
-        <div class="col-12 col-lg-6">
-          <div class="link-list-wrapper">
-            <ul class="link-list">
-              <li>
-                <a class="list-item dropdown-item" href="#">
-                  <svg role="img" class="icon icon-sm me-2">
-                    <use href="/bootstrap-italia/dist/svg/sprites.svg#it-arrow-right-triangle"></use>
-                  </svg>
-                  <span>Link lista 4</span>
-                </a>
-              </li>
-              <li>
-                <a class="list-item dropdown-item" href="#">
-                  <svg role="img" class="icon icon-sm me-2">
-                    <use href="/bootstrap-italia/dist/svg/sprites.svg#it-arrow-right-triangle"></use>
-                  </svg>
-                  <span>Link lista 5</span>
-                </a>
-              </li>
-              <li>
-                <a class="list-item dropdown-item" href="#">
-                  <svg role="img" class="icon icon-sm me-2">
-                    <use href="/bootstrap-italia/dist/svg/sprites.svg#it-arrow-right-triangle"></use>
-                  </svg>
-                  <span>Link lista 6</span>
-                </a>
-              </li>
-            </ul>
-          </div>
-        </div>
+        <ng-content select="[megamenuLinkList]"></ng-content>
       </div>
     </div>
   </div>
diff --git a/src/app/header/header-example/header-example.component.html b/src/app/header/header-example/header-example.component.html
index b1d4a8a4..5e609bfd 100644
--- a/src/app/header/header-example/header-example.component.html
+++ b/src/app/header/header-example/header-example.component.html
@@ -69,7 +69,59 @@ <h3>Componente Header</h3>
         <it-dropdown mode="nav" [megamenu]="true">
           <span button>Megamenu</span>
           <ng-container list>
-            <it-megamenu></it-megamenu>
+            <it-megamenu>
+              <ng-container megamenuLeftZone>
+                <div class="ratio ratio-21x9 lightgrey-bg-a1 mb-4 rounded">
+                  <figure class="figure">
+                    <img
+                      src="https://via.placeholder.com/560x240/ebebeb/808080/?text=Immagine"
+                      class="figure-img img-fluid rounded"
+                      alt="Segnaposto" />
+                  </figure>
+                </div>
+                <p>Testo utile a fornire una descrizione dei contenuti della sezione <strong>megamenu 1</strong>.</p>
+              </ng-container>
+              <ng-container megamenuHeadingLink>
+                <a class="it-heading-link" href="#"
+                  ><it-icon name="arrow-right-triangle"></it-icon>
+                  <span>Esplora la sezione megamenu 1</span>
+                </a>
+              </ng-container>
+              <ng-container megamenuLinkList>
+                <div class="col-12 col-lg-6">
+                  <it-list linkList="true">
+                    <it-list-item href="#" externalLink="true">
+                      <it-icon name="arrow-right-triangle"></it-icon>
+                      <span>Link lista 1</span>
+                    </it-list-item>
+                    <it-list-item href="#" externalLink="true">
+                      <it-icon name="arrow-right-triangle"></it-icon>
+                      <span>Link lista 2</span>
+                    </it-list-item>
+                    <it-list-item href="#" externalLink="true">
+                      <it-icon name="arrow-right-triangle"></it-icon>
+                      <span>Link lista 3</span>
+                    </it-list-item>
+                  </it-list>
+                </div>
+                <div class="col-12 col-lg-6">
+                  <it-list linkList="true">
+                    <it-list-item href="#" externalLink="true">
+                      <it-icon name="arrow-right-triangle"></it-icon>
+                      <span>Link lista 4</span>
+                    </it-list-item>
+                    <it-list-item href="#" externalLink="true">
+                      <it-icon name="arrow-right-triangle"></it-icon>
+                      <span>Link lista 5</span>
+                    </it-list-item>
+                    <it-list-item href="#" externalLink="true">
+                      <it-icon name="arrow-right-triangle"></it-icon>
+                      <span>Link lista 6</span>
+                    </it-list-item>
+                  </it-list>
+                </div>
+              </ng-container>
+            </it-megamenu>
           </ng-container>
         </it-dropdown>
       </it-navbar-item>