@sap-ux/ui-components 1.0.0

package/dist/components/UISection/index.js

@@ -0,0 +1,16 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./UISections"), exports);
+__exportStar(require("./UISection"), exports);
+__exportStar(require("./UISplitter"), exports);
+//# sourceMappingURL=index.js.map

package/dist/components/UISection/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/UISection/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,+CAA6B;AAC7B,8CAA4B;AAC5B,+CAA6B"}

package/dist/components/UITable/UITable-helper.d.ts

@@ -0,0 +1,85 @@
+import React from 'react';
+import type { IDetailsHeaderProps, IRenderFunction, IDetailsListStyles, IDetailsList } from '@fluentui/react';
+import type { ComboBoxRef } from '../UIComboBox';
+import type { UIColumn, EditedCell, UITableProps, UITableState } from '.';
+/**
+ * Method to copy and sort.
+ *
+ * @param {T[]} items
+ * @param {string }columnKey
+ * @param {boolean} isSortedDescending
+ *
+ * @returns {T[]}
+ */
+export declare function _copyAndSort<T>(items: T[], columnKey: string, isSortedDescending?: boolean): T[];
+/**
+ * Focus edited cell.
+ *
+ * @param {EditedCell | undefined} editedCell
+ * @param {UITableProps} props
+ * @param {string} direction
+ *
+ * @returns {Promise<void>}
+ */
+export declare function focusEditedCell(editedCell: EditedCell | undefined, props: UITableProps, direction?: string): Promise<void>;
+/**
+ * Get cell from coordinates.
+ *
+ * @param {number} rowIdx
+ * @param {string} columnKey
+ * @param {UIColumn} columns
+ * @param {boolean} addOneToColIndex
+ *
+ * @returns {NodeListOf<Element>}
+ */
+export declare function getCellFromCoords(rowIdx: number, columnKey: string, columns: UIColumn[], addOneToColIndex?: boolean): 0 | Element | undefined;
+/**
+ * Scrolls to column.
+ *
+ * @param {string} columnKey
+ * @param {UIColumn[]} columns
+ * @param {number} selectedRow
+ * @param {boolean} addOneToColIndex
+ */
+export declare function scrollToColumn(columnKey: string, columns: UIColumn[], selectedRow: number, addOneToColIndex?: boolean): void;
+/**
+ * Scrolls to row.
+ *
+ * @param {number} idx
+ * @param {IDetailsList | null} table
+ */
+export declare function scrollToRow(idx: number | undefined, table: IDetailsList | null): void;
+/**
+ * Wait for selector.
+ *
+ * @param {string} selector
+ * @returns {Promise<Element>}
+ */
+export declare function waitFor(selector: string): Promise<unknown>;
+/**
+ * Adds row numbers.
+ *
+ * @param {any} columns
+ * @param {boolean} showRowNumbers
+ *
+ * @returns {any}
+ */
+export declare function addRowNumbers(columns: any, showRowNumbers?: boolean): any;
+export declare const _onHeaderRender: IRenderFunction<IDetailsHeaderProps>;
+/**
+ * Gets styles for selected cell.
+ *
+ * @param state
+ * @returns {Partial<IDetailsListStyles>}
+ */
+export declare function getStylesForSelectedCell(state: UITableState): Partial<IDetailsListStyles>;
+export declare function showFocus(): void;
+export declare function hideFocus(): void;
+/**
+ * Gets ComboBox input.
+ *
+ * @param ref
+ * @returns {HTMLInputElement | undefined }
+ */
+export declare function getComboBoxInput(ref?: React.RefObject<ComboBoxRef>): HTMLInputElement | undefined;
+//# sourceMappingURL=UITable-helper.d.ts.map

