q2-tecton-elements 1.4.4 → 1.5.3

package/dist/esm-es5/q2-tab-container.entry.js

@@ -1,1059 +1,362 @@
-var __extends = (this && this.__extends) || (function () {
-    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]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-b70f7228.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-06403810.js';
 import { c as createGuid } from './index-ff056163.js';
-function isFunction(x) {
-    return typeof x === 'function';
+function createCommonjsModule(fn, basedir, module) {
+    return module = {
+        path: basedir,
+        exports: {},
+        require: function (path, base) {
+            return commonjsRequire();
+        }
+    }, fn(module, module.exports), module.exports;
 }
-var _enable_super_gross_mode_that_will_cause_bad_things = false;
-var config = {
-    Promise: undefined,
-    set useDeprecatedSynchronousErrorHandling(value) {
-        if (value) {
-            var error = new Error();
-            console.warn('DEPRECATED! RxJS was set to use deprecated synchronous error handling behavior by code at: \n' + error.stack);
-        }
-        else if (_enable_super_gross_mode_that_will_cause_bad_things) {
-            console.log('RxJS: Back to a better error behavior. Thank you. <3');
-        }
-        _enable_super_gross_mode_that_will_cause_bad_things = value;
-    },
-    get useDeprecatedSynchronousErrorHandling() {
-        return _enable_super_gross_mode_that_will_cause_bad_things;
-    },
-};
-function hostReportError(err) {
-    setTimeout(function () { throw err; }, 0);
+function commonjsRequire() {
+    throw new Error('Dynamic requires are not currently supported by @rollup/plugin-commonjs');
 }
-var empty = {
-    closed: true,
-    next: function (value) { },
-    error: function (err) {
-        if (config.useDeprecatedSynchronousErrorHandling) {
-            throw err;
-        }
-        else {
-            hostReportError(err);
-        }
-    },
-    complete: function () { }
-};
-var isArray = (function () { return Array.isArray || (function (x) { return x && typeof x.length === 'number'; }); })();
-function isObject(x) {
-    return x !== null && typeof x === 'object';
-}
-var UnsubscriptionErrorImpl = (function () {
-    function UnsubscriptionErrorImpl(errors) {
-        Error.call(this);
-        this.message = errors ?
-            errors.length + " errors occurred during unsubscription:\n" + errors.map(function (err, i) { return i + 1 + ") " + err.toString(); }).join('\n  ') : '';
-        this.name = 'UnsubscriptionError';
-        this.errors = errors;
-        return this;
-    }
-    UnsubscriptionErrorImpl.prototype = Object.create(Error.prototype);
-    return UnsubscriptionErrorImpl;
-})();
-var UnsubscriptionError = UnsubscriptionErrorImpl;
-var Subscription = /** @class */ (function () {
-    function Subscription(unsubscribe) {
-        this.closed = false;
-        this._parentOrParents = null;
-        this._subscriptions = null;
-        if (unsubscribe) {
-            this._ctorUnsubscribe = true;
-            this._unsubscribe = unsubscribe;
-        }
-    }
-    Subscription.prototype.unsubscribe = function () {
-        var errors;
-        if (this.closed) {
-            return;
-        }
-        var _a = this, _parentOrParents = _a._parentOrParents, _ctorUnsubscribe = _a._ctorUnsubscribe, _unsubscribe = _a._unsubscribe, _subscriptions = _a._subscriptions;
-        this.closed = true;
-        this._parentOrParents = null;
-        this._subscriptions = null;
-        if (_parentOrParents instanceof Subscription) {
-            _parentOrParents.remove(this);
-        }
-        else if (_parentOrParents !== null) {
-            for (var index = 0; index < _parentOrParents.length; ++index) {
-                var parent = _parentOrParents[index];
-                parent.remove(this);
-            }
-        }
-        if (isFunction(_unsubscribe)) {
-            if (_ctorUnsubscribe) {
-                this._unsubscribe = undefined;
-            }
-            try {
-                _unsubscribe.call(this);
-            }
-            catch (e) {
-                errors = e instanceof UnsubscriptionError ? flattenUnsubscriptionErrors(e.errors) : [e];
+var smoothscroll = createCommonjsModule(function (module, exports) {
+    /* smoothscroll v0.4.4 - 2019 - Dustan Kasten, Jeremias Menichelli - MIT License */
+    (function () {
+        // polyfill
+        function polyfill() {
+            // aliases
+            var w = window;
+            var d = document;
+            // return if scroll behavior is supported and polyfill is not forced
+            if ('scrollBehavior' in d.documentElement.style &&
+                w.__forceSmoothScrollPolyfill__ !== true) {
+                return;
             }
-        }
-        if (isArray(_subscriptions)) {
-            var index = -1;
-            var len = _subscriptions.length;
-            while (++index < len) {
-                var sub = _subscriptions[index];
-                if (isObject(sub)) {
-                    try {
-                        sub.unsubscribe();
-                    }
-                    catch (e) {
-                        errors = errors || [];
-                        if (e instanceof UnsubscriptionError) {
-                            errors = errors.concat(flattenUnsubscriptionErrors(e.errors));
-                        }
-                        else {
-                            errors.push(e);
-                        }
-                    }
+            // globals
+            var Element = w.HTMLElement || w.Element;
+            var SCROLL_TIME = 468;
+            // object gathering original scroll methods
+            var original = {
+                scroll: w.scroll || w.scrollTo,
+                scrollBy: w.scrollBy,
+                elementScroll: Element.prototype.scroll || scrollElement,
+                scrollIntoView: Element.prototype.scrollIntoView
+            };
+            // define timing method
+            var now = w.performance && w.performance.now
+                ? w.performance.now.bind(w.performance)
+                : Date.now;
+            /**
+             * indicates if a the current browser is made by Microsoft
+             * @method isMicrosoftBrowser
+             * @param {String} userAgent
+             * @returns {Boolean}
+             */
+            function isMicrosoftBrowser(userAgent) {
+                var userAgentPatterns = ['MSIE ', 'Trident/', 'Edge/'];
+                return new RegExp(userAgentPatterns.join('|')).test(userAgent);
+            }
+            /*
+             * IE has rounding bug rounding down clientHeight and clientWidth and
+             * rounding up scrollHeight and scrollWidth causing false positives
+             * on hasScrollableSpace
+             */
+            var ROUNDING_TOLERANCE = isMicrosoftBrowser(w.navigator.userAgent) ? 1 : 0;
+            /**
+             * changes scroll position inside an element
+             * @method scrollElement
+             * @param {Number} x
+             * @param {Number} y
+             * @returns {undefined}
+             */
+            function scrollElement(x, y) {
+                this.scrollLeft = x;
+                this.scrollTop = y;
+            }
+            /**
+             * returns result of applying ease math function to a number
+             * @method ease
+             * @param {Number} k
+             * @returns {Number}
+             */
+            function ease(k) {
+                return 0.5 * (1 - Math.cos(Math.PI * k));
+            }
+            /**
+             * indicates if a smooth behavior should be applied
+             * @method shouldBailOut
+             * @param {Number|Object} firstArg
+             * @returns {Boolean}
+             */
+            function shouldBailOut(firstArg) {
+                if (firstArg === null ||
+                    typeof firstArg !== 'object' ||
+                    firstArg.behavior === undefined ||
+                    firstArg.behavior === 'auto' ||
+                    firstArg.behavior === 'instant') {
+                    // first argument is not an object/null
+                    // or behavior is auto, instant or undefined
+                    return true;
                 }
-            }
-        }
-        if (errors) {
-            throw new UnsubscriptionError(errors);
-        }
-    };
-    Subscription.prototype.add = function (teardown) {
-        var subscription = teardown;
-        if (!teardown) {
-            return Subscription.EMPTY;
-        }
-        switch (typeof teardown) {
-            case 'function':
-                subscription = new Subscription(teardown);
-            case 'object':
-                if (subscription === this || subscription.closed || typeof subscription.unsubscribe !== 'function') {
-                    return subscription;
+                if (typeof firstArg === 'object' && firstArg.behavior === 'smooth') {
+                    // first argument is an object and behavior is smooth
+                    return false;
                 }
-                else if (this.closed) {
-                    subscription.unsubscribe();
-                    return subscription;
+                // throw error when behavior is not supported
+                throw new TypeError('behavior member of ScrollOptions ' +
+                    firstArg.behavior +
+                    ' is not a valid value for enumeration ScrollBehavior.');
+            }
+            /**
+             * indicates if an element has scrollable space in the provided axis
+             * @method hasScrollableSpace
+             * @param {Node} el
+             * @param {String} axis
+             * @returns {Boolean}
+             */
+            function hasScrollableSpace(el, axis) {
+                if (axis === 'Y') {
+                    return el.clientHeight + ROUNDING_TOLERANCE < el.scrollHeight;
                 }
-                else if (!(subscription instanceof Subscription)) {
-                    var tmp = subscription;
-                    subscription = new Subscription();
-                    subscription._subscriptions = [tmp];
+                if (axis === 'X') {
+                    return el.clientWidth + ROUNDING_TOLERANCE < el.scrollWidth;
                 }
-                break;
-            default: {
-                throw new Error('unrecognized teardown ' + teardown + ' added to Subscription.');
-            }
-        }
-        var _parentOrParents = subscription._parentOrParents;
-        if (_parentOrParents === null) {
-            subscription._parentOrParents = this;
-        }
-        else if (_parentOrParents instanceof Subscription) {
-            if (_parentOrParents === this) {
-                return subscription;
-            }
-            subscription._parentOrParents = [_parentOrParents, this];
-        }
-        else if (_parentOrParents.indexOf(this) === -1) {
-            _parentOrParents.push(this);
-        }
-        else {
-            return subscription;
-        }
-        var subscriptions = this._subscriptions;
-        if (subscriptions === null) {
-            this._subscriptions = [subscription];
-        }
-        else {
-            subscriptions.push(subscription);
-        }
-        return subscription;
-    };
-    Subscription.prototype.remove = function (subscription) {
-        var subscriptions = this._subscriptions;
-        if (subscriptions) {
-            var subscriptionIndex = subscriptions.indexOf(subscription);
-            if (subscriptionIndex !== -1) {
-                subscriptions.splice(subscriptionIndex, 1);
             }
-        }
-    };
-    return Subscription;
-}());
-Subscription.EMPTY = (function (empty) {
-    empty.closed = true;
-    return empty;
-}(new Subscription()));
-function flattenUnsubscriptionErrors(errors) {
-    return errors.reduce(function (errs, err) { return errs.concat((err instanceof UnsubscriptionError) ? err.errors : err); }, []);
-}
-var rxSubscriber = (function () { return typeof Symbol === 'function'
-    ? Symbol('rxSubscriber')
-    : '@@rxSubscriber_' + Math.random(); })();
-var Subscriber = /** @class */ (function (_super) {
-    __extends(Subscriber, _super);
-    function Subscriber(destinationOrNext, error, complete) {
-        var _this = _super.call(this) || this;
-        _this.syncErrorValue = null;
-        _this.syncErrorThrown = false;
-        _this.syncErrorThrowable = false;
-        _this.isStopped = false;
-        switch (arguments.length) {
-            case 0:
-                _this.destination = empty;
-                break;
-            case 1:
-                if (!destinationOrNext) {
-                    _this.destination = empty;
-                    break;
+            /**
+             * indicates if an element has a scrollable overflow property in the axis
+             * @method canOverflow
+             * @param {Node} el
+             * @param {String} axis
+             * @returns {Boolean}
+             */
+            function canOverflow(el, axis) {
+                var overflowValue = w.getComputedStyle(el, null)['overflow' + axis];
+                return overflowValue === 'auto' || overflowValue === 'scroll';
+            }
+            /**
+             * indicates if an element can be scrolled in either axis
+             * @method isScrollable
+             * @param {Node} el
+             * @param {String} axis
+             * @returns {Boolean}
+             */
+            function isScrollable(el) {
+                var isScrollableY = hasScrollableSpace(el, 'Y') && canOverflow(el, 'Y');
+                var isScrollableX = hasScrollableSpace(el, 'X') && canOverflow(el, 'X');
+                return isScrollableY || isScrollableX;
+            }
+            /**
+             * finds scrollable parent of an element
+             * @method findScrollableParent
+             * @param {Node} el
+             * @returns {Node} el
+             */
+            function findScrollableParent(el) {
+                while (el !== d.body && isScrollable(el) === false) {
+                    el = el.parentNode || el.host;
                 }
-                if (typeof destinationOrNext === 'object') {
-                    if (destinationOrNext instanceof Subscriber) {
-                        _this.syncErrorThrowable = destinationOrNext.syncErrorThrowable;
-                        _this.destination = destinationOrNext;
-                        destinationOrNext.add(_this);
-                    }
-                    else {
-                        _this.syncErrorThrowable = true;
-                        _this.destination = new SafeSubscriber(_this, destinationOrNext);
-                    }
-                    break;
+                return el;
+            }
+            /**
+             * self invoked function that, given a context, steps through scrolling
+             * @method step
+             * @param {Object} context
+             * @returns {undefined}
+             */
+            function step(context) {
+                var time = now();
+                var value;
+                var currentX;
+                var currentY;
+                var elapsed = (time - context.startTime) / SCROLL_TIME;
+                // avoid elapsed times higher than one
+                elapsed = elapsed > 1 ? 1 : elapsed;
+                // apply easing to elapsed time
+                value = ease(elapsed);
+                currentX = context.startX + (context.x - context.startX) * value;
+                currentY = context.startY + (context.y - context.startY) * value;
+                context.method.call(context.scrollable, currentX, currentY);
+                // scroll more if we have not reached our destination
+                if (currentX !== context.x || currentY !== context.y) {
+                    w.requestAnimationFrame(step.bind(w, context));
                 }
-            default:
-                _this.syncErrorThrowable = true;
-                _this.destination = new SafeSubscriber(_this, destinationOrNext, error, complete);
-                break;
-        }
-        return _this;
-    }
-    Subscriber.prototype[rxSubscriber] = function () { return this; };
-    Subscriber.create = function (next, error, complete) {
-        var subscriber = new Subscriber(next, error, complete);
-        subscriber.syncErrorThrowable = false;
-        return subscriber;
-    };
-    Subscriber.prototype.next = function (value) {
-        if (!this.isStopped) {
-            this._next(value);
-        }
-    };
-    Subscriber.prototype.error = function (err) {
-        if (!this.isStopped) {
-            this.isStopped = true;
-            this._error(err);
-        }
-    };
-    Subscriber.prototype.complete = function () {
-        if (!this.isStopped) {
-            this.isStopped = true;
-            this._complete();
-        }
-    };
-    Subscriber.prototype.unsubscribe = function () {
-        if (this.closed) {
-            return;
-        }
-        this.isStopped = true;
-        _super.prototype.unsubscribe.call(this);
-    };
-    Subscriber.prototype._next = function (value) {
-        this.destination.next(value);
-    };
-    Subscriber.prototype._error = function (err) {
-        this.destination.error(err);
-        this.unsubscribe();
-    };
-    Subscriber.prototype._complete = function () {
-        this.destination.complete();
-        this.unsubscribe();
-    };
-    Subscriber.prototype._unsubscribeAndRecycle = function () {
-        var _parentOrParents = this._parentOrParents;
-        this._parentOrParents = null;
-        this.unsubscribe();
-        this.closed = false;
-        this.isStopped = false;
-        this._parentOrParents = _parentOrParents;
-        return this;
-    };
-    return Subscriber;
-}(Subscription));
-var SafeSubscriber = /** @class */ (function (_super) {
-    __extends(SafeSubscriber, _super);
-    function SafeSubscriber(_parentSubscriber, observerOrNext, error, complete) {
-        var _this = _super.call(this) || this;
-        _this._parentSubscriber = _parentSubscriber;
-        var next;
-        var context = _this;
-        if (isFunction(observerOrNext)) {
-            next = observerOrNext;
-        }
-        else if (observerOrNext) {
-            next = observerOrNext.next;
-            error = observerOrNext.error;
-            complete = observerOrNext.complete;
-            if (observerOrNext !== empty) {
-                context = Object.create(observerOrNext);
-                if (isFunction(context.unsubscribe)) {
-                    _this.add(context.unsubscribe.bind(context));
-                }
-                context.unsubscribe = _this.unsubscribe.bind(_this);
             }
-        }
-        _this._context = context;
-        _this._next = next;
-        _this._error = error;
-        _this._complete = complete;
-        return _this;
-    }
-    SafeSubscriber.prototype.next = function (value) {
-        if (!this.isStopped && this._next) {
-            var _parentSubscriber = this._parentSubscriber;
-            if (!config.useDeprecatedSynchronousErrorHandling || !_parentSubscriber.syncErrorThrowable) {
-                this.__tryOrUnsub(this._next, value);
-            }
-            else if (this.__tryOrSetError(_parentSubscriber, this._next, value)) {
-                this.unsubscribe();
-            }
-        }
-    };
-    SafeSubscriber.prototype.error = function (err) {
-        if (!this.isStopped) {
-            var _parentSubscriber = this._parentSubscriber;
-            var useDeprecatedSynchronousErrorHandling = config.useDeprecatedSynchronousErrorHandling;
-            if (this._error) {
-                if (!useDeprecatedSynchronousErrorHandling || !_parentSubscriber.syncErrorThrowable) {
-                    this.__tryOrUnsub(this._error, err);
-                    this.unsubscribe();
+            /**
+             * scrolls window or element with a smooth behavior
+             * @method smoothScroll
+             * @param {Object|Node} el
+             * @param {Number} x
+             * @param {Number} y
+             * @returns {undefined}
+             */
+            function smoothScroll(el, x, y) {
+                var scrollable;
+                var startX;
+                var startY;
+                var method;
+                var startTime = now();
+                // define scroll context
+                if (el === d.body) {
+                    scrollable = w;
+                    startX = w.scrollX || w.pageXOffset;
+                    startY = w.scrollY || w.pageYOffset;
+                    method = original.scroll;
                 }
                 else {
-                    this.__tryOrSetError(_parentSubscriber, this._error, err);
-                    this.unsubscribe();
+                    scrollable = el;
+                    startX = el.scrollLeft;
+                    startY = el.scrollTop;
+                    method = scrollElement;
                 }
-            }
-            else if (!_parentSubscriber.syncErrorThrowable) {
-                this.unsubscribe();
-                if (useDeprecatedSynchronousErrorHandling) {
-                    throw err;
+                // scroll looping over a frame
+                step({
+                    scrollable: scrollable,
+                    method: method,
+                    startTime: startTime,
+                    startX: startX,
+                    startY: startY,
+                    x: x,
+                    y: y
+                });
+            }
+            // ORIGINAL METHODS OVERRIDES
+            // w.scroll and w.scrollTo
+            w.scroll = w.scrollTo = function () {
+                // avoid action when no arguments are passed
+                if (arguments[0] === undefined) {
+                    return;
                 }
-                hostReportError(err);
-            }
-            else {
-                if (useDeprecatedSynchronousErrorHandling) {
-                    _parentSubscriber.syncErrorValue = err;
-                    _parentSubscriber.syncErrorThrown = true;
+                // avoid smooth behavior if not required
+                if (shouldBailOut(arguments[0]) === true) {
+                    original.scroll.call(w, arguments[0].left !== undefined
+                        ? arguments[0].left
+                        : typeof arguments[0] !== 'object'
+                            ? arguments[0]
+                            : w.scrollX || w.pageXOffset, 
+                    // use top prop, second argument if present or fallback to scrollY
+                    arguments[0].top !== undefined
+                        ? arguments[0].top
+                        : arguments[1] !== undefined
+                            ? arguments[1]
+                            : w.scrollY || w.pageYOffset);
+                    return;
                 }
-                else {
-                    hostReportError(err);
+                // LET THE SMOOTHNESS BEGIN!
+                smoothScroll.call(w, d.body, arguments[0].left !== undefined
+                    ? ~~arguments[0].left
+                    : w.scrollX || w.pageXOffset, arguments[0].top !== undefined
+                    ? ~~arguments[0].top
+                    : w.scrollY || w.pageYOffset);
+            };
+            // w.scrollBy
+            w.scrollBy = function () {
+                // avoid action when no arguments are passed
+                if (arguments[0] === undefined) {
+                    return;
                 }
-                this.unsubscribe();
-            }
-        }
-    };
-    SafeSubscriber.prototype.complete = function () {
-        var _this = this;
-        if (!this.isStopped) {
-            var _parentSubscriber = this._parentSubscriber;
-            if (this._complete) {
-                var wrappedComplete = function () { return _this._complete.call(_this._context); };
-                if (!config.useDeprecatedSynchronousErrorHandling || !_parentSubscriber.syncErrorThrowable) {
-                    this.__tryOrUnsub(wrappedComplete);
-                    this.unsubscribe();
+                // avoid smooth behavior if not required
+                if (shouldBailOut(arguments[0])) {
+                    original.scrollBy.call(w, arguments[0].left !== undefined
+                        ? arguments[0].left
+                        : typeof arguments[0] !== 'object' ? arguments[0] : 0, arguments[0].top !== undefined
+                        ? arguments[0].top
+                        : arguments[1] !== undefined ? arguments[1] : 0);
+                    return;
                 }
-                else {
-                    this.__tryOrSetError(_parentSubscriber, wrappedComplete);
-                    this.unsubscribe();
+                // LET THE SMOOTHNESS BEGIN!
+                smoothScroll.call(w, d.body, ~~arguments[0].left + (w.scrollX || w.pageXOffset), ~~arguments[0].top + (w.scrollY || w.pageYOffset));
+            };
+            // Element.prototype.scroll and Element.prototype.scrollTo
+            Element.prototype.scroll = Element.prototype.scrollTo = function () {
+                // avoid action when no arguments are passed
+                if (arguments[0] === undefined) {
+                    return;
                 }
-            }
-            else {
-                this.unsubscribe();
-            }
-        }
-    };
-    SafeSubscriber.prototype.__tryOrUnsub = function (fn, value) {
-        try {
-            fn.call(this._context, value);
-        }
-        catch (err) {
-            this.unsubscribe();
-            if (config.useDeprecatedSynchronousErrorHandling) {
-                throw err;
-            }
-            else {
-                hostReportError(err);
-            }
-        }
-    };
-    SafeSubscriber.prototype.__tryOrSetError = function (parent, fn, value) {
-        if (!config.useDeprecatedSynchronousErrorHandling) {
-            throw new Error('bad call');
-        }
-        try {
-            fn.call(this._context, value);
-        }
-        catch (err) {
-            if (config.useDeprecatedSynchronousErrorHandling) {
-                parent.syncErrorValue = err;
-                parent.syncErrorThrown = true;
-                return true;
-            }
-            else {
-                hostReportError(err);
-                return true;
-            }
-        }
-        return false;
-    };
-    SafeSubscriber.prototype._unsubscribe = function () {
-        var _parentSubscriber = this._parentSubscriber;
-        this._context = null;
-        this._parentSubscriber = null;
-        _parentSubscriber.unsubscribe();
-    };
-    return SafeSubscriber;
-}(Subscriber));
-function canReportError(observer) {
-    while (observer) {
-        var closed = observer.closed, destination = observer.destination, isStopped = observer.isStopped;
-        if (closed || isStopped) {
-            return false;
-        }
-        else if (destination && destination instanceof Subscriber) {
-            observer = destination;
-        }
-        else {
-            observer = null;
-        }
-    }
-    return true;
-}
-function toSubscriber(nextOrObserver, error, complete) {
-    if (nextOrObserver) {
-        if (nextOrObserver instanceof Subscriber) {
-            return nextOrObserver;
-        }
-        if (nextOrObserver[rxSubscriber]) {
-            return nextOrObserver[rxSubscriber]();
-        }
-    }
-    if (!nextOrObserver && !error && !complete) {
-        return new Subscriber(empty);
-    }
-    return new Subscriber(nextOrObserver, error, complete);
-}
-var observable = (function () { return typeof Symbol === 'function' && Symbol.observable || '@@observable'; })();
-function identity(x) {
-    return x;
-}
-function pipeFromArray(fns) {
-    if (fns.length === 0) {
-        return identity;
-    }
-    if (fns.length === 1) {
-        return fns[0];
-    }
-    return function piped(input) {
-        return fns.reduce(function (prev, fn) { return fn(prev); }, input);
-    };
-}
-var Observable = /** @class */ (function () {
-    function Observable(subscribe) {
-        this._isScalar = false;
-        if (subscribe) {
-            this._subscribe = subscribe;
-        }
-    }
-    Observable.prototype.lift = function (operator) {
-        var observable = new Observable();
-        observable.source = this;
-        observable.operator = operator;
-        return observable;
-    };
-    Observable.prototype.subscribe = function (observerOrNext, error, complete) {
-        var operator = this.operator;
-        var sink = toSubscriber(observerOrNext, error, complete);
-        if (operator) {
-            sink.add(operator.call(sink, this.source));
-        }
-        else {
-            sink.add(this.source || (config.useDeprecatedSynchronousErrorHandling && !sink.syncErrorThrowable) ?
-                this._subscribe(sink) :
-                this._trySubscribe(sink));
-        }
-        if (config.useDeprecatedSynchronousErrorHandling) {
-            if (sink.syncErrorThrowable) {
-                sink.syncErrorThrowable = false;
-                if (sink.syncErrorThrown) {
-                    throw sink.syncErrorValue;
+                // avoid smooth behavior if not required
+                if (shouldBailOut(arguments[0]) === true) {
+                    // if one number is passed, throw error to match Firefox implementation
+                    if (typeof arguments[0] === 'number' && arguments[1] === undefined) {
+                        throw new SyntaxError('Value could not be converted');
+                    }
+                    original.elementScroll.call(this, 
+                    // use left prop, first number argument or fallback to scrollLeft
+                    arguments[0].left !== undefined
+                        ? ~~arguments[0].left
+                        : typeof arguments[0] !== 'object' ? ~~arguments[0] : this.scrollLeft, 
+                    // use top prop, second argument or fallback to scrollTop
+                    arguments[0].top !== undefined
+                        ? ~~arguments[0].top
+                        : arguments[1] !== undefined ? ~~arguments[1] : this.scrollTop);
+                    return;
                 }
-            }
-        }
-        return sink;
-    };
-    Observable.prototype._trySubscribe = function (sink) {
-        try {
-            return this._subscribe(sink);
-        }
-        catch (err) {
-            if (config.useDeprecatedSynchronousErrorHandling) {
-                sink.syncErrorThrown = true;
-                sink.syncErrorValue = err;
-            }
-            if (canReportError(sink)) {
-                sink.error(err);
-            }
-            else {
-                console.warn(err);
-            }
-        }
-    };
-    Observable.prototype.forEach = function (next, promiseCtor) {
-        var _this = this;
-        promiseCtor = getPromiseCtor(promiseCtor);
-        return new promiseCtor(function (resolve, reject) {
-            var subscription;
-            subscription = _this.subscribe(function (value) {
-                try {
-                    next(value);
+                var left = arguments[0].left;
+                var top = arguments[0].top;
+                // LET THE SMOOTHNESS BEGIN!
+                smoothScroll.call(this, this, typeof left === 'undefined' ? this.scrollLeft : ~~left, typeof top === 'undefined' ? this.scrollTop : ~~top);
+            };
+            // Element.prototype.scrollBy
+            Element.prototype.scrollBy = function () {
+                // avoid action when no arguments are passed
+                if (arguments[0] === undefined) {
+                    return;
+                }
+                // avoid smooth behavior if not required
+                if (shouldBailOut(arguments[0]) === true) {
+                    original.elementScroll.call(this, arguments[0].left !== undefined
+                        ? ~~arguments[0].left + this.scrollLeft
+                        : ~~arguments[0] + this.scrollLeft, arguments[0].top !== undefined
+                        ? ~~arguments[0].top + this.scrollTop
+                        : ~~arguments[1] + this.scrollTop);
+                    return;
                 }
-                catch (err) {
-                    reject(err);
-                    if (subscription) {
-                        subscription.unsubscribe();
+                this.scroll({
+                    left: ~~arguments[0].left + this.scrollLeft,
+                    top: ~~arguments[0].top + this.scrollTop,
+                    behavior: arguments[0].behavior
+                });
+            };
+            // Element.prototype.scrollIntoView
+            Element.prototype.scrollIntoView = function () {
+                // avoid smooth behavior if not required
+                if (shouldBailOut(arguments[0]) === true) {
+                    original.scrollIntoView.call(this, arguments[0] === undefined ? true : arguments[0]);
+                    return;
+                }
+                // LET THE SMOOTHNESS BEGIN!
+                var scrollableParent = findScrollableParent(this);
+                var parentRects = scrollableParent.getBoundingClientRect();
+                var clientRects = this.getBoundingClientRect();
+                if (scrollableParent !== d.body) {
+                    // reveal element inside parent
+                    smoothScroll.call(this, scrollableParent, scrollableParent.scrollLeft + clientRects.left - parentRects.left, scrollableParent.scrollTop + clientRects.top - parentRects.top);
+                    // reveal parent in viewport unless is fixed
+                    if (w.getComputedStyle(scrollableParent).position !== 'fixed') {
+                        w.scrollBy({
+                            left: parentRects.left,
+                            top: parentRects.top,
+                            behavior: 'smooth'
+                        });
                     }
                 }
-            }, reject, resolve);
-        });
-    };
-    Observable.prototype._subscribe = function (subscriber) {
-        var source = this.source;
-        return source && source.subscribe(subscriber);
-    };
-    Observable.prototype[observable] = function () {
-        return this;
-    };
-    Observable.prototype.pipe = function () {
-        var operations = [];
-        for (var _i = 0; _i < arguments.length; _i++) {
-            operations[_i] = arguments[_i];
-        }
-        if (operations.length === 0) {
-            return this;
-        }
-        return pipeFromArray(operations)(this);
-    };
-    Observable.prototype.toPromise = function (promiseCtor) {
-        var _this = this;
-        promiseCtor = getPromiseCtor(promiseCtor);
-        return new promiseCtor(function (resolve, reject) {
-            var value;
-            _this.subscribe(function (x) { return value = x; }, function (err) { return reject(err); }, function () { return resolve(value); });
-        });
-    };
-    return Observable;
-}());
-Observable.create = function (subscribe) {
-    return new Observable(subscribe);
-};
-function getPromiseCtor(promiseCtor) {
-    if (!promiseCtor) {
-        promiseCtor = Promise;
-    }
-    if (!promiseCtor) {
-        throw new Error('no Promise impl found');
-    }
-    return promiseCtor;
-}
-var Action = /** @class */ (function (_super) {
-    __extends(Action, _super);
-    function Action(scheduler, work) {
-        return _super.call(this) || this;
-    }
-    Action.prototype.schedule = function (state, delay) {
-        if (delay === void 0) { delay = 0; }
-        return this;
-    };
-    return Action;
-}(Subscription));
-var AsyncAction = /** @class */ (function (_super) {
-    __extends(AsyncAction, _super);
-    function AsyncAction(scheduler, work) {
-        var _this = _super.call(this, scheduler, work) || this;
-        _this.scheduler = scheduler;
-        _this.work = work;
-        _this.pending = false;
-        return _this;
-    }
-    AsyncAction.prototype.schedule = function (state, delay) {
-        if (delay === void 0) { delay = 0; }
-        if (this.closed) {
-            return this;
-        }
-        this.state = state;
-        var id = this.id;
-        var scheduler = this.scheduler;
-        if (id != null) {
-            this.id = this.recycleAsyncId(scheduler, id, delay);
-        }
-        this.pending = true;
-        this.delay = delay;
-        this.id = this.id || this.requestAsyncId(scheduler, this.id, delay);
-        return this;
-    };
-    AsyncAction.prototype.requestAsyncId = function (scheduler, id, delay) {
-        if (delay === void 0) { delay = 0; }
-        return setInterval(scheduler.flush.bind(scheduler, this), delay);
-    };
-    AsyncAction.prototype.recycleAsyncId = function (scheduler, id, delay) {
-        if (delay === void 0) { delay = 0; }
-        if (delay !== null && this.delay === delay && this.pending === false) {
-            return id;
-        }
-        clearInterval(id);
-        return undefined;
-    };
-    AsyncAction.prototype.execute = function (state, delay) {
-        if (this.closed) {
-            return new Error('executing a cancelled action');
-        }
-        this.pending = false;
-        var error = this._execute(state, delay);
-        if (error) {
-            return error;
-        }
-        else if (this.pending === false && this.id != null) {
-            this.id = this.recycleAsyncId(this.scheduler, this.id, null);
-        }
-    };
-    AsyncAction.prototype._execute = function (state, delay) {
-        var errored = false;
-        var errorValue = undefined;
-        try {
-            this.work(state);
-        }
-        catch (e) {
-            errored = true;
-            errorValue = !!e && e || new Error(e);
-        }
-        if (errored) {
-            this.unsubscribe();
-            return errorValue;
-        }
-    };
-    AsyncAction.prototype._unsubscribe = function () {
-        var id = this.id;
-        var scheduler = this.scheduler;
-        var actions = scheduler.actions;
-        var index = actions.indexOf(this);
-        this.work = null;
-        this.state = null;
-        this.pending = false;
-        this.scheduler = null;
-        if (index !== -1) {
-            actions.splice(index, 1);
-        }
-        if (id != null) {
-            this.id = this.recycleAsyncId(scheduler, id, null);
-        }
-        this.delay = null;
-    };
-    return AsyncAction;
-}(Action));
-var Scheduler = /** @class */ (function () {
-    function Scheduler(SchedulerAction, now) {
-        if (now === void 0) { now = Scheduler.now; }
-        this.SchedulerAction = SchedulerAction;
-        this.now = now;
-    }
-    Scheduler.prototype.schedule = function (work, delay, state) {
-        if (delay === void 0) { delay = 0; }
-        return new this.SchedulerAction(this, work).schedule(state, delay);
-    };
-    return Scheduler;
-}());
-Scheduler.now = function () { return Date.now(); };
-var AsyncScheduler = /** @class */ (function (_super) {
-    __extends(AsyncScheduler, _super);
-    function AsyncScheduler(SchedulerAction, now) {
-        if (now === void 0) { now = Scheduler.now; }
-        var _this = _super.call(this, SchedulerAction, function () {
-            if (AsyncScheduler.delegate && AsyncScheduler.delegate !== _this) {
-                return AsyncScheduler.delegate.now();
-            }
-            else {
-                return now();
-            }
-        }) || this;
-        _this.actions = [];
-        _this.active = false;
-        _this.scheduled = undefined;
-        return _this;
-    }
-    AsyncScheduler.prototype.schedule = function (work, delay, state) {
-        if (delay === void 0) { delay = 0; }
-        if (AsyncScheduler.delegate && AsyncScheduler.delegate !== this) {
-            return AsyncScheduler.delegate.schedule(work, delay, state);
-        }
-        else {
-            return _super.prototype.schedule.call(this, work, delay, state);
-        }
-    };
-    AsyncScheduler.prototype.flush = function (action) {
-        var actions = this.actions;
-        if (this.active) {
-            actions.push(action);
-            return;
-        }
-        var error;
-        this.active = true;
-        do {
-            if (error = action.execute(action.state, action.delay)) {
-                break;
-            }
-        } while (action = actions.shift());
-        this.active = false;
-        if (error) {
-            while (action = actions.shift()) {
-                action.unsubscribe();
-            }
-            throw error;
-        }
-    };
-    return AsyncScheduler;
-}(Scheduler));
-var subscribeToArray = function (array) { return function (subscriber) {
-    for (var i = 0, len = array.length; i < len && !subscriber.closed; i++) {
-        subscriber.next(array[i]);
-    }
-    subscriber.complete();
-}; };
-var asyncScheduler = new AsyncScheduler(AsyncAction);
-var async = asyncScheduler;
-function map(project, thisArg) {
-    return function mapOperation(source) {
-        if (typeof project !== 'function') {
-            throw new TypeError('argument is not a function. Are you looking for `mapTo()`?');
-        }
-        return source.lift(new MapOperator(project, thisArg));
-    };
-}
-var MapOperator = /** @class */ (function () {
-    function MapOperator(project, thisArg) {
-        this.project = project;
-        this.thisArg = thisArg;
-    }
-    MapOperator.prototype.call = function (subscriber, source) {
-        return source.subscribe(new MapSubscriber(subscriber, this.project, this.thisArg));
-    };
-    return MapOperator;
-}());
-var MapSubscriber = /** @class */ (function (_super) {
-    __extends(MapSubscriber, _super);
-    function MapSubscriber(destination, project, thisArg) {
-        var _this = _super.call(this, destination) || this;
-        _this.project = project;
-        _this.count = 0;
-        _this.thisArg = thisArg || _this;
-        return _this;
-    }
-    MapSubscriber.prototype._next = function (value) {
-        var result;
-        try {
-            result = this.project.call(this.thisArg, value, this.count++);
-        }
-        catch (err) {
-            this.destination.error(err);
-            return;
-        }
-        this.destination.next(result);
-    };
-    return MapSubscriber;
-}(Subscriber));
-var subscribeToPromise = function (promise) { return function (subscriber) {
-    promise.then(function (value) {
-        if (!subscriber.closed) {
-            subscriber.next(value);
-            subscriber.complete();
-        }
-    }, function (err) { return subscriber.error(err); })
-        .then(null, hostReportError);
-    return subscriber;
-}; };
-function getSymbolIterator() {
-    if (typeof Symbol !== 'function' || !Symbol.iterator) {
-        return '@@iterator';
-    }
-    return Symbol.iterator;
-}
-var iterator = getSymbolIterator();
-var subscribeToIterable = function (iterable) { return function (subscriber) {
-    var iterator$1 = iterable[iterator]();
-    do {
-        var item = void 0;
-        try {
-            item = iterator$1.next();
-        }
-        catch (err) {
-            subscriber.error(err);
-            return subscriber;
-        }
-        if (item.done) {
-            subscriber.complete();
-            break;
-        }
-        subscriber.next(item.value);
-        if (subscriber.closed) {
-            break;
-        }
-    } while (true);
-    if (typeof iterator$1.return === 'function') {
-        subscriber.add(function () {
-            if (iterator$1.return) {
-                iterator$1.return();
-            }
-        });
-    }
-    return subscriber;
-}; };
-var subscribeToObservable = function (obj) { return function (subscriber) {
-    var obs = obj[observable]();
-    if (typeof obs.subscribe !== 'function') {
-        throw new TypeError('Provided object does not correctly implement Symbol.observable');
-    }
-    else {
-        return obs.subscribe(subscriber);
-    }
-}; };
-var isArrayLike = (function (x) { return x && typeof x.length === 'number' && typeof x !== 'function'; });
-function isPromise(value) {
-    return !!value && typeof value.subscribe !== 'function' && typeof value.then === 'function';
-}
-var subscribeTo = function (result) {
-    if (!!result && typeof result[observable] === 'function') {
-        return subscribeToObservable(result);
-    }
-    else if (isArrayLike(result)) {
-        return subscribeToArray(result);
-    }
-    else if (isPromise(result)) {
-        return subscribeToPromise(result);
-    }
-    else if (!!result && typeof result[iterator] === 'function') {
-        return subscribeToIterable(result);
-    }
-    else {
-        var value = isObject(result) ? 'an invalid object' : "'" + result + "'";
-        var msg = "You provided " + value + " where a stream was expected."
-            + ' You can provide an Observable, Promise, Array, or Iterable.';
-        throw new TypeError(msg);
-    }
-};
-var SimpleInnerSubscriber = /** @class */ (function (_super) {
-    __extends(SimpleInnerSubscriber, _super);
-    function SimpleInnerSubscriber(parent) {
-        var _this = _super.call(this) || this;
-        _this.parent = parent;
-        return _this;
-    }
-    SimpleInnerSubscriber.prototype._next = function (value) {
-        this.parent.notifyNext(value);
-    };
-    SimpleInnerSubscriber.prototype._error = function (error) {
-        this.parent.notifyError(error);
-        this.unsubscribe();
-    };
-    SimpleInnerSubscriber.prototype._complete = function () {
-        this.parent.notifyComplete();
-        this.unsubscribe();
-    };
-    return SimpleInnerSubscriber;
-}(Subscriber));
-var SimpleOuterSubscriber = /** @class */ (function (_super) {
-    __extends(SimpleOuterSubscriber, _super);
-    function SimpleOuterSubscriber() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    SimpleOuterSubscriber.prototype.notifyNext = function (innerValue) {
-        this.destination.next(innerValue);
-    };
-    SimpleOuterSubscriber.prototype.notifyError = function (err) {
-        this.destination.error(err);
-    };
-    SimpleOuterSubscriber.prototype.notifyComplete = function () {
-        this.destination.complete();
-    };
-    return SimpleOuterSubscriber;
-}(Subscriber));
-function innerSubscribe(result, innerSubscriber) {
-    if (innerSubscriber.closed) {
-        return undefined;
-    }
-    if (result instanceof Observable) {
-        return result.subscribe(innerSubscriber);
-    }
-    return subscribeTo(result)(innerSubscriber);
-}
-function fromEvent(target, eventName, options, resultSelector) {
-    if (isFunction(options)) {
-        resultSelector = options;
-        options = undefined;
-    }
-    if (resultSelector) {
-        return fromEvent(target, eventName, options).pipe(map(function (args) { return isArray(args) ? resultSelector.apply(void 0, args) : resultSelector(args); }));
-    }
-    return new Observable(function (subscriber) {
-        function handler(e) {
-            if (arguments.length > 1) {
-                subscriber.next(Array.prototype.slice.call(arguments));
-            }
-            else {
-                subscriber.next(e);
-            }
-        }
-        setupSubscription(target, eventName, handler, subscriber, options);
-    });
-}
-function setupSubscription(sourceObj, eventName, handler, subscriber, options) {
-    var unsubscribe;
-    if (isEventTarget(sourceObj)) {
-        var source_1 = sourceObj;
-        sourceObj.addEventListener(eventName, handler, options);
-        unsubscribe = function () { return source_1.removeEventListener(eventName, handler, options); };
-    }
-    else if (isJQueryStyleEventEmitter(sourceObj)) {
-        var source_2 = sourceObj;
-        sourceObj.on(eventName, handler);
-        unsubscribe = function () { return source_2.off(eventName, handler); };
-    }
-    else if (isNodeStyleEventEmitter(sourceObj)) {
-        var source_3 = sourceObj;
-        sourceObj.addListener(eventName, handler);
-        unsubscribe = function () { return source_3.removeListener(eventName, handler); };
-    }
-    else if (sourceObj && sourceObj.length) {
-        for (var i = 0, len = sourceObj.length; i < len; i++) {
-            setupSubscription(sourceObj[i], eventName, handler, subscriber, options);
+                else {
+                    // reveal element in viewport
+                    w.scrollBy({
+                        left: clientRects.left,
+                        top: clientRects.top,
+                        behavior: 'smooth'
+                    });
+                }
+            };
         }
-    }
-    else {
-        throw new TypeError('Invalid event target');
-    }
-    subscriber.add(unsubscribe);
-}
-function isNodeStyleEventEmitter(sourceObj) {
-    return sourceObj && typeof sourceObj.addListener === 'function' && typeof sourceObj.removeListener === 'function';
+        {
+            // commonjs
+            module.exports = { polyfill: polyfill };
+        }
+    }());
+});
+var stylesCss = "*{-webkit-box-sizing:border-box;box-sizing:border-box}*:active{outline:none}*:focus{outline:none;-webkit-box-shadow:var(--const-global-focus);box-shadow:var(--const-global-focus)}:host{-webkit-box-shadow:none !important;box-shadow:none !important}::-moz-focus-inner{border:none}input,button{font-family:inherit;font-size:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}.tab-container{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.tab-list{padding:0;display:-ms-flexbox;display:flex;margin:0;list-style:none;border-bottom:1px solid\n        var(--tct-tab-container-border-color, var(--tct-gray-l1, var(--app-gray-l1, #cccccc)));white-space:nowrap;overflow-x:hidden;-ms-flex-align:center;align-items:center}.tab-list li.nav{position:absolute;height:44px;width:46px}.tab-list li.nav-left{left:-15px;background:-webkit-gradient(linear, left top, right top, color-stop(60%, var(--tct-section-bg, var(--t-section-bg, #ffffff))), to(rgba(255,255,255,0)));background:linear-gradient(to right, var(--tct-section-bg, var(--t-section-bg, #ffffff)) 60%, rgba(255,255,255,0))}.tab-list li.nav-right{right:-15px;background:-webkit-gradient(linear, right top, left top, color-stop(60%, var(--tct-section-bg, var(--t-section-bg, #ffffff))), to(rgba(255,255,255,0)));background:linear-gradient(to left, var(--tct-section-bg, var(--t-section-bg, #ffffff)) 60%, rgba(255,255,255,0))}.tab-list li.nav .arrow-container{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;height:inherit;width:inherit;cursor:pointer}.tab-list li.nav .arrow-container a{padding:0;margin:0;height:inherit;width:inherit;border-bottom:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.tab-list li.nav .arrow-container a q2-icon{width:19px;height:19px}.tab-list a{width:var(--tct-tab-hover-width, var(--t-tab-hover-width, 100%));text-align:center;text-decoration:none;padding:var(--tct-scale-2, var(--app-scale-2, 10px));margin:var(--tct-scale-1, var(--app-scale-1, 5px)) var(--tct-scale-1, var(--app-scale-1, 5px))\n        0;color:var(--tct-tab-inactive-color, var(--t-tab-inactive, inherit));font-size:var(--tct-tab-font-size, var(--t-tab-font-size, 17px));border-bottom:3px solid transparent;display:block;-webkit-transition:color var(--tct-tween-2, var(--app-tween-2, 0.4s ease)),\n        border-color var(--tct-tween-1, var(--app-tween-1, 0.2s ease));transition:color var(--tct-tween-2, var(--app-tween-2, 0.4s ease)),\n        border-color var(--tct-tween-1, var(--app-tween-1, 0.2s ease))}:host([type='section']) .tab-list a{font-size:inherit;padding:var(--tct-scale-2, var(--app-scale-2, 10px))\n        var(--tct-scale-1, var(--app-scale-1, 5px))}@media screen and (max-width: 767px){.tab-list a{font-size:inherit;padding:var(--tct-scale-2, var(--app-scale-2, 10px))\n            var(--tct-scale-1, var(--app-scale-1, 5px))}}.tab-list a:hover{color:var(--tct-tab-active-color, var(--t-tab-active, #2e2e2e));background-color:var(--tct-tab-hover-bg-color, var(--t-tab-hover-bg-color, inherit));width:var(--tct-tab-hover-width, var(--t-tab-hover-width, 100%))}.tab-list a[aria-selected='true']{color:var(--tct-tab-active-color, var(--t-tab-active, #2e2e2e));border-color:currentColor;width:var(--tct-tab-active-width, var(--t-tab-active-width, 100%));background-color:var(--tct-tab-active-bg-color, var(--t-tab-active-bg-color, inherit))}:host([color='alt']) .tab-list a{color:var(--tct-tab-alt-inactive-color, var(--t-tab-alt-inactive, inherit))}:host([color='alt']) .tab-list a:hover,:host([color='alt']) .tab-list a[aria-selected='true']{color:var(--tct-tab-alt-active-color, var(--t-tab-alt-active, inherit))}.tab-content{padding:var(--tct-scale-2, var(--app-scale-2, 10px)) 0}";
+// enable scroll animation polyfill only on safari
+var userAgent = navigator.userAgent.toLowerCase();
+var isSafari = userAgent.includes('safari') && !userAgent.includes('chrome');
+var isFirefox = userAgent.includes('firefox');
+if (isSafari) {
+    // smooth scroll is not supported on safari
+    smoothscroll.polyfill();
+    window['__forceSmoothScrollPolyfill__'] = true;
 }
-function isJQueryStyleEventEmitter(sourceObj) {
-    return sourceObj && typeof sourceObj.on === 'function' && typeof sourceObj.off === 'function';
-}
-function isEventTarget(sourceObj) {
-    return sourceObj && typeof sourceObj.addEventListener === 'function' && typeof sourceObj.removeEventListener === 'function';
-}
-function isNumeric(val) {
-    return !isArray(val) && (val - parseFloat(val) + 1) >= 0;
-}
-function interval(period, scheduler) {
-    if (period === void 0) { period = 0; }
-    if (scheduler === void 0) { scheduler = async; }
-    if (!isNumeric(period) || period < 0) {
-        period = 0;
-    }
-    if (!scheduler || typeof scheduler.schedule !== 'function') {
-        scheduler = async;
-    }
-    return new Observable(function (subscriber) {
-        subscriber.add(scheduler.schedule(dispatch, period, { subscriber: subscriber, counter: 0, period: period }));
-        return subscriber;
-    });
-}
-function dispatch(state) {
-    var subscriber = state.subscriber, counter = state.counter, period = state.period;
-    subscriber.next(counter);
-    this.schedule({ subscriber: subscriber, counter: counter + 1, period: period }, period);
-}
-function debounce(durationSelector) {
-    return function (source) { return source.lift(new DebounceOperator(durationSelector)); };
-}
-var DebounceOperator = /** @class */ (function () {
-    function DebounceOperator(durationSelector) {
-        this.durationSelector = durationSelector;
-    }
-    DebounceOperator.prototype.call = function (subscriber, source) {
-        return source.subscribe(new DebounceSubscriber(subscriber, this.durationSelector));
-    };
-    return DebounceOperator;
-}());
-var DebounceSubscriber = /** @class */ (function (_super) {
-    __extends(DebounceSubscriber, _super);
-    function DebounceSubscriber(destination, durationSelector) {
-        var _this = _super.call(this, destination) || this;
-        _this.durationSelector = durationSelector;
-        _this.hasValue = false;
-        return _this;
-    }
-    DebounceSubscriber.prototype._next = function (value) {
-        try {
-            var result = this.durationSelector.call(this, value);
-            if (result) {
-                this._tryNext(value, result);
-            }
-        }
-        catch (err) {
-            this.destination.error(err);
-        }
-    };
-    DebounceSubscriber.prototype._complete = function () {
-        this.emitValue();
-        this.destination.complete();
-    };
-    DebounceSubscriber.prototype._tryNext = function (value, duration) {
-        var subscription = this.durationSubscription;
-        this.value = value;
-        this.hasValue = true;
-        if (subscription) {
-            subscription.unsubscribe();
-            this.remove(subscription);
-        }
-        subscription = innerSubscribe(duration, new SimpleInnerSubscriber(this));
-        if (subscription && !subscription.closed) {
-            this.add(this.durationSubscription = subscription);
-        }
-    };
-    DebounceSubscriber.prototype.notifyNext = function () {
-        this.emitValue();
-    };
-    DebounceSubscriber.prototype.notifyComplete = function () {
-        this.emitValue();
-    };
-    DebounceSubscriber.prototype.emitValue = function () {
-        if (this.hasValue) {
-            var value = this.value;
-            var subscription = this.durationSubscription;
-            if (subscription) {
-                this.durationSubscription = undefined;
-                subscription.unsubscribe();
-                this.remove(subscription);
-            }
-            this.value = undefined;
-            this.hasValue = false;
-            _super.prototype._next.call(this, value);
-        }
-    };
-    return DebounceSubscriber;
-}(SimpleOuterSubscriber));
-var stylesCss = "*{-webkit-box-sizing:border-box;box-sizing:border-box}*:active{outline:none}*:focus{outline:none;-webkit-box-shadow:var(--const-global-focus);box-shadow:var(--const-global-focus)}:host{-webkit-box-shadow:none !important;box-shadow:none !important}::-moz-focus-inner{border:none}input,button{font-family:inherit;font-size:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}.tab-container{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.tab-list{padding:0;display:-ms-flexbox;display:flex;margin:0;list-style:none;border-bottom:1px solid\n        var(--tct-tab-container-border-color, var(--tct-gray-l1, var(--app-gray-l1, #cccccc)));white-space:nowrap;overflow-x:hidden;-ms-flex-align:center;align-items:center}.tab-list li.nav{position:absolute;height:44px;width:46px}.tab-list li.nav-left{left:-15px;background:-webkit-gradient(linear, left top, right top, color-stop(60%, var(--tct-section-bg, var(--t-section-bg, #ffffff))), to(transparent));background:linear-gradient(to right, var(--tct-section-bg, var(--t-section-bg, #ffffff)) 60%, transparent)}.tab-list li.nav-right{right:-15px;background:-webkit-gradient(linear, right top, left top, color-stop(60%, var(--tct-section-bg, var(--t-section-bg, #ffffff))), to(transparent));background:linear-gradient(to left, var(--tct-section-bg, var(--t-section-bg, #ffffff)) 60%, transparent)}.tab-list li.nav .arrow-container{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;height:inherit;width:inherit;cursor:pointer}.tab-list li.nav .arrow-container a{padding:0;margin:0;height:inherit;width:inherit;border-bottom:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.tab-list li.nav .arrow-container a q2-icon{width:19px;height:19px}.tab-list a{text-decoration:none;padding:var(--tct-scale-2, var(--app-scale-2, 10px));margin:var(--tct-scale-1, var(--app-scale-1, 5px)) var(--tct-scale-1, var(--app-scale-1, 5px))\n        0;color:var(--tct-tab-inactive-color, var(--t-tab-inactive, inherit));font-size:var(--tct-tab-font-size, var(--t-tab-font-size, 17px));border-bottom:3px solid transparent;display:block;-webkit-transition:color var(--tct-tween-2, var(--app-tween-2, 0.4s ease)),\n        border-color var(--tct-tween-1, var(--app-tween-1, 0.2s ease));transition:color var(--tct-tween-2, var(--app-tween-2, 0.4s ease)),\n        border-color var(--tct-tween-1, var(--app-tween-1, 0.2s ease))}:host([type='section']) .tab-list a{font-size:inherit;padding:var(--tct-scale-2, var(--app-scale-2, 10px))\n        var(--tct-scale-1, var(--app-scale-1, 5px))}@media screen and (max-width: 767px){.tab-list a{font-size:inherit;padding:var(--tct-scale-2, var(--app-scale-2, 10px))\n            var(--tct-scale-1, var(--app-scale-1, 5px))}}.tab-list a:hover{color:var(--tct-tab-active-color, var(--t-tab-active, #2e2e2e));background-color:var(--tct-tab-hover-bg-color, var(--t-tab-hover-bg-color, inherit));width:var(--tct-tab-hover-width, var(--t-tab-hover-width, 100%))}.tab-list a[aria-selected='true']{color:var(--tct-tab-active-color, var(--t-tab-active, #2e2e2e));border-color:currentColor;width:var(--tct-tab-active-width, var(--t-tab-active-width, 100%));background-color:var(--tct-tab-active-bg-color, var(--t-tab-active-bg-color, inherit))}:host([color='alt']) .tab-list a{color:var(--tct-tab-alt-inactive-color, var(--t-tab-alt-inactive, inherit))}:host([color='alt']) .tab-list a:hover,:host([color='alt']) .tab-list a[aria-selected='true']{color:var(--tct-tab-alt-active-color, var(--t-tab-alt-active, inherit))}.tab-content{padding:var(--tct-scale-2, var(--app-scale-2, 10px)) 0}";
 var Q2TabContainer = /** @class */ (function () {
     function Q2TabContainer(hostRef) {
         var _this = this;
@@ -1062,16 +365,9 @@ var Q2TabContainer = /** @class */ (function () {
         this.settled = createEvent(this, "settled", 7);
         this.guid = createGuid();
         this.scheduledAfterRender = [];
+        this.lastScrolled = new Date(null).getTime();
         this.hasLeft = false;
         this.hasRight = false;
-        this.initTabScroll = function () {
-            var tabList = _this.hostElement.shadowRoot.querySelector('.tab-list');
-            if (tabList) {
-                var scrollWidth = tabList.scrollWidth, clientWidth = tabList.clientWidth, scrollLeft = tabList.scrollLeft;
-                _this.hasLeft = scrollLeft > 0;
-                _this.hasRight = scrollWidth > clientWidth;
-            }
-        };
         ///////// Actions /////////
         this.updateTabData = function () {
             _this.updateTabPaneProps();
@@ -1108,38 +404,81 @@ var Q2TabContainer = /** @class */ (function () {
                 _this.moveToAdjacentTab(value, 'prev');
                 return;
             }
+            if (event.code === 'Space' || event.code === 'Enter') {
+                // to prevent triggering scroll when press the space key
+                event.preventDefault();
+                _this.change.emit({ value: value });
+                return;
+            }
         };
         this.moveToAdjacentTab = function (value, direction) {
             var index = _this.tabs.map(function (_a) {
                 var value = _a.value;
                 return value;
             }).indexOf(value);
-            var indexUpdated = false;
-            if (direction === 'next' && index !== _this.tabs.length - 1) {
-                index = index + 1;
-                indexUpdated = true;
-            }
-            if (direction === 'prev' && index !== 0) {
-                index = index - 1;
-                indexUpdated = true;
+            var newIndex = direction === 'next'
+                ? Math.min(index + 1, _this.tabs.length - 1)
+                : Math.max(index - 1, 0);
+            if (index !== newIndex) {
+                var focusedTab = _this.moveFocus(newIndex);
+                // Scroll only if it overflows
+                if (_this.tabList.scrollWidth > _this.tabList.clientWidth) {
+                    // Scroll only if it's first or last tab
+                    if (newIndex !== 0 && newIndex !== _this.tabs.length - 1) {
+                        _this.scrollByKeyboard(direction, focusedTab);
+                    }
+                    else {
+                        // first or last element: just show or hide nav arrow
+                        _this.onTabScroll(direction);
+                    }
+                }
             }
-            if (indexUpdated) {
-                var value_1 = _this.tabs[index].value;
-                _this.hostElement.shadowRoot
-                    .querySelector(".tab-list a[data-value=\"" + value_1 + "\"]")
-                    .focus();
-                _this.change.emit({ value: value_1 });
+        };
+        this.moveFocus = function (index) {
+            var focusedValue = _this.tabs[index].value;
+            var focusedTab = _this.hostElement.shadowRoot.querySelector(".tab-list a[data-value=\"" + focusedValue + "\"]");
+            focusedTab.focus({ preventScroll: true });
+            return focusedTab;
+        };
+        this.calculateKeyboardScroll = function (direction, focusedTab) {
+            var tabListLeft = _this.tabList.getBoundingClientRect().left;
+            var focusedTabLeft = focusedTab.getBoundingClientRect().left;
+            var arrowWidth = 46;
+            var scrollAmount = 0;
+            // check how much focused tab overflows
+            if (direction === 'next' &&
+                focusedTabLeft + focusedTab.clientWidth >
+                    tabListLeft + _this.tabList.clientWidth + arrowWidth) {
+                scrollAmount =
+                    _this.tabList.scrollLeft +
+                        arrowWidth +
+                        (focusedTabLeft + focusedTab.clientWidth) -
+                        (tabListLeft + _this.tabList.clientWidth);
+            }
+            else if (direction === 'prev' && focusedTabLeft + arrowWidth < tabListLeft) {
+                scrollAmount = _this.tabList.scrollLeft - arrowWidth + (focusedTabLeft - tabListLeft);
+            }
+            return scrollAmount;
+        };
+        this.scrollByKeyboard = function (direction, focusedTab) {
+            var scrollAmount = _this.calculateKeyboardScroll(direction, focusedTab);
+            if (scrollAmount !== 0) {
+                _this.tabList.scroll({ left: scrollAmount, behavior: 'smooth' });
+                // wait to finish scroll then show or hide nav arrow
+                setTimeout(function () { return _this.onTabScroll(); }, 100);
             }
         };
         this.calculateTabScroll = function (_a) {
             var direction = _a.direction, scrollWidth = _a.scrollWidth, clientWidth = _a.clientWidth, scrollLeft = _a.scrollLeft;
+            var directions = { prev: -1, next: 1 };
+            // step 0 means no scroll needed, re-render or resize can trigger this
+            var step = directions[direction] || 0;
             var scrollRate = 0.5; // half of visual width
-            var step = direction === 'left' ? -1 : 1;
             var delta = Math.round(clientWidth * scrollRate);
             var newScrollLeft = scrollLeft + step * delta;
             var scrolled = clientWidth + newScrollLeft;
             var hasLeft = newScrollLeft > 0;
-            var hasRight = scrollWidth >= scrolled;
+            var hasRight = scrollWidth > scrolled;
             return {
                 newScrollLeft: newScrollLeft,
                 hasLeft: hasLeft,
@@ -1147,17 +486,25 @@ var Q2TabContainer = /** @class */ (function () {
             };
         };
         this.onTabScroll = function (direction) {
-            var tabList = _this.hostElement.shadowRoot.querySelector('.tab-list');
-            var scrollWidth = tabList.scrollWidth, clientWidth = tabList.clientWidth, scrollLeft = tabList.scrollLeft;
-            var _a = _this.calculateTabScroll({
+            // throttle under 50ms due to re-rendering & resizing
+            var now = new Date().getTime();
+            if (now - _this.lastScrolled < 50)
+                return;
+            _this.lastScrolled = now;
+            if (!_this.tabList)
+                return;
+            var _a = _this.tabList, scrollWidth = _a.scrollWidth, clientWidth = _a.clientWidth, scrollLeft = _a.scrollLeft;
+            var _b = _this.calculateTabScroll({
                 direction: direction,
                 scrollWidth: scrollWidth,
                 clientWidth: clientWidth,
                 scrollLeft: scrollLeft
-            }), newScrollLeft = _a.newScrollLeft, hasLeft = _a.hasLeft, hasRight = _a.hasRight;
+            }), newScrollLeft = _b.newScrollLeft, hasLeft = _b.hasLeft, hasRight = _b.hasRight;
             _this.hasLeft = hasLeft;
             _this.hasRight = hasRight;
-            tabList.scroll({ left: newScrollLeft, behavior: 'smooth' });
+            if (direction) {
+                _this.tabList.scroll({ left: newScrollLeft, behavior: 'smooth' });
+            }
         };
     }
     Q2TabContainer.prototype.loc = function (key, subs) {
@@ -1189,12 +536,30 @@ var Q2TabContainer = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(Q2TabContainer.prototype, "tabList", {
+        get: function () {
+            return this.hostElement.shadowRoot.querySelector('.tab-list');
+        },
+        enumerable: false,
+        configurable: true
+    });
     ///////// Default Handler /////////
     Q2TabContainer.prototype.defaultChangeHandler = function (event) {
         if (event.target === this.hostElement && !this.hostElement.onchange) {
             this.value = event.detail.value;
         }
     };
+    Q2TabContainer.prototype.onResize = function () {
+        this.onTabScroll();
+    };
+    Q2TabContainer.prototype.onFocus = function () {
+        var _this = this;
+        // firefox receives focus on overflowed element even if it's not interactive element
+        if (isFirefox) {
+            var index = this.tabs.findIndex(function (el) { return el.value === _this.selectedTabValue; });
+            this.moveFocus(index);
+        }
+    };
     ///////// Lifecycle Hooks /////////
     Q2TabContainer.prototype.componentWillLoad = function () {
         var observer = new MutationObserver(this.updateTabData);
@@ -1206,18 +571,11 @@ var Q2TabContainer = /** @class */ (function () {
         this.scheduledAfterRender.forEach(function (fn) { return fn(); });
         this.scheduledAfterRender = [];
         this.settled.emit();
-        if (!this.resizeSubscription) {
-            this.initTabScroll();
-            this.resizeSubscription = fromEvent(window, 'resize')
-                .pipe(debounce(function () { return interval(200); }))
-                .subscribe(this.initTabScroll);
-        }
+        this.onTabScroll();
     };
     Q2TabContainer.prototype.disconnectedCallback = function () {
         this.mutationObserver.disconnect();
         this.mutationObserver = null;
-        this.resizeSubscription.unsubscribe();
-        this.resizeSubscription = null;
     };
     ///////// Observers /////////
     Q2TabContainer.prototype.valueObserver = function () {
@@ -1230,7 +588,7 @@ var Q2TabContainer = /** @class */ (function () {
     ///////// View Methods /////////
     Q2TabContainer.prototype.render = function () {
         var _this = this;
-        return (h("div", { class: "tab-container" }, h("ul", { class: "tab-list", role: "tablist" }, this.hasLeft && (h("li", { role: "presentation", class: "nav nav-left", onClick: function () { return _this.onTabScroll('left'); } }, h("div", { class: "arrow-container" }, h("a", null, h("q2-icon", { type: "chevron-left" }))))), this.tabs.map(function (tab, index) { return _this.generateTab(tab, index); }), this.hasRight && (h("li", { role: "presentation", class: "nav nav-right", onClick: function () { return _this.onTabScroll('right'); } }, h("div", { class: "arrow-container" }, h("a", null, h("q2-icon", { type: "chevron-right" })))))), h("div", { class: "tab-content" }, h("slot", null))));
+        return (h("div", { class: "tab-container" }, h("ul", { class: "tab-list", role: "tablist" }, this.hasLeft && (h("li", { role: "presentation", class: "nav nav-left", onClick: function () { return _this.onTabScroll('prev'); } }, h("div", { class: "arrow-container" }, h("a", null, h("q2-icon", { type: "chevron-left" }))))), this.tabs.map(function (tab, index) { return _this.generateTab(tab, index); }), this.hasRight && (h("li", { role: "presentation", class: "nav nav-right", onClick: function () { return _this.onTabScroll('next'); } }, h("div", { class: "arrow-container" }, h("a", null, h("q2-icon", { type: "chevron-right" })))))), h("div", { class: "tab-content" }, h("slot", null))));
     };
     Q2TabContainer.prototype.generateTab = function (tab, index) {
         var label = tab.label, value = tab.value;