df-ae-forms-package 1.0.0

package/README.md

@@ -0,0 +1,458 @@
+# DF AE Forms Package
+
+A comprehensive React form preview component library with form controls, validation, conditional logic, and responsive design. This package provides a complete set of form components that can be used to build dynamic forms with real-time validation, conditional logic, threshold alerts, and component actions. Designed for integration with Angular/Ionic applications.
+
+## Features
+
+- 🎨 **Responsive Design**: Desktop, tablet, and mobile views
+- ✅ **Form Validation**: Real-time validation with custom error messages
+- 🔧 **Form Controls**: Complete set of form input components (text, number, email, textarea, select, checkbox, radio, segment, date/time, signature, file upload, location, heading, instructions, section, table, datagrid)
+- 🎯 **Conditional Logic**: Show/hide fields based on other field values
+- 📊 **Threshold Alerts**: Visual alerts when threshold conditions are met
+- 📝 **Component Actions**: Add notes, attachments, send emails, and raise issues for form components
+- 🌐 **Internationalization**: Built-in i18n support via react-i18next
+- 📱 **Device Preview**: Preview forms in different device sizes
+- 🎨 **Customizable Styling**: CSS variables for easy theming
+- 📦 **TypeScript**: Full TypeScript support with comprehensive type definitions
+- 🔄 **Drag and Drop**: Optional drag-and-drop support for form sections and grids (edit mode only)
+
+## Installation
+
+```bash
+npm install df-ae-forms-package
+```
+
+## Peer Dependencies
+
+This package requires the following peer dependencies to be installed in your project:
+
+```bash
+npm install react react-dom react-i18next lucide-react @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilities
+```
+
+## Quick Start
+
+### 1. Import CSS
+
+First, import the package styles in your application:
+
+```tsx
+import 'df-ae-forms-package/dist/index.css';
+```
+
+### 2. Setup i18n (Required)
+
+The package uses `react-i18next` for internationalization. You must set up i18n in your application:
+
+```tsx
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+
+i18n
+  .use(initReactI18next)
+  .init({
+    resources: {
+      en: {
+        translation: {
+          'formBuilder.submit': 'Submit'
+        }
+      }
+    },
+    lng: 'en',
+    fallbackLng: 'en'
+  });
+```
+
+### 3. Use the Component
+
+```tsx
+import React from 'react';
+import { DfFormPreview, FormComponentType } from 'df-ae-forms-package';
+import 'df-ae-forms-package/dist/index.css';
+
+const formComponents: FormComponentType[] = [
+  {
+    id: 'name',
+    name: 'text-input',
+    basic: {
+      label: 'Full Name',
+      placeholder: 'Enter your full name',
+      defaultValue: ''
+    },
+    validation: {
+      required: true,
+      minLength: 2,
+      maxLength: 50
+    }
+  },
+  {
+    id: 'email',
+    name: 'email-input',
+    basic: {
+      label: 'Email Address',
+      placeholder: 'Enter your email',
+      defaultValue: ''
+    },
+    validation: {
+      required: true
+    }
+  }
+];
+
+function MyForm() {
+  const handleSubmit = (formData: Record<string, any>) => {
+    console.log('Form submitted:', formData);
+  };
+
+  const handleFormDataChange = (formData: Record<string, any>) => {
+    console.log('Form data changed:', formData);
+  };
+
+  return (
+    <DfFormPreview
+      formComponents={formComponents}
+      currentDevice="desktop"
+      mode="test"
+      onSubmit={handleSubmit}
+      onFormDataChange={handleFormDataChange}
+    />
+  );
+}
+```
+
+## Components
+
+### DfFormPreview
+
+The main form preview component that renders all form controls.
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `formComponents` | `FormComponentType[]` | `[]` | Array of form components to render |
+| `currentDevice` | `'desktop' \| 'tablet' \| 'mobile'` | `'desktop'` | Device type for responsive preview |
+| `mode` | `'edit' \| 'preview' \| 'test'` | `'test'` | Form mode: edit (with drag-drop), preview (readonly), test (interactive) |
+| `initialFormData` | `Record<string, any>` | `{}` | Initial form data with default values |
+| `onSubmit` | `(formData: Record<string, any>) => void` | - | Callback when form is submitted |
+| `onFormDataChange` | `(formData: Record<string, any>) => void` | - | Callback when form data changes |
+| `onComponentUpdate` | `(change: IFormControlChange) => void` | - | Callback when a component value changes |
+| `selectedComponent` | `string \| null` | `null` | Currently selected component ID (for edit mode) |
+| `formTemplateId` | `string` | - | Form template ID (for component actions) |
+| `onThresholdActionCompletion` | `(conditionId: string, action: string, completed: boolean) => void` | - | Callback when threshold action is completed |
+| `onThresholdIssueRaised` | `(conditionId: string) => void` | - | Callback when threshold issue is raised |
+| `onNotesChange` | `(componentId: string, notes: string) => void` | - | Callback when component notes change |
+| `onAttachmentChange` | `(componentId: string, attachments: File[]) => void` | - | Callback when component attachments change |
+
+### Form Controls
+
+The package includes the following form control components:
+
+- **DfFormInput**: Text, number, and email input fields
+- **DfFormTextarea**: Multi-line text input
+- **DfFormSelect**: Dropdown selection
+- **DfFormCheckbox**: Checkbox inputs
+- **DfFormRadio**: Radio button selection
+- **DfFormSegment**: Segment/button group selection
+- **DfFormDateTime**: Date and time inputs
+- **DfFormSignature**: Signature pad component
+- **DfFormFileUpload**: File upload component
+- **DfFormLocation**: Location picker component
+- **DfFormHeading**: Heading component for form sections
+- **DfFormInstruction**: Instruction text component
+- **DfFormSection**: Section container with collapsible children
+- **DfFormDataGrid**: Data grid component for tabular data
+- **DfFormTable**: Table component with nested form controls
+- **DfFormComments**: Comments component
+- **DfFormErrorMsg**: Error message display component
+
+## Conditional Logic
+
+You can show/hide fields based on other field values:
+
+```tsx
+{
+  id: 'has-phone',
+  name: 'checkbox',
+  basic: {
+    label: 'Do you have a phone number?',
+    defaultValue: false
+  },
+  options: [
+    { label: 'Yes', value: 'yes' }
+  ]
+},
+{
+  id: 'phone',
+  name: 'text-input',
+  basic: {
+    label: 'Phone Number',
+    placeholder: 'Enter phone number',
+    defaultValue: ''
+  },
+  conditional: {
+    action: 'show',
+    when: 'all',
+    conditions: [{
+      fieldId: 'has-phone',
+      operator: 'equals',
+      value: 'yes'
+    }]
+  }
+}
+```
+
+## Threshold Alerts
+
+Components can have threshold conditions that trigger alerts:
+
+```tsx
+{
+  id: 'temperature',
+  name: 'number-input',
+  basic: {
+    label: 'Temperature',
+    defaultValue: 0
+  },
+  threshold: {
+    conditions: [{
+      id: 'high-temp',
+      operator: 'greaterThan',
+      value: 100,
+      alertMessage: 'Temperature is too high!',
+      actions: ['notes', 'attachments', 'email']
+    }]
+  }
+}
+```
+
+## Component Actions
+
+In `test` mode, components can have action features:
+- **Notes**: Add notes to components
+- **Attachments**: Attach files to components
+- **Email**: Send email notifications
+- **Raise Issue**: Raise an issue for the component
+
+## Styling
+
+The package uses CSS variables for theming. You can override these variables in your application:
+
+```css
+:root {
+  --df-color-primary: #3b82f6;
+  --df-color-primary-hover: #2563eb;
+  --df-color-primary-disabled: #9ca3af;
+  --df-color-error-primary: #ef4444;
+  --df-color-success-primary: #10b981;
+  --df-color-text-dark: #1f2937;
+  --df-color-text-light: #6b7280;
+  --df-color-fb-container: #ffffff;
+  --df-color-fb-border: #e5e7eb;
+  --df-color-fb-bg: #f9fafb;
+}
+```
+
+Import the design system CSS to get all the base styles:
+
+```tsx
+import 'df-ae-forms-package/dist/index.css';
+```
+
+## TypeScript Support
+
+The package is fully typed with TypeScript. All types are exported:
+
+```tsx
+import type {
+  FormComponentType,
+  IFormControlChange,
+  IFormValidationErrors,
+  DfFormPreviewProps,
+  // ... and many more
+} from 'df-ae-forms-package';
+```
+
+## Development
+
+### Prerequisites
+
+- Node.js >= 14.0.0
+- npm >= 6.0.0
+
+### Setup
+
+1. Clone the repository
+2. Install dependencies:
+   ```bash
+   cd df-ae-forms-package
+   npm install
+   ```
+
+### Available Scripts
+
+- `npm run build` - Build the package for production
+- `npm run build:watch` - Build and watch for changes
+- `npm run dev` - Development mode with watch
+- `npm run clean` - Clean the dist directory
+- `npm run lint` - Run ESLint
+- `npm run type-check` - Run TypeScript type checking
+
+### Building
+
+```bash
+npm run build
+```
+
+This will create the following files in the `dist` directory:
+- `index.js` - CommonJS build
+- `index.esm.js` - ES modules build
+- `index.d.ts` - TypeScript declarations
+- `index.css` - Compiled CSS
+
+## Publishing
+
+### Prerequisites for Publishing
+
+1. **NPM Account**: Create an account at [npmjs.com](https://www.npmjs.com)
+2. **Login to NPM**: Run `npm login` in your terminal
+3. **Package Name**: Ensure the package name `df-ae-forms-package` is available
+
+### Publishing Steps
+
+#### 1. Prepare the Package
+
+```bash
+# Clean previous builds
+npm run clean
+
+# Build the package
+npm run build
+
+# Run type checking
+npm run type-check
+
+# Run linting
+npm run lint
+```
+
+#### 2. Test the Package Locally
+
+```bash
+# Pack the package to test it
+npm pack
+
+# This creates a .tgz file that you can test locally
+# Install it in a test project:
+# npm install /path/to/df-ae-forms-package-1.0.0.tgz
+```
+
+#### 3. Publish to NPM
+
+**For Patch Version (1.0.0 → 1.0.1):**
+```bash
+npm run publish:patch
+```
+
+**For Minor Version (1.0.0 → 1.1.0):**
+```bash
+npm run publish:minor
+```
+
+**For Major Version (1.0.0 → 2.0.0):**
+```bash
+npm run publish:major
+```
+
+**Manual Publishing:**
+```bash
+# Update version manually
+npm version patch  # or minor, major
+
+# Publish
+npm publish
+```
+
+#### 4. Verify Publication
+
+1. Check your package on [npmjs.com](https://www.npmjs.com/package/df-ae-forms-package)
+2. Test installation in a new project:
+   ```bash
+   npm install df-ae-forms-package
+   ```
+
+### Publishing Checklist
+
+- [ ] All tests pass
+- [ ] TypeScript compilation succeeds
+- [ ] ESLint passes
+- [ ] Package builds successfully
+- [ ] README.md is up to date
+- [ ] Version number is correct
+- [ ] All dependencies are properly listed
+- [ ] Package is tested locally with `npm pack`
+
+## Integration with Angular/Ionic
+
+This package is designed to work with Angular/Ionic applications. To use it:
+
+1. Install the package and peer dependencies
+2. Import the CSS file in your Angular application
+3. Use React components via `@angular/react` or a similar bridge
+4. Ensure i18n is properly configured
+
+## Troubleshooting
+
+### Styles Not Reflecting
+
+- Make sure you're importing the CSS file: `import 'df-ae-forms-package/dist/index.css';`
+- Check that CSS variables are properly defined in your application
+- Verify that the build includes the CSS file in the dist directory
+
+### Components Not Visible
+
+- Check that `formComponents` array is not empty
+- Verify that conditional logic is not hiding components
+- Ensure that component IDs are unique
+
+### i18n Issues
+
+- Make sure `react-i18next` is properly configured
+- Verify that translation keys exist in your i18n resources
+- Check that the i18n provider wraps your application
+
+## Contributing
+
+1. Fork the repository
+2. Create a feature branch
+3. Make your changes
+4. Add tests if applicable
+5. Run the build and tests
+6. Submit a pull request
+
+## License
+
+MIT License - see LICENSE file for details.
+
+## Support
+
+For issues and questions:
+- Create an issue on GitHub
+- Check the documentation
+- Review the examples in the README
+
+## Changelog
+
+### 1.0.0
+- Initial release
+- Complete form preview component
+- All form controls (input, textarea, select, checkbox, radio, segment, date, signature, file upload, location, heading, instructions, section, table, datagrid)
+- Validation system
+- Conditional logic
+- Threshold alerts
+- Component actions (notes, attachments, email, raise issue)
+- Responsive design
+- TypeScript support
+- i18n support
+- Drag and drop support (edit mode)
+

package/dist/ComponentActionFeatures.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { FormComponentType as TFormComponent } from '../df-form-controls/df-form-preview-interfaces';
+import './ComponentActionFeatures.scss';
+interface IComponentActionFeaturesProps {
+    component: TFormComponent;
+    mode: 'edit' | 'preview' | 'test';
+    formTemplateId?: string;
+    formValue?: any;
+    onNotesChange?: (notes: string) => void;
+    onAttachmentChange?: (files: File[] | null) => void;
+    notes?: string;
+    attachments?: File[] | null;
+    onThresholdActionCompletion?: (conditionId: string, action: 'notes' | 'attachments' | 'email', completed: boolean) => void;
+    onThresholdIssueRaised?: (conditionId: string) => void;
+    onBasicPropertyActionCompletion?: (action: 'notes' | 'attachments' | 'email' | 'issue', completed: boolean) => void;
+}
+export declare const ComponentActionFeatures: React.FC<IComponentActionFeaturesProps>;
+export {};
+//# sourceMappingURL=ComponentActionFeatures.d.ts.map

package/dist/ComponentActionFeatures.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComponentActionFeatures.d.ts","sourceRoot":"","sources":["../src/ComponentActionFeatures.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAExE,OAAO,EAAE,iBAAiB,IAAI,cAAc,EAAE,MAAM,gDAAgD,CAAC;AAErG,OAAO,gCAAgC,CAAC;AA0FxC,UAAU,6BAA6B;IACrC,SAAS,EAAE,cAAc,CAAC;IAC1B,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,CAAC;IAClC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,GAAG,CAAC;IAChB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG,IAAI,KAAK,IAAI,CAAC;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;IAC5B,2BAA2B,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,GAAG,aAAa,GAAG,OAAO,EAAE,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3H,sBAAsB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IACvD,+BAA+B,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,GAAG,aAAa,GAAG,OAAO,GAAG,OAAO,EAAE,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CACrH;AAED,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,6BAA6B,CAwmB3E,CAAC"}

package/dist/DfFormPreview.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { FormComponentType } from './df-form-controls/df-form-preview-interfaces';
+import './DfFormPreview.scss';
+export type DeviceType = 'desktop' | 'tablet' | 'mobile';
+export interface DfFormPreviewProps {
+    formComponents: FormComponentType[];
+    formData?: any;
+    currentDevice?: DeviceType;
+    isPreviewMode?: boolean;
+    initialFormData?: FormComponentType[];
+    onSubmit?: (formData: FormComponentType[]) => void;
+    onFormDataChange?: (formData: FormComponentType[]) => void;
+    formTitle?: string;
+    formDescription?: string;
+    formTemplateId?: string;
+    onComponentSelect?: (component: FormComponentType) => void;
+    onComponentDelete?: (component: FormComponentType, event: React.MouseEvent) => void;
+    onComponentEdit?: (component: FormComponentType) => void;
+    onComponentUpdate?: (componentId: string, updates: Partial<FormComponentType>) => void;
+    selectedComponent?: FormComponentType | null;
+}
+export declare const DfFormPreview: React.FC<DfFormPreviewProps>;
+export default DfFormPreview;
+//# sourceMappingURL=DfFormPreview.d.ts.map

package/dist/DfFormPreview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DfFormPreview.d.ts","sourceRoot":"","sources":["../src/DfFormPreview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAA;AAE/D,OAAO,EACL,iBAAiB,EAGlB,MAAM,+CAA+C,CAAA;AAwBtD,OAAO,sBAAsB,CAAA;AAK7B,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAA;AAExD,MAAM,WAAW,kBAAkB;IACjC,cAAc,EAAE,iBAAiB,EAAE,CAAA;IACnC,QAAQ,CAAC,EAAE,GAAG,CAAA;IACd,aAAa,CAAC,EAAE,UAAU,CAAA;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,eAAe,CAAC,EAAE,iBAAiB,EAAE,CAAA;IACrC,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,iBAAiB,EAAE,KAAK,IAAI,CAAA;IAClD,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,iBAAiB,EAAE,KAAK,IAAI,CAAA;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,cAAc,CAAC,EAAE,MAAM,CAAA;IAEvB,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,iBAAiB,KAAK,IAAI,CAAA;IAC1D,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,iBAAiB,EAAE,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAA;IACnF,eAAe,CAAC,EAAE,CAAC,SAAS,EAAE,iBAAiB,KAAK,IAAI,CAAA;IACxD,iBAAiB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAA;IACtF,iBAAiB,CAAC,EAAE,iBAAiB,GAAG,IAAI,CAAA;CAC7C;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA6lCtD,CAAA;AAED,eAAe,aAAa,CAAA"}

package/dist/ThresholdAlert.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import './ThresholdAlert.scss';
+interface IThresholdAlertProps {
+    component: any;
+    condition: any;
+    currentValue: string | number;
+    thresholdValue: string | number;
+    formTemplateId?: string;
+    onDismiss?: () => void;
+    onIssueRaised?: (conditionId: string) => void;
+    isIssueRaised?: boolean;
+}
+export declare const ThresholdAlert: React.FC<IThresholdAlertProps>;
+export {};
+//# sourceMappingURL=ThresholdAlert.d.ts.map

package/dist/ThresholdAlert.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThresholdAlert.d.ts","sourceRoot":"","sources":["../src/ThresholdAlert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAiBhE,OAAO,uBAAuB,CAAC;AAE/B,UAAU,oBAAoB;IAC5B,SAAS,EAAE,GAAG,CAAC;IACf,SAAS,EAAE,GAAG,CAAC;IACf,YAAY,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B,cAAc,EAAE,MAAM,GAAG,MAAM,CAAC;IAChC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,aAAa,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAkLzD,CAAC"}

package/dist/components/ComponentSubmissionActions.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { FormComponentType as TFormComponent } from '../df-form-controls/df-form-preview-interfaces';
+import './ComponentSubmissionActions.scss';
+interface IComponentSubmissionActionsProps {
+    component: TFormComponent;
+}
+export declare const ComponentSubmissionActions: React.FC<IComponentSubmissionActionsProps>;
+export {};
+//# sourceMappingURL=ComponentSubmissionActions.d.ts.map

package/dist/components/ComponentSubmissionActions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComponentSubmissionActions.d.ts","sourceRoot":"","sources":["../../src/components/ComponentSubmissionActions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,iBAAiB,IAAI,cAAc,EAAE,MAAM,gDAAgD,CAAC;AACrG,OAAO,mCAAmC,CAAC;AAE3C,UAAU,gCAAgC;IACxC,SAAS,EAAE,cAAc,CAAC;CAC3B;AAsDD,eAAO,MAAM,0BAA0B,EAAE,KAAK,CAAC,EAAE,CAAC,gCAAgC,CAqCjF,CAAC"}

package/dist/components/RaiseIssueModal.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { FormComponentType } from '../df-form-controls/df-form-preview-interfaces';
+interface IRaiseIssueModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onSuccess?: (createdIssue?: any) => void;
+    component?: FormComponentType;
+    formTemplateId?: string;
+    formInstanceId?: string;
+    notes?: string;
+    attachments?: File[] | null;
+    issue?: any | null;
+}
+/**
+ * RaiseIssueModal - Stub implementation for package
+ *
+ * This is a stub component that can be replaced by the consuming application
+ * with their own implementation that integrates with their issue management system.
+ *
+ * For now, it simply calls onSuccess when the user "raises" an issue.
+ */
+export declare const RaiseIssueModal: React.FC<IRaiseIssueModalProps>;
+export {};
+//# sourceMappingURL=RaiseIssueModal.d.ts.map

package/dist/components/RaiseIssueModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RaiseIssueModal.d.ts","sourceRoot":"","sources":["../../src/components/RaiseIssueModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,gDAAgD,CAAC;AAEnF,UAAU,qBAAqB;IAC7B,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,CAAC,YAAY,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IACzC,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;IAC5B,KAAK,CAAC,EAAE,GAAG,GAAG,IAAI,CAAC;CACpB;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAuG3D,CAAC"}

package/dist/df-form-controls/df-form-checkbox/DfFormCheckbox.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { ICheckboxComponent, IFormControlChange, IFormValidationErrors } from '../df-form-preview-interfaces';
+interface DfFormCheckboxProps {
+    id: string;
+    properties: ICheckboxComponent;
+    validationErrors?: IFormValidationErrors;
+    formValue?: string[];
+    readonly?: boolean;
+    disabled?: boolean;
+    touchedFields?: Record<string, boolean>;
+    formSubmitted?: boolean;
+    mode?: 'edit' | 'preview' | 'test';
+    onValueChange?: (change: IFormControlChange) => void;
+    onBlur?: () => void;
+    onFocus?: () => void;
+    className?: string;
+    hideLabel?: boolean;
+    showCommentsInPreview?: boolean;
+}
+export declare const DfFormCheckbox: React.FC<DfFormCheckboxProps>;
+export default DfFormCheckbox;
+//# sourceMappingURL=DfFormCheckbox.d.ts.map

package/dist/df-form-controls/df-form-checkbox/DfFormCheckbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DfFormCheckbox.d.ts","sourceRoot":"","sources":["../../../src/df-form-controls/df-form-checkbox/DfFormCheckbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAChE,OAAO,EACL,kBAAkB,EAClB,kBAAkB,EAClB,qBAAqB,EACtB,MAAM,+BAA+B,CAAC;AAGvC,UAAU,mBAAmB;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,UAAU,EAAE,kBAAkB,CAAC;IAC/B,gBAAgB,CAAC,EAAE,qBAAqB,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACxC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,CAAC;IACnC,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACrD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA8MxD,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/df-form-controls/df-form-checkbox/index.d.ts

@@ -0,0 +1,3 @@
+export { DfFormCheckbox } from './DfFormCheckbox';
+export { default } from './DfFormCheckbox';
+//# sourceMappingURL=index.d.ts.map

package/dist/df-form-controls/df-form-checkbox/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/df-form-controls/df-form-checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/df-form-controls/df-form-comments/DfFormComments.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import './df-form-comments.scss';
+interface DfFormCommentsProps {
+    comment?: string;
+    onSave?: (comment: string) => void;
+    placeholder?: string;
+    className?: string;
+    disabled?: boolean;
+}
+export declare const DfFormComments: React.FC<DfFormCommentsProps>;
+export default DfFormComments;
+//# sourceMappingURL=DfFormComments.d.ts.map

package/dist/df-form-controls/df-form-comments/DfFormComments.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DfFormComments.d.ts","sourceRoot":"","sources":["../../../src/df-form-controls/df-form-comments/DfFormComments.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAChE,OAAO,yBAAyB,CAAC;AAEjC,UAAU,mBAAmB;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAqFxD,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/df-form-controls/df-form-comments/index.d.ts

@@ -0,0 +1,3 @@
+export { DfFormComments } from './DfFormComments';
+export { default } from './DfFormComments';
+//# sourceMappingURL=index.d.ts.map

package/dist/df-form-controls/df-form-comments/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/df-form-controls/df-form-comments/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/df-form-controls/df-form-date-time/DfFormDateTime.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { IDateComponent, IFormControlChange, IFormValidationErrors } from '../df-form-preview-interfaces';
+interface DfFormDateTimeProps {
+    id: string;
+    properties: IDateComponent;
+    validationErrors?: IFormValidationErrors;
+    formValue?: string;
+    readonly?: boolean;
+    disabled?: boolean;
+    touchedFields?: Record<string, boolean>;
+    formSubmitted?: boolean;
+    mode?: 'edit' | 'preview' | 'test';
+    onValueChange?: (change: IFormControlChange) => void;
+    onBlur?: () => void;
+    onFocus?: () => void;
+    className?: string;
+    hideLabel?: boolean;
+}
+export declare const DfFormDateTime: React.FC<DfFormDateTimeProps>;
+export default DfFormDateTime;
+//# sourceMappingURL=DfFormDateTime.d.ts.map

package/dist/df-form-controls/df-form-date-time/DfFormDateTime.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DfFormDateTime.d.ts","sourceRoot":"","sources":["../../../src/df-form-controls/df-form-date-time/DfFormDateTime.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAChE,OAAO,EACL,cAAc,EACd,kBAAkB,EAClB,qBAAqB,EACtB,MAAM,+BAA+B,CAAC;AAGvC,UAAU,mBAAmB;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,UAAU,EAAE,cAAc,CAAC;IAC3B,gBAAgB,CAAC,EAAE,qBAAqB,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACxC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,CAAC;IACnC,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACrD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA+PxD,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/df-form-controls/df-form-date-time/index.d.ts

@@ -0,0 +1,3 @@
+export { DfFormDateTime } from './DfFormDateTime';
+export { default } from './DfFormDateTime';
+//# sourceMappingURL=index.d.ts.map

package/dist/df-form-controls/df-form-date-time/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/df-form-controls/df-form-date-time/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/df-form-controls/df-form-error-msg/DfFormErrorMsg.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ErrorMessageProps } from '../df-form-preview-interfaces';
+export declare const DfFormErrorMsg: React.FC<ErrorMessageProps>;
+export default DfFormErrorMsg;
+//# sourceMappingURL=DfFormErrorMsg.d.ts.map