@cwellt_software/cwellt-reactjs-lib 1.1.6 → 1.1.7

package/dist/src/components/control/input/new-dates/dateRangePresets.d.ts

@@ -0,0 +1,19 @@
+export interface DateRangePreset {
+    key: string;
+    label: string;
+    getValue: () => {
+        from: Date;
+        to: Date;
+    };
+}
+export declare const PRESET_LIBRARY: Record<string, DateRangePreset>;
+/**
+ * Helper function to get presets by their keys
+ * @param keys - Array of preset keys from PRESET_LIBRARY
+ * @returns Array of DateRangePreset objects
+ *
+ * @example
+ * const presets = getPresetsByKeys(['thisWeek', 'past7Days', 'past30Days']);
+ */
+export declare const getPresetsByKeys: (keys: string[]) => DateRangePreset[];
+//# sourceMappingURL=dateRangePresets.d.ts.map

package/dist/src/components/control/input/new-dates/dateRangePresets.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dateRangePresets.d.ts","sourceRoot":"","sources":["../../../../../../src/components/control/input/new-dates/dateRangePresets.ts"],"names":[],"mappings":"AACA,MAAM,WAAW,eAAe;IAC/B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM;QAAE,IAAI,EAAE,IAAI,CAAC;QAAC,EAAE,EAAE,IAAI,CAAA;KAAE,CAAC;CACzC;AAED,eAAO,MAAM,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAmN1D,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,gBAAgB,SAAU,MAAM,EAAE,KAAG,eAAe,EAIhE,CAAC"}

package/dist/src/components/control/input/number/CwInputNumber.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function CwInputNumber(CwInputNumberProps) {
+    const handleChange = (e) => {
+        CwInputNumberProps.onChange(e.target.value);
+    };
+    return (_jsxs("div", { className: CwInputNumberProps.labelPosition == "column"
+            ? "cw-flex-column cw-gap-none"
+            : "cw-flex-row", children: [_jsx("label", { className: CwInputNumberProps.disabled === true
+                    ? CwInputNumberProps.labelClassName + " " + "cw_label_text cw_label_text_disabled"
+                    : CwInputNumberProps.labelClassName + " " + "cw_label_text", children: CwInputNumberProps.labelName }), _jsx("input", { id: CwInputNumberProps.id, type: "number", value: CwInputNumberProps.value, onChange: e => handleChange(e), className: CwInputNumberProps.className + " " + " cw-input-number", placeholder: CwInputNumberProps.placeholder == undefined ? "Write a number please" : CwInputNumberProps.placeholder, style: CwInputNumberProps.style, disabled: CwInputNumberProps.disabled, required: CwInputNumberProps.required, step: CwInputNumberProps.step, min: CwInputNumberProps.min, max: CwInputNumberProps.max })] }));
+}

package/dist/src/components/control/input/phone/CwInputPhone.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CwButton } from "../../../../components/control/action/button/CwButton";
+import { CwIcon } from "../../../../components/display/graphics/icon/CwIcon";
+import { CwLabel } from "../../../../components/display/text/label/CwLabel";
+import { CwAlign } from "../../../../components/layout/align/CwAlign";
+/**
+ * Input for entering a telephone number.
+ * @remarks
+ * ```txt
+ * CwIcon CwLabel      CwSelect      CwButton
+ *  ↑     ↑            ↑             ↑
+ *           ╭────────────────────╮╭════╮
+ *  (  Phone ││ 0123456789+       │║ Ok ║
+ *           ╰────────────────────╯╰════╯
+ * ```
+ * @example
+ * ```tsx
+ * <CwInputPhone iconProps={{iconId:"phone"}} labelProps={{children:"Phone"}} />
+ * ```
+ */
+export function CwInputPhone(props) {
+    const { alignProps, buttonProps, iconProps, labelProps, ...inputProps } = props;
+    return (_jsx("div", { className: "cw-input-phone", children: _jsxs(CwAlign, { ...alignProps, itemProp: inputProps.required === true ? "required" : "", children: [labelProps && (_jsxs(CwLabel, { ...labelProps, children: [iconProps && _jsx(CwIcon, { ...iconProps }), labelProps.text] })), _jsx("input", { type: "tel", placeholder: "+## ### ### ###", pattern: "[+0-9 ]*", maxLength: 16, ...inputProps }), buttonProps && _jsx(CwButton, { ...buttonProps })] }) }));
+}

