@onemrvapublic/design-system 22.0.0-develop.14 → 22.0.0-develop.16

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

@@ -520,10 +520,10 @@ class OnemrvaTimelineComponent {
         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" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: OnemrvaTimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: OnemrvaTimelineComponent, decorators: [{
             type: Component,
             args: [{ selector: 'onemrva-timeline', standalone: true, imports: [
                         MatIcon,
@@ -538,11 +538,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
         }], 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] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: OnemrvaTimelineModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.4", ngImport: i0, type: OnemrvaTimelineModule, imports: [OnemrvaTimelineComponent], exports: [OnemrvaTimelineComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: OnemrvaTimelineModule, imports: [OnemrvaTimelineComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: OnemrvaTimelineModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: OnemrvaTimelineModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [],

package/fesm2022/onemrvapublic-design-system.mjs

@@ -1,5 +1,5 @@
 // Auto-generated — do not edit
-const VERSION = '22.0.0-develop.14';
+const VERSION = '22.0.0-develop.16';
 
 const ɵɵtsModuleIndicatorApiExtractorWorkaround = true;
 

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

@@ -1 +1 @@
-{"version":3,"file":"onemrvapublic-design-system.mjs","sources":["../../../../projects/onemrva/design-system/version.ts","../../../../projects/onemrva/design-system/index.ts","../../../../projects/onemrva/design-system/onemrvapublic-design-system.ts"],"sourcesContent":["// Auto-generated — do not edit\nexport const VERSION = '22.0.0-develop.14';\n","export { VERSION } from './version';\n\nexport const ɵɵtsModuleIndicatorApiExtractorWorkaround = true;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"AAAA;AACO,MAAM,OAAO,GAAG;;ACChB,MAAM,yCAAyC,GAAG;;ACFzD;;AAEG;;;;"}
+{"version":3,"file":"onemrvapublic-design-system.mjs","sources":["../../../../projects/onemrva/design-system/version.ts","../../../../projects/onemrva/design-system/index.ts","../../../../projects/onemrva/design-system/onemrvapublic-design-system.ts"],"sourcesContent":["// Auto-generated — do not edit\nexport const VERSION = '22.0.0-develop.16';\n","export { VERSION } from './version';\n\nexport const ɵɵtsModuleIndicatorApiExtractorWorkaround = true;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"AAAA;AACO,MAAM,OAAO,GAAG;;ACChB,MAAM,yCAAyC,GAAG;;ACFzD;;AAEG;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onemrvapublic/design-system",
-  "version": "22.0.0-develop.14",
+  "version": "22.0.0-develop.16",
   "description": "Design System Onem/Rva without theme included",
   "publishConfig": {
     "access": "public"

package/theme/palettes/_palette.scss

@@ -82,7 +82,7 @@ $palette: (
     94: #f3edf7,
     95: #f5f0f8,
     96: #f7f2fa,
-    98: #ffffff,
+    98: #fdfcfe,
     99: #ffffff,
     100: #ffffff,
   ),

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.d.ts

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