@headless-adminapp/fluent 0.0.17-alpha.3 → 0.0.17-alpha.30

package/form/controls/AttachmentControl.js

@@ -0,0 +1,225 @@
+"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());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AttachmentControl = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const hooks_1 = require("@headless-adminapp/app/dialog/hooks");
+const utils_1 = require("@headless-adminapp/core/utils");
+const icons_1 = require("@headless-adminapp/icons");
+const react_query_1 = require("@tanstack/react-query");
+const react_1 = require("react");
+function useAttachmentSelector({ fileService, fileServiceContext, location, onChange, }) {
+    const openErrorDialog = (0, hooks_1.useOpenErrorDialog)();
+    const { isPending, mutate: handleFile } = (0, react_query_1.useMutation)({
+        mutationFn: (file) => __awaiter(this, void 0, void 0, function* () {
+            if (location === 'local') {
+                return (0, utils_1.fileToObject)(file);
+            }
+            else {
+                const url = yield fileService.uploadFile(file, {
+                    context: fileServiceContext,
+                });
+                return (0, utils_1.urlToFileObject)(url);
+            }
+        }),
+        onSuccess: (fileObject) => {
+            onChange === null || onChange === void 0 ? void 0 : onChange(fileObject);
+        },
+        onError: (error) => {
+            console.error(error);
+            openErrorDialog({
+                title: 'Failed to upload file',
+                text: error.message,
+            });
+        },
+    });
+    const selectFile = (accept) => {
+        const input = document.createElement('input');
+        input.type = 'file';
+        if (accept) {
+            input.accept = accept;
+        }
+        input.onchange = (event) => __awaiter(this, void 0, void 0, function* () {
+            const files = event.target.files;
+            if (!(files === null || files === void 0 ? void 0 : files.length)) {
+                return;
+            }
+            const file = files[0];
+            handleFile(file);
+        });
+        input.click();
+    };
+    return {
+        isProcessing: isPending,
+        selectFile,
+    };
+}
+const AttachmentImageControl = ({ value, disabled, readOnly, onChange, fileService, fileServiceContext, location, }) => {
+    const { isProcessing, selectFile } = useAttachmentSelector({
+        fileService,
+        fileServiceContext,
+        location,
+        onChange,
+    });
+    if (!value) {
+        return ((0, jsx_runtime_1.jsx)("div", { style: { position: 'relative', display: 'flex' }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                    width: 100,
+                    height: 100,
+                    backgroundColor: react_components_1.tokens.colorNeutralBackground2,
+                    borderRadius: react_components_1.tokens.borderRadiusMedium,
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    color: react_components_1.tokens.colorNeutralForeground4,
+                    cursor: 'pointer',
+                    pointerEvents: disabled || readOnly || isProcessing ? 'none' : 'auto',
+                }, onClick: () => selectFile('image/*'), children: isProcessing ? (0, jsx_runtime_1.jsx)(react_components_1.Spinner, { size: "small" }) : (0, jsx_runtime_1.jsx)(icons_1.Icons.Image, {}) }) }));
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { style: { position: 'relative', display: 'flex' }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                maxWidth: '100%',
+                height: 100,
+                position: 'relative',
+            }, children: [(0, jsx_runtime_1.jsx)("img", { src: value.url, style: {
+                        maxHeight: '100%',
+                        maxWidth: '100%',
+                        objectFit: 'contain',
+                        borderRadius: react_components_1.tokens.borderRadiusMedium,
+                    } }), (0, jsx_runtime_1.jsx)("div", { style: { position: 'absolute', top: 0, right: 0 }, children: (0, jsx_runtime_1.jsx)(ActionMenu, { format: 'image', value: value, disabled: disabled, readOnly: readOnly, onChange: onChange, onChangeClick: () => selectFile('image/*') }) }), isProcessing && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                                position: 'absolute',
+                                inset: 0,
+                                backgroundColor: react_components_1.tokens.colorNeutralBackground1,
+                                opacity: 0.7,
+                            } }), (0, jsx_runtime_1.jsx)("div", { style: {
+                                position: 'absolute',
+                                inset: 0,
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                            }, children: (0, jsx_runtime_1.jsx)(react_components_1.Spinner, { size: "small" }) })] }))] }) }));
+};
+const AttachmentControl = ({ value, disabled, readOnly, id, name, onBlur, onChange, placeholder, fileService, fileServiceContext, location, format, }) => {
+    const { isProcessing, selectFile } = useAttachmentSelector({
+        fileService,
+        fileServiceContext,
+        location,
+        onChange,
+    });
+    const accept = (0, react_1.useMemo)(() => {
+        switch (format) {
+            case 'image':
+                return 'image/*';
+            case 'video':
+                return 'video/*';
+            case 'audio':
+                return 'audio/*';
+            case 'document':
+                return '.pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt,.csv';
+            default:
+                return '';
+        }
+    }, [format]);
+    const FormatIcon = (0, react_1.useMemo)(() => {
+        switch (format) {
+            case 'video':
+                return icons_1.Icons.Video;
+            case 'audio':
+                return icons_1.Icons.Audio;
+            default:
+                return icons_1.Icons.Document;
+        }
+    }, [format]);
+    if (format === 'image') {
+        return ((0, jsx_runtime_1.jsx)(AttachmentImageControl, { value: value, disabled: disabled, readOnly: readOnly, id: id, name: name, onBlur: onBlur, onChange: onChange, placeholder: placeholder, fileService: fileService, fileServiceContext: fileServiceContext, location: location }));
+    }
+    if (!value) {
+        return ((0, jsx_runtime_1.jsx)("div", { style: { position: 'relative', overflow: 'hidden' }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                    width: '100%',
+                }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                        width: '100%',
+                        height: 30,
+                        borderRadius: react_components_1.tokens.borderRadiusMedium,
+                        backgroundColor: react_components_1.tokens.colorNeutralBackground2,
+                        display: 'flex',
+                        paddingLeft: react_components_1.tokens.spacingHorizontalS,
+                        gap: react_components_1.tokens.spacingHorizontalS,
+                        alignItems: 'center',
+                        overflow: 'hidden',
+                        color: react_components_1.tokens.colorNeutralForeground4,
+                        cursor: 'pointer',
+                        pointerEvents: disabled || readOnly || isProcessing ? 'none' : 'auto',
+                    }, onClick: () => selectFile(accept), children: [(0, jsx_runtime_1.jsx)(FormatIcon, { size: 16 }), (0, jsx_runtime_1.jsx)(react_components_1.Body1, { style: {
+                                overflow: 'hidden',
+                                textOverflow: 'ellipsis',
+                                whiteSpace: 'nowrap',
+                                flex: 1,
+                            }, children: placeholder || 'Select a file' }), isProcessing && ((0, jsx_runtime_1.jsx)("div", { style: { paddingRight: react_components_1.tokens.spacingHorizontalS }, children: (0, jsx_runtime_1.jsx)(react_components_1.Spinner, { size: "extra-tiny" }) }))] }) }) }));
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { style: { position: 'relative', overflow: 'hidden' }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                width: '100%',
+            }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                    width: '100%',
+                    height: 30,
+                    borderRadius: react_components_1.tokens.borderRadiusMedium,
+                    backgroundColor: react_components_1.tokens.colorNeutralBackground2,
+                    display: 'flex',
+                    paddingLeft: react_components_1.tokens.spacingHorizontalS,
+                    gap: react_components_1.tokens.spacingHorizontalS,
+                    alignItems: 'center',
+                    overflow: 'hidden',
+                }, children: [(0, jsx_runtime_1.jsx)(FormatIcon, { size: 16 }), (0, jsx_runtime_1.jsx)(react_components_1.Body1, { style: {
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            whiteSpace: 'nowrap',
+                            flex: 1,
+                        }, children: value.name || value.url }), isProcessing && ((0, jsx_runtime_1.jsx)("div", { style: { paddingRight: react_components_1.tokens.spacingHorizontalS }, children: (0, jsx_runtime_1.jsx)(react_components_1.Spinner, { size: "extra-tiny" }) })), !isProcessing && ((0, jsx_runtime_1.jsx)(ActionMenu, { format: format, value: value, disabled: disabled, readOnly: readOnly, onChange: onChange, onChangeClick: () => selectFile(accept) }))] }) }) }));
+};
+exports.AttachmentControl = AttachmentControl;
+const ActionMenu = ({ format, value, disabled, readOnly, onChange, onChangeClick, }) => {
+    const openConfirmDialog = (0, hooks_1.useOpenConfirmDialog)();
+    const FileOpenIcon = (0, react_1.useMemo)(() => {
+        switch (format) {
+            case 'video':
+            case 'audio':
+                return icons_1.Icons.Play;
+            default:
+                return icons_1.Icons.OpenInNew;
+        }
+    }, [format]);
+    const OpenText = (0, react_1.useMemo)(() => {
+        switch (format) {
+            case 'video':
+                return 'Play';
+            case 'audio':
+                return 'Play';
+            default:
+                return 'Open';
+        }
+    }, [format]);
+    return ((0, jsx_runtime_1.jsxs)(react_components_1.Menu, { positioning: "before-top", hasIcons: true, children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { children: (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "transparent", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.MoreVertical, {}) }) }), (0, jsx_runtime_1.jsx)(react_components_1.MenuPopover, { children: (0, jsx_runtime_1.jsxs)(react_components_1.MenuList, { children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(FileOpenIcon, {}), onClick: () => {
+                                window.open(value.url, '_blank');
+                            }, children: OpenText }), (0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Copy, {}), onClick: () => {
+                                navigator.clipboard.writeText(value.url).catch(() => { });
+                            }, children: "Copy Url" }), !(disabled || readOnly) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Edit, {}), onClick: () => {
+                                        onChangeClick === null || onChangeClick === void 0 ? void 0 : onChangeClick();
+                                    }, children: "Change" }), (0, jsx_runtime_1.jsx)(react_components_1.MenuDivider, {}), (0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Delete, {}), onClick: () => __awaiter(void 0, void 0, void 0, function* () {
+                                        const result = yield openConfirmDialog({
+                                            title: 'Remove file',
+                                            text: 'Are you sure you want to remove this file?',
+                                            confirmButtonLabel: 'Remove',
+                                            cancelButtonLabel: 'Cancel',
+                                        });
+                                        if (!(result === null || result === void 0 ? void 0 : result.confirmed)) {
+                                            return;
+                                        }
+                                        onChange === null || onChange === void 0 ? void 0 : onChange(null);
+                                    }), children: "Remove" })] }))] }) })] }));
+};

