@pb33f/cowboy-components 0.0.1 → 0.0.4

package/dist/components/header/header.css.js

@@ -0,0 +1,102 @@
+import { css } from "lit";
+export default css `
+  a, a:visited, a:active {
+    text-decoration: none;
+    color: var(--primary-color);
+  }
+
+  a:hover {
+    color: var(--primary-color);
+    text-decoration: underline;
+  }
+  
+  header.pb33f-header {
+    display: flex;
+    height: 57px;
+    flex-direction: row;
+    z-index: 1;
+    background-color: var(--background-color);
+  }
+
+  header.pb33f-header > .logo {
+    width: 170px;
+    min-width: 145px;
+    padding: 9px 0 10px 10px;
+    border-bottom: 1px dashed var(--secondary-color);
+    height: 36px;
+  }
+
+  header.pb33f-header > .logo .caret {
+    font-size: 1.6em;
+    color: var(--secondary-color)
+  }
+
+  header.pb33f-header > .logo .name {
+    font-size: 1.7em;
+    font-family: var(--font-stack-bold),sans-serif;
+    color: var(--primary-color);
+    text-shadow:  0 0 10px var(--primary-color-text-shadow), 0 0 10px var(--primary-color-text-shadow);
+  }
+
+  header.pb33f-header > .logo .name > a {
+    text-decoration: none;
+  }
+
+  header.pb33f-header > .logo .name > a:hover {
+    text-decoration: underline;
+
+  }
+
+  header.pb33f-header > .logo .name > a:active {
+    text-decoration: underline;
+    color: var(--secondary-color);
+    text-shadow:  0 0 5px var(--secondary-color-text-shadow), 0 0 10px var(--secondary-color-text-shadow-outer);
+  }
+
+  header.pb33f-header > .logo .name::after {
+    content: "";
+    -webkit-animation: cursor .8s infinite;
+    animation: cursor .8s infinite;
+    background: var(--primary-color);
+    border-radius: 0;
+    display: inline-block;
+    height: 0.9em;
+    margin-left: 0.2em;
+    width: 3px;
+    bottom: -2px;
+    position: relative;
+  }
+  
+  header .header-space {
+    height: 55px;
+    flex-grow: 2;
+    border-bottom: 1px dashed var(--secondary-color);
+  }
+
+  @-webkit-keyframes cursor {
+    0% {
+      opacity: 0;
+    }
+
+    50% {
+      opacity: 1;
+    }
+
+    to {
+      opacity: 0;
+    }
+  }
+
+  @keyframes cursor {
+    0% {
+      opacity: 0;
+    }
+
+    50% {
+      opacity: 1;
+    }
+
+    to {
+      opacity: 0;
+    }
+  }`;

package/dist/components/header/header.d.ts

@@ -3,5 +3,6 @@ export declare class HeaderComponent extends LitElement {
     static styles: import("lit").CSSResult;
     name: string;
     url: string;
+    constructor();
     render(): import("lit-html").TemplateResult<1>;
 }

package/dist/components/header/header.js

@@ -0,0 +1,39 @@
+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 { customElement, property } from "lit/decorators.js";
+import { html, LitElement } from "lit";
+import headerCss from "./header.css";
+let HeaderComponent = class HeaderComponent extends LitElement {
+    constructor() {
+        super();
+        this.name = 'pb33f';
+        this.url = 'https://pb33f.io';
+    }
+    render() {
+        return html `
+            <header class="pb33f-header">
+                <div class="logo">
+                    <span class="caret">$</span>
+                    <span class="name"><a href="${this.url}">${this.name}</a></span>
+                </div>
+                <div class="header-space">
+                    <slot></slot>
+                </div>
+            </header>`;
+    }
+};
+HeaderComponent.styles = headerCss;
+__decorate([
+    property()
+], HeaderComponent.prototype, "name", void 0);
+__decorate([
+    property()
+], HeaderComponent.prototype, "url", void 0);
+HeaderComponent = __decorate([
+    customElement('pb33f-header')
+], HeaderComponent);
+export { HeaderComponent };

package/dist/components/http-method/http-method.css.d.ts

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

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

@@ -0,0 +1,22 @@
+import { css } from "lit";
+export default css `
+    sl-tag.method {
+        width: 80px;
+        text-align: center;
+    }
+
+    .method::part(base) {
+        background: var(--background-color);
+        border-radius: 0;
+        text-align: center;
+        font-family: var(--font-stack-bold), monospace;
+        width: 100%;
+    }
+
+    .method::part(content) {
+        border-radius: 0;
+        text-align: center;
+        width: 100%;
+        display: inline-block;
+    }
+`;

