@hotstaq/admin-panel 0.3.18 → 0.4.1

package/assets/css/freelight-panel.css

@@ -0,0 +1,174 @@
+/* ==============================================================
+   Freelight-style admin-panel theme (admin-panel 0.4.0+).
+   Visual styling for the new card/detail-page/add-panel components.
+   ============================================================== */
+
+/* ---- shared tokens ---- */
+:root {
+    --flap-text:        #1f2937;
+    --flap-text-muted:  #6b7280;
+    --flap-border:      #e5e7eb;
+    --flap-surface:     #ffffff;
+    --flap-surface-2:   #f8fafc;
+    --flap-surface-3:   #f1f5f9;
+    --flap-hover:       #eef2ff;
+    --flap-accent:      #4f46e5;
+    --flap-accent-soft: rgba(79, 70, 229, 0.08);
+    --flap-danger:      #dc2626;
+    --flap-success:     #16a34a;
+}
+
+[data-theme="dark"] {
+    --flap-text:        #e2e8f0;
+    --flap-text-muted:  #94a3b8;
+    --flap-border:      #1e293b;
+    --flap-surface:     #0f172a;
+    --flap-surface-2:   #111827;
+    --flap-surface-3:   #1f2937;
+    --flap-hover:       #1e1b4b;
+    --flap-accent:      #6366f1;
+    --flap-accent-soft: rgba(99, 102, 241, 0.18);
+}
+
+/* ---- admin-card-table ---- */
+.fl-card-table {
+    border-color: var(--flap-border);
+}
+
+.fl-card-table .card-header {
+    background: var(--flap-surface-2);
+    border-bottom: 1px solid var(--flap-border);
+    font-weight: 600;
+    color: var(--flap-text);
+}
+
+.fl-card-list .fl-card-row {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: 0.9rem 1.1rem;
+    border-color: var(--flap-border);
+    color: var(--flap-text);
+    text-decoration: none;
+}
+
+.fl-card-list .fl-card-row-link:hover,
+.fl-card-list .fl-card-row-link:focus {
+    background: var(--flap-hover);
+    color: var(--flap-text);
+}
+
+.fl-card-list .fl-card-row-main {
+    flex: 1 1 auto;
+    min-width: 0;
+}
+
+.fl-card-list .fl-card-row-label {
+    font-weight: 600;
+    color: var(--flap-text);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.fl-card-list .fl-card-row-sub {
+    color: var(--flap-text-muted);
+    font-size: 0.85rem;
+    margin-top: 0.15rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.fl-card-list .fl-card-row-actions {
+    flex: 0 0 auto;
+    display: flex;
+    gap: 0.4rem;
+}
+
+/* Mobile: stack the action area below the label so labels keep
+   their width and buttons don't fight for room. */
+@media (max-width: 575.98px) {
+    .fl-card-list .fl-card-row {
+        flex-direction: column;
+        align-items: stretch;
+    }
+    .fl-card-list .fl-card-row-actions {
+        margin-top: 0.5rem;
+    }
+}
+
+/* ---- admin-add-panel ---- */
+.fl-add-panel-body {
+    border-top: 1px solid var(--flap-border);
+    background: var(--flap-surface-2);
+}
+
+.fl-add-panel-title {
+    color: var(--flap-text);
+    letter-spacing: 0.01em;
+}
+
+.fl-add-panel-form .form-label {
+    color: var(--flap-text);
+    margin-bottom: 0.25rem;
+}
+
+/* ---- admin-detail-page ---- */
+.fl-detail-page .card {
+    border-color: var(--flap-border);
+}
+
+.fl-detail-page .card-body {
+    background: var(--flap-surface);
+}
+
+.fl-detail-page .form-label {
+    color: var(--flap-text);
+    margin-bottom: 0.25rem;
+}
+
+.fl-detail-feedback {
+    margin-bottom: 1rem;
+}
+
+.fl-detail-feedback.d-none {
+    margin-bottom: 0;
+}
+
+/* Sticky save bar — sits at the bottom of the viewport while the user
+   edits, so Save is always reachable on long forms. */
+.fl-detail-save-bar {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 0.9rem 0;
+    background: var(--flap-surface);
+    border-top: 1px solid var(--flap-border);
+    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04);
+    z-index: 50;
+}
+
+[data-theme="dark"] .fl-detail-save-bar {
+    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.35);
+}
+
+/* ---- admin-disclaimer ---- */
+.fl-disclaimer {
+    border-color: var(--flap-border);
+}
+
+.fl-disclaimer .card-body {
+    background: var(--flap-accent-soft);
+}
+
+/* ---- admin-eyebrow-heading ---- */
+.fl-eyebrow-heading {
+    margin-top: 0.25rem;
+}
+
+.fl-eyebrow-heading h1 {
+    color: var(--flap-text);
+    letter-spacing: -0.01em;
+}

