@skyux/core 7.0.0 → 7.1.0

package/fesm2020/skyux-core.mjs

@@ -3112,7 +3112,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImpo
             type: Injectable
         }] });
 
-var _SkyViewkeeper_instances, _SkyViewkeeper_boundaryEl, _SkyViewkeeper_el, _SkyViewkeeper_id, _SkyViewkeeper_setWidth, _SkyViewkeeper_verticalOffset, _SkyViewkeeper_verticalOffsetEl, _SkyViewkeeper_viewportMarginTop, _SkyViewkeeper_currentElFixedLeft, _SkyViewkeeper_currentElFixedTop, _SkyViewkeeper_currentElFixedWidth, _SkyViewkeeper_isDestroyed, _SkyViewkeeper_scrollableHost, _SkyViewkeeper_syncElPositionHandler, _SkyViewkeeper_getSpacerId, _SkyViewkeeper_unfixEl, _SkyViewkeeper_calculateVerticalOffset, _SkyViewkeeper_shouldFixEl, _SkyViewkeeper_getFixedStyles, _SkyViewkeeper_needsUpdating, _SkyViewkeeper_fixEl, _SkyViewkeeper_getBoundaryInfo;
+var _SkyViewkeeper_instances, _SkyViewkeeper_boundaryEl, _SkyViewkeeper_el, _SkyViewkeeper_id, _SkyViewkeeper_setWidth, _SkyViewkeeper_verticalOffset, _SkyViewkeeper_verticalOffsetEl, _SkyViewkeeper_viewportMarginTop, _SkyViewkeeper_currentElFixedLeft, _SkyViewkeeper_currentElFixedTop, _SkyViewkeeper_currentElFixedWidth, _SkyViewkeeper_currentElClipLeft, _SkyViewkeeper_currentElClipTop, _SkyViewkeeper_isDestroyed, _SkyViewkeeper_scrollableHost, _SkyViewkeeper_syncElPositionHandler, _SkyViewkeeper_intersectionObserver, _SkyViewkeeper_getSpacerId, _SkyViewkeeper_unfixEl, _SkyViewkeeper_calculateVerticalOffset, _SkyViewkeeper_shouldFixEl, _SkyViewkeeper_getFixedStyles, _SkyViewkeeper_needsUpdating, _SkyViewkeeper_fixEl, _SkyViewkeeper_getBoundaryInfo;
 const CLS_VIEWKEEPER_FIXED = 'sky-viewkeeper-fixed';
 const EVT_AFTER_VIEWKEEPER_SYNC = 'afterViewkeeperSync';
 let styleEl;
@@ -3156,10 +3156,12 @@ function px(value) {
     }
     return pxValue;
 }