package/dist/components/http-method/http-method.d.ts

@@ -0,0 +1,8 @@
+import { LitElement } from "lit";
+export declare class HttpMethodComponent extends LitElement {
+    static styles: import("lit").CSSResult;
+    method: string;
+    lower: boolean;
+    constructor();
+    render(): import("lit-html").TemplateResult<1>;
+}

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

@@ -0,0 +1,34 @@
+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 { customElement, property } from "lit/decorators.js";
+import { html, LitElement } from "lit";
+import { ExchangeMethod } from "../../model/exchange_method";
+import httpMethodCss from "./http-method.css";
+let HttpMethodComponent = class HttpMethodComponent extends LitElement {
+    constructor() {
+        super();
+        this.lower = false;
+        this.method = 'GET';
+    }
+    render() {
+        return html `
+            <sl-tag variant="${ExchangeMethod(this.method)}" class="method">
+                ${this.lower ? this.method.toLowerCase() : this.method.toUpperCase()}</sl-tag>
+        `;
+    }
+};
+HttpMethodComponent.styles = httpMethodCss;
+__decorate([
+    property()
+], HttpMethodComponent.prototype, "method", void 0);
+__decorate([
+    property({ type: Boolean })
+], HttpMethodComponent.prototype, "lower", void 0);
+HttpMethodComponent = __decorate([
+    customElement('pb33f-http-method')
+], HttpMethodComponent);
+export { HttpMethodComponent };

package/dist/components/http-property-view/http-property-view.css.d.ts

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

package/dist/components/http-property-view/http-property-view.css.js

@@ -0,0 +1,108 @@
+import { css } from "lit";
+export default css `
+    .prop-type-table > table > 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;
+    }
+
+    .prop-type-table > table > thead > tr > th:first-child {
+        font-family: var(--font-stack-bold), sans-serif;
+        background: var(--kv-table-header-background-reversed);
+        text-align: right;
+        color: var(--primary-color);
+        padding-right: 10px;
+    }
+    
+    
+    .prop-type-table > table > thead > tr > th:nth-child(2) {
+        text-align: center;
+        color: var(--font-color);
+        background-color: var(--kv-table-header-background-solid);
+        font-weight: normal;
+    }
+
+    .prop-type-table > table > thead > tr > th:last-child {
+        background: var(--kv-table-header-background);
+    }
+
+    .prop-type-table > table > tbody > tr > td {
+        font-family: var(--font-stack-paragraph), monospace;
+        color: var(--font-color-sub1);
+        padding: 10px 0 10px 10px;
+        border-bottom: 1px dashed var(--secondary-color-dimmer);
+    }
+
+    .prop-type-table > table > tbody > tr > td:first-child > code {
+        color: var(--primary-color);
+        font-family: var(--font-stack-bold), monospace;
+    }
+
+    .prop-type-table > table > tbody > tr > td:nth-child(3) > code {
+        font-family: var(--font-stack), sans-serif;
+        border: 1px solid var(--secondary-color-lowalpha);
+        color: var(--secondary-color);
+        border-radius: 0;
+        padding: 0 5px 1px 5px;
+        background-color: var(--secondary-color-very-lowalpha);
+    }
+
+    .prop-type-table > table > tbody > tr > td:first-child {
+        width: 120px;
+        text-align: right;
+        padding-right: 10px;
+        border-right: 1px dashed var(--secondary-color-dimmer);
+    }
+
+    .prop-type-table > table > tbody > tr > td:nth-child(2) {
+        width: 10px;
+        color: var(--font-color);
+        font-family: var(--font-stack-italic), monospace;
+        text-align: center;
+        padding-right: 10px;
+        border-right: 1px dashed var(--secondary-color-dimmer);
+    }
+
+    table {
+        width: 100%;
+        border-spacing: 0;
+    }
+
+    table > tbody > tr > td > a {
+        text-decoration: underline;
+    }
+
+    table > tbody > tr > td > code {
+        color: var(--secondary-color);
+        font-size: 1em;
+    }
+
+    .file-item {
+        display: block;
+    }
+
+    .file-name {
+        font-family: var(--font-stack-bold), monospace;
+        display: block;
+    }
+
+    .file-header {
+        color: var(--font-color-sub1);
+        display: inline-block;
+    }
+
+    .file-header > strong {
+        color: var(--font-color-sub2);
+
+    }
+
+    hr {
+        margin-bottom: 10px;
+    }
+
+`;

package/dist/components/http-property-view/http-property-view.d.ts

