@olaboot/esm-form-engine-lib 4.1.0

package/dist/components/extension/extension-parcel.component.js

@@ -0,0 +1,35 @@
+import React, { useEffect, useMemo } from "react";
+import { BehaviorSubject } from "rxjs";
+import { attach, ExtensionSlot } from "@openmrs/esm-framework";
+import { useFormProviderContext } from "../../provider/form-provider.js";
+const ExtensionParcel = ({ field })=>{
+    const submissionNotifier = useMemo(()=>new BehaviorSubject({
+            isSubmitting: false
+        }), []);
+    const { isSubmitting, patient } = useFormProviderContext();
+    const state = useMemo(()=>({
+            patientUuid: patient.id,
+            submissionNotifier
+        }), [
+        patient.id,
+        submissionNotifier
+    ]);
+    useEffect(()=>{
+        if (field.questionOptions.extensionSlotName && field.questionOptions.extensionId) {
+            attach(field.questionOptions.extensionSlotName, field.questionOptions.extensionId);
+        }
+    }, []);
+    useEffect(()=>{
+        submissionNotifier.next({
+            isSubmitting: isSubmitting
+        });
+    }, [
+        isSubmitting,
+        submissionNotifier
+    ]);
+    return /*#__PURE__*/ React.createElement(React.Fragment, null, field.questionOptions.extensionSlotName && /*#__PURE__*/ React.createElement(ExtensionSlot, {
+        name: field.questionOptions.extensionSlotName,
+        state: state
+    }));
+};
+export default ExtensionParcel;

package/dist/components/field-label/field-label.component.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { type FormField } from '../../types';
+interface FieldLabelProps {
+    field: FormField;
+    /**
+     * Custom label text to override the default field label.
+     */
+    customLabel?: string;
+}
+declare const FieldLabel: React.FC<FieldLabelProps>;
+export default FieldLabel;
+//# sourceMappingURL=field-label.component.d.ts.map

package/dist/components/field-label/field-label.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-label.component.d.ts","sourceRoot":"","sources":["../../../src/components/field-label/field-label.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,aAAa,CAAC;AAG7C,UAAU,eAAe;IACvB,KAAK,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAeD,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAwBzC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/field-label/field-label.component.js

@@ -0,0 +1,33 @@
+import React from "react";
+import { Tooltip } from "@carbon/react";
+import { Information } from "@carbon/react/icons";
+import { useTranslation } from "react-i18next";
+import styles from "./field-label.scss";
+const TooltipWrapper = ({ field, children })=>{
+    const { t } = useTranslation();
+    const hasTooltip = Boolean(field.questionInfo);
+    return hasTooltip ? /*#__PURE__*/ React.createElement(Tooltip, {
+        autoAlign: true,
+        label: t(field.questionInfo)
+    }, /*#__PURE__*/ React.createElement("div", null, children)) : /*#__PURE__*/ React.createElement(React.Fragment, null, children);
+};
+const FieldLabel = ({ field, customLabel })=>{
+    const { t } = useTranslation();
+    const hasTooltip = Boolean(field.questionInfo);
+    const labelText = customLabel || t(field.label);
+    return /*#__PURE__*/ React.createElement(TooltipWrapper, {
+        field: field
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: styles.questionLabel,
+        "data-testid": `${field.id}-label`
+    }, /*#__PURE__*/ React.createElement("span", null, labelText), field.isRequired && /*#__PURE__*/ React.createElement("span", {
+        title: t('required', 'Required'),
+        className: styles.required
+    }, "*"), hasTooltip && /*#__PURE__*/ React.createElement(Information, {
+        size: 16,
+        "aria-hidden": "true",
+        className: styles.tooltipIcon,
+        "data-testid": `${field.id}-information-icon`
+    })));
+};
+export default FieldLabel;

package/dist/components/field-label/field-label.scss

@@ -0,0 +1,15 @@
+@use '@carbon/colors';
+
+.required {
+  color: colors.$red-60;
+  margin-left: 0.25rem;
+}
+
+.questionLabel {
+  display: flex;
+  align-items: center;
+}
+
+.tooltipIcon {
+  margin-left: 0.25rem;
+}

