@aquera/nile-elements 1.3.9-beta-1.4 → 1.4.0-beta-1.0

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

@@ -0,0 +1,404 @@
+/**
+ * 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 { clamp } from '../internal/math';
+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,
+  calculateScrollPosition
+} 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;
+
+  @property() orientation: 'horizontal' | 'vertical' = 'horizontal';
+
+  @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('[part~="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>(
+            '[part~="pagination-item--active"]'
+          );
+
+          if (activePaginationItem) {
+            activePaginationItem.focus();
+          }
+        });
+      }
+    }
+  }
+
+  private handleScroll = () => {
+    if (!this.scrollContainer) {
+      return;
+    }
+
+    this.scrolling = true;
+    this.pendingSlideChange = false;
+
+    const slides = this.getSlides();
+    const mostVisibleSlide = findMostVisibleSlide(slides, this.scrollContainer, this.orientation);
+
+    if (mostVisibleSlide) {
+      const newActiveIndex = slides.indexOf(mostVisibleSlide);
+      if (newActiveIndex !== -1 && newActiveIndex !== this.activeSlide) {
+        this.activeSlide = newActiveIndex;
+      }
+    }
+  };
+
+  private handleScrollEnd = () => {
+    this.scrolling = false;
+    this.pendingSlideChange = false;
+  };
+
+  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();
+
+    if (!slides.length) {
+      return;
+    }
+
+    const newActiveSlide = clamp(index, 0, slides.length - slidesPerPage);
+    this.activeSlide = newActiveSlide;
+
+    const nextSlideIndex = clamp(
+      index,
+      0,
+      slides.length - 1
+    );
+
+    const nextSlide = slides[nextSlideIndex];
+
+    this.scrollToSlide(nextSlide, prefersReducedMotion() ? 'auto' : behavior);
+  }
+
+  private scrollToSlide(slide: HTMLElement, behavior: ScrollBehavior = 'smooth') {
+    this.pendingSlideChange = true;
+    window.requestAnimationFrame(() => {
+      if (!this.scrollContainer) {
+        return;
+      }
+
+      const scrollContainer = this.scrollContainer;
+      const scrollContainerRect = scrollContainer.getBoundingClientRect();
+      const nextSlideRect = slide.getBoundingClientRect();
+
+      const nextLeft = nextSlideRect.left - scrollContainerRect.left;
+      const nextTop = nextSlideRect.top - scrollContainerRect.top;
+
+      if (nextLeft || nextTop) {
+        const scrollPosition = calculateScrollPosition(
+          nextSlideRect,
+          scrollContainerRect,
+          scrollContainer.scrollLeft,
+          scrollContainer.scrollTop
+        );
+
+        this.pendingSlideChange = true;
+        scrollContainer.scrollTo({
+          left: scrollPosition.left,
+          top: scrollPosition.top,
+          behavior
+        });
+      } else {
+        this.pendingSlideChange = false;
+      }
+    });
+  }
+
+  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="${classMap({
+          carousel__slides: true,
+          'carousel__slides--horizontal': this.orientation === 'horizontal',
+          'carousel__slides--vertical': this.orientation === 'vertical'
+        })}"
+        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

@@ -69,6 +69,9 @@ export class NileChip extends NileElement {
   /** Adds a clear button when the input is not empty. */
   @property({ type: Boolean }) acceptUserInput = false;
 
+  /** When true, adds a chip when the input loses focus or when clicking outside the component. Only works when acceptUserInput is true. */
+  @property({ type: Boolean }) addOnBlur = false;
+
   /** Adds a clear button when the input is not empty. */
   @property({ type: Boolean }) clearable = false;
 
