@onemrvapublic/design-system 22.0.0-develop.2 → 22.0.0-develop.21

package/timeline/src/onemrva-timeline.component.scss

@@ -0,0 +1,371 @@
+$timeline-grid: #d7d5ed;
+$timeline-ink: #242424;
+$timeline-accent: #625d9c;
+$timeline-muted: #78767d;
+$timeline-bar-height: 40px;
+$timeline-row-gap: 16px;
+
+.container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.navigation {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: flex-end;
+  gap: 16px;
+  margin-bottom: 12px;
+}
+
+.nav-info {
+  display: flex;
+  flex-direction: column;
+}
+
+.timeline-title {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+  color: $timeline-ink;
+}
+
+.timeline-range {
+  font-size: 14px;
+  color: $timeline-ink;
+}
+
+.nav-controls {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: 12px;
+}
+
+.nav-pager {
+  display: flex;
+  align-items: center;
+  color: $timeline-ink;
+}
+
+.nav-divider {
+  align-self: center;
+  height: 28px;
+}
+
+.timeline-field {
+  width: 150px;
+  padding: 0;
+  --mat-form-field-container-height: 40px;
+  --mat-form-field-container-vertical-padding: 8px;
+}
+
+.timeline-month-jump {
+  width: 168px;
+}
+
+.timeline-field ::ng-deep .mat-mdc-form-field-subscript-wrapper {
+  display: none;
+}
+
+.timeline-field
+  ::ng-deep
+  .mat-mdc-text-field-wrapper.mdc-text-field--outlined
+  .mdc-notched-outline--upgraded
+  .mdc-floating-label--float-above {
+  --mat-form-field-container-height: 40px;
+}
+
+.timeline-scroll {
+  overflow: auto;
+  overscroll-behavior: contain;
+  scroll-snap-type: y mandatory;
+  scroll-padding-top: 26px;
+  scrollbar-width: thin;
+  scrollbar-color: #cfcde0 transparent;
+
+  &::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #cfcde0;
+    border-radius: 4px;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background: #bdbad4;
+  }
+}
+
+.timeline-scroll.full-size {
+  max-height: none;
+  overflow-y: hidden;
+  scroll-snap-type: none;
+}
+
+.timelineContainer {
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+  min-width: 100%;
+}
+
+.timeline-years {
+  position: sticky;
+  top: 0;
+  z-index: 500;
+  display: flex;
+  flex-direction: row;
+  background-color: #ffffff;
+  box-shadow: 0 3px 4px -2px rgba(0, 0, 0, 0.12);
+}
+
+.timeline-years .axis-col {
+  flex: 1 0 56px;
+  height: 25px;
+  line-height: 25px;
+  border-right: solid 1px $timeline-grid;
+  border-bottom: solid 1px $timeline-grid;
+  text-align: center;
+  color: $timeline-ink;
+}
+
+.timeline-years .axis-col:first-child {
+  border-left: solid 1px $timeline-grid;
+}
+
+.timeline-plot {
+  position: relative;
+  overflow: hidden;
+}
+
+.timeline-grid {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: row;
+}
+
+.timeline-grid .grid-col {
+  flex: 1 0 56px;
+  border-right: solid 1px $timeline-grid;
+}
+
+.timeline-grid .grid-col:first-child {
+  border-left: solid 1px $timeline-grid;
+}
+
+.timeline {
+  position: absolute;
+  top: 8px;
+  left: 4px;
+  right: 4px;
+  display: flex;
+  flex-direction: column;
+}
+
+.timeline-months {
+  position: sticky;
+  bottom: 0;
+  z-index: 500;
+  display: flex;
+  flex-direction: row;
+  background-color: #ffffff;
+  border-top: solid 1px $timeline-grid;
+  box-shadow: 0 -3px 4px -2px rgba(0, 0, 0, 0.12);
+}
+
+.timeline-months .months-col {
+  flex: 1 0 56px;
+  height: 29px;
+  border-right: solid 1px $timeline-grid;
+  font-size: 0;
+  white-space: nowrap;
+}
+
+.timeline-months .months-col:first-child {
+  border-left: solid 1px $timeline-grid;
+}
+
+.timeline-months .month {
+  display: inline-block;
+  box-sizing: border-box;
+  height: 29px;
+  line-height: 29px;
+  font-size: 12px;
+  color: #9a98a8;
+  text-align: center;
+}
+
+.timeline-row {
+  display: flex;
+  height: $timeline-bar-height;
+  margin-bottom: $timeline-row-gap;
+  scroll-snap-align: start;
+  will-change: transform;
+}
+
+.item {
+  height: $timeline-bar-height;
+  min-width: 0;
+}
+
+.period {
+  display: flex;
+  align-items: center;
+  height: $timeline-bar-height;
+  min-width: 0;
+  padding: 0 8px;
+  border-radius: 4px;
+  color: #ffffff;
+  font-size: 14px;
+  overflow: hidden;
+  z-index: 200;
+  transition:
+    box-shadow 0.15s ease,
+    opacity 0.15s ease;
+}
+
+.period-label {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.period:hover {
+  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.32);
+}
+
+.period.selected {
+  box-shadow: 0 0 0 2px $timeline-ink;
+  z-index: 250;
+}
+
+.period:focus-visible {
+  outline: none;
+  box-shadow:
+    inset 0 0 0 2px #ffffff,
+    inset 0 0 0 4px $timeline-ink;
+  z-index: 250;
+}
+
+.period.disabled {
+  opacity: 0.4;
+  cursor: default;
+  pointer-events: none;
+}
+
+.cursor {
+  cursor: pointer;
+}
+
+.timeline-legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-top: 20px;
+  justify-content: flex-end;
+
+  .legend-item {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin: 0;
+    padding: 2px 4px;
+    background: none;
+    border: none;
+    border-radius: 4px;
+    font: inherit;
+    color: inherit;
+    cursor: pointer;
+  }
+
+  .legend-item:hover .legend-label {
+    text-decoration: underline;
+  }
+
+  .legend-item:focus-visible {
+    outline: 2px solid $timeline-accent;
+    outline-offset: 1px;
+  }
+
+  .legend-color {
+    width: 16px;
+    height: 16px;
+    border-radius: 3px;
+  }
+
+  .legend-label {
+    font-size: 14px;
+    color: $timeline-ink;
+  }
+}
+
+.tooltip {
+  position: absolute;
+  transform: translateX(-50%);
+  background-color: #ffffff;
+  border: 1px solid $timeline-grid;
+  border-radius: 4px;
+  padding: 10px 15px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  color: $timeline-ink;
+  z-index: 999;
+  width: 300px;
+  max-width: 90vw;
+}
+
+.tooltip-title {
+  font-weight: 600;
+}
+
+.tooltip-label {
+  margin-top: 2px;
+}
+
+.tooltip-description {
+  margin-top: 2px;
+  color: $timeline-muted;
+}
+
+@media (max-width: 600px) {
+  .navigation {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 12px;
+    margin-bottom: 16px;
+  }
+
+  .nav-controls {
+    justify-content: flex-start;
+    gap: 12px;
+  }
+
+  .nav-divider {
+    display: none;
+  }
+
+  .timeline-filters ::ng-deep .mat-button-toggle-label-content {
+    padding: 0 10px;
+    font-size: 0.875rem;
+  }
+
+  .timeline-title {
+    font-size: 16px;
+  }
+
+  .timeline-legend {
+    margin-top: 16px;
+    justify-content: flex-start;
+    gap: 8px 16px;
+  }
+}

