[NAE-1497] Frontend actions

docs/actions/frontend-actions.md

@@ -0,0 +1,35 @@
+# Frontend Actions
+Frontend actions are type of actions that are executed on frontend. The action implementation is done as part of
+frontend code and they can be called from inside data or transition events.
+
+## Definition of action on frontend
+
+A frontend action can be defined anywhere in frontend code, but it is suggested to make a separate file
+for it. When defining action, we should follow these steps:
+
+1. Create a file with any name, e.g. ``example-action.ts``, this will be the file, where we define our action
+2. To define an action we should create and export a constant. Type of this constant has to be `FrontendActionDefinition`. The value of this constant will be the actual action definition
+```
+export const redirectAction: FrontActionDefinition
+```
+3. The ``FrontActionDefinition`` interface has an argument called ``fn`` which has a type of anonymous function with two arguments: ``injector: Injector``, ``frontAction: FrontAction``.
+``Injector`` is classic Angular injector, ``FrontAction`` contains the ID/name of the frontend action and the arguments. The content of this object is got from backend frontend action call. The frontend
+action definition should look like as follows:
+```
+export const redirectAction: FrontActionDefinition = {
+    fn: (injector: Injector, frontAction: FrontAction) => {
+        const router = injector.get(Router);
+        router.navigate([frontAction.args[0]])
+    }
+}
+```
+4. The final step to register our new frontend function into ``FrontActionsRegisterService``. This can be done in any module of our frontend application,
+but it is suggested to do it in ``app.module.ts``. This can be done via calling the ``FrontActionsRegistryService.register(actionId: string, actionDefintion: FrontActionDefinition)``. The first argument, ``actionId``
+should be the same, that it is called on backend.
+```
+export class AppModule {
+    constructor(frontActionsRegistryService: FrontActionsRegistryService) {
+        frontActionsRegistryService.register('redirect', redirectAction);
+    }
+}
+```

docs/compodoc/components-core/js/menu-wc.js

