@datarailsshared/datarailsshared 1.4.98 → 1.4.101

package/bundles/datarailsshared-datarailsshared.umd.js

@@ -4094,6 +4094,7 @@
                 quarter: exports.DateFromats.QUARTER_FORMAT,
                 week: exports.DateFromats.WEEK_FORMAT
             };
+            this.fiscalYearMonthsModifier = 0;
         }
         DrDatePickerService.prototype.getDisplayPrefix = function () {
             var formatCached = this.format$.getValue();
@@ -4120,6 +4121,94 @@
         DrDatePickerService.prototype.normalizeValue = function (value) {
             return value.replace(/d/g, 'D');
         };
+        /**
+         * Get quarter number for date according to fiscal year
+         *
+         * @param date
+         */
+        DrDatePickerService.prototype.getQuarterAccordingToFiscalYear = function (date) {
+            var fiscalMonth = this.fiscalYearMonthsModifier;
+            var dateMonth = date.month();
+            if (dateMonth < fiscalMonth) {
+                fiscalMonth -= 12;
+            }
+            return Math.trunc((date.month() - fiscalMonth) / 3) + 1;
+        };
+        /**
+         * Sets date to end of quarter in FY by passed quarter number
+         *
+         * @param date
+         * @param quarterNumber
+         */
+        DrDatePickerService.prototype.setEndOfQuarter = function (date, quarterNumber) {
+            date
+                .subtract(this.fiscalYearMonthsModifier, 'M')
+                .startOf('year')
+                .add(this.fiscalYearMonthsModifier + quarterNumber * 3 - 1, 'M')
+                .endOf('month');
+        };
+        /**
+         * Sets date to start of quarter in FY by passed quarter number
+         *
+         * @param date
+         * @param quarterNumber
+         */
+        DrDatePickerService.prototype.setStartOfQuarter = function (date, quarterNumber) {
+            date
+                .subtract(this.fiscalYearMonthsModifier, 'M')
+                .startOf('year')
+                .add(this.fiscalYearMonthsModifier + (quarterNumber - 1) * 3, 'M');
+        };
+        /**
+         * Sets date to end of current quarter (in which date is located) according to FY
+         *
+         * @param date
+         */
+        DrDatePickerService.prototype.setEndOfCurrentQuarter = function (date) {
+            this.setEndOfQuarter(date, this.getQuarterAccordingToFiscalYear(date));
+        };
+        /**
+         * Sets date to start of current quarter (in which date is located) according to FY
+         *
+         * @param date
+         */
+        DrDatePickerService.prototype.setStartOfCurrentQuarter = function (date) {
+            this.setStartOfQuarter(date, this.getQuarterAccordingToFiscalYear(date));
+        };
+        /**
+         * If date selection on this timeframe depends on Fiscal Year
+         *
+         * @param timeframe
+         */
+        DrDatePickerService.prototype.isTimeframeDependingOnFY = function (timeframe) {
+            return ___namespace.includes([exports.TimeframeOption.QUARTER, exports.TimeframeOption.YEAR], timeframe);
+        };
+        /**
+         * Subtract from date fiscal year shift months count
+         *
+         * @param date
+         */
+        DrDatePickerService.prototype.subtractFiscalYearMonthsFromDate = function (date) {
+            return this.getDateModifiedByFiscalMonths(date, true);
+        };
+        /**
+         * Add to date fiscal year shift months count
+         *
+         * @param date
+         */
+        DrDatePickerService.prototype.addFiscalYearMonthsToDate = function (date) {
+            return this.getDateModifiedByFiscalMonths(date);
+        };
+        /**
+         * Add or subtract depending on isRevert paremeter Fiscal year month shift
+         *
+         * @param date
+         * @param isSubtract
+         */
+        DrDatePickerService.prototype.getDateModifiedByFiscalMonths = function (date, isSubtract) {
+            if (isSubtract === void 0) { isSubtract = false; }
+            return date ? ___namespace.cloneDeep(date)[isSubtract ? 'subtract' : 'add'](this.fiscalYearMonthsModifier, 'month') : date;
+        };
         return DrDatePickerService;
     }());
     DrDatePickerService.decorators = [
@@ -4156,20 +4245,20 @@
                     title: 'Month',
                     value: exports.CalendarView.FOR_MONTHS,
                     format: this.datePickerService.formatConfig.month,
-                    periodLabel: function () { return String(moment$1(_this._calendar.activeDate).year()); }
+                    periodLabel: function () { return String(moment$1(_this._calendar.activeDate).utc().year()); }
                 }, {
                     timeframe: exports.TimeframeOption.QUARTER,
                     title: 'Quarter',
                     value: exports.CalendarView.FOR_QUARTERS,
                     format: this.datePickerService.formatConfig.quarter,
-                    periodLabel: function () { return String(moment$1(_this._calendar.activeDate).year()); }
+                    periodLabel: function () { return String(moment$1(_this.datePickerService.subtractFiscalYearMonthsFromDate(_this._calendar.activeDate)).utc().year()); }
                 }, {
                     timeframe: exports.TimeframeOption.YEAR,
                     title: 'Year',
                     value: exports.CalendarView.FOR_YEARS,
                     format: this.datePickerService.formatConfig.year,
                     periodLabel: function () {
-                        var currentYear = moment$1(_this._calendar.activeDate).year();
+                        var currentYear = moment$1(_this.datePickerService.subtractFiscalYearMonthsFromDate(_this._calendar.activeDate)).utc().year();
                         var startPeriod = Math.floor(currentYear / 24) * 24;
                         return startPeriod + '-' + (startPeriod + 23);
                     }
@@ -4191,12 +4280,25 @@
                 _calendar.currentView = _this.selectedTimeframe;
                 _this.setPeriodLabels();
                 if (_this.selectedTimeframe === exports.CalendarView.FOR_QUARTERS) {
-                    _this.selectedQuarter = moment$1(_this._calendar.activeDate).quarter();
+                    _this.selectedQuarter = _this.datePickerService.getQuarterAccordingToFiscalYear(_this._calendar.activeDate);
+                }
+            });
+            _calendar.viewChanged.pipe(operators.takeUntil(this._destroyed)).subscribe(function () {
+                _this.setPeriodLabels();
+                if (_calendar.multiYearView) {
+                    _this.transformDateInMultiyearViewAccordingToFY();
                 }
             });
