@pb33f/cowboy-components 0.7.18 → 0.8.0

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

@@ -0,0 +1,134 @@
+import { css } from "lit";
+export default css `
+    :host {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        overflow: hidden;
+    }
+
+    .navigator-content {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        min-height: 0;
+        overflow: hidden;
+    }
+
+    .model-tree-container {
+        flex: 1;
+        min-height: 0;
+        overflow-x: auto;
+        overflow-y: auto;
+    }
+
+    .model-tree-container.rolodex-container {
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+    }
+
+    .rolodex-container ::slotted([slot="bundle-toolbar"]) {
+        flex-shrink: 0;
+    }
+
+    .rolodex-container ::slotted([slot="rolodex-tree"]) {
+        flex: 1;
+        min-height: 0;
+        overflow: auto;
+    }
+
+    .model-tree-container::-webkit-scrollbar {
+        width: 8px;
+        height: 8px;
+    }
+
+    .model-tree-container::-webkit-scrollbar-track {
+        background-color: black;
+    }
+
+    .model-tree-container::-webkit-scrollbar-thumb {
+        box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+        background: var(--secondary-color-lowalpha);
+        padding: var(--global-padding);
+    }
+
+    .split-panel-rolodex {
+        --min: 150px;
+        --max: calc(100% - 150px);
+        height: 100%;
+    }
+
+    sl-split-panel {
+        width: 100%;
+        height: 100%;
+        --divider-width: 2px;
+    }
+
+    sl-split-panel::part(divider) {
+        background-color: var(--secondary-color);
+    }
+
+    sl-icon.divider-horiz {
+        position: absolute;
+        border-radius: 0;
+        background: var(--secondary-color);
+        color: var(--background-color);
+        padding: 0;
+        width: 40px;
+        height: 8px;
+    }
+
+    sl-split-panel::part(divider):focus-visible {
+        background-color: var(--primary-color);
+    }
+
+    sl-split-panel:focus-within sl-icon {
+        background-color: var(--primary-color);
+        color: var(--background-color);
+    }
+
+    .tab-group {
+        --indicator-color: var(--secondary-color);
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+    }
+
+    sl-tab-group::part(tabs) {
+        height: 30px;
+    }
+
+    sl-tab-group::part(body) {
+        flex: 1;
+        overflow: hidden;
+    }
+
+    sl-tab-group::part(base) {
+        height: 100%;
+    }
+
+    sl-tab-panel::part(base) {
+        padding-top: 10px;
+        overflow: hidden;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .tab::part(base) {
+        font: var(--font-stack);
+        font-size: 0.9rem;
+        padding: 0 0.8rem;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+    }
+
+    ::slotted([slot="model-tree"]),
+    ::slotted([slot="rolodex-tree"]),
+    ::slotted([slot="history-picker"]) {
+        flex: 1;
+        min-height: 0;
+        overflow: auto;
+    }
+`;

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

@@ -0,0 +1,35 @@
+import { LitElement } from 'lit';
+import '@shoelace-style/shoelace/dist/components/split-panel/split-panel.js';
+import '@shoelace-style/shoelace/dist/components/tab-group/tab-group.js';
+import '@shoelace-style/shoelace/dist/components/tab-panel/tab-panel.js';
+import '@shoelace-style/shoelace/dist/components/tab/tab.js';
+import '@shoelace-style/shoelace/dist/components/icon/icon.js';
+import { SlTabGroup } from '@shoelace-style/shoelace';
+export declare const NavigatorTabChanged = "navigator-tab-changed";
+export declare const NavigatorRolodexDividerChanged = "navigator-rolodex-divider-changed";
+export interface NavigatorTabChangedEvent {
+    name: string;
+}
+export interface NavigatorDividerChangedEvent {
+    position: number;
+}
+export declare class DoctorNavigatorPanel extends LitElement {
+    static styles: import("lit").CSSResult[];
+    importDisabled: boolean;
+    workspaceReadOnly: boolean;
+    timeVortexVisible: boolean;
+    rolodexVisible: boolean;
+    rolodexDividerPosition: number;
+    tabGroup?: SlTabGroup;
+    showTab(panel: string): void;
+    private handleTabShow;
+    private handleRolodexDividerChange;
+    private renderModelTreeContent;
+    private renderNavigatorContent;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'pb33f-doctor-navigator-panel': DoctorNavigatorPanel;
+    }
+}

