@pb33f/cowboy-components 0.1.15 → 0.2.0

package/dist/components/toast/toast-component.css.d.ts

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

package/dist/components/toast/toast-component.css.js

@@ -0,0 +1,151 @@
+import { css } from "lit";
+export default css `
+
+    .toast {
+        background-color: var(--background-color);
+        color: var(--font-color);
+        border: 1px dashed var(--secondary-color);
+        border-radius: 0;
+        font-family: var(--font-stack), monospace;
+        width: calc(80% - 1px);
+        height:150px;
+        opacity: 1;
+        transform: translateX(calc(120% + 20px));
+        transition: all 0.2s cubic-bezier(0.68, -0.55, 0.25, 1.35);
+        position: relative;
+        margin-bottom: 10px;
+        pointer-events: all;
+        z-index: 101;
+    }
+    
+    .active {
+        transform: translateX(22%);
+    }
+    
+    .done {
+        transform: translateX(calc(120% + 20px));
+        transition: all 0.3s cubic-bezier(0.68, -0.55, 0.25, 1.35);
+
+    }
+
+    .toast-timer {
+        width: 100%;
+        height: 3px;
+        background-color: var(--primary-color);
+        position: absolute;
+        bottom: -1px;
+    }
+    
+    @keyframes progress {
+        100%{
+            width: 0;
+        }
+    }
+    
+    .icon {
+        width: 28px;
+        font-size: 1.6rem;
+        margin-right: 10px;
+        color: var(--primary-color);
+    }
+    
+    h3 {
+        margin-top: 0;
+        padding-top: 0;
+    }
+    
+    p {
+        font-size: 0.9rem;
+    }
+
+    .toast-info {
+        border-color: var(--primary-color);
+    }
+
+    .toast-warning {
+        border-color: var(--warn-color);
+    }
+
+    .toast-error {
+        border-color: var(--error-color);
+        background-color: var(--error-color-dark);
+    }
+
+    .toast-success {
+        border-color: var(--terminal-text);
+    }
+    
+    .info {
+        color: var(--primary-color);
+    }
+
+    .scoredown {
+        color: var(--font-color-sub1);
+    }
+
+    .scoreup {
+        color: var(--terminal-text);
+    }
+
+    .toast-scoredown {
+        border-color: var(--font-color-sub1);
+    }
+
+    .toast-scoreup {
+        border-color: var(--terminal-text);
+    }
+    
+    
+    .info {
+        color: var(--primary-color);
+    }
+    
+    .warning {
+        color: var(--warn-color);
+    }
+
+    .error {
+        color: var(--error-color);
+    }
+    
+    .success {
+        color: var(--terminal-text);
+    }
+
+    .timer-scoredown {
+        background-color: var(--font-color-sub1);
+    }
+
+    .timer-scoreup {
+        background-color: var(--terminal-text);
+    }
+    
+    .timer-info {
+        background-color: var(--primary-color);
+    }
+
+    .timer-warning {
+        background-color: var(--warn-color);
+    }
+
+    .timer-error {
+        background-color: var(--error-color);
+    }
+
+    .timer-success {
+        background-color: var(--terminal-text);
+    }
+    
+    .toast-close {
+        position: absolute;
+        top: 0;
+        right: 0;
+        font-size: 1.3rem;
+    }
+    
+    .toast-body {
+        padding: 10px;
+        font-size: 0.9rem;
+        display: flex;
+    }
+`;

package/dist/components/toast/toast-component.d.ts