package/form/controls/AttachmentsControl.d.ts

@@ -0,0 +1,6 @@
+import { FileObject } from '@headless-adminapp/core/attributes/AttachmentAttribute';
+import { FC } from 'react';
+import { ControlProps } from './types';
+export interface AttachmentsControlProps extends ControlProps<FileObject[]> {
+}
+export declare const AttachmentsControl: FC<AttachmentsControlProps>;

package/form/controls/AttachmentsControl.js

@@ -0,0 +1,45 @@
+"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());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AttachmentsControl = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const utils_1 = require("@headless-adminapp/core/utils");
+const icons_1 = require("@headless-adminapp/icons");
+const react_1 = require("react");
+const AttachmentsControl = ({ onChange, id, onBlur, onFocus, disabled, readOnly, value, }) => {
+    const inputRef = (0, react_1.useRef)(null);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsxs)(react_components_1.TagPicker, { appearance: "filled-darker", disabled: disabled, open: false, children: [(0, jsx_runtime_1.jsx)(react_components_1.TagPickerControl, { onFocus: onFocus, onBlur: onBlur, id: id, style: { paddingBlock: react_components_1.tokens.spacingVerticalXXS }, expandIcon: null, children: (0, jsx_runtime_1.jsxs)(react_components_1.TagGroup, { style: {
+                                flexWrap: 'wrap',
+                                columnGap: react_components_1.tokens.spacingHorizontalXS,
+                                gap: react_components_1.tokens.spacingHorizontalXS,
+                            }, children: [value === null || value === void 0 ? void 0 : value.map((file, index) => ((0, jsx_runtime_1.jsx)(react_components_1.Tag, { as: "span", appearance: "brand", size: "small", shape: "rounded", dismissible: !disabled && !readOnly, dismissIcon: (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', cursor: 'pointer' }, onClick: () => {
+                                            if (disabled || readOnly)
+                                                return;
+                                            onChange === null || onChange === void 0 ? void 0 : onChange(value === null || value === void 0 ? void 0 : value.filter((_, i) => i !== index));
+                                        }, children: (0, jsx_runtime_1.jsx)(icons_1.Icons.Close, { size: 16 }) }), children: (0, jsx_runtime_1.jsx)(react_components_1.Link, { href: file.url, target: "_blank", onClick: (event) => {
+                                            event.preventDefault();
+                                            event.stopPropagation();
+                                            window.open(file.url, '_blank');
+                                        }, children: (0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: { overflow: 'hidden', textOverflow: 'ellipsis' }, children: file.name }) }) }, index))), !readOnly && !disabled && ((0, jsx_runtime_1.jsx)(react_components_1.Button, { size: "small", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Add, { size: 16 }), appearance: "outline", onClick: () => {
+                                        var _a;
+                                        if (readOnly)
+                                            return;
+                                        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
+                                    }, children: "Add" }))] }) }), (0, jsx_runtime_1.jsx)(react_components_1.TagPickerList, {})] }), (0, jsx_runtime_1.jsx)("input", { ref: inputRef, type: "file", multiple: true, style: { display: 'none' }, onChange: (event) => __awaiter(void 0, void 0, void 0, function* () {
+                    const files = event.target.files;
+                    if (files === null || files === void 0 ? void 0 : files.length) {
+                        const fileObjects = yield Promise.all(Array.from(files).map((file) => (0, utils_1.fileToObject)(file)));
+                        onChange === null || onChange === void 0 ? void 0 : onChange([...(value !== null && value !== void 0 ? value : []), ...fileObjects]);
+                    }
+                }) })] }));
+};
+exports.AttachmentsControl = AttachmentsControl;

