diff --git a/_data/components/currencyInput.yml b/_data/components/currencyInput.yml index a097fcf3d..ca4057cfe 100644 --- a/_data/components/currencyInput.yml +++ b/_data/components/currencyInput.yml @@ -28,6 +28,13 @@ attributes: [{ default : "right", required : "", description : "Position of the currency symbol" +},{ + name : "currency-symbol-column", + type: "string", + default: "", + since: "15.9.0", + description: "Column name containing the currency symbol for each row. Default:$. Supports nested properties using dot notation (e.g., 'currency.symbol')" + }] inheritedOutputs: [{ diff --git a/_data/components/data-view.yml b/_data/components/data-view.yml new file mode 100644 index 000000000..16be5d074 --- /dev/null +++ b/_data/components/data-view.yml @@ -0,0 +1,110 @@ +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.", + }, + { + name: "delete-button", + type: "no | false | yes | true", + default: "yes", + required: "", + description: "Indicates whether or not to show a button for deleting data", + }, + { name: "insert-button" }, + { name: "refresh-button" }, + ] + +extraComponents: "dataViewData" + +directives: [{ name: "oDataViewTableColumns" }, { name: "oDataViewGridItem" }] 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/_data/components/dataViewData/types/grid-config.yml b/_data/components/dataViewData/types/grid-config.yml new file mode 100644 index 000000000..ef413f7b2 --- /dev/null +++ b/_data/components/dataViewData/types/grid-config.yml @@ -0,0 +1,52 @@ +type: "GridConfig" + +description: "Represents the configuration object used by o-data-view to customize the embedded o-grid view. +All options are equivalent to the o-grid inputs, so you can consult its API to understand the meaning of each property. +

+type GridConfig = {
+  enabled?: CustomBoolean;
+  visible?: CustomBoolean;
+  cols?: number;
+  gridItemHeight?: string | number;
+  gutterSize?: string;
+  insertButtonFloatable?: CustomBoolean;
+  insertButtonPosition?: 'botton' | 'top';
+  pageSizeOptions?: any[];
+  orderable?: CustomBoolean;
+  quickFilterColumns?: string;
+  showFooter?: CustomBoolean;
+  showPageSize?: CustomBoolean;
+  sortColumn?: string;
+  sortableColumns?: string;
+  detailMode?: 'none' | 'click' | 'dblclick';
+};
+
+" + +propertiesColumns: ["Name", "Type", "Description"] + +attributes: + [ + { name: "enabled", type: "'yes' | 'no' | 'true' | 'false'", optional: true }, + { name: "visible", type: "'yes' | 'no' | 'true' | 'false'", optional: true }, + + { name: "cols", type: "number", optional: true }, + { name: "gridItemHeight", type: "string | number", optional: true }, + { name: "gutterSize", type: "string", optional: true }, + + { name: "insertButtonFloatable", type: "'yes' | 'no' | 'true' | 'false'", optional: true }, + { name: "insertButtonPosition", type: "'botton' | 'top'", optional: true }, + + { name: "pageSizeOptions", type: "any[]", optional: true }, + { name: "orderable", type: "'yes' | 'no' | 'true' | 'false'", optional: true }, + + { name: "quickFilterColumns", type: "string", optional: true }, + + { name: "showFooter", type: "'yes' | 'no' | 'true' | 'false'", optional: true }, + { name: "showPageSize", type: "'yes' | 'no' | 'true' | 'false'", optional: true }, + + { name: "sortColumn", type: "string", optional: true }, + { name: "sortableColumns", type: "string", optional: true }, + + { name: "detailMode", type: "'none' | 'click' | 'dblclick'", optional: true } + ] \ No newline at end of file diff --git a/_data/components/dataViewData/types/table-config.yml b/_data/components/dataViewData/types/table-config.yml new file mode 100644 index 000000000..2f5899102 --- /dev/null +++ b/_data/components/dataViewData/types/table-config.yml @@ -0,0 +1,137 @@ +type: "TableConfig" + +description: "Represents the configuration object used by o-data-view to customize the embedded o-table view. +All options are equivalent to the o-table inputs, so you can consult its API to understand the meaning of each property. +

+type TableConfig = {
+  visible?: CustomBoolean;
+  detailButtonInRow?: CustomBoolean;
+  detailButtonInRowIcon?: string;
+  editButtonInRow?: CustomBoolean;
+  editButtonInRowIcon?: string;
+  editFormRoute?: string;
+  rowHeight?: 'small' | 'medium' | 'large';
+  autoAdjust?: CustomBoolean;
+  autoAlignTitles?: CustomBoolean;
+  collapseGroupedColumns?: CustomBoolean;
+  columnsVisibilityButton?: CustomBoolean;
+  defaultVisibleColumns?: string;
+  disableSelectionFunction?: (item: any) => boolean;
+  detailMode?: 'none' | 'click' | 'dblclick';
+  editionMode?: 'none' | 'click' | 'dblclick';
+  enabled?: CustomBoolean;
+  exportButton?: CustomBoolean;
+  exportServiceType?: string;
+  filterColumnActiveByDefault?: CustomBoolean;
+  groupable?: CustomBoolean;
+  groupedColumns?: string;
+  horizontalScroll?: CustomBoolean;
+  keepSelectedItems?: CustomBoolean;
+  multipleSort?: CustomBoolean;
+  nonHidableColumns?: string;
+  pageSizeOptions?: any[];
+  orderable?: CustomBoolean;
+  quickFilterFunction?: QuickFilterFunction;
+  resizable?: CustomBoolean;
+  rowClass?: (rowData: any, rowIndex: number) => string | string[];
+  selectAllCheckbox?: CustomBoolean;
+  selectAllCheckboxVisible?: CustomBoolean;
+  selectionMode?: 'none' | 'single' | 'multiple';
+  showConfigurationOption?: CustomBoolean;
+  showExpandableIconFunction?: Function;
+  showFilterOption?: CustomBoolean;
+  showPaginatorFirstLastButtons?: CustomBoolean;
+  showReportOnDemandOption?: CustomBoolean;
+  showChartsOnDemandOption?: CustomBoolean;
+  showResetWidthOption?: CustomBoolean;
+  sortColumns?: string;
+  virtualScroll?: CustomBoolean;
+  visibleColumns?: string;
+  visibleExportDialogButtons?: string;
+  selectionOnRowClick?: CustomBoolean;
+};
+
+" + +propertiesColumns: ["Name", "Type", "Description"] + +attributes: + [ + { name: "visible", type: "'yes' | 'no' | 'true' | 'false'", optional: true }, + { name: "detailButtonInRow", type: "'yes' | 'no' | 'true' | 'false'", optional: true }, + { name: "detailButtonInRowIcon", type: "string", optional: true }, + { name: "editButtonInRow", type: "'yes' | 'no' | 'true' | 'false'", optional: true }, + { name: "editButtonInRowIcon", type: "string", optional: true }, + { name: "editFormRoute", type: "string", optional: true }, + { name: "rowHeight", type: "'small' | 'medium' | 'large'", optional: true }, + { name: "autoAdjust", type: "'yes' | 'no' | 'true' | 'false'", optional: true }, + { name: "autoAlignTitles", type: "'yes' | 'no' | 'true' | 'false'", optional: true }, + { name: "collapseGroupedColumns", type: "'yes' | 'no' | 'true' | 'false'", optional: true }, + { name: "columnsVisibilityButton", type: "'yes' | 'no' | 'true' | 'false'", optional: true }, + { name: "defaultVisibleColumns", type: "string", optional: true }, + { + name: "disableSelectionFunction", + type: "(item: any) => boolean", + optional: true, + }, + { + name: "detailMode", + type: "'none' | 'click' | 'dblclick'", + optional: true, + }, + { + name: "editionMode", + type: "'none' | 'click' | 'dblclick'", + optional: true, + }, + { name: "enabled", type: "'yes' | 'no' | 'true' | 'false'", optional: true }, + { name: "exportButton", type: "'yes' | 'no' | 'true' | 'false'", optional: true }, + { name: "exportServiceType", type: "string", optional: true }, + { + name: "filterColumnActiveByDefault", + type: "'yes' | 'no' | 'true' | 'false'", + optional: true, + }, + { name: "groupable", type: "'yes' | 'no' | 'true' | 'false'", optional: true }, + { name: "groupedColumns", type: "string", optional: true }, + { name: "horizontalScroll", type: "'yes' | 'no' | 'true' | 'false'", optional: true }, + { name: "keepSelectedItems", type: "'yes' | 'no' | 'true' | 'false'", optional: true }, + { name: "multipleSort", type: "'yes' | 'no' | 'true' | 'false'", optional: true }, + { name: "nonHidableColumns", type: "string", optional: true }, + { name: "pageSizeOptions", type: "any[]", optional: true }, + { name: "orderable", type: "'yes' | 'no' | 'true' | 'false'", optional: true }, + { + name: "quickFilterFunction", + type: "QuickFilterFunction", + optional: true, + }, + { name: "resizable", type: "'yes' | 'no' | 'true' | 'false'", optional: true }, + { + name: "rowClass", + type: "(rowData: any, rowIndex: number) => string | string[]", + optional: true, + }, + { name: "selectAllCheckbox", type: "'yes' | 'no' | 'true' | 'false'", optional: true }, + { name: "selectAllCheckboxVisible", type: "'yes' | 'no' | 'true' | 'false'", optional: true }, + { + name: "selectionMode", + type: "'none' | 'single' | 'multiple'", + optional: true, + }, + { name: "showConfigurationOption", type: "'yes' | 'no' | 'true' | 'false'", optional: true }, + { name: "showExpandableIconFunction", type: "Function", optional: true }, + { name: "showFilterOption", type: "'yes' | 'no' | 'true' | 'false'", optional: true }, + { + name: "showPaginatorFirstLastButtons", + type: "'yes' | 'no' | 'true' | 'false'", + optional: true, + }, + { name: "showReportOnDemandOption", type: "'yes' | 'no' | 'true' | 'false'", optional: true }, + { name: "showChartsOnDemandOption", type: "'yes' | 'no' | 'true' | 'false'", optional: true }, + { name: "showResetWidthOption", type: "'yes' | 'no' | 'true' | 'false'", optional: true }, + { name: "sortColumns", type: "string", optional: true }, + { name: "virtualScroll", type: "'yes' | 'no' | 'true' | 'false'", optional: true }, + { name: "visibleColumns", type: "string", optional: true }, + { name: "visibleExportDialogButtons", type: "string", optional: true }, + { name: "selectionOnRowClick", type: "'yes' | 'no' | 'true' | 'false'", optional: true } + ] diff --git a/_data/components/form.yml b/_data/components/form.yml index f40a197b1..ea3d8e4f6 100644 --- a/_data/components/form.yml +++ b/_data/components/form.yml @@ -185,6 +185,12 @@ attributes: [ type: "(data: any) => OFormValidation", since: "15.4.2", description: "Executes the before-save validation callback for insert and update operations." +},{ + name: "header-position", + type: "top | bottom", + default: "top", + required: "", + description: "Indicates the position of the form toolbar" },{ name: "configure-service-args" }] diff --git a/_data/components/formLayoutManager.yml b/_data/components/formLayoutManager.yml index ca0435090..78b5f672a 100644 --- a/_data/components/formLayoutManager.yml +++ b/_data/components/formLayoutManager.yml @@ -8,7 +8,7 @@ attributes: [{ name: "attr" },{ name: "mode", - type: "tab | dialog | split-pane", + type: "tab | dialog | split-pane | sidenav", default: "dialog", required: "", description: "Form layout manager mode" @@ -78,6 +78,18 @@ attributes: [{ default: "", required: "", description: "Deprecated. The dialog maximum height" +},{ + name: "sidenav-position", + type: "start | end", + default: "end", + required: "", + description: "Position of the sidenav when the layout manager is in sidenav mode" +},{ + name: "sidenav-width", + type: "string", + default: "60%", + required: "", + description: "Width of the sidenav when the layout manager is in sidenav mode" },{ name: "store-state" }] @@ -102,5 +114,8 @@ directives: [ }, { name: "o-form-layout-tabgroup-options" + }, + { + name: "o-form-layout-sidenav-options" } ] diff --git a/_data/components/formLayoutManagerComponents/formLayoutSidenavOptions.yml b/_data/components/formLayoutManagerComponents/formLayoutSidenavOptions.yml new file mode 100644 index 000000000..38eb471b4 --- /dev/null +++ b/_data/components/formLayoutManagerComponents/formLayoutSidenavOptions.yml @@ -0,0 +1,28 @@ +directive: "o-form-layout-sidenav-options" +title: "Sidenav mode" + +attributes: [{ + name: "width", + type: "string", + default: "", + required: "", + description: "Width of the sidenav panel" +},{ + name: "position", + type: "start | end", + default: "end", + required: "", + description: "Position of the sidenav" +},{ + name: "label-columns", + type: "string", + default: "", + required: "", + description: "Form data columns used in the detail form title. Separated by ';'" +},{ + name: "separator", + type: "string", + default: "' ' (blank space)", + required: "", + description: "Separator between multiple label columns values" +}] diff --git a/_data/components/grid.yml b/_data/components/grid.yml index faa0eb343..61662ecb3 100644 --- a/_data/components/grid.yml +++ b/_data/components/grid.yml @@ -10,7 +10,7 @@ inheritedAttributes: [{ },{ component: "OServiceComponent", path: "components/service/service/api", - attributes: ["title", "visible", "enabled", "controls", "detail-mode", "detail-form-route", "recursive-detail", "quick-filter", "quick-filter-placeholder", "quick-filter-appearance", "pagination-controls", "page-size-options"] + attributes: ["title", "visible", "enabled", "controls", "detail-mode", "detail-form-route", "recursive-detail", "quick-filter", "quick-filter-placeholder", "quick-filter-appearance", "pagination-controls", "page-size-options","initial-filter-function", "filter-builder-function"] }] attributes: [{ diff --git a/_data/components/image-editor.yml b/_data/components/image-editor.yml new file mode 100644 index 000000000..63e0763d7 --- /dev/null +++ b/_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" diff --git a/_data/components/list.yml b/_data/components/list.yml index 15764fffe..109e25846 100644 --- a/_data/components/list.yml +++ b/_data/components/list.yml @@ -9,7 +9,7 @@ inheritedAttributes: [{ },{ component: "OServiceComponent", path: "components/service/service/api", - attributes: ["title", "visible", "enabled", "controls", "detail-mode", "detail-form-route", "recursive-detail", "detail-button-in-row", "detail-button-in-row-icon", "edit-form-route", "recursive-edit", "edit-button-in-row", "edit-button-in-row-icon", "insert-button", "row-height", "insert-form-route", "recursive-insert", "quick-filter", "quick-filter-placeholder", "quick-filter-appearance", "pagination-controls", "page-size-options"] + attributes: ["title", "visible", "enabled", "controls", "detail-mode", "detail-form-route", "recursive-detail", "detail-button-in-row", "detail-button-in-row-icon", "edit-form-route", "recursive-edit", "edit-button-in-row", "edit-button-in-row-icon", "insert-button", "row-height", "insert-form-route", "recursive-insert", "quick-filter", "quick-filter-placeholder", "quick-filter-appearance", "pagination-controls", "page-size-options","initial-filter-function", "filter-builder-function"] }] inheritedOutputs: [{ diff --git a/_data/components/listData/01.listItem.yml b/_data/components/listData/01.listItem.yml deleted file mode 100644 index 363360a4f..000000000 --- a/_data/components/listData/01.listItem.yml +++ /dev/null @@ -1,2 +0,0 @@ -directive: "o-list-item" -title: "List item" diff --git a/_data/components/listData/02.listItemDirective.yml b/_data/components/listData/02.listItemDirective.yml index a257048b7..0709b90a3 100644 --- a/_data/components/listData/02.listItemDirective.yml +++ b/_data/components/listData/02.listItemDirective.yml @@ -1,5 +1,5 @@ directive: "o-list-item" -title: "List item directive" +title: "List item" attributes: [{ name: "o-list-item", diff --git a/_data/components/otableData/00table.yml b/_data/components/otableData/00table.yml index bcbadb980..02f6a5aed 100644 --- a/_data/components/otableData/00table.yml +++ b/_data/components/otableData/00table.yml @@ -9,7 +9,7 @@ inheritedAttributes: [{ },{ component: "OServiceComponent", path: "components/service/service/api", - attributes: ["title", "visible", "enabled", "controls", "detail-mode", "detail-form-route", "recursive-detail", "detail-button-in-row", "detail-button-in-row-icon", "edit-form-route", "recursive-edit", "edit-button-in-row", "edit-button-in-row-icon", "insert-button", "row-height", "insert-form-route", "recursive-insert", "filter-case-sensitive", "quick-filter", "quick-filter-placeholder", "pagination-controls", "page-size-options"] + attributes: ["title", "visible", "enabled", "controls", "detail-mode", "detail-form-route", "recursive-detail", "detail-button-in-row", "detail-button-in-row-icon", "edit-form-route", "recursive-edit", "edit-button-in-row", "edit-button-in-row-icon", "insert-button", "row-height", "insert-form-route", "recursive-insert", "filter-case-sensitive", "quick-filter", "quick-filter-placeholder", "pagination-controls", "page-size-options","initial-filter-function", "filter-builder-function"] }] attributes: [{ @@ -190,7 +190,7 @@ attributes: [{ },{ name: "groupable", type: "no | false | yes | true", - default: "no", + default: "yes", required: "", description: "Indicates whether or not to group by column" },{ @@ -225,6 +225,13 @@ attributes: [{ required: "", default: "yes" },{ + name: "show-charts-on-demand-option", + type: "yes|no|true|false", + description: "Indicates whether or not to show the charts on demand menu option in the header menu", + required: "", + default: "yes" +}, +{ name: "show-reset-width-option", type: "yes|no|true|false", description: "Indicates whether or not to show the reset width menu option in the header menu", @@ -249,6 +256,12 @@ attributes: [{ description: "Indicates whether row selection is triggered when clicking on a row", required: "", default: "yes" +},{ + name: "show-header-tooltip", + type: "yes|no|true|false", + description: "Indicates whether or not to show tooltip in the column headers", + required: "", + default: "no" }] inheritedOutputs: [{ @@ -573,6 +586,15 @@ methods: [{ type: "method", description: "Updates the state storage with the current table configuration when enabled." -}] +},{ + name: "addDefaultRowButtons", + type: "method", + description: "Adds the default per-row action button columns (edit/detail) to the table when enabled by configuration." +},{ + name: "addButtonInRow", + type: "method", + description: "Creates and registers a fixed non-searchable/non-orderable/non-resizable/non-groupable action column and ensures it is included in visibleColumns" +} +] extraComponents: "otableData" \ No newline at end of file diff --git a/_data/components/otableData/01tableColumn.yml b/_data/components/otableData/01tableColumn.yml index 9b22f5426..ebaf62be5 100644 --- a/_data/components/otableData/01tableColumn.yml +++ b/_data/components/otableData/01tableColumn.yml @@ -139,4 +139,20 @@ attributes: [{ type: "ErrorData[]", default: "[]", description: "Array of custom validators error information (synchronous or asynchronous). Each element must have a 'name' property corresponding to the validator error name and a 'text' property that will be displayed when the component value does not satisfy the validator condition" +},{ + name: "header-tooltip", + type: "string", + since: "v15.9.0", + description: "Tooltip text shown when hovering over the column header. If `header-tooltip-icon` is also set, the tooltip is displayed on the icon instead of the header text" +},{ + name: "header-tooltip-icon", + type: "string", + since: "v15.9.0", + description: "Material icon name rendered next to the header title. The tooltip defined in `header-tooltip` will be attached to this icon." +},{ + name: "header-tooltip-class", + type: "string", + since: "v15.9.0", + default: "o-table-header-icon-tooltip", + description: "CSS class applied to the matTooltip in the column header. Useful for custom tooltip styling." }] diff --git a/_data/components/otableData/02tableColumnsFiltersColumn.yml b/_data/components/otableData/02tableColumnsFiltersColumn.yml index 30d25439d..7ca7fd640 100644 --- a/_data/components/otableData/02tableColumnsFiltersColumn.yml +++ b/_data/components/otableData/02tableColumnsFiltersColumn.yml @@ -29,5 +29,22 @@ attributes: { name: "query-method", since: "15.2.1" - } + }, + { + name: 'mode', + description: 'Indicates the filtering mode for the column. `default` combines both selection and custom modes. `selection` allows filtering by selecting values present in the column. `custom` allows filtering using a form control.', + since: '15.9.0', + type: 'default | custom | selection', + default: 'default' + },{ + name: 'date-format', + default: "Column format", + required: "15.9.0", + description: "Date format. See [MomentJS format](http://momentjs.com/docs/#/displaying/format){:target='_blank'}" + },{ + name: 'date-value-type', + since: '15.9.0', + description: 'Indicates how the date value is stored and sent in the filter query.', + type: 'string | date | iso-8601 | timestamp', + default: 'timestamp' } ] diff --git a/_data/components/otableData/renderers/03tableColumnRendererCurrency.yml b/_data/components/otableData/renderers/03tableColumnRendererCurrency.yml index 320c37708..ba4cbfbd7 100644 --- a/_data/components/otableData/renderers/03tableColumnRendererCurrency.yml +++ b/_data/components/otableData/renderers/03tableColumnRendererCurrency.yml @@ -26,6 +26,11 @@ attributes: [{ name: "min-decimal-digits" },{ name: "max-decimal-digits" +},{ + name: "currency-symbol-column", + type: "string", + default: "$", + description: "Column name containing the currency symbol for each row. Supports nested properties using dot notation (e.g., 'currency.symbol')" }] inherit_properties: [{ diff --git a/_data/components/otableData/types/OTableGlobalConfig.yml b/_data/components/otableData/types/OTableGlobalConfig.yml index 85e3f18e0..b3d73ce1c 100644 --- a/_data/components/otableData/types/OTableGlobalConfig.yml +++ b/_data/components/otableData/types/OTableGlobalConfig.yml @@ -1,16 +1,30 @@ type: "OTableGlobalConfig" description: "Represents the default options for the table that can be configured using the O_TABLE_GLOBAL_CONFIG injection token. -

-type OTableGlobalConfig = {
-  autoAdjust: boolean;
-  autoAlignTitles: boolean;
-  filterColumnActiveByDefault: boolean;
-  editionMode: OTableEditionMode;
-  detailMode: OTableDetailMode;
-  rowHeight: ORowHeight
-};
-
-" +
+
+
+        
+          type OTableGlobalConfig = {
+            autoAdjust: boolean;
+            autoAlignTitles: boolean;
+            filterColumnActiveByDefault: boolean;
+            editionMode: OTableEditionMode;
+            detailMode: OTableDetailMode;
+            rowHeight: ORowHeight;
+            selectionOnRowClick: boolean;
+            showChartOnDemandOption: boolean;
+            showReportOnDemandOption: boolean;
+            loading: {
+              threshold: number;
+              minVisibleRows: number;
+            };
+            horizontalScroll: boolean;
+            showHeaderTooltip: boolean;
+          };  
+        
+      
+
+
" attributes: [{ name: "autoAlignTitles", @@ -18,67 +32,73 @@ attributes: [{ default: "yes", description: "Indicates whether or not to auto align the table header cells", required : "", -},{ + },{ name: "autoAdjust", type: "false | true", default : "yes", required : "", description : "Indicates whether or not to auto adjust column width to its content." -},{ + },{ name: "filterColumnActiveByDefault", type: "false | true", default : "yes", required : "", description : "Indicates whether or not to active filter by column." -},{ + },{ name: "editionMode", type: "'none' | 'click' | 'dblclick' | 'doubleclick'", default : "'none'", required : "", description : "Indicates the edition mode." -},{ + },{ name: "detailMode", type: "'none' | 'click' | 'dblclick' | 'doubleclick'", default : "'click'", required : "", description : "Indicates the detail mode." -},{ + },{ name: "rowHeight", type: "'small' | 'medium' | 'large'", default : "'click'", required : "", description : "Indicates the row height" -},{ + },{ name: "horizontalScroll" , type: "boolean", default : "false", required : "", description : "Indicates whether horizontal scroll is enabled." -},{ + },{ name: "selectionOnRowClick", type: "boolean", default : "", required : "", description : "Indicates whether row selection is triggered when clicking on a row." -}, -{ - name: "showChartOnDemandOption", + },{ + name: "showChartsOnDemandOption", type: "boolean", default : "true", required : "", - description : "Indicates whether to show or not the 'Cart on demand' option in the table menu." -}, -{ + description : "Indicates whether to show or not the 'Chart on demand' option in the table menu." + },{ name: "showReportOnDemandOption", type: "boolean", default : "true", required : "", description : "Indicates whether to show or not the 'Report on demand' option in the table menu." -}, -{ name: "loading", + },{ + name: "loading", type: "{threshold: number, minVisibleRows: number}", default : "{threshold:300 , minVisibleRows: 300}", required : "", description : "Configuration object for loading strategy." -}] +}, +{ + name: "showHeaderTooltip", + type: "boolean", + default : "false", + required : "", + description : "Indicates whether to show or not the tooltip on header cells." +} +] diff --git a/_data/components/service.yml b/_data/components/service.yml index fe6bbaf5e..cbc1b5cbe 100644 --- a/_data/components/service.yml +++ b/_data/components/service.yml @@ -62,6 +62,16 @@ attributes: [{ default : "outline", required : "", description : "Indicates which of the mat-form-field different except in o-table component[appearance variants](https://v15.material.angular.io/components/form-field/overview#form-field-appearance-variants) will be used. except in the o-table component." +},{ + name: "initial-filter-function", + type: "() => Expression | { [key: string]: any }", + since: "15.8.3", + description: "Callback function that returns an initial filter to be applied on every query." +},{ + name : "filter-builder-function", + type: "() => OFilterBuilderComponent", + description: "Callback function that resolves the OFilterBuilderComponent instance", + since: "15.9.0" }] diff --git a/_data/components/tree.yml b/_data/components/tree.yml index 667096aad..dbcbef6c2 100644 --- a/_data/components/tree.yml +++ b/_data/components/tree.yml @@ -6,7 +6,7 @@ apiTitle: "OTreeComponent" inheritedAttributes: [{ component: "OServiceBaseComponent", path: "components/service/service-base/api", - attributes: ["attr", "static-data", "service", "service-type","query-fallback-function", "query-method", "entity", "keys", "parent-keys", "columns", "query-on-init", "query-on-bind", "query-rows", "insert-method", "update-method", "paginated-query-method", "delete-method", "pageable", "store-state"] + attributes: ["attr", "static-data", "service", "service-type","query-fallback-function", "query-method", "entity", "keys", "parent-keys", "columns", "query-on-init", "query-on-bind", "query-rows", "insert-method", "update-method", "paginated-query-method", "delete-method", "pageable", "store-state", "initial-filter-function"] }] attributes: [{ diff --git a/_data/menu_descriptions.yml b/_data/menu_descriptions.yml index edbf9d29e..68fba8017 100644 --- a/_data/menu_descriptions.yml +++ b/_data/menu_descriptions.yml @@ -425,4 +425,13 @@ 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" + - url: "/extra-components/image-editor/overview" + title: "Image Editor" + description: "Display and refine the same image through different editing interactions" diff --git a/_includes/o-component-single-api.md b/_includes/o-component-single-api.md index dabf5d3d2..01850cee9 100644 --- a/_includes/o-component-single-api.md +++ b/_includes/o-component-single-api.md @@ -178,7 +178,15 @@ {% endif %} - + {% if componentData.directives %} +

Directives

+ + {% endif %} {% if componentData.inheritedOutputs %}

Inherited outputs

@@ -260,3 +268,16 @@ {% endif %} {% endif %} + +{% assign typesFolder = componentData.types %} + +{% if componentData.extraComponents %} + {% assign extraKey = componentData.extraComponents %} + {% assign typesFolder = site.data.components[extraKey].types | default: typesFolder %} +{% endif %} + +{% if typesFolder and typesFolder.size > 0 %} +
+ {% include functions/o-table/type-api.html folder=typesFolder %} +
+{% endif %} \ No newline at end of file diff --git a/_includes/o-component-single.md b/_includes/o-component-single.md index 17f704b75..2fbc2594c 100644 --- a/_includes/o-component-single.md +++ b/_includes/o-component-single.md @@ -137,12 +137,18 @@ {% endfor %} {% assign filenameArray = filenameArray | sort %} {% for filename in filenameArray %} - {% assign dataFile = site.data.components[extraComp][filename] %} - {% capture dataFileCapture %} - {% include o-component-single-api.md component=dataFile extra=true %} - {% endcapture %} - - {{ dataFileCapture | replace: ' ', '' }} + {% if filename != 'types' %} + {% assign dataFile = site.data.components[extraComp][filename] %} + + {%- comment -%} render only "file-like" entries {%- endcomment -%} + {% if dataFile.directive or dataFile.class or dataFile.apiTitle or dataFile.title %} + {% capture dataFileCapture %} + {% include o-component-single-api.md component=dataFile extra=true %} + {% endcapture %} + + {{ dataFileCapture | replace: ' ', '' }} + {% endif %} + {% endif %} {% endfor %} {% endif %} diff --git a/assets/images/components/tabla/header-tooltip-icon.png b/assets/images/components/tabla/header-tooltip-icon.png new file mode 100644 index 000000000..debb1e7ce Binary files /dev/null and b/assets/images/components/tabla/header-tooltip-icon.png differ diff --git a/assets/images/extra-components/data-view/data-view-example.gif b/assets/images/extra-components/data-view/data-view-example.gif new file mode 100644 index 000000000..a1e440239 Binary files /dev/null and b/assets/images/extra-components/data-view/data-view-example.gif differ diff --git a/assets/images/extra-components/image-editor/example-crop.png b/assets/images/extra-components/image-editor/example-crop.png new file mode 100644 index 000000000..1c11c88d7 Binary files /dev/null and b/assets/images/extra-components/image-editor/example-crop.png differ diff --git a/assets/images/extra-components/image-editor/example-resize.png b/assets/images/extra-components/image-editor/example-resize.png new file mode 100644 index 000000000..bc169a5e7 Binary files /dev/null and b/assets/images/extra-components/image-editor/example-resize.png differ diff --git a/assets/images/extra-components/image-editor/example-upload.png b/assets/images/extra-components/image-editor/example-upload.png new file mode 100644 index 000000000..c5123d280 Binary files /dev/null and b/assets/images/extra-components/image-editor/example-upload.png differ diff --git a/assets/images/layouts/form-layout-manager/formLayoutManagerSIDENAV.png b/assets/images/layouts/form-layout-manager/formLayoutManagerSIDENAV.png new file mode 100644 index 000000000..0de91eeb0 Binary files /dev/null and b/assets/images/layouts/form-layout-manager/formLayoutManagerSIDENAV.png differ diff --git a/assets/images/menus/data/data-view.svg b/assets/images/menus/data/data-view.svg new file mode 100644 index 000000000..6d057209c --- /dev/null +++ b/assets/images/menus/data/data-view.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + 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..5b71cd4bf --- /dev/null +++ b/assets/images/menus/data/data-view_dark.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + 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 @@ - - + + + + + + + + + + + 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/aditional-information/52-versions.md b/docs/aditional-information/52-versions.md index 8795dbfae..342d15d2b 100644 --- a/docs/aditional-information/52-versions.md +++ b/docs/aditional-information/52-versions.md @@ -25,17 +25,29 @@ In this section you can check the different releases of **OntimizeWeb** and its gallery* report* keycloak* + extra-components* +
+ 15.9.0 + 15.1.1 + 15.0.1

15.0.0 + 15.3.0 + 15.1.2
15.1.1
15.1.0
15.0.0 + 15.1.0 + 15.1.2
15.1.1
15.1.0
15.0.0 + 15.0.0 + + + 15.8.3 + - + + + 15.8.2 + 15.8.1 - 15.1.1 - 15.0.1
15.0.0 - 15.3.0 - 15.1.2
15.1.1
15.1.0
15.0.0 - 15.1.0 - 15.1.2
15.1.1
15.1.0
15.0.0 15.8.0 diff --git a/docs/components/data/35-o-table.component.md b/docs/components/data/35-o-table.component.md index cbf86ffe6..30f4a5f97 100644 --- a/docs/components/data/35-o-table.component.md +++ b/docs/components/data/35-o-table.component.md @@ -343,6 +343,29 @@ A button will also appear to the right of the sort button to change whether you ![Filtering columns by all data]({{ "/assets/images/components/tabla/filter-by-column-all-data.png" | absolute_url }}){: .comp-example-img} +**Filtering date columns** + +When the column to be filtered is of type `date`, you can configure how the date value is interpreted and displayed +using the `date-format` and `date-value-type` inputs. + +- `date-format` sets the format string used to parse and show the date (using [moment.js tokens](https://momentjs.com/docs/#/displaying/format/)). If not set, the format of the `o-table-column` with the same `attr` is used automatically. +- `date-value-type` defines how the value is stored internally: as a `timestamp` (number), a `string`, as a `iso-8601` (date) or a `date` object. + +```html + + + + + + + +``` + + ### Custom filter **OntimizeWeb** allows to customize the table data filtering by building your own filters. You can build complex filtering structures by adding the [`o-filter-builder`]({{ base_path }}/components/data/filterbuilder/overview){:target='_blank'} component to you application. @@ -488,11 +511,48 @@ Include the table cell renderer currency in your table column by configuring the - + ``` +Also you can configure different currency symbols for each row by using the `currency-symbol-column` attribute. This attribute specifies the column name in your data that contains the currency symbol for each row. + +```html + + + + + + + +``` + +The `currency-symbol-column` attribute supports nested properties using dot notation: + +```html + +``` + +**Example data structure:** +```javascript +{ + BALANCE: 1500.50, + currencyCode: "€" +} + +// Or with nested properties: +{ + BALANCE: 1500.50, + currency: { + symbol: "€", + code: "EUR" + } +} +``` + +> **Note:** When `currency-symbol-column` is specified, it takes precedence over the `currency-symbol` attribute for each row where the column value is available. + **Date cell renderer** You can include the table cell renderer date in your table column by configuring the attribute `type` in the column with the value **date** or adding the `o-table-cell-renderer-date` to the table column. You may want to set the displaying date format by configuring the `format` attribute. Check this and other attributes in the **API** section of this page. @@ -1301,6 +1361,98 @@ Table allows multiple columns sorting by default. Using the `multiple-sort` inpu A column is sorted when user clicks on its header. If the multiple sorting is active the previously sorted columns keeps its state, otherwise the previously sorted column returns to its original state. +Aquí la propuesta del apartado nuevo para la documentación: + +--- + +### Header tooltip + +The `o-table` component provides several ways to configure tooltips on column headers, from global configuration to individual column customization. + +**Basic usage** + +Enable a tooltip for all column headers at once using the `show-header-tooltip` input on the table. This will display the column title as the tooltip text on hover. + +```html + + + + + +``` + +**Custom tooltip per column** + +Use `header-tooltip` on each `o-table-column` to define a specific tooltip text, optionally combined with a Material icon using `header-tooltip-icon`. + +```html + + + + + + + +``` + +![Header tooltip icon in o-table-column]({{ "/assets/images/components/tabla/header-tooltip-icon.png" | absolute_url }}){: .comp-example-img} + +**Custom tooltip styling** + +Use `header-tooltip-class` to apply a custom CSS class to the tooltip, allowing full control over its appearance. + +```html + + +``` + +```scss +// styles.scss +.my-custom-tooltip { + background-color: #333; + color: #fff; + font-size: 13px; + max-width: 250px; +} +``` + +**Global configuration** + +To apply `showHeaderTooltip` globally across all `o-table` instances in the application, use `O_TABLE_GLOBAL_CONFIG`: + +```typescript +// app.module.ts +import { O_TABLE_GLOBAL_CONFIG } from 'ontimize-web-ngx'; + +@NgModule({ + providers: [ + { + provide: O_TABLE_GLOBAL_CONFIG, + useValue: { + showHeaderTooltip: true + } + } + ] +}) +export class AppModule { } +``` + +**Priority order** + +When multiple tooltip configurations are present simultaneously, the following priority order applies — higher levels override lower ones: + +``` +1. header-tooltip (o-table-column level) ← highest priority +2. show-header-tooltip (o-table level) +3. showHeaderTooltip (OTableGlobalConfig) ← lowest priority +``` + ### Tooltip in columns The `o-table` component provides a text that is displayed when the user hovers over an column. diff --git a/docs/components/data/image.png b/docs/components/data/image.png new file mode 100644 index 000000000..debb1e7ce Binary files /dev/null and b/docs/components/data/image.png differ diff --git a/docs/components/layout/57-o-form-layout-manager.component.md b/docs/components/layout/57-o-form-layout-manager.component.md index 9b9601f7d..778f5388d 100644 --- a/docs/components/layout/57-o-form-layout-manager.component.md +++ b/docs/components/layout/57-o-form-layout-manager.component.md @@ -106,6 +106,32 @@ It is possible to configure split pane mode options with the `o-form-layout-spli ``` +### Sidenav mode + +Select the *sidenav* mode to display the detail form inside a side navigation panel that slides over the collection component. + +This mode is especially useful when you want a modern master–detail interaction without leaving the current view. The detail component is rendered dynamically inside a `mat-sidenav`, allowing a smooth and contextual user experience. + +You can select this mode setting the value **sidenav** to the `mode` input. You can see a working example of this mode in the [OntimizeWeb Playground](https://try.imatia.com/ontimizeweb/v15/playground/main/layout-manager/sidenav){:target="_blank"}. + +![Form layout manager in *sidenav* mode]({{ base_path }}/assets/images/layouts/form-layout-manager/formLayoutManagerSIDENAV.png){: .align-center; width="800px"} + + +#### Options +It is possible to configure sidenav mode options with the `o-form-layout-sidenav-options` component. This attributes are explained on the **API** section of this page. + +

Example

+ +```html + + + + + ... + + +``` + ### Options definition The different available modes options can be setted in two ways: using the mode option tag or including the mode inputs in the `o-form-layout-manager` tag. diff --git a/docs/components/o_service_components/01-o-service.component.md b/docs/components/o_service_components/01-o-service.component.md index 3a92cdd64..c1e4850f6 100644 --- a/docs/components/o_service_components/01-o-service.component.md +++ b/docs/components/o_service_components/01-o-service.component.md @@ -37,6 +37,95 @@ export class MyComponent extends OServiceBaseComponent { row-height --> +## Initial-filter-function +The `initial-filter-function` input allows you to provide a callback function that returns an initial filter to be applied on every query performed by the component. This filter is merged with any other active filters (quick filter, filter builder) using a logical `AND` operation. + +The returned value can be either an OntimizeWeb **Expression** object (for complex, structured filter expressions) or a **plain key-value object** (for simple column-value filters). The component handles both cases automatically: + +* If the returned value is an Expression, it is combined with the existing filter expression using FilterExpressionUtils.OP_AND. +* If the returned value is a plain object, its properties are merged directly into the base filter object via object spread. + +This input is especially useful when you need to enforce a persistent filter condition regardless of user interactions, such as restricting data to the current user, a specific tenant, or a fixed business rule. + +**Examples** +```html + + ... + +``` + +```ts +import { Expression, FilterExpressionUtils } from 'ontimize-web-ngx'; + +// Returning a Expression (STARTDATE > 01/01/2010 AND < Today) +initialFilterFunction(): Expression { + const exp1 = FilterExpressionUtils.buildExpressionMoreEqual('STARTDATE', 1262304000000); + const exp2 = FilterExpressionUtils.buildExpressionLessEqual('STARTDATE', Date.now()); + return FilterExpressionUtils.buildComplexExpression(exp1, exp2, FilterExpressionUtils.OP_AND); +} + +//Returning a plain key-value object +initialFilterFunction(): { [key: string]: any } { + return { CUSTOMERTYPEID: 1 }; +} +``` + +**NOTE**: +* **Execution on every query**: The callback is invoked on every request made by the component, including pagination, sorting, and refresh actions. Ensure the function is lightweight and side-effect free. +* **Compatibility**: This input is available on all components that extend OServiceComponent, including o-table, o-grid, o-list, and similar data-bound components. + +## Filter builder function + +The `filter-builder-function` input allows associating an [`o-filter-builder`](../../data/filterbuilder/overview) +component with any component that extends `OServiceComponent` (such as `o-table`, `o-list`, `o-grid` or `o-data-view`) +when a direct template reference is not possible or when the instance needs to be resolved dynamically at query time. + +This input accepts a callback function with no parameters that returns the `OFilterBuilderComponent` instance to use. +Every time the component performs a data query, it will call this function to retrieve the filter builder and apply +its expression. + +> This approach is an alternative to calling the `setFilterBuilder()` method directly on the component. Use +> `filter-builder-function` when the `o-filter-builder` is defined in a different part of the template, such as +> in a parent component or inside an `o-data-view`. + +**Examples** + +```html + + + + + + + + + + + + + + + + + + + + +``` + +```ts +... + @ViewChild('filterBuilder') filterBuilder: OFilterBuilderComponent; + protected getFilterBuilder = () => this.filterBuilder; +... +``` + + ## Navigation to record detail In the service components, the default action when user clicks a item is to trigger the navigation to its record detail. For changing this behaviour, the user can change the `detail-mode` input value using one of the following values `none`, `click` or `doubleclick`. 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/extra-components/data-view/36-o-data-view.component-api.md b/docs/extra-components/data-view/36-o-data-view.component-api.md new file mode 100644 index 000000000..e8ac86534 --- /dev/null +++ b/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 +--- \ No newline at end of file diff --git a/docs/extra-components/data-view/36-o-data-view.component.md b/docs/extra-components/data-view/36-o-data-view.component.md new file mode 100644 index 000000000..4866b7131 --- /dev/null +++ b/docs/extra-components/data-view/36-o-data-view.component.md @@ -0,0 +1,235 @@ +--- +layout: o-component +permalink: /extra-components/data-view/overview +title: "Data view" +comp: data-view +parent: Extra-components +nav_order: 2 +--- + +{% 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 view component]({{ "/assets/images/extra-components/data-view/data-view-example.gif" | absolute_url }}){: .comp-example-img} + +## 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]({{base_path}}/extra-components/data-view/api#TableConfig) +* `grid-config`: grid-specific configuration (layout, footer, orderable, quick filter columns, etc.). See all of its properties [here]({{base_path}}/extra-components/data-view/api#GridConfig) + +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). diff --git a/docs/extra-components/image-editor/o-image-editor.component-api.md b/docs/extra-components/image-editor/o-image-editor.component-api.md new file mode 100644 index 000000000..4563e4361 --- /dev/null +++ b/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 +--- \ No newline at end of file diff --git a/docs/extra-components/image-editor/o-image-editor.component.md b/docs/extra-components/image-editor/o-image-editor.component.md new file mode 100644 index 000000000..2313340d3 --- /dev/null +++ b/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). + 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 { } +```