@pb33f/cowboy-components 0.7.7 → 0.7.9

package/dist/css/badges.css.d.ts

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

package/dist/css/badges.css.js

@@ -0,0 +1,12 @@
+import { css } from "lit";
+export default css `
+    sl-badge::part(base) {
+        border-radius: 0;
+    }
+    
+    sl-badge {
+        vertical-align: text-top;
+    }
+    
+    
+`;

package/dist/css/button.css.js

@@ -10,7 +10,7 @@ export default css `
         margin-top: 5px;
     }
 
-    sl-button.close-button::part(base){
+    sl-button.close-button::part(base),sl-button.cancel-button::part(base){
         border: 1px solid var(--font-color-sub2);
         background-color: var(--background-color);
         color: var(--font-color-sub2);

package/dist/css/forms.css.js

@@ -58,7 +58,12 @@ export default css `
         font-family: var(--font-stack), monospace;
         font-size: 0.8rem;
     }
-
+    
+    sl-input::part(form-control-help-text) {
+        font-size: 0.8rem;
+        font-family: var(--font-stack-italic), sans-serif;  
+    }
+    
     sl-textarea::part(base) {
         border-radius: 0;
         font-family: var(--font-stack), monospace;
@@ -118,6 +123,127 @@ export default css `
         font-family: var(--font-stack), monospace;
         font-size: 0.8rem;
     }
+
+    .form-controls {
+        padding-top: 10px;
+        padding-bottom: 10px;
+    }
+
+    /* Error state styling */
+    .label-on-left.error::part(form-control-label) {
+        color: var(--error-color);
+    }
+
+    .label-on-left.error::part(form-control-help-text) {
+        color: var(--error-color);
+    }
+
+    sl-input.error::part(base) {
+        border-color: var(--error-color);
+    }
+
+    sl-input.error::part(form-control-label) {
+        color: var(--error-color);
+    }
+
+    sl-input.error::part(form-control-help-text) {
+        color: var(--error-color);
+    }
+
+    sl-textarea.error::part(base) {
+        border-color: var(--error-color);
+    }
+
+    sl-textarea.error::part(form-control-label) {
+        color: var(--error-color);
+    }
+
+    sl-textarea.error::part(form-control-help-text) {
+        color: var(--error-color);
+    }
+
+    sl-select.error::part(combobox) {
+        border-color: var(--error-color);
+    }
+
+    sl-select.error::part(form-control-label) {
+        color: var(--error-color);
+    }
+
+    sl-select.error::part(form-control-help-text) {
+        color: var(--error-color);
+    }
+
+    sl-range.error::part(form-control-label) {
+        color: var(--error-color);
+    }
+
+    sl-range.error::part(form-control-help-text) {
+        color: var(--error-color);
+    }
+
+    sl-radio-group.error::part(form-control-label) {
+        color: var(--error-color);
+    }
+
+    sl-radio-group.error::part(form-control-help-text) {
+        color: var(--error-color);
+    }
+
+    sl-checkbox.error::part(label) {
+        color: var(--error-color);
+    }
+
+    sl-switch.error {
+        color: var(--error-color);
+    }
+
+    /* Top error styling */
+    .form-top-error {
+        margin-bottom: 20px;
+    }
+
+    /* Loading state styling */
+    .form-loading-message {
+        margin-bottom: 20px;
+    }
+
+    .dynamic-form.loading {
+        position: relative;
+    }
+
+    .dynamic-form.loading .form-fields::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-color: var(--background-color-withlowopacity);
+        backdrop-filter: blur(1px);
+        z-index: 10;
+        pointer-events: all;
+    }
     
+    .form-fields {
+        position: relative;
+    }
+
+    /* Button loading state */
+    .button-primary.loading {
+        opacity: 0.6;
+        cursor: not-allowed;
+    }
+
+    .dynamic-form.loading sl-input,
+    .dynamic-form.loading sl-textarea,
+    .dynamic-form.loading sl-select,
+    .dynamic-form.loading sl-checkbox,
+    .dynamic-form.loading sl-radio-group,
+    .dynamic-form.loading sl-range,
+    .dynamic-form.loading sl-switch {
+        pointer-events: none;
+        opacity: 0.6;
+    }
 
 `;

package/dist/css/lists.css.js

@@ -4,6 +4,14 @@ export default css `
         padding-left: 20px;
     }
 
+    ul > li.secondary:before {
+        color: var(--secondary-color);
+        font-family: var(--font-stack-bold), monospace;
+        margin-right: 10px;
+        content: ">";
+    }
+    
+    
     ul > li {
         font-family: var(--font-stack-paragraph), monospace;
         font-weight: normal;

package/dist/css/pb33f-theme.css

@@ -67,6 +67,7 @@ html {
 
     --background-color: #0d1117;
     --background-color-withopacity: rgba(13, 17, 23, 0.8);
+    --background-color-withlowopacity: rgba(13, 17, 23, 0.1);
 
     --font-color: #e8e9ed;
     --font-color-sub1: #a7a7a7;

package/dist/css/spinner.css.js

@@ -26,6 +26,35 @@ export default css `
         margin-top: 20px;
     }
 
