@pb33f/cowboy-components 0.7.8 → 0.7.9

package/dist/model/formable.js

@@ -0,0 +1,542 @@
+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 { LitElement, html } from "lit";
+import { property, state } from "lit/decorators.js";
+import buttonCss from "../css/button.css.js";
+import hrCss from "../css/hr.css.js";
+import formsCss from "../css/forms.css.js";
+import { FieldType, RenderType } from "./form-types.js";
+import { FormDirtyEvent, FormValidEvent, FormInvalidEvent } from "../events/doctor.js";
+import { AttentionType } from "../components/attention-box/attention-box.js";
+import spinnerCss from "../css/spinner.css.js";
+// this is AI generated code.
+export class Formable extends LitElement {
+    constructor(doc) {
+        super();
+        this.model = {};
+        this.formData = {};
+        this.originalData = {};
+        this.isDirty = false;
+        this.errors = [];
+        this.hints = [];
+        this.validationErrors = new Map();
+        this.topError = null;
+        this.loadingMessage = null;
+        this.isLoading = false;
+        this.onFormSubmit = null;
+        this.autoFocus = false;
+        if (doc) {
+            this.doc = doc;
+        }
+    }
+    setHints(hints) {
+        this.hints = hints;
+        this.requestUpdate();
+    }
+    renderErrors(errors) {
+        this.errors = errors;
+        this.validationErrors.clear();
+        errors.forEach(error => {
+            this.validationErrors.set(error.key, error.message);
+        });
+        this.requestUpdate();
+        this.dispatchEvent(new CustomEvent(FormInvalidEvent, {
+            bubbles: true,
+            composed: true,
+            detail: { errors }
+        }));
+    }
+    clearErrors() {
+        this.errors = [];
+        this.validationErrors.clear();
+        this.requestUpdate();
+        this.dispatchEvent(new CustomEvent(FormValidEvent, {
+            bubbles: true,
+            composed: true
+        }));
+    }
+    setTopError(error) {
+        this.topError = error;
+        this.requestUpdate();
+    }
+    clearTopError() {
+        this.topError = null;
+        this.requestUpdate();
+    }
+    setLoading(message) {
+        this.loadingMessage = message;
+        this.isLoading = true;
+        this.requestUpdate();
+    }
+    notLoading() {
+        this.loadingMessage = null;
+        this.isLoading = false;
+        this.requestUpdate();
+    }
+    renderForm() {
+        return { ...this.formData };
+    }
+    wipeModel(customDefaults) {
+        if (!this.model || typeof this.model !== 'object') {
+            return;
+        }
+        // Create a new model with default values based on the original types
+        const wipedModel = {};
+        Object.keys(this.model).forEach(key => {
+            const hint = this.getHintForKey(key);
+            // Skip ignored fields completely - don't include them in the wiped model
+            if (hint?.renderType === RenderType.Ignored) {
+                return;
+            }
+            // Check if custom default is provided for this key
+            if (customDefaults && customDefaults.hasOwnProperty(key)) {
+                wipedModel[key] = customDefaults[key];
+                return;
+            }
+            const value = this.model[key];
+            const fieldType = this.getFieldType(value);
+            switch (fieldType) {
+                case FieldType.Text:
+                    wipedModel[key] = '';
+                    break;
+                case FieldType.Number:
+                    wipedModel[key] = 0;
+                    break;
+                case FieldType.Boolean:
+                    wipedModel[key] = false;
+                    break;
+                case FieldType.Array:
+                    // Keep the array structure but reset selection to first item
+                    wipedModel[key] = Array.isArray(value) ? value : [];
+                    break;
+                default:
+                    wipedModel[key] = '';
+                    break;
+            }
+        });
+        // Update both model and form data properly
+        this.model = wipedModel;
+        this.formData = { ...wipedModel };
+        this.originalData = { ...wipedModel };
+        this.isDirty = false;
+        // Clear any errors
+        this.clearErrors();
+        this.clearTopError();
+        // Request update to re-render the form
+        this.requestUpdate();
+    }
+    renderCancelButton(onClick) {
+        return html `
+            <sl-button class="close-button" ?disabled="${this.isLoading}" @click="${onClick || (() => { })}">
+                Cancel
+            </sl-button>
+        `;
+    }
+    renderActionButton(label, onClick) {
+        // Store the submit handler for keyboard navigation
+        if (onClick) {
+            this.onFormSubmit = onClick;
+        }
+        return html `
+            <sl-button 
+                variant="default" 
+                class="button-primary ${this.isLoading ? 'loading' : ''}" 
+                style="float: right" 
+                ?disabled="${this.isLoading}"
+                @click="${onClick || (() => { })}"
+            >
+                ${label}
+            </sl-button>
+        `;
+    }
+    setFormSubmitHandler(handler) {
+        this.onFormSubmit = handler;
+    }
+    initializeFormData() {
+        if (this.model && Object.keys(this.formData).length === 0) {
+            this.formData = { ...this.model };
+            this.originalData = { ...this.model };
+        }
+    }
+    getFieldType(value) {
+        if (value === null || value === undefined)
+            return FieldType.Text;
+        if (typeof value === 'boolean')
+            return FieldType.Boolean;
+        if (typeof value === 'number')
+            return FieldType.Number;
+        if (Array.isArray(value))
+            return FieldType.Array;
+        if (typeof value === 'string')
+            return FieldType.Text;
+        return FieldType.Text;
+    }
+    getHintForKey(key) {
+        return this.hints.find(hint => hint.key === key);
+    }
+    handleFieldChange(key, value) {
+        const originalValue = this.originalData[key];
+        this.formData[key] = value;
+        const wasClean = !this.isDirty;
+        this.isDirty = Object.keys(this.formData).some(k => this.formData[k] !== this.originalData[k]);
+        if (wasClean && this.isDirty) {
+            this.dispatchEvent(new CustomEvent(FormDirtyEvent, {
+                bubbles: true,
+                composed: true,
+                detail: { key, value, originalValue }
+            }));
+        }
+        this.requestUpdate();
+    }
+    renderHiddenField(key, value) {
+        // Hidden fields don't render any visible UI but are included in form data
+        // Initialize the hidden field value in form data
+        if (this.formData[key] === undefined) {
+            this.formData[key] = value;
+        }
+        return html ``;
+    }
+    renderTextField(key, value, hint) {
+        const hasError = this.validationErrors.has(key);
+        const errorMessage = this.validationErrors.get(key);
+        const helpText = hasError ? errorMessage : (hint?.helpText || '');
+        if (hint?.renderType === RenderType.Textarea) {
+            return html `
+                <sl-textarea 
+                    class="label-on-left ${hasError ? 'error' : ''}"
+                    label="${this.formatLabel(key)}"
+                    value="${this.formData[key] !== undefined ? this.formData[key] : (value || '')}"
+                    placeholder="${hint.placeholder || ''}"
+                    help-text="${helpText}"
+                    ?required="${hint.required || false}"
+                    ?disabled="${this.isLoading}"
+                    ?autofocus="${this.isFirstVisibleField(key)}"
+                    @sl-change="${(e) => this.handleFieldChange(key, e.target.value)}"
+                    @keydown="${this.handleKeyDown}"
+                ></sl-textarea>
+            `;
+        }
+        return html `
+            <sl-input 
+                class="label-on-left ${hasError ? 'error' : ''}"
+                label="${this.formatLabel(key)}"
+                value="${this.formData[key] !== undefined ? this.formData[key] : (value || '')}"
+                placeholder="${hint?.placeholder || ''}"
+                help-text="${helpText}"
+                ?required="${hint?.required || false}"
+                ?disabled="${this.isLoading}"
+                ?autofocus="${this.isFirstVisibleField(key)}"
+                @sl-change="${(e) => this.handleFieldChange(key, e.target.value)}"
+                @keydown="${this.handleKeyDown}"
+            ></sl-input>
+        `;
+    }
+    renderNumberField(key, value, hint) {
+        const hasError = this.validationErrors.has(key);
+        const errorMessage = this.validationErrors.get(key);
+        const helpText = hasError ? errorMessage : (hint?.helpText || '');
+        if (hint?.renderType === RenderType.Slider) {
+            return html `
+                <sl-range 
+                    class="label-on-left ${hasError ? 'error' : ''}"
+                    label="${this.formatLabel(key)}"
+                    value="${value || 0}"
+                    min="${hint.min || 0}"
+                    max="${hint.max || 100}"
+                    step="${hint.step || 1}"
+                    help-text="${helpText}"
+                    ?disabled="${this.isLoading}"
+                    ?autofocus="${this.isFirstVisibleField(key)}"
+                    @sl-change="${(e) => this.handleFieldChange(key, e.target.value)}"
+                    @keydown="${this.handleKeyDown}"
+                ></sl-range>
+            `;
+        }
+        return html `
+            <sl-input 
+                class="label-on-left ${hasError ? 'error' : ''}"
+                type="number"
+                label="${this.formatLabel(key)}"
+                value="${this.formData[key] !== undefined ? this.formData[key] : (value || 0)}"
+                style="width: 100px;"
+                min="${hint?.min || ''}"
+                max="${hint?.max || ''}"
+                step="${hint?.step || ''}"
+                help-text="${helpText}"
+                ?required="${hint?.required || false}"
+                ?disabled="${this.isLoading}"
+                ?autofocus="${this.isFirstVisibleField(key)}"
+                @sl-change="${(e) => this.handleFieldChange(key, Number(e.target.value))}"
+                @keydown="${this.handleKeyDown}"
+            ></sl-input>
+        `;
+    }
+    renderBooleanField(key, value, hint) {
+        const hasError = this.validationErrors.has(key);
+        const errorMessage = this.validationErrors.get(key);
+        const helpText = hasError ? errorMessage : (hint?.helpText || '');
+        if (hint?.renderType === RenderType.Switch) {
+            return html `
+                <sl-switch 
+                    class="label-on-left ${hasError ? 'error' : ''}"
+                    ?checked="${this.formData[key] !== undefined ? this.formData[key] : (value || false)}"
+                    ?disabled="${this.isLoading}"
+                    ?autofocus="${this.isFirstVisibleField(key)}"
+                    @sl-change="${(e) => this.handleFieldChange(key, e.target.checked)}"
+                    @keydown="${this.handleKeyDown}"
+                >
+                    ${this.formatLabel(key)}
+                </sl-switch>
+                ${hasError ? html `<div style="color: var(--error-color); font-size: 0.8rem; margin-top: 5px;">${errorMessage}</div>` : ''}
+            `;
+        }
+        return html `
+            <section class="checkbox">
+                <label class="checkbox-label">${this.formatLabel(key)}</label>
+                <sl-checkbox 
+                    class="${hasError ? 'error' : ''}"
+                    ?checked="${this.formData[key] !== undefined ? this.formData[key] : (value || false)}"
+                    ?disabled="${this.isLoading}"
+                    ?autofocus="${this.isFirstVisibleField(key)}"
+                    @sl-change="${(e) => this.handleFieldChange(key, e.target.checked)}"
+                    @keydown="${this.handleKeyDown}"
+                >
+                    ${helpText}
+                </sl-checkbox>
+            </section>
+        `;
+    }
+    renderArrayField(key, value, hint) {
+        const hasError = this.validationErrors.has(key);
+        const errorMessage = this.validationErrors.get(key);
+        const currentValue = this.formData[key] || value[0];
+        const helpText = hasError ? errorMessage : (hint?.helpText || '');
+        if (hint?.renderType === RenderType.Radio) {
+            return html `
+                <sl-radio-group 
+                    class="label-on-left ${hasError ? 'error' : ''}"
+                    label="${this.formatLabel(key)}"
+                    value="${currentValue}"
+                    help-text="${helpText}"
+                    ?disabled="${this.isLoading}"
+                    ?autofocus="${this.isFirstVisibleField(key)}"
+                    @sl-change="${(e) => this.handleFieldChange(key, e.target.value)}"
+                    @keydown="${this.handleKeyDown}"
+                >
+                    ${value.map(option => html `
+                        <sl-radio value="${option}" ?disabled="${this.isLoading}">${option}</sl-radio>
+                    `)}
+                </sl-radio-group>
+            `;
+        }
+        return html `
+            <sl-select 
+                class="label-on-left ${hasError ? 'error' : ''}"
+                label="${this.formatLabel(key)}"
+                value="${currentValue}"
+                placeholder="${hint?.placeholder || 'Select an option'}"
+                help-text="${helpText}"
+                ?disabled="${this.isLoading}"
+                ?autofocus="${this.isFirstVisibleField(key)}"
+                @sl-change="${(e) => this.handleFieldChange(key, e.target.value)}"
+                @keydown="${this.handleKeyDown}"
+            >
+                ${value.map(option => html `
+                    <sl-option value="${option}">${option}</sl-option>
+                `)}
+            </sl-select>
+        `;
+    }
+    formatLabel(key) {
+        return key.charAt(0).toUpperCase() + key.slice(1).replace(/([A-Z])/g, ' $1');
+    }
+    handleKeyDown(event) {
+        if (event.key === 'Enter' && !event.shiftKey) {
+            const target = event.target;
+            // Don't navigate away from textareas (allow normal Enter behavior)
+            if (target.tagName.toLowerCase() === 'sl-textarea') {
+                return;
+            }
+            event.preventDefault();
+            // Capture the current field's value and trigger navigation
+            this.handleFieldNavigation(target);
+        }
+    }
+    handleFieldNavigation(currentElement) {
+        // First, capture the current field's value immediately
+        this.captureCurrentFieldValue(currentElement);
+        // Then proceed with navigation based on current state
+        const formInputs = this.getFormInputElements();
+        const currentIndex = formInputs.indexOf(currentElement);
+        if (currentIndex === -1)
+            return;
+        if (currentIndex < formInputs.length - 1) {
+            // Move to next field
+            const nextInput = formInputs[currentIndex + 1];
+            nextInput.focus();
+        }
+        else {
+            // Last field - trigger form submission
+            this.triggerFormSubmission();
+        }
+    }
+    captureCurrentFieldValue(element) {
+        // Find the corresponding model key for this element
+        const formInputs = this.getFormInputElements();
+        const elementIndex = formInputs.indexOf(element);
+        if (elementIndex === -1)
+            return;
+        // Get the model keys in the same order as rendered
+        const modelKeys = Object.keys(this.model).filter(key => {
+            const hint = this.getHintForKey(key);
+            return hint?.renderType !== RenderType.Hidden && hint?.renderType !== RenderType.Ignored;
+        });
+        if (elementIndex < modelKeys.length) {
+            const key = modelKeys[elementIndex];
+            let value;
+            // Get value based on element type
+            if (element.tagName.toLowerCase() === 'sl-checkbox' ||
+                element.tagName.toLowerCase() === 'sl-switch') {
+                value = element.checked;
+            }
+            else if (element.tagName.toLowerCase() === 'sl-input' &&
+                element.type === 'number') {
+                value = Number(element.value);
+            }
+            else {
+                value = element.value;
+            }
+            // Update form data immediately and synchronously
+            this.formData[key] = value;
+            // Trigger dirty state event
+            this.handleFieldChange(key, value);
+        }
+    }
+    triggerFormSubmission() {
+        if (this.onFormSubmit && !this.isLoading) {
+            // Use updateComplete promise to ensure all reactive properties are synchronized
+            // before submitting, leveraging Lit's update lifecycle
+            this.updateComplete.then(() => {
+                if (this.onFormSubmit && !this.isLoading) {
+                    this.onFormSubmit();
+                }
+            });
+        }
+    }
+    getFormInputElements() {
+        if (!this.shadowRoot)
+            return [];
+        const selector = 'sl-input, sl-textarea, sl-select, sl-checkbox, sl-radio-group, sl-range, sl-switch';
+        const elements = Array.from(this.shadowRoot.querySelectorAll(selector));
+        // Filter out disabled elements and hidden fields
+        return elements.filter(el => {
+            return !el.hasAttribute('disabled') &&
+                el.offsetParent !== null && // visible
+                !el.closest('.form-loading-message, .form-top-error'); // not in message areas
+        });
+    }
+    isFirstVisibleField(key) {
+        if (!this.autoFocus)
+            return false;
+        // Get visible field keys in order (exclude hidden and ignored fields)
+        const visibleKeys = Object.keys(this.model).filter(k => {
+            const hint = this.getHintForKey(k);
+            return hint?.renderType !== RenderType.Hidden && hint?.renderType !== RenderType.Ignored;
+        });
+        return visibleKeys.length > 0 && visibleKeys[0] === key;
+    }
+    renderModel() {
+        if (!this.model || Object.keys(this.model).length === 0) {
+            return html `<div class="no-model">No model data available</div>`;
+        }
+        this.initializeFormData();
+        const topErrorDisplay = this.topError ? html `
+            <section class="form-top-error">
+                <pb33f-attention-box type="${AttentionType.Error}">
+                    ${this.topError.message}
+                </pb33f-attention-box>
+            </section>
+        ` : '';
+        const loadingDisplay = this.isLoading && this.loadingMessage ? html `
+            <section class="form-loading-message">
+                <pb33f-attention-box type="${AttentionType.Info}">
+                    ${this.loadingMessage}  
+                    <sl-icon name="circle-half" class="spinner-icon-small"></sl-icon>
+                </pb33f-attention-box>
+            </section>
+        ` : '';
+        return html `
+            <div class="dynamic-form ${this.isLoading ? 'loading' : ''}">
+                ${loadingDisplay}
+                ${topErrorDisplay}
+                <div class="form-fields">
+                    ${Object.keys(this.model).map(key => {
+            const value = this.model[key];
+            const fieldType = this.getFieldType(value);
+            const hint = this.getHintForKey(key);
+            // Handle ignored fields - completely skip them
+            if (hint?.renderType === RenderType.Ignored) {
+                return html ``;
+            }
+            // Handle hidden fields
+            if (hint?.renderType === RenderType.Hidden) {
+                return this.renderHiddenField(key, value);
+            }
+            switch (fieldType) {
+                case FieldType.Boolean:
+                    return this.renderBooleanField(key, value, hint);
+                case FieldType.Number:
+                    return this.renderNumberField(key, value, hint);
+                case FieldType.Array:
+                    return this.renderArrayField(key, value, hint);
+                case FieldType.Text:
+                default:
+                    return this.renderTextField(key, value, hint);
+            }
+        })}
+                </div>
+            </div>
+        `;
+    }
+}
+Formable.styles = [formsCss, buttonCss, hrCss, spinnerCss];
+__decorate([
+    property({ type: Object })
+], Formable.prototype, "model", void 0);
+__decorate([
+    state()
+], Formable.prototype, "formData", void 0);
+__decorate([
+    state()
+], Formable.prototype, "originalData", void 0);
+__decorate([
+    state()
+], Formable.prototype, "isDirty", void 0);
+__decorate([
+    state()
+], Formable.prototype, "errors", void 0);
+__decorate([
+    state()
+], Formable.prototype, "hints", void 0);
+__decorate([
+    state()
+], Formable.prototype, "validationErrors", void 0);
+__decorate([
+    state()
+], Formable.prototype, "topError", void 0);
+__decorate([
+    state()
+], Formable.prototype, "loadingMessage", void 0);
+__decorate([
+    state()
+], Formable.prototype, "isLoading", void 0);
+__decorate([
+    state()
+], Formable.prototype, "onFormSubmit", void 0);
+__decorate([
+    property({ type: Boolean })
+], Formable.prototype, "autoFocus", void 0);

package/dist/model/workspace.d.ts

@@ -0,0 +1,6 @@
+export interface Workspace {
+    name: string;
+    workspaceId?: string;
+    active: boolean;
+    default?: boolean;
+}

package/dist/model/workspace.js

@@ -0,0 +1 @@
+export {};