@rivet-health/design-system 28.11.0 → 28.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/esm2020/lib/input/date/date.component.mjs +2 -2
  2. package/esm2020/lib/input/date-range/date-range.component.mjs +2 -2
  3. package/fesm2015/rivet-health-design-system.mjs +4 -4
  4. package/fesm2015/rivet-health-design-system.mjs.map +1 -1
  5. package/fesm2020/rivet-health-design-system.mjs +4 -4
  6. package/fesm2020/rivet-health-design-system.mjs.map +1 -1
  7. package/package.json +1 -1
package/esm2020/lib/input/date/date.component.mjs CHANGED
@@ -30,10 +30,10 @@ export class DateComponent extends InputLabelComponent {
30
30
  }
31
31
  }
32
32
  DateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DateComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
33
- DateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DateComponent, selector: "riv-date", inputs: { min: "min", max: "max", value: "value", placeholder: "placeholder", disabled: "disabled", open: "open" }, outputs: { valueChange: "valueChange" }, usesInheritance: true, ngImport: i0, template: "<riv-input-label\n [label]=\"label\"\n [help]=\"help\"\n [required]=\"required\"\n [labelActionText]=\"labelActionText\"\n (labelAction)=\"labelAction.emit($event)\"\n>\n <button\n #trigger\n class=\"trigger\"\n (click)=\"open$.next(true)\"\n [disabled]=\"disabled\"\n type=\"button\"\n >\n <ng-container *ngIf=\"value; else placeholderValue\">\n <span class=\"value\">{{ value | rivDate }}</span>\n </ng-container>\n <ng-template #placeholderValue>\n <span class=\"value placeholder\">{{ placeholder }}</span>\n </ng-template>\n <span class=\"chevron\">\n <riv-icon [name]=\"'Calendar'\" [size]=\"16\"></riv-icon>\n </span>\n </button>\n</riv-input-label>\n<ng-container *ngIf=\"open$ | async\">\n <riv-callout\n *riv-overlay\n [anchor]=\"trigger\"\n [showCaret]=\"false\"\n [theme]=\"'light'\"\n [allowedPositions]=\"[\n 'top-left',\n 'top-right',\n 'bottom-right',\n 'bottom-left'\n ]\"\n [preferredPosition]=\"'bottom-right'\"\n (close)=\"open$.next(false)\"\n >\n <div class=\"content\">\n <riv-calendar\n [activeYearMonth]=\"activeYearMonth\"\n (activeYearMonthChange)=\"activeYearMonth = $event\"\n [displayMin]=\"min\"\n [displayMax]=\"max\"\n [selectableMin]=\"min\"\n [selectableMax]=\"max\"\n [selectedValue]=\"value\"\n (dateSelect)=\"valueChange.next($event); open$.next(false)\"\n ></riv-calendar>\n </div>\n </riv-callout>\n</ng-container>\n", styles: [".trigger{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);display:flex;gap:var(--size-small)}.trigger:focus{outline:none;border:var(--border-width) solid var(--purp-60)}.trigger:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}.value{font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-0);color:var(--type-light-high-contrast);padding:var(--size-small);flex-grow:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:pre}.value.placeholder{color:var(--type-light-disabled)}.chevron{display:flex;justify-content:center;align-items:center;padding:var(--size-small);background-color:var(--surface-light-2);border-left:var(--border-width) solid var(--border-light)}.content{padding:var(--size-large)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.CalendarComponent, selector: "riv-calendar", inputs: ["activeYearMonth", "displayMin", "displayMax", "selectableMin", "selectableMax", "omitRange", "selectedValue"], outputs: ["activeYearMonthChange", "dateSelect"] }, { kind: "component", type: i3.CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "component", type: i4.IconComponent, selector: "riv-icon", inputs: ["name", "size", "customSize", "strokeWidth"] }, { kind: "component", type: i5.InputLabelComponent, selector: "riv-input-label", inputs: ["label", "help", "required", "labelActionText"], outputs: ["labelAction"] }, { kind: "directive", type: i6.OverlayDirective, selector: "[riv-overlay]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i7.DatePipe, name: "rivDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
33
+ DateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DateComponent, selector: "riv-date", inputs: { min: "min", max: "max", value: "value", placeholder: "placeholder", disabled: "disabled", open: "open" }, outputs: { valueChange: "valueChange" }, usesInheritance: true, ngImport: i0, template: "<riv-input-label\n [label]=\"label\"\n [help]=\"help\"\n [required]=\"required\"\n [labelActionText]=\"labelActionText\"\n (labelAction)=\"labelAction.emit($event)\"\n>\n <button\n #trigger\n class=\"trigger\"\n (click)=\"open$.next(true)\"\n [disabled]=\"disabled\"\n type=\"button\"\n >\n <ng-container *ngIf=\"value; else placeholderValue\">\n <span class=\"value\">{{ value | rivDate }}</span>\n </ng-container>\n <ng-template #placeholderValue>\n <span class=\"value placeholder\">{{ placeholder }}</span>\n </ng-template>\n <span class=\"chevron\">\n <riv-icon [name]=\"'Calendar'\" [size]=\"16\"></riv-icon>\n </span>\n </button>\n</riv-input-label>\n<ng-container *ngIf=\"open$ | async\">\n <riv-callout\n *riv-overlay\n [anchor]=\"trigger\"\n [showCaret]=\"false\"\n [theme]=\"'light'\"\n [allowedPositions]=\"[\n 'top-left',\n 'top-right',\n 'bottom-right',\n 'bottom-left'\n ]\"\n [preferredPosition]=\"'bottom-right'\"\n (close)=\"open$.next(false)\"\n >\n <div class=\"content\">\n <riv-calendar\n [activeYearMonth]=\"activeYearMonth\"\n (activeYearMonthChange)=\"activeYearMonth = $event\"\n [displayMin]=\"min\"\n [displayMax]=\"max\"\n [selectableMin]=\"min\"\n [selectableMax]=\"max\"\n [selectedValue]=\"value\"\n (dateSelect)=\"valueChange.next($event); open$.next(false)\"\n ></riv-calendar>\n </div>\n </riv-callout>\n</ng-container>\n", styles: [".trigger{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);display:flex;gap:var(--size-small)}.trigger:focus{outline:none;border:var(--border-width) solid var(--purp-60)}.trigger:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}.value{font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-0);color:var(--type-light-high-contrast);padding:var(--size-small);flex-grow:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:pre}.value.placeholder{color:var(--type-light-disabled)}.chevron{display:flex;justify-content:center;align-items:center;padding:var(--size-small)}.content{padding:var(--size-large)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.CalendarComponent, selector: "riv-calendar", inputs: ["activeYearMonth", "displayMin", "displayMax", "selectableMin", "selectableMax", "omitRange", "selectedValue"], outputs: ["activeYearMonthChange", "dateSelect"] }, { kind: "component", type: i3.CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "component", type: i4.IconComponent, selector: "riv-icon", inputs: ["name", "size", "customSize", "strokeWidth"] }, { kind: "component", type: i5.InputLabelComponent, selector: "riv-input-label", inputs: ["label", "help", "required", "labelActionText"], outputs: ["labelAction"] }, { kind: "directive", type: i6.OverlayDirective, selector: "[riv-overlay]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i7.DatePipe, name: "rivDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
34
34
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DateComponent, decorators: [{
35
35
  type: Component,
36
- args: [{ selector: 'riv-date', changeDetection: ChangeDetectionStrategy.OnPush, template: "<riv-input-label\n [label]=\"label\"\n [help]=\"help\"\n [required]=\"required\"\n [labelActionText]=\"labelActionText\"\n (labelAction)=\"labelAction.emit($event)\"\n>\n <button\n #trigger\n class=\"trigger\"\n (click)=\"open$.next(true)\"\n [disabled]=\"disabled\"\n type=\"button\"\n >\n <ng-container *ngIf=\"value; else placeholderValue\">\n <span class=\"value\">{{ value | rivDate }}</span>\n </ng-container>\n <ng-template #placeholderValue>\n <span class=\"value placeholder\">{{ placeholder }}</span>\n </ng-template>\n <span class=\"chevron\">\n <riv-icon [name]=\"'Calendar'\" [size]=\"16\"></riv-icon>\n </span>\n </button>\n</riv-input-label>\n<ng-container *ngIf=\"open$ | async\">\n <riv-callout\n *riv-overlay\n [anchor]=\"trigger\"\n [showCaret]=\"false\"\n [theme]=\"'light'\"\n [allowedPositions]=\"[\n 'top-left',\n 'top-right',\n 'bottom-right',\n 'bottom-left'\n ]\"\n [preferredPosition]=\"'bottom-right'\"\n (close)=\"open$.next(false)\"\n >\n <div class=\"content\">\n <riv-calendar\n [activeYearMonth]=\"activeYearMonth\"\n (activeYearMonthChange)=\"activeYearMonth = $event\"\n [displayMin]=\"min\"\n [displayMax]=\"max\"\n [selectableMin]=\"min\"\n [selectableMax]=\"max\"\n [selectedValue]=\"value\"\n (dateSelect)=\"valueChange.next($event); open$.next(false)\"\n ></riv-calendar>\n </div>\n </riv-callout>\n</ng-container>\n", styles: [".trigger{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);display:flex;gap:var(--size-small)}.trigger:focus{outline:none;border:var(--border-width) solid var(--purp-60)}.trigger:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}.value{font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-0);color:var(--type-light-high-contrast);padding:var(--size-small);flex-grow:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:pre}.value.placeholder{color:var(--type-light-disabled)}.chevron{display:flex;justify-content:center;align-items:center;padding:var(--size-small);background-color:var(--surface-light-2);border-left:var(--border-width) solid var(--border-light)}.content{padding:var(--size-large)}\n"] }]
36
+ args: [{ selector: 'riv-date', changeDetection: ChangeDetectionStrategy.OnPush, template: "<riv-input-label\n [label]=\"label\"\n [help]=\"help\"\n [required]=\"required\"\n [labelActionText]=\"labelActionText\"\n (labelAction)=\"labelAction.emit($event)\"\n>\n <button\n #trigger\n class=\"trigger\"\n (click)=\"open$.next(true)\"\n [disabled]=\"disabled\"\n type=\"button\"\n >\n <ng-container *ngIf=\"value; else placeholderValue\">\n <span class=\"value\">{{ value | rivDate }}</span>\n </ng-container>\n <ng-template #placeholderValue>\n <span class=\"value placeholder\">{{ placeholder }}</span>\n </ng-template>\n <span class=\"chevron\">\n <riv-icon [name]=\"'Calendar'\" [size]=\"16\"></riv-icon>\n </span>\n </button>\n</riv-input-label>\n<ng-container *ngIf=\"open$ | async\">\n <riv-callout\n *riv-overlay\n [anchor]=\"trigger\"\n [showCaret]=\"false\"\n [theme]=\"'light'\"\n [allowedPositions]=\"[\n 'top-left',\n 'top-right',\n 'bottom-right',\n 'bottom-left'\n ]\"\n [preferredPosition]=\"'bottom-right'\"\n (close)=\"open$.next(false)\"\n >\n <div class=\"content\">\n <riv-calendar\n [activeYearMonth]=\"activeYearMonth\"\n (activeYearMonthChange)=\"activeYearMonth = $event\"\n [displayMin]=\"min\"\n [displayMax]=\"max\"\n [selectableMin]=\"min\"\n [selectableMax]=\"max\"\n [selectedValue]=\"value\"\n (dateSelect)=\"valueChange.next($event); open$.next(false)\"\n ></riv-calendar>\n </div>\n </riv-callout>\n</ng-container>\n", styles: [".trigger{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);display:flex;gap:var(--size-small)}.trigger:focus{outline:none;border:var(--border-width) solid var(--purp-60)}.trigger:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}.value{font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-0);color:var(--type-light-high-contrast);padding:var(--size-small);flex-grow:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:pre}.value.placeholder{color:var(--type-light-disabled)}.chevron{display:flex;justify-content:center;align-items:center;padding:var(--size-small)}.content{padding:var(--size-large)}\n"] }]
37
37
  }], propDecorators: { min: [{
38
38
  type: Input
39
39
  }], max: [{
package/esm2020/lib/input/date-range/date-range.component.mjs CHANGED
@@ -194,10 +194,10 @@ export class DateRangeComponent extends InputLabelComponent {
194
194
  }
195
195
  }
196
196
  DateRangeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DateRangeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
197
- DateRangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DateRangeComponent, selector: "riv-date-range", inputs: { showPresets: "showPresets", min: "min", max: "max", value: "value", placeholder: "placeholder", disabled: "disabled", alternativePresetList: "alternativePresetList" }, outputs: { valueChange: "valueChange" }, usesInheritance: true, ngImport: i0, template: "<riv-input-label\n [label]=\"label\"\n [help]=\"help\"\n [required]=\"required\"\n [labelActionText]=\"labelActionText\"\n (labelAction)=\"labelAction.emit($event)\"\n>\n <button\n #trigger\n class=\"trigger\"\n (click)=\"open$.next(true)\"\n [disabled]=\"disabled$ | async\"\n type=\"button\"\n >\n <ng-container\n *ngIf=\"displayValue$ | async; else placeholderValue; let display\"\n >\n <span class=\"value\">{{ display }}</span>\n </ng-container>\n <ng-template #placeholderValue>\n <span class=\"value placeholder\">{{ placeholder$ | async }}</span>\n </ng-template>\n <span class=\"chevron\">\n <riv-icon [name]=\"'Calendar'\" [size]=\"16\"></riv-icon>\n </span>\n </button>\n</riv-input-label>\n\n<ng-template\n #self\n [ngTemplateOutlet]=\"self\"\n let-inputValue\n [ngTemplateOutletContext]=\"{ $implicit: (value$ | async) }\"\n>\n <ng-container *ngIf=\"open$ | async\">\n <riv-callout\n *riv-overlay\n [anchor]=\"trigger\"\n [showCaret]=\"false\"\n [theme]=\"'light'\"\n [allowedPositions]=\"[\n 'top-left',\n 'top-right',\n 'bottom-right',\n 'bottom-left'\n ]\"\n [preferredPosition]=\"'bottom-right'\"\n (close)=\"open$.next(false); userSelectedDate$.next(inputValue)\"\n >\n <div class=\"content\">\n <div *ngIf=\"showPresets\" class=\"presets\">\n <riv-simple-select\n [label]=\"'Date presets'\"\n [filterabilityOptions]=\"{ enabled: true, placeholder: 'Search...' }\"\n [optionGroups]=\"\n (filteredPresetOptions$ | async) ?? [] | rivOptionGroup\n \"\n [selectedOption]=\"selectedPreset$ | async\"\n (selectedOptionChange)=\"userSelectedPreset$.next($event)\"\n >\n <ng-template #option let-node=\"node\">\n <ng-template\n #self\n [ngTemplateOutlet]=\"self\"\n let-isFavorite\n [ngTemplateOutletContext]=\"{\n $implicit: (favoritePresetIds$ | async)?.includes(node.id)\n }\"\n >\n <div class=\"preset\" [class.favorite]=\"isFavorite\">\n <div class=\"description\">\n <riv-highlight\n class=\"title\"\n [text]=\"node.title\"\n [indices]=\"node.titleHighlightIndices || []\"\n ></riv-highlight>\n <riv-highlight\n class=\"subtitle\"\n [text]=\"node.subtitle\"\n [indices]=\"node.subtitleHighlightIndices || []\"\n ></riv-highlight>\n </div>\n <button\n (click)=\"\n setFavorite(node, !isFavorite); $event.stopPropagation()\n \"\n type=\"button\"\n >\n <riv-icon\n [name]=\"isFavorite ? 'HeartActive' : 'Heart'\"\n [size]=\"16\"\n [rivTooltip]=\"'Mark as favorite'\"\n ></riv-icon>\n </button>\n </div>\n </ng-template>\n </ng-template>\n </riv-simple-select>\n <ng-template\n #self\n [ngTemplateOutlet]=\"self\"\n let-favorites\n [ngTemplateOutletContext]=\"{ $implicit: favoritePresets$ | async }\"\n >\n <riv-input-label *ngIf=\"favorites.length\" [label]=\"'Favorites'\">\n <div class=\"shortcuts\">\n <button\n *ngFor=\"let favorite of favorites\"\n class=\"shortcut\"\n [class.active]=\"(selectedPreset$ | async)?.id === favorite.id\"\n (click)=\"userSelectedPreset$.next(favorite)\"\n type=\"button\"\n >\n <span class=\"title\">{{ favorite.title }}</span>\n <button\n (click)=\"setFavorite(favorite, false)\"\n [rivTooltip]=\"'Remove favorite'\"\n type=\"button\"\n >\n <riv-icon [name]=\"'HeartActive'\" [size]=\"16\"></riv-icon>\n </button>\n </button>\n </div>\n </riv-input-label>\n </ng-template>\n </div>\n\n <div class=\"calendars\">\n <riv-calendar\n class=\"left\"\n [activeYearMonth]=\"(leftActiveYearMonth$ | async) || TODAY\"\n (activeYearMonthChange)=\"userLeftActiveYearMonth$.next($event)\"\n [displayMin]=\"(min$ | async) || TODAY\"\n [displayMax]=\"(max$ | async) || TODAY\"\n [selectableMin]=\"(leftMin$ | async) || TODAY\"\n [selectableMax]=\"(leftMax$ | async) || TODAY\"\n [omitRange]=\"(leftOmitRange$ | async) || [TODAY, TODAY]\"\n [selectedValue]=\"(selectedValue$ | async) || TODAY\"\n (dateSelect)=\"userSelectedDate$.next($event)\"\n ></riv-calendar>\n <riv-calendar\n class=\"right\"\n [activeYearMonth]=\"(rightActiveYearMonth$ | async) || TODAY\"\n (activeYearMonthChange)=\"userRightActiveYearMonth$.next($event)\"\n [displayMin]=\"(min$ | async) || TODAY\"\n [displayMax]=\"(max$ | async) || TODAY\"\n [selectableMin]=\"(rightMin$ | async) || TODAY\"\n [selectableMax]=\"(rightMax$ | async) || TODAY\"\n [selectedValue]=\"(selectedValue$ | async) || TODAY\"\n (dateSelect)=\"userSelectedDate$.next($event)\"\n ></riv-calendar>\n </div>\n\n <footer class=\"buttons\">\n <button\n rivButton\n [size]=\"'small'\"\n [variant]=\"'ghost'\"\n (click)=\"userSelectedDate$.next(undefined)\"\n type=\"button\"\n >\n Clear\n </button>\n <button\n rivButton\n [size]=\"'small'\"\n [variant]=\"'primary'\"\n (click)=\"open$.next(false)\"\n type=\"button\"\n >\n Done\n </button>\n </footer>\n </div>\n </riv-callout>\n </ng-container>\n</ng-template>\n", styles: [".trigger{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);display:flex;gap:var(--size-small)}.trigger:focus{outline:none;border:var(--border-width) solid var(--purp-60)}.trigger:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}.value{font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-0);color:var(--type-light-high-contrast);padding:var(--size-small);flex-grow:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:pre}.value.placeholder{color:var(--type-light-disabled)}.chevron{display:flex;justify-content:center;align-items:center;padding:var(--size-small);background-color:var(--surface-light-2);border-left:var(--border-width) solid var(--border-light)}.content{display:inline-grid;grid-template-rows:1fr auto;grid-template-columns:calc(var(--base-grid-size) * 50) 1fr 1fr}.presets{grid-area:1 / 1 / 3 / 2;background-color:var(--surface-light-1);padding:var(--size-xlarge) var(--size-large);border-right:var(--border-width) solid var(--border-light);display:flex;flex-direction:column;gap:var(--size-medium)}.preset{display:flex;transition:background-color var(--short-transition)}.preset:hover{background-color:var(--surface-light-2)}.preset button{color:transparent;transition:color var(--short-transition);padding:var(--size-medium) var(--size-large) var(--size-medium) var(--size-small);cursor:pointer}.preset:hover button{color:var(--type-light-low-contrast)}.preset button:hover{color:var(--type-light-high-contrast)}.preset.favorite button{color:var(--type-light-link)}.preset .description{flex-grow:1;padding:var(--size-medium) var(--size-small) var(--size-medium) var(--size-medium)}.preset .title{display:block;font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-1)}.preset .subtitle{display:block;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-1);color:var(--type-light-low-contrast)}.shortcuts{display:flex;flex-direction:column;gap:var(--size-xsmall);overflow-y:auto}.shortcut{display:flex;align-items:center;padding:var(--size-small) var(--size-small) var(--size-small) var(--size-medium);gap:var(--size-small);border-radius:var(--border-radius-small);transition:background-color var(--short-transition);cursor:pointer}.shortcut:hover{background-color:var(--black-20)}.shortcut.active{background-color:var(--baloo-05)}.shortcut .title{flex-grow:1;text-align:left;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-2)}.shortcut button{color:transparent;transition:color var(--short-transition);cursor:pointer}.shortcut:hover button{color:var(--type-light-link)}.calendars{grid-column:2 / 4;display:grid;grid-template-columns:subgrid;grid-template-rows:subgrid;padding:var(--size-large)}.left{grid-area:1 / 1 / 2 / 2;padding-right:var(--size-large);border-right:var(--border-width) solid var(--border-light)}.right{padding-left:var(--size-large);grid-area:1 / 2 / 2 / 3}.buttons{grid-area:2 / 2 / 3 / 4;padding:var(--size-small);display:flex;justify-content:space-between}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "active"] }, { kind: "component", type: i3.CalendarComponent, selector: "riv-calendar", inputs: ["activeYearMonth", "displayMin", "displayMax", "selectableMin", "selectableMax", "omitRange", "selectedValue"], outputs: ["activeYearMonthChange", "dateSelect"] }, { kind: "component", type: i4.CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "component", type: i5.HighlightComponent, selector: "riv-highlight", inputs: ["text", "indices"] }, { kind: "component", type: i6.IconComponent, selector: "riv-icon", inputs: ["name", "size", "customSize", "strokeWidth"] }, { kind: "component", type: i7.InputLabelComponent, selector: "riv-input-label", inputs: ["label", "help", "required", "labelActionText"], outputs: ["labelAction"] }, { kind: "directive", type: i8.OverlayDirective, selector: "[riv-overlay]" }, { kind: "component", type: i9.SimpleSelectComponent, selector: "riv-simple-select", inputs: ["optionGroups", "selectedOption", "size", "disabled", "locked", "filterabilityOptions", "placeholder", "maxHeight", "maxWidth", "minHeight", "minWidth"], outputs: ["selectedOptionChange"] }, { kind: "directive", type: i10.TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipCloseDelay"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i11.OptionGroupPipe, name: "rivOptionGroup" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
197
+ DateRangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DateRangeComponent, selector: "riv-date-range", inputs: { showPresets: "showPresets", min: "min", max: "max", value: "value", placeholder: "placeholder", disabled: "disabled", alternativePresetList: "alternativePresetList" }, outputs: { valueChange: "valueChange" }, usesInheritance: true, ngImport: i0, template: "<riv-input-label\n [label]=\"label\"\n [help]=\"help\"\n [required]=\"required\"\n [labelActionText]=\"labelActionText\"\n (labelAction)=\"labelAction.emit($event)\"\n>\n <button\n #trigger\n class=\"trigger\"\n (click)=\"open$.next(true)\"\n [disabled]=\"disabled$ | async\"\n type=\"button\"\n >\n <ng-container\n *ngIf=\"displayValue$ | async; else placeholderValue; let display\"\n >\n <span class=\"value\">{{ display }}</span>\n </ng-container>\n <ng-template #placeholderValue>\n <span class=\"value placeholder\">{{ placeholder$ | async }}</span>\n </ng-template>\n <span class=\"chevron\">\n <riv-icon [name]=\"'Calendar'\" [size]=\"16\"></riv-icon>\n </span>\n </button>\n</riv-input-label>\n\n<ng-template\n #self\n [ngTemplateOutlet]=\"self\"\n let-inputValue\n [ngTemplateOutletContext]=\"{ $implicit: (value$ | async) }\"\n>\n <ng-container *ngIf=\"open$ | async\">\n <riv-callout\n *riv-overlay\n [anchor]=\"trigger\"\n [showCaret]=\"false\"\n [theme]=\"'light'\"\n [allowedPositions]=\"[\n 'top-left',\n 'top-right',\n 'bottom-right',\n 'bottom-left'\n ]\"\n [preferredPosition]=\"'bottom-right'\"\n (close)=\"open$.next(false); userSelectedDate$.next(inputValue)\"\n >\n <div class=\"content\">\n <div *ngIf=\"showPresets\" class=\"presets\">\n <riv-simple-select\n [label]=\"'Date presets'\"\n [filterabilityOptions]=\"{ enabled: true, placeholder: 'Search...' }\"\n [optionGroups]=\"\n (filteredPresetOptions$ | async) ?? [] | rivOptionGroup\n \"\n [selectedOption]=\"selectedPreset$ | async\"\n (selectedOptionChange)=\"userSelectedPreset$.next($event)\"\n >\n <ng-template #option let-node=\"node\">\n <ng-template\n #self\n [ngTemplateOutlet]=\"self\"\n let-isFavorite\n [ngTemplateOutletContext]=\"{\n $implicit: (favoritePresetIds$ | async)?.includes(node.id)\n }\"\n >\n <div class=\"preset\" [class.favorite]=\"isFavorite\">\n <div class=\"description\">\n <riv-highlight\n class=\"title\"\n [text]=\"node.title\"\n [indices]=\"node.titleHighlightIndices || []\"\n ></riv-highlight>\n <riv-highlight\n class=\"subtitle\"\n [text]=\"node.subtitle\"\n [indices]=\"node.subtitleHighlightIndices || []\"\n ></riv-highlight>\n </div>\n <button\n (click)=\"\n setFavorite(node, !isFavorite); $event.stopPropagation()\n \"\n type=\"button\"\n >\n <riv-icon\n [name]=\"isFavorite ? 'HeartActive' : 'Heart'\"\n [size]=\"16\"\n [rivTooltip]=\"'Mark as favorite'\"\n ></riv-icon>\n </button>\n </div>\n </ng-template>\n </ng-template>\n </riv-simple-select>\n <ng-template\n #self\n [ngTemplateOutlet]=\"self\"\n let-favorites\n [ngTemplateOutletContext]=\"{ $implicit: favoritePresets$ | async }\"\n >\n <riv-input-label *ngIf=\"favorites.length\" [label]=\"'Favorites'\">\n <div class=\"shortcuts\">\n <button\n *ngFor=\"let favorite of favorites\"\n class=\"shortcut\"\n [class.active]=\"(selectedPreset$ | async)?.id === favorite.id\"\n (click)=\"userSelectedPreset$.next(favorite)\"\n type=\"button\"\n >\n <span class=\"title\">{{ favorite.title }}</span>\n <button\n (click)=\"setFavorite(favorite, false)\"\n [rivTooltip]=\"'Remove favorite'\"\n type=\"button\"\n >\n <riv-icon [name]=\"'HeartActive'\" [size]=\"16\"></riv-icon>\n </button>\n </button>\n </div>\n </riv-input-label>\n </ng-template>\n </div>\n\n <div class=\"calendars\">\n <riv-calendar\n class=\"left\"\n [activeYearMonth]=\"(leftActiveYearMonth$ | async) || TODAY\"\n (activeYearMonthChange)=\"userLeftActiveYearMonth$.next($event)\"\n [displayMin]=\"(min$ | async) || TODAY\"\n [displayMax]=\"(max$ | async) || TODAY\"\n [selectableMin]=\"(leftMin$ | async) || TODAY\"\n [selectableMax]=\"(leftMax$ | async) || TODAY\"\n [omitRange]=\"(leftOmitRange$ | async) || [TODAY, TODAY]\"\n [selectedValue]=\"(selectedValue$ | async) || TODAY\"\n (dateSelect)=\"userSelectedDate$.next($event)\"\n ></riv-calendar>\n <riv-calendar\n class=\"right\"\n [activeYearMonth]=\"(rightActiveYearMonth$ | async) || TODAY\"\n (activeYearMonthChange)=\"userRightActiveYearMonth$.next($event)\"\n [displayMin]=\"(min$ | async) || TODAY\"\n [displayMax]=\"(max$ | async) || TODAY\"\n [selectableMin]=\"(rightMin$ | async) || TODAY\"\n [selectableMax]=\"(rightMax$ | async) || TODAY\"\n [selectedValue]=\"(selectedValue$ | async) || TODAY\"\n (dateSelect)=\"userSelectedDate$.next($event)\"\n ></riv-calendar>\n </div>\n\n <footer class=\"buttons\">\n <button\n rivButton\n [size]=\"'small'\"\n [variant]=\"'ghost'\"\n (click)=\"userSelectedDate$.next(undefined)\"\n type=\"button\"\n >\n Clear\n </button>\n <button\n rivButton\n [size]=\"'small'\"\n [variant]=\"'primary'\"\n (click)=\"open$.next(false)\"\n type=\"button\"\n >\n Done\n </button>\n </footer>\n </div>\n </riv-callout>\n </ng-container>\n</ng-template>\n", styles: [".trigger{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);display:flex;gap:var(--size-small)}.trigger:focus{outline:none;border:var(--border-width) solid var(--purp-60)}.trigger:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}.value{font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-0);color:var(--type-light-high-contrast);padding:var(--size-small);flex-grow:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:pre}.value.placeholder{color:var(--type-light-disabled)}.chevron{display:flex;justify-content:center;align-items:center;padding:var(--size-small)}.content{display:inline-grid;grid-template-rows:1fr auto;grid-template-columns:calc(var(--base-grid-size) * 50) 1fr 1fr}.presets{grid-area:1 / 1 / 3 / 2;background-color:var(--surface-light-1);padding:var(--size-xlarge) var(--size-large);border-right:var(--border-width) solid var(--border-light);display:flex;flex-direction:column;gap:var(--size-medium)}.preset{display:flex;transition:background-color var(--short-transition)}.preset:hover{background-color:var(--surface-light-2)}.preset button{color:transparent;transition:color var(--short-transition);padding:var(--size-medium) var(--size-large) var(--size-medium) var(--size-small);cursor:pointer}.preset:hover button{color:var(--type-light-low-contrast)}.preset button:hover{color:var(--type-light-high-contrast)}.preset.favorite button{color:var(--type-light-link)}.preset .description{flex-grow:1;padding:var(--size-medium) var(--size-small) var(--size-medium) var(--size-medium)}.preset .title{display:block;font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-1)}.preset .subtitle{display:block;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-1);color:var(--type-light-low-contrast)}.shortcuts{display:flex;flex-direction:column;gap:var(--size-xsmall);overflow-y:auto}.shortcut{display:flex;align-items:center;padding:var(--size-small) var(--size-small) var(--size-small) var(--size-medium);gap:var(--size-small);border-radius:var(--border-radius-small);transition:background-color var(--short-transition);cursor:pointer}.shortcut:hover{background-color:var(--black-20)}.shortcut.active{background-color:var(--baloo-05)}.shortcut .title{flex-grow:1;text-align:left;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-2)}.shortcut button{color:transparent;transition:color var(--short-transition);cursor:pointer}.shortcut:hover button{color:var(--type-light-link)}.calendars{grid-column:2 / 4;display:grid;grid-template-columns:subgrid;grid-template-rows:subgrid;padding:var(--size-large)}.left{grid-area:1 / 1 / 2 / 2;padding-right:var(--size-large);border-right:var(--border-width) solid var(--border-light)}.right{padding-left:var(--size-large);grid-area:1 / 2 / 2 / 3}.buttons{grid-area:2 / 2 / 3 / 4;padding:var(--size-small);display:flex;justify-content:space-between}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "active"] }, { kind: "component", type: i3.CalendarComponent, selector: "riv-calendar", inputs: ["activeYearMonth", "displayMin", "displayMax", "selectableMin", "selectableMax", "omitRange", "selectedValue"], outputs: ["activeYearMonthChange", "dateSelect"] }, { kind: "component", type: i4.CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "component", type: i5.HighlightComponent, selector: "riv-highlight", inputs: ["text", "indices"] }, { kind: "component", type: i6.IconComponent, selector: "riv-icon", inputs: ["name", "size", "customSize", "strokeWidth"] }, { kind: "component", type: i7.InputLabelComponent, selector: "riv-input-label", inputs: ["label", "help", "required", "labelActionText"], outputs: ["labelAction"] }, { kind: "directive", type: i8.OverlayDirective, selector: "[riv-overlay]" }, { kind: "component", type: i9.SimpleSelectComponent, selector: "riv-simple-select", inputs: ["optionGroups", "selectedOption", "size", "disabled", "locked", "filterabilityOptions", "placeholder", "maxHeight", "maxWidth", "minHeight", "minWidth"], outputs: ["selectedOptionChange"] }, { kind: "directive", type: i10.TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipCloseDelay"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i11.OptionGroupPipe, name: "rivOptionGroup" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
198
198
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DateRangeComponent, decorators: [{
199
199
  type: Component,
200
- args: [{ selector: 'riv-date-range', changeDetection: ChangeDetectionStrategy.OnPush, template: "<riv-input-label\n [label]=\"label\"\n [help]=\"help\"\n [required]=\"required\"\n [labelActionText]=\"labelActionText\"\n (labelAction)=\"labelAction.emit($event)\"\n>\n <button\n #trigger\n class=\"trigger\"\n (click)=\"open$.next(true)\"\n [disabled]=\"disabled$ | async\"\n type=\"button\"\n >\n <ng-container\n *ngIf=\"displayValue$ | async; else placeholderValue; let display\"\n >\n <span class=\"value\">{{ display }}</span>\n </ng-container>\n <ng-template #placeholderValue>\n <span class=\"value placeholder\">{{ placeholder$ | async }}</span>\n </ng-template>\n <span class=\"chevron\">\n <riv-icon [name]=\"'Calendar'\" [size]=\"16\"></riv-icon>\n </span>\n </button>\n</riv-input-label>\n\n<ng-template\n #self\n [ngTemplateOutlet]=\"self\"\n let-inputValue\n [ngTemplateOutletContext]=\"{ $implicit: (value$ | async) }\"\n>\n <ng-container *ngIf=\"open$ | async\">\n <riv-callout\n *riv-overlay\n [anchor]=\"trigger\"\n [showCaret]=\"false\"\n [theme]=\"'light'\"\n [allowedPositions]=\"[\n 'top-left',\n 'top-right',\n 'bottom-right',\n 'bottom-left'\n ]\"\n [preferredPosition]=\"'bottom-right'\"\n (close)=\"open$.next(false); userSelectedDate$.next(inputValue)\"\n >\n <div class=\"content\">\n <div *ngIf=\"showPresets\" class=\"presets\">\n <riv-simple-select\n [label]=\"'Date presets'\"\n [filterabilityOptions]=\"{ enabled: true, placeholder: 'Search...' }\"\n [optionGroups]=\"\n (filteredPresetOptions$ | async) ?? [] | rivOptionGroup\n \"\n [selectedOption]=\"selectedPreset$ | async\"\n (selectedOptionChange)=\"userSelectedPreset$.next($event)\"\n >\n <ng-template #option let-node=\"node\">\n <ng-template\n #self\n [ngTemplateOutlet]=\"self\"\n let-isFavorite\n [ngTemplateOutletContext]=\"{\n $implicit: (favoritePresetIds$ | async)?.includes(node.id)\n }\"\n >\n <div class=\"preset\" [class.favorite]=\"isFavorite\">\n <div class=\"description\">\n <riv-highlight\n class=\"title\"\n [text]=\"node.title\"\n [indices]=\"node.titleHighlightIndices || []\"\n ></riv-highlight>\n <riv-highlight\n class=\"subtitle\"\n [text]=\"node.subtitle\"\n [indices]=\"node.subtitleHighlightIndices || []\"\n ></riv-highlight>\n </div>\n <button\n (click)=\"\n setFavorite(node, !isFavorite); $event.stopPropagation()\n \"\n type=\"button\"\n >\n <riv-icon\n [name]=\"isFavorite ? 'HeartActive' : 'Heart'\"\n [size]=\"16\"\n [rivTooltip]=\"'Mark as favorite'\"\n ></riv-icon>\n </button>\n </div>\n </ng-template>\n </ng-template>\n </riv-simple-select>\n <ng-template\n #self\n [ngTemplateOutlet]=\"self\"\n let-favorites\n [ngTemplateOutletContext]=\"{ $implicit: favoritePresets$ | async }\"\n >\n <riv-input-label *ngIf=\"favorites.length\" [label]=\"'Favorites'\">\n <div class=\"shortcuts\">\n <button\n *ngFor=\"let favorite of favorites\"\n class=\"shortcut\"\n [class.active]=\"(selectedPreset$ | async)?.id === favorite.id\"\n (click)=\"userSelectedPreset$.next(favorite)\"\n type=\"button\"\n >\n <span class=\"title\">{{ favorite.title }}</span>\n <button\n (click)=\"setFavorite(favorite, false)\"\n [rivTooltip]=\"'Remove favorite'\"\n type=\"button\"\n >\n <riv-icon [name]=\"'HeartActive'\" [size]=\"16\"></riv-icon>\n </button>\n </button>\n </div>\n </riv-input-label>\n </ng-template>\n </div>\n\n <div class=\"calendars\">\n <riv-calendar\n class=\"left\"\n [activeYearMonth]=\"(leftActiveYearMonth$ | async) || TODAY\"\n (activeYearMonthChange)=\"userLeftActiveYearMonth$.next($event)\"\n [displayMin]=\"(min$ | async) || TODAY\"\n [displayMax]=\"(max$ | async) || TODAY\"\n [selectableMin]=\"(leftMin$ | async) || TODAY\"\n [selectableMax]=\"(leftMax$ | async) || TODAY\"\n [omitRange]=\"(leftOmitRange$ | async) || [TODAY, TODAY]\"\n [selectedValue]=\"(selectedValue$ | async) || TODAY\"\n (dateSelect)=\"userSelectedDate$.next($event)\"\n ></riv-calendar>\n <riv-calendar\n class=\"right\"\n [activeYearMonth]=\"(rightActiveYearMonth$ | async) || TODAY\"\n (activeYearMonthChange)=\"userRightActiveYearMonth$.next($event)\"\n [displayMin]=\"(min$ | async) || TODAY\"\n [displayMax]=\"(max$ | async) || TODAY\"\n [selectableMin]=\"(rightMin$ | async) || TODAY\"\n [selectableMax]=\"(rightMax$ | async) || TODAY\"\n [selectedValue]=\"(selectedValue$ | async) || TODAY\"\n (dateSelect)=\"userSelectedDate$.next($event)\"\n ></riv-calendar>\n </div>\n\n <footer class=\"buttons\">\n <button\n rivButton\n [size]=\"'small'\"\n [variant]=\"'ghost'\"\n (click)=\"userSelectedDate$.next(undefined)\"\n type=\"button\"\n >\n Clear\n </button>\n <button\n rivButton\n [size]=\"'small'\"\n [variant]=\"'primary'\"\n (click)=\"open$.next(false)\"\n type=\"button\"\n >\n Done\n </button>\n </footer>\n </div>\n </riv-callout>\n </ng-container>\n</ng-template>\n", styles: [".trigger{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);display:flex;gap:var(--size-small)}.trigger:focus{outline:none;border:var(--border-width) solid var(--purp-60)}.trigger:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}.value{font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-0);color:var(--type-light-high-contrast);padding:var(--size-small);flex-grow:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:pre}.value.placeholder{color:var(--type-light-disabled)}.chevron{display:flex;justify-content:center;align-items:center;padding:var(--size-small);background-color:var(--surface-light-2);border-left:var(--border-width) solid var(--border-light)}.content{display:inline-grid;grid-template-rows:1fr auto;grid-template-columns:calc(var(--base-grid-size) * 50) 1fr 1fr}.presets{grid-area:1 / 1 / 3 / 2;background-color:var(--surface-light-1);padding:var(--size-xlarge) var(--size-large);border-right:var(--border-width) solid var(--border-light);display:flex;flex-direction:column;gap:var(--size-medium)}.preset{display:flex;transition:background-color var(--short-transition)}.preset:hover{background-color:var(--surface-light-2)}.preset button{color:transparent;transition:color var(--short-transition);padding:var(--size-medium) var(--size-large) var(--size-medium) var(--size-small);cursor:pointer}.preset:hover button{color:var(--type-light-low-contrast)}.preset button:hover{color:var(--type-light-high-contrast)}.preset.favorite button{color:var(--type-light-link)}.preset .description{flex-grow:1;padding:var(--size-medium) var(--size-small) var(--size-medium) var(--size-medium)}.preset .title{display:block;font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-1)}.preset .subtitle{display:block;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-1);color:var(--type-light-low-contrast)}.shortcuts{display:flex;flex-direction:column;gap:var(--size-xsmall);overflow-y:auto}.shortcut{display:flex;align-items:center;padding:var(--size-small) var(--size-small) var(--size-small) var(--size-medium);gap:var(--size-small);border-radius:var(--border-radius-small);transition:background-color var(--short-transition);cursor:pointer}.shortcut:hover{background-color:var(--black-20)}.shortcut.active{background-color:var(--baloo-05)}.shortcut .title{flex-grow:1;text-align:left;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-2)}.shortcut button{color:transparent;transition:color var(--short-transition);cursor:pointer}.shortcut:hover button{color:var(--type-light-link)}.calendars{grid-column:2 / 4;display:grid;grid-template-columns:subgrid;grid-template-rows:subgrid;padding:var(--size-large)}.left{grid-area:1 / 1 / 2 / 2;padding-right:var(--size-large);border-right:var(--border-width) solid var(--border-light)}.right{padding-left:var(--size-large);grid-area:1 / 2 / 2 / 3}.buttons{grid-area:2 / 2 / 3 / 4;padding:var(--size-small);display:flex;justify-content:space-between}\n"] }]
200
+ args: [{ selector: 'riv-date-range', changeDetection: ChangeDetectionStrategy.OnPush, template: "<riv-input-label\n [label]=\"label\"\n [help]=\"help\"\n [required]=\"required\"\n [labelActionText]=\"labelActionText\"\n (labelAction)=\"labelAction.emit($event)\"\n>\n <button\n #trigger\n class=\"trigger\"\n (click)=\"open$.next(true)\"\n [disabled]=\"disabled$ | async\"\n type=\"button\"\n >\n <ng-container\n *ngIf=\"displayValue$ | async; else placeholderValue; let display\"\n >\n <span class=\"value\">{{ display }}</span>\n </ng-container>\n <ng-template #placeholderValue>\n <span class=\"value placeholder\">{{ placeholder$ | async }}</span>\n </ng-template>\n <span class=\"chevron\">\n <riv-icon [name]=\"'Calendar'\" [size]=\"16\"></riv-icon>\n </span>\n </button>\n</riv-input-label>\n\n<ng-template\n #self\n [ngTemplateOutlet]=\"self\"\n let-inputValue\n [ngTemplateOutletContext]=\"{ $implicit: (value$ | async) }\"\n>\n <ng-container *ngIf=\"open$ | async\">\n <riv-callout\n *riv-overlay\n [anchor]=\"trigger\"\n [showCaret]=\"false\"\n [theme]=\"'light'\"\n [allowedPositions]=\"[\n 'top-left',\n 'top-right',\n 'bottom-right',\n 'bottom-left'\n ]\"\n [preferredPosition]=\"'bottom-right'\"\n (close)=\"open$.next(false); userSelectedDate$.next(inputValue)\"\n >\n <div class=\"content\">\n <div *ngIf=\"showPresets\" class=\"presets\">\n <riv-simple-select\n [label]=\"'Date presets'\"\n [filterabilityOptions]=\"{ enabled: true, placeholder: 'Search...' }\"\n [optionGroups]=\"\n (filteredPresetOptions$ | async) ?? [] | rivOptionGroup\n \"\n [selectedOption]=\"selectedPreset$ | async\"\n (selectedOptionChange)=\"userSelectedPreset$.next($event)\"\n >\n <ng-template #option let-node=\"node\">\n <ng-template\n #self\n [ngTemplateOutlet]=\"self\"\n let-isFavorite\n [ngTemplateOutletContext]=\"{\n $implicit: (favoritePresetIds$ | async)?.includes(node.id)\n }\"\n >\n <div class=\"preset\" [class.favorite]=\"isFavorite\">\n <div class=\"description\">\n <riv-highlight\n class=\"title\"\n [text]=\"node.title\"\n [indices]=\"node.titleHighlightIndices || []\"\n ></riv-highlight>\n <riv-highlight\n class=\"subtitle\"\n [text]=\"node.subtitle\"\n [indices]=\"node.subtitleHighlightIndices || []\"\n ></riv-highlight>\n </div>\n <button\n (click)=\"\n setFavorite(node, !isFavorite); $event.stopPropagation()\n \"\n type=\"button\"\n >\n <riv-icon\n [name]=\"isFavorite ? 'HeartActive' : 'Heart'\"\n [size]=\"16\"\n [rivTooltip]=\"'Mark as favorite'\"\n ></riv-icon>\n </button>\n </div>\n </ng-template>\n </ng-template>\n </riv-simple-select>\n <ng-template\n #self\n [ngTemplateOutlet]=\"self\"\n let-favorites\n [ngTemplateOutletContext]=\"{ $implicit: favoritePresets$ | async }\"\n >\n <riv-input-label *ngIf=\"favorites.length\" [label]=\"'Favorites'\">\n <div class=\"shortcuts\">\n <button\n *ngFor=\"let favorite of favorites\"\n class=\"shortcut\"\n [class.active]=\"(selectedPreset$ | async)?.id === favorite.id\"\n (click)=\"userSelectedPreset$.next(favorite)\"\n type=\"button\"\n >\n <span class=\"title\">{{ favorite.title }}</span>\n <button\n (click)=\"setFavorite(favorite, false)\"\n [rivTooltip]=\"'Remove favorite'\"\n type=\"button\"\n >\n <riv-icon [name]=\"'HeartActive'\" [size]=\"16\"></riv-icon>\n </button>\n </button>\n </div>\n </riv-input-label>\n </ng-template>\n </div>\n\n <div class=\"calendars\">\n <riv-calendar\n class=\"left\"\n [activeYearMonth]=\"(leftActiveYearMonth$ | async) || TODAY\"\n (activeYearMonthChange)=\"userLeftActiveYearMonth$.next($event)\"\n [displayMin]=\"(min$ | async) || TODAY\"\n [displayMax]=\"(max$ | async) || TODAY\"\n [selectableMin]=\"(leftMin$ | async) || TODAY\"\n [selectableMax]=\"(leftMax$ | async) || TODAY\"\n [omitRange]=\"(leftOmitRange$ | async) || [TODAY, TODAY]\"\n [selectedValue]=\"(selectedValue$ | async) || TODAY\"\n (dateSelect)=\"userSelectedDate$.next($event)\"\n ></riv-calendar>\n <riv-calendar\n class=\"right\"\n [activeYearMonth]=\"(rightActiveYearMonth$ | async) || TODAY\"\n (activeYearMonthChange)=\"userRightActiveYearMonth$.next($event)\"\n [displayMin]=\"(min$ | async) || TODAY\"\n [displayMax]=\"(max$ | async) || TODAY\"\n [selectableMin]=\"(rightMin$ | async) || TODAY\"\n [selectableMax]=\"(rightMax$ | async) || TODAY\"\n [selectedValue]=\"(selectedValue$ | async) || TODAY\"\n (dateSelect)=\"userSelectedDate$.next($event)\"\n ></riv-calendar>\n </div>\n\n <footer class=\"buttons\">\n <button\n rivButton\n [size]=\"'small'\"\n [variant]=\"'ghost'\"\n (click)=\"userSelectedDate$.next(undefined)\"\n type=\"button\"\n >\n Clear\n </button>\n <button\n rivButton\n [size]=\"'small'\"\n [variant]=\"'primary'\"\n (click)=\"open$.next(false)\"\n type=\"button\"\n >\n Done\n </button>\n </footer>\n </div>\n </riv-callout>\n </ng-container>\n</ng-template>\n", styles: [".trigger{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);display:flex;gap:var(--size-small)}.trigger:focus{outline:none;border:var(--border-width) solid var(--purp-60)}.trigger:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}.value{font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-0);color:var(--type-light-high-contrast);padding:var(--size-small);flex-grow:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:pre}.value.placeholder{color:var(--type-light-disabled)}.chevron{display:flex;justify-content:center;align-items:center;padding:var(--size-small)}.content{display:inline-grid;grid-template-rows:1fr auto;grid-template-columns:calc(var(--base-grid-size) * 50) 1fr 1fr}.presets{grid-area:1 / 1 / 3 / 2;background-color:var(--surface-light-1);padding:var(--size-xlarge) var(--size-large);border-right:var(--border-width) solid var(--border-light);display:flex;flex-direction:column;gap:var(--size-medium)}.preset{display:flex;transition:background-color var(--short-transition)}.preset:hover{background-color:var(--surface-light-2)}.preset button{color:transparent;transition:color var(--short-transition);padding:var(--size-medium) var(--size-large) var(--size-medium) var(--size-small);cursor:pointer}.preset:hover button{color:var(--type-light-low-contrast)}.preset button:hover{color:var(--type-light-high-contrast)}.preset.favorite button{color:var(--type-light-link)}.preset .description{flex-grow:1;padding:var(--size-medium) var(--size-small) var(--size-medium) var(--size-medium)}.preset .title{display:block;font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-1)}.preset .subtitle{display:block;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-1);color:var(--type-light-low-contrast)}.shortcuts{display:flex;flex-direction:column;gap:var(--size-xsmall);overflow-y:auto}.shortcut{display:flex;align-items:center;padding:var(--size-small) var(--size-small) var(--size-small) var(--size-medium);gap:var(--size-small);border-radius:var(--border-radius-small);transition:background-color var(--short-transition);cursor:pointer}.shortcut:hover{background-color:var(--black-20)}.shortcut.active{background-color:var(--baloo-05)}.shortcut .title{flex-grow:1;text-align:left;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-2)}.shortcut button{color:transparent;transition:color var(--short-transition);cursor:pointer}.shortcut:hover button{color:var(--type-light-link)}.calendars{grid-column:2 / 4;display:grid;grid-template-columns:subgrid;grid-template-rows:subgrid;padding:var(--size-large)}.left{grid-area:1 / 1 / 2 / 2;padding-right:var(--size-large);border-right:var(--border-width) solid var(--border-light)}.right{padding-left:var(--size-large);grid-area:1 / 2 / 2 / 3}.buttons{grid-area:2 / 2 / 3 / 4;padding:var(--size-small);display:flex;justify-content:space-between}\n"] }]
201
201
  }], propDecorators: { showPresets: [{
202
202
  type: Input
203
203
  }], min: [{
package/fesm2015/rivet-health-design-system.mjs CHANGED
@@ -3137,10 +3137,10 @@ class DateRangeComponent extends InputLabelComponent {
3137
3137
  }
3138
3138
  }
3139
3139
  DateRangeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DateRangeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
3140
- DateRangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DateRangeComponent, selector: "riv-date-range", inputs: { showPresets: "showPresets", min: "min", max: "max", value: "value", placeholder: "placeholder", disabled: "disabled", alternativePresetList: "alternativePresetList" }, outputs: { valueChange: "valueChange" }, usesInheritance: true, ngImport: i0, template: "<riv-input-label\n [label]=\"label\"\n [help]=\"help\"\n [required]=\"required\"\n [labelActionText]=\"labelActionText\"\n (labelAction)=\"labelAction.emit($event)\"\n>\n <button\n #trigger\n class=\"trigger\"\n (click)=\"open$.next(true)\"\n [disabled]=\"disabled$ | async\"\n type=\"button\"\n >\n <ng-container\n *ngIf=\"displayValue$ | async; else placeholderValue; let display\"\n >\n <span class=\"value\">{{ display }}</span>\n </ng-container>\n <ng-template #placeholderValue>\n <span class=\"value placeholder\">{{ placeholder$ | async }}</span>\n </ng-template>\n <span class=\"chevron\">\n <riv-icon [name]=\"'Calendar'\" [size]=\"16\"></riv-icon>\n </span>\n </button>\n</riv-input-label>\n\n<ng-template\n #self\n [ngTemplateOutlet]=\"self\"\n let-inputValue\n [ngTemplateOutletContext]=\"{ $implicit: (value$ | async) }\"\n>\n <ng-container *ngIf=\"open$ | async\">\n <riv-callout\n *riv-overlay\n [anchor]=\"trigger\"\n [showCaret]=\"false\"\n [theme]=\"'light'\"\n [allowedPositions]=\"[\n 'top-left',\n 'top-right',\n 'bottom-right',\n 'bottom-left'\n ]\"\n [preferredPosition]=\"'bottom-right'\"\n (close)=\"open$.next(false); userSelectedDate$.next(inputValue)\"\n >\n <div class=\"content\">\n <div *ngIf=\"showPresets\" class=\"presets\">\n <riv-simple-select\n [label]=\"'Date presets'\"\n [filterabilityOptions]=\"{ enabled: true, placeholder: 'Search...' }\"\n [optionGroups]=\"\n (filteredPresetOptions$ | async) ?? [] | rivOptionGroup\n \"\n [selectedOption]=\"selectedPreset$ | async\"\n (selectedOptionChange)=\"userSelectedPreset$.next($event)\"\n >\n <ng-template #option let-node=\"node\">\n <ng-template\n #self\n [ngTemplateOutlet]=\"self\"\n let-isFavorite\n [ngTemplateOutletContext]=\"{\n $implicit: (favoritePresetIds$ | async)?.includes(node.id)\n }\"\n >\n <div class=\"preset\" [class.favorite]=\"isFavorite\">\n <div class=\"description\">\n <riv-highlight\n class=\"title\"\n [text]=\"node.title\"\n [indices]=\"node.titleHighlightIndices || []\"\n ></riv-highlight>\n <riv-highlight\n class=\"subtitle\"\n [text]=\"node.subtitle\"\n [indices]=\"node.subtitleHighlightIndices || []\"\n ></riv-highlight>\n </div>\n <button\n (click)=\"\n setFavorite(node, !isFavorite); $event.stopPropagation()\n \"\n type=\"button\"\n >\n <riv-icon\n [name]=\"isFavorite ? 'HeartActive' : 'Heart'\"\n [size]=\"16\"\n [rivTooltip]=\"'Mark as favorite'\"\n ></riv-icon>\n </button>\n </div>\n </ng-template>\n </ng-template>\n </riv-simple-select>\n <ng-template\n #self\n [ngTemplateOutlet]=\"self\"\n let-favorites\n [ngTemplateOutletContext]=\"{ $implicit: favoritePresets$ | async }\"\n >\n <riv-input-label *ngIf=\"favorites.length\" [label]=\"'Favorites'\">\n <div class=\"shortcuts\">\n <button\n *ngFor=\"let favorite of favorites\"\n class=\"shortcut\"\n [class.active]=\"(selectedPreset$ | async)?.id === favorite.id\"\n (click)=\"userSelectedPreset$.next(favorite)\"\n type=\"button\"\n >\n <span class=\"title\">{{ favorite.title }}</span>\n <button\n (click)=\"setFavorite(favorite, false)\"\n [rivTooltip]=\"'Remove favorite'\"\n type=\"button\"\n >\n <riv-icon [name]=\"'HeartActive'\" [size]=\"16\"></riv-icon>\n </button>\n </button>\n </div>\n </riv-input-label>\n </ng-template>\n </div>\n\n <div class=\"calendars\">\n <riv-calendar\n class=\"left\"\n [activeYearMonth]=\"(leftActiveYearMonth$ | async) || TODAY\"\n (activeYearMonthChange)=\"userLeftActiveYearMonth$.next($event)\"\n [displayMin]=\"(min$ | async) || TODAY\"\n [displayMax]=\"(max$ | async) || TODAY\"\n [selectableMin]=\"(leftMin$ | async) || TODAY\"\n [selectableMax]=\"(leftMax$ | async) || TODAY\"\n [omitRange]=\"(leftOmitRange$ | async) || [TODAY, TODAY]\"\n [selectedValue]=\"(selectedValue$ | async) || TODAY\"\n (dateSelect)=\"userSelectedDate$.next($event)\"\n ></riv-calendar>\n <riv-calendar\n class=\"right\"\n [activeYearMonth]=\"(rightActiveYearMonth$ | async) || TODAY\"\n (activeYearMonthChange)=\"userRightActiveYearMonth$.next($event)\"\n [displayMin]=\"(min$ | async) || TODAY\"\n [displayMax]=\"(max$ | async) || TODAY\"\n [selectableMin]=\"(rightMin$ | async) || TODAY\"\n [selectableMax]=\"(rightMax$ | async) || TODAY\"\n [selectedValue]=\"(selectedValue$ | async) || TODAY\"\n (dateSelect)=\"userSelectedDate$.next($event)\"\n ></riv-calendar>\n </div>\n\n <footer class=\"buttons\">\n <button\n rivButton\n [size]=\"'small'\"\n [variant]=\"'ghost'\"\n (click)=\"userSelectedDate$.next(undefined)\"\n type=\"button\"\n >\n Clear\n </button>\n <button\n rivButton\n [size]=\"'small'\"\n [variant]=\"'primary'\"\n (click)=\"open$.next(false)\"\n type=\"button\"\n >\n Done\n </button>\n </footer>\n </div>\n </riv-callout>\n </ng-container>\n</ng-template>\n", styles: [".trigger{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);display:flex;gap:var(--size-small)}.trigger:focus{outline:none;border:var(--border-width) solid var(--purp-60)}.trigger:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}.value{font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-0);color:var(--type-light-high-contrast);padding:var(--size-small);flex-grow:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:pre}.value.placeholder{color:var(--type-light-disabled)}.chevron{display:flex;justify-content:center;align-items:center;padding:var(--size-small);background-color:var(--surface-light-2);border-left:var(--border-width) solid var(--border-light)}.content{display:inline-grid;grid-template-rows:1fr auto;grid-template-columns:calc(var(--base-grid-size) * 50) 1fr 1fr}.presets{grid-area:1 / 1 / 3 / 2;background-color:var(--surface-light-1);padding:var(--size-xlarge) var(--size-large);border-right:var(--border-width) solid var(--border-light);display:flex;flex-direction:column;gap:var(--size-medium)}.preset{display:flex;transition:background-color var(--short-transition)}.preset:hover{background-color:var(--surface-light-2)}.preset button{color:transparent;transition:color var(--short-transition);padding:var(--size-medium) var(--size-large) var(--size-medium) var(--size-small);cursor:pointer}.preset:hover button{color:var(--type-light-low-contrast)}.preset button:hover{color:var(--type-light-high-contrast)}.preset.favorite button{color:var(--type-light-link)}.preset .description{flex-grow:1;padding:var(--size-medium) var(--size-small) var(--size-medium) var(--size-medium)}.preset .title{display:block;font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-1)}.preset .subtitle{display:block;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-1);color:var(--type-light-low-contrast)}.shortcuts{display:flex;flex-direction:column;gap:var(--size-xsmall);overflow-y:auto}.shortcut{display:flex;align-items:center;padding:var(--size-small) var(--size-small) var(--size-small) var(--size-medium);gap:var(--size-small);border-radius:var(--border-radius-small);transition:background-color var(--short-transition);cursor:pointer}.shortcut:hover{background-color:var(--black-20)}.shortcut.active{background-color:var(--baloo-05)}.shortcut .title{flex-grow:1;text-align:left;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-2)}.shortcut button{color:transparent;transition:color var(--short-transition);cursor:pointer}.shortcut:hover button{color:var(--type-light-link)}.calendars{grid-column:2 / 4;display:grid;grid-template-columns:subgrid;grid-template-rows:subgrid;padding:var(--size-large)}.left{grid-area:1 / 1 / 2 / 2;padding-right:var(--size-large);border-right:var(--border-width) solid var(--border-light)}.right{padding-left:var(--size-large);grid-area:1 / 2 / 2 / 3}.buttons{grid-area:2 / 2 / 3 / 4;padding:var(--size-small);display:flex;justify-content:space-between}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "active"] }, { kind: "component", type: CalendarComponent, selector: "riv-calendar", inputs: ["activeYearMonth", "displayMin", "displayMax", "selectableMin", "selectableMax", "omitRange", "selectedValue"], outputs: ["activeYearMonthChange", "dateSelect"] }, { kind: "component", type: CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "component", type: HighlightComponent, selector: "riv-highlight", inputs: ["text", "indices"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "size", "customSize", "strokeWidth"] }, { kind: "component", type: InputLabelComponent, selector: "riv-input-label", inputs: ["label", "help", "required", "labelActionText"], outputs: ["labelAction"] }, { kind: "directive", type: OverlayDirective, selector: "[riv-overlay]" }, { kind: "component", type: SimpleSelectComponent, selector: "riv-simple-select", inputs: ["optionGroups", "selectedOption", "size", "disabled", "locked", "filterabilityOptions", "placeholder", "maxHeight", "maxWidth", "minHeight", "minWidth"], outputs: ["selectedOptionChange"] }, { kind: "directive", type: TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipCloseDelay"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: OptionGroupPipe, name: "rivOptionGroup" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
3140
+ DateRangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DateRangeComponent, selector: "riv-date-range", inputs: { showPresets: "showPresets", min: "min", max: "max", value: "value", placeholder: "placeholder", disabled: "disabled", alternativePresetList: "alternativePresetList" }, outputs: { valueChange: "valueChange" }, usesInheritance: true, ngImport: i0, template: "<riv-input-label\n [label]=\"label\"\n [help]=\"help\"\n [required]=\"required\"\n [labelActionText]=\"labelActionText\"\n (labelAction)=\"labelAction.emit($event)\"\n>\n <button\n #trigger\n class=\"trigger\"\n (click)=\"open$.next(true)\"\n [disabled]=\"disabled$ | async\"\n type=\"button\"\n >\n <ng-container\n *ngIf=\"displayValue$ | async; else placeholderValue; let display\"\n >\n <span class=\"value\">{{ display }}</span>\n </ng-container>\n <ng-template #placeholderValue>\n <span class=\"value placeholder\">{{ placeholder$ | async }}</span>\n </ng-template>\n <span class=\"chevron\">\n <riv-icon [name]=\"'Calendar'\" [size]=\"16\"></riv-icon>\n </span>\n </button>\n</riv-input-label>\n\n<ng-template\n #self\n [ngTemplateOutlet]=\"self\"\n let-inputValue\n [ngTemplateOutletContext]=\"{ $implicit: (value$ | async) }\"\n>\n <ng-container *ngIf=\"open$ | async\">\n <riv-callout\n *riv-overlay\n [anchor]=\"trigger\"\n [showCaret]=\"false\"\n [theme]=\"'light'\"\n [allowedPositions]=\"[\n 'top-left',\n 'top-right',\n 'bottom-right',\n 'bottom-left'\n ]\"\n [preferredPosition]=\"'bottom-right'\"\n (close)=\"open$.next(false); userSelectedDate$.next(inputValue)\"\n >\n <div class=\"content\">\n <div *ngIf=\"showPresets\" class=\"presets\">\n <riv-simple-select\n [label]=\"'Date presets'\"\n [filterabilityOptions]=\"{ enabled: true, placeholder: 'Search...' }\"\n [optionGroups]=\"\n (filteredPresetOptions$ | async) ?? [] | rivOptionGroup\n \"\n [selectedOption]=\"selectedPreset$ | async\"\n (selectedOptionChange)=\"userSelectedPreset$.next($event)\"\n >\n <ng-template #option let-node=\"node\">\n <ng-template\n #self\n [ngTemplateOutlet]=\"self\"\n let-isFavorite\n [ngTemplateOutletContext]=\"{\n $implicit: (favoritePresetIds$ | async)?.includes(node.id)\n }\"\n >\n <div class=\"preset\" [class.favorite]=\"isFavorite\">\n <div class=\"description\">\n <riv-highlight\n class=\"title\"\n [text]=\"node.title\"\n [indices]=\"node.titleHighlightIndices || []\"\n ></riv-highlight>\n <riv-highlight\n class=\"subtitle\"\n [text]=\"node.subtitle\"\n [indices]=\"node.subtitleHighlightIndices || []\"\n ></riv-highlight>\n </div>\n <button\n (click)=\"\n setFavorite(node, !isFavorite); $event.stopPropagation()\n \"\n type=\"button\"\n >\n <riv-icon\n [name]=\"isFavorite ? 'HeartActive' : 'Heart'\"\n [size]=\"16\"\n [rivTooltip]=\"'Mark as favorite'\"\n ></riv-icon>\n </button>\n </div>\n </ng-template>\n </ng-template>\n </riv-simple-select>\n <ng-template\n #self\n [ngTemplateOutlet]=\"self\"\n let-favorites\n [ngTemplateOutletContext]=\"{ $implicit: favoritePresets$ | async }\"\n >\n <riv-input-label *ngIf=\"favorites.length\" [label]=\"'Favorites'\">\n <div class=\"shortcuts\">\n <button\n *ngFor=\"let favorite of favorites\"\n class=\"shortcut\"\n [class.active]=\"(selectedPreset$ | async)?.id === favorite.id\"\n (click)=\"userSelectedPreset$.next(favorite)\"\n type=\"button\"\n >\n <span class=\"title\">{{ favorite.title }}</span>\n <button\n (click)=\"setFavorite(favorite, false)\"\n [rivTooltip]=\"'Remove favorite'\"\n type=\"button\"\n >\n <riv-icon [name]=\"'HeartActive'\" [size]=\"16\"></riv-icon>\n </button>\n </button>\n </div>\n </riv-input-label>\n </ng-template>\n </div>\n\n <div class=\"calendars\">\n <riv-calendar\n class=\"left\"\n [activeYearMonth]=\"(leftActiveYearMonth$ | async) || TODAY\"\n (activeYearMonthChange)=\"userLeftActiveYearMonth$.next($event)\"\n [displayMin]=\"(min$ | async) || TODAY\"\n [displayMax]=\"(max$ | async) || TODAY\"\n [selectableMin]=\"(leftMin$ | async) || TODAY\"\n [selectableMax]=\"(leftMax$ | async) || TODAY\"\n [omitRange]=\"(leftOmitRange$ | async) || [TODAY, TODAY]\"\n [selectedValue]=\"(selectedValue$ | async) || TODAY\"\n (dateSelect)=\"userSelectedDate$.next($event)\"\n ></riv-calendar>\n <riv-calendar\n class=\"right\"\n [activeYearMonth]=\"(rightActiveYearMonth$ | async) || TODAY\"\n (activeYearMonthChange)=\"userRightActiveYearMonth$.next($event)\"\n [displayMin]=\"(min$ | async) || TODAY\"\n [displayMax]=\"(max$ | async) || TODAY\"\n [selectableMin]=\"(rightMin$ | async) || TODAY\"\n [selectableMax]=\"(rightMax$ | async) || TODAY\"\n [selectedValue]=\"(selectedValue$ | async) || TODAY\"\n (dateSelect)=\"userSelectedDate$.next($event)\"\n ></riv-calendar>\n </div>\n\n <footer class=\"buttons\">\n <button\n rivButton\n [size]=\"'small'\"\n [variant]=\"'ghost'\"\n (click)=\"userSelectedDate$.next(undefined)\"\n type=\"button\"\n >\n Clear\n </button>\n <button\n rivButton\n [size]=\"'small'\"\n [variant]=\"'primary'\"\n (click)=\"open$.next(false)\"\n type=\"button\"\n >\n Done\n </button>\n </footer>\n </div>\n </riv-callout>\n </ng-container>\n</ng-template>\n", styles: [".trigger{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);display:flex;gap:var(--size-small)}.trigger:focus{outline:none;border:var(--border-width) solid var(--purp-60)}.trigger:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}.value{font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-0);color:var(--type-light-high-contrast);padding:var(--size-small);flex-grow:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:pre}.value.placeholder{color:var(--type-light-disabled)}.chevron{display:flex;justify-content:center;align-items:center;padding:var(--size-small)}.content{display:inline-grid;grid-template-rows:1fr auto;grid-template-columns:calc(var(--base-grid-size) * 50) 1fr 1fr}.presets{grid-area:1 / 1 / 3 / 2;background-color:var(--surface-light-1);padding:var(--size-xlarge) var(--size-large);border-right:var(--border-width) solid var(--border-light);display:flex;flex-direction:column;gap:var(--size-medium)}.preset{display:flex;transition:background-color var(--short-transition)}.preset:hover{background-color:var(--surface-light-2)}.preset button{color:transparent;transition:color var(--short-transition);padding:var(--size-medium) var(--size-large) var(--size-medium) var(--size-small);cursor:pointer}.preset:hover button{color:var(--type-light-low-contrast)}.preset button:hover{color:var(--type-light-high-contrast)}.preset.favorite button{color:var(--type-light-link)}.preset .description{flex-grow:1;padding:var(--size-medium) var(--size-small) var(--size-medium) var(--size-medium)}.preset .title{display:block;font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-1)}.preset .subtitle{display:block;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-1);color:var(--type-light-low-contrast)}.shortcuts{display:flex;flex-direction:column;gap:var(--size-xsmall);overflow-y:auto}.shortcut{display:flex;align-items:center;padding:var(--size-small) var(--size-small) var(--size-small) var(--size-medium);gap:var(--size-small);border-radius:var(--border-radius-small);transition:background-color var(--short-transition);cursor:pointer}.shortcut:hover{background-color:var(--black-20)}.shortcut.active{background-color:var(--baloo-05)}.shortcut .title{flex-grow:1;text-align:left;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-2)}.shortcut button{color:transparent;transition:color var(--short-transition);cursor:pointer}.shortcut:hover button{color:var(--type-light-link)}.calendars{grid-column:2 / 4;display:grid;grid-template-columns:subgrid;grid-template-rows:subgrid;padding:var(--size-large)}.left{grid-area:1 / 1 / 2 / 2;padding-right:var(--size-large);border-right:var(--border-width) solid var(--border-light)}.right{padding-left:var(--size-large);grid-area:1 / 2 / 2 / 3}.buttons{grid-area:2 / 2 / 3 / 4;padding:var(--size-small);display:flex;justify-content:space-between}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "active"] }, { kind: "component", type: CalendarComponent, selector: "riv-calendar", inputs: ["activeYearMonth", "displayMin", "displayMax", "selectableMin", "selectableMax", "omitRange", "selectedValue"], outputs: ["activeYearMonthChange", "dateSelect"] }, { kind: "component", type: CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "component", type: HighlightComponent, selector: "riv-highlight", inputs: ["text", "indices"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "size", "customSize", "strokeWidth"] }, { kind: "component", type: InputLabelComponent, selector: "riv-input-label", inputs: ["label", "help", "required", "labelActionText"], outputs: ["labelAction"] }, { kind: "directive", type: OverlayDirective, selector: "[riv-overlay]" }, { kind: "component", type: SimpleSelectComponent, selector: "riv-simple-select", inputs: ["optionGroups", "selectedOption", "size", "disabled", "locked", "filterabilityOptions", "placeholder", "maxHeight", "maxWidth", "minHeight", "minWidth"], outputs: ["selectedOptionChange"] }, { kind: "directive", type: TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipCloseDelay"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: OptionGroupPipe, name: "rivOptionGroup" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
3141
3141
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DateRangeComponent, decorators: [{
3142
3142
  type: Component,
3143
- args: [{ selector: 'riv-date-range', changeDetection: ChangeDetectionStrategy.OnPush, template: "<riv-input-label\n [label]=\"label\"\n [help]=\"help\"\n [required]=\"required\"\n [labelActionText]=\"labelActionText\"\n (labelAction)=\"labelAction.emit($event)\"\n>\n <button\n #trigger\n class=\"trigger\"\n (click)=\"open$.next(true)\"\n [disabled]=\"disabled$ | async\"\n type=\"button\"\n >\n <ng-container\n *ngIf=\"displayValue$ | async; else placeholderValue; let display\"\n >\n <span class=\"value\">{{ display }}</span>\n </ng-container>\n <ng-template #placeholderValue>\n <span class=\"value placeholder\">{{ placeholder$ | async }}</span>\n </ng-template>\n <span class=\"chevron\">\n <riv-icon [name]=\"'Calendar'\" [size]=\"16\"></riv-icon>\n </span>\n </button>\n</riv-input-label>\n\n<ng-template\n #self\n [ngTemplateOutlet]=\"self\"\n let-inputValue\n [ngTemplateOutletContext]=\"{ $implicit: (value$ | async) }\"\n>\n <ng-container *ngIf=\"open$ | async\">\n <riv-callout\n *riv-overlay\n [anchor]=\"trigger\"\n [showCaret]=\"false\"\n [theme]=\"'light'\"\n [allowedPositions]=\"[\n 'top-left',\n 'top-right',\n 'bottom-right',\n 'bottom-left'\n ]\"\n [preferredPosition]=\"'bottom-right'\"\n (close)=\"open$.next(false); userSelectedDate$.next(inputValue)\"\n >\n <div class=\"content\">\n <div *ngIf=\"showPresets\" class=\"presets\">\n <riv-simple-select\n [label]=\"'Date presets'\"\n [filterabilityOptions]=\"{ enabled: true, placeholder: 'Search...' }\"\n [optionGroups]=\"\n (filteredPresetOptions$ | async) ?? [] | rivOptionGroup\n \"\n [selectedOption]=\"selectedPreset$ | async\"\n (selectedOptionChange)=\"userSelectedPreset$.next($event)\"\n >\n <ng-template #option let-node=\"node\">\n <ng-template\n #self\n [ngTemplateOutlet]=\"self\"\n let-isFavorite\n [ngTemplateOutletContext]=\"{\n $implicit: (favoritePresetIds$ | async)?.includes(node.id)\n }\"\n >\n <div class=\"preset\" [class.favorite]=\"isFavorite\">\n <div class=\"description\">\n <riv-highlight\n class=\"title\"\n [text]=\"node.title\"\n [indices]=\"node.titleHighlightIndices || []\"\n ></riv-highlight>\n <riv-highlight\n class=\"subtitle\"\n [text]=\"node.subtitle\"\n [indices]=\"node.subtitleHighlightIndices || []\"\n ></riv-highlight>\n </div>\n <button\n (click)=\"\n setFavorite(node, !isFavorite); $event.stopPropagation()\n \"\n type=\"button\"\n >\n <riv-icon\n [name]=\"isFavorite ? 'HeartActive' : 'Heart'\"\n [size]=\"16\"\n [rivTooltip]=\"'Mark as favorite'\"\n ></riv-icon>\n </button>\n </div>\n </ng-template>\n </ng-template>\n </riv-simple-select>\n <ng-template\n #self\n [ngTemplateOutlet]=\"self\"\n let-favorites\n [ngTemplateOutletContext]=\"{ $implicit: favoritePresets$ | async }\"\n >\n <riv-input-label *ngIf=\"favorites.length\" [label]=\"'Favorites'\">\n <div class=\"shortcuts\">\n <button\n *ngFor=\"let favorite of favorites\"\n class=\"shortcut\"\n [class.active]=\"(selectedPreset$ | async)?.id === favorite.id\"\n (click)=\"userSelectedPreset$.next(favorite)\"\n type=\"button\"\n >\n <span class=\"title\">{{ favorite.title }}</span>\n <button\n (click)=\"setFavorite(favorite, false)\"\n [rivTooltip]=\"'Remove favorite'\"\n type=\"button\"\n >\n <riv-icon [name]=\"'HeartActive'\" [size]=\"16\"></riv-icon>\n </button>\n </button>\n </div>\n </riv-input-label>\n </ng-template>\n </div>\n\n <div class=\"calendars\">\n <riv-calendar\n class=\"left\"\n [activeYearMonth]=\"(leftActiveYearMonth$ | async) || TODAY\"\n (activeYearMonthChange)=\"userLeftActiveYearMonth$.next($event)\"\n [displayMin]=\"(min$ | async) || TODAY\"\n [displayMax]=\"(max$ | async) || TODAY\"\n [selectableMin]=\"(leftMin$ | async) || TODAY\"\n [selectableMax]=\"(leftMax$ | async) || TODAY\"\n [omitRange]=\"(leftOmitRange$ | async) || [TODAY, TODAY]\"\n [selectedValue]=\"(selectedValue$ | async) || TODAY\"\n (dateSelect)=\"userSelectedDate$.next($event)\"\n ></riv-calendar>\n <riv-calendar\n class=\"right\"\n [activeYearMonth]=\"(rightActiveYearMonth$ | async) || TODAY\"\n (activeYearMonthChange)=\"userRightActiveYearMonth$.next($event)\"\n [displayMin]=\"(min$ | async) || TODAY\"\n [displayMax]=\"(max$ | async) || TODAY\"\n [selectableMin]=\"(rightMin$ | async) || TODAY\"\n [selectableMax]=\"(rightMax$ | async) || TODAY\"\n [selectedValue]=\"(selectedValue$ | async) || TODAY\"\n (dateSelect)=\"userSelectedDate$.next($event)\"\n ></riv-calendar>\n </div>\n\n <footer class=\"buttons\">\n <button\n rivButton\n [size]=\"'small'\"\n [variant]=\"'ghost'\"\n (click)=\"userSelectedDate$.next(undefined)\"\n type=\"button\"\n >\n Clear\n </button>\n <button\n rivButton\n [size]=\"'small'\"\n [variant]=\"'primary'\"\n (click)=\"open$.next(false)\"\n type=\"button\"\n >\n Done\n </button>\n </footer>\n </div>\n </riv-callout>\n </ng-container>\n</ng-template>\n", styles: [".trigger{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);display:flex;gap:var(--size-small)}.trigger:focus{outline:none;border:var(--border-width) solid var(--purp-60)}.trigger:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}.value{font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-0);color:var(--type-light-high-contrast);padding:var(--size-small);flex-grow:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:pre}.value.placeholder{color:var(--type-light-disabled)}.chevron{display:flex;justify-content:center;align-items:center;padding:var(--size-small);background-color:var(--surface-light-2);border-left:var(--border-width) solid var(--border-light)}.content{display:inline-grid;grid-template-rows:1fr auto;grid-template-columns:calc(var(--base-grid-size) * 50) 1fr 1fr}.presets{grid-area:1 / 1 / 3 / 2;background-color:var(--surface-light-1);padding:var(--size-xlarge) var(--size-large);border-right:var(--border-width) solid var(--border-light);display:flex;flex-direction:column;gap:var(--size-medium)}.preset{display:flex;transition:background-color var(--short-transition)}.preset:hover{background-color:var(--surface-light-2)}.preset button{color:transparent;transition:color var(--short-transition);padding:var(--size-medium) var(--size-large) var(--size-medium) var(--size-small);cursor:pointer}.preset:hover button{color:var(--type-light-low-contrast)}.preset button:hover{color:var(--type-light-high-contrast)}.preset.favorite button{color:var(--type-light-link)}.preset .description{flex-grow:1;padding:var(--size-medium) var(--size-small) var(--size-medium) var(--size-medium)}.preset .title{display:block;font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-1)}.preset .subtitle{display:block;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-1);color:var(--type-light-low-contrast)}.shortcuts{display:flex;flex-direction:column;gap:var(--size-xsmall);overflow-y:auto}.shortcut{display:flex;align-items:center;padding:var(--size-small) var(--size-small) var(--size-small) var(--size-medium);gap:var(--size-small);border-radius:var(--border-radius-small);transition:background-color var(--short-transition);cursor:pointer}.shortcut:hover{background-color:var(--black-20)}.shortcut.active{background-color:var(--baloo-05)}.shortcut .title{flex-grow:1;text-align:left;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-2)}.shortcut button{color:transparent;transition:color var(--short-transition);cursor:pointer}.shortcut:hover button{color:var(--type-light-link)}.calendars{grid-column:2 / 4;display:grid;grid-template-columns:subgrid;grid-template-rows:subgrid;padding:var(--size-large)}.left{grid-area:1 / 1 / 2 / 2;padding-right:var(--size-large);border-right:var(--border-width) solid var(--border-light)}.right{padding-left:var(--size-large);grid-area:1 / 2 / 2 / 3}.buttons{grid-area:2 / 2 / 3 / 4;padding:var(--size-small);display:flex;justify-content:space-between}\n"] }]
3143
+ args: [{ selector: 'riv-date-range', changeDetection: ChangeDetectionStrategy.OnPush, template: "<riv-input-label\n [label]=\"label\"\n [help]=\"help\"\n [required]=\"required\"\n [labelActionText]=\"labelActionText\"\n (labelAction)=\"labelAction.emit($event)\"\n>\n <button\n #trigger\n class=\"trigger\"\n (click)=\"open$.next(true)\"\n [disabled]=\"disabled$ | async\"\n type=\"button\"\n >\n <ng-container\n *ngIf=\"displayValue$ | async; else placeholderValue; let display\"\n >\n <span class=\"value\">{{ display }}</span>\n </ng-container>\n <ng-template #placeholderValue>\n <span class=\"value placeholder\">{{ placeholder$ | async }}</span>\n </ng-template>\n <span class=\"chevron\">\n <riv-icon [name]=\"'Calendar'\" [size]=\"16\"></riv-icon>\n </span>\n </button>\n</riv-input-label>\n\n<ng-template\n #self\n [ngTemplateOutlet]=\"self\"\n let-inputValue\n [ngTemplateOutletContext]=\"{ $implicit: (value$ | async) }\"\n>\n <ng-container *ngIf=\"open$ | async\">\n <riv-callout\n *riv-overlay\n [anchor]=\"trigger\"\n [showCaret]=\"false\"\n [theme]=\"'light'\"\n [allowedPositions]=\"[\n 'top-left',\n 'top-right',\n 'bottom-right',\n 'bottom-left'\n ]\"\n [preferredPosition]=\"'bottom-right'\"\n (close)=\"open$.next(false); userSelectedDate$.next(inputValue)\"\n >\n <div class=\"content\">\n <div *ngIf=\"showPresets\" class=\"presets\">\n <riv-simple-select\n [label]=\"'Date presets'\"\n [filterabilityOptions]=\"{ enabled: true, placeholder: 'Search...' }\"\n [optionGroups]=\"\n (filteredPresetOptions$ | async) ?? [] | rivOptionGroup\n \"\n [selectedOption]=\"selectedPreset$ | async\"\n (selectedOptionChange)=\"userSelectedPreset$.next($event)\"\n >\n <ng-template #option let-node=\"node\">\n <ng-template\n #self\n [ngTemplateOutlet]=\"self\"\n let-isFavorite\n [ngTemplateOutletContext]=\"{\n $implicit: (favoritePresetIds$ | async)?.includes(node.id)\n }\"\n >\n <div class=\"preset\" [class.favorite]=\"isFavorite\">\n <div class=\"description\">\n <riv-highlight\n class=\"title\"\n [text]=\"node.title\"\n [indices]=\"node.titleHighlightIndices || []\"\n ></riv-highlight>\n <riv-highlight\n class=\"subtitle\"\n [text]=\"node.subtitle\"\n [indices]=\"node.subtitleHighlightIndices || []\"\n ></riv-highlight>\n </div>\n <button\n (click)=\"\n setFavorite(node, !isFavorite); $event.stopPropagation()\n \"\n type=\"button\"\n >\n <riv-icon\n [name]=\"isFavorite ? 'HeartActive' : 'Heart'\"\n [size]=\"16\"\n [rivTooltip]=\"'Mark as favorite'\"\n ></riv-icon>\n </button>\n </div>\n </ng-template>\n </ng-template>\n </riv-simple-select>\n <ng-template\n #self\n [ngTemplateOutlet]=\"self\"\n let-favorites\n [ngTemplateOutletContext]=\"{ $implicit: favoritePresets$ | async }\"\n >\n <riv-input-label *ngIf=\"favorites.length\" [label]=\"'Favorites'\">\n <div class=\"shortcuts\">\n <button\n *ngFor=\"let favorite of favorites\"\n class=\"shortcut\"\n [class.active]=\"(selectedPreset$ | async)?.id === favorite.id\"\n (click)=\"userSelectedPreset$.next(favorite)\"\n type=\"button\"\n >\n <span class=\"title\">{{ favorite.title }}</span>\n <button\n (click)=\"setFavorite(favorite, false)\"\n [rivTooltip]=\"'Remove favorite'\"\n type=\"button\"\n >\n <riv-icon [name]=\"'HeartActive'\" [size]=\"16\"></riv-icon>\n </button>\n </button>\n </div>\n </riv-input-label>\n </ng-template>\n </div>\n\n <div class=\"calendars\">\n <riv-calendar\n class=\"left\"\n [activeYearMonth]=\"(leftActiveYearMonth$ | async) || TODAY\"\n (activeYearMonthChange)=\"userLeftActiveYearMonth$.next($event)\"\n [displayMin]=\"(min$ | async) || TODAY\"\n [displayMax]=\"(max$ | async) || TODAY\"\n [selectableMin]=\"(leftMin$ | async) || TODAY\"\n [selectableMax]=\"(leftMax$ | async) || TODAY\"\n [omitRange]=\"(leftOmitRange$ | async) || [TODAY, TODAY]\"\n [selectedValue]=\"(selectedValue$ | async) || TODAY\"\n (dateSelect)=\"userSelectedDate$.next($event)\"\n ></riv-calendar>\n <riv-calendar\n class=\"right\"\n [activeYearMonth]=\"(rightActiveYearMonth$ | async) || TODAY\"\n (activeYearMonthChange)=\"userRightActiveYearMonth$.next($event)\"\n [displayMin]=\"(min$ | async) || TODAY\"\n [displayMax]=\"(max$ | async) || TODAY\"\n [selectableMin]=\"(rightMin$ | async) || TODAY\"\n [selectableMax]=\"(rightMax$ | async) || TODAY\"\n [selectedValue]=\"(selectedValue$ | async) || TODAY\"\n (dateSelect)=\"userSelectedDate$.next($event)\"\n ></riv-calendar>\n </div>\n\n <footer class=\"buttons\">\n <button\n rivButton\n [size]=\"'small'\"\n [variant]=\"'ghost'\"\n (click)=\"userSelectedDate$.next(undefined)\"\n type=\"button\"\n >\n Clear\n </button>\n <button\n rivButton\n [size]=\"'small'\"\n [variant]=\"'primary'\"\n (click)=\"open$.next(false)\"\n type=\"button\"\n >\n Done\n </button>\n </footer>\n </div>\n </riv-callout>\n </ng-container>\n</ng-template>\n", styles: [".trigger{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);display:flex;gap:var(--size-small)}.trigger:focus{outline:none;border:var(--border-width) solid var(--purp-60)}.trigger:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}.value{font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-0);color:var(--type-light-high-contrast);padding:var(--size-small);flex-grow:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:pre}.value.placeholder{color:var(--type-light-disabled)}.chevron{display:flex;justify-content:center;align-items:center;padding:var(--size-small)}.content{display:inline-grid;grid-template-rows:1fr auto;grid-template-columns:calc(var(--base-grid-size) * 50) 1fr 1fr}.presets{grid-area:1 / 1 / 3 / 2;background-color:var(--surface-light-1);padding:var(--size-xlarge) var(--size-large);border-right:var(--border-width) solid var(--border-light);display:flex;flex-direction:column;gap:var(--size-medium)}.preset{display:flex;transition:background-color var(--short-transition)}.preset:hover{background-color:var(--surface-light-2)}.preset button{color:transparent;transition:color var(--short-transition);padding:var(--size-medium) var(--size-large) var(--size-medium) var(--size-small);cursor:pointer}.preset:hover button{color:var(--type-light-low-contrast)}.preset button:hover{color:var(--type-light-high-contrast)}.preset.favorite button{color:var(--type-light-link)}.preset .description{flex-grow:1;padding:var(--size-medium) var(--size-small) var(--size-medium) var(--size-medium)}.preset .title{display:block;font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-1)}.preset .subtitle{display:block;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-1);color:var(--type-light-low-contrast)}.shortcuts{display:flex;flex-direction:column;gap:var(--size-xsmall);overflow-y:auto}.shortcut{display:flex;align-items:center;padding:var(--size-small) var(--size-small) var(--size-small) var(--size-medium);gap:var(--size-small);border-radius:var(--border-radius-small);transition:background-color var(--short-transition);cursor:pointer}.shortcut:hover{background-color:var(--black-20)}.shortcut.active{background-color:var(--baloo-05)}.shortcut .title{flex-grow:1;text-align:left;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-2)}.shortcut button{color:transparent;transition:color var(--short-transition);cursor:pointer}.shortcut:hover button{color:var(--type-light-link)}.calendars{grid-column:2 / 4;display:grid;grid-template-columns:subgrid;grid-template-rows:subgrid;padding:var(--size-large)}.left{grid-area:1 / 1 / 2 / 2;padding-right:var(--size-large);border-right:var(--border-width) solid var(--border-light)}.right{padding-left:var(--size-large);grid-area:1 / 2 / 2 / 3}.buttons{grid-area:2 / 2 / 3 / 4;padding:var(--size-small);display:flex;justify-content:space-between}\n"] }]
3144
3144
  }], propDecorators: { showPresets: [{
3145
3145
  type: Input
3146
3146
  }], min: [{
@@ -3422,10 +3422,10 @@ class DateComponent extends InputLabelComponent {
3422
3422
  }
3423
3423
  }
3424
3424
  DateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DateComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
3425
- DateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DateComponent, selector: "riv-date", inputs: { min: "min", max: "max", value: "value", placeholder: "placeholder", disabled: "disabled", open: "open" }, outputs: { valueChange: "valueChange" }, usesInheritance: true, ngImport: i0, template: "<riv-input-label\n [label]=\"label\"\n [help]=\"help\"\n [required]=\"required\"\n [labelActionText]=\"labelActionText\"\n (labelAction)=\"labelAction.emit($event)\"\n>\n <button\n #trigger\n class=\"trigger\"\n (click)=\"open$.next(true)\"\n [disabled]=\"disabled\"\n type=\"button\"\n >\n <ng-container *ngIf=\"value; else placeholderValue\">\n <span class=\"value\">{{ value | rivDate }}</span>\n </ng-container>\n <ng-template #placeholderValue>\n <span class=\"value placeholder\">{{ placeholder }}</span>\n </ng-template>\n <span class=\"chevron\">\n <riv-icon [name]=\"'Calendar'\" [size]=\"16\"></riv-icon>\n </span>\n </button>\n</riv-input-label>\n<ng-container *ngIf=\"open$ | async\">\n <riv-callout\n *riv-overlay\n [anchor]=\"trigger\"\n [showCaret]=\"false\"\n [theme]=\"'light'\"\n [allowedPositions]=\"[\n 'top-left',\n 'top-right',\n 'bottom-right',\n 'bottom-left'\n ]\"\n [preferredPosition]=\"'bottom-right'\"\n (close)=\"open$.next(false)\"\n >\n <div class=\"content\">\n <riv-calendar\n [activeYearMonth]=\"activeYearMonth\"\n (activeYearMonthChange)=\"activeYearMonth = $event\"\n [displayMin]=\"min\"\n [displayMax]=\"max\"\n [selectableMin]=\"min\"\n [selectableMax]=\"max\"\n [selectedValue]=\"value\"\n (dateSelect)=\"valueChange.next($event); open$.next(false)\"\n ></riv-calendar>\n </div>\n </riv-callout>\n</ng-container>\n", styles: [".trigger{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);display:flex;gap:var(--size-small)}.trigger:focus{outline:none;border:var(--border-width) solid var(--purp-60)}.trigger:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}.value{font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-0);color:var(--type-light-high-contrast);padding:var(--size-small);flex-grow:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:pre}.value.placeholder{color:var(--type-light-disabled)}.chevron{display:flex;justify-content:center;align-items:center;padding:var(--size-small);background-color:var(--surface-light-2);border-left:var(--border-width) solid var(--border-light)}.content{padding:var(--size-large)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CalendarComponent, selector: "riv-calendar", inputs: ["activeYearMonth", "displayMin", "displayMax", "selectableMin", "selectableMax", "omitRange", "selectedValue"], outputs: ["activeYearMonthChange", "dateSelect"] }, { kind: "component", type: CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "size", "customSize", "strokeWidth"] }, { kind: "component", type: InputLabelComponent, selector: "riv-input-label", inputs: ["label", "help", "required", "labelActionText"], outputs: ["labelAction"] }, { kind: "directive", type: OverlayDirective, selector: "[riv-overlay]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: DatePipe, name: "rivDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
3425
+ DateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DateComponent, selector: "riv-date", inputs: { min: "min", max: "max", value: "value", placeholder: "placeholder", disabled: "disabled", open: "open" }, outputs: { valueChange: "valueChange" }, usesInheritance: true, ngImport: i0, template: "<riv-input-label\n [label]=\"label\"\n [help]=\"help\"\n [required]=\"required\"\n [labelActionText]=\"labelActionText\"\n (labelAction)=\"labelAction.emit($event)\"\n>\n <button\n #trigger\n class=\"trigger\"\n (click)=\"open$.next(true)\"\n [disabled]=\"disabled\"\n type=\"button\"\n >\n <ng-container *ngIf=\"value; else placeholderValue\">\n <span class=\"value\">{{ value | rivDate }}</span>\n </ng-container>\n <ng-template #placeholderValue>\n <span class=\"value placeholder\">{{ placeholder }}</span>\n </ng-template>\n <span class=\"chevron\">\n <riv-icon [name]=\"'Calendar'\" [size]=\"16\"></riv-icon>\n </span>\n </button>\n</riv-input-label>\n<ng-container *ngIf=\"open$ | async\">\n <riv-callout\n *riv-overlay\n [anchor]=\"trigger\"\n [showCaret]=\"false\"\n [theme]=\"'light'\"\n [allowedPositions]=\"[\n 'top-left',\n 'top-right',\n 'bottom-right',\n 'bottom-left'\n ]\"\n [preferredPosition]=\"'bottom-right'\"\n (close)=\"open$.next(false)\"\n >\n <div class=\"content\">\n <riv-calendar\n [activeYearMonth]=\"activeYearMonth\"\n (activeYearMonthChange)=\"activeYearMonth = $event\"\n [displayMin]=\"min\"\n [displayMax]=\"max\"\n [selectableMin]=\"min\"\n [selectableMax]=\"max\"\n [selectedValue]=\"value\"\n (dateSelect)=\"valueChange.next($event); open$.next(false)\"\n ></riv-calendar>\n </div>\n </riv-callout>\n</ng-container>\n", styles: [".trigger{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);display:flex;gap:var(--size-small)}.trigger:focus{outline:none;border:var(--border-width) solid var(--purp-60)}.trigger:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}.value{font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-0);color:var(--type-light-high-contrast);padding:var(--size-small);flex-grow:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:pre}.value.placeholder{color:var(--type-light-disabled)}.chevron{display:flex;justify-content:center;align-items:center;padding:var(--size-small)}.content{padding:var(--size-large)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CalendarComponent, selector: "riv-calendar", inputs: ["activeYearMonth", "displayMin", "displayMax", "selectableMin", "selectableMax", "omitRange", "selectedValue"], outputs: ["activeYearMonthChange", "dateSelect"] }, { kind: "component", type: CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "size", "customSize", "strokeWidth"] }, { kind: "component", type: InputLabelComponent, selector: "riv-input-label", inputs: ["label", "help", "required", "labelActionText"], outputs: ["labelAction"] }, { kind: "directive", type: OverlayDirective, selector: "[riv-overlay]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: DatePipe, name: "rivDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
3426
3426
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DateComponent, decorators: [{
3427
3427
  type: Component,
3428
- args: [{ selector: 'riv-date', changeDetection: ChangeDetectionStrategy.OnPush, template: "<riv-input-label\n [label]=\"label\"\n [help]=\"help\"\n [required]=\"required\"\n [labelActionText]=\"labelActionText\"\n (labelAction)=\"labelAction.emit($event)\"\n>\n <button\n #trigger\n class=\"trigger\"\n (click)=\"open$.next(true)\"\n [disabled]=\"disabled\"\n type=\"button\"\n >\n <ng-container *ngIf=\"value; else placeholderValue\">\n <span class=\"value\">{{ value | rivDate }}</span>\n </ng-container>\n <ng-template #placeholderValue>\n <span class=\"value placeholder\">{{ placeholder }}</span>\n </ng-template>\n <span class=\"chevron\">\n <riv-icon [name]=\"'Calendar'\" [size]=\"16\"></riv-icon>\n </span>\n </button>\n</riv-input-label>\n<ng-container *ngIf=\"open$ | async\">\n <riv-callout\n *riv-overlay\n [anchor]=\"trigger\"\n [showCaret]=\"false\"\n [theme]=\"'light'\"\n [allowedPositions]=\"[\n 'top-left',\n 'top-right',\n 'bottom-right',\n 'bottom-left'\n ]\"\n [preferredPosition]=\"'bottom-right'\"\n (close)=\"open$.next(false)\"\n >\n <div class=\"content\">\n <riv-calendar\n [activeYearMonth]=\"activeYearMonth\"\n (activeYearMonthChange)=\"activeYearMonth = $event\"\n [displayMin]=\"min\"\n [displayMax]=\"max\"\n [selectableMin]=\"min\"\n [selectableMax]=\"max\"\n [selectedValue]=\"value\"\n (dateSelect)=\"valueChange.next($event); open$.next(false)\"\n ></riv-calendar>\n </div>\n </riv-callout>\n</ng-container>\n", styles: [".trigger{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);display:flex;gap:var(--size-small)}.trigger:focus{outline:none;border:var(--border-width) solid var(--purp-60)}.trigger:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}.value{font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-0);color:var(--type-light-high-contrast);padding:var(--size-small);flex-grow:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:pre}.value.placeholder{color:var(--type-light-disabled)}.chevron{display:flex;justify-content:center;align-items:center;padding:var(--size-small);background-color:var(--surface-light-2);border-left:var(--border-width) solid var(--border-light)}.content{padding:var(--size-large)}\n"] }]
3428
+ args: [{ selector: 'riv-date', changeDetection: ChangeDetectionStrategy.OnPush, template: "<riv-input-label\n [label]=\"label\"\n [help]=\"help\"\n [required]=\"required\"\n [labelActionText]=\"labelActionText\"\n (labelAction)=\"labelAction.emit($event)\"\n>\n <button\n #trigger\n class=\"trigger\"\n (click)=\"open$.next(true)\"\n [disabled]=\"disabled\"\n type=\"button\"\n >\n <ng-container *ngIf=\"value; else placeholderValue\">\n <span class=\"value\">{{ value | rivDate }}</span>\n </ng-container>\n <ng-template #placeholderValue>\n <span class=\"value placeholder\">{{ placeholder }}</span>\n </ng-template>\n <span class=\"chevron\">\n <riv-icon [name]=\"'Calendar'\" [size]=\"16\"></riv-icon>\n </span>\n </button>\n</riv-input-label>\n<ng-container *ngIf=\"open$ | async\">\n <riv-callout\n *riv-overlay\n [anchor]=\"trigger\"\n [showCaret]=\"false\"\n [theme]=\"'light'\"\n [allowedPositions]=\"[\n 'top-left',\n 'top-right',\n 'bottom-right',\n 'bottom-left'\n ]\"\n [preferredPosition]=\"'bottom-right'\"\n (close)=\"open$.next(false)\"\n >\n <div class=\"content\">\n <riv-calendar\n [activeYearMonth]=\"activeYearMonth\"\n (activeYearMonthChange)=\"activeYearMonth = $event\"\n [displayMin]=\"min\"\n [displayMax]=\"max\"\n [selectableMin]=\"min\"\n [selectableMax]=\"max\"\n [selectedValue]=\"value\"\n (dateSelect)=\"valueChange.next($event); open$.next(false)\"\n ></riv-calendar>\n </div>\n </riv-callout>\n</ng-container>\n", styles: [".trigger{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);display:flex;gap:var(--size-small)}.trigger:focus{outline:none;border:var(--border-width) solid var(--purp-60)}.trigger:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}.value{font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-0);color:var(--type-light-high-contrast);padding:var(--size-small);flex-grow:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:pre}.value.placeholder{color:var(--type-light-disabled)}.chevron{display:flex;justify-content:center;align-items:center;padding:var(--size-small)}.content{padding:var(--size-large)}\n"] }]
3429
3429
  }], propDecorators: { min: [{
3430
3430
  type: Input
3431
3431
  }], max: [{