@datarailsshared/datarailsshared 1.5.247 → 1.5.250
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/assets/styles/mixins.scss +2 -1
- package/datarailsshared-datarailsshared-1.5.250.tgz +0 -0
- package/esm2022/lib/dr-badge-status/dr-badge-status.component.mjs +2 -2
- package/esm2022/lib/dr-inputs/date-pickers/dr-date-picker-with-timeframe/dr-date-picker-with-timeframe.component.mjs +2 -2
- package/fesm2022/datarailsshared-datarailsshared.mjs +4 -4
- package/fesm2022/datarailsshared-datarailsshared.mjs.map +1 -1
- package/package.json +1 -1
- package/datarailsshared-datarailsshared-1.5.247.tgz +0 -0
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
@import './vars';
|
|
2
2
|
|
|
3
|
-
@mixin dr-primary-font($fontSize: $dr-primary-font-size-x-small,
|
|
3
|
+
@mixin dr-primary-font($fontSize: $dr-primary-font-size-x-small,
|
|
4
|
+
$fontWeight: $dr-primary-font-weight-light,
|
|
4
5
|
$line-height: $dr-primary-font-line-height-x-small) {
|
|
5
6
|
font-family: $dr-primary-font-family;
|
|
6
7
|
font-style: normal;
|
|
Binary file
|
|
@@ -10,11 +10,11 @@ export class DrBadgeStatusComponent {
|
|
|
10
10
|
ngOnInit() {
|
|
11
11
|
}
|
|
12
12
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DrBadgeStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DrBadgeStatusComponent, selector: "dr-badge-status", inputs: { theme: "theme", icon: "icon", label: "label", tooltip: "tooltip" }, ngImport: i0, template: "<div class=\"badge-status\" [drTooltip]=\"tooltip\"\n [ngClass]=\"'badge-status--' + theme\">\n <i *ngIf=\"icon\" class=\"{{ icon }}\"></i>\n <span *ngIf=\"label\">{{ label }}</span>\n</div>\n", styles: [".badge-status{display:flex;align-items:center;font-family:Poppins,sans-serif;font-style:normal;font-size
|
|
13
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DrBadgeStatusComponent, selector: "dr-badge-status", inputs: { theme: "theme", icon: "icon", label: "label", tooltip: "tooltip" }, ngImport: i0, template: "<div class=\"badge-status\" [drTooltip]=\"tooltip\"\n [ngClass]=\"'badge-status--' + theme\">\n <i *ngIf=\"icon\" class=\"{{ icon }}\"></i>\n <span *ngIf=\"label\">{{ label }}</span>\n</div>\n", styles: [".badge-status{display:flex;align-items:center;font-family:Poppins,sans-serif;font-style:normal;font-size:12px;font-weight:600;line-height:20px;height:24px;padding:2px 8px 2px 4px;border-radius:4px;cursor:pointer}.badge-status i{font-size:20px;margin-right:4px}.badge-status--info{color:#0b5af9;background:#E6EFFF}.badge-status--error{color:#bf1d30;background:#F7D9DC}.badge-status--warning{color:#ffb800;background:#FFEFC7}.badge-status--success{color:#037c5a;background:#DBF5E6}.badge-status--regular{color:#7e828e;background:#F0F1F4}.badge-status--progress{color:#4646ce;background:#F2F2FB}.badge-status--dotted{color:#7e828e;background:transparent}.badge-status--dotted i{display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DrTooltipDirective, selector: "[drTooltip]", inputs: ["drTooltip", "drTooltipContext", "drTooltipPosition", "drTooltipClass", "drTooltipTheme", "drTooltipMousleaveTimeout", "drTooltipOptions", "drTooltipShow"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
14
14
|
}
|
|
15
15
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DrBadgeStatusComponent, decorators: [{
|
|
16
16
|
type: Component,
|
|
17
|
-
args: [{ selector: 'dr-badge-status', encapsulation: ViewEncapsulation.None, template: "<div class=\"badge-status\" [drTooltip]=\"tooltip\"\n [ngClass]=\"'badge-status--' + theme\">\n <i *ngIf=\"icon\" class=\"{{ icon }}\"></i>\n <span *ngIf=\"label\">{{ label }}</span>\n</div>\n", styles: [".badge-status{display:flex;align-items:center;font-family:Poppins,sans-serif;font-style:normal;font-size
|
|
17
|
+
args: [{ selector: 'dr-badge-status', encapsulation: ViewEncapsulation.None, template: "<div class=\"badge-status\" [drTooltip]=\"tooltip\"\n [ngClass]=\"'badge-status--' + theme\">\n <i *ngIf=\"icon\" class=\"{{ icon }}\"></i>\n <span *ngIf=\"label\">{{ label }}</span>\n</div>\n", styles: [".badge-status{display:flex;align-items:center;font-family:Poppins,sans-serif;font-style:normal;font-size:12px;font-weight:600;line-height:20px;height:24px;padding:2px 8px 2px 4px;border-radius:4px;cursor:pointer}.badge-status i{font-size:20px;margin-right:4px}.badge-status--info{color:#0b5af9;background:#E6EFFF}.badge-status--error{color:#bf1d30;background:#F7D9DC}.badge-status--warning{color:#ffb800;background:#FFEFC7}.badge-status--success{color:#037c5a;background:#DBF5E6}.badge-status--regular{color:#7e828e;background:#F0F1F4}.badge-status--progress{color:#4646ce;background:#F2F2FB}.badge-status--dotted{color:#7e828e;background:transparent}.badge-status--dotted i{display:none}\n"] }]
|
|
18
18
|
}], ctorParameters: function () { return []; }, propDecorators: { theme: [{
|
|
19
19
|
type: Input
|
|
20
20
|
}], icon: [{
|
|
@@ -157,14 +157,14 @@ export class DrDatePickerWithTimeframeComponent extends DrDatePickerComponent {
|
|
|
157
157
|
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DrDatePickerWithTimeframeComponent, selector: "dr-date-picker-with-timeframe", inputs: { isDashboardDatepicker: "isDashboardDatepicker", dateFormatConfig: "dateFormatConfig", canSelectTimeframe: "canSelectTimeframe", availableTimeframes: "availableTimeframes", paginationDebounce: "paginationDebounce", isUsingDateTagPresets: "isUsingDateTagPresets", presetTag: "presetTag" }, outputs: { onChangeFormat: "onChangeFormat", onChangePresetTag: "onChangePresetTag" }, host: { properties: { "class.dr-date-picker-on-dashboard": "this.isDashboardClassDisplayed" } }, providers: [
|
|
158
158
|
{ provide: NG_VALUE_ACCESSOR, useExisting: DrDatePickerWithTimeframeComponent, multi: true },
|
|
159
159
|
{ provide: DrDatePickerService }
|
|
160
|
-
], usesInheritance: true, ngImport: i0, template: "<dr-button [disabled]=\"isPrevDateDisabled\" *ngIf=\"!disabled\" theme=\"icon\" icon=\"dr-icon-arrow-left\" (click)=\"pagingClicked(false)\"></dr-button>\n<div class=\"dr-datepicker-input-container\">\n <i *ngIf=\"isDashboardDatepicker\" class=\"dr-icon-date\"></i>\n\n <div class=\"dr-datepicker-input-container__formatted-value-display\" (click)=\"datepickerInput.click()\">\n <span *ngIf=\"presetTagSelected && datePickerService.isUsingDateTagPresets\"> {{ presetTagSelected }} </span>\n <span>{{ presetTagSelected && datePickerService.isUsingDateTagPresets ? '(' + displayedFormattedValue + ')' : displayedFormattedValue }}</span>\n </div>\n <input\n #datepickerInput\n [(ngModel)]=\"value\"\n (click)=\"datePicker.open()\"\n [matDatepicker]=\"datePicker\"\n [readonly]=\"readonly\"\n [min]=\"_min\"\n [max]=\"_max\"\n />\n</div>\n<dr-button [disabled]=\"isNextDateDisabled\" *ngIf=\"!disabled\" theme=\"icon\" icon=\"dr-icon-arrow-right\" (click)=\"pagingClicked(true)\"></dr-button>\n<mat-datepicker #datePicker\n class=\"dr-timeframe-datepicker\"\n [calendarHeaderComponent]=\"customHeader\"\n (yearSelected)=\"chosenPeriodHandler($event, timeframeOption.YEAR)\"\n (monthSelected)=\"chosenPeriodHandler($event, timeframeOption.MONTH)\"\n [panelClass]=\"datePickerService.isUsingDateTagPresets ? 'date-picker-preset-tag' : 'dr-timeframe-datepicker'\"\n >\n</mat-datepicker>\n", styles: [":host{position:relative;width:100%;display:flex;flex-direction:row;min-height:32px;height:32px;font-size:14px;font-family:Poppins,sans-serif;background-color:#fff;border:1px solid #9EA1AA;border-radius:6px;color:#333;overflow:hidden;outline:none;cursor:pointer}:host:hover{border-color:#9ea1aa}:host.active,:host:focus-within{border-color:#4646ce!important;color:#333}:host.disabled{pointer-events:none;border:1px solid #AEABAC;background:#F0F1F4;color:#aeabac}:host.disabled:after{color:#aeabac}:host.ng-valid.ng-dirty{border-color:#037c5a}:host.ng-invalid.ng-dirty:not(:focus-within){border-color:#bf1d30!important}:host.ng-untouched.ng-valid{border-color:#9ea1aa}:host:after,:host:before{position:absolute;display:flex;border-color:#6D6E6F transparent transparent;color:#6d6e6f}:host:after{font-family:DataRails!important;content:\"\\ea13\";font-size:24px;color:#6d6e6f;top:0;bottom:0;right:8px;pointer-events:none;position:absolute;display:flex;align-items:center;justify-content:center}:host i{display:flex;align-items:center;position:absolute;color:#6d6e6f;left:8px;top:0;bottom:0}:host input{display:flex;flex-grow:1;height:100%;border:none;text-align:left;padding-left:35px;padding-right:25px;cursor:pointer!important;outline:none}:host input.when-quarter{position:absolute;visibility:hidden}:host input:disabled{border:none;color:#aeabac;background:transparent}:host input::-webkit-search-decoration,:host input::-webkit-search-cancel-button,:host input::-webkit-search-results-button,:host input::-webkit-search-results-decoration{-webkit-appearance:none}:host input::placeholder{color:#6d6e6f;font-size:14px;line-height:18px}::ng-deep .mat-datepicker-popup .mat-datepicker-content{margin:7px 0;box-shadow:0 4px 8px 1px #00000040;border-radius:12px!important}::ng-deep .mat-datepicker-popup .mat-datepicker-content button[disabled]{border:inherit;color:inherit;background-color:inherit}::ng-deep .mat-datepicker-popup .mat-datepicker-content button[disabled]:hover{border:inherit}::ng-deep .mat-datepicker-popup .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background:#F2F2FB;color:#4646ce;font-weight:600}::ng-deep .mat-datepicker-popup .mat-calendar-body-selected{background-color:#4646ce;color:#f2f2fb;font-weight:600}::ng-deep .mat-datepicker-popup .mat-calendar-body-today.mat-calendar-body-selected{box-shadow:none}::ng-deep .mat-datepicker-popup .mat-button-focus-overlay{background:#F5F5F5}::ng-deep .mat-datepicker-popup .mat-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:1!important;background:#F5F5F5;transition:opacity .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-datepicker-popup .mat-calendar-controls .mat-calendar-period-button:hover{background:#F5F5F5;transition:background .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-datepicker-popup .mat-calendar-table-header th{font-size:14px;font-weight:600;color:#333}::ng-deep .mat-datepicker-popup .mat-calendar-table-header-divider{display:none}::ng-deep .mat-datepicker-popup .mat-calendar-body-label{color:#fff;padding:0}:host{border:none;display:flex;align-items:center}:host.disabled{background:transparent;color:
|
|
160
|
+
], usesInheritance: true, ngImport: i0, template: "<dr-button [disabled]=\"isPrevDateDisabled\" *ngIf=\"!disabled\" theme=\"icon\" icon=\"dr-icon-arrow-left\" (click)=\"pagingClicked(false)\"></dr-button>\n<div class=\"dr-datepicker-input-container\">\n <i *ngIf=\"isDashboardDatepicker\" class=\"dr-icon-date\"></i>\n\n <div class=\"dr-datepicker-input-container__formatted-value-display\" (click)=\"datepickerInput.click()\">\n <span *ngIf=\"presetTagSelected && datePickerService.isUsingDateTagPresets\"> {{ presetTagSelected }} </span>\n <span>{{ presetTagSelected && datePickerService.isUsingDateTagPresets ? '(' + displayedFormattedValue + ')' : displayedFormattedValue }}</span>\n </div>\n <input\n #datepickerInput\n [(ngModel)]=\"value\"\n (click)=\"datePicker.open()\"\n [matDatepicker]=\"datePicker\"\n [readonly]=\"readonly\"\n [min]=\"_min\"\n [max]=\"_max\"\n />\n</div>\n<dr-button [disabled]=\"isNextDateDisabled\" *ngIf=\"!disabled\" theme=\"icon\" icon=\"dr-icon-arrow-right\" (click)=\"pagingClicked(true)\"></dr-button>\n<mat-datepicker #datePicker\n class=\"dr-timeframe-datepicker\"\n [calendarHeaderComponent]=\"customHeader\"\n (yearSelected)=\"chosenPeriodHandler($event, timeframeOption.YEAR)\"\n (monthSelected)=\"chosenPeriodHandler($event, timeframeOption.MONTH)\"\n [panelClass]=\"datePickerService.isUsingDateTagPresets ? 'date-picker-preset-tag' : 'dr-timeframe-datepicker'\"\n >\n</mat-datepicker>\n", styles: [":host{position:relative;width:100%;display:flex;flex-direction:row;min-height:32px;height:32px;font-size:14px;font-family:Poppins,sans-serif;background-color:#fff;border:1px solid #9EA1AA;border-radius:6px;color:#333;overflow:hidden;outline:none;cursor:pointer}:host:hover{border-color:#9ea1aa}:host.active,:host:focus-within{border-color:#4646ce!important;color:#333}:host.disabled{pointer-events:none;border:1px solid #AEABAC;background:#F0F1F4;color:#aeabac}:host.disabled:after{color:#aeabac}:host.ng-valid.ng-dirty{border-color:#037c5a}:host.ng-invalid.ng-dirty:not(:focus-within){border-color:#bf1d30!important}:host.ng-untouched.ng-valid{border-color:#9ea1aa}:host:after,:host:before{position:absolute;display:flex;border-color:#6D6E6F transparent transparent;color:#6d6e6f}:host:after{font-family:DataRails!important;content:\"\\ea13\";font-size:24px;color:#6d6e6f;top:0;bottom:0;right:8px;pointer-events:none;position:absolute;display:flex;align-items:center;justify-content:center}:host i{display:flex;align-items:center;position:absolute;color:#6d6e6f;left:8px;top:0;bottom:0}:host input{display:flex;flex-grow:1;height:100%;border:none;text-align:left;padding-left:35px;padding-right:25px;cursor:pointer!important;outline:none}:host input.when-quarter{position:absolute;visibility:hidden}:host input:disabled{border:none;color:#aeabac;background:transparent}:host input::-webkit-search-decoration,:host input::-webkit-search-cancel-button,:host input::-webkit-search-results-button,:host input::-webkit-search-results-decoration{-webkit-appearance:none}:host input::placeholder{color:#6d6e6f;font-size:14px;line-height:18px}::ng-deep .mat-datepicker-popup .mat-datepicker-content{margin:7px 0;box-shadow:0 4px 8px 1px #00000040;border-radius:12px!important}::ng-deep .mat-datepicker-popup .mat-datepicker-content button[disabled]{border:inherit;color:inherit;background-color:inherit}::ng-deep .mat-datepicker-popup .mat-datepicker-content button[disabled]:hover{border:inherit}::ng-deep .mat-datepicker-popup .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background:#F2F2FB;color:#4646ce;font-weight:600}::ng-deep .mat-datepicker-popup .mat-calendar-body-selected{background-color:#4646ce;color:#f2f2fb;font-weight:600}::ng-deep .mat-datepicker-popup .mat-calendar-body-today.mat-calendar-body-selected{box-shadow:none}::ng-deep .mat-datepicker-popup .mat-button-focus-overlay{background:#F5F5F5}::ng-deep .mat-datepicker-popup .mat-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:1!important;background:#F5F5F5;transition:opacity .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-datepicker-popup .mat-calendar-controls .mat-calendar-period-button:hover{background:#F5F5F5;transition:background .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-datepicker-popup .mat-calendar-table-header th{font-size:14px;font-weight:600;color:#333}::ng-deep .mat-datepicker-popup .mat-calendar-table-header-divider{display:none}::ng-deep .mat-datepicker-popup .mat-calendar-body-label{color:#fff;padding:0}:host{border:none;display:flex;align-items:center}:host.disabled{background:transparent;color:#aeabac}:host.disabled.dr-date-picker-on-dashboard{border:none;padding:0 8px}:host.disabled.dr-date-picker-on-dashboard .dr-datepicker-input-container__formatted-value-display{text-decoration:none;color:#aeabac;font-weight:400}:host.disabled.dr-date-picker-on-dashboard .dr-datepicker-input-container i{color:#aeabac}:host.dr-date-picker-on-dashboard{width:-moz-fit-content;width:fit-content;justify-content:space-between}:host.dr-date-picker-on-dashboard mat-datepicker{position:absolute}:host.dr-date-picker-on-dashboard:after{visibility:hidden}:host.dr-date-picker-on-dashboard .dr-datepicker-input-container{display:flex;flex-direction:row;justify-content:center;align-items:center;margin-left:-10px}:host.dr-date-picker-on-dashboard .dr-datepicker-input-container__formatted-value-display{font-weight:600;width:auto;margin-left:5px}:host.dr-date-picker-on-dashboard .dr-datepicker-input-container .dr-icon-date{display:block;position:relative;top:0;margin-right:8px;color:#4e566c}:host .dr-datepicker-input-container input{visibility:hidden;position:absolute;width:100%}:host .dr-datepicker-input-container__formatted-value-display{width:90px;height:22px;padding-left:0;text-align:center;line-height:22px;color:#0c142b;text-decoration-line:underline}:host .dr-datepicker-input-container__formatted-value-display:hover{background-color:#f2f2fb;border-radius:5px;cursor:pointer;text-decoration-line:underline;color:#4646ce}::ng-deep .date-picker-preset-tag{width:386px!important}::ng-deep .date-picker-preset-tag .mat-calendar-content{padding-left:32px!important;padding-right:32px!important}\n"], dependencies: [{ kind: "directive", 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]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i5.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6.DrButtonComponent, selector: "dr-button", inputs: ["theme", "icon", "iconColor", "iconSize", "iconAfter", "iconAfterColor", "iconAfterSize", "disabled", "isLoading", "isActive"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
161
161
|
}
|
|
162
162
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DrDatePickerWithTimeframeComponent, decorators: [{
|
|
163
163
|
type: Component,
|
|
164
164
|
args: [{ selector: 'dr-date-picker-with-timeframe', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
165
165
|
{ provide: NG_VALUE_ACCESSOR, useExisting: DrDatePickerWithTimeframeComponent, multi: true },
|
|
166
166
|
{ provide: DrDatePickerService }
|
|
167
|
-
], template: "<dr-button [disabled]=\"isPrevDateDisabled\" *ngIf=\"!disabled\" theme=\"icon\" icon=\"dr-icon-arrow-left\" (click)=\"pagingClicked(false)\"></dr-button>\n<div class=\"dr-datepicker-input-container\">\n <i *ngIf=\"isDashboardDatepicker\" class=\"dr-icon-date\"></i>\n\n <div class=\"dr-datepicker-input-container__formatted-value-display\" (click)=\"datepickerInput.click()\">\n <span *ngIf=\"presetTagSelected && datePickerService.isUsingDateTagPresets\"> {{ presetTagSelected }} </span>\n <span>{{ presetTagSelected && datePickerService.isUsingDateTagPresets ? '(' + displayedFormattedValue + ')' : displayedFormattedValue }}</span>\n </div>\n <input\n #datepickerInput\n [(ngModel)]=\"value\"\n (click)=\"datePicker.open()\"\n [matDatepicker]=\"datePicker\"\n [readonly]=\"readonly\"\n [min]=\"_min\"\n [max]=\"_max\"\n />\n</div>\n<dr-button [disabled]=\"isNextDateDisabled\" *ngIf=\"!disabled\" theme=\"icon\" icon=\"dr-icon-arrow-right\" (click)=\"pagingClicked(true)\"></dr-button>\n<mat-datepicker #datePicker\n class=\"dr-timeframe-datepicker\"\n [calendarHeaderComponent]=\"customHeader\"\n (yearSelected)=\"chosenPeriodHandler($event, timeframeOption.YEAR)\"\n (monthSelected)=\"chosenPeriodHandler($event, timeframeOption.MONTH)\"\n [panelClass]=\"datePickerService.isUsingDateTagPresets ? 'date-picker-preset-tag' : 'dr-timeframe-datepicker'\"\n >\n</mat-datepicker>\n", styles: [":host{position:relative;width:100%;display:flex;flex-direction:row;min-height:32px;height:32px;font-size:14px;font-family:Poppins,sans-serif;background-color:#fff;border:1px solid #9EA1AA;border-radius:6px;color:#333;overflow:hidden;outline:none;cursor:pointer}:host:hover{border-color:#9ea1aa}:host.active,:host:focus-within{border-color:#4646ce!important;color:#333}:host.disabled{pointer-events:none;border:1px solid #AEABAC;background:#F0F1F4;color:#aeabac}:host.disabled:after{color:#aeabac}:host.ng-valid.ng-dirty{border-color:#037c5a}:host.ng-invalid.ng-dirty:not(:focus-within){border-color:#bf1d30!important}:host.ng-untouched.ng-valid{border-color:#9ea1aa}:host:after,:host:before{position:absolute;display:flex;border-color:#6D6E6F transparent transparent;color:#6d6e6f}:host:after{font-family:DataRails!important;content:\"\\ea13\";font-size:24px;color:#6d6e6f;top:0;bottom:0;right:8px;pointer-events:none;position:absolute;display:flex;align-items:center;justify-content:center}:host i{display:flex;align-items:center;position:absolute;color:#6d6e6f;left:8px;top:0;bottom:0}:host input{display:flex;flex-grow:1;height:100%;border:none;text-align:left;padding-left:35px;padding-right:25px;cursor:pointer!important;outline:none}:host input.when-quarter{position:absolute;visibility:hidden}:host input:disabled{border:none;color:#aeabac;background:transparent}:host input::-webkit-search-decoration,:host input::-webkit-search-cancel-button,:host input::-webkit-search-results-button,:host input::-webkit-search-results-decoration{-webkit-appearance:none}:host input::placeholder{color:#6d6e6f;font-size:14px;line-height:18px}::ng-deep .mat-datepicker-popup .mat-datepicker-content{margin:7px 0;box-shadow:0 4px 8px 1px #00000040;border-radius:12px!important}::ng-deep .mat-datepicker-popup .mat-datepicker-content button[disabled]{border:inherit;color:inherit;background-color:inherit}::ng-deep .mat-datepicker-popup .mat-datepicker-content button[disabled]:hover{border:inherit}::ng-deep .mat-datepicker-popup .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background:#F2F2FB;color:#4646ce;font-weight:600}::ng-deep .mat-datepicker-popup .mat-calendar-body-selected{background-color:#4646ce;color:#f2f2fb;font-weight:600}::ng-deep .mat-datepicker-popup .mat-calendar-body-today.mat-calendar-body-selected{box-shadow:none}::ng-deep .mat-datepicker-popup .mat-button-focus-overlay{background:#F5F5F5}::ng-deep .mat-datepicker-popup .mat-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:1!important;background:#F5F5F5;transition:opacity .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-datepicker-popup .mat-calendar-controls .mat-calendar-period-button:hover{background:#F5F5F5;transition:background .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-datepicker-popup .mat-calendar-table-header th{font-size:14px;font-weight:600;color:#333}::ng-deep .mat-datepicker-popup .mat-calendar-table-header-divider{display:none}::ng-deep .mat-datepicker-popup .mat-calendar-body-label{color:#fff;padding:0}:host{border:none;display:flex;align-items:center}:host.disabled{background:transparent;color:
|
|
167
|
+
], template: "<dr-button [disabled]=\"isPrevDateDisabled\" *ngIf=\"!disabled\" theme=\"icon\" icon=\"dr-icon-arrow-left\" (click)=\"pagingClicked(false)\"></dr-button>\n<div class=\"dr-datepicker-input-container\">\n <i *ngIf=\"isDashboardDatepicker\" class=\"dr-icon-date\"></i>\n\n <div class=\"dr-datepicker-input-container__formatted-value-display\" (click)=\"datepickerInput.click()\">\n <span *ngIf=\"presetTagSelected && datePickerService.isUsingDateTagPresets\"> {{ presetTagSelected }} </span>\n <span>{{ presetTagSelected && datePickerService.isUsingDateTagPresets ? '(' + displayedFormattedValue + ')' : displayedFormattedValue }}</span>\n </div>\n <input\n #datepickerInput\n [(ngModel)]=\"value\"\n (click)=\"datePicker.open()\"\n [matDatepicker]=\"datePicker\"\n [readonly]=\"readonly\"\n [min]=\"_min\"\n [max]=\"_max\"\n />\n</div>\n<dr-button [disabled]=\"isNextDateDisabled\" *ngIf=\"!disabled\" theme=\"icon\" icon=\"dr-icon-arrow-right\" (click)=\"pagingClicked(true)\"></dr-button>\n<mat-datepicker #datePicker\n class=\"dr-timeframe-datepicker\"\n [calendarHeaderComponent]=\"customHeader\"\n (yearSelected)=\"chosenPeriodHandler($event, timeframeOption.YEAR)\"\n (monthSelected)=\"chosenPeriodHandler($event, timeframeOption.MONTH)\"\n [panelClass]=\"datePickerService.isUsingDateTagPresets ? 'date-picker-preset-tag' : 'dr-timeframe-datepicker'\"\n >\n</mat-datepicker>\n", styles: [":host{position:relative;width:100%;display:flex;flex-direction:row;min-height:32px;height:32px;font-size:14px;font-family:Poppins,sans-serif;background-color:#fff;border:1px solid #9EA1AA;border-radius:6px;color:#333;overflow:hidden;outline:none;cursor:pointer}:host:hover{border-color:#9ea1aa}:host.active,:host:focus-within{border-color:#4646ce!important;color:#333}:host.disabled{pointer-events:none;border:1px solid #AEABAC;background:#F0F1F4;color:#aeabac}:host.disabled:after{color:#aeabac}:host.ng-valid.ng-dirty{border-color:#037c5a}:host.ng-invalid.ng-dirty:not(:focus-within){border-color:#bf1d30!important}:host.ng-untouched.ng-valid{border-color:#9ea1aa}:host:after,:host:before{position:absolute;display:flex;border-color:#6D6E6F transparent transparent;color:#6d6e6f}:host:after{font-family:DataRails!important;content:\"\\ea13\";font-size:24px;color:#6d6e6f;top:0;bottom:0;right:8px;pointer-events:none;position:absolute;display:flex;align-items:center;justify-content:center}:host i{display:flex;align-items:center;position:absolute;color:#6d6e6f;left:8px;top:0;bottom:0}:host input{display:flex;flex-grow:1;height:100%;border:none;text-align:left;padding-left:35px;padding-right:25px;cursor:pointer!important;outline:none}:host input.when-quarter{position:absolute;visibility:hidden}:host input:disabled{border:none;color:#aeabac;background:transparent}:host input::-webkit-search-decoration,:host input::-webkit-search-cancel-button,:host input::-webkit-search-results-button,:host input::-webkit-search-results-decoration{-webkit-appearance:none}:host input::placeholder{color:#6d6e6f;font-size:14px;line-height:18px}::ng-deep .mat-datepicker-popup .mat-datepicker-content{margin:7px 0;box-shadow:0 4px 8px 1px #00000040;border-radius:12px!important}::ng-deep .mat-datepicker-popup .mat-datepicker-content button[disabled]{border:inherit;color:inherit;background-color:inherit}::ng-deep .mat-datepicker-popup .mat-datepicker-content button[disabled]:hover{border:inherit}::ng-deep .mat-datepicker-popup .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background:#F2F2FB;color:#4646ce;font-weight:600}::ng-deep .mat-datepicker-popup .mat-calendar-body-selected{background-color:#4646ce;color:#f2f2fb;font-weight:600}::ng-deep .mat-datepicker-popup .mat-calendar-body-today.mat-calendar-body-selected{box-shadow:none}::ng-deep .mat-datepicker-popup .mat-button-focus-overlay{background:#F5F5F5}::ng-deep .mat-datepicker-popup .mat-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:1!important;background:#F5F5F5;transition:opacity .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-datepicker-popup .mat-calendar-controls .mat-calendar-period-button:hover{background:#F5F5F5;transition:background .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-datepicker-popup .mat-calendar-table-header th{font-size:14px;font-weight:600;color:#333}::ng-deep .mat-datepicker-popup .mat-calendar-table-header-divider{display:none}::ng-deep .mat-datepicker-popup .mat-calendar-body-label{color:#fff;padding:0}:host{border:none;display:flex;align-items:center}:host.disabled{background:transparent;color:#aeabac}:host.disabled.dr-date-picker-on-dashboard{border:none;padding:0 8px}:host.disabled.dr-date-picker-on-dashboard .dr-datepicker-input-container__formatted-value-display{text-decoration:none;color:#aeabac;font-weight:400}:host.disabled.dr-date-picker-on-dashboard .dr-datepicker-input-container i{color:#aeabac}:host.dr-date-picker-on-dashboard{width:-moz-fit-content;width:fit-content;justify-content:space-between}:host.dr-date-picker-on-dashboard mat-datepicker{position:absolute}:host.dr-date-picker-on-dashboard:after{visibility:hidden}:host.dr-date-picker-on-dashboard .dr-datepicker-input-container{display:flex;flex-direction:row;justify-content:center;align-items:center;margin-left:-10px}:host.dr-date-picker-on-dashboard .dr-datepicker-input-container__formatted-value-display{font-weight:600;width:auto;margin-left:5px}:host.dr-date-picker-on-dashboard .dr-datepicker-input-container .dr-icon-date{display:block;position:relative;top:0;margin-right:8px;color:#4e566c}:host .dr-datepicker-input-container input{visibility:hidden;position:absolute;width:100%}:host .dr-datepicker-input-container__formatted-value-display{width:90px;height:22px;padding-left:0;text-align:center;line-height:22px;color:#0c142b;text-decoration-line:underline}:host .dr-datepicker-input-container__formatted-value-display:hover{background-color:#f2f2fb;border-radius:5px;cursor:pointer;text-decoration-line:underline;color:#4646ce}::ng-deep .date-picker-preset-tag{width:386px!important}::ng-deep .date-picker-preset-tag .mat-calendar-content{padding-left:32px!important;padding-right:32px!important}\n"] }]
|
|
168
168
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.DateAdapter }, { type: i2.DrDatePickerService }]; }, propDecorators: { isDashboardClassDisplayed: [{
|
|
169
169
|
type: HostBinding,
|
|
170
170
|
args: ['class.dr-date-picker-on-dashboard']
|
|
@@ -3200,14 +3200,14 @@ class DrDatePickerWithTimeframeComponent extends DrDatePickerComponent {
|
|
|
3200
3200
|
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DrDatePickerWithTimeframeComponent, selector: "dr-date-picker-with-timeframe", inputs: { isDashboardDatepicker: "isDashboardDatepicker", dateFormatConfig: "dateFormatConfig", canSelectTimeframe: "canSelectTimeframe", availableTimeframes: "availableTimeframes", paginationDebounce: "paginationDebounce", isUsingDateTagPresets: "isUsingDateTagPresets", presetTag: "presetTag" }, outputs: { onChangeFormat: "onChangeFormat", onChangePresetTag: "onChangePresetTag" }, host: { properties: { "class.dr-date-picker-on-dashboard": "this.isDashboardClassDisplayed" } }, providers: [
|
|
3201
3201
|
{ provide: NG_VALUE_ACCESSOR, useExisting: DrDatePickerWithTimeframeComponent, multi: true },
|
|
3202
3202
|
{ provide: DrDatePickerService }
|
|
3203
|
-
], usesInheritance: true, ngImport: i0, template: "<dr-button [disabled]=\"isPrevDateDisabled\" *ngIf=\"!disabled\" theme=\"icon\" icon=\"dr-icon-arrow-left\" (click)=\"pagingClicked(false)\"></dr-button>\n<div class=\"dr-datepicker-input-container\">\n <i *ngIf=\"isDashboardDatepicker\" class=\"dr-icon-date\"></i>\n\n <div class=\"dr-datepicker-input-container__formatted-value-display\" (click)=\"datepickerInput.click()\">\n <span *ngIf=\"presetTagSelected && datePickerService.isUsingDateTagPresets\"> {{ presetTagSelected }} </span>\n <span>{{ presetTagSelected && datePickerService.isUsingDateTagPresets ? '(' + displayedFormattedValue + ')' : displayedFormattedValue }}</span>\n </div>\n <input\n #datepickerInput\n [(ngModel)]=\"value\"\n (click)=\"datePicker.open()\"\n [matDatepicker]=\"datePicker\"\n [readonly]=\"readonly\"\n [min]=\"_min\"\n [max]=\"_max\"\n />\n</div>\n<dr-button [disabled]=\"isNextDateDisabled\" *ngIf=\"!disabled\" theme=\"icon\" icon=\"dr-icon-arrow-right\" (click)=\"pagingClicked(true)\"></dr-button>\n<mat-datepicker #datePicker\n class=\"dr-timeframe-datepicker\"\n [calendarHeaderComponent]=\"customHeader\"\n (yearSelected)=\"chosenPeriodHandler($event, timeframeOption.YEAR)\"\n (monthSelected)=\"chosenPeriodHandler($event, timeframeOption.MONTH)\"\n [panelClass]=\"datePickerService.isUsingDateTagPresets ? 'date-picker-preset-tag' : 'dr-timeframe-datepicker'\"\n >\n</mat-datepicker>\n", styles: [":host{position:relative;width:100%;display:flex;flex-direction:row;min-height:32px;height:32px;font-size:14px;font-family:Poppins,sans-serif;background-color:#fff;border:1px solid #9EA1AA;border-radius:6px;color:#333;overflow:hidden;outline:none;cursor:pointer}:host:hover{border-color:#9ea1aa}:host.active,:host:focus-within{border-color:#4646ce!important;color:#333}:host.disabled{pointer-events:none;border:1px solid #AEABAC;background:#F0F1F4;color:#aeabac}:host.disabled:after{color:#aeabac}:host.ng-valid.ng-dirty{border-color:#037c5a}:host.ng-invalid.ng-dirty:not(:focus-within){border-color:#bf1d30!important}:host.ng-untouched.ng-valid{border-color:#9ea1aa}:host:after,:host:before{position:absolute;display:flex;border-color:#6D6E6F transparent transparent;color:#6d6e6f}:host:after{font-family:DataRails!important;content:\"\\ea13\";font-size:24px;color:#6d6e6f;top:0;bottom:0;right:8px;pointer-events:none;position:absolute;display:flex;align-items:center;justify-content:center}:host i{display:flex;align-items:center;position:absolute;color:#6d6e6f;left:8px;top:0;bottom:0}:host input{display:flex;flex-grow:1;height:100%;border:none;text-align:left;padding-left:35px;padding-right:25px;cursor:pointer!important;outline:none}:host input.when-quarter{position:absolute;visibility:hidden}:host input:disabled{border:none;color:#aeabac;background:transparent}:host input::-webkit-search-decoration,:host input::-webkit-search-cancel-button,:host input::-webkit-search-results-button,:host input::-webkit-search-results-decoration{-webkit-appearance:none}:host input::placeholder{color:#6d6e6f;font-size:14px;line-height:18px}::ng-deep .mat-datepicker-popup .mat-datepicker-content{margin:7px 0;box-shadow:0 4px 8px 1px #00000040;border-radius:12px!important}::ng-deep .mat-datepicker-popup .mat-datepicker-content button[disabled]{border:inherit;color:inherit;background-color:inherit}::ng-deep .mat-datepicker-popup .mat-datepicker-content button[disabled]:hover{border:inherit}::ng-deep .mat-datepicker-popup .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background:#F2F2FB;color:#4646ce;font-weight:600}::ng-deep .mat-datepicker-popup .mat-calendar-body-selected{background-color:#4646ce;color:#f2f2fb;font-weight:600}::ng-deep .mat-datepicker-popup .mat-calendar-body-today.mat-calendar-body-selected{box-shadow:none}::ng-deep .mat-datepicker-popup .mat-button-focus-overlay{background:#F5F5F5}::ng-deep .mat-datepicker-popup .mat-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:1!important;background:#F5F5F5;transition:opacity .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-datepicker-popup .mat-calendar-controls .mat-calendar-period-button:hover{background:#F5F5F5;transition:background .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-datepicker-popup .mat-calendar-table-header th{font-size:14px;font-weight:600;color:#333}::ng-deep .mat-datepicker-popup .mat-calendar-table-header-divider{display:none}::ng-deep .mat-datepicker-popup .mat-calendar-body-label{color:#fff;padding:0}:host{border:none;display:flex;align-items:center}:host.disabled{background:transparent;color:
|
|
3203
|
+
], usesInheritance: true, ngImport: i0, template: "<dr-button [disabled]=\"isPrevDateDisabled\" *ngIf=\"!disabled\" theme=\"icon\" icon=\"dr-icon-arrow-left\" (click)=\"pagingClicked(false)\"></dr-button>\n<div class=\"dr-datepicker-input-container\">\n <i *ngIf=\"isDashboardDatepicker\" class=\"dr-icon-date\"></i>\n\n <div class=\"dr-datepicker-input-container__formatted-value-display\" (click)=\"datepickerInput.click()\">\n <span *ngIf=\"presetTagSelected && datePickerService.isUsingDateTagPresets\"> {{ presetTagSelected }} </span>\n <span>{{ presetTagSelected && datePickerService.isUsingDateTagPresets ? '(' + displayedFormattedValue + ')' : displayedFormattedValue }}</span>\n </div>\n <input\n #datepickerInput\n [(ngModel)]=\"value\"\n (click)=\"datePicker.open()\"\n [matDatepicker]=\"datePicker\"\n [readonly]=\"readonly\"\n [min]=\"_min\"\n [max]=\"_max\"\n />\n</div>\n<dr-button [disabled]=\"isNextDateDisabled\" *ngIf=\"!disabled\" theme=\"icon\" icon=\"dr-icon-arrow-right\" (click)=\"pagingClicked(true)\"></dr-button>\n<mat-datepicker #datePicker\n class=\"dr-timeframe-datepicker\"\n [calendarHeaderComponent]=\"customHeader\"\n (yearSelected)=\"chosenPeriodHandler($event, timeframeOption.YEAR)\"\n (monthSelected)=\"chosenPeriodHandler($event, timeframeOption.MONTH)\"\n [panelClass]=\"datePickerService.isUsingDateTagPresets ? 'date-picker-preset-tag' : 'dr-timeframe-datepicker'\"\n >\n</mat-datepicker>\n", styles: [":host{position:relative;width:100%;display:flex;flex-direction:row;min-height:32px;height:32px;font-size:14px;font-family:Poppins,sans-serif;background-color:#fff;border:1px solid #9EA1AA;border-radius:6px;color:#333;overflow:hidden;outline:none;cursor:pointer}:host:hover{border-color:#9ea1aa}:host.active,:host:focus-within{border-color:#4646ce!important;color:#333}:host.disabled{pointer-events:none;border:1px solid #AEABAC;background:#F0F1F4;color:#aeabac}:host.disabled:after{color:#aeabac}:host.ng-valid.ng-dirty{border-color:#037c5a}:host.ng-invalid.ng-dirty:not(:focus-within){border-color:#bf1d30!important}:host.ng-untouched.ng-valid{border-color:#9ea1aa}:host:after,:host:before{position:absolute;display:flex;border-color:#6D6E6F transparent transparent;color:#6d6e6f}:host:after{font-family:DataRails!important;content:\"\\ea13\";font-size:24px;color:#6d6e6f;top:0;bottom:0;right:8px;pointer-events:none;position:absolute;display:flex;align-items:center;justify-content:center}:host i{display:flex;align-items:center;position:absolute;color:#6d6e6f;left:8px;top:0;bottom:0}:host input{display:flex;flex-grow:1;height:100%;border:none;text-align:left;padding-left:35px;padding-right:25px;cursor:pointer!important;outline:none}:host input.when-quarter{position:absolute;visibility:hidden}:host input:disabled{border:none;color:#aeabac;background:transparent}:host input::-webkit-search-decoration,:host input::-webkit-search-cancel-button,:host input::-webkit-search-results-button,:host input::-webkit-search-results-decoration{-webkit-appearance:none}:host input::placeholder{color:#6d6e6f;font-size:14px;line-height:18px}::ng-deep .mat-datepicker-popup .mat-datepicker-content{margin:7px 0;box-shadow:0 4px 8px 1px #00000040;border-radius:12px!important}::ng-deep .mat-datepicker-popup .mat-datepicker-content button[disabled]{border:inherit;color:inherit;background-color:inherit}::ng-deep .mat-datepicker-popup .mat-datepicker-content button[disabled]:hover{border:inherit}::ng-deep .mat-datepicker-popup .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background:#F2F2FB;color:#4646ce;font-weight:600}::ng-deep .mat-datepicker-popup .mat-calendar-body-selected{background-color:#4646ce;color:#f2f2fb;font-weight:600}::ng-deep .mat-datepicker-popup .mat-calendar-body-today.mat-calendar-body-selected{box-shadow:none}::ng-deep .mat-datepicker-popup .mat-button-focus-overlay{background:#F5F5F5}::ng-deep .mat-datepicker-popup .mat-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:1!important;background:#F5F5F5;transition:opacity .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-datepicker-popup .mat-calendar-controls .mat-calendar-period-button:hover{background:#F5F5F5;transition:background .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-datepicker-popup .mat-calendar-table-header th{font-size:14px;font-weight:600;color:#333}::ng-deep .mat-datepicker-popup .mat-calendar-table-header-divider{display:none}::ng-deep .mat-datepicker-popup .mat-calendar-body-label{color:#fff;padding:0}:host{border:none;display:flex;align-items:center}:host.disabled{background:transparent;color:#aeabac}:host.disabled.dr-date-picker-on-dashboard{border:none;padding:0 8px}:host.disabled.dr-date-picker-on-dashboard .dr-datepicker-input-container__formatted-value-display{text-decoration:none;color:#aeabac;font-weight:400}:host.disabled.dr-date-picker-on-dashboard .dr-datepicker-input-container i{color:#aeabac}:host.dr-date-picker-on-dashboard{width:-moz-fit-content;width:fit-content;justify-content:space-between}:host.dr-date-picker-on-dashboard mat-datepicker{position:absolute}:host.dr-date-picker-on-dashboard:after{visibility:hidden}:host.dr-date-picker-on-dashboard .dr-datepicker-input-container{display:flex;flex-direction:row;justify-content:center;align-items:center;margin-left:-10px}:host.dr-date-picker-on-dashboard .dr-datepicker-input-container__formatted-value-display{font-weight:600;width:auto;margin-left:5px}:host.dr-date-picker-on-dashboard .dr-datepicker-input-container .dr-icon-date{display:block;position:relative;top:0;margin-right:8px;color:#4e566c}:host .dr-datepicker-input-container input{visibility:hidden;position:absolute;width:100%}:host .dr-datepicker-input-container__formatted-value-display{width:90px;height:22px;padding-left:0;text-align:center;line-height:22px;color:#0c142b;text-decoration-line:underline}:host .dr-datepicker-input-container__formatted-value-display:hover{background-color:#f2f2fb;border-radius:5px;cursor:pointer;text-decoration-line:underline;color:#4646ce}::ng-deep .date-picker-preset-tag{width:386px!important}::ng-deep .date-picker-preset-tag .mat-calendar-content{padding-left:32px!important;padding-right:32px!important}\n"], dependencies: [{ kind: "directive", type: i1$2.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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i1$3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: DrButtonComponent, selector: "dr-button", inputs: ["theme", "icon", "iconColor", "iconSize", "iconAfter", "iconAfterColor", "iconAfterSize", "disabled", "isLoading", "isActive"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3204
3204
|
}
|
|
3205
3205
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DrDatePickerWithTimeframeComponent, decorators: [{
|
|
3206
3206
|
type: Component,
|
|
3207
3207
|
args: [{ selector: 'dr-date-picker-with-timeframe', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
3208
3208
|
{ provide: NG_VALUE_ACCESSOR, useExisting: DrDatePickerWithTimeframeComponent, multi: true },
|
|
3209
3209
|
{ provide: DrDatePickerService }
|
|
3210
|
-
], template: "<dr-button [disabled]=\"isPrevDateDisabled\" *ngIf=\"!disabled\" theme=\"icon\" icon=\"dr-icon-arrow-left\" (click)=\"pagingClicked(false)\"></dr-button>\n<div class=\"dr-datepicker-input-container\">\n <i *ngIf=\"isDashboardDatepicker\" class=\"dr-icon-date\"></i>\n\n <div class=\"dr-datepicker-input-container__formatted-value-display\" (click)=\"datepickerInput.click()\">\n <span *ngIf=\"presetTagSelected && datePickerService.isUsingDateTagPresets\"> {{ presetTagSelected }} </span>\n <span>{{ presetTagSelected && datePickerService.isUsingDateTagPresets ? '(' + displayedFormattedValue + ')' : displayedFormattedValue }}</span>\n </div>\n <input\n #datepickerInput\n [(ngModel)]=\"value\"\n (click)=\"datePicker.open()\"\n [matDatepicker]=\"datePicker\"\n [readonly]=\"readonly\"\n [min]=\"_min\"\n [max]=\"_max\"\n />\n</div>\n<dr-button [disabled]=\"isNextDateDisabled\" *ngIf=\"!disabled\" theme=\"icon\" icon=\"dr-icon-arrow-right\" (click)=\"pagingClicked(true)\"></dr-button>\n<mat-datepicker #datePicker\n class=\"dr-timeframe-datepicker\"\n [calendarHeaderComponent]=\"customHeader\"\n (yearSelected)=\"chosenPeriodHandler($event, timeframeOption.YEAR)\"\n (monthSelected)=\"chosenPeriodHandler($event, timeframeOption.MONTH)\"\n [panelClass]=\"datePickerService.isUsingDateTagPresets ? 'date-picker-preset-tag' : 'dr-timeframe-datepicker'\"\n >\n</mat-datepicker>\n", styles: [":host{position:relative;width:100%;display:flex;flex-direction:row;min-height:32px;height:32px;font-size:14px;font-family:Poppins,sans-serif;background-color:#fff;border:1px solid #9EA1AA;border-radius:6px;color:#333;overflow:hidden;outline:none;cursor:pointer}:host:hover{border-color:#9ea1aa}:host.active,:host:focus-within{border-color:#4646ce!important;color:#333}:host.disabled{pointer-events:none;border:1px solid #AEABAC;background:#F0F1F4;color:#aeabac}:host.disabled:after{color:#aeabac}:host.ng-valid.ng-dirty{border-color:#037c5a}:host.ng-invalid.ng-dirty:not(:focus-within){border-color:#bf1d30!important}:host.ng-untouched.ng-valid{border-color:#9ea1aa}:host:after,:host:before{position:absolute;display:flex;border-color:#6D6E6F transparent transparent;color:#6d6e6f}:host:after{font-family:DataRails!important;content:\"\\ea13\";font-size:24px;color:#6d6e6f;top:0;bottom:0;right:8px;pointer-events:none;position:absolute;display:flex;align-items:center;justify-content:center}:host i{display:flex;align-items:center;position:absolute;color:#6d6e6f;left:8px;top:0;bottom:0}:host input{display:flex;flex-grow:1;height:100%;border:none;text-align:left;padding-left:35px;padding-right:25px;cursor:pointer!important;outline:none}:host input.when-quarter{position:absolute;visibility:hidden}:host input:disabled{border:none;color:#aeabac;background:transparent}:host input::-webkit-search-decoration,:host input::-webkit-search-cancel-button,:host input::-webkit-search-results-button,:host input::-webkit-search-results-decoration{-webkit-appearance:none}:host input::placeholder{color:#6d6e6f;font-size:14px;line-height:18px}::ng-deep .mat-datepicker-popup .mat-datepicker-content{margin:7px 0;box-shadow:0 4px 8px 1px #00000040;border-radius:12px!important}::ng-deep .mat-datepicker-popup .mat-datepicker-content button[disabled]{border:inherit;color:inherit;background-color:inherit}::ng-deep .mat-datepicker-popup .mat-datepicker-content button[disabled]:hover{border:inherit}::ng-deep .mat-datepicker-popup .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background:#F2F2FB;color:#4646ce;font-weight:600}::ng-deep .mat-datepicker-popup .mat-calendar-body-selected{background-color:#4646ce;color:#f2f2fb;font-weight:600}::ng-deep .mat-datepicker-popup .mat-calendar-body-today.mat-calendar-body-selected{box-shadow:none}::ng-deep .mat-datepicker-popup .mat-button-focus-overlay{background:#F5F5F5}::ng-deep .mat-datepicker-popup .mat-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:1!important;background:#F5F5F5;transition:opacity .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-datepicker-popup .mat-calendar-controls .mat-calendar-period-button:hover{background:#F5F5F5;transition:background .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-datepicker-popup .mat-calendar-table-header th{font-size:14px;font-weight:600;color:#333}::ng-deep .mat-datepicker-popup .mat-calendar-table-header-divider{display:none}::ng-deep .mat-datepicker-popup .mat-calendar-body-label{color:#fff;padding:0}:host{border:none;display:flex;align-items:center}:host.disabled{background:transparent;color:
|
|
3210
|
+
], template: "<dr-button [disabled]=\"isPrevDateDisabled\" *ngIf=\"!disabled\" theme=\"icon\" icon=\"dr-icon-arrow-left\" (click)=\"pagingClicked(false)\"></dr-button>\n<div class=\"dr-datepicker-input-container\">\n <i *ngIf=\"isDashboardDatepicker\" class=\"dr-icon-date\"></i>\n\n <div class=\"dr-datepicker-input-container__formatted-value-display\" (click)=\"datepickerInput.click()\">\n <span *ngIf=\"presetTagSelected && datePickerService.isUsingDateTagPresets\"> {{ presetTagSelected }} </span>\n <span>{{ presetTagSelected && datePickerService.isUsingDateTagPresets ? '(' + displayedFormattedValue + ')' : displayedFormattedValue }}</span>\n </div>\n <input\n #datepickerInput\n [(ngModel)]=\"value\"\n (click)=\"datePicker.open()\"\n [matDatepicker]=\"datePicker\"\n [readonly]=\"readonly\"\n [min]=\"_min\"\n [max]=\"_max\"\n />\n</div>\n<dr-button [disabled]=\"isNextDateDisabled\" *ngIf=\"!disabled\" theme=\"icon\" icon=\"dr-icon-arrow-right\" (click)=\"pagingClicked(true)\"></dr-button>\n<mat-datepicker #datePicker\n class=\"dr-timeframe-datepicker\"\n [calendarHeaderComponent]=\"customHeader\"\n (yearSelected)=\"chosenPeriodHandler($event, timeframeOption.YEAR)\"\n (monthSelected)=\"chosenPeriodHandler($event, timeframeOption.MONTH)\"\n [panelClass]=\"datePickerService.isUsingDateTagPresets ? 'date-picker-preset-tag' : 'dr-timeframe-datepicker'\"\n >\n</mat-datepicker>\n", styles: [":host{position:relative;width:100%;display:flex;flex-direction:row;min-height:32px;height:32px;font-size:14px;font-family:Poppins,sans-serif;background-color:#fff;border:1px solid #9EA1AA;border-radius:6px;color:#333;overflow:hidden;outline:none;cursor:pointer}:host:hover{border-color:#9ea1aa}:host.active,:host:focus-within{border-color:#4646ce!important;color:#333}:host.disabled{pointer-events:none;border:1px solid #AEABAC;background:#F0F1F4;color:#aeabac}:host.disabled:after{color:#aeabac}:host.ng-valid.ng-dirty{border-color:#037c5a}:host.ng-invalid.ng-dirty:not(:focus-within){border-color:#bf1d30!important}:host.ng-untouched.ng-valid{border-color:#9ea1aa}:host:after,:host:before{position:absolute;display:flex;border-color:#6D6E6F transparent transparent;color:#6d6e6f}:host:after{font-family:DataRails!important;content:\"\\ea13\";font-size:24px;color:#6d6e6f;top:0;bottom:0;right:8px;pointer-events:none;position:absolute;display:flex;align-items:center;justify-content:center}:host i{display:flex;align-items:center;position:absolute;color:#6d6e6f;left:8px;top:0;bottom:0}:host input{display:flex;flex-grow:1;height:100%;border:none;text-align:left;padding-left:35px;padding-right:25px;cursor:pointer!important;outline:none}:host input.when-quarter{position:absolute;visibility:hidden}:host input:disabled{border:none;color:#aeabac;background:transparent}:host input::-webkit-search-decoration,:host input::-webkit-search-cancel-button,:host input::-webkit-search-results-button,:host input::-webkit-search-results-decoration{-webkit-appearance:none}:host input::placeholder{color:#6d6e6f;font-size:14px;line-height:18px}::ng-deep .mat-datepicker-popup .mat-datepicker-content{margin:7px 0;box-shadow:0 4px 8px 1px #00000040;border-radius:12px!important}::ng-deep .mat-datepicker-popup .mat-datepicker-content button[disabled]{border:inherit;color:inherit;background-color:inherit}::ng-deep .mat-datepicker-popup .mat-datepicker-content button[disabled]:hover{border:inherit}::ng-deep .mat-datepicker-popup .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background:#F2F2FB;color:#4646ce;font-weight:600}::ng-deep .mat-datepicker-popup .mat-calendar-body-selected{background-color:#4646ce;color:#f2f2fb;font-weight:600}::ng-deep .mat-datepicker-popup .mat-calendar-body-today.mat-calendar-body-selected{box-shadow:none}::ng-deep .mat-datepicker-popup .mat-button-focus-overlay{background:#F5F5F5}::ng-deep .mat-datepicker-popup .mat-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:1!important;background:#F5F5F5;transition:opacity .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-datepicker-popup .mat-calendar-controls .mat-calendar-period-button:hover{background:#F5F5F5;transition:background .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-datepicker-popup .mat-calendar-table-header th{font-size:14px;font-weight:600;color:#333}::ng-deep .mat-datepicker-popup .mat-calendar-table-header-divider{display:none}::ng-deep .mat-datepicker-popup .mat-calendar-body-label{color:#fff;padding:0}:host{border:none;display:flex;align-items:center}:host.disabled{background:transparent;color:#aeabac}:host.disabled.dr-date-picker-on-dashboard{border:none;padding:0 8px}:host.disabled.dr-date-picker-on-dashboard .dr-datepicker-input-container__formatted-value-display{text-decoration:none;color:#aeabac;font-weight:400}:host.disabled.dr-date-picker-on-dashboard .dr-datepicker-input-container i{color:#aeabac}:host.dr-date-picker-on-dashboard{width:-moz-fit-content;width:fit-content;justify-content:space-between}:host.dr-date-picker-on-dashboard mat-datepicker{position:absolute}:host.dr-date-picker-on-dashboard:after{visibility:hidden}:host.dr-date-picker-on-dashboard .dr-datepicker-input-container{display:flex;flex-direction:row;justify-content:center;align-items:center;margin-left:-10px}:host.dr-date-picker-on-dashboard .dr-datepicker-input-container__formatted-value-display{font-weight:600;width:auto;margin-left:5px}:host.dr-date-picker-on-dashboard .dr-datepicker-input-container .dr-icon-date{display:block;position:relative;top:0;margin-right:8px;color:#4e566c}:host .dr-datepicker-input-container input{visibility:hidden;position:absolute;width:100%}:host .dr-datepicker-input-container__formatted-value-display{width:90px;height:22px;padding-left:0;text-align:center;line-height:22px;color:#0c142b;text-decoration-line:underline}:host .dr-datepicker-input-container__formatted-value-display:hover{background-color:#f2f2fb;border-radius:5px;cursor:pointer;text-decoration-line:underline;color:#4646ce}::ng-deep .date-picker-preset-tag{width:386px!important}::ng-deep .date-picker-preset-tag .mat-calendar-content{padding-left:32px!important;padding-right:32px!important}\n"] }]
|
|
3211
3211
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$4.DateAdapter }, { type: DrDatePickerService }]; }, propDecorators: { isDashboardClassDisplayed: [{
|
|
3212
3212
|
type: HostBinding,
|
|
3213
3213
|
args: ['class.dr-date-picker-on-dashboard']
|
|
@@ -4146,11 +4146,11 @@ class DrBadgeStatusComponent {
|
|
|
4146
4146
|
ngOnInit() {
|
|
4147
4147
|
}
|
|
4148
4148
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DrBadgeStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4149
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DrBadgeStatusComponent, selector: "dr-badge-status", inputs: { theme: "theme", icon: "icon", label: "label", tooltip: "tooltip" }, ngImport: i0, template: "<div class=\"badge-status\" [drTooltip]=\"tooltip\"\n [ngClass]=\"'badge-status--' + theme\">\n <i *ngIf=\"icon\" class=\"{{ icon }}\"></i>\n <span *ngIf=\"label\">{{ label }}</span>\n</div>\n", styles: [".badge-status{display:flex;align-items:center;font-family:Poppins,sans-serif;font-style:normal;font-size
|
|
4149
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DrBadgeStatusComponent, selector: "dr-badge-status", inputs: { theme: "theme", icon: "icon", label: "label", tooltip: "tooltip" }, ngImport: i0, template: "<div class=\"badge-status\" [drTooltip]=\"tooltip\"\n [ngClass]=\"'badge-status--' + theme\">\n <i *ngIf=\"icon\" class=\"{{ icon }}\"></i>\n <span *ngIf=\"label\">{{ label }}</span>\n</div>\n", styles: [".badge-status{display:flex;align-items:center;font-family:Poppins,sans-serif;font-style:normal;font-size:12px;font-weight:600;line-height:20px;height:24px;padding:2px 8px 2px 4px;border-radius:4px;cursor:pointer}.badge-status i{font-size:20px;margin-right:4px}.badge-status--info{color:#0b5af9;background:#E6EFFF}.badge-status--error{color:#bf1d30;background:#F7D9DC}.badge-status--warning{color:#ffb800;background:#FFEFC7}.badge-status--success{color:#037c5a;background:#DBF5E6}.badge-status--regular{color:#7e828e;background:#F0F1F4}.badge-status--progress{color:#4646ce;background:#F2F2FB}.badge-status--dotted{color:#7e828e;background:transparent}.badge-status--dotted i{display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: DrTooltipDirective, selector: "[drTooltip]", inputs: ["drTooltip", "drTooltipContext", "drTooltipPosition", "drTooltipClass", "drTooltipTheme", "drTooltipMousleaveTimeout", "drTooltipOptions", "drTooltipShow"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
4150
4150
|
}
|
|
4151
4151
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DrBadgeStatusComponent, decorators: [{
|
|
4152
4152
|
type: Component,
|
|
4153
|
-
args: [{ selector: 'dr-badge-status', encapsulation: ViewEncapsulation.None, template: "<div class=\"badge-status\" [drTooltip]=\"tooltip\"\n [ngClass]=\"'badge-status--' + theme\">\n <i *ngIf=\"icon\" class=\"{{ icon }}\"></i>\n <span *ngIf=\"label\">{{ label }}</span>\n</div>\n", styles: [".badge-status{display:flex;align-items:center;font-family:Poppins,sans-serif;font-style:normal;font-size
|
|
4153
|
+
args: [{ selector: 'dr-badge-status', encapsulation: ViewEncapsulation.None, template: "<div class=\"badge-status\" [drTooltip]=\"tooltip\"\n [ngClass]=\"'badge-status--' + theme\">\n <i *ngIf=\"icon\" class=\"{{ icon }}\"></i>\n <span *ngIf=\"label\">{{ label }}</span>\n</div>\n", styles: [".badge-status{display:flex;align-items:center;font-family:Poppins,sans-serif;font-style:normal;font-size:12px;font-weight:600;line-height:20px;height:24px;padding:2px 8px 2px 4px;border-radius:4px;cursor:pointer}.badge-status i{font-size:20px;margin-right:4px}.badge-status--info{color:#0b5af9;background:#E6EFFF}.badge-status--error{color:#bf1d30;background:#F7D9DC}.badge-status--warning{color:#ffb800;background:#FFEFC7}.badge-status--success{color:#037c5a;background:#DBF5E6}.badge-status--regular{color:#7e828e;background:#F0F1F4}.badge-status--progress{color:#4646ce;background:#F2F2FB}.badge-status--dotted{color:#7e828e;background:transparent}.badge-status--dotted i{display:none}\n"] }]
|
|
4154
4154
|
}], ctorParameters: function () { return []; }, propDecorators: { theme: [{
|
|
4155
4155
|
type: Input
|
|
4156
4156
|
}], icon: [{
|