@pb33f/cowboy-components 0.7.17 → 0.8.0

package/dist/components/time-vortex/tardis-control.css.js

@@ -6,16 +6,16 @@ export default css `
         --chart-color-secondary: var(--secondary-color);
         --chart-color-third: var(--tertiary-color);
         --chart-color-fourth: var(--terminal-text);
-        --chart-text-color:  var(--font-color);
+        --chart-text-color: var(--font-color);
         --chart-gridline-color: var(--font-color-sub3);
         --chart-background-color: transparent;
     }
-    
+
     .changes-container {
-       
+
         height: 100%;
     }
-    
+
     .change-navigator {
         display: flex;
         flex-direction: row;
@@ -23,31 +23,31 @@ export default css `
         margin-bottom: 5px;
         height: 100%;
     }
-    
+
     .change-tree-container {
-       
+
         height: 100%;
         width: 100%;
         overflow-y: auto;
     }
-    
-    
-    
+
     .change-list {
         width: 100%;
         height: 100%;
         flex: 2;
     }
-    
+
     em {
         font-family: var(--font-stack-italic), sans-serif;
     }
-    
+
     header {
         border-bottom: 1px solid var(--secondary-color);
         padding: 5px 5px 10px 10px;
+        text-transform: uppercase;
+        letter-spacing: 0.02em;
     }
-    
+
     strong {
         color: var(--secondary-color);
         font-family: var(--font-stack-bold), sans-serif;
@@ -66,13 +66,122 @@ export default css `
         position: relative;
     }
 
+    .component-reference {
+        color: var(--terminal-text);
+        border: none;
+        background-color: transparent;
+    }
+
+    .http-200 {
+        color: var(--font-color);
+        border-color: var(--font-color-sub2);
+        background-color: transparent;
+    }
+
+    .http-400 {
+        color: var(--warn-color);
+        border-color: var(--warn-color-lowalpha);
+        background-color: transparent;
+    }
+
+    .http-500 {
+        color: var(--error-color);
+        border-color: var(--error-color-dimmed);
+        background-color: transparent;
+    }
+
+    .reflink {
+        color: var(--terminal-text);
+        font-size: 1.1rem;
+        vertical-align: middle;
+        margin-left: 8px;
+        margin-right: 5px;
+    }
+
+    h2 {
+        font-size: 1.4rem;
+        text-transform: uppercase;
+        letter-spacing: 0.02em;
+    }
+
+    h3 {
+        font-size: 1.2rem;
+        text-transform: uppercase;
+        letter-spacing: 0.02em;
+    }
+
+    h4 {
+        font-size: 1.1rem;
+        text-transform: uppercase;
+        letter-spacing: 0.02em;
+    }
+
+    h4 > code, h3 > code {
+        font-family: var(--font-stack-bold), sans-serif;
+        color: var(--primary-color)
+    }
+    
+    h1 > code, h3 > code, h4 > code, h5 > code, h4 > pb33f-render-operation-path {
+        text-transform: none;
+    }
+
+    ul {
+        padding-left: 0;
+    }
+
+    ul > li {
+
+    }
+
+    ul > li > p {
+        display: inline;
+    }
+
+    ul > li > ul {
+        margin-top: 5px;
+        padding-left: 25px;
+    }
+
+    ul > li > ul > li > ul {
+        margin-top: 5px;
+        padding-left: 25px;
+    }
+
+
+    ul {
+        padding-left: 0;
+    }
+
+    ul > li code.code {
+        vertical-align: baseline;
+        height: 20px;
+        display: inline-block;
+    }
+
+
+    ul > li code.language-yaml {
+        border: none;
+        background: none;
+        padding: 0;
+    }
+
+
+    pre[class*="language-"] {
+        //padding: 1em;
+        //margin: .5em 0;
+        //overflow: auto;
+        border-radius: 0;
+    }
+
     .time-vortex {
         width: 100%;
         height: 100%;
         position: relative;
         padding-top: 10px;
+        background-color: var(--background-color);
+        //z-index: 11;
     }
-    
+
     .timeline-view {
         overflow-y: auto;
         height: calc(100vh - 130px);
@@ -98,13 +207,95 @@ export default css `
         text-align: center;
     }
 
