@onemrvapublic/design-system 22.0.0-develop.5 → 22.0.0-develop.7

package/README.md

@@ -33,13 +33,19 @@ If you need access to our design system board, send us a message.
 @Bram Decuypere (NL / EN)
 ## Changelog
 
-### 22.0.0-develop.5
+### 22.0.0-develop.7
 
-# [22.0.0-develop.5](https://rvaonem.ghe.com/AS-DESIGN-SYSTEM/core/compare/v22.0.0-develop.4...v22.0.0-develop.5) (2026-06-18)
+# [22.0.0-develop.7](https://rvaonem.ghe.com/AS-DESIGN-SYSTEM/core/compare/v22.0.0-develop.6...v22.0.0-develop.7) (2026-06-22)
 
 
 ### Bug Fixes
 
-* ensure ngx translate update ([82bbd15](https://rvaonem.ghe.com/AS-DESIGN-SYSTEM/core/commit/82bbd15d5956701b440a76aa9fcd2690496b39b3))
-* ensure ngx translate update ([d3f1d05](https://rvaonem.ghe.com/AS-DESIGN-SYSTEM/core/commit/d3f1d0558c342921e61be6ac3379c8b20e9ab9e3))
+* **timeline:** drop invalid TranslateModule import and redundant optional chain ([a988299](https://rvaonem.ghe.com/AS-DESIGN-SYSTEM/core/commit/a98829939d4c1467eb6365188cf8b7e307bc2d7c))
+
+
+### Features
+
+* **timeline:** add en, fr, nl and de translations ([cfef4bb](https://rvaonem.ghe.com/AS-DESIGN-SYSTEM/core/commit/cfef4bbc445eb760c2b1130ebf40dc834ff54a97))
+* **timeline:** add full-size mode and refine layout, models and docs ([e794eec](https://rvaonem.ghe.com/AS-DESIGN-SYSTEM/core/commit/e794eecf1caf7be432687cf8a862347cd7f14cb6))
+* **timeline:** add timeline component to design system ([5e05e1f](https://rvaonem.ghe.com/AS-DESIGN-SYSTEM/core/commit/5e05e1f84b7276d8b6e7ab27247bf2c33e52be01))
 

package/assets/i18n/de.json

@@ -1,4 +1,16 @@
 {
+  "timeline": {
+    "period": "Zeitraum",
+    "month": "Monat",
+    "year": "Jahr",
+    "years": "Jahre",
+    "goToMonth": "Zum Monat",
+    "previousYear": "Zum vorherigen Jahr",
+    "nextYear": "Zum nächsten Jahr",
+    "previousMonth": "Zum vorherigen Monat",
+    "nextMonth": "Zum nächsten Monat",
+    "goTo": "Gehe zu {{label}}"
+  },
   "demo.title": "Design System",
   "error": {
     "500": {

package/assets/i18n/en.json

@@ -1,4 +1,16 @@
 {
+  "timeline": {
+    "period": "Period",
+    "month": "Month",
+    "year": "Year",
+    "years": "Years",
+    "goToMonth": "Go to month",
+    "previousYear": "Go to previous year",
+    "nextYear": "Go to next year",
+    "previousMonth": "Go to previous month",
+    "nextMonth": "Go to next month",
+    "goTo": "Go to {{label}}"
+  },
   "demo.title": "Design System",
   "error": {
     "500": {

package/assets/i18n/fr.json

@@ -1,4 +1,16 @@
 {
+  "timeline": {
+    "period": "Période",
+    "month": "Mois",
+    "year": "An",
+    "years": "Ans",
+    "goToMonth": "Aller au mois",
+    "previousYear": "Aller à l'année précédente",
+    "nextYear": "Aller à l'année suivante",
+    "previousMonth": "Aller au mois précédent",
+    "nextMonth": "Aller au mois suivant",
+    "goTo": "Aller à {{label}}"
+  },
   "demo.title": "Design System",
   "error": {
     "500": {

package/assets/i18n/nl.json

@@ -1,4 +1,16 @@
 {
+  "timeline": {
+    "period": "Periode",
+    "month": "Maand",
+    "year": "Jaar",
+    "years": "Jaar",
+    "goToMonth": "Ga naar maand",
+    "previousYear": "Ga naar vorig jaar",
+    "nextYear": "Ga naar volgend jaar",
+    "previousMonth": "Ga naar vorige maand",
+    "nextMonth": "Ga naar volgende maand",
+    "goTo": "Ga naar {{label}}"
+  },
   "demo.title": "Ontwerpsysteem",
   "error": {
     "500": {

package/fesm2022/onemrvapublic-design-system-layout.mjs

@@ -19,7 +19,6 @@ import { MatRipple } from '@angular/material/core';
 import { OnemrvaMatNavigationComponent } from '@onemrvapublic/design-system/mat-navigation';
 import { TranslateService, TranslatePipe, TranslateDirective } from '@ngx-translate/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { trigger, state, style, transition, animate } from '@angular/animations';
 import * as i1 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import * as i2 from '@angular/material/select';
@@ -474,39 +473,11 @@ class LayoutSidenavComponent {
         return 'Unnamed Route';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: LayoutSidenavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: LayoutSidenavComponent, isStandalone: true, selector: "onemrva-layout-sidenav", inputs: { isSmall: { classPropertyName: "isSmall", publicName: "isSmall", isSignal: true, isRequired: true, transformFunction: null }, routes: { classPropertyName: "routes", publicName: "routes", isSignal: true, isRequired: false, transformFunction: null }, languages: { classPropertyName: "languages", publicName: "languages", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (\n  isSmall() &&\n  (routes()?.toArray()?.length || (languages() && languages().length > 1))\n) {\n  <div class=\"sidebar\">\n    @if (isSmall() && routes()?.toArray()?.length) {\n      <div class=\"navigation\">\n        <div class=\"close-button\">\n          <button\n            type=\"button\"\n            mat-icon-button\n            (click)=\"close()\"\n            data-cy=\"smallDeviceMenu\"\n            attr.aria-label=\"{{ 'layout.menu' | translate }}\"\n          >\n            <mat-icon>close</mat-icon>\n          </button>\n        </div>\n        <onemrva-mat-navigation [items]=\"items\" />\n      </div>\n      @if (languages() && languages().length > 1) {\n        <div class=\"language-selector\">\n          <mat-form-field>\n            <mat-select\n              [ngModel]=\"currentLanguage\"\n              (selectionChange)=\"changeLanguage($event)\"\n            >\n              @for (lang of languages(); track lang.code) {\n                <mat-option\n                  [value]=\"lang\"\n                  [attr.data-cy]=\"'language_' + lang.code\"\n                >\n                  {{ lang.label }}\n                </mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        </div>\n      }\n    }\n  </div>\n}\n", styles: [":host .close-button{display:flex;justify-content:flex-end;padding:var(--spacer)}:host .mobile-menu-item{display:flex;width:100%;background:var(--mat-sys-background);padding:var(--spacer);border:none;box-shadow:none;font-size:1.2rem;align-items:center;text-align:left}:host .mobile-menu-item:active,:host .mobile-menu-item.active{border-right:4px solid var(--mat-sys-secondary);font-weight:700!important}:host .mobile-menu-item mat-icon{margin-left:4px}:host .sidebar{overflow:scroll;display:flex;flex-direction:column;justify-content:space-between;height:100vh}:host .sidebar .language-selector mat-form-field{width:100%}:host .sidebar .language-selector{margin:var(--double-spacer);bottom:0}\n"], dependencies: [{ kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: OnemrvaMatNavigationComponent, selector: "onemrva-mat-navigation", inputs: ["items", "level", "translate"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], animations: [
-            trigger('slideInOut', [
-                state('in', style({
-                    overflow: 'hidden',
-                    height: '*',
-                })),
-                state('out', style({
-                    opacity: '0',
-                    overflow: 'hidden',
-                    height: '0px',
-                })),
-                transition('in => out', animate('400ms ease-in-out')),
-                transition('out => in', animate('400ms ease-in-out')),
-            ]),
-        ] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: LayoutSidenavComponent, isStandalone: true, selector: "onemrva-layout-sidenav", inputs: { isSmall: { classPropertyName: "isSmall", publicName: "isSmall", isSignal: true, isRequired: true, transformFunction: null }, routes: { classPropertyName: "routes", publicName: "routes", isSignal: true, isRequired: false, transformFunction: null }, languages: { classPropertyName: "languages", publicName: "languages", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (\n  isSmall() &&\n  (routes()?.toArray()?.length || (languages() && languages().length > 1))\n) {\n  <div class=\"sidebar\">\n    @if (isSmall() && routes()?.toArray()?.length) {\n      <div class=\"navigation\">\n        <div class=\"close-button\">\n          <button\n            type=\"button\"\n            mat-icon-button\n            (click)=\"close()\"\n            data-cy=\"smallDeviceMenu\"\n            attr.aria-label=\"{{ 'layout.menu' | translate }}\"\n          >\n            <mat-icon>close</mat-icon>\n          </button>\n        </div>\n        <onemrva-mat-navigation [items]=\"items\" />\n      </div>\n      @if (languages() && languages().length > 1) {\n        <div class=\"language-selector\">\n          <mat-form-field>\n            <mat-select\n              [ngModel]=\"currentLanguage\"\n              (selectionChange)=\"changeLanguage($event)\"\n            >\n              @for (lang of languages(); track lang.code) {\n                <mat-option\n                  [value]=\"lang\"\n                  [attr.data-cy]=\"'language_' + lang.code\"\n                >\n                  {{ lang.label }}\n                </mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        </div>\n      }\n    }\n  </div>\n}\n", styles: [":host .close-button{display:flex;justify-content:flex-end;padding:var(--spacer)}:host .mobile-menu-item{display:flex;width:100%;background:var(--mat-sys-background);padding:var(--spacer);border:none;box-shadow:none;font-size:1.2rem;align-items:center;text-align:left}:host .mobile-menu-item:active,:host .mobile-menu-item.active{border-right:4px solid var(--mat-sys-secondary);font-weight:700!important}:host .mobile-menu-item mat-icon{margin-left:4px}:host .sidebar{overflow:scroll;display:flex;flex-direction:column;justify-content:space-between;height:100vh}:host .sidebar .language-selector mat-form-field{width:100%}:host .sidebar .language-selector{margin:var(--double-spacer);bottom:0}\n"], dependencies: [{ kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: OnemrvaMatNavigationComponent, selector: "onemrva-mat-navigation", inputs: ["items", "level", "translate"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: LayoutSidenavComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'onemrva-layout-sidenav', animations: [
-                        trigger('slideInOut', [
-                            state('in', style({
-                                overflow: 'hidden',
-                                height: '*',
-                            })),
-                            state('out', style({
-                                opacity: '0',
-                                overflow: 'hidden',
-                                height: '0px',
-                            })),
-                            transition('in => out', animate('400ms ease-in-out')),
-                            transition('out => in', animate('400ms ease-in-out')),
-                        ]),
-                    ], standalone: true, imports: [
+            args: [{ selector: 'onemrva-layout-sidenav', standalone: true, imports: [
                         MatIconButton,
                         MatIcon,
                         TranslatePipe,