Package Exports

@design.estate/dees-catalog
@design.estate/dees-catalog/dist_ts_web/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@design.estate/dees-catalog) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@design.estate/dees-catalog

A comprehensive web components library built with TypeScript and LitElement, providing 75+ UI components for building modern web applications with consistent design and behavior. 🚀

Issue Reporting and Security

For reporting bugs, issues, or security vulnerabilities, please visit community.foss.global/. This is the central community hub for all issue reporting. Developers who sign and comply with our contribution agreement and go through identification can also get a code.foss.global/ account to submit Pull Requests directly.

✨ Features

🎨 Consistent Design System - Beautiful, cohesive components following modern UI/UX principles
🌙 Dark/Light Theme Support - All components automatically adapt to your theme
⌨️ Keyboard Accessible - Full keyboard navigation and ARIA support
📱 Responsive - Mobile-first design that works across all screen sizes
🔧 TypeScript-First - Fully typed APIs with excellent IDE support
🧩 Modular - Use only what you need, tree-shakeable architecture

📦 Installation

npm install @design.estate/dees-catalog
# or
pnpm add @design.estate/dees-catalog

🚀 Quick Start

import { html, DeesElement, customElement } from '@design.estate/dees-element';
import '@design.estate/dees-catalog';

@customElement('my-app')
class MyApp extends DeesElement {
  render() {
    return html`
      <dees-button type="highlighted" @click=${() => alert('Hello!')}>
        Click me!
      </dees-button>
    `;
  }
}

📖 Development Guide

For developers working on this library, please refer to the UI Components Playbook for comprehensive patterns, best practices, and architectural guidelines.

📚 Components Overview

Category	Components
Core UI	`DeesButton`, `DeesButtonExit`, `DeesButtonGroup`, `DeesBadge`, `DeesChips`, `DeesHeading`, `DeesHint`, `DeesIcon`, `DeesLabel`, `DeesPanel`, `DeesSearchbar`, `DeesSpinner`, `DeesToast`, `DeesWindowcontrols`
Forms	`DeesForm`, `DeesInputText`, `DeesInputCheckbox`, `DeesInputDropdown`, `DeesInputRadiogroup`, `DeesInputFileupload`, `DeesInputIban`, `DeesInputPhone`, `DeesInputQuantitySelector`, `DeesInputMultitoggle`, `DeesInputTags`, `DeesInputTypelist`, `DeesInputRichtext`, `DeesInputWysiwyg`, `DeesInputDatepicker`, `DeesInputSearchselect`, `DeesFormSubmit`
Layout	`DeesAppuiBase`, `DeesAppuiMainmenu`, `DeesAppuiSecondarymenu`, `DeesAppuiMaincontent`, `DeesAppuiAppbar`, `DeesAppuiActivitylog`, `DeesAppuiProfiledropdown`, `DeesAppuiTabs`, `DeesMobileNavigation`, `DeesDashboardGrid`
Data Display	`DeesTable`, `DeesDataviewCodebox`, `DeesDataviewStatusobject`, `DeesPdf`, `DeesStatsGrid`, `DeesPagination`
Visualization	`DeesChartArea`, `DeesChartLog`
Dialogs & Overlays	`DeesModal`, `DeesContextmenu`, `DeesSpeechbubble`, `DeesWindowlayer`
Navigation	`DeesStepper`, `DeesProgressbar`
Development	`DeesEditor`, `DeesEditorMarkdown`, `DeesEditorMarkdownoutlet`, `DeesTerminal`, `DeesUpdater`
Auth & Utilities	`DeesSimpleAppdash`, `DeesSimpleLogin`
Shopping	`DeesShoppingProductcard`

🎯 Detailed Component Documentation

Core UI Components

`DeesButton`

A versatile button component supporting multiple styles and states.

// Basic usage
const button = document.createElement('dees-button');
button.text = 'Click me';

// With options
<dees-button
  type="highlighted"  // Options: normal, highlighted, discreet
  status="pending"    // Options: normal, pending, success, error
  disabled={false}    // Optional: disables the button
  @click=${handleClick}
>Click me</dees-button>

`DeesBadge`

Display status indicators or counts with customizable styles.

<dees-badge
  type="success"  // Options: default, primary, success, warning, error
  text="New"      // Text to display
  rounded        // Optional: applies rounded corners
