feat(chrome-ext): toggle button for placeholder

apps/chrome-devtools/src/app-devtools/debug-panel/debug-panel-pres.component.ts

@@ -35,4 +35,14 @@ export class DebugPanelPresComponent {
       toggle: (event.target as HTMLInputElement).checked
     });
   }
+
+  /**
+   * Toggle placeholder debug mode
+   * @param event
+   */
+  public togglePlaceholder(event: UIEvent) {
+    this.connection.sendMessage('placeholderDebug', {
+      debug: (event.target as HTMLInputElement).checked
+    });
+  }
 }

apps/chrome-devtools/src/app-devtools/debug-panel/debug-panel-pres.template.html

@@ -20,11 +20,17 @@ <h4 class="d-inline-block">Information</h4>
 <div>
   <h4>Actions</h4>
   <div>
-    <div class="form-check">
+    <div class="form-check form-switch">
       <input class="form-check-input" type="checkbox" (change)="toggleVisualTestingRender($event)" id="toggleVisualTesting">
       <label class="form-check-label" for="toggleVisualTesting">
         Toggle visual testing
       </label>
     </div>
+    <div class="form-check form-switch">
+      <input class="form-check-input" type="checkbox" (change)="togglePlaceholder($event)" id="togglePlaceholder">
+      <label class="form-check-label" for="togglePlaceholder">
+        Toggle placeholder debug mode
+      </label>
+    </div>
   </div>
 </div>

apps/chrome-devtools/src/app-devtools/localization-panel/localization-panel-pres.template.html

@@ -14,7 +14,7 @@
           </div>
         }
       </div>
-      <div class="form-check d-flex flex-column gap-2">
+      <div class="form-check form-switch d-flex flex-column gap-2">
         <div>
           <input class="form-check-input" type="checkbox" formControlName="showKeys" id="displayLocalizationKey" [attr.aria-describedby]="isTranslationDeactivationEnabled() ? null : 'show-keys-hint'">
           <label class="form-check-label text-nowrap" for="displayLocalizationKey">

apps/chrome-devtools/src/components/config-form/config-form.component.html

@@ -1,6 +1,6 @@
 <form [formGroup]="form">
   @for (item of controlsType() | keyvalue; track item.key) {
-    <div class="mb-2" [ngClass]="item.value === 'boolean' ? 'form-check' : 'form-group'">
+    <div class="mb-2" [ngClass]="item.value === 'boolean' ? 'form-check form-switch' : 'form-group'">
       @switch (item.value) {
         @case ('boolean') {
           <input class="form-check-input" [formControlName]="item.key" type="checkbox" [id]="item.key" />

apps/showcase/src/style/dark-theme/dark-theme.scss

@@ -1,4 +1,3 @@
-@import "highlight.js/styles/a11y-dark.css";
 
 :root {
 /* --- BEGIN THEME Auto-generated --- */
@@ -97,15 +96,4 @@
 .card { --bs-card-color: #ffffff; }
 .card { --bs-card-bg: #000000; }
 /* --- END THEME Auto-generated --- */
-
-  .nav.nav-pills .nav-link {
-    --bs-scrollspy-color: #ffffff;
-    --bs-nav-pills-link-active-bg: transparent;
-  }
-  .input-group-text {
-    background-color: var(--bs-tertiary-bg);
-  }
-  .form-select {
-    --bs-form-select-bg-img: url("data:image/svg+xml;charset=utf8,%3Csvg version='1.1' viewBox='0 0 1792 1792' style='fill%3a%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m1408 704q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z'/%3E%3C/svg%3E");
-  }
-}
+}

package.json

@@ -172,6 +172,7 @@
     "@commitlint/cli": "^18.0.0",
     "@commitlint/config-conventional": "^18.0.0",
     "@compodoc/compodoc": "^1.1.19",
+    "@design-factory/design-factory": "~17.1.0",
     "@ng-bootstrap/ng-bootstrap": "^16.0.0",
     "@ngrx/effects": "~17.1.0",
     "@ngrx/entity": "~17.1.0",

packages/@o3r/components/src/devkit/components-devkit.interface.ts

@@ -21,6 +21,14 @@ export interface ToggleInspectorMessage extends OtterMessageContent<'toggleInspe
   isRunning: boolean;
 }
 
+/**
+ * Message to toggle the placeholder debug mode
+ */
+export interface PlaceholderDebugMessage extends OtterMessageContent<'placeholderDebug'> {
+  /** Is the placeholder show in debug mode */
+  debug: boolean;
+}
+
 /**
  * Message to know the component selection availability
  */
@@ -31,7 +39,8 @@ export interface IsComponentSelectionAvailableMessage extends OtterMessageConten
 type ComponentsMessageContents =
   | IsComponentSelectionAvailableMessage
   | SelectedComponentInfoMessage
-  | ToggleInspectorMessage;
+  | ToggleInspectorMessage
+  | PlaceholderDebugMessage;
 
 /** List of possible DataTypes for Components messages */
 export type ComponentsMessageDataTypes = MessageDataTypes<ComponentsMessageContents>;
@@ -52,5 +61,7 @@ export const isComponentsMessage = (message: any): message is AvailableComponent
     message.dataType === 'connect' ||
     message.dataType === 'selectedComponentInfo' ||
     message.dataType === 'isComponentSelectionAvailable' ||
-    message.dataType === 'toggleInspector');
+    message.dataType === 'placeholderDebug' ||
+    message.dataType === 'toggleInspector'
+  );
 };