@@ -17,7 +17,7 @@ customElements.define('compodoc-menu', class extends HTMLElement {
             <ul class="list">
                 <li class="title">
                     <a href="index.html" data-type="index-link">
-                        <img alt="" class="img-responsive" data-type="compodoc-logo" data-src=images/docs-title-logo.png> 
+                        <img alt="" class="img-responsive" data-type="compodoc-logo" data-src=images/docs-title-logo.png>
                     </a>
                 </li>
 
@@ -72,13 +72,13 @@ customElements.define('compodoc-menu', class extends HTMLElement {
                                 <a href="modules/AlertDialogModule.html" data-type="entity-link" >AlertDialogModule</a>
                                     <li class="chapter inner">
                                         <div class="simple menu-toggler" data-toggle="collapse" ${ isNormalMode ?
-                                            'data-target="#components-links-module-AlertDialogModule-40330a12c81588a6d27cca7d41d1740d"' : 'data-target="#xs-components-links-module-AlertDialogModule-40330a12c81588a6d27cca7d41d1740d"' }>
+                                            'data-target="#components-links-model-AlertDialogModule-40330a12c81588a6d27cca7d41d1740d"' : 'data-target="#xs-components-links-model-AlertDialogModule-40330a12c81588a6d27cca7d41d1740d"' }>
                                             <span class="icon ion-md-cog"></span>
                                             <span>Components</span>
                                             <span class="icon ion-ios-arrow-down"></span>
                                         </div>
-                                        <ul class="links collapse" ${ isNormalMode ? 'id="components-links-module-AlertDialogModule-40330a12c81588a6d27cca7d41d1740d"' :
-                                            'id="xs-components-links-module-AlertDialogModule-40330a12c81588a6d27cca7d41d1740d"' }>
+                                        <ul class="links collapse" ${ isNormalMode ? 'id="components-links-model-AlertDialogModule-40330a12c81588a6d27cca7d41d1740d"' :
+                                            'id="xs-components-links-model-AlertDialogModule-40330a12c81588a6d27cca7d41d1740d"' }>
                                             <li class="link">
                                                 <a href="components/AlertDialogComponent.html" data-type="entity-link" data-context="sub-entity" data-context-id="modules" >AlertDialogComponent</a>
                                             </li>
@@ -92,13 +92,13 @@ customElements.define('compodoc-menu', class extends HTMLElement {
                                 <a href="modules/ConfirmDialogModule.html" data-type="entity-link" >ConfirmDialogModule</a>
                                     <li class="chapter inner">
                                         <div class="simple menu-toggler" data-toggle="collapse" ${ isNormalMode ?
-                                            'data-target="#components-links-module-ConfirmDialogModule-04c13e846dab613d52b777bdc77b1c74"' : 'data-target="#xs-components-links-module-ConfirmDialogModule-04c13e846dab613d52b777bdc77b1c74"' }>
+                                            'data-target="#components-links-model-ConfirmDialogModule-04c13e846dab613d52b777bdc77b1c74"' : 'data-target="#xs-components-links-model-ConfirmDialogModule-04c13e846dab613d52b777bdc77b1c74"' }>
                                             <span class="icon ion-md-cog"></span>
                                             <span>Components</span>
                                             <span class="icon ion-ios-arrow-down"></span>
                                         </div>
-                                        <ul class="links collapse" ${ isNormalMode ? 'id="components-links-module-ConfirmDialogModule-04c13e846dab613d52b777bdc77b1c74"' :
-                                            'id="xs-components-links-module-ConfirmDialogModule-04c13e846dab613d52b777bdc77b1c74"' }>
+                                        <ul class="links collapse" ${ isNormalMode ? 'id="components-links-model-ConfirmDialogModule-04c13e846dab613d52b777bdc77b1c74"' :
+                                            'id="xs-components-links-model-ConfirmDialogModule-04c13e846dab613d52b777bdc77b1c74"' }>
                                             <li class="link">
                                                 <a href="components/ConfirmDialogComponent.html" data-type="entity-link" data-context="sub-entity" data-context-id="modules" >ConfirmDialogComponent</a>
                                             </li>
@@ -130,13 +130,13 @@ customElements.define('compodoc-menu', class extends HTMLElement {
                                 <a href="modules/PromptDialogModule.html" data-type="entity-link" >PromptDialogModule</a>
                                     <li class="chapter inner">
                                         <div class="simple menu-toggler" data-toggle="collapse" ${ isNormalMode ?
-                                            'data-target="#components-links-module-PromptDialogModule-4a544ac69e13e01371cfd37977f7ab8d"' : 'data-target="#xs-components-links-module-PromptDialogModule-4a544ac69e13e01371cfd37977f7ab8d"' }>
+                                            'data-target="#components-links-model-PromptDialogModule-4a544ac69e13e01371cfd37977f7ab8d"' : 'data-target="#xs-components-links-model-PromptDialogModule-4a544ac69e13e01371cfd37977f7ab8d"' }>
                                             <span class="icon ion-md-cog"></span>
                                             <span>Components</span>
                                             <span class="icon ion-ios-arrow-down"></span>
                                         </div>
-                                        <ul class="links collapse" ${ isNormalMode ? 'id="components-links-module-PromptDialogModule-4a544ac69e13e01371cfd37977f7ab8d"' :
-                                            'id="xs-components-links-module-PromptDialogModule-4a544ac69e13e01371cfd37977f7ab8d"' }>
+                                        <ul class="links collapse" ${ isNormalMode ? 'id="components-links-model-PromptDialogModule-4a544ac69e13e01371cfd37977f7ab8d"' :
+                                            'id="xs-components-links-model-PromptDialogModule-4a544ac69e13e01371cfd37977f7ab8d"' }>
                                             <li class="link">
                                                 <a href="components/PromptDialogComponent.html" data-type="entity-link" data-context="sub-entity" data-context-id="modules" >PromptDialogComponent</a>
                                             </li>
@@ -150,13 +150,13 @@ customElements.define('compodoc-menu', class extends HTMLElement {
                                 <a href="modules/SnackBarModule.html" data-type="entity-link" >SnackBarModule</a>
                                     <li class="chapter inner">
                                         <div class="simple menu-toggler" data-toggle="collapse" ${ isNormalMode ?
-                                            'data-target="#components-links-module-SnackBarModule-9ebd22ef52e0633880cf163e85dc8bb5"' : 'data-target="#xs-components-links-module-SnackBarModule-9ebd22ef52e0633880cf163e85dc8bb5"' }>
+                                            'data-target="#components-links-model-SnackBarModule-9ebd22ef52e0633880cf163e85dc8bb5"' : 'data-target="#xs-components-links-model-SnackBarModule-9ebd22ef52e0633880cf163e85dc8bb5"' }>
                                             <span class="icon ion-md-cog"></span>
                                             <span>Components</span>
                                             <span class="icon ion-ios-arrow-down"></span>
                                         </div>
-                                        <ul class="links collapse" ${ isNormalMode ? 'id="components-links-module-SnackBarModule-9ebd22ef52e0633880cf163e85dc8bb5"' :
-                                            'id="xs-components-links-module-SnackBarModule-9ebd22ef52e0633880cf163e85dc8bb5"' }>
+                                        <ul class="links collapse" ${ isNormalMode ? 'id="components-links-model-SnackBarModule-9ebd22ef52e0633880cf163e85dc8bb5"' :
+                                            'id="xs-components-links-model-SnackBarModule-9ebd22ef52e0633880cf163e85dc8bb5"' }>
                                             <li class="link">
                                                 <a href="components/ErrorSnackBarComponent.html" data-type="entity-link" data-context="sub-entity" data-context-id="modules" >ErrorSnackBarComponent</a>
                                             </li>
@@ -179,13 +179,13 @@ customElements.define('compodoc-menu', class extends HTMLElement {
                                 <a href="modules/TranslateLibModule.html" data-type="entity-link" >TranslateLibModule</a>
                                 <li class="chapter inner">
                                     <div class="simple menu-toggler" data-toggle="collapse" ${ isNormalMode ?
-                                        'data-target="#injectables-links-module-TranslateLibModule-d0af318455dcd43cb1dbe190a596d247"' : 'data-target="#xs-injectables-links-module-TranslateLibModule-d0af318455dcd43cb1dbe190a596d247"' }>
+                                        'data-target="#injectables-links-model-TranslateLibModule-d0af318455dcd43cb1dbe190a596d247"' : 'data-target="#xs-injectables-links-model-TranslateLibModule-d0af318455dcd43cb1dbe190a596d247"' }>
                                         <span class="icon ion-md-arrow-round-down"></span>
                                         <span>Injectables</span>
                                         <span class="icon ion-ios-arrow-down"></span>
                                     </div>
-                                    <ul class="links collapse" ${ isNormalMode ? 'id="injectables-links-module-TranslateLibModule-d0af318455dcd43cb1dbe190a596d247"' :
-                                        'id="xs-injectables-links-module-TranslateLibModule-d0af318455dcd43cb1dbe190a596d247"' }>
+                                    <ul class="links collapse" ${ isNormalMode ? 'id="injectables-links-model-TranslateLibModule-d0af318455dcd43cb1dbe190a596d247"' :
+                                        'id="xs-injectables-links-model-TranslateLibModule-d0af318455dcd43cb1dbe190a596d247"' }>
                                         <li class="link">
                                             <a href="injectables/LanguageService.html" data-type="entity-link" data-context="sub-entity" data-context-id="modules" >LanguageService</a>
                                         </li>
@@ -196,27 +196,27 @@ customElements.define('compodoc-menu', class extends HTMLElement {
                                 <a href="modules/UtilityModule.html" data-type="entity-link" >UtilityModule</a>
                                 <li class="chapter inner">
                                     <div class="simple menu-toggler" data-toggle="collapse" ${ isNormalMode ?
-                                        'data-target="#directives-links-module-UtilityModule-71b7821c6d1a72e2b84e1d35bb5253ed"' : 'data-target="#xs-directives-links-module-UtilityModule-71b7821c6d1a72e2b84e1d35bb5253ed"' }>
+                                        'data-target="#directives-links-model-UtilityModule-71b7821c6d1a72e2b84e1d35bb5253ed"' : 'data-target="#xs-directives-links-model-UtilityModule-71b7821c6d1a72e2b84e1d35bb5253ed"' }>
                                         <span class="icon ion-md-code-working"></span>
                                         <span>Directives</span>
                                         <span class="icon ion-ios-arrow-down"></span>
                                     </div>
-                                    <ul class="links collapse" ${ isNormalMode ? 'id="directives-links-module-UtilityModule-71b7821c6d1a72e2b84e1d35bb5253ed"' :
-                                        'id="xs-directives-links-module-UtilityModule-71b7821c6d1a72e2b84e1d35bb5253ed"' }>
+                                    <ul class="links collapse" ${ isNormalMode ? 'id="directives-links-model-UtilityModule-71b7821c6d1a72e2b84e1d35bb5253ed"' :
+                                        'id="xs-directives-links-model-UtilityModule-71b7821c6d1a72e2b84e1d35bb5253ed"' }>
                                         <li class="link">
                                             <a href="directives/LetDirective.html" data-type="entity-link" data-context="sub-entity" data-context-id="modules" >LetDirective</a>
                                         </li>
                                     </ul>
                                 </li>
                                     <li class="chapter inner">
                                         <div class="simple menu-toggler" data-toggle="collapse" ${ isNormalMode ?
-                                            'data-target="#pipes-links-module-UtilityModule-71b7821c6d1a72e2b84e1d35bb5253ed"' : 'data-target="#xs-pipes-links-module-UtilityModule-71b7821c6d1a72e2b84e1d35bb5253ed"' }>
+                                            'data-target="#pipes-links-model-UtilityModule-71b7821c6d1a72e2b84e1d35bb5253ed"' : 'data-target="#xs-pipes-links-model-UtilityModule-71b7821c6d1a72e2b84e1d35bb5253ed"' }>
                                             <span class="icon ion-md-add"></span>
                                             <span>Pipes</span>
                                             <span class="icon ion-ios-arrow-down"></span>
                                         </div>
-                                        <ul class="links collapse" ${ isNormalMode ? 'id="pipes-links-module-UtilityModule-71b7821c6d1a72e2b84e1d35bb5253ed"' :
-                                            'id="xs-pipes-links-module-UtilityModule-71b7821c6d1a72e2b84e1d35bb5253ed"' }>
+                                        <ul class="links collapse" ${ isNormalMode ? 'id="pipes-links-model-UtilityModule-71b7821c6d1a72e2b84e1d35bb5253ed"' :
+                                            'id="xs-pipes-links-model-UtilityModule-71b7821c6d1a72e2b84e1d35bb5253ed"' }>
                                             <li class="link">
                                                 <a href="pipes/ContainsPipe.html" data-type="entity-link" data-context="sub-entity" data-context-id="modules" >ContainsPipe</a>
                                             </li>
@@ -2262,4 +2262,4 @@ customElements.define('compodoc-menu', class extends HTMLElement {
         `);
         this.innerHTML = tp.strings;
     }
-});
+});

docs/compodoc/components-core/js/routes.js

@@ -115,7 +115,7 @@ document.addEventListener('DOMContentLoaded', function() {
             .attr("text-anchor", function(d) {
                 return "start";
             }).html(function(d) {
-                // if kind === module name + module
+                // if kind === model name + model
                 // if kind === component component + path
                 var _name = '';
                 if (d.kind === 'module') {