bank20baht-ui-angular 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Nattapong Promthong
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,79 @@
-# Temporary Holding Version
+# bank20baht-ui-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 adapter for [bank20baht-ui](https://www.npmjs.com/package/bank20baht-ui). One directive per `<baht-*>`
+element, sitting on the real element (no wrapper, no extra DOM), so templates get:
+
+- **typed inputs**: `[field]`, `[form]`, `[items]` are checked against the element's own property types, and a
+  misspelled property fails the build (`Can't bind to 'varient'`);
+- **typed outputs** that emit the event `detail`: `(bahtChange)="save($event.data)"`, no `$any($event).detail`;
+- **`[(value)]`** on every element that edits a value (fields, tabs, rating, range, otp, …), with signals;
+- **the binding gotchas handled**: `readonly` reaches the element (Angular maps a plain `[readonly]` to the
+  native `readOnly`), and boolean/number attributes (`<baht-form readonly>`, `debounce="300"`) are coerced;
+- **no `CUSTOM_ELEMENTS_SCHEMA`**: the directives make the tags known to the compiler.
+
+The directives are generated from the elements' `custom-elements.json`, so every element, property and event
+in the matching bank20baht-ui minor is covered.
+
+```bash
+npm i bank20baht-ui bank20baht-ui-angular
+```
+
+## Use
+
+```ts
+// main.ts: register the elements once, as before
+import 'bank20baht-ui';
+```
+
+```ts
+import { Component, signal } from '@angular/core';
+import type { FormDefinition } from 'bank20baht-ui';
+import { BAHT_UI } from 'bank20baht-ui-angular';
+
+@Component({
+  selector: 'app-request',
+  imports: [BAHT_UI],
+  template: `
+    <baht-tabs [tabs]="tabs" [(value)]="tab" />
+    <baht-form #f="bahtForm" [form]="form" [readonly]="locked()" (bahtChange)="draft = $event.data" />
+    <baht-button (click)="f.element.validate().valid && save()">Save</baht-button>
+  `,
+})
+export class RequestComponent {
+  readonly tab = signal('details');
+  readonly locked = signal(false);
+  form!: FormDefinition;
+  draft: Record<string, unknown> = {};
+}
+```
+
+- `BAHT_UI` is every directive; import single ones (`BahtFormDirective`, `BahtSelectDirective`, …) if you prefer.
+- Outputs are the event name in camelCase: `baht-row-click` → `(bahtRowClick)`, emitting the detail. The DOM
+  event still fires, so existing `(baht-row-click)="…$event.detail…"` bindings keep working while you migrate.
+- `#ref="bahtForm"` (the tag in camelCase) gives the directive; `.element` is the element, typed, for its methods
+  (`validate()`, `getData()`, `reset()`, `replay()`, …). `viewChild(BahtFormDirective)` works the same way.
+- Outputs only fire for the element's own events; the same event bubbling from an element inside it is ignored.
+- `<baht-form>` and `<baht-workflow>` have no `[(value)]`: their `value` is the starting data. Listen to
+  `(bahtChange)` / `(bahtDataChange)`, or bind a store (below).
+
+## bank20baht-store as signals
+
+```ts
+import { createBahtStore } from 'bank20baht-store';
+import { bahtSignal, bahtStore } from 'bank20baht-ui-angular/store';
+
+readonly store = createBahtStore();
+readonly days = bahtSignal<number>(this.store, 'Request.days'); // WritableSignal: set() writes through
+readonly all = bahtStore(this.store);                            // the whole tree, read-only
+```
+
+Call them in an injection context; they unsubscribe on destroy. `bank20baht-store` is an optional peer.
+
+## Versions and federation
+
+- Peer `bank20baht-ui` is pinned to one minor (`>=0.18.0 <0.19.0`): the directives are generated from that
+  minor's elements. Angular `>=20`.
+- The package ships partial-compiled (Ivy) code and imports only types from bank20baht-ui at runtime, so it adds
+  no second copy of the elements. With Native Federation, share it like any other library.
+
+MIT.