ag-common 0.0.3

package/dist/ui/components/Input/index.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+export declare type InputTypes = 'password' | 'email' | 'text' | 'textarea';
+export declare const Input: ({ label, type, placeholder, required, autoComplete, value, onChange, onKeyPress, id, disabled, className, }: {
+    className?: string | undefined;
+    disabled?: boolean | undefined;
+    id?: string | undefined;
+    label?: string | JSX.Element | undefined;
+    type: InputTypes;
+    placeholder?: string | undefined;
+    required: boolean;
+    autoComplete?: string | undefined;
+    value: string;
+    onChange: (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    onKeyPress?: ((event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void) | undefined;
+}) => JSX.Element;

package/dist/ui/components/Input/index.js

@@ -0,0 +1,54 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Input = void 0;
+const styled_components_1 = __importStar(require("styled-components"));
+const react_1 = __importDefault(require("react"));
+const colours_1 = require("../../styles/colours");
+const inputcss = (0, styled_components_1.css) `
+  font-size: 1.2rem;
+  border: solid 1px ${colours_1.colours.lightCharcoal};
+  border-radius: 0.5rem;
+  padding: 0.5rem;
+  width: calc(100% - 1.5rem);
+  &:disabled {
+    background-color: ${colours_1.colours.darker};
+    cursor: not-allowed;
+  }
+`;
+const SInput = styled_components_1.default.input `
+  ${inputcss}
+`;
+const STextArea = styled_components_1.default.textarea `
+  ${inputcss};
+  resize: none;
+  overflow-y: auto;
+`;
+const Input = ({ label, type, placeholder, required, autoComplete, value, onChange, onKeyPress, id, disabled, className, }) => {
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        id && label ? react_1.default.createElement("label", { htmlFor: id }, label) : '',
+        type === 'textarea' && (react_1.default.createElement(STextArea, { className: className, disabled: disabled, id: id, placeholder: placeholder, required: required, autoComplete: autoComplete, value: value, onChange: onChange, onKeyPress: onKeyPress })),
+        type !== 'textarea' && (react_1.default.createElement(SInput, { className: className, disabled: disabled, id: id, type: type, placeholder: placeholder, required: required, autoComplete: autoComplete, value: value, onChange: onChange, onKeyPress: onKeyPress }))));
+};
+exports.Input = Input;

package/dist/ui/components/Loader/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const Loader: ({ name }: {
+    name: string;
+}) => JSX.Element;

package/dist/ui/components/Loader/index.js

@@ -0,0 +1,69 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Loader = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+const react_1 = __importStar(require("react"));
+const SLoader = styled_components_1.default.div `
+  border: 16px solid #f3f3f3; /* Light grey */
+  border-top: 16px solid #3498db; /* Blue */
+  border-radius: 50%;
+  width: 120px;
+  height: 120px;
+  animation: spin 2s linear infinite;
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+`;
+const LoadingBack = styled_components_1.default.div `
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 100;
+  background-color: rgba(255, 255, 255, 0.8);
+  opacity: 1;
+  &[data-transparent='true'] {
+    opacity: 0.1;
+  }
+  transition: opacity 5s;
+`;
+const Loader = ({ name }) => {
+    const [trans, setTrans] = (0, react_1.useState)(true);
+    (0, react_1.useEffect)(() => {
+        setTrans(false);
+    }, []);
+    return (react_1.default.createElement(LoadingBack, { "data-loading": name, "data-transparent": trans },
+        react_1.default.createElement(SLoader, null)));
+};
+exports.Loader = Loader;

package/dist/ui/components/LoginButton/index.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { TLang, TResource } from '../../../common/helpers/i18n';
+export declare const LoginButton: ({ className, text, invert, title, savePath, lang, pushPath, loginPath, }: {
+    title?: TResource | undefined;
+    invert?: boolean | undefined;
+    text?: TResource | undefined;
+    className?: string | undefined;
+    savePath?: boolean | undefined;
+    lang: TLang;
+    pushPath: (p: string) => void;
+    loginPath: (state?: Record<string, unknown> | undefined) => string;
+}) => JSX.Element;

