@openmfp/webcomponents 0.6.1

package/projects/ngx/declarative-ui/table-card/declarative-table-card.component.ts

@@ -0,0 +1,286 @@
+import { FormFieldChangeEvent, FormFieldDefinition } from '../form';
+import { DeclarativeForm } from '../form/declarative-form/declarative-form.component';
+import { GenericResource } from '../models';
+import { DeclarativeTable } from '../table/declarative-table/declarative-table.component';
+import {
+  TableFieldDefinition,
+  ValueCellButtonClickEvent,
+} from '../table/models';
+import { getResourceValueByJsonPath } from '../table/utils/resource-field-by-path';
+import { TableCardConfig, TableCardFormState } from './models/configs';
+import {
+  CUSTOM_ELEMENTS_SCHEMA,
+  ChangeDetectionStrategy,
+  Component,
+  Injector,
+  ViewEncapsulation,
+  afterNextRender,
+  computed,
+  inject,
+  input,
+  output,
+  signal,
+  viewChild,
+} from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { Button } from '@fundamental-ngx/ui5-webcomponents/button';
+import { Dialog } from '@fundamental-ngx/ui5-webcomponents/dialog';
+import { Icon } from '@fundamental-ngx/ui5-webcomponents/icon';
+import { Input } from '@fundamental-ngx/ui5-webcomponents/input';
+import { Title } from '@fundamental-ngx/ui5-webcomponents/title';
+import '@ui5/webcomponents-icons/dist/add.js';
+import '@ui5/webcomponents-icons/dist/search.js';
+import { debounceTime } from 'rxjs';
+
+type SearchState = 'collapsed' | 'expanded' | 'collapsing';
+
+@Component({
+  selector: 'mfp-declarative-table-card',
+  imports: [
+    DeclarativeTable,
+    DeclarativeForm,
+    ReactiveFormsModule,
+    Dialog,
+    Title,
+    Button,
+    Icon,
+    Input,
+  ],
+  templateUrl: './declarative-table-card.component.html',
+  styleUrl: './declarative-table-card.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.ShadowDom,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class DeclarativeTableCard<T extends GenericResource> {
+  resources = input.required<T[]>();
+
+  config = input.required<TableCardConfig>();
+  createFormState = input<TableCardFormState>({});
+  editFormState = input<TableCardFormState>({});
+
+  readonly actionButtonClick = output<ValueCellButtonClickEvent<T>>();
+  readonly tableRowClicked = output<T>();
+  readonly loadMoreResources = output<void>();
+  readonly paginationLimitChanged = output<number>();
+
+  readonly searchChanged = output<string>();
+  readonly createFieldChange = output<FormFieldChangeEvent>();
+  readonly editFieldChange = output<{
+    resource: T;
+    formChangeEvent: FormFieldChangeEvent;
+  }>();
+  readonly createSubmit = output<Record<string, unknown>>();
+  readonly editSubmit = output<{
+    resource: T;
+    value: Record<string, unknown>;
+  }>();
+  readonly deleteSubmit = output<T>();
+
+  protected searchState = signal<SearchState>('collapsed');
+  protected searchExpanded = computed(() => this.searchState() !== 'collapsed');
+  protected searchCollapsing = computed(
+    () => this.searchState() === 'collapsing',
+  );
+  protected searchControl = new FormControl('');
+  protected searchInputRef = viewChild<Input>('searchInput');
+
+  protected createDialogOpen = signal(false);
+  protected editDialogOpen = signal(false);
+  protected deleteDialogOpen = signal(false);
+
+  protected pendingResource = signal<T | null>(null);
+
+  protected tableConfig = computed(() => this.config().tableConfig);
+  protected header = computed(() => this.config().header);
+  protected headerTooltip = computed(() => this.config().headerTooltip);
+  protected createFormConfig = computed(
+    () => this.config().createResourceFormConfig,
+  );
+  protected editFormConfig = computed(
+    () => this.config().editResourceFormConfig,
+  );
+  protected deleteConfirmationConfig = computed(
+    () => this.config().deleteResourceConfirmationConfig,
+  );
+  protected createButtonConfig = computed(
+    () => this.config().buttonSettings?.createButton,
+  );
+  protected searchButtonConfig = computed(
+    () => this.config().buttonSettings?.searchButton,
+  );
+  protected effectiveColumns = computed(() => this.addActionsColumn());
+  protected editInitialValue = computed(() => {
+    const pendingResource = this.pendingResource();
+    const editConfig = this.editFormConfig();
+    if (!pendingResource || !editConfig) {
+      return {};
+    }
+
+    return this.buildInitialValues(editConfig.fields, pendingResource);
+  });
+
+  private readonly injector = inject(Injector);
+
+  constructor() {
+    this.searchControl.valueChanges
+      .pipe(debounceTime(300), takeUntilDestroyed())
+      .subscribe((value) => {
+        this.searchChanged.emit(value ?? '');
+      });
+  }
+
+  toggleSearch(): void {
+    if (this.searchState() === 'expanded') {
+      this.collapseSearch();
+    } else if (this.searchState() === 'collapsed') {
+      this.searchState.set('expanded');
+      afterNextRender(
+        () => {
+          this.searchInputRef()?.elementRef.nativeElement.focus();
+        },
+        { injector: this.injector },
+      );
+    }
+  }
+
+  onSearchBlur(): void {
+    if (!this.searchControl.value) {
+      this.collapseSearch();
+    }
+  }
+
+  onSearchAnimationEnd(): void {
+    if (this.searchCollapsing()) {
+      this.searchState.set('collapsed');
+      this.searchControl.setValue('', { emitEvent: false });
+    }
+  }
+
+  private collapseSearch(): void {
+    this.searchState.set('collapsing');
+  }
+
+  onButtonClick(event: ValueCellButtonClickEvent<T>): void {
+    const action = event.field.uiSettings?.buttonSettings?.action;
+    if (action === 'edit' && event.resource) {
+      this.pendingResource.set(event.resource);
+      this.editDialogOpen.set(true);
+      return;
+    }
+    if (action === 'delete' && event.resource) {
+      this.pendingResource.set(event.resource);
+      this.deleteDialogOpen.set(true);
+      return;
+    }
+
+    this.actionButtonClick.emit(event);
+  }
+
+  closeCreateDialog(): void {
+    this.createDialogOpen.set(false);
+  }
+
+  closeEditDialog(): void {
+    this.editDialogOpen.set(false);
+  }
+
+  closeDeleteDialog(): void {
+    this.deleteDialogOpen.set(false);
+  }
+
+  onCreateFieldChange(event: FormFieldChangeEvent): void {
+    this.createFieldChange.emit(event);
+  }
+
+  onEditFieldChange(event: FormFieldChangeEvent): void {
+    const resource = this.pendingResource();
+
+    if (resource) {
+      this.editFieldChange.emit({ resource, formChangeEvent: event });
+    }
+  }
+
+  onCreateSubmit(value: Record<string, unknown>): void {
+    this.createSubmit.emit(value);
+  }
+
+  onEditSubmit(value: Record<string, unknown>): void {
+    const resource = this.pendingResource();
+
+    if (resource) {
+      this.editSubmit.emit({ resource, value });
+    }
+  }
+
+  onDeleteSubmit(): void {
+    const resource = this.pendingResource();
+    if (resource) this.deleteSubmit.emit(resource);
+  }
+
+  protected hasErrors(state: TableCardFormState): boolean {
+    const errors = state.fieldErrors;
+    return !!errors && Object.values(errors).some((val) => !!val);
+  }
+
+  private addActionsColumn(): TableFieldDefinition[] {
+    const cols = this.tableConfig().fields;
+    const buttonSettings = this.config().buttonSettings;
+    const editButton = this.editFormConfig();
+    const deleteButton = this.deleteConfirmationConfig();
+    const actions: TableFieldDefinition[] = [];
+
+    if (editButton) {
+      actions.push({
+        uiSettings: {
+          displayAs: 'button',
+          buttonSettings: {
+            icon: 'edit',
+            design: 'Transparent',
+            action: 'edit',
+            ...buttonSettings?.editButton,
+          },
+        },
+        group: { name: 'actions', label: '', multiline: false },
+      });
+    }
+
+    if (deleteButton) {
+      actions.push({
+        uiSettings: {
+          displayAs: 'button',
+          buttonSettings: {
+            icon: 'decline',
+            design: 'Transparent',
+            action: 'delete',
+            ...buttonSettings?.deleteButton,
+          },
+        },
+        group: { name: 'actions', label: '', multiline: false },
+      });
+    }
+
+    return cols.concat(actions);
+  }
+
+  private buildInitialValues(
+    fields: FormFieldDefinition[],
+    resource?: T,
+  ): Record<string, unknown> {
+    if (!resource) return {};
+
+    return fields.reduce(
+      (acc, field) => {
+        if (typeof field.name === 'string') {
+          acc[field.name] =
+            getResourceValueByJsonPath(resource, { property: field.name }) ??
+            '';
+        }
+        return acc;
+      },
+      {} as Record<string, unknown>,
+    );
+  }
+
+}

package/projects/ngx/declarative-ui/table-card/index.ts

@@ -0,0 +1,2 @@
+export * from './declarative-table-card.component';
+export * from './models/configs';

package/projects/ngx/declarative-ui/table-card/models/configs.ts

@@ -0,0 +1,46 @@
+import { FormFieldDefinition, FormFieldErrors } from '../../form';
+import { ButtonSettings } from '../../models';
+import { TableFieldDefinition } from '../../table';
+
+export interface ResourceFormConfig {
+  fields: FormFieldDefinition[];
+  title?: string;
+  confirmLabel?: string;
+  cancelLabel?: string;
+}
+
+export interface TableCardFormState {
+  fieldErrors?: FormFieldErrors;
+}
+
+export interface DeleteResourceConfirmationConfig {
+  title?: string;
+  message?: string;
+  confirmLabel?: string;
+  cancelLabel?: string;
+}
+
+export interface TableConfig {
+  fields: TableFieldDefinition[];
+  totalItemsCount?: number;
+  paginationLimit?: number;
+  hasMore?: boolean;
+}
+
+export interface TableCardButtonSettings {
+  createButton?: Partial<ButtonSettings>;
+  searchButton?: Partial<ButtonSettings>;
+  editButton?: Partial<ButtonSettings>;
+  deleteButton?: Partial<ButtonSettings>;
+}
+
+export interface TableCardConfig {
+  header?: string;
+  headerTooltip?: string;
+  tableConfig: TableConfig;
+  buttonSettings?: TableCardButtonSettings;
+  resourcesSearchable?: boolean;
+  createResourceFormConfig?: ResourceFormConfig;
+  editResourceFormConfig?: ResourceFormConfig;
+  deleteResourceConfirmationConfig?: DeleteResourceConfirmationConfig;
+}

package/projects/ngx/declarative-ui/tsconfig.lib.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../out-tsc/lib",
+    "declaration": true,
+    "declarationMap": true,
+    "types": []
+  },
+  "include": ["**/*.ts"],
+  "exclude": ["**/*.spec.ts"]
+}

