@datarailsshared/datarailsshared 1.3.4 → 1.3.5

package/fesm2015/datarailsshared-datarailsshared.js

@@ -1,8 +1,11 @@
-import { EventEmitter, Component, ViewEncapsulation, Input, Output, ChangeDetectionStrategy, forwardRef, ElementRef, Renderer2, ChangeDetectorRef, ContentChild, HostBinding, Directive, ComponentFactoryResolver, ViewContainerRef, Inject, ViewChild, NgModule } from '@angular/core';
+import { EventEmitter, Component, ViewEncapsulation, Input, Output, ChangeDetectionStrategy, forwardRef, ElementRef, Renderer2, ChangeDetectorRef, ContentChild, HostBinding, TemplateRef, Directive, HostListener, ComponentFactoryResolver, ViewContainerRef, Inject, ViewChild, NgModule } from '@angular/core';
 import { FormControl, NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { DateAdapter, MAT_DATE_LOCALE, MAT_DATE_FORMATS, MatNativeDateModule } from '@angular/material/core';
 import { MomentDateAdapter, MAT_MOMENT_DATE_ADAPTER_OPTIONS, MatMomentDateModule } from '@angular/material-moment-adapter';
 import * as momentImported from 'moment';
+import { trigger, transition, style, animate } from '@angular/animations';
+import { Overlay, OverlayPositionBuilder } from '@angular/cdk/overlay';
+import { ComponentPortal } from '@angular/cdk/portal';
 import { DOCUMENT, CommonModule } from '@angular/common';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -10,6 +13,7 @@ import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { NgSelectModule } from '@ng-select/ng-select';
+import { MatTooltipModule } from '@angular/material/tooltip';
 
 // import {*} from ""
 class DateTagComponent {
@@ -252,7 +256,8 @@ class MonthTagComponent extends AnyTagComponent {
     }
     initDate() {
         if (this.defaultValue) {
-            this.dateObj.date = moment$5(new Date(this.defaultValue * 1000)).utc().format("YYYY-MM");
+            this.dateObj.date = moment$5(this.defaultValue * 1000).utc().format("YYYY-MM");
+            this.date = new FormControl(moment$5(this.defaultValue * 1000));
         }
         else {
             this.dateObj.date = moment$5(new Date()).format("YYYY-MM");
@@ -1064,6 +1069,231 @@ DrSelectComponent.propDecorators = {
     optionTemplate: [{ type: ContentChild, args: ['optionTemplate',] }]
 };
 
+class DrAvatarComponent {
+    constructor() {
+        this.users = [];
+        this.userClicked = new EventEmitter();
+    }
+    ngOnChanges(changes) {
+        var _a;
+        if (changes.users && ((_a = changes.users.currentValue) === null || _a === void 0 ? void 0 : _a.length)) {
+            this.getFirstUsers().forEach((user, index) => user.class = `icon-${index}`);
+            this.getLastUsers().forEach((user) => user.class = `icon-${this.getRandomValue(5)}`);
+        }
+    }
+    getFirstUsers() {
+        return this.users.slice(0, 2);
+    }
+    getLastUsers() {
+        if (this.users.length > 2) {
+            return this.users.slice(2, this.users.length - 1);
+        }
+    }
+    getRandomValue(limit) {
+        return ~~(limit * Math.random());
+    }
+}
+DrAvatarComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'dr-avatar',
+                template: "<div class=\"users-section\">\r\n    <div class=\"users-section__user\"\r\n         [class]=\"user.class\"\r\n         *ngFor=\"let user of getFirstUsers()\"\r\n         (click)=\"userClicked.emit()\"\r\n         [matTooltip]=\"user.first_name + ' ' + user.last_name\"\r\n         [matTooltipPosition]=\"'below'\">\r\n        {{user.first_name[0] + user.last_name[0]}}\r\n    </div>\r\n\r\n    <div class=\"users-section__user icon-2\" *ngIf=\"users.length > 2\"\r\n         [drTooltip]=\"usersTemplate\"\r\n         [drTooltipPosition]=\"'bottom'\">\r\n        {{getLastUsers().length}}\r\n    </div>\r\n</div>\r\n\r\n<ng-template #usersTemplate>\r\n    <div *ngFor=\"let user of getLastUsers()\" class=\"users-popover-item\">\r\n        <div class=\"users-section__user\"\r\n             (click)=\"userClicked.emit()\"\r\n             [class]=\"user.class\">\r\n            {{user.first_name[0] + user.last_name[0]}}\r\n        </div>\r\n        <span class=\"username\">\r\n               {{user.first_name + ' ' + user.last_name}}\r\n        </span>\r\n    </div>\r\n</ng-template>\r\n",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: [":host{width:627px}.users-section{display:flex;position:absolute;height:28px;top:5px}.users-popover-item{display:flex;align-items:center;margin:12px}.users-popover-item .username{color:#51566f;font-size:14px}.users-popover-item .users-section__user{margin-right:8px}.users-section__user{display:flex;justify-content:center;align-items:center;height:28px;width:28px;border-radius:14px;background:red;color:#fff;font-size:12px}.users-section__user.icon-0{background-color:#7b61ff}.users-section__user.icon-1{background-color:#21b8f1}.users-section__user.icon-2{background-color:#2969b0}.users-section__user.icon-3{background-color:#51566f}.users-section__user.icon-4{background-color:#0061ff}.users-section__user:hover{cursor:pointer}.users-section__user:not(:first-child){margin-left:4px}\n"]
+            },] }
+];
+DrAvatarComponent.ctorParameters = () => [];
+DrAvatarComponent.propDecorators = {
+    users: [{ type: Input }],
+    userClicked: [{ type: Output }]
+};
+
+class TooltipComponent {
+    constructor() {
+        this.isContentTemplate = false;
+    }
+    ngOnInit() {
+        this.isContentTemplate = this.content instanceof TemplateRef;
+    }
+}
+TooltipComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'dr-tooltip',
+                template: "<div [class]=\"position + ' ' + class\" [ngClass]=\"{'dr-tooltip': !options?.withoutContainerStyles}\">\r\n    <div class=\"dr-tooltip-arrow\"></div>\r\n    <ng-container *ngIf=\"isContentTemplate; else defaultContent\">\r\n        <ng-container  *ngTemplateOutlet=\"content; context: contentContext\"></ng-container>\r\n    </ng-container>\r\n    <ng-template #defaultContent>\r\n        <div class=\"default-content\">{{ content }}</div>\r\n    </ng-template>\r\n</div>\r\n",
+                animations: [
+                    trigger('tooltip', [
+                        transition(':enter', [
+                            style({ opacity: 0 }),
+                            animate(300, style({ opacity: 1 })),
+                        ]),
+                        transition(':leave', [
+                            animate(300, style({ opacity: 0 })),
+                        ]),
+                    ]),
+                ],
+                styles: [":host{display:block}.dr-tooltip{background:#fff;border:1px solid #cfd7dd;box-sizing:border-box;border-radius:4px;font-size:12px;color:#545a6b;max-width:80vh!important;box-shadow:0 2px 4px #919907}.dr-tooltip .default-content{padding:.5rem;font-size:11px;line-height:16px;white-space:pre;text-overflow:ellipsis;overflow:hidden}.dr-tooltip-arrow{border-width:8px}.dr-tooltip-arrow,.dr-tooltip-arrow:after{position:absolute;display:block;width:0;height:0;border-color:transparent;border-style:solid}.dr-tooltip-arrow:after{content:\"\";border-width:8px}.top .dr-tooltip-arrow,.top-left .dr-tooltip-arrow,.top-right .dr-tooltip-arrow{bottom:-16px;border-top-color:#cfd7dd!important}.top .dr-tooltip-arrow:after,.top-left .dr-tooltip-arrow:after,.top-right .dr-tooltip-arrow:after{bottom:-6px;left:-8px;border-top-color:#fff}.bottom .dr-tooltip-arrow,.bottom-left .dr-tooltip-arrow,.bottom-right .dr-tooltip-arrow{top:-7px;border-top:none;border-bottom-color:#cfd7dd!important}.bottom .dr-tooltip-arrow:after,.bottom-left .dr-tooltip-arrow:after,.bottom-right .dr-tooltip-arrow:after{border-top:none;top:1px;left:-8px;border-bottom-color:#fff}.left .dr-tooltip-arrow,.left-top .dr-tooltip-arrow,.left-bottom .dr-tooltip-arrow{right:-16px;border-left-color:#cfd7dd!important}.left .dr-tooltip-arrow:after,.left-top .dr-tooltip-arrow:after,.left-bottom .dr-tooltip-arrow:after{bottom:-8px;left:-9px;border-left-color:#fff}.right .dr-tooltip-arrow,.right-top .dr-tooltip-arrow,.right-bottom .dr-tooltip-arrow{left:-16px;border-right-color:#cfd7dd!important}.right .dr-tooltip-arrow:after,.right-top .dr-tooltip-arrow:after,.right-bottom .dr-tooltip-arrow:after{bottom:-8px;left:-7px;border-right-color:#fff}.top .dr-tooltip-arrow,.bottom .dr-tooltip-arrow{left:calc(50% - 4px)}.bottom-left .dr-tooltip-arrow,.top-left .dr-tooltip-arrow{left:4px}.bottom-right .dr-tooltip-arrow,.top-right .dr-tooltip-arrow{right:4px}.left .dr-tooltip-arrow,.right .dr-tooltip-arrow{top:calc(50% - 4px)}.left-top .dr-tooltip-arrow,.dr-tooltip-arrow .right-top{top:4px}.right-bottom .dr-tooltip-arrow,.left-bottom .dr-tooltip-arrow{bottom:4px}\n"]
+            },] }
+];
+TooltipComponent.ctorParameters = () => [];
+TooltipComponent.propDecorators = {
+    content: [{ type: Input }],
+    contentContext: [{ type: Input }],
+    position: [{ type: Input }],
+    options: [{ type: Input }],
+    class: [{ type: Input }]
+};
+
+class DrTooltipDirective {
+    constructor(overlay, overlayPositionBuilder, elementRef) {
+        this.overlay = overlay;
+        this.overlayPositionBuilder = overlayPositionBuilder;
+        this.elementRef = elementRef;
+        this.contentContext = {};
+        this.position = 'top';
+        this.class = '';
+        this.tooltipPositions = {
+            top: {
+                originX: 'center',
+                originY: 'top',
+                overlayX: 'center',
+                overlayY: 'bottom',
+                offsetY: -8
+            },
+            'top-left': {
+                originX: 'start',
+                originY: 'top',
+                overlayX: 'start',
+                overlayY: 'bottom',
+                offsetY: -8
+            },
+            'top-right': {
+                originX: 'end',
+                originY: 'top',
+                overlayX: 'end',
+                overlayY: 'bottom',
+                offsetY: -8
+            },
+            bottom: {
+                originX: 'center',
+                originY: 'bottom',
+                overlayX: 'center',
+                overlayY: 'top',
+                offsetY: 7
+            },
+            'bottom-left': {
+                originX: 'start',
+                originY: 'bottom',
+                overlayX: 'start',
+                overlayY: 'top',
+                offsetY: 7
+            },
+            'bottom-right': {
+                originX: 'end',
+                originY: 'bottom',
+                overlayX: 'end',
+                overlayY: 'top',
+                offsetY: 7
+            },
+            left: {
+                originX: 'start',
+                originY: 'center',
+                overlayX: 'end',
+                overlayY: 'center',
+                offsetX: -8
+            },
+            'left-top': {
+                originX: 'start',
+                originY: 'top',
+                overlayX: 'end',
+                overlayY: 'top',
+                offsetX: -8
+            },
+            'left-bottom': {
+                originX: 'start',
+                originY: 'bottom',
+                overlayX: 'end',
+                overlayY: 'bottom',
+                offsetX: -8
+            },
+            right: {
+                originX: 'end',
+                originY: 'center',
+                overlayX: 'start',
+                overlayY: 'center',
+                offsetX: 8
+            },
+            'right-top': {
+                originX: 'end',
+                originY: 'top',
+                overlayX: 'start',
+                overlayY: 'top',
+                offsetX: 8
+            },
+            'right-bottom': {
+                originX: 'end',
+                originY: 'bottom',
+                overlayX: 'start',
+                overlayY: 'bottom',
+                offsetX: 8
+            }
+        };
+    }
+    set drTooltipOptions(options) {
+        if (options === null || options === void 0 ? void 0 : options.indent) {
+            const position = this.tooltipPositions[this.position];
+            if (position.offsetY) {
+                position.offsetY = position.offsetY < 0 ? -options.indent : options.indent;
+            }
+            if (position.offsetX) {
+                position.offsetX = position.offsetX < 0 ? -options.indent : options.indent;
+            }
+        }
+        this.options = options;
+    }
+    ngOnInit() {
+        const positionStrategy = this.overlayPositionBuilder
+            .flexibleConnectedTo(this.elementRef)
+            .withPositions([this.tooltipPositions[this.position]]);
+        this.overlayRef = this.overlay.create({ positionStrategy });
+    }
+    ngOnDestroy() {
+        if (this.overlayRef.hasAttached()) {
+            this.hide();
+        }
+        this.overlayRef.dispose();
+    }
+    show() {
+        if (!this.overlayRef.hasAttached() && this.content) {
+            const tooltipRef = this.overlayRef.attach(new ComponentPortal(TooltipComponent));
+            tooltipRef.instance.content = this.content;
+            tooltipRef.instance.contentContext = this.contentContext;
+            tooltipRef.instance.position = this.position;
+            tooltipRef.instance.options = this.options;
+        }
+    }
+    hide() {
+        this.overlayRef.detach();
+    }
+}
+DrTooltipDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[drTooltip]'
+            },] }
+];
+DrTooltipDirective.ctorParameters = () => [
+    { type: Overlay },
+    { type: OverlayPositionBuilder },
+    { type: ElementRef }
+];
+DrTooltipDirective.propDecorators = {
+    content: [{ type: Input, args: ['drTooltip',] }],
+    contentContext: [{ type: Input, args: ['drTooltipContext',] }],
+    position: [{ type: Input, args: ['drTooltipPosition',] }],
+    class: [{ type: Input, args: ['drTooltipClass',] }],
+    drTooltipOptions: [{ type: Input }],
+    show: [{ type: HostListener, args: ['mouseenter',] }],
+    hide: [{ type: HostListener, args: ['mouseleave',] }]
+};
+
 class DrToggleComponent {
     constructor(cdr) {
         this.cdr = cdr;
@@ -1282,6 +1512,43 @@ DrInputsModule.decorators = [
             },] }
 ];
 