package/form/controls/CurrencyControl.js

@@ -3,17 +3,49 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CurrencyControl = CurrencyControl;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
+const locale_1 = require("@headless-adminapp/app/locale");
+const react_1 = require("react");
 function CurrencyControl({ value, onChange, id, name, onBlur, onFocus, 
 // error,
 disabled, placeholder, autoFocus, 
 // borderOnFocusOnly,
 readOnly, }) {
-    var _a;
-    return ((0, jsx_runtime_1.jsx)(react_components_1.Input, { placeholder: placeholder, id: id, autoFocus: autoFocus, name: name, value: (_a = value === null || value === void 0 ? void 0 : value.toString()) !== null && _a !== void 0 ? _a : '', onChange: (e) => onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value ? Number(e.target.value) : null), onBlur: () => onBlur === null || onBlur === void 0 ? void 0 : onBlur(), appearance: "filled-darker", onFocus: () => onFocus === null || onFocus === void 0 ? void 0 : onFocus(), 
-        // invalid={error}
-        // icon={<div>₹</div>}
-        // startDecorator={<div>₹</div>}
-        contentBefore: (0, jsx_runtime_1.jsx)("div", { children: "\u20B9" }), disabled: disabled, readOnly: readOnly, style: {
+    const symbol = (0, locale_1.useCurrencySymbol)();
+    const [internalValue, setInternalValue] = (0, react_1.useState)(value ? value.toString() : '');
+    const internalValueRef = (0, react_1.useRef)(internalValue);
+    internalValueRef.current = internalValue;
+    (0, react_1.useEffect)(() => {
+        let _value = '';
+        if (typeof value === 'number') {
+            _value = value.toString();
+        }
+        if (!_value && internalValueRef.current === '-') {
+            return;
+        }
+        if (internalValueRef.current !== _value) {
+            setInternalValue(_value);
+        }
+    }, [value]);
+    const handleChange = (e) => {
+        let value = e.target.value;
+        if (!value) {
+            setInternalValue('');
+            onChange === null || onChange === void 0 ? void 0 : onChange(null);
+            return;
+        }
+        value = value.replace(',', '');
+        if (value === '-') {
+            setInternalValue('-');
+            onChange === null || onChange === void 0 ? void 0 : onChange(null);
+            return;
+        }
+        if (isNaN(Number(value))) {
+            return;
+        }
+        setInternalValue(value);
+        onChange === null || onChange === void 0 ? void 0 : onChange(Number(value));
+    };
+    return ((0, jsx_runtime_1.jsx)(react_components_1.Input, { placeholder: placeholder, id: id, autoFocus: autoFocus, name: name, value: internalValue, onChange: handleChange, onBlur: () => onBlur === null || onBlur === void 0 ? void 0 : onBlur(), appearance: "filled-darker", onFocus: () => onFocus === null || onFocus === void 0 ? void 0 : onFocus(), contentBefore: (0, jsx_runtime_1.jsx)("div", { children: symbol }), disabled: disabled, readOnly: readOnly, style: {
             width: '100%',
         } }));
 }

package/form/controls/DateControl.d.ts

@@ -3,4 +3,4 @@ export interface DateControlProps extends ControlProps<string> {
     maxDate?: Date;
     minDate?: Date;
 }
-export declare function DateControl({ value, onChange, id, name, onBlur, onFocus, error, placeholder, disabled, maxDate, minDate, borderOnFocusOnly, readOnly, }: DateControlProps): import("react/jsx-runtime").JSX.Element;
+export declare function DateControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, readOnly, }: DateControlProps): import("react/jsx-runtime").JSX.Element;

package/form/controls/DateControl.js

@@ -8,14 +8,18 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_datepicker_compat_1 = require("@fluentui/react-datepicker-compat");
 const locale_1 = require("@headless-adminapp/app/locale");
 const dayjs_1 = __importDefault(require("dayjs"));
+const timezone_1 = __importDefault(require("dayjs/plugin/timezone"));
+const utc_1 = __importDefault(require("dayjs/plugin/utc"));
 const AppStringContext_1 = require("../../App/AppStringContext");
-function DateControl({ value, onChange, id, name, onBlur, onFocus, error, placeholder, disabled, maxDate, minDate, borderOnFocusOnly, readOnly, }) {
-    const { dateFormats } = (0, locale_1.useLocale)();
+dayjs_1.default.extend(utc_1.default);
+dayjs_1.default.extend(timezone_1.default);
+function DateControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, readOnly, }) {
+    const { dateFormats, timezone } = (0, locale_1.useLocale)();
     const { datePickerStrings } = (0, AppStringContext_1.useAppStrings)();
     return ((0, jsx_runtime_1.jsx)(react_datepicker_compat_1.DatePicker, { id: id, name: name, onFocus: () => onFocus === null || onFocus === void 0 ? void 0 : onFocus(), onBlur: () => onBlur === null || onBlur === void 0 ? void 0 : onBlur(), placeholder: placeholder, appearance: "filled-darker", 
         // size="sm"
         // error={error}
         // maxDate={maxDate}
         // minDate={minDate}
-        disabled: disabled, readOnly: readOnly, formatDate: (date) => (date ? (0, dayjs_1.default)(date).format(dateFormats.short) : ''), value: value ? new Date(value) : null, onSelectDate: (date) => onChange === null || onChange === void 0 ? void 0 : onChange(date ? date.toISOString() : null), strings: datePickerStrings }));
+        disabled: disabled, readOnly: readOnly, formatDate: (date) => date ? (0, dayjs_1.default)(date).tz(timezone).format(dateFormats.short) : '', value: value ? new Date(value) : null, onSelectDate: (date) => onChange === null || onChange === void 0 ? void 0 : onChange(date ? (0, dayjs_1.default)(date).tz(timezone).startOf('day').toISOString() : null), strings: datePickerStrings }));
 }

