@mrfylke/contact-form 0.1.3

package/lib/components/form/index.js

@@ -0,0 +1,28 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getStopOptions = exports.getLineOptions = exports.SearchableSelect = exports.TimeSelector = exports.DateSelector = exports.Textarea = exports.Select = exports.Radio = exports.Input = exports.Fieldset = exports.FileInput = exports.FieldWrapperWithError = void 0;
+var field_wrapper_with_error_1 = require("./field-wrapper-with-error");
+Object.defineProperty(exports, "FieldWrapperWithError", { enumerable: true, get: function () { return __importDefault(field_wrapper_with_error_1).default; } });
+var file_input_1 = require("./file-input");
+Object.defineProperty(exports, "FileInput", { enumerable: true, get: function () { return __importDefault(file_input_1).default; } });
+var fieldset_1 = require("./fieldset");
+Object.defineProperty(exports, "Fieldset", { enumerable: true, get: function () { return __importDefault(fieldset_1).default; } });
+var input_1 = require("./input");
+Object.defineProperty(exports, "Input", { enumerable: true, get: function () { return __importDefault(input_1).default; } });
+var radio_1 = require("./radio");
+Object.defineProperty(exports, "Radio", { enumerable: true, get: function () { return __importDefault(radio_1).default; } });
+var select_1 = require("./select");
+Object.defineProperty(exports, "Select", { enumerable: true, get: function () { return __importDefault(select_1).default; } });
+var textarea_1 = require("./textarea");
+Object.defineProperty(exports, "Textarea", { enumerable: true, get: function () { return __importDefault(textarea_1).default; } });
+var date_selector_1 = require("./date-selector");
+Object.defineProperty(exports, "DateSelector", { enumerable: true, get: function () { return __importDefault(date_selector_1).default; } });
+var time_selector_1 = require("./time-selector");
+Object.defineProperty(exports, "TimeSelector", { enumerable: true, get: function () { return __importDefault(time_selector_1).default; } });
+var searchable_select_1 = require("./searchable-select");
+Object.defineProperty(exports, "SearchableSelect", { enumerable: true, get: function () { return searchable_select_1.SearchableSelect; } });
+Object.defineProperty(exports, "getLineOptions", { enumerable: true, get: function () { return searchable_select_1.getLineOptions; } });
+Object.defineProperty(exports, "getStopOptions", { enumerable: true, get: function () { return searchable_select_1.getStopOptions; } });

package/lib/components/form/input.d.ts

@@ -0,0 +1,17 @@
+import React, { ChangeEvent } from 'react';
+import { TranslatedString } from "../../translations";
+type InputProps = {
+    id: string;
+    label: string;
+    modalContent?: {
+        description?: string;
+        instruction?: string;
+        bulletPoints?: string[];
+    };
+    isRequired?: boolean;
+    errorMessage?: TranslatedString;
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+} & React.JSX.IntrinsicElements['input'];
+export declare const Input: ({ id, label, errorMessage, type, name, checked, value, modalContent, disabled, onChange, placeholder, isRequired, }: InputProps) => import("react/jsx-runtime").JSX.Element;
+export default Input;
+//# sourceMappingURL=input.d.ts.map

package/lib/components/form/input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/components/form/input.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAC,WAAW,EAAW,MAAM,OAAO,CAAC;AAGnD,OAAO,EAAW,gBAAgB,EAAiB,MAAM,oBAAoB,CAAC;AAM9E,KAAK,UAAU,GAAG;IACd,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE;QACX,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;KAC3B,CAAC;IACF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,gBAAgB,CAAC;IAChC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CAC7D,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC;AAEzC,eAAO,MAAM,KAAK,GAAI,qHAaG,UAAU,4CAgElC,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/lib/components/form/input.js

