1.5.2

.gitlab-ci.yml

@@ -1,128 +0,0 @@
-# gitzone ci_default
-image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
-
-cache:
-  paths:
-    - .npmci_cache/
-  key: '$CI_BUILD_STAGE'
-
-stages:
-  - security
-  - test
-  - release
-  - metadata
-
-before_script:
-  - pnpm install -g pnpm
-  - pnpm install -g @shipzone/npmci
-  - npmci npm prepare
-
-# ====================
-# security stage
-# ====================
-# ====================
-# security stage
-# ====================
-auditProductionDependencies:
-  image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
-  stage: security
-  script:
-     - npmci command npm config set registry https://registry.npmjs.org
-     - npmci command pnpm audit --audit-level=high --prod
-  tags:
-    - lossless
-    - docker
-  allow_failure: true
-
-auditDevDependencies:
-  image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
-  stage: security
-  script:
-    - npmci command npm config set registry https://registry.npmjs.org
-    - npmci command pnpm audit --audit-level=high --dev
-  tags:
-    - lossless
-    - docker
-  allow_failure: true
-
-# ====================
-# test stage
-# ====================
-
-testStable:
-  stage: test
-  script:
-    - npmci node install stable
-    - npmci npm install
-    - npmci npm test
-  coverage: /\d+.?\d+?\%\s*coverage/
-  tags:
-    - docker
-
-testBuild:
-  stage: test
-  script:
-    - npmci node install stable
-    - npmci npm install
-    - npmci npm build
-  coverage: /\d+.?\d+?\%\s*coverage/
-  tags:
-    - docker
-
-release:
-  stage: release
-  script:
-    - npmci node install stable
-    - npmci npm publish
-  only:
-    - tags
-  tags:
-    - lossless
-    - docker
-    - notpriv
-
-# ====================
-# metadata stage
-# ====================
-codequality:
-  stage: metadata
-  allow_failure: true
-  only:
-    - tags
-  script:
-    - npmci command npm install -g typescript
-    - npmci npm prepare
-    - npmci npm install
-  tags:
-    - lossless
-    - docker
-    - priv
-
-trigger:
-  stage: metadata
-  script:
-    - npmci trigger
-  only:
-    - tags
-  tags:
-    - lossless
-    - docker
-    - notpriv
-
-pages:
-  stage: metadata
-  script:
-    - npmci node install stable
-    - npmci npm install
-    - npmci command npm run buildDocs
-  tags:
-    - lossless
-    - docker
-    - notpriv
-  only:
-    - tags
-  artifacts:
-    expire_in: 1 week
-    paths:
-      - public
-  allow_failure: true

changelog.md

@@ -1,5 +1,56 @@
 # Changelog
 
+## 2025-04-11 - 1.5.2 - fix(ci)
+Remove obsolete GitLab CI configuration file
+
+- Deleted .gitlab-ci.yml as the CI pipeline configuration is now managed elsewhere.
+- Cleaned up CI stages for security, testing, release, and metadata.
+
+## 2025-04-11 - 1.5.1 - fix(readme)
+Update readme with comprehensive reference documentation: add a usage snippet for components like DeesButton, introduce a detailed overview table of all component categories, and enhance documentation sections for each component group.
+
+- Added a code example showing how to import and use DeesButton.
+- Introduced a components overview table that categorizes Core UI, Forms, Layout, Data Display, Visualization, Dialogs & Overlays, Navigation, and Development components.
+- Expanded detailed documentation with usage examples for each component type.
+- Reorganized content to improve clarity and ease of navigation for developers.
+
+## 2025-04-11 - 1.5.0 - feat(badge)
+Add dees-badge component with demo file and update packageManager field in package.json
+
+- Introduce a new badge component allowing different types (default, primary, success, warning, error) with an optional rounded style
+- Provide a demo for the badge component
+- Export the badge component in the main elements index
+- Update package.json to include an explicit packageManager field
+
+## 2025-01-20 - 1.4.1 - fix(dependencies)
+Update dependency versions for smartpromise, webcontainer/api, tapbundle, and @types/node
+
+- Update @push.rocks/smartpromise to version ^4.2.0
+- Downgrade @webcontainer/api to version 1.2.0
+- Update @push.rocks/tapbundle to version ^5.5.6
+- Update @types/node to version ^22.10.7
+
+## 2025-01-20 - 1.4.0 - feat(dees-terminal)
+Enhanced the dees-terminal component to support environment variable settings and improved setup command execution.
+
+- Added environment property to pass custom environment variables.
+- Introduced webcontainerDeferred to handle the promise for web container creation.
+- Enhanced demo to illustrate environment variable usage.
+- Improved async interaction with the terminal for setting environment variables and executing setup commands.
+
+## 2025-01-15 - 1.3.4 - fix(chart)
+Fix chart rendering and appearance issues in the DeesChartArea component.
+
+- Resolved issues with chart dimensions calculation based on padding.
+- Adjusted grid and axis lines appearance for better visibility.
+- Updated tooltip and grid line styling for better accessibility.
+- Improved series data representation as time-series for more accurate display.
+
+## 2024-12-17 - 1.3.3 - fix(dees-input-multitoggle)
+Add missing TypeScript declaration for dees-input-multitoggle
+
+- Added a missing declaration to the HTMLElementTagNameMap for 'dees-input-multitoggle' element.
+
 ## 2024-12-09 - 1.3.2 - fix(metadata)
 Updated package metadata and readme for better project description and structure.
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "1.3.2",
+  "version": "1.5.2",
   "private": false,
   "description": "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.",
   "main": "dist_ts_web/index.js",
