@thx/controls 17.3.5 → 17.3.6

package/dist/esm/inputs/SinInput/SinInput.js

@@ -0,0 +1,54 @@
+import React, { useState, useCallback, useMemo } from 'react';
+import debug from 'debug';
+import { Input, Icon } from 'semantic-ui-react';
+import SIN from 'social-insurance-number';
+import { useMaskedInput } from '../MaskedInput/useMaskedInput.js';
+
+debug("thx.controls.inputs.SinInput");
+function SinInput(props) {
+  const { value, onChange, ...rest } = props;
+  const [color, setColor] = useState("black");
+  const checkValidation = useCallback((valueArray) => {
+    const num = valueArray.join("").replaceAll(/(_|\s|-)/g, "");
+    const validate = new SIN(num);
+    if (num.length > 0) {
+      if (validate.isValid()) {
+        setColor("green");
+      } else {
+        setColor("red");
+      }
+    } else {
+      setColor("black");
+    }
+    return validate.isValid();
+  }, []);
+  const mask = useMemo(() => ({
+    mask: "999-999-999",
+    isComplete: checkValidation,
+    greedy: false,
+    autoUnmask: true
+  }), [checkValidation]);
+  const cardNumberRef = useMaskedInput({
+    mask,
+    value,
+    onChange: (v) => {
+      onChange && onChange(v);
+    },
+    onSet: (v) => {
+      checkValidation([v || ""]);
+    }
+  });
+  return /* @__PURE__ */ React.createElement(Input, {
+    ...rest,
+    icon: true
+  }, /* @__PURE__ */ React.createElement("input", {
+    ref: cardNumberRef
+  }), /* @__PURE__ */ React.createElement(Icon, {
+    name: "id badge",
+    color,
+    size: "large"
+  }));
+}
+
+export { SinInput };
+//# sourceMappingURL=SinInput.js.map

package/dist/esm/inputs/SinInput/SinInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SinInput.js","sources":["../../../../src/inputs/SinInput/SinInput.tsx"],"sourcesContent":["import debug from 'debug';\nimport {useCallback, useMemo, useState} from 'react';\nimport {Icon, Input, type SemanticCOLORS} from 'semantic-ui-react';\nimport SIN from 'social-insurance-number';\nimport type {MaskedInputProps} from '../MaskedInput';\nimport {useMaskedInput} from '../MaskedInput/useMaskedInput';\n\nconst d = debug('thx.controls.inputs.SinInput');\n\nexport interface SinInputProps extends Omit<MaskedInputProps, 'mask'> {\n\tvalue?: string;\n\tonChange(value?: string): void;\n}\n\nexport function SinInput(props: SinInputProps) {\n\tconst {value, onChange, ...rest} = props;\n\tconst [color, setColor] = useState<SemanticCOLORS>('black');\n\n\tconst checkValidation = useCallback((valueArray: string[]) => {\n\t\tconst num = valueArray.join('').replaceAll(/(_|\\s|-)/g, '');\n\t\tconst validate = new SIN(num);\n\t\tif (num.length > 0) {\n\t\t\tif (validate.isValid()) {\n\t\t\t\tsetColor('green');\n\t\t\t} else {\n\t\t\t\tsetColor('red');\n\t\t\t}\n\t\t} else {\n\t\t\tsetColor('black');\n\t\t}\n\t\treturn validate.isValid();\n\t}, []);\n\n\tconst mask: MaskedInputProps['mask'] = useMemo(\n\t\t() => ({\n\t\t\tmask: '999-999-999',\n\t\t\tisComplete: checkValidation,\n\t\t\tgreedy: false,\n\t\t\tautoUnmask: true,\n\t\t}),\n\t\t[checkValidation],\n\t);\n\n\tconst cardNumberRef = useMaskedInput({\n\t\tmask,\n\t\tvalue,\n\t\tonChange: v => {\n\t\t\tonChange && onChange(v);\n\t\t},\n\t\tonSet: v => {\n\t\t\tcheckValidation([v || '']);\n\t\t},\n\t});\n\n\treturn (\n\t\t<Input {...rest} icon>\n\t\t\t<input ref={cardNumberRef} />\n\t\t\t<Icon name=\"id badge\" color={color} size=\"large\" />\n\t\t</Input>\n\t);\n}\n"],"names":[],"mappings":";;;;;;AAOU,MAAM,8BAA8B,EAAA;AAOvC,SAAA,QAAA,CAAkB,KAAsB,EAAA;AAC9C,EAAM,MAAA,EAAC,KAAO,EAAA,QAAA,EAAA,GAAa,IAAQ,EAAA,GAAA,KAAA,CAAA;AACnC,EAAA,MAAM,CAAC,KAAA,EAAO,QAAY,CAAA,GAAA,QAAA,CAAyB,OAAO,CAAA,CAAA;AAE1D,EAAM,MAAA,eAAA,GAAkB,WAAY,CAAA,CAAC,UAAyB,KAAA;AAC7D,IAAA,MAAM,MAAM,UAAW,CAAA,IAAA,CAAK,EAAE,CAAE,CAAA,UAAA,CAAW,aAAa,EAAE,CAAA,CAAA;AAC1D,IAAM,MAAA,QAAA,GAAW,IAAI,GAAA,CAAI,GAAG,CAAA,CAAA;AAC5B,IAAI,IAAA,GAAA,CAAI,SAAS,CAAG,EAAA;AACnB,MAAI,IAAA,QAAA,CAAS,SAAW,EAAA;AACvB,QAAA,QAAA,CAAS,OAAO,CAAA,CAAA;AAAA,OACV,MAAA;AACN,QAAA,QAAA,CAAS,KAAK,CAAA,CAAA;AAAA,OACf;AAAA,KACM,MAAA;AACN,MAAA,QAAA,CAAS,OAAO,CAAA,CAAA;AAAA,KACjB;AACA,IAAA,OAAO,SAAS,OAAQ,EAAA,CAAA;AAAA,GACzB,EAAG,EAAE,CAAA,CAAA;AAEL,EAAM,MAAA,IAAA,GAAiC,QACtC,OAAO;AAAA,IACN,IAAM,EAAA,aAAA;AAAA,IACN,UAAY,EAAA,eAAA;AAAA,IACZ,MAAQ,EAAA,KAAA;AAAA,IACR,UAAY,EAAA,IAAA;AAAA,GACb,CAAA,EACA,CAAC,eAAe,CACjB,CAAA,CAAA;AAEA,EAAA,MAAM,gBAAgB,cAAe,CAAA;AAAA,IACpC,IAAA;AAAA,IACA,KAAA;AAAA,IACA,UAAU,CAAK,CAAA,KAAA;AACd,MAAA,QAAA,IAAY,SAAS,CAAC,CAAA,CAAA;AAAA,KACvB;AAAA,IACA,OAAO,CAAK,CAAA,KAAA;AACX,MAAgB,eAAA,CAAA,CAAC,CAAK,IAAA,EAAE,CAAC,CAAA,CAAA;AAAA,KAC1B;AAAA,GACA,CAAA,CAAA;AAED,EAAA,uBACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAU,GAAA,IAAA;AAAA,IAAM,IAAI,EAAA,IAAA;AAAA,GAAA,kBACnB,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA;AAAA,IAAM,GAAK,EAAA,aAAA;AAAA,GAAe,mBAC1B,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAA,IAAK,IAAK,EAAA,UAAA;AAAA,IAAW,KAAA;AAAA,IAAc,IAAK,EAAA,OAAA;AAAA,GAAQ,CAClD,CAAA,CAAA;AAEF;;;;"}

package/dist/esm/inputs/TableInput/CheckboxEditCell.js

@@ -0,0 +1,32 @@
+import React, { useState } from 'react';
+import debug from 'debug';
+import { Checkbox } from 'semantic-ui-react';
+import { addRowOnTab } from './addRowOnTab.js';
+
+debug("thx.controls.inputs.TableInput.CheckboxEditCell");
+function CheckboxEditCell(options) {
+  const { inputProps, addRowOnTabIf } = options || {};
+  return function CheckboxEditCellFn(props) {
+    const {
+      value: initialValue,
+      row: { index },
+      column: { id },
+      updateData
+    } = props;
+    const [value, setValue] = useState(initialValue);
+    return /* @__PURE__ */ React.createElement(Checkbox, {
+      ...inputProps,
+      checked: value,
+      onChange: (ev, v) => {
+        setValue(v.checked || false);
+      },
+      onBlur: () => {
+        updateData(index, id, value);
+      },
+      onKeyDown: (event) => addRowOnTab(event, value, props, addRowOnTabIf)
+    });
+  };
+}
+
+export { CheckboxEditCell };
+//# sourceMappingURL=CheckboxEditCell.js.map