package/dist/components/group/obs-group.component.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { type FormFieldInputProps } from '../../types';
+export declare const ObsGroup: React.FC<FormFieldInputProps>;
+export default ObsGroup;
+//# sourceMappingURL=obs-group.component.d.ts.map

package/dist/components/group/obs-group.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"obs-group.component.d.ts","sourceRoot":"","sources":["../../../src/components/group/obs-group.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,KAAK,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAOvD,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA+ClD,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/components/group/obs-group.component.js

@@ -0,0 +1,48 @@
+import React, { useMemo } from "react";
+import classNames from "classnames";
+import styles from "./obs-group.scss";
+import { ErrorFallback, FormFieldRenderer, isGroupField } from "../renderer/field/form-field-renderer.component.js";
+import { useFormProviderContext } from "../../provider/form-provider.js";
+import { FormGroup } from "@carbon/react";
+import { useTranslation } from "react-i18next";
+export const ObsGroup = ({ field, ...restProps })=>{
+    const { t } = useTranslation();
+    const { formFieldAdapters, formFields } = useFormProviderContext();
+    const content = useMemo(()=>field.questions.map((child)=>formFields.find((field)=>field.id === child.id)).filter((child)=>!child.isHidden).map((child, index)=>{
+            const key = `${child.id}_${index}`;
+            if (child.id === field.id) {
+                return /*#__PURE__*/ React.createElement(ErrorFallback, {
+                    error: new Error('ObsGroup child has same id as parent question')
+                });
+            }
+            if (child.type === 'obsGroup' && isGroupField(child.questionOptions.rendering)) {
+                return /*#__PURE__*/ React.createElement("div", {
+                    key: key,
+                    className: styles.nestedGroupContainer
+                }, /*#__PURE__*/ React.createElement(ObsGroup, {
+                    field: child,
+                    ...restProps
+                }));
+            } else if (formFieldAdapters[child.type]) {
+                return /*#__PURE__*/ React.createElement("div", {
+                    className: classNames(styles.flexColumn),
+                    key: key
+                }, /*#__PURE__*/ React.createElement("div", {
+                    className: styles.groupContainer
+                }, /*#__PURE__*/ React.createElement(FormFieldRenderer, {
+                    fieldId: child.id,
+                    valueAdapter: formFieldAdapters[child.type]
+                })));
+            }
+        }), [
+        field,
+        formFields
+    ]);
+    return /*#__PURE__*/ React.createElement("div", {
+        className: styles.groupContainer
+    }, content.length > 1 ? /*#__PURE__*/ React.createElement(FormGroup, {
+        legendText: t(field.label),
+        className: styles.boldLegend
+    }, content) : content);
+};
+export default ObsGroup;

package/dist/components/group/obs-group.scss

@@ -0,0 +1,16 @@
+.flexColumn {
+  display: flex;
+  flex-direction: column;
+}
+
+.flexFullWidth {
+  flex-basis: 100%;
+}
+
+.groupContainer {
+  margin: 0.5rem 0;
+}
+
+.boldLegend > legend {
+  font-weight: bolder;
+}

package/dist/components/inputs/content-switcher/content-switcher.component.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { type FormFieldInputProps } from '../../../types';
+declare const ContentSwitcher: React.FC<FormFieldInputProps>;
+export default ContentSwitcher;
+//# sourceMappingURL=content-switcher.component.d.ts.map

package/dist/components/inputs/content-switcher/content-switcher.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"content-switcher.component.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/content-switcher/content-switcher.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAMpD,OAAO,EAAE,KAAK,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAM1D,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAkElD,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/components/inputs/content-switcher/content-switcher.component.js

@@ -0,0 +1,70 @@
+import React, { useCallback, useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import classNames from "classnames";
+import { FormGroup, ContentSwitcher as CdsContentSwitcher, Switch } from "@carbon/react";
+import { shouldUseInlineLayout } from "../../../utils/form-helper.js";
+import { isTrue } from "../../../utils/boolean-utils.js";
+import FieldValueView from "../../value/view/field-value-view.component.js";
+import styles from "./content-switcher.scss";
+import { useFormProviderContext } from "../../../provider/form-provider.js";
+import FieldLabel from "../../field-label/field-label.component.js";
+const ContentSwitcher = ({ field, value, errors, warnings, setFieldValue })=>{
+    const { t } = useTranslation();
+    const { layoutType, sessionMode, workspaceLayout, formFieldAdapters } = useFormProviderContext();
+    const handleChange = useCallback((value)=>{
+        setFieldValue(value.name);
+    }, [
+        setFieldValue
+    ]);
+    const visibleAnswers = useMemo(()=>field.questionOptions.answers.filter((answer)=>!answer.isHidden), [
+        field.questionOptions.answers
+    ]);
+    const selectedIndex = useMemo(()=>visibleAnswers.findIndex((option)=>option.concept == value), [
+        value,
+        visibleAnswers
+    ]);
+    const isInline = useMemo(()=>{
+        if ([
+            'view',
+            'embedded-view'
+        ].includes(sessionMode) || isTrue(field.readonly)) {
+            return shouldUseInlineLayout(field.inlineRendering, layoutType, workspaceLayout, sessionMode);
+        }
+        return false;
+    }, [
+        sessionMode,
+        field.readonly,
+        field.inlineRendering,
+        layoutType,
+        workspaceLayout
+    ]);
+    return sessionMode == 'view' || sessionMode == 'embedded-view' || isTrue(field.readonly) ? /*#__PURE__*/ React.createElement("div", {
+        className: styles.formField
+    }, /*#__PURE__*/ React.createElement(FieldValueView, {
+        label: t(field.label),
+        value: value ? formFieldAdapters[field.type].getDisplayValue(field, value) : value,
+        conceptName: field.meta?.concept?.display,
+        isInline: isInline
+    })) : !field.isHidden && /*#__PURE__*/ React.createElement(FormGroup, {
+        legendText: /*#__PURE__*/ React.createElement("div", {
+            className: styles.boldedLegend
+        }, /*#__PURE__*/ React.createElement(FieldLabel, {
+            field: field
+        })),
+        className: classNames({
+            [styles.errorLegend]: errors.length > 0,
+            [styles.boldedLegend]: errors.length === 0
+        })
+    }, /*#__PURE__*/ React.createElement(CdsContentSwitcher, {
+        onChange: handleChange,
+        selectedIndex: selectedIndex,
+        className: styles.selectedOption,
+        size: "md"
+    }, visibleAnswers.map((option, index)=>/*#__PURE__*/ React.createElement(Switch, {
+            name: option.concept || option.value,
+            text: t(option.label),
+            key: index,
+            disabled: field.isDisabled
+        }))));
+};
+export default ContentSwitcher;

package/dist/components/inputs/content-switcher/content-switcher.scss

@@ -0,0 +1,55 @@
+@use '@carbon/colors';
+
+.formField {
+  margin-top: 0.625rem;
+}
+
+.formField > div > div > label {
+  color: colors.$gray-70;
+}
+
+.textContainer {
+  label {
+    font-size: 0.875rem !important;
+  }
+}
+
+.errorLegend legend,
+.errorLabel label {
+  color: colors.$red-60 !important;
+}
+
+.boldedLegend {
+  font-weight: 600;
+  color: black;
+}
+
+.selectedOption {
+  border-radius: 4px;
+  width: 15rem;
+
+  button {
+    background-color: colors.$gray-10;
+
+    &:before {
+      display: none !important;
+    }
+  }
+}
+
+.switchOverrides {
+  background-color: colors.$blue-10 !important;
+  border: 1px solid colors.$blue-60 !important;
+  color: colors.$blue-60 !important;
+  padding: 0 0 0 1rem;
+
+  button:focus {
+    border: none !important;
+  }
+}
+
+.sansSwitchOverrides {
+  border: solid 1px colors.$blue-30 !important;
+  background-color: colors.$gray-10 !important;
+  padding: 0 0 0 1rem;
+}

package/dist/components/inputs/date/date.component.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { type FormFieldInputProps } from '../../../types';
+declare const DateField: React.FC<FormFieldInputProps>;
+export default DateField;
+//# sourceMappingURL=date.component.d.ts.map

package/dist/components/inputs/date/date.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date.component.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/date/date.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoD,MAAM,OAAO,CAAC;AAUzE,OAAO,EAAE,KAAK,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAK1D,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA2H5C,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/components/inputs/date/date.component.js

@@ -0,0 +1,125 @@
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import classNames from "classnames";
+import { useTranslation } from "react-i18next";
+import { Layer, TimePicker } from "@carbon/react";
+import { OpenmrsDatePicker } from "@openmrs/esm-framework";
+import { formatDateAsDisplayString } from "../../../utils/common-utils.js";
+import { isEmpty } from "../../../validators/form-validator.js";
+import { isTrue } from "../../../utils/boolean-utils.js";
+import { shouldUseInlineLayout } from "../../../utils/form-helper.js";
+import { useFormProviderContext } from "../../../provider/form-provider.js";
+import FieldLabel from "../../field-label/field-label.component.js";
+import FieldValueView from "../../value/view/field-value-view.component.js";
+import styles from "./date.scss";
+const DateField = ({ field, value: dateValue, errors, warnings, setFieldValue })=>{
+    const { t } = useTranslation();
+    const [time, setTime] = useState('');
+    const { layoutType, sessionMode, workspaceLayout } = useFormProviderContext();
+    const isInline = useMemo(()=>{
+        if ([
+            'view',
+            'embedded-view'
+        ].includes(sessionMode) || isTrue(field.readonly)) {
+            return shouldUseInlineLayout(field.inlineRendering, layoutType, workspaceLayout, sessionMode);
+        }
+        return false;
+    }, [
+        sessionMode,
+        field.readonly,
+        field.inlineRendering,
+        layoutType,
+        workspaceLayout
+    ]);
+    const onDateChange = useCallback((date)=>{
+        setTimeIfPresent(date, time);
+        setFieldValue(date);
+    }, [
+        setFieldValue,
+        time
+    ]);
+    const setTimeIfPresent = useCallback((date, time)=>{
+        if (!isEmpty(time)) {
+            const [hours, minutes] = time.split(':').map(Number);
+            date.setHours(hours ?? 0, minutes ?? 0);
+        }
+    }, []);
+    const onTimeChange = useCallback((event)=>{
+        const time = event.target.value;
+        setTime(time);
+        // TODO: Confirm if a new date should be instantiated when the date picker format is 'timer'
+        // If the underlying concept's datatype is 'Time', then the backend expects a time string
+        const date = field.datePickerFormat === 'timer' ? new Date() : new Date(dateValue);
+        setTimeIfPresent(date, time);
+        setFieldValue(date);
+    }, [
+        setFieldValue,
+        setTimeIfPresent,
+        dateValue
+    ]);
+    useEffect(()=>{
+        if (dateValue) {
+            if (dateValue instanceof Date) {
+                const hours = dateValue.getHours() < 10 ? `0${dateValue.getHours()}` : `${dateValue.getHours()}`;
+                const minutes = dateValue.getMinutes() < 10 ? `0${dateValue.getMinutes()}` : `${dateValue.getMinutes()}`;
+                setTime([
+                    hours,
+                    minutes
+                ].join(':'));
+            }
+        }
+    }, [
+        dateValue
+    ]);
+    const timePickerLabel = useMemo(()=>field.datePickerFormat === 'timer' ? /*#__PURE__*/ React.createElement(FieldLabel, {
+            field: field
+        }) : /*#__PURE__*/ React.createElement(FieldLabel, {
+            field: field,
+            customLabel: t('time', 'Time')
+        }), [
+        field.datePickerFormat,
+        field.label,
+        t
+    ]);
+    return sessionMode == 'view' || sessionMode == 'embedded-view' || isTrue(field.readonly) ? /*#__PURE__*/ React.createElement(FieldValueView, {
+        label: t(field.label),
+        value: dateValue instanceof Date ? formatDateAsDisplayString(field, dateValue) : dateValue,
+        conceptName: field.meta?.concept?.display,
+        isInline: isInline
+    }) : !field.isHidden && /*#__PURE__*/ React.createElement("div", {
+        className: styles.datetime
+    }, (field.datePickerFormat === 'calendar' || field.datePickerFormat === 'both') && /*#__PURE__*/ React.createElement("div", {
+        className: styles.datePickerSpacing
+    }, /*#__PURE__*/ React.createElement(Layer, null, /*#__PURE__*/ React.createElement(OpenmrsDatePicker, {
+        id: field.id,
+        onChange: onDateChange,
+        labelText: /*#__PURE__*/ React.createElement("span", {
+            className: styles.datePickerLabel
+        }, /*#__PURE__*/ React.createElement(FieldLabel, {
+            field: field
+        })),
+        isDisabled: field.isDisabled,
+        isReadOnly: isTrue(field.readonly),
+        isRequired: field.isRequired ?? false,
+        isInvalid: errors.length > 0,
+        invalidText: errors[0]?.message,
+        value: dateValue
+    })), warnings.length > 0 ? /*#__PURE__*/ React.createElement("div", {
+        className: styles.datePickerWarn
+    }, warnings[0]?.message) : null), field.datePickerFormat === 'both' || field.datePickerFormat === 'timer' ? /*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement(Layer, null, /*#__PURE__*/ React.createElement(TimePicker, {
+        className: classNames(styles.boldedLabel, styles.timeInput),
+        id: field.id,
+        labelText: timePickerLabel,
+        placeholder: "HH:MM",
+        pattern: "(1[012]|[1-9]):[0-5][0-9]$",
+        type: "time",
+        disabled: field.datePickerFormat === 'timer' ? field.isDisabled : !dateValue ? true : false,
+        invalid: errors.length > 0,
+        invalidText: errors[0]?.message,
+        readOnly: isTrue(field.readonly),
+        warning: warnings.length > 0,
+        warningText: warnings[0]?.message,
+        value: time ? time : dateValue instanceof Date ? dateValue.toLocaleDateString(window.navigator.language) : dateValue,
+        onChange: onTimeChange
+    }))) : null);
+};
+export default DateField;