package/dist/ui/components/LoginButton/index.js

@@ -0,0 +1,32 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LoginButton = void 0;
+const react_1 = __importDefault(require("react"));
+const i18n_1 = require("../../../common/helpers/i18n");
+const Button_1 = require("../Button");
+const text_1 = require("./text");
+const LoginButton = ({ className, text = text_1.getstarted, invert, title, savePath = true, lang, pushPath, loginPath, }) => {
+    const lp = loginPath(!savePath || typeof window === 'undefined'
+        ? undefined
+        : {
+            redirect: window.location.href.substr(window.location.origin.length),
+        });
+    return (react_1.default.createElement(Button_1.Button, { lang: lang, title: title, invert: invert, className: className, onKeyPress: () => __awaiter(void 0, void 0, void 0, function* () {
+            yield pushPath(lp);
+        }), onClick: () => __awaiter(void 0, void 0, void 0, function* () {
+            yield pushPath(lp);
+        }) }, text && (0, i18n_1.t)(text, lang)));
+};
+exports.LoginButton = LoginButton;

package/dist/ui/components/LoginButton/text.d.ts

@@ -0,0 +1,3 @@
+import { TResource } from "../../../common/helpers/i18n";
+export declare const getstarted: TResource;
+export declare const login: TResource;

package/dist/ui/components/LoginButton/text.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.login = exports.getstarted = void 0;
+exports.getstarted = {
+    en: 'Get Started',
+};
+exports.login = {
+    en: 'Log In',
+};