></dees-badge>

`DeesChips`

Interactive chips/tags with selection capabilities.

<dees-chips
  selectionMode="multiple"  // Options: none, single, multiple
  chipsAreRemovable        // Optional: allows removing chips
  .selectableChips=${[
    { key: 'tag1', value: 'Important' },
    { key: 'tag2', value: 'Urgent' }
  ]}
  @selection-change=${handleSelection}
></dees-chips>

`DeesIcon`

Display icons from FontAwesome and Lucide icon libraries with library prefixes.

// FontAwesome icons - use 'fa:' prefix
<dees-icon
  icon="fa:check"       // FontAwesome icon with fa: prefix
  iconSize="24"         // Size in pixels
  color="#22c55e"       // Optional: custom color
></dees-icon>

// Lucide icons - use 'lucide:' prefix
<dees-icon
  icon="lucide:menu"    // Lucide icon with lucide: prefix
  iconSize="24"         // Size in pixels
  color="#007bff"       // Optional: custom color
  strokeWidth="2"       // Optional: stroke width for Lucide icons
></dees-icon>

// Legacy API (deprecated but still supported)
<dees-icon
  iconFA="check"        // Without prefix - assumes FontAwesome
></dees-icon>

`DeesLabel`

Text label component with optional icon and status indicators.

<dees-label
  text="Status"         // Label text
  icon="info-circle"    // Optional: icon name
  type="info"           // Options: default, info, success, warning, error
  size="medium"         // Options: small, medium, large
></dees-label>

`DeesSpinner`

Loading indicator with customizable appearance.

<dees-spinner
  size="medium"         // Options: small, medium, large
  type="primary"        // Options: primary, secondary, light, dark
  overlay              // Optional: adds a full-screen overlay
></dees-spinner>

`DeesToast`

Notification toast messages with various styles, positions, and auto-dismiss functionality.

// Programmatic usage
DeesToast.show({
  message: 'Operation successful',
  type: 'success',      // Options: info, success, warning, error
  duration: 3000,       // Time in milliseconds before auto-dismiss
  position: 'top-right' // Options: top-right, top-left, bottom-right, bottom-left, top-center, bottom-center
});

// Convenience methods
DeesToast.info('Information message');
DeesToast.success('Success message');
DeesToast.warning('Warning message');
DeesToast.error('Error message');

// Advanced control
const toast = await DeesToast.show({
  message: 'Processing...',
  type: 'info',
  duration: 0  // No auto-dismiss
});

// Later dismiss programmatically
toast.dismiss();

Key Features:

Multiple toast types with distinct icons and colors
6 position options for flexible placement
Auto-dismiss with visual progress indicator
Manual dismiss by clicking
Smooth animations and transitions
Automatic stacking of multiple toasts
Theme-aware styling
Programmatic control

`DeesButtonExit`

Exit/close button component with consistent styling.

<dees-button-exit
  @click=${handleClose}
></dees-button-exit>

`DeesButtonGroup`

Container for grouping related buttons together.

<dees-button-group
  .buttons=${[
    { text: 'Save', type: 'highlighted', action: handleSave },
    { text: 'Cancel', type: 'normal', action: handleCancel }
  ]}
  spacing="medium"    // Options: small, medium, large
></dees-button-group>

`DeesHeading`

Consistent heading component with level and styling options.

<dees-heading
  level={1}           // 1-6 for H1-H6
  text="Page Title"
  .subheading=${'Optional subtitle'}
  centered           // Optional: center alignment
></dees-heading>

`DeesHint`

Hint/tooltip component for providing contextual help.

<dees-hint
  text="This field is required"
  type="info"        // Options: info, warning, error, success
  position="top"     // Options: top, bottom, left, right
></dees-hint>

`DeesPanel`

Container component for grouping related content with optional title and actions.

<dees-panel
  .title=${'Panel Title'}
  .subtitle=${'Optional subtitle'}
  collapsible        // Optional: allow collapse/expand
  collapsed={false}  // Initial collapsed state
  .actions=${[
    { icon: 'settings', action: handleSettings }
  ]}
>
  <!-- Panel content -->
</dees-panel>

`DeesSearchbar`

Search input component with suggestions and search handling.

<dees-searchbar
  placeholder="Search..."
  .suggestions=${['item1', 'item2', 'item3']}
  showClearButton    // Show clear button when has value
  @search=${handleSearch}
  @suggestion-select=${handleSuggestionSelect}
