myrta-ui 17.1.7 → 17.1.9
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/esm2022/lib/components/form/editor/editor.component.mjs +2 -2
- package/esm2022/lib/components/form/input-date-time/input-date-time.component.mjs +9 -6
- package/esm2022/lib/components/form/input-select/input-select.component.mjs +2 -2
- package/esm2022/lib/components/form/input-text/input-text.component.mjs +2 -2
- package/fesm2022/myrta-ui.mjs +14 -11
- package/fesm2022/myrta-ui.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -129,7 +129,7 @@ export class InputTextComponent {
|
|
|
129
129
|
useExisting: forwardRef(() => InputTextComponent),
|
|
130
130
|
multi: true,
|
|
131
131
|
},
|
|
132
|
-
], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }], ngImport: i0, template: "<div\r\n class=\"mrx-input-text\"\r\n [class]=\"getClasses\"\r\n [class.mrx-input-error]=\"invalid\"\r\n [class.mrx-input-text-with-icon]=\"icon\"\r\n [class.-disabled]=\"disabled\"\r\n [class.-readonly]=\"readonly\"\r\n [mrxCdkTooltip]=\"getTooltipValue\"\r\n [tooltipPosition]=\"'top-start'\"\r\n>\r\n <div class=\"mrx-input-text__wrapper\">\r\n <span *ngIf=\"icon\" class=\"mrx-icon mrx-input-text-icon\" [class]=\"getIconClass\"></span>\r\n\r\n <input\r\n autocomplete=\"nope\"\r\n #inputElement\r\n [type]=\"'text'\"\r\n [ngModel]=\"value\"\r\n (ngModelChange)=\"updateValue($event)\"\r\n (blur)=\"updateSelection($event)\"\r\n [attr.title]=\"placeholder || ''\"\r\n [disabled]=\"disabled\"\r\n [readOnly]=\"readonly\"\r\n [attr.minlength]=\"minlength > 0 ? minlength : null\"\r\n [attr.maxlength]=\"maxlength > 0 ? maxlength : null\"\r\n [attr.placeholder]=\"!disabled && placeholder ? placeholder : ''\"\r\n [mask]=\"mask\"\r\n [prefix]=\"maskPrefix\"\r\n [showMaskTyped]=\"showMaskTyped\"\r\n [dropSpecialCharacters]=\"maskDropSpecialCharacters\"\r\n />\r\n\r\n <mrx-chars-left\r\n *ngIf=\"!disabled && maxlength\"\r\n [value]=\"value\"\r\n [maxlength]=\"maxlength\">\r\n </mrx-chars-left>\r\n </div>\r\n\r\n <mrx-error-message\r\n *ngIf=\"(!isValid || invalid) && isInvalidMessage\"\r\n [invalidMessage]=\"invalidMessage\"\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-text.mrx-input-text{width:100%;position:relative}.mrx-input-text.mrx-input-text .mrx-input-text__wrapper{position:relative}.mrx-input-text.mrx-input-text 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-text.mrx-input-text input:focus,.mrx-input-text.mrx-input-text input:active{outline:var(--neutral-bg-island-default) solid var(--border-width-focused)}.mrx-input-text.mrx-input-text input:hover{border:var(--border-width-default) solid var(--neutral-bg-stroke-hover)}.mrx-input-text.mrx-input-text.mrx-input-text-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-text.mrx-input-text.mrx-input-text-lg:not(.mrx-input-text-with-icon) input{padding:calc(var(--spacing-3) + var(--spacing-half) - var(--border-width-default)) var(--spacing-4)}.mrx-input-text.mrx-input-text.mrx-input-text-lg.mrx-input-text-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-text.mrx-input-text.mrx-input-text-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-text.mrx-input-text.mrx-input-text-md:not(.mrx-input-text-with-icon) input{padding:calc(var(--spacing-2) + var(--spacing-half) - var(--border-width-default)) var(--spacing-4)}.mrx-input-text.mrx-input-text.mrx-input-text-md.mrx-input-text-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-text.mrx-input-text.mrx-input-text-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-text.mrx-input-text.mrx-input-text-sm:not(.mrx-input-text-with-icon) input{padding:calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-4)}.mrx-input-text.mrx-input-text.mrx-input-text-sm.mrx-input-text-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-text.mrx-input-text.mrx-input-error input{border-color:var(--system-bg-controls-negative-default)}.mrx-input-text.mrx-input-text.mrx-input-error input:hover{border:var(--border-width-default) solid var(--system-bg-controls-negative-default)}.mrx-input-text.mrx-input-text.mrx-input-checked-error input{border-color:var(--system-bg-controls-negative-default);background-color:var(--system-bg-negative-secondary)}.mrx-input-text.mrx-input-text.mrx-input-checked-error input:hover{border:var(--border-width-default) solid var(--system-bg-controls-negative-default)}.mrx-input-text.mrx-input-text.mrx-input-checked-success input{background-color:var(--system-bg-positive-secondary);border-color:var(--system-bg-controls-positive-default)}.mrx-input-text.mrx-input-text.mrx-input-checked-success input:hover{border:var(--border-width-default) solid var(--system-bg-controls-positive-default)}.mrx-input-text.mrx-input-text.mrx-input-text-with-icon.mrx-input-text-lg .mrx-input-text-icon{position:absolute;top:calc(var(--spacing-3) - 1px);left:calc(var(--spacing-3) - 1px)}.mrx-input-text.mrx-input-text.mrx-input-text-with-icon.mrx-input-text-md .mrx-input-text-icon,.mrx-input-text.mrx-input-text.mrx-input-text-with-icon.mrx-input-text-sm .mrx-input-text-icon{position:absolute;top:calc(var(--spacing-2) - 1px);left:calc(var(--spacing-2) - 1px)}.mrx-input-text.mrx-input-text.-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-text.mrx-input-text.-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"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.CharsLeftComponent, selector: "mrx-chars-left", inputs: ["maxlength", "valueLength", "value"] }, { kind: "component", type: i4.ErrorMessageComponent, selector: "mrx-error-message", inputs: ["invalid", "invalidMessage", "customClasses"] }, { kind: "component", type: i5.SaveStateComponent, selector: "mrx-save-state", inputs: ["type", "fields", "id"] }, { kind: "directive", type: i6.CdkTooltipDirective, selector: "[mrxCdkTooltip]", inputs: ["mrxCdkTooltip", "tooltipActive", "autoCloseByScroll", "tooltipPosition", "tooltipMaxWidth"] }, { kind: "directive", type: i7.NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
132
|
+
], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }], ngImport: i0, template: "<div\r\n class=\"mrx-input-text\"\r\n [class]=\"getClasses\"\r\n [class.mrx-input-error]=\"invalid\"\r\n [class.mrx-input-text-with-icon]=\"icon\"\r\n [class.-disabled]=\"disabled\"\r\n [class.-readonly]=\"readonly\"\r\n [mrxCdkTooltip]=\"getTooltipValue\"\r\n [tooltipPosition]=\"'top-start'\"\r\n>\r\n <div class=\"mrx-input-text__wrapper\">\r\n <span *ngIf=\"icon\" class=\"mrx-icon mrx-input-text-icon\" [class]=\"getIconClass\"></span>\r\n\r\n <input\r\n autocomplete=\"nope\"\r\n #inputElement\r\n [type]=\"'text'\"\r\n [ngModel]=\"value\"\r\n (ngModelChange)=\"updateValue($event)\"\r\n (blur)=\"updateSelection($event)\"\r\n [attr.title]=\"placeholder || ''\"\r\n [disabled]=\"disabled\"\r\n [readOnly]=\"readonly\"\r\n [attr.minlength]=\"minlength > 0 ? minlength : null\"\r\n [attr.maxlength]=\"maxlength > 0 ? maxlength : null\"\r\n [attr.placeholder]=\"!disabled && placeholder ? placeholder : ''\"\r\n [mask]=\"mask\"\r\n [prefix]=\"maskPrefix\"\r\n [showMaskTyped]=\"showMaskTyped\"\r\n [dropSpecialCharacters]=\"maskDropSpecialCharacters\"\r\n />\r\n\r\n <mrx-chars-left\r\n *ngIf=\"!disabled && maxlength\"\r\n [value]=\"value\"\r\n [maxlength]=\"maxlength\">\r\n </mrx-chars-left>\r\n </div>\r\n\r\n <mrx-error-message\r\n *ngIf=\"(!isValid || invalid) && isInvalidMessage\"\r\n [invalidMessage]=\"invalidMessage\"\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-text.mrx-input-text{width:100%;position:relative}.mrx-input-text.mrx-input-text .mrx-input-text__wrapper{position:relative}.mrx-input-text.mrx-input-text 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-text.mrx-input-text input:focus,.mrx-input-text.mrx-input-text input:active{outline:var(--neutral-bg-island-default) solid var(--border-width-focused)}.mrx-input-text.mrx-input-text input:hover{border:var(--border-width-default) solid var(--neutral-bg-stroke-hover)}.mrx-input-text.mrx-input-text.mrx-input-text-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-text.mrx-input-text.mrx-input-text-lg:not(.mrx-input-text-with-icon) input{padding:calc(var(--spacing-3) + var(--spacing-half) - var(--border-width-default)) var(--spacing-4)}.mrx-input-text.mrx-input-text.mrx-input-text-lg.mrx-input-text-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-text.mrx-input-text.mrx-input-text-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-text.mrx-input-text.mrx-input-text-md:not(.mrx-input-text-with-icon) input{padding:calc(var(--spacing-2) + var(--spacing-half) - var(--border-width-default)) var(--spacing-4)}.mrx-input-text.mrx-input-text.mrx-input-text-md.mrx-input-text-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-text.mrx-input-text.mrx-input-text-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-text.mrx-input-text.mrx-input-text-sm:not(.mrx-input-text-with-icon) input{padding:calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-4)}.mrx-input-text.mrx-input-text.mrx-input-text-sm.mrx-input-text-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-text.mrx-input-text.mrx-input-error input{border-color:var(--system-bg-controls-negative-default)}.mrx-input-text.mrx-input-text.mrx-input-error input:hover{border:var(--border-width-default) solid var(--system-bg-controls-negative-default)}.mrx-input-text.mrx-input-text.mrx-input-checked-error input{border-color:var(--system-bg-controls-negative-default);background-color:var(--system-bg-negative-secondary)}.mrx-input-text.mrx-input-text.mrx-input-checked-error input:hover{border:var(--border-width-default) solid var(--system-bg-controls-negative-default)}.mrx-input-text.mrx-input-text.mrx-input-checked-success input{background-color:var(--system-bg-positive-secondary);border-color:var(--system-bg-controls-positive-default)}.mrx-input-text.mrx-input-text.mrx-input-checked-success input:hover{border:var(--border-width-default) solid var(--system-bg-controls-positive-default)}.mrx-input-text.mrx-input-text.mrx-input-text-with-icon.mrx-input-text-lg .mrx-input-text-icon{position:absolute;top:calc(var(--spacing-3) - 1px);left:calc(var(--spacing-3) - 1px)}.mrx-input-text.mrx-input-text.mrx-input-text-with-icon.mrx-input-text-md .mrx-input-text-icon,.mrx-input-text.mrx-input-text.mrx-input-text-with-icon.mrx-input-text-sm .mrx-input-text-icon{position:absolute;top:calc(var(--spacing-2) - 1px);left:calc(var(--spacing-2) - 1px)}.mrx-input-text.mrx-input-text.-disabled input{background-color:var(--neutral-bg-disabled, #EEF0F4);-webkit-text-fill-color:var(--neutral-text-tertiary, #71767E);color:var(--neutral-text-tertiary, #71767E);border-color:var(--neutral-bg-stroke-default)}.mrx-input-text.mrx-input-text.-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"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.CharsLeftComponent, selector: "mrx-chars-left", inputs: ["maxlength", "valueLength", "value"] }, { kind: "component", type: i4.ErrorMessageComponent, selector: "mrx-error-message", inputs: ["invalid", "invalidMessage", "customClasses"] }, { kind: "component", type: i5.SaveStateComponent, selector: "mrx-save-state", inputs: ["type", "fields", "id"] }, { kind: "directive", type: i6.CdkTooltipDirective, selector: "[mrxCdkTooltip]", inputs: ["mrxCdkTooltip", "tooltipActive", "autoCloseByScroll", "tooltipPosition", "tooltipMaxWidth"] }, { kind: "directive", type: i7.NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
133
133
|
}
|
|
134
134
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputTextComponent, decorators: [{
|
|
135
135
|
type: Component,
|
|
@@ -139,7 +139,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
139
139
|
useExisting: forwardRef(() => InputTextComponent),
|
|
140
140
|
multi: true,
|
|
141
141
|
},
|
|
142
|
-
], template: "<div\r\n class=\"mrx-input-text\"\r\n [class]=\"getClasses\"\r\n [class.mrx-input-error]=\"invalid\"\r\n [class.mrx-input-text-with-icon]=\"icon\"\r\n [class.-disabled]=\"disabled\"\r\n [class.-readonly]=\"readonly\"\r\n [mrxCdkTooltip]=\"getTooltipValue\"\r\n [tooltipPosition]=\"'top-start'\"\r\n>\r\n <div class=\"mrx-input-text__wrapper\">\r\n <span *ngIf=\"icon\" class=\"mrx-icon mrx-input-text-icon\" [class]=\"getIconClass\"></span>\r\n\r\n <input\r\n autocomplete=\"nope\"\r\n #inputElement\r\n [type]=\"'text'\"\r\n [ngModel]=\"value\"\r\n (ngModelChange)=\"updateValue($event)\"\r\n (blur)=\"updateSelection($event)\"\r\n [attr.title]=\"placeholder || ''\"\r\n [disabled]=\"disabled\"\r\n [readOnly]=\"readonly\"\r\n [attr.minlength]=\"minlength > 0 ? minlength : null\"\r\n [attr.maxlength]=\"maxlength > 0 ? maxlength : null\"\r\n [attr.placeholder]=\"!disabled && placeholder ? placeholder : ''\"\r\n [mask]=\"mask\"\r\n [prefix]=\"maskPrefix\"\r\n [showMaskTyped]=\"showMaskTyped\"\r\n [dropSpecialCharacters]=\"maskDropSpecialCharacters\"\r\n />\r\n\r\n <mrx-chars-left\r\n *ngIf=\"!disabled && maxlength\"\r\n [value]=\"value\"\r\n [maxlength]=\"maxlength\">\r\n </mrx-chars-left>\r\n </div>\r\n\r\n <mrx-error-message\r\n *ngIf=\"(!isValid || invalid) && isInvalidMessage\"\r\n [invalidMessage]=\"invalidMessage\"\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-text.mrx-input-text{width:100%;position:relative}.mrx-input-text.mrx-input-text .mrx-input-text__wrapper{position:relative}.mrx-input-text.mrx-input-text 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-text.mrx-input-text input:focus,.mrx-input-text.mrx-input-text input:active{outline:var(--neutral-bg-island-default) solid var(--border-width-focused)}.mrx-input-text.mrx-input-text input:hover{border:var(--border-width-default) solid var(--neutral-bg-stroke-hover)}.mrx-input-text.mrx-input-text.mrx-input-text-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-text.mrx-input-text.mrx-input-text-lg:not(.mrx-input-text-with-icon) input{padding:calc(var(--spacing-3) + var(--spacing-half) - var(--border-width-default)) var(--spacing-4)}.mrx-input-text.mrx-input-text.mrx-input-text-lg.mrx-input-text-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-text.mrx-input-text.mrx-input-text-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-text.mrx-input-text.mrx-input-text-md:not(.mrx-input-text-with-icon) input{padding:calc(var(--spacing-2) + var(--spacing-half) - var(--border-width-default)) var(--spacing-4)}.mrx-input-text.mrx-input-text.mrx-input-text-md.mrx-input-text-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-text.mrx-input-text.mrx-input-text-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-text.mrx-input-text.mrx-input-text-sm:not(.mrx-input-text-with-icon) input{padding:calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-4)}.mrx-input-text.mrx-input-text.mrx-input-text-sm.mrx-input-text-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-text.mrx-input-text.mrx-input-error input{border-color:var(--system-bg-controls-negative-default)}.mrx-input-text.mrx-input-text.mrx-input-error input:hover{border:var(--border-width-default) solid var(--system-bg-controls-negative-default)}.mrx-input-text.mrx-input-text.mrx-input-checked-error input{border-color:var(--system-bg-controls-negative-default);background-color:var(--system-bg-negative-secondary)}.mrx-input-text.mrx-input-text.mrx-input-checked-error input:hover{border:var(--border-width-default) solid var(--system-bg-controls-negative-default)}.mrx-input-text.mrx-input-text.mrx-input-checked-success input{background-color:var(--system-bg-positive-secondary);border-color:var(--system-bg-controls-positive-default)}.mrx-input-text.mrx-input-text.mrx-input-checked-success input:hover{border:var(--border-width-default) solid var(--system-bg-controls-positive-default)}.mrx-input-text.mrx-input-text.mrx-input-text-with-icon.mrx-input-text-lg .mrx-input-text-icon{position:absolute;top:calc(var(--spacing-3) - 1px);left:calc(var(--spacing-3) - 1px)}.mrx-input-text.mrx-input-text.mrx-input-text-with-icon.mrx-input-text-md .mrx-input-text-icon,.mrx-input-text.mrx-input-text.mrx-input-text-with-icon.mrx-input-text-sm .mrx-input-text-icon{position:absolute;top:calc(var(--spacing-2) - 1px);left:calc(var(--spacing-2) - 1px)}.mrx-input-text.mrx-input-text.-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-text.mrx-input-text.-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"] }]
|
|
142
|
+
], template: "<div\r\n class=\"mrx-input-text\"\r\n [class]=\"getClasses\"\r\n [class.mrx-input-error]=\"invalid\"\r\n [class.mrx-input-text-with-icon]=\"icon\"\r\n [class.-disabled]=\"disabled\"\r\n [class.-readonly]=\"readonly\"\r\n [mrxCdkTooltip]=\"getTooltipValue\"\r\n [tooltipPosition]=\"'top-start'\"\r\n>\r\n <div class=\"mrx-input-text__wrapper\">\r\n <span *ngIf=\"icon\" class=\"mrx-icon mrx-input-text-icon\" [class]=\"getIconClass\"></span>\r\n\r\n <input\r\n autocomplete=\"nope\"\r\n #inputElement\r\n [type]=\"'text'\"\r\n [ngModel]=\"value\"\r\n (ngModelChange)=\"updateValue($event)\"\r\n (blur)=\"updateSelection($event)\"\r\n [attr.title]=\"placeholder || ''\"\r\n [disabled]=\"disabled\"\r\n [readOnly]=\"readonly\"\r\n [attr.minlength]=\"minlength > 0 ? minlength : null\"\r\n [attr.maxlength]=\"maxlength > 0 ? maxlength : null\"\r\n [attr.placeholder]=\"!disabled && placeholder ? placeholder : ''\"\r\n [mask]=\"mask\"\r\n [prefix]=\"maskPrefix\"\r\n [showMaskTyped]=\"showMaskTyped\"\r\n [dropSpecialCharacters]=\"maskDropSpecialCharacters\"\r\n />\r\n\r\n <mrx-chars-left\r\n *ngIf=\"!disabled && maxlength\"\r\n [value]=\"value\"\r\n [maxlength]=\"maxlength\">\r\n </mrx-chars-left>\r\n </div>\r\n\r\n <mrx-error-message\r\n *ngIf=\"(!isValid || invalid) && isInvalidMessage\"\r\n [invalidMessage]=\"invalidMessage\"\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-text.mrx-input-text{width:100%;position:relative}.mrx-input-text.mrx-input-text .mrx-input-text__wrapper{position:relative}.mrx-input-text.mrx-input-text 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-text.mrx-input-text input:focus,.mrx-input-text.mrx-input-text input:active{outline:var(--neutral-bg-island-default) solid var(--border-width-focused)}.mrx-input-text.mrx-input-text input:hover{border:var(--border-width-default) solid var(--neutral-bg-stroke-hover)}.mrx-input-text.mrx-input-text.mrx-input-text-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-text.mrx-input-text.mrx-input-text-lg:not(.mrx-input-text-with-icon) input{padding:calc(var(--spacing-3) + var(--spacing-half) - var(--border-width-default)) var(--spacing-4)}.mrx-input-text.mrx-input-text.mrx-input-text-lg.mrx-input-text-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-text.mrx-input-text.mrx-input-text-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-text.mrx-input-text.mrx-input-text-md:not(.mrx-input-text-with-icon) input{padding:calc(var(--spacing-2) + var(--spacing-half) - var(--border-width-default)) var(--spacing-4)}.mrx-input-text.mrx-input-text.mrx-input-text-md.mrx-input-text-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-text.mrx-input-text.mrx-input-text-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-text.mrx-input-text.mrx-input-text-sm:not(.mrx-input-text-with-icon) input{padding:calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-4)}.mrx-input-text.mrx-input-text.mrx-input-text-sm.mrx-input-text-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-text.mrx-input-text.mrx-input-error input{border-color:var(--system-bg-controls-negative-default)}.mrx-input-text.mrx-input-text.mrx-input-error input:hover{border:var(--border-width-default) solid var(--system-bg-controls-negative-default)}.mrx-input-text.mrx-input-text.mrx-input-checked-error input{border-color:var(--system-bg-controls-negative-default);background-color:var(--system-bg-negative-secondary)}.mrx-input-text.mrx-input-text.mrx-input-checked-error input:hover{border:var(--border-width-default) solid var(--system-bg-controls-negative-default)}.mrx-input-text.mrx-input-text.mrx-input-checked-success input{background-color:var(--system-bg-positive-secondary);border-color:var(--system-bg-controls-positive-default)}.mrx-input-text.mrx-input-text.mrx-input-checked-success input:hover{border:var(--border-width-default) solid var(--system-bg-controls-positive-default)}.mrx-input-text.mrx-input-text.mrx-input-text-with-icon.mrx-input-text-lg .mrx-input-text-icon{position:absolute;top:calc(var(--spacing-3) - 1px);left:calc(var(--spacing-3) - 1px)}.mrx-input-text.mrx-input-text.mrx-input-text-with-icon.mrx-input-text-md .mrx-input-text-icon,.mrx-input-text.mrx-input-text.mrx-input-text-with-icon.mrx-input-text-sm .mrx-input-text-icon{position:absolute;top:calc(var(--spacing-2) - 1px);left:calc(var(--spacing-2) - 1px)}.mrx-input-text.mrx-input-text.-disabled input{background-color:var(--neutral-bg-disabled, #EEF0F4);-webkit-text-fill-color:var(--neutral-text-tertiary, #71767E);color:var(--neutral-text-tertiary, #71767E);border-color:var(--neutral-bg-stroke-default)}.mrx-input-text.mrx-input-text.-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"] }]
|
|
143
143
|
}], propDecorators: { fields: [{
|
|
144
144
|
type: Input
|
|
145
145
|
}], disabled: [{
|