@fgv/ts-res-ui-components 5.0.0-12 → 5.0.0-15

package/lib-commonjs/components/common/QualifierContextControl.js

@@ -0,0 +1,83 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QualifierContextControl = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const QualifierContextControl = ({ qualifierName, value, onChange, disabled = false, placeholder, resources, className = '' }) => {
+    // Extract qualifier type information from system configuration
+    const qualifierInfo = (0, react_1.useMemo)(() => {
+        if (!resources?.system?.qualifiers) {
+            return { hasEnumeratedValues: false, enumeratedValues: [] };
+        }
+        try {
+            // Get qualifier declaration
+            const qualifierResult = resources.system.qualifiers.validating.get(qualifierName);
+            if (!qualifierResult.isSuccess()) {
+                return { hasEnumeratedValues: false, enumeratedValues: [] };
+            }
+            const qualifier = qualifierResult.value;
+            // Access the instantiated qualifier type
+            if (qualifier.type) {
+                const qualifierType = qualifier.type;
+                // Use type assertion to access properties that may exist on specific subtypes
+                const qtAny = qualifierType;
+                const config = (qtAny.configuration || {});
+                // Look for enumerated values in different possible locations
+                const enumeratedValues = config.enumeratedValues ||
+                    config.allowedTerritories ||
+                    qtAny.enumeratedValues ||
+                    qtAny.allowedTerritories ||
+                    [];
+                if (enumeratedValues && Array.isArray(enumeratedValues) && enumeratedValues.length > 0) {
+                    return {
+                        hasEnumeratedValues: true,
+                        enumeratedValues: enumeratedValues,
+                        systemType: qtAny.systemType || 'literal',
+                        caseSensitive: config.caseSensitive !== false
+                    };
+                }
+            }
+            return { hasEnumeratedValues: false, enumeratedValues: [] };
+        }
+        catch (error) {
+            console.warn(`Failed to extract qualifier type info for ${qualifierName}:`, error);
+            return { hasEnumeratedValues: false, enumeratedValues: [] };
+        }
+    }, [qualifierName, resources?.system?.qualifiers]);
+    const handleChange = (newValue) => {
+        onChange(qualifierName, newValue || undefined);
+    };
+    const handleClear = () => {
+        onChange(qualifierName, undefined);
+    };
+    const effectiveValue = value ?? '';
+    const hasEnumeratedValues = qualifierInfo.hasEnumeratedValues && qualifierInfo.enumeratedValues.length > 0;
+    return (react_1.default.createElement("div", { className: `bg-white rounded border border-gray-200 p-2 ${className}` },
+        react_1.default.createElement("div", { className: "flex items-center gap-2" },
+            react_1.default.createElement("label", { className: "text-sm font-medium text-gray-700 min-w-0 flex-shrink-0" },
+                qualifierName,
+                ":"),
+            react_1.default.createElement("div", { className: "flex-1 flex items-center gap-1" },
+                hasEnumeratedValues ? (
+                // Dropdown for enumerated values
+                react_1.default.createElement("select", { value: effectiveValue, onChange: (e) => handleChange(e.target.value), disabled: disabled, className: `flex-1 px-2 py-1 border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-transparent text-sm min-w-0 ${disabled ? 'bg-gray-100 text-gray-400' : ''}` },
+                    react_1.default.createElement("option", { value: "" }, disabled
+                        ? 'Disabled'
+                        : value === undefined
+                            ? '(undefined)'
+                            : placeholder || 'Select value...'),
+                    qualifierInfo.enumeratedValues.map((enumValue) => (react_1.default.createElement("option", { key: enumValue, value: enumValue }, enumValue))))) : (
+                // Text input for non-enumerated values
+                react_1.default.createElement("input", { type: "text", value: effectiveValue, onChange: (e) => handleChange(e.target.value), disabled: disabled, className: `flex-1 px-2 py-1 border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-transparent text-sm min-w-0 ${disabled ? 'bg-gray-100 text-gray-400' : ''}`, placeholder: disabled
+                        ? 'Disabled'
+                        : value === undefined
+                            ? '(undefined)'
+                            : placeholder || `Enter ${qualifierName} value` })),
+                !disabled && value !== undefined && (react_1.default.createElement("button", { type: "button", onClick: handleClear, className: "px-2 py-1 text-xs text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded transition-colors", title: "Set to undefined" }, "\u2715")))),
+        hasEnumeratedValues && (react_1.default.createElement("div", { className: "mt-1 text-xs text-blue-600" },
+            qualifierInfo.enumeratedValues.length,
+            " predefined values"))));
+};
+exports.QualifierContextControl = QualifierContextControl;
+exports.default = exports.QualifierContextControl;
+//# sourceMappingURL=QualifierContextControl.js.map

