@datarailsshared/datarailsshared 1.4.123 → 1.4.125

package/fesm2015/datarailsshared-datarailsshared.js

@@ -605,6 +605,7 @@ var TagTypes;
 class DrTagComponent {
     constructor() {
         this.dynamicTagValues = {};
+        this.connectedTags = [];
         this.tagChange = new EventEmitter(); // Not emit value for dynamic tag
         this.dynamicTagChange = new EventEmitter();
         this.dynamicTagAdd = new EventEmitter();
@@ -679,6 +680,10 @@ class DrTagComponent {
         this.connectedTags = map(this.connectedTags, tag => {
             if (tag.id === connectedDateTagConfig.id) {
                 tag.value = event.value;
+                tag.locked = event.locked;
+                if (connectedDateTagConfig.type === TagTypes.DATE) {
+                    tag.label = event.label;
+                }
             }
             return tag;
         });
@@ -711,7 +716,7 @@ class DrTagComponent {
                 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 === TagTypes.LIST) {
@@ -722,6 +727,13 @@ class DrTagComponent {
                     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,
+                });
+            }
         });
     }
 }
@@ -2189,6 +2201,7 @@ class DrPopoverComponent {
         this.viewContainerRef = viewContainerRef;
         this.elementRef = elementRef;
         this.popoverRef = popoverRef;
+        this.popoverOpened = new EventEmitter();
         this.class = '';
         this.isContentTemplate = false;
         this.popover = true;
@@ -2218,8 +2231,34 @@ class DrPopoverComponent {
         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
+     */
+    repositionToNewContainerAndFreeze() {
+        const newContainer = !!this.freezeToContainerSelector && document.querySelector(this.freezeToContainerSelector);
+        if (newContainer) {
+            // waiting until element is positioned on overlay
+            setTimeout(() => {
+                const element = this.elementRef.nativeElement;
+                if (!element.closest('.cdk-overlay-container'))
+                    return;
+                const position = element.getBoundingClientRect();
+                const 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);
+            });
+        }
+    }
 }
 DrPopoverComponent.decorators = [
     { type: Component, args: [{
@@ -2240,6 +2279,7 @@ DrPopoverComponent.ctorParameters = () => [
     { type: DrPopoverRef }
 ];
 DrPopoverComponent.propDecorators = {
+    popoverOpened: [{ type: Output }],
     content: [{ type: Input }],
     contentContext: [{ type: Input }],
     class: [{ type: Input }],
@@ -2247,6 +2287,7 @@ DrPopoverComponent.propDecorators = {
     manualClosing: [{ type: Input }],
     alignment: [{ type: Input }],
     position: [{ type: Input }],
+    freezeToContainerSelector: [{ type: Input }],
     popoverContainer: [{ type: ViewChild, args: ['popoverContainer', { read: ElementRef, static: true },] }],
     width: [{ type: HostBinding, args: ['style.width',] }],
     height: [{ type: HostBinding, args: ['style.height',] }],
@@ -2270,7 +2311,7 @@ class DrPopoverService {
         this.registerListeners(model, overlayRef, popoverRef);
         return popoverRef;
     }
-    attachOverlayContainer(content, { contentContext, position, class: elementClass, manualClosing, hostRef, alignment }, overlayRef, popoverRef) {
+    attachOverlayContainer(content, { contentContext, position, class: elementClass, manualClosing, hostRef, alignment, freezeToContainerSelector }, overlayRef, popoverRef) {
         const componentPortal = new ComponentPortal(DrPopoverComponent, null, this.createInjector(popoverRef));
         const contentRef = overlayRef.attach(componentPortal);
         popoverRef.componentRef = contentRef;
@@ -2281,6 +2322,7 @@ class DrPopoverService {
         contentRef.instance.hostRef = hostRef;
         contentRef.instance.alignment = alignment;
         contentRef.instance.position = position;
+        contentRef.instance.freezeToContainerSelector = freezeToContainerSelector;
     }
     createOverlay(popoverModel) {
         const overlayConfig = this.getOverlayConfig(popoverModel);
@@ -2360,6 +2402,7 @@ class DrPopoverDirective {
         this.manualClosing = { enabled: false };
         // eslint-disable-next-line
         this.popoverClose = new EventEmitter();
+        this.popoverOpened = new EventEmitter();
         // eslint-disable-next-line
         this.showStateChange = new EventEmitter();
     }
@@ -2389,12 +2432,16 @@ class DrPopoverDirective {
             position: this.position,
             contentContext: this.contentContext,
             alignment: this.alignment,
+            freezeToContainerSelector: this.freezeToContainerSelector
         });
         popoverRef.onClose.pipe(first()).subscribe((res) => {
             this.closePopover();
             this.popoverClose.emit(res);
             this.showStateChange.emit({ isShown: !!this.popoverRef });
         });
+        popoverRef.componentRef.instance.popoverOpened.pipe(first()).subscribe(() => {
+            this.popoverOpened.emit();
+        });
     }
     ngOnDestroy() {
         this.closePopover();
@@ -2418,7 +2465,9 @@ DrPopoverDirective.propDecorators = {
     manualClosing: [{ type: Input, args: ['drPopoverManualClosing',] }],
     alignment: [{ type: Input, args: ['drPopoverAlignment',] }],
     disabled: [{ type: Input, args: ['drPopoverDisabled',] }],
+    freezeToContainerSelector: [{ type: Input, args: ['drPopoverFreezeToContainerSelector',] }],
     popoverClose: [{ type: Output, args: ['drPopoverClose',] }],
+    popoverOpened: [{ type: Output, args: ['drPopoverOpened',] }],
     showStateChange: [{ type: Output, args: ['drPopoverShowStateChange',] }],
     togglePopover: [{ type: HostListener, args: ['click',] }]
 };
@@ -2790,6 +2839,7 @@ DrTabComponent.ctorParameters = () => [];
 DrTabComponent.propDecorators = {
     label: [{ type: Input }],
     disabled: [{ type: Input }],
+    tooltip: [{ type: Input }],
     contentTemplate: [{ type: ViewChild, args: [TemplateRef,] }]
 };
 
@@ -2808,8 +2858,8 @@ class DrTabsComponent {
 DrTabsComponent.decorators = [
     { type: 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 = () => [];
@@ -4818,7 +4868,8 @@ DrTabsModule.decorators = [
                     MatTabsModule,
                     FormsModule,
                     ReactiveFormsModule,
-                    DrInputsModule
+                    DrInputsModule,
+                    DrTooltipModule
                 ],
                 exports: [
                     DrTabsComponent,