package/dist/components/UITable/UITable-helper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UITable-helper.d.ts","sourceRoot":"","sources":["../../../src/components/UITable/UITable-helper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,mBAAmB,EAAE,eAAe,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAG9G,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,GAAG,CAAC;AAE1E;;;;;;;;GAQG;AACH,wBAAgB,YAAY,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,kBAAkB,CAAC,EAAE,OAAO,GAAG,CAAC,EAAE,CAGhG;AAED;;;;;;;;GAQG;AACH,wBAAgB,eAAe,CAC3B,UAAU,EAAE,UAAU,GAAG,SAAS,EAClC,KAAK,EAAE,YAAY,EACnB,SAAS,SAAK,GACf,OAAO,CAAC,IAAI,CAAC,CA4Cf;AAED;;;;;;;;;GASG;AACH,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,gBAAgB,UAAQ,2BAOjH;AAGD;;;;;;;GAOG;AACH,wBAAgB,cAAc,CAC1B,SAAS,EAAE,MAAM,EACjB,OAAO,EAAE,QAAQ,EAAE,EACnB,WAAW,EAAE,MAAM,EACnB,gBAAgB,UAAQ,GACzB,IAAI,CAWN;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,GAAG,oBAAI,EAAE,KAAK,EAAE,YAAY,GAAG,IAAI,QAgB9D;AAED;;;;;GAKG;AACH,wBAAsB,OAAO,CAAC,QAAQ,EAAE,MAAM,oBAa7C;AAED;;;;;;;GAOG;AACH,wBAAgB,aAAa,CAAC,OAAO,EAAE,GAAG,EAAE,cAAc,UAAQ,GAAG,GAAG,CAYvE;AAGD,eAAO,MAAM,eAAe,EAAE,eAAe,CAAC,mBAAmB,CAoChE,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,wBAAwB,CAAC,KAAK,EAAE,YAAY,GAAG,OAAO,CAAC,kBAAkB,CAAC,CA2BzF;AAED,wBAAgB,SAAS,SAGxB;AAED,wBAAgB,SAAS,SAGxB;AAED;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,GAAG,gBAAgB,GAAG,SAAS,CAIjG"}

package/dist/components/UITable/UITable-helper.js