-            _calendar.viewChanged.pipe(operators.takeUntil(this._destroyed)).subscribe(function () { return _this.setPeriodLabels(); });
             this.datePickerService.calendarInstance = _calendar;
         }
+        DrDatePickerCustomHeaderComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            setTimeout(function () {
+                if (_this._calendar.multiYearView) {
+                    _this.transformDateInMultiyearViewAccordingToFY();
+                }
+            });
+        };
         DrDatePickerCustomHeaderComponent.prototype.ngOnDestroy = function () {
             this._destroyed.next();
             this._destroyed.complete();
@@ -4222,7 +4324,7 @@
             var chosenTimeframeOption = this.timeframeOptions.filter(function (option) { return option.value === _this.selectedTimeframe; })[0];
             this.datePickerService.updateTimeframeAndFormat(chosenTimeframeOption.format);
             if (this.selectedTimeframe === exports.CalendarView.FOR_QUARTERS) {
-                this.selectedQuarter = moment$1(this._calendar.activeDate).quarter();
+                this.selectedQuarter = this.datePickerService.getQuarterAccordingToFiscalYear(this._calendar.activeDate);
             }
         };
         Object.defineProperty(DrDatePickerCustomHeaderComponent.prototype, "currentViewIsQuarter", {
@@ -4236,11 +4338,9 @@
             this._calendar.currentView = view;
         };
         DrDatePickerCustomHeaderComponent.prototype.onSelectQuarter = function (quarterNumber) {
-            var monthsInQuarter = 3;
-            this.selectedQuarter = moment$1(this._calendar.activeDate).quarter();
-            var unadaptedDate = this._dateAdapter.addCalendarMonths(this._calendar.activeDate, monthsInQuarter * (quarterNumber - this.selectedQuarter));
-            this._calendar.activeDate = unadaptedDate;
-            this.datePickerService.updatedQuarter$.next(moment$1(unadaptedDate));
+            this.selectedQuarter = quarterNumber;
+            this.datePickerService.setEndOfQuarter(this._calendar.activeDate, quarterNumber);
+            this.datePickerService.updatedQuarter$.next(this._calendar.activeDate);
             this.datePickerService.datePickerInstance.close();
         };
         DrDatePickerCustomHeaderComponent.prototype.pagingClicked = function (forward) {
@@ -4252,12 +4352,18 @@
             this._calendar.activeDate = this._dateAdapter[actionCall](this._calendar.activeDate, forward ? amount : -amount);
             this.setPeriodLabels();
         };
+        DrDatePickerCustomHeaderComponent.prototype.transformDateInMultiyearViewAccordingToFY = function () {
+            var multuYearView = this._calendar.multiYearView;
+            multuYearView._activeDate = this.datePickerService.subtractFiscalYearMonthsFromDate(multuYearView._activeDate);
+            multuYearView._selectedYear = multuYearView._activeDate.year();
+            multuYearView._init();
+        };
         return DrDatePickerCustomHeaderComponent;
     }());
     DrDatePickerCustomHeaderComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'dr-date-picker_custom-header.component',
