cloud-ide-layout 0.0.1 → 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (81) hide show
  1. package/README.md +466 -13
  2. package/esm2022/lib/cloud-ide-layout.routes.mjs +24 -10
  3. package/esm2022/lib/layout/console/console-wrapper/console-wrapper.component.mjs +6 -6
  4. package/esm2022/lib/layout/console/console.service.mjs +28 -0
  5. package/esm2022/lib/layout/footer/footer-wrapper/footer-wrapper.component.mjs +16 -8
  6. package/esm2022/lib/layout/footer/footer.service.mjs +28 -0
  7. package/esm2022/lib/layout/header/header-wrapper/header-wrapper.component.mjs +69 -18
  8. package/esm2022/lib/layout/header/header.service.mjs +17 -6
  9. package/esm2022/lib/layout/home/home-wrapper/home-wrapper.component.mjs +194 -7
  10. package/esm2022/lib/layout/layout/layout-wrapper/layout-wrapper.component.mjs +18 -9
  11. package/esm2022/lib/layout/request/request-wrapper/request-wrapper.component.mjs +54 -6
  12. package/esm2022/lib/layout/request/request.service.mjs +235 -0
  13. package/esm2022/lib/layout/request/tab-content/tab-content.component.mjs +84 -0
  14. package/esm2022/lib/layout/shared/shared-wrapper/shared-wrapper.component.mjs +32 -20
  15. package/esm2022/lib/layout/shared/shared.service.mjs +490 -14
  16. package/esm2022/lib/layout/sidebar/sidebar-wrapper/sidebar-wrapper.component.mjs +480 -15
  17. package/esm2022/lib/layout/sidebar/sidebar.service.mjs +20 -7
  18. package/esm2022/lib/layout/sidedrawer/cide-lyt-drawer-base.class.mjs +40 -0
  19. package/esm2022/lib/layout/sidedrawer/drawer-theme/drawer-theme.component.mjs +296 -0
  20. package/esm2022/lib/layout/sidedrawer/sidedrawer-notes/sidedrawer-notes.component.mjs +175 -0
  21. package/esm2022/lib/layout/sidedrawer/sidedrawer-notes/sidedrawer-notes.service.mjs +51 -0
  22. package/esm2022/lib/layout/sidedrawer/sidedrawer-wrapper/sidedrawer-wrapper.component.mjs +254 -9
  23. package/esm2022/lib/layout/sidedrawer/sidedrawer.service.mjs +70 -0
  24. package/esm2022/lib/services/app-state/app-state-helper.service.mjs +222 -0
  25. package/esm2022/lib/services/app-state/app-state.service.mjs +256 -0
  26. package/esm2022/lib/services/app-state/index.mjs +3 -0
  27. package/esm2022/lib/services/cache-manager/cache-manager.service.mjs +112 -0
  28. package/esm2022/lib/services/file-manager/file-manager.service.mjs +7 -7
  29. package/esm2022/lib/services/tab-state.service.mjs +128 -0
  30. package/esm2022/lib/services/theme/theme.service.mjs +151 -0
  31. package/esm2022/lib/services/user-status/user-status.service.mjs +135 -0
  32. package/esm2022/lib/utils/custom-route-reuse-strategy.mjs +61 -0
  33. package/esm2022/lib/utils/index.mjs +2 -0
  34. package/esm2022/public-api.mjs +7 -1
  35. package/fesm2022/cloud-ide-layout-cloud-ide-layout-DqL3A73V.mjs +2914 -0
  36. package/fesm2022/cloud-ide-layout-cloud-ide-layout-DqL3A73V.mjs.map +1 -0
  37. package/fesm2022/cloud-ide-layout-drawer-theme.component-xd8IG3WP.mjs +443 -0
  38. package/fesm2022/cloud-ide-layout-drawer-theme.component-xd8IG3WP.mjs.map +1 -0
  39. package/fesm2022/cloud-ide-layout-home-wrapper.component-DEdsEiaq.mjs +197 -0
  40. package/fesm2022/cloud-ide-layout-home-wrapper.component-DEdsEiaq.mjs.map +1 -0
  41. package/fesm2022/cloud-ide-layout-sidedrawer-notes.component-ds12wZbh.mjs +260 -0
  42. package/fesm2022/cloud-ide-layout-sidedrawer-notes.component-ds12wZbh.mjs.map +1 -0
  43. package/fesm2022/cloud-ide-layout.mjs +1 -261
  44. package/fesm2022/cloud-ide-layout.mjs.map +1 -1
  45. package/lib/cloud-ide-layout.routes.d.ts +1 -0
  46. package/lib/layout/console/console-wrapper/console-wrapper.component.d.ts +3 -3
  47. package/lib/layout/console/console.service.d.ts +9 -0
  48. package/lib/layout/footer/footer-wrapper/footer-wrapper.component.d.ts +7 -3
  49. package/lib/layout/footer/footer.service.d.ts +9 -0
  50. package/lib/layout/header/header-wrapper/header-wrapper.component.d.ts +17 -9
  51. package/lib/layout/header/header.service.d.ts +4 -3
  52. package/lib/layout/home/home-wrapper/home-wrapper.component.d.ts +90 -1
  53. package/lib/layout/request/request-wrapper/request-wrapper.component.d.ts +10 -1
  54. package/lib/layout/request/request.service.d.ts +60 -0
  55. package/lib/layout/request/tab-content/tab-content.component.d.ts +19 -0
  56. package/lib/layout/shared/shared-wrapper/shared-wrapper.component.d.ts +4 -5
  57. package/lib/layout/shared/shared.service.d.ts +104 -6
  58. package/lib/layout/sidebar/sidebar-wrapper/sidebar-wrapper.component.d.ts +135 -6
  59. package/lib/layout/sidebar/sidebar.service.d.ts +3 -2
  60. package/lib/layout/sidedrawer/cide-lyt-drawer-base.class.d.ts +16 -0
  61. package/lib/layout/sidedrawer/drawer-theme/drawer-theme.component.d.ts +71 -0
  62. package/lib/layout/sidedrawer/sidedrawer-notes/sidedrawer-notes.component.d.ts +48 -0
  63. package/lib/layout/sidedrawer/sidedrawer-notes/sidedrawer-notes.service.d.ts +13 -0
  64. package/lib/layout/sidedrawer/sidedrawer-wrapper/sidedrawer-wrapper.component.d.ts +28 -3
  65. package/lib/layout/sidedrawer/sidedrawer.service.d.ts +30 -0
  66. package/lib/services/app-state/app-state-helper.service.d.ts +150 -0
  67. package/lib/services/app-state/app-state.service.d.ts +85 -0
  68. package/lib/services/app-state/index.d.ts +3 -0
  69. package/lib/services/cache-manager/cache-manager.service.d.ts +64 -0
  70. package/lib/services/file-manager/file-manager.service.d.ts +0 -2
  71. package/lib/services/tab-state.service.d.ts +79 -0
  72. package/lib/services/theme/theme.service.d.ts +71 -0
  73. package/lib/services/user-status/user-status.service.d.ts +57 -0
  74. package/lib/utils/custom-route-reuse-strategy.d.ts +15 -0
  75. package/lib/utils/index.d.ts +1 -0
  76. package/package.json +2 -2
  77. package/public-api.d.ts +4 -0
  78. package/src/lib/assets/css/cide-lyt-style.scss +182 -0
  79. package/src/lib/assets/css/cide-lyt-variable.scss +119 -0
  80. package/fesm2022/cloud-ide-layout-home-wrapper.component-BV7ptL0Y.mjs +0 -14
  81. package/fesm2022/cloud-ide-layout-home-wrapper.component-BV7ptL0Y.mjs.map +0 -1
package/README.md CHANGED
@@ -1,24 +1,477 @@
1
- # CloudIdeLayout
1
+ # Cloud IDE Layout Library
2
2
 
3
- This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.0.0.
3
+ 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.
4
4
 