></dees-searchbar>

`DeesWindowcontrols`

Window control buttons (minimize, maximize, close) for desktop-like applications.

<dees-windowcontrols
  .controls=${['minimize', 'maximize', 'close']}
  @minimize=${handleMinimize}
  @maximize=${handleMaximize}
  @close=${handleClose}
></dees-windowcontrols>

Form Components

`DeesForm`

Container component for form elements with built-in validation and data handling.

<dees-form
  @formData=${(e) => handleFormData(e.detail)}  // Emitted when form is submitted
  @formValidation=${(e) => handleValidation(e.detail)}  // Emitted during validation
>
  <dees-input-text required></dees-input-text>
  <dees-form-submit>Submit</dees-form-submit>
</dees-form>

`DeesInputText`

Text input field with validation and formatting options.

<dees-input-text
  key="email"           // Unique identifier for form data
  label="Email"         // Input label
  value="initial@value.com"  // Initial value
  required             // Makes the field required
  disabled            // Disables the input
  placeholder="Enter your email"
></dees-input-text>

`DeesInputCheckbox`

Checkbox input component for boolean values.

<dees-input-checkbox
  key="terms"
  label="Accept Terms"
  checked             // Initial checked state
  required
  @change=${handleChange}
></dees-input-checkbox>

`DeesInputDropdown`

Dropdown selection component with search and filtering capabilities.

<dees-input-dropdown
  key="country"
  label="Select Country"
  .options=${[
    { key: 'us', option: 'United States' },
    { key: 'uk', option: 'United Kingdom' }
  ]}
  searchable          // Enables search functionality
  multiple           // Allows multiple selections
></dees-input-dropdown>

`DeesInputFileupload`

File upload component with drag-and-drop support.

<dees-input-fileupload
  key="documents"
  label="Upload Files"
  multiple            // Allow multiple file selection
  accept=".pdf,.doc"  // Accepted file types
  maxSize="5MB"      // Maximum file size
  @upload=${handleUpload}
></dees-input-fileupload>

`DeesInputIban`

Specialized input for IBAN (International Bank Account Number) with validation.

<dees-input-iban
  key="bankAccount"
  label="IBAN"
  country="DE"        // Default country format
  required
  @validate=${handleIbanValidation}
></dees-input-iban>

`DeesInputPhone`

Phone number input with country code selection and formatting.

<dees-input-phone
  key="phone"
  label="Phone Number"
  defaultCountry="US"  // Default country code
  required
  @validate=${handlePhoneValidation}
></dees-input-phone>

`DeesInputQuantitySelector`

Numeric input with increment/decrement controls.

<dees-input-quantity-selector
  key="quantity"
  label="Quantity"
  min="0"             // Minimum value
  max="100"           // Maximum value
  step="1"            // Increment/decrement step
  value="1"           // Initial value
></dees-input-quantity-selector>

`DeesInputMultitoggle`

Multi-state toggle button group.

<dees-input-multitoggle
  key="status"
  label="Status"
  .options=${[
    { key: 'active', label: 'Active' },
    { key: 'pending', label: 'Pending' },
    { key: 'inactive', label: 'Inactive' }
  ]}
  value="active"      // Initial selected value
></dees-input-multitoggle>

`DeesInputRadiogroup`

Radio button group for single-choice selections with internal state management.

<dees-input-radiogroup
  key="plan"
  label="Select Plan"
  .options=${['Free', 'Pro', 'Enterprise']}
  selectedOption="Pro"
  required
  @change=${handlePlanChange}
></dees-input-radiogroup>

// With custom option objects
<dees-input-radiogroup
  key="priority"
  label="Priority Level"
  .options=${[
    { key: 'low', label: 'Low Priority' },
    { key: 'medium', label: 'Medium Priority' },
    { key: 'high', label: 'High Priority' }
  ]}
  selectedOption="medium"
></dees-input-radiogroup>

`DeesInputTags`

Tag input component for managing lists of tags with auto-complete and validation.

<dees-input-tags
  key="skills"
  label="Skills"
  .value=${['JavaScript', 'TypeScript', 'CSS']}
  placeholder="Add a skill..."
  .suggestions=${[
    'JavaScript', 'TypeScript', 'Python', 'Go', 'Rust',
    'React', 'Vue', 'Angular', 'Node.js', 'Docker'
  ]}
  maxTags={10}  // Optional: limit number of tags
  required
  @change=${handleTagsChange}
