@datarailsshared/datarailsshared 1.4.171 → 1.4.174
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/colors.scss +80 -0
- package/assets/styles/mixins.scss +10 -0
- package/assets/styles/vars.scss +35 -0
- package/bundles/datarailsshared-datarailsshared.umd.js +49 -19
- package/bundles/datarailsshared-datarailsshared.umd.js.map +1 -1
- package/datarailsshared-datarailsshared-1.4.174.tgz +0 -0
- package/datarailsshared-datarailsshared.metadata.json +1 -1
- package/esm2015/lib/date-tags/forecast-tag/forecast-tag.component.js +10 -1
- package/esm2015/lib/dr-inputs/date-pickers/dr-date-picker/dr-date-picker.component.js +8 -3
- package/esm2015/lib/dr-inputs/date-pickers/dr-date-picker-with-timeframe/dr-date-picker-with-timeframe.component.js +1 -1
- package/esm2015/lib/dr-scenario/components/dr-scenario-configuration/dr-scenario-configuration.component.js +13 -4
- package/esm2015/lib/dr-scenario/services/scenario.service.js +20 -15
- package/esm2015/public-api.js +1 -1
- package/fesm2015/datarailsshared-datarailsshared.js +46 -20
- package/fesm2015/datarailsshared-datarailsshared.js.map +1 -1
- package/lib/dr-scenario/components/dr-scenario-configuration/dr-scenario-configuration.component.d.ts +3 -1
- package/lib/dr-scenario/services/scenario.service.d.ts +3 -2
- package/package.json +1 -1
- package/public-api.d.ts +1 -1
- package/datarailsshared-datarailsshared-1.4.171.tgz +0 -0
|
@@ -3,7 +3,7 @@ import { EventEmitter, Component, ViewEncapsulation, Input, Output, HostBinding,
|
|
|
3
3
|
import { DateAdapter, MAT_DATE_LOCALE, MAT_DATE_FORMATS } from '@angular/material/core';
|
|
4
4
|
import { MomentDateAdapter, MAT_MOMENT_DATE_ADAPTER_OPTIONS } from '@angular/material-moment-adapter';
|
|
5
5
|
import * as _ from 'lodash';
|
|
6
|
-
import { find, map, merge, forEach, some, orderBy, filter as filter$1,
|
|
6
|
+
import { find, map, merge, forEach, some, orderBy, cloneDeep, filter as filter$1, indexOf, reduce, isObject, isNil, isNumber, includes } from 'lodash';
|
|
7
7
|
import { NG_VALUE_ACCESSOR, FormGroupDirective, FormGroup, FormControl, NgModel, NgControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
8
8
|
import { isPlatformBrowser, DOCUMENT, CommonModule } from '@angular/common';
|
|
9
9
|
import { Subject, from, merge as merge$1, fromEvent, noop as noop$1, BehaviorSubject } from 'rxjs';
|
|
@@ -232,6 +232,13 @@ ForecastTagComponent.decorators = [
|
|
|
232
232
|
{ type: Component, args: [{
|
|
233
233
|
template: "<div class=\"forecast-tag__container\">\n <div class=\"forecast-tag__forecast\">\n <p class=\"tag__label\">{{ name }}</p>\n <dr-select placeholder=\"Select\"\n [(ngModel)]=\"forecastValue\"\n bindLabel=\"label\"\n bindValue=\"value\"\n [disabled]=\"disabled\"\n [items]=\"forecastTags\"\n (ngModelChange)=\"changeTagInputHandler($event)\"></dr-select>\n </div>\n <div class=\"forecast-tag__year\">\n <p class=\"tag__label\">Year</p>\n <dr-date-picker format=\"year\"\n [(ngModel)]=\"dateObj.date\"\n [datepickerFilter]=\"dateFilter.bind(this)\"\n [disabled]=\"disabled\"\n (ngModelChange)=\"changeYearInputHandler($event)\"></dr-date-picker>\n </div>\n</div>\n",
|
|
234
234
|
selector: 'forecast-tag',
|
|
235
|
+
providers: [
|
|
236
|
+
{
|
|
237
|
+
provide: DateAdapter,
|
|
238
|
+
useClass: MomentDateAdapter,
|
|
239
|
+
deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS],
|
|
240
|
+
}
|
|
241
|
+
],
|
|
235
242
|
styles: [".tag__label{margin:0 0 4px;color:#0c142b;font-size:14px;font-weight:400;line-height:22px}.forecast-tag__container{display:flex;align-items:center}.forecast-tag__year{width:50%;margin-left:24px}.forecast-tag__forecast{width:50%}\n"]
|
|
236
243
|
},] }
|
|
237
244
|
];
|
|
@@ -3753,10 +3760,10 @@ class ScenarioService {
|
|
|
3753
3760
|
get areExistingTagsConfig() {
|
|
3754
3761
|
return !!this.currentTagsConfig;
|
|
3755
3762
|
}
|
|
3756
|
-
initScenarioTags(
|
|
3757
|
-
if (!(wholeTagsConfig === null || wholeTagsConfig === void 0 ? void 0 : wholeTagsConfig.length)
|
|
3763
|
+
initScenarioTags(wholeTagsConfig, currentTagsConfig, isMultipleDimension) {
|
|
3764
|
+
if (!(wholeTagsConfig === null || wholeTagsConfig === void 0 ? void 0 : wholeTagsConfig.length))
|
|
3758
3765
|
return;
|
|
3759
|
-
this.wholeTagsConfig = wholeTagsConfig;
|
|
3766
|
+
this.wholeTagsConfig = cloneDeep(wholeTagsConfig);
|
|
3760
3767
|
this.currentTagsConfig = currentTagsConfig;
|
|
3761
3768
|
this.isMultipleDimension = isMultipleDimension;
|
|
3762
3769
|
}
|
|
@@ -3768,13 +3775,14 @@ class ScenarioService {
|
|
|
3768
3775
|
const scenarioTagsConfig = this.getScenarioTagsConfig(scenario, this.wholeTagsConfig);
|
|
3769
3776
|
const scenarioTagsUi = [];
|
|
3770
3777
|
forEach(scenarioTagsConfig, (scenarioTag) => {
|
|
3771
|
-
const
|
|
3772
|
-
const
|
|
3773
|
-
const tag =
|
|
3774
|
-
if (
|
|
3775
|
-
this.
|
|
3778
|
+
const isTagWithSubTags = scenarioTag.type === TagTypes.DATE;
|
|
3779
|
+
const tagWithSubTags = isTagWithSubTags && find(scenarioTagsUi, { type: scenarioTag.type });
|
|
3780
|
+
const tag = tagWithSubTags || this.prepareScenarioTag(scenarioTagsConfig, scenarioTag, scenario, isTagWithSubTags);
|
|
3781
|
+
if (isTagWithSubTags) {
|
|
3782
|
+
this.updateScenarioSubTags(tag, scenarioTag);
|
|
3783
|
+
tag.subTags = this.sortedScenarioSubTags(tag);
|
|
3776
3784
|
}
|
|
3777
|
-
if (
|
|
3785
|
+
if (tagWithSubTags)
|
|
3778
3786
|
return;
|
|
3779
3787
|
scenarioTagsUi.push(tag);
|
|
3780
3788
|
});
|
|
@@ -3834,12 +3842,16 @@ class ScenarioService {
|
|
|
3834
3842
|
}
|
|
3835
3843
|
return tag;
|
|
3836
3844
|
}
|
|
3837
|
-
|
|
3838
|
-
|
|
3839
|
-
|
|
3845
|
+
sortedScenarioSubTags(tag) {
|
|
3846
|
+
const SUB_TAGS_ORDER = [TagsConfigSubType.DAY, TagsConfigSubType.WEEK, TagsConfigSubType.MONTH, TagsConfigSubType.QUARTER, TagsConfigSubType.YEAR];
|
|
3847
|
+
return orderBy(tag.subTags, (subTag) => indexOf(SUB_TAGS_ORDER, subTag.subType));
|
|
3848
|
+
}
|
|
3849
|
+
updateScenarioSubTags(tag, scenarioTag) {
|
|
3850
|
+
if (!tag.subTags) {
|
|
3851
|
+
tag.subTags = [];
|
|
3840
3852
|
}
|
|
3841
3853
|
const tagSubType = scenarioTag.options.sub_type;
|
|
3842
|
-
|
|
3854
|
+
tag.subTags.push({
|
|
3843
3855
|
subType: tagSubType,
|
|
3844
3856
|
name: tagSubType === TagsConfigSubType.FORECAST_NEW ? this.DEFAULT_FORECAST_DATE_TAG : scenarioTag.name,
|
|
3845
3857
|
});
|
|
@@ -4445,7 +4457,12 @@ class DrDatePickerComponent {
|
|
|
4445
4457
|
* Setting value from outside of component via ngModel or formControl updates
|
|
4446
4458
|
*/
|
|
4447
4459
|
writeValue(value) {
|
|
4448
|
-
|
|
4460
|
+
/*
|
|
4461
|
+
* We need keep local timestamp for Electron Application
|
|
4462
|
+
* Issue in electron: when we select date, date select with -1 (if we're choosing 2023, output will be 2022)
|
|
4463
|
+
*/
|
|
4464
|
+
const convertedValue = document.is_electron ? moment.unix(value) : moment.unix(value).utc();
|
|
4465
|
+
this.innerValue = convertedValue || value;
|
|
4449
4466
|
if (this.innerValue) {
|
|
4450
4467
|
this.tryToNormalaizeTimeframe();
|
|
4451
4468
|
}
|
|
@@ -4491,7 +4508,7 @@ DrDatePickerComponent.decorators = [
|
|
|
4491
4508
|
{ provide: NG_VALUE_ACCESSOR, useExisting: DrDatePickerComponent, multi: true },
|
|
4492
4509
|
DrDatePickerService
|
|
4493
4510
|
],
|
|
4494
|
-
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 #
|
|
4511
|
+
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:#85889c;overflow:hidden;outline:none;cursor:pointer}:host:hover{border-color:#85889c}:host:focus-within{border-color:#4646ce!important;color:#151b3f}:host.disabled{pointer-events:none;border:1px solid #aeabac;background:#f0f1f4}:host.disabled:after{color:#aeabac}:host.ng-valid.ng-dirty{border-color:#03a678}:host.ng-invalid.ng-dirty:not(:focus-within){border-color:#de2833!important}:host.ng-untouched.ng-valid{border-color:#9ea1aa}:host:after,:host:before{position:absolute;display:flex;border-color:#999999 transparent transparent;color:#999}:host:after{content:\"\\e9b6\";font-family:DataRails;font-size:24px;color:#6d6e6f;top:0;bottom:0;right:8px;position:absolute;display:flex;align-items:center;justify-content:center}:host i{display:flex;align-items:center;position:absolute;color:#999;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}::ng-deep .mat-datepicker-content{margin:7px 0;box-shadow:0 4px 8px 1px #00000040;border-radius:12px!important}::ng-deep .mat-datepicker-content button[disabled]{border:inherit;color:inherit;background-color:inherit}::ng-deep .mat-datepicker-content button[disabled]:hover{border:inherit}::ng-deep .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-calendar-body-selected{background-color:#4646ce;color:#f2f2fb;font-weight:600}::ng-deep .mat-calendar-body-today.mat-calendar-body-selected{box-shadow:none}::ng-deep .mat-button-focus-overlay{background:#f3f7ff}::ng-deep .mat-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:1!important;background:#f3f7ff;transition:opacity .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-calendar-controls .mat-calendar-period-button:hover{background:#f3f7ff;transition:background .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-calendar-table-header th{font-size:14px;font-weight:600;color:#19181a}::ng-deep .mat-calendar-table-header-divider{display:none}::ng-deep .mat-calendar-body-label{color:#fff;padding:0}\n"]
|
|
4495
4512
|
},] }
|
|
4496
4513
|
];
|
|
4497
4514
|
DrDatePickerComponent.ctorParameters = () => [
|
|
@@ -4660,7 +4677,7 @@ DrDatePickerWithTimeframeComponent.decorators = [
|
|
|
4660
4677
|
{ provide: NG_VALUE_ACCESSOR, useExisting: DrDatePickerWithTimeframeComponent, multi: true },
|
|
4661
4678
|
{ provide: DrDatePickerService }
|
|
4662
4679
|
],
|
|
4663
|
-
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 #
|
|
4680
|
+
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:#85889c;overflow:hidden;outline:none;cursor:pointer}:host:hover{border-color:#85889c}:host:focus-within{border-color:#4646ce!important;color:#151b3f}:host.disabled{pointer-events:none;border:1px solid #aeabac;background:#f0f1f4}:host.disabled:after{color:#aeabac}:host.ng-valid.ng-dirty{border-color:#03a678}:host.ng-invalid.ng-dirty:not(:focus-within){border-color:#de2833!important}:host.ng-untouched.ng-valid{border-color:#9ea1aa}:host:after,:host:before{position:absolute;display:flex;border-color:#999999 transparent transparent;color:#999}:host:after{content:\"\\e9b6\";font-family:DataRails;font-size:24px;color:#6d6e6f;top:0;bottom:0;right:8px;position:absolute;display:flex;align-items:center;justify-content:center}:host i{display:flex;align-items:center;position:absolute;color:#999;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}::ng-deep .mat-datepicker-content{margin:7px 0;box-shadow:0 4px 8px 1px #00000040;border-radius:12px!important}::ng-deep .mat-datepicker-content button[disabled]{border:inherit;color:inherit;background-color:inherit}::ng-deep .mat-datepicker-content button[disabled]:hover{border:inherit}::ng-deep .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-calendar-body-selected{background-color:#4646ce;color:#f2f2fb;font-weight:600}::ng-deep .mat-calendar-body-today.mat-calendar-body-selected{box-shadow:none}::ng-deep .mat-button-focus-overlay{background:#f3f7ff}::ng-deep .mat-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:1!important;background:#f3f7ff;transition:opacity .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-calendar-controls .mat-calendar-period-button:hover{background:#f3f7ff;transition:background .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-calendar-table-header th{font-size:14px;font-weight:600;color:#19181a}::ng-deep .mat-calendar-table-header-divider{display:none}::ng-deep .mat-calendar-body-label{color:#fff;padding:0}:host{border:none;display:flex;align-items:center}:host.disabled{background:transparent;color:inherit}:host.disabled.dr-date-picker-on-dashboard .dr-datepicker-input-container__formatted-value-display{text-decoration:none;color:#6d6e6f;font-weight:normal}: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;-webkit-text-decoration-line:underline;text-decoration-line:underline}:host .dr-datepicker-input-container__formatted-value-display:hover{background-color:#f2f2fb;border-radius:5px;cursor:pointer;-webkit-text-decoration-line:underline;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"]
|
|
4664
4681
|
},] }
|
|
4665
4682
|
];
|
|
4666
4683
|
DrDatePickerWithTimeframeComponent.ctorParameters = () => [
|
|
@@ -5967,10 +5984,19 @@ class DrScenarioConfigurationComponent {
|
|
|
5967
5984
|
this.toggleButtonMode = ToggleButtonMode;
|
|
5968
5985
|
this._scenarioTags = [];
|
|
5969
5986
|
this.wholeTagsConfig = [];
|
|
5970
|
-
this.selectedScenario = Scenario.ACTUALS;
|
|
5971
5987
|
this.isMultipleDimension = false;
|
|
5972
5988
|
this.scenarioDataChanged = new EventEmitter();
|
|
5973
5989
|
}
|
|
5990
|
+
set selectedScenario(scenario) {
|
|
5991
|
+
if (!Object.values(Scenario).includes(scenario)) {
|
|
5992
|
+
this._selectedScenario = Scenario.ACTUALS;
|
|
5993
|
+
return;
|
|
5994
|
+
}
|
|
5995
|
+
this._selectedScenario = scenario;
|
|
5996
|
+
}
|
|
5997
|
+
get selectedScenario() {
|
|
5998
|
+
return this._selectedScenario || Scenario.ACTUALS;
|
|
5999
|
+
}
|
|
5974
6000
|
get scenarioTags() {
|
|
5975
6001
|
return this._scenarioTags;
|
|
5976
6002
|
}
|
|
@@ -5983,7 +6009,7 @@ class DrScenarioConfigurationComponent {
|
|
|
5983
6009
|
}
|
|
5984
6010
|
ngOnInit() {
|
|
5985
6011
|
this.scenarios = this.scenarioService.scenarios;
|
|
5986
|
-
this.scenarioService.initScenarioTags(this.
|
|
6012
|
+
this.scenarioService.initScenarioTags(this.wholeTagsConfig, this.currentTagsConfig, this.isMultipleDimension);
|
|
5987
6013
|
this.scenarioTags = this.scenarioService.getScenarioTagsByScenario(this.selectedScenario);
|
|
5988
6014
|
}
|
|
5989
6015
|
onScenarioChange(scenario) {
|
|
@@ -6031,7 +6057,7 @@ class DrScenarioConfigurationComponent {
|
|
|
6031
6057
|
DrScenarioConfigurationComponent.decorators = [
|
|
6032
6058
|
{ type: Component, args: [{
|
|
6033
6059
|
selector: 'dr-scenario-configuration',
|
|
6034
|
-
template: "<div class=\"scenario\">\n <div class=\"scenario__list\">\n <p class=\"scenario__title scenario__title-list\">Scenario</p>\n <dr-select [(ngModel)]=\"selectedScenario\"\n placeholder=\"
|
|
6060
|
+
template: "<div class=\"scenario\">\n <div class=\"scenario__list\">\n <p class=\"scenario__title scenario__title-list\">Scenario</p>\n <dr-select [(ngModel)]=\"selectedScenario\"\n placeholder=\"Select\"\n [items]=\"scenarios\"\n (ngModelChange)=\"onScenarioChange($event)\"></dr-select>\n </div>\n <div class=\"scenario__tags\">\n <p class=\"scenario__title--extra scenario__tags__title\">Tags</p>\n <div class=\"scenario__tag\" *ngFor=\"let tag of scenarioTags\">\n <div class=\"scenario__tag__header\">\n <p class=\"scenario__title\">{{ tag.name }}</p>\n <dr-toggle [(ngModel)]=\"tag.toggle\"\n (ngModelChange)=\"onScenarioTagToggle(tag)\"></dr-toggle>\n </div>\n <div class=\"scenario__tag__description\">\n <p class=\"scenario__text\">{{ tag.description }}</p>\n </div>\n <div *ngIf=\"tag.toggle\" class=\"scenario__tag__body\">\n <div *ngIf=\"tag.subTags?.length\" class=\"scenario__sub-tag\">\n <dr-toggle-button [(ngModel)]=\"tag.selectedTagSubType\"\n bindHidden=\"hidden\"\n bindLabel=\"name\"\n bindValue=\"subType\"\n [items]=\"tag.subTags\"\n [mode]=\"toggleButtonMode.DOTTED\"\n (ngModelChange)=\"onScenarioDataChange()\"></dr-toggle-button>\n </div>\n </div>\n </div>\n </div>\n</div>\n",
|
|
6035
6061
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
6036
6062
|
providers: [ScenarioService],
|
|
6037
6063
|
styles: [".scenario__text,.scenario__title,.scenario__title--extra{padding:0;margin:0;color:#0c142b;font-weight:400;font-size:14px;line-height:22px}.scenario__title{font-weight:600}.scenario__title--extra{font-weight:700}.scenario__tags{margin-top:24px}.scenario__tags__title{margin-bottom:16px}.scenario__title-list{margin-bottom:4px}.scenario__tag{margin-bottom:24px;padding-top:16px;border-top:1px solid #dfe0e3}.scenario__tag__description{margin-top:5px}.scenario__tag__header{display:flex;justify-content:space-between}.scenario__sub-tag{margin-top:8px}:host::ng-deep .toggle-container__item{padding:2px 8px!important}\n"]
|