@@ -0,0 +1,42 @@
+"use strict";
+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 jsx_runtime_1 = require("react/jsx-runtime");
+const form_module_css_1 = __importDefault(require("./form.module.css"));
+const react_1 = require("react");
+const description_modal_1 = __importDefault(require("./description-modal"));
+const form_component_label_1 = __importDefault(require("./form-component-label"));
+const translations_1 = require("../../translations");
+const css_1 = require("../../utils/css");
+const button_1 = require("../button");
+const icon_1 = require("../icon");
+const error_message_1 = require("../error-message");
+const Input = ({ id, label, errorMessage, type, name, checked, value, modalContent, disabled, onChange, placeholder, isRequired, }) => {
+    const { t } = (0, translations_1.useTranslation)();
+    const [isModalOpen, setIsModalOpen] = (0, react_1.useState)(false);
+    const isModalContentProvided = hasModalContent(modalContent);
+    const displayDescriptionModal = isModalOpen && isModalContentProvided;
+    const toggleModalState = () => {
+        setIsModalOpen(!isModalOpen);
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, css_1.andIf)({
+            [form_module_css_1.default.container]: true,
+            [form_module_css_1.default.rowDisplay]: type === 'checkbox' || type === 'submit',
+        }), children: [(0, jsx_runtime_1.jsxs)("div", { className: form_module_css_1.default.label_container, children: [(0, jsx_runtime_1.jsx)(form_component_label_1.default, { label: label, htmlFor: `input__${id}`, disabled: disabled, isRequired: isRequired }), isModalContentProvided && ((0, jsx_runtime_1.jsx)(button_1.Button, { className: form_module_css_1.default.iconButton, onClick: toggleModalState, icon: { right: (0, jsx_runtime_1.jsx)(icon_1.MonoIcon, { icon: 'status/Info' }) }, buttonProps: {
+                            'aria-label': t(translations_1.PageText.Contact.components.modal.moreInformation(label)),
+                        } }))] }), (0, jsx_runtime_1.jsx)("input", { id: `input__${id}`, type: type, name: name, className: (0, css_1.andIf)({
+                    [form_module_css_1.default.input]: true,
+                    [form_module_css_1.default.input__error]: !!errorMessage,
+                }), checked: checked, value: value, disabled: disabled, onChange: onChange, placeholder: placeholder, "aria-invalid": !!errorMessage, "aria-describedby": errorMessage ? `error-input__${id}` : undefined }), errorMessage && (0, jsx_runtime_1.jsx)(error_message_1.ErrorMessage, { message: t(errorMessage), id: `error-input__${id}` }), displayDescriptionModal && ((0, jsx_runtime_1.jsx)(description_modal_1.default, { title: label, modalContent: modalContent || {}, isModalOpen: isModalOpen, closeModal: toggleModalState }))] }));
+};
+exports.Input = Input;
+exports.default = exports.Input;
+function hasModalContent(content) {
+    return !!(content &&
+        (content.description ||
+            content.instruction ||
+            (content.bulletPoints && content.bulletPoints?.length > 0)));
+}

package/lib/components/form/radio.d.ts

@@ -0,0 +1,7 @@
+import React, { ChangeEvent } from 'react';
+export type RadioInputProps = {
+    label: string;
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+} & React.JSX.IntrinsicElements['input'];
+export default function Radio({ onChange, checked, label, value, name, }: RadioInputProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=radio.d.ts.map

package/lib/components/form/radio.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.d.ts","sourceRoot":"","sources":["../../../src/components/form/radio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,WAAW,EAAQ,MAAM,OAAO,CAAC;AAIhD,MAAM,MAAM,eAAe,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CAC7D,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC;AAEzC,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EACI,QAAQ,EACR,OAAO,EACP,KAAK,EACL,KAAK,EACL,IAAI,GACP,EAAE,eAAe,2CAoB/C"}

package/lib/components/form/radio.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = Radio;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const form_module_css_1 = __importDefault(require("./form.module.css"));
+const typography_1 = require("../typography");
+function Radio({ onChange, checked, label, value, name, }) {
+    const id = (0, react_1.useId)();
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("input", { id: id, type: "radio", onChange: onChange, value: value, checked: checked, name: name, className: form_module_css_1.default.input__radio }), (0, jsx_runtime_1.jsxs)("label", { htmlFor: id, className: form_module_css_1.default.label__radio, children: [(0, jsx_runtime_1.jsx)("span", { className: form_module_css_1.default.label__radioBox }), (0, jsx_runtime_1.jsx)(typography_1.Typo.span, { textType: "body__m", children: label })] })] }));
+}

package/lib/components/form/searchable-select/index.d.ts

@@ -0,0 +1,3 @@
+export { default as SearchableSelect } from './searchable-select';
+export { getLineOptions, getStopOptions } from './utils';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/form/searchable-select/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/form/searchable-select/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,IAAI,gBAAgB,EAAC,MAAM,qBAAqB,CAAC;AAChE,OAAO,EAAC,cAAc,EAAE,cAAc,EAAC,MAAM,SAAS,CAAC"}

