@aquera/nile-elements 1.3.3-beta-1.4 → 1.3.3-beta-1.6

package/dist/dist/types/src/nile-vertical-stepper-item/nile-vertical-stepper-item.d.ts

@@ -0,0 +1,50 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * 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 { CSSResultArray, TemplateResult } from 'lit';
+import NileElement from '../internal/nile-element';
+/**
+ * Nile vertical-stepper-item component.
+ *
+ * @tag nile-vertical-stepper-item
+ *
+ */
+export declare class NileVerticalStepperItem extends NileElement {
+    title: string;
+    subtitle: string;
+    completed: boolean;
+    current: boolean;
+    private contentBelow;
+    private size;
+    private icon;
+    private isFirst;
+    private isLast;
+    private isComplete;
+    private isCurrent;
+    private isManualMode;
+    private currentStepValue;
+    private completedStepValue;
+    private calculatedCompletedStepValue;
+    private value;
+    private haveFlex;
+    /**
+     * The styles for nile-vertical-stepper-item
+     * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+     */
+    static get styles(): CSSResultArray;
+    /**
+     * Render method
+     * @slot This is a slot test
+     */
+    render(): TemplateResult;
+    getSvg(): TemplateResult;
+}
+export default NileVerticalStepperItem;
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-vertical-stepper-item': NileVerticalStepperItem;
+    }
+}

package/dist/dist/types/src/nile-virtual-select/nile-virtual-select.css.d.ts

@@ -0,0 +1,12 @@
+/**
+ * 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.
+ */
+/**
+ * Select_2 CSS
+ */
+export declare const styles: import("lit").CSSResult;
+declare const _default: import("lit").CSSResult[];
+export default _default;

package/dist/dist/types/src/nile-virtual-select/nile-virtual-select.d.ts

