inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-10-01 14:41:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ACS-10117] Deprecate ADF Storybook and custom Docker builds (#11207)

Browse Source
This commit is contained in:
dominikiwanekhyland
2025-09-18 15:13:01 +02:00
committed by GitHub
parent 4964ae94c5
commit 591934db0e
133 changed files with 2860 additions and 12298 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.eslintignore
View File

@@ -9,5 +9,4 @@ scripts
/angular.json
docs/**/*.md
lib/js-api/docs/**/*.md
.storybook
webpack.config.js

4
.eslintrc.js
View File

@@ -216,7 +216,5 @@ module.exports = {
'comma-dangle': ['error', 'never']
}
}
],
extends: ['plugin:storybook/recommended']
]
};

9
.storybook/alfrescoTheme.js
View File

@@ -1,9 +0,0 @@
import { create } from '@storybook/theming';
import alfrescoLogo from '../lib/core/src/lib/assets/images/alfresco-logo.svg';
export default create({
base: 'light',
brandTitle: 'Hyland | Alfresco Storybook App',
brandUrl: 'https://www.alfresco.com/',
brandImage: alfrescoLogo,
});

10
.storybook/main.js
View File

@@ -1,10 +0,0 @@
module.exports = {
framework: {
name: '@storybook/angular',
options: {}
},
staticDirs: [],
docs: {},
stories: [],
addons: ['@chromatic-com/storybook']
};

5
.storybook/preview.js
View File

@@ -1,5 +0,0 @@
export const parameters = {
docs: { inlineStories: true },
controls: { expanded: true }
};
export const tags = ['autodocs', 'autodocs', 'autodocs'];

10
.storybook/tsconfig.json
View File

@@ -1,10 +0,0 @@
{
"extends": "../tsconfig.json",
"exclude": [
"../**/*.spec.js",
"../**/*.spec.ts",
"../**/*.spec.tsx",
"../**/*.spec.jsx"
],
"include": ["../**/*"]
}

2
ALFRESCOCORS.md
View File

@@ -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).
## Configure nginx proxy

1
README.md
View File