package/build/WebExport.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WebExport.d.ts","sourceRoot":"","sources":["../src/WebExport.ts"],"names":[],"mappings":"AAAA,iBAAe,WAAW,IAAK,OAAO,CAAC,GAAG,CAAC,CA2B1C;AAED,OAAO,EACN,WAAW,EACX,CAAC"}
+{"version":3,"file":"WebExport.d.ts","sourceRoot":"","sources":["../src/WebExport.ts"],"names":[],"mappings":"AAAA,iBAAe,WAAW,IAAK,OAAO,CAAC,GAAG,CAAC,CAiC1C;AAED,OAAO,EACN,WAAW,EACX,CAAC"}

package/build/WebExport.js

@@ -35,7 +35,13 @@ function buildAssets() {
                 "AdminTable",
                 "AdminTableField",
                 "AdminTableRow",
-                "AdminText"
+                "AdminText",
+                "AdminFormField",
+                "AdminAddPanel",
+                "AdminCardTable",
+                "AdminDetailPage",
+                "AdminDisclaimer",
+                "AdminEyebrowHeading"
             ]
         });
     });

package/build/WebExport.js.map

@@ -1 +1 @@
-{"version":3,"file":"WebExport.js","sourceRoot":"","sources":["../src/WebExport.ts"],"names":[],"mappings":";;;;;;;;;;;AA8BC,kCAAW;AA9BZ,SAAe,WAAW;;QAEzB,OAAO,CAAC;YACN,MAAM,EAAE,CAAC,gBAAgB;gBACxB,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,eAAe,CAAC,EAAE;gBAC5C,eAAe;gBACf,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,CAAC,kBAAkB,EAAE,mBAAmB,CAAC,EAAE;gBACvE,gBAAgB;gBAChB,oBAAoB;gBACpB,+BAA+B;gBAC/B,6BAA6B;gBAC7B,kCAAkC;gBAClC,2BAA2B,CAAC;YAC7B,IAAI,EAAE,CAAC,mBAAmB,CAAC;YAC3B,GAAG,EAAE,CAAC,kBAAkB,CAAC;YACzB,EAAE,EAAE,CAAC,iBAAiB,EAAE,qCAAqC,CAAC;YAC9D,gBAAgB,EAAE,yBAAyB;YAC3C,UAAU,EAAE;gBACX,gBAAgB;gBAChB,WAAW;gBACX,aAAa;gBACb,eAAe;gBACf,YAAY;gBACZ,iBAAiB;gBACjB,eAAe;gBACf,WAAW;aAAC;SACb,CAAC,CAAC;IACL,CAAC;CAAA"}
+{"version":3,"file":"WebExport.js","sourceRoot":"","sources":["../src/WebExport.ts"],"names":[],"mappings":";;;;;;;;;;;AAoCC,kCAAW;AApCZ,SAAe,WAAW;;QAEzB,OAAO,CAAC;YACN,MAAM,EAAE,CAAC,gBAAgB;gBACxB,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,eAAe,CAAC,EAAE;gBAC5C,eAAe;gBACf,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,CAAC,kBAAkB,EAAE,mBAAmB,CAAC,EAAE;gBACvE,gBAAgB;gBAChB,oBAAoB;gBACpB,+BAA+B;gBAC/B,6BAA6B;gBAC7B,kCAAkC;gBAClC,2BAA2B,CAAC;YAC7B,IAAI,EAAE,CAAC,mBAAmB,CAAC;YAC3B,GAAG,EAAE,CAAC,kBAAkB,CAAC;YACzB,EAAE,EAAE,CAAC,iBAAiB,EAAE,qCAAqC,CAAC;YAC9D,gBAAgB,EAAE,yBAAyB;YAC3C,UAAU,EAAE;gBACX,gBAAgB;gBAChB,WAAW;gBACX,aAAa;gBACb,eAAe;gBACf,YAAY;gBACZ,iBAAiB;gBACjB,eAAe;gBACf,WAAW;gBACX,gBAAgB;gBAChB,eAAe;gBACf,gBAAgB;gBAChB,iBAAiB;gBACjB,iBAAiB;gBACjB,qBAAqB;aAAC;SACvB,CAAC,CAAC;IACL,CAAC;CAAA"}

