@datarailsshared/datarailsshared 1.5.480 → 1.5.486
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/datarailsshared-datarailsshared-1.5.486.tgz +0 -0
- package/esm2022/lib/dr-dropdown/dr-dropdown.component.mjs +11 -11
- package/esm2022/lib/dr-inputs/date-pickers/dr-date-picker-with-timeframe/dr-date-picker-with-timeframe.component.mjs +13 -4
- package/fesm2022/datarailsshared-datarailsshared.mjs +22 -13
- package/fesm2022/datarailsshared-datarailsshared.mjs.map +1 -1
- package/lib/dr-inputs/date-pickers/dr-date-picker-with-timeframe/dr-date-picker-with-timeframe.component.d.ts +3 -1
- package/package.json +1 -1
- package/datarailsshared-datarailsshared-1.5.480.tgz +0 -0
|
@@ -4426,6 +4426,7 @@ class DrDatePickerWithTimeframeComponent extends DrDatePickerComponent {
|
|
|
4426
4426
|
this.canSelectTimeframe = true;
|
|
4427
4427
|
this.datepickerTooltipPosition = TooltipPosition.TOP;
|
|
4428
4428
|
this.datepickerTooltipTimeout = 0;
|
|
4429
|
+
this.isOpen = false;
|
|
4429
4430
|
// eslint-disable-next-line
|
|
4430
4431
|
this.onChangeFormat = new EventEmitter();
|
|
4431
4432
|
this.onChangePresetTag = new EventEmitter();
|
|
@@ -4481,6 +4482,12 @@ class DrDatePickerWithTimeframeComponent extends DrDatePickerComponent {
|
|
|
4481
4482
|
this.datePickerService.updateTimeframeAndFormat(changes.format.currentValue);
|
|
4482
4483
|
}
|
|
4483
4484
|
}
|
|
4485
|
+
ngAfterViewInit() {
|
|
4486
|
+
super.ngAfterViewInit();
|
|
4487
|
+
if (this.isOpen) {
|
|
4488
|
+
this.datePicker.open();
|
|
4489
|
+
}
|
|
4490
|
+
}
|
|
4484
4491
|
pagingClicked(forward) {
|
|
4485
4492
|
if (this.pagingSetup[this.datePickerService.timeframe]) {
|
|
4486
4493
|
const nextValue = this.pagingSetup[this.datePickerService.timeframe](forward);
|
|
@@ -4530,7 +4537,7 @@ class DrDatePickerWithTimeframeComponent extends DrDatePickerComponent {
|
|
|
4530
4537
|
/** @nocollapse */ static { this.ɵfac = function DrDatePickerWithTimeframeComponent_Factory(t) { return new (t || DrDatePickerWithTimeframeComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i1$4.DateAdapter), i0.ɵɵdirectiveInject(DrDatePickerService)); }; }
|
|
4531
4538
|
/** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrDatePickerWithTimeframeComponent, selectors: [["dr-date-picker-with-timeframe"]], hostVars: 2, hostBindings: function DrDatePickerWithTimeframeComponent_HostBindings(rf, ctx) { if (rf & 2) {
|
|
4532
4539
|
i0.ɵɵclassProp("dr-date-picker-on-dashboard", ctx.isDashboardClassDisplayed);
|
|
4533
|
-
} }, inputs: { isDashboardDatepicker: "isDashboardDatepicker", dateFormatConfig: "dateFormatConfig", canSelectTimeframe: "canSelectTimeframe", availableTimeframes: "availableTimeframes", paginationDebounce: "paginationDebounce", isUsingDateTagPresets: "isUsingDateTagPresets", presetTag: "presetTag", datepickerTooltip: "datepickerTooltip", datepickerTooltipPosition: "datepickerTooltipPosition", datepickerTooltipTimeout: "datepickerTooltipTimeout" }, outputs: { onChangeFormat: "onChangeFormat", onChangePresetTag: "onChangePresetTag" }, features: [i0.ɵɵProvidersFeature([
|
|
4540
|
+
} }, inputs: { isDashboardDatepicker: "isDashboardDatepicker", dateFormatConfig: "dateFormatConfig", canSelectTimeframe: "canSelectTimeframe", availableTimeframes: "availableTimeframes", paginationDebounce: "paginationDebounce", isUsingDateTagPresets: "isUsingDateTagPresets", presetTag: "presetTag", datepickerTooltip: "datepickerTooltip", datepickerTooltipPosition: "datepickerTooltipPosition", datepickerTooltipTimeout: "datepickerTooltipTimeout", isOpen: "isOpen" }, outputs: { onChangeFormat: "onChangeFormat", onChangePresetTag: "onChangePresetTag" }, features: [i0.ɵɵProvidersFeature([
|
|
4534
4541
|
{ provide: NG_VALUE_ACCESSOR, useExisting: DrDatePickerWithTimeframeComponent, multi: true },
|
|
4535
4542
|
{ provide: DateAdapter, useClass: CustomDateAdapter },
|
|
4536
4543
|
{ provide: DrDatePickerService },
|
|
@@ -4569,7 +4576,7 @@ class DrDatePickerWithTimeframeComponent extends DrDatePickerComponent {
|
|
|
4569
4576
|
i0.ɵɵproperty("ngIf", !ctx.disabled);
|
|
4570
4577
|
i0.ɵɵadvance(1);
|
|
4571
4578
|
i0.ɵɵproperty("calendarHeaderComponent", ctx.customHeader)("panelClass", ctx.datePickerService.isUsingDateTagPresets ? "date-picker-preset-tag" : "dr-timeframe-datepicker");
|
|
4572
|
-
} }, dependencies: [i1$2.DefaultValueAccessor, i1$2.NgControlStatus, i1$2.NgModel, i1.NgIf, i1.NgTemplateOutlet, i1$3.MatDatepicker, i1$3.MatDatepickerInput, DrTooltipDirective, DrButtonComponent, i1.AsyncPipe], styles: ["[_nghost-%COMP%]{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}[_nghost-%COMP%]:hover{border-color:#9ea1aa}.active[_nghost-%COMP%], [_nghost-%COMP%]:focus-within{border-color:#4646ce!important;color:#333}.disabled[_nghost-%COMP%]{pointer-events:none;border:1px solid #aeabac;background:#f0f1f4;color:#aeabac}.disabled[_nghost-%COMP%]:after{color:#aeabac}.ng-valid.ng-dirty[_nghost-%COMP%]{border-color:#037c5a}.ng-invalid.ng-dirty[_nghost-%COMP%]:not(:focus-within){border-color:#bf1d30!important}.ng-untouched.ng-valid[_nghost-%COMP%]{border-color:#9ea1aa}[_nghost-%COMP%]:after, [_nghost-%COMP%]:before{position:absolute;display:flex;border-color:#6d6e6f transparent transparent;color:#6d6e6f}[_nghost-%COMP%]:after{font-family:DataRails!important;content:\"\\ea15\";font-size:24px;color:#6d6e6f;top:0;bottom:0;right:8px;pointer-events:none;position:absolute;display:flex;align-items:center;justify-content:center}[_nghost-%COMP%] i[_ngcontent-%COMP%]{display:flex;align-items:center;position:absolute;color:#6d6e6f;left:8px;top:0;bottom:0}[_nghost-%COMP%] input[_ngcontent-%COMP%]{display:flex;flex-grow:1;height:100%;border:none;text-align:left;padding-left:35px;padding-right:25px;cursor:pointer!important;outline:none}[_nghost-%COMP%] input.when-quarter[_ngcontent-%COMP%]{position:absolute;visibility:hidden}[_nghost-%COMP%] input[_ngcontent-%COMP%]:disabled{border:none;color:#aeabac;background:transparent}[_nghost-%COMP%] input[_ngcontent-%COMP%]::-webkit-search-decoration, [_nghost-%COMP%] input[_ngcontent-%COMP%]::-webkit-search-cancel-button, [_nghost-%COMP%] input[_ngcontent-%COMP%]::-webkit-search-results-button, [_nghost-%COMP%] input[_ngcontent-%COMP%]::-webkit-search-results-decoration{-webkit-appearance:none}[_nghost-%COMP%] input[_ngcontent-%COMP%]::placeholder{color:#6d6e6f;font-size:14px;line-height:18px} .mat-datepicker-popup .mat-datepicker-content{margin:7px 0;box-shadow:0 4px 8px 1px #00000040;border-radius:12px!important} .mat-datepicker-popup .mat-datepicker-content button[disabled]{border:inherit;color:inherit;background-color:inherit} .mat-datepicker-popup .mat-datepicker-content button[disabled]:hover{border:inherit} .mat-datepicker-popup .cdk-keyboard-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical), .mat-datepicker-popup .cdk-program-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:#fff} .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} .mat-datepicker-popup .mat-calendar-body-selected{background-color:#4646ce;color:#f2f2fb;font-weight:600} .mat-datepicker-popup .mat-calendar-body-today.mat-calendar-body-selected{box-shadow:none} .mat-datepicker-popup .mat-button-focus-overlay{background:#f5f5f5} .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)} .mat-datepicker-popup .mat-calendar-controls .mat-calendar-period-button:hover{background:#f5f5f5;transition:background .2s cubic-bezier(.35,0,.25,1)} .mat-datepicker-popup .mat-calendar-table-header th{font-size:14px;font-weight:600;color:#333} .mat-datepicker-popup .mat-calendar-table-header-divider{display:none} .mat-datepicker-popup .mat-calendar-body-label{color:#fff;padding:0} .mat-datepicker-popup .mat-calendar-body>tr[aria-hidden=true]>.mat-calendar-body-label{display:none}[_nghost-%COMP%]{border:none;display:flex;align-items:center}.disabled[_nghost-%COMP%]{background:transparent;color:#aeabac}.disabled.dr-date-picker-on-dashboard[_nghost-%COMP%]{border:none;padding:0 8px}.disabled.dr-date-picker-on-dashboard[_nghost-%COMP%] .dr-datepicker-input-container__formatted-value-display[_ngcontent-%COMP%]{text-decoration:none;color:#aeabac;font-weight:400}.disabled.dr-date-picker-on-dashboard[_nghost-%COMP%] .dr-datepicker-input-container[_ngcontent-%COMP%] i[_ngcontent-%COMP%]{color:#aeabac}.dr-date-picker-on-dashboard[_nghost-%COMP%]{width:-moz-fit-content;width:fit-content;justify-content:space-between}.dr-date-picker-on-dashboard[_nghost-%COMP%] mat-datepicker[_ngcontent-%COMP%]{position:absolute}.dr-date-picker-on-dashboard[_nghost-%COMP%]:after{visibility:hidden}.dr-date-picker-on-dashboard[_nghost-%COMP%] .dr-datepicker-input-container[_ngcontent-%COMP%]{display:flex;flex-direction:row;justify-content:center;align-items:center;margin-left:-10px}.dr-date-picker-on-dashboard[_nghost-%COMP%] .dr-datepicker-input-container__formatted-value-display[_ngcontent-%COMP%]{font-weight:600;width:auto;margin-left:5px}.dr-date-picker-on-dashboard[_nghost-%COMP%] .dr-datepicker-input-container[_ngcontent-%COMP%] .dr-icon-date[_ngcontent-%COMP%]{display:block;position:relative;top:0;margin-right:8px;color:#4e566c}[_nghost-%COMP%] .dr-datepicker-input-container[_ngcontent-%COMP%] input[_ngcontent-%COMP%]{visibility:hidden;position:absolute;width:100%}[_nghost-%COMP%] .dr-datepicker-input-container__formatted-value-display[_ngcontent-%COMP%]{width:
|
|
4579
|
+
} }, dependencies: [i1$2.DefaultValueAccessor, i1$2.NgControlStatus, i1$2.NgModel, i1.NgIf, i1.NgTemplateOutlet, i1$3.MatDatepicker, i1$3.MatDatepickerInput, DrTooltipDirective, DrButtonComponent, i1.AsyncPipe], styles: ["[_nghost-%COMP%]{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}[_nghost-%COMP%]:hover{border-color:#9ea1aa}.active[_nghost-%COMP%], [_nghost-%COMP%]:focus-within{border-color:#4646ce!important;color:#333}.disabled[_nghost-%COMP%]{pointer-events:none;border:1px solid #aeabac;background:#f0f1f4;color:#aeabac}.disabled[_nghost-%COMP%]:after{color:#aeabac}.ng-valid.ng-dirty[_nghost-%COMP%]{border-color:#037c5a}.ng-invalid.ng-dirty[_nghost-%COMP%]:not(:focus-within){border-color:#bf1d30!important}.ng-untouched.ng-valid[_nghost-%COMP%]{border-color:#9ea1aa}[_nghost-%COMP%]:after, [_nghost-%COMP%]:before{position:absolute;display:flex;border-color:#6d6e6f transparent transparent;color:#6d6e6f}[_nghost-%COMP%]:after{font-family:DataRails!important;content:\"\\ea15\";font-size:24px;color:#6d6e6f;top:0;bottom:0;right:8px;pointer-events:none;position:absolute;display:flex;align-items:center;justify-content:center}[_nghost-%COMP%] i[_ngcontent-%COMP%]{display:flex;align-items:center;position:absolute;color:#6d6e6f;left:8px;top:0;bottom:0}[_nghost-%COMP%] input[_ngcontent-%COMP%]{display:flex;flex-grow:1;height:100%;border:none;text-align:left;padding-left:35px;padding-right:25px;cursor:pointer!important;outline:none}[_nghost-%COMP%] input.when-quarter[_ngcontent-%COMP%]{position:absolute;visibility:hidden}[_nghost-%COMP%] input[_ngcontent-%COMP%]:disabled{border:none;color:#aeabac;background:transparent}[_nghost-%COMP%] input[_ngcontent-%COMP%]::-webkit-search-decoration, [_nghost-%COMP%] input[_ngcontent-%COMP%]::-webkit-search-cancel-button, [_nghost-%COMP%] input[_ngcontent-%COMP%]::-webkit-search-results-button, [_nghost-%COMP%] input[_ngcontent-%COMP%]::-webkit-search-results-decoration{-webkit-appearance:none}[_nghost-%COMP%] input[_ngcontent-%COMP%]::placeholder{color:#6d6e6f;font-size:14px;line-height:18px} .mat-datepicker-popup .mat-datepicker-content{margin:7px 0;box-shadow:0 4px 8px 1px #00000040;border-radius:12px!important} .mat-datepicker-popup .mat-datepicker-content button[disabled]{border:inherit;color:inherit;background-color:inherit} .mat-datepicker-popup .mat-datepicker-content button[disabled]:hover{border:inherit} .mat-datepicker-popup .cdk-keyboard-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical), .mat-datepicker-popup .cdk-program-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:#fff} .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} .mat-datepicker-popup .mat-calendar-body-selected{background-color:#4646ce;color:#f2f2fb;font-weight:600} .mat-datepicker-popup .mat-calendar-body-today.mat-calendar-body-selected{box-shadow:none} .mat-datepicker-popup .mat-button-focus-overlay{background:#f5f5f5} .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)} .mat-datepicker-popup .mat-calendar-controls .mat-calendar-period-button:hover{background:#f5f5f5;transition:background .2s cubic-bezier(.35,0,.25,1)} .mat-datepicker-popup .mat-calendar-table-header th{font-size:14px;font-weight:600;color:#333} .mat-datepicker-popup .mat-calendar-table-header-divider{display:none} .mat-datepicker-popup .mat-calendar-body-label{color:#fff;padding:0} .mat-datepicker-popup .mat-calendar-body>tr[aria-hidden=true]>.mat-calendar-body-label{display:none}[_nghost-%COMP%]{border:none;display:flex;align-items:center}.disabled[_nghost-%COMP%]{background:transparent;color:#aeabac}.disabled.dr-date-picker-on-dashboard[_nghost-%COMP%]{border:none;padding:0 8px}.disabled.dr-date-picker-on-dashboard[_nghost-%COMP%] .dr-datepicker-input-container__formatted-value-display[_ngcontent-%COMP%]{text-decoration:none;color:#aeabac;font-weight:400}.disabled.dr-date-picker-on-dashboard[_nghost-%COMP%] .dr-datepicker-input-container[_ngcontent-%COMP%] i[_ngcontent-%COMP%]{color:#aeabac}.dr-date-picker-on-dashboard[_nghost-%COMP%]{width:-moz-fit-content;width:fit-content;justify-content:space-between}.dr-date-picker-on-dashboard[_nghost-%COMP%] mat-datepicker[_ngcontent-%COMP%]{position:absolute}.dr-date-picker-on-dashboard[_nghost-%COMP%]:after{visibility:hidden}.dr-date-picker-on-dashboard[_nghost-%COMP%] .dr-datepicker-input-container[_ngcontent-%COMP%]{display:flex;flex-direction:row;justify-content:center;align-items:center;margin-left:-10px}.dr-date-picker-on-dashboard[_nghost-%COMP%] .dr-datepicker-input-container__formatted-value-display[_ngcontent-%COMP%]{font-weight:600;width:auto;margin-left:5px}.dr-date-picker-on-dashboard[_nghost-%COMP%] .dr-datepicker-input-container[_ngcontent-%COMP%] .dr-icon-date[_ngcontent-%COMP%]{display:block;position:relative;top:0;margin-right:8px;color:#4e566c}[_nghost-%COMP%] .dr-datepicker-input-container[_ngcontent-%COMP%] input[_ngcontent-%COMP%]{visibility:hidden;position:absolute;width:100%}[_nghost-%COMP%] .dr-datepicker-input-container__formatted-value-display[_ngcontent-%COMP%]{width:100px;height:22px;padding-left:0;text-align:center;line-height:22px;color:#0c142b;text-decoration-line:underline}[_nghost-%COMP%] .dr-datepicker-input-container__formatted-value-display[_ngcontent-%COMP%]:hover{background-color:#f2f2fb;border-radius:5px;cursor:pointer;text-decoration-line:underline;color:#4646ce} .date-picker-preset-tag{width:386px!important} .date-picker-preset-tag .mat-calendar-content{padding-left:32px!important;padding-right:32px!important}@media screen and (max-width: 410px){.mat-datepicker-input[_ngcontent-%COMP%]{width:100vw!important} .date-picker-preset-tag{width:calc(100vw - 16px)!important} .date-picker-preset-tag .dr-datepicker-preset-date__tags{justify-content:center;margin-left:-32px;margin-right:-32px} .date-picker-preset-tag .dr-datepicker-preset-date__tags__tag{font-size:10px}}"], changeDetection: 0 }); }
|
|
4573
4580
|
}
|
|
4574
4581
|
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DrDatePickerWithTimeframeComponent, [{
|
|
4575
4582
|
type: Component,
|
|
@@ -4577,7 +4584,7 @@ class DrDatePickerWithTimeframeComponent extends DrDatePickerComponent {
|
|
|
4577
4584
|
{ provide: NG_VALUE_ACCESSOR, useExisting: DrDatePickerWithTimeframeComponent, multi: true },
|
|
4578
4585
|
{ provide: DateAdapter, useClass: CustomDateAdapter },
|
|
4579
4586
|
{ provide: DrDatePickerService },
|
|
4580
|
-
], template: "<dr-button\n [disabled]=\"isPrevDateDisabled\"\n *ngIf=\"!disabled\"\n theme=\"icon\"\n icon=\"dr-icon-arrow-left\"\n (click)=\"pagingClicked(false)\"></dr-button>\n<div\n [drTooltip]=\"datepickerTooltip\"\n [drTooltipPosition]=\"datepickerTooltipPosition\"\n [drTooltipMousleaveTimeout]=\"datepickerTooltipTimeout\"\n 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 <ng-container\n [ngTemplateOutlet]=\"formattedValueTmpl\"\n [ngTemplateOutletContext]=\"{\n formattedValue: displayedFormattedValue$ | async\n }\">\n </ng-container>\n <ng-template #formattedValueTmpl let-value=\"formattedValue\">\n <span>\n {{\n datePickerService.isUsingDateTagPresets && !!presetTagSelected\n ? presetTagSelected + ' (' + value + ')'\n : value\n }}\n </span>\n </ng-template>\n </div>\n <input\n #datepickerInput\n [ngModel]=\"displayValue$ | async\"\n (ngModelChange)=\"valueChangedInCalendar($event)\"\n (click)=\"datePicker.open()\"\n [matDatepicker]=\"datePicker\"\n [readonly]=\"readonly\"\n [min]=\"_min\"\n [max]=\"_max\" />\n</div>\n<dr-button\n [disabled]=\"isNextDateDisabled\"\n *ngIf=\"!disabled\"\n theme=\"icon\"\n icon=\"dr-icon-arrow-right\"\n (click)=\"pagingClicked(true)\"></dr-button>\n<mat-datepicker\n #datePicker\n class=\"dr-timeframe-datepicker\"\n [calendarHeaderComponent]=\"customHeader\"\n (yearSelected)=\"chosenPeriodHandler($event, timeframeOption.YEAR)\"\n (monthSelected)=\"chosenPeriodHandler($event, timeframeOption.MONTH)\"\n (opened)=\"onOpen()\"\n (closed)=\"onCLose()\"\n [panelClass]=\"datePickerService.isUsingDateTagPresets ? 'date-picker-preset-tag' : 'dr-timeframe-datepicker'\">\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:\"\\ea15\";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 .cdk-keyboard-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),::ng-deep .mat-datepicker-popup .cdk-program-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:#fff}::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}::ng-deep .mat-datepicker-popup .mat-calendar-body>tr[aria-hidden=true]>.mat-calendar-body-label{display:none}: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:
|
|
4587
|
+
], template: "<dr-button\n [disabled]=\"isPrevDateDisabled\"\n *ngIf=\"!disabled\"\n theme=\"icon\"\n icon=\"dr-icon-arrow-left\"\n (click)=\"pagingClicked(false)\"></dr-button>\n<div\n [drTooltip]=\"datepickerTooltip\"\n [drTooltipPosition]=\"datepickerTooltipPosition\"\n [drTooltipMousleaveTimeout]=\"datepickerTooltipTimeout\"\n 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 <ng-container\n [ngTemplateOutlet]=\"formattedValueTmpl\"\n [ngTemplateOutletContext]=\"{\n formattedValue: displayedFormattedValue$ | async\n }\">\n </ng-container>\n <ng-template #formattedValueTmpl let-value=\"formattedValue\">\n <span>\n {{\n datePickerService.isUsingDateTagPresets && !!presetTagSelected\n ? presetTagSelected + ' (' + value + ')'\n : value\n }}\n </span>\n </ng-template>\n </div>\n <input\n #datepickerInput\n [ngModel]=\"displayValue$ | async\"\n (ngModelChange)=\"valueChangedInCalendar($event)\"\n (click)=\"datePicker.open()\"\n [matDatepicker]=\"datePicker\"\n [readonly]=\"readonly\"\n [min]=\"_min\"\n [max]=\"_max\" />\n</div>\n<dr-button\n [disabled]=\"isNextDateDisabled\"\n *ngIf=\"!disabled\"\n theme=\"icon\"\n icon=\"dr-icon-arrow-right\"\n (click)=\"pagingClicked(true)\"></dr-button>\n<mat-datepicker\n #datePicker\n class=\"dr-timeframe-datepicker\"\n [calendarHeaderComponent]=\"customHeader\"\n (yearSelected)=\"chosenPeriodHandler($event, timeframeOption.YEAR)\"\n (monthSelected)=\"chosenPeriodHandler($event, timeframeOption.MONTH)\"\n (opened)=\"onOpen()\"\n (closed)=\"onCLose()\"\n [panelClass]=\"datePickerService.isUsingDateTagPresets ? 'date-picker-preset-tag' : 'dr-timeframe-datepicker'\">\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:\"\\ea15\";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 .cdk-keyboard-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),::ng-deep .mat-datepicker-popup .cdk-program-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:#fff}::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}::ng-deep .mat-datepicker-popup .mat-calendar-body>tr[aria-hidden=true]>.mat-calendar-body-label{display:none}: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:100px;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}@media screen and (max-width: 410px){.mat-datepicker-input{width:100vw!important}::ng-deep .date-picker-preset-tag{width:calc(100vw - 16px)!important}::ng-deep .date-picker-preset-tag .dr-datepicker-preset-date__tags{justify-content:center;margin-left:-32px;margin-right:-32px}::ng-deep .date-picker-preset-tag .dr-datepicker-preset-date__tags__tag{font-size:10px}}\n"] }]
|
|
4581
4588
|
}], function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$4.DateAdapter }, { type: DrDatePickerService }]; }, { isDashboardClassDisplayed: [{
|
|
4582
4589
|
type: HostBinding,
|
|
4583
4590
|
args: ['class.dr-date-picker-on-dashboard']
|
|
@@ -4601,6 +4608,8 @@ class DrDatePickerWithTimeframeComponent extends DrDatePickerComponent {
|
|
|
4601
4608
|
type: Input
|
|
4602
4609
|
}], datepickerTooltipTimeout: [{
|
|
4603
4610
|
type: Input
|
|
4611
|
+
}], isOpen: [{
|
|
4612
|
+
type: Input
|
|
4604
4613
|
}], onChangeFormat: [{
|
|
4605
4614
|
type: Output
|
|
4606
4615
|
}], onChangePresetTag: [{
|
|
@@ -8266,7 +8275,7 @@ var __metadata = (this && this.__metadata) || function (k, v) {
|
|
|
8266
8275
|
};
|
|
8267
8276
|
const _c0$f = ["menuContainer"];
|
|
8268
8277
|
function DrDropdownComponent_dr_dropdown_item_4_ng_container_1_i_1_Template(rf, ctx) { if (rf & 1) {
|
|
8269
|
-
i0.ɵɵelement(0, "i");
|
|
8278
|
+
i0.ɵɵelement(0, "i", 11);
|
|
8270
8279
|
} if (rf & 2) {
|
|
8271
8280
|
const act_r2 = i0.ɵɵnextContext(2).$implicit;
|
|
8272
8281
|
i0.ɵɵclassMap(act_r2.icon);
|
|
@@ -8287,7 +8296,7 @@ function DrDropdownComponent_dr_dropdown_item_4_ng_container_1_Template(rf, ctx)
|
|
|
8287
8296
|
} }
|
|
8288
8297
|
function DrDropdownComponent_dr_dropdown_item_4_ng_container_2_i_1_Template(rf, ctx) { if (rf & 1) {
|
|
8289
8298
|
const _r14 = i0.ɵɵgetCurrentView();
|
|
8290
|
-
i0.ɵɵelementStart(0, "i",
|
|
8299
|
+
i0.ɵɵelementStart(0, "i", 15);
|
|
8291
8300
|
i0.ɵɵlistener("mousedown", function DrDropdownComponent_dr_dropdown_item_4_ng_container_2_i_1_Template_i_mousedown_0_listener($event) { const restoredCtx = i0.ɵɵrestoreView(_r14); const actionIcon_r12 = restoredCtx.$implicit; const act_r2 = i0.ɵɵnextContext(2).$implicit; const ctx_r13 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r13.onActionIconClick($event, actionIcon_r12, act_r2.data)); });
|
|
8292
8301
|
i0.ɵɵelementEnd();
|
|
8293
8302
|
} if (rf & 2) {
|
|
@@ -8296,12 +8305,12 @@ function DrDropdownComponent_dr_dropdown_item_4_ng_container_2_i_1_Template(rf,
|
|
|
8296
8305
|
i0.ɵɵclassProp("showOnHover", actionIcon_r12.showOnHover);
|
|
8297
8306
|
} }
|
|
8298
8307
|
function DrDropdownComponent_dr_dropdown_item_4_ng_container_2_i_2_Template(rf, ctx) { if (rf & 1) {
|
|
8299
|
-
i0.ɵɵelement(0, "i",
|
|
8308
|
+
i0.ɵɵelement(0, "i", 16);
|
|
8300
8309
|
} }
|
|
8301
8310
|
function DrDropdownComponent_dr_dropdown_item_4_ng_container_2_Template(rf, ctx) { if (rf & 1) {
|
|
8302
|
-
i0.ɵɵelementContainerStart(0,
|
|
8303
|
-
i0.ɵɵtemplate(1, DrDropdownComponent_dr_dropdown_item_4_ng_container_2_i_1_Template, 1, 4, "i",
|
|
8304
|
-
i0.ɵɵtemplate(2, DrDropdownComponent_dr_dropdown_item_4_ng_container_2_i_2_Template, 1, 0, "i",
|
|
8311
|
+
i0.ɵɵelementContainerStart(0, 12);
|
|
8312
|
+
i0.ɵɵtemplate(1, DrDropdownComponent_dr_dropdown_item_4_ng_container_2_i_1_Template, 1, 4, "i", 13);
|
|
8313
|
+
i0.ɵɵtemplate(2, DrDropdownComponent_dr_dropdown_item_4_ng_container_2_i_2_Template, 1, 0, "i", 14);
|
|
8305
8314
|
i0.ɵɵelementContainerEnd();
|
|
8306
8315
|
} if (rf & 2) {
|
|
8307
8316
|
const act_r2 = i0.ɵɵnextContext().$implicit;
|
|
@@ -8313,7 +8322,7 @@ function DrDropdownComponent_dr_dropdown_item_4_ng_container_2_Template(rf, ctx)
|
|
|
8313
8322
|
} }
|
|
8314
8323
|
const _c1$8 = function (a0) { return { $implicit: a0 }; };
|
|
8315
8324
|
function DrDropdownComponent_dr_dropdown_item_4_ng_container_3_Template(rf, ctx) { if (rf & 1) {
|
|
8316
|
-
i0.ɵɵelementContainer(0,
|
|
8325
|
+
i0.ɵɵelementContainer(0, 17);
|
|
8317
8326
|
} if (rf & 2) {
|
|
8318
8327
|
const act_r2 = i0.ɵɵnextContext().$implicit;
|
|
8319
8328
|
i0.ɵɵproperty("ngTemplateOutlet", act_r2.templateRef)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c1$8, act_r2));
|
|
@@ -8457,7 +8466,7 @@ class DrDropdownComponent {
|
|
|
8457
8466
|
} if (rf & 2) {
|
|
8458
8467
|
let _t;
|
|
8459
8468
|
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.menuContainer = _t.first);
|
|
8460
|
-
} }, inputs: { options: "options" }, outputs: { onAction: "action" }, features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c4, decls: 6, vars: 5, consts: [[1, "dr-dropdown"], ["menuContainer", ""], ["tabindex", "-1", "role", "listbox", 1, "dr-dropdown__container", 3, "mouseenter", "mouseleave"], ["drDropdownChild", "", "role", "option", "tabindex", "0", 3, "drTooltip", "drTooltipPosition", "drTooltipOptions", "drTooltipClass", "drDropdown", "drDropdownClass", "drDropdownInHover", "drDropdownPosition", "disabled", "selected", "divider", "mousedown", 4, "ngFor", "ngForOf"], ["drDropdownChild", "", "role", "option", "tabindex", "0", 3, "drTooltip", "drTooltipPosition", "drTooltipOptions", "drTooltipClass", "drDropdown", "drDropdownClass", "drDropdownInHover", "drDropdownPosition", "disabled", "selected", "divider", "mousedown"], ["dropdownItemContent", "", 4, "ngIf"], ["dropdownItemActions", "", 4, "ngIf"], ["dropdownItemContent", "", 3, "ngTemplateOutlet", "ngTemplateOutletContext", 4, "ngIf"], ["dropdownItemContent", ""], [3, "class", 4, "ngIf"], [1, "dr-dropdown__text"], ["dropdownItemActions", ""], [3, "class", "showOnHover", "mousedown", 4, "ngFor", "ngForOf"], ["class", "dr-icon-arrow-right", 4, "ngIf"], [3, "mousedown"], [1, "dr-icon-arrow-right"], ["dropdownItemContent", "", 3, "ngTemplateOutlet", "ngTemplateOutletContext"]], template: function DrDropdownComponent_Template(rf, ctx) { if (rf & 1) {
|
|
8469
|
+
} }, inputs: { options: "options" }, outputs: { onAction: "action" }, features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c4, decls: 6, vars: 5, consts: [[1, "dr-dropdown"], ["menuContainer", ""], ["tabindex", "-1", "role", "listbox", 1, "dr-dropdown__container", 3, "mouseenter", "mouseleave"], ["drDropdownChild", "", "role", "option", "tabindex", "0", 3, "drTooltip", "drTooltipPosition", "drTooltipOptions", "drTooltipClass", "drDropdown", "drDropdownClass", "drDropdownInHover", "drDropdownPosition", "disabled", "selected", "divider", "mousedown", 4, "ngFor", "ngForOf"], ["drDropdownChild", "", "role", "option", "tabindex", "0", 3, "drTooltip", "drTooltipPosition", "drTooltipOptions", "drTooltipClass", "drDropdown", "drDropdownClass", "drDropdownInHover", "drDropdownPosition", "disabled", "selected", "divider", "mousedown"], ["dropdownItemContent", "", 4, "ngIf"], ["dropdownItemActions", "", 4, "ngIf"], ["dropdownItemContent", "", 3, "ngTemplateOutlet", "ngTemplateOutletContext", 4, "ngIf"], ["dropdownItemContent", ""], ["class", "dr-dropdown__icon", 3, "class", 4, "ngIf"], [1, "dr-dropdown__text"], [1, "dr-dropdown__icon"], ["dropdownItemActions", ""], [3, "class", "showOnHover", "mousedown", 4, "ngFor", "ngForOf"], ["class", "dr-icon-arrow-right", 4, "ngIf"], [3, "mousedown"], [1, "dr-icon-arrow-right"], ["dropdownItemContent", "", 3, "ngTemplateOutlet", "ngTemplateOutletContext"]], template: function DrDropdownComponent_Template(rf, ctx) { if (rf & 1) {
|
|
8461
8470
|
i0.ɵɵprojectionDef(_c3$1);
|
|
8462
8471
|
i0.ɵɵelementStart(0, "div", 0, 1)(2, "div", 2);
|
|
8463
8472
|
i0.ɵɵlistener("mouseenter", function DrDropdownComponent_Template_div_mouseenter_2_listener() { return ctx.onMouseenter(); })("mouseleave", function DrDropdownComponent_Template_div_mouseleave_2_listener() { return ctx.onMouseleave(); });
|
|
@@ -8469,7 +8478,7 @@ class DrDropdownComponent {
|
|
|
8469
8478
|
i0.ɵɵclassMap(ctx.containerClass);
|
|
8470
8479
|
i0.ɵɵadvance(4);
|
|
8471
8480
|
i0.ɵɵproperty("ngForOf", i0.ɵɵpipeBind1(5, 3, ctx.list));
|
|
8472
|
-
} }, styles: [".dr-dropdown__item .dr-dropdown{visibility:hidden;transition-delay:.2s} .dr-dropdown__item:hover>*>.dr-dropdown{visibility:visible;transition-delay:0s} .dr-dropdown__tooltip>.default-content{max-width:300px;white-space:normal!important}.dr-dropdown[_ngcontent-%COMP%]{width:auto}.dr-dropdown__text[_ngcontent-%COMP%]{overflow:hidden;text-overflow:ellipsis;flex:1}.dr-dropdown__container[_ngcontent-%COMP%]{display:flex;flex-direction:column;background:#fff;padding:8px 0;overflow-y:auto;max-height:60vh;max-width:300px}.dr-
|
|
8481
|
+
} }, styles: [".dr-dropdown__item .dr-dropdown{visibility:hidden;transition-delay:.2s} .dr-dropdown__item:hover>*>.dr-dropdown{visibility:visible;transition-delay:0s} .dr-dropdown__tooltip>.default-content{max-width:300px;white-space:normal!important}.dr-dropdown[_ngcontent-%COMP%]{width:auto}.dr-dropdown__text[_ngcontent-%COMP%]{overflow:hidden;text-overflow:ellipsis;flex:1}.dr-dropdown__container[_ngcontent-%COMP%]{display:flex;flex-direction:column;background:#fff;padding:8px 0;overflow-y:auto;max-height:60vh;max-width:300px}.dr-dropdown__icon[_ngcontent-%COMP%]{margin-right:8px}.dr-dropdown[_ngcontent-%COMP%] i[_ngcontent-%COMP%]:not(:first-child):hover{color:#4646ce}.dr-dropdown[_ngcontent-%COMP%] dr-dropdown-item[_ngcontent-%COMP%]:hover .showOnHover[_ngcontent-%COMP%]{visibility:visible}.dr-dropdown[_ngcontent-%COMP%] .showOnHover[_ngcontent-%COMP%]{visibility:hidden}"], changeDetection: 0 }); }
|
|
8473
8482
|
}
|
|
8474
8483
|
__decorate([
|
|
8475
8484
|
Debounce(200),
|
|
@@ -8479,7 +8488,7 @@ __decorate([
|
|
|
8479
8488
|
], DrDropdownComponent.prototype, "onMouseleave", null);
|
|
8480
8489
|
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DrDropdownComponent, [{
|
|
8481
8490
|
type: Component,
|
|
8482
|
-
args: [{ selector: 'dr-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #menuContainer [class]=\"containerClass\" class=\"dr-dropdown\">\n <div class=\"dr-dropdown__container\" (mouseenter)=\"onMouseenter()\" (mouseleave)=\"onMouseleave()\" tabindex=\"-1\" role=\"listbox\">\n <ng-content select=\"dr-dropdown-item\"></ng-content>\n\n <dr-dropdown-item\n *ngFor=\"let act of list | drDropdownItemShowPipe; let index = index\"\n (mousedown)=\"action(act)\"\n [drTooltip]=\"tooltipToShow(act)\"\n [drTooltipPosition]=\"'left'\"\n [drTooltipOptions]=\"{ withoutArrow: true }\"\n [drTooltipClass]=\"'dr-dropdown__tooltip'\"\n [drDropdown]=\"hasChildren(act) && act.children\"\n [drDropdownClass]=\"act.childOptions?.class\"\n [drDropdownInHover]=\"true\"\n [drDropdownPosition]=\"act.childOptions?.position\"\n drDropdownChild\n [disabled]=\"disabled(act)\"\n [selected]=\"selected(act)\"\n [divider]=\"act.separateLine\"\n [attr.data-analytics]=\"getDataAnalyticsTag(act, index)\"\n role=\"option\"\n tabindex=\"0\">\n <ng-container dropdownItemContent *ngIf=\"!act.templateRef\">\n <i *ngIf=\"act.icon\" [class]=\"act.icon\"></i>\n <span class=\"dr-dropdown__text\">{{ act.title }}</span>\n </ng-container>\n\n <ng-container dropdownItemActions *ngIf=\"!act.templateRef\">\n <i\n *ngFor=\"let actionIcon of act.actionIcons\"\n [class]=\"actionIcon.icon\"\n [class.showOnHover]=\"actionIcon.showOnHover\"\n (mousedown)=\"onActionIconClick($event, actionIcon, act.data)\"></i>\n <i *ngIf=\"hasChildren(act)\" class=\"dr-icon-arrow-right\"></i>\n </ng-container>\n\n <ng-container\n *ngIf=\"act.templateRef\"\n dropdownItemContent\n [ngTemplateOutlet]=\"act.templateRef\"\n [ngTemplateOutletContext]=\"{ $implicit: act }\">\n </ng-container>\n </dr-dropdown-item>\n </div>\n</div>\n", styles: ["::ng-deep .dr-dropdown__item .dr-dropdown{visibility:hidden;transition-delay:.2s}::ng-deep .dr-dropdown__item:hover>*>.dr-dropdown{visibility:visible;transition-delay:0s}::ng-deep .dr-dropdown__tooltip>.default-content{max-width:300px;white-space:normal!important}.dr-dropdown{width:auto}.dr-dropdown__text{overflow:hidden;text-overflow:ellipsis;flex:1}.dr-dropdown__container{display:flex;flex-direction:column;background:#fff;padding:8px 0;overflow-y:auto;max-height:60vh;max-width:300px}.dr-
|
|
8491
|
+
args: [{ selector: 'dr-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #menuContainer [class]=\"containerClass\" class=\"dr-dropdown\">\n <div class=\"dr-dropdown__container\" (mouseenter)=\"onMouseenter()\" (mouseleave)=\"onMouseleave()\" tabindex=\"-1\" role=\"listbox\">\n <ng-content select=\"dr-dropdown-item\"></ng-content>\n\n <dr-dropdown-item\n *ngFor=\"let act of list | drDropdownItemShowPipe; let index = index\"\n (mousedown)=\"action(act)\"\n [drTooltip]=\"tooltipToShow(act)\"\n [drTooltipPosition]=\"'left'\"\n [drTooltipOptions]=\"{ withoutArrow: true }\"\n [drTooltipClass]=\"'dr-dropdown__tooltip'\"\n [drDropdown]=\"hasChildren(act) && act.children\"\n [drDropdownClass]=\"act.childOptions?.class\"\n [drDropdownInHover]=\"true\"\n [drDropdownPosition]=\"act.childOptions?.position\"\n drDropdownChild\n [disabled]=\"disabled(act)\"\n [selected]=\"selected(act)\"\n [divider]=\"act.separateLine\"\n [attr.data-analytics]=\"getDataAnalyticsTag(act, index)\"\n role=\"option\"\n tabindex=\"0\">\n <ng-container dropdownItemContent *ngIf=\"!act.templateRef\">\n <i *ngIf=\"act.icon\" [class]=\"act.icon\" class=\"dr-dropdown__icon\"></i>\n <span class=\"dr-dropdown__text\">{{ act.title }}</span>\n </ng-container>\n\n <ng-container dropdownItemActions *ngIf=\"!act.templateRef\">\n <i\n *ngFor=\"let actionIcon of act.actionIcons\"\n [class]=\"actionIcon.icon\"\n [class.showOnHover]=\"actionIcon.showOnHover\"\n (mousedown)=\"onActionIconClick($event, actionIcon, act.data)\"></i>\n <i *ngIf=\"hasChildren(act)\" class=\"dr-icon-arrow-right\"></i>\n </ng-container>\n\n <ng-container\n *ngIf=\"act.templateRef\"\n dropdownItemContent\n [ngTemplateOutlet]=\"act.templateRef\"\n [ngTemplateOutletContext]=\"{ $implicit: act }\">\n </ng-container>\n </dr-dropdown-item>\n </div>\n</div>\n", styles: ["::ng-deep .dr-dropdown__item .dr-dropdown{visibility:hidden;transition-delay:.2s}::ng-deep .dr-dropdown__item:hover>*>.dr-dropdown{visibility:visible;transition-delay:0s}::ng-deep .dr-dropdown__tooltip>.default-content{max-width:300px;white-space:normal!important}.dr-dropdown{width:auto}.dr-dropdown__text{overflow:hidden;text-overflow:ellipsis;flex:1}.dr-dropdown__container{display:flex;flex-direction:column;background:#fff;padding:8px 0;overflow-y:auto;max-height:60vh;max-width:300px}.dr-dropdown__icon{margin-right:8px}.dr-dropdown i:not(:first-child):hover{color:#4646ce}.dr-dropdown dr-dropdown-item:hover .showOnHover{visibility:visible}.dr-dropdown .showOnHover{visibility:hidden}\n"] }]
|
|
8483
8492
|
}], function () { return []; }, { menuContainer: [{
|
|
8484
8493
|
type: ViewChild,
|
|
8485
8494
|
args: ['menuContainer', { static: true }]
|