@pb33f/cowboy-components 0.6.7 → 0.7.0

package/dist/components/model-icon/model-icon.js

@@ -153,6 +153,7 @@ let ModelIconComponent = ModelIconComponent_1 = class ModelIconComponent extends
             case NodeType.VERSION:
                 return 'award';
             case NodeType.EXTENSIONS:
+            case NodeType.EXTENSION:
                 return "plug";
             case NodeType.WEBHOOK:
             case NodeType.WEBHOOKS:
@@ -181,6 +182,8 @@ let ModelIconComponent = ModelIconComponent_1 = class ModelIconComponent extends
                 return 'markdown';
             case NodeType.JAVA:
                 return 'filetype-java';
+            case NodeType.EXTERNAL_DOCS:
+                return 'journals';
             case NodeType.RB:
                 return 'filetype-rb';
             default:

package/dist/components/model-renderer/callback.js

@@ -37,7 +37,8 @@ let RenderedCallbackNodeComponent = class RenderedCallbackNodeComponent extends
             `;
         }
         return html `
-            ${callback}`;
+            ${callback}
+            ${super.renderChanges()}`;
     }
 };
 RenderedCallbackNodeComponent.styles = [sharedCss, modelSharedCss, listsCss, formattingCss];

package/dist/components/model-renderer/change.css.d.ts

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

package/dist/components/model-renderer/change.css.js

@@ -0,0 +1,254 @@
+import { css } from "lit";
+export default css `
+    .props {
+        border-top: 1px dashed var(--secondary-color);
+        padding: 5px 0 5px 0;
+        position: relative;
+    }
+
+    .orig, .new {
+        width: 100%;
+
+        word-break: break-all;
+        word-wrap: break-word;
+    }
+
+    .orig {
+        width: 95%;
+        padding: 5px 5px 0 0;
+    }
+
+    .original-value {
+        color: var(--font-color-sub1)
+    }
+
+    .new {
+        padding: 0 5px 0 0;
+        display: flex;
+    }
+
+    .new-arrow {
+        width: 35px;
+        text-align: center;
+    }
+
+    .what-changed {
+        width: 100%;
+        // display: flex;
+        font-size: 0.8rem;
+    }
+
+    .change {
+       
+        padding-bottom: 10px;
+        margin-bottom: 10px;
+    }
+    
+    .change-details {
+        width: calc(100% - 60px);
+    }
+    
+    .change-item {
+        display: flex;
+        width: 100%;
+        border-bottom: 1px dashed var(--font-color-sub3);
+        margin-bottom: 10px;
+    }
+    
+    .change-icon {
+        width: 30px; 
+        padding-left: 20px;
+
+    }
+
+    .change-title {
+        font-size: 0.9rem;
+        background-color: var(--primary-color);
+        color: var(--background-color);
+        padding: 5px;
+        font-family: var(--font-stack-bold), sans-serif;
+        margin-bottom: 20px;
+        margin-top: 20px;
+    }
+
+    .change-count {
+        border: 1px solid var(--background-color);
+        padding: 1px;
+        min-width: 20px;
+        display: inline-block;
+        color: var(--background-color);
+        text-align: center;
+        font-size: 0.8rem;
+        font-family: var(--font-stack-bold), sans-serif;
+    }
+
+    .added {
+        color: var(--terminal-text);
+        vertical-align: text-top;
+    }
+    
+    .added-icon, .removed-icon, .modified-icon{
+        font-size: 1.3rem;
+    }
+    
+
+    .removed {
+        color: var(--error-color);
+        vertical-align: text-top;
+    }
+
+    .breaking-value {
+        color: var(--error-color);
+        font-family: var(--font-stack-bold), sans-serif;
+    }
+
+    .breaking {
+        color: var(--error-color);
+        font-family: var(--font-stack-bold), sans-serif;
+        padding: 1px 3px 1px 3px;
+        border: 1px solid var(--error-color);
+    }
+
+
+    .breaking > sl-icon {
+        vertical-align: middle;
+    }
+
+    .modified {
+        color: var(--font-color-sub1);
+        vertical-align: middle;
+    }
+
+    .change-type {
+        font-family: var(--font-stack-italic), sans-serif;
+    }
+
+    .breaking-background {
+        background-color: var(--error-color-verylowalpha);
+        border: 1px dotted var(--error-color);
+        padding-top: 0;
+        padding-bottom: 0;
+        margin-bottom: 20px;
+    }
+
+    .breaking-background > div {
+        padding-left: 5px;
+    }
+
+    .breaking-background > .props {
+        border-top-color: var(--error-color);
+    }
+
+    .json-path {
+        padding-top: 10px;
+        padding-bottom: 5px;
+        border-bottom: 1px dashed var(--font-color-sub4);
+        margin-bottom: 5px;
+        word-break: break-word;
+    }
+    
+    .change-property {
+        font-family: var(--font-stack-bold), sans-serif;
+        font-size: 1rem;
+        color: var(--primary-color);
+    }
+
+    .change-arrow {
+        font-size: 1rem;
+        padding-top: 10px;
+    }
+
+    .property-container {
+        padding: 0 0 10px 0;
+        position: relative;
+    }
+
+    .breaking-background .context-container {
+        top: -1px;
+    }
+
+    .context-container {
+        position: absolute;
+        right: 10px;
+    }
+
+    .context {
+        color: var(--font-color-sub2);
+    }
+
+    .context-bold {
+        color: var(--font-color-sub1);
+        font-family: var(--font-stack-bold), sans-serif;
+    }
+
+    .change-header {
+        padding: 0 0 5px 0;
+        color: var(--font-color-sub2);
+        border-bottom: 1px dotted var(--secondary-color-dimmer);
+        margin-bottom: 5px;
+        font-family: var(--font-stack-italic), sans-serif;
+    }
+
+    .changed-value {
+        color: var(--font-color);
+        font-family: var(--font-stack-bold), sans-serif;
+    }
+
+    .changed-value > pre {
+        font-family: var(--font-stack-bold), sans-serif;
+    }
+
+
+    .new-value {
+        width: 100%;
+        padding-top: 10px;
+    }
+
+    pre {
+        white-space: pre-wrap;
+        word-wrap: break-word;
+        margin: 0;
+    }
+
+    .breaking-bar-top {
+        margin-bottom: 5px;
+    }
+
+    .breaking-bar-bottom {
+        margin-top: 5px;
+    }
+
+
+    /* Line numbers */
+
+    .monaco-editor {
+        font-family: var(--font-stack), serif !important;
+    }
+    
+    .diff-item {
+        padding: 1px 0 1px 0;
+        display: inline-block;
+    }
+    
+    .diff-insert {
+        background-color: var(--secondary-color);
+        color: var(--background-color);
+    }
+
+    .diff-delete {
+        background-color: var(--error-color-lowalpha); 
+        color: var(--font-color);
+    }
+
+    .toggle-highlight {
+      vertical-align: middle;
+    }
+
+    sl-badge::part(base) {
+        border-radius: 0;
+        background-color: var(--background-color);
+        border: 1px solid var(--secondary-color);
+        color: var(--secondary-color);
+    }
+    
+`;

