feat(carousel): add scroll-buttons-position attribute

Author: zedix

src/components/carousel/carousel.component.ts

@@ -154,6 +154,9 @@ export default class Carousel extends LitElement {
   @property({ type: String, attribute: 'dot-appearance' })
   dotAppearance: 'circle' | 'bar' = 'bar';
 
+  @property({ type: String, attribute: 'scroll-button-position' })
+  scrollButtonsPosition: 'inside' | 'outside' = 'inside';
+
   @query('.button-previous') previousBtn!: HTMLButtonElement;
   @query('.button-next') nextBtn!: HTMLButtonElement;
   @query('.container') container!: HTMLSlotElement;
@@ -366,8 +369,11 @@ export default class Carousel extends LitElement {
     </button>`;
   }
 
-  renderNextPrevButtons() {
-    return html`<div class="buttons">
+  renderNextPreviousButtons() {
+    return html`<div
+      class="scroll-buttons scroll-buttons--${this.scrollButtonsPosition}"
+      part="scroll-buttons"
+    >
       <button part="button button-previous" class="button button-previous" type="button">
         <svg
           xmlns="http://www.w3.org/2000/svg"
@@ -402,7 +408,8 @@ export default class Carousel extends LitElement {
         <div part="viewport" class="viewport">
           <slot part="container" class="container" @slotchange=${this.handleSlotChange}></slot>
         </div>
-        ${this.withFullscreen ? this.renderFullscreenButton() : ''} ${this.renderNextPrevButtons()}
+        ${this.withFullscreen ? this.renderFullscreenButton() : ''}
+        ${this.renderNextPreviousButtons()}
         ${this.withDots
           ? html`<div class="dots" part="dots" role="tablist">
               ${map(this.embla.scrollSnapList(), (_, index) => {

src/components/carousel/carousel.stories.ts

@@ -176,7 +176,12 @@ export const Product: Story = {
 
 export const MoreProducts: Story = {
   render: () => html`
-    <zx-carousel drag-free with-scrollbar style="--slide-size: calc(100% / 3); --slide-gap: 1rem;">
+    <zx-carousel
+      drag-free
+      with-scrollbar
+      scroll-button-position="outside"
+      style="--slide-size: calc(100% / 3); --slide-gap: 1rem"
+    >
       ${repeat(
         Array.from({ length: 10 }),
         () => html`

src/components/carousel/carousel.styles.ts

@@ -87,22 +87,37 @@ export default css`
     min-width: 0;
   }
 
-  .buttons {
+  /*
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+   🆂🅲🆁🅾🅻🅻-🅱🆄🆃🆃🅾🅽🆂
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+  */
+  .scroll-buttons--inside {
     position: absolute;
     inset: 0;
     pointer-events: none;
   }
 
-  .inactive .buttons {
+  .scroll-buttons--outside {
+    /*
+    --button-arrow-color: white;
+    --button-bg: var(--dot-color-active);
+    --button-color: white;
+    --button-size: 44px;
+    */
+
+    display: flex;
+    gap: 6px;
+    justify-content: end;
+  }
+
+  .inactive .scroll-buttons {
     display: none;
   }
 
   .button-next,
   .button-previous,
   .button-fullscreen {
-    position: absolute;
-    top: calc(50% - (var(--button-size) / 2));
-    z-index: 1;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -120,14 +135,36 @@ export default css`
     -webkit-appearance: none;
   }
 
-  .button-previous {
+  .scroll-buttons--inside .button-previous,
+  .scroll-buttons--inside .button-next,
+  .button-fullscreen {
+    position: absolute;
+    top: calc(50% - (var(--button-size) / 2));
+    z-index: 1;
+  }
+
+  .scroll-buttons--outside .button-previous,
+  .scroll-buttons--outside .button-next {
+  }
+
+  .scroll-buttons--inside .button-previous {
     left: var(--button-offset);
   }
 
-  .button-next {
+  .scroll-buttons--inside .button-next {
     right: var(--button-offset);
   }
 
+  .scroll-buttons--inside .button:disabled {
+    visibility: hidden;
+  }
+
+  .button:disabled {
+    cursor: not-allowed;
+    pointer-events: none;
+    opacity: 0.4;
+  }
+
   .button-fullscreen {
     border-radius: 4px;
     right: var(--button-offset);
@@ -149,10 +186,6 @@ export default css`
     }
   }
 
-  .button:disabled {
-    visibility: hidden;
-  }
-
   .button svg {
     width: var(--button-arrow-size);
     height: var(--button-arrow-size);