@stemy/ngx-utils 19.3.0 → 19.3.1

package/fesm2022/stemy-ngx-utils.mjs

@@ -5954,8 +5954,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
 
 const rectProps = ["x", "y", "width", "height"];
 class DropdownContentDirective {
-    constructor(vcr, dropdown, templateRef) {
+    constructor(vcr, rootElem, dropdown, templateRef) {
         this.vcr = vcr;
+        this.rootElem = rootElem;
         this.dropdown = dropdown;
         this.templateRef = templateRef;
         if (!this.dropdown) {
@@ -5975,20 +5976,12 @@ class DropdownContentDirective {
         this.destroyView();
     }
     createView(init = false) {
-        if (!this.root) {
-            const rootNode = this.vcr.element.nativeElement.getRootNode();
-            if (rootNode === document) {
-                this.root = document.body;
-            }
-            else {
-                this.root = rootNode;
-            }
-        }
         const ref = this.dropdown.nativeElement;
         const content = this.createWrapper();
         this.dropdown.contentElement = content;
         // Set up floating UI positioning settings
         const placement = this.dropdown.placement || "bottom";
+        const strategy = this.dropdown.attachToRoot && this.rootElem ? "fixed" : "absolute";
         const middleware = [];
         if (this.dropdown.autoPlacement) {
             middleware.push(autoPlacement(this.dropdown.autoPlacement));
@@ -5996,15 +5989,16 @@ class DropdownContentDirective {
         // Set up floating UI auto update
         this.cleanUp = autoUpdate(ref, content, () => {
             computePosition(ref, content, {
-                strategy: "fixed",
+                strategy,
                 placement,
                 middleware
             }).then(({ x, y, placement }) => {
                 Object.assign(content.style, {
                     opacity: init ? "0" : "1",
-                    position: "fixed",
+                    position: strategy,
                     left: `${x}px`,
                     top: `${y}px`,
+                    zIndex: 1,
                 });
                 const refRect = ref.getBoundingClientRect();
                 const contentRect = content.getBoundingClientRect();
@@ -6035,8 +6029,8 @@ class DropdownContentDirective {
         const wrapper = document.createElement("div");
         const ref = this.vcr.createEmbeddedView(this.templateRef);
         ref.rootNodes.forEach(node => wrapper.appendChild(node));
-        if (this.dropdown.attachToRoot) {
-            this.root.appendChild(wrapper);
+        if (this.dropdown.attachToRoot && this.rootElem) {
+            this.rootElem.appendChild(wrapper);
             const referenceStyles = getCssVariables(this.dropdown.nativeElement);
             const wrapperStyles = getCssVariables(wrapper);
             Object.keys(referenceStyles).forEach(key => {
@@ -6046,18 +6040,32 @@ class DropdownContentDirective {
             });
         }
         else {
-            this.vcr.element.nativeElement?.appendChild(wrapper);
+            const anchor = this.vcr.element.nativeElement;
+            anchor?.parentElement?.appendChild(wrapper);
         }
+        const autoPlacement = this.dropdown.autoPlacement;
         if (this.lastPlacement) {
             wrapper.classList.add(this.lastPlacement);
         }
+        if (autoPlacement) {
+            const vertical = autoPlacement.allowedPlacements.some(p => p.includes("top") || p.includes("bottom"));
+            const horizontal = autoPlacement.allowedPlacements.some(p => p.includes("left") || p.includes("right"));
+            if (vertical && horizontal) {
+                wrapper.classList.add(`dropdown-content-axis-both`);
+            }
+            else {
+                const axis = vertical ? "vertical" : "horizontal";
+                wrapper.classList.add(`dropdown-content-axis-${axis}`);
+            }
+        }
+        wrapper.classList.add("dropdown-content-wrap");
         return wrapper;
     }
     initialize() {
         this.createView(true);
         setTimeout(() => this.destroyView());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DropdownContentDirective, deps: [{ token: i0.ViewContainerRef }, { token: DropdownDirective, optional: true }, { token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DropdownContentDirective, deps: [{ token: i0.ViewContainerRef }, { token: ROOT_ELEMENT, optional: true }, { token: DropdownDirective, optional: true }, { token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.5", type: DropdownContentDirective, isStandalone: false, selector: "[dropdownContent]", exportAs: ["dropdown-content"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DropdownContentDirective, decorators: [{
@@ -6067,7 +6075,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                     selector: "[dropdownContent]",
                     exportAs: "dropdown-content",
                 }]
-        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: DropdownDirective, decorators: [{
+        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: HTMLElement, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [ROOT_ELEMENT]
+                }] }, { type: DropdownDirective, decorators: [{
                     type: Optional
                 }] }, { type: i0.TemplateRef, decorators: [{
                     type: Optional