Publish docs

_data/components/filterexpressionmethods.yml

@@ -368,7 +368,7 @@ utilityMethods: [
   },
   {
     name: "instanceofBasicExpression",
-    description: "Evaluates if the the expression provided is an instance of `IBasicExpression`.",
+    description: "Evaluates if the expression provided is an instance of `IBasicExpression`.",
     params: [
       {
         name: "exp",

_data/components/otableData/00table.yml

@@ -139,7 +139,7 @@ attributes: [{
 },{
   name: "orderable"
 },{
-  name: "oenabled",
+  name: "enabled",
   type: "no | false | yes | true",
   default: "yes",
   required: "",

_data/components/otableData/05tableColumnAggregate.yml

@@ -22,8 +22,8 @@ attributes: [{
   required : "",
   description : "Default functions aggregate"
 },{
-  name: "function-aggregate",
-  type: "(value:any[]) => number ",
+  name: "aggregate-function",
+  type: "(value: any[], columnAttr?: string, table?: OTableComponent) => number | Promise<number>",
   default : "",
   required : "",
   description : "Custom function aggregate"

_data/components/otableData/15tableColumnsGroupingColumn.yml

@@ -27,7 +27,7 @@ attributes: [{
   description : "Default functions aggregate"
 },{
   name: "aggregate-function",
-  type: " (value: any[]) => number",
+  type: "(value: any[], columnAttr?: string, table?: OTableComponent) => number | Promise<number>",
   default: "",
   required: "",
   description: "Function that calculates a value on the values of the column 'attr'"

docs/addons/39-ontimize-web-ngx-jee-seed.md

@@ -11,7 +11,7 @@ nav_order: 5
 
 ## Introduction
 
-The The **Ontimize Web Java EE app seed** is a seed proyect created to start developing your [OntimizeWeb](https://github.com/OntimizeWeb/ontimize-web-ngx/tree/main.15.x){:target="_blank"} applications faster and easily.
+The **Ontimize Web Java EE app seed** is a seed proyect created to start developing your [OntimizeWeb](https://github.com/OntimizeWeb/ontimize-web-ngx/tree/main.15.x){:target="_blank"} applications faster and easily.
 
 ## Github
 Ontimize Web JEE application seed is stored in [github](https://github.com/OntimizeWeb/ontimize-web-ngx-jee-seed/tree/15.x.x){:target="_blank"} where you can also see/add todos, bugs or feature requests in the [issues](https://github.com/OntimizeWeb/ontimize-web-ngx-jee-seed/issues){:target="_blank"} section.

docs/aditional-information/52-versions.md

@@ -28,21 +28,36 @@ In this section you can check the different releases of **OntimizeWeb** and its
         </tr>
     </thead>
     <tbody>
-     <tr>
+    <tr>
+        <td>15.7.1</td>
+        <td>15.1.1</td>
+        <td rowspan="45">15.0.1<br>15.0.0</td>
+        <td rowspan="5">15.2.1<br>15.2.0</td>
+        <td rowspan="45">15.1.2<br>15.1.1<br>15.1.0<br>15.0.0</td>
+        <td rowspan="5">15.1.0</td>
+        <td rowspan="45">15.1.2<br>15.1.1<br>15.1.0<br>15.0.0</td>
+    </tr>
+    <tr>
+        <td>15.7.0</td>
+        <td rowspan="4">15.1.0</td>
+    </tr>
+    <tr>
+        <td>15.6.2</td>
+    </tr>
+    <tr>
+        <td>15.6.1</td>
+    </tr>
+    <tr>
         <td>15.6.0</td>
-        <td>15.1.0</td>
-        <td rowspan="40">15.0.1<br>15.0.0</td>
-        <td>15.2.0</td>
-        <td rowspan="40">15.1.2<br>15.1.1<br>15.1.0<br>15.0.0</td>
-        <td>15.1.0</td>
-        <td rowspan="40">15.1.1<br>15.1.0<br>15.0.0</td>
+    </tr>
+    <tr>
+        <td>15.5.9</td>
+        <td rowspan="40">15.0.0</td>
+        <td rowspan="40">15.1.6<br>15.1.5<br>15.1.4<br>15.1.3<br>15.1.2<br>15.1.1<br>15.1.0<br>15.0.1<br>15.0.0</td>
+        <td rowspan="40">15.0.4<br>15.0.3<br>15.0.2<br>15.0.1<br>15.0.0</td>
     </tr>
     <tr>
         <td>15.5.8</td>
-        <td rowspan="39">15.0.0</td>
-        <td rowspan="39">15.1.6<br>15.1.5<br>15.1.4<br>15.1.3<br>15.1.2<br>15.1.1<br>15.1.0<br>15.0.1<br>15.0.0</td>
-        <td rowspan="39">15.0.4<br>15.0.3<br>15.0.2<br>15.0.1<br>15.0.0</td>
-
     </tr>
     <tr>
         <td>15.5.7</td>
@@ -158,7 +173,6 @@ In this section you can check the different releases of **OntimizeWeb** and its
   </tbody>
 </table>
 
-
 - The prefix _ontimize-web-ngx_ was omitted from the names of the addons.
 
 {: .note }

docs/components/data/34-o-list.component.md

@@ -13,14 +13,25 @@ nav_order: 4
 
 The `o-list` component is used to display a series of items. There is different types of predefined list items you can add to the list component.
 
-For adding a list component to your application you must insert the `o-list` in your page and include a `o-list-item` component wrapping the desired list item type you want to display. Check the different list items types below.
+## Data binding
+
+The o-list 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"`).
+
 ## List item
+For adding a list component to your application you must insert the `o-list` in your page and include a `o-list-item` component wrapping the desired list item type you want to display. Check the different list items types below.
 ### List item: text
 
 The `o-list-item-text` component is used to display list items with a maximum of two lines of text and a title.
 
 ```html
-<o-list #list keys="id" columns="id;name;username;email" [static-data]="getUsers()"
+<o-list #list keys="id" columns="id;name;username;email" [static-data]="users"
   title="List" quick-filter="true" quick-filter-columns="name;username;email"
   refresh-button="true" insert-button="false" delete-button="false"
   selectable="false" detail-button-in-row="false"
@@ -44,7 +55,7 @@ You can see an example of this component in the [OntimizeWeb playground]({{site.
 The `o-list-item-avatar` component is used to display list items with an avatar and a maximum of two lines of text and a title.
 
 ```html
-<o-list #list keys="id" columns="id;name;username;email" [static-data]="getUsers()"
+<o-list #list keys="id" columns="id;name;username;email" [static-data]="users"
   title="List" quick-filter="true" quick-filter-columns="name;username;email"
   refresh-button="true" insert-button="false" delete-button="false"
   selectable="false" detail-button-in-row="false"
@@ -68,7 +79,7 @@ The `o-list-item-card` component is used to display a card list item with text,
 
 ```html
 <o-list #list attr="list" title="List" columns="id;name;username;email;street;phone" keys="id"
-  [static-data]="getStaticData()" refresh-button="true" quick-filter="true" insert-button="false"
+  [static-data]="data" refresh-button="true" quick-filter="true" insert-button="false"
   row-height="medium" detail-mode="none">
   <o-list-item *ngFor="let row of list.dataArray">
     <o-list-item-card #item title="{{ row.username }}" subtitle="{{ row.name }}" show-image="true" image="{{ row.image }}"
@@ -89,7 +100,7 @@ The `o-list-item-card-image` component is used to display card list items with a
 
 ```html
 <o-list #list attr="list" title="List" columns="id;name;username;email;street;phone" keys="id"
-  [static-data]="getStaticData()" refresh-button="true" insert-button="false"
+  [static-data]="data" refresh-button="true" insert-button="false"
   quick-filter="no" row-height="medium" detail-mode="none">
   <o-list-item *ngFor="let row of #list.dataArray">
     <o-list-item-card-image title="{{ row.username }}" subtitle="{{ row.name }}" content="{{ row.body }}"
@@ -109,7 +120,7 @@ You can see an example of this component in the [OntimizeWeb playground]({{site.
 When building an `o-list` component you can include one of the predefined list items the **OntimizeWeb** offers or you can include your own list item. For including a custom list item, **OntimizeWeb** offers the `o-list-item` directive that can be attached to an angular material list item (`mat-list-item`) or an angular material card (`mat-card`).
 
 ```html
-<o-list #list attr="list" columns="id;name;username;email;street;phone" quick-filter-columns="name;username" [static-data]="getStaticData()">
+<o-list #list attr="list" columns="id;name;username;email;street;phone" quick-filter-columns="name;username" [static-data]="data">
   <mat-card *ngFor="let row of list.dataArray" [o-list-item]="row">
     <mat-card-header>
       <div mat-card-avatar>

docs/components/data/35-o-grid.component.md

@@ -24,6 +24,17 @@ The `o-grid` component allows you to specify a title by configuring the `title`
 ## Show controls
 The `o-grid` component shows controls by default, you can show/hide them by configuring the `show-controls` attribute.
 
+## Data binding
+
+The o-grid 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"`).
+
 ## Columns per row
 You can specify the number of columns shown on each row by configuring the `cols` attribute. By default, the number of columns will be automatically determined based on mediaQuery of Flex Layout. See more [here](https://github.com/angular/flex-layout/wiki/Responsive-API#mediaqueries-and-aliases).
 
@@ -47,7 +58,7 @@ You can also configure the page size options by configuring the `show-page-size`
 ![Grid page size]({{ "/assets/images/components/grid/grid-page-size.png" | absolute_url }}){: .comp-example-img }
 
 ```html
-<o-grid #grid columns="id;name;username;email;companyname" keys="id" [static-data]="getStaticData()"
+<o-grid #grid columns="id;name;username;email;companyname" keys="id" [static-data]="staticData"
   show-page-size="yes" page-size-options="24;32;64">
   <o-grid-item *ngFor="let list of grid.dataArray">
     <o-column layout-padding class="container-item">
@@ -86,7 +97,7 @@ You also can specify the default sorting column by configuring the `sort-column`
 ![Grid component]({{ "/assets/images/components/grid/grid-sortable_2.png" | absolute_url }}){: .comp-example-img }
 
 ```html
-<o-grid #grid  columns="id;name;username;email;companyname" keys="id" [static-data]="getStaticData()"
+<o-grid #grid columns="id;name;username;email;companyname" keys="id" [static-data]="staticData"
   orderable="yes" quick-filter="yes" sortable-columns="name:desc;email" sort-column="name" grid-item-height="1:2">
   <o-grid-item *ngFor="let list of grid.dataArray">
     <o-column layout-padding  class="container-item">
@@ -118,7 +129,7 @@ The gutter size can be set to any px, em, or rem value with the `gutter-size` pr
 
 It is possible to set the `rowspan` and `colspan` of each o-grid-item individually, using the rowspan and colspan properties. By default its values are 1. The `colspan` must not exceed the number of cols in the `o-grid`. There is no such restriction on the rowspan however, more rows will simply be added for it the tile to fill.
 ```html
- <o-grid #grid attr="grid" [static-data]="getStaticData())" columns="text;cols;rows;color" cols="4"
+ <o-grid #grid attr="grid" [static-data]="staticData" columns="text;cols;rows;color" cols="4"
 grid-item-height="100px" controls="no" gutter-size="0">
   <o-grid-item *ngFor="let list of grid.dataArray" [colspan]="list.cols" [rowspan]="list.rows">
     <div [style.background]="list.color" fxFill>
@@ -211,7 +222,7 @@ this.grid.filterData = function (value?: string, loadMore?: boolean) {
 The `o-grid` component supports *fixed header* and *footer* setting `fixed-header="yes"` when its content is greater than its own height. For that, you must set the height of the grid, using, for example `[ngStyle]="{height: 400px;}"`. By default, it's disabled.
 
 ```html
-<o-grid #grid attr="grid" [static-data]="getStaticData()" columns="id;name;username;email;companyname"
+<o-grid #grid attr="grid" [static-data]="staticData" columns="id;name;username;email;companyname"
   keys="id" fixed-header="yes" [ngStyle]="{height:400px}" pagination-controls="yes" query-rows="8">
   <o-grid-item *ngFor="let list of grid.dataArray">
     <o-column layout-padding class="container-item">
@@ -238,7 +249,7 @@ The `o-grid` component supports *fixed header* and *footer* setting `fixed-heade
 When building an `o-grid` component you can define your own grid item. For including a custom grid item, **OntimizeWeb** offers the `o-grid-item` directive that can be attached to an angular material grid tile (`mat-grid-tile`) .
 
 ```html
-<o-grid #grid columns="id;name;username;email;companyname" keys="id" [static-data]="getStaticData()"
+<o-grid #grid columns="id;name;username;email;companyname" keys="id" [static-data]="staticData"
   orderable="yes" quick-filter="yes" grid-item-height="1:2" sortable-columns="name;email">
   <o-grid-item *ngFor="let list of grid.dataArray">
     <o-column layout-padding  class="container-item">

docs/components/data/35-o-table.component.md

@@ -155,7 +155,7 @@ For local data binding you simply need to supply an array of TypeScript objects/
 
 ```html
 
- <o-table attr="accounts" columns="CARDID;CARDTYPE;NUMCARD;TOTALCREDIT;TOTALREADY;BALANCE" visible-columns="NUMCARD;TOTALCREDIT;TOTALREADY;BALANCE" title="ACCOUNTS" [static-data]="getStaticData()" sort-columns="ACCOUNT:DESC" query-on-init="false" quick-filter="yes" insert-button="no" delete-button="no" refresh-button="no" pagination-controls="no" export-button="no">
+ <o-table attr="accounts" columns="CARDID;CARDTYPE;NUMCARD;TOTALCREDIT;TOTALREADY;BALANCE" visible-columns="NUMCARD;TOTALCREDIT;TOTALREADY;BALANCE" title="ACCOUNTS" [static-data]="account" sort-columns="ACCOUNT:DESC" query-on-init="false" quick-filter="yes" insert-button="no" delete-button="no" refresh-button="no" pagination-controls="no" export-button="no">
   <o-table-columns-filter columns="NUMCARD;TOTALCREDIT;TOTALREADY;BALANCE"></o-table-columns-filter>
   <o-table-column attr="NUMCARD" title="NUMCARD">
     <o-table-column-renderer-cardtype></o-table-column-renderer-cardtype>
@@ -171,19 +171,22 @@ For local data binding you simply need to supply an array of TypeScript objects/
 ```
 
 ```javascript
-getTableData(){
-  const account =  [
+ const account =  [
     { PRODUCTID: 1, 'PRODUCTNAME': 'Alice Mutton', UNITPRICE: 39, UNITSINORDER: 0, UNITSINSTOCK: 1 },
     { PRODUCTID: 2, 'PRODUCTNAME': 'Gorgonzola Telino', UNITPRICE: 12.5, UNITSINORDER: 70, UNITSINSTOCK: 2 },
     { PRODUCTID: 3, 'PRODUCTNAME': 'Louisiana Hot Spiced Okra', UNITPRICE: 17, UNITSINORDER: 100, UNITSINSTOCK: 4 },
     { PRODUCTID: 4, 'PRODUCTNAME': 'Sir Rodney Scones', UNITPRICE: 10, UNITSINORDER: 40, UNITSINSTOCK: 3 },
     { PRODUCTID: 5, 'PRODUCTNAME': 'Alice Mutton', UNITPRICE: 39, UNITSINORDER: 0, UNITSINSTOCK: 0 }
-    ];
-    return account;
-}
+  ];
 ```
 
-If you need the data query to be performed after the `parent-keys` is updated, `query-on-init = false` and `query-on-bind = true` must be changed
+If you need the data query to be performed after the `parent-keys` is updated, `query-on-init = false` and `query-on-bind = true` must be changed.
+
+{: .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"`).
+---
 
 ### Binding to remote data
 
@@ -384,7 +387,7 @@ You can see different predefined table cell renderers in the example below.
 ![Predefined table cell renderers]({{ "/assets/images/components/tabla/renderers_table.png" | absolute_url }}){: .comp-example-img}
 
 ```html
-<o-table  attr="accounts" columns="PHOTO;NAME;ACCOUNT;BALANCE;STARTDATE;NUMCARDS;ENDDATE;INTERESRATE;CLOSED" visible-columns="PHOTO;NAME;STARTDATE;ACCOUNT;BALANCE;NUMCARDS;INTERESRATE;COMMISSION" title="ACCOUNTS" [static-data]="getTableData()" sort-columns="ACCOUNT:DESC" query-on-init="false" quick-filter="yes" insert-button="no" delete-button="no" refresh-button="no" pagination-controls="no" export-button="no">
+<o-table  attr="accounts" columns="PHOTO;NAME;ACCOUNT;BALANCE;STARTDATE;NUMCARDS;ENDDATE;INTERESRATE;CLOSED" visible-columns="PHOTO;NAME;STARTDATE;ACCOUNT;BALANCE;NUMCARDS;INTERESRATE;COMMISSION" title="ACCOUNTS" [static-data]="tableData" sort-columns="ACCOUNT:DESC" query-on-init="false" quick-filter="yes" insert-button="no" delete-button="no" refresh-button="no" pagination-controls="no" export-button="no">
   <!--Date Renderer-->
   <o-table-column attr="STARTDATE" title="STARTDATE" type="date"> </o-table-column>
   <!--Currency Renderer-->
@@ -901,7 +904,7 @@ The `o-table` component supports *fixed header* and *footer* setting `fixed-head
 
 <h3 class="grey-color">Example</h3>
 ```html
-<o-table #table attr="table" title="ACCOUNTS" fixed-header="yes" [static-data]="getTableData()" columns="ACCOUNTID;ENTITYID;OFFICEID;CDID;ANID;BALANCE;STARTDATE;ENDDATE;INTERESRATE;ACCOUNTTYP"
+<o-table #table attr="table" title="ACCOUNTS" fixed-header="yes" [static-data]="tableData" columns="ACCOUNTID;ENTITYID;OFFICEID;CDID;ANID;BALANCE;STARTDATE;ENDDATE;INTERESRATE;ACCOUNTTYP"
     visible-columns="ENTITYID;OFFICEID;CDID;ANID;ACCOUNTTYP;BALANCE" layout-padding sort-columns="ANID" query-on-init="false"
     quick-filter="yes" insert-button="no" delete-button="no" refresh-button="no" pagination-controls="no" export-button="no"
     [ngStyle]="height:400px">
@@ -914,7 +917,7 @@ The `o-table` component supports *fixed header* and *footer* setting `fixed-head
 
 ### Aggregates
 
-Oftentimes, when displaying numbers in the table, users would like to be able to see the results from aggregate calculations at the bottom of the table columns. The  `o-table` component has support for the mostly used aggregate functions (count,sum,avg,min,max).
+Often when displaying numbers in a table, users want to show summary results of aggregate calculations at the bottom of the table columns. The `o‑table` component supports commonly used aggregation functions (**count**, **sum**, **avg**, **min**, **max**) using `aggregate` input and also allows specifying a **custom aggregation function** using the `aggregate-function` input, which may return either a **synchronous number** or a **Promise<number>** (for asynchronous operations).
 
 <h3 class="grey-color">Example</h3>
 
@@ -928,7 +931,7 @@ Oftentimes, when displaying numbers in the table, users would like to be able to
     <o-table-column attr="BALANCE" title="BALANCE" type="currency" currency-symbol="€" thousand-separator=","></o-table-column>
     <o-table-column attr="INTERESRATE" title="INTERESRATE" type="real" ></o-table-column>
     <o-table-column-aggregate attr="BALANCE" title="sum">
-    <o-table-column-aggregate attr="INTERESRATE" [function-aggregate]="custom"></o-table-column-aggregate>
+    <o-table-column-aggregate attr="INTERESRATE" [aggregate-function]="custom"></o-table-column-aggregate>
 </o-table>
 ```
 
@@ -1458,7 +1461,7 @@ By default, the table is *groupable* and for grouping/ungrouping by one o more c
 If there is at least one grouping, the table automatically applies the *sum function* on those of type `currency`, `integer` and `real` and whose value will be displayed in the grouped row.
 If you want to exclude this function from being performed, you must add this column in the `excluded-aggregate-columns` attribute in `o-table-columns-grouping` component.
 
- You can configure the *aggregate functions* (count,sum,avg,min,max) in the `o-table-columns-grouping` component. Additionally, you can specify aggregate function to be applied with `function-aggregate` attribute.
+ You can configure the *aggregate functions* (count,sum,avg,min,max) in the `o-table-columns-grouping` component. Additionally, you can specify aggregate function to be applied with `aggregate-function` attribute.
 
  By default, when you change the aggregate function in a column, it will change in all grouped rows of the same level, if you want to avoid this behavior you must add `change-aggregate-same-level="no"`.