@rivet-health/design-system 31.8.1 → 31.9.0

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, Injectable, Inject, Pipe, Directive, Input, EventEmitter, Output, ViewChild, ViewContainerRef, HostListener, Self, HostBinding, Optional, ContentChild, ElementRef, ViewEncapsulation, ContentChildren, TemplateRef, NgModule } from '@angular/core';
+import { Component, ChangeDetectionStrategy, Injectable, Inject, Pipe, Directive, Input, EventEmitter, Output, ViewChild, ViewContainerRef, HostListener, Self, HostBinding, Optional, ContentChild, ElementRef, SimpleChange, forwardRef, Host, ViewEncapsulation, ContentChildren, TemplateRef, NgModule } from '@angular/core';
 import * as i1 from '@angular/common';
 import { DOCUMENT, DatePipe as DatePipe$1, DecimalPipe, CurrencyPipe, PercentPipe, CommonModule } from '@angular/common';
 import { BehaviorSubject, Subject, merge, scan, startWith, connectable, map, ReplaySubject, distinctUntilChanged, skip, filter, combineLatest, shareReplay, skipUntil, mergeScan, from, share, fromEvent, tap, switchMap, takeUntil, concatWith, of } from 'rxjs';
@@ -7,6 +7,7 @@ import { timeYears, timeYear, timeMonths, timeMonth, timeDays, timeDay, timeSund
 import { timeFormat, utcFormat } from 'd3-time-format';
 import { defaultsDeep, sortBy, isNumber, flattenDeep, debounce, isEqual, cloneDeep, orderBy, range, toInteger, difference, union, sum } from 'lodash';
 import Fuse from 'fuse.js';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { query, style, animate, trigger, transition, group } from '@angular/animations';
 import * as i2 from '@angular/router';
 import { RouterModule } from '@angular/router';
@@ -3953,6 +3954,269 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
     DateComponent.Sizes = ['small', 'medium', 'large'];
 })(DateComponent || (DateComponent = {}));
 
