@payex-ds/angular 0.0.0-stage → 0.1.0

package/README.md

@@ -1,3 +1,52 @@
-# Temporary Holding Version
+# @payex-ds/angular
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Angular (>= 18) standalone components for the PayEx design system web components (`@payex-ds/core`). The components are **generated** from the Custom Elements Manifest — see `tools/wrapper-gen`.
+
+## Install
+
+```sh
+pnpm add @payex-ds/angular @payex-ds/core
+```
+
+## Usage
+
+```ts
+// app.config.ts
+import { provideDesignSystem } from '@payex-ds/angular';
+
+export const appConfig = {
+  providers: [provideDesignSystem({ design: 'payex' })], // awaits ds.init before bootstrap
+};
+```
+
+```ts
+import { Component } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+import { PDS_COMPONENTS } from '@payex-ds/angular';
+
+@Component({
+  standalone: true,
+  imports: [...PDS_COMPONENTS, ReactiveFormsModule],
+  template: `
+    <pds-input label="Name" [formControl]="name"></pds-input>
+    <pds-button variant="secondary" disabled (pdsClick)="save()">Save</pds-button>
+  `,
+})
+export class FormComponent {}
+```
+
+Import single components (`PdsButtonComponent`, …) or the whole `PDS_COMPONENTS` list (all components plus the form value accessor). There is no NgModule.
+
+- The selector is the tag name; the Angular component **is** the custom element.
+- Inputs mirror element properties (`[variant]`, `disabled`, `[fullWidth]`); boolean/number inputs accept plain attributes.
+- Events `pds-<name>` are outputs `(pds<Name>)`: `pds-change` → `(pdsChange)`, `pds-menu-toggle` → `(pdsMenuToggle)`. They emit inside the Angular zone; property writes and listeners run outside it.
+- Form controls work with `formControlName`, `[formControl]` and `[(ngModel)]` (value property for inputs/selects, `checked` for checkboxes and toggles).
+- `provideDesignSystem({ design, ...InitOptions })`; use `inlineDesign` instead of `InitOptions.design` to pass an inline design object.
+
+## Building and publishing
+
+`pnpm --filter @payex-ds/angular build` runs ng-packagr (partial Ivy compilation) and writes a publishable package to `dist/` (FESM2022 + `package.json`). `publishConfig.directory` is `dist`, so `pnpm publish` publishes the built directory. Build `@payex-ds/core` first (`pnpm -r build` does this in order). Note: `dist/package.json` keeps `"@payex-ds/core": "workspace:*"`; verify pnpm rewrites it on publish (changesets does).
+
+## Regenerating
+
+`src/generated/*` is generated; do not edit. From the repo root: `pnpm generate:wrappers`.

package/esm2022/generated/all.mjs

@@ -0,0 +1,7 @@
+// AUTO-GENERATED by @payex-ds/wrapper-gen from the @payex-ds/core Custom Elements Manifest.
+// Do not edit by hand. Regenerate with `pnpm generate:wrappers`.
+import { PDS_ELEMENT_COMPONENTS } from './components';
+import { PdsValueAccessor } from './value-accessor';
+/** Every component plus the form value accessor; use as `imports: [...PDS_COMPONENTS]`. */
+export const PDS_COMPONENTS = [...PDS_ELEMENT_COMPONENTS, PdsValueAccessor];
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWxsLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2dlbmVyYXRlZC9hbGwudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsNEZBQTRGO0FBQzVGLGlFQUFpRTtBQUVqRSxPQUFPLEVBQUUsc0JBQXNCLEVBQUUsTUFBTSxjQUFjLENBQUM7QUFDdEQsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0sa0JBQWtCLENBQUM7QUFFcEQsMkZBQTJGO0FBQzNGLE1BQU0sQ0FBQyxNQUFNLGNBQWMsR0FBRyxDQUFDLEdBQUcsc0JBQXNCLEVBQUUsZ0JBQWdCLENBQVUsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8vIEFVVE8tR0VORVJBVEVEIGJ5IEBwYXlleC1kcy93cmFwcGVyLWdlbiBmcm9tIHRoZSBAcGF5ZXgtZHMvY29yZSBDdXN0b20gRWxlbWVudHMgTWFuaWZlc3QuXG4vLyBEbyBub3QgZWRpdCBieSBoYW5kLiBSZWdlbmVyYXRlIHdpdGggYHBucG0gZ2VuZXJhdGU6d3JhcHBlcnNgLlxuXG5pbXBvcnQgeyBQRFNfRUxFTUVOVF9DT01QT05FTlRTIH0gZnJvbSAnLi9jb21wb25lbnRzJztcbmltcG9ydCB7IFBkc1ZhbHVlQWNjZXNzb3IgfSBmcm9tICcuL3ZhbHVlLWFjY2Vzc29yJztcblxuLyoqIEV2ZXJ5IGNvbXBvbmVudCBwbHVzIHRoZSBmb3JtIHZhbHVlIGFjY2Vzc29yOyB1c2UgYXMgYGltcG9ydHM6IFsuLi5QRFNfQ09NUE9ORU5UU11gLiAqL1xuZXhwb3J0IGNvbnN0IFBEU19DT01QT05FTlRTID0gWy4uLlBEU19FTEVNRU5UX0NPTVBPTkVOVFMsIFBkc1ZhbHVlQWNjZXNzb3JdIGFzIGNvbnN0O1xuIl19