package/lib-commonjs/components/common/ResourceListView.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ResourceListView = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const outline_1 = require("@heroicons/react/24/outline");
+const ResourceListView = ({ resourceIds, selectedResourceId, onResourceSelect, searchTerm = '', className = '' }) => {
+    // Filter and sort resource IDs
+    const filteredResourceIds = react_1.default.useMemo(() => {
+        const filtered = searchTerm
+            ? resourceIds.filter((id) => id.toLowerCase().includes(searchTerm.toLowerCase()))
+            : resourceIds;
+        return filtered.sort();
+    }, [resourceIds, searchTerm]);
+    if (filteredResourceIds.length === 0) {
+        return (react_1.default.createElement("div", { className: `${className} p-4 text-center text-gray-500` },
+            react_1.default.createElement("p", null, searchTerm ? 'No resources match your search' : 'No resources available')));
+    }
+    return (react_1.default.createElement("div", { className: `${className} overflow-y-auto` }, filteredResourceIds.map((resourceId) => (react_1.default.createElement("div", { key: resourceId, className: `flex items-center px-3 py-2 cursor-pointer hover:bg-gray-100 border-b border-gray-100 last:border-b-0 ${selectedResourceId === resourceId ? 'bg-purple-50 border-l-2 border-purple-500' : ''} ${searchTerm && resourceId.toLowerCase().includes(searchTerm.toLowerCase()) ? 'bg-yellow-50' : ''}`, onClick: () => onResourceSelect(resourceId) },
+        react_1.default.createElement(outline_1.DocumentTextIcon, { className: "w-4 h-4 text-green-500 mr-2 flex-shrink-0" }),
+        react_1.default.createElement("span", { className: `text-sm truncate ${selectedResourceId === resourceId ? 'font-medium text-purple-900' : 'text-gray-700'}`, title: resourceId }, resourceId))))));
+};
+exports.ResourceListView = ResourceListView;
+exports.default = exports.ResourceListView;
+//# sourceMappingURL=ResourceListView.js.map

package/lib-commonjs/components/common/ResourceTreeView.js

