@rivet-health/design-system 5.0.1 → 5.0.2

package/esm2020/lib/input/single-select/single-select.component.mjs

@@ -51,10 +51,10 @@ export class SingleSelectComponent extends InputLabelComponent {
     }
 }
 SingleSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SingleSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-SingleSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SingleSelectComponent, selector: "riv-single-select", inputs: { groups: "groups", selectedOption: "selectedOption", filterabilityOptions: "filterabilityOptions", loading: "loading", locked: "locked", noOptionsMessage: "noOptionsMessage", nodeTemplate: "nodeTemplate", triggerTemplate: "triggerTemplate", placeholder: "placeholder", disabled: "disabled" }, outputs: { filterQueryChange: "filterQueryChange", selectedOptionChange: "selectedOptionChange" }, 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=\"triggerTemplate; else standardTrigger\">\n  <button\n    #customTriggerButton\n    (click)=\"allowedOpen()\"\n    [disabled]=\"disabled || locked\"\n    type=\"button\"\n  >\n    <ng-container\n      [ngTemplateOutlet]=\"triggerTemplate\"\n      [ngTemplateOutletContext]=\"{ selectedOption }\"\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    [labelActionText]=\"labelActionText\"\n    (labelAction)=\"labelAction.emit($event)\"\n  >\n    <button\n      #standardTriggerButton\n      class=\"trigger\"\n      (click)=\"allowedOpen()\"\n      [disabled]=\"disabled || locked\"\n      type=\"button\"\n    >\n      <ng-container *ngIf=\"selectedOption; else placeholderValue\">\n        <span class=\"value\">{{ selectedOption.title }}</span>\n      </ng-container>\n      <ng-template #placeholderValue>\n        <span class=\"value placeholder\">{{ placeholder }}</span>\n      </ng-template>\n      <span class=\"chevron\">\n        <riv-icon *ngIf=\"!locked\" [name]=\"'ChevronDown'\" [size]=\"16\"></riv-icon>\n        <riv-icon *ngIf=\"locked\" [name]=\"'Lock'\" [size]=\"16\"></riv-icon>\n      </span>\n    </button>\n  </riv-input-label>\n</ng-template>\n\n<riv-callout\n  *ngIf=\"open\"\n  [anchor]=\"getTrigger()\"\n  [theme]=\"'light'\"\n  [showCaret]=\"false\"\n  [allowedPositions]=\"[\n    'top-left',\n    'top-center',\n    'top-right',\n    'bottom-right',\n    'bottom-center',\n    'bottom-left'\n  ]\"\n  (close)=\"open = false\"\n>\n  <input\n    *ngIf=\"filterabilityOptions.enabled\"\n    #filter\n    class=\"filter\"\n    [placeholder]=\"getFilterPlaceholder()\"\n    [value]=\"filterQuery\"\n    (input)=\"filterQuery = filter.value; filterQueryChange.emit(filterQuery)\"\n  />\n  <div class=\"options\">\n    <riv-loading-cover [loading]=\"loading\">\n      <ng-container *ngFor=\"let group of groups; trackBy: trackByHeader\">\n        <ng-container *ngIf=\"group.header\">\n          <span class=\"group-header\">\n            {{ group.header }}\n          </span>\n        </ng-container>\n        <ng-container *ngIf=\"group.options; let nodes\">\n          <ng-container *ngIf=\"nodes.length > 0; else empty\">\n            <ng-container *ngFor=\"let node of nodes; trackBy: trackByOption\">\n              <ng-container *ngIf=\"nodeTemplate; else standardTemplate\">\n                <button\n                  class=\"custom-single-select-node\"\n                  [disabled]=\"node.disabled\"\n                  (click)=\"selectedOptionChange.emit(node); open = false\"\n                  type=\"button\"\n                >\n                  <ng-container\n                    [ngTemplateOutlet]=\"nodeTemplate\"\n                    [ngTemplateOutletContext]=\"{ node }\"\n                  ></ng-container>\n                </button>\n              </ng-container>\n              <ng-template #standardTemplate>\n                <button\n                  class=\"single-select-node\"\n                  [class.selected]=\"node?.id === selectedOption?.id\"\n                  [class.disabled]=\"node?.disabled\"\n                  [disabled]=\"node?.disabled\"\n                  (click)=\"selectedOptionChange.emit(node); open = false\"\n                  type=\"button\"\n                >\n                  <riv-icon\n                    [name]=\"'Check'\"\n                    *ngIf=\"node?.id === selectedOption?.id\"\n                    [size]=\"16\"\n                  ></riv-icon>\n                  <span class=\"label\">\n                    <span class=\"label-title\">\n                      <riv-highlight\n                        [text]=\"node?.title || ''\"\n                        [indices]=\"node?.titleHighlightIndices || []\"\n                      ></riv-highlight>\n                    </span>\n                    <span *ngIf=\"node?.subtitle\" class=\"label-subtitle\">\n                      <riv-highlight\n                        [text]=\"node?.subtitle || ''\"\n                        [indices]=\"node?.subtitleHighlightIndices || []\"\n                      ></riv-highlight>\n                    </span>\n                  </span>\n                </button>\n              </ng-template>\n            </ng-container>\n          </ng-container>\n          <ng-template #empty>\n            <div class=\"empty\">\n              {{ noOptionsMessage }}\n            </div>\n          </ng-template>\n        </ng-container>\n      </ng-container>\n    </riv-loading-cover>\n  </div>\n  <div class=\"footer\">\n    <ng-content select=\"[footer]\"> </ng-content>\n  </div>\n</riv-callout>\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)}.trigger:focus{outline:none;border:var(--border-width) solid var(--purp-60)}.trigger:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}.value{font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-0);color:var(--type-light-high-contrast);padding:var(--size-small);flex-grow:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:pre}.value.placeholder{color:var(--type-light-disabled)}.chevron{display:flex;justify-content:center;align-items:center;padding:var(--size-small);background-color:var(--surface-light-2);border-left:var(--border-width) solid var(--border-light)}.filter{width:100%;outline:none;border:none;border-bottom:var(--border-width) solid var(--border-light);font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-0);color:var(--type-light-high-contrast);padding:var(--size-small)}.filter::placeholder{color:var(--type-light-disabled)}.options{max-height:50vh;max-width:calc(var(--base-grid-size) * 150);overflow-y:auto}.single-select-node{display:flex;align-items:center;overflow:hidden;flex-grow:1;text-align:left;padding:var(--size-xsmall) var(--size-xsmall) var(--size-xsmall) calc(var(--base-grid-size) * 6);width:100%}.single-select-node.selected{padding-left:var(--size-small)}.single-select-node:hover{background-color:var(--surface-light-2)}.single-select-node.disabled{cursor:default;background-color:var(--surface-light-0)}.single-select-node.disabled .label,.single-select-node.disabled .label-subtitle{color:var(--type-light-disabled)}.single-select-node riv-icon{flex-shrink:0}.single-select-node .label{font-size:calc(var(--base-grid-size) * 4);line-height:calc(var(--base-grid-size) * 6);overflow:hidden;text-overflow:ellipsis;white-space:pre;flex-grow:1;padding:0 calc(var(--base-grid-size) * 2)}.single-select-node .label-subtitle{padding-left:var(--base-grid-size);color:var(--type-light-low-contrast)}.custom-single-select-node{display:block;width:100%;text-align:left}.empty{padding:var(--size-medium);text-align:center;color:var(--type-light-disabled)}.footer{border-top:var(--border-width) solid var(--border-light-blend);background-color:var(--surface-light-1);border-bottom-left-radius:var(--border-radius-medium);border-bottom-right-radius:var(--border-radius-medium)}.group-header{display:flex;padding:8px 8px 4px;align-items:flex-start;gap:10px;align-self:stretch;font:var(--title-01)}\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.CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "component", type: i3.HighlightComponent, selector: "riv-highlight", inputs: ["text", "indices"] }, { kind: "component", type: i4.IconComponent, selector: "riv-icon", inputs: ["name", "size", "customSize", "strokeWidth"] }, { kind: "component", type: i5.InputLabelComponent, selector: "riv-input-label", inputs: ["label", "help", "required", "labelActionText"], outputs: ["labelAction"] }, { kind: "component", type: i6.LoadingCoverComponent, selector: "riv-loading-cover", inputs: ["loading", "loadingSize", "errorMessage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SingleSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SingleSelectComponent, selector: "riv-single-select", inputs: { groups: "groups", selectedOption: "selectedOption", filterabilityOptions: "filterabilityOptions", loading: "loading", locked: "locked", noOptionsMessage: "noOptionsMessage", nodeTemplate: "nodeTemplate", triggerTemplate: "triggerTemplate", placeholder: "placeholder", disabled: "disabled" }, outputs: { filterQueryChange: "filterQueryChange", selectedOptionChange: "selectedOptionChange" }, 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=\"triggerTemplate; else standardTrigger\">\n  <button\n    #customTriggerButton\n    (click)=\"allowedOpen()\"\n    [disabled]=\"disabled || locked\"\n    type=\"button\"\n  >\n    <ng-container\n      [ngTemplateOutlet]=\"triggerTemplate\"\n      [ngTemplateOutletContext]=\"{ selectedOption }\"\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    [labelActionText]=\"labelActionText\"\n    (labelAction)=\"labelAction.emit($event)\"\n  >\n    <button\n      #standardTriggerButton\n      class=\"trigger\"\n      (click)=\"allowedOpen()\"\n      [disabled]=\"disabled || locked\"\n      type=\"button\"\n    >\n      <ng-container *ngIf=\"selectedOption; else placeholderValue\">\n        <span class=\"value\">{{ selectedOption.title }}</span>\n      </ng-container>\n      <ng-template #placeholderValue>\n        <span class=\"value placeholder\">{{ placeholder }}</span>\n      </ng-template>\n      <span class=\"chevron\">\n        <riv-icon *ngIf=\"!locked\" [name]=\"'ChevronDown'\" [size]=\"16\"></riv-icon>\n        <riv-icon *ngIf=\"locked\" [name]=\"'Lock'\" [size]=\"16\"></riv-icon>\n      </span>\n    </button>\n  </riv-input-label>\n</ng-template>\n\n<riv-callout\n  *ngIf=\"open\"\n  [anchor]=\"getTrigger()\"\n  [theme]=\"'light'\"\n  [showCaret]=\"false\"\n  [allowedPositions]=\"[\n    'top-left',\n    'top-center',\n    'top-right',\n    'bottom-right',\n    'bottom-center',\n    'bottom-left'\n  ]\"\n  (close)=\"open = false\"\n>\n  <input\n    *ngIf=\"filterabilityOptions.enabled\"\n    #filter\n    class=\"filter\"\n    [placeholder]=\"getFilterPlaceholder()\"\n    [value]=\"filterQuery\"\n    (input)=\"filterQuery = filter.value; filterQueryChange.emit(filterQuery)\"\n  />\n  <div class=\"options\">\n    <riv-loading-cover [loading]=\"loading\">\n      <ng-container *ngFor=\"let group of groups; trackBy: trackByHeader\">\n        <ng-container *ngIf=\"group.header\">\n          <span class=\"group-header\">\n            {{ group.header }}\n          </span>\n        </ng-container>\n        <ng-container *ngIf=\"group.options; let nodes\">\n          <ng-container *ngIf=\"nodes.length > 0; else empty\">\n            <ng-container *ngFor=\"let node of nodes; trackBy: trackByOption\">\n              <ng-container *ngIf=\"nodeTemplate; else standardTemplate\">\n                <button\n                  class=\"custom-single-select-node\"\n                  [disabled]=\"node.disabled\"\n                  (click)=\"selectedOptionChange.emit(node); open = false\"\n                  type=\"button\"\n                >\n                  <ng-container\n                    [ngTemplateOutlet]=\"nodeTemplate\"\n                    [ngTemplateOutletContext]=\"{ node }\"\n                  ></ng-container>\n                </button>\n              </ng-container>\n              <ng-template #standardTemplate>\n                <button\n                  class=\"single-select-node\"\n                  [class.selected]=\"node?.id === selectedOption?.id\"\n                  [class.disabled]=\"node?.disabled\"\n                  [disabled]=\"node?.disabled\"\n                  (click)=\"selectedOptionChange.emit(node); open = false\"\n                  type=\"button\"\n                >\n                  <riv-icon\n                    [name]=\"'Check'\"\n                    *ngIf=\"node?.id === selectedOption?.id\"\n                    [size]=\"16\"\n                  ></riv-icon>\n                  <span class=\"label\">\n                    <span class=\"label-title\">\n                      <riv-highlight\n                        [text]=\"node?.title || ''\"\n                        [indices]=\"node?.titleHighlightIndices || []\"\n                      ></riv-highlight>\n                    </span>\n                    <span *ngIf=\"node?.subtitle\" class=\"label-subtitle\">\n                      <riv-highlight\n                        [text]=\"node?.subtitle || ''\"\n                        [indices]=\"node?.subtitleHighlightIndices || []\"\n                      ></riv-highlight>\n                    </span>\n                  </span>\n                </button>\n              </ng-template>\n            </ng-container>\n          </ng-container>\n          <ng-template #empty>\n            <div class=\"empty\">\n              {{ noOptionsMessage }}\n            </div>\n          </ng-template>\n        </ng-container>\n      </ng-container>\n    </riv-loading-cover>\n  </div>\n  <div class=\"footer\">\n    <ng-content select=\"[footer]\"> </ng-content>\n  </div>\n</riv-callout>\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)}.trigger:focus{outline:none;border:var(--border-width) solid var(--purp-60)}.trigger:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}.value{font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-0);color:var(--type-light-high-contrast);padding:var(--size-small);flex-grow:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:pre}.value.placeholder{color:var(--type-light-disabled)}.chevron{display:flex;justify-content:center;align-items:center;padding:var(--size-small);background-color:var(--surface-light-2);border-left:var(--border-width) solid var(--border-light)}.filter{width:100%;outline:none;border:none;border-bottom:var(--border-width) solid var(--border-light);font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-0);color:var(--type-light-high-contrast);padding:var(--size-small)}.filter::placeholder{color:var(--type-light-disabled)}.options{max-height:50vh;max-width:calc(var(--base-grid-size) * 150);overflow-y:auto}.single-select-node{display:flex;align-items:center;overflow:hidden;flex-grow:1;text-align:left;padding:var(--size-xsmall) var(--size-xsmall) var(--size-xsmall) calc(var(--base-grid-size) * 6);width:100%}.single-select-node.selected{padding-left:var(--size-small)}.single-select-node:hover{background-color:var(--surface-light-2)}.single-select-node.disabled{cursor:default;background-color:var(--surface-light-0)}.single-select-node.disabled .label,.single-select-node.disabled .label-subtitle{color:var(--type-light-disabled)}.single-select-node riv-icon{flex-shrink:0}.single-select-node .label{font-size:calc(var(--base-grid-size) * 4);line-height:calc(var(--base-grid-size) * 6);overflow:hidden;text-overflow:ellipsis;white-space:pre;flex-grow:1;padding:0 calc(var(--base-grid-size) * 2);min-width:calc(var(--base-grid-size) * 16)}.single-select-node .label-subtitle{padding-left:var(--base-grid-size);color:var(--type-light-low-contrast)}.custom-single-select-node{display:block;width:100%;text-align:left}.empty{padding:var(--size-medium);text-align:center;color:var(--type-light-disabled)}.footer{border-top:var(--border-width) solid var(--border-light-blend);background-color:var(--surface-light-1);border-bottom-left-radius:var(--border-radius-medium);border-bottom-right-radius:var(--border-radius-medium)}.group-header{display:flex;padding:8px 8px 4px;align-items:flex-start;gap:10px;align-self:stretch;font:var(--title-01)}\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.CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "component", type: i3.HighlightComponent, selector: "riv-highlight", inputs: ["text", "indices"] }, { kind: "component", type: i4.IconComponent, selector: "riv-icon", inputs: ["name", "size", "customSize", "strokeWidth"] }, { kind: "component", type: i5.InputLabelComponent, selector: "riv-input-label", inputs: ["label", "help", "required", "labelActionText"], outputs: ["labelAction"] }, { kind: "component", type: i6.LoadingCoverComponent, selector: "riv-loading-cover", inputs: ["loading", "loadingSize", "errorMessage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SingleSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'riv-single-select', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"triggerTemplate; else standardTrigger\">\n  <button\n    #customTriggerButton\n    (click)=\"allowedOpen()\"\n    [disabled]=\"disabled || locked\"\n    type=\"button\"\n  >\n    <ng-container\n      [ngTemplateOutlet]=\"triggerTemplate\"\n      [ngTemplateOutletContext]=\"{ selectedOption }\"\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    [labelActionText]=\"labelActionText\"\n    (labelAction)=\"labelAction.emit($event)\"\n  >\n    <button\n      #standardTriggerButton\n      class=\"trigger\"\n      (click)=\"allowedOpen()\"\n      [disabled]=\"disabled || locked\"\n      type=\"button\"\n    >\n      <ng-container *ngIf=\"selectedOption; else placeholderValue\">\n        <span class=\"value\">{{ selectedOption.title }}</span>\n      </ng-container>\n      <ng-template #placeholderValue>\n        <span class=\"value placeholder\">{{ placeholder }}</span>\n      </ng-template>\n      <span class=\"chevron\">\n        <riv-icon *ngIf=\"!locked\" [name]=\"'ChevronDown'\" [size]=\"16\"></riv-icon>\n        <riv-icon *ngIf=\"locked\" [name]=\"'Lock'\" [size]=\"16\"></riv-icon>\n      </span>\n    </button>\n  </riv-input-label>\n</ng-template>\n\n<riv-callout\n  *ngIf=\"open\"\n  [anchor]=\"getTrigger()\"\n  [theme]=\"'light'\"\n  [showCaret]=\"false\"\n  [allowedPositions]=\"[\n    'top-left',\n    'top-center',\n    'top-right',\n    'bottom-right',\n    'bottom-center',\n    'bottom-left'\n  ]\"\n  (close)=\"open = false\"\n>\n  <input\n    *ngIf=\"filterabilityOptions.enabled\"\n    #filter\n    class=\"filter\"\n    [placeholder]=\"getFilterPlaceholder()\"\n    [value]=\"filterQuery\"\n    (input)=\"filterQuery = filter.value; filterQueryChange.emit(filterQuery)\"\n  />\n  <div class=\"options\">\n    <riv-loading-cover [loading]=\"loading\">\n      <ng-container *ngFor=\"let group of groups; trackBy: trackByHeader\">\n        <ng-container *ngIf=\"group.header\">\n          <span class=\"group-header\">\n            {{ group.header }}\n          </span>\n        </ng-container>\n        <ng-container *ngIf=\"group.options; let nodes\">\n          <ng-container *ngIf=\"nodes.length > 0; else empty\">\n            <ng-container *ngFor=\"let node of nodes; trackBy: trackByOption\">\n              <ng-container *ngIf=\"nodeTemplate; else standardTemplate\">\n                <button\n                  class=\"custom-single-select-node\"\n                  [disabled]=\"node.disabled\"\n                  (click)=\"selectedOptionChange.emit(node); open = false\"\n                  type=\"button\"\n                >\n                  <ng-container\n                    [ngTemplateOutlet]=\"nodeTemplate\"\n                    [ngTemplateOutletContext]=\"{ node }\"\n                  ></ng-container>\n                </button>\n              </ng-container>\n              <ng-template #standardTemplate>\n                <button\n                  class=\"single-select-node\"\n                  [class.selected]=\"node?.id === selectedOption?.id\"\n                  [class.disabled]=\"node?.disabled\"\n                  [disabled]=\"node?.disabled\"\n                  (click)=\"selectedOptionChange.emit(node); open = false\"\n                  type=\"button\"\n                >\n                  <riv-icon\n                    [name]=\"'Check'\"\n                    *ngIf=\"node?.id === selectedOption?.id\"\n                    [size]=\"16\"\n                  ></riv-icon>\n                  <span class=\"label\">\n                    <span class=\"label-title\">\n                      <riv-highlight\n                        [text]=\"node?.title || ''\"\n                        [indices]=\"node?.titleHighlightIndices || []\"\n                      ></riv-highlight>\n                    </span>\n                    <span *ngIf=\"node?.subtitle\" class=\"label-subtitle\">\n                      <riv-highlight\n                        [text]=\"node?.subtitle || ''\"\n                        [indices]=\"node?.subtitleHighlightIndices || []\"\n                      ></riv-highlight>\n                    </span>\n                  </span>\n                </button>\n              </ng-template>\n            </ng-container>\n          </ng-container>\n          <ng-template #empty>\n            <div class=\"empty\">\n              {{ noOptionsMessage }}\n            </div>\n          </ng-template>\n        </ng-container>\n      </ng-container>\n    </riv-loading-cover>\n  </div>\n  <div class=\"footer\">\n    <ng-content select=\"[footer]\"> </ng-content>\n  </div>\n</riv-callout>\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)}.trigger:focus{outline:none;border:var(--border-width) solid var(--purp-60)}.trigger:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}.value{font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-0);color:var(--type-light-high-contrast);padding:var(--size-small);flex-grow:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:pre}.value.placeholder{color:var(--type-light-disabled)}.chevron{display:flex;justify-content:center;align-items:center;padding:var(--size-small);background-color:var(--surface-light-2);border-left:var(--border-width) solid var(--border-light)}.filter{width:100%;outline:none;border:none;border-bottom:var(--border-width) solid var(--border-light);font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-0);color:var(--type-light-high-contrast);padding:var(--size-small)}.filter::placeholder{color:var(--type-light-disabled)}.options{max-height:50vh;max-width:calc(var(--base-grid-size) * 150);overflow-y:auto}.single-select-node{display:flex;align-items:center;overflow:hidden;flex-grow:1;text-align:left;padding:var(--size-xsmall) var(--size-xsmall) var(--size-xsmall) calc(var(--base-grid-size) * 6);width:100%}.single-select-node.selected{padding-left:var(--size-small)}.single-select-node:hover{background-color:var(--surface-light-2)}.single-select-node.disabled{cursor:default;background-color:var(--surface-light-0)}.single-select-node.disabled .label,.single-select-node.disabled .label-subtitle{color:var(--type-light-disabled)}.single-select-node riv-icon{flex-shrink:0}.single-select-node .label{font-size:calc(var(--base-grid-size) * 4);line-height:calc(var(--base-grid-size) * 6);overflow:hidden;text-overflow:ellipsis;white-space:pre;flex-grow:1;padding:0 calc(var(--base-grid-size) * 2)}.single-select-node .label-subtitle{padding-left:var(--base-grid-size);color:var(--type-light-low-contrast)}.custom-single-select-node{display:block;width:100%;text-align:left}.empty{padding:var(--size-medium);text-align:center;color:var(--type-light-disabled)}.footer{border-top:var(--border-width) solid var(--border-light-blend);background-color:var(--surface-light-1);border-bottom-left-radius:var(--border-radius-medium);border-bottom-right-radius:var(--border-radius-medium)}.group-header{display:flex;padding:8px 8px 4px;align-items:flex-start;gap:10px;align-self:stretch;font:var(--title-01)}\n"] }]