5
- ## Code scaffolding
5
+ ## Features
6
6
 
7
- Run `ng generate component component-name --project cloud-ide-layout` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project cloud-ide-layout`.
8
- > Note: Don't forget to add `--project cloud-ide-layout` or else it will be added to the default project in your `angular.json` file.
7
+ - **Layout Components**
8
+ - Main Application Shell
9
+ - Responsive Sidebar
10
+ - Header with Navigation
11
+ - Footer
12
+ - Content Area
13
+ - Home Page Layout
14
+ - Side Drawer
15
+ - Console
16
+ - **Navigation Components**
17
+ - Menu System
18
+ - Breadcrumbs
19
+ - Tabs
20
+ - **Layout Services**
21
+ - Shared Layout Service
22
+ - Home Service
23
+ - Sidebar State Management
24
+ - Responsive Breakpoints
25
+ - Theme Management
26
+ - **Dynamic Content**
27
+ - Page-specific layouts based on configuration
28
+ - Content loading from API
29
+ - Title management
9
30
 
10
- ## Build
31
+ ## Installation
11
32
 
12
- Run `ng build cloud-ide-layout` to build the project. The build artifacts will be stored in the `dist/` directory.
33
+ ```bash
34
+ npm install @cide-lms/cloud-ide-layout
35
+ ```
13
36
 
14
- ## Publishing
37
+ ### Dependencies
15
38
 
16
- After building your library with `ng build cloud-ide-layout`, go to the dist folder `cd dist/cloud-ide-layout` and run `npm publish`.
39
+ This library depends on:
40
+ - Angular 17+
41
+ - cloud-ide-element (for UI components)
42
+ - cloud-ide-lms-model (for data models)
17
43
 
18
- ## Running unit tests
44
+ ## Usage
19
45
 
20
- Run `ng test cloud-ide-layout` to execute the unit tests via [Karma](https://karma-runner.github.io).
46
+ ### Basic Layout
21
47
 
22
- ## Further help
48
+ ```typescript
49
+ import { CloudIdeLayoutComponent } from 'cloud-ide-layout';
23
50
 