package/projects/ngx/declarative-ui/tsconfig.lib.prod.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

package/projects/ngx/declarative-ui/tsconfig.spec.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../out-tsc/spec",
+    "types": ["vitest/globals"],
+    "esModuleInterop": true
+  },
+  "include": ["**/*.d.ts", "**/*.spec.ts"]
+}

package/projects/ngx/ng-package.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/ngx",
+  "lib": {
+    "entryFile": "public-api.ts"
+  },
+  "allowedNonPeerDependencies": ["tslib", "gridstack"]
+}

package/projects/ngx/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@openmfp/ngx",
+  "version": "0.1.0",
+  "dependencies": {
+    "gridstack": "^12.6.0",
+    "tslib": "2.8.1"
+  },
+  "peerDependencies": {
+    "@angular/animations": "^21.2.1",
+    "@angular/common": "^21.2.1",
+    "@angular/compiler": "^21.2.1",
+    "@angular/core": "^21.2.1",
+    "@angular/elements": "^21.2.1",
+    "@angular/forms": "^21.2.1",
+    "@angular/platform-browser": "^21.2.1",
+    "@fundamental-ngx/ui5-webcomponents": "^0.59.1",
+    "@fundamental-ngx/ui5-webcomponents-fiori": "^0.59.1",
+    "jsonpath": "^1.1.1",
+    "rxjs": "^7.8.2"
+  },
+  "type": "module"
+}

