cloud-ide-layout 1.0.8 → 1.0.10

package/README.md

@@ -1,477 +1,63 @@
-# Cloud IDE Layout Library
+# CloudIdeLayout
 
-The Cloud IDE Layout library provides reusable layout components and services for CIDE-LMS applications. It includes responsive layouts, navigation components, and layout management utilities.
+This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 20.1.0.
 
-## Features
+## Code scaffolding
 
-- **Layout Components**
-  - Main Application Shell
-  - Responsive Sidebar
-  - Header with Navigation
-  - Footer
-  - Content Area
-  - Home Page Layout
-  - Side Drawer
-  - Console
-- **Navigation Components**
-  - Menu System
-  - Breadcrumbs
-  - Tabs
-- **Layout Services**
-  - Shared Layout Service
-  - Home Service
-  - Sidebar State Management
-  - Responsive Breakpoints
-  - Theme Management
-- **Dynamic Content**
-  - Page-specific layouts based on configuration
-  - Content loading from API
-  - Title management
-
-## Installation
+Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
 
 ```bash
-npm install @cide-lms/cloud-ide-layout
-```
-
-### Dependencies
-
-This library depends on:
-- Angular 17+
-- cloud-ide-element (for UI components)
-- cloud-ide-lms-model (for data models)
-
-## Usage
-
-### Basic Layout
-
-```typescript
-import { CloudIdeLayoutComponent } from 'cloud-ide-layout';
-
-@Component({
-  standalone: true,
-  imports: [CloudIdeLayoutComponent],
-  template: `
-    <cide-lyt-wrapper></cide-lyt-wrapper>
-  `
-})
-export class AppComponent { }
-```
-
-### Home Page Layout
-
-```typescript
-import { CideLytHomeWrapperComponent } from 'cloud-ide-layout';
-
-@Component({
-  standalone: true,
-  imports: [CideLytHomeWrapperComponent],
-  template: `
-    <cide-lyt-home-wrapper></cide-lyt-home-wrapper>
-  `
-})
-export class HomePageComponent { }
-```
-
-## Component Documentation
-
-### Main Components
-
-- [Cloud IDE Layout Component](./src/lib/README.md) - Main wrapper and entry point
-- [Layout Wrapper Component](./src/lib/layout/layout/layout-wrapper/README.md) - Core layout structure
-- [Home Wrapper Component](./src/lib/layout/home/home-wrapper/README.md) - Home page layout
-
-### Base Components
-
-- [Shared Wrapper Component](./src/lib/layout/shared/shared-wrapper/README.md) - Base component for page layouts
-
-### Services
-
-- [Shared Layout Service](./src/lib/layout/shared/README.md) - Core service for layout management
-- [Home Layout Service](./src/lib/layout/home/README.md) - Home page specific service
-
-## Advanced Usage
-
-### Creating a Custom Page Layout
-
-You can extend the shared wrapper component to create custom page layouts:
-
-```typescript
-import { Component } from '@angular/core';
-import { CideLytSharedWrapperComponent, CideLytSharedWrapperSetupParam } from 'cloud-ide-layout';
-import { CideLytSharedService } from 'cloud-ide-layout';
-
-@Component({
-  selector: 'app-custom-page',
-  standalone: true,
-  imports: [],
-  templateUrl: './custom-page.component.html',
-  styleUrl: './custom-page.component.css'
-})
-export class CustomPageComponent extends CideLytSharedWrapperComponent {
-  public override shared_wrapper_setup_param: Partial<CideLytSharedWrapperSetupParam> = {
-    sypg_page_code: "custom_page_code"
-  }
-
-  constructor(sharedService: CideLytSharedService) {
-    super(sharedService);
-  }
-  
-  // Add custom functionality here
-}
-```
-
-### Working with Page Data
-
-The shared wrapper component automatically loads page data based on the configured page code:
-
-```typescript
-// In your component that extends CideLytSharedWrapperComponent
-ngAfterViewInit() {
-  // Access page data loaded by parent class
-  console.log('Page data:', this.page_data);
-  
-  // Access specific page elements
-  const pageTitle = this.page_data?.page?.sypg_title;
-  const pageConfig = this.page_data?.config;
-}
-```
-
-## Architecture
-
-### Component Hierarchy
-
-```
-CloudIdeLayoutComponent
-└── CideLytLayoutWrapperComponent
-    ├── HeaderWrapperComponent
-    ├── SidebarWrapperComponent
-    ├── SidedrawerWrapperComponent
-    ├── Router Outlet (Content Area)
-    │   └── CideLytHomeWrapperComponent (and other page components)
-    ├── FooterWrapperComponent
-    └── ConsoleWrapperComponent
-```
-
-### Service Relationships
-
-```
-CloudIdeLayoutService
-├── CideLytSharedService
-│   ├── CideLytHomeService
-│   ├── CideLytSidebarService
-│   ├── CideLytHeaderService
-│   ├── CideLytFooterService
-│   └── CideLytConsoleService
-└── CideElementsService (from cloud-ide-element)
+ng generate component component-name
 ```
 