package/build/components/admin-add-panel.d.ts

@@ -0,0 +1,56 @@
+import { HotStaq, HotAPI, HotComponent, HotComponentOutput } from "hotstaq";
+/**
+ * Self-contained inline add form. Replaces the modal opened by
+ * <admin-edit hot-type="add"> with a Bootstrap-collapse card that
+ * lives directly on the page — header carries the "+ Add" toggle,
+ * body holds the form fields. No cross-component DOM injection.
+ *
+ * Place this above an <admin-card-table>; when the user clicks the
+ * header toggle, the form panel slides down. On Save, the paired
+ * table is asked to refresh via `attached_list`.
+ *
+ * Usage:
+ *   <admin-add-panel name="bankAccountsAdd"
+ *                    hot-title="Add a bank account"
+ *                    hot-attached_list="bankAccountsList"
+ *                    hot-add_text="+ Add bank account"
+ *                    hot-button_title="Create"
+ *                    hot-onsave="<(values) => {...}Ra>">
+ *     <admin-form-field hot-field="name" hot-label="Name" hot-required="1"
+ *                       hot-col="col-md-6"></admin-form-field>
+ *     <admin-form-field hot-field="bankSyncAPIType" hot-label="Sync type"
+ *                       hot-control="select"
+ *                       hot-options="paypal_webhooks:PayPal Webhooks"
+ *                       hot-col="col-md-6"></admin-form-field>
+ *   </admin-add-panel>
+ */
+export declare class AdminAddPanel extends HotComponent {
+    /** Title shown in the card header (next to the toggle button). */
+    title: string;
+    /** Submit button label. */
+    button_title: string;
+    /** Cancel button label. Empty hides the cancel button. */
+    cancel_text: string;
+    /** Optional id of the partner <admin-card-table>; refreshList() is called after a successful save. */
+    attached_list: string;
+    /** Text shown on the header toggle button. */
+    add_text: string;
+    /** "1" / "true" → panel starts expanded. */
+    start_open: string;
+    /** What to run when the user clicks Save. Receives a values object built from hot-field inputs. Return false to keep the panel open. */
+    onsave: (values: any) => Promise<boolean | void>;
+    protected panelId: string;
+    protected formId: string;
+    constructor(copy: HotComponent | HotStaq, api: HotAPI);
+    /**
+     * Wire submit + cancel handlers after the DOM is in place.
+     * Bootstrap's data-bs-toggle handles open/close automatically.
+     */
+    onPostPlace(parentHtmlElement: HTMLElement, htmlElement: HTMLElement): HTMLElement;
+    protected collectFieldValues(root: HTMLElement): any;
+    protected resetFields(root: HTMLElement): void;
+    protected collapsePanel(): void;
+    protected refreshAttachedList(): void;
+    output(): string | HotComponentOutput[];
+}
+//# sourceMappingURL=admin-add-panel.d.ts.map