24
- To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
51
+ @Component({
52
+ standalone: true,
53
+ imports: [CloudIdeLayoutComponent],
54
+ template: `
55
+ <cide-lyt-wrapper></cide-lyt-wrapper>
56
+ `
57
+ })
58
+ export class AppComponent { }
59
+ ```
60
+
61
+ ### Home Page Layout
62
+
63
+ ```typescript
64
+ import { CideLytHomeWrapperComponent } from 'cloud-ide-layout';
65
+
66
+ @Component({
67
+ standalone: true,
68
+ imports: [CideLytHomeWrapperComponent],
69
+ template: `
70
+ <cide-lyt-home-wrapper></cide-lyt-home-wrapper>
71
+ `
72
+ })
73
+ export class HomePageComponent { }
74
+ ```
75
+
76
+ ## Component Documentation
77
+
78
+ ### Main Components
79
+
80
+ - [Cloud IDE Layout Component](./src/lib/README.md) - Main wrapper and entry point
81
+ - [Layout Wrapper Component](./src/lib/layout/layout/layout-wrapper/README.md) - Core layout structure
82
+ - [Home Wrapper Component](./src/lib/layout/home/home-wrapper/README.md) - Home page layout
83
+
84
+ ### Base Components
85
+
86
+ - [Shared Wrapper Component](./src/lib/layout/shared/shared-wrapper/README.md) - Base component for page layouts
87
+
88
+ ### Services
89
+
90
+ - [Shared Layout Service](./src/lib/layout/shared/README.md) - Core service for layout management
91
+ - [Home Layout Service](./src/lib/layout/home/README.md) - Home page specific service
92
+
93
+ ## Advanced Usage
94
+
95
+ ### Creating a Custom Page Layout
96
+
97
+ You can extend the shared wrapper component to create custom page layouts:
98
+
99
+ ```typescript
100
+ import { Component } from '@angular/core';
101
+ import { CideLytSharedWrapperComponent, CideLytSharedWrapperSetupParam } from 'cloud-ide-layout';
102
+ import { CideLytSharedService } from 'cloud-ide-layout';
103
+
104
+ @Component({
105
+ selector: 'app-custom-page',
106
+ standalone: true,
107
+ imports: [],
108
+ templateUrl: './custom-page.component.html',
109
+ styleUrl: './custom-page.component.css'
110
+ })
111
+ export class CustomPageComponent extends CideLytSharedWrapperComponent {
112
+ public override shared_wrapper_setup_param: Partial<CideLytSharedWrapperSetupParam> = {
113
+ sypg_page_code: "custom_page_code"
114
+ }
115
+
116
+ constructor(sharedService: CideLytSharedService) {
117
+ super(sharedService);
118
+ }
119
+
120
+ // Add custom functionality here
121
+ }
122
+ ```
123
+
124
+ ### Working with Page Data
125
+
126
+ The shared wrapper component automatically loads page data based on the configured page code:
127
+
128
+ ```typescript
129
+ // In your component that extends CideLytSharedWrapperComponent
130
+ ngAfterViewInit() {
131
+ // Access page data loaded by parent class
132
+ console.log('Page data:', this.page_data);
133
+
134
+ // Access specific page elements
135
+ const pageTitle = this.page_data?.page?.sypg_title;
136
+ const pageConfig = this.page_data?.config;
137
+ }
138
+ ```
139
+
140
+ ## Architecture
141
+
142
+ ### Component Hierarchy
143
+
144
+ ```
145
+ CloudIdeLayoutComponent
146
+ └── CideLytLayoutWrapperComponent
147
+ ├── HeaderWrapperComponent
148
+ ├── SidebarWrapperComponent
149
+ ├── SidedrawerWrapperComponent
150
+ ├── Router Outlet (Content Area)
151
+ │ └── CideLytHomeWrapperComponent (and other page components)
152
+ ├── FooterWrapperComponent
153
+ └── ConsoleWrapperComponent
154
+ ```
155
+
156
+ ### Service Relationships
157
+
158
+ ```
159
+ CloudIdeLayoutService
160
+ ├── CideLytSharedService
161
+ │ ├── CideLytHomeService
162
+ │ ├── CideLytSidebarService
163
+ │ ├── CideLytHeaderService
164
+ │ ├── CideLytFooterService
165
+ │ └── CideLytConsoleService
166
+ └── CideElementsService (from cloud-ide-element)
167
+ ```
168
+
169
+ ### Inheritance Tree
170
+
171
+ The wrapper components follow this inheritance pattern:
172
+
173
+ ```
174
+ CideLytSharedWrapperComponent (Base)
175
+ └── CideLytHomeWrapperComponent
176
+ (Other specialized wrapper components)
177
+ ```
178
+
179
+ ## API Reference
180
+
181
+ ### Components
182
+
183
+ #### CloudIdeLayoutComponent
184
+ - **Selector**: `cide-lyt-wrapper`
185
+ - **Purpose**: Main entry point component
186
+
187
+ #### CideLytLayoutWrapperComponent
188
+ - **Selector**: `cide-lyt-layout-wrapper`
189
+ - **Purpose**: Layout structure component
190
+
191
+ #### CideLytHomeWrapperComponent
192
+ - **Selector**: `cide-lyt-home-wrapper`
193
+ - **Purpose**: Home page specific layout
194
+ - **Configuration**: `shared_wrapper_setup_param.sypg_page_code = "cide_lyt_home"`
195
+
196
+ #### CideLytSharedWrapperComponent
197
+ - **Selector**: `cide-lyt-shared-wrapper`
198
+ - **Purpose**: Base component for page layouts
199
+ - **Methods**:
200
+ - `loadPageData()`
201
+ - `setTitle(title: string)`
202
+
203
+ ### Services
204
+
205
+ #### CloudIdeLayoutService
206
+ - **Purpose**: Main library service
207
+
208
+ #### CideLytSharedService
209
+ - **Purpose**: Shared functionality service
210
+ - **Methods**:
211
+ - `loadPageData(body: MDesignConfig): Observable<designConfigControllerResponse>`
212
+ - `setPageData(response: designConfigControllerResponse, payload: Partial<CideLytSharedWrapperSetupParam>): void`
213
+ - `getPageData(key: string): designConfigControllerResponse | undefined`
214
+
215
+ #### CideLytHomeService
216
+ - **Purpose**: Home page specific service
217
+
218
+ ## Contributing
219
+
220
+ Guidelines for contributing to this library:
221
+
222
+ 1. Follow Angular best practices and coding standards
223
+ 2. Ensure components are standalone and properly encapsulated
224
+ 3. Write unit tests for all components and services
225
+ 4. Update documentation when adding new features
226
+ 5. Follow the existing architecture patterns
227
+
228
+ ## License
229
+
230
+ MIT
231
+
232
+ ```typescript
233
+ import { Component } from '@angular/core';
234
+ import { CloudIdeLayoutModule } from '@cide-lms/cloud-ide-layout';
235
+
236
+ @Component({
237
+ selector: 'app-root',
238
+ template: `
239
+ <cloud-ide-layout>
240
+ <cloud-ide-header>
241
+ <h1>CIDE-LMS</h1>
242
+ <div class="user-menu">...</div>
243
+ </cloud-ide-header>
244
+
245
+ <cloud-ide-sidebar [items]="navigationItems">
246
+ <!-- Optional custom sidebar content -->
247
+ </cloud-ide-sidebar>
248
+
249
+ <cloud-ide-content>
250
+ <router-outlet></router-outlet>
251
+ </cloud-ide-content>
252
+
253
+ <cloud-ide-footer>
254
+ &copy; 2025 CIDE-LMS
255
+ </cloud-ide-footer>
256
+ </cloud-ide-layout>
257
+ `
258
+ })
259
+ export class AppComponent {
260
+ navigationItems = [
261
+ { label: 'Dashboard', icon: 'dashboard', route: '/dashboard' },
262
+ { label: 'Courses', icon: 'school', route: '/courses' },
263
+ { label: 'Calendar', icon: 'calendar', route: '/calendar' },
264
+ { label: 'Messages', icon: 'message', route: '/messages', badge: '5' },
265
+ {
266
+ label: 'Settings',
267
+ icon: 'settings',
268
+ children: [
269
+ { label: 'Profile', route: '/settings/profile' },
270
+ { label: 'Account', route: '/settings/account' }
271
+ ]
272
+ }
273
+ ];
274
+ }
275
+ ```
276
+
277
+ ### Sidebar Service
278
+
279
+ ```typescript
280
+ import { Component } from '@angular/core';
281
+ import { CloudIdeLayoutService } from '@cide-lms/cloud-ide-layout';
282
+
283
+ @Component({
284
+ selector: 'app-header',
285
+ template: `
286
+ <button (click)="toggleSidebar()">
287
+ <cloud-ide-icon name="menu"></cloud-ide-icon>
288
+ </button>
289
+ `
290
+ })
291
+ export class HeaderComponent {
292
+ constructor(private layoutService: CloudIdeLayoutService) {}
293
+
294
+ toggleSidebar() {
295
+ this.layoutService.toggleSidebar();
296
+ }
297
+ }
298
+ ```
299
+
300
+ ### Responsive Breakpoints
301
+
302
+ ```typescript
303
+ import { Component, OnInit, OnDestroy } from '@angular/core';
304
+ import { CloudIdeLayoutService, BreakpointState } from '@cide-lms/cloud-ide-layout';
305
+ import { Subscription } from 'rxjs';
306
+
307
+ @Component({
308
+ selector: 'app-responsive-component',
309
+ template: `
310
+ <div [class.compact]="isMobile">
311
+ <!-- Content that adjusts based on screen size -->
312
+ </div>
313
+ `
314
+ })
315
+ export class ResponsiveComponent implements OnInit, OnDestroy {
316
+ isMobile = false;
317
+ private breakpointSubscription: Subscription;
318
+
319
+ constructor(private layoutService: CloudIdeLayoutService) {}
320
+
321
+ ngOnInit() {
322
+ this.breakpointSubscription = this.layoutService.breakpointState$.subscribe(
323
+ (state: BreakpointState) => {
324
+ this.isMobile = state.isMobile;
325
+ }
326
+ );
327
+ }
328
+
329
+ ngOnDestroy() {
330
+ this.breakpointSubscription?.unsubscribe();
331
+ }
332
+ }
333
+ ```
334
+
335
+ ### Theme Management
336
+
337
+ ```typescript
338
+ import { Component } from '@angular/core';
339
+ import { CloudIdeLayoutService, ThemeMode } from '@cide-lms/cloud-ide-layout';
340
+
341
+ @Component({
342
+ selector: 'app-theme-toggle',
343
+ template: `
344
+ <button (click)="toggleTheme()">
345
+ <cloud-ide-icon [name]="isDarkMode ? 'light_mode' : 'dark_mode'"></cloud-ide-icon>
346
+ {{ isDarkMode ? 'Light Mode' : 'Dark Mode' }}
347
+ </button>
348
+ `
349
+ })
350
+ export class ThemeToggleComponent {
351
+ isDarkMode = false;
352
+
353
+ constructor(private layoutService: CloudIdeLayoutService) {
354
+ this.layoutService.currentTheme$.subscribe(theme => {
355
+ this.isDarkMode = theme === ThemeMode.DARK;
356
+ });
357
+ }
358
+
359
+ toggleTheme() {
360
+ this.layoutService.toggleTheme();
361
+ }
362
+ }
363
+ ```
364
+
365
+ ## API Reference
366
+
367
+ ### Components
368
+
369
+ | Component | Description |
370
+ |---------------------|-----------------------------------------------------------|
371
+ | CloudIdeLayout | Main layout container |
372
+ | CloudIdeHeader | Application header with customizable content |
373
+ | CloudIdeSidebar | Navigation sidebar with collapsible menu |
374
+ | CloudIdeContent | Main content area |
375
+ | CloudIdeFooter | Application footer |
376
+ | CloudIdeBreadcrumbs | Breadcrumb navigation component |
377
+ | CloudIdeTabs | Tabbed interface component |
378
+
379
+ ### CloudIdeLayoutService
380
+
381
+ | Method/Property | Type | Description |
382
+ |----------------------|------------------------|--------------------------------------------------|
383
+ | toggleSidebar() | method | Toggles sidebar visibility |
384
+ | setSidebarVisible() | method(boolean) | Sets sidebar visibility |
385
+ | toggleTheme() | method | Toggles between light and dark mode |
386
+ | setTheme() | method(ThemeMode) | Sets specific theme mode |
387
+ | sidebarVisible$ | Observable\<boolean\> | Current sidebar visibility state |
388
+ | currentTheme$ | Observable\<ThemeMode\> | Current theme mode |
389
+ | breakpointState$ | Observable\<BreakpointState\> | Current responsive breakpoint information |
390
+
391
+ ## Customization
392
+
393
+ ### Theme Variables
394
+
395
+ The layout components use CSS variables for styling. You can override these in your application:
396
+
397
+ ```scss
398
+ :root {
399
+ // Layout colors
400
+ --cide-layout-bg: #f8fafc;
401
+ --cide-layout-text: #1e293b;
402
+ --cide-layout-sidebar-bg: #ffffff;
403
+ --cide-layout-sidebar-text: #475569;
404
+ --cide-layout-sidebar-active: #3b82f6;
405
+ --cide-layout-header-bg: #ffffff;
406
+ --cide-layout-header-text: #1e293b;
407
+
408
+ // Spacing
409
+ --cide-layout-header-height: 64px;
410
+ --cide-layout-sidebar-width: 280px;
411
+ --cide-layout-sidebar-collapsed-width: 72px;
412
+ --cide-layout-footer-height: 48px;
413
+
414
+ // Other
415
+ --cide-layout-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
416
+ --cide-layout-border-color: #e2e8f0;
417
+ }
418
+ ```
419
+
420
+ ### Dark Mode Variables
421
+
422
+ ```scss
423
+ .dark-theme {
424
+ --cide-layout-bg: #0f172a;
425
+ --cide-layout-text: #f1f5f9;
426
+ --cide-layout-sidebar-bg: #1e293b;
427
+ --cide-layout-sidebar-text: #cbd5e1;
428
+ --cide-layout-sidebar-active: #60a5fa;
429
+ --cide-layout-header-bg: #1e293b;
430
+ --cide-layout-header-text: #f1f5f9;
431
+ --cide-layout-border-color: #334155;
432
+ }
433
+ ```
434
+
435
+ ## Layouts
436
+
437
+ The library includes several predefined layout templates:
438
+
439
+ 1. **Standard Layout** - Header, sidebar, and content
440
+ 2. **Dashboard Layout** - Header, sidebar, content with dashboard cards
441
+ 3. **Learning Layout** - Optimized for learning content with adjustable sidebar
442
+
443
+ To use a specific layout:
444
+
445
+ ```typescript
446
+ import { CloudIdeLayoutModule, LayoutType } from '@cide-lms/cloud-ide-layout';
447
+
448
+ @Component({
449
+ template: `
450
+ <cloud-ide-layout [type]="LayoutType.DASHBOARD">
451
+ <!-- Layout content -->
452
+ </cloud-ide-layout>
453
+ `
454
+ })
455
+ export class DashboardComponent {
456
+ LayoutType = LayoutType; // Make enum available in template
457
+ }
458
+ ```
459
+
460
+ ## Installation
461
+ To install the library in your project, follow these steps:
462
+
463
+ 1. **Install the Library**
464
+ Run the following command to install the library:
465
+ ```bash
466
+ npm install cloud-ide-layout
467
+ ```
468
+
469
+ 2. **Add Global Styles**
470
+ Update the `styles` array in the `angular.json` file to include your global CSS file. For example:
471
+ ```json
472
+ "styles": [
473
+ "src/styles.css",
474
+ "node_modules/cloud-ide-layout/src/lib/assets/css/cide-lyt-style.scss"
475
+ ]
476
+ ```
477
+ ```
@@ -1,14 +1,28 @@
1
1
  export const layoutRoutes = {
2
2
  path: "control-panel",
3
3
  loadComponent: () => import('./cloud-ide-layout.component').then(c => c.CloudIdeLayoutComponent),
4
- children: [{
5
- path: "",
6
- pathMatch: "full",
7
- redirectTo: "home"
8
- },
9
- {
10
- path: "home",
11
- loadComponent: () => import('./layout/home/home-wrapper/home-wrapper.component').then(c => c.CideLytHomeWrapperComponent),
12
- }]
4
+ // canActivate: [authGuard]
13
5
  };
