tyrell-components 1.0.0-TC7

package/lib/components/multiselect.d.ts

@@ -0,0 +1,397 @@
+/**
+ * TyMultiselect Web Component
+ * PORTED FROM: clj/ty/components/multiselect.cljs
+ *
+ * A multiselect dropdown component using ty-tag for selections with:
+ * - Tag-only options (only ty-tag elements supported)
+ * - Multiple selection with visual tags
+ * - Desktop mode with smart positioning
+ * - Mobile mode with full-screen modal
+ * - Search and filtering capabilities
+ * - Keyboard navigation
+ * - Form association for native form submission with multiple values
+ * - Scroll locking when dropdown is open
+ * - Outside click to close
+ *
+ * @example
+ * ```html
+ * <!-- Basic multiselect -->
+ * <ty-multiselect label="Skills" placeholder="Select skills" required>
+ *   <ty-tag value="js">JavaScript</ty-tag>
+ *   <ty-tag value="ts">TypeScript</ty-tag>
+ *   <ty-tag value="py">Python</ty-tag>
+ * </ty-multiselect>
+ *
+ * <!-- With pre-selected values -->
+ * <ty-multiselect value="js,ts">
+ *   <ty-tag value="js">JavaScript</ty-tag>
+ *   <ty-tag value="ts">TypeScript</ty-tag>
+ *   <ty-tag value="py">Python</ty-tag>
+ * </ty-multiselect>
+ *
+ * <!-- With rich tag content -->
+ * <ty-multiselect label="Team Members">
+ *   <ty-tag value="1" flavor="primary">
+ *     <div class="flex items-center gap-2">
+ *       <img src="avatar1.jpg" class="w-6 h-6 rounded-full" />
+ *       <span>John Doe</span>
+ *     </div>
+ *   </ty-tag>
+ * </ty-multiselect>
+ * ```
+ */
+import type { Flavor, Size } from '../types/common.js';
+import { TyComponent } from '../base/ty-component.js';
+import type { PropertyChange } from '../utils/property-manager.js';
+/**
+ * Tag data structure
+ */
+interface TagData {
+    value: string;
+    text: string;
+    element: HTMLElement;
+}
+/**
+ * Component state structure
+ */
+interface MultiselectState {
+    open: boolean;
+    search: string;
+    highlightedIndex: number;
+    filteredTags: TagData[];
+    selectedValues: string[];
+    mode: 'desktop' | 'mobile';
+    expandedSection: 'selected' | 'available';
+}
+/**
+ * Ty Multiselect Component
+ */
+export declare class TyMultiselect extends TyComponent<MultiselectState> {
+    protected static properties: {
+        value: {
+            type: "string";
+            visual: boolean;
+            formValue: boolean;
+            emitChange: boolean;
+            default: string;
+            coerce: (v: any) => string;
+        };
+        name: {
+            type: "string";
+            default: string;
+        };
+        placeholder: {
+            type: "string";
+            visual: boolean;
+            default: string;
+        };
+        label: {
+            type: "string";
+            visual: boolean;
+            default: string;
+        };
+        disabled: {
+            type: "boolean";
+            visual: boolean;
+            default: boolean;
+        };
+        readonly: {
+            type: "boolean";
+            visual: boolean;
+            default: boolean;
+        };
+        required: {
+            type: "boolean";
+            visual: boolean;
+            default: boolean;
+        };
+        externalSearch: {
+            type: "boolean";
+            visual: boolean;
+            default: boolean;
+            aliases: {
+                'external-search': boolean;
+            };
+        };
+        size: {
+            type: "string";
+            visual: boolean;
+            default: string;
+            validate: (v: any) => boolean;
+            coerce: (v: any) => any;
+        };
+        flavor: {
+            type: "string";
+            visual: boolean;
+            default: string;
+            validate: (v: any) => boolean;
+            coerce: (v: any) => any;
+        };
+        debounce: {
+            type: "number";
+            default: number;
+            validate: (v: any) => boolean;
+            coerce: (v: any) => number;
+        };
+        'selected-label': {
+            type: "string";
+            visual: boolean;
+            default: string;
+        };
+        'available-label': {
+            type: "string";
+            visual: boolean;
+            default: string;
+        };
+        'no-selection-message': {
+            type: "string";
+            visual: boolean;
+            default: string;
+        };
+        'no-options-message': {
+            type: "string";
+            visual: boolean;
+            default: string;
+        };
+    };
+    private _value;
+    private _name;
+    private _placeholder;
+    private _label;
+    private _disabled;
+    private _readonly;
+    private _required;
+    private _externalSearch;
+    private _scrollLockId;
+    private _size;
+    private _flavor;
+    private _selectedLabel;
+    private _availableLabel;
+    private _noSelectionMessage;
+    private _noOptionsMessage;
+    private _state;
+    set expandedSection(value: 'selected' | 'available');
+    get expandedSection(): 'selected' | 'available';
+    private _stubClickHandler;
+    private _outsideClickHandler;
+    private _tagClickHandler;
+    private _tagDismissHandler;
+    private _searchInputHandler;
+    private _blockSearchClick;
+    private _keyboardHandler;
+    private _debounce;
+    private _searchDebounceTimer;
+    private _optionsScrollbar;
+    constructor();
+    /**
+     * Called when component is connected to DOM
+     * TyComponent handles property capture automatically
+     */
+    protected onConnect(): void;
+    /**
+     * Called when component is disconnected from DOM
+     * Clean up event listeners and timers
+     */
+    protected onDisconnect(): void;
+    /**
+     * Called when properties change
+     * Handle state synchronization BEFORE render
+     */
+    protected onPropertiesChanged(changes: PropertyChange[]): void;
+    /**
+     * Get the form value for this component
+     * Returns FormData with multiple entries (HTMX standard)
+     */
+    protected getFormValue(): FormDataEntryValue | FormData | null;
+    /**
+     * Parse multiselect value (comma-separated string to array)
+     */
+    private parseValue;
+    /**
+     * Initialize component state from attributes
+     * Reads from both property and attribute (like ClojureScript version)
+     */
+    private initializeState;
+    /**
+     * Get all ty-tag elements from the component (ALL slots)
+     */
+    private getTagElements;
+    /**
+     * Extract value and text from a ty-tag element
+     */
+    private getTagData;
+    /**
+     * Select a tag - set selected state, move to selected slot, make dismissible
+     */
+    private selectTag;
+    /**
+     * Deselect a tag - remove selected state, remove from selected slot, remove dismissible
+     */
+    private deselectTag;
+    /**
+     * Get array of currently selected values from tags (ALWAYS reads from DOM)
+     */
+    private getSelectedValues;
+    /**
+     * Check if all available tags are selected
+     */
+    private allTagsSelected;
+    /**
+     * Sync tag selection states with desired values
+     */
+    private syncSelectedTags;
+    /**
+     * Central update function - synchronizes everything
+     * Uses TyComponent's property system for proper lifecycle
+     */
+    private updateComponentValue;
+    /**
+     * Calculate and set dropdown position with smart direction detection
+     */
+    private calculatePosition;
+    private _setupOptionsScrollbar;
+    private _destroyOptionsScrollbar;
+    /**
+     * Open dropdown dialog (desktop mode)
+     *
+     * `<dialog>.showModal()` puts the dialog in the top layer with a backdrop, but
+     * does NOT prevent the page behind it from scrolling. We use the shared scroll
+     * lock utility (overflow:hidden on <html>) to keep wheel/touch scrolling from
+     * leaking through to the body — same behavior <ty-dropdown> and <ty-modal>
+     * implement.
+     */
+    private openDropdown;
+    /**
+     * Close dropdown dialog (desktop mode)
+     */
+    private closeDropdown;
+    /**
+     * Open mobile modal (mobile mode)
+     * Now using <dialog> element for native z-index management
+     */
+    private openMobileModal;
+    /**
+     * Close mobile modal (mobile mode)
+     * Now using <dialog> element for native management
+     */
+    private closeMobileModal;
+    private handleStubClick;
+    private handleOutsideClick;
+    private handleTagClick;
+    private handleTagDismiss;
+    private blockSearchClick;
+    private handleSearchInput;
+    private handleKeyboard;
+    /**
+     * Filter tags based on search query
+     */
+    private filterTags;
+    /**
+     * Update visibility of tags based on filtered list
+     */
+    private updateTagVisibility;
+    /**
+     * Show/hide the dropdown options area
+     */
+    private updateOptionsVisibility;
+    /**
+     * Clear all tag highlights
+     */
+    private clearHighlights;
+    /**
+     * Highlight tag at specific index
+     */
+    private highlightTag;
+    /**
+     * Dispatch search event for external search handling
+     * With optional debounce support
+     */
+    private dispatchSearchEvent;
+    /**
+     * Fire the actual search event
+     */
+    private fireSearchEvent;
+    /**
+     * Dispatch custom change event
+     */
+    private dispatchChangeEvent;
+    /**
+     * Main render method (required by TyComponent)
+     * Delegates to mode-specific renderer
+     */
+    protected render(): void;
+    /**
+     * Setup event listeners
+     */
+    private setupEventListeners;
+    /**
+     * Build CSS class list for stub
+     */
+    private buildStubClasses;
+    /**
+     * Render desktop mode with dialog
+     */
+    private renderDesktop;
+    /**
+     * Render mobile mode with full-screen modal
+     * Following dropdown.ts mobile structure
+     */
+    private renderMobile;
+    /**
+     * Setup event listeners for mobile mode
+     * Using <dialog> element - backdrop clicks handled natively
+     */
+    private setupMobileEventListeners;
+    /**
+     * Handle mobile stub click - open modal
+     */
+    private handleMobileStubClick;
+    /**
+     * Handle mobile tag click - select and potentially close
+     */
+    private handleMobileTagClick;
+    /**
+     * Toggle section expansion (mobile only)
+     * Clicking expanded section collapses it and expands the other
+     * Clicking collapsed section expands it and collapses the other
+     */
+    private toggleSection;
+    /**
+     * Sync section states to DOM without toggle logic
+     */
+    private syncSectionStates;
+    /**
+     * Update mobile selected section state (collapsed view, empty states, etc.)
+     */
+    private updateMobileSelectedState;
+    /**
+     * Update selection display (show/hide placeholder)
+     * Matches dropdown.ts pattern - uses CSS via has-selection class
+     */
+    private updateSelectionDisplay;
+    get value(): string;
+    set value(val: string);
+    get name(): string;
+    set name(val: string);
+    get placeholder(): string;
+    set placeholder(val: string);
+    get label(): string;
+    set label(val: string);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get readonly(): boolean;
+    set readonly(value: boolean);
+    get required(): boolean;
+    set required(value: boolean);
+    get externalSearch(): boolean;
+    set externalSearch(value: boolean);
+    get debounce(): number;
+    set debounce(value: number | string);
+    get size(): Size;
+    set size(value: Size);
+    get flavor(): Flavor;
+    set flavor(value: Flavor);
+    get form(): HTMLFormElement | null;
+}
+export {};
+//# sourceMappingURL=multiselect.d.ts.map

package/lib/components/multiselect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"multiselect.d.ts","sourceRoot":"","sources":["../../src/components/multiselect.ts"],"names":[],"mappings":"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"}