package/dist/components/inputs/date/date.scss

@@ -0,0 +1,37 @@
+@use '@carbon/colors';
+
+.datePickerWarn {
+  font-size: 0.75rem;
+  color: colors.$black-100;
+}
+
+.datePickerLabel {
+  font-weight: 600;
+  color: colors.$black-100;
+  max-width: 18.5rem;
+}
+
+.boldedLabel label {
+  font-weight: 600;
+  color: colors.$black-100;
+}
+
+.datetime {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+
+  > .datePickerSpacing {
+    margin-right: 1rem;
+  }
+}
+
+.timeInput {
+  width: auto;
+  :hover {
+    cursor: text;
+  }
+  :focus {
+    cursor: text;
+  }
+}

package/dist/components/inputs/date/date.test.js

@@ -0,0 +1,85 @@
+import React from "react";
+import { act, render, screen } from "@testing-library/react";
+import { useFormProviderContext } from "../../../provider/form-provider.js";
+import DateField from "./date.component.js";
+jest.mock('src/provider/form-provider', ()=>({
+        useFormProviderContext: jest.fn()
+    }));
+const mockUseFormProviderContext = useFormProviderContext;
+const mockSetFieldValue = jest.fn();
+const dateFieldMock = {
+    id: 'test-date-field',
+    label: 'Test Date Field',
+    type: 'obs',
+    datePickerFormat: 'both',
+    questionOptions: {
+        rendering: 'date',
+        concept: '6089AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'
+    },
+    isHidden: false,
+    isDisabled: false,
+    readonly: false
+};
+const renderDateField = async (props)=>{
+    await act(()=>render(/*#__PURE__*/ React.createElement(DateField, props)));
+};
+describe('DateField Component', ()=>{
+    beforeEach(()=>{
+        mockUseFormProviderContext.mockReturnValue({
+            layoutType: 'default',
+            sessionMode: 'edit',
+            workspaceLayout: 'default',
+            formFieldAdapters: {}
+        });
+    });
+    it('should render date picker and time picker when datePickerFormat is "both"', async ()=>{
+        await renderDateField({
+            field: dateFieldMock,
+            value: new Date(),
+            errors: [],
+            warnings: [],
+            setFieldValue: mockSetFieldValue
+        });
+        expect(screen.getByLabelText('Test Date Field')).toBeInTheDocument();
+        expect(screen.getByText('Time')).toBeInTheDocument();
+    });
+    it('should display error message when there are errors', async ()=>{
+        await renderDateField({
+            field: dateFieldMock,
+            value: new Date(),
+            errors: [
+                {
+                    resultType: 'error',
+                    message: 'Error message'
+                }
+            ],
+            warnings: [],
+            setFieldValue: mockSetFieldValue
+        });
+        const errorMessages = screen.getAllByText(/Error message/i);
+        expect(errorMessages.length).toBeGreaterThan(0);
+        errorMessages.forEach((message)=>{
+            expect(message).toBeInTheDocument();
+        });
+    });
+    it('should display warning message when there are warnings', async ()=>{
+        const warnings = [
+            {
+                resultType: 'warning',
+                message: 'Warning message'
+            }
+        ];
+        await renderDateField({
+            field: dateFieldMock,
+            value: new Date(),
+            errors: [],
+            warnings: warnings,
+            setFieldValue: mockSetFieldValue
+        });
+        const warningMessages = screen.getAllByText(/Warning message/i);
+        expect(warningMessages.length).toBeGreaterThan(0);
+        warningMessages.forEach((message)=>{
+            expect(message).toBeInTheDocument();
+        });
+    });
+});