package/build/components/admin-add-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"admin-add-panel.d.ts","sourceRoot":"","sources":["../../src/components/admin-add-panel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAO,MAAM,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAEjF;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,qBAAa,aAAc,SAAQ,YAAY;IAE9C,kEAAkE;IAClE,KAAK,EAAE,MAAM,CAAC;IACd,2BAA2B;IAC3B,YAAY,EAAE,MAAM,CAAC;IACrB,0DAA0D;IAC1D,WAAW,EAAE,MAAM,CAAC;IACpB,sGAAsG;IACtG,aAAa,EAAE,MAAM,CAAC;IACtB,8CAA8C;IAC9C,QAAQ,EAAE,MAAM,CAAC;IACjB,4CAA4C;IAC5C,UAAU,EAAE,MAAM,CAAC;IACnB,wIAAwI;IACxI,MAAM,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC;IAEjD,SAAS,CAAC,OAAO,EAAE,MAAM,CAAC;IAC1B,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC;gBAEZ,IAAI,EAAE,YAAY,GAAG,OAAO,EAAE,GAAG,EAAE,MAAM;IActD;;;OAGG;IACH,WAAW,CAAE,iBAAiB,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,GAAG,WAAW;IAsDnF,SAAS,CAAC,kBAAkB,CAAE,IAAI,EAAE,WAAW,GAAG,GAAG;IAoBrD,SAAS,CAAC,WAAW,CAAE,IAAI,EAAE,WAAW,GAAG,IAAI;IAY/C,SAAS,CAAC,aAAa,IAAK,IAAI;IAShC,SAAS,CAAC,mBAAmB,IAAK,IAAI;IAQtC,MAAM,IAAK,MAAM,GAAG,kBAAkB,EAAE;CAyCxC"}

package/build/components/admin-add-panel.js

