From 813f2a5626c32f05768c2085cdc99fd86bb664b0 Mon Sep 17 00:00:00 2001 From: Noelia Prol Carballo Date: Fri, 30 Jan 2026 09:13:22 +0100 Subject: [PATCH 1/9] ODataViewComponent documentation --- _data/components/data-view.yml | 135 ++++++++++ .../dataViewData/01.tableConfig.yml | 59 +++++ .../components/dataViewData/02.gridConfig.yml | 28 +++ .../data/36-o-data-view.component-api.md | 7 + .../data/36-o-data-view.component.md | 234 ++++++++++++++++++ 5 files changed, 463 insertions(+) create mode 100644 _data/components/data-view.yml create mode 100644 _data/components/dataViewData/01.tableConfig.yml create mode 100644 _data/components/dataViewData/02.gridConfig.yml create mode 100644 docs/components/data/36-o-data-view.component-api.md create mode 100644 docs/components/data/36-o-data-view.component.md diff --git a/_data/components/data-view.yml b/_data/components/data-view.yml new file mode 100644 index 000000000..5655e27cc --- /dev/null +++ b/_data/components/data-view.yml @@ -0,0 +1,135 @@ +directive: "o-data-view" +version: "15.8.1" + +apiTitle: "ODataViewComponent" + +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 (`yes`), 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." +},{ + name: "insert-method", + type: "string", + default: "", + required: "", + description: "Insert method name used by the underlying service." +},{ + name: "update-method", + type: "string", + default: "", + required: "", + description: "Update method name used by the underlying service." +},{ + name: "delete-method", + type: "string", + default: "", + required: "", + description: "Delete method name used by the underlying service." +},{ + name: "refresh-button" +},{ + name: "insert-button" +},{ + name: "show-buttons-text" +},{ + name: "fixed-header" +},{ + name: "insert-form-route" +},{ + name: "recursive-edit" +},{ + name: "recursive-insert" +},{ + name: "filter-case-sensitive" +}] + +objects: [{ + name: "TableConfig", + properties: [ + "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" + ] +}] + +extraComponents: "dataViewData" + +directives: [ + { name: "oDataViewTableColumns" }, + { name: "oDataViewGridItem" } +] \ No newline at end of file diff --git a/_data/components/dataViewData/01.tableConfig.yml b/_data/components/dataViewData/01.tableConfig.yml new file mode 100644 index 000000000..b1145938a --- /dev/null +++ b/_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", + ], + }, + ] diff --git a/_data/components/dataViewData/02.gridConfig.yml b/_data/components/dataViewData/02.gridConfig.yml new file mode 100644 index 000000000..6a03279f2 --- /dev/null +++ b/_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", + ], + }, + ] diff --git a/docs/components/data/36-o-data-view.component-api.md b/docs/components/data/36-o-data-view.component-api.md new file mode 100644 index 000000000..ad589aafa --- /dev/null +++ b/docs/components/data/36-o-data-view.component-api.md @@ -0,0 +1,7 @@ +--- +layout: o-component +permalink: /components/data/data-view/api +title: "Data View" +comp: data-view +nav_exclude: true +--- \ No newline at end of file diff --git a/docs/components/data/36-o-data-view.component.md b/docs/components/data/36-o-data-view.component.md new file mode 100644 index 000000000..8aed800f4 --- /dev/null +++ b/docs/components/data/36-o-data-view.component.md @@ -0,0 +1,234 @@ +--- +layout: o-component +permalink: /components/data/data-view/overview +title: "Data view" +comp: data-view +parent: Data +grand_parent: Components +nav_order: 1 +--- + +{% include base_path %} +{% include toc %} + +## Introduction +The `o-data-view` component is used to display the same dataset using **two different visualizations**: + +- **Table view**, based on `o-table` +- **Grid view**, based on `o-grid` + +The component provides a single entry point for data binding and common UI configuration (title, toolbar controls, quick filter, pagination, etc.), while allowing you to define custom templates for both the table columns and the grid items. + +## Data binding + +The `o-data-view` component supports data binding and you can command the component to display data either from *local* or *remote* data storage. + +The data array can be provided in two ways: +* Provide an array of objects to the `static-data` attribute. +* Configure the component to query the data from a service using `service` and `entity` attributes. +{: .note } +>Passing function calls directly to `static-data` (e.g. `[static-data]="getData()"`) is a **bad practice** that causes continuous re-evaluation and leads to malfunctioning behavior in components such as **o-list, o-table, o-grid and o-tree**. +Always pass a static reference instead (e.g. `[static-data]="data"`). + +## Configuration objects + +The o-data-view component provides two configuration inputs to group view-specific options: + +* `table-config`: table-specific configuration (selection, grouping, export, scrolling, edit/detail behavior, etc.). See all of its properties here [Table configuration]({{base_path}}/components/data/data-view/api#Table%20configuration) +* `grid-config`: grid-specific configuration (layout, footer, orderable, quick filter columns, etc.). See all of its properties here [Grid configuration]({{base_path}}/components/data/data-view/api#Grid%20configuration) + +This allows you to keep the main component declaration clean and move advanced settings into configuration objects. + +## Global table configuration (Injection token) + +Besides configuring the table behavior through `table-config`, some default table options can be defined *globally* by providing the `O_TABLE_GLOBAL_CONFIG` injection token. + +The final value for a given option is resolved using the following precedence order: + +1. **`table-config` input value** (highest priority) +2. **`O_TABLE_GLOBAL_CONFIG` injection token value** +3. **Component default value** (lowest priority) + +{: .note } +> This is especially useful when you want to enforce consistent table behavior across the application (e.g. default row height, default edition mode), while still allowing each `o-data-view` / `o-table` instance to override those defaults through `table-config`. + +### Example + +```ts +import { NgModule } from '@angular/core'; +import { O_TABLE_GLOBAL_CONFIG, OTableGlobalConfig } from 'ontimize-web-ngx'; + +const TABLE_GLOBAL_CONFIG: OTableGlobalConfig = { + autoAdjust: true, + autoAlignTitles: false, + filterColumnActiveByDefault: false, + editionMode: 'dblclick', + detailMode: 'click', + rowHeight: 'medium' +}; + +@NgModule({ + providers: [ + { provide: O_TABLE_GLOBAL_CONFIG, useValue: TABLE_GLOBAL_CONFIG } + ] +}) +export class AppModule {} +``` +For a full description of the token and its supported properties, see the official [OTableComponent documentation]({{base_path}}/components/data/table/api#OTableGlobalConfig). + +## Templates + +The `o-data-view` component uses **content projection** to allow you to customize what is rendered in each view. + +For that reason, `ng-template` definitions are required in the following cases: + +- **Grid view**: you must provide a grid item template, otherwise the grid has no content to render. +- **Table view**: you can optionally provide a table columns template to define columns and attach table extensions (filters, aggregates, context menu, paginator, etc.). + +### Table columns template + +To configure the table (columns and extensions), define an `ng-template` with the `oDataViewTableColumns` directive and place any table-related definitions inside it. + +This is the recommended approach to: + +- define `o-table-column` elements +- add table extensions such as: + - `o-table-columns-filter` + - `o-table-column-aggregate` + - `o-table-context-menu` + - `o-table-paginator` + - and any other table configuration components + +### Grid item template + +To render items in grid mode, define an `ng-template` with the `oDataViewGridItem` directive. + +Each rendered item receives the current record as template context using `let-item`, allowing you to build card-based layouts or any custom UI. + +{: .note } +>In grid mode, the oDataViewGridItem template is required to display content. +In table mode, the oDataViewTableColumns template is recommended when you need to define columns or attach table extensions (filters, aggregates, context menus, paginator, etc.). + +## Basic example + +```html + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {{ item.name }} + {{ item.location }} + + +
Cost: {{item.price | currency}}
+ + + + + +``` + +```ts +tableCfg = { visibleColumns: 'name;location;price;duration;score', editButtonInRow: 'yes', selectAllCheckbox: 'yes', deleteButton: 'no', showReportOnDemandOption: 'no', exportButton: 'no', rowHeight: 'small' }; + +gridCfg = { cols: 4, gutterSize: '2px', gridItemHeight: '175px', quickFilterColumns: 'name;price', showPageSize: "yes", insertButtonFloatable: 'no' }; +``` + +## View modes +The `o-data-view` component can render data in two modes: + +- **table**: optimized for dense data inspection and column-based operations (sorting, grouping, selection, etc.) +- **grid**: optimized for browsing, card layouts and visually rich items + +You can define which view is shown by default using the `default-view` attribute. + +## Toggle between views +The `o-data-view` component can show a toggle to switch between **table** and **grid** modes. + +The toggle behavior can be configured with: + +- `toggle-on-toolbar`: places the toggle inside the toolbar. +- `toggle-floatable`: renders the toggle as a floating control (useful to keep it accessible while scrolling). +- `toggle-button`: indicates whether or not to show the toggle button. + +{: .note } +>`toggle-button` is enabled by default (`yes`). This is the default way `o-data-view` provides view switching between **table** and **grid** modes. + +## Custom view switching (without toggle) + +In addition to the built-in toggle, the `o-data-view` component exposes a public method to switch the active view programmatically. + +This is useful when you want to provide your own UI (buttons, menus, tabs, etc.) to change between **table** and **grid** modes. + +### Public method: changeView + +Use the `changeView` method passing a valid `ODataViewMode` value: + +- `table` +- `grid` + +### Example: custom buttons + +```html + +
+ + +
+ + + + + + + + + + + + +``` + +In this example: + +- The default toggle is disabled using `toggle-button="no"`. +- A template reference variable (`#dv`) is used to access the component instance. +- Two custom buttons call `changeView('table')` and `changeView('grid')`. + +{: .note } +>`changeView` only accepts `table` or `grid`. Any other value will be ignored or may cause unexpected behavior depending on the implementation. + +## Demo +You can see this and more examples of this component in the [OntimizeWeb playground]({{site.playgroundurl}}/main/data/data-view/basic). From 8d0599b5e90778161e87cb44b714e02f341defc3 Mon Sep 17 00:00:00 2001 From: Noelia Prol Carballo Date: Fri, 30 Jan 2026 11:08:27 +0100 Subject: [PATCH 2/9] add data-view entry on components menu --- _data/menu_descriptions.yml | 3 +++ assets/images/menus/data/data-view.svg | 1 + assets/images/menus/data/data-view_dark.svg | 1 + 3 files changed, 5 insertions(+) create mode 100644 assets/images/menus/data/data-view.svg create mode 100644 assets/images/menus/data/data-view_dark.svg diff --git a/_data/menu_descriptions.yml b/_data/menu_descriptions.yml index edbf9d29e..083ec8e10 100644 --- a/_data/menu_descriptions.yml +++ b/_data/menu_descriptions.yml @@ -352,6 +352,9 @@ sections: title: "Migration guides" description: "Download page of our version migration guides" "data": + - url: "/components/data/data-view/overview" + title: "Data View" + imagepath: "/assets/images/menus/data/data-view" - url: "/components/data/filterbuilder/overview" title: "Filter builder" imagepath: "/assets/images/menus/data/filterbuilder" diff --git a/assets/images/menus/data/data-view.svg b/assets/images/menus/data/data-view.svg new file mode 100644 index 000000000..3828c5a31 --- /dev/null +++ b/assets/images/menus/data/data-view.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/images/menus/data/data-view_dark.svg b/assets/images/menus/data/data-view_dark.svg new file mode 100644 index 000000000..3b1e25aef --- /dev/null +++ b/assets/images/menus/data/data-view_dark.svg @@ -0,0 +1 @@ + \ No newline at end of file From 4d832e4eda36f6fe40490912ff75b900bbaf6889 Mon Sep 17 00:00:00 2001 From: Noelia Prol Carballo Date: Wed, 4 Feb 2026 10:24:12 +0100 Subject: [PATCH 3/9] feature: add new component's icons --- assets/images/menus/data/data-view.svg | 17 ++++++++++++++++- assets/images/menus/data/data-view_dark.svg | 17 ++++++++++++++++- assets/images/menus/data/tree.svg | 15 +++++++++++---- assets/images/menus/data/tree_dark.svg | 13 +++++++++++-- 4 files changed, 54 insertions(+), 8 deletions(-) diff --git a/assets/images/menus/data/data-view.svg b/assets/images/menus/data/data-view.svg index 3828c5a31..6d057209c 100644 --- a/assets/images/menus/data/data-view.svg +++ b/assets/images/menus/data/data-view.svg @@ -1 +1,16 @@ - \ No newline at end of file + + + + + + + + + + + + + + + + diff --git a/assets/images/menus/data/data-view_dark.svg b/assets/images/menus/data/data-view_dark.svg index 3b1e25aef..5b71cd4bf 100644 --- a/assets/images/menus/data/data-view_dark.svg +++ b/assets/images/menus/data/data-view_dark.svg @@ -1 +1,16 @@ - \ No newline at end of file + + + + + + + + + + + + + + + + diff --git a/assets/images/menus/data/tree.svg b/assets/images/menus/data/tree.svg index 0033ea51c..56d6bfb7d 100644 --- a/assets/images/menus/data/tree.svg +++ b/assets/images/menus/data/tree.svg @@ -1,5 +1,12 @@ - - - - + + + + + + + + + + + diff --git a/assets/images/menus/data/tree_dark.svg b/assets/images/menus/data/tree_dark.svg index 65fd1d64f..e8b9a9fa5 100644 --- a/assets/images/menus/data/tree_dark.svg +++ b/assets/images/menus/data/tree_dark.svg @@ -1,3 +1,12 @@ - - + + + + + + + + + + + From a9f52b8ddaf7f8bf1ce1c53a5b492d2d55453872 Mon Sep 17 00:00:00 2001 From: Noelia Prol Carballo Date: Wed, 4 Feb 2026 10:54:56 +0100 Subject: [PATCH 4/9] feature: add inherited attributes --- _data/components/data-view.yml | 220 ++++++++---------- .../data/36-o-data-view.component.md | 4 +- 2 files changed, 95 insertions(+), 129 deletions(-) diff --git a/_data/components/data-view.yml b/_data/components/data-view.yml index 5655e27cc..2d29e2acf 100644 --- a/_data/components/data-view.yml +++ b/_data/components/data-view.yml @@ -1,135 +1,101 @@ directive: "o-data-view" -version: "15.8.1" +version: "15.9.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 (`yes`), 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." -},{ - name: "insert-method", - type: "string", - default: "", - required: "", - description: "Insert method name used by the underlying service." -},{ - name: "update-method", - type: "string", - default: "", - required: "", - description: "Update method name used by the underlying service." -},{ - name: "delete-method", - type: "string", - default: "", - required: "", - description: "Delete method name used by the underlying service." -},{ - name: "refresh-button" -},{ - name: "insert-button" -},{ - name: "show-buttons-text" -},{ - name: "fixed-header" -},{ - name: "insert-form-route" -},{ - name: "recursive-edit" -},{ - name: "recursive-insert" -},{ - name: "filter-case-sensitive" -}] - -objects: [{ - name: "TableConfig", - properties: [ - "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" +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" } -] \ No newline at end of file +directives: [{ name: "oDataViewTableColumns" }, { name: "oDataViewGridItem" }] diff --git a/docs/components/data/36-o-data-view.component.md b/docs/components/data/36-o-data-view.component.md index 8aed800f4..6f3e5409c 100644 --- a/docs/components/data/36-o-data-view.component.md +++ b/docs/components/data/36-o-data-view.component.md @@ -34,8 +34,8 @@ Always pass a static reference instead (e.g. `[static-data]="data"`). The o-data-view component provides two configuration inputs to group view-specific options: -* `table-config`: table-specific configuration (selection, grouping, export, scrolling, edit/detail behavior, etc.). See all of its properties here [Table configuration]({{base_path}}/components/data/data-view/api#Table%20configuration) -* `grid-config`: grid-specific configuration (layout, footer, orderable, quick filter columns, etc.). See all of its properties here [Grid configuration]({{base_path}}/components/data/data-view/api#Grid%20configuration) +* `table-config`: table-specific configuration (selection, grouping, export, scrolling, edit/detail behavior, etc.). See all of its properties [here]({{base_path}}/components/data/data-view/api#Table%20configuration) +* `grid-config`: grid-specific configuration (layout, footer, orderable, quick filter columns, etc.). See all of its properties [here]({{base_path}}/components/data/data-view/api#Grid%20configuration) This allows you to keep the main component declaration clean and move advanced settings into configuration objects. From 0a71631c49154ca3f203599b220614b66309c020 Mon Sep 17 00:00:00 2001 From: Noelia Prol Carballo Date: Wed, 11 Feb 2026 08:25:19 +0100 Subject: [PATCH 5/9] o-image-editor docu --- .../media/o-image-editor.component.md | 29 +++++++++++++++++++ 1 file changed, 29 insertions(+) create mode 100644 docs/components/media/o-image-editor.component.md diff --git a/docs/components/media/o-image-editor.component.md b/docs/components/media/o-image-editor.component.md new file mode 100644 index 000000000..535ab0def --- /dev/null +++ b/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 + +Install the extra components package (this component is not in `ontimize-web-ngx` core): + +```bash +npm i ontimize-web-ngx-extra-components +``` From 750f987f30a19aff7ac266e9980ca1665abd9b13 Mon Sep 17 00:00:00 2001 From: Noelia Prol Carballo Date: Thu, 12 Feb 2026 06:26:11 +0100 Subject: [PATCH 6/9] feat: installation cap --- docs/components/data/36-o-data-view.component.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/docs/components/data/36-o-data-view.component.md b/docs/components/data/36-o-data-view.component.md index 6f3e5409c..fa1c48de3 100644 --- a/docs/components/data/36-o-data-view.component.md +++ b/docs/components/data/36-o-data-view.component.md @@ -19,6 +19,14 @@ The `o-data-view` component is used to display the same dataset using **two diff The component provides a single entry point for data binding and common UI configuration (title, toolbar controls, quick filter, pagination, etc.), while allowing you to define custom templates for both the table columns and the grid items. +## Installation + +The `o-data-view` component is distributed as part of the **Ontimize Web Extra Components** library (`ontimize-web-ngx-extra-components`). + +```bash +npm install ontimize-web-ngx-extra-components +``` + ## Data binding The `o-data-view` component supports data binding and you can command the component to display data either from *local* or *remote* data storage. From 2ce5fd527f9d3102e4ab494f89c586e83d7037c8 Mon Sep 17 00:00:00 2001 From: Noelia Prol Carballo Date: Thu, 12 Feb 2026 06:32:57 +0100 Subject: [PATCH 7/9] feat: add navegation --- _data/components/image-editor.yml | 3 +++ _data/menu_descriptions.yml | 3 +++ docs/components/media/o-image-editor.component.md | 2 +- 3 files changed, 7 insertions(+), 1 deletion(-) create mode 100644 _data/components/image-editor.yml diff --git a/_data/components/image-editor.yml b/_data/components/image-editor.yml new file mode 100644 index 000000000..bf3719991 --- /dev/null +++ b/_data/components/image-editor.yml @@ -0,0 +1,3 @@ +directive: "o-image-editor" + +apiTitle: "OImageEditorComponent" \ No newline at end of file diff --git a/_data/menu_descriptions.yml b/_data/menu_descriptions.yml index edbf9d29e..e3562988f 100644 --- a/_data/menu_descriptions.yml +++ b/_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" diff --git a/docs/components/media/o-image-editor.component.md b/docs/components/media/o-image-editor.component.md index 535ab0def..c685ca9e9 100644 --- a/docs/components/media/o-image-editor.component.md +++ b/docs/components/media/o-image-editor.component.md @@ -22,7 +22,7 @@ The `o-image-editor` component wraps `ngx-image-cropper` and provides a simplifi ## Installation -Install the extra components package (this component is not in `ontimize-web-ngx` core): +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 From 2a34a9f94dde4290f3e0766ec2cfe6e79895655f Mon Sep 17 00:00:00 2001 From: Noelia Prol Carballo Date: Thu, 12 Feb 2026 13:18:27 +0100 Subject: [PATCH 8/9] feat: new extra-components section --- _data/components/data-view.yml | 2 +- _data/menu_descriptions.yml | 11 +++-- docs/00-doc-overview.md | 2 +- .../general/02-installation.md | 2 +- docs/extra-components.md | 18 ++++++++ .../36-o-data-view.component-api.md | 2 +- .../data-view}/36-o-data-view.component.md | 13 +----- docs/extra-components/installation.md | 42 +++++++++++++++++++ 8 files changed, 73 insertions(+), 19 deletions(-) create mode 100644 docs/extra-components.md rename docs/{components/data => extra-components/data-view}/36-o-data-view.component-api.md (65%) rename docs/{components/data => extra-components/data-view}/36-o-data-view.component.md (97%) create mode 100644 docs/extra-components/installation.md diff --git a/_data/components/data-view.yml b/_data/components/data-view.yml index 2d29e2acf..c27d7474b 100644 --- a/_data/components/data-view.yml +++ b/_data/components/data-view.yml @@ -1,5 +1,5 @@ directive: "o-data-view" -version: "15.9.0" +version: "15.0.0" apiTitle: "ODataViewComponent" inheritedAttributes: diff --git a/_data/menu_descriptions.yml b/_data/menu_descriptions.yml index 083ec8e10..7526da18f 100644 --- a/_data/menu_descriptions.yml +++ b/_data/menu_descriptions.yml @@ -352,9 +352,6 @@ sections: title: "Migration guides" description: "Download page of our version migration guides" "data": - - url: "/components/data/data-view/overview" - title: "Data View" - imagepath: "/assets/images/menus/data/data-view" - url: "/components/data/filterbuilder/overview" title: "Filter builder" imagepath: "/assets/images/menus/data/filterbuilder" @@ -428,4 +425,10 @@ sections: - url: "/guide/service/ontimize" title: "Ontimize" imagepath: "/assets/images/menus/services/ontimize" - + "extra-components": + - url: "/extra-components/installation" + title: "Instalation" + 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" diff --git a/docs/00-doc-overview.md b/docs/00-doc-overview.md index f98de34cf..00fa437cd 100644 --- a/docs/00-doc-overview.md +++ b/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. | --- diff --git a/docs/addons/ontimize_web_ngx_report/general/02-installation.md b/docs/addons/ontimize_web_ngx_report/general/02-installation.md index 3f3bd86b8..a7bb09bfd 100644 --- a/docs/addons/ontimize_web_ngx_report/general/02-installation.md +++ b/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'; diff --git a/docs/extra-components.md b/docs/extra-components.md new file mode 100644 index 000000000..5baea3682 --- /dev/null +++ b/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. \ No newline at end of file diff --git a/docs/components/data/36-o-data-view.component-api.md b/docs/extra-components/data-view/36-o-data-view.component-api.md similarity index 65% rename from docs/components/data/36-o-data-view.component-api.md rename to docs/extra-components/data-view/36-o-data-view.component-api.md index ad589aafa..e8ac86534 100644 --- a/docs/components/data/36-o-data-view.component-api.md +++ b/docs/extra-components/data-view/36-o-data-view.component-api.md @@ -1,6 +1,6 @@ --- layout: o-component -permalink: /components/data/data-view/api +permalink: /extra-components/data-view/api title: "Data View" comp: data-view nav_exclude: true diff --git a/docs/components/data/36-o-data-view.component.md b/docs/extra-components/data-view/36-o-data-view.component.md similarity index 97% rename from docs/components/data/36-o-data-view.component.md rename to docs/extra-components/data-view/36-o-data-view.component.md index fa1c48de3..f463c50ad 100644 --- a/docs/components/data/36-o-data-view.component.md +++ b/docs/extra-components/data-view/36-o-data-view.component.md @@ -1,10 +1,9 @@ --- layout: o-component -permalink: /components/data/data-view/overview +permalink: /extra-components/data-view/overview title: "Data view" comp: data-view -parent: Data -grand_parent: Components +parent: Extra-components nav_order: 1 --- @@ -19,14 +18,6 @@ The `o-data-view` component is used to display the same dataset using **two diff The component provides a single entry point for data binding and common UI configuration (title, toolbar controls, quick filter, pagination, etc.), while allowing you to define custom templates for both the table columns and the grid items. -## Installation - -The `o-data-view` component is distributed as part of the **Ontimize Web Extra Components** library (`ontimize-web-ngx-extra-components`). - -```bash -npm install ontimize-web-ngx-extra-components -``` - ## Data binding The `o-data-view` component supports data binding and you can command the component to display data either from *local* or *remote* data storage. diff --git a/docs/extra-components/installation.md b/docs/extra-components/installation.md new file mode 100644 index 000000000..22412d163 --- /dev/null +++ b/docs/extra-components/installation.md @@ -0,0 +1,42 @@ +--- +layout: default +permalink: /extra-components/installation/ +title: "Installation" +parent: "Extra-components" +nav_order: 1 +has_toc: false +--- +{% include base_path %} + +## Installation + +```bash +npm install ontimize-web-ngx-extra-components --save +``` + +## Compatibility + +The **ontimize-web-ngx-extra-components** library is compatible with **ontimize-web-ngx** starting from version **15.9.0**. + + +## Usage + +### Import into your application + +Import the `OExtraComponentsModule` into the main module of your application. + +```js +... +import { OExtraComponentsModule } from 'ontimize-web-ngx-extra-components'; +... + +@NgModule({ + imports: [ + OExtraComponentsModule, + /* other imports */ + ], + declarations: ... + providers: ... +}) +export class ExampleModule { } +``` From d5735a157e387be584d8242cd0ad8e55d65a6d0f Mon Sep 17 00:00:00 2001 From: Noelia Prol Carballo Date: Thu, 12 Feb 2026 13:25:54 +0100 Subject: [PATCH 9/9] little fix --- _data/menu_descriptions.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_data/menu_descriptions.yml b/_data/menu_descriptions.yml index 7526da18f..1b238928d 100644 --- a/_data/menu_descriptions.yml +++ b/_data/menu_descriptions.yml @@ -427,7 +427,7 @@ sections: imagepath: "/assets/images/menus/services/ontimize" "extra-components": - url: "/extra-components/installation" - title: "Instalation" + title: "Installation" description: "How to install the ontimize-web-ngx-extra-components addon" - url: "/extra-components/data-view/overview" title: "Data View"