OImageEditor documentation

_data/components/data-view.yml

@@ -0,0 +1,101 @@
+directive: "o-data-view"
+version: "15.0.0"
+
+apiTitle: "ODataViewComponent"
+inheritedAttributes:
+  [
+    {
+      component: "OServiceBaseComponent",
+      path: "components/service/service-base/api",
+      attributes:
+        [
+          "attr",
+          "columns",
+          "configure-service-args",
+          "delete-method",
+          "entity",
+          "insert-method",
+          "keys",
+          "pageable",
+          "paginated-query-method",
+          "parent-keys",
+          "query-fallback-function",
+          "query-method",
+          "query-on-bind",
+          "query-on-init",
+          "query-rows",
+          "query-with-null-parent-keys",
+          "service",
+          "service-type",
+          "static-data",
+          "store-state",
+          "update-method",
+          "show-buttons-text",
+          "quick-filter-placeholder",
+          "insert-button",
+          "refresh-button",
+          "fixed-header",
+          "controls",
+          "title",
+          "quick-filter",
+          "quick-filter-appearance",
+          "recursive-detail",
+          "recursive-edit",
+          "recursive-insert",
+          "detail-form-route",
+          "pagination-controls",
+          "insert-form-route",
+          "filter-case-sensitive",
+        ],
+    },
+  ]
+
+attributes:
+  [
+    {
+      name: "default-view",
+      type: "'table' | 'grid'",
+      default: "table",
+      required: "",
+      description: "Default view rendered by the component.",
+    },
+    {
+      name: "toggle-button",
+      type: "no | false | yes | true",
+      default: "yes",
+      required: "",
+      description: "Indicates whether or not to show the built-in view toggle. By default it is enabled, which is the standard way `o-data-view` provides view switching.",
+    },
+    {
+      name: "toggle-on-toolbar",
+      type: "no | false | yes | true",
+      default: "no",
+      required: "",
+      description: "Indicates whether or not to render the view toggle inside the toolbar.",
+    },
+    {
+      name: "toggle-floatable",
+      type: "no | false | yes | true",
+      default: "no",
+      required: "",
+      description: "Indicates whether or not the view toggle is rendered as a floating control.",
+    },
+    {
+      name: "table-config",
+      type: "TableConfig",
+      default: "",
+      required: "",
+      description: "Table view configuration object. Values defined here have precedence over the global table configuration injection token and the component defaults.",
+    },
+    {
+      name: "grid-config",
+      type: "GridConfig",
+      default: "",
+      required: "",
+      description: "Grid view configuration object.",
+    },
+  ]
+
+extraComponents: "dataViewData"
+
+directives: [{ name: "oDataViewTableColumns" }, { name: "oDataViewGridItem" }]

_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,3 @@
+directive: "o-image-editor"
+
+apiTitle: "OImageEditorComponent"

_data/menu_descriptions.yml

@@ -374,6 +374,9 @@ sections:
     - url: "/components/media/image/overview"
       title: "Image"
       imagepath: "/assets/images/menus/media/image"
+    - url: "/components/media/image-editor/overview"
+      title: "Image Editor"
+      imagepath: "/assets/images/menus/media/image-editor"
   "layout":
     - url: "/components/layout/applayout/overview"
       title: "App layout"
@@ -425,4 +428,10 @@ sections:
     - url: "/guide/service/ontimize"
       title: "Ontimize"
       imagepath: "/assets/images/menus/services/ontimize"
-
+  "extra-components":
+    - url: "/extra-components/installation"
+      title: "Installation"
+      description: "How to install the ontimize-web-ngx-extra-components addon"
+    - url: "/extra-components/data-view/overview"
+      title: "Data View"
+      description: "Display the same dataset using two different visualizations"

docs/00-doc-overview.md

@@ -25,7 +25,7 @@ This documentation is divided into three sections:
 | [Getting started]({{ base_path }}/example-overview/)  | First contact with an Ontimize Web app. Run sample app code.    |
 | [Guide]({{ base_path }}/guide/appstructure/)  | More extensive documentation covering Ontimize Web in depth.    |
 | [Components]({{ base_path }}/components/) | Access into the examples and documentation of all our components.   |
-| [Customization]({{ base_path }}/customize/theming/) | How to customize the application.   |
+| [Extra-components]({{ base_path }}/extra-components/) | Access into the examples and documentation of all components available in the Ontimize Web Extra Components repository.   |
 | [Addons]({{ base_path }}/addons/) | Advanced components to cover your specific needs.   |
 
 ---

docs/addons/ontimize_web_ngx_report/general/02-installation.md

@@ -19,7 +19,7 @@ nav_order: 2
 
 ### Import the Ontimize Web Report module into your application
 
-Import the `OReportModule ` into the main module of your application.
+Import the `OReportModule` into the main module of your application.
 
 ```javascript
 import { OReportModule } from 'ontimize-web-ngx-report';

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

@@ -0,0 +1,29 @@
+---
+layout: o-component
+permalink: /components/media/image-editor/overview
+title: "Image Editor"
+comp: image-editor
+parent: Media
+grand_parent: Components
+nav_order: 2
+---
+{% 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.
+- **Zoom** slider up to a configurable max.
+- Clear display of the crop area size in **pixels**.
+- Emitting the final cropped image on apply.
+
+
+## Installation
+
+The `o-image-editor` component is distributed as part of the **Ontimize Web Extra Components** library (`ontimize-web-ngx-extra-components`).
+
+```bash
+npm i ontimize-web-ngx-extra-components
+```

docs/extra-components.md

@@ -0,0 +1,18 @@
+---
+layout: default
+title: Extra-components
+has_children: true
+nav_order: 6
+permalink: /extra-components/
+has_toc: false
+---
+
+{% include nav_cards.html folder="extra-components" yml="true" %}
+
+## Introduction
+
+The **Ontimize Web Extra Components** library provides an additional set of components designed to extend **OntimizeWeb** applications with advanced features while keeping the same look & feel and development philosophy.
+
+## Support
+
+The Ontimize Web Extra Components module is available in [github](https://github.com/OntimizeWeb/ontimize-web-ngx-extra-components/tree/main.15.x){:target="_blank"} where you can start discussions, add bug reports or feature requests in the [issues](https://github.com/OntimizeWeb/ontimize-web-ngx-extra-components/issues){:target="_blank"} section.

docs/extra-components/data-view/36-o-data-view.component-api.md

@@ -0,0 +1,7 @@
+---
+layout: o-component
+permalink: /extra-components/data-view/api
+title: "Data View"
+comp: data-view
+nav_exclude: true
+---