@@ -0,0 +1,302 @@
+/**
+* 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-popup/nile-popup';
+import '../nile-tag/nile-tag';
+import '../nile-checkbox/nile-checkbox';
+import '../nile-loader/nile-loader';
+import NileElement from '../internal/nile-element';
+import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
+import type { NileFormControl } from '../internal/nile-element';
+import type NilePopup from '../nile-popup/nile-popup';
+import type { VirtualOption, RenderItemConfig } from './types.js';
+/**
+ * Nile Virtual Select component.
+ *
+ * @tag nile-virtual-select
+ *
+ */
+/**
+ * @summary Virtual select component for handling large datasets with virtual scrolling.
+ * @status stable
+ * @since 2.0
+ *
+ * @dependency nile-icon
+ * @dependency nile-popup
+ * @dependency nile-tag
+ * @dependency nile-checkbox
+ *
+ * @slot label - The input's label. Alternatively, you can use the `label` attribute.
+ * @slot prefix - Used to prepend a presentational icon or similar element to the combobox.
+ * @slot clear-icon - An icon to use in lieu of the default clear icon.
+ * @slot expand-icon - The icon to show when the control is expanded and collapsed.
+ * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
+ *
+ * @event nile-change - Emitted when the control's value changes.
+ * @event nile-clear - Emitted when the control's value is cleared.
+ * @event nile-input - Emitted when the control receives input.
+ * @event nile-focus - Emitted when the control gains focus.
+ * @event nile-blur - Emitted when the control loses focus.
+ * @event nile-show - Emitted when the select's menu opens.
+ * @event nile-after-show - Emitted after the select's menu opens and all animations are complete.
+ * @event nile-hide - Emitted when the select's menu closes.
+ * @event nile-after-hide - Emitted after the select's menu closes and all animations are complete.
+ * @event nile-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+ * @event nile-search - Emitted when the user types in the search input. The event payload includes the search query for backend search functionality.
+ * @event nile-scroll - Emitted when the user scrolls within the virtualized container. The event payload includes scroll position information.
+ * @event nile-scroll-start - Emitted when the user starts scrolling within the virtualized container.
+ * @event nile-scroll-end - Emitted when the user stops scrolling and reaches the bottom of the virtualized container (debounced).
+ *
+ * @csspart form-control - The form control that wraps the label, input, and help text.
+ * @csspart form-control-label - The label's wrapper.
+ * @csspart form-control-input - The select's wrapper.
+ * @csspart form-control-help-text - The help text's wrapper.
+ * @csspart combobox - The container the wraps the prefix, combobox, clear icon, and expand button.
+ * @csspart prefix - The container that wraps the prefix slot.
+ * @csspart display-input - The element that displays the selected option's label, an `<input>` element.
+ * @csspart listbox - The listbox container where options are slotted.
+ * @csspart tags - The container that houses option tags when `multiple` is used.
+ * @csspart tag - The individual tags that represent each multiselect option.
+ * @csspart clear-button - The clear button.
+ * @csspart expand-icon - The container that wraps the expand icon.
+ * @csspart footer - The footer container with show selected and clear all options.
+ */
+export declare class NileVirtualSelect extends NileElement implements NileFormControl {
+    static styles: CSSResultGroup;
+    private readonly formControlController;
+    private readonly hasSlotController;
+    private readonly portalManager;
+    popup: NilePopup;
+    combobox: HTMLElement;
+    displayInput: HTMLInputElement;
+    valueInput: HTMLInputElement;
+    virtualizedContainer: HTMLElement;
+    private hasFocus;
+    displayLabel: string;
+    selectedOptions: VirtualOption[];
+    oldValue: string | string[];
+    private scrollTimeout;
+    private scrolling;
+    private visibilityManager?;
+    /** The name of the select, submitted as a name/value pair with form data. */
+    name: string;
+    /** Array of all option items for virtual scrolling */
+    data: any;
+    /** Original unfiltered option items for search functionality */
+    private originalOptionItems;
+    /**
+     * The current value of the select. When `multiple` is enabled, the value will be an array of selected values.
+     */
+    value: string | string[];
+    /** The default value of the form control. Primarily used for resetting the form control. */
+    defaultValue: string | string[];
+    /** The select's size. */
+    size: 'small' | 'medium' | 'large';
+    /** Placeholder text to show as a hint when the select is empty. */
+    placeholder: string;
+    /** Enable automatic resizing of tags area */
+    autoResize: boolean;
+    /** Current search value */
+    searchValue: string;
+    /** Enable search functionality */
+    searchEnabled: boolean;
+    enableVisibilityEffect: boolean;
+    /** Search input placeholder */
+    internalSearchPlaceHolder: string;
+    /** Disable local search filtering */
+    disableLocalSearch: boolean;
+    /** Show loading state */
+    optionsLoading: boolean;
+    /** Show loading state using nile-loader */
+    loading: boolean;
+    /** Allows more than one option to be selected. */
+    multiple: boolean;
+    /** Help text */
+    helpText: string;
+    /** Error message */
+    errorMessage: string;
+    /** Sets the input to a warning state */
+    warning: boolean;
+    /** Sets the input to an error state */
+    error: boolean;
+    /** Sets the input to a success state */
+    success: boolean;
+    /** Disables the select control. */
+    disabled: boolean;
+    /** Adds a clear button when the select is not empty. */
+    clearable: boolean;
+    /** The select's open state. */
+    open: boolean;
+    /**
+     * Enable this option to prevent the listbox from being clipped when the component is placed inside a container with
+     * `overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.
+     */
+    hoist: boolean;
+    /** Draws a filled select. */
+    filled: boolean;
+    /** Draws a pill-style select with rounded edges. */
+    pill: boolean;
+    /** The select's label. If you need to display HTML, use the `label` slot instead. */
+    label: string;
+    /**
+     * The preferred placement of the select's menu. Note that the actual placement may vary as needed to keep the listbox
+     * inside of the viewport.
+     */
+    placement: 'top' | 'bottom';
+    /**
+     * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
+     * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
+     * the same document or shadow root for this to work.
+     */
+    form: string;
+    /** The select's required attribute. */
+    required: boolean;
+    /** Show no results message */
+    showNoResults: boolean;
+    /** No results message */
+    noResultsMessage: string;
+    /** Show selected options only */
+    showSelected: boolean;
+    /** Enhanced configuration for rendering items with support for display text, value, and search text */
+    renderItemConfig?: RenderItemConfig;
+    /** Block value change events */
+    blockValueChange: boolean;
+    /** Disable width synchronization */
+    noWidthSync: boolean;
+    /**
+     * When true, the listbox will be appended to the document body instead of the parent container.
+     * This is useful when the parent has overflow: hidden, clip-path, or transform applied.
+     */
+    portal: boolean;
+    /**
+     * The maximum number of selected options to show when `multiple` is true. After the maximum, "+n" will be shown to
+     * indicate the number of additional items that are selected. Set to 0 to remove the limit.
+     */
+    maxOptionsVisible: number;
+    oldMaxOptionsVisible: number;
+    enableTabClose: boolean;
+    showListbox: boolean;
+    private wasShowSelectedCheckedOnClose;
+    /** Gets the validity state object */
+    get validity(): ValidityState;
+    /** Gets the validation message */
+    get validationMessage(): string;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changedProperties: PropertyValues): void;
+    private initializeComponent;
+    /**
+     * Get display text for an item using renderItemConfig
+     */
+    private getDisplayText;
+    /**
+     * Get value for an item using renderItemConfig or fallback to item.value
+     */
+    private getItemValue;
+    /**
+     * Get search text for an item using renderItemConfig or fallback to display text
+     */
+    private getSearchText;
+    private setupEventListeners;
+    private addOpenListeners;
+    private removeOpenListeners;
+    private handleFocus;
+    private handleBlur;
+    protected firstUpdated(_changed: PropertyValues): void;
+    private handleDocumentFocusIn;
+    private handleDocumentKeyDown;
+    private shouldIgnoreKeyPress;
+    private isEscapeKey;
+    private handleEscapeKey;
+    private isEnterOrSpaceKey;
+    private handleEnterOrSpaceKey;
+    private handleDocumentMouseDown;
+    /**
+     * This is a workaround for an error in the Lit Labs virtualizer.
+     * Since there are no specific guidelines available to fix the issue,
+     * we are catching only the error message related to the virtualizer.
+     */
+    private handleWindowError;
+    private handleWindowResize;
+    private handleWindowScroll;
+    private handleFooterClick;
+    private toggleShowSelected;
+    private unSelectAll;
+    private handleLabelClick;
+    private handleComboboxMouseDown;
+    private resizeController;
+    private shouldIgnoreComboboxClick;
+    private handleComboboxKeyDown;
+    private handleClearClick;
+    private clearSelection;
+    private handleClearMouseDown;
+    private handleOptionClick;
+    private shouldBlockValueChange;
+    private handleOptionSelection;
+    private setSelectedOptions;
+    private toggleOptionSelection;
+    private handleTagRemove;
+    private removeTagFromSelection;
+    private emitTagRemovalEvent;
+    private selectionChanged;
+    handleSearchFocus(): void;
+    handleSearchBlur(): void;
+    handleSearchChange(e: any): void;
+    repaintOptionsContainer(): void;
+    handleScroll(e: Event): void;
+    filterVirtualOptions(searchValue: string): void;
+    private handleInvalid;
+    handleDisabledChange(): void;
+    handleValueChange(): void;
+    handleDataChange(): void;
+    handleRenderItemConfigChange(): void;
+    handleOptionsLoadingChange(): void;
+    handlePortalAppendChange(): void;
+    handleOpenChange(): Promise<void>;
+    private handleOpen;
+    private handleClose;
+    show(): Promise<unknown>;
+    hide(): Promise<unknown>;
+    checkValidity(): boolean;
+    getForm(): HTMLFormElement | null;
+    reportValidity(): boolean;
+    setCustomValidity(message: string): void;
+    focus(options?: FocusOptions): void;
+    blur(): void;
+    onInputChange(event: Event): void;
+    render(): TemplateResult;
+    private renderLabel;
+    private renderFormControlInput;
+    private renderPopup;
+    private renderCustomSelect;
+    private renderCombobox;
+    private renderPrefix;
+    private renderDisplayInput;
+    private renderTags;
+    private renderValueInput;
+    private renderClearButton;
+    private renderSuffix;
+    private renderExpandIcon;
+    private renderListbox;
+    private renderSearch;
+    private renderLoader;
+    private renderFooter;
+    private renderHelpText;
+    getVirtualizedContent(): TemplateResult;
+    nileInput(value: any): void;
+    nileChange(value: any): void;
+    private updateValidity;
+    private calculateWidthOfSelectTagsDiv;
+    private calculateTotalWidthOfTags;
+    private resetScrollPosition;
+}
+export default NileVirtualSelect;
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-virtual-select': NileVirtualSelect;
+    }
+}