@@ -15,23 +15,23 @@
   "author": "Lossless GmbH",
   "license": "MIT",
   "dependencies": {
-    "@design.estate/dees-domtools": "^2.0.61",
+    "@design.estate/dees-domtools": "^2.1.1",
     "@design.estate/dees-element": "^2.0.39",
     "@design.estate/dees-wcctools": "^1.0.90",
-    "@fortawesome/fontawesome-svg-core": "^6.6.0",
-    "@fortawesome/free-brands-svg-icons": "^6.6.0",
-    "@fortawesome/free-regular-svg-icons": "^6.6.0",
-    "@fortawesome/free-solid-svg-icons": "^6.6.0",
+    "@fortawesome/fontawesome-svg-core": "^6.7.2",
+    "@fortawesome/free-brands-svg-icons": "^6.7.2",
+    "@fortawesome/free-regular-svg-icons": "^6.7.2",
+    "@fortawesome/free-solid-svg-icons": "^6.7.2",
     "@push.rocks/smarti18n": "^1.0.4",
-    "@push.rocks/smartpromise": "^4.0.4",
+    "@push.rocks/smartpromise": "^4.2.0",
     "@push.rocks/smartstring": "^4.0.15",
-    "@tsclass/tsclass": "^4.1.2",
+    "@tsclass/tsclass": "^4.4.0",
     "@webcontainer/api": "1.2.0",
-    "apexcharts": "^3.54.0",
-    "highlight.js": "11.10.0",
+    "apexcharts": "^4.3.0",
+    "highlight.js": "11.11.1",
     "ibantools": "^4.5.1",
-    "monaco-editor": "^0.52.0",
-    "pdfjs-dist": "^4.6.82",
+    "monaco-editor": "^0.52.2",
+    "pdfjs-dist": "^4.10.38",
     "xterm": "^5.3.0",
     "xterm-addon-fit": "^0.8.0"
   },
@@ -39,10 +39,10 @@
     "@git.zone/tsbuild": "^2.1.84",
     "@git.zone/tsbundle": "^2.0.15",
     "@git.zone/tstest": "^1.0.90",
-    "@git.zone/tswatch": "^2.0.23",
+    "@git.zone/tswatch": "^2.0.37",
     "@push.rocks/projectinfo": "^5.0.2",
-    "@push.rocks/tapbundle": "^5.3.0",
-    "@types/node": "^22.7.4"
+    "@push.rocks/tapbundle": "^5.5.6",
+    "@types/node": "^22.10.7"
   },
   "files": [
     "ts/**/*",
@@ -84,5 +84,6 @@
     "Web Applications",
     "Modern Web",
     "Frontend Development"
-  ]
+  ],
+  "packageManager": "pnpm@10.7.0+sha512.6b865ad4b62a1d9842b61d674a393903b871d9244954f652b8842c2b553c72176b278f64c463e52d40fff8aba385c235c8c9ecf5cc7de4fd78b8bb6d49633ab6"
 }

readme.md

