From 125a116920bf1de8857c909906b23c4de72f21d9 Mon Sep 17 00:00:00 2001
From: Serge <dasilvasoa@gmail.com>
Date: Fri, 5 Jul 2024 15:01:48 +0200
Subject: [PATCH] chore: demo

---
 package.json                                  |  3 +-
 .../app/overlay/overlay-demo.component.html   | 47 ++++++++++---------
 .../app/overlay/overlay-demo.component.scss   | 18 ++++---
 projects/demo-app/src/styles.scss             |  3 +-
 4 files changed, 38 insertions(+), 33 deletions(-)

diff --git a/package.json b/package.json
index 66f011bd..a9fce168 100644
--- a/package.json
+++ b/package.json
@@ -8,8 +8,7 @@
         "release:dry-run": "node -r @swc-node/register ./scripts/release.ts --verbose --dry-run",
         "postinstall": "patch-package",
         "start": "ng serve",
-        "prettier": "npx prettier . --check",
-        "prettier-fix": "npx prettier . --write"
+        "prettier": "npx prettier . --write"
     },
     "workspaces": [
         "projects/core",
diff --git a/projects/demo-app/src/app/overlay/overlay-demo.component.html b/projects/demo-app/src/app/overlay/overlay-demo.component.html
index e9f60312..97418efa 100644
--- a/projects/demo-app/src/app/overlay/overlay-demo.component.html
+++ b/projects/demo-app/src/app/overlay/overlay-demo.component.html
@@ -6,8 +6,8 @@
 <mat-card class="demo-card demo-basic" *ngIf="tabIndex === 0">TODO</mat-card>
 
 <div *ngIf="tabIndex === 1" (contextmenu)="onContextMenu($event)">
-    <overlay #contextMenu ngx-menu>
-        <div class="ngx-menu-content">
+    <overlay #contextMenu overlayContainerClass="ngx-menu">
+        <div class="menu-content">
             <ul>
                 <li class="menu-item" (click)="contextMenu.close()">
                     <mat-icon>delete_sweep</mat-icon>
@@ -27,8 +27,8 @@
     <mat-card class="demo-card">
         <mat-toolbar color="primary">Overlay</mat-toolbar>
         <mat-card-content>
-            <overlay #posYMenu>
-                <div class="ngx-menu-content">
+            <overlay #posYMenu overlayContainerClass="ngx-menu" positions="end bottom end top">
+                <div class="menu-content">
                     <ul>
                         <li class="menu-item" (click)="posYMenu.close()">
                             <mat-icon>delete_sweep</mat-icon>
@@ -46,8 +46,8 @@
                 </div>
             </overlay>
 
-            <div id="demo-ngx-menu">
-                <div class="menu-section">
+            <div id="demo-overlay">
+                <div class="section">
                     <p>You clicked on: {{ selected }}</p>
 
                     <mat-toolbar>
@@ -56,49 +56,50 @@
                         </button>
                     </mat-toolbar>
 
-                    <overlay #menu>
-                        <div class="ngx-menu-content">
-                            <button class="menu-item" *ngFor="let item of items" (click)="select(item.text); menu.close()">
+                    <overlay #menu overlayContainerClass="ngx-menu">
+                        <div class="menu-content button-menu">
+                            <button mat-button class="menu-item" *ngFor="let item of items" (click)="select(item.text); menu.close()">
                                 {{ item.text }}
                             </button>
                         </div>
                     </overlay>
                 </div>
-                <div class="menu-section">
-                    <p>Clicking these will navigate:</p>
+                <div class="section">
+                    <p>Clicking these will navigate: "</p>
                     <mat-toolbar>
                         <button mat-icon-button (click)="anchorMenu.show($event)">
                             <mat-icon>more_vert</mat-icon>
                         </button>
                     </mat-toolbar>
 
-                    <overlay #anchorMenu>
-                        <div id="anchorMenu" class="ngx-menu-content">
+                    <overlay #anchorMenu overlayContainerClass="ngx-menu" positions="start top start bottom">
+                        <div class="menu-content anchor-menu">
                             <a class="menu-item" *ngFor="let item of items" href="http://www.google.com">
                                 {{ item.text }}
                             </a>
                         </div>
                     </overlay>
                 </div>
-                <div class="menu-section">
-                    <p>With buttons position before</p>
+                <div class="section">
+                    <p>With Lorem ipsum</p>
                     <mat-toolbar class="end-icon">
-                        <button mat-icon-button (click)="posXMenu.show($event)">
+                        <button mat-icon-button (click)="ipsum.show($event)">
                             <mat-icon>more_vert</mat-icon>
                         </button>
                     </mat-toolbar>
 
-                    <overlay #posXMenu class="before" positions="end bottom end top">
-                        <div class="ngx-menu-content">
-                            <button class="menu-item" *ngFor="let item of items" (click)="posXMenu.close()">
-                                {{ item.text }}
-                            </button>
+                    <overlay #ipsum overlayContainerClass="ngx-menu">
+                        <div class="menu-content">
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla euismod, lacus nec imperdiet pretium, purus nisi hendrerit velit, non laoreet est velit sit amet arcu. Cras eget malesuada tortor. Aliquam vitae libero tellus. Quisque at velit sed arcu feugiat imperdiet ut quis augue. Cras laoreet eleifend tellus varius laoreet. Vestibulum vulputate sagittis sapien, eget euismod metus. Sed ut lacus at risus tristique blandit. Cras at nibh augue. Nam felis felis, facilisis sed fringilla a, porta id magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc eget velit a enim pharetra volutpat quis eget lacus. Donec imperdiet magna metus, auctor pretium nibh dictum eu. Sed pharetra tristique sodales. Nam dapibus porta imperdiet. Pellentesque elementum
+                            tristique molestie. Sed at dolor et mauris vehicula vestibulum. Maecenas cursus vulputate convallis. Quisque eu imperdiet nunc. Nunc ut feugiat eros. Integer aliquam nibh nec est sollicitudin dictum at et diam. Aliquam neque magna, condimentum non dolor in, faucibus malesuada mauris. Sed dictum massa neque, quis venenatis justo consequat sed. Fusce imperdiet purus nec neque vestibulum, vel placerat enim porta. Duis turpis purus, suscipit vitae scelerisque sed, sollicitudin a sem. Nullam orci risus, suscipit non mollis non, semper sit amet enim. In vel eros justo. Etiam gravida dolor vitae commodo tincidunt. Ut consequat id odio ac scelerisque. Phasellus fringilla et nisi at convallis. Nunc efficitur est in luctus interdum. Curabitur risus turpis, gravida in ex
+                            id, elementum convallis augue. Duis laoreet condimentum purus, sit amet vulputate dolor finibus ac. Proin consectetur ullamcorper orci ut ullamcorper. Vivamus ornare leo vel urna molestie porta. Vivamus malesuada velit eros, non rutrum urna elementum ut. Pellentesque sed lorem tempor, consectetur sem in, condimentum justo. Vivamus eu nunc interdum, mattis turpis nec, accumsan neque. Integer convallis porttitor turpis feugiat placerat. Nulla sodales ex in neque lobortis, vel mollis turpis interdum. Mauris pharetra ex a justo maximus, at semper metus feugiat. Nullam aliquet tortor nec tortor auctor venenatis. Proin id laoreet eros, id sodales mi. Vestibulum mollis orci nec orci posuere dapibus. Integer placerat, nisl id aliquam interdum, diam est vestibulum purus,
+                            non venenatis turpis lacus in felis. Vestibulum pulvinar velit tortor, ut convallis turpis condimentum ut. Nunc auctor hendrerit augue, sed malesuada quam. Etiam varius interdum risus, eget gravida libero convallis sed. Aliquam tempor orci at ex ullamcorper mollis. Fusce imperdiet ut ex in gravida. Curabitur iaculis non diam vel consequat. Praesent a magna posuere, feugiat mauris nec, sollicitudin ligula. Sed faucibus viverra velit eget porttitor. Suspendisse a sem gravida, tincidunt lacus vitae, lobortis ante. Nulla nisl quam, ultrices non nunc eget, commodo luctus metus. Curabitur nulla erat, gravida in nulla vel, commodo vestibulum ligula. Quisque quis lectus vel urna luctus gravida eget id risus.
                         </div>
                     </overlay>
                 </div>
 
-                <div class="menu-section">
-                    <p>With ul/li, position top</p>
+                <div class="section">
+                    <p>With buttons, position before</p>
                     <mat-toolbar>
                         <button mat-icon-button (click)="posYMenu.show($event)">
                             <mat-icon>more_vert</mat-icon>
diff --git a/projects/demo-app/src/app/overlay/overlay-demo.component.scss b/projects/demo-app/src/app/overlay/overlay-demo.component.scss
index 433c91ad..b5ef54fe 100644
--- a/projects/demo-app/src/app/overlay/overlay-demo.component.scss
+++ b/projects/demo-app/src/app/overlay/overlay-demo.component.scss
@@ -1,9 +1,12 @@
-overlay-demo {
-    #demo-ngx-menu {
+app-overlay-demo {
+    #demo-overlay {
         display: flex;
         flex-flow: row;
+        align-items: center;
+        justify-content: center;
 
-        .menu-section {
+        .section {
+            flex: 1 1 auto;
             width: 300px;
             margin: 0.5rem;
         }
@@ -14,9 +17,12 @@ overlay-demo {
     }
 }
 
-.overlay-container {
-    .ngx-menu-content {
-        &#anchorMenu {
+.ngx-menu {
+    .menu-content {
+        background-color: #fff;
+
+        &.anchor-menu,
+        &.button-menu {
             .menu-item {
                 white-space: nowrap;
                 padding: 0.5rem 2rem;
diff --git a/projects/demo-app/src/styles.scss b/projects/demo-app/src/styles.scss
index b66a7579..107e678c 100644
--- a/projects/demo-app/src/styles.scss
+++ b/projects/demo-app/src/styles.scss
@@ -75,8 +75,7 @@ body {
                     padding: 0.5rem;
                 }
 
-                > ul,
-                &ul {
+                > * {
                     padding: 0;
                     margin: 0;
                     display: flex;