@ngneat/helipopper - npm Package Compare versions

Comparing version 8.0.2 to 8.0.3

lib/tippy.directive.d.ts

@@ -15,5 +15,4 @@ import { AfterViewInit, ElementRef, EventEmitter, Injector, NgZone, OnChanges, OnDestroy, OnInit, ViewContainerRef } from '@angular/core';
     protected hostRef: ElementRef;
-    static ngAcceptInputType_useTextContent: boolean | '';
+    set appendTo(appendTo: TippyProps['appendTo']);
     content: Content | undefined | null;
-    set appendTo(appendTo: TippyProps['appendTo']);
     delay: TippyProps['delay'];
@@ -39,2 +38,3 @@ duration: TippyProps['duration'];
     onlyTextOverflow: boolean;
+    staticWidthHost: boolean;
     data: any;
@@ -64,2 +64,3 @@ useHostWidth: boolean;
     private visibilityObserverCleanup;
+    private contentChanged;
     constructor(platformId: string, globalConfig: TippyConfig, injector: Injector, viewService: ViewService, vcr: ViewContainerRef, zone: NgZone, hostRef: ElementRef);
@@ -95,5 +96,7 @@ ngOnChanges(changes: NgChanges<TippyDirective>): void;
     private onHidden;
+    private isOverflowing$;
     static ɵfac: i0.ɵɵFactoryDeclaration<TippyDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<TippyDirective, "[tp]", ["tippy"], { "content": { "alias": "tp"; "required": false; }; "appendTo": { "alias": "tpAppendTo"; "required": false; }; "delay": { "alias": "tpDelay"; "required": false; }; "duration": { "alias": "tpDuration"; "required": false; }; "hideOnClick": { "alias": "tpHideOnClick"; "required": false; }; "interactive": { "alias": "tpInteractive"; "required": false; }; "interactiveBorder": { "alias": "tpInteractiveBorder"; "required": false; }; "maxWidth": { "alias": "tpMaxWidth"; "required": false; }; "offset": { "alias": "tpOffset"; "required": false; }; "placement": { "alias": "tpPlacement"; "required": false; }; "popperOptions": { "alias": "tpPopperOptions"; "required": false; }; "showOnCreate": { "alias": "tpShowOnCreate"; "required": false; }; "trigger": { "alias": "tpTrigger"; "required": false; }; "triggerTarget": { "alias": "tpTriggerTarget"; "required": false; }; "zIndex": { "alias": "tpZIndex"; "required": false; }; "animation": { "alias": "tpAnimation"; "required": false; }; "useTextContent": { "alias": "tpUseTextContent"; "required": false; }; "isLazy": { "alias": "tpIsLazy"; "required": false; }; "variation": { "alias": "tpVariation"; "required": false; }; "isEnabled": { "alias": "tpIsEnabled"; "required": false; }; "className": { "alias": "tpClassName"; "required": false; }; "onlyTextOverflow": { "alias": "tpOnlyTextOverflow"; "required": false; }; "data": { "alias": "tpData"; "required": false; }; "useHostWidth": { "alias": "tpUseHostWidth"; "required": false; }; "hideOnEscape": { "alias": "tpHideOnEscape"; "required": false; }; "detectChangesComponent": { "alias": "tpDetectChangesComponent"; "required": false; }; "popperWidth": { "alias": "tpPopperWidth"; "required": false; }; "customHost": { "alias": "tpHost"; "required": false; }; "isVisible": { "alias": "tpIsVisible"; "required": false; }; }, { "visible": "tpVisible"; }, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TippyDirective, "[tp]", ["tippy"], { "appendTo": { "alias": "tpAppendTo"; "required": false; }; "content": { "alias": "tp"; "required": false; }; "delay": { "alias": "tpDelay"; "required": false; }; "duration": { "alias": "tpDuration"; "required": false; }; "hideOnClick": { "alias": "tpHideOnClick"; "required": false; }; "interactive": { "alias": "tpInteractive"; "required": false; }; "interactiveBorder": { "alias": "tpInteractiveBorder"; "required": false; }; "maxWidth": { "alias": "tpMaxWidth"; "required": false; }; "offset": { "alias": "tpOffset"; "required": false; }; "placement": { "alias": "tpPlacement"; "required": false; }; "popperOptions": { "alias": "tpPopperOptions"; "required": false; }; "showOnCreate": { "alias": "tpShowOnCreate"; "required": false; }; "trigger": { "alias": "tpTrigger"; "required": false; }; "triggerTarget": { "alias": "tpTriggerTarget"; "required": false; }; "zIndex": { "alias": "tpZIndex"; "required": false; }; "animation": { "alias": "tpAnimation"; "required": false; }; "useTextContent": { "alias": "tpUseTextContent"; "required": false; }; "isLazy": { "alias": "tpIsLazy"; "required": false; }; "variation": { "alias": "tpVariation"; "required": false; }; "isEnabled": { "alias": "tpIsEnabled"; "required": false; }; "className": { "alias": "tpClassName"; "required": false; }; "onlyTextOverflow": { "alias": "tpOnlyTextOverflow"; "required": false; }; "staticWidthHost": { "alias": "tpStaticWidthHost"; "required": false; }; "data": { "alias": "tpData"; "required": false; }; "useHostWidth": { "alias": "tpUseHostWidth"; "required": false; }; "hideOnEscape": { "alias": "tpHideOnEscape"; "required": false; }; "detectChangesComponent": { "alias": "tpDetectChangesComponent"; "required": false; }; "popperWidth": { "alias": "tpPopperWidth"; "required": false; }; "customHost": { "alias": "tpHost"; "required": false; }; "isVisible": { "alias": "tpIsVisible"; "required": false; }; }, { "visible": "tpVisible"; }, never, never, true, never>;