package/dist/src/components/control/input/text/CwInputText.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CwButton } from "../../../../components/control/action/button/CwButton";
+import { CwIcon } from "../../../../components/display/graphics/icon/CwIcon";
+import { CwLabel } from "../../../../components/display/text/label/CwLabel";
+import { CwAlign } from "../../../../components/layout/align/CwAlign";
+/**
+ * Input for entering a string of text.
+ * @remarks
+ * ```txt
+ * CwIcon  CwLabel     CwSelect        CwButton
+ *  ↑      ↑           ↑               ↑
+ *             ╭────────────────────╮╭════╮
+ *  ⌂  Address ││ Sunset Valley, 2  │║ Ok ║
+ *             ╰────────────────────╯╰════╯
+ * ```
+ * @example
+ * ```tsx
+ * <CwInputText
+ *   iconProps={{ id: "home" }}
+ *   labelProps={{ children: "Name", width: "100px" }}
+ *   buttonProps={{ children: "Ok", onclick:()=>{alert("hi")} }}
+ * />
+ * ```
+ */
+export function CwInputText(props) {
+    const { alignProps, buttonProps, iconProps, labelProps, className, ...inputProps } = props;
+    const containerClassName = className
+        ? `cw-input-text ${className}`
+        : "cw-input-text";
+    return (_jsx("div", { className: containerClassName, children: _jsxs(CwAlign, { ...alignProps, itemProp: inputProps.required === true ? "required" : "", children: [labelProps && (_jsxs(CwLabel, { ...labelProps, children: [iconProps && _jsx(CwIcon, { ...iconProps }), labelProps.text] })), _jsx("input", { type: props.type ?? "text", ...inputProps }), buttonProps && _jsx(CwButton, { ...buttonProps })] }) }));
+}

package/dist/src/components/control/input/text-area/CwTextArea.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CwButton } from "../../../../components/control/action/button/CwButton";
+import { CwIcon } from "../../../../components/display/graphics/icon/CwIcon";
+import { CwLabel } from "../../../../components/display/text/label/CwLabel";
+import { CwAlign } from "../../../../components/layout/align/CwAlign";
+export function CwTextArea(props) {
+    const { alignProps, buttonProps, iconProps, labelProps, resize, ...textareaProps } = props;
+    return (_jsx("div", { className: "cw-text-area", children: _jsxs(CwAlign, { ...alignProps, children: [labelProps && (_jsxs(CwLabel, { ...labelProps, children: [iconProps && _jsx(CwIcon, { ...iconProps }), labelProps.text] })), _jsx("textarea", { ...textareaProps, itemProp: textareaProps.required === true ? "required" : "", style: { ...textareaProps.style, resize: resize } }), buttonProps && _jsx(CwButton, { ...buttonProps })] }) }));
+}

package/dist/src/components/control/input/time/CwTime.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CwButton } from "../../../../components/control/action/button/CwButton";
+import { CwIcon } from "../../../../components/display/graphics/icon/CwIcon";
+import { CwLabel } from "../../../../components/display/text/label/CwLabel";
+import { CwAlign } from "../../../../components/layout/align/CwAlign";
+/**
+ * Input for entering a string of text.
+ * @remarks
+ * ```txt
+ * CwIcon  CwLabel  input type=time    CwButton
+ *  ↑      ↑           ↑               ↑
+ *               ╭────────────────────╮╭════╮
+ *  ⌂  Birthdate │ 00:00              │║ Ok ║
+ *               ╰────────────────────╯╰════╯
+ * ```
+ * @example
+ * ```tsx
+ * <CwTime
+ *   iconProps={{ iconId: "Birthdate" }}
+ *   labelProps={{ children: "Name", width: "100px" }}
+ *   buttonProps={{ children: "Ok", onClick:()=>{alert("happy happy joy joy")} }}
+ * />
+ * ```
+ */
+export function CwTime(props) {
+    const { alignProps, buttonProps, iconProps, labelProps, ...inputProps } = props;
+    inputProps.max = inputProps.max ?? "9999-01-01";
+    return (_jsx("div", { className: "cw-input-date", children: _jsxs(CwAlign, { ...alignProps, itemProp: inputProps.required === true ? "required" : "", children: [labelProps && (_jsxs(CwLabel, { ...labelProps, children: [iconProps && _jsx(CwIcon, { ...iconProps }), labelProps.text] })), _jsx("input", { type: "time", ...inputProps }), buttonProps && _jsx(CwButton, { ...buttonProps })] }) }));
+}