+            args: [{ selector: 'riv-single-select', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"triggerTemplate; else standardTrigger\">\n  <button\n    #customTriggerButton\n    (click)=\"allowedOpen()\"\n    [disabled]=\"disabled || locked\"\n    type=\"button\"\n  >\n    <ng-container\n      [ngTemplateOutlet]=\"triggerTemplate\"\n      [ngTemplateOutletContext]=\"{ selectedOption }\"\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    [labelActionText]=\"labelActionText\"\n    (labelAction)=\"labelAction.emit($event)\"\n  >\n    <button\n      #standardTriggerButton\n      class=\"trigger\"\n      (click)=\"allowedOpen()\"\n      [disabled]=\"disabled || locked\"\n      type=\"button\"\n    >\n      <ng-container *ngIf=\"selectedOption; else placeholderValue\">\n        <span class=\"value\">{{ selectedOption.title }}</span>\n      </ng-container>\n      <ng-template #placeholderValue>\n        <span class=\"value placeholder\">{{ placeholder }}</span>\n      </ng-template>\n      <span class=\"chevron\">\n        <riv-icon *ngIf=\"!locked\" [name]=\"'ChevronDown'\" [size]=\"16\"></riv-icon>\n        <riv-icon *ngIf=\"locked\" [name]=\"'Lock'\" [size]=\"16\"></riv-icon>\n      </span>\n    </button>\n  </riv-input-label>\n</ng-template>\n\n<riv-callout\n  *ngIf=\"open\"\n  [anchor]=\"getTrigger()\"\n  [theme]=\"'light'\"\n  [showCaret]=\"false\"\n  [allowedPositions]=\"[\n    'top-left',\n    'top-center',\n    'top-right',\n    'bottom-right',\n    'bottom-center',\n    'bottom-left'\n  ]\"\n  (close)=\"open = false\"\n>\n  <input\n    *ngIf=\"filterabilityOptions.enabled\"\n    #filter\n    class=\"filter\"\n    [placeholder]=\"getFilterPlaceholder()\"\n    [value]=\"filterQuery\"\n    (input)=\"filterQuery = filter.value; filterQueryChange.emit(filterQuery)\"\n  />\n  <div class=\"options\">\n    <riv-loading-cover [loading]=\"loading\">\n      <ng-container *ngFor=\"let group of groups; trackBy: trackByHeader\">\n        <ng-container *ngIf=\"group.header\">\n          <span class=\"group-header\">\n            {{ group.header }}\n          </span>\n        </ng-container>\n        <ng-container *ngIf=\"group.options; let nodes\">\n          <ng-container *ngIf=\"nodes.length > 0; else empty\">\n            <ng-container *ngFor=\"let node of nodes; trackBy: trackByOption\">\n              <ng-container *ngIf=\"nodeTemplate; else standardTemplate\">\n                <button\n                  class=\"custom-single-select-node\"\n                  [disabled]=\"node.disabled\"\n                  (click)=\"selectedOptionChange.emit(node); open = false\"\n                  type=\"button\"\n                >\n                  <ng-container\n                    [ngTemplateOutlet]=\"nodeTemplate\"\n                    [ngTemplateOutletContext]=\"{ node }\"\n                  ></ng-container>\n                </button>\n              </ng-container>\n              <ng-template #standardTemplate>\n                <button\n                  class=\"single-select-node\"\n                  [class.selected]=\"node?.id === selectedOption?.id\"\n                  [class.disabled]=\"node?.disabled\"\n                  [disabled]=\"node?.disabled\"\n                  (click)=\"selectedOptionChange.emit(node); open = false\"\n                  type=\"button\"\n                >\n                  <riv-icon\n                    [name]=\"'Check'\"\n                    *ngIf=\"node?.id === selectedOption?.id\"\n                    [size]=\"16\"\n                  ></riv-icon>\n                  <span class=\"label\">\n                    <span class=\"label-title\">\n                      <riv-highlight\n                        [text]=\"node?.title || ''\"\n                        [indices]=\"node?.titleHighlightIndices || []\"\n                      ></riv-highlight>\n                    </span>\n                    <span *ngIf=\"node?.subtitle\" class=\"label-subtitle\">\n                      <riv-highlight\n                        [text]=\"node?.subtitle || ''\"\n                        [indices]=\"node?.subtitleHighlightIndices || []\"\n                      ></riv-highlight>\n                    </span>\n                  </span>\n                </button>\n              </ng-template>\n            </ng-container>\n          </ng-container>\n          <ng-template #empty>\n            <div class=\"empty\">\n              {{ noOptionsMessage }}\n            </div>\n          </ng-template>\n        </ng-container>\n      </ng-container>\n    </riv-loading-cover>\n  </div>\n  <div class=\"footer\">\n    <ng-content select=\"[footer]\"> </ng-content>\n  </div>\n</riv-callout>\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)}.trigger:focus{outline:none;border:var(--border-width) solid var(--purp-60)}.trigger:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}.value{font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-0);color:var(--type-light-high-contrast);padding:var(--size-small);flex-grow:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:pre}.value.placeholder{color:var(--type-light-disabled)}.chevron{display:flex;justify-content:center;align-items:center;padding:var(--size-small);background-color:var(--surface-light-2);border-left:var(--border-width) solid var(--border-light)}.filter{width:100%;outline:none;border:none;border-bottom:var(--border-width) solid var(--border-light);font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-0);color:var(--type-light-high-contrast);padding:var(--size-small)}.filter::placeholder{color:var(--type-light-disabled)}.options{max-height:50vh;max-width:calc(var(--base-grid-size) * 150);overflow-y:auto}.single-select-node{display:flex;align-items:center;overflow:hidden;flex-grow:1;text-align:left;padding:var(--size-xsmall) var(--size-xsmall) var(--size-xsmall) calc(var(--base-grid-size) * 6);width:100%}.single-select-node.selected{padding-left:var(--size-small)}.single-select-node:hover{background-color:var(--surface-light-2)}.single-select-node.disabled{cursor:default;background-color:var(--surface-light-0)}.single-select-node.disabled .label,.single-select-node.disabled .label-subtitle{color:var(--type-light-disabled)}.single-select-node riv-icon{flex-shrink:0}.single-select-node .label{font-size:calc(var(--base-grid-size) * 4);line-height:calc(var(--base-grid-size) * 6);overflow:hidden;text-overflow:ellipsis;white-space:pre;flex-grow:1;padding:0 calc(var(--base-grid-size) * 2);min-width:calc(var(--base-grid-size) * 16)}.single-select-node .label-subtitle{padding-left:var(--base-grid-size);color:var(--type-light-low-contrast)}.custom-single-select-node{display:block;width:100%;text-align:left}.empty{padding:var(--size-medium);text-align:center;color:var(--type-light-disabled)}.footer{border-top:var(--border-width) solid var(--border-light-blend);background-color:var(--surface-light-1);border-bottom-left-radius:var(--border-radius-medium);border-bottom-right-radius:var(--border-radius-medium)}.group-header{display:flex;padding:8px 8px 4px;align-items:flex-start;gap:10px;align-self:stretch;font:var(--title-01)}\n"] }]
         }], propDecorators: { groups: [{
                 type: Input
             }], selectedOption: [{

package/esm2020/lib/visualization/data-table/data-table-cell.component.mjs

@@ -11,10 +11,10 @@ export class DataTableCellComponent {
     }
 }
 DataTableCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DataTableCellComponent, deps: [{ token: i1.DataTableRowComponent }], target: i0.ɵɵFactoryTarget.Component });
-DataTableCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DataTableCellComponent, selector: "[riv-data-table-cell]", host: { properties: { "class.sub-cell": "this.subCell" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{padding:var(--size-large) 0;text-align:right}:host.sub-cell{padding-top:0;padding-left:var(--size-xlarge)}:host:first-child{position:sticky;left:0;z-index:1;background-color:var(--surface-light-0);text-align:left}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+DataTableCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DataTableCellComponent, selector: "[riv-data-table-cell]", host: { properties: { "class.sub-cell": "this.subCell" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{padding:var(--size-large) 0;text-align:right}:host.sub-cell{padding-top:0;padding-left:var(--size-xlarge)}:host:first-child{text-align:left}@media screen{:host:first-child{position:sticky;left:0;z-index:1;background-color:var(--surface-light-0)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DataTableCellComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: '[riv-data-table-cell]', template: '<ng-content></ng-content>', styles: [":host{padding:var(--size-large) 0;text-align:right}:host.sub-cell{padding-top:0;padding-left:var(--size-xlarge)}:host:first-child{position:sticky;left:0;z-index:1;background-color:var(--surface-light-0);text-align:left}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: '[riv-data-table-cell]', template: '<ng-content></ng-content>', styles: [":host{padding:var(--size-large) 0;text-align:right}:host.sub-cell{padding-top:0;padding-left:var(--size-xlarge)}:host:first-child{text-align:left}@media screen{:host:first-child{position:sticky;left:0;z-index:1;background-color:var(--surface-light-0)}}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.DataTableRowComponent }]; }, propDecorators: { subCell: [{
                 type: HostBinding,
                 args: ['class.sub-cell']

package/esm2020/lib/visualization/data-table/data-table-header-cell.component.mjs

@@ -3,9 +3,9 @@ import * as i0 from "@angular/core";
 export class DataTableHeaderCellComponent {
 }
 DataTableHeaderCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DataTableHeaderCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DataTableHeaderCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DataTableHeaderCellComponent, selector: "[riv-data-table-header-cell]", ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{padding:var(--size-large) 0;font-weight:var(--font-weight-heavy);text-align:right}:host:first-child{position:sticky;left:0;z-index:1;background-color:var(--surface-light-0);text-align:left}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+DataTableHeaderCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DataTableHeaderCellComponent, selector: "[riv-data-table-header-cell]", ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{padding:var(--size-large) 0;font-weight:var(--font-weight-heavy);text-align:right}:host:first-child{text-align:left}@media screen{:host:first-child{position:sticky;left:0;z-index:1;background-color:var(--surface-light-0)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DataTableHeaderCellComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: '[riv-data-table-header-cell]', template: '<ng-content></ng-content>', styles: [":host{padding:var(--size-large) 0;font-weight:var(--font-weight-heavy);text-align:right}:host:first-child{position:sticky;left:0;z-index:1;background-color:var(--surface-light-0);text-align:left}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: '[riv-data-table-header-cell]', template: '<ng-content></ng-content>', styles: [":host{padding:var(--size-large) 0;font-weight:var(--font-weight-heavy);text-align:right}:host:first-child{text-align:left}@media screen{:host:first-child{position:sticky;left:0;z-index:1;background-color:var(--surface-light-0)}}\n"] }]
         }] });
 //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGF0YS10YWJsZS1oZWFkZXItY2VsbC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9yaXYvc3JjL2xpYi92aXN1YWxpemF0aW9uL2RhdGEtdGFibGUvZGF0YS10YWJsZS1oZWFkZXItY2VsbC5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxNQUFNLGVBQWUsQ0FBQzs7QUFRbkUsTUFBTSxPQUFPLDRCQUE0Qjs7eUhBQTVCLDRCQUE0Qjs2R0FBNUIsNEJBQTRCLG9FQUY3QiwyQkFBMkI7MkZBRTFCLDRCQUE0QjtrQkFOeEMsU0FBUztzQ0FDUyx1QkFBdUIsQ0FBQyxNQUFNLFlBQ3JDLDhCQUE4QixZQUU5QiwyQkFBMkIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgc2VsZWN0b3I6ICdbcml2LWRhdGEtdGFibGUtaGVhZGVyLWNlbGxdJyxcbiAgc3R5bGVVcmxzOiBbJy4vZGF0YS10YWJsZS1oZWFkZXItY2VsbC5jb21wb25lbnQuY3NzJ10sXG4gIHRlbXBsYXRlOiAnPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PicsXG59KVxuZXhwb3J0IGNsYXNzIERhdGFUYWJsZUhlYWRlckNlbGxDb21wb25lbnQge31cbiJdfQ==

package/fesm2015/rivet-health-design-system.mjs

@@ -1338,10 +1338,10 @@ class SingleSelectComponent extends InputLabelComponent {
     }
 }
 SingleSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SingleSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-SingleSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SingleSelectComponent, selector: "riv-single-select", inputs: { groups: "groups", selectedOption: "selectedOption", filterabilityOptions: "filterabilityOptions", loading: "loading", locked: "locked", noOptionsMessage: "noOptionsMessage", nodeTemplate: "nodeTemplate", triggerTemplate: "triggerTemplate", placeholder: "placeholder", disabled: "disabled" }, outputs: { filterQueryChange: "filterQueryChange", selectedOptionChange: "selectedOptionChange" }, 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=\"triggerTemplate; else standardTrigger\">\n  <button\n    #customTriggerButton\n    (click)=\"allowedOpen()\"\n    [disabled]=\"disabled || locked\"\n    type=\"button\"\n  >\n    <ng-container\n      [ngTemplateOutlet]=\"triggerTemplate\"\n      [ngTemplateOutletContext]=\"{ selectedOption }\"\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    [labelActionText]=\"labelActionText\"\n    (labelAction)=\"labelAction.emit($event)\"\n  >\n    <button\n      #standardTriggerButton\n      class=\"trigger\"\n      (click)=\"allowedOpen()\"\n      [disabled]=\"disabled || locked\"\n      type=\"button\"\n    >\n      <ng-container *ngIf=\"selectedOption; else placeholderValue\">\n        <span class=\"value\">{{ selectedOption.title }}</span>\n      </ng-container>\n      <ng-template #placeholderValue>\n        <span class=\"value placeholder\">{{ placeholder }}</span>\n      </ng-template>\n      <span class=\"chevron\">\n        <riv-icon *ngIf=\"!locked\" [name]=\"'ChevronDown'\" [size]=\"16\"></riv-icon>\n        <riv-icon *ngIf=\"locked\" [name]=\"'Lock'\" [size]=\"16\"></riv-icon>\n      </span>\n    </button>\n  </riv-input-label>\n</ng-template>\n\n<riv-callout\n  *ngIf=\"open\"\n  [anchor]=\"getTrigger()\"\n  [theme]=\"'light'\"\n  [showCaret]=\"false\"\n  [allowedPositions]=\"[\n    'top-left',\n    'top-center',\n    'top-right',\n    'bottom-right',\n    'bottom-center',\n    'bottom-left'\n  ]\"\n  (close)=\"open = false\"\n>\n  <input\n    *ngIf=\"filterabilityOptions.enabled\"\n    #filter\n    class=\"filter\"\n    [placeholder]=\"getFilterPlaceholder()\"\n    [value]=\"filterQuery\"\n    (input)=\"filterQuery = filter.value; filterQueryChange.emit(filterQuery)\"\n  />\n  <div class=\"options\">\n    <riv-loading-cover [loading]=\"loading\">\n      <ng-container *ngFor=\"let group of groups; trackBy: trackByHeader\">\n        <ng-container *ngIf=\"group.header\">\n          <span class=\"group-header\">\n            {{ group.header }}\n          </span>\n        </ng-container>\n        <ng-container *ngIf=\"group.options; let nodes\">\n          <ng-container *ngIf=\"nodes.length > 0; else empty\">\n            <ng-container *ngFor=\"let node of nodes; trackBy: trackByOption\">\n              <ng-container *ngIf=\"nodeTemplate; else standardTemplate\">\n                <button\n                  class=\"custom-single-select-node\"\n                  [disabled]=\"node.disabled\"\n                  (click)=\"selectedOptionChange.emit(node); open = false\"\n                  type=\"button\"\n                >\n                  <ng-container\n                    [ngTemplateOutlet]=\"nodeTemplate\"\n                    [ngTemplateOutletContext]=\"{ node }\"\n                  ></ng-container>\n                </button>\n              </ng-container>\n              <ng-template #standardTemplate>\n                <button\n                  class=\"single-select-node\"\n                  [class.selected]=\"node?.id === selectedOption?.id\"\n                  [class.disabled]=\"node?.disabled\"\n                  [disabled]=\"node?.disabled\"\n                  (click)=\"selectedOptionChange.emit(node); open = false\"\n                  type=\"button\"\n                >\n                  <riv-icon\n                    [name]=\"'Check'\"\n                    *ngIf=\"node?.id === selectedOption?.id\"\n                    [size]=\"16\"\n                  ></riv-icon>\n                  <span class=\"label\">\n                    <span class=\"label-title\">\n                      <riv-highlight\n                        [text]=\"node?.title || ''\"\n                        [indices]=\"node?.titleHighlightIndices || []\"\n                      ></riv-highlight>\n                    </span>\n                    <span *ngIf=\"node?.subtitle\" class=\"label-subtitle\">\n                      <riv-highlight\n                        [text]=\"node?.subtitle || ''\"\n                        [indices]=\"node?.subtitleHighlightIndices || []\"\n                      ></riv-highlight>\n                    </span>\n                  </span>\n                </button>\n              </ng-template>\n            </ng-container>\n          </ng-container>\n          <ng-template #empty>\n            <div class=\"empty\">\n              {{ noOptionsMessage }}\n            </div>\n          </ng-template>\n        </ng-container>\n      </ng-container>\n    </riv-loading-cover>\n  </div>\n  <div class=\"footer\">\n    <ng-content select=\"[footer]\"> </ng-content>\n  </div>\n</riv-callout>\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)}.trigger:focus{outline:none;border:var(--border-width) solid var(--purp-60)}.trigger:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}.value{font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-0);color:var(--type-light-high-contrast);padding:var(--size-small);flex-grow:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:pre}.value.placeholder{color:var(--type-light-disabled)}.chevron{display:flex;justify-content:center;align-items:center;padding:var(--size-small);background-color:var(--surface-light-2);border-left:var(--border-width) solid var(--border-light)}.filter{width:100%;outline:none;border:none;border-bottom:var(--border-width) solid var(--border-light);font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-0);color:var(--type-light-high-contrast);padding:var(--size-small)}.filter::placeholder{color:var(--type-light-disabled)}.options{max-height:50vh;max-width:calc(var(--base-grid-size) * 150);overflow-y:auto}.single-select-node{display:flex;align-items:center;overflow:hidden;flex-grow:1;text-align:left;padding:var(--size-xsmall) var(--size-xsmall) var(--size-xsmall) calc(var(--base-grid-size) * 6);width:100%}.single-select-node.selected{padding-left:var(--size-small)}.single-select-node:hover{background-color:var(--surface-light-2)}.single-select-node.disabled{cursor:default;background-color:var(--surface-light-0)}.single-select-node.disabled .label,.single-select-node.disabled .label-subtitle{color:var(--type-light-disabled)}.single-select-node riv-icon{flex-shrink:0}.single-select-node .label{font-size:calc(var(--base-grid-size) * 4);line-height:calc(var(--base-grid-size) * 6);overflow:hidden;text-overflow:ellipsis;white-space:pre;flex-grow:1;padding:0 calc(var(--base-grid-size) * 2)}.single-select-node .label-subtitle{padding-left:var(--base-grid-size);color:var(--type-light-low-contrast)}.custom-single-select-node{display:block;width:100%;text-align:left}.empty{padding:var(--size-medium);text-align:center;color:var(--type-light-disabled)}.footer{border-top:var(--border-width) solid var(--border-light-blend);background-color:var(--surface-light-1);border-bottom-left-radius:var(--border-radius-medium);border-bottom-right-radius:var(--border-radius-medium)}.group-header{display:flex;padding:8px 8px 4px;align-items:flex-start;gap:10px;align-self:stretch;font:var(--title-01)}\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: CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "component", type: HighlightComponent, selector: "riv-highlight", inputs: ["text", "indices"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "size", "customSize", "strokeWidth"] }, { kind: "component", type: InputLabelComponent, selector: "riv-input-label", inputs: ["label", "help", "required", "labelActionText"], outputs: ["labelAction"] }, { kind: "component", type: LoadingCoverComponent, selector: "riv-loading-cover", inputs: ["loading", "loadingSize", "errorMessage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SingleSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SingleSelectComponent, selector: "riv-single-select", inputs: { groups: "groups", selectedOption: "selectedOption", filterabilityOptions: "filterabilityOptions", loading: "loading", locked: "locked", noOptionsMessage: "noOptionsMessage", nodeTemplate: "nodeTemplate", triggerTemplate: "triggerTemplate", placeholder: "placeholder", disabled: "disabled" }, outputs: { filterQueryChange: "filterQueryChange", selectedOptionChange: "selectedOptionChange" }, 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=\"triggerTemplate; else standardTrigger\">\n  <button\n    #customTriggerButton\n    (click)=\"allowedOpen()\"\n    [disabled]=\"disabled || locked\"\n    type=\"button\"\n  >\n    <ng-container\n      [ngTemplateOutlet]=\"triggerTemplate\"\n      [ngTemplateOutletContext]=\"{ selectedOption }\"\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    [labelActionText]=\"labelActionText\"\n    (labelAction)=\"labelAction.emit($event)\"\n  >\n    <button\n      #standardTriggerButton\n      class=\"trigger\"\n      (click)=\"allowedOpen()\"\n      [disabled]=\"disabled || locked\"\n      type=\"button\"\n    >\n      <ng-container *ngIf=\"selectedOption; else placeholderValue\">\n        <span class=\"value\">{{ selectedOption.title }}</span>\n      </ng-container>\n      <ng-template #placeholderValue>\n        <span class=\"value placeholder\">{{ placeholder }}</span>\n      </ng-template>\n      <span class=\"chevron\">\n        <riv-icon *ngIf=\"!locked\" [name]=\"'ChevronDown'\" [size]=\"16\"></riv-icon>\n        <riv-icon *ngIf=\"locked\" [name]=\"'Lock'\" [size]=\"16\"></riv-icon>\n      </span>\n    </button>\n  </riv-input-label>\n</ng-template>\n\n<riv-callout\n  *ngIf=\"open\"\n  [anchor]=\"getTrigger()\"\n  [theme]=\"'light'\"\n  [showCaret]=\"false\"\n  [allowedPositions]=\"[\n    'top-left',\n    'top-center',\n    'top-right',\n    'bottom-right',\n    'bottom-center',\n    'bottom-left'\n  ]\"\n  (close)=\"open = false\"\n>\n  <input\n    *ngIf=\"filterabilityOptions.enabled\"\n    #filter\n    class=\"filter\"\n    [placeholder]=\"getFilterPlaceholder()\"\n    [value]=\"filterQuery\"\n    (input)=\"filterQuery = filter.value; filterQueryChange.emit(filterQuery)\"\n  />\n  <div class=\"options\">\n    <riv-loading-cover [loading]=\"loading\">\n      <ng-container *ngFor=\"let group of groups; trackBy: trackByHeader\">\n        <ng-container *ngIf=\"group.header\">\n          <span class=\"group-header\">\n            {{ group.header }}\n          </span>\n        </ng-container>\n        <ng-container *ngIf=\"group.options; let nodes\">\n          <ng-container *ngIf=\"nodes.length > 0; else empty\">\n            <ng-container *ngFor=\"let node of nodes; trackBy: trackByOption\">\n              <ng-container *ngIf=\"nodeTemplate; else standardTemplate\">\n                <button\n                  class=\"custom-single-select-node\"\n                  [disabled]=\"node.disabled\"\n                  (click)=\"selectedOptionChange.emit(node); open = false\"\n                  type=\"button\"\n                >\n                  <ng-container\n                    [ngTemplateOutlet]=\"nodeTemplate\"\n                    [ngTemplateOutletContext]=\"{ node }\"\n                  ></ng-container>\n                </button>\n              </ng-container>\n              <ng-template #standardTemplate>\n                <button\n                  class=\"single-select-node\"\n                  [class.selected]=\"node?.id === selectedOption?.id\"\n                  [class.disabled]=\"node?.disabled\"\n                  [disabled]=\"node?.disabled\"\n                  (click)=\"selectedOptionChange.emit(node); open = false\"\n                  type=\"button\"\n                >\n                  <riv-icon\n                    [name]=\"'Check'\"\n                    *ngIf=\"node?.id === selectedOption?.id\"\n                    [size]=\"16\"\n                  ></riv-icon>\n                  <span class=\"label\">\n                    <span class=\"label-title\">\n                      <riv-highlight\n                        [text]=\"node?.title || ''\"\n                        [indices]=\"node?.titleHighlightIndices || []\"\n                      ></riv-highlight>\n                    </span>\n                    <span *ngIf=\"node?.subtitle\" class=\"label-subtitle\">\n                      <riv-highlight\n                        [text]=\"node?.subtitle || ''\"\n                        [indices]=\"node?.subtitleHighlightIndices || []\"\n                      ></riv-highlight>\n                    </span>\n                  </span>\n                </button>\n              </ng-template>\n            </ng-container>\n          </ng-container>\n          <ng-template #empty>\n            <div class=\"empty\">\n              {{ noOptionsMessage }}\n            </div>\n          </ng-template>\n        </ng-container>\n      </ng-container>\n    </riv-loading-cover>\n  </div>\n  <div class=\"footer\">\n    <ng-content select=\"[footer]\"> </ng-content>\n  </div>\n</riv-callout>\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)}.trigger:focus{outline:none;border:var(--border-width) solid var(--purp-60)}.trigger:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}.value{font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-0);color:var(--type-light-high-contrast);padding:var(--size-small);flex-grow:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:pre}.value.placeholder{color:var(--type-light-disabled)}.chevron{display:flex;justify-content:center;align-items:center;padding:var(--size-small);background-color:var(--surface-light-2);border-left:var(--border-width) solid var(--border-light)}.filter{width:100%;outline:none;border:none;border-bottom:var(--border-width) solid var(--border-light);font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-0);color:var(--type-light-high-contrast);padding:var(--size-small)}.filter::placeholder{color:var(--type-light-disabled)}.options{max-height:50vh;max-width:calc(var(--base-grid-size) * 150);overflow-y:auto}.single-select-node{display:flex;align-items:center;overflow:hidden;flex-grow:1;text-align:left;padding:var(--size-xsmall) var(--size-xsmall) var(--size-xsmall) calc(var(--base-grid-size) * 6);width:100%}.single-select-node.selected{padding-left:var(--size-small)}.single-select-node:hover{background-color:var(--surface-light-2)}.single-select-node.disabled{cursor:default;background-color:var(--surface-light-0)}.single-select-node.disabled .label,.single-select-node.disabled .label-subtitle{color:var(--type-light-disabled)}.single-select-node riv-icon{flex-shrink:0}.single-select-node .label{font-size:calc(var(--base-grid-size) * 4);line-height:calc(var(--base-grid-size) * 6);overflow:hidden;text-overflow:ellipsis;white-space:pre;flex-grow:1;padding:0 calc(var(--base-grid-size) * 2);min-width:calc(var(--base-grid-size) * 16)}.single-select-node .label-subtitle{padding-left:var(--base-grid-size);color:var(--type-light-low-contrast)}.custom-single-select-node{display:block;width:100%;text-align:left}.empty{padding:var(--size-medium);text-align:center;color:var(--type-light-disabled)}.footer{border-top:var(--border-width) solid var(--border-light-blend);background-color:var(--surface-light-1);border-bottom-left-radius:var(--border-radius-medium);border-bottom-right-radius:var(--border-radius-medium)}.group-header{display:flex;padding:8px 8px 4px;align-items:flex-start;gap:10px;align-self:stretch;font:var(--title-01)}\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: CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "component", type: HighlightComponent, selector: "riv-highlight", inputs: ["text", "indices"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "size", "customSize", "strokeWidth"] }, { kind: "component", type: InputLabelComponent, selector: "riv-input-label", inputs: ["label", "help", "required", "labelActionText"], outputs: ["labelAction"] }, { kind: "component", type: LoadingCoverComponent, selector: "riv-loading-cover", inputs: ["loading", "loadingSize", "errorMessage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SingleSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'riv-single-select', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"triggerTemplate; else standardTrigger\">\n  <button\n    #customTriggerButton\n    (click)=\"allowedOpen()\"\n    [disabled]=\"disabled || locked\"\n    type=\"button\"\n  >\n    <ng-container\n      [ngTemplateOutlet]=\"triggerTemplate\"\n      [ngTemplateOutletContext]=\"{ selectedOption }\"\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    [labelActionText]=\"labelActionText\"\n    (labelAction)=\"labelAction.emit($event)\"\n  >\n    <button\n      #standardTriggerButton\n      class=\"trigger\"\n      (click)=\"allowedOpen()\"\n      [disabled]=\"disabled || locked\"\n      type=\"button\"\n    >\n      <ng-container *ngIf=\"selectedOption; else placeholderValue\">\n        <span class=\"value\">{{ selectedOption.title }}</span>\n      </ng-container>\n      <ng-template #placeholderValue>\n        <span class=\"value placeholder\">{{ placeholder }}</span>\n      </ng-template>\n      <span class=\"chevron\">\n        <riv-icon *ngIf=\"!locked\" [name]=\"'ChevronDown'\" [size]=\"16\"></riv-icon>\n        <riv-icon *ngIf=\"locked\" [name]=\"'Lock'\" [size]=\"16\"></riv-icon>\n      </span>\n    </button>\n  </riv-input-label>\n</ng-template>\n\n<riv-callout\n  *ngIf=\"open\"\n  [anchor]=\"getTrigger()\"\n  [theme]=\"'light'\"\n  [showCaret]=\"false\"\n  [allowedPositions]=\"[\n    'top-left',\n    'top-center',\n    'top-right',\n    'bottom-right',\n    'bottom-center',\n    'bottom-left'\n  ]\"\n  (close)=\"open = false\"\n>\n  <input\n    *ngIf=\"filterabilityOptions.enabled\"\n    #filter\n    class=\"filter\"\n    [placeholder]=\"getFilterPlaceholder()\"\n    [value]=\"filterQuery\"\n    (input)=\"filterQuery = filter.value; filterQueryChange.emit(filterQuery)\"\n  />\n  <div class=\"options\">\n    <riv-loading-cover [loading]=\"loading\">\n      <ng-container *ngFor=\"let group of groups; trackBy: trackByHeader\">\n        <ng-container *ngIf=\"group.header\">\n          <span class=\"group-header\">\n            {{ group.header }}\n          </span>\n        </ng-container>\n        <ng-container *ngIf=\"group.options; let nodes\">\n          <ng-container *ngIf=\"nodes.length > 0; else empty\">\n            <ng-container *ngFor=\"let node of nodes; trackBy: trackByOption\">\n              <ng-container *ngIf=\"nodeTemplate; else standardTemplate\">\n                <button\n                  class=\"custom-single-select-node\"\n                  [disabled]=\"node.disabled\"\n                  (click)=\"selectedOptionChange.emit(node); open = false\"\n                  type=\"button\"\n                >\n                  <ng-container\n                    [ngTemplateOutlet]=\"nodeTemplate\"\n                    [ngTemplateOutletContext]=\"{ node }\"\n                  ></ng-container>\n                </button>\n              </ng-container>\n              <ng-template #standardTemplate>\n                <button\n                  class=\"single-select-node\"\n                  [class.selected]=\"node?.id === selectedOption?.id\"\n                  [class.disabled]=\"node?.disabled\"\n                  [disabled]=\"node?.disabled\"\n                  (click)=\"selectedOptionChange.emit(node); open = false\"\n                  type=\"button\"\n                >\n                  <riv-icon\n                    [name]=\"'Check'\"\n                    *ngIf=\"node?.id === selectedOption?.id\"\n                    [size]=\"16\"\n                  ></riv-icon>\n                  <span class=\"label\">\n                    <span class=\"label-title\">\n                      <riv-highlight\n                        [text]=\"node?.title || ''\"\n                        [indices]=\"node?.titleHighlightIndices || []\"\n                      ></riv-highlight>\n                    </span>\n                    <span *ngIf=\"node?.subtitle\" class=\"label-subtitle\">\n                      <riv-highlight\n                        [text]=\"node?.subtitle || ''\"\n                        [indices]=\"node?.subtitleHighlightIndices || []\"\n                      ></riv-highlight>\n                    </span>\n                  </span>\n                </button>\n              </ng-template>\n            </ng-container>\n          </ng-container>\n          <ng-template #empty>\n            <div class=\"empty\">\n              {{ noOptionsMessage }}\n            </div>\n          </ng-template>\n        </ng-container>\n      </ng-container>\n    </riv-loading-cover>\n  </div>\n  <div class=\"footer\">\n    <ng-content select=\"[footer]\"> </ng-content>\n  </div>\n</riv-callout>\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)}.trigger:focus{outline:none;border:var(--border-width) solid var(--purp-60)}.trigger:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}.value{font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-0);color:var(--type-light-high-contrast);padding:var(--size-small);flex-grow:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:pre}.value.placeholder{color:var(--type-light-disabled)}.chevron{display:flex;justify-content:center;align-items:center;padding:var(--size-small);background-color:var(--surface-light-2);border-left:var(--border-width) solid var(--border-light)}.filter{width:100%;outline:none;border:none;border-bottom:var(--border-width) solid var(--border-light);font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-0);color:var(--type-light-high-contrast);padding:var(--size-small)}.filter::placeholder{color:var(--type-light-disabled)}.options{max-height:50vh;max-width:calc(var(--base-grid-size) * 150);overflow-y:auto}.single-select-node{display:flex;align-items:center;overflow:hidden;flex-grow:1;text-align:left;padding:var(--size-xsmall) var(--size-xsmall) var(--size-xsmall) calc(var(--base-grid-size) * 6);width:100%}.single-select-node.selected{padding-left:var(--size-small)}.single-select-node:hover{background-color:var(--surface-light-2)}.single-select-node.disabled{cursor:default;background-color:var(--surface-light-0)}.single-select-node.disabled .label,.single-select-node.disabled .label-subtitle{color:var(--type-light-disabled)}.single-select-node riv-icon{flex-shrink:0}.single-select-node .label{font-size:calc(var(--base-grid-size) * 4);line-height:calc(var(--base-grid-size) * 6);overflow:hidden;text-overflow:ellipsis;white-space:pre;flex-grow:1;padding:0 calc(var(--base-grid-size) * 2)}.single-select-node .label-subtitle{padding-left:var(--base-grid-size);color:var(--type-light-low-contrast)}.custom-single-select-node{display:block;width:100%;text-align:left}.empty{padding:var(--size-medium);text-align:center;color:var(--type-light-disabled)}.footer{border-top:var(--border-width) solid var(--border-light-blend);background-color:var(--surface-light-1);border-bottom-left-radius:var(--border-radius-medium);border-bottom-right-radius:var(--border-radius-medium)}.group-header{display:flex;padding:8px 8px 4px;align-items:flex-start;gap:10px;align-self:stretch;font:var(--title-01)}\n"] }]
+            args: [{ selector: 'riv-single-select', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"triggerTemplate; else standardTrigger\">\n  <button\n    #customTriggerButton\n    (click)=\"allowedOpen()\"\n    [disabled]=\"disabled || locked\"\n    type=\"button\"\n  >\n    <ng-container\n      [ngTemplateOutlet]=\"triggerTemplate\"\n      [ngTemplateOutletContext]=\"{ selectedOption }\"\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    [labelActionText]=\"labelActionText\"\n    (labelAction)=\"labelAction.emit($event)\"\n  >\n    <button\n      #standardTriggerButton\n      class=\"trigger\"\n      (click)=\"allowedOpen()\"\n      [disabled]=\"disabled || locked\"\n      type=\"button\"\n    >\n      <ng-container *ngIf=\"selectedOption; else placeholderValue\">\n        <span class=\"value\">{{ selectedOption.title }}</span>\n      </ng-container>\n      <ng-template #placeholderValue>\n        <span class=\"value placeholder\">{{ placeholder }}</span>\n      </ng-template>\n      <span class=\"chevron\">\n        <riv-icon *ngIf=\"!locked\" [name]=\"'ChevronDown'\" [size]=\"16\"></riv-icon>\n        <riv-icon *ngIf=\"locked\" [name]=\"'Lock'\" [size]=\"16\"></riv-icon>\n      </span>\n    </button>\n  </riv-input-label>\n</ng-template>\n\n<riv-callout\n  *ngIf=\"open\"\n  [anchor]=\"getTrigger()\"\n  [theme]=\"'light'\"\n  [showCaret]=\"false\"\n  [allowedPositions]=\"[\n    'top-left',\n    'top-center',\n    'top-right',\n    'bottom-right',\n    'bottom-center',\n    'bottom-left'\n  ]\"\n  (close)=\"open = false\"\n>\n  <input\n    *ngIf=\"filterabilityOptions.enabled\"\n    #filter\n    class=\"filter\"\n    [placeholder]=\"getFilterPlaceholder()\"\n    [value]=\"filterQuery\"\n    (input)=\"filterQuery = filter.value; filterQueryChange.emit(filterQuery)\"\n  />\n  <div class=\"options\">\n    <riv-loading-cover [loading]=\"loading\">\n      <ng-container *ngFor=\"let group of groups; trackBy: trackByHeader\">\n        <ng-container *ngIf=\"group.header\">\n          <span class=\"group-header\">\n            {{ group.header }}\n          </span>\n        </ng-container>\n        <ng-container *ngIf=\"group.options; let nodes\">\n          <ng-container *ngIf=\"nodes.length > 0; else empty\">\n            <ng-container *ngFor=\"let node of nodes; trackBy: trackByOption\">\n              <ng-container *ngIf=\"nodeTemplate; else standardTemplate\">\n                <button\n                  class=\"custom-single-select-node\"\n                  [disabled]=\"node.disabled\"\n                  (click)=\"selectedOptionChange.emit(node); open = false\"\n                  type=\"button\"\n                >\n                  <ng-container\n                    [ngTemplateOutlet]=\"nodeTemplate\"\n                    [ngTemplateOutletContext]=\"{ node }\"\n                  ></ng-container>\n                </button>\n              </ng-container>\n              <ng-template #standardTemplate>\n                <button\n                  class=\"single-select-node\"\n                  [class.selected]=\"node?.id === selectedOption?.id\"\n                  [class.disabled]=\"node?.disabled\"\n                  [disabled]=\"node?.disabled\"\n                  (click)=\"selectedOptionChange.emit(node); open = false\"\n                  type=\"button\"\n                >\n                  <riv-icon\n                    [name]=\"'Check'\"\n                    *ngIf=\"node?.id === selectedOption?.id\"\n                    [size]=\"16\"\n                  ></riv-icon>\n                  <span class=\"label\">\n                    <span class=\"label-title\">\n                      <riv-highlight\n                        [text]=\"node?.title || ''\"\n                        [indices]=\"node?.titleHighlightIndices || []\"\n                      ></riv-highlight>\n                    </span>\n                    <span *ngIf=\"node?.subtitle\" class=\"label-subtitle\">\n                      <riv-highlight\n                        [text]=\"node?.subtitle || ''\"\n                        [indices]=\"node?.subtitleHighlightIndices || []\"\n                      ></riv-highlight>\n                    </span>\n                  </span>\n                </button>\n              </ng-template>\n            </ng-container>\n          </ng-container>\n          <ng-template #empty>\n            <div class=\"empty\">\n              {{ noOptionsMessage }}\n            </div>\n          </ng-template>\n        </ng-container>\n      </ng-container>\n    </riv-loading-cover>\n  </div>\n  <div class=\"footer\">\n    <ng-content select=\"[footer]\"> </ng-content>\n  </div>\n</riv-callout>\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)}.trigger:focus{outline:none;border:var(--border-width) solid var(--purp-60)}.trigger:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}.value{font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-0);color:var(--type-light-high-contrast);padding:var(--size-small);flex-grow:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:pre}.value.placeholder{color:var(--type-light-disabled)}.chevron{display:flex;justify-content:center;align-items:center;padding:var(--size-small);background-color:var(--surface-light-2);border-left:var(--border-width) solid var(--border-light)}.filter{width:100%;outline:none;border:none;border-bottom:var(--border-width) solid var(--border-light);font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-0);color:var(--type-light-high-contrast);padding:var(--size-small)}.filter::placeholder{color:var(--type-light-disabled)}.options{max-height:50vh;max-width:calc(var(--base-grid-size) * 150);overflow-y:auto}.single-select-node{display:flex;align-items:center;overflow:hidden;flex-grow:1;text-align:left;padding:var(--size-xsmall) var(--size-xsmall) var(--size-xsmall) calc(var(--base-grid-size) * 6);width:100%}.single-select-node.selected{padding-left:var(--size-small)}.single-select-node:hover{background-color:var(--surface-light-2)}.single-select-node.disabled{cursor:default;background-color:var(--surface-light-0)}.single-select-node.disabled .label,.single-select-node.disabled .label-subtitle{color:var(--type-light-disabled)}.single-select-node riv-icon{flex-shrink:0}.single-select-node .label{font-size:calc(var(--base-grid-size) * 4);line-height:calc(var(--base-grid-size) * 6);overflow:hidden;text-overflow:ellipsis;white-space:pre;flex-grow:1;padding:0 calc(var(--base-grid-size) * 2);min-width:calc(var(--base-grid-size) * 16)}.single-select-node .label-subtitle{padding-left:var(--base-grid-size);color:var(--type-light-low-contrast)}.custom-single-select-node{display:block;width:100%;text-align:left}.empty{padding:var(--size-medium);text-align:center;color:var(--type-light-disabled)}.footer{border-top:var(--border-width) solid var(--border-light-blend);background-color:var(--surface-light-1);border-bottom-left-radius:var(--border-radius-medium);border-bottom-right-radius:var(--border-radius-medium)}.group-header{display:flex;padding:8px 8px 4px;align-items:flex-start;gap:10px;align-self:stretch;font:var(--title-01)}\n"] }]
         }], propDecorators: { groups: [{
                 type: Input
             }], selectedOption: [{
@@ -2188,10 +2188,10 @@ class DataTableCellComponent {
     }
 }
 DataTableCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DataTableCellComponent, deps: [{ token: DataTableRowComponent }], target: i0.ɵɵFactoryTarget.Component });
-DataTableCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DataTableCellComponent, selector: "[riv-data-table-cell]", host: { properties: { "class.sub-cell": "this.subCell" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{padding:var(--size-large) 0;text-align:right}:host.sub-cell{padding-top:0;padding-left:var(--size-xlarge)}:host:first-child{position:sticky;left:0;z-index:1;background-color:var(--surface-light-0);text-align:left}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+DataTableCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DataTableCellComponent, selector: "[riv-data-table-cell]", host: { properties: { "class.sub-cell": "this.subCell" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{padding:var(--size-large) 0;text-align:right}:host.sub-cell{padding-top:0;padding-left:var(--size-xlarge)}:host:first-child{text-align:left}@media screen{:host:first-child{position:sticky;left:0;z-index:1;background-color:var(--surface-light-0)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DataTableCellComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: '[riv-data-table-cell]', template: '<ng-content></ng-content>', styles: [":host{padding:var(--size-large) 0;text-align:right}:host.sub-cell{padding-top:0;padding-left:var(--size-xlarge)}:host:first-child{position:sticky;left:0;z-index:1;background-color:var(--surface-light-0);text-align:left}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: '[riv-data-table-cell]', template: '<ng-content></ng-content>', styles: [":host{padding:var(--size-large) 0;text-align:right}:host.sub-cell{padding-top:0;padding-left:var(--size-xlarge)}:host:first-child{text-align:left}@media screen{:host:first-child{position:sticky;left:0;z-index:1;background-color:var(--surface-light-0)}}\n"] }]
         }], ctorParameters: function () { return [{ type: DataTableRowComponent }]; }, propDecorators: { subCell: [{
                 type: HostBinding,
                 args: ['class.sub-cell']
@@ -2200,10 +2200,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
 class DataTableHeaderCellComponent {
 }
 DataTableHeaderCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DataTableHeaderCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DataTableHeaderCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DataTableHeaderCellComponent, selector: "[riv-data-table-header-cell]", ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{padding:var(--size-large) 0;font-weight:var(--font-weight-heavy);text-align:right}:host:first-child{position:sticky;left:0;z-index:1;background-color:var(--surface-light-0);text-align:left}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+DataTableHeaderCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DataTableHeaderCellComponent, selector: "[riv-data-table-header-cell]", ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{padding:var(--size-large) 0;font-weight:var(--font-weight-heavy);text-align:right}:host:first-child{text-align:left}@media screen{:host:first-child{position:sticky;left:0;z-index:1;background-color:var(--surface-light-0)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DataTableHeaderCellComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: '[riv-data-table-header-cell]', template: '<ng-content></ng-content>', styles: [":host{padding:var(--size-large) 0;font-weight:var(--font-weight-heavy);text-align:right}:host:first-child{position:sticky;left:0;z-index:1;background-color:var(--surface-light-0);text-align:left}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: '[riv-data-table-header-cell]', template: '<ng-content></ng-content>', styles: [":host{padding:var(--size-large) 0;font-weight:var(--font-weight-heavy);text-align:right}:host:first-child{text-align:left}@media screen{:host:first-child{position:sticky;left:0;z-index:1;background-color:var(--surface-light-0)}}\n"] }]
         }] });
 
 class DataTableComponent {