@ngneat/helipopper 12.2.0 → 13.1.0

package/README.md

@@ -35,6 +35,8 @@ If you're using v1 and don't want to migrate, you can find it [here](https://git
 ✅ Manual Trigger Support<br>
 ✅ Text Overflow Support<br>
 ✅ Context Menu Support<br>
+✅ Component Bindings via `inputBinding` / `outputBinding` / `twoWayBinding`<br>
+✅ Global Enable / Disable All<br>
 
 ### Installation
 
@@ -142,6 +144,40 @@ class MyComponent {
 <button [tp]="MyComponent">Click Me</button>
 ```
 
+### Component Bindings
+
+Pass reactive Angular bindings (`inputBinding`, `outputBinding`, `twoWayBinding`) to a dynamically created component using the `tpBindings` input:
+
+```ts
+import { inputBinding, signal } from '@angular/core';
+import { MyPopoverComponent } from './my-popover.component';
+
+@Component({})
+class HostComponent {
+  component = MyPopoverComponent;
+  readonly greeting = signal('Hello!');
+  readonly bindings = [
+    inputBinding('greeting', () => this.greeting()),
+  ];
+}
+```
+
+```html
+<button [tp]="component" tpVariation="popper" [tpBindings]="bindings">Open</button>
+```
+
+The same `bindings` option is available when creating a tooltip programmatically via `TippyService`:
+
+```ts
+import { inputBinding } from '@angular/core';
+
+this.tippyService.create(host, MyPopoverComponent, {
+  bindings: [inputBinding('greeting', () => this.greeting())],
+}).subscribe((instance) => { ... });
+```
+
+Host directives can be applied the same way using `tpDirectives` / `directives`.
+
 ### Text Overflow
 
 You can pass the `onlyTextOverflow` input to show the tooltip only when the host overflows its container:
@@ -293,13 +329,14 @@ tpIsEnabled: boolean;
 tpIsVisible: boolean;
 tpClassName: string;
 tpOnlyTextOverflow: boolean;
+tpStaticWidthHost: boolean;
 tpData: any;
 tpUseHostWidth: boolean;
 tpHideOnEscape: boolean;
-tpDetectChangesComponent: boolean;
 tpPopperWidth: number | string;
 tpHost: HTMLElement;
-tpIsVisible: boolean;
+tpBindings: Binding[];       // inputBinding / outputBinding / twoWayBinding descriptors
+tpDirectives: DirectiveWithBindings[]; // host directives with optional bindings
 ```
 
 ### Outputs
@@ -340,6 +377,26 @@ class Component {
 }
 ```
 
+### Enable / Disable All Tooltips
+
+`TippyService` exposes `enableAll()` and `disableAll()` methods that globally enable or disable every tooltip managed by the service:
+
+```ts
+class MyComponent {
+  private tippyService = inject(TippyService);
+
+  disableTooltips() {
+    this.tippyService.disableAll();
+  }
+
+  enableTooltips() {
+    this.tippyService.enableAll();
+  }
+}
+```
+
+Tooltips that were individually disabled via `[tpIsEnabled]="false"` are not re-enabled by `enableAll()`.
+
 ## Contributors ✨
 
 Thank goes to all these wonderful [people who contributed](https://github.com/ngneat/helipopper/graphs/contributors) ❤️

package/fesm2022/ngneat-helipopper-config.mjs

@@ -1,4 +1,5 @@
 import { InjectionToken, makeEnvironmentProviders } from '@angular/core';
+import { of } from 'rxjs';
 
 const tooltipVariation = {
     theme: undefined,
@@ -27,17 +28,30 @@ function withContextMenuVariation(baseVariation) {
 
 const TIPPY_LOADER = new InjectionToken(ngDevMode ? 'TIPPY_LOADER' : '');
 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 provideTippyConfig(config) {
-    return { provide: TIPPY_CONFIG, useValue: config };
+function provideTippyConfig(config, ...features) {
+    return makeEnvironmentProviders([
+        { provide: TIPPY_CONFIG, useValue: config },
+        ...features,
+    ]);
+}
+function withTippyLoaderComponent(component) {
+    return makeEnvironmentProviders([
+        { provide: TIPPY_LOADER_COMPONENT, useValue: component },
+    ]);
+}
+function withTippyLoaderTiming(timing) {
+    return makeEnvironmentProviders([{ provide: TIPPY_LOADER_TIMING, useValue: timing }]);
 }
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { TIPPY_CONFIG, TIPPY_LOADER, popperVariation, provideTippyConfig, provideTippyLoader, tooltipVariation, withContextMenuVariation };
+export { TIPPY_CONFIG, TIPPY_LOADER, TIPPY_LOADER_COMPONENT, TIPPY_LOADER_TIMING, popperVariation, provideTippyConfig, provideTippyLoader, tooltipVariation, withContextMenuVariation, withTippyLoaderComponent, withTippyLoaderTiming };
 //# sourceMappingURL=ngneat-helipopper-config.mjs.map

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 } 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): Variation {\n  return {\n    ...baseVariation,\n    placement: 'right-start',\n    trigger: 'manual',\n    arrow: false,\n    offset: [0, 0],\n  };\n}\n","import type tippy from 'tippy.js';\nimport type { Instance, Props } from 'tippy.js';\nimport { ElementRef, InjectionToken } from '@angular/core';\nimport type { 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\nexport interface ExtendedTippyProps extends TippyProps {\n  variations: Record<string, Partial<TippyProps>>;\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 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","import { makeEnvironmentProviders, type Provider } from '@angular/core';\n\nimport {\n  TIPPY_CONFIG,\n  TIPPY_LOADER,\n  type TippyLoader,\n  type TippyConfig,\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 {\n  return { provide: TIPPY_CONFIG, useValue: config };\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;KACf;AACH;;ACOO,MAAM,YAAY,GAAG,IAAI,cAAc,CAC5C,SAAS,GAAG,cAAc,GAAG,EAAE;AAG1B,MAAM,YAAY,GAAG,IAAI,cAAc,CAC5C,SAAS,GAAG,cAAc,GAAG,EAAE;;ACjC3B,SAAU,kBAAkB,CAAC,MAAmB,EAAA;AACpD,IAAA,OAAO,wBAAwB,CAAC,CAAC,EAAE,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC,CAAC;AAChF;AAEM,SAAU,kBAAkB,CAAC,MAAmB,EAAA;IACpD,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,EAAE;AACpD;;ACfA;;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 } 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): Variation {\n  return {\n    ...baseVariation,\n    placement: 'right-start',\n    trigger: 'manual',\n    arrow: false,\n    offset: [0, 0],\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\nexport interface ExtendedTippyProps extends TippyProps {\n  variations: Record<string, Partial<TippyProps>>;\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 { EnvironmentProviders, makeEnvironmentProviders, Type } 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(\n  config: TippyConfig,\n  ...features: EnvironmentProviders[]\n): EnvironmentProviders {\n  return makeEnvironmentProviders([\n    { provide: TIPPY_CONFIG, useValue: config },\n    ...features,\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;KACf;AACH;;ACUO,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;;AC5C5B,SAAU,kBAAkB,CAAC,MAAmB,EAAA;AACpD,IAAA,OAAO,wBAAwB,CAAC,CAAC,EAAE,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC,CAAC;AAChF;SAEgB,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,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;;AClCA;;AAEG;;;;"}