@taiga-ui/cdk 2.45.0 → 2.48.0

package/bundles/taiga-ui-cdk-directives-auto-focus.umd.js

@@ -1,10 +1,10 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@ng-web-apis/common'), require('@taiga-ui/cdk/constants'), require('@taiga-ui/cdk/tokens'), require('@taiga-ui/cdk/utils/focus'), require('rxjs'), require('rxjs/operators')) :
-    typeof define === 'function' && define.amd ? define('@taiga-ui/cdk/directives/auto-focus', ['exports', '@angular/core', '@ng-web-apis/common', '@taiga-ui/cdk/constants', '@taiga-ui/cdk/tokens', '@taiga-ui/cdk/utils/focus', 'rxjs', 'rxjs/operators'], factory) :
-    (global = global || self, factory((global['taiga-ui'] = global['taiga-ui'] || {}, global['taiga-ui'].cdk = global['taiga-ui'].cdk || {}, global['taiga-ui'].cdk.directives = global['taiga-ui'].cdk.directives || {}, global['taiga-ui'].cdk.directives['auto-focus'] = {}), global.ng.core, global.common, global['taiga-ui'].cdk.constants, global['taiga-ui'].cdk.tokens, global['taiga-ui'].cdk.utils.focus, global.rxjs, global.rxjs.operators));
-}(this, (function (exports, core, common, constants, tokens, focus, rxjs, operators) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@ng-web-apis/common'), require('@taiga-ui/cdk/tokens'), require('@taiga-ui/cdk/constants'), require('rxjs'), require('rxjs/operators'), require('@taiga-ui/cdk/utils')) :
+    typeof define === 'function' && define.amd ? define('@taiga-ui/cdk/directives/auto-focus', ['exports', '@angular/core', '@ng-web-apis/common', '@taiga-ui/cdk/tokens', '@taiga-ui/cdk/constants', 'rxjs', 'rxjs/operators', '@taiga-ui/cdk/utils'], factory) :
+    (global = global || self, factory((global['taiga-ui'] = global['taiga-ui'] || {}, global['taiga-ui'].cdk = global['taiga-ui'].cdk || {}, global['taiga-ui'].cdk.directives = global['taiga-ui'].cdk.directives || {}, global['taiga-ui'].cdk.directives['auto-focus'] = {}), global.ng.core, global.common, global['taiga-ui'].cdk.tokens, global['taiga-ui'].cdk.constants, global.rxjs, global.rxjs.operators, global['taiga-ui'].cdk.utils));
+}(this, (function (exports, core, common, tokens, constants, rxjs, operators, utils) { 'use strict';
 
-    /*! *****************************************************************************
+    /******************************************************************************
     Copyright (c) Microsoft Corporation.
 
     Permission to use, copy, modify, and/or distribute this software for any
@@ -23,11 +23,13 @@
     var extendStatics = function(d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
         return extendStatics(d, b);
     };
 
     function __extends(d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
         extendStatics(d, b);
         function __() { this.constructor = d; }
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
@@ -109,13 +111,20 @@
         }
     }
 
-    function __createBinding(o, m, k, k2) {
+    var __createBinding = Object.create ? (function(o, m, k, k2) {
+        if (k2 === undefined) k2 = k;
+        var desc = Object.getOwnPropertyDescriptor(m, k);
+        if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+            desc = { enumerable: true, get: function() { return m[k]; } };
+        }
+        Object.defineProperty(o, k2, desc);
+    }) : (function(o, m, k, k2) {
         if (k2 === undefined) k2 = k;
         o[k2] = m[k];
-    }
+    });
 
-    function __exportStar(m, exports) {
-        for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) exports[p] = m[p];
+    function __exportStar(m, o) {
+        for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(o, p)) __createBinding(o, m, p);
     }
 
     function __values(o) {
@@ -147,19 +156,31 @@
         return ar;
     }
 
+    /** @deprecated */
     function __spread() {
         for (var ar = [], i = 0; i < arguments.length; i++)
             ar = ar.concat(__read(arguments[i]));
         return ar;
     }
 
+    /** @deprecated */
     function __spreadArrays() {
         for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
         for (var r = Array(s), k = 0, i = 0; i < il; i++)
             for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
                 r[k] = a[j];
         return r;
-    };
+    }
+
+    function __spreadArray(to, from, pack) {
+        if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+            if (ar || !(i in from)) {
+                if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+                ar[i] = from[i];
+            }
+        }
+        return to.concat(ar || Array.prototype.slice.call(from));
+    }
 
     function __await(v) {
         return this instanceof __await ? (this.v = v, this) : new __await(v);
@@ -196,11 +217,17 @@
         return cooked;
     };
 
+    var __setModuleDefault = Object.create ? (function(o, v) {
+        Object.defineProperty(o, "default", { enumerable: true, value: v });
+    }) : function(o, v) {
+        o["default"] = v;
+    };
+
     function __importStar(mod) {
         if (mod && mod.__esModule) return mod;
         var result = {};
-        if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
-        result.default = mod;
+        if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+        __setModuleDefault(result, mod);
         return result;
     }
 
@@ -208,52 +235,30 @@
         return (mod && mod.__esModule) ? mod : { default: mod };
     }
 
-    function __classPrivateFieldGet(receiver, privateMap) {
-        if (!privateMap.has(receiver)) {
-            throw new TypeError("attempted to get private field on non-instance");
-        }
-        return privateMap.get(receiver);
+    function __classPrivateFieldGet(receiver, state, kind, f) {
+        if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+        return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
     }
 
-    function __classPrivateFieldSet(receiver, privateMap, value) {
-        if (!privateMap.has(receiver)) {
-            throw new TypeError("attempted to set private field on non-instance");
-        }
-        privateMap.set(receiver, value);
-        return value;
+    function __classPrivateFieldSet(receiver, state, value, kind, f) {
+        if (kind === "m") throw new TypeError("Private method is not writable");
+        if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+        return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+    }
+
+    function __classPrivateFieldIn(state, receiver) {
+        if (receiver === null || (typeof receiver !== "object" && typeof receiver !== "function")) throw new TypeError("Cannot use 'in' operator on non-object");
+        return typeof state === "function" ? receiver === state : state.has(receiver);
     }
 
-    var TIMEOUT = 1000;
-    var NG_ANIMATION_SELECTOR = '.ng-animating';
-    // TODO: in 3.0 change input name to tuiAutoFocus and handle empty string
-    // TODO: refactor on this whole thing in 3.0
-    var TuiAutoFocusDirective = /** @class */ (function () {
-        function TuiAutoFocusDirective(tuiFocusableComponent, isIos, animationFrame$, ngZone, elementRef, renderer) {
+    var AbstractTuiAutofocusHandler = /** @class */ (function () {
+        function AbstractTuiAutofocusHandler(tuiFocusableComponent, elementRef) {
             this.tuiFocusableComponent = tuiFocusableComponent;
-            this.isIos = isIos;
-            this.animationFrame$ = animationFrame$;
-            this.ngZone = ngZone;
             this.elementRef = elementRef;
-            this.renderer = renderer;
-            this.autoFocus = true;
         }
-        TuiAutoFocusDirective.prototype.ngAfterViewInit = function () {
-            var _this = this;
-            if (!this.autoFocus) {
-                return;
-            }
-            if (this.isTextFieldElement) {
-                if (this.isIos) {
-                    this.ngZone.runOutsideAngular(function () { return _this.iosWebkitAutofocus(); });
-                }
-                else {
-                    rxjs.race(rxjs.timer(TIMEOUT), this.animationFrame$.pipe(operators.throttleTime(constants.POLLING_TIME), operators.map(function () { return _this.element.closest(NG_ANIMATION_SELECTOR); }), operators.skipWhile(Boolean), operators.take(1))).subscribe(function () { return focus.setNativeFocused(_this.element); });
-                }
-                return;
-            }
-            focus.setNativeFocused(this.element);
-        };
-        Object.defineProperty(TuiAutoFocusDirective.prototype, "element", {
+        Object.defineProperty(AbstractTuiAutofocusHandler.prototype, "element", {
             get: function () {
                 var _a;
                 return (((_a = this.tuiFocusableComponent) === null || _a === void 0 ? void 0 : _a.nativeFocusableElement) ||
@@ -262,55 +267,223 @@
             enumerable: true,
             configurable: true
         });
-        Object.defineProperty(TuiAutoFocusDirective.prototype, "isTextFieldElement", {
+        Object.defineProperty(AbstractTuiAutofocusHandler.prototype, "isTextFieldElement", {
             get: function () {
                 return this.element.matches('input, textarea');
             },
             enumerable: true,
             configurable: true
         });
-        TuiAutoFocusDirective.prototype.iosWebkitAutofocus = function () {
+        AbstractTuiAutofocusHandler.ctorParameters = function () { return [
+            { type: undefined },
+            { type: core.ElementRef }
+        ]; };
+        AbstractTuiAutofocusHandler = __decorate([
+            core.Directive()
+        ], AbstractTuiAutofocusHandler);
+        return AbstractTuiAutofocusHandler;
+    }());
+
+    var TIMEOUT = 1000;
+    var NG_ANIMATION_SELECTOR = '.ng-animating';
+    var TuiDefaultAutofocusHandler = /** @class */ (function (_super) {
+        __extends(TuiDefaultAutofocusHandler, _super);
+        function TuiDefaultAutofocusHandler(tuiFocusableComponent, elementRef, animationFrame$) {
+            var _this = _super.call(this, tuiFocusableComponent, elementRef) || this;
+            _this.animationFrame$ = animationFrame$;
+            return _this;
+        }
+        TuiDefaultAutofocusHandler.prototype.setFocus = function () {
+            var _this = this;
+            if (this.isTextFieldElement) {
+                rxjs.race(rxjs.timer(TIMEOUT), this.animationFrame$.pipe(operators.throttleTime(constants.POLLING_TIME), operators.map(function () { return _this.element.closest(NG_ANIMATION_SELECTOR); }), operators.skipWhile(Boolean), operators.take(1))).subscribe(function () { return _this.element.focus(); });
+            }
+            else {
+                this.element.focus();
+            }
+        };
+        TuiDefaultAutofocusHandler.ctorParameters = function () { return [
+            { type: undefined, decorators: [{ type: core.Optional }, { type: core.Self }, { type: core.Inject, args: [tokens.TUI_FOCUSABLE_ITEM_ACCESSOR,] }] },
+            { type: core.ElementRef, decorators: [{ type: core.Inject, args: [core.ElementRef,] }] },
+            { type: rxjs.Observable, decorators: [{ type: core.Inject, args: [common.ANIMATION_FRAME,] }] }
+        ]; };
+        TuiDefaultAutofocusHandler = __decorate([
+            core.Directive(),
+            __param(0, core.Optional()),
+            __param(0, core.Self()),
+            __param(0, core.Inject(tokens.TUI_FOCUSABLE_ITEM_ACCESSOR)),
+            __param(1, core.Inject(core.ElementRef)),
+            __param(2, core.Inject(common.ANIMATION_FRAME))
+        ], TuiDefaultAutofocusHandler);
+        return TuiDefaultAutofocusHandler;
+    }(AbstractTuiAutofocusHandler));
+
+    // @dynamic
+    var TuiIosAutofocusHandler = /** @class */ (function (_super) {
+        __extends(TuiIosAutofocusHandler, _super);
+        function TuiIosAutofocusHandler(tuiFocusableComponent, elementRef, renderer, ngZone, windowRef) {
+            var _this = _super.call(this, tuiFocusableComponent, elementRef) || this;
+            _this.renderer = renderer;
+            _this.ngZone = ngZone;
+            _this.windowRef = windowRef;
+            _this.patchCssStyles();
+            return _this;
+        }
+        TuiIosAutofocusHandler.prototype.setFocus = function () {
+            var _this = this;
+            if (this.isTextFieldElement) {
+                this.ngZone.runOutsideAngular(function () { return _this.iosWebkitAutofocus(); });
+            }
+            else {
+                this.element.focus();
+            }
+        };
+        TuiIosAutofocusHandler.prototype.iosWebkitAutofocus = function () {
             var _this = this;
             var _a;
-            var fakeInput = this.renderer.createElement('input');
-            fakeInput.style.position = 'absolute';
-            fakeInput.style.opacity = '0';
-            fakeInput.style.height = '0';
-            var blurHandler = function () { return focus.setNativeFocused(fakeInput); };
+            var fakeInput = this.makeFakeInput();
+            var duration = this.getDurationTimeBeforeFocus();
+            var fakeFocusTimeoutId = 0;
+            var elementFocusTimeoutId = 0;
+            var blurHandler = function () { return fakeInput.focus({ preventScroll: true }); };
             var focusHandler = function () {
-                setTimeout(function () {
-                    focus.setNativeFocused(_this.element);
-                    /**
-                     * @note:
-                     * We can't remove the element immediately, because it breaks flow
-                     */
-                    setTimeout(function () {
-                        fakeInput.removeEventListener('blur', blurHandler);
-                        fakeInput.removeEventListener('focus', focusHandler);
+                clearTimeout(fakeFocusTimeoutId);
+                fakeFocusTimeoutId = _this.windowRef.setTimeout(function () {
+                    clearTimeout(elementFocusTimeoutId);
+                    fakeInput.removeEventListener('blur', blurHandler);
+                    fakeInput.removeEventListener('focus', focusHandler);
+                    elementFocusTimeoutId = _this.windowRef.setTimeout(function () {
+                        _this.element.focus({ preventScroll: false });
                         fakeInput.remove();
-                    });
+                    }, duration);
                 });
             };
-            /**
-             * @note: ping-pong eager strategy hack
-             * After creating an element and bringing it into DOM,
-             * the browser automatically focuses on the invisible element.
-             * And then, after focus is triggered, we try to focus on target element, and if we managed to refocus,
-             * then we try to focus again on an invisible element, so that the keyboard slowly appears.
-             * This ping pong allows the keyboard to not overlap the modal window.
-             */
             fakeInput.addEventListener('blur', blurHandler, { once: true });
             fakeInput.addEventListener('focus', focusHandler);
-            (_a = this.element.parentElement) === null || _a === void 0 ? void 0 : _a.appendChild(fakeInput);
-            focus.setNativeFocused(fakeInput);
+            if (this.insideDialog()) {
+                this.windowRef.document.body.appendChild(fakeInput);
+            }
+            else {
+                (_a = this.element.parentElement) === null || _a === void 0 ? void 0 : _a.appendChild(fakeInput);
+            }
+            fakeInput.focus({ preventScroll: true });
         };
-        TuiAutoFocusDirective.ctorParameters = function () { return [
+        /**
+         * @note:
+         * emulate textfield position in layout with cursor
+         * before focus to real textfield element
+         */
+        TuiIosAutofocusHandler.prototype.makeFakeInput = function () {
+            var fakeInput = this.renderer.createElement('input');
+            var rect = this.element.getBoundingClientRect();
+            fakeInput.style.height = utils.px(rect.height);
+            fakeInput.style.width = utils.px(rect.width / 2);
+            fakeInput.style.position = 'fixed';
+            fakeInput.style.opacity = '0';
+            fakeInput.style.fontSize = utils.px(16); // disable possible auto zoom
+            fakeInput.readOnly = true; // prevent keyboard for fake input
+            // @note: emulate position cursor before focus to real textfield element
+            fakeInput.style.top = utils.px(rect.top);
+            fakeInput.style.left = utils.px(rect.left);
+            return fakeInput;
+        };
+        TuiIosAutofocusHandler.prototype.getDurationTimeBeforeFocus = function () {
+            return (parseFloat(this.windowRef
+                .getComputedStyle(this.element)
+                .getPropertyValue('--tui-duration')) || 0);
+        };
+        /**
+         * @note:
+         * unfortunately, in older versions of iOS
+         * there is a bug that the fake input cursor
+         * will move along with the dialog animation
+         * and then that dialog will be shaking
+         */
+        TuiIosAutofocusHandler.prototype.insideDialog = function () {
+            return !!this.element.closest('tui-dialog');
+        };
+        /**
+         * @note:
+         * This is necessary so that the viewport isn't recalculated
+         * and then the dialogs don't shake.
+         *
+         * Also, we need to fixed height viewport,
+         * so that when focusing the dialogs don't shake
+         */
+        TuiIosAutofocusHandler.prototype.patchCssStyles = function () {
+            var e_1, _a;
+            var documentRef = this.windowRef.document;
+            try {
+                for (var _b = __values([documentRef.documentElement, documentRef.body]), _c = _b.next(); !_c.done; _c = _b.next()) {
+                    var element = _c.value;
+                    element.style.setProperty('overflow', 'auto');
+                    element.style.setProperty('height', '100%');
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+        };
+        TuiIosAutofocusHandler.ctorParameters = function () { return [
             { type: undefined, decorators: [{ type: core.Optional }, { type: core.Self }, { type: core.Inject, args: [tokens.TUI_FOCUSABLE_ITEM_ACCESSOR,] }] },
-            { type: Boolean, decorators: [{ type: core.Inject, args: [tokens.TUI_IS_IOS,] }] },
-            { type: rxjs.Observable, decorators: [{ type: core.Inject, args: [common.ANIMATION_FRAME,] }] },
-            { type: core.NgZone, decorators: [{ type: core.Inject, args: [core.NgZone,] }] },
             { type: core.ElementRef, decorators: [{ type: core.Inject, args: [core.ElementRef,] }] },
-            { type: core.Renderer2, decorators: [{ type: core.Inject, args: [core.Renderer2,] }] }
+            { type: core.Renderer2, decorators: [{ type: core.Inject, args: [core.Renderer2,] }] },
+            { type: core.NgZone, decorators: [{ type: core.Inject, args: [core.NgZone,] }] },
+            { type: Window, decorators: [{ type: core.Inject, args: [common.WINDOW,] }] }
+        ]; };
+        TuiIosAutofocusHandler = __decorate([
+            core.Directive(),
+            __param(0, core.Optional()),
+            __param(0, core.Self()),
+            __param(0, core.Inject(tokens.TUI_FOCUSABLE_ITEM_ACCESSOR)),
+            __param(1, core.Inject(core.ElementRef)),
+            __param(2, core.Inject(core.Renderer2)),
+            __param(3, core.Inject(core.NgZone)),
+            __param(4, core.Inject(common.WINDOW))
+        ], TuiIosAutofocusHandler);
+        return TuiIosAutofocusHandler;
+    }(AbstractTuiAutofocusHandler));
+
+    var TUI_AUTOFOCUS_HANDLER = new core.InjectionToken('Autofocusing handler');
+    // TODO: 3.0 remove in ivy compilation
+    function tuiAutofocusHandlerFactory(tuiFocusableComponent, elementRef, animationFrame$, renderer, ngZone, windowRef) {
+        return core.inject(tokens.TUI_IS_IOS)
+            ? new TuiIosAutofocusHandler(tuiFocusableComponent, elementRef, renderer, ngZone, windowRef)
+            : new TuiDefaultAutofocusHandler(tuiFocusableComponent, elementRef, animationFrame$);
+    }
+    var TUI_AUTOFOCUS_PROVIDERS = [
+        {
+            provide: TUI_AUTOFOCUS_HANDLER,
+            // TODO: replace to useClass in v3.0
+            useFactory: tuiAutofocusHandlerFactory,
+            deps: [
+                [new core.Optional(), new core.Self(), tokens.TUI_FOCUSABLE_ITEM_ACCESSOR],
+                core.ElementRef,
+                common.ANIMATION_FRAME,
+                core.Renderer2,
+                core.NgZone,
+                common.WINDOW,
+            ],
+        },
+    ];
+
+    // TODO: 3.0 change input name to tuiAutoFocus and handle empty string
+    var TuiAutoFocusDirective = /** @class */ (function () {
+        function TuiAutoFocusDirective(handler) {
+            this.handler = handler;
+            this.autoFocus = true;
+        }
+        TuiAutoFocusDirective.prototype.ngAfterViewInit = function () {
+            if (this.autoFocus) {
+                this.handler.setFocus();
+            }
+        };
+        TuiAutoFocusDirective.ctorParameters = function () { return [
+            { type: undefined, decorators: [{ type: core.Inject, args: [TUI_AUTOFOCUS_HANDLER,] }] }
         ]; };
         __decorate([
             core.Input()
@@ -318,15 +491,9 @@
         TuiAutoFocusDirective = __decorate([
             core.Directive({
                 selector: '[tuiAutoFocus]',
+                providers: TUI_AUTOFOCUS_PROVIDERS,
             }),
-            __param(0, core.Optional()),
-            __param(0, core.Self()),
-            __param(0, core.Inject(tokens.TUI_FOCUSABLE_ITEM_ACCESSOR)),
-            __param(1, core.Inject(tokens.TUI_IS_IOS)),
-            __param(2, core.Inject(common.ANIMATION_FRAME)),
-            __param(3, core.Inject(core.NgZone)),
-            __param(4, core.Inject(core.ElementRef)),
-            __param(5, core.Inject(core.Renderer2))
+            __param(0, core.Inject(TUI_AUTOFOCUS_HANDLER))
         ], TuiAutoFocusDirective);
         return TuiAutoFocusDirective;
     }());
@@ -343,8 +510,14 @@
         return TuiAutoFocusModule;
     }());
 
+    exports.AbstractTuiAutofocusHandler = AbstractTuiAutofocusHandler;
+    exports.TUI_AUTOFOCUS_HANDLER = TUI_AUTOFOCUS_HANDLER;
+    exports.TUI_AUTOFOCUS_PROVIDERS = TUI_AUTOFOCUS_PROVIDERS;
     exports.TuiAutoFocusDirective = TuiAutoFocusDirective;
     exports.TuiAutoFocusModule = TuiAutoFocusModule;
+    exports.TuiDefaultAutofocusHandler = TuiDefaultAutofocusHandler;
+    exports.TuiIosAutofocusHandler = TuiIosAutofocusHandler;
+    exports.tuiAutofocusHandlerFactory = tuiAutofocusHandlerFactory;
 
     Object.defineProperty(exports, '__esModule', { value: true });