AAE-26215 Standalone app list (process cloud) (#10523)

docs/process-services-cloud/components/app-list-cloud.component.md

@@ -2,19 +2,19 @@
 Title: App List Cloud Component
 Added: v3.0.0
 Status: Experimental
-Last reviewed: 2019-01-08
+Last reviewed: 2025-01-03
 ---
 
-# [App List Cloud Component](../../../lib/process-services-cloud/src/lib/app/components/app-list-cloud.component.ts "Defined in app-list-cloud.component.ts")
+# App List Cloud Component
+
+`standalone`, `component`
 
 Shows all deployed cloud application instances.
 
 ## Basic Usage
 
 ```html
-<adf-cloud-app-list 
+<adf-cloud-app-list [layoutType]="'GRID'" />
-    [layoutType]="'GRID'">
-</adf-cloud-app-list>
 ```
 
 ### [Transclusions](../../user-guide/transclusion.md)
@@ -23,11 +23,10 @@ You can show custom content when there are no apps available by supplying an
 `<adf-custom-empty-content>` section:
 
 ```html
-<adf-cloud-app-list
+<adf-cloud-app-list [layoutType]="'GRID'">
-    [layoutType]="'GRID'">
+    <adf-custom-empty-content>
-        <adf-custom-empty-content>
+      No Apps present
-            No Apps present
+    </adf-custom-empty-content>
-        </adf-custom-empty-content>
 </adf-cloud-app-list>
 ```
 
@@ -38,19 +37,25 @@ If you are generating a project for Activiti 7, you must add the list of apps yo
 For example :
 
 ```json
-  "alfresco-deployed-apps" : [{"name": "simple-app"}]
+{
+    "alfresco-deployed-apps": [
+        {
+            "name": "simple-app"
+        }
+    ]
+}
 ```
 
 ## Class members
 
 ### Properties
 
-| Name | Type | Default value | Description |
+| Name       | Type     | Default value | Description                                                                                      |
-| ---- | ---- | ------------- | ----------- |
+|------------|----------|---------------|--------------------------------------------------------------------------------------------------|
-| layoutType | `string` | LAYOUT_GRID | (**required**) Defines the layout of the apps. There are two possible values, "GRID" and "LIST". |
+| layoutType | `string` | LAYOUT_GRID   | (**required**) Defines the layout of the apps. There are two possible values, "GRID" and "LIST". |
 
 ### Events
 
-| Name | Type | Description |
+| Name     | Type                                     | Description                           |
-| ---- | ---- | ----------- |
+|----------|------------------------------------------|---------------------------------------|
-| appClick | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`ApplicationInstanceModel`](../../../lib/process-services-cloud/src/lib/app/models/application-instance.model.ts)`>` | Emitted when an app entry is clicked. |
+| appClick | `EventEmitter<ApplicationInstanceModel>` | Emitted when an app entry is clicked. |

lib/process-services-cloud/src/lib/app/app-list-cloud.module.spec.ts

@@ -1,35 +0,0 @@
-/*!
- * @license
- * Copyright © 2005-2024 Hyland Software, Inc. and its affiliates. All rights reserved.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { NoopTranslateModule } from '@alfresco/adf-core';
-import { AppListCloudModule } from './app-list-cloud.module';
-import { TestBed } from '@angular/core/testing';
-
-describe('AppListCloudModule', () => {
-    let appListCloudModule: AppListCloudModule;
-
-    beforeEach(() => {
-        TestBed.configureTestingModule({
-            imports: [AppListCloudModule, NoopTranslateModule]
-        });
-        appListCloudModule = TestBed.inject(AppListCloudModule);
-    });
-
-    it('should create an instance', () => {
-        expect(appListCloudModule).toBeTruthy();
-    });
-});

lib/process-services-cloud/src/lib/app/app-list-cloud.module.ts

@@ -16,15 +16,11 @@
  */
 
 import { NgModule } from '@angular/core';