package/dist/components/inputs/file/file-thumbnail.component.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface FileThumbnailProps {
+    src: string;
+    title: string;
+    bytesContentFamily: string;
+    removeFileCb: () => void;
+}
+export declare function FileThumbnail({ bytesContentFamily, removeFileCb, ...thumbnailProps }: FileThumbnailProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=file-thumbnail.component.d.ts.map

package/dist/components/inputs/file/file-thumbnail.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-thumbnail.component.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/file/file-thumbnail.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAKvC,UAAU,kBAAkB;IAC1B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,kBAAkB,EAAE,MAAM,CAAC;IAC3B,YAAY,EAAE,MAAM,IAAI,CAAC;CAC1B;AAID,wBAAgB,aAAa,CAAC,EAAE,kBAAkB,EAAE,YAAY,EAAE,GAAG,cAAc,EAAE,EAAE,kBAAkB,qBAoBxG"}

package/dist/components/inputs/file/file-thumbnail.component.js

@@ -0,0 +1,51 @@
+import React, { useMemo } from "react";
+import styles from "./file-thumbnail.scss";
+import { CloseFilled, DocumentPdf, DocumentUnknown } from "@carbon/react/icons";
+import { Button } from "@carbon/react";
+export function FileThumbnail({ bytesContentFamily, removeFileCb, ...thumbnailProps }) {
+    const Thumbnail = useMemo(()=>{
+        switch(bytesContentFamily){
+            case 'image':
+                return ImageThumbnail;
+            case 'pdf':
+                return PDFThumbnail;
+            default:
+                return OtherThumbnail;
+        }
+    }, []);
+    return /*#__PURE__*/ React.createElement("div", {
+        className: styles.thumbnail
+    }, /*#__PURE__*/ React.createElement(Thumbnail, thumbnailProps), /*#__PURE__*/ React.createElement(Button, {
+        kind: "ghost",
+        className: styles.removeButton,
+        onClick: removeFileCb
+    }, /*#__PURE__*/ React.createElement(CloseFilled, {
+        size: 16,
+        className: styles.closeIcon
+    })));
+}
+function ImageThumbnail(props) {
+    return /*#__PURE__*/ React.createElement("img", {
+        className: styles.imageThumbnail,
+        src: props.src,
+        alt: props.title
+    });
+}
+function PDFThumbnail(props) {
+    return /*#__PURE__*/ React.createElement("div", {
+        className: styles.pdfThumbnail,
+        role: "button",
+        tabIndex: 0
+    }, /*#__PURE__*/ React.createElement(DocumentPdf, {
+        size: 24
+    }));
+}
+function OtherThumbnail(props) {
+    return /*#__PURE__*/ React.createElement("div", {
+        className: styles.pdfThumbnail,
+        role: "button",
+        tabIndex: 0
+    }, /*#__PURE__*/ React.createElement(DocumentUnknown, {
+        size: 24
+    }));
+}