@@ -0,0 +1,177 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AdminAddPanel = void 0;
+const hotstaq_1 = require("hotstaq");
+/**
+ * Self-contained inline add form. Replaces the modal opened by
+ * <admin-edit hot-type="add"> with a Bootstrap-collapse card that
+ * lives directly on the page — header carries the "+ Add" toggle,
+ * body holds the form fields. No cross-component DOM injection.
+ *
+ * Place this above an <admin-card-table>; when the user clicks the
+ * header toggle, the form panel slides down. On Save, the paired
+ * table is asked to refresh via `attached_list`.
+ *
+ * Usage:
+ *   <admin-add-panel name="bankAccountsAdd"
+ *                    hot-title="Add a bank account"
+ *                    hot-attached_list="bankAccountsList"
+ *                    hot-add_text="+ Add bank account"
+ *                    hot-button_title="Create"
+ *                    hot-onsave="<(values) => {...}Ra>">
+ *     <admin-form-field hot-field="name" hot-label="Name" hot-required="1"
+ *                       hot-col="col-md-6"></admin-form-field>
+ *     <admin-form-field hot-field="bankSyncAPIType" hot-label="Sync type"
+ *                       hot-control="select"
+ *                       hot-options="paypal_webhooks:PayPal Webhooks"
+ *                       hot-col="col-md-6"></admin-form-field>
+ *   </admin-add-panel>
+ */
+class AdminAddPanel extends hotstaq_1.HotComponent {
+    constructor(copy, api) {
+        super(copy, api);
+        this.tag = "admin-add-panel";
+        this.title = "";
+        this.button_title = "Save";
+        this.cancel_text = "Cancel";
+        this.attached_list = "";
+        this.add_text = "+ Add";
+        this.start_open = "0";
+        this.onsave = null;
+    }
+    /**
+     * Wire submit + cancel handlers after the DOM is in place.
+     * Bootstrap's data-bs-toggle handles open/close automatically.
+     */
+    onPostPlace(parentHtmlElement, htmlElement) {
+        const self = this;
+        const root = document.getElementById(this.name);
+        if (root == null)
+            return (null);
+        const submitBtn = root.querySelector(".fl-add-panel-submit");
+        const cancelBtn = root.querySelector(".fl-add-panel-cancel");
+        if (submitBtn != null) {
+            submitBtn.addEventListener("click", (e) => __awaiter(this, void 0, void 0, function* () {
+                e.preventDefault();
+                const values = self.collectFieldValues(root);
+                submitBtn.disabled = true;
+                try {
+                    let keepOpen = false;
+                    if (typeof self.onsave === "function")
+                        keepOpen = yield self.onsave(values);
+                    if (keepOpen === false || keepOpen == null) {
+                        self.resetFields(root);
+                        self.collapsePanel();
+                        self.refreshAttachedList();
+                    }
+                }
+                catch (ex) {
+                    console.error("admin-add-panel onsave threw:", ex);
+                }
+                finally {
+                    submitBtn.disabled = false;
+                }
+            }));
+        }
+        if (cancelBtn != null) {
+            cancelBtn.addEventListener("click", (e) => {
+                e.preventDefault();
+                self.resetFields(root);
+                self.collapsePanel();
+            });
+        }
+        return (null);
+    }
+    collectFieldValues(root) {
+        const out = {};
+        const nodes = root.querySelectorAll("[hot-field]");
+        for (let i = 0; i < nodes.length; i++) {
+            const el = nodes[i];
+            const field = el.getAttribute("hot-field");
+            if (field == null || field === "")
+                continue;
+            if (el instanceof HTMLInputElement && el.type === "checkbox")
+                out[field] = el.checked;
+            else if (el instanceof HTMLInputElement && el.type === "number")
+                out[field] = el.value === "" ? null : Number(el.value);
+            else
+                out[field] = el.value;
+        }
+        return (out);
+    }
+    resetFields(root) {
+        const nodes = root.querySelectorAll("[hot-field]");
+        for (let i = 0; i < nodes.length; i++) {
+            const el = nodes[i];
+            if (el instanceof HTMLInputElement && el.type === "checkbox")
+                el.checked = false;
+            else if (el instanceof HTMLSelectElement)
+                el.selectedIndex = 0;
+            else
+                el.value = "";
+        }
+    }
+    collapsePanel() {
+        const panel = document.getElementById(this.panelId);
+        if (panel == null)
+            return;
+        panel.classList.remove("show");
+        const triggers = document.querySelectorAll(`[data-bs-target="#${this.panelId}"]`);
+        triggers.forEach(t => t.setAttribute("aria-expanded", "false"));
+    }
+    refreshAttachedList() {
+        if (this.attached_list === "")
+            return;
+        const list = document.getElementById(this.attached_list);
+        if (list != null && typeof list.refreshList === "function")
+            list.refreshList();
+    }
+    output() {
+        if (this.name === "")
+            throw new Error("admin-add-panel: name is required");
+        this.panelId = `${this.name}Panel`;
+        this.formId = `${this.name}Form`;
+        const showClass = (this.start_open === "1" || this.start_open === "true") ? " show" : "";
+        const ariaExp = showClass ? "true" : "false";
+        const titleHtml = this.title ? `<strong class="fl-add-panel-title">${this.title}</strong>` : `<span></span>`;
+        const cancelHtml = this.cancel_text
+            ? `<button type="button" class="btn btn-sm btn-link text-muted fl-add-panel-cancel">${this.cancel_text}</button>`
+            : "";
+        // Single self-contained card. Header has the toggle, body is the
+        // collapse panel containing the form. Bootstrap's data-bs-toggle
+        // drives the open/close — no JS wiring needed for that.
+        return (`
+			<div id="${this.name}" class="card fl-add-panel mb-3">
+				<div class="card-header d-flex justify-content-between align-items-center">
+					${titleHtml}
+					<button type="button" class="btn btn-sm btn-primary fl-add-panel-toggle"
+						data-bs-toggle="collapse" data-bs-target="#${this.panelId}"
+						aria-expanded="${ariaExp}" aria-controls="${this.panelId}">${this.add_text}</button>
+				</div>
+				<div id="${this.panelId}" class="collapse fl-add-panel-body${showClass}">
+					<div class="card-body border-top">
+						<form id="${this.formId}" class="fl-add-panel-form">
+							<div class="row g-2 align-items-end">
+								<hot-place-here name="panelBody"></hot-place-here>
+							</div>
+							<div class="d-flex justify-content-end gap-2 mt-3">
+								${cancelHtml}
+								<button type="submit" class="btn btn-sm btn-success fl-add-panel-submit">${this.button_title}</button>
+							</div>
+						</form>
+					</div>
+				</div>
+			</div>`);
+    }
+}
+exports.AdminAddPanel = AdminAddPanel;
+//# sourceMappingURL=admin-add-panel.js.map

