feat(training): resizable areas

apps/showcase/package.json

@@ -54,6 +54,7 @@
     "@ngx-translate/core": "~15.0.0",
     "@nx/jest": "~19.5.0",
     "@o3r-training/showcase-sdk": "workspace:^",
+    "@o3r-training/training-sdk": "workspace:^",
     "@o3r-training/training-tools": "workspace:^",
     "@o3r/application": "workspace:^",
     "@o3r/components": "workspace:^",
@@ -73,6 +74,7 @@
     "@xterm/xterm": "^5.0.0",
     "ag-grid-angular": "~32.3.0",
     "ag-grid-community": "~32.3.0",
+    "angular-split": "^18.0.0",
     "bootstrap": "5.3.3",
     "clipboard": "^2.0.11",
     "intl-messageformat": "~10.7.0",

apps/showcase/src/app/component-replacement/component-replacement.component.ts

@@ -5,7 +5,7 @@ import { IN_PAGE_NAV_PRES_DIRECTIVES, InPageNavPresComponent } from '../../compo
 import { AsyncPipe } from '@angular/common';
 import { ComponentReplacementPresComponent } from '../../components/showcase/component-replacement/component-replacement-pres.component';
 import { RouterModule } from '@angular/router';
-import { MarkdownModule, provideMarkdown } from 'ngx-markdown';
+import { MarkdownModule } from 'ngx-markdown';
 
 @O3rComponent({ componentType: 'Page' })
 @Component({
@@ -22,8 +22,7 @@ import { MarkdownModule, provideMarkdown } from 'ngx-markdown';
     IN_PAGE_NAV_PRES_DIRECTIVES,
     ComponentReplacementPresComponent,
     MarkdownModule
-  ],
-  providers: [provideMarkdown()]
+  ]
 })
 export class ComponentReplacementComponent implements AfterViewInit {
   private readonly inPageNavPresService = inject(InPageNavPresService);

apps/showcase/src/app/component-replacement/component-replacement.spec.ts

@@ -3,6 +3,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ComponentReplacementComponent } from './component-replacement.component';
 import { RouterModule } from '@angular/router';
 import { AsyncPipe } from '@angular/common';
