* [AAE-37713] amount widget formats value based on locale
* [AAE-37713] added unit test with currency icon
* [AAE-37713] provided amount widget config as observable
* [AAE-37713] applied pr comments
* [ACS-10083]: fixes setValue flow; handles initial stream values properly
* [ACS-10083]: migrates to category.id instead of column key for filter key
* [ACS-10083]: refactoring to prevent setting nullish query
* [ACS-10083]: unit tests
* [ACS-10083]: adds method for getting operator by category id
* [ACS-10083]: removes API call trigger from component on initial value set
* [ACS-10083]: adds data for building initial query after page reload
* [ACS-10083]: removes nodes API call if has filter in query
* [ACS-10083]: no need to call submit inside of the comp on initial value
* [ACS-10083]: updated unit tests
* [ACS-10083]: minor fixes and refactorings
* [ACS-10083]: removes redundant types
- Added support for 'pt' locale code in DateFnsUtils.getLocaleFromString()
- Both 'pt' and 'pt-BR' now correctly map to ptBR locale (dd/mm/yyyy format)
- Added comprehensive test coverage for all locale mappings using data-driven tests
- Fixed naming conflict by aliasing Italian locale import
Co-authored-by: Fabian Kindgen <39992669+fkindgen@users.noreply.github.com>
* Fixes WebSocket client re-initialization.
Ensures proper handling of WebSocket client re-initialization by
creating a unique client for each user session and token refresh, and removing the client on logout.
Addresses issues with deployment updates not being received due to
incorrect client handling. This change ensures that the WebSocket
connection is properly re-established when the user logs in again and when tokens are refreshed.
* reverts changes
* Removes HttpClientTestingModule import
Replaces the `HttpClientTestingModule` import with `provideHttpClientTesting`
to align with Angular's updated testing practices.
This change ensures compatibility and avoids potential issues
related to the deprecated module.
Fixes AAE-38919
* revert more changes
* Update lib/process-services-cloud/src/lib/services/web-socket.service.spec.ts
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---------
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Adds the `lastModifiedAt` property to the `ApplicationInstanceModel`.
This allows the UI to display the last modification time of a workspace deployment, addressing the requirement to show when a deployment was last modified.
Fixes AAE-38881
* [ACS-10238] Fix screen reading clear icon for search filter and for searching for user for adding permissions
* [ACS-10238] Fix screen reading remove icon for removing user or group from list to add permissions
* Bonus Content: Remove warnings from console
* Fixes: Prevents display issues during form loading
Ensures the process definition card and start button are not rendered until the form is fully loaded or an error occurs during the loading process.
This prevents flickering and ensures a smoother user experience.
* BONUS content: calm down sonar cube
* Removes unnecessary error handling
Removes the error handler from the `subscribe` block of the `startProcess` method in `StartProcessCloudComponent`.
The error handling was redundant, as errors are already handled by other mechanisms.
This simplifies the code and avoids potential duplicate error handling.
* Uses `test` method for regex checks
Replaces the `exec` method with the `test` method for regular
expression checks to determine if a pattern exists within a string.
This resolves potential issues where the return value of `exec`
(an array or null) was not being properly evaluated as a boolean
condition, leading to incorrect logic execution.
---------
Co-authored-by: Fabian Kindgen <39992669+fkindgen@users.noreply.github.com>
* [AAE-30878] - Migrating from event-emitter to eventemitter3 which is ESM and commonJs compatibile
* [AAE-30878] - Using types to avoid compilation isues with the new ruels
* AAE-30878 - fixed lint issue on js-api
* AAE-30878 - reverted misplaced changes
* [AAE-30882] - migrating from superagent to axios
* AAE-30882 - Fixed unit test for js-api
* AAE-30882 - Fixed unit test for js-api
* AAE-30882 - Fixed unit test for js-api
* AAE-30882 - Improved some unit tests
* [ci:force]
* AAE-30882 - Checking why is ok locally but fails on CI
* AAE-30882 - Start fixing some unit tests - check 1
* AAE-30882 - Start fixing some unit tests - check 2
* [AAE-30882] - rebased
* [AAE-30882] - added missing import
* CSX-73 Date and Select Satori
* CSX-73 Fix process-header unit test
* CSX-73 Fix core unit test
* CSX-73 Fix core unit test
* CSX-73 Fix task-header unit test
* CSX-73 Fix task-header unit test
* CSX-73 Fix task-header unit test
* CSX-73 Fix card-view dateitem
* CSX-73 Fix card-view dateitem
---------
Co-authored-by: Sahana Ghosal <sahana.ghosal@hyland.com>
* AAE-37073 fix error location and make field highlight red if error
* AAE-37073 code review update - revert change from TranslateModule back to TranslatePipe
* Removes showNextTaskCheckbox input
Removes the `showNextTaskCheckbox` input from the `UserTaskCloudComponent` and related files.
The `showNextTaskCheckbox` input is no longer needed, instead the visibility of the 'Open next task' checkbox will depend on the canCompleteTask() method.
This change simplifies the component's API and ensures that the checkbox is always displayed when it should be.
* Adds option to open next task after completion
Introduces a new checkbox on the task screen that, when checked, automatically navigates the user to the next available task upon completion of the current one.
It enhances user experience by streamlining task completion workflows, eliminating the need for manual navigation.
* revert changes
* review
* [ADF-5582] Update NodeCommentsService to take userId as an argument in getUserImage
* [ADF-5582] Add unit tests for avatar caching and retrieval in NodeCommentsService
* Refactor NodeCommentsService unit tests to avoid accessing private members
* [ADF-5582] Remove picture Id from getUserImage
* [ADF-5582] Add comment to getAvatarCache and fix sonarcloud issues
* Update node-comments.service.spec.ts
* Trigger sonar
* [ADF-5582] Add method to return avatar url in people api
* [ADF-5582] Fix sonar cloud issue
* [ADF-5582] Add comment to getUserImage and fix request address for getAvatarImageUrl
* Handles error messages with wrong JSON format
Handles cases where the error message from the backend is not a valid JSON.
If the message is not a valid JSON, it displays the error as a string.
This prevents the application from crashing when receiving error messages with wrong JSON format.
Fixes AAE-36869
* SonarCloud solution
* Displays the error message from the response
The error message is now extracted from the response body,
providing more context when process start fails.
This change ensures that the user sees the specific error
message returned by the service when a process instance
cannot be started, improving the user experience.
* Refactors start process template to use `@if` blocks
Migrates the start process component template from `*ngIf` directives to the new Angular `@if` syntax for improved readability and performance.
This change enhances the structure and efficiency of conditional rendering within the template.
* prettier
* cleanup deprecated AppConfigModule
* migrate factory to initializer
* add provideAppExtensions() api to allow deprecating ExtensionsModule in apps
* fix viewer render import
* use Angular control flow instead of NgIf
* use Angular control flow instead of NgSwitch
* temp checkin to share
* add id attribute
* [AAE-36536] test fix for form.model.ts changes
---------
Co-authored-by: Alex Molodyh <alex.molodyh@hyland.com>
* update api docs and clean dead code
* update api docs and clean dead code
rebasing onto develop branch
* [ACS-8770] fix unit test after auth refactor
* [ACS-8770] fix sonarcube issues
* [ACS-8770] update auth service doc file
* [ACS-8770] clean up demo-shell artifacts
---------
Co-authored-by: Anton Ramanovich <Anton.Ramanovich@hyland.com>
* AAE-36368 fixing labels and form-fields on content-ee and apa
* AAE-36368 removing padding for ACA
* AAE-36368 fixing the PR for ACA issues
* AAE-36368 resolving PR comments removing adf-form-field-input class
* [ACS-9790] Fix Tags and Categories content is missing during editing other panel in metadata sidebar
* [ACS-9790] remove commented code
* [ACS-9790] cr fix
* [ADF-5581] Reset filterValue when navigating to a new folder to ensure filters are cleared
* [ADF-5581] Added unit tests to verify filterValue reset
* [ADF-5581] Add unit tests to verify filter reset on navigation and preservation on sorting
* [ADF-5581] Use SpyObj<ShareDataTableAdapter> in unit test to avoid any type
* [ADF-5581] Remove redundant type on mockData declaration in unit test
* Revert loadFolder() to reload() in onSortingChanged and update unit test accordingly
* [ADF-5580] emit commentAdded event from adf-comments component
* [ADF-5580] Emit commentAdded event from adf-comments and expose it in adf-node-comments
* [ADF-5580] Emit commentAdded event from NodeCommentsComponent, add unit test, and update docs
* [ADF-5580] Add unit test for commentAdded output in NodeCommentsComponent, update docs and create testing utils
* [ADF-5580] Mark debugElement as readOnly
* [ADF-5580] Add mock services and fix unit test setup
* [ADF-5580] Reuse shared comment mocks across multiple test files
* [ADF-5580] Align comments component documentation
* [ADF-5580] Remove redundant setup and use ContentTestingModule in comment components tests
* AAE-35976 adding auto-required instead of manually handling required using asterisks inside mat-form-field elements
* AAE-35976 removing hiderequiredmarker as it'll be handled by the form-fields itself
Resolving merge conflicts with develop
* AAE-35976 fixing units
* AAE-35976 adding isVisible condition with the required field
* AAE-35976 removing the method call from html and using the variable instead for conditions
* AAE-34482 fixing card view datetime component in adf using mat-label
* AAE-34482 fixing the padding for mat-form-field labels
* AAE-34482 resolving the pr review comments
* AAE-34482 changing the floatType from 'auto' to null
* AAE-34482 changing the scss class name as per the review comment
* AAE-34482 fixing the left units
* AAE-34902 updating styles for input controls to maintain the ui consistency with studio-hxp
* AAE-34902 changing class prefix-names from hxp to adf
* AAE-34902 float level conditional on placeholder
* AAE-34902 fixing the placeholder in text-widgets
* AAE-34902 fixing the left and right side margins on workspace forms
* AAE-35882 fixing the double asterix issue on require fields on preview and form-editors and workspace
* AAE-35882 altering one unit as the asterisks are now handled by mat-form-fields
* Adds loading state accessibility
Improves accessibility by adding screen reader support to loading indicators.
This ensures that users with disabilities are informed when the document is loading, improving the overall user experience.
* Trigger Build
* Fixes accessibility issue on loading spinner
Removes the redundant `attr.` prefix from the `aria-labelledby` attribute in the loading spinner.
This resolves an accessibility issue where the spinner's label was not correctly associated, enhancing the user experience for assistive technologies.
* Trigger Build
Improves accessibility by adding screen reader support to loading indicators.
This ensures that users with disabilities are informed when the document is loading, improving the overall user experience.
* Handles null values in number widget
Ensures the number widget correctly handles null, undefined, and empty string values, setting the field value to null in these cases.
This change prevents unexpected behavior when the user clears the input field, ensuring data consistency.
* Adds test for readonly number widget
Adds a test case to verify the behavior of the number widget when it's in readonly mode.
The test checks if the displayValue is correctly set using the decimalNumberPipe when the readOnly property is true.
* Refactors number widget tests
Updates number widget tests to use `overrideComponent` for providing mocked dependencies. This approach ensures proper isolation and avoids potential issues with shared state between tests.
Additionally, it adds a test case to verify the `displayValue` is correctly set using the mocked `DecimalNumberPipe`.
---------
Co-authored-by: Eugenio Romano <eromano@users.noreply.github.com>
* [ACS-9377] Added function for file plans to get file plan roles
* [ACS-9377] Types and documentation
* [ACS-9377] Unit tests
* [ACS-9377] Fixed sonar cloud issue
* AAE-34959 Run security options loader when alfresco-api-v2-loader.serfvice is initialized because on content app the app-config.loader is run after AlfrescoApiLoaderService.init and the callback function that should setDefaultSecurityOption is not executed
* AAE-34959 Provide SecurityOptionsLoaderService in root to fix No Provider error
* AAE-34482 fixing label and alignment issues in forms
* AAE-34482 fixing margin issues
* AAE-34482 adding span inside mat-label
* AAE-34482 fixing units
* AAE-34482 removing unwanted unit
* AAE-34482 fixing unit
* AAE-34482 fixing native element class in unit tests
* [AAE-33907] Adds input for 'Open next task' checkbox
* Adds input for 'Open next task' checkbox
Adds an input to the task screen component to determine whether the "Open next task" checkbox is checked by default.
Also, adds an output that emits an event when the state of the "Open next task" checkbox changes.
* [AAE-33907] added condition for isNextTaskCheckboxChecked
* [AAE-33907] added showNextTaskCheckbox property and moved condition
* Adds next task checkbox functionality.
* Adds support for next task navigation
* Enhances screen cloud component testing
* Makes openNextTask optional for complete task
* removed tests
* Cleans up unnecessary blank lines in spec file
* fixed unit test
* AAE-34885 Form tabs preview frame size and width fix
* AAE-34885 fixing form preview in modeling app
* AAE-34485 workspace-app form scroll fix
* AAE-34485 fixing margin issues on the modeling app form preview
* fixing width issues on preview
---------
Co-authored-by: Eugenio Romano <eromano@users.noreply.github.com>
* Fix the "open next task" checkbox is not showing anymore in the process start section
* Add test
* adjust description of the test
* revert the format changes
* prettier
* rebase changes fix
* prettier
* fix tests
* [AAE-33090] Add optional checkbox for 'open next task' feature
* [AAE-33090] move translation to LABEL property
* [33090] add unit tests
* add tests for checkbox value
* [AAE-33090] remove some comments
* [AAE-33090] update documentation
* AAE-33090 kind of a typo
* AAE-33090 remove all comments
* Add rerun function after first approval is there.
* Adjust pull request with github pr number as var
* Add check label step to check "do not merge" label
* cleanup
* [ACS-5184] show progress spinner on file navigation
* [ACS-5184] show spinner unitl content is ready
* [ACS-5184] unit test fix
* [ACS-5184] cr fix
* [ACS-5184] spelling error fix
* [ACS-9406] Add getContentRenditionTypePreview to process-content service
* [ACS-9406] remove extra space
* [ACS-9406] fix unit tests
* [ACS-9406] fix unit tests
* [ACS-9406] cr fixes
* [AAE-32763] fixed retrieving preferences from local storage
* [AAE-32763] added a test
* [AAE-32763] Reverted to old implementation
* [AAE-32763] renamed test
* [AAE-32763] Be able to use getitems from local storage in the same way as cloud storage
* [AAE-32763] added more tests
@@ -103,8 +103,6 @@ Create a file next to the project's `package.json`, call it `proxy.conf.json` an
Note that if you are running the App, Content Service or Process Service on different ports, you should change the ports accordingly in your local configuration.
For further details about how to configure a webpack proxy please refer to the [official documentation](https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md).
@@ -61,7 +61,6 @@ A few other pages of information are also available:
- [Localization in ADF](user-guide/localization.md)
- [Theming](user-guide/theming.md)
- [Transclusion](user-guide/transclusion.md)
- [Typography](user-guide/typography.md)
- [Walkthrough - adding indicators to highlight information about a node](user-guide/metadata-indicators.md)
<!--guide end-->
@@ -114,7 +113,6 @@ A collection of Angular components for generic use.
| [Json Cell component](core/components/json-cell.component.md) | Shows a JSON-formatted value inside a datatable component. | [Source](../lib/core/src/lib/datatable/components/json-cell/json-cell.component.ts) |
| [Language Menu component](core/components/language-menu.component.md) | Displays all the languages that are present in "app.config.json" and the default (EN). | [Source](../lib/core/src/lib/language-menu/language-menu.component.ts) |
| [Login Dialog Panel component](core/components/login-dialog-panel.component.md) | Shows and manages a login dialog. | [Source](../lib/core/src/lib/login/components/login-dialog-panel.component.ts) |
| [Login Dialog component](core/components/login-dialog.component.md) | Allows a user to perform a login via a dialog. | [Source](../lib/core/src/lib/login/components/login-dialog.component.ts) |
| [Login component](core/components/login.component.md) | Authenticates to Alfresco Content Services and Alfresco Process Services. | [Source](../lib/core/src/lib/login/components/login.component.ts) |
| [Notification History component](core/components/notification-history.component.md)  | This component is in the current status just an experimental component. The main purpose of the Notification history component is list all the notification received in the current session. They will disappear from the list after the refresh. | [Source](../lib/core/src/lib/notifications/components/notification-history.component.ts) | |
| [Pagination Component](core/components/pagination.component.md) | Adds pagination to the component it is used with. | [Source](../lib/core/src/lib/pagination/pagination.component.ts) |
@@ -223,7 +221,6 @@ A collection of Angular components for generic use.
| [Identity user service](core/services/identity-user.service.md) | Gets OAuth2 personal details and roles for users and performs CRUD operations on identity users. | [Source](../lib/process-services-cloud/src/lib/people/services/identity-user.service.ts) |
| [JWT helper service](core/services/jwt-helper.service.md) | Decodes a JSON Web Token (JWT) to a JavaScript object. | [Source](../lib/core/src/lib/auth/services/jwt-helper.service.ts) |
| [Nodes Api service](core/services/nodes-api.service.md) | Accesses and manipulates ACS document nodes using their node IDs. | [Source](../lib/content-services/src/lib/common/services/nodes-api.service.ts) |
| [Notification Service](core/services/notification.service.md) | Shows a notification message with optional feedback. | [Source](../lib/core/src/lib/notifications/services/notification.service.ts) |
| [Page Title service](core/services/page-title.service.md) | Sets the page title. | [Source](../lib/core/src/lib/common/services/page-title.service.ts) |
@@ -473,12 +470,10 @@ for more information about installing and using the source code.
| Name | Description | Source link |
| ---- | ----------- | ----------- |
| [App List Cloud Component](process-services-cloud/components/app-list-cloud.component.md)  | Shows all deployed cloud application instances. | [Source](../lib/process-services-cloud/src/lib/app/components/app-list-cloud.component.ts) |
| [Edit Process Filter Cloud component](process-services-cloud/components/edit-process-filter-cloud.component.md)  | Shows/edits process filter details. | [Source](../lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter/edit-process-filter-cloud.component.ts) |
| [Form cloud custom outcomes component](process-services-cloud/components/form-cloud-custom-outcome.component.md) | Supplies custom outcome buttons to be included in Form cloud component. | [Source](../lib/process-services-cloud/src/lib/form/components/form-cloud-custom-outcomes.component.ts) |
| [Form cloud component](process-services-cloud/components/form-cloud.component.md) | Shows a form from Process Services. | [Source](../lib/process-services-cloud/src/lib/form/components/form-cloud.component.ts) |
| [Form Definition Selector Cloud](process-services-cloud/components/form-definition-selector-cloud.component.md) | Allows one form to be selected from a dropdown list. For forms to be displayed in this component they will need to be compatible with standAlone tasks. | [Source](../lib/process-services-cloud/src/lib/form/components/form-definition-selector-cloud.component.ts) |
This guide for migrating ADF from Angular version 15 to version 16. Follow these steps to ensure a smooth transition.
## 1. Update Nx
First, update the Nx development dependencies. Use the `nx migrate` command for this purpose.
```bash
npx nx migrate 16.10.0
```
Updated Nx dependencies:
```json
{
"nx":"16.10.0",
"@nx/angular":"16.10.0",
"@nx/eslint-plugin":"16.10.0",
"@nx/js":"16.10.0",
"@nx/node":"16.10.0",
"@nx/storybook":"19.6.2",
"@nx/workspace":"16.10.0"
}
```
**As of Nx 16 package scope has changed from `@nrwl/*` to `@nx/*`.**
Nx's migration scripts will replace all `@nrwl` references in the project with `@nx`. This includes any imports, configuration files, and scripts.
## 2. Run Nx migrations
After the initial update a `migrations.json` file will be created containing all the additional changes that need to be made. You can run the migration script to apply these changes.
```bash
npx nx migrate --run-migrations
```
Those migrations should update required packages to the Angular 16 compatible version including Angular itself, Storybook, and others.
```json
{
"@angular/animations":"16.2.9",
"@angular/cdk":"16.2.9",
"@angular/common":"16.2.9",
"@angular/compiler":"16.2.9",
"@angular/core":"16.2.9",
"@angular/forms":"16.2.9",
"@angular/material":"16.2.9",
"@angular/material-date-fns-adapter":"16.2.9",
"@angular/platform-browser":"16.2.9",
"@angular/platform-browser-dynamic":"16.2.9",
"@angular/router":"16.2.9",
"@schematics/angular":"16.2.9",
"ng-packagr":"16.2.3"
}
```
Reference `storybook-migration-summary.md` file for more details on Storybook migration.
## 3. Manually update other dependencies
There are a few dependencies that require manual update, here is the list:
After running the migration script, you may need to manually fix some issues. Run common build targets to identify any problems.
```bash
npx nx run-many --target=build --skip-nx-cache
```
Work through all the problems topic by topic. If blocked by linting issues, disable the linting rules in the affected files. You can re-enable them in the next step.
### Lint jobs
After getting the build to work, run the lint jobs. Re-enable previously disabled linting rules and fix any issues that arise.
```bash
npx nx run-many --target=lint --skip-nx-cache
```
### Unit tests
Despite Angular 16 not introducing major breaking changes, you may still encounter issues with unit tests. Run the unit tests and fix any problems that arise.
- delete `test-old-mocha` job from the project configuration
## 4. Fixing CI/CD issues
### General migration issues
After running the migration script, you may need to manually fix some issues. Run common build targets to identify any problems.
```bash
npx nx run-many --target=build --skip-nx-cache
```
Work through all the problems topic by topic. If blocked by linting issues, disable the linting rules in the affected files. You can re-enable them in the next step.
### Lint jobs
After getting the build to work, run the lint jobs. Re-enable previously disabled linting rules and fix any issues that arise.
```bash
npx nx run-many --target=lint --skip-nx-cache
```
### Unit tests
Despite Angular 16 not introducing major breaking changes, you may still encounter issues with unit tests. Run the unit tests and fix any problems that arise.
This guide describes how to migrate ADF from Angular version 17 to version 18. Follow these steps to ensure a smooth transition.
## 1. Update changed dependencies
Update the following packages in your `package.json`:
### dependencies
```json
{
"@angular/animations":"18.2.13",
"@angular/cdk":"18.2.14",
"@angular/common":"18.2.13",
"@angular/compiler":"18.2.13",
"@angular/core":"18.2.13",
"@angular/forms":"18.2.13",
"@angular/material":"18.2.14",
"@angular/material-date-fns-adapter":"18.2.14",
"@angular/platform-browser":"18.2.13",
"@angular/platform-browser-dynamic":"18.2.13",
"@angular/router":"18.2.13",
"@apollo/client":"3.13.1",
"@mat-datetimepicker/core":"14.0.0",
"apollo-angular":"10.0.3",
"minimatch-browser":"1.0.0",
"node-fetch":"^3.3.2",
"zone.js":"0.14.10"
}
```
### devDependencies
```json
{
"@angular-devkit/architect":"0.1802.13",
"@angular-devkit/build-angular":"18.2.14",
"@angular-devkit/core":"18.2.13",
"@angular-devkit/schematics":"18.2.13",
"@angular/compiler-cli":"18.2.13",
"@nx/angular":"19.2.0",
"@nx/js":"18.3.5",
"@nx/workspace":"18.3.5",
"@storybook/angular":"8.4.7",
"ng-packagr":"18.2.1",
"npm-run-all":"^4.1.5",
"postcss":"8.4.41",
"postcss-sass":"^0.5.0",
"tsconfig-paths":"^4.1.1",
"typescript":"5.5.4",
"webpack-cli":"^5.1.4"
}
```
## 2. Material mixins update
Angular Material 18 introduced Material 3 mixins as new default. As we are still using Material 2, we need to ensure that we are still using the Material 2 version.
In order to use Material 2 mixins, you need to add a `m2-` prefix to the mixins in your stylesheets. For example:
```scss
mat.define-typography-config()
mat.get-color-from-palette()
```
should be changed to:
```scss
mat.m2-define-typography-config()
mat.m2-get-color-from-palette()
```
## 3. Fixing CI/CD issues
After running the migration script, you may need to manually fix some issues. Run common build targets to identify any problems.
```bash
npx nx run-many --target=build --skip-nx-cache
```
If blocked by linting issues, disable the linting rules in the affected files. You can re-enable them in the next step.
### Lint jobs
After getting the build to work, run the lint jobs. Re-enable previously disabled linting rules and fix any issues that arise.
```bash
npx nx run-many --target=lint --skip-nx-cache
```
### Unit tests
Run the unit tests and fix any problems that arise.
```bash
npx nx run-many --target=test --skip-nx-cache
```
## 4. Review Angular 18 breaking changes
Angular 18 is a minor update with no major breaking changes for most projects. However, always review the [Angular 18 changelog](https://github.com/angular/angular/blob/main/CHANGELOG.md) and [official update guide](https://angular.dev/update-guide?v=17.0-18.0).
@@ -20,7 +20,7 @@ Adds and retrieves comments for nodes in Content Services.
Gets all comments that have been added to a task.
-_id:_`string` - ID of the target task
-**Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`CommentModel`](../../../lib/core/src/lib/models/comment.model.ts)`[]>` - Details for each comment
@@ -23,10 +23,10 @@ Manages tags in Content Services.
-_nodeId:_`string` - Id of node to which tags should be assigned.
-_tags:_`TagBody[]` - List of tags to create and assign or just assign if they already exist.
-**Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`TagPaging`](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/TagPaging.md)`|`[`TagEntry`](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/TagEntry.md)`>` - Just linked tags to node or single tag if linked only one tag.
-**Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`TagEntry`](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/TagEntry.md)`[]>` - Created tags.
-**Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`TagEntry`](../../../lib/js-api/src/api/content-rest-api/docs/TagsApi.md#TagEntry) `|` [`TagPaging`](../../../lib/js-api/src/api/content-rest-api/docs/TagsApi.md#TagPaging)`>` - Created tags.
# [Login Dialog component](../../../lib/core/src/lib/login/components/login-dialog.component.ts "Defined in login-dialog.component.ts")
Allows a user to perform a login via a dialog.
## Details
The [Login Dialog component](login-dialog.component.md) allows you to perform a login via a dialog.
### Showing the dialog
Unlike most components, the [Login Dialog Component](login-dialog.component.md) is typically shown in a dialog box
rather than the main page and you are responsible for opening the dialog yourself. You can use the
[Angular Material Dialog](https://material.angular.io/components/dialog/overview) for this,
as shown in the usage example. ADF provides the [`LoginDialogComponentData`](../../../lib/core/src/lib/login/components/login-dialog-component-data.interface.ts) interface
//action called when an action or cancel is clicked on the dialog
this.dialog.closeAll();
});
}
```
All the results will be streamed to the logged [subject](http://reactivex.io/rxjs/manual/overview.html#subject) present in the [`LoginDialogComponentData`](../../../lib/core/src/lib/login/components/login-dialog-component-data.interface.ts) object passed to the dialog.
When the dialog action is selected by clicking, the `data.logged` stream will be completed.
@@ -64,6 +64,7 @@ Using with file [`Blob`](https://developer.mozilla.org/en-US/docs/Web/API/Blob):
| urlFile | `string` | "" | If you want to load an external file that does not come from ACS you can use this URL to specify where to load the file from. |
| viewerTemplateExtensions | [`TemplateRef`](https://angular.io/api/core/TemplateRef)`<any>` | null | Template containing ViewerExtensionDirective instances providing different viewer extensions based on supported file extension. |
| nodeId | `string` | null | Identifier of a node opened by a viewer. |
| customError | `string` | undefined | Custom error message to be displayed in the viewer. |
### Events
@@ -205,22 +206,24 @@ The Viewer supports dynamically-loaded viewer preview extensions, to know more a
#### Code extension mechanism
You can define your own custom handler to override supported file formats or handle other file formats that are not yet supported by
the [Viewer render component](viewer.component.md). In order to do that first you need to define a template containing at least one `adf-viewer-extension`:
the [Viewer render component](viewer.component.md). In order to do that first you need to define a template containing at least one `adf-viewer-extension`. `contentLoaded` should be an `EventEmitter` that will emit as soon as the component responsible for rendering finishes.
| overlayMode | `boolean` | false | If`true` then show the Viewer as a full page over the current content. Otherwise fit inside the parent div. |
| readOnly | `boolean` | true | Enable when where is possible the editing functionalities |
| allowedEditActions | `{ [key: string]: boolean }` | `{ rotate: true, crop: true }` | Controls which editing actions are enabled when not in read-only mode. Allows granular control over actions like rotation and cropping. |
| showLeftSidebar | `boolean` | false | Toggles left sidebar visibility. Requires `allowLeftSidebar` to be set to `true`. |
| showRightSidebar | `boolean` | false | Toggles right sidebar visibility. Requires `allowRightSidebar` to be set to `true`. |
| showToolbar | `boolean` | true | Hide or show the toolbar |
| showViewer | `boolean` | true | Hide or show the viewer |
| sidebarLeftTemplate | [`TemplateRef`](https://angular.io/api/core/TemplateRef)`<any>` | null | The template for the left sidebar. The template context contains the loaded node data. |
| sidebarLeftTemplateContext | | null | Context object available for binding by the local sidebarLeftTemplate with let declarations. |
| sidebarRightTemplate | [`TemplateRef`](https://angular.io/api/core/TemplateRef)`<any>` | null | The template for the right sidebar. The template context contains the loaded node data. |
| sidebarRightTemplateContext | | null | Context object available for binding by the local sidebarRightTemplate with let declarations. |
| tracks | [`Track`](../../../lib/core/src/lib/viewer/models/viewer.model.ts)`[]` | \[] | media subtitles for the media player |
| urlFile | `string` | "" | If you want to load an external file that does not come from ACS you can use this URL to specify where to load the file from. |
| viewerExtensions | [`TemplateRef`](https://angular.io/api/core/TemplateRef)`<any>` | null | Template containing ViewerExtensionDirective instances providing different viewer extensions based on supported file extension. |
| nodeId | `string` | null | Identifier of a node opened by a viewer. |
| nodeMimeType | `string` | undefined | Original node mime type, should be provided when renditiona mime type is different. |
| overlayMode | `boolean` | false | If `true` then show the Viewer as a full page over the current content. Otherwise fit inside the parent div. |
| readOnly | `boolean` | true | Enable when where is possible the editing functionalities |
| allowedEditActions | `{ [key: string]: boolean }` | `{ rotate: true, crop: true }` | Controls which editing actions are enabled when not in read-only mode. Allows granular control over actions like rotation and cropping. |
| showLeftSidebar | `boolean` | false | Toggles left sidebar visibility. Requires `allowLeftSidebar` to be set to `true`. |
| showRightSidebar | `boolean` | false | Toggles right sidebar visibility. Requires `allowRightSidebar` to be set to `true`. |
| showToolbar | `boolean` | true | Hide or show the toolbar |
| showViewer | `boolean` | true | Hide or show the viewer |
| sidebarLeftTemplate | [`TemplateRef`](https://angular.io/api/core/TemplateRef)`<any>` | null | The template for the left sidebar. The template context contains the loaded node data. |
| sidebarLeftTemplateContext | | null | Context object available for binding by the local sidebarLeftTemplate with let declarations. |
| sidebarRightTemplate | [`TemplateRef`](https://angular.io/api/core/TemplateRef)`<any>` | null | The template for the right sidebar. The template context contains the loaded node data. |
| sidebarRightTemplateContext | | null | Context object available for binding by the local sidebarRightTemplate with let declarations. |
| tracks | [`Track`](../../../lib/core/src/lib/viewer/models/viewer.model.ts)`[]` | \[] | media subtitles for the media player |
| urlFile | `string` | "" | If you want to load an external file that does not come from ACS you can use this URL to specify where to load the file from. |
| viewerExtensions | [`TemplateRef`](https://angular.io/api/core/TemplateRef)`<any>` | null | Template containing ViewerExtensionDirective instances providing different viewer extensions based on supported file extension. |
| nodeId | `string` | null | Identifier of a node opened by a viewer. |
| nodeMimeType | `string` | undefined | Original node mime type, should be provided when renditiona mime type is different. |
| customError | `string` | undefined | Custom error message to be displayed in the viewer. |
### Events
@@ -185,10 +187,9 @@ npm install pdfjs-dist
```ts
// PDF.js
require('pdfjs-dist/web/compatibility.js');
constpdfjsLib=require('pdfjs-dist');
pdfjsLib.PDFJS.workerSrc='./pdf.worker.js';
require('pdfjs-dist/web/pdf_viewer.js');
pdfjsLib.PDFJS.workerSrc='./pdf.worker.min.mjs';
require('pdfjs-dist/web/pdf_viewer.mjs');
```
- Update the `plugins` section of the `webpack.common.js` file with the following lines:
Gets information about the user currently logged into APS.
-**Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`UserRepresentation`](https://github.com/Alfresco/alfresco-js-api/blob/develop/src/api/activiti-rest-api/docs/UserRepresentation.md)`>` - User information
-**getBpmUsername**(): `string`<br/>
Gets the BPM username
-**Returns**`string` - The BPM username
-**getEcmUsername**(): `string`<br/>
Gets the ECM username.
-**Returns**`string` - The ECM username
-**getRedirect**(): `string`<br/>
Gets the URL to redirect to after login.
-**Returns**`string` - The redirect URL
-**getTicketBpm**(): `string|null`<br/>
Gets the BPM ticket stored in the Storage.
-**Returns**`string|null` - The ticket or `null` if none was found
-**getTicketEcm**(): `string|null`<br/>
Gets the ECM ticket stored in the Storage.
-**Returns**`string|null` - The ticket or `null` if none was found
-**getTicketEcmBase64**(): `string|null`<br/>
Gets the BPM ticket from the Storage in Base 64 format.
-**Returns**`string|null` - The ticket or `null` if none was found
-_rememberMe:_`boolean` - Stores the user's login details if true
-**Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<Function>` - Object with auth type ("ECM", "BPM" or "ALL") and auth ticket
-_rememberMe:_`boolean` - (Optional) Stores the user's login details if true
-**Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<{ type: string; ticket: any }>` - An Observable that emits an object containing the authentication type (`type`) and the authentication ticket (`ticket`) upon successful login.
-**logout**(): [`Observable`](http://reactivex.io/documentation/observable.html)`<any>`<br/> Logs the user out.
-**Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<any>` - Response event called when logout is complete
-_url:_ [`RedirectionModel`](../../../lib/core/src/lib/auth/models/redirection.model.ts) - (Optional) URL to redirect to
-**ssoImplicitLogin**()<br/>
Logs the user in with SSO
-**reset**(): `void`<br/>Resets the authentication state of the service.
-**on**(event: `string`, listener: `Function`): `void`<br/> Adds an event listener for the specified event.
-**off**(event: `string`, listener?: `Function`): `void`<br/> Removes an event listener for the specified event.
-**once**(event: `string`, listener: `Function`): `void`<br/> Adds a one-time event listener for the specified event.
-**emit**(event: `string`, ...args: `any[]`): `void`<br/> Emits an event with optional arguments.
-**onLogin**: [`Subject`](https://reactivex.io/documentation/subject)`<any>`<br/> Emitted when the user logs in successfully.
-**onLogout**: [`Subject`](https://reactivex.io/documentation/subject)`<any>`<br/> Emitted when the user logs out.
-**onTokenReceived**: [`Subject`](https://reactivex.io/documentation/subject)`<any>`<br/> Emitted when an authentication token is received.
-**onError**: [`Observable`](http://reactivex.io/documentation/observable.html)`<any>`<br/> An Observable that emits an error object when an authentication-related error occurs.
@@ -40,6 +40,10 @@ Manipulates content related to a Process Instance or Task Instance in APS.
Gets the thumbnail for a related content file.
-_contentId:_`number` - ID of the related content
-**Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`Blob`](https://developer.mozilla.org/en-US/docs/Web/API/Blob)`>` - Binary data of the thumbnail image
Gets the preview rendition for a related content file.
-_contentId:_`number` - ID of the related content
-**Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`Blob`](https://developer.mozilla.org/en-US/docs/Web/API/Blob)`>` - Binary data of the related content
@@ -111,6 +111,7 @@ The template defined inside `empty-form` will be shown when no form definition i
| formSaved | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`FormModel`](../../../lib/core/src/lib/form/components/widgets/core/form.model.ts)`>` | Emitted when the form is submitted with the `Save` or custom outcomes. |
| displayModeOn | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`FormCloudDisplayModeConfiguration`](../../../lib/process-services-cloud/src/lib/services/form-fields.interfaces.ts)`>` | Emitted when a display mode configuration is turned on. |
| displayModeOff | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`FormCloudDisplayModeConfiguration`](../../../lib/process-services-cloud/src/lib/services/form-fields.interfaces.ts)`>` | Emitted when a display mode configuration is turned off. |
| nextTaskCheckboxCheckedChanged | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`MatCheckboxChange`](https://material.angular.io/components/checkbox/api#MatCheckboxChange)`>` | Emitted when the `Open next task` checkbox was toggled. |
# [Form Definition Selector Cloud](../../../lib/process-services-cloud/src/lib/form/components/form-definition-selector-cloud.component.ts "Defined in form-definition-selector-cloud.component.ts")
Allows one form to be selected from a dropdown list. For forms to be displayed in this component they will need to be compatible with standAlone tasks.
## Basic Usage
```html
<adf-cloud-form-definition-selector
[appName]="'simple-app'"
(selectForm)="onFormSelect($event)">
</adf-cloud-form-definition-selector>
```
## Class members
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| appName | `string` | "" | Name of the application. If specified, this shows the users who have access to the app. |
### Events
| Name | Type | Description |
| ---- | ---- | ----------- |
| selectForm | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<string>` | Emitted when a form is selected. |
| cancelClick | `EventEmitter<string>` | Emitted when the cancel button is clicked. |
| error | `EventEmitter<any>` | Emitted when any error occurs. |
| executeOutcome | `EventEmitter<FormOutcomeEvent>` | Emitted when any outcome is executed. Default behaviour can be prevented via `event.preventDefault()`. |
| formCompleted | `EventEmitter<FormModel>` | Emitted when the form is submitted with the `Complete` outcome. |
| formContentClicked | `EventEmitter<ContentLinkModel>` | Emitted when form content is clicked. |
| formSaved | `EventEmitter<FormModel>` | Emitted when the form is saved. |
| onTaskLoaded | `EventEmitter<TaskDetailsCloudModel>` | Emitted when a task is loaded. |
| taskClaimed | `EventEmitter<string>` | Emitted when the task is claimed. |
| taskCompleted | `EventEmitter<string>` | Emitted when the task is completed. |
| taskUnclaimed | `EventEmitter<string>` | Emitted when the task is unclaimed. |
| displayModeOn | `EventEmitter<FormCloudDisplayModeConfiguration>` | Emitted when a display mode configuration is turned on. |
| displayModeOff | `EventEmitter<FormCloudDisplayModeConfiguration>` | Emitted when a display mode configuration is turned off. |
| cancelClick | `EventEmitter<string>` | Emitted when the cancel button is clicked. |
| error | `EventEmitter<any>` | Emitted when any error occurs. |
| executeOutcome | `EventEmitter<FormOutcomeEvent>` | Emitted when any outcome is executed. Default behaviour can be prevented via `event.preventDefault()`. |
| formCompleted | `EventEmitter<FormModel>` | Emitted when the form is submitted with the `Complete` outcome. |
| formContentClicked | `EventEmitter<ContentLinkModel>` | Emitted when form content is clicked. |
| formSaved | `EventEmitter<FormModel>` | Emitted when the form is saved. |
| onTaskLoaded | `EventEmitter<TaskDetailsCloudModel>` | Emitted when a task is loaded. |
| taskClaimed | `EventEmitter<string>` | Emitted when the task is claimed. |
| taskCompleted | `EventEmitter<string>` | Emitted when the task is completed. |
| taskUnclaimed | `EventEmitter<string>` | Emitted when the task is unclaimed. |
| displayModeOn | `EventEmitter<FormCloudDisplayModeConfiguration>` | Emitted when a display mode configuration is turned on. |
| displayModeOff | `EventEmitter<FormCloudDisplayModeConfiguration>` | Emitted when a display mode configuration is turned off. |
#### Enabling fullscreen display for the form of the task
| cancelClick | `EventEmitter<string>` | Emitted when the cancel button is clicked. |
| error | `EventEmitter<any>` | Emitted when any error occurs. |
| executeOutcome | `EventEmitter<FormOutcomeEvent>` | Emitted when any outcome is executed. Default behaviour can be prevented via `event.preventDefault()`. |
| formContentClicked | `EventEmitter<ContentLinkModel>` | Emitted when form content is clicked. |
| formSaved | `EventEmitter<FormModel>` | Emitted when the form is saved. |
| onTaskLoaded | `EventEmitter<TaskDetailsCloudModel>` | Emitted when a task is loaded. |
| taskClaimed | `EventEmitter<string>` | Emitted when the task is claimed. |
| taskCompleted | `EventEmitter<string>`| Emitted when the task is completed. |
| taskUnclaimed | `EventEmitter<string>`| Emitted when the task is unclaimed. |
| cancelClick | `EventEmitter<string>` | Emitted when the cancel button is clicked. |
| error | `EventEmitter<any>` | Emitted when any error occurs. |
| executeOutcome | `EventEmitter<FormOutcomeEvent>` | Emitted when any outcome is executed. Default behaviour can be prevented via `event.preventDefault()`. |
| formContentClicked | `EventEmitter<ContentLinkModel>` | Emitted when form content is clicked. |
| formSaved | `EventEmitter<FormModel>` | Emitted when the form is saved. |
| nextTaskCheckboxCheckedChanged | `EventEmitter<MatCheckboxChange>` | Emitted when the `Open next task` checkbox was toggled. |
| onTaskLoaded | `EventEmitter<TaskDetailsCloudModel>` | Emitted when a task is loaded. |
| taskClaimed | `EventEmitter<string>` | Emitted when the task is claimed. |
| taskCompleted | `EventEmitter<string>` | Emitted when the task is completed. |
| taskUnclaimed | `EventEmitter<string>` | Emitted when the task is unclaimed. |
#### Enabling fullscreen display for the form of the task
Title:Changelog for alfresco-ng2-components v7.0.1
---
# Changelog
- [051b82684f](https://github.com/Alfresco/alfresco-ng2-components/commit/051b82684f) AAE-34959 Allow disabling withCredentials for the identity providers that disallow credentials (#10859)
Title:Changelog for alfresco-ng2-components v8.0.0
---
# Changelog
- [7aa07ef525](https://github.com/Alfresco/alfresco-ng2-components/commit/7aa07ef525) AAE-36614 new provideShell api (#11006)
- [2ebee4c024](https://github.com/Alfresco/alfresco-ng2-components/commit/2ebee4c024) AAE-36615 new provideI18N api (#11007)
- [b563e283c1](https://github.com/Alfresco/alfresco-ng2-components/commit/b563e283c1) [ACS-9789] Multiple styles issues for metadata sidebar (#11015)
- [f1bdbf63b0](https://github.com/Alfresco/alfresco-ng2-components/commit/f1bdbf63b0) AAE-36368 Fixing labels and form-fields on content-ee and apa (#10982)
- [0651dc25d5](https://github.com/Alfresco/alfresco-ng2-components/commit/0651dc25d5) [ACS-9790] Fix Tags and Categories content is missing during editing other panel (#11004)
- [ec145fb73c](https://github.com/Alfresco/alfresco-ng2-components/commit/ec145fb73c) [ADF-5583] Update style to make version visible outside dialog (#11005)
- [450a4a0a49](https://github.com/Alfresco/alfresco-ng2-components/commit/450a4a0a49) [ACS-9789] Multiple styles issues for metadata sidebar (#11002)
- [11cb2ea688](https://github.com/Alfresco/alfresco-ng2-components/commit/11cb2ea688) AAE-36484 improved standalone support for Core (#10998)
- [6a3623bd76](https://github.com/Alfresco/alfresco-ng2-components/commit/6a3623bd76) AAE-35676 Cleanup Open Next Task (#10952)
- [5438eef9db](https://github.com/Alfresco/alfresco-ng2-components/commit/5438eef9db) AAE-36260 global test setup (#10970)
- [e96f5b3c48](https://github.com/Alfresco/alfresco-ng2-components/commit/e96f5b3c48) [AAE-36397] ADF viewer image is no longer cropped (#10996)
- [9bed60befc](https://github.com/Alfresco/alfresco-ng2-components/commit/9bed60befc) AAE-30842 Fix rendering small devices again (#10986)
- [c863da0c5d](https://github.com/Alfresco/alfresco-ng2-components/commit/c863da0c5d) [MNT-24459] Aspect list get all aspects when not all were fetched by first call (#10980)
- [c7f28d54d6](https://github.com/Alfresco/alfresco-ng2-components/commit/c7f28d54d6) [ADF-5581] Reset filterValue when navigating to a new folder to ensur… (#10978)
- [d776c7c77d](https://github.com/Alfresco/alfresco-ng2-components/commit/d776c7c77d) AAE-35310 Displaying different text fields on an eform doesn't align vertically or horizontally (#10979)
- [6dafcb4447](https://github.com/Alfresco/alfresco-ng2-components/commit/6dafcb4447) [ADF-5580] emit commentAdded event from adf-comments component (#10966)
- [5d043e6987](https://github.com/Alfresco/alfresco-ng2-components/commit/5d043e6987) [PRODSEC-10305] Bump @nx/webpack & webpack-dev-server (#10976)
- [57713dbe6e](https://github.com/Alfresco/alfresco-ng2-components/commit/57713dbe6e) [MNT-25175] configured scripts to execute are listed by node id and not by script name (#10969)
- [8b3b6ffbca](https://github.com/Alfresco/alfresco-ng2-components/commit/8b3b6ffbca) AAE-36173 switch to TranslatePipe (#10968)
- [16f42be08e](https://github.com/Alfresco/alfresco-ng2-components/commit/16f42be08e) AAE-35976 Adding auto required instead of manually handling styles manually (#10956)
- [dcab68d78a](https://github.com/Alfresco/alfresco-ng2-components/commit/dcab68d78a) AAE-35632 Priority filter unit tests (#10965)
- [f40107de33](https://github.com/Alfresco/alfresco-ng2-components/commit/f40107de33) AAE-34482 Modelling inconsistencies in mat form fields label alignments ii (#10929)
- [c16417cbff](https://github.com/Alfresco/alfresco-ng2-components/commit/c16417cbff) [ACS-9250] Adjust viewer to display properly under parent without overlay mode (#10950)
- [27502d5d67](https://github.com/Alfresco/alfresco-ng2-components/commit/27502d5d67) AAE-34902 Updating styles for input controls to maintain the ui consistency with studio hxp (#10900)
- [a4072aca74](https://github.com/Alfresco/alfresco-ng2-components/commit/a4072aca74) AAE-35694 Update section-start-form with Sections in Row (#10947)
- [22b62804d5](https://github.com/Alfresco/alfresco-ng2-components/commit/22b62804d5) AAE-35882 Studio modelling forms required dropdown has double asterisk (#10948)
- [eda59a1de8](https://github.com/Alfresco/alfresco-ng2-components/commit/eda59a1de8) [ACS-8746] yellow warning color (#10883)
- [cdc7553915](https://github.com/Alfresco/alfresco-ng2-components/commit/cdc7553915) [MNT-24923] legal hold hold capabilities are not verified properly (#10930)
- [2c4764f89e](https://github.com/Alfresco/alfresco-ng2-components/commit/2c4764f89e) Adds loading state accessibility (#10926)
- [e2693f9304](https://github.com/Alfresco/alfresco-ng2-components/commit/e2693f9304) AAE-35668 Sending empty string instead of null after clearing value from numeric field (#10925)
- [5d9acaec0d](https://github.com/Alfresco/alfresco-ng2-components/commit/5d9acaec0d) [AAE-35649] Viewer renderer wait until subsequent renderers will finish (#10924)
- [0c147513cc](https://github.com/Alfresco/alfresco-ng2-components/commit/0c147513cc) AAE-35521 Refactor AuthenticationService unit tests (#10922)
- [920b7d3585](https://github.com/Alfresco/alfresco-ng2-components/commit/920b7d3585) AAE-34641 Fix ViewerRenderComponent hanging when in a mat-tab (#10913)
- [a6ab5fcbdd](https://github.com/Alfresco/alfresco-ng2-components/commit/a6ab5fcbdd) [ACS-9696] fix failing upgrade rxjs from 7.8.1 to 7.8.2 (#10911)
- [35970b4278](https://github.com/Alfresco/alfresco-ng2-components/commit/35970b4278) AAE-21284 Add migration guide for Angular 17 to 18 (#10910)
- [379fbbb508](https://github.com/Alfresco/alfresco-ng2-components/commit/379fbbb508) [MNT-25043] Skip adding json as content type for FormData body requests (#10903)
- [cdb65bf204](https://github.com/Alfresco/alfresco-ng2-components/commit/cdb65bf204) [ACS-9377] remove the join button for records management library for user s without permissions for that library (#10901)
- [8cb7a1719f](https://github.com/Alfresco/alfresco-ng2-components/commit/8cb7a1719f) AAE-34656 Hide all counters in Workspace which do not provide value (#10896)
- [1971980216](https://github.com/Alfresco/alfresco-ng2-components/commit/1971980216) [ACS-9619] Issues with trimming file's name in viewer (#10858)
- [467a19f3ec](https://github.com/Alfresco/alfresco-ng2-components/commit/467a19f3ec) AAE-34959 Fix withCredentials can not be set by app.config.json (#10897)
- [79163cbae0](https://github.com/Alfresco/alfresco-ng2-components/commit/79163cbae0) AAE-34482 Fixing label and alignment issues in forms (#10898)
- [06921783bf](https://github.com/Alfresco/alfresco-ng2-components/commit/06921783bf) AAE-33907 Adds input for 'Open next task' checkbox (#10823)
- [1462560e6e](https://github.com/Alfresco/alfresco-ng2-components/commit/1462560e6e) AAE-35057 Change position of adf-cloud-form-content-card-fullscreen to relative (#10888)
- [f2fa458fe5](https://github.com/Alfresco/alfresco-ng2-components/commit/f2fa458fe5) AAE-33909 Ensure onProcessFinish event triggers when invoked from onFormLoaded event (#10867)
- [e37ef279e4](https://github.com/Alfresco/alfresco-ng2-components/commit/e37ef279e4) AAE-32986 Add custom-form-widget process to simpleapp (#10881)
- [2cc3ba4d6b](https://github.com/Alfresco/alfresco-ng2-components/commit/2cc3ba4d6b) [ACS-7706] create tags return promise tag paging instead of tag entry (#10869)
- [3fea334468](https://github.com/Alfresco/alfresco-ng2-components/commit/3fea334468) [AAE-34479] added class for custom outcome button (#10882)
- [b3900b96ed](https://github.com/Alfresco/alfresco-ng2-components/commit/b3900b96ed) AAE-34972 Test PR for adf link (#10861)
- [2fd960bf5c](https://github.com/Alfresco/alfresco-ng2-components/commit/2fd960bf5c) AAE-34885 Form with tabs has incomplete frame in preview (#10880)
- [fe53c5d5a8](https://github.com/Alfresco/alfresco-ng2-components/commit/fe53c5d5a8) MNT-25095 Update the documentation (#10864)
- [051b82684f](https://github.com/Alfresco/alfresco-ng2-components/commit/051b82684f) AAE-34959 Allow disabling withCredentials for the identity providers that disallow credentials (#10859)
- [28137d8a09](https://github.com/Alfresco/alfresco-ng2-components/commit/28137d8a09) Revert "AAE-34641 Fix form loading when tab is changed (#10843)" (#10862)
- [58a5732043](https://github.com/Alfresco/alfresco-ng2-components/commit/58a5732043) AAE-34888 fixing padding issues in form widgets (#10853)
- [685bc387b5](https://github.com/Alfresco/alfresco-ng2-components/commit/685bc387b5) AAE-34641 Fix form loading when tab is changed (#10843)
- [f0c90594ca](https://github.com/Alfresco/alfresco-ng2-components/commit/f0c90594ca) AAE-34731 Hide the open next task checkbox for the Start Process view (#10842)
- [f2845a36c6](https://github.com/Alfresco/alfresco-ng2-components/commit/f2845a36c6) [AAE-29434] Adding process with process variables to simpleapp (#10845)
- [acf9e3e11c](https://github.com/Alfresco/alfresco-ng2-components/commit/acf9e3e11c) Improvement/aae 30909 enhance user experience with tab navigation within the form (#10844)
- [adeb82c137](https://github.com/Alfresco/alfresco-ng2-components/commit/adeb82c137) AAE-34335 fix for styling discrepancies in form-widgets (#10841)
- [48defa2b5f](https://github.com/Alfresco/alfresco-ng2-components/commit/48defa2b5f) AAE-34594 Remove redundant scroll bar from form renderer (#10840)
- [9ee0e5ee3e](https://github.com/Alfresco/alfresco-ng2-components/commit/9ee0e5ee3e) AAE-19688 Persist feature flag overrides in session storage (#10832)
- [0f1200b5a2](https://github.com/Alfresco/alfresco-ng2-components/commit/0f1200b5a2) AAE-34514 Disable next task checkbox for forms (#10824)
- [f34bbf59be](https://github.com/Alfresco/alfresco-ng2-components/commit/f34bbf59be) AAE-33589 Get task variables when preferences are updated (#10813)
- [d6317a7b87](https://github.com/Alfresco/alfresco-ng2-components/commit/d6317a7b87) [ACS-9227] Fixed interactive controls must not be nested issue in datatable.component.html (#10681)
- [d829d8eefb](https://github.com/Alfresco/alfresco-ng2-components/commit/d829d8eefb) AAE-34390 Clean old theming files (#10800)
- [4cfda763b6](https://github.com/Alfresco/alfresco-ng2-components/commit/4cfda763b6) Simulate a change to upstream adf (#10814)
- [ff0885c265](https://github.com/Alfresco/alfresco-ng2-components/commit/ff0885c265) AAE-34328 Remove additional space in amount widget currency (#10812)
- [068bcc89d3](https://github.com/Alfresco/alfresco-ng2-components/commit/068bcc89d3) Create a git tag for every release (#10811)
- [fdd4f6c081](https://github.com/Alfresco/alfresco-ng2-components/commit/fdd4f6c081) AAE-22975 update to the latest version of pdfjs-dist library (#10780)
- [0dc45e95af](https://github.com/Alfresco/alfresco-ng2-components/commit/0dc45e95af) [MNT-24715] App with APS does not show display value of dynamic table (#10799)
- [1f73f7fe40](https://github.com/Alfresco/alfresco-ng2-components/commit/1f73f7fe40) AAE-33955 Add placeholder for data table widget (preview) (#10796)
- [6fb9474d46](https://github.com/Alfresco/alfresco-ng2-components/commit/6fb9474d46) [ACS-9552] Add obsolete task list filters migration (#10798)
- [014fb9cfa8](https://github.com/Alfresco/alfresco-ng2-components/commit/014fb9cfa8) AAE-34100 Add group-with-sections process to simpleapp (#10791)
- [a426338f94](https://github.com/Alfresco/alfresco-ng2-components/commit/a426338f94) [MNT-24950] Fix process file preview button state (#10790)
- [c8f9bd21ea](https://github.com/Alfresco/alfresco-ng2-components/commit/c8f9bd21ea) [ACS-9454] Create upgrade guide for ADF 7.0.0 (#10779)
- [8eef4e6eec](https://github.com/Alfresco/alfresco-ng2-components/commit/8eef4e6eec) [ACS-9440] Language in lang attribute is not changed after changing language (#10776)
- [cd63f67e0a](https://github.com/Alfresco/alfresco-ng2-components/commit/cd63f67e0a) [ACS-5184] Show progress spinner on file navigation (#10596)
- [2d21340947](https://github.com/Alfresco/alfresco-ng2-components/commit/2d21340947) [AAE-33096] added rootProcessInstanceId to dynamic component (#10762)
- [8e0ea373f0](https://github.com/Alfresco/alfresco-ng2-components/commit/8e0ea373f0) [ACS-9406] Add getContentRenditionTypePreview to process-content service (#10743)
- [555e6c027f](https://github.com/Alfresco/alfresco-ng2-components/commit/555e6c027f) AAE-33025 Updated process definition type to support constant values (#10751)
- [142c6ae754](https://github.com/Alfresco/alfresco-ng2-components/commit/142c6ae754) AAE-33340 Async Form Enrichment - Spinner doesnt hide on process completion (#10749)
- [abaf7df9c6](https://github.com/Alfresco/alfresco-ng2-components/commit/abaf7df9c6) AAE-33007 Display empty data table without error (#10744)
- [9bbbc8193d](https://github.com/Alfresco/alfresco-ng2-components/commit/9bbbc8193d) AAE-33137 Asynchronous Form Enrichment does Not Populate Date Fields (#10746)
- [6703b8b7da](https://github.com/Alfresco/alfresco-ng2-components/commit/6703b8b7da) AAE-32763 Custom column visibility is not persistent after refresh (#10728)
- [083755b41a](https://github.com/Alfresco/alfresco-ng2-components/commit/083755b41a) [ACS-5190] document name text alignement and long name trim issue (#10715)
- [015ce8a99e](https://github.com/Alfresco/alfresco-ng2-components/commit/015ce8a99e) [ACS-9375] Transparent background for hovered spinner (#10691)
- [b643054a15](https://github.com/Alfresco/alfresco-ng2-components/commit/b643054a15) AAE-32999 Removed subscriptions-transport-ws feature flag (#10727)
Title:Changelog for alfresco-ng2-components v8.1.0
---
# Changelog
- [2e20c3da45](https://github.com/Alfresco/alfresco-ng2-components/commit/2e20c3da45) [ACS-9978] DynamicChipListComponent not rendered as expected (#11132)
- [bf8c68e05f](https://github.com/Alfresco/alfresco-ng2-components/commit/bf8c68e05f) [ACS-9978] DynamicChipListComponent not rendered as expected (#11128)
- [f81348997b](https://github.com/Alfresco/alfresco-ng2-components/commit/f81348997b) [ACS-10010] [ACA] Label position problem in some perform actions like 'send-email' (#11117)
- [81e307c81e](https://github.com/Alfresco/alfresco-ng2-components/commit/81e307c81e) AAE-32587 new custom screen registration api (#11120)
- [0e4fced94e](https://github.com/Alfresco/alfresco-ng2-components/commit/0e4fced94e) AAE-37073 Fix error message location and field not highlighting red for card-view-textitem component (#11115)
- [794bc92b4a](https://github.com/Alfresco/alfresco-ng2-components/commit/794bc92b4a) AAE-37293 core auth provider api (#11104)
- [5213621023](https://github.com/Alfresco/alfresco-ng2-components/commit/5213621023) AAE-37287 provideExtensions provider api for Angular standalone (#11103)
- [1fe4dd6fc9](https://github.com/Alfresco/alfresco-ng2-components/commit/1fe4dd6fc9) AAE-36822 Removes showNextTaskCheckbox input for the feature flag (#11066)
- [9a0b75caa1](https://github.com/Alfresco/alfresco-ng2-components/commit/9a0b75caa1) [ADF-5582] Fix avatar rendering logic in adf-node-comments (#10995)
- [8ef0aee768](https://github.com/Alfresco/alfresco-ng2-components/commit/8ef0aee768) AAE-36869 Handles error messages with wrong JSON format (#11078)
- [3eead3917e](https://github.com/Alfresco/alfresco-ng2-components/commit/3eead3917e) AAE-36582 Fix forms misalignment in form renderer (#11062)
- [b67d0a7886](https://github.com/Alfresco/alfresco-ng2-components/commit/b67d0a7886) [AAE-36538] Removed flex-direction:column for form section column large screens (#11090)
- [8978e24c79](https://github.com/Alfresco/alfresco-ng2-components/commit/8978e24c79) [AAE-36983] Updated translation keys in search-text-input.component.html (#11083)
- [bf7f7ebf9f](https://github.com/Alfresco/alfresco-ng2-components/commit/bf7f7ebf9f) AAE-36536 fix for root section and mobile form input layout (#11081)
- [a29d846f4a](https://github.com/Alfresco/alfresco-ng2-components/commit/a29d846f4a) AAE-35310 fixing alignment for checkboxes in sections (#11039)
- [7fbcfe7d6a](https://github.com/Alfresco/alfresco-ng2-components/commit/7fbcfe7d6a) AAE-36536 Allow form sections to be at the root level of form (#11070)
- [0706c9f6de](https://github.com/Alfresco/alfresco-ng2-components/commit/0706c9f6de) AAE-36388 Form Field alignment issues for one liner forms (#11054)
- [dcd15debf0](https://github.com/Alfresco/alfresco-ng2-components/commit/dcd15debf0) AAE-25571 Add title to file name (#11027)
- [19b69e024a](https://github.com/Alfresco/alfresco-ng2-components/commit/19b69e024a) AAE-33082 Fixing dropdown widget update value based on form rule (#11068)
- [71df219f94](https://github.com/Alfresco/alfresco-ng2-components/commit/71df219f94) AAE-36023 Making develop sync with ng18 backup branch (#11061)
- [49c0f44435](https://github.com/Alfresco/alfresco-ng2-components/commit/49c0f44435) Removed esm2022 check as is not supported anymore since Ng18 (#11058)
- [9a3ababb9c](https://github.com/Alfresco/alfresco-ng2-components/commit/9a3ababb9c) AAE-36716 fixing text-form-field blur mechanism in control Value Accessor (#11045)
- [d7ec3a1b77](https://github.com/Alfresco/alfresco-ng2-components/commit/d7ec3a1b77) AAE-35981 Form button customization (#11047)
- [06a9ddc068](https://github.com/Alfresco/alfresco-ng2-components/commit/06a9ddc068) AAE-36023 Some form fields are not properly aligned and cropped out ng19 (#11050)
- [0f9e4759ad](https://github.com/Alfresco/alfresco-ng2-components/commit/0f9e4759ad) AAE-0000 Added fix for stylus ban (#11051)
- [0b90affea4](https://github.com/Alfresco/alfresco-ng2-components/commit/0b90affea4) ACS-8770 Update the Auth Service api docs and deprecations (#9947)
- [45834e20f9](https://github.com/Alfresco/alfresco-ng2-components/commit/45834e20f9) AAE-36388 fixing form-field cut issue on preview (#11025)
- [f15014f295](https://github.com/Alfresco/alfresco-ng2-components/commit/f15014f295) [ACS-9880] Create ADF upgrade guide from 7.0.0 to 8.0.0 (#11029)
- [b28479b92b](https://github.com/Alfresco/alfresco-ng2-components/commit/b28479b92b) [AAE-32978] Move ADF "RichTextEditorComponent" to HxP monorepo (#10967)
- [89380f2905](https://github.com/Alfresco/alfresco-ng2-components/commit/89380f2905) [ACS-7266] checkboxes in sorting boxes are put on the right side of the text instead of the left side (#11009)
- [e5fcfde2ec](https://github.com/Alfresco/alfresco-ng2-components/commit/e5fcfde2ec) Post release version bump (#11021)
- [2e10d2c5c7](https://github.com/Alfresco/alfresco-ng2-components/commit/2e10d2c5c7) AAE-36718 Expose a landing page provider for the landing-page-token (#11020)
| [**Prerequisites and the requirements**](creating-your-first-adf-application.md) | Basic | In this tutorial you are going to learn how to create a very basic (and almost “empty”) ADF-based application that you can start enriching with features, behaviors and customizations. The creation of this basic ADF-based application is possible through a scaffolding tool called [Yeoman]\(https://yeoman.io/ "https://yeoman.io/"), which makes this task very straightforward. |
| [**Creating your Alfresco JavaScript application**](creating-javascript-app-using-alfresco-js-api.md) | Basic | In this tutorial you will learn how to create an application in JavaScript from scratch to interact with Alfresco. |
| [**Using ADF Components**](using-components.md) | Basic | In this tutorial, you will learn how to extend, use, and configure ADF Components. |
| [**Basic theming**](basic-theming.md) | Beginner | In this tutorial you will see how to theme an ADF app by modifying the CSS. |
| [**Working with a Data Table**](working-with-data-table.md) | Intermediate | In this tutorial you will learn how to populate a DataTable component. |
| [**Working with the Nodes API Service**](working-with-nodes-api-service.md) | Intermediate | In this tutorial you will learn how to use the [`NodesApiService`](../core/services/nodes-api.service.md). |
| [**Working with Nodes using the JS API**](working-with-nodes-js-api.md) | Intermediate | In this tutorial you will learn how to use the [`AlfrescoCoreRestApi`](https://github.com/Alfresco/alfresco-js-api/tree/master/src/alfresco-core-rest-api). |
In this tutorial you will see how to theme an ADF app by modifying the CSS.
As detailed in the [user guide page about theming](../user-guide/theming.md), you can easily customize the [Cascading Style Sheets](https://en.wikipedia.org/wiki/Cascading_Style_Sheets) used by an ADF application. The focus of this tutorial is ADF apps built using Yeoman, but you can use the same principles to customize the themes in any ADF application.
## About the `adf-core` theming
As described in the [user guide about theming](../user-guide/theming.md), eveything happens in the `src/custom-style.scss` file defining the *primary*, the *accent* and the *warn* set of palettes. For a detailed description of the different types of palettes, check the [user guide about theming](../user-guide/theming.md).
As you can see directly in the `css` file, the sets of palettes are configured using some predefined variables used in the source code as described below.
$primary: mat-palette($alfresco-accent-orange);
$accent: mat-palette($alfresco-accent-purple);
$warn: mat-palette($alfresco-warn);
The `mat-palette` function is used to define the [Material Design](https://material.io/design/introduction/) Palettes from a collection of colors and `$alfresco-ecm-cyan`, `$alfresco-accent-purple` and `$alfresco-warn` are variables declared locally in the project to define the colors to be used in the application.
As you would expect, changing the parameter of the `mat-palette` function will change the colours of the entire application together.
All the available variables containing the set of palettes for the application can be found in the `node_modules/@alfresco/adf-core/_theming.css` file. In that file you can find:
-`$alfresco-ecm-cyan`
-`$alfresco-dev-teal`
-`$alfresco-ecm-blue`
-`$alfresco-bpm-green`
-`$alfresco-warn`
-`$alfresco-accent-purple`
-`$alfresco-accent-orange`
Check the `_theming.css` file to see the latest changes and how the variables are structured and defined.
## Changing the palette of your application
As an example, let's change the set of palettes for the primary colours. In the `src/custom-style.scss` file, change the `$primary` definition as follows.
$primary: mat-palette($alfresco-ecm-blue);
Once done, save the `custom-style.scss` file and you will see the application refreshed with different colours. That's all there is to it.
## Developing your own palette
In some cases you might want to do something more "customized", and you might want to choose your preferred colours for your application. In this case you simply need to develop your own palette in a local variable and use it as the primary, accent or warn palette.
As an example, let's edit the `src/custom-style.scss` file adding the following source code immediately before the definition of the `$primary` variable.
$my-own-brown: (
50: #f9f2ec,
100: #ecd9c6,
200: #dfbf9f,
300: #d2a679,
400: #c68c53,
500: #ac7339,
600: #86592d,
700: #604020,
800: #392613,
900: #130d06,
A100: #e6ccb3,
A200: #cc9966,
A400: #996633,
A700: #4d3319,
contrast: (
50: $black-87-opacity,
100: $black-87-opacity,
200: $black-87-opacity,
300: $black-87-opacity,
400: $black-87-opacity,
500: white,
600: white,
700: white,
800: $white-87-opacity,
900: $white-87-opacity,
A100: $black-87-opacity,
A200: white,
A400: white,
A700: white,
)
);
When you have done this, replace the `$primary` definition as follows and save the `custom-style.scss` file:
$primary: mat-palette($my-own-brown);
After a few seconds you will see the application refreshing with different colours in the upper menu. In the following screenshot you can see how the new palette looks:
> The configuration values are for migration purposes only.
> Please refer to the documentation for more details on the configuration settings and values.
## Library versions
Update the `package.json` file with the latest library versions:
- Angular: 14.1.3
- Alfresco Component Libraries: 6.9.0
- Alfresco JS-API: 7.6.1
```json
{
"dependencies":{
"@alfresco/adf-core":"6.9.0",
"@alfresco/adf-content-services":"6.9.0",
"@alfresco/adf-process-services-cloud":"6.9.0",
"@alfresco/adf-insights":"6.9.0",
"@alfresco/js-api":"7.6.1"
}
}
```
> [!NOTE]
> You can also refer to the Alfresco Content Application [4.4.1 release](https://github.com/Alfresco/alfresco-content-app/blob/4.4.1/package.json) for the latest version of the libraries.
### Remove old dependencies
```json
{
"dependencies":{
"@angular/material-moment-adapter":"14.1.3",
"@mat-datetimepicker/moment":"^9.0.68",
"moment":"^2.29.4",
"moment-es6":"1.0.0",
"@angular/flex-layout":"^14.0.0-beta.40"
}
}
```
### Add extra dependencies
```json
{
"dependencies":{
"@angular/material-date-fns-adapter":"14.1.3",
"date-fns":"^2.30.0"
}
}
```
Reinstall your dependencies and make initial build
```sh
npm i --legacy-peer-deps
npm run build
```
### Update code
If you are using the `@alfresco/js-api` library, make sure to update the code according to the latest version:
| Before | After |
|------------------------|--------------------|
| MinimalNodeEntity | NodeEntry |
| SiteBody | SiteBodyCreate |
| MinimalNodeEntryEntity | Node |
| MinimalNode | Node |
| PathInfoEntity | PathInfo |
| SiteBody | SiteBodyCreate |
| FavoriteBody | FavoriteBodyCreate |
| PathElementEntity | PathElement |
#### NullInjectorError: No provider for RedirectAuthService!
If you are facing the `NullInjectorError: No provider for RedirectAuthService!` error, make sure to add the `AuthModule` to the `AppModule`:
```typescript
import{AuthModule}from'@alfresco/adf-core';
@NgModule({
imports:[
// other imports
AuthModule.forRoot({useHash: true})
]
})
exportclassAppModule{}
```
For the development purposes, you may want to update the `app.config.json`:
```json5
{
"oauth2":{
// other configurations
"skipIssuerCheck":true,
"strictDiscoveryDocumentValidation":false
}
}
```
### Document List component
For document list components, remove the `display` property if used:
```html
[display]="documentDisplayMode$ | async"
```
## Final steps
After you have updated the code, make sure to test your application thoroughly to ensure that everything is working as expected.
You can build and run your application using the following commands:
Angular updates can be done with "Update Guide" from Angular documentation.
### Added libraries:
- eslint-plugin-storybook
- jasmine-marbles
-@editorjs/paragraph
- editorjs-text-alignment-blocktune
- graphql-ws
### Deleted libraries:
- protractor
- selenium-webdriver
- webdriver-manager
- shx
- monaco-editor
- ngx-monaco-editor-v2
-@types/selenium-webdriver
- protractor-retry-angular-cli
- protractor-screenshoter-plugin
- protractor-smartrunner
Reinstall your dependencies and make initial build:
```shell
npm i
npm run build
```
Review your applications as some styles and classes of Angular Material components might have changed.
## Demo-Shell and e2e
Demo shell and its e2e tests have been deleted.
## Material module
Material module is deprecated and will be removed in a future release. Please import components and modules independently.
## Standalone components
Most components have been changed to "standalone" and their modules have been deleted. Please import components directly.
| Deleted modules |
|--------------------------------|
| AttachmentModule |
| AppsListModule |
| TaskListModule |
| ProcessListModule |
| ProcessUserInfoModule |
| TaskCommentsModule |
| ProcessCommentsModule |
| PeopleModule |
| DynamicTableModule |
| ContentWidgetModule |
| AnalyticsProcessModule |
| DiagramsModule |
| ButtonsMenuModule |
| SitesDropdownModule |
| DataColumnModule |
| ContentUserInfoModule |
| AppCardViewModule |
| AppCloudSharedModule |
| FileViewModule |
| AppProcessListModule |
| FolderDirectiveModule |
| ContentTypeModule |
| SortingPickerModule |
| ProcessServicesCloudPipeModule |
| StartTaskCloudModule |
| ProcessDirectiveModule |
| StartProcessCloudModule |
| TaskDirectiveModule |
## Removed components, directives and pipes
| Deleted components, directives and pipes |
|------------------------------------------|
| IsIncludedPipe |
| TabLabelsPipe |
| BooleanPipe |
| FilterOutArrayObjectsByPropPipe |
| LocalizedRolePipe |
| MimeTypeIconPipe |
| FilterStringPipe |
| ProcessNameCloudPipe |
| FormStylePipe |
| CancelProcessDirective |
| MomentDateTimePipe |
| MomentDatePipe |
## A11y changes
Components have been reviewed and changed to fix most important issues with accessibility. Please test your application thoroughly to ensure that everything is working as expected, as some components have changed their structure, html roles or attributes.
| Tooltips | Tooltips have been changed from Angular Material to standard tooltip |
| Search Page and Search Filters | mat-chip-option replaced with mat-chip |
| Columns Selector | role attribute changes |
| DataTable | role attribute changes |
| Aspect List | structure of html changed |
## Guards
All guards have been converted to functional guards (using the new Angular functional route guard pattern). Please review any custom guards in your application and adapt them to the functional pattern as needed.
Example of converting a class-based guard to a functional guard:
| TaskDetailsModel | TaskRepresentation | Rename all instances |
| IdentityUserFilterInterface | Removed | Use type definitions instead |
| IdentityUserServiceInterface | Removed | Use type definitions instead |
| TaskCloudServiceInterface | Removed | Use type definitions instead |
## Final steps
After you have updated the code, make sure to test your application thoroughly to ensure that everything is working as expected. Pay special attention to areas that use the renamed models or interfaces, and make sure all components are properly imported as standalone components.
If you encounter any issues during the upgrade process, refer to the Angular update guide or the ADF community for assistance.
Update your dependencies to the versions introduced in the 8.0.0 release:
```json
{
"dependencies":{
"@alfresco/adf-core":"8.0.0",
"@alfresco/adf-content-services":"8.0.0",
"@alfresco/adf-process-services-cloud":"8.0.0",
"@alfresco/adf-insights":"8.0.0",
"@alfresco/adf-extensions":"8.0.0",
"@alfresco/adf-cli":"8.0.0",
"@alfresco/eslint-plugin-eslint-angular":"8.0.0",
"@alfresco/adf-testing":"8.0.0",
"@alfresco/js-api":"9.0.0"
}
}
```
Currently used Node version: 22.14.0.
### Breaking changes
Major version updates have been applied to the following core libraries:
- Angular: 19.2.6
- Angular Material: 19.2.9
- Typescript: 5.8.2
> Details on Angular update can be found in *Update Guide* from Angular documentation.
### Added libraries
```json
{
"dependencies":{
"node-fetch":"^3.3.2"
},
"devDependencies":{
"resize-observer-polyfill":"^1.5.1",
"webdriver-manager":"12.1.9"
}
}
```
### Deleted libraries
```json
{
"devDependencies":{
"mini-css-extract-plugin":"X.X.X",
"css-loader":"X.X.X"
}
}
```
Reinstall your dependencies and perform an initial build:
```shell
npm i
npm run build
```
Review your applications as some styles and classes of Angular Material components might have changed.
## Deprecations
The following table lists deprecated features and modules that will be removed in upcoming releases. Consider replacing them as soon as you update ADF to minimize future technical debt.
You can start using the new features and APIs introduced in the 8.0.0 release.
### XMLHttpRequest.withCredentials
Support for disabling the `withCredentials` property in `app.config.json` for identity providers that disallow credentials has been introduced. You can configure it as shown below:
```json
{
"auth":{
"withCredentials":false
}
}
```
### provideShell
The new provideShell API for providing the main application layout can replace the `withRoutes(routes: Routes | AppShellRoutesConfig)` method, as shown below.
This page describes how you can customize ADF forms to your own specification.
## Contents
There are two ways to customize the form
- [Replace default form widgets with custom components](#replace-default-form-widgets-with-apa-form-widgets)
- [Replace custom form widget with custom components](#replace-custom-form-widgets-with-custom-components)
## Replace default form widgets with APA form widgets
This is an example of replacing the standard `Text` [widget](../../lib/testing/src/lib/core/pages/form/widgets/widget.ts) with a custom component for all APA forms rendered within the `<adf-form>` component.
This is an example of replacing the standard `Text` with a custom component for all APA forms rendered within the `<adf-form>` component.
1. Create a simple form with some `Text` widgets:
@@ -24,8 +26,10 @@ This is an example of replacing the standard `Text` [widget](../../lib/testing/s
```ts
import { Component } from '@angular/core';
import { WidgetComponent } from '@alfresco/adf-core';
@Component({
selector: 'custom-editor',
standalone: true,
template: `
<div style="color: red">Look, I'm a APA custom editor!</div>
`
@@ -33,40 +37,14 @@ This is an example of replacing the standard `Text` [widget](../../lib/testing/s
export class CustomEditorComponent extends WidgetComponent {}
```
2. Add it to the application module or any custom module that is imported into the application one:
2. Import the [`FormRenderingService`](../core/services/form-rendering.service.md) in the feature module, or application module (recommended: `ProcessServicesExtensionModule`), and override the default mapping:
```ts
import { NgModule } from '@angular/core';
import { CustomEditorComponent } from './custom-editor.component';
@NgModule({
declarations: [ CustomEditorComponent ],
exports: [ CustomEditorComponent ]
})
export class CustomEditorsModule {}
```
3. Every custom widget component should be added into the the collections `declarations` and `exports`. If you decided to store custom widgets in a separate dedicated module (and optionally as a separate re-distributable library) don't forget to import it into the main application:
```ts
@NgModule({
imports: [
// ...
CustomEditorsModule
// ...
],
providers: [],
bootstrap: [ AppComponent ]
})
export class AppModule {}
```
4. Import the [`FormRenderingService`](../core/services/form-rendering.service.md) into any of your Views and override the default mapping, for example:
```ts
import { Component } from '@angular/core';
import { CustomEditorComponent } from './custom-editor.component';
@Component({...})
export class MyView {
import { FormRenderingService } from '@alfresco/adf-core';
@@ -75,10 +53,12 @@ This is an example of replacing the standard `Text` [widget](../../lib/testing/s
}
```
5. At runtime the form should look similar to the following:
> [!IMPORTANT]
> The widget should be registered outside the custom widget component, otherwise the widget will not be registered correctly.
At runtime the form should look similar to the following:
## Replace custom form widgets with custom components
@@ -105,54 +85,30 @@ When displayed in a task, the field will look similar to the following:
To render the missing content:
1. Create an Angular component:
1. Create a standalone Angular component:
```ts
import { Component } from '@angular/core';
import { WidgetComponent } from '@alfresco/adf-core';
@Component({
selector: 'app-demo-widget',
standalone: true,
template: `<div style="color: green">ADF version of custom form widget</div>`
})
export class DemoWidgetComponent extends WidgetComponent {}
```
2. Place it inside the custom module:
2. Import the [`FormRenderingService`](../core/services/form-rendering.service.md) in the feature module, or application module (recommended: `ProcessServicesExtensionModule`), and override the default mapping:
```ts
import { NgModule } from '@angular/core';
import { DemoWidgetComponent } from './demo-widget.component';
@NgModule({
declarations: [ DemoWidgetComponent ],
exports: [ DemoWidgetComponent ]
})
export class CustomWidgetsModule {}
```
3. Import it into your Application Module:
```ts
@NgModule({
imports: [
// ...
CustomWidgetsModule
// ...
],
providers: [],
bootstrap: [ AppComponent ]
})
export class AppModule {}
```
4. Import the [`FormRenderingService`](../core/services/form-rendering.service.md) in any of your Views and provide the new mapping:
```ts
import { Component } from '@angular/core';
import { DemoWidgetComponent } from './demo-widget.component';
@Component({...})
export class MyView {
import { FormRenderingService } from '@alfresco/adf-core';
@@ -144,23 +144,4 @@ To address this, include the following script tag within the <head> section of y
</script>
```
# Docker Environment Variables
These settings can be customized in a Docker environment using the following environment variables:
APP_CONFIG_OAUTH2_HOST
APP_CONFIG_OAUTH2_CLIENTID
APP_CONFIG_OAUTH2_CLIENT_SECRET
APP_CONFIG_OAUTH2_IMPLICIT_FLOW
APP_CONFIG_OAUTH2_CODE_FLOW
APP_CONFIG_OAUTH2_AUDIENCE
APP_CONFIG_OAUTH2_SCOPE
APP_CONFIG_OAUTH2_LOGOUT_URL
APP_CONFIG_OAUTH2_LOGOUT_PARAMETERS
APP_CONFIG_OAUTH2_SILENT_LOGIN
APP_CONFIG_OAUTH2_REDIRECT_SILENT_IFRAME_URI
APP_CONFIG_OAUTH2_REDIRECT_LOGIN
APP_CONFIG_OAUTH2_REDIRECT_LOGOUT
Adjust the above examples according to your specific environment and authentication provider settings. These configurations ensure that the application can securely authenticate users through OAuth2, aligning with the current best practices in web application security.
4. Apply and commit your fix to **develop-patch-VERSION** branch.
5. Run [release.sh](../../scripts/release.sh) script with proper patch version:
5. Increment the version in the package.json with the following command where `-v` refers to the ADF version and `-vj` to the new js-api version.
The js-api must have a major version that is one higher than the other packages. For example, if adf-core is at version `4.11.1`, then js-api should be at version `5.11.1`
```bash
./scripts/update-version.sh -v X.X.X -vj X.X.X
# e.g. ./scripts/update-version.sh -v 4.1.11 -vj 5.1.11
```
6. The `"@alfresco/js-api"` dependency in the `lib/cli/package.json` has to remain unchanged
7. Run [release.sh](../../scripts/release.sh) script with proper patch version:
```bash
scripts/release.sh -v VERSION
# e.g. scripts/release.sh -v 4.11.1
```
6. Push your changes and run all tests:
8. Push your changes and run all tests:
```bash
git push -u origin develop-patch-VERSION
@@ -39,28 +49,28 @@
git push
```
7. Verify if tests are green and if everything looks fine, you can proceed further.
9. Verify if tests are green and if everything looks fine, you can proceed further.
8. Create new branch from **master** and call it **master-patch-VERSION** (e.g. master-patch-4.11.1):
10. Create new branch from **master** and call it **master-patch-VERSION** (e.g. master-patch-4.11.1):
```bash
git checkout master
git checkout -b master-patch-VERSION
```
9. Merge **develop-patch-VERSION** into **master-patch-VERSION**:
11. Merge **develop-patch-VERSION** into **master-patch-VERSION**:
```bash
git checkout master-patch-VERSION
git merge develop-patch-VERSION
```
10. Push **master-patch-VERSION** branch:
12. Push **master-patch-VERSION** branch:
```bash
git push -u origin master-patch-VERSION
```
11. Verify if build is green and check if proper [tag](https://github.com/Alfresco/alfresco-ng2-components/tags) was created.
13. Verify if build is green and check if proper [tag](https://github.com/Alfresco/alfresco-ng2-components/tags) was created.
12. After all is done, you can **cherry-pick** your fix to develop.
14. After all is done, you can **cherry-pick** your fix to develop.
@@ -32,111 +32,30 @@ an [online palette design tool](http://mcg.mbitson.com/).
See the [Material Design Style page](https://material.io/guidelines/style/color.html#) for
more information about color concepts.
## Using a pre-built theme
## Using Angular Material theming
Angular Material comes prepackaged with several pre-built theme css files. These theme files also
include all of the styles for core (styles common to all components), so you only have to include a
single css file for Angular Material in your app.
ADF is based on Angular Material library, which offers solutions for theming your application with either:
- Material Design 2 https://material.angular.dev/guide/material-2-theming
- Material Design 3 https://material.angular.dev/guide/theming
You can include a theme file directly into your application from
`@alfresco/adf-core/prebuilt-themes`
If you already setup Angular Material theming in the application you use ADF in, there is no need for taking additional steps to theme ADF components - colors, typography and other parts of the theme will be taken from your setup.
Available pre-built themes:
*`adf-blue-orange.css`
*`adf-blue-purple.css`
*`adf-cyan-orange.css`
*`adf-cyan-purple.css`
*`adf-green-orange.css`
*`adf-green-purple.css`
*`adf-indigo-pink.css`
*`adf-pink-bluegrey.css`
*`adf-purple-green.css`
## Customizing deprecated theme variables
If you're using Angular CLI you can include one of the prebuilt themes in your `styles.scss` file:
Currently we have an amount of custom variables around components to mange libraries look and feel consistently and globally.
While they are getting deprecated to be replaced with [Angular Material system variables](https://material.angular.dev/guide/system-variables), for seamless integration with Angular Material's theming, you can provide values for those variables inside the `:root` element.
When you want more customization than a pre-built theme offers, you can create your own theme file. You only need to include the packages you actually use in your application.
```scss
/*
* Include only packages that you are using (and core by default)
Any component with the `add-dark-theme` class will use the dark theme, while other components will fall back to the default.
**No new variables should be added to the project**
[Reference list of overridable variables](https://github.com/Alfresco/alfresco-ng2-components/blob/29d341cc3b6a0842a776464027dcb1154875a8f0/lib/core/src/lib/styles/_index.scss#L25)
## Default reusable class
@@ -164,13 +83,13 @@ Avoid adding css variables with custom values, values should come from the theme
--new-variable: mat.get-color-from-palette($primary, 50), // good
```
When styling components try to use theme related variables (colors, typography):
```
When styling components use Angular Material system variables (colors, typography, elevation):
```scss
.my-class{
color:darkgrey;// bad
color:var(--theme-primary-color); // good
color:var(--mat-sys-primary);// good
font-size:23px;// bad
font-size:var(--theme-typography-body-1-font-size); // good
font:var(--mat-sys-body-small);// good
background:yellow;// bad
background:var(--my-component-nr-200-background-color);// bad
background:var(--theme-primary-color-50);// good
@@ -180,7 +99,7 @@ When styling components try to use theme related variables (colors, typography):
When using library like Angular Material try to follow patterns from this library.
It helps to style components built with this library (just apply theme instead of custom styling).
For example when creating input:
```
```html
// bad
<divclass="my-custom-input">
<divclass="my-custom-label"></div>
@@ -198,3 +117,16 @@ For example when creating input:
Some files were not shown because too many files have changed in this diff
Show More
Reference in New Issue
Block a user
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
Anton Ramanovich
dominikiwanekhyland
Denys Vuika
dependabot[bot]
tomasz hanaj
rmnvch
MichaelaandFabian Kindgen
Mykyta Maliarchuk
MichalKinas
Leu Kastsiuchenka
AleksanderSklorz
Bartosz Sekula
Grzegorz Jaśkowski
Robert Duda
Darren Thornton
Wojciech Duda
Alex Molodyh
Vito Albano
Ewelina Dikta
Enrico Hilgendorf
Ehsan Rezaei
Amedeo Lepore
Wiktor Danielewski
Pawel Solowczuk
Samuel FialhoandSahana Ghosal
Alfresco BuildandCrowdin Bot
Alexander Puschkin
Shivangi Shree
Tomasz Nastaly
Copilotanderomano
Soumyajit Chakraborty
Eugenio Romano
Maurizio Vitale
Anna Karwatka
Domenico Sibilio
Michael Couné
Swetha Balasubramaniam
Tomasz Gnyp
Ruggero Corsaletti
Adam Świderski
swapnil-verma-gl
Jonas Wollweber