@ngil/components 5.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +7 -0
- package/fesm2022/ngil-components.mjs +341 -0
- package/fesm2022/ngil-components.mjs.map +1 -0
- package/package.json +30 -0
- package/types/ngil-components.d.ts +83 -0
package/README.md
ADDED
|
@@ -0,0 +1,341 @@
|
|
|
1
|
+
import * as i1$1 from '@angular/common';
|
|
2
|
+
import { CommonModule } from '@angular/common';
|
|
3
|
+
import * as i0 from '@angular/core';
|
|
4
|
+
import { Input, ViewChild, ViewEncapsulation, ChangeDetectionStrategy, Component, HostListener, HostBinding, Directive } from '@angular/core';
|
|
5
|
+
import * as i1 from '@angular/cdk/overlay';
|
|
6
|
+
import { OverlayModule } from '@angular/cdk/overlay';
|
|
7
|
+
import { DomPortal } from '@angular/cdk/portal';
|
|
8
|
+
import { Subject, takeUntil } from 'rxjs';
|
|
9
|
+
|
|
10
|
+
class NgilOverlayComponent {
|
|
11
|
+
constructor(overlay) {
|
|
12
|
+
this.overlay = overlay;
|
|
13
|
+
this.overwriteConfig = {};
|
|
14
|
+
this.positions = undefined;
|
|
15
|
+
this.destroy$ = new Subject();
|
|
16
|
+
this.isOpened = false;
|
|
17
|
+
}
|
|
18
|
+
open() {
|
|
19
|
+
const config = this.getOverlayConfig();
|
|
20
|
+
this.overlayRef = this.overlay.create(config);
|
|
21
|
+
const portal = new DomPortal(this.el);
|
|
22
|
+
this.overlayRef.attach(portal);
|
|
23
|
+
if (config.hasBackdrop) {
|
|
24
|
+
this.overlayRef
|
|
25
|
+
.backdropClick()
|
|
26
|
+
.pipe(takeUntil(this.destroy$))
|
|
27
|
+
.subscribe(() => {
|
|
28
|
+
this.close();
|
|
29
|
+
});
|
|
30
|
+
}
|
|
31
|
+
this.isOpened = true;
|
|
32
|
+
}
|
|
33
|
+
getOverlayConfig() {
|
|
34
|
+
return {
|
|
35
|
+
positionStrategy: this.getStrategy(),
|
|
36
|
+
hasBackdrop: true,
|
|
37
|
+
backdropClass: this.origin ? 'cdk-overlay-transparent-backdrop' : 'cdk-overlay-dark-backdrop',
|
|
38
|
+
panelClass: ['ngil-overlay-panel'],
|
|
39
|
+
minWidth: this.origin?.nativeElement.offsetWidth,
|
|
40
|
+
...this.overwriteConfig
|
|
41
|
+
};
|
|
42
|
+
}
|
|
43
|
+
getStrategy() {
|
|
44
|
+
if (!this.origin) {
|
|
45
|
+
return this.overlay.position().global().centerHorizontally().centerVertically();
|
|
46
|
+
}
|
|
47
|
+
const primaryX = 'start';
|
|
48
|
+
const secondaryX = primaryX === 'start' ? 'end' : 'start';
|
|
49
|
+
const primaryY = 'top';
|
|
50
|
+
const secondaryY = 'bottom';
|
|
51
|
+
return this.overlay
|
|
52
|
+
.position()
|
|
53
|
+
.flexibleConnectedTo(this.origin)
|
|
54
|
+
.withPositions(this.positions || [
|
|
55
|
+
{
|
|
56
|
+
originX: primaryX,
|
|
57
|
+
originY: secondaryY,
|
|
58
|
+
overlayX: primaryX,
|
|
59
|
+
overlayY: primaryY
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
originX: primaryX,
|
|
63
|
+
originY: primaryY,
|
|
64
|
+
overlayX: primaryX,
|
|
65
|
+
overlayY: secondaryY
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
originX: secondaryX,
|
|
69
|
+
originY: secondaryY,
|
|
70
|
+
overlayX: secondaryX,
|
|
71
|
+
overlayY: primaryY
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
originX: secondaryX,
|
|
75
|
+
originY: primaryY,
|
|
76
|
+
overlayX: secondaryX,
|
|
77
|
+
overlayY: secondaryY
|
|
78
|
+
}
|
|
79
|
+
]);
|
|
80
|
+
}
|
|
81
|
+
close() {
|
|
82
|
+
this.destroy$.next();
|
|
83
|
+
this.overlayRef?.dispose();
|
|
84
|
+
this.overlayRef = undefined;
|
|
85
|
+
this.isOpened = false;
|
|
86
|
+
}
|
|
87
|
+
toggle() {
|
|
88
|
+
if (this.isOpened) {
|
|
89
|
+
this.close();
|
|
90
|
+
}
|
|
91
|
+
else {
|
|
92
|
+
this.open();
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
ngOnDestroy() {
|
|
96
|
+
this.destroy$.next();
|
|
97
|
+
this.destroy$.complete();
|
|
98
|
+
}
|
|
99
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgilOverlayComponent, deps: [{ token: i1.Overlay }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
100
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.4", type: NgilOverlayComponent, isStandalone: true, selector: "ngil-overlay", inputs: { overwriteConfig: "overwriteConfig", positions: "positions" }, viewQueries: [{ propertyName: "el", first: true, predicate: ["contentWrapper"], descendants: true }], ngImport: i0, template: "<div class=\"ngil-overlay-content\" #contentWrapper>\r\n <ng-content></ng-content>\r\n</div>\r\n", styles: ["ngil-overlay{display:none}.ngil-overlay-panel .ngil-overlay-content{display:flex;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: OverlayModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
101
|
+
}
|
|
102
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgilOverlayComponent, decorators: [{
|
|
103
|
+
type: Component,
|
|
104
|
+
args: [{ selector: 'ngil-overlay', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [OverlayModule], template: "<div class=\"ngil-overlay-content\" #contentWrapper>\r\n <ng-content></ng-content>\r\n</div>\r\n", styles: ["ngil-overlay{display:none}.ngil-overlay-panel .ngil-overlay-content{display:flex;width:100%}\n"] }]
|
|
105
|
+
}], ctorParameters: () => [{ type: i1.Overlay }], propDecorators: { el: [{
|
|
106
|
+
type: ViewChild,
|
|
107
|
+
args: ['contentWrapper']
|
|
108
|
+
}], overwriteConfig: [{
|
|
109
|
+
type: Input
|
|
110
|
+
}], positions: [{
|
|
111
|
+
type: Input
|
|
112
|
+
}] } });
|
|
113
|
+
|
|
114
|
+
class NgilTooltipComponent {
|
|
115
|
+
constructor() {
|
|
116
|
+
this.text = '';
|
|
117
|
+
}
|
|
118
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgilTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
119
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.4", type: NgilTooltipComponent, isStandalone: true, selector: "ngil-tooltip", inputs: { text: "text" }, ngImport: i0, template: "<div class=\"tooltip\">{{ text }}</div>\r\n", styles: [".tooltip{background-color:#000c;color:#fff;padding:5px;border-radius:5px}\n"] }); }
|
|
120
|
+
}
|
|
121
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgilTooltipComponent, decorators: [{
|
|
122
|
+
type: Component,
|
|
123
|
+
args: [{ selector: 'ngil-tooltip', imports: [], template: "<div class=\"tooltip\">{{ text }}</div>\r\n", styles: [".tooltip{background-color:#000c;color:#fff;padding:5px;border-radius:5px}\n"] }]
|
|
124
|
+
}], propDecorators: { text: [{
|
|
125
|
+
type: Input
|
|
126
|
+
}] } });
|
|
127
|
+
|
|
128
|
+
class NgilTooltipDirective {
|
|
129
|
+
constructor(elementRef, viewContainerRef, renderer) {
|
|
130
|
+
this.elementRef = elementRef;
|
|
131
|
+
this.viewContainerRef = viewContainerRef;
|
|
132
|
+
this.renderer = renderer;
|
|
133
|
+
this.tooltipText = '';
|
|
134
|
+
this.disabled = false;
|
|
135
|
+
this.position = 'relative';
|
|
136
|
+
this.overlayComponentRef = this.viewContainerRef.createComponent(NgilOverlayComponent);
|
|
137
|
+
this.onMouseLeaveOverlay = (event) => {
|
|
138
|
+
const newTarget = event.relatedTarget;
|
|
139
|
+
if (!newTarget || !this.elementRef.nativeElement.contains(newTarget)) {
|
|
140
|
+
this.hide();
|
|
141
|
+
}
|
|
142
|
+
};
|
|
143
|
+
this.renderOverlayComponentRef();
|
|
144
|
+
}
|
|
145
|
+
renderOverlayComponentRef() {
|
|
146
|
+
this.overlayComponentRef.instance.origin = this.elementRef;
|
|
147
|
+
this.overlayComponentRef.instance.positions = [
|
|
148
|
+
{
|
|
149
|
+
originX: 'start',
|
|
150
|
+
originY: 'bottom',
|
|
151
|
+
overlayX: 'start',
|
|
152
|
+
overlayY: 'top'
|
|
153
|
+
},
|
|
154
|
+
{
|
|
155
|
+
originX: 'start',
|
|
156
|
+
originY: 'top',
|
|
157
|
+
overlayX: 'start',
|
|
158
|
+
overlayY: 'bottom'
|
|
159
|
+
}
|
|
160
|
+
];
|
|
161
|
+
this.renderer.appendChild(this.viewContainerRef.element.nativeElement, this.overlayComponentRef.location.nativeElement);
|
|
162
|
+
}
|
|
163
|
+
onMouseOver() {
|
|
164
|
+
if (!this.disabled && !this.tooltipComponentRef) {
|
|
165
|
+
const overwriteConfig = {
|
|
166
|
+
hasBackdrop: false,
|
|
167
|
+
maxWidth: this.elementRef.nativeElement.offsetWidth
|
|
168
|
+
};
|
|
169
|
+
this.tooltipComponentRef = this.createTooltipComponentRef();
|
|
170
|
+
this.overlayComponentRef.instance.el = this.tooltipComponentRef.location;
|
|
171
|
+
this.overlayComponentRef.setInput('overwriteConfig', overwriteConfig);
|
|
172
|
+
this.overlayComponentRef.instance.open();
|
|
173
|
+
}
|
|
174
|
+
}
|
|
175
|
+
onMouseLeaveOrigin(event) {
|
|
176
|
+
const newTarget = event.relatedTarget;
|
|
177
|
+
if (!newTarget || !this.tooltipComponentRef?.location.nativeElement.contains(newTarget)) {
|
|
178
|
+
this.hide();
|
|
179
|
+
}
|
|
180
|
+
else {
|
|
181
|
+
this.tooltipComponentRef?.location.nativeElement.addEventListener('mouseleave', this.onMouseLeaveOverlay);
|
|
182
|
+
}
|
|
183
|
+
}
|
|
184
|
+
createTooltipComponentRef() {
|
|
185
|
+
const tooltipComponentRef = this.viewContainerRef.createComponent(NgilTooltipComponent);
|
|
186
|
+
this.renderer.appendChild(this.overlayComponentRef.location.nativeElement, tooltipComponentRef.location.nativeElement);
|
|
187
|
+
tooltipComponentRef.setInput('text', this.tooltipText);
|
|
188
|
+
return tooltipComponentRef;
|
|
189
|
+
}
|
|
190
|
+
hide() {
|
|
191
|
+
if (!this.disabled && this.tooltipComponentRef) {
|
|
192
|
+
this.tooltipComponentRef?.location.nativeElement.removeEventListener('mouseleave', this.onMouseLeaveOverlay);
|
|
193
|
+
this.overlayComponentRef.instance.close();
|
|
194
|
+
this.tooltipComponentRef.destroy();
|
|
195
|
+
this.tooltipComponentRef = undefined;
|
|
196
|
+
}
|
|
197
|
+
}
|
|
198
|
+
ngOnDestroy() {
|
|
199
|
+
this.tooltipComponentRef?.location.nativeElement.removeEventListener('mouseleave', this.onMouseLeaveOverlay);
|
|
200
|
+
}
|
|
201
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgilTooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
202
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.4", type: NgilTooltipDirective, isStandalone: true, selector: "[ngilTooltip]", inputs: { tooltipText: ["ngilTooltip", "tooltipText"], disabled: ["ngilTooltipDisabled", "disabled"] }, host: { listeners: { "mouseenter": "onMouseOver()", "mouseleave": "onMouseLeaveOrigin($event)" }, properties: { "style.position": "this.position" } }, ngImport: i0 }); }
|
|
203
|
+
}
|
|
204
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgilTooltipDirective, decorators: [{
|
|
205
|
+
type: Directive,
|
|
206
|
+
args: [{
|
|
207
|
+
selector: '[ngilTooltip]',
|
|
208
|
+
standalone: true
|
|
209
|
+
}]
|
|
210
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i0.Renderer2 }], propDecorators: { tooltipText: [{
|
|
211
|
+
type: Input,
|
|
212
|
+
args: ['ngilTooltip']
|
|
213
|
+
}], disabled: [{
|
|
214
|
+
type: Input,
|
|
215
|
+
args: ['ngilTooltipDisabled']
|
|
216
|
+
}], position: [{
|
|
217
|
+
type: HostBinding,
|
|
218
|
+
args: ['style.position']
|
|
219
|
+
}], onMouseOver: [{
|
|
220
|
+
type: HostListener,
|
|
221
|
+
args: ['mouseenter']
|
|
222
|
+
}], onMouseLeaveOrigin: [{
|
|
223
|
+
type: HostListener,
|
|
224
|
+
args: ['mouseleave', ['$event']]
|
|
225
|
+
}] } });
|
|
226
|
+
|
|
227
|
+
class NgilEllipsisTooltipComponent {
|
|
228
|
+
onResize() {
|
|
229
|
+
this.setHasEllipsis();
|
|
230
|
+
}
|
|
231
|
+
constructor(cdr) {
|
|
232
|
+
this.cdr = cdr;
|
|
233
|
+
this.hasEllipsis = false;
|
|
234
|
+
this.content = '';
|
|
235
|
+
this.debounceTimeOut = 0;
|
|
236
|
+
}
|
|
237
|
+
ngAfterViewInit() {
|
|
238
|
+
this.content = this.textContainer?.nativeElement.innerHTML || '';
|
|
239
|
+
this.updateView();
|
|
240
|
+
}
|
|
241
|
+
ngAfterContentChecked() {
|
|
242
|
+
const content = this.textContainer?.nativeElement.innerHTML || '';
|
|
243
|
+
if (content !== this.content) {
|
|
244
|
+
this.content = content;
|
|
245
|
+
this.updateView();
|
|
246
|
+
}
|
|
247
|
+
}
|
|
248
|
+
updateView() {
|
|
249
|
+
this.setHasEllipsis();
|
|
250
|
+
}
|
|
251
|
+
setHasEllipsis() {
|
|
252
|
+
clearTimeout(this.debounceTimeOut);
|
|
253
|
+
this.debounceTimeOut = setTimeout(() => {
|
|
254
|
+
const textContainer = this.textContainer?.nativeElement;
|
|
255
|
+
if (textContainer) {
|
|
256
|
+
const hasEllipsis = textContainer.scrollWidth > textContainer.clientWidth;
|
|
257
|
+
if (this.hasEllipsis !== hasEllipsis) {
|
|
258
|
+
this.hasEllipsis = hasEllipsis;
|
|
259
|
+
this.cdr.detectChanges();
|
|
260
|
+
}
|
|
261
|
+
}
|
|
262
|
+
}, 300);
|
|
263
|
+
}
|
|
264
|
+
ngOnDestroy() {
|
|
265
|
+
clearTimeout(this.debounceTimeOut);
|
|
266
|
+
}
|
|
267
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgilEllipsisTooltipComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
268
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.4", type: NgilEllipsisTooltipComponent, isStandalone: true, selector: "ngil-ellipsis-tooltip", host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "textContainer", first: true, predicate: ["textContainer"], descendants: true }], ngImport: i0, template: "<span [ngilTooltip]=\"content\" [ngilTooltipDisabled]=\"!hasEllipsis\">\r\n <span class=\"text-container\" #textContainer [ngClass]=\"{ 'has-ellipsis': hasEllipsis }\">\r\n <ng-content></ng-content>\r\n </span>\r\n</span>\r\n", styles: [".text-container{position:relative;display:inline-block;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.text-container .has-ellipsis:after{content:\"...\";position:absolute;right:0;top:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgilTooltipDirective, selector: "[ngilTooltip]", inputs: ["ngilTooltip", "ngilTooltipDisabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
269
|
+
}
|
|
270
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgilEllipsisTooltipComponent, decorators: [{
|
|
271
|
+
type: Component,
|
|
272
|
+
args: [{ selector: 'ngil-ellipsis-tooltip', imports: [CommonModule, NgilTooltipDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span [ngilTooltip]=\"content\" [ngilTooltipDisabled]=\"!hasEllipsis\">\r\n <span class=\"text-container\" #textContainer [ngClass]=\"{ 'has-ellipsis': hasEllipsis }\">\r\n <ng-content></ng-content>\r\n </span>\r\n</span>\r\n", styles: [".text-container{position:relative;display:inline-block;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.text-container .has-ellipsis:after{content:\"...\";position:absolute;right:0;top:0}\n"] }]
|
|
273
|
+
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { textContainer: [{
|
|
274
|
+
type: ViewChild,
|
|
275
|
+
args: ['textContainer']
|
|
276
|
+
}], onResize: [{
|
|
277
|
+
type: HostListener,
|
|
278
|
+
args: ['window:resize']
|
|
279
|
+
}] } });
|
|
280
|
+
|
|
281
|
+
class NgilOverlayToggleDirective {
|
|
282
|
+
set ngilOverlayToggle(overlay) {
|
|
283
|
+
this.overlay = overlay;
|
|
284
|
+
}
|
|
285
|
+
set isOverlayOrigin(isOrigin) {
|
|
286
|
+
this.isOrigin = isOrigin;
|
|
287
|
+
this.setOverlayOrigin();
|
|
288
|
+
}
|
|
289
|
+
constructor(elementRef) {
|
|
290
|
+
this.elementRef = elementRef;
|
|
291
|
+
this.isOrigin = true;
|
|
292
|
+
this.onClick = (event) => {
|
|
293
|
+
if (!this.overlay) {
|
|
294
|
+
throw new Error(`The overlay is not defined. The overlay component should be provided in the directive input
|
|
295
|
+
|
|
296
|
+
<my-element [ngilOverlayToggle]="overlay"></my-element>
|
|
297
|
+
<ngil-overlay #overlay>...</ngil-overlay>
|
|
298
|
+
`);
|
|
299
|
+
}
|
|
300
|
+
if (!this.overlay.isOpened) {
|
|
301
|
+
this.overlay.open();
|
|
302
|
+
}
|
|
303
|
+
event.stopPropagation();
|
|
304
|
+
};
|
|
305
|
+
}
|
|
306
|
+
ngOnInit() {
|
|
307
|
+
this.setOverlayOrigin();
|
|
308
|
+
}
|
|
309
|
+
setOverlayOrigin() {
|
|
310
|
+
if (this.isOrigin && this.overlay) {
|
|
311
|
+
this.overlay.origin = this.elementRef;
|
|
312
|
+
}
|
|
313
|
+
else if (this.overlay) {
|
|
314
|
+
this.overlay.origin = undefined;
|
|
315
|
+
}
|
|
316
|
+
}
|
|
317
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgilOverlayToggleDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
318
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.4", type: NgilOverlayToggleDirective, isStandalone: true, selector: "[ngilOverlayToggle]", inputs: { ngilOverlayToggle: "ngilOverlayToggle", isOverlayOrigin: "isOverlayOrigin" }, host: { listeners: { "click": "onClick($event)" } }, exportAs: ["ngilOverlayToggle"], ngImport: i0 }); }
|
|
319
|
+
}
|
|
320
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgilOverlayToggleDirective, decorators: [{
|
|
321
|
+
type: Directive,
|
|
322
|
+
args: [{
|
|
323
|
+
selector: '[ngilOverlayToggle]',
|
|
324
|
+
exportAs: 'ngilOverlayToggle',
|
|
325
|
+
standalone: true
|
|
326
|
+
}]
|
|
327
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { ngilOverlayToggle: [{
|
|
328
|
+
type: Input
|
|
329
|
+
}], isOverlayOrigin: [{
|
|
330
|
+
type: Input
|
|
331
|
+
}], onClick: [{
|
|
332
|
+
type: HostListener,
|
|
333
|
+
args: ['click', ['$event']]
|
|
334
|
+
}] } });
|
|
335
|
+
|
|
336
|
+
/**
|
|
337
|
+
* Generated bundle index. Do not edit.
|
|
338
|
+
*/
|
|
339
|
+
|
|
340
|
+
export { NgilEllipsisTooltipComponent, NgilOverlayComponent, NgilOverlayToggleDirective, NgilTooltipComponent, NgilTooltipDirective };
|
|
341
|
+
//# sourceMappingURL=ngil-components.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ngil-components.mjs","sources":["../../../../../../../libs/ngil/ui/common/components/src/lib/components/overlay/overlay.component.ts","../../../../../../../libs/ngil/ui/common/components/src/lib/components/overlay/overlay.component.html","../../../../../../../libs/ngil/ui/common/components/src/lib/components/tooltip/tooltip.component.ts","../../../../../../../libs/ngil/ui/common/components/src/lib/components/tooltip/tooltip.component.html","../../../../../../../libs/ngil/ui/common/components/src/lib/components/tooltip/tooltip.directive.ts","../../../../../../../libs/ngil/ui/common/components/src/lib/components/ellipsis-tooltip/ellipsis-tooltip.component.ts","../../../../../../../libs/ngil/ui/common/components/src/lib/components/ellipsis-tooltip/ellipsis-tooltip.component.html","../../../../../../../libs/ngil/ui/common/components/src/lib/components/overlay/overlay-toggle.directive.ts","../../../../../../../libs/ngil/ui/common/components/src/ngil-components.ts"],"sourcesContent":["import {\r\n ConnectedPosition,\r\n FlexibleConnectedPositionStrategy,\r\n GlobalPositionStrategy,\r\n Overlay,\r\n OverlayConfig,\r\n OverlayModule,\r\n OverlayRef\r\n} from '@angular/cdk/overlay';\r\nimport { DomPortal } from '@angular/cdk/portal';\r\nimport {\r\n ChangeDetectionStrategy,\r\n Component,\r\n ElementRef,\r\n Input,\r\n OnDestroy,\r\n ViewChild,\r\n ViewEncapsulation\r\n} from '@angular/core';\r\nimport { Subject, takeUntil } from 'rxjs';\r\n\r\n@Component({\r\n selector: 'ngil-overlay',\r\n templateUrl: './overlay.component.html',\r\n styleUrls: ['./overlay.component.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n encapsulation: ViewEncapsulation.None,\r\n imports: [OverlayModule]\r\n})\r\nexport class NgilOverlayComponent implements OnDestroy {\r\n @ViewChild('contentWrapper') el?: ElementRef;\r\n @Input() overwriteConfig: Partial<OverlayConfig> = {};\r\n @Input() positions: ConnectedPosition[] | undefined = undefined;\r\n\r\n private readonly destroy$ = new Subject<void>();\r\n private overlayRef?: OverlayRef;\r\n\r\n origin?: ElementRef<HTMLElement>;\r\n isOpened = false;\r\n\r\n constructor(private readonly overlay: Overlay) {}\r\n\r\n open(): void {\r\n const config = this.getOverlayConfig();\r\n this.overlayRef = this.overlay.create(config);\r\n\r\n const portal = new DomPortal(this.el);\r\n this.overlayRef.attach(portal);\r\n\r\n if (config.hasBackdrop) {\r\n this.overlayRef\r\n .backdropClick()\r\n .pipe(takeUntil(this.destroy$))\r\n .subscribe(() => {\r\n this.close();\r\n });\r\n }\r\n\r\n this.isOpened = true;\r\n }\r\n\r\n private getOverlayConfig(): OverlayConfig {\r\n return {\r\n positionStrategy: this.getStrategy(),\r\n hasBackdrop: true,\r\n backdropClass: this.origin ? 'cdk-overlay-transparent-backdrop' : 'cdk-overlay-dark-backdrop',\r\n panelClass: ['ngil-overlay-panel'],\r\n minWidth: this.origin?.nativeElement.offsetWidth,\r\n ...this.overwriteConfig\r\n };\r\n }\r\n\r\n private getStrategy(): GlobalPositionStrategy | FlexibleConnectedPositionStrategy {\r\n if (!this.origin) {\r\n return this.overlay.position().global().centerHorizontally().centerVertically();\r\n }\r\n\r\n const primaryX = 'start';\r\n const secondaryX = primaryX === 'start' ? 'end' : 'start';\r\n const primaryY = 'top';\r\n const secondaryY = 'bottom';\r\n\r\n return this.overlay\r\n .position()\r\n .flexibleConnectedTo(this.origin)\r\n .withPositions(\r\n this.positions || [\r\n {\r\n originX: primaryX,\r\n originY: secondaryY,\r\n overlayX: primaryX,\r\n overlayY: primaryY\r\n },\r\n {\r\n originX: primaryX,\r\n originY: primaryY,\r\n overlayX: primaryX,\r\n overlayY: secondaryY\r\n },\r\n {\r\n originX: secondaryX,\r\n originY: secondaryY,\r\n overlayX: secondaryX,\r\n overlayY: primaryY\r\n },\r\n {\r\n originX: secondaryX,\r\n originY: primaryY,\r\n overlayX: secondaryX,\r\n overlayY: secondaryY\r\n }\r\n ]\r\n );\r\n }\r\n\r\n close(): void {\r\n this.destroy$.next();\r\n this.overlayRef?.dispose();\r\n this.overlayRef = undefined;\r\n this.isOpened = false;\r\n }\r\n\r\n toggle(): void {\r\n if (this.isOpened) {\r\n this.close();\r\n } else {\r\n this.open();\r\n }\r\n }\r\n\r\n ngOnDestroy(): void {\r\n this.destroy$.next();\r\n this.destroy$.complete();\r\n }\r\n}\r\n","<div class=\"ngil-overlay-content\" #contentWrapper>\r\n <ng-content></ng-content>\r\n</div>\r\n","\r\nimport { Component, Input } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'ngil-tooltip',\r\n imports: [],\r\n templateUrl: './tooltip.component.html',\r\n styleUrl: './tooltip.component.scss'\r\n})\r\nexport class NgilTooltipComponent {\r\n @Input() text = '';\r\n}\r\n","<div class=\"tooltip\">{{ text }}</div>\r\n","import { OverlayConfig } from '@angular/cdk/overlay';\r\nimport {\r\n ComponentRef,\r\n Directive,\r\n ElementRef,\r\n HostBinding,\r\n HostListener,\r\n Input,\r\n OnDestroy,\r\n Renderer2,\r\n ViewContainerRef\r\n} from '@angular/core';\r\nimport { NgilOverlayComponent } from '../overlay/overlay.component';\r\nimport { NgilTooltipComponent } from './tooltip.component';\r\n\r\n@Directive({\r\n selector: '[ngilTooltip]',\r\n standalone: true\r\n})\r\nexport class NgilTooltipDirective implements OnDestroy {\r\n @Input('ngilTooltip') tooltipText = '';\r\n @Input('ngilTooltipDisabled') disabled = false;\r\n\r\n @HostBinding('style.position') position = 'relative';\r\n\r\n private tooltipComponentRef?: ComponentRef<NgilTooltipComponent>;\r\n private overlayComponentRef: ComponentRef<NgilOverlayComponent> =\r\n this.viewContainerRef.createComponent(NgilOverlayComponent);\r\n\r\n constructor(\r\n private elementRef: ElementRef<HTMLElement>,\r\n private viewContainerRef: ViewContainerRef,\r\n private renderer: Renderer2\r\n ) {\r\n this.renderOverlayComponentRef();\r\n }\r\n\r\n private renderOverlayComponentRef() {\r\n this.overlayComponentRef.instance.origin = this.elementRef;\r\n this.overlayComponentRef.instance.positions = [\r\n {\r\n originX: 'start',\r\n originY: 'bottom',\r\n overlayX: 'start',\r\n overlayY: 'top'\r\n },\r\n {\r\n originX: 'start',\r\n originY: 'top',\r\n overlayX: 'start',\r\n overlayY: 'bottom'\r\n }\r\n ];\r\n this.renderer.appendChild(\r\n this.viewContainerRef.element.nativeElement,\r\n this.overlayComponentRef.location.nativeElement\r\n );\r\n }\r\n\r\n @HostListener('mouseenter')\r\n onMouseOver() {\r\n if (!this.disabled && !this.tooltipComponentRef) {\r\n const overwriteConfig: Partial<OverlayConfig> = {\r\n hasBackdrop: false,\r\n maxWidth: this.elementRef.nativeElement.offsetWidth\r\n };\r\n\r\n this.tooltipComponentRef = this.createTooltipComponentRef();\r\n this.overlayComponentRef.instance.el = this.tooltipComponentRef.location;\r\n this.overlayComponentRef.setInput('overwriteConfig', overwriteConfig);\r\n\r\n this.overlayComponentRef.instance.open();\r\n }\r\n }\r\n\r\n @HostListener('mouseleave', ['$event'])\r\n onMouseLeaveOrigin(event: MouseEvent) {\r\n const newTarget = event.relatedTarget;\r\n if (!newTarget || !this.tooltipComponentRef?.location.nativeElement.contains(newTarget)) {\r\n this.hide();\r\n } else {\r\n this.tooltipComponentRef?.location.nativeElement.addEventListener('mouseleave', this.onMouseLeaveOverlay);\r\n }\r\n }\r\n\r\n private onMouseLeaveOverlay = (event: Event): void => {\r\n const newTarget = (event as MouseEvent).relatedTarget as Node | null;\r\n if (!newTarget || !this.elementRef.nativeElement.contains(newTarget)) {\r\n this.hide();\r\n }\r\n };\r\n\r\n private createTooltipComponentRef() {\r\n const tooltipComponentRef = this.viewContainerRef.createComponent(NgilTooltipComponent);\r\n this.renderer.appendChild(\r\n this.overlayComponentRef.location.nativeElement,\r\n tooltipComponentRef.location.nativeElement\r\n );\r\n tooltipComponentRef.setInput('text', this.tooltipText);\r\n return tooltipComponentRef;\r\n }\r\n\r\n private hide() {\r\n if (!this.disabled && this.tooltipComponentRef) {\r\n this.tooltipComponentRef?.location.nativeElement.removeEventListener('mouseleave', this.onMouseLeaveOverlay);\r\n this.overlayComponentRef.instance.close();\r\n this.tooltipComponentRef.destroy();\r\n this.tooltipComponentRef = undefined;\r\n }\r\n }\r\n\r\n ngOnDestroy(): void {\r\n this.tooltipComponentRef?.location.nativeElement.removeEventListener('mouseleave', this.onMouseLeaveOverlay);\r\n }\r\n}\r\n","import { CommonModule } from '@angular/common';\r\nimport {\r\n AfterContentChecked,\r\n AfterViewInit,\r\n ChangeDetectionStrategy,\r\n ChangeDetectorRef,\r\n Component,\r\n ElementRef,\r\n HostListener,\r\n OnDestroy,\r\n ViewChild,\r\n} from '@angular/core';\r\nimport { NgilTooltipDirective } from '../tooltip/tooltip.directive';\r\n\r\n@Component({\r\n selector: 'ngil-ellipsis-tooltip',\r\n imports: [CommonModule, NgilTooltipDirective],\r\n templateUrl: './ellipsis-tooltip.component.html',\r\n styleUrl: './ellipsis-tooltip.component.scss',\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class NgilEllipsisTooltipComponent implements AfterViewInit, AfterContentChecked, OnDestroy {\r\n @ViewChild('textContainer') textContainer?: ElementRef<HTMLDivElement>;\r\n\r\n hasEllipsis = false;\r\n content = '';\r\n private debounceTimeOut = 0;\r\n\r\n @HostListener('window:resize')\r\n onResize() {\r\n this.setHasEllipsis();\r\n }\r\n\r\n constructor(private readonly cdr: ChangeDetectorRef) {}\r\n\r\n ngAfterViewInit(): void {\r\n this.content = this.textContainer?.nativeElement.innerHTML || '';\r\n this.updateView();\r\n }\r\n\r\n ngAfterContentChecked(): void {\r\n const content = this.textContainer?.nativeElement.innerHTML || '';\r\n if (content !== this.content) {\r\n this.content = content;\r\n this.updateView();\r\n }\r\n }\r\n\r\n private updateView() {\r\n this.setHasEllipsis();\r\n }\r\n\r\n private setHasEllipsis() {\r\n clearTimeout(this.debounceTimeOut);\r\n\r\n this.debounceTimeOut = setTimeout(() => {\r\n const textContainer = this.textContainer?.nativeElement;\r\n if (textContainer) {\r\n const hasEllipsis = textContainer.scrollWidth > textContainer.clientWidth;\r\n\r\n if (this.hasEllipsis !== hasEllipsis) {\r\n this.hasEllipsis = hasEllipsis;\r\n this.cdr.detectChanges();\r\n }\r\n }\r\n }, 300);\r\n }\r\n\r\n ngOnDestroy(): void {\r\n clearTimeout(this.debounceTimeOut);\r\n }\r\n}\r\n","<span [ngilTooltip]=\"content\" [ngilTooltipDisabled]=\"!hasEllipsis\">\r\n <span class=\"text-container\" #textContainer [ngClass]=\"{ 'has-ellipsis': hasEllipsis }\">\r\n <ng-content></ng-content>\r\n </span>\r\n</span>\r\n","import { Directive, ElementRef, HostListener, Input, OnInit } from '@angular/core';\r\nimport { NgilOverlayComponent } from './overlay.component';\r\n\r\n@Directive({\r\n selector: '[ngilOverlayToggle]',\r\n exportAs: 'ngilOverlayToggle',\r\n standalone: true\r\n})\r\nexport class NgilOverlayToggleDirective implements OnInit {\r\n @Input() set ngilOverlayToggle(overlay: NgilOverlayComponent) {\r\n this.overlay = overlay;\r\n }\r\n private overlay: NgilOverlayComponent | undefined;\r\n\r\n @Input() set isOverlayOrigin(isOrigin: boolean) {\r\n this.isOrigin = isOrigin;\r\n this.setOverlayOrigin();\r\n }\r\n private isOrigin = true;\r\n\r\n constructor(private readonly elementRef: ElementRef<HTMLInputElement>) {}\r\n\r\n ngOnInit(): void {\r\n this.setOverlayOrigin();\r\n }\r\n\r\n private setOverlayOrigin(): void {\r\n if (this.isOrigin && this.overlay) {\r\n this.overlay.origin = this.elementRef;\r\n } else if (this.overlay) {\r\n this.overlay.origin = undefined;\r\n }\r\n }\r\n\r\n @HostListener('click', ['$event']) onClick = (event: Event): void => {\r\n if (!this.overlay) {\r\n throw new Error(`The overlay is not defined. The overlay component should be provided in the directive input\r\n\r\n <my-element [ngilOverlayToggle]=\"overlay\"></my-element>\r\n <ngil-overlay #overlay>...</ngil-overlay>\r\n `);\r\n }\r\n\r\n if (!this.overlay.isOpened) {\r\n this.overlay.open();\r\n }\r\n\r\n event.stopPropagation();\r\n };\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
package/package.json
ADDED
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@ngil/components",
|
|
3
|
+
"version": "5.2.0",
|
|
4
|
+
"dependencies": {
|
|
5
|
+
"tslib": "^2.3.0"
|
|
6
|
+
},
|
|
7
|
+
"repository": {
|
|
8
|
+
"type": "git",
|
|
9
|
+
"url": "git@github.com:allanartuso/ngdux.git",
|
|
10
|
+
"directory": "/libs/ngil/ui/common/components"
|
|
11
|
+
},
|
|
12
|
+
"homepage": "https://github.com/allanartuso/ngdux/tree/master/libs/ngil/ui/form#readme",
|
|
13
|
+
"peerDependencies": {
|
|
14
|
+
"@angular/core": "=>17.0.0",
|
|
15
|
+
"@angular/forms": "=>17.0.0",
|
|
16
|
+
"@angular/cdk": "=>17.0.0"
|
|
17
|
+
},
|
|
18
|
+
"module": "fesm2022/ngil-components.mjs",
|
|
19
|
+
"typings": "types/ngil-components.d.ts",
|
|
20
|
+
"exports": {
|
|
21
|
+
"./package.json": {
|
|
22
|
+
"default": "./package.json"
|
|
23
|
+
},
|
|
24
|
+
".": {
|
|
25
|
+
"types": "./types/ngil-components.d.ts",
|
|
26
|
+
"default": "./fesm2022/ngil-components.mjs"
|
|
27
|
+
}
|
|
28
|
+
},
|
|
29
|
+
"sideEffects": false
|
|
30
|
+
}
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { AfterViewInit, AfterContentChecked, OnDestroy, ElementRef, ChangeDetectorRef, OnInit, ViewContainerRef, Renderer2 } from '@angular/core';
|
|
3
|
+
import { OverlayConfig, ConnectedPosition, Overlay } from '@angular/cdk/overlay';
|
|
4
|
+
|
|
5
|
+
declare class NgilEllipsisTooltipComponent implements AfterViewInit, AfterContentChecked, OnDestroy {
|
|
6
|
+
private readonly cdr;
|
|
7
|
+
textContainer?: ElementRef<HTMLDivElement>;
|
|
8
|
+
hasEllipsis: boolean;
|
|
9
|
+
content: string;
|
|
10
|
+
private debounceTimeOut;
|
|
11
|
+
onResize(): void;
|
|
12
|
+
constructor(cdr: ChangeDetectorRef);
|
|
13
|
+
ngAfterViewInit(): void;
|
|
14
|
+
ngAfterContentChecked(): void;
|
|
15
|
+
private updateView;
|
|
16
|
+
private setHasEllipsis;
|
|
17
|
+
ngOnDestroy(): void;
|
|
18
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<NgilEllipsisTooltipComponent, never>;
|
|
19
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<NgilEllipsisTooltipComponent, "ngil-ellipsis-tooltip", never, {}, {}, never, ["*"], true, never>;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
declare class NgilOverlayComponent implements OnDestroy {
|
|
23
|
+
private readonly overlay;
|
|
24
|
+
el?: ElementRef;
|
|
25
|
+
overwriteConfig: Partial<OverlayConfig>;
|
|
26
|
+
positions: ConnectedPosition[] | undefined;
|
|
27
|
+
private readonly destroy$;
|
|
28
|
+
private overlayRef?;
|
|
29
|
+
origin?: ElementRef<HTMLElement>;
|
|
30
|
+
isOpened: boolean;
|
|
31
|
+
constructor(overlay: Overlay);
|
|
32
|
+
open(): void;
|
|
33
|
+
private getOverlayConfig;
|
|
34
|
+
private getStrategy;
|
|
35
|
+
close(): void;
|
|
36
|
+
toggle(): void;
|
|
37
|
+
ngOnDestroy(): void;
|
|
38
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<NgilOverlayComponent, never>;
|
|
39
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<NgilOverlayComponent, "ngil-overlay", never, { "overwriteConfig": { "alias": "overwriteConfig"; "required": false; }; "positions": { "alias": "positions"; "required": false; }; }, {}, never, ["*"], true, never>;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
declare class NgilOverlayToggleDirective implements OnInit {
|
|
43
|
+
private readonly elementRef;
|
|
44
|
+
set ngilOverlayToggle(overlay: NgilOverlayComponent);
|
|
45
|
+
private overlay;
|
|
46
|
+
set isOverlayOrigin(isOrigin: boolean);
|
|
47
|
+
private isOrigin;
|
|
48
|
+
constructor(elementRef: ElementRef<HTMLInputElement>);
|
|
49
|
+
ngOnInit(): void;
|
|
50
|
+
private setOverlayOrigin;
|
|
51
|
+
onClick: (event: Event) => void;
|
|
52
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<NgilOverlayToggleDirective, never>;
|
|
53
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<NgilOverlayToggleDirective, "[ngilOverlayToggle]", ["ngilOverlayToggle"], { "ngilOverlayToggle": { "alias": "ngilOverlayToggle"; "required": false; }; "isOverlayOrigin": { "alias": "isOverlayOrigin"; "required": false; }; }, {}, never, never, true, never>;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
declare class NgilTooltipComponent {
|
|
57
|
+
text: string;
|
|
58
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<NgilTooltipComponent, never>;
|
|
59
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<NgilTooltipComponent, "ngil-tooltip", never, { "text": { "alias": "text"; "required": false; }; }, {}, never, never, true, never>;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
declare class NgilTooltipDirective implements OnDestroy {
|
|
63
|
+
private elementRef;
|
|
64
|
+
private viewContainerRef;
|
|
65
|
+
private renderer;
|
|
66
|
+
tooltipText: string;
|
|
67
|
+
disabled: boolean;
|
|
68
|
+
position: string;
|
|
69
|
+
private tooltipComponentRef?;
|
|
70
|
+
private overlayComponentRef;
|
|
71
|
+
constructor(elementRef: ElementRef<HTMLElement>, viewContainerRef: ViewContainerRef, renderer: Renderer2);
|
|
72
|
+
private renderOverlayComponentRef;
|
|
73
|
+
onMouseOver(): void;
|
|
74
|
+
onMouseLeaveOrigin(event: MouseEvent): void;
|
|
75
|
+
private onMouseLeaveOverlay;
|
|
76
|
+
private createTooltipComponentRef;
|
|
77
|
+
private hide;
|
|
78
|
+
ngOnDestroy(): void;
|
|
79
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<NgilTooltipDirective, never>;
|
|
80
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<NgilTooltipDirective, "[ngilTooltip]", never, { "tooltipText": { "alias": "ngilTooltip"; "required": false; }; "disabled": { "alias": "ngilTooltipDisabled"; "required": false; }; }, {}, never, never, true, never>;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
export { NgilEllipsisTooltipComponent, NgilOverlayComponent, NgilOverlayToggleDirective, NgilTooltipComponent, NgilTooltipDirective };
|