></dees-input-tags>

Key Features:

Add tags by pressing Enter or typing comma/semicolon
Remove tags with click or backspace
Auto-complete suggestions with keyboard navigation
Maximum tag limit support
Full theme support
Form validation integration

`DeesInputTypelist`

Dynamic list input for managing arrays of typed values.

<dees-input-typelist
  key="features"
  label="Product Features"
  placeholder="Add a feature..."
  .value=${['Feature 1', 'Feature 2']}
  @change=${handleFeaturesChange}
></dees-input-typelist>

`DeesInputDatepicker`

Date and time picker component with calendar interface and manual typing support.

<dees-input-datepicker
  key="eventDate"
  label="Event Date"
  placeholder="YYYY-MM-DD"
  value="2025-01-15T14:30:00Z"  // ISO string format
  dateFormat="YYYY-MM-DD"        // Display format (default: YYYY-MM-DD)
  enableTime={true}              // Enable time selection
  timeFormat="24h"               // Options: 24h, 12h
  minuteIncrement={15}           // Time step in minutes
  minDate="2025-01-01"          // Minimum selectable date
  maxDate="2025-12-31"          // Maximum selectable date
  .disabledDates=${[            // Array of disabled dates
    '2025-01-10',
    '2025-01-11'
  ]}
  weekStartsOn={1}              // 0 = Sunday, 1 = Monday
  required
  @change=${handleDateChange}
></dees-input-datepicker>

Key Features:

Interactive calendar popup
Manual date typing with multiple formats
Optional time selection
Configurable date format
Min/max date constraints
Disable specific dates
Keyboard navigation
Today button
Clear functionality
12/24 hour time formats
Theme-aware styling
Live parsing and validation

Manual Input Formats:

// Date formats supported
"2023-12-20"     // ISO format (YYYY-MM-DD)
"20.12.2023"     // European format (DD.MM.YYYY)
"12/20/2023"     // US format (MM/DD/YYYY)

// Date with time (add space and time after any date format)
"2023-12-20 14:30"
"20.12.2023 9:45"
"12/20/2023 16:00"

`DeesInputSearchselect`

Search-enabled dropdown selection component.

<dees-input-searchselect
  key="category"
  label="Select Category"
  placeholder="Search categories..."
  .options=${[
    { key: 'tech', label: 'Technology' },
    { key: 'health', label: 'Healthcare' },
    { key: 'finance', label: 'Finance' }
  ]}
  required
  @change=${handleCategoryChange}
></dees-input-searchselect>

`DeesInputRichtext`

Rich text editor with formatting toolbar powered by TipTap.

<dees-input-richtext
  key="content"
  label="Article Content"
  .value=${htmlContent}
  placeholder="Start writing..."
  minHeight={300}      // Minimum editor height
  showWordCount={true} // Show word/character count
  @change=${handleContentChange}
></dees-input-richtext>

Key Features:

Full formatting toolbar (bold, italic, underline, strike, etc.)
Heading levels (H1-H6)
Lists (bullet, ordered)
Links with URL editing
Code blocks and inline code
Blockquotes
Horizontal rules
Undo/redo support
Word and character count
HTML output

`DeesInputWysiwyg`

Advanced block-based editor with slash commands and rich content blocks.

<dees-input-wysiwyg
  key="document"
  label="Document Editor"
  .value=${documentContent}
  outputFormat="html"  // Options: html, markdown, json
  @change=${handleDocumentChange}
></dees-input-wysiwyg>

Key Features:

Slash commands for quick formatting
Block-based editing (paragraphs, headings, lists, etc.)
Drag and drop block reordering
Multiple output formats
Keyboard shortcuts
Collaborative editing ready
Extensible block types

`DeesFormSubmit`

Submit button component specifically designed for DeesForm.

<dees-form-submit
  disabled            // Optional: disable submit button
  status="normal"     // Options: normal, pending, success, error
>Submit Form</dees-form-submit>

Layout Components

`DeesAppuiBase`

A comprehensive application shell component providing a complete UI framework with navigation, menus, activity logging, and view management.

