@pb33f/cowboy-components 0.7.18 → 0.8.0

package/dist/components/manage-ruleset/rule.js

@@ -14,6 +14,7 @@ import { html, LitElement } from "lit";
 import ruleCss from "./rule.css.js";
 import formsCss from "../../css/forms.css.js";
 import buttonCss from "../../css/button.css.js";
+import spinnerCss from "../../css/spinner.css.js";
 import "./rule-action.js";
 import { RuleClicked, RuleNameUpdated, RulesetDirty, SeverityChanged } from "../../events/doctor.js";
 import { RuleInputComponent } from "./rule-input.js";
@@ -21,27 +22,33 @@ import linksCss from "../../css/links.css.js";
 import listsCss from "../../css/lists.css.js";
 import { NodeType } from "../../model/node_type.js";
 import { IconColor, IconSize } from "../model-icon/model-icon.js";
+import { typedEventHandler } from "../../helpers/typed-events.js";
 let RuleComponent = class RuleComponent extends LitElement {
     constructor(rule, id, custom) {
         super();
+        this.loading = false;
+        this.ruleInput = null;
         this.rule = rule;
         this.ruleId = id;
         this.ruleActive = true;
         this.custom = custom;
         this.error = false;
-        this.ruleInput = new RuleInputComponent(this.rule, this, this.custom);
         this.ruleErrorFunction = [];
         this.ruleErrorFunctionOption = [];
         this.ruleErrorMessage = [];
-        //@ts-ignore
-        this.ruleInput.addEventListener(RuleNameUpdated, (evt) => {
-            this.nameUpdated(evt.detail.name);
-        });
-        //@ts-ignore
-        this.ruleInput.addEventListener(SeverityChanged, (evt) => {
-            this.rule.severity = evt.detail.severity;
-            this.requestUpdate();
-        });
+    }
+    ensureRuleInput() {
+        if (!this.ruleInput) {
+            this.ruleInput = new RuleInputComponent(this.rule, this, this.custom);
+            this.ruleInput.addEventListener(RuleNameUpdated, typedEventHandler((evt) => {
+                this.nameUpdated(evt.detail.name);
+            }));
+            this.ruleInput.addEventListener(SeverityChanged, typedEventHandler((evt) => {
+                this.rule.severity = evt.detail.severity;
+                this.requestUpdate();
+            }));
+        }
+        return this.ruleInput;
     }
     nameUpdated(name) {
         this.rule.id = name;
@@ -71,6 +78,9 @@ let RuleComponent = class RuleComponent extends LitElement {
     }
     opened() {
         this.open = true;
+        if (!this.ruleInput) {
+            this.loading = true;
+        }
         this.dispatchEvent(new CustomEvent(RuleClicked, {
             bubbles: true,
             composed: true,
@@ -79,19 +89,25 @@ let RuleComponent = class RuleComponent extends LitElement {
             }
         }));
     }
+    animationComplete() {
+        this.ensureRuleInput();
+        this.loading = false;
+    }
     render() {
         if (!this.rule) {
             return html ``;
         }
         let errorCol = html ``;
         if (this.error) {
-            this.ruleInput.error = true;
-            this.ruleInput.ruleErrorFunction = this.ruleErrorFunction;
-            this.ruleInput.ruleErrorFunctionOption = this.ruleErrorFunctionOption;
+            if (this.ruleInput) {
+                this.ruleInput.error = true;
+                this.ruleInput.ruleErrorFunction = this.ruleErrorFunction;
+                this.ruleInput.ruleErrorFunctionOption = this.ruleErrorFunctionOption;
+            }
             errorCol = html `
                 <div class="error-col error"><sl-icon name="exclamation-square"></sl-icon></div>`;
         }
-        else {
+        else if (this.ruleInput) {
             this.ruleInput.error = false;
             this.ruleInput.ruleErrorFunctionOption = [];
             this.ruleInput.ruleErrorFunction = [];
@@ -154,17 +170,25 @@ let RuleComponent = class RuleComponent extends LitElement {
                 </div>
                 ${errorCol}
                 <div class="details">
-                    <sl-details class="${this.error ? 'error-rule' : ''}" @sl-show="${this.opened}">
+                    <sl-details class="${this.error ? 'error-rule' : ''}"
+                                @sl-show="${this.opened}"
+                                @sl-after-show="${this.animationComplete}">
                         ${summary}
                         ${errorBox}
-                        ${this.ruleInput}
+                        ${this.open && !this.ruleInput ? html `
+                            <div class="rule-loader">
+                                <div class="spin"></div>
+                                LOADING RULE
+                            </div>
+                        ` : html ``}
+                        ${this.open && this.ruleInput ? this.ruleInput : html ``}
                     </sl-details>
                 </div>
             </div>
         `;
     }
 };
-RuleComponent.styles = [linksCss, buttonCss, ruleCss, formsCss, listsCss];
+RuleComponent.styles = [linksCss, buttonCss, ruleCss, formsCss, listsCss, spinnerCss];
 __decorate([
     state()
 ], RuleComponent.prototype, "rule", void 0);
@@ -177,6 +201,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], RuleComponent.prototype, "open", void 0);
+__decorate([
+    state()
+], RuleComponent.prototype, "loading", void 0);
 __decorate([
     property({ type: Boolean })
 ], RuleComponent.prototype, "custom", void 0);

package/dist/components/mermaid/mermaid-renderer.css.d.ts

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

package/dist/components/mermaid/mermaid-renderer.css.js

@@ -0,0 +1,121 @@
+// Copyright 2023-2025 Princess Beef Heavy Industries, LLC / Dave Shanley
+// https://pb33f.io
+import { css } from 'lit';
+export const styles = css `
+    :host {
+        display: flex;
+        width: 100%;
+        height: 100%;
+        position: relative;
+        font-family: var(--font-stack), monospace;
+    }
+
+    .mermaid-renderer {
+        width: 100%; 
+        height: 100%;
+        position: relative;
+        background: var(--background-color, transparent);
+        color: var(--font-color);
+        border-radius: 0;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .diagram-container {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        overflow: hidden;
+        padding: 0;
+        background: var(--background-color, transparent);
+        cursor: grab;
+        user-select: none;
+    }
+
+    .diagram-container:active {
+        cursor: grabbing;
+    }
+
+    .diagram-container svg {
+        width: 100%;
+        height: 100%;
+        display: block;
+    }
+
+    /* Loading state */
+    .loading {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: var(--sl-spacing-medium);
+        padding: var(--sl-spacing-large);
+        color: var(--secondary-color);
+        font-family: var(--font-stack), monospace;
+    }
+
+    .loading sl-spinner {
+        font-size: 2rem;
+        --track-width: 3px;
+        --indicator-color: var(--primary-color);
+    }
+
+    /* Error state */
+    .error {
+        display: flex;
+        align-items: center;
+        gap: var(--sl-spacing-small);
+        padding: var(--sl-spacing-medium);
+        background: var(--error-color-dimmed, rgba(255, 0, 0, 0.1));
+        color: var(--error-color, #ff0000);
+        border: 1px solid var(--error-color, #ff0000);
+        border-radius: 0;
+        font-family: var(--font-stack), monospace;
+    }
+
+    .error sl-icon {
+        font-size: 1.25rem;
+        flex-shrink: 0;
+    }
+
+    /* Terminal theme overrides for mermaid elements */
+    .diagram-container :deep(rect) {
+        rx: 0 !important;
+        ry: 0 !important;
+    }
+
+    .diagram-container :deep(text) {
+        font-family: var(--font-stack) !important;
+    }
+
+    .diagram-container :deep(.classTitleText) {
+        fill: var(--primary-color) !important;
+        font-size: 18px !important;
+    }
+
+    :host([theme="dark"]) {
+        --diagram-background: var(--background-color);
+    }
+
+    :host([theme="dark"]) .diagram-container {
+        background: var(--diagram-background);
+    }
+
+    :host([theme="light"]) {
+        --diagram-background: var(--background-color);
+    }
+
+    :host([theme="light"]) .diagram-container {
+        background: var(--diagram-background);
+    }
+
+
+    /* Responsive adjustments */
+    @media (max-width: 768px) {
+        .diagram-container {
+            padding: var(--sl-spacing-small);
+        }
+    }
+`;

package/dist/components/mermaid/mermaid-renderer.d.ts

@@ -0,0 +1,75 @@
+import { LitElement, PropertyValues } from 'lit';
+import { MermaidConfig } from 'mermaid';
+export declare class MermaidRenderer extends LitElement {
+    static styles: import("lit").CSSResult;
+    diagram: string;
+    fitWidth: boolean;
+    config: Partial<MermaidConfig>;
+    theme: 'light' | 'dark';
+    private _loading;
+    private _error;
+    private _svgContent;
+    private _container;
+    private _diagramId;
+    private configService;
+    private static _initialized;
+    private _svgElement;
+    private zoomX;
+    private zoomY;
+    private zoomW;
+    private zoomH;
+    private initialZoomX;
+    private initialZoomY;
+    private initialZoomW;
+    private initialZoomH;
+    private grabbed;
+    private isDragging;
+    private dragThreshold;
+    private startX;
+    private startY;
+    private dragStartViewBoxX;
+    private dragStartViewBoxY;
+    private zoomMax;
+    private zoomMin;
+    private boundOnWheel;
+    private boundMouseDown;
+    private boundMouseUp;
+    private boundMouseMove;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _detachZoomHandlers;
+    private _handleThemeChange;
+    protected updated(changedProperties: PropertyValues): void;
+    private _initializeMermaid;
+    private _renderDiagram;
+    /**
+     * post-processes the rendered SVG
+     */
+    private _postProcessSVG;
+    private _setInitialViewBox;
+    private _attachZoomHandlers;
+    /**
+     * public method to re-render the diagram
+     */
+    refresh(): Promise<void>;
+    /**
+     * public method to export the diagram as SVG
+     */
+    exportSVG(): string | null;
+    exportPNG(): Promise<Blob | null>;
+    private zoom;
+    zoomIn(): void;
+    zoomOut(): void;
+    resetZoom(): void;
+    private onWheel;
+    private mouseDown;
+    private mouseUp;
+    private mouseMove;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'pb33f-mermaid-renderer': MermaidRenderer;
+    }
+}