+    .markdown-report {
+        overflow-y: auto;
+        font-size: 0.8rem;
+        padding: 0 20px 0 20px;
+        height: 100%;
+    }
+
+    .markdown-report::-webkit-scrollbar {
+        width: 8px;
+    }
+
+    .markdown-report::-webkit-scrollbar-track {
+        background-color: black;
+    }
+
+    .markdown-report::-webkit-scrollbar-thumb {
+        box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+        background: var(--secondary-color-lowalpha);
+        padding: var(--global-padding);
+    }
+
+
+    .report-download-controls {
+        display: flex;
+        justify-content: flex-end;
+        gap: 0.5rem;
+        padding: 5px 20px 5px 5px;
+        border-bottom: 1px dotted var(--font-color-sub3);
+    }
+
+    .report-download-controls sl-button::part(base) {
+        font-family: var(--font-stack), sans-serif;
+        border-radius: 0;
+    }
+
+    .editor {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+    }
+
+    .tab-group {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+    }
+
+    sl-tab-group::part(base) {
+        display: flex;
+        flex-direction: column;
+        height: calc(100vh - 132px);
+    }
+
+    sl-tab-group::part(body) {
+        flex: 1;
+        overflow: hidden;
+    }
+
+    sl-tab-panel {
+        height: 100%;
+        overflow: hidden;
+    }
+
+    sl-tab-panel::part(base) {
+        height: 100%;
+        overflow: hidden;
+    }
+
+    sl-tab-panel[name="report"] {
+        padding: 0;
+    }
+
+    sl-tab-panel[name="report"]::part(base) {
+        padding: 0;
+    }
+
+    .method small {
+        width: 66px;
+
+    }
 
 
     .tardis-split-panel {
-        --min: 300px;
+        --min: 100px;
         --max: calc(100vh - 400px);
         height: calc(100vh - 160px);
     }