package/dist/components/model-renderer/changes.d.ts

@@ -0,0 +1,19 @@
+import { TemplateResult } from "lit";
+import DiffMatchPatch from 'diff-match-patch';
+import { HasChanges } from "./has-changes.js";
+import { Change } from "../../model/graph.js";
+import '../warning-stripe/warning-stripe.js';
+export declare class ChangesComponent extends HasChanges {
+    static styles: import("lit").CSSResult[];
+    changes: Change[];
+    addPadding: boolean;
+    renderBreakingBar: boolean;
+    renderMeta: boolean;
+    showDiff: boolean;
+    renderChangeCountBar: boolean;
+    diff: DiffMatchPatch;
+    constructor(changes?: Change[]);
+    toggleDiff(): void;
+    renderChange(change: Change): TemplateResult;
+    render(): TemplateResult<1>;
+}

package/dist/components/model-renderer/changes.js

@@ -0,0 +1,306 @@
+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 { html } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import DiffMatchPatch from 'diff-match-patch';
+import { HasChanges } from "./has-changes.js";
+import changeCss from "./change.css.js";
+import tooltipCss from "../../css/tooltip.css.js";
+import '../warning-stripe/warning-stripe.js';
+let ChangesComponent = class ChangesComponent extends HasChanges {
+    constructor(changes) {
+        super();
+        this.diff = new DiffMatchPatch();
+        this.showDiff = true;
+        if (changes) {
+            this.changes = changes;
+        }
+        this.renderChangeCountBar = true;
+        this.addPadding = false;
+        this.renderBreakingBar = true;
+        this.renderMeta = false;
+    }
+    toggleDiff() {
+        this.showDiff = !this.showDiff;
+    }
+    renderChange(change) {
+        let context = html ``;
+        if (change.context) {
+            // TODO: make this jumpable.
+            if (change.context.originalLine && change.context.originalLine === change.context.newLine) {
+                context = html `<span class="context">
+                      ${change.change == 1 ? html `<span class="toggle-highlight">
+                        <sl-tooltip content="toggle diff highlighting" placement="left">
+                            <sl-icon-button name="plus-slash-minus" @click="${this.toggleDiff}"></sl-icon-button>
+                        </sl-tooltip>
+                    </span>` : ''}
+                    line: <span class="context-bold"><sl-format-number
+                        value="${change.context.originalLine}"></sl-format-number></span>,
+                    
+                    column:  <span class="context-bold"><sl-format-number
+                        value="${change.context.originalColumn}"></sl-format-number></span>
+                </span>`;
+            }
+            if (change.context.originalLine && change.context.originalLine !== change.context.newLine) {
+                context = html `<span class="context">
+                     ${change.change == 1 ? html `<span class="toggle-highlight">
+                        <sl-tooltip content="toggle diff highlighting" placement="left">
+                            <sl-icon-button name="plus-slash-minus" @click="${this.toggleDiff}"></sl-icon-button>
+                        </sl-tooltip>
+                    </span>` : ''}
+                    line: <span class="context-bold"><sl-format-number
+                        value="${change.context.originalLine}"></sl-format-number></span>,
+                   
+                    col: <span class="context-bold"><sl-format-number
+                        value="${change.context.originalColumn}"></sl-format-number></span>
+                </span>`;
+            }
+            if (!change.context.originalLine && change.context.newLine) {
+                context = html `
+                    ${change.change == 1 ? html `<span class="toggle-highlight">
+                        <sl-tooltip content="toggle diff highlighting" placement="left">
+                            <sl-icon-button name="plus-slash-minus" @click="${this.toggleDiff}"></sl-icon-button>
+                        </sl-tooltip>
+                    </span>` : ''}
+                    <span class="context">
+                    line: <span class="context-bold"><sl-format-number
+                            value="${change.context.newLine}"></sl-format-number></span>,
+                   
+                    col: <span class="context-bold"><sl-format-number
+                            value="${change.context.newColumn}"></sl-format-number></span>
+                </span>`;
+            }
+        }
+        // Prepare HTML outputs for left and right strings
+        let leftHtml = [html ``];
+        let rightHtml = [html ``];
+        if (change.original && change.new && !change.breaking) {
+            let diff = this.diff.diff_main(change.original, change.new);
+            this.diff.diff_cleanupSemantic(diff);
+            diff.forEach((part) => {
+                var op = part[0]; // Operation: -1 (delete), 1 (insert), 0 (equal)
+                var text = part[1];
+                if (op === 1) {
+                    // Text inserted in the right string
+                    rightHtml.push(html `<span class="diff-item ${this.showDiff ? 'diff-insert' : ''}">${text}</span>`);
+                }
+                else if (op === -1) {
+                    // Text deleted from the left string
+                    leftHtml.push(html `<span class="diff-item ${this.showDiff ? 'diff-delete' : ''}">${text}</span>`);
+                }
+                else {
+                    // Unchanged text
+                    leftHtml.push(html `<span class="diff-item">${text}</span>`);
+                    rightHtml.push(html `<span class="diff-item">${text}</span>`);
+                }
+            });
+        }
+        else {
+            if (change.original) {
+                leftHtml.push(html `<span class="diff-item">${change.original}</span>`);
+            }
+            if (change.new) {
+                rightHtml.push(html `<span class="diff-item">${change.new}</span>`);
+            }
+        }
+        let props = html `
+            <div class="props">
+                <div class="orig">
+                    <span class="original-value"><pre>${leftHtml}</pre></span>
+                </div>
+                <div class="new">
+                    <div class="new-arrow">
+                        <sl-icon name="arrow-return-right" class="change-arrow"></sl-icon>
+                    </div>
+                    <div class="new-value">
+
+                        <span class="changed-value"><pre>${change.breaking ? html `<span
+                                    class="breaking-value">${rightHtml}</span>` : rightHtml}</pre></span>
+                    </div>
+                </div>
+            </div>
+        `;
+        if (leftHtml.length === 1 && rightHtml.length === 1) {
+            // the API did not expose change.
+            props = html ``;
+        }
+        const modified = html `
+            <div class="change ${change.breaking ? 'breaking-background' : ''}">
+
+                ${change.breaking && this.renderBreakingBar ? html `
+                    <pb33f-warning-stripe class="breaking-bar-top" height="5" animateStripe speed=4
+                                          danger></pb33f-warning-stripe>` : html `<div style="height: 5px"></div>`}
+
+                <div class="property-container">
+                    <div class="context-container">
+                        ${context}
+                    </div>
+                 
+                    <span class="change-property">${change.property}</span>
+                    ${this.renderChangeType(change)} ${this.renderBreaking(change.breaking)}
+                </div>
+               ${props}
+                <div style="height: 5px"></div>
+
+            </div>`;
+        let addedVal = change.new;
+        if (addedVal === '') {
+            addedVal = change.original;
+        }
+        let addedBlock = html `
+            <div class="props">
+                <div class="orig">
+                    <span class="changed-value"><pre>${addedVal}</pre></span>
+                </div>
+            </div>
+
+            <div style="height: 5px"></div>
+            </div>
+        `;
+        const added = html `
+            <div class="change ${change.breaking ? 'breaking-background' : ''}">
+                ${change.breaking && this.renderBreakingBar ? html `
+                    <pb33f-warning-stripe class="breaking-bar-top" height="5" animateStripe speed=4
+                                          danger></pb33f-warning-stripe>` : html `<div style="height: 5px"></div>`}
+                <div class="property-container">
+                    <div class="context-container">
+                        ${context}
+                    </div>
+                
+                    <span class="change-property">${change.property}</span>
+                    ${this.renderChangeType(change)} ${this.renderBreaking(change.breaking)}
+                </div>
+                ${change.new ? html `${addedBlock}` : ''}
+            </div>`;
+        let removedVal = change.new;
+        if (!change.new) {
+            removedVal = change.original;
+        }
+        let removedBlock = html `
+            <div class="props">
+                <div class="new-value">
+                    <span class="changed-value"><pre>${removedVal}</pre></span>
+                </div>
+            </div>
+
+            <div style="height: 5px"></div>
+            </div>
+        `;
+        // if there is nothing (because an object was removed, then don't render the block.
+        if (!removedVal) {
+            removedBlock = html ``;
+        }
+        const removed = html `
+            <div class="change ${change.breaking ? 'breaking-background' : ''}"">
+
+            ${change.breaking && this.renderBreakingBar ? html ` 
+                <pb33f-warning-stripe class="breaking-bar-top" height="5" animateStripe speed=4
+                                      danger></pb33f-warning-stripe>` : html `<div style="height: 5px"></div>`}
+
+            <div class="property-container">
+                <div class="context-container">
+                    ${context}
+                </div>
+                <span class="change-property">${change.property}</span>
+                ${this.renderChangeType(change)} ${this.renderBreaking(change.breaking)}
+            </div>
+          ${removedBlock}`;
+        let changeMeta = html `
+            <div class="object-icon">
+                <pb33f-model-icon icon="${change.type}"></pb33f-model-icon>
+                <sl-badge>${change.type?.replace(/([a-z])([A-Z])/g, '$1 $2').toLowerCase()}</sl-badge>
+                <div class="json-path">
+                    $.<pb33f-render-json-path path="${change.path}"></pb33f-render-json-path>
+                </div>
+            </div>
+        `;
+        if (!this.renderMeta) {
+            changeMeta = html ``;
+        }
+        const wrappedMod = html `
+            <div class="change-item">
+                <div class="change-icon">${this.renderChangeIcon(change)}</div>
+                <div class="change-details">
+                    ${changeMeta}
+                    ${modified}
+                </div>
+            </div>
+        `;
+        const wrappedRemoved = html `
+            <div class="change-item">
+                <div class="change-icon">${this.renderChangeIcon(change)}</div>
+                <div class="change-details">
+                    ${changeMeta}
+                    ${removed}
+                </div>
+            </div>
+        `;
+        const wrappedAdd = html `
+            <div class="change-item">
+                <div class="change-icon">${this.renderChangeIcon(change)}</div>
+                <div class="change-details">
+                    ${changeMeta}
+                    ${added}
+                </div>
+            </div>
+        `;
+        switch (change.change) {
+            case 1:
+                return wrappedMod;
+            case 2:
+            case 3:
+                return wrappedAdd;
+            case 4:
+            case 5:
+                return wrappedRemoved;
+        }
+        return html ``;
+    }
+    render() {
+        let changeTitle = html `
+            <header>
+                <div class="change-title">
+                    <span class="change-count">${this.changes.length}</span>
+                    ${this.changes.length <= 1 ? 'Change made' : 'Changes made'}
+                </div>
+            </header>`;
+        if (!this.renderChangeCountBar) {
+            changeTitle = null;
+        }
+        let op = html ` ${this.changes.map((change) => {
+            return this.renderChange(change);
+        })}`;
+        return html `
+            ${changeTitle}
+            <div class="what-changed" style="${this.addPadding ? 'padding-top: 10px' : ''}">
+                ${op}
+            </div>`;
+    }
+};
+ChangesComponent.styles = [changeCss, tooltipCss];
+__decorate([
+    property()
+], ChangesComponent.prototype, "changes", void 0);
+__decorate([
+    property({ type: Boolean })
+], ChangesComponent.prototype, "addPadding", void 0);
+__decorate([
+    property({ type: Boolean })
+], ChangesComponent.prototype, "renderBreakingBar", void 0);
+__decorate([
+    property({ type: Boolean })
+], ChangesComponent.prototype, "renderMeta", void 0);
+__decorate([
+    state()
+], ChangesComponent.prototype, "showDiff", void 0);
+__decorate([
+    state()
+], ChangesComponent.prototype, "renderChangeCountBar", void 0);
+ChangesComponent = __decorate([
+    customElement('pb33f-changes-component')
+], ChangesComponent);
+export { ChangesComponent };