+class PhoneFieldComponent extends TextFieldComponent {
+    constructor() {
+        super(...arguments);
+        this.placeholder = '(123) 456-7890';
+        this.type = 'tel';
+        this.maxLength = 17;
+    }
+    setText() {
+        if (PhoneFieldComponent.clean(this._value) ===
+            PhoneFieldComponent.clean(this._text))
+            return;
+        this._text = PhoneFieldComponent.format(this._value);
+    }
+    set text(t) {
+        this._text = t;
+        this.valueChange.emit(PhoneFieldComponent.clean(t));
+    }
+    get text() {
+        return this._text;
+    }
+    inputBlur() {
+        this._text = PhoneFieldComponent.format(this._text);
+        this.blur.emit(PhoneFieldComponent.clean(this._text));
+    }
+}
+PhoneFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PhoneFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+PhoneFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PhoneFieldComponent, selector: "riv-phone-field", inputs: { placeholder: "placeholder", type: "type", maxLength: "maxLength" }, usesInheritance: true, ngImport: i0, template: "<riv-input-label\n  [label]=\"label\"\n  [help]=\"help\"\n  [required]=\"required\"\n  [labelActionText]=\"labelActionText\"\n  [state]=\"state\"\n  [errorMessage]=\"errorMessage\"\n  (labelAction)=\"labelAction.emit($event)\"\n>\n  <input\n    #input\n    [name]=\"name\"\n    [placeholder]=\"placeholder\"\n    [type]=\"type\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [value]=\"text\"\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)}input::placeholder{color:var(--type-light-disabled)}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)}input.large{font:var(--input-large);padding:var(--size-medium)}\n"], dependencies: [{ kind: "directive", type: AutoFocusDirective, selector: "[riv-auto-focus]", inputs: ["riv-auto-focus"] }, { kind: "component", type: 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: "14.3.0", ngImport: i0, type: PhoneFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'riv-phone-field', changeDetection: ChangeDetectionStrategy.OnPush, template: "<riv-input-label\n  [label]=\"label\"\n  [help]=\"help\"\n  [required]=\"required\"\n  [labelActionText]=\"labelActionText\"\n  [state]=\"state\"\n  [errorMessage]=\"errorMessage\"\n  (labelAction)=\"labelAction.emit($event)\"\n>\n  <input\n    #input\n    [name]=\"name\"\n    [placeholder]=\"placeholder\"\n    [type]=\"type\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [value]=\"text\"\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)}input::placeholder{color:var(--type-light-disabled)}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)}input.large{font:var(--input-large);padding:var(--size-medium)}\n"] }]
+        }], propDecorators: { placeholder: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], maxLength: [{
+                type: Input
+            }] } });
+(function (PhoneFieldComponent) {
+    function clean(v) {
+        const digits = v.replace(/\D/g, '');
+        if (digits.length >= 11 && digits[0] === '1') {
+            return digits.slice(0, 11);
+        }
+        return digits.length > 10 ? digits.slice(0, 10) : digits;
+    }
+    PhoneFieldComponent.clean = clean;
+    function format(value) {
+        const cleaned = clean(value);
+        if (!cleaned)
+            return '';
+        function formatBody(v) {
+            if (v.length <= 3) {
+                return v;
+            }
+            else if (v.length <= 6) {
+                return `(${v.slice(0, 3)}) ${v.slice(3)}`;
+            }
+            else {
+                return `(${v.slice(0, 3)}) ${v.slice(3, 6)}-${v.slice(6, 10)}`;
+            }
+        }
+        if (cleaned.length === 11) {
+            return `1 ${formatBody(cleaned.slice(1))}`;
+        }
+        return formatBody(cleaned);
+    }
+    PhoneFieldComponent.format = format;
+})(PhoneFieldComponent || (PhoneFieldComponent = {}));
+
+class PercentageFieldComponent extends NumberFieldComponent {
+    constructor() {
+        super(...arguments);
+        this.align = 'right';
+    }
+}
+PercentageFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PercentageFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+PercentageFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PercentageFieldComponent, selector: "riv-percentage-field", inputs: { align: "align" }, usesInheritance: true, ngImport: i0, template: "<riv-input-label\n  [label]=\"label\"\n  [help]=\"help\"\n  [required]=\"required\"\n  [state]=\"state\"\n  [errorMessage]=\"errorMessage\"\n  [labelActionText]=\"labelActionText\"\n  (labelAction)=\"labelAction.emit($event)\"\n>\n  <input\n    #input\n    [name]=\"name\"\n    [placeholder]=\"placeholder\"\n    type=\"text\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [value]=\"text\"\n    (input)=\"text = input.value\"\n    [class.warning]=\"state === 'warning'\"\n    [class.error]=\"state === 'error'\"\n    [class.large]=\"size === 'large'\"\n    [style.textAlign]=\"align\"\n    [riv-auto-focus]=\"autoFocus\"\n    autocomplete=\"off\"\n    autocorrect=\"off\"\n    autocapitalize=\"off\"\n    spellcheck=\"false\"\n    (blur)=\"inputBlur()\"\n  />\n  <span class=\"suffix\" [class.large]=\"size === 'large'\">%</span>\n</riv-input-label>\n", styles: [":host{position:relative}.suffix{position:absolute;right:0;font:var(--input-medium);padding:var(--size-small)}.suffix.large{font:var(--input-large)}input{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-small) var(--size-xlarge) var(--size-small) var(--size-medium)}input::placeholder{color:var(--type-light-disabled)}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.large{font:var(--input-large);padding:var(--size-medium) var(--size-xlarge) var(--size-medium) var(--size-medium)}\n"], dependencies: [{ kind: "directive", type: AutoFocusDirective, selector: "[riv-auto-focus]", inputs: ["riv-auto-focus"] }, { kind: "component", type: 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: "14.3.0", ngImport: i0, type: PercentageFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'riv-percentage-field', changeDetection: ChangeDetectionStrategy.OnPush, template: "<riv-input-label\n  [label]=\"label\"\n  [help]=\"help\"\n  [required]=\"required\"\n  [state]=\"state\"\n  [errorMessage]=\"errorMessage\"\n  [labelActionText]=\"labelActionText\"\n  (labelAction)=\"labelAction.emit($event)\"\n>\n  <input\n    #input\n    [name]=\"name\"\n    [placeholder]=\"placeholder\"\n    type=\"text\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [value]=\"text\"\n    (input)=\"text = input.value\"\n    [class.warning]=\"state === 'warning'\"\n    [class.error]=\"state === 'error'\"\n    [class.large]=\"size === 'large'\"\n    [style.textAlign]=\"align\"\n    [riv-auto-focus]=\"autoFocus\"\n    autocomplete=\"off\"\n    autocorrect=\"off\"\n    autocapitalize=\"off\"\n    spellcheck=\"false\"\n    (blur)=\"inputBlur()\"\n  />\n  <span class=\"suffix\" [class.large]=\"size === 'large'\">%</span>\n</riv-input-label>\n", styles: [":host{position:relative}.suffix{position:absolute;right:0;font:var(--input-medium);padding:var(--size-small)}.suffix.large{font:var(--input-large)}input{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-small) var(--size-xlarge) var(--size-small) var(--size-medium)}input::placeholder{color:var(--type-light-disabled)}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.large{font:var(--input-large);padding:var(--size-medium) var(--size-xlarge) var(--size-medium) var(--size-medium)}\n"] }]
+        }], propDecorators: { align: [{
+                type: Input
+            }] } });
+
+function toString(value) {
+    if (value === null || value === undefined) {
+        return '';
+    }
+    if (typeof value === 'number') {
+        return value.toString();
+    }
+    return value;
+}
+function toNumber(value) {
+    if (value === null || value === undefined || value === '') {
+        return null;
+    }
+    if (typeof value === 'string') {
+        const parsed = Number(value);
+        return isNaN(parsed) ? null : parsed;
+    }
+    return value;
+}
+function isStringField(component) {
+    return (component instanceof TextFieldComponent ||
+        component instanceof AlphabeticFieldComponent ||
+        component instanceof PhoneFieldComponent);
+}
+/**
+ * Directive that adds Angular Forms API compatibility to Design System input
+ * components. Implements ControlValueAccessor to enable ngModel and form
+ * validation integration.
+ *
+ * Generally, the simpler `value`/`valueChange` API is sufficient for use cases
+ * in new code; there are some older corners of Rivet's codebase that rely
+ * heavily on the Angular Forms API, which Rivet's original input components
+ * implemented (incompletely/haphazardly), so this directive serves as a bridge
+ * for ease of migration to design system input components in those areas.
+ *
+ * Example usage:
+ * ```html
+ * <riv-text-field
+ *   riv-legacy-form-api
+ *   label="Name"
+ *   [(ngModel)]="name"
+ *   #nameModel="ngModel"
+ * ></riv-text-field>
+ * ```
+ */
+class LegacyFormApiDirective {
+    constructor(rivTextField, rivNumberField, rivCurrencyField, rivPercentageField, rivAlphabeticField, rivPhoneField) {
+        this.rivTextField = rivTextField;
+        this.rivNumberField = rivNumberField;
+        this.rivCurrencyField = rivCurrencyField;
+        this.rivPercentageField = rivPercentageField;
+        this.rivAlphabeticField = rivAlphabeticField;
+        this.rivPhoneField = rivPhoneField;
+        this.hostComponent = null;
+        this.onChange = () => { };
+        this.onTouched = () => { };
+    }
+    ngOnInit() {
+        this.detectAndBindHostComponent();
+    }
+    ngOnDestroy() {
+        this.valueChangeSubscription?.unsubscribe();
+    }
+    detectAndBindHostComponent() {
+        this.hostComponent =
+            this.rivTextField ||
+                this.rivNumberField ||
+                this.rivCurrencyField ||
+                this.rivPercentageField ||
+                this.rivAlphabeticField ||
+                this.rivPhoneField;
+        if (!this.hostComponent) {
+            // eslint-disable-next-line no-console
+            console.warn('LegacyFormApi directive: No supported component found as host');
+            return;
+        }
+        if (isStringField(this.hostComponent)) {
+            this.valueChangeSubscription = this.hostComponent.valueChange.subscribe((value) => {
+                this.onChange(value);
+                this.onTouched();
+            });
+        }
+        else {
+            this.valueChangeSubscription = this.hostComponent.valueChange.subscribe((value) => {
+                this.onChange(value);
+                this.onTouched();
+            });
+        }
+    }
+    /*
+      ControlValueAccessor implementation
+      ===================================
+  
+      Note: Setting properties programmatically on Angular components does not
+      trigger their ngOnChanges lifecycle hook to run (this only happens when
+      changes happen through the templating system), even if those properties are
+      `@Input()`s, so we have to call it manually.
+    */
+    writeValue(value) {
+        if (!this.hostComponent) {
+            return;
+        }
+        if (isStringField(this.hostComponent)) {
+            const stringValue = toString(value);
+            this.hostComponent.value = stringValue;
+            this.hostComponent.ngOnChanges({
+                value: new SimpleChange(undefined, stringValue, false),
+            });
+        }
+        else {
+            const numberValue = toNumber(value);
+            this.hostComponent.value = numberValue;
+            this.hostComponent.ngOnChanges({
+                value: new SimpleChange(undefined, numberValue, false),
+            });
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        if (!this.hostComponent) {
+            return;
+        }
+        this.hostComponent.disabled = isDisabled;
+        this.hostComponent.ngOnChanges({
+            disabled: new SimpleChange(undefined, isDisabled, false),
+        });
+    }
+}
+LegacyFormApiDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LegacyFormApiDirective, deps: [{ token: TextFieldComponent, host: true, optional: true }, { token: NumberFieldComponent, host: true, optional: true }, { token: CurrencyFieldComponent, host: true, optional: true }, { token: PercentageFieldComponent, host: true, optional: true }, { token: AlphabeticFieldComponent, host: true, optional: true }, { token: PhoneFieldComponent, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+LegacyFormApiDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: LegacyFormApiDirective, selector: "[riv-legacy-form-api]", providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => LegacyFormApiDirective),
+            multi: true,
+        },
+    ], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LegacyFormApiDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[riv-legacy-form-api]',
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => LegacyFormApiDirective),
+                            multi: true,
+                        },
+                    ],
+                }]
+        }], ctorParameters: function () { return [{ type: TextFieldComponent, decorators: [{
+                    type: Optional
+                }, {
+                    type: Host
+                }] }, { type: NumberFieldComponent, decorators: [{
+                    type: Optional
+                }, {
+                    type: Host
+                }] }, { type: CurrencyFieldComponent, decorators: [{
+                    type: Optional
+                }, {
+                    type: Host
+                }] }, { type: PercentageFieldComponent, decorators: [{
+                    type: Optional
+                }, {
+                    type: Host
+                }] }, { type: AlphabeticFieldComponent, decorators: [{
+                    type: Optional
+                }, {
+                    type: Host
+                }] }, { type: PhoneFieldComponent, decorators: [{
+                    type: Optional
+                }, {
+                    type: Host
+                }] }]; } });
+
 /**
  * A rich text input component that allows users to type text and mention other users by typing `@` followed by a name.
  * Uses a `contenteditable` div instead of a traditional input/textarea.
@@ -4470,90 +4734,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
     MentionsInputComponent.contentToPlainText = contentToPlainText;
 })(MentionsInputComponent || (MentionsInputComponent = {}));
 
-class PercentageFieldComponent extends NumberFieldComponent {
-    constructor() {
-        super(...arguments);
-        this.align = 'right';
-    }
-}
-PercentageFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PercentageFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-PercentageFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PercentageFieldComponent, selector: "riv-percentage-field", inputs: { align: "align" }, usesInheritance: true, ngImport: i0, template: "<riv-input-label\n  [label]=\"label\"\n  [help]=\"help\"\n  [required]=\"required\"\n  [state]=\"state\"\n  [errorMessage]=\"errorMessage\"\n  [labelActionText]=\"labelActionText\"\n  (labelAction)=\"labelAction.emit($event)\"\n>\n  <input\n    #input\n    [name]=\"name\"\n    [placeholder]=\"placeholder\"\n    type=\"text\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [value]=\"text\"\n    (input)=\"text = input.value\"\n    [class.warning]=\"state === 'warning'\"\n    [class.error]=\"state === 'error'\"\n    [class.large]=\"size === 'large'\"\n    [style.textAlign]=\"align\"\n    [riv-auto-focus]=\"autoFocus\"\n    autocomplete=\"off\"\n    autocorrect=\"off\"\n    autocapitalize=\"off\"\n    spellcheck=\"false\"\n    (blur)=\"inputBlur()\"\n  />\n  <span class=\"suffix\" [class.large]=\"size === 'large'\">%</span>\n</riv-input-label>\n", styles: [":host{position:relative}.suffix{position:absolute;right:0;font:var(--input-medium);padding:var(--size-small)}.suffix.large{font:var(--input-large)}input{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-small) var(--size-xlarge) var(--size-small) var(--size-medium)}input::placeholder{color:var(--type-light-disabled)}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.large{font:var(--input-large);padding:var(--size-medium) var(--size-xlarge) var(--size-medium) var(--size-medium)}\n"], dependencies: [{ kind: "directive", type: AutoFocusDirective, selector: "[riv-auto-focus]", inputs: ["riv-auto-focus"] }, { kind: "component", type: 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: "14.3.0", ngImport: i0, type: PercentageFieldComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'riv-percentage-field', changeDetection: ChangeDetectionStrategy.OnPush, template: "<riv-input-label\n  [label]=\"label\"\n  [help]=\"help\"\n  [required]=\"required\"\n  [state]=\"state\"\n  [errorMessage]=\"errorMessage\"\n  [labelActionText]=\"labelActionText\"\n  (labelAction)=\"labelAction.emit($event)\"\n>\n  <input\n    #input\n    [name]=\"name\"\n    [placeholder]=\"placeholder\"\n    type=\"text\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [value]=\"text\"\n    (input)=\"text = input.value\"\n    [class.warning]=\"state === 'warning'\"\n    [class.error]=\"state === 'error'\"\n    [class.large]=\"size === 'large'\"\n    [style.textAlign]=\"align\"\n    [riv-auto-focus]=\"autoFocus\"\n    autocomplete=\"off\"\n    autocorrect=\"off\"\n    autocapitalize=\"off\"\n    spellcheck=\"false\"\n    (blur)=\"inputBlur()\"\n  />\n  <span class=\"suffix\" [class.large]=\"size === 'large'\">%</span>\n</riv-input-label>\n", styles: [":host{position:relative}.suffix{position:absolute;right:0;font:var(--input-medium);padding:var(--size-small)}.suffix.large{font:var(--input-large)}input{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-small) var(--size-xlarge) var(--size-small) var(--size-medium)}input::placeholder{color:var(--type-light-disabled)}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.large{font:var(--input-large);padding:var(--size-medium) var(--size-xlarge) var(--size-medium) var(--size-medium)}\n"] }]
-        }], propDecorators: { align: [{
-                type: Input
-            }] } });
-
-class PhoneFieldComponent extends TextFieldComponent {
-    constructor() {
-        super(...arguments);
-        this.placeholder = '(123) 456-7890';
-        this.type = 'tel';
-        this.maxLength = 17;
-    }
-    setText() {
-        if (PhoneFieldComponent.clean(this._value) ===
-            PhoneFieldComponent.clean(this._text))
-            return;
-        this._text = PhoneFieldComponent.format(this._value);
-    }
-    set text(t) {
-        this._text = t;
-        this.valueChange.emit(PhoneFieldComponent.clean(t));
-    }
-    get text() {
-        return this._text;
-    }
-    inputBlur() {
-        this._text = PhoneFieldComponent.format(this._text);
-        this.blur.emit(PhoneFieldComponent.clean(this._text));
-    }
-}
-PhoneFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PhoneFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-PhoneFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PhoneFieldComponent, selector: "riv-phone-field", inputs: { placeholder: "placeholder", type: "type", maxLength: "maxLength" }, usesInheritance: true, ngImport: i0, template: "<riv-input-label\n  [label]=\"label\"\n  [help]=\"help\"\n  [required]=\"required\"\n  [labelActionText]=\"labelActionText\"\n  [state]=\"state\"\n  [errorMessage]=\"errorMessage\"\n  (labelAction)=\"labelAction.emit($event)\"\n>\n  <input\n    #input\n    [name]=\"name\"\n    [placeholder]=\"placeholder\"\n    [type]=\"type\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [value]=\"text\"\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)}input::placeholder{color:var(--type-light-disabled)}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)}input.large{font:var(--input-large);padding:var(--size-medium)}\n"], dependencies: [{ kind: "directive", type: AutoFocusDirective, selector: "[riv-auto-focus]", inputs: ["riv-auto-focus"] }, { kind: "component", type: 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: "14.3.0", ngImport: i0, type: PhoneFieldComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'riv-phone-field', changeDetection: ChangeDetectionStrategy.OnPush, template: "<riv-input-label\n  [label]=\"label\"\n  [help]=\"help\"\n  [required]=\"required\"\n  [labelActionText]=\"labelActionText\"\n  [state]=\"state\"\n  [errorMessage]=\"errorMessage\"\n  (labelAction)=\"labelAction.emit($event)\"\n>\n  <input\n    #input\n    [name]=\"name\"\n    [placeholder]=\"placeholder\"\n    [type]=\"type\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [value]=\"text\"\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)}input::placeholder{color:var(--type-light-disabled)}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)}input.large{font:var(--input-large);padding:var(--size-medium)}\n"] }]
-        }], propDecorators: { placeholder: [{
-                type: Input
-            }], type: [{
-                type: Input
-            }], maxLength: [{
-                type: Input
-            }] } });
-(function (PhoneFieldComponent) {
-    function clean(v) {
-        const digits = v.replace(/\D/g, '');
-        if (digits.length >= 11 && digits[0] === '1') {
-            return digits.slice(0, 11);
-        }
-        return digits.length > 10 ? digits.slice(0, 10) : digits;
-    }
-    PhoneFieldComponent.clean = clean;
-    function format(v) {
-        const cleaned = clean(v);
-        if (!cleaned)
-            return '';
-        function formatBody(v) {
-            if (v.length <= 3) {
-                return v;
-            }
-            else if (v.length <= 6) {
-                return `(${v.slice(0, 3)}) ${v.slice(3)}`;
-            }
-            else {
-                return `(${v.slice(0, 3)}) ${v.slice(3, 6)}-${v.slice(6, 10)}`;
-            }
-        }
-        if (cleaned.length === 11) {
-            return `1 ${formatBody(cleaned.slice(1))}`;
-        }
-        return formatBody(v);
-    }
-    PhoneFieldComponent.format = format;
-})(PhoneFieldComponent || (PhoneFieldComponent = {}));
-
 class RadioComponent {
     constructor() {
         this.checked = false;
@@ -10165,12 +10345,14 @@ RivModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.
         IconComponent,
         InputLabelComponent,
         IssueComponent,
+        LegacyFormApiDirective,
         LegendItemComponent,
         LinkComponent,
         LoadingComponent,
         LoadingCoverComponent,
         LockedTooltipDirective,
         LockScrollDirective,
+        MentionsInputComponent,
         MenuComponent,
         MenuDividerComponent,
         MenuItemComponent,
@@ -10214,7 +10396,6 @@ RivModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.
         TabsComponent,
         TextareaFieldComponent,
         TextFieldComponent,
-        MentionsInputComponent,
         TimeSeriesComponent,
         ToastActionComponent,
         ToastComponent,
@@ -10257,11 +10438,13 @@ RivModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.
         IconComponent,
         InputLabelComponent,
         IssueComponent,
+        LegacyFormApiDirective,
         LegendItemComponent,
         LinkComponent,
         LoadingComponent,
         LoadingCoverComponent,
         LockedTooltipDirective,
+        MentionsInputComponent,
         MenuComponent,
         MenuDividerComponent,
         MenuItemComponent,
@@ -10303,7 +10486,6 @@ RivModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.
         TabsComponent,
         TextareaFieldComponent,
         TextFieldComponent,
-        MentionsInputComponent,
         TimeSeriesComponent,
         ToastActionComponent,
         ToastComponent,
@@ -10353,12 +10535,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         IconComponent,
                         InputLabelComponent,
                         IssueComponent,
+                        LegacyFormApiDirective,
                         LegendItemComponent,
                         LinkComponent,
                         LoadingComponent,
                         LoadingCoverComponent,
                         LockedTooltipDirective,
                         LockScrollDirective,
+                        MentionsInputComponent,
                         MenuComponent,
                         MenuDividerComponent,
                         MenuItemComponent,
@@ -10402,7 +10586,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         TabsComponent,
                         TextareaFieldComponent,
                         TextFieldComponent,
-                        MentionsInputComponent,
                         TimeSeriesComponent,
                         ToastActionComponent,
                         ToastComponent,
@@ -10448,11 +10631,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         IconComponent,
                         InputLabelComponent,
                         IssueComponent,
+                        LegacyFormApiDirective,
                         LegendItemComponent,
                         LinkComponent,
                         LoadingComponent,
                         LoadingCoverComponent,
                         LockedTooltipDirective,
+                        MentionsInputComponent,
                         MenuComponent,
                         MenuDividerComponent,
                         MenuItemComponent,
@@ -10494,7 +10679,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         TabsComponent,
                         TextareaFieldComponent,
                         TextFieldComponent,
-                        MentionsInputComponent,
                         TimeSeriesComponent,
                         ToastActionComponent,
                         ToastComponent,
@@ -10516,5 +10700,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ANIMATION_CONSTANTS, AllViewsModalComponent, AlphabeticFieldComponent, AutoFocusDirective, BadgeComponent, BannerActionComponent, BannerComponent, ButtonComponent, ButtonGroupComponent, CalloutComponent, CardCheckboxComponent, Chart, ChartComponent, CheckboxComponent, CurrencyFieldComponent, DataTableCellComponent, DataTableComponent, DataTableHeaderCellComponent, DataTableRowComponent, DateComponent, DatePipe, DateRangeComponent, DaysPipe, DialogComponent, DollarsPipe, DonutComponent, DownloadService, EditViewComponent, FunnelChartComponent, HelpComponent, HighlightComponent, IconComponent, InputLabelComponent, IssueComponent, LegendItemComponent, LinkComponent, LoadingComponent, LoadingCoverComponent, LockedTooltipDirective, MentionsInputComponent, MenuComponent, MenuDividerComponent, MenuItemComponent, MetricComponent, ModalComponent, NotificationBadgeComponent, NumberFieldComponent, NumberPipe, OptionGroupPipe, OverlayDirective, OverlayOutletComponent, PercentageFieldComponent, PercentagePipe, PhoneFieldComponent, ProgressComponent, RadioComponent, RivModule, RivSelect, RivTable, RivViews, SVGTextTruncateDirective, SearchComponent, SelectComponent, SelectNodeComponent, SideSheetComponent, SimpleSelectComponent, SimpleTableCellComponent, SimpleTableComponent, SimpleTableHeaderCellComponent, SimpleTableRowComponent, SizeDirective, SmallCurrencyPipe, SrOnlyComponent, StackedColumnComponent, StackedRowComponent, SwitchCheckboxComponent, TabComponent, TableColumnSettingsComponent, TableColumnSettingsSideSheetComponent, TableComponent, TableCsvExportComponent, TableSearchColumnsComponent, TableSearchComponent, TabsComponent, TextFieldComponent, TextareaFieldComponent, TimeSeriesComponent, ToastActionComponent, ToastComponent, TooltipComponent, TooltipDirective, TrendComponent, TruncateComponent, ValidationMessageComponent, ViewMenuComponent, ViewsComponent, VisibilityDirective, ZeroStateComponent };
+export { ANIMATION_CONSTANTS, AllViewsModalComponent, AlphabeticFieldComponent, AutoFocusDirective, BadgeComponent, BannerActionComponent, BannerComponent, ButtonComponent, ButtonGroupComponent, CalloutComponent, CardCheckboxComponent, Chart, ChartComponent, CheckboxComponent, CurrencyFieldComponent, DataTableCellComponent, DataTableComponent, DataTableHeaderCellComponent, DataTableRowComponent, DateComponent, DatePipe, DateRangeComponent, DaysPipe, DialogComponent, DollarsPipe, DonutComponent, DownloadService, EditViewComponent, FunnelChartComponent, HelpComponent, HighlightComponent, IconComponent, InputLabelComponent, IssueComponent, LegacyFormApiDirective, LegendItemComponent, LinkComponent, LoadingComponent, LoadingCoverComponent, LockedTooltipDirective, MentionsInputComponent, MenuComponent, MenuDividerComponent, MenuItemComponent, MetricComponent, ModalComponent, NotificationBadgeComponent, NumberFieldComponent, NumberPipe, OptionGroupPipe, OverlayDirective, OverlayOutletComponent, PercentageFieldComponent, PercentagePipe, PhoneFieldComponent, ProgressComponent, RadioComponent, RivModule, RivSelect, RivTable, RivViews, SVGTextTruncateDirective, SearchComponent, SelectComponent, SelectNodeComponent, SideSheetComponent, SimpleSelectComponent, SimpleTableCellComponent, SimpleTableComponent, SimpleTableHeaderCellComponent, SimpleTableRowComponent, SizeDirective, SmallCurrencyPipe, SrOnlyComponent, StackedColumnComponent, StackedRowComponent, SwitchCheckboxComponent, TabComponent, TableColumnSettingsComponent, TableColumnSettingsSideSheetComponent, TableComponent, TableCsvExportComponent, TableSearchColumnsComponent, TableSearchComponent, TabsComponent, TextFieldComponent, TextareaFieldComponent, TimeSeriesComponent, ToastActionComponent, ToastComponent, TooltipComponent, TooltipDirective, TrendComponent, TruncateComponent, ValidationMessageComponent, ViewMenuComponent, ViewsComponent, VisibilityDirective, ZeroStateComponent };
 //# sourceMappingURL=rivet-health-design-system.mjs.map