@pb33f/cowboy-components 0.1.15 → 0.2.0

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

@@ -0,0 +1,351 @@
+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 { customElement, property, query } from "lit/decorators.js";
+import { html, LitElement } from "lit";
+import formsCss from "../../css/forms.css.js";
+import ruleActionCss from "./rule-action.css.js";
+import "./function-option.js";
+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 linksCss from "../../css/links.css.js";
+import { ProblemDrawerEventType } from "../problem-list/details-drawer.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 {
+    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();
+        this.buildFunctionOptions();
+    }
+    buildFunctionOptions() {
+        this.functionOptions = [];
+        this.ruleFunctionSchema = this.functionSchemas.get(this.ruleAction?.function);
+        //no rule action, fill it in.
+        if (!this.ruleAction) {
+            this.ruleAction = {
+                field: "",
+                function: "",
+                functionOptions: {}
+            };
+            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 = [];
+                }
+            }
+        }
+        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 = {};
+            }
+        }
+        if (this.ruleFunctionSchema?.minProperties && this.functionOptions.length <= this.ruleFunctionSchema?.minProperties) {
+            this.functionOptions.forEach(option => {
+                option.removeable = false;
+            });
+        }
+        this.requestUpdate();
+    }
+    changeField() {
+        if (this.fieldInput) {
+            this.ruleAction.field = this.fieldInput.value;
+        }
+        this.dirty();
+    }
+    changeFunction() {
+        if (this.fieldInput) {
+            this.ruleAction.function = this.fieldFunction.value;
+        }
+        // wipe out function options, creates too much mess.
+        this.buildFunctionOptions();
+        this.dirty();
+    }
+    dirty() {
+        this.dispatchEvent(new CustomEvent(RulesetDirty, {
+            bubbles: true,
+            composed: true,
+            detail: {
+                rule: this.ruleComponent
+            }
+        }));
+    }
+    functionOptionRemoved(evt) {
+        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);
+                }
+            }
+        }
+        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);
+                        }
+                    }
+                }
+            }
+        }
+        // check if this action can add any more properties
+        if (this.ruleFunctionSchema?.minProperties && this.functionOptions.length - 1 < this.ruleFunctionSchema.minProperties) {
+            this.functionOptions.forEach(option => {
+                option.removeable = false;
+            });
+        }
+        this.dirty();
+        this.requestUpdate();
+    }
+    viewFunctionDocs() {
+        this.dispatchEvent(new CustomEvent(OpenProblemDrawer, {
+            bubbles: true,
+            composed: true,
+            detail: {
+                type: ProblemDrawerEventType.FUNCTION_DOCS,
+                rule: 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(RuleActionDirty, this.dirty);
+        this.functionOptions.push(funcOption);
+        if (dirty)
+            this.dirty();
+        this.requestUpdate();
+    }
+    removeSelf() {
+        if (this.ruleComponent.rule && this.ruleComponent.rule.then) {
+            if (Array.isArray(this.ruleComponent.rule.then)) {
+                this.ruleComponent.rule.then = this.ruleComponent.rule.then.filter(action => action.function !== this.ruleAction.function);
+            }
+            else {
+                delete this.ruleComponent.rule.then;
+            }
+            this.remove();
+        }
+        this.dirty();
+    }
+    closeFunctionOption() {
+        this.addFunctionOptionDialog.hide();
+    }
+    openFunctionOptionDialog() {
+        this.addFunctionOptionDialog.show();
+    }
+    addFunctionOptionProperty(prop, desc = "") {
+        // check if this has a schema and we have reached minimum props
+        if (this.ruleFunctionSchema?.minProperties && this.functionOptions.length + 1 >= this.ruleFunctionSchema.minProperties) {
+            this.functionOptions.forEach(option => {
+                option.removeable = true;
+            });
+            this.addFunctionOption(prop, "", desc, true);
+        }
+        else {
+            this.addFunctionOption(prop, "", desc, false);
+        }
+        this.addFunctionOptionDialog.hide();
+        this.dirty();
+        this.requestUpdate();
+    }
+    render() {
+        let addFunctionOptionButton = html ``;
+        if (this.ruleFunctionSchema && this.ruleFunctionSchema.properties && this.ruleFunctionSchema.properties.length > 0) {
+            if (this.functionOptions.length < this.ruleFunctionSchema.properties.length) {
+                addFunctionOptionButton = html `
+                    <sl-button @click=${this.openFunctionOptionDialog} variant="primary" size="small"
+                               class="add-function-option">
+                        <sl-icon slot="prefix" name="plus-square"></sl-icon>
+                        Add Function Option
+                    </sl-button>
+                `;
+            }
+        }
+        return html `
+            <sl-dialog id="add-function-option" label="Add Function Option" class="dialog-overview"
+                       style="--width: 50vw">
+                <h3>${this.ruleComponent.rule.id}</h3>
+                <p>This function <em>(${this.ruleAction?.function})</em> accepts the following properties</p>
+                <hr/>
+                <ul>
+                    ${this.ruleFunctionSchema?.properties?.map(prop => {
+            let propUsed = false;
+            this.functionOptions.forEach(option => {
+                if (option.key == prop.name) {
+                    propUsed = true;
+                }
+            });
+            if (!propUsed) {
+                return html `
+                                <li>
+                                    <sl-button @click=${() => {
+                    this.addFunctionOptionProperty(prop.name, prop.description);
+                }} variant="primary" size="small"
+                                               class="add-function-option">
+                                        Add
+                                    </sl-button>&nbsp;&nbsp;
+                                    <strong>${prop.name}</strong>&nbsp; <span class="description">(${prop.description ? html `${prop.description})` : ''}</span>
+                                </li>`;
+            }
+            else {
+                return html `
+                                <li><span style="color: var(--font-color-sub1)">${prop.name}</span> (already used)</li>`;
+            }
+        })}
+                </ul>
+                <sl-button @click=${this.closeFunctionOption} slot="footer" variant="primary" style="float: left">Close
+                </sl-button>
+            </sl-dialog>
+            
+            <sl-input size="small" label="Field" id="field"
+                      help-text="The field value of the nodes located by the JSON Path (can be blank if the JSON path is absolute)"
+                      value="${this.ruleAction?.field}" @sl-change="${this.changeField}"></sl-input>
+
+            <div class="function-input">
+                <sl-select class="${this.error ? 'error' : ''}" label="Function" size="small" id="function"
+                           help-text="The function to run on the field" value="${this.ruleAction?.function}"
+                           @sl-change="${this.changeFunction}">
+                    ${this.functions.map(func => html `
+                        <sl-option value="${func}">${func}</sl-option>`)}
+                </sl-select>
+                <a href="#" @click="${this.viewFunctionDocs}" class="function-docs">view docs</a>
+            </div>
+
+            <div class="function-options">
+                ${addFunctionOptionButton}
+                ${this.functionOptions}
+                <sl-button variant="default" size="small" class="danger"
+                           @click=${this.removeSelf}>
+                    <sl-icon slot="prefix" name="x-square"></sl-icon>
+                    Delete Action
+                </sl-button>
+            </div>
+            <hr/>
+        `;
+    }
+};
+RuleActionComponent.styles = [dialogCss, sharedCss, listsCss, linksCss, buttonCss, ruleActionCss, formsCss];
+__decorate([
+    query('sl-input#field')
+], RuleActionComponent.prototype, "fieldInput", void 0);
+__decorate([
+    query('sl-select#function')
+], RuleActionComponent.prototype, "fieldFunction", void 0);
+__decorate([
+    query('sl-dialog#add-function-option')
+], RuleActionComponent.prototype, "addFunctionOptionDialog", void 0);
+__decorate([
+    property({ type: Boolean })
+], RuleActionComponent.prototype, "error", void 0);
+__decorate([
+    property()
+], RuleActionComponent.prototype, "ruleErrorFunction", void 0);
+__decorate([
+    property()
+], RuleActionComponent.prototype, "ruleErrorFunctionOption", void 0);
+RuleActionComponent = __decorate([
+    customElement('pb33f-rule-action')
+], RuleActionComponent);
+export { RuleActionComponent };

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

@@ -0,0 +1,38 @@
+import { LitElement } from "lit";
+import { Rule } from "../../model/vacuum_rule.js";
+import { SlCheckbox, SlInput, SlSelect, SlTextarea } from "@shoelace-style/shoelace";
+import { RuleComponent } from "./rule.js";
+export declare class RuleInputComponent extends LitElement {
+    static styles: import("lit").CSSResult[];
+    rule: Rule;
+    description: SlTextarea;
+    message: SlTextarea;
+    jsonPath: SlInput;
+    name: SlInput;
+    oas2Check: SlCheckbox;
+    oas3Check: SlCheckbox;
+    oas31Check: SlCheckbox;
+    resolved: SlCheckbox;
+    severity: SlSelect;
+    category: SlSelect;
+    custom: boolean;
+    error: boolean;
+    ruleErrorFunction: string[];
+    ruleErrorFunctionOption: string[];
+    private readonly actions;
+    private readonly parent;
+    constructor(rule: Rule, parent: RuleComponent, custom: boolean);
+    showRuleDocs(source: string | undefined): void;
+    updateName(): void;
+    updateDescription(): void;
+    updateMessage(): void;
+    updateJsonPath(): void;
+    updateResolved(): void;
+    checkFormat(format: string): boolean;
+    addRuleAction(): void;
+    dirty(): void;
+    updateSeverity(): void;
+    updateCategory(): void;
+    updateFormats(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}

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

@@ -0,0 +1,296 @@
+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 { 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 } from "../../events/doctor";
+import { RuleActionComponent } from "./rule-action.js";
+import ruleCss from "./rule.css.js";
+import formsCss from "../../css/forms.css.js";
+import buttonCss from "../../css/button.css.js";
+import linksCss from "../../css/links.css.js";
+let RuleInputComponent = class RuleInputComponent extends LitElement {
+    constructor(rule, parent, custom) {
+        super();
+        this.rule = rule;
+        this.parent = parent;
+        this.custom = custom;
+        this.ruleErrorFunction = [];
+        this.ruleErrorFunctionOption = [];
+        let actions = [];
+        if (this.rule && Array.isArray(this.rule.then)) {
+            this.rule.then.forEach(action => {
+                const ruleAction = new RuleActionComponent(action, this.parent);
+                ruleAction.addEventListener(RulesetDirty, () => { this.dirty(); });
+                actions.push(ruleAction);
+            });
+        }
+        else {
+            const ruleAction = new RuleActionComponent(this.rule.then, this.parent);
+            actions.push(ruleAction);
+            ruleAction.addEventListener(RulesetDirty, () => { this.dirty(); });
+        }
+        this.actions = actions;
+    }
+    showRuleDocs(source) {
+        this.dispatchEvent(new CustomEvent(OpenProblemDrawer, {
+            bubbles: true,
+            composed: true,
+            detail: {
+                type: ProblemDrawerEventType.RULE_DOCS,
+                rule: source
+            }
+        }));
+    }
+    updateName() {
+        this.rule.id = this.name.value;
+        this.dispatchEvent(new CustomEvent(RuleNameUpdated, {
+            bubbles: true,
+            composed: true,
+            detail: {
+                name: this.rule.id
+            }
+        }));
+        this.dirty();
+    }
+    updateDescription() {
+        this.rule.description = this.description.value;
+        this.dirty();
+    }
+    updateMessage() {
+        this.rule.message = this.message.value;
+        this.dirty();
+    }
+    updateJsonPath() {
+        this.rule.given = this.jsonPath.value;
+        this.dirty();
+    }
+    updateResolved() {
+        this.rule.resolved = this.resolved.checked;
+        this.dirty();
+    }
+    checkFormat(format) {
+        if (this.rule.formats) {
+            return this.rule.formats.includes(format);
+        }
+        return false;
+    }
+    addRuleAction() {
+        const ruleAction = {
+            field: "",
+            function: "",
+            functionOptions: new Map()
+        };
+        const action = new RuleActionComponent(ruleAction, this.parent);
+        this.actions.push(action);
+        if (this.rule && this.rule.then) {
+            if (Array.isArray(this.rule.then)) {
+                this.rule.then.push(ruleAction);
+            }
+            else {
+                this.rule.then = [this.rule.then, ruleAction];
+            }
+        }
+        else {
+            this.rule.then = [ruleAction];
+        }
+        this.dirty();
+        this.requestUpdate();
+    }
+    dirty() {
+        this.dispatchEvent(new CustomEvent(RulesetDirty, {
+            bubbles: true,
+            composed: true,
+            detail: {
+                rule: this.parent
+            }
+        }));
+    }
+    updateSeverity() {
+        this.rule.severity = this.severity.value;
+        this.dirty();
+    }
+    updateCategory() {
+        this.rule.category = { id: this.category.value, name: this.category.value };
+        this.dirty();
+    }
+    updateFormats() {
+        let formats = [];
+        if (this.oas2Check.checked) {
+            formats.push('oas2');
+        }
+        if (this.oas3Check.checked) {
+            formats.push('oas3');
+        }
+        if (this.oas31Check.checked) {
+            formats.push('oas3_1');
+        }
+        this.rule.formats = formats;
+        this.dirty();
+    }
+    render() {
+        let message = this.rule.message;
+        if (message == null) {
+            message = this.rule.description;
+        }
+        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);
+        }}">view docs</a>
+            <sl-input @sl-change=${this.updateName} id="name" ?disabled="${!this.custom}" size="small"
+                      class="label-on-left" label="ID"
+                      value="${this.rule.id}"></sl-input>
+            <sl-textarea id="description" @sl-change="${this.updateDescription}" size="small" class="label-on-left"
+                         label="Description" help-text="What does this rule do"
+                         value="${this.rule.description}"></sl-textarea>
+            <sl-textarea id="message" @sl-change="${this.updateMessage}" size="small" class="label-on-left"
+                         label="Message"
+                         help-text="What should the doctor say when this rule is violated?"
+                         value="${message}"></sl-textarea>
+            <sl-input id="json-path" @sl-change="${this.updateJsonPath}" size="small" class="label-on-left"
+                      label="JSON Path"
+                      help-text="JSON Path expression to locate items" value="${this.rule.given}"></sl-input>
+
+            <section class="checkbox">
+                <label class="checkbox-label">Version</label>
+                <sl-checkbox id="oas2" size="small" ?checked=${this.checkFormat('oas2')}
+                             @sl-change="${this.updateFormats}">Swagger (2.0)
+                </sl-checkbox>
+                <sl-checkbox id="oas3" size="small" ?checked=${this.checkFormat('oas3')}
+                             @sl-change="${this.updateFormats}">OpenAPI 3.0
+                </sl-checkbox>
+                <sl-checkbox id="oas3_1" size="small" ?checked=${this.checkFormat('oas3_1')}
+                             @sl-change="${this.updateFormats}">OpenAPI 3.1
+                </sl-checkbox>
+            </section>
+
+            <section class="checkbox">
+                <label class="checkbox-label"></label>
+                <sl-checkbox id="resolved" @sl-change="${this.updateResolved}" size="small"
+                             ?checked=${this.rule.resolved}>Resolve References?
+                </sl-checkbox>
+            </section>
+
+            <sl-select id="severity" @sl-change="${this.updateSeverity}" class="label-on-left" label="Severity"
+                       size="small"
+                       value=${this.rule.severity}>
+                <sl-option value="error">
+                    <sl-icon name="x-square" class="error"></sl-icon>
+                    Error
+                </sl-option>
+                <sl-option value="warn">
+                    <sl-icon name="exclamation-triangle" class="warning"></sl-icon>
+                    Warning
+                </sl-option>
+                <sl-option value="info">
+                    <sl-icon name="info-square" class="info"></sl-icon>
+                    Info
+                </sl-option>
+            </sl-select>
+
+            <sl-select id="category" @sl-change="${this.updateCategory}" class="label-on-left" label="Category"
+                       size="small"
+                       value="${this.rule.category?.id}">
+                <sl-option value="schemas">Schemas</sl-option>
+                <sl-option value="examples">Examples</sl-option>
+                <sl-option value="operations">Operations</sl-option>
+                <sl-option value="information">Information</sl-option>
+                <sl-option value="descriptions">Descriptions</sl-option>
+                <sl-option value="security">Security</sl-option>
+                <sl-option value="tags">Tags</sl-option>
+                <sl-option value="validation">Validation</sl-option>
+                <sl-option value="OWASP">OWASP</sl-option>
+            </sl-select>
+
+            <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>
+                        Add
+                    </sl-button>
+                </label>
+                <div class="actions">
+                    ${this.actions}
+            </section>
+        `;
+    }
+};
+RuleInputComponent.styles = [linksCss, buttonCss, ruleCss, formsCss];
+__decorate([
+    state()
+], RuleInputComponent.prototype, "rule", void 0);
+__decorate([
+    query('sl-textarea#description')
+], RuleInputComponent.prototype, "description", void 0);
+__decorate([
+    query('sl-textarea#message')
+], RuleInputComponent.prototype, "message", void 0);
+__decorate([
+    query('sl-input#json-path')
+], RuleInputComponent.prototype, "jsonPath", void 0);
+__decorate([
+    query('sl-input#name')
+], RuleInputComponent.prototype, "name", void 0);
+__decorate([
+    query('sl-checkbox#oas2')
+], RuleInputComponent.prototype, "oas2Check", void 0);
+__decorate([
+    query('sl-checkbox#oas3')
+], RuleInputComponent.prototype, "oas3Check", void 0);
+__decorate([
+    query('sl-checkbox#oas3_1')
+], RuleInputComponent.prototype, "oas31Check", void 0);
+__decorate([
+    query('sl-checkbox#resolved')
+], RuleInputComponent.prototype, "resolved", void 0);
+__decorate([
+    query('sl-select#severity')
+], RuleInputComponent.prototype, "severity", void 0);
+__decorate([
+    query('sl-select#category')
+], RuleInputComponent.prototype, "category", void 0);
+__decorate([
+    property({ type: Boolean })
+], RuleInputComponent.prototype, "custom", void 0);
+__decorate([
+    property({ type: Boolean })
+], RuleInputComponent.prototype, "error", void 0);
+__decorate([
+    property()
+], RuleInputComponent.prototype, "ruleErrorFunction", void 0);
+RuleInputComponent = __decorate([
+    customElement('pb33f-rule-input')
+], RuleInputComponent);
+export { RuleInputComponent };