@pb33f/cowboy-components 0.3.2 → 0.3.4

package/dist/components/the-doctor/the-doctor.css.js

@@ -24,11 +24,11 @@ export default css `
         overflow: hidden;
         width: 100%;
     }
-    
+
     #manager-controls::part(nav) {
-        max-width: 96%;        
+        max-width: 96%;
     }
-    
+
     .problems-data {
         height: min-content;
         max-height: calc(100vh - 50px);
@@ -50,7 +50,7 @@ export default css `
 
 
     sl-split-panel {
-        width:100%;
+        width: 100%;
         height: 100%;
         --divider-width: 2px;
     }
@@ -79,13 +79,13 @@ export default css `
         background-color: var(--primary-color);
         color: var(--background-color);
     }
-    
+
 
     .unavailable {
         opacity: 0.4;
         transition: all 0.5s;
     }
-    
+
     .model-tree {
         height: calc(100vh - 95px);
         overflow-x: auto;
@@ -106,8 +106,8 @@ export default css `
         background: var(--secondary-color-lowalpha);
         padding: var(--global-padding);
     }
-    
-    
+
+
     .split-panel {
         --min: 550px;
         --max: calc(100vw - 550px);
@@ -118,10 +118,10 @@ export default css `
         --max: 550px;
         max-width: 100vw;
     }
-    
+
     .explorer-panel {
         height: calc(100vh - 85px);
-        width: 100%; 
+        width: 100%;
         overflow-y: auto;
     }
 
@@ -139,8 +139,8 @@ export default css `
         background: var(--secondary-color-lowalpha);
         padding: var(--global-padding);
     }
-    
-    
+
+
     .overlay {
         width: 100%;
         opacity: 1;
@@ -159,27 +159,27 @@ export default css `
         margin-left: 10px;
         margin-right: 10px;
     }
-    
+
     h3.loading {
         margin-top: 20px;
         padding-top: 0;
         text-align: center;
     }
-    
-   .tab-panel {
-       height: calc(100vh - 110px);
-   }
 
-   sl-tab-panel.tab-panel::part(base) {
+    .tab-panel {
+        height: calc(100vh - 110px);
+    }
+
+    sl-tab-panel.tab-panel::part(base) {
         height: 100%;
-        padding-top:5px;
+        padding-top: 5px;
     }
-    
+
     sl-tab-panel::part(base) {
         height: 100%;
-        padding-top:5px;
+        padding-top: 5px;
     }
-    
+
     sl-switch::part(label) {
         font-family: var(--font-stack), monospace;
     }
@@ -208,7 +208,7 @@ export default css `
         top: 3px;
         right: 25px;
     }
-    
+
     .spinner-draw-closed {
         top: 35px;
         right: 8px;
@@ -230,11 +230,11 @@ export default css `
         display: flex;
         margin-bottom: 20px;
     }
-    
+
     .right {
         text-align: right;
     }
-    
+
     .export-block {
         width: 50%;
     }
@@ -243,7 +243,7 @@ export default css `
         margin-left: 20px;
         padding-top: 3px;
     }
-    
+
     sl-badge::part(base) {
         width: 10px;
         padding: 0;
@@ -251,6 +251,7 @@ export default css `
         margin-top: 2px;
         height: 10px;
     }
+    
     .collapse-side {
         position: absolute;
         right: 5px;
@@ -259,8 +260,55 @@ export default css `
         color: var(--secondary-color);
         font-size: 1.4rem;
     }
+
     sl-icon-button.collapse-side::part(base) {
         padding: 0;
     }
