myrta-ui 1.1.39 → 1.1.41
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/components/cdk-tooltip/constants/index.mjs +7 -7
- package/esm2020/lib/components/form/input-number/input-number.component.mjs +18 -3
- package/esm2020/lib/components/icon-button/icon-button.component.mjs +9 -3
- package/fesm2015/myrta-ui.mjs +31 -10
- package/fesm2015/myrta-ui.mjs.map +1 -1
- package/fesm2020/myrta-ui.mjs +31 -10
- package/fesm2020/myrta-ui.mjs.map +1 -1
- package/lib/components/form/input-number/input-number.component.d.ts +1 -0
- package/lib/components/icon-button/icon-button.component.d.ts +4 -1
- package/package.json +1 -1
package/fesm2020/myrta-ui.mjs
CHANGED
|
@@ -1077,14 +1077,14 @@ const positions = [
|
|
|
1077
1077
|
topPosition, bottomPosition, leftPosition, rightPosition
|
|
1078
1078
|
];
|
|
1079
1079
|
const positionStrategy = {
|
|
1080
|
-
top: [topPosition, bottomPosition, leftPosition, rightPosition],
|
|
1081
|
-
bottom: [bottomPosition, topPosition, leftPosition, rightPosition],
|
|
1080
|
+
top: [topPosition, topStartPosition, topEndPosition, bottomPosition, bottomStartPosition, bottomEndPosition, leftPosition, rightPosition],
|
|
1081
|
+
bottom: [bottomPosition, bottomStartPosition, bottomEndPosition, topPosition, topStartPosition, topEndPosition, leftPosition, rightPosition],
|
|
1082
1082
|
left: [leftPosition, rightPosition, topPosition, bottomPosition],
|
|
1083
1083
|
right: [rightPosition, leftPosition, topPosition, bottomPosition],
|
|
1084
|
-
'top-start': [topStartPosition, topPosition, bottomStartPosition, bottomPosition],
|
|
1085
|
-
'top-end': [topEndPosition, topPosition, bottomEndPosition, bottomPosition],
|
|
1086
|
-
'bottom-start': [bottomStartPosition, bottomPosition, topStartPosition, topPosition],
|
|
1087
|
-
'bottom-end': [bottomEndPosition, bottomPosition, topEndPosition, topPosition],
|
|
1084
|
+
'top-start': [topStartPosition, topPosition, topEndPosition, bottomStartPosition, bottomPosition, bottomEndPosition],
|
|
1085
|
+
'top-end': [topEndPosition, topPosition, topStartPosition, bottomEndPosition, bottomPosition, bottomStartPosition],
|
|
1086
|
+
'bottom-start': [bottomStartPosition, bottomPosition, bottomEndPosition, topStartPosition, topPosition, topEndPosition],
|
|
1087
|
+
'bottom-end': [bottomEndPosition, bottomPosition, bottomStartPosition, topEndPosition, topPosition, topStartPosition],
|
|
1088
1088
|
};
|
|
1089
1089
|
|
|
1090
1090
|
class CdkTooltipDirective {
|
|
@@ -1735,6 +1735,8 @@ class IconButtonComponent {
|
|
|
1735
1735
|
this.iconClass = '';
|
|
1736
1736
|
this.disabled = false;
|
|
1737
1737
|
this.tooltip = '';
|
|
1738
|
+
this.tooltipPosition = 'top';
|
|
1739
|
+
this.tooltipMaxWidth = null;
|
|
1738
1740
|
this.isActive = false;
|
|
1739
1741
|
this.customClasses = '';
|
|
1740
1742
|
this.mrxClick = new EventEmitter();
|
|
@@ -1750,10 +1752,10 @@ class IconButtonComponent {
|
|
|
1750
1752
|
}
|
|
1751
1753
|
}
|
|
1752
1754
|
IconButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: IconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1753
|
-
IconButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: IconButtonComponent, selector: "mrx-icon-button", inputs: { size: "size", state: "state", type: "type", iconClass: "iconClass", disabled: "disabled", tooltip: "tooltip", isActive: "isActive", customClasses: "customClasses" }, outputs: { mrxClick: "mrxClick" }, ngImport: i0, template: "<button\r\n class=\"mrx-icon mrx-icon-button\"\r\n [mrxCdkTooltip]=\"tooltip\"\r\n [tooltipActive]=\"stateTooltip\"\r\n [class]=\"getClasses\"\r\n [class.active]=\"isActive\"\r\n [disabled]=\"disabled\"\r\n (click)=\"buttonClick($event)\"\r\n></button>\r\n", styles: [".mrx-icon-button{border-radius:4px;cursor:pointer;transition:.2s;border:none;padding:0;margin:0;outline:none;color:var(--neutral-icon-default)}.mrx-icon-button.mrx-icon-button-state-default{background:transparent}.mrx-icon-button.mrx-icon-button-state-default:hover{background:var(--brand-bg-tertiary-hover)}.mrx-icon-button.mrx-icon-button-state-default:active{background:var(--brand-bg-tertiary-selected)}.mrx-icon-button.mrx-icon-button-state-default:disabled{color:var(--neutral-icon-disabled);cursor:default;pointer-events:none;background:transparent}.mrx-icon-button.mrx-icon-button-state-button{box-shadow:0 1px 4px #3b43571a;background:var(--brand-bg-tertiary-default)}.mrx-icon-button.mrx-icon-button-state-button:hover{box-shadow:0 1px 4px #3a3a3a4d}.mrx-icon-button.mrx-icon-button-state-button:disabled{cursor:default;pointer-events:none;color:var(--neutral-icon-disabled)}.mrx-icon-button.mrx-icon-button-state-button:disabled:hover{box-shadow:0 1px 4px #3b43571a}.mrx-icon-button.mrx-icon-button-state-button.mrx-icon-button-type-positive{color:var(--system-icon-positive)}.mrx-icon-button.mrx-icon-button-state-button.mrx-icon-button-type-positive:active,.mrx-icon-button.mrx-icon-button-state-button.mrx-icon-button-type-positive.active{color:#fff;background:var(--system-bg-controls-positive-default)}.mrx-icon-button.mrx-icon-button-state-button.mrx-icon-button-type-positive:active:disabled,.mrx-icon-button.mrx-icon-button-state-button.mrx-icon-button-type-positive.active:disabled{color:#fff}.mrx-icon-button.mrx-icon-button-state-button.mrx-icon-button-type-positive:disabled{color:var(--neutral-icon-disabled)}.mrx-icon-button.mrx-icon-button-state-button.mrx-icon-button-type-negative{color:var(--system-icon-negative)}.mrx-icon-button.mrx-icon-button-state-button.mrx-icon-button-type-negative:active,.mrx-icon-button.mrx-icon-button-state-button.mrx-icon-button-type-negative.active{color:#fff;background:var(--system-bg-controls-negative-default)}.mrx-icon-button.mrx-icon-button-state-button.mrx-icon-button-type-negative:active:disabled,.mrx-icon-button.mrx-icon-button-state-button.mrx-icon-button-type-negative.active:disabled{color:#fff}.mrx-icon-button.mrx-icon-button-state-button.mrx-icon-button-type-negative:disabled{color:var(--neutral-icon-disabled)}\n"], directives: [{ type: CdkTooltipDirective, selector: "[mrxCdkTooltip]", inputs: ["mrxCdkTooltip", "tooltipActive", "autoCloseByScroll", "tooltipPosition", "tooltipMaxWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1755
|
+
IconButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: IconButtonComponent, selector: "mrx-icon-button", inputs: { size: "size", state: "state", type: "type", iconClass: "iconClass", disabled: "disabled", tooltip: "tooltip", tooltipPosition: "tooltipPosition", tooltipMaxWidth: "tooltipMaxWidth", isActive: "isActive", customClasses: "customClasses" }, outputs: { mrxClick: "mrxClick" }, ngImport: i0, template: "<button\r\n class=\"mrx-icon mrx-icon-button\"\r\n [mrxCdkTooltip]=\"tooltip\"\r\n [tooltipActive]=\"stateTooltip\"\r\n [tooltipPosition]=\"tooltipPosition\"\r\n [tooltipMaxWidth]=\"tooltipMaxWidth\"\r\n [class]=\"getClasses\"\r\n [class.active]=\"isActive\"\r\n [disabled]=\"disabled\"\r\n (click)=\"buttonClick($event)\"\r\n></button>\r\n", styles: [".mrx-icon-button{border-radius:4px;cursor:pointer;transition:.2s;border:none;padding:0;margin:0;outline:none;color:var(--neutral-icon-default)}.mrx-icon-button.mrx-icon-button-state-default{background:transparent}.mrx-icon-button.mrx-icon-button-state-default:hover{background:var(--brand-bg-tertiary-hover)}.mrx-icon-button.mrx-icon-button-state-default:active{background:var(--brand-bg-tertiary-selected)}.mrx-icon-button.mrx-icon-button-state-default:disabled{color:var(--neutral-icon-disabled);cursor:default;pointer-events:none;background:transparent}.mrx-icon-button.mrx-icon-button-state-button{box-shadow:0 1px 4px #3b43571a;background:var(--brand-bg-tertiary-default)}.mrx-icon-button.mrx-icon-button-state-button:hover{box-shadow:0 1px 4px #3a3a3a4d}.mrx-icon-button.mrx-icon-button-state-button:disabled{cursor:default;pointer-events:none;color:var(--neutral-icon-disabled)}.mrx-icon-button.mrx-icon-button-state-button:disabled:hover{box-shadow:0 1px 4px #3b43571a}.mrx-icon-button.mrx-icon-button-state-button.mrx-icon-button-type-positive{color:var(--system-icon-positive)}.mrx-icon-button.mrx-icon-button-state-button.mrx-icon-button-type-positive:active,.mrx-icon-button.mrx-icon-button-state-button.mrx-icon-button-type-positive.active{color:#fff;background:var(--system-bg-controls-positive-default)}.mrx-icon-button.mrx-icon-button-state-button.mrx-icon-button-type-positive:active:disabled,.mrx-icon-button.mrx-icon-button-state-button.mrx-icon-button-type-positive.active:disabled{color:#fff}.mrx-icon-button.mrx-icon-button-state-button.mrx-icon-button-type-positive:disabled{color:var(--neutral-icon-disabled)}.mrx-icon-button.mrx-icon-button-state-button.mrx-icon-button-type-negative{color:var(--system-icon-negative)}.mrx-icon-button.mrx-icon-button-state-button.mrx-icon-button-type-negative:active,.mrx-icon-button.mrx-icon-button-state-button.mrx-icon-button-type-negative.active{color:#fff;background:var(--system-bg-controls-negative-default)}.mrx-icon-button.mrx-icon-button-state-button.mrx-icon-button-type-negative:active:disabled,.mrx-icon-button.mrx-icon-button-state-button.mrx-icon-button-type-negative.active:disabled{color:#fff}.mrx-icon-button.mrx-icon-button-state-button.mrx-icon-button-type-negative:disabled{color:var(--neutral-icon-disabled)}\n"], directives: [{ type: CdkTooltipDirective, selector: "[mrxCdkTooltip]", inputs: ["mrxCdkTooltip", "tooltipActive", "autoCloseByScroll", "tooltipPosition", "tooltipMaxWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1754
1756
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: IconButtonComponent, decorators: [{
|
|
1755
1757
|
type: Component,
|
|
1756
|
-
args: [{ selector: 'mrx-icon-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\r\n class=\"mrx-icon mrx-icon-button\"\r\n [mrxCdkTooltip]=\"tooltip\"\r\n [tooltipActive]=\"stateTooltip\"\r\n [class]=\"getClasses\"\r\n [class.active]=\"isActive\"\r\n [disabled]=\"disabled\"\r\n (click)=\"buttonClick($event)\"\r\n></button>\r\n", styles: [".mrx-icon-button{border-radius:4px;cursor:pointer;transition:.2s;border:none;padding:0;margin:0;outline:none;color:var(--neutral-icon-default)}.mrx-icon-button.mrx-icon-button-state-default{background:transparent}.mrx-icon-button.mrx-icon-button-state-default:hover{background:var(--brand-bg-tertiary-hover)}.mrx-icon-button.mrx-icon-button-state-default:active{background:var(--brand-bg-tertiary-selected)}.mrx-icon-button.mrx-icon-button-state-default:disabled{color:var(--neutral-icon-disabled);cursor:default;pointer-events:none;background:transparent}.mrx-icon-button.mrx-icon-button-state-button{box-shadow:0 1px 4px #3b43571a;background:var(--brand-bg-tertiary-default)}.mrx-icon-button.mrx-icon-button-state-button:hover{box-shadow:0 1px 4px #3a3a3a4d}.mrx-icon-button.mrx-icon-button-state-button:disabled{cursor:default;pointer-events:none;color:var(--neutral-icon-disabled)}.mrx-icon-button.mrx-icon-button-state-button:disabled:hover{box-shadow:0 1px 4px #3b43571a}.mrx-icon-button.mrx-icon-button-state-button.mrx-icon-button-type-positive{color:var(--system-icon-positive)}.mrx-icon-button.mrx-icon-button-state-button.mrx-icon-button-type-positive:active,.mrx-icon-button.mrx-icon-button-state-button.mrx-icon-button-type-positive.active{color:#fff;background:var(--system-bg-controls-positive-default)}.mrx-icon-button.mrx-icon-button-state-button.mrx-icon-button-type-positive:active:disabled,.mrx-icon-button.mrx-icon-button-state-button.mrx-icon-button-type-positive.active:disabled{color:#fff}.mrx-icon-button.mrx-icon-button-state-button.mrx-icon-button-type-positive:disabled{color:var(--neutral-icon-disabled)}.mrx-icon-button.mrx-icon-button-state-button.mrx-icon-button-type-negative{color:var(--system-icon-negative)}.mrx-icon-button.mrx-icon-button-state-button.mrx-icon-button-type-negative:active,.mrx-icon-button.mrx-icon-button-state-button.mrx-icon-button-type-negative.active{color:#fff;background:var(--system-bg-controls-negative-default)}.mrx-icon-button.mrx-icon-button-state-button.mrx-icon-button-type-negative:active:disabled,.mrx-icon-button.mrx-icon-button-state-button.mrx-icon-button-type-negative.active:disabled{color:#fff}.mrx-icon-button.mrx-icon-button-state-button.mrx-icon-button-type-negative:disabled{color:var(--neutral-icon-disabled)}\n"] }]
|
|
1758
|
+
args: [{ selector: 'mrx-icon-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\r\n class=\"mrx-icon mrx-icon-button\"\r\n [mrxCdkTooltip]=\"tooltip\"\r\n [tooltipActive]=\"stateTooltip\"\r\n [tooltipPosition]=\"tooltipPosition\"\r\n [tooltipMaxWidth]=\"tooltipMaxWidth\"\r\n [class]=\"getClasses\"\r\n [class.active]=\"isActive\"\r\n [disabled]=\"disabled\"\r\n (click)=\"buttonClick($event)\"\r\n></button>\r\n", styles: [".mrx-icon-button{border-radius:4px;cursor:pointer;transition:.2s;border:none;padding:0;margin:0;outline:none;color:var(--neutral-icon-default)}.mrx-icon-button.mrx-icon-button-state-default{background:transparent}.mrx-icon-button.mrx-icon-button-state-default:hover{background:var(--brand-bg-tertiary-hover)}.mrx-icon-button.mrx-icon-button-state-default:active{background:var(--brand-bg-tertiary-selected)}.mrx-icon-button.mrx-icon-button-state-default:disabled{color:var(--neutral-icon-disabled);cursor:default;pointer-events:none;background:transparent}.mrx-icon-button.mrx-icon-button-state-button{box-shadow:0 1px 4px #3b43571a;background:var(--brand-bg-tertiary-default)}.mrx-icon-button.mrx-icon-button-state-button:hover{box-shadow:0 1px 4px #3a3a3a4d}.mrx-icon-button.mrx-icon-button-state-button:disabled{cursor:default;pointer-events:none;color:var(--neutral-icon-disabled)}.mrx-icon-button.mrx-icon-button-state-button:disabled:hover{box-shadow:0 1px 4px #3b43571a}.mrx-icon-button.mrx-icon-button-state-button.mrx-icon-button-type-positive{color:var(--system-icon-positive)}.mrx-icon-button.mrx-icon-button-state-button.mrx-icon-button-type-positive:active,.mrx-icon-button.mrx-icon-button-state-button.mrx-icon-button-type-positive.active{color:#fff;background:var(--system-bg-controls-positive-default)}.mrx-icon-button.mrx-icon-button-state-button.mrx-icon-button-type-positive:active:disabled,.mrx-icon-button.mrx-icon-button-state-button.mrx-icon-button-type-positive.active:disabled{color:#fff}.mrx-icon-button.mrx-icon-button-state-button.mrx-icon-button-type-positive:disabled{color:var(--neutral-icon-disabled)}.mrx-icon-button.mrx-icon-button-state-button.mrx-icon-button-type-negative{color:var(--system-icon-negative)}.mrx-icon-button.mrx-icon-button-state-button.mrx-icon-button-type-negative:active,.mrx-icon-button.mrx-icon-button-state-button.mrx-icon-button-type-negative.active{color:#fff;background:var(--system-bg-controls-negative-default)}.mrx-icon-button.mrx-icon-button-state-button.mrx-icon-button-type-negative:active:disabled,.mrx-icon-button.mrx-icon-button-state-button.mrx-icon-button-type-negative.active:disabled{color:#fff}.mrx-icon-button.mrx-icon-button-state-button.mrx-icon-button-type-negative:disabled{color:var(--neutral-icon-disabled)}\n"] }]
|
|
1757
1759
|
}], propDecorators: { size: [{
|
|
1758
1760
|
type: Input
|
|
1759
1761
|
}], state: [{
|
|
@@ -1766,6 +1768,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
1766
1768
|
type: Input
|
|
1767
1769
|
}], tooltip: [{
|
|
1768
1770
|
type: Input
|
|
1771
|
+
}], tooltipPosition: [{
|
|
1772
|
+
type: Input
|
|
1773
|
+
}], tooltipMaxWidth: [{
|
|
1774
|
+
type: Input
|
|
1769
1775
|
}], isActive: [{
|
|
1770
1776
|
type: Input
|
|
1771
1777
|
}], customClasses: [{
|
|
@@ -11047,17 +11053,32 @@ class InputNumberComponent {
|
|
|
11047
11053
|
this.onPhoneInputBlur();
|
|
11048
11054
|
this.blurred.emit({ value: this.value, id: this.uuid });
|
|
11049
11055
|
}
|
|
11056
|
+
onPaste(event) {
|
|
11057
|
+
event.preventDefault();
|
|
11058
|
+
const f = this.getControl('number');
|
|
11059
|
+
const clipboardData = event.clipboardData || window.clipboardData;
|
|
11060
|
+
const pastedText = clipboardData.getData('text');
|
|
11061
|
+
switch (this.decimals) {
|
|
11062
|
+
case (2):
|
|
11063
|
+
case (1):
|
|
11064
|
+
f.setValue(parseInt(pastedText));
|
|
11065
|
+
break;
|
|
11066
|
+
default:
|
|
11067
|
+
f.setValue(parseInt(pastedText.split(/[,.]/)[0]));
|
|
11068
|
+
break;
|
|
11069
|
+
}
|
|
11070
|
+
}
|
|
11050
11071
|
}
|
|
11051
11072
|
InputNumberComponent._delimitersInitialised = false;
|
|
11052
11073
|
InputNumberComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: InputNumberComponent, deps: [{ token: i4.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
11053
11074
|
InputNumberComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: InputNumberComponent, selector: "mrx-input-number", inputs: { fields: "fields", placeholder: "placeholder", innerClass: "innerClass", customClasses: "customClasses", required: "required", allowNegative: "allowNegative", size: "size", separator: "separator", decimalSeparator: "decimalSeparator", isNullableValue: "isNullableValue", isAutoCorrectingValue: "isAutoCorrectingValue", invalid: "invalid", checkInvalid: "checkInvalid", setNumberType: ["numberType", "setNumberType"], setInvalidMessage: ["invalidMessage", "setInvalidMessage"], setDisabled: ["disabled", "setDisabled"], setReadonly: ["readonly", "setReadonly"], setMin: ["minValue", "setMin"], setMax: ["maxValue", "setMax"] }, outputs: { changed: "changed", modelChange: "modelChange", blurred: "blurred" }, providers: [
|
|
11054
11075
|
{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => InputNumberComponent), multi: true },
|
|
11055
|
-
], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }], ngImport: i0, template: "<div\r\n class=\"mrx-input-number\"\r\n [class]=\"getClasses\"\r\n [class.mrx-input-error]=\"!isValid || invalid\"\r\n [class.-disabled]=\"disabled\"\r\n [class.-readonly]=\"readonly\"\r\n>\r\n <div class=\"mrx-input-number__wrapper\">\r\n <form [formGroup]=\"numberForm\">\r\n <div>\r\n <input\r\n #inputElement\r\n autocomplete=\"nope\"\r\n formControlName=\"number\"\r\n type=\"text\"\r\n [thousandSeparator]=\"thousandsSeparator\"\r\n [decimalMarker]=\"decimalMarker\"\r\n [class]=\"innerClass\"\r\n [mask]=\"'separator.' + decimals\"\r\n [allowNegativeNumbers]=\"allowNegative\"\r\n [placeholder]=\"placeholder ? placeholder : ''\"\r\n (blur)=\"onBlur($event)\"\r\n />\r\n </div>\r\n </form>\r\n </div>\r\n\r\n <mrx-error-message *ngIf=\"!isValid && invalidMessageStart\">\r\n {{invalidMessageStart}}\r\n <a href=\"#\" (click)=\"resetToMax($event)\">{{maxMessage}}</a>\r\n {{invalidMessageEnd}}\r\n </mrx-error-message>\r\n\r\n <mrx-save-state [id]=\"uuid\" [fields]=\"fields\"></mrx-save-state>\r\n</div>\r\n", styles: [".mrx-input-number.mrx-input-number{width:100%;position:relative}.mrx-input-number.mrx-input-number .mrx-input-text__wrapper{position:relative}.mrx-input-number.mrx-input-number input{box-sizing:border-box;border:var(--border-width-default) solid var(--neutral-bg-stroke-default);border-radius:var(--border-radius-1);width:100%;outline:none;transition:outline-width .2s,border .2s}.mrx-input-number.mrx-input-number input:focus,.mrx-input-number.mrx-input-number input:active{outline:var(--neutral-bg-island-default) solid var(--border-width-focused)}.mrx-input-number.mrx-input-number input:hover{border:var(--border-width-default) solid var(--neutral-bg-stroke-hover)}.mrx-input-number.mrx-input-number.mrx-input__readonly input[type=tel]:disabled{background-color:inherit}.mrx-input-number.mrx-input-number.mrx-input__readonly input{background-color:inherit}.mrx-input-number.mrx-input-number.mrx-input-number-lg input{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-input-number.mrx-input-number.mrx-input-number-lg:not(.mrx-input-number-with-icon) input{padding:calc(var(--spacing-3) + var(--spacing-half) - var(--border-width-default)) var(--spacing-4)}.mrx-input-number.mrx-input-number.mrx-input-number-lg.mrx-input-number-with-icon input{padding:calc(var(--spacing-3) + var(--spacing-half) - var(--border-width-default)) var(--spacing-4) calc(var(--spacing-3) + var(--spacing-half) - var(--border-width-default)) calc(var(--spacing-module) * 10)}.mrx-input-number.mrx-input-number.mrx-input-number-md input{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-input-number.mrx-input-number.mrx-input-number-md:not(.mrx-input-number-with-icon) input{padding:calc(var(--spacing-2) + var(--spacing-half) - var(--border-width-default)) var(--spacing-4)}.mrx-input-number.mrx-input-number.mrx-input-number-md.mrx-input-number-with-icon input{padding:calc(var(--spacing-2) + var(--spacing-half) - var(--border-width-default)) var(--spacing-4) calc(var(--spacing-2) + var(--spacing-half) - var(--border-width-default)) calc(var(--spacing-module) * 10)}.mrx-input-number.mrx-input-number.mrx-input-number-sm input{font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height)}.mrx-input-number.mrx-input-number.mrx-input-number-sm:not(.mrx-input-number-with-icon) input{padding:calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-4)}.mrx-input-number.mrx-input-number.mrx-input-number-sm.mrx-input-number-with-icon input{padding:calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-4) calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-8)}.mrx-input-number.mrx-input-number.mrx-input-error input{border-color:var(--system-bg-controls-negative-default)}.mrx-input-number.mrx-input-number.mrx-input-checked-error input{border-color:var(--system-bg-controls-negative-default);background-color:var(--system-bg-negative-secondary)}.mrx-input-number.mrx-input-number.mrx-input-checked-success input{background-color:var(--system-bg-positive-secondary);border-color:var(--system-bg-controls-positive-default)}.mrx-input-number.mrx-input-number.-disabled input{background-color:var(--neutral-bg-disabled, #EEF0F4);-webkit-text-fill-color:var(--neutral-text-tertiary, #71767E);color:var(--neutral-text-tertiary, #71767E)}.mrx-input-number.mrx-input-number.-readonly input{background-color:var(--neutral-bg-disabled, #EEF0F4);-webkit-text-fill-color:var(--neutral-text-primary, #262626);color:var(--neutral-text-primary, #262626)}\n"], components: [{ type: ErrorMessageComponent, selector: "mrx-error-message", inputs: ["invalid", "invalidMessage", "customClasses"] }, { type: SaveStateComponent, selector: "mrx-save-state", inputs: ["type", "fields", "id"] }], directives: [{ type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$7.MaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "triggerOnMaskChange"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
11076
|
+
], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }], ngImport: i0, template: "<div\r\n class=\"mrx-input-number\"\r\n [class]=\"getClasses\"\r\n [class.mrx-input-error]=\"!isValid || invalid\"\r\n [class.-disabled]=\"disabled\"\r\n [class.-readonly]=\"readonly\"\r\n>\r\n <div class=\"mrx-input-number__wrapper\">\r\n <form [formGroup]=\"numberForm\">\r\n <div>\r\n <input\r\n #inputElement\r\n autocomplete=\"nope\"\r\n formControlName=\"number\"\r\n type=\"text\"\r\n [thousandSeparator]=\"thousandsSeparator\"\r\n [decimalMarker]=\"decimalMarker\"\r\n [class]=\"innerClass\"\r\n [mask]=\"'separator.' + decimals\"\r\n [allowNegativeNumbers]=\"allowNegative\"\r\n [placeholder]=\"placeholder ? placeholder : ''\"\r\n (blur)=\"onBlur($event)\"\r\n (paste)=\"onPaste($event)\"\r\n />\r\n </div>\r\n </form>\r\n </div>\r\n\r\n <mrx-error-message *ngIf=\"!isValid && invalidMessageStart\">\r\n {{invalidMessageStart}}\r\n <a href=\"#\" (click)=\"resetToMax($event)\">{{maxMessage}}</a>\r\n {{invalidMessageEnd}}\r\n </mrx-error-message>\r\n\r\n <mrx-save-state [id]=\"uuid\" [fields]=\"fields\"></mrx-save-state>\r\n</div>\r\n", styles: [".mrx-input-number.mrx-input-number{width:100%;position:relative}.mrx-input-number.mrx-input-number .mrx-input-text__wrapper{position:relative}.mrx-input-number.mrx-input-number input{box-sizing:border-box;border:var(--border-width-default) solid var(--neutral-bg-stroke-default);border-radius:var(--border-radius-1);width:100%;outline:none;transition:outline-width .2s,border .2s}.mrx-input-number.mrx-input-number input:focus,.mrx-input-number.mrx-input-number input:active{outline:var(--neutral-bg-island-default) solid var(--border-width-focused)}.mrx-input-number.mrx-input-number input:hover{border:var(--border-width-default) solid var(--neutral-bg-stroke-hover)}.mrx-input-number.mrx-input-number.mrx-input__readonly input[type=tel]:disabled{background-color:inherit}.mrx-input-number.mrx-input-number.mrx-input__readonly input{background-color:inherit}.mrx-input-number.mrx-input-number.mrx-input-number-lg input{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-input-number.mrx-input-number.mrx-input-number-lg:not(.mrx-input-number-with-icon) input{padding:calc(var(--spacing-3) + var(--spacing-half) - var(--border-width-default)) var(--spacing-4)}.mrx-input-number.mrx-input-number.mrx-input-number-lg.mrx-input-number-with-icon input{padding:calc(var(--spacing-3) + var(--spacing-half) - var(--border-width-default)) var(--spacing-4) calc(var(--spacing-3) + var(--spacing-half) - var(--border-width-default)) calc(var(--spacing-module) * 10)}.mrx-input-number.mrx-input-number.mrx-input-number-md input{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-input-number.mrx-input-number.mrx-input-number-md:not(.mrx-input-number-with-icon) input{padding:calc(var(--spacing-2) + var(--spacing-half) - var(--border-width-default)) var(--spacing-4)}.mrx-input-number.mrx-input-number.mrx-input-number-md.mrx-input-number-with-icon input{padding:calc(var(--spacing-2) + var(--spacing-half) - var(--border-width-default)) var(--spacing-4) calc(var(--spacing-2) + var(--spacing-half) - var(--border-width-default)) calc(var(--spacing-module) * 10)}.mrx-input-number.mrx-input-number.mrx-input-number-sm input{font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height)}.mrx-input-number.mrx-input-number.mrx-input-number-sm:not(.mrx-input-number-with-icon) input{padding:calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-4)}.mrx-input-number.mrx-input-number.mrx-input-number-sm.mrx-input-number-with-icon input{padding:calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-4) calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-8)}.mrx-input-number.mrx-input-number.mrx-input-error input{border-color:var(--system-bg-controls-negative-default)}.mrx-input-number.mrx-input-number.mrx-input-checked-error input{border-color:var(--system-bg-controls-negative-default);background-color:var(--system-bg-negative-secondary)}.mrx-input-number.mrx-input-number.mrx-input-checked-success input{background-color:var(--system-bg-positive-secondary);border-color:var(--system-bg-controls-positive-default)}.mrx-input-number.mrx-input-number.-disabled input{background-color:var(--neutral-bg-disabled, #EEF0F4);-webkit-text-fill-color:var(--neutral-text-tertiary, #71767E);color:var(--neutral-text-tertiary, #71767E)}.mrx-input-number.mrx-input-number.-readonly input{background-color:var(--neutral-bg-disabled, #EEF0F4);-webkit-text-fill-color:var(--neutral-text-primary, #262626);color:var(--neutral-text-primary, #262626)}\n"], components: [{ type: ErrorMessageComponent, selector: "mrx-error-message", inputs: ["invalid", "invalidMessage", "customClasses"] }, { type: SaveStateComponent, selector: "mrx-save-state", inputs: ["type", "fields", "id"] }], directives: [{ type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$7.MaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "triggerOnMaskChange"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
11056
11077
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: InputNumberComponent, decorators: [{
|
|
11057
11078
|
type: Component,
|
|
11058
11079
|
args: [{ selector: 'mrx-input-number', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
11059
11080
|
{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => InputNumberComponent), multi: true },
|
|
11060
|
-
], template: "<div\r\n class=\"mrx-input-number\"\r\n [class]=\"getClasses\"\r\n [class.mrx-input-error]=\"!isValid || invalid\"\r\n [class.-disabled]=\"disabled\"\r\n [class.-readonly]=\"readonly\"\r\n>\r\n <div class=\"mrx-input-number__wrapper\">\r\n <form [formGroup]=\"numberForm\">\r\n <div>\r\n <input\r\n #inputElement\r\n autocomplete=\"nope\"\r\n formControlName=\"number\"\r\n type=\"text\"\r\n [thousandSeparator]=\"thousandsSeparator\"\r\n [decimalMarker]=\"decimalMarker\"\r\n [class]=\"innerClass\"\r\n [mask]=\"'separator.' + decimals\"\r\n [allowNegativeNumbers]=\"allowNegative\"\r\n [placeholder]=\"placeholder ? placeholder : ''\"\r\n (blur)=\"onBlur($event)\"\r\n />\r\n </div>\r\n </form>\r\n </div>\r\n\r\n <mrx-error-message *ngIf=\"!isValid && invalidMessageStart\">\r\n {{invalidMessageStart}}\r\n <a href=\"#\" (click)=\"resetToMax($event)\">{{maxMessage}}</a>\r\n {{invalidMessageEnd}}\r\n </mrx-error-message>\r\n\r\n <mrx-save-state [id]=\"uuid\" [fields]=\"fields\"></mrx-save-state>\r\n</div>\r\n", styles: [".mrx-input-number.mrx-input-number{width:100%;position:relative}.mrx-input-number.mrx-input-number .mrx-input-text__wrapper{position:relative}.mrx-input-number.mrx-input-number input{box-sizing:border-box;border:var(--border-width-default) solid var(--neutral-bg-stroke-default);border-radius:var(--border-radius-1);width:100%;outline:none;transition:outline-width .2s,border .2s}.mrx-input-number.mrx-input-number input:focus,.mrx-input-number.mrx-input-number input:active{outline:var(--neutral-bg-island-default) solid var(--border-width-focused)}.mrx-input-number.mrx-input-number input:hover{border:var(--border-width-default) solid var(--neutral-bg-stroke-hover)}.mrx-input-number.mrx-input-number.mrx-input__readonly input[type=tel]:disabled{background-color:inherit}.mrx-input-number.mrx-input-number.mrx-input__readonly input{background-color:inherit}.mrx-input-number.mrx-input-number.mrx-input-number-lg input{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-input-number.mrx-input-number.mrx-input-number-lg:not(.mrx-input-number-with-icon) input{padding:calc(var(--spacing-3) + var(--spacing-half) - var(--border-width-default)) var(--spacing-4)}.mrx-input-number.mrx-input-number.mrx-input-number-lg.mrx-input-number-with-icon input{padding:calc(var(--spacing-3) + var(--spacing-half) - var(--border-width-default)) var(--spacing-4) calc(var(--spacing-3) + var(--spacing-half) - var(--border-width-default)) calc(var(--spacing-module) * 10)}.mrx-input-number.mrx-input-number.mrx-input-number-md input{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-input-number.mrx-input-number.mrx-input-number-md:not(.mrx-input-number-with-icon) input{padding:calc(var(--spacing-2) + var(--spacing-half) - var(--border-width-default)) var(--spacing-4)}.mrx-input-number.mrx-input-number.mrx-input-number-md.mrx-input-number-with-icon input{padding:calc(var(--spacing-2) + var(--spacing-half) - var(--border-width-default)) var(--spacing-4) calc(var(--spacing-2) + var(--spacing-half) - var(--border-width-default)) calc(var(--spacing-module) * 10)}.mrx-input-number.mrx-input-number.mrx-input-number-sm input{font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height)}.mrx-input-number.mrx-input-number.mrx-input-number-sm:not(.mrx-input-number-with-icon) input{padding:calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-4)}.mrx-input-number.mrx-input-number.mrx-input-number-sm.mrx-input-number-with-icon input{padding:calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-4) calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-8)}.mrx-input-number.mrx-input-number.mrx-input-error input{border-color:var(--system-bg-controls-negative-default)}.mrx-input-number.mrx-input-number.mrx-input-checked-error input{border-color:var(--system-bg-controls-negative-default);background-color:var(--system-bg-negative-secondary)}.mrx-input-number.mrx-input-number.mrx-input-checked-success input{background-color:var(--system-bg-positive-secondary);border-color:var(--system-bg-controls-positive-default)}.mrx-input-number.mrx-input-number.-disabled input{background-color:var(--neutral-bg-disabled, #EEF0F4);-webkit-text-fill-color:var(--neutral-text-tertiary, #71767E);color:var(--neutral-text-tertiary, #71767E)}.mrx-input-number.mrx-input-number.-readonly input{background-color:var(--neutral-bg-disabled, #EEF0F4);-webkit-text-fill-color:var(--neutral-text-primary, #262626);color:var(--neutral-text-primary, #262626)}\n"] }]
|
|
11081
|
+
], template: "<div\r\n class=\"mrx-input-number\"\r\n [class]=\"getClasses\"\r\n [class.mrx-input-error]=\"!isValid || invalid\"\r\n [class.-disabled]=\"disabled\"\r\n [class.-readonly]=\"readonly\"\r\n>\r\n <div class=\"mrx-input-number__wrapper\">\r\n <form [formGroup]=\"numberForm\">\r\n <div>\r\n <input\r\n #inputElement\r\n autocomplete=\"nope\"\r\n formControlName=\"number\"\r\n type=\"text\"\r\n [thousandSeparator]=\"thousandsSeparator\"\r\n [decimalMarker]=\"decimalMarker\"\r\n [class]=\"innerClass\"\r\n [mask]=\"'separator.' + decimals\"\r\n [allowNegativeNumbers]=\"allowNegative\"\r\n [placeholder]=\"placeholder ? placeholder : ''\"\r\n (blur)=\"onBlur($event)\"\r\n (paste)=\"onPaste($event)\"\r\n />\r\n </div>\r\n </form>\r\n </div>\r\n\r\n <mrx-error-message *ngIf=\"!isValid && invalidMessageStart\">\r\n {{invalidMessageStart}}\r\n <a href=\"#\" (click)=\"resetToMax($event)\">{{maxMessage}}</a>\r\n {{invalidMessageEnd}}\r\n </mrx-error-message>\r\n\r\n <mrx-save-state [id]=\"uuid\" [fields]=\"fields\"></mrx-save-state>\r\n</div>\r\n", styles: [".mrx-input-number.mrx-input-number{width:100%;position:relative}.mrx-input-number.mrx-input-number .mrx-input-text__wrapper{position:relative}.mrx-input-number.mrx-input-number input{box-sizing:border-box;border:var(--border-width-default) solid var(--neutral-bg-stroke-default);border-radius:var(--border-radius-1);width:100%;outline:none;transition:outline-width .2s,border .2s}.mrx-input-number.mrx-input-number input:focus,.mrx-input-number.mrx-input-number input:active{outline:var(--neutral-bg-island-default) solid var(--border-width-focused)}.mrx-input-number.mrx-input-number input:hover{border:var(--border-width-default) solid var(--neutral-bg-stroke-hover)}.mrx-input-number.mrx-input-number.mrx-input__readonly input[type=tel]:disabled{background-color:inherit}.mrx-input-number.mrx-input-number.mrx-input__readonly input{background-color:inherit}.mrx-input-number.mrx-input-number.mrx-input-number-lg input{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-input-number.mrx-input-number.mrx-input-number-lg:not(.mrx-input-number-with-icon) input{padding:calc(var(--spacing-3) + var(--spacing-half) - var(--border-width-default)) var(--spacing-4)}.mrx-input-number.mrx-input-number.mrx-input-number-lg.mrx-input-number-with-icon input{padding:calc(var(--spacing-3) + var(--spacing-half) - var(--border-width-default)) var(--spacing-4) calc(var(--spacing-3) + var(--spacing-half) - var(--border-width-default)) calc(var(--spacing-module) * 10)}.mrx-input-number.mrx-input-number.mrx-input-number-md input{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-input-number.mrx-input-number.mrx-input-number-md:not(.mrx-input-number-with-icon) input{padding:calc(var(--spacing-2) + var(--spacing-half) - var(--border-width-default)) var(--spacing-4)}.mrx-input-number.mrx-input-number.mrx-input-number-md.mrx-input-number-with-icon input{padding:calc(var(--spacing-2) + var(--spacing-half) - var(--border-width-default)) var(--spacing-4) calc(var(--spacing-2) + var(--spacing-half) - var(--border-width-default)) calc(var(--spacing-module) * 10)}.mrx-input-number.mrx-input-number.mrx-input-number-sm input{font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height)}.mrx-input-number.mrx-input-number.mrx-input-number-sm:not(.mrx-input-number-with-icon) input{padding:calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-4)}.mrx-input-number.mrx-input-number.mrx-input-number-sm.mrx-input-number-with-icon input{padding:calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-4) calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-8)}.mrx-input-number.mrx-input-number.mrx-input-error input{border-color:var(--system-bg-controls-negative-default)}.mrx-input-number.mrx-input-number.mrx-input-checked-error input{border-color:var(--system-bg-controls-negative-default);background-color:var(--system-bg-negative-secondary)}.mrx-input-number.mrx-input-number.mrx-input-checked-success input{background-color:var(--system-bg-positive-secondary);border-color:var(--system-bg-controls-positive-default)}.mrx-input-number.mrx-input-number.-disabled input{background-color:var(--neutral-bg-disabled, #EEF0F4);-webkit-text-fill-color:var(--neutral-text-tertiary, #71767E);color:var(--neutral-text-tertiary, #71767E)}.mrx-input-number.mrx-input-number.-readonly input{background-color:var(--neutral-bg-disabled, #EEF0F4);-webkit-text-fill-color:var(--neutral-text-primary, #262626);color:var(--neutral-text-primary, #262626)}\n"] }]
|
|
11061
11082
|
}], ctorParameters: function () { return [{ type: i4.FormBuilder }]; }, propDecorators: { fields: [{
|
|
11062
11083
|
type: Input
|
|
11063
11084
|
}], placeholder: [{
|