package/dist/src/components/control/input/weekday/CwWeekdaySelector.js

@@ -0,0 +1,143 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import styles from "./cw-weekday-selector.module.css";
+/**
+ * This class represents a week where days can be selected or unselected
+ * @remark Selected days are in UPPERCASE, unselected days are in lowercase
+ * ```
+ * Monday     = "M" | "m"
+ * Tuesday    = "T" | "t"
+ * Wendnesday = "W" | "w"
+ * thuRsday   = "R" | "r"
+ * Friday     = "F" | "f"
+ * Saturday   = "S" | "s"
+ * sUnday     = "U" | "u"
+ * ```
+ */
+export class Weekdays {
+    static WEEKDAYS_STANDARD_ARRAY_FULL = ["M", "T", "W", "R", "F", "S", "U"];
+    static WEEKDAYS_STANDARD_ARRAY_EMPTY = ["m", "t", "w", "r", "f", "s", "u"];
+    static WEEKDAYS_STANDARD_STRING_FULL = "MTWRFSU";
+    static WEEKDAYS_STANDARD_STRING_EMPTY = "mtwrfsu";
+    static WEEKDAYS_TO_USA_LETTER_FORMAT = new Map([
+        ["M", "M"],
+        ["T", "T"],
+        ["W", "W"],
+        ["R", "T"],
+        ["F", "F"],
+        ["S", "S"],
+        ["U", "S"]
+    ]);
+    static WEEKDAYS_TO_USA_SHORT_FORMAT = new Map([
+        ["M", "Mon"],
+        ["T", "Tue"],
+        ["W", "Wed"],
+        ["R", "Thu"],
+        ["F", "Fri"],
+        ["S", "Sat"],
+        ["U", "Sun"]
+    ]);
+    static WEEKDAY_MAP = {
+        0: "U",
+        1: "M",
+        2: "T",
+        3: "W",
+        4: "R",
+        5: "F",
+        6: "S"
+    };
+    days;
+    constructor(days = Weekdays.WEEKDAYS_STANDARD_ARRAY_FULL) {
+        if (typeof days === "string")
+            this.days = this.normalize(days.split(""));
+        else
+            this.days = this.normalize(days);
+    }
+    includes(day) {
+        return this.days.includes(day);
+    }
+    static fromString(value) {
+        return new Weekdays(value.split(""));
+    }
+    static isValidToday(validFrom, validUntil, validWeekdays) {
+        const today = new Date();
+        // Check if today is within the validity period
+        if (today < validFrom || today > validUntil) {
+            return false;
+        }
+        // Convert today's weekday to Weekday type
+        const todayWeekday = Weekdays.WEEKDAY_MAP[today.getDay()];
+        // Check if today's weekday is in the validWeekdays array
+        return validWeekdays.includes(todayWeekday);
+    }
+    normalize(weekdays) {
+        const uniqueWeekdays = new Set(weekdays);
+        if (uniqueWeekdays.size != 7)
+            throw Error(`Illegal weekday string ${Array.from(uniqueWeekdays).join("")}`);
+        return Weekdays.WEEKDAYS_STANDARD_STRING_FULL.split("").map(day => {
+            if (uniqueWeekdays.has(day)) {
+                return day;
+            }
+            else if (uniqueWeekdays.has(day.toLowerCase())) {
+                return day.toLowerCase();
+            }
+            else {
+                throw Error(`Illegal weekday string ${weekdays.join("")}`);
+            }
+        });
+    }
+    toString() {
+        return this.days.join("").trim();
+    }
+    toStringFormatted(limiters = { startExistingDay: "{", endExsitingDay: "}", startMissingDay: "(", endMissingDay: ")", separator: " " }, format = Weekdays.WEEKDAYS_TO_USA_SHORT_FORMAT) {
+        const result = new Array();
+        [...this.days].forEach((letter, index) => {
+            if (letter === letter.toUpperCase()) {
+                result.push(limiters.startExistingDay + format.get(letter) + limiters.endExsitingDay);
+            }
+            else if (letter === letter.toLowerCase()) {
+                result.push(limiters.startMissingDay +
+                    format.get(Weekdays.WEEKDAYS_STANDARD_STRING_FULL.charAt(index)) +
+                    limiters.endMissingDay);
+            }
+        });
+        return result.join(limiters.separator).trim();
+    }
+    toArray() {
+        return [...this.days];
+    }
+    isEmpty() {
+        return this.toString() === Weekdays.WEEKDAYS_STANDARD_STRING_EMPTY;
+    }
+    isFull() {
+        return this.toString() === Weekdays.WEEKDAYS_STANDARD_STRING_FULL;
+    }
+    static getFullWeek() {
+        return Weekdays.WEEKDAYS_STANDARD_ARRAY_FULL;
+    }
+    static getEmptyWeek() {
+        return Weekdays.WEEKDAYS_STANDARD_ARRAY_EMPTY;
+    }
+}
+export const CwWeekdaySelector = ({ value = "", onChange, disabled = false }) => {
+    const [selectedDays, setSelectedDays] = useState(Weekdays.fromString(value));
+    useEffect(() => {
+        setSelectedDays(Weekdays.fromString(value));
+    }, [value]);
+    const handleChange = (day, checked) => {
+        const currentDays = selectedDays.toArray();
+        let updated;
+        if (checked) {
+            updated = currentDays.filter(d => d !== day.toLowerCase());
+            updated.push(day);
+        }
+        else {
+            updated = currentDays.filter(d => d !== day);
+            updated.push(day.toLowerCase());
+        }
+        const newWeekdays = new Weekdays(updated);
+        setSelectedDays(newWeekdays);
+        onChange?.(newWeekdays.toString());
+    };
+    return (_jsx("div", { className: styles["cw-weekday-selector"], children: Weekdays.getFullWeek().map(day => (_jsx("input", { type: "checkbox", "data-day": day, checked: selectedDays.toArray().includes(day), onChange: (e) => handleChange(day, e.target.checked), disabled: disabled }, day))) }));
+};