Full API Documentation: See ts_web/elements/00group-appui/dees-appui-base/readme.md for complete documentation including all programmatic APIs, view lifecycle hooks, and TypeScript interfaces.

Quick Start:

import { html, DeesElement, customElement } from '@design.estate/dees-element';
import { DeesAppuiBase } from '@design.estate/dees-catalog';

@customElement('my-app')
class MyApp extends DeesElement {
  private appui: DeesAppuiBase;

  async firstUpdated() {
    this.appui = this.shadowRoot.querySelector('dees-appui-base');

    // Configure with views and menu
    this.appui.configure({
      branding: { logoIcon: 'lucide:box', logoText: 'My App' },
      views: [
        { id: 'dashboard', name: 'Dashboard', iconName: 'lucide:home', content: 'my-dashboard' },
        { id: 'settings', name: 'Settings', iconName: 'lucide:settings', content: 'my-settings' },
      ],
      mainMenu: {
        sections: [{ name: 'Main', views: ['dashboard', 'settings'] }]
      },
      defaultView: 'dashboard'
    });
  }

  render() {
    return html`<dees-appui-base></dees-appui-base>`;
  }
}

Key Features:

Configure API: Single configure() method for complete app setup
View Management: Automatic view caching, lazy loading, and lifecycle hooks
Programmatic APIs: Full control over AppBar, Main Menu, Secondary Menu, Content Tabs, and Activity Log
View Lifecycle Hooks: onActivate(), onDeactivate(), and canDeactivate() for view components
Hash-based Routing: Automatic URL synchronization with view navigation
RxJS Observables: viewChanged$ and viewLifecycle$ for reactive programming
TypeScript-first: Typed IViewActivationContext passed to views on activation

Programmatic APIs include:

navigateToView(viewId, params?) - Navigate between views
setAppBarMenus(), setBreadcrumbs(), setUser() - Control the app bar
setMainMenu(), setMainMenuSelection(), setMainMenuBadge() - Control main navigation
setMainMenuCollapsed(), setMainMenuVisible() - Control main menu visibility
setSecondaryMenu(), setSecondaryMenuCollapsed(), setSecondaryMenuVisible() - Control secondary menu
setContentTabs(), setContentTabsVisible() - Control view-specific UI
activityLog.add(), activityLog.addMany(), activityLog.clear() - Manage activity entries

View Visibility Control:

// In your view's onActivate hook
onActivate(context: IViewActivationContext) {
  // Hide secondary menu for a fullscreen view
  context.appui.setSecondaryMenuVisible(false);

  // Hide content tabs
  context.appui.setContentTabsVisible(false);

  // Collapse main menu to give more space
  context.appui.setMainMenuCollapsed(true);
}

`DeesAppuiMainmenu`

Main navigation menu component for application-wide navigation.

<dees-appui-mainmenu
  .menuGroups=${[
    {
      name: 'Main',
      items: [
        { key: 'dashboard', iconName: 'lucide:home', action: () => navigate('dashboard') },
        { key: 'settings', iconName: 'lucide:settings', action: () => navigate('settings') }
      ]
    }
  ]}
  collapsed           // Optional: show collapsed version
></dees-appui-mainmenu>

`DeesAppuiSecondarymenu`

Secondary navigation component for sub-section selection with collapsible groups and badges.

<dees-appui-secondarymenu
  .heading=${'Projects'}
  .groups=${[
    {
      name: 'Active',
      iconName: 'lucide:folder',
      items: [
        { key: 'Frontend App', iconName: 'lucide:code', action: () => select('frontend'), badge: 3, badgeVariant: 'warning' },
        { key: 'API Server', iconName: 'lucide:server', action: () => select('api') }
      ]
    }
  ]}
  @item-select=${handleSectionChange}
></dees-appui-secondarymenu>

`DeesAppuiMaincontent`

Main content area with tab management support.

<dees-appui-maincontent
  .tabs=${[
    { key: 'Overview', iconName: 'lucide:home', action: () => selectTab('overview') },
    { key: 'Details', iconName: 'lucide:info', action: () => selectTab('details') }
  ]}
  @tab-select=${handleTabChange}
>
  <!-- Content goes here -->
</dees-appui-maincontent>

`DeesAppuiAppbar`

Professional application bar component with hierarchical menus, breadcrumb navigation, and user account management.

