nuxeo-development-framework 4.1.6 → 4.1.7

package/src/lib/components/diagrams/components/custom-socket.component.ts

@@ -1,30 +0,0 @@
-import { Component } from '@angular/core';
-import { SocketComponent } from 'rete-angular-plugin';
-
-@Component({
-	template: ``,
-	styles: [
-		`
-			:host {
-				display: inline-block;
-				cursor: pointer;
-				border: 1px solid var(--primary-color, #1b3e7f);
-				width: var(--socket-size, 16px);
-				height: var(--socket-size, 16px);
-				vertical-align: var(--socket-vertical-align, top);
-				background: white;
-				z-index: 2;
-				box-sizing: border-box;
-				opacity: var(--socket-opacity, 0);
-				border-radius: var(--socket-radius, 0);
-				&:hover {
-					box-shadow: 0 0 0 1px var(--primary-color, #1b3e7f);
-				}
-			}
-		`
-	],
-	host: {
-		'[class]': 'data?.styleClass'
-	}
-})
-export class CustomSocketComponent extends SocketComponent {}

package/src/lib/components/diagrams/components/gateway-node/gateway-node.component.html

@@ -1,31 +0,0 @@
-<div
-	class="da-node gateway-node--{{ data.type }} gateway-node {{
-		data?.status ? ' da-node--' + data?.status : ''
-	}}"
-	[style.--node-width]="data.width + 'px'"
-	[style.--node-height]="data.width + 'px'"
->
-	<div class="gateway-node__wrapper">
-		<node-remove-button
-			(remove)="removeNode()"
-			*ngIf="data.config?.canRemove"
-		></node-remove-button>
-		<div class="gateway-node__content">
-			<div
-				class="da-node__title gate-node__title"
-				[attr.tooltip]="data.content?.data?.tooltip"
-				[class.node-tooltip]="!!data.content?.data?.tooltip"
-			>
-				{{ data.name }}
-			</div>
-		</div>
-	</div>
-
-	<gateway-ports
-		class="gateway-node__ports"
-		[data]="data"
-		[seed]="seed"
-		[emit]="emit"
-		[sortByIndex]="sortByIndex"
-	></gateway-ports>
-</div>

package/src/lib/components/diagrams/components/gateway-node/gateway-node.component.scss

