@seniorsistemas/angular-components 16.2.1 → 16.2.2

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

@@ -1238,6 +1238,7 @@
             this.type = config.type;
             this.size = new FieldSize(config.size || {});
             this.errorMessages = config.errorMessages;
+            this.bottomTemplate = config.bottomTemplate;
             this.gridClass = Object.keys(this.size).map(function (key) { return "ui-" + key + "-" + _this.size[key]; });
             this.defaultValue = config.defaultValue;
             this.representedBy = config.representedBy;
@@ -3281,6 +3282,12 @@
         MobileBehavior["Tap"] = "tap";
     })(MobileBehavior || (MobileBehavior = {}));
 
+    var TooltipEvent;
+    (function (TooltipEvent) {
+        TooltipEvent["Focus"] = "focus";
+        TooltipEvent["Hover"] = "hover";
+    })(TooltipEvent || (TooltipEvent = {}));
+
     var TooltipDirective = /** @class */ (function () {
         function TooltipDirective(elementRef, appRef, componentFactoryResolver, injector) {
             this.elementRef = elementRef;
@@ -3289,7 +3296,9 @@
             this.injector = injector;
             this.position = exports.TooltipPosition.Top;
             this.showDelay = 500;
+            this.tooltipEvent = TooltipEvent.Hover;
             this.escape = false;
+            this.visible = true;
             this.mobileBehavior = MobileBehavior.Pressing;
             this.componentRef = null;
         }
@@ -3302,28 +3311,50 @@
         // whenever the component with the tooltip is clicked I destroy the tooltip.
         // whenever a key is pressed on the component with the tooltip I destroy the tooltip.
         TooltipDirective.prototype.onClick = function () {
-            if (!navigator.userAgent.match(/Android/i) && !navigator.userAgent.match(/iPhone/i)) {
+            if (this.tooltipEvent === TooltipEvent.Hover &&
+                !navigator.userAgent.match(/Android/i) &&
+                !navigator.userAgent.match(/iPhone/i)) {
                 this.destroy();
             }
         };
         // whenever you touch outside the component with the tooltip I destroy the tooltip.
         TooltipDirective.prototype.onDocumentTouchStart = function () {
-            this.destroy();
+            if (this.tooltipEvent === TooltipEvent.Hover) {
+                this.destroy();
+            }
+        };
+        TooltipDirective.prototype.onFocus = function () {
+            if (this.tooltipEvent === TooltipEvent.Focus) {
+                this.createTootip();
+            }
+        };
+        TooltipDirective.prototype.onBlur = function () {
+            if (this.tooltipEvent === TooltipEvent.Focus) {
+                this.destroy();
+            }
         };
         TooltipDirective.prototype.onMouseEnter = function () {
-            this.createTootip();
+            if (this.tooltipEvent === TooltipEvent.Hover) {
+                this.createTootip();
+            }
         };
         TooltipDirective.prototype.onMouseLeave = function () {
-            this.setHideTooltipTimeout();
+            if (this.tooltipEvent === TooltipEvent.Hover) {
+                this.setHideTooltipTimeout();
+            }
         };
         TooltipDirective.prototype.onTouchStart = function () {
-            window.clearTimeout(this.touchTimeout);
-            this.touchTimeout = window.setTimeout(this.createTootip.bind(this), this.mobileBehavior === MobileBehavior.Pressing ? this.showDelay : 0);
+            if (this.tooltipEvent === TooltipEvent.Hover) {
+                window.clearTimeout(this.touchTimeout);
+                this.touchTimeout = window.setTimeout(this.createTootip.bind(this), this.mobileBehavior === MobileBehavior.Pressing ? this.showDelay : 0);
+            }
         };
         TooltipDirective.prototype.onTouchEnd = function () {
-            if (this.mobileBehavior === MobileBehavior.Pressing) {
-                window.clearTimeout(this.touchTimeout);
-                this.setHideTooltipTimeout();
+            if (this.tooltipEvent === TooltipEvent.Hover) {
+                if (this.mobileBehavior === MobileBehavior.Pressing) {
+                    window.clearTimeout(this.touchTimeout);
+                    this.setHideTooltipTimeout();
+                }
             }
         };
         TooltipDirective.prototype.validatePosition = function () {
@@ -3483,9 +3514,15 @@
         __decorate([
             core.Input()
         ], TooltipDirective.prototype, "displayTime", void 0);
+        __decorate([
+            core.Input()
+        ], TooltipDirective.prototype, "tooltipEvent", void 0);
         __decorate([
             core.Input()
         ], TooltipDirective.prototype, "escape", void 0);
+        __decorate([
+            core.Input()
+        ], TooltipDirective.prototype, "visible", void 0);
         __decorate([
             core.Input()
         ], TooltipDirective.prototype, "mobileBehavior", void 0);
@@ -3496,6 +3533,12 @@
         __decorate([
             core.HostListener("document:touchstart")
         ], TooltipDirective.prototype, "onDocumentTouchStart", null);
+        __decorate([
+            core.HostListener("focus")
+        ], TooltipDirective.prototype, "onFocus", null);
+        __decorate([
+            core.HostListener("blur")
+        ], TooltipDirective.prototype, "onBlur", null);
         __decorate([
             core.HostListener("mouseenter")
         ], TooltipDirective.prototype, "onMouseEnter", null);
@@ -5627,7 +5670,7 @@
         DynamicFieldComponent = __decorate([
             core.Component({
                 selector: "s-dynamic-field",
-                template: "\n        <div class=\"ui-fluid\" [formGroup]=\"form\">\n            <div class=\"ui-g\">\n                <ng-container *ngFor=\"let field of fields\">\n                    <div [ngClass]=\"field.gridClass\" *ngIf=\"field.visible()\">\n                        <span *ngIf=\"field.label\"><label [for]=\"field.name\"\n                            [ngClass]=\"{ 'required': field.required() }\" *sInfoSign=\"field.infoSign\">{{ field.label }}</label></span>\n                        <ng-container *sDynamicForm=\"{ id: id, config: field, group: form}\"></ng-container>\n                        <s-control-errors [form]=\"form\" [control]=\"form.controls[field.name]\"\n                            [errorMessages]=\"getErrorMessages(field.errorMessages)\"></s-control-errors>\n                    </div>\n                </ng-container>\n            </div>\n        </div>\n    "
+                template: "\n        <div class=\"ui-fluid\" [formGroup]=\"form\">\n            <div class=\"ui-g\">\n                <ng-container *ngFor=\"let field of fields\">\n                    <div [ngClass]=\"field.gridClass\" *ngIf=\"field.visible()\">\n                        <span *ngIf=\"field.label\"><label [for]=\"field.name\"\n                            [ngClass]=\"{ 'required': field.required() }\" *sInfoSign=\"field.infoSign\">{{ field.label }}</label></span>\n                        <ng-container *sDynamicForm=\"{ id: id, config: field, group: form}\"></ng-container>\n                        <s-control-errors [form]=\"form\" [control]=\"form.controls[field.name]\"\n                            [errorMessages]=\"getErrorMessages(field.errorMessages)\"></s-control-errors>\n                        <ng-template *ngIf=\"field?.bottomTemplate\" [ngTemplateOutlet]=\"field.bottomTemplate\"></ng-template>\n                    </div>\n                </ng-container>\n            </div>\n        </div>\n    "
             })
         ], DynamicFieldComponent);
         return DynamicFieldComponent;