@openmfp/webcomponents 0.6.1 → 0.6.7

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

@@ -1,286 +0,0 @@
-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

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

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

@@ -1,46 +0,0 @@
-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

@@ -1,11 +0,0 @@
-{
-  "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

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

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

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

package/projects/ngx/ng-package.json

@@ -1,8 +0,0 @@
-{
-  "$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

@@ -1,22 +0,0 @@
-{
-  "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

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

package/projects/ngx/tsconfig.lib.json

@@ -1,11 +0,0 @@
-{
-  "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

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

package/projects/webcomponents/main.ts

@@ -1,92 +0,0 @@
-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

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

package/projects/webcomponents-dashboard/main.ts

@@ -1,15 +0,0 @@
-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

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

package/renovate.json

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

package/scripts/bundle-wc.mjs

@@ -1,79 +0,0 @@
-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

@@ -1,37 +0,0 @@
-{
-  "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"
-    }
-  ]
-}