-function setElPosition(el, left, top, width, marginTop) {
+function setElPosition(el, left, top, width, marginTop, clipTop, clipLeft) {
     el.style.top = px(top);
     el.style.left = px(left);
     el.style.marginTop = px(marginTop);
+    el.style.clipPath =
+        clipTop || clipLeft ? `inset(${px(clipTop)} 0 0 ${px(clipLeft)})` : 'none';
     /*istanbul ignore else*/
     /* sanity check */
     if (width !== null) {
@@ -3190,9 +3192,12 @@ class SkyViewkeeper {
         _SkyViewkeeper_currentElFixedLeft.set(this, void 0);
         _SkyViewkeeper_currentElFixedTop.set(this, void 0);
         _SkyViewkeeper_currentElFixedWidth.set(this, void 0);
+        _SkyViewkeeper_currentElClipLeft.set(this, void 0);
+        _SkyViewkeeper_currentElClipTop.set(this, void 0);
         _SkyViewkeeper_isDestroyed.set(this, false);
         _SkyViewkeeper_scrollableHost.set(this, void 0);
         _SkyViewkeeper_syncElPositionHandler.set(this, void 0);
+        _SkyViewkeeper_intersectionObserver.set(this, void 0);
         options = options || /* istanbul ignore next */ {};
         __classPrivateFieldSet(this, _SkyViewkeeper_el, options.el, "f");
         __classPrivateFieldSet(this, _SkyViewkeeper_boundaryEl, options.boundaryEl, "f");
@@ -3245,6 +3250,7 @@ class SkyViewkeeper {
     }
     destroy() {
         if (!__classPrivateFieldGet(this, _SkyViewkeeper_isDestroyed, "f")) {
+            __classPrivateFieldGet(this, _SkyViewkeeper_intersectionObserver, "f")?.disconnect();
             window.removeEventListener('scroll', __classPrivateFieldGet(this, _SkyViewkeeper_syncElPositionHandler, "f"), true);
             window.removeEventListener('resize', __classPrivateFieldGet(this, _SkyViewkeeper_syncElPositionHandler, "f"));
             window.removeEventListener('orientationchange', __classPrivateFieldGet(this, _SkyViewkeeper_syncElPositionHandler, "f"));
@@ -3259,7 +3265,7 @@ class SkyViewkeeper {
         }
     }
 }
-_SkyViewkeeper_boundaryEl = new WeakMap(), _SkyViewkeeper_el = new WeakMap(), _SkyViewkeeper_id = new WeakMap(), _SkyViewkeeper_setWidth = new WeakMap(), _SkyViewkeeper_verticalOffset = new WeakMap(), _SkyViewkeeper_verticalOffsetEl = new WeakMap(), _SkyViewkeeper_viewportMarginTop = new WeakMap(), _SkyViewkeeper_currentElFixedLeft = new WeakMap(), _SkyViewkeeper_currentElFixedTop = new WeakMap(), _SkyViewkeeper_currentElFixedWidth = new WeakMap(), _SkyViewkeeper_isDestroyed = new WeakMap(), _SkyViewkeeper_scrollableHost = new WeakMap(), _SkyViewkeeper_syncElPositionHandler = new WeakMap(), _SkyViewkeeper_instances = new WeakSet(), _SkyViewkeeper_getSpacerId = function _SkyViewkeeper_getSpacerId() {
+_SkyViewkeeper_boundaryEl = new WeakMap(), _SkyViewkeeper_el = new WeakMap(), _SkyViewkeeper_id = new WeakMap(), _SkyViewkeeper_setWidth = new WeakMap(), _SkyViewkeeper_verticalOffset = new WeakMap(), _SkyViewkeeper_verticalOffsetEl = new WeakMap(), _SkyViewkeeper_viewportMarginTop = new WeakMap(), _SkyViewkeeper_currentElFixedLeft = new WeakMap(), _SkyViewkeeper_currentElFixedTop = new WeakMap(), _SkyViewkeeper_currentElFixedWidth = new WeakMap(), _SkyViewkeeper_currentElClipLeft = new WeakMap(), _SkyViewkeeper_currentElClipTop = new WeakMap(), _SkyViewkeeper_isDestroyed = new WeakMap(), _SkyViewkeeper_scrollableHost = new WeakMap(), _SkyViewkeeper_syncElPositionHandler = new WeakMap(), _SkyViewkeeper_intersectionObserver = new WeakMap(), _SkyViewkeeper_instances = new WeakSet(), _SkyViewkeeper_getSpacerId = function _SkyViewkeeper_getSpacerId() {
     return __classPrivateFieldGet(this, _SkyViewkeeper_id, "f") + '-spacer';
 }, _SkyViewkeeper_unfixEl = function _SkyViewkeeper_unfixEl(el) {
     const spacerEl = document.getElementById(__classPrivateFieldGet(this, _SkyViewkeeper_instances, "m", _SkyViewkeeper_getSpacerId).call(this));
@@ -3273,7 +3279,7 @@ _SkyViewkeeper_boundaryEl = new WeakMap(), _SkyViewkeeper_el = new WeakMap(), _S
     if (__classPrivateFieldGet(this, _SkyViewkeeper_setWidth, "f")) {
         width = 'auto';
     }
-    setElPosition(el, '', '', width, '');
+    setElPosition(el, '', '', width, '', 0, 0);
 }, _SkyViewkeeper_calculateVerticalOffset = function _SkyViewkeeper_calculateVerticalOffset() {
     let offset = __classPrivateFieldGet(this, _SkyViewkeeper_verticalOffset, "f");
     if (__classPrivateFieldGet(this, _SkyViewkeeper_verticalOffsetEl, "f")) {
@@ -3301,20 +3307,27 @@ _SkyViewkeeper_boundaryEl = new WeakMap(), _SkyViewkeeper_el = new WeakMap(), _S
     // will be 0 (fully visible) unless the user is scrolling the boundary out of view.
     // In that case, the element should begin to scroll out of view with the
     // rest of the boundary by setting its top position to a negative value.
-    const elFixedTop = Math.min(boundaryInfo.boundaryBottom -
+    const elTop = boundaryInfo.boundaryBottom -
         boundaryInfo.elHeight -
-        boundaryInfo.scrollTop, verticalOffset);
+        boundaryInfo.scrollTop;
+    const elClipTop = elTop < verticalOffset ? verticalOffset - elTop : 0;
+    const elFixedTop = Math.min(elTop, verticalOffset);
     const elFixedWidth = boundaryInfo.boundaryEl.getBoundingClientRect().width;
     const elFixedLeft = boundaryInfo.boundaryOffset.left - boundaryInfo.scrollLeft;
+    const elClipLeft = elFixedLeft < 0 ? 0 - elFixedLeft : 0;
     return {
         elFixedLeft,
         elFixedTop,
         elFixedWidth,
+        elClipLeft,
+        elClipTop,
     };
 }, _SkyViewkeeper_needsUpdating = function _SkyViewkeeper_needsUpdating(doFixEl, fixedStyles) {
     if ((doFixEl &&
         __classPrivateFieldGet(this, _SkyViewkeeper_currentElFixedLeft, "f") === fixedStyles.elFixedLeft &&
         __classPrivateFieldGet(this, _SkyViewkeeper_currentElFixedTop, "f") === fixedStyles.elFixedTop &&
+        __classPrivateFieldGet(this, _SkyViewkeeper_currentElClipLeft, "f") === fixedStyles.elClipLeft &&
+        __classPrivateFieldGet(this, _SkyViewkeeper_currentElClipTop, "f") === fixedStyles.elClipTop &&
         __classPrivateFieldGet(this, _SkyViewkeeper_currentElFixedWidth, "f") === fixedStyles.elFixedWidth) ||
         (!doFixEl &&
             !(__classPrivateFieldGet(this, _SkyViewkeeper_currentElFixedLeft, "f") !== undefined &&
@@ -3341,12 +3354,14 @@ _SkyViewkeeper_boundaryEl = new WeakMap(), _SkyViewkeeper_el = new WeakMap(), _S
     el.classList.add(CLS_VIEWKEEPER_FIXED);
     __classPrivateFieldSet(this, _SkyViewkeeper_currentElFixedTop, fixedStyles.elFixedTop, "f");
     __classPrivateFieldSet(this, _SkyViewkeeper_currentElFixedLeft, fixedStyles.elFixedLeft, "f");
+    __classPrivateFieldSet(this, _SkyViewkeeper_currentElClipTop, fixedStyles.elClipTop, "f");
+    __classPrivateFieldSet(this, _SkyViewkeeper_currentElClipLeft, fixedStyles.elClipLeft, "f");
     __classPrivateFieldSet(this, _SkyViewkeeper_currentElFixedWidth, fixedStyles.elFixedWidth, "f");
     let width = 0;
     if (__classPrivateFieldGet(this, _SkyViewkeeper_setWidth, "f")) {
         width = fixedStyles.elFixedWidth;
     }
-    setElPosition(el, fixedStyles.elFixedLeft, fixedStyles.elFixedTop, width, __classPrivateFieldGet(this, _SkyViewkeeper_viewportMarginTop, "f"));
+    setElPosition(el, fixedStyles.elFixedLeft, fixedStyles.elFixedTop, width, __classPrivateFieldGet(this, _SkyViewkeeper_viewportMarginTop, "f"), fixedStyles.elClipTop, fixedStyles.elClipLeft);
 }, _SkyViewkeeper_getBoundaryInfo = function _SkyViewkeeper_getBoundaryInfo(el, boundaryEl) {
     const spacerId = __classPrivateFieldGet(this, _SkyViewkeeper_instances, "m", _SkyViewkeeper_getSpacerId).call(this);
     const spacerEl = document.getElementById(spacerId);