package/dist/esm/inputs/TableInput/CheckboxEditCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxEditCell.js","sources":["../../../../src/inputs/TableInput/CheckboxEditCell.tsx"],"sourcesContent":["import debug from 'debug';\nimport {useState} from 'react';\nimport {Checkbox, type CheckboxProps} from 'semantic-ui-react';\nimport type {TableCellProps} from './TableInput';\nimport type {AddRowOnTabIf} from './addRowOnTab';\nimport {addRowOnTab} from './addRowOnTab';\n\nconst d = debug('thx.controls.inputs.TableInput.CheckboxEditCell');\n\ninterface CheckboxEditCellOptions<D extends Record<string, unknown>> {\n\t/** Override SemanticUI Input props */\n\tinputProps?: CheckboxProps;\n\t/** If function is present, and returns true, will add a new row if tab is pressed on the last row */\n\taddRowOnTabIf?: AddRowOnTabIf<D, boolean>;\n}\n\nexport function CheckboxEditCell<D extends Record<string, unknown>>(options?: CheckboxEditCellOptions<D>) {\n\tconst {inputProps, addRowOnTabIf} = options || {};\n\n\treturn function CheckboxEditCellFn(props: TableCellProps<D, boolean>) {\n\t\tconst {\n\t\t\tvalue: initialValue,\n\t\t\trow: {index},\n\t\t\tcolumn: {id},\n\t\t\tupdateData,\n\t\t} = props;\n\n\t\tconst [value, setValue] = useState(initialValue);\n\n\t\treturn (\n\t\t\t<Checkbox\n\t\t\t\t{...inputProps}\n\t\t\t\tchecked={value}\n\t\t\t\tonChange={(ev, v) => {\n\t\t\t\t\tsetValue(v.checked || false);\n\t\t\t\t}}\n\t\t\t\tonBlur={() => {\n\t\t\t\t\tupdateData(index, id, value);\n\t\t\t\t}}\n\t\t\t\tonKeyDown={(event: KeyboardEvent) => addRowOnTab(event, value, props, addRowOnTabIf)}\n\t\t\t/>\n\t\t);\n\t};\n}\n"],"names":[],"mappings":";;;;;AAOU,MAAM,iDAAiD,EAAA;AAS1D,SAAA,gBAAA,CAA6D,OAAsC,EAAA;AACzG,EAAA,MAAM,EAAC,UAAA,EAAY,aAAiB,EAAA,GAAA,OAAA,IAAW,EAAC,CAAA;AAEhD,EAAA,OAAO,4BAA4B,KAAmC,EAAA;AACrE,IAAM,MAAA;AAAA,MACL,KAAO,EAAA,YAAA;AAAA,MACP,KAAK,EAAC,KAAA,EAAA;AAAA,MACN,QAAQ,EAAC,EAAA,EAAA;AAAA,MACT,UAAA;AAAA,KACG,GAAA,KAAA,CAAA;AAEJ,IAAA,MAAM,CAAC,KAAA,EAAO,QAAY,CAAA,GAAA,QAAA,CAAS,YAAY,CAAA,CAAA;AAE/C,IAAA,uBACE,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA;AAAA,MACI,GAAA,UAAA;AAAA,MACJ,OAAS,EAAA,KAAA;AAAA,MACT,QAAA,EAAU,CAAC,EAAA,EAAI,CAAM,KAAA;AACpB,QAAS,QAAA,CAAA,CAAA,CAAE,WAAW,KAAK,CAAA,CAAA;AAAA,OAC5B;AAAA,MACA,QAAQ,MAAM;AACb,QAAW,UAAA,CAAA,KAAA,EAAO,IAAI,KAAK,CAAA,CAAA;AAAA,OAC5B;AAAA,MACA,WAAW,CAAC,KAAA,KAAyB,YAAY,KAAO,EAAA,KAAA,EAAO,OAAO,aAAa,CAAA;AAAA,KACpF,CAAA,CAAA;AAAA,GAEF,CAAA;AACD;;;;"}

package/dist/esm/inputs/TableInput/DropdownCell.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Dropdown } from 'semantic-ui-react';
+
+function DropdownCell(dropdownProps) {
+  return function DropdownCellFn(props) {
+    const {
+      value,
+      row: { index: rowIndex },
+      column: { id },
+      updateData
+    } = props;
+    const { onChange, ...rest } = dropdownProps;
+    return /* @__PURE__ */ React.createElement(Dropdown, {
+      ...rest,
+      value,
+      onChange: (event, val) => {
+        updateData(rowIndex, id, val.value);
+        if (onChange)
+          onChange(event, val);
+      }
+    });
+  };
+}
+
+export { DropdownCell };
+//# sourceMappingURL=DropdownCell.js.map

package/dist/esm/inputs/TableInput/DropdownCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownCell.js","sources":["../../../../src/inputs/TableInput/DropdownCell.tsx"],"sourcesContent":["import {Dropdown} from 'semantic-ui-react';\nimport type {DropdownProps} from 'semantic-ui-react';\nimport type {TableCellProps} from './TableInput';\n\nexport function DropdownCell<D extends Record<string, unknown>>(dropdownProps: DropdownProps) {\n\treturn function DropdownCellFn(props: TableCellProps<D>) {\n\t\tconst {\n\t\t\tvalue,\n\t\t\trow: {index: rowIndex},\n\t\t\tcolumn: {id},\n\t\t\tupdateData,\n\t\t} = props;\n\n\t\tconst {onChange, ...rest} = dropdownProps;\n\n\t\treturn (\n\t\t\t<Dropdown\n\t\t\t\t{...rest}\n\t\t\t\tvalue={value}\n\t\t\t\tonChange={(event, val) => {\n\t\t\t\t\tupdateData(rowIndex, id, val.value);\n\t\t\t\t\tif (onChange) onChange(event, val);\n\t\t\t\t}}\n\t\t\t/>\n\t\t);\n\t};\n}\n"],"names":[],"mappings":";;;AAIO,SAAA,YAAA,CAAyD,aAA8B,EAAA;AAC7F,EAAA,OAAO,wBAAwB,KAA0B,EAAA;AACxD,IAAM,MAAA;AAAA,MACL,KAAA;AAAA,MACA,GAAA,EAAK,EAAC,KAAO,EAAA,QAAA,EAAA;AAAA,MACb,QAAQ,EAAC,EAAA,EAAA;AAAA,MACT,UAAA;AAAA,KACG,GAAA,KAAA,CAAA;AAEJ,IAAM,MAAA,EAAC,aAAa,IAAQ,EAAA,GAAA,aAAA,CAAA;AAE5B,IAAA,uBACE,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA;AAAA,MACI,GAAA,IAAA;AAAA,MACJ,KAAA;AAAA,MACA,QAAA,EAAU,CAAC,KAAA,EAAO,GAAQ,KAAA;AACzB,QAAW,UAAA,CAAA,QAAA,EAAU,EAAI,EAAA,GAAA,CAAI,KAAK,CAAA,CAAA;AAClC,QAAI,IAAA,QAAA;AAAU,UAAA,QAAA,CAAS,OAAO,GAAG,CAAA,CAAA;AAAA,OAClC;AAAA,KACD,CAAA,CAAA;AAAA,GAEF,CAAA;AACD;;;;"}

package/dist/esm/inputs/TableInput/HoverCell.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import debug from 'debug';
+
+debug("thx.controls.inputs.TableInput.HoverCell");
+function HoverCell(options) {
+  return function HoverCellFn(props) {
+    const { Action } = options;
+    if (props.hoverRow === props.row.id) {
+      return /* @__PURE__ */ React.createElement("div", {
+        style: { textAlign: "right" }
+      }, /* @__PURE__ */ React.createElement(Action, {
+        ...props
+      }));
+    }
+    return null;
+  };
+}
+
+export { HoverCell };
+//# sourceMappingURL=HoverCell.js.map

