Timesmed UI Library

This library contains reusable Angular components for Timesmed applications.

Installation

npm install @timesmed/ui

1. MultiSelect Dropdown Component

A premium, customizable multi-select dropdown with support for searching, custom options, and sleek styling.

Usage

import { MultiSelectDropdown } from '@timesmed/ui';

@Component({
  imports: [MultiSelectDropdown],
})
export class AppComponent {
  myOptions = [
    { id: 1, name: 'Option 1' },
    { id: 2, name: 'Option 2' },
  ];
}

<tm-multi-select-dropdown 
    [options]="myOptions" 
    labelKey="name" 
    valueKey="id" 
    placeholder="Select Options">
</tm-multi-select-dropdown>

2. SQL Query Editor

A full-featured SQL editor with syntax highlighting, run capabilities, and a results table with CSV download.

Usage

import { SqlQueryEditor } from '@timesmed/ui';

@Component({
  imports: [SqlQueryEditor],
})
export class AppComponent {
  query = 'SELECT * FROM users';
  results = [];

  onRunQuery(sql: string) {
    // Call your API here
    console.log('Running:', sql);
    // Mock result
    this.results = [
        { id: 1, name: 'Alice', role: 'Admin' },
        { id: 2, name: 'Bob', role: 'User' }
    ];
  }
}

<tm-sql-query-editor
    [(value)]="query"
    [data]="results"
    (runQuery)="onRunQuery($event)">
</tm-sql-query-editor>

Inputs

| Input | Type | Default | Description | |---|---|---|---| | value | string | '' | The SQL query string. | | data | any[] | null | Array of objects to display in the result table. Columns are auto-generated from keys. |

Outputs

| Output | Type | Description | |---|---|---| | valueChange | EventEmitter<string> | Emitted when query changes. | | runQuery | EventEmitter<string> | Emitted when the "Run Query" button is clicked. |