-import { MaterialModule } from '../material.module';
+import { AppDetailsCloudComponent } from './components/app-details-cloud/app-details-cloud.component';
-import { CommonModule } from '@angular/common';
+import { AppListCloudComponent } from './components/app-list-cloud/app-list-cloud.component';
-import { AppDetailsCloudComponent } from './components/app-details-cloud.component';
-import { AppListCloudComponent } from './components/app-list-cloud.component';
-import { TEMPLATE_DIRECTIVES, CoreModule } from '@alfresco/adf-core';
 
 @NgModule({
-    imports: [CommonModule, ...TEMPLATE_DIRECTIVES, MaterialModule, CoreModule],
+    imports: [AppListCloudComponent, AppDetailsCloudComponent],
-    declarations: [AppListCloudComponent, AppDetailsCloudComponent],
     exports: [AppListCloudComponent, AppDetailsCloudComponent]
 })
 export class AppListCloudModule {}

lib/process-services-cloud/src/lib/app/components/app-details-cloud.component.ts

@@ -1,62 +0,0 @@
-/*!
- * @license
- * Copyright © 2005-2024 Hyland Software, Inc. and its affiliates. All rights reserved.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { Component, Input, Output, EventEmitter, ViewEncapsulation } from '@angular/core';
-import { ApplicationInstanceModel, DEFAULT_APP_INSTANCE_ICON, DEFAULT_APP_INSTANCE_THEME } from '../models/application-instance.model';
-
-@Component({
-  selector: 'adf-cloud-app-details',
-  templateUrl: './app-details-cloud.component.html',
-  styleUrls: ['./app-details-cloud.component.scss'],
-  encapsulation: ViewEncapsulation.None
-})
-
-export class AppDetailsCloudComponent {
-
-  @Input()
-  applicationInstance: ApplicationInstanceModel;
-
-  @Output()
-  selectedApp = new EventEmitter<ApplicationInstanceModel>();
-
-  /**
-   * Pass the selected app as next
-   *
-   * @param app application model
-   */
-  onSelectApp(app: ApplicationInstanceModel): void {
-    this.selectedApp.emit(app);
-  }
-
-  /**
-   * Get application instance theme
-   *
-   * @returns the name of the theme
-   */
-  getTheme(): string {
-    return this.applicationInstance.theme || DEFAULT_APP_INSTANCE_THEME;
-  }
-
-  /**
-   * Get application instance icon
-   *
-   * @returns the name of the icon
-   */
-  getIcon(): string {
-    return this.applicationInstance.icon || DEFAULT_APP_INSTANCE_ICON;
-  }
-}

lib/process-services-cloud/src/lib/app/components/app-details-cloud/app-details-cloud.component.scss