package/dist/src/components/custom/find-airport/CwFindAirportComp.js

@@ -0,0 +1,240 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { CwButton } from "../../control/action/button/CwButton";
+import { CwIcon } from "../../display/graphics/icon/CwIcon";
+import "./cw-find-airport.css";
+export const CwFindAirport = ({ handleChange, searchType = "OnlyDatabase", placeHolder = "Search airport…", required = false, cblConfig, className = "", value, disabled = false, displayMode, width }) => {
+    // State
+    const [inputValue, setInputValue] = useState("");
+    const [options, setOptions] = useState([]);
+    const [airports, setAirports] = useState([]);
+    const [isLoading, setIsLoading] = useState(false);
+    const [isInitialLoading, setIsInitialLoading] = useState(false);
+    const [showDropdown, setShowDropdown] = useState(false);
+    const [highlightedIndex, setHighlightedIndex] = useState(-1);
+    const [tooltipText, setTooltipText] = useState("");
+    // Refs
+    const inputRef = useRef(null);
+    const dropdownRef = useRef(null);
+    const searchTimeoutRef = useRef();
+    // Utility function to extract ICAO from DisplayAirportText
+    const extractIcao = useCallback((displayText) => {
+        const match = displayText.match(/^([A-Z]{4})\(/);
+        return match ? match[1] : displayText;
+    }, []);
+    // Utility function to extract IATA from DisplayAirportText
+    const extractIata = useCallback((displayText) => {
+        const match = displayText.match(/\(([A-Z]{3})\)/);
+        return match ? match[1] : displayText;
+    }, []);
+    // Utility function to get short code (ICAO(IATA) format - original behavior)
+    const getShortCode = useCallback((displayText) => {
+        const match = displayText.match(/([A-Z]{4})\(([A-Z]{3})\)/);
+        if (match && match.length >= 3) {
+            return `${match[1]}(${match[2]})`;
+        }
+        return displayText;
+    }, []);
+    // Utility function to get display text for INPUT based on mode
+    const getInputDisplayText = useCallback((airport) => {
+        const fullText = airport.DisplayAirportText;
+        switch (displayMode) {
+            case "icao-only":
+                return extractIcao(fullText);
+            case "iata-only":
+                return extractIata(fullText);
+            case "full-text":
+                return fullText;
+            case "default":
+            default:
+                // Default: ICAO(IATA) - same as original getShortCode behavior
+                return getShortCode(fullText);
+        }
+    }, [displayMode, extractIcao, extractIata, getShortCode]);
+    // Utility function to get display text for DROPDOWN (always full text)
+    const getDropdownDisplayText = useCallback((airport) => {
+        return airport.DisplayAirportText;
+    }, []);
+    // Fetch airport data by ID
+    const fetchAirportData = useCallback(async (airportId) => {
+        setIsInitialLoading(true);
+        try {
+            const response = await fetch(`${cblConfig}api/data/airport?airportId=${airportId}`);
+            const result = await response.json();
+            const airport = result;
+            const inputText = getInputDisplayText(airport);
+            const dropdownText = getDropdownDisplayText(airport);
+            setAirports([airport]);
+            setOptions([{ value: airport.AptKey, text: dropdownText }]);
+            setInputValue(inputText);
+            setTooltipText(airport.DisplayAirportText);
+        }
+        catch (error) {
+            console.error("Error fetching airport data:", error);
+        }
+        finally {
+            setIsInitialLoading(false);
+        }
+    }, [cblConfig, getInputDisplayText, getDropdownDisplayText]);
+    // Map searchType string to number for API
+    const getSearchTypeNumber = useCallback((type) => {
+        switch (type) {
+            case "OnlyDatabase": return 0;
+            case "DatabaseAndProviders": return 1;
+            case "OnlyProviders": return 2;
+            default: return 0;
+        }
+    }, []);
+    // Search airports
+    const searchAirports = useCallback(async (searchText) => {
+        if (searchText.length < 2) {
+            setOptions([]);
+            setAirports([]);
+            setShowDropdown(false);
+            return;
+        }
+        setIsLoading(true);
+        try {
+            const searchTypeNumber = getSearchTypeNumber(searchType);
+            const response = await fetch(`${cblConfig}controls/cblFindAirport/cblFindAirport/SearchAirportCodeName?text=${searchText}&searchType=${searchTypeNumber}`);
+            const results = await response.json();
+            const newOptions = [];
+            const newAirports = [];
+            results.forEach((airport) => {
+                const displayText = getDropdownDisplayText(airport);
+                newOptions.push({ value: airport.AptKey, text: displayText });
+                newAirports.push(airport);
+            });
+            setOptions(newOptions);
+            setAirports(newAirports);
+            setShowDropdown(newOptions.length > 0);
+            setHighlightedIndex(-1);
+        }
+        catch (error) {
+            console.error("Error searching airports:", error);
+            setOptions([]);
+            setAirports([]);
+            setShowDropdown(false);
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, [cblConfig, getDropdownDisplayText, searchType, getSearchTypeNumber]);
+    // Debounced search
+    const debouncedSearch = useCallback((searchText) => {
+        if (searchTimeoutRef.current) {
+            window.clearTimeout(searchTimeoutRef.current);
+        }
+        searchTimeoutRef.current = window.setTimeout(() => {
+            searchAirports(searchText);
+        }, 300); // 300ms debounce
+    }, [searchAirports]);
+    // Handle input change
+    const handleInputChange = (e) => {
+        const newValue = e.target.value;
+        setInputValue(newValue);
+        if (newValue !== inputValue) {
+            debouncedSearch(newValue);
+        }
+    };
+    // Handle option selection
+    const handleOptionSelect = async (optionValue) => {
+        const selectedAirport = airports.find(apt => apt.AptKey === optionValue);
+        if (!selectedAirport)
+            return;
+        setShowDropdown(false);
+        // Handle provider airports (keeping original logic)
+        if (selectedAirport.isAirportFromProvider) {
+            try {
+                const response = await fetch(`${cblConfig}controls/cblFindAirport/cblFindAirport/GetCblAirport?IATAICAO=${selectedAirport.AptIcao}&update=false`);
+                const result = await response.json();
+                const resultAirport = result;
+                const inputText = getInputDisplayText(resultAirport);
+                const dropdownText = getDropdownDisplayText(resultAirport);
+                setInputValue(inputText);
+                setTooltipText(result.DisplayAirportText);
+                setAirports([result]);
+                setOptions([{ value: result.AptKey, text: dropdownText }]);
+                handleChange(result.AptKey);
+            }
+            catch (error) {
+                console.error("Error fetching provider airport:", error);
+            }
+        }
+        else {
+            const inputText = getInputDisplayText(selectedAirport);
+            setInputValue(inputText);
+            setTooltipText(getDropdownDisplayText(selectedAirport));
+            handleChange(optionValue);
+        }
+    };
+    // Handle keyboard navigation
+    const handleKeyDown = (e) => {
+        if (!showDropdown || options.length === 0)
+            return;
+        switch (e.key) {
+            case "ArrowDown":
+                e.preventDefault();
+                setHighlightedIndex(prev => prev < options.length - 1 ? prev + 1 : 0);
+                break;
+            case "ArrowUp":
+                e.preventDefault();
+                setHighlightedIndex(prev => prev > 0 ? prev - 1 : options.length - 1);
+                break;
+            case "Enter":
+                e.preventDefault();
+                if (highlightedIndex >= 0 && highlightedIndex < options.length) {
+                    handleOptionSelect(options[highlightedIndex].value);
+                }
+                break;
+            case "Escape":
+                setShowDropdown(false);
+                setHighlightedIndex(-1);
+                break;
+        }
+    };
+    // Handle clicks outside dropdown
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (dropdownRef.current &&
+                !dropdownRef.current.contains(event.target) &&
+                !inputRef.current?.contains(event.target)) {
+                setShowDropdown(false);
+                setHighlightedIndex(-1);
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, []);
+    // Load initial value
+    useEffect(() => {
+        if (value && value !== 0 && value !== -1) {
+            fetchAirportData(value);
+        }
+    }, [value, fetchAirportData]);
+    useEffect(() => {
+        if (!value || value === 0 || value === -1) {
+            setInputValue("");
+            setTooltipText("");
+            setOptions([]);
+            setAirports([]);
+        }
+    }, [value]);
+    // Handle input focus
+    const handleInputFocus = () => {
+        if (options.length > 0) {
+            setShowDropdown(true);
+        }
+    };
+    // Clear selection
+    const handleClear = () => {
+        setInputValue("");
+        setTooltipText("");
+        setOptions([]);
+        setAirports([]);
+        setShowDropdown(false);
+        handleChange(0); // or -1, depending on API expectations
+        inputRef.current?.focus();
+    };
+    return (_jsxs("div", { className: `cw-find-airport ${className}`, style: width ? { width } : undefined, children: [_jsxs("div", { className: "cw-find-airport-input-wrapper", children: [_jsx("input", { ref: inputRef, type: "text", value: inputValue, onChange: handleInputChange, onKeyDown: handleKeyDown, onFocus: handleInputFocus, placeholder: isInitialLoading ? "Loading…" : placeHolder, disabled: disabled, required: required, autoComplete: "off", "aria-expanded": showDropdown, "aria-haspopup": "listbox", role: "combobox", title: tooltipText }), (isLoading || isInitialLoading) && (_jsx("div", { className: "cw-find-airport-loading", children: _jsx(CwIcon, { iconId: "spinner" }) })), inputValue && !disabled && !isInitialLoading && (_jsx(CwButton, { type: "button", onClick: handleClear, "aria-label": "Clear selected airport", variant: "icon", icon: "close", color: "neutral" }))] }), showDropdown && options.length > 0 && (_jsx("div", { ref: dropdownRef, className: "cw-find-airport-dropdown", role: "listbox", children: options.map((option, index) => (_jsx("div", { className: `cw-find-airport-option ${index === highlightedIndex ? "highlighted" : ""}`, onClick: () => handleOptionSelect(option.value), role: "option", "aria-selected": index === highlightedIndex, children: option.text }, option.value))) }))] }));
+};