package/dist/dist/types/src/nile-virtual-select/nile-virtual-select.test.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * 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 {};

package/dist/dist/types/src/nile-virtual-select/portal-manager.d.ts

@@ -0,0 +1,46 @@
+/**
+ * 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 { type Placement, type MiddlewareData } from '@floating-ui/dom';
+export declare class PortalManager {
+    private portalContainer;
+    private originalListboxParent;
+    private measuredPopupHeight;
+    private component;
+    private cleanupAutoUpdate;
+    private currentPlacement;
+    private currentMiddlewareData;
+    constructor(component: any);
+    private createPortalAppendContainer;
+    positionPortalAppend(): void;
+    private measurePopupHeight;
+    private computeFloatingUIPosition;
+    private calculateFloatingUIPosition;
+    private createFloatingUIMiddleware;
+    private handleSizeMiddleware;
+    private createCustomPlatform;
+    private applyFloatingUIPosition;
+    private fallbackPositioning;
+    private calculateAndSetAutoSizeProperties;
+    updatePortalAppendPosition(): void;
+    handleWindowResize(): void;
+    private setupAutoUpdatePositioning;
+    private cleanupAutoUpdatePositioning;
+    private extractStylesAsCSS;
+    private injectStylesToDocument;
+    private adoptStylesToPortalAppend;
+    setupPortalAppend(): void;
+    cleanupPortalAppend(): void;
+    resetScrollPosition(): Promise<void>;
+    get portalContainerElement(): HTMLElement | null;
+    resetMeasuredHeight(): void;
+    forceReposition(): void;
+    getCurrentPlacement(): Placement;
+    getCurrentMiddlewareData(): MiddlewareData | null;
+    isUsingFloatingUI(): boolean;
+    handleViewportChange(): void;
+    isPositioningOptimal(): boolean;
+}

package/dist/dist/types/src/nile-virtual-select/renderer.d.ts

@@ -0,0 +1,16 @@
+/**
+ * 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 { type TemplateResult } from 'lit';
+export declare class VirtualSelectRenderer {
+    static getVirtualizedContent(data: any[], searchEnabled: boolean, renderItemFunction: (item: any) => string, value: string | string[], multiple: boolean, getDisplayText?: (item: any) => string, getItemValue?: (item: any) => string, showNoResults?: boolean, noResultsMessage?: string, loading?: boolean, onScroll?: (e: Event) => void): TemplateResult;
+    static getItemRenderFunction(item: any, renderItemFunction: (item: any) => string, value: string | string[], multiple: boolean, getDisplayText?: (item: any) => string, getItemValue?: (item: any) => string): TemplateResult;
+    /**
+     * Determines whether to use virtualizer based on dataset size
+     * For small datasets (less than 5 items), use regular rendering for better sizing
+     */
+    private static shouldUseVirtualizer;
+}

