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

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

@@ -0,0 +1,377 @@
+/**
+ * Copyright Aquera Inc 2025
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import '../nile-icon';
+import './nile-carousel-item/nile-carousel-item';
+import { html, CSSResultArray, TemplateResult } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { map } from 'lit/directives/map.js';
+import { range } from 'lit/directives/range.js';
+import { prefersReducedMotion } from '../internal/animate';
+import { watch } from '../internal/watch';
+import { styles } from './nile-carousel.css';
+import NileElement from '../internal/nile-element';
+import type { CSSResultGroup, PropertyValueMap } from 'lit';
+import type NileCarouselItem from './nile-carousel-item/nile-carousel-item';
+import {
+  isCarouselItem,
+  findMostVisibleSlide,
+  getPageCount,
+  getCurrentPage,
+  canScrollNext,
+  canScrollPrev,
+  shouldSnapToSlide,
+  scrollToSlide as scrollToSlideHelper,
+  goToSlide as goToSlideHelper
+} from './carousel-helpers';
+
+@customElement('nile-carousel')
+export class NileCarousel extends NileElement {
+  static styles: CSSResultArray = [styles];
+
+  @property({ type: Boolean, reflect: true }) navigation = false;
+
+  @property({ type: Boolean, reflect: true }) pagination = false;
+
+  @property({ type: Number, attribute: 'slides-per-page' }) slidesPerPage = 1;
+
+  @property({ type: Number, attribute: 'slides-per-move' }) slidesPerMove = 1;
+
+  @query('.carousel__slides') scrollContainer: HTMLElement;
+  @query('.carousel__pagination') paginationContainer: HTMLElement;
+
+  @state() activeSlide = 0;
+
+  @state() scrolling = false;
+
+  private mutationObserver: MutationObserver;
+  private pendingSlideChange = false;
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    this.setAttribute('role', 'region');
+    this.setAttribute('aria-label', 'carousel');
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.mutationObserver?.disconnect();
+  }
+
+  protected firstUpdated(): void {
+    this.initializeSlides();
+    this.mutationObserver = new MutationObserver(this.handleSlotChange);
+    this.mutationObserver.observe(this, {
+      childList: true,
+      subtree: true
+    });
+  }
+
+  protected willUpdate(changedProperties: PropertyValueMap<NileCarousel> | Map<PropertyKey, unknown>): void {
+    if (changedProperties.has('slidesPerMove') || changedProperties.has('slidesPerPage')) {
+      this.slidesPerMove = Math.min(this.slidesPerMove, this.slidesPerPage);
+    }
+  }
+
+  private getPageCount() {
+    const slidesCount = this.getSlides().length;
+    return getPageCount(slidesCount, this.slidesPerPage, this.slidesPerMove);
+  }
+
+  private getCurrentPage() {
+    return getCurrentPage(this.activeSlide, this.slidesPerMove);
+  }
+
+  private canScrollNext(): boolean {
+    return canScrollNext(this.getCurrentPage(), this.getPageCount());
+  }
+
+  private canScrollPrev(): boolean {
+    return canScrollPrev(this.getCurrentPage());
+  }
+
+  private getSlides() {
+    return [...this.children].filter(
+      (el: HTMLElement) => isCarouselItem(el)
+    ) as NileCarouselItem[];
+  }
+
+  private handleKeyDown(event: KeyboardEvent) {
+    if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) {
+      const target = event.target as HTMLElement;
+      const isFocusInPagination = target.closest('.carousel__pagination-item') !== null;
+      const isNext =
+        event.key === 'ArrowDown' || event.key === 'ArrowRight';
+      const isPrevious =
+        event.key === 'ArrowUp' || event.key === 'ArrowLeft';
+
+      event.preventDefault();
+
+      if (isPrevious) {
+        this.previous();
+      }
+
+      if (isNext) {
+        this.next();
+      }
+
+      if (event.key === 'Home') {
+        this.goToSlide(0);
+      }
+
+      if (event.key === 'End') {
+        this.goToSlide(this.getSlides().length - 1);
+      }
+
+      if (isFocusInPagination) {
+        this.updateComplete.then(() => {
+          const activePaginationItem = this.shadowRoot?.querySelector<HTMLButtonElement>(
+            '.carousel__pagination-item--active'
+          );
+
+          if (activePaginationItem) {
+            activePaginationItem.focus();
+          }
+        });
+      }
+    }
+  }
+
+  private handleScroll = () => {
+    if (!this.scrollContainer) {
+      return;
+    }
+
+    this.scrolling = true;
+
+    if (this.pendingSlideChange) {
+      return;
+    }
+
+    const slides = this.getSlides();
+    const mostVisibleSlide = findMostVisibleSlide(slides, this.scrollContainer);
+
+    if (mostVisibleSlide) {
+      const newActiveIndex = slides.indexOf(mostVisibleSlide);
+      if (newActiveIndex !== -1 && newActiveIndex !== this.activeSlide) {
+        this.activeSlide = newActiveIndex;
+      }
+    }
+  };
+
+  private handleScrollEnd = () => {
+    this.scrolling = false;
+    this.pendingSlideChange = false;
+    
+    if (this.scrollContainer) {
+      const slides = this.getSlides();
+      const mostVisibleSlide = findMostVisibleSlide(slides, this.scrollContainer);
+      
+      if (mostVisibleSlide) {
+        const newActiveIndex = slides.indexOf(mostVisibleSlide);
+        if (newActiveIndex !== -1 && newActiveIndex !== this.activeSlide) {
+          this.activeSlide = newActiveIndex;
+        }
+      }
+    }
+  };
+
+  private handleSlotChange = () => {
+    this.initializeSlides();
+  };
+
+  private initializeSlides() {
+    const slides = this.getSlides();
+    if (!slides.length) {
+      return;
+    }
+
+    slides.forEach((slide, i) => {
+      slide.classList.toggle('--is-active', i === this.activeSlide);
+    });
+
+    this.updateSlidesSnap();
+  }
+
+  @watch('activeSlide')
+  handleSlideChange() {
+    const slides = this.getSlides();
+    slides.forEach((slide, i) => {
+      slide.classList.toggle('--is-active', i === this.activeSlide);
+    });
+
+    if (this.hasUpdated) {
+      this.emit('nile-slide-change', {
+        detail: {
+          index: this.activeSlide,
+          slide: slides[this.activeSlide]
+        }
+      });
+    }
+  }
+
+  @watch('slidesPerMove')
+  updateSlidesSnap() {
+    const slides = this.getSlides();
+    const slidesPerMove = this.slidesPerMove;
+
+    slides.forEach((slide, i) => {
+      if (shouldSnapToSlide(i, slidesPerMove)) {
+        slide.style.removeProperty('scroll-snap-align');
+      } else {
+        slide.style.setProperty('scroll-snap-align', 'none');
+      }
+    });
+  }
+
+  previous(behavior: ScrollBehavior = 'smooth') {
+    this.goToSlide(this.activeSlide - this.slidesPerMove, behavior);
+  }
+
+  next(behavior: ScrollBehavior = 'smooth') {
+    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);
+    if (!result || !this.scrollContainer) {
+      return;
+    }
+
+    this.activeSlide = result.newActiveSlide;
+    const scrollBehavior = prefersReducedMotion() ? 'auto' : behavior;
+    scrollToSlideHelper(
+      result.slideToScroll,
+      this.scrollContainer,
+      scrollBehavior,
+      (value: boolean) => {
+        this.pendingSlideChange = value;
+      }
+    );
+  }
+
+  private renderNavigationButton(
+    direction: 'previous' | 'next',
+    enabled: boolean,
+    onClick: () => void
+  ): TemplateResult {
+    const isPrevious = direction === 'previous';
+    const iconName = isPrevious ? 'arrowleft' : 'arrowright';
+    const slotName = isPrevious ? 'previous-icon' : 'next-icon';
+    const partName = isPrevious ? 'navigation-button--previous' : 'navigation-button--next';
+    const ariaLabel = isPrevious ? 'Previous slide' : 'Next slide';
+
+    return html`
+      <button
+        part="navigation-button ${partName}"
+        class="${classMap({
+          'carousel__navigation-button': true,
+          [`carousel__navigation-button--${direction}`]: true,
+          'carousel__navigation-button--disabled': !enabled
+        })}"
+        aria-label="${ariaLabel}"
+        aria-controls="scroll-container"
+        aria-disabled="${enabled ? 'false' : 'true'}"
+        @click=${enabled ? onClick : null}
+      >
+        <slot name="${slotName}">
+          <nile-icon
+            library="system"
+            name="${iconName}"
+          ></nile-icon>
+        </slot>
+      </button>
+    `;
+  }
+
+  private renderScrollContainer(): TemplateResult {
+    return html`
+      <div
+        id="scroll-container"
+        part="scroll-container"
+        class="carousel__slides"
+        style="--slides-per-page: ${this.slidesPerPage};"
+        aria-busy="${this.scrolling ? 'true' : 'false'}"
+        aria-atomic="true"
+        tabindex="0"
+        @keydown=${this.handleKeyDown}
+        @scroll="${this.handleScroll}"
+        @scrollend=${this.handleScrollEnd}
+      >
+        <slot></slot>
+      </div>
+    `;
+  }
+
+  private renderPaginationItem(index: number, pagesCount: number, currentPage: number, slidesPerMove: number): TemplateResult {
+    const isActive = index === currentPage;
+    return html`
+      <button
+        part="pagination-item ${isActive ? 'pagination-item--active' : ''}"
+        class="${classMap({
+          'carousel__pagination-item': true,
+          'carousel__pagination-item--active': isActive
+        })}"
+        role="tab"
+        id="tab-${index + 1}"
+        aria-controls="slide-${index + 1}"
+        aria-selected="${isActive ? 'true' : 'false'}"
+        aria-label="${isActive
+          ? `Slide ${index + 1}`
+          : `Go to slide ${index + 1} of ${pagesCount}`}"
+        tabindex=${isActive ? '0' : '-1'}
+        @click=${() => this.goToSlide(index * slidesPerMove)}
+        @keydown=${this.handleKeyDown}
+      ></button>
+    `;
+  }
+
+  private renderPagination(): TemplateResult {
+    if (!this.pagination) {
+      return html``;
+    }
+
+    const pagesCount = this.getPageCount();
+    const currentPage = this.getCurrentPage();
+    const slidesPerMove = this.slidesPerMove;
+
+    return html`
+      <div part="pagination" role="tablist" class="carousel__pagination">
+        ${map(range(pagesCount), index => this.renderPaginationItem(index, pagesCount, currentPage, slidesPerMove))}
+      </div>
+    `;
+  }
+
+  render() {
+    const prevEnabled = this.canScrollPrev();
+    const nextEnabled = this.canScrollNext();
+
+    return html`
+      <div part="base" class="carousel">
+        <div class="carousel__content-wrapper">
+          ${this.navigation ? this.renderNavigationButton('previous', prevEnabled, () => this.previous()) : ''}
+          ${this.renderScrollContainer()}
+          ${this.navigation ? this.renderNavigationButton('next', nextEnabled, () => this.next()) : ''}
+        </div>
+        ${this.renderPagination()}
+      </div>
+    `;
+  }
+}
+
+export default NileCarousel;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-carousel': NileCarousel;
+  }
+}
+

package/src/nile-chip/nile-chip.ts

@@ -269,7 +269,10 @@ export class NileChip extends NileElement {
           ${this.tags.map((tag, index) => {
             const tooltipContent = this.tooltips[index];
             const isFocused = this.enableTagDelete && this.chipFocusIndex === index;
-            const tagText = tag ? tag.toString() : "";
+            let tagText = "";
+            if(tag || typeof tag === "number") {
+                tagText = tag.toString();
+            }
             const tagTemplate = html`
               <nile-tag
                 class=${classMap({

package/src/nile-skeleton-loader/nile-skeleton-loader.css.ts

@@ -32,12 +32,12 @@ export const styles = css`
   }
 
   .skeleton--text {
-    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs, 2px));
+    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
     height: 1em;
   }
 
   .skeleton--rounded {
-    border-radius: var(--nile-radius-radius-md, var(--ng-radius-md, 4px));
+    border-radius: var(--nile-radius-radius-md, var(--ng-radius-md));
   }
 
   @keyframes blink {

package/vscode-html-custom-data.json

@@ -686,6 +686,35 @@
         }
       ]
     },
+    {
+      "name": "nile-carousel-item",
+      "description": "Nile carousel-item component.\n\nProperties:\n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "attributes": []
+    },
+    {
+      "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`} - ",
+      "attributes": [
+        {
+          "name": "navigation",
+          "description": "`navigation` {`boolean`} - \n\nProperty: navigation\n\nDefault: false",
+          "valueSet": "v"
+        },
+        {
+          "name": "pagination",
+          "description": "`pagination` {`boolean`} - \n\nProperty: pagination\n\nDefault: false",
+          "valueSet": "v"
+        },
+        {
+          "name": "slides-per-page",
+          "description": "`slides-per-page` {`number`} - \n\nProperty: slidesPerPage\n\nDefault: 1"
+        },
+        {
+          "name": "slides-per-move",
+          "description": "`slides-per-move` {`number`} - \n\nProperty: slidesPerMove\n\nDefault: 1"
+        }
+      ]
+    },
     {
       "name": "nile-checkbox",
       "description": "Nile icon component.\n\nAttributes:\n\n  * `title` {`string`} - \n\n  * `name` {`string`} - The name of the checkbox, submitted as a name/value pair with form data.\n\n  * `value` {`boolean`} - The current value of the checkbox, submitted as a name/value pair with form data.\n\n  * `size` {`\"small\" | \"medium\" | \"large\"`} - The checkbox's size.\n\n  * `disabled` {`boolean`} - Disables the checkbox.\n\n  * `checked` {`boolean`} - Draws the checkbox in a checked state.\n\n  * `label` {`string`} - Label, declared this property for backward compatibility of old component\n\n  * `indeterminate` {`boolean`} - Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a \"select\nall/none\" behavior when associated checkboxes have a mix of checked and unchecked states.\n\n  * `help-text` {`string`} - \n\n  * `error-message` {`string`} - \n\n  * `showHelpText` {`boolean`} - \n\n  * `form` {`string`} - By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.\n\n  * `required` {`boolean`} - Makes the checkbox a required field.\n\nProperties:\n\n  * `styles` - \n\n  * `input` {`HTMLInputElement`} - \n\n  * `hasFocus` {`boolean`} - \n\n  * `title` {`string`} - \n\n  * `name` {`string`} - The name of the checkbox, submitted as a name/value pair with form data.\n\n  * `value` {`boolean`} - The current value of the checkbox, submitted as a name/value pair with form data.\n\n  * `size` {`\"small\" | \"medium\" | \"large\"`} - The checkbox's size.\n\n  * `disabled` {`boolean`} - Disables the checkbox.\n\n  * `checked` {`boolean`} - Draws the checkbox in a checked state.\n\n  * `label` {`string`} - Label, declared this property for backward compatibility of old component\n\n  * `indeterminate` {`boolean`} - Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a \"select\nall/none\" behavior when associated checkboxes have a mix of checked and unchecked states.\n\n  * `defaultChecked` {`boolean`} - The default value of the form control. Primarily used for resetting the form control.\n\n  * `helpText` {`string`} - \n\n  * `errorMessage` {`string`} - \n\n  * `showHelpText` {`boolean`} - \n\n  * `form` {`string`} - By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.\n\n  * `required` {`boolean`} - Makes the checkbox a required field.\n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",

package/dist/src/nile-css-tooltip/index.d.ts

@@ -1 +0,0 @@
-export { NileCssTooltip } from './nile-css-tooltip';

package/dist/src/nile-css-tooltip/index.js

@@ -1,2 +0,0 @@
-export { NileCssTooltip } from './nile-css-tooltip';
-//# sourceMappingURL=index.js.map

package/dist/src/nile-css-tooltip/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/nile-css-tooltip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC","sourcesContent":["export { NileCssTooltip } from './nile-css-tooltip';"]}

package/dist/src/nile-css-tooltip/nile-css-tooltip.css.d.ts

@@ -1,9 +0,0 @@
-/**
-* Copyright Aquera Inc 2025
-*
-* This source code is licensed under the BSD-3-Clause license found in the
-* LICENSE file in the root directory of this source tree.
-*/
-export declare const styles: import("lit").CSSResult;
-declare const _default: import("lit").CSSResult[];
-export default _default;