@pb33f/cowboy-components 0.0.7 → 0.0.9

package/dist/components/attention-box/attention-box.css.js

@@ -1,6 +1,19 @@
 import { css } from "lit";
 export default css `
+    
+    sl-alert::part(message) {
+        padding-bottom: var(--global-padding);
+        color: var(--font-color-sub1);
+    }
+    
+    sl-alert.error::part(message) {
+        color: var(--error-font-color);
+    }
 
+    sl-alert.warning::part(message) {
+        color: var(--warn-300);
+    }
+    
     .attention {
         margin-top: var(--global-space);
         margin-bottom: var(--global-space);

package/dist/components/attention-box/attention-box.js

@@ -6,8 +6,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { LitElement, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import attentionBoxCss from "./attention-box.css";
-import alertsCss from "../../css/alerts.css";
+import attentionBoxCss from "./attention-box.css.js";
+import alertsCss from "../../css/alerts.css.js";
 export var AttentionType;
 (function (AttentionType) {
     AttentionType["Context"] = "context";
@@ -41,11 +41,15 @@ let AttentionBox = class AttentionBox extends LitElement {
         if (this.type === AttentionType.Danger) {
             this.type = AttentionType.Error;
         }
+        let header = html ``;
+        if (this.headerText != '') {
+            header = html `<strong>${this.headerText}</strong>`;
+        }
         return html `
             <div class='attention ${this.type}'>
                 <sl-alert class="${this.type}" open>
                     <sl-icon slot="icon" name="${this.getIcon()}"></sl-icon>
-                    <strong>${this.headerText}</strong>
+                    ${header}
                     <slot></slot>
                 </sl-alert>
             </div>

package/dist/components/changelog/changelog.js

