@keenmate/web-multiselect 1.0.0-rc02 → 1.0.0-rc04

package/src/scss/_rtl.scss

@@ -0,0 +1,142 @@
+// ==============================================================================
+// RTL (Right-to-Left) SUPPORT
+// ==============================================================================
+// Styles for RTL languages (Arabic, Hebrew, etc.)
+// Applied when .ml--rtl class is present
+
+@use 'variables' as *;
+
+// ==============================================================================
+// INPUT & TOGGLE ICON
+// ==============================================================================
+
+.ml--rtl {
+  .ml__input-wrapper {
+    direction: rtl;
+  }
+
+  .ml__input {
+    text-align: right;
+    padding-left: var(--ml-input-padding-right, $ml-input-padding-right);
+    padding-right: var(--ml-input-padding-h, $ml-input-padding-h);
+  }
+
+  // Move toggle icon to left side
+  .ml__toggle {
+    left: var(--ml-toggle-right, $ml-toggle-right) !important;
+    right: auto !important;
+  }
+
+  // Move count badge to left side
+  .ml__count-badge {
+    left: var(--ml-count-badge-offset, $ml-count-badge-offset) !important;
+    right: auto !important;
+  }
+
+  // ==============================================================================
+  // DROPDOWN OPTIONS
+  // ==============================================================================
+
+  .ml__dropdown {
+    direction: rtl;
+    text-align: right;
+  }
+
+  // Checkbox on right side
+  .ml__option {
+    flex-direction: row-reverse;
+  }
+
+  .ml__checkbox {
+    margin-left: var(--ml-spacing-sm, $ml-spacing-sm);
+    margin-right: 0;
+  }
+
+  .ml__option-content {
+    text-align: right;
+  }
+
+  .ml__option-icon {
+    margin-left: var(--ml-spacing-xs, $ml-spacing-xs);
+    margin-right: 0;
+  }
+
+  // ==============================================================================
+  // PILLS LAYOUT
+  // ==============================================================================
+
+  .ml__pills {
+    direction: rtl;
+  }
+
+  // Pills flow right-to-left
+  .ml__pill {
+    flex-direction: row-reverse;
+  }
+
+  // Remove button on left side of pill
+  .ml__pill-remove {
+    border-radius: var(--ml-pill-remove-border-radius-rtl, $ml-pill-border-radius) 0 0 var(--ml-pill-remove-border-radius-rtl, $ml-pill-border-radius);
+    border-left: var(--ml-pill-remove-border, $ml-pill-remove-border);
+    border-right: none;
+  }
+
+  // Pill text rounded on right
+  .ml__pill-text {
+    border-radius: 0 var(--ml-pill-text-border-radius-rtl, $ml-pill-border-radius) var(--ml-pill-text-border-radius-rtl, $ml-pill-border-radius) 0;
+  }
+
+  // ==============================================================================
+  // COUNT DISPLAY
+  // ==============================================================================
+
+  .ml__count-display {
+    direction: rtl;
+  }
+
+  .ml__count-badge-wrapper {
+    flex-direction: row-reverse;
+  }
+
+  // ==============================================================================
+  // SELECTED POPOVER
+  // ==============================================================================
+
+  .ml__selected-popover {
+    direction: rtl;
+    text-align: right;
+  }
+
+  // ==============================================================================
+  // ACTIONS
+  // ==============================================================================
+
+  .ml__actions {
+    direction: rtl;
+  }
+
+  // ==============================================================================
+  // GROUPS
+  // ==============================================================================
+
+  .ml__group-label {
+    text-align: right;
+  }
+
+  // ==============================================================================
+  // EMPTY STATE
+  // ==============================================================================
+
+  .ml__empty {
+    text-align: right;
+  }
+
+  // ==============================================================================
+  // HINT
+  // ==============================================================================
+
+  .ml__hint {
+    direction: rtl;
+    text-align: right;
+  }
+}

package/src/scss/_variables.scss

@@ -330,8 +330,8 @@ $ml-pill-gap: $ml-spacing-sm !default;
 $ml-pills-gap: $ml-pill-gap !default;
 $ml-pills-margin-bottom: $ml-spacing-sm !default;
 $ml-pills-margin-top: $ml-spacing-sm !default;
-$ml-pills-margin-left: $ml-spacing-sm !default;
-$ml-pills-margin-right: $ml-spacing-sm !default;
+$ml-pills-margin-left: $ml-spacing-xs !default;
+$ml-pills-margin-right: $ml-spacing-xs !default;
 
 // Count Display
 // ==============================================================================

package/src/scss/main.scss

