xt-plugin-finance 0.6.0

package/CHANGELOG.md

@@ -0,0 +1,13 @@
+# Changelog
+
+## [0.6.0](https://github.com/dont-code/ng-xtend/compare/xt-plugin-finance-v0.5.5...xt-plugin-finance-v0.6.0) (2026-01-07)
+
+
+### Features
+
+* all plugins, libs to release please ([35ddd53](https://github.com/dont-code/ng-xtend/commit/35ddd5362c3350572f44ebe79824e297fd03c7eb))
+
+
+### Bug Fixes
+
+* reworked publish & deploy scripts with release-please ([aed0d88](https://github.com/dont-code/ng-xtend/commit/aed0d884c0a8bfcc85645e87d19480939737bdf6))

package/README.md

@@ -0,0 +1,17 @@
+![ng-xtend logo](https://dont-code.net/assets/images/logos/logo-xtend-angular-red-small.png)
+
+# Plugin xt-default
+
+This plugin is part of the [ng-xtend framework](https://github.com/dont-code/ng-xtend/blob/main/README.md)
+
+It enable [xt-components](https://github.com/dont-code/ng-xtend/tree/main/libs/xt-components) to
+
+- Display and edit any primitive value
+![Primitive Editor](https://dont-code.net/assets/images/screenshots/plugin-default-primitive.png)
+- or complex object
+![Object Editor](https://dont-code.net/assets/images/screenshots/plugin-default-object.png)
+- or list of objects
+![List Viewer](https://dont-code.net/assets/images//screenshots/plugin-default-list.png)
+
+With it you are sure you can display / edit any type within any xt-components application like [xt-host](https://github.com/dont-code/ng-xtend/tree/main/libs/xt-host).
+

package/angular.json

@@ -0,0 +1,164 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "cli": {
+    "packageManager": "pnpm",
+    "analytics": "8440f8d0-3f6c-4758-b71e-f9ee11217c7f",
+    "cache": {
+      "enabled": true
+    }
+  },
+  "newProjectRoot": "projects",
+  "projects": {
+    "finance": {
+      "projectType": "library",
+      "root": "projects/finance",
+      "sourceRoot": "projects/finance/src",
+      "prefix": "lib",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:ng-packagr",
+          "options": {
+            "project": "projects/finance/ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "projects/finance/tsconfig.lib.prod.json"
+            },
+            "development": {
+              "tsConfig": "projects/finance/tsconfig.lib.json"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "test": {
+					"builder": "@analogjs/vitest-angular:test",
+          "options": {
+            "tsConfig": "projects/finance/tsconfig.spec.json",
+            "polyfills": [
+            ]
+          }
+        }
+      }
+    },
+    "finance-plugin": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "css"
+        }
+      },
+      "root": "projects/finance-plugin",
+      "sourceRoot": "projects/finance-plugin/src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-architects/native-federation:build",
+          "options": {},
+          "configurations": {
+            "production": {
+              "target": "finance-plugin:esbuild:production"
+            },
+            "development": {
+              "target": "finance-plugin:esbuild:development",
+              "dev": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-architects/native-federation:build",
+          "options": {
+            "target": "finance-plugin:serve-original:development",
+            "rebuildDelay": 0,
+            "dev": true,
+            "port": 0
+          }
+        },
+        "esbuild": {
+          "builder": "@angular-devkit/build-angular:application",
+          "options": {
+            "outputPath": "dist/xt-finance-plugin",
+            "index": "projects/finance-plugin/src/index.html",
+            "browser": "projects/finance-plugin/src/main.ts",
+            "preserveSymlinks": true,
+            "polyfills": [
+              "es-module-shims"
+            ],
+            "tsConfig": "projects/finance-plugin/tsconfig.app.json",
+            "inlineStyleLanguage": "css",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "projects/finance-plugin/public"
+              }
+            ],
+            "styles": [
+              "projects/finance-plugin/src/styles.css"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "1MB",
+                  "maximumError": "2MB"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "4kB",
+                  "maximumError": "8kB"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+					"defaultConfiguration": "development"
+        },
+				"serve-original": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "finance-plugin:esbuild:production"
+            },
+            "development": {
+              "buildTarget": "finance-plugin:esbuild:development"
+            }
+          },
+          "defaultConfiguration": "development",
+          "options": {
+            "port": 4204
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n"
+        },
+        "test": {
+          "builder": "@analogjs/vitest-angular:test",
+          "options": {
+            "polyfills": [],
+            "tsConfig": "projects/finance-plugin/tsconfig.spec.json",
+            "inlineStyleLanguage": "css",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "projects/finance-plugin/public"
+              }
+            ],
+            "styles": [
+              "projects/finance-plugin/src/styles.css"
+            ],
+            "scripts": []
+          }
+        }
+      }
+    }
+  }
+}

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "xt-plugin-finance",
+  "version": "0.6.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build finance",
+    "build-deploy": "APP=finance-plugin && MAIN_LIB=finance && ng build $MAIN_LIB --configuration=$BUILD && ng build $APP --configuration=$BUILD --output-path=\"../../dist/$STAGE/$APP\" --base-href=\"https://test.dont-code.net/apps/$STAGE/$APP/\"",
+    "watch": "ng build --watch --configuration development",
+    "test": "cd projects/finance && ../../node_modules/.bin/vitest && cd ../finance-plugin && ../../node_modules/.bin/vitest"
+  },
+  "publishConfig": {
+    "directory": "dist/xt-plugin-finance",
+    "linkDirectory": true
+  },
+  "repository": {
+    "url": "https://github.com/dont-code/ng-xtend.git"
+  },
+  "private": false,
+  "dependencies": {
+    "@angular/animations": "^20.3.9",
+    "@angular/common": "^20.3.9",
+    "@angular/compiler": "^20.3.9",
+    "@angular/core": "^20.3.9",
+    "@angular/forms": "^20.3.9",
+    "@angular/platform-browser": "^20.3.9",
+    "@angular/platform-browser-dynamic": "^20.3.9",
+    "@angular/router": "^20.3.9",
+    "@angular/cdk": "^20.2.4",
+    "xt-components": "workspace:^",
+    "xt-type": "workspace:^",
+    "rxjs": "^7.8.2",
+    "primeng": "^20.3.0",
+    "primeicons": "^7.0.0",
+    "@primeuix/themes": "^1.2.5",
+    "tslib": "^2.8.1",
+    "tailwindcss": "~4.1.16",
+    "es-module-shims": "^2.6.2",
+    "@angular-architects/native-federation": "^20.1.7",
+    "@softarc/native-federation-runtime": "^3.3.6"
+  },
+  "devDependencies": {
+    "@primeuix/utils": "^0.6.1",
+    "@primeuix/styled": "^0.7.2",
+    "@angular-devkit/build-angular": "^20.3.8",
+    "@angular/cli": "^20.3.8",
+    "@angular/compiler-cli": "^20.3.9",
+    "@angular/build": "^20.3.8",
+    "ng-packagr": "^20.3.0",
+    "typescript": "^5.9.3",
+    "@analogjs/vite-plugin-angular": "^1.22.4",
+    "@analogjs/vitest-angular": "^1.22.4",
+    "jsdom": "^26.1.0",
+    "vite": "^7.1.12",
+    "vitest": "^3.2.4",
+    "vite-tsconfig-paths": "~5.1.4",
+    "happy-dom": "^18.0.1",
+    "@tailwindcss/postcss": "~4.1.16",
+    "postcss": "~8.5.6"
+  }
+}
+

package/projects/finance/README.md

@@ -0,0 +1,17 @@
+![ng-xtend logo](https://dont-code.net/assets/images/logos/logo-xtend-angular-red-small.png)
+
+# Plugin xt-default
+
+This plugin is part of the [ng-xtend framework](https://github.com/dont-code/ng-xtend/blob/main/README.md)
+
+It enable [xt-components](https://github.com/dont-code/ng-xtend/tree/main/libs/xt-components) to
+
+- Display and edit any primitive value
+  ![Primitive Editor](https://dont-code.net/assets/images/screenshots/plugin-default-primitive.png)
+- or complex object
+  ![Object Editor](https://dont-code.net/assets/images/screenshots/plugin-default-object.png)
+- or list of objects
+  ![List Viewer](https://dont-code.net/assets/images//screenshots/plugin-default-list.png)
+
+With it you are sure you can display / edit any type within any xt-components application like [xt-host](https://github.com/dont-code/ng-xtend/tree/main/libs/xt-host).
+

package/projects/finance/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/xt-plugin-finance",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/projects/finance/node_modules/.vite/results.json

@@ -0,0 +1 @@
+{"version":"3.1.4","results":[[":src/lib/finance-amount/finance-amount.component.spec.ts",{"duration":585.6307770000021,"failed":false}]]}

package/projects/finance/node_modules/.vite/vitest/da39a3ee5e6b4b0d3255bfef95601890afd80709/results.json

@@ -0,0 +1 @@
+{"version":"3.2.4","results":[[":src/lib/finance-amount/finance-amount.component.spec.ts",{"duration":458.79492799999935,"failed":false}]]}

package/projects/finance/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "xt-plugin-finance",
+  "version": "0.6.0",
+  "peerDependencies": {
+    "@angular/animations": "^19.0.5",
+    "@angular/common": "^19.0.5",
+    "@angular/compiler": "^19.0.5",
+    "@angular/core": "^19.0.5",
+    "@angular/forms": "^19.0.5",
+    "@angular/platform-browser": "^19.0.5",
+    "@angular/platform-browser-dynamic": "^19.0.5",
+    "@angular/router": "^19.0.5",
+    "xt-components": "workspace:^",
+    "rxjs": "^7.8.0",
+    "primeng": "^19.0.2",
+    "primeicons": "^7.0.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false
+}

package/projects/finance/src/lib/finance-amount/finance-amount.component.html

@@ -0,0 +1,18 @@
+@if (isInForm() ) {
+  @let cur = currency();
+  <ng-container [formGroup]="formGroup()">
+    @if (!isFixedCurrency) {
+      <xt-render-sub [context]="subContext('currency', 'currency')" (outputs)="outputChanged($event)" />
+    }
+    @if (cur != null) {
+      <p-inputNumber mode="currency" [currency]="cur" formControlName="amount" />
+    } @else {
+      <p-inputNumber mode="decimal" formControlName="amount" />
+    }
+  </ng-container>
+} @else {
+  @let displayAmount = displayValue();
+  @if ((displayAmount) && (displayAmount.amount!=null)) {
+    <span>{{ displayAmount.amount | currency : displayAmount.currency }}</span>
+  }
+}

package/projects/finance/src/lib/finance-amount/finance-amount.component.spec.ts

@@ -0,0 +1,38 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FinanceAmountComponent } from './finance-amount.component';
+import { beforeEach, describe, expect, it } from 'vitest';
+import { XtBaseContext } from 'xt-components';
+import { MoneyAmount } from '../money-handler/money-amount';
+import { By } from '@angular/platform-browser';
+
+describe('FinanceAmountComponent', () => {
+  let component: FinanceAmountComponent;
+  let fixture: ComponentFixture<FinanceAmountComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [FinanceAmountComponent]
+    })
+    .compileComponents();
+
+  });
+
+  it('should display amount', () => {
+    fixture = TestBed.createComponent(FinanceAmountComponent);
+    const context=new XtBaseContext<MoneyAmount>('FULL_VIEW');
+    context.setDisplayValue({
+     currency:'EUR',
+     amount:12.4
+    });
+    fixture.componentRef.setInput("context", context);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+    expect(component).toBeTruthy();
+    const textContent=fixture.debugElement.query(By.css('span') ).nativeElement.textContent;
+    expect(textContent).contains('12');
+    expect(textContent).contains('40');
+    expect(textContent).contains('€');
+
+  });
+});

package/projects/finance/src/lib/finance-amount/finance-amount.component.ts

@@ -0,0 +1,68 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  Injector,
+  OnInit,
+  runInInjectionContext,
+  signal
+} from '@angular/core';
+import { XtComponentOutput, XtCompositeComponent, XtRenderSubComponent, XtResolverService } from 'xt-components';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { InputNumber } from 'primeng/inputnumber';
+import { CurrencyPipe } from '@angular/common';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MoneyAmount } from '../money-handler/money-amount';
+
+@Component({
+  selector: 'xt-finance-amount',
+  imports: [
+    InputNumber,
+    CurrencyPipe,
+    XtRenderSubComponent,
+    ReactiveFormsModule
+  ],
+  templateUrl: './finance-amount.component.html',
+  styleUrl: './finance-amount.component.css',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class FinanceAmountComponent extends XtCompositeComponent<MoneyAmount> implements OnInit {
+  isFixedCurrency=true;
+  currency= signal<string|undefined>( undefined );
+
+  override ngOnInit(): void {
+    super.ngOnInit();
+
+    // The same components support multiple types: money-amount (with currency selection), eur-amount or usd-amount
+    let value=this.context().value();
+    if ((this.context().valueType=='money-amount') || (this.context().valueType==null)) {
+      this.isFixedCurrency=false;
+      this.currency.set(value?.currency);
+    }else if (this.context().valueType?.endsWith('-amount')) {
+      this.isFixedCurrency=true;
+      const currency=this.context().valueType?.substring(0,3).toUpperCase();
+        // Enforce the currency if needed
+      if (this.isInForm()) {
+        if (value==null) {
+          value=this.resolverService.findTypeHandlerOf(this.context()).handler?.createNew()??{};
+          this.context().setFormValue(value, true);
+        }else if (value.currency==null) {
+          value.currency=currency;
+          this.context().setFormValue(value, true);
+        }
+      }
+      this.currency.set(currency);
+    }
+    this.manageFormControl('amount');
+  }
+
+  outputChanged($output:XtComponentOutput | null) {
+    if ($output?.valueSelected!=null) {
+      $output?.valueSelected.subscribe (selected => {
+        this.currency.set(selected);
+      });
+    }
+
+  }
+}

package/projects/finance/src/lib/money-handler/money-amount-handler.ts

@@ -0,0 +1,21 @@
+import { AbstractTypeHandler, XtTypeHierarchy } from 'xt-type';
+import { MoneyAmount } from './money-amount';
+
+export class MoneyAmountHandler extends AbstractTypeHandler<MoneyAmount> {
+
+    constructor() {
+      super();
+      this.fields.addOldField('currencyCode','currency');
+    }
+
+    override createNew(): MoneyAmount {
+      const ret:MoneyAmount = {} as unknown as MoneyAmount;
+      if (this.type?.type?.endsWith('-amount')) {
+        if (this.type.type!='money-amount') {
+          ret.currency=this.type.type.substring(0,3).toUpperCase();
+        }
+      }
+      return ret;
+    }
+
+}

package/projects/finance/src/lib/money-handler/money-amount.ts

@@ -0,0 +1,15 @@
+export type MoneyAmount = {
+  amount: number;
+  currency?: Currency;
+}
+
+export type Currency = string;
+
+export type EuroAmount = MoneyAmount & {
+  currency:'EUR'
+}
+
+export type UsdAmount = MoneyAmount & {
+  currency:'USD'
+}
+

package/projects/finance/src/lib/register.ts

@@ -0,0 +1,54 @@
+import { XtResolverService } from 'xt-components';
+import { MoneyAmountHandler } from './money-handler/money-amount-handler';
+import { FinanceAmountComponent } from './finance-amount/finance-amount.component';
+
+export function registerFinancePlugin (resolverService:XtResolverService):string {
+  const pluginName = "Plugin Finance";
+    console.info ('Registering '+pluginName);
+    resolverService.registerPlugin ({
+        name:pluginName,
+        uriLogo:'pluginicon.png',
+        components: [
+            {
+              componentName:'FinanceAmount',
+              componentClass:FinanceAmountComponent,
+              typesHandled: ['money-amount','eur-amount','usd-amount'],
+            }
+        ],
+      types: {
+        "money-amount":{
+          numericField: 'amount',
+          children:{
+            currency:'currency',
+            amount:'number'
+          }
+        },
+        "eur-amount":{
+          numericField: 'amount',
+          children: {
+            currency: 'currency',
+            amount: 'number'
+          }
+        },
+        "usd-amount":{
+          numericField: 'amount',
+          children: {
+            currency: 'currency',
+            amount: 'number'
+          }
+        }
+      }
+      ,typeHandlers:[
+        {
+          typesHandled: ['money-amount', 'eur-amount', 'usd-amount'],
+          handlerClass: MoneyAmountHandler
+        }
+      ]
+
+    });
+    return pluginName;
+}
+
+export function registerPlugin (resolverService:XtResolverService):string {
+  return registerFinancePlugin(resolverService);
+}

package/projects/finance/src/public-api.ts

@@ -0,0 +1,6 @@
+/*
+ * Public API Surface of web plugin
+ */
+
+export * from './lib/finance-amount/finance-amount.component';
+export * from './lib/register';

package/projects/finance/src/test-setup.ts

@@ -0,0 +1,18 @@
+import "@angular/compiler";
+
+import { BrowserTestingModule, platformBrowserTesting } from '@angular/platform-browser/testing';
+
+import { getTestBed } from '@angular/core/testing';
+import { NgModule, provideZonelessChangeDetection } from '@angular/core';
+
+
+@NgModule({
+  imports: [BrowserTestingModule],
+  providers: [provideZonelessChangeDetection()],
+})
+export class TestingModule {}
+
+getTestBed().initTestEnvironment(
+  [TestingModule],
+  platformBrowserTesting()
+);

package/projects/finance/tsconfig.lib.json

@@ -0,0 +1,15 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "exclude": [
+    "**/*.spec.ts"
+  ]
+}

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

@@ -0,0 +1,11 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

package/projects/finance/tsconfig.spec.json

@@ -0,0 +1,18 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "target": "es2016",
+    "types": [
+      "vitest/globals","node"
+    ],
+    "emitDecoratorMetadata": true
+  },
+  "files": ["src/test-setup.ts"],
+  "include": [
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}

package/projects/finance/vitest.config.ts

@@ -0,0 +1,19 @@
+/// <reference types="vitest" />
+import { defineConfig } from 'vite';
+
+import angular from '@analogjs/vite-plugin-angular';
+import tsconfigPaths from 'vite-tsconfig-paths';
+
+export default defineConfig(({ mode }) => ({
+  plugins: [angular(), tsconfigPaths()],
+  test: {
+    globals: true,
+    setupFiles: ['src/test-setup.ts'],
+    environment: 'jsdom',
+    include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+    reporters: ['default']
+  },
+  define: {
+    'import.meta.vitest': mode !== 'production',
+  },
+}));