@aquera/nile-elements 1.4.3-beta-1.0 → 1.4.4-beta-1.0

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "1.4.3-beta-1.0",
+  "version": "1.4.4-beta-1.0",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

package/src/nile-auto-complete/nile-auto-complete.ts

@@ -325,7 +325,7 @@ enableTabClose: this.enableTabClose,
   }
 
   private handleSearch(event: CustomEvent) {
-    this.value = event.detail.value.toLowerCase();
+    this.value = event.detail.value;
 
     // Filter menu items based on the search value
     this.menuItems = this.applyFilter(this.allMenuItems,this.filterFunction);

package/src/nile-carousel/carousel-helpers.ts

@@ -47,14 +47,20 @@ export function getPageCount(slidesCount: number, slidesPerPage: number, slidesP
 }
 
 export function getCurrentPage(activeSlide: number, slidesPerMove: number): number {
-  return Math.ceil(activeSlide / slidesPerMove);
+  return Math.floor(activeSlide / slidesPerMove);
 }
 
-export function canScrollNext(currentPage: number, pageCount: number): boolean {
+export function canScrollNext(currentPage: number, pageCount: number, loop: boolean = false): boolean {
+  if (loop) {
+    return true;
+  }
   return currentPage < pageCount - 1;
 }
 
-export function canScrollPrev(currentPage: number): boolean {
+export function canScrollPrev(currentPage: number, loop: boolean = false): boolean {
+  if (loop) {
+    return true;
+  }
   return currentPage > 0;
 }
 
@@ -119,14 +125,25 @@ export function goToSlide(
   index: number,
   slides: HTMLElement[],
   slidesPerPage: number,
-  behavior: ScrollBehavior = 'smooth'
+  behavior: ScrollBehavior = 'smooth',
+  loop: boolean = false
 ): { newActiveSlide: number; slideToScroll: HTMLElement } | null {
   if (!slides.length) {
     return null;
   }
 
-  const newActiveSlide = clamp(index, 0, slides.length - slidesPerPage);
-  const nextSlideIndex = clamp(index, 0, slides.length - 1);
+  let newActiveSlide: number;
+  let nextSlideIndex: number;
+
+  if (loop) {
+    const totalSlides = slides.length;
+    nextSlideIndex = ((index % totalSlides) + totalSlides) % totalSlides;
+    newActiveSlide = clamp(nextSlideIndex, 0, slides.length - slidesPerPage);
+  } else {
+    newActiveSlide = clamp(index, 0, slides.length - slidesPerPage);
+    nextSlideIndex = clamp(index, 0, slides.length - 1);
+  }
+
   const nextSlide = slides[nextSlideIndex];
 
   return {

package/src/nile-carousel/nile-carousel.css.ts

@@ -28,6 +28,14 @@ export const styles = css`
     align-items: center;
     gap: var(--nile-spacing-sm, var(--ng-spacing-sm));
     width: 100%;
+    position: relative;
+  }
+
+  .carousel__navigation-wrapper--top-right {
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--nile-spacing-md, var(--ng-spacing-md));
+    margin-bottom: var(--nile-spacing-sm, var(--ng-spacing-sm));
   }
 
   .carousel__slides {
@@ -63,50 +71,12 @@ export const styles = css`
     min-width: 0;
   }
 
-  .carousel__navigation-button {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 2.5rem;
-    height: 2.5rem;
-    padding: 0;
-    background: rgba(255, 255, 255, 0.9);
-    border: 1px solid var(--nile-colors-dark-200, var(--ng-colors-border-secondary));
-    border-radius: 50%;
-    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
-    cursor: pointer;
-    flex-shrink: 0;
-    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  }
-
-  .carousel__navigation-button:hover:not(.carousel__navigation-button--disabled) {
-    background: rgba(255, 255, 255, 1);
-    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-tertiary));
-    transform: scale(1.1);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  }
-
-  .carousel__navigation-button:active:not(.carousel__navigation-button--disabled) {
-    background: rgba(255, 255, 255, 1);
-    transform: scale(0.95);
-  }
-
   .carousel__navigation-button--disabled {
     opacity: 0.4;
     cursor: not-allowed;
     pointer-events: none;
   }
 
-  .carousel__navigation-button:focus {
-    outline: none;
-  }
-
-  .carousel__navigation-button:focus-visible {
-    outline: 2px solid var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));
-    outline-offset: 2px;
-  }
-
   .carousel__pagination {
     display: flex;
     align-items: center;

package/src/nile-carousel/nile-carousel.ts

@@ -6,6 +6,7 @@
  */
 
 import '../nile-icon';
+import '../nile-button';
 import './nile-carousel-item/nile-carousel-item';
 import { html, CSSResultArray, TemplateResult } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
@@ -38,6 +39,10 @@ export class NileCarousel extends NileElement {
 
   @property({ type: Boolean, reflect: true }) pagination = false;
 
+  @property({ type: Boolean, reflect: true }) loop = false;
+
+  @property({ type: String, attribute: 'navigation-position' }) navigationPosition: 'sides' | 'top-right' = 'sides';
+
   @property({ type: Number, attribute: 'slides-per-page' }) slidesPerPage = 1;
 
   @property({ type: Number, attribute: 'slides-per-move' }) slidesPerMove = 1;
@@ -88,11 +93,11 @@ export class NileCarousel extends NileElement {
   }
 
   private canScrollNext(): boolean {
-    return canScrollNext(this.getCurrentPage(), this.getPageCount());
+    return canScrollNext(this.getCurrentPage(), this.getPageCount(), this.loop);
   }
 
   private canScrollPrev(): boolean {
-    return canScrollPrev(this.getCurrentPage());
+    return canScrollPrev(this.getCurrentPage(), this.loop);
   }
 
   private getSlides() {
@@ -230,18 +235,30 @@ export class NileCarousel extends NileElement {
   }
 
   previous(behavior: ScrollBehavior = 'smooth') {
-    this.goToSlide(this.activeSlide - this.slidesPerMove, behavior);
+    const slides = this.getSlides();
+    if (this.loop && this.activeSlide === 0) {
+      this.goToSlide(slides.length - this.slidesPerMove, behavior);
+    } else {
+      this.goToSlide(this.activeSlide - this.slidesPerMove, behavior);
+    }
   }
 
   next(behavior: ScrollBehavior = 'smooth') {
-    this.goToSlide(this.activeSlide + this.slidesPerMove, behavior);
+    const slides = this.getSlides();
+    const maxIndex = slides.length - this.slidesPerPage;
+    
+    if (this.loop && this.activeSlide >= maxIndex) {
+      this.goToSlide(0, behavior);
+    } else {
+      this.goToSlide(this.activeSlide + this.slidesPerMove, behavior);
+    }
   }
 
   goToSlide(index: number, behavior: ScrollBehavior = 'smooth') {
     const { slidesPerPage } = this;
     const slides = this.getSlides();
 
-    const result = goToSlideHelper(index, slides, slidesPerPage, behavior);
+    const result = goToSlideHelper(index, slides, slidesPerPage, behavior, this.loop);
     if (!result || !this.scrollContainer) {
       return;
     }
@@ -264,22 +281,27 @@ export class NileCarousel extends NileElement {
     onClick: () => void
   ): TemplateResult {
     const isPrevious = direction === 'previous';
-    const iconName = isPrevious ? 'arrowleft' : 'arrowright';
+    const iconName = isPrevious 
+      ? 'var(--nile-icon-arrow-left, var(--ng-icon-arrow-narrow-left))' 
+      : 'var(--nile-icon-arrow-right, var(--ng-icon-arrow-narrow-right))';
     const slotName = isPrevious ? 'previous-icon' : 'next-icon';
     const partName = isPrevious ? 'navigation-button--previous' : 'navigation-button--next';
     const ariaLabel = isPrevious ? 'Previous slide' : 'Next slide';
+    const isTopRight = this.navigationPosition === 'top-right';
 
     return html`
-      <button
+      <nile-button
         part="navigation-button ${partName}"
         class="${classMap({
           'carousel__navigation-button': true,
           [`carousel__navigation-button--${direction}`]: true,
           'carousel__navigation-button--disabled': !enabled
         })}"
+        ?circle=${!isTopRight}
+        variant="tertiary"
+        ?disabled=${!enabled}
         aria-label="${ariaLabel}"
         aria-controls="scroll-container"
-        aria-disabled="${enabled ? 'false' : 'true'}"
         @click=${enabled ? onClick : null}
       >
         <slot name="${slotName}">
@@ -288,7 +310,7 @@ export class NileCarousel extends NileElement {
             name="${iconName}"
           ></nile-icon>
         </slot>
-      </button>
+      </nile-button>
     `;
   }
 
@@ -353,13 +375,20 @@ export class NileCarousel extends NileElement {
   render() {
     const prevEnabled = this.canScrollPrev();
     const nextEnabled = this.canScrollNext();
+    const isTopRight = this.navigationPosition === 'top-right';
 
     return html`
       <div part="base" class="carousel">
+        ${isTopRight && this.navigation ? html`
+          <div class="carousel__navigation-wrapper--top-right">
+            ${this.renderNavigationButton('previous', prevEnabled, () => this.previous())}
+            ${this.renderNavigationButton('next', nextEnabled, () => this.next())}
+          </div>
+        ` : ''}
         <div class="carousel__content-wrapper">
-          ${this.navigation ? this.renderNavigationButton('previous', prevEnabled, () => this.previous()) : ''}
+          ${!isTopRight && this.navigation ? this.renderNavigationButton('previous', prevEnabled, () => this.previous()) : ''}
           ${this.renderScrollContainer()}
-          ${this.navigation ? this.renderNavigationButton('next', nextEnabled, () => this.next()) : ''}
+          ${!isTopRight && this.navigation ? this.renderNavigationButton('next', nextEnabled, () => this.next()) : ''}
         </div>
         ${this.renderPagination()}
       </div>

package/vscode-html-custom-data.json

@@ -693,7 +693,7 @@
     },
     {
       "name": "nile-carousel",
-      "description": "Attributes:\n\n  * `navigation` {`boolean`} - \n\n  * `pagination` {`boolean`} - \n\n  * `slides-per-page` {`number`} - \n\n  * `slides-per-move` {`number`} - \n\nProperties:\n\n  * `styles` {`CSSResultArray`} - \n\n  * `navigation` {`boolean`} - \n\n  * `pagination` {`boolean`} - \n\n  * `slidesPerPage` {`number`} - \n\n  * `slidesPerMove` {`number`} - \n\n  * `scrollContainer` {`HTMLElement`} - \n\n  * `paginationContainer` {`HTMLElement`} - \n\n  * `activeSlide` {`number`} - \n\n  * `scrolling` {`boolean`} - \n\n  * `mutationObserver` {`MutationObserver`} - \n\n  * `pendingSlideChange` {`boolean`} - \n\n  * `handleScroll` - \n\n  * `handleScrollEnd` - \n\n  * `handleSlotChange` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Attributes:\n\n  * `navigation` {`boolean`} - \n\n  * `pagination` {`boolean`} - \n\n  * `loop` {`boolean`} - \n\n  * `navigation-position` {`\"sides\" | \"top-right\"`} - \n\n  * `slides-per-page` {`number`} - \n\n  * `slides-per-move` {`number`} - \n\nProperties:\n\n  * `styles` {`CSSResultArray`} - \n\n  * `navigation` {`boolean`} - \n\n  * `pagination` {`boolean`} - \n\n  * `loop` {`boolean`} - \n\n  * `navigationPosition` {`\"sides\" | \"top-right\"`} - \n\n  * `slidesPerPage` {`number`} - \n\n  * `slidesPerMove` {`number`} - \n\n  * `scrollContainer` {`HTMLElement`} - \n\n  * `paginationContainer` {`HTMLElement`} - \n\n  * `activeSlide` {`number`} - \n\n  * `scrolling` {`boolean`} - \n\n  * `mutationObserver` {`MutationObserver`} - \n\n  * `pendingSlideChange` {`boolean`} - \n\n  * `handleScroll` - \n\n  * `handleScrollEnd` - \n\n  * `handleSlotChange` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "navigation",
@@ -705,6 +705,23 @@
           "description": "`pagination` {`boolean`} - \n\nProperty: pagination\n\nDefault: false",
           "valueSet": "v"
         },
+        {
+          "name": "loop",
+          "description": "`loop` {`boolean`} - \n\nProperty: loop\n\nDefault: false",
+          "valueSet": "v"
+        },
+        {
+          "name": "navigation-position",
+          "description": "`navigation-position` {`\"sides\" | \"top-right\"`} - \n\nProperty: navigationPosition\n\nDefault: sides",
+          "values": [
+            {
+              "name": "sides"
+            },
+            {
+              "name": "top-right"
+            }
+          ]
+        },
         {
           "name": "slides-per-page",
           "description": "`slides-per-page` {`number`} - \n\nProperty: slidesPerPage\n\nDefault: 1"