+
+    .spinner-icon {
+        display: block;
+        margin: 20px auto 0 auto;
+        width: 200px;
+        color: var(--primary-color);
+        font-size: 6rem;
+        animation: spin 2s linear infinite;
+    }
+
+    .spinner-icon-small {
+        display: inline-block;
+        color: var(--primary-color);
+        font-size: 1rem;
+        animation: spin 0.3s linear infinite;
+        vertical-align: top;
+    }
+    
+
+    @keyframes spin {
+        0% {
+            transform: rotate(0deg);
+        }
+        100% {
+            transform: rotate(360deg);
+        }
+    }
+    
+
     @keyframes spinner {
         0% {
             transform: rotate(0);

package/dist/events/doctor.d.ts

@@ -62,6 +62,16 @@ export declare const OpenSettings = "openSettings";
 export declare const OpenAuthentication = "openAuthentication";
 export declare const StartSessionFailed = "startSessionFailed";
 export declare const CreditEmpty = "creditEmpty";
+export declare const FormDirtyEvent = "formDirty";
+export declare const FormValidEvent = "formValid";
+export declare const FormInvalidEvent = "formInvalid";
+export declare const FormSubmitComplete = "formSubmitComplete";
+export declare const RefreshWorkspaces = "refreshWorkspaces";
+export declare const SwitchWorkspace = "switchWorkspace";
+export declare const DeleteWorkspace = "deleteWorkspace";
+export declare const CreateWorkspace = "createWorkspace";
+export declare const UpdateWorkspace = "updateWorkspace";
+export declare const Reboot = "reboot";
 export interface RevisionClickedEvent {
     specSummary: SpecSummary;
 }
@@ -191,3 +201,8 @@ export interface HistoryState {
     activeNode: string;
     ref: string;
 }
+export interface FormFieldChangeEvent {
+    key: string;
+    value: any;
+    originalValue: any;
+}

package/dist/events/doctor.js

@@ -54,6 +54,16 @@ export const OpenSettings = "openSettings";
 export const OpenAuthentication = "openAuthentication";
 export const StartSessionFailed = "startSessionFailed";
 export const CreditEmpty = "creditEmpty";
+export const FormDirtyEvent = 'formDirty';
+export const FormValidEvent = 'formValid';
+export const FormInvalidEvent = 'formInvalid';
+export const FormSubmitComplete = 'formSubmitComplete';
+export const RefreshWorkspaces = 'refreshWorkspaces';
+export const SwitchWorkspace = 'switchWorkspace';
+export const DeleteWorkspace = 'deleteWorkspace';
+export const CreateWorkspace = 'createWorkspace';
+export const UpdateWorkspace = 'updateWorkspace';
+export const Reboot = 'reboot';
 export var ActiveView;
 (function (ActiveView) {
     ActiveView["Problems"] = "problems";

package/dist/model/form-types.d.ts

@@ -0,0 +1,32 @@
+export declare enum FieldType {
+    Text = "text",
+    Number = "number",
+    Boolean = "boolean",
+    Array = "array"
+}
+export declare enum RenderType {
+    Text = "text",
+    Textarea = "textarea",
+    Select = "select",
+    Radio = "radio",
+    Checkbox = "checkbox",
+    Slider = "slider",
+    Switch = "switch",
+    Hidden = "hidden",
+    Ignored = "ignored"
+}
+export interface FormError {
+    key: string;
+    message: string;
+}
+export interface FormHint {
+    key: string;
+    renderType: RenderType;
+    options?: string[] | number[];
+    placeholder?: string;
+    helpText?: string;
+    required?: boolean;
+    min?: number;
+    max?: number;
+    step?: number;
+}

package/dist/model/form-types.js

@@ -0,0 +1,19 @@
+export var FieldType;
+(function (FieldType) {
+    FieldType["Text"] = "text";
+    FieldType["Number"] = "number";
+    FieldType["Boolean"] = "boolean";
+    FieldType["Array"] = "array";
+})(FieldType || (FieldType = {}));
+export var RenderType;
+(function (RenderType) {
+    RenderType["Text"] = "text";
+    RenderType["Textarea"] = "textarea";
+    RenderType["Select"] = "select";
+    RenderType["Radio"] = "radio";
+    RenderType["Checkbox"] = "checkbox";
+    RenderType["Slider"] = "slider";
+    RenderType["Switch"] = "switch";
+    RenderType["Hidden"] = "hidden";
+    RenderType["Ignored"] = "ignored";
+})(RenderType || (RenderType = {}));

package/dist/model/formable.d.ts

@@ -0,0 +1,51 @@
+import { LitElement, TemplateResult } from "lit";
+import { TheDoctor } from "../components/the-doctor/the-doctor.js";
+import { FormError, FormHint } from "./form-types.js";
+export declare class Formable extends LitElement {
+    doc: TheDoctor;
+    static styles: import("lit").CSSResult[];
+    model: any;
+    private formData;
+    private originalData;
+    private isDirty;
+    errors: FormError[];
+    hints: FormHint[];
+    validationErrors: Map<string, string>;
+    topError: FormError | null;
+    loadingMessage: string | null;
+    isLoading: boolean;
+    onFormSubmit: (() => void) | null;
+    autoFocus: boolean;
+    constructor(doc?: TheDoctor);
+    setHints(hints: FormHint[]): void;
+    renderErrors(errors: FormError[]): void;
+    clearErrors(): void;
+    setTopError(error: FormError): void;
+    clearTopError(): void;
+    setLoading(message: string): void;
+    notLoading(): void;
+    renderForm(): any;
+    wipeModel(customDefaults?: {
+        [key: string]: any;
+    }): void;
+    renderCancelButton(onClick?: () => void): TemplateResult;
+    renderActionButton(label: string, onClick?: () => void): TemplateResult;
+    setFormSubmitHandler(handler: () => void): void;
+    private initializeFormData;
+    private getFieldType;
+    private getHintForKey;
+    private handleFieldChange;
+    private renderHiddenField;
+    private renderTextField;
+    private renderNumberField;
+    private renderBooleanField;
+    private renderArrayField;
+    private formatLabel;
+    private handleKeyDown;
+    private handleFieldNavigation;
+    private captureCurrentFieldValue;
+    private triggerFormSubmission;
+    private getFormInputElements;
+    private isFirstVisibleField;
+    renderModel(): TemplateResult;
+}