@prairielearn/ui 1.3.0 → 1.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (71) hide show
  1. package/CHANGELOG.md +28 -0
  2. package/README.md +4 -2
  3. package/dist/components/CategoricalColumnFilter.d.ts +7 -12
  4. package/dist/components/CategoricalColumnFilter.d.ts.map +1 -1
  5. package/dist/components/CategoricalColumnFilter.js +15 -11
  6. package/dist/components/CategoricalColumnFilter.js.map +1 -1
  7. package/dist/components/ColumnManager.d.ts +6 -3
  8. package/dist/components/ColumnManager.d.ts.map +1 -1
  9. package/dist/components/ColumnManager.js +98 -18
  10. package/dist/components/ColumnManager.js.map +1 -1
  11. package/dist/components/MultiSelectColumnFilter.d.ts +8 -12
  12. package/dist/components/MultiSelectColumnFilter.d.ts.map +1 -1
  13. package/dist/components/MultiSelectColumnFilter.js +21 -13
  14. package/dist/components/MultiSelectColumnFilter.js.map +1 -1
  15. package/dist/components/NumericInputColumnFilter.d.ts +13 -13
  16. package/dist/components/NumericInputColumnFilter.d.ts.map +1 -1
  17. package/dist/components/NumericInputColumnFilter.js +44 -15
  18. package/dist/components/NumericInputColumnFilter.js.map +1 -1
  19. package/dist/components/NumericInputColumnFilter.test.d.ts +2 -0
  20. package/dist/components/NumericInputColumnFilter.test.d.ts.map +1 -0
  21. package/dist/components/NumericInputColumnFilter.test.js +90 -0
  22. package/dist/components/NumericInputColumnFilter.test.js.map +1 -0
  23. package/dist/components/OverlayTrigger.d.ts +78 -0
  24. package/dist/components/OverlayTrigger.d.ts.map +1 -0
  25. package/dist/components/OverlayTrigger.js +89 -0
  26. package/dist/components/OverlayTrigger.js.map +1 -0
  27. package/dist/components/PresetFilterDropdown.d.ts +19 -0
  28. package/dist/components/PresetFilterDropdown.d.ts.map +1 -0
  29. package/dist/components/PresetFilterDropdown.js +93 -0
  30. package/dist/components/PresetFilterDropdown.js.map +1 -0
  31. package/dist/components/TanstackTable.d.ts +15 -4
  32. package/dist/components/TanstackTable.d.ts.map +1 -1
  33. package/dist/components/TanstackTable.js +148 -197
  34. package/dist/components/TanstackTable.js.map +1 -1
  35. package/dist/components/TanstackTableDownloadButton.d.ts +4 -2
  36. package/dist/components/TanstackTableDownloadButton.d.ts.map +1 -1
  37. package/dist/components/TanstackTableDownloadButton.js +4 -3
  38. package/dist/components/TanstackTableDownloadButton.js.map +1 -1
  39. package/dist/components/TanstackTableHeaderCell.d.ts +13 -0
  40. package/dist/components/TanstackTableHeaderCell.d.ts.map +1 -0
  41. package/dist/components/TanstackTableHeaderCell.js +98 -0
  42. package/dist/components/TanstackTableHeaderCell.js.map +1 -0
  43. package/dist/components/{TanstackTable.css → styles.css} +11 -6
  44. package/dist/components/useAutoSizeColumns.d.ts +17 -0
  45. package/dist/components/useAutoSizeColumns.d.ts.map +1 -0
  46. package/dist/components/useAutoSizeColumns.js +99 -0
  47. package/dist/components/useAutoSizeColumns.js.map +1 -0
  48. package/dist/index.d.ts +5 -1
  49. package/dist/index.d.ts.map +1 -1
  50. package/dist/index.js +5 -0
  51. package/dist/index.js.map +1 -1
  52. package/dist/react-table.d.ts +13 -0
  53. package/dist/react-table.d.ts.map +1 -0
  54. package/dist/react-table.js +3 -0
  55. package/dist/react-table.js.map +1 -0
  56. package/package.json +2 -2
  57. package/src/components/CategoricalColumnFilter.tsx +28 -28
  58. package/src/components/ColumnManager.tsx +222 -46
  59. package/src/components/MultiSelectColumnFilter.tsx +45 -32
  60. package/src/components/NumericInputColumnFilter.test.ts +67 -19
  61. package/src/components/NumericInputColumnFilter.tsx +102 -42
  62. package/src/components/OverlayTrigger.tsx +168 -0
  63. package/src/components/PresetFilterDropdown.tsx +155 -0
  64. package/src/components/TanstackTable.tsx +315 -363
  65. package/src/components/TanstackTableDownloadButton.tsx +8 -5
  66. package/src/components/TanstackTableHeaderCell.tsx +207 -0
  67. package/src/components/{TanstackTable.css → styles.css} +11 -6
  68. package/src/components/useAutoSizeColumns.tsx +168 -0
  69. package/src/index.ts +7 -0
  70. package/src/react-table.ts +17 -0
  71. package/tsconfig.json +1 -2
