@pb33f/cowboy-components 0.7.18 → 0.8.0

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

@@ -4,6 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 RuleActionComponent_1;
 import { customElement, property, query } from "lit/decorators.js";
 import { html, LitElement } from "lit";
 import formsCss from "../../css/forms.css.js";
@@ -13,28 +14,82 @@ import buttonCss from "../../css/button.css.js";
 import { CreateBagManager } from "@pb33f/saddlebag";
 import { FunctionsBag, FunctionsSchemaBag } from "../the-doctor/the-doctor.js";
 import { FunctionOption } from "./function-option.js";
-import { OpenProblemDrawer, RemoveFunctionOption, RulesetDirty, RuleActionDirty, } from "../../events/doctor.js";
+import { OpenDrawer, RemoveFunctionOption, RulesetDirty, RuleActionDirty, } from "../../events/doctor.js";
 import linksCss from "../../css/links.css.js";
-import { ProblemDrawerEventType } from "../problem-list/details-drawer.js";
+import { DrawerContentType } from "../../model/drawer-content.js";
 import sharedCss from "../../css/shared.css.js";
 import listsCss from "../../css/lists.css.js";
 import dialogCss from "../../css/dialog.css.js";
-let RuleActionComponent = class RuleActionComponent extends LitElement {
+import { typedEventHandler } from "../../helpers/typed-events.js";
+let RuleActionComponent = RuleActionComponent_1 = class RuleActionComponent extends LitElement {
     constructor(action, rule) {
         super();
         this.ruleAction = action;
         this.ruleComponent = rule;
-        this.bagManager = CreateBagManager(true);
-        this.FunctionsBag = this.bagManager.getBag(FunctionsBag);
-        this.FunctionsSchemaBag = this.bagManager.getBag(FunctionsSchemaBag);
-        this.functions = this.FunctionsBag?.get(FunctionsBag) || [];
-        this.functionSchemas = this.FunctionsSchemaBag?.get(FunctionsSchemaBag) || new Map();
+        // use singleton pattern to avoid creating multiple BagManagers
+        // this significantly improves performance by reusing the same manager and cached data
+        if (!RuleActionComponent_1.sharedBagManager) {
+            RuleActionComponent_1.sharedBagManager = CreateBagManager(true);
+            RuleActionComponent_1.sharedFunctionsBag = RuleActionComponent_1.sharedBagManager.getBag(FunctionsBag);
+            RuleActionComponent_1.sharedFunctionsSchemaBag = RuleActionComponent_1.sharedBagManager.getBag(FunctionsSchemaBag);
+            RuleActionComponent_1.sharedFunctions = RuleActionComponent_1.sharedFunctionsBag?.get(FunctionsBag) || [];
+            RuleActionComponent_1.sharedFunctionSchemas = RuleActionComponent_1.sharedFunctionsSchemaBag?.get(FunctionsSchemaBag) || new Map();
+        }
+        // use shared cached data
+        this.functions = RuleActionComponent_1.sharedFunctions || [];
+        this.functionSchemas = RuleActionComponent_1.sharedFunctionSchemas || new Map();
         this.buildFunctionOptions();
     }
+    // helper method to get function option value from Map or object
+    getFunctionOptionValue(key) {
+        if (!this.ruleAction?.functionOptions)
+            return "";
+        if (this.ruleAction.functionOptions instanceof Map) {
+            return this.ruleAction.functionOptions.get(key) || "";
+        }
+        return this.ruleAction.functionOptions[key] || "";
+    }
+    // helper method to iterate function options regardless of type
+    iterateFunctionOptions(callback) {
+        if (!this.ruleAction?.functionOptions)
+            return;
+        if (this.ruleAction.functionOptions instanceof Map) {
+            this.ruleAction.functionOptions.forEach((value, key) => callback(key, value));
+        }
+        else {
+            for (const key in this.ruleAction.functionOptions) {
+                callback(key, this.ruleAction.functionOptions[key]);
+            }
+        }
+    }
+    // helper method to get property schema by name
+    getPropertySchema(name) {
+        if (!this.ruleFunctionSchema?.properties)
+            return null;
+        const prop = this.ruleFunctionSchema.properties.find(p => p.name === name);
+        if (!prop)
+            return null;
+        return {
+            description: prop.description || "",
+            required: this.ruleFunctionSchema.required?.includes(name) || false
+        };
+    }
+    // helper method to add required properties that aren't already in options
+    addMissingRequiredProperties() {
+        if (!this.ruleFunctionSchema?.properties) {
+            this.functionOptions = [];
+            return;
+        }
+        this.ruleFunctionSchema.properties.forEach(property => {
+            if (this.ruleFunctionSchema?.required?.includes(property.name)) {
+                this.addFunctionOption(property.name, "", property.description || "", false, false);
+            }
+        });
+    }
     buildFunctionOptions() {
         this.functionOptions = [];
         this.ruleFunctionSchema = this.functionSchemas.get(this.ruleAction?.function);
-        //no rule action, fill it in.
+        // initialize rule action if missing
         if (!this.ruleAction) {
             this.ruleAction = {
                 field: "",
@@ -43,92 +98,27 @@ let RuleActionComponent = class RuleActionComponent extends LitElement {
             };
             this.ruleComponent.rule.then = this.ruleAction;
         }
-        if (this.ruleAction?.functionOptions && this.ruleAction?.functionOptions.size > 0) {
-            let i = 0;
-            this.ruleAction.functionOptions.forEach((value, key) => {
-                // extract description from schema if its available
-                let desc = "";
-                let containsKey = false;
-                if (this.ruleFunctionSchema?.properties) {
-                    this.ruleFunctionSchema.properties.forEach(prop => {
-                        if (prop.name == key) {
-                            desc = prop.description || "";
-                            containsKey = true;
-                        }
-                    });
-                }
-                let removeable = true;
-                // check if property is required and if so, force it to be non-removable
-                if (this.ruleFunctionSchema?.required && this.ruleFunctionSchema?.required.includes(key)) {
-                    removeable = false;
-                }
-                if (containsKey) {
-                    i++;
-                    this.addFunctionOption(key, value, desc, removeable, false);
-                }
-            });
-            if (i <= 0) {
-                if (this.ruleFunctionSchema?.properties) {
-                    this.ruleFunctionSchema.properties.forEach(property => {
-                        // check if property is required and if so, force it to be non-removable
-                        if (this.ruleFunctionSchema?.required && this.ruleFunctionSchema.required.includes(property.name)) {
-                            this.addFunctionOption(property.name, "", property.description, false, false);
-                        }
-                    });
-                }
-                else {
-                    this.functionOptions = [];
-                }
-            }
+        // ensure functionOptions exists
+        if (!this.ruleAction.functionOptions) {
+            this.ruleAction.functionOptions = {};
         }
-        else {
-            if (this.ruleAction?.functionOptions) {
-                let i = 0;
-                for (const property in this.ruleAction.functionOptions) {
-                    // extract description from schema if its available
-                    i++;
-                    let desc = "";
-                    if (this.ruleFunctionSchema?.properties) {
-                        this.ruleFunctionSchema.properties.forEach(prop => {
-                            if (prop.name == property) {
-                                desc = prop.description || "";
-                            }
-                        });
-                    }
-                    // check schema allows it
-                    if (this.ruleFunctionSchema?.properties) {
-                        const prop = this.ruleFunctionSchema.properties.filter(prop => prop.name == property)[0];
-                        if (prop) {
-                            let removeable = true;
-                            // check if property is required and if so, force it to be non-removable
-                            if (this.ruleFunctionSchema.required && this.ruleFunctionSchema.required.includes(property)) {
-                                removeable = false;
-                            }
-                            this.addFunctionOption(property, this.ruleAction.functionOptions[property], desc, removeable, false);
-                        }
-                    }
-                }
-                if (i <= 0) {
-                    if (this.ruleFunctionSchema?.properties) {
-                        this.ruleFunctionSchema.properties.forEach(property => {
-                            // check if property is required and if so, force it to be non-removable
-                            if (this.ruleFunctionSchema?.required && this.ruleFunctionSchema.required.includes(property.name)) {
-                                this.addFunctionOption(property.name, "", property.description, false, false);
-                            }
-                        });
-                    }
-                    else {
-                        this.functionOptions = [];
-                        this.requestUpdate();
-                    }
-                }
-            }
-            else {
-                if (this.ruleAction)
-                    this.ruleAction.functionOptions = {};
+        // process existing function options
+        let optionCount = 0;
+        this.iterateFunctionOptions((key, value) => {
+            const propSchema = this.getPropertySchema(key);
+            // only add if property exists in schema
+            if (propSchema) {
+                optionCount++;
+                this.addFunctionOption(key, value, propSchema.description, !propSchema.required, false);
             }
+        });
+        // if no valid options were added, add required properties
+        if (optionCount === 0) {
+            this.addMissingRequiredProperties();
         }
-        if (this.ruleFunctionSchema?.minProperties && this.functionOptions.length <= this.ruleFunctionSchema?.minProperties) {
+        // update removeable state based on minProperties
+        if (this.ruleFunctionSchema?.minProperties &&
+            this.functionOptions.length <= this.ruleFunctionSchema.minProperties) {
             this.functionOptions.forEach(option => {
                 option.removeable = false;
             });
@@ -158,38 +148,34 @@ let RuleActionComponent = class RuleActionComponent extends LitElement {
             }
         }));
     }
+    // helper method to remove function option by key
+    removeFunctionOption(key) {
+        if (!this.ruleAction?.functionOptions)
+            return;
+        if (this.ruleAction.functionOptions instanceof Map) {
+            this.ruleAction.functionOptions.delete(key);
+        }
+        else {
+            delete this.ruleAction.functionOptions[key];
+        }
+        this.functionOptions = this.functionOptions.filter(option => option.key !== key);
+    }
     functionOptionRemoved(evt) {
+        // get the correct action reference
+        let targetAction;
         if (Array.isArray(this.ruleComponent.rule.then)) {
-            const action = this.ruleComponent.rule.then.filter(action => action == this.ruleAction)[0];
-            if (action.functionOptions && action.functionOptions instanceof Map) {
-                action.functionOptions.delete(evt.detail.key);
-                this.functionOptions = this.functionOptions.filter(option => option.key != evt.detail.key);
-            }
-            else {
-                if (action.functionOptions) {
-                    delete action.functionOptions[evt.detail.key];
-                    this.functionOptions = this.functionOptions.filter(option => option.key != evt.detail.key);
-                }
-            }
+            targetAction = this.ruleComponent.rule.then.find(action => action === this.ruleAction);
         }
-        else {
-            for (const property in this.ruleComponent.rule.then) {
-                if (property === "functionOptions") {
-                    if (this.ruleComponent.rule.then.functionOptions && this.ruleComponent.rule.then.functionOptions instanceof Map) {
-                        this.ruleComponent.rule.then.functionOptions.delete(evt.detail.key);
-                        this.functionOptions = this.functionOptions.filter(option => option.key != evt.detail.key);
-                    }
-                    else {
-                        if (this.ruleComponent.rule.then.functionOptions) {
-                            delete this.ruleComponent.rule.then.functionOptions[evt.detail.key];
-                            this.functionOptions = this.functionOptions.filter(option => option.key != evt.detail.key);
-                        }
-                    }
-                }
-            }
+        else if (this.ruleComponent.rule.then) {
+            targetAction = this.ruleComponent.rule.then;
+        }
+        // remove the option if we found the target action
+        if (targetAction?.functionOptions) {
+            this.removeFunctionOption(evt.detail.key);
         }
-        // check if this action can add any more properties
-        if (this.ruleFunctionSchema?.minProperties && this.functionOptions.length - 1 < this.ruleFunctionSchema.minProperties) {
+        // update removeable state if below minProperties
+        if (this.ruleFunctionSchema?.minProperties &&
+            this.functionOptions.length < this.ruleFunctionSchema.minProperties) {
             this.functionOptions.forEach(option => {
                 option.removeable = false;
             });
@@ -198,19 +184,18 @@ let RuleActionComponent = class RuleActionComponent extends LitElement {
         this.requestUpdate();
     }
     viewFunctionDocs() {
-        this.dispatchEvent(new CustomEvent(OpenProblemDrawer, {
+        this.dispatchEvent(new CustomEvent(OpenDrawer, {
             bubbles: true,
             composed: true,
             detail: {
-                type: ProblemDrawerEventType.FUNCTION_DOCS,
-                rule: this.ruleAction.function = this.fieldFunction.value
+                type: DrawerContentType.FUNCTION_DOCS,
+                functionId: this.ruleAction.function = this.fieldFunction.value
             }
         }));
     }
     addFunctionOption(key = "", value = "", desc = "", removeable = true, dirty = true) {
         const funcOption = new FunctionOption(key, value, desc, this.ruleComponent, this.ruleAction, removeable);
-        // @ts-ignore
-        funcOption.addEventListener(RemoveFunctionOption, this.functionOptionRemoved.bind(this));
+        funcOption.addEventListener(RemoveFunctionOption, typedEventHandler(this.functionOptionRemoved.bind(this)));
         funcOption.addEventListener(RuleActionDirty, this.dirty);
         this.functionOptions.push(funcOption);
         if (dirty)
@@ -257,7 +242,7 @@ let RuleActionComponent = class RuleActionComponent extends LitElement {
                 addFunctionOptionButton = html `
                     <sl-button @click=${this.openFunctionOptionDialog} variant="primary" size="small"
                                class="add-function-option">
-                        <sl-icon slot="prefix" name="plus-square"></sl-icon>
+                        <sl-icon slot="prefix" name="plus-square" aria-hidden="true"></sl-icon>
                         Add Function Option
                     </sl-button>
                 `;
@@ -273,7 +258,7 @@ let RuleActionComponent = class RuleActionComponent extends LitElement {
                     ${this.ruleFunctionSchema?.properties?.map(prop => {
             let propUsed = false;
             this.functionOptions.forEach(option => {
-                if (option.key == prop.name) {
+                if (option.key === prop.name) {
                     propUsed = true;
                 }
             });
@@ -318,7 +303,7 @@ let RuleActionComponent = class RuleActionComponent extends LitElement {
                 ${this.functionOptions}
                 <sl-button variant="default" size="small" class="danger"
                            @click=${this.removeSelf}>
-                    <sl-icon slot="prefix" name="x-square"></sl-icon>
+                    <sl-icon slot="prefix" name="x-square" aria-hidden="true"></sl-icon>
                     Delete Action
                 </sl-button>
             </div>
@@ -327,6 +312,10 @@ let RuleActionComponent = class RuleActionComponent extends LitElement {
     }
 };
 RuleActionComponent.styles = [dialogCss, sharedCss, listsCss, linksCss, buttonCss, ruleActionCss, formsCss];
+// singleton pattern for performance - share BagManager across all instances
+RuleActionComponent.sharedBagManager = null;
+RuleActionComponent.sharedFunctions = null;
+RuleActionComponent.sharedFunctionSchemas = null;
 __decorate([
     query('sl-input#field')
 ], RuleActionComponent.prototype, "fieldInput", void 0);
@@ -345,7 +334,7 @@ __decorate([
 __decorate([
     property()
 ], RuleActionComponent.prototype, "ruleErrorFunctionOption", void 0);
-RuleActionComponent = __decorate([
+RuleActionComponent = RuleActionComponent_1 = __decorate([
     customElement('pb33f-rule-action')
 ], RuleActionComponent);
 export { RuleActionComponent };

package/dist/components/manage-ruleset/rule-input.d.ts

@@ -1,4 +1,4 @@
-import { LitElement } from "lit";
+import { LitElement, PropertyValues } from "lit";
 import { Rule } from "../../model/vacuum_rule.js";
 import { SlCheckbox, SlInput, SlSelect, SlTextarea } from "@shoelace-style/shoelace";
 import { RuleComponent } from "./rule.js";
@@ -22,6 +22,7 @@ export declare class RuleInputComponent extends LitElement {
     private readonly actions;
     private readonly parent;
     constructor(rule: Rule, parent: RuleComponent, custom: boolean);
+    protected updated(changedProperties: PropertyValues): void;
     showRuleDocs(source: string | undefined): void;
     updateName(): void;
     updateDescription(): void;
@@ -34,5 +35,6 @@ export declare class RuleInputComponent extends LitElement {
     updateSeverity(): void;
     updateCategory(): void;
     updateFormats(): void;
+    private updateActionErrorStates;
     render(): import("lit-html").TemplateResult<1>;
 }

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

@@ -6,8 +6,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { customElement, property, query, state } from "lit/decorators.js";
 import { html, LitElement } from "lit";
-import { ProblemDrawerEventType } from "../problem-list/details-drawer.js";
-import { OpenProblemDrawer, RuleNameUpdated, RulesetDirty, SeverityChanged } from "../../events/doctor";
+import { DrawerContentType } from "../../model/drawer-content.js";
+import { OpenDrawer, RuleNameUpdated, RulesetDirty, SeverityChanged } from "../../events/doctor";
 import { RuleActionComponent } from "./rule-action.js";
 import ruleCss from "./rule.css.js";
 import formsCss from "../../css/forms.css.js";
@@ -36,13 +36,22 @@ let RuleInputComponent = class RuleInputComponent extends LitElement {
         }
         this.actions = actions;
     }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        // update action error states when error-related properties change
+        if (changedProperties.has('error') ||
+            changedProperties.has('ruleErrorFunction') ||
+            changedProperties.has('ruleErrorFunctionOption')) {
+            this.updateActionErrorStates();
+        }
+    }
     showRuleDocs(source) {
-        this.dispatchEvent(new CustomEvent(OpenProblemDrawer, {
+        this.dispatchEvent(new CustomEvent(OpenDrawer, {
             bubbles: true,
             composed: true,
             detail: {
-                type: ProblemDrawerEventType.RULE_DOCS,
-                rule: source
+                type: DrawerContentType.RULE_DOCS,
+                ruleId: source
             }
         }));
     }
@@ -139,6 +148,26 @@ let RuleInputComponent = class RuleInputComponent extends LitElement {
         this.rule.formats = formats;
         this.dirty();
     }
+    // handles error state propagation to child actions based on function matches
+    updateActionErrorStates() {
+        this.actions.forEach((action, index) => {
+            if (this.error && this.ruleErrorFunction &&
+                index < this.ruleErrorFunction.length &&
+                action.ruleAction?.function === this.ruleErrorFunction[index]) {
+                // propagate error state for matching function
+                const errorOption = this.ruleErrorFunctionOption?.[index] || '';
+                action.error = true;
+                action.ruleErrorFunction = errorOption;
+                action.ruleErrorFunctionOption = errorOption;
+            }
+            else {
+                // clear any existing error state
+                action.error = false;
+                action.ruleErrorFunction = '';
+                action.ruleErrorFunctionOption = '';
+            }
+        });
+    }
     render() {
         let message = this.rule.message;
         if (message == null) {
@@ -147,31 +176,6 @@ let RuleInputComponent = class RuleInputComponent extends LitElement {
         if (!this.rule) {
             return html ``;
         }
-        if (this.error) {
-            let i = 0;
-            this.actions.forEach(action => {
-                if (this.ruleErrorFunction && action.ruleAction?.function === this.ruleErrorFunction[i]) {
-                    action.error = true;
-                    action.ruleErrorFunction = this.ruleErrorFunctionOption[i];
-                    if (this.ruleErrorFunctionOption) {
-                        action.ruleErrorFunctionOption = this.ruleErrorFunctionOption[i];
-                    }
-                }
-                else {
-                    action.error = false;
-                    action.ruleErrorFunction = '';
-                    action.ruleErrorFunctionOption = '';
-                }
-                i++;
-            });
-        }
-        else {
-            this.actions.forEach(action => {
-                action.error = false;
-                action.ruleErrorFunction = '';
-                action.ruleErrorFunctionOption = '';
-            });
-        }
         return html `
             <a href="#" class="rule-docs" @click="${() => {
             this.showRuleDocs(this.rule.id);
@@ -214,15 +218,15 @@ let RuleInputComponent = class RuleInputComponent extends LitElement {
                        size="small"
                        value=${this.rule.severity}>
                 <sl-option value="error">
-                    <sl-icon name="x-square" class="error"></sl-icon>
+                    <sl-icon name="x-square" class="error" aria-hidden="true"></sl-icon>
                     Error
                 </sl-option>
                 <sl-option value="warn">
-                    <sl-icon name="exclamation-triangle" class="warning"></sl-icon>
+                    <sl-icon name="exclamation-triangle" class="warning" aria-hidden="true"></sl-icon>
                     Warning
                 </sl-option>
                 <sl-option value="info">
-                    <sl-icon name="info-square" class="info"></sl-icon>
+                    <sl-icon name="info-square" class="info" aria-hidden="true"></sl-icon>
                     Info
                 </sl-option>
             </sl-select>
@@ -244,7 +248,7 @@ let RuleInputComponent = class RuleInputComponent extends LitElement {
             <section class="rule-actions">
                 <label class="rule-actions-label">Actions
                     <sl-button variant="default" size="small" class="button-primary" @click=${this.addRuleAction}>
-                        <sl-icon slot="prefix" name="plus-square"></sl-icon>
+                        <sl-icon slot="prefix" name="plus-square" aria-hidden="true"></sl-icon>
                         Add
                     </sl-button>
                 </label>

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

@@ -8,9 +8,11 @@ export default css `
     .rule-docs {
         float: right;
         display: inline-block;
-        padding-left: 10px; 
+        padding-left: 10px;
         padding-top: 5px;
         font-size: 0.8rem;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
     }
     
     .error-message {
@@ -43,6 +45,8 @@ export default css `
     .rule-actions label {
         text-align: right;
         font-size: 0.8rem;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
     }
 
     .label-on-left::part(form-control-help-text) {
@@ -116,4 +120,14 @@ export default css `
         display: none;
     }
 
+    .rule-loader {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 10px;
+        padding: 20px 0;
+        font-size: 0.85rem;
+        color: var(--font-color);
+    }
+
 `;

package/dist/components/manage-ruleset/rule.d.ts

@@ -14,18 +14,21 @@ export declare class RuleComponent extends LitElement {
     details: SlDetails;
     ruleId: string;
     open: boolean;
+    private loading;
     custom: boolean;
     ruleActive: boolean;
     ruleErrorMessage: string[];
     ruleErrorFunction: string[];
     ruleErrorFunctionOption: string[];
-    private readonly ruleInput;
+    private ruleInput;
     constructor(rule: Rule, id: string, custom: boolean);
+    private ensureRuleInput;
     nameUpdated(name: string): void;
     dirty(): void;
     toggleRule(): void;
     close(): void;
     show(): void;
     opened(): void;
+    animationComplete(): void;
     render(): import("lit-html").TemplateResult<1>;
 }