package/lib/components/form/searchable-select/index.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getStopOptions = exports.getLineOptions = exports.SearchableSelect = void 0;
+var searchable_select_1 = require("./searchable-select");
+Object.defineProperty(exports, "SearchableSelect", { enumerable: true, get: function () { return __importDefault(searchable_select_1).default; } });
+var utils_1 = require("./utils");
+Object.defineProperty(exports, "getLineOptions", { enumerable: true, get: function () { return utils_1.getLineOptions; } });
+Object.defineProperty(exports, "getStopOptions", { enumerable: true, get: function () { return utils_1.getStopOptions; } });

package/lib/components/form/searchable-select/searchable-select.d.ts

@@ -0,0 +1,18 @@
+export type Option<T> = {
+    id: string;
+    name: string;
+    value: T;
+};
+export type SearchableSelectProps<T> = {
+    id: string;
+    label: string;
+    value?: T;
+    placeholder: string;
+    isDisabled?: boolean;
+    isRequired?: boolean;
+    options: Option<T>[];
+    error?: string;
+    onChange: (value?: T) => void;
+};
+export default function SearchableSelect<T>({ id, label, value, placeholder, isDisabled, isRequired, options, error, onChange, }: SearchableSelectProps<T>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=searchable-select.d.ts.map

package/lib/components/form/searchable-select/searchable-select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"searchable-select.d.ts","sourceRoot":"","sources":["../../../../src/components/form/searchable-select/searchable-select.tsx"],"names":[],"mappings":"AAiBA,MAAM,MAAM,MAAM,CAAC,CAAC,IAAI;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,CAAC,CAAA;CAAE,CAAC;AAC/D,MAAM,MAAM,qBAAqB,CAAC,CAAC,IAAI;IACnC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,CAAC,CAAC;IACV,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,IAAI,CAAC;CACjC,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,CAAC,EAAE,EACI,EAAE,EACF,KAAK,EACL,KAAK,EACL,WAAW,EACX,UAAU,EACV,UAAU,EACV,OAAO,EACP,KAAK,EACL,QAAQ,GACX,EAAE,qBAAqB,CAAC,CAAC,CAAC,2CAgItE"}

package/lib/components/form/searchable-select/searchable-select.js

