@seniorsistemas/angular-components 16.2.1 → 16.2.2

package/fesm5/seniorsistemas-angular-components.js

@@ -1065,6 +1065,7 @@ var Field = /** @class */ (function () {
         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;
@@ -3108,6 +3109,12 @@ var MobileBehavior;
     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;
@@ -3116,7 +3123,9 @@ var TooltipDirective = /** @class */ (function () {
         this.injector = injector;
         this.position = TooltipPosition.Top;
         this.showDelay = 500;
+        this.tooltipEvent = TooltipEvent.Hover;
         this.escape = false;
+        this.visible = true;
         this.mobileBehavior = MobileBehavior.Pressing;
         this.componentRef = null;
     }
@@ -3129,28 +3138,50 @@ var TooltipDirective = /** @class */ (function () {
     // 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 () {
@@ -3310,9 +3341,15 @@ var TooltipDirective = /** @class */ (function () {
     __decorate([
         Input()
     ], TooltipDirective.prototype, "displayTime", void 0);
+    __decorate([
+        Input()
+    ], TooltipDirective.prototype, "tooltipEvent", void 0);
     __decorate([
         Input()
     ], TooltipDirective.prototype, "escape", void 0);
+    __decorate([
+        Input()
+    ], TooltipDirective.prototype, "visible", void 0);
     __decorate([
         Input()
     ], TooltipDirective.prototype, "mobileBehavior", void 0);
@@ -3323,6 +3360,12 @@ var TooltipDirective = /** @class */ (function () {
     __decorate([
         HostListener("document:touchstart")
     ], TooltipDirective.prototype, "onDocumentTouchStart", null);
+    __decorate([
+        HostListener("focus")
+    ], TooltipDirective.prototype, "onFocus", null);
+    __decorate([
+        HostListener("blur")
+    ], TooltipDirective.prototype, "onBlur", null);
     __decorate([
         HostListener("mouseenter")
     ], TooltipDirective.prototype, "onMouseEnter", null);
@@ -5454,7 +5497,7 @@ var DynamicFieldComponent = /** @class */ (function () {
     DynamicFieldComponent = __decorate([
         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;