@seniorsistemas/angular-components 15.1.2 → 15.2.0

package/bundles/seniorsistemas-angular-components.umd.js

@@ -3214,13 +3214,248 @@
         return FileUploadModule;
     }());
 
+
+    (function (TooltipPosition) {
+        TooltipPosition["Above"] = "above";
+        TooltipPosition["Below"] = "below";
+        TooltipPosition["Left"] = "left";
+        TooltipPosition["Right"] = "right";
+        TooltipPosition["Default"] = "above";
+    })(exports.TooltipPosition || (exports.TooltipPosition = {}));
+
+    var TooltipComponent = /** @class */ (function () {
+        function TooltipComponent() {
+            this.tooltip = "";
+            this.position = exports.TooltipPosition.Default;
+            this.left = 0;
+            this.top = 0;
+            this.visible = false;
+            this.escape = false;
+        }
+        TooltipComponent = __decorate([
+            core.Component({
+                template: "<div\n   class=\"tooltip\"\n   [ngClass]=\"['tooltip--' + position]\"\n   [class.tooltip--visible]=\"visible\"\n   [ngStyle]=\"{\n      'left': left + 'px',\n      'top': top + 'px'\n   }\">\n   <ng-template\n      *ngIf=\"escape;\n         then escapeTemplate;\n         else noEscapeTemplate\">\n   </ng-template>   \n</div>\n\n<ng-template #noEscapeTemplate>\n   <span\n      class=\"tooltip__content\"\n      [innerHTML]=\"tooltip\">\n   </span>\n</ng-template>\n\n<ng-template #escapeTemplate>\n   <span class=\"tooltip__content\">\n      {{ tooltip }}\n   </span>\n</ng-template>",
+                styles: [".tooltip{background-color:#000;border-radius:2px;color:#fff;font-family:\"Open Sans\",sans-serif;font-size:14px;font-weight:400;line-height:21px;margin-top:5px;opacity:0;padding:8px;position:fixed;transform:translateX(-50%);text-align:center;z-index:99999}.tooltip--visible{opacity:1;transition:opacity .3s}.tooltip::before{content:\"\";height:0;position:absolute;width:0}.tooltip--below{margin-top:8px;transform:translateX(-50%)}.tooltip--below::before{border:5px solid transparent;border-bottom:5px solid #000;left:calc(50% - 5px);top:-10px}.tooltip--above{margin-bottom:8px;transform:translate(-50%,-100%)}.tooltip--above::before{border:5px solid transparent;border-top:5px solid #000;left:calc(50% - 5px);bottom:-10px}.tooltip--left{margin-right:28px;transform:translate(calc(-100% - 7px),-50%)}.tooltip--left::before{border:5px solid transparent;border-left:5px solid #000;right:-10px;bottom:calc(50% - 5px)}.tooltip--right{margin-left:7px;transform:translateY(-50%)}.tooltip--right::before{border:5px solid transparent;border-right:5px solid #000;left:-10px;bottom:calc(50% - 5px)}"]
+            })
+        ], TooltipComponent);
+        return TooltipComponent;
+    }());
+
+    var TooltipDirective = /** @class */ (function () {
+        function TooltipDirective(elementRef, appRef, componentFactoryResolver, injector) {
+            this.elementRef = elementRef;
+            this.appRef = appRef;
+            this.componentFactoryResolver = componentFactoryResolver;
+            this.injector = injector;
+            this.position = exports.TooltipPosition.Default;
+            this.showDelay = 500;
+            this.escape = false;
+            this.componentRef = null;
+        }
+        TooltipDirective.prototype.ngOnDestroy = function () {
+            this.destroy();
+        };
+        TooltipDirective.prototype.onMouseEnter = function () {
+            this.createTootip();
+        };
+        TooltipDirective.prototype.onMouseLeave = function () {
+            this.setHideTooltipTimeout();
+        };
+        TooltipDirective.prototype.onTouchStart = function ($event) {
+            $event.preventDefault();
+            window.clearTimeout(this.touchTimeout);
+            this.touchTimeout = window.setTimeout(this.createTootip.bind(this), 500);
+        };
+        TooltipDirective.prototype.onTouchEnd = function () {
+            window.clearTimeout(this.touchTimeout);
+            this.setHideTooltipTimeout();
+        };
+        TooltipDirective.prototype.setHideTooltipTimeout = function () {
+            this.destroy();
+        };
+        TooltipDirective.prototype.createTootip = function () {
+            var _a;
+            if (this.componentRef === null && ((_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.length)) {
+                var componentFactory = this.componentFactoryResolver.resolveComponentFactory(TooltipComponent);
+                this.componentRef = componentFactory.create(this.injector);
+                this.appRef.attachView(this.componentRef.hostView);
+                var domElem = this.componentRef.hostView.rootNodes[0];
+                this.elementRef.nativeElement.appendChild(domElem);
+                this.setTooltipComponentProperties();
+                this.showTimeout = window.setTimeout(this.showTooltip.bind(this), this.showDelay);
+            }
+        };
+        TooltipDirective.prototype.showTooltip = function () {
+            if (this.componentRef !== null) {
+                this.componentRef.instance.visible = true;
+            }
+        };
+        TooltipDirective.prototype.setTooltipComponentProperties = function () {
+            var margin = 16;
+            var anchorSize = 5;
+            if (this.componentRef !== null) {
+                this.componentRef.instance.tooltip = this.tooltip;
+                this.componentRef.instance.escape = this.escape;
+                var _a = this.elementRef.nativeElement.getBoundingClientRect(), left = _a.left, right = _a.right, top_1 = _a.top, bottom = _a.bottom;
+                var tooltipHeight = bottom - top_1;
+                var tooltipWidth = right - left;
+                var safeSpace = 150;
+                var positioned = false;
+                var invalidOptions = [];
+                while (!positioned) {
+                    if (invalidOptions.includes(exports.TooltipPosition.Above)
+                        && invalidOptions.includes(exports.TooltipPosition.Below)
+                        && invalidOptions.includes(exports.TooltipPosition.Left)
+                        && invalidOptions.includes(exports.TooltipPosition.Right)) {
+                        this.destroy();
+                        throw new Error("No space to show tooltip");
+                    }
+                    switch (this.position) {
+                        case exports.TooltipPosition.Below: {
+                            if (invalidOptions.includes(exports.TooltipPosition.Below)) {
+                                this.position = exports.TooltipPosition.Left;
+                                break;
+                            }
+                            var bottomShift = document.body.clientHeight - bottom;
+                            if (bottomShift <= tooltipHeight + safeSpace) {
+                                this.position = exports.TooltipPosition.Above;
+                                invalidOptions.push(exports.TooltipPosition.Below);
+                                break;
+                            }
+                            this.componentRef.instance.left = Math.round(tooltipWidth / 2 + left);
+                            this.componentRef.instance.top = Math.round(bottom + margin);
+                            positioned = true;
+                            break;
+                        }
+                        case exports.TooltipPosition.Above: {
+                            if (invalidOptions.includes(exports.TooltipPosition.Above)) {
+                                this.position = exports.TooltipPosition.Left;
+                                break;
+                            }
+                            var topShift = top_1;
+                            if (topShift <= tooltipHeight + safeSpace) {
+                                this.position = exports.TooltipPosition.Below;
+                                invalidOptions.push(exports.TooltipPosition.Above);
+                                positioned = false;
+                                break;
+                            }
+                            this.componentRef.instance.left = Math.round(tooltipWidth / 2 + left);
+                            this.componentRef.instance.top = Math.round(top_1 - margin);
+                            positioned = true;
+                            break;
+                        }
+                        case exports.TooltipPosition.Right: {
+                            if (invalidOptions.includes(exports.TooltipPosition.Right)) {
+                                this.position = exports.TooltipPosition.Above;
+                                break;
+                            }
+                            var rightShift = document.body.clientWidth - right;
+                            if (rightShift <= tooltipWidth + safeSpace) {
+                                this.position = exports.TooltipPosition.Left;
+                                invalidOptions.push(exports.TooltipPosition.Right);
+                                positioned = false;
+                                break;
+                            }
+                            this.componentRef.instance.left = Math.round(right + margin);
+                            this.componentRef.instance.top = Math.round(top_1 + tooltipHeight / 2 - anchorSize);
+                            positioned = true;
+                            break;
+                        }
+                        case exports.TooltipPosition.Left: {
+                            if (invalidOptions.includes(exports.TooltipPosition.Left)) {
+                                this.position = exports.TooltipPosition.Above;
+                                break;
+                            }
+                            var leftShift = left;
+                            if (leftShift <= tooltipWidth + safeSpace) {
+                                this.position = exports.TooltipPosition.Right;
+                                invalidOptions.push(exports.TooltipPosition.Left);
+                                positioned = false;
+                                break;
+                            }
+                            this.componentRef.instance.left = Math.round(left - margin);
+                            this.componentRef.instance.top = Math.round(top_1 + tooltipHeight / 2 - anchorSize);
+                            positioned = true;
+                            break;
+                        }
+                        default: {
+                            break;
+                        }
+                    }
+                    this.componentRef.instance.position = this.position;
+                }
+            }
+        };
+        TooltipDirective.prototype.destroy = function () {
+            if (this.componentRef !== null) {
+                window.clearTimeout(this.showTimeout);
+                this.appRef.detachView(this.componentRef.hostView);
+                this.componentRef.destroy();
+                this.componentRef = null;
+            }
+        };
+        TooltipDirective.ctorParameters = function () { return [
+            { type: core.ElementRef },
+            { type: core.ApplicationRef },
+            { type: core.ComponentFactoryResolver },
+            { type: core.Injector }
+        ]; };
+        __decorate([
+            core.Input("sTooltip")
+        ], TooltipDirective.prototype, "tooltip", void 0);
+        __decorate([
+            core.Input("tooltipPosition")
+        ], TooltipDirective.prototype, "position", void 0);
+        __decorate([
+            core.Input()
+        ], TooltipDirective.prototype, "showDelay", void 0);
+        __decorate([
+            core.Input()
+        ], TooltipDirective.prototype, "escape", void 0);
+        __decorate([
+            core.HostListener("mouseenter")
+        ], TooltipDirective.prototype, "onMouseEnter", null);
+        __decorate([
+            core.HostListener("mouseleave")
+        ], TooltipDirective.prototype, "onMouseLeave", null);
+        __decorate([
+            core.HostListener("touchstart", ["$event"])
+        ], TooltipDirective.prototype, "onTouchStart", null);
+        __decorate([
+            core.HostListener("touchend")
+        ], TooltipDirective.prototype, "onTouchEnd", null);
+        TooltipDirective = __decorate([
+            core.Directive({
+                selector: "[sTooltip]",
+            })
+        ], TooltipDirective);
+        return TooltipDirective;
+    }());
+
+    var TooltipModule = /** @class */ (function () {
+        function TooltipModule() {
+        }
+        TooltipModule = __decorate([
+            core.NgModule({
+                imports: [common.CommonModule],
+                declarations: [
+                    TooltipComponent,
+                    TooltipDirective,
+                ],
+                exports: [TooltipDirective],
+            })
+        ], TooltipModule);
+        return TooltipModule;
+    }());
+
     var InfoSignComponent = /** @class */ (function () {
         function InfoSignComponent() {
         }
         InfoSignComponent = __decorate([
             core.Component({
                 selector: "s-info-sign-component",
-                template: "<span style=\"display: inline-flex; justify-content: flex-start; align-items: baseline;\">\n    <span *ngTemplateOutlet=\"templateRef\"></span>\n    <i class=\"fa fa-info-circle\"\n        aria-hidden=\"true\"\n        style=\"padding-left: 10px\"\n        [pTooltip]=\"tooltip\"\n        [escape]=\"false\"></i>\n</span>"
+                template: "<span class=\"info-sign\">\n    <span *ngTemplateOutlet=\"templateRef\"></span>\n    <i\n        class=\"info-sign__icon fa fa-info-circle\"\n        aria-hidden=\"true\"\n        [sTooltip]=\"tooltip\"\n        [escape]=\"false\"\n        tooltipPosition=\"right\"\n        showDelay=\"0\">\n    </i>\n</span>",
+                styles: [".info-sign{-ms-flex-align:baseline;align-items:baseline;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:start;justify-content:flex-start}.info-sign .info-sign__icon{padding:0 12px}"]
             })
         ], InfoSignComponent);
         return InfoSignComponent;
@@ -3274,8 +3509,14 @@
         }
         InfoSignModule = __decorate([
             core.NgModule({
-                imports: [tooltip.TooltipModule, common.CommonModule],
-                declarations: [InfoSignDirective, InfoSignComponent],
+                imports: [
+                    TooltipModule,
+                    common.CommonModule,
+                ],
+                declarations: [
+                    InfoSignDirective,
+                    InfoSignComponent,
+                ],
                 exports: [InfoSignDirective],
                 entryComponents: [InfoSignComponent],
             })
@@ -4553,7 +4794,7 @@
         ], TableColumnsComponent.prototype, "locale", void 0);
         TableColumnsComponent = __decorate([
             core.Component({
-                template: "<ng-template #columnsTemplate>\n    <td *ngFor=\"let column of formattedColumns\"\n        [ngStyle]=\"column.style\"\n        (click)=\"column.onColumnClick ? column.onColumnClick(rowValue) : null\">\n\n        <div *ngIf=\"column.type !== 'TOKENS' || !isArray(column.columnValue); else tokensTemplate\">\n            <span *ngIf=\"column.type !== 'LINK'\"\n                [pTooltip]=\"column.tooltip\"\n                [escape]=\"false\"\n                [ngClass]=\"column.badgeClass\">\n                <ng-container *ngTemplateOutlet=\"columnValueTemplate\"></ng-container> \n            </span>\n\n            <a *ngIf=\"column.type === 'LINK'\"\n                [pTooltip]=\"column.tooltip\"\n                [escape]=\"false\"\n                (click)=\"column.onLinkClick ? column.onLinkClick(rowValue) : null\">\n                <ng-container *ngTemplateOutlet=\"columnValueTemplate\"></ng-container> \n            </a>\n\n            <ng-template #columnValueTemplate>\n                <span *ngFor=\"let value of getSplittedString(column)\">\n                    <span [ngClass]=\"{ 'sds-empty-value': value.isUninformed }\">{{value.value}}</span>\n                    <span>{{value.separator}}</span>\n                </span>\n                <ng-container *ngIf=\"!!column.infoSign\">\n                    <span *sInfoSign=\"column.infoSign\"></span>\n                </ng-container>\n            </ng-template>\n        </div>\n\n        <ng-template #tokensTemplate>\n            <s-token-list\n                [tokens]=\"column.columnValue\"\n                [hidePointerEvents]=\"true\"\n            >\n            </s-token-list>\n            <ng-container *ngIf=\"!!column.infoSign\">\n                <span *sInfoSign=\"column.infoSign\"></span>\n            </ng-container>\n        </ng-template>\n    </td>\n</ng-template>\n",
+                template: "<ng-template #columnsTemplate>\n    <td *ngFor=\"let column of formattedColumns\"\n        [ngStyle]=\"column.style\"\n        (click)=\"column.onColumnClick ? column.onColumnClick(rowValue) : null\">\n\n        <div *ngIf=\"column.type !== 'TOKENS' || !isArray(column.columnValue); else tokensTemplate\">\n            <span *ngIf=\"column.type !== 'LINK'\"\n                [sTooltip]=\"column.tooltip\"\n                [escape]=\"false\"\n                [ngClass]=\"column.badgeClass\">\n                <ng-container *ngTemplateOutlet=\"columnValueTemplate\"></ng-container> \n            </span>\n\n            <a *ngIf=\"column.type === 'LINK'\"\n                [sTooltip]=\"column.tooltip\"\n                [escape]=\"false\"\n                (click)=\"column.onLinkClick ? column.onLinkClick(rowValue) : null\">\n                <ng-container *ngTemplateOutlet=\"columnValueTemplate\"></ng-container> \n            </a>\n\n            <ng-template #columnValueTemplate>\n                <span *ngFor=\"let value of getSplittedString(column)\">\n                    <span [ngClass]=\"{ 'sds-empty-value': value.isUninformed }\">{{value.value}}</span>\n                    <span>{{value.separator}}</span>\n                </span>\n                <ng-container *ngIf=\"!!column.infoSign\">\n                    <span *sInfoSign=\"column.infoSign\"></span>\n                </ng-container>\n            </ng-template>\n        </div>\n\n        <ng-template #tokensTemplate>\n            <s-token-list\n                [tokens]=\"column.columnValue\"\n                [hidePointerEvents]=\"true\"\n            >\n            </s-token-list>\n            <ng-container *ngIf=\"!!column.infoSign\">\n                <span *sInfoSign=\"column.infoSign\"></span>\n            </ng-container>\n        </ng-template>\n    </td>\n</ng-template>\n",
                 selector: "s-table-columns",
                 styles: [":host{display:none}"]
             }),
@@ -4815,7 +5056,7 @@
             core.NgModule({
                 imports: [
                     common.CommonModule,
-                    tooltip.TooltipModule,
+                    TooltipModule,
                     TokenListModule,
                     core$1.TranslateModule,
                     ButtonModule,
@@ -9966,54 +10207,58 @@
     exports.TimelineModule = TimelineModule;
     exports.TokenListComponent = TokenListComponent;
     exports.TokenListModule = TokenListModule;
+    exports.TooltipModule = TooltipModule;
     exports.ɵa = LocalizedCurrencyImpurePipe;
     exports.ɵb = LocalizedBignumberPipe;
-    exports.ɵbb = DecimalField;
-    exports.ɵbc = StructureModule;
-    exports.ɵbd = HeaderComponent;
-    exports.ɵbe = FooterComponent;
-    exports.ɵbf = NumberLocaleOptions;
-    exports.ɵbg = ThumbnailService;
-    exports.ɵbh = TimelineItemModule;
-    exports.ɵbi = TimelineIconItemComponent;
-    exports.ɵbj = HorizontalTimelineModule;
-    exports.ɵbk = HorizontalTimelineComponent;
-    exports.ɵbl = VerticalTimelineModule;
-    exports.ɵbm = VerticalTimelineComponent;
-    exports.ɵbn = RangeLineComponent;
-    exports.ɵbo = CollapseOptionComponent;
-    exports.ɵbp = CollapsedItemsComponent;
-    exports.ɵbq = VerticalItemsComponent;
-    exports.ɵbr = InfiniteScrollModule;
-    exports.ɵbs = InfiniteScrollDirective;
-    exports.ɵbt = CustomTranslationsModule;
-    exports.ɵbu = CodeEditorComponent;
-    exports.ɵbv = CoreFacade;
-    exports.ɵbw = CodeMirror6Core;
+    exports.ɵba = TextAreaFieldComponent;
+    exports.ɵbb = TextFieldComponent;
+    exports.ɵbc = BooleanSwitchFieldComponent;
+    exports.ɵbe = DecimalField;
+    exports.ɵbf = StructureModule;
+    exports.ɵbg = HeaderComponent;
+    exports.ɵbh = FooterComponent;
+    exports.ɵbi = NumberLocaleOptions;
+    exports.ɵbj = ThumbnailService;
+    exports.ɵbk = TimelineItemModule;
+    exports.ɵbl = TimelineIconItemComponent;
+    exports.ɵbm = HorizontalTimelineModule;
+    exports.ɵbn = HorizontalTimelineComponent;
+    exports.ɵbo = VerticalTimelineModule;
+    exports.ɵbp = VerticalTimelineComponent;
+    exports.ɵbq = RangeLineComponent;
+    exports.ɵbr = CollapseOptionComponent;
+    exports.ɵbs = CollapsedItemsComponent;
+    exports.ɵbt = VerticalItemsComponent;
+    exports.ɵbu = InfiniteScrollModule;
+    exports.ɵbv = InfiniteScrollDirective;
+    exports.ɵbw = CustomTranslationsModule;
+    exports.ɵbx = CodeEditorComponent;
+    exports.ɵby = CoreFacade;
+    exports.ɵbz = CodeMirror6Core;
     exports.ɵc = LocalizedBignumberImpurePipe;
     exports.ɵd = EmptyStateGoBackComponent;
-    exports.ɵe = InfoSignComponent;
-    exports.ɵf = TableColumnsComponent;
-    exports.ɵg = TablePagingComponent;
-    exports.ɵh = AutocompleteFieldComponent;
-    exports.ɵi = BooleanFieldComponent;
-    exports.ɵj = CalendarFieldComponent;
-    exports.ɵk = ChipsFieldComponent;
-    exports.ɵl = CurrencyFieldComponent;
-    exports.ɵm = DynamicFieldComponent;
-    exports.ɵn = DynamicFormDirective;
-    exports.ɵo = FieldsetComponent;
-    exports.ɵp = FileUploadComponent$1;
-    exports.ɵq = LookupFieldComponent;
-    exports.ɵr = NumberFieldComponent;
-    exports.ɵs = BignumberFieldComponent;
-    exports.ɵt = RadioButtonComponent;
-    exports.ɵu = RowComponent;
-    exports.ɵv = SectionComponent;
-    exports.ɵw = SelectFieldComponent;
-    exports.ɵx = TextAreaFieldComponent;
-    exports.ɵy = TextFieldComponent;
-    exports.ɵz = BooleanSwitchFieldComponent;
+    exports.ɵe = TooltipModule;
+    exports.ɵf = TooltipComponent;
+    exports.ɵg = TooltipDirective;
+    exports.ɵh = InfoSignComponent;
+    exports.ɵi = TableColumnsComponent;
+    exports.ɵj = TablePagingComponent;
+    exports.ɵk = AutocompleteFieldComponent;
+    exports.ɵl = BooleanFieldComponent;
+    exports.ɵm = CalendarFieldComponent;
+    exports.ɵn = ChipsFieldComponent;
+    exports.ɵo = CurrencyFieldComponent;
+    exports.ɵp = DynamicFieldComponent;
+    exports.ɵq = DynamicFormDirective;
+    exports.ɵr = FieldsetComponent;
+    exports.ɵs = FileUploadComponent$1;
+    exports.ɵt = LookupFieldComponent;
+    exports.ɵu = NumberFieldComponent;
+    exports.ɵv = BignumberFieldComponent;
+    exports.ɵw = RadioButtonComponent;
+    exports.ɵx = RowComponent;
+    exports.ɵy = SectionComponent;
+    exports.ɵz = SelectFieldComponent;
 
     Object.defineProperty(exports, '__esModule', { value: true });