@ngneat/helipopper 13.1.1 → 13.1.2

package/README.md

@@ -144,6 +144,73 @@ class MyComponent {
 <button [tp]="MyComponent">Click Me</button>
 ```
 
+### Use a Lazy Factory to Resolve a Component
+
+Pass a factory function that returns a `Promise<Type<any>>` to defer loading the component until the tooltip is first shown. This is ideal for code-splitting — the component's chunk is only fetched on demand:
+
+```ts
+@Component({})
+class HostComponent {
+  lazyComponent = () => import('./heavy-popover.component').then(m => m.HeavyPopoverComponent);
+}
+```
+
+```html
+<button [tp]="lazyComponent" tpVariation="popper">Click Me</button>
+```
+
+The factory is called once; after the component resolves, subsequent shows reuse the already-loaded class.
+
+`provideTippyLoader` accepts optional feature functions as additional arguments to control what happens while the lazy component is being fetched:
+
+#### `withTippyLoaderComponent`
+
+Renders a placeholder component inside the tooltip while the import is in flight:
+
+```ts
+import { provideTippyLoader, withTippyLoaderComponent } from '@ngneat/helipopper/config';
+
+bootstrapApplication(AppComponent, {
+  providers: [
+    provideTippyLoader(
+      () => import('tippy.js'),
+      withTippyLoaderComponent(SpinnerComponent),
+    ),
+  ],
+});
+```
+
+`SpinnerComponent` is mounted as the tooltip content the moment the tooltip opens, then replaced by the resolved component once the import completes.
+
+#### `withTippyLoaderTiming`
+
+Controls the minimum time the loader is visible. The default is a synchronous observable (`of(undefined)`) that lets the swap happen as soon as the import resolves. Pass a factory — with full DI support — to impose a minimum display duration:
+
+```ts
+import { provideTippyLoader, withTippyLoaderTiming } from '@ngneat/helipopper/config';
+import { inject } from '@angular/core';
+
+bootstrapApplication(AppComponent, {
+  providers: [
+    provideTippyLoader(
+      () => import('tippy.js'),
+      withTippyLoaderComponent(SpinnerComponent),
+      withTippyLoaderTiming(() => {
+        const scheduler = inject(Scheduler);
+        return new Observable(subscriber => {
+          scheduler.schedule(() => {
+            subscriber.next();
+            subscriber.complete();
+          }, 300);
+        });
+      }),
+    ),
+  ],
+});
+```
+
+The tooltip swaps the loader for the real component only when **both** the import has resolved and the timing observable has emitted — so the spinner is guaranteed to be visible for at least the configured duration regardless of how fast the import finishes.
+
 ### Component Bindings
 
 Pass reactive Angular bindings (`inputBinding`, `outputBinding`, `twoWayBinding`) to a dynamically created component using the `tpBindings` input:
@@ -306,7 +373,7 @@ live [here](https://ngneat.github.io/helipopper/).
 ### Inputs
 
 ```ts
-tp: string | TemplateRef<any> | Type<any> | undefined | null;
+tp: string | TemplateRef<any> | Type<any> | (() => Promise<Type<any>>) | undefined | null;
 tpAppendTo: TippyProps['appendTo'];
 tpDelay: TippyProps['delay'];
 tpDuration: TippyProps['duration'];

package/fesm2022/ngneat-helipopper-config.mjs

@@ -32,19 +32,14 @@ const TIPPY_CONFIG = new InjectionToken(ngDevMode ? 'TIPPY_CONFIG' : '');
 const TIPPY_LOADER_COMPONENT = new InjectionToken(ngDevMode ? 'TIPPY_LOADER_COMPONENT' : '');
 const TIPPY_LOADER_TIMING = new InjectionToken(ngDevMode ? 'TIPPY_LOADER_TIMING' : '', { factory: () => of(undefined) });
 
-function provideTippyLoader(loader) {
-    return makeEnvironmentProviders([{ provide: TIPPY_LOADER, useValue: loader }]);
+function provideTippyLoader(loader, ...features) {
+    return makeEnvironmentProviders([
+        { provide: TIPPY_LOADER, useValue: loader },
+        ...features,
+    ]);
 }
-function provideTippyConfig(config, ...features) {
-    if (features.length) {
-        return makeEnvironmentProviders([
-            { provide: TIPPY_CONFIG, useValue: config },
-            ...features,
-        ]);
-    }
-    else {
-        return { provide: TIPPY_CONFIG, useValue: config };
-    }
+function provideTippyConfig(config) {
+    return { provide: TIPPY_CONFIG, useValue: config };
 }
 function withTippyLoaderComponent(component) {
     return makeEnvironmentProviders([
@@ -52,7 +47,7 @@ function withTippyLoaderComponent(component) {
     ]);
 }
 function withTippyLoaderTiming(timing) {
-    return makeEnvironmentProviders([{ provide: TIPPY_LOADER_TIMING, useValue: timing }]);
+    return makeEnvironmentProviders([{ provide: TIPPY_LOADER_TIMING, useFactory: timing }]);
 }
 
 /**

package/fesm2022/ngneat-helipopper-config.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngneat-helipopper-config.mjs","sources":["../../../../projects/ngneat/helipopper/config/src/defaults.ts","../../../../projects/ngneat/helipopper/config/src/tippy.types.ts","../../../../projects/ngneat/helipopper/config/src/providers.ts","../../../../projects/ngneat/helipopper/config/src/ngneat-helipopper-config.ts"],"sourcesContent":["import type { TippyProps, VariationConfig } from './tippy.types';\n\n// A variation is a set of predefined tippy properties.\ntype Variation = Partial<TippyProps>;\n\nexport const tooltipVariation: Variation = {\n  theme: undefined,\n  arrow: false,\n  animation: 'scale',\n  trigger: 'mouseenter focus',\n  offset: [0, 5],\n};\n\nexport const popperVariation: Variation = {\n  theme: 'light',\n  arrow: true,\n  offset: [0, 10],\n  animation: undefined,\n  trigger: 'click',\n  interactive: true,\n};\n\nexport function withContextMenuVariation(baseVariation: Variation): VariationConfig {\n  return {\n    ...baseVariation,\n    placement: 'right-start',\n    trigger: 'manual',\n    arrow: false,\n    offset: [0, 0],\n    isContextMenu: true, // signals the directive to attach the right-click listener\n  };\n}\n","import type tippy from 'tippy.js';\nimport type { Instance, Props } from 'tippy.js';\nimport { ElementRef, InjectionToken, Type } from '@angular/core';\nimport { Observable, of } from 'rxjs';\nimport type { Content, ResolveViewRef, ViewOptions } from '@ngneat/overview';\n\nexport interface CreateOptions extends Partial<TippyProps>, ViewOptions {\n  variation: string;\n  preserveView: boolean;\n  className: string | string[];\n  data: any;\n}\n\nexport interface TippyInstance extends Instance {\n  data?: any;\n}\n\nexport type TippyProps = Props;\n\n// Extends tippy props with isContextMenu so any named variation (not just one\n// called 'contextMenu') can opt into right-click listener behaviour.\nexport type VariationConfig = Partial<TippyProps> & { isContextMenu?: boolean };\n\nexport interface ExtendedTippyProps extends TippyProps {\n  variations: Record<string, VariationConfig>;\n  defaultVariation: keyof ExtendedTippyProps['variations'];\n  beforeRender?: (text: string) => string;\n  zIndexGetter?(): number;\n}\n\nexport type TippyElement = ElementRef | Element;\n\nexport interface ExtendedTippyInstance<T> extends TippyInstance {\n  view: ResolveViewRef<T> | null;\n  $viewOptions: ViewOptions;\n  context?: ViewOptions['context'];\n}\n\nexport type TippyConfig = Partial<ExtendedTippyProps>;\n\nexport type TippyContent = Content | (() => Promise<Type<any>>);\n\nexport type TippyLoader = () => typeof tippy | Promise<{ default: typeof tippy }>;\n\nexport const TIPPY_LOADER = new InjectionToken<TippyLoader>(\n  ngDevMode ? 'TIPPY_LOADER' : '',\n);\n\nexport const TIPPY_CONFIG = new InjectionToken<TippyConfig>(\n  ngDevMode ? 'TIPPY_CONFIG' : '',\n);\n\nexport const TIPPY_LOADER_COMPONENT = new InjectionToken<Type<unknown>>(\n  ngDevMode ? 'TIPPY_LOADER_COMPONENT' : '',\n);\n\nexport type TippyLoaderTiming = Observable<void>;\n\nexport const TIPPY_LOADER_TIMING = new InjectionToken<TippyLoaderTiming>(\n  ngDevMode ? 'TIPPY_LOADER_TIMING' : '',\n  { factory: () => of(undefined) },\n);\n","import {\n  EnvironmentProviders,\n  makeEnvironmentProviders,\n  Provider,\n  Type,\n} from '@angular/core';\n\nimport {\n  TIPPY_CONFIG,\n  TIPPY_LOADER,\n  TIPPY_LOADER_COMPONENT,\n  TIPPY_LOADER_TIMING,\n  type TippyLoader,\n  type TippyConfig,\n  type TippyLoaderTiming,\n} from './tippy.types';\n\nexport function provideTippyLoader(loader: TippyLoader) {\n  return makeEnvironmentProviders([{ provide: TIPPY_LOADER, useValue: loader }]);\n}\n\nexport function provideTippyConfig(config: TippyConfig): Provider;\nexport function provideTippyConfig(\n  config: TippyConfig,\n  ...features: EnvironmentProviders[]\n): EnvironmentProviders;\nexport function provideTippyConfig(\n  config: TippyConfig,\n  ...features: EnvironmentProviders[]\n): Provider | EnvironmentProviders {\n  if (features.length) {\n    return makeEnvironmentProviders([\n      { provide: TIPPY_CONFIG, useValue: config },\n      ...features,\n    ]);\n  } else {\n    return { provide: TIPPY_CONFIG, useValue: config };\n  }\n}\n\nexport function withTippyLoaderComponent(component: Type<unknown>): EnvironmentProviders {\n  return makeEnvironmentProviders([\n    { provide: TIPPY_LOADER_COMPONENT, useValue: component },\n  ]);\n}\n\nexport function withTippyLoaderTiming(timing: TippyLoaderTiming): EnvironmentProviders {\n  return makeEnvironmentProviders([{ provide: TIPPY_LOADER_TIMING, useValue: timing }]);\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;AAKO,MAAM,gBAAgB,GAAc;AACzC,IAAA,KAAK,EAAE,SAAS;AAChB,IAAA,KAAK,EAAE,KAAK;AACZ,IAAA,SAAS,EAAE,OAAO;AAClB,IAAA,OAAO,EAAE,kBAAkB;AAC3B,IAAA,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;;AAGT,MAAM,eAAe,GAAc;AACxC,IAAA,KAAK,EAAE,OAAO;AACd,IAAA,KAAK,EAAE,IAAI;AACX,IAAA,MAAM,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC;AACf,IAAA,SAAS,EAAE,SAAS;AACpB,IAAA,OAAO,EAAE,OAAO;AAChB,IAAA,WAAW,EAAE,IAAI;;AAGb,SAAU,wBAAwB,CAAC,aAAwB,EAAA;IAC/D,OAAO;AACL,QAAA,GAAG,aAAa;AAChB,QAAA,SAAS,EAAE,aAAa;AACxB,QAAA,OAAO,EAAE,QAAQ;AACjB,QAAA,KAAK,EAAE,KAAK;AACZ,QAAA,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;QACd,aAAa,EAAE,IAAI;KACpB;AACH;;ACaO,MAAM,YAAY,GAAG,IAAI,cAAc,CAC5C,SAAS,GAAG,cAAc,GAAG,EAAE;AAG1B,MAAM,YAAY,GAAG,IAAI,cAAc,CAC5C,SAAS,GAAG,cAAc,GAAG,EAAE;AAG1B,MAAM,sBAAsB,GAAG,IAAI,cAAc,CACtD,SAAS,GAAG,wBAAwB,GAAG,EAAE;AAKpC,MAAM,mBAAmB,GAAG,IAAI,cAAc,CACnD,SAAS,GAAG,qBAAqB,GAAG,EAAE,EACtC,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC,SAAS,CAAC,EAAE;;AC3C5B,SAAU,kBAAkB,CAAC,MAAmB,EAAA;AACpD,IAAA,OAAO,wBAAwB,CAAC,CAAC,EAAE,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC,CAAC;AAChF;SAOgB,kBAAkB,CAChC,MAAmB,EACnB,GAAG,QAAgC,EAAA;AAEnC,IAAA,IAAI,QAAQ,CAAC,MAAM,EAAE;AACnB,QAAA,OAAO,wBAAwB,CAAC;AAC9B,YAAA,EAAE,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,EAAE;AAC3C,YAAA,GAAG,QAAQ;AACZ,SAAA,CAAC;IACJ;SAAO;QACL,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,EAAE;IACpD;AACF;AAEM,SAAU,wBAAwB,CAAC,SAAwB,EAAA;AAC/D,IAAA,OAAO,wBAAwB,CAAC;AAC9B,QAAA,EAAE,OAAO,EAAE,sBAAsB,EAAE,QAAQ,EAAE,SAAS,EAAE;AACzD,KAAA,CAAC;AACJ;AAEM,SAAU,qBAAqB,CAAC,MAAyB,EAAA;AAC7D,IAAA,OAAO,wBAAwB,CAAC,CAAC,EAAE,OAAO,EAAE,mBAAmB,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC,CAAC;AACvF;;AChDA;;AAEG;;;;"}
+{"version":3,"file":"ngneat-helipopper-config.mjs","sources":["../../../../projects/ngneat/helipopper/config/src/defaults.ts","../../../../projects/ngneat/helipopper/config/src/tippy.types.ts","../../../../projects/ngneat/helipopper/config/src/providers.ts","../../../../projects/ngneat/helipopper/config/src/ngneat-helipopper-config.ts"],"sourcesContent":["import type { TippyProps, VariationConfig } from './tippy.types';\n\n// A variation is a set of predefined tippy properties.\ntype Variation = Partial<TippyProps>;\n\nexport const tooltipVariation: Variation = {\n  theme: undefined,\n  arrow: false,\n  animation: 'scale',\n  trigger: 'mouseenter focus',\n  offset: [0, 5],\n};\n\nexport const popperVariation: Variation = {\n  theme: 'light',\n  arrow: true,\n  offset: [0, 10],\n  animation: undefined,\n  trigger: 'click',\n  interactive: true,\n};\n\nexport function withContextMenuVariation(baseVariation: Variation): VariationConfig {\n  return {\n    ...baseVariation,\n    placement: 'right-start',\n    trigger: 'manual',\n    arrow: false,\n    offset: [0, 0],\n    isContextMenu: true, // signals the directive to attach the right-click listener\n  };\n}\n","import type tippy from 'tippy.js';\nimport type { Instance, Props } from 'tippy.js';\nimport { ElementRef, InjectionToken, Type } from '@angular/core';\nimport { Observable, of } from 'rxjs';\nimport type { Content, ResolveViewRef, ViewOptions } from '@ngneat/overview';\n\nexport interface CreateOptions extends Partial<TippyProps>, ViewOptions {\n  variation: string;\n  preserveView: boolean;\n  className: string | string[];\n  data: any;\n}\n\nexport interface TippyInstance extends Instance {\n  data?: any;\n}\n\nexport type TippyProps = Props;\n\n// Extends tippy props with isContextMenu so any named variation (not just one\n// called 'contextMenu') can opt into right-click listener behaviour.\nexport type VariationConfig = Partial<TippyProps> & { isContextMenu?: boolean };\n\nexport interface ExtendedTippyProps extends TippyProps {\n  variations: Record<string, VariationConfig>;\n  defaultVariation: keyof ExtendedTippyProps['variations'];\n  beforeRender?: (text: string) => string;\n  zIndexGetter?(): number;\n}\n\nexport type TippyElement = ElementRef | Element;\n\nexport interface ExtendedTippyInstance<T> extends TippyInstance {\n  view: ResolveViewRef<T> | null;\n  $viewOptions: ViewOptions;\n  context?: ViewOptions['context'];\n}\n\nexport type TippyConfig = Partial<ExtendedTippyProps>;\n\nexport type TippyContent = Content | (() => Promise<Type<any>>);\n\nexport type TippyLoader = () => typeof tippy | Promise<{ default: typeof tippy }>;\n\nexport const TIPPY_LOADER = new InjectionToken<TippyLoader>(\n  ngDevMode ? 'TIPPY_LOADER' : '',\n);\n\nexport const TIPPY_CONFIG = new InjectionToken<TippyConfig>(\n  ngDevMode ? 'TIPPY_CONFIG' : '',\n);\n\nexport const TIPPY_LOADER_COMPONENT = new InjectionToken<Type<unknown>>(\n  ngDevMode ? 'TIPPY_LOADER_COMPONENT' : '',\n);\n\nexport type TippyLoaderTiming = Observable<void>;\n\nexport const TIPPY_LOADER_TIMING = new InjectionToken<TippyLoaderTiming>(\n  ngDevMode ? 'TIPPY_LOADER_TIMING' : '',\n  { factory: () => of(undefined) },\n);\n","import {\n  EnvironmentProviders,\n  makeEnvironmentProviders,\n  Provider,\n  Type,\n} from '@angular/core';\n\nimport {\n  TIPPY_CONFIG,\n  TIPPY_LOADER,\n  TIPPY_LOADER_COMPONENT,\n  TIPPY_LOADER_TIMING,\n  type TippyLoader,\n  type TippyConfig,\n  type TippyLoaderTiming,\n} from './tippy.types';\n\nexport function provideTippyLoader(\n  loader: TippyLoader,\n  ...features: EnvironmentProviders[]\n) {\n  return makeEnvironmentProviders([\n    { provide: TIPPY_LOADER, useValue: loader },\n    ...features,\n  ]);\n}\n\nexport function provideTippyConfig(config: TippyConfig): Provider {\n  return { provide: TIPPY_CONFIG, useValue: config };\n}\n\nexport function withTippyLoaderComponent(component: Type<unknown>): EnvironmentProviders {\n  return makeEnvironmentProviders([\n    { provide: TIPPY_LOADER_COMPONENT, useValue: component },\n  ]);\n}\n\nexport function withTippyLoaderTiming(\n  timing: () => TippyLoaderTiming,\n): EnvironmentProviders {\n  return makeEnvironmentProviders([{ provide: TIPPY_LOADER_TIMING, useFactory: timing }]);\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;AAKO,MAAM,gBAAgB,GAAc;AACzC,IAAA,KAAK,EAAE,SAAS;AAChB,IAAA,KAAK,EAAE,KAAK;AACZ,IAAA,SAAS,EAAE,OAAO;AAClB,IAAA,OAAO,EAAE,kBAAkB;AAC3B,IAAA,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;;AAGT,MAAM,eAAe,GAAc;AACxC,IAAA,KAAK,EAAE,OAAO;AACd,IAAA,KAAK,EAAE,IAAI;AACX,IAAA,MAAM,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC;AACf,IAAA,SAAS,EAAE,SAAS;AACpB,IAAA,OAAO,EAAE,OAAO;AAChB,IAAA,WAAW,EAAE,IAAI;;AAGb,SAAU,wBAAwB,CAAC,aAAwB,EAAA;IAC/D,OAAO;AACL,QAAA,GAAG,aAAa;AAChB,QAAA,SAAS,EAAE,aAAa;AACxB,QAAA,OAAO,EAAE,QAAQ;AACjB,QAAA,KAAK,EAAE,KAAK;AACZ,QAAA,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;QACd,aAAa,EAAE,IAAI;KACpB;AACH;;ACaO,MAAM,YAAY,GAAG,IAAI,cAAc,CAC5C,SAAS,GAAG,cAAc,GAAG,EAAE;AAG1B,MAAM,YAAY,GAAG,IAAI,cAAc,CAC5C,SAAS,GAAG,cAAc,GAAG,EAAE;AAG1B,MAAM,sBAAsB,GAAG,IAAI,cAAc,CACtD,SAAS,GAAG,wBAAwB,GAAG,EAAE;AAKpC,MAAM,mBAAmB,GAAG,IAAI,cAAc,CACnD,SAAS,GAAG,qBAAqB,GAAG,EAAE,EACtC,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC,SAAS,CAAC,EAAE;;SC3ClB,kBAAkB,CAChC,MAAmB,EACnB,GAAG,QAAgC,EAAA;AAEnC,IAAA,OAAO,wBAAwB,CAAC;AAC9B,QAAA,EAAE,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,EAAE;AAC3C,QAAA,GAAG,QAAQ;AACZ,KAAA,CAAC;AACJ;AAEM,SAAU,kBAAkB,CAAC,MAAmB,EAAA;IACpD,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,EAAE;AACpD;AAEM,SAAU,wBAAwB,CAAC,SAAwB,EAAA;AAC/D,IAAA,OAAO,wBAAwB,CAAC;AAC9B,QAAA,EAAE,OAAO,EAAE,sBAAsB,EAAE,QAAQ,EAAE,SAAS,EAAE;AACzD,KAAA,CAAC;AACJ;AAEM,SAAU,qBAAqB,CACnC,MAA+B,EAAA;AAE/B,IAAA,OAAO,wBAAwB,CAAC,CAAC,EAAE,OAAO,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,EAAE,CAAC,CAAC;AACzF;;ACzCA;;AAEG;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ngneat/helipopper",
-  "version": "13.1.1",
+  "version": "13.1.2",
   "description": "A Powerful Tooltip and Popover for Angular Applications",
   "dependencies": {
     "tslib": "^2.3.0",

package/types/ngneat-helipopper-config.d.ts

@@ -44,11 +44,10 @@ declare const tooltipVariation: Variation;
 declare const popperVariation: Variation;
 declare function withContextMenuVariation(baseVariation: Variation): VariationConfig;
 
-declare function provideTippyLoader(loader: TippyLoader): EnvironmentProviders;
+declare function provideTippyLoader(loader: TippyLoader, ...features: EnvironmentProviders[]): EnvironmentProviders;
 declare function provideTippyConfig(config: TippyConfig): Provider;
-declare function provideTippyConfig(config: TippyConfig, ...features: EnvironmentProviders[]): EnvironmentProviders;
 declare function withTippyLoaderComponent(component: Type<unknown>): EnvironmentProviders;
-declare function withTippyLoaderTiming(timing: TippyLoaderTiming): EnvironmentProviders;
+declare function withTippyLoaderTiming(timing: () => TippyLoaderTiming): EnvironmentProviders;
 
 export { TIPPY_CONFIG, TIPPY_LOADER, TIPPY_LOADER_COMPONENT, TIPPY_LOADER_TIMING, popperVariation, provideTippyConfig, provideTippyLoader, tooltipVariation, withContextMenuVariation, withTippyLoaderComponent, withTippyLoaderTiming };
 export type { CreateOptions, ExtendedTippyInstance, ExtendedTippyProps, TippyConfig, TippyContent, TippyElement, TippyInstance, TippyLoader, TippyLoaderTiming, TippyProps, VariationConfig };