package/dist/components/the-doctor/doctor-navigator-panel.js

@@ -0,0 +1,117 @@
+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, query } from 'lit/decorators.js';
+import '@shoelace-style/shoelace/dist/components/split-panel/split-panel.js';
+import '@shoelace-style/shoelace/dist/components/tab-group/tab-group.js';
+import '@shoelace-style/shoelace/dist/components/tab-panel/tab-panel.js';
+import '@shoelace-style/shoelace/dist/components/tab/tab.js';
+import '@shoelace-style/shoelace/dist/components/icon/icon.js';
+import navigatorPanelCss from './doctor-navigator-panel.css.js';
+export const NavigatorTabChanged = 'navigator-tab-changed';
+export const NavigatorRolodexDividerChanged = 'navigator-rolodex-divider-changed';
+let DoctorNavigatorPanel = class DoctorNavigatorPanel extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.importDisabled = false;
+        this.workspaceReadOnly = false;
+        this.timeVortexVisible = false;
+        this.rolodexVisible = false;
+        this.rolodexDividerPosition = 40;
+    }
+    showTab(panel) {
+        this.tabGroup?.show(panel);
+    }
+    handleTabShow(event) {
+        this.dispatchEvent(new CustomEvent(NavigatorTabChanged, {
+            detail: { name: event.detail.name },
+            bubbles: true,
+            composed: true
+        }));
+    }
+    handleRolodexDividerChange(event) {
+        const position = event.target.position;
+        this.dispatchEvent(new CustomEvent(NavigatorRolodexDividerChanged, {
+            detail: { position },
+            bubbles: true,
+            composed: true
+        }));
+    }
+    renderModelTreeContent() {
+        if (this.rolodexVisible) {
+            return html `
+                <sl-split-panel vertical class="split-panel-rolodex"
+                                .position=${this.rolodexDividerPosition}
+                                @sl-reposition="${this.handleRolodexDividerChange}">
+                    <sl-icon slot="divider" name="grip-horizontal" class="divider-horiz" aria-hidden="true"></sl-icon>
+                    <div slot="start" class="model-tree-container">
+                        <slot name="model-tree"></slot>
+                    </div>
+                    <div slot="end" class="model-tree-container rolodex-container">
+                        <slot name="bundle-toolbar"></slot>
+                        <slot name="rolodex-tree"></slot>
+                    </div>
+                </sl-split-panel>
+            `;
+        }
+        return html `
+            <div class="model-tree-container">
+                <slot name="model-tree"></slot>
+            </div>
+        `;
+    }
+    renderNavigatorContent() {
+        const modelTreeContent = this.renderModelTreeContent();
+        if (this.timeVortexVisible) {
+            return html `
+                <sl-tab-group class="tab-group timevortex" @sl-tab-show="${this.handleTabShow}">
+                    <sl-tab slot="nav" panel="model-tree" class="tab">Document</sl-tab>
+                    <sl-tab slot="nav" panel="timeline" class="tab">Timeline</sl-tab>
+                    <sl-tab-panel name="model-tree" class="tab-panel" style="height: 100%">
+                        ${modelTreeContent}
+                    </sl-tab-panel>
+                    <sl-tab-panel name="timeline" class="tab-panel" style="height: 100%">
+                        <slot name="history-picker"></slot>
+                    </sl-tab-panel>
+                </sl-tab-group>
+            `;
+        }
+        return modelTreeContent;
+    }
+    render() {
+        return html `
+            <slot name="controls"></slot>
+            <div class="navigator-content">
+                ${this.renderNavigatorContent()}
+            </div>
+            <slot name="credit-ticker"></slot>
+        `;
+    }
+};
+DoctorNavigatorPanel.styles = [navigatorPanelCss];
+__decorate([
+    property({ type: Boolean })
+], DoctorNavigatorPanel.prototype, "importDisabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], DoctorNavigatorPanel.prototype, "workspaceReadOnly", void 0);
+__decorate([
+    property({ type: Boolean })
+], DoctorNavigatorPanel.prototype, "timeVortexVisible", void 0);
+__decorate([
+    property({ type: Boolean })
+], DoctorNavigatorPanel.prototype, "rolodexVisible", void 0);
+__decorate([
+    property({ type: Number })
+], DoctorNavigatorPanel.prototype, "rolodexDividerPosition", void 0);
+__decorate([
+    query('sl-tab-group.timevortex')
+], DoctorNavigatorPanel.prototype, "tabGroup", void 0);
+DoctorNavigatorPanel = __decorate([
+    customElement('pb33f-doctor-navigator-panel')
+], DoctorNavigatorPanel);
+export { DoctorNavigatorPanel };

package/dist/components/the-doctor/doctor-sidebar-panel.css.d.ts

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

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

@@ -0,0 +1,143 @@
+import { css } from "lit";
+export default css `
+    :host {
+        display: block;
+        position: relative;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+    }
+
+    .problems {
+        position: relative;
+        display: block;
+        padding-left: 10px;
+        overflow: hidden;
+        background-color: var(--background-color);
+        //width: 100%;
+        height: 100%;
+    }
+
+    .problems-data {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        max-height: calc(100vh - 100px);
+        overflow: hidden;
+    }
+
+    .problems::-webkit-scrollbar,
+    .problems-data::-webkit-scrollbar {
+        width: 8px;
+    }
+
+    .problems::-webkit-scrollbar-track,
+    .problems-data::-webkit-scrollbar-track {
+        background-color: black;
+    }
+
+    .problems::-webkit-scrollbar-thumb,
+    .problems-data::-webkit-scrollbar-thumb {
+        box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+        background: var(--secondary-color-lowalpha);
+        padding: var(--global-padding);
+    }
+
+    .collapse-side {
+        position: absolute;
+        right: 5px;
+        top: 4px;
+        padding: 0;
+        color: var(--secondary-color);
+        font-size: 1.4rem;
+    }
+
+    sl-icon-button.collapse-side::part(base) {
+        padding: 0;
+    }
+
+    sl-tab-group {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        --indicator-color: var(--secondary-color);
+    }
+
+    sl-tab-group::part(tabs) {
+        height: 30px;
+    }
+
+    sl-tab-group::part(nav) {
+        margin: 0;
+        max-width: 96%;
+    }
+
+    sl-tab-group::part(body) {
+        flex: 1;
+        overflow: hidden;
+    }
+
+    sl-tab-group::part(base) {
+        height: 100%
+    }
+
+    .tab {
+        font-size: 0.8rem;
+    }
+
+    .tab::part(base) {
+        font-family: var(--font-stack), monospace;
+        font-size: 0.9rem;
+        padding: 0 0.8rem;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+    }
+
+    .tab-panel {
+        padding: 0;
+        overflow: auto;
+    }
+
+    sl-tab-panel::part(base) {
+        padding-top: 10px;
+        overflow: auto;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+    }
+
+    ::slotted(*) {
+        display: block;
+        width: 100%;
+        height: 100%;
+        overflow: auto;
+    }
+
+    ::slotted([slot="problem-list"]),
+    ::slotted([slot="problems-overview"]),
+    ::slotted([slot="manage-ruleset"]),
+    ::slotted([slot="feedback"]),
+    ::slotted([slot="rendered-node"]) {
+        flex: 1;
+        min-height: 0;
+        overflow: auto;
+    }
+
+    .tools-container {
+        display: flex;
+        flex-direction: column;
+        height: calc(100vh - 140px);
+        overflow: hidden;
+    }
+
+    ::slotted([slot="tools-editor"]) {
+        flex: 1;
+        display: block;
+        min-height: 0;
+    }
+
+    .tools-actions {
+        padding: 10px;
+        border-top: 1px solid var(--secondary-color-dimmer);
+    }
+`;

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

@@ -0,0 +1,31 @@
+import { LitElement } from 'lit';
+import '@shoelace-style/shoelace/dist/components/tab-group/tab-group.js';
+import '@shoelace-style/shoelace/dist/components/tab-panel/tab-panel.js';
+import '@shoelace-style/shoelace/dist/components/tab/tab.js';
+import '@shoelace-style/shoelace/dist/components/icon-button/icon-button.js';
+import '@shoelace-style/shoelace/dist/components/tooltip/tooltip.js';
+import '@shoelace-style/shoelace/dist/components/button/button.js';
+import { SlTabGroup } from '@shoelace-style/shoelace';
+export declare const SidebarTabChanged = "doctor-sidebar-tab-changed";
+export declare const SidebarCollapseToggled = "doctor-sidebar-collapse-toggled";
+export interface SidebarTabChangedEvent {
+    name: string;
+}
+export declare class DoctorSidebarPanel extends LitElement {
+    static styles: import("lit").CSSResult[];
+    unavailable: boolean;
+    toolsCompareLoading: boolean;
+    toolsEditorHasContent: boolean;
+    collapsed: boolean;
+    tabGroup?: SlTabGroup;
+    private handleTabShow;
+    private handleCollapseToggle;
+    private handleToolsCompare;
+    showTab(panel: string): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'pb33f-doctor-sidebar-panel': DoctorSidebarPanel;
+    }
+}

