@seniorsistemas/angular-components 17.17.13 → 17.17.14

package/fesm2015/seniorsistemas-angular-components.js

@@ -372,6 +372,8 @@ TooltipComponent = __decorate([
     })
 ], TooltipComponent);
 
+const isNullOrUndefined = (value) => value === null || value === undefined;
+
 const DEFAULT_TIMER = 300;
 let DebounceUtils = class DebounceUtils {
     debounce(func, timeout = DEFAULT_TIMER) {
@@ -430,8 +432,9 @@ let TooltipDirective = class TooltipDirective {
         this.visible = true;
         this.mobileBehavior = MobileBehavior.Pressing;
         this.componentRef = null;
+        this.existFocusedInputRefTooltip = false;
         this.boundOnWindowMouseMoveFunction = this.onWindowMouseMove.bind(this);
-        this.debounceCreateTooltipFunction = this.debounceUtils.debounceLeading(() => this.createTootip());
+        this.debounceCreateTooltipFunction = this.debounceUtils.debounceLeading(() => this._createTooltip(true, true));
     }
     ngOnInit() {
         this.validatePosition();
@@ -452,7 +455,7 @@ let TooltipDirective = class TooltipDirective {
             left: Math.min(elementRect.left, toolTipRect.left),
             bottom: Math.max(elementRect.bottom, toolTipRect.bottom),
         };
-        if (this.isMousePositionOutsideOfElement(event.clientX, event.clientY, totalElementArea)) {
+        if (this.isMousePositionOutsideOfElement(event.clientX, event.clientY, totalElementArea) && !this.existFocusedInputRefTooltip) {
             this.destroy();
         }
     }
@@ -466,15 +469,17 @@ let TooltipDirective = class TooltipDirective {
         if (this.focusedInputRef) {
             const inputFocus = this.focusedInputRef;
             const icon = this.getIconFromFocusedInput();
-            this.renderer.listen(this.focusedInputRef, "focus", () => {
+            this.renderer.listen(inputFocus, "focus", () => {
                 if (icon) {
-                    this.createTootipByFocus(icon);
+                    this.existFocusedInputRefTooltip = true;
+                    this._createTooltip(false, false);
                 }
             });
             this.renderer.listen(inputFocus, "blur", () => {
                 if (icon) {
                     this.removeTooltip(icon);
                     this.destroy();
+                    this.existFocusedInputRefTooltip = false;
                 }
             });
         }
@@ -505,7 +510,7 @@ let TooltipDirective = class TooltipDirective {
     }
     onFocus() {
         if (this.tooltipEvent === TooltipEvent.Focus) {
-            this.createTootip();
+            this._createTooltip(true, true);
         }
     }
     onBlur() {
@@ -519,14 +524,17 @@ let TooltipDirective = class TooltipDirective {
         }
     }
     onMouseLeave() {
-        if (this.tooltipEvent === TooltipEvent.Hover) {
+        if (this.tooltipEvent === TooltipEvent.Hover && !this.existFocusedInputRefTooltip) {
             this.destroy();
         }
     }
     onTouchStart() {
         if (this.tooltipEvent === TooltipEvent.Hover) {
             window.clearTimeout(this.touchTimeout);
-            this.touchTimeout = window.setTimeout(this.createTootip.bind(this), this.mobileBehavior === MobileBehavior.Pressing ? this.showDelay : 0);
+            const _delay = this.mobileBehavior === MobileBehavior.Pressing ? this.showDelay : 0;
+            this.touchTimeout = window.setTimeout(() => {
+                this._createTooltip(true, true);
+            }, _delay);
         }
     }
     onTouchEnd() {
@@ -544,42 +552,34 @@ let TooltipDirective = class TooltipDirective {
             throw new Error(`Tooltip ${this.position} position is unexpected`);
         }
     }
-    createTootip() {
-        var _a;
-        if (this.componentRef === null && ((_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.length)) {
-            const domElem = this.getDomElement();
-            document.body.appendChild(domElem);
-            this.setTooltipComponentProperties();
-            this.showTimeout = window.setTimeout(this.showTooltip.bind(this), this.showDelay);
-            this.tooltipDivElement = domElem.querySelector(".tooltip");
-            if (this.displayTime) {
-                window.setTimeout(this.destroy.bind(this), this.displayTime);
-            }
-        }
-    }
     getDomElement() {
         const componentFactory = this.componentFactoryResolver.resolveComponentFactory(TooltipComponent);
         this.componentRef = componentFactory.create(this.injector);
         this.appRef.attachView(this.componentRef.hostView);
         return this.componentRef.hostView.rootNodes[0];
     }
-    /**
-     * Cria um tooltip para o icone do input em focus.
-     *
-     * @param icon O ícone do input em focus.
-     */
-    createTootipByFocus(icon) {
+    _createTooltip(useShowDelay = false, autoDestroy = true) {
         var _a;
-        if (this.componentRef === null && ((_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.length)) {
-            const domElem = this.getDomElement();
-            const tooltip = domElem.querySelector(".tooltip");
-            icon.appendChild(tooltip);
-            this.setTooltipComponentProperties();
-            this.setTooltipPositionProperty(icon);
-            setTimeout(() => tooltip.classList.add("tooltip--visible"), 0);
-            this.renderer.listen(window, "scroll", () => {
-                this.setTooltipPositionProperty(icon);
-            });
+        const hasText = ((_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.length) > 0;
+        const hasComponentRef = this.componentRef !== null;
+        if (!hasText || hasComponentRef) {
+            return;
+        }
+        const domElement = this.getDomElement();
+        document.body.appendChild(domElement);
+        this.tooltipDivElement = domElement.querySelector(".tooltip");
+        this.setTooltipComponentProperties();
+        const _showDelay = useShowDelay ? this.showDelay : 0;
+        setTimeout(() => {
+            this.showTooltip();
+        }, _showDelay);
+        this.renderer.listen(window, "scroll", () => {
+            this.setTooltipPositionProperty();
+        });
+        if (autoDestroy && this.displayTime) {
+            setTimeout(() => {
+                this.destroy();
+            }, this.displayTime);
         }
     }
     showTooltip() {
@@ -589,10 +589,13 @@ let TooltipDirective = class TooltipDirective {
             window.addEventListener("mousemove", this.boundOnWindowMouseMoveFunction);
         }
     }
-    setTooltipPositionProperty(element) {
+    setTooltipPositionProperty() {
+        if (!this.componentRef) {
+            return;
+        }
         const margin = 20;
         const anchorSize = 5;
-        const domElem = element || this.componentRef.hostView.rootNodes[0].querySelector("#tooltip");
+        const domElem = this.componentRef.hostView.rootNodes[0].querySelector("#tooltip");
         const { height, width } = domElem.getBoundingClientRect();
         const { left, right, top, bottom } = this.elementRef.nativeElement.getBoundingClientRect();
         const positions = [
@@ -642,7 +645,7 @@ let TooltipDirective = class TooltipDirective {
         }
     }
     destroy() {
-        if (this.componentRef !== null) {
+        if (!isNullOrUndefined(this.componentRef)) {
             window.clearTimeout(this.showTimeout);
             this.appRef.detachView(this.componentRef.hostView);
             this.componentRef.destroy();
@@ -4967,8 +4970,6 @@ const convertToMomentDateFormat = (format) => {
         .replace(/\byy\b/, "YYYY"); // year (four digits)
 };
 
-const isNullOrUndefined = (value) => value === null || value === undefined;
-
 var CountryPhonePickerComponent_1;
 let CountryPhonePickerComponent = CountryPhonePickerComponent_1 = class CountryPhonePickerComponent {
     constructor(_countryPhonePickerService, _translate, _eRef, platformId) {
@@ -5328,7 +5329,7 @@ class FieldSize {
 
 class Field {
     constructor(config) {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f;
         if ((_a = config.footer) === null || _a === void 0 ? void 0 : _a.help) {
             config.footer.help = Object.assign({ visible: () => true }, (_b = config.footer) === null || _b === void 0 ? void 0 : _b.help);
         }
@@ -5355,6 +5356,7 @@ class Field {
         this.CustomFieldClass = config.CustomFieldClass;
         this.CustomFieldComponentClass = config.CustomFieldComponentClass;
         this.displayTimeInfoSign = (_e = config.displayTimeInfoSign) !== null && _e !== void 0 ? _e : 5000;
+        this.useInfoSignFocusedInputRef = (_f = config.useInfoSignFocusedInputRef) !== null && _f !== void 0 ? _f : true;
     }
 }
 
@@ -7245,6 +7247,7 @@ let InfoSignDirective = class InfoSignDirective {
         this.viewContainer = viewContainer;
         this.componentFactoryResolver = componentFactoryResolver;
         this.displayTime = 5000;
+        this.useFocusedInputRef = true;
     }
     ngOnChanges() {
         this.createInfoSign();
@@ -7262,10 +7265,13 @@ let InfoSignDirective = class InfoSignDirective {
             this.viewContainer.clear();
             const componentFactory = this.componentFactoryResolver.resolveComponentFactory(InfoSignComponent);
             this.componentRef = this.viewContainer.createComponent(componentFactory);
-            this.componentRef.instance.templateRef = this.templateRef;
-            this.componentRef.instance.tooltip = this.sInfoSign;
-            this.componentRef.instance.displayTime = this.displayTime;
-            this.componentRef.instance.focusedInputRef = this.focusedInputRef;
+            const _infoSignComponent = this.componentRef.instance;
+            _infoSignComponent.templateRef = this.templateRef;
+            _infoSignComponent.tooltip = this.sInfoSign;
+            _infoSignComponent.displayTime = this.displayTime;
+            if (this.useFocusedInputRef) {
+                _infoSignComponent.focusedInputRef = this.focusedInputRef;
+            }
         }
         else if (this.componentRef && this.sInfoSign) {
             this.componentRef.instance.tooltip = this.sInfoSign;
@@ -7290,6 +7296,9 @@ __decorate([
 __decorate([
     Input('sInfoSignFocusedInputRef')
 ], InfoSignDirective.prototype, "focusedInputRef", void 0);
+__decorate([
+    Input('sInfoSignUseFocusedInputRef')
+], InfoSignDirective.prototype, "useFocusedInputRef", void 0);
 InfoSignDirective = __decorate([
     Directive({
         selector: "[sInfoSign]"
@@ -10056,12 +10065,19 @@ __decorate([
 ], RadioButtonComponent.prototype, "onFocus", void 0);
 RadioButtonComponent = __decorate([
     Component({
-        template: "<s-field-label [field]=\"field\"></s-field-label>\n\n<ng-container *ngIf=\"field.verticalAlignment;else horizontalAlignment\">\n    <div class=\"ui-g\">\n        <div\n            *ngFor=\"let option of field.options; let i = index\"\n            class=\"ui-g-12\">\n            <ng-container\n                [ngTemplateOutlet]=\"radioButton\"\n                [ngTemplateOutletContext]=\"{option: option, index: i}\">\n            </ng-container>\n        </div>\n        <s-button\n            *ngIf=\"field.showClear && !field.required() && !formControl.disabled\"\n            [label]=\"field.clearLabel || 'Clear selection'\"\n            (onClick)=\"onClear()\"\n            priority=\"link\">\n        </s-button>\n    </div>\n</ng-container>\n\n<ng-template #horizontalAlignment>\n    <div class=\"ui-g\">\n        <ng-container\n            *ngFor=\"let option of field.options; let i = index\"\n            [ngTemplateOutlet]=\"radioButton\"\n            [ngTemplateOutletContext]=\"{option: option, index: i}\">\n        </ng-container>\n    </div>\n    <s-button\n        *ngIf=\"field.showClear && !field.required() && !formControl.disabled\"\n        class=\"horizontal-clear-option\"\n        [label]=\"field.clearLabel || 'Clear selection'\"\n        (onClick)=\"onClear()\"\n        priority=\"link\">\n    </s-button>\n</ng-template>\n\n<ng-template #radioButton let-option=\"option\" let-i=\"index\">\n    <p-radioButton\n        [name]=\"field.name\"\n        [value]=\"option.value\"\n        [label]=\"option.label\"\n        [formControl]=\"formControl\"\n        [inputId]=\"(field.id || field.name) + '-' + i\"\n        [sTooltip]=\"field.tooltip\"\n        (onClick)=\"onClick.next($event)\"\n        (onFocus)=\"onFocus.next($event)\"\n        (onBlur)=\"field.onBlur ? field.onBlur($event) : null\">\n    </p-radioButton>\n</ng-template>\n",
+        template: "<s-field-label [field]=\"field\"></s-field-label>\n\n<ng-container *ngIf=\"field.verticalAlignment;else horizontalAlignment\">\n    <div class=\"ui-g\">\n        <div\n            *ngFor=\"let option of field.options; let i = index\"\n            class=\"ui-g-12\">\n            <ng-container\n                [ngTemplateOutlet]=\"radioButton\"\n                [ngTemplateOutletContext]=\"{option: option, index: i}\">\n            </ng-container>\n        </div>\n        <s-button\n            *ngIf=\"field.showClear && !field.required() && !formControl.disabled\"\n            [label]=\"field.clearLabel || 'Clear selection'\"\n            (onClick)=\"onClear()\"\n            priority=\"link\">\n        </s-button>\n    </div>\n</ng-container>\n\n<ng-template #horizontalAlignment>\n    <div class=\"ui-g horizontal-radio-buttons-container\">\n        <ng-container\n            *ngFor=\"let option of field.options; let i = index\"\n            [ngTemplateOutlet]=\"radioButton\"\n            [ngTemplateOutletContext]=\"{option: option, index: i}\">\n        </ng-container>\n    </div>\n    <s-button\n        *ngIf=\"field.showClear && !field.required() && !formControl.disabled\"\n        class=\"horizontal-clear-option\"\n        [label]=\"field.clearLabel || 'Clear selection'\"\n        (onClick)=\"onClear()\"\n        priority=\"link\">\n    </s-button>\n</ng-template>\n\n<ng-template #radioButton let-option=\"option\" let-i=\"index\">\n    <p-radioButton\n        class=\"radio-button-item\"\n        [name]=\"field.name\"\n        [value]=\"option.value\"\n        [label]=\"option.label\"\n        [formControl]=\"formControl\"\n        [inputId]=\"(field.id || field.name) + '-' + i\"\n        [sTooltip]=\"field.tooltip\"\n        (onClick)=\"onClick.next($event)\"\n        (onFocus)=\"onFocus.next($event)\"\n        (onBlur)=\"field.onBlur ? field.onBlur($event) : null\">\n    </p-radioButton>\n</ng-template>\n",
         encapsulation: ViewEncapsulation.None,
         styles: [`
         s-button.horizontal-clear-option button {
             width: min-content !important;
         }
+
+        .horizontal-radio-buttons-container {
+            gap: 20px 40px;
+            .radio-button-item {
+                margin: 0;
+            }
+        }
     `]
     })
 ], RadioButtonComponent);
@@ -10376,7 +10392,7 @@ RowComponent = __decorate([
             <ng-container *ngFor="let field of config.fields">
                 <div [ngClass]="field.gridClass" *ngIf="field.visible()">
                     <ng-container *ngIf="field.type === FieldType.Custom && field.label" >
-                        <label *sInfoSign="field.infoSign" [for]="field.name" [ngClass]="{ required: field.required() }" >
+                        <label *sInfoSign="field.infoSign; displayTime: field.displayTimeInfoSign; useFocusedInputRef: field.useInfoSignFocusedInputRef" [for]="field.name" [ngClass]="{ required: field.required() }" >
                             {{ field.label }}
                         </label>
                     </ng-container>
@@ -10444,7 +10460,7 @@ __decorate([
 DynamicFieldComponent = __decorate([
     Component({
         selector: "s-dynamic-field",
-        template: "<div class=\"ui-fluid\" [formGroup]=\"form\">\n    <div class=\"ui-g\">\n        <ng-container *ngFor=\"let field of fields\">\n            <div\n                *ngIf=\"!field.visible || field.visible()\"\n                [ngClass]=\"field.gridClass\">\n\n                <ng-container *ngIf=\"field.label && field.type === FieldType.Custom\">\n                    <label\n                        *sInfoSign=\"\n                            field.infoSign;\n                            displayTime: field.displayTimeInfoSign\n                        \"\n                        [for]=\"field.name\"\n                        [ngClass]=\"{ required: field.required() }\"\n                    >\n                        {{ field.label }}\n                    </label>\n                </ng-container>\n\n                <ng-container\n                    *sDynamicForm=\"{\n                        id: id,\n                        config: field,\n                        group: form\n                    }\"\n                ></ng-container>\n\n                <s-control-errors\n                    [form]=\"form\"\n                    [control]=\"form.controls[field.name]\"\n                    [errorMessages]=\"getErrorMessages(field.errorMessages)\"\n                ></s-control-errors>\n\n                <ng-container *ngIf=\"field.footer\">\n                    <ng-container *ngIf=\"field.footer.help\">\n                        <span\n                            *ngIf=\"\n                                field.footer.help.visible({\n                                    abstractControl: form.controls[field.name],\n                                    formField: field\n                                })\n                            \"\n                            style=\"color: #888b99\"\n                        >\n                            {{ field.footer.help.text }}\n                        </span>\n                    </ng-container>\n\n                    <ng-container *ngIf=\"field.footer.link\">\n                        <div\n                            *ngIf=\"\n                                field.footer.link.visible({\n                                    abstractControl: form.controls[field.name],\n                                    formField: field\n                                })\n                            \"\n                            class=\"ui-g\"\n                            style=\"margin-left: -10px\"\n                        >\n                            <s-button\n                                [label]=\"field.footer.link.label\"\n                                priority=\"link\"\n                                (onClick)=\"\n                                    field.footer.link.onClick({\n                                        abstractControl:\n                                            form.controls[field.name],\n                                        formField: field\n                                    })\n                                \"\n                                [auxiliary]=\"true\"\n                            ></s-button>\n                        </div>\n                    </ng-container>\n                </ng-container>\n\n                <ng-template\n                    *ngIf=\"field?.bottomTemplate\"\n                    [ngTemplateOutlet]=\"field.bottomTemplate\"\n                ></ng-template>\n            </div>\n        </ng-container>\n    </div>\n</div>\n"
+        template: "<div class=\"ui-fluid\" [formGroup]=\"form\">\n    <div class=\"ui-g\">\n        <ng-container *ngFor=\"let field of fields\">\n            <div\n                *ngIf=\"!field.visible || field.visible()\"\n                [ngClass]=\"field.gridClass\">\n\n                <ng-container *ngIf=\"field.label && field.type === FieldType.Custom\">\n                    <label\n                        *sInfoSign=\"field.infoSign; displayTime: field.displayTimeInfoSign; useFocusedInputRef: field.useInfoSignFocusedInputRef\"\n                        [for]=\"field.name\"\n                        [ngClass]=\"{ required: field.required() }\"\n                    >\n                        {{ field.label }}\n                    </label>\n                </ng-container>\n\n                <ng-container\n                    *sDynamicForm=\"{\n                        id: id,\n                        config: field,\n                        group: form\n                    }\"\n                ></ng-container>\n\n                <s-control-errors\n                    [form]=\"form\"\n                    [control]=\"form.controls[field.name]\"\n                    [errorMessages]=\"getErrorMessages(field.errorMessages)\"\n                ></s-control-errors>\n\n                <ng-container *ngIf=\"field.footer\">\n                    <ng-container *ngIf=\"field.footer.help\">\n                        <span\n                            *ngIf=\"\n                                field.footer.help.visible({\n                                    abstractControl: form.controls[field.name],\n                                    formField: field\n                                })\n                            \"\n                            style=\"color: #888b99\"\n                        >\n                            {{ field.footer.help.text }}\n                        </span>\n                    </ng-container>\n\n                    <ng-container *ngIf=\"field.footer.link\">\n                        <div\n                            *ngIf=\"\n                                field.footer.link.visible({\n                                    abstractControl: form.controls[field.name],\n                                    formField: field\n                                })\n                            \"\n                            class=\"ui-g\"\n                            style=\"margin-left: -10px\"\n                        >\n                            <s-button\n                                [label]=\"field.footer.link.label\"\n                                priority=\"link\"\n                                (onClick)=\"\n                                    field.footer.link.onClick({\n                                        abstractControl:\n                                            form.controls[field.name],\n                                        formField: field\n                                    })\n                                \"\n                                [auxiliary]=\"true\"\n                            ></s-button>\n                        </div>\n                    </ng-container>\n                </ng-container>\n\n                <ng-template\n                    *ngIf=\"field?.bottomTemplate\"\n                    [ngTemplateOutlet]=\"field.bottomTemplate\"\n                ></ng-template>\n            </div>\n        </ng-container>\n    </div>\n</div>\n"
     })
 ], DynamicFieldComponent);
 
@@ -11151,7 +11167,7 @@ __decorate([
 FieldLabelComponent = __decorate([
     Component({
         selector: 's-field-label',
-        template: "<!--\n    Caso esse componente seja alterado/removido/movido,\n    alterar a label no row.component.ts e dynamic-field.component.ts\n-->\n\n<span *ngIf=\"field.label\">\n    <label\n        *sInfoSign=\"field.infoSign; displayTime: field.displayTimeInfoSign; focusedInputRef: fieldContainerRef\"\n        [for]=\"field.name\"\n        [ngClass]=\"{ required: field.required() }\"\n    >\n        {{ field.label }}\n    </label>\n</span>\n"
+        template: "<!--\n    Caso esse componente seja alterado/removido/movido,\n    alterar a label no row.component.ts e dynamic-field.component.ts\n-->\n\n<span *ngIf=\"field.label\">\n    <label\n        *sInfoSign=\"field.infoSign; displayTime: field.displayTimeInfoSign; focusedInputRef: fieldContainerRef; useFocusedInputRef: field.useInfoSignFocusedInputRef\"\n        [for]=\"field.name\"\n        [ngClass]=\"{ required: field.required() }\"\n    >\n        {{ field.label }}\n    </label>\n</span>\n"
     })
 ], FieldLabelComponent);