@rivet-health/design-system 40.44.2 → 40.44.3

package/esm2022/lib/input/date/date.component.mjs

@@ -176,10 +176,10 @@ export class DateComponent extends InputLabelComponent {
             this.valueChange.emit(next);
         this.cdr.markForCheck();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DateComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DateComponent, selector: "riv-date", inputs: { min: "min", max: "max", value: "value", placeholder: "placeholder", disabled: "disabled", size: "size", showClearButton: "showClearButton", showTodayButton: "showTodayButton", rollingTodayLabel: "rollingTodayLabel", open: "open" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "document:mousedown": "onDocumentMouseDown($event.target)" } }, queries: [{ propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<riv-input-label\n  [label]=\"label\"\n  [help]=\"help\"\n  [required]=\"required\"\n  [state]=\"state\"\n  [errorMessage]=\"errorMessage\"\n  [labelActionText]=\"labelActionText\"\n  (labelAction)=\"labelAction.emit($event)\"\n>\n  <div\n    #trigger\n    class=\"trigger\"\n    [class.xsmall]=\"size === 'xsmall'\"\n    [class.small]=\"size === 'small'\"\n    [class.large]=\"size === 'large'\"\n    [class.xlarge]=\"size === 'xlarge'\"\n    [class.warning]=\"state === 'warning'\"\n    [class.error]=\"state === 'error'\"\n    [class.disabled]=\"disabled\"\n  >\n    <input\n      #input\n      class=\"value\"\n      [placeholder]=\"placeholder\"\n      [value]=\"inputText\"\n      [disabled]=\"disabled\"\n      [attr.aria-disabled]=\"disabled ? 'true' : null\"\n      [attr.aria-label]=\"label || null\"\n      [attr.aria-controls]=\"calendarId\"\n      [attr.aria-expanded]=\"open$ | async\"\n      role=\"combobox\"\n      aria-haspopup=\"dialog\"\n      aria-autocomplete=\"none\"\n      (input)=\"onInputChange(input.value)\"\n      (blur)=\"onInputBlur($event)\"\n      (focus)=\"onInputFocus()\"\n      (keydown.enter)=\"input.blur(); open$.next(false); $event.preventDefault()\"\n      type=\"text\"\n      autocomplete=\"off\"\n      spellcheck=\"false\"\n    />\n    <button\n      class=\"chevron\"\n      (mousedown)=\"$event.preventDefault()\"\n      (click)=\"toggleCalendar()\"\n      [disabled]=\"disabled\"\n      [attr.aria-disabled]=\"disabled ? 'true' : null\"\n      [attr.aria-label]=\"(open$ | async) ? 'Close calendar' : 'Open calendar'\"\n      type=\"button\"\n      tabindex=\"-1\"\n    >\n      <riv-icon [name]=\"'Calendar'\" [size]=\"16\"></riv-icon>\n    </button>\n  </div>\n</riv-input-label>\n<ng-container *ngIf=\"open$ | async\">\n  <riv-callout\n    *riv-overlay\n    [anchor]=\"trigger\"\n    [isModal]=\"false\"\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 [attr.id]=\"calendarId\" (mousedown)=\"$event.preventDefault()\">\n      <header *ngIf=\"headerTemplate\">\n        <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n      </header>\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]=\"selectedCalendarValue\"\n          (dateSelect)=\"onDateSelect($event); input.blur()\"\n        ></riv-calendar>\n      </div>\n      <footer *ngIf=\"showClearButton || showTodayButton\" class=\"buttons\">\n        <button\n          *ngIf=\"showClearButton\"\n          rivButton\n          [size]=\"'small'\"\n          [variant]=\"'ghost'\"\n          (click)=\"clearValue(); input.blur()\"\n          type=\"button\"\n        >\n          Clear\n        </button>\n        <button\n          *ngIf=\"showTodayButton\"\n          class=\"today\"\n          rivButton\n          [size]=\"'small'\"\n          [variant]=\"'basic'\"\n          [disabled]=\"!isTodaySelectable\"\n          (click)=\"selectToday(); input.blur()\"\n          type=\"button\"\n        >\n          Today\n        </button>\n      </footer>\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);background-color:var(--surface-light-0);padding-left:var(--size-small);position:relative}.trigger:focus-within{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:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-small) 0;flex-grow:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:pre;border:none;background:transparent;outline:none;width:100%}.value::placeholder{color:var(--type-light-low-contrast)}.value:disabled{color:var(--type-light-disabled)}.trigger.xsmall .value{font:var(--input-small);padding:var(--size-xsmall) 0}.trigger.small .value{font:var(--input-small)}.trigger.large .value{font:var(--input-large);padding:var(--size-medium) var(--size-xsmall)}.trigger.xlarge .value{font:var(--input-large);padding:var(--size-large) var(--size-small)}.chevron{display:flex;justify-content:center;align-items:center;padding:var(--size-xsmall) calc(var(--base-grid-size) * 1.5);border:none;background:transparent;cursor:pointer;color:var(--type-light-high-contrast)}.chevron:disabled{color:var(--type-light-disabled);cursor:not-allowed}.trigger.warning{border-color:var(--surface-dark-caution)}.trigger.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}.content{padding:var(--size-xlarge)}.buttons{padding:0 var(--size-xlarge) var(--size-xlarge);display:flex;justify-content:space-between}.buttons .today{margin-left:auto}\n"], dependencies: [{ 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", "current"] }, { 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.IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "component", type: i6.InputLabelComponent, selector: "riv-input-label", inputs: ["label", "help", "required", "labelActionText", "errorMessage", "state"], outputs: ["labelAction"] }, { kind: "directive", type: i7.OverlayDirective, selector: "[riv-overlay]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DateComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DateComponent, selector: "riv-date", inputs: { min: "min", max: "max", value: "value", placeholder: "placeholder", disabled: "disabled", size: "size", showClearButton: "showClearButton", showTodayButton: "showTodayButton", rollingTodayLabel: "rollingTodayLabel", open: "open" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "document:mousedown": "onDocumentMouseDown($event.target)" } }, queries: [{ propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<riv-input-label\n  [label]=\"label\"\n  [help]=\"help\"\n  [required]=\"required\"\n  [state]=\"state\"\n  [errorMessage]=\"errorMessage\"\n  [labelActionText]=\"labelActionText\"\n  (labelAction)=\"labelAction.emit($event)\"\n>\n  <div\n    #trigger\n    class=\"trigger\"\n    [class.xsmall]=\"size === 'xsmall'\"\n    [class.small]=\"size === 'small'\"\n    [class.large]=\"size === 'large'\"\n    [class.xlarge]=\"size === 'xlarge'\"\n    [class.warning]=\"state === 'warning'\"\n    [class.error]=\"state === 'error'\"\n    [class.disabled]=\"disabled\"\n  >\n    <input\n      #input\n      class=\"value\"\n      [placeholder]=\"placeholder\"\n      [value]=\"inputText\"\n      [disabled]=\"disabled\"\n      [attr.aria-disabled]=\"disabled ? 'true' : null\"\n      [attr.aria-label]=\"label || null\"\n      [attr.aria-controls]=\"calendarId\"\n      [attr.aria-expanded]=\"open$ | async\"\n      role=\"combobox\"\n      aria-haspopup=\"dialog\"\n      aria-autocomplete=\"none\"\n      (input)=\"onInputChange(input.value)\"\n      (blur)=\"onInputBlur($event)\"\n      (focus)=\"onInputFocus()\"\n      (keydown.enter)=\"input.blur(); open$.next(false); $event.preventDefault()\"\n      type=\"text\"\n      autocomplete=\"off\"\n      spellcheck=\"false\"\n    />\n    <button\n      class=\"chevron\"\n      (mousedown)=\"$event.preventDefault()\"\n      (click)=\"toggleCalendar()\"\n      [disabled]=\"disabled\"\n      [attr.aria-disabled]=\"disabled ? 'true' : null\"\n      [attr.aria-label]=\"(open$ | async) ? 'Close calendar' : 'Open calendar'\"\n      type=\"button\"\n      tabindex=\"-1\"\n    >\n      <riv-icon [name]=\"'Calendar'\" [size]=\"16\"></riv-icon>\n    </button>\n  </div>\n</riv-input-label>\n<ng-container *ngIf=\"open$ | async\">\n  <riv-callout\n    *riv-overlay\n    [anchor]=\"trigger\"\n    [isModal]=\"false\"\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 [attr.id]=\"calendarId\" (mousedown)=\"$event.preventDefault()\">\n      <header *ngIf=\"headerTemplate\">\n        <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n      </header>\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]=\"selectedCalendarValue\"\n          (dateSelect)=\"onDateSelect($event); input.blur()\"\n        ></riv-calendar>\n      </div>\n      <footer *ngIf=\"showClearButton || showTodayButton\" class=\"buttons\">\n        <button\n          *ngIf=\"showClearButton\"\n          rivButton\n          [size]=\"'small'\"\n          [variant]=\"'ghost'\"\n          (click)=\"clearValue(); input.blur()\"\n          type=\"button\"\n        >\n          Clear\n        </button>\n        <button\n          *ngIf=\"showTodayButton\"\n          class=\"today\"\n          rivButton\n          [size]=\"'small'\"\n          [variant]=\"'basic'\"\n          [disabled]=\"!isTodaySelectable\"\n          (click)=\"selectToday(); input.blur()\"\n          type=\"button\"\n        >\n          Today\n        </button>\n      </footer>\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);background-color:var(--surface-light-0);padding-left:var(--size-small);position:relative}.trigger:focus-within{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:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-small) 0;flex-grow:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:pre;border:none;background:transparent;outline:none;width:100%}.value::placeholder{color:var(--type-light-low-contrast)}.value:disabled{color:var(--type-light-disabled)}.trigger.xsmall .value{font:var(--input-small);padding:var(--size-xsmall) 0}.trigger.small .value{font:var(--input-small)}.trigger.large .value{font:var(--input-large);padding:var(--size-medium) var(--size-xsmall)}.trigger.xlarge .value{font:var(--input-large);padding:var(--size-large) var(--size-small)}.chevron{display:flex;justify-content:center;align-items:center;padding:var(--size-xsmall) calc(var(--base-grid-size) * 1.5);border:none;background:transparent;cursor:pointer;color:var(--type-light-high-contrast)}.chevron:disabled{color:var(--type-light-disabled);cursor:not-allowed}.trigger.warning{border-color:var(--surface-dark-caution)}.trigger.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}.content{padding:var(--size-xlarge)}.buttons{padding:0 var(--size-xlarge) var(--size-xlarge);display:flex;justify-content:space-between}.buttons .today{margin-left:auto}\n"], dependencies: [{ 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", "current"] }, { 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.IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "component", type: i6.InputLabelComponent, selector: "riv-input-label", inputs: ["label", "help", "required", "labelActionText", "errorMessage", "state"], outputs: ["labelAction"] }, { kind: "directive", type: i7.OverlayDirective, selector: "[riv-overlay]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DateComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-date', changeDetection: ChangeDetectionStrategy.OnPush, template: "<riv-input-label\n  [label]=\"label\"\n  [help]=\"help\"\n  [required]=\"required\"\n  [state]=\"state\"\n  [errorMessage]=\"errorMessage\"\n  [labelActionText]=\"labelActionText\"\n  (labelAction)=\"labelAction.emit($event)\"\n>\n  <div\n    #trigger\n    class=\"trigger\"\n    [class.xsmall]=\"size === 'xsmall'\"\n    [class.small]=\"size === 'small'\"\n    [class.large]=\"size === 'large'\"\n    [class.xlarge]=\"size === 'xlarge'\"\n    [class.warning]=\"state === 'warning'\"\n    [class.error]=\"state === 'error'\"\n    [class.disabled]=\"disabled\"\n  >\n    <input\n      #input\n      class=\"value\"\n      [placeholder]=\"placeholder\"\n      [value]=\"inputText\"\n      [disabled]=\"disabled\"\n      [attr.aria-disabled]=\"disabled ? 'true' : null\"\n      [attr.aria-label]=\"label || null\"\n      [attr.aria-controls]=\"calendarId\"\n      [attr.aria-expanded]=\"open$ | async\"\n      role=\"combobox\"\n      aria-haspopup=\"dialog\"\n      aria-autocomplete=\"none\"\n      (input)=\"onInputChange(input.value)\"\n      (blur)=\"onInputBlur($event)\"\n      (focus)=\"onInputFocus()\"\n      (keydown.enter)=\"input.blur(); open$.next(false); $event.preventDefault()\"\n      type=\"text\"\n      autocomplete=\"off\"\n      spellcheck=\"false\"\n    />\n    <button\n      class=\"chevron\"\n      (mousedown)=\"$event.preventDefault()\"\n      (click)=\"toggleCalendar()\"\n      [disabled]=\"disabled\"\n      [attr.aria-disabled]=\"disabled ? 'true' : null\"\n      [attr.aria-label]=\"(open$ | async) ? 'Close calendar' : 'Open calendar'\"\n      type=\"button\"\n      tabindex=\"-1\"\n    >\n      <riv-icon [name]=\"'Calendar'\" [size]=\"16\"></riv-icon>\n    </button>\n  </div>\n</riv-input-label>\n<ng-container *ngIf=\"open$ | async\">\n  <riv-callout\n    *riv-overlay\n    [anchor]=\"trigger\"\n    [isModal]=\"false\"\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 [attr.id]=\"calendarId\" (mousedown)=\"$event.preventDefault()\">\n      <header *ngIf=\"headerTemplate\">\n        <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n      </header>\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]=\"selectedCalendarValue\"\n          (dateSelect)=\"onDateSelect($event); input.blur()\"\n        ></riv-calendar>\n      </div>\n      <footer *ngIf=\"showClearButton || showTodayButton\" class=\"buttons\">\n        <button\n          *ngIf=\"showClearButton\"\n          rivButton\n          [size]=\"'small'\"\n          [variant]=\"'ghost'\"\n          (click)=\"clearValue(); input.blur()\"\n          type=\"button\"\n        >\n          Clear\n        </button>\n        <button\n          *ngIf=\"showTodayButton\"\n          class=\"today\"\n          rivButton\n          [size]=\"'small'\"\n          [variant]=\"'basic'\"\n          [disabled]=\"!isTodaySelectable\"\n          (click)=\"selectToday(); input.blur()\"\n          type=\"button\"\n        >\n          Today\n        </button>\n      </footer>\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);background-color:var(--surface-light-0);padding-left:var(--size-small);position:relative}.trigger:focus-within{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:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-small) 0;flex-grow:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:pre;border:none;background:transparent;outline:none;width:100%}.value::placeholder{color:var(--type-light-low-contrast)}.value:disabled{color:var(--type-light-disabled)}.trigger.xsmall .value{font:var(--input-small);padding:var(--size-xsmall) 0}.trigger.small .value{font:var(--input-small)}.trigger.large .value{font:var(--input-large);padding:var(--size-medium) var(--size-xsmall)}.trigger.xlarge .value{font:var(--input-large);padding:var(--size-large) var(--size-small)}.chevron{display:flex;justify-content:center;align-items:center;padding:var(--size-xsmall) calc(var(--base-grid-size) * 1.5);border:none;background:transparent;cursor:pointer;color:var(--type-light-high-contrast)}.chevron:disabled{color:var(--type-light-disabled);cursor:not-allowed}.trigger.warning{border-color:var(--surface-dark-caution)}.trigger.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}.content{padding:var(--size-xlarge)}.buttons{padding:0 var(--size-xlarge) var(--size-xlarge);display:flex;justify-content:space-between}.buttons .today{margin-left:auto}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { min: [{

package/esm2022/lib/input/date-range/date-range.component.mjs

@@ -198,10 +198,10 @@ export class DateRangeComponent extends InputLabelComponent {
         }
         this.favoritePresetIds$.next([...ids]);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DateRangeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DateRangeComponent, selector: "riv-date-range", inputs: { showPresets: "showPresets", min: "min", max: "max", value: "value", placeholder: "placeholder", disabled: "disabled", alternativePresetList: "alternativePresetList" }, outputs: { valueChange: "valueChange" }, queries: [{ propertyName: "triggerTemplate", first: true, predicate: ["trigger"], descendants: true }], viewQueries: [{ propertyName: "customTriggerButton", first: true, predicate: ["customTriggerButton"], descendants: true, read: ElementRef }, { propertyName: "standardTriggerButton", first: true, predicate: ["standardTriggerButton"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"triggerTemplate; else standardTrigger\">\n  <button\n    #customTriggerButton\n    (click)=\"open$.next(true)\"\n    [disabled]=\"disabled$ | async\"\n    [attr.aria-disabled]=\"(disabled$ | async) ? 'true' : null\"\n    type=\"button\"\n  >\n    <ng-container\n      [ngTemplateOutlet]=\"triggerTemplate\"\n      [ngTemplateOutletContext]=\"{ open: open$ | async }\"\n    ></ng-container>\n  </button>\n</ng-container>\n<ng-template #standardTrigger>\n  <riv-input-label\n    [label]=\"label\"\n    [help]=\"help\"\n    [required]=\"required\"\n    [state]=\"state\"\n    [errorMessage]=\"errorMessage\"\n    [labelActionText]=\"labelActionText\"\n    (labelAction)=\"labelAction.emit($event)\"\n  >\n    <button\n      #standardTriggerButton\n      class=\"trigger\"\n      [class.warning]=\"state === 'warning'\"\n      [class.error]=\"state === 'error'\"\n      (click)=\"open$.next(true)\"\n      [disabled]=\"disabled$ | async\"\n      [attr.aria-disabled]=\"(disabled$ | async) ? 'true' : null\"\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</ng-template>\n\n<ng-template\n  #self\n  [ngTemplateOutlet]=\"self\"\n  let-inputValue\n  [ngTemplateOutletContext]=\"{ $implicit: (distinctValue$ | async) }\"\n>\n  <ng-container *ngIf=\"open$ | async\">\n    <riv-callout\n      *riv-overlay\n      [anchor]=\"getTrigger()\"\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\" [class.include-preset]=\"showPresets\">\n        <div *ngIf=\"showPresets\" class=\"presets\">\n          <riv-simple-select\n            [label]=\"'Date presets'\"\n            [filterabilityOptions]=\"{ enabled: true, placeholder: 'Search' }\"\n            [orderBy]=\"'source'\"\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);background-color:var(--surface-light-0);cursor:pointer}.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-low-contrast)}.chevron{display:flex;justify-content:center;align-items:center;padding:var(--size-xsmall) calc(var(--base-grid-size) * 1.5)}.trigger.warning{border-color:var(--surface-dark-caution)}.trigger.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}.content{display:inline-grid;grid-template-rows:1fr auto}.content.include-preset{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", "current"] }, { 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", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "component", type: i7.InputLabelComponent, selector: "riv-input-label", inputs: ["label", "help", "required", "labelActionText", "errorMessage", "state"], 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", "orderBy", "placeholder", "maxHeight", "maxWidth", "minHeight", "minWidth", "dividers", "sortSelectedToTop", "grow", "preferredCalloutPosition", "allowedCalloutPositions"], outputs: ["selectedOptionChange"] }, { kind: "directive", type: i10.TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipAnchor", "rivTooltipCloseDelay", "rivTooltipOpenDelay", "rivTooltipGracePeriod"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i11.OptionGroupPipe, name: "rivOptionGroup" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DateRangeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DateRangeComponent, selector: "riv-date-range", inputs: { showPresets: "showPresets", min: "min", max: "max", value: "value", placeholder: "placeholder", disabled: "disabled", alternativePresetList: "alternativePresetList" }, outputs: { valueChange: "valueChange" }, queries: [{ propertyName: "triggerTemplate", first: true, predicate: ["trigger"], descendants: true }], viewQueries: [{ propertyName: "customTriggerButton", first: true, predicate: ["customTriggerButton"], descendants: true, read: ElementRef }, { propertyName: "standardTriggerButton", first: true, predicate: ["standardTriggerButton"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"triggerTemplate; else standardTrigger\">\n  <button\n    #customTriggerButton\n    (click)=\"open$.next(true)\"\n    [disabled]=\"disabled$ | async\"\n    [attr.aria-disabled]=\"(disabled$ | async) ? 'true' : null\"\n    type=\"button\"\n  >\n    <ng-container\n      [ngTemplateOutlet]=\"triggerTemplate\"\n      [ngTemplateOutletContext]=\"{ open: open$ | async }\"\n    ></ng-container>\n  </button>\n</ng-container>\n<ng-template #standardTrigger>\n  <riv-input-label\n    [label]=\"label\"\n    [help]=\"help\"\n    [required]=\"required\"\n    [state]=\"state\"\n    [errorMessage]=\"errorMessage\"\n    [labelActionText]=\"labelActionText\"\n    (labelAction)=\"labelAction.emit($event)\"\n  >\n    <button\n      #standardTriggerButton\n      class=\"trigger\"\n      [class.warning]=\"state === 'warning'\"\n      [class.error]=\"state === 'error'\"\n      (click)=\"open$.next(true)\"\n      [disabled]=\"disabled$ | async\"\n      [attr.aria-disabled]=\"(disabled$ | async) ? 'true' : null\"\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</ng-template>\n\n<ng-template\n  #self\n  [ngTemplateOutlet]=\"self\"\n  let-inputValue\n  [ngTemplateOutletContext]=\"{ $implicit: (distinctValue$ | async) }\"\n>\n  <ng-container *ngIf=\"open$ | async\">\n    <riv-callout\n      *riv-overlay\n      [anchor]=\"getTrigger()\"\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\" [class.include-preset]=\"showPresets\">\n        <div *ngIf=\"showPresets\" class=\"presets\">\n          <riv-simple-select\n            [label]=\"'Date presets'\"\n            [filterabilityOptions]=\"{ enabled: true, placeholder: 'Search' }\"\n            [orderBy]=\"'source'\"\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);background-color:var(--surface-light-0);cursor:pointer}.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-low-contrast)}.chevron{display:flex;justify-content:center;align-items:center;padding:var(--size-xsmall) calc(var(--base-grid-size) * 1.5)}.trigger.warning{border-color:var(--surface-dark-caution)}.trigger.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}.content{display:inline-grid;grid-template-rows:1fr auto}.content.include-preset{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", "current"] }, { 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", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "component", type: i7.InputLabelComponent, selector: "riv-input-label", inputs: ["label", "help", "required", "labelActionText", "errorMessage", "state"], 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", "orderBy", "placeholder", "maxHeight", "maxWidth", "minHeight", "minWidth", "dividers", "sortSelectedToTop", "grow", "preferredCalloutPosition", "allowedCalloutPositions"], outputs: ["selectedOptionChange"] }, { kind: "directive", type: i10.TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipAnchor", "rivTooltipCloseDelay", "rivTooltipOpenDelay", "rivTooltipGracePeriod"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i11.OptionGroupPipe, name: "rivOptionGroup" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DateRangeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DateRangeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-date-range', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"triggerTemplate; else standardTrigger\">\n  <button\n    #customTriggerButton\n    (click)=\"open$.next(true)\"\n    [disabled]=\"disabled$ | async\"\n    [attr.aria-disabled]=\"(disabled$ | async) ? 'true' : null\"\n    type=\"button\"\n  >\n    <ng-container\n      [ngTemplateOutlet]=\"triggerTemplate\"\n      [ngTemplateOutletContext]=\"{ open: open$ | async }\"\n    ></ng-container>\n  </button>\n</ng-container>\n<ng-template #standardTrigger>\n  <riv-input-label\n    [label]=\"label\"\n    [help]=\"help\"\n    [required]=\"required\"\n    [state]=\"state\"\n    [errorMessage]=\"errorMessage\"\n    [labelActionText]=\"labelActionText\"\n    (labelAction)=\"labelAction.emit($event)\"\n  >\n    <button\n      #standardTriggerButton\n      class=\"trigger\"\n      [class.warning]=\"state === 'warning'\"\n      [class.error]=\"state === 'error'\"\n      (click)=\"open$.next(true)\"\n      [disabled]=\"disabled$ | async\"\n      [attr.aria-disabled]=\"(disabled$ | async) ? 'true' : null\"\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</ng-template>\n\n<ng-template\n  #self\n  [ngTemplateOutlet]=\"self\"\n  let-inputValue\n  [ngTemplateOutletContext]=\"{ $implicit: (distinctValue$ | async) }\"\n>\n  <ng-container *ngIf=\"open$ | async\">\n    <riv-callout\n      *riv-overlay\n      [anchor]=\"getTrigger()\"\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\" [class.include-preset]=\"showPresets\">\n        <div *ngIf=\"showPresets\" class=\"presets\">\n          <riv-simple-select\n            [label]=\"'Date presets'\"\n            [filterabilityOptions]=\"{ enabled: true, placeholder: 'Search' }\"\n            [orderBy]=\"'source'\"\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);background-color:var(--surface-light-0);cursor:pointer}.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-low-contrast)}.chevron{display:flex;justify-content:center;align-items:center;padding:var(--size-xsmall) calc(var(--base-grid-size) * 1.5)}.trigger.warning{border-color:var(--surface-dark-caution)}.trigger.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}.content{display:inline-grid;grid-template-rows:1fr auto}.content.include-preset{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"] }]
         }], propDecorators: { showPresets: [{

package/esm2022/lib/input/filter-chip/filter-chip.component.mjs

@@ -27,10 +27,10 @@ export class FilterChipComponent {
     onClick(e) {
         this.chipClicked.emit(!this.selected);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FilterChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FilterChipComponent, selector: "riv-filter-chip", inputs: { selected: "selected" }, outputs: { chipClicked: "chipClicked" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class": "this.classes" } }, ngImport: i0, template: "<riv-icon\n  *ngIf=\"selected\"\n  class=\"checkmark\"\n  [name]=\"'Check'\"\n  [size]=\"12\"\n></riv-icon>\n<ng-content></ng-content>\n", styles: [":host{--badge-multiplier: 4;display:inline-flex;align-items:center;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-1);font-weight:var(--font-weight-heavy);white-space:nowrap;border-radius:calc(var(--base-grid-size) * var(--badge-multiplier));min-width:calc(var(--base-grid-size) * var(--badge-multiplier));min-height:calc(var(--base-grid-size) * var(--badge-multiplier));max-width:100%;background-color:var(--badge-background-color);border:var(--border-width) solid var(--border-light);padding:var(--size-xsmall) var(--size-medium)}:host:not(.selected){--badge-background-color: var(--surface-light-0)}:host.selected{--badge-background-color: var(--baloo-05)}.checkmark{padding-right:var(--size-xsmall)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FilterChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FilterChipComponent, selector: "riv-filter-chip", inputs: { selected: "selected" }, outputs: { chipClicked: "chipClicked" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class": "this.classes" } }, ngImport: i0, template: "<riv-icon\n  *ngIf=\"selected\"\n  class=\"checkmark\"\n  [name]=\"'Check'\"\n  [size]=\"12\"\n></riv-icon>\n<ng-content></ng-content>\n", styles: [":host{--badge-multiplier: 4;display:inline-flex;align-items:center;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-1);font-weight:var(--font-weight-heavy);white-space:nowrap;border-radius:calc(var(--base-grid-size) * var(--badge-multiplier));min-width:calc(var(--base-grid-size) * var(--badge-multiplier));min-height:calc(var(--base-grid-size) * var(--badge-multiplier));max-width:100%;background-color:var(--badge-background-color);border:var(--border-width) solid var(--border-light);padding:var(--size-xsmall) var(--size-medium)}:host:not(.selected){--badge-background-color: var(--surface-light-0)}:host.selected{--badge-background-color: var(--baloo-05)}.checkmark{padding-right:var(--size-xsmall)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FilterChipComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FilterChipComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-filter-chip', changeDetection: ChangeDetectionStrategy.OnPush, template: "<riv-icon\n  *ngIf=\"selected\"\n  class=\"checkmark\"\n  [name]=\"'Check'\"\n  [size]=\"12\"\n></riv-icon>\n<ng-content></ng-content>\n", styles: [":host{--badge-multiplier: 4;display:inline-flex;align-items:center;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-1);font-weight:var(--font-weight-heavy);white-space:nowrap;border-radius:calc(var(--base-grid-size) * var(--badge-multiplier));min-width:calc(var(--base-grid-size) * var(--badge-multiplier));min-height:calc(var(--base-grid-size) * var(--badge-multiplier));max-width:100%;background-color:var(--badge-background-color);border:var(--border-width) solid var(--border-light);padding:var(--size-xsmall) var(--size-medium)}:host:not(.selected){--badge-background-color: var(--surface-light-0)}:host.selected{--badge-background-color: var(--baloo-05)}.checkmark{padding-right:var(--size-xsmall)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { selected: [{

package/esm2022/lib/input/filter-dropdown/filter-dropdown.component.mjs

@@ -44,10 +44,10 @@ export class FilterDropdownComponent {
         this.openChange.emit(open);
         this.cdr.markForCheck();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FilterDropdownComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FilterDropdownComponent, selector: "riv-filter-dropdown", inputs: { label: "label", value: "value", valueExtraWidth: "valueExtraWidth", count: "count", active: "active", removable: "removable", disabled: "disabled", tooltip: "tooltip", open: "open", preferredPosition: "preferredPosition", allowedPositions: "allowedPositions" }, outputs: { openChange: "openChange", remove: "remove" }, host: { properties: { "class": "this.classes" } }, queries: [{ propertyName: "triggerTemplate", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "contentTemplate", first: true, predicate: ["content"], descendants: true }], ngImport: i0, template: "<span #anchor>\n  <button\n    *ngIf=\"triggerTemplate; else defaultTrigger\"\n    class=\"custom-trigger\"\n    type=\"button\"\n    [disabled]=\"disabled\"\n    [attr.aria-label]=\"label || null\"\n    [attr.aria-expanded]=\"open\"\n    (click)=\"setOpen(!open)\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"triggerTemplate; context: { open: open }\"\n    ></ng-container>\n  </button>\n  <ng-template #defaultTrigger>\n    <div\n      class=\"trigger\"\n      [rivTooltip]=\"tooltip ?? undefined\"\n      (click)=\"!disabled && setOpen(!open)\"\n    >\n      <button\n        *ngIf=\"removable && !disabled\"\n        rivButton\n        type=\"button\"\n        [variant]=\"'ghost'\"\n        [icon]=\"'X'\"\n        [attr.aria-label]=\"'Remove ' + label\"\n        (click)=\"$event.stopPropagation(); remove.emit()\"\n      ></button>\n      <span class=\"label\">{{ label }}</span>\n      <ng-container *ngIf=\"value !== null\">\n        <div class=\"divider\"></div>\n        <span class=\"value\" [style.max-width.px]=\"120 + valueExtraWidth\">{{\n          value\n        }}</span>\n      </ng-container>\n      <span *ngIf=\"(count ?? 0) > 0\" class=\"count\">\n        <riv-badge\n          [size]=\"'xsmall'\"\n          [variant]=\"disabled ? 'disabled' : 'brand'\"\n          >{{ count }}</riv-badge\n        >\n      </span>\n      <button\n        *ngIf=\"!disabled\"\n        rivButton\n        type=\"button\"\n        [variant]=\"'ghost'\"\n        [icon]=\"open ? 'ChevronUp' : 'ChevronDown'\"\n        [attr.aria-label]=\"label\"\n        [attr.aria-expanded]=\"open\"\n      ></button>\n    </div>\n  </ng-template>\n</span>\n\n<ng-container *ngIf=\"open && !disabled\">\n  <riv-callout\n    *riv-overlay\n    [anchor]=\"anchor\"\n    [theme]=\"'light'\"\n    [showCaret]=\"false\"\n    [preferredPosition]=\"preferredPosition\"\n    [allowedPositions]=\"allowedPositions\"\n    (close)=\"setOpen(false)\"\n  >\n    <div class=\"content\">\n      <ng-container *ngTemplateOutlet=\"contentTemplate ?? null\"></ng-container>\n    </div>\n  </riv-callout>\n</ng-container>\n", styles: [":host{flex:0 0 auto}.custom-trigger{display:inline-flex;font:inherit;color:inherit}.trigger{display:inline-flex;align-items:center;box-sizing:content-box;height:var(--type-2-line-height-0);padding:calc(var(--base-grid-size) * 2) 0;border:var(--border-width) solid var(--border-light-blend);border-radius:var(--border-radius-small);background-color:transparent;font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-0);cursor:pointer;transition:background-color var(--medium-transition)}.trigger:hover{background-color:var(--black-20)}.trigger:active{background-color:var(--black-40)}:host(.active) .trigger{background-color:var(--purp-10)}:host(.active) .trigger:hover{background-color:var(--purp-20)}:host(.active) .trigger:active{background-color:var(--purp-30)}:host(.removable:not(.active)) .trigger{border-style:dashed}:host(:not(.removable)) .trigger,:host(.disabled) .trigger{padding-left:var(--size-medium)}:host(.disabled) .trigger{padding-right:var(--size-medium);border-color:var(--surface-light-4);background-color:transparent;color:var(--type-light-disabled);cursor:default}:host(.disabled.active) .trigger{background-color:var(--surface-light-1)}.label{flex:1 0 auto;font-weight:var(--font-weight-heavy)}.divider{width:var(--border-width);height:var(--type-3-font-size);margin:0 var(--size-small);background-color:var(--border-light)}.value{display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.count{padding-left:var(--size-small)}.content{min-width:calc(var(--base-grid-size) * 74);padding:var(--size-large)}\n"], dependencies: [{ 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.BadgeComponent, selector: "riv-badge", inputs: ["variant", "size"] }, { kind: "component", type: i3.ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "current"] }, { kind: "component", type: i4.CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "directive", type: i5.OverlayDirective, selector: "[riv-overlay]" }, { kind: "directive", type: i6.TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipAnchor", "rivTooltipCloseDelay", "rivTooltipOpenDelay", "rivTooltipGracePeriod"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FilterDropdownComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FilterDropdownComponent, selector: "riv-filter-dropdown", inputs: { label: "label", value: "value", valueExtraWidth: "valueExtraWidth", count: "count", active: "active", removable: "removable", disabled: "disabled", tooltip: "tooltip", open: "open", preferredPosition: "preferredPosition", allowedPositions: "allowedPositions" }, outputs: { openChange: "openChange", remove: "remove" }, host: { properties: { "class": "this.classes" } }, queries: [{ propertyName: "triggerTemplate", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "contentTemplate", first: true, predicate: ["content"], descendants: true }], ngImport: i0, template: "<span #anchor>\n  <button\n    *ngIf=\"triggerTemplate; else defaultTrigger\"\n    class=\"custom-trigger\"\n    type=\"button\"\n    [disabled]=\"disabled\"\n    [attr.aria-label]=\"label || null\"\n    [attr.aria-expanded]=\"open\"\n    (click)=\"setOpen(!open)\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"triggerTemplate; context: { open: open }\"\n    ></ng-container>\n  </button>\n  <ng-template #defaultTrigger>\n    <div\n      class=\"trigger\"\n      [rivTooltip]=\"tooltip ?? undefined\"\n      (click)=\"!disabled && setOpen(!open)\"\n    >\n      <button\n        *ngIf=\"removable && !disabled\"\n        rivButton\n        type=\"button\"\n        [variant]=\"'ghost'\"\n        [icon]=\"'X'\"\n        [attr.aria-label]=\"'Remove ' + label\"\n        (click)=\"$event.stopPropagation(); remove.emit()\"\n      ></button>\n      <span class=\"label\">{{ label }}</span>\n      <ng-container *ngIf=\"value !== null\">\n        <div class=\"divider\"></div>\n        <span class=\"value\" [style.max-width.px]=\"120 + valueExtraWidth\">{{\n          value\n        }}</span>\n      </ng-container>\n      <span *ngIf=\"(count ?? 0) > 0\" class=\"count\">\n        <riv-badge\n          [size]=\"'xsmall'\"\n          [variant]=\"disabled ? 'disabled' : 'brand'\"\n          >{{ count }}</riv-badge\n        >\n      </span>\n      <button\n        *ngIf=\"!disabled\"\n        rivButton\n        type=\"button\"\n        [variant]=\"'ghost'\"\n        [icon]=\"open ? 'ChevronUp' : 'ChevronDown'\"\n        [attr.aria-label]=\"label\"\n        [attr.aria-expanded]=\"open\"\n      ></button>\n    </div>\n  </ng-template>\n</span>\n\n<ng-container *ngIf=\"open && !disabled\">\n  <riv-callout\n    *riv-overlay\n    [anchor]=\"anchor\"\n    [theme]=\"'light'\"\n    [showCaret]=\"false\"\n    [preferredPosition]=\"preferredPosition\"\n    [allowedPositions]=\"allowedPositions\"\n    (close)=\"setOpen(false)\"\n  >\n    <div class=\"content\">\n      <ng-container *ngTemplateOutlet=\"contentTemplate ?? null\"></ng-container>\n    </div>\n  </riv-callout>\n</ng-container>\n", styles: [":host{flex:0 0 auto}.custom-trigger{display:inline-flex;font:inherit;color:inherit}.trigger{display:inline-flex;align-items:center;box-sizing:content-box;height:var(--type-2-line-height-0);padding:calc(var(--base-grid-size) * 2) 0;border:var(--border-width) solid var(--border-light-blend);border-radius:var(--border-radius-small);background-color:transparent;font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-0);cursor:pointer;transition:background-color var(--medium-transition)}.trigger:hover{background-color:var(--black-20)}.trigger:active{background-color:var(--black-40)}:host(.active) .trigger{background-color:var(--purp-10)}:host(.active) .trigger:hover{background-color:var(--purp-20)}:host(.active) .trigger:active{background-color:var(--purp-30)}:host(.removable:not(.active)) .trigger{border-style:dashed}:host(:not(.removable)) .trigger,:host(.disabled) .trigger{padding-left:var(--size-medium)}:host(.disabled) .trigger{padding-right:var(--size-medium);border-color:var(--surface-light-4);background-color:transparent;color:var(--type-light-disabled);cursor:default}:host(.disabled.active) .trigger{background-color:var(--surface-light-1)}.label{flex:1 0 auto;font-weight:var(--font-weight-heavy)}.divider{width:var(--border-width);height:var(--type-3-font-size);margin:0 var(--size-small);background-color:var(--border-light)}.value{display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.count{padding-left:var(--size-small)}.content{min-width:calc(var(--base-grid-size) * 74);padding:var(--size-large)}\n"], dependencies: [{ 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.BadgeComponent, selector: "riv-badge", inputs: ["variant", "size"] }, { kind: "component", type: i3.ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "current"] }, { kind: "component", type: i4.CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "directive", type: i5.OverlayDirective, selector: "[riv-overlay]" }, { kind: "directive", type: i6.TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipAnchor", "rivTooltipCloseDelay", "rivTooltipOpenDelay", "rivTooltipGracePeriod"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FilterDropdownComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FilterDropdownComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-filter-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span #anchor>\n  <button\n    *ngIf=\"triggerTemplate; else defaultTrigger\"\n    class=\"custom-trigger\"\n    type=\"button\"\n    [disabled]=\"disabled\"\n    [attr.aria-label]=\"label || null\"\n    [attr.aria-expanded]=\"open\"\n    (click)=\"setOpen(!open)\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"triggerTemplate; context: { open: open }\"\n    ></ng-container>\n  </button>\n  <ng-template #defaultTrigger>\n    <div\n      class=\"trigger\"\n      [rivTooltip]=\"tooltip ?? undefined\"\n      (click)=\"!disabled && setOpen(!open)\"\n    >\n      <button\n        *ngIf=\"removable && !disabled\"\n        rivButton\n        type=\"button\"\n        [variant]=\"'ghost'\"\n        [icon]=\"'X'\"\n        [attr.aria-label]=\"'Remove ' + label\"\n        (click)=\"$event.stopPropagation(); remove.emit()\"\n      ></button>\n      <span class=\"label\">{{ label }}</span>\n      <ng-container *ngIf=\"value !== null\">\n        <div class=\"divider\"></div>\n        <span class=\"value\" [style.max-width.px]=\"120 + valueExtraWidth\">{{\n          value\n        }}</span>\n      </ng-container>\n      <span *ngIf=\"(count ?? 0) > 0\" class=\"count\">\n        <riv-badge\n          [size]=\"'xsmall'\"\n          [variant]=\"disabled ? 'disabled' : 'brand'\"\n          >{{ count }}</riv-badge\n        >\n      </span>\n      <button\n        *ngIf=\"!disabled\"\n        rivButton\n        type=\"button\"\n        [variant]=\"'ghost'\"\n        [icon]=\"open ? 'ChevronUp' : 'ChevronDown'\"\n        [attr.aria-label]=\"label\"\n        [attr.aria-expanded]=\"open\"\n      ></button>\n    </div>\n  </ng-template>\n</span>\n\n<ng-container *ngIf=\"open && !disabled\">\n  <riv-callout\n    *riv-overlay\n    [anchor]=\"anchor\"\n    [theme]=\"'light'\"\n    [showCaret]=\"false\"\n    [preferredPosition]=\"preferredPosition\"\n    [allowedPositions]=\"allowedPositions\"\n    (close)=\"setOpen(false)\"\n  >\n    <div class=\"content\">\n      <ng-container *ngTemplateOutlet=\"contentTemplate ?? null\"></ng-container>\n    </div>\n  </riv-callout>\n</ng-container>\n", styles: [":host{flex:0 0 auto}.custom-trigger{display:inline-flex;font:inherit;color:inherit}.trigger{display:inline-flex;align-items:center;box-sizing:content-box;height:var(--type-2-line-height-0);padding:calc(var(--base-grid-size) * 2) 0;border:var(--border-width) solid var(--border-light-blend);border-radius:var(--border-radius-small);background-color:transparent;font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-0);cursor:pointer;transition:background-color var(--medium-transition)}.trigger:hover{background-color:var(--black-20)}.trigger:active{background-color:var(--black-40)}:host(.active) .trigger{background-color:var(--purp-10)}:host(.active) .trigger:hover{background-color:var(--purp-20)}:host(.active) .trigger:active{background-color:var(--purp-30)}:host(.removable:not(.active)) .trigger{border-style:dashed}:host(:not(.removable)) .trigger,:host(.disabled) .trigger{padding-left:var(--size-medium)}:host(.disabled) .trigger{padding-right:var(--size-medium);border-color:var(--surface-light-4);background-color:transparent;color:var(--type-light-disabled);cursor:default}:host(.disabled.active) .trigger{background-color:var(--surface-light-1)}.label{flex:1 0 auto;font-weight:var(--font-weight-heavy)}.divider{width:var(--border-width);height:var(--type-3-font-size);margin:0 var(--size-small);background-color:var(--border-light)}.value{display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.count{padding-left:var(--size-small)}.content{min-width:calc(var(--base-grid-size) * 74);padding:var(--size-large)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { label: [{

package/esm2022/lib/input/input-label/input-label.component.mjs

@@ -11,10 +11,10 @@ export class InputLabelComponent {
         this.state = 'valid';
         this.labelAction = new EventEmitter();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: InputLabelComponent, selector: "riv-input-label", inputs: { label: "label", help: "help", required: "required", labelActionText: "labelActionText", errorMessage: "errorMessage", state: "state" }, outputs: { labelAction: "labelAction" }, ngImport: i0, template: "<label *ngIf=\"label\">\n  <span class=\"title\">\n    {{ label }}\n    <span *ngIf=\"required\">*</span>\n  </span>\n  <button\n    *ngIf=\"labelActionText\"\n    rivLink\n    type=\"button\"\n    (click)=\"labelAction.emit($event)\"\n    type=\"button\"\n  >\n    {{ labelActionText }}\n  </button>\n  <riv-help *ngIf=\"help\" [help]=\"help\" [size]=\"12\"></riv-help>\n</label>\n<div class=\"content\"><ng-content></ng-content></div>\n<riv-validation-message\n  *ngIf=\"errorMessage\"\n  [message]=\"errorMessage\"\n></riv-validation-message>\n", styles: [":host{max-width:100%;display:flex;flex-direction:column}label{display:flex;justify-content:space-between;align-items:center;gap:var(--size-small);font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-1);font-weight:var(--font-weight-heavy);color:var(--type-light-high-contrast);margin-bottom:var(--base-grid-size)}label .title{flex-grow:1}label .action{margin:0 var(--size-xxsmall)}label riv-icon{color:var(--type-light-low-contrast)}riv-help{margin-left:var(--size-xsmall)}.content{display:flex;flex-direction:column;flex:1;justify-content:center}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.HelpComponent, selector: "riv-help", inputs: ["help", "size"] }, { kind: "component", type: i3.LinkComponent, selector: "[rivLink]", inputs: ["disabled", "locked", "theme", "variant"] }, { kind: "component", type: i4.ValidationMessageComponent, selector: "riv-validation-message", inputs: ["message"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: InputLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: InputLabelComponent, selector: "riv-input-label", inputs: { label: "label", help: "help", required: "required", labelActionText: "labelActionText", errorMessage: "errorMessage", state: "state" }, outputs: { labelAction: "labelAction" }, ngImport: i0, template: "<label *ngIf=\"label\">\n  <span class=\"title\">\n    {{ label }}\n    <span *ngIf=\"required\">*</span>\n  </span>\n  <button\n    *ngIf=\"labelActionText\"\n    rivLink\n    type=\"button\"\n    (click)=\"labelAction.emit($event)\"\n    type=\"button\"\n  >\n    {{ labelActionText }}\n  </button>\n  <riv-help *ngIf=\"help\" [help]=\"help\" [size]=\"12\"></riv-help>\n</label>\n<div class=\"content\"><ng-content></ng-content></div>\n<riv-validation-message\n  *ngIf=\"errorMessage\"\n  [message]=\"errorMessage\"\n></riv-validation-message>\n", styles: [":host{max-width:100%;display:flex;flex-direction:column}label{display:flex;justify-content:space-between;align-items:center;gap:var(--size-small);font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-1);font-weight:var(--font-weight-heavy);color:var(--type-light-high-contrast);margin-bottom:var(--base-grid-size)}label .title{flex-grow:1}label .action{margin:0 var(--size-xxsmall)}label riv-icon{color:var(--type-light-low-contrast)}riv-help{margin-left:var(--size-xsmall)}.content{display:flex;flex-direction:column;flex:1;justify-content:center}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.HelpComponent, selector: "riv-help", inputs: ["help", "size"] }, { kind: "component", type: i3.LinkComponent, selector: "[rivLink]", inputs: ["disabled", "locked", "theme", "variant"] }, { kind: "component", type: i4.ValidationMessageComponent, selector: "riv-validation-message", inputs: ["message"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputLabelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: InputLabelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-input-label', changeDetection: ChangeDetectionStrategy.OnPush, template: "<label *ngIf=\"label\">\n  <span class=\"title\">\n    {{ label }}\n    <span *ngIf=\"required\">*</span>\n  </span>\n  <button\n    *ngIf=\"labelActionText\"\n    rivLink\n    type=\"button\"\n    (click)=\"labelAction.emit($event)\"\n    type=\"button\"\n  >\n    {{ labelActionText }}\n  </button>\n  <riv-help *ngIf=\"help\" [help]=\"help\" [size]=\"12\"></riv-help>\n</label>\n<div class=\"content\"><ng-content></ng-content></div>\n<riv-validation-message\n  *ngIf=\"errorMessage\"\n  [message]=\"errorMessage\"\n></riv-validation-message>\n", styles: [":host{max-width:100%;display:flex;flex-direction:column}label{display:flex;justify-content:space-between;align-items:center;gap:var(--size-small);font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-1);font-weight:var(--font-weight-heavy);color:var(--type-light-high-contrast);margin-bottom:var(--base-grid-size)}label .title{flex-grow:1}label .action{margin:0 var(--size-xxsmall)}label riv-icon{color:var(--type-light-low-contrast)}riv-help{margin-left:var(--size-xsmall)}.content{display:flex;flex-direction:column;flex:1;justify-content:center}\n"] }]
         }], propDecorators: { label: [{

package/esm2022/lib/input/mentions-input/mentions-input.component.mjs

@@ -704,10 +704,10 @@ export class MentionsInputComponent {
     onCalloutClose() {
         this.closeMentions();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MentionsInputComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: MentionsInputComponent, selector: "riv-mentions-input", inputs: { content: "content", users: "users", readonly: "readonly", placeholder: "placeholder" }, outputs: { contentChange: "contentChange" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"mentions-container\" #container>\n  <div\n    *ngIf=\"!readonly\"\n    #input\n    class=\"text-content editable\"\n    contenteditable=\"true\"\n    [attr.data-placeholder]=\"placeholder\"\n    (input)=\"onInput()\"\n    (keydown)=\"onKeyDown($event)\"\n    (paste)=\"onPaste($event)\"\n    (copy)=\"onCopy($event)\"\n    (cut)=\"onCut($event)\"\n  ></div>\n\n  <div *ngIf=\"readonly\" #input class=\"text-content\"></div>\n\n  <riv-callout\n    *ngIf=\"!readonly && mentionsVisible && mentionAnchor\"\n    [anchor]=\"mentionAnchor\"\n    [isModal]=\"true\"\n    [showCaret]=\"false\"\n    [allowedPositions]=\"['bottom-right', 'top-right']\"\n    [theme]=\"'light'\"\n    (close)=\"onCalloutClose()\"\n  >\n    <div class=\"mentions-content\">\n      <div class=\"mentions-header\">Mention someone</div>\n      <div class=\"mentions-list\">\n        <button\n          type=\"button\"\n          *ngFor=\"let user of getFilteredUsers(); let i = index\"\n          [class.selected]=\"i === selectedUserIndex\"\n          (mouseenter)=\"onUserHover(i)\"\n          (click)=\"selectUser(user)\"\n        >\n          {{ user.name }}\n        </button>\n      </div>\n    </div>\n  </riv-callout>\n</div>\n", styles: [".mentions-container{position:relative;width:100%}.mentions-input{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);color:var(--type-light-high-contrast);overflow-y:auto;white-space:pre-wrap;word-wrap:break-word}.mentions-input:empty:before{content:attr(data-placeholder);color:var(--type-light-low-contrast);pointer-events:none}.mentions-input:focus{outline:none;border:var(--border-width) solid var(--purp-60)}.mentions-input[contenteditable=false]{color:var(--type-light-disabled);background-color:var(--surface-light-1);cursor:not-allowed}span.mention{color:var(--type-light-link);font-weight:var(--font-weight-heavy);white-space:nowrap;display:inline}span.readonly-mention{font-weight:var(--font-weight-heavy);white-space:nowrap;display:inline}.mentions-input.warning{border-color:var(--surface-dark-caution)}.mentions-input.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}.mentions-input.large{font:var(--input-large);padding:var(--size-medium)}.mentions-list{margin:0;padding:0;max-height:calc(var(--base-grid-size) * 50);overflow-y:auto;display:flex;flex-direction:column;gap:var(--size-xxsmall)}.mentions-list button{padding:var(--size-small) var(--size-small);border-radius:var(--border-radius-medium);cursor:pointer;transition:background-color .2s;font:var(--input-medium);text-align:left}.mentions-list button:hover,.mentions-list button.selected{background-color:var(--surface-light-2)}.mentions-content{max-height:50vh;min-width:calc(var(--base-grid-size) * 62);max-width:50vw;padding:var(--size-large);display:flex;flex-direction:column}.mentions-header{padding:var(--size-small) var(--size-small);font:var(--input-medium);color:var(--type-light-low-contrast)}.text-content{width:100%;min-height:9em;border-radius:var(--border-radius-small);font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-large);resize:vertical}.editable{border:var(--border-width) solid var(--border-light);background-color:var(--surface-light-0)}.text-content::placeholder{color:var(--type-light-low-contrast)}.text-content.editable[data-placeholder]:empty:before{content:attr(data-placeholder);color:var(--type-light-low-contrast)}.text-content:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}.text-content:focus{outline:none;border:var(--border-width) solid var(--purp-60)}.text-content.warning{border-color:var(--surface-dark-caution)}.text-content.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}.text-content.large{font:var(--input-large);padding:var(--size-medium)}\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: "component", type: i2.CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MentionsInputComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MentionsInputComponent, selector: "riv-mentions-input", inputs: { content: "content", users: "users", readonly: "readonly", placeholder: "placeholder" }, outputs: { contentChange: "contentChange" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"mentions-container\" #container>\n  <div\n    *ngIf=\"!readonly\"\n    #input\n    class=\"text-content editable\"\n    contenteditable=\"true\"\n    [attr.data-placeholder]=\"placeholder\"\n    (input)=\"onInput()\"\n    (keydown)=\"onKeyDown($event)\"\n    (paste)=\"onPaste($event)\"\n    (copy)=\"onCopy($event)\"\n    (cut)=\"onCut($event)\"\n  ></div>\n\n  <div *ngIf=\"readonly\" #input class=\"text-content\"></div>\n\n  <riv-callout\n    *ngIf=\"!readonly && mentionsVisible && mentionAnchor\"\n    [anchor]=\"mentionAnchor\"\n    [isModal]=\"true\"\n    [showCaret]=\"false\"\n    [allowedPositions]=\"['bottom-right', 'top-right']\"\n    [theme]=\"'light'\"\n    (close)=\"onCalloutClose()\"\n  >\n    <div class=\"mentions-content\">\n      <div class=\"mentions-header\">Mention someone</div>\n      <div class=\"mentions-list\">\n        <button\n          type=\"button\"\n          *ngFor=\"let user of getFilteredUsers(); let i = index\"\n          [class.selected]=\"i === selectedUserIndex\"\n          (mouseenter)=\"onUserHover(i)\"\n          (click)=\"selectUser(user)\"\n        >\n          {{ user.name }}\n        </button>\n      </div>\n    </div>\n  </riv-callout>\n</div>\n", styles: [".mentions-container{position:relative;width:100%}.mentions-input{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);color:var(--type-light-high-contrast);overflow-y:auto;white-space:pre-wrap;word-wrap:break-word}.mentions-input:empty:before{content:attr(data-placeholder);color:var(--type-light-low-contrast);pointer-events:none}.mentions-input:focus{outline:none;border:var(--border-width) solid var(--purp-60)}.mentions-input[contenteditable=false]{color:var(--type-light-disabled);background-color:var(--surface-light-1);cursor:not-allowed}span.mention{color:var(--type-light-link);font-weight:var(--font-weight-heavy);white-space:nowrap;display:inline}span.readonly-mention{font-weight:var(--font-weight-heavy);white-space:nowrap;display:inline}.mentions-input.warning{border-color:var(--surface-dark-caution)}.mentions-input.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}.mentions-input.large{font:var(--input-large);padding:var(--size-medium)}.mentions-list{margin:0;padding:0;max-height:calc(var(--base-grid-size) * 50);overflow-y:auto;display:flex;flex-direction:column;gap:var(--size-xxsmall)}.mentions-list button{padding:var(--size-small) var(--size-small);border-radius:var(--border-radius-medium);cursor:pointer;transition:background-color .2s;font:var(--input-medium);text-align:left}.mentions-list button:hover,.mentions-list button.selected{background-color:var(--surface-light-2)}.mentions-content{max-height:50vh;min-width:calc(var(--base-grid-size) * 62);max-width:50vw;padding:var(--size-large);display:flex;flex-direction:column}.mentions-header{padding:var(--size-small) var(--size-small);font:var(--input-medium);color:var(--type-light-low-contrast)}.text-content{width:100%;min-height:9em;border-radius:var(--border-radius-small);font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-large);resize:vertical}.editable{border:var(--border-width) solid var(--border-light);background-color:var(--surface-light-0)}.text-content::placeholder{color:var(--type-light-low-contrast)}.text-content.editable[data-placeholder]:empty:before{content:attr(data-placeholder);color:var(--type-light-low-contrast)}.text-content:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}.text-content:focus{outline:none;border:var(--border-width) solid var(--purp-60)}.text-content.warning{border-color:var(--surface-dark-caution)}.text-content.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}.text-content.large{font:var(--input-large);padding:var(--size-medium)}\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: "component", type: i2.CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MentionsInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MentionsInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-mentions-input', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"mentions-container\" #container>\n  <div\n    *ngIf=\"!readonly\"\n    #input\n    class=\"text-content editable\"\n    contenteditable=\"true\"\n    [attr.data-placeholder]=\"placeholder\"\n    (input)=\"onInput()\"\n    (keydown)=\"onKeyDown($event)\"\n    (paste)=\"onPaste($event)\"\n    (copy)=\"onCopy($event)\"\n    (cut)=\"onCut($event)\"\n  ></div>\n\n  <div *ngIf=\"readonly\" #input class=\"text-content\"></div>\n\n  <riv-callout\n    *ngIf=\"!readonly && mentionsVisible && mentionAnchor\"\n    [anchor]=\"mentionAnchor\"\n    [isModal]=\"true\"\n    [showCaret]=\"false\"\n    [allowedPositions]=\"['bottom-right', 'top-right']\"\n    [theme]=\"'light'\"\n    (close)=\"onCalloutClose()\"\n  >\n    <div class=\"mentions-content\">\n      <div class=\"mentions-header\">Mention someone</div>\n      <div class=\"mentions-list\">\n        <button\n          type=\"button\"\n          *ngFor=\"let user of getFilteredUsers(); let i = index\"\n          [class.selected]=\"i === selectedUserIndex\"\n          (mouseenter)=\"onUserHover(i)\"\n          (click)=\"selectUser(user)\"\n        >\n          {{ user.name }}\n        </button>\n      </div>\n    </div>\n  </riv-callout>\n</div>\n", styles: [".mentions-container{position:relative;width:100%}.mentions-input{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);color:var(--type-light-high-contrast);overflow-y:auto;white-space:pre-wrap;word-wrap:break-word}.mentions-input:empty:before{content:attr(data-placeholder);color:var(--type-light-low-contrast);pointer-events:none}.mentions-input:focus{outline:none;border:var(--border-width) solid var(--purp-60)}.mentions-input[contenteditable=false]{color:var(--type-light-disabled);background-color:var(--surface-light-1);cursor:not-allowed}span.mention{color:var(--type-light-link);font-weight:var(--font-weight-heavy);white-space:nowrap;display:inline}span.readonly-mention{font-weight:var(--font-weight-heavy);white-space:nowrap;display:inline}.mentions-input.warning{border-color:var(--surface-dark-caution)}.mentions-input.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}.mentions-input.large{font:var(--input-large);padding:var(--size-medium)}.mentions-list{margin:0;padding:0;max-height:calc(var(--base-grid-size) * 50);overflow-y:auto;display:flex;flex-direction:column;gap:var(--size-xxsmall)}.mentions-list button{padding:var(--size-small) var(--size-small);border-radius:var(--border-radius-medium);cursor:pointer;transition:background-color .2s;font:var(--input-medium);text-align:left}.mentions-list button:hover,.mentions-list button.selected{background-color:var(--surface-light-2)}.mentions-content{max-height:50vh;min-width:calc(var(--base-grid-size) * 62);max-width:50vw;padding:var(--size-large);display:flex;flex-direction:column}.mentions-header{padding:var(--size-small) var(--size-small);font:var(--input-medium);color:var(--type-light-low-contrast)}.text-content{width:100%;min-height:9em;border-radius:var(--border-radius-small);font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-large);resize:vertical}.editable{border:var(--border-width) solid var(--border-light);background-color:var(--surface-light-0)}.text-content::placeholder{color:var(--type-light-low-contrast)}.text-content.editable[data-placeholder]:empty:before{content:attr(data-placeholder);color:var(--type-light-low-contrast)}.text-content:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}.text-content:focus{outline:none;border:var(--border-width) solid var(--purp-60)}.text-content.warning{border-color:var(--surface-dark-caution)}.text-content.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}.text-content.large{font:var(--input-large);padding:var(--size-medium)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { content: [{

package/esm2022/lib/input/number-field/number-field.component.mjs

@@ -51,10 +51,10 @@ export class NumberFieldComponent extends InputLabelComponent {
         this._text = NumberFieldComponent.format(this._text, this.minimumFractionDigits, this.maximumFractionDigits, this.min, this.max);
         this.blur.emit(NumberFieldComponent.clean(this._text, this.maximumFractionDigits, this.min, this.max));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NumberFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NumberFieldComponent, selector: "riv-number-field", inputs: { disabled: "disabled", readonly: "readonly", placeholder: "placeholder", maximumFractionDigits: "maximumFractionDigits", minimumFractionDigits: "minimumFractionDigits", min: "min", max: "max", align: "align", size: "size", autoFocus: "autoFocus", name: "name", value: "value" }, outputs: { valueChange: "valueChange", blur: "blur" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<riv-input-label\n  [label]=\"label\"\n  [help]=\"help\"\n  [required]=\"required\"\n  [state]=\"state\"\n  [errorMessage]=\"errorMessage\"\n  [labelActionText]=\"labelActionText\"\n  (labelAction)=\"labelAction.emit($event)\"\n>\n  <input\n    #input\n    [name]=\"name\"\n    [placeholder]=\"placeholder\"\n    type=\"text\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    [attr.aria-disabled]=\"disabled ? 'true' : null\"\n    [readonly]=\"readonly\"\n    [value]=\"text\"\n    [attr.aria-label]=\"label || null\"\n    (input)=\"text = input.value\"\n    [class.warning]=\"state === 'warning'\"\n    [class.error]=\"state === 'error'\"\n    [class.small]=\"size === 'small'\"\n    [class.large]=\"size === 'large'\"\n    [style.textAlign]=\"align\"\n    [riv-auto-focus]=\"autoFocus\"\n    autocomplete=\"off\"\n    autocorrect=\"off\"\n    autocapitalize=\"off\"\n    spellcheck=\"false\"\n    (blur)=\"inputBlur()\"\n  />\n</riv-input-label>\n", styles: ["input{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-small) var(--size-medium);height:var(--input-field-height-medium)}input::placeholder{color:var(--type-light-low-contrast)}input:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}input:read-only{background-color:var(--surface-light-1)}input:focus{outline:none;border:var(--border-width) solid var(--purp-60)}input.warning{border-color:var(--surface-dark-caution)}input.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}input.small{font:var(--input-small);padding:var(--size-small) var(--size-medium);height:var(--input-field-height-small)}input.large{font:var(--input-large);padding:var(--size-medium);height:var(--input-field-height-large)}\n"], dependencies: [{ kind: "directive", type: i1.AutoFocusDirective, selector: "[riv-auto-focus]", inputs: ["riv-auto-focus"] }, { kind: "component", type: i2.InputLabelComponent, selector: "riv-input-label", inputs: ["label", "help", "required", "labelActionText", "errorMessage", "state"], outputs: ["labelAction"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NumberFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: NumberFieldComponent, selector: "riv-number-field", inputs: { disabled: "disabled", readonly: "readonly", placeholder: "placeholder", maximumFractionDigits: "maximumFractionDigits", minimumFractionDigits: "minimumFractionDigits", min: "min", max: "max", align: "align", size: "size", autoFocus: "autoFocus", name: "name", value: "value" }, outputs: { valueChange: "valueChange", blur: "blur" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<riv-input-label\n  [label]=\"label\"\n  [help]=\"help\"\n  [required]=\"required\"\n  [state]=\"state\"\n  [errorMessage]=\"errorMessage\"\n  [labelActionText]=\"labelActionText\"\n  (labelAction)=\"labelAction.emit($event)\"\n>\n  <input\n    #input\n    [name]=\"name\"\n    [placeholder]=\"placeholder\"\n    type=\"text\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    [attr.aria-disabled]=\"disabled ? 'true' : null\"\n    [readonly]=\"readonly\"\n    [value]=\"text\"\n    [attr.aria-label]=\"label || null\"\n    (input)=\"text = input.value\"\n    [class.warning]=\"state === 'warning'\"\n    [class.error]=\"state === 'error'\"\n    [class.small]=\"size === 'small'\"\n    [class.large]=\"size === 'large'\"\n    [style.textAlign]=\"align\"\n    [riv-auto-focus]=\"autoFocus\"\n    autocomplete=\"off\"\n    autocorrect=\"off\"\n    autocapitalize=\"off\"\n    spellcheck=\"false\"\n    (blur)=\"inputBlur()\"\n  />\n</riv-input-label>\n", styles: ["input{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-small) var(--size-medium);height:var(--input-field-height-medium)}input::placeholder{color:var(--type-light-low-contrast)}input:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}input:read-only{background-color:var(--surface-light-1)}input:focus{outline:none;border:var(--border-width) solid var(--purp-60)}input.warning{border-color:var(--surface-dark-caution)}input.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}input.small{font:var(--input-small);padding:var(--size-small) var(--size-medium);height:var(--input-field-height-small)}input.large{font:var(--input-large);padding:var(--size-medium);height:var(--input-field-height-large)}\n"], dependencies: [{ kind: "directive", type: i1.AutoFocusDirective, selector: "[riv-auto-focus]", inputs: ["riv-auto-focus"] }, { kind: "component", type: i2.InputLabelComponent, selector: "riv-input-label", inputs: ["label", "help", "required", "labelActionText", "errorMessage", "state"], outputs: ["labelAction"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NumberFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NumberFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-number-field', changeDetection: ChangeDetectionStrategy.OnPush, template: "<riv-input-label\n  [label]=\"label\"\n  [help]=\"help\"\n  [required]=\"required\"\n  [state]=\"state\"\n  [errorMessage]=\"errorMessage\"\n  [labelActionText]=\"labelActionText\"\n  (labelAction)=\"labelAction.emit($event)\"\n>\n  <input\n    #input\n    [name]=\"name\"\n    [placeholder]=\"placeholder\"\n    type=\"text\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    [attr.aria-disabled]=\"disabled ? 'true' : null\"\n    [readonly]=\"readonly\"\n    [value]=\"text\"\n    [attr.aria-label]=\"label || null\"\n    (input)=\"text = input.value\"\n    [class.warning]=\"state === 'warning'\"\n    [class.error]=\"state === 'error'\"\n    [class.small]=\"size === 'small'\"\n    [class.large]=\"size === 'large'\"\n    [style.textAlign]=\"align\"\n    [riv-auto-focus]=\"autoFocus\"\n    autocomplete=\"off\"\n    autocorrect=\"off\"\n    autocapitalize=\"off\"\n    spellcheck=\"false\"\n    (blur)=\"inputBlur()\"\n  />\n</riv-input-label>\n", styles: ["input{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-small) var(--size-medium);height:var(--input-field-height-medium)}input::placeholder{color:var(--type-light-low-contrast)}input:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}input:read-only{background-color:var(--surface-light-1)}input:focus{outline:none;border:var(--border-width) solid var(--purp-60)}input.warning{border-color:var(--surface-dark-caution)}input.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}input.small{font:var(--input-small);padding:var(--size-small) var(--size-medium);height:var(--input-field-height-small)}input.large{font:var(--input-large);padding:var(--size-medium);height:var(--input-field-height-large)}\n"] }]
         }], propDecorators: { disabled: [{

package/esm2022/lib/input/percentage-field/percentage-field.component.mjs

@@ -8,10 +8,10 @@ export class PercentageFieldComponent extends NumberFieldComponent {
         super(...arguments);
         this.align = 'right';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PercentageFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PercentageFieldComponent, selector: "riv-percentage-field", inputs: { align: "align" }, usesInheritance: true, ngImport: i0, template: "<riv-input-label\n  [label]=\"label\"\n  [help]=\"help\"\n  [required]=\"required\"\n  [state]=\"state\"\n  [errorMessage]=\"errorMessage\"\n  [labelActionText]=\"labelActionText\"\n  (labelAction)=\"labelAction.emit($event)\"\n>\n  <input\n    #input\n    [name]=\"name\"\n    [placeholder]=\"placeholder\"\n    type=\"text\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    [attr.aria-disabled]=\"disabled ? 'true' : null\"\n    [readonly]=\"readonly\"\n    [value]=\"text\"\n    [attr.aria-label]=\"label || null\"\n    (input)=\"text = input.value\"\n    [class.warning]=\"state === 'warning'\"\n    [class.error]=\"state === 'error'\"\n    [class.small]=\"size === 'small'\"\n    [class.large]=\"size === 'large'\"\n    [style.textAlign]=\"align\"\n    [riv-auto-focus]=\"autoFocus\"\n    autocomplete=\"off\"\n    autocorrect=\"off\"\n    autocapitalize=\"off\"\n    spellcheck=\"false\"\n    (blur)=\"inputBlur()\"\n  />\n  <span\n    class=\"suffix\"\n    [class.small]=\"size === 'small'\"\n    [class.large]=\"size === 'large'\"\n    >%</span\n  >\n</riv-input-label>\n", styles: [":host{display:block;position:relative}.suffix{position:absolute;right:0;font:var(--input-medium);padding:var(--size-small)}.suffix.small{font:var(--input-small)}.suffix.large{font:var(--input-large);padding:var(--size-medium) var(--size-small)}input{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-small) var(--size-xlarge) var(--size-small) var(--size-medium);height:var(--input-field-height-medium)}input::placeholder{color:var(--type-light-low-contrast)}input:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}input:read-only{background-color:var(--surface-light-1)}input:focus{outline:none;border:var(--border-width) solid var(--purp-60)}input.warning{border-color:var(--surface-dark-caution)}input.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}input.small{font:var(--input-small);padding:var(--size-small) var(--size-xlarge) var(--size-small) var(--size-medium);height:var(--input-field-height-small)}input.large{font:var(--input-large);padding:var(--size-medium) var(--size-xlarge) var(--size-medium) var(--size-medium);height:var(--input-field-height-large)}\n"], dependencies: [{ kind: "directive", type: i1.AutoFocusDirective, selector: "[riv-auto-focus]", inputs: ["riv-auto-focus"] }, { kind: "component", type: i2.InputLabelComponent, selector: "riv-input-label", inputs: ["label", "help", "required", "labelActionText", "errorMessage", "state"], outputs: ["labelAction"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PercentageFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: PercentageFieldComponent, selector: "riv-percentage-field", inputs: { align: "align" }, usesInheritance: true, ngImport: i0, template: "<riv-input-label\n  [label]=\"label\"\n  [help]=\"help\"\n  [required]=\"required\"\n  [state]=\"state\"\n  [errorMessage]=\"errorMessage\"\n  [labelActionText]=\"labelActionText\"\n  (labelAction)=\"labelAction.emit($event)\"\n>\n  <input\n    #input\n    [name]=\"name\"\n    [placeholder]=\"placeholder\"\n    type=\"text\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    [attr.aria-disabled]=\"disabled ? 'true' : null\"\n    [readonly]=\"readonly\"\n    [value]=\"text\"\n    [attr.aria-label]=\"label || null\"\n    (input)=\"text = input.value\"\n    [class.warning]=\"state === 'warning'\"\n    [class.error]=\"state === 'error'\"\n    [class.small]=\"size === 'small'\"\n    [class.large]=\"size === 'large'\"\n    [style.textAlign]=\"align\"\n    [riv-auto-focus]=\"autoFocus\"\n    autocomplete=\"off\"\n    autocorrect=\"off\"\n    autocapitalize=\"off\"\n    spellcheck=\"false\"\n    (blur)=\"inputBlur()\"\n  />\n  <span\n    class=\"suffix\"\n    [class.small]=\"size === 'small'\"\n    [class.large]=\"size === 'large'\"\n    >%</span\n  >\n</riv-input-label>\n", styles: [":host{display:block;position:relative}.suffix{position:absolute;right:0;font:var(--input-medium);padding:var(--size-small)}.suffix.small{font:var(--input-small)}.suffix.large{font:var(--input-large);padding:var(--size-medium) var(--size-small)}input{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-small) var(--size-xlarge) var(--size-small) var(--size-medium);height:var(--input-field-height-medium)}input::placeholder{color:var(--type-light-low-contrast)}input:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}input:read-only{background-color:var(--surface-light-1)}input:focus{outline:none;border:var(--border-width) solid var(--purp-60)}input.warning{border-color:var(--surface-dark-caution)}input.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}input.small{font:var(--input-small);padding:var(--size-small) var(--size-xlarge) var(--size-small) var(--size-medium);height:var(--input-field-height-small)}input.large{font:var(--input-large);padding:var(--size-medium) var(--size-xlarge) var(--size-medium) var(--size-medium);height:var(--input-field-height-large)}\n"], dependencies: [{ kind: "directive", type: i1.AutoFocusDirective, selector: "[riv-auto-focus]", inputs: ["riv-auto-focus"] }, { kind: "component", type: i2.InputLabelComponent, selector: "riv-input-label", inputs: ["label", "help", "required", "labelActionText", "errorMessage", "state"], outputs: ["labelAction"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PercentageFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PercentageFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-percentage-field', changeDetection: ChangeDetectionStrategy.OnPush, template: "<riv-input-label\n  [label]=\"label\"\n  [help]=\"help\"\n  [required]=\"required\"\n  [state]=\"state\"\n  [errorMessage]=\"errorMessage\"\n  [labelActionText]=\"labelActionText\"\n  (labelAction)=\"labelAction.emit($event)\"\n>\n  <input\n    #input\n    [name]=\"name\"\n    [placeholder]=\"placeholder\"\n    type=\"text\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    [attr.aria-disabled]=\"disabled ? 'true' : null\"\n    [readonly]=\"readonly\"\n    [value]=\"text\"\n    [attr.aria-label]=\"label || null\"\n    (input)=\"text = input.value\"\n    [class.warning]=\"state === 'warning'\"\n    [class.error]=\"state === 'error'\"\n    [class.small]=\"size === 'small'\"\n    [class.large]=\"size === 'large'\"\n    [style.textAlign]=\"align\"\n    [riv-auto-focus]=\"autoFocus\"\n    autocomplete=\"off\"\n    autocorrect=\"off\"\n    autocapitalize=\"off\"\n    spellcheck=\"false\"\n    (blur)=\"inputBlur()\"\n  />\n  <span\n    class=\"suffix\"\n    [class.small]=\"size === 'small'\"\n    [class.large]=\"size === 'large'\"\n    >%</span\n  >\n</riv-input-label>\n", styles: [":host{display:block;position:relative}.suffix{position:absolute;right:0;font:var(--input-medium);padding:var(--size-small)}.suffix.small{font:var(--input-small)}.suffix.large{font:var(--input-large);padding:var(--size-medium) var(--size-small)}input{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-small) var(--size-xlarge) var(--size-small) var(--size-medium);height:var(--input-field-height-medium)}input::placeholder{color:var(--type-light-low-contrast)}input:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}input:read-only{background-color:var(--surface-light-1)}input:focus{outline:none;border:var(--border-width) solid var(--purp-60)}input.warning{border-color:var(--surface-dark-caution)}input.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}input.small{font:var(--input-small);padding:var(--size-small) var(--size-xlarge) var(--size-small) var(--size-medium);height:var(--input-field-height-small)}input.large{font:var(--input-large);padding:var(--size-medium) var(--size-xlarge) var(--size-medium) var(--size-medium);height:var(--input-field-height-large)}\n"] }]
         }], propDecorators: { align: [{

package/esm2022/lib/input/phone-field/phone-field.component.mjs

@@ -27,10 +27,10 @@ export class PhoneFieldComponent extends TextFieldComponent {
         this._text = PhoneFieldComponent.format(this._text);
         this.blur.emit(PhoneFieldComponent.clean(this._text));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PhoneFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PhoneFieldComponent, selector: "riv-phone-field", inputs: { placeholder: "placeholder", type: "type", maxLength: "maxLength" }, usesInheritance: true, ngImport: i0, template: "<riv-input-label\n  [label]=\"label\"\n  [help]=\"help\"\n  [required]=\"required\"\n  [labelActionText]=\"labelActionText\"\n  [state]=\"state\"\n  [errorMessage]=\"errorMessage\"\n  (labelAction)=\"labelAction.emit($event)\"\n>\n  <input\n    #input\n    [name]=\"name\"\n    [placeholder]=\"placeholder\"\n    [type]=\"type\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    [attr.aria-disabled]=\"disabled ? 'true' : null\"\n    [readonly]=\"readonly\"\n    [value]=\"text\"\n    [attr.aria-label]=\"label || null\"\n    (input)=\"text = input.value\"\n    [class.small]=\"size === 'small'\"\n    [class.large]=\"size === 'large'\"\n    [attr.maxlength]=\"maxLength\"\n    [attr.minlength]=\"minLength\"\n    [class.warning]=\"state === 'warning'\"\n    [class.error]=\"state === 'error'\"\n    [riv-auto-focus]=\"autoFocus\"\n    autocomplete=\"off\"\n    autocorrect=\"off\"\n    autocapitalize=\"off\"\n    spellcheck=\"false\"\n    (blur)=\"inputBlur()\"\n  />\n</riv-input-label>\n", styles: ["input{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-small) var(--size-medium);height:var(--input-field-height-medium)}input::placeholder{color:var(--type-light-low-contrast)}input:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}input:read-only{background-color:var(--surface-light-1)}input:focus{outline:none;border:var(--border-width) solid var(--purp-60)}input.warning{border-color:var(--surface-dark-caution)}input.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}input.small{font:var(--input-small);padding:var(--size-small) var(--size-medium);height:var(--input-field-height-small)}input.large{font:var(--input-large);padding:var(--size-medium);height:var(--input-field-height-large)}\n"], dependencies: [{ kind: "directive", type: i1.AutoFocusDirective, selector: "[riv-auto-focus]", inputs: ["riv-auto-focus"] }, { kind: "component", type: i2.InputLabelComponent, selector: "riv-input-label", inputs: ["label", "help", "required", "labelActionText", "errorMessage", "state"], outputs: ["labelAction"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PhoneFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: PhoneFieldComponent, selector: "riv-phone-field", inputs: { placeholder: "placeholder", type: "type", maxLength: "maxLength" }, usesInheritance: true, ngImport: i0, template: "<riv-input-label\n  [label]=\"label\"\n  [help]=\"help\"\n  [required]=\"required\"\n  [labelActionText]=\"labelActionText\"\n  [state]=\"state\"\n  [errorMessage]=\"errorMessage\"\n  (labelAction)=\"labelAction.emit($event)\"\n>\n  <input\n    #input\n    [name]=\"name\"\n    [placeholder]=\"placeholder\"\n    [type]=\"type\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    [attr.aria-disabled]=\"disabled ? 'true' : null\"\n    [readonly]=\"readonly\"\n    [value]=\"text\"\n    [attr.aria-label]=\"label || null\"\n    (input)=\"text = input.value\"\n    [class.small]=\"size === 'small'\"\n    [class.large]=\"size === 'large'\"\n    [attr.maxlength]=\"maxLength\"\n    [attr.minlength]=\"minLength\"\n    [class.warning]=\"state === 'warning'\"\n    [class.error]=\"state === 'error'\"\n    [riv-auto-focus]=\"autoFocus\"\n    autocomplete=\"off\"\n    autocorrect=\"off\"\n    autocapitalize=\"off\"\n    spellcheck=\"false\"\n    (blur)=\"inputBlur()\"\n  />\n</riv-input-label>\n", styles: ["input{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-small) var(--size-medium);height:var(--input-field-height-medium)}input::placeholder{color:var(--type-light-low-contrast)}input:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}input:read-only{background-color:var(--surface-light-1)}input:focus{outline:none;border:var(--border-width) solid var(--purp-60)}input.warning{border-color:var(--surface-dark-caution)}input.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}input.small{font:var(--input-small);padding:var(--size-small) var(--size-medium);height:var(--input-field-height-small)}input.large{font:var(--input-large);padding:var(--size-medium);height:var(--input-field-height-large)}\n"], dependencies: [{ kind: "directive", type: i1.AutoFocusDirective, selector: "[riv-auto-focus]", inputs: ["riv-auto-focus"] }, { kind: "component", type: i2.InputLabelComponent, selector: "riv-input-label", inputs: ["label", "help", "required", "labelActionText", "errorMessage", "state"], outputs: ["labelAction"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PhoneFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PhoneFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-phone-field', changeDetection: ChangeDetectionStrategy.OnPush, template: "<riv-input-label\n  [label]=\"label\"\n  [help]=\"help\"\n  [required]=\"required\"\n  [labelActionText]=\"labelActionText\"\n  [state]=\"state\"\n  [errorMessage]=\"errorMessage\"\n  (labelAction)=\"labelAction.emit($event)\"\n>\n  <input\n    #input\n    [name]=\"name\"\n    [placeholder]=\"placeholder\"\n    [type]=\"type\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    [attr.aria-disabled]=\"disabled ? 'true' : null\"\n    [readonly]=\"readonly\"\n    [value]=\"text\"\n    [attr.aria-label]=\"label || null\"\n    (input)=\"text = input.value\"\n    [class.small]=\"size === 'small'\"\n    [class.large]=\"size === 'large'\"\n    [attr.maxlength]=\"maxLength\"\n    [attr.minlength]=\"minLength\"\n    [class.warning]=\"state === 'warning'\"\n    [class.error]=\"state === 'error'\"\n    [riv-auto-focus]=\"autoFocus\"\n    autocomplete=\"off\"\n    autocorrect=\"off\"\n    autocapitalize=\"off\"\n    spellcheck=\"false\"\n    (blur)=\"inputBlur()\"\n  />\n</riv-input-label>\n", styles: ["input{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-small) var(--size-medium);height:var(--input-field-height-medium)}input::placeholder{color:var(--type-light-low-contrast)}input:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}input:read-only{background-color:var(--surface-light-1)}input:focus{outline:none;border:var(--border-width) solid var(--purp-60)}input.warning{border-color:var(--surface-dark-caution)}input.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}input.small{font:var(--input-small);padding:var(--size-small) var(--size-medium);height:var(--input-field-height-small)}input.large{font:var(--input-large);padding:var(--size-medium);height:var(--input-field-height-large)}\n"] }]
         }], propDecorators: { placeholder: [{

package/esm2022/lib/input/radio/radio.component.mjs

@@ -15,10 +15,10 @@ export class RadioComponent {
     isRadioOnly() {
         return !this.title && !this.labelTemplate;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: RadioComponent, selector: "riv-radio", inputs: { name: "name", identifier: "identifier", value: "value", checked: "checked", size: "size", title: "title", subtitle: "subtitle", disabled: "disabled", required: "required", state: "state", errorMessage: "errorMessage" }, outputs: { checkedChange: "checkedChange" }, queries: [{ propertyName: "labelTemplate", first: true, predicate: ["label"], descendants: true }], viewQueries: [{ propertyName: "label", first: true, predicate: ["label"], descendants: true, static: true }], ngImport: i0, template: "<label\n  #label\n  class=\"wrapper\"\n  [ngClass]=\"size\"\n  [class.disabled]=\"disabled\"\n  [class.has-content]=\"!isRadioOnly()\"\n>\n  <input\n    #input\n    type=\"radio\"\n    [id]=\"identifier\"\n    [name]=\"name\"\n    [value]=\"value\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    [attr.aria-disabled]=\"disabled ? 'true' : null\"\n    [checked]=\"checked\"\n    [class.error]=\"state === 'error'\"\n    (change)=\"checkedChange.emit(!!input.checked)\"\n  />\n  <ng-container *ngIf=\"labelTemplate; else defaultLabel\">\n    <ng-container\n      *ngTemplateOutlet=\"labelTemplate; context: { checked }\"\n    ></ng-container>\n  </ng-container>\n  <ng-template #defaultLabel>\n    <div *ngIf=\"title\" class=\"label\">\n      <span class=\"title\">{{ title }}</span>\n      <span *ngIf=\"subtitle\" class=\"subtitle\">{{ subtitle }}</span>\n    </div>\n  </ng-template>\n</label>\n<riv-validation-message\n  *ngIf=\"errorMessage\"\n  class=\"error-message\"\n  [message]=\"errorMessage\"\n></riv-validation-message>\n", styles: [":host{display:inline-flex;flex-direction:column}.wrapper{flex-grow:1;display:inline-flex;gap:var(--size-small);align-items:flex-start;max-width:100%}.wrapper.has-content{padding:var(--size-xsmall);border-radius:var(--border-radius-xsmall);transition:background-color var(--short-transition)}.wrapper.has-content:hover:not(.disabled){cursor:pointer;background-color:var(--surface-light-2)}.wrapper.has-content:active:not(.disabled){background-color:var(--surface-light-3)}.wrapper.medium{--outer-size: calc(var(--base-grid-size) * 4);--inner-size: calc(var(--base-grid-size) * 2.5)}.wrapper.large{--outer-size: calc(var(--base-grid-size) * 5);--inner-size: calc(var(--base-grid-size) * 3)}input{margin:0;width:var(--outer-size);height:var(--outer-size);position:relative;cursor:pointer;flex-shrink:0;appearance:none}input:before{content:\"\";position:absolute;inset:0;border-radius:100%;background-color:var(--surface-light-0);border:var(--border-width) solid var(--border-light)}input:disabled:before{background-color:var(--black-10)}input.error:before{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}input:checked:after{content:\"\";width:var(--inner-size);height:var(--inner-size);border-radius:100%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:var(--brand)}input:disabled{cursor:default}input:disabled:after{background-color:var(--black-20)}input:disabled:checked:after,input:disabled:indeterminate:after{background-color:var(--black-40)}.label{display:flex;flex-direction:column;gap:var(--size-xsmall)}.title{color:var(--type-light-high-contrast)}.wrapper.medium .title{font:var(--input-medium)}.wrapper.large .title{font:var(--input-large);line-height:var(--type-3-line-height-1)}.wrapper.disabled .title{color:var(--type-light-disabled)}.subtitle{color:var(--type-light-low-contrast);font:var(--input-small)}.wrapper.disabled .subtitle{color:var(--type-light-disabled)}.error-message{margin-left:calc(var(--base-grid-size) * 7)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.ValidationMessageComponent, selector: "riv-validation-message", inputs: ["message"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: RadioComponent, selector: "riv-radio", inputs: { name: "name", identifier: "identifier", value: "value", checked: "checked", size: "size", title: "title", subtitle: "subtitle", disabled: "disabled", required: "required", state: "state", errorMessage: "errorMessage" }, outputs: { checkedChange: "checkedChange" }, queries: [{ propertyName: "labelTemplate", first: true, predicate: ["label"], descendants: true }], viewQueries: [{ propertyName: "label", first: true, predicate: ["label"], descendants: true, static: true }], ngImport: i0, template: "<label\n  #label\n  class=\"wrapper\"\n  [ngClass]=\"size\"\n  [class.disabled]=\"disabled\"\n  [class.has-content]=\"!isRadioOnly()\"\n>\n  <input\n    #input\n    type=\"radio\"\n    [id]=\"identifier\"\n    [name]=\"name\"\n    [value]=\"value\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    [attr.aria-disabled]=\"disabled ? 'true' : null\"\n    [checked]=\"checked\"\n    [class.error]=\"state === 'error'\"\n    (change)=\"checkedChange.emit(!!input.checked)\"\n  />\n  <ng-container *ngIf=\"labelTemplate; else defaultLabel\">\n    <ng-container\n      *ngTemplateOutlet=\"labelTemplate; context: { checked }\"\n    ></ng-container>\n  </ng-container>\n  <ng-template #defaultLabel>\n    <div *ngIf=\"title\" class=\"label\">\n      <span class=\"title\">{{ title }}</span>\n      <span *ngIf=\"subtitle\" class=\"subtitle\">{{ subtitle }}</span>\n    </div>\n  </ng-template>\n</label>\n<riv-validation-message\n  *ngIf=\"errorMessage\"\n  class=\"error-message\"\n  [message]=\"errorMessage\"\n></riv-validation-message>\n", styles: [":host{display:inline-flex;flex-direction:column}.wrapper{flex-grow:1;display:inline-flex;gap:var(--size-small);align-items:flex-start;max-width:100%}.wrapper.has-content{padding:var(--size-xsmall);border-radius:var(--border-radius-xsmall);transition:background-color var(--short-transition)}.wrapper.has-content:hover:not(.disabled){cursor:pointer;background-color:var(--surface-light-2)}.wrapper.has-content:active:not(.disabled){background-color:var(--surface-light-3)}.wrapper.medium{--outer-size: calc(var(--base-grid-size) * 4);--inner-size: calc(var(--base-grid-size) * 2.5)}.wrapper.large{--outer-size: calc(var(--base-grid-size) * 5);--inner-size: calc(var(--base-grid-size) * 3)}input{margin:0;width:var(--outer-size);height:var(--outer-size);position:relative;cursor:pointer;flex-shrink:0;appearance:none}input:before{content:\"\";position:absolute;inset:0;border-radius:100%;background-color:var(--surface-light-0);border:var(--border-width) solid var(--border-light)}input:disabled:before{background-color:var(--black-10)}input.error:before{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}input:checked:after{content:\"\";width:var(--inner-size);height:var(--inner-size);border-radius:100%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:var(--brand)}input:disabled{cursor:default}input:disabled:after{background-color:var(--black-20)}input:disabled:checked:after,input:disabled:indeterminate:after{background-color:var(--black-40)}.label{display:flex;flex-direction:column;gap:var(--size-xsmall)}.title{color:var(--type-light-high-contrast)}.wrapper.medium .title{font:var(--input-medium)}.wrapper.large .title{font:var(--input-large);line-height:var(--type-3-line-height-1)}.wrapper.disabled .title{color:var(--type-light-disabled)}.subtitle{color:var(--type-light-low-contrast);font:var(--input-small)}.wrapper.disabled .subtitle{color:var(--type-light-disabled)}.error-message{margin-left:calc(var(--base-grid-size) * 7)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.ValidationMessageComponent, selector: "riv-validation-message", inputs: ["message"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RadioComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RadioComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-radio', changeDetection: ChangeDetectionStrategy.OnPush, template: "<label\n  #label\n  class=\"wrapper\"\n  [ngClass]=\"size\"\n  [class.disabled]=\"disabled\"\n  [class.has-content]=\"!isRadioOnly()\"\n>\n  <input\n    #input\n    type=\"radio\"\n    [id]=\"identifier\"\n    [name]=\"name\"\n    [value]=\"value\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    [attr.aria-disabled]=\"disabled ? 'true' : null\"\n    [checked]=\"checked\"\n    [class.error]=\"state === 'error'\"\n    (change)=\"checkedChange.emit(!!input.checked)\"\n  />\n  <ng-container *ngIf=\"labelTemplate; else defaultLabel\">\n    <ng-container\n      *ngTemplateOutlet=\"labelTemplate; context: { checked }\"\n    ></ng-container>\n  </ng-container>\n  <ng-template #defaultLabel>\n    <div *ngIf=\"title\" class=\"label\">\n      <span class=\"title\">{{ title }}</span>\n      <span *ngIf=\"subtitle\" class=\"subtitle\">{{ subtitle }}</span>\n    </div>\n  </ng-template>\n</label>\n<riv-validation-message\n  *ngIf=\"errorMessage\"\n  class=\"error-message\"\n  [message]=\"errorMessage\"\n></riv-validation-message>\n", styles: [":host{display:inline-flex;flex-direction:column}.wrapper{flex-grow:1;display:inline-flex;gap:var(--size-small);align-items:flex-start;max-width:100%}.wrapper.has-content{padding:var(--size-xsmall);border-radius:var(--border-radius-xsmall);transition:background-color var(--short-transition)}.wrapper.has-content:hover:not(.disabled){cursor:pointer;background-color:var(--surface-light-2)}.wrapper.has-content:active:not(.disabled){background-color:var(--surface-light-3)}.wrapper.medium{--outer-size: calc(var(--base-grid-size) * 4);--inner-size: calc(var(--base-grid-size) * 2.5)}.wrapper.large{--outer-size: calc(var(--base-grid-size) * 5);--inner-size: calc(var(--base-grid-size) * 3)}input{margin:0;width:var(--outer-size);height:var(--outer-size);position:relative;cursor:pointer;flex-shrink:0;appearance:none}input:before{content:\"\";position:absolute;inset:0;border-radius:100%;background-color:var(--surface-light-0);border:var(--border-width) solid var(--border-light)}input:disabled:before{background-color:var(--black-10)}input.error:before{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}input:checked:after{content:\"\";width:var(--inner-size);height:var(--inner-size);border-radius:100%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:var(--brand)}input:disabled{cursor:default}input:disabled:after{background-color:var(--black-20)}input:disabled:checked:after,input:disabled:indeterminate:after{background-color:var(--black-40)}.label{display:flex;flex-direction:column;gap:var(--size-xsmall)}.title{color:var(--type-light-high-contrast)}.wrapper.medium .title{font:var(--input-medium)}.wrapper.large .title{font:var(--input-large);line-height:var(--type-3-line-height-1)}.wrapper.disabled .title{color:var(--type-light-disabled)}.subtitle{color:var(--type-light-low-contrast);font:var(--input-small)}.wrapper.disabled .subtitle{color:var(--type-light-disabled)}.error-message{margin-left:calc(var(--base-grid-size) * 7)}\n"] }]
         }], propDecorators: { name: [{

package/esm2022/lib/input/search/search.component.mjs

@@ -10,10 +10,10 @@ export class SearchComponent extends TextFieldComponent {
         this.placeholder = 'Search';
         this.name = 'search';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SearchComponent, selector: "riv-search", inputs: { placeholder: "placeholder", name: "name", labelTemplate: "labelTemplate" }, usesInheritance: true, ngImport: i0, template: "<input\n  #input\n  [id]=\"name\"\n  [name]=\"name\"\n  [placeholder]=\"placeholder\"\n  [type]=\"type\"\n  [required]=\"required\"\n  [disabled]=\"disabled\"\n  [attr.aria-disabled]=\"disabled ? 'true' : null\"\n  [readonly]=\"readonly\"\n  [value]=\"text\"\n  (input)=\"text = input.value\"\n  [class.large]=\"size === 'large'\"\n  [attr.maxlength]=\"maxLength\"\n  [attr.minlength]=\"minLength\"\n  [class.warning]=\"state === 'warning'\"\n  [class.error]=\"state === 'error'\"\n  [riv-auto-focus]=\"autoFocus\"\n  autocomplete=\"off\"\n  autocorrect=\"off\"\n  autocapitalize=\"off\"\n  spellcheck=\"false\"\n  (blur)=\"inputBlur()\"\n/>\n<div class=\"label\">\n  <label [for]=\"name\" [class.close]=\"!!text\" (click)=\"text = ''\">\n    <riv-icon\n      *ngIf=\"!labelTemplate\"\n      [class.clickable]=\"!!text\"\n      [name]=\"!!text ? 'X' : 'Search'\"\n      [size]=\"20\"\n    ></riv-icon>\n    <riv-icon\n      *ngIf=\"labelTemplate && !!text\"\n      class=\"clickable\"\n      [name]=\"'X'\"\n      [size]=\"20\"\n    ></riv-icon>\n  </label>\n  <ng-container *ngIf=\"labelTemplate\" class=\"search-columns\"\n    ><ng-template [ngTemplateOutlet]=\"labelTemplate\"></ng-template\n  ></ng-container>\n</div>\n", styles: ["input{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-small) var(--size-medium);height:var(--input-field-height-medium)}input::placeholder{color:var(--type-light-low-contrast)}input:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}input:read-only{background-color:var(--surface-light-1)}input:focus{outline:none;border:var(--border-width) solid var(--purp-60)}input.warning{border-color:var(--surface-dark-caution)}input.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}input.small{font:var(--input-small);padding:var(--size-small) var(--size-medium);height:var(--input-field-height-small)}input.large{font:var(--input-large);padding:var(--size-medium);height:var(--input-field-height-large)}\n", ":host{position:relative}input{padding-right:calc(var(--size-xlarge) + var(--size-xsmall))}.label{position:absolute;top:0;right:0;bottom:0;color:var(--type-light-low-contrast);display:flex;align-items:center;justify-content:center;padding-right:var(--size-medium)}.label label{color:var(--type-light-low-contrast);display:flex;align-items:center;justify-content:center}label.close{color:var(--type-light-high-contrast)}.clickable:hover{background-color:var(--black-20);cursor:pointer;transition:background-color var(--short-transition)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.AutoFocusDirective, selector: "[riv-auto-focus]", inputs: ["riv-auto-focus"] }, { kind: "component", type: i3.IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SearchComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SearchComponent, selector: "riv-search", inputs: { placeholder: "placeholder", name: "name", labelTemplate: "labelTemplate" }, usesInheritance: true, ngImport: i0, template: "<input\n  #input\n  [id]=\"name\"\n  [name]=\"name\"\n  [placeholder]=\"placeholder\"\n  [type]=\"type\"\n  [required]=\"required\"\n  [disabled]=\"disabled\"\n  [attr.aria-disabled]=\"disabled ? 'true' : null\"\n  [readonly]=\"readonly\"\n  [value]=\"text\"\n  (input)=\"text = input.value\"\n  [class.large]=\"size === 'large'\"\n  [attr.maxlength]=\"maxLength\"\n  [attr.minlength]=\"minLength\"\n  [class.warning]=\"state === 'warning'\"\n  [class.error]=\"state === 'error'\"\n  [riv-auto-focus]=\"autoFocus\"\n  autocomplete=\"off\"\n  autocorrect=\"off\"\n  autocapitalize=\"off\"\n  spellcheck=\"false\"\n  (blur)=\"inputBlur()\"\n/>\n<div class=\"label\">\n  <label [for]=\"name\" [class.close]=\"!!text\" (click)=\"text = ''\">\n    <riv-icon\n      *ngIf=\"!labelTemplate\"\n      [class.clickable]=\"!!text\"\n      [name]=\"!!text ? 'X' : 'Search'\"\n      [size]=\"20\"\n    ></riv-icon>\n    <riv-icon\n      *ngIf=\"labelTemplate && !!text\"\n      class=\"clickable\"\n      [name]=\"'X'\"\n      [size]=\"20\"\n    ></riv-icon>\n  </label>\n  <ng-container *ngIf=\"labelTemplate\" class=\"search-columns\"\n    ><ng-template [ngTemplateOutlet]=\"labelTemplate\"></ng-template\n  ></ng-container>\n</div>\n", styles: ["input{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-small) var(--size-medium);height:var(--input-field-height-medium)}input::placeholder{color:var(--type-light-low-contrast)}input:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}input:read-only{background-color:var(--surface-light-1)}input:focus{outline:none;border:var(--border-width) solid var(--purp-60)}input.warning{border-color:var(--surface-dark-caution)}input.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}input.small{font:var(--input-small);padding:var(--size-small) var(--size-medium);height:var(--input-field-height-small)}input.large{font:var(--input-large);padding:var(--size-medium);height:var(--input-field-height-large)}\n", ":host{position:relative}input{padding-right:calc(var(--size-xlarge) + var(--size-xsmall))}.label{position:absolute;top:0;right:0;bottom:0;color:var(--type-light-low-contrast);display:flex;align-items:center;justify-content:center;padding-right:var(--size-medium)}.label label{color:var(--type-light-low-contrast);display:flex;align-items:center;justify-content:center}label.close{color:var(--type-light-high-contrast)}.clickable:hover{background-color:var(--black-20);cursor:pointer;transition:background-color var(--short-transition)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.AutoFocusDirective, selector: "[riv-auto-focus]", inputs: ["riv-auto-focus"] }, { kind: "component", type: i3.IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SearchComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-search', changeDetection: ChangeDetectionStrategy.OnPush, template: "<input\n  #input\n  [id]=\"name\"\n  [name]=\"name\"\n  [placeholder]=\"placeholder\"\n  [type]=\"type\"\n  [required]=\"required\"\n  [disabled]=\"disabled\"\n  [attr.aria-disabled]=\"disabled ? 'true' : null\"\n  [readonly]=\"readonly\"\n  [value]=\"text\"\n  (input)=\"text = input.value\"\n  [class.large]=\"size === 'large'\"\n  [attr.maxlength]=\"maxLength\"\n  [attr.minlength]=\"minLength\"\n  [class.warning]=\"state === 'warning'\"\n  [class.error]=\"state === 'error'\"\n  [riv-auto-focus]=\"autoFocus\"\n  autocomplete=\"off\"\n  autocorrect=\"off\"\n  autocapitalize=\"off\"\n  spellcheck=\"false\"\n  (blur)=\"inputBlur()\"\n/>\n<div class=\"label\">\n  <label [for]=\"name\" [class.close]=\"!!text\" (click)=\"text = ''\">\n    <riv-icon\n      *ngIf=\"!labelTemplate\"\n      [class.clickable]=\"!!text\"\n      [name]=\"!!text ? 'X' : 'Search'\"\n      [size]=\"20\"\n    ></riv-icon>\n    <riv-icon\n      *ngIf=\"labelTemplate && !!text\"\n      class=\"clickable\"\n      [name]=\"'X'\"\n      [size]=\"20\"\n    ></riv-icon>\n  </label>\n  <ng-container *ngIf=\"labelTemplate\" class=\"search-columns\"\n    ><ng-template [ngTemplateOutlet]=\"labelTemplate\"></ng-template\n  ></ng-container>\n</div>\n", styles: ["input{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-small) var(--size-medium);height:var(--input-field-height-medium)}input::placeholder{color:var(--type-light-low-contrast)}input:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}input:read-only{background-color:var(--surface-light-1)}input:focus{outline:none;border:var(--border-width) solid var(--purp-60)}input.warning{border-color:var(--surface-dark-caution)}input.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}input.small{font:var(--input-small);padding:var(--size-small) var(--size-medium);height:var(--input-field-height-small)}input.large{font:var(--input-large);padding:var(--size-medium);height:var(--input-field-height-large)}\n", ":host{position:relative}input{padding-right:calc(var(--size-xlarge) + var(--size-xsmall))}.label{position:absolute;top:0;right:0;bottom:0;color:var(--type-light-low-contrast);display:flex;align-items:center;justify-content:center;padding-right:var(--size-medium)}.label label{color:var(--type-light-low-contrast);display:flex;align-items:center;justify-content:center}label.close{color:var(--type-light-high-contrast)}.clickable:hover{background-color:var(--black-20);cursor:pointer;transition:background-color var(--short-transition)}\n"] }]
         }], propDecorators: { placeholder: [{