From d0789ab279125954d4bc8141df861ef7f918cec8 Mon Sep 17 00:00:00 2001
From: Philipp Kunz <gitlab@philkunz.com>
Date: Mon, 5 Feb 2024 10:07:49 +0100
Subject: [PATCH] fix(core): update

---
 ts_web/00_commitinfo_data.ts           |  2 +-
 ts_web/elements/dees-chart-log.demo.ts | 20 ++++++
 ts_web/elements/dees-chart-log.ts      | 90 ++++++++++++++++++++++++++
 ts_web/elements/index.ts               |  1 +
 4 files changed, 112 insertions(+), 1 deletion(-)
 create mode 100644 ts_web/elements/dees-chart-log.demo.ts
 create mode 100644 ts_web/elements/dees-chart-log.ts

diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts
index 86ffb6b..39f2b3a 100644
--- a/ts_web/00_commitinfo_data.ts
+++ b/ts_web/00_commitinfo_data.ts
@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '1.0.282',
+  version: '1.0.283',
   description: 'website for lossless.com'
 }
diff --git a/ts_web/elements/dees-chart-log.demo.ts b/ts_web/elements/dees-chart-log.demo.ts
new file mode 100644
index 0000000..6db6b15
--- /dev/null
+++ b/ts_web/elements/dees-chart-log.demo.ts
@@ -0,0 +1,20 @@
+import { html } from '@design.estate/dees-element';
+
+export const demoFunc = () => {
+  return html`
+    <style>
+      .demoBox {
+        position: relative;
+        background: #000000;
+        height: 100%;
+        width: 100%;
+        padding: 40px;
+      }
+    </style>
+    <div class="demoBox">
+      <dees-chart-log
+        .label=${'Event Log'}
+      ></dees-chart-log>
+    </div>
+  `;
+};
diff --git a/ts_web/elements/dees-chart-log.ts b/ts_web/elements/dees-chart-log.ts
new file mode 100644
index 0000000..0e6f2db
--- /dev/null
+++ b/ts_web/elements/dees-chart-log.ts
@@ -0,0 +1,90 @@
+import {
+  DeesElement,
+  css,
+  cssManager,
+  customElement,
+  html,
+  property,
+  state,
+  type CSSResult,
+  type TemplateResult,
+} 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';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-chart-log': DeesChartLog;
+  }
+}
+
+@customElement('dees-chart-log')
+export class DeesChartLog extends DeesElement {
+  public static demo = demoFunc;
+
+  // instance
+  @state()
+  public chart: ApexCharts;
+
+  @property()
+  public label: string = 'Untitled Chart';
+
+  constructor() {
+    super();
+    domtools.elementBasic.setup();
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        font-family: 'Roboto', sans-serif;
+        color: #ccc;
+        font-weight: 600;
+        font-size: 12px;
+      }
+      .mainbox {
+        position: relative;
+        width: 100%;
+        max-width: 600px;
+        height: 400px;
+        background: #222;
+        border-radius: 8px;
+        padding: 32px 16px 16px 0px;
+      }
+
+      .chartTitle {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        text-align: center;
+        padding-top: 16px;
+      }
+      .chartContainer {
+        position: relative;
+        width: 100%;
+        height: 100%;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html` <div class="mainbox">
+      <div class="chartTitle">${this.label}</div>
+      <div class="chartContainer"></div>
+    </div> `;
+  }
+
+  public async firstUpdated() {
+    const domtoolsInstance = await this.domtoolsPromise;
+    
+  }
+
+  public async updateLog() {
+    
+  }
+}
diff --git a/ts_web/elements/index.ts b/ts_web/elements/index.ts
index d15ba92..8dac80e 100644
--- a/ts_web/elements/index.ts
+++ b/ts_web/elements/index.ts
@@ -7,6 +7,7 @@ export * from './dees-appui-mainselector.js';
 export * from './dees-button-exit.js';
 export * from './dees-button.js';
 export * from './dees-chart-area.js';
+export * from './dees-chart-log.js';
 export * from './dees-chips.js';
 export * from './dees-contextmenu.js';
 export * from './dees-dataview-codebox.js';