myrta-ui 17.0.0-beta.5 → 17.0.0-beta.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/components/badges/components/badge/badge.component.mjs +2 -2
- package/esm2022/lib/components/form/input-date-time/input-date-time.component.mjs +2 -2
- package/esm2022/lib/components/form/input-datepicker/input-datepicker.component.mjs +2 -2
- package/esm2022/lib/components/form/input-file/input-file.component.mjs +44 -46
- package/esm2022/lib/components/form/input-file-image/components/file-image-edit-modal/file-image-edit-modal.component.mjs +6 -4
- package/esm2022/lib/components/form/input-file-image/input-file-image.component.mjs +140 -144
- package/esm2022/lib/components/form/input-file-image/input-file-image.module.mjs +6 -4
- package/esm2022/lib/components/form/input-number/input-number.component.mjs +2 -2
- package/esm2022/lib/components/form/input-password/input-password.component.mjs +2 -2
- package/esm2022/lib/components/form/input-phone/input-phone.component.mjs +2 -2
- package/esm2022/lib/components/form/input-search/input-search.component.mjs +2 -2
- package/esm2022/lib/components/form/input-tel/input-tel.component.mjs +2 -2
- package/esm2022/lib/components/form/input-text/input-text.component.mjs +2 -2
- package/esm2022/lib/components/form/switch/switch.component.mjs +2 -2
- package/esm2022/lib/components/progress/progress.component.mjs +2 -2
- package/esm2022/lib/components/tabs/tabs-group/tabs-group.component.mjs +2 -2
- package/esm2022/lib/components/tooltip/tooltip-trigger/tooltip-trigger.component.mjs +2 -2
- package/esm2022/lib/models/input-file/input-file.model.mjs +1 -1
- package/esm2022/lib/services/file-upload/file-upload.service.mjs +5 -4
- package/fesm2022/myrta-ui.mjs +315 -314
- package/fesm2022/myrta-ui.mjs.map +1 -1
- package/lib/components/form/input-file/input-file.component.d.ts +6 -4
- package/lib/components/form/input-file-image/components/file-image-edit-modal/file-image-edit-modal.component.d.ts +3 -1
- package/lib/components/form/input-file-image/input-file-image.component.d.ts +21 -25
- package/lib/components/form/input-file-image/input-file-image.module.d.ts +1 -1
- package/lib/models/input-file/input-file.model.d.ts +5 -4
- package/lib/services/file-upload/file-upload.service.d.ts +1 -1
- package/package.json +1 -1
|
@@ -32,11 +32,11 @@ export class BadgeComponent {
|
|
|
32
32
|
});
|
|
33
33
|
}
|
|
34
34
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
35
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", 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-famil);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-
|
|
35
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", 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-famil);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"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
36
36
|
}
|
|
37
37
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", 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-famil);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-famil);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: [{
|
|
@@ -315,13 +315,13 @@ export class InputDateTimeComponent {
|
|
|
315
315
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: InputDateTimeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
316
316
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", 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", 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: [
|
|
317
317
|
{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => InputDateTimeComponent), multi: true }
|
|
318
|
-
], 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-
|
|
318
|
+
], 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"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.SaveStateComponent, selector: "mrx-save-state", inputs: ["type", "fields", "id"] }, { kind: "component", type: i4.ErrorMessageComponent, selector: "mrx-error-message", inputs: ["invalid", "invalidMessage", "customClasses"] }, { kind: "component", type: i5.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"] }, { kind: "directive", type: i6.NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }] });
|
|
319
319
|
}
|
|
320
320
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: InputDateTimeComponent, decorators: [{
|
|
321
321
|
type: Component,
|
|
322
322
|
args: [{ selector: 'mrx-input-date-time', providers: [
|
|
323
323
|
{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => InputDateTimeComponent), multi: true }
|
|
324
|
-
], 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-
|
|
324
|
+
], 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"] }]
|
|
325
325
|
}], ctorParameters: () => [], propDecorators: { fields: [{
|
|
326
326
|
type: Input
|
|
327
327
|
}], size: [{
|
|
@@ -288,13 +288,13 @@ export class InputDatepickerComponent {
|
|
|
288
288
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: InputDatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
289
289
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", 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", invalid: "invalid", invalidMessage: "invalidMessage", checkInvalid: "checkInvalid", isShowMessages: "isShowMessages" }, outputs: { changed: "changed", modelChange: "modelChange" }, providers: [
|
|
290
290
|
{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => InputDatepickerComponent), multi: true }
|
|
291
|
-
], 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-
|
|
291
|
+
], 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"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.SaveStateComponent, selector: "mrx-save-state", inputs: ["type", "fields", "id"] }, { kind: "component", type: i4.ErrorMessageComponent, selector: "mrx-error-message", inputs: ["invalid", "invalidMessage", "customClasses"] }, { kind: "component", type: i5.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"] }, { kind: "directive", type: i6.NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }] });
|
|
292
292
|
}
|
|
293
293
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: InputDatepickerComponent, decorators: [{
|
|
294
294
|
type: Component,
|
|
295
295
|
args: [{ selector: 'mrx-input-datepicker', providers: [
|
|
296
296
|
{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => InputDatepickerComponent), multi: true }
|
|
297
|
-
], 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-
|
|
297
|
+
], 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"] }]
|
|
298
298
|
}], ctorParameters: () => [], propDecorators: { fields: [{
|
|
299
299
|
type: Input
|
|
300
300
|
}], size: [{
|