@@ -190,6 +193,9 @@ export class NileChip extends NileElement {
   private handleDocumentClick = (event: MouseEvent) => {
     const path = event.composedPath();
     if (!path.includes(this)) {
+      if (this.addOnBlur && this.acceptUserInput && this.inputValue) {
+        this.addChipFromInputValue();
+      }
       this.isDropdownOpen = false;  
     }
   };
@@ -268,6 +274,7 @@ export class NileChip extends NileElement {
                 @nile-remove=${() => this.handleRemove(tag)}
                 removable
                 ?pill=${this.tagVariant !== 'normal'}
+                ?disabled=${this.disabled}
               >
                 ${unsafeHTML(tag)}
               </nile-tag>
@@ -297,6 +304,7 @@ export class NileChip extends NileElement {
                     @nile-input=${this.handleInputChange}
                     @keydown=${this.handleInputKeydown}
                     @focus=${this.handleFocus}
+                    @blur=${this.handleBlur}
                     exportparts="input"
                   ></nile-input>
                 `
@@ -322,6 +330,7 @@ export class NileChip extends NileElement {
                     @nile-input=${this.handleInputChange}
                     @keydown=${this.handleInputKeydown}
                     @nile-focus=${this.handleFocus}
+                    @nile-blur=${this.handleBlur}
                     @nile-complete=${this.handleSelect}
                   ></nile-auto-complete>
                 `}
@@ -402,6 +411,25 @@ export class NileChip extends NileElement {
     this.inputValue = event.detail.value;
   }
 
+  private addChipFromInputValue(): boolean {
+    if (this.noDuplicates && this.tags.includes(this.inputValue)) {
+      this.emit('nile-duplicates-blocked');
+      return false;
+    }
+
+    this.tags = [...this.tags, this.inputValue];
+    if (this.showTooltip) {
+      this.tooltips = [...this.tooltips, this.inputValue];
+    } else {
+      this.tooltips = [...this.tooltips, null];
+    }
+
+    this.inputValue = '';
+    this.visibilityManager?.cleanup();
+    this.emit('nile-chip-change', { value: this.tags });
+    return true;
+  }
+
   private handleInputKeydown(event: KeyboardEvent) {
      if (this.readonly) {
       const allowedKeys = ["ArrowUp", "ArrowDown", "Enter", "Tab"];
@@ -453,6 +481,12 @@ export class NileChip extends NileElement {
     this.isDropdownOpen = true;
   }
 
+  private handleBlur() {
+    if (this.addOnBlur && this.acceptUserInput && this.inputValue) {
+      this.addChipFromInputValue();
+    }
+  }
+
   onTagsChanged() {
     if (this.noDuplicates)
       this.filteredAutoCompleteOptions = this.filteredAutoCompleteOptions.filter(option => !this.tags.includes(option));

package/src/nile-date-picker/nile-date-picker.ts

@@ -71,6 +71,13 @@ export class NileDatePicker extends NileElement {
 
   @property({ type: String, attribute: true, reflect: true }) rangeSeparator = " - ";
 
+  @property({ type: Number, attribute: true, reflect: true }) startYear: number;
+
+  @property({ type: Number, attribute: true, reflect: true }) endYear: number;
+
+  @property({ type: Boolean, attribute: true, reflect: true }) showYearDropdown = false;
+
+  @property({ type: Boolean, attribute: true, reflect: true }) showMonthDropdown = false;
 
   @query('nile-dropdown') dropdown: NileDropdown;
 
@@ -154,6 +161,11 @@ export class NileDatePicker extends NileElement {
           .showManualInputs="${this.showManualInputs}"
           .doubleClickUnselect="${this.doubleClickUnselect}"
           .allowClear="${this.allowClear}"
+          .startYear="${this.startYear}"
+          .endYear="${this.endYear}"
+          ?showYearDropdown="${this.showYearDropdown}"
+          ?showMonthDropdown="${this.showMonthDropdown}"
+          .dateFormat="${this.dateFormat}"
         ></nile-calendar>
       </nile-dropdown>
     `;

package/src/nile-icon-button/nile-icon-button.ts

@@ -135,7 +135,7 @@ export class NileIconButton extends NileElement {
             'icon-button--disabled': !isLink && this.disabled,
             'icon-button--focused': this.hasFocus,
           })}
-          .disabled=${isLink}
+          .disabled=${isLink || this.disabled}
           type=${ifDefined(isLink ? undefined : 'button')}
           href=${ifDefined(isLink ? this.href : undefined)}
           target=${ifDefined(isLink ? this.target : undefined)}
@@ -176,7 +176,7 @@ export class NileIconButton extends NileElement {
             'icon-button--disabled': !isLink && this.disabled,
             'icon-button--focused': this.hasFocus,
           })}
-          .disabled=${isLink}
+          .disabled=${isLink || this.disabled}
           type=${ifDefined(isLink ? undefined : 'button')}
           href=${ifDefined(isLink ? this.href : undefined)}
           target=${ifDefined(isLink ? this.target : undefined)}

package/src/nile-inline-sidebar/nile-inline-sidebar.ts

@@ -164,13 +164,13 @@ export class NileInlineSidebar extends NileElement {
       `;
       return shouldShowTooltip || isTruncated
         ? html`
-            <nile-inline-tooltip
+            <nile-tooltip
               content=${item.textContent?.trim() || ''}
               hoist
               placement="right"
             >
               ${content}
-            </nile-inline-tooltip>
+            </nile-tooltip>
           `
         : content;
     });

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

@@ -201,7 +201,7 @@ export const styles = css`
   }
 
   .input--standard.input--disabled .input__control {
-    color:  var(--nile-color-dark-blue, var(--ng-colors-text-disabled));
+    color:  var(--nile-colors-neutral-500, var(--ng-colors-text-disabled));
   }
 
   .input--standard.input--disabled .input__control::placeholder {

package/src/nile-option-group/nile-option-group.css.ts

@@ -55,6 +55,20 @@ export const styles = css`
   :host(.nile-group-hidden)::part(option-group-header) {
 	display: none !important;
   }
+
+.option-group-header {
+  z-index: 2;
+}
+:host([sticky]) .option-group-header {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background: var(--nile-colors-dark-200);
+}
+:host([sticky][search-enabled]) .option-group-header {
+  top: 46px;
+}
+
 `;
 
 export default [styles];

package/src/nile-option-group/nile-option-group.ts

@@ -20,6 +20,7 @@ export class NileOptionGroup extends NileElement {
 
 	@property({type: String, reflect: true, attribute: true}) name: string = "";
 	@property({ type: Object, reflect: true, attribute: true}) data: OptionGroupData | null = null;
+	@property({ type: Boolean, reflect: true, attribute: true}) sticky = false;
 
 	private checkForImageOrIcon() {
 		return this.data?.prefix?.icon?.name || this.data?.prefix?.image?.src || this.data?.prefix?.prefixText;

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

@@ -504,8 +504,10 @@ export const styles = css`
   box-shadow: 0 0 0 1px  var(--ng-colors-border-brand) inset ;
 }
 
-
-
+:host([stickyHeader])  .select__footer{
+  z-index: 1;
+}
+ 
 `;
 
 export default [styles];

package/src/nile-select/nile-select.ts

@@ -296,6 +296,9 @@ export class NileSelect extends NileElement implements NileFormControl{
   /** loading indicator for virtual select */
   @property({ type: Boolean, reflect: true, attribute: true }) loading = false;
 
+  @property({ type: Boolean, reflect: true }) stickyHeader = false;
+
+
   /** Gets the validity state object */
   get validity() {
     return this.valueInput?.validity;
@@ -360,6 +363,9 @@ export class NileSelect extends NileElement implements NileFormControl{
   }
 
   protected updated(_changedProperties: PropertyValues): void {
+    if(_changedProperties.has('searchEnabled')) {
+      this.updateGroupStickyOffsets();
+    }
     if(_changedProperties.has('multiple')) {
       this.setCheckBoxInOption(this.multiple as boolean);
     }
@@ -371,6 +377,7 @@ export class NileSelect extends NileElement implements NileFormControl{
   protected firstUpdated(_changedProperties: PropertyValues): void {
     if(this.enableGroupHeader) {
       this.handleGroupSearchChange();
+      this.applyStickyToGroups();
     }
 
     this.setupResizeObserver();
@@ -454,7 +461,17 @@ export class NileSelect extends NileElement implements NileFormControl{
       this.hide();
     }
   }
-
+  private updateGroupStickyOffsets() {
+    const groups = this.querySelectorAll('nile-option-group');
+    groups.forEach(g => {
+      if (this.searchEnabled) {
+        g.setAttribute('search-enabled', '');
+      } else {
+        g.removeAttribute('search-enabled');
+      }
+    });
+  }
+  
 
  
  
@@ -760,11 +777,25 @@ export class NileSelect extends NileElement implements NileFormControl{
     }
   }
 
+  private applyStickyToGroups() {
+    const groups = this.querySelectorAll('nile-option-group');
+    groups.forEach(g => {
+      if (this.stickyHeader) {
+        g.setAttribute('sticky', '');
+      } else {
+        g.removeAttribute('sticky');
+      }
+    });
+  }
+
+  
   private handleDefaultSlotChange() {
     const allOptions = this.getAllOptions();
     const value = Array.isArray(this.value) ? this.value : [this.value];
     const values: string[] = [];
-
+    this.updateGroupStickyOffsets();
+    
+    this.applyStickyToGroups();
     // Check for duplicate values in menu items
     if (customElements.get('nile-option')) {
       allOptions.forEach(option => values.push(option.value));

package/src/nile-side-bar-footer-item/nile-side-bar-footer-item.css.ts

@@ -81,17 +81,9 @@ background: var(--nile-colors-neutral-400);
 border: none;
 }
   :host([collapsed][type='avatar']) .footer-item {
-  padding: 3px;
-  overflow: visible;
-  width: var(--ng-height-46px);
+  padding: 8px;
  
 }
- 
-:host([collapsed][type='avatar']) ::slotted([slot='text']),
-:host([collapsed][type='avatar']) ::slotted([slot='action']) {
-  display: none;
-}
-
 :host([collapsed]) .footer-item{
   height: 38px;
   width: 38px;