@vsn-ux/ngx-gaia 0.11.0 → 0.11.1

package/DOCS.md

@@ -1497,6 +1497,7 @@ Tooltip directive for contextual information overlays.
 - `gaTooltipControlMode: 'hover' | 'click' | 'none'` - Control mode (default: 'hover')
 - `gaTooltipShowControlMode: 'hover' | 'click' | 'none'` - Show control mode
 - `gaTooltipHideControlMode: 'hover' | 'click' | 'none'` - Hide control mode
+- `gaTooltipShowDelay: number` - Delay in milliseconds before tooltip appears on hover (default: 0)
 - `gaTooltipOffsetSize: number` - Offset from target (default: 5)
 - `gaTooltipPlacement: GaTooltipPlacement` - Preferred placement (default: 'right-center')
 
@@ -1518,6 +1519,9 @@ Tooltip component for rendering tooltip content.
   >Top tooltip</span
 >
 <button gaTooltip="Click tooltip" gaTooltipControlMode="click">Click me</button>
+<span gaTooltip="Delayed tooltip" gaTooltipShowDelay="500"
+  >Hover me (500ms delay)</span
+>
 ```
 
 ## Utils

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

@@ -2275,6 +2275,7 @@ class GaTooltipDirective {
     mouseOver = false;
     _showControlMode = null;
     _hideControlMode = null;
+    showTimeoutId = null;
     set content(value) {
         if (value === this._content) {
             return;
@@ -2323,6 +2324,8 @@ class GaTooltipDirective {
     get offset() {
         return this._offset;
     }
+    showDelay = input(0, { ...(ngDevMode ? { debugName: "showDelay" } : {}), alias: 'gaTooltipShowDelay',
+        transform: numberAttribute });
     set placement(value) {
         if (this._placement === value) {
             return;
@@ -2337,6 +2340,7 @@ class GaTooltipDirective {
         return this.tooltipInstance?.uniqueId ?? null;
     }
     ngOnDestroy() {
+        this.clearShowTimeout();
         this.destroyed$.next();
         this.destroyed$.complete();
         this.overlayRef?.detach();
@@ -2410,9 +2414,16 @@ class GaTooltipDirective {
             return;
         }
         this.mouseOver = true;
-        this.show();
+        this.clearShowTimeout();
+        if (this.showDelay() > 0) {
+            this.showTimeoutId = setTimeout(() => this.show(), this.showDelay());
+        }
+        else {
+            this.show();
+        }
     }
     handleMouseLeave() {
+        this.clearShowTimeout();
         if (this.hideControlMode !== 'hover' || this.disabled) {
             return;
         }
@@ -2427,6 +2438,12 @@ class GaTooltipDirective {
             this.hide();
         }
     }
+    clearShowTimeout() {
+        if (this.showTimeoutId !== null) {
+            clearTimeout(this.showTimeoutId);
+            this.showTimeoutId = null;
+        }
+    }
     createOverlay() {
         if (this.overlayRef) {
             return this.overlayRef;
@@ -2536,7 +2553,7 @@ class GaTooltipDirective {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: GaTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.0.4", type: GaTooltipDirective, isStandalone: true, selector: "[gaTooltip]", inputs: { content: ["gaTooltip", "content"], disabled: ["gaTooltipDisabled", "disabled", booleanAttribute], controlMode: ["gaTooltipControlMode", "controlMode"], showControlMode: ["gaTooltipShowControlMode", "showControlMode"], hideControlMode: ["gaTooltipHideControlMode", "hideControlMode"], offset: ["gaTooltipOffsetSize", "offset", numberAttribute], placement: ["gaTooltipPlacement", "placement"] }, host: { listeners: { "click": "handleMouseClick()", "mouseenter": "handleMouseEnter()", "mouseleave": "handleMouseLeave()" }, properties: { "attr.aria-describedby": "this.ariaDescribedBy" } }, exportAs: ["gaTooltip"], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.4", 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": "this.ariaDescribedBy" } }, exportAs: ["gaTooltip"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: GaTooltipDirective, decorators: [{
             type: Directive,
@@ -2562,7 +2579,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.4", ngImpor
             }], offset: [{
                 type: Input,
                 args: [{ alias: 'gaTooltipOffsetSize', transform: numberAttribute }]
-            }], placement: [{
+            }], showDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "gaTooltipShowDelay", required: false }] }], placement: [{
                 type: Input,
                 args: [{ alias: 'gaTooltipPlacement' }]
             }], ariaDescribedBy: [{
@@ -2635,7 +2652,7 @@ class GaFieldLabelComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: GaFieldLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.4", 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    ><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", "gaTooltipPlacement"], exportAs: ["gaTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.4", 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    ><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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: GaFieldLabelComponent, decorators: [{
             type: Component,
@@ -3077,63 +3094,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.4", ngImpor
         }] });
 
 class GaModalComponent {
-    closeSubject = new Subject();
-    overlayRef = inject(OverlayRef);
-    destroyRef = inject(DestroyRef);
-    router = inject(Router, { optional: true });
-    globalOptions = inject(GaModalOptions, { optional: true });
+    #closeSubject = new Subject();
+    #overlayRef = inject(OverlayRef);
+    #destroyRef = inject(DestroyRef);
+    #router = inject(Router, { optional: true });
+    #globalOptions = inject(GaModalOptions, { optional: true });
     options = this.createOptions();
-    trapfocus = inject(CdkTrapFocus);
+    #trapfocus = inject(CdkTrapFocus);
     data = inject(GA_MODAL_DATA);
     labelledBy = signal(null, ...(ngDevMode ? [{ debugName: "labelledBy" }] : []));
     describedBy = signal(null, ...(ngDevMode ? [{ debugName: "describedBy" }] : []));
     constructor() {
-        this.trapfocus.enabled = true;
-        this.trapfocus.autoCapture = true;
+        this.#trapfocus.enabled = true;
+        this.#trapfocus.autoCapture = true;
         // Using next render to delay the initialization, so that there is more time
         // to set the modal options
         afterNextRender({
             read: () => {
                 if (this.options.closeOnNavigation) {
-                    this.router?.events
+                    this.#router?.events
                         .pipe(
                     /**
                      * Listen for `ResolveStart` to be friendly with route-guards.
                      * i.e. don't close the modal in case a guard prevents the route change,
                      * beneficial for pending changes check.
                      */
-                    filter((event) => event instanceof ResolveStart), takeUntilDestroyed(this.destroyRef))
+                    filter((event) => event instanceof ResolveStart), takeUntilDestroyed(this.#destroyRef))
                         .subscribe(() => this.close());
                 }
                 if (this.options.closeOnEscape) {
-                    this.overlayRef
+                    this.#overlayRef
                         .keydownEvents()
-                        .pipe(filter((event) => event.key === 'Escape' && !hasModifierKey(event)), takeUntilDestroyed(this.destroyRef))
+                        .pipe(filter((event) => event.key === 'Escape' && !hasModifierKey(event)), takeUntilDestroyed(this.#destroyRef))
                         .subscribe((event) => {
                         event.preventDefault();
-                        this.softClose();
+                        this.#softClose();
                     });
                 }
                 if (this.options.closeOnOutsideClick) {
-                    this.overlayRef
+                    this.#overlayRef
                         .backdropClick()
-                        .pipe(takeUntilDestroyed(this.destroyRef))
-                        .subscribe(() => this.softClose());
+                        .pipe(takeUntilDestroyed(this.#destroyRef))
+                        .subscribe(() => this.#softClose());
                 }
             },
         });
     }
     close(result) {
-        if (!this.overlayRef.hasAttached()) {
+        if (!this.#overlayRef.hasAttached()) {
             return;
         }
-        this.overlayRef.dispose();
-        this.closeSubject.next(result);
-        this.closeSubject.complete();
+        this.#overlayRef.dispose();
+        this.#closeSubject.next(result);
+        this.#closeSubject.complete();
     }
     afterClosed({ closeOnUnsubscribe } = { closeOnUnsubscribe: true }) {
         return new Observable((observer) => {
-            this.closeSubject.subscribe(observer);
+            this.#closeSubject.subscribe(observer);
             return () => closeOnUnsubscribe && this.close();
         });
     }
@@ -3145,21 +3162,21 @@ class GaModalComponent {
     onSoftClose() {
         return true;
     }
-    softClose() {
+    #softClose() {
         const shouldClose = this.onSoftClose();
         if (typeof shouldClose === 'boolean' && shouldClose) {
             this.close();
         }
         if (isObservable(shouldClose)) {
             shouldClose
-                .pipe(takeUntilDestroyed(this.destroyRef))
+                .pipe(takeUntilDestroyed(this.#destroyRef))
                 .subscribe((result) => result && this.close());
         }
     }
     createOptions(options) {
         return {
             ...DEFAULT_MODAL_OPTIONS,
-            ...this.globalOptions,
+            ...this.#globalOptions,
             ...options,
         };
     }