@@ -10,6 +10,7 @@
 // - _options.scss         : Options list, groups, checkbox, content, states
 // - _pills-display.scss   : Pills, count display, individual pills
 // - _tooltips-popover.scss: Pill tooltips + selected items popover
+// - _rtl.scss             : RTL (Right-to-Left) language support
 // - _modifiers.scss       : Size variants + state modifiers
 // - _debug.scss           : Debug information panel
 
@@ -20,5 +21,6 @@
 @use 'options';
 @use 'pills-display';
 @use 'tooltips-popover';
+@use 'rtl';
 @use 'modifiers';
 @use 'debug';

package/dist/index.d.ts

@@ -1,26 +0,0 @@
-import './scss/main.scss';
-import { MultiSelectElement } from './web-component';
-export { MultiSelectElement };
-export { PureMultiSelect } from './multiselect';
-export type { MultiSelectOption, MultiSelectOptions, MultiSelectEventDetail, PillsDisplayMode, PillsPosition, PillsThresholdMode, SearchInputMode, ValueFormat } from './types';
-import './web-component';
-export interface GlobalMultiSelectAPI {
-    version: () => string;
-    config: {
-        name: string;
-        version: string;
-        author: string;
-        license: string;
-        repository: string;
-        homepage: string;
-    };
-    register: () => void;
-    getInstances: () => HTMLElement[];
-}
-declare global {
-    interface Window {
-        keenmate?: {
-            multiselect?: GlobalMultiSelectAPI;
-        };
-    }
-}

package/dist/multiselect.d.ts

@@ -1,117 +0,0 @@
-/**
- * Pure Admin - MultiSelect with Typeahead
- * Comprehensive multiselect component with rich content support and floating hints
- */
-import type { MultiSelectConfig } from './types';
-export declare class PureMultiSelect<T = any> {
-    private element;
-    private instanceId;
-    private options;
-    private isOpen;
-    private selectedValues;
-    private selectedOptions;
-    private allOptions;
-    private filteredOptions;
-    private hiddenInputs;
-    private focusedIndex;
-    private searchTerm;
-    private isLoading;
-    private showSelectedPopover;
-    private selectedPopoverPlacement;
-    private dropdownPlacement;
-    private dropdownCleanup;
-    private hintCleanup;
-    private selectedPopoverCleanup;
-    private pillTooltips;
-    private pillTooltipCleanups;
-    private input;
-    private dropdown;
-    private pillsContainer;
-    private countBadge;
-    private hint?;
-    private selectedPopover;
-    /**
-     * Extract value/ID from item
-     * Precedence: tuple[0] -> valueMember -> getValueCallback -> '[N/A]'
-     */
-    private getItemValue;
-    /**
-     * Extract display value from item
-     * Precedence: tuple[1] -> displayValueMember -> getDisplayValueCallback -> '[N/A]'
-     */
-    private getItemDisplayValue;
-    /**
-     * Extract search value from item
-     * Precedence: searchValueMember -> getSearchValueCallback -> displayValue
-     */
-    private getItemSearchValue;
-    /**
-     * Extract icon from item
-     */
-    private getItemIcon;
-    /**
-     * Extract subtitle from item
-     */
-    private getItemSubtitle;
-    /**
-     * Extract group from item
-     */
-    private getItemGroup;
-    /**
-     * Extract disabled state from item
-     */
-    private getItemDisabled;
-    constructor(element: HTMLElement, options?: Partial<MultiSelectConfig<T>>);
-    private init;
-    private parseOptions;
-    private buildHTML;
-    private renderDropdown;
-    private renderOption;
-    private highlightMatch;
-    private groupOptions;
-    private renderPills;
-    private attachEvents;
-    private handleSearch;
-    private handleKeydown;
-    private handleDropdownClick;
-    private handlePillClick;
-    private handleClickOutside;
-    private focusNext;
-    private focusPrevious;
-    private focusFirst;
-    private focusLast;
-    private focusPageUp;
-    private focusPageDown;
-    private scrollToFocused;
-    private toggleOption;
-    private handleAddNew;
-    private selectOption;
-    private deselectOption;
-    private selectAll;
-    private clearAll;
-    private open;
-    private close;
-    private positionDropdown;
-    private positionHint;
-    private parseInitialSelection;
-    private toggleSelectedPopover;
-    private showPopover;
-    private hideSelectedPopover;
-    private renderSelectedPopover;
-    private handleSelectedPopoverClick;
-    private positionSelectedPopover;
-    private updateHiddenInput;
-    private getFormValue;
-    getSelected(): T[];
-    setSelected(values: (string | number)[]): void;
-    get selectedItem(): T | null;
-    get selectedValue(): string | number | (string | number)[] | null;
-    getValue(): string | number | (string | number)[] | null;
-    private attachPillTooltips;
-    private createTooltipForElement;
-    private createRemoveButtonTooltip;
-    private positionPillTooltip;
-    private cleanupPillTooltip;
-    private destroyAllPillTooltips;
-    destroy(): void;
-}

