@design.estate/dees-catalog 1.8.3 → 1.8.4

package/dist_ts_web/elements/dees-chart-log.demo.js

@@ -1,5 +1,110 @@
 import { html } from '@design.estate/dees-element';
 export const demoFunc = () => {
+    let intervalId;
+    const serverSources = ['Server', 'Database', 'API', 'Auth', 'Cache', 'Queue', 'WebSocket', 'Scheduler'];
+    const logTemplates = {
+        debug: [
+            'Loading module: {{module}}',
+            'Cache hit for key: {{key}}',
+            'SQL query executed in {{time}}ms',
+            'Request headers: {{headers}}',
+            'Environment variable loaded: {{var}}',
+        ],
+        info: [
+            'Request received: {{method}} {{path}}',
+            'User {{userId}} authenticated successfully',
+            'Processing job {{jobId}} from queue',
+            'Scheduled task "{{task}}" started',
+            'WebSocket connection established from {{ip}}',
+        ],
+        warn: [
+            'Slow query detected: {{query}} ({{time}}ms)',
+            'Memory usage at {{percent}}%',
+            'Rate limit approaching for IP {{ip}}',
+            'Deprecated API endpoint called: {{endpoint}}',
+            'Certificate expires in {{days}} days',
+        ],
+        error: [
+            'Database connection lost: {{error}}',
+            'Failed to process request: {{error}}',
+            'Authentication failed for user {{user}}',
+            'File not found: {{path}}',
+            'Service unavailable: {{service}}',
+        ],
+        success: [
+            'Server started successfully on port {{port}}',
+            'Database migration completed',
+            'Backup completed: {{size}} MB',
+            'SSL certificate renewed',
+            'Health check passed: all systems operational',
+        ],
+    };
+    const generateRandomLog = () => {
+        const logElement = window.__demoLogElement;
+        if (!logElement) {
+            console.warn('Log element not ready yet');
+            return;
+        }
+        const levels = ['debug', 'info', 'warn', 'error', 'success'];
+        const weights = [0.2, 0.5, 0.15, 0.1, 0.05]; // Weighted probability
+        const random = Math.random();
+        let cumulative = 0;
+        let level = 'info';
+        for (let i = 0; i < weights.length; i++) {
+            cumulative += weights[i];
+            if (random < cumulative) {
+                level = levels[i];
+                break;
+            }
+        }
+        const source = serverSources[Math.floor(Math.random() * serverSources.length)];
+        const templates = logTemplates[level];
+        const template = templates[Math.floor(Math.random() * templates.length)];
+        // Replace placeholders with random values
+        const message = template
+            .replace('{{module}}', ['express', 'mongoose', 'redis', 'socket.io'][Math.floor(Math.random() * 4)])
+            .replace('{{key}}', 'user:' + Math.floor(Math.random() * 1000))
+            .replace('{{time}}', String(Math.floor(Math.random() * 500) + 50))
+            .replace('{{headers}}', 'Content-Type: application/json, Authorization: Bearer ...')
+            .replace('{{var}}', ['NODE_ENV', 'DATABASE_URL', 'API_KEY', 'PORT'][Math.floor(Math.random() * 4)])
+            .replace('{{method}}', ['GET', 'POST', 'PUT', 'DELETE'][Math.floor(Math.random() * 4)])
+            .replace('{{path}}', ['/api/users', '/api/auth/login', '/api/products', '/health'][Math.floor(Math.random() * 4)])
+            .replace('{{userId}}', String(Math.floor(Math.random() * 10000)))
+            .replace('{{jobId}}', 'job_' + Math.random().toString(36).substring(2, 11))
+            .replace('{{task}}', ['cleanup', 'backup', 'report-generation', 'cache-refresh'][Math.floor(Math.random() * 4)])
+            .replace('{{ip}}', `192.168.1.${Math.floor(Math.random() * 255)}`)
+            .replace('{{query}}', 'SELECT * FROM users WHERE ...')
+            .replace('{{percent}}', String(Math.floor(Math.random() * 30) + 70))
+            .replace('{{endpoint}}', '/api/v1/legacy')
+            .replace('{{days}}', String(Math.floor(Math.random() * 30) + 1))
+            .replace('{{error}}', ['ECONNREFUSED', 'ETIMEDOUT', 'ENOTFOUND'][Math.floor(Math.random() * 3)])
+            .replace('{{user}}', 'user_' + Math.floor(Math.random() * 1000))
+            .replace('{{service}}', ['Redis', 'MongoDB', 'ElasticSearch'][Math.floor(Math.random() * 3)])
+            .replace('{{port}}', String(3000 + Math.floor(Math.random() * 10)))
+            .replace('{{size}}', String(Math.floor(Math.random() * 500) + 100));
+        logElement.addLog(level, message, source);
+    };
+    const startSimulation = () => {
+        if (!intervalId) {
+            // Generate logs at random intervals between 500ms and 2500ms
+            const scheduleNext = () => {
+                generateRandomLog();
+                const nextDelay = Math.random() * 2000 + 500;
+                intervalId = window.setTimeout(() => {
+                    if (intervalId) {
+                        scheduleNext();
+                    }
+                }, nextDelay);
+            };
+            scheduleNext();
+        }
+    };
+    const stopSimulation = () => {
+        if (intervalId) {
+            window.clearTimeout(intervalId);
+            intervalId = null;
+        }
+    };
     return html `
     <style>
       .demoBox {
@@ -8,13 +113,33 @@ export const demoFunc = () => {
         height: 100%;
         width: 100%;
         padding: 40px;
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        gap: 20px;
+      }
+      .controls {
+        display: flex;
+        gap: 10px;
+        flex-wrap: wrap;
+      }
+      .info {
+        color: #888;
+        font-size: 12px;
+        font-family: 'Geist Sans', sans-serif;
       }
     </style>
     <div class="demoBox">
+      <div class="controls">
+        <dees-button @clicked=${() => generateRandomLog()}>Add Single Log</dees-button>
+        <dees-button @clicked=${() => startSimulation()}>Start Simulation</dees-button>
+        <dees-button @clicked=${() => stopSimulation()}>Stop Simulation</dees-button>
+      </div>
+      <div class="info">Simulating realistic server logs with various levels and sources</div>
       <dees-chart-log
-        .label=${'Event Log'}
+        .label=${'Production Server Logs'}
       ></dees-chart-log>
     </div>
   `;
 };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVlcy1jaGFydC1sb2cuZGVtby5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3RzX3dlYi9lbGVtZW50cy9kZWVzLWNoYXJ0LWxvZy5kZW1vLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxJQUFJLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQztBQUVuRCxNQUFNLENBQUMsTUFBTSxRQUFRLEdBQUcsR0FBRyxFQUFFO0lBQzNCLE9BQU8sSUFBSSxDQUFBOzs7Ozs7Ozs7Ozs7aUJBWUksV0FBVzs7O0dBR3pCLENBQUM7QUFDSixDQUFDLENBQUMifQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVlcy1jaGFydC1sb2cuZGVtby5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3RzX3dlYi9lbGVtZW50cy9kZWVzLWNoYXJ0LWxvZy5kZW1vLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxJQUFJLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQztBQUVuRCxNQUFNLENBQUMsTUFBTSxRQUFRLEdBQUcsR0FBRyxFQUFFO0lBQzNCLElBQUksVUFBa0IsQ0FBQztJQUV2QixNQUFNLGFBQWEsR0FBRyxDQUFDLFFBQVEsRUFBRSxVQUFVLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxPQUFPLEVBQUUsT0FBTyxFQUFFLFdBQVcsRUFBRSxXQUFXLENBQUMsQ0FBQztJQUV4RyxNQUFNLFlBQVksR0FBRztRQUNuQixLQUFLLEVBQUU7WUFDTCw0QkFBNEI7WUFDNUIsNEJBQTRCO1lBQzVCLGtDQUFrQztZQUNsQyw4QkFBOEI7WUFDOUIsc0NBQXNDO1NBQ3ZDO1FBQ0QsSUFBSSxFQUFFO1lBQ0osdUNBQXVDO1lBQ3ZDLDRDQUE0QztZQUM1QyxxQ0FBcUM7WUFDckMsbUNBQW1DO1lBQ25DLDhDQUE4QztTQUMvQztRQUNELElBQUksRUFBRTtZQUNKLDZDQUE2QztZQUM3Qyw4QkFBOEI7WUFDOUIsc0NBQXNDO1lBQ3RDLDhDQUE4QztZQUM5QyxzQ0FBc0M7U0FDdkM7UUFDRCxLQUFLLEVBQUU7WUFDTCxxQ0FBcUM7WUFDckMsc0NBQXNDO1lBQ3RDLHlDQUF5QztZQUN6QywwQkFBMEI7WUFDMUIsa0NBQWtDO1NBQ25DO1FBQ0QsT0FBTyxFQUFFO1lBQ1AsOENBQThDO1lBQzlDLDhCQUE4QjtZQUM5QiwrQkFBK0I7WUFDL0IseUJBQXlCO1lBQ3pCLDhDQUE4QztTQUMvQztLQUNGLENBQUM7SUFFRixNQUFNLGlCQUFpQixHQUFHLEdBQUcsRUFBRTtRQUM3QixNQUFNLFVBQVUsR0FBSSxNQUFjLENBQUMsZ0JBQWdCLENBQUM7UUFDcEQsSUFB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