package/form/controls/DateTimeControl.d.ts

@@ -3,4 +3,4 @@ export interface DateTimeControlProps extends ControlProps<string> {
     maxDate?: Date;
     minDate?: Date;
 }
-export declare function DateTimeControl({ value, onChange, id, name, onBlur, onFocus, error, placeholder, disabled, maxDate, minDate, borderOnFocusOnly, readOnly, }: DateTimeControlProps): import("react/jsx-runtime").JSX.Element;
+export declare function DateTimeControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, readOnly, }: DateTimeControlProps): import("react/jsx-runtime").JSX.Element;

package/form/controls/DateTimeControl.js

@@ -7,7 +7,7 @@ exports.DateTimeControl = DateTimeControl;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_datepicker_compat_1 = require("@fluentui/react-datepicker-compat");
 const dayjs_1 = __importDefault(require("dayjs"));
-function DateTimeControl({ value, onChange, id, name, onBlur, onFocus, error, placeholder, disabled, maxDate, minDate, borderOnFocusOnly, readOnly, }) {
+function DateTimeControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, readOnly, }) {
     // const { shortDate: dateFormat } = useLocale();
     // return (
     //   <TimePicker

package/form/controls/EmailControl.d.ts

@@ -3,4 +3,4 @@ export interface EmailControlProps extends ControlProps<string> {
     autoComplete?: string;
     textTransform?: 'capitalize' | 'uppercase' | 'lowercase' | 'none';
 }
-export declare function EmailControl({ value, onChange, id, name, onBlur, onFocus, error, placeholder, disabled, autoComplete, textTransform, borderOnFocusOnly, readOnly, }: EmailControlProps): import("react/jsx-runtime").JSX.Element;
+export declare function EmailControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, autoComplete, textTransform, readOnly, }: EmailControlProps): import("react/jsx-runtime").JSX.Element;