@@ -1,26 +0,0 @@
-.gateway-node {
-	--node-radius: 0;
-	--angle: 45deg;
-	--socket-radius: 0;
-	border-width: 0;
-	background: transparent;
-	&__wrapper {
-		width: calc(100% - var(--socket-size, 14px));
-		height: calc(100% - var(--socket-size, 14px));
-		transform: rotate(var(--angle));
-		border: var(--node-border, 1px solid #234990);
-		border-radius: var(--node-radius);
-		background: var(--node-background, #fff);
-	}
-
-	&__content {
-		--rotate: calc(var(--angle) * -1);
-		transform: rotate(var(--rotate));
-		height: 100%;
-		width: 100%;
-		overflow: hidden;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-	}
-}

package/src/lib/components/diagrams/components/gateway-node/gateway-node.component.ts

@@ -1,8 +0,0 @@
-import { Component } from '@angular/core';
-import { BaseNodeComponent } from '../base-node.component';
-
-@Component({
-	templateUrl: './gateway-node.component.html',
-	styleUrls: ['../../styles/node.scss', './gateway-node.component.scss']
-})
-export class GatewayNodeComponent extends BaseNodeComponent {}

package/src/lib/components/diagrams/components/gateway-ports.component.ts

@@ -1,77 +0,0 @@
-import { Component, Input, ViewEncapsulation } from '@angular/core';
-import { BaseNodeClass } from '../models';
-import { DirectionType } from '../types';
-@Component({
-	selector: 'gateway-ports',
-	encapsulation: ViewEncapsulation.None,
-
-	template: `
-		<div
-			*ngFor="let input of data.inputs | keyvalue : sortByIndex"
-			class="gateway-port gateway-port--input  {{ input.value.styleClass }}"
-			refComponent
-			[data]="{
-				type: 'socket',
-				side: 'input',
-				key: input.key,
-				nodeId: data.id,
-				payload: input.value?.socket,
-				seed: seed
-			}"
-			[emit]="emit"
-		></div>
-
-		<div
-			*ngFor="let output of data.outputs | keyvalue : sortByIndex"
-			class="gateway-port gateway-port--output  {{ output.value.styleClass }}"
-			refComponent
-			[data]="{
-				type: 'socket',
-				side: 'output',
-				key: output.key,
-				nodeId: data.id,
-				payload: output.value?.socket,
-				seed: seed
-			}"
-			[emit]="emit"
-		></div>
-	`,
-	styles: [
-		`
-			.gateway-port {
-				--socket-vertical-align: top;
-				--width: var(--port-width, var(--socket-size, 14px));
-				--height: var(--port-height, var(--socket-size, 14px));
-				position: absolute;
-				inset-inline: var(--port-inset-inline);
-				inset-block: var(--port-inset-block);
-				display: inline-block;
-				width: var(--width);
-				height: var(--height);
-				&.input-primary-port {
-					--port-inset-inline: calc(var(--width) / -2) auto;
-					--port-inset-block: calc(50% - var(--height) / 2) 0;
-				}
-				&.output-primary-port {
-					--port-inset-inline: auto calc(var(--width) / -2);
-					--port-inset-block: calc(50% - var(--height) / 2) auto;
-				}
-				&.output-secondary-port {
-					--port-inset-inline: calc(50% - var(--width) / 2) auto;
-					--port-inset-block: calc(var(--height) / -2) auto;
-				}
-				&.output-tertiary-port {
-					--port-inset-inline: calc(50% - var(--width) / 2) 0;
-					--port-inset-block: auto calc(var(--height) / -2);
-				}
-			}
-		`
-	]
-})
-export class GatewayPortsComponent {
-	@Input() direction: DirectionType;
-	@Input() data!: BaseNodeClass;
-	@Input() seed: number;
-	@Input() emit!: (data: any) => void;
-	@Input() sortByIndex: (a: unknown, b: unknown) => number;
-}

package/src/lib/components/diagrams/components/node-icon.component.ts

@@ -1,21 +0,0 @@
-import { Component, Input, TemplateRef, ViewEncapsulation } from '@angular/core';
-
-@Component({
-  selector: 'node-icon',
-  template: `
-    <mat-icon *ngIf="!isIconTemplate(icon)">{{ icon }}</mat-icon>
-    <span *ngIf="isIconTemplate(icon)">
-      <ng-container [ngTemplateOutlet]="icon"></ng-container>
-    </span>
-  `,
-  encapsulation: ViewEncapsulation.None,
-  host: {
-    class: 'da-node__icon',
-  },
-})
-export class NodeIconComponent {
-  @Input() icon: string | TemplateRef<any>;
-  isIconTemplate(icon: string | TemplateRef<any>) {
-    return icon instanceof TemplateRef;
-  }
-}

package/src/lib/components/diagrams/components/node-inputs.component.ts

@@ -1,35 +0,0 @@
-import { Component, Input, ViewEncapsulation } from '@angular/core';
-import { BaseNodeClass } from '../models';
-import { DirectionType } from '../types';
-
-@Component({
-	selector: 'node-inputs',
-	encapsulation: ViewEncapsulation.None,
-	styleUrls: ['../styles/ports.scss'],
-	host: {
-		'[class]': " 'node-ports node-ports--inputs  node-ports--' + direction"
-	},
-	template: `
-		<div
-			*ngFor="let input of data.inputs | keyvalue : sortByIndex"
-			class="node-ports__port {{ input.value.styleClass }}"
-			refComponent
-			[data]="{
-				type: 'socket',
-				side: 'input',
-				key: input.key,
-				nodeId: data.id,
-				payload: input.value?.socket,
-				seed: seed
-			}"
-			[emit]="emit"
-		></div>
-	`
-})
-export class NodeInputsComponent {
-	@Input() direction: DirectionType;
-	@Input() data!: BaseNodeClass;
-	@Input() seed: number;
-	@Input() emit!: (data: any) => void;
-	@Input() sortByIndex: (a: unknown, b: unknown) => number;
-}

package/src/lib/components/diagrams/components/node-outputs.component.ts

@@ -1,33 +0,0 @@
-import { Component, Input, ViewEncapsulation } from '@angular/core';
-import { BaseNodeClass } from '../models';
-import { DirectionType } from '../types';
-
-@Component({
-	selector: 'node-outputs',
-	encapsulation: ViewEncapsulation.None,
-	styleUrls: ['../styles/ports.scss'],
-	host: {
-		'[class]': " 'node-ports node-ports--outputs  node-ports--' + direction"
-	},
-	template: `<div
-		class="node-ports__port {{ output.value.styleClass }}"
-		*ngFor="let output of data.outputs | keyvalue : sortByIndex"
-		refComponent
-		[data]="{
-			type: 'socket',
-			side: 'output',
-			key: output.key,
-			nodeId: data.id,
-			payload: output.value?.socket,
-			seed: seed
-		}"
-		[emit]="emit"
-	></div>`
-})
-export class NodeOutputsComponent {
-	@Input() direction: DirectionType;
-	@Input() data!: BaseNodeClass;
-	@Input() seed: number;
-	@Input() emit!: (data: any) => void;
-	@Input() sortByIndex: (a: unknown, b: unknown) => number;
-}

package/src/lib/components/diagrams/components/node-ports.component.ts

@@ -1,54 +0,0 @@
-import { Component, Input, ViewEncapsulation } from '@angular/core';
-import { BaseNodeClass } from '../models';
-import { DirectionType } from '../types';
-@Component({
-	selector: 'node-ports',
-	encapsulation: ViewEncapsulation.None,
-	styleUrls: ['../styles/ports.scss'],
-	host: {
-		class: 'node-ports',
-		'[class]':
-			"'node-ports--inputs--' + inputsDirection + ' ' + 'node-ports--outputs--' + outputsDirection "
-	},
-	template: `
-		<div
-			*ngFor="let input of data.inputs | keyvalue : sortByIndex"
-			class="node-port node-port--input  {{ input.value.styleClass }}"
-			refComponent
-			[title]="input.value.styleClass"
-			[data]="{
-				type: 'socket',
-				side: 'input',
-				key: input.key,
-				nodeId: data.id,
-				payload: input.value?.socket,
-				seed: seed
-			}"
-			[emit]="emit"
-		></div>
-
-		<div
-			*ngFor="let output of data.outputs | keyvalue : sortByIndex"
-			class="node-port node-port--output  {{ output.value.styleClass }}"
-			refComponent
-			[title]="output.value.styleClass"
-			[data]="{
-				type: 'socket',
-				side: 'output',
-				key: output.key,
-				nodeId: data.id,
-				payload: output.value?.socket,
-				seed: seed
-			}"
-			[emit]="emit"
-		></div>
-	`
-})
-export class NodePortsComponent {
-	@Input() inputsDirection: DirectionType;
-	@Input() outputsDirection: DirectionType;
-	@Input() data!: BaseNodeClass;
-	@Input() seed: number;
-	@Input() emit!: (data: any) => void;
-	@Input() sortByIndex: (a: unknown, b: unknown) => number;
-}

package/src/lib/components/diagrams/components/remove-button.component.ts

@@ -1,46 +0,0 @@
-import { Component, EventEmitter, Output } from '@angular/core';
-
-@Component({
-	selector: 'node-remove-button',
-	template: `
-		<button
-			mat-icon-button
-			(click)="remove.emit()"
-			(pointerdown)="$event.stopPropagation()"
-			(dblclick)="$event.stopPropagation()"
-			class="remove-icon"
-		>
-			<mat-icon>close</mat-icon>
-		</button>
-	`,
-	styles: [
-		`
-			:host {
-				--size: var(--remove-icon-size, 30px);
-				position: var(--remove-icon-position, absolute);
-				inset: var(--remove-icon-inset, 0 0 auto auto);
-				opacity: var(--remove-icon-opacity, 0);
-				background: var(--remove-icon-background, #fff);
-				width: var(--size);
-				height: var(--size);
-				line-height: var(var(--remove-icon-size), calc(var(--size) - 6));
-				border-radius: var(--remove-icon-radius, 50%);
-				z-index: 2;
-				.remove-icon {
-					border: 1px solid currentColor;
-					border-radius: var(--remove-icon-radius, 50%);
-					width: var(--size);
-					height: var(--size);
-					line-height: var(--remove-icon-size, 24px);
-					background: var(--remove-icon-background, #fff);
-					display: flex;
-					align-items: center;
-					justify-content: center;
-				}
-			}
-		`
-	]
-})
-export class RemoveButtonComponent {
-	@Output() remove = new EventEmitter();
-}

package/src/lib/components/diagrams/components/status-icon.component.ts

@@ -1,29 +0,0 @@
-import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core';
-import { NODE_STATUS } from '../constants';
-import { NodeStatus } from '../types';
-
-@Component({
-  selector: 'status-icon',
-  template: ` <mat-icon>
-    {{ getIcon() }}
-  </mat-icon>`,
-  encapsulation: ViewEncapsulation.None,
-  changeDetection :ChangeDetectionStrategy.OnPush,
-  host: {
-    '[class]': "'da-node__check-status da-node__check-status--' + status",
-  },
-})
-export class StatusIconComponent {
-  @Input() status: NodeStatus;
-
-  getIcon() {
-    switch (this.status) {
-      case NODE_STATUS.completed:
-        return 'check_circle';
-      case NODE_STATUS.rejected:
-        return 'cancel';
-      default:
-        return '';
-    }
-  }
-}

package/src/lib/components/diagrams/components/template-node/template-node.component.html

@@ -1,35 +0,0 @@
-<div
-	class="da-node da-node--{{ data.type }} {{
-		data?.status ? ' da-node--' + data?.status : ''
-	}} {{ data?.styleClass }}"
-	[style.--node-width]="data.width + 'px'"
-	[style.--node-height]="data.height + 'px'"
->
-	<node-ports
-		[inputsDirection]="data.directions.inputs"
-		[outputsDirection]="data.directions.outputs"
-		[data]="data"
-		[seed]="seed"
-		[emit]="emit"
-		[sortByIndex]="sortByIndex"
-	></node-ports>
-	<div class="da-node__content">
-		<node-remove-button (remove)="removeNode()" *ngIf="data?.config?.canRemove">
-		</node-remove-button>
-
-		<node-icon
-			*ngIf="data.content?.icon"
-			[icon]="data.content?.icon"
-			class="da-node__icon"
-		></node-icon>
-
-		<ng-container
-			[ngTemplateOutlet]="data?.template || defaultTemplate"
-			[ngTemplateOutletContext]="templateOutletContext"
-		></ng-container>
-
-		<ng-template #defaultTemplate>
-			<div class="da-node__title">{{ data?.name }}</div>
-		</ng-template>
-	</div>
-</div>