@@ -0,0 +1,167 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ResourceTreeView = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const outline_1 = require("@heroicons/react/24/outline");
+const ResourceTreeView = ({ resources, selectedResourceId, onResourceSelect, searchTerm = '', className = '' }) => {
+    const [expandedNodes, setExpandedNodes] = (0, react_1.useState)(new Set());
+    // Build the tree structure from resources
+    const treeData = (0, react_1.useMemo)(() => {
+        if (!resources)
+            return null;
+        // Get the tree from the resources
+        const treeResult = resources.getBuiltResourceTree();
+        if (treeResult.isFailure()) {
+            console.error('Failed to build resource tree:', treeResult.message);
+            return null;
+        }
+        return treeResult.value;
+    }, [resources]);
+    // Filter tree based on search term
+    const filteredTree = (0, react_1.useMemo)(() => {
+        if (!treeData || !searchTerm)
+            return treeData;
+        // Helper function to check if a node or its descendants match the search
+        const markMatchingNodes = (node, searchLower) => {
+            const nodeIdLower = node.id.toLowerCase();
+            let matches = nodeIdLower.includes(searchLower);
+            if (!node.isLeaf && node.children) {
+                // Check children recursively
+                for (const child of node.children.values()) {
+                    if (markMatchingNodes(child, searchLower)) {
+                        matches = true;
+                    }
+                }
+            }
+            return matches;
+        };
+        // Mark all matching nodes
+        const searchLower = searchTerm.toLowerCase();
+        for (const child of treeData.children.values()) {
+            markMatchingNodes(child, searchLower);
+        }
+        return treeData;
+    }, [treeData, searchTerm]);
+    // Toggle node expansion
+    const toggleNode = (0, react_1.useCallback)((nodeId) => {
+        setExpandedNodes((prev) => {
+            const newExpanded = new Set(prev);
+            if (newExpanded.has(nodeId)) {
+                newExpanded.delete(nodeId);
+            }
+            else {
+                newExpanded.add(nodeId);
+            }
+            return newExpanded;
+        });
+    }, []);
+    // Expand all nodes that contain search matches
+    const expandMatchingNodes = (0, react_1.useCallback)(() => {
+        if (!searchTerm || !filteredTree)
+            return;
+        const searchLower = searchTerm.toLowerCase();
+        const nodesToExpand = new Set();
+        const checkNode = (node) => {
+            if (node.id.toLowerCase().includes(searchLower)) {
+                // Expand all parent nodes
+                const parts = node.id.split('.');
+                for (let i = 1; i < parts.length; i++) {
+                    nodesToExpand.add(parts.slice(0, i).join('.'));
+                }
+            }
+            if (!node.isLeaf && node.children) {
+                for (const child of node.children.values()) {
+                    checkNode(child);
+                }
+            }
+        };
+        for (const child of filteredTree.children.values()) {
+            checkNode(child);
+        }
+        setExpandedNodes(nodesToExpand);
+    }, [searchTerm, filteredTree]);
+    // Auto-expand when search term changes
+    react_1.default.useEffect(() => {
+        if (searchTerm) {
+            expandMatchingNodes();
+        }
+    }, [searchTerm, expandMatchingNodes]);
+    // Render a single tree node
+    const renderTreeNode = (node, level = 0) => {
+        const isExpanded = expandedNodes.has(node.id);
+        const isSelected = selectedResourceId === node.id;
+        const nodeIdLower = node.id.toLowerCase();
+        const searchLower = searchTerm.toLowerCase();
+        const matchesSearch = !searchTerm || nodeIdLower.includes(searchLower);
+        // Check if any children match
+        let hasMatchingChildren = false;
+        if (!node.isLeaf && node.children && searchTerm) {
+            const checkChildren = (n) => {
+                if (n.id.toLowerCase().includes(searchLower))
+                    return true;
+                if (!n.isLeaf && n.children) {
+                    for (const child of n.children.values()) {
+                        if (checkChildren(child))
+                            return true;
+                    }
+                }
+                return false;
+            };
+            for (const child of node.children.values()) {
+                if (checkChildren(child)) {
+                    hasMatchingChildren = true;
+                    break;
+                }
+            }
+        }
+        // Hide nodes that don't match search and don't have matching children
+        if (searchTerm && !matchesSearch && !hasMatchingChildren) {
+            return null;
+        }
+        return (react_1.default.createElement("div", { key: node.id },
+            react_1.default.createElement("div", { className: `flex items-center px-2 py-1 cursor-pointer hover:bg-gray-100 ${isSelected ? 'bg-purple-50 border-l-2 border-purple-500' : ''} ${matchesSearch && searchTerm ? 'bg-yellow-50' : ''}`, style: { paddingLeft: `${level * 20 + 8}px` }, onClick: () => {
+                    if (node.isLeaf) {
+                        onResourceSelect(node.id);
+                    }
+                    else {
+                        toggleNode(node.id);
+                    }
+                } },
+                !node.isLeaf && (react_1.default.createElement("button", { onClick: (e) => {
+                        e.stopPropagation();
+                        toggleNode(node.id);
+                    }, className: "mr-1 p-0.5 hover:bg-gray-200 rounded" }, isExpanded ? (react_1.default.createElement(outline_1.ChevronDownIcon, { className: "w-3 h-3 text-gray-600" })) : (react_1.default.createElement(outline_1.ChevronRightIcon, { className: "w-3 h-3 text-gray-600" })))),
+                node.isLeaf ? (react_1.default.createElement(outline_1.DocumentTextIcon, { className: "w-4 h-4 text-green-500 mr-2 flex-shrink-0" })) : isExpanded ? (react_1.default.createElement(outline_1.FolderOpenIcon, { className: "w-4 h-4 text-blue-500 mr-2 flex-shrink-0" })) : (react_1.default.createElement(outline_1.FolderIcon, { className: "w-4 h-4 text-blue-500 mr-2 flex-shrink-0" })),
+                react_1.default.createElement("span", { className: `text-sm truncate ${isSelected ? 'font-medium text-purple-900' : 'text-gray-700'} ${matchesSearch && searchTerm ? 'font-medium' : ''}`, title: node.id }, node.name),
+                !node.isLeaf && node.children && (react_1.default.createElement("span", { className: "ml-2 text-xs text-gray-500" },
+                    "(",
+                    node.children.size,
+                    ")"))),
+            !node.isLeaf && node.children && isExpanded && (react_1.default.createElement("div", null, Array.from(node.children.values())
+                .sort((a, b) => {
+                // Sort folders first, then by name
+                if (a.isLeaf !== b.isLeaf) {
+                    return a.isLeaf ? 1 : -1;
+                }
+                return a.name.localeCompare(b.name);
+            })
+                .map((child) => renderTreeNode(child, level + 1))))));
+    };
+    if (!filteredTree) {
+        return (react_1.default.createElement("div", { className: `${className} p-4 text-center text-gray-500` },
+            react_1.default.createElement("p", null, "No resources available")));
+    }
+    return (react_1.default.createElement("div", { className: `${className} overflow-y-auto` }, Array.from(filteredTree.children.values())
+        .sort((a, b) => {
+        // Sort folders first, then by name
+        if (a.isLeaf !== b.isLeaf) {
+            return a.isLeaf ? 1 : -1;
+        }
+        return a.name.localeCompare(b.name);
+    })
+        .map((child) => renderTreeNode(child))));
+};
+exports.ResourceTreeView = ResourceTreeView;
+exports.default = exports.ResourceTreeView;
+//# sourceMappingURL=ResourceTreeView.js.map