package/dist_ts_web/elements/dees-chart-log.js

@@ -7,73 +7,297 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
-import { DeesElement, css, cssManager, customElement, html, property, state, } from '@design.estate/dees-element';
+import { DeesElement, css, cssManager, customElement, html, property, } from '@design.estate/dees-element';
 import * as domtools from '@design.estate/dees-domtools';
 import { demoFunc } from './dees-chart-log.demo.js';
-import ApexCharts from 'apexcharts';
 let DeesChartLog = class DeesChartLog extends DeesElement {
     static { this.demo = demoFunc; }
     constructor() {
         super();
-        this.label = 'Untitled Chart';
+        this.label = 'Server Logs';
+        this.logEntries = [];
+        this.autoScroll = true;
+        this.maxEntries = 1000;
         domtools.elementBasic.setup();
     }
     static { this.styles = [
         cssManager.defaultStyles,
         css `
       :host {
-        font-family: 'Geist Sans', sans-serif;
+        font-family: 'Geist Mono', 'Consolas', 'Monaco', monospace;
         color: #ccc;
-        font-weight: 600;
         font-size: 12px;
+        line-height: 1.4;
       }
       .mainbox {
         position: relative;
         width: 100%;
         height: 400px;
-        background: #222;
+        background: ${cssManager.bdTheme('#f8f9fa', '#0a0a0a')};
+        border: 1px solid ${cssManager.bdTheme('#dee2e6', '#333')};
         border-radius: 8px;
-        padding: 32px 16px 16px 0px;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
       }
 
-      .chartTitle {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        text-align: center;
-        padding-top: 16px;
+      .header {
+        background: ${cssManager.bdTheme('#e9ecef', '#1a1a1a')};
+        padding: 8px 16px;
+        border-bottom: 1px solid ${cssManager.bdTheme('#dee2e6', '#333')};
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        flex-shrink: 0;
       }
-      .chartContainer {
-        position: relative;
-        width: 100%;
+
+      .title {
+        font-weight: 600;
+        color: ${cssManager.bdTheme('#212529', '#fff')};
+      }
+
+      .controls {
+        display: flex;
+        gap: 8px;
+      }
+
+      .control-button {
+        background: ${cssManager.bdTheme('#e9ecef', '#2a2a2a')};
+        border: 1px solid ${cssManager.bdTheme('#ced4da', '#444')};
+        border-radius: 4px;
+        padding: 4px 8px;
+        color: ${cssManager.bdTheme('#495057', '#ccc')};
+        cursor: pointer;
+        font-size: 11px;
+        transition: all 0.2s;
+      }
+
+      .control-button:hover {
+        background: ${cssManager.bdTheme('#dee2e6', '#3a3a3a')};
+        border-color: ${cssManager.bdTheme('#adb5bd', '#555')};
+      }
+
+      .control-button.active {
+        background: ${cssManager.bdTheme('#007bff', '#4a4a4a')};
+        color: ${cssManager.bdTheme('#fff', '#fff')};
+      }
+
+      .logContainer {
+        flex: 1;
+        overflow-y: auto;
+        overflow-x: hidden;
+        padding: 8px 16px;
+        font-size: 12px;
+      }
+
+      .logEntry {
+        margin-bottom: 2px;
+        display: flex;
+        white-space: pre-wrap;
+        word-break: break-all;
+      }
+
+      .timestamp {
+        color: ${cssManager.bdTheme('#6c757d', '#666')};
+        margin-right: 8px;
+        flex-shrink: 0;
+      }
+
+      .level {
+        margin-right: 8px;
+        padding: 0 6px;
+        border-radius: 3px;
+        font-weight: 600;
+        text-transform: uppercase;
+        font-size: 10px;
+        flex-shrink: 0;
+      }
+
+      .level.debug {
+        color: ${cssManager.bdTheme('#6c757d', '#999')};
+        background: ${cssManager.bdTheme('rgba(108, 117, 125, 0.1)', '#333')};
+      }
+
+      .level.info {
+        color: ${cssManager.bdTheme('#0066cc', '#4a9eff')};
+        background: ${cssManager.bdTheme('rgba(0, 102, 204, 0.1)', 'rgba(74, 158, 255, 0.1)')};
+      }
+
+      .level.warn {
+        color: ${cssManager.bdTheme('#ff8800', '#ffb84a')};
+        background: ${cssManager.bdTheme('rgba(255, 136, 0, 0.1)', 'rgba(255, 184, 74, 0.1)')};
+      }
+
+      .level.error {
+        color: ${cssManager.bdTheme('#dc3545', '#ff4a4a')};
+        background: ${cssManager.bdTheme('rgba(220, 53, 69, 0.1)', 'rgba(255, 74, 74, 0.1)')};
+      }
+
+      .level.success {
+        color: ${cssManager.bdTheme('#28a745', '#4aff88')};
+        background: ${cssManager.bdTheme('rgba(40, 167, 69, 0.1)', 'rgba(74, 255, 136, 0.1)')};
+      }
+
+      .source {
+        color: ${cssManager.bdTheme('#6c757d', '#888')};
+        margin-right: 8px;
+        flex-shrink: 0;
+      }
+
+      .message {
+        color: ${cssManager.bdTheme('#212529', '#ddd')};
+        flex: 1;
+      }
+
+      .empty-state {
+        display: flex;
+        align-items: center;
+        justify-content: center;
         height: 100%;
+        color: ${cssManager.bdTheme('#6c757d', '#666')};
+        font-style: italic;
+      }
+
+      /* Custom scrollbar */
+      .logContainer::-webkit-scrollbar {
+        width: 8px;
+      }
+
+      .logContainer::-webkit-scrollbar-track {
+        background: ${cssManager.bdTheme('#e9ecef', '#1a1a1a')};
+      }
+
+      .logContainer::-webkit-scrollbar-thumb {
+        background: ${cssManager.bdTheme('#adb5bd', '#444')};
+        border-radius: 4px;
+      }
+
+      .logContainer::-webkit-scrollbar-thumb:hover {
+        background: ${cssManager.bdTheme('#6c757d', '#555')};
       }
     `,
     ]; }
     render() {
-        return html ` <div class="mainbox">
-      <div class="chartTitle">${this.label}</div>
-      <div class="chartContainer"></div>
-    </div> `;
+        return html `
+      <div class="mainbox">
+        <div class="header">
+          <div class="title">${this.label}</div>
+          <div class="controls">
+            <button 
+              class="control-button ${this.autoScroll ? 'active' : ''}"
+              @click=${() => { this.autoScroll = !this.autoScroll; }}
+            >
+              Auto Scroll
+            </button>
+            <button 
+              class="control-button"
+              @click=${() => { this.clearLogs(); }}
+            >
+              Clear
+            </button>
+          </div>
+        </div>
+        <div class="logContainer">
+          ${this.logEntries.length === 0
+            ? html `<div class="empty-state">No logs to display</div>`
+            : this.logEntries.map(entry => this.renderLogEntry(entry))}
+        </div>
+      </div>
+    `;
+    }
+    renderLogEntry(entry) {
+        const timestamp = new Date(entry.timestamp).toLocaleTimeString('en-US', {
+            hour12: false,
+            hour: '2-digit',
+            minute: '2-digit',
+            second: '2-digit',
+            fractionalSecondDigits: 3
+        });
+        return html `
+      <div class="logEntry">
+        <span class="timestamp">${timestamp}</span>
+        <span class="level ${entry.level}">${entry.level}</span>
+        ${entry.source ? html `<span class="source">[${entry.source}]</span>` : ''}
+        <span class="message">${entry.message}</span>
+      </div>
+    `;
     }
     async firstUpdated() {
-        const domtoolsInstance = await this.domtoolsPromise;
+        await this.domtoolsPromise;
+        this.logContainer = this.shadowRoot.querySelector('.logContainer');
+        // Initialize with demo server logs
+        const demoLogs = [
+            { timestamp: new Date().toISOString(), level: 'info', message: 'Server started on port 3000', source: 'Server' },
+            { timestamp: new Date().toISOString(), level: 'debug', message: 'Loading configuration from /etc/app/config.json', source: 'Config' },
+            { timestamp: new Date().toISOString(), level: 'info', message: 'Connected to MongoDB at mongodb://localhost:27017', source: 'Database' },
+            { timestamp: new Date().toISOString(), level: 'success', message: 'Database connection established successfully', source: 'Database' },
+            { timestamp: new Date().toISOString(), level: 'warn', message: 'No SSL certificate found, using self-signed certificate', source: 'Security' },
+            { timestamp: new Date().toISOString(), level: 'info', message: 'API routes initialized: GET /api/users, POST /api/users, DELETE /api/users/:id', source: 'Router' },
+            { timestamp: new Date().toISOString(), level: 'debug', message: 'Middleware stack: cors, bodyParser, authentication, errorHandler', source: 'Middleware' },
+            { timestamp: new Date().toISOString(), level: 'info', message: 'WebSocket server listening on ws://localhost:3001', source: 'WebSocket' },
+        ];
+        this.logEntries = demoLogs;
+        this.scrollToBottom();
+        // For demo purposes, store reference globally
+        if (window.__demoLogElement === undefined) {
+            window.__demoLogElement = this;
+        }
     }
-    async updateLog() {
+    async updateLog(entries) {
+        if (entries) {
+            // Add new entries
+            this.logEntries = [...this.logEntries, ...entries];
+            // Trim if exceeds max entries
+            if (this.logEntries.length > this.maxEntries) {
+                this.logEntries = this.logEntries.slice(-this.maxEntries);
+            }
+            // Trigger re-render
+            this.requestUpdate();
+            // Auto-scroll if enabled
+            await this.updateComplete;
+            if (this.autoScroll) {
+                this.scrollToBottom();
+            }
+        }
+    }
+    clearLogs() {
+        this.logEntries = [];
+        this.requestUpdate();
+    }
+    scrollToBottom() {
+        if (this.logContainer) {
+            this.logContainer.scrollTop = this.logContainer.scrollHeight;
+        }
+    }
+    addLog(level, message, source) {
+        const newEntry = {
+            timestamp: new Date().toISOString(),
+            level,
+            message,
+            source
+        };
+        this.updateLog([newEntry]);
     }
 };
-__decorate([
-    state(),
-    __metadata("design:type", ApexCharts)
-], DeesChartLog.prototype, "chart", void 0);
 __decorate([
     property(),
     __metadata("design:type", String)
 ], DeesChartLog.prototype, "label", void 0);
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Array)
+], DeesChartLog.prototype, "logEntries", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Boolean)
+], DeesChartLog.prototype, "autoScroll", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Number)
+], DeesChartLog.prototype, "maxEntries", void 0);
 DeesChartLog = __decorate([
     customElement('dees-chart-log'),
     __metadata("design:paramtypes", [])
 ], DeesChartLog);
 export { DeesChartLog };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVlcy1jaGFydC1sb2cuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi90c193ZWIvZWxlbWVudHMvZGVlcy1jaGFydC1sb2cudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7O0FBQUEsT0FBTyxFQUNMLFdBQVcsRUFDWCxHQUFHLEVBQ0gsVUFBVSxFQUNWLGFBQWEsRUFDYixJQUFJLEVBQ0osUUFBUSxFQUNSLEtBQUssR0FHTixNQUFNLDZCQUE2QixDQUFDO0FBRXJDLE9BQU8sS0FBSyxRQUFRLE1BQU0sOEJBQThCLENBQUM7QUFDekQsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLDBCQUEwQixDQUFDO0FBRXBELE9BQU8sVUFBVSxNQUFNLFlBQVksQ0FBQztBQVM3QixJQUFNLFlBQVksR0FBbEIsTUFBTSxZQUFhLFNBQVEsV0FBVzthQUM3QixTQUFJLEdBQUcsUUFBUSxBQUFYLENBQVk7SUFTOUI7UUFDRSxLQUFLLEVBQUUsQ0FBQztRQUhILFVBQUssR0FBVyxnQkFBZ0IsQ0FBQztRQUl0QyxRQUFRLENBQUMsWUFBWSxDQUFDLEtBQUssRUFBRSxDQUFDO0lBQ2hDLENBQUM7YUFFYSxXQUFNLEdBQUc7UUFDckIsVUFBVSxDQUFDLGFBQWE7UUFDeEIsR0FBRyxDQUFBOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztLQTZCRjtLQUNGLEFBaENtQixDQWdDbEI7SUFFSyxNQUFNO1FBQ1gsT0FBTyxJQUFJLENBQUE7Z0NBQ2lCLElBQUksQ0FBQyxLQUFLOztZQUU5QixDQUFDO0lBQ1gsQ0FBQztJQUVNLEtBQUssQ0FBQyxZQUFZO1FBQ3ZCLE1BQU0sZ0JBQWdCLEdBQUcsTUFBTSxJQUFJLENBQUMsZUFBZSxDQUFDO0lBRXRELENBQUM7SUFFTSxLQUFLLENBQUMsU0FBUztJQUV0QixDQUFDOztBQTFETTtJQUROLEtBQUssRUFBRTs4QkFDTSxVQUFVOzJDQUFDO0FBR2xCO0lBRE4sUUFBUSxFQUFFOzsyQ0FDNkI7QUFSN0IsWUFBWTtJQUR4QixhQUFhLENBQUMsZ0JBQWdCLENBQUM7O0dBQ25CLFlBQVksQ0FnRXhCIn0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVlcy1jaGFydC1sb2cuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi90c193ZWIvZWxlbWVudHMvZGVlcy1jaGFydC1sb2cudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7O0FBQUEsT0FBTyxFQUNMLFdBQVcsRUFDWCxHQUFHLEVBQ0gsVUFBVSxFQUNWLGFBQWEsRUFDYixJQUFJLEVBQ0osUUFBUSxHQUVULE1BQU0sNkJBQTZCLENBQUM7QUFFckMsT0FBTyxLQUFLLFFBQVEsTUFBTSw4QkFBOEIsQ0FBQztBQUN6RCxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sMEJBQTBCLENBQUM7QUFpQjdDLElBQU0sWUFBWSxHQUFsQixNQUFNLFlBQWEsU0FBUSxXQUFXO2FBQzdCLFNBQUksR0FBRyxRQUFRLEFBQVgsQ0FBWTtJQWdCOUI7UUFDRSxLQUFLLEVBQUUsQ0FBQztRQWRILFVBQUssR0FBVyxhQUFhLENBQUM7UUFHOUIsZUFBVSxHQUFnQixFQUFFLENBQUM7UUFHN0IsZUFBVSxHQUFZLElBQUksQ0FBQztRQUczQixlQUFVLEdBQVcsSUFBSSxDQUFDO1FBTS9CLFFBQVEsQ0FBQyxZQUFZLENBQUMsS0FBSyxFQUFFLENBQUM7SUFFaEMsQ0FBQzthQUVhLFdBQU0sR0FBRztRQUNyQixVQUFVLENBQUMsYUFBYTtRQUN4QixHQUFHLENBQUE7Ozs7Ozs7Ozs7O3NCQVdlLFVBQVUsQ0FBQyxPQUFPLENBQUMsU0FBUyxFQUFFLFNBQVMsQ0FBQzs0QkFDbEMsVUFBVSxDQUFDLE9BQU8sQ0FBQyxTQUFTLEVBQUUsTUFBTSxDQUFDOzs7Ozs7OztzQkFRM0MsVUFBVSxDQUFDLE9BQU8sQ0FBQyxTQUFTLEVBQUUsU0FBUyxDQUFDOzttQ0FFM0IsVUFBVSxDQUFDLE9BQU8sQ0FBQyxTQUFTLEVBQUUsTUFBTSxDQUFDOzs7Ozs7Ozs7aUJBU3ZELFVBQVUsQ0FBQyxPQUFPLENBQUMsU0FBUyxFQUFFLE1BQU0sQ0FBQzs7Ozs7Ozs7O3NCQVNoQyxV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

