@dsivd/prestations-ng 18.8.0-beta.12 → 19.0.0-beta-9

package/COMPONENTS.md

@@ -0,0 +1,350 @@
+# Components and features provided by prestations-ng (Standalone)
+
+As of this version, all prestations-ng components and directives are **standalone**.
+There are no more `NgModule`s — components are imported directly in the `imports` array of other standalone components, and providers are configured via `provide*()` functions.
+
+## Core setup (required)
+
+[providePrestationsNgCore](projects/prestations-ng/src/provide-prestations-ng-core.ts)
+
+Provides the core prestations-ng configuration: HTTP interceptors, chunk load error handling, and FontAwesome configuration.
+
+**IMPORTANT**: this function **MUST** be called in the providers of `bootstrapApplication`.
+
+```typescript
+import { bootstrapApplication } from '@angular/platform-browser';
+import { providePrestationsNgCore } from '@dsivd/prestations-ng/provide-prestations-ng-core';
+import { provideRouter } from '@angular/router';
+
+import { AppComponent } from './app/app.component';
+import { routes } from './app/app.routes';
+
+bootstrapApplication(AppComponent, {
+    providers: [providePrestationsNgCore(), provideRouter(routes)],
+});
+```
+
+Provides:
+
+- `IamExpiredInterceptorService` (HTTP interceptor)
+- `oidcNotAuthenticatedInterceptor` (functional interceptor)
+- `ChunkLoadErrorHandler` (ErrorHandler)
+- FontAwesome configuration (disables CSS auto-injection for CSP compliance)
+
+## Formatter Directives
+
+Import the standalone directives directly:
+
+- `CurrencyFormatterDirective` — selector `currencyFormatter`
+- `NdcFormatterDirective` — selector `ndcFormatter`
+- `IdeFormatterDirective` — selector `ideFormatter`
+- `IbanFormatterDirective` — selector `ibanFormatter`
+
+```typescript
+import { CurrencyFormatterDirective } from '@dsivd/prestations-ng';
+
+@Component({
+    imports: [CurrencyFormatterDirective]
+})
+```
+
+## Pipes
+
+Import the standalone pipes directly:
+
+- `DisplayDatePipe` — `displayDate`
+- `FormatIdePipe` — `formatIde`
+- `CurrencyPipe` — `currency`
+- `SdkDictionaryPipe` — `fromDictionary`
+
+```typescript
+import { DisplayDatePipe, SdkDictionaryPipe } from '@dsivd/prestations-ng';
+
+@Component({
+    imports: [DisplayDatePipe, SdkDictionaryPipe]
+})
+```
+
+## Foehn Input
+
+Standalone components for input fields:
+
+- `FoehnInputTextComponent` — `foehn-input-text`
+- `FoehnInputNumberComponent` — `foehn-input-number`
+- `FoehnInputEmailComponent` — `foehn-input-email`
+- `FoehnInputHiddenComponent` — `foehn-input-hidden`
+- `FoehnInputPasswordComponent` — `foehn-input-password`
+- `FoehnInputTextareaComponent` — `foehn-input-textarea`
+- `FoehnInputPhoneComponent` — `foehn-input-phone`
+- `FoehnInputPrefixedTextComponent` — `foehn-input-prefixed-text`
+- `FoehnInputDateComponent` — `foehn-date`
+- `FoehnInputDateTimeComponent` — `foehn-date-time`
+- `FoehnInputTimeComponent` — `foehn-time`
+
+## Foehn Checkable
+
+Standalone components for checkable/selectable fields:
+
+- `FoehnCheckboxComponent` — `foehn-checkbox` (multiple only; for a simple checkbox use `foehn-boolean-checkbox`)
+- `FoehnRadioComponent` — `foehn-radio`
+- `FoehnSelectComponent` — `foehn-select`
+
+## Foehn Autocomplete
+
+- `FoehnAutocompleteComponent` — `foehn-autocomplete`
+- `FoehnMultiselectAutocompleteComponent` — `foehn-multiselect-autocomplete`
+
+## Foehn Address
+
+- `FoehnInputAddressComponent` — `foehn-input-address`
+- `FoehnDisplayAddressComponent` — `foehn-display-address`
+- `FoehnInputForeignLocalityComponent` — `foehn-input-foreign-locality`
+- `FoehnInputForeignStreetComponent` — `foehn-input-foreign-street`
+
+## Foehn Boolean
+
+- `FoehnBooleanCheckboxComponent` — `foehn-boolean-checkbox`
+- `FoehnBooleanRadioComponent` — `foehn-boolean-radio`
+
+## Foehn Breadcrumb
+
+- `FoehnBreadcrumbComponent` — `foehn-breadcrumb`
+
+## Foehn Header
+
+- `FoehnHeaderComponent` — `foehn-header`
+- `FoehnSkipLinkComponent` — `foehn-skip-link`
+
+## Foehn Footer
+
+- `FoehnFooterComponent` — `foehn-footer`
+
+## Foehn Form
+
+- `FoehnFormComponent` — `foehn-form`
+
+## Foehn Growl
+
+- `FoehnGrowlComponent` — `foehn-growl`
+
+## Foehn Icons
+
+Standalone icon components:
+
+- `FoehnIconCalendarComponent` — `foehn-icon-calendar`
+- `FoehnIconCheckComponent` — `foehn-icon-check`
+- `FoehnIconCheckSquareOComponent` — `foehn-icon-check-square-o`
+- `FoehnIconChevronDownComponent` — `foehn-icon-chevron-down`
+- `FoehnIconChevronUpComponent` — `foehn-icon-chevron-up`
+- `FoehnIconChevronRightComponent` — `foehn-icon-chevron-right`
+- `FoehnIconChevronLeftComponent` — `foehn-icon-chevron-left`
+- `FoehnIconClockComponent` — `foehn-icon-clock`
+- `FoehnIconCommentDotsComponent` — `foehn-icon-comment-dots`
+- `FoehnIconEditComponent` — `foehn-icon-edit`
+- `FoehnIconExternalLinkAltComponent` — `foehn-icon-external-link-alt`
+- `FoehnIconInfoCircleComponent` — `foehn-icon-info-circle`
+- `FoehnIconLockComponent` — `foehn-icon-lock`
+- `FoehnIconMapMarkerComponent` — `foehn-icon-map-marker`
+- `FoehnIconMinusCircleComponent` — `foehn-icon-minus-circle`
+- `FoehnIconPlusCircleComponent` — `foehn-icon-plus-circle`
+- `FoehnIconPlusSquareComponent` — `foehn-icon-plus-square`
+- `FoehnIconSearchComponent` — `foehn-icon-search`
+- `FoehnIconTimesComponent` — `foehn-icon-times`
+- `FoehnIconTrashAltComponent` — `foehn-icon-trash-alt`
+- `FoehnIconUnlockAltComponent` — `foehn-icon-unlock-alt`
+- `FoehnIconFilePdfComponent` — `foehn-icon-file-pdf`
+- `FoehnIconPencilComponent` — `foehn-icon-pencil`
+- `FoehnIconUserComponent` — `foehn-icon-user`
+
+## Foehn List
+
+- `FoehnListComponent` — `foehn-list`
+
+## Foehn Table
+
+- `FoehnTableComponent` — `foehn-table`
+
+## Foehn Modal
+
+- `FoehnModalComponent` — `foehn-modal`
+- `FoehnPageModalComponent` — `foehn-page-modal`
+
+## Foehn Help Modal
+
+- `FoehnHelpModalComponent` — `foehn-help-modal`
+
+## Foehn Confirm Modal
+
+- `FoehnConfirmModalComponent` — `foehn-confirm-modal`
+- `FoehnConfirmModalService` — injectable service
+
+## Foehn Input Nav13 (AVS)
+
+- `FoehnInputNav13Component` — `foehn-input-nav13`
+
+## Foehn Navigation
+
+- `FoehnNavigationComponent` — `foehn-navigation`
+- `FoehnSimpleNavigationComponent` — `foehn-simple-navigation`
+- `FoehnNavigationService` — injectable service
+
+## Foehn Not Found
+
+- `FoehnNotfoundComponent` — `foehn-notfound` (can be used in the router)
+
+## Foehn Page
+
+- `FoehnPageComponent` — `foehn-page`
+- `FoehnPageCounterComponent` — `foehn-page-counter`
+- `FoehnPageExpirationTimerComponent` — `foehn-page-expiration-timer`
+
+## Foehn Status Progress Bar
+
+- `FoehnStatusProgressBarComponent` — `foehn-status-progress-bar`
+
+## Foehn Remaining Alerts Summary
+
+- `FoehnRemainingAlertsSummaryComponent` — `foehn-remaining-alerts-summary`
+
+## Foehn Validation Alert Summary
+
+- `FoehnValidationAlertSummaryComponent` — `foehn-validation-alert-summary`
+
+## Foehn Validation Alerts
+
+- `FoehnValidationAlertsComponent` — `foehn-validation-alerts`
+
+## GesDem Confirmation Page
+
+- `GesdemConfirmationComponent` — `gesdem-confirmation` (can be used in the router or as a super-class)
+
+## GesDem Error Page
+
+- `GesdemErrorComponent` — `gesdem-error` (can be used in the router)
+
+## SDK Dictionary
+
+- `SdkDictionaryService` — injectable service
+- `SdkDictionaryPipe` — pipe `fromDictionary`
+
+## SDK Captcha
+
+- `SdkRecaptchaComponent` — `captcha`
+- `RecaptchaService` — injectable service
+
+## SDK Redirect
+
+- `RedirectComponent` — `redirector`
+
+## Foehn Multi Upload
+
+- `FoehnMultiUploadComponent` — `foehn-multi-upload`
+
+## Foehn Bo Multi Upload
+
+- `FoehnBoMultiUploadComponent` — `foehn-bo-multi-upload`
+
+## Foehn Picture Upload
+
+- `FoehnPictureUploadComponent` — `foehn-picture-upload`
+
+## Foehn Upload Progress Bar
+
+- `FoehnUploadProgressBarComponent` — `foehn-upload-progress-bar`
+- `FoehnGlobalUploadProgressBarComponent` — `foehn-global-upload-progress-bar`
+
+## Foehn Recap Section
+
+- `FoehnRecapSectionComponent` — `foehn-recap-section`
+
+## Foehn User Connected As
+
+- `FoehnUserConnectedAsComponent` — `foehn-user-connected-as`
+
+## Foehn Miscellaneous
+
+- `FoehnAbbrComponent` — `foehn-abbr`
+
+## Foehn Menu Prestation
+
+- `FoehnErrorPillComponent` — `foehn-error-pill`
+- `FoehnMenuItemComponent` — `foehn-menu-item`
+- `FoehnMenuItemTransmitComponent` — `foehn-menu-item-transmit`
+- `FoehnListSummaryComponent` — `foehn-list-summary`
+
+## Foehn Date Picker
+
+- `FoehnDatePickerComponent` — `foehn-date-picker`
+- `FoehnDatePickerButtonComponent` — `foehn-date-picker-button`
+
+## Foehn Decision Electronique
+
+- `FoehnDecisionElectroniqueComponent` — `foehn-decision-electronique`
+
+## Foehn Agenda
+
+- `FoehnAgendaComponent` — `foehn-agenda`
+- `FoehnAgendaNavigationComponent` — `foehn-agenda-navigation`
+- `FoehnAgendaTimeslotPanelComponent` — `foehn-agenda-timeslot-panel`
+
+## Foehn Dropdown Menu
+
+- `FoehnDropdownMenuComponent` — `foehn-dropdown-menu`
+
+## Foehn Feedback Notification
+
+- `FoehnFeedbackNotificationComponent` — `foehn-feedback-notification`
+
+## SDK Payment (ePayment)
+
+- `SdkEpaymentComponent` — `sdk-epayment`
+- `PendingPaymentComponent` — `pending-payment`
+- `SdkEpaymentService` — injectable service
+
+## GesDem Action Recovery
+
+- `GesdemActionRecoveryLoginComponent` — login recovery component
+- `GesdemActionRecoveryRegistrationComponent` — registration recovery component
+
+## Foehn Transmit Waiting Modal
+
+- `FoehnTransmitWaitingModalComponent` — `foehn-transmit-waiting-modal`
+- `FoehnTransmitWaitingModalService` — injectable service
+
+---
+
+## Migrating from NgModules
+
+If you are migrating from a previous version that uses NgModules:
+
+1. **Replace `PrestationsNgCoreModule`** with `providePrestationsNgCore()` in the providers of `bootstrapApplication`.
+
+2. **Remove all module imports** (`FoehnInputModule`, `FoehnCheckablesModule`, etc.) and import standalone components directly in the `imports` array of your components.
+
+3. **Convert your components to standalone** and directly import the prestations-ng components you need:
+
+```typescript
+// Before (with NgModule)
+@NgModule({
+    imports: [FoehnInputModule, FoehnCheckablesModule],
+    declarations: [MyPageComponent],
+})
+export class MyPageModule {}
+
+// After (standalone) (no need to add "standalone: true" because it's the default behavior)
+@Component({
+    imports: [FoehnInputTextComponent, FoehnSelectComponent],
+    templateUrl: './my-page.component.html',
+})
+export class MyPageComponent {}
+```
+
+4. **Replace module-based `loadChildren`** with route files:
+
+```typescript
+// Before
+{ path: 'page', loadChildren: () => import('./page/page.module').then(m => m.PageModule) }
+
+// After
+{ path: 'page', loadChildren: () => import('./page/page.routes').then(m => m.ROUTES) }
+```