package/dist/dist/types/src/nile-virtual-select/search-manager.d.ts

@@ -0,0 +1,12 @@
+/**
+ * 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 class VirtualSelectSearchManager {
+    static filterVirtualOptions(searchValue: string, originalOptionItems: any[], data: any[], renderItemFunction: (item: any) => string, getSearchText?: (item: any) => string): {
+        filteredItems: any[];
+        showNoResults: boolean;
+    };
+}

package/dist/dist/types/src/nile-virtual-select/selection-manager.d.ts

@@ -0,0 +1,12 @@
+/**
+ * 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 type { VirtualOption } from './types.js';
+export declare class VirtualSelectSelectionManager {
+    static createVirtualOptionsFromValues(value: string | string[], data: any[], getDisplayText: (item: any) => string, getItemValue?: (item: any) => string): VirtualOption[];
+    static updateDisplayLabel(selectedOptions: VirtualOption[], placeholder: string, multiple: boolean, value: string | string[]): string;
+    static updateValue(selectedOptions: VirtualOption[], multiple: boolean): string | string[];
+}

package/dist/dist/types/src/nile-virtual-select/types.d.ts

@@ -0,0 +1,50 @@
+/**
+ * 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 type NileRemoveEvent = CustomEvent<Record<PropertyKey, never>>;
+export interface VirtualOption {
+    value: string;
+    selected: boolean;
+    getTextLabel: () => string;
+    getOptionPrefix: () => string;
+}
+export interface RenderItemConfig {
+    getDisplayText: (item: any) => string;
+    getValue?: (item: any) => string;
+    getSearchText?: (item: any) => string;
+}
+export interface VirtualSelectProperties {
+    name: string;
+    data: any[];
+    value: string | string[];
+    size: 'small' | 'medium' | 'large';
+    placeholder: string;
+    searchEnabled: boolean;
+    internalSearchPlaceHolder: string;
+    disableLocalSearch: boolean;
+    optionsLoading: boolean;
+    multiple: boolean;
+    helpText: string;
+    errorMessage: string;
+    warning: boolean;
+    error: boolean;
+    success: boolean;
+    disabled: boolean;
+    clearable: boolean;
+    open: boolean;
+    hoist: boolean;
+    filled: boolean;
+    pill: boolean;
+    label: string;
+    placement: 'top' | 'bottom';
+    form: string;
+    required: boolean;
+    showNoResults: boolean;
+    noResultsMessage: string;
+    renderItemConfig?: RenderItemConfig;
+    blockValueChange: boolean;
+    noWidthSync: boolean;
+}

package/dist/dist/types/src/slot.d.ts

@@ -0,0 +1,23 @@
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+/** A reactive controller that determines when slots exist. */
+export declare class HasSlotController implements ReactiveController {
+    host: ReactiveControllerHost & Element;
+    slotNames: string[];
+    constructor(host: ReactiveControllerHost & Element, ...slotNames: string[]);
+    private hasDefaultSlot;
+    private hasNamedSlot;
+    test(slotName: string): boolean;
+    hostConnected(): void;
+    hostDisconnected(): void;
+    handleSlotChange(event: Event): void;
+}
+/**
+ * Given a slot, this function iterates over all of its assigned element and text nodes and returns the concatenated
+ * HTML as a string. This is useful because we can't use slot.innerHTML as an alternative.
+ */
+export declare function getInnerHTML(slot: HTMLSlotElement): string;
+/**
+ * Given a slot, this function iterates over all of its assigned text nodes and returns the concatenated text as a
+ * string. This is useful because we can't use slot.textContent as an alternative.
+ */
+export declare function getTextContent(slot: HTMLSlotElement | undefined | null): string;

