OImageEditor documentation

_data/components/dataViewData/01.tableConfig.yml

@@ -0,0 +1,59 @@
+directive: "table-config"
+title: "Table configuration"
+
+inheritedAttributes:
+  [
+    {
+      component: "OTableComponent",
+      path: "components/data/table/api",
+      attributes:
+        [
+          "visible",
+          "detailButtonInRow",
+          "detailButtonInRowIcon",
+          "editButtonInRow",
+          "editButtonInRowIcon",
+          "editFormRoute",
+          "rowHeight",
+          "autoAdjust",
+          "autoAlignTitles",
+          "collapseGroupedColumns",
+          "columnsVisibilityButton",
+          "defaultVisibleColumns",
+          "deleteButton",
+          "disableSelectionFunction",
+          "detailMode",
+          "editionMode",
+          "enabled",
+          "exportButton",
+          "exportServiceType",
+          "filterColumnActiveByDefault",
+          "groupable",
+          "groupedColumns",
+          "horizontalScroll",
+          "keepSelectedItems",
+          "multipleSort",
+          "nonHidableColumns",
+          "pageSizeOptions",
+          "orderable",
+          "quickFilterFunction",
+          "resizable",
+          "rowClass",
+          "selectAllCheckbox",
+          "selectAllCheckboxVisible",
+          "selectionMode",
+          "showConfigurationOption",
+          "showExpandableIconFunction",
+          "showFilterOption",
+          "showPaginatorFirstLastButtons",
+          "showReportOnDemandOption",
+          "showChartsOnDemandOption",
+          "showResetWidthOption",
+          "sortColumns",
+          "virtualScroll",
+          "visibleColumns",
+          "visibleExportDialogButtons",
+          "selectionOnRowClick",
+        ],
+    },
+  ]

_data/components/dataViewData/02.gridConfig.yml

@@ -0,0 +1,28 @@
+directive: "grid-config"
+title: "Grid configuration"
+
+inheritedAttributes:
+  [
+    {
+      component: "OGridComponent",
+      path: "components/data/grid/api",
+      attributes:
+        [
+          "enabled",
+          "visible",
+          "cols",
+          "gridItemHeight",
+          "gutterSize",
+          "insertButtonFloatable",
+          "insertButtonPosition",
+          "pageSizeOptions",
+          "orderable",
+          "quickFilterColumns",
+          "showFooter",
+          "showPageSize",
+          "sortColumn",
+          "sortableColumns",
+          "detailMode",
+        ],
+    },
+  ]

_data/components/image-editor.yml

@@ -0,0 +1,39 @@
+directive: "o-image-editor"
+version: "15.0.0"
+
+apiTitle: "OImageEditorComponent"
+
+attributes:
+  [
+    {
+      name: "image",
+      type: "base64",
+      default: "",
+      required: "",
+      description: "Initial image to load into the editor (e.g., 'data:image/png;base64,...'). If empty, the component shows the upload/drop zone.",
+    },
+    {
+      name: "actions-position",
+      type: "'top' | 'bottom'",
+      default: "top",
+      required: "",
+      description: "Controls where the save and reset buttons are rendered inside the component. Use 'bottom' when the editor is used inside a modal/dialog to keep actions always reachable.",
+    },
+    {
+      name: "save-target",
+      type: "'download' | 'base64'",
+      default: "download",
+      required: "",
+      description: "Defines the behavior of the Save action. 'download' triggers a client-side download of the resulting image; 'base64' returns the resulting image as a base64 string through the component output event.",
+    },
+  ]
+
+outputs: [
+  {
+    name: "onSaveBase64",
+    description:
+      "Event triggered when the user clicks Save and the resulting edited image is generated. Emits the final image as a data URL string (e.g., 'data:image/png;base64,...')."
+  }
+]
+
+extraComponents: "imageEditorData"

_data/menu_descriptions.yml

@@ -432,3 +432,6 @@ sections:
     - url: "/extra-components/data-view/overview"
       title: "Data View"
       description: "Display the same dataset using two different visualizations"
+    - url: "/extra-components/image-editor/overview"
+      title: "Image Editor"
+      description: "Display and refine the same image through different editing interactions"

docs/extra-components/image-editor/o-image-editor.component-api.md

@@ -0,0 +1,7 @@
+---
+layout: o-component
+permalink: /extra-components/image-editor/api
+title: "Image Editor"
+comp: image-editor
+nav_exclude: true
+---

docs/extra-components/image-editor/o-image-editor.component.md

@@ -0,0 +1,59 @@
+---
+layout: o-component
+permalink: /extra-components/image-editor/overview
+title: "Image Editor"
+comp: image-editor
+parent: Extra-components
+nav_order: 3
+---
+{% include base_path %}
+{% include toc %}
+
+
+The `o-image-editor` component wraps `ngx-image-cropper` and provides a simplified image cropping + zooming UI consistent with the Ontimize Web design system. It supports:
+
+- Uploading and editing images.
+- Dynamic **aspect ratio** changes and orientation.
+- **Zoom** slider up to a configurable max.
+- Emitting the final cropped image on apply.
+
+## Supported input formats (upload)
+
+The image picker accepts the following formats:
+
+- **JPEG** (`.jpg`, `.jpeg`)
+- **PNG** (`.png`)
+- **GIF** (`.gif`)
+
+## Supported output formats (save/export)
+
+When saving the edited image, the component can export as:
+
+- **PNG** (`.png`)
+- **JPEG** (`.jpg`, `.jpeg`)
+- **WebP** (`.webp`)
+
+Notes:
+- If the browser supports a native “Save As…” dialog (File System Access API), the user can choose the output extension and the component will export accordingly.
+- In the fallback download flow (no native save dialog), the downloaded format matches the cropper output configuration (by default, the cropper is set to `format="jpeg"`).
+
+
+## Examples
+
+Below are some example screenshots to illustrate the `o-image-editor` workflow and available tools.
+
+### Upload
+
+![Upload screen](../../assets/images/extra-components/image-editor/example-upload.png)
+
+### Crop
+
+![Crop tool](../../assets/images/extra-components/image-editor/example-crop.png)
+
+### Resize
+
+![Resize tool](../../assets/images/extra-components/image-editor/example-resize.png)
+
+## Demo
+You can see this and more examples of this component in the [OntimizeWeb playground]({{site.playgroundurl}}/main/media/editor-image).
+