package/lib-commonjs/components/forms/HierarchyEditor.js

@@ -0,0 +1,111 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HierarchyEditor = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const HierarchyEditor = ({ hierarchy, onChange, availableValues, className = '' }) => {
+    const [newChild, setNewChild] = (0, react_1.useState)('');
+    const [newParent, setNewParent] = (0, react_1.useState)('');
+    // Ensure hierarchy is a valid object with string values
+    const safeHierarchy = react_1.default.useMemo(() => {
+        if (!hierarchy || typeof hierarchy !== 'object') {
+            return {};
+        }
+        // Filter out any non-string values
+        const safe = {};
+        for (const [key, value] of Object.entries(hierarchy)) {
+            if (typeof value === 'string') {
+                safe[key] = value;
+            }
+        }
+        return safe;
+    }, [hierarchy]);
+    const handleAddRelationship = () => {
+        if (newChild && newParent && newChild !== newParent) {
+            const updatedHierarchy = { ...safeHierarchy, [newChild]: newParent };
+            onChange(updatedHierarchy);
+            setNewChild('');
+            setNewParent('');
+        }
+    };
+    const handleRemoveRelationship = (child) => {
+        const updatedHierarchy = { ...safeHierarchy };
+        delete updatedHierarchy[child];
+        onChange(updatedHierarchy);
+    };
+    const getHierarchyTree = () => {
+        const roots = new Set(availableValues);
+        const children = new Set(Object.keys(safeHierarchy));
+        const parents = new Set(Object.values(safeHierarchy));
+        // Remove children from roots (they have parents)
+        children.forEach((child) => roots.delete(child));
+        // Add parents that aren't in available values (for display purposes)
+        parents.forEach((parent) => {
+            if (!availableValues.includes(parent)) {
+                roots.add(parent);
+            }
+        });
+        const buildTree = (value, level = 0) => {
+            const childrenOfValue = Object.entries(safeHierarchy).filter(([, parent]) => parent === value);
+            return {
+                value,
+                level,
+                children: childrenOfValue.map(([child]) => buildTree(child, level + 1))
+            };
+        };
+        return Array.from(roots).map((root) => buildTree(root));
+    };
+    const renderTree = (nodes) => {
+        return nodes.map((node) => {
+            const parentValue = safeHierarchy[node.value];
+            return (react_1.default.createElement("div", { key: node.value, className: "ml-4" },
+                react_1.default.createElement("div", { className: "flex items-center space-x-2 py-1" },
+                    react_1.default.createElement("span", { className: "text-sm text-gray-700", style: { marginLeft: `${node.level * 20}px` } },
+                        node.level > 0 && '└─ ',
+                        node.value),
+                    parentValue && react_1.default.createElement("span", { className: "text-xs text-gray-500" },
+                        "\u2192 ",
+                        parentValue)),
+                node.children.length > 0 && renderTree(node.children)));
+        });
+    };
+    return (react_1.default.createElement("div", { className: className },
+        react_1.default.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-2" }, "Value Hierarchy"),
+        react_1.default.createElement("div", { className: "border border-gray-300 rounded-md p-3 bg-white" },
+            react_1.default.createElement("div", { className: "mb-4 p-3 bg-gray-50 rounded border" },
+                react_1.default.createElement("div", { className: "text-sm font-medium text-gray-700 mb-2" }, "Add Parent-Child Relationship"),
+                react_1.default.createElement("div", { className: "grid grid-cols-3 gap-2 items-end" },
+                    react_1.default.createElement("div", null,
+                        react_1.default.createElement("label", { className: "block text-xs text-gray-600" }, "Child Value"),
+                        availableValues.length > 0 ? (react_1.default.createElement("select", { value: newChild, onChange: (e) => setNewChild(e.target.value), className: "w-full text-sm rounded border-gray-300 focus:border-blue-500 focus:ring-blue-500" },
+                            react_1.default.createElement("option", { value: "" }, "Select child..."),
+                            availableValues.map((value) => (react_1.default.createElement("option", { key: value, value: value }, value))))) : (react_1.default.createElement("input", { type: "text", value: newChild, onChange: (e) => setNewChild(e.target.value), placeholder: "Enter child value", className: "w-full text-sm rounded border-gray-300 focus:border-blue-500 focus:ring-blue-500" }))),
+                    react_1.default.createElement("div", null,
+                        react_1.default.createElement("label", { className: "block text-xs text-gray-600" }, "Parent Value"),
+                        react_1.default.createElement("input", { type: "text", value: newParent, onChange: (e) => setNewParent(e.target.value), placeholder: "Enter parent value", className: "w-full text-sm rounded border-gray-300 focus:border-blue-500 focus:ring-blue-500" })),
+                    react_1.default.createElement("div", null,
+                        react_1.default.createElement("button", { onClick: handleAddRelationship, disabled: !newChild || !newParent || newChild === newParent, className: "w-full px-3 py-1 text-sm bg-blue-600 text-white rounded hover:bg-blue-700 disabled:bg-gray-300 disabled:cursor-not-allowed" }, "Add"))),
+                react_1.default.createElement("div", { className: "text-xs text-gray-500 mt-1" }, availableValues.length > 0
+                    ? "Define which values are children of other values. The parent doesn't need to be in the enumerated values list."
+                    : 'Define which values are children of other values. Enter any valid values for this qualifier type.')),
+            Object.keys(safeHierarchy).length > 0 && (react_1.default.createElement("div", { className: "mb-4" },
+                react_1.default.createElement("div", { className: "text-sm font-medium text-gray-700 mb-2" },
+                    "Current Relationships (",
+                    Object.keys(safeHierarchy).length,
+                    ")"),
+                react_1.default.createElement("div", { className: "max-h-24 overflow-y-auto border border-gray-200 rounded bg-white p-2" },
+                    react_1.default.createElement("div", { className: "space-y-1" }, Object.entries(safeHierarchy).map(([child, parent]) => (react_1.default.createElement("div", { key: child, className: "flex items-center justify-between bg-gray-50 px-2 py-1 rounded" },
+                        react_1.default.createElement("span", { className: "text-sm" },
+                            react_1.default.createElement("span", { className: "font-medium" }, child),
+                            " \u2192",
+                            ' ',
+                            react_1.default.createElement("span", { className: "text-gray-600" }, parent)),
+                        react_1.default.createElement("button", { onClick: () => handleRemoveRelationship(child), className: "text-red-600 hover:text-red-800 text-xs ml-2 flex-shrink-0" }, "Remove")))))))),
+            (availableValues.length > 0 || Object.keys(safeHierarchy).length > 0) && (react_1.default.createElement("div", null,
+                react_1.default.createElement("div", { className: "text-sm font-medium text-gray-700 mb-2" }, "Hierarchy Tree"),
+                react_1.default.createElement("div", { className: "bg-gray-50 border rounded max-h-32 overflow-y-auto" },
+                    react_1.default.createElement("div", { className: "p-2 text-sm font-mono" }, getHierarchyTree().length > 0 ? (renderTree(getHierarchyTree())) : (react_1.default.createElement("div", { className: "text-gray-500 text-center py-2" }, "No hierarchy defined. Add relationships above to see the tree structure.")))))))));
+};
+exports.HierarchyEditor = HierarchyEditor;
+exports.default = exports.HierarchyEditor;
+//# sourceMappingURL=HierarchyEditor.js.map