@@ -0,0 +1,55 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = SearchableSelect;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const form_module_css_1 = __importDefault(require("../form.module.css"));
+const react_aria_components_1 = require("react-aria-components");
+const form_component_label_1 = __importDefault(require("../form-component-label"));
+const css_1 = require("../../../utils/css");
+const icon_1 = require("../../icon");
+const error_message_1 = require("../../error-message");
+function SearchableSelect({ id, label, value, placeholder, isDisabled, isRequired, options, error, onChange, }) {
+    const showError = !!error;
+    const [inputValue, setInputValue] = (0, react_1.useState)('');
+    const [focused, setFocused] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        if (value === undefined && !focused && inputValue !== '') {
+            setInputValue('');
+        }
+    }, [value, focused, inputValue]);
+    const handleFocus = () => {
+        setFocused(true);
+    };
+    const handleBlur = () => {
+        setFocused(false);
+    };
+    const filteredOptions = options.filter((item) => item.name
+        .toLowerCase()
+        .replace(/\s+/g, '') // Remove all white spaces from item name
+        .includes(inputValue.toLowerCase().replace(/\s+/g, '')));
+    const getOptionBySelector = (key) => options.find((option) => option.id.toLowerCase() === key.toLowerCase());
+    const getOptionBySearch = (input) => {
+        return options.find((option) => option.name.toLowerCase() === input.toLowerCase());
+    };
+    const handleSelectionChange = (key) => {
+        if (key === null)
+            return;
+        const keyString = key.toString();
+        const option = getOptionBySelector(keyString);
+        setInputValue(option?.name || keyString);
+        onChange(option?.value);
+    };
+    const handleInputChange = (inputValue) => {
+        const option = getOptionBySearch(inputValue);
+        setInputValue(option?.name || inputValue);
+        onChange(option?.value);
+    };
+    return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.ComboBox, { items: filteredOptions, isDisabled: isDisabled, onSelectionChange: handleSelectionChange, className: form_module_css_1.default.searchable_select__comboBox, "aria-label": label, "aria-labelledby": `label-${id}`, children: [(0, jsx_runtime_1.jsx)(form_component_label_1.default, { label: label, htmlFor: `searchable-select-${id}`, disabled: isDisabled, isRequired: isRequired }), (0, jsx_runtime_1.jsxs)(react_aria_components_1.Group, { className: form_module_css_1.default.searchable_select__group, children: [(0, jsx_runtime_1.jsx)(react_aria_components_1.Input, { id: `searchable_select__${id}`, placeholder: placeholder, className: (0, css_1.andIf)({
+                            [form_module_css_1.default.searchable_select__input]: true,
+                            [form_module_css_1.default.searchable_select__input_disabled]: !!isDisabled,
+                        }), value: inputValue, onChange: (e) => handleInputChange(e.target.value), onFocus: handleFocus, onBlur: handleBlur }), (0, jsx_runtime_1.jsx)(react_aria_components_1.Button, { className: form_module_css_1.default.searchable_select__button, children: (0, jsx_runtime_1.jsx)(icon_1.MonoIcon, { icon: 'navigation/ExpandMore' }) })] }), (0, jsx_runtime_1.jsx)(react_aria_components_1.Popover, { className: form_module_css_1.default.searchable_select__popover, children: (0, jsx_runtime_1.jsxs)(react_aria_components_1.ListBox, { className: form_module_css_1.default.searchable_select__listBox, children: [(0, jsx_runtime_1.jsx)(react_aria_components_1.ListBoxItem, { textValue: placeholder, isDisabled: true, className: form_module_css_1.default.searchable_select__listBoxItem, children: (0, jsx_runtime_1.jsxs)("div", { className: form_module_css_1.default.searchable_select__item, children: [(0, jsx_runtime_1.jsx)("span", { className: form_module_css_1.default.searchable_select__truncate, children: placeholder }), (0, jsx_runtime_1.jsx)("span", { children: !value && (0, jsx_runtime_1.jsx)(icon_1.MonoIcon, { icon: 'actions/Confirm' }) })] }) }), filteredOptions.map((item) => ((0, jsx_runtime_1.jsx)(react_aria_components_1.ListBoxItem, { id: item.id, textValue: item.name, className: form_module_css_1.default.searchable_select__listBoxItem, children: ({ isSelected, isFocused }) => ((0, jsx_runtime_1.jsxs)("div", { className: `${form_module_css_1.default.searchable_select__item} ${isFocused ? form_module_css_1.default.searchable_select__highlight : ''} ${isSelected && value ? form_module_css_1.default.searchable_select__selected : ''}`, children: [(0, jsx_runtime_1.jsx)("span", { className: form_module_css_1.default.searchable_select__truncate, children: item.name }), (0, jsx_runtime_1.jsx)("span", { children: value && isSelected && ((0, jsx_runtime_1.jsx)(icon_1.MonoIcon, { icon: 'actions/Confirm' })) })] })) }, item.id)))] }) }), showError && (0, jsx_runtime_1.jsx)(error_message_1.ErrorMessage, { message: error })] }));
+}

package/lib/components/form/searchable-select/utils.d.ts

@@ -0,0 +1,5 @@
+import { Option } from './searchable-select';
+import { Line } from "../../../server/journey-planner/validators";
+export declare const getLineOptions: (lines: Line[]) => Option<Line>[];
+export declare const getStopOptions: (stops: Line["quays"]) => Option<Line["quays"][0]>[];
+//# sourceMappingURL=utils.d.ts.map

package/lib/components/form/searchable-select/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/components/form/searchable-select/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,MAAM,EAAC,MAAM,qBAAqB,CAAC;AAC3C,OAAO,EAAC,IAAI,EAAC,MAAM,4CAA4C,CAAC;AAEhE,eAAO,MAAM,cAAc,GAAI,OAAO,IAAI,EAAE,KAAG,MAAM,CAAC,IAAI,CAAC,EAM1D,CAAC;AAEF,eAAO,MAAM,cAAc,GACvB,OAAO,IAAI,CAAC,OAAO,CAAC,KACrB,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,EAM1B,CAAC"}