14
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2xvdWQtaWRlLWxheW91dC5yb3V0ZXMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9jbG91ZC1pZGUtbGF5b3V0L3NyYy9saWIvY2xvdWQtaWRlLWxheW91dC5yb3V0ZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRUEsTUFBTSxDQUFDLE1BQU0sWUFBWSxHQUFVO0lBQy9CLElBQUksRUFBRSxlQUFlO0lBQ3JCLGFBQWEsRUFBRSxHQUFHLEVBQUUsQ0FBQyxNQUFNLENBQUMsOEJBQThCLENBQUMsQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxDQUFDLENBQUMsdUJBQXVCLENBQUM7SUFDaEcsUUFBUSxFQUFFLENBQUM7WUFDUCxJQUFJLEVBQUUsRUFBRTtZQUNSLFNBQVMsRUFBRSxNQUFNO1lBQ2pCLFVBQVUsRUFBRSxNQUFNO1NBQ3JCO1FBQ0Q7WUFDSSxJQUFJLEVBQUUsTUFBTTtZQUNaLGFBQWEsRUFBRSxHQUFHLEVBQUUsQ0FBQyxNQUFNLENBQUMsbURBQW1ELENBQUMsQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxDQUFDLENBQUMsMkJBQTJCLENBQUM7U0FDNUgsQ0FBQztDQUNMLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBSb3V0ZSB9IGZyb20gJ0Bhbmd1bGFyL3JvdXRlcic7XHJcblxyXG5leHBvcnQgY29uc3QgbGF5b3V0Um91dGVzOiBSb3V0ZSA9IHtcclxuICAgIHBhdGg6IFwiY29udHJvbC1wYW5lbFwiLFxyXG4gICAgbG9hZENvbXBvbmVudDogKCkgPT4gaW1wb3J0KCcuL2Nsb3VkLWlkZS1sYXlvdXQuY29tcG9uZW50JykudGhlbihjID0+IGMuQ2xvdWRJZGVMYXlvdXRDb21wb25lbnQpLFxyXG4gICAgY2hpbGRyZW46IFt7XHJcbiAgICAgICAgcGF0aDogXCJcIixcclxuICAgICAgICBwYXRoTWF0Y2g6IFwiZnVsbFwiLFxyXG4gICAgICAgIHJlZGlyZWN0VG86IFwiaG9tZVwiXHJcbiAgICB9LFxyXG4gICAge1xyXG4gICAgICAgIHBhdGg6IFwiaG9tZVwiLFxyXG4gICAgICAgIGxvYWRDb21wb25lbnQ6ICgpID0+IGltcG9ydCgnLi9sYXlvdXQvaG9tZS9ob21lLXdyYXBwZXIvaG9tZS13cmFwcGVyLmNvbXBvbmVudCcpLnRoZW4oYyA9PiBjLkNpZGVMeXRIb21lV3JhcHBlckNvbXBvbmVudCksXHJcbiAgICB9XVxyXG59OyJdfQ==
6
+ export const layoutControlPannelChildRoutes = [{
7
+ path: "",
8
+ pathMatch: "full",
9
+ redirectTo: "home"
10
+ },
11
+ {
12
+ path: "home",
13
+ loadComponent: () => import('./layout/home/home-wrapper/home-wrapper.component').then(c => c.CideLytHomeWrapperComponent),
14
+ data: {
15
+ reuseTab: true, // For CustomRouteReuseStrategy
16
+ sypg_page_code: "cide_lyt_home" // Used by RequestService to fetch tab properties
17
+ }
18
+ }];
19
+ // {
20
+ // path: "admin-home",
21
+ // loadComponent: () => import('../../../cloud-ide-admin/src/lib/admin-module/home/home-wrapper/cide-adm-home-wrapper.component').then(c => c.CideAdmHomeWrapperComponent),
22
+ // data: {
23
+ // reuseTab: true, // For CustomRouteReuseStrategy
24
+ // sypg_page_code: "cide_adm_home" // Example: Ensure this page code is configured in your backend
25
+ // }
26
+ // }];
27
+ // ]
28
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2xvdWQtaWRlLWxheW91dC5yb3V0ZXMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9jbG91ZC1pZGUtbGF5b3V0L3NyYy9saWIvY2xvdWQtaWRlLWxheW91dC5yb3V0ZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRUEsTUFBTSxDQUFDLE1BQU0sWUFBWSxHQUFVO0lBQy9CLElBQUksRUFBRSxlQUFlO0lBQ3JCLGFBQWEsRUFBRSxHQUFHLEVBQUUsQ0FBQyxNQUFNLENBQUMsOEJBQThCLENBQUMsQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxDQUFDLENBQUMsdUJBQXVCLENBQUM7SUFDaEcsMkJBQTJCO0NBQzlCLENBQUM7QUFFRixNQUFNLENBQUMsTUFBTSw4QkFBOEIsR0FBWSxDQUFDO1FBQ3BELElBQUksRUFBRSxFQUFFO1FBQ1IsU0FBUyxFQUFFLE1BQU07UUFDakIsVUFBVSxFQUFFLE1BQU07S0FDckI7SUFDRDtRQUNJLElBQUksRUFBRSxNQUFNO1FBQ1osYUFBYSxFQUFFLEdBQUcsRUFBRSxDQUFDLE1BQU0sQ0FBQyxtREFBbUQsQ0FBQyxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQywyQkFBMkIsQ0FBQztRQUN6SCxJQUFJLEVBQUU7WUFDRixRQUFRLEVBQUUsSUFBSSxFQUFFLCtCQUErQjtZQUMvQyxjQUFjLEVBQUUsZUFBZSxDQUFDLGlEQUFpRDtTQUNwRjtLQUNKLENBQUMsQ0FBQztBQUNILElBQUk7QUFDSiwwQkFBMEI7QUFDMUIsK0tBQStLO0FBQy9LLGNBQWM7QUFDZCwwREFBMEQ7QUFDMUQsMEdBQTBHO0FBQzFHLFFBQVE7QUFDUixNQUFNO0FBQ04sTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IFJvdXRlIH0gZnJvbSAnQGFuZ3VsYXIvcm91dGVyJztcclxuXHJcbmV4cG9ydCBjb25zdCBsYXlvdXRSb3V0ZXM6IFJvdXRlID0ge1xyXG4gICAgcGF0aDogXCJjb250cm9sLXBhbmVsXCIsXHJcbiAgICBsb2FkQ29tcG9uZW50OiAoKSA9PiBpbXBvcnQoJy4vY2xvdWQtaWRlLWxheW91dC5jb21wb25lbnQnKS50aGVuKGMgPT4gYy5DbG91ZElkZUxheW91dENvbXBvbmVudCksXHJcbiAgICAvLyBjYW5BY3RpdmF0ZTogW2F1dGhHdWFyZF1cclxufTtcclxuXHJcbmV4cG9ydCBjb25zdCBsYXlvdXRDb250cm9sUGFubmVsQ2hpbGRSb3V0ZXM6IFJvdXRlW10gPSBbe1xyXG4gICAgcGF0aDogXCJcIixcclxuICAgIHBhdGhNYXRjaDogXCJmdWxsXCIsXHJcbiAgICByZWRpcmVjdFRvOiBcImhvbWVcIlxyXG59LFxyXG57XHJcbiAgICBwYXRoOiBcImhvbWVcIixcclxuICAgIGxvYWRDb21wb25lbnQ6ICgpID0+IGltcG9ydCgnLi9sYXlvdXQvaG9tZS9ob21lLXdyYXBwZXIvaG9tZS13cmFwcGVyLmNvbXBvbmVudCcpLnRoZW4oYyA9PiBjLkNpZGVMeXRIb21lV3JhcHBlckNvbXBvbmVudCksXHJcbiAgICBkYXRhOiB7XHJcbiAgICAgICAgcmV1c2VUYWI6IHRydWUsIC8vIEZvciBDdXN0b21Sb3V0ZVJldXNlU3RyYXRlZ3lcclxuICAgICAgICBzeXBnX3BhZ2VfY29kZTogXCJjaWRlX2x5dF9ob21lXCIgLy8gVXNlZCBieSBSZXF1ZXN0U2VydmljZSB0byBmZXRjaCB0YWIgcHJvcGVydGllc1xyXG4gICAgfVxyXG59XTtcclxuLy8ge1xyXG4vLyAgICAgcGF0aDogXCJhZG1pbi1ob21lXCIsXHJcbi8vICAgICBsb2FkQ29tcG9uZW50OiAoKSA9PiBpbXBvcnQoJy4uLy4uLy4uL2Nsb3VkLWlkZS1hZG1pbi9zcmMvbGliL2FkbWluLW1vZHVsZS9ob21lL2hvbWUtd3JhcHBlci9jaWRlLWFkbS1ob21lLXdyYXBwZXIuY29tcG9uZW50JykudGhlbihjID0+IGMuQ2lkZUFkbUhvbWVXcmFwcGVyQ29tcG9uZW50KSxcclxuLy8gICAgIGRhdGE6IHtcclxuLy8gICAgICAgICByZXVzZVRhYjogdHJ1ZSwgLy8gRm9yIEN1c3RvbVJvdXRlUmV1c2VTdHJhdGVneVxyXG4vLyAgICAgICAgIHN5cGdfcGFnZV9jb2RlOiBcImNpZGVfYWRtX2hvbWVcIiAvLyBFeGFtcGxlOiBFbnN1cmUgdGhpcyBwYWdlIGNvZGUgaXMgY29uZmlndXJlZCBpbiB5b3VyIGJhY2tlbmRcclxuLy8gICAgIH1cclxuLy8gfV07XHJcbi8vIF0gICJdfQ==
@@ -1,11 +1,11 @@
1
1
  import { Component } from '@angular/core';