package/dist/components/model-renderer/clickable-ref.d.ts

@@ -1,18 +1,22 @@
 import './example.js';
-import { LitElement } from "lit";
+import { LitElement, TemplateResult } from "lit";
 import { ExampleContainer } from "../../model/example.js";
 import { Schema } from "../../model/schema.js";
+import { Change } from "../../model/graph";
 export declare class ClickableRef extends LitElement {
     constructor();
+    private changesComponent;
+    changes: Change[];
     clickedRef(ref: string | undefined): void;
     encodeToSelectorID(text: string): string;
-    renderOperation(method: string, sectionId: string, operationId?: string): import("lit-html").TemplateResult<1>;
-    renderSection(title: string, sectionId: string, expanded?: boolean): import("lit-html").TemplateResult<1>;
-    renderSectionToggle(sectionId: string, expanded?: boolean): import("lit-html").TemplateResult<1>;
+    renderOperation(method: string, sectionId: string, operationId?: string): TemplateResult<1>;
+    renderSection(title: string, sectionId: string, expanded?: boolean): TemplateResult<1>;
+    renderSectionToggle(sectionId: string, expanded?: boolean): TemplateResult<1>;
     toggleSection(sectionId: string): void;
+    renderChanges(): TemplateResult;
 }
 export declare class HasExamples extends ClickableRef {
     constructor();
-    renderNoExample(schema: Schema): import("lit-html").TemplateResult<1>;
-    renderExamples(examples: ExampleContainer, example: ExampleContainer): import("lit-html").TemplateResult<1>;
+    renderNoExample(schema: Schema): TemplateResult<1>;
+    renderExamples(examples: ExampleContainer, example: ExampleContainer): TemplateResult<1>;
 }