package/dist/types.d.ts

@@ -1,187 +0,0 @@
-/**
- * Type definitions for the MultiSelect component
- */
-import type { Placement } from '@floating-ui/dom';
-/**
- * Position of the pills container relative to the input
- */
-export type PillsPosition = 'top' | 'bottom' | 'left' | 'right';
-/**
- * Search input display mode
- */
-export type SearchInputMode = 'normal' | 'readonly' | 'hidden';
-/**
- * Value format for serialization (forms and callbacks)
- */
-export type ValueFormat = 'json' | 'csv' | 'array';
-/**
- * Threshold behavior mode when pills exceed threshold
- */
-export type PillsThresholdMode = 'count' | 'partial';
-/**
- * Display mode for selected items (pills area)
- */
-export type PillsDisplayMode = 'pills' | 'count' | 'compact' | 'partial';
-/**
- * Support both object arrays and [key, value] tuples
- */
-export type MultiSelectDataItem<T> = T | [string | number, string];
-/**
- * Generic configuration options for the MultiSelect component
- * @template T The type of data items
- */
-export interface MultiSelectConfig<T = any> {
-    /** Options array - can be objects or [key, value] tuples */
-    options?: T[];
-    /** Member property name for value/ID extraction */
-    valueMember?: string;
-    /** Callback to extract value/ID from item */
-    getValueCallback?: (item: T) => string | number;
-    /** Member property name for display value extraction */
-    displayValueMember?: string;
-    /** Callback to extract display value from item */
-    getDisplayValueCallback?: (item: T) => string;
-    /** Member property name for search value extraction */
-    searchValueMember?: string;
-    /** Callback to extract search value from item */
-    getSearchValueCallback?: (item: T) => string;
-    /** Member property name for icon extraction */
-    iconMember?: string;
-    /** Callback to extract icon from item */
-    getIconCallback?: (item: T) => string;
-    /** Member property name for subtitle extraction */
-    subtitleMember?: string;
-    /** Callback to extract subtitle from item */
-    getSubtitleCallback?: (item: T) => string;
-    /** Member property name for group extraction */
-    groupMember?: string;
-    /** Callback to extract group from item */
-    getGroupCallback?: (item: T) => string;
-    /** Member property name for disabled state extraction */
-    disabledMember?: string;
-    /** Callback to extract disabled state from item */
-    getDisabledCallback?: (item: T) => boolean;
-    /** HTML form field ID/name for hidden input */
-    formFieldId?: string;
-    /** Format for value serialization (forms and callbacks) */
-    valueFormat?: ValueFormat;
-    /** Custom callback to format value */
-    getValueFormatCallback?: (selectedValues: (string | number)[]) => string;
-    /** Allow multiple selections (internal: isMultipleEnabled) */
-    isMultipleEnabled?: boolean;
-    /** Enable search/filtering (internal: isSearchEnabled) */
-    isSearchEnabled?: boolean;
-    /** Allow grouping of options (internal: isGroupsAllowed) */
-    isGroupsAllowed?: boolean;
-    /** Show 'Select All' button (internal: isSelectAllAllowed) */
-    isSelectAllAllowed?: boolean;
-    /** Show 'Clear All' button (internal: isClearAllAllowed) */
-    isClearAllAllowed?: boolean;
-    /** Show checkboxes next to options (internal: isCheckboxesShown) */
-    isCheckboxesShown?: boolean;
-    /** Keep Select All/Clear All buttons fixed at top while scrolling (internal: isActionsSticky) */
-    isActionsSticky?: boolean;
-    /** Close dropdown after selecting an option (internal: isCloseOnSelect) */
-    isCloseOnSelect?: boolean;
-    /** Lock dropdown placement after first open (internal: isPlacementLocked) */
-    isPlacementLocked?: boolean;
-    /** Allow adding new options not in the list (internal: isAddNewAllowed) */
-    isAddNewAllowed?: boolean;
-    /** Show count badge next to toggle icon (internal: isCountBadgeShown) */
-    isCountBadgeShown?: boolean;
-    /** Hint text shown above the input when focused */
-    searchHint?: string;
-    /** Placeholder text for the search input */
-    searchPlaceholder?: string;
-    /** Minimum width for the dropdown (e.g., '20rem', '300px') */
-    dropdownMinWidth?: string | null;
-    /** Display mode for selected items in pills area */
-    pillsDisplayMode?: PillsDisplayMode;
-    /** Position of pills container */
-    pillsPosition?: PillsPosition;
-    /** Threshold behavior mode: 'count' shows count badge, 'partial' shows limited pills + more badge */
-    pillsThresholdMode?: PillsThresholdMode;
-    /** Maximum height for dropdown */
-    maxHeight?: string;
-    /** Message shown when no results found */
-    emptyMessage?: string;
-    /** Message shown while loading async data */
-    loadingMessage?: string;
-    /** Search input display mode */
-    searchInputMode?: SearchInputMode;
-    /** Auto-switch from pills to count when threshold is exceeded */
-    pillsThreshold?: number | null;
-    /** Maximum number of pills to show in partial mode (used with thresholdMode='partial') */
-    pillsMaxVisible?: number | null;
-    /** Minimum search length before loading data */
-    minSearchLength?: number;
-    /** Async function to load data: (searchTerm) => Promise<options[]> */
-    searchCallback?: ((searchTerm: string) => Promise<T[]>) | null;
-    /** Callback to add a new option when isAddNewAllowed is true */
-    addNewCallback?: ((value: string) => T | Promise<T>) | null;
-    /** Callback when an option is selected */
-    selectCallback?: ((option: T) => void) | null;
-    /** Callback when an option is deselected */
-    deselectCallback?: ((option: T) => void) | null;
-    /** Callback when selection changes */
-    changeCallback?: ((selectedOptions: T[]) => void) | null;
-    /** Callback to format count pill text (for i18n/pluralization). When moreCount is provided, it's for the "+X more" badge in partial mode. */
-    getCountPillCallback?: ((count: number, moreCount?: number) => string) | null;
-    /** Enable tooltips on selected item pills (internal: isPillTooltipsEnabled) */
-    isPillTooltipsEnabled?: boolean;
-    /** Callback to generate custom tooltip content for a pill */
-    getPillTooltipCallback?: ((item: T) => string | HTMLElement) | null;
-    /** Tooltip placement relative to pill */
-    pillTooltipPlacement?: Placement;
-    /** Delay before showing tooltip in milliseconds */
-    pillTooltipDelay?: number;
-    /** Offset distance for tooltip in pixels */
-    pillTooltipOffset?: number;
-    /** Container element for dropdown/hint/popover (for Shadow DOM support) */
-    container?: HTMLElement | null;
-    /** Host element for appending hidden inputs (for form integration with shadow DOM) */
-    hostElement?: HTMLElement;
-}
-/**
- * Event detail structure for multiselect events
- * @template T The type of data items
- */
-export interface MultiSelectEventDetail<T = any> {
-    /** Currently selected options */
-    selectedOptions: T[];
-    /** Selected values array */
-    selectedValues: (string | number)[];
-    /** The option that triggered the event (for select/deselect) */
-    option?: T;
-}
-/**
- * Legacy interface for backward reference
- * Note: New code should use generic types with member/callback properties
- * @deprecated Use generic types with valueMember/displayValueMember instead
- */
-export interface MultiSelectOption {
-    /** Unique identifier for the option */
-    value: string;
-    /** Display label */
-    label: string;
-    /** Optional icon or emoji */
-    icon?: string;
-    /** Optional subtitle/description */
-    subtitle?: string;
-    /** Optional group name */
-    group?: string;
-    /** Whether the option is disabled */
-    disabled?: boolean;
-}
-/**
- * Legacy options interface
- * @deprecated Use MultiSelectConfig<T> instead
- */
-export interface MultiSelectOptions extends MultiSelectConfig<MultiSelectOption> {
-    options?: MultiSelectOption[];
-    searchCallback?: ((searchTerm: string) => Promise<MultiSelectOption[]>) | null;
-    addNewCallback?: ((value: string) => MultiSelectOption | Promise<MultiSelectOption>) | null;
-    selectCallback?: ((option: MultiSelectOption) => void) | null;
-    deselectCallback?: ((option: MultiSelectOption) => void) | null;
-    changeCallback?: ((selectedOptions: MultiSelectOption[]) => void) | null;
-}

