xt-plugin-intl 0.6.0

package/CHANGELOG.md

@@ -0,0 +1,13 @@
+# Changelog
+
+## [0.6.0](https://github.com/dont-code/ng-xtend/compare/xt-plugin-intl-v0.5.5...xt-plugin-intl-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,8 @@
+![ng-xtend logo](https://dont-code.net/assets/images/logos/logo-xtend-angular-red-small.png)
+
+# XT-Plugin-Sample
+
+This is a plugin for [ng-xtend framework](https://github.com/dont-code/ng-xtend/blob/main/README.md).
+
+It is an example of very Simple (Hello), Simple (Currency) and Complex (Money) components supporting ng-xtend
+

package/angular.json

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

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "xt-plugin-intl",
+  "version": "0.6.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build intl --configuration=development",
+    "build-deploy": "APP=intl-plugin && MAIN_LIB=intl && 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/intl && ../../node_modules/.bin/vitest && cd ../intl-plugin && ../../node_modules/.bin/vitest"
+  },
+  "publishConfig": {
+    "directory": "dist/xt-plugin-intl",
+    "linkDirectory": true
+  },
+  "repository": {
+    "url": "git+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",
+    "es-module-shims": "^2.6.2",
+    "primeicons": "^7.0.0",
+    "@primeuix/themes": "^1.2.5",
+    "tslib": "^2.8.1",
+    "@angular-architects/native-federation": "^20.1.7",
+    "@softarc/native-federation-runtime": "^3.3.6",
+    "tailwindcss": "~4.1.16",
+    "countries-ts": "~2.1.0"
+  },
+  "devDependencies": {
+    "@primeuix/utils": "^0.6.1",
+    "@primeuix/styled": "^0.7.2",
+    "@tailwindcss/postcss": "~4.1.16",
+    "postcss": "~8.5.6",
+    "@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",
+    "happy-dom": "^18.0.1",
+    "@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"
+  }
+}

package/projects/intl/README.md

@@ -0,0 +1,8 @@
+![ng-xtend logo](https://dont-code.net/assets/images/logos/logo-xtend-angular-red-small.png)
+
+# XT-Plugin-Sample
+
+This is a plugin for [ng-xtend framework](https://github.com/dont-code/ng-xtend/blob/main/README.md).
+
+It is an example of very Simple (Hello), Simple (Currency) and Complex (Money) components supporting ng-xtend
+

package/projects/intl/ng-package.json

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

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

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

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

@@ -0,0 +1 @@
+{"version":"3.2.4","results":[[":src/lib/currency/intl-currency.component.spec.ts",{"duration":622.5719389999977,"failed":false}],[":src/lib/country/intl-country.component.spec.ts",{"duration":401.13012100000196,"failed":false}]]}

package/projects/intl/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "xt-plugin-intl",
+  "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/intl/src/lib/country/intl-country.component.html

@@ -0,0 +1,24 @@
+@if (isInForm() ) {
+  <ng-container [formGroup]="formGroup()">
+    <p-autocomplete [fluid]="true" optionValue="alpha3" [forceSelection]="true" [dropdown]="true" [formControlName]="formControlName()" [suggestions]="listOfCountries()" (completeMethod)="matchCountry($event)" (onUnselect)="selectionCanceled($event)" (onSelect)="selectionChange($event)">
+      <ng-template let-country #item>
+        <div class="flex items-center gap-4">
+          <img [src]="country.flag" style="width: 18px" />
+          <span>{{country.label}}</span>
+        </div>
+      </ng-template>
+    </p-autocomplete>
+  </ng-container>
+} @else {
+  @let country=currentCountry();
+  @if (country!=null) {
+    @if (context().displayMode=='INLINE_VIEW') {
+      <img [src]="country.flag" style="width: 18px" />
+    } @else {
+      <div class="flex items-center gap-4">
+        <img [src]="country.flag" style="width: 18px" />
+        <span>{{country.label}}</span>
+      </div>
+    }
+  }
+}

package/projects/intl/src/lib/country/intl-country.component.spec.ts

@@ -0,0 +1,33 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { beforeEach, describe, expect, it } from 'vitest';
+import { registerInternationalPlugin } from '../register';
+import { XtBaseContext, XtResolverService } from 'xt-components';
+import { IntlCountryComponent } from './intl-country.component';
+import { provideZonelessChangeDetection } from '@angular/core';
+
+describe('IntlCountryComponent', () => {
+  let component: IntlCountryComponent;
+  let fixture: ComponentFixture<IntlCountryComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [IntlCountryComponent],
+      providers: [provideZonelessChangeDetection()]
+    })
+    .compileComponents();
+
+    registerInternationalPlugin(TestBed.inject(XtResolverService));
+  });
+
+  it('should create', () => {
+    fixture = TestBed.createComponent(IntlCountryComponent);
+    component = fixture.componentInstance;
+    const context= new XtBaseContext<string>('FULL_VIEW');
+    context.setDisplayValue("FRA");
+    fixture.componentRef.setInput('context', context);
+    fixture.detectChanges();
+
+    expect(component).toBeTruthy();
+
+  });
+});