package/dist/components/model-renderer/clickable-ref.js

@@ -1,9 +1,11 @@
 import './example.js';
 import { html, LitElement } from "lit";
 import { NodeReferenceClicked } from "../../events/doctor.js";
+import { ChangesComponent } from "./changes.js";
 export class ClickableRef extends LitElement {
     constructor() {
         super();
+        this.changesComponent = new ChangesComponent();
     }
     clickedRef(ref) {
         if (ref) {
@@ -46,6 +48,13 @@ export class ClickableRef extends LitElement {
             }
         }
     }
+    renderChanges() {
+        if (this.changes && this.changes.length > 0) {
+            this.changesComponent.changes = this.changes;
+            return html `${this.changesComponent}`;
+        }
+        return html ``;
+    }
 }
 export class HasExamples extends ClickableRef {
     constructor() {

package/dist/components/model-renderer/components.js

@@ -417,6 +417,7 @@ let RenderedComponentsNodeComponent = class RenderedComponentsNodeComponent exte
             ${examples}
             ${pathItems}
             ${ext}
+            ${super.renderChanges()}
         `;
     }
 };

package/dist/components/model-renderer/contact.js

@@ -55,7 +55,8 @@ let RenderedContactNodeComponent = class RenderedContactNodeComponent extends Cl
             ${name}
             ${email}
             ${url}
-            ${ext}`;
+            ${ext}
+            ${super.renderChanges()}`;
     }
 };
 RenderedContactNodeComponent.styles = [sharedCss, modelSharedCss, formattingCss];