package/dist/dist/types/src/utilities/animation-registry.d.ts

@@ -0,0 +1,24 @@
+export interface ElementAnimation {
+    keyframes: Keyframe[];
+    rtlKeyframes?: Keyframe[];
+    options?: KeyframeAnimationOptions;
+}
+export interface ElementAnimationMap {
+    [animationName: string]: ElementAnimation;
+}
+export interface GetAnimationOptions {
+    /**
+     * The component's directionality. When set to "rtl", `rtlKeyframes` will be preferred over `keyframes` where
+     * available using getAnimation().
+     */
+    dir: string;
+}
+/**
+ * Sets a default animation. Components should use the `name.animation` for primary animations and `name.part.animation`
+ * for secondary animations, e.g. `dialog.show` and `dialog.overlay.show`. For modifiers, use `drawer.showTop`.
+ */
+export declare function setDefaultAnimation(animationName: string, animation: ElementAnimation | null): void;
+/** Sets a custom animation for the specified element. */
+export declare function setAnimation(el: Element, animationName: string, animation: ElementAnimation | null): void;
+/** Gets an element's animation. Falls back to the default if no animation is found. */
+export declare function getAnimation(el: Element, animationName: string, options: GetAnimationOptions): ElementAnimation;

package/dist/dist/types/src/utilities/visibility-manager.d.ts

@@ -0,0 +1,20 @@
+export interface VisibilityManagerOptions {
+    host: HTMLElement;
+    target: HTMLElement | null;
+    enableVisibilityEffect?: boolean;
+    enableTabClose?: boolean;
+    onAnchorOutOfView?: (root?: Element | Document | null) => void;
+    onDocumentHidden?: () => void;
+    emit?: (event: string, detail?: Record<string, any>) => void;
+    isOpen?: () => boolean;
+}
+export declare class VisibilityManager {
+    private observers;
+    private options;
+    private handleVisibilityChange;
+    constructor(options: VisibilityManagerOptions);
+    setup(): void;
+    cleanup(): void;
+    private onDocumentVisibilityChange;
+    private getScrollableAncestors;
+}

package/dist/dist/types/src/version.d.ts

@@ -0,0 +1,2 @@
+export declare const NILE_ELEMENTS_VERSION = "__NILE_ELEMENTS_VERSION__";
+export declare const NILE_VERSION = "__NILE_VERSION__";

package/dist/dist/types/src/watch.d.ts

@@ -0,0 +1,26 @@
+import type { LitElement } from 'lit';
+type UpdateHandler = (prev?: unknown, next?: unknown) => void;
+type NonUndefined<A> = A extends undefined ? never : A;
+type UpdateHandlerFunctionKeys<T extends object> = {
+    [K in keyof T]-?: NonUndefined<T[K]> extends UpdateHandler ? K : never;
+}[keyof T];
+interface WatchOptions {
+    /**
+     * If true, will only start watching after the initial update/render
+     */
+    waitUntilFirstUpdate?: boolean;
+}
+/**
+ * Runs when observed properties change, e.g. @property or @state, but before the component updates. To wait for an
+ * update to complete after a change occurs, use `await this.updateComplete` in the handler. To start watching after the
+ * initial update/render, use `{ waitUntilFirstUpdate: true }` or `this.hasUpdated` in the handler.
+ *
+ * Usage:
+ *
+ * @watch('propName')
+ * handlePropChange(oldValue, newValue) {
+ *   ...
+ * }
+ */
+export declare function watch(propertyName: string | string[], options?: WatchOptions): <ElemClass extends LitElement>(proto: ElemClass, decoratedFnName: UpdateHandlerFunctionKeys<ElemClass>) => void;
+export {};