package/CONTRIBUTING.md

@@ -2,19 +2,10 @@
 
 ## Prerequisite
 
-- Node 20.11+
+- Node 22.18+
 - npm 10.2+
 - Chrome or Chromium
 - G++
-- The variable `CHROMIUM_BIN` set in your environment
-
-If you're using bashrc.dev.pee, the variable `CHROMIUM_BIN` is already set to `~/slave-apps/chromium-headless-64/chrome`
-
-If not, you can set the variable in your `.bashrc` or `.zshrc`:
-
-```bash
-export CHROMIUM_BIN=/usr/bin/google-chrome-stable
-```
 
 ## Developing using the Dev Tool
 
@@ -34,7 +25,7 @@ result.
 ### In **prestations-ng**
 
 - if it is the first time, execute `npm install` then `npm run build:lib` (at root level)
-- `cd dist/prestations-ng && yarn link` (it's critical to link the content of `dist/prestations-ng`, not the root)
+- `cd dist/prestations-ng && npm link` (it's critical to link the content of `dist/prestations-ng`, not the root)
 - `cd ../.. && npm run build:lib:dev` (at root level)
 
 `build:lib:dev` will use a feature of the Angular CLI: `--watch`. For more information on `--watch`, refer to the [official documentation](https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/create-library.md#why-do-i-need-to-build-the-library-everytime-i-make-changes).
@@ -42,12 +33,12 @@ result.
 ### In the prestation
 
 - `cd front`
-- `yarn link @dsivd/prestations-ng`
+- `npm link @dsivd/prestations-ng`
 - `npm start` (only when `npm run build:lib:dev` in `prestations-ng` has started)
 
 Now if you change something in `prestations-ng`, the CLI of the prestation will hot swap the missing pieces and reload the page.
 
-Finally, when you're done, run `yarn unlink @dsivd/prestations-ng` to unlink the local version. You will need to run `npm install --force` to re-install the package that was linked.
+Finally, when you're done, run `npm install` to unlink the local version.
 
 **NB: When the project uses a version 12+ or 13+ of the library, you need to use `yarn start:symlink` and checkout the library tag matching v12+ or v13+. More information on [UPGRADING_V12](UPGRADING_V12.md)**
 
@@ -72,14 +63,13 @@ run `npm run test:schematics` (at root level).
 ### Testing into a project such as **skeleton**
 
 - **In prestations-ng**:
-
     - if it is the first time, execute `npm install` then `npm run build:lib` (at root level)
     - `cd dist/prestations-ng && npm link` (it's critical to link the content of `dist/prestations-ng`, not the root)
-    - `npm run build:lib:dev` (at root level)
+    - `cd ../.. && npm run build:lib:dev` (at root level)
 
 - **In project**:
     - `cd front`
-    - `npm link @dsivd/prestations-ng` (`npm unlink @dsivd/prestations-ng` to remove link)
+    - `npm link @dsivd/prestations-ng` (`npm install` to remove link)
     - `ng g @dsivd/prestations-ng:[YOUR_SCHEMATIC]` (i.e. `ng g @dsivd/prestations-ng:ng-add` or `ng g @dsivd/prestations-ng:update-karma-config` or `ng g @dsivd/prestations-ng:replace-browsers-list`)
 
 In your project, you can test any schematic added into [collection.json](projects/prestations-ng/schematics/collection.json).
@@ -87,15 +77,14 @@ If you want to test `ng-update`, you will need to release the library under a be
 
 **NB: Do not forget to add your utility into ng-add and ng-update schematics**
 
-## Adding a module
+## Adding a standalone component
 
-In case you're adding or modifying a `*.module.ts`, please update [MODULES.md](MODULES.md).
+In case you're adding or modifying a `*.component.ts`, please update [COMPONENTS.md](COMPONENTS.md).
 
 ## Adding an icon
 
 - Create a `.ts` and `.html` similar to `foehn-icon-lock.component`, and replace the name of the icon accordingly
 - Add a `title` for accessibility
-- Import and export the new `*.component.ts` in [foehn-icons.module.ts](projects/prestations-ng/src/foehn-icons/foehn-icons.module.ts)
 
 ## Notes about linting, formatting and pre-commit hooks