-### Inheritance Tree
+For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
 
-The wrapper components follow this inheritance pattern:
-
-```
-CideLytSharedWrapperComponent (Base)
-└── CideLytHomeWrapperComponent
-    (Other specialized wrapper components)
-```
-
-## API Reference
-
-### Components
-
-#### CloudIdeLayoutComponent
-- **Selector**: `cide-lyt-wrapper`
-- **Purpose**: Main entry point component
-
-#### CideLytLayoutWrapperComponent
-- **Selector**: `cide-lyt-layout-wrapper`
-- **Purpose**: Layout structure component
-
-#### CideLytHomeWrapperComponent
-- **Selector**: `cide-lyt-home-wrapper`
-- **Purpose**: Home page specific layout
-- **Configuration**: `shared_wrapper_setup_param.sypg_page_code = "cide_lyt_home"`
-
-#### CideLytSharedWrapperComponent
-- **Selector**: `cide-lyt-shared-wrapper`
-- **Purpose**: Base component for page layouts
-- **Methods**:
-  - `loadPageData()`
-  - `setTitle(title: string)`
-
-### Services
-
-#### CloudIdeLayoutService
-- **Purpose**: Main library service
-
-#### CideLytSharedService
-- **Purpose**: Shared functionality service
-- **Methods**:
-  - `loadPageData(body: MDesignConfig): Observable<designConfigControllerResponse>`
-  - `setPageData(response: designConfigControllerResponse, payload: Partial<CideLytSharedWrapperSetupParam>): void`
-  - `getPageData(key: string): designConfigControllerResponse | undefined`
-
-#### CideLytHomeService
-- **Purpose**: Home page specific service
-
-## Contributing
-
-Guidelines for contributing to this library:
-
-1. Follow Angular best practices and coding standards
-2. Ensure components are standalone and properly encapsulated
-3. Write unit tests for all components and services
-4. Update documentation when adding new features
-5. Follow the existing architecture patterns
-
-## License
-
-MIT
-
-```typescript
-import { Component } from '@angular/core';
-import { CloudIdeLayoutModule } from '@cide-lms/cloud-ide-layout';
-
-@Component({
-  selector: 'app-root',
-  template: `
-    <cloud-ide-layout>
-      <cloud-ide-header>
-        <h1>CIDE-LMS</h1>
-        <div class="user-menu">...</div>
-      </cloud-ide-header>
-      
-      <cloud-ide-sidebar [items]="navigationItems">
-        <!-- Optional custom sidebar content -->
-      </cloud-ide-sidebar>
-      
-      <cloud-ide-content>
-        <router-outlet></router-outlet>
-      </cloud-ide-content>
-      
-      <cloud-ide-footer>
-        &copy; 2025 CIDE-LMS
-      </cloud-ide-footer>
-    </cloud-ide-layout>
-  `
-})
-export class AppComponent {
-  navigationItems = [
-    { label: 'Dashboard', icon: 'dashboard', route: '/dashboard' },
-    { label: 'Courses', icon: 'school', route: '/courses' },
-    { label: 'Calendar', icon: 'calendar', route: '/calendar' },
-    { label: 'Messages', icon: 'message', route: '/messages', badge: '5' },
-    {
-      label: 'Settings',
-      icon: 'settings',
-      children: [
-        { label: 'Profile', route: '/settings/profile' },
-        { label: 'Account', route: '/settings/account' }
-      ]
-    }
-  ];
-}
-```
-
-### Sidebar Service
-
-```typescript
-import { Component } from '@angular/core';
-import { CloudIdeLayoutService } from '@cide-lms/cloud-ide-layout';
-
-@Component({
-  selector: 'app-header',
-  template: `
-    <button (click)="toggleSidebar()">
-      <cloud-ide-icon name="menu"></cloud-ide-icon>
-    </button>
-  `
-})
-export class HeaderComponent {
-  constructor(private layoutService: CloudIdeLayoutService) {}
-  
-  toggleSidebar() {
-    this.layoutService.toggleSidebar();
-  }
-}
-```
-
-### Responsive Breakpoints
-
-```typescript
-import { Component, OnInit, OnDestroy } from '@angular/core';
-import { CloudIdeLayoutService, BreakpointState } from '@cide-lms/cloud-ide-layout';
-import { Subscription } from 'rxjs';
-
-@Component({
-  selector: 'app-responsive-component',
-  template: `
-    <div [class.compact]="isMobile">
-      <!-- Content that adjusts based on screen size -->
-    </div>
-  `
-})
-export class ResponsiveComponent implements OnInit, OnDestroy {
-  isMobile = false;
-  private breakpointSubscription: Subscription;
-  
-  constructor(private layoutService: CloudIdeLayoutService) {}
-  
-  ngOnInit() {
-    this.breakpointSubscription = this.layoutService.breakpointState$.subscribe(
-      (state: BreakpointState) => {
-        this.isMobile = state.isMobile;
-      }
-    );
-  }
-  
-  ngOnDestroy() {
-    this.breakpointSubscription?.unsubscribe();
-  }
-}
+```bash
+ng generate --help
 ```
 
-### Theme Management
+## Building
 
-```typescript
-import { Component } from '@angular/core';
-import { CloudIdeLayoutService, ThemeMode } from '@cide-lms/cloud-ide-layout';
+To build the library, run:
 
