add docs for ReadOnly

archived_versions/versioned_docs/version-1.0.0/studio/pageLoaders/pageLoaderOverview.md

@@ -327,6 +327,76 @@ self:disabled {
 
 :::
 
+#### Read-Only Mode
+
+The "Read Only" toggle in the properties panel allows you to set a component to read-only. Unlike disabled components, read-only components remain focusable, tab-navigable, and accessible to screen readers, and their values are included when submitting form data.
+
+1. **Build Mode**:
+
+    - **Behavior**: The component functions normally, allowing you to configure events and test interactions during design.
+
+    - **Appearance**: The component appears unchanged in build mode.
+
+2. **Rendering Mode**:
+
+    - **Behavior**: Users cannot modify the component's value through direct interaction. All events remain functional except for user-initiated input events. For example, if two Text Input components are bound to the same Qodly Source and one is read-only, changes made through the editable input are reflected in the read-only input, but the read-only input does not emit an `onChange` event.
+
+    - **Appearance**: The cursor changes to `default` to visually indicate that the component is not editable.
+
+      The following table shows all components that support the read-only property and whether they have native HTML `readonly` support:
+
+      | Component    | Type      | Native `readonly` Support |
+      |--------------|-----------|:------------------------:|
+      | Text Input   | text      | ✅                       |
+      | Text Input   | number    | ✅                       |
+      | Text Input   | password  | ✅                       |
+      | Text Input   | text area | ✅                       |
+      | Text Input   | date      | ✅                       |
+      | Text Input   | duration  | ✅                       |
+      | File Upload  | N/A       | ✅                       |
+      | Select Input | N/A       | ❌                       |
+      | Radio        | N/A       | ❌                       |
+      | Check Box    | N/A       | ❌                       |
+      | Range Input  | N/A       | ❌                       |
+      | Select Box   | N/A       | ❌                       |
+      | Matrix       | N/A       | ❌                       |
+      | Datatable    | N/A       | ❌                       |
+
+:::info Read-Only vs Disabled
+While both properties restrict user interaction, they differ in important ways:
+- **Read-only** components are tab-navigable and their values are submitted with forms. Screen readers can access them normally.
+- **Disabled** components are not tab-navigable and their values are not submitted with forms.
+- When both `readonly` and `disabled` are set on a component, `disabled` takes precedence.
+:::
+
+:::info HTML Attributes
+- Components with native `readonly` support receive both `readonly="true"` and `data-readonly="true"` attributes.
+- Components without native `readonly` support receive only the `data-readonly="true"` attribute.
+
+This provides a unified way to target all read-only components in CSS using `data-readonly`.
+:::
+
+:::tip Customizing Read-Only Rendering
+You can customize the appearance of read-only components using CSS classes.
+
+For components with native `readonly` support:
+
+```css
+self[readonly] {
+  /* your styles */
+}
+```
+
+For all read-only components (including those without native support):
+
+```css
+self[data-readonly] {
+  /* your styles */
+}
+```
+
+:::
+
 
 
 ### Data Access Category

archived_versions/versioned_docs/version-1.1.0/studio/pageLoaders/components/rangeinput.md

@@ -85,9 +85,6 @@ Within the **Range Input** component, an embedded **Slider Container** allows fo
             <li><strong>Min Value</strong>: Set the minimum value that users can select within the range.<br/></li>
             <li><strong>Max Value</strong>: Define the maximum value that users can select within the range.<br/></li>
             <li><strong>Step</strong>: Determine the increment value when users interact with the component.<br/></li>
-                <!-- "read only" removed when "disabled" was added
-                <li><strong>ReadOnly</strong>: Select this option if you want to use the slider as a visual representation of a value set elsewhere in the application, and that the user cannot change by clicking on the slider. <br/></li>
-              -->
         </ul>
     </Column.Item>
     <Column.Item width="35%">

archived_versions/versioned_docs/version-1.1.0/studio/pageLoaders/components/textinput.md

@@ -209,9 +209,6 @@ See <a href="componentsBasics#data-formatting">Formats</a> for a description of
 
 <br/>
 
-<!-- "read only" removed when "disabled" was added
-- **Read-Only Option**: Toggle the readOnly property to prevent users from editing the input content. This is useful when displaying pre-filled or calculated data that should not be modified. <img src={require('./img/textInput_readonly.png').default} style={{borderRadius: '6px', width: '15%'}} />
--->
 
 ## Data Integration
 

archived_versions/versioned_docs/version-1.1.0/studio/pageLoaders/pageLoaderOverview.md

@@ -327,6 +327,76 @@ self:disabled {
 
 :::
 
+#### Read-Only Mode
+
+The "Read Only" toggle in the properties panel allows you to set a component to read-only. Unlike disabled components, read-only components remain focusable, tab-navigable, and accessible to screen readers, and their values are included when submitting form data.
+
+1. **Build Mode**:
+
+    - **Behavior**: The component functions normally, allowing you to configure events and test interactions during design.
+
+    - **Appearance**: The component appears unchanged in build mode.
+
+2. **Rendering Mode**:
+
+    - **Behavior**: Users cannot modify the component's value through direct interaction. All events remain functional except for user-initiated input events. For example, if two Text Input components are bound to the same Qodly Source and one is read-only, changes made through the editable input are reflected in the read-only input, but the read-only input does not emit an `onChange` event.
+
+    - **Appearance**: The cursor changes to `default` to visually indicate that the component is not editable.
+
+      The following table shows all components that support the read-only property and whether they have native HTML `readonly` support:
+
+      | Component    | Type      | Native `readonly` Support |
+      |--------------|-----------|:------------------------:|
+      | Text Input   | text      | ✅                       |
+      | Text Input   | number    | ✅                       |
+      | Text Input   | password  | ✅                       |
+      | Text Input   | text area | ✅                       |
+      | Text Input   | date      | ✅                       |
+      | Text Input   | duration  | ✅                       |
+      | File Upload  | N/A       | ✅                       |
+      | Select Input | N/A       | ❌                       |
+      | Radio        | N/A       | ❌                       |
+      | Check Box    | N/A       | ❌                       |
+      | Range Input  | N/A       | ❌                       |
+      | Select Box   | N/A       | ❌                       |
+      | Matrix       | N/A       | ❌                       |
+      | Datatable    | N/A       | ❌                       |
+
+:::info Read-Only vs Disabled
+While both properties restrict user interaction, they differ in important ways:
+- **Read-only** components are tab-navigable and their values are submitted with forms. Screen readers can access them normally.
+- **Disabled** components are not tab-navigable and their values are not submitted with forms.
+- When both `readonly` and `disabled` are set on a component, `disabled` takes precedence.
+:::
+
+:::info HTML Attributes
+- Components with native `readonly` support receive both `readonly="true"` and `data-readonly="true"` attributes.
+- Components without native `readonly` support receive only the `data-readonly="true"` attribute.
+
+This provides a unified way to target all read-only components in CSS using `data-readonly`.
+:::
+
+:::tip Customizing Read-Only Rendering
+You can customize the appearance of read-only components using CSS classes.
+
+For components with native `readonly` support:
+
+```css
+self[readonly] {
+  /* your styles */
+}
+```
+
+For all read-only components (including those without native support):
+
+```css
+self[data-readonly] {
+  /* your styles */
+}
+```
+
+:::
+
 
 
 ### Data Access Category

docs/4DQodlyPro/notes.md

@@ -15,9 +15,6 @@ title: Release Notes
 
 - [Events Report](pageLoaders/pageLoaderOverview.md#events-report): Introduced the Events Report, a visual overview of all page events for components and Qodly sources complete with filtering, editing, and navigation options.
 
-... more to come...
-
-
 
 ## 4D 20 R10
 

docs/4DQodlyPro/pageLoaders/components/rangeinput.md

@@ -85,9 +85,6 @@ Within the **Range Input** component, an embedded **Slider Container** allows fo
             <li><strong>Min Value</strong>: Set the minimum value that users can select within the range.<br/></li>
             <li><strong>Max Value</strong>: Define the maximum value that users can select within the range.<br/></li>
             <li><strong>Step</strong>: Determine the increment value when users interact with the component.<br/></li>
-                <!-- "read only" removed when "disabled" was added
-                <li><strong>ReadOnly</strong>: Select this option if you want to use the slider as a visual representation of a value set elsewhere in the application, and that the user cannot change by clicking on the slider. <br/></li>
-              -->
         </ul>
     </Column.Item>
     <Column.Item width="35%">

docs/4DQodlyPro/pageLoaders/components/textinput.md

@@ -259,9 +259,6 @@ This gives users the flexibility to work with the time format they are most fami
 
 <br/>
 
-<!-- "read only" removed when "disabled" was added
-- **Read-Only Option**: Toggle the readOnly property to prevent users from editing the input content. This is useful when displaying pre-filled or calculated data that should not be modified. <img src={require('./img/textInput_readonly.png').default} style={{borderRadius: '6px', width: '15%'}} />
--->
 
 ## Data Integration
 

docs/4DQodlyPro/pageLoaders/pageLoaderOverview.md

@@ -365,6 +365,76 @@ self:disabled {
 
 :::
 
+#### Read-Only Mode
+
+The "Read Only" toggle in the properties panel allows you to set a component to read-only. Unlike disabled components, read-only components remain focusable, tab-navigable, and accessible to screen readers, and their values are included when submitting form data.
+
+1. **Build Mode**:
+
+    - **Behavior**: The component functions normally, allowing you to configure events and test interactions during design.
+
+    - **Appearance**: The component appears unchanged in build mode.
+
+2. **Rendering Mode**:
+
+    - **Behavior**: Users cannot modify the component's value through direct interaction. All events remain functional except for user-initiated input events. For example, if two Text Input components are bound to the same Qodly Source and one is read-only, changes made through the editable input are reflected in the read-only input, but the read-only input does not emit an `onChange` event.
+
+    - **Appearance**: The cursor changes to `default` to visually indicate that the component is not editable.
+
+      The following table shows all components that support the read-only property and whether they have native HTML `readonly` support:
+
+      | Component    | Type      | Native `readonly` Support |
+      |--------------|-----------|:------------------------:|
+      | Text Input   | text      | ✅                       |
+      | Text Input   | number    | ✅                       |
+      | Text Input   | password  | ✅                       |
+      | Text Input   | text area | ✅                       |
+      | Text Input   | date      | ✅                       |
+      | Text Input   | duration  | ✅                       |
+      | File Upload  | N/A       | ✅                       |
+      | Select Input | N/A       | ❌                       |
+      | Radio        | N/A       | ❌                       |
+      | Check Box    | N/A       | ❌                       |
+      | Range Input  | N/A       | ❌                       |
+      | Select Box   | N/A       | ❌                       |
+      | Matrix       | N/A       | ❌                       |
+      | Datatable    | N/A       | ❌                       |
+
+:::info Read-Only vs Disabled
+While both properties restrict user interaction, they differ in important ways:
+- **Read-only** components are tab-navigable and their values are submitted with forms. Screen readers can access them normally.
+- **Disabled** components are not tab-navigable and their values are not submitted with forms.
+- When both `readonly` and `disabled` are set on a component, `disabled` takes precedence.
+:::
+
+:::info HTML Attributes
+- Components with native `readonly` support receive both `readonly="true"` and `data-readonly="true"` attributes.
+- Components without native `readonly` support receive only the `data-readonly="true"` attribute.
+
+This provides a unified way to target all read-only components in CSS using `data-readonly`.
+:::
+
+:::tip Customizing Read-Only Rendering
+You can customize the appearance of read-only components using CSS classes.
+
+For components with native `readonly` support:
+
+```css
+self[readonly] {
+  /* your styles */
+}
+```
+
+For all read-only components (including those without native support):
+
+```css
+self[data-readonly] {
+  /* your styles */
+}
+```
+
+:::
+
 
 
 ### Data Access Category

versioned_docs/version-21-R2/4DQodlyPro/notes.md

@@ -15,8 +15,6 @@ title: Release Notes
 
 - [Events Report](pageLoaders/pageLoaderOverview.md#events-report): Introduced the Events Report, a visual overview of all page events for components and Qodly sources complete with filtering, editing, and navigation options.
 
-... more to come...
-
 
 
 ## 4D 20 R10

versioned_docs/version-21-R2/4DQodlyPro/pageLoaders/components/rangeinput.md

@@ -85,9 +85,6 @@ Within the **Range Input** component, an embedded **Slider Container** allows fo
             <li><strong>Min Value</strong>: Set the minimum value that users can select within the range.<br/></li>
             <li><strong>Max Value</strong>: Define the maximum value that users can select within the range.<br/></li>
             <li><strong>Step</strong>: Determine the increment value when users interact with the component.<br/></li>
-                <!-- "read only" removed when "disabled" was added
-                <li><strong>ReadOnly</strong>: Select this option if you want to use the slider as a visual representation of a value set elsewhere in the application, and that the user cannot change by clicking on the slider. <br/></li>
-              -->
         </ul>
     </Column.Item>
     <Column.Item width="35%">

versioned_docs/version-21-R2/4DQodlyPro/pageLoaders/components/textinput.md

@@ -259,9 +259,6 @@ This gives users the flexibility to work with the time format they are most fami
 
 <br/>
 
-<!-- "read only" removed when "disabled" was added
-- **Read-Only Option**: Toggle the readOnly property to prevent users from editing the input content. This is useful when displaying pre-filled or calculated data that should not be modified. <img src={require('./img/textInput_readonly.png').default} style={{borderRadius: '6px', width: '15%'}} />
--->
 
 ## Data Integration
 

versioned_docs/version-21-R2/4DQodlyPro/pageLoaders/pageLoaderOverview.md

@@ -365,6 +365,76 @@ self:disabled {
 
 :::
 
+#### Read-Only Mode
+
+The "Read Only" toggle in the properties panel allows you to set a component to read-only. Unlike disabled components, read-only components remain focusable, tab-navigable, and accessible to screen readers, and their values are included when submitting form data.
+
+1. **Build Mode**:
+
+    - **Behavior**: The component functions normally, allowing you to configure events and test interactions during design.
+
+    - **Appearance**: The component appears unchanged in build mode.
+
+2. **Rendering Mode**:
+
+    - **Behavior**: Users cannot modify the component's value through direct interaction. All events remain functional except for user-initiated input events. For example, if two Text Input components are bound to the same Qodly Source and one is read-only, changes made through the editable input are reflected in the read-only input, but the read-only input does not emit an `onChange` event.
+
+    - **Appearance**: The cursor changes to `default` to visually indicate that the component is not editable.
+
+      The following table shows all components that support the read-only property and whether they have native HTML `readonly` support:
+
+      | Component    | Type      | Native `readonly` Support |
+      |--------------|-----------|:------------------------:|
+      | Text Input   | text      | ✅                       |
+      | Text Input   | number    | ✅                       |
+      | Text Input   | password  | ✅                       |
+      | Text Input   | text area | ✅                       |
+      | Text Input   | date      | ✅                       |
+      | Text Input   | duration  | ✅                       |
+      | File Upload  | N/A       | ✅                       |
+      | Select Input | N/A       | ❌                       |
+      | Radio        | N/A       | ❌                       |
+      | Check Box    | N/A       | ❌                       |
+      | Range Input  | N/A       | ❌                       |
+      | Select Box   | N/A       | ❌                       |
+      | Matrix       | N/A       | ❌                       |
+      | Datatable    | N/A       | ❌                       |
+
+:::info Read-Only vs Disabled
+While both properties restrict user interaction, they differ in important ways:
+- **Read-only** components are tab-navigable and their values are submitted with forms. Screen readers can access them normally.
+- **Disabled** components are not tab-navigable and their values are not submitted with forms.
+- When both `readonly` and `disabled` are set on a component, `disabled` takes precedence.
+:::
+
+:::info HTML Attributes
+- Components with native `readonly` support receive both `readonly="true"` and `data-readonly="true"` attributes.
+- Components without native `readonly` support receive only the `data-readonly="true"` attribute.
+
+This provides a unified way to target all read-only components in CSS using `data-readonly`.
+:::
+
+:::tip Customizing Read-Only Rendering
+You can customize the appearance of read-only components using CSS classes.
+
+For components with native `readonly` support:
+
+```css
+self[readonly] {
+  /* your styles */
+}
+```
+
+For all read-only components (including those without native support):
+
+```css
+self[data-readonly] {
+  /* your styles */
+}
+```
+
+:::
+
 
 
 ### Data Access Category

versioned_docs/version-21/4DQodlyPro/notes.md

@@ -15,8 +15,6 @@ title: Release Notes
 
 - [Events Report](pageLoaders/pageLoaderOverview.md#events-report): Introduced the Events Report, a visual overview of all page events for components and Qodly sources complete with filtering, editing, and navigation options.
 
-... more to come...
-
 ### Breaking changes
 
 Starting with version 21, custom components must be migrated to the new structure supported by the Qodly CLI.