@bizdoc/core 1.14.6 → 1.14.8

package/fesm2020/bizdoc-core.mjs

@@ -838,10 +838,10 @@ var OpenPolicy;
     OpenPolicy[OpenPolicy["Defer"] = 4] = "Defer";
     OpenPolicy[OpenPolicy["Pinnable"] = 8] = "Pinnable";
     OpenPolicy[OpenPolicy["Stretch"] = 16] = "Stretch";
-    OpenPolicy[OpenPolicy["Tab"] = 32] = "Tab";
-    OpenPolicy[OpenPolicy["Dialog"] = 96] = "Dialog";
-    OpenPolicy[OpenPolicy["Expandable"] = 128] = "Expandable";
-    OpenPolicy[OpenPolicy["Toggle"] = 256] = "Toggle";
+    OpenPolicy[OpenPolicy["Expandable"] = 32] = "Expandable";
+    OpenPolicy[OpenPolicy["Toggle"] = 64] = "Toggle";
+    OpenPolicy[OpenPolicy["Tab"] = 128] = "Tab";
+    OpenPolicy[OpenPolicy["Dialog"] = 384] = "Dialog";
     OpenPolicy[OpenPolicy["Dismissable"] = 512] = "Dismissable";
 })(OpenPolicy || (OpenPolicy = {}));
 const DEFAULT_POLICY = OpenPolicy.Pane;
@@ -6246,6 +6246,7 @@ class QueryParamNavigation extends NavigationPaneBase {
         this.queryParams = queryParams;
     }
 }
