@rivet-health/design-system 7.2.0 → 7.2.1

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

@@ -1444,6 +1444,7 @@ class NumberFieldComponent extends InputLabelComponent {
         this.placeholder = '';
         this.state = 'valid';
         this.maximumFractionDigits = 0;
+        this.minimumFractionDigits = 0;
         this.min = -Infinity;
         this.max = Infinity;
         this.align = 'left';
@@ -1454,7 +1455,7 @@ class NumberFieldComponent extends InputLabelComponent {
         if (NumberFieldComponent.clean(v, this.maximumFractionDigits, this.min, this.max) ===
             NumberFieldComponent.clean(this._text, this.maximumFractionDigits, this.min, this.max))
             return;
-        this._text = NumberFieldComponent.format(v, this.maximumFractionDigits, this.min, this.max);
+        this._text = NumberFieldComponent.format(v, this.minimumFractionDigits, this.maximumFractionDigits, this.min, this.max);
     }
     set text(t) {
         this._text = t;
@@ -1464,11 +1465,11 @@ class NumberFieldComponent extends InputLabelComponent {
         return this._text;
     }
     blur() {
-        this._text = NumberFieldComponent.format(this._text, this.maximumFractionDigits, this.min, this.max);
+        this._text = NumberFieldComponent.format(this._text, this.minimumFractionDigits, this.maximumFractionDigits, this.min, this.max);
     }
 }
 NumberFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NumberFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-NumberFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NumberFieldComponent, selector: "riv-number-field", inputs: { disabled: "disabled", readonly: "readonly", placeholder: "placeholder", state: "state", maximumFractionDigits: "maximumFractionDigits", min: "min", max: "max", align: "align", value: "value" }, outputs: { valueChange: "valueChange" }, usesInheritance: true, ngImport: i0, template: "<riv-input-label\n  [label]=\"label\"\n  [help]=\"help\"\n  [required]=\"required\"\n  [labelActionText]=\"labelActionText\"\n  (labelAction)=\"labelAction.emit($event)\"\n>\n  <input\n    #input\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    [style.textAlign]=\"align\"\n    autocomplete=\"off\"\n    autocorrect=\"off\"\n    autocapitalize=\"off\"\n    spellcheck=\"false\"\n    (blur)=\"blur()\"\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)}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)}\n"], dependencies: [{ kind: "component", type: InputLabelComponent, selector: "riv-input-label", inputs: ["label", "help", "required", "labelActionText"], outputs: ["labelAction"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+NumberFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NumberFieldComponent, selector: "riv-number-field", inputs: { disabled: "disabled", readonly: "readonly", placeholder: "placeholder", state: "state", maximumFractionDigits: "maximumFractionDigits", minimumFractionDigits: "minimumFractionDigits", min: "min", max: "max", align: "align", value: "value" }, outputs: { valueChange: "valueChange" }, usesInheritance: true, ngImport: i0, template: "<riv-input-label\n  [label]=\"label\"\n  [help]=\"help\"\n  [required]=\"required\"\n  [labelActionText]=\"labelActionText\"\n  (labelAction)=\"labelAction.emit($event)\"\n>\n  <input\n    #input\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    [style.textAlign]=\"align\"\n    autocomplete=\"off\"\n    autocorrect=\"off\"\n    autocapitalize=\"off\"\n    spellcheck=\"false\"\n    (blur)=\"blur()\"\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)}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)}\n"], dependencies: [{ kind: "component", type: InputLabelComponent, selector: "riv-input-label", inputs: ["label", "help", "required", "labelActionText"], outputs: ["labelAction"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NumberFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-number-field', changeDetection: ChangeDetectionStrategy.OnPush, template: "<riv-input-label\n  [label]=\"label\"\n  [help]=\"help\"\n  [required]=\"required\"\n  [labelActionText]=\"labelActionText\"\n  (labelAction)=\"labelAction.emit($event)\"\n>\n  <input\n    #input\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    [style.textAlign]=\"align\"\n    autocomplete=\"off\"\n    autocorrect=\"off\"\n    autocapitalize=\"off\"\n    spellcheck=\"false\"\n    (blur)=\"blur()\"\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)}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)}\n"] }]
@@ -1482,6 +1483,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }], maximumFractionDigits: [{
                 type: Input
+            }], minimumFractionDigits: [{
+                type: Input
             }], min: [{
                 type: Input
             }], max: [{
@@ -1518,11 +1521,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
         return Math.max(min, Math.min(max, cleaned));
     }
     NumberFieldComponent.clean = clean;
-    function format(v, maximumFractionDigits, min, max) {
+    function format(v, minimumFractionDigits, maximumFractionDigits, min, max) {
         const cleaned = clean(v, maximumFractionDigits, min, max);
         if (cleaned === null)
             return '';
-        return new Intl.NumberFormat('en-US', { maximumFractionDigits }).format(cleaned);
+        return new Intl.NumberFormat('en-US', {
+            minimumFractionDigits,
+            maximumFractionDigits,
+        }).format(cleaned);
     }
     NumberFieldComponent.format = format;
 })(NumberFieldComponent || (NumberFieldComponent = {}));
@@ -1531,16 +1537,19 @@ class CurrencyFieldComponent extends NumberFieldComponent {
     constructor() {
         super(...arguments);
         this.placeholder = '0.00';
+        this.minimumFractionDigits = 2;
         this.maximumFractionDigits = 2;
     }
 }
 CurrencyFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CurrencyFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-CurrencyFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CurrencyFieldComponent, selector: "riv-currency-field", inputs: { placeholder: "placeholder", maximumFractionDigits: "maximumFractionDigits" }, usesInheritance: true, ngImport: i0, template: "<riv-input-label\n  [label]=\"label\"\n  [help]=\"help\"\n  [required]=\"required\"\n  [labelActionText]=\"labelActionText\"\n  (labelAction)=\"labelAction.emit($event)\"\n>\n  <span class=\"prefix\">$</span>\n  <input\n    #input\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    [style.textAlign]=\"align\"\n    autocomplete=\"off\"\n    autocorrect=\"off\"\n    autocapitalize=\"off\"\n    spellcheck=\"false\"\n    (blur)=\"blur()\"\n  />\n</riv-input-label>\n", styles: [":host{position:relative}.prefix{position:absolute;font:var(--input-medium);padding:var(--size-small)}input{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-small) var(--size-small) var(--size-small) var(--size-xlarge)}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)}\n"], dependencies: [{ kind: "component", type: InputLabelComponent, selector: "riv-input-label", inputs: ["label", "help", "required", "labelActionText"], outputs: ["labelAction"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CurrencyFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CurrencyFieldComponent, selector: "riv-currency-field", inputs: { placeholder: "placeholder", minimumFractionDigits: "minimumFractionDigits", maximumFractionDigits: "maximumFractionDigits" }, usesInheritance: true, ngImport: i0, template: "<riv-input-label\n  [label]=\"label\"\n  [help]=\"help\"\n  [required]=\"required\"\n  [labelActionText]=\"labelActionText\"\n  (labelAction)=\"labelAction.emit($event)\"\n>\n  <span class=\"prefix\">$</span>\n  <input\n    #input\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    [style.textAlign]=\"align\"\n    autocomplete=\"off\"\n    autocorrect=\"off\"\n    autocapitalize=\"off\"\n    spellcheck=\"false\"\n    (blur)=\"blur()\"\n  />\n</riv-input-label>\n", styles: [":host{position:relative}.prefix{position:absolute;font:var(--input-medium);padding:var(--size-small)}input{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-small) var(--size-small) var(--size-small) var(--size-xlarge)}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)}\n"], dependencies: [{ kind: "component", type: InputLabelComponent, selector: "riv-input-label", inputs: ["label", "help", "required", "labelActionText"], outputs: ["labelAction"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CurrencyFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-currency-field', changeDetection: ChangeDetectionStrategy.OnPush, template: "<riv-input-label\n  [label]=\"label\"\n  [help]=\"help\"\n  [required]=\"required\"\n  [labelActionText]=\"labelActionText\"\n  (labelAction)=\"labelAction.emit($event)\"\n>\n  <span class=\"prefix\">$</span>\n  <input\n    #input\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    [style.textAlign]=\"align\"\n    autocomplete=\"off\"\n    autocorrect=\"off\"\n    autocapitalize=\"off\"\n    spellcheck=\"false\"\n    (blur)=\"blur()\"\n  />\n</riv-input-label>\n", styles: [":host{position:relative}.prefix{position:absolute;font:var(--input-medium);padding:var(--size-small)}input{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-small) var(--size-small) var(--size-small) var(--size-xlarge)}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)}\n"] }]
         }], propDecorators: { placeholder: [{
                 type: Input
+            }], minimumFractionDigits: [{
+                type: Input
             }], maximumFractionDigits: [{
                 type: Input
             }] } });