package/projects/ngx/public-api.ts

@@ -0,0 +1,2 @@
+export * from './declarative-ui/public-api';
+export * from './cards/public-api';

package/projects/ngx/tsconfig.lib.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "declaration": true,
+    "declarationMap": true,
+    "types": []
+  },
+  "include": ["**/*.ts"],
+  "exclude": ["**/*.spec.ts"]
+}

package/projects/ngx/tsconfig.lib.prod.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

package/projects/webcomponents/main.ts

@@ -0,0 +1,92 @@
+import { VisitedServiceCard } from '../ngx/cards/visited-service-card/visited-service-card.component';
+import { createCustomElement } from '@angular/elements';
+import { createApplication } from '@angular/platform-browser';
+import {
+  DeclarativeForm,
+  DeclarativeTable,
+  DeclarativeTableCard,
+} from '@openmfp/webcomponents/declarative-ui';
+import { ignoreCustomElements } from '@ui5/webcomponents-base/dist/IgnoreCustomElements.js';
+
+ignoreCustomElements('mfp');
+
+(async () => {
+  const app = await createApplication();
+
+  const DeclarativeTableElement = createCustomElement(DeclarativeTable, {
+    injector: app.injector,
+  });
+  customElements.define('mfp-wc-declarative-table', DeclarativeTableElement);
+
+  const DeclarativeFormElementBase = createCustomElement(DeclarativeForm, {
+    injector: app.injector,
+  }) as CustomElementConstructor;
+  class DeclarativeFormElement extends DeclarativeFormElementBase {
+    submit(): void {
+      const strategy = (
+        this as unknown as {
+          ngElementStrategy: {
+            componentRef?: { instance: DeclarativeForm };
+          };
+        }
+      ).ngElementStrategy;
+      strategy.componentRef?.instance.submit();
+    }
+
+    clear(): void {
+      const strategy = (
+        this as unknown as {
+          ngElementStrategy: {
+            componentRef?: { instance: DeclarativeForm };
+          };
+        }
+      ).ngElementStrategy;
+      strategy.componentRef?.instance.clear();
+    }
+  }
+  customElements.define('mfp-wc-declarative-form', DeclarativeFormElement);
+
+  const DeclarativeTableCardElementBase = createCustomElement(
+    DeclarativeTableCard,
+    {
+      injector: app.injector,
+    },
+  ) as CustomElementConstructor;
+  class DeclarativeTableCardElement extends DeclarativeTableCardElementBase {
+    closeCreateDialog(): void {
+      this.componentInstance()?.closeCreateDialog();
+    }
+
+    closeEditDialog(): void {
+      this.componentInstance()?.closeEditDialog();
+    }
+
+    closeDeleteDialog(): void {
+      this.componentInstance()?.closeDeleteDialog();
+    }
+
+    private componentInstance(): DeclarativeTableCard<never> | undefined {
+      const strategy = (
+        this as unknown as {
+          ngElementStrategy: {
+            componentRef?: { instance: DeclarativeTableCard<never> };
+          };
+        }
+      ).ngElementStrategy;
+
+      return strategy.componentRef?.instance;
+    }
+  }
+  customElements.define(
+    'mfp-wc-declarative-table-card',
+    DeclarativeTableCardElement,
+  );
+
+  const VisitedServiceCardElement = createCustomElement(VisitedServiceCard, {
+    injector: app.injector,
+  });
+  customElements.define(
+    'mfp-wc-visited-service-card',
+    VisitedServiceCardElement,
+  );
+})();