+
     .loading {
         position: absolute;
         width: 100%;
@@ -115,4 +306,138 @@ export default css `
         z-index: 10
     }
 
+    .markdown-report table.object-change-summary {
+        width: 100%;
+        border-spacing: 0;
+    }
+
+    .markdown-report table.object-change-summary > thead > tr > th {
+        font-family: var(--font-stack-bold), sans-serif;
+        background-color: var(--table-header-background-solid);
+        text-align: left;
+        padding: 10px;
+        color: var(--font-color);
+        border-bottom: 1px dashed var(--kv-table-dividers);
+        border-top: 1px dashed var(--kv-table-header-border-top);
+        font-weight: normal;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+    }
+
+    .markdown-report table.object-change-summary > thead > tr > th:first-child {
+        background: var(--kv-table-header-background-reversed);
+        color: var(--primary-color);
+    }
+
+    .markdown-report table.object-change-summary > thead > tr > th:nth-child(2) {
+        text-align: center;
+        background-color: var(--kv-table-header-background-solid);
+    }
+
+    .markdown-report table.object-change-summary > thead > tr > th:last-child {
+        background: var(--kv-table-header-background);
+    }
+
+    .markdown-report table.object-change-summary > tbody > tr > td {
+        font-family: var(--font-stack-paragraph), monospace;
+        color: var(--font-color-sub1);
+        padding: 10px;
+        border-bottom: 1px dashed var(--secondary-color-dimmer);
+    }
+
+    .markdown-report table.object-change-summary > tbody > tr > td:first-child {
+        color: var(--primary-color);
+        border-right: 1px dashed var(--secondary-color-dimmer);
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+    }
+
+    .markdown-report table.object-change-summary > tbody > tr > td:nth-child(2),
+    .markdown-report table.object-change-summary > tbody > tr > td:last-child {
+        text-align: center;
+        border-right: 1px dashed var(--secondary-color-dimmer);
+    }
+
+    .markdown-report table.object-change-summary > tbody > tr > td:last-child {
+        border-right: none;
+    }
+
+    .markdown-report table.object-change-summary pb33f-model-icon {
+        vertical-align: middle;
+        margin-right: 5px;
+    }
+
+    .markdown-report .breaking {
+        color: var(--error-color);
+        font-family: var(--font-stack-bold), sans-serif;
+        padding: 1px 3px 1px 3px;
+        border: 1px solid var(--error-color);
+    }
+
+    .markdown-report .breaking > sl-icon {
+        vertical-align: middle;
+    }
+
+    .markdown-report .metadata-sidebar {
+        float: right;
+        width: 45%;
+        margin: 0 0 20px 10px;
+        padding: 10px;
+        border: 1px solid var(--secondary-color);
+        border-radius: 0;
+        text-transform: uppercase;
+    }
+
+    .markdown-report .metadata-sidebar table {
+        font-size: 0.85rem;
+    }
+
+    .markdown-report .report-clearfix::after {
+        content: "";
+        display: table;
+        clear: both;
+    }
+    
+    .warn-banner {
+        background-color: var(--warn-color);
+        padding: 5px;
+        color: var(--background-color);
+        font-size: 0.8rem;
+    }
+    
+    .warn-banner strong {
+        font-family: var(--font-stack-bold), sans-serif;
+        color: var(--background-color)
+    }
+
+    @keyframes blink-fade {
+        0%, 100% { opacity: 1; }
+        50% { opacity: 0.3; }
+    }
+
+    .warn-banner.critical {
+        background-color: var(--error-color);
+        animation: blink-fade 1s ease-in-out infinite;
+    }
+
+    .pr-banner {
+        background-color: var(--warn-color);
+        padding: 5px;
+        color: var(--background-color);
+        font-size: 0.8rem;
+    }
+
+    .pr-url {
+        color: var(--background-color);
+        font-family: var(--font-stack-bold), sans-serif;
+    }
+
+    @media (max-width: 1024px) {
+        .markdown-report .metadata-sidebar {
+            float: none;
+            width: 100%;
+            margin: 0 0 1rem 0;
+        }
+    }
+
 `;

package/dist/components/time-vortex/tardis-control.d.ts

@@ -6,27 +6,55 @@ import { ExplorerComponent } from "../visualizer/explorer.js";
 import { Colorful } from "../charts/chart-colors.js";
 import { TimelineView } from "./timeline-view.js";
 import { NodeClickedEvent } from "../../events/doctor.js";
-import '../charts/beefy-chart';
+import '../charts/beefy-chart.js';
 import '../charts/doughnut-chart.js';
 import './change-list-item.js';
+import { ModelTree } from "../model-tree/tree.js";
+import { TheDoctor } from "../the-doctor/the-doctor.js";
+import { SpecEditor } from "../editor/editor.js";
+import 'prismjs/components/prism-yaml';
+import 'prismjs/components/prism-json';
 export declare class TardisControl extends Colorful {
     static styles: import("lit").CSSResult[];
-    changeReport?: GraphResponse | null;
-    changeGraph?: GraphResponse;
     history?: ChangeHistory;
     chartOptions?: any;
     loading: boolean;
     changeDoughnut: DoughnutChart;
     breakingDoughnut: DoughnutChart;
+    tabGroup: any;
     specSummary: SpecSummary | null;
     explorer: ExplorerComponent;
+    modelTree: ModelTree;
     timelineView: TimelineView;
+    doc: TheDoctor;
+    diffEditor: SpecEditor;
+    markdownReport: string;
+    private mdDownloadLoading;
+    private _highlightTimeout?;
+    private countdownController?;
+    private boundExplorerNodeClicked;
+    private _changeLabels;
+    private _breakingLabels;
+    private _changeDataset;
+    private _breakingDataset;
+    private _lastSpecSummaryId;
     constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private handleEphemeralExpired;
+    firstUpdated(): void;
+    updated(changedProperties: Map<string, unknown>): void;
     explorerNodeClicked(evt: CustomEvent<NodeClickedEvent>): void;
+    highlightCodeBlocks(): void;
+    private downloadFile;
+    private downloadHtmlReport;
+    private downloadMarkdownReport;
     fetchHistory(): void;
+    private updateChartData;
     renderSummaryForMultiChange(): TemplateResult;
     render(): TemplateResult<1>;
     showSummaryOnly(): void;
+    showDiffTab(): void;
     set summary(summary: SpecSummary);
     handleChange(resp: GraphResponse): void;
 }