package/lib/components/form/searchable-select/utils.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getStopOptions = exports.getLineOptions = void 0;
+const getLineOptions = (lines) => {
+    return lines.map((line) => ({
+        id: line.id,
+        name: line.publicCode ? `${line.publicCode} - ${line.name}` : line.name,
+        value: line,
+    }));
+};
+exports.getLineOptions = getLineOptions;
+const getStopOptions = (stops) => {
+    return stops.map((stop) => ({
+        id: stop.id,
+        name: stop.name,
+        value: stop,
+    }));
+};
+exports.getStopOptions = getStopOptions;

package/lib/components/form/select.d.ts

@@ -0,0 +1,15 @@
+export type SelectProps<T> = {
+    id: string;
+    label?: string;
+    onChange: (value?: T) => void;
+    error?: string;
+    value?: T;
+    options: T[];
+    valueToId: (val: T) => string;
+    valueToText: (val: T) => string;
+    placeholder?: string;
+    disabled?: boolean;
+    isRequired?: boolean;
+};
+export default function CustomSelect<T>({ id, label, onChange, error, value, options, valueToId, valueToText, placeholder, disabled, isRequired, }: SelectProps<T>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=select.d.ts.map

package/lib/components/form/select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/components/form/select.tsx"],"names":[],"mappings":"AAaA,MAAM,MAAM,WAAW,CAAC,CAAC,IAAI;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,IAAI,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,CAAC,CAAC;IACV,OAAO,EAAE,CAAC,EAAE,CAAC;IACb,SAAS,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,MAAM,CAAC;IAC9B,WAAW,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,MAAM,CAAC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,CAAC,EAAE,EACI,EAAE,EACF,KAAK,EACL,QAAQ,EACR,KAAK,EACL,KAAK,EACL,OAAO,EACP,SAAS,EACT,WAAW,EACX,WAAW,EACX,QAAQ,EACR,UAAU,GACb,EAAE,WAAW,CAAC,CAAC,CAAC,2CAoFxD"}

package/lib/components/form/select.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = CustomSelect;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const form_module_css_1 = __importDefault(require("./form.module.css"));
+const react_aria_components_1 = require("react-aria-components");
+const form_component_label_1 = __importDefault(require("./form-component-label"));
+const icon_1 = require("../icon");
+const error_message_1 = require("../error-message");
+function CustomSelect({ id, label, onChange, error, value, options, valueToId, valueToText, placeholder, disabled, isRequired, }) {
+    const showError = !!error;
+    const findItemFromOptions = (key) => options.find((option) => valueToId(option).toLowerCase() === key.toLowerCase());
+    const onChangeInternal = (key) => {
+        if (key === null)
+            return;
+        onChange(findItemFromOptions(key.toString()));
+    };
+    return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.Select, { id: `select__${id}`, onSelectionChange: onChangeInternal, isDisabled: disabled, className: form_module_css_1.default.select__select_container, "aria-label": label, "aria-labelledby": `label-${id}`, children: [label && ((0, jsx_runtime_1.jsx)(form_component_label_1.default, { label: label, htmlFor: `select-${id}`, disabled: disabled, isRequired: isRequired })), (0, jsx_runtime_1.jsxs)(react_aria_components_1.Button, { className: form_module_css_1.default.select__button, children: [value ? ((0, jsx_runtime_1.jsx)("span", { children: valueToText(value) })) : ((0, jsx_runtime_1.jsx)("span", { className: `${form_module_css_1.default.select__placeholder} ${disabled ? form_module_css_1.default.label_disabled : ''}`, children: placeholder })), (0, jsx_runtime_1.jsx)(icon_1.MonoIcon, { icon: 'navigation/ExpandMore' })] }), (0, jsx_runtime_1.jsx)(react_aria_components_1.Popover, { className: form_module_css_1.default.select__popover, children: (0, jsx_runtime_1.jsxs)(react_aria_components_1.ListBox, { className: form_module_css_1.default.select__listBox, children: [(0, jsx_runtime_1.jsx)(react_aria_components_1.ListBoxItem, { isDisabled: true, textValue: placeholder, className: form_module_css_1.default.select__listBoxItem, children: (0, jsx_runtime_1.jsxs)("div", { className: form_module_css_1.default.select__item, children: [(0, jsx_runtime_1.jsx)("span", { className: form_module_css_1.default.select__placholder, children: placeholder }), !value && (0, jsx_runtime_1.jsx)(icon_1.MonoIcon, { icon: 'actions/Confirm' })] }) }), options.map((option) => ((0, jsx_runtime_1.jsx)(react_aria_components_1.ListBoxItem, { id: `${valueToId(option)}`, textValue: valueToText(option), className: form_module_css_1.default.select__listBoxItem, children: ({ isSelected, isFocused }) => ((0, jsx_runtime_1.jsxs)("div", { className: `${form_module_css_1.default.select__item} ${isFocused ? form_module_css_1.default.select__highlight : ''}`, children: [(0, jsx_runtime_1.jsx)("span", { children: valueToText(option) }), (0, jsx_runtime_1.jsx)("span", { children: value && isSelected ? ((0, jsx_runtime_1.jsx)(icon_1.MonoIcon, { icon: 'actions/Confirm' })) : ('\u00A0') })] })) }, `key-option-${valueToId(option)}`)))] }) }), showError && (0, jsx_runtime_1.jsx)(error_message_1.ErrorMessage, { message: error })] }));
+}

