@cwellt_software/cwellt-reactjs-lib 1.2.13 → 1.2.14

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.d.ts

@@ -1,5 +1,6 @@
 import * as CSS from "csstype";
 import { DetailedHTMLProps, TextareaHTMLAttributes } from "react";
+import type { CwInputFeedback } from "../../../../common/interfaces/CwFormTypes";
 import { CwButtonProps } from "../../../../components/control/action/button/CwButton";
 import { CwIconProps } from "../../../../components/display/graphics/icon/CwIcon";
 import { CwLabelProps } from "../../../../components/display/text/label/CwLabel";
@@ -19,6 +20,11 @@ export interface CwTextAreaProps extends Omit<DetailedHTMLProps<TextareaHTMLAttr
     /** Props of the icon; undefined == no icon
      * @example iconProps={{iconId:"phone"}} */
     iconProps?: CwIconProps;
+    /** Feedback messages shown below the select; accepts a single message or an array for multiple
+    * @example feedback={{ type: "neutral", message: "Select the cat breed that best matches your preference" }}
+    * @example feedback={[{ type: "neutral", message: "Select a breed" }, { type: "danger", message: "This field is required" }]}
+    */
+    feedback?: CwInputFeedback | CwInputFeedback[];
 }
 export declare function CwTextArea(props: CwTextAreaProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=CwTextArea.d.ts.map

package/dist/src/components/control/input/text-area/CwTextArea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CwTextArea.d.ts","sourceRoot":"","sources":["../../../../../../src/components/control/input/text-area/CwTextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,GAAG,MAAM,SAAS,CAAC;AAC/B,OAAO,EAAE,iBAAiB,EAAE,sBAAsB,EAAE,MAAM,OAAO,CAAC;AAClE,OAAO,EAAY,aAAa,EAAE,MAAM,uDAAuD,CAAC;AAChG,OAAO,EAAU,WAAW,EAAE,MAAM,qDAAqD,CAAC;AAC1F,OAAO,EAAW,YAAY,EAAE,MAAM,mDAAmD,CAAC;AAC1F,OAAO,EAAW,YAAY,EAAE,MAAM,6CAA6C,CAAC;AAEpF,MAAM,WAAW,eAChB,SAAQ,IAAI,CAAC,iBAAiB,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EAAE,mBAAmB,CAAC,EAAE,WAAW,CAAC;IAC9G,yBAAyB;IACzB,MAAM,CAAC,EAAE,GAAG,CAAC,QAAQ,CAAC,MAAM,CAAC;IAC7B;iDAC6C;IAC7C,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B;gDAC4C;IAC5C,WAAW,CAAC,EAAE,aAAa,CAAC;IAC5B;8DAC0D;IAC1D,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B;+CAC2C;IAC3C,SAAS,CAAC,EAAE,WAAW,CAAC;CACxB;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,2CAqBhD"}
+{"version":3,"file":"CwTextArea.d.ts","sourceRoot":"","sources":["../../../../../../src/components/control/input/text-area/CwTextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,GAAG,MAAM,SAAS,CAAC;AAC/B,OAAO,EAAE,iBAAiB,EAAE,sBAAsB,EAAE,MAAM,OAAO,CAAC;AAClE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2CAA2C,CAAC;AACjF,OAAO,EAAY,aAAa,EAAE,MAAM,uDAAuD,CAAC;AAChG,OAAO,EAAU,WAAW,EAAE,MAAM,qDAAqD,CAAC;AAC1F,OAAO,EAAW,YAAY,EAAE,MAAM,mDAAmD,CAAC;AAC1F,OAAO,EAAW,YAAY,EAAE,MAAM,6CAA6C,CAAC;AAEpF,MAAM,WAAW,eAChB,SAAQ,IAAI,CAAC,iBAAiB,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EAAE,mBAAmB,CAAC,EAAE,WAAW,CAAC;IAC9G,yBAAyB;IACzB,MAAM,CAAC,EAAE,GAAG,CAAC,QAAQ,CAAC,MAAM,CAAC;IAC7B;iDAC6C;IAC7C,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B;gDAC4C;IAC5C,WAAW,CAAC,EAAE,aAAa,CAAC;IAC5B;8DAC0D;IAC1D,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B;+CAC2C;IAC3C,SAAS,CAAC,EAAE,WAAW,CAAC;IACxB;;;MAGE;IACF,QAAQ,CAAC,EAAE,eAAe,GAAG,eAAe,EAAE,CAAC;CAC/C;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,2CAiChD"}

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.d.ts

@@ -13,6 +13,7 @@ export interface CwFindAirportProps {
     disabled?: boolean;
     displayMode?: DisplayMode;
     width?: string;
+    initialDisplayText?: string;
     labelProps?: CwLabelProps;
     alignProps?: CwAlignProps;
 }

package/dist/src/components/custom/find-airport/CwFindAirportComp.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CwFindAirportComp.d.ts","sourceRoot":"","sources":["../../../../../src/components/custom/find-airport/CwFindAirportComp.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAGxE,OAAO,EAAW,KAAK,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAC9E,OAAO,EAAW,KAAK,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAgBxE,KAAK,WAAW,GAAG,SAAS,GAAG,WAAW,GAAG,WAAW,GAAG,WAAW,CAAC;AAEvE,MAAM,WAAW,kBAAkB;IAClC,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,UAAU,CAAC,EAAE,YAAY,CAAC;CAC1B;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAsXtD,CAAC"}
+{"version":3,"file":"CwFindAirportComp.d.ts","sourceRoot":"","sources":["../../../../../src/components/custom/find-airport/CwFindAirportComp.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAGxE,OAAO,EAAW,KAAK,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAC9E,OAAO,EAAW,KAAK,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAgBxE,KAAK,WAAW,GAAG,SAAS,GAAG,WAAW,GAAG,WAAW,GAAG,WAAW,CAAC;AAEvE,MAAM,WAAW,kBAAkB;IAClC,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAE5B,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,UAAU,CAAC,EAAE,YAAY,CAAC;CAC1B;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA4XtD,CAAC"}

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))) }))] }));
+};

