@taiga-ui/core 3.17.0 → 3.18.0

package/bundles/taiga-ui-core-directives-dropdown.umd.js

@@ -452,17 +452,31 @@
                     args: ['tuiDropdown']
                 }], position: [] } });
 
+    /** Default values for hint options */
+    var TUI_DROPDOWN_HOVER_DEFAULT_OPTIONS = {
+        showDelay: 200,
+        hideDelay: 500,
+    };
+    var TUI_DROPDOWN_HOVER_OPTIONS = new i0.InjectionToken('[TUI_DROPDOWN_HOVER_OPTIONS] Default parameters for dropdown hover directive', {
+        factory: function () { return TUI_DROPDOWN_HOVER_DEFAULT_OPTIONS; },
+    });
+    var tuiDropdownHoverOptionsProvider = function (options) { return ({
+        provide: TUI_DROPDOWN_HOVER_DEFAULT_OPTIONS,
+        useValue: Object.assign(Object.assign({}, TUI_DROPDOWN_HOVER_DEFAULT_OPTIONS), options),
+    }); };
+
     var TuiDropdownHoverDirective = /** @class */ (function (_super) {
         __extends(TuiDropdownHoverDirective, _super);
-        function TuiDropdownHoverDirective(hovered$) {
+        function TuiDropdownHoverDirective(hovered$, options) {
             var _this = _super.call(this, function (subscriber) { return _this.stream$.subscribe(subscriber); }) || this;
             _this.hovered$ = hovered$;
+            _this.options = options;
             _this.toggle$ = new i5.Subject();
             _this.stream$ = i5.merge(_this.toggle$, _this.hovered$).pipe(operators.switchMap(function (visible) { return i5.of(visible).pipe(operators.delay(visible ? _this.showDelay : _this.hideDelay)); }), operators.tap(function (visible) {
                 _this.hovered = visible;
             }), operators.share());
-            _this.showDelay = 200;
-            _this.hideDelay = 500;
+            _this.showDelay = _this.options.showDelay;
+            _this.hideDelay = _this.options.hideDelay;
             _this.hovered = false;
             return _this;
         }
@@ -471,7 +485,7 @@
         };
         return TuiDropdownHoverDirective;
     }(i1$1.TuiDriver));