@@ -0,0 +1,267 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getComboBoxInput = exports.hideFocus = exports.showFocus = exports.getStylesForSelectedCell = exports._onHeaderRender = exports.addRowNumbers = exports.waitFor = exports.scrollToRow = exports.scrollToColumn = exports.getCellFromCoords = exports.focusEditedCell = exports._copyAndSort = void 0;
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@fluentui/react");
+const __1 = require("..");
+/**
+ * Method to copy and sort.
+ *
+ * @param {T[]} items
+ * @param {string }columnKey
+ * @param {boolean} isSortedDescending
+ *
+ * @returns {T[]}
+ */
+function _copyAndSort(items, columnKey, isSortedDescending) {
+    const key = columnKey;
+    return items.slice(0).sort((a, b) => ((isSortedDescending ? a[key] > b[key] : a[key] < b[key]) ? 1 : -1));
+}
+exports._copyAndSort = _copyAndSort;
+/**
+ * Focus edited cell.
+ *
+ * @param {EditedCell | undefined} editedCell
+ * @param {UITableProps} props
+ * @param {string} direction
+ *
+ * @returns {Promise<void>}
+ */
+function focusEditedCell(editedCell, props, direction = '') {
+    const rowIndex = editedCell?.rowIndex || 0;
+    const colKey = editedCell?.column?.key || '';
+    let newRowIndex = rowIndex;
+    let newColKey = colKey;
+    if (!colKey) {
+        return Promise.resolve();
+    }
+    // go up/down/left/right
+    if (direction) {
+        const editableColumnKeys = props.columns.filter((c) => c.editable).map((c) => c.key);
+        const rowsLen = props.items.length;
+        const colIdx = editableColumnKeys.indexOf(colKey);
+        if (direction === 'right') {
+            if (colIdx < editableColumnKeys.length - 1) {
+                newColKey = editableColumnKeys[colIdx + 1];
+            }
+        }
+        else if (direction === 'left') {
+            if (colIdx > 0) {
+                newColKey = editableColumnKeys[colIdx - 1];
+            }
+        }
+        else if (direction === 'down') {
+            if (rowIndex < rowsLen - 1) {
+                newRowIndex = rowIndex + 1;
+            }
+        }
+        else if (direction === 'up') {
+            if (rowIndex > 0) {
+                newRowIndex = rowIndex - 1;
+            }
+        }
+    }
+    return new Promise((resolve) => {
+        requestAnimationFrame(() => {
+            const cell = getCellFromCoords(newRowIndex, newColKey, props.columns, props.showRowNumbers);
+            if (cell && direction) {
+                cell.click();
+            }
+            cell?.focus();
+            requestAnimationFrame(() => resolve());
+        });
+    });
+}
+exports.focusEditedCell = focusEditedCell;
+/**
+ * Get cell from coordinates.
+ *
+ * @param {number} rowIdx
+ * @param {string} columnKey
+ * @param {UIColumn} columns
+ * @param {boolean} addOneToColIndex
+ *
+ * @returns {NodeListOf<Element>}
+ */
+function getCellFromCoords(rowIdx, columnKey, columns, addOneToColIndex = false) {
+    const selectedIdx = (columns.findIndex((col) => col.key === columnKey) || 0) + +addOneToColIndex;
+    const row = document.querySelector(`.ms-DetailsList .ms-DetailsList-contentWrapper .ms-List-page .ms-DetailsRow[data-item-index="${rowIdx || 0}"]`);
+    const cols = row?.querySelectorAll('.ms-DetailsRow-cell');
+    return cols && cols.length && cols[selectedIdx];
+}
+exports.getCellFromCoords = getCellFromCoords;
+// manual workaround due to the lack of API for selecting columns
+/**
+ * Scrolls to column.
+ *
+ * @param {string} columnKey
+ * @param {UIColumn[]} columns
+ * @param {number} selectedRow
+ * @param {boolean} addOneToColIndex
+ */
+function scrollToColumn(columnKey, columns, selectedRow, addOneToColIndex = false) {
+    const sidebar = document.querySelector('.data-editor__sidebar');
+    const sidebarWidth = (sidebar?.getBoundingClientRect().width || 0) + (addOneToColIndex ? 20 : 0);
+    const scrollContainer = document.querySelector('.ms-ScrollablePane--contentContainer');
+    const cell = getCellFromCoords(selectedRow, columnKey, columns, addOneToColIndex);
+    const box = cell && cell.getBoundingClientRect();
+    if (scrollContainer && box) {
+        const left = scrollContainer.scrollLeft + Math.ceil(box.x) - sidebarWidth;
+        requestAnimationFrame(() => scrollContainer.scrollTo({ left, behavior: 'smooth' }));
+    }
+}
+exports.scrollToColumn = scrollToColumn;
+/**
+ * Scrolls to row.
+ *
+ * @param {number} idx
+ * @param {IDetailsList | null} table
+ */
+function scrollToRow(idx = 0, table) {
+    if (!table) {
+        return;
+    }
+    table.focusIndex(idx, false);
+    const slctr = `.ms-DetailsList-contentWrapper .ms-DetailsRow[data-selection-index="${idx}"]`;
+    waitFor(slctr)
+        .then((rowEl) => {
+        rowEl.setAttribute('tabIndex', '0');
+        rowEl.click();
+        rowEl.focus();
+        showFocus();
+    })
+        .catch((e) => {
+        throw e;
+    });
+}
+exports.scrollToRow = scrollToRow;
+/**
+ * Wait for selector.
+ *
+ * @param {string} selector
+ * @returns {Promise<Element>}
+ */
+async function waitFor(selector) {
+    const el = document.querySelector(selector);
+    return new Promise((resolve) => {
+        if (el) {
+            return resolve(el);
+        }
+        setTimeout(async () => {
+            const el2 = await waitFor(selector);
+            if (el2) {
+                return resolve(el2);
+            }
+        }, 100);
+    });
+}
+exports.waitFor = waitFor;
+/**
+ * Adds row numbers.
+ *
+ * @param {any} columns
+ * @param {boolean} showRowNumbers
+ *
+ * @returns {any}
+ */
+function addRowNumbers(columns, showRowNumbers = false) {
+    if (showRowNumbers && columns[0].key !== '__row_number__') {
+        columns.unshift({
+            key: '__row_number__',
+            name: '#',
+            fieldName: '__row_number__',
+            minWidth: 24,
+            maxWidth: 24,
+            isResizable: false
+        });
+    }
+    return columns;
+}
+exports.addRowNumbers = addRowNumbers;
+// eslint-disable-next-line @typescript-eslint/naming-convention
+const _onHeaderRender = (props, defaultRender) => {
+    if (!props || !defaultRender) {
+        return null;
+    }
+    const customProps = {
+        ...props,
+        // eslint-disable-next-line react/display-name
+        onRenderColumnHeaderTooltip: (item, tooltipDefaultRender) => {
+            if (item?.column) {
+                const column = item.column;
+                const editable = (column.editable ? '' : 'not-') + 'editable-container';
+                const containerDiv = column.key !== '__row_number__' ? react_1.default.createElement("div", { className: editable }) : null;
+                return (react_1.default.createElement("div", { className: "data-editor__header-cell" },
+                    column.iconName && (react_1.default.createElement(__1.UIIcon, { className: "type-icon", iconName: column.iconName, title: column.iconTooltip || '' })),
+                    react_1.default.createElement("span", { title: column?.headerTooltip || column.name }, column.name),
+                    containerDiv));
+            }
+            const isCheckTooltip = item?.hostClassName === 'ms-DetailsHeader-checkTooltip';
+            // eslint-disable-next-line react/prop-types
+            if (props.selection && isCheckTooltip && tooltipDefaultRender) {
+                return tooltipDefaultRender(item);
+            }
+            return null;
+        }
+    };
+    return react_1.default.createElement(react_2.Sticky, null, defaultRender(customProps));
+};
+exports._onHeaderRender = _onHeaderRender;
+/**
+ * Gets styles for selected cell.
+ *
+ * @param state
+ * @returns {Partial<IDetailsListStyles>}
+ */
+function getStylesForSelectedCell(state) {
+    let styles = {};
+    const editedRow = state.editedCell ? state.editedCell.rowIndex : undefined;
+    const editedColumn = state.editedCell ? state.editedCell.column : undefined;
+    if (editedRow !== undefined && editedColumn !== undefined) {
+        styles = {
+            root: {
+                ['div.ms-List-cell']: {
+                    position: 'relative',
+                    zIndex: 0
+                },
+                [`div.ms-List-cell[data-list-index="${editedRow}"]`]: {
+                    zIndex: 1
+                },
+                [`.ms-DetailsRow-cell`]: {
+                    overflow: 'hidden'
+                },
+                [`div.ms-List-cell[data-list-index="${editedRow}"] .ms-DetailsRow-cell[data-automation-key="${editedColumn.key}"]`]: {
+                    overflow: 'visible'
+                }
+            }
+        };
+    }
+    return styles;
+}
+exports.getStylesForSelectedCell = getStylesForSelectedCell;
+function showFocus() {
+    document.body.classList.remove('ms-Fabric--isFocusHidden');
+    document.body.classList.add('ms-Fabric--isFocusVisible');
+}
+exports.showFocus = showFocus;
+function hideFocus() {
+    document.body.classList.add('ms-Fabric--isFocusHidden');
+    document.body.classList.remove('ms-Fabric--isFocusVisible');
+}
+exports.hideFocus = hideFocus;
+/**
+ * Gets ComboBox input.
+ *
+ * @param ref
+ * @returns {HTMLInputElement | undefined }
+ */
+function getComboBoxInput(ref) {
+    const anyCombo = ref?.current;
+    const anyComboDiv = anyCombo?.root.current;
+    return anyComboDiv?.querySelector('input');
+}
+exports.getComboBoxInput = getComboBoxInput;
+//# sourceMappingURL=UITable-helper.js.map