2
2
  import * as i0 from "@angular/core";
3
- export class ConsoleWrapperComponent {
4
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ConsoleWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
5
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: ConsoleWrapperComponent, isStandalone: true, selector: "cide-lyt-console-wrapper", ngImport: i0, template: "<div\r\n class=\"cide-console tw-w-full tw-absolute tw-items-center tw-bg-gray-50 tw-h-0 tw-border-b-gray-200 tw-border-solid tw-border-t tw-select-none tw-z-[100] tw-bottom-0 tw-px-3\">\r\n\r\n</div>\r\n<!-- h-6 -->", styles: [""] }); }
3
+ export class CideLytConsoleWrapperComponent {
4
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CideLytConsoleWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
5
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: CideLytConsoleWrapperComponent, isStandalone: true, selector: "cide-lyt-console-wrapper", ngImport: i0, template: "<div id=\"cide-lyt-console-wrapper\" class=\"cide-lyt-console tw-w-full tw-absolute tw-items-center tw-bg-gray-50 tw-h-0 tw-border-b-gray-200 tw-border-solid tw-border-t tw-select-none tw-z-[100] tw-bottom-0 tw-px-3\">\r\n\r\n</div>\r\n<!-- h-6 -->", styles: [""] }); }
6
6
  }
7
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ConsoleWrapperComponent, decorators: [{
7
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CideLytConsoleWrapperComponent, decorators: [{
8
8
  type: Component,
9
- args: [{ selector: 'cide-lyt-console-wrapper', standalone: true, imports: [], template: "<div\r\n class=\"cide-console tw-w-full tw-absolute tw-items-center tw-bg-gray-50 tw-h-0 tw-border-b-gray-200 tw-border-solid tw-border-t tw-select-none tw-z-[100] tw-bottom-0 tw-px-3\">\r\n\r\n</div>\r\n<!-- h-6 -->" }]
9
+ args: [{ selector: 'cide-lyt-console-wrapper', standalone: true, imports: [], template: "<div id=\"cide-lyt-console-wrapper\" class=\"cide-lyt-console tw-w-full tw-absolute tw-items-center tw-bg-gray-50 tw-h-0 tw-border-b-gray-200 tw-border-solid tw-border-t tw-select-none tw-z-[100] tw-bottom-0 tw-px-3\">\r\n\r\n</div>\r\n<!-- h-6 -->" }]
10
10
  }] });