@@ -0,0 +1,19 @@
+import { LitElement, TemplateResult } from "lit";
+import { FormPart } from "../../model/extract_content_type";
+export interface Property {
+    name: string;
+    value?: string[];
+    headers?: Map<string, string[]>;
+    files?: FormPart[];
+    type: string;
+}
+export declare class HttpPropertyViewComponent extends LitElement {
+    static styles: import("lit").CSSResult[];
+    propertyLabel: string;
+    typeLabel: string;
+    valueLabel: string;
+    private _data;
+    constructor();
+    set data(value: Property[]);
+    render(): TemplateResult<1>;
+}

package/dist/components/http-property-view/http-property-view.js

@@ -0,0 +1,102 @@
+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 { customElement, state, property } from "lit/decorators.js";
+import { map } from "lit/directives/map.js";
+import { LitElement, html } from "lit";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import propertyViewComponentCss from "./http-property-view.css";
+import sharedCss from "../../css/shared.css";
+let HttpPropertyViewComponent = class HttpPropertyViewComponent extends LitElement {
+    constructor() {
+        super();
+        this.propertyLabel = 'Property';
+        this.typeLabel = 'Type';
+        this.valueLabel = 'Value';
+        this._data = [];
+    }
+    set data(value) {
+        this._data = value;
+    }
+    render() {
+        let headerData = html ``;
+        if (this._data) {
+            headerData = html `
+                ${map(this._data, (i) => {
+                if (i.type !== 'field') {
+                    return html `
+                            <tr>
+                                <td><code>${i.name}</code></td>
+                                <td><code>${i.type}</code></td>
+                                <td>${i.files?.map((f) => {
+                        return html `
+                                        <span class="file-name">${f.name}</span>
+                                        <hr/>
+                                        ${f.headers?.forEach((value, key) => {
+                            return html `
+                                                <span class="file-header">${key}
+                                                    : <strong>${value}</strong></span>`;
+                        })}</td>
+                                        </tr>`;
+                    })}
+                                </td>`;
+                }
+                let output = '';
+                i.value?.forEach((value) => {
+                    output += value;
+                });
+                return html `
+                        <tr>
+                            <td><code>${i.name}</code></td>
+                            <td>${i.type}</td>
+                            <td>${unsafeHTML(output)}</td>
+                        </tr>`;
+            })}
+            `;
+        }
+        const noData = html `
+            <div class="empty-data">
+                <sl-icon name="mic-mute" class="mute-icon"></sl-icon>
+                <br/>
+                No data extracted!
+            </div>`;
+        const table = html `
+            <div class="prop-type-table">
+                <table>
+                    <thead>
+                    <tr>
+                        <th>${this.propertyLabel}</th>
+                        <th>${this.typeLabel}</th>
+                        <th>${this.valueLabel}</th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    ${headerData}
+                    </tbody>
+                </table>
+            </div>
+        `;
+        const output = this._data?.length > 0 ? table : noData;
+        return html `${output}`;
+    }
+};
+HttpPropertyViewComponent.styles = [sharedCss, propertyViewComponentCss];
+__decorate([
+    property()
+], HttpPropertyViewComponent.prototype, "propertyLabel", void 0);
+__decorate([
+    property()
+], HttpPropertyViewComponent.prototype, "typeLabel", void 0);
+__decorate([
+    property()
+], HttpPropertyViewComponent.prototype, "valueLabel", void 0);
+__decorate([
+    state()
+], HttpPropertyViewComponent.prototype, "_data", void 0);
+HttpPropertyViewComponent = __decorate([
+    customElement('pb33f-http-http-property-view')
+], HttpPropertyViewComponent);
+export { HttpPropertyViewComponent };

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

