@skyux/core 12.1.0 → 12.3.0

package/fesm2022/skyux-core.mjs

@@ -1248,10 +1248,9 @@ class SkyDynamicComponentService {
      * Creates an instance of the specified component and adds it to the specified location
      * on the page.
      */
-    createComponent(componentType, options) {
-        options ||= {
-            location: SkyDynamicComponentLocation.BodyBottom,
-        };
+    createComponent(componentType, options = {
+        location: SkyDynamicComponentLocation.BodyBottom,
+    }) {
         const environmentInjector = createEnvironmentInjector(options.providers ?? [], options.environmentInjector ?? this.#environmentInjector);
         let componentRef;
         if (options.viewContainerRef) {
@@ -1264,34 +1263,41 @@ class SkyDynamicComponentService {
                 environmentInjector,
             });
             this.#applicationRef.attachView(componentRef.hostView);
+            this.#insertComponentAtLocation(componentRef, options);
+        }
+        if (options.className) {
             const el = this.#getRootNode(componentRef);
-            const bodyEl = this.#windowRef.nativeWindow.document.body;
-            switch (options.location) {
-                case SkyDynamicComponentLocation.BeforeElement:
-                    if (!options.referenceEl) {
-                        throw new Error('[SkyDynamicComponentService] Could not create a component at location `SkyDynamicComponentLocation.BeforeElement` because a reference element was not provided.');
-                    }
-                    this.#renderer.insertBefore(options.referenceEl.parentElement, el, options.referenceEl);
-                    break;
-                case SkyDynamicComponentLocation.ElementTop:
-                    if (!options.referenceEl) {
-                        throw new Error('[SkyDynamicComponentService] Could not create a component at location `SkyDynamicComponentLocation.ElementTop` because a reference element was not provided.');
-                    }
-                    this.#renderer.insertBefore(options.referenceEl, el, options.referenceEl.firstChild);
-                    break;
-                case SkyDynamicComponentLocation.ElementBottom:
-                    this.#renderer.appendChild(options.referenceEl, el);
-                    break;
-                case SkyDynamicComponentLocation.BodyTop:
-                    this.#renderer.insertBefore(bodyEl, el, bodyEl.firstChild);
-                    break;
-                default:
-                    this.#renderer.appendChild(bodyEl, el);
-                    break;
-            }
+            this.#renderer.addClass(el, options.className);
         }
         return componentRef;
     }
+    #insertComponentAtLocation(componentRef, options) {
+        const el = this.#getRootNode(componentRef);
+        const bodyEl = this.#windowRef.nativeWindow.document.body;
+        switch (options.location) {
+            case SkyDynamicComponentLocation.BeforeElement:
+                if (!options.referenceEl) {
+                    throw new Error('[SkyDynamicComponentService] Could not create a component at location `SkyDynamicComponentLocation.BeforeElement` because a reference element was not provided.');
+                }
+                this.#renderer.insertBefore(options.referenceEl.parentElement, el, options.referenceEl);
+                break;
+            case SkyDynamicComponentLocation.ElementTop:
+                if (!options.referenceEl) {
+                    throw new Error('[SkyDynamicComponentService] Could not create a component at location `SkyDynamicComponentLocation.ElementTop` because a reference element was not provided.');
+                }
+                this.#renderer.insertBefore(options.referenceEl, el, options.referenceEl.firstChild);
+                break;
+            case SkyDynamicComponentLocation.ElementBottom:
+                this.#renderer.appendChild(options.referenceEl, el);
+                break;
+            case SkyDynamicComponentLocation.BodyTop:
+                this.#renderer.insertBefore(bodyEl, el, bodyEl.firstChild);
+                break;
+            default:
+                this.#renderer.appendChild(bodyEl, el);
+                break;
+        }
+    }
     /**
      * Removes a component ref from the page
      * @param componentRef Component ref for the component being removed
@@ -4110,29 +4116,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
         }] });
 
 const CLS_VIEWKEEPER_FIXED = 'sky-viewkeeper-fixed';
+const CLS_VIEWKEEPER_FIXED_NOT_LAST = 'sky-viewkeeper-fixed-not-last';
+const CLS_VIEWKEEPER_BOUNDARY = 'sky-viewkeeper-boundary';
 const EVT_AFTER_VIEWKEEPER_SYNC = 'afterViewkeeperSync';
-let styleEl;
 let nextIdIndex;
-function ensureStyleEl() {
-    if (!styleEl) {
-        styleEl = document.createElement('style');
-        const css = document.createTextNode(`
-.${CLS_VIEWKEEPER_FIXED} {
-  position: fixed !important;
-  z-index: 999;
-  opacity: 0.95;
-  overflow: hidden;
-}
-
-.sky-theme-modern .${CLS_VIEWKEEPER_FIXED} {
-  box-shadow: 0px 1px 8px -1px rgba(0, 0, 0, 0.3);
-  opacity: initial;
-}
-`);
-        styleEl.appendChild(css);
-        document.head.appendChild(styleEl);
-    }
-}
 function nextId() {
     nextIdIndex = (nextIdIndex || 0) + 1;
     return 'viewkeeper-' + nextIdIndex;
@@ -4225,7 +4212,7 @@ class SkyViewkeeper {
         window.addEventListener('scroll', this.#syncElPositionHandler, true);
         window.addEventListener('resize', this.#syncElPositionHandler);
         window.addEventListener('orientationchange', this.#syncElPositionHandler);
-        ensureStyleEl();
+        this.#boundaryEl.classList.add(CLS_VIEWKEEPER_BOUNDARY);
         this.syncElPosition(el, boundaryEl);
     }
     syncElPosition(el, boundaryEl) {
@@ -4240,9 +4227,11 @@ class SkyViewkeeper {
         if (this.#needsUpdating(doFixEl, fixedStyles)) {
             if (doFixEl) {
                 this.#fixEl(el, boundaryInfo, fixedStyles);
+                this.#verticalOffsetEl?.classList.add(CLS_VIEWKEEPER_FIXED_NOT_LAST);
             }
             else {
                 this.#unfixEl(el);
+                this.#verticalOffsetEl?.classList.remove(CLS_VIEWKEEPER_FIXED_NOT_LAST);
             }
         }
         const evt = createCustomEvent(EVT_AFTER_VIEWKEEPER_SYNC);
@@ -4259,8 +4248,10 @@ class SkyViewkeeper {
             }
             if (this.#verticalOffsetEl) {
                 this.#verticalOffsetEl.removeEventListener(EVT_AFTER_VIEWKEEPER_SYNC, this.#syncElPositionHandler);
+                this.#verticalOffsetEl.classList.remove(CLS_VIEWKEEPER_FIXED_NOT_LAST);
             }
             this.#spacerResizeObserver?.disconnect();
+            this.#boundaryEl?.classList.remove(CLS_VIEWKEEPER_BOUNDARY);
             this.#el =
                 this.#boundaryEl =
                     this.#verticalOffsetEl =
@@ -4612,7 +4603,7 @@ class Version {
 /**
  * Represents the version of @skyux/core.
  */
-const VERSION = new Version('12.1.0');
+const VERSION = new Version('12.3.0');
 
 /**
  * Generated bundle index. Do not edit.