@@ -61,10 +61,8 @@ let ChangelogComponent = class ChangelogComponent extends LitElement {
                 if (i == 0) {
                     latest = true;
                 }
-                console.log(Date.parse(summary.published_at));
-                console.log(new Date(summary.published_at));
                 items.push(html `
-                    <pb33f-timeline-item>
+                    <pb33f-timeline-item id="release_${summary.name}">
                         <span slot="icon">${icon}</span>
                         <span slot="time" class="${milestone ? `major` : null}">${summary.publish_date}</span>
                         <div slot="content">

package/dist/components/changelog/release.css.js

@@ -7,8 +7,12 @@ export default css `
         color: var(--secondary-color);
     }
     
+    sl-details {
+        max-width: 780px;
+    }
+    
     sl-details::part(header) {
-        padding-top: 12px;
+        padding-top: 15px;
         height: 15px;
     }
 
@@ -53,14 +57,21 @@ export default css `
         text-shadow:  0 0 1rem var(--terminal-text-shadow);
         font-size: 1.2rem;
     }
-
+    
+    
     html[theme="light"] .latest {
         text-shadow:  none;
     }
+    
+    pb33f-kv-view {
+        max-width: 500px;
+    }
+    
+    @media only screen and (max-width: 800px) {
 
-  
-;
-
-
+        sl-details {
+            max-width: 350px;
+        }
 
+    }
 `;

package/dist/components/http-method/http-method.js

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { customElement, property } from "lit/decorators.js";
 import { html, LitElement } from "lit";
-import { ExchangeMethod } from "../../model/exchange_method";
+import { ExchangeMethod } from "../../model/exchange_method.js";
 import httpMethodCss from "./http-method.css.js";
 let HttpMethodComponent = class HttpMethodComponent extends LitElement {
     constructor() {

package/dist/components/kv-view/kv-view.d.ts

@@ -1,6 +1,5 @@
 import { LitElement, TemplateResult } from "lit";
 import 'prismjs/components/prism-json.js';
-import 'prismjs/themes/prism-okaidia.css';
 export declare class KVViewComponent extends LitElement {
     static styles: import("lit").CSSResult[];
     keyLabel: string;

package/dist/components/kv-view/kv-view.js

@@ -10,17 +10,21 @@ import { LitElement } from "lit";
 import { html } from "lit";
 import kvViewComponentCss from "./kv-view.css.js";
 import Prism from 'prismjs';
+Prism.manual = true;
 import 'prismjs/components/prism-json.js';
-import 'prismjs/themes/prism-okaidia.css';
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import prismCss from "../../css/prism.css.js";
 import sharedCss from "../../css/shared.css.js";
+import syntaxCss from "../../css/syntax.css.js";
+// @ts-ignore
+document.removeEventListener('DOMContentLoaded', Prism.highlightAll);
 let KVViewComponent = class KVViewComponent extends LitElement {
     constructor() {
         super();
         this._data = new Map();
         this.keyLabel = 'Key';
         this.valueLabel = 'Value';
+        // tslint:disable
     }
     set data(value) {
         if (value && value.size > 0) {
@@ -82,7 +86,7 @@ let KVViewComponent = class KVViewComponent extends LitElement {
         return html `${output}`;
     }
 };
-KVViewComponent.styles = [prismCss, sharedCss, kvViewComponentCss];
+KVViewComponent.styles = [prismCss, sharedCss, syntaxCss, kvViewComponentCss];
 __decorate([
     property()
 ], KVViewComponent.prototype, "keyLabel", void 0);

package/dist/components/render-operation-path/render-operation-path.css.d.ts

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

package/dist/components/render-operation-path/render-operation-path.css.js

@@ -0,0 +1,24 @@
+import { css } from "lit";
+export default css `
+    :host {
+        color: var(--font-color);
+        font-family: var(--font-stack), monospace;
+        font-size: 0.9rem;
+    }
+    .bracket {
+        color: var(--secondary-color);
+        font-family: var(--font-stack-bold), monospace;
+        text-shadow: 0 0 10px var(--secondary-color);
+    }
+    .param {
+        color: var(--primary-color);
+        font-family: var(--font-stack-bold), monospace;
+        text-shadow: 0 0 10px var(--primary-color);
+        font-weight: normal;
+    }
+    
+    .param:hover {
+        //text-decoration: underline;
+        //cursor: pointer;
+    }
+`;

package/dist/components/render-operation-path/render-operation-path.d.ts

@@ -0,0 +1,7 @@
+import { LitElement, TemplateResult } from 'lit';
+export declare class PathRenderComponent extends LitElement {
+    static styles: import("lit").CSSResult;
+    path: string;
+    replaceBrackets(): TemplateResult;
+    render(): TemplateResult<1>;
+}

package/dist/components/render-operation-path/render-operation-path.js

@@ -0,0 +1,51 @@
+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 { customElement, property } from 'lit/decorators.js';
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import renderOperationPathCss from "./render-operation-path.css.js";
+let PathRenderComponent = class PathRenderComponent extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.path = "/";
+    }
+    replaceBrackets() {
+        const regex = /(\{)([\w]+)(\})/gm;
+        let m;
+        let returnString = this.path;
+        while ((m = regex.exec(this.path)) !== null) {
+            // This is necessary to avoid infinite loops with zero-width matches
+            if (m.index === regex.lastIndex) {
+                regex.lastIndex++;
+            }
+            // The result can be accessed through the `m`-variable.
+            m.forEach((match, groupIndex) => {
+                if (groupIndex === 1) {
+                    returnString = returnString.replaceAll(match, '<span class="bracket">' + match + '</span>');
+                }
+                if (groupIndex === 2) {
+                    returnString = returnString.replaceAll(match, '<span class="param">' + match + '</span>');
+                }
+                if (groupIndex === 3) {
+                    returnString = returnString.replaceAll(match, '<span class="bracket">' + match + '</span>');
+                }
+            });
+        }
+        return html `${unsafeHTML(returnString)}`;
+    }
+    render() {
+        return html `${this.replaceBrackets()}`;
+    }
+};
+PathRenderComponent.styles = renderOperationPathCss;
+__decorate([
+    property()
+], PathRenderComponent.prototype, "path", void 0);
+PathRenderComponent = __decorate([
+    customElement('pb33f-render-operation-path')
+], PathRenderComponent);
+export { PathRenderComponent };

package/dist/cowboy-components.d.ts

@@ -1,14 +1,15 @@
 import './css/cowboy-components.css';
 import './css/pb33f-theme.css';
-import './components/terminal/terminal-example.ts';
-import './components/theme-switcher/theme-switcher.ts';
-import './components/header/header.ts';
-import './components/kv-view/kv-view.ts';
-import './components/http-property-view/http-property-view.ts';
-import './components/timeline/timeline.ts';
-import './components/timeline/timeline-item.ts';
-import './components/http-method/http-method.ts';
-import './components/mailing-list/mailing-list.ts';
-import './components/changelog/changelog.ts';
-import './components/changelog/release.ts';
-import './components/attention-box/attention-box.ts';
+import './components/terminal/terminal-example.js';
+import './components/theme-switcher/theme-switcher.js';
+import './components/header/header.js';
+import './components/kv-view/kv-view.js';
+import './components/http-property-view/http-property-view.js';
+import './components/timeline/timeline.js';
+import './components/timeline/timeline-item.js';
+import './components/http-method/http-method.js';
+import './components/mailing-list/mailing-list.js';
+import './components/changelog/changelog.js';
+import './components/changelog/release.js';
+import './components/attention-box/attention-box.js';
+import './components/render-operation-path/render-operation-path.js';

package/dist/cowboy-components.js

@@ -1,17 +1,18 @@
 import './css/cowboy-components.css';
 import './css/pb33f-theme.css';
-import './components/terminal/terminal-example.ts';
-import './components/theme-switcher/theme-switcher.ts';
-import './components/header/header.ts';
-import './components/kv-view/kv-view.ts';
-import './components/http-property-view/http-property-view.ts';
-import './components/timeline/timeline.ts';
-import './components/timeline/timeline-item.ts';
-import './components/http-method/http-method.ts';
-import './components/mailing-list/mailing-list.ts';
-import './components/changelog/changelog.ts';
-import './components/changelog/release.ts';
-import './components/attention-box/attention-box.ts';
+import './components/terminal/terminal-example.js';
+import './components/theme-switcher/theme-switcher.js';
+import './components/header/header.js';
+import './components/kv-view/kv-view.js';
+import './components/http-property-view/http-property-view.js';
+import './components/timeline/timeline.js';
+import './components/timeline/timeline-item.js';
+import './components/http-method/http-method.js';
+import './components/mailing-list/mailing-list.js';
+import './components/changelog/changelog.js';
+import './components/changelog/release.js';
+import './components/attention-box/attention-box.js';
+import './components/render-operation-path/render-operation-path.js';
 // Set the base path to the folder you copied Shoelace's assets to
 import { setBasePath } from '@shoelace-style/shoelace/dist/utilities/base-path.js';
 setBasePath('/shoelace');