myrta-ui 17.1.42 → 17.1.44

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.
Files changed (10) hide show
  1. package/esm2022/lib/components/form/checkbox-group/checkbox-group.component.mjs +20 -8
  2. package/esm2022/lib/components/form/checkbox-group/components/checkbox-group-header/checkbox-group-header.component.mjs +25 -6
  3. package/esm2022/lib/components/form/input-number/input-number.component.mjs +12 -4
  4. package/esm2022/lib/components/form/input-text/input-text.component.mjs +2 -2
  5. package/fesm2022/myrta-ui.mjs +47 -10
  6. package/fesm2022/myrta-ui.mjs.map +1 -1
  7. package/lib/components/form/checkbox-group/checkbox-group.component.d.ts +4 -1
  8. package/lib/components/form/checkbox-group/components/checkbox-group-header/checkbox-group-header.component.d.ts +6 -1
  9. package/lib/components/form/input-number/input-number.component.d.ts +2 -0
  10. package/package.json +1 -1
package/esm2022/lib/components/form/input-text/input-text.component.mjs CHANGED
@@ -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);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 });
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)!important}.mrx-input-text.mrx-input-text.mrx-input-error input:hover{border:var(--border-width-default) solid var(--system-bg-controls-negative-default)!important}.mrx-input-text.mrx-input-text.mrx-input-checked-error input{border-color:var(--system-bg-controls-negative-default)!important;background-color:var(--system-bg-negative-secondary)!important}.mrx-input-text.mrx-input-text.mrx-input-checked-error input:hover{border:var(--border-width-default) solid var(--system-bg-controls-negative-default)!important}.mrx-input-text.mrx-input-text.mrx-input-checked-success input{background-color:var(--system-bg-positive-secondary)!important;border-color:var(--system-bg-controls-positive-default)!important}.mrx-input-text.mrx-input-text.mrx-input-checked-success input:hover{border:var(--border-width-default) solid var(--system-bg-controls-positive-default)!important}.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);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"] }]
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)!important}.mrx-input-text.mrx-input-text.mrx-input-error input:hover{border:var(--border-width-default) solid var(--system-bg-controls-negative-default)!important}.mrx-input-text.mrx-input-text.mrx-input-checked-error input{border-color:var(--system-bg-controls-negative-default)!important;background-color:var(--system-bg-negative-secondary)!important}.mrx-input-text.mrx-input-text.mrx-input-checked-error input:hover{border:var(--border-width-default) solid var(--system-bg-controls-negative-default)!important}.mrx-input-text.mrx-input-text.mrx-input-checked-success input{background-color:var(--system-bg-positive-secondary)!important;border-color:var(--system-bg-controls-positive-default)!important}.mrx-input-text.mrx-input-text.mrx-input-checked-success input:hover{border:var(--border-width-default) solid var(--system-bg-controls-positive-default)!important}.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: [{
package/fesm2022/myrta-ui.mjs CHANGED
@@ -3742,7 +3742,7 @@ class InputTextComponent {
3742
3742
  useExisting: forwardRef(() => InputTextComponent),
3743
3743
  multi: true,
3744
3744
  },
3745
- ], 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$1.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: CharsLeftComponent, selector: "mrx-chars-left", inputs: ["maxlength", "valueLength", "value"] }, { kind: "component", type: ErrorMessageComponent, selector: "mrx-error-message", inputs: ["invalid", "invalidMessage", "customClasses"] }, { kind: "component", type: SaveStateComponent, selector: "mrx-save-state", inputs: ["type", "fields", "id"] }, { kind: "directive", type: CdkTooltipDirective, selector: "[mrxCdkTooltip]", inputs: ["mrxCdkTooltip", "tooltipActive", "autoCloseByScroll", "tooltipPosition", "tooltipMaxWidth"] }, { kind: "directive", type: i6.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 });
3745
+ ], 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)!important}.mrx-input-text.mrx-input-text.mrx-input-error input:hover{border:var(--border-width-default) solid var(--system-bg-controls-negative-default)!important}.mrx-input-text.mrx-input-text.mrx-input-checked-error input{border-color:var(--system-bg-controls-negative-default)!important;background-color:var(--system-bg-negative-secondary)!important}.mrx-input-text.mrx-input-text.mrx-input-checked-error input:hover{border:var(--border-width-default) solid var(--system-bg-controls-negative-default)!important}.mrx-input-text.mrx-input-text.mrx-input-checked-success input{background-color:var(--system-bg-positive-secondary)!important;border-color:var(--system-bg-controls-positive-default)!important}.mrx-input-text.mrx-input-text.mrx-input-checked-success input:hover{border:var(--border-width-default) solid var(--system-bg-controls-positive-default)!important}.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$1.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: CharsLeftComponent, selector: "mrx-chars-left", inputs: ["maxlength", "valueLength", "value"] }, { kind: "component", type: ErrorMessageComponent, selector: "mrx-error-message", inputs: ["invalid", "invalidMessage", "customClasses"] }, { kind: "component", type: SaveStateComponent, selector: "mrx-save-state", inputs: ["type", "fields", "id"] }, { kind: "directive", type: CdkTooltipDirective, selector: "[mrxCdkTooltip]", inputs: ["mrxCdkTooltip", "tooltipActive", "autoCloseByScroll", "tooltipPosition", "tooltipMaxWidth"] }, { kind: "directive", type: i6.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 });
3746
3746
  }