package/build/components/admin-add-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"admin-add-panel.js","sourceRoot":"","sources":["../../src/components/admin-add-panel.ts"],"names":[],"mappings":"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"}

package/build/components/admin-card-table.d.ts

@@ -0,0 +1,55 @@
+import { HotStaq, HotAPI, HotComponent, HotComponentOutput } from "hotstaq";
+/**
+ * Freelight-style card list. Renders campaign / project / member rows
+ * as cards on every viewport, with optional inline action buttons and
+ * a sub-line below the primary label.
+ *
+ * Replaces the click-row-opens-modal flow of <admin-table> + <admin-edit>:
+ * when `hot-detail-route` is set, the whole row becomes a link to the
+ * configured detail URL (e.g. "/budget/:id"). When `hot-detail-route` is
+ * empty, the row renders without navigation — the caller is expected to
+ * provide their own inline action buttons via `hot-row-actions`.
+ *
+ * Usage:
+ *   <admin-card-table id="bankAccountsList" hot-list-url="/v1/bank_accounts/list"
+ *                     hot-detail-route="/bankAccount/:id"
+ *                     hot-primary-field="name" hot-subline-field="bankSyncAPIType"
+ *                     hot-empty-text="No bank accounts yet.">
+ *   </admin-card-table>
+ *
+ * The component exposes a `.refreshList()` method on the rendered DOM
+ * element so callers (the paired admin-add-panel, an edit-save callback,
+ * etc.) can re-fetch without a page reload.
+ */
+export declare class AdminCardTable extends HotComponent {
+    /** Optional title shown in the card header. */
+    title: string;
+    /** Endpoint that returns { length, data: [...] } — usually the entity's list route. */
+    list_url: string;
+    /** JWT token to send as Authorization bearer. Empty for public endpoints. */
+    jwt: string;
+    /** Body params to POST with the list call (JSON). */
+    list_params: string;
+    /** Field name on each row used as the primary card label (default "name"). */
+    primary_field: string;
+    /** Optional second-line field rendered in muted text under the primary label. */
+    subline_field: string;
+    /** Pattern for the row's click target. ":id" interpolates row.id. Empty disables row navigation. */
+    detail_route: string;
+    /** Text shown when the list is empty. */
+    empty_text: string;
+    /** Text shown while the list is loading. */
+    loading_text: string;
+    /** Inner HTML template for the right-side action area, with ":id" placeholder. */
+    row_actions: string;
+    /** Slot name where the partner admin-add-panel injects its toggle button. */
+    add_slot: string;
+    constructor(copy: HotComponent | HotStaq, api: HotAPI);
+    onPostPlace(parentHtmlElement: HTMLElement, htmlElement: HTMLElement): HTMLElement;
+    protected fetchAndRender(): Promise<void>;
+    protected escapeHtml(s: any): string;
+    protected interpolate(template: string, row: any): string;
+    protected renderRow(row: any): string;
+    output(): string | HotComponentOutput[];
+}
+//# sourceMappingURL=admin-card-table.d.ts.map