package/lib/components/form/textarea.d.ts

@@ -0,0 +1,11 @@
+import { FileInputProps } from './file-input';
+export type CheckboxProps = {
+    description?: string;
+    value: string;
+    error?: string;
+    isRequired?: boolean;
+    fileInputProps?: FileInputProps;
+    onChange: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
+} & React.JSX.IntrinsicElements['textarea'];
+export default function Textarea({ id, description, onChange, error, isRequired, value, fileInputProps, }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=textarea.d.ts.map

package/lib/components/form/textarea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../src/components/form/textarea.tsx"],"names":[],"mappings":"AACA,OAAkB,EAAC,cAAc,EAAC,MAAM,cAAc,CAAC;AAKvD,MAAM,MAAM,aAAa,GAAG;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,mBAAmB,CAAC,KAAK,IAAI,CAAC;CACrE,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,UAAU,CAAC,CAAC;AAE5C,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EACI,EAAE,EACF,WAAW,EACX,QAAQ,EACR,KAAK,EACL,UAAkB,EAClB,KAAK,EACL,cAAc,GACjB,EAAE,aAAa,2CAyBhD"}

package/lib/components/form/textarea.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = Textarea;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const form_module_css_1 = __importDefault(require("./form.module.css"));
+const file_input_1 = __importDefault(require("./file-input"));
+const typography_1 = require("../typography");
+const css_1 = require("../../utils/css");
+const error_message_1 = require("../error-message");
+function Textarea({ id, description, onChange, error, isRequired = false, value, fileInputProps, }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: form_module_css_1.default.textarea_container, children: [description && ((0, jsx_runtime_1.jsx)(typography_1.Typo.p, { textType: "body__m", className: (0, css_1.andIf)({
+                    [form_module_css_1.default.required]: isRequired,
+                }), children: description })), (0, jsx_runtime_1.jsx)("textarea", { id: `textarea__${id}`, className: form_module_css_1.default.textarea, value: value, onChange: onChange, "aria-invalid": !!error, "aria-describedby": error ? `error-textarea__${id}` : undefined }), fileInputProps && (0, jsx_runtime_1.jsx)(file_input_1.default, { ...fileInputProps }), error && (0, jsx_runtime_1.jsx)(error_message_1.ErrorMessage, { message: error, id: `error-textarea__${id}` })] }));
+}

package/lib/components/form/time-selector.d.ts