-                    template: "<div *ngIf=\"datePickerService.isTimeframeSelectionEnabled\" class=\"dr-datepicker__timeframe-select__wrapper\">\n    <dr-select\n            class=\"dr-datepicker__timeframe-select\"\n            [(ngModel)]=\"selectedTimeframe\"\n            [items]=\"timeframeOptions | drShowTimeframePipe: datePickerService.availableTimeframes\"\n            bindLabel=\"title\"\n            bindValue=\"value\"\n            (ngModelChange)=\"setTimeframe()\">\n    </dr-select>\n</div>\n\n<div class=\"dr-date-paging\">\n    <div class=\"dr-date-paging flip-page-button\"\n         (click)=\"pagingClicked(false)\">\n        <i class=\"dr-icon-arrow-left presentation_buttons-navigate_input\"></i>\n    </div>\n    <span class=\"example-header-label\">\n        <span (click)=\"switchViewOnClickOnPeriodLabel(calendarView.FOR_MONTHS)\">{{periodMonthLabel + ' '}}</span>\n        <span (click)=\"switchViewOnClickOnPeriodLabel(calendarView.FOR_YEARS)\">{{periodYearLabel}}</span>\n    </span>\n    <div class=\"dr-date-paging flip-page-button\"\n         (click)=\"pagingClicked(true)\">\n        <i class=\"dr-icon-arrow-right presentation_buttons-navigate_input\"></i>\n    </div>\n</div>\n<div #quarterlyDatePicker class=\"dr-quarterly-datepicker\" *ngIf=\"currentViewIsQuarter\">\n    <div *ngFor=\"let quarter of quarters\"\n         class=\"quarter-selector\" (click)=\"onSelectQuarter(quarter)\"\n         [class]=\"quarter === selectedQuarter ? 'selected' : ''\"\n    >Q{{quarter}}</div>\n</div>\n\n",
+                    template: "<div *ngIf=\"datePickerService.isTimeframeSelectionEnabled\" class=\"dr-datepicker__timeframe-select__wrapper\">\n    <dr-select\n            class=\"dr-datepicker__timeframe-select\"\n            [(ngModel)]=\"selectedTimeframe\"\n            [items]=\"timeframeOptions | drShowTimeframePipe: datePickerService.availableTimeframes\"\n            bindLabel=\"title\"\n            bindValue=\"value\"\n            (ngModelChange)=\"setTimeframe()\">\n    </dr-select>\n</div>\n\n<div class=\"dr-date-paging\">\n    <div class=\"dr-date-paging flip-page-button\"\n         (click)=\"pagingClicked(false)\">\n        <i class=\"dr-icon-arrow-left presentation_buttons-navigate_input\"></i>\n    </div>\n    <span class=\"example-header-label\">\n        <span (click)=\"switchViewOnClickOnPeriodLabel(calendarView.FOR_MONTHS)\">{{ periodMonthLabel + ' ' }}</span>\n        <span (click)=\"switchViewOnClickOnPeriodLabel(calendarView.FOR_YEARS)\">{{ periodYearLabel }}</span>\n    </span>\n    <div class=\"dr-date-paging flip-page-button\"\n         (click)=\"pagingClicked(true)\">\n        <i class=\"dr-icon-arrow-right presentation_buttons-navigate_input\"></i>\n    </div>\n</div>\n<div #quarterlyDatePicker class=\"dr-quarterly-datepicker\" *ngIf=\"currentViewIsQuarter\">\n    <div *ngFor=\"let quarter of quarters\"\n         class=\"quarter-selector\" (click)=\"onSelectQuarter(quarter)\"\n         [class]=\"quarter === selectedQuarter ? 'selected' : ''\"\n    >Q{{quarter}}</div>\n</div>\n\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     styles: [":host{height:54px;align-items:center;font-family:\"Poppins\";font-style:normal;font-weight:600;font-size:14px;line-height:22px}.dr-datepicker__timeframe-select__wrapper{background-color:#f9faff;padding:16px 32px;border-radius:18px 18px 0 0}.dr-date-paging{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:16px 8px;grid-gap:4px;gap:4px}.dr-date-paging.flip-page-button{width:20px;height:20px;padding:0;color:#4e566c}.dr-date-paging.flip-page-button:hover{border-radius:50%;background:#f2f2fb;color:#4646ce}.example-header-label{cursor:pointer}.dr-quarterly-datepicker{display:flex;justify-content:space-between;padding:10px}.dr-quarterly-datepicker .quarter-selector{display:block;width:74px;height:40px;text-align:center;border-radius:40px;font-weight:400;padding-top:9px}.dr-quarterly-datepicker .quarter-selector:hover{background:#f2f2fb;color:#4646ce;font-weight:600;cursor:pointer}.dr-quarterly-datepicker .quarter-selector.selected{background-color:#4646ce;color:#f3f7ff;font-weight:600}\n"]
                 },] }