package/projects/webcomponents/tsconfig.app.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/app",
+    "types": []
+  },
+  "files": ["main.ts"],
+  "exclude": ["**/*.spec.ts"]
+}

package/projects/webcomponents-dashboard/main.ts

@@ -0,0 +1,15 @@
+import { createCustomElement } from '@angular/elements';
+import { createApplication } from '@angular/platform-browser';
+import { Dashboard } from '@openmfp/webcomponents/declarative-ui';
+import { ignoreCustomElements } from '@ui5/webcomponents-base/dist/IgnoreCustomElements.js';
+
+ignoreCustomElements('mfp');
+
+(async () => {
+  const app = await createApplication();
+
+  const DashboardElement = createCustomElement(Dashboard, {
+    injector: app.injector,
+  });
+  customElements.define('mfp-wc-dashboard', DashboardElement);
+})();

package/projects/webcomponents-dashboard/tsconfig.app.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/app",
+    "types": []
+  },
+  "files": ["main.ts"],
+  "exclude": ["**/*.spec.ts"]
+}

package/renovate.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "extends": [
+    "local>openmfp/.github:renovate-config"
+  ]
+}

package/scripts/bundle-wc.mjs

@@ -0,0 +1,79 @@
+import { build } from 'esbuild';
+import { readdirSync, unlinkSync, rmSync, mkdirSync, copyFileSync, writeFileSync, readFileSync } from 'fs';
+import { join, resolve } from 'path';
+
+const publicDir = resolve('public');
+mkdirSync(publicDir, { recursive: true });
+
+const cleanup = ['prerendered-routes.json', '3rdpartylicenses.txt'];
+
+function cleanDist(dir) {
+  for (const file of readdirSync(dir)) {
+    if (
+      (file.startsWith('chunk-') && file.endsWith('.js')) ||
+      cleanup.includes(file)
+    ) {
+      unlinkSync(join(dir, file));
+    }
+  }
+}
+
+// --- mfp-webcomponents.js (all components) ---
+const dist = resolve('dist/webcomponents');
+const entry = join(dist, 'main.js');
+const out = join(dist, 'mfp-webcomponents.js');
+
+await build({
+  entryPoints: [entry],
+  bundle: true,
+  format: 'esm',
+  outfile: out,
+  minify: true,
+  logLevel: 'warning',
+});
+
+unlinkSync(entry);
+cleanDist(dist);
+
+console.log('Single-file bundle written to dist/webcomponents/mfp-webcomponents.js');
+copyFileSync(out, join(publicDir, 'mfp-webcomponents.js'));
+console.log('Copied to public/mfp-webcomponents.js');
+
+// --- mfp-wc-dashboard.js (dashboard only) ---
+const dashDist = resolve('dist/webcomponents-dashboard');
+const dashEntry = join(dashDist, 'main.js');
+const dashOut = join(dist, 'mfp-wc-dashboard.js');
+
+await build({
+  entryPoints: [dashEntry],
+  bundle: true,
+  format: 'esm',
+  outfile: dashOut,
+  minify: true,
+  logLevel: 'warning',
+});
+
+unlinkSync(dashEntry);
+cleanDist(dashDist);
+rmSync(dashDist, { recursive: true });
+
+console.log('Single-file bundle written to dist/webcomponents/mfp-wc-dashboard.js');
+copyFileSync(dashOut, join(publicDir, 'mfp-wc-dashboard.js'));
+console.log('Copied to public/mfp-wc-dashboard.js');
+
+// --- generate package.json for dist/webcomponents ---
+const rootPkg = JSON.parse(readFileSync(resolve('package.json'), 'utf8'));
+const wcPkg = {
+  name: '@openmfp/webcomponents',
+  version: rootPkg.version,
+  description: rootPkg.description ?? 'OpenMFP web components bundle',
+  license: rootPkg.license ?? 'Apache-2.0',
+  type: 'module',
+  exports: {
+    '.': './mfp-webcomponents.js',
+    './dashboard': './mfp-wc-dashboard.js',
+  },
+  files: ['mfp-webcomponents.js', 'mfp-wc-dashboard.js'],
+};
+writeFileSync(join(dist, 'package.json'), JSON.stringify(wcPkg, null, 2) + '\n');
+console.log('Generated dist/webcomponents/package.json');

package/tsconfig.json

@@ -0,0 +1,37 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "preserve",
+    "strictPropertyInitialization": false,
+    "paths": {
+      "@openmfp/webcomponents/declarative-ui": [
+        "./projects/ngx/declarative-ui/public-api.ts"
+      ]
+    }
+  },
+  "angularCompilerOptions": {
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  },
+  "files": [],
+  "exclude": ["vitest.config.ts"],
+  "references": [
+    {
+      "path": "./projects/ngx/declarative-ui/tsconfig.lib.json"
+    },
+    {
+      "path": "./projects/ngx/declarative-ui/tsconfig.spec.json"
+    }
+  ]
+}