@datarailsshared/datarailsshared 1.4.123 → 1.4.125

package/bundles/datarailsshared-datarailsshared.umd.js

@@ -933,6 +933,7 @@
     var DrTagComponent = /** @class */ (function () {
         function DrTagComponent() {
             this.dynamicTagValues = {};
+            this.connectedTags = [];
             this.tagChange = new i0.EventEmitter(); // Not emit value for dynamic tag
             this.dynamicTagChange = new i0.EventEmitter();
             this.dynamicTagAdd = new i0.EventEmitter();
@@ -1008,6 +1009,10 @@
             this.connectedTags = _.map(this.connectedTags, function (tag) {
                 if (tag.id === connectedDateTagConfig.id) {
                     tag.value = event.value;
+                    tag.locked = event.locked;
+                    if (connectedDateTagConfig.type === exports.TagTypes.DATE) {
+                        tag.label = event.label;
+                    }
                 }
                 return tag;
             });
@@ -1041,7 +1046,7 @@
                     _this.dateTag = {
                         type: tagConfig.type,
                         sub_type: tagConfig.options.sub_type,
-                        value: _.find(_this.connectedTags, { id: tagConfig.id }).value,
+                        value: (_.find(_this.connectedTags, { id: tagConfig.id }) || {}).value,
                     };
                 }
                 if (tagConfig.type === exports.TagTypes.LIST) {
@@ -1052,6 +1057,13 @@
                         value: (_a = tagConfig === null || tagConfig === void 0 ? void 0 : tagConfig.options) === null || _a === void 0 ? void 0 : _a.default_value,
                     };
                 }
+                if (!_.find(_this.connectedTags, { id: tagConfig.id })) {
+                    _this.connectedTags.push({
+                        id: tagConfig.id,
+                        name: tagConfig.name,
+                        value: undefined,
+                    });
+                }
             });
         };
         return DrTagComponent;
@@ -2660,6 +2672,7 @@
             this.viewContainerRef = viewContainerRef;
             this.elementRef = elementRef;
             this.popoverRef = popoverRef;
+            this.popoverOpened = new i0.EventEmitter();
             this.class = '';
             this.isContentTemplate = false;
             this.popover = true;
@@ -2689,8 +2702,35 @@
             if (this.alignment === 'host') {
                 this[getAlignmentDimension(this.position)] = '100%';
             }
+            this.popoverOpened.emit();
+            this.repositionToNewContainerAndFreeze();
             this.cdr.detectChanges();
         };