-@Component({
-  selector: 'app-theme-toggle',
-  template: `
-    <button (click)="toggleTheme()">
-      <cloud-ide-icon [name]="isDarkMode ? 'light_mode' : 'dark_mode'"></cloud-ide-icon>
-      {{ isDarkMode ? 'Light Mode' : 'Dark Mode' }}
-    </button>
-  `
-})
-export class ThemeToggleComponent {
-  isDarkMode = false;
-  
-  constructor(private layoutService: CloudIdeLayoutService) {
-    this.layoutService.currentTheme$.subscribe(theme => {
-      this.isDarkMode = theme === ThemeMode.DARK;
-    });
-  }
-  
-  toggleTheme() {
-    this.layoutService.toggleTheme();
-  }
-}
+```bash
+ng build cloud-ide-layout
 ```
 
-## API Reference
+This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
 
-### Components
+### Publishing the Library
 
-| Component           | Description                                               |
-|---------------------|-----------------------------------------------------------|
-| CloudIdeLayout      | Main layout container                                     |
-| CloudIdeHeader      | Application header with customizable content              |
-| CloudIdeSidebar     | Navigation sidebar with collapsible menu                  |
-| CloudIdeContent     | Main content area                                         |
-| CloudIdeFooter      | Application footer                                        |
-| CloudIdeBreadcrumbs | Breadcrumb navigation component                           |
-| CloudIdeTabs        | Tabbed interface component                                |
+Once the project is built, you can publish your library by following these steps:
 
