A modern, theme-aware date and datetime picker component.

Attributes

Events

The component dispatches a change event when a new date or time is selected. The new value is available in event.detail.

Usage Example

For form submissions, it's best practice to pair the datepicker with a hidden input that stores the ISO-formatted value.

<!-- In your form -->
<div class="mb-3">
    <label for="my-date-picker" class="form-label">Appointment Date</label>
    
    <!-- The component for the user -->
    <intex-datepicker id="my-date-picker" mode="datetime" value="2024-08-15 10:00"></intex-datepicker>
    
    <!-- The hidden input that gets submitted -->
    <input type="hidden" name="appointment_date" id="my-date-value" value="2024-08-15 10:00">
</div>

<script>
    const picker = document.getElementById('my-date-picker');
    const hiddenInput = document.getElementById('my-date-value');
    
    picker.addEventListener('change', (event) => {
        hiddenInput.value = event.detail;
    });
</script>
                            

A drag-and-drop file upload component that integrates seamlessly with standard forms.

Important: This component works by wrapping a standard <input type="file">, which you must place inside it in your HTML. This ensures native form submission compatibility.

Attributes

Usage Example

The component requires a standard file input and a hidden input for the delete flag inside its light DOM.

<!-- Example for a new upload -->
<intex-dropzone label="Upload Profile Picture" name="profile_pic" accept="image/png, image/jpeg">
    <!-- This input is controlled by the component -->
    <input type="file" name="profile_pic">
</intex-dropzone>

<!-- Example with an existing file -->
<intex-dropzone 
    label="Contract Document" 
    name="contract_file" 
    current-file-url="/files/contract.pdf" 
    current-file-name="Contract_2024.pdf">
    
    <!-- The file input for a new upload -->
    <input type="file" name="contract_file">
    
    <!-- Hidden input to signal deletion on the server -->
    <input type="hidden" name="delete_file_contract" value="0">
</intex-dropzone>

<script>
    // Script to connect the delete checkbox to the hidden input
    document.querySelector('intex-dropzone[name="contract_file"]').addEventListener('delete-change', (e) => {
        const hiddenInput = document.querySelector('input[name="delete_file_contract"]');
        if (hiddenInput) {
            hiddenInput.value = e.detail ? '1' : '0';
        }
    });
</script>
                            

A lightweight, theme-aware WYSIWYG editor.

Important: The editor's content is not part of the standard form submission. You must use JavaScript to sync its content with a hidden <textarea>.

Attributes

Properties & Events

• Property: .value: Get or set the editor's HTML content programmatically.
• Event: input: Fires whenever the content inside the editor changes.

Usage Example

Always pair the editor with a textarea to ensure the content is submitted with the form.

<div class="mb-3">
    <label class="form-label">Product Description</label>
    
    <!-- The hidden textarea that gets submitted -->
    <textarea name="description" id="description-source" class="d-none">
        <p>Initial <b>HTML</b> content.</p>
    </textarea>
    
    <!-- The editor component for the user -->
    <intex-editor id="description-editor" config="pro"></intex-editor>
</div>

<script>
    const editor = document.getElementById('description-editor');
    const source = document.getElementById('description-source');

    // 1. Set initial value from textarea
    editor.value = source.value;

    // 2. Sync editor content back to textarea on change
    editor.addEventListener('input', () => {
        source.value = editor.value;
    });
</script>