@leanix/components 0.2.238 → 0.2.239
Sign up to get free protection for your applications and to get access to all the features.
- package/esm2020/index.mjs +3 -1
- package/esm2020/lib/core-ui/components/button/button.component.mjs +2 -2
- package/esm2020/lib/core-ui/components/ellipsis/ellipsis.component.mjs +111 -56
- package/esm2020/lib/core-ui/services/resize-observer.service.mjs +47 -0
- package/fesm2015/leanix-components.mjs +258 -158
- package/fesm2015/leanix-components.mjs.map +1 -1
- package/fesm2020/leanix-components.mjs +255 -157
- package/fesm2020/leanix-components.mjs.map +1 -1
- package/index.d.ts +1 -0
- package/lib/core-ui/components/ellipsis/ellipsis.component.d.ts +31 -21
- package/lib/core-ui/services/resize-observer.service.d.ts +27 -0
- package/package.json +1 -1
package/index.d.ts
CHANGED
@@ -37,6 +37,7 @@ export * from './lib/core-ui/tooltip/tooltip.component';
|
|
37
37
|
export * from './lib/core-ui/tooltip/tooltip.directive';
|
38
38
|
export * from './lib/core-ui/tooltip/tooltip.module';
|
39
39
|
export * from './lib/core-ui/functions/core-css.helpers';
|
40
|
+
export * from './lib/core-ui/services/resize-observer.service';
|
40
41
|
export * from './lib/forms-ui/forms-ui.module';
|
41
42
|
export * from './lib/forms-ui/components/basic-dropdown/basic-dropdown.component';
|
42
43
|
export * from './lib/forms-ui/components/basic-dropdown-item/basic-dropdown-item.component';
|
@@ -1,27 +1,37 @@
|
|
1
|
-
import {
|
2
|
-
import { DomSanitizer } from '@angular/platform-browser';
|
1
|
+
import { ChangeDetectorRef, ElementRef, InjectionToken, OnDestroy, OnInit } from '@angular/core';
|
3
2
|
import { TranslateService } from '@ngx-translate/core';
|
3
|
+
import { BehaviorSubject, Observable } from 'rxjs';
|
4
|
+
import { ResizeObserverService } from '../../services/resize-observer.service';
|
4
5
|
import * as i0 from "@angular/core";
|
5
|
-
export declare
|
6
|
+
export declare const LX_ELLIPSIS_DEBOUNCE_ON_RESIZE: InjectionToken<number>;
|
7
|
+
/**
|
8
|
+
* You can set a custom max-width CSS property on your lx-ellipsis host element
|
9
|
+
* if you want its content to never exceed a specific width,
|
10
|
+
* e.g. <lx-ellipsis style="max-width: 300px" content="Hello World[..]"></lx-ellipsis>.
|
11
|
+
*/
|
12
|
+
export declare class EllipsisComponent implements OnInit, OnDestroy {
|
13
|
+
private debounceMsAfterResize;
|
14
|
+
private cdRef;
|
15
|
+
private hostEl;
|
16
|
+
private resizeObserverService;
|
6
17
|
private translateService;
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
18
|
+
static DEFAULT_RESIZE_DEBOUNCE_MS: number;
|
19
|
+
content: string;
|
20
|
+
private contentSpanEl$;
|
21
|
+
contentSpanEl: ElementRef<HTMLSpanElement>;
|
22
|
+
private showMoreButtonEl$;
|
23
|
+
showMoreButtonEl: ElementRef<HTMLButtonElement>;
|
24
|
+
isShowingMore$: BehaviorSubject<boolean>;
|
25
|
+
showButton$: Observable<boolean>;
|
26
|
+
showMoreButtonLabel$: Observable<string>;
|
27
|
+
private content$;
|
28
|
+
private destroyed$;
|
29
|
+
constructor(debounceMsAfterResize: number, cdRef: ChangeDetectorRef, hostEl: ElementRef, resizeObserverService: ResizeObserverService, translateService: TranslateService);
|
30
|
+
ngOnInit(): void;
|
31
|
+
onShowMoreToggle(): void;
|
19
32
|
ngOnDestroy(): void;
|
20
|
-
|
21
|
-
private
|
22
|
-
private getShortenedText;
|
23
|
-
private applyEllipsis;
|
24
|
-
private getContent;
|
33
|
+
private detectChangesWhenObservableEmits;
|
34
|
+
private isContentOverflowing;
|
25
35
|
static ɵfac: i0.ɵɵFactoryDeclaration<EllipsisComponent, never>;
|
26
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<EllipsisComponent, "lx-ellipsis", never, { "
|
36
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<EllipsisComponent, "lx-ellipsis", never, { "content": "content"; }, {}, never, never>;
|
27
37
|
}
|
@@ -0,0 +1,27 @@
|
|
1
|
+
import * as i0 from "@angular/core";
|
2
|
+
export declare type LxResizeObserverCallback = (resizedElement: ResizeObserverEntry) => void;
|
3
|
+
interface ResizeableElement extends Element {
|
4
|
+
handleResize: LxResizeObserverCallback;
|
5
|
+
}
|
6
|
+
/**
|
7
|
+
* Sharing one ResizeObserver object results in much better performance
|
8
|
+
* over individual components creating their own ResizeObserver.
|
9
|
+
* This is why this service exists.
|
10
|
+
* Source:
|
11
|
+
* - https://github.com/WICG/resize-observer/issues/59#issuecomment-408098151
|
12
|
+
* - https://groups.google.com/a/chromium.org/g/blink-dev/c/z6ienONUb5A/m/F5-VcUZtBAAJ
|
13
|
+
*
|
14
|
+
* Learn more about the ResizeObserver API:
|
15
|
+
* - https://www.w3.org/TR/resize-observer/
|
16
|
+
* - https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver
|
17
|
+
* - https://www.digitalocean.com/community/tutorials/js-resize-observer
|
18
|
+
*/
|
19
|
+
export declare class ResizeObserverService {
|
20
|
+
private resizeObserver?;
|
21
|
+
observe(element: ResizeableElement, callback: LxResizeObserverCallback, options?: ResizeObserverOptions): void;
|
22
|
+
unobserve(element: HTMLElement): void;
|
23
|
+
private resizeObserverCallback;
|
24
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<ResizeObserverService, never>;
|
25
|
+
static ɵprov: i0.ɵɵInjectableDeclaration<ResizeObserverService>;
|
26
|
+
}
|
27
|
+
export {};
|