package/dist/components/UITable/UITable-helper.js.map

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

package/dist/components/UITable/UITable.d.ts

@@ -0,0 +1,212 @@
+import React from 'react';
+import type { UITableProps, UITableState } from './types';
+import './UITable.scss';
+/**
+ * UITable component
+ * based on: https://developer.microsoft.com/en-us/fluentui#/controls/web/detailslist
+ *
+ * @exports
+ * @class {UITable}
+ * @extends {React.Component<UITableProps, UITableState>}
+ */
+export declare class UITable extends React.Component<UITableProps, UITableState> {
+    private tableRef;
+    private inputRefs?;
+    private selection;
+    private onDocMousedown;
+    private activeElement;
+    /**
+     * Initializes component properties.
+     *
+     * @param props
+     */
+    constructor(props: UITableProps);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    /**
+     * On component update.
+     *
+     * @param prevProps
+     * @param prevState
+     */
+    componentDidUpdate(prevProps: UITableProps, prevState: UITableState): void;
+    private _setTextRefs;
+    /**
+     * On render row fields event.
+     *
+     * @param props
+     * @returns {JSX.Element}
+     */
+    private renderRowFields;
+    /**
+     * On render field event.
+     *
+     * @param props
+     * @param defaultRender
+     *
+     * @returns {null | JSX.Element}
+     */
+    private _onRenderField;
+    /**
+     * On cell activation event.
+     *
+     * @param item
+     * @param rowIndex
+     * @param ev
+     */
+    private _onCellActivation;
+    private _onRenderRow;
+    /**
+     * On render item  column event.
+     *
+     * @param {UIDocument} item
+     * @param {number} index
+     * @param {UIColumn} column
+     *
+     * @returns {React.ReactNode}
+     */
+    private _onRenderItemColumn;
+    /**
+     * On render checkbox event.
+     *
+     * @param {IDetailsListCheckboxProps | undefined} props
+     * @returns {React.ReactElement}
+     */
+    private _onRenderCheckbox;
+    /**
+     * On column click event.
+     *
+     * @param ev
+     * @param column
+     */
+    private _onColumnClick;
+    /**
+     * On start edit event call.
+     *
+     * @param rowIndex
+     * @param item
+     * @param column
+     * @param errorMessage
+     */
+    private startEdit;
+    private rerenderTable;
+    private cancelEdit;
+    /**
+     * On save cell event.
+     *
+     * @param cancelEdit
+     * @param value
+     */
+    private saveCell;
+    /**
+     * On mouse down event.
+     *
+     * @param e
+     */
+    private onDocumentMousedown;
+    /**
+     * On key down event.
+     *
+     * @param {React.KeyboardEvent<Element | IDropdown>} e
+     * @returns {void}
+     */
+    private onKeyDown;
+    /**
+     * On ComboBox keydown event call.
+     *
+     * @param e
+     */
+    private onComboBoxKeyDownCapture;
+    /**
+     * On Edit next cell.
+     *
+     * @param key
+     * @param shiftKey
+     */
+    private editNextCell;
+    /**
+     * On Cell click.
+     *
+     * @param e
+     * @param item
+     * @param rowIndex
+     * @param column
+     */
+    private _onCellClick;
+    /**
+     * Validates cell.
+     * @param value
+     */
+    private validateCell;
+    /**
+     * On Text input change.
+     *
+     * @param e
+     * @param newValue
+     */
+    private onTextInputChange;
+    private onComboBoxChange;
+    private readonly onDropdownCellValueChange;
+    /**
+     * Gets input ref.
+     *
+     * @param rowIndex
+     * @param column
+     * @returns { React.RefObject<ITextField | IDropdown | UIComboBox> | undefined}
+     */
+    private _getInputRef;
+    /**
+     * Renders dropdown.
+     *
+     * @param item
+     * @param rowIndex
+     * @param column
+     * @returns {any}
+     */
+    private _renderDropdown;
+    /**
+     * Renders boolean select.
+     *
+     * @param item
+     * @param rowIndex
+     * @param column
+     *
+     * @returns {any}
+     */
+    private _renderBooleanSelect;
+    /**
+     * Renders date picker.
+     *
+     * @param item
+     * @param rowIndex
+     * @param column
+     * @param dateOnly
+     *
+     * @returns {any}
+     */
+    private _renderDatePicker;
+    /**
+     * Renders text input.
+     *
+     * @param item
+     * @param rowIndex
+     * @param column
+     *
+     * @returns {any}
+     */
+    private _renderTextInput;
+    /**
+     * On cell render.
+     *
+     * @param item
+     * @param rowIndex
+     * @param column
+     * @returns {any}
+     */
+    private _onCellRender;
+    /**
+     * @returns {JSX.Element}
+     */
+    render(): JSX.Element;
+}
+//# sourceMappingURL=UITable.d.ts.map