package/src/lib/components/diagrams/components/template-node/template-node.component.ts

@@ -1,33 +0,0 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { TemplateNode } from '../../models';
-import { BaseNodeComponent } from '../base-node.component';
-
-@Component({
-  templateUrl: './template-node.component.html',
-  styleUrls: ['../../styles/node.scss'],
-  changeDetection: ChangeDetectionStrategy.Default,
-  styles: [
-    `
-      :host {
-        display: block;
-      }
-    `,
-  ],
-})
-export class TemplateNodeComponent extends BaseNodeComponent<TemplateNode> {
-  ngOnInit(): void {}
-
-  get templateOutletContext() {
-    const { content, description, name, status, id } = this.data;
-
-    return {
-      $implicit: {
-        content: content,
-        description,
-        name,
-        status,
-        id,
-      },
-    };
-  }
-}

package/src/lib/components/diagrams/components/zoom-control.component.ts

@@ -1,46 +0,0 @@
-import { Component } from '@angular/core';
-import { DiagramPluginsService } from '../services';
-
-@Component({
-  selector: 'app-zoom-control',
-  template: `
-    <button mat-flat-button (click)="zoomOut()">
-      <mat-icon>zoom_out</mat-icon>
-    </button>
-    <button mat-flat-button (click)="zoomIn()">
-      <mat-icon>zoom_in</mat-icon>
-    </button>
-  `,
-  styles: [
-    `
-      :host {
-        position: var(--diagram-zoom-position, absolute);
-        inset-inline: var(--diagram-zoom-inline, auto 5px);
-        inset-block: var(--diagram-zoom-block, 5px auto);
-        background: var(--diagram-zoom-background, #f8f8ff);
-        border-radius: var(--diagram-zoom-radius, 4px);
-        border: var(--diagram-zoom-border, 1px solid #dcdce4);
-        display: var(--diagram-zoom-display, inline-flex);
-        flex-direction: var(--diagram-zoom-direction, row);
-        box-shadow: var(--diagram-zoom-shadow, 0 0 0 0 #eee);
-        .mat-flat-button {
-          background-color: transparent;
-          min-width: 36px;
-        }
-      }
-    `,
-  ],
-})
-export class ZoomControlComponent {
-  private delta = 0.1;
-  constructor(public _plugins: DiagramPluginsService) {}
-
-  zoomOut() {
-    const k = this._plugins.area.area.transform.k;
-    this._plugins.area.area.zoom(k - this.delta);
-  }
-  zoomIn() {
-    const k = this._plugins.area.area.transform.k;
-    this._plugins.area.area.zoom(k + this.delta);
-  }
-}