package/dist_ts_web/elements/dees-toast.d.ts

@@ -4,8 +4,30 @@ declare global {
         'dees-toast': DeesToast;
     }
 }
+export type ToastType = 'info' | 'success' | 'warning' | 'error';
+export type ToastPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center';
+export interface IToastOptions {
+    message: string;
+    type?: ToastType;
+    duration?: number;
+    position?: ToastPosition;
+}
 export declare class DeesToast extends DeesElement {
     static demo: () => Promise<TemplateResult<1>>;
+    private static toastContainers;
+    private static getOrCreateContainer;
+    static show(options: IToastOptions | string): Promise<DeesToast>;
+    static info(message: string, duration?: number): Promise<DeesToast>;
+    static success(message: string, duration?: number): Promise<DeesToast>;
+    static warning(message: string, duration?: number): Promise<DeesToast>;
+    static error(message: string, duration?: number): Promise<DeesToast>;
+    message: string;
+    type: ToastType;
+    duration: number;
+    isVisible: boolean;
     constructor();
+    static styles: import("@design.estate/dees-element").CSSResult[];
     render(): TemplateResult;
+    dismiss(): Promise<void>;
+    firstUpdated(): void;
 }

package/dist_ts_web/elements/dees-toast.demo.d.ts

@@ -1 +1,2 @@
+import './dees-button.js';
 export declare const demoFunc: () => Promise<import("@design.estate/dees-element").TemplateResult<1>>;