@rivet-health/design-system 31.9.1 → 32.0.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, SimpleChange, forwardRef, Host, 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, 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,7 +7,6 @@ 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';
@@ -3954,270 +3953,6 @@ 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 ??
-                null;
-        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.
@@ -4735,6 +4470,90 @@ 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(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 RadioComponent {
     constructor() {
         this.checked = false;
@@ -10346,7 +10165,6 @@ RivModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.
         IconComponent,
         InputLabelComponent,
         IssueComponent,
-        LegacyFormApiDirective,
         LegendItemComponent,
         LinkComponent,
         LoadingComponent,
@@ -10439,7 +10257,6 @@ RivModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.
         IconComponent,
         InputLabelComponent,
         IssueComponent,
-        LegacyFormApiDirective,
         LegendItemComponent,
         LinkComponent,
         LoadingComponent,
@@ -10536,7 +10353,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         IconComponent,
                         InputLabelComponent,
                         IssueComponent,
-                        LegacyFormApiDirective,
                         LegendItemComponent,
                         LinkComponent,
                         LoadingComponent,
@@ -10632,7 +10448,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         IconComponent,
                         InputLabelComponent,
                         IssueComponent,
-                        LegacyFormApiDirective,
                         LegendItemComponent,
                         LinkComponent,
                         LoadingComponent,
@@ -10701,5 +10516,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, 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 };
+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 };
 //# sourceMappingURL=rivet-health-design-system.mjs.map