@ngneat/helipopper 9.2.0 → 10.0.0-alpha.0

package/README.md

@@ -38,8 +38,12 @@ If you're using v1 and don't want to migrate, you can find it [here](https://git
 
 ### Installation
 
-```
-npm install @ngneat/helipopper
+```sh
+$ npm i @ngneat/helipopper
+# Or if you're using yarn
+$ yarn add @ngneat/helipopper
+# Or if you're using pnpm
+$ pnpm i @ngneat/helipopper
 ```
 
 Configure it as shown below:
@@ -50,22 +54,33 @@ import { provideTippyConfig, tooltipVariation, popperVariation } from '@ngneat/h
 bootstrapApplication(AppComponent, {
   providers: [
     provideTippyConfig({
+      loader: () => import('tippy.js'),
       defaultVariation: 'tooltip',
       variations: {
         tooltip: tooltipVariation,
         popper: popperVariation,
-      }
-    })
-  ]
-})
+      },
+    }),
+  ],
+});
+```
+
+Please note that the `loader` property is required, as it specifies how Tippy is loaded - either synchronously or asynchronously. When dynamic import is used, the library will load only when the first Tippy directive is rendered. If we want it to load synchronously, we use the following:
+
+```ts
+import tippy from 'tippy.js';
+
+provideTippyConfig({
+  loader: () => tippy,
+});
 ```
 
 Add the styles you want to `styles.scss`:
 
 ```scss
-@import '~tippy.js/dist/tippy.css';
-@import '~tippy.js/themes/light.css';
-@import '~tippy.js/animations/scale.css';
+@import 'tippy.js/dist/tippy.css';
+@import 'tippy.js/themes/light.css';
+@import 'tippy.js/animations/scale.css';
 ```
 
 You have the freedom to [customize](https://atomiks.github.io/tippyjs/v6/themes/) it if you need to.
@@ -73,9 +88,7 @@ You have the freedom to [customize](https://atomiks.github.io/tippyjs/v6/themes/
 Import the standalone `TippyDirective` and use it in your templates:
 
 ```html
-<button tp="Helpful Message">
-  I have a tooltip
-</button>
+<button tp="Helpful Message">I have a tooltip</button>
 ```
 
 The library exposes default variations for `tooltip` and `popper`. You can use them, extend them, or pass your own
@@ -88,16 +101,14 @@ export const tooltipVariation = {
   arrow: false,
   animation: 'scale',
   trigger: 'mouseenter',
-  offset: [0, 5]
+  offset: [0, 5],
 };
 ```
 
 ### Use `TemplateRef` as content
 
 ```html
-<button [tp]="tpl" tpVariation="popper">
-  Click Me
-</button>
+<button [tp]="tpl" tpVariation="popper">Click Me</button>
 
 <ng-template #tpl let-hide>
   <h6>Popover title</h6>
@@ -117,9 +128,7 @@ class MyComponent {
 ```
 
 ```html
-<button [tp]="MyComponent">
-  Click Me
-</button>
+<button [tp]="MyComponent">Click Me</button>
 ```
 
 ### Text Overflow
@@ -128,9 +137,7 @@ You can pass the `onlyTextOverflow` input to show the tooltip only when the host
 
 ```html
 <div style="max-width: 100px;" class="overflow-hidden flex">
-  <p class="ellipsis" [tp]="text" tpPlacement="right" [tpOnlyTextOverflow]="true">
-    {{ text }}
-  </p>
+  <p class="ellipsis" [tp]="text" tpPlacement="right" [tpOnlyTextOverflow]="true">{{ text }}</p>
 </div>
 ```
 
@@ -140,7 +147,14 @@ You might have cases where the host has a static width and the content is dynami
 
 ```html
 <div style="max-width: 100px;" class="overflow-hidden flex">
-  <p style="width: 100px" class="ellipsis" [tp]="dynamicText" tpPlacement="right" [tpOnlyTextOverflow]="true" tpStaticWidthHost>
+  <p
+    style="width: 100px"
+    class="ellipsis"
+    [tp]="dynamicText"
+    tpPlacement="right"
+    [tpOnlyTextOverflow]="true"
+    tpStaticWidthHost
+  >
     {{ dynamicText }}
   </p>
 </div>
@@ -153,34 +167,25 @@ Note: when using `tpStaticWidthHost` you can't use `tpUseTextContent`, you need
 You can instruct tippy to use the element textContent as the tooltip content:
 
 ```html
-<p tp tpUseTextContent>
-  {{ text }}
-</p>
+<p tp tpUseTextContent>{{ text }}</p>
 ```
 
-
 ### Lazy
 
 You can pass the `tpIsLazy` input when you want to defer the creation of tippy only when the element is in the view:
 
 ```html
-<div *ngFor="let item of items" 
-     [tp]="item.label" 
-     [tpIsLazy]="true">{{ item.label }}
-</div>
+<div *ngFor="let item of items" [tp]="item.label" [tpIsLazy]="true">{{ item.label }}</div>
 ```
 
 Note that it's using [`IntersectionObserver`](https://caniuse.com/intersectionobserver) api.
 
 ### Context Menu
+
 First, define the `contextMenu` variation:
+
 ```ts
-import { 
-  popperVariation, 
-  tooltipVariation, 
-  provideTippyConfig,
-  withContextMenuVariation 
-} from '@ngneat/helipopper';
+import { popperVariation, tooltipVariation, provideTippyConfig, withContextMenuVariation } from '@ngneat/helipopper';
 
 bootstrapApplication(AppComponent, {
   providers: [
@@ -190,10 +195,10 @@ bootstrapApplication(AppComponent, {
         tooltip: tooltipVariation,
         popper: popperVariation,
         contextMenu: withContextMenuVariation(popperVariation),
-      }
-    })
-  ]
-})
+      },
+    }),
+  ],
+});
 ```
 
 Now you can use it in your template:
@@ -207,21 +212,14 @@ Now you can use it in your template:
 </ng-template>
 
 <ul>
-  <li *ngFor="let item of list" 
-      [tp]="contextMenu" 
-      [tpData]="item" 
-      tpVariation="contextMenu">
-    {{ item.label }}
-  </li>
+  <li *ngFor="let item of list" [tp]="contextMenu" [tpData]="item" tpVariation="contextMenu">{{ item.label }}</li>
 </ul>
 ```
 
 ### Manual Trigger
 
 ```html
-<div tp="Helpful Message" tpTrigger="manual" #tooltip="tippy">
-  Click Open to see me
-</div>
+<div tp="Helpful Message" tpTrigger="manual" #tooltip="tippy">Click Open to see me</div>
 
 <button (click)="tooltip.show()">Open</button>
 <button (click)="tooltip.hide()">Close</button>
@@ -232,9 +230,7 @@ Now you can use it in your template:
 Use isVisible to trigger show and hide. Set trigger to manual.
 
 ```html
-<div tp="Helpful Message" tpTrigger="manual" [tpIsVisible]="visibility">
-  Click Open to see me
-</div>
+<div tp="Helpful Message" tpTrigger="manual" [tpIsVisible]="visibility">Click Open to see me</div>
 
 <button (click)="visibility = true">Open</button>
 <button (click)="visibility = false">Close</button>
@@ -286,7 +282,8 @@ tpVisible = new EventEmitter<boolean>();
 ```
 
 ### Global Config
-- You can pass any `tippy` option at global config level. 
+
+- You can pass any `tippy` option at global config level.
 - `beforeRender` - Hook that'll be called before rendering the tooltip content ( applies only for string )
 
 ### Create `tippy` Programmatically
@@ -300,7 +297,7 @@ class Component {
   private tippyService = inject(TippyService);
 
   show() {
-    if(!this.tippy) {
+    if (!this.tippy) {
       this.tippy = this.tippyService.create(this.inputName, 'this field is required');
     }
 

package/esm2022/lib/coercion.mjs

@@ -0,0 +1,10 @@
+import { booleanAttribute as originalBooleanAttribute } from '@angular/core';
+/**
+ * Transforms a value (typically a string) to a boolean.
+ * Intended to be used as a transform function of an input.
+ *
+ * @see https://material.angular.io/cdk/coercion/overview
+ */
+const coerceBooleanAttribute = originalBooleanAttribute;
+export { coerceBooleanAttribute };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29lcmNpb24uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ25lYXQvaGVsaXBvcHBlci9zcmMvbGliL2NvZXJjaW9uLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxnQkFBZ0IsSUFBSSx3QkFBd0IsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUk3RTs7Ozs7R0FLRztBQUNILE1BQU0sc0JBQXNCLEdBQXFDLHdCQUF3QixDQUFDO0FBRTFGLE9BQU8sRUFBRSxzQkFBc0IsRUFBRSxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgYm9vbGVhbkF0dHJpYnV0ZSBhcyBvcmlnaW5hbEJvb2xlYW5BdHRyaWJ1dGUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxudHlwZSBCb29sZWFuSW5wdXQgPSBib29sZWFuIHwgYCR7Ym9vbGVhbn1gIHwgJycgfCBudWxsIHwgdW5kZWZpbmVkO1xuXG4vKipcbiAqIFRyYW5zZm9ybXMgYSB2YWx1ZSAodHlwaWNhbGx5IGEgc3RyaW5nKSB0byBhIGJvb2xlYW4uXG4gKiBJbnRlbmRlZCB0byBiZSB1c2VkIGFzIGEgdHJhbnNmb3JtIGZ1bmN0aW9uIG9mIGFuIGlucHV0LlxuICpcbiAqIEBzZWUgaHR0cHM6Ly9tYXRlcmlhbC5hbmd1bGFyLmlvL2Nkay9jb2VyY2lvbi9vdmVydmlld1xuICovXG5jb25zdCBjb2VyY2VCb29sZWFuQXR0cmlidXRlOiAodmFsdWU6IEJvb2xlYW5JbnB1dCkgPT4gYm9vbGVhbiA9IG9yaWdpbmFsQm9vbGVhbkF0dHJpYnV0ZTtcblxuZXhwb3J0IHsgY29lcmNlQm9vbGVhbkF0dHJpYnV0ZSB9O1xuIl19

package/esm2022/lib/intersection-observer.mjs

@@ -0,0 +1,9 @@
+// Let's retrieve the native `IntersectionObserver` implementation hidden by
+// `__zone_symbol__IntersectionObserver`. This would be the unpatched version of
+// the observer present in zone.js environments.
+// Otherwise, if the user is using zoneless change detection (and zone.js is not included),
+// we fall back to the native implementation. Accessing the native implementation
+// allows us to remove `runOutsideAngular` calls and reduce indentation,
+// making the code a bit more readable.
+export const IntersectionObserver = globalThis['__zone_symbol__IntersectionObserver'] || globalThis.IntersectionObserver;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW50ZXJzZWN0aW9uLW9ic2VydmVyLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmduZWF0L2hlbGlwb3BwZXIvc3JjL2xpYi9pbnRlcnNlY3Rpb24tb2JzZXJ2ZXIudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsNEVBQTRFO0FBQzVFLGdGQUFnRjtBQUNoRixnREFBZ0Q7QUFDaEQsMkZBQTJGO0FBQzNGLGlGQUFpRjtBQUNqRix3RUFBd0U7QUFDeEUsdUNBQXVDO0FBQ3ZDLE1BQU0sQ0FBQyxNQUFNLG9CQUFvQixHQUMvQixVQUFVLENBQUMscUNBQXFDLENBQUMsSUFBSSxVQUFVLENBQUMsb0JBQW9CLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyIvLyBMZXQncyByZXRyaWV2ZSB0aGUgbmF0aXZlIGBJbnRlcnNlY3Rpb25PYnNlcnZlcmAgaW1wbGVtZW50YXRpb24gaGlkZGVuIGJ5XG4vLyBgX196b25lX3N5bWJvbF9fSW50ZXJzZWN0aW9uT2JzZXJ2ZXJgLiBUaGlzIHdvdWxkIGJlIHRoZSB1bnBhdGNoZWQgdmVyc2lvbiBvZlxuLy8gdGhlIG9ic2VydmVyIHByZXNlbnQgaW4gem9uZS5qcyBlbnZpcm9ubWVudHMuXG4vLyBPdGhlcndpc2UsIGlmIHRoZSB1c2VyIGlzIHVzaW5nIHpvbmVsZXNzIGNoYW5nZSBkZXRlY3Rpb24gKGFuZCB6b25lLmpzIGlzIG5vdCBpbmNsdWRlZCksXG4vLyB3ZSBmYWxsIGJhY2sgdG8gdGhlIG5hdGl2ZSBpbXBsZW1lbnRhdGlvbi4gQWNjZXNzaW5nIHRoZSBuYXRpdmUgaW1wbGVtZW50YXRpb25cbi8vIGFsbG93cyB1cyB0byByZW1vdmUgYHJ1bk91dHNpZGVBbmd1bGFyYCBjYWxscyBhbmQgcmVkdWNlIGluZGVudGF0aW9uLFxuLy8gbWFraW5nIHRoZSBjb2RlIGEgYml0IG1vcmUgcmVhZGFibGUuXG5leHBvcnQgY29uc3QgSW50ZXJzZWN0aW9uT2JzZXJ2ZXI6IHR5cGVvZiBnbG9iYWxUaGlzLkludGVyc2VjdGlvbk9ic2VydmVyID1cbiAgZ2xvYmFsVGhpc1snX196b25lX3N5bWJvbF9fSW50ZXJzZWN0aW9uT2JzZXJ2ZXInXSB8fCBnbG9iYWxUaGlzLkludGVyc2VjdGlvbk9ic2VydmVyO1xuIl19

package/esm2022/lib/providers.mjs

@@ -1,6 +1,6 @@
 import { inject, makeEnvironmentProviders } from '@angular/core';
 import { TIPPY_CONFIG, TIPPY_REF } from './tippy.types';
-export function provideTippyConfig(config = {}) {
+export function provideTippyConfig(config) {
     return makeEnvironmentProviders([{ provide: TIPPY_CONFIG, useValue: config }]);
 }
 export function injectTippyRef() {
@@ -10,4 +10,4 @@ export function injectTippyRef() {
     }
     throw new Error('tp is not provided in the current context or on one of its ancestors');
 }
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJvdmlkZXJzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmduZWF0L2hlbGlwb3BwZXIvc3JjL2xpYi9wcm92aWRlcnMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLE1BQU0sRUFBRSx3QkFBd0IsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNqRSxPQUFPLEVBQUUsWUFBWSxFQUFFLFNBQVMsRUFBOEIsTUFBTSxlQUFlLENBQUM7QUFFcEYsTUFBTSxVQUFVLGtCQUFrQixDQUFDLFNBQStCLEVBQUU7SUFDbEUsT0FBTyx3QkFBd0IsQ0FBQyxDQUFDLEVBQUUsT0FBTyxFQUFFLFlBQVksRUFBRSxRQUFRLEVBQUUsTUFBTSxFQUFFLENBQUMsQ0FBQyxDQUFDO0FBQ2pGLENBQUM7QUFFRCxNQUFNLFVBQVUsY0FBYztJQUM1QixNQUFNLFFBQVEsR0FBRyxNQUFNLENBQUMsU0FBUyxFQUFFLEVBQUUsUUFBUSxFQUFFLElBQUksRUFBRSxDQUFDLENBQUM7SUFFdkQsSUFBSSxRQUFRLEVBQUU7UUFDWixPQUFPLFFBQVEsQ0FBQztLQUNqQjtJQUVELE1BQU0sSUFBSSxLQUFLLENBQUMsc0VBQXNFLENBQUMsQ0FBQztBQUMxRixDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgaW5qZWN0LCBtYWtlRW52aXJvbm1lbnRQcm92aWRlcnMgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IFRJUFBZX0NPTkZJRywgVElQUFlfUkVGLCBUaXBweUNvbmZpZywgVGlwcHlJbnN0YW5jZSB9IGZyb20gJy4vdGlwcHkudHlwZXMnO1xuXG5leHBvcnQgZnVuY3Rpb24gcHJvdmlkZVRpcHB5Q29uZmlnKGNvbmZpZzogUGFydGlhbDxUaXBweUNvbmZpZz4gPSB7fSkge1xuICByZXR1cm4gbWFrZUVudmlyb25tZW50UHJvdmlkZXJzKFt7IHByb3ZpZGU6IFRJUFBZX0NPTkZJRywgdXNlVmFsdWU6IGNvbmZpZyB9XSk7XG59XG5cbmV4cG9ydCBmdW5jdGlvbiBpbmplY3RUaXBweVJlZigpOiBUaXBweUluc3RhbmNlIHtcbiAgY29uc3QgaW5zdGFuY2UgPSBpbmplY3QoVElQUFlfUkVGLCB7IG9wdGlvbmFsOiB0cnVlIH0pO1xuXG4gIGlmIChpbnN0YW5jZSkge1xuICAgIHJldHVybiBpbnN0YW5jZTtcbiAgfVxuXG4gIHRocm93IG5ldyBFcnJvcigndHAgaXMgbm90IHByb3ZpZGVkIGluIHRoZSBjdXJyZW50IGNvbnRleHQgb3Igb24gb25lIG9mIGl0cyBhbmNlc3RvcnMnKTtcbn1cbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJvdmlkZXJzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmduZWF0L2hlbGlwb3BwZXIvc3JjL2xpYi9wcm92aWRlcnMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLE1BQU0sRUFBRSx3QkFBd0IsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNqRSxPQUFPLEVBQUUsWUFBWSxFQUFFLFNBQVMsRUFBOEIsTUFBTSxlQUFlLENBQUM7QUFFcEYsTUFBTSxVQUFVLGtCQUFrQixDQUFDLE1BQW1CO0lBQ3BELE9BQU8sd0JBQXdCLENBQUMsQ0FBQyxFQUFFLE9BQU8sRUFBRSxZQUFZLEVBQUUsUUFBUSxFQUFFLE1BQU0sRUFBRSxDQUFDLENBQUMsQ0FBQztBQUNqRixDQUFDO0FBRUQsTUFBTSxVQUFVLGNBQWM7SUFDNUIsTUFBTSxRQUFRLEdBQUcsTUFBTSxDQUFDLFNBQVMsRUFBRSxFQUFFLFFBQVEsRUFBRSxJQUFJLEVBQUUsQ0FBQyxDQUFDO0lBRXZELElBQUksUUFBUSxFQUFFLENBQUM7UUFDYixPQUFPLFFBQVEsQ0FBQztJQUNsQixDQUFDO0lBRUQsTUFBTSxJQUFJLEtBQUssQ0FBQyxzRUFBc0UsQ0FBQyxDQUFDO0FBQzFGLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBpbmplY3QsIG1ha2VFbnZpcm9ubWVudFByb3ZpZGVycyB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgVElQUFlfQ09ORklHLCBUSVBQWV9SRUYsIFRpcHB5Q29uZmlnLCBUaXBweUluc3RhbmNlIH0gZnJvbSAnLi90aXBweS50eXBlcyc7XG5cbmV4cG9ydCBmdW5jdGlvbiBwcm92aWRlVGlwcHlDb25maWcoY29uZmlnOiBUaXBweUNvbmZpZykge1xuICByZXR1cm4gbWFrZUVudmlyb25tZW50UHJvdmlkZXJzKFt7IHByb3ZpZGU6IFRJUFBZX0NPTkZJRywgdXNlVmFsdWU6IGNvbmZpZyB9XSk7XG59XG5cbmV4cG9ydCBmdW5jdGlvbiBpbmplY3RUaXBweVJlZigpOiBUaXBweUluc3RhbmNlIHtcbiAgY29uc3QgaW5zdGFuY2UgPSBpbmplY3QoVElQUFlfUkVGLCB7IG9wdGlvbmFsOiB0cnVlIH0pO1xuXG4gIGlmIChpbnN0YW5jZSkge1xuICAgIHJldHVybiBpbnN0YW5jZTtcbiAgfVxuXG4gIHRocm93IG5ldyBFcnJvcigndHAgaXMgbm90IHByb3ZpZGVkIGluIHRoZSBjdXJyZW50IGNvbnRleHQgb3Igb24gb25lIG9mIGl0cyBhbmNlc3RvcnMnKTtcbn1cbiJdfQ==