package/projects/intl/src/lib/country/intl-country.component.ts

@@ -0,0 +1,66 @@
+import { ChangeDetectionStrategy, Component, computed, OnInit, output, signal } from '@angular/core';
+import { XtSimpleComponent } from 'xt-components';
+import { ReactiveFormsModule } from '@angular/forms';
+import {
+  AutoComplete,
+  AutoCompleteCompleteEvent,
+  AutoCompleteSelectEvent,
+  AutoCompleteUnselectEvent
+} from 'primeng/autocomplete';
+import countriests from 'countries-ts';
+const { listCountries, searchCountries, alpha3Codes, getByAlpha3 } = countriests;
+
+import { Country } from 'countries-ts';
+
+@Component({
+  selector: 'xt-intl-country',
+  imports: [
+    ReactiveFormsModule,
+    AutoComplete
+  ],
+  templateUrl: './intl-country.component.html',
+  styleUrl: './intl-country.component.css',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class IntlCountryComponent extends XtSimpleComponent<string> {
+  selected= output<string|undefined>();
+
+  listOfCountries=signal<Country[]> (listCountries());
+
+  constructor() {
+    super();
+    // Converts the code to alpha3 codes
+    this.toAlpha3(listCountries());
+  }
+
+  matchCountry($event: AutoCompleteCompleteEvent) {
+    this.listOfCountries.set (searchCountries($event.query)
+    );
+  }
+
+  selectionChange($event: AutoCompleteSelectEvent) {
+    this.selected.emit($event.value.alpha3);
+  }
+
+  selectionCanceled($event: AutoCompleteUnselectEvent) {
+    this.selected.emit(undefined);
+  }
+
+  override setupInputOutput () {
+    this.outputsObject.valueSelected=this.selected;
+  }
+
+  toAlpha3 (list:Country[]): Country[] {
+    for (const country of list) {
+      country.alpha3=alpha3Codes[country.code]??country.code;
+    }
+    return list;
+  }
+
+  currentCountry = computed( () => {
+    const val=this.displayValue();
+    if (val!=null) {
+      return getByAlpha3(val);
+    } else return null;
+  });
+}

package/projects/intl/src/lib/currency/intl-currency.component.html

@@ -0,0 +1,7 @@
+@if (isInForm() ) {
+    <ng-container [formGroup]="formGroup()">
+      <p-autocomplete [fluid]="true" [forceSelection]="true" [dropdown]="true" [formControlName]="formControlName()" [suggestions]="listOfCurrencies()" (completeMethod)="matchCurrency($event)" (onUnselect)="selectionCanceled($event)" (onSelect)="selectionChange($event)"></p-autocomplete>
+    </ng-container>
+} @else {
+    {{ context().displayValue() }}
+}

package/projects/intl/src/lib/currency/intl-currency.component.spec.ts

@@ -0,0 +1,74 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { IntlCurrencyComponent } from './intl-currency.component';
+import { provideZonelessChangeDetection } from '@angular/core';
+import { HostTestTypedComponent, HostTestTypedFormComponent, XtBaseContext, XtResolverService } from 'xt-components';
+import { registerInternationalPlugin } from '../register';
+import { By } from '@angular/platform-browser';
+import { beforeEach, describe, expect, it } from 'vitest';
+
+describe('XtCurrencyComponent', () => {
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [IntlCurrencyComponent],
+      providers: [provideZonelessChangeDetection()]
+    })
+    .compileComponents();
+
+    registerInternationalPlugin(TestBed.inject(XtResolverService));
+  });
+
+  it('should create', () => {
+    let component: IntlCurrencyComponent;
+    let fixture: ComponentFixture<IntlCurrencyComponent>;
+    fixture = TestBed.createComponent(IntlCurrencyComponent);
+    component = fixture.componentInstance;
+    const context= new XtBaseContext<string>('FULL_VIEW');
+    context.setDisplayValue("");
+    fixture.componentRef.setInput('context', context);
+    fixture.detectChanges();
+    expect(component).toBeTruthy();
+  });
+
+  it('should support currency display', () => {
+    const hostFixture = TestBed.createComponent(HostTestTypedComponent);
+    hostFixture.componentRef.setInput('value', 'EUR');
+    hostFixture.componentRef.setInput('valueType', 'currency');
+
+    const host = hostFixture.componentInstance;
+    expect(host).toBeTruthy();
+    hostFixture.detectChanges();
+    expect(hostFixture.nativeElement.textContent).toContain('EUR');
+
+    hostFixture.componentRef.setInput('value', 'USD');
+    hostFixture.detectChanges();
+    expect(hostFixture.nativeElement.textContent).toContain('USD');
+
+  });
+
+  it('should support currency edit', () => {
+    const hostFixture = TestBed.createComponent(HostTestTypedFormComponent);
+    hostFixture.componentRef.setInput('formDescription', {
+      currency:'EUR'
+    });
+    hostFixture.componentRef.setInput('valueType', 'currency');
+    hostFixture.componentRef.setInput('controlName', 'currency');
+
+    const host = hostFixture.componentInstance;
+    expect(host).toBeTruthy();
+    hostFixture.detectChanges();
+
+    const currencyComponent = hostFixture.debugElement.query(By.directive(IntlCurrencyComponent));
+    expect(currencyComponent).toBeTruthy();
+    const input = currencyComponent.query(By.css('input'));
+
+    expect(input.nativeElement.value).toEqual ('EUR');
+
+    host.computeFormGroup().patchValue({'currency':"USD"});
+    hostFixture.detectChanges();
+    expect(input.nativeElement.value).toEqual ("USD");
+
+  });
+
+});