11
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29uc29sZS13cmFwcGVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2Nsb3VkLWlkZS1sYXlvdXQvc3JjL2xpYi9sYXlvdXQvY29uc29sZS9jb25zb2xlLXdyYXBwZXIvY29uc29sZS13cmFwcGVyLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2Nsb3VkLWlkZS1sYXlvdXQvc3JjL2xpYi9sYXlvdXQvY29uc29sZS9jb25zb2xlLXdyYXBwZXIvY29uc29sZS13cmFwcGVyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxlQUFlLENBQUM7O0FBUzFDLE1BQU0sT0FBTyx1QkFBdUI7OEdBQXZCLHVCQUF1QjtrR0FBdkIsdUJBQXVCLG9GQ1RwQyw2TkFJWTs7MkZES0MsdUJBQXVCO2tCQVBuQyxTQUFTOytCQUNFLDBCQUEwQixjQUN4QixJQUFJLFdBQ1AsRUFBRSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdjaWRlLWx5dC1jb25zb2xlLXdyYXBwZXInLFxyXG4gIHN0YW5kYWxvbmU6IHRydWUsXHJcbiAgaW1wb3J0czogW10sXHJcbiAgdGVtcGxhdGVVcmw6ICcuL2NvbnNvbGUtd3JhcHBlci5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmw6ICcuL2NvbnNvbGUtd3JhcHBlci5jb21wb25lbnQuY3NzJ1xyXG59KVxyXG5leHBvcnQgY2xhc3MgQ29uc29sZVdyYXBwZXJDb21wb25lbnQge1xyXG5cclxufVxyXG4iLCI8ZGl2XHJcbiAgICBjbGFzcz1cImNpZGUtY29uc29sZSB0dy13LWZ1bGwgdHctYWJzb2x1dGUgdHctaXRlbXMtY2VudGVyIHR3LWJnLWdyYXktNTAgdHctaC0wIHR3LWJvcmRlci1iLWdyYXktMjAwIHR3LWJvcmRlci1zb2xpZCB0dy1ib3JkZXItdCB0dy1zZWxlY3Qtbm9uZSB0dy16LVsxMDBdIHR3LWJvdHRvbS0wIHR3LXB4LTNcIj5cclxuXHJcbjwvZGl2PlxyXG48IS0tIGgtNiAtLT4iXX0=
11
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29uc29sZS13cmFwcGVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2Nsb3VkLWlkZS1sYXlvdXQvc3JjL2xpYi9sYXlvdXQvY29uc29sZS9jb25zb2xlLXdyYXBwZXIvY29uc29sZS13cmFwcGVyLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2Nsb3VkLWlkZS1sYXlvdXQvc3JjL2xpYi9sYXlvdXQvY29uc29sZS9jb25zb2xlLXdyYXBwZXIvY29uc29sZS13cmFwcGVyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxlQUFlLENBQUM7O0FBUzFDLE1BQU0sT0FBTyw4QkFBOEI7OEdBQTlCLDhCQUE4QjtrR0FBOUIsOEJBQThCLG9GQ1QzQywwUEFHWTs7MkZETUMsOEJBQThCO2tCQVAxQyxTQUFTOytCQUNFLDBCQUEwQixjQUN4QixJQUFJLFdBQ1AsRUFBRSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdjaWRlLWx5dC1jb25zb2xlLXdyYXBwZXInLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbXSxcbiAgdGVtcGxhdGVVcmw6ICcuL2NvbnNvbGUtd3JhcHBlci5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsOiAnLi9jb25zb2xlLXdyYXBwZXIuY29tcG9uZW50LmNzcydcbn0pXG5leHBvcnQgY2xhc3MgQ2lkZUx5dENvbnNvbGVXcmFwcGVyQ29tcG9uZW50IHtcblxufVxuIiwiPGRpdiBpZD1cImNpZGUtbHl0LWNvbnNvbGUtd3JhcHBlclwiIGNsYXNzPVwiY2lkZS1seXQtY29uc29sZSB0dy13LWZ1bGwgdHctYWJzb2x1dGUgdHctaXRlbXMtY2VudGVyIHR3LWJnLWdyYXktNTAgdHctaC0wIHR3LWJvcmRlci1iLWdyYXktMjAwIHR3LWJvcmRlci1zb2xpZCB0dy1ib3JkZXItdCB0dy1zZWxlY3Qtbm9uZSB0dy16LVsxMDBdIHR3LWJvdHRvbS0wIHR3LXB4LTNcIj5cclxuXHJcbjwvZGl2PlxyXG48IS0tIGgtNiAtLT4iXX0=
@@ -0,0 +1,28 @@
1
+ import { Injectable } from '@angular/core';
2
+ import * as i0 from "@angular/core";
3
+ export class CideLytConsoleService {
4
+ constructor() {
5
+ this.headerVisible = false;
6
+ }
7
+ // Hide Console
8
+ hideConsole() {
9
+ this.headerVisible = false;
10
+ document.querySelector(`#cide-lyt-console-wrapper`)?.classList.add('cide-lyt-console-wrapper-hide');
11
+ document.querySelector(`body`)?.classList.remove('cide-lyt-console-exist');
12
+ }
13
+ // Show Console
14
+ showConsole() {
15
+ this.headerVisible = true;
16
+ document.querySelector(`#cide-lyt-console-wrapper`)?.classList.remove('cide-lyt-console-wrapper-hide');
17
+ document.querySelector(`body`)?.classList.remove('cide-lyt-console-exist');
18
+ }
19
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CideLytConsoleService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
20
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CideLytConsoleService, providedIn: 'root' }); }
21
+ }
22
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CideLytConsoleService, decorators: [{
23
+ type: Injectable,
24
+ args: [{
25
+ providedIn: 'root'
26
+ }]
27
+ }], ctorParameters: () => [] });
28
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29uc29sZS5zZXJ2aWNlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY2xvdWQtaWRlLWxheW91dC9zcmMvbGliL2xheW91dC9jb25zb2xlL2NvbnNvbGUuc2VydmljZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sZUFBZSxDQUFDOztBQUszQyxNQUFNLE9BQU8scUJBQXFCO0lBR2hDO1FBRk8sa0JBQWEsR0FBWSxLQUFLLENBQUM7SUFFdEIsQ0FBQztJQUVqQixlQUFlO0lBQ2YsV0FBVztRQUNULElBQUksQ0FBQyxhQUFhLEdBQUcsS0FBSyxDQUFDO1FBQzNCLFFBQVEsQ0FBQyxhQUFhLENBQUMsMkJBQTJCLENBQUMsRUFBRSxTQUFTLENBQUMsR0FBRyxDQUFDLCtCQUErQixDQUFDLENBQUM7UUFDcEcsUUFBUSxDQUFDLGFBQWEsQ0FBQyxNQUFNLENBQUMsRUFBRSxTQUFTLENBQUMsTUFBTSxDQUFDLHdCQUF3QixDQUFDLENBQUM7SUFDN0UsQ0FBQztJQUVELGVBQWU7SUFDZixXQUFXO1FBQ1QsSUFBSSxDQUFDLGFBQWEsR0FBRyxJQUFJLENBQUM7UUFDMUIsUUFBUSxDQUFDLGFBQWEsQ0FBQywyQkFBMkIsQ0FBQyxFQUFFLFNBQVMsQ0FBQyxNQUFNLENBQUMsK0JBQStCLENBQUMsQ0FBQztRQUN2RyxRQUFRLENBQUMsYUFBYSxDQUFDLE1BQU0sQ0FBQyxFQUFFLFNBQVMsQ0FBQyxNQUFNLENBQUMsd0JBQXdCLENBQUMsQ0FBQztJQUM3RSxDQUFDOzhHQWpCVSxxQkFBcUI7a0hBQXJCLHFCQUFxQixjQUZwQixNQUFNOzsyRkFFUCxxQkFBcUI7a0JBSGpDLFVBQVU7bUJBQUM7b0JBQ1YsVUFBVSxFQUFFLE1BQU07aUJBQ25CIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgSW5qZWN0YWJsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5cclxuQEluamVjdGFibGUoe1xyXG4gIHByb3ZpZGVkSW46ICdyb290J1xyXG59KVxyXG5leHBvcnQgY2xhc3MgQ2lkZUx5dENvbnNvbGVTZXJ2aWNlIHtcclxuICBwdWJsaWMgaGVhZGVyVmlzaWJsZTogYm9vbGVhbiA9IGZhbHNlO1xyXG5cclxuICBjb25zdHJ1Y3RvcigpIHsgfVxyXG5cclxuICAvLyBIaWRlIENvbnNvbGVcclxuICBoaWRlQ29uc29sZSgpIHtcclxuICAgIHRoaXMuaGVhZGVyVmlzaWJsZSA9IGZhbHNlO1xyXG4gICAgZG9jdW1lbnQucXVlcnlTZWxlY3RvcihgI2NpZGUtbHl0LWNvbnNvbGUtd3JhcHBlcmApPy5jbGFzc0xpc3QuYWRkKCdjaWRlLWx5dC1jb25zb2xlLXdyYXBwZXItaGlkZScpO1xyXG4gICAgZG9jdW1lbnQucXVlcnlTZWxlY3RvcihgYm9keWApPy5jbGFzc0xpc3QucmVtb3ZlKCdjaWRlLWx5dC1jb25zb2xlLWV4aXN0Jyk7XHJcbiAgfVxyXG5cclxuICAvLyBTaG93IENvbnNvbGVcclxuICBzaG93Q29uc29sZSgpIHtcclxuICAgIHRoaXMuaGVhZGVyVmlzaWJsZSA9IHRydWU7XHJcbiAgICBkb2N1bWVudC5xdWVyeVNlbGVjdG9yKGAjY2lkZS1seXQtY29uc29sZS13cmFwcGVyYCk/LmNsYXNzTGlzdC5yZW1vdmUoJ2NpZGUtbHl0LWNvbnNvbGUtd3JhcHBlci1oaWRlJyk7XHJcbiAgICBkb2N1bWVudC5xdWVyeVNlbGVjdG9yKGBib2R5YCk/LmNsYXNzTGlzdC5yZW1vdmUoJ2NpZGUtbHl0LWNvbnNvbGUtZXhpc3QnKTtcclxuICB9XHJcbn1cclxuIl19
@@ -1,12 +1,20 @@
1
1
  import { Component } from '@angular/core';