@@ -22,16 +22,46 @@
 }
 
 $tile-themes: (
-    theme-1: (bg: #269abc, color: #168aac),
+    theme-1: (
-    theme-2: (bg: #7da9b0, color: #6d99a0),
+        bg: #269abc,
-    theme-3: (bg: #7689ab, color: #66799b),
+        color: #168aac
-    theme-4: (bg: #c74e3e, color: #b73e2e),
+    ),
-    theme-5: (bg: #fab96c, color: #eaa95c),
+    theme-2: (
-    theme-6: (bg: #759d4c, color: #658d3c),
+        bg: #7da9b0,
-    theme-7: (bg: #b1b489, color: #a1a479),
+        color: #6d99a0
-    theme-8: (bg: #a17299, color: #916289),
+    ),
-    theme-9: (bg: #696c67, color: #595c57),
+    theme-3: (
-    theme-10: (bg: #cabb33, color: #baab23)
+        bg: #7689ab,
+        color: #66799b
+    ),
+    theme-4: (
+        bg: #c74e3e,
+        color: #b73e2e
+    ),
+    theme-5: (
+        bg: #fab96c,
+        color: #eaa95c
+    ),
+    theme-6: (
+        bg: #759d4c,
+        color: #658d3c
+    ),
+    theme-7: (
+        bg: #b1b489,
+        color: #a1a479
+    ),
+    theme-8: (
+        bg: #a17299,
+        color: #916289
+    ),
+    theme-9: (
+        bg: #696c67,
+        color: #595c57
+    ),
+    theme-10: (
+        bg: #cabb33,
+        color: #baab23
+    )
 );
 
 adf-cloud-app-details {
@@ -69,10 +99,7 @@ adf-cloud-app-details {
                 max-width: unset;
 
                 &:hover {
-                    box-shadow:
+                    box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
-                        0 8px 10px 1px rgba(0, 0, 0, 0.14),
-                        0 3px 14px 2px rgba(0, 0, 0, 0.12),
-                        0 5px 5px -3px rgba(0, 0, 0, 0.2);
                     cursor: pointer;
                     transform: scale(1.015);
                 }

lib/process-services-cloud/src/lib/app/components/app-details-cloud/app-details-cloud.component.spec.ts

@@ -16,11 +16,10 @@
  */
 
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { fakeApplicationInstance } from '../mock/app-model.mock';
+import { fakeApplicationInstance } from '../../mock/app-model.mock';
 import { AppDetailsCloudComponent } from './app-details-cloud.component';
-import { ProcessServiceCloudTestingModule } from '../../testing/process-service-cloud.testing.module';
+import { ProcessServiceCloudTestingModule } from '../../../testing/process-service-cloud.testing.module';
-import { AppListCloudModule } from '../app-list-cloud.module';
+import { DEFAULT_APP_INSTANCE_THEME } from '../../models/application-instance.model';
-import { DEFAULT_APP_INSTANCE_THEME } from '../models/application-instance.model';
 
 describe('AppDetailsCloudComponent', () => {
     let component: AppDetailsCloudComponent;
@@ -29,7 +28,7 @@ describe('AppDetailsCloudComponent', () => {
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            imports: [ProcessServiceCloudTestingModule, AppListCloudModule]
+            imports: [ProcessServiceCloudTestingModule, AppDetailsCloudComponent]
         });
         fixture = TestBed.createComponent(AppDetailsCloudComponent);
         component = fixture.componentInstance;

lib/process-services-cloud/src/lib/app/components/app-details-cloud/app-details-cloud.component.stories.ts

@@ -17,9 +17,8 @@
 
 import { applicationConfig, Meta, moduleMetadata, StoryFn } from '@storybook/angular';
 import { AppDetailsCloudComponent } from './app-details-cloud.component';
-import { ProcessServicesCloudStoryModule } from '../../testing/process-services-cloud-story.module';
+import { ProcessServicesCloudStoryModule } from '../../../testing/process-services-cloud-story.module';
-import { AppListCloudModule } from '../app-list-cloud.module';
+import { fakeApplicationInstance } from '../../mock/app-model.mock';
-import { fakeApplicationInstance } from '../mock/app-model.mock';
 import { importProvidersFrom } from '@angular/core';
 
 export default {
@@ -27,7 +26,7 @@ export default {
     title: 'Process Services Cloud/App List Cloud/App Details Cloud',
     decorators: [
         moduleMetadata({
-            imports: [AppListCloudModule]
+            imports: [AppDetailsCloudComponent]
         }),
         applicationConfig({
             providers: [importProvidersFrom(ProcessServicesCloudStoryModule)]

lib/process-services-cloud/src/lib/app/components/app-details-cloud/app-details-cloud.component.ts

@@ -0,0 +1,66 @@
+/*!
+ * @license
+ * Copyright © 2005-2024 Hyland Software, Inc. and its affiliates. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, Input, Output, EventEmitter, ViewEncapsulation } from '@angular/core';
+import { ApplicationInstanceModel, DEFAULT_APP_INSTANCE_ICON, DEFAULT_APP_INSTANCE_THEME } from '../../models/application-instance.model';
+import { CommonModule } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { MatIconModule } from '@angular/material/icon';
+import { MatCardModule } from '@angular/material/card';
+
+@Component({
+    selector: 'adf-cloud-app-details',
+    standalone: true,
+    imports: [CommonModule, TranslateModule, MatIconModule, MatCardModule],
+    templateUrl: './app-details-cloud.component.html',
+    styleUrls: ['./app-details-cloud.component.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class AppDetailsCloudComponent {
+    @Input()
+    applicationInstance: ApplicationInstanceModel;
+
+    @Output()
+    selectedApp = new EventEmitter<ApplicationInstanceModel>();
+
+    /**
+     * Pass the selected app as next
+     *
+     * @param app application model
+     */
+    onSelectApp(app: ApplicationInstanceModel): void {
+        this.selectedApp.emit(app);
+    }
+
+    /**
+     * Get application instance theme
+     *
+     * @returns the name of the theme
+     */
+    getTheme(): string {
+        return this.applicationInstance.theme || DEFAULT_APP_INSTANCE_THEME;
+    }
+
+    /**
+     * Get application instance icon
+     *
+     * @returns the name of the icon
+     */
+    getIcon(): string {
+        return this.applicationInstance.icon || DEFAULT_APP_INSTANCE_ICON;
+    }
+}

lib/process-services-cloud/src/lib/app/components/app-list-cloud/app-list-cloud.component.spec.ts

@@ -19,10 +19,12 @@ import { Component } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { AlfrescoApiService } from '@alfresco/adf-content-services';
 import { of, throwError } from 'rxjs';
-import { fakeApplicationInstance } from '../mock/app-model.mock';
+import { fakeApplicationInstance } from '../../mock/app-model.mock';
 import { AppListCloudComponent, LAYOUT_GRID, LAYOUT_LIST } from './app-list-cloud.component';
-import { AppsProcessCloudService } from '../services/apps-process-cloud.service';
+import { AppsProcessCloudService } from '../../services/apps-process-cloud.service';
-import { ProcessServiceCloudTestingModule } from '../../testing/process-service-cloud.testing.module';
+import { ProcessServiceCloudTestingModule } from '../../../testing/process-service-cloud.testing.module';
+import { MatIconModule } from '@angular/material/icon';
+import { CustomEmptyContentTemplateDirective } from '@alfresco/adf-core';
 
 describe('AppListCloudComponent', () => {
     let component: AppListCloudComponent;
@@ -40,6 +42,8 @@ describe('AppListCloudComponent', () => {
     };
 
     @Component({
+        standalone: true,
+        imports: [MatIconModule, CustomEmptyContentTemplateDirective, AppListCloudComponent],
         template: `
             <adf-cloud-app-list>
                 <adf-custom-empty-content-template>
@@ -53,8 +57,7 @@ describe('AppListCloudComponent', () => {
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            imports: [ProcessServiceCloudTestingModule],
+            imports: [ProcessServiceCloudTestingModule, AppListCloudComponent, CustomEmptyAppListCloudTemplateComponent]
-            declarations: [CustomEmptyAppListCloudTemplateComponent]
         });
         fixture = TestBed.createComponent(AppListCloudComponent);
         component = fixture.componentInstance;

lib/process-services-cloud/src/lib/app/components/app-list-cloud/app-list-cloud.component.stories.ts

@@ -16,8 +16,7 @@
  */
 
 import { applicationConfig, Meta, moduleMetadata, StoryFn } from '@storybook/angular';
-import { ProcessServicesCloudStoryModule } from '../../testing/process-services-cloud-story.module';
+import { ProcessServicesCloudStoryModule } from '../../../testing/process-services-cloud-story.module';
-import { AppListCloudModule } from '../app-list-cloud.module';
 import { AppListCloudComponent } from './app-list-cloud.component';
 import { importProvidersFrom } from '@angular/core';
 
@@ -26,7 +25,7 @@ export default {
     title: 'Process Services Cloud/App List Cloud/App List Cloud',
     decorators: [
         moduleMetadata({
-            imports: [AppListCloudModule]
+            imports: [AppListCloudComponent]
         }),
         applicationConfig({
             providers: [importProvidersFrom(ProcessServicesCloudStoryModule)]

lib/process-services-cloud/src/lib/app/components/app-list-cloud/app-list-cloud.component.ts

@@ -15,12 +15,19 @@
  * limitations under the License.
  */
 
-import { CustomEmptyContentTemplateDirective } from '@alfresco/adf-core';
+import { CustomEmptyContentTemplateDirective, EmptyContentComponent } from '@alfresco/adf-core';
 import { AfterContentInit, Component, ContentChild, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
 import { Observable, of, Subject } from 'rxjs';
-import { AppsProcessCloudService } from '../services/apps-process-cloud.service';
+import { AppsProcessCloudService } from '../../services/apps-process-cloud.service';
-import { ApplicationInstanceModel } from '../models/application-instance.model';
+import { ApplicationInstanceModel } from '../../models/application-instance.model';
 import { catchError } from 'rxjs/operators';
+import { CommonModule } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { AppDetailsCloudComponent } from '../app-details-cloud/app-details-cloud.component';
+import { MatIconModule } from '@angular/material/icon';
+import { MatLineModule } from '@angular/material/core';
+import { MatListModule } from '@angular/material/list';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 
 export const LAYOUT_LIST: string = 'LIST';
 export const LAYOUT_GRID: string = 'GRID';
@@ -28,6 +35,17 @@ export const DEPLOYED_STATUS: string = 'DEPLOYED';
 
 @Component({
     selector: 'adf-cloud-app-list',
+    standalone: true,
+    imports: [
+        CommonModule,
+        TranslateModule,
+        AppDetailsCloudComponent,
+        MatIconModule,
+        MatLineModule,
+        MatListModule,
+        EmptyContentComponent,
+        MatProgressSpinnerModule
+    ],
     templateUrl: './app-list-cloud.component.html',
     styleUrls: ['./app-list-cloud.component.scss'],
     encapsulation: ViewEncapsulation.None

lib/process-services-cloud/src/lib/app/public-api.ts

@@ -15,8 +15,8 @@
  * limitations under the License.
  */
 
-export * from './components/app-list-cloud.component';
+export * from './components/app-list-cloud/app-list-cloud.component';
-export * from './components/app-details-cloud.component';
+export * from './components/app-details-cloud/app-details-cloud.component';
 export * from './services/apps-process-cloud.service';
 export * from './models/application-instance.model';
 export * from './app-list-cloud.module';

lib/process-services-cloud/src/lib/process/process-header/process-header-cloud.module.spec.ts

@@ -1,30 +0,0 @@
-/*!
- * @license
- * Copyright © 2005-2024 Hyland Software, Inc. and its affiliates. All rights reserved.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { ProcessHeaderCloudModule } from './process-header-cloud.module';
-
-describe('ProcessHeaderCloudModule', () => {
-  let processHeaderCloudModule: ProcessHeaderCloudModule;
-
-  beforeEach(() => {
-    processHeaderCloudModule = new ProcessHeaderCloudModule();
-  });
-
-  it('should create an instance', () => {
-    expect(processHeaderCloudModule).toBeTruthy();
-  });
-});

lib/process-services-cloud/src/lib/task/task-header/task-header-cloud.module.spec.ts

@@ -1,30 +0,0 @@
-/*!
- * @license
- * Copyright © 2005-2024 Hyland Software, Inc. and its affiliates. All rights reserved.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { TaskHeaderCloudModule } from './task-header-cloud.module';
-
-describe('TaskHeaderCloudModule', () => {
-  let taskHeaderCloudModule: TaskHeaderCloudModule;
-
-  beforeEach(() => {
-    taskHeaderCloudModule = new TaskHeaderCloudModule();
-  });
-
-  it('should create an instance', () => {
-    expect(taskHeaderCloudModule).toBeTruthy();
-  });
-});