+class DrTooltipModule {
+}
+DrTooltipModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule
+                ],
+                exports: [
+                    TooltipComponent,
+                    DrTooltipDirective,
+                ],
+                providers: [],
+                declarations: [
+                    TooltipComponent,
+                    DrTooltipDirective,
+                ],
+            },] }
+];
+
+class DrAvatarModule {
+}
+DrAvatarModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [
+                    DrAvatarComponent
+                ],
+                exports: [
+                    DrAvatarComponent
+                ],
+                imports: [
+                    MatTooltipModule,
+                    DrTooltipModule,
+                    CommonModule
+                ]
+            },] }
+];
+
 const components = [DrSpinnerComponent];
 const directives = [DrSpinnerDirective];
 class DrSpinnerModule {
@@ -1302,5 +1569,5 @@ DrSpinnerModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { AnyTagComponent, CheckboxComponent, DateTagComponent, DateTagModule, DayTagComponent, DrInputComponent, DrInputsModule, DrSelectComponent, DrSpinnerComponent, DrSpinnerDirective, DrSpinnerModule, DrTagComponent, DrTagModule, DrToggleComponent, ForecastTagComponent, ISpinnerOptions, ListTagComponent, ListTagModule, MonthTagComponent, QuarterTagComponent, RadioButtonComponent, WeekTagComponent, YearTagComponent, components$2 as ɵa };
+export { AnyTagComponent, CheckboxComponent, DateTagComponent, DateTagModule, DayTagComponent, DrAvatarComponent, DrAvatarModule, DrInputComponent, DrInputsModule, DrSelectComponent, DrSpinnerComponent, DrSpinnerDirective, DrSpinnerModule, DrTagComponent, DrTagModule, DrToggleComponent, DrTooltipDirective, DrTooltipModule, ForecastTagComponent, ISpinnerOptions, ListTagComponent, ListTagModule, MonthTagComponent, QuarterTagComponent, RadioButtonComponent, TooltipComponent, WeekTagComponent, YearTagComponent, components$2 as ɵa };
 //# sourceMappingURL=datarailsshared-datarailsshared.js.map