-    TuiDropdownHoverDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDropdownHoverDirective, deps: [{ token: i2.TuiHoveredService }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    TuiDropdownHoverDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDropdownHoverDirective, deps: [{ token: i2.TuiHoveredService }, { token: TUI_DROPDOWN_HOVER_OPTIONS }], target: i0__namespace.ɵɵFactoryTarget.Directive });
     TuiDropdownHoverDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TuiDropdownHoverDirective, selector: "[tuiDropdownHover]:not(ng-container)", inputs: { showDelay: ["tuiDropdownShowDelay", "showDelay"], hideDelay: ["tuiDropdownHideDelay", "hideDelay"] }, providers: [i1$1.tuiAsDriver(TuiDropdownHoverDirective), i2.TuiHoveredService], usesInheritance: true, ngImport: i0__namespace });
     __decorate([
         i2.tuiDefaultProp()
@@ -489,6 +503,9 @@
             return [{ type: i5__namespace.Observable, decorators: [{
                             type: i0.Inject,
                             args: [i2.TuiHoveredService]
+                        }] }, { type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [TUI_DROPDOWN_HOVER_OPTIONS]
                         }] }];
         }, propDecorators: { showDelay: [{
                     type: i0.Input,
@@ -861,27 +878,27 @@
                 }] } });
 
     var TuiDropdownPositionDirective = /** @class */ (function () {
-        function TuiDropdownPositionDirective(options, windowRef, accessor) {
+        function TuiDropdownPositionDirective(options, viewport, accessor) {
             this.options = options;
-            this.windowRef = windowRef;
+            this.viewport = viewport;
             this.accessor = accessor;
         }
         TuiDropdownPositionDirective.prototype.getPosition = function (_a) {
             var width = _a.width, height = _a.height;
             var hostRect = this.accessor.getClientRect();
-            var _b = this.windowRef, innerHeight = _b.innerHeight, innerWidth = _b.innerWidth;
-            var _c = this.options, minHeight = _c.minHeight, align = _c.align, direction = _c.direction, offset = _c.offset;
+            var viewport = this.viewport.getClientRect();
+            var _b = this.options, minHeight = _b.minHeight, align = _b.align, direction = _b.direction, offset = _b.offset;
             var previous = this.previous || direction || 'bottom';
             var right = Math.max(hostRect.right - width, offset);
             var available = {
-                top: hostRect.top - 2 * offset,
-                bottom: innerHeight - hostRect.bottom - 2 * offset,
+                top: hostRect.top - 2 * offset - viewport.top,
+                bottom: viewport.bottom - hostRect.bottom - 2 * offset,
             };
             var position = {
                 top: hostRect.top - offset - height,
                 bottom: hostRect.bottom + offset,
                 right: right,
-                left: hostRect.left + width < innerWidth - offset ? hostRect.left : right,
+                left: hostRect.left + width < viewport.right - offset ? hostRect.left : right,
             };
             var better = available.top > available.bottom ? 'top' : 'bottom';
             if ((available[previous] > minHeight && direction) ||
@@ -893,7 +910,7 @@
         };
         return TuiDropdownPositionDirective;
     }());
-    TuiDropdownPositionDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDropdownPositionDirective, deps: [{ token: TUI_DROPDOWN_OPTIONS }, { token: common.WINDOW }, { token: i1$1.TuiRectAccessor }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    TuiDropdownPositionDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDropdownPositionDirective, deps: [{ token: TUI_DROPDOWN_OPTIONS }, { token: tokens.TUI_VIEWPORT }, { token: i1$1.TuiRectAccessor }], target: i0__namespace.ɵɵFactoryTarget.Directive });
     TuiDropdownPositionDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TuiDropdownPositionDirective, selector: "[tuiDropdown]:not([tuiDropdownCustomPosition]):not([tuiDropdownSided])", providers: [i1$1.tuiAsPositionAccessor(TuiDropdownPositionDirective)], ngImport: i0__namespace });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDropdownPositionDirective, decorators: [{
                 type: i0.Directive,
@@ -905,9 +922,9 @@
             return [{ type: undefined, decorators: [{
                             type: i0.Inject,
                             args: [TUI_DROPDOWN_OPTIONS]
-                        }] }, { type: Window, decorators: [{
+                        }] }, { type: i1__namespace$2.TuiRectAccessor, decorators: [{
                             type: i0.Inject,
-                            args: [common.WINDOW]
+                            args: [tokens.TUI_VIEWPORT]
                         }] }, { type: i1__namespace$2.TuiRectAccessor, decorators: [{
                             type: i0.Inject,
                             args: [i1$1.TuiRectAccessor]
@@ -915,9 +932,9 @@
         } });
 
     var TuiDropdownPositionSidedDirective = /** @class */ (function () {
-        function TuiDropdownPositionSidedDirective(options, windowRef, accessor, vertical) {
+        function TuiDropdownPositionSidedDirective(options, viewport, accessor, vertical) {
             this.options = options;
-            this.windowRef = windowRef;
+            this.viewport = viewport;
             this.accessor = accessor;
             this.vertical = vertical;
             this.previous = this.options.direction || 'bottom';
@@ -930,13 +947,13 @@
             }
             var height = rect.height, width = rect.width;
             var hostRect = this.accessor.getClientRect();
-            var _a = this.windowRef, innerHeight = _a.innerHeight, innerWidth = _a.innerWidth;
-            var _b = this.options, align = _b.align, direction = _b.direction, minHeight = _b.minHeight, offset = _b.offset;
+            var viewport = this.viewport.getClientRect();
+            var _a = this.options, align = _a.align, direction = _a.direction, minHeight = _a.minHeight, offset = _a.offset;
             var available = {
-                top: hostRect.bottom,
-                left: hostRect.left - offset,
-                right: innerWidth - hostRect.right - offset,
-                bottom: innerHeight - hostRect.top,
+                top: hostRect.bottom - viewport.top,
+                left: hostRect.left - offset - viewport.left,
+                right: viewport.right - hostRect.right - offset,
+                bottom: viewport.bottom - hostRect.top,
             };
             var position = {
                 top: hostRect.bottom - height + this.tuiDropdownSidedOffset + 1,
@@ -956,7 +973,7 @@
         };
         return TuiDropdownPositionSidedDirective;
     }());
-    TuiDropdownPositionSidedDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDropdownPositionSidedDirective, deps: [{ token: TUI_DROPDOWN_OPTIONS }, { token: common.WINDOW }, { token: i1$1.TuiRectAccessor }, { token: TuiDropdownPositionDirective }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    TuiDropdownPositionSidedDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDropdownPositionSidedDirective, deps: [{ token: TUI_DROPDOWN_OPTIONS }, { token: tokens.TUI_VIEWPORT }, { token: i1$1.TuiRectAccessor }, { token: TuiDropdownPositionDirective }], target: i0__namespace.ɵɵFactoryTarget.Directive });
     TuiDropdownPositionSidedDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TuiDropdownPositionSidedDirective, selector: "[tuiDropdownSided]", inputs: { tuiDropdownSided: "tuiDropdownSided", tuiDropdownSidedOffset: "tuiDropdownSidedOffset" }, providers: [
             TuiDropdownPositionDirective,
             i1$1.tuiAsPositionAccessor(TuiDropdownPositionSidedDirective),
@@ -974,9 +991,9 @@
             return [{ type: undefined, decorators: [{
                             type: i0.Inject,
                             args: [TUI_DROPDOWN_OPTIONS]
-                        }] }, { type: Window, decorators: [{
+                        }] }, { type: i1__namespace$2.TuiRectAccessor, decorators: [{
                             type: i0.Inject,
-                            args: [common.WINDOW]
+                            args: [tokens.TUI_VIEWPORT]
                         }] }, { type: i1__namespace$2.TuiRectAccessor, decorators: [{
                             type: i0.Inject,
                             args: [i1$1.TuiRectAccessor]
@@ -1240,6 +1257,8 @@
 
     exports.TUI_DROPDOWN_COMPONENT = TUI_DROPDOWN_COMPONENT;
     exports.TUI_DROPDOWN_DEFAULT_OPTIONS = TUI_DROPDOWN_DEFAULT_OPTIONS;
+    exports.TUI_DROPDOWN_HOVER_DEFAULT_OPTIONS = TUI_DROPDOWN_HOVER_DEFAULT_OPTIONS;
+    exports.TUI_DROPDOWN_HOVER_OPTIONS = TUI_DROPDOWN_HOVER_OPTIONS;
     exports.TUI_DROPDOWN_OPTIONS = TUI_DROPDOWN_OPTIONS;
     exports.TuiDropdownComponent = TuiDropdownComponent;
     exports.TuiDropdownContextDirective = TuiDropdownContextDirective;
@@ -1253,6 +1272,7 @@
     exports.TuiDropdownPositionDirective = TuiDropdownPositionDirective;
     exports.TuiDropdownPositionSidedDirective = TuiDropdownPositionSidedDirective;
     exports.TuiDropdownSelectionDirective = TuiDropdownSelectionDirective;
+    exports.tuiDropdownHoverOptionsProvider = tuiDropdownHoverOptionsProvider;
     exports.tuiDropdownOptionsProvider = tuiDropdownOptionsProvider;
 
     Object.defineProperty(exports, '__esModule', { value: true });