@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
|
@@ -1094,7 +1094,9 @@ class TextFieldComponent extends InputLabelComponent {
|
|
|
1094
1094
|
this.state = 'valid';
|
|
1095
1095
|
this.casing = 'user';
|
|
1096
1096
|
this.type = 'text';
|
|
1097
|
+
this.size = 'medium';
|
|
1097
1098
|
this.valueChange = new EventEmitter();
|
|
1099
|
+
this.blur = new EventEmitter();
|
|
1098
1100
|
this._text = '';
|
|
1099
1101
|
}
|
|
1100
1102
|
set value(v) {
|
|
@@ -1118,18 +1120,19 @@ class TextFieldComponent extends InputLabelComponent {
|
|
|
1118
1120
|
get text() {
|
|
1119
1121
|
return this._text;
|
|
1120
1122
|
}
|
|
1121
|
-
|
|
1123
|
+
inputBlur() {
|
|
1122
1124
|
// Now that the user is done editing and has left the field, we can safely
|
|
1123
1125
|
// update the internal state to match the cleaned/formatted version of
|
|
1124
1126
|
// their input.
|
|
1125
1127
|
this._text = TextFieldComponent.format(this._text, this.casing);
|
|
1128
|
+
this.blur.emit(TextFieldComponent.clean(this._text, this.casing));
|
|
1126
1129
|
}
|
|
1127
1130
|
}
|
|
1128
1131
|
TextFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TextFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1129
|
-
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)=\"
|
|
1132
|
+
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 });
|
|
1130
1133
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TextFieldComponent, decorators: [{
|
|
1131
1134
|
type: Component,
|
|
1132
|
-
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)=\"
|
|
1135
|
+
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"] }]
|
|
1133
1136
|
}], propDecorators: { disabled: [{
|
|
1134
1137
|
type: Input
|
|
1135
1138
|
}], readonly: [{
|
|
@@ -1142,6 +1145,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
1142
1145
|
type: Input
|
|
1143
1146
|
}], type: [{
|
|
1144
1147
|
type: Input
|
|
1148
|
+
}], size: [{
|
|
1149
|
+
type: Input
|
|
1150
|
+
}], name: [{
|
|
1151
|
+
type: Input
|
|
1145
1152
|
}], minLength: [{
|
|
1146
1153
|
type: Input
|
|
1147
1154
|
}], maxLength: [{
|
|
@@ -1150,6 +1157,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
1150
1157
|
type: Input
|
|
1151
1158
|
}], valueChange: [{
|
|
1152
1159
|
type: Output
|
|
1160
|
+
}], blur: [{
|
|
1161
|
+
type: Output
|
|
1153
1162
|
}] } });
|
|
1154
1163
|
(function (TextFieldComponent) {
|
|
1155
1164
|
TextFieldComponent.Casings = ['user', 'upper', 'lower'];
|
|
@@ -1162,6 +1171,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
1162
1171
|
'url',
|
|
1163
1172
|
];
|
|
1164
1173
|
TextFieldComponent.States = ['valid', 'warning', 'error'];
|
|
1174
|
+
TextFieldComponent.Sizes = ['medium', 'large'];
|
|
1165
1175
|
function clean(v, casing) {
|
|
1166
1176
|
switch (casing) {
|
|
1167
1177
|
case 'lower':
|
|
@@ -1182,10 +1192,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
1182
1192
|
})(TextFieldComponent || (TextFieldComponent = {}));
|
|
1183
1193
|
|
|
1184
1194
|
class AlphabeticFieldComponent extends TextFieldComponent {
|
|
1185
|
-
constructor() {
|
|
1186
|
-
super(...arguments);
|
|
1187
|
-
this.valueChange = new EventEmitter();
|
|
1188
|
-
}
|
|
1189
1195
|
set value(v) {
|
|
1190
1196
|
if (AlphabeticFieldComponent.clean(v, this.casing) ===
|
|
1191
1197
|
AlphabeticFieldComponent.clean(this._text, this.casing))
|
|
@@ -1199,19 +1205,18 @@ class AlphabeticFieldComponent extends TextFieldComponent {
|
|
|
1199
1205
|
get text() {
|
|
1200
1206
|
return this._text;
|
|
1201
1207
|
}
|
|
1202
|
-
|
|
1208
|
+
inputBlur() {
|
|
1203
1209
|
this._text = AlphabeticFieldComponent.format(this._text, this.casing);
|
|
1210
|
+
this.blur.emit(AlphabeticFieldComponent.clean(this._text, this.casing));
|
|
1204
1211
|
}
|
|
1205
1212
|
}
|
|
1206
1213
|
AlphabeticFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AlphabeticFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1207
|
-
AlphabeticFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: AlphabeticFieldComponent, selector: "riv-alphabetic-field", inputs: { value: "value" },
|
|
1214
|
+
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 });
|
|
1208
1215
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AlphabeticFieldComponent, decorators: [{
|
|
1209
1216
|
type: Component,
|
|
1210
|
-
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)=\"
|
|
1217
|
+
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"] }]
|
|
1211
1218
|
}], propDecorators: { value: [{
|
|
1212
1219
|
type: Input
|
|
1213
|
-
}], valueChange: [{
|
|
1214
|
-
type: Output
|
|
1215
1220
|
}] } });
|
|
1216
1221
|
(function (AlphabeticFieldComponent) {
|
|
1217
1222
|
function clean(v, casing) {
|
|
@@ -1444,17 +1449,21 @@ class NumberFieldComponent extends InputLabelComponent {
|
|
|
1444
1449
|
this.placeholder = '';
|
|
1445
1450
|
this.state = 'valid';
|
|
1446
1451
|
this.maximumFractionDigits = 0;
|
|
1452
|
+
this.minimumFractionDigits = 0;
|
|
1447
1453
|
this.min = -Infinity;
|
|
1448
1454
|
this.max = Infinity;
|
|
1449
1455
|
this.align = 'left';
|
|
1456
|
+
this.size = 'medium';
|
|
1450
1457
|
this.valueChange = new EventEmitter();
|
|
1458
|
+
this.blur = new EventEmitter();
|
|
1451
1459
|
this._text = '';
|
|
1452
1460
|
}
|
|
1453
1461
|
set value(v) {
|
|
1454
|
-
|
|
1462
|
+
const value = typeof v === 'number' ? v.toString() : null;
|
|
1463
|
+
if (NumberFieldComponent.clean(value, this.maximumFractionDigits, this.min, this.max) ===
|
|
1455
1464
|
NumberFieldComponent.clean(this._text, this.maximumFractionDigits, this.min, this.max))
|
|
1456
1465
|
return;
|
|
1457
|
-
this._text = NumberFieldComponent.format(
|
|
1466
|
+
this._text = NumberFieldComponent.format(value, this.minimumFractionDigits, this.maximumFractionDigits, this.min, this.max);
|
|
1458
1467
|
}
|
|
1459
1468
|
set text(t) {
|
|
1460
1469
|
this._text = t;
|
|
@@ -1463,15 +1472,16 @@ class NumberFieldComponent extends InputLabelComponent {
|
|
|
1463
1472
|
get text() {
|
|
1464
1473
|
return this._text;
|
|
1465
1474
|
}
|
|
1466
|
-
|
|
1467
|
-
this._text = NumberFieldComponent.format(this._text, this.maximumFractionDigits, this.min, this.max);
|
|
1475
|
+
inputBlur() {
|
|
1476
|
+
this._text = NumberFieldComponent.format(this._text, this.minimumFractionDigits, this.maximumFractionDigits, this.min, this.max);
|
|
1477
|
+
this.blur.emit(NumberFieldComponent.clean(this._text, this.maximumFractionDigits, this.min, this.max));
|
|
1468
1478
|
}
|
|
1469
1479
|
}
|
|
1470
1480
|
NumberFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NumberFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1471
|
-
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)=\"
|
|
1481
|
+
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 });
|
|
1472
1482
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NumberFieldComponent, decorators: [{
|
|
1473
1483
|
type: Component,
|
|
1474
|
-
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)=\"
|
|
1484
|
+
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"] }]
|
|
1475
1485
|
}], propDecorators: { disabled: [{
|
|
1476
1486
|
type: Input
|
|
1477
1487
|
}], readonly: [{
|
|
@@ -1482,16 +1492,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
1482
1492
|
type: Input
|
|
1483
1493
|
}], maximumFractionDigits: [{
|
|
1484
1494
|
type: Input
|
|
1495
|
+
}], minimumFractionDigits: [{
|
|
1496
|
+
type: Input
|
|
1485
1497
|
}], min: [{
|
|
1486
1498
|
type: Input
|
|
1487
1499
|
}], max: [{
|
|
1488
1500
|
type: Input
|
|
1489
1501
|
}], align: [{
|
|
1490
1502
|
type: Input
|
|
1503
|
+
}], size: [{
|
|
1504
|
+
type: Input
|
|
1505
|
+
}], name: [{
|
|
1506
|
+
type: Input
|
|
1491
1507
|
}], value: [{
|
|
1492
1508
|
type: Input
|
|
1493
1509
|
}], valueChange: [{
|
|
1494
1510
|
type: Output
|
|
1511
|
+
}], blur: [{
|
|
1512
|
+
type: Output
|
|
1495
1513
|
}] } });
|
|
1496
1514
|
(function (NumberFieldComponent) {
|
|
1497
1515
|
NumberFieldComponent.Alignments = ['left', 'center', 'right'];
|
|
@@ -1518,11 +1536,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
1518
1536
|
return Math.max(min, Math.min(max, cleaned));
|
|
1519
1537
|
}
|
|
1520
1538
|
NumberFieldComponent.clean = clean;
|
|
1521
|
-
function format(v, maximumFractionDigits, min, max) {
|
|
1539
|
+
function format(v, minimumFractionDigits, maximumFractionDigits, min, max) {
|
|
1522
1540
|
const cleaned = clean(v, maximumFractionDigits, min, max);
|
|
1523
1541
|
if (cleaned === null)
|
|
1524
1542
|
return '';
|
|
1525
|
-
return new Intl.NumberFormat('en-US', {
|
|
1543
|
+
return new Intl.NumberFormat('en-US', {
|
|
1544
|
+
minimumFractionDigits,
|
|
1545
|
+
maximumFractionDigits,
|
|
1546
|
+
}).format(cleaned);
|
|
1526
1547
|
}
|
|
1527
1548
|
NumberFieldComponent.format = format;
|
|
1528
1549
|
})(NumberFieldComponent || (NumberFieldComponent = {}));
|
|
@@ -1531,16 +1552,19 @@ class CurrencyFieldComponent extends NumberFieldComponent {
|
|
|
1531
1552
|
constructor() {
|
|
1532
1553
|
super(...arguments);
|
|
1533
1554
|
this.placeholder = '0.00';
|
|
1555
|
+
this.minimumFractionDigits = 2;
|
|
1534
1556
|
this.maximumFractionDigits = 2;
|
|
1535
1557
|
}
|
|
1536
1558
|
}
|
|
1537
1559
|
CurrencyFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CurrencyFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1538
|
-
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)=\"
|
|
1560
|
+
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 });
|
|
1539
1561
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CurrencyFieldComponent, decorators: [{
|
|
1540
1562
|
type: Component,
|
|
1541
|
-
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)=\"
|
|
1563
|
+
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"] }]
|
|
1542
1564
|
}], propDecorators: { placeholder: [{
|
|
1543
1565
|
type: Input
|
|
1566
|
+
}], minimumFractionDigits: [{
|
|
1567
|
+
type: Input
|
|
1544
1568
|
}], maximumFractionDigits: [{
|
|
1545
1569
|
type: Input
|
|
1546
1570
|
}] } });
|
|
@@ -2539,10 +2563,10 @@ class PercentageFieldComponent extends NumberFieldComponent {
|
|
|
2539
2563
|
}
|
|
2540
2564
|
}
|
|
2541
2565
|
PercentageFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PercentageFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
2542
|
-
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)=\"
|
|
2566
|
+
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 });
|
|
2543
2567
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PercentageFieldComponent, decorators: [{
|
|
2544
2568
|
type: Component,
|
|
2545
|
-
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)=\"
|
|
2569
|
+
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"] }]
|
|
2546
2570
|
}], propDecorators: { align: [{
|
|
2547
2571
|
type: Input
|
|
2548
2572
|
}] } });
|