@@ -0,0 +1,81 @@
+import { css } from "lit";
+export default css `
+    .kv-table > table {
+        width: 100%;
+        border-spacing: 0;
+    }
+
+    .kv-table > table > thead > tr > th {
+        font-family: var(--font-stack), sans-serif;
+        background: var(--kv-table-header-background);
+        text-align: left;
+        padding: 10px;
+        color: var(--font-color);
+        font-weight: normal;
+        border-bottom: 1px dashed var(--kv-table-dividers);
+        border-top: 1px dashed var(--kv-table-header-border-top);
+    }
+
+    .kv-table > table > thead > tr > th:first-child {
+        font-family: var(--font-stack-bold), sans-serif;
+        background: var(--kv-table-header-background-reversed);
+        text-align: right;
+        color: var(--primary-color);
+        padding-right: 10px;
+    }
+
+    .kv-table > table > thead > tr > th:nth-child(2) {
+        font-family: var(--font-stack-bold), sans-serif;
+    }
+
+    .kv-table > table > tbody > tr > td {
+        font-family: var(--font-stack), sans-serif;
+        padding: 10px 0 10px 10px;
+        border-bottom: 1px dashed var(--kv-table-dividers);
+    }
+
+    .kv-table > table > tbody > tr > td:first-child > code {
+        color: var(--primary-color);
+        font-family: var(--font-stack-bold), sans-serif;
+    }
+
+    .kv-table > table > tbody > tr > td:nth-child(2) {
+        color: var(--font-color-sub1)
+    }
+    
+    .kv-table > table > tbody > tr > td:nth-child(2) > code {
+        font-family: var(--font-stack), sans-serif;
+        border: 1px solid var(--secondary-color-lowalpha);
+        color: var(--secondary-color);
+        border-radius: 0;
+        padding: 0 5px 1px 5px;
+        background-color: var(--secondary-color-very-lowalpha);
+    }
+    
+    .kv-table > table > tbody > tr > td:first-child {
+        width: 180px;
+        text-align: right;
+        padding-right: 10px;
+        border-right: 1px dashed var(--kv-table-dividers);
+    }
+
+    .kv-table >table > tbody > tr > td > code {
+        color: var(--secondary-color);
+        font-weight: normal;
+    }
+
+
+    pre {
+        word-wrap: break-word;
+        white-space: pre-wrap;
+        max-width: 760px;
+        overflow-x: auto;
+    }
+
+    pre > code {
+        word-wrap: break-word;
+        white-space: pre-wrap;
+    }
+
+
+`;

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

@@ -0,0 +1,98 @@
+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 { customElement, state, property } from "lit/decorators.js";
+import { map } from "lit/directives/map.js";
+import { LitElement } from "lit";
+import { html } from "lit";
+import kvViewComponentCss from "./kv-view.css";
+import Prism from 'prismjs';
+import 'prismjs/components/prism-json';
+import 'prismjs/themes/prism-okaidia.css';
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import prismCss from "../../css/prism.css";
+import sharedCss from "../../css/shared.css";
+let KVViewComponent = class KVViewComponent extends LitElement {
+    constructor() {
+        super();
+        this._data = new Map();
+        this.keyLabel = 'Key';
+        this.valueLabel = 'Value';
+    }
+    set data(value) {
+        if (value && value.size > 0) {
+            this._data = value;
+        }
+    }
+    render() {
+        let headerData = html ``;
+        if (this._data) {
+            headerData = html `
+                ${map(this._data, (i) => {
+                if (typeof i[1] === 'object') {
+                    return html `
+                            <tr>
+                                <td><code>${i[0]}</code></td>
+                                <td>
+                                    <pre style=""><code
+                                            style="white-space: pre-wrap;  word-wrap: break-word;">${unsafeHTML(Prism.highlight(JSON.stringify(i[1], null, 2), Prism.languages['json'], 'json'))}</pre>
+                                    </code>
+                                </td>
+                            </tr>`;
+                }
+                return html `
+                        <tr>
+                            <td><code>${i[0]}</code></td>
+                            <td>${unsafeHTML(i[1])}</td>
+                        </tr>`;
+            })}
+            `;
+        }
+        const noData = html `
+            <div class="empty-data">
+                <sl-icon name="mic-mute" class="mute-icon"></sl-icon>
+                <br/>
+                No data extracted!
+            </div>`;
+        let header = html `
+            <thead>
+            <tr>
+                <th>${this.keyLabel}</th>
+                <th>${this.valueLabel}</th>
+            </tr>
+            </thead>`;
+        if (this.keyLabel == '' && this.valueLabel == '') {
+            header = html ``;
+        }
+        const table = html `
+
+            <div class="kv-table">
+                <table>
+                    ${header}
+                    <tbody>
+                    ${headerData}
+                    </tbody>
+                </table>
+            </div>
+        `;
+        const output = this._data?.size > 0 ? table : noData;
+        return html `${output}`;
+    }
+};
+KVViewComponent.styles = [prismCss, sharedCss, kvViewComponentCss];
+__decorate([
+    property()
+], KVViewComponent.prototype, "keyLabel", void 0);
+__decorate([
+    property()
+], KVViewComponent.prototype, "valueLabel", void 0);
+__decorate([
+    state()
+], KVViewComponent.prototype, "_data", void 0);
+KVViewComponent = __decorate([
+    customElement('pb33f-kv-view')
+], KVViewComponent);
+export { KVViewComponent };

package/dist/components/mailing-list/mailing-list.css.d.ts

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