package/dist/ui/components/Modal/Close.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const Close: ({ className, onClick, }: {
+    onClick?: ((ev: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
+    className?: string | undefined;
+}) => JSX.Element;

package/dist/ui/components/Modal/Close.js

@@ -0,0 +1,37 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Close = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+const react_1 = __importDefault(require("react"));
+const SClose = styled_components_1.default.div `
+  position: absolute;
+  width: 32px;
+  height: 32px;
+  opacity: 0.3;
+  cursor: pointer;
+  top: 0;
+  right: 0;
+  &:hover {
+    opacity: 1;
+  }
+  &:before,
+  &:after {
+    position: absolute;
+    left: 15px;
+    content: ' ';
+    height: 33px;
+    width: 2px;
+    background-color: #333;
+  }
+  &:before {
+    transform: rotate(45deg);
+  }
+  &:after {
+    transform: rotate(-45deg);
+  }
+`;
+const Close = ({ className, onClick, }) => react_1.default.createElement(SClose, { className: className, onClick: (e) => onClick === null || onClick === void 0 ? void 0 : onClick(e) });
+exports.Close = Close;

package/dist/ui/components/Modal/index.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+export declare const ModalItem: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Modal: ({ open, setOpen, children, position, topPosition, showCloseButton, closeOnMoveMouseOutside, }: {
+    open: boolean;
+    setOpen: (b: boolean) => void;
+    children: JSX.Element | JSX.Element[];
+    position?: "left" | "center" | "right" | undefined;
+    topPosition?: "center" | "top" | "bottom" | undefined;
+    showCloseButton?: boolean | undefined;
+    closeOnMoveMouseOutside?: boolean | undefined;
+}) => JSX.Element;
+export declare const ModalDropList: (p: {
+    options: (string | JSX.Element)[];
+    onSelect?: ((i: number, e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
+    position?: "left" | "right" | undefined;
+    topPosition?: "top" | "bottom" | undefined;
+    open: boolean;
+    setOpen: (b: boolean) => void;
+    closeOnMoveMouseOutside?: boolean | undefined;
+    showCloseButton?: boolean | undefined;
+}) => JSX.Element;

package/dist/ui/components/Modal/index.js

@@ -0,0 +1,93 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModalDropList = exports.Modal = exports.ModalItem = void 0;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Close_1 = require("./Close");
+const useOnClickOutside_1 = require("../../helpers/useOnClickOutside");
+const FixedBackground = styled_components_1.default.div `
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+const ModalBase = styled_components_1.default.div `
+  position: absolute;
+  z-index: 1;
+  background-color: white;
+  border: solid 1px transparent;
+  border-radius: 0.5rem;
+  box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.6), 0 2px 15px 0 rgba(0, 0, 0, 0.05);
+  &[data-position='left'] {
+    left: 0;
+  }
+  &[data-position='right'] {
+    right: 0;
+  }
+  &[data-topposition='bottom'] {
+    top: 0;
+  }
+  &[data-topposition='top'] {
+    bottom: 0;
+  }
+`;
+exports.ModalItem = styled_components_1.default.div `
+  display: flex;
+  padding: 1rem;
+
+  &:hover {
+    background-color: #eee;
+  }
+`;
+const Modal = ({ open, setOpen, children, position = 'left', topPosition = 'bottom', showCloseButton = true, closeOnMoveMouseOutside = false, }) => {
+    const ref = (0, react_1.useRef)(null);
+    (0, useOnClickOutside_1.useOnClickOutside)({ ref, moveMouseOutside: closeOnMoveMouseOutside }, () => {
+        if (open) {
+            setOpen(false);
+        }
+    });
+    if (!open) {
+        return react_1.default.createElement(react_1.default.Fragment, null);
+    }
+    return (react_1.default.createElement(FixedBackground, null,
+        react_1.default.createElement(ModalBase, { "data-position": position, "data-topposition": topPosition, ref: ref },
+            showCloseButton && react_1.default.createElement(Close_1.Close, { onClick: () => setOpen(false) }),
+            children)));
+};
+exports.Modal = Modal;
+const ModalDropList = (p) => (react_1.default.createElement(exports.Modal, Object.assign({}, p), p.options.map((option, index) => (react_1.default.createElement(exports.ModalItem, { key: option, onClick: (e) => {
+        var _a;
+        e.stopPropagation();
+        e.preventDefault();
+        (_a = p.onSelect) === null || _a === void 0 ? void 0 : _a.call(p, index, e);
+        p.setOpen(false);
+    } }, option)))));
+exports.ModalDropList = ModalDropList;

package/dist/ui/components/RowOrColumn/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const RowOrColumn: React.FC<React.ComponentPropsWithoutRef<'div'> & {
+    noGrow?: boolean;
+    center?: boolean;
+    noWrap?: boolean;
+}>;

package/dist/ui/components/RowOrColumn/index.js

@@ -0,0 +1,40 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RowOrColumn = void 0;
+/* eslint-disable react/destructuring-assignment */
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const media_1 = require("../../styles/media");
+const Base = styled_components_1.default.div `
+  display: flex;
+  flex-flow: row wrap;
+  flex-grow: 1;
+  width: 100%;
+  @media ${media_1.bigScreen} {
+    &[data-nowrap='true'] {
+      flex-flow: row;
+    }
+  }
+
+  @media ${media_1.smallScreen} {
+    flex-flow: column;
+    overflow: unset;
+  }
+
+  &[data-center='true'] {
+    justify-content: center;
+    align-items: center;
+  }
+  &[data-nogrow='true'] {
+    flex-grow: 0;
+    width: auto;
+  }
+`;
+const RowOrColumn = (props) => {
+    var _a, _b, _c;
+    return (react_1.default.createElement(Base, Object.assign({ "data-nogrow": (_a = props.noGrow) !== null && _a !== void 0 ? _a : false, "data-center": (_b = props.center) !== null && _b !== void 0 ? _b : false, "data-nowrap": (_c = props.noWrap) !== null && _c !== void 0 ? _c : false }, props), props.children));
+};
+exports.RowOrColumn = RowOrColumn;

package/dist/ui/components/Table/index.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export interface TableItem {
+    content: JSX.Element;
+    groupTitle: string;
+}
+export declare const Table: ({ children, className, }: {
+    children: TableItem[];
+    className?: string | undefined;
+}) => JSX.Element;

package/dist/ui/components/Table/index.js

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Table = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const groupBy_1 = require("../../../common/helpers/groupBy");
+const Base = styled_components_1.default.div `
+  display: flex;
+  flex-flow: column;
+  width: 100%;
+`;
+const Row = styled_components_1.default.div `
+  border: solid 1px #ccc;
+`;
+const Group = styled_components_1.default.div `
+  display: flex;
+  flex-flow: column;
+`;
+const GroupTitle = styled_components_1.default.div `
+  font-size: 1.5rem;
+`;
+const Table = ({ children, className, }) => {
+    const grouped = (0, groupBy_1.groupByList)(children, (s) => s.groupTitle);
+    return (react_1.default.createElement(Base, { className: className }, grouped.map((group) => (react_1.default.createElement(Group, { key: group.key },
+        react_1.default.createElement(GroupTitle, null, group.key),
+        group.items.map((item) => (react_1.default.createElement(Row, { key: item.content.key }, item.content))))))));
+};
+exports.Table = Table;

package/dist/ui/components/TextEdit/CheckboxEdit.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const CheckboxEdit: ({ defaultValue, onSubmit, }: {
+    defaultValue: boolean;
+    onSubmit: (val: boolean) => void;
+}) => JSX.Element;

package/dist/ui/components/TextEdit/CheckboxEdit.js

@@ -0,0 +1,59 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CheckboxEdit = void 0;
+/* eslint-disable jsx-a11y/no-onchange */
+const react_1 = __importStar(require("react"));
+const images_1 = require("./images");
+const common_1 = require("./common");
+const common_2 = require("../../styles/common");
+const useOnClickOutside_1 = require("../../helpers/useOnClickOutside");
+const styled_components_1 = __importDefault(require("styled-components"));
+const FlexRow_1 = require("../FlexRow");
+const Icons = (0, styled_components_1.default)(FlexRow_1.FlexRow) `
+  position: absolute;
+  top: 0;
+  right: -2rem;
+`;
+const CheckboxEdit = ({ defaultValue, onSubmit, }) => {
+    const ref = (0, react_1.useRef)(null);
+    const [value, setValue] = (0, react_1.useState)(defaultValue);
+    (0, react_1.useEffect)(() => {
+        setValue(defaultValue);
+    }, [defaultValue]);
+    const valueChange = value !== defaultValue;
+    (0, useOnClickOutside_1.useOnClickOutside)({ ref, moveMouseOutside: false }, () => {
+        if (valueChange) {
+            onSubmit(value);
+        }
+    });
+    return (react_1.default.createElement(common_1.ValueBox, Object.assign({}, common_2.noDrag, { ref: ref }),
+        react_1.default.createElement(common_1.ValueInputCB, { type: "checkbox", "data-type": "checkbox", checked: value, onChange: () => setValue(!value), onKeyPress: (e) => e.key === 'Enter' && value !== defaultValue && onSubmit(value) }),
+        react_1.default.createElement(Icons, { center: true },
+            value !== defaultValue && (react_1.default.createElement(common_1.Icon, { style: { right: '2rem' }, onClick: () => value !== defaultValue && onSubmit(value) },
+                react_1.default.createElement(images_1.SaveIcon, null))),
+            value !== defaultValue && (react_1.default.createElement(common_1.Icon, { style: { right: '0.5rem' }, onClick: () => setValue(defaultValue) },
+                react_1.default.createElement(images_1.UndoIcon, null))))));
+};
+exports.CheckboxEdit = CheckboxEdit;

package/dist/ui/components/TextEdit/ColourEdit.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const ColourEdit: ({ defaultValue, onSubmit, }: {
+    defaultValue: string;
+    onSubmit: (val: string) => void;
+}) => JSX.Element;

package/dist/ui/components/TextEdit/ColourEdit.js

@@ -0,0 +1,48 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColourEdit = void 0;
+/* eslint-disable jsx-a11y/no-onchange */
+const react_1 = __importStar(require("react"));
+const images_1 = require("./images");
+const common_1 = require("./common");
+const useOnClickOutside_1 = require("../../helpers/useOnClickOutside");
+const common_2 = require("../../styles/common");
+const ColourEdit = ({ defaultValue, onSubmit, }) => {
+    const ref = (0, react_1.useRef)(null);
+    const [value, setValue] = (0, react_1.useState)(defaultValue);
+    (0, react_1.useEffect)(() => {
+        setValue(defaultValue);
+    }, [defaultValue]);
+    const valueChange = value !== defaultValue;
+    (0, useOnClickOutside_1.useOnClickOutside)({ ref, moveMouseOutside: false }, () => {
+        if (valueChange) {
+            onSubmit(value);
+        }
+    });
+    return (react_1.default.createElement(common_1.ValueBox, Object.assign({}, common_2.noDrag, { ref: ref }),
+        react_1.default.createElement("input", { type: "color", size: 5, value: value, onChange: (v) => setValue(v.target.value) }),
+        value !== defaultValue && (react_1.default.createElement(common_1.Icon, { style: { right: '2rem' }, onClick: () => valueChange && onSubmit(value.trim()) },
+            react_1.default.createElement(images_1.SaveIcon, null))),
+        valueChange && (react_1.default.createElement(common_1.Icon, { style: { right: '0.5rem' }, onClick: () => setValue(defaultValue) },
+            react_1.default.createElement(images_1.UndoIcon, null)))));
+};
+exports.ColourEdit = ColourEdit;

package/dist/ui/components/TextEdit/ListboxEdit.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare const ListboxEdit: ({ defaultValue, onSubmit, values, }: {
+    defaultValue: string;
+    onSubmit: (val: string[]) => void;
+    values: string[];
+}) => JSX.Element;

package/dist/ui/components/TextEdit/ListboxEdit.js

@@ -0,0 +1,41 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ListboxEdit = void 0;
+/* eslint-disable jsx-a11y/no-onchange */
+const react_1 = __importStar(require("react"));
+const images_1 = require("./images");
+const common_1 = require("./common");
+const common_2 = require("../../styles/common");
+const ListboxEdit = ({ defaultValue, onSubmit, values, }) => {
+    const [value, setValue] = (0, react_1.useState)(defaultValue);
+    (0, react_1.useEffect)(() => {
+        setValue(defaultValue);
+    }, [defaultValue]);
+    return (react_1.default.createElement(common_1.ValueBox, Object.assign({}, common_2.noDrag),
+        react_1.default.createElement("select", { size: 5, value: value, onChange: (v) => setValue(v.target.value) }, values.map((v) => (react_1.default.createElement("option", { key: v, value: v }, v)))),
+        value !== defaultValue && (react_1.default.createElement(common_1.Icon, { style: { right: '2rem' }, onClick: () => value !== defaultValue &&
+                onSubmit(value.split(',').map((s) => s.trim())) },
+            react_1.default.createElement(images_1.SaveIcon, null))),
+        value !== defaultValue && (react_1.default.createElement(common_1.Icon, { style: { right: '0.5rem' }, onClick: () => setValue(defaultValue) },
+            react_1.default.createElement(images_1.UndoIcon, null)))));
+};
+exports.ListboxEdit = ListboxEdit;

package/dist/ui/components/TextEdit/TextEdit.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+export declare const TextEdit: ({ defaultValue, defaultEditing, onSubmit, canEdit, placeholder, onEditingChange, onClickOutsideWithNoValue, onClickNotEditing, className, singleLine, }: {
+    singleLine?: boolean | undefined;
+    className?: string | undefined;
+    defaultValue: string;
+    defaultEditing?: boolean | undefined;
+    onSubmit: (val: string) => void;
+    canEdit?: boolean | undefined;
+    placeholder?: string | undefined;
+    onEditingChange?: ((editing: boolean) => void) | undefined;
+    onClickOutsideWithNoValue?: (() => void) | undefined;
+    onClickNotEditing?: (() => void) | undefined;
+}) => JSX.Element;