bank20baht-ui-angular 0.0.0-stage → 0.1.0

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from './elements.js';

package/dist/index.js

@@ -0,0 +1 @@
+export * from './elements.js';

package/dist/runtime.d.ts

@@ -0,0 +1,16 @@
+import { type OutputEmitterRef } from '@angular/core';
+/** The element the directive sits on, typed as its bank20baht-ui class. */
+export declare function hostElement<T extends HTMLElement>(): T;
+/**
+ * Set one property on the element. Optional properties (`debounce?: number`) take `undefined`
+ * too, which an input can pass when the binding is cleared.
+ */
+export declare function assign<T extends HTMLElement, K extends keyof T>(el: T, key: K, v: T[K] | undefined): void;
+/** Number inputs accept a static attribute string (`debounce="300"`); unset stays unset. */
+export declare function num(v: unknown): number | undefined;
+/**
+ * Emit the element's own `name` events on `out`, as their `detail` (or `pick(detail)`). Events
+ * bubbling up from another element inside it are not its own, so they are left alone: an
+ * accordion inside a popover does not fire the popover's `bahtToggle`.
+ */
+export declare function relay<D, T = D>(el: HTMLElement, name: string, out: OutputEmitterRef<T>, pick?: (detail: D) => T): void;

package/dist/runtime.js

@@ -0,0 +1,36 @@
+// What every generated directive shares: the host element, the input transforms, and relaying
+// an element event to an output as its detail.
+import { DestroyRef, ElementRef, inject, numberAttribute, } from '@angular/core';
+/** The element the directive sits on, typed as its bank20baht-ui class. */
+// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-parameters -- each directive names its element class here; the element is that class
+export function hostElement() {
+    return inject(ElementRef).nativeElement;
+}
+/**
+ * Set one property on the element. Optional properties (`debounce?: number`) take `undefined`
+ * too, which an input can pass when the binding is cleared.
+ */
+export function assign(el, key, v) {
+    el[key] = v;
+}
+/** Number inputs accept a static attribute string (`debounce="300"`); unset stays unset. */
+export function num(v) {
+    return v === undefined || v === null || v === '' ? undefined : numberAttribute(v);
+}
+/**
+ * Emit the element's own `name` events on `out`, as their `detail` (or `pick(detail)`). Events
+ * bubbling up from another element inside it are not its own, so they are left alone: an
+ * accordion inside a popover does not fire the popover's `bahtToggle`.
+ */
+export function relay(el, name, out, pick) {
+    const listener = (e) => {
+        if (e.target !== el)
+            return;
+        const detail = e.detail;
+        out.emit(pick ? pick(detail) : detail);
+    };
+    el.addEventListener(name, listener);
+    inject(DestroyRef).onDestroy(() => {
+        el.removeEventListener(name, listener);
+    });
+}

package/dist/store.d.ts

@@ -0,0 +1,12 @@
+import { type Signal, type WritableSignal } from '@angular/core';
+import type { BahtStore } from 'bank20baht-store';
+/**
+ * One ref of a store as a `WritableSignal`: reading follows the store (a bound form's edits
+ * included), `set()` writes through `store.set`, so a bound element updates in place. Call it in
+ * an injection context (a field initializer or constructor); it unsubscribes on destroy.
+ *
+ *   readonly days = bahtSignal<number>(this.store, 'Request.days');
+ */
+export declare function bahtSignal<T = unknown>(store: BahtStore, ref: string): WritableSignal<T>;
+/** The whole store as a read-only signal (stable identity between changes). */
+export declare function bahtStore(store: BahtStore): Signal<Record<string, unknown>>;

package/dist/store.js

@@ -0,0 +1,37 @@
+// bank20baht-store as Angular signals: the counterpart of bank20baht-store/react's hooks.
+import { DestroyRef, inject, signal } from '@angular/core';
+/**
+ * One ref of a store as a `WritableSignal`: reading follows the store (a bound form's edits
+ * included), `set()` writes through `store.set`, so a bound element updates in place. Call it in
+ * an injection context (a field initializer or constructor); it unsubscribes on destroy.
+ *
+ *   readonly days = bahtSignal<number>(this.store, 'Request.days');
+ */
+export function bahtSignal(store, ref) {
+    const value = signal(store.get(ref), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    const off = store.subscribe(() => {
+        value.set(store.get(ref));
+    });
+    inject(DestroyRef).onDestroy(off);
+    const write = (next) => {
+        store.set(ref, next);
+    };
+    return Object.assign(value.asReadonly(), {
+        set: write,
+        update: (fn) => {
+            write(fn(value()));
+        },
+        asReadonly: () => value.asReadonly(),
+    });
+}
+/** The whole store as a read-only signal (stable identity between changes). */
+export function bahtStore(store) {
+    const value = signal(store.get(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    const off = store.subscribe((data) => {
+        value.set(data);
+    });
+    inject(DestroyRef).onDestroy(off);
+    return value.asReadonly();
+}

package/package.json

@@ -1,6 +1,74 @@
 {
   "name": "bank20baht-ui-angular",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "type": "module",
+  "description": "Angular adapter for bank20baht-ui: typed directives on the real <baht-*> elements, with typed outputs, [(value)] two-way binding and the Angular binding gotchas handled. Generated from the elements' manifest.",
+  "license": "MIT",
+  "author": "Nattapong Promthong",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/bank20baht/bahtui.git",
+    "directory": "packages/angular"
+  },
+  "homepage": "https://github.com/bank20baht/bahtui#readme",
+  "bugs": {
+    "url": "https://github.com/bank20baht/bahtui/issues"
+  },
+  "keywords": [
+    "angular",
+    "web-components",
+    "lit",
+    "forms",
+    "bahtui"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist",
+    "LICENSE"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./store": {
+      "types": "./dist/store.d.ts",
+      "default": "./dist/store.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "sideEffects": false,
+  "scripts": {
+    "generate": "bun scripts/generate.ts",
+    "build": "bun scripts/generate.ts && ngc -p tsconfig.json",
+    "test": "ngc -p tsconfig.json && vitest run",
+    "test:coverage": "ngc -p tsconfig.json && vitest run"
+  },
+  "peerDependencies": {
+    "@angular/core": ">=20.0.0",
+    "bank20baht-store": ">=0.2.0 <0.3.0",
+    "bank20baht-ui": ">=0.18.0 <0.19.0"
+  },
+  "peerDependenciesMeta": {
+    "bank20baht-store": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@angular/common": "^22.2.0",
+    "@angular/compiler": "^22.2.0",
+    "@angular/compiler-cli": "^22.2.0",
+    "@angular/core": "^22.2.0",
+    "@angular/platform-browser": "^22.2.0",
+    "bank20baht-store": "workspace:*",
+    "bank20baht-ui": "workspace:*",
+    "happy-dom": "^20.0.0",
+    "rxjs": "^7.8.0",
+    "typescript": "~6.0.2",
+    "vitest": "^3.2.4"
+  }
+}