3747
3747
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputTextComponent, decorators: [{
3748
3748
  type: Component,
@@ -3752,7 +3752,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
3752
3752
  useExisting: forwardRef(() => InputTextComponent),
3753
3753
  multi: true,
3754
3754
  },
3755
- ], 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"] }]
3755
+ ], 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)!important}.mrx-input-text.mrx-input-text.mrx-input-error input:hover{border:var(--border-width-default) solid var(--system-bg-controls-negative-default)!important}.mrx-input-text.mrx-input-text.mrx-input-checked-error input{border-color:var(--system-bg-controls-negative-default)!important;background-color:var(--system-bg-negative-secondary)!important}.mrx-input-text.mrx-input-text.mrx-input-checked-error input:hover{border:var(--border-width-default) solid var(--system-bg-controls-negative-default)!important}.mrx-input-text.mrx-input-text.mrx-input-checked-success input{background-color:var(--system-bg-positive-secondary)!important;border-color:var(--system-bg-controls-positive-default)!important}.mrx-input-text.mrx-input-text.mrx-input-checked-success input:hover{border:var(--border-width-default) solid var(--system-bg-controls-positive-default)!important}.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"] }]
3756
3756
  }], propDecorators: { fields: [{
3757
3757
  type: Input
3758
3758
  }], disabled: [{
@@ -11830,8 +11830,16 @@ class InputNumberComponent {
11830
11830
  });
11831
11831
  InputNumberComponent.initNumberFormat();
11832
11832
  }
11833
+ get readonlyClass() {
11834
+ return this.readonly ? 'mrx-input__readonly' : '';
11835
+ }
11836
+ get checkValidClasses() {
11837
+ return this.checkInvalid === false ?
11838
+ 'mrx-input-checked-success' :
11839
+ this.checkInvalid === true ? 'mrx-input-checked-error' : '';
11840
+ }
11833
11841
  get getClasses() {
11834
- return `${InputNumberSizesEnum[this.size]} ${this.customClasses}`;
11842
+ return `${InputNumberSizesEnum[this.size]} ${this.customClasses} ${this.readonlyClass} ${this.checkValidClasses}`;
11835
11843
  }
11836
11844
  get decimalMarker() {
11837
11845
  return this.decimalSeparator || InputNumberComponent.decimalMarker || ',';
@@ -11932,13 +11940,13 @@ class InputNumberComponent {
11932
11940
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputNumberComponent, deps: [{ token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
11933
11941
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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", decimals: "decimals", 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: { modelChange: "modelChange" }, providers: [
11934
11942
  { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => InputNumberComponent), multi: true },
11935
- ], 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)=\"onPhoneInputBlur()\"\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"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: SaveStateComponent, selector: "mrx-save-state", inputs: ["type", "fields", "id"] }, { kind: "component", type: ErrorMessageComponent, selector: "mrx-error-message", inputs: ["invalid", "invalidMessage", "customClasses"] }, { kind: "directive", type: i6.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 });
11943
+ ], 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)=\"onPhoneInputBlur()\"\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)!important}.mrx-input-number.mrx-input-number.mrx-input-error input:hover{border:var(--border-width-default) solid var(--system-bg-controls-negative-default)!important}.mrx-input-number.mrx-input-number.mrx-input-checked-error input{border-color:var(--system-bg-controls-negative-default)!important;background-color:var(--system-bg-negative-secondary)!important}.mrx-input-number.mrx-input-number.mrx-input-checked-error input:hover{border:var(--border-width-default) solid var(--system-bg-controls-negative-default)!important}.mrx-input-number.mrx-input-number.mrx-input-checked-success input{background-color:var(--system-bg-positive-secondary)!important;border-color:var(--system-bg-controls-positive-default)!important}.mrx-input-number.mrx-input-number.mrx-input-checked-success input:hover{border:var(--border-width-default) solid var(--system-bg-controls-positive-default)!important}.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"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: SaveStateComponent, selector: "mrx-save-state", inputs: ["type", "fields", "id"] }, { kind: "component", type: ErrorMessageComponent, selector: "mrx-error-message", inputs: ["invalid", "invalidMessage", "customClasses"] }, { kind: "directive", type: i6.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 });
11936
11944
  }
