myrta-ui 1.1.1 → 1.1.3
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/badges/components/badge/badge.component.mjs +2 -2
- package/esm2020/lib/components/form/input-date-time/input-date-time.component.mjs +2 -2
- package/esm2020/lib/components/form/input-datepicker/input-datepicker.component.mjs +2 -2
- package/esm2020/lib/components/form/input-number/input-number.component.mjs +2 -2
- package/esm2020/lib/components/form/input-password/input-password.component.mjs +2 -2
- package/esm2020/lib/components/form/input-phone/input-phone.component.mjs +2 -2
- package/esm2020/lib/components/form/input-search/input-search.component.mjs +2 -2
- package/esm2020/lib/components/form/input-tel/input-tel.component.mjs +2 -2
- package/esm2020/lib/components/form/input-text/input-text.component.mjs +2 -2
- package/esm2020/lib/components/form/input-timepicker/input-timepicker.component.mjs +2 -2
- package/esm2020/lib/components/form/radio-group/models/radio-group.model.mjs +1 -1
- package/esm2020/lib/components/form/radio-group/radio-group.component.mjs +3 -4
- package/esm2020/lib/components/form/switch/switch.component.mjs +2 -2
- package/esm2020/lib/components/label/label.component.mjs +3 -3
- package/esm2020/lib/components/progress/progress.component.mjs +2 -2
- package/esm2020/lib/components/tabs/tabs-group/tabs-group.component.mjs +2 -2
- package/esm2020/lib/components/tooltip/tooltip-trigger/tooltip-trigger.component.mjs +2 -2
- package/esm2020/public-api.mjs +2 -1
- package/fesm2015/myrta-ui.mjs +32 -33
- package/fesm2015/myrta-ui.mjs.map +1 -1
- package/fesm2020/myrta-ui.mjs +32 -33
- package/fesm2020/myrta-ui.mjs.map +1 -1
- package/lib/components/form/radio-group/models/radio-group.model.d.ts +4 -0
- package/lib/components/form/radio-group/radio-group.component.d.ts +2 -2
- package/package.json +1 -1
- package/public-api.d.ts +1 -0
|
@@ -33,10 +33,10 @@ export class BadgeComponent {
|
|
|
33
33
|
}
|
|
34
34
|
}
|
|
35
35
|
BadgeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
36
|
-
BadgeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: BadgeComponent, selector: "mrx-badge", inputs: { type: "type", tag: "tag", size: "size", color: "color", customColor: "customColor", text: "text", path: "path", customClasses: "customClasses", target: "target" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<ng-container [ngSwitch]=\"tag\">\r\n <ng-container *ngSwitchCase=\"'button'\">\r\n <button\r\n class=\"mrx-badge\"\r\n [class]=\"getClasses\"\r\n [style]=\"{ backgroundColor: getCustomColor }\"\r\n (click)=\"onClick($event)\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>{{text}}\r\n </button>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'link'\">\r\n <a [href]=\"path\" class=\"mrx-badge\" [class]=\"getClasses\" [style]=\"{ backgroundColor: getCustomColor }\" [target]=\"getTarget\">\r\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>{{text}}\r\n </a>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchDefault>\r\n <span class=\"mrx-badge\" [class]=\"getClasses\" [style]=\"{ backgroundColor: getCustomColor }\">\r\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>{{text}}\r\n </span>\r\n </ng-container>\r\n</ng-container>\r\n\r\n<ng-template #content>\r\n <ng-content></ng-content>\r\n</ng-template>\r\n", styles: [".mrx-badge.mrx-badge{display:block;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-badge.mrx-badge.mrx-badge-color-positive{background-color:var(--system-bg-positive-primary);color:var(--neutral-text-primary)}.mrx-badge.mrx-badge.mrx-badge-color-positive.mrx-badge-button,.mrx-badge.mrx-badge.mrx-badge-color-positive.mrx-badge-link{transition:background-color .2s}.mrx-badge.mrx-badge.mrx-badge-color-positive.mrx-badge-button:hover,.mrx-badge.mrx-badge.mrx-badge-color-positive.mrx-badge-link:hover{background-color:var(--system-bg-positive-primary-hover)}.mrx-badge.mrx-badge.mrx-badge-color-negative{background-color:var(--system-bg-negative-primary);color:var(--neutral-text-primary)!important}.mrx-badge.mrx-badge.mrx-badge-color-negative.mrx-badge-button,.mrx-badge.mrx-badge.mrx-badge-color-negative.mrx-badge-link{transition:background-color .2s}.mrx-badge.mrx-badge.mrx-badge-color-negative.mrx-badge-button:hover,.mrx-badge.mrx-badge.mrx-badge-color-negative.mrx-badge-link:hover{background-color:var(--system-bg-negative-primary-hover)}.mrx-badge.mrx-badge.mrx-badge-color-attention{background-color:var(--system-bg-attention-primary);color:var(--neutral-text-primary)}.mrx-badge.mrx-badge.mrx-badge-color-attention.mrx-badge-button,.mrx-badge.mrx-badge.mrx-badge-color-attention.mrx-badge-link{transition:background-color .2s}.mrx-badge.mrx-badge.mrx-badge-color-attention.mrx-badge-button:hover,.mrx-badge.mrx-badge.mrx-badge-color-attention.mrx-badge-link:hover{background-color:var(--system-bg-attention-primary-hover)}.mrx-badge.mrx-badge.mrx-badge-color-neutral{background-color:var(--neutral-bg-island-default);color:var(--neutral-text-primary)}.mrx-badge.mrx-badge.mrx-badge-color-neutral.mrx-badge-button,.mrx-badge.mrx-badge.mrx-badge-color-neutral.mrx-badge-link{transition:background-color .2s}.mrx-badge.mrx-badge.mrx-badge-color-neutral.mrx-badge-button:hover,.mrx-badge.mrx-badge.mrx-badge-color-neutral.mrx-badge-link:hover{background-color:var(--neutral-bg-island-hover)}.mrx-badge.mrx-badge.mrx-badge-color-brand{background-color:var(--brand-bg-secondary-default);color:var(--brand-text-accent)}.mrx-badge.mrx-badge.mrx-badge-color-brand.mrx-badge-button,.mrx-badge.mrx-badge.mrx-badge-color-brand.mrx-badge-link{transition:background-color .2s}.mrx-badge.mrx-badge.mrx-badge-color-brand.mrx-badge-button:hover,.mrx-badge.mrx-badge.mrx-badge-color-brand.mrx-badge-link:hover{background-color:var(--brand-bg-secondary-hover)}.mrx-badge.mrx-badge.mrx-badge-button{border:none;outline:none;cursor:pointer}.mrx-badge.mrx-badge.mrx-badge-link{text-decoration:none;cursor:pointer}.mrx-badge.mrx-badge.mrx-type-default{border-radius:var(--border-radius-1)}.mrx-badge.mrx-badge.mrx-type-default.mrx-size-default{padding:var(--spacing-1) var(--spacing-3)}.mrx-badge.mrx-badge.mrx-type-default.mrx-size-small{padding:1px var(--spacing-2)}.mrx-badge.mrx-badge.mrx-type-circle{border-radius:var(--border-radius-3);text-align:center}.mrx-badge.mrx-badge.mrx-type-circle.mrx-size-default{padding:var(--spacing-1) var(--spacing-2);min-width:var(--sizing-6)}.mrx-badge.mrx-badge.mrx-type-circle.mrx-size-small{padding:var(--sizing-
|
|
36
|
+
BadgeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: BadgeComponent, selector: "mrx-badge", inputs: { type: "type", tag: "tag", size: "size", color: "color", customColor: "customColor", text: "text", path: "path", customClasses: "customClasses", target: "target" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<ng-container [ngSwitch]=\"tag\">\r\n <ng-container *ngSwitchCase=\"'button'\">\r\n <button\r\n class=\"mrx-badge\"\r\n [class]=\"getClasses\"\r\n [style]=\"{ backgroundColor: getCustomColor }\"\r\n (click)=\"onClick($event)\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>{{text}}\r\n </button>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'link'\">\r\n <a [href]=\"path\" class=\"mrx-badge\" [class]=\"getClasses\" [style]=\"{ backgroundColor: getCustomColor }\" [target]=\"getTarget\">\r\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>{{text}}\r\n </a>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchDefault>\r\n <span class=\"mrx-badge\" [class]=\"getClasses\" [style]=\"{ backgroundColor: getCustomColor }\">\r\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>{{text}}\r\n </span>\r\n </ng-container>\r\n</ng-container>\r\n\r\n<ng-template #content>\r\n <ng-content></ng-content>\r\n</ng-template>\r\n", styles: [".mrx-badge.mrx-badge{display:block;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-badge.mrx-badge.mrx-badge-color-positive{background-color:var(--system-bg-positive-primary);color:var(--neutral-text-primary)}.mrx-badge.mrx-badge.mrx-badge-color-positive.mrx-badge-button,.mrx-badge.mrx-badge.mrx-badge-color-positive.mrx-badge-link{transition:background-color .2s}.mrx-badge.mrx-badge.mrx-badge-color-positive.mrx-badge-button:hover,.mrx-badge.mrx-badge.mrx-badge-color-positive.mrx-badge-link:hover{background-color:var(--system-bg-positive-primary-hover)}.mrx-badge.mrx-badge.mrx-badge-color-negative{background-color:var(--system-bg-negative-primary);color:var(--neutral-text-primary)!important}.mrx-badge.mrx-badge.mrx-badge-color-negative.mrx-badge-button,.mrx-badge.mrx-badge.mrx-badge-color-negative.mrx-badge-link{transition:background-color .2s}.mrx-badge.mrx-badge.mrx-badge-color-negative.mrx-badge-button:hover,.mrx-badge.mrx-badge.mrx-badge-color-negative.mrx-badge-link:hover{background-color:var(--system-bg-negative-primary-hover)}.mrx-badge.mrx-badge.mrx-badge-color-attention{background-color:var(--system-bg-attention-primary);color:var(--neutral-text-primary)}.mrx-badge.mrx-badge.mrx-badge-color-attention.mrx-badge-button,.mrx-badge.mrx-badge.mrx-badge-color-attention.mrx-badge-link{transition:background-color .2s}.mrx-badge.mrx-badge.mrx-badge-color-attention.mrx-badge-button:hover,.mrx-badge.mrx-badge.mrx-badge-color-attention.mrx-badge-link:hover{background-color:var(--system-bg-attention-primary-hover)}.mrx-badge.mrx-badge.mrx-badge-color-neutral{background-color:var(--neutral-bg-island-default);color:var(--neutral-text-primary)}.mrx-badge.mrx-badge.mrx-badge-color-neutral.mrx-badge-button,.mrx-badge.mrx-badge.mrx-badge-color-neutral.mrx-badge-link{transition:background-color .2s}.mrx-badge.mrx-badge.mrx-badge-color-neutral.mrx-badge-button:hover,.mrx-badge.mrx-badge.mrx-badge-color-neutral.mrx-badge-link:hover{background-color:var(--neutral-bg-island-hover)}.mrx-badge.mrx-badge.mrx-badge-color-brand{background-color:var(--brand-bg-secondary-default);color:var(--brand-text-accent)}.mrx-badge.mrx-badge.mrx-badge-color-brand.mrx-badge-button,.mrx-badge.mrx-badge.mrx-badge-color-brand.mrx-badge-link{transition:background-color .2s}.mrx-badge.mrx-badge.mrx-badge-color-brand.mrx-badge-button:hover,.mrx-badge.mrx-badge.mrx-badge-color-brand.mrx-badge-link:hover{background-color:var(--brand-bg-secondary-hover)}.mrx-badge.mrx-badge.mrx-badge-button{border:none;outline:none;cursor:pointer}.mrx-badge.mrx-badge.mrx-badge-link{text-decoration:none;cursor:pointer}.mrx-badge.mrx-badge.mrx-type-default{border-radius:var(--border-radius-1)}.mrx-badge.mrx-badge.mrx-type-default.mrx-size-default{padding:var(--spacing-1) var(--spacing-3)}.mrx-badge.mrx-badge.mrx-type-default.mrx-size-small{padding:1px var(--spacing-2)}.mrx-badge.mrx-badge.mrx-type-circle{border-radius:var(--border-radius-3);text-align:center}.mrx-badge.mrx-badge.mrx-type-circle.mrx-size-default{padding:var(--spacing-1) var(--spacing-2);min-width:var(--sizing-6)}.mrx-badge.mrx-badge.mrx-type-circle.mrx-size-small{padding:var(--sizing-half) var(--spacing-1);min-width:var(--sizing-5)}\n"], directives: [{ type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
37
37
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: BadgeComponent, decorators: [{
|
|
38
38
|
type: Component,
|
|
39
|
-
args: [{ selector: 'mrx-badge', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container [ngSwitch]=\"tag\">\r\n <ng-container *ngSwitchCase=\"'button'\">\r\n <button\r\n class=\"mrx-badge\"\r\n [class]=\"getClasses\"\r\n [style]=\"{ backgroundColor: getCustomColor }\"\r\n (click)=\"onClick($event)\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>{{text}}\r\n </button>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'link'\">\r\n <a [href]=\"path\" class=\"mrx-badge\" [class]=\"getClasses\" [style]=\"{ backgroundColor: getCustomColor }\" [target]=\"getTarget\">\r\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>{{text}}\r\n </a>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchDefault>\r\n <span class=\"mrx-badge\" [class]=\"getClasses\" [style]=\"{ backgroundColor: getCustomColor }\">\r\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>{{text}}\r\n </span>\r\n </ng-container>\r\n</ng-container>\r\n\r\n<ng-template #content>\r\n <ng-content></ng-content>\r\n</ng-template>\r\n", styles: [".mrx-badge.mrx-badge{display:block;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-badge.mrx-badge.mrx-badge-color-positive{background-color:var(--system-bg-positive-primary);color:var(--neutral-text-primary)}.mrx-badge.mrx-badge.mrx-badge-color-positive.mrx-badge-button,.mrx-badge.mrx-badge.mrx-badge-color-positive.mrx-badge-link{transition:background-color .2s}.mrx-badge.mrx-badge.mrx-badge-color-positive.mrx-badge-button:hover,.mrx-badge.mrx-badge.mrx-badge-color-positive.mrx-badge-link:hover{background-color:var(--system-bg-positive-primary-hover)}.mrx-badge.mrx-badge.mrx-badge-color-negative{background-color:var(--system-bg-negative-primary);color:var(--neutral-text-primary)!important}.mrx-badge.mrx-badge.mrx-badge-color-negative.mrx-badge-button,.mrx-badge.mrx-badge.mrx-badge-color-negative.mrx-badge-link{transition:background-color .2s}.mrx-badge.mrx-badge.mrx-badge-color-negative.mrx-badge-button:hover,.mrx-badge.mrx-badge.mrx-badge-color-negative.mrx-badge-link:hover{background-color:var(--system-bg-negative-primary-hover)}.mrx-badge.mrx-badge.mrx-badge-color-attention{background-color:var(--system-bg-attention-primary);color:var(--neutral-text-primary)}.mrx-badge.mrx-badge.mrx-badge-color-attention.mrx-badge-button,.mrx-badge.mrx-badge.mrx-badge-color-attention.mrx-badge-link{transition:background-color .2s}.mrx-badge.mrx-badge.mrx-badge-color-attention.mrx-badge-button:hover,.mrx-badge.mrx-badge.mrx-badge-color-attention.mrx-badge-link:hover{background-color:var(--system-bg-attention-primary-hover)}.mrx-badge.mrx-badge.mrx-badge-color-neutral{background-color:var(--neutral-bg-island-default);color:var(--neutral-text-primary)}.mrx-badge.mrx-badge.mrx-badge-color-neutral.mrx-badge-button,.mrx-badge.mrx-badge.mrx-badge-color-neutral.mrx-badge-link{transition:background-color .2s}.mrx-badge.mrx-badge.mrx-badge-color-neutral.mrx-badge-button:hover,.mrx-badge.mrx-badge.mrx-badge-color-neutral.mrx-badge-link:hover{background-color:var(--neutral-bg-island-hover)}.mrx-badge.mrx-badge.mrx-badge-color-brand{background-color:var(--brand-bg-secondary-default);color:var(--brand-text-accent)}.mrx-badge.mrx-badge.mrx-badge-color-brand.mrx-badge-button,.mrx-badge.mrx-badge.mrx-badge-color-brand.mrx-badge-link{transition:background-color .2s}.mrx-badge.mrx-badge.mrx-badge-color-brand.mrx-badge-button:hover,.mrx-badge.mrx-badge.mrx-badge-color-brand.mrx-badge-link:hover{background-color:var(--brand-bg-secondary-hover)}.mrx-badge.mrx-badge.mrx-badge-button{border:none;outline:none;cursor:pointer}.mrx-badge.mrx-badge.mrx-badge-link{text-decoration:none;cursor:pointer}.mrx-badge.mrx-badge.mrx-type-default{border-radius:var(--border-radius-1)}.mrx-badge.mrx-badge.mrx-type-default.mrx-size-default{padding:var(--spacing-1) var(--spacing-3)}.mrx-badge.mrx-badge.mrx-type-default.mrx-size-small{padding:1px var(--spacing-2)}.mrx-badge.mrx-badge.mrx-type-circle{border-radius:var(--border-radius-3);text-align:center}.mrx-badge.mrx-badge.mrx-type-circle.mrx-size-default{padding:var(--spacing-1) var(--spacing-2);min-width:var(--sizing-6)}.mrx-badge.mrx-badge.mrx-type-circle.mrx-size-small{padding:var(--sizing-
|
|
39
|
+
args: [{ selector: 'mrx-badge', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container [ngSwitch]=\"tag\">\r\n <ng-container *ngSwitchCase=\"'button'\">\r\n <button\r\n class=\"mrx-badge\"\r\n [class]=\"getClasses\"\r\n [style]=\"{ backgroundColor: getCustomColor }\"\r\n (click)=\"onClick($event)\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>{{text}}\r\n </button>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'link'\">\r\n <a [href]=\"path\" class=\"mrx-badge\" [class]=\"getClasses\" [style]=\"{ backgroundColor: getCustomColor }\" [target]=\"getTarget\">\r\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>{{text}}\r\n </a>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchDefault>\r\n <span class=\"mrx-badge\" [class]=\"getClasses\" [style]=\"{ backgroundColor: getCustomColor }\">\r\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>{{text}}\r\n </span>\r\n </ng-container>\r\n</ng-container>\r\n\r\n<ng-template #content>\r\n <ng-content></ng-content>\r\n</ng-template>\r\n", styles: [".mrx-badge.mrx-badge{display:block;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-badge.mrx-badge.mrx-badge-color-positive{background-color:var(--system-bg-positive-primary);color:var(--neutral-text-primary)}.mrx-badge.mrx-badge.mrx-badge-color-positive.mrx-badge-button,.mrx-badge.mrx-badge.mrx-badge-color-positive.mrx-badge-link{transition:background-color .2s}.mrx-badge.mrx-badge.mrx-badge-color-positive.mrx-badge-button:hover,.mrx-badge.mrx-badge.mrx-badge-color-positive.mrx-badge-link:hover{background-color:var(--system-bg-positive-primary-hover)}.mrx-badge.mrx-badge.mrx-badge-color-negative{background-color:var(--system-bg-negative-primary);color:var(--neutral-text-primary)!important}.mrx-badge.mrx-badge.mrx-badge-color-negative.mrx-badge-button,.mrx-badge.mrx-badge.mrx-badge-color-negative.mrx-badge-link{transition:background-color .2s}.mrx-badge.mrx-badge.mrx-badge-color-negative.mrx-badge-button:hover,.mrx-badge.mrx-badge.mrx-badge-color-negative.mrx-badge-link:hover{background-color:var(--system-bg-negative-primary-hover)}.mrx-badge.mrx-badge.mrx-badge-color-attention{background-color:var(--system-bg-attention-primary);color:var(--neutral-text-primary)}.mrx-badge.mrx-badge.mrx-badge-color-attention.mrx-badge-button,.mrx-badge.mrx-badge.mrx-badge-color-attention.mrx-badge-link{transition:background-color .2s}.mrx-badge.mrx-badge.mrx-badge-color-attention.mrx-badge-button:hover,.mrx-badge.mrx-badge.mrx-badge-color-attention.mrx-badge-link:hover{background-color:var(--system-bg-attention-primary-hover)}.mrx-badge.mrx-badge.mrx-badge-color-neutral{background-color:var(--neutral-bg-island-default);color:var(--neutral-text-primary)}.mrx-badge.mrx-badge.mrx-badge-color-neutral.mrx-badge-button,.mrx-badge.mrx-badge.mrx-badge-color-neutral.mrx-badge-link{transition:background-color .2s}.mrx-badge.mrx-badge.mrx-badge-color-neutral.mrx-badge-button:hover,.mrx-badge.mrx-badge.mrx-badge-color-neutral.mrx-badge-link:hover{background-color:var(--neutral-bg-island-hover)}.mrx-badge.mrx-badge.mrx-badge-color-brand{background-color:var(--brand-bg-secondary-default);color:var(--brand-text-accent)}.mrx-badge.mrx-badge.mrx-badge-color-brand.mrx-badge-button,.mrx-badge.mrx-badge.mrx-badge-color-brand.mrx-badge-link{transition:background-color .2s}.mrx-badge.mrx-badge.mrx-badge-color-brand.mrx-badge-button:hover,.mrx-badge.mrx-badge.mrx-badge-color-brand.mrx-badge-link:hover{background-color:var(--brand-bg-secondary-hover)}.mrx-badge.mrx-badge.mrx-badge-button{border:none;outline:none;cursor:pointer}.mrx-badge.mrx-badge.mrx-badge-link{text-decoration:none;cursor:pointer}.mrx-badge.mrx-badge.mrx-type-default{border-radius:var(--border-radius-1)}.mrx-badge.mrx-badge.mrx-type-default.mrx-size-default{padding:var(--spacing-1) var(--spacing-3)}.mrx-badge.mrx-badge.mrx-type-default.mrx-size-small{padding:1px var(--spacing-2)}.mrx-badge.mrx-badge.mrx-type-circle{border-radius:var(--border-radius-3);text-align:center}.mrx-badge.mrx-badge.mrx-type-circle.mrx-size-default{padding:var(--spacing-1) var(--spacing-2);min-width:var(--sizing-6)}.mrx-badge.mrx-badge.mrx-type-circle.mrx-size-small{padding:var(--sizing-half) var(--spacing-1);min-width:var(--sizing-5)}\n"] }]
|
|
40
40
|
}], propDecorators: { type: [{
|
|
41
41
|
type: Input
|
|
42
42
|
}], tag: [{
|
|
@@ -333,12 +333,12 @@ export class InputDateTimeComponent {
|
|
|
333
333
|
InputDateTimeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: InputDateTimeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
334
334
|
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", minDate: "minDate", maxDate: "maxDate", timezone: "timezone", inline: "inline", isManualInput: "isManualInput", addMinTime: "addMinTime", addMaxTime: "addMaxTime", addMinTimeObj: "addMinTimeObj", addMaxTimeObj: "addMaxTimeObj", disableValidate: "disableValidate", container: "container", invalid: "invalid", invalidMessage: "invalidMessage", checkInvalid: "checkInvalid" }, outputs: { changed: "changed", modelChange: "modelChange" }, providers: [
|
|
335
335
|
{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => InputDateTimeComponent), multi: true }
|
|
336
|
-
], 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 />\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\r\n\r\n\r\n", styles: [".mrx-input-date.mrx-input-date{width:100%;position:relative}.mrx-input-date.mrx-input-date .mrx-input-date__wrapper{position:relative}.mrx-input-date.mrx-input-date .mrx-input-date__input{border:var(--border-width-default) solid var(--neutral-bg-stroke-default);border-radius:var(--border-radius-1);width:100%;transition:outline-width .2s,border .2s}.mrx-input-date.mrx-input-date .mrx-input-date__input:focus,.mrx-input-date.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 .mrx-input-date__input:hover{border:var(--border-width-default) solid var(--neutral-bg-stroke-hover)}.mrx-input-date.mrx-input-date .mrx-input-date__input:disabled{background-color:var(--neutral-bg-disabled)}.mrx-input-date.mrx-input-date.mrx-input-date-lg .mrx-input-date__input{padding:calc(var(--spacing-3) + var(--spacing-
|
|
336
|
+
], 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 />\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\r\n\r\n\r\n", styles: [".mrx-input-date.mrx-input-date{width:100%;position:relative}.mrx-input-date.mrx-input-date .mrx-input-date__wrapper{position:relative}.mrx-input-date.mrx-input-date .mrx-input-date__input{border:var(--border-width-default) solid var(--neutral-bg-stroke-default);border-radius:var(--border-radius-1);width:100%;transition:outline-width .2s,border .2s}.mrx-input-date.mrx-input-date .mrx-input-date__input:focus,.mrx-input-date.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 .mrx-input-date__input:hover{border:var(--border-width-default) solid var(--neutral-bg-stroke-hover)}.mrx-input-date.mrx-input-date .mrx-input-date__input:disabled{background-color:var(--neutral-bg-disabled)}.mrx-input-date.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.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.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)!important}.mrx-input-date.mrx-input-date.mrx-input-checked-error .mrx-input-date__input{border-color:var(--system-bg-controls-negative-default)!important;background-color:var(--system-bg-negative-secondary)!important}.mrx-input-date.mrx-input-date.mrx-input-checked-success .mrx-input-date__input{background-color:var(--system-bg-positive-secondary)!important;border-color:var(--system-bg-controls-positive-default)!important}.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: i1.LabelComponent, selector: "mrx-label", inputs: ["requiredHidden", "required", "boldLabel", "disabled", "placeholder", "label", "customClasses", "triggerTextPosition", "isPublicInfo", "publicInfoTooltip", "isSwitch", "switchLabel", "switchValue", "counter", "linkText", "linkPrevent", "linkType", "linkMonochrome", "href", "triggerType", "tooltip", "tooltipInitialVisible", "isSaveToStorage"], outputs: ["changeCheckboxValue", "clickedLink"] }, { type: i2.ErrorMessageComponent, selector: "mrx-error-message", inputs: ["invalid", "invalidMessage", "customClasses"] }, { type: i3.SaveStateComponent, selector: "mrx-save-state", inputs: ["type", "fields", "id"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.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: i6.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
337
337
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: InputDateTimeComponent, decorators: [{
|
|
338
338
|
type: Component,
|
|
339
339
|
args: [{ selector: 'mrx-input-date-time', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
340
340
|
{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => InputDateTimeComponent), multi: true }
|
|
341
|
-
], 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 />\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\r\n\r\n\r\n", styles: [".mrx-input-date.mrx-input-date{width:100%;position:relative}.mrx-input-date.mrx-input-date .mrx-input-date__wrapper{position:relative}.mrx-input-date.mrx-input-date .mrx-input-date__input{border:var(--border-width-default) solid var(--neutral-bg-stroke-default);border-radius:var(--border-radius-1);width:100%;transition:outline-width .2s,border .2s}.mrx-input-date.mrx-input-date .mrx-input-date__input:focus,.mrx-input-date.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 .mrx-input-date__input:hover{border:var(--border-width-default) solid var(--neutral-bg-stroke-hover)}.mrx-input-date.mrx-input-date .mrx-input-date__input:disabled{background-color:var(--neutral-bg-disabled)}.mrx-input-date.mrx-input-date.mrx-input-date-lg .mrx-input-date__input{padding:calc(var(--spacing-3) + var(--spacing-
|
|
341
|
+
], 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 />\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\r\n\r\n\r\n", styles: [".mrx-input-date.mrx-input-date{width:100%;position:relative}.mrx-input-date.mrx-input-date .mrx-input-date__wrapper{position:relative}.mrx-input-date.mrx-input-date .mrx-input-date__input{border:var(--border-width-default) solid var(--neutral-bg-stroke-default);border-radius:var(--border-radius-1);width:100%;transition:outline-width .2s,border .2s}.mrx-input-date.mrx-input-date .mrx-input-date__input:focus,.mrx-input-date.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 .mrx-input-date__input:hover{border:var(--border-width-default) solid var(--neutral-bg-stroke-hover)}.mrx-input-date.mrx-input-date .mrx-input-date__input:disabled{background-color:var(--neutral-bg-disabled)}.mrx-input-date.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.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.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)!important}.mrx-input-date.mrx-input-date.mrx-input-checked-error .mrx-input-date__input{border-color:var(--system-bg-controls-negative-default)!important;background-color:var(--system-bg-negative-secondary)!important}.mrx-input-date.mrx-input-date.mrx-input-checked-success .mrx-input-date__input{background-color:var(--system-bg-positive-secondary)!important;border-color:var(--system-bg-controls-positive-default)!important}.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"] }]
|
|
342
342
|
}], ctorParameters: function () { return []; }, propDecorators: { fields: [{
|
|
343
343
|
type: Input
|
|
344
344
|
}], size: [{
|
|
@@ -290,12 +290,12 @@ export class InputDatepickerComponent {
|
|
|
290
290
|
InputDatepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: InputDatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
291
291
|
InputDatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: InputDatepickerComponent, selector: "mrx-input-datepicker", inputs: { fields: "fields", size: "size", format: "format", locale: "locale", customClasses: "customClasses", dateLabel: "dateLabel", timeLabel: "timeLabel", datePlaceholder: "datePlaceholder", placeholder: "placeholder", disabled: "disabled", readonly: "readonly", required: "required", timepicker: "timepicker", minDate: "minDate", maxDate: "maxDate", inline: "inline", closable: "closable", leadZeroDateTime: "leadZeroDateTime", mask: "mask", container: "container", validationType: "validationType", disableValidation: "disableValidation", invalid: "invalid", invalidMessage: "invalidMessage", checkInvalid: "checkInvalid", isShowMessages: "isShowMessages" }, outputs: { changed: "changed", modelChange: "modelChange" }, providers: [
|
|
292
292
|
{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => InputDatepickerComponent), multi: true }
|
|
293
|
-
], viewQueries: [{ propertyName: "dateInput", first: true, predicate: ["dateInput"], 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.-disabled]=\"disabled\"\r\n [class.-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]=\"placeholder\"\r\n [ngModel]=\"getDateValue\"\r\n [mask]=\"mask\"\r\n [leadZeroDateTime]=\"leadZeroDateTime\"\r\n [validation]=\"false\"\r\n [disabled]=\"disabled || readonly\"\r\n (input)=\"updateDateValue(dateInput)\"\r\n (click)=\"clickToInput(dateInput)\"\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 && !(disabled || readonly)\"\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\r\n\r\n\r\n", styles: [".mrx-input-date.mrx-input-date{width:100%;position:relative}.mrx-input-date.mrx-input-date .mrx-input-date__wrapper{position:relative}.mrx-input-date.mrx-input-date .mrx-input-date__input{border:var(--border-width-default) solid var(--neutral-bg-stroke-default);border-radius:var(--border-radius-1);width:100%;transition:outline-width .2s,border .2s}.mrx-input-date.mrx-input-date .mrx-input-date__input:focus,.mrx-input-date.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 .mrx-input-date__input:hover{border:var(--border-width-default) solid var(--neutral-bg-stroke-hover)}.mrx-input-date.mrx-input-date.mrx-input-date-lg .mrx-input-date__input{padding:calc(var(--spacing-3) + var(--spacing-
|
|
293
|
+
], viewQueries: [{ propertyName: "dateInput", first: true, predicate: ["dateInput"], 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.-disabled]=\"disabled\"\r\n [class.-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]=\"placeholder\"\r\n [ngModel]=\"getDateValue\"\r\n [mask]=\"mask\"\r\n [leadZeroDateTime]=\"leadZeroDateTime\"\r\n [validation]=\"false\"\r\n [disabled]=\"disabled || readonly\"\r\n (input)=\"updateDateValue(dateInput)\"\r\n (click)=\"clickToInput(dateInput)\"\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 && !(disabled || readonly)\"\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\r\n\r\n\r\n", styles: [".mrx-input-date.mrx-input-date{width:100%;position:relative}.mrx-input-date.mrx-input-date .mrx-input-date__wrapper{position:relative}.mrx-input-date.mrx-input-date .mrx-input-date__input{border:var(--border-width-default) solid var(--neutral-bg-stroke-default);border-radius:var(--border-radius-1);width:100%;transition:outline-width .2s,border .2s}.mrx-input-date.mrx-input-date .mrx-input-date__input:focus,.mrx-input-date.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 .mrx-input-date__input:hover{border:var(--border-width-default) solid var(--neutral-bg-stroke-hover)}.mrx-input-date.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.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.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)!important}.mrx-input-date.mrx-input-date.mrx-input-checked-error .mrx-input-date__input{border-color:var(--system-bg-controls-negative-default)!important;background-color:var(--system-bg-negative-secondary)!important}.mrx-input-date.mrx-input-date.mrx-input-checked-success .mrx-input-date__input{background-color:var(--system-bg-positive-secondary)!important;border-color:var(--system-bg-controls-positive-default)!important}.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)}.mrx-input-date.mrx-input-date.-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-date.mrx-input-date.-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: i1.LabelComponent, selector: "mrx-label", inputs: ["requiredHidden", "required", "boldLabel", "disabled", "placeholder", "label", "customClasses", "triggerTextPosition", "isPublicInfo", "publicInfoTooltip", "isSwitch", "switchLabel", "switchValue", "counter", "linkText", "linkPrevent", "linkType", "linkMonochrome", "href", "triggerType", "tooltip", "tooltipInitialVisible", "isSaveToStorage"], outputs: ["changeCheckboxValue", "clickedLink"] }, { type: i2.ErrorMessageComponent, selector: "mrx-error-message", inputs: ["invalid", "invalidMessage", "customClasses"] }, { type: i3.SaveStateComponent, selector: "mrx-save-state", inputs: ["type", "fields", "id"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.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: i6.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
294
294
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: InputDatepickerComponent, decorators: [{
|
|
295
295
|
type: Component,
|
|
296
296
|
args: [{ selector: 'mrx-input-datepicker', providers: [
|
|
297
297
|
{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => InputDatepickerComponent), multi: true }
|
|
298
|
-
], template: "<div\r\n class=\"mrx-input-date\"\r\n [class.mrx-input-error]=\"invalid || innerInvalid\"\r\n [class.-disabled]=\"disabled\"\r\n [class.-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]=\"placeholder\"\r\n [ngModel]=\"getDateValue\"\r\n [mask]=\"mask\"\r\n [leadZeroDateTime]=\"leadZeroDateTime\"\r\n [validation]=\"false\"\r\n [disabled]=\"disabled || readonly\"\r\n (input)=\"updateDateValue(dateInput)\"\r\n (click)=\"clickToInput(dateInput)\"\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 && !(disabled || readonly)\"\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\r\n\r\n\r\n", styles: [".mrx-input-date.mrx-input-date{width:100%;position:relative}.mrx-input-date.mrx-input-date .mrx-input-date__wrapper{position:relative}.mrx-input-date.mrx-input-date .mrx-input-date__input{border:var(--border-width-default) solid var(--neutral-bg-stroke-default);border-radius:var(--border-radius-1);width:100%;transition:outline-width .2s,border .2s}.mrx-input-date.mrx-input-date .mrx-input-date__input:focus,.mrx-input-date.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 .mrx-input-date__input:hover{border:var(--border-width-default) solid var(--neutral-bg-stroke-hover)}.mrx-input-date.mrx-input-date.mrx-input-date-lg .mrx-input-date__input{padding:calc(var(--spacing-3) + var(--spacing-
|
|
298
|
+
], template: "<div\r\n class=\"mrx-input-date\"\r\n [class.mrx-input-error]=\"invalid || innerInvalid\"\r\n [class.-disabled]=\"disabled\"\r\n [class.-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]=\"placeholder\"\r\n [ngModel]=\"getDateValue\"\r\n [mask]=\"mask\"\r\n [leadZeroDateTime]=\"leadZeroDateTime\"\r\n [validation]=\"false\"\r\n [disabled]=\"disabled || readonly\"\r\n (input)=\"updateDateValue(dateInput)\"\r\n (click)=\"clickToInput(dateInput)\"\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 && !(disabled || readonly)\"\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\r\n\r\n\r\n", styles: [".mrx-input-date.mrx-input-date{width:100%;position:relative}.mrx-input-date.mrx-input-date .mrx-input-date__wrapper{position:relative}.mrx-input-date.mrx-input-date .mrx-input-date__input{border:var(--border-width-default) solid var(--neutral-bg-stroke-default);border-radius:var(--border-radius-1);width:100%;transition:outline-width .2s,border .2s}.mrx-input-date.mrx-input-date .mrx-input-date__input:focus,.mrx-input-date.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 .mrx-input-date__input:hover{border:var(--border-width-default) solid var(--neutral-bg-stroke-hover)}.mrx-input-date.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.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.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)!important}.mrx-input-date.mrx-input-date.mrx-input-checked-error .mrx-input-date__input{border-color:var(--system-bg-controls-negative-default)!important;background-color:var(--system-bg-negative-secondary)!important}.mrx-input-date.mrx-input-date.mrx-input-checked-success .mrx-input-date__input{background-color:var(--system-bg-positive-secondary)!important;border-color:var(--system-bg-controls-positive-default)!important}.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)}.mrx-input-date.mrx-input-date.-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-date.mrx-input-date.-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"] }]
|
|
299
299
|
}], ctorParameters: function () { return []; }, propDecorators: { fields: [{
|
|
300
300
|
type: Input
|
|
301
301
|
}], size: [{
|
|
@@ -199,12 +199,12 @@ InputNumberComponent._delimitersInitialised = false;
|
|
|
199
199
|
InputNumberComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: InputNumberComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
200
200
|
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: { modelChange: "modelChange" }, providers: [
|
|
201
201
|
{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => InputNumberComponent), multi: true },
|
|
202
|
-
], 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-
|
|
202
|
+
], 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"], components: [{ type: i2.ErrorMessageComponent, selector: "mrx-error-message", inputs: ["invalid", "invalidMessage", "customClasses"] }, { type: i3.SaveStateComponent, selector: "mrx-save-state", inputs: ["type", "fields", "id"] }], directives: [{ type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1.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: i4.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
203
203
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: InputNumberComponent, decorators: [{
|
|
204
204
|
type: Component,
|
|
205
205
|
args: [{ selector: 'mrx-input-number', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
206
206
|
{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => InputNumberComponent), multi: true },
|
|
207
|
-
], 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-
|
|
207
|
+
], 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"] }]
|
|
208
208
|
}], ctorParameters: function () { return [{ type: i1.FormBuilder }]; }, propDecorators: { fields: [{
|
|
209
209
|
type: Input
|
|
210
210
|
}], placeholder: [{
|
|
@@ -81,7 +81,7 @@ InputPasswordComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
|
|
|
81
81
|
useExisting: forwardRef(() => InputPasswordComponent),
|
|
82
82
|
multi: true,
|
|
83
83
|
},
|
|
84
|
-
], ngImport: i0, template: "<div\r\n class=\"mrx-input-password\"\r\n [class]=\"getClasses\"\r\n [class.mrx-input-error]=\"invalid\">\r\n <div class=\"mrx-input-password__wrapper\">\r\n <input\r\n autocomplete=\"nope\"\r\n #inputElement\r\n [type]=\"isShowPassword ? 'text' : 'password'\"\r\n [ngModel]=\"value\"\r\n (ngModelChange)=\"updateValue($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 />\r\n\r\n <div class=\"mrx-input-password__icons\">\r\n <span\r\n class=\"mrx-icon\"\r\n [class]=\"isShowPassword ? 'icon-hide' : 'icon-view'\"\r\n [class.icon-font-16]=\"size === 'small' || size === 'medium'\"\r\n [class.icon-font-24]=\"size === 'large'\"\r\n (click)=\"toggleShow()\"\r\n ></span>\r\n </div>\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</div>\r\n", styles: [".mrx-input-password.mrx-input-password{width:100%;position:relative}.mrx-input-password.mrx-input-password .mrx-input-password__wrapper{position:relative}.mrx-input-password.mrx-input-password 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-password.mrx-input-password input:focus,.mrx-input-password.mrx-input-password input:active{outline:var(--neutral-bg-island-default) solid var(--border-width-focused)}.mrx-input-password.mrx-input-password input:hover{border:var(--border-width-default) solid var(--neutral-bg-stroke-hover)}.mrx-input-password.mrx-input-password input:disabled{background-color:var(--neutral-bg-disabled)}.mrx-input-password.mrx-input-password.mrx-input__readonly input[type=tel]:disabled{background-color:inherit}.mrx-input-password.mrx-input-password.mrx-input__readonly input{background-color:inherit}.mrx-input-password.mrx-input-password.mrx-input-password-lg input{padding:calc(var(--spacing-3) + var(--spacing-
|
|
84
|
+
], ngImport: i0, template: "<div\r\n class=\"mrx-input-password\"\r\n [class]=\"getClasses\"\r\n [class.mrx-input-error]=\"invalid\">\r\n <div class=\"mrx-input-password__wrapper\">\r\n <input\r\n autocomplete=\"nope\"\r\n #inputElement\r\n [type]=\"isShowPassword ? 'text' : 'password'\"\r\n [ngModel]=\"value\"\r\n (ngModelChange)=\"updateValue($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 />\r\n\r\n <div class=\"mrx-input-password__icons\">\r\n <span\r\n class=\"mrx-icon\"\r\n [class]=\"isShowPassword ? 'icon-hide' : 'icon-view'\"\r\n [class.icon-font-16]=\"size === 'small' || size === 'medium'\"\r\n [class.icon-font-24]=\"size === 'large'\"\r\n (click)=\"toggleShow()\"\r\n ></span>\r\n </div>\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</div>\r\n", styles: [".mrx-input-password.mrx-input-password{width:100%;position:relative}.mrx-input-password.mrx-input-password .mrx-input-password__wrapper{position:relative}.mrx-input-password.mrx-input-password 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-password.mrx-input-password input:focus,.mrx-input-password.mrx-input-password input:active{outline:var(--neutral-bg-island-default) solid var(--border-width-focused)}.mrx-input-password.mrx-input-password input:hover{border:var(--border-width-default) solid var(--neutral-bg-stroke-hover)}.mrx-input-password.mrx-input-password input:disabled{background-color:var(--neutral-bg-disabled)}.mrx-input-password.mrx-input-password.mrx-input__readonly input[type=tel]:disabled{background-color:inherit}.mrx-input-password.mrx-input-password.mrx-input__readonly input{background-color:inherit}.mrx-input-password.mrx-input-password.mrx-input-password-lg input{padding:calc(var(--spacing-3) + var(--spacing-half) - var(--border-width-default)) var(--spacing-12) calc(var(--spacing-3) + var(--spacing-half) - var(--border-width-default)) var(--spacing-4);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-password.mrx-input-password.mrx-input-password-md input{padding:calc(var(--spacing-2) + var(--spacing-half) - var(--border-width-default)) var(--spacing-8) calc(var(--spacing-2) + var(--spacing-half) - var(--border-width-default)) var(--spacing-4);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-password.mrx-input-password.mrx-input-password-sm input{padding:calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-8) calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-4);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-password.mrx-input-password.mrx-input-error input{border-color:var(--system-bg-controls-negative-default)}.mrx-input-password.mrx-input-password.mrx-input-checked-error input{border-color:var(--system-bg-controls-negative-default);background-color:var(--system-bg-negative-secondary)}.mrx-input-password.mrx-input-password.mrx-input-checked-success input{background-color:var(--system-bg-positive-secondary);border-color:var(--system-bg-controls-positive-default)}@font-face{font-family:pass;font-style:normal;font-weight:400;src:url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAATsAA8AAAAAB2QAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABWAAAABwAAAAcg9+z70dERUYAAAF0AAAAHAAAAB4AJwANT1MvMgAAAZAAAAA/AAAAYH7AkBhjbWFwAAAB0AAAAFkAAAFqZowMx2N2dCAAAAIsAAAABAAAAAQAIgKIZ2FzcAAAAjAAAAAIAAAACAAAABBnbHlmAAACOAAAALkAAAE0MwNYJ2hlYWQAAAL0AAAAMAAAADYPA2KgaGhlYQAAAyQAAAAeAAAAJAU+ATJobXR4AAADRAAAABwAAAAcCPoA6mxvY2EAAANgAAAAEAAAABAA5gFMbWF4cAAAA3AAAAAaAAAAIAAKAE9uYW1lAAADjAAAARYAAAIgB4hZ03Bvc3QAAASkAAAAPgAAAE5Ojr8ld2ViZgAABOQAAAAGAAAABuK7WtIAAAABAAAAANXulPUAAAAA1viLwQAAAADW+JM4eNpjYGRgYOABYjEgZmJgBEI2IGYB8xgAA+AANXjaY2BifMg4gYGVgYVBAwOeYEAFjMgcp8yiFAYHBl7VP8wx/94wpDDHMIoo2DP8B8kx2TLHACkFBkYA8/IL3QB42mNgYGBmgGAZBkYGEEgB8hjBfBYGDyDNx8DBwMTABmTxMigoKKmeV/3z/z9YJTKf8f/X/4/vP7pldosLag4SYATqhgkyMgEJJnQFECcMOGChndEAfOwRuAAAAAAiAogAAQAB//8AD3jaY2BiUGJgYDRiWsXAzMDOoLeRkUHfZhM7C8Nbo41srHdsNjEzAZkMG5lBwqwg4U3sbIx/bDYxgsSNBRUF1Y0FlZUYBd6dOcO06m+YElMa0DiGJIZUxjuM9xjkGRhU2djZlJXU1UDQ1MTcDASNjcTFQFBUBGjYEkkVMJCU4gcCKRTeHCk+fn4+KSllsJiUJEhMUgrMUQbZk8bgz/iA8SRR9qzAY087FjEYD2QPDDAzMFgyAwC39TCRAAAAeNpjYGRgYADid/fqneL5bb4yyLMwgMC1H90HIfRkCxDN+IBpFZDiYGAC8QBbSwuceNpjYGRgYI7594aBgcmOAQgYHzAwMqACdgBbWQN0AAABdgAiAAAAAAAAAAABFAAAAj4AYgI+AGYB9AAAAAAAKgAqACoAKgBeAJIAmnjaY2BkYGBgZ1BgYGIAAUYGBNADEQAFQQBaAAB42o2PwUrDQBCGvzVV9GAQDx485exBY1CU3PQgVgIFI9prlVqDwcZNC/oSPoKP4HNUfQLfxYN/NytCe5GwO9/88+/MBAh5I8C0VoAtnYYNa8oaXpAn9RxIP/XcIqLreZENnjwvyfPieVVdXj2H7DHxPJH/2/M7sVn3/MGyOfb8SWjOGv4K2DRdctpkmtqhos+D6ISh4kiUUXDj1Fr3Bc/Oc0vPqec6A8aUyu1cdTaPZvyXyqz6Fm5axC7bxHOv/r/dnbSRXCk7+mpVrOqVtFqdp3NKxaHUgeod9cm40rtrzfrt2OyQa8fppCO9tk7d1x0rpiQcuDuRkjjtkHt16ctbuf/radZY52/PnEcphXpZOcofiEZNcQAAeNpjYGIAg///GBgZsAF2BgZGJkZmBmaGdkYWRla29JzKggxD9tK8TAMDAxc2D0MLU2NjENfI1M0ZACUXCrsAAAABWtLiugAA) format(\"woff\")}.mrx-input-password.mrx-input-password input[type=password]:not(:placeholder-shown){font-family:pass,Roboto,Helvetica,Arial,sans-serif}.mrx-input-password.mrx-input-password .mrx-input-password__icons{position:absolute;right:var(--spacing-3);top:50%;transform:translateY(-50%);display:flex;align-items:center}.mrx-input-password.mrx-input-password .mrx-input-password__icons .mrx-icon{will-change:transform;cursor:pointer;color:var(--neutral-icon-default)}\n"], components: [{ type: i1.CharsLeftComponent, selector: "mrx-chars-left", inputs: ["maxlength", "valueLength", "value"] }, { type: i2.ErrorMessageComponent, selector: "mrx-error-message", inputs: ["invalid", "invalidMessage", "customClasses"] }], directives: [{ type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
85
85
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: InputPasswordComponent, decorators: [{
|
|
86
86
|
type: Component,
|
|
87
87
|
args: [{ selector: 'mrx-input-password', providers: [
|
|
@@ -90,7 +90,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
90
90
|
useExisting: forwardRef(() => InputPasswordComponent),
|
|
91
91
|
multi: true,
|
|
92
92
|
},
|
|
93
|
-
], template: "<div\r\n class=\"mrx-input-password\"\r\n [class]=\"getClasses\"\r\n [class.mrx-input-error]=\"invalid\">\r\n <div class=\"mrx-input-password__wrapper\">\r\n <input\r\n autocomplete=\"nope\"\r\n #inputElement\r\n [type]=\"isShowPassword ? 'text' : 'password'\"\r\n [ngModel]=\"value\"\r\n (ngModelChange)=\"updateValue($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 />\r\n\r\n <div class=\"mrx-input-password__icons\">\r\n <span\r\n class=\"mrx-icon\"\r\n [class]=\"isShowPassword ? 'icon-hide' : 'icon-view'\"\r\n [class.icon-font-16]=\"size === 'small' || size === 'medium'\"\r\n [class.icon-font-24]=\"size === 'large'\"\r\n (click)=\"toggleShow()\"\r\n ></span>\r\n </div>\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</div>\r\n", styles: [".mrx-input-password.mrx-input-password{width:100%;position:relative}.mrx-input-password.mrx-input-password .mrx-input-password__wrapper{position:relative}.mrx-input-password.mrx-input-password 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-password.mrx-input-password input:focus,.mrx-input-password.mrx-input-password input:active{outline:var(--neutral-bg-island-default) solid var(--border-width-focused)}.mrx-input-password.mrx-input-password input:hover{border:var(--border-width-default) solid var(--neutral-bg-stroke-hover)}.mrx-input-password.mrx-input-password input:disabled{background-color:var(--neutral-bg-disabled)}.mrx-input-password.mrx-input-password.mrx-input__readonly input[type=tel]:disabled{background-color:inherit}.mrx-input-password.mrx-input-password.mrx-input__readonly input{background-color:inherit}.mrx-input-password.mrx-input-password.mrx-input-password-lg input{padding:calc(var(--spacing-3) + var(--spacing-
|
|
93
|
+
], template: "<div\r\n class=\"mrx-input-password\"\r\n [class]=\"getClasses\"\r\n [class.mrx-input-error]=\"invalid\">\r\n <div class=\"mrx-input-password__wrapper\">\r\n <input\r\n autocomplete=\"nope\"\r\n #inputElement\r\n [type]=\"isShowPassword ? 'text' : 'password'\"\r\n [ngModel]=\"value\"\r\n (ngModelChange)=\"updateValue($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 />\r\n\r\n <div class=\"mrx-input-password__icons\">\r\n <span\r\n class=\"mrx-icon\"\r\n [class]=\"isShowPassword ? 'icon-hide' : 'icon-view'\"\r\n [class.icon-font-16]=\"size === 'small' || size === 'medium'\"\r\n [class.icon-font-24]=\"size === 'large'\"\r\n (click)=\"toggleShow()\"\r\n ></span>\r\n </div>\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</div>\r\n", styles: [".mrx-input-password.mrx-input-password{width:100%;position:relative}.mrx-input-password.mrx-input-password .mrx-input-password__wrapper{position:relative}.mrx-input-password.mrx-input-password 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-password.mrx-input-password input:focus,.mrx-input-password.mrx-input-password input:active{outline:var(--neutral-bg-island-default) solid var(--border-width-focused)}.mrx-input-password.mrx-input-password input:hover{border:var(--border-width-default) solid var(--neutral-bg-stroke-hover)}.mrx-input-password.mrx-input-password input:disabled{background-color:var(--neutral-bg-disabled)}.mrx-input-password.mrx-input-password.mrx-input__readonly input[type=tel]:disabled{background-color:inherit}.mrx-input-password.mrx-input-password.mrx-input__readonly input{background-color:inherit}.mrx-input-password.mrx-input-password.mrx-input-password-lg input{padding:calc(var(--spacing-3) + var(--spacing-half) - var(--border-width-default)) var(--spacing-12) calc(var(--spacing-3) + var(--spacing-half) - var(--border-width-default)) var(--spacing-4);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-password.mrx-input-password.mrx-input-password-md input{padding:calc(var(--spacing-2) + var(--spacing-half) - var(--border-width-default)) var(--spacing-8) calc(var(--spacing-2) + var(--spacing-half) - var(--border-width-default)) var(--spacing-4);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-password.mrx-input-password.mrx-input-password-sm input{padding:calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-8) calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-4);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-password.mrx-input-password.mrx-input-error input{border-color:var(--system-bg-controls-negative-default)}.mrx-input-password.mrx-input-password.mrx-input-checked-error input{border-color:var(--system-bg-controls-negative-default);background-color:var(--system-bg-negative-secondary)}.mrx-input-password.mrx-input-password.mrx-input-checked-success input{background-color:var(--system-bg-positive-secondary);border-color:var(--system-bg-controls-positive-default)}@font-face{font-family:pass;font-style:normal;font-weight:400;src:url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAATsAA8AAAAAB2QAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABWAAAABwAAAAcg9+z70dERUYAAAF0AAAAHAAAAB4AJwANT1MvMgAAAZAAAAA/AAAAYH7AkBhjbWFwAAAB0AAAAFkAAAFqZowMx2N2dCAAAAIsAAAABAAAAAQAIgKIZ2FzcAAAAjAAAAAIAAAACAAAABBnbHlmAAACOAAAALkAAAE0MwNYJ2hlYWQAAAL0AAAAMAAAADYPA2KgaGhlYQAAAyQAAAAeAAAAJAU+ATJobXR4AAADRAAAABwAAAAcCPoA6mxvY2EAAANgAAAAEAAAABAA5gFMbWF4cAAAA3AAAAAaAAAAIAAKAE9uYW1lAAADjAAAARYAAAIgB4hZ03Bvc3QAAASkAAAAPgAAAE5Ojr8ld2ViZgAABOQAAAAGAAAABuK7WtIAAAABAAAAANXulPUAAAAA1viLwQAAAADW+JM4eNpjYGRgYOABYjEgZmJgBEI2IGYB8xgAA+AANXjaY2BifMg4gYGVgYVBAwOeYEAFjMgcp8yiFAYHBl7VP8wx/94wpDDHMIoo2DP8B8kx2TLHACkFBkYA8/IL3QB42mNgYGBmgGAZBkYGEEgB8hjBfBYGDyDNx8DBwMTABmTxMigoKKmeV/3z/z9YJTKf8f/X/4/vP7pldosLag4SYATqhgkyMgEJJnQFECcMOGChndEAfOwRuAAAAAAiAogAAQAB//8AD3jaY2BiUGJgYDRiWsXAzMDOoLeRkUHfZhM7C8Nbo41srHdsNjEzAZkMG5lBwqwg4U3sbIx/bDYxgsSNBRUF1Y0FlZUYBd6dOcO06m+YElMa0DiGJIZUxjuM9xjkGRhU2djZlJXU1UDQ1MTcDASNjcTFQFBUBGjYEkkVMJCU4gcCKRTeHCk+fn4+KSllsJiUJEhMUgrMUQbZk8bgz/iA8SRR9qzAY087FjEYD2QPDDAzMFgyAwC39TCRAAAAeNpjYGRgYADid/fqneL5bb4yyLMwgMC1H90HIfRkCxDN+IBpFZDiYGAC8QBbSwuceNpjYGRgYI7594aBgcmOAQgYHzAwMqACdgBbWQN0AAABdgAiAAAAAAAAAAABFAAAAj4AYgI+AGYB9AAAAAAAKgAqACoAKgBeAJIAmnjaY2BkYGBgZ1BgYGIAAUYGBNADEQAFQQBaAAB42o2PwUrDQBCGvzVV9GAQDx485exBY1CU3PQgVgIFI9prlVqDwcZNC/oSPoKP4HNUfQLfxYN/NytCe5GwO9/88+/MBAh5I8C0VoAtnYYNa8oaXpAn9RxIP/XcIqLreZENnjwvyfPieVVdXj2H7DHxPJH/2/M7sVn3/MGyOfb8SWjOGv4K2DRdctpkmtqhos+D6ISh4kiUUXDj1Fr3Bc/Oc0vPqec6A8aUyu1cdTaPZvyXyqz6Fm5axC7bxHOv/r/dnbSRXCk7+mpVrOqVtFqdp3NKxaHUgeod9cm40rtrzfrt2OyQa8fppCO9tk7d1x0rpiQcuDuRkjjtkHt16ctbuf/radZY52/PnEcphXpZOcofiEZNcQAAeNpjYGIAg///GBgZsAF2BgZGJkZmBmaGdkYWRla29JzKggxD9tK8TAMDAxc2D0MLU2NjENfI1M0ZACUXCrsAAAABWtLiugAA) format(\"woff\")}.mrx-input-password.mrx-input-password input[type=password]:not(:placeholder-shown){font-family:pass,Roboto,Helvetica,Arial,sans-serif}.mrx-input-password.mrx-input-password .mrx-input-password__icons{position:absolute;right:var(--spacing-3);top:50%;transform:translateY(-50%);display:flex;align-items:center}.mrx-input-password.mrx-input-password .mrx-input-password__icons .mrx-icon{will-change:transform;cursor:pointer;color:var(--neutral-icon-default)}\n"] }]
|
|
94
94
|
}], ctorParameters: function () { return []; }, propDecorators: { disabled: [{
|
|
95
95
|
type: Input
|
|
96
96
|
}], required: [{
|