@@ -9,191 +9,215 @@ npm install @design.estate/dees-catalog
 ```
 
 ## Usage
-
-### Overview
-
-The `@design.estate/dees-catalog` is a powerful library that offers a suite of dynamic components designed for building sophisticated web applications. This library leverages modern web standards such as Web Components, and programming languages like JavaScript and TypeScript to provide developers with modular and reusable components. These components enhance the development workflow by offering ready-to-use solutions for UI design and interactivity, enabling developers to create intricate and functional applications efficiently.
-
-Below, we will explore the diverse range of components available, demonstrating their integration and usage thoroughly within real-world scenarios. Each example will be crafted in TypeScript to ensure type safety and maintainable code. Let's navigate through the components by examining their setups, features, and potential applications in a comprehensive manner.
-
-### Getting Started with Components
-
-To use these components, you first need to import them into your project. Depending on your development environment, you might be using a module bundler that supports ES modules. In such cases, importing components is straightforward as demonstrated below:
-
-```typescript
-import {
-  DeesButton,
-  DeesModal,
-  DeesTable,
-  DeesAppuiBase,
-  DeesForm,
-  DeesInputText,
-  DeesAppuiMainmenu,
-  DeesAppuiMainselector
-} from '@design.estate/dees-catalog';
-```
-
-### Button Component: `DeesButton`
-
-`DeesButton` is a versatile button component that can be configured for various UI needs such as form submissions, navigation actions, or interactive interfaces. It supports multiple styles including normal, highlighted, discreet, and status-based variations (e.g., pending, success, error).
-
-#### Example Usage
+To use the components provided by `@design.estate/dees-catalog`, you need to import them into your project. Here's an example of how to import and use the `DeesButton` component:
 
 ```typescript
 import { DeesButton } from '@design.estate/dees-catalog';
 
-// Create a simple button
-const submitButton = document.createElement('dees-button');
-submitButton.text = 'Submit';
-submitButton.type = 'highlighted';
+const button = document.createElement('dees-button');
+button.text = 'Click me';
+button.type = 'highlighted'; // Options: normal, highlighted, discreet
+button.status = 'pending'; // Options: normal, pending, success, error
 
-// Add functionality
-submitButton.addEventListener('clicked', () => {
-  console.log('Submit button clicked!');
-});
-document.body.appendChild(submitButton);
-
-// Handling status change
-async function handleFormSubmission() {
-  submitButton.status = 'pending';
-  try {
-    await simulateNetworkRequest();
-    submitButton.status = 'success';
-  } catch {
-    submitButton.status = 'error';
-  }
-}
-
-function simulateNetworkRequest() {
-  return new Promise(resolve => setTimeout(resolve, 2000));
-}
-
-submitButton.addEventListener('clicked', handleFormSubmission);
+document.body.appendChild(button);
 ```
 
-### Modal Component: `DeesModal`
+## Components Overview
 
-The `DeesModal` component is used to display content in an overlay. It is suitable for scenarios like alerts, dialog boxes, or interactive user forms. The modal can be highly customized with different header, content, and footer components.
+Below is a comprehensive list of all available components:
 
-#### Example Usage
+| Category | Components |
+|----------|------------|
+| Core UI | `DeesButton`, `DeesBadge`, `DeesChips`, `DeesIcon`, `DeesLabel`, `DeesSpinner`, `DeesToast` |
+| Forms | `DeesForm`, `DeesInputText`, `DeesInputCheckbox`, `DeesInputDropdown`, `DeesInputRadio`, `DeesInputFileupload`, `DeesInputIban`, `DeesInputPhone`, `DeesInputQuantitySelector`, `DeesInputMultitoggle`, `DeesFormSubmit` |
+| Layout | `DeesAppuiBase`, `DeesAppuiMainmenu`, `DeesAppuiMainselector`, `DeesAppuiMaincontent`, `DeesAppuiAppbar`, `DeesMobileNavigation` |
+| Data Display | `DeesTable`, `DeesDataviewCodebox`, `DeesDataviewStatusobject`, `DeesPdf` |
+| Visualization | `DeesChartArea`, `DeesChartLog` |
+| Dialogs & Overlays | `DeesModal`, `DeesContextmenu`, `DeesSpeechbubble`, `DeesWindowlayer` |
+| Navigation | `DeesStepper`, `DeesProgressbar` |
+| Development | `DeesEditor`, `DeesEditorMarkdown`, `DeesTerminal`, `DeesUpdater` |
+
+## Detailed Component Documentation
+
+### Core UI Components
+
+#### `DeesButton`
+A versatile button component supporting multiple styles and states.
 
 ```typescript
