From c7c0aa48671a8e86ee564915ee017bc48f00a7f1 Mon Sep 17 00:00:00 2001
From: Meet Bhalodi <meetbhalodi@192.168.1.25>
Date: Sat, 12 Oct 2024 12:30:34 +0530
Subject: [PATCH 1/3] ftr: Add left/right arrow buttons on desktop view only
 added left right navigation buttons for desktop view added media query for
 showing those buttons on desktop view only (min screen size: 1024px)

---
 .../src/lib/ngx-stories.component.html        | 25 +++++++++++++++++
 .../src/lib/ngx-stories.component.scss        | 27 ++++++++++++++++++-
 2 files changed, 51 insertions(+), 1 deletion(-)

diff --git a/projects/ngx-stories/src/lib/ngx-stories.component.html b/projects/ngx-stories/src/lib/ngx-stories.component.html
index febf24b..996964c 100644
--- a/projects/ngx-stories/src/lib/ngx-stories.component.html
+++ b/projects/ngx-stories/src/lib/ngx-stories.component.html
@@ -31,5 +31,30 @@ <h5 [style.visibility]="isHolding ? 'hidden' : 'visible'">
   <button class="prev" (click)="navigateStory('previous')">Previous</button>
   }
   <button class="next" (click)="navigateStory('next')">Next</button>
+
+
+  <!-- Next button -->
+  <div class="desktop-navigation next-btn" role="button" tabindex="0" (click)="navigateStory('next')">
+    <svg aria-label="Next" fill="lightgray" height="24" role="img" viewBox="0 0 24 24" width="24">
+      <title>Next</title>
+      <path
+        d="M12.005.503a11.5 11.5 0 1 0 11.5 11.5 11.513 11.513 0 0 0-11.5-11.5Zm3.707 12.22-4.5 4.488A1 1 0 0 1 9.8 15.795l3.792-3.783L9.798 8.21a1 1 0 1 1 1.416-1.412l4.5 4.511a1 1 0 0 1-.002 1.414Z">
+      </path>
+    </svg>
+  </div>
+
+
+  @if(!(currentStoryGroupIndex === 0 && currentStoryIndex === 0) ) {
+  <!-- Previous button -->
+  <div class="desktop-navigation prev-btn" role="button" tabindex="0" (click)="navigateStory('previous')">
+    <svg aria-label="Previous" class="x1lliihq x1n2onr6 xq3z1fi" fill="lightgray" height="24" role="img"
+      viewBox="0 0 24 24" width="24">
+      <title>Previous</title>
+      <path
+        d="M12.005.503a11.5 11.5 0 1 0 11.5 11.5 11.513 11.513 0 0 0-11.5-11.5Zm2.207 15.294a1 1 0 1 1-1.416 1.412l-4.5-4.51a1 1 0 0 1 .002-1.415l4.5-4.489a1 1 0 0 1 1.412 1.416l-3.792 3.783Z">
+      </path>
+    </svg>
+  </div>
+  }
 </div>
 }
\ No newline at end of file
diff --git a/projects/ngx-stories/src/lib/ngx-stories.component.scss b/projects/ngx-stories/src/lib/ngx-stories.component.scss
index 1126ebc..ca8701c 100644
--- a/projects/ngx-stories/src/lib/ngx-stories.component.scss
+++ b/projects/ngx-stories/src/lib/ngx-stories.component.scss
@@ -1,6 +1,6 @@
 .story-container {
   position: relative;
-  overflow: hidden;
+  // overflow: hidden;
   border-radius: 10px;
   opacity: 0;
   display: none;
@@ -157,6 +157,31 @@ button:nth-child(1) {
   }
 }
 
