@vsn-ux/ngx-gaia 0.12.3 → 0.12.4

package/fesm2022/vsn-ux-ngx-gaia.mjs

@@ -2372,6 +2372,7 @@ class GaTooltipDirective {
     _placement = 'right-center';
     _offset = GA_TOOLTIP_DEFAULT_OFFSET;
     mouseOver = false;
+    focused = false;
     ariaDescribedBy = signal(null, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
     _showControlMode = null;
     _hideControlMode = null;
@@ -2509,31 +2510,47 @@ class GaTooltipDirective {
         this.toggle();
     }
     handleMouseEnter() {
+        this.scheduleShow(() => (this.mouseOver = true));
+    }
+    handleMouseLeave() {
+        this.scheduleHide(() => (this.mouseOver = false));
+    }
+    handleFocusIn() {
+        this.scheduleShow(() => (this.focused = true));
+    }
+    handleFocusOut() {
+        this.scheduleHide(() => (this.focused = false));
+    }
+    scheduleShow(setFlag) {
         if (this.showControlMode !== 'hover' || this.disabled || !this._content) {
             return;
         }
-        this.mouseOver = true;
+        setFlag();
         this.clearShowTimeout();
-        if (this.showDelay() > 0) {
-            this.showTimeoutId = setTimeout(() => this.show(), this.showDelay());
+        const delay = this.showDelay();
+        if (delay > 0) {
+            this.showTimeoutId = setTimeout(() => this.show(), delay);
         }
         else {
             this.show();
         }
     }
-    handleMouseLeave() {
+    scheduleHide(clearFlag) {
         this.clearShowTimeout();
         if (this.hideControlMode !== 'hover' || this.disabled) {
             return;
         }
-        this.mouseOver = false;
+        clearFlag();
         setTimeout(() => this.softHide());
     }
     /**
-     * hides only if mouse is not over the host element nor the tooltip itself
+     * Hides only if mouse is not over the host element, element is not focused,
+     * and mouse is not over the tooltip itself.
      */
     softHide() {
-        if (!this.mouseOver && !this.tooltipInstance?.mouseOver()) {
+        if (!this.mouseOver &&
+            !this.focused &&
+            !this.tooltipInstance?.mouseOver()) {
             this.hide();
         }
     }
@@ -2652,7 +2669,7 @@ class GaTooltipDirective {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: GaTooltipDirective, isStandalone: true, selector: "[gaTooltip]", inputs: { content: { classPropertyName: "content", publicName: "gaTooltip", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "gaTooltipDisabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, controlMode: { classPropertyName: "controlMode", publicName: "gaTooltipControlMode", isSignal: false, isRequired: false, transformFunction: null }, showControlMode: { classPropertyName: "showControlMode", publicName: "gaTooltipShowControlMode", isSignal: false, isRequired: false, transformFunction: null }, hideControlMode: { classPropertyName: "hideControlMode", publicName: "gaTooltipHideControlMode", isSignal: false, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "gaTooltipOffsetSize", isSignal: false, isRequired: false, transformFunction: numberAttribute }, showDelay: { classPropertyName: "showDelay", publicName: "gaTooltipShowDelay", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "gaTooltipPlacement", isSignal: false, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "handleMouseClick()", "mouseenter": "handleMouseEnter()", "mouseleave": "handleMouseLeave()" }, properties: { "attr.aria-describedby": "ariaDescribedBy()" } }, exportAs: ["gaTooltip"], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: GaTooltipDirective, isStandalone: true, selector: "[gaTooltip]", inputs: { content: { classPropertyName: "content", publicName: "gaTooltip", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "gaTooltipDisabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, controlMode: { classPropertyName: "controlMode", publicName: "gaTooltipControlMode", isSignal: false, isRequired: false, transformFunction: null }, showControlMode: { classPropertyName: "showControlMode", publicName: "gaTooltipShowControlMode", isSignal: false, isRequired: false, transformFunction: null }, hideControlMode: { classPropertyName: "hideControlMode", publicName: "gaTooltipHideControlMode", isSignal: false, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "gaTooltipOffsetSize", isSignal: false, isRequired: false, transformFunction: numberAttribute }, showDelay: { classPropertyName: "showDelay", publicName: "gaTooltipShowDelay", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "gaTooltipPlacement", isSignal: false, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "handleMouseClick()", "mouseenter": "handleMouseEnter()", "mouseleave": "handleMouseLeave()", "focusin": "handleFocusIn()", "focusout": "handleFocusOut()" }, properties: { "attr.aria-describedby": "ariaDescribedBy()" } }, exportAs: ["gaTooltip"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaTooltipDirective, decorators: [{
             type: Directive,
@@ -2661,6 +2678,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                     exportAs: 'gaTooltip',
                     host: {
                         '[attr.aria-describedby]': 'ariaDescribedBy()',
+                        '(click)': 'handleMouseClick()',
+                        '(mouseenter)': 'handleMouseEnter()',
+                        '(mouseleave)': 'handleMouseLeave()',
+                        '(focusin)': 'handleFocusIn()',
+                        '(focusout)': 'handleFocusOut()',
                     },
                 }]
         }], propDecorators: { content: [{
@@ -2684,15 +2706,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
             }], showDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "gaTooltipShowDelay", required: false }] }], placement: [{
                 type: Input,
                 args: [{ alias: 'gaTooltipPlacement' }]
-            }], handleMouseClick: [{
-                type: HostListener,
-                args: ['click']
-            }], handleMouseEnter: [{
-                type: HostListener,
-                args: ['mouseenter']
-            }], handleMouseLeave: [{
-                type: HostListener,
-                args: ['mouseleave']
             }] } });
 
 class GaTooltipTitleComponent {
@@ -2760,13 +2773,13 @@ class GaFieldLabelComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaFieldLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: GaFieldLabelComponent, isStandalone: true, selector: "ga-label", inputs: { for: { classPropertyName: "for", publicName: "for", isSignal: true, isRequired: false, transformFunction: null }, definition: { classPropertyName: "definition", publicName: "definition", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, idInput: { classPropertyName: "idInput", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.id": "null" } }, ngImport: i0, template: "<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\n<label\n  [attr.id]=\"id()\"\n  [attr.for]=\"controlId()\"\n  class=\"ga-form-field__label\"\n  [class.ga-form-field__label--defined]=\"!!definition()\"\n  [class.ga-form-field__label--disabled]=\"formField.disabled()\"\n  (click)=\"focusControl()\"\n  [attr.tabindex]=\"definition() ? 0 : -1\"\n>\n  <span\n    class=\"ga-form-field__label-text\"\n    [gaTooltip]=\"definition()\"\n    gaTooltipPlacement=\"top-start\"\n    gaTooltipShowDelay=\"200\"\n    ><ng-content\n  /></span>\n  @if (state()) {\n    <span class=\"ga-form-field__label-state\">{{ state() }}</span>\n  }\n</label>\n", dependencies: [{ kind: "ngmodule", type: GaTooltipModule }, { kind: "directive", type: GaTooltipDirective, selector: "[gaTooltip]", inputs: ["gaTooltip", "gaTooltipDisabled", "gaTooltipControlMode", "gaTooltipShowControlMode", "gaTooltipHideControlMode", "gaTooltipOffsetSize", "gaTooltipShowDelay", "gaTooltipPlacement"], exportAs: ["gaTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: GaFieldLabelComponent, isStandalone: true, selector: "ga-label", inputs: { for: { classPropertyName: "for", publicName: "for", isSignal: true, isRequired: false, transformFunction: null }, definition: { classPropertyName: "definition", publicName: "definition", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, idInput: { classPropertyName: "idInput", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.id": "null" } }, ngImport: i0, template: "<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\n<label\n  [attr.id]=\"id()\"\n  [attr.for]=\"controlId()\"\n  class=\"ga-form-field__label\"\n  [class.ga-form-field__label--defined]=\"!!definition()\"\n  [class.ga-form-field__label--disabled]=\"formField.disabled()\"\n  [gaTooltip]=\"definition()\"\n  [attr.tabindex]=\"definition() ? 0 : -1\"\n  gaTooltipPlacement=\"top-start\"\n  gaTooltipShowDelay=\"200\"\n  (click)=\"focusControl()\"\n>\n  <span class=\"ga-form-field__label-text\"><ng-content /></span>\n  @if (state()) {\n    <span class=\"ga-form-field__label-state\">{{ state() }}</span>\n  }\n</label>\n", dependencies: [{ kind: "ngmodule", type: GaTooltipModule }, { kind: "directive", type: GaTooltipDirective, selector: "[gaTooltip]", inputs: ["gaTooltip", "gaTooltipDisabled", "gaTooltipControlMode", "gaTooltipShowControlMode", "gaTooltipHideControlMode", "gaTooltipOffsetSize", "gaTooltipShowDelay", "gaTooltipPlacement"], exportAs: ["gaTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaFieldLabelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ga-label', imports: [GaTooltipModule], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[attr.id]': 'null',
-                    }, template: "<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\n<label\n  [attr.id]=\"id()\"\n  [attr.for]=\"controlId()\"\n  class=\"ga-form-field__label\"\n  [class.ga-form-field__label--defined]=\"!!definition()\"\n  [class.ga-form-field__label--disabled]=\"formField.disabled()\"\n  (click)=\"focusControl()\"\n  [attr.tabindex]=\"definition() ? 0 : -1\"\n>\n  <span\n    class=\"ga-form-field__label-text\"\n    [gaTooltip]=\"definition()\"\n    gaTooltipPlacement=\"top-start\"\n    gaTooltipShowDelay=\"200\"\n    ><ng-content\n  /></span>\n  @if (state()) {\n    <span class=\"ga-form-field__label-state\">{{ state() }}</span>\n  }\n</label>\n" }]
+                    }, template: "<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\n<label\n  [attr.id]=\"id()\"\n  [attr.for]=\"controlId()\"\n  class=\"ga-form-field__label\"\n  [class.ga-form-field__label--defined]=\"!!definition()\"\n  [class.ga-form-field__label--disabled]=\"formField.disabled()\"\n  [gaTooltip]=\"definition()\"\n  [attr.tabindex]=\"definition() ? 0 : -1\"\n  gaTooltipPlacement=\"top-start\"\n  gaTooltipShowDelay=\"200\"\n  (click)=\"focusControl()\"\n>\n  <span class=\"ga-form-field__label-text\"><ng-content /></span>\n  @if (state()) {\n    <span class=\"ga-form-field__label-state\">{{ state() }}</span>\n  }\n</label>\n" }]
         }], ctorParameters: () => [], propDecorators: { for: [{ type: i0.Input, args: [{ isSignal: true, alias: "for", required: false }] }], definition: [{ type: i0.Input, args: [{ isSignal: true, alias: "definition", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], idInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
 
 class GaFormControlDirective {