packages/@o3r/components/src/devkit/components-devtools.message.service.ts

@@ -1,8 +1,10 @@
 import { Inject, Injectable, OnDestroy, Optional } from '@angular/core';
 import { DevtoolsServiceInterface, filterMessageContent, sendOtterMessage } from '@o3r/core';
 import { LoggerService } from '@o3r/logger';
+import { Store } from '@ngrx/store';
 import { firstValueFrom, fromEvent, Subscription } from 'rxjs';
 import { filter } from 'rxjs/operators';
+import { type PlaceholderTemplateState, toggleDebugPlaceholderTemplate } from '../stores';
 import { AvailableComponentsMessageContents, ComponentsDevtoolsServiceOptions, ComponentsMessageDataTypes, isComponentsMessage } from './components-devkit.interface';
 import { OTTER_COMPONENTS_DEVTOOLS_DEFAULT_OPTIONS, OTTER_COMPONENTS_DEVTOOLS_OPTIONS } from './components-devtools.token';
 import { OtterInspectorService, OtterLikeComponentInfo } from './inspector';
@@ -19,8 +21,10 @@ export class ComponentsDevtoolsMessageService implements OnDestroy, DevtoolsServ
   private readonly sendMessage = sendOtterMessage<AvailableComponentsMessageContents>;
 
   constructor(
-      private readonly logger: LoggerService,
-      @Optional() @Inject(OTTER_COMPONENTS_DEVTOOLS_OPTIONS) options?: ComponentsDevtoolsServiceOptions) {
+    private readonly logger: LoggerService,
+    private readonly store: Store<PlaceholderTemplateState>,
+    @Optional() @Inject(OTTER_COMPONENTS_DEVTOOLS_OPTIONS) options?: ComponentsDevtoolsServiceOptions
+  ) {
     this.options = {
       ...OTTER_COMPONENTS_DEVTOOLS_DEFAULT_OPTIONS,
       ...options
@@ -93,6 +97,10 @@ export class ComponentsDevtoolsMessageService implements OnDestroy, DevtoolsServ
         this.inspectorService.toggleInspector(message.isRunning);
         break;
       }
+      case 'placeholderDebug': {
+        this.store.dispatch(toggleDebugPlaceholderTemplate({ debug: message.debug }));
+        break;
+      }
       default: {
         this.logger.warn('Message ignored by the components service', message);
       }

packages/@o3r/components/src/devkit/components-devtools.module.ts

@@ -1,12 +1,14 @@
 import { ModuleWithProviders, NgModule } from '@angular/core';
 import { StoreModule } from '@ngrx/store';
+import { PlaceholderTemplateStoreModule } from '../stores/placeholder-template/placeholder-template.module';
 import type { ComponentsDevtoolsServiceOptions } from './components-devkit.interface';
 import { ComponentsDevtoolsMessageService } from './components-devtools.message.service';
 import { OTTER_COMPONENTS_DEVTOOLS_DEFAULT_OPTIONS, OTTER_COMPONENTS_DEVTOOLS_OPTIONS } from './components-devtools.token';
 
 @NgModule({
   imports: [
-    StoreModule
+    StoreModule,
+    PlaceholderTemplateStoreModule
   ],
   providers: [
     { provide: OTTER_COMPONENTS_DEVTOOLS_OPTIONS, useValue: OTTER_COMPONENTS_DEVTOOLS_DEFAULT_OPTIONS },

packages/@o3r/components/src/stores/placeholder-template/placeholder-template.actions.ts

@@ -4,9 +4,12 @@ import {PlaceholderTemplateModel} from './placeholder-template.state';
 
 const ACTION_DELETE_ENTITY = '[PlaceholderTemplate] delete entity';
 const ACTION_SET_ENTITY = '[PlaceholderTemplate] set entity';
+const ACTION_TOGGLE_DEBUG = '[PlaceholderTemplate] toggle debug';
 
 /** Action to delete a specific entity */
 export const deletePlaceholderTemplateEntity = createAction(ACTION_DELETE_ENTITY, props<{ id: string }>());
 
 /** Action to clear all placeholderTemplate and fill the store with the payload */
 export const setPlaceholderTemplateEntity = createAction(ACTION_SET_ENTITY, props<SetEntityActionPayload<PlaceholderTemplateModel>>());
+
+export const toggleDebugPlaceholderTemplate = createAction(ACTION_TOGGLE_DEBUG, props<{ debug: boolean }>());

packages/@o3r/components/src/stores/placeholder-template/placeholder-template.reducer.ts

@@ -16,7 +16,9 @@ export const placeholderTemplateAdapter = createEntityAdapter<PlaceholderTemplat
 /**
  * PlaceholderTemplate Store initial value
  */
-export const placeholderTemplateInitialState: PlaceholderTemplateState = placeholderTemplateAdapter.getInitialState();
+export const placeholderTemplateInitialState: PlaceholderTemplateState = placeholderTemplateAdapter.getInitialState({
+  debug: false
+});
 
 /**
  * List of basic actions for PlaceholderTemplate Store
@@ -30,6 +32,12 @@ export const placeholderTemplateReducerFeatures: ReducerTypes<PlaceholderTemplat
       return state;
     }
     return placeholderTemplateAdapter.removeOne(id, state);
+  }),
+  on(actions.toggleDebugPlaceholderTemplate, (state, payload) => {
+    return {
+      ...state,
+      debug: payload.debug
+    };
   })
 ];
 

packages/@o3r/components/src/stores/placeholder-template/placeholder-template.selectors.ts

@@ -79,3 +79,6 @@ export const selectPlaceholderRenderedTemplates = (placeholderId: string) => cre
       isPending: placeholderData.isPending
     };
   });
+
+
+export const selectPlaceholderTemplateDebug = createSelector(selectPlaceholderTemplateState, (state) => state.debug);

packages/@o3r/components/src/stores/placeholder-template/placeholder-template.state.ts

@@ -14,6 +14,7 @@ export interface PlaceholderTemplateModel {
  * PlaceholderTemplate store state
  */
 export interface PlaceholderTemplateState extends EntityState<PlaceholderTemplateModel> {
+  debug: boolean;
 }
 
 /**

packages/@o3r/components/src/tools/placeholder/placeholder.component.ts

@@ -5,14 +5,15 @@ import {
   Input,
   OnDestroy,
   OnInit,
+  type Signal,
   ViewEncapsulation
 } from '@angular/core';
 import {Store} from '@ngrx/store';
+import {sendOtterMessage} from '@o3r/core';
 import {BehaviorSubject, ReplaySubject, sample, Subject, Subscription} from 'rxjs';
 import {distinctUntilChanged, filter, map, switchMap} from 'rxjs/operators';
-import {PlaceholderTemplateStore, selectSortedTemplates} from '../../stores/placeholder-template';
+import {PlaceholderTemplateStore, selectPlaceholderTemplateDebug, selectSortedTemplates} from '../../stores/placeholder-template';
 import {PlaceholderLoadingStatus, PlaceholderLoadingStatusMessage} from './placeholder.interface';
-import {sendOtterMessage} from '@o3r/core';
 
 /**
  * Placeholder component that is bind to the PlaceholderTemplateStore to display a template based on its ID
@@ -22,16 +23,20 @@ import {sendOtterMessage} from '@o3r/core';
  */
 @Component({
   selector: 'o3r-placeholder',
-  template: '<ng-content *ngIf="isPending; else displayTemplate"></ng-content>' +
-    '<ng-template #displayTemplate><div [innerHTML]="template"></div></ng-template>',
+  templateUrl: './placeholder.template.html',
+  styleUrl: './placeholder.style.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
+  host: {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    '[class.debug]': 'debug()'
+  }
 })
 export class PlaceholderComponent implements OnInit, OnDestroy {
 
   private readonly subscription = new Subscription();
 
-  private readonly id$ = new BehaviorSubject<string | undefined>(undefined);
+  public readonly id$ = new BehaviorSubject<string | undefined>(undefined);
 
   private readonly afterViewInit$ = new Subject<void>();
 
@@ -43,13 +48,16 @@ export class PlaceholderComponent implements OnInit, OnDestroy {
   /** Generated HTML template */
   public template?: string;
 
+  public debug: Signal<boolean>;
+
   /** template identify */
   @Input()
   public set id(value: string) {
     this.id$.next(value);
   }
 
   constructor(private readonly store: Store<PlaceholderTemplateStore>, private readonly cd: ChangeDetectorRef) {
+    this.debug = this.store.selectSignal(selectPlaceholderTemplateDebug);
   }
 
   /** @inheritdoc */

packages/@o3r/components/src/tools/placeholder/placeholder.style.scss

@@ -0,0 +1,13 @@
+.debug {
+  transition-property: width, padding, font-size;
+  transition-duration: 1s;
+  padding: 15px;
+  text-align: center;
+  border: 2px dashed var(--o3r-placeholder-debug-color, #a65c27);
+  border-radius: 10px;
+  width: 100%;
+  background: var(--o3r-placeholder-background, #fff2ea);
+  border-style: dashed;
+  color: var(--o3r-placeholder-debug-color, #a65c27);
+  font-size: larger;
+}

packages/@o3r/components/src/tools/placeholder/placeholder.template.html

@@ -0,0 +1,9 @@
+@if (debug()) {
+  <span class="placehoder-id">{{ id$ | async }}</span>
+} @else {
+  @if (isPending) {
+    <ng-content></ng-content>
+  } @else {
+    <div [innerHTML]="template"></div>
+  }
+}

yarn.lock

@@ -7781,6 +7781,7 @@ __metadata:
     "@commitlint/cli": "npm:^18.0.0"
     "@commitlint/config-conventional": "npm:^18.0.0"
     "@compodoc/compodoc": "npm:^1.1.19"
+    "@design-factory/design-factory": "npm:~17.1.0"
     "@ng-bootstrap/ng-bootstrap": "npm:^16.0.0"
     "@ngrx/effects": "npm:~17.1.0"
     "@ngrx/entity": "npm:~17.1.0"