tyrell-components 1.0.0-TC54 → 1.0.0-TC56

package/lib/components/dropdown.d.ts

@@ -0,0 +1,403 @@
+/**
+ * TyDropdown Web Component
+ * PORTED FROM: clj/ty/components/dropdown.cljs
+ *
+ * A semantic dropdown component with:
+ * - Desktop mode with smart positioning
+ * - Mobile mode with full-screen modal
+ * - Search and filtering capabilities
+ * - Keyboard navigation
+ * - Form association for native form submission
+ * - Rich option support (option, ty-option, ty-tag)
+ *
+ * @example
+ * ```html
+ * <!-- Basic dropdown -->
+ * <ty-dropdown label="Country" placeholder="Select country" required>
+ *   <option value="us">United States</option>
+ *   <option value="uk">United Kingdom</option>
+ *   <option value="ca">Canada</option>
+ * </ty-dropdown>
+ *
+ * <!-- With rich options -->
+ * <ty-dropdown label="User" searchable>
+ *   <ty-option value="1">
+ *     <div class="flex items-center gap-2">
+ *       <img src="avatar1.jpg" class="w-8 h-8 rounded-full" />
+ *       <span>John Doe</span>
+ *     </div>
+ *   </ty-option>
+ * </ty-dropdown>
+ *
+ * <!-- Not searchable (external search) -->
+ * <ty-dropdown label="Search API" not-searchable>
+ *   <option value="1">Result 1</option>
+ * </ty-dropdown>
+ * ```
+ */
+import type { Flavor, Size } from '../types/common.js';
+import { TyComponent } from '../base/ty-component.js';
+import type { PropertyChange } from '../utils/property-manager.js';
+/**
+ * Option data structure
+ */
+interface OptionData {
+    value: string;
+    text: string;
+    element: HTMLElement;
+}
+/**
+ * Component state structure
+ */
+interface DropdownState {
+    open: boolean;
+    search: string;
+    highlightedIndex: number;
+    filteredOptions: OptionData[];
+    currentValue: string | null;
+    mode: 'desktop' | 'mobile';
+}
+/**
+ * Ty Dropdown Component
+ */
+export declare class TyDropdown extends TyComponent<DropdownState> {
+    protected static properties: {
+        value: {
+            type: "string";
+            visual: boolean;
+            formValue: boolean;
+            emitChange: boolean;
+            default: 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;
+        };
+        searchable: {
+            type: "boolean";
+            visual: boolean;
+            default: boolean;
+            aliases: {
+                'not-searchable': boolean;
+            };
+        };
+        clearable: {
+            type: "boolean";
+            visual: boolean;
+            default: boolean;
+            aliases: {
+                'not-clearable': 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;
+        };
+        delay: {
+            type: "number";
+            default: number;
+            validate: (v: any) => boolean;
+            coerce: (v: any) => number;
+        };
+    };
+    private _value;
+    private _name;
+    private _placeholder;
+    private _label;
+    private _disabled;
+    private _readonly;
+    private _required;
+    private _searchable;
+    private _clearable;
+    private _size;
+    private _flavor;
+    private _state;
+    private _scrollLockId;
+    private _stubClickHandler;
+    private _outsideClickHandler;
+    private _optionClickHandler;
+    private _searchInputHandler;
+    private _searchBlurHandler;
+    private _blockSearchClick;
+    private _keyboardHandler;
+    private _clearClickHandler;
+    private _delay;
+    private _searchDebounceTimer;
+    constructor();
+    render(): void;
+    /**
+     * 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
+     * TyComponent calls this automatically when formValue property changes
+     */
+    protected getFormValue(): FormDataEntryValue | null;
+    /**
+     * Parse dropdown value (single string)
+     */
+    private parseValue;
+    /**
+     * Validate flavor attribute
+     */
+    private validateFlavor;
+    /**
+     * Initialize component state from attributes
+     */
+    private initializeState;
+    /**
+     * Update placeholder text in existing rendered HTML
+     * Called when placeholder changes after initial render
+     */
+    private updatePlaceholderInDOM;
+    /**
+     * Update form value via ElementInternals
+     */
+    /**
+     * Get all option elements from slot
+     * Supports: <option>, <ty-option>, <ty-tag>
+     */
+    private getOptions;
+    /**
+     * Extract value and text from option element
+     */
+    private getOptionData;
+    /**
+     * Clear all selections
+     */
+    private clearSelection;
+    /**
+     * Select an option
+     */
+    private selectOption;
+    /**
+     * Sync selected option based on current value
+     */
+    private syncSelectedOption;
+    /**
+     * Update component value attribute for consistency
+     */
+    private updateComponentValue;
+    /**
+     * Update selection display (show/hide placeholder)
+     */
+    private updateSelectionDisplay;
+    private updateClearButton;
+    /**
+     * Dispatch change event
+     */
+    private dispatchChangeEvent;
+    private filterOptions;
+    private updateOptionVisibility;
+    /**
+     * Clear all option highlights
+     */
+    private clearHighlights;
+    private highlightOption;
+    /**
+     * Setup event listeners
+     */
+    private setupDesktopEventListeners;
+    /**
+     * Lock scroll with consistent ID generation
+     */
+    private lockDropdownScroll;
+    /**
+     * Unlock scroll using stored ID
+     */
+    private unlockDropdownScroll;
+    /**
+     * Initialize options state when opening dropdown/modal
+     * @param highlightSelected - Whether to highlight the currently selected option
+     */
+    private initializeOptionsState;
+    /**
+     * Base stub click handler - validates state then calls open callback
+     * @param e - Click event
+     * @param openCallback - Function to call to open (desktop or mobile)
+     */
+    private handleStubClickBase;
+    /**
+     * Base option click handler - finds option, selects it, then calls close callback
+     * @param e - Click event
+     * @param closeCallback - Function to call to close (desktop or mobile)
+     */
+    private handleOptionClickBase;
+    /**
+     * Base clear click handler - clears selection and optionally closes
+     * @param e - Click event
+     * @param closeCallback - Optional function to call to close (mobile only)
+     */
+    private handleClearClickBase;
+    /**
+     * Calculate and set dropdown position with smart direction detection
+     */
+    private calculateDesktopPosition;
+    /**
+     * Open dropdown dialog
+     */
+    private openDesktopDropdown;
+    /**
+     * Close dropdown dialog
+     */
+    private closeDesktopDropdown;
+    /**
+     * Handle outside click to close dropdown
+     */
+    private handleDesktopOutsideClick;
+    /**
+     * Handle search input changes
+     */
+    private handleSearchInput;
+    /**
+     * Handle search blur - DISABLED
+     * Previously caused race conditions with option clicks.
+     * Search reset now handled in closeDesktopDropdown() instead.
+     */
+    private handleSearchBlur;
+    /**
+     * Block search input click from bubbling
+     * Prevents search input clicks from triggering outside click handler
+     */
+    private blockSearchClick;
+    /**
+     * Dispatch search event for external search handling
+     * With optional delay/debounce support
+     */
+    private dispatchSearchEvent;
+    /**
+     * Fire the actual search event
+     */
+    private fireSearchEvent;
+    /**
+     * Handle keyboard navigation
+     */
+    private handleDesktopKeyboard;
+    /**
+     * Handle stub click - open dropdown
+     */
+    private handleDesktopStubClick;
+    /**
+     * Handle option click - select option and close
+     */
+    private handleDesktopOptionClick;
+    /**
+     * Handle clear button click - clear selection
+     * CRITICAL: Must prevent dropdown from opening!
+     */
+    private handleDesktopClearClick;
+    /**
+     * Build CSS class list for stub
+     */
+    private buildStubClasses;
+    /**
+     * Render desktop mode with dialog
+     */
+    private renderDesktop;
+    /**
+     * Render mobile mode with full-screen modal
+     */
+    private renderMobile;
+    /**
+     * Setup event listeners for mobile mode
+     */
+    private setupMobileEventListeners;
+    /**
+     * Handle mobile stub click - open modal
+     */
+    private handleMobileStubClick;
+    /**
+     * Handle mobile option click - select and close
+     */
+    private handleMobileOptionClick;
+    /**
+     * Handle mobile keyboard navigation
+     */
+    private handleMobileKeyboard;
+    /**
+     * Handle clear click in mobile modal
+     */
+    private handleMobileClearClick;
+    /**
+       * Open mobile modal
+       */
+    private openMobileModal;
+    /**
+     * Close mobile modal
+     */
+    private closeMobileModal;
+    get value(): string;
+    set value(v: string);
+    get name(): string;
+    set name(v: string);
+    get placeholder(): string;
+    set placeholder(v: string);
+    get label(): string;
+    set label(v: string);
+    get disabled(): boolean;
+    set disabled(v: boolean);
+    get readonly(): boolean;
+    set readonly(v: boolean);
+    get required(): boolean;
+    set required(v: boolean);
+    get searchable(): boolean;
+    set searchable(v: boolean);
+    get clearable(): boolean;
+    set clearable(v: boolean);
+    get size(): Size;
+    set size(v: Size);
+    get flavor(): Flavor;
+    set flavor(v: Flavor);
+    get delay(): number;
+    set delay(v: number);
+    get form(): HTMLFormElement | null;
+}
+export {};
+//# sourceMappingURL=dropdown.d.ts.map

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

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