@@ -0,0 +1,11 @@
+import { TranslatedString } from "../../translations";
+export type TimeSelectorProps = {
+    id: string;
+    label: string;
+    value?: string;
+    isRequired?: boolean;
+    errorMessage?: TranslatedString;
+    onChange: (value: string) => void;
+};
+export default function TimeSelector({ id, label, value, isRequired, errorMessage, onChange, }: TimeSelectorProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=time-selector.d.ts.map

package/lib/components/form/time-selector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-selector.d.ts","sourceRoot":"","sources":["../../../src/components/form/time-selector.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAC,gBAAgB,EAAiB,MAAM,oBAAoB,CAAC;AAGpE,MAAM,MAAM,iBAAiB,GAAG;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,gBAAgB,CAAC;IAChC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC,CAAC;AACF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACI,EAAE,EACF,KAAK,EACL,KAAK,EACL,UAAU,EACV,YAAY,EACZ,QAAQ,GACX,EAAE,iBAAiB,2CAwCxD"}

package/lib/components/form/time-selector.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = TimeSelector;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const form_module_css_1 = __importDefault(require("./form.module.css"));
+const date_1 = require("@internationalized/date");
+const react_aria_components_1 = require("react-aria-components");
+const form_component_label_1 = __importDefault(require("./form-component-label"));
+const translations_1 = require("../../translations");
+const error_message_1 = require("../error-message");
+function TimeSelector({ id, label, value, isRequired, errorMessage, onChange, }) {
+    const { t } = (0, translations_1.useTranslation)();
+    const parsedValue = value ? (0, date_1.parseTime)(value) : undefined;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: form_module_css_1.default.timeSelectorContainer, children: [(0, jsx_runtime_1.jsxs)(react_aria_components_1.TimeField, { id: `time_selector__${id}`, value: parsedValue, onChange: (change) => {
+                    if (!change)
+                        return;
+                    onChange(change.toString());
+                }, hourCycle: 24, shouldForceLeadingZeros: true, className: form_module_css_1.default.timeSelector, "data-testid": "searchTimeSelector-time", granularity: "minute", "aria-label": label, "aria-labelledby": `label-${id}`, children: [(0, jsx_runtime_1.jsx)(form_component_label_1.default, { label: label, htmlFor: `time-selector-${id}`, isRequired: isRequired }), (0, jsx_runtime_1.jsx)(react_aria_components_1.DateInput, { className: form_module_css_1.default.timeSelectorInput, children: (segment) => ((0, jsx_runtime_1.jsx)(react_aria_components_1.DateSegment, { className: form_module_css_1.default.timeSelectorSegment, segment: segment })) })] }), (0, jsx_runtime_1.jsx)("input", { id: `time_selector__${id}`, type: "hidden", value: value ?? '' }), errorMessage && (0, jsx_runtime_1.jsx)(error_message_1.ErrorMessage, { message: t(errorMessage) })] }));
+}

package/lib/components/icon/checkbox-icon.d.ts