-import { DeesModal } from '@design.estate/dees-catalog';
-import { html } from '@design.estate/dees-element';
+const button = document.createElement('dees-button');
+button.text = 'Click me';
+button.type = 'highlighted'; // Options: normal, highlighted, discreet
+button.status = 'pending'; // Options: normal, pending, success, error
+```
 
-// Creating a modal
-const modalContent = html`<p>Welcome to our platform</p>`;
-const modal = DeesModal.createAndShow({
-  heading: 'Welcome',
-  content: modalContent,
+#### `DeesBadge`
+Display status indicators or counts with customizable styles.
+
+```typescript
+<dees-badge
+  type="success"  // Options: default, primary, success, warning, error
+  text="New"
+  rounded
+></dees-badge>
+```
+
+#### `DeesChips`
+Interactive chips/tags with selection capabilities.
+
+```typescript
+<dees-chips
+  selectionMode="multiple"  // Options: none, single, multiple
+  chipsAreRemovable
+  .selectableChips=${[
+    { key: 'tag1', value: 'Important' },
+    { key: 'tag2', value: 'Urgent' }
+  ]}
+></dees-chips>
+```
+
+### Form Components
+
+#### `DeesForm`
+Container component for form elements with built-in validation and data collection.
+
+```typescript
+<dees-form>
+  <dees-input-text required label="Username"></dees-input-text>
+  <dees-input-password label="Password"></dees-input-password>
+  <dees-form-submit>Submit</dees-form-submit>
+</dees-form>
+```
+
+#### `DeesInputText`
+Text input field with validation and formatting options.
+
+```typescript
+<dees-input-text
+  label="Email"
+  required
+  type="email"
+  placeholder="Enter your email"
+></dees-input-text>
+```
+
+#### `DeesInputDropdown`
+Dropdown selection component with search and multi-select capabilities.
+
+```typescript
+<dees-input-dropdown
+  label="Country"
+  .options=${[
+    { key: 'us', option: 'United States' },
+    { key: 'uk', option: 'United Kingdom' }
+  ]}
+></dees-input-dropdown>
+```
+
+### Layout Components
+
+#### `DeesAppuiBase`
+Base layout component for application structure.
+
+```typescript
+<dees-appui-base>
+  <dees-appui-mainmenu></dees-appui-mainmenu>
+  <dees-appui-maincontent></dees-appui-maincontent>
+</dees-appui-base>
+```
+
+#### `DeesAppuiMainmenu`
+Navigation menu component for application sidebar.
+
+```typescript
+<dees-appui-mainmenu
+  .menuItems=${[
+    { label: 'Dashboard', icon: 'home' },
+    { label: 'Settings', icon: 'cog' }
+  ]}
+></dees-appui-mainmenu>
+```
+
+### Data Display Components
+
+#### `DeesTable`
+Advanced table component with sorting, filtering, and row selection.
+
+```typescript
+<dees-table
+  .data=${tableData}
+  .columns=${[
+    { key: 'name', label: 'Name' },
+    { key: 'age', label: 'Age' }
+  ]}
+  selectable
+></dees-table>
+```
+
+### Visualization Components
+
+#### `DeesChartArea`
+Area chart component using ApexCharts.
+
+```typescript
+<dees-chart-area
+  .series=${[
+    { name: 'Sales', data: [30, 40, 35, 50] }
+  ]}
+></dees-chart-area>
+```
+
+### Dialog Components
+
+#### `DeesModal`
+Modal dialog component with customizable content and actions.
+
+```typescript
+DeesModal.createAndShow({
+  heading: 'Confirm Action',
+  content: html`<p>Are you sure?</p>`,
   menuOptions: [
-    { name: 'Close', action: () => modal.destroy() },
-    { name: 'Proceed', action: () => console.log('Proceeding') }
+    { name: 'Cancel', action: () => modal.destroy() },
+    { name: 'Confirm', action: () => handleConfirm() }
   ]
 });
 ```
 
-### Form Handling With `DeesForm`
+### Development Components
 
-The `DeesForm` and its related input elements simplify form creation and handling. The form component integrates validation, submission, and data collection functions.
-
-#### Creating a Form
+#### `DeesEditor`
+Code editor component based on Monaco Editor.
 
 ```typescript
