chrv-components 1.12.71 → 1.12.73

package/fesm2022/chrv-components.mjs

@@ -9,7 +9,7 @@ import * as i1 from '@angular/common';
 import { CommonModule, AsyncPipe, DatePipe, formatDate, DATE_PIPE_DEFAULT_OPTIONS, isPlatformBrowser, NgClass, formatNumber } from '@angular/common';
 import * as i1$3 from '@angular/cdk/overlay';
 import { Overlay, CdkOverlayOrigin, CdkConnectedOverlay, CdkScrollable } from '@angular/cdk/overlay';
-import { ComponentPortal } from '@angular/cdk/portal';
+import { ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
 import { Subject, Observable, map, BehaviorSubject, skip, debounceTime as debounceTime$1, distinctUntilChanged, skipWhile, from, mergeMap, toArray, timer, takeUntil as takeUntil$1, of, catchError, forkJoin, take, tap, finalize as finalize$1, interval } from 'rxjs';
 import { debounceTime, takeUntil, finalize, concatMap, switchMap, tap as tap$1, catchError as catchError$1 } from 'rxjs/operators';
 import * as i1$1 from '@angular/forms';
@@ -1563,17 +1563,29 @@ class DataListComponent {
             const filtered = indexed.filter((suggestion) => suggestion.display.toLowerCase().includes(filter));
             return filtered;
         }, ...(ngDevMode ? [{ debugName: "filteredSuggestions" }] : []));
-        effect(() => {
-            const target = this.targetInput();
-            this.removeEventListeners();
-            if (target) {
-                this.setupEventListeners(target);
-            }
-        });
-        effect(() => {
-            if (this.targetInput())
-                this.positionDropdown();
-        });
+        // effect(() => {
+        //   const target = this.targetInput();
+        //   this.removeEventListeners();
+        //   if (target) {
+        //     this.setupEventListeners(target);
+        //   }
+        // });
+        // effect(() => {
+        //   if (this.targetInput()) this.positionDropdown();
+        // });
+    }
+    ngOnInit() {
+        const target = this.targetInput();
+        this.removeEventListeners();
+        if (target) {
+            this.setupEventListeners(target);
+        }
+        this.positionDropdown();
+    }
+    ngAfterViewInit() {
+        if (this.targetInput()) {
+            this.positionDropdown();
+        }
     }
     ngOnDestroy() {
         this.removeEventListeners();
@@ -6674,6 +6686,168 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                 }]
         }], propDecorators: { chrDebounceTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "chrDebounceTime", required: false }] }] } });
 