<dees-appui-appbar
  .menuItems=${[
    {
      name: 'File',
      action: async () => {},  // No-op for parent menu items
      submenu: [
        {
          name: 'New File',
          shortcut: 'Cmd+N',
          iconName: 'file-plus',
          action: async () => handleNewFile()
        },
        {
          name: 'Open...',
          shortcut: 'Cmd+O',
          iconName: 'folder-open',
          action: async () => handleOpen()
        },
        { divider: true },  // Menu separator
        {
          name: 'Save',
          shortcut: 'Cmd+S',
          iconName: 'save',
          action: async () => handleSave(),
          disabled: true  // Disabled state
        }
      ]
    }
  ]}
  .breadcrumbs=${'Project > src > components'}
  .showWindowControls=${true}
  .showSearch=${true}
  .user=${{
    name: 'John Doe',
    avatar: '/path/to/avatar.jpg',
    status: 'online'  // Options: 'online' | 'offline' | 'busy' | 'away'
  }}
  @menu-select=${(e) => handleMenuSelect(e.detail.item)}
  @breadcrumb-navigate=${(e) => handleBreadcrumbClick(e.detail)}
></dees-appui-appbar>

Key Features:

Hierarchical Menu System - Top-level menus with dropdown submenus, icons, and keyboard shortcuts
Keyboard Navigation - Full keyboard support (Tab, Arrow keys, Enter, Escape)
Breadcrumb Navigation - Customizable breadcrumb trail with click events
User Account Section - Avatar with status indicator
Accessibility - Full ARIA support with menubar roles

`DeesAppuiTabs`

Reusable tab component with horizontal/vertical layout support.

<dees-appui-tabs
  .tabs=${[
    { key: 'Home', iconName: 'lucide:home', action: () => console.log('Home') },
    { key: 'Settings', iconName: 'lucide:settings', action: () => console.log('Settings') }
  ]}
  tabStyle="horizontal"  // Options: horizontal, vertical
  showTabIndicator={true}
  @tab-select=${handleTabSelect}
></dees-appui-tabs>

Data Display Components

`DeesTable`

Advanced table component with sorting, filtering, and action support.

<dees-table
  .data=${tableData}
  .displayFunction=${(item) => ({
    name: item.name,
    date: item.date,
    amount: item.amount,
    description: item.description
  })}
  .dataActions=${[
    {
      name: 'Edit',
      icon: 'edit',
      action: (item) => handleEdit(item)
    },
    {
      name: 'Delete',
      icon: 'trash',
      action: (item) => handleDelete(item)
    }
  ]}
  heading1="Transactions"
  heading2="Recent Activity"
  searchable           // Enable search functionality
  dataName="transaction"  // Name for single data item
  @selection-change=${handleSelectionChange}
></dees-table>

Advanced Features:

Schema-first columns or displayFunction rendering
Sorting via header clicks with aria-sort + sortChange
Global search with Lucene-like syntax; modes: table, data, server
Per-column quick filters row; showColumnFilters and column.filterable=false
Selection: none | single | multi, with select-all and selectionChange
Sticky header + internal scroll (stickyHeader, --table-max-height)
Rich actions: header/in-row/contextmenu/footer/doubleClick; pinned Actions column
Editable cells via editableFields
Drag & drop files onto rows

`DeesDataviewCodebox`

Code display component with syntax highlighting and line numbers.

<dees-dataview-codebox
  progLang="typescript"  // Programming language for syntax highlighting
  .codeToDisplay=${`
    import { html } from '@design.estate/dees-element';

    export const myComponent = () => {
      return html\`<div>Hello World</div>\`;
    };
  `}
></dees-dataview-codebox>

`DeesDataviewStatusobject`

Status display component for complex objects with nested status indicators.

<dees-dataview-statusobject
  .statusObject=${{
    id: '1',
    name: 'System Status',
    combinedStatus: 'partly_ok',
    combinedStatusText: 'Partially OK',
    details: [
      { name: 'Database', value: 'Connected', status: 'ok', statusText: 'OK' },
      { name: 'API Service', value: 'Degraded', status: 'partly_ok', statusText: 'Partially OK' }
    ]
  }}
></dees-dataview-statusobject>

`DeesPdf`

PDF viewer component with navigation and zoom controls.

