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

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.6";
+declare const VERSION = "22.0.0-develop.7";
 
 declare const ɵɵtsModuleIndicatorApiExtractorWorkaround = true;