+        /**
+         * Removing popover element from cdk-overlay and attach to provided container after element is positioned
+         * is required for specific case of preserving popover at same position on document while scroll (not fixed)
+         *
+         * TODO: implement more neat, transparent and Angular way solution: i.e. create another service (or extend existiong one)
+         * without attaching component to cdk Overlay and instead positioning it to element passed in directive input parameter
+         */
+        DrPopoverComponent.prototype.repositionToNewContainerAndFreeze = function () {
+            var _this = this;
+            var newContainer = !!this.freezeToContainerSelector && document.querySelector(this.freezeToContainerSelector);
+            if (newContainer) {
+                // waiting until element is positioned on overlay
+                setTimeout(function () {
+                    var element = _this.elementRef.nativeElement;
+                    if (!element.closest('.cdk-overlay-container'))
+                        return;
+                    var position = element.getBoundingClientRect();
+                    var newContainerPosition = newContainer.getBoundingClientRect();
+                    element.style.position = 'absolute';
+                    element.style.top = newContainer.scrollTop + position.top - newContainerPosition.top + "px";
+                    element.style.left = newContainerPosition.left + position.left + "px";
+                    newContainer.appendChild(element);
+                });
+            }
+        };
         return DrPopoverComponent;
     }());
     DrPopoverComponent.decorators = [
@@ -2712,6 +2752,7 @@
         { type: DrPopoverRef }
     ]; };
     DrPopoverComponent.propDecorators = {
+        popoverOpened: [{ type: i0.Output }],
         content: [{ type: i0.Input }],
         contentContext: [{ type: i0.Input }],
         class: [{ type: i0.Input }],
@@ -2719,6 +2760,7 @@
         manualClosing: [{ type: i0.Input }],
         alignment: [{ type: i0.Input }],
         position: [{ type: i0.Input }],
+        freezeToContainerSelector: [{ type: i0.Input }],
         popoverContainer: [{ type: i0.ViewChild, args: ['popoverContainer', { read: i0.ElementRef, static: true },] }],
         width: [{ type: i0.HostBinding, args: ['style.width',] }],
         height: [{ type: i0.HostBinding, args: ['style.height',] }],
@@ -2743,7 +2785,7 @@
             return popoverRef;
         };
         DrPopoverService.prototype.attachOverlayContainer = function (content, _a, overlayRef, popoverRef) {
-            var contentContext = _a.contentContext, position = _a.position, elementClass = _a.class, manualClosing = _a.manualClosing, hostRef = _a.hostRef, alignment = _a.alignment;
+            var contentContext = _a.contentContext, position = _a.position, elementClass = _a.class, manualClosing = _a.manualClosing, hostRef = _a.hostRef, alignment = _a.alignment, freezeToContainerSelector = _a.freezeToContainerSelector;
             var componentPortal = new portal.ComponentPortal(DrPopoverComponent, null, this.createInjector(popoverRef));
             var contentRef = overlayRef.attach(componentPortal);
             popoverRef.componentRef = contentRef;
@@ -2754,6 +2796,7 @@
             contentRef.instance.hostRef = hostRef;
             contentRef.instance.alignment = alignment;
             contentRef.instance.position = position;
+            contentRef.instance.freezeToContainerSelector = freezeToContainerSelector;
         };
         DrPopoverService.prototype.createOverlay = function (popoverModel) {
             var overlayConfig = this.getOverlayConfig(popoverModel);
@@ -2837,6 +2880,7 @@
             this.manualClosing = { enabled: false };
             // eslint-disable-next-line
             this.popoverClose = new i0.EventEmitter();
+            this.popoverOpened = new i0.EventEmitter();
             // eslint-disable-next-line
             this.showStateChange = new i0.EventEmitter();
         }
@@ -2867,12 +2911,16 @@
                 position: this.position,
                 contentContext: this.contentContext,
                 alignment: this.alignment,
+                freezeToContainerSelector: this.freezeToContainerSelector
             });
             popoverRef.onClose.pipe(operators.first()).subscribe(function (res) {
                 _this.closePopover();
                 _this.popoverClose.emit(res);
                 _this.showStateChange.emit({ isShown: !!_this.popoverRef });
             });
+            popoverRef.componentRef.instance.popoverOpened.pipe(operators.first()).subscribe(function () {
+                _this.popoverOpened.emit();
+            });
         };
         DrPopoverDirective.prototype.ngOnDestroy = function () {
             this.closePopover();
@@ -2897,7 +2945,9 @@
         manualClosing: [{ type: i0.Input, args: ['drPopoverManualClosing',] }],
         alignment: [{ type: i0.Input, args: ['drPopoverAlignment',] }],
         disabled: [{ type: i0.Input, args: ['drPopoverDisabled',] }],
+        freezeToContainerSelector: [{ type: i0.Input, args: ['drPopoverFreezeToContainerSelector',] }],
         popoverClose: [{ type: i0.Output, args: ['drPopoverClose',] }],
+        popoverOpened: [{ type: i0.Output, args: ['drPopoverOpened',] }],
         showStateChange: [{ type: i0.Output, args: ['drPopoverShowStateChange',] }],
         togglePopover: [{ type: i0.HostListener, args: ['click',] }]
     };
@@ -3282,6 +3332,7 @@
     DrTabComponent.propDecorators = {
         label: [{ type: i0.Input }],
         disabled: [{ type: i0.Input }],
+        tooltip: [{ type: i0.Input }],
         contentTemplate: [{ type: i0.ViewChild, args: [i0.TemplateRef,] }]
     };
 
@@ -3301,8 +3352,8 @@
     DrTabsComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'dr-tabs',