package/build/components/admin-card-table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"admin-card-table.d.ts","sourceRoot":"","sources":["../../src/components/admin-card-table.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAO,MAAM,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAEjF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBAAa,cAAe,SAAQ,YAAY;IAE/C,+CAA+C;IAC/C,KAAK,EAAE,MAAM,CAAC;IACd,uFAAuF;IACvF,QAAQ,EAAE,MAAM,CAAC;IACjB,6EAA6E;IAC7E,GAAG,EAAE,MAAM,CAAC;IACZ,qDAAqD;IACrD,WAAW,EAAE,MAAM,CAAC;IACpB,8EAA8E;IAC9E,aAAa,EAAE,MAAM,CAAC;IACtB,iFAAiF;IACjF,aAAa,EAAE,MAAM,CAAC;IACtB,oGAAoG;IACpG,YAAY,EAAE,MAAM,CAAC;IACrB,yCAAyC;IACzC,UAAU,EAAE,MAAM,CAAC;IACnB,4CAA4C;IAC5C,YAAY,EAAE,MAAM,CAAC;IACrB,kFAAkF;IAClF,WAAW,EAAE,MAAM,CAAC;IACpB,6EAA6E;IAC7E,QAAQ,EAAE,MAAM,CAAC;gBAEJ,IAAI,EAAE,YAAY,GAAG,OAAO,EAAE,GAAG,EAAE,MAAM;IAkBtD,WAAW,CAAE,iBAAiB,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,GAAG,WAAW;cAkBnE,cAAc,IAAK,OAAO,CAAC,IAAI,CAAC;IAyChD,SAAS,CAAC,UAAU,CAAE,CAAC,EAAE,GAAG,GAAG,MAAM;IAOrC,SAAS,CAAC,WAAW,CAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,GAAG,MAAM;IAM1D,SAAS,CAAC,SAAS,CAAE,GAAG,EAAE,GAAG,GAAG,MAAM;IAsBtC,MAAM,IAAK,MAAM,GAAG,kBAAkB,EAAE;CAqBxC"}

package/build/components/admin-card-table.js

