@datarailsshared/datarailsshared 1.3.5 → 1.3.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundles/datarailsshared-datarailsshared.umd.js +65 -13
- package/bundles/datarailsshared-datarailsshared.umd.js.map +1 -1
- package/datarailsshared-datarailsshared-1.3.6.tgz +0 -0
- package/datarailsshared-datarailsshared.metadata.json +1 -1
- package/esm2015/lib/dr-avatar/dr-avatar.component.js +3 -2
- package/esm2015/lib/dr-tooltip/dr-tooltip.component.js +3 -3
- package/esm2015/lib/dr-tooltip/dr-tooltip.directive.js +57 -10
- package/fesm2015/datarailsshared-datarailsshared.js +61 -13
- package/fesm2015/datarailsshared-datarailsshared.js.map +1 -1
- package/lib/dr-tooltip/dr-tooltip.component.d.ts +1 -0
- package/lib/dr-tooltip/dr-tooltip.directive.d.ts +20 -1
- package/package.json +1 -1
- package/datarailsshared-datarailsshared-1.3.5.tgz +0 -0
|
@@ -1490,6 +1490,7 @@
|
|
|
1490
1490
|
if (this.users.length > 2) {
|
|
1491
1491
|
return this.users.slice(2, this.users.length - 1);
|
|
1492
1492
|
}
|
|
1493
|
+
return [];
|
|
1493
1494
|
};
|
|
1494
1495
|
DrAvatarComponent.prototype.getRandomValue = function (limit) {
|
|
1495
1496
|
return ~~(limit * Math.random());
|
|
@@ -1501,7 +1502,7 @@
|
|
|
1501
1502
|
selector: 'dr-avatar',
|
|
1502
1503
|
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",
|
|
1503
1504
|
changeDetection: core.ChangeDetectionStrategy.OnPush,
|
|
1504
|
-
styles: [":host{width:
|
|
1505
|
+
styles: [":host{width:auto}.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"]
|
|
1505
1506
|
},] }
|
|
1506
1507
|
];
|
|
1507
1508
|
DrAvatarComponent.ctorParameters = function () { return []; };
|
|
@@ -1522,7 +1523,7 @@
|
|
|
1522
1523
|
TooltipComponent.decorators = [
|
|
1523
1524
|
{ type: core.Component, args: [{
|
|
1524
1525
|
selector: 'dr-tooltip',
|
|
1525
|
-
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",
|
|
1526
|
+
template: "<div [class]=\"position + ' ' + class\" [ngClass]=\"{'dr-tooltip': !options?.withoutContainerStyles}\">\r\n <div *ngIf=\"!options?.withoutArrow\" 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",
|
|
1526
1527
|
animations: [
|
|
1527
1528
|
animations.trigger('tooltip', [
|
|
1528
1529
|
animations.transition(':enter', [
|
|
@@ -1534,7 +1535,7 @@
|
|
|
1534
1535
|
]),
|
|
1535
1536
|
]),
|
|
1536
1537
|
],
|
|
1537
|
-
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 #
|
|
1538
|
+
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 #9199b4}.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"]
|
|
1538
1539
|
},] }
|
|
1539
1540
|
];
|
|
1540
1541
|
TooltipComponent.ctorParameters = function () { return []; };
|
|
@@ -1546,6 +1547,21 @@
|
|
|
1546
1547
|
class: [{ type: core.Input }]
|
|
1547
1548
|
};
|
|
1548
1549
|
|
|
1550
|
+
exports.TooltipPosition = void 0;
|
|
1551
|
+
(function (TooltipPosition) {
|
|
1552
|
+
TooltipPosition["TOP"] = "top";
|
|
1553
|
+
TooltipPosition["BOTTOM"] = "bottom";
|
|
1554
|
+
TooltipPosition["LEFT"] = "left";
|
|
1555
|
+
TooltipPosition["RIGHT"] = "right";
|
|
1556
|
+
TooltipPosition["TOP_RIGHT"] = "top-right";
|
|
1557
|
+
TooltipPosition["TOP_LEFT"] = "top-left";
|
|
1558
|
+
TooltipPosition["BOTTOM_RIGHT"] = "bottom-right";
|
|
1559
|
+
TooltipPosition["BOTTOM_LEFT"] = "bottom-left";
|
|
1560
|
+
TooltipPosition["RIGHT_TOP"] = "right-top";
|
|
1561
|
+
TooltipPosition["RIGHT_BOTTOM"] = "right-bottom";
|
|
1562
|
+
TooltipPosition["LEFT_TOP"] = "left-top";
|
|
1563
|
+
TooltipPosition["LEFT_BOTTOM"] = "left-bottom";
|
|
1564
|
+
})(exports.TooltipPosition || (exports.TooltipPosition = {}));
|
|
1549
1565
|
var DrTooltipDirective = /** @class */ (function () {
|
|
1550
1566
|
function DrTooltipDirective(overlay, overlayPositionBuilder, elementRef) {
|
|
1551
1567
|
this.overlay = overlay;
|
|
@@ -1657,20 +1673,50 @@
|
|
|
1657
1673
|
enumerable: false,
|
|
1658
1674
|
configurable: true
|
|
1659
1675
|
});
|
|
1660
|
-
DrTooltipDirective.prototype
|
|
1661
|
-
|
|
1662
|
-
|
|
1663
|
-
|
|
1664
|
-
|
|
1665
|
-
|
|
1676
|
+
Object.defineProperty(DrTooltipDirective.prototype, "showTooltip", {
|
|
1677
|
+
set: function (value) {
|
|
1678
|
+
this.manualHandling = true;
|
|
1679
|
+
if (value) {
|
|
1680
|
+
this.renderTooltip();
|
|
1681
|
+
}
|
|
1682
|
+
else {
|
|
1683
|
+
this.destroyTooltip();
|
|
1684
|
+
}
|
|
1685
|
+
},
|
|
1686
|
+
enumerable: false,
|
|
1687
|
+
configurable: true
|
|
1688
|
+
});
|
|
1666
1689
|
DrTooltipDirective.prototype.ngOnDestroy = function () {
|
|
1690
|
+
if (!this.overlayRef)
|
|
1691
|
+
return null;
|
|
1667
1692
|
if (this.overlayRef.hasAttached()) {
|
|
1668
1693
|
this.hide();
|
|
1669
1694
|
}
|
|
1670
|
-
|
|
1695
|
+
// TODO: Temporary solution. line 162 doesn't stop function execution
|
|
1696
|
+
if (this.overlayRef) {
|
|
1697
|
+
this.overlayRef.dispose();
|
|
1698
|
+
}
|
|
1671
1699
|
};
|
|
1672
1700
|
DrTooltipDirective.prototype.show = function () {
|
|
1673
|
-
if (
|
|
1701
|
+
if (this.manualHandling)
|
|
1702
|
+
return;
|
|
1703
|
+
this.renderTooltip();
|
|
1704
|
+
};
|
|
1705
|
+
DrTooltipDirective.prototype.hide = function () {
|
|
1706
|
+
if (this.manualHandling)
|
|
1707
|
+
return;
|
|
1708
|
+
this.destroyTooltip();
|
|
1709
|
+
};
|
|
1710
|
+
DrTooltipDirective.prototype.createOverlay = function () {
|
|
1711
|
+
var positionStrategy = this.overlayPositionBuilder
|
|
1712
|
+
.flexibleConnectedTo(this.elementRef)
|
|
1713
|
+
.withPositions([this.tooltipPositions[this.position]]);
|
|
1714
|
+
this.overlayRef = this.overlay.create({ positionStrategy: positionStrategy });
|
|
1715
|
+
};
|
|
1716
|
+
DrTooltipDirective.prototype.renderTooltip = function () {
|
|
1717
|
+
var _a;
|
|
1718
|
+
this.createOverlay();
|
|
1719
|
+
if (!((_a = this.overlayRef) === null || _a === void 0 ? void 0 : _a.hasAttached()) && this.content) {
|
|
1674
1720
|
var tooltipRef = this.overlayRef.attach(new portal.ComponentPortal(TooltipComponent));
|
|
1675
1721
|
tooltipRef.instance.content = this.content;
|
|
1676
1722
|
tooltipRef.instance.contentContext = this.contentContext;
|
|
@@ -1678,8 +1724,13 @@
|
|
|
1678
1724
|
tooltipRef.instance.options = this.options;
|
|
1679
1725
|
}
|
|
1680
1726
|
};
|
|
1681
|
-
DrTooltipDirective.prototype.
|
|
1682
|
-
this.overlayRef
|
|
1727
|
+
DrTooltipDirective.prototype.destroyTooltip = function () {
|
|
1728
|
+
if (this.overlayRef) {
|
|
1729
|
+
this.overlayRef.dispose();
|
|
1730
|
+
}
|
|
1731
|
+
this.overlayRef = null;
|
|
1732
|
+
};
|
|
1733
|
+
DrTooltipDirective.prototype.ngOnInit = function () {
|
|
1683
1734
|
};
|
|
1684
1735
|
return DrTooltipDirective;
|
|
1685
1736
|
}());
|
|
@@ -1699,6 +1750,7 @@
|
|
|
1699
1750
|
position: [{ type: core.Input, args: ['drTooltipPosition',] }],
|
|
1700
1751
|
class: [{ type: core.Input, args: ['drTooltipClass',] }],
|
|
1701
1752
|
drTooltipOptions: [{ type: core.Input }],
|
|
1753
|
+
showTooltip: [{ type: core.Input, args: ['drTooltipShow',] }],
|
|
1702
1754
|
show: [{ type: core.HostListener, args: ['mouseenter',] }],
|
|
1703
1755
|
hide: [{ type: core.HostListener, args: ['mouseleave',] }]
|
|
1704
1756
|
};
|