package/form/controls/EmailControl.js

@@ -4,7 +4,7 @@ exports.EmailControl = EmailControl;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const icons_1 = require("@headless-adminapp/icons");
-function EmailControl({ value, onChange, id, name, onBlur, onFocus, error, placeholder, disabled, autoComplete, textTransform, borderOnFocusOnly, readOnly, }) {
+function EmailControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, autoComplete, textTransform, readOnly, }) {
     return ((0, jsx_runtime_1.jsx)(react_components_1.Input, { type: "email", placeholder: placeholder, id: id, appearance: "filled-darker", name: name, 
         // size="sm"
         value: value || '', onChange: (e) => {

package/form/controls/LookupControl.js

@@ -111,12 +111,12 @@ const LookupControlMd = ({ value, onChange, id, name, onBlur, onFocus, placehold
             });
         }
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { style: { position: 'relative', width: '100%' }, children: [(0, jsx_runtime_1.jsxs)(react_components_1.Combobox, { name: name, appearance: "filled-darker", expandIcon: readOnly || disabled ? null : isLoading ? ((0, jsx_runtime_1.jsx)(react_components_1.Spinner, { size: "extra-tiny" })) : ((0, jsx_runtime_1.jsx)(icons_1.Icons.Search, { size: 18 })), placeholder: placeholder, inputMode: "search", style: { width: '100%' }, autoComplete: "off", readOnly: readOnly || disabled, 
+    return ((0, jsx_runtime_1.jsxs)("div", { style: { position: 'relative', width: '100%' }, children: [(0, jsx_runtime_1.jsxs)(react_components_1.Combobox, { name: name, appearance: "filled-darker", expandIcon: readOnly || disabled ? null : isLoading ? ((0, jsx_runtime_1.jsx)(react_components_1.Spinner, { size: "extra-tiny" })) : ((0, jsx_runtime_1.jsx)(icons_1.Icons.Search, { size: 18 })), placeholder: !value ? placeholder : '', inputMode: "search", style: { width: '100%' }, autoComplete: "off", readOnly: readOnly || disabled, 
                 // disabled={disabled}
                 open: open && !value && !readOnly && !disabled, value: !value ? searchText : '', onOpenChange: (e, data) => setOpen(data.open), onChange: (e) => {
                     setSearchText(e.target.value);
                 }, onOptionSelect: (e, item) => {
-                    const _item = data === null || data === void 0 ? void 0 : data.records.find((x) => String(x[schema.idAttribute]) === item.optionValue);
+                    const _item = data === null || data === void 0 ? void 0 : data.records.find((x) => String(x[schema.idAttribute]) === String(item.optionValue));
                     handleChange(_item !== null && _item !== void 0 ? _item : null);
                 }, disableAutoFocus: true, onBlur: onBlur, onFocus: onFocus, id: id, autoFocus: autoFocus, children: [data === null || data === void 0 ? void 0 : data.records.map((item) => ((0, jsx_runtime_1.jsx)(react_components_1.Option, { value: item[schema.idAttribute], className: (0, react_components_1.mergeClasses)(styles.option), text: item[schema.primaryAttribute], children: (0, jsx_runtime_1.jsx)(RecordCard_1.RecordCard, { cardView: view === null || view === void 0 ? void 0 : view.experience.card, record: item, schema: schema }) }, item[schema.idAttribute]))), !isLoading && !(data === null || data === void 0 ? void 0 : data.records.length) && ((0, jsx_runtime_1.jsx)("div", { style: {
                             paddingInline: react_components_1.tokens.spacingHorizontalL,

package/form/controls/MultiSelectControl.d.ts

@@ -3,4 +3,4 @@ import { ControlProps } from './types';
 export interface MultiSelectControlProps<T> extends ControlProps<T[]> {
     options: Lookup<T>[];
 }
-export default function MultiSelectControl<T extends string | number>({ value, onChange, options, id, name, disabled, error, onBlur, onFocus, placeholder, }: MultiSelectControlProps<T>): import("react/jsx-runtime").JSX.Element;
+export default function MultiSelectControl<T extends string | number>({ value, onChange, options, id, name, disabled, onBlur, onFocus, placeholder, }: MultiSelectControlProps<T>): import("react/jsx-runtime").JSX.Element;

package/form/controls/MultiSelectControl.js

@@ -4,7 +4,7 @@ exports.default = MultiSelectControl;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const react_1 = require("react");
-function MultiSelectControl({ value, onChange, options, id, name, disabled, error, onBlur, onFocus, placeholder, }) {
+function MultiSelectControl({ value, onChange, options, id, name, disabled, onBlur, onFocus, placeholder, }) {
     const transformedOptions = (0, react_1.useMemo)(() => options.map((x) => ({ label: x.label, value: String(x.value) })), [options]);
     const handleChange = (value) => {
         const selectedOptions = options.filter((x) => value.includes(String(x.value)));

package/form/controls/MultiSelectLookupControl.js

@@ -135,7 +135,7 @@ const LookupControlMd = ({ value, onChange, id, name, onBlur, onFocus, placehold
                 }, onChange: (e) => {
                     setSearchText(e.target.value);
                 }, onOptionSelect: (e, item) => {
-                    const _item = data === null || data === void 0 ? void 0 : data.records.find((x) => String(x[schema.idAttribute]) === item.optionValue);
+                    const _item = data === null || data === void 0 ? void 0 : data.records.find((x) => String(x[schema.idAttribute]) === String(item.optionValue));
                     if (!_item)
                         return;
                     handleAdd(_item);

package/form/controls/NumberControl.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NumberControl = NumberControl;
 const jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable unused-imports/no-unused-vars */
 const react_components_1 = require("@fluentui/react-components");
 function NumberControl({ value, onChange, id, name, onBlur, onFocus, error, disabled, placeholder, borderOnFocusOnly, readOnly, }) {
     return ((0, jsx_runtime_1.jsx)(react_components_1.Input, { type: "number", placeholder: placeholder, id: id, appearance: "filled-darker", name: name, 

package/form/controls/PasswordControl.d.ts

@@ -3,4 +3,4 @@ import { ControlProps } from './types';
 export interface PasswordControlProps extends ControlProps<string> {
     appearance?: InputProps['appearance'];
 }
-export declare function PasswordControl({ value, onChange, id, name, onBlur, onFocus, error, placeholder, disabled, autoFocus, appearance, }: PasswordControlProps): import("react/jsx-runtime").JSX.Element;
+export declare function PasswordControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, autoFocus, appearance, }: PasswordControlProps): import("react/jsx-runtime").JSX.Element;

package/form/controls/PasswordControl.js

@@ -5,7 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const icons_1 = require("@headless-adminapp/icons");
 const react_1 = require("react");
-function PasswordControl({ value, onChange, id, name, onBlur, onFocus, error, placeholder, disabled, autoFocus, appearance = 'filled-darker', }) {
+function PasswordControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, autoFocus, appearance = 'filled-darker', }) {
     const [showPassword, setShowPassword] = (0, react_1.useState)(false);
     return ((0, jsx_runtime_1.jsx)(react_components_1.Input, { placeholder: placeholder, id: id, name: name, appearance: appearance, type: showPassword ? 'text' : 'password', autoFocus: autoFocus, value: value || '', onChange: (e) => onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value), onBlur: () => onBlur === null || onBlur === void 0 ? void 0 : onBlur(), onFocus: () => onFocus === null || onFocus === void 0 ? void 0 : onFocus(), 
         // invalid={error}

package/form/controls/RichTextControl.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { ControlProps } from './types';
+export interface RichTextControlProps extends ControlProps<string> {
+}
+export declare const RichTextControl: FC<RichTextControlProps>;

package/form/controls/RichTextControl.js

@@ -0,0 +1,33 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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.RichTextControl = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ReactQuill = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('react-quill'))));
+const RichTextControl = ({ value, onChange, id, onBlur, onFocus, disabled, readOnly, }) => {
+    return ((0, jsx_runtime_1.jsx)(ReactQuill, { value: value !== null && value !== void 0 ? value : '', onChange: onChange, className: "hdlapp_rte", readOnly: disabled || readOnly, style: { maxHeight: '400px', minHeight: '200px' }, onFocus: onFocus, onBlur: onBlur, id: id }));
+};
+exports.RichTextControl = RichTextControl;

package/form/controls/SelectControl.d.ts

@@ -6,4 +6,4 @@ export interface Lookup<T = string> {
 export interface SelectControlProps<T> extends ControlProps<T> {
     options: Lookup<T>[];
 }
-export default function SelectControl<T extends string | number>({ value, onChange, options, id, name, disabled, error, onBlur, onFocus, placeholder, readOnly, }: SelectControlProps<T>): import("react/jsx-runtime").JSX.Element;
+export default function SelectControl<T extends string | number>({ value, onChange, options, id, name, disabled, onBlur, onFocus, placeholder, }: SelectControlProps<T>): import("react/jsx-runtime").JSX.Element;

package/form/controls/SelectControl.js

@@ -4,7 +4,7 @@ exports.default = SelectControl;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const react_1 = require("react");
-function SelectControl({ value, onChange, options, id, name, disabled, error, onBlur, onFocus, placeholder, readOnly, }) {
+function SelectControl({ value, onChange, options, id, name, disabled, onBlur, onFocus, placeholder, }) {
     var _a;
     const transformedOptions = (0, react_1.useMemo)(() => options.map((x) => ({ label: x.label, value: String(x.value) })), [options]);
     const handleChange = (value) => {

package/form/controls/SwitchControl.d.ts

@@ -1,4 +1,4 @@
 import { ControlProps } from './types';
 export interface SwitchControlProps extends ControlProps<boolean> {
 }
-export declare function SwitchControl({ value, onChange, id, name, onBlur, onFocus, error, disabled, placeholder, readOnly, }: SwitchControlProps): null;
+export declare function SwitchControl({ value, onChange, id, name, disabled, readOnly, onBlur, onFocus, }: SwitchControlProps): import("react/jsx-runtime").JSX.Element;

package/form/controls/SwitchControl.js

@@ -1,6 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SwitchControl = SwitchControl;
-function SwitchControl({ value, onChange, id, name, onBlur, onFocus, error, disabled, placeholder, readOnly, }) {
-    return null;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+function SwitchControl({ value, onChange, id, name, disabled, readOnly, onBlur, onFocus, }) {
+    return ((0, jsx_runtime_1.jsx)(react_components_1.Switch, { checked: value !== null && value !== void 0 ? value : false, onChange: (e) => onChange === null || onChange === void 0 ? void 0 : onChange(e.currentTarget.checked), id: id, name: name, disabled: disabled, readOnly: readOnly, onBlur: onBlur, onFocus: onFocus }));
 }

package/form/controls/TelephoneControl.d.ts

@@ -2,4 +2,4 @@ import { ControlProps } from './types';
 export interface TelephoneControlProps extends ControlProps<string> {
     autoComplete?: string;
 }
-export declare function TelephoneControl({ value, onChange, id, name, onBlur, onFocus, error, placeholder, disabled, autoComplete, }: TelephoneControlProps): import("react/jsx-runtime").JSX.Element;
+export declare function TelephoneControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, autoComplete, }: TelephoneControlProps): import("react/jsx-runtime").JSX.Element;

package/form/controls/TelephoneControl.js

@@ -4,7 +4,7 @@ exports.TelephoneControl = TelephoneControl;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const icons_1 = require("@headless-adminapp/icons");
-function TelephoneControl({ value, onChange, id, name, onBlur, onFocus, error, placeholder, disabled, autoComplete, }) {
+function TelephoneControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, autoComplete, }) {
     return ((0, jsx_runtime_1.jsx)(react_components_1.Input, { type: "tel", placeholder: placeholder, id: id, appearance: "filled-darker", name: name, value: value || '', onChange: (e) => onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value), onBlur: () => onBlur === null || onBlur === void 0 ? void 0 : onBlur(), onFocus: () => onFocus === null || onFocus === void 0 ? void 0 : onFocus(), 
         // invalid={error}
         disabled: disabled, autoComplete: autoComplete, style: {

package/form/controls/TextAreaControl.d.ts

@@ -3,4 +3,4 @@ export interface TextAreaControlProps extends ControlProps<string> {
     rows?: number;
     textTransform?: 'capitalize' | 'uppercase' | 'lowercase' | 'none';
 }
-export declare function TextAreaControl({ value, onChange, id, name, placeholder, onBlur, onFocus, error, disabled, rows, textTransform, }: TextAreaControlProps): import("react/jsx-runtime").JSX.Element;
+export declare function TextAreaControl({ value, onChange, id, name, placeholder, onBlur, onFocus, disabled, rows, textTransform, }: TextAreaControlProps): import("react/jsx-runtime").JSX.Element;

package/form/controls/TextAreaControl.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextAreaControl = TextAreaControl;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
-function TextAreaControl({ value, onChange, id, name, placeholder, onBlur, onFocus, error, disabled, rows = 5, textTransform, }) {
+function TextAreaControl({ value, onChange, id, name, placeholder, onBlur, onFocus, disabled, rows = 5, textTransform, }) {
     return ((0, jsx_runtime_1.jsx)(react_components_1.Textarea, { placeholder: placeholder, id: id, appearance: "filled-darker", name: name, value: value || '', onChange: (e) => {
             textTransform === 'uppercase'
                 ? onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value.toUpperCase())

package/form/controls/utils.d.ts

@@ -0,0 +1,4 @@
+import { FileObject } from '@headless-adminapp/core/attributes/AttachmentAttribute';
+export declare function fileToObject(file: File): Promise<FileObject>;
+export declare function dataUrlToFile(dataUrl: string, name: string): File;
+export declare function urlToFileObject(url: string, name?: string): FileObject;