@@ -0,0 +1,93 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "@prairielearn/preact-cjs/jsx-runtime";
2
+ import { useMemo } from 'preact/compat';
3
+ import { ButtonGroup, Dropdown } from 'react-bootstrap';
4
+ /**
5
+ * Compares two filter values for deep equality using JSON serialization.
6
+ */
7
+ function filtersEqual(a, b) {
8
+ return JSON.stringify(a) === JSON.stringify(b);
9
+ }
10
+ /**
11
+ * Extracts all unique column IDs referenced across all preset options.
12
+ */
13
+ function getRelevantColumnIds(options) {
14
+ const columnIds = new Set();
15
+ for (const filters of Object.values(options)) {
16
+ for (const filter of filters) {
17
+ columnIds.add(filter.id);
18
+ }
19
+ }
20
+ return columnIds;
21
+ }
22
+ /**
23
+ * Gets the current filter values for the relevant columns from the table.
24
+ */
25
+ function getRelevantFilters(table, relevantColumnIds) {
26
+ const allFilters = table.getState().columnFilters;
27
+ return allFilters.filter((f) => relevantColumnIds.has(f.id));
28
+ }
29
+ /**
30
+ * Checks if the current filters match a preset's filters.
31
+ * Both must have the same column IDs with equal values.
32
+ */
33
+ function filtersMatchPreset(current, preset) {
34
+ // If lengths differ, they don't match
35
+ if (current.length !== preset.length)
36
+ return false;
37
+ // For empty presets, current must also be empty
38
+ if (preset.length === 0)
39
+ return current.length === 0;
40
+ // Check that every preset filter exists in current with the same value
41
+ for (const presetFilter of preset) {
42
+ const currentFilter = current.find((f) => f.id === presetFilter.id);
43
+ if (!currentFilter || !filtersEqual(currentFilter.value, presetFilter.value)) {
44
+ return false;
45
+ }
46
+ }
47
+ return true;
48
+ }
49
+ /**
50
+ * A dropdown component that allows users to select from preset filter configurations.
51
+ * The selected state is derived from the table's current column filters.
52
+ * If no preset matches, a "Custom" option is shown as selected.
53
+ *
54
+ * Currently, this component expects that the filters states are arrays.
55
+ */
56
+ export function PresetFilterDropdown({ table, options, label = 'Filter', onSelect, }) {
57
+ const relevantColumnIds = getRelevantColumnIds(options);
58
+ const currentRelevantFilters = useMemo(() => getRelevantFilters(table, relevantColumnIds), [table, relevantColumnIds]);
59
+ // Find which option matches the current filters
60
+ const selectedOption = useMemo(() => {
61
+ for (const [optionName, presetFilters] of Object.entries(options)) {
62
+ if (filtersMatchPreset(currentRelevantFilters, presetFilters)) {
63
+ return optionName;
64
+ }
65
+ }
66
+ return null; // No preset matches - custom filter state
67
+ }, [options, currentRelevantFilters]);
68
+ const handleOptionClick = (optionName) => {
69
+ const presetFilters = options[optionName];
70
+ // Get current filters, removing any that are in our relevant columns
71
+ const currentFilters = table.getState().columnFilters;
72
+ const preservedFilters = currentFilters.filter((f) => !relevantColumnIds.has(f.id));
73
+ // For columns not in the preset, explicitly set empty filter to clear them
74
+ // This ensures the table's onColumnFiltersChange handler can sync the cleared state
75
+ const clearedFilters = Array.from(relevantColumnIds)
76
+ .filter((colId) => !presetFilters.some((f) => f.id === colId))
77
+ .map((colId) => ({
78
+ id: colId,
79
+ // TODO: This expects that we are only clearing filters whose state is an array.
80
+ value: [],
81
+ }));
82
+ // Combine preserved filters with the new preset filters and cleared filters
83
+ const newFilters = [...preservedFilters, ...presetFilters, ...clearedFilters];
84
+ table.setColumnFilters(newFilters);
85
+ onSelect?.(optionName);
86
+ };
87
+ const displayLabel = selectedOption ?? 'Custom';
88
+ return (_jsxs(Dropdown, { as: ButtonGroup, children: [_jsxs(Dropdown.Toggle, { variant: "tanstack-table", children: [_jsx("i", { class: "bi bi-funnel me-2", "aria-hidden": "true" }), label, ": ", displayLabel] }), _jsxs(Dropdown.Menu, { children: [Object.keys(options).map((optionName) => {
89
+ const isSelected = selectedOption === optionName;
90
+ return (_jsxs(Dropdown.Item, { as: "button", type: "button", active: isSelected, onClick: () => handleOptionClick(optionName), children: [_jsx("i", { class: `bi ${isSelected ? 'bi-check-circle-fill' : 'bi-circle'} me-2` }), optionName] }, optionName));
91
+ }), selectedOption === null && (_jsxs(Dropdown.Item, { as: "button", type: "button", active: true, disabled: true, children: [_jsx("i", { class: "bi bi-check-circle-fill me-2" }), "Custom"] }))] })] }));
92
+ }
93
+ //# sourceMappingURL=PresetFilterDropdown.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"PresetFilterDropdown.js","sourceRoot":"","sources":["../../src/components/PresetFilterDropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { ColumnFiltersState, Table } from '@tanstack/react-table';\nimport { useMemo } from 'preact/compat';\nimport { ButtonGroup, Dropdown } from 'react-bootstrap';\n\n/**\n * Compares two filter values for deep equality using JSON serialization.\n */\nfunction filtersEqual(a: unknown, b: unknown): boolean {\n return JSON.stringify(a) === JSON.stringify(b);\n}\n\n/**\n * Extracts all unique column IDs referenced across all preset options.\n */\nfunction getRelevantColumnIds(options: Record<string, ColumnFiltersState>): Set<string> {\n const columnIds = new Set<string>();\n for (const filters of Object.values(options)) {\n for (const filter of filters) {\n columnIds.add(filter.id);\n }\n }\n return columnIds;\n}\n\n/**\n * Gets the current filter values for the relevant columns from the table.\n */\nfunction getRelevantFilters<TData>(\n table: Table<TData>,\n relevantColumnIds: Set<string>,\n): ColumnFiltersState {\n const allFilters = table.getState().columnFilters;\n return allFilters.filter((f) => relevantColumnIds.has(f.id));\n}\n\n/**\n * Checks if the current filters match a preset's filters.\n * Both must have the same column IDs with equal values.\n */\nfunction filtersMatchPreset(current: ColumnFiltersState, preset: ColumnFiltersState): boolean {\n // If lengths differ, they don't match\n if (current.length !== preset.length) return false;\n\n // For empty presets, current must also be empty\n if (preset.length === 0) return current.length === 0;\n\n // Check that every preset filter exists in current with the same value\n for (const presetFilter of preset) {\n const currentFilter = current.find((f) => f.id === presetFilter.id);\n if (!currentFilter || !filtersEqual(currentFilter.value, presetFilter.value)) {\n return false;\n }\n }\n\n return true;\n}\n\n/**\n * A dropdown component that allows users to select from preset filter configurations.\n * The selected state is derived from the table's current column filters.\n * If no preset matches, a \"Custom\" option is shown as selected.\n *\n * Currently, this component expects that the filters states are arrays.\n */\nexport function PresetFilterDropdown<OptionName extends string, TData>({\n table,\n options,\n label = 'Filter',\n onSelect,\n}: {\n /** The TanStack Table instance */\n table: Table<TData>;\n /** Mapping of option names to their filter configurations */\n options: Record<OptionName, ColumnFiltersState>;\n /** Label prefix for the dropdown button (e.g., \"Filter\") */\n label?: string;\n /** Callback when an option is selected, useful for side effects like column visibility */\n onSelect?: (optionName: OptionName) => void;\n}) {\n const relevantColumnIds = getRelevantColumnIds(options);\n\n const currentRelevantFilters = useMemo(\n () => getRelevantFilters(table, relevantColumnIds),\n [table, relevantColumnIds],\n );\n\n // Find which option matches the current filters\n const selectedOption = useMemo<OptionName | null>(() => {\n for (const [optionName, presetFilters] of Object.entries(options)) {\n if (filtersMatchPreset(currentRelevantFilters, presetFilters as ColumnFiltersState)) {\n return optionName as OptionName;\n }\n }\n return null; // No preset matches - custom filter state\n }, [options, currentRelevantFilters]);\n\n const handleOptionClick = (optionName: OptionName) => {\n const presetFilters = options[optionName];\n\n // Get current filters, removing any that are in our relevant columns\n const currentFilters = table.getState().columnFilters;\n const preservedFilters = currentFilters.filter((f) => !relevantColumnIds.has(f.id));\n\n // For columns not in the preset, explicitly set empty filter to clear them\n // This ensures the table's onColumnFiltersChange handler can sync the cleared state\n const clearedFilters = Array.from(relevantColumnIds)\n .filter((colId) => !presetFilters.some((f) => f.id === colId))\n .map((colId) => ({\n id: colId,\n // TODO: This expects that we are only clearing filters whose state is an array.\n value: [],\n }));\n\n // Combine preserved filters with the new preset filters and cleared filters\n const newFilters = [...preservedFilters, ...presetFilters, ...clearedFilters];\n table.setColumnFilters(newFilters);\n\n onSelect?.(optionName);\n };\n\n const displayLabel = selectedOption ?? 'Custom';\n\n return (\n <Dropdown as={ButtonGroup}>\n <Dropdown.Toggle variant=\"tanstack-table\">\n <i class=\"bi bi-funnel me-2\" aria-hidden=\"true\" />\n {label}: {displayLabel}\n </Dropdown.Toggle>\n <Dropdown.Menu>\n {Object.keys(options).map((optionName) => {\n const isSelected = selectedOption === optionName;\n return (\n <Dropdown.Item\n key={optionName}\n as=\"button\"\n type=\"button\"\n active={isSelected}\n onClick={() => handleOptionClick(optionName as OptionName)}\n >\n <i class={`bi ${isSelected ? 'bi-check-circle-fill' : 'bi-circle'} me-2`} />\n {optionName}\n </Dropdown.Item>\n );\n })}\n {/* Show Custom option only when no preset matches */}\n {selectedOption === null && (\n <Dropdown.Item as=\"button\" type=\"button\" active disabled>\n <i class=\"bi bi-check-circle-fill me-2\" />\n Custom\n </Dropdown.Item>\n )}\n </Dropdown.Menu>\n </Dropdown>\n );\n}\n"]}
@@ -1,6 +1,7 @@
1
1
  import type { Header, Table } from '@tanstack/table-core';