@@ -0,0 +1,149 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AdminCardTable = void 0;
+const hotstaq_1 = require("hotstaq");
+/**
+ * Freelight-style card list. Renders campaign / project / member rows
+ * as cards on every viewport, with optional inline action buttons and
+ * a sub-line below the primary label.
+ *
+ * Replaces the click-row-opens-modal flow of <admin-table> + <admin-edit>:
+ * when `hot-detail-route` is set, the whole row becomes a link to the
+ * configured detail URL (e.g. "/budget/:id"). When `hot-detail-route` is
+ * empty, the row renders without navigation — the caller is expected to
+ * provide their own inline action buttons via `hot-row-actions`.
+ *
+ * Usage:
+ *   <admin-card-table id="bankAccountsList" hot-list-url="/v1/bank_accounts/list"
+ *                     hot-detail-route="/bankAccount/:id"
+ *                     hot-primary-field="name" hot-subline-field="bankSyncAPIType"
+ *                     hot-empty-text="No bank accounts yet.">
+ *   </admin-card-table>
+ *
+ * The component exposes a `.refreshList()` method on the rendered DOM
+ * element so callers (the paired admin-add-panel, an edit-save callback,
+ * etc.) can re-fetch without a page reload.
+ */
+class AdminCardTable extends hotstaq_1.HotComponent {
+    constructor(copy, api) {
+        super(copy, api);
+        this.tag = "admin-card-table";
+        this.title = "";
+        this.list_url = "";
+        this.jwt = "";
+        this.list_params = "{}";
+        this.primary_field = "name";
+        this.subline_field = "";
+        this.detail_route = "";
+        this.empty_text = "No items yet.";
+        this.loading_text = "Loading…";
+        this.row_actions = "";
+        this.add_slot = "";
+    }
+    onPostPlace(parentHtmlElement, htmlElement) {
+        const self = this;
+        const container = document.getElementById(this.name);
+        if (container == null)
+            return (null);
+        // Expose a refreshList() method on the rendered element so the
+        // partner add-panel (and any other caller) can re-fetch when a
+        // row changes.
+        container.refreshList = function () { return self.fetchAndRender(); };
+        // Initial load.
+        self.fetchAndRender();
+        return (null);
+    }
+    fetchAndRender() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const container = document.getElementById(this.name);
+            const list = container ? container.querySelector(".fl-card-list") : null;
+            if (list == null)
+                return;
+            try {
+                let payload = {};
+                try {
+                    payload = JSON.parse(this.list_params || "{}");
+                }
+                catch (e) {
+                    payload = {};
+                }
+                const headers = { "Content-Type": "application/json" };
+                if (this.jwt)
+                    headers["Authorization"] = "Bearer " + this.jwt;
+                const res = yield fetch(this.list_url, {
+                    method: "POST", headers: headers, body: JSON.stringify(payload)
+                });
+                if (!res.ok) {
+                    list.innerHTML = `<div class="text-danger small p-3">Could not load: HTTP ${res.status}</div>`;
+                    return;
+                }
+                const result = yield res.json();
+                const rows = (result && Array.isArray(result.data)) ? result.data : (Array.isArray(result) ? result : []);
+                if (rows.length === 0) {
+                    list.innerHTML = `<div class="text-muted small text-center py-4">${this.empty_text}</div>`;
+                    return;
+                }
+                list.innerHTML = rows.map((row) => this.renderRow(row)).join("");
+            }
+            catch (ex) {
+                list.innerHTML = `<div class="text-danger small p-3">Could not load: ${ex.message}</div>`;
+            }
+        });
+    }
+    escapeHtml(s) {
+        return String(s == null ? "" : s)
+            .replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;")
+            .replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+    }
+    interpolate(template, row) {
+        if (!template)
+            return "";
+        return template.replace(/:(\w+)/g, (_m, key) => this.escapeHtml(row[key] || ""));
+    }
+    renderRow(row) {
+        const primaryRaw = row[this.primary_field];
+        const primary = this.escapeHtml(primaryRaw != null && primaryRaw !== "" ? primaryRaw : (row.id || ""));
+        const sublineRaw = this.subline_field ? row[this.subline_field] : "";
+        const subline = sublineRaw ? `<div class="fl-card-row-sub text-muted small">${this.escapeHtml(sublineRaw)}</div>` : "";
+        const inner = `
+			<div class="fl-card-row-main">
+				<div class="fl-card-row-label">${primary}</div>
+				${subline}
+			</div>
+			<div class="fl-card-row-actions">${this.interpolate(this.row_actions, row)}</div>`;
+        if (this.detail_route) {
+            const href = this.interpolate(this.detail_route, row);
+            return `<a href="${href}" class="fl-card-row fl-card-row-link list-group-item list-group-item-action">${inner}</a>`;
+        }
+        return `<div class="fl-card-row list-group-item">${inner}</div>`;
+    }
+    output() {
+        if (this.name === "")
+            throw new Error("admin-card-table: id (name) is required");
+        if (this.list_url === "")
+            throw new Error("admin-card-table: hot-list-url is required");
+        const titleHtml = this.title ? `<strong>${this.title}</strong>` : "";
+        const addSlotAttr = this.add_slot ? ` data-card-table-add-slot="${this.add_slot}"` : ` data-card-table-add-slot="${this.name}"`;
+        return (`
+			<div id="${this.name}" class="card fl-card-table mb-4">
+				<div class="card-header d-flex justify-content-between align-items-center">
+					${titleHtml}
+					<div class="fl-card-table-actions"${addSlotAttr}></div>
+				</div>
+				<div class="fl-card-list list-group list-group-flush">
+					<div class="text-muted small text-center py-4">${this.loading_text}</div>
+				</div>
+			</div>`);
+    }
+}
+exports.AdminCardTable = AdminCardTable;
+//# sourceMappingURL=admin-card-table.js.map