+
+    .controls {
+        display: flex;
+        margin-left: 10px;
+        padding-top: 2px;
+        font-size: 0.8rem;
+        height: 38px;
+        border-bottom: 1px dashed var(--secondary-color-dimmer);
+    }
+
+    .url-input {
+        width: 50%;
+    }
+    
+    .url-problem {
+        padding: 50px;
+        display: none;
+    }
+    
+    #url-spinner {
+        padding: 5px 50px 5px 50px;
+    }
+    
+    .main-view {
+       position: relative;
+        width: 100%;
+        height: 100%;
+    }
+
+    sl-button.url-input-button::part(base) {
+        margin-top: 0;
+        margin-left: 10px;
+    }
+    
+    .editor-url-overlay {
+        position: absolute;
+        height: calc(100% - 5px); 
+        width: 100%;
+        left: 0;
+        top: 0;
+        z-index: 3;
+        display: none;
+        backdrop-filter: blur(2px);
+        -webkit-backdrop-filter: blur(2px);
+        background-color: var(--background-color-withopacity);
+    }
     
 `;

package/dist/components/the-doctor/the-doctor.d.ts

@@ -10,7 +10,8 @@ import '@shoelace-style/shoelace/dist/components/avatar/avatar.js';
 import { LitElement } from "lit";
 import { AddToastEvent, EditorUpdatedEvent, ProblemRuleFilterChangedEvent, RulesetSavedEvent, RuleClickedEvent, NodeClickedEvent, NodeReferenceEvent, ExplorerEqualizerChangedEvent } from "../../events/doctor.js";
 import { ProblemDrawerEvent } from "../problem-list/details-drawer.js";
-import { SlDialog, SlIcon, SlRadioGroup, SlSplitPanel, SlTab, SlTabGroup } from "@shoelace-style/shoelace";
+import { SlButton, SlDialog, SlIcon, SlInput, SlRadioGroup, SlSplitPanel, SlTab, SlTabGroup } from "@shoelace-style/shoelace";
+import { PlatformError } from "../../model/errors.js";
 import { AttentionBox } from "../attention-box/attention-box.js";
 import { Toast } from "../../model/toast.js";
 import SlIconButton from "@shoelace-style/shoelace/dist/components/icon-button/icon-button.js";
@@ -18,6 +19,7 @@ import { Node } from "../../model/graph.js";
 import { ModelTree } from "../model-tree/tree.js";
 import { ExplorerComponent } from "../visualizer/explorer.js";
 import { RenderedNodeComponent } from "../model-renderer/rendered-node.js";
+import { BusCallback, CommandResponse } from "@pb33f/ranch";
 export declare const GraphBag = "pb33f-doctor-graph";
 export declare const DoctorDocumentBag = "pb33f-doctor-editor";
 export declare const HowToFixBag = "pb33f-doctor-howtofix";
@@ -40,6 +42,7 @@ export declare class TheDoctor extends LitElement {
     overviewPanel: SlTab;
     problemsPanel: SlTab;
     viewerPanel: SlTab;
+    explorerPanel: SlTab;
     controlTabGroup: SlTabGroup;
     editorTabGroup: SlTabGroup;
     welcomeBox: AttentionBox;
@@ -47,6 +50,8 @@ export declare class TheDoctor extends LitElement {
     downloadRulesetLink: HTMLAnchorElement;
     loadingOverlay: SlDialog;
     problemsDataDiv: HTMLDivElement;
+    urlInputButton: SlButton;
+    urlInput: SlInput;
     private unavailable;
     doctorEndpoint: string;
     exportRulesetDialog: SlDialog;
@@ -56,6 +61,7 @@ export declare class TheDoctor extends LitElement {
     private rulesetPulse;
     explorerVisible: boolean;
     explorerBooted: boolean;
+    activeURL: string;
     private readonly errorBanner;
     private bagManager;
     private readonly editor;
@@ -107,8 +113,23 @@ export declare class TheDoctor extends LitElement {
     filteredNodes: Map<string, Node>;
     renderedNode: RenderedNodeComponent;
     activeNode: Node;
+    private readonly bus;
+    private readonly specStreamChannel;
+    private readonly doctorServiceChannel;
+    private specChannelSubscription;
+    private doctorChannelSubscription;
+    private brokerConnectionId;
+    private readonly busPort;
+    private readonly busHost;
+    private readonly busVersion;
+    private useTLS;
     readonly nodeLimit: number;
     constructor(doctorEndpoint?: string);
+    whoAmI(): void;
+    protected connectToBroker(): void;
+    addClickTrack(node: Node): void;
+    doctorServiceHandler(): BusCallback<CommandResponse>;
+    specStreamHandler(): BusCallback<CommandResponse>;
     filterTreeModel(event: CustomEvent<ExplorerEqualizerChangedEvent>): void;
     explorerReferenceClicked(evt: CustomEvent<NodeReferenceEvent>): void;
     modelTreeNodeClicked(evt: CustomEvent<NodeClickedEvent>): void;
@@ -149,5 +170,14 @@ export declare class TheDoctor extends LitElement {
     toggleExplorer(): void;
     closeExplorer(): void;
     render(): import("lit-html").TemplateResult<1>;
+    fetchUrl(): void;
+    urlOverlay: HTMLElement;
+    urlProblem: HTMLElement;
+    urlSpinner: HTMLDivElement;
+    urlErrorCode: number;
+    urlErrorMessage: string;
+    hideUrlError(): void;
+    showUrlError(e: PlatformError): void;
+    validateUrl(evt: KeyboardEvent): void;
     ungrabExplorer(): void;
 }