-### CloudIdeLayoutService
+1. Navigate to the `dist` directory:
+   ```bash
+   cd dist/cloud-ide-layout
+   ```
 
-| Method/Property      | Type                   | Description                                      |
-|----------------------|------------------------|--------------------------------------------------|
-| toggleSidebar()      | method                 | Toggles sidebar visibility                       |
-| setSidebarVisible()  | method(boolean)        | Sets sidebar visibility                          |
-| toggleTheme()        | method                 | Toggles between light and dark mode              |
-| setTheme()           | method(ThemeMode)      | Sets specific theme mode                         |
-| sidebarVisible$      | Observable\<boolean\>   | Current sidebar visibility state                 |
-| currentTheme$        | Observable\<ThemeMode\> | Current theme mode                               |
-| breakpointState$     | Observable\<BreakpointState\> | Current responsive breakpoint information     |
+2. Run the `npm publish` command to publish your library to the npm registry:
+   ```bash
+   npm publish
+   ```
 
-## Customization
+## Running unit tests
 
-### Theme Variables
+To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
 
-The layout components use CSS variables for styling. You can override these in your application:
-
-```scss
-:root {
-  // Layout colors
-  --cide-layout-bg: #f8fafc;
-  --cide-layout-text: #1e293b;
-  --cide-layout-sidebar-bg: #ffffff;
-  --cide-layout-sidebar-text: #475569;
-  --cide-layout-sidebar-active: #3b82f6;
-  --cide-layout-header-bg: #ffffff;
-  --cide-layout-header-text: #1e293b;
-  
-  // Spacing
-  --cide-layout-header-height: 64px;
-  --cide-layout-sidebar-width: 280px;
-  --cide-layout-sidebar-collapsed-width: 72px;
-  --cide-layout-footer-height: 48px;
-  
-  // Other
-  --cide-layout-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-  --cide-layout-border-color: #e2e8f0;
-}
-```
-
-### Dark Mode Variables
-
-```scss
-.dark-theme {
-  --cide-layout-bg: #0f172a;
-  --cide-layout-text: #f1f5f9;
-  --cide-layout-sidebar-bg: #1e293b;
-  --cide-layout-sidebar-text: #cbd5e1;
-  --cide-layout-sidebar-active: #60a5fa;
-  --cide-layout-header-bg: #1e293b;
-  --cide-layout-header-text: #f1f5f9;
-  --cide-layout-border-color: #334155;
-}
+```bash
+ng test
 ```
 
-## Layouts
+## Running end-to-end tests
 
-The library includes several predefined layout templates:
+For end-to-end (e2e) testing, run:
 
-1. **Standard Layout** - Header, sidebar, and content
-2. **Dashboard Layout** - Header, sidebar, content with dashboard cards
-3. **Learning Layout** - Optimized for learning content with adjustable sidebar
-
-To use a specific layout:
-
-```typescript
-import { CloudIdeLayoutModule, LayoutType } from '@cide-lms/cloud-ide-layout';
-
-@Component({
-  template: `
-    <cloud-ide-layout [type]="LayoutType.DASHBOARD">
-      <!-- Layout content -->
-    </cloud-ide-layout>
-  `
-})
-export class DashboardComponent {
-  LayoutType = LayoutType; // Make enum available in template
-}
+```bash
+ng e2e
 ```
 
-## Installation
-To install the library in your project, follow these steps:
+Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
 
-1. **Install the Library**  
-    Run the following command to install the library:  
-    ```bash
-    npm install cloud-ide-layout
-    ```
+## Additional Resources
 
-2. **Add Global Styles**  
-    Update the `styles` array in the `angular.json` file to include your global CSS file. For example:  
-    ```json
-    "styles": [
-      "src/styles.css",
-      "node_modules/cloud-ide-layout/src/lib/assets/css/cide-lyt-style.scss"
-    ]
-    ```
-    ```
+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.