@recursyve/nice-ui-kit.v2 14.0.0-beta.107 → 14.0.0-beta.108

package/fesm2020/recursyve-nice-ui-kit.v2.mjs

@@ -7056,6 +7056,123 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImpor
                 }]
         }] });
 
+// tslint:disable-next-line:class-name directive-class-suffix
+class _HintComponentBase {
+    constructor(_changeDetectorRef) {
+        this._changeDetectorRef = _changeDetectorRef;
+        /** Whether interactions on the page should close the tooltip */
+        this._closeOnInteraction = false;
+        /** Whether the tooltip is currently visible. */
+        this._isVisible = false;
+        /** Subject for notifying that the tooltip has been hidden from the view */
+        this._onHide = new Subject();
+    }
+    /**
+     * Shows the tooltip with an animation originating from the provided origin
+     * @param delay Amount of milliseconds to the delay showing the tooltip.
+     */
+    show(delay) {
+        // Cancel the delayed hide if it is scheduled
+        clearTimeout(this._hideTimeoutId);
+        this._showTimeoutId = setTimeout(() => {
+            this._toggleVisibility(true);
+            this._showTimeoutId = undefined;
+        }, delay);
+    }
+    /**
+     * Begins the animation to hide the tooltip after the provided delay in ms.
+     * @param delay Amount of milliseconds to delay showing the tooltip.
+     */
+    hide(delay) {
+        // Cancel the delayed show if it is scheduled
+        clearTimeout(this._showTimeoutId);
+        this._hideTimeoutId = setTimeout(() => {
+            this._toggleVisibility(false);
+            this._hideTimeoutId = undefined;
+        }, delay);
+    }
+    /** Returns an observable that notifies when the tooltip has been hidden from view. */
+    afterHidden() {
+        return this._onHide;
+    }
+    /** Whether the tooltip is being displayed. */
+    isVisible() {
+        return this._isVisible;
+    }
+    ngOnDestroy() {
+        this._cancelPendingAnimations();
+        this._onHide.complete();
+        this._triggerElement = null;
+    }
+    /**
+     * Interactions on the HTML body should close the tooltip immediately as defined in the
+     * material design spec.
+     * https://material.io/design/components/tooltips.html#behavior
+     */
+    _handleBodyInteraction() {
+        if (this._closeOnInteraction) {
+            this.hide(0);
+        }
+    }
+    /**
+     * Marks that the tooltip needs to be checked in the next change detection run.
+     * Mainly used for rendering the initial text before positioning a tooltip, which
+     * can be problematic in components with OnPush change detection.
+     */
+    _markForCheck() {
+        this._changeDetectorRef.markForCheck();
+    }
+    _handleMouseLeave({ relatedTarget }) {
+        if (!relatedTarget || !this._triggerElement.contains(relatedTarget)) {
+            if (this.isVisible()) {
+                this.hide(this._mouseLeaveHideDelay);
+            }
+            else {
+                this._finalizeAnimation(false);
+            }
+        }
+    }
+    /**
+     * Callback for when the timeout in this.show() gets completed.
+     * This method is only needed by the mdc-tooltip, and so it is only implemented
+     * in the mdc-tooltip, not here.
+     */
+    _onShow() { }
+    /** Cancels any pending animation sequences. */
+    _cancelPendingAnimations() {
+        clearTimeout(this._showTimeoutId);
+        clearTimeout(this._hideTimeoutId);
+        this._showTimeoutId = this._hideTimeoutId = undefined;
+    }
+    /** Handles the cleanup after an animation has finished. */
+    _finalizeAnimation(toVisible) {
+        if (toVisible) {
+            this._closeOnInteraction = true;
+        }
+        else if (!this.isVisible()) {
+            this._onHide.next();
+        }
+    }
+    /** Toggles the visibility of the tooltip element. */
+    _toggleVisibility(isVisible) {
+        // We set the classes directly here ourselves so that toggling the tooltip state
+        // isn't bound by change detection. This allows us to hide it even if the
+        // view ref has been detached from the CD tree.
+        this._isVisible = isVisible;
+        if (isVisible) {
+            this._onShow();
+        }
+    }
+}
+_HintComponentBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: _HintComponentBase, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+_HintComponentBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.3", type: _HintComponentBase, host: { listeners: { "mouseleave": "_handleMouseLeave($event)" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: _HintComponentBase, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { _handleMouseLeave: [{
+                type: HostListener,
+                args: ["mouseleave", ["$event"]]
+            }] } });
+
 class NiceNavigationService {
     /**
      * Constructor
@@ -7900,12 +8017,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImpor
         }] });
 
 class NiceShowHintDirective {
-    constructor(_overlay, _elementRef, _viewContainerRef, _ngZone, _platform, _hintService) {
+    constructor(_overlay, _elementRef, _viewContainerRef, _ngZone, _platform, _focusMonitor, _hintService) {
         this._overlay = _overlay;
         this._elementRef = _elementRef;
         this._viewContainerRef = _viewContainerRef;
         this._ngZone = _ngZone;
         this._platform = _platform;
+        this._focusMonitor = _focusMonitor;
         this._hintService = _hintService;
         this.shouldShow = false;
         this._pointerExitEventsInitialized = false;
@@ -7914,9 +8032,18 @@ class NiceShowHintDirective {
     }
     ngAfterViewInit() {
         this._setupPointerEnterEventsIfNeeded();
-        if (this.item.hint) {
-            this._portal = new ComponentPortal(this.item.hint.component, this._viewContainerRef);
-        }
+        this._focusMonitor
+            .monitor(this._elementRef)
+            .pipe(takeUntil(this.unsubscribeAll$))
+            .subscribe(origin => {
+            // Note that the focus monitor runs outside the Angular zone.
+            if (!origin) {
+                this._ngZone.run(() => this.hide());
+            }
+            else if (origin === "keyboard") {
+                this._ngZone.run(() => this.show());
+            }
+        });
     }
     ngOnDestroy() {
         this.unsubscribeAll$.next();
@@ -7927,15 +8054,26 @@ class NiceShowHintDirective {
             return;
         }
         const overlayRef = this._createOverlay();
+        this._portal = this._portal || new ComponentPortal(this.item.hint.component);
         this._detach();
         this._hintInstance = overlayRef.attach(this._portal).instance;
+        this._hintInstance._triggerElement = this._elementRef.nativeElement;
+        this._hintInstance
+            .afterHidden()
+            .pipe(takeUntil(this.unsubscribeAll$))
+            .subscribe(() => this._detach());
         this._hintService.setActiveHint(true);
     }
     hide() {
         const instance = this._hintInstance;
         if (instance) {
-            this._detach();
-            this._hintService.setActiveHint(false);
+            if (instance.isVisible()) {
+                instance.hide(0);
+            }
+            else {
+                instance._cancelPendingAnimations();
+                this._detach();
+            }
         }
     }
     _createOverlay() {
@@ -7978,10 +8116,10 @@ class NiceShowHintDirective {
             .detachments()
             .pipe(takeUntil(this.unsubscribeAll$))
             .subscribe(() => this._detach());
-        /*this._overlayRef
+        this._overlayRef
             .outsidePointerEvents()
             .pipe(takeUntil(this.unsubscribeAll$))
-            .subscribe(() => this._hintInstance?._handleBodyInteraction());*/
+            .subscribe(() => this._hintInstance?._handleBodyInteraction());
         return this._overlayRef;
     }
     _detach() {
@@ -8040,12 +8178,12 @@ class NiceShowHintDirective {
         });
     }
 }
-NiceShowHintDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceShowHintDirective, deps: [{ token: i1$5.Overlay }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i0.NgZone }, { token: i1$d.Platform }, { token: NiceNavigationHintService }], target: i0.ɵɵFactoryTarget.Directive });
+NiceShowHintDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceShowHintDirective, deps: [{ token: i1$5.Overlay }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i0.NgZone }, { token: i1$d.Platform }, { token: i2$2.FocusMonitor }, { token: NiceNavigationHintService }], target: i0.ɵɵFactoryTarget.Directive });
 NiceShowHintDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.3", type: NiceShowHintDirective, selector: "[niceShowHint]", inputs: { shouldShow: "shouldShow", item: "item" }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceShowHintDirective, decorators: [{
             type: Directive,
             args: [{ selector: "[niceShowHint]" }]
-        }], ctorParameters: function () { return [{ type: i1$5.Overlay }, { type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i0.NgZone }, { type: i1$d.Platform }, { type: NiceNavigationHintService }]; }, propDecorators: { shouldShow: [{
+        }], ctorParameters: function () { return [{ type: i1$5.Overlay }, { type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i0.NgZone }, { type: i1$d.Platform }, { type: i2$2.FocusMonitor }, { type: NiceNavigationHintService }]; }, propDecorators: { shouldShow: [{
                 type: Input
             }], item: [{
                 type: Input
@@ -10578,5 +10716,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ArrayUtils, BooleanPipe, CapitalizeFirstLetterPipe, CarouselComponent, CaseUtils, CeilPipe, ChipListItemLabelDirective, ColorsUtils, DateUtils, DefaultExportBottomSheetService, EntriesPipe, ExportBottomSheetComponent, ExportBottomSheetService, FileUtils, FindByKeyPipe, FirstLetterPipe, FloorPipe, FontAwesomeUtils, FormDataUtils, HttpStatusCodes, ImgCropperConfig, ImgCropperError, ImgResolution, JoinPipe, KeyboardCodes, LinkPipe, LocalizedBooleanPipe, LocalizedCurrencyPipe, LocalizedDateOnlyPipe, LocalizedDatePipe, MinutesToTimePipe, ModalMode, NavigationHideItemResolver, NavigationHintResolver, NiceAlertComponent, NiceAlertModule, NiceAlertService, NiceApiException, NiceAssetsCarouselActiveContentDirective, NiceAssetsCarouselComponent, NiceAssetsCarouselModule, NiceAsyncTypeaheadComponent, NiceAsyncTypeaheadModule, NiceAsyncTypeaheadProvider, NiceAutofocusDirective, NiceAutofocusDirectiveModule, NiceAutogrowDirective, NiceAutogrowModule, NiceBaseForm, NiceBaseFormComponent, NiceBaseFormModule, NiceCardComponent, NiceCardModule, NiceCarouselModule, NiceChipAsyncTypeaheadDirective, NiceChipListDirective, NiceChipListDirectiveModule, NiceChipListItemsComponent, NiceClickStopPropagationDirective, NiceCollapsableComponent, NiceCollapsableModule, NiceConfigModule, NiceConfigService, NiceControlStatusDirective, NiceCropperAreaComponent, NiceDateRangePickerComponent, NiceDateRangePickerModule, NiceDrawerComponent, NiceDrawerModule, NiceDrawerService, NiceDropzoneDirective, NiceDropzoneModule, NiceExportBottomSheetModule, NiceFormErrorComponent, NiceFormErrorModule, NiceFormSubmitDirective, NiceHorizontalNavigationBasicItemComponent, NiceHorizontalNavigationBranchItemComponent, NiceHorizontalNavigationComponent, NiceHorizontalNavigationDividerItemComponent, NiceHorizontalNavigationSpacerItemComponent, NiceHorizontalStepperComponent, NiceHorizontalStepperModule, NiceHttpExceptionFactory, NiceImageCropperComponent, NiceImageCropperModule, NiceImageErrorPlaceholderDirective, NiceImageErrorPlaceholderDirectiveModule, NiceLayoutComponent, NiceLayoutModule, NiceLoadingDirective, NiceLoadingSpinnerComponent, NiceLoadingSpinnerModule, NiceLottieComponent, NiceLottieModule, NiceMaterialModule, NiceMaterialStyleDirective, NiceMediaWatcherModule, NiceMediaWatcherService, NiceModalOnClickDirective, NiceModalOpenerDirective, NiceModule, NiceNavigationComponent, NiceNavigationModule, NiceNavigationService, NicePipesModule, NicePreventCloseWindowDirective, NiceRoundedStyleDirective, NiceScrollResetDirective, NiceScrollResetModule, NiceScrollbarDirective, NiceScrollbarModule, NiceSearchBarComponent, NiceSearchBarModule, NiceSplashScreenModule, NiceSplashScreenService, NiceStepComponent, NiceStopPropagationModule, NiceSweetAlertComponent, NiceSweetAlertDirective, NiceSweetAlertModule, NiceSweetAlertService, NiceToastComponent, NiceToastModule, NiceToastService, NiceToggleButtonGroupModule, NiceTransformResponseInterceptor, NiceTypeaheadComponent, NiceTypeaheadModule, NiceTypeaheadNewValue, NiceUtilsModule, NiceUtilsService, NiceVerticalNavigationAsideItemComponent, NiceVerticalNavigationBasicItemComponent, NiceVerticalNavigationCollapsableItemComponent, NiceVerticalNavigationComponent, NiceVerticalNavigationDividerItemComponent, NiceVerticalNavigationGroupItemComponent, NiceVerticalNavigationSpacerItemComponent, NiceWindowDirectiveModule, NumberToOrdinalIndicatorPipe, NumberUtils, ObjectUtils, OptionsScrollDirective, PadPipe, PhonePipe, PictureModalComponent, PictureModalService, PostalCodePipe, PromiseUtils, QueryParamsUtils, RangePipe, RegexUtils, RoundPipe, SanitizeBypassPipe, SecondsToTimePipe, TRANSFORM_TYPE, ToggleButtonComponent, ToggleButtonGroupComponent, TrackByPropPipe, TypeUtils, UrlUtils, _normalizeDegrees, isNotNullOrUndefined, isNullOrUndefined, mergeDeep, mixinNiceApi, niceAnimations, round };
+export { ArrayUtils, BooleanPipe, CapitalizeFirstLetterPipe, CarouselComponent, CaseUtils, CeilPipe, ChipListItemLabelDirective, ColorsUtils, DateUtils, DefaultExportBottomSheetService, EntriesPipe, ExportBottomSheetComponent, ExportBottomSheetService, FileUtils, FindByKeyPipe, FirstLetterPipe, FloorPipe, FontAwesomeUtils, FormDataUtils, HttpStatusCodes, ImgCropperConfig, ImgCropperError, ImgResolution, JoinPipe, KeyboardCodes, LinkPipe, LocalizedBooleanPipe, LocalizedCurrencyPipe, LocalizedDateOnlyPipe, LocalizedDatePipe, MinutesToTimePipe, ModalMode, NavigationHideItemResolver, NavigationHintResolver, NiceAlertComponent, NiceAlertModule, NiceAlertService, NiceApiException, NiceAssetsCarouselActiveContentDirective, NiceAssetsCarouselComponent, NiceAssetsCarouselModule, NiceAsyncTypeaheadComponent, NiceAsyncTypeaheadModule, NiceAsyncTypeaheadProvider, NiceAutofocusDirective, NiceAutofocusDirectiveModule, NiceAutogrowDirective, NiceAutogrowModule, NiceBaseForm, NiceBaseFormComponent, NiceBaseFormModule, NiceCardComponent, NiceCardModule, NiceCarouselModule, NiceChipAsyncTypeaheadDirective, NiceChipListDirective, NiceChipListDirectiveModule, NiceChipListItemsComponent, NiceClickStopPropagationDirective, NiceCollapsableComponent, NiceCollapsableModule, NiceConfigModule, NiceConfigService, NiceControlStatusDirective, NiceCropperAreaComponent, NiceDateRangePickerComponent, NiceDateRangePickerModule, NiceDrawerComponent, NiceDrawerModule, NiceDrawerService, NiceDropzoneDirective, NiceDropzoneModule, NiceExportBottomSheetModule, NiceFormErrorComponent, NiceFormErrorModule, NiceFormSubmitDirective, NiceHorizontalNavigationBasicItemComponent, NiceHorizontalNavigationBranchItemComponent, NiceHorizontalNavigationComponent, NiceHorizontalNavigationDividerItemComponent, NiceHorizontalNavigationSpacerItemComponent, NiceHorizontalStepperComponent, NiceHorizontalStepperModule, NiceHttpExceptionFactory, NiceImageCropperComponent, NiceImageCropperModule, NiceImageErrorPlaceholderDirective, NiceImageErrorPlaceholderDirectiveModule, NiceLayoutComponent, NiceLayoutModule, NiceLoadingDirective, NiceLoadingSpinnerComponent, NiceLoadingSpinnerModule, NiceLottieComponent, NiceLottieModule, NiceMaterialModule, NiceMaterialStyleDirective, NiceMediaWatcherModule, NiceMediaWatcherService, NiceModalOnClickDirective, NiceModalOpenerDirective, NiceModule, NiceNavigationComponent, NiceNavigationModule, NiceNavigationService, NicePipesModule, NicePreventCloseWindowDirective, NiceRoundedStyleDirective, NiceScrollResetDirective, NiceScrollResetModule, NiceScrollbarDirective, NiceScrollbarModule, NiceSearchBarComponent, NiceSearchBarModule, NiceSplashScreenModule, NiceSplashScreenService, NiceStepComponent, NiceStopPropagationModule, NiceSweetAlertComponent, NiceSweetAlertDirective, NiceSweetAlertModule, NiceSweetAlertService, NiceToastComponent, NiceToastModule, NiceToastService, NiceToggleButtonGroupModule, NiceTransformResponseInterceptor, NiceTypeaheadComponent, NiceTypeaheadModule, NiceTypeaheadNewValue, NiceUtilsModule, NiceUtilsService, NiceVerticalNavigationAsideItemComponent, NiceVerticalNavigationBasicItemComponent, NiceVerticalNavigationCollapsableItemComponent, NiceVerticalNavigationComponent, NiceVerticalNavigationDividerItemComponent, NiceVerticalNavigationGroupItemComponent, NiceVerticalNavigationSpacerItemComponent, NiceWindowDirectiveModule, NumberToOrdinalIndicatorPipe, NumberUtils, ObjectUtils, OptionsScrollDirective, PadPipe, PhonePipe, PictureModalComponent, PictureModalService, PostalCodePipe, PromiseUtils, QueryParamsUtils, RangePipe, RegexUtils, RoundPipe, SanitizeBypassPipe, SecondsToTimePipe, TRANSFORM_TYPE, ToggleButtonComponent, ToggleButtonGroupComponent, TrackByPropPipe, TypeUtils, UrlUtils, _HintComponentBase, _normalizeDegrees, isNotNullOrUndefined, isNullOrUndefined, mergeDeep, mixinNiceApi, niceAnimations, round };
 //# sourceMappingURL=recursyve-nice-ui-kit.v2.mjs.map