@datarailsshared/datarailsshared 1.3.4 → 1.3.5

package/bundles/datarailsshared-datarailsshared.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/forms'), require('@angular/material/core'), require('@angular/material-moment-adapter'), require('moment'), require('@angular/common'), require('@angular/material/datepicker'), require('@angular/material/form-field'), require('@angular/material/input'), require('@angular/material/select'), require('@angular/material/button-toggle'), require('@ng-select/ng-select')) :
-    typeof define === 'function' && define.amd ? define('@datarailsshared/datarailsshared', ['exports', '@angular/core', '@angular/forms', '@angular/material/core', '@angular/material-moment-adapter', 'moment', '@angular/common', '@angular/material/datepicker', '@angular/material/form-field', '@angular/material/input', '@angular/material/select', '@angular/material/button-toggle', '@ng-select/ng-select'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.datarailsshared = global.datarailsshared || {}, global.datarailsshared.datarailsshared = {}), global.ng.core, global.ng.forms, global.ng.material.core, global.ng.materialMomentAdapter, global.momentImported, global.ng.common, global.ng.material.datepicker, global.ng.material.formField, global.ng.material.input, global.ng.material.select, global.ng.material.buttonToggle, global.ngSelect));
-}(this, (function (exports, core, forms, core$1, materialMomentAdapter, momentImported, common, datepicker, formField, input, select, buttonToggle, ngSelect) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/forms'), require('@angular/material/core'), require('@angular/material-moment-adapter'), require('moment'), require('@angular/animations'), require('@angular/cdk/overlay'), require('@angular/cdk/portal'), require('@angular/common'), require('@angular/material/datepicker'), require('@angular/material/form-field'), require('@angular/material/input'), require('@angular/material/select'), require('@angular/material/button-toggle'), require('@ng-select/ng-select'), require('@angular/material/tooltip')) :
+    typeof define === 'function' && define.amd ? define('@datarailsshared/datarailsshared', ['exports', '@angular/core', '@angular/forms', '@angular/material/core', '@angular/material-moment-adapter', 'moment', '@angular/animations', '@angular/cdk/overlay', '@angular/cdk/portal', '@angular/common', '@angular/material/datepicker', '@angular/material/form-field', '@angular/material/input', '@angular/material/select', '@angular/material/button-toggle', '@ng-select/ng-select', '@angular/material/tooltip'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.datarailsshared = global.datarailsshared || {}, global.datarailsshared.datarailsshared = {}), global.ng.core, global.ng.forms, global.ng.material.core, global.ng.materialMomentAdapter, global.momentImported, global.ng.animations, global.ng.cdk.overlay, global.ng.cdk.portal, global.ng.common, global.ng.material.datepicker, global.ng.material.formField, global.ng.material.input, global.ng.material.select, global.ng.material.buttonToggle, global.ngSelect, global.ng.material.tooltip));
+}(this, (function (exports, core, forms, core$1, materialMomentAdapter, momentImported, animations, overlay, portal, common, datepicker, formField, input, select, buttonToggle, ngSelect, tooltip) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -609,7 +609,8 @@
         }
         MonthTagComponent.prototype.initDate = function () {
             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 forms.FormControl(moment$5(this.defaultValue * 1000));
             }
             else {
                 this.dateObj.date = moment$5(new Date()).format("YYYY-MM");
@@ -1469,6 +1470,239 @@
         optionTemplate: [{ type: core.ContentChild, args: ['optionTemplate',] }]
     };
 
+    var DrAvatarComponent = /** @class */ (function () {
+        function DrAvatarComponent() {
+            this.users = [];
+            this.userClicked = new core.EventEmitter();
+        }
+        DrAvatarComponent.prototype.ngOnChanges = function (changes) {
+            var _this = this;
+            var _a;
+            if (changes.users && ((_a = changes.users.currentValue) === null || _a === void 0 ? void 0 : _a.length)) {
+                this.getFirstUsers().forEach(function (user, index) { return user.class = "icon-" + index; });
+                this.getLastUsers().forEach(function (user) { return user.class = "icon-" + _this.getRandomValue(5); });
+            }
+        };
+        DrAvatarComponent.prototype.getFirstUsers = function () {
+            return this.users.slice(0, 2);
+        };
+        DrAvatarComponent.prototype.getLastUsers = function () {
+            if (this.users.length > 2) {
+                return this.users.slice(2, this.users.length - 1);
+            }
+        };
+        DrAvatarComponent.prototype.getRandomValue = function (limit) {
+            return ~~(limit * Math.random());
+        };
+        return DrAvatarComponent;
+    }());
+    DrAvatarComponent.decorators = [
+        { type: core.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: core.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 = function () { return []; };
+    DrAvatarComponent.propDecorators = {
+        users: [{ type: core.Input }],
+        userClicked: [{ type: core.Output }]
+    };
+
+    var TooltipComponent = /** @class */ (function () {
+        function TooltipComponent() {
+            this.isContentTemplate = false;
+        }
+        TooltipComponent.prototype.ngOnInit = function () {
+            this.isContentTemplate = this.content instanceof core.TemplateRef;
+        };
+        return TooltipComponent;
+    }());
+    TooltipComponent.decorators = [
+        { type: core.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: [
+                        animations.trigger('tooltip', [
+                            animations.transition(':enter', [
+                                animations.style({ opacity: 0 }),
+                                animations.animate(300, animations.style({ opacity: 1 })),
+                            ]),
+                            animations.transition(':leave', [
+                                animations.animate(300, animations.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 = function () { return []; };
+    TooltipComponent.propDecorators = {
+        content: [{ type: core.Input }],
+        contentContext: [{ type: core.Input }],
+        position: [{ type: core.Input }],
+        options: [{ type: core.Input }],
+        class: [{ type: core.Input }]
+    };
+
+    var DrTooltipDirective = /** @class */ (function () {
+        function DrTooltipDirective(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
+                }
+            };
+        }
+        Object.defineProperty(DrTooltipDirective.prototype, "drTooltipOptions", {
+            set: function (options) {
+                if (options === null || options === void 0 ? void 0 : options.indent) {
+                    var 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;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        DrTooltipDirective.prototype.ngOnInit = function () {
+            var positionStrategy = this.overlayPositionBuilder
+                .flexibleConnectedTo(this.elementRef)
+                .withPositions([this.tooltipPositions[this.position]]);
+            this.overlayRef = this.overlay.create({ positionStrategy: positionStrategy });
+        };
+        DrTooltipDirective.prototype.ngOnDestroy = function () {
+            if (this.overlayRef.hasAttached()) {
+                this.hide();
+            }
+            this.overlayRef.dispose();
+        };
+        DrTooltipDirective.prototype.show = function () {
+            if (!this.overlayRef.hasAttached() && this.content) {
+                var tooltipRef = this.overlayRef.attach(new portal.ComponentPortal(TooltipComponent));
+                tooltipRef.instance.content = this.content;
+                tooltipRef.instance.contentContext = this.contentContext;
+                tooltipRef.instance.position = this.position;
+                tooltipRef.instance.options = this.options;
+            }
+        };
+        DrTooltipDirective.prototype.hide = function () {
+            this.overlayRef.detach();
+        };
+        return DrTooltipDirective;
+    }());
+    DrTooltipDirective.decorators = [
+        { type: core.Directive, args: [{
+                    selector: '[drTooltip]'
+                },] }
+    ];
+    DrTooltipDirective.ctorParameters = function () { return [
+        { type: overlay.Overlay },
+        { type: overlay.OverlayPositionBuilder },
+        { type: core.ElementRef }
+    ]; };
+    DrTooltipDirective.propDecorators = {
+        content: [{ type: core.Input, args: ['drTooltip',] }],
+        contentContext: [{ type: core.Input, args: ['drTooltipContext',] }],
+        position: [{ type: core.Input, args: ['drTooltipPosition',] }],
+        class: [{ type: core.Input, args: ['drTooltipClass',] }],
+        drTooltipOptions: [{ type: core.Input }],
+        show: [{ type: core.HostListener, args: ['mouseenter',] }],
+        hide: [{ type: core.HostListener, args: ['mouseleave',] }]
+    };
+
     var DrToggleComponent = /** @class */ (function () {
         function DrToggleComponent(cdr) {
             this.cdr = cdr;
@@ -1715,6 +1949,49 @@
                 },] }
     ];
 
+    var DrTooltipModule = /** @class */ (function () {
+        function DrTooltipModule() {
+        }
+        return DrTooltipModule;
+    }());
+    DrTooltipModule.decorators = [
+        { type: core.NgModule, args: [{
+                    imports: [
+                        common.CommonModule
+                    ],
+                    exports: [
+                        TooltipComponent,
+                        DrTooltipDirective,
+                    ],
+                    providers: [],
+                    declarations: [
+                        TooltipComponent,
+                        DrTooltipDirective,
+                    ],
+                },] }
+    ];
+
+    var DrAvatarModule = /** @class */ (function () {
+        function DrAvatarModule() {
+        }
+        return DrAvatarModule;
+    }());
+    DrAvatarModule.decorators = [
+        { type: core.NgModule, args: [{
+                    declarations: [
+                        DrAvatarComponent
+                    ],
+                    exports: [
+                        DrAvatarComponent
+                    ],
+                    imports: [
+                        tooltip.MatTooltipModule,
+                        DrTooltipModule,
+                        common.CommonModule
+                    ]
+                },] }
+    ];
+
     var components = [DrSpinnerComponent];
     var directives = [DrSpinnerDirective];
     var DrSpinnerModule = /** @class */ (function () {
@@ -1743,6 +2020,8 @@
     exports.DateTagComponent = DateTagComponent;
     exports.DateTagModule = DateTagModule;
     exports.DayTagComponent = DayTagComponent;
+    exports.DrAvatarComponent = DrAvatarComponent;
+    exports.DrAvatarModule = DrAvatarModule;
     exports.DrInputComponent = DrInputComponent;
     exports.DrInputsModule = DrInputsModule;
     exports.DrSelectComponent = DrSelectComponent;
@@ -1752,6 +2031,8 @@
     exports.DrTagComponent = DrTagComponent;
     exports.DrTagModule = DrTagModule;
     exports.DrToggleComponent = DrToggleComponent;
+    exports.DrTooltipDirective = DrTooltipDirective;
+    exports.DrTooltipModule = DrTooltipModule;
     exports.ForecastTagComponent = ForecastTagComponent;
     exports.ISpinnerOptions = ISpinnerOptions;
     exports.ListTagComponent = ListTagComponent;
@@ -1759,6 +2040,7 @@
     exports.MonthTagComponent = MonthTagComponent;
     exports.QuarterTagComponent = QuarterTagComponent;
     exports.RadioButtonComponent = RadioButtonComponent;
+    exports.TooltipComponent = TooltipComponent;
     exports.WeekTagComponent = WeekTagComponent;
     exports.YearTagComponent = YearTagComponent;
     exports.ɵa = components$2;