package/dist/components/the-doctor/doctor-sidebar-panel.js

@@ -0,0 +1,131 @@
+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, query } from 'lit/decorators.js';
+import '@shoelace-style/shoelace/dist/components/tab-group/tab-group.js';
+import '@shoelace-style/shoelace/dist/components/tab-panel/tab-panel.js';
+import '@shoelace-style/shoelace/dist/components/tab/tab.js';
+import '@shoelace-style/shoelace/dist/components/icon-button/icon-button.js';
+import '@shoelace-style/shoelace/dist/components/tooltip/tooltip.js';
+import '@shoelace-style/shoelace/dist/components/button/button.js';
+import buttonCss from '../../css/button.css.js';
+import tooltipCss from '../../css/tooltip.css.js';
+import sidebarPanelCss from './doctor-sidebar-panel.css.js';
+export const SidebarTabChanged = 'doctor-sidebar-tab-changed';
+export const SidebarCollapseToggled = 'doctor-sidebar-collapse-toggled';
+let DoctorSidebarPanel = class DoctorSidebarPanel extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.unavailable = false;
+        this.toolsCompareLoading = false;
+        this.toolsEditorHasContent = false;
+        this.collapsed = false;
+    }
+    handleTabShow(event) {
+        this.dispatchEvent(new CustomEvent(SidebarTabChanged, {
+            detail: { name: event.detail.name },
+            bubbles: true,
+            composed: true
+        }));
+    }
+    handleCollapseToggle() {
+        this.collapsed = !this.collapsed;
+        this.dispatchEvent(new CustomEvent(SidebarCollapseToggled, {
+            detail: { collapsed: this.collapsed },
+            bubbles: true,
+            composed: true
+        }));
+    }
+    handleToolsCompare() {
+        this.dispatchEvent(new CustomEvent('doctor-tools-compare', {
+            bubbles: true,
+            composed: true
+        }));
+    }
+    showTab(panel) {
+        this.tabGroup?.show(panel);
+    }
+    render() {
+        return html `
+            <div class="problems-s">
+                <div class="problems-data-s" style="${this.collapsed ? 'display: none' : ''}">
+                    <sl-tab-group class="tab-group-s"
+                                  @sl-tab-show="${this.handleTabShow}">
+                        <sl-tab slot="nav" panel="overview" class="tab" active>Overview</sl-tab>
+                        <sl-tab slot="nav" panel="viewer" class="tab">Objects</sl-tab>
+                        <sl-tab slot="nav" panel="problems" class="tab">Problems</sl-tab>
+                        <sl-tab slot="nav" panel="tools" class="tab">Tools</sl-tab>
+                        <sl-tab slot="nav" panel="ruleset" class="tab">Rules</sl-tab>
+                        <sl-tab slot="nav" panel="feedback" class="tab">Feedback</sl-tab>
+
+                        <sl-tab-panel name="overview" class="tab-panel-s">
+                            <slot name="problems-overview"></slot>
+                        </sl-tab-panel>
+
+                        <sl-tab-panel name="problems" class="tab-panel-s">
+                            <slot name="problem-list"></slot>
+                        </sl-tab-panel>
+
+                        <sl-tab-panel name="tools" class="tab-panel">
+                            <div class="tools-container">
+                                <slot name="tools-editor"></slot>
+                                <div class="tools-actions">
+                                    <sl-button style="color: var(--warn-color)"
+                                               variant="warning"
+                                               class="premium"
+                                               ?loading=${this.toolsCompareLoading}
+                                               ?disabled=${!this.toolsEditorHasContent}
+                                               @click=${this.handleToolsCompare}>
+                                        Compare OpenAPI Specs
+                                    </sl-button>
+                                </div>
+                            </div>
+                        </sl-tab-panel>
+
+                        <sl-tab-panel name="ruleset" class="tab-panel">
+                            <slot name="manage-ruleset"></slot>
+                        </sl-tab-panel>
+
+                        <sl-tab-panel name="feedback" class="tab-panel">
+                            <slot name="feedback"></slot>
+                        </sl-tab-panel>
+
+                        <sl-tab-panel name="viewer" class="tab-panel">
+                            <slot name="rendered-node"></slot>
+                        </sl-tab-panel>
+                    </sl-tab-group>
+                </div>
+                <sl-tooltip content="collapse / expand the panel" hoist>
+                    <sl-icon-button class="collapse-side"
+                                    name="${this.collapsed ? 'chevron-bar-left' : 'chevron-bar-right'}"
+                                    label="Toggle sidebar"
+                                    @click="${this.handleCollapseToggle}"></sl-icon-button>
+                </sl-tooltip>
+            </div>
+        `;
+    }
+};
+DoctorSidebarPanel.styles = [buttonCss, tooltipCss, sidebarPanelCss];
+__decorate([
+    property({ type: Boolean })
+], DoctorSidebarPanel.prototype, "unavailable", void 0);
+__decorate([
+    property({ type: Boolean })
+], DoctorSidebarPanel.prototype, "toolsCompareLoading", void 0);
+__decorate([
+    property({ type: Boolean })
+], DoctorSidebarPanel.prototype, "toolsEditorHasContent", void 0);
+__decorate([
+    property({ type: Boolean })
+], DoctorSidebarPanel.prototype, "collapsed", void 0);
+__decorate([
+    query('sl-tab-group')
+], DoctorSidebarPanel.prototype, "tabGroup", void 0);
+DoctorSidebarPanel = __decorate([
+    customElement('pb33f-doctor-sidebar-panel')
+], DoctorSidebarPanel);
+export { DoctorSidebarPanel };

