@skyux/core 12.0.0-alpha.2 → 12.0.0-alpha.4

package/fesm2022/skyux-core.mjs

@@ -1060,7 +1060,12 @@ class SkyContentInfoProvider {
     getInfo() {
         return this.#contentInfo.asObservable();
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyContentInfoProvider, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyContentInfoProvider }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyContentInfoProvider, decorators: [{
+            type: Injectable
+        }] });
 
 /**
  * @internal
@@ -1138,6 +1143,7 @@ var SkyDockLocation;
 
 /**
  * @deprecated The `SkyDockModule` is no longer needed and can be removed from your application.
+ * @internal
  */
 class SkyDockModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDockModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
@@ -1385,7 +1391,7 @@ class SkyDockDomAdapterService {
         }
         // Create a style element to avoid overwriting any existing inline body styles.
         const styleElement = this.#renderer.createElement('style');
-        const textNode = this.#renderer.createText(`body { margin-bottom: ${dockHeight}px; }`);
+        const textNode = this.#renderer.createText(`body { margin-bottom: ${dockHeight}px; --sky-dock-height: ${dockHeight}px; }`);
         // Apply a `data-` attribute to make unit testing easier.
         this.#renderer.setAttribute(styleElement, 'data-test-selector', 'sky-layout-dock-bottom-styles');
         this.#renderer.appendChild(styleElement, textNode);
@@ -1526,28 +1532,27 @@ class SkyDockService {
     get items() {
         return _a$1._items;
     }
-    #dynamicComponentSvc;
+    #dynamicComponentSvc = inject(SkyDynamicComponentService);
+    #subscription;
     #options;
-    constructor(dynamicComponentSvc) {
-        this.#dynamicComponentSvc = dynamicComponentSvc;
-    }
     /**
      * Docks a component to the bottom of the page.
      * @param component The component to dock.
      * @param config Options that affect the docking action.
      */
     insertComponent(component, config) {
+        this.#subscription ??= new Subscription();
         const dockRef = (_a$1.dockRef =
             _a$1.dockRef || this.#createDock());
         const itemRef = dockRef.instance.insertComponent(component, config);
         const item = new SkyDockItem(itemRef.componentRef.instance, itemRef.stackOrder);
-        item.destroyed.subscribe(() => {
+        this.#subscription?.add(item.destroyed.subscribe(() => {
             dockRef.instance.removeItem(itemRef);
             _a$1._items.splice(_a$1._items.indexOf(item), 1);
             if (_a$1._items.length === 0) {
                 this.#destroyDock();
             }
-        });
+        }));
         _a$1._items.push(item);
         _a$1._items.sort(sortByStackOrder);
         return item;
@@ -1587,10 +1592,12 @@ class SkyDockService {
         return dockRef;
     }
     #destroyDock() {
+        this.#subscription?.unsubscribe();
+        this.#subscription = undefined;
         this.#dynamicComponentSvc.removeComponent(_a$1.dockRef);
         _a$1.dockRef = undefined;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDockService, deps: [{ token: SkyDynamicComponentService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDockService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDockService, providedIn: 'root' }); }
 }
 _a$1 = SkyDockService;
@@ -1599,7 +1606,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: SkyDynamicComponentService }] });
+        }] });
 
 /**
  * Provides services required to create dynamic components on the page.
@@ -2878,6 +2885,7 @@ class SkyOverlayInstance {
 
 /**
  * @deprecated The `SkyOverlayModule` is no longer needed and can be removed from your application.
+ * @internal
  */
 class SkyOverlayModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyOverlayModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
@@ -4075,10 +4083,12 @@ function px(value) {
     }
     return pxValue;
 }
-function setElPosition(el, left, top, width, marginTop, clipTop, clipLeft) {
+function setElPosition(el, left, top, width, marginTop, marginTopProperty, clipTop, clipLeft) {
     el.style.top = px(top);
     el.style.left = px(left);
-    el.style.marginTop = px(marginTop);
+    el.style.marginTop = marginTopProperty
+        ? `calc(${px(marginTop)} + var(${marginTopProperty}, 0))`
+        : px(marginTop);
     el.style.clipPath =
         clipTop || clipLeft ? `inset(${px(clipTop)} 0 0 ${px(clipLeft)})` : 'none';
     /*istanbul ignore else*/
@@ -4106,6 +4116,7 @@ class SkyViewkeeper {
     #verticalOffset;
     #verticalOffsetEl;
     #viewportMarginTop = 0;
+    #viewportMarginProperty;
     #currentElFixedLeft;
     #currentElFixedTop;
     #currentElFixedWidth;
@@ -4136,6 +4147,7 @@ class SkyViewkeeper {
         // Only set viewport margin if the scrollable host is undefined.
         if (!this.#scrollableHost) {
             this.#viewportMarginTop = options.viewportMarginTop ?? 0;
+            this.#viewportMarginProperty = options.viewportMarginProperty;
         }
         this.#syncElPositionHandler = () => this.syncElPosition(el, boundaryEl);
         if (this.#verticalOffsetEl) {
@@ -4209,7 +4221,7 @@ class SkyViewkeeper {
         if (this.#setWidth) {
             width = 'auto';
         }
-        setElPosition(el, '', '', width, '', 0, 0);
+        setElPosition(el, '', '', width, '', '', 0, 0);
     }
     #calculateVerticalOffset() {
         let offset = this.#verticalOffset;
@@ -4231,8 +4243,13 @@ class SkyViewkeeper {
         else {
             anchorTop = getOffset(el, this.#scrollableHost).top;
         }
-        const doFixEl = boundaryInfo.scrollTop + verticalOffset + this.#viewportMarginTop >
-            anchorTop;
+        let viewportMarginTop = this.#viewportMarginTop;
+        const viewportMarginProperty = this.#viewportMarginProperty &&
+            getComputedStyle(document.body).getPropertyValue(this.#viewportMarginProperty);
+        if (viewportMarginProperty) {
+            viewportMarginTop += parseInt(viewportMarginProperty, 10);
+        }
+        const doFixEl = boundaryInfo.scrollTop + verticalOffset + viewportMarginTop > anchorTop;
         return doFixEl;
     }
     #getFixedStyles(boundaryInfo, verticalOffset) {
@@ -4300,7 +4317,7 @@ class SkyViewkeeper {
         if (this.#setWidth) {
             width = fixedStyles.elFixedWidth;
         }
-        setElPosition(el, fixedStyles.elFixedLeft, fixedStyles.elFixedTop, width, this.#viewportMarginTop, fixedStyles.elClipTop, fixedStyles.elClipLeft);
+        setElPosition(el, fixedStyles.elFixedLeft, fixedStyles.elFixedTop, width, this.#viewportMarginTop, this.#viewportMarginProperty, fixedStyles.elClipTop, fixedStyles.elClipLeft);
     }
     #getBoundaryInfo(el, boundaryEl) {
         const spacerId = this.#getSpacerId();
@@ -4518,7 +4535,7 @@ class Version {
 /**
  * Represents the version of @skyux/core.
  */
-const VERSION = new Version('12.0.0-alpha.2');
+const VERSION = new Version('12.0.0-alpha.4');
 
 /**
  * Generated bundle index. Do not edit.