+import { provideMarkdown } from 'ngx-markdown';
 import { ComponentReplacementPresComponent } from '../../components/showcase/component-replacement/component-replacement-pres.component';
 
 describe('ComponentReplacementComponent', () => {
@@ -13,7 +14,8 @@ describe('ComponentReplacementComponent', () => {
     await TestBed.configureTestingModule({
       imports: [ComponentReplacementComponent,
         RouterModule.forRoot([]),
-        AsyncPipe]
+        AsyncPipe],
+      providers: [provideMarkdown()]
     }).overrideComponent(ComponentReplacementComponent, {
       remove: { imports: [ComponentReplacementPresComponent] }
     }).compileComponents();

apps/showcase/src/app/configuration/configuration.component.ts

@@ -3,7 +3,7 @@ import { AfterViewInit, ChangeDetectionStrategy, Component, computed, inject, Qu
 import { RouterModule } from '@angular/router';
 import { ConfigurationBaseServiceModule } from '@o3r/configuration';
 import { O3rComponent } from '@o3r/core';
-import { MarkdownModule, provideMarkdown } from 'ngx-markdown';
+import { MarkdownModule } from 'ngx-markdown';
 import { ConfigurationPresComponent, IN_PAGE_NAV_PRES_DIRECTIVES, InPageNavLink, InPageNavLinkDirective, InPageNavPresService } from '../../components/index';
 import { ConfigurationPresConfig } from '../../components/showcase/configuration/configuration-pres.config';
 
@@ -29,7 +29,6 @@ const CONFIG_OVERRIDE: ConfigurationPresConfig = {
     AsyncPipe,
     MarkdownModule
   ],
-  providers: [provideMarkdown()],
   templateUrl: './configuration.template.html',
   styleUrls: ['./configuration.style.scss'],
   encapsulation: ViewEncapsulation.None,

apps/showcase/src/app/configuration/configuration.spec.ts

@@ -3,6 +3,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { RouterModule } from '@angular/router';
 import { StoreModule } from '@ngrx/store';
 import { O3rElement } from '@o3r/testing/core';
+import { provideMarkdown } from 'ngx-markdown';
 import { ConfigurationComponent } from './configuration.component';
 import { ConfigurationFixtureComponent } from './configuration.fixture';
 let componentFixture: ConfigurationFixtureComponent;
@@ -18,7 +19,8 @@ describe('ConfigurationComponent', () => {
         StoreModule.forRoot(),
         RouterModule.forRoot([]),
         AsyncPipe
-      ]
+      ],
+      providers: [provideMarkdown()]
     });
     fixture = TestBed.createComponent(ConfigurationComponent);
     component = fixture.componentInstance;

apps/showcase/src/app/design-token/design-token.component.ts

@@ -2,7 +2,7 @@ import { AsyncPipe } from '@angular/common';
 import { AfterViewInit, ChangeDetectionStrategy, Component, inject, QueryList, ViewChildren, ViewEncapsulation } from '@angular/core';
 import { RouterLink } from '@angular/router';
 import { O3rComponent } from '@o3r/core';
-import { MarkdownModule, provideMarkdown } from 'ngx-markdown';
+import { MarkdownModule } from 'ngx-markdown';
 import { DesignTokenPresComponent, IN_PAGE_NAV_PRES_DIRECTIVES, InPageNavLink, InPageNavLinkDirective, InPageNavPresService } from '../../components';
 
 @O3rComponent({ componentType: 'Page' })
@@ -16,7 +16,6 @@ import { DesignTokenPresComponent, IN_PAGE_NAV_PRES_DIRECTIVES, InPageNavLink, I
     IN_PAGE_NAV_PRES_DIRECTIVES,
     MarkdownModule
   ],
-  providers: [provideMarkdown()],
   templateUrl: './design-token.template.html',
   styleUrl: './design-token.style.scss',
   encapsulation: ViewEncapsulation.None,

apps/showcase/src/app/design-token/design-token.spec.ts

@@ -1,5 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { RouterModule } from '@angular/router';
+import { provideMarkdown } from 'ngx-markdown';
 
 import { DesignTokenComponent } from './design-token.component';
 
@@ -12,7 +13,8 @@ describe('DesignTokenComponent', () => {
       imports: [
         DesignTokenComponent,
         RouterModule.forRoot([])
-      ]
+      ],
+      providers: [provideMarkdown()]
     })
       .compileComponents();
 

apps/showcase/src/app/dynamic-content/dynamic-content.component.ts

@@ -3,7 +3,7 @@ import { AfterViewInit, ChangeDetectionStrategy, Component, inject, QueryList, V
 import { RouterModule } from '@angular/router';
 import { O3rComponent } from '@o3r/core';
 import { DynamicContentModule } from '@o3r/dynamic-content';
-import { MarkdownModule, provideMarkdown } from 'ngx-markdown';
+import { MarkdownModule } from 'ngx-markdown';
 import { DynamicContentPresComponent, IN_PAGE_NAV_PRES_DIRECTIVES, InPageNavLink, InPageNavLinkDirective, InPageNavPresService } from '../../components/index';
 
 @O3rComponent({ componentType: 'Page' })
@@ -18,7 +18,6 @@ import { DynamicContentPresComponent, IN_PAGE_NAV_PRES_DIRECTIVES, InPageNavLink
     AsyncPipe,
     MarkdownModule
   ],
-  providers: [provideMarkdown()],
   templateUrl: './dynamic-content.template.html',
   styleUrls: ['./dynamic-content.style.scss'],
   encapsulation: ViewEncapsulation.None,

apps/showcase/src/app/dynamic-content/dynamic-content.spec.ts

@@ -2,6 +2,7 @@ import { AsyncPipe } from '@angular/common';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { RouterModule } from '@angular/router';
 import { O3rElement } from '@o3r/testing/core';
+import { provideMarkdown } from 'ngx-markdown';
 import { DynamicContentComponent } from './dynamic-content.component';
 import { DynamicContentFixtureComponent } from './dynamic-content.fixture';
 let componentFixture: DynamicContentFixtureComponent;
@@ -16,7 +17,8 @@ describe('DynamicContentComponent', () => {
         DynamicContentComponent,
         RouterModule.forRoot([]),
         AsyncPipe
-      ]
+      ],
+      providers: [provideMarkdown()]
     });
     fixture = TestBed.createComponent(DynamicContentComponent);
     component = fixture.componentInstance;