@@ -4283,6 +4389,7 @@
             // Whether to transform date, taking end, start, middle of preiod (i.e. set middle of month if timeframe='month')
             this.periodPosition = exports.DatePickerPeriodPosition.DEFAULT;
             this.placeholder = 'Select';
+            this.fiscalYearMonthsModifier = 0;
             this.calendarViewsTimeframeMapping = {
                 year: 'multi-year',
                 month: 'year',
@@ -4335,6 +4442,7 @@
             configurable: true
         });
         DrDatePickerComponent.prototype.ngAfterViewInit = function () {
+            this.datePickerService.fiscalYearMonthsModifier = this.fiscalYearMonthsModifier;
             this.datePickerService.datePickerInstance = this.datePicker;
             this.datePicker.startView = this.calendarViewsTimeframeMapping[this.datePickerService.timeframe];
         };
@@ -4350,14 +4458,43 @@
             var timeframe = this.datePickerService.timeframe;
             switch (this.periodPosition) {
                 case exports.DatePickerPeriodPosition.START_OF_PERIOD:
-                    this.innerValue.startOf(timeframe);
+                    if (this.datePickerService.timeframe === exports.TimeframeOption.QUARTER) {
+                        this.datePickerService.setStartOfCurrentQuarter(this.innerValue);
+                    }
+                    else if (this.datePickerService.timeframe === exports.TimeframeOption.YEAR) {
+                        this.datePickerService.setStartOfQuarter(this.innerValue, 1);
+                    }
+                    else {
+                        this.innerValue.startOf(timeframe);
+                    }
                     break;
                 case exports.DatePickerPeriodPosition.END_OF_PERIOD:
-                    this.innerValue.endOf(timeframe);
+                    if (this.datePickerService.timeframe === exports.TimeframeOption.QUARTER) {
+                        this.datePickerService.setEndOfCurrentQuarter(this.innerValue);
+                    }
+                    else if (this.datePickerService.timeframe === exports.TimeframeOption.YEAR) {
+                        this.datePickerService.setEndOfQuarter(this.innerValue, 4);
+                    }
+                    else {
+                        this.innerValue.endOf(timeframe);
+                    }
                     break;
                 case exports.DatePickerPeriodPosition.MIDDLE_OF_PERIOD:
-                    this.innerValue.startOf(timeframe);
-                    var endOfPeriod = this.innerValue.clone().endOf(timeframe);
+                    var endOfPeriod = void 0;
+                    if (this.datePickerService.timeframe === exports.TimeframeOption.QUARTER) {
+                        endOfPeriod = this.innerValue.clone();
+                        this.datePickerService.setStartOfCurrentQuarter(this.innerValue);
+                        this.datePickerService.setEndOfCurrentQuarter(endOfPeriod);
+                    }
+                    else if (this.datePickerService.timeframe === exports.TimeframeOption.YEAR) {
+                        endOfPeriod = this.innerValue.clone();
+                        this.datePickerService.setStartOfQuarter(this.innerValue, 1);
+                        this.datePickerService.setEndOfQuarter(endOfPeriod, 4);
+                    }
+                    else {
+                        this.innerValue.startOf(timeframe);
+                        endOfPeriod = this.innerValue.clone().endOf(timeframe);
+                    }
                     var diff = endOfPeriod.diff(this.innerValue, 'seconds');
                     this.innerValue.add(diff / 2 + 1, 'seconds');
                     break;
@@ -4367,6 +4504,9 @@
             }
         };
         DrDatePickerComponent.prototype.chosenPeriodHandler = function (chosenDate, timeframe) {
+            if (timeframe === exports.TimeframeOption.YEAR) {
+                chosenDate = this.datePickerService.addFiscalYearMonthsToDate(chosenDate);
+            }
             if (this.datePickerService.timeframe === exports.TimeframeOption.QUARTER && timeframe === exports.TimeframeOption.YEAR) {
                 this.datePickerService.calendarInstance.currentView = exports.CalendarView.FOR_QUARTERS;
                 this.datePickerService.calendarInstance.activeDate = chosenDate;
@@ -4435,6 +4575,7 @@
         max: [{ type: i0.Input }],
         periodPosition: [{ type: i0.Input }],
         placeholder: [{ type: i0.Input }],
+        fiscalYearMonthsModifier: [{ type: i0.Input }],
         datePicker: [{ type: i0.ViewChild, args: ['datePicker',] }]
     };
 
@@ -4495,8 +4636,12 @@
                 if (!this.value) {
                     return this.placeholder;
                 }
+                var displayValue = ___namespace.cloneDeep(this.value);
+                if (this.datePickerService.isTimeframeDependingOnFY(this.datePickerService.timeframe)) {
+                    displayValue = this.datePickerService.subtractFiscalYearMonthsFromDate(displayValue);
+                }
                 var formatCached = this.datePickerService.format$.getValue();
-                return this.datePickerService.getDisplayPrefix() + this.value.format(formatCached);
+                return this.datePickerService.getDisplayPrefix() + displayValue.format(formatCached);
             },
             enumerable: false,
             configurable: true