2
- import { CideIconComponent } from 'cloud-ide-element';
2
+ import { CideEleResizerDirective, CideIconComponent } from 'cloud-ide-element';
3
3
  import * as i0 from "@angular/core";
4
- export class FooterWrapperComponent {
5
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FooterWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
6
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FooterWrapperComponent, isStandalone: true, selector: "cide-lyt-footer-wrapper", ngImport: i0, template: "<div\r\n class=\"cide-footer tw-w-full tw-justify-between tw-flex tw-absolute tw-bg-gray-50 tw-h-5 tw-border-b-gray-200 tw-border-solid tw-border-t tw-select-none tw-z-[100] tw-bottom-0 tw-px-1\">\r\n <div></div>\r\n <div>\r\n <cide-ele-icon size=\"3xs\" class=\"tw-mt-0.5\" type=\"none\">contact_support</cide-ele-icon>\r\n </div>\r\n</div>", styles: [""], dependencies: [{ kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }] }); }
4
+ export class CideLytFooterWrapperComponent {
5
+ constructor() {
6
+ this.footerSetupData = {
7
+ cide_lyt_footer_height: 0
8
+ };
9
+ // collecte the width of the sidebar by using the style property
10
+ const cide_lyt_sidedrawer_wrapper_width = parseInt(window.getComputedStyle(document.documentElement).getPropertyValue('--cide-lyt-sidedrawer-wrapper-width'));
11
+ this.footerSetupData.cide_lyt_footer_height = (cide_lyt_sidedrawer_wrapper_width);
12
+ }
13
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CideLytFooterWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
14
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: CideLytFooterWrapperComponent, isStandalone: true, selector: "cide-lyt-footer-wrapper", ngImport: i0, template: "<div\r\n class=\"cide-footer tw-w-full tw-justify-between tw-flex tw-h-5 tw-select-none tw-px-1\">\r\n <!-- Resizer -->\r\n <div parentElementSelector=\"#cide-lyt-layout-wrapper\" prevElementSelector=\"#cide-lyt-sidebar-page-wrapper\"\r\n nextElementSelector=\"#cide-lyt-footer-console-wrapper\" [minNextSize]=\"footerSetupData.cide_lyt_footer_height\" cideEleResizer direction=\"vertical\">\r\n <div class=\"cide-lyt-devider-track tw-w-full tw-h-full\"></div>\r\n </div>\r\n <div></div>\r\n <div>\r\n <cide-ele-icon size=\"3xs\" class=\"tw-mt-0.5\" type=\"none\">contact_support</cide-ele-icon>\r\n </div>\r\n</div>", styles: [""], dependencies: [{ kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "directive", type: CideEleResizerDirective, selector: "[cideEleResizer]", inputs: ["direction", "to", "prevElementSelector", "nextElementSelector", "parentElementSelector", "minPrevSize", "minNextSize", "usePercentage"], outputs: ["resizeStart", "resizing", "resizeEnd"] }] }); }
7
15
  }