11937
11945
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputNumberComponent, decorators: [{
11938
11946
  type: Component,
11939
11947
  args: [{ selector: 'mrx-input-number', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
11940
11948
  { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => InputNumberComponent), multi: true },
11941
- ], 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)=\"onPhoneInputBlur()\"\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"] }]
11949
+ ], 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)=\"onPhoneInputBlur()\"\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)!important}.mrx-input-number.mrx-input-number.mrx-input-error input:hover{border:var(--border-width-default) solid var(--system-bg-controls-negative-default)!important}.mrx-input-number.mrx-input-number.mrx-input-checked-error input{border-color:var(--system-bg-controls-negative-default)!important;background-color:var(--system-bg-negative-secondary)!important}.mrx-input-number.mrx-input-number.mrx-input-checked-error input:hover{border:var(--border-width-default) solid var(--system-bg-controls-negative-default)!important}.mrx-input-number.mrx-input-number.mrx-input-checked-success input{background-color:var(--system-bg-positive-secondary)!important;border-color:var(--system-bg-controls-positive-default)!important}.mrx-input-number.mrx-input-number.mrx-input-checked-success input:hover{border:var(--border-width-default) solid var(--system-bg-controls-positive-default)!important}.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"] }]
11942
11950
  }], ctorParameters: () => [{ type: i2.FormBuilder }], propDecorators: { fields: [{
11943
11951
  type: Input
11944
11952
  }], placeholder: [{
@@ -13978,6 +13986,8 @@ class CheckboxGroupHeaderComponent {
13978
13986
  searchValue = '';
13979
13987
  searchable = false;
13980
13988
  searchPlaceholder = '';
13989
+ expandable = false;
13990
+ isExpanded = false;
13981
13991
  // LABEL
13982
13992
  tooltip = '';
13983
13993
  labelText = '';
@@ -13985,23 +13995,37 @@ class CheckboxGroupHeaderComponent {
13985
13995
  checkedItemsCount = 0;
13986
13996
  updateCheckboxGroupSearchValue = new EventEmitter();
13987
13997
  clearFilters = new EventEmitter();
13998
+ toggle = new EventEmitter();
13988
13999
  constructor() { }
14000
+ get translateChevron() {
14001
+ return this.isExpanded ? 'rotate(0deg)' : 'rotate(-180deg)';
14002
+ }
13989
14003
  changeSearchValue(searchValue) {
14004
+ this.searchValue = searchValue;
13990
14005
  this.updateCheckboxGroupSearchValue.emit(searchValue);
13991
14006
  }
13992
14007
  onClearFilters() {
13993
14008
  this.clearFilters.emit();
13994
14009
  }
14010
+ onToggle(event) {
14011
+ if (!(event.target instanceof HTMLElement) || !event.target.classList.contains('icon-help')) {
14012
+ this.toggle.emit();
14013
+ }
14014
+ }
13995
14015
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CheckboxGroupHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
13996
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: CheckboxGroupHeaderComponent, selector: "mrx-checkbox-group-header", inputs: { searchable: "searchable", searchPlaceholder: "searchPlaceholder", tooltip: "tooltip", labelText: "labelText", linkText: "linkText", checkedItemsCount: "checkedItemsCount" }, outputs: { updateCheckboxGroupSearchValue: "updateCheckboxGroupSearchValue", clearFilters: "clearFilters" }, ngImport: i0, template: "@if (labelText) {\r\n <mrx-label\r\n [counter]=\"checkedItemsCount\"\r\n [linkText]=\"linkText\"\r\n [tooltip]=\"tooltip\"\r\n (clickedLink)=\"onClearFilters()\"\r\n >\r\n {{ labelText }}\r\n </mrx-label>\r\n}\r\n\r\n@if (searchable) {\r\n <div class=\"mrx-checkbox-group-head--search\">\r\n <mrx-input-search\r\n [ngModel]=\"searchValue\"\r\n [size]=\"'medium'\"\r\n [placeholder]=\"searchPlaceholder\"\r\n (ngModelChange)=\"changeSearchValue($event)\"\r\n ></mrx-input-search>\r\n </div>\r\n}\r\n", styles: [".mrx-checkbox-group-head--search{margin-bottom:12px}\n"], dependencies: [{ 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: InputSearchComponent, selector: "mrx-input-search", inputs: ["disabled", "required", "readonly", "maxlength", "minlength", "placeholder", "invalid", "invalidMessage", "checkInvalid", "customClasses", "mask", "size"], outputs: ["changed", "cleared", "searched"] }, { kind: "component", type: LabelComponent, selector: "mrx-label", inputs: ["requiredHidden", "required", "boldLabel", "disabled", "placeholder", "label", "customClasses", "triggerTextPosition", "isPublicInfo", "publicInfoTooltip", "isSwitch", "switchLabel", "switchValue", "isCheckbox", "checkboxLabel", "checkboxValue", "counter", "linkText", "linkPrevent", "linkType", "linkMonochrome", "href", "triggerType", "tooltip", "tooltipInitialVisible", "isSaveToStorage"], outputs: ["changeSwitchValue", "changeCheckboxValue", "clickedLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
14016
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: CheckboxGroupHeaderComponent, selector: "mrx-checkbox-group-header", inputs: { searchable: "searchable", searchPlaceholder: "searchPlaceholder", expandable: "expandable", isExpanded: "isExpanded", tooltip: "tooltip", labelText: "labelText", linkText: "linkText", checkedItemsCount: "checkedItemsCount" }, outputs: { updateCheckboxGroupSearchValue: "updateCheckboxGroupSearchValue", clearFilters: "clearFilters", toggle: "toggle" }, ngImport: i0, template: "@if (labelText) {\r\n <mrx-label\r\n [class.cursor-pointer]=\"expandable\"\r\n [counter]=\"checkedItemsCount\"\r\n [linkText]=\"linkText\"\r\n [tooltip]=\"tooltip\"\r\n (clickedLink)=\"onClearFilters()\"\r\n (click)=\"expandable && onToggle($event)\"\r\n >\r\n {{ labelText }}\r\n\r\n @if (expandable) {\r\n <span\r\n class=\"mrx-icon icon-chevron-down icon-font-16\"\r\n [style.transform]=\"translateChevron\"\r\n ></span>\r\n }\r\n </mrx-label>\r\n}\r\n\r\n@if (searchable) {\r\n <ng-container *ngIf=\"!expandable || isExpanded\">\r\n <div class=\"mrx-checkbox-group-head--search\">\r\n <mrx-input-search\r\n *ngIf=\"!expandable || isExpanded\"\r\n [ngModel]=\"searchValue\"\r\n [size]=\"'medium'\"\r\n [placeholder]=\"searchPlaceholder\"\r\n (ngModelChange)=\"changeSearchValue($event)\"\r\n ></mrx-input-search>\r\n </div>\r\n </ng-container>\r\n}\r\n", styles: [".mrx-checkbox-group-head--search{margin-bottom:12px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: InputSearchComponent, selector: "mrx-input-search", inputs: ["disabled", "required", "readonly", "maxlength", "minlength", "placeholder", "invalid", "invalidMessage", "checkInvalid", "customClasses", "mask", "size"], outputs: ["changed", "cleared", "searched"] }, { kind: "component", type: LabelComponent, selector: "mrx-label", inputs: ["requiredHidden", "required", "boldLabel", "disabled", "placeholder", "label", "customClasses", "triggerTextPosition", "isPublicInfo", "publicInfoTooltip", "isSwitch", "switchLabel", "switchValue", "isCheckbox", "checkboxLabel", "checkboxValue", "counter", "linkText", "linkPrevent", "linkType", "linkMonochrome", "href", "triggerType", "tooltip", "tooltipInitialVisible", "isSaveToStorage"], outputs: ["changeSwitchValue", "changeCheckboxValue", "clickedLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
13997
14017
  }
13998
14018
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CheckboxGroupHeaderComponent, decorators: [{
13999
14019
  type: Component,
14000
- args: [{ selector: 'mrx-checkbox-group-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (labelText) {\r\n <mrx-label\r\n [counter]=\"checkedItemsCount\"\r\n [linkText]=\"linkText\"\r\n [tooltip]=\"tooltip\"\r\n (clickedLink)=\"onClearFilters()\"\r\n >\r\n {{ labelText }}\r\n </mrx-label>\r\n}\r\n\r\n@if (searchable) {\r\n <div class=\"mrx-checkbox-group-head--search\">\r\n <mrx-input-search\r\n [ngModel]=\"searchValue\"\r\n [size]=\"'medium'\"\r\n [placeholder]=\"searchPlaceholder\"\r\n (ngModelChange)=\"changeSearchValue($event)\"\r\n ></mrx-input-search>\r\n </div>\r\n}\r\n", styles: [".mrx-checkbox-group-head--search{margin-bottom:12px}\n"] }]
14020
+ args: [{ selector: 'mrx-checkbox-group-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (labelText) {\r\n <mrx-label\r\n [class.cursor-pointer]=\"expandable\"\r\n [counter]=\"checkedItemsCount\"\r\n [linkText]=\"linkText\"\r\n [tooltip]=\"tooltip\"\r\n (clickedLink)=\"onClearFilters()\"\r\n (click)=\"expandable && onToggle($event)\"\r\n >\r\n {{ labelText }}\r\n\r\n @if (expandable) {\r\n <span\r\n class=\"mrx-icon icon-chevron-down icon-font-16\"\r\n [style.transform]=\"translateChevron\"\r\n ></span>\r\n }\r\n </mrx-label>\r\n}\r\n\r\n@if (searchable) {\r\n <ng-container *ngIf=\"!expandable || isExpanded\">\r\n <div class=\"mrx-checkbox-group-head--search\">\r\n <mrx-input-search\r\n *ngIf=\"!expandable || isExpanded\"\r\n [ngModel]=\"searchValue\"\r\n [size]=\"'medium'\"\r\n [placeholder]=\"searchPlaceholder\"\r\n (ngModelChange)=\"changeSearchValue($event)\"\r\n ></mrx-input-search>\r\n </div>\r\n </ng-container>\r\n}\r\n", styles: [".mrx-checkbox-group-head--search{margin-bottom:12px}\n"] }]
14001
14021
  }], ctorParameters: () => [], propDecorators: { searchable: [{
14002
14022
  type: Input
14003
14023
  }], searchPlaceholder: [{
14004
14024
  type: Input
14025
+ }], expandable: [{
14026
+ type: Input
14027
+ }], isExpanded: [{
14028
+ type: Input
14005
14029
  }], tooltip: [{
14006
14030
  type: Input
14007
14031
  }], labelText: [{
@@ -14014,6 +14038,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
14014
14038
  type: Output
14015
14039
  }], clearFilters: [{
14016
14040
  type: Output
14041
+ }], toggle: [{
14042
+ type: Output
14017
14043
  }] } });
14018
14044
 
14019
14045
  class CheckboxGroupComponent {
@@ -14036,6 +14062,8 @@ class CheckboxGroupComponent {
14036
14062
  enableMessage = 'Ничего не найдено';
14037
14063
  searchPlaceholder = '';
14038
14064
  customClasses = '';
14065
+ expandable = false;
14066
+ isExpanded = false;
14039
14067
  // TOOLTIP
14040
14068
  tooltip = '';
14041
14069
  // LABEL
@@ -14144,14 +14172,19 @@ class CheckboxGroupComponent {
14144
14172
  this.onChange(checkedList);
14145
14173
  this.onTouched();
14146
14174
  }
14175
+ toggleContent() {
14176
+ if (this.expandable) {
14177
+ this.isExpanded = !this.isExpanded;
14178
+ }
14179
+ }
14147
14180
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CheckboxGroupComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
14148
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: CheckboxGroupComponent, selector: "mrx-checkbox-group", inputs: { fields: "fields", scrollMaxHeight: "scrollMaxHeight", searchable: "searchable", scrollable: "scrollable", sortable: "sortable", disabled: "disabled", readonly: "readonly", enableMessage: "enableMessage", searchPlaceholder: "searchPlaceholder", customClasses: "customClasses", tooltip: "tooltip", labelText: "labelText", linkText: "linkText", invalid: "invalid", invalidMessage: "invalidMessage", items: "items" }, outputs: { changed: "changed", modelChange: "modelChange", changedInner: "changedInner", modelChangeInner: "modelChangeInner", modelItemChange: "modelItemChange" }, providers: [
14181
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: CheckboxGroupComponent, selector: "mrx-checkbox-group", inputs: { fields: "fields", scrollMaxHeight: "scrollMaxHeight", searchable: "searchable", scrollable: "scrollable", sortable: "sortable", disabled: "disabled", readonly: "readonly", enableMessage: "enableMessage", searchPlaceholder: "searchPlaceholder", customClasses: "customClasses", expandable: "expandable", isExpanded: "isExpanded", tooltip: "tooltip", labelText: "labelText", linkText: "linkText", invalid: "invalid", invalidMessage: "invalidMessage", items: "items" }, outputs: { changed: "changed", modelChange: "modelChange", changedInner: "changedInner", modelChangeInner: "modelChangeInner", modelItemChange: "modelItemChange" }, providers: [
14149
14182
  {
14150
14183
  provide: NG_VALUE_ACCESSOR,
14151
14184
  useExisting: forwardRef(() => CheckboxGroupComponent),
14152
14185
  multi: true,
14153
14186
  },
14154
- ], viewQueries: [{ propertyName: "groupItemsWrapper", first: true, predicate: ["groupItemsWrapper"], descendants: true }], ngImport: i0, template: "<div class=\"mrx-checkbox-group\" [class]=\"getClasses\">\r\n <mrx-save-state [id]=\"uuid\" [fields]=\"fields\" type=\"checkboxGroup\"></mrx-save-state>\r\n\r\n <mrx-checkbox-group-header\r\n [searchable]=\"searchable\"\r\n [searchPlaceholder]=\"searchPlaceholder\"\r\n [tooltip]=\"tooltip\"\r\n [labelText]=\"labelText\"\r\n [linkText]=\"linkText\"\r\n [checkedItemsCount]=\"checkedList.length\"\r\n (updateCheckboxGroupSearchValue)=\"updateCheckboxGroupSearchValue($event)\"\r\n (clearFilters)=\"clearFilters()\"\r\n ></mrx-checkbox-group-header>\r\n\r\n @if (filteredList && filteredList.length) {\r\n <div\r\n #groupItemsWrapper\r\n class=\"mrx-checkbox-group-wrapper\"\r\n [class.mrx-checkbox-group-wrapper--scrollable]=\"scrollable\"\r\n [class.--active]=\"getShowScroll\"\r\n [style.max-height]=\"scrollable ? scrollMaxHeight + 'px' : 'auto'\"\r\n >\r\n @for (item of filteredList; track item.id; let last = $last) {\r\n <mrx-checkbox-group-item\r\n [displaced]=\"displaced || false\"\r\n [item]=\"item\"\r\n [isLast]=\"last\"\r\n [animationTrigger]=\"!!isSearchValue\"\r\n [disabled]=\"disabled\"\r\n [readonly]=\"readonly\"\r\n [invalid]=\"invalid\"\r\n (animationEnd)=\"checkHeightGroupWrapper()\"\r\n (checkboxChanged)=\"checkboxChanged($event)\"\r\n ></mrx-checkbox-group-item>\r\n }\r\n </div>\r\n } @else {\r\n <p class=\"mrx-checkbox-group__empty-message\">{{ enableMessage }}</p>\r\n }\r\n\r\n @if (getInvalid && getInvalidMessage) {\r\n <mrx-error-message [invalidMessage]=\"getInvalidMessage\" [customClasses]=\"'mt-2'\"></mrx-error-message>\r\n }\r\n</div>\r\n", styles: [".mrx-checkbox-group{position:relative}.mrx-checkbox-group-wrapper--scrollable{overflow-y:auto;border-width:1px 0 1px 0;border-style:solid;border-color:transparent;padding-top:0;padding-bottom:0;transition:boder-color .2s,padding-top .2s,padding-bottom .2s}.mrx-checkbox-group-wrapper--scrollable::-webkit-scrollbar{width:8px;height:8px}.mrx-checkbox-group-wrapper--scrollable::-webkit-scrollbar-thumb{background:var(--neutral-bg-stroke-default);border-radius:8px}.mrx-checkbox-group-wrapper--scrollable.--active{padding-top:12px;padding-bottom:12px;border-color:var(--neutral-bg-divider)}.mrx-checkbox-group__empty-message{padding-top:12px;padding-bottom:12px}\n"], dependencies: [{ kind: "component", type: SaveStateComponent, selector: "mrx-save-state", inputs: ["type", "fields", "id"] }, { kind: "component", type: ErrorMessageComponent, selector: "mrx-error-message", inputs: ["invalid", "invalidMessage", "customClasses"] }, { kind: "component", type: CheckboxGroupItemComponent, selector: "mrx-checkbox-group-item", inputs: ["displaced", "level", "animationTrigger", "isLast", "disabled", "readonly", "invalid", "item"], outputs: ["animationEnd", "checkboxChanged"] }, { kind: "component", type: CheckboxGroupHeaderComponent, selector: "mrx-checkbox-group-header", inputs: ["searchable", "searchPlaceholder", "tooltip", "labelText", "linkText", "checkedItemsCount"], outputs: ["updateCheckboxGroupSearchValue", "clearFilters"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
14187
+ ], viewQueries: [{ propertyName: "groupItemsWrapper", first: true, predicate: ["groupItemsWrapper"], descendants: true }], ngImport: i0, template: "<div class=\"mrx-checkbox-group\" [class]=\"getClasses\">\r\n <mrx-save-state [id]=\"uuid\" [fields]=\"fields\" type=\"checkboxGroup\"></mrx-save-state>\r\n\r\n <mrx-checkbox-group-header\r\n [searchable]=\"searchable\"\r\n [searchPlaceholder]=\"searchPlaceholder\"\r\n [tooltip]=\"tooltip\"\r\n [labelText]=\"labelText\"\r\n [linkText]=\"linkText\"\r\n [checkedItemsCount]=\"checkedList.length\"\r\n [expandable]=\"expandable\"\r\n [isExpanded]=\"isExpanded\"\r\n (updateCheckboxGroupSearchValue)=\"updateCheckboxGroupSearchValue($event)\"\r\n (clearFilters)=\"clearFilters()\"\r\n (toggle)=\"toggleContent()\"\r\n ></mrx-checkbox-group-header>\r\n\r\n <ng-container *ngIf=\"!expandable || isExpanded\">\r\n @if (filteredList && filteredList.length) {\r\n <div\r\n #groupItemsWrapper\r\n class=\"mrx-checkbox-group-wrapper\"\r\n [class.mrx-checkbox-group-wrapper--scrollable]=\"scrollable\"\r\n [class.--active]=\"getShowScroll\"\r\n [style.max-height]=\"scrollable ? scrollMaxHeight + 'px' : 'auto'\"\r\n >\r\n @for (item of filteredList; track item.id; let last = $last) {\r\n <mrx-checkbox-group-item\r\n [displaced]=\"displaced || false\"\r\n [item]=\"item\"\r\n [isLast]=\"last\"\r\n [animationTrigger]=\"!!isSearchValue\"\r\n [disabled]=\"disabled\"\r\n [readonly]=\"readonly\"\r\n [invalid]=\"invalid\"\r\n (animationEnd)=\"checkHeightGroupWrapper()\"\r\n (checkboxChanged)=\"checkboxChanged($event)\"\r\n ></mrx-checkbox-group-item>\r\n }\r\n </div>\r\n } @else {\r\n <p class=\"mrx-checkbox-group__empty-message\">{{ enableMessage }}</p>\r\n }\r\n\r\n @if (getInvalid && getInvalidMessage) {\r\n <mrx-error-message [invalidMessage]=\"getInvalidMessage\" [customClasses]=\"'mt-2'\"></mrx-error-message>\r\n }\r\n </ng-container>\r\n</div>\r\n", styles: [".mrx-checkbox-group{position:relative}.mrx-checkbox-group-wrapper--scrollable{overflow-y:auto;border-width:1px 0 1px 0;border-style:solid;border-color:transparent;padding-top:0;padding-bottom:0;transition:boder-color .2s,padding-top .2s,padding-bottom .2s}.mrx-checkbox-group-wrapper--scrollable::-webkit-scrollbar{width:8px;height:8px}.mrx-checkbox-group-wrapper--scrollable::-webkit-scrollbar-thumb{background:var(--neutral-bg-stroke-default);border-radius:8px}.mrx-checkbox-group-wrapper--scrollable.--active{padding-top:12px;padding-bottom:12px;border-color:var(--neutral-bg-divider)}.mrx-checkbox-group__empty-message{padding-top:12px;padding-bottom:12px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SaveStateComponent, selector: "mrx-save-state", inputs: ["type", "fields", "id"] }, { kind: "component", type: ErrorMessageComponent, selector: "mrx-error-message", inputs: ["invalid", "invalidMessage", "customClasses"] }, { kind: "component", type: CheckboxGroupItemComponent, selector: "mrx-checkbox-group-item", inputs: ["displaced", "level", "animationTrigger", "isLast", "disabled", "readonly", "invalid", "item"], outputs: ["animationEnd", "checkboxChanged"] }, { kind: "component", type: CheckboxGroupHeaderComponent, selector: "mrx-checkbox-group-header", inputs: ["searchable", "searchPlaceholder", "expandable", "isExpanded", "tooltip", "labelText", "linkText", "checkedItemsCount"], outputs: ["updateCheckboxGroupSearchValue", "clearFilters", "toggle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
14155
14188
  static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CheckboxGroupComponent, providedIn: CheckboxGroupComponent });
14156
14189
  }
14157
14190
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CheckboxGroupComponent, decorators: [{
@@ -14167,7 +14200,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
14167
14200
  useExisting: forwardRef(() => CheckboxGroupComponent),
14168
14201
  multi: true,
14169
14202
  },
14170
- ], template: "<div class=\"mrx-checkbox-group\" [class]=\"getClasses\">\r\n <mrx-save-state [id]=\"uuid\" [fields]=\"fields\" type=\"checkboxGroup\"></mrx-save-state>\r\n\r\n <mrx-checkbox-group-header\r\n [searchable]=\"searchable\"\r\n [searchPlaceholder]=\"searchPlaceholder\"\r\n [tooltip]=\"tooltip\"\r\n [labelText]=\"labelText\"\r\n [linkText]=\"linkText\"\r\n [checkedItemsCount]=\"checkedList.length\"\r\n (updateCheckboxGroupSearchValue)=\"updateCheckboxGroupSearchValue($event)\"\r\n (clearFilters)=\"clearFilters()\"\r\n ></mrx-checkbox-group-header>\r\n\r\n @if (filteredList && filteredList.length) {\r\n <div\r\n #groupItemsWrapper\r\n class=\"mrx-checkbox-group-wrapper\"\r\n [class.mrx-checkbox-group-wrapper--scrollable]=\"scrollable\"\r\n [class.--active]=\"getShowScroll\"\r\n [style.max-height]=\"scrollable ? scrollMaxHeight + 'px' : 'auto'\"\r\n >\r\n @for (item of filteredList; track item.id; let last = $last) {\r\n <mrx-checkbox-group-item\r\n [displaced]=\"displaced || false\"\r\n [item]=\"item\"\r\n [isLast]=\"last\"\r\n [animationTrigger]=\"!!isSearchValue\"\r\n [disabled]=\"disabled\"\r\n [readonly]=\"readonly\"\r\n [invalid]=\"invalid\"\r\n (animationEnd)=\"checkHeightGroupWrapper()\"\r\n (checkboxChanged)=\"checkboxChanged($event)\"\r\n ></mrx-checkbox-group-item>\r\n }\r\n </div>\r\n } @else {\r\n <p class=\"mrx-checkbox-group__empty-message\">{{ enableMessage }}</p>\r\n }\r\n\r\n @if (getInvalid && getInvalidMessage) {\r\n <mrx-error-message [invalidMessage]=\"getInvalidMessage\" [customClasses]=\"'mt-2'\"></mrx-error-message>\r\n }\r\n</div>\r\n", styles: [".mrx-checkbox-group{position:relative}.mrx-checkbox-group-wrapper--scrollable{overflow-y:auto;border-width:1px 0 1px 0;border-style:solid;border-color:transparent;padding-top:0;padding-bottom:0;transition:boder-color .2s,padding-top .2s,padding-bottom .2s}.mrx-checkbox-group-wrapper--scrollable::-webkit-scrollbar{width:8px;height:8px}.mrx-checkbox-group-wrapper--scrollable::-webkit-scrollbar-thumb{background:var(--neutral-bg-stroke-default);border-radius:8px}.mrx-checkbox-group-wrapper--scrollable.--active{padding-top:12px;padding-bottom:12px;border-color:var(--neutral-bg-divider)}.mrx-checkbox-group__empty-message{padding-top:12px;padding-bottom:12px}\n"] }]
14203
+ ], template: "<div class=\"mrx-checkbox-group\" [class]=\"getClasses\">\r\n <mrx-save-state [id]=\"uuid\" [fields]=\"fields\" type=\"checkboxGroup\"></mrx-save-state>\r\n\r\n <mrx-checkbox-group-header\r\n [searchable]=\"searchable\"\r\n [searchPlaceholder]=\"searchPlaceholder\"\r\n [tooltip]=\"tooltip\"\r\n [labelText]=\"labelText\"\r\n [linkText]=\"linkText\"\r\n [checkedItemsCount]=\"checkedList.length\"\r\n [expandable]=\"expandable\"\r\n [isExpanded]=\"isExpanded\"\r\n (updateCheckboxGroupSearchValue)=\"updateCheckboxGroupSearchValue($event)\"\r\n (clearFilters)=\"clearFilters()\"\r\n (toggle)=\"toggleContent()\"\r\n ></mrx-checkbox-group-header>\r\n\r\n <ng-container *ngIf=\"!expandable || isExpanded\">\r\n @if (filteredList && filteredList.length) {\r\n <div\r\n #groupItemsWrapper\r\n class=\"mrx-checkbox-group-wrapper\"\r\n [class.mrx-checkbox-group-wrapper--scrollable]=\"scrollable\"\r\n [class.--active]=\"getShowScroll\"\r\n [style.max-height]=\"scrollable ? scrollMaxHeight + 'px' : 'auto'\"\r\n >\r\n @for (item of filteredList; track item.id; let last = $last) {\r\n <mrx-checkbox-group-item\r\n [displaced]=\"displaced || false\"\r\n [item]=\"item\"\r\n [isLast]=\"last\"\r\n [animationTrigger]=\"!!isSearchValue\"\r\n [disabled]=\"disabled\"\r\n [readonly]=\"readonly\"\r\n [invalid]=\"invalid\"\r\n (animationEnd)=\"checkHeightGroupWrapper()\"\r\n (checkboxChanged)=\"checkboxChanged($event)\"\r\n ></mrx-checkbox-group-item>\r\n }\r\n </div>\r\n } @else {\r\n <p class=\"mrx-checkbox-group__empty-message\">{{ enableMessage }}</p>\r\n }\r\n\r\n @if (getInvalid && getInvalidMessage) {\r\n <mrx-error-message [invalidMessage]=\"getInvalidMessage\" [customClasses]=\"'mt-2'\"></mrx-error-message>\r\n }\r\n </ng-container>\r\n</div>\r\n", styles: [".mrx-checkbox-group{position:relative}.mrx-checkbox-group-wrapper--scrollable{overflow-y:auto;border-width:1px 0 1px 0;border-style:solid;border-color:transparent;padding-top:0;padding-bottom:0;transition:boder-color .2s,padding-top .2s,padding-bottom .2s}.mrx-checkbox-group-wrapper--scrollable::-webkit-scrollbar{width:8px;height:8px}.mrx-checkbox-group-wrapper--scrollable::-webkit-scrollbar-thumb{background:var(--neutral-bg-stroke-default);border-radius:8px}.mrx-checkbox-group-wrapper--scrollable.--active{padding-top:12px;padding-bottom:12px;border-color:var(--neutral-bg-divider)}.mrx-checkbox-group__empty-message{padding-top:12px;padding-bottom:12px}\n"] }]
14171
14204
  }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { fields: [{
14172
14205
  type: Input
14173
14206
  }], scrollMaxHeight: [{
@@ -14188,6 +14221,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
14188
14221
  type: Input
14189
14222
  }], customClasses: [{
14190
14223
  type: Input
14224
+ }], expandable: [{
14225
+ type: Input
14226
+ }], isExpanded: [{
14227
+ type: Input
14191
14228
  }], tooltip: [{
14192
14229
  type: Input
14193
14230
  }], labelText: [{