package/lib-commonjs/components/forms/QualifierEditForm.js

@@ -0,0 +1,211 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QualifierEditForm = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const outline_1 = require("@heroicons/react/24/outline");
+const ts_utils_1 = require("@fgv/ts-utils");
+const QualifierEditForm = ({ qualifier, qualifierTypes, onSave, onCancel, existingNames = [] }) => {
+    const [formData, setFormData] = (0, react_1.useState)(() => {
+        if (qualifier) {
+            return {
+                name: qualifier.name,
+                typeName: qualifier.typeName,
+                defaultPriority: qualifier.defaultPriority,
+                token: qualifier.token || '',
+                tokenIsOptional: qualifier.tokenIsOptional || false,
+                defaultValue: qualifier.defaultValue || ''
+            };
+        }
+        return {
+            name: '',
+            typeName: qualifierTypes[0]?.name || '',
+            defaultPriority: 50,
+            token: '',
+            tokenIsOptional: false,
+            defaultValue: ''
+        };
+    });
+    const [errors, setErrors] = (0, react_1.useState)({});
+    // Get the selected qualifier type for context
+    const selectedQualifierType = qualifierTypes.find((qt) => qt.name === formData.typeName);
+    // Type-safe extraction of allowContextList property
+    const allowsContextList = (() => {
+        if (!selectedQualifierType?.configuration)
+            return false;
+        const result = ts_utils_1.Converters.boolean.convert(selectedQualifierType.configuration.allowContextList);
+        return result.isSuccess() ? result.value : false;
+    })();
+    // Validation
+    const validateForm = (0, react_1.useCallback)(() => {
+        const newErrors = {};
+        if (!formData.name.trim()) {
+            newErrors.name = 'Name is required';
+        }
+        else if (existingNames.includes(formData.name) && formData.name !== qualifier?.name) {
+            newErrors.name = 'Name must be unique';
+        }
+        if (!formData.typeName) {
+            newErrors.typeName = 'Qualifier type is required';
+        }
+        if (formData.defaultPriority < 0 || formData.defaultPriority > 1000) {
+            newErrors.defaultPriority = 'Priority must be between 0 and 1000';
+        }
+        if (formData.token && !/^[a-zA-Z][a-zA-Z0-9_]*$/.test(formData.token)) {
+            newErrors.token = 'Token must start with a letter and contain only letters, numbers, and underscores';
+        }
+        setErrors(newErrors);
+        return Object.keys(newErrors).length === 0;
+    }, [formData, existingNames, qualifier?.name]);
+    const handleSave = (0, react_1.useCallback)(() => {
+        if (!validateForm())
+            return;
+        const result = {
+            name: formData.name,
+            typeName: formData.typeName,
+            defaultPriority: formData.defaultPriority,
+            ...(formData.token && { token: formData.token }),
+            ...(formData.token && formData.tokenIsOptional && { tokenIsOptional: true }),
+            ...(formData.defaultValue && { defaultValue: formData.defaultValue })
+        };
+        onSave(result);
+    }, [formData, validateForm, onSave]);
+    const updateField = (0, react_1.useCallback)((field, value) => {
+        setFormData((prev) => {
+            const updated = { ...prev, [field]: value };
+            // Auto-generate token from name if no custom token is set
+            if (field === 'name' && !prev.token) {
+                updated.token = String(value)
+                    .toLowerCase()
+                    .replace(/[^a-zA-Z0-9]/g, '');
+            }
+            // Clear tokenIsOptional if token is cleared
+            if (field === 'token' && !value) {
+                updated.tokenIsOptional = false;
+            }
+            return updated;
+        });
+        if (errors[field]) {
+            setErrors((prev) => ({ ...prev, [field]: '' }));
+        }
+    }, [errors]);
+    const getDefaultValuePlaceholder = () => {
+        if (!selectedQualifierType)
+            return 'Enter default value';
+        switch (selectedQualifierType.systemType) {
+            case 'language':
+                return allowsContextList ? 'e.g., en-US or en-US,en' : 'e.g., en-US';
+            case 'territory':
+                return allowsContextList ? 'e.g., US or US,CA' : 'e.g., US';
+            case 'literal':
+                // Type-safe extraction of enumeratedValues
+                const enumValues = (() => {
+                    if (!selectedQualifierType.configuration)
+                        return undefined;
+                    const result = ts_utils_1.Converters.arrayOf(ts_utils_1.Converters.string).convert(selectedQualifierType.configuration.enumeratedValues);
+                    return result.isSuccess() ? result.value : undefined;
+                })();
+                if (enumValues && enumValues.length > 0) {
+                    return allowsContextList
+                        ? `e.g., ${enumValues[0]} or ${enumValues.slice(0, 2).join(',')}`
+                        : `e.g., ${enumValues[0]}`;
+                }
+                return allowsContextList ? 'e.g., value or value1,value2' : 'e.g., value';
+            default:
+                return 'Enter default value';
+        }
+    };
+    return (react_1.default.createElement("div", { className: "fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center z-50 p-4" },
+        react_1.default.createElement("div", { className: "bg-white rounded-lg shadow-xl max-w-2xl w-full h-full max-h-[calc(100vh-2rem)] flex flex-col" },
+            react_1.default.createElement("div", { className: "flex items-center justify-between p-6 border-b flex-shrink-0" },
+                react_1.default.createElement("h3", { className: "text-lg font-medium text-gray-900" }, qualifier ? 'Edit Qualifier' : 'Add Qualifier'),
+                react_1.default.createElement("button", { onClick: onCancel, className: "text-gray-400 hover:text-gray-600" },
+                    react_1.default.createElement(outline_1.XMarkIcon, { className: "w-6 h-6" }))),
+            react_1.default.createElement("div", { className: "p-6 space-y-6 overflow-y-auto flex-1 min-h-0" },
+                react_1.default.createElement("div", { className: "grid grid-cols-2 gap-4" },
+                    react_1.default.createElement("div", null,
+                        react_1.default.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1" }, "Name *"),
+                        react_1.default.createElement("input", { type: "text", value: formData.name, onChange: (e) => updateField('name', e.target.value), className: `w-full px-3 py-2 border rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-blue-500 ${errors.name ? 'border-red-300' : 'border-gray-300'}`, placeholder: "Enter qualifier name" }),
+                        errors.name && react_1.default.createElement("p", { className: "mt-1 text-sm text-red-600" }, errors.name)),
+                    react_1.default.createElement("div", null,
+                        react_1.default.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1" }, "Qualifier Type *"),
+                        react_1.default.createElement("select", { value: formData.typeName, onChange: (e) => updateField('typeName', e.target.value), className: `w-full px-3 py-2 border rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-blue-500 ${errors.typeName ? 'border-red-300' : 'border-gray-300'}` }, qualifierTypes.length === 0 ? (react_1.default.createElement("option", { value: "" }, "No qualifier types available")) : (qualifierTypes.map((type) => (react_1.default.createElement("option", { key: type.name, value: type.name },
+                            type.name,
+                            " (",
+                            type.systemType,
+                            ")"))))),
+                        errors.typeName && react_1.default.createElement("p", { className: "mt-1 text-sm text-red-600" }, errors.typeName))),
+                react_1.default.createElement("div", { className: "grid grid-cols-2 gap-4" },
+                    react_1.default.createElement("div", null,
+                        react_1.default.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1" }, "Default Priority *"),
+                        react_1.default.createElement("input", { type: "number", min: "0", max: "1000", value: formData.defaultPriority, onChange: (e) => updateField('defaultPriority', parseInt(e.target.value) || 0), className: `w-full px-3 py-2 border rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-blue-500 ${errors.defaultPriority ? 'border-red-300' : 'border-gray-300'}`, placeholder: "50" }),
+                        errors.defaultPriority && (react_1.default.createElement("p", { className: "mt-1 text-sm text-red-600" }, errors.defaultPriority)),
+                        react_1.default.createElement("p", { className: "mt-1 text-xs text-gray-500" }, "Higher numbers have higher priority (0-1000)")),
+                    react_1.default.createElement("div", null,
+                        react_1.default.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1" },
+                            "Token",
+                            react_1.default.createElement("span", { className: "ml-1 text-gray-500" }, "(optional)")),
+                        react_1.default.createElement("input", { type: "text", value: formData.token, onChange: (e) => updateField('token', e.target.value), className: `w-full px-3 py-2 border rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-blue-500 ${errors.token ? 'border-red-300' : 'border-gray-300'}`, placeholder: "e.g., lang, locale" }),
+                        errors.token && react_1.default.createElement("p", { className: "mt-1 text-sm text-red-600" }, errors.token),
+                        react_1.default.createElement("p", { className: "mt-1 text-xs text-gray-500" }, "Used to identify this qualifier in resource names"))),
+                formData.token && (react_1.default.createElement("div", { className: "flex items-center" },
+                    react_1.default.createElement("input", { type: "checkbox", id: "tokenIsOptional", checked: formData.tokenIsOptional, onChange: (e) => updateField('tokenIsOptional', e.target.checked), className: "h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" }),
+                    react_1.default.createElement("label", { htmlFor: "tokenIsOptional", className: "ml-2 text-sm text-gray-700" }, "Token is optional in resource names"),
+                    react_1.default.createElement("div", { className: "ml-2 group relative" },
+                        react_1.default.createElement(outline_1.InformationCircleIcon, { className: "w-4 h-4 text-gray-400" }),
+                        react_1.default.createElement("div", { className: "absolute left-0 bottom-6 hidden group-hover:block bg-gray-800 text-white text-xs rounded py-1 px-2 whitespace-nowrap z-10" }, "Allow resources without this qualifier token")))),
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1" },
+                        "Default Value",
+                        react_1.default.createElement("span", { className: "ml-1 text-gray-500" }, "(optional)")),
+                    react_1.default.createElement("input", { type: "text", value: formData.defaultValue, onChange: (e) => updateField('defaultValue', e.target.value), className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-blue-500", placeholder: getDefaultValuePlaceholder() }),
+                    react_1.default.createElement("div", { className: "mt-1 text-xs text-gray-500" }, selectedQualifierType && (react_1.default.createElement("div", null,
+                        react_1.default.createElement("p", null,
+                            "Qualifier type: ",
+                            react_1.default.createElement("span", { className: "font-medium" }, selectedQualifierType.systemType)),
+                        allowsContextList && (react_1.default.createElement("p", { className: "text-blue-600" }, "This qualifier type supports multiple values (comma-separated)")))))),
+                selectedQualifierType && (react_1.default.createElement("div", { className: "p-4 bg-gray-50 rounded-lg" },
+                    react_1.default.createElement("h4", { className: "font-medium text-gray-900 mb-2" }, "Qualifier Type Information"),
+                    react_1.default.createElement("div", { className: "text-sm text-gray-600 space-y-1" },
+                        react_1.default.createElement("p", null,
+                            react_1.default.createElement("span", { className: "font-medium" }, "System Type:"),
+                            " ",
+                            selectedQualifierType.systemType),
+                        react_1.default.createElement("p", null,
+                            react_1.default.createElement("span", { className: "font-medium" }, "Supports Context List:"),
+                            ' ',
+                            allowsContextList ? 'Yes' : 'No'),
+                        selectedQualifierType.systemType === 'literal' && selectedQualifierType.configuration && (react_1.default.createElement(react_1.default.Fragment, null,
+                            selectedQualifierType.configuration.caseSensitive !==
+                                undefined && (react_1.default.createElement("p", null,
+                                react_1.default.createElement("span", { className: "font-medium" }, "Case Sensitive:"),
+                                ' ',
+                                selectedQualifierType.configuration
+                                    .caseSensitive
+                                    ? 'Yes'
+                                    : 'No')),
+                            selectedQualifierType.configuration.enumeratedValues && (react_1.default.createElement("p", null,
+                                react_1.default.createElement("span", { className: "font-medium" }, "Allowed Values:"),
+                                ' ',
+                                selectedQualifierType.configuration
+                                    .enumeratedValues.join(', '))))),
+                        selectedQualifierType.systemType === 'territory' && selectedQualifierType.configuration && (react_1.default.createElement(react_1.default.Fragment, null,
+                            selectedQualifierType.configuration.acceptLowercase !==
+                                undefined && (react_1.default.createElement("p", null,
+                                react_1.default.createElement("span", { className: "font-medium" }, "Accept Lowercase:"),
+                                ' ',
+                                selectedQualifierType.configuration
+                                    .acceptLowercase
+                                    ? 'Yes'
+                                    : 'No')),
+                            selectedQualifierType.configuration.allowedTerritories && (react_1.default.createElement("p", null,
+                                react_1.default.createElement("span", { className: "font-medium" }, "Allowed Territories:"),
+                                ' ',
+                                selectedQualifierType.configuration
+                                    .allowedTerritories.join(', '))))))))),
+            react_1.default.createElement("div", { className: "flex justify-end space-x-3 px-6 py-4 border-t bg-gray-50 flex-shrink-0" },
+                react_1.default.createElement("button", { onClick: onCancel, className: "px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" }, "Cancel"),
+                react_1.default.createElement("button", { onClick: handleSave, className: "px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" }, qualifier ? 'Save Changes' : 'Add Qualifier')))));
+};
+exports.QualifierEditForm = QualifierEditForm;
+//# sourceMappingURL=QualifierEditForm.js.map