bank20baht-ui 0.0.1 → 0.0.2

package/dist/chunks/{baht-toast-BlZBbneT.js → baht-toast-1frNyH2A.js}

@@ -1,8 +1,8 @@
-import { LitElement as E, nothing as h, html as d, svg as p } from "lit";
+import { LitElement as E, nothing as h, html as d, svg as u } from "lit";
 import { property as a, query as C, customElement as $, state as _ } from "lit/decorators.js";
-var B = Object.defineProperty, f = (t, e, i, o) => {
-  for (var s = void 0, r = t.length - 1, n; r >= 0; r--)
-    (n = t[r]) && (s = n(e, i, s) || s);
+var B = Object.defineProperty, f = (t, e, i, r) => {
+  for (var s = void 0, o = t.length - 1, n; o >= 0; o--)
+    (n = t[o]) && (s = n(e, i, s) || s);
   return s && B(e, i, s), s;
 };
 class v extends E {
@@ -13,10 +13,10 @@ class v extends E {
 function w(t, e) {
   let i = e;
   for (; i.parentNode && i.parentNode !== t; ) i = i.parentNode;
-  const o = Array.from(t.childNodes).filter(
+  const r = Array.from(t.childNodes).filter(
     (s) => s !== i && s.nodeType !== Node.COMMENT_NODE
   );
-  o.length > 0 && e.append(...o);
+  r.length > 0 && e.append(...r);
 }
 class m extends v {
   constructor() {
@@ -88,14 +88,15 @@ f([
   a({ attribute: !1 })
 ], m.prototype, "error");
 const O = {
-  copy: p`<rect x="6" y="6" width="8" height="8" rx="1.5"/><path d="M10 6V4.5A1.5 1.5 0 0 0 8.5 3H4.5A1.5 1.5 0 0 0 3 4.5v4A1.5 1.5 0 0 0 4.5 10H6"/>`,
-  check: p`<path d="M3.5 8.5 6.5 11.5 12.5 4.5"/>`,
-  download: p`<path d="M8 3v7m0 0 3-3m-3 3L5 7"/><path d="M3 12h10"/>`,
-  upload: p`<path d="M8 12V5m0 0 3 3M8 5 5 8"/><path d="M3 4h10"/>`,
-  plus: p`<path d="M8 3.5v9M3.5 8h9"/>`,
-  external: p`<path d="M6 3H3.5v9.5h9.5V10"/><path d="M9 3h4v4"/><path d="M13 3 7.5 8.5"/>`,
-  close: p`<path d="M4 4l8 8M12 4l-8 8"/>`,
-  play: p`<path d="M5 3.5v9l7-4.5z"/>`
+  copy: u`<rect x="6" y="6" width="8" height="8" rx="1.5"/><path d="M10 6V4.5A1.5 1.5 0 0 0 8.5 3H4.5A1.5 1.5 0 0 0 3 4.5v4A1.5 1.5 0 0 0 4.5 10H6"/>`,
+  check: u`<path d="M3.5 8.5 6.5 11.5 12.5 4.5"/>`,
+  download: u`<path d="M8 3v7m0 0 3-3m-3 3L5 7"/><path d="M3 12h10"/>`,
+  upload: u`<path d="M8 12V5m0 0 3 3M8 5 5 8"/><path d="M3 4h10"/>`,
+  plus: u`<path d="M8 3.5v9M3.5 8h9"/>`,
+  external: u`<path d="M6 3H3.5v9.5h9.5V10"/><path d="M9 3h4v4"/><path d="M13 3 7.5 8.5"/>`,
+  close: u`<path d="M4 4l8 8M12 4l-8 8"/>`,
+  play: u`<path d="M5 3.5v9l7-4.5z"/>`,
+  search: u`<circle cx="7" cy="7" r="4"/><path d="m13 13-3.2-3.2"/>`
 };
 function M(t) {
   return d`<svg
@@ -114,10 +115,10 @@ function M(t) {
 function I(t) {
   return t in O;
 }
-var P = Object.defineProperty, S = Object.getOwnPropertyDescriptor, u = (t, e, i, o) => {
-  for (var s = o > 1 ? void 0 : o ? S(e, i) : e, r = t.length - 1, n; r >= 0; r--)
-    (n = t[r]) && (s = (o ? n(e, i, s) : n(s)) || s);
-  return o && s && P(e, i, s), s;
+var x = Object.defineProperty, P = Object.getOwnPropertyDescriptor, p = (t, e, i, r) => {
+  for (var s = r > 1 ? void 0 : r ? P(e, i) : e, o = t.length - 1, n; o >= 0; o--)
+    (n = t[o]) && (s = (r ? n(e, i, s) : n(s)) || s);
+  return r && s && x(e, i, s), s;
 };
 let c = class extends v {
   constructor() {
@@ -127,46 +128,46 @@ let c = class extends v {
     this.iconOnly || w(this, this.buttonEl);
   }
   render() {
-    const t = this.variant === "primary" ? "" : ` baht-button--${this.variant}`, e = this.size === "md" ? "" : ` baht-button--${this.size}`, i = this.iconOnly ? " baht-button--icon" : "", o = this.icon && I(this.icon) ? M(this.icon) : h;
+    const t = this.variant === "primary" ? "" : ` baht-button--${this.variant}`, e = this.size === "md" ? "" : ` baht-button--${this.size}`, i = this.iconOnly ? " baht-button--icon" : "", r = this.icon && I(this.icon) ? M(this.icon) : h;
     return d`<button
       class="baht-button${t}${e}${i}"
       type=${this.type}
       aria-label=${this.iconOnly && this.label ? this.label : h}
       ?disabled=${this.disabled}
-    >${o}${this.iconOnly ? h : this.label}</button>`;
+    >${r}${this.iconOnly ? h : this.label}</button>`;
   }
 };
-u([
+p([
   a()
 ], c.prototype, "variant", 2);
-u([
+p([
   a()
 ], c.prototype, "size", 2);
-u([
+p([
   a({ type: Boolean })
 ], c.prototype, "disabled", 2);
-u([
+p([
   a()
 ], c.prototype, "type", 2);
-u([
+p([
   a()
 ], c.prototype, "label", 2);
-u([
+p([
   a()
 ], c.prototype, "icon", 2);
-u([
+p([
   a({ type: Boolean, attribute: "icon-only" })
 ], c.prototype, "iconOnly", 2);
-u([
+p([
   C("button")
 ], c.prototype, "buttonEl", 2);
-c = u([
+c = p([
   $("baht-button")
 ], c);
-var k = Object.defineProperty, x = Object.getOwnPropertyDescriptor, y = (t, e, i, o) => {
-  for (var s = o > 1 ? void 0 : o ? x(e, i) : e, r = t.length - 1, n; r >= 0; r--)
-    (n = t[r]) && (s = (o ? n(e, i, s) : n(s)) || s);
-  return o && s && k(e, i, s), s;
+var S = Object.defineProperty, k = Object.getOwnPropertyDescriptor, y = (t, e, i, r) => {
+  for (var s = r > 1 ? void 0 : r ? k(e, i) : e, o = t.length - 1, n; o >= 0; o--)
+    (n = t[o]) && (s = (r ? n(e, i, s) : n(s)) || s);
+  return r && s && S(e, i, s), s;
 };
 let l = class extends v {
   constructor() {
@@ -189,12 +190,12 @@ let l = class extends v {
       i == null || i.focus(), t.preventDefault();
       return;
     }
-    const o = e[0], s = e[e.length - 1], r = document.activeElement;
-    if (!this.contains(r)) {
-      o.focus(), t.preventDefault();
+    const r = e[0], s = e[e.length - 1], o = document.activeElement;
+    if (!this.contains(o)) {
+      r.focus(), t.preventDefault();
       return;
     }
-    t.shiftKey && (r === o || r === i) ? (s.focus(), t.preventDefault()) : !t.shiftKey && r === s && (o.focus(), t.preventDefault());
+    t.shiftKey && (o === r || o === i) ? (s.focus(), t.preventDefault()) : !t.shiftKey && o === s && (r.focus(), t.preventDefault());
   }
   connectedCallback() {
     super.connectedCallback(), document.addEventListener("keydown", this.onKeydown);
@@ -207,9 +208,9 @@ let l = class extends v {
   }
   updated(t) {
     var e, i;
-    if (t.has("open") && (l.openStack = l.openStack.filter((o) => o !== this), this.open && l.openStack.push(this)), t.has("open") && this.open && (this.previousFocus = document.activeElement, (e = this.querySelector(".baht-modal")) == null || e.focus()), t.has("open") && !this.open && t.get("open") === !0) {
-      const o = this.previousFocus;
-      this.previousFocus = null, o != null && o.isConnected && (!document.activeElement || document.activeElement === document.body || this.contains(document.activeElement)) && ((i = o.focus) == null || i.call(o));
+    if (t.has("open") && (l.openStack = l.openStack.filter((r) => r !== this), this.open && l.openStack.push(this)), t.has("open") && this.open && (this.previousFocus = document.activeElement, (e = this.querySelector(".baht-modal")) == null || e.focus()), t.has("open") && !this.open && t.get("open") === !0) {
+      const r = this.previousFocus;
+      this.previousFocus = null, r != null && r.isConnected && (!document.activeElement || document.activeElement === document.body || this.contains(document.activeElement)) && ((i = r.focus) == null || i.call(r));
     }
   }
   /** Ask the host to close (the host owns `open`). */
@@ -253,10 +254,10 @@ y([
 l = y([
   $("baht-modal")
 ], l);
-var q = Object.defineProperty, D = Object.getOwnPropertyDescriptor, g = (t, e, i, o) => {
-  for (var s = o > 1 ? void 0 : o ? D(e, i) : e, r = t.length - 1, n; r >= 0; r--)
-    (n = t[r]) && (s = (o ? n(e, i, s) : n(s)) || s);
-  return o && s && q(e, i, s), s;
+var q = Object.defineProperty, D = Object.getOwnPropertyDescriptor, g = (t, e, i, r) => {
+  for (var s = r > 1 ? void 0 : r ? D(e, i) : e, o = t.length - 1, n; o >= 0; o--)
+    (n = t[o]) && (s = (r ? n(e, i, s) : n(s)) || s);
+  return r && s && q(e, i, s), s;
 };
 let b = class extends v {
   constructor() {

package/dist/components/primitives/baht-bar-chart.d.ts

@@ -0,0 +1,16 @@
+import { TemplateResult } from 'lit';
+import { BahtElement } from '../base.js';
+import { ChartGroup } from './charts.js';
+/**
+ * Horizontal bars with counts (report type "bar").
+ *
+ *   const el = document.createElement('baht-bar-chart');
+ *   el.groups = [{ label: 'P1', count: 2 }, { label: 'P2', count: 7 }];
+ */
+export declare class BahtBarChart extends BahtElement {
+    groups: ChartGroup[];
+    /** Single color for every bar; per-series palette otherwise. */
+    color: string;
+    emptyMessage: string;
+    protected render(): TemplateResult;
+}

package/dist/components/primitives/baht-donut-chart.d.ts

@@ -0,0 +1,22 @@
+import { TemplateResult } from 'lit';
+import { BahtElement } from '../base.js';
+import { ChartGroup } from './charts.js';
+/**
+ * Pure-SVG donut with legend (report type "pie").
+ *
+ *   const el = document.createElement('baht-donut-chart');
+ *   el.groups = [{ label: 'Open', count: 4 }, { label: 'Closed', count: 9 }];
+ *
+ * `total` defaults to the group sum; set it when the center number differs
+ * (e.g. records vs. groups).
+ */
+export declare class BahtDonutChart extends BahtElement {
+    groups: ChartGroup[];
+    total: number | null;
+    /** Single-series color override (first segment). */
+    color: string;
+    centerLabel: string;
+    emptyMessage: string;
+    private static readonly R;
+    protected render(): TemplateResult;
+}

package/dist/components/primitives/baht-empty-state.d.ts

@@ -0,0 +1,14 @@
+import { TemplateResult } from 'lit';
+import { BahtElement } from '../base.js';
+/**
+ * Centered "nothing here" placeholder for lists, tables, and searches.
+ *
+ *   <baht-empty-state message="No records to display" hint="Try clearing the filter"></baht-empty-state>
+ */
+export declare class BahtEmptyState extends BahtElement {
+    /** Decorative glyph shown above the message (emoji or short text). */
+    icon: string;
+    message: string;
+    hint: string;
+    protected render(): TemplateResult;
+}

package/dist/components/primitives/baht-error-state.d.ts

@@ -0,0 +1,20 @@
+import { TemplateResult } from 'lit';
+import { BahtElement } from '../base.js';
+/**
+ * Centered failure placeholder with an optional retry action.
+ * Emits `baht-retry` when the retry button is clicked.
+ *
+ *   <baht-error-state heading="Backend unavailable"
+ *                     message="The API is not responding."
+ *                     retry-label="Retry"></baht-error-state>
+ */
+export declare class BahtErrorState extends BahtElement {
+    /** Decorative glyph shown above the heading (emoji or short text). */
+    icon: string;
+    heading: string;
+    message: string;
+    /** Renders a retry button with this label; omit for no action. */
+    retryLabel: string;
+    private onRetry;
+    protected render(): TemplateResult;
+}

package/dist/components/primitives/baht-keyvalue-editor.d.ts

@@ -0,0 +1,27 @@
+import { TemplateResult } from 'lit';
+import { BahtElement } from '../base.js';
+/**
+ * Inline key = value row editor (field maps, config objects, …).
+ * Controlled: set `value`, listen for `baht-change` ({ value }) — rows with an
+ * empty key are kept while editing but dropped from the emitted object.
+ *
+ *   const el = document.createElement('baht-keyvalue-editor');
+ *   el.value = { state: 'resolved' };
+ *   el.addEventListener('baht-change', (e) => save(e.detail.value));
+ */
+export declare class BahtKeyvalueEditor extends BahtElement {
+    value: Record<string, unknown>;
+    keyPlaceholder: string;
+    valuePlaceholder: string;
+    addLabel: string;
+    disabled: boolean;
+    private rows;
+    /** Last value synced/emitted, serialized — hosts re-feed fresh-but-equal objects. */
+    private syncedJson;
+    protected willUpdate(changed: Map<PropertyKey, unknown>): void;
+    private toRows;
+    private commit;
+    private edit;
+    private addRow;
+    protected render(): TemplateResult;
+}

package/dist/components/primitives/baht-reference-picker.d.ts

@@ -0,0 +1,62 @@
+import { TemplateResult } from 'lit';
+import { BahtElement } from '../base.js';
+export interface ReferenceOption {
+    key: string;
+    label: string;
+    /** Secondary text shown right-aligned (e.g. the record's class/table). */
+    sub?: string;
+}
+/**
+ * Reference lookup: read-only input + magnifier opening a typeahead dropdown.
+ * The host supplies the data via `fetcher(term)`; the component owns the
+ * debounce, the dropdown, and the keyboard interaction.
+ *
+ *   const el = document.createElement('baht-reference-picker');
+ *   el.fetcher = (term) => api.search('sys_user', term);   // Promise<ReferenceOption[]>
+ *   el.value = '6816f79cc0a8016401c5a33be04be441';
+ *   el.display = 'Abel Tuter';
+ *   el.addEventListener('baht-change', (e) => onPick(e.detail)); // { value, label }
+ *
+ * Clearing emits `baht-change` with `{ value: '', label: '' }`. Set `href` to
+ * render an open-record link next to the lookup button.
+ */
+export declare class BahtReferencePicker extends BahtElement {
+    /** Accessible name for the combobox + its option list. */
+    label: string;
+    /** Selected id (the reference's key). */
+    value: string;
+    /** Human-readable label for `value`; falls back to showing the raw id. */
+    display: string;
+    placeholder: string;
+    disabled: boolean;
+    /** Marks the control invalid (styles + aria-invalid). */
+    invalid: boolean;
+    /** Optional link to the selected record, rendered as an external-link button. */
+    href: string;
+    /** Accessible name for the lookup button. */
+    lookupLabel: string;
+    /** Debounce for `fetcher` calls, ms. */
+    debounce: number;
+    /** Async search: term in, options out. Required for the dropdown to work. */
+    fetcher: ((term: string) => Promise<ReferenceOption[]>) | null;
+    private open;
+    private term;
+    private options;
+    private loading;
+    private activeIndex;
+    private inputEl;
+    private readonly listboxId;
+    private timer;
+    private fetchSeq;
+    private readonly onDocMousedown;
+    disconnectedCallback(): void;
+    private openLookup;
+    private close;
+    private search;
+    private pick;
+    private clear;
+    private emitChange;
+    private onInput;
+    private onKeydown;
+    protected render(): TemplateResult;
+}

package/dist/components/primitives/baht-stat-chart.d.ts

@@ -0,0 +1,14 @@
+import { TemplateResult } from 'lit';
+import { BahtElement } from '../base.js';
+/**
+ * Big single-number stat (report type "count").
+ *
+ *   <baht-stat-chart total="1284" label="Open incidents"></baht-stat-chart>
+ */
+export declare class BahtStatChart extends BahtElement {
+    total: number;
+    label: string;
+    /** Overrides the number color (defaults to the primary token). */
+    color: string;
+    protected render(): TemplateResult;
+}

package/dist/components/primitives/charts.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Shared chart vocabulary for the baht-*-chart primitives.
+ *
+ * Series colors come from the `--baht-chart-1 … --baht-chart-10` tokens so a
+ * consumer can retheme every chart from CSS; `color` on a chart overrides the
+ * first (or only) series.
+ */
+export interface ChartGroup {
+    label: string;
+    count: number;
+}
+/** CSS color for series `i` — `override` wins for the first series only. */
+export declare function chartColor(i: number, override?: string): string;

package/dist/components/primitives/icons.d.ts

@@ -7,7 +7,7 @@ import { TemplateResult } from 'lit';
  * Add an icon only when a component genuinely needs it; this is not a general
  * icon library.
  */
-export type IconName = 'copy' | 'check' | 'download' | 'upload' | 'plus' | 'external' | 'close' | 'play';
+export type IconName = 'copy' | 'check' | 'download' | 'upload' | 'plus' | 'external' | 'close' | 'play' | 'search';
 /** Render a named icon, or `nothing`-equivalent empty when the name is unknown. */
 export declare function renderIcon(name: IconName): TemplateResult;
 export declare function isIconName(v: string): v is IconName;

package/dist/components/primitives/index.d.ts

@@ -34,5 +34,13 @@ export { BahtToggle } from './baht-toggle.js';
 export { BahtDatepicker } from './baht-datepicker.js';
 export { BahtFile } from './baht-file.js';
 export { BahtText } from './baht-text.js';
+export { BahtStatChart } from './baht-stat-chart.js';
+export { BahtDonutChart } from './baht-donut-chart.js';
+export { BahtBarChart } from './baht-bar-chart.js';
+export { chartColor, type ChartGroup } from './charts.js';
+export { BahtEmptyState } from './baht-empty-state.js';
+export { BahtErrorState } from './baht-error-state.js';
+export { BahtKeyvalueEditor } from './baht-keyvalue-editor.js';
+export { BahtReferencePicker, type ReferenceOption } from './baht-reference-picker.js';
 /** field descriptor `type` -> primitive tag (used by <baht-form> and the builder). */
 export declare const TAG_FOR_TYPE: Record<FieldType, string>;