apps/showcase/src/app/home/home.component.ts

@@ -1,14 +1,13 @@
 import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
 import { O3rComponent } from '@o3r/core';
 import { DynamicContentModule } from '@o3r/dynamic-content';
-import { MarkdownModule, provideMarkdown } from 'ngx-markdown';
+import { MarkdownModule } from 'ngx-markdown';
 
 @O3rComponent({ componentType: 'Page' })
 @Component({
   selector: 'o3r-home',
   standalone: true,
   imports: [DynamicContentModule, MarkdownModule],
-  providers: [provideMarkdown()],
   templateUrl: './home.template.html',
   styleUrls: ['./home.style.scss'],
   encapsulation: ViewEncapsulation.None,

apps/showcase/src/app/home/home.spec.ts

@@ -1,4 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { provideMarkdown } from 'ngx-markdown';
 import { HomeComponent } from './home.component';
 
 describe('HomeComponent', () => {
@@ -7,7 +8,8 @@ describe('HomeComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [HomeComponent]
+      imports: [HomeComponent],
+      providers: [provideMarkdown()]
     });
     fixture = TestBed.createComponent(HomeComponent);
     component = fixture.componentInstance;

apps/showcase/src/app/localization/localization.component.ts

@@ -2,7 +2,7 @@ import { AsyncPipe } from '@angular/common';
 import { AfterViewInit, ChangeDetectionStrategy, Component, inject, QueryList, ViewChildren, ViewEncapsulation } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { O3rComponent } from '@o3r/core';
-import { MarkdownModule, provideMarkdown } from 'ngx-markdown';
+import { MarkdownModule } from 'ngx-markdown';
 import { IN_PAGE_NAV_PRES_DIRECTIVES, InPageNavLink, InPageNavLinkDirective, InPageNavPresService, LocalizationPresComponent } from '../../components/index';
 
 @O3rComponent({ componentType: 'Page' })
@@ -16,7 +16,6 @@ import { IN_PAGE_NAV_PRES_DIRECTIVES, InPageNavLink, InPageNavLinkDirective, InP
     AsyncPipe,
     MarkdownModule
   ],
-  providers: [provideMarkdown()],
   templateUrl: './localization.template.html',
   styleUrls: ['./localization.style.scss'],
   encapsulation: ViewEncapsulation.None,

apps/showcase/src/app/localization/localization.spec.ts

@@ -5,6 +5,7 @@ import { RouterModule } from '@angular/router';
 import { TranslateCompiler, TranslateFakeCompiler } from '@ngx-translate/core';
 import { LocalizationService } from '@o3r/localization';
 import { mockTranslationModules } from '@o3r/testing/localization';
+import { provideMarkdown } from 'ngx-markdown';
 import { LocalizationComponent } from './localization.component';
 const localizationConfiguration = { language: 'en' };
 const mockTranslations = {
@@ -25,7 +26,8 @@ describe('LocalizationComponent', () => {
         LocalizationComponent,
         ...mockTranslationModules(localizationConfiguration, mockTranslations, mockTranslationsCompilerProvider),
         AsyncPipe
-      ]
+      ],
+      providers: [provideMarkdown()]
     });
     fixture = TestBed.createComponent(LocalizationComponent);
     component = fixture.componentInstance;

apps/showcase/src/app/rules-engine/rules-engine.component.ts

@@ -26,7 +26,7 @@ import {
   Ruleset,
   UnaryOperator
 } from '@o3r/rules-engine';
-import { MarkdownModule, provideMarkdown } from 'ngx-markdown';
+import { MarkdownModule } from 'ngx-markdown';
 import { firstValueFrom } from 'rxjs';
 import { IN_PAGE_NAV_PRES_DIRECTIVES, InPageNavLink, InPageNavLinkDirective, InPageNavPresService, RulesEnginePresComponent } from '../../components/index';
 import { environment } from '../../environments/environment.development';
@@ -58,7 +58,6 @@ import { duringSummer } from '../../operators/index';
     AsyncPipe,
     MarkdownModule
   ],
-  providers: [provideMarkdown()],
   templateUrl: './rules-engine.template.html',
   styleUrls: ['./rules-engine.style.scss'],
   encapsulation: ViewEncapsulation.None,

apps/showcase/src/app/rules-engine/rules-engine.spec.ts

@@ -7,6 +7,7 @@ import { TranslateCompiler, TranslateFakeCompiler } from '@ngx-translate/core';
 import { LocalizationService } from '@o3r/localization';
 import { RulesEngineRunnerModule } from '@o3r/rules-engine';
 import { mockTranslationModules } from '@o3r/testing/localization';
+import { provideMarkdown } from 'ngx-markdown';
 import { RulesEngineComponent } from './rules-engine.component';
 import { RouterModule } from '@angular/router';
 
@@ -33,7 +34,8 @@ describe('RulesEngineComponent', () => {
         RouterModule.forRoot([]),
         ...mockTranslationModules(localizationConfiguration, mockTranslations, mockTranslationsCompilerProvider),
         AsyncPipe
-      ]
+      ],
+      providers: [provideMarkdown()]
     });
     global.fetch = jest.fn(() =>
       Promise.resolve({

apps/showcase/src/app/run-app-locally/run-app-locally.component.ts

@@ -1,13 +1,12 @@
 import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
 import { O3rComponent } from '@o3r/core';
-import { MarkdownModule, provideMarkdown } from 'ngx-markdown';
+import { MarkdownModule } from 'ngx-markdown';
 
 @O3rComponent({ componentType: 'Page' })
 @Component({
   selector: 'o3r-run-app-locally',
   standalone: true,
   imports: [MarkdownModule],
-  providers: [provideMarkdown()],
   templateUrl: './run-app-locally.template.html',
   styleUrls: ['./run-app-locally.style.scss'],
   encapsulation: ViewEncapsulation.None,

apps/showcase/src/app/run-app-locally/run-app-locally.spec.ts

@@ -1,4 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { provideMarkdown } from 'ngx-markdown';
 
 import { RunAppLocallyComponent } from './run-app-locally.component';
 
@@ -8,7 +9,8 @@ describe('RunAppLocallyComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [RunAppLocallyComponent]
+      imports: [RunAppLocallyComponent],
+      providers: [provideMarkdown()]
     });
     fixture = TestBed.createComponent(RunAppLocallyComponent);
     component = fixture.componentInstance;

apps/showcase/src/app/sdk/sdk.component.ts

@@ -2,7 +2,7 @@ import { AsyncPipe } from '@angular/common';
 import { AfterViewInit, ChangeDetectionStrategy, Component, inject, QueryList, ViewChildren, ViewEncapsulation } from '@angular/core';
 import { RouterLink } from '@angular/router';
 import { O3rComponent } from '@o3r/core';
-import { MarkdownModule, provideMarkdown } from 'ngx-markdown';
+import { MarkdownModule } from 'ngx-markdown';
 import {
   IN_PAGE_NAV_PRES_DIRECTIVES,
   InPageNavLink,
@@ -22,7 +22,6 @@ import {
     AsyncPipe,
     MarkdownModule
   ],
-  providers: [provideMarkdown()],
   templateUrl: './sdk.template.html',
   styleUrls: ['./sdk.style.scss'],
   encapsulation: ViewEncapsulation.None,

apps/showcase/src/app/sdk/sdk.spec.ts

@@ -3,6 +3,7 @@ import { PetApiFixture } from '@o3r-training/showcase-sdk/fixtures';
 import { AsyncPipe } from '@angular/common';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { RouterModule } from '@angular/router';
+import { provideMarkdown } from 'ngx-markdown';
 
 import { SdkComponent } from './sdk.component';
 import '@angular/localize/init';
@@ -21,7 +22,8 @@ describe('SdkComponent', () => {
         AsyncPipe
       ],
       providers: [
-        {provide: PetApi, useValue: petApiFixture}
+        {provide: PetApi, useValue: petApiFixture},
+        provideMarkdown()
       ]
     });
     fixture = TestBed.createComponent(SdkComponent);

apps/showcase/src/assets/trainings/sdk/program.json

@@ -23,7 +23,7 @@
       "startingFile": "apps/tutorial-app/src/app/app.component.ts",
       "urls": {
         ".": "./shared/monorepo-template.json",
-        "./libs/sdk/src": "o3r/training-sdk/structure/src.json"
+        "./libs/sdk/src": "%40o3r-training/training-sdk/structure/src.json"
       },
       "mode": "interactive",
       "commands": ["npm install --legacy-peer-deps --ignore-scripts --force", "npm run ng run sdk:build", "npm run ng run tutorial-app:serve"]
@@ -36,7 +36,7 @@
       "name": "sdk-specification",
       "startingFile": "open-api.yaml",
       "solutionUrls": {
-        ".": "o3r/training-sdk/structure/spec.json"
+        ".": "%40o3r-training/training-sdk/structure/spec.json"
       },
       "mode": "readonly",
       "commands": []
@@ -49,8 +49,8 @@
       "name": "generate-sdk",
       "startingFile": "src/api/dummy/dummy-api.ts",
       "solutionUrls": {
-        "src": "o3r/training-sdk/structure/src.json",
-        ".": "o3r/training-sdk/structure/spec.json"
+        "src": "%40o3r-training/training-sdk/structure/src.json",
+        ".": "%40o3r-training/training-sdk/structure/spec.json"
       },
       "mode": "readonly",
       "commands": []
@@ -63,11 +63,11 @@
       "name": "generate-date-sdk",
       "startingFile": "open-api.yaml",
       "urls": {
-        ".": "o3r/training-sdk/structure/spec.json"
+        ".": "%40o3r-training/training-sdk/structure/spec.json"
       },
       "solutionUrls": {
-        ".": "o3r/training-sdk/structure/spec.json",
-        "./src": "o3r/training-sdk/structure/src.json"
+        ".": "%40o3r-training/training-sdk/structure/spec.json",
+        "./src": "%40o3r-training/training-sdk/structure/src.json"
       },
       "mode": "readonly",
       "commands": []

apps/showcase/src/components/training/code-editor-control/code-editor-control.component.html

@@ -27,12 +27,6 @@
         </code-editor-terminal>
       </ng-template>
     </li>
-  <button type="button" class="btn btn-outline-secondary df-btn-icononly align-self-center ms-auto"
-          [class.fa-chevron-down]="!show"
-          [class.fa-chevron-up]="show"
-          (click)="show = !show">
-    <span class="visually-hidden">{{show ? 'Hide' : 'Show'}}</span>
-  </button>
 </ul>
-<div class="h-100 command-panel" [class.d-none]="!show" [ngbNavOutlet]="nav"></div>
+<div class="h-100 command-panel" [ngbNavOutlet]="nav"></div>
 

apps/showcase/src/components/training/code-editor-control/code-editor-control.component.scss

@@ -1,10 +1,4 @@
 code-editor-control {
-  transition: min-height 100ms ease;
-
-  &:has(.command-panel.d-none) {
-    min-height: 3rem;
-  }
-
   .tab-content {
     --df-tabs-content-tab-pane-padding: 0;
     overflow: hidden;