@@ -0,0 +1,14 @@
+import { SizeProps } from './utils';
+export type CheckboxIconProps = Pick<React.JSX.IntrinsicElements['div'], 'className' | 'role'> & {
+    /**
+     * Size for icon
+     * @default normal
+     */
+    size?: SizeProps;
+    /**
+     * Is the checkbox checked?
+     */
+    checked: boolean;
+};
+export declare function CheckBoxIcon({ checked, size, ...props }: CheckboxIconProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=checkbox-icon.d.ts.map

package/lib/components/icon/checkbox-icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-icon.d.ts","sourceRoot":"","sources":["../../../src/components/icon/checkbox-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAU,MAAM,SAAS,CAAC;AAuD3C,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAChC,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAClC,WAAW,GAAG,MAAM,CACvB,GAAG;IACA;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,wBAAgB,YAAY,CAAC,EACI,OAAO,EACP,IAAe,EACf,GAAG,KAAK,EACX,EAAE,iBAAiB,2CAahD"}

package/lib/components/icon/checkbox-icon.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CheckBoxIcon = CheckBoxIcon;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("./utils");
+const theme_1 = require("../../modules/theme");
+function CheckboxCheckedIcon({ width, height, fill, }) {
+    return ((0, jsx_runtime_1.jsx)("svg", { width: width, height: height, viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.49994 2.91992C4.96994 2.91992 2.91992 4.96992 2.91992 7.49992V32.4999C2.91992 35.0299 4.96994 37.0799 7.49994 37.0799H32.4999C35.0299 37.0799 37.0799 35.0299 37.0799 32.4999V7.49992C37.0799 4.96992 35.0299 2.91992 32.4999 2.91992H7.49994ZM27.9399 16.0699C28.5299 15.3599 28.4299 14.3099 27.7299 13.7199C27.0199 13.1299 25.9699 13.2299 25.3799 13.9299L18.2099 22.5299L15.3299 19.6499C14.6799 18.9999 13.6199 18.9999 12.9699 19.6499C12.3199 20.2999 12.3199 21.3599 12.9699 22.0099L17.1399 26.1799C17.4699 26.5099 17.9299 26.6899 18.3899 26.6699C18.8599 26.6499 19.2899 26.4299 19.5899 26.0699L27.9199 16.0699H27.9399Z", fill: fill }) }));
+}
+function CheckboxUncheckedIcon({ width, height, fill, }) {
+    return ((0, jsx_runtime_1.jsx)("svg", { width: width, height: height, viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { d: "M31.6649 36.2449H8.33487C5.80487 36.2449 3.75488 34.1849 3.75488 31.6649V8.33488C3.75488 5.80488 5.81487 3.75488 8.33487 3.75488H31.6649C34.1949 3.75488 36.2449 5.81488 36.2449 8.33488V31.6649C36.2449 34.1949 34.1849 36.2449 31.6649 36.2449ZM8.32486 6.24488C7.17486 6.24488 6.24487 7.17489 6.24487 8.32489V31.6549C6.24487 32.8049 7.17486 33.7349 8.32486 33.7349H31.6549C32.8049 33.7349 33.7349 32.8049 33.7349 31.6549V8.32489C33.7349 7.17489 32.8049 6.24488 31.6549 6.24488H8.32486Z", fill: fill }) }));
+}
+function CheckBoxIcon({ checked, size = 'normal', ...props }) {
+    const { theme } = (0, theme_1.useTheme)();
+    const wh = (0, utils_1.useSize)(size);
+    const Icon = checked ? CheckboxCheckedIcon : CheckboxUncheckedIcon;
+    return ((0, jsx_runtime_1.jsx)(Icon, { width: wh, height: wh, fill: theme.color.interactive.primary.default.background }));
+}

package/lib/components/icon/color-icon.d.ts

@@ -0,0 +1,17 @@
+import { ColorIcons } from './generated-icons';
+import { SizeProps } from './utils';
+export type { SizeProps };
+export type { ColorIcons } from './generated-icons';
+export type ColorIconProps = Omit<React.JSX.IntrinsicElements['img'], 'src'> & {
+    /**
+     * Size for icon
+     * @default normal
+     */
+    size?: SizeProps;
+    /**
+     * What icon to show
+     */
+    icon: ColorIcons;
+};
+export declare function ColorIcon({ icon, size, ...props }: ColorIconProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=color-icon.d.ts.map

package/lib/components/icon/color-icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-icon.d.ts","sourceRoot":"","sources":["../../../src/components/icon/color-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAQ,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAC,SAAS,EAAU,MAAM,SAAS,CAAC;AAG3C,YAAY,EAAC,SAAS,EAAC,CAAC;AAExB,YAAY,EAAC,UAAU,EAAC,MAAM,mBAAmB,CAAC;AAElD,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,GAAG;IAC3E;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,IAAI,EAAE,UAAU,CAAC;CACpB,CAAC;AAEF,wBAAgB,SAAS,CAAC,EAAC,IAAI,EAAE,IAAe,EAAE,GAAG,KAAK,EAAC,EAAE,cAAc,2CAkB1E"}

package/lib/components/icon/color-icon.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColorIcon = ColorIcon;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const generated_icons_1 = require("./generated-icons");
+const utils_1 = require("./utils");
+const theme_1 = require("../../modules/theme");
+function ColorIcon({ icon, size = 'normal', ...props }) {
+    const [isDarkMode] = (0, theme_1.useDarkMode)();
+    const wh = (0, utils_1.useSize)(size);
+    const currentIcon = generated_icons_1.icons['colorIcons'][icon];
+    if (!currentIcon.darkable) {
+        const totalPath = `/assets/${currentIcon.relative}`;
+        // eslint-disable-next-line
+        return (0, jsx_runtime_1.jsx)("img", { width: wh, height: wh, src: totalPath, ...props });
+    }
+    else {
+        const totalPath = `/assets/${specifyDarkOrLight(currentIcon.relative, isDarkMode)}`;
+        // eslint-disable-next-line
+        return (0, jsx_runtime_1.jsx)("img", { width: wh, height: wh, src: totalPath, ...props });
+    }
+}
+function specifyDarkOrLight(src, isDarkMode) {
+    const paths = src?.replace(/\/(dark|light)\//, '/').split('/') ?? [];
+    const darkModeString = isDarkMode ? 'dark' : 'light';
+    return [...paths.slice(0, -1), darkModeString, paths.slice(-1)].join('/');
+}