package/dist/src/components/custom/scheduler/CwSchedulerComp.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CwSchedulerComp.d.ts","sourceRoot":"","sources":["../../../../../src/components/custom/scheduler/CwSchedulerComp.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAelC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAE3C,qBAAa,WAAY,SAAQ,SAAS,CAAC,gBAAgB,EAAE,KAAK,CAAC;IAClE,WAAW,CAAC,EAAE,wBAAwB,CAAC;IAEvC,cAAc,QAAO,MAAM,CAIzB;gBAEU,KAAK,EAAE,gBAAgB;IAuCnC,YAAY,aASV;IAEF,YAAY,OAAQ,GAAG,MAAM,GAAG,UAE/B;IACD,gBAAgB,OAAQ,GAAG,MAAM,GAAG,aAItB;IACd,WAAW,OAAQ,GAAG,EAAE,MAAM,GAAG,EAAE,aACiD;IAEpF,yBAAyB,CAAC,UAAU,EAAE,gBAAgB;IA2EtD,eAAe,eAAgB,gBAAgB,SAAS,MAAM,KAAG,QAAQ,EAAE,CA8CzE;IACF,yCAAyC,gBAAiB,GAAG,aAAa,QAAQ,UAgBhF;IAEF,iBAAiB,aAAc,QAAQ,QAAQ,MAAM,UAInD;IAEF,MAAM;CA2EN"}
+{"version":3,"file":"CwSchedulerComp.d.ts","sourceRoot":"","sources":["../../../../../src/components/custom/scheduler/CwSchedulerComp.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAelC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAE3C,qBAAa,WAAY,SAAQ,SAAS,CAAC,gBAAgB,EAAE,KAAK,CAAC;IAClE,WAAW,CAAC,EAAE,wBAAwB,CAAC;IAEvC,cAAc,QAAO,MAAM,CAIzB;gBAEU,KAAK,EAAE,gBAAgB;IAuCnC,YAAY,aASV;IAEF,YAAY,GAAI,IAAI,GAAG,EAAE,IAAI,GAAG,UAE/B;IACD,gBAAgB,GAAI,IAAI,GAAG,EAAE,IAAI,GAAG,aAItB;IACd,WAAW,GAAI,IAAI,GAAG,EAAE,EAAE,IAAI,GAAG,EAAE,aACiD;IAEpF,yBAAyB,CAAC,UAAU,EAAE,gBAAgB;IA2EtD,eAAe,GAAI,YAAY,gBAAgB,EAAE,OAAO,MAAM,KAAG,QAAQ,EAAE,CA8CzE;IACF,yCAAyC,GAAI,aAAa,GAAG,EAAE,WAAW,QAAQ,UAgBhF;IAEF,iBAAiB,GAAI,UAAU,QAAQ,EAAE,MAAM,MAAM,UAInD;IAEF,MAAM;CA2EN"}