package/src/lib/components/diagrams/constants/defaults.ts

@@ -1,20 +0,0 @@
-import { DiagramConfig } from "../types";
-
-export const DIAGRAM_DEFAULT_OPTIONS: DiagramConfig = {
-  socketType: 'custom',
-  connectionType: 'custom',
-  fitToView: true,
-  area: {
-    restrict: true,
-    scaling: { min: 0.5, max: 1.3 },
-  },
-  path: {
-    arrow: {
-      color: 'var(--path-color , #5d6481)',
-      marker: 'M-3,-6 L-3,6 L10,0 Z',
-    },
-    transform: {
-      active: true,
-    },
-  },
-};

package/src/lib/components/diagrams/constants/direction.ts

@@ -1,6 +0,0 @@
-export const IN_OUT_DIRECTION= {
-  start: 'start',
-  end: 'end',
-  top: 'top',
-  bottom: 'bottom',
-} as const;

package/src/lib/components/diagrams/constants/message-type.ts

@@ -1,4 +0,0 @@
-export const MESSAGE_TYPE = {
-  configUpdated: 'configUpdated',
-  refresh: 'refresh',
-} as const;

package/src/lib/components/diagrams/constants/node-type.ts

@@ -1,7 +0,0 @@
-export const NODE_TYPE = {
-  start: 'start',
-  content: 'content',
-  template: 'template',
-  gateway : 'gateway',
-  end: 'end',
-} as const;