<dees-pdf
  source="path/to/document.pdf"  // URL or base64 encoded PDF
  page={1}            // Current page number
  scale={1.0}         // Zoom level
  .controls=${['zoom', 'download', 'print', 'navigation']}
  @page-change=${handlePageChange}
></dees-pdf>

`DeesStatsGrid`

A responsive grid component for displaying statistical data with various visualization types.

<dees-statsgrid
  .tiles=${[
    {
      id: 'revenue',
      title: 'Total Revenue',
      value: 125420,
      unit: '$',
      type: 'number',
      icon: 'faDollarSign',
      description: '+12.5% from last month',
      color: '#22c55e'
    },
    {
      id: 'cpu',
      title: 'CPU Usage',
      value: 73,
      type: 'gauge',
      icon: 'faMicrochip',
      gaugeOptions: {
        min: 0, max: 100,
        thresholds: [
          { value: 0, color: '#22c55e' },
          { value: 60, color: '#f59e0b' },
          { value: 80, color: '#ef4444' }
        ]
      }
    },
    {
      id: 'requests',
      title: 'API Requests',
      value: '1.2k',
      unit: '/min',
      type: 'trend',
      icon: 'faServer',
      trendData: [45, 52, 38, 65, 72, 68, 75, 82, 79, 85, 88, 92]
    }
  ]}
  .minTileWidth=${250}
  .gap=${16}
></dees-statsgrid>

`DeesPagination`

Pagination component for navigating through large datasets.

<dees-pagination
  totalItems={500}
  itemsPerPage={20}
  currentPage={1}
  maxVisiblePages={7}
  @page-change=${handlePageChange}
></dees-pagination>

Visualization Components

`DeesChartArea`

Area chart component built on ApexCharts for visualizing time-series data.

<dees-chart-area
  label="System Usage"
  .series=${[
    {
      name: 'CPU',
      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 }
      ]
    }
  ]}
></dees-chart-area>

`DeesChartLog`

Specialized chart component for visualizing log data and events.

<dees-chart-log
  label="System Events"
  .data=${[
    { timestamp: '2025-01-15T03:00:00', event: 'Server Start', type: 'info' },
    { timestamp: '2025-01-15T03:15:00', event: 'Error Detected', type: 'error' }
  ]}
  .filters=${['info', 'warning', 'error']}
  @event-click=${handleEventClick}
></dees-chart-log>

Dialogs & Overlays Components

`DeesModal`

Modal dialog component with customizable content and actions.

// Programmatic usage
DeesModal.createAndShow({
  heading: 'Confirm Action',
  content: html`
    <dees-form>
      <dees-input-text .label=${'Enter reason'}></dees-input-text>
    </dees-form>
  `,
  menuOptions: [
    { name: 'Cancel', action: async (modal) => { modal.destroy(); return null; } },
    { name: 'Confirm', action: async (modal) => { /* handle */ modal.destroy(); return null; } }
  ]
});

`DeesContextmenu`

Context menu component for right-click actions.

<dees-contextmenu
  .items=${[
    { label: 'Edit', icon: 'edit', action: () => handleEdit() },
    { label: 'Delete', icon: 'trash', action: () => handleDelete() }
  ]}
  position="right"
></dees-contextmenu>

`DeesSpeechbubble`

Tooltip-style speech bubble component for contextual information.

// Programmatic usage
const bubble = await DeesSpeechbubble.createAndShow(
  referenceElement,
  'Helpful information about this feature'
);

`DeesWindowlayer`

Base overlay component used by modal dialogs and other overlay components.

const layer = await DeesWindowLayer.createAndShow({
  blur: true,
});

`DeesStepper`

Multi-step navigation component for guided user flows.

<dees-stepper
  .steps=${[
    { key: 'personal', label: 'Personal Info', content: html`<div>Form 1</div>` },
    { key: 'address', label: 'Address', content: html`<div>Form 2</div>` },
    { key: 'confirm', label: 'Confirmation', content: html`<div>Review</div>` }
  ]}
  currentStep="personal"
  @step-change=${handleStepChange}
  @complete=${handleComplete}
></dees-stepper>

`DeesProgressbar`

Progress indicator component for tracking completion status.

<dees-progressbar
  value={75}
  label="Uploading"
  showPercentage
  type="determinate"  // Options: determinate, indeterminate
  status="normal"     // Options: normal, success, warning, error
></dees-progressbar>

Development Components

`DeesEditor`