@@ -0,0 +1,19 @@
+import { LitElement } from "lit";
+import { Toast } from '../../model/toast.js';
+import "@shoelace-style/shoelace/dist/components/icon-button/icon-button.js";
+export declare class ToastComponent extends LitElement {
+    static styles: import("lit").CSSResult[];
+    toast: Toast;
+    toastElement: HTMLElement;
+    toastTimer: HTMLElement;
+    isActive: boolean;
+    closeTimer: any;
+    secondTimer: any;
+    secondsLeft: number;
+    toastLife: number;
+    constructor(toast?: Toast);
+    close(): void;
+    activate(): void;
+    renderIcon(): import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/components/toast/toast-component.js

@@ -0,0 +1,116 @@
+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, query } from "lit/decorators.js";
+import { html, LitElement } from "lit";
+import { ToastType } from '../../model/toast.js';
+import toastComponentCss from "./toast-component.css.js";
+import "@shoelace-style/shoelace/dist/components/icon-button/icon-button.js";
+import { ToastExpired } from "../../events/doctor.js";
+let ToastComponent = class ToastComponent extends LitElement {
+    constructor(toast) {
+        super();
+        this.toastLife = 5;
+        if (toast) {
+            this.toast = toast;
+        }
+        this.secondsLeft = this.toastLife;
+    }
+    close() {
+        this.toastElement.classList.remove('active');
+        this.toastTimer?.remove();
+        this.dispatchEvent(new CustomEvent(ToastExpired, {
+            bubbles: true,
+            composed: true,
+            detail: {
+                toastId: this.toast.id
+            }
+        }));
+    }
+    activate() {
+        if (!this.isActive) {
+            this.secondTimer = setInterval(() => {
+                this.secondsLeft--;
+                if (this.toastTimer)
+                    this.toastTimer.style.width = `${this.secondsLeft * 100 / this.toastLife}%`;
+            }, 1000);
+            this.closeTimer = setTimeout(() => {
+                this.close();
+                clearInterval(this.secondTimer);
+            }, this.toastLife * 1000);
+        }
+        else {
+            if (this.toastTimer) {
+                this.toastTimer.style.width = `${this.secondsLeft * 100 / this.toastLife}%`;
+            }
+            return;
+        }
+        this.isActive = true;
+    }
+    renderIcon() {
+        switch (this.toast.type) {
+            case ToastType.INFO:
+                return html `
+                    <sl-icon name="info-square"></sl-icon>`;
+            case ToastType.SUCCESS:
+                return html `
+                    <sl-icon name="check-square"></sl-icon>`;
+            case ToastType.ERROR:
+                return html `
+                    <sl-icon name="x-square"></sl-icon>`;
+            case ToastType.WARNING:
+                return html `
+                    <sl-icon name="exclamation-triangle"></sl-icon>`;
+            case ToastType.SCOREDOWN:
+                return html `
+                    <sl-icon name="arrow-down"></sl-icon>`;
+            case ToastType.SCOREUP:
+                return html `
+                    <sl-icon name="arrow-up"></sl-icon>`;
+            default:
+                return html `
+                    <sl-icon name="info-square"></sl-icon>`;
+        }
+    }
+    render() {
+        return html `
+            <div class="toast ${this.isActive ? 'active' : ''} toast-${this.toast.type}">
+                <div class="toast-body">
+                    <div class="icon ${this.toast.type}">
+                        ${this.renderIcon()}
+                    </div>
+                    <div class="details">
+                        <h3 class="${this.toast.type}">${this.toast.title}</h3>
+                        <p>${this.toast.body}</p>
+                    </div>
+                </div>
+                <div class="toast-close ${this.toast.type}">
+                    <sl-icon-button class="${this.toast.type}" name="x-lg" label="close"
+                                    @click="${this.close}"></sl-icon-button>
+                </div>
+                <div class="toast-timer timer-${this.toast.type}">
+                </div>
+            </div>
+        `;
+    }
+};
+ToastComponent.styles = [toastComponentCss];
+__decorate([
+    property()
+], ToastComponent.prototype, "toast", void 0);
+__decorate([
+    query('.toast')
+], ToastComponent.prototype, "toastElement", void 0);
+__decorate([
+    query('.toast-timer')
+], ToastComponent.prototype, "toastTimer", void 0);
+__decorate([
+    property()
+], ToastComponent.prototype, "isActive", void 0);
+ToastComponent = __decorate([
+    customElement('pb33f-toast')
+], ToastComponent);
+export { ToastComponent };

package/dist/components/toast/toast-manager.d.ts

@@ -0,0 +1,13 @@
+import { LitElement } from "lit";
+import { ToastComponent } from "./toast-component.js";
+import { Toast } from "../../model/toast.js";
+import { AddToastEvent, ToastExpiredEvent } from "../../events/doctor.js";
+export declare class ToastManager extends LitElement {
+    toasts: ToastComponent[];
+    constructor();
+    removeToast(evt: CustomEvent<ToastExpiredEvent>): void;
+    addToastManually(toast: Toast): void;
+    addToast(evt: CustomEvent<AddToastEvent>): void;
+    updated(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/components/toast/toast-manager.js

@@ -0,0 +1,54 @@
+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 { ToastComponent } from "./toast-component.js";
+import { AddToast, ToastExpired } from "../../events/doctor.js";
+let ToastManager = class ToastManager extends LitElement {
+    constructor() {
+        super();
+        this.toasts = [];
+        // @ts-ignore
+        this.addEventListener(ToastExpired, this.removeToast);
+        // @ts-ignore
+        this.addEventListener(AddToast, this.addToast);
+    }
+    removeToast(evt) {
+        setTimeout(() => {
+            this.toasts = this.toasts.filter(toast => toast.toast.id !== evt.detail.toastId);
+        }, 500);
+    }
+    addToastManually(toast) {
+        this.toasts.unshift(new ToastComponent(toast));
+        this.requestUpdate();
+    }
+    addToast(evt) {
+        this.toasts.unshift(new ToastComponent(evt.detail.toast));
+        this.requestUpdate();
+    }
+    updated() {
+        this.toasts?.forEach(toast => {
+            setTimeout(() => {
+                toast.activate();
+            }, 200);
+        });
+    }
+    render() {
+        return html `
+            <div class="toast-manager">
+                ${this.toasts?.map(toast => html `${toast}`)}
+            </div>
+        `;
+    }
+};
+__decorate([
+    property()
+], ToastManager.prototype, "toasts", void 0);
+ToastManager = __decorate([
+    customElement('pb33f-toast-manager')
+], ToastManager);
+export { ToastManager };