2
2
  import type { ComponentChildren } from 'preact';
3
3
  import type { JSX } from 'preact/jsx-runtime';
4
+ import type { ComponentProps } from '@prairielearn/preact-cjs';
4
5
  import { type TanstackTableDownloadButtonProps } from './TanstackTableDownloadButton.js';
5
6
  interface TanstackTableProps<RowDataModel> {
6
7
  table: Table<RowDataModel>;
@@ -11,6 +12,7 @@ interface TanstackTableProps<RowDataModel> {
11
12
  rowHeight?: number;
12
13
  noResultsState?: JSX.Element;
13
14
  emptyState?: JSX.Element;
15
+ scrollRef?: React.RefObject<HTMLDivElement> | null;
14
16
  }
15
17
  /**
16
18
  * A generic component that renders a full-width, resizeable Tanstack Table.
@@ -21,15 +23,21 @@ interface TanstackTableProps<RowDataModel> {
21
23
  * @param params.rowHeight - The height of the rows in the table
22
24
  * @param params.noResultsState - The no results state for the table
23
25
  * @param params.emptyState - The empty state for the table
26
+ * @param params.scrollRef - Optional ref that will be attached to the scroll container element.
24
27
  */
25
- export declare function TanstackTable<RowDataModel>({ table, title, filters, rowHeight, noResultsState, emptyState, }: TanstackTableProps<RowDataModel>): JSX.Element;
28
+ export declare function TanstackTable<RowDataModel>({ table, title, filters, rowHeight, noResultsState, emptyState, scrollRef, }: TanstackTableProps<RowDataModel>): JSX.Element;
26
29
  /**
27
30
  * A generic component that wraps the TanstackTable component in a card.
28
31
  * @param params
29
32
  * @param params.table - The table model
30
33
  * @param params.title - The title of the card
34
+ * @param params.className - The class name to apply to the card
35
+ * @param params.style - The style to apply to the card
36
+ * @param params.singularLabel - The singular label for a single row in the table, e.g. "student"
37
+ * @param params.pluralLabel - The plural label for multiple rows in the table, e.g. "students"
31
38
  * @param params.headerButtons - The buttons to display in the header
32
39
  * @param params.columnManagerButtons - The buttons to display next to the column manager (View button)
40
+ * @param params.columnManagerTopContent - Optional content to display at the top of the column manager (View) dropdown menu
33
41
  * @param params.globalFilter - State management for the global filter
34
42
  * @param params.globalFilter.value
35
43
  * @param params.globalFilter.setValue
@@ -37,19 +45,22 @@ export declare function TanstackTable<RowDataModel>({ table, title, filters, row
37
45
  * @param params.tableOptions - Specific options for the table. See {@link TanstackTableProps} for more details.
38
46
  * @param params.downloadButtonOptions - Specific options for the download button. See {@link TanstackTableDownloadButtonProps} for more details.
39
47
  */
40
- export declare function TanstackTableCard<RowDataModel>({ table, title, headerButtons, columnManagerButtons, globalFilter, tableOptions, downloadButtonOptions, }: {
48
+ export declare function TanstackTableCard<RowDataModel>({ table, title, singularLabel, pluralLabel, headerButtons, columnManagerButtons, columnManagerTopContent, globalFilter, tableOptions, downloadButtonOptions, className, ...divProps }: {
41
49
  table: Table<RowDataModel>;
42
50
  title: string;
51
+ singularLabel: string;
52
+ pluralLabel: string;
43
53
  headerButtons: JSX.Element;
44
54
  columnManagerButtons?: JSX.Element;
55
+ columnManagerTopContent?: JSX.Element;
45
56
  globalFilter: {
46
57
  value: string;
47
58
  setValue: (value: string) => void;
48
59
  placeholder: string;
49
60
  };
50
61
  tableOptions: Partial<Omit<TanstackTableProps<RowDataModel>, 'table'>>;
51
- downloadButtonOptions?: Omit<TanstackTableDownloadButtonProps<RowDataModel>, 'table'> | null;
52
- }): JSX.Element;
62
+ downloadButtonOptions?: Omit<TanstackTableDownloadButtonProps<RowDataModel>, 'table' | 'singularLabel' | 'pluralLabel'>;
63
+ } & Omit<ComponentProps<'div'>, 'class'>): JSX.Element;
53
64
  export declare function TanstackTableEmptyState({ iconName, children, }: {
54
65
  iconName: `bi-${string}`;
55
66
  children: ComponentChildren;
@@ -1 +1 @@
1
- {"version":3,"file":"TanstackTable.d.ts","sourceRoot":"","sources":["../../src/components/TanstackTable.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,EAAsB,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAE9E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAEhD,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AAK9C,OAAO,EAEL,KAAK,gCAAgC,EACtC,MAAM,kCAAkC,CAAC;AA0F1C,UAAU,kBAAkB,CAAC,YAAY;IACvC,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,CAAC,KAAK,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC,YAAY,EAAE,OAAO,CAAC,CAAA;KAAE,KAAK,GAAG,CAAC,OAAO,CAAC,CAAC;IAC5F,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC7B,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CAC1B;AAID;;;;;;;;;GASG;AACH,wBAAgB,aAAa,CAAC,YAAY,EAAE,EAC1C,KAAK,EACL,KAAK,EACL,OAA4B,EAC5B,SAAc,EACd,cAAsC,EACtC,UAA8B,GAC/B,EAAE,kBAAkB,CAAC,YAAY,CAAC,eAuYlC;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,iBAAiB,CAAC,YAAY,EAAE,EAC9C,KAAK,EACL,KAAK,EACL,aAAa,EACb,oBAAoB,EACpB,YAAY,EACZ,YAAY,EACZ,qBAA4B,GAC7B,EAAE;IACD,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,GAAG,CAAC,OAAO,CAAC;IAC3B,oBAAoB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACnC,YAAY,EAAE;QACZ,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;QAClC,WAAW,EAAE,MAAM,CAAC;KACrB,CAAC;IACF,YAAY,EAAE,OAAO,CAAC,IAAI,CAAC,kBAAkB,CAAC,YAAY,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC;IACvE,qBAAqB,CAAC,EAAE,IAAI,CAAC,gCAAgC,CAAC,YAAY,CAAC,EAAE,OAAO,CAAC,GAAG,IAAI,CAAC;CAC9F,eAmFA;AAED,wBAAgB,uBAAuB,CAAC,EACtC,QAAQ,EACR,QAAQ,GACT,EAAE;IACD,QAAQ,EAAE,MAAM,MAAM,EAAE,CAAC;IACzB,QAAQ,EAAE,iBAAiB,CAAC;CAC7B,eAOA"}
1
+ {"version":3,"file":"TanstackTable.d.ts","sourceRoot":"","sources":["../../src/components/TanstackTable.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAQ,MAAM,EAAO,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAErE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAEhD,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AAI9C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAI/D,OAAO,EAEL,KAAK,gCAAgC,EACtC,MAAM,kCAAkC,CAAC;AAoE1C,UAAU,kBAAkB,CAAC,YAAY;IACvC,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,CAAC,KAAK,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC,YAAY,EAAE,OAAO,CAAC,CAAA;KAAE,KAAK,GAAG,CAAC,OAAO,CAAC,CAAC;IAC5F,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC7B,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,GAAG,IAAI,CAAC;CACpD;AAID;;;;;;;;;;GAUG;AACH,wBAAgB,aAAa,CAAC,YAAY,EAAE,EAC1C,KAAK,EACL,KAAK,EACL,OAA4B,EAC5B,SAAc,EACd,cAAsC,EACtC,UAA8B,EAC9B,SAAS,GACV,EAAE,kBAAkB,CAAC,YAAY,CAAC,eA0VlC;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,iBAAiB,CAAC,YAAY,EAAE,EAC9C,KAAK,EACL,KAAK,EACL,aAAa,EACb,WAAW,EACX,aAAa,EACb,oBAAoB,EACpB,uBAAuB,EACvB,YAAY,EACZ,YAAY,EACZ,qBAAqB,EACrB,SAAS,EACT,GAAG,QAAQ,EACZ,EAAE;IACD,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,MAAM,CAAC;IACtB,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,GAAG,CAAC,OAAO,CAAC;IAC3B,oBAAoB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACnC,uBAAuB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACtC,YAAY,EAAE;QACZ,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;QAClC,WAAW,EAAE,MAAM,CAAC;KACrB,CAAC;IACF,YAAY,EAAE,OAAO,CAAC,IAAI,CAAC,kBAAkB,CAAC,YAAY,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC;IACvE,qBAAqB,CAAC,EAAE,IAAI,CAC1B,gCAAgC,CAAC,YAAY,CAAC,EAC9C,OAAO,GAAG,eAAe,GAAG,aAAa,CAC1C,CAAC;CACH,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,eAgFvC;AAED,wBAAgB,uBAAuB,CAAC,EACtC,QAAQ,EACR,QAAQ,GACT,EAAE;IACD,QAAQ,EAAE,MAAM,MAAM,EAAE,CAAC;IACzB,QAAQ,EAAE,iBAAiB,CAAC;CAC7B,eAOA"}