package/dist/esm/inputs/TableInput/HoverCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HoverCell.js","sources":["../../../../src/inputs/TableInput/HoverCell.tsx"],"sourcesContent":["import debug from 'debug';\nimport type {CellProps, Renderer} from 'react-table';\n\nconst d = debug('thx.controls.inputs.TableInput.HoverCell');\n\ninterface HoverCellOptions<D extends Record<string, unknown>> {\n\tAction: Renderer<CellProps<D>>;\n}\n\nexport function HoverCell<D extends Record<string, unknown>>(options: HoverCellOptions<D>) {\n\treturn function HoverCellFn(props: CellProps<D>) {\n\t\tconst {Action} = options;\n\n\t\t// @ts-expect-error\n\t\tif (props.hoverRow === props.row.id) {\n\t\t\treturn (\n\t\t\t\t<div style={{textAlign: 'right'}}>\n\t\t\t\t\t{/* @ts-expect-error */}\n\t\t\t\t\t<Action {...props} />\n\t\t\t\t</div>\n\t\t\t);\n\t\t}\n\t\treturn null;\n\t};\n}\n"],"names":[],"mappings":";;;AAGU,MAAM,0CAA0C,EAAA;AAMnD,SAAA,SAAA,CAAsD,OAA8B,EAAA;AAC1F,EAAA,OAAO,qBAAqB,KAAqB,EAAA;AAChD,IAAA,MAAM,EAAC,MAAU,EAAA,GAAA,OAAA,CAAA;AAGjB,IAAA,IAAI,KAAM,CAAA,QAAA,KAAa,KAAM,CAAA,GAAA,CAAI,EAAI,EAAA;AACpC,MAAA,uBACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,QAAI,KAAA,EAAO,EAAC,SAAA,EAAW,OAAO,EAAA;AAAA,OAAA,kBAE7B,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AAAA,QAAW,GAAA,KAAA;AAAA,OAAO,CACpB,CAAA,CAAA;AAAA,KAEF;AACA,IAAO,OAAA,IAAA,CAAA;AAAA,GACR,CAAA;AACD;;;;"}

package/dist/esm/inputs/TableInput/LocalDateCell.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { formatDate } from '@thx/date';
+
+function LocalDateCell(options) {
+  return function LocalDateCellFn(props) {
+    return /* @__PURE__ */ React.createElement("div", {
+      style: { textAlign: "right" }
+    }, formatDate(options?.overrideValue ? options.overrideValue(props) : props.value, options?.dateFormat));
+  };
+}
+
+export { LocalDateCell };
+//# sourceMappingURL=LocalDateCell.js.map

package/dist/esm/inputs/TableInput/LocalDateCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LocalDateCell.js","sources":["../../../../src/inputs/TableInput/LocalDateCell.tsx"],"sourcesContent":["import type {LocalDate} from '@js-joda/core';\nimport {formatDate, type FormatDateParams} from '@thx/date';\nimport type {CellProps} from 'react-table';\n\ninterface LocalDateCellOptions<D extends Record<string, unknown>> {\n\t/** If provided, this function will override the LocalDate value displayed */\n\toverrideValue?: (props: CellProps<D, LocalDate>) => LocalDate;\n\tdateFormat?: FormatDateParams;\n}\n\nexport function LocalDateCell<D extends Record<string, unknown>>(options?: LocalDateCellOptions<D>) {\n\treturn function LocalDateCellFn(props: CellProps<D, LocalDate>) {\n\t\treturn (\n\t\t\t<div style={{textAlign: 'right'}}>{formatDate(options?.overrideValue ? options.overrideValue(props) : props.value, options?.dateFormat)}</div>\n\t\t);\n\t};\n}\n"],"names":[],"mappings":";;;AAUO,SAAA,aAAA,CAA0D,OAAmC,EAAA;AACnG,EAAA,OAAO,yBAAyB,KAAgC,EAAA;AAC/D,IAAA,uBACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,MAAI,KAAA,EAAO,EAAC,SAAA,EAAW,OAAO,EAAA;AAAA,KAAI,EAAA,UAAA,CAAW,OAAS,EAAA,aAAA,GAAgB,OAAQ,CAAA,aAAA,CAAc,KAAK,CAAA,GAAI,KAAM,CAAA,KAAA,EAAO,OAAS,EAAA,UAAU,CAAE,CAAA,CAAA;AAAA,GAE1I,CAAA;AACD;;;;"}

package/dist/esm/inputs/TableInput/LocalDateEditCell.js

@@ -0,0 +1,33 @@
+import React, { useState } from 'react';
+import debug from 'debug';
+import { LocalDatePicker } from '../../date/LocalDatePicker/LocalDatePicker.js';
+
+debug("thx.controls.inputs.TableInput.LocalDateEditCell");
+function LocalDateEditCell() {
+  return function LocalDateEditCellFn(props) {
+    const {
+      value: initialValue,
+      row: { index: rowIndex },
+      column: { id },
+      updateData,
+      hoverRow
+    } = props;
+    const [value, setValue] = useState(initialValue);
+    return /* @__PURE__ */ React.createElement(LocalDatePicker, {
+      fluid: true,
+      transparent: true,
+      value,
+      onChange: (val) => {
+        setValue(val);
+        updateData(rowIndex, id, val);
+      },
+      onBlur: () => {
+        updateData(rowIndex, id, value);
+      },
+      icon: hoverRow.toString() === rowIndex.toString()
+    });
+  };
+}
+
+export { LocalDateEditCell };
+//# sourceMappingURL=LocalDateEditCell.js.map

package/dist/esm/inputs/TableInput/LocalDateEditCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LocalDateEditCell.js","sources":["../../../../src/inputs/TableInput/LocalDateEditCell.tsx"],"sourcesContent":["import type {LocalDate} from '@js-joda/core';\nimport debug from 'debug';\nimport {useState} from 'react';\nimport {LocalDatePicker} from '../../date/LocalDatePicker';\nimport type {TableCellProps} from './TableInput';\n\nconst d = debug('thx.controls.inputs.TableInput.LocalDateEditCell');\n\nexport function LocalDateEditCell<D extends Record<string, unknown>>() {\n\treturn function LocalDateEditCellFn(props: TableCellProps<D, LocalDate | null>) {\n\t\tconst {\n\t\t\tvalue: initialValue,\n\t\t\trow: {index: rowIndex},\n\t\t\tcolumn: {id},\n\t\t\tupdateData,\n\t\t\thoverRow,\n\t\t} = props;\n\n\t\tconst [value, setValue] = useState(initialValue);\n\n\t\treturn (\n\t\t\t<LocalDatePicker\n\t\t\t\tfluid\n\t\t\t\ttransparent\n\t\t\t\tvalue={value}\n\t\t\t\tonChange={val => {\n\t\t\t\t\tsetValue(val);\n\t\t\t\t\tupdateData(rowIndex, id, val);\n\t\t\t\t}}\n\t\t\t\tonBlur={() => {\n\t\t\t\t\tupdateData(rowIndex, id, value);\n\t\t\t\t}}\n\t\t\t\ticon={hoverRow.toString() === rowIndex.toString()}\n\t\t\t/>\n\t\t);\n\t};\n}\n"],"names":[],"mappings":";;;;AAMU,MAAM,kDAAkD,EAAA;AAEK,SAAA,iBAAA,GAAA;AACtE,EAAA,OAAO,6BAA6B,KAA4C,EAAA;AAC/E,IAAM,MAAA;AAAA,MACL,KAAO,EAAA,YAAA;AAAA,MACP,GAAA,EAAK,EAAC,KAAO,EAAA,QAAA,EAAA;AAAA,MACb,QAAQ,EAAC,EAAA,EAAA;AAAA,MACT,UAAA;AAAA,MACA,QAAA;AAAA,KACG,GAAA,KAAA,CAAA;AAEJ,IAAA,MAAM,CAAC,KAAA,EAAO,QAAY,CAAA,GAAA,QAAA,CAAS,YAAY,CAAA,CAAA;AAE/C,IAAA,uBACE,KAAA,CAAA,aAAA,CAAA,eAAA,EAAA;AAAA,MACA,KAAK,EAAA,IAAA;AAAA,MACL,WAAW,EAAA,IAAA;AAAA,MACX,KAAA;AAAA,MACA,UAAU,CAAO,GAAA,KAAA;AAChB,QAAA,QAAA,CAAS,GAAG,CAAA,CAAA;AACZ,QAAW,UAAA,CAAA,QAAA,EAAU,IAAI,GAAG,CAAA,CAAA;AAAA,OAC7B;AAAA,MACA,QAAQ,MAAM;AACb,QAAW,UAAA,CAAA,QAAA,EAAU,IAAI,KAAK,CAAA,CAAA;AAAA,OAC/B;AAAA,MACA,IAAM,EAAA,QAAA,CAAS,QAAS,EAAA,KAAM,SAAS,QAAS,EAAA;AAAA,KACjD,CAAA,CAAA;AAAA,GAEF,CAAA;AACD;;;;"}

package/dist/esm/inputs/TableInput/LocalTimeEditCell.js

@@ -0,0 +1,31 @@
+import React, { useState } from 'react';
+import debug from 'debug';
+import { LocalTimePicker } from '../../date/LocalTimePicker/LocalTimePicker.js';
+
+debug("thx.controls.inputs.TableInput.LocalTimeEditCell");
+function LocalTimeEditCell() {
+  return function LocalTimeEditCellFn(props) {
+    const {
+      value: initialValue,
+      row: { index: rowIndex },
+      column: { id },
+      updateData
+    } = props;
+    const [value, setValue] = useState(initialValue);
+    return /* @__PURE__ */ React.createElement(LocalTimePicker, {
+      fluid: true,
+      transparent: true,
+      value,
+      onChange: (val) => {
+        setValue(val);
+        updateData(rowIndex, id, val);
+      },
+      onBlur: () => {
+        updateData(rowIndex, id, value);
+      }
+    });
+  };
+}
+
+export { LocalTimeEditCell };
+//# sourceMappingURL=LocalTimeEditCell.js.map

package/dist/esm/inputs/TableInput/LocalTimeEditCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LocalTimeEditCell.js","sources":["../../../../src/inputs/TableInput/LocalTimeEditCell.tsx"],"sourcesContent":["import type {LocalTime} from '@js-joda/core';\nimport debug from 'debug';\nimport {useState} from 'react';\nimport {LocalTimePicker} from '../../date/LocalTimePicker';\nimport type {TableCellProps} from './TableInput';\n\nconst d = debug('thx.controls.inputs.TableInput.LocalTimeEditCell');\n\nexport function LocalTimeEditCell<D extends Record<string, unknown>>() {\n\treturn function LocalTimeEditCellFn(props: TableCellProps<D, LocalTime | null>) {\n\t\tconst {\n\t\t\tvalue: initialValue,\n\t\t\trow: {index: rowIndex},\n\t\t\tcolumn: {id},\n\t\t\tupdateData,\n\t\t} = props;\n\n\t\tconst [value, setValue] = useState(initialValue);\n\n\t\treturn (\n\t\t\t<LocalTimePicker\n\t\t\t\tfluid\n\t\t\t\ttransparent\n\t\t\t\tvalue={value}\n\t\t\t\tonChange={val => {\n\t\t\t\t\tsetValue(val);\n\t\t\t\t\tupdateData(rowIndex, id, val);\n\t\t\t\t}}\n\t\t\t\tonBlur={() => {\n\t\t\t\t\tupdateData(rowIndex, id, value);\n\t\t\t\t}}\n\t\t\t/>\n\t\t);\n\t};\n}\n"],"names":[],"mappings":";;;;AAMU,MAAM,kDAAkD,EAAA;AAEK,SAAA,iBAAA,GAAA;AACtE,EAAA,OAAO,6BAA6B,KAA4C,EAAA;AAC/E,IAAM,MAAA;AAAA,MACL,KAAO,EAAA,YAAA;AAAA,MACP,GAAA,EAAK,EAAC,KAAO,EAAA,QAAA,EAAA;AAAA,MACb,QAAQ,EAAC,EAAA,EAAA;AAAA,MACT,UAAA;AAAA,KACG,GAAA,KAAA,CAAA;AAEJ,IAAA,MAAM,CAAC,KAAA,EAAO,QAAY,CAAA,GAAA,QAAA,CAAS,YAAY,CAAA,CAAA;AAE/C,IAAA,uBACE,KAAA,CAAA,aAAA,CAAA,eAAA,EAAA;AAAA,MACA,KAAK,EAAA,IAAA;AAAA,MACL,WAAW,EAAA,IAAA;AAAA,MACX,KAAA;AAAA,MACA,UAAU,CAAO,GAAA,KAAA;AAChB,QAAA,QAAA,CAAS,GAAG,CAAA,CAAA;AACZ,QAAW,UAAA,CAAA,QAAA,EAAU,IAAI,GAAG,CAAA,CAAA;AAAA,OAC7B;AAAA,MACA,QAAQ,MAAM;AACb,QAAW,UAAA,CAAA,QAAA,EAAU,IAAI,KAAK,CAAA,CAAA;AAAA,OAC/B;AAAA,KACD,CAAA,CAAA;AAAA,GAEF,CAAA;AACD;;;;"}

package/dist/esm/inputs/TableInput/MoneyCell.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { formatMoney } from '@thx/money';
+
+function MoneyCell(options) {
+  return function MoneyCellFn(props) {
+    return /* @__PURE__ */ React.createElement("div", {
+      style: { textAlign: "right" }
+    }, formatMoney(options?.overrideValue ? options.overrideValue(props) : props.value));
+  };
+}
+
+export { MoneyCell };
+//# sourceMappingURL=MoneyCell.js.map

package/dist/esm/inputs/TableInput/MoneyCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MoneyCell.js","sources":["../../../../src/inputs/TableInput/MoneyCell.tsx"],"sourcesContent":["import {formatMoney} from '@thx/money';\nimport type Money from 'js-money';\nimport type {CellProps} from 'react-table';\n\ninterface MoneyCellOptions<D extends Record<string, unknown>> {\n\t/** If provided, this function will override the Money value displayed */\n\toverrideValue?: (props: CellProps<D, Money>) => Money;\n}\n\nexport function MoneyCell<D extends Record<string, unknown>>(options?: MoneyCellOptions<D>) {\n\treturn function MoneyCellFn(props: CellProps<D, Money>) {\n\t\treturn <div style={{textAlign: 'right'}}>{formatMoney(options?.overrideValue ? options.overrideValue(props) : props.value)}</div>;\n\t};\n}\n"],"names":[],"mappings":";;;AASO,SAAA,SAAA,CAAsD,OAA+B,EAAA;AAC3F,EAAA,OAAO,qBAAqB,KAA4B,EAAA;AACvD,IAAA,uBAAQ,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,MAAI,KAAA,EAAO,EAAC,SAAA,EAAW,OAAO,EAAA;AAAA,KAAI,EAAA,WAAA,CAAY,SAAS,aAAgB,GAAA,OAAA,CAAQ,cAAc,KAAK,CAAA,GAAI,KAAM,CAAA,KAAK,CAAE,CAAA,CAAA;AAAA,GAC5H,CAAA;AACD;;;;"}

package/dist/esm/inputs/TableInput/MoneyEditCell.js

@@ -0,0 +1,37 @@
+import React, { useState, useEffect } from 'react';
+import debug from 'debug';
+import { MoneyInput } from '../../money/MoneyInput/MoneyInput.js';
+import { addRowOnTab } from './addRowOnTab.js';
+
+debug("thx.controls.inputs.TableInput.MoneyEditCell");
+function MoneyEditCell(moneyEditCellProps) {
+  return function MoneyEditCellFn(props) {
+    const {
+      value: initialValue,
+      row: { index: rowIndex },
+      column: { id },
+      updateData
+    } = props;
+    const [value, setValue] = useState(initialValue);
+    const { addRowOnTabIf, ...rest } = moneyEditCellProps || {};
+    useEffect(() => {
+      if (initialValue) {
+        setValue(initialValue);
+      }
+    }, [initialValue]);
+    return /* @__PURE__ */ React.createElement(MoneyInput, {
+      ...rest,
+      fluid: true,
+      transparent: true,
+      value,
+      onChange: setValue,
+      onBlur: () => {
+        updateData(rowIndex, id, value);
+      },
+      onKeyDown: (event) => addRowOnTab(event, value, props, addRowOnTabIf)
+    });
+  };
+}
+
+export { MoneyEditCell };
+//# sourceMappingURL=MoneyEditCell.js.map

package/dist/esm/inputs/TableInput/MoneyEditCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MoneyEditCell.js","sources":["../../../../src/inputs/TableInput/MoneyEditCell.tsx"],"sourcesContent":["import debug from 'debug';\nimport type Money from 'js-money';\nimport {useEffect, useState} from 'react';\nimport {MoneyInput} from '../../money/MoneyInput';\nimport type {TableCellProps} from './TableInput';\nimport type {AddRowOnTabIf} from './addRowOnTab';\nimport {addRowOnTab} from './addRowOnTab';\n\nconst d = debug('thx.controls.inputs.TableInput.MoneyEditCell');\n\ninterface MoneyEditCellOptions<D extends Record<string, unknown>> {\n\t/** If function is present, and returns true, will add a new row if tab is pressed on the last row */\n\taddRowOnTabIf?: AddRowOnTabIf<D, Money | undefined>;\n\ttabIndex?: number;\n}\n\nexport function MoneyEditCell<D extends Record<string, unknown>>(moneyEditCellProps?: MoneyEditCellOptions<D>) {\n\treturn function MoneyEditCellFn(props: TableCellProps<D, Money | undefined>) {\n\t\tconst {\n\t\t\tvalue: initialValue,\n\t\t\trow: {index: rowIndex},\n\t\t\tcolumn: {id},\n\t\t\tupdateData,\n\t\t} = props;\n\n\t\tconst [value, setValue] = useState(initialValue);\n\t\tconst {addRowOnTabIf, ...rest} = moneyEditCellProps || {};\n\n\t\tuseEffect(() => {\n\t\t\tif (initialValue) {\n\t\t\t\tsetValue(initialValue);\n\t\t\t}\n\t\t}, [initialValue]);\n\n\t\treturn (\n\t\t\t<MoneyInput\n\t\t\t\t{...rest}\n\t\t\t\tfluid\n\t\t\t\ttransparent\n\t\t\t\tvalue={value}\n\t\t\t\tonChange={setValue}\n\t\t\t\tonBlur={() => {\n\t\t\t\t\tupdateData(rowIndex, id, value);\n\t\t\t\t}}\n\t\t\t\tonKeyDown={(event: KeyboardEvent) => addRowOnTab(event, value, props, addRowOnTabIf)}\n\t\t\t/>\n\t\t);\n\t};\n}\n"],"names":[],"mappings":";;;;;AAQU,MAAM,8CAA8C,EAAA;AAQvD,SAAA,aAAA,CAA0D,kBAA8C,EAAA;AAC9G,EAAA,OAAO,yBAAyB,KAA6C,EAAA;AAC5E,IAAM,MAAA;AAAA,MACL,KAAO,EAAA,YAAA;AAAA,MACP,GAAA,EAAK,EAAC,KAAO,EAAA,QAAA,EAAA;AAAA,MACb,QAAQ,EAAC,EAAA,EAAA;AAAA,MACT,UAAA;AAAA,KACG,GAAA,KAAA,CAAA;AAEJ,IAAA,MAAM,CAAC,KAAA,EAAO,QAAY,CAAA,GAAA,QAAA,CAAS,YAAY,CAAA,CAAA;AAC/C,IAAA,MAAM,EAAC,aAAA,EAAA,GAAkB,IAAQ,EAAA,GAAA,kBAAA,IAAsB,EAAC,CAAA;AAExD,IAAA,SAAA,CAAU,MAAM;AACf,MAAA,IAAI,YAAc,EAAA;AACjB,QAAA,QAAA,CAAS,YAAY,CAAA,CAAA;AAAA,OACtB;AAAA,KACD,EAAG,CAAC,YAAY,CAAC,CAAA,CAAA;AAEjB,IAAA,uBACE,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA;AAAA,MACI,GAAA,IAAA;AAAA,MACJ,KAAK,EAAA,IAAA;AAAA,MACL,WAAW,EAAA,IAAA;AAAA,MACX,KAAA;AAAA,MACA,QAAU,EAAA,QAAA;AAAA,MACV,QAAQ,MAAM;AACb,QAAW,UAAA,CAAA,QAAA,EAAU,IAAI,KAAK,CAAA,CAAA;AAAA,OAC/B;AAAA,MACA,WAAW,CAAC,KAAA,KAAyB,YAAY,KAAO,EAAA,KAAA,EAAO,OAAO,aAAa,CAAA;AAAA,KACpF,CAAA,CAAA;AAAA,GAEF,CAAA;AACD;;;;"}

package/dist/esm/inputs/TableInput/MoneySumFooter.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { isMoney, toMoney, formatMoney } from '@thx/money';
+
+function MoneySumFooter(options) {
+  const { id } = options || {};
+  return function MoneySumFooterInstance(info) {
+    const sum = info.rows.reduce((memo, row) => {
+      if (isMoney(row.values[id])) {
+        return memo.add(row.values[id]);
+      }
+      return memo;
+    }, toMoney());
+    return /* @__PURE__ */ React.createElement("div", {
+      style: { textAlign: "right" }
+    }, formatMoney(sum));
+  };
+}
+
+export { MoneySumFooter };
+//# sourceMappingURL=MoneySumFooter.js.map

package/dist/esm/inputs/TableInput/MoneySumFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MoneySumFooter.js","sources":["../../../../src/inputs/TableInput/MoneySumFooter.tsx"],"sourcesContent":["import {formatMoney, isMoney, toMoney} from '@thx/money';\nimport type {IdType, TableInstance} from 'react-table';\n\ninterface MoneySumFooterOptions<A extends Record<string, unknown>> {\n\tid: IdType<A>;\n}\n\nexport function MoneySumFooter<A extends Record<string, unknown>>(options: MoneySumFooterOptions<A>) {\n\tconst {id} = options || {};\n\n\treturn function MoneySumFooterInstance(info: TableInstance<A>) {\n\t\tconst sum = info.rows.reduce((memo, row) => {\n\t\t\t// checks to make sure we have an instance of money -STT\n\t\t\tif (isMoney(row.values[id])) {\n\t\t\t\treturn memo.add(row.values[id]);\n\t\t\t}\n\t\t\treturn memo;\n\t\t}, toMoney());\n\t\treturn <div style={{textAlign: 'right'}}>{formatMoney(sum)}</div>;\n\t};\n}\n"],"names":[],"mappings":";;;AAOO,SAAA,cAAA,CAA2D,OAAmC,EAAA;AACpG,EAAM,MAAA,EAAC,EAAM,EAAA,GAAA,OAAA,IAAW,EAAC,CAAA;AAEzB,EAAA,OAAO,gCAAgC,IAAwB,EAAA;AAC9D,IAAA,MAAM,MAAM,IAAK,CAAA,IAAA,CAAK,MAAO,CAAA,CAAC,MAAM,GAAQ,KAAA;AAE3C,MAAA,IAAI,OAAQ,CAAA,GAAA,CAAI,MAAO,CAAA,EAAA,CAAG,CAAG,EAAA;AAC5B,QAAA,OAAO,IAAK,CAAA,GAAA,CAAI,GAAI,CAAA,MAAA,CAAO,EAAG,CAAA,CAAA,CAAA;AAAA,OAC/B;AACA,MAAO,OAAA,IAAA,CAAA;AAAA,KACR,EAAG,SAAS,CAAA,CAAA;AACZ,IAAA,uBAAQ,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,MAAI,KAAA,EAAO,EAAC,SAAA,EAAW,OAAO,EAAA;AAAA,KAAI,EAAA,WAAA,CAAY,GAAG,CAAE,CAAA,CAAA;AAAA,GAC5D,CAAA;AACD;;;;"}

package/dist/esm/inputs/TableInput/NumberEditCell.js

@@ -0,0 +1,35 @@
+import React, { useState } from 'react';
+import debug from 'debug';
+import { Input } from 'semantic-ui-react';
+import { addRowOnTab } from './addRowOnTab.js';
+
+debug("thx.controls.inputs.TableInput.NumberEditCell");
+function NumberEditCell(options) {
+  const { inputProps, addRowOnTabIf } = options || {};
+  return function NumberEditCellFn(props) {
+    const {
+      value: initialValue,
+      row: { index },
+      column: { id },
+      updateData
+    } = props;
+    const [value, setValue] = useState(initialValue?.toString());
+    return /* @__PURE__ */ React.createElement(Input, {
+      type: "number",
+      fluid: true,
+      transparent: true,
+      ...inputProps,
+      value,
+      onChange: (ev, v) => {
+        setValue(v.value);
+      },
+      onBlur: () => {
+        updateData(index, id, parseFloat(value || "0"));
+      },
+      onKeyDown: (event) => addRowOnTab(event, parseFloat(value), props, addRowOnTabIf)
+    });
+  };
+}
+
+export { NumberEditCell };
+//# sourceMappingURL=NumberEditCell.js.map

package/dist/esm/inputs/TableInput/NumberEditCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberEditCell.js","sources":["../../../../src/inputs/TableInput/NumberEditCell.tsx"],"sourcesContent":["import debug from 'debug';\nimport {useState} from 'react';\nimport {Input, type InputProps} from 'semantic-ui-react';\nimport type {TableCellProps} from './TableInput';\nimport type {AddRowOnTabIf} from './addRowOnTab';\nimport {addRowOnTab} from './addRowOnTab';\n\nconst d = debug('thx.controls.inputs.TableInput.NumberEditCell');\n\ninterface NumberEditCellOptions<D extends Record<number, unknown>> {\n\t/** Override SemanticUI Input props */\n\tinputProps?: InputProps;\n\t/** If function is present, and returns true, will add a new row if tab is pressed on the last row */\n\taddRowOnTabIf?: AddRowOnTabIf<D, number>;\n}\n\nexport function NumberEditCell<D extends Record<number, unknown>>(options?: NumberEditCellOptions<D>) {\n\tconst {inputProps, addRowOnTabIf} = options || {};\n\n\treturn function NumberEditCellFn(props: TableCellProps<D, number>) {\n\t\tconst {\n\t\t\tvalue: initialValue,\n\t\t\trow: {index},\n\t\t\tcolumn: {id},\n\t\t\tupdateData,\n\t\t} = props;\n\n\t\tconst [value, setValue] = useState(initialValue?.toString());\n\n\t\treturn (\n\t\t\t<Input\n\t\t\t\ttype=\"number\"\n\t\t\t\tfluid\n\t\t\t\ttransparent\n\t\t\t\t{...inputProps}\n\t\t\t\tvalue={value}\n\t\t\t\tonChange={(ev, v) => {\n\t\t\t\t\tsetValue(v.value);\n\t\t\t\t}}\n\t\t\t\tonBlur={() => {\n\t\t\t\t\tupdateData(index, id, parseFloat(value || '0'));\n\t\t\t\t}}\n\t\t\t\tonKeyDown={(event: KeyboardEvent) => addRowOnTab(event, parseFloat(value), props, addRowOnTabIf)}\n\t\t\t/>\n\t\t);\n\t};\n}\n"],"names":[],"mappings":";;;;;AAOU,MAAM,+CAA+C,EAAA;AASxD,SAAA,cAAA,CAA2D,OAAoC,EAAA;AACrG,EAAA,MAAM,EAAC,UAAA,EAAY,aAAiB,EAAA,GAAA,OAAA,IAAW,EAAC,CAAA;AAEhD,EAAA,OAAO,0BAA0B,KAAkC,EAAA;AAClE,IAAM,MAAA;AAAA,MACL,KAAO,EAAA,YAAA;AAAA,MACP,KAAK,EAAC,KAAA,EAAA;AAAA,MACN,QAAQ,EAAC,EAAA,EAAA;AAAA,MACT,UAAA;AAAA,KACG,GAAA,KAAA,CAAA;AAEJ,IAAA,MAAM,CAAC,KAAO,EAAA,QAAA,CAAA,GAAY,QAAS,CAAA,YAAA,EAAc,UAAU,CAAA,CAAA;AAE3D,IAAA,uBACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,MACA,IAAK,EAAA,QAAA;AAAA,MACL,KAAK,EAAA,IAAA;AAAA,MACL,WAAW,EAAA,IAAA;AAAA,MACP,GAAA,UAAA;AAAA,MACJ,KAAA;AAAA,MACA,QAAA,EAAU,CAAC,EAAA,EAAI,CAAM,KAAA;AACpB,QAAA,QAAA,CAAS,EAAE,KAAK,CAAA,CAAA;AAAA,OACjB;AAAA,MACA,QAAQ,MAAM;AACb,QAAA,UAAA,CAAW,KAAO,EAAA,EAAA,EAAI,UAAW,CAAA,KAAA,IAAS,GAAG,CAAC,CAAA,CAAA;AAAA,OAC/C;AAAA,MACA,SAAA,EAAW,CAAC,KAAyB,KAAA,WAAA,CAAY,OAAO,UAAW,CAAA,KAAK,CAAG,EAAA,KAAA,EAAO,aAAa,CAAA;AAAA,KAChG,CAAA,CAAA;AAAA,GAEF,CAAA;AACD;;;;"}

package/dist/esm/inputs/TableInput/StringEditCell.js

@@ -0,0 +1,34 @@
+import React, { useState } from 'react';
+import debug from 'debug';
+import { Input } from 'semantic-ui-react';
+import { addRowOnTab } from './addRowOnTab.js';
+
+debug("thx.controls.inputs.TableInput.StringEditCell");
+function StringEditCell(options) {
+  const { inputProps, addRowOnTabIf } = options || {};
+  return function StringEditCellFn(props) {
+    const {
+      value: initialValue,
+      row: { index },
+      column: { id },
+      updateData
+    } = props;
+    const [value, setValue] = useState(initialValue);
+    return /* @__PURE__ */ React.createElement(Input, {
+      fluid: true,
+      transparent: true,
+      ...inputProps,
+      value,
+      onChange: (ev, v) => {
+        setValue(v.value);
+      },
+      onBlur: () => {
+        updateData(index, id, value);
+      },
+      onKeyDown: (event) => addRowOnTab(event, value, props, addRowOnTabIf)
+    });
+  };
+}
+
+export { StringEditCell };
+//# sourceMappingURL=StringEditCell.js.map

package/dist/esm/inputs/TableInput/StringEditCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StringEditCell.js","sources":["../../../../src/inputs/TableInput/StringEditCell.tsx"],"sourcesContent":["import debug from 'debug';\nimport {useState} from 'react';\nimport {Input, type InputProps} from 'semantic-ui-react';\nimport type {TableCellProps} from './TableInput';\nimport type {AddRowOnTabIf} from './addRowOnTab';\nimport {addRowOnTab} from './addRowOnTab';\n\nconst d = debug('thx.controls.inputs.TableInput.StringEditCell');\n\ninterface StringEditCellOptions<D extends Record<string, unknown>> {\n\t/** Override SemanticUI Input props */\n\tinputProps?: InputProps;\n\t/** If function is present, and returns true, will add a new row if tab is pressed on the last row */\n\taddRowOnTabIf?: AddRowOnTabIf<D, string>;\n}\n\nexport function StringEditCell<D extends Record<string, unknown>>(options?: StringEditCellOptions<D>) {\n\tconst {inputProps, addRowOnTabIf} = options || {};\n\n\treturn function StringEditCellFn(props: TableCellProps<D, string>) {\n\t\tconst {\n\t\t\tvalue: initialValue,\n\t\t\trow: {index},\n\t\t\tcolumn: {id},\n\t\t\tupdateData,\n\t\t} = props;\n\n\t\tconst [value, setValue] = useState(initialValue);\n\n\t\treturn (\n\t\t\t<Input\n\t\t\t\tfluid\n\t\t\t\ttransparent\n\t\t\t\t{...inputProps}\n\t\t\t\tvalue={value}\n\t\t\t\tonChange={(ev, v) => {\n\t\t\t\t\tsetValue(v.value);\n\t\t\t\t}}\n\t\t\t\tonBlur={() => {\n\t\t\t\t\tupdateData(index, id, value);\n\t\t\t\t}}\n\t\t\t\tonKeyDown={(event: KeyboardEvent) => addRowOnTab(event, value, props, addRowOnTabIf)}\n\t\t\t/>\n\t\t);\n\t};\n}\n"],"names":[],"mappings":";;;;;AAOU,MAAM,+CAA+C,EAAA;AASxD,SAAA,cAAA,CAA2D,OAAoC,EAAA;AACrG,EAAA,MAAM,EAAC,UAAA,EAAY,aAAiB,EAAA,GAAA,OAAA,IAAW,EAAC,CAAA;AAEhD,EAAA,OAAO,0BAA0B,KAAkC,EAAA;AAClE,IAAM,MAAA;AAAA,MACL,KAAO,EAAA,YAAA;AAAA,MACP,KAAK,EAAC,KAAA,EAAA;AAAA,MACN,QAAQ,EAAC,EAAA,EAAA;AAAA,MACT,UAAA;AAAA,KACG,GAAA,KAAA,CAAA;AAEJ,IAAA,MAAM,CAAC,KAAA,EAAO,QAAY,CAAA,GAAA,QAAA,CAAS,YAAY,CAAA,CAAA;AAE/C,IAAA,uBACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,MACA,KAAK,EAAA,IAAA;AAAA,MACL,WAAW,EAAA,IAAA;AAAA,MACP,GAAA,UAAA;AAAA,MACJ,KAAA;AAAA,MACA,QAAA,EAAU,CAAC,EAAA,EAAI,CAAM,KAAA;AACpB,QAAA,QAAA,CAAS,EAAE,KAAK,CAAA,CAAA;AAAA,OACjB;AAAA,MACA,QAAQ,MAAM;AACb,QAAW,UAAA,CAAA,KAAA,EAAO,IAAI,KAAK,CAAA,CAAA;AAAA,OAC5B;AAAA,MACA,WAAW,CAAC,KAAA,KAAyB,YAAY,KAAO,EAAA,KAAA,EAAO,OAAO,aAAa,CAAA;AAAA,KACpF,CAAA,CAAA;AAAA,GAEF,CAAA;AACD;;;;"}

package/dist/esm/inputs/TableInput/TableInput.js

@@ -0,0 +1,79 @@
+import React, { useMemo, useState } from 'react';
+import debug from 'debug';
+import { FieldArray } from 'formik';
+import { useTable } from 'react-table';
+import { Table } from 'semantic-ui-react';
+
+debug("thx.controls.inputs.TableInput");
+function TableInputTable(props) {
+  const {
+    name,
+    columns,
+    values,
+    arrayHelpers,
+    setFieldValue,
+    createRow,
+    tableProps,
+    headerRowProps,
+    headerCellProps,
+    bodyProps,
+    rowProps,
+    cellProps,
+    footerCellProps,
+    footerRowProps
+  } = props;
+  const cols = useMemo(() => columns, [columns]);
+  const vals = useMemo(() => values, [values]);
+  const [hoverRow, setHoverRow] = useState("");
+  const { getTableProps, getTableBodyProps, headerGroups, prepareRow, rows, footerGroups } = useTable({
+    columns: cols,
+    data: vals,
+    updateData(rowIndex, columnId, value) {
+      setFieldValue(`${name}[${rowIndex}].${columnId}`, value);
+    },
+    addRow() {
+      if (createRow) {
+        arrayHelpers.push(createRow());
+      }
+    },
+    arrayHelpers
+  });
+  const hasFooter = footerGroups.some((fg) => fg.headers.some((fgh) => fgh.Footer.name !== "emptyRenderer"));
+  const footer = hasFooter ? /* @__PURE__ */ React.createElement(Table.Footer, null, footerGroups.map((group) => /* @__PURE__ */ React.createElement(Table.Row, {
+    ...{ ...group.getFooterGroupProps(), ...group.getFooterGroupProps(footerRowProps) }
+  }, group.headers.map((column) => /* @__PURE__ */ React.createElement(Table.HeaderCell, {
+    ...{ ...column.getFooterProps(), ...column.getFooterProps(footerCellProps) }
+  }, column.render("Footer")))))) : null;
+  return /* @__PURE__ */ React.createElement(Table, {
+    ...{ ...getTableProps(), ...getTableProps(tableProps) }
+  }, /* @__PURE__ */ React.createElement(Table.Header, null, headerGroups.map((headerGroup) => /* @__PURE__ */ React.createElement(Table.Row, {
+    ...{ ...headerGroup.getHeaderGroupProps(), ...headerGroup.getHeaderGroupProps(headerRowProps) }
+  }, headerGroup.headers.map((column) => /* @__PURE__ */ React.createElement(Table.HeaderCell, {
+    ...{ ...column.getHeaderProps(), ...column.getHeaderProps(headerCellProps) }
+  }, column.render("Header")))))), /* @__PURE__ */ React.createElement(Table.Body, {
+    ...{ ...getTableBodyProps(), ...getTableBodyProps(bodyProps) }
+  }, rows.map((row) => {
+    prepareRow(row);
+    return /* @__PURE__ */ React.createElement(Table.Row, {
+      ...{ ...row.getRowProps(), ...row.getRowProps(rowProps) },
+      onMouseEnter: () => setHoverRow(row.id),
+      onMouseLeave: () => setHoverRow(""),
+      key: row.getRowProps().key
+    }, row.cells.map((cell) => /* @__PURE__ */ React.createElement(Table.Cell, {
+      ...{ ...cell.getCellProps(), ...cell.getCellProps(cellProps) },
+      key: cell.getCellProps().key
+    }, cell.render("Cell", { hoverRow }))));
+  })), footer);
+}
+function TableInput(props) {
+  return /* @__PURE__ */ React.createElement(FieldArray, {
+    name: props.name,
+    render: (arrayHelpers) => /* @__PURE__ */ React.createElement(TableInputTable, {
+      arrayHelpers,
+      ...props
+    })
+  });
+}
+
+export { TableInput };
+//# sourceMappingURL=TableInput.js.map

package/dist/esm/inputs/TableInput/TableInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableInput.js","sources":["../../../../src/inputs/TableInput/TableInput.tsx"],"sourcesContent":["import debug from 'debug';\nimport {FieldArray, type FieldArrayRenderProps} from 'formik';\nimport {useMemo, useState} from 'react';\nimport {\n\ttype CellPropGetter,\n\ttype CellProps,\n\ttype Column,\n\ttype FooterGroupPropGetter,\n\ttype FooterPropGetter,\n\ttype HeaderGroupPropGetter,\n\ttype HeaderPropGetter,\n\ttype RowPropGetter,\n\ttype TableBodyPropGetter,\n\tuseTable,\n} from 'react-table';\nimport {Table, type TableProps} from 'semantic-ui-react';\n\nconst d = debug('thx.controls.inputs.TableInput');\n\ntype DefaultTableType = Record<string, unknown>;\n\ninterface TableInputProps<A extends DefaultTableType> {\n\tname: string;\n\tvalues: A[];\n\tcolumns: Column<A>[];\n\tsetFieldValue: (field: string, value: any, shouldValidate?: boolean | undefined) => void;\n\tcreateRow?: () => A;\n\ttableProps?: TableProps;\n\theaderRowProps?: HeaderGroupPropGetter<A>;\n\theaderCellProps?: HeaderPropGetter<A>;\n\tfooterRowProps?: FooterGroupPropGetter<A>;\n\tfooterCellProps?: FooterPropGetter<A>;\n\tbodyProps?: TableBodyPropGetter<A>;\n\trowProps?: RowPropGetter<A>;\n\tcellProps?: CellPropGetter<A>;\n}\n\ninterface TableInputTableProps<A extends DefaultTableType> extends TableInputProps<A> {\n\tarrayHelpers: FieldArrayRenderProps;\n}\n\nexport interface TableCellProps<D extends DefaultTableType, V = any> extends CellProps<D, V> {\n\tarrayHelpers: FieldArrayRenderProps;\n\taddRow: () => void;\n\tupdateData: (index: number, id: string, value: V) => void;\n\thoverRow: string | number;\n}\n\nfunction TableInputTable<A extends DefaultTableType>(props: TableInputTableProps<A>) {\n\tconst {\n\t\tname,\n\t\tcolumns,\n\t\tvalues,\n\t\tarrayHelpers,\n\t\tsetFieldValue,\n\t\tcreateRow,\n\t\ttableProps,\n\t\theaderRowProps,\n\t\theaderCellProps,\n\t\tbodyProps,\n\t\trowProps,\n\t\tcellProps,\n\t\tfooterCellProps,\n\t\tfooterRowProps,\n\t} = props;\n\tconst cols = useMemo(() => columns, [columns]);\n\tconst vals = useMemo(() => values, [values]);\n\tconst [hoverRow, setHoverRow] = useState('');\n\n\t// React-Table hook\n\tconst {getTableProps, getTableBodyProps, headerGroups, prepareRow, rows, footerGroups} = useTable<A>({\n\t\tcolumns: cols,\n\t\tdata: vals,\n\t\t// @ts-ignore\n\t\tupdateData(rowIndex, columnId, value) {\n\t\t\tsetFieldValue(`${name}[${rowIndex}].${columnId}`, value);\n\t\t},\n\t\taddRow() {\n\t\t\tif (createRow) {\n\t\t\t\tarrayHelpers.push(createRow());\n\t\t\t}\n\t\t},\n\t\tarrayHelpers,\n\t});\n\n\t// @ts-ignore Check for the existence of a Footer that is not the default emptyRenderer()\n\tconst hasFooter = footerGroups.some(fg => fg.headers.some(fgh => fgh.Footer.name !== 'emptyRenderer'));\n\n\t// Build Footer if any footer renderers exist\n\tconst footer = hasFooter ? (\n\t\t<Table.Footer>\n\t\t\t{footerGroups.map(group => (\n\t\t\t\t// eslint-disable-next-line react/jsx-key\n\t\t\t\t<Table.Row {...{...group.getFooterGroupProps(), ...group.getFooterGroupProps(footerRowProps)}}>\n\t\t\t\t\t{group.headers.map(column => (\n\t\t\t\t\t\t// eslint-disable-next-line react/jsx-key\n\t\t\t\t\t\t<Table.HeaderCell {...{...column.getFooterProps(), ...column.getFooterProps(footerCellProps)}}>\n\t\t\t\t\t\t\t{column.render('Footer')}\n\t\t\t\t\t\t</Table.HeaderCell>\n\t\t\t\t\t))}\n\t\t\t\t</Table.Row>\n\t\t\t))}\n\t\t</Table.Footer>\n\t) : null;\n\n\treturn (\n\t\t<Table {...{...getTableProps(), ...getTableProps(tableProps)}}>\n\t\t\t<Table.Header>\n\t\t\t\t{headerGroups.map(headerGroup => (\n\t\t\t\t\t// eslint-disable-next-line react/jsx-key\n\t\t\t\t\t<Table.Row {...{...headerGroup.getHeaderGroupProps(), ...headerGroup.getHeaderGroupProps(headerRowProps)}}>\n\t\t\t\t\t\t{headerGroup.headers.map(column => (\n\t\t\t\t\t\t\t// eslint-disable-next-line react/jsx-key\n\t\t\t\t\t\t\t<Table.HeaderCell {...{...column.getHeaderProps(), ...column.getHeaderProps(headerCellProps)}}>\n\t\t\t\t\t\t\t\t{column.render('Header')}\n\t\t\t\t\t\t\t</Table.HeaderCell>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</Table.Row>\n\t\t\t\t))}\n\t\t\t</Table.Header>\n\t\t\t<Table.Body {...{...getTableBodyProps(), ...getTableBodyProps(bodyProps)}}>\n\t\t\t\t{rows.map(row => {\n\t\t\t\t\tprepareRow(row);\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<Table.Row\n\t\t\t\t\t\t\t{...{...row.getRowProps(), ...row.getRowProps(rowProps)}}\n\t\t\t\t\t\t\tonMouseEnter={() => setHoverRow(row.id)}\n\t\t\t\t\t\t\tonMouseLeave={() => setHoverRow('')}\n\t\t\t\t\t\t\tkey={row.getRowProps().key}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{row.cells.map(cell => (\n\t\t\t\t\t\t\t\t<Table.Cell {...{...cell.getCellProps(), ...cell.getCellProps(cellProps)}} key={cell.getCellProps().key}>\n\t\t\t\t\t\t\t\t\t{cell.render('Cell', {hoverRow})}\n\t\t\t\t\t\t\t\t</Table.Cell>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</Table.Row>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</Table.Body>\n\t\t\t{footer}\n\t\t</Table>\n\t);\n}\n\n/**\n * Can be used in a TForm as a Table Input.\n * @param props\n * @constructor\n */\nexport function TableInput<A extends DefaultTableType>(props: TableInputProps<A>) {\n\treturn <FieldArray name={props.name} render={arrayHelpers => <TableInputTable arrayHelpers={arrayHelpers} {...props} />} />;\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/inputs/TableInput/addRowOnTab.js

@@ -0,0 +1,13 @@
+function addRowOnTab(event, value, props, addRowOnTabIf) {
+  const {
+    row: { index: rowIndex },
+    rows: { length: rowsLength },
+    addRow
+  } = props;
+  if (event.key === "Tab" && !event.shiftKey && rowIndex + 1 === rowsLength && (addRowOnTabIf ? addRowOnTabIf(props, value) : false)) {
+    addRow();
+  }
+}
+
+export { addRowOnTab };
+//# sourceMappingURL=addRowOnTab.js.map

package/dist/esm/inputs/TableInput/addRowOnTab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"addRowOnTab.js","sources":["../../../../src/inputs/TableInput/addRowOnTab.ts"],"sourcesContent":["import type {TableCellProps} from './TableInput';\n\nexport type AddRowOnTabIf<D extends Record<string, unknown>, V = any> = (props: TableCellProps<D, V>, newValue: V) => boolean;\n\n/**\n * Use as an onKeyDown event handler to add a new row when tab is pressed, depending on certain criteria.\n * @param event\n * @param value\n * @param props\n * @param addRowOnTabIf\n */\nexport function addRowOnTab<D extends Record<string, unknown>, V = any>(\n\tevent: KeyboardEvent,\n\tvalue: V,\n\tprops: TableCellProps<D, V>,\n\taddRowOnTabIf?: AddRowOnTabIf<D, V>,\n) {\n\tconst {\n\t\trow: {index: rowIndex},\n\t\trows: {length: rowsLength},\n\t\taddRow,\n\t} = props;\n\n\tif (event.key === 'Tab' && !event.shiftKey && rowIndex + 1 === rowsLength && (addRowOnTabIf ? addRowOnTabIf(props, value) : false)) {\n\t\taddRow();\n\t}\n}\n"],"names":[],"mappings":"AAYC,SAAA,WAAA,CAAA,KAAA,EACA,KACA,EAAA,KAAA,EACA,aACC,EAAA;AACD,EAAM,MAAA;AAAA,IACL,GAAA,EAAK,EAAC,KAAO,EAAA,QAAA,EAAA;AAAA,IACb,IAAA,EAAM,EAAC,MAAQ,EAAA,UAAA,EAAA;AAAA,IACf,MAAA;AAAA,GACG,GAAA,KAAA,CAAA;AAEJ,EAAA,IAAI,KAAM,CAAA,GAAA,KAAQ,KAAS,IAAA,CAAC,MAAM,QAAY,IAAA,QAAA,GAAW,CAAM,KAAA,UAAA,KAA+B,aAAA,GAAA,aAAA,CAAc,KAAO,EAAA,KAAK,IAAI,KAAQ,CAAA,EAAA;AACnI,IAAO,MAAA,EAAA,CAAA;AAAA,GACR;AACD;;;;"}

package/dist/esm/money/MoneyCurrencyInput/MoneyCurrencyInput.js

@@ -0,0 +1,51 @@
+import React, { useCallback } from 'react';
+import { toMoney } from '@thx/money';
+import debug from 'debug';
+import Money from 'js-money';
+import { Input, Label, Dropdown } from 'semantic-ui-react';
+import { useMoneyInput } from '../useMoneyInput.js';
+
+const d = debug("thx.controls.money.MoneyCurrencyInput");
+function MoneyCurrencyInput(props) {
+  const { name, onBlur, prefix, defaultCurrency, onChange, showPrefix, value, wholeNumber, currencies, locked, ...rest } = props;
+  const options = currencies || [
+    { key: "CAD", text: "CAD", value: "CAD" },
+    { key: "USD", text: "USD", value: "USD" }
+  ];
+  const handleChange = useCallback((v) => {
+    if (!v) {
+      onChange && onChange(toMoney(0, defaultCurrency));
+    } else {
+      onChange && onChange(v);
+    }
+  }, [defaultCurrency, onChange]);
+  const val = !(value instanceof Money) && value !== void 0 ? toMoney(value) : value;
+  const [inputElement] = useMoneyInput({ onChange: handleChange, prefix, showPrefix, value: val, wholeNumber });
+  const handleDropdownChange = useCallback((e, v) => {
+    const newCurrencyCode = v.value;
+    const newMoney = new Money(value?.amount || 0, newCurrencyCode);
+    d("Change", value, newCurrencyCode, newMoney);
+    onChange && onChange(newMoney);
+  }, [onChange, value]);
+  const currencyCode = value?.currency || defaultCurrency?.code || "CAD";
+  d("Render", value, currencyCode);
+  return /* @__PURE__ */ React.createElement(Input, {
+    ...rest,
+    labelPosition: "right"
+  }, /* @__PURE__ */ React.createElement("input", {
+    name,
+    ref: inputElement,
+    onBlur,
+    readOnly: locked
+  }), /* @__PURE__ */ React.createElement(Label, {
+    basic: true
+  }, /* @__PURE__ */ React.createElement(Dropdown, {
+    disabled: locked,
+    options,
+    value: currencyCode,
+    onChange: handleDropdownChange
+  })));
+}
+
+export { MoneyCurrencyInput };
+//# sourceMappingURL=MoneyCurrencyInput.js.map

package/dist/esm/money/MoneyCurrencyInput/MoneyCurrencyInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MoneyCurrencyInput.js","sources":["../../../../src/money/MoneyCurrencyInput/MoneyCurrencyInput.tsx"],"sourcesContent":["import {toMoney} from '@thx/money';\n/* eslint-disable jsx-a11y/no-static-element-interactions */\nimport debug from 'debug';\nimport Money, {type CurrencyString} from 'js-money';\nimport {type SyntheticEvent, useCallback} from 'react';\nimport {Dropdown, type DropdownProps, Input, type InputProps, Label} from 'semantic-ui-react';\nimport type {MoneyInputProps} from '../MoneyInput';\nimport {useMoneyInput} from '../useMoneyInput';\n\nconst d = debug('thx.controls.money.MoneyCurrencyInput');\n\nexport interface MoneyCurrencyInputProps extends MoneyInputProps {\n\tcurrencies?: {key: string; value: string; text: string}[];\n}\n\nexport function MoneyCurrencyInput(props: MoneyCurrencyInputProps & Omit<InputProps, 'onChange'>) {\n\tconst {name, onBlur, prefix, defaultCurrency, onChange, showPrefix, value, wholeNumber, currencies, locked, ...rest} = props;\n\n\tconst options = currencies || [\n\t\t{key: 'CAD', text: 'CAD', value: 'CAD'},\n\t\t{key: 'USD', text: 'USD', value: 'USD'},\n\t];\n\n\tconst handleChange = useCallback(\n\t\t(v?: Money) => {\n\t\t\tif (!v) {\n\t\t\t\tonChange && onChange(toMoney(0, defaultCurrency));\n\t\t\t} else {\n\t\t\t\tonChange && onChange(v);\n\t\t\t}\n\t\t},\n\t\t[defaultCurrency, onChange],\n\t);\n\n\tconst val = !(value instanceof Money) && value !== undefined ? toMoney(value) : value;\n\n\tconst [inputElement] = useMoneyInput({onChange: handleChange, prefix, showPrefix, value: val, wholeNumber});\n\n\tconst handleDropdownChange = useCallback(\n\t\t(e: SyntheticEvent<HTMLElement, Event>, v: DropdownProps) => {\n\t\t\tconst newCurrencyCode = v.value as CurrencyString;\n\t\t\tconst newMoney = new Money(value?.amount || 0, newCurrencyCode);\n\n\t\t\td('Change', value, newCurrencyCode, newMoney);\n\t\t\t// setInputValue(newMoney);\n\t\t\tonChange && onChange(newMoney);\n\t\t\t// forceUpdate();\n\t\t},\n\t\t[onChange, value],\n\t);\n\n\tconst currencyCode = value?.currency || defaultCurrency?.code || 'CAD';\n\td('Render', value, currencyCode);\n\n\treturn (\n\t\t<Input {...rest} labelPosition=\"right\">\n\t\t\t<input name={name} ref={inputElement} onBlur={onBlur} readOnly={locked} />\n\t\t\t<Label basic>\n\t\t\t\t<Dropdown disabled={locked} options={options} value={currencyCode} onChange={handleDropdownChange} />\n\t\t\t</Label>\n\t\t</Input>\n\t);\n}\n"],"names":[],"mappings":";;;;;;;AASA,MAAM,CAAA,GAAI,MAAM,uCAAuC,CAAA,CAAA;AAMhD,SAAA,kBAAA,CAA4B,KAA+D,EAAA;AACjG,EAAM,MAAA,EAAC,IAAM,EAAA,MAAA,EAAQ,MAAQ,EAAA,eAAA,EAAiB,QAAU,EAAA,UAAA,EAAY,KAAO,EAAA,WAAA,EAAa,UAAY,EAAA,MAAA,EAAA,GAAW,IAAQ,EAAA,GAAA,KAAA,CAAA;AAEvH,EAAA,MAAM,UAAU,UAAc,IAAA;AAAA,IAC7B,EAAC,GAAK,EAAA,KAAA,EAAO,IAAM,EAAA,KAAA,EAAO,OAAO,KAAK,EAAA;AAAA,IACtC,EAAC,GAAK,EAAA,KAAA,EAAO,IAAM,EAAA,KAAA,EAAO,OAAO,KAAK,EAAA;AAAA,GACvC,CAAA;AAEA,EAAM,MAAA,YAAA,GAAe,WACpB,CAAA,CAAC,CAAc,KAAA;AACd,IAAA,IAAI,CAAC,CAAG,EAAA;AACP,MAAA,QAAA,IAAY,QAAS,CAAA,OAAA,CAAQ,CAAG,EAAA,eAAe,CAAC,CAAA,CAAA;AAAA,KAC1C,MAAA;AACN,MAAA,QAAA,IAAY,SAAS,CAAC,CAAA,CAAA;AAAA,KACvB;AAAA,GAED,EAAA,CAAC,eAAiB,EAAA,QAAQ,CAC3B,CAAA,CAAA;AAEA,EAAM,MAAA,GAAA,GAAM,EAAmB,KAAA,YAAA,KAAA,CAAA,IAAU,UAAU,KAAY,CAAA,GAAA,OAAA,CAAQ,KAAK,CAAI,GAAA,KAAA,CAAA;AAEhF,EAAM,MAAA,CAAC,YAAgB,CAAA,GAAA,aAAA,CAAc,EAAC,QAAA,EAAU,YAAc,EAAA,MAAA,EAAQ,UAAY,EAAA,KAAA,EAAO,GAAK,EAAA,WAAA,EAAY,CAAA,CAAA;AAE1G,EAAA,MAAM,oBAAuB,GAAA,WAAA,CAC5B,CAAC,CAAA,EAAuC,CAAqB,KAAA;AAC5D,IAAA,MAAM,kBAAkB,CAAE,CAAA,KAAA,CAAA;AAC1B,IAAA,MAAM,WAAW,IAAI,KAAA,CAAM,KAAO,EAAA,MAAA,IAAU,GAAG,eAAe,CAAA,CAAA;AAE9D,IAAE,CAAA,CAAA,QAAA,EAAU,KAAO,EAAA,eAAA,EAAiB,QAAQ,CAAA,CAAA;AAE5C,IAAA,QAAA,IAAY,SAAS,QAAQ,CAAA,CAAA;AAAA,GAG9B,EAAA,CAAC,QAAU,EAAA,KAAK,CACjB,CAAA,CAAA;AAEA,EAAA,MAAM,YAAe,GAAA,KAAA,EAAO,QAAY,IAAA,eAAA,EAAiB,IAAQ,IAAA,KAAA,CAAA;AACjE,EAAE,CAAA,CAAA,QAAA,EAAU,OAAO,YAAY,CAAA,CAAA;AAE/B,EAAA,uBACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAU,GAAA,IAAA;AAAA,IAAM,aAAc,EAAA,OAAA;AAAA,GAAA,kBAC7B,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA;AAAA,IAAM,IAAA;AAAA,IAAY,GAAK,EAAA,YAAA;AAAA,IAAc,MAAA;AAAA,IAAgB,QAAU,EAAA,MAAA;AAAA,GAAQ,mBACvE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAM,KAAK,EAAA,IAAA;AAAA,GAAA,kBACV,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA;AAAA,IAAS,QAAU,EAAA,MAAA;AAAA,IAAQ,OAAA;AAAA,IAAkB,KAAO,EAAA,YAAA;AAAA,IAAc,QAAU,EAAA,oBAAA;AAAA,GAAsB,CACpG,CACD,CAAA,CAAA;AAEF;;;;"}