package/src/lib/components/diagrams/constants/notify-events.ts

@@ -1,3 +0,0 @@
-export const NOTIFY_EVENT = {
-  remove: 'remove',
-} as const;

package/src/lib/components/diagrams/constants/sizes.ts

@@ -1,7 +0,0 @@
-export const NODE_MARGIN = 60;
-export const NODE_WIDTH = 150;
-export const NODE_HEIGHT = 118;
-export const NODE_CIRCLE_SIZE = 72;
-export const NODE_GATEWAY_SIZE = 60;
-export const DIAGRAM_HEIGHT = 600;
-export const SOCKET_WIDTH = 8;

package/src/lib/components/diagrams/constants/status.ts

@@ -1,11 +0,0 @@
-export const NODE_STATUS = {
-	draft: 'draft',
-	completed: 'completed',
-	rejected: 'rejected',
-	inProgress: 'inProgress',
-	upcoming: 'upcoming',
-	approved: 'approved',
-	suspended: 'suspended',
-	ready: 'ready',
-	canceled: 'canceled'
-} as const;

package/src/lib/components/diagrams/diagrams.module.ts

@@ -1,69 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-
-import { FormsModule } from '@angular/forms';
-import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { TranslateModule } from '@ngx-translate/core';
-import { ReteModule } from 'rete-angular-plugin';
-import { DiagramDirective } from './directive/diagram.directive';
-
-import {
-  CircleNodeComponent,
-  ConnectionLabelComponent,
-  ContentNodeComponent,
-  CustomConnectionComponent,
-  CustomSocketComponent,
-  GatewayNodeComponent,
-  GatewayPortsComponent,
-  NodeIconComponent,
-  NodeInputsComponent,
-  NodeOutputsComponent,
-  NodePortsComponent,
-  RemoveButtonComponent,
-  StatusIconComponent,
-  TemplateNodeComponent,
-  ZoomControlComponent
-} from './components';
-
-import {
-  DiagramPluginsService,
-  DiagramService,
-  WorkflowService
-} from './services';
-
-
-
-@NgModule({
-	declarations: [
-		CircleNodeComponent,
-		ContentNodeComponent,
-		CustomConnectionComponent,
-		CustomSocketComponent,
-		TemplateNodeComponent,
-		DiagramDirective,
-		RemoveButtonComponent,
-		ZoomControlComponent,
-		NodeIconComponent,
-		StatusIconComponent,
-		NodeInputsComponent,
-		NodeOutputsComponent,
-		GatewayNodeComponent,
-		ConnectionLabelComponent,
-		NodePortsComponent,
-		GatewayPortsComponent
-	],
-	imports: [
-		CommonModule,
-		ReteModule,
-		MatButtonModule,
-		MatIconModule,
-		FormsModule,
-		TranslateModule,
-		MatTooltipModule
-	],
-	exports: [DiagramDirective, ZoomControlComponent],
-	providers: [DiagramService, DiagramPluginsService, WorkflowService]
-})
-export class DiagramsModule {}