Code editor component with syntax highlighting and code completion, powered by Monaco Editor.

<dees-editor
  .value=${code}
  @change=${handleCodeChange}
  .language=${'typescript'}
  .theme=${'vs-dark'}
  .options=${{
    lineNumbers: true,
    minimap: { enabled: true },
    autoClosingBrackets: 'always'
  }}
></dees-editor>

`DeesEditorMarkdown`

Markdown editor component with live preview.

<dees-editor-markdown
  .value=${markdown}
  @change=${handleMarkdownChange}
  .options=${{ preview: true, toolbar: true, spellcheck: true }}
></dees-editor-markdown>

`DeesEditorMarkdownoutlet`

Markdown preview component for rendering markdown content.

<dees-editor-markdownoutlet
  .markdown=${markdownContent}
  .theme=${'github'}
  allowHtml={false}
></dees-editor-markdownoutlet>

`DeesTerminal`

Terminal emulator component for command-line interface.

<dees-terminal
  .commands=${{
    'echo': (args) => `Echo: ${args.join(' ')}`,
    'help': () => 'Available commands: echo, help'
  }}
  .prompt=${'$'}
  .welcomeMessage=${'Welcome! Type "help" for available commands.'}
></dees-terminal>

`DeesUpdater`

Component for managing application updates and version control.

<dees-updater
  .currentVersion=${'1.5.2'}
  .checkInterval=${3600000}
  .autoUpdate=${false}
  @update-available=${handleUpdateAvailable}
></dees-updater>

Auth & Utilities Components

`DeesSimpleAppdash`

Simple application dashboard component for quick prototyping.

<dees-simple-appdash
  .appTitle=${'My Application'}
  .menuItems=${[
    { name: 'Dashboard', icon: 'home', route: '/dashboard' },
    { name: 'Settings', icon: 'settings', route: '/settings' }
  ]}
  .user=${{ name: 'John Doe', role: 'Administrator' }}
  @menu-select=${handleMenuSelect}
>
  <!-- Dashboard content -->
</dees-simple-appdash>

`DeesSimpleLogin`

Simple login form component with validation and customization.

<dees-simple-login
  .appName=${'My Application'}
  .logo=${'./assets/logo.png'}
  .backgroundImage=${'./assets/background.jpg'}
  .fields=${['username', 'password']}
  showForgotPassword
  showRememberMe
  @login=${handleLogin}
  @forgot-password=${handleForgotPassword}
></dees-simple-login>

Shopping Components

`DeesShoppingProductcard`

Product card component for e-commerce applications.

<dees-shopping-productcard
  .productData=${{
    name: 'Premium Headphones',
    category: 'Electronics',
    description: 'High-quality wireless headphones with noise cancellation',
    price: 199.99,
    originalPrice: 249.99,
    currency: '$',
    inStock: true,
    imageUrl: '/images/headphones.jpg'
  }}
  quantity={1}
  showQuantitySelector={true}
  @quantityChange=${handleQuantityChange}
></dees-shopping-productcard>

🔧 TypeScript Interfaces

The library exports unified interfaces for consistent API patterns:

// Base menu item interface (used by tabs, menus, etc.)
interface IMenuItem {
  key: string;
  iconName?: string;
  action: () => void;
  badge?: string | number;
  badgeVariant?: 'default' | 'success' | 'warning' | 'error';
}

// Menu group interface for organized menus
interface IMenuGroup {
  name: string;
  items: IMenuItem[];
  collapsed?: boolean;
  iconName?: string;
}

License and Legal Information

This repository contains open-source code licensed under the MIT License. A copy of the license can be found in the LICENSE file.

Please note: The MIT License does not grant permission to use the trade names, trademarks, service marks, or product names of the project, except as required for reasonable and customary use in describing the origin of the work and reproducing the content of the NOTICE file.

Trademarks

This project is owned and maintained by Task Venture Capital GmbH. The names and logos associated with Task Venture Capital GmbH and any related products or services are trademarks of Task Venture Capital GmbH or third parties, and are not included within the scope of the MIT license granted herein.

Use of these trademarks must comply with Task Venture Capital GmbH's Trademark Guidelines or the guidelines of the respective third-party owners, and any usage must be approved in writing. Third-party trademarks used herein are the property of their respective owners and used only in a descriptive manner, e.g. for an implementation of an API or similar.