@leanix/components 0.2.238 → 0.2.239

package/index.d.ts

@@ -37,6 +37,7 @@ export * from './lib/core-ui/tooltip/tooltip.component';
 export * from './lib/core-ui/tooltip/tooltip.directive';
 export * from './lib/core-ui/tooltip/tooltip.module';
 export * from './lib/core-ui/functions/core-css.helpers';
+export * from './lib/core-ui/services/resize-observer.service';
 export * from './lib/forms-ui/forms-ui.module';
 export * from './lib/forms-ui/components/basic-dropdown/basic-dropdown.component';
 export * from './lib/forms-ui/components/basic-dropdown-item/basic-dropdown-item.component';

package/lib/core-ui/components/ellipsis/ellipsis.component.d.ts

@@ -1,27 +1,37 @@
-import { OnChanges, OnDestroy } from '@angular/core';
-import { DomSanitizer } from '@angular/platform-browser';
+import { ChangeDetectorRef, ElementRef, InjectionToken, OnDestroy, OnInit } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { ResizeObserverService } from '../../services/resize-observer.service';
 import * as i0 from "@angular/core";
-export declare class EllipsisComponent implements OnChanges, OnDestroy {
+export declare const LX_ELLIPSIS_DEBOUNCE_ON_RESIZE: InjectionToken<number>;
+/**
+ * You can set a custom max-width CSS property on your lx-ellipsis host element
+ * if you want its content to never exceed a specific width,
+ * e.g. <lx-ellipsis style="max-width: 300px" content="Hello World[..]"></lx-ellipsis>.
+ */
+export declare class EllipsisComponent implements OnInit, OnDestroy {
+    private debounceMsAfterResize;
+    private cdRef;
+    private hostEl;
+    private resizeObserverService;
     private translateService;
-    private sanitizer;
-    ellipsisBreakpoint: number;
-    content?: string;
-    isDisplayHTML: boolean;
-    showFullText: boolean;
-    private readonly showMoreLabel;
-    private readonly showLessLabel;
-    displayedText: string | null;
-    get buttonLabel(): any;
-    get showToggleButton(): boolean;
-    constructor(translateService: TranslateService, sanitizer: DomSanitizer);
-    ngOnChanges(): void;
+    static DEFAULT_RESIZE_DEBOUNCE_MS: number;
+    content: string;
+    private contentSpanEl$;
+    contentSpanEl: ElementRef<HTMLSpanElement>;
+    private showMoreButtonEl$;
+    showMoreButtonEl: ElementRef<HTMLButtonElement>;
+    isShowingMore$: BehaviorSubject<boolean>;
+    showButton$: Observable<boolean>;
+    showMoreButtonLabel$: Observable<string>;
+    private content$;
+    private destroyed$;
+    constructor(debounceMsAfterResize: number, cdRef: ChangeDetectorRef, hostEl: ElementRef, resizeObserverService: ResizeObserverService, translateService: TranslateService);
+    ngOnInit(): void;
+    onShowMoreToggle(): void;
     ngOnDestroy(): void;
-    buttonClicked(): void;
-    private getDisplayedContent;
-    private getShortenedText;
-    private applyEllipsis;
-    private getContent;
+    private detectChangesWhenObservableEmits;
+    private isContentOverflowing;
     static ɵfac: i0.ɵɵFactoryDeclaration<EllipsisComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<EllipsisComponent, "lx-ellipsis", never, { "ellipsisBreakpoint": "ellipsisBreakpoint"; "content": "content"; "isDisplayHTML": "isDisplayHTML"; }, {}, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<EllipsisComponent, "lx-ellipsis", never, { "content": "content"; }, {}, never, never>;
 }

package/lib/core-ui/services/resize-observer.service.d.ts

@@ -0,0 +1,27 @@
+import * as i0 from "@angular/core";
+export declare type LxResizeObserverCallback = (resizedElement: ResizeObserverEntry) => void;
+interface ResizeableElement extends Element {
+    handleResize: LxResizeObserverCallback;
+}
+/**
+ * Sharing one ResizeObserver object results in much better performance
+ * over individual components creating their own ResizeObserver.
+ * This is why this service exists.
+ * Source:
+ * - https://github.com/WICG/resize-observer/issues/59#issuecomment-408098151
+ * - https://groups.google.com/a/chromium.org/g/blink-dev/c/z6ienONUb5A/m/F5-VcUZtBAAJ
+ *
+ * Learn more about the ResizeObserver API:
+ * - https://www.w3.org/TR/resize-observer/
+ * - https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver
+ * - https://www.digitalocean.com/community/tutorials/js-resize-observer
+ */
+export declare class ResizeObserverService {
+    private resizeObserver?;
+    observe(element: ResizeableElement, callback: LxResizeObserverCallback, options?: ResizeObserverOptions): void;
+    unobserve(element: HTMLElement): void;
+    private resizeObserverCallback;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ResizeObserverService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ResizeObserverService>;
+}
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leanix/components",
-  "version": "0.2.238",
+  "version": "0.2.239",
   "license": "Apache-2.0",
   "author": "LeanIX GmbH",
   "repository": {