package/dist/components/UITable/UITable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UITable.d.ts","sourceRoot":"","sources":["../../../src/components/UITable/UITable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AA4C1B,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAoC,MAAM,SAAS,CAAC;AAE5F,OAAO,gBAAgB,CAAC;AAExB;;;;;;;GAOG;AACH,qBAAa,OAAQ,SAAQ,KAAK,CAAC,SAAS,CAAC,YAAY,EAAE,YAAY,CAAC;IACpE,OAAO,CAAC,QAAQ,CAAgC;IAChD,OAAO,CAAC,SAAS,CAAC,CAIX;IACP,OAAO,CAAC,SAAS,CAAY;IAC7B,OAAO,CAAC,cAAc,CAAM;IAC5B,OAAO,CAAC,aAAa,CAAgC;IAErD;;;;OAIG;gBACS,KAAK,EAAE,YAAY;IAsC/B,iBAAiB,IAAI,IAAI;IAQzB,oBAAoB,IAAI,IAAI;IAI5B;;;;;OAKG;IACH,kBAAkB,CAAC,SAAS,EAAE,YAAY,EAAE,SAAS,EAAE,YAAY,GAAG,IAAI;IAyD1E,OAAO,CAAC,YAAY;IAapB;;;;;OAKG;IACH,OAAO,CAAC,eAAe;IAevB;;;;;;;OAOG;IACH,OAAO,CAAC,cAAc;IAqCtB;;;;;;OAMG;IACH,OAAO,CAAC,iBAAiB;IAgCzB,OAAO,CAAC,YAAY,CAMlB;IAEF;;;;;;;;OAQG;IACH,OAAO,CAAC,mBAAmB;IAQ3B;;;;;OAKG;IACH,OAAO,CAAC,iBAAiB;IAKzB;;;;;OAKG;IACH,OAAO,CAAC,cAAc;IAmBtB;;;;;;;OAOG;IACH,OAAO,CAAC,SAAS;IA0BjB,OAAO,CAAC,aAAa;IAMrB,OAAO,CAAC,UAAU;IAKlB;;;;;OAKG;IACH,OAAO,CAAC,QAAQ;IAwChB;;;;OAIG;IACH,OAAO,CAAC,mBAAmB;IAmB3B;;;;;OAKG;IACH,OAAO,CAAC,SAAS;IA+BjB;;;;OAIG;IACH,OAAO,CAAC,wBAAwB;IAUhC;;;;;OAKG;IACH,OAAO,CAAC,YAAY;IA4BpB;;;;;;;OAOG;IACH,OAAO,CAAC,YAAY;IA0CpB;;;OAGG;IACH,OAAO,CAAC,YAAY;IAcpB;;;;;OAKG;IACH,OAAO,CAAC,iBAAiB;IAezB,OAAO,CAAC,gBAAgB,CAMtB;IAEF,OAAO,CAAC,QAAQ,CAAC,yBAAyB,CAwBxC;IAEF;;;;;;OAMG;IACH,OAAO,CAAC,YAAY;IASpB;;;;;;;OAOG;IACH,OAAO,CAAC,eAAe;IAiBvB;;;;;;;;OAQG;IACH,OAAO,CAAC,oBAAoB;IAmC5B;;;;;;;;;OASG;IACH,OAAO,CAAC,iBAAiB;IA2BzB;;;;;;;;OAQG;IACH,OAAO,CAAC,gBAAgB;IA6BxB;;;;;;;OAOG;IACH,OAAO,CAAC,aAAa;IAqCrB;;OAEG;IACH,MAAM,IAAI,GAAG,CAAC,OAAO;CAuExB"}