myrta-ui 1.1.94 → 1.1.96
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/lib/components/breadcrumbs/breadcrumbs.component.mjs +2 -2
- package/esm2020/lib/components/form/input-date-time/input-date-time.component.mjs +4 -9
- package/esm2020/lib/components/form/input-number/input-number.component.mjs +12 -4
- package/fesm2015/myrta-ui.mjs +16 -13
- package/fesm2015/myrta-ui.mjs.map +1 -1
- package/fesm2020/myrta-ui.mjs +16 -13
- package/fesm2020/myrta-ui.mjs.map +1 -1
- package/lib/components/form/input-number/input-number.component.d.ts +2 -0
- package/package.json +1 -1
package/fesm2020/myrta-ui.mjs
CHANGED
|
@@ -530,10 +530,10 @@ class BreadcrumbsComponent {
|
|
|
530
530
|
}
|
|
531
531
|
}
|
|
532
532
|
BreadcrumbsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: BreadcrumbsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
533
|
-
BreadcrumbsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: BreadcrumbsComponent, selector: "mrx-breadcrumbs", inputs: { type: "type", items: "items", item: "item", customClasses: "customClasses" }, ngImport: i0, template: "<div class=\"mrx-breadcrumbs\" [class]=\"getClasses\">\r\n <ng-container [ngSwitch]=\"type\">\r\n <ng-container *ngSwitchCase=\"'link'\">\r\n <a class=\"mrx-breadcrumbs__link\" *ngIf=\"item\" [href]=\"item.path\">\r\n <span class=\"mrx-icon icon-arrow-left icon-font-16 mr-1\" *ngIf=\"item.isShowArrow\"></span>\r\n {{item.text}}\r\n </a>\r\n </ng-container>\r\n <ng-container *ngSwitchDefault>\r\n <ul class=\"mrx-breadcrumbs__list\">\r\n <li *ngFor=\"let item of items\" class=\"mrx-breadcrumbs__list-item\">\r\n <ng-container *ngIf=\"item.isLink; else span\">\r\n <a class=\"mrx-breadcrumbs__link mr-1\" [href]=\"item.path\">{{item.text}}</a>\r\n <span class=\"mrx-icon icon-chevron-right icon-font-16 mr-1\"></span>\r\n </ng-container>\r\n\r\n <ng-template #span>\r\n <span class=\"mrx-breadcrumbs__tag\">{{item.text}}</span>\r\n </ng-template>\r\n </li>\r\n </ul>\r\n </ng-container>\r\n </ng-container>\r\n</div>\r\n\r\n", styles: [".mrx-breadcrumbs.mrx-breadcrumbs .mrx-breadcrumbs__link{display:flex;align-items:center;color:var(--brand-bg-primary-default);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-breadcrumbs
|
|
533
|
+
BreadcrumbsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: BreadcrumbsComponent, selector: "mrx-breadcrumbs", inputs: { type: "type", items: "items", item: "item", customClasses: "customClasses" }, ngImport: i0, template: "<div class=\"mrx-breadcrumbs\" [class]=\"getClasses\">\r\n <ng-container [ngSwitch]=\"type\">\r\n <ng-container *ngSwitchCase=\"'link'\">\r\n <a class=\"mrx-breadcrumbs__link\" *ngIf=\"item\" [href]=\"item.path\">\r\n <span class=\"mrx-icon icon-arrow-left icon-font-16 mr-1\" *ngIf=\"item.isShowArrow\"></span>\r\n {{item.text}}\r\n </a>\r\n </ng-container>\r\n <ng-container *ngSwitchDefault>\r\n <ul class=\"mrx-breadcrumbs__list\">\r\n <li *ngFor=\"let item of items\" class=\"mrx-breadcrumbs__list-item\">\r\n <ng-container *ngIf=\"item.isLink; else span\">\r\n <a class=\"mrx-breadcrumbs__link mr-1\" [href]=\"item.path\">{{item.text}}</a>\r\n <span class=\"mrx-icon icon-chevron-right icon-font-16 mr-1\"></span>\r\n </ng-container>\r\n\r\n <ng-template #span>\r\n <span class=\"mrx-breadcrumbs__tag\">{{item.text}}</span>\r\n </ng-template>\r\n </li>\r\n </ul>\r\n </ng-container>\r\n </ng-container>\r\n</div>\r\n\r\n", styles: [".mrx-breadcrumbs.mrx-breadcrumbs-link{display:inline-block}.mrx-breadcrumbs .mrx-breadcrumbs__link{display:flex;align-items:center;color:var(--brand-bg-primary-default);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-breadcrumbs .mrx-breadcrumbs__link .mrx-icon{color:var(--brand-bg-primary-default)!important}.mrx-breadcrumbs .mrx-breadcrumbs__link:hover{color:var(--brand-text-controls-hover)}.mrx-breadcrumbs .mrx-breadcrumbs__link:hover .mrx-icon{color:var(--brand-text-controls-hover)!important}.mrx-breadcrumbs .mrx-breadcrumbs__tag{color:var(--neutral-text-tertiary);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-breadcrumbs .mrx-breadcrumbs__list{display:flex;align-items:center;justify-content:flex-start;list-style:none;padding-left:0;margin-top:0;margin-bottom:0;flex-wrap:wrap}.mrx-breadcrumbs .mrx-breadcrumbs__list-item{display:flex}.mrx-breadcrumbs .mrx-breadcrumbs__list-item .mrx-icon{color:var(--neutral-icon-default)!important}\n"], directives: [{ type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
534
534
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: BreadcrumbsComponent, decorators: [{
|
|
535
535
|
type: Component,
|
|
536
|
-
args: [{ selector: 'mrx-breadcrumbs', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"mrx-breadcrumbs\" [class]=\"getClasses\">\r\n <ng-container [ngSwitch]=\"type\">\r\n <ng-container *ngSwitchCase=\"'link'\">\r\n <a class=\"mrx-breadcrumbs__link\" *ngIf=\"item\" [href]=\"item.path\">\r\n <span class=\"mrx-icon icon-arrow-left icon-font-16 mr-1\" *ngIf=\"item.isShowArrow\"></span>\r\n {{item.text}}\r\n </a>\r\n </ng-container>\r\n <ng-container *ngSwitchDefault>\r\n <ul class=\"mrx-breadcrumbs__list\">\r\n <li *ngFor=\"let item of items\" class=\"mrx-breadcrumbs__list-item\">\r\n <ng-container *ngIf=\"item.isLink; else span\">\r\n <a class=\"mrx-breadcrumbs__link mr-1\" [href]=\"item.path\">{{item.text}}</a>\r\n <span class=\"mrx-icon icon-chevron-right icon-font-16 mr-1\"></span>\r\n </ng-container>\r\n\r\n <ng-template #span>\r\n <span class=\"mrx-breadcrumbs__tag\">{{item.text}}</span>\r\n </ng-template>\r\n </li>\r\n </ul>\r\n </ng-container>\r\n </ng-container>\r\n</div>\r\n\r\n", styles: [".mrx-breadcrumbs.mrx-breadcrumbs .mrx-breadcrumbs__link{display:flex;align-items:center;color:var(--brand-bg-primary-default);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-breadcrumbs
|
|
536
|
+
args: [{ selector: 'mrx-breadcrumbs', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"mrx-breadcrumbs\" [class]=\"getClasses\">\r\n <ng-container [ngSwitch]=\"type\">\r\n <ng-container *ngSwitchCase=\"'link'\">\r\n <a class=\"mrx-breadcrumbs__link\" *ngIf=\"item\" [href]=\"item.path\">\r\n <span class=\"mrx-icon icon-arrow-left icon-font-16 mr-1\" *ngIf=\"item.isShowArrow\"></span>\r\n {{item.text}}\r\n </a>\r\n </ng-container>\r\n <ng-container *ngSwitchDefault>\r\n <ul class=\"mrx-breadcrumbs__list\">\r\n <li *ngFor=\"let item of items\" class=\"mrx-breadcrumbs__list-item\">\r\n <ng-container *ngIf=\"item.isLink; else span\">\r\n <a class=\"mrx-breadcrumbs__link mr-1\" [href]=\"item.path\">{{item.text}}</a>\r\n <span class=\"mrx-icon icon-chevron-right icon-font-16 mr-1\"></span>\r\n </ng-container>\r\n\r\n <ng-template #span>\r\n <span class=\"mrx-breadcrumbs__tag\">{{item.text}}</span>\r\n </ng-template>\r\n </li>\r\n </ul>\r\n </ng-container>\r\n </ng-container>\r\n</div>\r\n\r\n", styles: [".mrx-breadcrumbs.mrx-breadcrumbs-link{display:inline-block}.mrx-breadcrumbs .mrx-breadcrumbs__link{display:flex;align-items:center;color:var(--brand-bg-primary-default);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-breadcrumbs .mrx-breadcrumbs__link .mrx-icon{color:var(--brand-bg-primary-default)!important}.mrx-breadcrumbs .mrx-breadcrumbs__link:hover{color:var(--brand-text-controls-hover)}.mrx-breadcrumbs .mrx-breadcrumbs__link:hover .mrx-icon{color:var(--brand-text-controls-hover)!important}.mrx-breadcrumbs .mrx-breadcrumbs__tag{color:var(--neutral-text-tertiary);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-breadcrumbs .mrx-breadcrumbs__list{display:flex;align-items:center;justify-content:flex-start;list-style:none;padding-left:0;margin-top:0;margin-bottom:0;flex-wrap:wrap}.mrx-breadcrumbs .mrx-breadcrumbs__list-item{display:flex}.mrx-breadcrumbs .mrx-breadcrumbs__list-item .mrx-icon{color:var(--neutral-icon-default)!important}\n"] }]
|
|
537
537
|
}], propDecorators: { type: [{
|
|
538
538
|
type: Input
|
|
539
539
|
}], items: [{
|
|
@@ -10387,12 +10387,7 @@ class InputDateTimeComponent {
|
|
|
10387
10387
|
return !!this.dateInput?.nativeElement.value;
|
|
10388
10388
|
}
|
|
10389
10389
|
get checkValidClasses() {
|
|
10390
|
-
|
|
10391
|
-
return '';
|
|
10392
|
-
}
|
|
10393
|
-
else {
|
|
10394
|
-
return this.checkInvalid === false ? 'mrx-input-checked-success' : this.checkInvalid === true ? 'mrx-input-checked-error' : '';
|
|
10395
|
-
}
|
|
10390
|
+
return this.checkInvalid === false ? 'mrx-input-checked-success' : this.checkInvalid === true ? 'mrx-input-checked-error' : '';
|
|
10396
10391
|
}
|
|
10397
10392
|
_checkExtraTime() {
|
|
10398
10393
|
if (this.addMaxTime && !this.timepicker) {
|
|
@@ -10566,12 +10561,12 @@ class InputDateTimeComponent {
|
|
|
10566
10561
|
InputDateTimeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: InputDateTimeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
10567
10562
|
InputDateTimeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: InputDateTimeComponent, selector: "mrx-input-date-time", inputs: { fields: "fields", size: "size", customClasses: "customClasses", dateLabel: "dateLabel", timeLabel: "timeLabel", datePlaceholder: "datePlaceholder", timePlaceholder: "timePlaceholder", disabled: "disabled", readonly: "readonly", required: "required", timepicker: "timepicker", range: "range", timezone: "timezone", inline: "inline", isManualInput: "isManualInput", addMinTime: "addMinTime", addMaxTime: "addMaxTime", addMinTimeObj: "addMinTimeObj", addMaxTimeObj: "addMaxTimeObj", disableValidate: "disableValidate", disableIncludes: "disableIncludes", container: "container", invalid: "invalid", invalidMessage: "invalidMessage", checkInvalid: "checkInvalid", minDate: "minDate", maxDate: "maxDate" }, outputs: { changed: "changed", modelChange: "modelChange", blurred: "blurred" }, providers: [
|
|
10568
10563
|
{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => InputDateTimeComponent), multi: true }
|
|
10569
|
-
], viewQueries: [{ propertyName: "dateInput", first: true, predicate: ["dateInput"], descendants: true }, { propertyName: "timeInput", first: true, predicate: ["timeInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\r\n class=\"mrx-input-date\"\r\n [class.mrx-input-error]=\"invalid || innerInvalid\"\r\n [class.mrx-input-readonly]=\"readonly\"\r\n [class]=\"getClasses\"\r\n>\r\n <div class=\"\">\r\n <mrx-label *ngIf=\"timeLabel || dateLabel\">{{ dateLabel }}</mrx-label>\r\n <div class=\"mrx-input-date__wrapper\">\r\n <input\r\n #dateInput\r\n type=\"text\"\r\n autocomplete=\"nope\"\r\n class=\"mrx-input-date__input mrx-input-date__date\"\r\n [placeholder]=\"datePlaceholder\"\r\n [ngModel]=\"getDateValue\"\r\n [mask]=\"'00.00.0000 00:m0'\"\r\n [leadZeroDateTime]=\"true\"\r\n [validation]=\"false\"\r\n [disabled]=\"disabled\"\r\n [readOnly]=\"!isManualInput\"\r\n (input)=\"updateDateValue(dateInput)\"\r\n (click)=\"clickToInput(dateInput)\"\r\n (blur)=\"onBlur($event)\"\r\n />\r\n\r\n <div *ngIf=\"!disabled\" class=\"mrx-input-date__icons\">\r\n <span\r\n class=\"mrx-icon icon-close\"\r\n *ngIf=\"isViewCleanIcon\"\r\n (click)=\"clickToIconClear()\"\r\n [class.icon-font-16]=\"size === 'small'\"\r\n [class.icon-font-24]=\"size === 'medium' || size === 'large'\"\r\n ></span>\r\n <span\r\n class=\"mrx-icon icon-calendar\"\r\n (click)=\"clickToIconCalendar()\"\r\n [class.icon-font-16]=\"size === 'small'\"\r\n [class.icon-font-24]=\"size === 'medium' || size === 'large'\"\r\n ></span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <mrx-error-message\r\n *ngIf=\"invalid; else innerInvalidTemplate\"\r\n [invalidMessage]=\"invalidMessage\"\r\n ></mrx-error-message>\r\n\r\n <ng-template #innerInvalidTemplate>\r\n <mrx-error-message\r\n *ngIf=\"innerInvalid\"\r\n [invalidMessage]=\"innerInvalidMessage\"\r\n ></mrx-error-message>\r\n </ng-template>\r\n\r\n <mrx-save-state [id]=\"uuid\" [fields]=\"fields\"></mrx-save-state>\r\n</div>\r\n", styles: [".mrx-input-date{width:100%;position:relative}.mrx-input-date .mrx-input-date__wrapper{position:relative}.mrx-input-date .mrx-input-date__input{border:var(--border-width-default) solid var(--neutral-bg-stroke-default);border-radius:var(--border-radius-1);color:var(--neutral-text-primary);width:100%;transition:outline-width .2s,border .2s}.mrx-input-date .mrx-input-date__input:focus,.mrx-input-date .mrx-input-date__input:active{outline:var(--neutral-bg-island-default) solid var(--border-width-focused)}.mrx-input-date .mrx-input-date__input:hover{border:var(--border-width-default) solid var(--neutral-bg-stroke-hover)}.mrx-input-date .mrx-input-date__input:disabled{background-color:var(--neutral-bg-disabled);color:var(--neutral-text-tertiary)}.mrx-input-date.mrx-input-date-lg .mrx-input-date__input{padding:calc(var(--spacing-3) + var(--spacing-half) - var(--border-width-default)) calc(var(--spacing-4) - var(--border-width-default));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-date.mrx-input-date-md .mrx-input-date__input{padding:calc(var(--spacing-2) + var(--spacing-half) - var(--border-width-default)) calc(var(--spacing-3) - var(--border-width-default));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-date.mrx-input-date-sm .mrx-input-date__input{padding:calc(var(--spacing-2) - var(--border-width-default)) calc(var(--spacing-2) - var(--border-width-default));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-date.mrx-input-date.mrx-input-error .mrx-input-date__input{border-color:var(--system-bg-controls-negative-default)
|
|
10564
|
+
], viewQueries: [{ propertyName: "dateInput", first: true, predicate: ["dateInput"], descendants: true }, { propertyName: "timeInput", first: true, predicate: ["timeInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\r\n class=\"mrx-input-date\"\r\n [class.mrx-input-error]=\"invalid || innerInvalid\"\r\n [class.mrx-input-readonly]=\"readonly\"\r\n [class]=\"getClasses\"\r\n>\r\n <div class=\"\">\r\n <mrx-label *ngIf=\"timeLabel || dateLabel\">{{ dateLabel }}</mrx-label>\r\n <div class=\"mrx-input-date__wrapper\">\r\n <input\r\n #dateInput\r\n type=\"text\"\r\n autocomplete=\"nope\"\r\n class=\"mrx-input-date__input mrx-input-date__date\"\r\n [placeholder]=\"datePlaceholder\"\r\n [ngModel]=\"getDateValue\"\r\n [mask]=\"'00.00.0000 00:m0'\"\r\n [leadZeroDateTime]=\"true\"\r\n [validation]=\"false\"\r\n [disabled]=\"disabled\"\r\n [readOnly]=\"!isManualInput\"\r\n (input)=\"updateDateValue(dateInput)\"\r\n (click)=\"clickToInput(dateInput)\"\r\n (blur)=\"onBlur($event)\"\r\n />\r\n\r\n <div *ngIf=\"!disabled\" class=\"mrx-input-date__icons\">\r\n <span\r\n class=\"mrx-icon icon-close\"\r\n *ngIf=\"isViewCleanIcon\"\r\n (click)=\"clickToIconClear()\"\r\n [class.icon-font-16]=\"size === 'small'\"\r\n [class.icon-font-24]=\"size === 'medium' || size === 'large'\"\r\n ></span>\r\n <span\r\n class=\"mrx-icon icon-calendar\"\r\n (click)=\"clickToIconCalendar()\"\r\n [class.icon-font-16]=\"size === 'small'\"\r\n [class.icon-font-24]=\"size === 'medium' || size === 'large'\"\r\n ></span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <mrx-error-message\r\n *ngIf=\"invalid; else innerInvalidTemplate\"\r\n [invalidMessage]=\"invalidMessage\"\r\n ></mrx-error-message>\r\n\r\n <ng-template #innerInvalidTemplate>\r\n <mrx-error-message\r\n *ngIf=\"innerInvalid\"\r\n [invalidMessage]=\"innerInvalidMessage\"\r\n ></mrx-error-message>\r\n </ng-template>\r\n\r\n <mrx-save-state [id]=\"uuid\" [fields]=\"fields\"></mrx-save-state>\r\n</div>\r\n", styles: [".mrx-input-date{width:100%;position:relative}.mrx-input-date .mrx-input-date__wrapper{position:relative}.mrx-input-date .mrx-input-date__input{border:var(--border-width-default) solid var(--neutral-bg-stroke-default);border-radius:var(--border-radius-1);color:var(--neutral-text-primary);width:100%;transition:outline-width .2s,border .2s}.mrx-input-date .mrx-input-date__input:focus,.mrx-input-date .mrx-input-date__input:active{outline:var(--neutral-bg-island-default) solid var(--border-width-focused)}.mrx-input-date .mrx-input-date__input:hover{border:var(--border-width-default) solid var(--neutral-bg-stroke-hover)}.mrx-input-date .mrx-input-date__input:disabled{background-color:var(--neutral-bg-disabled);color:var(--neutral-text-tertiary)}.mrx-input-date.mrx-input-date-lg .mrx-input-date__input{padding:calc(var(--spacing-3) + var(--spacing-half) - var(--border-width-default)) calc(var(--spacing-4) - var(--border-width-default));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-date.mrx-input-date-md .mrx-input-date__input{padding:calc(var(--spacing-2) + var(--spacing-half) - var(--border-width-default)) calc(var(--spacing-3) - var(--border-width-default));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-date.mrx-input-date-sm .mrx-input-date__input{padding:calc(var(--spacing-2) - var(--border-width-default)) calc(var(--spacing-2) - var(--border-width-default));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-date.mrx-input-date.mrx-input-error .mrx-input-date__input{border-color:var(--system-bg-controls-negative-default)}.mrx-input-date.mrx-input-date.mrx-input-checked-error .mrx-input-date__input{border-color:var(--system-bg-controls-negative-default);background-color:var(--system-bg-negative-secondary)}.mrx-input-date.mrx-input-date.mrx-input-checked-error .mrx-input-date__input:disabled{background-color:var(--neutral-bg-disabled, #EEF0F4);border-color:var(--neutral-bg-stroke-default)}.mrx-input-date.mrx-input-date.mrx-input-checked-success .mrx-input-date__input{background-color:var(--system-bg-positive-secondary);border-color:var(--system-bg-controls-positive-default)}.mrx-input-date.mrx-input-date.mrx-input-checked-success .mrx-input-date__input:disabled{background-color:var(--neutral-bg-disabled, #EEF0F4);border-color:var(--neutral-bg-stroke-default)}.mrx-input-date.mrx-input-date .mrx-input-date__icons{position:absolute;top:0;right:0;display:flex;align-items:center}.mrx-input-date.mrx-input-date .mrx-input-date__icons-item,.mrx-input-date.mrx-input-date .mrx-input-date__icons .mrx-icon{cursor:pointer}.mrx-input-date.mrx-input-date.mrx-input-date-lg .mrx-icon{margin-top:calc(var(--spacing-3) - var(--border-width-default));margin-right:var(--spacing-3)}.mrx-input-date.mrx-input-date.mrx-input-date-md .mrx-icon{margin-top:calc(var(--spacing-2) - var(--border-width-default));margin-right:var(--spacing-3)}.mrx-input-date.mrx-input-date.mrx-input-date-sm .mrx-icon{margin-top:calc(var(--spacing-2) - var(--border-width-default));margin-right:var(--spacing-2)}\n"], components: [{ type: LabelComponent, selector: "mrx-label", inputs: ["requiredHidden", "required", "boldLabel", "placeholder", "label", "customClasses", "triggerTextPosition", "isPublicInfo", "publicInfoTooltip", "disabled", "isSwitch", "switchLabel", "switchValue", "isCheckbox", "checkboxLabel", "checkboxValue", "counter", "linkText", "linkPrevent", "linkType", "linkMonochrome", "href", "triggerType", "tooltip", "tooltipInitialVisible", "isSaveToStorage"], outputs: ["changeCheckboxValue", "clickedLink"] }, { type: ErrorMessageComponent, selector: "mrx-error-message", inputs: ["invalid", "invalidMessage", "customClasses"] }, { type: SaveStateComponent, selector: "mrx-save-state", inputs: ["type", "fields", "id"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$7.MaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "triggerOnMaskChange"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
10570
10565
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: InputDateTimeComponent, decorators: [{
|
|
10571
10566
|
type: Component,
|
|
10572
10567
|
args: [{ selector: 'mrx-input-date-time', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
10573
10568
|
{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => InputDateTimeComponent), multi: true }
|
|
10574
|
-
], template: "<div\r\n class=\"mrx-input-date\"\r\n [class.mrx-input-error]=\"invalid || innerInvalid\"\r\n [class.mrx-input-readonly]=\"readonly\"\r\n [class]=\"getClasses\"\r\n>\r\n <div class=\"\">\r\n <mrx-label *ngIf=\"timeLabel || dateLabel\">{{ dateLabel }}</mrx-label>\r\n <div class=\"mrx-input-date__wrapper\">\r\n <input\r\n #dateInput\r\n type=\"text\"\r\n autocomplete=\"nope\"\r\n class=\"mrx-input-date__input mrx-input-date__date\"\r\n [placeholder]=\"datePlaceholder\"\r\n [ngModel]=\"getDateValue\"\r\n [mask]=\"'00.00.0000 00:m0'\"\r\n [leadZeroDateTime]=\"true\"\r\n [validation]=\"false\"\r\n [disabled]=\"disabled\"\r\n [readOnly]=\"!isManualInput\"\r\n (input)=\"updateDateValue(dateInput)\"\r\n (click)=\"clickToInput(dateInput)\"\r\n (blur)=\"onBlur($event)\"\r\n />\r\n\r\n <div *ngIf=\"!disabled\" class=\"mrx-input-date__icons\">\r\n <span\r\n class=\"mrx-icon icon-close\"\r\n *ngIf=\"isViewCleanIcon\"\r\n (click)=\"clickToIconClear()\"\r\n [class.icon-font-16]=\"size === 'small'\"\r\n [class.icon-font-24]=\"size === 'medium' || size === 'large'\"\r\n ></span>\r\n <span\r\n class=\"mrx-icon icon-calendar\"\r\n (click)=\"clickToIconCalendar()\"\r\n [class.icon-font-16]=\"size === 'small'\"\r\n [class.icon-font-24]=\"size === 'medium' || size === 'large'\"\r\n ></span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <mrx-error-message\r\n *ngIf=\"invalid; else innerInvalidTemplate\"\r\n [invalidMessage]=\"invalidMessage\"\r\n ></mrx-error-message>\r\n\r\n <ng-template #innerInvalidTemplate>\r\n <mrx-error-message\r\n *ngIf=\"innerInvalid\"\r\n [invalidMessage]=\"innerInvalidMessage\"\r\n ></mrx-error-message>\r\n </ng-template>\r\n\r\n <mrx-save-state [id]=\"uuid\" [fields]=\"fields\"></mrx-save-state>\r\n</div>\r\n", styles: [".mrx-input-date{width:100%;position:relative}.mrx-input-date .mrx-input-date__wrapper{position:relative}.mrx-input-date .mrx-input-date__input{border:var(--border-width-default) solid var(--neutral-bg-stroke-default);border-radius:var(--border-radius-1);color:var(--neutral-text-primary);width:100%;transition:outline-width .2s,border .2s}.mrx-input-date .mrx-input-date__input:focus,.mrx-input-date .mrx-input-date__input:active{outline:var(--neutral-bg-island-default) solid var(--border-width-focused)}.mrx-input-date .mrx-input-date__input:hover{border:var(--border-width-default) solid var(--neutral-bg-stroke-hover)}.mrx-input-date .mrx-input-date__input:disabled{background-color:var(--neutral-bg-disabled);color:var(--neutral-text-tertiary)}.mrx-input-date.mrx-input-date-lg .mrx-input-date__input{padding:calc(var(--spacing-3) + var(--spacing-half) - var(--border-width-default)) calc(var(--spacing-4) - var(--border-width-default));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-date.mrx-input-date-md .mrx-input-date__input{padding:calc(var(--spacing-2) + var(--spacing-half) - var(--border-width-default)) calc(var(--spacing-3) - var(--border-width-default));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-date.mrx-input-date-sm .mrx-input-date__input{padding:calc(var(--spacing-2) - var(--border-width-default)) calc(var(--spacing-2) - var(--border-width-default));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-date.mrx-input-date.mrx-input-error .mrx-input-date__input{border-color:var(--system-bg-controls-negative-default)
|
|
10569
|
+
], template: "<div\r\n class=\"mrx-input-date\"\r\n [class.mrx-input-error]=\"invalid || innerInvalid\"\r\n [class.mrx-input-readonly]=\"readonly\"\r\n [class]=\"getClasses\"\r\n>\r\n <div class=\"\">\r\n <mrx-label *ngIf=\"timeLabel || dateLabel\">{{ dateLabel }}</mrx-label>\r\n <div class=\"mrx-input-date__wrapper\">\r\n <input\r\n #dateInput\r\n type=\"text\"\r\n autocomplete=\"nope\"\r\n class=\"mrx-input-date__input mrx-input-date__date\"\r\n [placeholder]=\"datePlaceholder\"\r\n [ngModel]=\"getDateValue\"\r\n [mask]=\"'00.00.0000 00:m0'\"\r\n [leadZeroDateTime]=\"true\"\r\n [validation]=\"false\"\r\n [disabled]=\"disabled\"\r\n [readOnly]=\"!isManualInput\"\r\n (input)=\"updateDateValue(dateInput)\"\r\n (click)=\"clickToInput(dateInput)\"\r\n (blur)=\"onBlur($event)\"\r\n />\r\n\r\n <div *ngIf=\"!disabled\" class=\"mrx-input-date__icons\">\r\n <span\r\n class=\"mrx-icon icon-close\"\r\n *ngIf=\"isViewCleanIcon\"\r\n (click)=\"clickToIconClear()\"\r\n [class.icon-font-16]=\"size === 'small'\"\r\n [class.icon-font-24]=\"size === 'medium' || size === 'large'\"\r\n ></span>\r\n <span\r\n class=\"mrx-icon icon-calendar\"\r\n (click)=\"clickToIconCalendar()\"\r\n [class.icon-font-16]=\"size === 'small'\"\r\n [class.icon-font-24]=\"size === 'medium' || size === 'large'\"\r\n ></span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <mrx-error-message\r\n *ngIf=\"invalid; else innerInvalidTemplate\"\r\n [invalidMessage]=\"invalidMessage\"\r\n ></mrx-error-message>\r\n\r\n <ng-template #innerInvalidTemplate>\r\n <mrx-error-message\r\n *ngIf=\"innerInvalid\"\r\n [invalidMessage]=\"innerInvalidMessage\"\r\n ></mrx-error-message>\r\n </ng-template>\r\n\r\n <mrx-save-state [id]=\"uuid\" [fields]=\"fields\"></mrx-save-state>\r\n</div>\r\n", styles: [".mrx-input-date{width:100%;position:relative}.mrx-input-date .mrx-input-date__wrapper{position:relative}.mrx-input-date .mrx-input-date__input{border:var(--border-width-default) solid var(--neutral-bg-stroke-default);border-radius:var(--border-radius-1);color:var(--neutral-text-primary);width:100%;transition:outline-width .2s,border .2s}.mrx-input-date .mrx-input-date__input:focus,.mrx-input-date .mrx-input-date__input:active{outline:var(--neutral-bg-island-default) solid var(--border-width-focused)}.mrx-input-date .mrx-input-date__input:hover{border:var(--border-width-default) solid var(--neutral-bg-stroke-hover)}.mrx-input-date .mrx-input-date__input:disabled{background-color:var(--neutral-bg-disabled);color:var(--neutral-text-tertiary)}.mrx-input-date.mrx-input-date-lg .mrx-input-date__input{padding:calc(var(--spacing-3) + var(--spacing-half) - var(--border-width-default)) calc(var(--spacing-4) - var(--border-width-default));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-date.mrx-input-date-md .mrx-input-date__input{padding:calc(var(--spacing-2) + var(--spacing-half) - var(--border-width-default)) calc(var(--spacing-3) - var(--border-width-default));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-date.mrx-input-date-sm .mrx-input-date__input{padding:calc(var(--spacing-2) - var(--border-width-default)) calc(var(--spacing-2) - var(--border-width-default));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-date.mrx-input-date.mrx-input-error .mrx-input-date__input{border-color:var(--system-bg-controls-negative-default)}.mrx-input-date.mrx-input-date.mrx-input-checked-error .mrx-input-date__input{border-color:var(--system-bg-controls-negative-default);background-color:var(--system-bg-negative-secondary)}.mrx-input-date.mrx-input-date.mrx-input-checked-error .mrx-input-date__input:disabled{background-color:var(--neutral-bg-disabled, #EEF0F4);border-color:var(--neutral-bg-stroke-default)}.mrx-input-date.mrx-input-date.mrx-input-checked-success .mrx-input-date__input{background-color:var(--system-bg-positive-secondary);border-color:var(--system-bg-controls-positive-default)}.mrx-input-date.mrx-input-date.mrx-input-checked-success .mrx-input-date__input:disabled{background-color:var(--neutral-bg-disabled, #EEF0F4);border-color:var(--neutral-bg-stroke-default)}.mrx-input-date.mrx-input-date .mrx-input-date__icons{position:absolute;top:0;right:0;display:flex;align-items:center}.mrx-input-date.mrx-input-date .mrx-input-date__icons-item,.mrx-input-date.mrx-input-date .mrx-input-date__icons .mrx-icon{cursor:pointer}.mrx-input-date.mrx-input-date.mrx-input-date-lg .mrx-icon{margin-top:calc(var(--spacing-3) - var(--border-width-default));margin-right:var(--spacing-3)}.mrx-input-date.mrx-input-date.mrx-input-date-md .mrx-icon{margin-top:calc(var(--spacing-2) - var(--border-width-default));margin-right:var(--spacing-3)}.mrx-input-date.mrx-input-date.mrx-input-date-sm .mrx-icon{margin-top:calc(var(--spacing-2) - var(--border-width-default));margin-right:var(--spacing-2)}\n"] }]
|
|
10575
10570
|
}], propDecorators: { fields: [{
|
|
10576
10571
|
type: Input
|
|
10577
10572
|
}], size: [{
|
|
@@ -12219,8 +12214,16 @@ class InputNumberComponent {
|
|
|
12219
12214
|
}
|
|
12220
12215
|
}
|
|
12221
12216
|
}
|
|
12217
|
+
get readonlyClass() {
|
|
12218
|
+
return this.readonly ? 'mrx-input__readonly' : '';
|
|
12219
|
+
}
|
|
12220
|
+
get checkValidClasses() {
|
|
12221
|
+
return this.checkInvalid === false ?
|
|
12222
|
+
'mrx-input-checked-success' :
|
|
12223
|
+
this.checkInvalid === true ? 'mrx-input-checked-error' : '';
|
|
12224
|
+
}
|
|
12222
12225
|
get getClasses() {
|
|
12223
|
-
return `${InputNumberSizesEnum[this.size]} ${this.customClasses}`;
|
|
12226
|
+
return `${InputNumberSizesEnum[this.size]} ${this.customClasses} ${this.readonlyClass} ${this.checkValidClasses}`;
|
|
12224
12227
|
}
|
|
12225
12228
|
get decimalMarker() {
|
|
12226
12229
|
return this.decimalSeparator || InputNumberComponent.decimalMarker || ',';
|
|
@@ -12338,12 +12341,12 @@ InputNumberComponent._delimitersInitialised = false;
|
|
|
12338
12341
|
InputNumberComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: InputNumberComponent, deps: [{ token: i4.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
12339
12342
|
InputNumberComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: InputNumberComponent, selector: "mrx-input-number", inputs: { fields: "fields", placeholder: "placeholder", innerClass: "innerClass", customClasses: "customClasses", required: "required", allowNegative: "allowNegative", size: "size", separator: "separator", decimalSeparator: "decimalSeparator", isNullableValue: "isNullableValue", isAutoCorrectingValue: "isAutoCorrectingValue", invalid: "invalid", checkInvalid: "checkInvalid", setNumberType: ["numberType", "setNumberType"], setInvalidMessage: ["invalidMessage", "setInvalidMessage"], setDisabled: ["disabled", "setDisabled"], setReadonly: ["readonly", "setReadonly"], setMin: ["minValue", "setMin"], setMax: ["maxValue", "setMax"] }, outputs: { changed: "changed", modelChange: "modelChange", blurred: "blurred" }, providers: [
|
|
12340
12343
|
{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => InputNumberComponent), multi: true },
|
|
12341
|
-
], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }], ngImport: i0, template: "<div\r\n class=\"mrx-input-number\"\r\n [class]=\"getClasses\"\r\n [class.mrx-input-error]=\"!isValid || invalid\"\r\n [class.-disabled]=\"disabled\"\r\n [class.-readonly]=\"readonly\"\r\n>\r\n <div class=\"mrx-input-number__wrapper\">\r\n <form [formGroup]=\"numberForm\">\r\n <div>\r\n <input\r\n #inputElement\r\n autocomplete=\"nope\"\r\n formControlName=\"number\"\r\n type=\"text\"\r\n [thousandSeparator]=\"thousandsSeparator\"\r\n [decimalMarker]=\"decimalMarker\"\r\n [class]=\"innerClass\"\r\n [mask]=\"'separator.' + decimals\"\r\n [allowNegativeNumbers]=\"allowNegative\"\r\n [placeholder]=\"placeholder ? placeholder : ''\"\r\n (blur)=\"onBlur($event)\"\r\n (paste)=\"onPaste($event)\"\r\n />\r\n </div>\r\n </form>\r\n </div>\r\n\r\n <mrx-error-message *ngIf=\"!isValid && invalidMessageStart\">\r\n {{invalidMessageStart}}\r\n <a href=\"#\" (click)=\"resetToMax($event)\">{{maxMessage}}</a>\r\n {{invalidMessageEnd}}\r\n </mrx-error-message>\r\n\r\n <mrx-save-state [id]=\"uuid\" [fields]=\"fields\"></mrx-save-state>\r\n</div>\r\n", styles: [".mrx-input-number.mrx-input-number{width:100%;position:relative}.mrx-input-number.mrx-input-number .mrx-input-text__wrapper{position:relative}.mrx-input-number.mrx-input-number input{box-sizing:border-box;border:var(--border-width-default) solid var(--neutral-bg-stroke-default);border-radius:var(--border-radius-1);width:100%;outline:none;transition:outline-width .2s,border .2s}.mrx-input-number.mrx-input-number input:focus,.mrx-input-number.mrx-input-number input:active{outline:var(--neutral-bg-island-default) solid var(--border-width-focused)}.mrx-input-number.mrx-input-number input:hover{border:var(--border-width-default) solid var(--neutral-bg-stroke-hover)}.mrx-input-number.mrx-input-number.mrx-input__readonly input[type=tel]:disabled{background-color:inherit}.mrx-input-number.mrx-input-number.mrx-input__readonly input{background-color:inherit}.mrx-input-number.mrx-input-number.mrx-input-number-lg input{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-input-number.mrx-input-number.mrx-input-number-lg:not(.mrx-input-number-with-icon) input{padding:calc(var(--spacing-3) + var(--spacing-half) - var(--border-width-default)) var(--spacing-4)}.mrx-input-number.mrx-input-number.mrx-input-number-lg.mrx-input-number-with-icon input{padding:calc(var(--spacing-3) + var(--spacing-half) - var(--border-width-default)) var(--spacing-4) calc(var(--spacing-3) + var(--spacing-half) - var(--border-width-default)) calc(var(--spacing-module) * 10)}.mrx-input-number.mrx-input-number.mrx-input-number-md input{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-input-number.mrx-input-number.mrx-input-number-md:not(.mrx-input-number-with-icon) input{padding:calc(var(--spacing-2) + var(--spacing-half) - var(--border-width-default)) var(--spacing-4)}.mrx-input-number.mrx-input-number.mrx-input-number-md.mrx-input-number-with-icon input{padding:calc(var(--spacing-2) + var(--spacing-half) - var(--border-width-default)) var(--spacing-4) calc(var(--spacing-2) + var(--spacing-half) - var(--border-width-default)) calc(var(--spacing-module) * 10)}.mrx-input-number.mrx-input-number.mrx-input-number-sm input{font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height)}.mrx-input-number.mrx-input-number.mrx-input-number-sm:not(.mrx-input-number-with-icon) input{padding:calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-4)}.mrx-input-number.mrx-input-number.mrx-input-number-sm.mrx-input-number-with-icon input{padding:calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-4) calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-8)}.mrx-input-number.mrx-input-number.mrx-input-error input{border-color:var(--system-bg-controls-negative-default)}.mrx-input-number.mrx-input-number.mrx-input-checked-error input{border-color:var(--system-bg-controls-negative-default);background-color:var(--system-bg-negative-secondary)}.mrx-input-number.mrx-input-number.mrx-input-checked-success input{background-color:var(--system-bg-positive-secondary);border-color:var(--system-bg-controls-positive-default)}.mrx-input-number.mrx-input-number.-disabled input{background-color:var(--neutral-bg-disabled, #EEF0F4);-webkit-text-fill-color:var(--neutral-text-tertiary, #71767E);color:var(--neutral-text-tertiary, #71767E)}.mrx-input-number.mrx-input-number.-readonly input{background-color:var(--neutral-bg-disabled, #EEF0F4);-webkit-text-fill-color:var(--neutral-text-primary, #262626);color:var(--neutral-text-primary, #262626)}\n"], components: [{ type: ErrorMessageComponent, selector: "mrx-error-message", inputs: ["invalid", "invalidMessage", "customClasses"] }, { type: SaveStateComponent, selector: "mrx-save-state", inputs: ["type", "fields", "id"] }], directives: [{ type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$7.MaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "triggerOnMaskChange"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
12344
|
+
], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }], ngImport: i0, template: "<div\r\n class=\"mrx-input-number\"\r\n [class]=\"getClasses\"\r\n [class.mrx-input-error]=\"!isValid || invalid\"\r\n [class.-disabled]=\"disabled\"\r\n [class.-readonly]=\"readonly\"\r\n>\r\n <div class=\"mrx-input-number__wrapper\">\r\n <form [formGroup]=\"numberForm\">\r\n <div>\r\n <input\r\n #inputElement\r\n autocomplete=\"nope\"\r\n formControlName=\"number\"\r\n type=\"text\"\r\n [thousandSeparator]=\"thousandsSeparator\"\r\n [decimalMarker]=\"decimalMarker\"\r\n [class]=\"innerClass\"\r\n [mask]=\"'separator.' + decimals\"\r\n [allowNegativeNumbers]=\"allowNegative\"\r\n [placeholder]=\"placeholder ? placeholder : ''\"\r\n (blur)=\"onBlur($event)\"\r\n (paste)=\"onPaste($event)\"\r\n />\r\n </div>\r\n </form>\r\n </div>\r\n\r\n <mrx-error-message *ngIf=\"!isValid && invalidMessageStart\">\r\n {{invalidMessageStart}}\r\n <a href=\"#\" (click)=\"resetToMax($event)\">{{maxMessage}}</a>\r\n {{invalidMessageEnd}}\r\n </mrx-error-message>\r\n\r\n <mrx-save-state [id]=\"uuid\" [fields]=\"fields\"></mrx-save-state>\r\n</div>\r\n", styles: [".mrx-input-number.mrx-input-number{width:100%;position:relative}.mrx-input-number.mrx-input-number .mrx-input-text__wrapper{position:relative}.mrx-input-number.mrx-input-number input{box-sizing:border-box;border:var(--border-width-default) solid var(--neutral-bg-stroke-default);border-radius:var(--border-radius-1);width:100%;outline:none;transition:outline-width .2s,border .2s}.mrx-input-number.mrx-input-number input:focus,.mrx-input-number.mrx-input-number input:active{outline:var(--neutral-bg-island-default) solid var(--border-width-focused)}.mrx-input-number.mrx-input-number input:hover{border:var(--border-width-default) solid var(--neutral-bg-stroke-hover)}.mrx-input-number.mrx-input-number.mrx-input__readonly input[type=tel]:disabled{background-color:inherit}.mrx-input-number.mrx-input-number.mrx-input__readonly input{background-color:inherit}.mrx-input-number.mrx-input-number.mrx-input-number-lg input{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-input-number.mrx-input-number.mrx-input-number-lg:not(.mrx-input-number-with-icon) input{padding:calc(var(--spacing-3) + var(--spacing-half) - var(--border-width-default)) var(--spacing-4)}.mrx-input-number.mrx-input-number.mrx-input-number-lg.mrx-input-number-with-icon input{padding:calc(var(--spacing-3) + var(--spacing-half) - var(--border-width-default)) var(--spacing-4) calc(var(--spacing-3) + var(--spacing-half) - var(--border-width-default)) calc(var(--spacing-module) * 10)}.mrx-input-number.mrx-input-number.mrx-input-number-md input{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-input-number.mrx-input-number.mrx-input-number-md:not(.mrx-input-number-with-icon) input{padding:calc(var(--spacing-2) + var(--spacing-half) - var(--border-width-default)) var(--spacing-4)}.mrx-input-number.mrx-input-number.mrx-input-number-md.mrx-input-number-with-icon input{padding:calc(var(--spacing-2) + var(--spacing-half) - var(--border-width-default)) var(--spacing-4) calc(var(--spacing-2) + var(--spacing-half) - var(--border-width-default)) calc(var(--spacing-module) * 10)}.mrx-input-number.mrx-input-number.mrx-input-number-sm input{font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height)}.mrx-input-number.mrx-input-number.mrx-input-number-sm:not(.mrx-input-number-with-icon) input{padding:calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-4)}.mrx-input-number.mrx-input-number.mrx-input-number-sm.mrx-input-number-with-icon input{padding:calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-4) calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-8)}.mrx-input-number.mrx-input-number.mrx-input-error input{border-color:var(--system-bg-controls-negative-default)!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"], components: [{ type: ErrorMessageComponent, selector: "mrx-error-message", inputs: ["invalid", "invalidMessage", "customClasses"] }, { type: SaveStateComponent, selector: "mrx-save-state", inputs: ["type", "fields", "id"] }], directives: [{ type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$7.MaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "triggerOnMaskChange"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
12342
12345
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: InputNumberComponent, decorators: [{
|
|
12343
12346
|
type: Component,
|
|
12344
12347
|
args: [{ selector: 'mrx-input-number', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
12345
12348
|
{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => InputNumberComponent), multi: true },
|
|
12346
|
-
], template: "<div\r\n class=\"mrx-input-number\"\r\n [class]=\"getClasses\"\r\n [class.mrx-input-error]=\"!isValid || invalid\"\r\n [class.-disabled]=\"disabled\"\r\n [class.-readonly]=\"readonly\"\r\n>\r\n <div class=\"mrx-input-number__wrapper\">\r\n <form [formGroup]=\"numberForm\">\r\n <div>\r\n <input\r\n #inputElement\r\n autocomplete=\"nope\"\r\n formControlName=\"number\"\r\n type=\"text\"\r\n [thousandSeparator]=\"thousandsSeparator\"\r\n [decimalMarker]=\"decimalMarker\"\r\n [class]=\"innerClass\"\r\n [mask]=\"'separator.' + decimals\"\r\n [allowNegativeNumbers]=\"allowNegative\"\r\n [placeholder]=\"placeholder ? placeholder : ''\"\r\n (blur)=\"onBlur($event)\"\r\n (paste)=\"onPaste($event)\"\r\n />\r\n </div>\r\n </form>\r\n </div>\r\n\r\n <mrx-error-message *ngIf=\"!isValid && invalidMessageStart\">\r\n {{invalidMessageStart}}\r\n <a href=\"#\" (click)=\"resetToMax($event)\">{{maxMessage}}</a>\r\n {{invalidMessageEnd}}\r\n </mrx-error-message>\r\n\r\n <mrx-save-state [id]=\"uuid\" [fields]=\"fields\"></mrx-save-state>\r\n</div>\r\n", styles: [".mrx-input-number.mrx-input-number{width:100%;position:relative}.mrx-input-number.mrx-input-number .mrx-input-text__wrapper{position:relative}.mrx-input-number.mrx-input-number input{box-sizing:border-box;border:var(--border-width-default) solid var(--neutral-bg-stroke-default);border-radius:var(--border-radius-1);width:100%;outline:none;transition:outline-width .2s,border .2s}.mrx-input-number.mrx-input-number input:focus,.mrx-input-number.mrx-input-number input:active{outline:var(--neutral-bg-island-default) solid var(--border-width-focused)}.mrx-input-number.mrx-input-number input:hover{border:var(--border-width-default) solid var(--neutral-bg-stroke-hover)}.mrx-input-number.mrx-input-number.mrx-input__readonly input[type=tel]:disabled{background-color:inherit}.mrx-input-number.mrx-input-number.mrx-input__readonly input{background-color:inherit}.mrx-input-number.mrx-input-number.mrx-input-number-lg input{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-input-number.mrx-input-number.mrx-input-number-lg:not(.mrx-input-number-with-icon) input{padding:calc(var(--spacing-3) + var(--spacing-half) - var(--border-width-default)) var(--spacing-4)}.mrx-input-number.mrx-input-number.mrx-input-number-lg.mrx-input-number-with-icon input{padding:calc(var(--spacing-3) + var(--spacing-half) - var(--border-width-default)) var(--spacing-4) calc(var(--spacing-3) + var(--spacing-half) - var(--border-width-default)) calc(var(--spacing-module) * 10)}.mrx-input-number.mrx-input-number.mrx-input-number-md input{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-input-number.mrx-input-number.mrx-input-number-md:not(.mrx-input-number-with-icon) input{padding:calc(var(--spacing-2) + var(--spacing-half) - var(--border-width-default)) var(--spacing-4)}.mrx-input-number.mrx-input-number.mrx-input-number-md.mrx-input-number-with-icon input{padding:calc(var(--spacing-2) + var(--spacing-half) - var(--border-width-default)) var(--spacing-4) calc(var(--spacing-2) + var(--spacing-half) - var(--border-width-default)) calc(var(--spacing-module) * 10)}.mrx-input-number.mrx-input-number.mrx-input-number-sm input{font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height)}.mrx-input-number.mrx-input-number.mrx-input-number-sm:not(.mrx-input-number-with-icon) input{padding:calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-4)}.mrx-input-number.mrx-input-number.mrx-input-number-sm.mrx-input-number-with-icon input{padding:calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-4) calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-8)}.mrx-input-number.mrx-input-number.mrx-input-error input{border-color:var(--system-bg-controls-negative-default)}.mrx-input-number.mrx-input-number.mrx-input-checked-error input{border-color:var(--system-bg-controls-negative-default);background-color:var(--system-bg-negative-secondary)}.mrx-input-number.mrx-input-number.mrx-input-checked-success input{background-color:var(--system-bg-positive-secondary);border-color:var(--system-bg-controls-positive-default)}.mrx-input-number.mrx-input-number.-disabled input{background-color:var(--neutral-bg-disabled, #EEF0F4);-webkit-text-fill-color:var(--neutral-text-tertiary, #71767E);color:var(--neutral-text-tertiary, #71767E)}.mrx-input-number.mrx-input-number.-readonly input{background-color:var(--neutral-bg-disabled, #EEF0F4);-webkit-text-fill-color:var(--neutral-text-primary, #262626);color:var(--neutral-text-primary, #262626)}\n"] }]
|
|
12349
|
+
], template: "<div\r\n class=\"mrx-input-number\"\r\n [class]=\"getClasses\"\r\n [class.mrx-input-error]=\"!isValid || invalid\"\r\n [class.-disabled]=\"disabled\"\r\n [class.-readonly]=\"readonly\"\r\n>\r\n <div class=\"mrx-input-number__wrapper\">\r\n <form [formGroup]=\"numberForm\">\r\n <div>\r\n <input\r\n #inputElement\r\n autocomplete=\"nope\"\r\n formControlName=\"number\"\r\n type=\"text\"\r\n [thousandSeparator]=\"thousandsSeparator\"\r\n [decimalMarker]=\"decimalMarker\"\r\n [class]=\"innerClass\"\r\n [mask]=\"'separator.' + decimals\"\r\n [allowNegativeNumbers]=\"allowNegative\"\r\n [placeholder]=\"placeholder ? placeholder : ''\"\r\n (blur)=\"onBlur($event)\"\r\n (paste)=\"onPaste($event)\"\r\n />\r\n </div>\r\n </form>\r\n </div>\r\n\r\n <mrx-error-message *ngIf=\"!isValid && invalidMessageStart\">\r\n {{invalidMessageStart}}\r\n <a href=\"#\" (click)=\"resetToMax($event)\">{{maxMessage}}</a>\r\n {{invalidMessageEnd}}\r\n </mrx-error-message>\r\n\r\n <mrx-save-state [id]=\"uuid\" [fields]=\"fields\"></mrx-save-state>\r\n</div>\r\n", styles: [".mrx-input-number.mrx-input-number{width:100%;position:relative}.mrx-input-number.mrx-input-number .mrx-input-text__wrapper{position:relative}.mrx-input-number.mrx-input-number input{box-sizing:border-box;border:var(--border-width-default) solid var(--neutral-bg-stroke-default);border-radius:var(--border-radius-1);width:100%;outline:none;transition:outline-width .2s,border .2s}.mrx-input-number.mrx-input-number input:focus,.mrx-input-number.mrx-input-number input:active{outline:var(--neutral-bg-island-default) solid var(--border-width-focused)}.mrx-input-number.mrx-input-number input:hover{border:var(--border-width-default) solid var(--neutral-bg-stroke-hover)}.mrx-input-number.mrx-input-number.mrx-input__readonly input[type=tel]:disabled{background-color:inherit}.mrx-input-number.mrx-input-number.mrx-input__readonly input{background-color:inherit}.mrx-input-number.mrx-input-number.mrx-input-number-lg input{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-input-number.mrx-input-number.mrx-input-number-lg:not(.mrx-input-number-with-icon) input{padding:calc(var(--spacing-3) + var(--spacing-half) - var(--border-width-default)) var(--spacing-4)}.mrx-input-number.mrx-input-number.mrx-input-number-lg.mrx-input-number-with-icon input{padding:calc(var(--spacing-3) + var(--spacing-half) - var(--border-width-default)) var(--spacing-4) calc(var(--spacing-3) + var(--spacing-half) - var(--border-width-default)) calc(var(--spacing-module) * 10)}.mrx-input-number.mrx-input-number.mrx-input-number-md input{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-input-number.mrx-input-number.mrx-input-number-md:not(.mrx-input-number-with-icon) input{padding:calc(var(--spacing-2) + var(--spacing-half) - var(--border-width-default)) var(--spacing-4)}.mrx-input-number.mrx-input-number.mrx-input-number-md.mrx-input-number-with-icon input{padding:calc(var(--spacing-2) + var(--spacing-half) - var(--border-width-default)) var(--spacing-4) calc(var(--spacing-2) + var(--spacing-half) - var(--border-width-default)) calc(var(--spacing-module) * 10)}.mrx-input-number.mrx-input-number.mrx-input-number-sm input{font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height)}.mrx-input-number.mrx-input-number.mrx-input-number-sm:not(.mrx-input-number-with-icon) input{padding:calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-4)}.mrx-input-number.mrx-input-number.mrx-input-number-sm.mrx-input-number-with-icon input{padding:calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-4) calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-8)}.mrx-input-number.mrx-input-number.mrx-input-error input{border-color:var(--system-bg-controls-negative-default)!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"] }]
|
|
12347
12350
|
}], ctorParameters: function () { return [{ type: i4.FormBuilder }]; }, propDecorators: { fields: [{
|
|
12348
12351
|
type: Input
|
|
12349
12352
|
}], placeholder: [{
|