@@ -35,7 +35,6 @@ ADF Libraries list:
- [Insights](https://github.com/Alfresco/alfresco-ng2-components/tree/develop/lib/insights)
- [Process Service Cloud](https://github.com/Alfresco/alfresco-ng2-components/tree/develop/lib/process-services-cloud)
- [Process service](https://github.com/Alfresco/alfresco-ng2-components/tree/develop/lib/process-services)
- [Stories](https://github.com/Alfresco/alfresco-ng2-components/tree/develop/lib/stories)
## Browser Support

7
docs/core/services/login-dialog.service.md
View File

@@ -19,13 +19,6 @@ Manages login dialogs.
- **close**(): `<void>`<br/>
Closes the currently open login dialog.
## Details
Use the methods of this service to manage login dialogs from code. As an alternative, you may
find it easier to use the [Login dialog component](../components/login-dialog.component.md) to display the
dialog directly from HTML.
## See also
- [Login dialog component](../components/login-dialog.component.md)
- [Login component](../components/login.component.md)

3
lib/.gitignore vendored
View File

@@ -7,7 +7,6 @@ coverage
dist
content-services/**/*.js
!content-services/.storybook/*.js
!content-services/karma.conf.js
content-services/**/*.js.map
content-services/**/*.d.ts
@@ -18,7 +17,6 @@ process-services/**/*.js.map
process-services/**/*.d.ts
core/**/*.js
!core/.storybook/*.js
!core/karma.conf.js
core/**/*.js.map
core/**/*.d.ts
@@ -29,7 +27,6 @@ insights/**/*.js.map
insights/**/*.d.ts
process-services-cloud/**/*.js
!process-services-cloud/.storybook/*.js
!process-services-cloud/karma.conf.js
process-services-cloud/**/*.js.map
process-services-cloud/**/*.d.ts

1
lib/content-services/.eslintignore
View File

@@ -1,2 +1 @@
.storybook
coverage

21
lib/content-services/.storybook/main.js
View File

@@ -1,21 +0,0 @@
var rootPath = require('../../../.storybook/main');
module.exports = {
rootMain: rootPath,
stories: [...rootPath.stories, '../**/*.stories.@(js|jsx|ts|tsx)'],
staticDirs: [
...rootPath.staticDirs,
{ from: __dirname + '/../src/lib/i18n', to: 'assets/adf-core/i18n' },
{ from: __dirname + '/../src/lib/assets/images', to: 'assets/images' }
],
addons: ['@storybook/addon-essentials', ...rootPath.addons],
framework: {
name: '@storybook/angular',
options: {}
},
docs: {}
};

6
lib/content-services/.storybook/manager.js
View File

@@ -1,6 +0,0 @@
import { addons } from '@storybook/manager-api';
import alfrescoTheme from '../../../.storybook/alfrescoTheme';
addons.setConfig({
theme: alfrescoTheme
});

5
lib/content-services/.storybook/preview.js
View File

@@ -1,5 +0,0 @@
export const parameters = {
docs: { inlineStories: true },
controls: { expanded: true }
};
export const tags = ['autodocs', 'autodocs'];

10
lib/content-services/.storybook/tsconfig.json
View File

@@ -1,10 +0,0 @@
{
"extends": "../../../tsconfig.json",
"compilerOptions": {
"emitDecoratorMetadata": true
},
"exclude": ["../**/*.spec.ts" ],
"include": ["../src/**/*", "*.js"]
}

16
lib/content-services/README.md
View File

@@ -9,7 +9,6 @@ Contains a variety of components, directives and services used throughout ADF
- [Documentation](#documentation)
- [Prerequisites](#prerequisites)
- [Install](#install)
- [Storybook](#storybook)
- [License](#license)
<!-- tocstop -->
@@ -34,21 +33,6 @@ necessary configuration, see this [page](https://github.com/Alfresco/alfresco-ng
npm install @alfresco/adf-content-services
```
## Storybook
In case you would like to aggregate all the stories from content services library use
```
nx run content-services:storybook
```
And navigate to `http://localhost:4400/`.
To create a Storybook content services library build use
```
nx run content-services:build-storybook
```
## License
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)

61
lib/content-services/src/lib/dialogs/download-zip/download-zip.dialog.stories.component.ts
View File

@@ -1,61 +0,0 @@
/*!
* @license
* Copyright © 2005-2025 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, OnInit, OnChanges } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { DownloadZipDialogComponent } from './download-zip.dialog';
import { zipNode, downloadEntry } from './mock/download-zip-data.mock';
import { FileDownloadStatus } from '@alfresco/js-api';
import { MatButtonModule } from '@angular/material/button';
@Component({
selector: 'adf-download-zip-dialog-storybook',
template: `<button mat-raised-button (click)="openDialog()">Open dialog</button>`,
standalone: true,
imports: [MatButtonModule]
})
export class DownloadZipDialogStorybookComponent implements OnInit, OnChanges {
@Input()
showLoading: boolean;
constructor(private dialog: MatDialog) {}
ngOnInit(): void {
this.setEntryStatus(this.showLoading);
}
ngOnChanges(): void {
this.setEntryStatus(this.showLoading);
}
setEntryStatus(isLoading: boolean) {
if (!isLoading) {
downloadEntry.entry.status = FileDownloadStatus.DONE;
} else {
downloadEntry.entry.status = FileDownloadStatus.IN_PROGRESS;
}
}
openDialog() {
this.dialog.open(DownloadZipDialogComponent, {
minWidth: '50%',
data: {
nodeIds: [zipNode.entry.id]
}
});
}
}

84
lib/content-services/src/lib/dialogs/download-zip/download-zip.dialog.stories.ts
View File

@@ -1,84 +0,0 @@
/*!
* @license
* Copyright © 2005-2025 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 { applicationConfig, Meta, moduleMetadata, StoryFn } from '@storybook/angular';
import { MatButtonModule } from '@angular/material/button';
import { DownloadZipDialogStorybookComponent } from './download-zip.dialog.stories.component';
import { AlfrescoApiServiceMock, ContentApiMock, DownloadZipMockService, NodesApiMock } from './mock/download-zip-service.mock';
import { DownloadZipService } from './services/download-zip.service';
import { ContentService } from '../../common/services/content.service';
import { NodesApiService } from '../../common/services/nodes-api.service';
import { MatDialogModule } from '@angular/material/dialog';
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { importProvidersFrom } from '@angular/core';
import { CoreStoryModule } from '../../../../../core/src/public-api';
import { AlfrescoApiService } from '../../services';
export default {
component: DownloadZipDialogStorybookComponent,
title: 'Core/Dialog/Download ZIP Dialog',
decorators: [
moduleMetadata({
imports: [MatButtonModule, MatDialogModule, HttpClientTestingModule, DownloadZipDialogStorybookComponent],
providers: [
{
provide: AlfrescoApiService,
useClass: AlfrescoApiServiceMock
},
{
provide: DownloadZipService,
useClass: DownloadZipMockService
},
{
provide: ContentService,
useClass: ContentApiMock
},
{
provide: NodesApiService,
useClass: NodesApiMock
}
]
}),
applicationConfig({
providers: [importProvidersFrom(CoreStoryModule)]
})
],
argTypes: {
showLoading: {
control: {
type: 'boolean'
},
table: {
category: 'Story controls',
type: {
summary: 'boolean'
},
defaultValue: {
summary: 'false'
}
}
}
},
args: {
showLoading: false
}
} as Meta<DownloadZipDialogStorybookComponent>;
export const DownloadZIPDialog: StoryFn<DownloadZipDialogStorybookComponent> = (args) => ({
props: args
});
DownloadZIPDialog.parameters = { layout: 'centered' };

33
lib/content-services/src/lib/dialogs/download-zip/mock/download-zip-data.mock.ts
View File

@@ -1,33 +0,0 @@
/*!
* @license
* Copyright © 2005-2025 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 { DownloadEntry } from '@alfresco/js-api';
export const zipNode = {
entry: {
name: 'files.zip',
contentUrl: './assets/files.zip',
id: 'files_in_zip'
}
};
export const downloadEntry: DownloadEntry = {
entry: {
id: 'entryId',
status: 'DONE'
}
};

93
lib/content-services/src/lib/dialogs/download-zip/mock/download-zip-service.mock.ts
View File

@@ -1,93 +0,0 @@
/*!
* @license
* Copyright © 2005-2025 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 { DownloadBodyCreate, DownloadEntry, DownloadsApi, Node } from '@alfresco/js-api';
import { from, Observable, of, ReplaySubject, Subject } from 'rxjs';
import { catchError } from 'rxjs/internal/operators/catchError';
import { zipNode, downloadEntry } from './download-zip-data.mock';
export class AlfrescoApiServiceMock {
nodeUpdated = new Subject<Node>();
alfrescoApiInitialized = new ReplaySubject<boolean>(1);
alfrescoApi = new AlfrescoApiMock();
load() {}
getInstance = () => this.alfrescoApi;
}
class AlfrescoApiMock {
core = new CoreMock();
content = new ContentApiMock();
isOauthConfiguration = () => true;
isLoggedIn = () => true;
isEcmConfiguration = () => true;
}
export class ContentApiMock {
getContentUrl = (): string => zipNode.entry.contentUrl;
}
class CoreMock {
downloadsApi = new DownloadsApiMock();
nodesApi = new NodesApiMock();
}
export class NodesApiMock {
getNode = (): any => of(zipNode.entry);
}
class DownloadsApiMock extends DownloadsApi {
createDownload = (): Promise<DownloadEntry> => Promise.resolve(downloadEntry);
getDownload = (): Promise<DownloadEntry> => Promise.resolve(downloadEntry);
cancelDownload = () => Promise.resolve(true);
}
export class DownloadZipMockService {
private _downloadsApi: DownloadsApi;
get downloadsApi(): DownloadsApi {
this._downloadsApi = this._downloadsApi ?? new DownloadsApiMock();
return this._downloadsApi;
}
createDownload(payload: DownloadBodyCreate): Observable<DownloadEntry> {
return from(this.downloadsApi.createDownload(payload)).pipe(catchError((err) => of(err)));
}
getDownload(downloadId: string): Observable<DownloadEntry> {
return from(this.downloadsApi.getDownload(downloadId));
}
cancelDownload(downloadId: string) {
this.downloadsApi.cancelDownload(downloadId);
}
download(url: string, fileName: string) {
if (url && fileName) {
const link = document.createElement('a');
link.style.display = 'none';
link.download = fileName;
link.href = url;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
}
}

121
lib/content-services/src/lib/node-comments/mocks/node-comments.mock.ts
View File

@@ -15,9 +15,7 @@
* limitations under the License.
*/
import { CommentModel, User } from '@alfresco/adf-core';
import { EcmCompanyModel } from '../../common/models/ecm-company.model';
import { EcmUserModel } from '../../common/models/ecm-user.model';
import { User } from '@alfresco/adf-core';
export const fakeUser1 = new User({
enabled: true,
@@ -90,120 +88,3 @@ export const fakeContentComment = {
content: 'fake-comment-message'
}
};
const fakeCompany: EcmCompanyModel = {
organization: '',
address1: '',
address2: '',
address3: '',
postcode: '',
telephone: '',
fax: '',
email: ''
};
const johnDoe: EcmUserModel = {
id: '1',
email: 'john.doe@alfresco.com',
firstName: 'John',
lastName: 'Doe',
company: fakeCompany,
enabled: true,
isAdmin: undefined,
avatarId: '001'
};
const janeEod: EcmUserModel = {
id: '2',
email: 'jane.eod@alfresco.com',
firstName: 'Jane',
lastName: 'Eod',
company: fakeCompany,
enabled: true,
isAdmin: undefined
};
const robertSmith: EcmUserModel = {
id: '3',
email: 'robert.smith@alfresco.com',
firstName: 'Robert',
lastName: 'Smith',
company: fakeCompany,
enabled: true,
isAdmin: undefined
};
export const testUser: EcmUserModel = {
id: '44',
email: 'test.user@hyland.com',
firstName: 'Test',
lastName: 'User',
company: fakeCompany,
enabled: true,
isAdmin: undefined,
avatarId: '044'
};
export const getDateXMinutesAgo = (minutes: number) => new Date(new Date().getTime() - minutes * 60000);
export const commentsNodeData: CommentModel[] = [
new CommentModel({
id: 1,
message: `I've done this component, is it cool?`,
created: getDateXMinutesAgo(30),
createdBy: new User(johnDoe),
isSelected: false
}),
new CommentModel({
id: 2,
message: 'Yeah',
created: getDateXMinutesAgo(15),
createdBy: new User(janeEod),
isSelected: false
}),
new CommentModel({
id: 3,
message: '+1',
created: getDateXMinutesAgo(12),
createdBy: new User(robertSmith),
isSelected: false
}),
new CommentModel({
id: 4,
message: 'ty',
created: new Date(),
createdBy: new User(johnDoe),
isSelected: false
})
];
export const commentsTaskData: CommentModel[] = [
new CommentModel({
id: 1,
message: `I've done this task, what's next?`,
created: getDateXMinutesAgo(30),
createdBy: new User(johnDoe),
isSelected: false
}),
new CommentModel({
id: 2,
message: `I've assigned you another one 🤠`,
created: getDateXMinutesAgo(15),
createdBy: new User(janeEod),
isSelected: false
}),
new CommentModel({
id: 3,
message: '+1',
created: getDateXMinutesAgo(12),
createdBy: new User(robertSmith),
isSelected: false
}),
new CommentModel({
id: 4,
message: 'Cheers',
created: new Date(),
createdBy: new User(johnDoe),
isSelected: false
})
];

1
lib/core/.eslintignore
View File

@@ -1,2 +1 @@
.storybook
coverage

22
lib/core/.storybook/main.js
View File

@@ -1,22 +0,0 @@
const rootMain = require('../../../.storybook/main');
module.exports = {
...rootMain,
core: { ...rootMain.core, builder: 'webpack5' },
stories: [...rootMain.stories, '../**/*.stories.@(js|jsx|ts|tsx)'],
framework: {
name: "@storybook/angular",
options: (()=>console.log('loaded config!'))()
},
staticDirs: [
...rootMain.staticDirs,
{ from: __dirname + '/../src/lib/i18n', to: 'assets/adf-core/i18n' },
{ from: __dirname + '/../src/lib/assets/images', to: 'assets/images' }
],
addons: ['@storybook/addon-essentials', ...rootMain.addons],
docs: {}
};

6
lib/core/.storybook/manager.js
View File

@@ -1,6 +0,0 @@
import { addons } from '@storybook/manager-api';
import alfrescoTheme from '../../../.storybook/alfrescoTheme';
addons.setConfig({
theme: alfrescoTheme
});

6
lib/core/.storybook/preview.js
View File

@@ -1,6 +0,0 @@
const rootPreview = require('../../../.storybook/preview');
export const parameters = {
...rootPreview.preview
};
export const tags = ['autodocs', 'autodocs'];

10
lib/core/.storybook/tsconfig.json
View File

@@ -1,10 +0,0 @@
{
"extends": "../../../tsconfig.json",
"compilerOptions": {
"emitDecoratorMetadata": true
},
"exclude": ["../**/*.spec.ts" ],
"include": ["../**/*.ts", "*.js", "main.js"]
}

16
lib/core/README.md
View File

@@ -9,7 +9,6 @@ Contains a variety of components, directives and services used throughout ADF
- [Documentation](#documentation)
- [Prerequisites](#prerequisites)
- [Install](#install)
- [Storybook](#storybook)
- [License](#license)
<!-- tocstop -->
@@ -34,21 +33,6 @@ necessary configuration, see this [page](https://github.com/Alfresco/alfresco-ng
npm install @alfresco/adf-core
```
## Storybook
In case you would like to aggregate all the stories from core library use
```
nx run core:storybook
```
And navigate to `http://localhost:4400/`.
To create a Storybook core library build use
```
nx run core:build-storybook
```
## License
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)

79
lib/core/breadcrumbs/src/_stories/breadcrumb.stories.ts
View File

@@ -1,79 +0,0 @@
/*!
* @license
* Copyright © 2005-2025 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 { applicationConfig, Meta, moduleMetadata, StoryFn } from '@storybook/angular';
import { MatButtonModule } from '@angular/material/button';
import { MatMenuModule } from '@angular/material/menu';
import { MatIconModule } from '@angular/material/icon';
import { BreadcrumbComponent } from '../components/breadcrumb/breadcrumb.component';
import { BreadcrumbItemComponent } from '../components/breadcrumb-item/breadcrumb-item.component';
import { DemoBreadcrumbComponent } from './demo-breadcrumb.component';
import { importProvidersFrom } from '@angular/core';
import { CoreStoryModule } from '../../..';
// https://stackoverflow.com/a/58210459/8820824
type NonFunctionPropertyNames<T> = { [K in keyof T]: T[K] extends () => any ? never : K }[keyof T];
type NonFunctionProperties<T> = Pick<T, NonFunctionPropertyNames<T>>;
type StoryWithoutFunction<T> = NonFunctionProperties<StoryFn<T>>;
/**
* Copy storybook story
*
* @param story story
* @param annotations annotations
* @returns a copy of the story
*/
function storybookCopyStory<T>(story: StoryFn<T>, annotations?: StoryWithoutFunction<T>): StoryFn<T> {
const cloned = story.bind({});
return Object.assign(cloned, annotations);
}
const meta: Meta = {
title: 'Core/Breadcrumb',
component: DemoBreadcrumbComponent,
decorators: [
moduleMetadata({
imports: [BreadcrumbComponent, BreadcrumbItemComponent, MatButtonModule, MatMenuModule, MatIconModule]
}),
applicationConfig({
providers: [importProvidersFrom(CoreStoryModule)]
})
],
args: {
compact: false,
showBreadcrumbItemWithMenu: false
},
argTypes: {
compact: { control: 'boolean' },
showBreadcrumbItemWithMenu: { control: 'boolean' }
}
};
export default meta;
export const Breadcrumb: StoryFn = (args) => ({
props: args
});
export const Compact = storybookCopyStory(Breadcrumb);
Compact.args = {
compact: true
};
export const WithMenu = storybookCopyStory(Breadcrumb);
WithMenu.args = {
showBreadcrumbItemWithMenu: true
};

71
lib/core/breadcrumbs/src/_stories/demo-breadcrumb.component.ts
View File

@@ -1,71 +0,0 @@
/*!
* @license
* Copyright © 2005-2025 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 } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatMenuModule } from '@angular/material/menu';
import { MatIconModule } from '@angular/material/icon';
import { BreadcrumbItemComponent } from '../components/breadcrumb-item/breadcrumb-item.component';
import { BreadcrumbComponent } from '../components/breadcrumb/breadcrumb.component';
import { NgIf } from '@angular/common';
@Component({
selector: 'adf-demo-breadcrumb',
template: `
<adf-breadcrumb [compact]="compact">
<adf-breadcrumb-item>
<a href="/">Home</a>
</adf-breadcrumb-item>
<adf-breadcrumb-item>
<a href="https://www.alfresco.com/">Alfresco</a>
</adf-breadcrumb-item>
<adf-breadcrumb-item>
<a href="https://www.alfresco.com">External Link 1</a>
</adf-breadcrumb-item>
<adf-breadcrumb-item>
<a href="https://www.alfresco.com/">External Link 2</a>
</adf-breadcrumb-item>
<adf-breadcrumb-item>
<a href="https://www.alfresco.com/">External Link 3</a>
</adf-breadcrumb-item>
<adf-breadcrumb-item *ngIf="showBreadcrumbItemWithMenu" aria-current="location" aria-haspopup="true">
<div>
Current Page
<button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Menu">
<mat-icon>menu_open</mat-icon>
</button>
<mat-menu #menu="matMenu">
<button mat-menu-item>Menu Item 1</button>
<button mat-menu-item>Menu Item 2</button>
</mat-menu>
</div>
</adf-breadcrumb-item>
</adf-breadcrumb>
`,
standalone: true,
imports: [MatButtonModule, MatMenuModule, MatIconModule, BreadcrumbItemComponent, BreadcrumbComponent, NgIf]
})
export class DemoBreadcrumbComponent {
compact = false;
showBreadcrumbItemWithMenu = false;
}

106
lib/core/src/lib/about/about.component.stories.ts
View File

@@ -1,106 +0,0 @@
/*!
* @license
* Copyright © 2005-2025 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 { Meta, moduleMetadata, StoryFn } from '@storybook/angular';
import { AboutComponent } from './about.component';
import { ABOUT_DIRECTIVES } from './about.module';
import { AuthenticationService } from '../auth/services/authentication.service';
import { AuthenticationMock } from '../auth/mock/authentication.service.mock';
import { AppExtensionService, ExtensionRef, ViewerExtensionRef } from '@alfresco/adf-extensions';
import { AppConfigService } from '../app-config/app-config.service';
import { AppConfigServiceMock } from '../common/mock/app-config.service.mock';
import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class AppExtensionServiceMock {
references$: Observable<ExtensionRef[]>;
private _references = new BehaviorSubject<ExtensionRef[]>([]);
constructor() {
this.references$ = this._references.asObservable();
}
getViewerExtensions(): ViewerExtensionRef[] {
return [];
}
}
export default {
component: AboutComponent,
title: 'Core/About/About',
decorators: [
moduleMetadata({
imports: [...ABOUT_DIRECTIVES],
providers: [
{ provide: AuthenticationService, useClass: AuthenticationMock },
{ provide: AppExtensionService, useClass: AppExtensionServiceMock },
{ provide: AppConfigService, useClass: AppConfigServiceMock }
]
})
],
argTypes: {
dev: {
control: 'boolean',
description: 'If active show more information about the app and the platform useful in debug.',
defaultValue: false,
table: {
type: { summary: 'boolean' },
defaultValue: { summary: 'false' }
}
},
pkg: {
control: 'object',
description: 'pkg json.',
table: {
type: { summary: 'object' }
}
},
regexp: {
control: 'text',
description: 'Regular expression for filtering dependencies packages.',
defaultValue: '^(@alfresco)',
table: {
type: { summary: 'string' },
defaultValue: { summary: '^(@alfresco)' }
}
}
}
} as Meta<AboutComponent>;
const template: StoryFn<AboutComponent> = (args) => ({
props: args
});
export const About = template.bind({});
About.args = {
pkg: {
name: 'My Storybook App',
commit: 'my-commit-value',
version: '1.0.0',
dependencies: {
'@alfresco/adf-content-services': '4.7.0',
'@alfresco/adf-core': '4.7.0',
'@alfresco/adf-extensions': '4.7.0',
'@alfresco/adf-process-services': '4.7.0',
'@alfresco/adf-process-services-cloud': '4.7.0',
'@alfresco/js-api': '4.7.0-3976'
}
}
};

57
lib/core/src/lib/auth/mock/authentication.service.mock.ts
View File

@@ -1,57 +0,0 @@
/*!
* @license
* Copyright © 2005-2025 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 { Observable, of, throwError } from 'rxjs';
import { Injectable } from '@angular/core';
import { AuthenticationService } from '../services/authentication.service';
@Injectable({
providedIn: 'root'
})
export class AuthenticationMock extends AuthenticationService {
login(username: string, password: string): Observable<{ type: string; ticket: any }> {
if (username === 'fake-username' && password === 'fake-password') {
return of({ type: 'type', ticket: 'ticket' });
}
if (username === 'fake-username-CORS-error' && password === 'fake-password') {
return throwError({
error: {
crossDomain: true,
message: 'ERROR: the network is offline, Origin is not allowed by Access-Control-Allow-Origin'
}
});
}
if (username === 'fake-username-CSRF-error' && password === 'fake-password') {
return throwError({ message: 'ERROR: Invalid CSRF-token', status: 403 });
}
if (username === 'fake-username-ECM-access-error' && password === 'fake-password') {
return throwError({
message: 'ERROR: 00170728 Access Denied. The system is currently in read-only mode',
status: 403
});
}
return throwError('Fake server error');
}
logout(): Observable<any> {
return of({});
}
}

64
lib/core/src/lib/card-view/components/card-view-arrayitem/card-view-arrayitem.component.stories.ts
View File

@@ -1,64 +0,0 @@
/*!
* @license
* Copyright © 2005-2025 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 { applicationConfig, Meta, moduleMetadata, StoryFn } from '@storybook/angular';
import { CardViewArrayItemComponent } from './card-view-arrayitem.component';
import { CoreStoryModule } from './../../../testing/core.story.module';
import { CardViewArrayItemModel, CARD_VIEW_DIRECTIVES } from '../../public-api';
import { of } from 'rxjs';
import { importProvidersFrom } from '@angular/core';
export default {
component: CardViewArrayItemComponent,
title: 'Core/Card View/Card View Array Item',
decorators: [
moduleMetadata({
imports: [...CARD_VIEW_DIRECTIVES]
}),
applicationConfig({
providers: [importProvidersFrom(CoreStoryModule)]
})
],
argTypes: {
property: {
description: 'Card View Item Model with data',
table: {
type: { summary: 'CardViewArrayItemModel' }
}
}
}
} as Meta<CardViewArrayItemComponent>;
export const CardViewArrayItem: StoryFn<CardViewArrayItemComponent> = (args) => ({
props: args
});
CardViewArrayItem.args = {
property: new CardViewArrayItemModel({
label: 'CardView Array of items',
value: of([
{ icon: 'directions_bike', value: 'Zlatan' },
{ icon: 'directions_bike', value: 'Lionel Messi' },
{ value: 'Mohamed', directions_bike: 'save' },
{ value: 'Ronaldo' }
]),
key: 'array',
icon: 'edit',
default: 'Empty',
noOfItemsToDisplay: 2
})
};
CardViewArrayItem.parameters = { layout: 'centered' };

68
lib/core/src/lib/card-view/components/card-view-boolitem/card-view-boolitem.component.stories.ts
View File

@@ -1,68 +0,0 @@
/*!
* @license
* Copyright © 2005-2025 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 { applicationConfig, Meta, moduleMetadata, StoryFn } from '@storybook/angular';
import { CardViewBoolItemComponent } from './card-view-boolitem.component';
import { CoreStoryModule } from './../../../testing/core.story.module';
import { CardViewBoolItemModel, CARD_VIEW_DIRECTIVES } from '../../public-api';
import { importProvidersFrom } from '@angular/core';
export default {
component: CardViewBoolItemComponent,
title: 'Core/Card View/Card View Bool Item',
decorators: [
moduleMetadata({
imports: [...CARD_VIEW_DIRECTIVES]
}),
applicationConfig({
providers: [importProvidersFrom(CoreStoryModule)]
})
],
argTypes: {
editable: {
control: 'boolean',
description: 'Defines if CardView item is editable',
table: {
type: { summary: 'boolean' },
defaultValue: { summary: 'false' }
}
},
property: {
description: 'Card View Item Model with data',
table: {
type: { summary: 'CardViewBoolItemModel' }
}
}
},
args: {
editable: true
}
} as Meta<CardViewBoolItemComponent>;
export const CardViewBoolItem: StoryFn<CardViewBoolItemComponent> = (args) => ({
props: args
});
CardViewBoolItem.args = {
property: new CardViewBoolItemModel({
label: 'Agree to all terms and conditions',
value: true,
key: 'boolean',
default: false,
editable: true
})
};
CardViewBoolItem.parameters = { layout: 'centered' };

132
lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.stories.ts
View File

@@ -1,132 +0,0 @@
/*!
* @license
* Copyright © 2005-2025 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 { applicationConfig, Meta, moduleMetadata, StoryFn } from '@storybook/angular';
import { CardViewDateItemComponent } from './card-view-dateitem.component';
import { CoreStoryModule } from './../../../testing/core.story.module';
import { CardViewDateItemModel, CardViewDatetimeItemModel, CARD_VIEW_DIRECTIVES } from '../../public-api';
import { importProvidersFrom } from '@angular/core';
export default {
component: CardViewDateItemComponent,
title: 'Core/Card View/Card View Date Item',
decorators: [
moduleMetadata({
imports: [...CARD_VIEW_DIRECTIVES]
}),
applicationConfig({
providers: [importProvidersFrom(CoreStoryModule)]
})
],
argTypes: {
editable: {
control: 'boolean',
description: 'Defines if CardView item is editable',
table: {
type: { summary: 'boolean' },
defaultValue: { summary: 'false' }
}
},
displayEmpty: {
control: 'boolean',
description: 'Defines if it should display CardView item when data is empty',
table: {
type: { summary: 'boolean' },
defaultValue: { summary: 'true' }
}
},
displayClearAction: {
control: 'boolean',
description: 'Defines if it should display clear input action (only with SingleValued components)',
table: {
type: { summary: 'boolean' },
defaultValue: { summary: 'true' }
}
},
property: {
description: 'Card View Item Model with data',
table: {
type: {
summary: 'CardViewDateItemModel | CardViewDatetimeItemModel'
}
}
}
},
args: {
editable: true,
displayEmpty: true,
displayClearAction: true
}
} as Meta<CardViewDateItemComponent>;
const template: StoryFn = (args) => ({
props: args
});
export const SingleValuedDateItemCardView = template.bind({});
SingleValuedDateItemCardView.args = {
property: new CardViewDateItemModel({
label: 'CardView Date Item',
value: [new Date(1983, 11, 24, 10, 0, 30)],
key: 'date',
default: new Date(1983, 11, 24, 10, 0, 30),
format: 'shortDate',
editable: true
})
};
SingleValuedDateItemCardView.parameters = { layout: 'centered' };
export const MultiValuedDateItemCardView = template.bind({});
MultiValuedDateItemCardView.args = {
property: new CardViewDateItemModel({
label: 'CardView Date Item - Multivalue (chips)',
value: [new Date(1983, 11, 24, 10, 0, 30)],
key: 'date',
default: new Date(1983, 11, 24, 10, 0, 30),
format: 'shortDate',
editable: true,
multivalued: true
})
};
MultiValuedDateItemCardView.parameters = { layout: 'centered' };
export const SingleValuedDatetimeItemCardView = template.bind({});
SingleValuedDatetimeItemCardView.args = {
property: new CardViewDatetimeItemModel({
label: 'CardView Datetime Item',
value: undefined,
key: 'datetime',
default: undefined,
format: 'short',
editable: true
})
};
SingleValuedDatetimeItemCardView.parameters = { layout: 'centered' };
export const MultiValuedDatetimeItemCardView = template.bind({});
MultiValuedDatetimeItemCardView.args = {
property: new CardViewDatetimeItemModel({
label: 'CardView Datetime Item - Multivalue (chips)',
value: undefined,
key: 'datetime',
default: undefined,
format: 'short',
editable: true,
multivalued: true
})
};
MultiValuedDatetimeItemCardView.parameters = { layout: 'centered' };

69
lib/core/src/lib/card-view/components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component.stories.ts
View File

@@ -1,69 +0,0 @@
/*!
* @license
* Copyright © 2005-2025 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 { applicationConfig, Meta, moduleMetadata, StoryFn } from '@storybook/angular';
import { CardViewKeyValuePairsItemComponent } from './card-view-keyvaluepairsitem.component';
import { CoreStoryModule } from './../../../testing/core.story.module';
import { CARD_VIEW_DIRECTIVES, CardViewKeyValuePairsItemModel } from '../../public-api';
import { importProvidersFrom } from '@angular/core';
export default {
component: CardViewKeyValuePairsItemComponent,
title: 'Core/Card View/Card View Key Value Pairs Item',
decorators: [
moduleMetadata({
imports: [CoreStoryModule, ...CARD_VIEW_DIRECTIVES]
}),
applicationConfig({
providers: [importProvidersFrom(CoreStoryModule)]
})
],
argTypes: {
editable: {
control: 'boolean',
description: 'Defines if CardView item is editable',
table: {
type: { summary: 'boolean' },
defaultValue: { summary: 'false' }
}
},
property: {
description: 'Card View Item Model with data',
table: {
type: { summary: 'CardViewKeyValuePairsItemModel' }
}
}
},
args: {
editable: true
}
} as Meta<CardViewKeyValuePairsItemComponent>;
export const CardViewKeyValuePairsItem: StoryFn<CardViewKeyValuePairsItemComponent> = (args) => ({
props: args
});
CardViewKeyValuePairsItem.args = {
property: new CardViewKeyValuePairsItemModel({
label: 'CardView Key-Value Pairs Item',
value: [
{ name: 'hey', value: 'you' },
{ name: 'hey', value: 'you' }
],
key: 'key-value-pairs',
editable: true
})
};

80
lib/core/src/lib/card-view/components/card-view-mapitem/card-view-mapitem.component.stories.ts
View File

@@ -1,80 +0,0 @@
/*!
* @license
* Copyright © 2005-2025 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 { applicationConfig, Meta, moduleMetadata, StoryFn } from '@storybook/angular';
import { CardViewMapItemComponent } from './card-view-mapitem.component';
import { CoreStoryModule } from './../../../testing/core.story.module';
import { CardViewMapItemModel, CARD_VIEW_DIRECTIVES } from '../../public-api';
import { importProvidersFrom } from '@angular/core';
export default {
component: CardViewMapItemComponent,
title: 'Core/Card View/Card View Map Item',
decorators: [
moduleMetadata({
imports: [...CARD_VIEW_DIRECTIVES]
}),
applicationConfig({
providers: [importProvidersFrom(CoreStoryModule)]
})
],
argTypes: {
displayEmpty: {
control: 'boolean',
description: 'Defines if it should display CardView item when data is empty',
table: {
type: { summary: 'boolean' },
defaultValue: { summary: 'true' }
}
},
property: {
description: 'Card View Item Model with data',
table: {
type: { summary: 'CardViewMapItemModel' }
}
}
},
args: {
displayEmpty: true
}
} as Meta<CardViewMapItemComponent>;
const template: StoryFn<CardViewMapItemComponent> = (args) => ({
props: args
});
export const CardViewMapItem = template.bind({});
CardViewMapItem.args = {
property: new CardViewMapItemModel({
label: 'My map',
value: new Map([['999', 'My Value']]),
key: 'map',
default: 'default map value'
})
};
CardViewMapItem.parameters = { layout: 'centered' };
export const EmptyCardViewMapItem = template.bind({});
EmptyCardViewMapItem.args = {
property: new CardViewMapItemModel({
label: 'My map',
value: [],
key: 'map',
default: 'default map value'
})
};
EmptyCardViewMapItem.parameters = { layout: 'centered' };

101
lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.stories.ts
View File

@@ -1,101 +0,0 @@
/*!
* @license
* Copyright © 2005-2025 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 { applicationConfig, Meta, moduleMetadata, StoryFn } from '@storybook/angular';
import { CardViewSelectItemComponent } from './card-view-selectitem.component';
import { CoreStoryModule } from './../../../testing/core.story.module';
import { CardViewSelectItemModel, CARD_VIEW_DIRECTIVES } from '../../public-api';
import { of } from 'rxjs';
import { importProvidersFrom } from '@angular/core';
export default {
component: CardViewSelectItemComponent,
title: 'Core/Card View/Card View Select Item',
decorators: [
moduleMetadata({
imports: [...CARD_VIEW_DIRECTIVES]
}),
applicationConfig({
providers: [importProvidersFrom(CoreStoryModule)]
})
],
argTypes: {
editable: {
control: 'boolean',
description: 'Defines if CardView item is editable',
table: {
type: { summary: 'boolean' },
defaultValue: { summary: 'false' }
}
},
displayNoneOption: {
control: 'boolean',
description: 'Shows None option inside select element',
table: {
type: { summary: 'boolean' },
defaultValue: { summary: 'true' }
}
},
displayEmpty: {
control: 'boolean',
description: 'Defines if it should display CardView item when data is empty',
table: {
type: { summary: 'boolean' },
defaultValue: { summary: 'true' }
}
},
options$: {
control: { disable: true },
description: 'Data displayed in select element',
table: {
type: {
summary: 'Observable<CardViewSelectItemOption<string | number>[]>'
}
}
},
property: {
description: 'Card View Item Model with data',
table: {
type: { summary: 'CardViewSelectItemModel' }
}
}
},
args: {
editable: false,
displayNoneOption: true,
displayEmpty: true
}
} as Meta<CardViewSelectItemComponent>;
const template: StoryFn<CardViewSelectItemComponent> = (args) => ({
props: args
});
export const CardViewSelectItem = template.bind({});
CardViewSelectItem.args = {
property: new CardViewSelectItemModel({
label: 'CardView Select Item',
value: 'one',
options$: of([
{ key: 'one', label: 'One' },
{ key: 'two', label: 'Two' }
]),
key: 'select',
editable: true
})
};
CardViewSelectItem.parameters = { layout: 'centered' };

173
lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.stories.ts
View File

@@ -1,173 +0,0 @@
/*!
* @license
* Copyright © 2005-2025 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 { applicationConfig, Meta, moduleMetadata, StoryFn } from '@storybook/angular';
import { CardViewTextItemComponent } from './card-view-textitem.component';
import { CoreStoryModule } from './../../../testing/core.story.module';
import { CARD_VIEW_DIRECTIVES, CardViewTextItemModel } from '../../public-api';
import { importProvidersFrom } from '@angular/core';
export default {
component: CardViewTextItemComponent,
title: 'Core/Card View/Card View Text Item',
decorators: [
moduleMetadata({
imports: [...CARD_VIEW_DIRECTIVES]
}),
applicationConfig({
providers: [importProvidersFrom(CoreStoryModule)]
})
],
argTypes: {
editable: {
control: 'boolean',
description: 'Defines if CardView item is editable',
table: {
type: { summary: 'boolean' },
defaultValue: { summary: 'false' }
}
},
displayEmpty: {
control: 'boolean',
description: 'Defines if it should display CardView item when data is empty',
table: {
type: { summary: 'boolean' },
defaultValue: { summary: 'true' }
}
},
copyToClipboardAction: {
control: 'boolean',
description: 'Copy to clipboard action - default template in editable mode',
table: {
type: { summary: 'boolean' },
defaultValue: { summary: 'true' }
}
},
useChipsForMultiValueProperty: {
control: 'boolean',
description: 'Split text for chips using defined separator',
table: {
type: { summary: 'boolean' },
defaultValue: { summary: 'true' }
}
},
multiValueSeparator: {
control: 'text',
description: 'Separator used for text splitting',
table: {
type: { summary: 'string' },
defaultValue: { summary: ', ' }
}
},
displayLabelForChips: {
control: 'boolean',
description: 'Display label for chips property',
table: {
type: { summary: 'boolean' },
defaultValue: { summary: 'false' }
}
}
},
args: {
editable: false,
displayEmpty: true,
copyToClipboardAction: true,
useChipsForMultiValueProperty: true,
multiValueSeparator: ', ',
displayLabelForChips: false
}
} as Meta<CardViewTextItemComponent>;
const template: StoryFn<CardViewTextItemComponent> = (args) => ({
props: args
});
export const ClickableCardViewTextItem = template.bind({});
ClickableCardViewTextItem.args = {
property: new CardViewTextItemModel({
label: 'CardView Text Item - Clickable template',
value: 'click here',
key: 'click',
default: 'click here',
editable: true,
clickable: true,
icon: 'close'
})
};
ClickableCardViewTextItem.parameters = { layout: 'centered' };
export const ChipsCardViewTextItem = template.bind({});
ChipsCardViewTextItem.args = {
property: new CardViewTextItemModel({
label: 'CardView Text Item - Chips template',
value: [1, 2, 3, 4],
key: 'name',
default: 'default bar',
multiline: true,
multivalued: true,
icon: 'icon',
editable: true
}),
displayLabelForChips: false
};
ChipsCardViewTextItem.parameters = { layout: 'centered' };
export const EmptyCardViewTextItem = template.bind({});
EmptyCardViewTextItem.args = {
property: new CardViewTextItemModel({
label: 'CardView Text Item - Empty template',
value: undefined,
key: 'empty',
default: '',
icon: 'icon',
editable: false
}),
editable: false,
displayEmpty: false
};
EmptyCardViewTextItem.parameters = { layout: 'centered' };
export const DefaultCardViewTextItem = template.bind({});
DefaultCardViewTextItem.args = {
property: new CardViewTextItemModel({
label: 'CardView Text Item - Default template',
value: 'input here',
key: 'default',
default: 'input here',
editable: true,
clickable: false,
icon: 'close',
multiline: false
})
};
DefaultCardViewTextItem.parameters = { layout: 'centered' };
export const DisplayLabelForChipsCardTextItem = template.bind({});
DisplayLabelForChipsCardTextItem.args = {
property: new CardViewTextItemModel({
label: 'CardView Text Item - Multi-Valued Chips template',
value: ['Chip 1', 'Chip 2', 'Chip 3'],
key: 'multivalued',
default: 'default value',
multiline: true,
multivalued: true,
icon: 'icon',
editable: true
}),
displayLabelForChips: false
};
DisplayLabelForChipsCardTextItem.parameters = { layout: 'centered' };

121
lib/core/src/lib/card-view/components/card-view/card-view.component.stories.ts
View File

@@ -1,121 +0,0 @@
/*!
* @license
* Copyright © 2005-2025 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 { applicationConfig, Meta, moduleMetadata, StoryFn } from '@storybook/angular';
import { CardViewComponent } from './card-view.component';
import { CoreStoryModule } from './../../../testing/core.story.module';
import { CARD_VIEW_DIRECTIVES } from '../../public-api';
import { cardViewDataSource, cardViewUndefinedValues } from '../../mock/card-view-content.mock';
import { importProvidersFrom } from '@angular/core';
export default {
component: CardViewComponent,
title: 'Core/Card View/Card View',
decorators: [
moduleMetadata({
imports: [CoreStoryModule, ...CARD_VIEW_DIRECTIVES]
}),
applicationConfig({
providers: [importProvidersFrom(CoreStoryModule)]
})
],
argTypes: {
editable: {
control: 'boolean',
table: {
type: { summary: 'boolean' },
defaultValue: { summary: 'true' }
}
},
displayEmpty: {
control: 'boolean',
table: {
type: { summary: 'boolean' },
defaultValue: { summary: 'true' }
}
},
displayNoneOption: {
control: 'boolean',
table: {
type: { summary: 'boolean' },
defaultValue: { summary: 'true' }
}
},
displayClearAction: {
control: 'boolean',
table: {
type: { summary: 'boolean' },
defaultValue: { summary: 'true' }
}
},
copyToClipboardAction: {
control: 'boolean',
table: {
type: { summary: 'boolean' },
defaultValue: { summary: 'true' }
}
},
useChipsForMultiValueProperty: {
control: 'boolean',
table: {
type: { summary: 'boolean' },
defaultValue: { summary: 'true' }
}
},
multiValueSeparator: {
control: 'text',
table: {
type: { summary: 'string' },
defaultValue: { summary: ', ' }
}
},
displayLabelForChips: {
control: 'boolean',
table: {
type: { summary: 'boolean' },
defaultValue: { summary: 'false' }
}
}
},
args: {
editable: true,
displayEmpty: true,
displayNoneOption: true,
displayClearAction: true,
copyToClipboardAction: true,
useChipsForMultiValueProperty: true,
multiValueSeparator: ', ',
displayLabelForChips: false
}
} as Meta<CardViewComponent>;
const template: StoryFn<CardViewComponent> = (args) => ({
props: args
});
export const DefaultCardView = template.bind({});
DefaultCardView.args = {
properties: cardViewDataSource
};
DefaultCardView.parameters = { layout: 'centered' };
export const EmptyCardView = template.bind({});
EmptyCardView.args = {
properties: cardViewUndefinedValues,
editable: false
};
EmptyCardView.parameters = { layout: 'centered' };

185
lib/core/src/lib/card-view/mock/card-view-content.mock.ts
View File

@@ -1,185 +0,0 @@
/*!
* @license
* Copyright © 2005-2025 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 {
CardViewArrayItemModel,
CardViewBoolItemModel,
CardViewDateItemModel,
CardViewDatetimeItemModel,
CardViewIntItemModel,
CardViewKeyValuePairsItemModel,
CardViewMapItemModel,
CardViewSelectItemModel,
CardViewTextItemModel
} from '../public-api';
import { of } from 'rxjs';
export const cardViewDataSource = [
new CardViewTextItemModel({
label: 'CardView Text Item - Multivalue (chips)',
value: [1, 2, 3, 4],
key: 'name',
default: 'default bar',
multiline: true,
multivalued: true,
icon: 'icon',
editable: true
}),
new CardViewDateItemModel({
label: 'CardView Date Item - Multivalue (chips)',
value: [new Date(1983, 11, 24, 10, 0, 30)],
key: 'date',
default: new Date(1983, 11, 24, 10, 0, 30),
format: 'shortDate',
editable: true,
multivalued: true
}),
new CardViewDatetimeItemModel({
label: 'CardView Datetime Item - Multivalue (chips)',
value: [new Date(1983, 11, 24, 10, 0, 0)],
key: 'datetime',
default: new Date(1983, 11, 24, 10, 0, 0),
format: 'short',
editable: true,
multivalued: true
}),
new CardViewBoolItemModel({
label: 'Agree to all terms and conditions',
value: true,
key: 'boolean',
default: false,
editable: true
}),
new CardViewIntItemModel({
label: 'CardView Int Item',
value: 213,
key: 'int',
default: 1,
editable: true
}),
new CardViewKeyValuePairsItemModel({
label: 'CardView Key-Value Pairs Item',
value: [
{ name: 'hey', value: 'you' },
{ name: 'hey', value: 'you' }
],
key: 'key-value-pairs',
editable: true
}),
new CardViewSelectItemModel({
label: 'CardView Select Item',
value: 'one',
options$: of([
{ key: 'one', label: 'One' },
{ key: 'two', label: 'Two' }
]),
key: 'select',
editable: true
}),
new CardViewMapItemModel({
label: 'My map',
value: new Map([['999', 'My Value']]),
key: 'map',
default: 'default map value'
}),
new CardViewTextItemModel({
label: 'This is clickable ',
value: 'click here',
key: 'click',
default: 'click here',
editable: true,
clickable: true,
icon: 'close'
}),
new CardViewArrayItemModel({
label: 'CardView Array of items',
value: of([
{ icon: 'directions_bike', value: 'Zlatan' },
{ icon: 'directions_bike', value: 'Lionel Messi' },
{ value: 'Mohamed', directions_bike: 'save' },
{ value: 'Ronaldo' }
]),
key: 'array',
icon: 'edit',
default: 'Empty',
noOfItemsToDisplay: 2,
editable: true
})
];
export const cardViewUndefinedValues = [
new CardViewTextItemModel({
label: 'CardView Text Item - Multivalue (chips)',
value: undefined,
key: 'name',
default: undefined,
multiline: true,
multivalued: true,
icon: 'icon',
editable: true
}),
new CardViewDateItemModel({
label: 'CardView Date Item - Multivalue (chips)',
value: undefined,
key: 'date',
default: undefined,
format: 'shortDate',
editable: true,
multivalued: true
}),
new CardViewDatetimeItemModel({
label: 'CardView Datetime Item - Multivalue (chips)',
value: undefined,
key: 'datetime',
default: undefined,
format: 'short',
editable: true,
multivalued: true
}),
new CardViewIntItemModel({
label: 'CardView Int Item',
value: undefined,
key: 'int',
default: undefined,
editable: true
}),
new CardViewSelectItemModel({
label: 'CardView Select Item',
value: undefined,
options$: of([
{ key: 'one', label: 'One' },
{ key: 'two', label: 'Two' }
]),
key: 'select',
editable: true
}),
new CardViewMapItemModel({
label: 'My map',
value: undefined,
key: 'map',
default: undefined
}),
new CardViewTextItemModel({
label: 'This is clickable ',
value: undefined,
key: 'click',
default: undefined,
editable: true,
clickable: true,
icon: 'close'
})
];

80
lib/core/src/lib/comments/comment-list/comment-list.component.stories.ts
View File

@@ -1,80 +0,0 @@
/*!
* @license
* Copyright © 2005-2025 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 { applicationConfig, Meta, moduleMetadata, StoryFn } from '@storybook/angular';
import { CoreStoryModule } from '../../testing/core.story.module';
import { CommentListComponent } from './comment-list.component';
import { commentsTaskData, commentsNodeData } from '../mocks/comments.stories.mock';
import { CommentListServiceMock } from './mocks/comment-list.service.mock';
import { importProvidersFrom } from '@angular/core';
import { CommentsServiceStoriesMock } from '../mocks/comments.service.stories.mock';
import { ADF_COMMENTS_SERVICE } from '../interfaces/comments.token';
export default {
component: CommentListComponent,
title: 'Core/Comments/Comment List',
decorators: [
moduleMetadata({
imports: [CommentListComponent],
providers: [
{ provide: CommentListServiceMock, useValue: { getUserProfileImage: () => '../assets/images/logo.png' } },
{ provide: ADF_COMMENTS_SERVICE, useClass: CommentsServiceStoriesMock }
]
}),
applicationConfig({
providers: [importProvidersFrom(CoreStoryModule)]
})
],
parameters: {
docs: {
description: {
component: 'Displays a list of comments from users involved in a specified task or node'
}
}
},
argTypes: {
comments: {
control: 'object',
description: 'CommentModel array',
table: {
type: { summary: 'CommentModel[]' }
}
},
clickRow: {
action: 'clickRow',
description: 'Emitted when the user clicks on one of the comment rows',
table: {
category: 'Actions',
type: { summary: 'EventEmitter <CommentModel>' }
}
}
}
} as Meta<CommentListComponent>;
const template: StoryFn<CommentListComponent> = (args) => ({
props: args
});
export const TaskBased = template.bind({});
TaskBased.args = {
comments: commentsTaskData
};
export const NodeBased = template.bind({});
NodeBased.args = {
comments: commentsNodeData
};

108
lib/core/src/lib/comments/comments.component.stories.ts
View File

@@ -1,108 +0,0 @@
/*!
* @license
* Copyright © 2005-2025 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 { applicationConfig, Meta, moduleMetadata, StoryFn } from '@storybook/angular';
import { CoreStoryModule } from '../testing/core.story.module';
import { CommentsComponent } from './comments.component';
import { ADF_COMMENTS_SERVICE } from './interfaces/comments.token';
import { commentsStoriesData } from './mocks/comments.stories.mock';
import { CommentsServiceStoriesMock } from './mocks/comments.service.stories.mock';
import { importProvidersFrom } from '@angular/core';
export default {
component: CommentsComponent,
title: 'Core/Comments/Comment',
decorators: [
moduleMetadata({
imports: [CommentsComponent],
providers: [
{ provide: CommentsServiceStoriesMock, useValue: { getUserProfileImage: () => '../assets/images/logo.png' } },
{ provide: ADF_COMMENTS_SERVICE, useClass: CommentsServiceStoriesMock }
]
}),
applicationConfig({
providers: [importProvidersFrom(CoreStoryModule)]
})
],
parameters: {
docs: {
description: {
component: `Displays comments from users involved in a specified environment.
Allows an involved user to add a comment to a environment.`
}
}
},
argTypes: {
comments: {
control: 'object',
description: 'CommentModel array',
table: { type: { summary: 'CommentModel[]' } }
},
readOnly: {
control: 'boolean',
description: 'Displays input area to add new comment',
defaultValue: false,
table: {
type: { summary: 'boolean' },
defaultValue: { summary: 'false' }
}
},
id: {
control: 'text',
description: 'Necessary in order to add a new comment',
table: {
type: { summary: 'string' }
}
},
error: {
action: 'error',
description: 'Emitted when an error occurs while displaying/adding a comment',
table: {
category: 'Actions',
type: { summary: 'EventEmitter <any>' }
}
}
}
} as Meta<CommentsComponent>;
const template: StoryFn<CommentsComponent> = (args) => ({
props: args
});
export const SingleCommentWithAvatar = template.bind({});
SingleCommentWithAvatar.args = {
comments: [commentsStoriesData[0]],
readOnly: true
};
export const SingleCommentWithoutAvatar = template.bind({});
SingleCommentWithoutAvatar.args = {
comments: [commentsStoriesData[1]],
readOnly: true
};
export const NoComments = template.bind({});
NoComments.args = {
comments: [],
readOnly: true
};
export const Comments = template.bind({});
Comments.args = {
comments: commentsStoriesData,
id: '-fake-'
};

77
lib/core/src/lib/comments/mocks/comments.service.stories.mock.ts
View File

@@ -1,77 +0,0 @@
/*!
* @license
* Copyright © 2005-2025 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 { CommentModel, User } from '../../models';
import { Observable, of } from 'rxjs';
import { CommentsService } from '../interfaces/comments-service.interface';
import { testUser } from './comments.stories.mock';
export class CommentsServiceStoriesMock implements Partial<CommentsService> {
constructor() {}
get(_id: string): Observable<CommentModel[]> {
return commentsResponseMock.getComments();
}
add(_id: string, message = 'test comment'): Observable<CommentModel> {
return commentsResponseMock.addComment(message);
}
}
const commentUser = new User({
enabled: true,
firstName: 'hruser',
displayName: 'hruser',
id: 'hruser',
email: 'test'
});
export const commentsResponseMock = {
getComments: () =>
of([
new CommentModel({
id: 1,
message: 'Test Comment',
created: new Date(),
createdBy: commentUser,
isSelected: false
}),
new CommentModel({
id: 2,
message: 'Test Comment',
created: new Date(),
createdBy: commentUser,
isSelected: false
}),
new CommentModel({
id: 3,
message: 'Test Comment',
created: new Date(),
createdBy: commentUser,
isSelected: false
})
]),
addComment: (message: string) =>
of(
new CommentModel({
id: 1,
message,
created: new Date(),
createdBy: testUser,
isSelected: false
})
)
};

166
lib/core/src/lib/comments/mocks/comments.stories.mock.ts
View File

@@ -1,166 +0,0 @@
/*!
* @license
* Copyright © 2005-2025 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 { CommentModel } from '../../models';
const fakeCompany: any = {
organization: '',
address1: '',
address2: '',
address3: '',
postcode: '',
telephone: '',
fax: '',
email: ''
};
export const getDateXMinutesAgo = (minutes: number) => new Date(new Date().getTime() - minutes * 60000);
const johnDoe: any = {
id: '1',
email: 'john.doe@alfresco.com',
firstName: 'John',
lastName: 'Doe',
company: fakeCompany,
enabled: true,
isAdmin: undefined,
avatarId: '001'
};
const janeEod: any = {
id: '2',
email: 'jane.eod@alfresco.com',
firstName: 'Jane',
lastName: 'Eod',
company: fakeCompany,
enabled: true,
isAdmin: undefined
};
const robertSmith: any = {
id: '3',
email: 'robert.smith@alfresco.com',
firstName: 'Robert',
lastName: 'Smith',
company: fakeCompany,
enabled: true,
isAdmin: undefined
};
export const testUser: any = {
id: '44',
email: 'test.user@hyland.com',
firstName: 'Test',
lastName: 'User',
company: fakeCompany,
enabled: true,
isAdmin: undefined,
avatarId: '044'
};
export const commentsStoriesData: CommentModel[] = [
new CommentModel({
id: 1,
message: `I've done this task, what's next?`,
created: getDateXMinutesAgo(30),
createdBy: johnDoe,
isSelected: false
}),
new CommentModel({
id: 2,
message: `I've assigned you another one 🤠`,
created: getDateXMinutesAgo(15),
createdBy: janeEod,
isSelected: false
}),
new CommentModel({
id: 3,
message: '+1',
created: getDateXMinutesAgo(12),
createdBy: robertSmith,
isSelected: false
}),
new CommentModel({
id: 4,
message: 'Cheers',
created: new Date(),
createdBy: johnDoe,
isSelected: false
})
];
export const commentsNodeData: CommentModel[] = [
new CommentModel({
id: 1,
message: `I've done this component, is it cool?`,
created: getDateXMinutesAgo(30),
createdBy: johnDoe,
isSelected: false
}),
new CommentModel({
id: 2,
message: 'Yeah',
created: getDateXMinutesAgo(15),
createdBy: janeEod,
isSelected: false
}),
new CommentModel({
id: 3,
message: '+1',
created: getDateXMinutesAgo(12),
createdBy: robertSmith,
isSelected: false
}),
new CommentModel({
id: 4,
message: 'ty',
created: new Date(),
createdBy: johnDoe,
isSelected: false
})
];
export const commentsTaskData: CommentModel[] = [
new CommentModel({
id: 1,
message: `I've done this task, what's next?`,
created: getDateXMinutesAgo(30),
createdBy: johnDoe,
isSelected: false
}),
new CommentModel({
id: 2,
message: `I've assigned you another one 🤠`,
created: getDateXMinutesAgo(15),
createdBy: janeEod,
isSelected: false
}),
new CommentModel({
id: 3,
message: '+1',
created: getDateXMinutesAgo(12),
createdBy: robertSmith,
isSelected: false
}),
new CommentModel({
id: 4,
message: 'Cheers',
created: new Date(),
createdBy: johnDoe,
isSelected: false
})
];

492
lib/core/src/lib/datatable/components/datatable/datatable.component.stories.ts
View File

@@ -1,492 +0,0 @@
/*!
* @license
* Copyright © 2005-2025 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 { applicationConfig, Meta, StoryFn, moduleMetadata } from '@storybook/angular';
import { CoreStoryModule } from '../../../testing/core.story.module';
import { DataTableComponent } from './datatable.component';
import { DATATABLE_DIRECTIVES } from '../../datatable.module';
import { RouterTestingModule } from '@angular/router/testing';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { mockPathInfos } from '../mocks/datatable.mock';
import { importProvidersFrom } from '@angular/core';
export default {
component: DataTableComponent,
title: 'Core/Datatable/Datatable',
decorators: [
moduleMetadata({
imports: [...DATATABLE_DIRECTIVES, MatProgressSpinnerModule, RouterTestingModule]
}),
applicationConfig({
providers: [importProvidersFrom(CoreStoryModule)]
})
],
argTypes: {
data: {
control: 'object',
description: 'Data source for the table',
table: {
category: 'Data',
type: { summary: 'DataTableAdapter' }
}
},
display: {
control: 'inline-radio',
options: ['list', 'gallery'],
description: 'The display mode of the table.',
table: {
type: { summary: 'string' },
defaultValue: { summary: 'list' }
}
},
rows: {
control: 'object',
description: 'The rows that the datatable will show.',
table: {
category: 'Data',
type: { summary: 'any[]' },
defaultValue: { summary: '[]' }
}
},
sorting: {
control: 'object',
description: 'A string array.\n\n' + 'First element describes the key to sort by.\n\n' + 'Second element describes the sorting order.',
table: {
type: { summary: 'any[]' },
defaultValue: { summary: '[]' }
}
},
columns: {
control: 'object',
description: 'The columns that the datatable will show.',
table: {
category: 'Data',
type: { summary: 'any[]' },
defaultValue: { summary: '[]' }
}
},
selectionMode: {
control: 'inline-radio',
description: 'Row selection mode.',
options: ['none', 'single', 'multiple'],
table: {
category: 'Selection',
type: { summary: 'string' },
defaultValue: { summary: 'single' }
}
},
multiselect: {
control: 'boolean',
description: 'Toggles multiple row selection, which renders checkboxes at the beginning of each row.',
table: {
category: 'Selection',
type: { summary: 'boolean' },
defaultValue: { summary: 'false' }
}
},
mainTableAction: {
control: 'boolean',
description: 'Toggles main data table action column.',
table: {
category: 'Data Actions Column',
type: { summary: 'boolean' },
defaultValue: { summary: 'true' }
}
},
actions: {
control: 'boolean',
description: 'Toggles the data actions column.',
table: {
category: 'Data Actions Column',
type: { summary: 'boolean' },
defaultValue: { summary: 'false' }
}
},
showMainDatatableActions: {
control: 'boolean',
description: 'Toggles the main datatable action.',
table: {
category: 'Data Actions Column',
type: { summary: 'boolean' },
defaultValue: { summary: 'false' }
}
},
actionsPosition: {
control: 'inline-radio',
description: 'Position of the actions dropdown menu.',
options: ['right', 'left'],
table: {
category: 'Data Actions Column',
type: { summary: 'string' },
defaultValue: { summary: 'right' }
}
},
actionsVisibleOnHover: {
control: 'boolean',
description: 'Toggles whether the actions dropdown should only be visible if the row is hovered over or the dropdown menu is open.',
table: {
category: 'Data Actions Column',
type: { summary: 'boolean' },
defaultValue: { summary: 'false' }
}
},
fallbackThumbnail: {
control: 'text',
description: 'Fallback image for rows where the thumbnail is missing.',
table: {
type: { summary: 'string' }
}
},
contextMenu: {
control: 'boolean',
description: 'Toggles custom context menu for the component.',
table: {
type: { summary: 'boolean' },
defaultValue: { summary: 'false' }
}
},
rowStyle: {
control: 'object',
description:
'The inline style to apply to every row. See [NgStyle](https://angular.io/docs/ts/latest/api/common/index/NgStyle-directive.html) docs for more details and usage examples.',
table: {
category: 'Custom Row Styles',
type: { summary: '{ [key: string]: any }' }
}
},
rowStyleClass: {
control: 'text',
description: 'The CSS class to apply to every row.',
table: {
category: 'Custom Row Styles',
type: { summary: 'string' },
defaultValue: { summary: '' }
}
},
showHeader: {
control: 'inline-radio',
description: 'Toggles the header visibility mode.',
options: ['never', 'always', 'data'],
table: {
category: 'Header',
type: { summary: 'string' },
defaultValue: { summary: 'data' }
}
},
stickyHeader: {
control: 'boolean',
description: 'Toggles the sticky header mode.',
table: {
category: 'Header',
type: { summary: 'boolean' },
defaultValue: { summary: 'false' }
}
},
loading: {
control: 'boolean',
table: {
category: 'Table Template',
type: { summary: 'boolean' },
defaultValue: { summary: 'false' }
}
},
noPermission: {
control: 'boolean',
table: {
category: 'Table Template',
type: { summary: 'boolean' },
defaultValue: { summary: 'false' }
}
},
rowMenuCacheEnabled: {
control: 'boolean',
description: 'Should the items for the row actions menu be cached for reuse after they are loaded the first time?',
table: {
type: { summary: 'boolean' },
defaultValue: { summary: 'false' }
}
},
allowFiltering: {
control: 'boolean',
description: 'Flag that indicate if the datatable allow the use facet widget search for filtering.',
table: {
type: { summary: 'boolean' },
defaultValue: { summary: 'false' }
}
},
rowClick: {
action: 'rowClick',
description: 'Emitted when the user clicks a row.',
table: { category: 'Actions' }
},
rowDblClick: {
action: 'rowDblClick',
description: 'Emitted when the user double-clicks a row.',
table: { category: 'Actions' }
},
/* commented until [AAE-10239] fixed
showRowContextMenu: {
action: 'showRowContextMenu',
description: 'Emitted before the context menu is displayed for a row.',
table: { category: 'Actions' }
},
showRowActionsMenu: {
action: 'showRowActionsMenu',
description: 'Emitted before the actions menu is displayed for a row.',
table: { category: 'Actions' }
},
*/
executeRowAction: {
action: 'executeRowAction',
description: 'Emitted when the user executes a row action.',
table: { category: 'Actions' }
},
columnOrderChanged: {
action: 'columnOrderChanged',
description: 'Emitted when the order of columns changed.',
table: { category: 'Actions' }
}
},
args: {
display: 'list',
rows: [
{
id: 1,
textCol: 'This is a very long text inside the text column to check if the hidden text will be displayed on hover.',
imageCol: 'material-icons://folder_open',
iconCol: 'folder_open',
dateCol: new Date(),
fileSizeCol: '536870912',
locationCol: mockPathInfos[0],
booleanCol: true,
amountCol: 100.55,
numberCol: 10000.31,
jsonCol: mockPathInfos[0]
},
{
id: 2,
textCol: 'Text 2',
imageCol: 'material-icons://cloud_outline',
iconCol: 'cloud_outline',
dateCol: new Date().setDate(new Date().getDate() - 1),
fileSizeCol: '524288',
locationCol: mockPathInfos[1],
booleanCol: false,
amountCol: 1020.123,
numberCol: 240.3,
jsonCol: mockPathInfos[1]
},
{
id: 3,
textCol: 'Text 3',
imageCol: 'material-icons://save',
iconCol: 'save',
dateCol: new Date().setDate(new Date().getDate() - 5),
fileSizeCol: '10737418240B',
locationCol: mockPathInfos[1],
booleanCol: 'true',
amountCol: -2020,
numberCol: 120,
jsonCol: mockPathInfos[1]
},
{
id: 4,
textCol: 'Text 4',
imageCol: 'material-icons://delete',
iconCol: 'delete',
dateCol: new Date().setDate(new Date().getDate() - 6),
fileSizeCol: '512B',
locationCol: mockPathInfos[2],
booleanCol: 'false',
amountCol: 230.76,
numberCol: 3.032,
jsonCol: mockPathInfos[2]
},
{
id: 5,
textCol: 'Text 5',
imageCol: 'material-icons://person_outline',
iconCol: 'person_outline',
dateCol: new Date().setDate(new Date().getDate() - 7),
fileSizeCol: '1073741824B',
locationCol: mockPathInfos[0],
booleanCol: 'false',
amountCol: 0.444,
numberCol: 2000,
jsonCol: mockPathInfos[0]
}
],
sorting: ['id', 'asc'],
columns: [
{ type: 'text', key: 'id', title: 'Id', sortable: true },
{
type: 'text',
key: 'textCol',
title: 'Text Column',
sortable: true,
draggable: true,
cssClass: 'adf-ellipsis-cell',
copyContent: true
},
{ type: 'image', key: 'imageCol', title: 'Image Column', draggable: true, cssClass: 'adf-ellipsis-cell' },
{ type: 'icon', key: 'iconCol', title: 'Icon Column', draggable: true, cssClass: 'adf-ellipsis-cell' },
{ type: 'date', key: 'dateCol', title: 'Date Column', sortable: true, draggable: true, cssClass: 'adf-ellipsis-cell' },
{
type: 'date',
key: 'dateCol',
title: 'Date Time Ago Column',
sortable: true,
draggable: true,
cssClass: 'adf-ellipsis-cell',
dateConfig: { format: 'timeAgo' }
},
{ type: 'fileSize', key: 'fileSizeCol', title: 'File Size Column', sortable: true, draggable: true, cssClass: 'adf-ellipsis-cell' },
{ type: 'location', format: '/files', key: 'locationCol', title: 'Location Column', draggable: true, cssClass: 'adf-ellipsis-cell' },
{ type: 'boolean', key: 'booleanCol', title: 'Boolean Column', draggable: true, cssClass: 'adf-ellipsis-cell' },
{ type: 'amount', key: 'amountCol', title: 'Amount Column', draggable: true, cssClass: 'adf-ellipsis-cell' },
{ type: 'number', key: 'numberCol', title: 'Number Column', draggable: true, cssClass: 'adf-ellipsis-cell' },
{ type: 'json', key: 'jsonCol', title: 'JSON Column', draggable: true, cssClass: 'adf-ellipsis-cell' }
],
selectionMode: 'single',
multiselect: false,
mainTableAction: true,
actions: false,
showMainDatatableActions: false,
actionsPosition: 'right',
actionsVisibleOnHover: false,
contextMenu: false,
rowStyleClass: '',
showHeader: 'data',
stickyHeader: false,
loading: false,
noPermission: false,
rowMenuCacheEnabled: false,
allowFiltering: false
}
} as Meta<DataTableComponent>;
const insertContentToTemplate = (content: string): string =>
`<adf-datatable
[rows]=rows
[sorting]=sorting
[columns]=columns
[selectionMode]=selectionMode
[multiselect]=multiselect
[mainTableAction]=mainTableAction
[actions]=actions
[showMainDatatableActions]=showMainDatatableActions
[actionsPosition]=actionsPosition
[actionsVisibleOnHover]=actionsVisibleOnHover
[contextMenu]=contextMenu
[rowStyleClass]=rowStyleClass
[showHeader]=showHeader
[stickyHeader]=stickyHeader
[loading]=loading
[noPermission]=noPermission
[rowMenuCacheEnabled]=rowMenuCacheEnabled
[allowFiltering]=allowFiltering
(rowClick)=rowClick($event)
(rowDblClick)=rowDblClick($event)
(executeRowAction)=executeRowAction($event)
(columnOrderChanged)=columnOrderChanged($event)
>
${content}
</adf-datatable>`;
export const DefaultDatatable: StoryFn<DataTableComponent> = (args) => ({
props: args,
template: insertContentToTemplate('')
});
export const EmptyWithList: StoryFn<DataTableComponent> = (args) => ({
props: {
...args,
rows: []
},
template: insertContentToTemplate(`
<adf-empty-list>
<div adf-empty-list-header>Empty List Header</div>
<div adf-empty-list-body>Empty List Body</div>
<div adf-empty-list-footer>Empty List Footer</div>
</adf-empty-list>
`)
});
export const EmptyWithTemplate: StoryFn<DataTableComponent> = (args) => ({
props: {
...args,
rows: []
},
template: insertContentToTemplate(`
<adf-no-content-template>
<ng-template>Sorry, no content</ng-template>
</adf-no-content-template>
`)
});
export const LoadingWithTemplate: StoryFn<DataTableComponent> = (args) => ({
props: {
...args,
loading: true
},
template: insertContentToTemplate(`
<adf-loading-content-template>
<ng-template>
<mat-progress-spinner [mode]='indeterminate'>
</mat-progress-spinner>
</ng-template>
</adf-loading-content-template>
`)
});
export const NoPermissionWithTemplate: StoryFn<DataTableComponent> = (args) => ({
props: {
...args,
noPermission: true
},
template: insertContentToTemplate(`
<adf-no-permission-template>
<ng-template>
<div style=color:red;>You don't have permission to this content.</div>
</ng-template>
</adf-no-permission-template>
`)
});
export const MainMenuWithTemplate: StoryFn<DataTableComponent> = (args) => ({
props: {
...args,
mainTableAction: true,
showMainDatatableActions: true
},
template: insertContentToTemplate(`
<adf-main-menu-datatable-template>
<ng-template let-mainMenuTrigger>
<adf-datatable-column-selector [columns]=columns [mainMenuTrigger]=mainMenuTrigger>
</adf-datatable-column-selector>
</ng-template>
</adf-main-menu-datatable-template>
`)
});
export const StickyHeader: StoryFn<DataTableComponent> = (args) => ({
props: {
...args,
stickyHeader: true
},
template: '<div style="overflow:scroll;display:block;height:230px;">' + insertContentToTemplate(``) + '</div>'
});

27
lib/core/src/lib/datatable/components/mocks/datatable.mock.ts
View File

@@ -15,7 +15,6 @@
* limitations under the License.
*/
import { PathInfo } from '../../../models/path.model';
import { DataColumn } from '../../data/data-column.model';
export const mockCarsData: any = [
@@ -132,29 +131,3 @@ export const mockCarsSchemaDefinition: DataColumn[] = [
draggable: true
}
];
export const mockPathInfos: PathInfo[] = [
{
elements: [
{ id: '1', name: 'User files', nodeType: 'folder' },
{ id: '2', name: 'Favorite', nodeType: 'folder' },
{ id: '3', name: 'Movies', nodeType: 'folder' }
],
name: '/User files/Favorite/Movies'
},
{
elements: [
{ id: '1', name: 'User files', nodeType: 'folder' },
{ id: '4', name: 'Photos', nodeType: 'folder' }
],
name: '/User files/Photos'
},
{
elements: [
{ id: '1', name: 'User files', nodeType: 'folder' },
{ id: '2', name: 'Favorite', nodeType: 'folder' },
{ id: '5', name: 'Series', nodeType: 'folder' }
],
name: '/User files/Favorite/Series'
}
];

505
lib/core/src/lib/datatable/data-column/data-column.component.stories.ts
View File

@@ -1,505 +0,0 @@
/*!
* @license
* Copyright © 2005-2025 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 { applicationConfig, Meta, StoryFn, moduleMetadata } from '@storybook/angular';
import { DataColumnComponent } from './data-column.component';
import { DATATABLE_DIRECTIVES } from '../datatable.module';
import { CoreStoryModule } from '../../testing/core.story.module';
import * as mockData from '../../mock/data-column.mock';
import { RouterTestingModule } from '@angular/router/testing';
import { DataRow } from '../index';
import { importProvidersFrom } from '@angular/core';
export default {
component: DataColumnComponent,
title: 'Core/Data Column/Data Column',
decorators: [
moduleMetadata({
imports: [...DATATABLE_DIRECTIVES, RouterTestingModule]
}),
applicationConfig({
providers: [importProvidersFrom(CoreStoryModule)]
})
],
argTypes: {
copyContent: {
description: 'Enables/disables a Clipboard directive to allow copying of cell contents.',
control: { type: 'boolean' },
table: {
category: 'Component Inputs',
type: {
summary: 'boolean'
}
}
},
cssClass: {
description: 'Additional CSS class to be applied to column (header and cells).',
control: { type: 'text' },
table: {
category: 'Component Inputs',
type: {
summary: 'string'
}
}
},
customData: {
description: 'You can specify any custom data which can be used by any specific feature',
control: { disable: true },
table: {
category: 'Component Inputs',
type: {
summary: 'any'
}
}
},
draggable: {
description: 'Toggles drag and drop for header column.',
control: { type: 'boolean' },
table: {
category: 'Component Inputs',
type: {
summary: 'boolean'
},
defaultValue: {
summary: 'false'
}
}
},
resizable: {
description: 'Toggles resize for column.',
control: { type: 'boolean' },
table: {
category: 'Component Inputs',
type: {
summary: 'boolean'
},
defaultValue: {
summary: 'true'
}
}
},
editable: {
description: 'Toggles the editing support of the column data.',
control: { type: 'boolean', disable: true },
table: {
category: 'Component Inputs',
type: {
summary: 'boolean'
},
defaultValue: {
summary: 'false'
}
}
},
focus: {
description: 'Enable or disable cell focus',
control: { disable: true },
table: {
category: 'Component Inputs',
type: {
summary: 'boolean'
},
defaultValue: {
summary: 'true'
}
}
},
format: {
description: 'Used for location type. Setups root path for router navigation.',
control: { type: 'text', disable: true },
table: {
category: 'Component Inputs',
type: {
summary: 'string'
}
}
},
formatTooltip: {
description: 'Custom tooltip formatter function.',
control: { disable: true },
table: {
category: 'Component Inputs',
type: {
summary: 'Function'
}
}
},
id: {
description: 'Column identifier.',
control: { disable: true },
table: {
category: 'Component Inputs',
type: {
summary: 'string'
},
defaultValue: {
summary: ''
}
}
},
isHidden: {
description: 'Hides columns',
control: { type: 'boolean' },
table: {
category: 'Component Inputs',
type: {
summary: 'boolean'
},
defaultValue: {
summary: 'false'
}
}
},
key: {
description: 'Data source key. Can be either a column/property key like title or a property path like `createdBy.name`.',
control: { type: 'text', disable: false },
table: {
category: 'Component Inputs',
type: {
summary: 'string'
}
}
},
sortable: {
description: 'Toggles ability to sort by this column, for example by clicking the column header.',
control: { type: 'boolean' },
table: {
category: 'Component Inputs',
type: {
summary: 'boolean'
},
defaultValue: {
summary: 'true'
}
}
},
sortingKey: {
description: 'When using server side sorting the column used by the api call where the sorting will be performed',
control: { disable: true },
table: {
category: 'Component Inputs',
type: {
summary: 'string'
}
}
},
srTitle: {
description: 'Title to be used for screen readers.',
control: { type: 'text' },
table: {
category: 'Component Inputs',
type: {
summary: 'string'
},
defaultValue: {
summary: ''
}
}
},
title: {
description:
'Display title of the column, typically used for column headers. You can use the i18n resource key to get it translated automatically.',
control: { type: 'text' },
table: {
category: 'Component Inputs',
type: {
summary: 'string'
},
defaultValue: {
summary: ''
}
}
},
type: {
description:
'Value type for the column. Possible settings are: `text`, `icon`, `image`, `date`, `fileSize`, `location`, `boolean`, `amount`, `number` and `json`.',
control: { type: 'select', disable: false },
options: ['text', 'icon', 'image', 'date', 'fileSize', 'location', 'boolean', 'amount', 'number', 'json'],
table: {
category: 'Component Inputs',
type: {
summary: 'DataColumnType'
},
defaultValue: {
summary: 'text'
}
}
},
currencyConfig: {
description: `The currencyConfig input allows you to customize the formatting and display of currency values within the component.`,
control: { type: 'object', disable: true },
table: {
category: 'Component Inputs',
type: {
summary: 'CurrencyConfig'
},
defaultValue: {
summary: `{ code: 'USD', display: 'symbol' }`
}
}
},
decimalConfig: {
description: `The decimalConfig input allows you to customize the formatting and display of decimal values within the component.`,
control: { type: 'object', disable: true },
table: {
category: 'Component Inputs',
type: {
summary: 'DecimalConfig'
},
defaultValue: {
summary: `{}`
}
}
},
dateConfig: {
description: `The dateConfig input allows you to configure date formatting and localization for a component.`,
control: { type: 'object', disable: true },
table: {
category: 'Component Inputs',
type: {
summary: 'DateConfig'
},
defaultValue: {
summary: `{ format: 'medium', tooltipFormat: 'medium' }`
}
}
},
rows: {
description: 'Provides rows for DataTable component',
control: { disable: false },
table: {
category: 'Component data',
type: {
summary: 'array'
}
}
}
},
args: {
copyContent: false,
cssClass: '',
customData: {},
draggable: false,
editable: false,
focus: true,
format: '',
formatTooltip: null,
id: '',
isHidden: false,
key: '',
sortable: true,
sortingKey: '',
srTitle: '',
title: '',
type: 'text',
currencyConfig: {
code: 'USD',
display: 'symbol',
digitsInfo: undefined,
locale: undefined
},
decimalConfig: {
digitsInfo: '2.4-5',
locale: undefined
},
dateConfig: {
format: 'medium',
tooltipFormat: 'medium',
locale: undefined
}
}
} as Meta<DataColumnComponent>;
const formatCustomTooltip = (row: DataRow): string => (row ? 'This is ' + row.getValue('firstname') : null);
const template: StoryFn<DataColumnComponent> = (args: DataColumnComponent & { rows: DataRow[] }) => ({
props: args,
template: `
<adf-datatable [rows]="rows">
<data-columns>
<data-column
[key]="key"
[type]="type"
[title]="title"
[editable]="editable"
[sortable]="sortable"
[draggable]="draggable"
[copyContent]="copyContent"
[format]="format"
[isHidden]="isHidden"
[class]="cssClass"
[sr-title]="srTitle"
[currencyConfig]="currencyConfig"
[decimalConfig]="decimalConfig"
[dateConfig]="dateConfig"
[formatTooltip]="formatTooltip">
</data-column>
</data-columns>
</adf-datatable>
`
});
// Text Column
export const TextColumn: StoryFn = template.bind({});
TextColumn.args = {
rows: mockData.textColumnRows,
key: 'firstname',
type: 'text',
title: 'Text Column'
};
// Text Column With Custom Tooltip
export const TextColumnWithCustomTooltip: StoryFn = template.bind({});
TextColumnWithCustomTooltip.argTypes = {
formatTooltip: { control: { disable: false } }
};
TextColumnWithCustomTooltip.args = {
rows: mockData.textColumnRows,
key: 'firstname',
type: 'text',
title: 'Custom Tooltip Column',
formatTooltip: formatCustomTooltip
};
// Icon Column
export const IconColumn: StoryFn = template.bind({});
IconColumn.argTypes = {
copyContent: { control: { disable: true } }
};
IconColumn.args = {
rows: mockData.iconColumnRows,
key: 'icon',
type: 'icon',
title: 'Icon Column'
};
// Image Column
export const ImageColumn: StoryFn = template.bind({});
ImageColumn.argTypes = {
copyContent: { control: { disable: true } }
};
ImageColumn.args = {
rows: mockData.imageColumnRows,
key: 'image',
type: 'image',
title: 'Image Column'
};
// Date Column
export const DateColumn: StoryFn = template.bind({});
DateColumn.argTypes = {
copyContent: { control: { disable: true } },
dateConfig: { control: { disable: false } }
};
DateColumn.args = {
rows: mockData.dateColumnRows,
key: 'createdOn',
type: 'date',
title: 'Date Column'
};
// Date Column Time Ago
export const DateColumnTimeAgo: StoryFn = template.bind({});
DateColumnTimeAgo.argTypes = {
copyContent: { control: { disable: true } },
dateConfig: { control: { disable: false } }
};
DateColumnTimeAgo.args = {
rows: mockData.dateColumnTimeAgoRows,
key: 'modifiedOn',
type: 'date',
title: 'Date Column Time Ago',
dateConfig: { format: 'timeAgo' }
};
// File Size Column
export const FileSizeColumn: StoryFn = template.bind({});
FileSizeColumn.argTypes = {
copyContent: { control: { disable: true } }
};
FileSizeColumn.args = {
rows: mockData.fileSizeColumnRows,
key: 'size',
type: 'fileSize',
title: 'File Size Column'
};
// Location Column
export const LocationColumn: StoryFn = template.bind({});
LocationColumn.argTypes = {
copyContent: { control: { disable: true } },
format: { control: { disable: false } },
sortable: { control: { disable: true } }
};
LocationColumn.args = {
rows: mockData.locationColumnRows,
format: '/files',
key: 'path',
type: 'location',
title: 'Location Column'
};
// Boolean Column
export const BooleanColumn: StoryFn = template.bind({});
BooleanColumn.argTypes = {
copyContent: { control: { disable: true } }
};
BooleanColumn.args = {
rows: mockData.booleanColumnRows,
key: 'bool',
type: 'boolean',
title: 'Boolean Column'
};
// Json Column
export const JsonColumn: StoryFn = template.bind({});
JsonColumn.argTypes = {
editable: { control: { disable: false } },
copyContent: { control: { disable: true } }
};
JsonColumn.args = {
rows: mockData.jsonColumnRows,
key: 'rowInfo',
type: 'json',
title: 'JSON Column'
};
// Amount Column
export const AmountColumn: StoryFn = template.bind({});
AmountColumn.argTypes = {
copyContent: { control: { disable: true } },
currencyConfig: { control: { disable: false } }
};
AmountColumn.args = {
rows: mockData.amountColumnRows,
key: 'price',
type: 'amount',
title: 'Amount Column'
};
// Number Column
export const NumberColumn: StoryFn = template.bind({});
NumberColumn.argTypes = {
decimalConfig: { control: { disable: false } },
copyContent: { control: { disable: true } }
};
NumberColumn.args = {
rows: mockData.amountColumnRows,
key: 'price',
type: 'number',
title: 'Number Column'
};

80
lib/core/src/lib/dialogs/edit-json/edit-json.dialog.stories.component.ts
View File

@@ -1,80 +0,0 @@
/*!
* @license
* Copyright © 2005-2025 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, OnInit, OnChanges, Input } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { EditJsonDialogComponent, EditJsonDialogSettings } from './edit-json.dialog';
import { MatButtonModule } from '@angular/material/button';
@Component({
selector: 'adf-edit-json-dialog-storybook',
template: `<button mat-raised-button (click)="openDialog()">Open dialog</button>`,
standalone: true,
imports: [MatButtonModule]
})
export class EditJsonDialogStorybookComponent implements OnInit, OnChanges {
@Input()
title: string;
@Input()
editable: boolean;
@Input()
value: string;
private _settings: EditJsonDialogSettings;
set settings(newSettings: EditJsonDialogSettings) {
this._settings = {
title: newSettings.title,
editable: newSettings.editable,
value: JSON.stringify(newSettings.value, null, ' ')
};
}
constructor(private dialog: MatDialog) {}
ngOnInit() {
this.settings = {
title: this.title,
editable: this.editable,
value: this.value
};
}
ngOnChanges() {
this.settings = {
title: this.title,
editable: this.editable,
value: this.value
};
}
openDialog() {
this.dialog
.open(EditJsonDialogComponent, {
data: this._settings,
minWidth: `50%`
})
.afterClosed()
.subscribe((value: string) => {
if (value) {
this._settings.value = JSON.stringify(JSON.parse(value), null, ' ');
}
});
}
}

99
lib/core/src/lib/dialogs/edit-json/edit-json.dialog.stories.ts
View File

@@ -1,99 +0,0 @@
/*!
* @license
* Copyright © 2005-2025 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 { applicationConfig, Meta, moduleMetadata, StoryFn } from '@storybook/angular';
import { CoreStoryModule } from '../../testing/core.story.module';
import { EditJsonDialogStorybookComponent } from './edit-json.dialog.stories.component';
import { MatButtonModule } from '@angular/material/button';
import { importProvidersFrom } from '@angular/core';
import { EditJsonDialogComponent } from './edit-json.dialog';
const jsonData = {
maxValue: 50,
minValue: 10,
values: [10, 15, 14, 27, 35, 23, 49, 38],
measurementId: 'm_10001',
researcherId: 's_10002'
};
export default {
component: EditJsonDialogStorybookComponent,
title: 'Core/Dialog/Edit JSON Dialog',
decorators: [
moduleMetadata({
imports: [EditJsonDialogComponent, MatButtonModule]
}),
applicationConfig({
providers: [importProvidersFrom(CoreStoryModule)]
})
],
argTypes: {
value: {
description: 'Displayed text',
control: {
type: 'object'
},
table: {
category: 'Provider settings',
type: {
summary: 'object'
}
}
},
editable: {
description: 'Defines if component is editable',
control: {
type: 'boolean'
},
table: {
category: 'Provider settings',
type: {
summary: 'boolean'
},
defaultValue: {
summary: 'false'
}
}
},
title: {
control: {
type: 'text'
},
table: {
category: 'Provider settings',
type: {
summary: 'string'
},
defaultValue: {
summary: 'JSON'
}
}
}
},
args: {
value: jsonData as unknown as string,
editable: false,
title: 'JSON Dialog Title'
}
} as Meta<EditJsonDialogStorybookComponent>;
const template: StoryFn<EditJsonDialogStorybookComponent> = (args) => ({
props: args
});
export const EditJSONDialog = template.bind({});
EditJSONDialog.parameters = { layout: 'centered' };

76
lib/core/src/lib/icon/icon.component.stories.ts
View File

@@ -1,76 +0,0 @@
/*!
* @license
* Copyright © 2005-2025 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 { applicationConfig, Meta, moduleMetadata, StoryFn } from '@storybook/angular';
import { CoreStoryModule } from '../testing/core.story.module';
import { IconComponent } from './icon.component';
import { importProvidersFrom } from '@angular/core';
export default {
component: IconComponent,
title: 'Core/Icon/Icon',
decorators: [
moduleMetadata({
imports: [IconComponent]
}),
applicationConfig({
providers: [importProvidersFrom(CoreStoryModule)]
})
],
parameters: {
docs: {
description: {
component: `Provides a universal way of rendering registered and named icons.`
}
}
},
argTypes: {
color: {
control: 'radio',
options: ['primary', 'accent', 'warn', undefined],
description: 'icon color',
defaultValue: undefined,
table: {
type: { summary: 'ThemePalette' },
defaultValue: { summary: 'undefined' }
}
},
value: {
description: 'icon name',
table: {
type: { summary: 'string' },
defaultValue: { summary: 'settings' }
}
}
}
} as Meta<IconComponent>;
const template: StoryFn<IconComponent> = (args) => ({
props: args
});
export const DefaultIcon = template.bind({});
DefaultIcon.args = {
value: ''
};
DefaultIcon.parameters = { layout: 'centered' };
export const CustomIcon = template.bind({});
CustomIcon.args = {
value: 'cloud_download'
};
CustomIcon.parameters = { layout: 'centered' };

123
lib/core/src/lib/identity-user-info/identity-user-info.component.stories.ts
View File

@@ -1,123 +0,0 @@
/*!
* @license
* Copyright © 2005-2025 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 { applicationConfig, Meta, moduleMetadata, StoryFn } from '@storybook/angular';
import { CoreStoryModule } from '../testing/core.story.module';
import { IdentityUserInfoComponent } from './identity-user-info.component';
import { importProvidersFrom } from '@angular/core';
const fakeIdentityUser = {
familyName: 'Identity',
givenName: 'John',
email: 'john.identity@gmail.com',
username: 'johnyIdentity99'
};
export default {
component: IdentityUserInfoComponent,
title: 'Core/Identity User Info/Identity User Info',
decorators: [
moduleMetadata({
imports: [IdentityUserInfoComponent]
}),
applicationConfig({
providers: [importProvidersFrom(CoreStoryModule)]
})
],
argTypes: {
isLoggedIn: {
description: 'Determines if user is logged in',
control: 'boolean',
table: {
type: { summary: 'boolean' },
defaultValue: { summary: 'true' }
}
},
identityUser: {
description: 'Identity User Info',
control: 'object',
table: {
type: { summary: 'IdentityUserModel' }
}
},
menuPositionX: {
description: 'Material Angular menu horizontal position in regard to User Info',
control: 'radio',
options: ['before', 'after'],
table: {
type: { summary: 'MenuPositionX' },
defaultValue: { summary: 'after' }
}
},
menuPositionY: {
description: 'Material Angular menu vertical position in regard to User Info',
control: 'radio',
options: ['above', 'below'],
table: {
type: { summary: 'MenuPositionY' },
defaultValue: { summary: 'below' }
}
},
showName: {
description: 'Determines if name should be shown next to user avatar',
control: 'boolean',
table: {
type: { summary: 'boolean' },
defaultValue: { summary: 'true' }
}
},
namePosition: {
description: 'User name position in regard to avatar',
control: 'radio',
options: ['left', 'right'],
table: {
type: { summary: 'string' },
defaultValue: { summary: 'right' }
}
},
bpmBackgroundImage: {
description: 'Menu background banner image for APS users',
control: {
disable: true
},
table: {
type: {
summary: 'string'
},
defaultValue: {
summary: './assets/images/bpm-background.png'
}
}
}
},
args: {
identityUser: fakeIdentityUser,
isLoggedIn: true,
menuPositionX: 'after',
menuPositionY: 'below',
showName: true,
namePosition: 'right',
bpmBackgroundImage: './assets/images/bpm-background.png'
}
} as Meta<IdentityUserInfoComponent>;
const template: StoryFn<IdentityUserInfoComponent> = (args) => ({
props: args
});
export const LoginWithSSO = template.bind({});
LoginWithSSO.parameters = { layout: 'centered' };

289
lib/core/src/lib/info-drawer/info-drawer.component.stories.ts
View File

@@ -1,289 +0,0 @@
/*!
* @license
* Copyright © 2005-2025 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 { applicationConfig, Meta, moduleMetadata, StoryFn } from '@storybook/angular';
import { InfoDrawerComponent } from './info-drawer.component';
import { INFO_DRAWER_DIRECTIVES } from './info-drawer.module';
import { mockTabText, mockCardText } from './mock/info-drawer.mock';
import { importProvidersFrom } from '@angular/core';
import { CoreStoryModule } from '../../..';
export default {
component: InfoDrawerComponent,
title: 'Core/Info Drawer/Info Drawer',
decorators: [
moduleMetadata({
imports: [...INFO_DRAWER_DIRECTIVES]
}),
applicationConfig({
providers: [importProvidersFrom(CoreStoryModule)]
})
],
parameters: {
docs: {
description: {
component: `Displays a sidebar-style information panel in single layout or using tabs.`
}
}
},
argTypes: {
selectedIndex: {
control: 'select',
options: [0, 1, 2],
defaultValue: 0,
description: 'The selected index tab (Tab Layout only)',
table: {
type: { summary: 'number' },
defaultValue: { summary: '0' }
}
},
title: {
control: 'text',
description: 'The title of the info drawer',
defaultValue: null,
table: {
type: { summary: 'string' },
defaultValue: { summary: 'null' }
},
if: { arg: 'showHeader', truthy: true }
},
showHeader: {
control: 'boolean',
description: 'Visibility of the header',
defaultValue: true,
table: {
type: { summary: 'boolean' },
defaultValue: { summary: 'true' }
}
},
showSecondTab: {
control: 'boolean',
description: 'Visibility of the second tab (Tab Layout only)',
defaultValue: true,
table: {
type: { summary: 'boolean' },
defaultValue: { summary: 'true' }
}
},
showThirdTab: {
control: 'boolean',
description: 'Visibility of the third tab (Tab Layout only)',
defaultValue: true,
table: {
type: { summary: 'boolean' },
defaultValue: { summary: 'true' }
}
},
label1: {
control: 'text',
description: 'Label of the first tab (Tab Layout only)',
defaultValue: undefined,
table: {
type: { summary: 'string' },
defaultValue: { summary: 'undefined' },
category: 'Labels'
}
},
label2: {
control: 'text',
description: 'Label of the second tab (Tab Layout only)',
defaultValue: undefined,
table: {
type: { summary: 'string' },
defaultValue: { summary: 'undefined' },
category: 'Labels'
},
if: { arg: 'showSecondTab', truthy: true }
},
label3: {
control: 'text',
description: 'Label of the third tab (Tab Layout only)',
defaultValue: undefined,
table: {
type: { summary: 'string' },
defaultValue: { summary: 'undefined' },
category: 'Labels'
},
if: { arg: 'showThirdTab', truthy: true }
},
icon1: {
control: 'text',
description: 'Icon of the first tab (Tab Layout only)',
defaultValue: undefined,
table: {
type: { summary: 'string' },
defaultValue: { summary: 'undefined' },
category: 'Icons'
}
},
icon2: {
control: 'text',
description: 'Icon of the second tab (Tab Layout only)',
defaultValue: undefined,
table: {
type: { summary: 'string' },
defaultValue: { summary: 'undefined' },
category: 'Icons'
},
if: { arg: 'showSecondTab', truthy: true }
},
icon3: {
control: 'text',
description: 'Icon of the third tab (Tab Layout only)',
defaultValue: undefined,
table: {
type: { summary: 'string' },
defaultValue: { summary: 'undefined' },
category: 'Icons'
},
if: { arg: 'showThirdTab', truthy: true }
},
tab1Text: {
control: 'text',
description: 'Text content of the first tab (Tab Layout only)',
defaultValue: undefined,
table: {
type: { summary: 'string' },
defaultValue: { summary: 'undefined' },
category: 'Tab Content'
}
},
tab2Text: {
control: 'text',
description: 'Text content of the second tab (Tab Layout only)',
defaultValue: undefined,
table: {
type: { summary: 'string' },
defaultValue: { summary: 'undefined' },
category: 'Tab Content'
},
if: { arg: 'showSecondTab', truthy: true }
},
tab3Text: {
control: 'text',
description: 'Text content of the third tab (Tab Layout only)',
defaultValue: undefined,
table: {
type: { summary: 'string' },
defaultValue: { summary: 'undefined' },
category: 'Tab Content'
},
if: { arg: 'showThirdTab', truthy: true }
},
cardText: {
control: 'text',
description: 'The content of the single card (Single Layout only)',
defaultValue: undefined,
table: {
type: { summary: 'string' },
defaultValue: { summary: 'undefined' }
}
},
currentTab: {
action: 'currentTab',
description: 'Emitted when the currently active tab changes',
table: {
type: { summary: 'EventEmitter <number>' },
category: 'Actions'
}
}
},
args: {
selectedIndex: 0,
showHeader: true,
showSecondTab: true,
showThirdTab: true
}
} as Meta<InfoDrawerComponent>;
const tabLayoutTemplate: StoryFn<InfoDrawerComponent> = (args) => ({
props: args,
template: `<adf-info-drawer title="{{ title }}" [showHeader]="showHeader" (currentTab)="currentTab($event)" selectedIndex="{{ selectedIndex }}">
<div info-drawer-buttons>
<mat-icon>clear</mat-icon>
</div>
<adf-info-drawer-tab [label]="label1" [icon]="[icon1]">
<div class="info-drawer-tab-text">{{ tab1Text }}</div>
</adf-info-drawer-tab>
<adf-info-drawer-tab [label]="label2" [icon]="[icon2]" *ngIf="showSecondTab">
<div class="info-drawer-tab-text">{{ tab2Text }}</div>
</adf-info-drawer-tab>
<adf-info-drawer-tab [label]="label3" [icon]="[icon3]" *ngIf="showThirdTab">
<div class="info-drawer-tab-text">{{ tab3Text }}</div>
</adf-info-drawer-tab>
</adf-info-drawer>`
});
const singleLayoutTemplate: StoryFn<InfoDrawerComponent> = (args) => ({
props: args,
template: `<adf-info-drawer title="{{ title }}" [showHeader]="showHeader">
<div info-drawer-title>File info</div>
<div info-drawer-buttons>
<mat-icon>clear</mat-icon>
</div>
<div info-drawer-content>
<mat-card>
{{ cardText }}
</mat-card>
</div>
</adf-info-drawer>`
});
export const TabLayoutWithTextLabels = tabLayoutTemplate.bind({});
TabLayoutWithTextLabels.args = {
title: 'Activities',
label1: 'Activity',
label2: 'Details',
label3: 'More Info',
tab1Text: `This is a variant of the Info Drawer Layout component that displays information in tabs. ${mockTabText}`,
tab2Text: mockTabText,
tab3Text: mockTabText
};
TabLayoutWithTextLabels.parameters = {
controls: { exclude: ['cardText'] }
};
export const TabLayoutWithIconLabels = tabLayoutTemplate.bind({});
TabLayoutWithIconLabels.args = {
title: 'Activities',
icon1: 'people',
icon2: 'android',
icon3: 'comment',
tab1Text: `This is a variant of the Info Drawer Layout component that displays information in tabs. ${mockTabText}`,
tab2Text: mockTabText,
tab3Text: mockTabText
};
TabLayoutWithIconLabels.parameters = {
controls: { exclude: ['cardText'] }
};
export const SingleLayout = singleLayoutTemplate.bind({});
SingleLayout.args = {
title: 'Single Activities',
cardText: mockCardText,
showHeader: true,
showSecondTab: false,
showThirdTab: false
};

34
lib/core/src/lib/info-drawer/mock/info-drawer.mock.ts
View File

@@ -1,34 +0,0 @@
/*!
* @license
* Copyright © 2005-2025 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.
*/
/* eslint-disable @cspell/spellchecker */
export const mockTabText = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam urna odio, sagittis vel nulla vel, condimentum egestas dolor.
Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris eu hendrerit lectus. Aliquam et ex imperdiet, sodales tellus finibus, malesuada eros.
Vestibulum aliquet eros sed diam euismod tincidunt.
Pellentesque euismod, augue at blandit dapibus, ex nunc viverra nisl, non laoreet nibh odio in libero.
Quisque facilisis, dui luctus fringilla lacinia, dui enim accumsan diam, a vehicula mi nulla quis dolor.
Maecenas non neque sed nulla tincidunt vehicula.`;
export const mockCardText = `Suspendisse euismod egestas nisi, non ullamcorper orci scelerisque id. Vestibulum mollis ex imperdiet nisl viverra egestas.
Nunc commodo, mi elementum auctor bibendum, neque tortor justo, eget gravida eros.
Vestibulum nec dui ac ipsum posuere ullamcorper. Nullam ultrices eget tellus ut gravida. Aliquam ullamcorper tellus ac dui vehicula venenatis.
Maecenas ante ipsum, vestibulum sit amet fringilla a, fringilla quis leo.
Sed nisl nisi, lacinia ac ullamcorper non, tincidunt at massa. Sed at metus fermentum augue eleifend porta. Sed nec dui ut quam facilisis cursus at et eros.
Nulla quis diam vitae odio faucibus faucibus ac ac erat. Sed vehicula est eu congue pretium.
Donec quis nisi ligula. Donec pellentesque nibh nec scelerisque placerat. Nulla facilisi. Sed egestas nisi at risus iaculis faucibus. Nulla facilisi.
Aliquam ac tincidunt justo, sit amet aliquet libero.`;

102
lib/core/src/lib/language-menu/language-menu.component.stories.ts
View File

@@ -1,102 +0,0 @@
/*!
* @license
* Copyright © 2005-2025 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 { applicationConfig, componentWrapperDecorator, Meta, moduleMetadata, StoryFn } from '@storybook/angular';
import { CoreStoryModule } from '../testing/core.story.module';
import { LANGUAGE_MENU_DIRECTIVES } from './language-menu.module';
import { LanguageMenuComponent } from './language-menu.component';
import { LanguageService } from './service/language.service';
import { LanguageServiceMock } from '../mock/language.service.mock';
import { importProvidersFrom } from '@angular/core';
export default {
component: LanguageMenuComponent,
title: 'Core/Language Menu/Language Menu',
decorators: [
moduleMetadata({
imports: [...LANGUAGE_MENU_DIRECTIVES],
providers: [{ provide: LanguageService, useClass: LanguageServiceMock }]
}),
applicationConfig({
providers: [importProvidersFrom(CoreStoryModule)]
})
],
parameters: {
docs: {
description: {
component: `Displays all the languages that are present in "app.config.json" and the default (EN).`
}
}
},
argTypes: {
changedLanguage: {
action: 'changedLanguage',
description: 'Emitted when the user clicks on one of the language buttons.',
table: {
category: 'Actions',
type: { summary: 'EventEmitter <LanguageItem>' }
}
}
}
} as Meta<LanguageMenuComponent>;
const LanguageMenuComponentTemplate: StoryFn<LanguageMenuComponent> = (args) => ({
props: args
});
LanguageMenuComponentTemplate.parameters = { layout: 'centered' };
export const AsMainMenu = LanguageMenuComponentTemplate.bind({});
AsMainMenu.decorators = [
componentWrapperDecorator(
(story) => `
<button mat-icon-button [matMenuTriggerFor]="langMenu">
<mat-icon>
language
</mat-icon>
</button>
<mat-menu #langMenu="matMenu">
${story}
</mat-menu>
`
)
];
AsMainMenu.parameters = { layout: 'centered' };
export const AsNestedMenu = LanguageMenuComponentTemplate.bind({});
AsNestedMenu.decorators = [
componentWrapperDecorator(
(story) => `
<button mat-icon-button [matMenuTriggerFor]="profileMenu">
<mat-icon>
more_vert
</mat-icon>
</button>
<mat-menu #profileMenu="matMenu">
<button mat-menu-item [matMenuTriggerFor]="langMenu">
<mat-icon>
language
</mat-icon>
Language
</button>
</mat-menu>
<mat-menu #langMenu="matMenu">
${story}
</mat-menu>
`
)
];
AsNestedMenu.parameters = { layout: 'centered' };

70
lib/core/src/lib/language-menu/language-picker.component.stories.ts
View File

@@ -1,70 +0,0 @@
/*!
* @license
* Copyright © 2005-2025 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 { applicationConfig, componentWrapperDecorator, Meta, moduleMetadata, StoryFn } from '@storybook/angular';
import { CoreStoryModule } from '../testing/core.story.module';
import { LANGUAGE_MENU_DIRECTIVES } from './language-menu.module';
import { LanguagePickerComponent } from './language-picker.component';
import { LanguageService } from './service/language.service';
import { LanguageServiceMock } from '../mock/language.service.mock';
import { importProvidersFrom } from '@angular/core';
export default {
component: LanguagePickerComponent,
title: 'Core/Language Menu/Language Picker',
decorators: [
moduleMetadata({
imports: [...LANGUAGE_MENU_DIRECTIVES],
providers: [{ provide: LanguageService, useClass: LanguageServiceMock }]
}),
applicationConfig({
providers: [importProvidersFrom(CoreStoryModule)]
})
],
argTypes: {
changedLanguage: {
action: 'changedLanguage',
description: 'Emitted when the user clicks on one of the language buttons.',
table: {
category: 'Actions',
type: { summary: 'EventEmitter <LanguageItem>' }
}
}
}
} as Meta<LanguagePickerComponent>;
const languagePickerComponentTemplate: StoryFn<LanguagePickerComponent> = (args) => ({
props: args
});
export const Primary = languagePickerComponentTemplate.bind({});
Primary.parameters = { layout: 'centered' };
export const AsNestedMenu = languagePickerComponentTemplate.bind({});
AsNestedMenu.decorators = [
componentWrapperDecorator(
(story) => `
<button mat-icon-button [matMenuTriggerFor]="menu">
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu="matMenu">
${story}
</mat-menu>
`
)
];
AsNestedMenu.parameters = { layout: 'centered' };

142
lib/core/src/lib/layout/components/header/header.component.stories.ts
View File

@@ -1,142 +0,0 @@
/*!
* @license
* Copyright © 2005-2025 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 { applicationConfig, Meta, moduleMetadata, StoryFn } from '@storybook/angular';
import { CoreStoryModule } from '../../../testing/core.story.module';
import { LAYOUT_DIRECTIVES } from '../../layout.module';
import { HeaderLayoutComponent } from './header.component';
import { RouterTestingModule } from '@angular/router/testing';
import { importProvidersFrom } from '@angular/core';
export default {
component: HeaderLayoutComponent,
title: 'Core/Layout/Header',
decorators: [
moduleMetadata({
imports: [CoreStoryModule, ...LAYOUT_DIRECTIVES, RouterTestingModule]
}),
applicationConfig({
providers: [importProvidersFrom(CoreStoryModule)]
})
],
parameters: {
docs: {
description: {
component: `This component displays a customizable header for Alfresco applications that can be reused.
Use the input properties to configure the left side (title, button) and the primary color of the header.
The right part of the header can contain other components which are transcluded in the header component.`
}
}
},
argTypes: {
color: {
control: 'radio',
options: ['primary', 'accent', 'warn', '#42f57e', undefined],
description: `Background color for the header.
It can be any hex color code or one of the Material theme colors: 'primary', 'accent' or 'warn'`,
table: {
type: { summary: 'ThemePalette' },
defaultValue: { summary: 'undefined' }
}
},
expandedSidenav: {
control: 'boolean',
description: 'Toggles the expanded state of the component',
defaultValue: true,
table: {
type: { summary: 'boolean' },
defaultValue: { summary: 'true' }
}
},
showSidenavToggle: {
control: 'boolean',
description: 'Toggles whether the sidenav button will be displayed in the header or not',
defaultValue: true,
table: {
type: { summary: 'boolean' },
defaultValue: { summary: 'true' }
}
},
logo: {
control: 'text',
description: 'Path to an image file for the application logo',
table: {
type: { summary: 'string' },
defaultValue: { summary: 'undefined' }
}
},
title: {
control: 'text',
description: 'Title of the application',
table: {
type: { summary: 'string' },
defaultValue: { summary: 'undefined' }
}
},
tooltip: {
control: 'text',
description: 'The tooltip text for the application logo',
table: {
type: { summary: 'string' },
defaultValue: { summary: 'undefined' }
}
},
position: {
control: 'radio',
options: ['start', 'end'],
description: `The side of the page that the drawer is attached to (can be 'start' or 'end')`,
defaultValue: 'start',
table: {
type: { summary: 'string' },
defaultValue: { summary: 'start' }
}
},
redirectUrl: {
control: 'text',
description: 'The router link for the application logo, when clicked',
defaultValue: '/',
table: {
type: { summary: 'string | any[]' },
defaultValue: { summary: '/' }
}
},
clicked: {
action: 'clicked',
description: 'Emitted when the sidenav button is clicked',
table: {
type: { summary: 'EventEmitter <boolean>' },
category: 'Actions'
}
}
},
args: {
expandedSidenav: true,
showSidenavToggle: true,
position: 'start',
redirectUrl: '/'
}
} as Meta<HeaderLayoutComponent>;
const template: StoryFn<HeaderLayoutComponent> = (args) => ({
props: args
});
export const header = template.bind({});
header.args = {
title: 'Hello from Header!',
tooltip: 'Default Tooltip text'
};

81
lib/core/src/lib/layout/components/sidebar-action/sidebar-action.component.stories.ts
View File

@@ -1,81 +0,0 @@
/*!
* @license
* Copyright © 2005-2025 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 { applicationConfig, Meta, moduleMetadata, StoryFn } from '@storybook/angular';
import { CoreStoryModule } from '../../../testing/core.story.module';
import { LAYOUT_DIRECTIVES } from '../../layout.module';
import { SidebarActionMenuComponent } from './sidebar-action-menu.component';
import { importProvidersFrom } from '@angular/core';
export default {
component: SidebarActionMenuComponent,
title: 'Core/Layout/Sidebar Action Menu',
decorators: [
moduleMetadata({
imports: [CoreStoryModule, ...LAYOUT_DIRECTIVES]
}),
applicationConfig({
providers: [importProvidersFrom(CoreStoryModule)]
})
],
parameters: {
docs: {
description: {
component: `Displays a sidebar-action menu information panel.`
}
}
},
argTypes: {
expanded: {
control: 'boolean',
description: 'Toggle the sidebar action menu on expand',
table: {
type: { summary: 'boolean' },
defaultValue: { summary: 'true' }
}
},
title: {
control: 'text',
description: 'The title of the sidebar action',
table: {
type: { summary: 'string' },
defaultValue: { summary: 'undefined' }
}
},
width: {
control: 'number',
description: 'Width in pixels for sidebar action menu options',
table: {
type: { summary: 'number' },
defaultValue: { summary: '272' }
}
}
},
args: {
expanded: true,
width: 272
}
} as Meta<SidebarActionMenuComponent>;
const template: StoryFn<SidebarActionMenuComponent> = (args) => ({
props: args
});
export const sidebarActionMenu = template.bind({});
sidebarActionMenu.args = {
title: 'Hello from Sidebar Action Menu!'
};

234
lib/core/src/lib/layout/components/sidenav-layout/sidenav-layout.component.stories.ts
View File

@@ -1,234 +0,0 @@
/*!
* @license
* Copyright © 2005-2025 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 { applicationConfig, Meta, moduleMetadata, StoryFn } from '@storybook/angular';
import { CoreStoryModule } from '../../../testing/core.story.module';
import { LAYOUT_DIRECTIVES } from '../../layout.module';
import { SidenavLayoutComponent } from './sidenav-layout.component';
import { MatListModule } from '@angular/material/list';
import { MatIconModule } from '@angular/material/icon';
import { RouterTestingModule } from '@angular/router/testing';
import { importProvidersFrom } from '@angular/core';
export default {
component: SidenavLayoutComponent,
title: 'Core/Layout/Sidenav Layout',
decorators: [
moduleMetadata({
imports: [CoreStoryModule, ...LAYOUT_DIRECTIVES, RouterTestingModule, MatIconModule, MatListModule]
}),
applicationConfig({
providers: [importProvidersFrom(CoreStoryModule)]
})
],
parameters: {
docs: {
description: {
component: `Displays the standard three-region ADF application layout.`
}
}
},
argTypes: {
expandedSidenav: {
control: 'boolean',
description: 'Toggles the expand of navigation region',
defaultValue: true,
table: {
type: { summary: 'boolean' },
defaultValue: { summary: 'true' },
category: 'Navigation'
}
},
hideSidenav: {
control: 'boolean',
description: 'Toggles showing/hiding the navigation region',
defaultValue: false,
table: {
type: { summary: 'boolean' },
defaultValue: { summary: 'false' },
category: 'Navigation'
}
},
position: {
control: 'radio',
options: ['start', 'end'],
description: `The side of the page that the drawer is attached to (can be 'start' or 'end')`,
defaultValue: 'start',
table: {
type: { summary: 'string' },
defaultValue: { summary: 'start' },
category: 'Navigation'
}
},
sidenavMax: {
control: 'number',
description: 'Maximum size of the navigation region',
table: {
type: { summary: 'number' },
defaultValue: { summary: 'undefined' },
category: 'Navigation'
}
},
sidenavMin: {
control: 'number',
description: 'Minimum size of the navigation region',
table: {
type: { summary: 'number' },
defaultValue: { summary: 'undefined' },
category: 'Navigation'
}
},
stepOver: {
control: 'number',
description: 'Screen size at which display switches from small screen to large screen configuration',
table: {
type: { summary: 'number' },
defaultValue: { summary: 'undefined' }
}
},
title: {
control: 'text',
description: 'Title of the application',
table: {
type: { summary: 'string' },
defaultValue: { summary: 'undefined' },
category: 'Header'
}
},
color: {
control: 'radio',
options: ['primary', 'accent', 'warn', undefined],
description: `Background color for the header.
It can be any hex color code or one of the Material theme colors: 'primary', 'accent' or 'warn'`,
table: {
type: { summary: 'ThemePalette' },
defaultValue: { summary: 'undefined' },
category: 'Header'
}
},
clicked: {
action: 'expanded',
description: 'Emitted when the menu toggle and the collapsed/expanded state of the sideNav changes',
table: {
type: { summary: 'EventEmitter <boolean>' },
category: 'Actions'
}
}
},
args: {
expandedSidenav: true,
hideSidenav: false,
position: 'start'
}
} as Meta<SidenavLayoutComponent>;
const template: StoryFn<SidenavLayoutComponent> = (args) => ({
props: args,
template: `
<adf-sidenav-layout
[sidenavMin]="sidenavMin"
[sidenavMax]="sidenavMax"
[stepOver]="stepOver"
[position]="position"
[hideSidenav]="hideSidenav"
[expandedSidenav]="expandedSidenav"
>
<div class="adf-sidenav-layout-full-space">
<adf-sidenav-layout-header>
<ng-template>
<adf-layout-header [title]="title" [color]="color"></adf-layout-header>
</ng-template>
</adf-sidenav-layout-header>
<adf-sidenav-layout-navigation>
<ng-template>
<mat-nav-list class="app-sidenav-linklist">
<mat-list-item class="app-sidenav-link">
<mat-icon matListItemIcon>home</mat-icon>
<span matLine>Home</span>
</mat-list-item>
<mat-list-item class="app-sidenav-link">
<mat-icon matListItemIcon>device_hub</mat-icon>
<span matLine>Content Processes</span>
</mat-list-item>
<mat-list-item class="app-sidenav-link">
<mat-icon matListItemIcon>folder_open</mat-icon>
<span matLine>Files</span>
</mat-list-item>
<mat-list-item class="app-sidenav-link">
<mat-icon matListItemIcon>rowing</mat-icon>
<span matLine>Quick Search</span>
</mat-list-item>
<mat-list-item class="app-sidenav-link">
<mat-icon matListItemIcon>cloud</mat-icon>
<span matLine>Cloud</span>
</mat-list-item>
<mat-list-item class="app-sidenav-link">
<mat-icon matListItemIcon>settings</mat-icon>
<span matLine>Settings</span>
</mat-list-item>
<mat-list-item adf-logout class="app-sidenav-link" data-automation-id="Logout">
<mat-icon matListItemIcon>exit_to_app</mat-icon>
<span matLine>Logout</span>
</mat-list-item>
</mat-nav-list>
</ng-template>
</adf-sidenav-layout-navigation>
<adf-sidenav-layout-content>
<ng-template>
<div class="fake-router-outlet">
Thanks to transclusion you can put anything you want inside header, sidenav and this (content) sections.
<a href="https://github.com/Alfresco/alfresco-ng2-components/blob/develop/docs/core/components/header.component.md"
target="_blank">ADF Layout Header component</a> is located in header section. In navigation, there is
<a href="https://material.angular.io/components/list/overview#navigation-lists"
target="_blank">Angular Material Navigation list</a> where items can contain routes to ADF components which then they will be rendered here, in content section.
<br/><br/>
Bob Ross Lorem ipsum.. I'm gonna start with a little Alizarin crimson and a touch of Prussian blue No pressure. Just relax and watch it happen. In life you need colors.
This is your world, whatever makes you happy you can put in it. Go crazy. Have fun with it.
Just relax and let it flow. That easy. We might as well make some Almighty mountains today as well, what the heck. Each highlight must have it's own private shadow.
It's so important to do something every day that will make you happy.
Use your imagination, let it go. The very fact that you're aware of suffering is enough reason to be overjoyed that you're alive and can experience it.
<br/><br/>
Brown is such a nice color. Let your imagination be your guide. You need the dark in order to show the light.
Don't be afraid to make these big decisions. Once you start, they sort of just make themselves.
Don't kill all your dark areas - you need them to show the light. We artists are a different breed of people. We're a happy bunch.
You can create the world you want to see and be a part of. You have that power. We'll have a super time. If these lines aren't straight, your water's going to run right out of your painting and get your floor wet.
Nature is so fantastic, enjoy it. Let it make you happy. Didn't you know you had that much power?
You can move mountains. You can do anything. If you do too much it's going to lose its effectiveness. Everything's not great in life, but we can still find beauty in it.
And maybe, maybe, maybe... I like to beat the brush. And maybe a little bush lives there. Every single thing in the world has its own personality - and it is up to you to make friends with the little rascals.
</div>
</ng-template>
</adf-sidenav-layout-content>
</div>
</adf-sidenav-layout>`
});
export const SidenavLayout = template.bind({});
SidenavLayout.args = {
sidenavMin: 85,
sidenavMax: 250,
stepOver: 600,
position: 'start',
title: 'Hello from Sidenav Layout!'
};

98
lib/core/src/lib/login/components/login-dialog/login-dialog.component.stories.ts
View File

@@ -1,98 +0,0 @@
/*!
* @license
* Copyright © 2005-2025 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 { RouterTestingModule } from '@angular/router/testing';
import { applicationConfig, Meta, moduleMetadata, StoryFn } from '@storybook/angular';
import { AuthenticationService } from '../../../auth';
import { AuthenticationMock } from '../../../auth/mock/authentication.service.mock';
import { LoginDialogStorybookComponent } from './login-dialog.stories.component';
import { LoginDialogComponent } from './login-dialog.component';
import { importProvidersFrom } from '@angular/core';
import { CoreStoryModule } from '../../../../..';
export default {
component: LoginDialogStorybookComponent,
title: 'Core/Login/Login Dialog',
decorators: [
moduleMetadata({
imports: [LoginDialogComponent, RouterTestingModule]
}),
applicationConfig({
providers: [{ provide: AuthenticationService, useClass: AuthenticationMock }, importProvidersFrom(CoreStoryModule)]
})
],
parameters: {
docs: {
description: {
component: `Allows a user to perform a login via a dialog.`
}
}
},
argTypes: {
correct: {
name: 'To test correct functionality:',
description: 'Use `fake-username` and `fake-password`.',
table: { category: 'Storybook Info' }
},
corsError: {
name: 'To test CORS error:',
description: 'Use `fake-username-CORS-error` and `fake-password`.',
table: { category: 'Storybook Info' }
},
csrfError: {
name: 'To test CSRF error:',
description: 'Use `fake-username-CSRF-error` and `fake-password`.',
table: { category: 'Storybook Info' }
},
ecmAccessError: {
name: 'To test ECM access error:',
description: 'Use `fake-username-ECM-access-error` and `fake-password`.',
table: { category: 'Storybook Info' }
},
closed: {
action: 'closed',
description: 'Emitted when the dialog is closed.',
table: {
type: { summary: 'EventEmitter <any>' },
category: 'Actions'
}
},
error: {
action: 'error',
description: 'Emitted when the login fails.',
table: {
type: { summary: 'EventEmitter <any>' },
category: 'Actions'
}
},
executeSubmit: {
action: 'executeSubmit',
description: 'Emitted when the login form is submitted.',
table: {
type: { summary: 'EventEmitter <any>' },
category: 'Actions'
}
}
}
} as Meta<LoginDialogStorybookComponent>;
const template: StoryFn<LoginDialogStorybookComponent> = (args) => ({
props: args
});
export const LoginDialog = template.bind({});
LoginDialog.parameters = { layout: 'centered' };

1
lib/core/src/lib/login/components/login-dialog/login-dialog.component.ts
View File

@@ -22,6 +22,7 @@ import { TranslatePipe } from '@ngx-translate/core';
import { LoginDialogPanelComponent } from '../login-dialog-panel/login-dialog-panel.component';
import { LoginDialogComponentData } from './login-dialog-component-data.interface';
/** @deprecated this component will be removed because it's unused https://hyland.atlassian.net/browse/ACS-10178 */
@Component({
selector: 'adf-login-dialog',
templateUrl: './login-dialog.component.html',

63
lib/core/src/lib/login/components/login-dialog/login-dialog.stories.component.ts
View File

@@ -1,63 +0,0 @@
/*!
* @license
* Copyright © 2005-2025 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, Output, EventEmitter } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatDialog } from '@angular/material/dialog';
import { Subject } from 'rxjs';
import { LoginDialogComponent } from './login-dialog.component';
import { LoginDialogComponentData } from './login-dialog-component-data.interface';
@Component({
selector: 'adf-login-dialog-storybook',
imports: [MatButtonModule],
template: ` <button mat-raised-button (click)="openLoginDialog()">Open dialog</button>`
})
export class LoginDialogStorybookComponent {
@Output() executeSubmit = new EventEmitter<string>();
@Output() error = new EventEmitter<string>();
@Output() closed = new EventEmitter<string>();
constructor(private dialog: MatDialog) {}
openLoginDialog() {
const data: LoginDialogComponentData = {
title: 'Perform a Login',
actionName: 'LOGIN',
logged: new Subject<any>()
};
this.dialog.open(LoginDialogComponent, {
data,
panelClass: 'adf-login-dialog',
width: '630px'
});
data.logged.subscribe(
() => {
this.executeSubmit.emit('executeSubmit');
},
(error) => {
this.error.emit(error);
},
() => {
this.closed.emit('closed');
this.dialog.closeAll();
}
);
}
}

177
lib/core/src/lib/login/components/login/login.component.stories.ts
View File

@@ -1,177 +0,0 @@
/*!
* @license
* Copyright © 2005-2025 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 { RouterModule } from '@angular/router';
import { applicationConfig, Meta, moduleMetadata, StoryFn } from '@storybook/angular';
import { AuthenticationService } from '../../../auth';
import { AuthenticationMock } from '../../../auth/mock/authentication.service.mock';
import { LoginComponent } from './login.component';
import { importProvidersFrom } from '@angular/core';
import { CoreStoryModule } from '../../../../..';
export default {
component: LoginComponent,
title: 'Core/Login/Login',
decorators: [
moduleMetadata({
imports: [LoginComponent],
providers: [{ provide: AuthenticationService, useClass: AuthenticationMock }]
}),
applicationConfig({
providers: [importProvidersFrom(CoreStoryModule), importProvidersFrom(RouterModule.forRoot([], { useHash: true }))]
})
],
parameters: {
docs: {
description: {
component: `Authenticates to Alfresco Content Services and Alfresco Process Services.`
}
}
},
argTypes: {
correct: {
name: 'To test correct functionality:',
description: 'Use `fake-username` and `fake-password`.',
table: { category: 'Storybook Info' }
},
corsError: {
name: 'To test CORS error:',
description: 'Use `fake-username-CORS-error` and `fake-password`.',
table: { category: 'Storybook Info' }
},
csrfError: {
name: 'To test CSRF error:',
description: 'Use `fake-username-CSRF-error` and `fake-password`.',
table: { category: 'Storybook Info' }
},
ecmAccessError: {
name: 'To test ECM access error:',
description: 'Use `fake-username-ECM-access-error` and `fake-password`.',
table: { category: 'Storybook Info' }
},
showRememberMe: {
control: 'boolean',
description:
'Should the `Remember me` checkbox be shown? When selected, this option will remember the logged-in user after the browser is closed to avoid logging in repeatedly.',
table: {
type: { summary: 'boolean' },
defaultValue: { summary: 'true' }
}
},
showLoginActions: {
control: 'boolean',
description: 'Should the extra actions (`Need Help`, `Register`, etc) be shown?',
defaultValue: true,
table: {
type: { summary: 'boolean' },
defaultValue: { summary: 'true' }
}
},
needHelpLink: {
control: 'text',
description: 'Sets the URL of the NEED HELP link in the footer.',
defaultValue: '/?path=/story/core-login-login--login',
table: {
type: { summary: 'string' },
defaultValue: { summary: '/?path=/story/core-login-login--login' }
}
},
registerLink: {
control: 'text',
description: 'Sets the URL of the REGISTER link in the footer.',
defaultValue: '/?path=/story/core-login-login--login',
table: {
type: { summary: 'string' },
defaultValue: { summary: '/?path=/story/core-login-login--login' }
}
},
logoImageUrl: {
control: 'text',
description: 'Path to a custom logo image.',
defaultValue: './assets/images/alfresco-logo.svg',
table: {
type: { summary: 'string' },
defaultValue: { summary: './assets/images/alfresco-logo.svg' }
}
},
backgroundImageUrl: {
control: 'text',
description: 'Path to a custom background image.',
defaultValue: './assets/images/background.svg',
table: {
type: { summary: 'string' },
defaultValue: { summary: './assets/images/background.svg' }
}
},
copyrightText: {
control: 'text',
description: 'The copyright text below the login box.',
defaultValue: '\u00A9 2005-2025 Hyland Software, Inc. and its affiliates. All rights reserved.',
table: {
type: { summary: 'string' },
defaultValue: { summary: '\u00A9 2005-2025 Hyland Software, Inc. and its affiliates. All rights reserved.' }
}
},
fieldsValidation: {
control: 'object',
description: 'Custom validation rules for the login form.',
table: {
type: { summary: 'any' },
defaultValue: { summary: 'undefined' }
}
},
successRoute: {
control: 'text',
description: 'Route to redirect to on successful login.',
defaultValue: '.',
table: {
type: { summary: 'string' },
defaultValue: { summary: '.' }
}
},
success: {
action: 'success',
description: 'Emitted when the login is successful.',
table: {
type: { summary: 'EventEmitter <LoginSuccessEvent>' },
category: 'Actions'
}
},
error: {
action: 'error',
description: 'Emitted when the login fails.',
table: {
type: { summary: 'EventEmitter <LoginErrorEvent>' },
category: 'Actions'
}
},
executeSubmit: {
action: 'executeSubmit',
description: 'Emitted when the login form is submitted.',
table: {
type: { summary: 'EventEmitter <LoginSubmitEvent>' },
category: 'Actions'
}
}
}
} as Meta<LoginComponent>;
const template: StoryFn<LoginComponent> = (args) => ({
props: args
});
export const Login = template.bind({});

63
lib/core/src/lib/mock/data-column.mock.ts
View File

@@ -1,63 +0,0 @@
/*!
* @license
* Copyright © 2005-2025 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 { mockPathInfos } from '../datatable/components/mocks/datatable.mock';
export const textColumnRows = [{ firstname: 'John' }, { firstname: 'Henry' }, { firstname: 'David' }, { firstname: 'Thomas' }];
export const dateColumnRows = [
{ createdOn: new Date(2016, 6, 1, 11, 8, 4) },
{ createdOn: new Date(2018, 4, 3, 12, 8, 4) },
{ createdOn: new Date(2021, 2, 3, 9, 8, 4) }
];
const aMinuteInMilliseconds = 60 * 1000;
const anHourInMilliseconds = 60 * aMinuteInMilliseconds;
const aDayInMilliseconds = 24 * anHourInMilliseconds;
export const dateColumnTimeAgoRows = [
{ modifiedOn: new Date() },
{ modifiedOn: new Date(Date.now() - 44 * aMinuteInMilliseconds) },
{ modifiedOn: new Date(Date.now() - 45 * aMinuteInMilliseconds) },
{ modifiedOn: new Date(Date.now() - 23 * anHourInMilliseconds) },
{ modifiedOn: new Date(Date.now() - 7 * aDayInMilliseconds) },
{ modifiedOn: new Date(Date.now() - 8 * aDayInMilliseconds) }
];
export const locationColumnRows = [
{
path: mockPathInfos[0]
},
{
path: mockPathInfos[1]
},
{
path: mockPathInfos[2]
}
];
export const booleanColumnRows = [{ bool: 'true' }, { bool: 'false' }, { bool: true }, { bool: false }];
export const iconColumnRows = [{ icon: 'alarm' }, { icon: 'folder_open' }, { icon: 'accessibility' }];
export const imageColumnRows = [{ image: 'material-icons://image' }, { image: 'material-icons://image' }, { image: 'material-icons://image' }];
export const fileSizeColumnRows = [{ size: 12313 }, { size: 23 }, { size: 42421412421 }];
export const amountColumnRows = [{ price: 1230 }, { price: 422.55 }, { price: 50000.7855332 }, { price: 0.123 }, { price: -2022.3321 }];
export const jsonColumnRows = [{ rowInfo: { id: 1, name: 'row1' } }, { rowInfo: { id: 2, name: 'row2' } }, { rowInfo: { id: 3, name: 'row3' } }];

54
lib/core/src/lib/mock/language.service.mock.ts
View File

@@ -1,54 +0,0 @@
/*!
* @license
* Copyright © 2005-2025 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 { LanguageServiceInterface } from '../language-menu/service/language.service.interface';
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { LanguageItem } from '../common/services/language-item.interface';
@Injectable()
export class LanguageServiceMock implements LanguageServiceInterface {
private languages = new BehaviorSubject<LanguageItem[]>([
{ key: 'de', label: 'Deutsch' },
{ key: 'en', label: 'English' },
{ key: 'es', label: 'Español' },
{ key: 'fr', label: 'Français' },
{ key: 'it', label: 'Italiano' },
{ key: 'ja', label: '日本語' },
{ key: 'nb', label: 'Bokmål' },
{ key: 'nl', label: 'Nederlands' },
{ key: 'pt-BR', label: 'Português (Brasil)' },
{ key: 'ru', label: 'Русский' },
{ key: 'zh-CN', label: '中文简体' },
{ key: 'cs', label: 'Čeština' },
{ key: 'da', label: 'Dansk' },
{ key: 'fi', label: 'Suomi' },
{ key: 'pl', label: 'Polski' },
{ key: 'sv', label: 'Svenska' },
{ key: 'ar', label: 'العربية', direction: 'rtl' }
]);
languages$ = this.languages.asObservable();
changeLanguage(_language: LanguageItem): void {}
setLanguages(items: LanguageItem[]): void {
if (items?.length > 0) {
this.languages.next(items);
}
}
}

2
lib/core/src/lib/mock/public-api.ts
View File

@@ -21,5 +21,3 @@ export * from './translation.service.mock';
export * from './form/form.service.mock';
export * from './form/widget-visibility.service.mock';
export * from './data-column.mock';

36
lib/core/src/lib/notifications/components/add-notification.stories.component.ts
View File

@@ -1,36 +0,0 @@
/*!
* @license
* Copyright © 2005-2025 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 } from '@angular/core';
import { NotificationService } from '../services/notification.service';
import { MatButtonModule } from '@angular/material/button';
@Component({
selector: 'adf-add-notification-storybook',
imports: [MatButtonModule],
template: ` <button mat-raised-button (click)="showInfo()">Add Notification</button>`
})
export class AddNotificationStorybookComponent {
infoCounter: number = 1;
constructor(private notificationService: NotificationService) {}
showInfo() {
this.notificationService.showInfo(`Example notification ${this.infoCounter}`);
this.infoCounter++;
}
}

92
lib/core/src/lib/notifications/components/notification-history.component.stories.ts
View File

@@ -1,92 +0,0 @@
/*!
* @license
* Copyright © 2005-2025 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 { applicationConfig, Meta, moduleMetadata, StoryFn } from '@storybook/angular';
import { CoreStoryModule } from '../../testing/core.story.module';
import { NotificationHistoryComponent } from './notification-history.component';
import { NOTIFICATION_HISTORY_DIRECTIVES } from '../notification-history.module';
import { importProvidersFrom } from '@angular/core';
export default {
component: NotificationHistoryComponent,
title: 'Core/Notification History/Notification History',
decorators: [
moduleMetadata({
imports: [CoreStoryModule, ...NOTIFICATION_HISTORY_DIRECTIVES]
}),
applicationConfig({
providers: [importProvidersFrom(CoreStoryModule)]
})
],
parameters: {
docs: {
description: {
component: `Lists notifications received in the current session. The notifications disappear from the list after refresh.`
}
}
},
argTypes: {
menuPositionX: {
control: 'inline-radio',
options: ['before', 'after'],
description: 'Custom choice for opening the menu at the bottom.',
table: {
type: { summary: 'MenuPositionX' },
defaultValue: { summary: 'after' }
}
},
menuPositionY: {
control: 'inline-radio',
options: ['below', 'above'],
description: 'Custom choice for opening the menu at the bottom.',
table: {
type: { summary: 'MenuPositionY' },
defaultValue: { summary: 'below' }
}
},
maxNotifications: {
control: 'number',
description: 'Maximum number of notifications to display. The rest will remain hidden until load more is clicked.',
table: {
type: { summary: 'number' },
defaultValue: { summary: '5' }
}
}
},
args: {
menuPositionX: 'after',
menuPositionY: 'below',
maxNotifications: 5
}
} as Meta<NotificationHistoryComponent>;
const template: StoryFn<NotificationHistoryComponent> = (args) => ({
props: args,
template: `
<div style="display:flex;flex-direction:column;align-items:center;">
<adf-notification-history
[menuPositionX]=menuPositionX
[menuPositionY]=menuPositionY
[maxNotifications]=maxNotifications>
</adf-notification-history>
<adf-add-notification-storybook>
</adf-add-notification-storybook>
</div>`
});
export const NotificationHistory = template.bind({});
NotificationHistory.parameters = { layout: 'centered' };

3
lib/core/src/lib/notifications/notification-history.module.ts
View File

@@ -17,9 +17,8 @@
import { NgModule } from '@angular/core';
import { NotificationHistoryComponent } from './components/notification-history.component';
import { AddNotificationStorybookComponent } from './components/add-notification.stories.component';
export const NOTIFICATION_HISTORY_DIRECTIVES = [NotificationHistoryComponent, AddNotificationStorybookComponent] as const;
export const NOTIFICATION_HISTORY_DIRECTIVES = [NotificationHistoryComponent] as const;
/** @deprecated use `...NOTIFICATION_HISTORY_DIRECTIVES` or import the individual directives */
@NgModule({

1
lib/core/src/lib/notifications/public-api.ts
View File

@@ -16,7 +16,6 @@
*/
export * from './components/notification-history.component';
export * from './components/add-notification.stories.component';
export * from './helpers/notification.factory';
export * from './models/notification.model';
export * from './services/notification.service';

99
lib/core/src/lib/pagination/pagination.component.stories.ts
View File

@@ -1,99 +0,0 @@
/*!
* @license
* Copyright © 2005-2025 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 { applicationConfig, Meta, moduleMetadata, StoryFn } from '@storybook/angular';
import { CoreStoryModule } from '../testing/core.story.module';
import { PAGINATION_DIRECTIVES } from './pagination.module';
import { PaginationComponent } from './pagination.component';
import { importProvidersFrom } from '@angular/core';
export default {
component: PaginationComponent,
title: 'Core/Pagination/Pagination',
decorators: [
moduleMetadata({
imports: [...PAGINATION_DIRECTIVES]
}),
applicationConfig({
providers: [importProvidersFrom(CoreStoryModule)]
})
],
argTypes: {
target: {
control: 'object',
description: 'Component that provides custom pagination support.',
table: { type: { summary: 'PaginatedComponent' } }
},
supportedPageSizes: {
control: 'object',
description: 'An array of page sizes.',
table: { type: { summary: 'number[]' } }
},
pagination: {
control: 'object',
description: 'Pagination object.',
table: {
type: { summary: 'PaginationModel' },
defaultValue: {
summary: 'PaginationModel',
detail:
'{\n skipCount: 0 /* How many entities exist in the collection before those included in this list? */,' +
'\n maxItems: 25 /* The value of the maxItems parameter used to generate this list. The default value is 100. */,' +
'\n totalItems: 0 /* An integer describing the total number of entities in the collection. */,' +
'\n count: 0, /* The number of objects in the entries array. */' +
'\n hasMoreItems: false /* Are there more entities in the collection beyond those in this response? */\n}'
}
}
},
change: {
action: 'change',
description: 'Emitted when pagination changes in any way.',
table: { category: 'Actions' }
},
changePageNumber: {
action: 'changePageNumber',
description: 'Emitted when the page number changes.',
table: { category: 'Actions' }
},
changePageSize: {
action: 'changePageSize',
description: 'Emitted when the page size changes.',
table: { category: 'Actions' }
},
nextPage: {
action: 'nextPage',
description: 'Emitted when the next page is requested.',
table: { category: 'Actions' }
},
prevPage: {
action: 'prevPage',
description: 'Emitted when the previous page is requested.',
table: { category: 'Actions' }
}
},
args: {
supportedPageSizes: [5, 10, 15, 20],
pagination: { skipCount: 0, maxItems: 25, totalItems: 100, count: 100, hasMoreItems: false }
}
} as Meta<PaginationComponent>;
const template: StoryFn<PaginationComponent> = (args) => ({
props: args
});
export const Pagination = template.bind({});
Pagination.parameters = { layout: 'centered' };

107
lib/core/src/lib/sorting-picker/sorting-picker.component.stories.ts
View File

@@ -1,107 +0,0 @@
/*!
* @license
* Copyright © 2005-2025 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 { applicationConfig, Meta, moduleMetadata, StoryFn } from '@storybook/angular';
import { CoreStoryModule } from '../testing/core.story.module';
import { SortingPickerComponent } from './sorting-picker.component';
import { importProvidersFrom } from '@angular/core';
const initialSortingTypes: Array<{ key: string; label: string }> = [
{ key: 'sortByFirstName', label: 'First Name' },
{ key: 'sortByLastName', label: 'Last Name' },
{ key: 'sortByBirthDate', label: 'Birth Date' }
];
const initialOptionKeys = [...initialSortingTypes.map((type) => type.key.toString())];
export default {
component: SortingPickerComponent,
title: 'Core/Sorting Picker/Sorting Picker',
decorators: [
moduleMetadata({
imports: [SortingPickerComponent]
}),
applicationConfig({
providers: [importProvidersFrom(CoreStoryModule)]
})
],
parameters: {
docs: {
description: {
component: `The picker shows the user a menu of sorting options (which could be data columns to sort on alphabetical vs numerical search, etc)
and the choice of ascending vs descending sort order.
Note that picker only implements the menu, so you are responsible for implementing the sorting options yourself.`
}
}
},
argTypes: {
selected: {
control: 'select',
options: initialOptionKeys,
description: 'Currently selected option key',
table: {
type: { summary: 'string' },
defaultValue: { summary: 'undefined' }
}
},
ascending: {
control: 'boolean',
description: 'Current sorting direction',
table: {
type: { summary: 'boolean' },
defaultValue: { summary: 'true' }
}
},
options: {
description: 'Available sorting options',
table: {
type: { summary: 'Array<{key: string; label: string}>' },
defaultValue: { summary: '[]' }
}
},
valueChange: {
action: 'valueChange',
description: 'Raised each time sorting key gets changed',
table: {
type: { summary: 'EventEmitter <string>' },
category: 'Actions'
}
},
sortingChange: {
action: 'sortingChange',
description: 'Raised each time direction gets changed',
table: {
type: { summary: 'EventEmitter <boolean>' },
category: 'Actions'
}
}
},
args: {
ascending: true,
options: []
}
} as Meta<SortingPickerComponent>;
const template: StoryFn<SortingPickerComponent> = (args) => ({
props: args
});
export const SortingPicker = template.bind({});
SortingPicker.args = {
options: initialSortingTypes
};
SortingPicker.parameters = { layout: 'centered' };

100
lib/core/src/lib/templates/empty-content/empty-content.component.stories.ts
View File

@@ -1,100 +0,0 @@
/*!
* @license
* Copyright © 2005-2025 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 { applicationConfig, Meta, moduleMetadata, StoryFn } from '@storybook/angular';
import { EmptyContentComponent } from './empty-content.component';
import { CoreStoryModule } from '../../testing/core.story.module';
import { TEMPLATE_DIRECTIVES } from '../template.module';
import { importProvidersFrom } from '@angular/core';
export default {
component: EmptyContentComponent,
title: 'Core/Template/Empty Content',
decorators: [
moduleMetadata({
imports: [CoreStoryModule, ...TEMPLATE_DIRECTIVES]
}),
applicationConfig({
providers: [importProvidersFrom(CoreStoryModule)]
})
],
parameters: {
docs: {
description: {
component: `Provides a generic "Empty Content" placeholder for components.`
}
}
},
argTypes: {
icon: {
control: 'text',
description: 'Material Icon to use.',
table: {
type: { summary: 'string' },
defaultValue: { summary: 'cake' }
}
},
title: {
control: 'text',
description: 'String or Resource Key for the title.',
table: {
type: { summary: 'string' },
defaultValue: { summary: 'title' }
}
},
subtitle: {
control: 'text',
description: 'String or Resource Key for the subtitle.',
table: {
type: { summary: 'string' },
defaultValue: { summary: 'subtitle' }
}
},
anyContentProjection: {
name: 'with any component / selector',
control: 'boolean',
description: 'Showcase content projection with any component / selector',
table: {
category: 'Content Projection',
type: {
summary: 'code',
detail: '<div style="color:red">\n projected content\n</div>'
},
defaultValue: { summary: 'false' }
}
}
},
args: {
icon: 'cake',
title: 'title',
subtitle: 'subtitle',
anyContentProjection: false
}
} as Meta<EmptyContentComponent>;
const template: StoryFn<EmptyContentComponent> = (args: EmptyContentComponent & { anyContentProjection: boolean }) => ({
props: args,
template: `
<adf-empty-content icon="${args.icon}" title="${args.title}" subtitle="${args.subtitle}">
<div *ngIf="${args.anyContentProjection}" style="color:red">
projected content
</div>
</adf-empty-content>`
});
export const EmptyContent = template.bind({});
EmptyContent.parameters = { layout: 'centered' };

84
lib/core/src/lib/templates/error-content/error-content.component.stories.ts
View File

@@ -1,84 +0,0 @@
/*!
* @license
* Copyright © 2005-2025 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 { applicationConfig, Meta, moduleMetadata, StoryFn } from '@storybook/angular';
import { ErrorContentComponent } from './error-content.component';
import { CoreStoryModule } from '../../testing/core.story.module';
import { ActivatedRoute } from '@angular/router';
import { of } from 'rxjs';
import { importProvidersFrom } from '@angular/core';
export default {
component: ErrorContentComponent,
title: 'Core/Template/Error Content',
decorators: [
moduleMetadata({
imports: [ErrorContentComponent],
providers: [{ provide: ActivatedRoute, useValue: { params: of({}) } }]
}),
applicationConfig({
providers: [importProvidersFrom(CoreStoryModule)]
})
],
parameters: {
docs: {
description: {
component: `Displays information about a specific error.`
}
}
},
argTypes: {
errorCode: {
control: 'text',
description: 'Error code associated with this error.',
table: {
type: { summary: 'string' },
defaultValue: { summary: 'UNKNOWN' }
}
},
errorContentActions: {
name: 'with adf-error-content-actions selector',
control: 'boolean',
description: 'Showcase content projection with <span style="color:red">adf-error-content-actions</span> selector',
table: {
category: 'Content Projection',
type: {
summary: 'code',
detail: '<div adf-error-content-actions>\n <button>MyAction</button>\n</div>'
},
defaultValue: { summary: 'false' }
}
}
},
args: {
errorCode: 'UNKNOWN',
errorContentActions: false
}
} as Meta<ErrorContentComponent>;
const template: StoryFn<ErrorContentComponent> = (args: ErrorContentComponent & { errorContentActions: boolean }) => ({
props: args,
template: `
<adf-error-content errorCode="${args.errorCode}">
<div adf-error-content-actions *ngIf="${args.errorContentActions}">
<button mat-raised-button type="button">MyAction</button>
</div>
</adf-error-content>`
});
export const ErrorContent = template.bind({});
ErrorContent.parameters = { layout: 'centered' };

29
lib/core/src/lib/testing/core.story.module.ts
View File

@@ -1,29 +0,0 @@
/*!
* @license
* Copyright © 2005-2025 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 { NgModule } from '@angular/core';
import { CoreModule } from '../core.module';
import { TranslateModule } from '@ngx-translate/core';
import { provideTranslations } from '../translation/translation.service';
import { provideAnimations } from '@angular/platform-browser/animations';
import { AuthModule } from '../auth/oidc/auth.module';
@NgModule({
imports: [AuthModule.forRoot(), TranslateModule.forRoot(), CoreModule.forRoot()],
providers: [provideTranslations('adf-core', 'assets/adf-core'), provideAnimations()]
})
export class CoreStoryModule {}

1
lib/core/src/lib/testing/index.ts
View File

@@ -15,7 +15,6 @@
* limitations under the License.
*/
export * from './core.story.module';
export * from './noop-translate.module';
export * from './noop-auth.module';
export * from './unit-testing-utils';

115
lib/core/src/lib/toolbar/toolbar.component.stories.ts
View File

@@ -1,115 +0,0 @@
/*!
* @license
* Copyright © 2005-2025 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 { applicationConfig, Meta, moduleMetadata, StoryFn } from '@storybook/angular';
import { CoreStoryModule } from '../testing/core.story.module';
import { ToolbarComponent } from './toolbar.component';
import { TOOLBAR_DIRECTIVES } from './toolbar.module';
import { importProvidersFrom } from '@angular/core';
export default {
component: ToolbarComponent,
title: 'Core/Toolbar/Toolbar',
decorators: [
moduleMetadata({
imports: [CoreStoryModule, ...TOOLBAR_DIRECTIVES]
}),
applicationConfig({
providers: [importProvidersFrom(CoreStoryModule)]
})
],
argTypes: {
color: {
control: 'radio',
options: ['primary', 'accent', 'warn', undefined],
description: 'Toolbar color.',
table: {
type: { summary: 'ThemePalette' },
defaultValue: { summary: 'undefined' }
}
},
title: {
control: 'text',
description: 'Toolbar title.',
table: {
type: { summary: 'string' },
defaultValue: { summary: '' }
}
},
toolbarTitle: {
name: 'with adf-toolbar-title component',
control: 'boolean',
description: 'Showcase content projection with <span style="color:red">adf-toolbar-title</span> component',
table: {
category: 'Content Projection',
type: {
summary: 'code',
detail: '<adf-toolbar-title>Projected Title</adf-toolbar-title>'
},
defaultValue: { summary: 'false' }
}
},
toolbarDivider: {
name: 'with adf-toolbar-divider component',
control: 'boolean',
description: 'Showcase content projection with <span style="color:red">adf-toolbar-divider</span> component',
table: {
category: 'Content Projection',
type: {
summary: 'code',
detail: 'left<adf-toolbar-divider></adf-toolbar-divider>right'
},
defaultValue: { summary: 'false' }
}
},
anyContentProjection: {
name: 'with any component / selector',
control: 'boolean',
description: 'Showcase content projection with any component / selector',
table: {
category: 'Content Projection',
type: {
summary: 'code',
detail: '<span style="color:red">projected content</span>'
},
defaultValue: { summary: 'false' }
}
}
},
args: {
title: '',
toolbarTitle: false,
toolbarDivider: false,
anyContentProjection: false
}
} as Meta<ToolbarComponent>;
const template: StoryFn<ToolbarComponent> = (
args: ToolbarComponent & { anyContentProjection: boolean } & { toolbarDivider: boolean } & { toolbarTitle: boolean }
) => ({
props: args,
template: `
<adf-toolbar color="${args.color}" title="${args.title}">
<ng-container *ngIf="${args.toolbarTitle}"><adf-toolbar-title>Projected Title</adf-toolbar-title></ng-container>
<ng-container *ngIf="${args.anyContentProjection}">
<span style="color:red">projected content</span>
</ng-container>
<ng-container *ngIf="${args.toolbarDivider}">left<adf-toolbar-divider></adf-toolbar-divider>right</ng-container>
</adf-toolbar>`
});
export const Toolbar = template.bind({});

1
lib/extensions/.eslintignore
View File

@@ -1,2 +1 @@
.storybook
coverage

1
lib/insights/.eslintignore
View File

@@ -1,2 +1 @@
.storybook
coverage

1
lib/js-api/.eslintignore
View File

@@ -1,3 +1,2 @@
.storybook
coverage
docs

1
lib/process-services-cloud/.eslintignore
View File

@@ -1,2 +1 @@
.storybook
coverage

17
lib/process-services-cloud/.storybook/main.js
View File

@@ -1,17 +0,0 @@
var rootPath = require('../../../.storybook/main');
module.exports = {
rootMain: rootPath,
stories: [...rootPath.stories, '../**/*.stories.@(js|jsx|ts|tsx)'],
staticDirs: [...rootPath.staticDirs, { from: __dirname + '/../src/lib/i18n', to: 'assets/adf-core/i18n' }],
addons: ['@storybook/addon-essentials', ...rootPath.addons],
framework: {
name: '@storybook/angular',
options: {}
},
docs: {}
};

6
lib/process-services-cloud/.storybook/manager.js
View File

@@ -1,6 +0,0 @@
import { addons } from '@storybook/manager-api';
import alfrescoTheme from '../../../.storybook/alfrescoTheme';
addons.setConfig({
theme: alfrescoTheme
});

5
lib/process-services-cloud/.storybook/preview.js
View File

@@ -1,5 +0,0 @@
export const parameters = {
docs: { inlineStories: true },
controls: { expanded: true }
};
export const tags = ['autodocs', 'autodocs'];

8
lib/process-services-cloud/.storybook/tsconfig.json
View File

@@ -1,8 +0,0 @@
{
"extends": "../../../tsconfig.json",
"compilerOptions": {
"emitDecoratorMetadata": true
},
"exclude": ["../**/*.spec.ts", "../**/*.mock.ts", "../**/test.ts", "../**/*.module.ts" ],
"include": ["../src/**/*", "*.js"]
}

16
lib/process-services-cloud/README.md
View File

@@ -9,7 +9,6 @@ Contains a variety of components, directives and services used throughout ADF
- [Documentation](#documentation)
- [Prerequisites](#prerequisites)
- [Install](#install)
- [Storybook](#storybook)
- [License](#license)
<!-- tocstop -->
@@ -34,21 +33,6 @@ necessary configuration, see this [page](https://github.com/Alfresco/alfresco-ng
npm install @alfresco/adf-process-services-cloud
```
## Storybook
In case you would like to aggregate all the stories from process services cloud library use
```
nx run process-services-cloud:storybook
```
And navigate to `http://localhost:4400/`.
To create a Storybook process services cloud library build use
```
nx run process-services-cloud:build-storybook
```
## License
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)

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

@@ -90,7 +90,9 @@ adf-cloud-app-details {
}
outline: none;
transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
transition:
transform 280ms cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
min-height: 200px;
flex-direction: column;
box-sizing: border-box;
@@ -99,7 +101,10 @@ adf-cloud-app-details {
max-width: unset;
&:hover {
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);
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);
cursor: pointer;
transform: scale(1.015);
}

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

@@ -1,57 +0,0 @@
/*!
* @license
* Copyright © 2005-2025 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 { applicationConfig, Meta, moduleMetadata, StoryFn } from '@storybook/angular';
import { AppDetailsCloudComponent } from './app-details-cloud.component';
import { ProcessServicesCloudStoryModule } from '../../../testing/process-services-cloud-story.module';
import { fakeApplicationInstance } from '../../mock/app-model.mock';
import { importProvidersFrom } from '@angular/core';
export default {
component: AppDetailsCloudComponent,
title: 'Process Services Cloud/App List Cloud/App Details Cloud',
decorators: [
moduleMetadata({
imports: [AppDetailsCloudComponent]
}),
applicationConfig({
providers: [importProvidersFrom(ProcessServicesCloudStoryModule)]
})
],
argTypes: {
applicationInstance: {
control: 'object',
table: {
type: { summary: 'ApplicationInstanceModel' }
}
},
selectedApp: {
action: 'selectedApp',
description: 'Emitted when an app entry is clicked.',
table: { category: 'Actions' }
}
},
args: {
applicationInstance: fakeApplicationInstance[0]
}
} as Meta<AppDetailsCloudComponent>;
const template: StoryFn<AppDetailsCloudComponent> = (args) => ({
props: args
});
export const AppDetailsCloud = template.bind({});

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

@@ -21,6 +21,7 @@ import { CommonModule } from '@angular/common';
import { MatIconModule } from '@angular/material/icon';
import { MatCardModule } from '@angular/material/card';
/** @deprecated this component will be removed because it's unused https://hyland.atlassian.net/browse/ACS-10178 */
@Component({
selector: 'adf-cloud-app-details',
imports: [CommonModule, MatIconModule, MatCardModule],

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

@@ -1,59 +0,0 @@
/*!
* @license
* Copyright © 2005-2025 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 { applicationConfig, Meta, moduleMetadata, StoryFn } from '@storybook/angular';
import { ProcessServicesCloudStoryModule } from '../../../testing/process-services-cloud-story.module';
import { AppListCloudComponent } from './app-list-cloud.component';
import { importProvidersFrom } from '@angular/core';
export default {
component: AppListCloudComponent,
title: 'Process Services Cloud/App List Cloud/App List Cloud',
decorators: [
moduleMetadata({
imports: [AppListCloudComponent]
}),
applicationConfig({
providers: [importProvidersFrom(ProcessServicesCloudStoryModule)]
})
],
argTypes: {
layoutType: {
control: 'radio',
options: ['GRID', 'LIST'],
description: 'Defines the layout of the apps.',
table: {
type: { summary: 'string' },
defaultValue: { summary: 'GRID' }
}
},
appClick: {
action: 'appClick',
description: 'Emitted when an app entry is clicked.',
table: { category: 'Actions' }
}
},
args: {
layoutType: 'GRID'
}
} as Meta<AppListCloudComponent>;
const template: StoryFn<AppListCloudComponent> = (args) => ({
props: args
});
export const AppListCloud = template.bind({});

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

@@ -33,6 +33,7 @@ export const LAYOUT_LIST: string = 'LIST';
export const LAYOUT_GRID: string = 'GRID';
export const DEPLOYED_STATUS: string = 'DEPLOYED';
/** @deprecated this component will be removed because it's unused https://hyland.atlassian.net/browse/ACS-10178 */
@Component({
selector: 'adf-cloud-app-list',
imports: [

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

@@ -15,8 +15,8 @@
* limitations under the License.
*/
export * from './components/app-list-cloud/app-list-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';
export * from './components/app-list-cloud/app-list-cloud.component';
export * from './components/app-details-cloud/app-details-cloud.component';

66
lib/process-services-cloud/src/lib/common/date-range-filter/date-range-filter.component.stories.ts
View File

@@ -1,66 +0,0 @@
/*!
* @license
* Copyright © 2005-2025 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 { applicationConfig, Meta, moduleMetadata, StoryFn } from '@storybook/angular';
import { ProcessServicesCloudStoryModule } from '../../testing/process-services-cloud-story.module';
import { mockFilterProperty } from '../mock/date-range-filter.mock';
import { DateRangeFilterComponent } from './date-range-filter.component';
import { importProvidersFrom } from '@angular/core';
export default {
component: DateRangeFilterComponent,
title: 'Process Services Cloud/Process Common/Date Range Filter',
decorators: [
moduleMetadata({
imports: [DateRangeFilterComponent]
}),
applicationConfig({
providers: [importProvidersFrom(ProcessServicesCloudStoryModule)]
})
],
argTypes: {
processFilterProperty: {
control: 'object',
table: {
type: { summary: 'ApplicationInstanceModel' }
}
},
options: {
control: 'object',
table: {
type: { summary: 'DateCloudFilterType[]' }
}
},
dateChanged: {
action: 'dateChanged',
table: { category: 'Actions' }
},
dateTypeChange: {
action: 'dateTypeChange',
table: { category: 'Actions' }
}
},
args: {
processFilterProperty: mockFilterProperty
}
} as Meta<DateRangeFilterComponent>;
const template: StoryFn<DateRangeFilterComponent> = (args) => ({
props: args
});
export const DateRangeFilter = template.bind({});

61
lib/process-services-cloud/src/lib/form/components/form-definition-selector-cloud.component.stories.ts
View File

@@ -1,61 +0,0 @@
/*!
* @license
* Copyright © 2005-2025 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 { applicationConfig, Meta, moduleMetadata, StoryFn } from '@storybook/angular';
import { FormDefinitionSelectorCloudComponent } from './form-definition-selector-cloud.component';
import { ProcessServicesCloudStoryModule } from '../../testing/process-services-cloud-story.module';
import { FormDefinitionSelectorCloudService } from '../services/form-definition-selector-cloud.service';
import { FormDefinitionSelectorCloudServiceMock } from '../mocks/form-definition-selector-cloud.service.mock';
import { importProvidersFrom } from '@angular/core';
export default {
component: FormDefinitionSelectorCloudComponent,
title: 'Process Services Cloud/Form Cloud/Form Definition Selector Cloud',
decorators: [
moduleMetadata({
imports: [FormDefinitionSelectorCloudComponent],
providers: [{ provide: FormDefinitionSelectorCloudService, useClass: FormDefinitionSelectorCloudServiceMock }]
}),
applicationConfig({
providers: [importProvidersFrom(ProcessServicesCloudStoryModule)]
})
],
argTypes: {
appName: {
control: 'text',
description: 'Name of the application. If specified, this shows the users who have access to the app.',
table: {
type: { summary: 'string' },
defaultValue: { summary: '' }
}
},
selectForm: {
action: 'selectForm',
description: 'Emitted when a form is selected.',
table: { category: 'Actions' }
}
},
args: {
appName: ''
}
} as Meta<FormDefinitionSelectorCloudComponent>;
const template: StoryFn<FormDefinitionSelectorCloudComponent> = (args) => ({
props: args
});
export const FormDefinitionSelectorCloud = template.bind({});

1
lib/process-services-cloud/src/lib/form/components/form-definition-selector-cloud.component.ts
View File

@@ -23,6 +23,7 @@ import { FormRepresentation } from '../../services/form-fields.interfaces';
import { CommonModule } from '@angular/common';
import { TranslatePipe } from '@ngx-translate/core';
/** @deprecated this component will be removed because it's unused https://hyland.atlassian.net/browse/ACS-10178 */
@Component({
selector: 'adf-cloud-form-definition-selector',
imports: [CommonModule, TranslatePipe, MatSelectModule],

101
lib/process-services-cloud/src/lib/form/mocks/form-cloud.service.mock.ts
View File

@@ -1,101 +0,0 @@
/*!
* @license
* Copyright © 2005-2025 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 { FormFieldOption, FormModel, FormValues } from '@alfresco/adf-core';
import { UploadApi } from '@alfresco/js-api';
import { Observable, of } from 'rxjs';
import { map, switchMap } from 'rxjs/operators';
import { FormContent } from '../../services/form-fields.interfaces';
import { TaskDetailsCloudModel } from '../../task/public-api';
import { taskDetailsContainer } from '../../task/task-header/mocks/task-details-cloud.mock';
import { fakeCloudForm } from '../mocks/cloud-form.mock';
import { TaskVariableCloud } from '../models/task-variable-cloud.model';
import { FormCloudServiceInterface } from '../services/form-cloud.service.interface';
export class FormCloudServiceMock implements FormCloudServiceInterface {
uploadApi: UploadApi;
getTaskForm(appName: string, taskId: string, version?: number): Observable<any> {
return this.getTask(appName, taskId).pipe(
switchMap((task) => this.getForm(appName, task.formKey, version).pipe(
map((form: FormContent) => {
const flattenForm = {
...form.formRepresentation,
...form.formRepresentation.formDefinition,
taskId: task.id,
taskName: task.name,
processDefinitionId: task.processDefinitionId,
processInstanceId: task.processInstanceId
};
delete flattenForm.formDefinition;
return flattenForm;
})
))
);
}
getTask(_appName: string, taskId: string): Observable<TaskDetailsCloudModel> {
return of(taskDetailsContainer[taskId]);
}
getForm(_appName: string, _formKey: string, _version?: number): Observable<FormContent> {
return of(fakeCloudForm);
}
getTaskVariables(_appName: string, _taskId: string): Observable<TaskVariableCloud[]> {
return of([new TaskVariableCloud({ name: 'name1', value: 5, type: 'text', id: '52' })]);
}
saveTaskForm(
_appName: string,
taskId: string,
_processInstanceId: string,
_formId: string,
_values: FormValues
): Observable<TaskDetailsCloudModel> {
return of(taskDetailsContainer[taskId]);
}
completeTaskForm(
_appName: string,
taskId: string,
_processInstanceId: string,
_formId: string,
_formValues: FormValues,
_outcome: string,
_version: number
): Observable<TaskDetailsCloudModel> {
return of(taskDetailsContainer[taskId]);
}
createTemporaryRawRelatedContent(_file: any, _nodeId: string, _contentHost: string): Observable<any> {
throw new Error('Method not implemented.');
}
getDropDownJsonData(_url: string): Observable<any> {
throw new Error('Method not implemented.');
}
parseForm(_json: any, _data?: TaskVariableCloud[], _readOnly: boolean = false): FormModel {
throw new Error('Method not implemented.');
}
getRestWidgetData(_formName: string, _widgetId: string, _body: Map<string, string>): Observable<FormFieldOption[]> {
throw new Error('Method not implemented.');
}
}

36
lib/process-services-cloud/src/lib/form/mocks/form-definition-selector-cloud.service.mock.ts
View File

@@ -1,36 +0,0 @@
/*!
* @license
* Copyright © 2005-2025 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 { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';
import { FormRepresentation } from '../../services/form-fields.interfaces';
import { FormDefinitionSelectorCloudServiceInterface } from '../services/form-definition-selector-cloud.service.interface';
import { mockFormRepresentations } from './form-representation.mock';
@Injectable({
providedIn: 'root'
})
export class FormDefinitionSelectorCloudServiceMock implements FormDefinitionSelectorCloudServiceInterface {
getForms(_appName: string): Observable<FormRepresentation[]> {
return of(mockFormRepresentations.map(response => response.formRepresentation));
}
getStandAloneTaskForms(_appName: string): Observable<FormRepresentation[]> {
return of(mockFormRepresentations.map(response => response.formRepresentation).filter((form: any) => form.standalone ? form : undefined));
}
}

1
lib/process-services-cloud/src/lib/form/services/form-definition-selector-cloud.service.interface.ts
View File

@@ -19,7 +19,6 @@ import { Observable } from 'rxjs';
import { FormRepresentation } from '../../services/form-fields.interfaces';
export interface FormDefinitionSelectorCloudServiceInterface {
getForms(appName: string): Observable<FormRepresentation[]>;
getStandAloneTaskForms(appName: string): Observable<FormRepresentation[]>;
}

2
lib/process-services-cloud/src/lib/form/services/form-definition-selector-cloud.service.ts
View File

@@ -22,6 +22,8 @@ import { BaseCloudService } from '../../services/base-cloud.service';
import { FormRepresentation } from '../../services/form-fields.interfaces';
import { FormDefinitionSelectorCloudServiceInterface } from './form-definition-selector-cloud.service.interface';
/** @deprecated this service will be removed because it's component is unused https://hyland.atlassian.net/browse/ACS-10178 */
@Injectable({
providedIn: 'root'
})

180
lib/process-services-cloud/src/lib/group/components/group-cloud.component.stories.ts
View File

@@ -1,180 +0,0 @@
/*!
* @license
* Copyright © 2005-2025 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 { applicationConfig, Meta, moduleMetadata, StoryFn } from '@storybook/angular';
import { GroupCloudComponent } from './group-cloud.component';
import { ProcessServicesCloudStoryModule } from '../../testing/process-services-cloud-story.module';
import { IdentityGroupService } from '../services/identity-group.service';
import { IdentityGroupServiceMock, mockFoodGroups, mockMeatChicken, mockVegetableAubergine } from '../mock/group-cloud.mock';
import { importProvidersFrom } from '@angular/core';
export default {
component: GroupCloudComponent,
title: 'Process Services Cloud/Group Cloud/Group Cloud',
decorators: [
moduleMetadata({
imports: [GroupCloudComponent]
}),
applicationConfig({
providers: [{ provide: IdentityGroupService, useClass: IdentityGroupServiceMock }, importProvidersFrom(ProcessServicesCloudStoryModule)]
})
],
argTypes: {
appName: {
control: 'text',
description: 'Name of the application. If specified this shows the groups who have access to the app.',
table: {
type: { summary: 'string' }
}
},
title: {
control: 'text',
description: 'Title of the field.',
table: {
type: { summary: 'string' }
}
},
mode: {
control: 'radio',
options: ['single', 'multiple'],
description: 'Group selection mode.',
table: {
type: { summary: 'ComponentSelectionMode' },
defaultValue: { summary: 'single' }
}
},
preSelectGroups: {
control: 'object',
description:
'Array of groups to be pre-selected. This pre-selects all groups in multi selection mode and only the first group of the array in single selection mode.',
table: {
type: { summary: 'IdentityGroupModel[]' },
defaultValue: { summary: '[]' }
}
},
validate: {
control: 'boolean',
description:
'This flag enables the validation on the preSelectGroups passed as input.\n\n' +
'In case the flag is true the components call the identity service to verify the validity of the information passed as input.\n\n' +
'Otherwise, no check will be done.',
table: {
type: { summary: 'boolean' },
defaultValue: { summary: 'false' }
}
},
readOnly: {
control: 'boolean',
description: 'Show the info in readonly mode.',
table: {
type: { summary: 'boolean' },
defaultValue: { summary: 'false' }
}
},
required: {
control: 'boolean',
description: 'Mark this field as required.',
table: {
type: { summary: 'boolean' },
defaultValue: { summary: 'false' }
}
},
groupChipsCtrl: {
control: 'object',
description: 'FormControl to list of group.',
table: {
type: { summary: 'FormControl' },
defaultValue: { summary: "new FormControl({ value: '', disabled: false })" },
category: 'Form Controls'
}
},
searchGroupsControl: {
control: 'object',
description: 'FormControl to search the group.',
table: {
type: { summary: 'FormControl' },
defaultValue: { summary: "new FormControl({ value: '', disabled: false })" },
category: 'Form Controls'
}
},
roles: {
control: 'object',
description: 'Role names of the groups to be listed.',
table: {
type: { summary: 'string[]' },
defaultValue: { summary: '[]' }
}
},
selectGroup: {
action: 'selectGroup',
description: 'Emitted when a group is selected.',
table: { category: 'Actions' }
},
removeGroup: {
action: 'removeGroup',
description: 'Emitted when a group is removed.',
table: { category: 'Actions' }
},
changedGroups: {
action: 'changedGroups',
description: 'Emitted when a group selection changes.',
table: { category: 'Actions' }
},
warning: {
action: 'warning',
description: 'Emitted when an warning occurs.',
table: { category: 'Actions' }
}
},
args: {
appName: 'app',
title: 'Groups',
mode: 'single',
preSelectGroups: [],
validate: false,
readOnly: false,
required: false,
roles: []
}
} as Meta<GroupCloudComponent>;
const template: StoryFn<GroupCloudComponent> = (args) => ({
props: args
});
export const DefaultGroupCloud = template.bind({});
export const ValidPreselectedGroups = template.bind({});
ValidPreselectedGroups.args = {
validate: true,
mode: 'multiple',
preSelectGroups: mockFoodGroups
};
export const MandatoryPreselectedGroups = template.bind({});
MandatoryPreselectedGroups.args = {
validate: true,
mode: 'multiple',
preSelectGroups: [mockVegetableAubergine, { ...mockMeatChicken, readonly: true }]
};
export const InvalidPreselectedGroups = template.bind({});
InvalidPreselectedGroups.args = {
validate: true,
mode: 'multiple',
preSelectGroups: [{ id: 'invalid-group', name: 'Invalid Group' }]
};

14
lib/process-services-cloud/src/lib/group/mock/group-cloud.mock.ts
View File

@@ -15,23 +15,9 @@
* limitations under the License.
*/
import { Injectable } from '@angular/core';
import { Observable, EMPTY, of } from 'rxjs';
import { IdentityGroupModel } from '../models/identity-group.model';
import { IdentityGroupService } from '@alfresco/adf-process-services-cloud';
export const mockVegetableAubergine: IdentityGroupModel = { id: 'aubergine', name: 'Vegetable Aubergine' };
export const mockMeatChicken: IdentityGroupModel = { id: 'chicken', name: 'Meat Chicken' };
export const mockFoodGroups = [mockVegetableAubergine, mockMeatChicken];
@Injectable()
export class IdentityGroupServiceMock extends IdentityGroupService {
search(name: string): Observable<IdentityGroupModel[]> {
if (name.trim() === '') {
return EMPTY;
}
return of(mockFoodGroups.filter((group) => group.name.toUpperCase().includes(name.toUpperCase())));
}
}

Some files were not shown because too many files have changed in this diff Show More