package/types/onemrvapublic-design-system-card.d.ts

@@ -3,23 +3,22 @@ import * as _angular_core from '@angular/core';
 declare class OnemrvaCardComponent {
     /** Visual variant of the card. */
     readonly type: _angular_core.InputSignal<"no-background" | "outline" | "background">;
-    readonly image: _angular_core.InputSignal<boolean>;
-    readonly imageSrc: _angular_core.InputSignal<string>;
-    readonly imageAlt: _angular_core.InputSignal<string>;
+    readonly imageSrc: _angular_core.InputSignal<string | undefined>;
+    readonly imageAlt: _angular_core.InputSignal<string | undefined>;
     readonly hasImage: _angular_core.Signal<boolean>;
-    readonly label: _angular_core.InputSignal<string>;
-    readonly title: _angular_core.InputSignal<string>;
-    readonly subtitle: _angular_core.InputSignal<string>;
-    readonly description: _angular_core.InputSignal<string>;
+    readonly label: _angular_core.InputSignal<string | undefined>;
+    readonly title: _angular_core.InputSignal<string | undefined>;
+    readonly subtitle: _angular_core.InputSignal<string | undefined>;
+    readonly description: _angular_core.InputSignal<string | undefined>;
     /** Tooltip text shown via the help icon. When empty, the icon is hidden. */
-    readonly helpText: _angular_core.InputSignal<string>;
+    readonly helpText: _angular_core.InputSignal<string | undefined>;
     /** When `true`, the title always uses the gradient. When `false`, it is always plain. When omitted, the gradient follows the variant. */
     readonly coloredTitle: _angular_core.InputSignal<boolean | undefined>;
     /** Overrides the CSS text color for label, subtitle, description and help icon. Accepts any CSS color value. */
     readonly textColor: _angular_core.InputSignal<string | undefined>;
     readonly width: _angular_core.InputSignal<string | undefined>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OnemrvaCardComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OnemrvaCardComponent, "onemrva-card", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "image": { "alias": "image"; "required": false; "isSignal": true; }; "imageSrc": { "alias": "imageSrc"; "required": false; "isSignal": true; }; "imageAlt": { "alias": "imageAlt"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "helpText": { "alias": "helpText"; "required": false; "isSignal": true; }; "coloredTitle": { "alias": "coloredTitle"; "required": false; "isSignal": true; }; "textColor": { "alias": "textColor"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; }, {}, never, ["[cardActions]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OnemrvaCardComponent, "onemrva-card", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "imageSrc": { "alias": "imageSrc"; "required": false; "isSignal": true; }; "imageAlt": { "alias": "imageAlt"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "helpText": { "alias": "helpText"; "required": false; "isSignal": true; }; "coloredTitle": { "alias": "coloredTitle"; "required": false; "isSignal": true; }; "textColor": { "alias": "textColor"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; }, {}, never, ["[cardActions]"], true, never>;
 }
 
 declare class OnemrvaCardModule {

package/types/onemrvapublic-design-system-layout.d.ts

@@ -301,7 +301,7 @@ declare function ObservableContent(): (target: any, propertyKey: string) => void
 
 declare class OnemrvaLayoutModule {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OnemrvaLayoutModule, never>;
-    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<OnemrvaLayoutModule, never, [typeof LayoutComponent, typeof LayoutContentComponent, typeof LayoutFooterComponent, typeof LayoutRouteComponent, typeof LayoutSubrouteComponent, typeof LayoutTitleComponent, typeof LayoutSidenavTitleComponent, typeof LayoutSidenavComponent, typeof LayoutLoginMenuComponent, typeof LayoutAfterNavComponent, typeof LayoutLeftSidenavComponent, typeof StripHtmlPipe, typeof DrawerHostDirective, typeof i14.CommonModule, typeof _angular_router.RouterModule, typeof i16.LayoutModule, typeof i17.MatToolbarModule, typeof i18.MatDividerModule, typeof i19.MatSidenavModule, typeof i20.MatTabsModule, typeof i21.MatButtonModule, typeof i22.MatMenuModule, typeof i23.MatIconModule, typeof i24.OnemrvaMatAvatarComponent, typeof i25.MatTooltipModule, typeof i26.TranslateModule, typeof i27.MatRipple], [typeof LayoutComponent, typeof LayoutContentComponent, typeof LayoutFooterComponent, typeof LayoutRouteComponent, typeof LayoutSubrouteComponent, typeof LayoutTitleComponent, typeof LayoutSidenavTitleComponent, typeof LayoutSidenavComponent, typeof LayoutLoginMenuComponent, typeof LayoutAfterNavComponent, typeof LayoutLeftSidenavComponent, typeof i16.LayoutModule]>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<OnemrvaLayoutModule, never, [typeof LayoutComponent, typeof LayoutContentComponent, typeof LayoutFooterComponent, typeof LayoutRouteComponent, typeof LayoutSubrouteComponent, typeof LayoutTitleComponent, typeof LayoutSidenavTitleComponent, typeof LayoutSidenavComponent, typeof LayoutLoginMenuComponent, typeof LayoutAfterNavComponent, typeof LayoutLeftSidenavComponent, typeof StripHtmlPipe, typeof DrawerHostDirective, typeof i14.CommonModule, typeof _angular_router.RouterModule, typeof i16.LayoutModule, typeof i17.MatToolbarModule, typeof i18.MatDividerModule, typeof i19.MatSidenavModule, typeof i20.MatTabsModule, typeof i21.MatButtonModule, typeof i22.MatMenuModule, typeof i23.MatIconModule, typeof i24.OnemrvaMatAvatarComponent, typeof i25.MatTooltipModule, typeof i26.TranslatePipe, typeof i26.TranslateDirective, typeof i27.MatRipple], [typeof LayoutComponent, typeof LayoutContentComponent, typeof LayoutFooterComponent, typeof LayoutRouteComponent, typeof LayoutSubrouteComponent, typeof LayoutTitleComponent, typeof LayoutSidenavTitleComponent, typeof LayoutSidenavComponent, typeof LayoutLoginMenuComponent, typeof LayoutAfterNavComponent, typeof LayoutLeftSidenavComponent, typeof i16.LayoutModule]>;
     static ɵinj: _angular_core.ɵɵInjectorDeclaration<OnemrvaLayoutModule>;
 }
 

package/types/onemrvapublic-design-system-mat-carousel.d.ts

@@ -1,6 +1,5 @@
 import * as _angular_core from '@angular/core';
 import { TemplateRef, ElementRef, AfterViewInit, OnInit, OnDestroy, Renderer2 } from '@angular/core';
-import { AnimationBuilder, AnimationFactory } from '@angular/animations';
 import { Subject } from 'rxjs';
 
 declare class OnemrvaMatCarouselItemComponent {
@@ -28,14 +27,12 @@ declare class OnemrvaMatCarouselComponent implements AfterViewInit, OnInit, OnDe
     carouselWrapperStyle: {};
     width: number;
     destroyed: Subject<any>;
-    builder: AnimationBuilder;
     element: ElementRef;
     renderer: Renderer2;
     constructor();
     ngOnInit(): void;
     ngOnDestroy(): void;
     onResize(_event: any): void;
-    buildAnimation(offset: number): AnimationFactory;
     goto(index: number): void;
     next(): void;
     prev(): void;

package/types/onemrvapublic-design-system-mat-file-upload.d.ts

@@ -156,7 +156,7 @@ declare class DndDirective {
 
 declare class OnemrvaMatFileUploadModule {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OnemrvaMatFileUploadModule, never>;
-    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<OnemrvaMatFileUploadModule, never, [typeof OnemrvaFilePanelComponent, typeof OnemrvaMatFileUploadComponent, typeof DndDirective, typeof i4.CommonModule, typeof i5.ReactiveFormsModule, typeof i6.MatButtonModule, typeof i7.MatTooltipModule, typeof i8.MatDialogModule, typeof i9.TranslateModule, typeof i10.MatIconModule, typeof i11.MatInputModule], [typeof OnemrvaFilePanelComponent, typeof OnemrvaMatFileUploadComponent, typeof DndDirective]>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<OnemrvaMatFileUploadModule, never, [typeof OnemrvaFilePanelComponent, typeof OnemrvaMatFileUploadComponent, typeof DndDirective, typeof i4.CommonModule, typeof i5.ReactiveFormsModule, typeof i6.MatButtonModule, typeof i7.MatTooltipModule, typeof i8.MatDialogModule, typeof i9.TranslatePipe, typeof i9.TranslateDirective, typeof i10.MatIconModule, typeof i11.MatInputModule], [typeof OnemrvaFilePanelComponent, typeof OnemrvaMatFileUploadComponent, typeof DndDirective]>;
     static ɵinj: _angular_core.ɵɵInjectorDeclaration<OnemrvaMatFileUploadModule>;
 }
 

package/types/onemrvapublic-design-system-page-error.d.ts

@@ -15,8 +15,8 @@ declare class PageErrorComponent implements AfterViewInit, OnDestroy {
     readonly code: _angular_core.InputSignal<number>;
     readonly safeCode: _angular_core.Signal<number>;
     private cdn;
+    private translateService;
     private renderer;
-    private translate;
     private cd;
     constructor();
     ngAfterViewInit(): void;

package/types/onemrvapublic-design-system-shared.d.ts

@@ -312,7 +312,7 @@ declare class OnemRvaCDNCountryService {
     private translateService;
     getCountries(): Observable<OnemrvaMaterialCountry[]>;
     getCountriesByZone(zone: string): Observable<OnemrvaMaterialCountry[]>;
-    getTranslatedCountryName(country: OnemrvaMaterialCountry, languageCode?: string): string;
+    getTranslatedCountryName(country: OnemrvaMaterialCountry, languageCode?: string | null): string;
     findCountryFromCode(code: string): Observable<OnemrvaMaterialCountry | undefined>;
     findCountryFromVIESCode(code: any): Observable<OnemrvaMaterialCountry | undefined>;
     findCountryFromPrefix(number: string | null): Observable<OnemrvaMaterialCountry | undefined>;

package/types/onemrvapublic-design-system-timeline.d.ts

@@ -0,0 +1,195 @@
+import * as _angular_core from '@angular/core';
+import { CdkOverlayOrigin, ConnectedPosition } from '@angular/cdk/overlay';
+
+/** A dated period plotted on the timeline. */
+interface TimelinePeriod {
+    /** Stable identity; used for selection and as the row track key. */
+    id: string;
+    /** Inclusive start, interpreted in local time. Must not be after `endDate`. */
+    beginDate: Date;
+    /** Inclusive end, interpreted in local time. Must not be before `beginDate`. */
+    endDate: Date;
+    /** Legend join key; an unmatched or missing type falls back to a neutral grey. */
+    type?: string;
+    /** Text shown inside the bar (when labels are enabled) and in the tooltip. */
+    label?: string;
+    /** Tooltip detail; rendered as sanitized HTML via Angular's `[innerHTML]`. */
+    description?: string;
+    /** When true the bar is dimmed and cannot be selected or focused. */
+    disabled?: boolean;
+}
+
+/** A single-select filter toggle shown in the timeline header. */
+interface TimelineFilterOption {
+    label: string;
+    value: string;
+}
+/** Maximum filter options the timeline renders; extras are ignored. */
+declare const MAX_TIMELINE_FILTERS = 3;
+
+interface TimelineBar {
+    class: string;
+    style: string;
+    period?: TimelinePeriod;
+    trackById: string;
+}
+
+/** A palette token assigned to a legend entry; resolved to a hex value via `TIMELINE_PALETTE`. */
+type TimelineColor = 'data-1' | 'data-2' | 'data-3' | 'data-4' | 'data-5' | 'data-6' | 'data-7';
+/** All palette tokens in display order. */
+declare const TIMELINE_COLORS: readonly TimelineColor[];
+/** Maps each palette token to its hex value. */
+declare const TIMELINE_PALETTE: Record<TimelineColor, string>;
+
+/** Legend entries mapping each period `type` to its label and color. */
+type TimelineLegend = TimelineLegendItem[];
+/** Maps a period `type` to the label and color used to render and group it. */
+interface TimelineLegendItem {
+    /** Join key matched against `TimelinePeriod.type`. */
+    type: string;
+    /** Human-readable name shown in the legend. */
+    label: string;
+    /** Palette token applied to every period of this `type`. */
+    color: TimelineColor;
+}
+
+/**
+ * Displays dated periods on a horizontal, year-based timeline. Overlapping
+ * periods stack into rows and take their colour from the matching legend item.
+ *
+ * @example
+ * ```html
+ * <onemrva-timeline
+ *   title="Career timeline"
+ *   [periods]="periods"
+ *   [legend]="legend"
+ *   [filters]="filters"
+ *   [(activeFilter)]="activeFilter"
+ *   [(selectedPeriod)]="selected"
+ *   emptyMessage="No periods to display"
+ * />
+ * ```
+ */
+declare class OnemrvaTimelineComponent {
+    private readonly fallbackColor;
+    private readonly rowHeightPx;
+    private readonly plotPaddingPx;
+    private readonly axesHeightPx;
+    /** Optional heading shown above the visible year range. */
+    readonly title: _angular_core.InputSignal<string>;
+    /** Periods to plot on the timeline. */
+    readonly periods: _angular_core.InputSignal<TimelinePeriod[]>;
+    /** Legend entries that map a period `type` to its label and color. */
+    readonly legend: _angular_core.InputSignal<TimelineLegend | undefined>;
+    /** Size, in years, of the visible window; two-way bindable via the period dropdown. */
+    readonly fixedYearCount: _angular_core.ModelSignal<number>;
+    /** Year-window sizes offered by the period dropdown. */
+    readonly yearOptions: _angular_core.InputSignal<number[]>;
+    /** When true, the period dropdown offers a "Month" option. */
+    readonly showMonthPicker: _angular_core.InputSignal<boolean>;
+    /** Whether month numbers are shown under each year (only when the window spans at most 5 years). */
+    readonly showMonths: _angular_core.InputSignal<boolean>;
+    /** Whether period labels are rendered inside the bars. */
+    readonly showLabels: _angular_core.InputSignal<boolean>;
+    /** Whether the hover popup with period details is shown. */
+    readonly showTooltip: _angular_core.InputSignal<boolean>;
+    /** Optional max height (any CSS length) for the timeline body; rows scroll within it while the year and month axes stay pinned. Ignored when `fullSize` is true. */
+    readonly maxHeight: _angular_core.InputSignal<string>;
+    /** When true, every row is shown at once and the body never scrolls; `maxHeight` is ignored. */
+    readonly fullSize: _angular_core.InputSignal<boolean>;
+    /** Single-select filter toggles shown in the header; at most three are rendered. */
+    readonly filters: _angular_core.InputSignal<TimelineFilterOption[]>;
+    /** Message shown when no periods are provided. Nothing renders when it is empty. */
+    readonly emptyMessage: _angular_core.InputSignal<string>;
+    /** Currently selected period. Two-way bindable via `[(selectedPeriod)]`. */
+    readonly selectedPeriod: _angular_core.ModelSignal<TimelinePeriod | undefined>;
+    /** Value of the currently active filter, or `undefined` when none. Two-way bindable. */
+    readonly activeFilter: _angular_core.ModelSignal<string | undefined>;
+    /** Emits the active filter value whenever the selection changes. */
+    readonly filterChange: _angular_core.OutputEmitterRef<string | undefined>;
+    /**
+     * Emits the unit shown on the lower axis whenever the period view changes:
+     * `'months'` in the year view, or `'days'` when a single month is focused.
+     */
+    readonly axisUnitChange: _angular_core.OutputEmitterRef<"months" | "days">;
+    protected readonly monthsByYear: _angular_core.Signal<Map<number, {
+        month: number;
+        widthPercent: number;
+    }[]>>;
+    protected readonly tooltipInfo: _angular_core.WritableSignal<TooltipInfo>;
+    protected readonly tooltipId: string;
+    protected readonly tooltipPositions: ConnectedPosition[];
+    protected readonly changeRange: _angular_core.WritableSignal<number>;
+    protected readonly activeType: _angular_core.WritableSignal<string | undefined>;
+    protected readonly monthMode: _angular_core.WritableSignal<boolean>;
+    private readonly locale;
+    private readonly shortMonthFormat;
+    private readonly longMonthFormat;
+    protected readonly focusedDate: _angular_core.WritableSignal<{
+        year: number;
+        month: number;
+    }>;
+    constructor();
+    protected readonly scrollMaxHeight: _angular_core.Signal<string | null>;
+    protected readonly plotHeightPx: _angular_core.Signal<number>;
+    private readonly fullRange;
+    private readonly totalYears;
+    private readonly maxOffset;
+    private readonly offset;
+    protected readonly displayRange: _angular_core.Signal<{
+        beginYear: number;
+        endYear: number;
+    } | null>;
+    protected readonly canPrevious: _angular_core.Signal<boolean>;
+    protected readonly canNext: _angular_core.Signal<boolean>;
+    protected readonly monthList: _angular_core.Signal<{
+        value: string;
+        label: string;
+    }[]>;
+    protected readonly monthLabel: _angular_core.Signal<string>;
+    protected readonly focusedMonthValue: _angular_core.Signal<string>;
+    protected readonly canPreviousMonth: _angular_core.Signal<boolean>;
+    protected readonly canNextMonth: _angular_core.Signal<boolean>;
+    protected readonly years: _angular_core.Signal<number[]>;
+    private readonly displayWindow;
+    protected readonly visiblePeriods: _angular_core.Signal<TimelinePeriod[]>;
+    protected readonly displayedRows: _angular_core.Signal<TimelineBar[][]>;
+    protected readonly focusedMonthDays: _angular_core.Signal<number[]>;
+    protected readonly dayWidthPercent: _angular_core.Signal<number>;
+    protected readonly sortedLegend: _angular_core.Signal<TimelineLegendItem[]>;
+    protected readonly visibleFilters: _angular_core.Signal<TimelineFilterOption[]>;
+    protected getLegend(type?: string): TimelineLegendItem | undefined;
+    protected colorHex(color?: TimelineColor): string;
+    private colorOf;
+    protected periodRange(period?: TimelinePeriod): string;
+    protected nextYear(): void;
+    protected previousYear(): void;
+    protected onPeriodChange(value: string | number): void;
+    protected goToMonth(value: string): void;
+    protected previousMonth(): void;
+    protected nextMonth(): void;
+    protected onFilterChange(value: string | undefined): void;
+    protected selectPeriod(period?: TimelinePeriod): void;
+    protected onLegendSelect(item: TimelineLegendItem): void;
+    protected isActive(period?: TimelinePeriod): boolean;
+    protected showPeriodTooltip(period?: TimelinePeriod, origin?: CdkOverlayOrigin): void;
+    protected hidePeriodTooltip(): void;
+    protected isTooltipOpenFor(period?: TimelinePeriod): boolean;
+    protected ariaLabel(period?: TimelinePeriod): string | null;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<OnemrvaTimelineComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OnemrvaTimelineComponent, "onemrva-timeline", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "periods": { "alias": "periods"; "required": false; "isSignal": true; }; "legend": { "alias": "legend"; "required": false; "isSignal": true; }; "fixedYearCount": { "alias": "fixedYearCount"; "required": false; "isSignal": true; }; "yearOptions": { "alias": "yearOptions"; "required": false; "isSignal": true; }; "showMonthPicker": { "alias": "showMonthPicker"; "required": false; "isSignal": true; }; "showMonths": { "alias": "showMonths"; "required": false; "isSignal": true; }; "showLabels": { "alias": "showLabels"; "required": false; "isSignal": true; }; "showTooltip": { "alias": "showTooltip"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "fullSize": { "alias": "fullSize"; "required": false; "isSignal": true; }; "filters": { "alias": "filters"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "selectedPeriod": { "alias": "selectedPeriod"; "required": false; "isSignal": true; }; "activeFilter": { "alias": "activeFilter"; "required": false; "isSignal": true; }; }, { "fixedYearCount": "fixedYearCountChange"; "selectedPeriod": "selectedPeriodChange"; "activeFilter": "activeFilterChange"; "filterChange": "filterChange"; "axisUnitChange": "axisUnitChange"; }, never, never, true, never>;
+}
+interface TooltipInfo {
+    visible: boolean;
+    period?: TimelinePeriod;
+    origin?: CdkOverlayOrigin;
+}
+
+declare class OnemrvaTimelineModule {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<OnemrvaTimelineModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<OnemrvaTimelineModule, never, [typeof OnemrvaTimelineComponent], [typeof OnemrvaTimelineComponent]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<OnemrvaTimelineModule>;
+}
+
+export { MAX_TIMELINE_FILTERS, OnemrvaTimelineComponent, OnemrvaTimelineModule, TIMELINE_COLORS, TIMELINE_PALETTE };
+export type { TimelineColor, TimelineFilterOption, TimelineLegend, TimelineLegendItem, TimelinePeriod };

package/types/onemrvapublic-design-system.d.ts

@@ -1,4 +1,4 @@
-declare const VERSION = "22.0.0-develop.2";
+declare const VERSION = "22.0.0-develop.21";
 
 declare const ɵɵtsModuleIndicatorApiExtractorWorkaround = true;