+    static ngAcceptInputType_useTextContent: unknown;
+    static ngAcceptInputType_staticWidthHost: unknown;
 }
-export declare function coerceBooleanInput(value: any): boolean;

lib/utils.d.ts

 import { Observable } from 'rxjs';
 import { TippyElement } from './tippy.types';
 export declare function inView(host: TippyElement, options?: IntersectionObserverInit): Observable<unknown>;
+export declare function isElementOverflow(host: HTMLElement): boolean;
 export declare function overflowChanges(host: TippyElement): Observable<boolean>;
@@ -5,0 +6,0 @@ export declare function dimensionsChanges(target: HTMLElement): Observable<boolean>;

package.json

 {
   "name": "@ngneat/helipopper",
-  "version": "8.0.2",
+  "version": "8.0.3",
   "description": "A Powerful Tooltip and Popover for Angular Applications",
@@ -5,0 +5,0 @@ "dependencies": {

README.md

@@ -137,4 +137,16 @@ <p align="center">
 
-Note that it's using [`ResizeObserver`](https://caniuse.com/resizeobserver) api.
+Note: this feature is using [`ResizeObserver`](https://caniuse.com/resizeobserver) api.
 
+You might have cases where the host has a static width and the content is dynamic. In this case, use the `tpStaticWidthHost` input with combination with `tpOnlyTextOverflow`:
+
+```html
+<div style="max-width: 100px;" class="overflow-hidden flex">
+  <p style="width: 100px" class="ellipsis" [tp]="dynamicText" tpPlacement="right" [tpOnlyTextOverflow]="true" tpStaticWidthHost>
+    {{ dynamicText }}
+  </p>
+</div>
+```
+
+Note: when using `tpStaticWidthHost` you can't use `tpUseTextContent`, you need to explicitly pass the content to `tp` in order to trigger content change.
+
 ### Use Text Content
@@ -141,0 +153,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

193997

increased by3.99%

Lines of code

1680

increased by3.26%

Number of lines in readme file

319

increased by3.91%

No dependency changes