package/dist/web-component.d.ts

@@ -1,103 +0,0 @@
-export declare function getAllInstances(): MultiSelectElement[];
-export declare class MultiSelectElement<T = any> extends HTMLElement {
-    private picker?;
-    private containerElement?;
-    private shadow;
-    private _options?;
-    private _valueMember?;
-    private _getValueCallback?;
-    private _displayValueMember?;
-    private _getDisplayValueCallback?;
-    private _searchValueMember?;
-    private _getSearchValueCallback?;
-    private _iconMember?;
-    private _getIconCallback?;
-    private _subtitleMember?;
-    private _getSubtitleCallback?;
-    private _groupMember?;
-    private _getGroupCallback?;
-    private _disabledMember?;
-    private _getDisabledCallback?;
-    private _getValueFormatCallback?;
-    private _getPillTooltipCallback?;
-    private _getCountPillCallback?;
-    private _searchCallback?;
-    private _addNewCallback?;
-    private _selectCallback?;
-    private _deselectCallback?;
-    private _changeCallback?;
-    static get observedAttributes(): string[];
-    constructor();
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
-    private render;
-    private renderDebugInfo;
-    private updateDebugInfo;
-    private initializePicker;
-    private reinitialize;
-    get options(): T[] | undefined;
-    set options(value: T[] | undefined);
-    set valueMember(value: string | null);
-    get valueMember(): string | null;
-    set displayValueMember(value: string | null);
-    get displayValueMember(): string | null;
-    set searchValueMember(value: string | null);
-    get searchValueMember(): string | null;
-    set iconMember(value: string | null);
-    get iconMember(): string | null;
-    set subtitleMember(value: string | null);
-    get subtitleMember(): string | null;
-    set groupMember(value: string | null);
-    get groupMember(): string | null;
-    set disabledMember(value: string | null);
-    get disabledMember(): string | null;
-    set getValueCallback(callback: ((item: T) => string | number) | undefined);
-    get getValueCallback(): ((item: T) => string | number) | undefined;
-    set getDisplayValueCallback(callback: ((item: T) => string) | undefined);
-    get getDisplayValueCallback(): ((item: T) => string) | undefined;
-    set getSearchValueCallback(callback: ((item: T) => string) | undefined);
-    get getSearchValueCallback(): ((item: T) => string) | undefined;
-    set getIconCallback(callback: ((item: T) => string) | undefined);
-    get getIconCallback(): ((item: T) => string) | undefined;
-    set getSubtitleCallback(callback: ((item: T) => string) | undefined);
-    get getSubtitleCallback(): ((item: T) => string) | undefined;
-    set getGroupCallback(callback: ((item: T) => string) | undefined);
-    get getGroupCallback(): ((item: T) => string) | undefined;
-    set getDisabledCallback(callback: ((item: T) => boolean) | undefined);
-    get getDisabledCallback(): ((item: T) => boolean) | undefined;
-    set name(value: string | null);
-    get name(): string | null;
-    set valueFormat(value: 'json' | 'csv' | 'array' | null);
-    get valueFormat(): string | null;
-    set getValueFormatCallback(callback: ((values: (string | number)[]) => string) | undefined);
-    get getValueFormatCallback(): ((values: (string | number)[]) => string) | undefined;
-    set thresholdMode(value: 'count' | 'partial' | null);
-    get thresholdMode(): string | null;
-    set pillsMaxVisible(value: number | null);
-    get pillsMaxVisible(): number | null;
-    set enablePillTooltips(value: boolean);
-    get enablePillTooltips(): boolean;
-    set pillTooltipPlacement(value: string | null);
-    get pillTooltipPlacement(): string | null;
-    set getPillTooltipCallback(callback: ((item: T) => string | HTMLElement) | undefined);
-    get getPillTooltipCallback(): ((item: T) => string | HTMLElement) | undefined;
-    set getCountPillCallback(callback: ((count: number, moreCount?: number) => string) | undefined);
-    get getCountPillCallback(): ((count: number, moreCount?: number) => string) | undefined;
-    get searchCallback(): ((searchTerm: string) => Promise<T[]>) | undefined;
-    set searchCallback(callback: ((searchTerm: string) => Promise<T[]>) | undefined);
-    get addNewCallback(): ((value: string) => T | Promise<T>) | undefined;
-    set addNewCallback(callback: ((value: string) => T | Promise<T>) | undefined);
-    get selectCallback(): ((option: T) => void) | undefined;
-    set selectCallback(callback: ((option: T) => void) | undefined);
-    get deselectCallback(): ((option: T) => void) | undefined;
-    set deselectCallback(callback: ((option: T) => void) | undefined);
-    get changeCallback(): ((selectedOptions: T[]) => void) | undefined;
-    set changeCallback(callback: ((selectedOptions: T[]) => void) | undefined);
-    get selectedValue(): string | number | (string | number)[] | null;
-    get selectedItem(): T | null;
-    getSelected(): T[];
-    setSelected(values: (string | number)[]): void;
-    getValue(): string | number | (string | number)[] | null;
-    destroy(): void;
-}