@rivet-health/design-system 7.2.0 → 7.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/lib/input/alphabetic-field/alphabetic-field.component.mjs +6 -11
- package/esm2020/lib/input/currency-field/currency-field.component.mjs +6 -3
- package/esm2020/lib/input/number-field/number-field.component.mjs +25 -9
- package/esm2020/lib/input/percentage-field/percentage-field.component.mjs +3 -3
- package/esm2020/lib/input/text-field/text-field.component.mjs +14 -4
- package/fesm2015/rivet-health-design-system.mjs +48 -24
- package/fesm2015/rivet-health-design-system.mjs.map +1 -1
- package/fesm2020/rivet-health-design-system.mjs +48 -24
- package/fesm2020/rivet-health-design-system.mjs.map +1 -1
- package/lib/input/alphabetic-field/alphabetic-field.component.d.ts +2 -4
- package/lib/input/currency-field/currency-field.component.d.ts +2 -1
- package/lib/input/number-field/number-field.component.d.ts +8 -4
- package/lib/input/text-field/text-field.component.d.ts +7 -2
- package/package.json +1 -1
|
@@ -1103,7 +1103,9 @@ class TextFieldComponent extends InputLabelComponent {
|
|
|
1103
1103
|
this.state = 'valid';
|
|
1104
1104
|
this.casing = 'user';
|
|
1105
1105
|
this.type = 'text';
|
|
1106
|
+
this.size = 'medium';
|
|
1106
1107
|
this.valueChange = new EventEmitter();
|
|
1108
|
+
this.blur = new EventEmitter();
|
|
1107
1109
|
this._text = '';
|
|
1108
1110
|
}
|
|
1109
1111
|
set value(v) {
|
|
@@ -1127,18 +1129,19 @@ class TextFieldComponent extends InputLabelComponent {
|
|
|
1127
1129
|
get text() {
|
|
1128
1130
|
return this._text;
|
|
1129
1131
|
}
|
|
1130
|
-
|
|
1132
|
+
inputBlur() {
|
|
1131
1133
|
// Now that the user is done editing and has left the field, we can safely
|
|
1132
1134
|
// update the internal state to match the cleaned/formatted version of
|
|
1133
1135
|
// their input.
|
|
1134
1136
|
this._text = TextFieldComponent.format(this._text, this.casing);
|
|
1137
|
+
this.blur.emit(TextFieldComponent.clean(this._text, this.casing));
|
|
1135
1138
|
}
|
|
1136
1139
|
}
|
|
1137
1140
|
TextFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TextFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1138
|
-
TextFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TextFieldComponent, selector: "riv-text-field", inputs: { disabled: "disabled", readonly: "readonly", placeholder: "placeholder", state: "state", casing: "casing", type: "type", minLength: "minLength", maxLength: "maxLength", 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]=\"type\"\n [required]=\"required\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [value]=\"text\"\n (input)=\"text = input.value\"\n [attr.maxlength]=\"maxLength\"\n [attr.minlength]=\"minLength\"\n [class.warning]=\"state === 'warning'\"\n [class.error]=\"state === 'error'\"\n autocomplete=\"off\"\n autocorrect=\"off\"\n autocapitalize=\"off\"\n spellcheck=\"false\"\n (blur)=\"
|
|
1141
|
+
TextFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TextFieldComponent, selector: "riv-text-field", inputs: { disabled: "disabled", readonly: "readonly", placeholder: "placeholder", state: "state", casing: "casing", type: "type", size: "size", name: "name", minLength: "minLength", maxLength: "maxLength", value: "value" }, outputs: { valueChange: "valueChange", blur: "blur" }, 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 [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.large]=\"size === 'large'\"\n [attr.maxlength]=\"maxLength\"\n [attr.minlength]=\"minLength\"\n [class.warning]=\"state === 'warning'\"\n [class.error]=\"state === 'error'\"\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)}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)}input.large{font:var(--input-large);padding:var(--size-medium)}\n"], dependencies: [{ kind: "component", type: InputLabelComponent, selector: "riv-input-label", inputs: ["label", "help", "required", "labelActionText"], outputs: ["labelAction"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1139
1142
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TextFieldComponent, decorators: [{
|
|
1140
1143
|
type: Component,
|
|
1141
|
-
args: [{ selector: 'riv-text-field', changeDetection: ChangeDetectionStrategy.OnPush, template: "<riv-input-label\n [label]=\"label\"\n [help]=\"help\"\n [required]=\"required\"\n [labelActionText]=\"labelActionText\"\n (labelAction)=\"labelAction.emit($event)\"\n>\n <input\n #input\n [placeholder]=\"placeholder\"\n [type]=\"type\"\n [required]=\"required\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [value]=\"text\"\n (input)=\"text = input.value\"\n [attr.maxlength]=\"maxLength\"\n [attr.minlength]=\"minLength\"\n [class.warning]=\"state === 'warning'\"\n [class.error]=\"state === 'error'\"\n autocomplete=\"off\"\n autocorrect=\"off\"\n autocapitalize=\"off\"\n spellcheck=\"false\"\n (blur)=\"
|
|
1144
|
+
args: [{ selector: 'riv-text-field', changeDetection: ChangeDetectionStrategy.OnPush, template: "<riv-input-label\n [label]=\"label\"\n [help]=\"help\"\n [required]=\"required\"\n [labelActionText]=\"labelActionText\"\n (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.large]=\"size === 'large'\"\n [attr.maxlength]=\"maxLength\"\n [attr.minlength]=\"minLength\"\n [class.warning]=\"state === 'warning'\"\n [class.error]=\"state === 'error'\"\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)}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)}input.large{font:var(--input-large);padding:var(--size-medium)}\n"] }]
|
|
1142
1145
|
}], propDecorators: { disabled: [{
|
|
1143
1146
|
type: Input
|
|
1144
1147
|
}], readonly: [{
|
|
@@ -1151,6 +1154,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
1151
1154
|
type: Input
|
|
1152
1155
|
}], type: [{
|
|
1153
1156
|
type: Input
|
|
1157
|
+
}], size: [{
|
|
1158
|
+
type: Input
|
|
1159
|
+
}], name: [{
|
|
1160
|
+
type: Input
|
|
1154
1161
|
}], minLength: [{
|
|
1155
1162
|
type: Input
|
|
1156
1163
|
}], maxLength: [{
|
|
@@ -1159,6 +1166,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
1159
1166
|
type: Input
|
|
1160
1167
|
}], valueChange: [{
|
|
1161
1168
|
type: Output
|
|
1169
|
+
}], blur: [{
|
|
1170
|
+
type: Output
|
|
1162
1171
|
}] } });
|
|
1163
1172
|
(function (TextFieldComponent) {
|
|
1164
1173
|
TextFieldComponent.Casings = ['user', 'upper', 'lower'];
|
|
@@ -1171,6 +1180,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
1171
1180
|
'url',
|
|
1172
1181
|
];
|
|
1173
1182
|
TextFieldComponent.States = ['valid', 'warning', 'error'];
|
|
1183
|
+
TextFieldComponent.Sizes = ['medium', 'large'];
|
|
1174
1184
|
function clean(v, casing) {
|
|
1175
1185
|
switch (casing) {
|
|
1176
1186
|
case 'lower':
|
|
@@ -1191,10 +1201,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
1191
1201
|
})(TextFieldComponent || (TextFieldComponent = {}));
|
|
1192
1202
|
|
|
1193
1203
|
class AlphabeticFieldComponent extends TextFieldComponent {
|
|
1194
|
-
constructor() {
|
|
1195
|
-
super(...arguments);
|
|
1196
|
-
this.valueChange = new EventEmitter();
|
|
1197
|
-
}
|
|
1198
1204
|
set value(v) {
|
|
1199
1205
|
if (AlphabeticFieldComponent.clean(v, this.casing) ===
|
|
1200
1206
|
AlphabeticFieldComponent.clean(this._text, this.casing))
|
|
@@ -1208,19 +1214,18 @@ class AlphabeticFieldComponent extends TextFieldComponent {
|
|
|
1208
1214
|
get text() {
|
|
1209
1215
|
return this._text;
|
|
1210
1216
|
}
|
|
1211
|
-
|
|
1217
|
+
inputBlur() {
|
|
1212
1218
|
this._text = AlphabeticFieldComponent.format(this._text, this.casing);
|
|
1219
|
+
this.blur.emit(AlphabeticFieldComponent.clean(this._text, this.casing));
|
|
1213
1220
|
}
|
|
1214
1221
|
}
|
|
1215
1222
|
AlphabeticFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AlphabeticFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1216
|
-
AlphabeticFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: AlphabeticFieldComponent, selector: "riv-alphabetic-field", inputs: { value: "value" },
|
|
1223
|
+
AlphabeticFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: AlphabeticFieldComponent, selector: "riv-alphabetic-field", inputs: { value: "value" }, 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 [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.large]=\"size === 'large'\"\n [attr.maxlength]=\"maxLength\"\n [attr.minlength]=\"minLength\"\n [class.warning]=\"state === 'warning'\"\n [class.error]=\"state === 'error'\"\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)}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)}input.large{font:var(--input-large);padding:var(--size-medium)}\n"], dependencies: [{ kind: "component", type: InputLabelComponent, selector: "riv-input-label", inputs: ["label", "help", "required", "labelActionText"], outputs: ["labelAction"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1217
1224
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AlphabeticFieldComponent, decorators: [{
|
|
1218
1225
|
type: Component,
|
|
1219
|
-
args: [{ selector: 'riv-alphabetic-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]=\"type\"\n [required]=\"required\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [value]=\"text\"\n (input)=\"text = input.value\"\n [attr.maxlength]=\"maxLength\"\n [attr.minlength]=\"minLength\"\n [class.warning]=\"state === 'warning'\"\n [class.error]=\"state === 'error'\"\n autocomplete=\"off\"\n autocorrect=\"off\"\n autocapitalize=\"off\"\n spellcheck=\"false\"\n (blur)=\"
|
|
1226
|
+
args: [{ selector: 'riv-alphabetic-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 [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.large]=\"size === 'large'\"\n [attr.maxlength]=\"maxLength\"\n [attr.minlength]=\"minLength\"\n [class.warning]=\"state === 'warning'\"\n [class.error]=\"state === 'error'\"\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)}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)}input.large{font:var(--input-large);padding:var(--size-medium)}\n"] }]
|
|
1220
1227
|
}], propDecorators: { value: [{
|
|
1221
1228
|
type: Input
|
|
1222
|
-
}], valueChange: [{
|
|
1223
|
-
type: Output
|
|
1224
1229
|
}] } });
|
|
1225
1230
|
(function (AlphabeticFieldComponent) {
|
|
1226
1231
|
function clean(v, casing) {
|
|
@@ -1453,17 +1458,21 @@ class NumberFieldComponent extends InputLabelComponent {
|
|
|
1453
1458
|
this.placeholder = '';
|
|
1454
1459
|
this.state = 'valid';
|
|
1455
1460
|
this.maximumFractionDigits = 0;
|
|
1461
|
+
this.minimumFractionDigits = 0;
|
|
1456
1462
|
this.min = -Infinity;
|
|
1457
1463
|
this.max = Infinity;
|
|
1458
1464
|
this.align = 'left';
|
|
1465
|
+
this.size = 'medium';
|
|
1459
1466
|
this.valueChange = new EventEmitter();
|
|
1467
|
+
this.blur = new EventEmitter();
|
|
1460
1468
|
this._text = '';
|
|
1461
1469
|
}
|
|
1462
1470
|
set value(v) {
|
|
1463
|
-
|
|
1471
|
+
const value = typeof v === 'number' ? v.toString() : null;
|
|
1472
|
+
if (NumberFieldComponent.clean(value, this.maximumFractionDigits, this.min, this.max) ===
|
|
1464
1473
|
NumberFieldComponent.clean(this._text, this.maximumFractionDigits, this.min, this.max))
|
|
1465
1474
|
return;
|
|
1466
|
-
this._text = NumberFieldComponent.format(
|
|
1475
|
+
this._text = NumberFieldComponent.format(value, this.minimumFractionDigits, this.maximumFractionDigits, this.min, this.max);
|
|
1467
1476
|
}
|
|
1468
1477
|
set text(t) {
|
|
1469
1478
|
this._text = t;
|
|
@@ -1472,15 +1481,16 @@ class NumberFieldComponent extends InputLabelComponent {
|
|
|
1472
1481
|
get text() {
|
|
1473
1482
|
return this._text;
|
|
1474
1483
|
}
|
|
1475
|
-
|
|
1476
|
-
this._text = NumberFieldComponent.format(this._text, this.maximumFractionDigits, this.min, this.max);
|
|
1484
|
+
inputBlur() {
|
|
1485
|
+
this._text = NumberFieldComponent.format(this._text, this.minimumFractionDigits, this.maximumFractionDigits, this.min, this.max);
|
|
1486
|
+
this.blur.emit(NumberFieldComponent.clean(this._text, this.maximumFractionDigits, this.min, this.max));
|
|
1477
1487
|
}
|
|
1478
1488
|
}
|
|
1479
1489
|
NumberFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NumberFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1480
|
-
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)=\"
|
|
1490
|
+
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", size: "size", name: "name", value: "value" }, outputs: { valueChange: "valueChange", blur: "blur" }, 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 [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 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)}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)}input.large{font:var(--input-large);padding:var(--size-medium)}\n"], dependencies: [{ kind: "component", type: InputLabelComponent, selector: "riv-input-label", inputs: ["label", "help", "required", "labelActionText"], outputs: ["labelAction"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1481
1491
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NumberFieldComponent, decorators: [{
|
|
1482
1492
|
type: Component,
|
|
1483
|
-
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)=\"
|
|
1493
|
+
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 [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 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)}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)}input.large{font:var(--input-large);padding:var(--size-medium)}\n"] }]
|
|
1484
1494
|
}], propDecorators: { disabled: [{
|
|
1485
1495
|
type: Input
|
|
1486
1496
|
}], readonly: [{
|
|
@@ -1491,16 +1501,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
1491
1501
|
type: Input
|
|
1492
1502
|
}], maximumFractionDigits: [{
|
|
1493
1503
|
type: Input
|
|
1504
|
+
}], minimumFractionDigits: [{
|
|
1505
|
+
type: Input
|
|
1494
1506
|
}], min: [{
|
|
1495
1507
|
type: Input
|
|
1496
1508
|
}], max: [{
|
|
1497
1509
|
type: Input
|
|
1498
1510
|
}], align: [{
|
|
1499
1511
|
type: Input
|
|
1512
|
+
}], size: [{
|
|
1513
|
+
type: Input
|
|
1514
|
+
}], name: [{
|
|
1515
|
+
type: Input
|
|
1500
1516
|
}], value: [{
|
|
1501
1517
|
type: Input
|
|
1502
1518
|
}], valueChange: [{
|
|
1503
1519
|
type: Output
|
|
1520
|
+
}], blur: [{
|
|
1521
|
+
type: Output
|
|
1504
1522
|
}] } });
|
|
1505
1523
|
(function (NumberFieldComponent) {
|
|
1506
1524
|
NumberFieldComponent.Alignments = ['left', 'center', 'right'];
|
|
@@ -1527,11 +1545,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
1527
1545
|
return Math.max(min, Math.min(max, cleaned));
|
|
1528
1546
|
}
|
|
1529
1547
|
NumberFieldComponent.clean = clean;
|
|
1530
|
-
function format(v, maximumFractionDigits, min, max) {
|
|
1548
|
+
function format(v, minimumFractionDigits, maximumFractionDigits, min, max) {
|
|
1531
1549
|
const cleaned = clean(v, maximumFractionDigits, min, max);
|
|
1532
1550
|
if (cleaned === null)
|
|
1533
1551
|
return '';
|
|
1534
|
-
return new Intl.NumberFormat('en-US', {
|
|
1552
|
+
return new Intl.NumberFormat('en-US', {
|
|
1553
|
+
minimumFractionDigits,
|
|
1554
|
+
maximumFractionDigits,
|
|
1555
|
+
}).format(cleaned);
|
|
1535
1556
|
}
|
|
1536
1557
|
NumberFieldComponent.format = format;
|
|
1537
1558
|
})(NumberFieldComponent || (NumberFieldComponent = {}));
|
|
@@ -1540,16 +1561,19 @@ class CurrencyFieldComponent extends NumberFieldComponent {
|
|
|
1540
1561
|
constructor() {
|
|
1541
1562
|
super(...arguments);
|
|
1542
1563
|
this.placeholder = '0.00';
|
|
1564
|
+
this.minimumFractionDigits = 2;
|
|
1543
1565
|
this.maximumFractionDigits = 2;
|
|
1544
1566
|
}
|
|
1545
1567
|
}
|
|
1546
1568
|
CurrencyFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CurrencyFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1547
|
-
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)=\"
|
|
1569
|
+
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\" [class.large]=\"size === 'large'\">$</span>\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 autocomplete=\"off\"\n autocorrect=\"off\"\n autocapitalize=\"off\"\n spellcheck=\"false\"\n (blur)=\"inputBlur()\"\n />\n</riv-input-label>\n", styles: [":host{position:relative}.prefix{position:absolute;font:var(--input-medium);padding:var(--size-small)}.prefix.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-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)}input.large{font:var(--input-large);padding:var(--size-medium) var(--size-medium) var(--size-medium) var(--size-xlarge)}\n"], dependencies: [{ kind: "component", type: InputLabelComponent, selector: "riv-input-label", inputs: ["label", "help", "required", "labelActionText"], outputs: ["labelAction"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1548
1570
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CurrencyFieldComponent, decorators: [{
|
|
1549
1571
|
type: Component,
|
|
1550
|
-
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)=\"
|
|
1572
|
+
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\" [class.large]=\"size === 'large'\">$</span>\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 autocomplete=\"off\"\n autocorrect=\"off\"\n autocapitalize=\"off\"\n spellcheck=\"false\"\n (blur)=\"inputBlur()\"\n />\n</riv-input-label>\n", styles: [":host{position:relative}.prefix{position:absolute;font:var(--input-medium);padding:var(--size-small)}.prefix.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-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)}input.large{font:var(--input-large);padding:var(--size-medium) var(--size-medium) var(--size-medium) var(--size-xlarge)}\n"] }]
|
|
1551
1573
|
}], propDecorators: { placeholder: [{
|
|
1552
1574
|
type: Input
|
|
1575
|
+
}], minimumFractionDigits: [{
|
|
1576
|
+
type: Input
|
|
1553
1577
|
}], maximumFractionDigits: [{
|
|
1554
1578
|
type: Input
|
|
1555
1579
|
}] } });
|
|
@@ -2535,10 +2559,10 @@ class PercentageFieldComponent extends NumberFieldComponent {
|
|
|
2535
2559
|
}
|
|
2536
2560
|
}
|
|
2537
2561
|
PercentageFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PercentageFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
2538
|
-
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 [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)=\"
|
|
2562
|
+
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 [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 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-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)}input.large{font:var(--input-large);padding:var(--size-medium) var(--size-xlarge) var(--size-medium) var(--size-medium)}\n"], dependencies: [{ kind: "component", type: InputLabelComponent, selector: "riv-input-label", inputs: ["label", "help", "required", "labelActionText"], outputs: ["labelAction"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2539
2563
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PercentageFieldComponent, decorators: [{
|
|
2540
2564
|
type: Component,
|
|
2541
|
-
args: [{ selector: 'riv-percentage-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)=\"
|
|
2565
|
+
args: [{ selector: 'riv-percentage-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 [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 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-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)}input.large{font:var(--input-large);padding:var(--size-medium) var(--size-xlarge) var(--size-medium) var(--size-medium)}\n"] }]
|
|
2542
2566
|
}], propDecorators: { align: [{
|
|
2543
2567
|
type: Input
|
|
2544
2568
|
}] } });
|