package/projects/intl/src/lib/currency/intl-currency.component.ts

@@ -0,0 +1,46 @@
+import { ChangeDetectionStrategy, Component, output, signal } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+import { InputNumberModule } from 'primeng/inputnumber';
+import { XtSimpleComponent } from 'xt-components';
+import { CommonModule } from '@angular/common';
+import { InputTextModule } from 'primeng/inputtext';
+import {
+  AutoComplete,
+  AutoCompleteCompleteEvent,
+  AutoCompleteSelectEvent,
+  AutoCompleteUnselectEvent
+} from 'primeng/autocomplete';
+
+@Component({
+  selector: 'xt-intl-currency',
+  standalone: true,
+  imports: [CommonModule, InputNumberModule, ReactiveFormsModule, InputTextModule, AutoComplete],
+  templateUrl: './intl-currency.component.html',
+  styleUrl: './intl-currency.component.css',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class IntlCurrencyComponent extends XtSimpleComponent<string> {
+  selected= output<string|undefined>();
+
+  listOfCurrencies=signal<string[]> (Intl.supportedValuesOf('currency'));
+
+  matchCurrency($event: AutoCompleteCompleteEvent) {
+    this.listOfCurrencies.set (Intl.supportedValuesOf('currency').filter(currency => {
+      return currency.indexOf($event.query) != -1;
+
+    }));
+  }
+
+  selectionChange($event: AutoCompleteSelectEvent) {
+    this.selected.emit($event.value);
+  }
+
+  selectionCanceled($event: AutoCompleteUnselectEvent) {
+    this.selected.emit(undefined);
+  }
+
+  override setupInputOutput () {
+    this.outputsObject.valueSelected=this.selected;
+  }
+
+}

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

@@ -0,0 +1,36 @@
+import { XtResolverService } from 'xt-components';
+import { IntlCurrencyComponent } from './currency/intl-currency.component';
+import { IntlCountryComponent } from './country/intl-country.component';
+
+export function registerInternationalPlugin (resolverService:XtResolverService):string {
+  const pluginName = "Plugin International";
+    console.info ('Registering '+pluginName);
+    resolverService.registerPlugin ({
+        name:pluginName,
+        uriLogo:'pluginicon.png',
+        components: [
+            {
+                componentName:'IntlCurrency',
+                componentClass:IntlCurrencyComponent,
+                typesHandled: ['currency'],
+                outputs: ['valueSelected']
+            },
+            {
+              componentName:'IntlCountry',
+              componentClass:IntlCountryComponent,
+              typesHandled: ['country'],
+              outputs: ['valueSelected']
+            }
+        ],
+        types:
+          {
+            currency:'string',
+            country:'string'
+          }
+    });
+    return pluginName;
+}
+
+export function registerPlugin (resolverService:XtResolverService):string {
+  return registerInternationalPlugin(resolverService);
+}

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

@@ -0,0 +1,8 @@
+/*
+ * Public API Surface of intl-plugin
+ */
+
+export * from './lib/currency/intl-currency.component';
+export * from './lib/country/intl-country.component';
+export * from './lib/register';
+

package/projects/intl/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/intl/tsconfig.lib.json

@@ -0,0 +1,14 @@
+/* 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,
+    "types": []
+  },
+  "exclude": [
+    "**/*.spec.ts"
+  ]
+}

package/projects/intl/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/intl/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"
+  ]
+}