@pb33f/cowboy-components 0.12.5 → 0.13.1

package/dist/{chunk-QZHKN3VN-D09ygwuH.js → chunk-QZHKN3VN-LZahlHwm.js}

@@ -1,4 +1,4 @@
-import { _ as s } from "./cowboy-components-D1iW4457.js";
+import { _ as s } from "./cowboy-components-_6157Gms.js";
 var t, e = (t = class {
   /**
    * @param init - Function that creates the default state.

package/dist/chunk-QZHKN3VN-v9FRBMwC.cjs

@@ -0,0 +1 @@
+"use strict";const i=require("./cowboy-components-DlcOqYuh.cjs");var t,s=(t=class{constructor(e){this.init=e,this.records=this.init()}reset(){this.records=this.init()}},i.__name(t,"ImperativeState"),t);exports.ImperativeState=s;

package/dist/chunk-YZCP3GAM-BfcbLjwl.js

@@ -0,0 +1,68 @@
+import { _ as i, d as l, U as d, j as o } from "./cowboy-components-_6157Gms.js";
+var x = /* @__PURE__ */ i((r, t) => {
+  const e = r.append("rect");
+  if (e.attr("x", t.x), e.attr("y", t.y), e.attr("fill", t.fill), e.attr("stroke", t.stroke), e.attr("width", t.width), e.attr("height", t.height), t.name && e.attr("name", t.name), t.rx && e.attr("rx", t.rx), t.ry && e.attr("ry", t.ry), t.attrs !== void 0)
+    for (const s in t.attrs)
+      e.attr(s, t.attrs[s]);
+  return t.class && e.attr("class", t.class), e;
+}, "drawRect"), p = /* @__PURE__ */ i((r, t) => {
+  const e = {
+    x: t.startx,
+    y: t.starty,
+    width: t.stopx - t.startx,
+    height: t.stopy - t.starty,
+    fill: t.fill,
+    stroke: t.stroke,
+    class: "rect"
+  };
+  x(r, e).lower();
+}, "drawBackgroundRect"), y = /* @__PURE__ */ i((r, t) => {
+  const e = t.text.replace(d, " "), s = r.append("text");
+  s.attr("x", t.x), s.attr("y", t.y), s.attr("class", "legend"), s.style("text-anchor", t.anchor), t.class && s.attr("class", t.class);
+  const a = s.append("tspan");
+  return a.attr("x", t.x + t.textMargin * 2), a.text(e), s;
+}, "drawText"), m = /* @__PURE__ */ i((r, t, e, s) => {
+  const a = r.append("image");
+  a.attr("x", t), a.attr("y", e);
+  const n = o.sanitizeUrl(s);
+  a.attr("xlink:href", n);
+}, "drawImage"), g = /* @__PURE__ */ i((r, t, e, s) => {
+  const a = r.append("use");
+  a.attr("x", t), a.attr("y", e);
+  const n = o.sanitizeUrl(s);
+  a.attr("xlink:href", `#${n}`);
+}, "drawEmbeddedImage"), h = /* @__PURE__ */ i(() => ({
+  x: 0,
+  y: 0,
+  width: 100,
+  height: 100,
+  fill: "#EDF2AE",
+  stroke: "#666",
+  anchor: "start",
+  rx: 0,
+  ry: 0
+}), "getNoteRect"), f = /* @__PURE__ */ i(() => ({
+  x: 0,
+  y: 0,
+  width: 100,
+  height: 100,
+  "text-anchor": "start",
+  style: "#666",
+  textMargin: 0,
+  rx: 0,
+  ry: 0,
+  tspan: !0
+}), "getTextObj"), w = /* @__PURE__ */ i(() => {
+  let r = l(".mermaidTooltip");
+  return r.empty() && (r = l("body").append("div").attr("class", "mermaidTooltip").style("opacity", 0).style("position", "absolute").style("text-align", "center").style("max-width", "200px").style("padding", "2px").style("font-size", "12px").style("background", "#ffffde").style("border", "1px solid #333").style("border-radius", "2px").style("pointer-events", "none").style("z-index", "100")), r;
+}, "createTooltip");
+export {
+  p as a,
+  f as b,
+  w as c,
+  x as d,
+  g as e,
+  m as f,
+  h as g,
+  y as h
+};

package/dist/chunk-YZCP3GAM-DJNk9cax.cjs

@@ -0,0 +1 @@
+"use strict";const s=require("./cowboy-components-DlcOqYuh.cjs");var l=s.__name((r,t)=>{const e=r.append("rect");if(e.attr("x",t.x),e.attr("y",t.y),e.attr("fill",t.fill),e.attr("stroke",t.stroke),e.attr("width",t.width),e.attr("height",t.height),t.name&&e.attr("name",t.name),t.rx&&e.attr("rx",t.rx),t.ry&&e.attr("ry",t.ry),t.attrs!==void 0)for(const a in t.attrs)e.attr(a,t.attrs[a]);return t.class&&e.attr("class",t.class),e},"drawRect"),o=s.__name((r,t)=>{const e={x:t.startx,y:t.starty,width:t.stopx-t.startx,height:t.stopy-t.starty,fill:t.fill,stroke:t.stroke,class:"rect"};l(r,e).lower()},"drawBackgroundRect"),d=s.__name((r,t)=>{const e=t.text.replace(s.lineBreakRegex," "),a=r.append("text");a.attr("x",t.x),a.attr("y",t.y),a.attr("class","legend"),a.style("text-anchor",t.anchor),t.class&&a.attr("class",t.class);const n=a.append("tspan");return n.attr("x",t.x+t.textMargin*2),n.text(e),a},"drawText"),c=s.__name((r,t,e,a)=>{const n=r.append("image");n.attr("x",t),n.attr("y",e);const i=s.distExports.sanitizeUrl(a);n.attr("xlink:href",i)},"drawImage"),x=s.__name((r,t,e,a)=>{const n=r.append("use");n.attr("x",t),n.attr("y",e);const i=s.distExports.sanitizeUrl(a);n.attr("xlink:href",`#${i}`)},"drawEmbeddedImage"),m=s.__name(()=>({x:0,y:0,width:100,height:100,fill:"#EDF2AE",stroke:"#666",anchor:"start",rx:0,ry:0}),"getNoteRect"),p=s.__name(()=>({x:0,y:0,width:100,height:100,"text-anchor":"start",style:"#666",textMargin:0,rx:0,ry:0,tspan:!0}),"getTextObj"),y=s.__name(()=>{let r=s.select(".mermaidTooltip");return r.empty()&&(r=s.select("body").append("div").attr("class","mermaidTooltip").style("opacity",0).style("position","absolute").style("text-align","center").style("max-width","200px").style("padding","2px").style("font-size","12px").style("background","#ffffde").style("border","1px solid #333").style("border-radius","2px").style("pointer-events","none").style("z-index","100")),r},"createTooltip");exports.createTooltip=y;exports.drawBackgroundRect=o;exports.drawEmbeddedImage=x;exports.drawImage=c;exports.drawRect=l;exports.drawText=d;exports.getNoteRect=m;exports.getTextObj=p;

package/dist/{classDiagram-v2-WZHVMYZB-nF0KPMaG.js → classDiagram-6PBFFD2Q-BHEetvl6.js}

@@ -1,5 +1,5 @@
-import { s as r, c as s, a as e, C as t } from "./chunk-B4BG7PRW-REIyHYU-.js";
-import { _ as l } from "./cowboy-components-D1iW4457.js";
+import { s as r, c as s, a as e, C as t } from "./chunk-4TB4RGXK-C5Pdp8au.js";
+import { _ as l } from "./cowboy-components-_6157Gms.js";
 var d = {
   parser: e,
   get db() {

package/dist/classDiagram-6PBFFD2Q-DnanA8bA.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./chunk-4TB4RGXK-BbYCdNI3.cjs"),a=require("./cowboy-components-DlcOqYuh.cjs");var s={parser:r.classDiagram_default,get db(){return new r.ClassDB},renderer:r.classRenderer_v3_unified_default,styles:r.styles_default,init:a.__name(e=>{e.class||(e.class={}),e.class.arrowMarkerAbsolute=e.arrowMarkerAbsolute},"init")};exports.diagram=s;

package/dist/{classDiagram-2ON5EDUG-nF0KPMaG.js → classDiagram-v2-HSJHXN6E-BHEetvl6.js}

@@ -1,5 +1,5 @@
-import { s as r, c as s, a as e, C as t } from "./chunk-B4BG7PRW-REIyHYU-.js";
-import { _ as l } from "./cowboy-components-D1iW4457.js";
+import { s as r, c as s, a as e, C as t } from "./chunk-4TB4RGXK-C5Pdp8au.js";
+import { _ as l } from "./cowboy-components-_6157Gms.js";
 var d = {
   parser: e,
   get db() {

package/dist/classDiagram-v2-HSJHXN6E-DnanA8bA.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./chunk-4TB4RGXK-BbYCdNI3.cjs"),a=require("./cowboy-components-DlcOqYuh.cjs");var s={parser:r.classDiagram_default,get db(){return new r.ClassDB},renderer:r.classRenderer_v3_unified_default,styles:r.styles_default,init:a.__name(e=>{e.class||(e.class={}),e.class.arrowMarkerAbsolute=e.arrowMarkerAbsolute},"init")};exports.diagram=s;

package/dist/clone-Bqh1gJUP.cjs

@@ -0,0 +1 @@
+"use strict";const n=require("./graph-CitLzybf.cjs");var r=4;function c(e){return n.baseClone(e,r)}exports.clone=c;

package/dist/{clone-Cv1NeF92.js → clone-C3LRmiE8.js}

@@ -1,4 +1,4 @@
-import { b as r } from "./_baseUniq-BLhpRkwn.js";
+import { b as r } from "./graph-n3mQ-eMa.js";
 var e = 4;
 function a(o) {
   return r(o, e);

package/dist/components/api-keys/api-key-audit-log.css.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/dist/components/api-keys/api-key-audit-log.css.js

@@ -0,0 +1,97 @@
+import { css } from "lit";
+export default css `
+    :host {
+        display: block;
+    }
+
+    .audit-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 8px;
+        gap: 12px;
+    }
+
+    .audit-title {
+        font-size: 0.85rem;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        font-family: var(--font-stack-bold), sans-serif;
+        white-space: nowrap;
+    }
+
+    sl-select {
+        min-width: 180px;
+        max-width: 250px;
+    }
+
+    sl-select::part(combobox) {
+        font-size: 0.75rem;
+        min-height: 28px;
+    }
+
+    .audit-grid {
+        display: grid;
+        grid-template-columns: 100px 52px 1fr 36px 45px;
+        align-content: start;
+    }
+
+    .grid-header {
+        font-size: 0.7rem;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        color: var(--font-color-sub2);
+        padding: 4px 4px 8px 4px;
+        border-bottom: 1px solid var(--secondary-color-dimmer);
+    }
+
+    .grid-cell {
+        padding: 4px;
+        font-size: 0.75rem;
+        border-bottom: 1px dotted var(--secondary-color-dimmer);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .path-cell {
+        font-family: monospace;
+        font-size: 0.7rem;
+    }
+
+    .center {
+        text-align: center;
+    }
+
+    .right {
+        text-align: right;
+    }
+
+    .status-2xx {
+        color: var(--terminal-text);
+    }
+
+    .status-4xx {
+        color: var(--secondary-color);
+    }
+
+    .status-5xx {
+        color: var(--error-color);
+    }
+
+    .pagination {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-top: 8px;
+        font-size: 0.75rem;
+    }
+
+    .pagination sl-button::part(base) {
+        font-size: 0.75rem;
+    }
+
+    .empty-state, .error-state, .loading-state {
+        padding: 10px 0;
+    }
+`;

package/dist/components/api-keys/api-key-audit-log.d.ts

@@ -0,0 +1,24 @@
+import { LitElement, TemplateResult } from "lit";
+import { ApiKey, ApiAuditLogEntry, ApiAuditLogResponse } from "../../model/api-key.js";
+import '../http-method/http-method.js';
+export declare class ApiKeyAuditLog extends LitElement {
+    static styles: import("lit").CSSResult[];
+    filterKeyId: string | null;
+    filterKeyName: string | null;
+    keys: ApiKey[];
+    entries: ApiAuditLogEntry[];
+    total: number;
+    offset: number;
+    limit: number;
+    loading: boolean;
+    error: string | null;
+    setAuditLog(log: ApiAuditLogResponse): void;
+    private handleKeyFilter;
+    private handlePrev;
+    private handleNext;
+    private getStatusClass;
+    private renderKeyFilter;
+    private renderGridHeaders;
+    private renderEntry;
+    render(): TemplateResult<1>;
+}

package/dist/components/api-keys/api-key-audit-log.js

@@ -0,0 +1,175 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { ViewApiKeyAuditLog } from "../../events/doctor.js";
+import { AttentionType } from "../attention-box/attention-box.js";
+import auditLogCss from "./api-key-audit-log.css.js";
+import badgesCss from "../../css/badges.css.js";
+import formsCss from "../../css/forms.css.js";
+import '../http-method/http-method.js';
+let ApiKeyAuditLog = class ApiKeyAuditLog extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.filterKeyId = null;
+        this.filterKeyName = null;
+        this.keys = [];
+        this.entries = [];
+        this.total = 0;
+        this.offset = 0;
+        this.limit = 25;
+        this.loading = false;
+        this.error = null;
+    }
+    setAuditLog(log) {
+        this.entries = log.entries || [];
+        this.total = log.total;
+        this.offset = log.offset;
+        this.limit = log.limit;
+    }
+    handleKeyFilter(e) {
+        const select = e.target;
+        const keyId = select.value || null;
+        this.dispatchEvent(new CustomEvent(ViewApiKeyAuditLog, {
+            bubbles: true,
+            composed: true,
+            detail: keyId
+        }));
+    }
+    handlePrev() {
+        this.dispatchEvent(new CustomEvent('audit-prev', {
+            bubbles: true,
+            composed: true
+        }));
+    }
+    handleNext() {
+        this.dispatchEvent(new CustomEvent('audit-next', {
+            bubbles: true,
+            composed: true
+        }));
+    }
+    getStatusClass(status) {
+        if (status >= 500)
+            return 'status-5xx';
+        if (status >= 400)
+            return 'status-4xx';
+        return 'status-2xx';
+    }
+    renderKeyFilter() {
+        if (!this.keys || this.keys.length === 0)
+            return html ``;
+        return html `
+            <sl-select size="small" placeholder="All keys" clearable
+                       value="${this.filterKeyId || ''}"
+                       @sl-change="${this.handleKeyFilter}">
+                ${this.keys.map(k => html `
+                    <sl-option value="${k.keyId}">${k.name} (${k.keyPrefix})</sl-option>
+                `)}
+            </sl-select>
+        `;
+    }
+    renderGridHeaders() {
+        return html `
+            <div class="grid-header">Time</div>
+            <div class="grid-header">Method</div>
+            <div class="grid-header">Path</div>
+            <div class="grid-header center">Code</div>
+            <div class="grid-header right">Time</div>
+        `;
+    }
+    renderEntry(entry) {
+        return html `
+            <div class="grid-cell">
+                <sl-relative-time date="${entry.createdAt}"></sl-relative-time>
+            </div>
+            <div class="grid-cell">
+                <pb33f-http-method method="${entry.method}" micro></pb33f-http-method>
+            </div>
+            <div class="grid-cell path-cell" title="${entry.path}">
+                ${entry.path}
+            </div>
+            <div class="grid-cell center ${this.getStatusClass(entry.statusCode)}">
+                ${entry.statusCode}
+            </div>
+            <div class="grid-cell right">
+                ${entry.durationMs}ms
+            </div>
+        `;
+    }
+    render() {
+        return html `
+            <div class="audit-header">
+                <span class="audit-title">Audit Log</span>
+                ${this.renderKeyFilter()}
+            </div>
+
+            ${this.loading ? html `
+                <div class="loading-state">
+                    <pb33f-indeterminate-loader></pb33f-indeterminate-loader>
+                </div>
+            ` : this.error ? html `
+                <div class="error-state">
+                    <pb33f-attention-box type="${AttentionType.Error}">
+                        ${this.error}
+                    </pb33f-attention-box>
+                </div>
+            ` : this.entries.length === 0 ? html `
+                <div class="empty-state">
+                    <pb33f-attention-box type="${AttentionType.Info}">
+                        No audit log entries found
+                    </pb33f-attention-box>
+                </div>
+            ` : html `
+                <div class="audit-grid">
+                    ${this.renderGridHeaders()}
+                    ${this.entries.map(e => this.renderEntry(e))}
+                </div>
+                ${this.total > this.limit ? html `
+                    <div class="pagination">
+                        <sl-button size="small" ?disabled="${this.offset === 0}"
+                                   @click="${this.handlePrev}">Prev</sl-button>
+                        <span>${this.offset + 1}&ndash;${Math.min(this.offset + this.limit, this.total)} of ${this.total}</span>
+                        <sl-button size="small" ?disabled="${this.offset + this.limit >= this.total}"
+                                   @click="${this.handleNext}">Next</sl-button>
+                    </div>
+                ` : ''}
+            `}
+        `;
+    }
+};
+ApiKeyAuditLog.styles = [auditLogCss, badgesCss, formsCss];
+__decorate([
+    property({ type: String })
+], ApiKeyAuditLog.prototype, "filterKeyId", void 0);
+__decorate([
+    property({ type: String })
+], ApiKeyAuditLog.prototype, "filterKeyName", void 0);
+__decorate([
+    property({ type: Array })
+], ApiKeyAuditLog.prototype, "keys", void 0);
+__decorate([
+    state()
+], ApiKeyAuditLog.prototype, "entries", void 0);
+__decorate([
+    state()
+], ApiKeyAuditLog.prototype, "total", void 0);
+__decorate([
+    state()
+], ApiKeyAuditLog.prototype, "offset", void 0);
+__decorate([
+    state()
+], ApiKeyAuditLog.prototype, "limit", void 0);
+__decorate([
+    state()
+], ApiKeyAuditLog.prototype, "loading", void 0);
+__decorate([
+    state()
+], ApiKeyAuditLog.prototype, "error", void 0);
+ApiKeyAuditLog = __decorate([
+    customElement("pb33f-api-key-audit-log")
+], ApiKeyAuditLog);
+export { ApiKeyAuditLog };

package/dist/components/api-keys/api-key-form.d.ts

@@ -0,0 +1,20 @@
+import { SlDialog } from "@shoelace-style/shoelace";
+import { Formable } from "../../model/formable.js";
+import { ApiKeyCreateResponse } from "../../model/api-key.js";
+import { PlatformError } from "../../model/errors.js";
+export declare class ApiKeyForm extends Formable {
+    static styles: import("lit").CSSResult[];
+    apiKeyDialog: SlDialog;
+    open: boolean;
+    revealMode: boolean;
+    createdKey: ApiKeyCreateResponse | null;
+    private static readonly DEFAULT_MODEL;
+    constructor();
+    private handleSubmit;
+    handleCreateSuccess(response: ApiKeyCreateResponse): void;
+    handleError(err: PlatformError): void;
+    close(): void;
+    private handleDone;
+    private renderKeyReveal;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/components/api-keys/api-key-form.js

@@ -0,0 +1,208 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var ApiKeyForm_1;
+import { html } from "lit";
+import { customElement, state, query } from "lit/decorators.js";
+import { Formable } from "../../model/formable.js";
+import { RenderType } from "../../model/form-types.js";
+import { FormSubmitComplete, CreateApiKey } from "../../events/doctor.js";
+import { AttentionType } from "../attention-box/attention-box.js";
+import { css } from "lit";
+import dialogCss from "../../css/dialog.css.js";
+const apiKeyFormCss = css `
+    sl-dialog {
+        --width: 420px;
+    }
+`;
+let ApiKeyForm = ApiKeyForm_1 = class ApiKeyForm extends Formable {
+    constructor() {
+        super();
+        this.open = false;
+        this.revealMode = false;
+        this.createdKey = null;
+        this.autoFocus = true;
+        this.model = { ...ApiKeyForm_1.DEFAULT_MODEL };
+        this.setHints([
+            {
+                key: 'name',
+                renderType: RenderType.Text,
+                placeholder: 'my-api-key',
+                helpText: 'A descriptive name for this API key',
+                required: true
+            },
+            {
+                key: 'role',
+                renderType: RenderType.Select,
+                helpText: 'read = read-only, read_write = full access'
+            },
+            {
+                key: 'expiresInDays',
+                renderType: RenderType.Select,
+                helpText: 'How long until this key expires',
+                labels: {
+                    '0': 'Never',
+                    '30': '30 days',
+                    '90': '90 days',
+                    '180': '180 days',
+                    '365': '1 year',
+                    '1095': '3 years'
+                }
+            }
+        ]);
+        this.onFormSubmit = this.handleSubmit.bind(this);
+    }
+    async handleSubmit() {
+        const formData = this.renderForm();
+        this.clearErrors();
+        this.clearTopError();
+        if (!formData.name || formData.name.trim() === '') {
+            this.renderErrors([{
+                    key: 'name',
+                    message: 'A name is required'
+                }]);
+            return;
+        }
+        const days = parseInt(formData.expiresInDays || '0', 10);
+        const request = {
+            name: formData.name.trim(),
+            role: formData.role || 'read'
+        };
+        if (days > 0) {
+            request.expiresInDays = days;
+        }
+        this.setLoading('Creating API key...');
+        this.dispatchEvent(new CustomEvent(CreateApiKey, {
+            bubbles: true,
+            composed: true,
+            detail: request
+        }));
+    }
+    handleCreateSuccess(response) {
+        this.notLoading();
+        this.createdKey = response;
+        this.revealMode = true;
+    }
+    handleError(err) {
+        this.notLoading();
+        if (err.status === 400) {
+            this.setTopError({
+                key: 'server',
+                message: err.detail,
+            });
+        }
+        else if (err.status === 402) {
+            this.setTopError({
+                key: 'server',
+                message: "You don't have enough credit to create an API key.",
+            });
+        }
+        else if (err.status === 403) {
+            this.setTopError({
+                key: 'server',
+                message: err.detail,
+            });
+            this.renderErrors([{
+                    key: 'name',
+                    message: 'Maximum API key limit reached.'
+                }]);
+        }
+        else {
+            this.setTopError({
+                key: 'server',
+                message: err.detail || 'An unexpected error occurred',
+            });
+        }
+    }
+    close() {
+        const hadKey = this.revealMode;
+        this.revealMode = false;
+        this.createdKey = null;
+        this.wipeModel({ ...ApiKeyForm_1.DEFAULT_MODEL });
+        this.open = false;
+        if (hadKey) {
+            this.dispatchEvent(new CustomEvent(FormSubmitComplete, {
+                bubbles: true,
+                composed: true
+            }));
+        }
+    }
+    handleDone() {
+        this.close();
+    }
+    renderKeyReveal() {
+        if (!this.createdKey)
+            return html ``;
+        return html `
+            <pb33f-attention-box type="${AttentionType.Warning}" aria-live="assertive">
+                Copy this key now. It will not be shown again.
+            </pb33f-attention-box>
+
+            <div style="margin: 15px 0; padding: 10px; border: 1px dashed var(--secondary-color); background: var(--background-color);">
+                <div style="display: flex; align-items: center; gap: 8px;">
+                    <code style="font-family: monospace; font-size: 0.85rem; word-break: break-all; flex: 1;">
+                        ${this.createdKey.key}
+                    </code>
+                    <sl-copy-button value="${this.createdKey.key}"></sl-copy-button>
+                </div>
+            </div>
+
+            <div style="font-size: 0.8rem; color: var(--font-color-sub2); margin-bottom: 10px;">
+                <div><strong>Name:</strong> ${this.createdKey.name}</div>
+                <div><strong>Prefix:</strong> ${this.createdKey.keyPrefix}</div>
+                <div><strong>Role:</strong> ${this.createdKey.role}</div>
+            </div>
+
+            <section class="form-controls">
+                <sl-button variant="default" class="button-primary" style="float: right"
+                           @click="${this.handleDone}">
+                    Done
+                </sl-button>
+            </section>
+        `;
+    }
+    render() {
+        return html `
+            <sl-dialog .open=${this.open}
+                       @sl-request-close="${(e) => { if (this.revealMode)
+            e.preventDefault(); }}"
+                       @sl-hide="${(e) => { if (e.target === this.apiKeyDialog)
+            this.close(); }}"
+                       label="${this.revealMode ? 'API Key Created' : 'Create API Key'}">
+
+                ${this.revealMode ? this.renderKeyReveal() : html `
+                    ${this.renderModel()}
+                    <section class="form-controls">
+                        ${this.renderCancelButton(() => this.close())}
+                        ${this.renderActionButton('Create', this.handleSubmit)}
+                    </section>
+                `}
+            </sl-dialog>
+        `;
+    }
+};
+ApiKeyForm.styles = [...Formable.styles, dialogCss, apiKeyFormCss];
+ApiKeyForm.DEFAULT_MODEL = {
+    name: '',
+    role: ['read', 'read_write'],
+    expiresInDays: ['0', '30', '90', '180', '365', '1095']
+};
+__decorate([
+    query('sl-dialog')
+], ApiKeyForm.prototype, "apiKeyDialog", void 0);
+__decorate([
+    state()
+], ApiKeyForm.prototype, "open", void 0);
+__decorate([
+    state()
+], ApiKeyForm.prototype, "revealMode", void 0);
+__decorate([
+    state()
+], ApiKeyForm.prototype, "createdKey", void 0);
+ApiKeyForm = ApiKeyForm_1 = __decorate([
+    customElement("pb33f-api-key-form")
+], ApiKeyForm);
+export { ApiKeyForm };

package/dist/components/api-keys/api-key-list.css.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;