@@ -4653,14 +4798,15 @@
     TooltipInfoComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'dr-tooltip-info',
-                    template: "<div class=\"tooltip-info\">\n    <i *ngIf=\"data?.icon else defaultIcon\" class=\"fa\" [class]=\"data.icon\" [style.fontSize.px]=\"14\"\n       [style.margin.px]=\"12\" [style.color]=\"data?.iconColor || '#7B61FF'\"></i>\n    <div class=\"tooltip-info-content-wrapper\">\n        <div *ngIf=\"data?.title\" class=\"tooltip-info_header\">\n            <span>{{data.title}}</span>\n        </div>\n        <div *ngIf=\"data?.description\" class=\"tooltip-info_description\"\n             [class.tooltip-info_description-no-border]=\"!data.title\">\n            <ng-container *ngIf=\"!data.title\"></ng-container>\n            <span>{{data.description}}</span>\n        </div>\n    </div>\n</div>\n\n<ng-template #defaultIcon>\n    <ng-container *ngIf=\"!data.icon\">\n        <div class=\"default-icon\"></div>\n    </ng-container>\n</ng-template>\n",
+                    template: "<div class=\"tooltip-info\">\n    <i *ngIf=\"data?.icon else defaultIcon\" class=\"fa\" [class]=\"data.icon\" [style.fontSize.px]=\"14\"\n       [style.margin.px]=\"12\" [style.color]=\"data?.iconColor || '#7B61FF'\"></i>\n    <div class=\"tooltip-info-content-wrapper\">\n        <div *ngIf=\"data?.title\" class=\"tooltip-info_header\">\n            <span>{{data.title}}</span>\n        </div>\n        <div *ngIf=\"data?.description\" class=\"tooltip-info_description\"\n             [class.tooltip-info_description-no-border]=\"!data.title\">\n            <ng-container *ngIf=\"!data.title\"></ng-container>\n            <span *ngIf=\"!useDescriptionAsHTML\">{{data.description}}</span>\n            <div *ngIf=\"useDescriptionAsHTML\" [innerHTML]=\"data.description\"></div>\n        </div>\n    </div>\n</div>\n\n<ng-template #defaultIcon>\n    <ng-container *ngIf=\"!data.icon\">\n        <div class=\"default-icon\"></div>\n    </ng-container>\n</ng-template>\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     styles: [".tooltip-info{width:316px;display:flex}.tooltip-info-content-wrapper{display:flex;flex-direction:column;padding-top:10px}.tooltip-info_header{padding:0 16px 6px 0;font-weight:bold;font-size:14px;line-height:16px;letter-spacing:.25px;display:flex;justify-content:flex-start}.tooltip-info_header>i{margin-right:10px}.tooltip-info-content-wrapper{padding-top:10px}.tooltip-info_description{display:flex;align-items:flex-start;border-top:1px solid #aeb5bb;padding:12px 10px 10px 0;text-align:left;font-weight:normal;font-size:14px;line-height:22px}.tooltip-info_description-no-border{padding-top:0;border-top:none}.tooltip-info_description>i{margin-right:10px}:host.tooltip-info-medium .tooltip-info{max-width:272px}:host.tooltip-info-medium .tooltip-info-content-wrapper{padding-top:10px}:host.tooltip-info-medium .tooltip-info_header,:host.tooltip-info-medium .tooltip-info_description{min-height:unset;border-top:none;font-size:14px;line-height:22px}:host.tooltip-info-medium .tooltip-info_header{padding:10px 10px 0 0}:host.tooltip-info-medium .tooltip-info_description{padding:10px 12px 10px 0}:host.tooltip-info-medium .tooltip-info .default-icon:before{background:url(\"data:image/svg+xml,%3Csvg width%3D%2216%22 height%3D%2216%22 viewBox%3D%220 0 16 16%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E    %3Cpath d%3D%22M8.00008 2.66669C5.05341 2.66669 2.66675 5.05335 2.66675 8.00002C2.66675 10.9467 5.05341 13.3334 8.00008 13.3334C10.9467 13.3334 13.3334 10.9467 13.3334 8.00002C13.3334 5.05335 10.9467 2.66669 8.00008 2.66669ZM8.53341 10.6667H7.46675V7.46669H8.53341V10.6667ZM8.53341 6.40002H7.46675V5.33335H8.53341V6.40002Z%22          fill%3D%22%237B61FF%22%2F%3E%3C%2Fsvg%3E\") no-repeat;background-size:100% 100%;display:inline-block;height:20px;width:20px;content:\"\"}:host.tooltip-info-small .tooltip-info{width:auto}:host.tooltip-info-small .tooltip-info-content-wrapper{padding-top:10px}:host.tooltip-info-small .tooltip-info_header,:host.tooltip-info-small .tooltip-info_description{min-height:unset;border-top:none;font-size:14px;line-height:22px}:host.tooltip-info-small .tooltip-info_header{padding:0 10px 0 0}:host.tooltip-info-small .tooltip-info_description{padding:0 12px 10px 0}:host.tooltip-info-small .tooltip-info .default-icon:before{background:url(\"data:image/svg+xml,%3Csvg width%3D%2216%22 height%3D%2216%22 viewBox%3D%220 0 16 16%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E    %3Cpath d%3D%22M8.00008 2.66669C5.05341 2.66669 2.66675 5.05335 2.66675 8.00002C2.66675 10.9467 5.05341 13.3334 8.00008 13.3334C10.9467 13.3334 13.3334 10.9467 13.3334 8.00002C13.3334 5.05335 10.9467 2.66669 8.00008 2.66669ZM8.53341 10.6667H7.46675V7.46669H8.53341V10.6667ZM8.53341 6.40002H7.46675V5.33335H8.53341V6.40002Z%22          fill%3D%22%237B61FF%22%2F%3E%3C%2Fsvg%3E\") no-repeat;background-size:100% 100%;display:inline-block;height:20px;width:20px;content:\"\"}.default-icon{position:relative;width:18px;height:18px;margin:10px}.default-icon:before{background:url(\"data:image/svg+xml,%3Csvg width%3D%2216%22 height%3D%2216%22 viewBox%3D%220 0 16 16%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E    %3Cpath d%3D%22M8.00008 2.66669C5.05341 2.66669 2.66675 5.05335 2.66675 8.00002C2.66675 10.9467 5.05341 13.3334 8.00008 13.3334C10.9467 13.3334 13.3334 10.9467 13.3334 8.00002C13.3334 5.05335 10.9467 2.66669 8.00008 2.66669ZM8.53341 10.6667H7.46675V7.46669H8.53341V10.6667ZM8.53341 6.40002H7.46675V5.33335H8.53341V6.40002Z%22          fill%3D%22%237B61FF%22%2F%3E%3C%2Fsvg%3E\") no-repeat;background-size:100% 100%;display:inline-block;height:18px;width:18px;content:\"\"}\n"]
                 },] }
     ];
     TooltipInfoComponent.ctorParameters = function () { return []; };
     TooltipInfoComponent.propDecorators = {
-        data: [{ type: i0.Input }]
+        data: [{ type: i0.Input }],
+        useDescriptionAsHTML: [{ type: i0.Input }]
     };
 
     var TooltipInfoSimpleComponent = /** @class */ (function () {