cloud-ide-element 1.0.2 → 1.0.5

package/README.md

@@ -1,271 +1,63 @@
-# cloud-ide-element
-
-[![npm version](https://badge.fury.io/js/cloud-ide-element.svg)](https://badge.fury.io/js/cloud-ide-element)
-[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
-[![Angular](https://img.shields.io/badge/Angular-18+-red.svg)](https://angular.io/)
-[![TypeScript](https://img.shields.io/badge/TypeScript-5.0+-blue.svg)](https://www.typescriptlang.org/)
-
-A comprehensive Angular UI component library built for modern web applications. Featuring responsive design, TypeScript support, and Angular 18+ compatibility with signals and standalone components.
-
-## ✨ Features
-
-- 🎨 **Modern Design** - Clean, responsive components with Tailwind CSS
-- 🔧 **TypeScript** - Full type safety and IntelliSense support
-- 📱 **Responsive** - Mobile-first design approach
-- ⚡ **Angular 18+** - Built with latest Angular features (signals, control flow)
-- 🧩 **Standalone** - Tree-shakable standalone components
-- 🎯 **Accessible** - WCAG compliant components
-- 🔥 **Performance** - Optimized for production use
-
-## 📦 Installation
-
-```bash
-npm install cloud-ide-element
-```
-
-## 🚀 Quick Start
-
-### Import Components
-
-```typescript
-import { 
-  CideEleButtonComponent,
-  CideEleInputComponent,
-  CideEleTabComponent,
-  CideEleDataGridComponent 
-} from 'cloud-ide-element';
-
-@Component({
-  standalone: true,
-  imports: [
-    CideEleButtonComponent,
-    CideEleInputComponent,
-    CideEleTabComponent,
-    CideEleDataGridComponent
-  ],
-  template: `
-    <cide-ele-button variant="primary" size="md">
-      Click me!
-    </cide-ele-button>
-    
-    <cide-ele-input 
-      label="Email" 
-      type="email" 
-      placeholder="Enter your email">
-    </cide-ele-input>
-    
-    <cide-ele-tab [tabs]="tabs" (tabChange)="onTabChange($event)"></cide-ele-tab>
-    
-    <cide-ele-data-grid [config]="gridConfig"></cide-ele-data-grid>
-  `
-})
-export class MyComponent { }
-```
-
-### Data Grid Example
-
-```typescript
-import { Component, signal } from '@angular/core';
-import { CideEleDataGridComponent, GridConfiguration } from 'cloud-ide-element';
-
-@Component({
-  standalone: true,
-  imports: [CideEleDataGridComponent],
-  template: `<cide-ele-data-grid [config]="gridConfig()"></cide-ele-data-grid>`
-})
-export class UserGridComponent {
-  gridConfig = signal<GridConfiguration>({
-    id: 'users',
-    title: 'User Management',
-    columns: [
-      { key: 'name', header: 'Name', type: 'text', searchable: true },
-      { key: 'email', header: 'Email', type: 'text', searchable: true },
-      { key: 'isActive', header: 'Status', type: 'boolean' },
-      {
-        key: 'actions',
-        header: 'Actions',
-        type: 'actions',
-        actions: [
-          { key: 'edit', label: 'Edit', variant: 'primary', onClick: 'editUser' }
-        ]
-      }
-    ],
-    data: [
-      { id: 1, name: 'John Doe', email: 'john@example.com', isActive: true },
-      { id: 2, name: 'Jane Smith', email: 'jane@example.com', isActive: false }
-    ],
-    pagination: { enabled: true, pageSize: 10 },
-    search: { enabled: true, placeholder: 'Search users...' }
-  });
-}
-```
-
-## 📚 Component Library
-
-### 🎯 Basic UI Elements
-
-| Component | Description | Features |
-|-----------|-------------|----------|
-| **Button** | Customizable button component | Multiple variants, sizes, loading states |
-| **Input** | Form input with validation | Text, email, password, number types |
-| **Select** | Dropdown select component | Single/multi-select, searchable options |
-| **Textarea** | Multi-line text input | Auto-resize, character counting |
-| **Tab** | Navigation tab component | Simple, compact design with variants |
-| **Icon** | SVG icon component | Customizable size and color |
-| **Spinner** | Loading indicator | Multiple sizes and variants |
-
-### 🚀 Advanced Components
-
-| Component | Description | Key Features |
-|-----------|-------------|--------------|
-| **Data Grid** | Enterprise-grade data table | Pagination, search, sorting, custom renderers, actions |
-
-### 🔧 Utilities
-
-| Directive | Description | Use Case |
-|-----------|-------------|----------|
-| **Tooltip** | Hover tooltip directive | Help text and information display |
-| **Resizer** | Element resize directive | Draggable resize functionality |
-
-## 📖 Documentation
-
-### Component Documentation
-
-- [Button Component](./src/lib/elements/button/README.md) - Buttons, links, and action triggers
-- [Input Component](./src/lib/elements/input/README.md) - Form inputs with validation
-- [Select Component](./src/lib/elements/select/README.md) - Dropdown selects and multi-selects
-- [Textarea Component](./src/lib/elements/textarea/README.md) - Multi-line text areas
-- [Tab Component](./src/lib/elements/tab/README.md) - Navigation tabs for content organization
-- [Icon Component](./src/lib/elements/icon/README.md) - SVG icons and graphics
-- [Spinner Component](./src/lib/elements/spinner/README.md) - Loading states and progress
-
-### Advanced Components
-
-- [**Data Grid Component**](./src/lib/components/data-grid/README.md) - Complete data table solution with advanced features
-
-### Directives
-
-- [Tooltip Directive](./src/lib/utils/directives/tooltip/README.md) - Hover tooltips and help text
-- [Resizer Directive](./src/lib/utils/directives/resizer/README.md) - Draggable element resizing
-
-## 🎨 Styling & Theming
-
-This library uses Tailwind CSS for styling. Import the theme variables:
-
-```scss
-@import 'cloud-ide-element/style';
-```
-
-### Custom Theme Variables
-
-```scss
-// Override default theme variables
-:root {
-  --cide-primary-color: #3b82f6;
-  --cide-secondary-color: #6b7280;
-  --cide-border-radius: 6px;
-}
-```
-
-## 🔧 Configuration
-
-### Angular.json Setup
-
-Add to your `angular.json` styles array:
-
-```json
-{
-  "styles": [
-    "node_modules/cloud-ide-element/lib/assets/css/cide-ele-style.scss"
-  ]
-}
-```
-
-### Module Setup (Optional)
-
-For non-standalone usage:
-
-```typescript
-import { NgModule } from '@angular/core';
-import { 
-  CideEleButtonComponent,
-  CideEleInputComponent,
-  CideEleDataGridComponent 
-} from 'cloud-ide-element';
-
-@NgModule({
-  imports: [
-    CideEleButtonComponent,
-    CideEleInputComponent,
-    CideEleDataGridComponent
-  ],
-  exports: [
-    CideEleButtonComponent,
-    CideEleInputComponent,
-    CideEleDataGridComponent
-  ]
-})
-export class CloudIdeElementModule { }
-```
-
-## 🌟 Key Highlights
-
-### Data Grid Features
-- **📊 Rich Data Display** - Tables with sorting, filtering, and pagination
-- **🔍 Advanced Search** - Multi-column search with debouncing
-- **⚡ Performance** - Virtual scrolling for large datasets
-- **🎨 Custom Rendering** - Custom cell renderers and formatters
-- **📱 Responsive** - Mobile-optimized layouts
-- **🔧 Action Buttons** - Configurable row actions with conditions
-
-### Form Components
-- **✅ Validation** - Built-in form validation support
-- **♿ Accessibility** - WCAG 2.1 AA compliant
-- **🎯 Consistent** - Unified design language across all components
-- **🔧 Flexible** - Extensive customization options
-
-## 🤝 Contributing
-
-We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.
-
-### Development Setup
-
-```bash
-# Clone the repository
-git clone https://github.com/your-org/cloud-ide-element.git
-
-# Install dependencies
-npm install
-
-# Start development server
-ng serve
-
-# Build the library
-ng build cloud-ide-element
-
-# Run tests
-ng test cloud-ide-element
-```
-
-## 📄 License
-
-This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
-
-## 🚀 Roadmap
-
-- [ ] Tree Table Component
-- [ ] Calendar/Date Picker
-- [ ] File Upload Component
-- [ ] Chart Components
-- [ ] Rich Text Editor
-- [ ] Dashboard Widgets
-
-## 💬 Support
-
-- 📧 Email: support@cide-lms.com
-- 🐛 Issues: [GitHub Issues](https://github.com/your-org/cloud-ide-element/issues)
-- 📖 Documentation: [Full Documentation](https://docs.cide-lms.com)
-
----
-
-Made with ❤️ by the CIDE-LMS Team
+# CloudIdeElement
+
+This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 20.1.0.
+
+## Code scaffolding
+
+Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+
+```bash
+ng generate component component-name
+```
+
+For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
+
+```bash
+ng generate --help
+```
+
+## Building
+
+To build the library, run:
+
+```bash
+ng build cloud-ide-element
+```
+
+This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
+
+### Publishing the Library
+
+Once the project is built, you can publish your library by following these steps:
+
+1. Navigate to the `dist` directory:
+   ```bash
+   cd dist/cloud-ide-element
+   ```
+
+2. Run the `npm publish` command to publish your library to the npm registry:
+   ```bash
+   npm publish
+   ```
+
+## Running unit tests
+
+To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
+
+```bash
+ng test
+```
+
+## Running end-to-end tests
+
+For end-to-end (e2e) testing, run:
+
+```bash
+ng e2e
+```
+
+Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+
+## Additional Resources
+
+For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.