+// Desktop navigation style
+.desktop-navigation {
+  cursor: pointer;
+  position: absolute;
+  top: 50%;
+  visibility: hidden;
+  pointer-events: none;
+
+  &.next-btn {
+    right: -2rem;
+  }
+
+  &.prev-btn {
+    left: -2rem;
+  }
+}
+
+// Navigation visible for desktop only
+@media (min-width: 1024px) {
+  .desktop-navigation {
+    visibility: visible;
+    pointer-events: all;
+  }
+}
+
 @media (min-width: 768px) {
   .story-content-container {
     button {

From 4432301773c63884f647af9376a98f16da020650 Mon Sep 17 00:00:00 2001
From: Meet Bhalodi <meetbhalodi@192.168.1.25>
Date: Sat, 12 Oct 2024 18:49:45 +0530
Subject: [PATCH 2/3] ftr: Add left/right arrow buttons on desktop view only
 Changed next/previous buttons as per requirements

---
 .../src/lib/ngx-stories.component.html        | 24 ++++---------------
 .../src/lib/ngx-stories.component.scss        | 15 ++++++++++--
 2 files changed, 17 insertions(+), 22 deletions(-)

diff --git a/projects/ngx-stories/src/lib/ngx-stories.component.html b/projects/ngx-stories/src/lib/ngx-stories.component.html
index 6b28ff0..26caaed 100644
--- a/projects/ngx-stories/src/lib/ngx-stories.component.html
+++ b/projects/ngx-stories/src/lib/ngx-stories.component.html
@@ -42,27 +42,11 @@ <h5 [style.visibility]="isHolding ? 'hidden' : 'visible'">
 
 
   <!-- Next button -->
-  <div class="desktop-navigation next-btn" role="button" tabindex="0" (click)="navigateStory('next')">
-    <svg aria-label="Next" fill="lightgray" height="24" role="img" viewBox="0 0 24 24" width="24">
-      <title>Next</title>
-      <path
-        d="M12.005.503a11.5 11.5 0 1 0 11.5 11.5 11.513 11.513 0 0 0-11.5-11.5Zm3.707 12.22-4.5 4.488A1 1 0 0 1 9.8 15.795l3.792-3.783L9.798 8.21a1 1 0 1 1 1.416-1.412l4.5 4.511a1 1 0 0 1-.002 1.414Z">
-      </path>
-    </svg>
-  </div>
-
+  <div class="desktop-navigation next-btn" role="button" tabindex="0" (click)="navigateStory('next')"></div>
 
-  @if(!(currentStoryGroupIndex === 0 && currentStoryIndex === 0) ) {
   <!-- Previous button -->
-  <div class="desktop-navigation prev-btn" role="button" tabindex="0" (click)="navigateStory('previous')">
-    <svg aria-label="Previous" class="x1lliihq x1n2onr6 xq3z1fi" fill="lightgray" height="24" role="img"
-      viewBox="0 0 24 24" width="24">
-      <title>Previous</title>
-      <path
-        d="M12.005.503a11.5 11.5 0 1 0 11.5 11.5 11.513 11.513 0 0 0-11.5-11.5Zm2.207 15.294a1 1 0 1 1-1.416 1.412l-4.5-4.51a1 1 0 0 1 .002-1.415l4.5-4.489a1 1 0 0 1 1.412 1.416l-3.792 3.783Z">
-      </path>
-    </svg>
-  </div>
-  }
+  <div class="desktop-navigation prev-btn" role="button" tabindex="0" (click)="navigateStory('previous')"
+    [ngClass]="{ 'disabled': (currentStoryGroupIndex === 0 && currentStoryIndex === 0) }"></div>
+
 </div>
 }
\ No newline at end of file
diff --git a/projects/ngx-stories/src/lib/ngx-stories.component.scss b/projects/ngx-stories/src/lib/ngx-stories.component.scss
index a990e60..29b51bf 100644
--- a/projects/ngx-stories/src/lib/ngx-stories.component.scss
+++ b/projects/ngx-stories/src/lib/ngx-stories.component.scss
@@ -163,15 +163,26 @@ button:nth-child(1) {
   cursor: pointer;
   position: absolute;
   top: 50%;
+  border-radius: 50% !important;
+  background-color: #d5d5d5 !important;
+  width: 48px;
+  height: 48px;
   visibility: hidden;
   pointer-events: none;
+  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="none"><path stroke="%23000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.4" d="m21.52 16.22 7.75 7.75m-7.75 7.78L29.27 24"/></svg>');
 
   &.next-btn {
-    right: -2rem;
+    right: -4rem;
   }
 
   &.prev-btn {
-    left: -2rem;
+    left: -4rem;
+    transform: rotate(180deg) !important;
+
+    &.disabled {
+      opacity: 40%;
+      pointer-events: none;
+    }
   }
 }
 

From d1d6d362b53fbbb04abaa8404f637a7fdc1d8dc4 Mon Sep 17 00:00:00 2001
From: Meet Bhalodi <meetbhalodi@192.168.1.25>
Date: Sun, 13 Oct 2024 11:00:42 +0530
Subject: [PATCH 3/3] ftr: Add left/right arrow buttons on desktop view only
 Added buttons instad of div

---
 projects/ngx-stories/src/lib/ngx-stories.component.html | 6 +++---
 projects/ngx-stories/src/lib/ngx-stories.component.scss | 1 +
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/projects/ngx-stories/src/lib/ngx-stories.component.html b/projects/ngx-stories/src/lib/ngx-stories.component.html
index 26caaed..7246221 100644
--- a/projects/ngx-stories/src/lib/ngx-stories.component.html
+++ b/projects/ngx-stories/src/lib/ngx-stories.component.html
@@ -42,11 +42,11 @@ <h5 [style.visibility]="isHolding ? 'hidden' : 'visible'">
 
 
   <!-- Next button -->
-  <div class="desktop-navigation next-btn" role="button" tabindex="0" (click)="navigateStory('next')"></div>
+  <button class="desktop-navigation next-btn" role="button" tabindex="0" (click)="navigateStory('next')"></button>
 
   <!-- Previous button -->
-  <div class="desktop-navigation prev-btn" role="button" tabindex="0" (click)="navigateStory('previous')"
-    [ngClass]="{ 'disabled': (currentStoryGroupIndex === 0 && currentStoryIndex === 0) }"></div>
+  <button class="desktop-navigation prev-btn" role="button" tabindex="0" (click)="navigateStory('previous')"
+    [ngClass]="{ 'disabled': (currentStoryGroupIndex === 0 && currentStoryIndex === 0) }"></button>
 
 </div>
 }
\ No newline at end of file
diff --git a/projects/ngx-stories/src/lib/ngx-stories.component.scss b/projects/ngx-stories/src/lib/ngx-stories.component.scss
index 29b51bf..1e810e2 100644
--- a/projects/ngx-stories/src/lib/ngx-stories.component.scss
+++ b/projects/ngx-stories/src/lib/ngx-stories.component.scss
@@ -169,6 +169,7 @@ button:nth-child(1) {
   height: 48px;
   visibility: hidden;
   pointer-events: none;
+  transform: none;
   background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="none"><path stroke="%23000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.4" d="m21.52 16.22 7.75 7.75m-7.75 7.78L29.27 24"/></svg>');
 
   &.next-btn {