8
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FooterWrapperComponent, decorators: [{
16
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CideLytFooterWrapperComponent, decorators: [{
9
17
  type: Component,
10
- args: [{ selector: 'cide-lyt-footer-wrapper', standalone: true, imports: [CideIconComponent], template: "<div\r\n class=\"cide-footer tw-w-full tw-justify-between tw-flex tw-absolute tw-bg-gray-50 tw-h-5 tw-border-b-gray-200 tw-border-solid tw-border-t tw-select-none tw-z-[100] tw-bottom-0 tw-px-1\">\r\n <div></div>\r\n <div>\r\n <cide-ele-icon size=\"3xs\" class=\"tw-mt-0.5\" type=\"none\">contact_support</cide-ele-icon>\r\n </div>\r\n</div>" }]
11
- }] });
12
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZm9vdGVyLXdyYXBwZXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY2xvdWQtaWRlLWxheW91dC9zcmMvbGliL2xheW91dC9mb290ZXIvZm9vdGVyLXdyYXBwZXIvZm9vdGVyLXdyYXBwZXIuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY2xvdWQtaWRlLWxheW91dC9zcmMvbGliL2xheW91dC9mb290ZXIvZm9vdGVyLXdyYXBwZXIvZm9vdGVyLXdyYXBwZXIuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUMxQyxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQzs7QUFTdEQsTUFBTSxPQUFPLHNCQUFzQjs4R0FBdEIsc0JBQXNCO2tHQUF0QixzQkFBc0IsbUZDVm5DLDBXQU1NLDBEREFNLGlCQUFpQjs7MkZBSWhCLHNCQUFzQjtrQkFQbEMsU0FBUzsrQkFDRSx5QkFBeUIsY0FDdkIsSUFBSSxXQUNQLENBQUMsaUJBQWlCLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgQ2lkZUljb25Db21wb25lbnQgfSBmcm9tICdjbG91ZC1pZGUtZWxlbWVudCc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ2NpZGUtbHl0LWZvb3Rlci13cmFwcGVyJyxcclxuICBzdGFuZGFsb25lOiB0cnVlLFxyXG4gIGltcG9ydHM6IFtDaWRlSWNvbkNvbXBvbmVudF0sXHJcbiAgdGVtcGxhdGVVcmw6ICcuL2Zvb3Rlci13cmFwcGVyLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybDogJy4vZm9vdGVyLXdyYXBwZXIuY29tcG9uZW50LmNzcydcclxufSlcclxuZXhwb3J0IGNsYXNzIEZvb3RlcldyYXBwZXJDb21wb25lbnQge1xyXG5cclxufVxyXG4iLCI8ZGl2XHJcbiAgICBjbGFzcz1cImNpZGUtZm9vdGVyIHR3LXctZnVsbCB0dy1qdXN0aWZ5LWJldHdlZW4gdHctZmxleCB0dy1hYnNvbHV0ZSB0dy1iZy1ncmF5LTUwIHR3LWgtNSB0dy1ib3JkZXItYi1ncmF5LTIwMCB0dy1ib3JkZXItc29saWQgdHctYm9yZGVyLXQgdHctc2VsZWN0LW5vbmUgdHctei1bMTAwXSB0dy1ib3R0b20tMCB0dy1weC0xXCI+XHJcbiAgICA8ZGl2PjwvZGl2PlxyXG4gICAgPGRpdj5cclxuICAgICAgICA8Y2lkZS1lbGUtaWNvbiBzaXplPVwiM3hzXCIgY2xhc3M9XCJ0dy1tdC0wLjVcIiB0eXBlPVwibm9uZVwiPmNvbnRhY3Rfc3VwcG9ydDwvY2lkZS1lbGUtaWNvbj5cclxuICAgIDwvZGl2PlxyXG48L2Rpdj4iXX0=
18
+ args: [{ selector: 'cide-lyt-footer-wrapper', standalone: true, imports: [CideIconComponent, CideEleResizerDirective], template: "<div\r\n class=\"cide-footer tw-w-full tw-justify-between tw-flex tw-h-5 tw-select-none tw-px-1\">\r\n <!-- Resizer -->\r\n <div parentElementSelector=\"#cide-lyt-layout-wrapper\" prevElementSelector=\"#cide-lyt-sidebar-page-wrapper\"\r\n nextElementSelector=\"#cide-lyt-footer-console-wrapper\" [minNextSize]=\"footerSetupData.cide_lyt_footer_height\" cideEleResizer direction=\"vertical\">\r\n <div class=\"cide-lyt-devider-track tw-w-full tw-h-full\"></div>\r\n </div>\r\n <div></div>\r\n <div>\r\n <cide-ele-icon size=\"3xs\" class=\"tw-mt-0.5\" type=\"none\">contact_support</cide-ele-icon>\r\n </div>\r\n</div>" }]
19
+ }], ctorParameters: () => [] });
20
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZm9vdGVyLXdyYXBwZXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY2xvdWQtaWRlLWxheW91dC9zcmMvbGliL2xheW91dC9mb290ZXIvZm9vdGVyLXdyYXBwZXIvZm9vdGVyLXdyYXBwZXIuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY2xvdWQtaWRlLWxheW91dC9zcmMvbGliL2xheW91dC9mb290ZXIvZm9vdGVyLXdyYXBwZXIvZm9vdGVyLXdyYXBwZXIuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUMxQyxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQzs7QUFTL0UsTUFBTSxPQUFPLDZCQUE2QjtJQUt4QztRQUpPLG9CQUFlLEdBQUc7WUFDdkIsc0JBQXNCLEVBQUUsQ0FBQztTQUMxQixDQUFBO1FBR0MsZ0VBQWdFO1FBQ2hFLE1BQU0saUNBQWlDLEdBQUcsUUFBUSxDQUFDLE1BQU0sQ0FBQyxnQkFBZ0IsQ0FBQyxRQUFRLENBQUMsZUFBZSxDQUFDLENBQUMsZ0JBQWdCLENBQUMscUNBQXFDLENBQUMsQ0FBQyxDQUFDO1FBRTlKLElBQUksQ0FBQyxlQUFlLENBQUMsc0JBQXNCLEdBQUcsQ0FBQyxpQ0FBaUMsQ0FBQyxDQUFDO0lBQ3BGLENBQUM7OEdBVlUsNkJBQTZCO2tHQUE3Qiw2QkFBNkIsbUZDVjFDLG9wQkFXTSwwRERMTSxpQkFBaUIsK0ZBQUUsdUJBQXVCOzsyRkFJekMsNkJBQTZCO2tCQVB6QyxTQUFTOytCQUNFLHlCQUF5QixjQUN2QixJQUFJLFdBQ1AsQ0FBQyxpQkFBaUIsRUFBRSx1QkFBdUIsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQ2lkZUVsZVJlc2l6ZXJEaXJlY3RpdmUsIENpZGVJY29uQ29tcG9uZW50IH0gZnJvbSAnY2xvdWQtaWRlLWVsZW1lbnQnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdjaWRlLWx5dC1mb290ZXItd3JhcHBlcicsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtDaWRlSWNvbkNvbXBvbmVudCwgQ2lkZUVsZVJlc2l6ZXJEaXJlY3RpdmVdLFxuICB0ZW1wbGF0ZVVybDogJy4vZm9vdGVyLXdyYXBwZXIuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybDogJy4vZm9vdGVyLXdyYXBwZXIuY29tcG9uZW50LmNzcydcbn0pXG5leHBvcnQgY2xhc3MgQ2lkZUx5dEZvb3RlcldyYXBwZXJDb21wb25lbnQge1xuICBwdWJsaWMgZm9vdGVyU2V0dXBEYXRhID0ge1xuICAgIGNpZGVfbHl0X2Zvb3Rlcl9oZWlnaHQ6IDBcbiAgfVxuXG4gIGNvbnN0cnVjdG9yKCkge1xuICAgIC8vIGNvbGxlY3RlIHRoZSB3aWR0aCBvZiB0aGUgc2lkZWJhciBieSB1c2luZyB0aGUgc3R5bGUgcHJvcGVydHlcbiAgICBjb25zdCBjaWRlX2x5dF9zaWRlZHJhd2VyX3dyYXBwZXJfd2lkdGggPSBwYXJzZUludCh3aW5kb3cuZ2V0Q29tcHV0ZWRTdHlsZShkb2N1bWVudC5kb2N1bWVudEVsZW1lbnQpLmdldFByb3BlcnR5VmFsdWUoJy0tY2lkZS1seXQtc2lkZWRyYXdlci13cmFwcGVyLXdpZHRoJykpO1xuXG4gICAgdGhpcy5mb290ZXJTZXR1cERhdGEuY2lkZV9seXRfZm9vdGVyX2hlaWdodCA9IChjaWRlX2x5dF9zaWRlZHJhd2VyX3dyYXBwZXJfd2lkdGgpO1xuICB9XG59XG4iLCI8ZGl2XHJcbiAgICBjbGFzcz1cImNpZGUtZm9vdGVyIHR3LXctZnVsbCB0dy1qdXN0aWZ5LWJldHdlZW4gdHctZmxleCB0dy1oLTUgdHctc2VsZWN0LW5vbmUgdHctcHgtMVwiPlxyXG4gICAgPCEtLSBSZXNpemVyIC0tPlxyXG4gICAgPGRpdiBwYXJlbnRFbGVtZW50U2VsZWN0b3I9XCIjY2lkZS1seXQtbGF5b3V0LXdyYXBwZXJcIiBwcmV2RWxlbWVudFNlbGVjdG9yPVwiI2NpZGUtbHl0LXNpZGViYXItcGFnZS13cmFwcGVyXCJcclxuICAgICAgICBuZXh0RWxlbWVudFNlbGVjdG9yPVwiI2NpZGUtbHl0LWZvb3Rlci1jb25zb2xlLXdyYXBwZXJcIiBbbWluTmV4dFNpemVdPVwiZm9vdGVyU2V0dXBEYXRhLmNpZGVfbHl0X2Zvb3Rlcl9oZWlnaHRcIiBjaWRlRWxlUmVzaXplciBkaXJlY3Rpb249XCJ2ZXJ0aWNhbFwiPlxyXG4gICAgICAgIDxkaXYgY2xhc3M9XCJjaWRlLWx5dC1kZXZpZGVyLXRyYWNrIHR3LXctZnVsbCB0dy1oLWZ1bGxcIj48L2Rpdj5cclxuICAgIDwvZGl2PlxyXG4gICAgPGRpdj48L2Rpdj5cclxuICAgIDxkaXY+XHJcbiAgICAgICAgPGNpZGUtZWxlLWljb24gc2l6ZT1cIjN4c1wiIGNsYXNzPVwidHctbXQtMC41XCIgdHlwZT1cIm5vbmVcIj5jb250YWN0X3N1cHBvcnQ8L2NpZGUtZWxlLWljb24+XHJcbiAgICA8L2Rpdj5cclxuPC9kaXY+Il19