+class ChrHoverDirective {
+    constructor() {
+        this.el = inject((ElementRef));
+        this.overlay = inject(Overlay);
+        this.vcr = inject(ViewContainerRef);
+        this.renderer = inject(Renderer2);
+        this.eventListeners = [];
+        this.chrHoverContext = input({}, ...(ngDevMode ? [{ debugName: "chrHoverContext" }] : []));
+        this.chrHoverSnap = input(false, ...(ngDevMode ? [{ debugName: "chrHoverSnap" }] : []));
+        this.chrHoverPosition = input('right', ...(ngDevMode ? [{ debugName: "chrHoverPosition" }] : []));
+        this.mousePositionStrategy = (mousemove) => {
+            const positionOffset = { left: mousemove.clientX, top: mousemove.clientY };
+            const componentSize = this.overlayRef?.overlayElement.getBoundingClientRect();
+            switch (this.chrHoverPosition()) {
+                case 'above':
+                    positionOffset.top -= (componentSize?.height || 0) + 20;
+                    positionOffset.left -= (componentSize?.width || 0) / 2;
+                    break;
+                case 'below':
+                    positionOffset.top += 20;
+                    positionOffset.left -= (componentSize?.width || 0) / 2;
+                    break;
+                case 'left':
+                    positionOffset.left -= (componentSize?.width || 0) + 20;
+                    positionOffset.top -= (componentSize?.height || 0) / 2;
+                    break;
+                case 'right':
+                    positionOffset.left += 20;
+                    positionOffset.top -= (componentSize?.height || 0) / 2;
+                    break;
+            }
+            const positionStrategy = this.overlay
+                .position()
+                .global()
+                .left(`${positionOffset.left}px`)
+                .top(`${positionOffset.top}px`);
+            return positionStrategy;
+        };
+        this.snappedStrategy = () => {
+            const positionStrategy = this.overlay
+                .position()
+                .flexibleConnectedTo(this.el);
+            switch (this.chrHoverPosition()) {
+                case 'above':
+                    positionStrategy.withPositions([
+                        {
+                            originX: 'center',
+                            originY: 'top',
+                            overlayX: 'center',
+                            overlayY: 'bottom',
+                        },
+                        {
+                            originX: 'center',
+                            originY: 'bottom',
+                            overlayX: 'center',
+                            overlayY: 'top',
+                        },
+                    ]);
+                    break;
+                case 'below':
+                    positionStrategy.withPositions([
+                        {
+                            originX: 'center',
+                            originY: 'bottom',
+                            overlayX: 'center',
+                            overlayY: 'top',
+                        },
+                        {
+                            originX: 'center',
+                            originY: 'top',
+                            overlayX: 'center',
+                            overlayY: 'bottom',
+                        },
+                    ]);
+                    break;
+                case 'left':
+                    positionStrategy.withPositions([
+                        {
+                            originX: 'start',
+                            originY: 'center',
+                            overlayX: 'end',
+                            overlayY: 'center',
+                        },
+                        {
+                            originX: 'end',
+                            originY: 'center',
+                            overlayX: 'start',
+                            overlayY: 'center',
+                        },
+                    ]);
+                    break;
+                case 'right':
+                    positionStrategy.withPositions([
+                        {
+                            originX: 'end',
+                            originY: 'center',
+                            overlayX: 'start',
+                            overlayY: 'center',
+                        },
+                        {
+                            originX: 'start',
+                            originY: 'center',
+                            overlayX: 'end',
+                            overlayY: 'center',
+                        },
+                    ]);
+                    break;
+            }
+            return positionStrategy;
+        };
+        const positionStrategy = this.snappedStrategy();
+        this.overlayRef = this.overlay.create({
+            positionStrategy,
+            hasBackdrop: false,
+        });
+    }
+    ngOnInit() {
+        this.eventListeners.push(this.renderer.listen(this.el.nativeElement, 'mouseenter', (event) => {
+            this.open();
+        }));
+        this.eventListeners.push(this.renderer.listen(this.el.nativeElement, 'mouseleave', (event) => {
+            this.close();
+        }));
+        this.eventListeners.push(this.renderer.listen(this.el.nativeElement, 'mousemove', (event) => {
+            if (!this.chrHoverSnap()) {
+                const positionStrategy = this.mousePositionStrategy(event);
+                this.overlayRef.updatePositionStrategy(positionStrategy);
+            }
+        }));
+    }
+    ngOnDestroy() {
+        this.overlayRef.dispose();
+        this.removeEventListeners();
+    }
+    removeEventListeners() {
+        this.eventListeners.forEach((unlisten) => unlisten());
+        this.eventListeners = [];
+    }
+    open() {
+        if (!this.overlayRef.hasAttached()) {
+            if (!this.portal) {
+                this.portal = new TemplatePortal(this.template, this.vcr, this.chrHoverContext());
+            }
+            const ref = this.overlayRef.attach(this.portal);
+        }
+    }
+    close() {
+        this.overlayRef.detach();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ChrHoverDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.8", type: ChrHoverDirective, isStandalone: true, selector: "[chrHover]", inputs: { template: { classPropertyName: "template", publicName: "chrHover", isSignal: false, isRequired: false, transformFunction: null }, chrHoverContext: { classPropertyName: "chrHoverContext", publicName: "chrHoverContext", isSignal: true, isRequired: false, transformFunction: null }, chrHoverSnap: { classPropertyName: "chrHoverSnap", publicName: "chrHoverSnap", isSignal: true, isRequired: false, transformFunction: null }, chrHoverPosition: { classPropertyName: "chrHoverPosition", publicName: "chrHoverPosition", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ChrHoverDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[chrHover]',
+                }]
+        }], ctorParameters: () => [], propDecorators: { template: [{
+                type: Input,
+                args: ['chrHover']
+            }], chrHoverContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "chrHoverContext", required: false }] }], chrHoverSnap: [{ type: i0.Input, args: [{ isSignal: true, alias: "chrHoverSnap", required: false }] }], chrHoverPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "chrHoverPosition", required: false }] }] } });
+
 class CsvExporter {
     export(data, columns) {
         const csvRows = [];
@@ -7520,5 +7694,5 @@ const provideDebounceEventPlugin = () => [
  * Generated bundle index. Do not edit.
  */
 
-export { Aligments, AnonymousTable, AutoDataSource, AutoDataTable, AutofocusDirective, BaseErrorDisplays, BaseTable, BreadcrumbComponent, ButtonComponent, CHR_DEACTIVATION_MODAL, CHR_DEBOUNCE_DEFAULTS, CHR_MODAL_DATA, CHR_MODAL_REF, CacheService, CachingInterceptor, CarouselComponent, ChrBaseInputComponent, ChrButtonComponent, ChrCheckboxComponent, ChrColorInputComponent, ChrContextMenuComponent, ChrDataTable, ChrDateInputComponent, ChrDatetimeInputComponent, ChrDeactivationGuard, ChrDebounceDirective, ChrDefaultModalComponent, ChrDeleteModalComponent, ChrDropdownComponent, ChrFile, ChrFileInputComponent, ChrFormComponent, ChrHoverTitleComponent, ChrHoverTitleDirective, ChrModalComponent, ChrNiceFileInputComponent, ChrPaginatorComponent, ChrPreventReloadDirective, ChrSearchSelectComponent, ChrSearchbarComponent, ChrSeparatorComponent, ChrSpinnerComponent, ChrTableComponent, ChrTableHeaderCellComponent, ChrTagSelectComponent, ChrTextareaInputComponent, ChrToastComponent, ChrToggleInputComponent, Colors, ColorsVariables, ColumnFilter, ColumnGroup, ColumnMetadata, ContextMenuDirective, ControlClickDirective, CookiesService, CrossCellNavigationDirective, DEFAULTLIVEUPDATEMESSAGE, DEFAULT_TOAST_CONFIG, DGFilterMode, DGGroupAggregationEnum, DataExporterService, DataFormatterService, DataGrid, DataListComponent, DataService, DebounceDefaults, DebounceEventPlugin, DecimalValidatorDirective, DefaultLiveUpdateMessage, DropdownContent, DropdownTitle, ENABLE_CACHE, ENABLE_PROGRESS, EditableCell, FileService, HUBURL, INVALIDATE_CACHE, InlineSvgComponent, LegacyToastService, LiveUpdateService, LiveUpdateStatus, LoaderService, MaxDateValidatorDirective, MaxFileSizeValidator, MaxLengthValidatorDirective, MessageBanner, MinFileSizeValidator, MinLengthValidatorDirective, ModalRef, ModalService, OutsideClickAwareDirective, ProgressInterceptor, ProgressService, RequiredValidatorDirective, SHOW_SPINNER, ScrollIntoViewDirective, SpinnerInterceptor, SyncValidatorToAsync, TabComponent, TabGroupComponent, TabToEnterHandlerDirective, TabToInputHandlerDirective, TableConstraint, TableConstraintColumn, TableConstraintReference, ToastComponent, ToastDefaults, ToastRef, ToastService, TypeValidatorDirective, WaitAndStoreXsrfToken, XSRFCOOKIENAME, XSRFHEADERNAME, XsrfInterceptor, decimal, getAsyncValidators, getBackgroundColor, getBorderColor, getContrastBackgroundColor, getContrastBorderColor, getContrastTextColor, getSyncValidators, getTextColor, getValidators, getVariableColor, getVariableContrastColor, maxDate, maxFileSize, maxLength, minFileSize, minLength, provideDebounceEventPlugin, provideXsrfHttpClient, required, type };
+export { Aligments, AnonymousTable, AutoDataSource, AutoDataTable, AutofocusDirective, BaseErrorDisplays, BaseTable, BreadcrumbComponent, ButtonComponent, CHR_DEACTIVATION_MODAL, CHR_DEBOUNCE_DEFAULTS, CHR_MODAL_DATA, CHR_MODAL_REF, CacheService, CachingInterceptor, CarouselComponent, ChrBaseInputComponent, ChrButtonComponent, ChrCheckboxComponent, ChrColorInputComponent, ChrContextMenuComponent, ChrDataTable, ChrDateInputComponent, ChrDatetimeInputComponent, ChrDeactivationGuard, ChrDebounceDirective, ChrDefaultModalComponent, ChrDeleteModalComponent, ChrDropdownComponent, ChrFile, ChrFileInputComponent, ChrFormComponent, ChrHoverDirective, ChrHoverTitleComponent, ChrHoverTitleDirective, ChrModalComponent, ChrNiceFileInputComponent, ChrPaginatorComponent, ChrPreventReloadDirective, ChrSearchSelectComponent, ChrSearchbarComponent, ChrSeparatorComponent, ChrSpinnerComponent, ChrTableComponent, ChrTableHeaderCellComponent, ChrTagSelectComponent, ChrTextareaInputComponent, ChrToastComponent, ChrToggleInputComponent, Colors, ColorsVariables, ColumnFilter, ColumnGroup, ColumnMetadata, ContextMenuDirective, ControlClickDirective, CookiesService, CrossCellNavigationDirective, DEFAULTLIVEUPDATEMESSAGE, DEFAULT_TOAST_CONFIG, DGFilterMode, DGGroupAggregationEnum, DataExporterService, DataFormatterService, DataGrid, DataListComponent, DataService, DebounceDefaults, DebounceEventPlugin, DecimalValidatorDirective, DefaultLiveUpdateMessage, DropdownContent, DropdownTitle, ENABLE_CACHE, ENABLE_PROGRESS, EditableCell, FileService, HUBURL, INVALIDATE_CACHE, InlineSvgComponent, LegacyToastService, LiveUpdateService, LiveUpdateStatus, LoaderService, MaxDateValidatorDirective, MaxFileSizeValidator, MaxLengthValidatorDirective, MessageBanner, MinFileSizeValidator, MinLengthValidatorDirective, ModalRef, ModalService, OutsideClickAwareDirective, ProgressInterceptor, ProgressService, RequiredValidatorDirective, SHOW_SPINNER, ScrollIntoViewDirective, SpinnerInterceptor, SyncValidatorToAsync, TabComponent, TabGroupComponent, TabToEnterHandlerDirective, TabToInputHandlerDirective, TableConstraint, TableConstraintColumn, TableConstraintReference, ToastComponent, ToastDefaults, ToastRef, ToastService, TypeValidatorDirective, WaitAndStoreXsrfToken, XSRFCOOKIENAME, XSRFHEADERNAME, XsrfInterceptor, decimal, getAsyncValidators, getBackgroundColor, getBorderColor, getContrastBackgroundColor, getContrastBorderColor, getContrastTextColor, getSyncValidators, getTextColor, getValidators, getVariableColor, getVariableContrastColor, maxDate, maxFileSize, maxLength, minFileSize, minLength, provideDebounceEventPlugin, provideXsrfHttpClient, required, type };
 //# sourceMappingURL=chrv-components.mjs.map