-                    template: "<mat-tab-group disableRipple [selectedIndex]=\"selectedTab\"\n               (selectedIndexChange)=\"selectedIndexChange($event)\"\n               [class.with-radio]=\"withRadio\"\n               [class.vertical]=\"vertical\"\n               [class.no-tab-labels-padding]=\"noTabLabelsPadding\"\n               [class.no-body-padding]=\"noBodyPadding\"\n               [animationDuration]=\" vertical ? '0ms' : '500ms'\">\n    <mat-tab *ngFor=\"let tab of tabsContentList; let index = index\" label=\"{{tab.label}}\" [disabled]=\"tab.disabled\">\n        <ng-container *ngIf=\"withRadio\">\n            <ng-template mat-tab-label>\n                <dr-radio-button [value]=\"index\"\n                                 [(ngModel)]=\"selectedTab\">\n                </dr-radio-button>\n                {{tab.label}}\n            </ng-template>\n        </ng-container>\n\n        <ng-container *ngTemplateOutlet=\"tab.contentTemplate\"></ng-container>\n    </mat-tab>\n</mat-tab-group>\n",
-                    styles: [":host{width:100%}:host ::ng-deep .mat-tab-group,:host ::ng-deep .mat-tab-body-wrapper{height:100%}:host ::ng-deep .mat-tab-group{font-family:\"Poppins\",sans-serif}:host ::ng-deep .mat-tab-nav-bar,:host ::ng-deep .mat-tab-header{border-bottom:1px solid #d5dae5}:host ::ng-deep .mat-tab-labels{padding:0 17px}:host ::ng-deep .mat-tab-label{padding:0 8px;min-width:0;height:38px;opacity:1}:host ::ng-deep .mat-tab-label:not(:last-child){margin-right:21px}:host ::ng-deep .mat-tab-label-active .mat-tab-label-content{color:#4646ce;font-weight:700}:host ::ng-deep .mat-tab-label-content{font-weight:400;font-size:14px;line-height:22px;color:#51566f;font-family:\"Poppins\",sans-serif}:host ::ng-deep .mat-ink-bar{height:3px;border-radius:5px;background-color:#4646ce!important}:host ::ng-deep .with-radio .mat-tab-labels{padding:0;margin-bottom:8px}:host ::ng-deep .with-radio .mat-tab-label{padding:8px 16px;min-width:0;flex-grow:1;justify-content:start;height:38px;opacity:1}:host ::ng-deep .with-radio .mat-tab-label:not(:last-child){margin-right:8px}:host ::ng-deep .with-radio .mat-tab-label-active{background:#f6f7f8;border-radius:3px}:host ::ng-deep .with-radio .mat-tab-label-active .mat-tab-label-content{color:#0c142b;font-weight:600}:host ::ng-deep .with-radio .mat-ink-bar{display:none!important}:host ::ng-deep .vertical.mat-tab-group{flex-direction:row}:host ::ng-deep .vertical .mat-tab-header{border-bottom:none}:host ::ng-deep .vertical .mat-tab-label-container{border-right:1px solid #d5dae5}:host ::ng-deep .vertical .mat-tab-label-container .mat-tab-labels{flex-direction:column;padding:0}:host ::ng-deep .vertical .mat-ink-bar{display:none!important}:host ::ng-deep .vertical .mat-tab-label{border-bottom:1px solid #d5dae5;margin:0!important;justify-content:flex-start;padding:1rem 2rem;height:40px}:host ::ng-deep .vertical .mat-tab-label:before{content:\"\";width:2px;height:100%;display:flex;position:absolute;top:0;left:0}:host ::ng-deep .vertical .mat-tab-label-active{background-color:#f3f7ff}:host ::ng-deep .vertical .mat-tab-label-active:before{background-color:#151a41}:host ::ng-deep .vertical .mat-tab-label-active .mat-tab-label-content{font-weight:normal;color:#151a41}:host ::ng-deep .vertical .mat-tab-body-wrapper{width:100%;padding:16px}:host ::ng-deep mat-tab-group.no-body-padding .mat-tab-body-wrapper{padding:0}:host ::ng-deep mat-tab-group.no-tab-labels-padding .mat-tab-labels{padding:0}\n"]
+                    template: "<mat-tab-group disableRipple [selectedIndex]=\"selectedTab\"\n               (selectedIndexChange)=\"selectedIndexChange($event)\"\n               [class.with-radio]=\"withRadio\"\n               [class.vertical]=\"vertical\"\n               [class.no-tab-labels-padding]=\"noTabLabelsPadding\"\n               [class.no-body-padding]=\"noBodyPadding\"\n               [animationDuration]=\" vertical ? '0ms' : '500ms'\">\n    <mat-tab *ngFor=\"let tab of tabsContentList; let index = index\" label=\"{{ tab.label }}\" [disabled]=\"tab.disabled\">\n        <ng-container *ngIf=\"withRadio\">\n            <ng-template mat-tab-label>\n                <dr-radio-button [value]=\"index\"\n                                 [(ngModel)]=\"selectedTab\">\n                </dr-radio-button>\n                {{ tab.label }}\n            </ng-template>\n        </ng-container>\n        <ng-container *ngIf=\"tab.tooltip && !withRadio\">\n            <ng-template mat-tab-label>\n                <label class=\"cursor-pointer\" [drTooltip]=\"tab.tooltip\">{{ tab.label }}</label>\n            </ng-template>\n        </ng-container>\n        <ng-container *ngTemplateOutlet=\"tab.contentTemplate\"></ng-container>\n    </mat-tab>\n</mat-tab-group>\n",
+                    styles: [":host{width:100%}:host .cursor-pointer{cursor:pointer}:host ::ng-deep .mat-tab-group,:host ::ng-deep .mat-tab-body-wrapper{height:100%}:host ::ng-deep .mat-tab-group{font-family:\"Poppins\",sans-serif}:host ::ng-deep .mat-tab-nav-bar,:host ::ng-deep .mat-tab-header{border-bottom:1px solid #d5dae5}:host ::ng-deep .mat-tab-labels{padding:0 17px}:host ::ng-deep .mat-tab-label{padding:0 8px;min-width:0;height:38px;opacity:1}:host ::ng-deep .mat-tab-label:not(:last-child){margin-right:21px}:host ::ng-deep .mat-tab-label-active .mat-tab-label-content{color:#4646ce;font-weight:700}:host ::ng-deep .mat-tab-label-content{font-weight:400;font-size:14px;line-height:22px;color:#51566f;font-family:\"Poppins\",sans-serif}:host ::ng-deep .mat-ink-bar{height:3px;border-radius:5px;background-color:#4646ce!important}:host ::ng-deep .with-radio .mat-tab-labels{padding:0;margin-bottom:8px}:host ::ng-deep .with-radio .mat-tab-label{padding:8px 16px;min-width:0;flex-grow:1;justify-content:start;height:38px;opacity:1}:host ::ng-deep .with-radio .mat-tab-label:not(:last-child){margin-right:8px}:host ::ng-deep .with-radio .mat-tab-label-active{background:#f6f7f8;border-radius:3px}:host ::ng-deep .with-radio .mat-tab-label-active .mat-tab-label-content{color:#0c142b;font-weight:600}:host ::ng-deep .with-radio .mat-ink-bar{display:none!important}:host ::ng-deep .vertical.mat-tab-group{flex-direction:row}:host ::ng-deep .vertical .mat-tab-header{border-bottom:none}:host ::ng-deep .vertical .mat-tab-label-container{border-right:1px solid #d5dae5}:host ::ng-deep .vertical .mat-tab-label-container .mat-tab-labels{flex-direction:column;padding:0}:host ::ng-deep .vertical .mat-ink-bar{display:none!important}:host ::ng-deep .vertical .mat-tab-label{border-bottom:1px solid #d5dae5;margin:0!important;justify-content:flex-start;padding:1rem 2rem;height:40px}:host ::ng-deep .vertical .mat-tab-label:before{content:\"\";width:2px;height:100%;display:flex;position:absolute;top:0;left:0}:host ::ng-deep .vertical .mat-tab-label-active{background-color:#f3f7ff}:host ::ng-deep .vertical .mat-tab-label-active:before{background-color:#151a41}:host ::ng-deep .vertical .mat-tab-label-active .mat-tab-label-content{font-weight:normal;color:#151a41}:host ::ng-deep .vertical .mat-tab-body-wrapper{width:100%;padding:16px}:host ::ng-deep mat-tab-group.no-body-padding .mat-tab-body-wrapper{padding:0}:host ::ng-deep mat-tab-group.no-tab-labels-padding .mat-tab-labels{padding:0}\n"]
                 },] }
     ];
     DrTabsComponent.ctorParameters = function () { return []; };
@@ -5471,7 +5522,8 @@
                         tabs.MatTabsModule,
                         forms.FormsModule,
                         forms.ReactiveFormsModule,
-                        DrInputsModule
+                        DrInputsModule,
+                        DrTooltipModule
                     ],
                     exports: [
                         DrTabsComponent,