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

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

@@ -0,0 +1,563 @@
+import * as i0 from '@angular/core';
+import { input, model, output, computed, signal, inject, LOCALE_ID, effect, ViewEncapsulation, Component, NgModule } from '@angular/core';
+import { TranslatePipe } from '@ngx-translate/core';
+import { MatIcon } from '@angular/material/icon';
+import { MatIconButton } from '@angular/material/button';
+import * as i1 from '@angular/material/button-toggle';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import * as i2 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i3 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import { MatDivider } from '@angular/material/divider';
+import * as i4 from '@angular/cdk/overlay';
+import { OverlayModule } from '@angular/cdk/overlay';
+
+/** All palette tokens in display order. */
+const TIMELINE_COLORS = [
+    'data-1',
+    'data-2',
+    'data-3',
+    'data-4',
+    'data-5',
+    'data-6',
+    'data-7',
+];
+/** Maps each palette token to its hex value. */
+const TIMELINE_PALETTE = {
+    'data-1': '#625d9c',
+    'data-2': '#7f56a2',
+    'data-3': '#9f499e',
+    'data-4': '#be358f',
+    'data-5': '#d71675',
+    'data-6': '#e70054',
+    'data-7': '#eb142a',
+};
+
+/** Maximum filter options the timeline renders; extras are ignored. */
+const MAX_TIMELINE_FILTERS = 3;
+
+const MS_PER_DAY = 1000 * 60 * 60 * 24;
+function limitFilters(filters) {
+    return filters.slice(0, MAX_TIMELINE_FILTERS);
+}
+function daysBetween(a, b) {
+    return Math.max(1, Math.round((b.getTime() - a.getTime()) / MS_PER_DAY));
+}
+function formatDate(date) {
+    const pad = (value) => value.toString().padStart(2, '0');
+    return `${pad(date.getDate())}/${pad(date.getMonth() + 1)}/${date.getFullYear()}`;
+}
+function formatPeriodRange(period) {
+    return `${formatDate(period.beginDate)} - ${formatDate(period.endDate)}`;
+}
+function monthsWithSize(year) {
+    const daysInYear = (new Date(year, 11, 31).getTime() - new Date(year, 0, 1).getTime()) /
+        MS_PER_DAY +
+        1;
+    return Array.from({ length: 12 }, (_, month) => ({
+        month: month + 1,
+        widthPercent: (new Date(year, month + 1, 0).getDate() / daysInYear) * 100,
+    }));
+}
+function fullTimelineRange(periods) {
+    if (!periods.length)
+        return null;
+    const minBegin = Math.min(...periods.map(p => p.beginDate.getTime()));
+    const maxEnd = Math.max(...periods.map(p => p.endDate.getTime()));
+    return {
+        baseBeginYear: new Date(minBegin).getFullYear(),
+        baseEndYear: new Date(maxEnd).getFullYear(),
+    };
+}
+function splitIntoRows(periods) {
+    const rows = [];
+    const sorted = [...periods].sort((a, b) => a.beginDate.getTime() - b.beginDate.getTime());
+    for (const period of sorted) {
+        const row = rows.find(r => r[r.length - 1].endDate.getTime() <= period.beginDate.getTime());
+        if (row) {
+            row.push(period);
+        }
+        else {
+            rows.push([period]);
+        }
+    }
+    return rows;
+}
+function buildRow(periods, range, colorOf) {
+    if (!periods.length)
+        return [];
+    const result = [];
+    const { begin, end } = range;
+    if (periods[0].beginDate > begin) {
+        result.push(gapBar(begin, periods[0].beginDate));
+    }
+    let previous = null;
+    for (const period of periods) {
+        if (previous) {
+            result.push(gapBar(previous.endDate, period.beginDate));
+        }
+        result.push(periodBar(period, begin, end, colorOf(period)));
+        previous = period;
+    }
+    if (previous && previous.endDate < end) {
+        result.push(gapBar(previous.endDate, end));
+    }
+    return result;
+}
+function gapBar(from, to) {
+    return bar(undefined, daysBetween(from, to), undefined, `gap-${from.getTime()}-${to.getTime()}`);
+}
+function periodBar(period, begin, end, color) {
+    const start = Math.max(begin.getTime(), period.beginDate.getTime());
+    const stop = Math.min(end.getTime(), period.endDate.getTime());
+    return bar(period, daysBetween(new Date(start), new Date(stop)), color, period.id);
+}
+function bar(period, diff, color, trackById) {
+    const classes = ['item'];
+    if (period)
+        classes.push('period', 'cursor');
+    if (period?.disabled)
+        classes.push('disabled');
+    return {
+        class: classes.join(' '),
+        style: `flex: ${diff} 1 0${color ? `; background-color: ${color}` : ''}`,
+        period,
+        trackById,
+    };
+}
+
+let nextTooltipId = 0;
+/**
+ * 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"
+ * />
+ * ```
+ */
+class OnemrvaTimelineComponent {
+    constructor() {
+        this.fallbackColor = '#e5e5e5';
+        this.rowHeightPx = 56;
+        this.plotPaddingPx = 16;
+        this.axesHeightPx = 56;
+        /** Optional heading shown above the visible year range. */
+        this.title = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+        /** Periods to plot on the timeline. */
+        this.periods = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "periods" }] : /* istanbul ignore next */ []));
+        /** Legend entries that map a period `type` to its label and color. */
+        this.legend = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "legend" }] : /* istanbul ignore next */ []));
+        /** Size, in years, of the visible window; two-way bindable via the period dropdown. */
+        this.fixedYearCount = model(5, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "fixedYearCount" }] : /* istanbul ignore next */ []));
+        /** Year-window sizes offered by the period dropdown. */
+        this.yearOptions = input([1, 5, 10], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "yearOptions" }] : /* istanbul ignore next */ []));
+        /** When true, the period dropdown offers a "Month" option. */
+        this.showMonthPicker = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showMonthPicker" }] : /* istanbul ignore next */ []));
+        /** Whether month numbers are shown under each year (only when the window spans at most 5 years). */
+        this.showMonths = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showMonths" }] : /* istanbul ignore next */ []));
+        /** Whether period labels are rendered inside the bars. */
+        this.showLabels = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showLabels" }] : /* istanbul ignore next */ []));
+        /** Whether the hover popup with period details is shown. */
+        this.showTooltip = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showTooltip" }] : /* istanbul ignore next */ []));
+        /** 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. */
+        this.maxHeight = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "maxHeight" }] : /* istanbul ignore next */ []));
+        /** When true, every row is shown at once and the body never scrolls; `maxHeight` is ignored. */
+        this.fullSize = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "fullSize" }] : /* istanbul ignore next */ []));
+        /** Single-select filter toggles shown in the header; at most three are rendered. */
+        this.filters = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filters" }] : /* istanbul ignore next */ []));
+        /** Message shown when no periods are provided. Nothing renders when it is empty. */
+        this.emptyMessage = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []));
+        /** Currently selected period. Two-way bindable via `[(selectedPeriod)]`. */
+        this.selectedPeriod = model(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "selectedPeriod" }] : /* istanbul ignore next */ []));
+        /** Value of the currently active filter, or `undefined` when none. Two-way bindable. */
+        this.activeFilter = model(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activeFilter" }] : /* istanbul ignore next */ []));
+        /** Emits the active filter value whenever the selection changes. */
+        this.filterChange = output();
+        /**
+         * 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.
+         */
+        this.axisUnitChange = output();
+        this.monthsByYear = computed(() => {
+            const map = new Map();
+            for (const year of this.years()) {
+                map.set(year, monthsWithSize(year));
+            }
+            return map;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "monthsByYear" }] : /* istanbul ignore next */ []));
+        this.tooltipInfo = signal({ visible: false }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tooltipInfo" }] : /* istanbul ignore next */ []));
+        this.tooltipId = `onemrva-timeline-tooltip-${nextTooltipId++}`;
+        this.tooltipPositions = [
+            {
+                originX: 'center',
+                originY: 'bottom',
+                overlayX: 'center',
+                overlayY: 'top',
+                offsetY: 15,
+            },
+        ];
+        this.changeRange = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "changeRange" }] : /* istanbul ignore next */ []));
+        this.activeType = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activeType" }] : /* istanbul ignore next */ []));
+        this.monthMode = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "monthMode" }] : /* istanbul ignore next */ []));
+        this.locale = inject(LOCALE_ID);
+        this.shortMonthFormat = new Intl.DateTimeFormat(this.locale, {
+            month: 'short',
+        });
+        this.longMonthFormat = new Intl.DateTimeFormat(this.locale, {
+            month: 'long',
+        });
+        this.focusedDate = signal({
+            year: 0,
+            month: 0,
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "focusedDate" }] : /* istanbul ignore next */ []));
+        this.scrollMaxHeight = computed(() => {
+            if (this.fullSize())
+                return null;
+            const raw = this.maxHeight().trim();
+            const match = /^(\d+)px$/.exec(raw);
+            if (!match)
+                return raw || null;
+            const middle = Number(match[1]) - this.axesHeightPx;
+            if (middle < this.rowHeightPx)
+                return raw;
+            const rows = Math.floor(middle / this.rowHeightPx);
+            return `${rows * this.rowHeightPx + this.axesHeightPx}px`;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "scrollMaxHeight" }] : /* istanbul ignore next */ []));
+        this.plotHeightPx = computed(() => this.displayedRows().length * this.rowHeightPx + this.plotPaddingPx, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "plotHeightPx" }] : /* istanbul ignore next */ []));
+        this.fullRange = computed(() => fullTimelineRange(this.periods()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "fullRange" }] : /* istanbul ignore next */ []));
+        this.totalYears = computed(() => {
+            const range = this.fullRange();
+            return range ? range.baseEndYear - range.baseBeginYear + 1 : 0;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "totalYears" }] : /* istanbul ignore next */ []));
+        this.maxOffset = computed(() => Math.max(0, this.totalYears() - this.fixedYearCount()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "maxOffset" }] : /* istanbul ignore next */ []));
+        this.offset = computed(() => Math.min(Math.max(this.changeRange(), 0), this.maxOffset()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "offset" }] : /* istanbul ignore next */ []));
+        this.displayRange = computed(() => {
+            const range = this.fullRange();
+            if (!range)
+                return null;
+            if (this.monthMode()) {
+                const year = this.focusedDate().year;
+                return { beginYear: year, endYear: year };
+            }
+            if (this.fixedYearCount() >= this.totalYears()) {
+                return { beginYear: range.baseBeginYear, endYear: range.baseEndYear };
+            }
+            const beginYear = range.baseBeginYear + this.offset();
+            return { beginYear, endYear: beginYear + this.fixedYearCount() - 1 };
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "displayRange" }] : /* istanbul ignore next */ []));
+        this.canPrevious = computed(() => this.fixedYearCount() < this.totalYears() && this.offset() > 0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "canPrevious" }] : /* istanbul ignore next */ []));
+        this.canNext = computed(() => this.fixedYearCount() < this.totalYears() &&
+            this.offset() < this.maxOffset(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "canNext" }] : /* istanbul ignore next */ []));
+        this.monthList = computed(() => {
+            const range = this.fullRange();
+            if (!range)
+                return [];
+            const list = [];
+            for (let year = range.baseBeginYear; year <= range.baseEndYear; year++) {
+                for (let month = 1; month <= 12; month++) {
+                    list.push({
+                        value: `${year}-${String(month).padStart(2, '0')}`,
+                        label: `${this.shortMonthFormat.format(new Date(year, month - 1, 1))} ${year}`,
+                    });
+                }
+            }
+            return list;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "monthList" }] : /* istanbul ignore next */ []));
+        this.monthLabel = computed(() => {
+            const focused = this.focusedDate();
+            return `${this.longMonthFormat.format(new Date(focused.year, focused.month, 1))} ${focused.year}`;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "monthLabel" }] : /* istanbul ignore next */ []));
+        this.focusedMonthValue = computed(() => {
+            const focused = this.focusedDate();
+            return `${focused.year}-${String(focused.month + 1).padStart(2, '0')}`;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "focusedMonthValue" }] : /* istanbul ignore next */ []));
+        this.canPreviousMonth = computed(() => {
+            const range = this.fullRange();
+            const focused = this.focusedDate();
+            if (!range)
+                return false;
+            return focused.year > range.baseBeginYear || focused.month > 0;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "canPreviousMonth" }] : /* istanbul ignore next */ []));
+        this.canNextMonth = computed(() => {
+            const range = this.fullRange();
+            const focused = this.focusedDate();
+            if (!range)
+                return false;
+            return focused.year < range.baseEndYear || focused.month < 11;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "canNextMonth" }] : /* istanbul ignore next */ []));
+        this.years = computed(() => {
+            const range = this.displayRange();
+            if (!range)
+                return [];
+            return Array.from({ length: range.endYear - range.beginYear + 1 }, (_, i) => range.beginYear + i);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "years" }] : /* istanbul ignore next */ []));
+        this.displayWindow = computed(() => {
+            const range = this.displayRange();
+            if (!range)
+                return null;
+            if (this.monthMode()) {
+                const { year, month } = this.focusedDate();
+                return {
+                    begin: new Date(year, month, 1),
+                    end: new Date(year, month + 1, 0),
+                };
+            }
+            return {
+                begin: new Date(range.beginYear, 0, 1),
+                end: new Date(range.endYear, 11, 31),
+            };
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "displayWindow" }] : /* istanbul ignore next */ []));
+        this.visiblePeriods = computed(() => {
+            const bounds = this.displayWindow();
+            if (!bounds)
+                return [];
+            return this.periods()
+                .filter(p => p.endDate >= bounds.begin && p.beginDate <= bounds.end)
+                .sort((a, b) => a.beginDate.getTime() - b.beginDate.getTime());
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "visiblePeriods" }] : /* istanbul ignore next */ []));
+        this.displayedRows = computed(() => {
+            const bounds = this.displayWindow();
+            const periods = this.visiblePeriods();
+            if (!bounds || !periods.length)
+                return [];
+            return splitIntoRows(periods).map(row => buildRow(row, bounds, period => this.colorOf(period)));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "displayedRows" }] : /* istanbul ignore next */ []));
+        this.focusedMonthDays = computed(() => {
+            const { year, month } = this.focusedDate();
+            const days = new Date(year, month + 1, 0).getDate();
+            return Array.from({ length: days }, (_, i) => i + 1);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "focusedMonthDays" }] : /* istanbul ignore next */ []));
+        this.dayWidthPercent = computed(() => {
+            const count = this.focusedMonthDays().length;
+            return count ? 100 / count : 0;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dayWidthPercent" }] : /* istanbul ignore next */ []));
+        this.sortedLegend = computed(() => {
+            const seen = new Set();
+            return (this.legend() ?? [])
+                .filter(item => {
+                if (seen.has(item.type))
+                    return false;
+                seen.add(item.type);
+                return true;
+            })
+                .sort((a, b) => a.label.localeCompare(b.label));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "sortedLegend" }] : /* istanbul ignore next */ []));
+        this.visibleFilters = computed(() => limitFilters(this.filters()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "visibleFilters" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            this.periods();
+            this.fixedYearCount();
+            this.changeRange.set(0);
+        });
+    }
+    getLegend(type) {
+        if (!type)
+            return undefined;
+        return this.legend()?.find(l => l.type === type);
+    }
+    colorHex(color) {
+        return color ? TIMELINE_PALETTE[color] : this.fallbackColor;
+    }
+    colorOf(period) {
+        return this.colorHex(this.getLegend(period.type)?.color);
+    }
+    periodRange(period) {
+        return period ? formatPeriodRange(period) : '';
+    }
+    nextYear() {
+        this.changeRange.set(Math.min(this.maxOffset(), this.offset() + 1));
+    }
+    previousYear() {
+        this.changeRange.set(Math.max(0, this.offset() - 1));
+    }
+    onPeriodChange(value) {
+        if (value === 'month') {
+            const range = this.fullRange();
+            const periods = this.periods();
+            const earliest = periods.length
+                ? periods.reduce((a, b) => (a.beginDate <= b.beginDate ? a : b))
+                : null;
+            this.focusedDate.set({
+                year: earliest?.beginDate.getFullYear() ?? range?.baseBeginYear ?? 0,
+                month: earliest?.beginDate.getMonth() ?? 0,
+            });
+            this.monthMode.set(true);
+            this.axisUnitChange.emit('days');
+        }
+        else {
+            this.monthMode.set(false);
+            this.changeRange.set(0);
+            this.fixedYearCount.set(Number(value));
+            this.axisUnitChange.emit('months');
+        }
+    }
+    goToMonth(value) {
+        if (!value)
+            return;
+        const year = Number(value.slice(0, 4));
+        const month = Number(value.slice(5, 7)) - 1;
+        if (Number.isNaN(year) || Number.isNaN(month))
+            return;
+        this.focusedDate.set({ year, month });
+    }
+    previousMonth() {
+        const { year, month } = this.focusedDate();
+        if (!this.canPreviousMonth())
+            return;
+        this.focusedDate.set(month > 0 ? { year, month: month - 1 } : { year: year - 1, month: 11 });
+    }
+    nextMonth() {
+        const { year, month } = this.focusedDate();
+        if (!this.canNextMonth())
+            return;
+        this.focusedDate.set(month < 11 ? { year, month: month + 1 } : { year: year + 1, month: 0 });
+    }
+    onFilterChange(value) {
+        this.activeFilter.set(value);
+        this.filterChange.emit(value);
+    }
+    selectPeriod(period) {
+        if (!period || period.disabled)
+            return;
+        this.activeType.set(undefined);
+        this.selectedPeriod.set(period);
+    }
+    onLegendSelect(item) {
+        const match = this.periods().find(p => p.type === item.type && !p.disabled);
+        if (!match)
+            return;
+        if (this.monthMode()) {
+            this.focusedDate.set({
+                year: match.beginDate.getFullYear(),
+                month: match.beginDate.getMonth(),
+            });
+        }
+        else {
+            const range = this.fullRange();
+            if (range) {
+                const target = match.beginDate.getFullYear() - range.baseBeginYear;
+                this.changeRange.set(Math.min(Math.max(target, 0), this.maxOffset()));
+            }
+        }
+        this.activeType.set(item.type);
+        this.selectedPeriod.set(match);
+    }
+    isActive(period) {
+        if (!period || period.disabled)
+            return false;
+        const type = this.activeType();
+        if (type && period.type === type)
+            return true;
+        return period.id === this.selectedPeriod()?.id;
+    }
+    showPeriodTooltip(period, origin) {
+        if (!period)
+            return;
+        this.tooltipInfo.set({ visible: true, period, origin });
+    }
+    hidePeriodTooltip() {
+        this.tooltipInfo.set({ visible: false });
+    }
+    isTooltipOpenFor(period) {
+        const info = this.tooltipInfo();
+        return info.visible && !!period && info.period?.id === period.id;
+    }
+    ariaLabel(period) {
+        if (!period)
+            return null;
+        const name = period.label ?? period.type ?? '';
+        return [name, this.periodRange(period)].filter(Boolean).join(', ') || null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: OnemrvaTimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: OnemrvaTimelineComponent, isStandalone: true, selector: "onemrva-timeline", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, periods: { classPropertyName: "periods", publicName: "periods", isSignal: true, isRequired: false, transformFunction: null }, legend: { classPropertyName: "legend", publicName: "legend", isSignal: true, isRequired: false, transformFunction: null }, fixedYearCount: { classPropertyName: "fixedYearCount", publicName: "fixedYearCount", isSignal: true, isRequired: false, transformFunction: null }, yearOptions: { classPropertyName: "yearOptions", publicName: "yearOptions", isSignal: true, isRequired: false, transformFunction: null }, showMonthPicker: { classPropertyName: "showMonthPicker", publicName: "showMonthPicker", isSignal: true, isRequired: false, transformFunction: null }, showMonths: { classPropertyName: "showMonths", publicName: "showMonths", isSignal: true, isRequired: false, transformFunction: null }, showLabels: { classPropertyName: "showLabels", publicName: "showLabels", isSignal: true, isRequired: false, transformFunction: null }, showTooltip: { classPropertyName: "showTooltip", publicName: "showTooltip", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, fullSize: { classPropertyName: "fullSize", publicName: "fullSize", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, selectedPeriod: { classPropertyName: "selectedPeriod", publicName: "selectedPeriod", isSignal: true, isRequired: false, transformFunction: null }, activeFilter: { classPropertyName: "activeFilter", publicName: "activeFilter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fixedYearCount: "fixedYearCountChange", selectedPeriod: "selectedPeriodChange", activeFilter: "activeFilterChange", filterChange: "filterChange", axisUnitChange: "axisUnitChange" }, host: { properties: { "attr.title": "null" } }, ngImport: i0, template: "<div class=\"container\">\n  @if (periods().length !== 0) {\n    <div class=\"navigation\">\n      <div class=\"nav-info\">\n        @if (title()) {\n          <p class=\"timeline-title\">{{ title() }}</p>\n        }\n        <span class=\"timeline-range\">\n          @if (monthMode()) {\n            {{ monthLabel() }}\n          } @else {\n            {{ displayRange()?.beginYear }} - {{ displayRange()?.endYear }}\n          }\n        </span>\n      </div>\n\n      <div class=\"nav-controls\">\n        <div class=\"nav-pager\">\n          <button\n            mat-icon-button\n            data-cy=\"timeline-prev\"\n            [attr.aria-label]=\"\n              (monthMode() ? 'timeline.previousMonth' : 'timeline.previousYear')\n                | translate\n            \"\n            [disabled]=\"monthMode() ? !canPreviousMonth() : !canPrevious()\"\n            (click)=\"monthMode() ? previousMonth() : previousYear()\"\n          >\n            <mat-icon>arrow_back_ios</mat-icon>\n          </button>\n          <button\n            mat-icon-button\n            data-cy=\"timeline-next\"\n            [attr.aria-label]=\"\n              (monthMode() ? 'timeline.nextMonth' : 'timeline.nextYear')\n                | translate\n            \"\n            [disabled]=\"monthMode() ? !canNextMonth() : !canNext()\"\n            (click)=\"monthMode() ? nextMonth() : nextYear()\"\n          >\n            <mat-icon>arrow_forward_ios</mat-icon>\n          </button>\n        </div>\n\n        <mat-form-field\n          class=\"timeline-field timeline-period\"\n          appearance=\"outline\"\n          subscriptSizing=\"dynamic\"\n        >\n          <mat-label>{{ 'timeline.period' | translate }}</mat-label>\n          <mat-select\n            [attr.aria-label]=\"'timeline.period' | translate\"\n            [value]=\"monthMode() ? 'month' : fixedYearCount()\"\n            (selectionChange)=\"onPeriodChange($event.value)\"\n          >\n            @if (showMonthPicker()) {\n              <mat-option value=\"month\" data-cy=\"timeline-period-month\">\n                {{ 'timeline.month' | translate }}\n              </mat-option>\n            }\n            @for (option of yearOptions(); track option) {\n              <mat-option\n                [value]=\"option\"\n                [attr.data-cy]=\"'timeline-period-' + option\"\n              >\n                {{ option }}\n                {{\n                  (option === 1 ? 'timeline.year' : 'timeline.years')\n                    | translate\n                }}\n              </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n\n        @if (showMonthPicker() && monthMode()) {\n          <mat-form-field\n            class=\"timeline-field timeline-month-jump\"\n            appearance=\"outline\"\n            subscriptSizing=\"dynamic\"\n          >\n            <mat-label>{{ 'timeline.goToMonth' | translate }}</mat-label>\n            <mat-select\n              data-cy=\"timeline-month-jump\"\n              [attr.aria-label]=\"'timeline.goToMonth' | translate\"\n              [value]=\"focusedMonthValue()\"\n              (selectionChange)=\"goToMonth($event.value)\"\n            >\n              @for (month of monthList(); track month.value) {\n                <mat-option [value]=\"month.value\">{{ month.label }}</mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        }\n\n        @if (visibleFilters().length) {\n          <mat-divider vertical class=\"nav-divider\" />\n          <mat-button-toggle-group\n            class=\"timeline-filters\"\n            [value]=\"activeFilter()\"\n            (change)=\"onFilterChange($any($event).value)\"\n          >\n            @for (filter of visibleFilters(); track filter.value) {\n              <mat-button-toggle\n                class=\"filter-toggle\"\n                [value]=\"filter.value\"\n                [attr.aria-label]=\"filter.label\"\n              >\n                {{ filter.label }}\n              </mat-button-toggle>\n            }\n          </mat-button-toggle-group>\n        }\n      </div>\n    </div>\n\n    <div\n      class=\"timeline-scroll\"\n      [class.full-size]=\"fullSize()\"\n      [style.max-height]=\"scrollMaxHeight()\"\n    >\n      <div class=\"timelineContainer\">\n        <div class=\"timeline-years\">\n          @for (year of years(); track 'axis-' + year) {\n            <div class=\"axis-col\">{{ monthMode() ? monthLabel() : year }}</div>\n          }\n        </div>\n\n        <div class=\"timeline-plot\" [style.height.px]=\"plotHeightPx()\">\n          <div class=\"timeline-grid\">\n            @for (year of years(); track 'grid-' + year) {\n              <div class=\"grid-col\"></div>\n            }\n          </div>\n\n          <div class=\"timeline\">\n            @for (row of displayedRows(); track $index) {\n              <div class=\"timeline-row\">\n                @for (item of row; track item.trackById) {\n                  <div\n                    [class]=\"item.class\"\n                    [class.selected]=\"isActive(item.period)\"\n                    [style]=\"item.style\"\n                    [attr.role]=\"\n                      item.period && !item.period.disabled ? 'button' : null\n                    \"\n                    [attr.tabindex]=\"\n                      item.period && !item.period.disabled ? 0 : null\n                    \"\n                    [attr.aria-label]=\"ariaLabel(item?.period)\"\n                    [attr.aria-describedby]=\"\n                      isTooltipOpenFor(item?.period) ? tooltipId : null\n                    \"\n                    (mouseenter)=\"showPeriodTooltip(item?.period, origin)\"\n                    (mouseleave)=\"hidePeriodTooltip()\"\n                    (focus)=\"showPeriodTooltip(item?.period, origin)\"\n                    (blur)=\"hidePeriodTooltip()\"\n                    (click)=\"selectPeriod(item?.period)\"\n                    (keydown.enter)=\"selectPeriod(item?.period)\"\n                    (keydown.space)=\"selectPeriod(item?.period)\"\n                    (keydown.escape)=\"hidePeriodTooltip()\"\n                    cdkOverlayOrigin\n                    #origin=\"cdkOverlayOrigin\"\n                  >\n                    @if (showLabels() && item.period?.label) {\n                      <span class=\"period-label\">{{ item.period.label }}</span>\n                    }\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        </div>\n\n        @if (showMonths() && years().length <= 5) {\n          <div class=\"timeline-months\">\n            @if (monthMode()) {\n              <div class=\"months-col\">\n                @for (day of focusedMonthDays(); track day) {\n                  <span class=\"month\" [style.width.%]=\"dayWidthPercent()\">{{\n                    day\n                  }}</span>\n                }\n              </div>\n            } @else {\n              @for (year of years(); track 'months-' + year) {\n                <div class=\"months-col\">\n                  @for (\n                    month of monthsByYear().get(year) ?? [];\n                    track month.month\n                  ) {\n                    <span class=\"month\" [style.width.%]=\"month.widthPercent\">{{\n                      month.month\n                    }}</span>\n                  }\n                </div>\n              }\n            }\n          </div>\n        }\n      </div>\n    </div>\n\n    <div class=\"timeline-legend\">\n      @for (legendItem of sortedLegend(); track legendItem) {\n        <button\n          type=\"button\"\n          class=\"legend-item\"\n          [attr.aria-label]=\"\n            'timeline.goTo' | translate: { label: legendItem.label }\n          \"\n          (click)=\"onLegendSelect(legendItem)\"\n        >\n          <span\n            class=\"legend-color\"\n            [style.background-color]=\"colorHex(legendItem.color)\"\n          ></span>\n          <span class=\"legend-label\">{{ legendItem.label }}</span>\n        </button>\n      }\n    </div>\n\n    @if (showTooltip() && tooltipInfo().visible && tooltipInfo().origin) {\n      @let period = tooltipInfo().period;\n      <ng-template\n        cdkConnectedOverlay\n        [cdkConnectedOverlayOrigin]=\"tooltipInfo().origin!\"\n        [cdkConnectedOverlayOpen]=\"true\"\n        [cdkConnectedOverlayPositions]=\"tooltipPositions\"\n      >\n        <div\n          class=\"tooltip\"\n          role=\"tooltip\"\n          [id]=\"tooltipId\"\n          [style.border-color]=\"colorHex(getLegend(period?.type)?.color)\"\n        >\n          <div class=\"tooltip-title\">{{ periodRange(period) }}</div>\n          @if (period?.label) {\n            <div class=\"tooltip-label\">{{ period?.label }}</div>\n          }\n          @if (period?.description) {\n            <div\n              class=\"tooltip-description\"\n              [innerHTML]=\"period?.description\"\n            ></div>\n          }\n        </div>\n      </ng-template>\n    }\n  } @else if (emptyMessage()) {\n    <div class=\"parentDiv\">\n      <p>{{ emptyMessage() }}</p>\n    </div>\n  }\n</div>\n", styles: [".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:#242424}.timeline-range{font-size:14px;color:#242424}.nav-controls{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px}.nav-pager{display:flex;align-items:center;color:#242424}.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}.timeline-scroll::-webkit-scrollbar{width:8px;height:8px}.timeline-scroll::-webkit-scrollbar-track{background:transparent}.timeline-scroll::-webkit-scrollbar-thumb{background:#cfcde0;border-radius:4px}.timeline-scroll::-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:#fff;box-shadow:0 3px 4px -2px #0000001f}.timeline-years .axis-col{flex:1 0 56px;height:25px;line-height:25px;border-right:solid 1px #d7d5ed;border-bottom:solid 1px #d7d5ed;text-align:center;color:#242424}.timeline-years .axis-col:first-child{border-left:solid 1px #d7d5ed}.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 #d7d5ed}.timeline-grid .grid-col:first-child{border-left:solid 1px #d7d5ed}.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:#fff;border-top:solid 1px #d7d5ed;box-shadow:0 -3px 4px -2px #0000001f}.timeline-months .months-col{flex:1 0 56px;height:29px;border-right:solid 1px #d7d5ed;font-size:0;white-space:nowrap}.timeline-months .months-col:first-child{border-left:solid 1px #d7d5ed}.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:40px;margin-bottom:16px;scroll-snap-align:start;will-change:transform}.item{height:40px;min-width:0}.period{display:flex;align-items:center;height:40px;min-width:0;padding:0 8px;border-radius:4px;color:#fff;font-size:14px;overflow:hidden;z-index:200;transition:box-shadow .15s ease,opacity .15s ease}.period-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.period:hover{box-shadow:0 3px 3px #00000052}.period.selected{box-shadow:0 0 0 2px #242424;z-index:250}.period:focus-visible{outline:none;box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 4px #242424;z-index:250}.period.disabled{opacity:.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}.timeline-legend .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}.timeline-legend .legend-item:hover .legend-label{text-decoration:underline}.timeline-legend .legend-item:focus-visible{outline:2px solid #625d9c;outline-offset:1px}.timeline-legend .legend-color{width:16px;height:16px;border-radius:3px}.timeline-legend .legend-label{font-size:14px;color:#242424}.tooltip{position:absolute;transform:translate(-50%);background-color:#fff;border:1px solid #d7d5ed;border-radius:4px;padding:10px 15px;box-shadow:0 4px 8px #0000001a;color:#242424;z-index:999;width:300px;max-width:90vw}.tooltip-title{font-weight:600}.tooltip-label{margin-top:2px}.tooltip-description{margin-top:2px;color:#78767d}@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:.875rem}.timeline-title{font-size:16px}.timeline-legend{margin-top:16px;justify-content:flex-start;gap:8px 16px}}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3.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: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i4.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i4.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: OnemrvaTimelineComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'onemrva-timeline', standalone: true, imports: [
+                        MatIcon,
+                        MatIconButton,
+                        MatButtonToggleModule,
+                        MatFormFieldModule,
+                        MatSelectModule,
+                        MatDivider,
+                        OverlayModule,
+                        TranslatePipe,
+                    ], encapsulation: ViewEncapsulation.Emulated, host: { '[attr.title]': 'null' }, template: "<div class=\"container\">\n  @if (periods().length !== 0) {\n    <div class=\"navigation\">\n      <div class=\"nav-info\">\n        @if (title()) {\n          <p class=\"timeline-title\">{{ title() }}</p>\n        }\n        <span class=\"timeline-range\">\n          @if (monthMode()) {\n            {{ monthLabel() }}\n          } @else {\n            {{ displayRange()?.beginYear }} - {{ displayRange()?.endYear }}\n          }\n        </span>\n      </div>\n\n      <div class=\"nav-controls\">\n        <div class=\"nav-pager\">\n          <button\n            mat-icon-button\n            data-cy=\"timeline-prev\"\n            [attr.aria-label]=\"\n              (monthMode() ? 'timeline.previousMonth' : 'timeline.previousYear')\n                | translate\n            \"\n            [disabled]=\"monthMode() ? !canPreviousMonth() : !canPrevious()\"\n            (click)=\"monthMode() ? previousMonth() : previousYear()\"\n          >\n            <mat-icon>arrow_back_ios</mat-icon>\n          </button>\n          <button\n            mat-icon-button\n            data-cy=\"timeline-next\"\n            [attr.aria-label]=\"\n              (monthMode() ? 'timeline.nextMonth' : 'timeline.nextYear')\n                | translate\n            \"\n            [disabled]=\"monthMode() ? !canNextMonth() : !canNext()\"\n            (click)=\"monthMode() ? nextMonth() : nextYear()\"\n          >\n            <mat-icon>arrow_forward_ios</mat-icon>\n          </button>\n        </div>\n\n        <mat-form-field\n          class=\"timeline-field timeline-period\"\n          appearance=\"outline\"\n          subscriptSizing=\"dynamic\"\n        >\n          <mat-label>{{ 'timeline.period' | translate }}</mat-label>\n          <mat-select\n            [attr.aria-label]=\"'timeline.period' | translate\"\n            [value]=\"monthMode() ? 'month' : fixedYearCount()\"\n            (selectionChange)=\"onPeriodChange($event.value)\"\n          >\n            @if (showMonthPicker()) {\n              <mat-option value=\"month\" data-cy=\"timeline-period-month\">\n                {{ 'timeline.month' | translate }}\n              </mat-option>\n            }\n            @for (option of yearOptions(); track option) {\n              <mat-option\n                [value]=\"option\"\n                [attr.data-cy]=\"'timeline-period-' + option\"\n              >\n                {{ option }}\n                {{\n                  (option === 1 ? 'timeline.year' : 'timeline.years')\n                    | translate\n                }}\n              </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n\n        @if (showMonthPicker() && monthMode()) {\n          <mat-form-field\n            class=\"timeline-field timeline-month-jump\"\n            appearance=\"outline\"\n            subscriptSizing=\"dynamic\"\n          >\n            <mat-label>{{ 'timeline.goToMonth' | translate }}</mat-label>\n            <mat-select\n              data-cy=\"timeline-month-jump\"\n              [attr.aria-label]=\"'timeline.goToMonth' | translate\"\n              [value]=\"focusedMonthValue()\"\n              (selectionChange)=\"goToMonth($event.value)\"\n            >\n              @for (month of monthList(); track month.value) {\n                <mat-option [value]=\"month.value\">{{ month.label }}</mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        }\n\n        @if (visibleFilters().length) {\n          <mat-divider vertical class=\"nav-divider\" />\n          <mat-button-toggle-group\n            class=\"timeline-filters\"\n            [value]=\"activeFilter()\"\n            (change)=\"onFilterChange($any($event).value)\"\n          >\n            @for (filter of visibleFilters(); track filter.value) {\n              <mat-button-toggle\n                class=\"filter-toggle\"\n                [value]=\"filter.value\"\n                [attr.aria-label]=\"filter.label\"\n              >\n                {{ filter.label }}\n              </mat-button-toggle>\n            }\n          </mat-button-toggle-group>\n        }\n      </div>\n    </div>\n\n    <div\n      class=\"timeline-scroll\"\n      [class.full-size]=\"fullSize()\"\n      [style.max-height]=\"scrollMaxHeight()\"\n    >\n      <div class=\"timelineContainer\">\n        <div class=\"timeline-years\">\n          @for (year of years(); track 'axis-' + year) {\n            <div class=\"axis-col\">{{ monthMode() ? monthLabel() : year }}</div>\n          }\n        </div>\n\n        <div class=\"timeline-plot\" [style.height.px]=\"plotHeightPx()\">\n          <div class=\"timeline-grid\">\n            @for (year of years(); track 'grid-' + year) {\n              <div class=\"grid-col\"></div>\n            }\n          </div>\n\n          <div class=\"timeline\">\n            @for (row of displayedRows(); track $index) {\n              <div class=\"timeline-row\">\n                @for (item of row; track item.trackById) {\n                  <div\n                    [class]=\"item.class\"\n                    [class.selected]=\"isActive(item.period)\"\n                    [style]=\"item.style\"\n                    [attr.role]=\"\n                      item.period && !item.period.disabled ? 'button' : null\n                    \"\n                    [attr.tabindex]=\"\n                      item.period && !item.period.disabled ? 0 : null\n                    \"\n                    [attr.aria-label]=\"ariaLabel(item?.period)\"\n                    [attr.aria-describedby]=\"\n                      isTooltipOpenFor(item?.period) ? tooltipId : null\n                    \"\n                    (mouseenter)=\"showPeriodTooltip(item?.period, origin)\"\n                    (mouseleave)=\"hidePeriodTooltip()\"\n                    (focus)=\"showPeriodTooltip(item?.period, origin)\"\n                    (blur)=\"hidePeriodTooltip()\"\n                    (click)=\"selectPeriod(item?.period)\"\n                    (keydown.enter)=\"selectPeriod(item?.period)\"\n                    (keydown.space)=\"selectPeriod(item?.period)\"\n                    (keydown.escape)=\"hidePeriodTooltip()\"\n                    cdkOverlayOrigin\n                    #origin=\"cdkOverlayOrigin\"\n                  >\n                    @if (showLabels() && item.period?.label) {\n                      <span class=\"period-label\">{{ item.period.label }}</span>\n                    }\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        </div>\n\n        @if (showMonths() && years().length <= 5) {\n          <div class=\"timeline-months\">\n            @if (monthMode()) {\n              <div class=\"months-col\">\n                @for (day of focusedMonthDays(); track day) {\n                  <span class=\"month\" [style.width.%]=\"dayWidthPercent()\">{{\n                    day\n                  }}</span>\n                }\n              </div>\n            } @else {\n              @for (year of years(); track 'months-' + year) {\n                <div class=\"months-col\">\n                  @for (\n                    month of monthsByYear().get(year) ?? [];\n                    track month.month\n                  ) {\n                    <span class=\"month\" [style.width.%]=\"month.widthPercent\">{{\n                      month.month\n                    }}</span>\n                  }\n                </div>\n              }\n            }\n          </div>\n        }\n      </div>\n    </div>\n\n    <div class=\"timeline-legend\">\n      @for (legendItem of sortedLegend(); track legendItem) {\n        <button\n          type=\"button\"\n          class=\"legend-item\"\n          [attr.aria-label]=\"\n            'timeline.goTo' | translate: { label: legendItem.label }\n          \"\n          (click)=\"onLegendSelect(legendItem)\"\n        >\n          <span\n            class=\"legend-color\"\n            [style.background-color]=\"colorHex(legendItem.color)\"\n          ></span>\n          <span class=\"legend-label\">{{ legendItem.label }}</span>\n        </button>\n      }\n    </div>\n\n    @if (showTooltip() && tooltipInfo().visible && tooltipInfo().origin) {\n      @let period = tooltipInfo().period;\n      <ng-template\n        cdkConnectedOverlay\n        [cdkConnectedOverlayOrigin]=\"tooltipInfo().origin!\"\n        [cdkConnectedOverlayOpen]=\"true\"\n        [cdkConnectedOverlayPositions]=\"tooltipPositions\"\n      >\n        <div\n          class=\"tooltip\"\n          role=\"tooltip\"\n          [id]=\"tooltipId\"\n          [style.border-color]=\"colorHex(getLegend(period?.type)?.color)\"\n        >\n          <div class=\"tooltip-title\">{{ periodRange(period) }}</div>\n          @if (period?.label) {\n            <div class=\"tooltip-label\">{{ period?.label }}</div>\n          }\n          @if (period?.description) {\n            <div\n              class=\"tooltip-description\"\n              [innerHTML]=\"period?.description\"\n            ></div>\n          }\n        </div>\n      </ng-template>\n    }\n  } @else if (emptyMessage()) {\n    <div class=\"parentDiv\">\n      <p>{{ emptyMessage() }}</p>\n    </div>\n  }\n</div>\n", styles: [".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:#242424}.timeline-range{font-size:14px;color:#242424}.nav-controls{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px}.nav-pager{display:flex;align-items:center;color:#242424}.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}.timeline-scroll::-webkit-scrollbar{width:8px;height:8px}.timeline-scroll::-webkit-scrollbar-track{background:transparent}.timeline-scroll::-webkit-scrollbar-thumb{background:#cfcde0;border-radius:4px}.timeline-scroll::-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:#fff;box-shadow:0 3px 4px -2px #0000001f}.timeline-years .axis-col{flex:1 0 56px;height:25px;line-height:25px;border-right:solid 1px #d7d5ed;border-bottom:solid 1px #d7d5ed;text-align:center;color:#242424}.timeline-years .axis-col:first-child{border-left:solid 1px #d7d5ed}.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 #d7d5ed}.timeline-grid .grid-col:first-child{border-left:solid 1px #d7d5ed}.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:#fff;border-top:solid 1px #d7d5ed;box-shadow:0 -3px 4px -2px #0000001f}.timeline-months .months-col{flex:1 0 56px;height:29px;border-right:solid 1px #d7d5ed;font-size:0;white-space:nowrap}.timeline-months .months-col:first-child{border-left:solid 1px #d7d5ed}.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:40px;margin-bottom:16px;scroll-snap-align:start;will-change:transform}.item{height:40px;min-width:0}.period{display:flex;align-items:center;height:40px;min-width:0;padding:0 8px;border-radius:4px;color:#fff;font-size:14px;overflow:hidden;z-index:200;transition:box-shadow .15s ease,opacity .15s ease}.period-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.period:hover{box-shadow:0 3px 3px #00000052}.period.selected{box-shadow:0 0 0 2px #242424;z-index:250}.period:focus-visible{outline:none;box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 4px #242424;z-index:250}.period.disabled{opacity:.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}.timeline-legend .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}.timeline-legend .legend-item:hover .legend-label{text-decoration:underline}.timeline-legend .legend-item:focus-visible{outline:2px solid #625d9c;outline-offset:1px}.timeline-legend .legend-color{width:16px;height:16px;border-radius:3px}.timeline-legend .legend-label{font-size:14px;color:#242424}.tooltip{position:absolute;transform:translate(-50%);background-color:#fff;border:1px solid #d7d5ed;border-radius:4px;padding:10px 15px;box-shadow:0 4px 8px #0000001a;color:#242424;z-index:999;width:300px;max-width:90vw}.tooltip-title{font-weight:600}.tooltip-label{margin-top:2px}.tooltip-description{margin-top:2px;color:#78767d}@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:.875rem}.timeline-title{font-size:16px}.timeline-legend{margin-top:16px;justify-content:flex-start;gap:8px 16px}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], periods: [{ type: i0.Input, args: [{ isSignal: true, alias: "periods", required: false }] }], legend: [{ type: i0.Input, args: [{ isSignal: true, alias: "legend", required: false }] }], fixedYearCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "fixedYearCount", required: false }] }, { type: i0.Output, args: ["fixedYearCountChange"] }], yearOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "yearOptions", required: false }] }], showMonthPicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMonthPicker", required: false }] }], showMonths: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMonths", required: false }] }], showLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabels", required: false }] }], showTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTooltip", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], fullSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullSize", required: false }] }], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], selectedPeriod: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedPeriod", required: false }] }, { type: i0.Output, args: ["selectedPeriodChange"] }], activeFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeFilter", required: false }] }, { type: i0.Output, args: ["activeFilterChange"] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }], axisUnitChange: [{ type: i0.Output, args: ["axisUnitChange"] }] } });
+
+class OnemrvaTimelineModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: OnemrvaTimelineModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.1", ngImport: i0, type: OnemrvaTimelineModule, imports: [OnemrvaTimelineComponent], exports: [OnemrvaTimelineComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: OnemrvaTimelineModule, imports: [OnemrvaTimelineComponent] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: OnemrvaTimelineModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [],
+                    imports: [OnemrvaTimelineComponent],
+                    exports: [OnemrvaTimelineComponent],
+                }]
+        }] });
+
+/*
+ * Public API Surface of timeline
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MAX_TIMELINE_FILTERS, OnemrvaTimelineComponent, OnemrvaTimelineModule, TIMELINE_COLORS, TIMELINE_PALETTE };
+//# sourceMappingURL=onemrvapublic-design-system-timeline.mjs.map