-import {
-  DeesForm,
-  DeesInputText,
-  DeesFormSubmit,
-  DeesInputDropdown
-} from '@design.estate/dees-catalog';
-
-const registrationForm = document.createElement('dees-form');
-
-const nameInput = document.createElement('dees-input-text');
-nameInput.label = 'Name';
-nameInput.required = true;
-
-const roleSelect = document.createElement('dees-input-dropdown');
-roleSelect.label = 'Role';
-roleSelect.options = [
-  { option: 'Admin', key: 'admin' },
-  { option: 'Editor', key: 'editor' }
-];
-
-const submitButton = document.createElement('dees-form-submit');
-submitButton.text = 'Register';
-
-registrationForm.appendChild(nameInput);
-registrationForm.appendChild(roleSelect);
-registrationForm.appendChild(submitButton);
-
-registrationForm.addEventListener('formData', event => {
-  console.log('Form Data:', event.detail.data);
-});
-
-document.body.appendChild(registrationForm);
+<dees-editor
+  language="typescript"
+  .value=${codeString}
+  @change=${handleChange}
+></dees-editor>
 ```
 
-### Data Presentation with `DeesTable`
+## Customization and Theming
 
-The `DeesTable` component allows for effective data management and presentation through dynamic tables. It supports features such as sorting, selecting, and action-triggering from table items.
+Components can be customized using CSS custom properties and the built-in theme system. Example:
 
-#### Displaying a Data Table
-
-```typescript
-import { DeesTable } from '@design.estate/dees-catalog';
-
-const data = [
-  { name: 'Alice', status: 'Active' },
-  { name: 'Bob', status: 'Inactive' }
-];
-
-const table = new DeesTable();
-table.heading1 = 'User Table';
-table.data = data;
-
-document.body.appendChild(table);
-
-// Custom Actions and Row Selection
-table.addEventListener('rowSelected', (event) => console.log(event.detail));
+```css
+dees-button {
+  --dees-button-background: #007bff;
+  --dees-button-color: white;
+}
 ```
 
-### Structural Components
+## Browser Support
 
-`DeesAppuiBase`, along with components such as `DeesAppuiMainmenu` and `DeesAppuiMainselector`, provide the scaffolding needed for application UIs, particularly dashboards.
+The library supports modern browsers with Web Components implementation:
+- Chrome (latest)
+- Firefox (latest)
+- Safari (latest)
+- Edge (latest)
 
-#### Setting Up an Application Layout
+## Contributing
 
-```typescript
-import { DeesAppuiBase } from '@design.estate/dees-catalog';
-
-const appBase = document.createElement('dees-appui-base');
-document.body.appendChild(appBase);
-```
-
-### Data Visualization with ApexCharts
-
-`DeesChartArea` provides easy integration with ApexCharts for creating detailed visualizations.
-
-#### Implementing a Chart
-
-```typescript
-import { DeesChartArea } from '@design.estate/dees-catalog';
-
-// Create and configure a chart
-const chart = new DeesChartArea();
-document.body.appendChild(chart);
-
-chart.chart.updateSeries([
-  { name: 'Sales', data: [20, 40, 30, 50] }
-]);
-```
-
-### Customization and Extensibility
-
-The `@design.estate/dees-catalog` is built for extensibility and customization. You can extend components, integrate custom events, and style them as per your requirements. This ensures that your application remains unique and tailored to your audience.
-
-The library not only saves development time by providing ready-made components but also enhances maintainability through its clean interfaces and TypeScript support, making your code robust and type-safe. With the library's expansive set of features, building modern web applications has never been easier. Enjoy the blend of simplicity and power that `@design.estate/dees-catalog` brings to the table.
+Please read our [Contributing Guidelines](CONTRIBUTING.md) for details on submitting pull requests.
 
 ## License and Legal Information
 

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '1.3.2',
+  version: '1.5.2',
   description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
 }

ts_web/elements/dees-badge.demo.ts

@@ -0,0 +1,12 @@
+import { html } from '@design.estate/dees-element';
+
+export const demoFunc = () => html`
+  <div style="display: flex; gap: 8px; align-items: center;">
+    <dees-badge .text=${'Default'}></dees-badge>
+    <dees-badge .type=${'primary'} .text=${'Primary'}></dees-badge>
+    <dees-badge .type=${'success'} .text=${'Success'}></dees-badge>
+    <dees-badge .type=${'warning'} .text=${'Warning'}></dees-badge>
+    <dees-badge .type=${'error'} .text=${'Error'}></dees-badge>
+    <dees-badge .type=${'primary'} .rounded=${true} .text=${'Rounded'}></dees-badge>
+  </div>
+`;

ts_web/elements/dees-badge.ts