package/dist/components/the-doctor/doctor-url-overlay.css.d.ts

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

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

@@ -0,0 +1,59 @@
+import { css } from "lit";
+export default css `
+    :host {
+        display: block;
+    }
+
+    .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);
+    }
+
+    .editor-url-overlay.visible {
+        display: block;
+    }
+
+    #url-spinner {
+        padding: 5px 50px 5px 50px;
+        display: none;
+    }
+
+    #url-spinner.visible {
+        display: block;
+    }
+
+    .url-spinner-icon {
+        display: block;
+        margin: 20px auto 0 auto;
+        width: 200px;
+        color: var(--primary-color);
+        font-size: 5rem;
+        animation: spin 2s linear infinite;
+    }
+
+    .url-problem {
+        padding: 50px;
+        display: none;
+    }
+
+    .url-problem.visible {
+        display: block;
+    }
+
+    @keyframes spin {
+        0% {
+            transform: rotate(0deg);
+        }
+        100% {
+            transform: rotate(360deg);
+        }
+    }
+`;

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

@@ -0,0 +1,23 @@
+import { LitElement } from 'lit';
+import '@shoelace-style/shoelace/dist/components/icon/icon.js';
+import '@shoelace-style/shoelace/dist/components/button/button.js';
+import '../attention-box/attention-box.js';
+export type UrlOverlayMode = 'hidden' | 'loading' | 'error';
+export declare const UrlOverlayDismissed = "doctor-url-overlay-dismissed";
+export declare class DoctorUrlOverlay extends LitElement {
+    static styles: import("lit").CSSResult[];
+    activeURL: string;
+    errorCode: number;
+    errorMessage: string;
+    mode: UrlOverlayMode;
+    private handleDismiss;
+    show(): void;
+    hide(): void;
+    showError(code: number, message: string): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'pb33f-doctor-url-overlay': DoctorUrlOverlay;
+    }
+}