@stemy/ngx-utils 19.3.0 → 19.3.2

package/fesm2022/stemy-ngx-utils.mjs

@@ -5833,16 +5833,27 @@ class DropdownDirective {
         this.disabled = false;
         this.closeInside = true;
         this.attachToRoot = true;
+        this.mobileViewUnder = 0;
         this.keyboardHandler = true;
         this.onShown = new EventEmitter();
         this.onHidden = new EventEmitter();
         this.onKeyboard = new EventEmitter();
-        this.onTap = (event) => {
-            const target = event.target;
-            if (event["button"])
-                return;
-            if (!this.closeInside && (this.nativeElement?.contains(target) || this.contentElement?.contains(target))) {
+        this.onClick = (event) => {
+            // We don't care about clicks with right/center mouse buttons
+            if (event.button)
                 return;
+            const target = (event.composedPath()?.shift() || event.target);
+            // If blocked closing inside we only consider inside if the target is not directly the contentElement
+            // We only have a contentElement in case when we are using *dropdownContent directive
+            if (!this.closeInside && (!this.contentElement || target !== this.contentElement)) {
+                // Try to determine if we are inside by collecting the possible parent elements to check
+                const parents = !this.contentElement ? [] : Array.from(this.contentElement.childNodes);
+                if (this.nativeElement) {
+                    parents.push(this.nativeElement);
+                }
+                // If one of the parents contains the target then we clicked inside
+                if (parents.some(child => child.contains(target)))
+                    return;
             }
             setTimeout(() => this.hide(), event.type == "touchend" ? 250 : 100);
         };
@@ -5889,7 +5900,7 @@ class DropdownDirective {
         setTimeout(() => {
             if (!this.opened)
                 return;
-            document.addEventListener("click", this.onTap);
+            document.addEventListener("click", this.onClick);
             document.addEventListener("keydown", this.onKeyDown);
         }, 10);
         return true;
@@ -5899,7 +5910,7 @@ class DropdownDirective {
             return true;
         this.opened = false;
         this.hideEvent();
-        document.removeEventListener("click", this.onTap);
+        document.removeEventListener("click", this.onClick);
         document.removeEventListener("keydown", this.onKeyDown);
         // Prevent toggle from refocus itself after it is hidden because of another toggle
         setTimeout(() => {
@@ -5911,7 +5922,7 @@ class DropdownDirective {
         return true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DropdownDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.5", type: DropdownDirective, isStandalone: false, selector: "[dd],[drop-down]", inputs: { closeInside: "closeInside", attachToRoot: "attachToRoot", placement: "placement", autoPlacement: "autoPlacement", keyboardHandler: "keyboardHandler", isDisabled: "isDisabled" }, outputs: { onShown: "onShown", onHidden: "onHidden", onKeyboard: "onKeyboard" }, host: { listeners: { "keydown.enter": "show($event)", "keydown.space": "show($event)" }, properties: { "class.open": "this.isOpened", "class.disabled": "this.getDisabled" } }, exportAs: ["dropdown"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.5", type: DropdownDirective, isStandalone: false, selector: "[dd],[drop-down]", inputs: { closeInside: "closeInside", attachToRoot: "attachToRoot", placement: "placement", autoPlacement: "autoPlacement", mobileViewUnder: "mobileViewUnder", keyboardHandler: "keyboardHandler", isDisabled: "isDisabled" }, outputs: { onShown: "onShown", onHidden: "onHidden", onKeyboard: "onKeyboard" }, host: { listeners: { "keydown.enter": "show($event)", "keydown.space": "show($event)" }, properties: { "class.open": "this.isOpened", "class.disabled": "this.getDisabled" } }, exportAs: ["dropdown"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DropdownDirective, decorators: [{
             type: Directive,
@@ -5928,6 +5939,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                 type: Input
             }], autoPlacement: [{
                 type: Input
+            }], mobileViewUnder: [{
+                type: Input
             }], keyboardHandler: [{
                 type: Input
             }], onShown: [{
@@ -5954,8 +5967,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 +5989,13 @@ 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 mobileWidth = this.dropdown.mobileViewUnder || 0;
         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 +6003,19 @@ 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 }) => {
+                const isMobileView = window.innerWidth <= mobileWidth;
                 Object.assign(content.style, {
                     opacity: init ? "0" : "1",
-                    position: "fixed",
-                    left: `${x}px`,
-                    top: `${y}px`,
+                    position: isMobileView ? "fixed" : strategy,
+                    left: isMobileView ? `0px` : `${x}px`,
+                    right: isMobileView ? `0px` : undefined,
+                    top: isMobileView ? `0px` : `${y}px`,
+                    bottom: isMobileView ? `0px` : undefined,
+                    zIndex: `var(--dd-z-index, 100)`
                 });
                 const refRect = ref.getBoundingClientRect();
                 const contentRect = content.getBoundingClientRect();
@@ -6018,6 +6029,12 @@ class DropdownContentDirective {
                     ref.classList.add(newPlacement);
                     content.classList.add(newPlacement);
                 }
+                if (isMobileView) {
+                    content.classList.add(`dropdown-content-mobile`);
+                }
+                else {
+                    content.classList.remove(`dropdown-content-mobile`);
+                }
                 rectProps.forEach(prop => {
                     content.style.setProperty(`--toggle-${prop}`, `${refRect[prop]}px`);
                     ref.style.setProperty(`--content-${prop}`, `${contentRect[prop]}px`);
@@ -6035,8 +6052,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 +6063,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 +6098,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
@@ -6356,7 +6392,7 @@ class DropdownBoxComponent {
         this.makeAutoPlacementOpts();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DropdownBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: DropdownBoxComponent, isStandalone: false, selector: "dropdown-box", inputs: { closeInside: "closeInside", attachToRoot: "attachToRoot", placement: "placement", crossAxis: "crossAxis", alignment: "alignment", autoAlignment: "autoAlignment", allowedPlacements: "allowedPlacements", componentClass: "componentClass" }, viewQueries: [{ propertyName: "content", first: true, predicate: DropdownContentDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div dd class=\"dropdown-box\"\n     [ngClass]=\"componentClass\"\n     [closeInside]=\"closeInside\"\n     [attachToRoot]=\"attachToRoot\"\n     [placement]=\"placement\"\n     [autoPlacement]=\"autoPlacement\">\n    <div class=\"dropdown-box-toggle\" dropdownToggle>\n        <a class=\"dropdown-box-toggle-link\">\n            <ng-content select=\"[toggle-content]\"></ng-content>\n        </a>\n    </div>\n    <div class=\"dropdown-box-content\" [ngClass]=\"componentClass + '-content-wrapper'\" *dropdownContent>\n        <ng-content></ng-content>\n    </div>\n</div>\n", styles: [".dropdown-box{--dd-border-size: var(--border-size, 1px);--dd-border-radius: 5px;--dd-top-border-radius: var(--dd-border-radius) var(--dd-border-radius) 0 0;--dd-bottom-border-radius: 0 0 var(--dd-border-radius) var(--dd-border-radius);--dd-bg-color: var(--bg-color, #ffffff);--dd-border-color: var(--border-color, #ced4da);--dd-highlight-color: var(--highlight-color, var(--primary-color, #888888));--dd-highlight-text-color: var(--highlight-text-color, #ffffff);--dd-text-color: var(--text-color, #151515);--dd-arrow-size: var(--arrow-size, 6px);--dd-arrow-space: calc(var(--dd-arrow-size) * .5 + 1px);--dd-arrow-color: currentColor;--dd-arrow-rotation: 90;position:relative;z-index:2;display:inline-block;width:var(--content-width, 0);min-width:fit-content}.dropdown-box a,.dropdown-box span{white-space:nowrap}.dropdown-box.table-sort-dropdown{display:none}.dropdown-box.table-sort-dropdown .table-toggle:hover,.dropdown-box li:hover,.dropdown-box li.active{background-color:var(--dd-highlight-color);color:var(--dd-highlight-text-color)}.dropdown-box.open{--dd-arrow-rotation: -90}.dropdown-box.open .dropdown-box-toggle{border-radius:var(--dd-top-border-radius)}.dropdown-box-toggle{min-width:fit-content;background:var(--dd-bg-color);color:var(--dd-text-color);cursor:pointer;border:var(--dd-border-size) solid var(--dd-border-color);border-radius:5px;padding:6px 12px;-webkit-user-select:none;user-select:none;font-weight:400;font-size:var(--table-input-font-size, 15px);line-height:var(--table-input-line-height, 18px);outline:none}.dropdown-box-toggle .toggle-placeholder{color:#495057}.dropdown-box-toggle a.dropdown-box-toggle-link{margin-right:calc(2 * var(--dd-arrow-size));padding-right:5px;min-width:fit-content;position:relative;display:block}.dropdown-box-toggle a.dropdown-box-toggle-link:after{content:\"\";position:absolute;left:calc(100% + var(--dd-arrow-size));top:calc(50% - var(--dd-arrow-size));border-top:var(--dd-arrow-size) solid transparent;border-bottom:var(--dd-arrow-size) solid transparent;border-left:var(--dd-arrow-size) solid var(--dd-arrow-color);transform:rotate(calc(var(--dd-arrow-rotation) * 1deg));transition:.2s ease}.dropdown-box-content{position:relative;z-index:1;min-width:var(--toggle-width, 0)}.dropdown-box-content ul{margin:0;padding:0;list-style:none;border:var(--dd-border-size) solid var(--dd-border-color);border-top-width:0;z-index:1;background:var(--dd-bg-color);border-radius:var(--dd-bottom-border-radius);overflow:hidden;min-width:fit-content}.dropdown-box-content li{color:var(--dd-text-color);font-weight:400;text-align:left;min-width:fit-content;cursor:pointer;padding:6px 12px;-webkit-user-select:none;user-select:none}.dropdown-box-content li:hover,.dropdown-box-content li.active{background-color:var(--dd-highlight-color);color:var(--dd-highlight-text-color)}.dropdown-placement-top.open .dropdown-box-toggle{border-radius:var(--dd-bottom-border-radius)}.dropdown-placement-top .dropdown-box-content ul{border-top-width:var(--dd-border-size);border-bottom-width:0;border-radius:var(--dd-top-border-radius)}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: DropdownDirective, selector: "[dd],[drop-down]", inputs: ["closeInside", "attachToRoot", "placement", "autoPlacement", "keyboardHandler", "isDisabled"], outputs: ["onShown", "onHidden", "onKeyboard"], exportAs: ["dropdown"] }, { kind: "directive", type: DropdownContentDirective, selector: "[dropdownContent]", exportAs: ["dropdown-content"] }, { kind: "directive", type: DropdownToggleDirective, selector: "[dropdownToggle]", inputs: ["beforeOpen"], exportAs: ["dropdown-toggle"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: DropdownBoxComponent, isStandalone: false, selector: "dropdown-box", inputs: { closeInside: "closeInside", attachToRoot: "attachToRoot", placement: "placement", crossAxis: "crossAxis", alignment: "alignment", autoAlignment: "autoAlignment", allowedPlacements: "allowedPlacements", componentClass: "componentClass" }, viewQueries: [{ propertyName: "content", first: true, predicate: DropdownContentDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div dd class=\"dropdown-box\"\n     [ngClass]=\"componentClass\"\n     [closeInside]=\"closeInside\"\n     [attachToRoot]=\"attachToRoot\"\n     [placement]=\"placement\"\n     [autoPlacement]=\"autoPlacement\">\n    <div class=\"dropdown-box-toggle\" dropdownToggle>\n        <a class=\"dropdown-box-toggle-link\">\n            <ng-content select=\"[toggle-content]\"></ng-content>\n        </a>\n    </div>\n    <div class=\"dropdown-box-content\" [ngClass]=\"componentClass + '-content-wrapper'\" *dropdownContent>\n        <ng-content></ng-content>\n    </div>\n</div>\n", styles: [".dropdown-box{--dd-border-size: var(--border-size, 1px);--dd-border-radius: 5px;--dd-top-border-radius: var(--dd-border-radius) var(--dd-border-radius) 0 0;--dd-bottom-border-radius: 0 0 var(--dd-border-radius) var(--dd-border-radius);--dd-bg-color: var(--bg-color, #ffffff);--dd-border-color: var(--border-color, #ced4da);--dd-highlight-color: var(--highlight-color, var(--primary-color, #888888));--dd-highlight-text-color: var(--highlight-text-color, #ffffff);--dd-text-color: var(--text-color, #151515);--dd-arrow-size: var(--arrow-size, 6px);--dd-arrow-space: calc(var(--dd-arrow-size) * .5 + 1px);--dd-arrow-color: currentColor;--dd-arrow-rotation: 90;position:relative;z-index:2;display:inline-block;width:var(--content-width, 0);min-width:fit-content}.dropdown-box a,.dropdown-box span{white-space:nowrap}.dropdown-box.table-sort-dropdown{display:none}.dropdown-box.table-sort-dropdown .table-toggle:hover,.dropdown-box li:hover,.dropdown-box li.active{background-color:var(--dd-highlight-color);color:var(--dd-highlight-text-color)}.dropdown-box.open{--dd-arrow-rotation: -90}.dropdown-box.open .dropdown-box-toggle{border-radius:var(--dd-top-border-radius)}.dropdown-box-toggle{min-width:fit-content;background:var(--dd-bg-color);color:var(--dd-text-color);cursor:pointer;border:var(--dd-border-size) solid var(--dd-border-color);border-radius:5px;padding:6px 12px;-webkit-user-select:none;user-select:none;font-weight:400;font-size:var(--table-input-font-size, 15px);line-height:var(--table-input-line-height, 18px);outline:none}.dropdown-box-toggle .toggle-placeholder{color:#495057}.dropdown-box-toggle a.dropdown-box-toggle-link{margin-right:calc(2 * var(--dd-arrow-size));padding-right:5px;min-width:fit-content;position:relative;display:block}.dropdown-box-toggle a.dropdown-box-toggle-link:after{content:\"\";position:absolute;left:calc(100% + var(--dd-arrow-size));top:calc(50% - var(--dd-arrow-size));border-top:var(--dd-arrow-size) solid transparent;border-bottom:var(--dd-arrow-size) solid transparent;border-left:var(--dd-arrow-size) solid var(--dd-arrow-color);transform:rotate(calc(var(--dd-arrow-rotation) * 1deg));transition:.2s ease}.dropdown-box-content{position:relative;z-index:1;min-width:var(--toggle-width, 0)}.dropdown-box-content ul{margin:0;padding:0;list-style:none;border:var(--dd-border-size) solid var(--dd-border-color);border-top-width:0;z-index:1;background:var(--dd-bg-color);border-radius:var(--dd-bottom-border-radius);overflow:hidden;min-width:fit-content}.dropdown-box-content li{color:var(--dd-text-color);font-weight:400;text-align:left;min-width:fit-content;cursor:pointer;padding:6px 12px;-webkit-user-select:none;user-select:none}.dropdown-box-content li:hover,.dropdown-box-content li.active{background-color:var(--dd-highlight-color);color:var(--dd-highlight-text-color)}.dropdown-placement-top.open .dropdown-box-toggle{border-radius:var(--dd-bottom-border-radius)}.dropdown-placement-top .dropdown-box-content ul{border-top-width:var(--dd-border-size);border-bottom-width:0;border-radius:var(--dd-top-border-radius)}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: DropdownDirective, selector: "[dd],[drop-down]", inputs: ["closeInside", "attachToRoot", "placement", "autoPlacement", "mobileViewUnder", "keyboardHandler", "isDisabled"], outputs: ["onShown", "onHidden", "onKeyboard"], exportAs: ["dropdown"] }, { kind: "directive", type: DropdownContentDirective, selector: "[dropdownContent]", exportAs: ["dropdown-content"] }, { kind: "directive", type: DropdownToggleDirective, selector: "[dropdownToggle]", inputs: ["beforeOpen"], exportAs: ["dropdown-toggle"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DropdownBoxComponent, decorators: [{
             type: Component,