@@ -0,0 +1,96 @@
+import {
+  DeesElement,
+  css,
+  cssManager,
+  customElement,
+  html,
+  property,
+  type CSSResult,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+
+import * as domtools from '@design.estate/dees-domtools';
+import { demoFunc } from './dees-badge.demo.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-badge': DeesBadge;
+  }
+}
+
+@customElement('dees-badge')
+export class DeesBadge extends DeesElement {
+  public static demo = demoFunc;
+
+  @property({ type: String })
+  public type: 'default' | 'primary' | 'success' | 'warning' | 'error' = 'default';
+
+  @property({ type: String })
+  public text: string = '';
+
+  @property({ type: Boolean })
+  public rounded: boolean = false;
+
+  constructor() {
+    super();
+    domtools.elementBasic.setup();
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: inline-block;
+      }
+
+      .badge {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        padding: 2px 8px;
+        font-size: 12px;
+        font-weight: 500;
+        line-height: 1.5;
+        border-radius: 4px;
+        white-space: nowrap;
+      }
+
+      .badge.rounded {
+        border-radius: 12px;
+      }
+
+      .badge.default {
+        background: ${cssManager.bdTheme('#f5f5f5', '#333')};
+        color: ${cssManager.bdTheme('#666', '#ccc')};
+      }
+
+      .badge.primary {
+        background: #0050b9;
+        color: #ffffff;
+      }
+
+      .badge.success {
+        background: #2e7d32;
+        color: #ffffff;
+      }
+
+      .badge.warning {
+        background: #ed6c02;
+        color: #ffffff;
+      }
+
+      .badge.error {
+        background: #e4002b;
+        color: #ffffff;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div class="badge ${this.type} ${this.rounded ? 'rounded' : ''}">
+        ${this.text}
+      </div>
+    `;
+  }
+}

ts_web/elements/dees-chart-area.ts

@@ -38,7 +38,7 @@ export class DeesChartArea extends DeesElement {
     super();
     domtools.elementBasic.setup();
 
-    this.resizeObserver = new ResizeObserver(entries => {
+    this.resizeObserver = new ResizeObserver((entries) => {
       for (let entry of entries) {
         if (entry.target.classList.contains('mainbox')) {
           this.resizeChart(); // Call resizeChart when the .mainbox size changes
@@ -55,7 +55,7 @@ export class DeesChartArea extends DeesElement {
     });
     this.registerGarbageFunction(async () => {
       this.resizeObserver.disconnect();
-    })
+    });
   }
 
   public static styles = [
@@ -71,7 +71,7 @@ export class DeesChartArea extends DeesElement {
         position: relative;
         width: 100%;
         height: 400px;
-        background: #222;
+        background: #111;
         border-radius: 8px;
       }
 
@@ -95,10 +95,12 @@ export class DeesChartArea extends DeesElement {
   ];
 
   public render(): TemplateResult {
-    return html` <div class="mainbox">
-      <div class="chartTitle">${this.label}</div>
-      <div class="chartContainer"></div>
-    </div> `;
+    return html`
+      <div class="mainbox">
+        <div class="chartTitle">${this.label}</div>
+        <div class="chartContainer"></div>
+      </div>
+    `;
   }
 
   public async firstUpdated() {
@@ -107,11 +109,23 @@ export class DeesChartArea extends DeesElement {
       series: [
         {
           name: 'cpu',
-          data: [31, 40, 28, 51, 42, 109, 100],
+          data: [
+            { x: '2025-01-15T03:00:00', y: 25 },
+            { x: '2025-01-15T07:00:00', y: 30 },
+            { x: '2025-01-15T11:00:00', y: 20 },
+            { x: '2025-01-15T15:00:00', y: 35 },
+            { x: '2025-01-15T19:00:00', y: 25 },
+          ],
         },
         {
           name: 'memory',
-          data: [11, 32, 45, 32, 34, 52, 41],
+          data: [
+            { x: '2025-01-15T03:00:00', y: 10 },
+            { x: '2025-01-15T07:00:00', y: 12 },
+            { x: '2025-01-15T11:00:00', y: 10 },
+            { x: '2025-01-15T15:00:00', y: 30 },
+            { x: '2025-01-15T19:00:00', y: 40 },
+          ],
         },
       ],
       chart: {
@@ -130,35 +144,62 @@ export class DeesChartArea extends DeesElement {
         curve: 'smooth',
       },
       xaxis: {
-        crosshairs: {
-          stroke: {
-            width: 1,
-            color: '#444',
+        type: 'datetime', // Time-series data
+        labels: {
+          format: 'hh:mm A', // Time formatting
+          style: {
+            colors: '#9e9e9e', // Label color
+            fontSize: '12px',
           },
         },
-        type: 'datetime',
-        categories: [
-          '2018-09-19T00:00:00.000Z',
-          '2018-09-19T01:30:00.000Z',
-          '2018-09-19T02:30:00.000Z',
-          '2018-09-19T03:30:00.000Z',
-          '2018-09-19T04:30:00.000Z',
-          '2018-09-19T05:30:00.000Z',
-          '2018-09-19T06:30:00.000Z',
-        ],
+        axisBorder: {
+          show: false, // Hide x-axis border
+        },
+        axisTicks: {
+          show: false, // Hide x-axis ticks
+        },
       },
       yaxis: {
-        crosshairs: {
-          stroke: {
-            width: 1,
-            color: '#444',
+        min: 0,
+        labels: {
+          formatter: function (val: number) {
+            return `${val} Mbps`; // Format Y-axis labels
           },
+          style: {
+            colors: '#9e9e9e', // Label color
+            fontSize: '12px',
+          },
+        },
+        axisBorder: {
+          show: false, // Hide y-axis border
+        },
+        axisTicks: {
+          show: false, // Hide y-axis ticks
         },
       },
       tooltip: {
+        shared: true, // Enables the tooltip to display across series
+        intersect: false, // Allows hovering anywhere on the chart
+        followCursor: true, // Makes tooltip follow mouse even between points
         x: {
           format: 'dd/MM/yy HH:mm',
         },
+        custom: function ({ series, seriesIndex, dataPointIndex, w }) {
+          // Get the x value
+          const xValue = w.globals.labels[dataPointIndex];
+          // Iterate through each series and get its value
+          let tooltipContent = `<div style="padding: 10px; background: #1e1e2f; color: white; border-radius: 5px;">`;
+          tooltipContent += ``; // `<strong>Time:</strong> ${xValue}<br/>`;
+
+          series.forEach((s, index) => {
+            const label = w.globals.seriesNames[index]; // Get series label
+            const value = s[dataPointIndex]; // Get value at data point
+            tooltipContent += `<strong>${label}:</strong> ${value} Mbps<br/>`;
+          });
+
+          tooltipContent += `</div>`;
+          return tooltipContent;
+        },
       },
       grid: {
         xaxis: {
@@ -171,8 +212,8 @@ export class DeesChartArea extends DeesElement {
             show: true,
           },
         },
-        borderColor: '#666', // Set the color of the grid lines
-        strokeDashArray: 2, // Solid line
+        borderColor: '#333', // Set the color of the grid lines
+        strokeDashArray: 0, // Solid line
         row: {
           colors: [], // This can be used to alternate the shading of the horizontal rows
           opacity: 0.1,
@@ -182,6 +223,15 @@ export class DeesChartArea extends DeesElement {
           opacity: 0.1,
         },
       },
+      fill: {
+        type: 'gradient', // Gradient fill for the area
+        gradient: {
+          shade: 'dark',
+          type: 'vertical',
+          gradientToColors: ['#9c27b0'], // Gradient color ending
+          stops: [0, 100],
+        },
+      },
     };
     this.chart = new ApexCharts(this.shadowRoot.querySelector('.chartContainer'), options);
     await this.chart.render();
@@ -189,20 +239,22 @@ export class DeesChartArea extends DeesElement {
   }
 
   public async resizeChart() {
-    const element = this.shadowRoot.querySelector('.chartContainer');
+    const mainbox: HTMLDivElement = this.shadowRoot.querySelector('.mainbox');
+    const chartContainer: HTMLDivElement = this.shadowRoot.querySelector('.chartContainer');
 
     // Get computed style of the element
-    const style = window.getComputedStyle(element);
+    const styleMainbox = window.getComputedStyle(mainbox);
+    const styleChartContainer = window.getComputedStyle(chartContainer);
 
     // Extract padding values
-    const paddingTop = parseInt(style.paddingTop, 10);
-    const paddingBottom = parseInt(style.paddingBottom, 10);
-    const paddingLeft = parseInt(style.paddingLeft, 10);
-    const paddingRight = parseInt(style.paddingRight, 10);
+    const paddingTop = parseInt(styleChartContainer.paddingTop, 10);
+    const paddingBottom = parseInt(styleChartContainer.paddingBottom, 10);
+    const paddingLeft = parseInt(styleChartContainer.paddingLeft, 10);
+    const paddingRight = parseInt(styleChartContainer.paddingRight, 10);
 
     // Calculate the actual width and height to use, subtracting padding
-    const actualWidth = element.clientWidth - paddingLeft - paddingRight;
-    const actualHeight = element.clientHeight - paddingTop - paddingBottom;
+    const actualWidth = mainbox.clientWidth - paddingLeft - paddingRight;
+    const actualHeight = mainbox.offsetHeight - paddingTop - paddingBottom;
 
     await this.chart.updateOptions({
       chart: {

ts_web/elements/dees-input-multitoggle.ts

@@ -12,6 +12,12 @@ import {
 
 const { demoFunc } = await import('./dees-input-multitoggle.demo.js');
 
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-input-multitoggle': DeesInputMultitoggle;
+  }
+}
+
 @customElement('dees-input-multitoggle')
 export class DeesInputMultitoggle extends DeesElement {
   public static demo = demoFunc;

ts_web/elements/dees-terminal.ts

@@ -22,13 +22,25 @@ declare global {
 
 @customElement('dees-terminal')
 export class DeesTerminal extends DeesElement {
-  public static demo = () => html` <dees-terminal></dees-terminal> `;
+  public static demo = () => html` <dees-terminal
+    .environment=${{
+      NODE_ENV: 'development',
+      PORT: '3000',
+    }}
+  ></dees-terminal> `;
 
   // INSTANCE
   private resizeObserver: ResizeObserver;
 
   @property()
-  public setupCommand = `pnpm install @git.zone/tsbuild && clear && echo 'welcome'`;
+  public setupCommand = `pnpm install @serve.zone/cli && servezone cli\n`;
+
+  @property()
+  environment: {[key: string]: string} = {};
+
+  // exposing webcontainer
+  private webcontainerDeferred = new domtools.plugins.smartpromise.Deferred<webcontainer.WebContainer>();
+  public webcontainerPromise = this.webcontainerDeferred.promise;
 
   constructor() {
     super();
@@ -282,8 +294,15 @@ export class DeesTerminal extends DeesElement {
       input.write(data);
     });
     await this.waitForPrompt(term, '~/');
+    // lets set the environment variables
+    await this.setEnvironmentVariables(this.environment, webcontainerInstance);
+    input.write(`source source.env\n`);
+    await this.waitForPrompt(term, '~/');
+    // lets run the setup command
     input.write(this.setupCommand);
-    input.write(`\n`);
+    await this.waitForPrompt(term, '~/');
+    input.write(`clear && echo 'welcome'\n`);
+    this.webcontainerDeferred.resolve(webcontainerInstance);
   }
 
   async connectedCallback(): Promise<void> {
@@ -300,14 +319,16 @@ export class DeesTerminal extends DeesElement {
     this.fitAddon.fit();
   }
 
-  private async waitForPrompt(term: Terminal, prompt: string): Promise<void> {
+  public async waitForPrompt(term: Terminal, prompt: string): Promise<void> {
     return new Promise<void>((resolve) => {
       const checkPrompt = () => {
         const lines = term.buffer.active;
         for (let i = 0; i < lines.length; i++) {
           const line = lines.getLine(i);
           if (line && line.translateToString().includes(prompt)) {
-            resolve();
+            setTimeout(() => {
+              resolve();
+            }, 100);
             return;
           }
         }
@@ -317,4 +338,18 @@ export class DeesTerminal extends DeesElement {
       checkPrompt();
     });
   }
+
+  public async setEnvironmentVariables(envArg: {[key: string]: string}, webcontainerInstanceArg?: webcontainer.WebContainer) {
+    const webcontainerInstance = webcontainerInstanceArg ||await this.webcontainerPromise;
+    let envFile = ``
+    for (const key in envArg) { 
+      envFile += `export ${key}="${envArg[key]}"\n`;
+    }
+
+    await webcontainerInstance.mount({'source.env': {
+      file: {
+        contents: envFile,
+      }
+    }});
+  }
 }

ts_web/elements/index.ts

@@ -4,6 +4,7 @@ export * from './dees-appui-base.js';
 export * from './dees-appui-maincontent.js';
 export * from './dees-appui-mainmenu.js';
 export * from './dees-appui-mainselector.js';
+export * from './dees-badge.js';
 export * from './dees-button-exit.js';
 export * from './dees-button.js';
 export * from './dees-chart-area.js';