+/** */
 class PaneRef {
     constructor(component, injector, _options) {
         this.component = component;
@@ -6311,8 +6312,8 @@ class PaneRef {
         return this.parent === pane; //||
         //  (this.path && pane.path && this.path.startsWith(pane.path));
     }
-    refresh() {
-        this._comm$.next('refresh');
+    recycle() {
+        this._comm$.next('recycle');
     }
     focus() {
         this._comm$.next('focus');
@@ -7068,6 +7069,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
 
 class RouterImpl {
 }
+/** desktop */
 class PaneRouter extends RouterImpl {
     constructor(_router) {
         super();
@@ -7082,6 +7084,7 @@ PaneRouter.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version:
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: PaneRouter, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: PanesRouter }]; } });
+/** mobile */
 class NgRouter extends RouterImpl {
     constructor(_router) {
         super();
@@ -8442,21 +8445,30 @@ class GuideComponent {
         this._overlay = _overlay;
         this._ngRouter = _ngRouter;
         this._overlayRef = _overlayRef;
-        this.index = 0;
+        this.index = -1;
         this.count = this._data.steps.length;
         this.working = true;
     }
     ngOnInit() {
-        this._move(0);
+        if (this._data.name) {
+            const lastindex = localStorage.getItem(this._data.name + '_guide_step');
+            if (lastindex) {
+                this.index = Number.parseInt(lastindex);
+            }
+        }
+        this._moveBy(1);
     }
     /**
      *
-     * @param i
+     * @param steps
      */
-    _move(i) {
-        const index = this.index + i;
-        if (index < 0 || index == this.count)
+    _moveBy(steps) {
+        const index = this.index + steps;
+        if (index < 0 || index > this.count - 1) {
+            localStorage.removeItem(this._data.name + '_guide_step');
             return;
+        }
+        this._data.name && localStorage.setItem(this._data.name + '_guide_step', this.index.toString());
         this.working = true;
         const step = this._data.steps[index];
         const { selector, position, navigate, simulate } = step, promisses = [];
@@ -8467,8 +8479,11 @@ class GuideComponent {
         let positionStrategy;
         if (selector) {
             const element = document.querySelector(selector);
-            if (!element)
-                throw `Guide ${this._data.name} step ${this.index} selector '${selector}' not found.`;
+            if (!element) {
+                console.warn(`Guide ${this._data.name} selector '${selector}' not found. skipping.`);
+                this._moveBy(steps);
+                return;
+            }
             let positions;
             switch (position) {
                 case 'Above':
@@ -8522,10 +8537,10 @@ class GuideComponent {
         if (!this.working)
             switch (evt.keyCode) {
                 case LEFT_ARROW:
-                    this._move(this._session.direction === 'ltr' ? -1 : 1);
+                    this._moveBy(this._session.direction === 'ltr' ? -1 : 1);
                     break;
                 case RIGHT_ARROW:
-                    this._move(this._session.direction === 'ltr' ? 1 : -1);
+                    this._moveBy(this._session.direction === 'ltr' ? 1 : -1);
                     break;
                 case ESCAPE:
                     this.close();
@@ -8534,17 +8549,17 @@ class GuideComponent {
             }
     }
     next() {
-        this._move(1);
+        this._moveBy(1);
     }
     prev() {
-        this._move(-1);
+        this._moveBy(-1);
     }
     close() {
         this._overlayRef.detach();
     }
 }
 GuideComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: GuideComponent, deps: [{ token: TOUR_TOKEN }, { token: SessionService }, { token: i1$4.Overlay }, { token: i1$6.Router }, { token: i1$4.OverlayRef }], target: i0.ɵɵFactoryTarget.Component });
-GuideComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: GuideComponent, selector: "ng-component", host: { listeners: { "window:keydown": "keydown($event)" } }, ngImport: i0, template: "<div class=\"container\" [style.display]=\"step ? '': 'none'\" cdkTrapFocus>\r\n  <div fxLayout=\"column\" class=\"content\">\r\n    <div fxLayout=\"row\">\r\n      <h2 *ngIf=\"step?.title\" class=\"mat-h2\">{{step?.title}}</h2>\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button (click)=\"close()\" *ngIf=\"index < count - 1\"><mat-icon>close</mat-icon></button>\r\n    </div>\r\n    <p class=\"mat-body\" [innerHTML]=\"step?.content | sanitizeHtml\">\r\n    </p>\r\n    <div fxLayout=\"row\">\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button (click)=\"prev()\" [disabled]=\"index === 0 || working\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_left</mat-icon></button>\r\n      <button mat-icon-button (click)=\"next()\" [disabled]=\"index === count - 1 || working\" cdkFocusInitial><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_right</mat-icon></button>\r\n      <button mat-button (click)=\"close()\" *ngIf=\"index === count - 1\">{{'GuideFinish'|translate}}</button>\r\n    </div>\r\n  </div>\r\n  <div class=\"tooltip-container\">\r\n    <div class=\"tooltip\"></div>\r\n  </div>\r\n</div>\r\n", components: [{ type: i7$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i23.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "sanitizeHtml": SanitizeHtmlPipe, "translate": TranslatePipe }, animations: [trigger('body', [
+GuideComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: GuideComponent, selector: "ng-component", host: { listeners: { "window:keydown": "keydown($event)" } }, ngImport: i0, template: "<div class=\"container\" [style.display]=\"step ? '': 'none'\" cdkTrapFocus>\r\n  <div fxLayout=\"column\" class=\"content\">\r\n    <div fxLayout=\"row\">\r\n      <h2 *ngIf=\"step?.title\" class=\"mat-h2\">{{step?.title}}</h2>\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button (click)=\"close()\" *ngIf=\"index < count - 1\"><mat-icon>close</mat-icon></button>\r\n    </div>\r\n    <p class=\"mat-body\" [innerHTML]=\"step?.content | sanitizeHtml\">\r\n    </p>\r\n    <div fxLayout=\"row\">\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button (click)=\"prev()\" [disabled]=\"index < 1 || working\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_left</mat-icon></button>\r\n      <button mat-icon-button (click)=\"next()\" [disabled]=\"index >= count - 1 || working\" cdkFocusInitial><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_right</mat-icon></button>\r\n      <button mat-button (click)=\"close()\" *ngIf=\"index >= count - 1\">{{'GuideFinish'|translate}}</button>\r\n    </div>\r\n  </div>\r\n  <div class=\"tooltip-container\">\r\n    <div class=\"tooltip\"></div>\r\n  </div>\r\n</div>\r\n", components: [{ type: i7$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i23.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "sanitizeHtml": SanitizeHtmlPipe, "translate": TranslatePipe }, animations: [trigger('body', [
             state('here', style({ width: '*', height: '*' })),
             transition('*<=>*', animate('250ms', style({})))
         ])] });
@@ -8553,7 +8568,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
             args: [{ animations: [trigger('body', [
                             state('here', style({ width: '*', height: '*' })),
                             transition('*<=>*', animate('250ms', style({})))
-                        ])], template: "<div class=\"container\" [style.display]=\"step ? '': 'none'\" cdkTrapFocus>\r\n  <div fxLayout=\"column\" class=\"content\">\r\n    <div fxLayout=\"row\">\r\n      <h2 *ngIf=\"step?.title\" class=\"mat-h2\">{{step?.title}}</h2>\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button (click)=\"close()\" *ngIf=\"index < count - 1\"><mat-icon>close</mat-icon></button>\r\n    </div>\r\n    <p class=\"mat-body\" [innerHTML]=\"step?.content | sanitizeHtml\">\r\n    </p>\r\n    <div fxLayout=\"row\">\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button (click)=\"prev()\" [disabled]=\"index === 0 || working\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_left</mat-icon></button>\r\n      <button mat-icon-button (click)=\"next()\" [disabled]=\"index === count - 1 || working\" cdkFocusInitial><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_right</mat-icon></button>\r\n      <button mat-button (click)=\"close()\" *ngIf=\"index === count - 1\">{{'GuideFinish'|translate}}</button>\r\n    </div>\r\n  </div>\r\n  <div class=\"tooltip-container\">\r\n    <div class=\"tooltip\"></div>\r\n  </div>\r\n</div>\r\n" }]
+                        ])], template: "<div class=\"container\" [style.display]=\"step ? '': 'none'\" cdkTrapFocus>\r\n  <div fxLayout=\"column\" class=\"content\">\r\n    <div fxLayout=\"row\">\r\n      <h2 *ngIf=\"step?.title\" class=\"mat-h2\">{{step?.title}}</h2>\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button (click)=\"close()\" *ngIf=\"index < count - 1\"><mat-icon>close</mat-icon></button>\r\n    </div>\r\n    <p class=\"mat-body\" [innerHTML]=\"step?.content | sanitizeHtml\">\r\n    </p>\r\n    <div fxLayout=\"row\">\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button (click)=\"prev()\" [disabled]=\"index < 1 || working\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_left</mat-icon></button>\r\n      <button mat-icon-button (click)=\"next()\" [disabled]=\"index >= count - 1 || working\" cdkFocusInitial><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_right</mat-icon></button>\r\n      <button mat-button (click)=\"close()\" *ngIf=\"index >= count - 1\">{{'GuideFinish'|translate}}</button>\r\n    </div>\r\n  </div>\r\n  <div class=\"tooltip-container\">\r\n    <div class=\"tooltip\"></div>\r\n  </div>\r\n</div>\r\n" }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [TOUR_TOKEN]
@@ -9293,7 +9308,7 @@ class ComposePaneComponent {
         this.form.save().subscribe();
     }
     saved() {
-        this._pane.refresh();
+        this._pane.recycle();
     }
     navComments() {
         this._navigate('comments').then(paneRef => {
@@ -19379,7 +19394,7 @@ class SlotsComponent {
                 else
                     this.expandPane();
                 break;
-            case 'refresh': {
+            case 'recycle': {
                 const state = this._constructHistoryState();
                 history.replaceState(state, '');
                 break;
@@ -20109,11 +20124,12 @@ const EXCEL_ICON = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
 class BrokenPage {
 }
 BrokenPage.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: BrokenPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BrokenPage.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: BrokenPage, selector: "ng-component", ngImport: i0, template: '', isInline: true });
+BrokenPage.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: BrokenPage, selector: "ng-component", host: { classAttribute: "mat-app-background" }, ngImport: i0, template: '', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: BrokenPage, decorators: [{
             type: Component,
             args: [{
-                    template: ''
+                    template: '',
+                    host: { class: 'mat-app-background' }
                 }]
         }] });
 class BizDocApp {
@@ -27373,6 +27389,55 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
                 args: ['nameInput', { static: true, read: ElementRef }]
             }] } });
 
+/**  */
+class HelpTipComponent {
+    constructor(_guide) {
+        this._guide = _guide;
+    }
+    ngOnInit() {
+        this.showTip = localStorage.getItem(this.name + '-tip') !== '1';
+        const guide = this._guide.guides.find(g => g.name === this.name);
+        this._message = guide.title;
+    }
+    open(evt) {
+        this._guide.start(this.name);
+    }
+    dismiss() {
+        localStorage.setItem(this.name + 'tip', '1');
+        this.showTip = false;
+    }
+}
+HelpTipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: HelpTipComponent, deps: [{ token: GuideService }], target: i0.ɵɵFactoryTarget.Component });
+HelpTipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: HelpTipComponent, selector: "bizdoc-help-tip", inputs: { name: "name" }, ngImport: i0, template: `
+  <p fxLayout="row" class="form-help-tip" *ngIf="showTip">
+    <mat-icon>help_outline</mat-icon> &nbsp;<span (click)="open($event)" [innerHTML]="'HelpTip'|translate: _message" class="mat-body-1"></span>
+    <button mat-icon-button (click)="dismiss()" [bizdocTooltip]="'Dismiss'|translate"><mat-icon inline>close</mat-icon></button>
+  </p>
+`, isInline: true, styles: [".form-help-tip{align-items:center;border:1px rgb(0 0 0 / 38%) solid;margin:10px;border-radius:3px;padding:0 8px}\n"], components: [{ type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i7$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i23.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }], pipes: { "translate": TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: HelpTipComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `
+  <p fxLayout="row" class="form-help-tip" *ngIf="showTip">
+    <mat-icon>help_outline</mat-icon> &nbsp;<span (click)="open($event)" [innerHTML]="'HelpTip'|translate: _message" class="mat-body-1"></span>
+    <button mat-icon-button (click)="dismiss()" [bizdocTooltip]="'Dismiss'|translate"><mat-icon inline>close</mat-icon></button>
+  </p>
+`,
+                    styles: [`
+.form-help-tip {
+  align-items: center;
+border: 1px rgb(0 0 0 / 38%) solid;
+  margin: 10px;
+  border-radius: 3px 3px;
+  padding: 0 8px;
+}
+`],
+                    selector: 'bizdoc-help-tip'
+                }]
+        }], ctorParameters: function () { return [{ type: GuideService }]; }, propDecorators: { name: [{
+                type: Input
+            }] } });
+
 /** configuration componenets */
 const CORE_COMPONENTS = [CubeCompareWidget, CubeParallelViewComponent, CubeExploreViewComponent, CubeChartViewComponent, CubeDocumentSumComponent, CubeDocumentMatrixComponent, CubeDocumentViewComponent, CubePivotViewComponent, TimelineViewComponent,
     SubstitutionComponent, MoveToActionComponent, AssignActionComponent, ReturnActionComponent, ExploreDocumentComponent,
@@ -27409,7 +27474,7 @@ class SharedModule {
     }
 }
 SharedModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SharedModule, declarations: [CubeCompareWidget, CubeUsageComponent, CubeDocumentsComponent, FileInput, DateFormatPipe, CalendarPipe, DifferencePipe, DurationPipe, TimeAgoPipe,
+SharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SharedModule, declarations: [HelpTipComponent, CubeCompareWidget, CubeUsageComponent, CubeDocumentsComponent, FileInput, DateFormatPipe, CalendarPipe, DifferencePipe, DurationPipe, TimeAgoPipe,
         CheckboxComponent, CubeParallelComponent, CubeSumComponent, CubeParallelViewComponent, CubeChartViewComponent, CubeExploreViewComponent, CubeDocumentSumComponent, ExploreItemImplComponent, DocumentInfoComponent, DocumentViewsComponent, ViewItemComponent, CubeDocumentMatrixComponent, CubeDocumentViewComponent, CubePivotViewComponent, ActionPicker, HtmlSimplePipe, QuickCommentComponent,
         DurationFormatPipe, CombinationPicker, CombinationPickerBody, CombinationPool, TimelineViewComponent,
         MatIconAnimate, DateRangePipe, AgoPipe, ColorPicker, StateDirective, BrokenPage,
@@ -27551,7 +27616,7 @@ SharedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SharedModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [CubeCompareWidget, CubeUsageComponent, CubeDocumentsComponent, FileInput, DateFormatPipe, CalendarPipe, DifferencePipe, DurationPipe, TimeAgoPipe,
+                    declarations: [HelpTipComponent, CubeCompareWidget, CubeUsageComponent, CubeDocumentsComponent, FileInput, DateFormatPipe, CalendarPipe, DifferencePipe, DurationPipe, TimeAgoPipe,
                         CheckboxComponent, CubeParallelComponent, CubeSumComponent, CubeParallelViewComponent, CubeChartViewComponent, CubeExploreViewComponent, CubeDocumentSumComponent, ExploreItemImplComponent, DocumentInfoComponent, DocumentViewsComponent, ViewItemComponent, CubeDocumentMatrixComponent, CubeDocumentViewComponent, CubePivotViewComponent, ActionPicker, HtmlSimplePipe, QuickCommentComponent,
                         DurationFormatPipe, CombinationPicker, CombinationPickerBody, CombinationPool, TimelineViewComponent,
                         MatIconAnimate, DateRangePipe, AgoPipe, ColorPicker, StateDirective, BrokenPage,