@rivet-health/design-system 40.44.2 → 40.44.3

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

@@ -137,10 +137,10 @@ export class SearchSelectComponent {
     get showAddNew() {
         return !!this.searchText.trim();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchSelectComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SearchSelectComponent, selector: "riv-search-select", inputs: { options: "options", selected: "selected", placeholder: "placeholder", addNewLabel: "addNewLabel", newTooltip: "newTooltip", size: "size", disabled: "disabled", label: "label", help: "help", required: "required", state: "state", errorMessage: "errorMessage", optionTemplate: "optionTemplate", chipTemplate: "chipTemplate" }, outputs: { selectedChange: "selectedChange", addNew: "addNew" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "trigger", first: true, predicate: ["trigger"], descendants: 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>\n  <div class=\"search-select\" [class.disabled]=\"disabled\">\n    <div #trigger class=\"input-wrapper\">\n      <input\n        #searchInput\n        type=\"text\"\n        [placeholder]=\"placeholder\"\n        [value]=\"searchText\"\n        [disabled]=\"disabled\"\n        [attr.aria-disabled]=\"disabled ? 'true' : null\"\n        [class.small]=\"size === 'small'\"\n        [class.large]=\"size === 'large'\"\n        [class.warning]=\"state === 'warning'\"\n        [class.error]=\"state === 'error'\"\n        (input)=\"onSearchInput(searchInput.value)\"\n        (focus)=\"onInputFocus()\"\n        (blur)=\"onInputBlur($event)\"\n        (keydown)=\"onKeydown($event)\"\n        autocomplete=\"off\"\n      />\n    </div>\n\n    <div *ngIf=\"selected.length > 0\" class=\"chips\">\n      <div\n        *ngFor=\"let option of selected; trackBy: trackByOption\"\n        class=\"chip\"\n        [class.new]=\"option.new\"\n        [class.existing]=\"!option.new\"\n        [class.small]=\"size === 'small'\"\n        [class.large]=\"size === 'large'\"\n        [rivTooltip]=\"option.new && newTooltip ? newTooltip : undefined\"\n      >\n        <button\n          type=\"button\"\n          rivButton\n          [variant]=\"'ghost'\"\n          [icon]=\"'X'\"\n          [size]=\"'xsmall'\"\n          [disabled]=\"disabled\"\n          (click)=\"removeOption(option)\"\n        ></button>\n        <ng-container *ngIf=\"chipTemplate; else defaultChip\">\n          <ng-container\n            *ngTemplateOutlet=\"chipTemplate; context: { option: option }\"\n          ></ng-container>\n        </ng-container>\n        <ng-template #defaultChip>\n          <span class=\"chip-text\">{{ option.title }}</span>\n        </ng-template>\n      </div>\n    </div>\n  </div>\n\n  <ng-container *ngIf=\"isOpen\">\n    <riv-callout\n      *riv-overlay\n      [anchor]=\"trigger\"\n      [theme]=\"'light'\"\n      [showCaret]=\"false\"\n      [preferredPosition]=\"'bottom-right'\"\n      [allowedPositions]=\"['bottom-right']\"\n      (close)=\"close()\"\n    >\n      <div class=\"dropdown\">\n        <button\n          *ngIf=\"showAddNew\"\n          type=\"button\"\n          class=\"dropdown-option add-new\"\n          (mousedown)=\"$event.preventDefault()\"\n          (click)=\"onAddNew()\"\n        >\n          <riv-icon [name]=\"'Plus'\" [size]=\"16\"></riv-icon>\n          <span>{{ addNewLabel }} \"{{ searchText }}\"</span>\n        </button>\n\n        <div *ngIf=\"filteredOptions.length > 0\" class=\"options-list\">\n          <button\n            *ngFor=\"let option of filteredOptions; trackBy: trackByOption\"\n            type=\"button\"\n            class=\"dropdown-option\"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"selectOption(option)\"\n          >\n            <ng-container *ngIf=\"optionTemplate; else defaultOption\">\n              <ng-container\n                *ngTemplateOutlet=\"optionTemplate; context: { option: option }\"\n              ></ng-container>\n            </ng-container>\n            <ng-template #defaultOption>\n              <span class=\"option-title\">{{ option.title }}</span>\n              <span *ngIf=\"option.subtitle\" class=\"option-subtitle\">{{\n                option.subtitle\n              }}</span>\n            </ng-template>\n          </button>\n        </div>\n\n        <div\n          *ngIf=\"filteredOptions.length === 0 && !showAddNew\"\n          class=\"no-results\"\n        >\n          No results found\n        </div>\n      </div>\n    </riv-callout>\n  </ng-container>\n</riv-input-label>\n", styles: [":host{display:block}.search-select{display:flex;flex-direction:column;gap:var(--size-small)}.search-select.disabled{opacity:.6;pointer-events:none}.input-wrapper{position:relative}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);padding-right:calc(var(--size-xlarge) + var(--size-xsmall));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: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)}.chips{display:flex;flex-wrap:wrap;gap:var(--size-small)}.chip{display:inline-flex;align-items:center;gap:var(--size-xsmall);border-radius:var(--border-radius-medium);padding:var(--size-xsmall) var(--size-medium) var(--size-xsmall) var(--size-small);font:var(--title-02);color:var(--type-light-high-contrast);max-width:100%}.chip.existing{background-color:var(--purp-10);border:var(--border-width) solid var(--border-light)}.chip.new{border:var(--border-width) dashed var(--border-light)}.chip.small{font:var(--input-small);padding:calc(var(--size-xsmall) / 2) var(--size-small)}.chip.large{font:var(--input-large);padding:var(--size-small) var(--size-medium)}.chip-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dropdown{min-width:200px;max-width:400px;max-height:300px;overflow-y:auto;padding:var(--size-large)}.dropdown-option{display:flex;align-items:center;gap:var(--size-small);width:100%;padding:var(--size-small) var(--size-xsmall);border-radius:var(--border-radius-medium);font:var(--input-medium);text-align:left;cursor:pointer;transition:background-color var(--short-transition)}.dropdown-option:hover{background-color:var(--surface-light-2)}.dropdown-option:active{background-color:var(--surface-light-3)}.dropdown-option.add-new{color:var(--purp-80);font-weight:var(--font-weight-heavy)}.dropdown-option.add-new riv-icon{color:var(--purp-80)}.options-list{display:flex;flex-direction:column;gap:var(--size-xsmall)}.option-title{color:var(--type-light-high-contrast);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.option-subtitle{color:var(--type-light-low-contrast);margin-left:var(--size-xsmall);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.no-results{padding:var(--size-medium);text-align:center;color:var(--type-light-low-contrast);font:var(--input-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: "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.CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "component", type: i4.IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "component", type: i5.InputLabelComponent, selector: "riv-input-label", inputs: ["label", "help", "required", "labelActionText", "errorMessage", "state"], outputs: ["labelAction"] }, { kind: "directive", type: i6.OverlayDirective, selector: "[riv-overlay]" }, { kind: "directive", type: i7.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: SearchSelectComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SearchSelectComponent, selector: "riv-search-select", inputs: { options: "options", selected: "selected", placeholder: "placeholder", addNewLabel: "addNewLabel", newTooltip: "newTooltip", size: "size", disabled: "disabled", label: "label", help: "help", required: "required", state: "state", errorMessage: "errorMessage", optionTemplate: "optionTemplate", chipTemplate: "chipTemplate" }, outputs: { selectedChange: "selectedChange", addNew: "addNew" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "trigger", first: true, predicate: ["trigger"], descendants: 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>\n  <div class=\"search-select\" [class.disabled]=\"disabled\">\n    <div #trigger class=\"input-wrapper\">\n      <input\n        #searchInput\n        type=\"text\"\n        [placeholder]=\"placeholder\"\n        [value]=\"searchText\"\n        [disabled]=\"disabled\"\n        [attr.aria-disabled]=\"disabled ? 'true' : null\"\n        [class.small]=\"size === 'small'\"\n        [class.large]=\"size === 'large'\"\n        [class.warning]=\"state === 'warning'\"\n        [class.error]=\"state === 'error'\"\n        (input)=\"onSearchInput(searchInput.value)\"\n        (focus)=\"onInputFocus()\"\n        (blur)=\"onInputBlur($event)\"\n        (keydown)=\"onKeydown($event)\"\n        autocomplete=\"off\"\n      />\n    </div>\n\n    <div *ngIf=\"selected.length > 0\" class=\"chips\">\n      <div\n        *ngFor=\"let option of selected; trackBy: trackByOption\"\n        class=\"chip\"\n        [class.new]=\"option.new\"\n        [class.existing]=\"!option.new\"\n        [class.small]=\"size === 'small'\"\n        [class.large]=\"size === 'large'\"\n        [rivTooltip]=\"option.new && newTooltip ? newTooltip : undefined\"\n      >\n        <button\n          type=\"button\"\n          rivButton\n          [variant]=\"'ghost'\"\n          [icon]=\"'X'\"\n          [size]=\"'xsmall'\"\n          [disabled]=\"disabled\"\n          (click)=\"removeOption(option)\"\n        ></button>\n        <ng-container *ngIf=\"chipTemplate; else defaultChip\">\n          <ng-container\n            *ngTemplateOutlet=\"chipTemplate; context: { option: option }\"\n          ></ng-container>\n        </ng-container>\n        <ng-template #defaultChip>\n          <span class=\"chip-text\">{{ option.title }}</span>\n        </ng-template>\n      </div>\n    </div>\n  </div>\n\n  <ng-container *ngIf=\"isOpen\">\n    <riv-callout\n      *riv-overlay\n      [anchor]=\"trigger\"\n      [theme]=\"'light'\"\n      [showCaret]=\"false\"\n      [preferredPosition]=\"'bottom-right'\"\n      [allowedPositions]=\"['bottom-right']\"\n      (close)=\"close()\"\n    >\n      <div class=\"dropdown\">\n        <button\n          *ngIf=\"showAddNew\"\n          type=\"button\"\n          class=\"dropdown-option add-new\"\n          (mousedown)=\"$event.preventDefault()\"\n          (click)=\"onAddNew()\"\n        >\n          <riv-icon [name]=\"'Plus'\" [size]=\"16\"></riv-icon>\n          <span>{{ addNewLabel }} \"{{ searchText }}\"</span>\n        </button>\n\n        <div *ngIf=\"filteredOptions.length > 0\" class=\"options-list\">\n          <button\n            *ngFor=\"let option of filteredOptions; trackBy: trackByOption\"\n            type=\"button\"\n            class=\"dropdown-option\"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"selectOption(option)\"\n          >\n            <ng-container *ngIf=\"optionTemplate; else defaultOption\">\n              <ng-container\n                *ngTemplateOutlet=\"optionTemplate; context: { option: option }\"\n              ></ng-container>\n            </ng-container>\n            <ng-template #defaultOption>\n              <span class=\"option-title\">{{ option.title }}</span>\n              <span *ngIf=\"option.subtitle\" class=\"option-subtitle\">{{\n                option.subtitle\n              }}</span>\n            </ng-template>\n          </button>\n        </div>\n\n        <div\n          *ngIf=\"filteredOptions.length === 0 && !showAddNew\"\n          class=\"no-results\"\n        >\n          No results found\n        </div>\n      </div>\n    </riv-callout>\n  </ng-container>\n</riv-input-label>\n", styles: [":host{display:block}.search-select{display:flex;flex-direction:column;gap:var(--size-small)}.search-select.disabled{opacity:.6;pointer-events:none}.input-wrapper{position:relative}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);padding-right:calc(var(--size-xlarge) + var(--size-xsmall));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: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)}.chips{display:flex;flex-wrap:wrap;gap:var(--size-small)}.chip{display:inline-flex;align-items:center;gap:var(--size-xsmall);border-radius:var(--border-radius-medium);padding:var(--size-xsmall) var(--size-medium) var(--size-xsmall) var(--size-small);font:var(--title-02);color:var(--type-light-high-contrast);max-width:100%}.chip.existing{background-color:var(--purp-10);border:var(--border-width) solid var(--border-light)}.chip.new{border:var(--border-width) dashed var(--border-light)}.chip.small{font:var(--input-small);padding:calc(var(--size-xsmall) / 2) var(--size-small)}.chip.large{font:var(--input-large);padding:var(--size-small) var(--size-medium)}.chip-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dropdown{min-width:200px;max-width:400px;max-height:300px;overflow-y:auto;padding:var(--size-large)}.dropdown-option{display:flex;align-items:center;gap:var(--size-small);width:100%;padding:var(--size-small) var(--size-xsmall);border-radius:var(--border-radius-medium);font:var(--input-medium);text-align:left;cursor:pointer;transition:background-color var(--short-transition)}.dropdown-option:hover{background-color:var(--surface-light-2)}.dropdown-option:active{background-color:var(--surface-light-3)}.dropdown-option.add-new{color:var(--purp-80);font-weight:var(--font-weight-heavy)}.dropdown-option.add-new riv-icon{color:var(--purp-80)}.options-list{display:flex;flex-direction:column;gap:var(--size-xsmall)}.option-title{color:var(--type-light-high-contrast);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.option-subtitle{color:var(--type-light-low-contrast);margin-left:var(--size-xsmall);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.no-results{padding:var(--size-medium);text-align:center;color:var(--type-light-low-contrast);font:var(--input-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: "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.CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "component", type: i4.IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "component", type: i5.InputLabelComponent, selector: "riv-input-label", inputs: ["label", "help", "required", "labelActionText", "errorMessage", "state"], outputs: ["labelAction"] }, { kind: "directive", type: i6.OverlayDirective, selector: "[riv-overlay]" }, { kind: "directive", type: i7.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: SearchSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SearchSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-search-select', changeDetection: ChangeDetectionStrategy.OnPush, template: "<riv-input-label\n  [label]=\"label\"\n  [help]=\"help\"\n  [required]=\"required\"\n  [state]=\"state\"\n  [errorMessage]=\"errorMessage ?? ''\"\n>\n  <div class=\"search-select\" [class.disabled]=\"disabled\">\n    <div #trigger class=\"input-wrapper\">\n      <input\n        #searchInput\n        type=\"text\"\n        [placeholder]=\"placeholder\"\n        [value]=\"searchText\"\n        [disabled]=\"disabled\"\n        [attr.aria-disabled]=\"disabled ? 'true' : null\"\n        [class.small]=\"size === 'small'\"\n        [class.large]=\"size === 'large'\"\n        [class.warning]=\"state === 'warning'\"\n        [class.error]=\"state === 'error'\"\n        (input)=\"onSearchInput(searchInput.value)\"\n        (focus)=\"onInputFocus()\"\n        (blur)=\"onInputBlur($event)\"\n        (keydown)=\"onKeydown($event)\"\n        autocomplete=\"off\"\n      />\n    </div>\n\n    <div *ngIf=\"selected.length > 0\" class=\"chips\">\n      <div\n        *ngFor=\"let option of selected; trackBy: trackByOption\"\n        class=\"chip\"\n        [class.new]=\"option.new\"\n        [class.existing]=\"!option.new\"\n        [class.small]=\"size === 'small'\"\n        [class.large]=\"size === 'large'\"\n        [rivTooltip]=\"option.new && newTooltip ? newTooltip : undefined\"\n      >\n        <button\n          type=\"button\"\n          rivButton\n          [variant]=\"'ghost'\"\n          [icon]=\"'X'\"\n          [size]=\"'xsmall'\"\n          [disabled]=\"disabled\"\n          (click)=\"removeOption(option)\"\n        ></button>\n        <ng-container *ngIf=\"chipTemplate; else defaultChip\">\n          <ng-container\n            *ngTemplateOutlet=\"chipTemplate; context: { option: option }\"\n          ></ng-container>\n        </ng-container>\n        <ng-template #defaultChip>\n          <span class=\"chip-text\">{{ option.title }}</span>\n        </ng-template>\n      </div>\n    </div>\n  </div>\n\n  <ng-container *ngIf=\"isOpen\">\n    <riv-callout\n      *riv-overlay\n      [anchor]=\"trigger\"\n      [theme]=\"'light'\"\n      [showCaret]=\"false\"\n      [preferredPosition]=\"'bottom-right'\"\n      [allowedPositions]=\"['bottom-right']\"\n      (close)=\"close()\"\n    >\n      <div class=\"dropdown\">\n        <button\n          *ngIf=\"showAddNew\"\n          type=\"button\"\n          class=\"dropdown-option add-new\"\n          (mousedown)=\"$event.preventDefault()\"\n          (click)=\"onAddNew()\"\n        >\n          <riv-icon [name]=\"'Plus'\" [size]=\"16\"></riv-icon>\n          <span>{{ addNewLabel }} \"{{ searchText }}\"</span>\n        </button>\n\n        <div *ngIf=\"filteredOptions.length > 0\" class=\"options-list\">\n          <button\n            *ngFor=\"let option of filteredOptions; trackBy: trackByOption\"\n            type=\"button\"\n            class=\"dropdown-option\"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"selectOption(option)\"\n          >\n            <ng-container *ngIf=\"optionTemplate; else defaultOption\">\n              <ng-container\n                *ngTemplateOutlet=\"optionTemplate; context: { option: option }\"\n              ></ng-container>\n            </ng-container>\n            <ng-template #defaultOption>\n              <span class=\"option-title\">{{ option.title }}</span>\n              <span *ngIf=\"option.subtitle\" class=\"option-subtitle\">{{\n                option.subtitle\n              }}</span>\n            </ng-template>\n          </button>\n        </div>\n\n        <div\n          *ngIf=\"filteredOptions.length === 0 && !showAddNew\"\n          class=\"no-results\"\n        >\n          No results found\n        </div>\n      </div>\n    </riv-callout>\n  </ng-container>\n</riv-input-label>\n", styles: [":host{display:block}.search-select{display:flex;flex-direction:column;gap:var(--size-small)}.search-select.disabled{opacity:.6;pointer-events:none}.input-wrapper{position:relative}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);padding-right:calc(var(--size-xlarge) + var(--size-xsmall));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: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)}.chips{display:flex;flex-wrap:wrap;gap:var(--size-small)}.chip{display:inline-flex;align-items:center;gap:var(--size-xsmall);border-radius:var(--border-radius-medium);padding:var(--size-xsmall) var(--size-medium) var(--size-xsmall) var(--size-small);font:var(--title-02);color:var(--type-light-high-contrast);max-width:100%}.chip.existing{background-color:var(--purp-10);border:var(--border-width) solid var(--border-light)}.chip.new{border:var(--border-width) dashed var(--border-light)}.chip.small{font:var(--input-small);padding:calc(var(--size-xsmall) / 2) var(--size-small)}.chip.large{font:var(--input-large);padding:var(--size-small) var(--size-medium)}.chip-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dropdown{min-width:200px;max-width:400px;max-height:300px;overflow-y:auto;padding:var(--size-large)}.dropdown-option{display:flex;align-items:center;gap:var(--size-small);width:100%;padding:var(--size-small) var(--size-xsmall);border-radius:var(--border-radius-medium);font:var(--input-medium);text-align:left;cursor:pointer;transition:background-color var(--short-transition)}.dropdown-option:hover{background-color:var(--surface-light-2)}.dropdown-option:active{background-color:var(--surface-light-3)}.dropdown-option.add-new{color:var(--purp-80);font-weight:var(--font-weight-heavy)}.dropdown-option.add-new riv-icon{color:var(--purp-80)}.options-list{display:flex;flex-direction:column;gap:var(--size-xsmall)}.option-title{color:var(--type-light-high-contrast);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.option-subtitle{color:var(--type-light-low-contrast);margin-left:var(--size-xsmall);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.no-results{padding:var(--size-medium);text-align:center;color:var(--type-light-low-contrast);font:var(--input-medium)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { options: [{

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

@@ -127,10 +127,10 @@ export class SelectComponent extends InputLabelComponent {
     trackByOption(_, option) {
         return option.id;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SelectComponent, selector: "riv-select", inputs: { manager: "manager", size: "size", disabled: "disabled", locked: "locked", grow: "grow", allowedCalloutPositions: "allowedCalloutPositions", preferredCalloutPosition: "preferredCalloutPosition" }, queries: [{ propertyName: "triggerTemplate", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "customSelectedOptionsTemplate", first: true, predicate: ["customSelectedOptions"], descendants: true }, { propertyName: "optionTemplate", first: true, predicate: ["option"], descendants: true }, { propertyName: "optionTitleTemplate", first: true, predicate: ["optionTitle"], descendants: true }, { propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true }, { propertyName: "footerTemplate", first: true, predicate: ["footer"], descendants: true }], viewQueries: [{ propertyName: "customTriggerButton", first: true, predicate: ["customTriggerButton"], descendants: true }, { propertyName: "standardTriggerButton", first: true, predicate: ["standardTriggerButton"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"manager?.state | async; let s\">\n  <ng-template #content>\n    <riv-loading-cover [loading]=\"s.load.loading\">\n      <div\n        class=\"content-body\"\n        [class.inline]=\"s.display.inline\"\n        (keydown.escape)=\"escapeClose($event, s.display.open)\"\n        [ngStyle]=\"{\n          'max-height': s.display.maxHeight,\n          'max-width': s.display.maxWidth,\n          'min-height': s.display.minHeight,\n          'min-width': s.display.minWidth\n        }\"\n      >\n        <header *ngIf=\"headerTemplate\">\n          <ng-container\n            *ngTemplateOutlet=\"headerTemplate; context: { state: s }\"\n          ></ng-container>\n        </header>\n        <riv-search\n          *ngIf=\"s.query.showSearch\"\n          [value]=\"s.query.search\"\n          [placeholder]=\"s.query.searchPlaceholder\"\n          [autoFocus]=\"true\"\n          (valueChange)=\"searchChange($event)\"\n        ></riv-search>\n        <div *ngIf=\"s.query.showOrder\">\n          <span class=\"order-by\">Sort by:</span>\n          <riv-select [manager]=\"orderByManager\">\n            <ng-template #trigger let-state=\"state\">\n              <span\n                rivButton\n                [variant]=\"'ghost'\"\n                [size]=\"'small'\"\n                [icon]=\"state.display.open ? 'ChevronUp' : 'ChevronDown'\"\n                [iconPosition]=\"'last'\"\n              >\n                {{ getSelectedOrderByOption(s)?.title }}\n              </span>\n            </ng-template>\n          </riv-select>\n        </div>\n        <div class=\"options\">\n          <riv-select-node\n            *ngIf=\"\n              s.selection.allowMultiSelect &&\n              s.selection.allowSelectAll &&\n              !s.display.zeroStateMessage\n            \"\n            [mode]=\"'multi'\"\n            [node]=\"{\n              id: '__NOOP__',\n              title: s.query.search ? 'Select all matching' : 'Select all',\n              selected: s.selection.visibleSelectionState,\n              selectable: true,\n              expandable: false,\n              expanded: false\n            }\"\n            (selectChange)=\"\n              manager?.actions?.next({ type: 'visibleSelectedChange' })\n            \"\n          ></riv-select-node>\n          <div\n            *ngFor=\"let group of s.fullOptionGroups; trackBy: trackBySymbol\"\n            class=\"group\"\n            [class.divider]=\"s.display.dividers\"\n          >\n            <span *ngIf=\"group.header; let header\" class=\"header\">\n              {{ header }}\n              <riv-help\n                *ngIf=\"group.help; let help\"\n                [help]=\"help\"\n                [size]=\"12\"\n              ></riv-help>\n            </span>\n            <ng-container\n              *ngFor=\"let option of group.options; trackBy: trackByOption\"\n            >\n              <ng-container *ngIf=\"optionTemplate; else standardTemplate\">\n                <ng-container\n                  [ngTemplateOutlet]=\"optionTemplate\"\n                  [ngTemplateOutletContext]=\"{ node: option }\"\n                ></ng-container>\n              </ng-container>\n              <ng-template #standardTemplate>\n                <riv-select-node\n                  [mode]=\"s.selection.allowMultiSelect ? 'multi' : 'single'\"\n                  [node]=\"option\"\n                  [showSingleSelected]=\"s.display.showSingleSelected\"\n                  [titleTemplate]=\"optionTitleTemplate\"\n                  (selectChange)=\"\n                    selectChange(s.selection.allowMultiSelect, $event)\n                  \"\n                  (expandChange)=\"\n                    manager?.actions?.next({\n                      type: 'toggleOptionExpanded',\n                      id: $event\n                    })\n                  \"\n                ></riv-select-node>\n              </ng-template>\n            </ng-container>\n          </div>\n          <span\n            *ngIf=\"s.display.displayLimitMessage; let message\"\n            class=\"display-limit\"\n          >\n            {{ message }}\n          </span>\n          <riv-zero-state\n            *ngIf=\"s.display.zeroStateMessage; let message\"\n            [message]=\"message\"\n          ></riv-zero-state>\n        </div>\n        <footer *ngIf=\"footerTemplate\" class=\"custom-footer\">\n          <ng-container\n            *ngTemplateOutlet=\"footerTemplate; context: { state: s }\"\n          ></ng-container>\n        </footer>\n      </div>\n    </riv-loading-cover>\n  </ng-template>\n\n  <ng-container *ngIf=\"!s.display.inline; else content\">\n    <ng-container *ngIf=\"triggerTemplate; else standardTrigger\">\n      <button\n        #customTriggerButton\n        (click)=\"allowedOpen()\"\n        (keydown.escape)=\"escapeClose($event, s.display.open)\"\n        [disabled]=\"disabled || locked\"\n        [attr.aria-disabled]=\"disabled || locked ? 'true' : null\"\n        type=\"button\"\n        class=\"custom-trigger-button\"\n        [class.grow]=\"grow\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"triggerTemplate\"\n          [ngTemplateOutletContext]=\"{ state: s }\"\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.small]=\"size === 'small'\"\n          [class.large]=\"size === 'large'\"\n          [class.warning]=\"state === 'warning'\"\n          [class.error]=\"state === 'error'\"\n          (click)=\"allowedOpen()\"\n          (keydown.escape)=\"escapeClose($event, s.display.open)\"\n          [disabled]=\"disabled || locked\"\n          [attr.aria-disabled]=\"disabled || locked ? 'true' : null\"\n          type=\"button\"\n        >\n          <ng-container\n            *ngIf=\"s.selection.selected.size; else placeholderValue\"\n          >\n            <ng-container\n              *ngIf=\"\n                customSelectedOptionsTemplate;\n                else standardSelectedOptionsTemplate\n              \"\n            >\n              <span class=\"value\">\n                <ng-container\n                  [ngTemplateOutlet]=\"customSelectedOptionsTemplate\"\n                  [ngTemplateOutletContext]=\"{ selected: s.selection.selected }\"\n                ></ng-container>\n              </span>\n            </ng-container>\n            <ng-template #standardSelectedOptionsTemplate>\n              <span class=\"value\">{{\n                s.display.formattedSelectedOptions\n              }}</span>\n              <span *ngIf=\"s.display.pillCount > 1\" class=\"selected-count\">\n                {{ s.display.pillCount | rivNumber }}\n              </span>\n            </ng-template>\n          </ng-container>\n          <ng-template #placeholderValue>\n            <span class=\"value placeholder\">{{ s.display.placeholder }}</span>\n          </ng-template>\n          <span class=\"chevron\">\n            <riv-icon\n              *ngIf=\"!locked\"\n              [name]=\"s.display.open ? 'ChevronUp' : 'ChevronDown'\"\n              [size]=\"20\"\n            ></riv-icon>\n            <riv-icon *ngIf=\"locked\" [name]=\"'Lock'\" [size]=\"20\"></riv-icon>\n          </span>\n        </button>\n      </riv-input-label>\n    </ng-template>\n\n    <ng-container *ngIf=\"s.display.open\">\n      <riv-callout\n        *riv-overlay\n        [anchor]=\"getTrigger()\"\n        [theme]=\"'light'\"\n        [showCaret]=\"false\"\n        [allowedPositions]=\"allowedCalloutPositions\"\n        [preferredPosition]=\"preferredCalloutPosition\"\n        (close)=\"manager?.actions?.next({ type: 'openChange', open: false })\"\n      >\n        <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n      </riv-callout>\n    </ng-container>\n  </ng-container>\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);cursor:pointer;padding-left:var(--size-small)}.trigger:focus{outline:none;border:var(--border-width) solid var(--purp-60)}.trigger:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1);cursor:default}.selected-count{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);font-weight:var(--font-weight-normal);color:var(--type-dark-body);border-radius:calc(var(--base-grid-size) * 3);background-color:var(--brand);padding:calc(var(--base-grid-size) / 4) calc(var(--base-grid-size) * 2);align-self:center}.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}.value.placeholder{color:var(--type-light-low-contrast)}.trigger.small .value{font:var(--input-small)}.trigger.large .value{font:var(--input-large);padding:var(--size-medium) var(--size-xsmall)}.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)}.custom-trigger-button{max-width:100%}.custom-trigger-button.grow{display:flex;flex-direction:column;width:100%}.order-by{font:var(--input-medium);color:var(--type-light-low-contrast)}.content-body{padding:var(--size-large);display:flex;flex-direction:column;gap:var(--size-large)}.content-body:not(.inline){max-height:50vh;min-width:calc(var(--base-grid-size) * 75);max-width:50vw}.options{flex-grow:1;overflow-y:auto;gap:var(--size-medium)}.options,.group{display:flex;flex-direction:column}.group{gap:var(--size-xsmall)}.group.divider:not(:last-child){padding-bottom:var(--size-medium);border-bottom:var(--border-width) solid var(--border-light)}.display-limit{font:var(--body-small);color:var(--type-light-disabled);padding:var(--size-small);text-align:center}.header{font:var(--input-medium);color:var(--type-light-low-contrast);padding:var(--size-xsmall) 0;display:flex;align-items:center;gap:var(--size-small)}.custom-footer{padding-top:var(--size-large);border-top:var(--border-width) solid var(--border-light)}\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: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "current"] }, { kind: "component", type: i3.CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "component", type: i4.HelpComponent, selector: "riv-help", inputs: ["help", "size"] }, { 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: "component", type: i7.LoadingCoverComponent, selector: "riv-loading-cover", inputs: ["loading", "loadingSize", "zIndexOverride", "errorMessage"] }, { kind: "directive", type: i8.OverlayDirective, selector: "[riv-overlay]" }, { kind: "component", type: i9.SearchComponent, selector: "riv-search", inputs: ["placeholder", "name", "labelTemplate"] }, { kind: "component", type: SelectComponent, selector: "riv-select", inputs: ["manager", "size", "disabled", "locked", "grow", "allowedCalloutPositions", "preferredCalloutPosition"] }, { kind: "component", type: i10.SelectNodeComponent, selector: "riv-select-node", inputs: ["mode", "node", "showSingleSelected", "titleTemplate"], outputs: ["selectChange", "expandChange"] }, { kind: "component", type: i11.ZeroStateComponent, selector: "riv-zero-state", inputs: ["message", "title", "icon"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i12.NumberPipe, name: "rivNumber" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SelectComponent, selector: "riv-select", inputs: { manager: "manager", size: "size", disabled: "disabled", locked: "locked", grow: "grow", allowedCalloutPositions: "allowedCalloutPositions", preferredCalloutPosition: "preferredCalloutPosition" }, queries: [{ propertyName: "triggerTemplate", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "customSelectedOptionsTemplate", first: true, predicate: ["customSelectedOptions"], descendants: true }, { propertyName: "optionTemplate", first: true, predicate: ["option"], descendants: true }, { propertyName: "optionTitleTemplate", first: true, predicate: ["optionTitle"], descendants: true }, { propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true }, { propertyName: "footerTemplate", first: true, predicate: ["footer"], descendants: true }], viewQueries: [{ propertyName: "customTriggerButton", first: true, predicate: ["customTriggerButton"], descendants: true }, { propertyName: "standardTriggerButton", first: true, predicate: ["standardTriggerButton"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"manager?.state | async; let s\">\n  <ng-template #content>\n    <riv-loading-cover [loading]=\"s.load.loading\">\n      <div\n        class=\"content-body\"\n        [class.inline]=\"s.display.inline\"\n        (keydown.escape)=\"escapeClose($event, s.display.open)\"\n        [ngStyle]=\"{\n          'max-height': s.display.maxHeight,\n          'max-width': s.display.maxWidth,\n          'min-height': s.display.minHeight,\n          'min-width': s.display.minWidth\n        }\"\n      >\n        <header *ngIf=\"headerTemplate\">\n          <ng-container\n            *ngTemplateOutlet=\"headerTemplate; context: { state: s }\"\n          ></ng-container>\n        </header>\n        <riv-search\n          *ngIf=\"s.query.showSearch\"\n          [value]=\"s.query.search\"\n          [placeholder]=\"s.query.searchPlaceholder\"\n          [autoFocus]=\"true\"\n          (valueChange)=\"searchChange($event)\"\n        ></riv-search>\n        <div *ngIf=\"s.query.showOrder\">\n          <span class=\"order-by\">Sort by:</span>\n          <riv-select [manager]=\"orderByManager\">\n            <ng-template #trigger let-state=\"state\">\n              <span\n                rivButton\n                [variant]=\"'ghost'\"\n                [size]=\"'small'\"\n                [icon]=\"state.display.open ? 'ChevronUp' : 'ChevronDown'\"\n                [iconPosition]=\"'last'\"\n              >\n                {{ getSelectedOrderByOption(s)?.title }}\n              </span>\n            </ng-template>\n          </riv-select>\n        </div>\n        <div class=\"options\">\n          <riv-select-node\n            *ngIf=\"\n              s.selection.allowMultiSelect &&\n              s.selection.allowSelectAll &&\n              !s.display.zeroStateMessage\n            \"\n            [mode]=\"'multi'\"\n            [node]=\"{\n              id: '__NOOP__',\n              title: s.query.search ? 'Select all matching' : 'Select all',\n              selected: s.selection.visibleSelectionState,\n              selectable: true,\n              expandable: false,\n              expanded: false\n            }\"\n            (selectChange)=\"\n              manager?.actions?.next({ type: 'visibleSelectedChange' })\n            \"\n          ></riv-select-node>\n          <div\n            *ngFor=\"let group of s.fullOptionGroups; trackBy: trackBySymbol\"\n            class=\"group\"\n            [class.divider]=\"s.display.dividers\"\n          >\n            <span *ngIf=\"group.header; let header\" class=\"header\">\n              {{ header }}\n              <riv-help\n                *ngIf=\"group.help; let help\"\n                [help]=\"help\"\n                [size]=\"12\"\n              ></riv-help>\n            </span>\n            <ng-container\n              *ngFor=\"let option of group.options; trackBy: trackByOption\"\n            >\n              <ng-container *ngIf=\"optionTemplate; else standardTemplate\">\n                <ng-container\n                  [ngTemplateOutlet]=\"optionTemplate\"\n                  [ngTemplateOutletContext]=\"{ node: option }\"\n                ></ng-container>\n              </ng-container>\n              <ng-template #standardTemplate>\n                <riv-select-node\n                  [mode]=\"s.selection.allowMultiSelect ? 'multi' : 'single'\"\n                  [node]=\"option\"\n                  [showSingleSelected]=\"s.display.showSingleSelected\"\n                  [titleTemplate]=\"optionTitleTemplate\"\n                  (selectChange)=\"\n                    selectChange(s.selection.allowMultiSelect, $event)\n                  \"\n                  (expandChange)=\"\n                    manager?.actions?.next({\n                      type: 'toggleOptionExpanded',\n                      id: $event\n                    })\n                  \"\n                ></riv-select-node>\n              </ng-template>\n            </ng-container>\n          </div>\n          <span\n            *ngIf=\"s.display.displayLimitMessage; let message\"\n            class=\"display-limit\"\n          >\n            {{ message }}\n          </span>\n          <riv-zero-state\n            *ngIf=\"s.display.zeroStateMessage; let message\"\n            [message]=\"message\"\n          ></riv-zero-state>\n        </div>\n        <footer *ngIf=\"footerTemplate\" class=\"custom-footer\">\n          <ng-container\n            *ngTemplateOutlet=\"footerTemplate; context: { state: s }\"\n          ></ng-container>\n        </footer>\n      </div>\n    </riv-loading-cover>\n  </ng-template>\n\n  <ng-container *ngIf=\"!s.display.inline; else content\">\n    <ng-container *ngIf=\"triggerTemplate; else standardTrigger\">\n      <button\n        #customTriggerButton\n        (click)=\"allowedOpen()\"\n        (keydown.escape)=\"escapeClose($event, s.display.open)\"\n        [disabled]=\"disabled || locked\"\n        [attr.aria-disabled]=\"disabled || locked ? 'true' : null\"\n        type=\"button\"\n        class=\"custom-trigger-button\"\n        [class.grow]=\"grow\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"triggerTemplate\"\n          [ngTemplateOutletContext]=\"{ state: s }\"\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.small]=\"size === 'small'\"\n          [class.large]=\"size === 'large'\"\n          [class.warning]=\"state === 'warning'\"\n          [class.error]=\"state === 'error'\"\n          (click)=\"allowedOpen()\"\n          (keydown.escape)=\"escapeClose($event, s.display.open)\"\n          [disabled]=\"disabled || locked\"\n          [attr.aria-disabled]=\"disabled || locked ? 'true' : null\"\n          type=\"button\"\n        >\n          <ng-container\n            *ngIf=\"s.selection.selected.size; else placeholderValue\"\n          >\n            <ng-container\n              *ngIf=\"\n                customSelectedOptionsTemplate;\n                else standardSelectedOptionsTemplate\n              \"\n            >\n              <span class=\"value\">\n                <ng-container\n                  [ngTemplateOutlet]=\"customSelectedOptionsTemplate\"\n                  [ngTemplateOutletContext]=\"{ selected: s.selection.selected }\"\n                ></ng-container>\n              </span>\n            </ng-container>\n            <ng-template #standardSelectedOptionsTemplate>\n              <span class=\"value\">{{\n                s.display.formattedSelectedOptions\n              }}</span>\n              <span *ngIf=\"s.display.pillCount > 1\" class=\"selected-count\">\n                {{ s.display.pillCount | rivNumber }}\n              </span>\n            </ng-template>\n          </ng-container>\n          <ng-template #placeholderValue>\n            <span class=\"value placeholder\">{{ s.display.placeholder }}</span>\n          </ng-template>\n          <span class=\"chevron\">\n            <riv-icon\n              *ngIf=\"!locked\"\n              [name]=\"s.display.open ? 'ChevronUp' : 'ChevronDown'\"\n              [size]=\"20\"\n            ></riv-icon>\n            <riv-icon *ngIf=\"locked\" [name]=\"'Lock'\" [size]=\"20\"></riv-icon>\n          </span>\n        </button>\n      </riv-input-label>\n    </ng-template>\n\n    <ng-container *ngIf=\"s.display.open\">\n      <riv-callout\n        *riv-overlay\n        [anchor]=\"getTrigger()\"\n        [theme]=\"'light'\"\n        [showCaret]=\"false\"\n        [allowedPositions]=\"allowedCalloutPositions\"\n        [preferredPosition]=\"preferredCalloutPosition\"\n        (close)=\"manager?.actions?.next({ type: 'openChange', open: false })\"\n      >\n        <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n      </riv-callout>\n    </ng-container>\n  </ng-container>\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);cursor:pointer;padding-left:var(--size-small)}.trigger:focus{outline:none;border:var(--border-width) solid var(--purp-60)}.trigger:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1);cursor:default}.selected-count{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);font-weight:var(--font-weight-normal);color:var(--type-dark-body);border-radius:calc(var(--base-grid-size) * 3);background-color:var(--brand);padding:calc(var(--base-grid-size) / 4) calc(var(--base-grid-size) * 2);align-self:center}.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}.value.placeholder{color:var(--type-light-low-contrast)}.trigger.small .value{font:var(--input-small)}.trigger.large .value{font:var(--input-large);padding:var(--size-medium) var(--size-xsmall)}.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)}.custom-trigger-button{max-width:100%}.custom-trigger-button.grow{display:flex;flex-direction:column;width:100%}.order-by{font:var(--input-medium);color:var(--type-light-low-contrast)}.content-body{padding:var(--size-large);display:flex;flex-direction:column;gap:var(--size-large)}.content-body:not(.inline){max-height:50vh;min-width:calc(var(--base-grid-size) * 75);max-width:50vw}.options{flex-grow:1;overflow-y:auto;gap:var(--size-medium)}.options,.group{display:flex;flex-direction:column}.group{gap:var(--size-xsmall)}.group.divider:not(:last-child){padding-bottom:var(--size-medium);border-bottom:var(--border-width) solid var(--border-light)}.display-limit{font:var(--body-small);color:var(--type-light-disabled);padding:var(--size-small);text-align:center}.header{font:var(--input-medium);color:var(--type-light-low-contrast);padding:var(--size-xsmall) 0;display:flex;align-items:center;gap:var(--size-small)}.custom-footer{padding-top:var(--size-large);border-top:var(--border-width) solid var(--border-light)}\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: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "current"] }, { kind: "component", type: i3.CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "component", type: i4.HelpComponent, selector: "riv-help", inputs: ["help", "size"] }, { 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: "component", type: i7.LoadingCoverComponent, selector: "riv-loading-cover", inputs: ["loading", "loadingSize", "zIndexOverride", "errorMessage"] }, { kind: "directive", type: i8.OverlayDirective, selector: "[riv-overlay]" }, { kind: "component", type: i9.SearchComponent, selector: "riv-search", inputs: ["placeholder", "name", "labelTemplate"] }, { kind: "component", type: SelectComponent, selector: "riv-select", inputs: ["manager", "size", "disabled", "locked", "grow", "allowedCalloutPositions", "preferredCalloutPosition"] }, { kind: "component", type: i10.SelectNodeComponent, selector: "riv-select-node", inputs: ["mode", "node", "showSingleSelected", "titleTemplate"], outputs: ["selectChange", "expandChange"] }, { kind: "component", type: i11.ZeroStateComponent, selector: "riv-zero-state", inputs: ["message", "title", "icon"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i12.NumberPipe, name: "rivNumber" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-select', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"manager?.state | async; let s\">\n  <ng-template #content>\n    <riv-loading-cover [loading]=\"s.load.loading\">\n      <div\n        class=\"content-body\"\n        [class.inline]=\"s.display.inline\"\n        (keydown.escape)=\"escapeClose($event, s.display.open)\"\n        [ngStyle]=\"{\n          'max-height': s.display.maxHeight,\n          'max-width': s.display.maxWidth,\n          'min-height': s.display.minHeight,\n          'min-width': s.display.minWidth\n        }\"\n      >\n        <header *ngIf=\"headerTemplate\">\n          <ng-container\n            *ngTemplateOutlet=\"headerTemplate; context: { state: s }\"\n          ></ng-container>\n        </header>\n        <riv-search\n          *ngIf=\"s.query.showSearch\"\n          [value]=\"s.query.search\"\n          [placeholder]=\"s.query.searchPlaceholder\"\n          [autoFocus]=\"true\"\n          (valueChange)=\"searchChange($event)\"\n        ></riv-search>\n        <div *ngIf=\"s.query.showOrder\">\n          <span class=\"order-by\">Sort by:</span>\n          <riv-select [manager]=\"orderByManager\">\n            <ng-template #trigger let-state=\"state\">\n              <span\n                rivButton\n                [variant]=\"'ghost'\"\n                [size]=\"'small'\"\n                [icon]=\"state.display.open ? 'ChevronUp' : 'ChevronDown'\"\n                [iconPosition]=\"'last'\"\n              >\n                {{ getSelectedOrderByOption(s)?.title }}\n              </span>\n            </ng-template>\n          </riv-select>\n        </div>\n        <div class=\"options\">\n          <riv-select-node\n            *ngIf=\"\n              s.selection.allowMultiSelect &&\n              s.selection.allowSelectAll &&\n              !s.display.zeroStateMessage\n            \"\n            [mode]=\"'multi'\"\n            [node]=\"{\n              id: '__NOOP__',\n              title: s.query.search ? 'Select all matching' : 'Select all',\n              selected: s.selection.visibleSelectionState,\n              selectable: true,\n              expandable: false,\n              expanded: false\n            }\"\n            (selectChange)=\"\n              manager?.actions?.next({ type: 'visibleSelectedChange' })\n            \"\n          ></riv-select-node>\n          <div\n            *ngFor=\"let group of s.fullOptionGroups; trackBy: trackBySymbol\"\n            class=\"group\"\n            [class.divider]=\"s.display.dividers\"\n          >\n            <span *ngIf=\"group.header; let header\" class=\"header\">\n              {{ header }}\n              <riv-help\n                *ngIf=\"group.help; let help\"\n                [help]=\"help\"\n                [size]=\"12\"\n              ></riv-help>\n            </span>\n            <ng-container\n              *ngFor=\"let option of group.options; trackBy: trackByOption\"\n            >\n              <ng-container *ngIf=\"optionTemplate; else standardTemplate\">\n                <ng-container\n                  [ngTemplateOutlet]=\"optionTemplate\"\n                  [ngTemplateOutletContext]=\"{ node: option }\"\n                ></ng-container>\n              </ng-container>\n              <ng-template #standardTemplate>\n                <riv-select-node\n                  [mode]=\"s.selection.allowMultiSelect ? 'multi' : 'single'\"\n                  [node]=\"option\"\n                  [showSingleSelected]=\"s.display.showSingleSelected\"\n                  [titleTemplate]=\"optionTitleTemplate\"\n                  (selectChange)=\"\n                    selectChange(s.selection.allowMultiSelect, $event)\n                  \"\n                  (expandChange)=\"\n                    manager?.actions?.next({\n                      type: 'toggleOptionExpanded',\n                      id: $event\n                    })\n                  \"\n                ></riv-select-node>\n              </ng-template>\n            </ng-container>\n          </div>\n          <span\n            *ngIf=\"s.display.displayLimitMessage; let message\"\n            class=\"display-limit\"\n          >\n            {{ message }}\n          </span>\n          <riv-zero-state\n            *ngIf=\"s.display.zeroStateMessage; let message\"\n            [message]=\"message\"\n          ></riv-zero-state>\n        </div>\n        <footer *ngIf=\"footerTemplate\" class=\"custom-footer\">\n          <ng-container\n            *ngTemplateOutlet=\"footerTemplate; context: { state: s }\"\n          ></ng-container>\n        </footer>\n      </div>\n    </riv-loading-cover>\n  </ng-template>\n\n  <ng-container *ngIf=\"!s.display.inline; else content\">\n    <ng-container *ngIf=\"triggerTemplate; else standardTrigger\">\n      <button\n        #customTriggerButton\n        (click)=\"allowedOpen()\"\n        (keydown.escape)=\"escapeClose($event, s.display.open)\"\n        [disabled]=\"disabled || locked\"\n        [attr.aria-disabled]=\"disabled || locked ? 'true' : null\"\n        type=\"button\"\n        class=\"custom-trigger-button\"\n        [class.grow]=\"grow\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"triggerTemplate\"\n          [ngTemplateOutletContext]=\"{ state: s }\"\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.small]=\"size === 'small'\"\n          [class.large]=\"size === 'large'\"\n          [class.warning]=\"state === 'warning'\"\n          [class.error]=\"state === 'error'\"\n          (click)=\"allowedOpen()\"\n          (keydown.escape)=\"escapeClose($event, s.display.open)\"\n          [disabled]=\"disabled || locked\"\n          [attr.aria-disabled]=\"disabled || locked ? 'true' : null\"\n          type=\"button\"\n        >\n          <ng-container\n            *ngIf=\"s.selection.selected.size; else placeholderValue\"\n          >\n            <ng-container\n              *ngIf=\"\n                customSelectedOptionsTemplate;\n                else standardSelectedOptionsTemplate\n              \"\n            >\n              <span class=\"value\">\n                <ng-container\n                  [ngTemplateOutlet]=\"customSelectedOptionsTemplate\"\n                  [ngTemplateOutletContext]=\"{ selected: s.selection.selected }\"\n                ></ng-container>\n              </span>\n            </ng-container>\n            <ng-template #standardSelectedOptionsTemplate>\n              <span class=\"value\">{{\n                s.display.formattedSelectedOptions\n              }}</span>\n              <span *ngIf=\"s.display.pillCount > 1\" class=\"selected-count\">\n                {{ s.display.pillCount | rivNumber }}\n              </span>\n            </ng-template>\n          </ng-container>\n          <ng-template #placeholderValue>\n            <span class=\"value placeholder\">{{ s.display.placeholder }}</span>\n          </ng-template>\n          <span class=\"chevron\">\n            <riv-icon\n              *ngIf=\"!locked\"\n              [name]=\"s.display.open ? 'ChevronUp' : 'ChevronDown'\"\n              [size]=\"20\"\n            ></riv-icon>\n            <riv-icon *ngIf=\"locked\" [name]=\"'Lock'\" [size]=\"20\"></riv-icon>\n          </span>\n        </button>\n      </riv-input-label>\n    </ng-template>\n\n    <ng-container *ngIf=\"s.display.open\">\n      <riv-callout\n        *riv-overlay\n        [anchor]=\"getTrigger()\"\n        [theme]=\"'light'\"\n        [showCaret]=\"false\"\n        [allowedPositions]=\"allowedCalloutPositions\"\n        [preferredPosition]=\"preferredCalloutPosition\"\n        (close)=\"manager?.actions?.next({ type: 'openChange', open: false })\"\n      >\n        <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n      </riv-callout>\n    </ng-container>\n  </ng-container>\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);cursor:pointer;padding-left:var(--size-small)}.trigger:focus{outline:none;border:var(--border-width) solid var(--purp-60)}.trigger:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1);cursor:default}.selected-count{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);font-weight:var(--font-weight-normal);color:var(--type-dark-body);border-radius:calc(var(--base-grid-size) * 3);background-color:var(--brand);padding:calc(var(--base-grid-size) / 4) calc(var(--base-grid-size) * 2);align-self:center}.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}.value.placeholder{color:var(--type-light-low-contrast)}.trigger.small .value{font:var(--input-small)}.trigger.large .value{font:var(--input-large);padding:var(--size-medium) var(--size-xsmall)}.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)}.custom-trigger-button{max-width:100%}.custom-trigger-button.grow{display:flex;flex-direction:column;width:100%}.order-by{font:var(--input-medium);color:var(--type-light-low-contrast)}.content-body{padding:var(--size-large);display:flex;flex-direction:column;gap:var(--size-large)}.content-body:not(.inline){max-height:50vh;min-width:calc(var(--base-grid-size) * 75);max-width:50vw}.options{flex-grow:1;overflow-y:auto;gap:var(--size-medium)}.options,.group{display:flex;flex-direction:column}.group{gap:var(--size-xsmall)}.group.divider:not(:last-child){padding-bottom:var(--size-medium);border-bottom:var(--border-width) solid var(--border-light)}.display-limit{font:var(--body-small);color:var(--type-light-disabled);padding:var(--size-small);text-align:center}.header{font:var(--input-medium);color:var(--type-light-low-contrast);padding:var(--size-xsmall) 0;display:flex;align-items:center;gap:var(--size-small)}.custom-footer{padding-top:var(--size-large);border-top:var(--border-width) solid var(--border-light)}\n"] }]
         }], propDecorators: { manager: [{

package/esm2022/lib/input/select/select-node/select-node.component.mjs

@@ -35,10 +35,10 @@ export class SelectNodeComponent {
     getCount(node) {
         return node.count;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SelectNodeComponent, selector: "riv-select-node", inputs: { mode: "mode", node: "node", showSingleSelected: "showSingleSelected", titleTemplate: "titleTemplate" }, outputs: { selectChange: "selectChange", expandChange: "expandChange" }, ngImport: i0, template: "<ng-template #title let-n=\"node\">\n  <riv-highlight\n    class=\"title\"\n    [text]=\"n.title\"\n    [indices]=\"n.titleHighlightIndices ?? []\"\n  ></riv-highlight>\n  <span *ngIf=\"n.subtitle\">&nbsp;</span>\n  <riv-highlight\n    *ngIf=\"n.subtitle\"\n    class=\"subtitle\"\n    [text]=\"n.subtitle\"\n    [indices]=\"n.subtitleHighlightIndices ?? []\"\n  ></riv-highlight>\n</ng-template>\n\n<ng-container *ngIf=\"node; let n\">\n  <ng-container *ngIf=\"mode === 'multi'\">\n    <div\n      #row\n      class=\"row\"\n      [rivTooltip]=\"\n        getDisabled(n) && !getHelp(n) ? getDisabledExplanation(n) : undefined\n      \"\n    >\n      <label rivTruncate [class.disabled]=\"getDisabled(n)\">\n        <riv-checkbox\n          *ngIf=\"n.selectable\"\n          [value]=\"n.selected === true\"\n          [indeterminate]=\"n.selected === 'indeterminate'\"\n          [disabled]=\"getDisabled(n)\"\n          (valueChange)=\"selectChange.emit(getId(n))\"\n        >\n        </riv-checkbox>\n        <span\n          rivTruncate\n          class=\"name\"\n          [rivTooltip]=\"\n            getDisabled(n) && getHelp(n) ? getDisabledExplanation(n) : undefined\n          \"\n          [rivTooltipAnchor]=\"row\"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"titleTemplate ?? title; context: { node: n }\"\n          ></ng-container>\n        </span>\n        <span class=\"help\">\n          <riv-help\n            *ngIf=\"getHelp(n); let help\"\n            [help]=\"help\"\n            [size]=\"12\"\n          ></riv-help>\n        </span>\n        <span\n          class=\"spacer\"\n          [rivTooltip]=\"\n            getDisabled(n) && getHelp(n) ? getDisabledExplanation(n) : undefined\n          \"\n          [rivTooltipAnchor]=\"row\"\n        ></span>\n        <span *ngIf=\"includeCount()\" class=\"count\">\n          {{ getCount(n) | rivNumber }}\n        </span>\n      </label>\n      <button\n        type=\"button\"\n        *ngIf=\"n.children?.length\"\n        class=\"expand\"\n        [disabled]=\"!n.expandable\"\n        [attr.aria-disabled]=\"!n.expandable ? 'true' : null\"\n        (click)=\"expandChange.emit(getId(n))\"\n      >\n        <riv-icon\n          [size]=\"20\"\n          [name]=\"n.expanded ? 'ChevronUp' : 'ChevronDown'\"\n        ></riv-icon>\n      </button>\n    </div>\n    <div *ngIf=\"n.expanded\" class=\"children\">\n      <riv-select-node\n        *ngFor=\"let child of n.children\"\n        [mode]=\"mode\"\n        [node]=\"child\"\n        [showSingleSelected]=\"showSingleSelected\"\n        [titleTemplate]=\"titleTemplate\"\n        (selectChange)=\"selectChange.emit($event)\"\n        (expandChange)=\"expandChange.emit($event)\"\n      ></riv-select-node>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"mode === 'single'\">\n    <div\n      #row\n      class=\"row\"\n      [rivTooltip]=\"\n        getDisabled(n) && !getHelp(n) ? getDisabledExplanation(n) : undefined\n      \"\n    >\n      <button\n        type=\"button\"\n        class=\"single\"\n        [disabled]=\"getDisabled(n)\"\n        [attr.aria-disabled]=\"getDisabled(n) ? 'true' : null\"\n        (click)=\"selectChange.emit(getId(n))\"\n      >\n        <span\n          class=\"label\"\n          rivTruncate\n          [rivTooltip]=\"\n            getDisabled(n) && getHelp(n) ? getDisabledExplanation(n) : undefined\n          \"\n          [rivTooltipAnchor]=\"row\"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"titleTemplate ?? title; context: { node: n }\"\n          ></ng-container>\n        </span>\n        <span class=\"help\">\n          <riv-help\n            *ngIf=\"getHelp(n); let help\"\n            [help]=\"help\"\n            [size]=\"12\"\n          ></riv-help>\n        </span>\n        <span\n          class=\"spacer\"\n          [rivTooltip]=\"\n            getDisabled(n) && getHelp(n) ? getDisabledExplanation(n) : undefined\n          \"\n          [rivTooltipAnchor]=\"row\"\n        ></span>\n        <riv-icon\n          *ngIf=\"showSingleSelected && n.selected\"\n          [name]=\"'Check'\"\n          [size]=\"16\"\n        ></riv-icon>\n        <span *ngIf=\"includeCount()\" class=\"count\">\n          {{ getCount(n) | rivNumber }}\n        </span>\n      </button>\n    </div>\n  </ng-container>\n</ng-container>\n", styles: [".row{display:flex;align-items:center}.row label{flex-grow:1;border-radius:var(--border-radius-medium);padding:var(--size-small) var(--size-xsmall);font:var(--input-medium);display:flex;align-items:center;gap:var(--size-small)}.row label:hover:not(.disabled){cursor:pointer;background-color:var(--surface-light-2)}.spacer{flex-grow:1;min-width:1px;align-self:stretch}.subtitle,.count{color:var(--type-light-low-contrast)}.expand{cursor:pointer;color:var(--purp-80);display:inline-flex;transition:background-color var(--medium-transition);border-radius:var(--border-radius-small);padding:var(--size-xsmall)}.expand:hover{background-color:var(--black-20)}.expand:active{background-color:var(--black-40)}.expand:disabled{color:var(--type-light-disabled)}.expand:disabled:hover{background-color:transparent}.children{padding-left:var(--size-large)}.single{border-radius:var(--border-radius-medium);padding:var(--size-small) var(--size-xsmall);font:var(--input-medium);display:flex;align-items:baseline;gap:var(--size-small);text-align:left;width:100%}.single:hover:not(:disabled){cursor:pointer;background-color:var(--surface-light-2)}.single:active:not(:disabled){cursor:pointer;background-color:var(--surface-light-3)}.disabled .title,:disabled .title,.disabled .subtitle,:disabled .subtitle,.disabled .count,:disabled .count{color:var(--type-light-disabled)}riv-help{align-self:center;color:var(--type-light-low-contrast)}\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.CheckboxComponent, selector: "riv-checkbox", inputs: ["name", "identifier", "value", "checkedColorToken", "indeterminateColorToken", "checkboxTooltip", "indeterminate", "disabled", "required", "state", "errorMessage", "ariaLabel"], outputs: ["valueChange"] }, { kind: "component", type: i3.HelpComponent, selector: "riv-help", inputs: ["help", "size"] }, { kind: "component", type: i4.HighlightComponent, selector: "riv-highlight", inputs: ["text", "indices"] }, { kind: "component", type: i5.IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "component", type: SelectNodeComponent, selector: "riv-select-node", inputs: ["mode", "node", "showSingleSelected", "titleTemplate"], outputs: ["selectChange", "expandChange"] }, { kind: "directive", type: i6.TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipAnchor", "rivTooltipCloseDelay", "rivTooltipOpenDelay", "rivTooltipGracePeriod"] }, { kind: "component", type: i7.TruncateComponent, selector: "[rivTruncate]", inputs: ["maxTooltipWidth"] }, { kind: "pipe", type: i8.NumberPipe, name: "rivNumber" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SelectNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SelectNodeComponent, selector: "riv-select-node", inputs: { mode: "mode", node: "node", showSingleSelected: "showSingleSelected", titleTemplate: "titleTemplate" }, outputs: { selectChange: "selectChange", expandChange: "expandChange" }, ngImport: i0, template: "<ng-template #title let-n=\"node\">\n  <riv-highlight\n    class=\"title\"\n    [text]=\"n.title\"\n    [indices]=\"n.titleHighlightIndices ?? []\"\n  ></riv-highlight>\n  <span *ngIf=\"n.subtitle\">&nbsp;</span>\n  <riv-highlight\n    *ngIf=\"n.subtitle\"\n    class=\"subtitle\"\n    [text]=\"n.subtitle\"\n    [indices]=\"n.subtitleHighlightIndices ?? []\"\n  ></riv-highlight>\n</ng-template>\n\n<ng-container *ngIf=\"node; let n\">\n  <ng-container *ngIf=\"mode === 'multi'\">\n    <div\n      #row\n      class=\"row\"\n      [rivTooltip]=\"\n        getDisabled(n) && !getHelp(n) ? getDisabledExplanation(n) : undefined\n      \"\n    >\n      <label rivTruncate [class.disabled]=\"getDisabled(n)\">\n        <riv-checkbox\n          *ngIf=\"n.selectable\"\n          [value]=\"n.selected === true\"\n          [indeterminate]=\"n.selected === 'indeterminate'\"\n          [disabled]=\"getDisabled(n)\"\n          (valueChange)=\"selectChange.emit(getId(n))\"\n        >\n        </riv-checkbox>\n        <span\n          rivTruncate\n          class=\"name\"\n          [rivTooltip]=\"\n            getDisabled(n) && getHelp(n) ? getDisabledExplanation(n) : undefined\n          \"\n          [rivTooltipAnchor]=\"row\"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"titleTemplate ?? title; context: { node: n }\"\n          ></ng-container>\n        </span>\n        <span class=\"help\">\n          <riv-help\n            *ngIf=\"getHelp(n); let help\"\n            [help]=\"help\"\n            [size]=\"12\"\n          ></riv-help>\n        </span>\n        <span\n          class=\"spacer\"\n          [rivTooltip]=\"\n            getDisabled(n) && getHelp(n) ? getDisabledExplanation(n) : undefined\n          \"\n          [rivTooltipAnchor]=\"row\"\n        ></span>\n        <span *ngIf=\"includeCount()\" class=\"count\">\n          {{ getCount(n) | rivNumber }}\n        </span>\n      </label>\n      <button\n        type=\"button\"\n        *ngIf=\"n.children?.length\"\n        class=\"expand\"\n        [disabled]=\"!n.expandable\"\n        [attr.aria-disabled]=\"!n.expandable ? 'true' : null\"\n        (click)=\"expandChange.emit(getId(n))\"\n      >\n        <riv-icon\n          [size]=\"20\"\n          [name]=\"n.expanded ? 'ChevronUp' : 'ChevronDown'\"\n        ></riv-icon>\n      </button>\n    </div>\n    <div *ngIf=\"n.expanded\" class=\"children\">\n      <riv-select-node\n        *ngFor=\"let child of n.children\"\n        [mode]=\"mode\"\n        [node]=\"child\"\n        [showSingleSelected]=\"showSingleSelected\"\n        [titleTemplate]=\"titleTemplate\"\n        (selectChange)=\"selectChange.emit($event)\"\n        (expandChange)=\"expandChange.emit($event)\"\n      ></riv-select-node>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"mode === 'single'\">\n    <div\n      #row\n      class=\"row\"\n      [rivTooltip]=\"\n        getDisabled(n) && !getHelp(n) ? getDisabledExplanation(n) : undefined\n      \"\n    >\n      <button\n        type=\"button\"\n        class=\"single\"\n        [disabled]=\"getDisabled(n)\"\n        [attr.aria-disabled]=\"getDisabled(n) ? 'true' : null\"\n        (click)=\"selectChange.emit(getId(n))\"\n      >\n        <span\n          class=\"label\"\n          rivTruncate\n          [rivTooltip]=\"\n            getDisabled(n) && getHelp(n) ? getDisabledExplanation(n) : undefined\n          \"\n          [rivTooltipAnchor]=\"row\"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"titleTemplate ?? title; context: { node: n }\"\n          ></ng-container>\n        </span>\n        <span class=\"help\">\n          <riv-help\n            *ngIf=\"getHelp(n); let help\"\n            [help]=\"help\"\n            [size]=\"12\"\n          ></riv-help>\n        </span>\n        <span\n          class=\"spacer\"\n          [rivTooltip]=\"\n            getDisabled(n) && getHelp(n) ? getDisabledExplanation(n) : undefined\n          \"\n          [rivTooltipAnchor]=\"row\"\n        ></span>\n        <riv-icon\n          *ngIf=\"showSingleSelected && n.selected\"\n          [name]=\"'Check'\"\n          [size]=\"16\"\n        ></riv-icon>\n        <span *ngIf=\"includeCount()\" class=\"count\">\n          {{ getCount(n) | rivNumber }}\n        </span>\n      </button>\n    </div>\n  </ng-container>\n</ng-container>\n", styles: [".row{display:flex;align-items:center}.row label{flex-grow:1;border-radius:var(--border-radius-medium);padding:var(--size-small) var(--size-xsmall);font:var(--input-medium);display:flex;align-items:center;gap:var(--size-small)}.row label:hover:not(.disabled){cursor:pointer;background-color:var(--surface-light-2)}.spacer{flex-grow:1;min-width:1px;align-self:stretch}.subtitle,.count{color:var(--type-light-low-contrast)}.expand{cursor:pointer;color:var(--purp-80);display:inline-flex;transition:background-color var(--medium-transition);border-radius:var(--border-radius-small);padding:var(--size-xsmall)}.expand:hover{background-color:var(--black-20)}.expand:active{background-color:var(--black-40)}.expand:disabled{color:var(--type-light-disabled)}.expand:disabled:hover{background-color:transparent}.children{padding-left:var(--size-large)}.single{border-radius:var(--border-radius-medium);padding:var(--size-small) var(--size-xsmall);font:var(--input-medium);display:flex;align-items:baseline;gap:var(--size-small);text-align:left;width:100%}.single:hover:not(:disabled){cursor:pointer;background-color:var(--surface-light-2)}.single:active:not(:disabled){cursor:pointer;background-color:var(--surface-light-3)}.disabled .title,:disabled .title,.disabled .subtitle,:disabled .subtitle,.disabled .count,:disabled .count{color:var(--type-light-disabled)}riv-help{align-self:center;color:var(--type-light-low-contrast)}\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.CheckboxComponent, selector: "riv-checkbox", inputs: ["name", "identifier", "value", "checkedColorToken", "indeterminateColorToken", "checkboxTooltip", "indeterminate", "disabled", "required", "state", "errorMessage", "ariaLabel"], outputs: ["valueChange"] }, { kind: "component", type: i3.HelpComponent, selector: "riv-help", inputs: ["help", "size"] }, { kind: "component", type: i4.HighlightComponent, selector: "riv-highlight", inputs: ["text", "indices"] }, { kind: "component", type: i5.IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "component", type: SelectNodeComponent, selector: "riv-select-node", inputs: ["mode", "node", "showSingleSelected", "titleTemplate"], outputs: ["selectChange", "expandChange"] }, { kind: "directive", type: i6.TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipAnchor", "rivTooltipCloseDelay", "rivTooltipOpenDelay", "rivTooltipGracePeriod"] }, { kind: "component", type: i7.TruncateComponent, selector: "[rivTruncate]", inputs: ["maxTooltipWidth"] }, { kind: "pipe", type: i8.NumberPipe, name: "rivNumber" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectNodeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SelectNodeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-select-node', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #title let-n=\"node\">\n  <riv-highlight\n    class=\"title\"\n    [text]=\"n.title\"\n    [indices]=\"n.titleHighlightIndices ?? []\"\n  ></riv-highlight>\n  <span *ngIf=\"n.subtitle\">&nbsp;</span>\n  <riv-highlight\n    *ngIf=\"n.subtitle\"\n    class=\"subtitle\"\n    [text]=\"n.subtitle\"\n    [indices]=\"n.subtitleHighlightIndices ?? []\"\n  ></riv-highlight>\n</ng-template>\n\n<ng-container *ngIf=\"node; let n\">\n  <ng-container *ngIf=\"mode === 'multi'\">\n    <div\n      #row\n      class=\"row\"\n      [rivTooltip]=\"\n        getDisabled(n) && !getHelp(n) ? getDisabledExplanation(n) : undefined\n      \"\n    >\n      <label rivTruncate [class.disabled]=\"getDisabled(n)\">\n        <riv-checkbox\n          *ngIf=\"n.selectable\"\n          [value]=\"n.selected === true\"\n          [indeterminate]=\"n.selected === 'indeterminate'\"\n          [disabled]=\"getDisabled(n)\"\n          (valueChange)=\"selectChange.emit(getId(n))\"\n        >\n        </riv-checkbox>\n        <span\n          rivTruncate\n          class=\"name\"\n          [rivTooltip]=\"\n            getDisabled(n) && getHelp(n) ? getDisabledExplanation(n) : undefined\n          \"\n          [rivTooltipAnchor]=\"row\"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"titleTemplate ?? title; context: { node: n }\"\n          ></ng-container>\n        </span>\n        <span class=\"help\">\n          <riv-help\n            *ngIf=\"getHelp(n); let help\"\n            [help]=\"help\"\n            [size]=\"12\"\n          ></riv-help>\n        </span>\n        <span\n          class=\"spacer\"\n          [rivTooltip]=\"\n            getDisabled(n) && getHelp(n) ? getDisabledExplanation(n) : undefined\n          \"\n          [rivTooltipAnchor]=\"row\"\n        ></span>\n        <span *ngIf=\"includeCount()\" class=\"count\">\n          {{ getCount(n) | rivNumber }}\n        </span>\n      </label>\n      <button\n        type=\"button\"\n        *ngIf=\"n.children?.length\"\n        class=\"expand\"\n        [disabled]=\"!n.expandable\"\n        [attr.aria-disabled]=\"!n.expandable ? 'true' : null\"\n        (click)=\"expandChange.emit(getId(n))\"\n      >\n        <riv-icon\n          [size]=\"20\"\n          [name]=\"n.expanded ? 'ChevronUp' : 'ChevronDown'\"\n        ></riv-icon>\n      </button>\n    </div>\n    <div *ngIf=\"n.expanded\" class=\"children\">\n      <riv-select-node\n        *ngFor=\"let child of n.children\"\n        [mode]=\"mode\"\n        [node]=\"child\"\n        [showSingleSelected]=\"showSingleSelected\"\n        [titleTemplate]=\"titleTemplate\"\n        (selectChange)=\"selectChange.emit($event)\"\n        (expandChange)=\"expandChange.emit($event)\"\n      ></riv-select-node>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"mode === 'single'\">\n    <div\n      #row\n      class=\"row\"\n      [rivTooltip]=\"\n        getDisabled(n) && !getHelp(n) ? getDisabledExplanation(n) : undefined\n      \"\n    >\n      <button\n        type=\"button\"\n        class=\"single\"\n        [disabled]=\"getDisabled(n)\"\n        [attr.aria-disabled]=\"getDisabled(n) ? 'true' : null\"\n        (click)=\"selectChange.emit(getId(n))\"\n      >\n        <span\n          class=\"label\"\n          rivTruncate\n          [rivTooltip]=\"\n            getDisabled(n) && getHelp(n) ? getDisabledExplanation(n) : undefined\n          \"\n          [rivTooltipAnchor]=\"row\"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"titleTemplate ?? title; context: { node: n }\"\n          ></ng-container>\n        </span>\n        <span class=\"help\">\n          <riv-help\n            *ngIf=\"getHelp(n); let help\"\n            [help]=\"help\"\n            [size]=\"12\"\n          ></riv-help>\n        </span>\n        <span\n          class=\"spacer\"\n          [rivTooltip]=\"\n            getDisabled(n) && getHelp(n) ? getDisabledExplanation(n) : undefined\n          \"\n          [rivTooltipAnchor]=\"row\"\n        ></span>\n        <riv-icon\n          *ngIf=\"showSingleSelected && n.selected\"\n          [name]=\"'Check'\"\n          [size]=\"16\"\n        ></riv-icon>\n        <span *ngIf=\"includeCount()\" class=\"count\">\n          {{ getCount(n) | rivNumber }}\n        </span>\n      </button>\n    </div>\n  </ng-container>\n</ng-container>\n", styles: [".row{display:flex;align-items:center}.row label{flex-grow:1;border-radius:var(--border-radius-medium);padding:var(--size-small) var(--size-xsmall);font:var(--input-medium);display:flex;align-items:center;gap:var(--size-small)}.row label:hover:not(.disabled){cursor:pointer;background-color:var(--surface-light-2)}.spacer{flex-grow:1;min-width:1px;align-self:stretch}.subtitle,.count{color:var(--type-light-low-contrast)}.expand{cursor:pointer;color:var(--purp-80);display:inline-flex;transition:background-color var(--medium-transition);border-radius:var(--border-radius-small);padding:var(--size-xsmall)}.expand:hover{background-color:var(--black-20)}.expand:active{background-color:var(--black-40)}.expand:disabled{color:var(--type-light-disabled)}.expand:disabled:hover{background-color:transparent}.children{padding-left:var(--size-large)}.single{border-radius:var(--border-radius-medium);padding:var(--size-small) var(--size-xsmall);font:var(--input-medium);display:flex;align-items:baseline;gap:var(--size-small);text-align:left;width:100%}.single:hover:not(:disabled){cursor:pointer;background-color:var(--surface-light-2)}.single:active:not(:disabled){cursor:pointer;background-color:var(--surface-light-3)}.disabled .title,:disabled .title,.disabled .subtitle,:disabled .subtitle,.disabled .count,:disabled .count{color:var(--type-light-disabled)}riv-help{align-self:center;color:var(--type-light-low-contrast)}\n"] }]
         }], propDecorators: { mode: [{

package/esm2022/lib/input/simple-select/option-group.pipe.mjs

@@ -9,10 +9,10 @@ export class OptionGroupPipe {
             },
         ];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OptionGroupPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: OptionGroupPipe, name: "rivOptionGroup" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: OptionGroupPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: OptionGroupPipe, name: "rivOptionGroup" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OptionGroupPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: OptionGroupPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'rivOptionGroup' }]
         }] });

package/esm2022/lib/input/simple-select/simple-select.component.mjs

@@ -114,10 +114,10 @@ export class SimpleSelectComponent extends InputLabelComponent {
     issueAction(action) {
         this.manager?.actions.next(action);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SimpleSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SimpleSelectComponent, selector: "riv-simple-select", inputs: { optionGroups: "optionGroups", selectedOption: "selectedOption", size: "size", disabled: "disabled", locked: "locked", filterabilityOptions: "filterabilityOptions", orderBy: "orderBy", placeholder: "placeholder", maxHeight: "maxHeight", maxWidth: "maxWidth", minHeight: "minHeight", minWidth: "minWidth", dividers: "dividers", sortSelectedToTop: "sortSelectedToTop", grow: "grow", preferredCalloutPosition: "preferredCalloutPosition", allowedCalloutPositions: "allowedCalloutPositions" }, outputs: { selectedOptionChange: "selectedOptionChange" }, host: { properties: { "class": "this.classes" } }, queries: [{ propertyName: "triggerTemplate", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "customSelectedOptionsTemplate", first: true, predicate: ["customSelectedOptions"], descendants: true }, { propertyName: "optionTemplate", first: true, predicate: ["option"], descendants: true }, { propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true }, { propertyName: "footerTemplate", first: true, predicate: ["footer"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<riv-select\n  [manager]=\"manager\"\n  [size]=\"size\"\n  [disabled]=\"disabled\"\n  [locked]=\"locked\"\n  [grow]=\"grow\"\n  [preferredCalloutPosition]=\"preferredCalloutPosition\"\n  [allowedCalloutPositions]=\"allowedCalloutPositions\"\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  <ng-container *ngIf=\"triggerTemplate; let triggerTpl\">\n    <ng-template #trigger let-state=\"state\">\n      <ng-container\n        [ngTemplateOutlet]=\"triggerTpl\"\n        [ngTemplateOutletContext]=\"{ state }\"\n      ></ng-container>\n    </ng-template>\n  </ng-container>\n\n  <ng-container\n    *ngIf=\"customSelectedOptionsTemplate; let customSelectedOptionsTpl\"\n  >\n    <ng-template #customSelectedOptions let-selected=\"selected\">\n      <ng-container\n        [ngTemplateOutlet]=\"customSelectedOptionsTpl\"\n        [ngTemplateOutletContext]=\"{ selected }\"\n      ></ng-container>\n    </ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"optionTemplate; let optionTpl\">\n    <ng-template #option let-node=\"node\">\n      <button\n        class=\"custom-node\"\n        [disabled]=\"node.disabled\"\n        [attr.aria-disabled]=\"node.disabled ? 'true' : null\"\n        (click)=\"\n          manager?.actions?.next({\n            type: 'setSelectedOption',\n            id: node.id\n          });\n          manager?.actions?.next({\n            type: 'openChange',\n            open: false\n          })\n        \"\n        type=\"button\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"optionTpl\"\n          [ngTemplateOutletContext]=\"{ node }\"\n        ></ng-container>\n      </button>\n    </ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"headerTemplate; let headerTpl\">\n    <ng-template #header let-state=\"state\">\n      <ng-container\n        [ngTemplateOutlet]=\"headerTpl\"\n        [ngTemplateOutletContext]=\"{ state }\"\n      ></ng-container>\n    </ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"footerTemplate; let footerTpl\">\n    <ng-template #footer let-state=\"state\">\n      <ng-container\n        [ngTemplateOutlet]=\"footerTpl\"\n        [ngTemplateOutletContext]=\"{ state }\"\n      ></ng-container>\n    </ng-template>\n  </ng-container>\n</riv-select>\n", styles: [":host(.grow),:host(.grow) riv-select{display:block;width:100%}.custom-node{display:block;width:100%;text-align:left}.custom-node:not(:disabled){cursor:pointer}\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.SelectComponent, selector: "riv-select", inputs: ["manager", "size", "disabled", "locked", "grow", "allowedCalloutPositions", "preferredCalloutPosition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SimpleSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SimpleSelectComponent, selector: "riv-simple-select", inputs: { optionGroups: "optionGroups", selectedOption: "selectedOption", size: "size", disabled: "disabled", locked: "locked", filterabilityOptions: "filterabilityOptions", orderBy: "orderBy", placeholder: "placeholder", maxHeight: "maxHeight", maxWidth: "maxWidth", minHeight: "minHeight", minWidth: "minWidth", dividers: "dividers", sortSelectedToTop: "sortSelectedToTop", grow: "grow", preferredCalloutPosition: "preferredCalloutPosition", allowedCalloutPositions: "allowedCalloutPositions" }, outputs: { selectedOptionChange: "selectedOptionChange" }, host: { properties: { "class": "this.classes" } }, queries: [{ propertyName: "triggerTemplate", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "customSelectedOptionsTemplate", first: true, predicate: ["customSelectedOptions"], descendants: true }, { propertyName: "optionTemplate", first: true, predicate: ["option"], descendants: true }, { propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true }, { propertyName: "footerTemplate", first: true, predicate: ["footer"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<riv-select\n  [manager]=\"manager\"\n  [size]=\"size\"\n  [disabled]=\"disabled\"\n  [locked]=\"locked\"\n  [grow]=\"grow\"\n  [preferredCalloutPosition]=\"preferredCalloutPosition\"\n  [allowedCalloutPositions]=\"allowedCalloutPositions\"\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  <ng-container *ngIf=\"triggerTemplate; let triggerTpl\">\n    <ng-template #trigger let-state=\"state\">\n      <ng-container\n        [ngTemplateOutlet]=\"triggerTpl\"\n        [ngTemplateOutletContext]=\"{ state }\"\n      ></ng-container>\n    </ng-template>\n  </ng-container>\n\n  <ng-container\n    *ngIf=\"customSelectedOptionsTemplate; let customSelectedOptionsTpl\"\n  >\n    <ng-template #customSelectedOptions let-selected=\"selected\">\n      <ng-container\n        [ngTemplateOutlet]=\"customSelectedOptionsTpl\"\n        [ngTemplateOutletContext]=\"{ selected }\"\n      ></ng-container>\n    </ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"optionTemplate; let optionTpl\">\n    <ng-template #option let-node=\"node\">\n      <button\n        class=\"custom-node\"\n        [disabled]=\"node.disabled\"\n        [attr.aria-disabled]=\"node.disabled ? 'true' : null\"\n        (click)=\"\n          manager?.actions?.next({\n            type: 'setSelectedOption',\n            id: node.id\n          });\n          manager?.actions?.next({\n            type: 'openChange',\n            open: false\n          })\n        \"\n        type=\"button\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"optionTpl\"\n          [ngTemplateOutletContext]=\"{ node }\"\n        ></ng-container>\n      </button>\n    </ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"headerTemplate; let headerTpl\">\n    <ng-template #header let-state=\"state\">\n      <ng-container\n        [ngTemplateOutlet]=\"headerTpl\"\n        [ngTemplateOutletContext]=\"{ state }\"\n      ></ng-container>\n    </ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"footerTemplate; let footerTpl\">\n    <ng-template #footer let-state=\"state\">\n      <ng-container\n        [ngTemplateOutlet]=\"footerTpl\"\n        [ngTemplateOutletContext]=\"{ state }\"\n      ></ng-container>\n    </ng-template>\n  </ng-container>\n</riv-select>\n", styles: [":host(.grow),:host(.grow) riv-select{display:block;width:100%}.custom-node{display:block;width:100%;text-align:left}.custom-node:not(:disabled){cursor:pointer}\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.SelectComponent, selector: "riv-select", inputs: ["manager", "size", "disabled", "locked", "grow", "allowedCalloutPositions", "preferredCalloutPosition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SimpleSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SimpleSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-simple-select', changeDetection: ChangeDetectionStrategy.OnPush, template: "<riv-select\n  [manager]=\"manager\"\n  [size]=\"size\"\n  [disabled]=\"disabled\"\n  [locked]=\"locked\"\n  [grow]=\"grow\"\n  [preferredCalloutPosition]=\"preferredCalloutPosition\"\n  [allowedCalloutPositions]=\"allowedCalloutPositions\"\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  <ng-container *ngIf=\"triggerTemplate; let triggerTpl\">\n    <ng-template #trigger let-state=\"state\">\n      <ng-container\n        [ngTemplateOutlet]=\"triggerTpl\"\n        [ngTemplateOutletContext]=\"{ state }\"\n      ></ng-container>\n    </ng-template>\n  </ng-container>\n\n  <ng-container\n    *ngIf=\"customSelectedOptionsTemplate; let customSelectedOptionsTpl\"\n  >\n    <ng-template #customSelectedOptions let-selected=\"selected\">\n      <ng-container\n        [ngTemplateOutlet]=\"customSelectedOptionsTpl\"\n        [ngTemplateOutletContext]=\"{ selected }\"\n      ></ng-container>\n    </ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"optionTemplate; let optionTpl\">\n    <ng-template #option let-node=\"node\">\n      <button\n        class=\"custom-node\"\n        [disabled]=\"node.disabled\"\n        [attr.aria-disabled]=\"node.disabled ? 'true' : null\"\n        (click)=\"\n          manager?.actions?.next({\n            type: 'setSelectedOption',\n            id: node.id\n          });\n          manager?.actions?.next({\n            type: 'openChange',\n            open: false\n          })\n        \"\n        type=\"button\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"optionTpl\"\n          [ngTemplateOutletContext]=\"{ node }\"\n        ></ng-container>\n      </button>\n    </ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"headerTemplate; let headerTpl\">\n    <ng-template #header let-state=\"state\">\n      <ng-container\n        [ngTemplateOutlet]=\"headerTpl\"\n        [ngTemplateOutletContext]=\"{ state }\"\n      ></ng-container>\n    </ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"footerTemplate; let footerTpl\">\n    <ng-template #footer let-state=\"state\">\n      <ng-container\n        [ngTemplateOutlet]=\"footerTpl\"\n        [ngTemplateOutletContext]=\"{ state }\"\n      ></ng-container>\n    </ng-template>\n  </ng-container>\n</riv-select>\n", styles: [":host(.grow),:host(.grow) riv-select{display:block;width:100%}.custom-node{display:block;width:100%;text-align:left}.custom-node:not(:disabled){cursor:pointer}\n"] }]
         }], propDecorators: { optionGroups: [{

package/esm2022/lib/input/switch-checkbox/switch-checkbox.component.mjs

@@ -18,10 +18,10 @@ export class SwitchCheckboxComponent extends CheckboxComponent {
             this.animated = true;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SwitchCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SwitchCheckboxComponent, selector: "riv-switch-checkbox", inputs: { size: "size" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<label\n  #label\n  [ngClass]=\"size\"\n  [class.checked]=\"value\"\n  [class.animated]=\"animated\"\n  [class.disabled]=\"disabled\"\n>\n  <input\n    #input\n    type=\"checkbox\"\n    [name]=\"name\"\n    [id]=\"identifier\"\n    [checked]=\"value\"\n    [disabled]=\"disabled\"\n    [attr.aria-disabled]=\"disabled ? 'true' : null\"\n    [required]=\"required\"\n    [attr.aria-label]=\"isCheckboxOnly() ? ariaLabel : null\"\n    (change)=\"valueChange.emit(!!input.checked)\"\n  />\n  <ng-content></ng-content>\n</label>\n", styles: [":host{display:inline-flex}label{position:relative;flex-grow:1;display:inline-flex;gap:var(--size-small);align-items:center;--transition-params: .15s cubic-bezier(.52, .19, .98, .43)}label.medium{--slide-width: calc(var(--base-grid-size) * 12);--switch-size: calc(var(--base-grid-size) * 6)}label.small{--slide-width: calc(var(--base-grid-size) * 8);--switch-size: calc(var(--base-grid-size) * 4)}label:not(.disabled){cursor:pointer}label:before{content:\"\";display:inline-block;box-sizing:border-box;width:var(--slide-width);height:var(--switch-size);background-color:var(--white-100);border:var(--border-width) solid var(--border-light);border-radius:var(--switch-size)}label.animated:before{transition:background-color var(--transition-params)}label.disabled:before{background-color:var(--black-20)}label.checked:before{background-color:var(--purp-60)}label.disabled.checked:before{background-color:var(--black-60)}label:after{content:\"\";position:absolute;width:var(--switch-size);height:var(--switch-size);background-color:var(--white-100);border:var(--border-width) solid var(--border-light);border-radius:100%;box-shadow:var(--depth-1)}label.animated:after{transition:transform var(--transition-params)}label.checked:after{transform:translate(calc(var(--slide-width) - var(--switch-size)))}input{position:absolute;opacity:0;z-index:-1}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SwitchCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SwitchCheckboxComponent, selector: "riv-switch-checkbox", inputs: { size: "size" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<label\n  #label\n  [ngClass]=\"size\"\n  [class.checked]=\"value\"\n  [class.animated]=\"animated\"\n  [class.disabled]=\"disabled\"\n>\n  <input\n    #input\n    type=\"checkbox\"\n    [name]=\"name\"\n    [id]=\"identifier\"\n    [checked]=\"value\"\n    [disabled]=\"disabled\"\n    [attr.aria-disabled]=\"disabled ? 'true' : null\"\n    [required]=\"required\"\n    [attr.aria-label]=\"isCheckboxOnly() ? ariaLabel : null\"\n    (change)=\"valueChange.emit(!!input.checked)\"\n  />\n  <ng-content></ng-content>\n</label>\n", styles: [":host{display:inline-flex}label{position:relative;flex-grow:1;display:inline-flex;gap:var(--size-small);align-items:center;--transition-params: .15s cubic-bezier(.52, .19, .98, .43)}label.medium{--slide-width: calc(var(--base-grid-size) * 12);--switch-size: calc(var(--base-grid-size) * 6)}label.small{--slide-width: calc(var(--base-grid-size) * 8);--switch-size: calc(var(--base-grid-size) * 4)}label:not(.disabled){cursor:pointer}label:before{content:\"\";display:inline-block;box-sizing:border-box;width:var(--slide-width);height:var(--switch-size);background-color:var(--white-100);border:var(--border-width) solid var(--border-light);border-radius:var(--switch-size)}label.animated:before{transition:background-color var(--transition-params)}label.disabled:before{background-color:var(--black-20)}label.checked:before{background-color:var(--purp-60)}label.disabled.checked:before{background-color:var(--black-60)}label:after{content:\"\";position:absolute;width:var(--switch-size);height:var(--switch-size);background-color:var(--white-100);border:var(--border-width) solid var(--border-light);border-radius:100%;box-shadow:var(--depth-1)}label.animated:after{transition:transform var(--transition-params)}label.checked:after{transform:translate(calc(var(--slide-width) - var(--switch-size)))}input{position:absolute;opacity:0;z-index:-1}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SwitchCheckboxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SwitchCheckboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-switch-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, template: "<label\n  #label\n  [ngClass]=\"size\"\n  [class.checked]=\"value\"\n  [class.animated]=\"animated\"\n  [class.disabled]=\"disabled\"\n>\n  <input\n    #input\n    type=\"checkbox\"\n    [name]=\"name\"\n    [id]=\"identifier\"\n    [checked]=\"value\"\n    [disabled]=\"disabled\"\n    [attr.aria-disabled]=\"disabled ? 'true' : null\"\n    [required]=\"required\"\n    [attr.aria-label]=\"isCheckboxOnly() ? ariaLabel : null\"\n    (change)=\"valueChange.emit(!!input.checked)\"\n  />\n  <ng-content></ng-content>\n</label>\n", styles: [":host{display:inline-flex}label{position:relative;flex-grow:1;display:inline-flex;gap:var(--size-small);align-items:center;--transition-params: .15s cubic-bezier(.52, .19, .98, .43)}label.medium{--slide-width: calc(var(--base-grid-size) * 12);--switch-size: calc(var(--base-grid-size) * 6)}label.small{--slide-width: calc(var(--base-grid-size) * 8);--switch-size: calc(var(--base-grid-size) * 4)}label:not(.disabled){cursor:pointer}label:before{content:\"\";display:inline-block;box-sizing:border-box;width:var(--slide-width);height:var(--switch-size);background-color:var(--white-100);border:var(--border-width) solid var(--border-light);border-radius:var(--switch-size)}label.animated:before{transition:background-color var(--transition-params)}label.disabled:before{background-color:var(--black-20)}label.checked:before{background-color:var(--purp-60)}label.disabled.checked:before{background-color:var(--black-60)}label:after{content:\"\";position:absolute;width:var(--switch-size);height:var(--switch-size);background-color:var(--white-100);border:var(--border-width) solid var(--border-light);border-radius:100%;box-shadow:var(--depth-1)}label.animated:after{transition:transform var(--transition-params)}label.checked:after{transform:translate(calc(var(--slide-width) - var(--switch-size)))}input{position:absolute;opacity:0;z-index:-1}\n"] }]
         }], propDecorators: { size: [{

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

@@ -50,10 +50,10 @@ export class TextFieldComponent extends InputLabelComponent {
         this._text = TextFieldComponent.format(this._text, this.casing);
         this.blur.emit(TextFieldComponent.clean(this._text, this.casing));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TextFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TextFieldComponent, selector: "riv-text-field", inputs: { disabled: "disabled", readonly: "readonly", placeholder: "placeholder", casing: "casing", type: "type", size: "size", autoFocus: "autoFocus", name: "name", minLength: "minLength", maxLength: "maxLength", 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  [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: TextFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TextFieldComponent, selector: "riv-text-field", inputs: { disabled: "disabled", readonly: "readonly", placeholder: "placeholder", casing: "casing", type: "type", size: "size", autoFocus: "autoFocus", name: "name", minLength: "minLength", maxLength: "maxLength", 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  [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: TextFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TextFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-text-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: { disabled: [{

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

@@ -9,10 +9,10 @@ export class TextareaFieldComponent extends TextFieldComponent {
         this.rows = 4;
         this.type = 'text';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TextareaFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TextareaFieldComponent, selector: "riv-textarea-field", inputs: { rows: "rows" }, 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  <textarea\n    #input\n    [name]=\"name\"\n    [placeholder]=\"placeholder\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    [attr.aria-disabled]=\"disabled ? 'true' : null\"\n    [readonly]=\"readonly\"\n    [rows]=\"rows\"\n    [value]=\"text\"\n    [attr.aria-label]=\"label || null\"\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    (blur)=\"inputBlur()\"\n  ></textarea>\n</riv-input-label>\n", styles: ["textarea{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-large);resize:vertical}textarea::placeholder{color:var(--type-light-low-contrast)}textarea:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}textarea:read-only{background-color:var(--surface-light-1)}textarea:focus{outline:none;border:var(--border-width) solid var(--purp-60)}textarea.warning{border-color:var(--surface-dark-caution)}textarea.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}textarea.large{font:var(--input-large);padding:var(--size-medium)}\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: TextareaFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TextareaFieldComponent, selector: "riv-textarea-field", inputs: { rows: "rows" }, 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  <textarea\n    #input\n    [name]=\"name\"\n    [placeholder]=\"placeholder\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    [attr.aria-disabled]=\"disabled ? 'true' : null\"\n    [readonly]=\"readonly\"\n    [rows]=\"rows\"\n    [value]=\"text\"\n    [attr.aria-label]=\"label || null\"\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    (blur)=\"inputBlur()\"\n  ></textarea>\n</riv-input-label>\n", styles: ["textarea{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-large);resize:vertical}textarea::placeholder{color:var(--type-light-low-contrast)}textarea:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}textarea:read-only{background-color:var(--surface-light-1)}textarea:focus{outline:none;border:var(--border-width) solid var(--purp-60)}textarea.warning{border-color:var(--surface-dark-caution)}textarea.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}textarea.large{font:var(--input-large);padding:var(--size-medium)}\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: TextareaFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TextareaFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-textarea-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  <textarea\n    #input\n    [name]=\"name\"\n    [placeholder]=\"placeholder\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    [attr.aria-disabled]=\"disabled ? 'true' : null\"\n    [readonly]=\"readonly\"\n    [rows]=\"rows\"\n    [value]=\"text\"\n    [attr.aria-label]=\"label || null\"\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    (blur)=\"inputBlur()\"\n  ></textarea>\n</riv-input-label>\n", styles: ["textarea{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-large);resize:vertical}textarea::placeholder{color:var(--type-light-low-contrast)}textarea:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}textarea:read-only{background-color:var(--surface-light-1)}textarea:focus{outline:none;border:var(--border-width) solid var(--purp-60)}textarea.warning{border-color:var(--surface-dark-caution)}textarea.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}textarea.large{font:var(--input-large);padding:var(--size-medium)}\n"] }]
         }], propDecorators: { rows: [{

package/esm2022/lib/input/validation-message/validation-message.component.mjs

@@ -5,10 +5,10 @@ export class ValidationMessageComponent {
     constructor() {
         this.message = '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ValidationMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ValidationMessageComponent, selector: "riv-validation-message", inputs: { message: "message" }, ngImport: i0, template: "<span class=\"validation-message\">\n  <riv-icon [name]=\"'AlertCircle'\" [size]=\"16\"></riv-icon>\n  {{ message }}\n</span>\n", styles: [".validation-message{font:var(--input-small);color:var(--fyre-50);display:flex;align-items:center;gap:var(--size-xsmall);margin-top:var(--size-xsmall)}\n"], dependencies: [{ kind: "component", type: i1.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: ValidationMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ValidationMessageComponent, selector: "riv-validation-message", inputs: { message: "message" }, ngImport: i0, template: "<span class=\"validation-message\">\n  <riv-icon [name]=\"'AlertCircle'\" [size]=\"16\"></riv-icon>\n  {{ message }}\n</span>\n", styles: [".validation-message{font:var(--input-small);color:var(--fyre-50);display:flex;align-items:center;gap:var(--size-xsmall);margin-top:var(--size-xsmall)}\n"], dependencies: [{ kind: "component", type: i1.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: ValidationMessageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ValidationMessageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-validation-message', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"validation-message\">\n  <riv-icon [name]=\"'AlertCircle'\" [size]=\"16\"></riv-icon>\n  {{ message }}\n</span>\n", styles: [".validation-message{font:var(--input-small);color:var(--fyre-50);display:flex;align-items:center;gap:var(--size-xsmall);margin-top:var(--size-xsmall)}\n"] }]
         }], propDecorators: { message: [{

package/esm2022/lib/layout/card/card-actions.component.mjs

@@ -38,10 +38,10 @@ export class CardActionsComponent {
             .map(([k]) => k)
             .join(' ');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CardActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CardActionsComponent, selector: "riv-card-actions", inputs: { align: "align", variant: "variant", padding: "padding", orientation: "orientation", divider: "divider" }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{position:relative;z-index:var(--card-raised-z-index);display:flex;align-items:center;gap:var(--size-small);min-width:0}:host.horizontal{flex-direction:row}:host.vertical{flex-direction:column;align-items:stretch}:host.align-start{justify-content:flex-start}:host.align-center{justify-content:center}:host.align-end{justify-content:flex-end}:host.align-between{justify-content:space-between}:host.align-stretch{display:grid}:host.align-stretch.horizontal{grid-auto-flow:column;grid-auto-columns:1fr}:host.align-stretch.vertical{grid-auto-flow:row;grid-auto-rows:1fr}:host.filled{background-color:var(--surface-light-1)}:host.filled,:host.divider{border-top:var(--border-width) solid var(--border-light)}:host.padding-small{padding:var(--size-small)}:host.padding-medium{padding:var(--size-medium)}:host.padding-large{padding:var(--size-large)}:host.padding-xlarge{padding:var(--size-xlarge)}:host.padding-xxlarge{padding:var(--size-xxlarge)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CardActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: CardActionsComponent, selector: "riv-card-actions", inputs: { align: "align", variant: "variant", padding: "padding", orientation: "orientation", divider: "divider" }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{position:relative;z-index:var(--card-raised-z-index);display:flex;align-items:center;gap:var(--size-small);min-width:0}:host.horizontal{flex-direction:row}:host.vertical{flex-direction:column;align-items:stretch}:host.align-start{justify-content:flex-start}:host.align-center{justify-content:center}:host.align-end{justify-content:flex-end}:host.align-between{justify-content:space-between}:host.align-stretch{display:grid}:host.align-stretch.horizontal{grid-auto-flow:column;grid-auto-columns:1fr}:host.align-stretch.vertical{grid-auto-flow:row;grid-auto-rows:1fr}:host.filled{background-color:var(--surface-light-1)}:host.filled,:host.divider{border-top:var(--border-width) solid var(--border-light)}:host.padding-small{padding:var(--size-small)}:host.padding-medium{padding:var(--size-medium)}:host.padding-large{padding:var(--size-large)}:host.padding-xlarge{padding:var(--size-xlarge)}:host.padding-xxlarge{padding:var(--size-xxlarge)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CardActionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CardActionsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-card-actions', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n", styles: [":host{position:relative;z-index:var(--card-raised-z-index);display:flex;align-items:center;gap:var(--size-small);min-width:0}:host.horizontal{flex-direction:row}:host.vertical{flex-direction:column;align-items:stretch}:host.align-start{justify-content:flex-start}:host.align-center{justify-content:center}:host.align-end{justify-content:flex-end}:host.align-between{justify-content:space-between}:host.align-stretch{display:grid}:host.align-stretch.horizontal{grid-auto-flow:column;grid-auto-columns:1fr}:host.align-stretch.vertical{grid-auto-flow:row;grid-auto-rows:1fr}:host.filled{background-color:var(--surface-light-1)}:host.filled,:host.divider{border-top:var(--border-width) solid var(--border-light)}:host.padding-small{padding:var(--size-small)}:host.padding-medium{padding:var(--size-medium)}:host.padding-large{padding:var(--size-large)}:host.padding-xlarge{padding:var(--size-xlarge)}:host.padding-xxlarge{padding:var(--size-xxlarge)}\n"] }]
         }], propDecorators: { align: [{

package/esm2022/lib/layout/card/card-content.component.mjs

@@ -43,10 +43,10 @@ export class CardContentComponent {
             .map(([k]) => k)
             .join(' ');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CardContentComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.CardComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CardContentComponent, selector: "riv-card-content", inputs: { padding: "padding", grow: "grow", divider: "divider" }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:block;min-width:0;font:var(--body-medium)}:host.grow{flex-grow:1}:host.divider{border-bottom:var(--border-width) solid var(--border-light)}:host.padding-small{padding:var(--size-small)}:host.padding-medium{padding:var(--size-medium)}:host.padding-large{padding:var(--size-large)}:host.padding-xlarge{padding:var(--size-xlarge)}:host.padding-xxlarge{padding:var(--size-xxlarge)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CardContentComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.CardComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: CardContentComponent, selector: "riv-card-content", inputs: { padding: "padding", grow: "grow", divider: "divider" }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:block;min-width:0;font:var(--body-medium)}:host.grow{flex-grow:1}:host.divider{border-bottom:var(--border-width) solid var(--border-light)}:host.padding-small{padding:var(--size-small)}:host.padding-medium{padding:var(--size-medium)}:host.padding-large{padding:var(--size-large)}:host.padding-xlarge{padding:var(--size-xlarge)}:host.padding-xxlarge{padding:var(--size-xxlarge)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CardContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CardContentComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-card-content', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n", styles: [":host{display:block;min-width:0;font:var(--body-medium)}:host.grow{flex-grow:1}:host.divider{border-bottom:var(--border-width) solid var(--border-light)}:host.padding-small{padding:var(--size-small)}:host.padding-medium{padding:var(--size-medium)}:host.padding-large{padding:var(--size-large)}:host.padding-xlarge{padding:var(--size-xlarge)}:host.padding-xxlarge{padding:var(--size-xxlarge)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.CardComponent, decorators: [{

package/esm2022/lib/layout/card/card-header.component.mjs

@@ -154,10 +154,10 @@ export class CardHeaderComponent {
                 overflow: 'hidden',
             };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CardHeaderComponent, deps: [{ token: i1.CardComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CardHeaderComponent, selector: "riv-card-header", inputs: { heading: "heading", subheading: "subheading", headingLevel: "headingLevel", variant: "variant", padding: "padding", divider: "divider", align: "align", clamp: "clamp", expandable: "expandable", expanded: "expanded", togglePosition: "togglePosition", disabled: "disabled" }, outputs: { expandedChange: "expandedChange" }, host: { properties: { "class": "this.classes" } }, usesOnChanges: true, ngImport: i0, template: "<button\n  *ngIf=\"expandable\"\n  type=\"button\"\n  class=\"expand-toggle\"\n  [disabled]=\"disabled\"\n  [attr.aria-disabled]=\"disabled ? 'true' : null\"\n  [attr.aria-expanded]=\"expanded\"\n  [attr.aria-controls]=\"regionId\"\n  [attr.aria-labelledby]=\"titleId\"\n  (click)=\"toggle()\"\n></button>\n<ng-container\n  *ngIf=\"expandable && togglePosition === 'leading'\"\n  [ngTemplateOutlet]=\"chevron\"\n></ng-container>\n<div class=\"leading\"><ng-content select=\"[leading]\"></ng-content></div>\n<div class=\"main\">\n  <div class=\"title-row\" [id]=\"titleId\">\n    <div *ngIf=\"heading?.trim()\" class=\"heading\" [ngStyle]=\"clampStyle\">\n      <ng-container [ngSwitch]=\"headingLevel\">\n        <h1 *ngSwitchCase=\"1\">{{ heading }}</h1>\n        <h2 *ngSwitchCase=\"2\">{{ heading }}</h2>\n        <h3 *ngSwitchCase=\"3\">{{ heading }}</h3>\n        <h4 *ngSwitchCase=\"4\">{{ heading }}</h4>\n        <h5 *ngSwitchCase=\"5\">{{ heading }}</h5>\n        <h6 *ngSwitchCase=\"6\">{{ heading }}</h6>\n      </ng-container>\n    </div>\n    <ng-content></ng-content>\n  </div>\n  <div *ngIf=\"subheading?.trim()\" class=\"subheading\">{{ subheading }}</div>\n</div>\n<ng-container\n  *ngIf=\"expandable && togglePosition === 'trailing'\"\n  [ngTemplateOutlet]=\"chevron\"\n></ng-container>\n<div class=\"actions\"><ng-content select=\"[actions]\"></ng-content></div>\n\n<ng-template #chevron>\n  <riv-icon\n    class=\"expand-chevron\"\n    [class.expanded]=\"expanded\"\n    [name]=\"'ChevronDown'\"\n    [size]=\"20\"\n  ></riv-icon>\n</ng-template>\n", styles: [":host{display:flex;gap:var(--size-medium);min-width:0}:host.expandable{position:relative}:host.align-start{align-items:flex-start}:host.align-center{align-items:center}:host.padding-small{padding:var(--size-small)}:host.padding-medium{padding:var(--size-medium)}:host.padding-large{padding:var(--size-large)}:host.padding-xlarge{padding:var(--size-xlarge)}:host.padding-xxlarge{padding:var(--size-xxlarge)}:host.filled{background-color:var(--surface-light-1)}:host.filled,:host.divider{border-bottom:var(--border-width) solid var(--border-light)}.main{flex-grow:1;min-width:0}.title-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--size-xsmall);min-width:0;font:var(--card-heading-font, var(--title-04));color:var(--card-heading-color, var(--type-light-high-contrast))}:host.filled .title-row{font:var(--card-heading-font, var(--title-02))}.leading{flex-shrink:0}.actions{position:relative;z-index:var(--card-raised-z-index);display:flex;flex-shrink:0;align-items:center;gap:var(--size-small)}.expand-toggle{position:absolute;inset:0;z-index:var(--card-click-target-z-index);padding:0;border:none;background:none;cursor:pointer;transition:background-color var(--short-transition)}.expand-toggle:not(:disabled):hover{background-color:var(--black-20)}.expand-toggle:disabled{cursor:default}.expand-toggle:focus-visible{outline:var(--border-width-large) solid var(--type-light-link);outline-offset:calc(-1 * var(--border-width-large))}.expand-chevron{flex-shrink:0;transition:transform var(--medium-transition)}.expand-chevron.expanded{transform:rotate(-180deg)}.leading:not(:has(*)),.actions:not(:has(*)){display:none}.heading{min-width:0}.heading>*{display:inline;margin:0;font:inherit;color:inherit}.subheading{font:var(--body-small);color:var(--type-light-low-contrast)}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { 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: CardHeaderComponent, deps: [{ token: i1.CardComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: CardHeaderComponent, selector: "riv-card-header", inputs: { heading: "heading", subheading: "subheading", headingLevel: "headingLevel", variant: "variant", padding: "padding", divider: "divider", align: "align", clamp: "clamp", expandable: "expandable", expanded: "expanded", togglePosition: "togglePosition", disabled: "disabled" }, outputs: { expandedChange: "expandedChange" }, host: { properties: { "class": "this.classes" } }, usesOnChanges: true, ngImport: i0, template: "<button\n  *ngIf=\"expandable\"\n  type=\"button\"\n  class=\"expand-toggle\"\n  [disabled]=\"disabled\"\n  [attr.aria-disabled]=\"disabled ? 'true' : null\"\n  [attr.aria-expanded]=\"expanded\"\n  [attr.aria-controls]=\"regionId\"\n  [attr.aria-labelledby]=\"titleId\"\n  (click)=\"toggle()\"\n></button>\n<ng-container\n  *ngIf=\"expandable && togglePosition === 'leading'\"\n  [ngTemplateOutlet]=\"chevron\"\n></ng-container>\n<div class=\"leading\"><ng-content select=\"[leading]\"></ng-content></div>\n<div class=\"main\">\n  <div class=\"title-row\" [id]=\"titleId\">\n    <div *ngIf=\"heading?.trim()\" class=\"heading\" [ngStyle]=\"clampStyle\">\n      <ng-container [ngSwitch]=\"headingLevel\">\n        <h1 *ngSwitchCase=\"1\">{{ heading }}</h1>\n        <h2 *ngSwitchCase=\"2\">{{ heading }}</h2>\n        <h3 *ngSwitchCase=\"3\">{{ heading }}</h3>\n        <h4 *ngSwitchCase=\"4\">{{ heading }}</h4>\n        <h5 *ngSwitchCase=\"5\">{{ heading }}</h5>\n        <h6 *ngSwitchCase=\"6\">{{ heading }}</h6>\n      </ng-container>\n    </div>\n    <ng-content></ng-content>\n  </div>\n  <div *ngIf=\"subheading?.trim()\" class=\"subheading\">{{ subheading }}</div>\n</div>\n<ng-container\n  *ngIf=\"expandable && togglePosition === 'trailing'\"\n  [ngTemplateOutlet]=\"chevron\"\n></ng-container>\n<div class=\"actions\"><ng-content select=\"[actions]\"></ng-content></div>\n\n<ng-template #chevron>\n  <riv-icon\n    class=\"expand-chevron\"\n    [class.expanded]=\"expanded\"\n    [name]=\"'ChevronDown'\"\n    [size]=\"20\"\n  ></riv-icon>\n</ng-template>\n", styles: [":host{display:flex;gap:var(--size-medium);min-width:0}:host.expandable{position:relative}:host.align-start{align-items:flex-start}:host.align-center{align-items:center}:host.padding-small{padding:var(--size-small)}:host.padding-medium{padding:var(--size-medium)}:host.padding-large{padding:var(--size-large)}:host.padding-xlarge{padding:var(--size-xlarge)}:host.padding-xxlarge{padding:var(--size-xxlarge)}:host.filled{background-color:var(--surface-light-1)}:host.filled,:host.divider{border-bottom:var(--border-width) solid var(--border-light)}.main{flex-grow:1;min-width:0}.title-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--size-xsmall);min-width:0;font:var(--card-heading-font, var(--title-04));color:var(--card-heading-color, var(--type-light-high-contrast))}:host.filled .title-row{font:var(--card-heading-font, var(--title-02))}.leading{flex-shrink:0}.actions{position:relative;z-index:var(--card-raised-z-index);display:flex;flex-shrink:0;align-items:center;gap:var(--size-small)}.expand-toggle{position:absolute;inset:0;z-index:var(--card-click-target-z-index);padding:0;border:none;background:none;cursor:pointer;transition:background-color var(--short-transition)}.expand-toggle:not(:disabled):hover{background-color:var(--black-20)}.expand-toggle:disabled{cursor:default}.expand-toggle:focus-visible{outline:var(--border-width-large) solid var(--type-light-link);outline-offset:calc(-1 * var(--border-width-large))}.expand-chevron{flex-shrink:0;transition:transform var(--medium-transition)}.expand-chevron.expanded{transform:rotate(-180deg)}.leading:not(:has(*)),.actions:not(:has(*)){display:none}.heading{min-width:0}.heading>*{display:inline;margin:0;font:inherit;color:inherit}.subheading{font:var(--body-small);color:var(--type-light-low-contrast)}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { 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: CardHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CardHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-card-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  *ngIf=\"expandable\"\n  type=\"button\"\n  class=\"expand-toggle\"\n  [disabled]=\"disabled\"\n  [attr.aria-disabled]=\"disabled ? 'true' : null\"\n  [attr.aria-expanded]=\"expanded\"\n  [attr.aria-controls]=\"regionId\"\n  [attr.aria-labelledby]=\"titleId\"\n  (click)=\"toggle()\"\n></button>\n<ng-container\n  *ngIf=\"expandable && togglePosition === 'leading'\"\n  [ngTemplateOutlet]=\"chevron\"\n></ng-container>\n<div class=\"leading\"><ng-content select=\"[leading]\"></ng-content></div>\n<div class=\"main\">\n  <div class=\"title-row\" [id]=\"titleId\">\n    <div *ngIf=\"heading?.trim()\" class=\"heading\" [ngStyle]=\"clampStyle\">\n      <ng-container [ngSwitch]=\"headingLevel\">\n        <h1 *ngSwitchCase=\"1\">{{ heading }}</h1>\n        <h2 *ngSwitchCase=\"2\">{{ heading }}</h2>\n        <h3 *ngSwitchCase=\"3\">{{ heading }}</h3>\n        <h4 *ngSwitchCase=\"4\">{{ heading }}</h4>\n        <h5 *ngSwitchCase=\"5\">{{ heading }}</h5>\n        <h6 *ngSwitchCase=\"6\">{{ heading }}</h6>\n      </ng-container>\n    </div>\n    <ng-content></ng-content>\n  </div>\n  <div *ngIf=\"subheading?.trim()\" class=\"subheading\">{{ subheading }}</div>\n</div>\n<ng-container\n  *ngIf=\"expandable && togglePosition === 'trailing'\"\n  [ngTemplateOutlet]=\"chevron\"\n></ng-container>\n<div class=\"actions\"><ng-content select=\"[actions]\"></ng-content></div>\n\n<ng-template #chevron>\n  <riv-icon\n    class=\"expand-chevron\"\n    [class.expanded]=\"expanded\"\n    [name]=\"'ChevronDown'\"\n    [size]=\"20\"\n  ></riv-icon>\n</ng-template>\n", styles: [":host{display:flex;gap:var(--size-medium);min-width:0}:host.expandable{position:relative}:host.align-start{align-items:flex-start}:host.align-center{align-items:center}:host.padding-small{padding:var(--size-small)}:host.padding-medium{padding:var(--size-medium)}:host.padding-large{padding:var(--size-large)}:host.padding-xlarge{padding:var(--size-xlarge)}:host.padding-xxlarge{padding:var(--size-xxlarge)}:host.filled{background-color:var(--surface-light-1)}:host.filled,:host.divider{border-bottom:var(--border-width) solid var(--border-light)}.main{flex-grow:1;min-width:0}.title-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--size-xsmall);min-width:0;font:var(--card-heading-font, var(--title-04));color:var(--card-heading-color, var(--type-light-high-contrast))}:host.filled .title-row{font:var(--card-heading-font, var(--title-02))}.leading{flex-shrink:0}.actions{position:relative;z-index:var(--card-raised-z-index);display:flex;flex-shrink:0;align-items:center;gap:var(--size-small)}.expand-toggle{position:absolute;inset:0;z-index:var(--card-click-target-z-index);padding:0;border:none;background:none;cursor:pointer;transition:background-color var(--short-transition)}.expand-toggle:not(:disabled):hover{background-color:var(--black-20)}.expand-toggle:disabled{cursor:default}.expand-toggle:focus-visible{outline:var(--border-width-large) solid var(--type-light-link);outline-offset:calc(-1 * var(--border-width-large))}.expand-chevron{flex-shrink:0;transition:transform var(--medium-transition)}.expand-chevron.expanded{transform:rotate(-180deg)}.leading:not(:has(*)),.actions:not(:has(*)){display:none}.heading{min-width:0}.heading>*{display:inline;margin:0;font:inherit;color:inherit}.subheading{font:var(--body-small);color:var(--type-light-low-contrast)}\n"] }]
         }], ctorParameters: () => [{ type: i1.CardComponent, decorators: [{