@acorex/components 7.3.2 → 7.4.3

package/fesm2022/acorex-components-picker.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"acorex-components-picker.mjs","sources":["../../../../libs/components/picker/src/lib/picker-column.directive.ts","../../../../libs/components/picker/src/lib/picker.component.ts","../../../../libs/components/picker/src/lib/picker.component.html","../../../../libs/components/picker/src/lib/picker.module.ts","../../../../libs/components/picker/src/acorex-components-picker.ts"],"sourcesContent":["import { MXValueComponent } from '@acorex/components/common';\nimport { Directive, EventEmitter, Input, Output, forwardRef } from '@angular/core';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\n\n@Directive({\n    selector: 'ax-picker-column',\n    inputs: [\n        'disabled',\n        'readonly',\n        'readonlyChange',\n        'disabledChange'\n    ],\n    outputs: [\n        'onValueChanged'\n    ],\n    providers: [\n        {\n            provide: NG_VALUE_ACCESSOR,\n            useExisting: forwardRef(() => AXPickerColumnDirective),\n            multi: true\n        }\n    ],\n})\nexport class AXPickerColumnDirective extends MXValueComponent {\n\n    @Input()\n    valueField = 'id';\n\n    @Input()\n    textField = 'text';\n\n    @Input()\n    public title: string;\n    @Input()\n    public step = 1;\n\n\n    @Output()\n    itemsChange: EventEmitter<unknown[]> = new EventEmitter<unknown[]>();\n\n    private _items: unknown[];\n    @Input()\n    public get items(): unknown[] {\n        return this._items;\n    }\n    public set items(v: unknown[]) {\n        this._items = v;\n        this.itemsChange.emit(v);\n    }\n\n    override internalSetValue(v) {\n        if (v == null)\n            return v;\n        else if (typeof v == 'object') {\n            return this.items.find(c => c[this.valueField] == v[this.valueField])\n        }\n        else {\n            return this.items.find(c => c[this.valueField] == v)\n        }\n    }\n}","import { Component, ViewEncapsulation, ChangeDetectionStrategy, QueryList, ContentChildren, AfterViewInit, OnDestroy, inject, NgZone, AfterContentInit } from '@angular/core';\nimport { MXBaseComponent } from '@acorex/components/common';\nimport { AXPickerColumnDirective } from './picker-column.directive';\nimport { AXDrawingUtil, AXUnsubscriber } from '@acorex/core/utils';\nimport { startWith } from 'rxjs';\n\n@Component({\n    selector: 'ax-picker',\n    templateUrl: './picker.component.html',\n    styleUrls: ['./picker.component.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    providers: [AXUnsubscriber]\n})\nexport class AXPickerComponent extends MXBaseComponent implements AfterContentInit, OnDestroy {\n\n    @ContentChildren(AXPickerColumnDirective, { emitDistinctChangesOnly: true })\n    protected _columns: QueryList<AXPickerColumnDirective> = {} as QueryList<AXPickerColumnDirective>;\n\n    private _itemHeight = this._calcItemheight();\n    private _htmlColumns: HTMLDivElement[];\n    private _dragging = false;\n    private _previousY: number;\n    private _currentList: HTMLDivElement;\n\n    protected _unsubscriber: AXUnsubscriber = inject(AXUnsubscriber);\n    protected _zone: NgZone = inject(NgZone);\n\n\n    ngAfterContentInit() {\n        this._itemHeight = this._calcItemheight();\n        this._columns.changes\n            .pipe(this._unsubscriber.takeUntilDestroy)\n            .pipe(startWith(undefined))\n            .subscribe(c => {\n                this.cdr.detectChanges();\n                this._bindEvents();\n            });\n    }\n\n    ngOnDestroy() {\n        this._removeEvents();\n    }\n\n    private _calcItemheight(): number {\n        const rem = window.getComputedStyle(document.documentElement, null).getPropertyValue('--ax-size-default');\n        return AXDrawingUtil.convertRemToPixels(Number(rem?.replace('rem', '') ?? 0));\n    }\n\n    private _bindEvents(): void {\n        this._removeEvents();\n        //\n        this._htmlColumns = Array.from(this.getHostElement().querySelectorAll<HTMLDivElement>(\".ax-picker-col .ax-content\"));\n        this._columns.forEach(c => {\n            c.onValueChanged\n                .pipe(this._unsubscriber.takeUntilDestroy)\n                .subscribe(() => {\n                    this._detectSelectedItemsByValue();\n                });\n        });\n\n        this._htmlColumns.forEach((col, index) => {\n            col['column'] = this._columns.get(index);\n            col.addEventListener(\"wheel\", this._handleMouseWeel.bind(this), { passive: false });\n            //\n            col.addEventListener(\"touchstart\", this._handleTouchStart.bind(this), { passive: false });\n            //col.addEventListener(\"mousedown\", this._handleTouchStart.bind(this), { passive: false });\n            //\n            col.addEventListener('touchmove', this._handleTouchMove.bind(this), { passive: false })\n            //col.addEventListener('mousemove', this._handleTouchMove.bind(this), { passive: false })\n            //\n            col.addEventListener('touchend', this._handleTouchEnd.bind(this), { passive: false })\n            //col.addEventListener('mouseup', this._handleTouchMove.bind(this), { passive: false })\n        });\n    }\n\n    private _removeEvents(): void {\n        this._htmlColumns?.forEach((col) => {\n            col.removeEventListener(\"wheel\", this._handleMouseWeel.bind(this));\n            //\n            col.removeEventListener(\"touchstart\", this._handleTouchStart.bind(this));\n            //col.removeEventListener(\"mousedown\", this._handleTouchStart.bind(this));\n            col.removeEventListener('touchmove', this._handleTouchMove.bind(this));\n            //col.removeEventListener('mousemove', this._handleTouchMove.bind(this));\n            //\n            col.removeEventListener('touchend', this._handleTouchEnd.bind(this));\n            //col.removeEventListener('mouseup', this._handleTouchEnd.bind(this));\n        });\n    }\n\n    _handleTouchStart(e: MouseEvent | TouchEvent) {\n        e.preventDefault();\n        e.stopPropagation();\n        this._currentList = e.currentTarget as HTMLDivElement;\n        this._previousY = e instanceof TouchEvent ? e.touches[0].clientY : e.clientY;\n    }\n\n    private _handleTouchMove(e: MouseEvent | TouchEvent): void {\n        //console.log(\"touchmove\");\n        this._dragging = true;\n        e.preventDefault();\n        e.stopPropagation();\n        this._zone.runOutsideAngular(() => {\n            if (this._currentList && this._dragging) {\n                const clientY = e instanceof TouchEvent ? e.touches[0].clientY : e.clientY;\n                const delta = clientY - this._previousY;\n                this._previousY = clientY;\n                //console.log(delta);\n                if (Math.abs(delta) > 1)\n                    this._moveByDelta(this._currentList, -delta);\n            }\n        });\n    }\n\n    private _handleTouchEnd(e: MouseEvent | TouchEvent): void {\n        // simulate click\n        const targetelement = (e.target as HTMLElement);\n        if (!this._dragging && targetelement.tagName == \"LI\") {\n            targetelement.click();\n        }\n        this._dragging = false;\n    }\n\n    private _handleMouseWeel(e: WheelEvent): void {\n        e.preventDefault();\n        e.stopPropagation();\n        this._moveByDelta(e.currentTarget as HTMLDivElement, e.deltaY);\n    }\n\n    private _moveByDelta(col: HTMLDivElement, deltaY: number) {\n        const column = col['column'] as AXPickerColumnDirective;\n        if (column.readonly || column.disabled)\n            return;\n        let index = column.items.indexOf(column.value);\n        console.log(deltaY)\n        index = (deltaY < 0) ? (index - column.step) : (index + column.step);\n        if (index < 0)\n            index = 0;\n        if (index >= column.items.length)\n            index = column.items.length - 1;\n        column.commitValue(column.items[index], true);\n    }\n\n    protected _handleItemClick(column: AXPickerColumnDirective, item: any) {\n        if (column.readonly || column.disabled)\n            return;\n        column.commitValue(item, true);\n    }\n\n    private _detectSelectedItemsByValue(): void {\n        this._zone.runOutsideAngular(() => {\n            this._htmlColumns.forEach(col => {\n                const column = col['column'] as AXPickerColumnDirective;\n                const index = column.items.indexOf(column.value);\n                col.querySelector(\"ul\").style.transform = `translateY(${-index * this._itemHeight}px)`\n                this.cdr.markForCheck();\n            });\n        });\n    }\n\n    public refresh() {\n        this._detectSelectedItemsByValue();\n    }\n}\n","<div class=\"ax-header\">\n    <div class=\"ax-picker-col\" *ngFor=\"let col of _columns\">\n        <div class=\"ax-header\">\n            {{col.title}}\n        </div>\n    </div>\n</div>\n<div class=\"ax-content\">\n    <div class=\"ax-picker-window\"></div>\n    <div class=\"ax-picker-col\" *ngFor=\"let col of _columns\" [class.ax-state-disabled]=\"col.disabled\"\n        [class.ax-state-readonly]=\"col.readonly\">\n        <div class=\"ax-content\">\n            <ul>\n                <li *ngFor=\"let item of col.items\" (click)=\"_handleItemClick(col,item)\"\n                    [class.ax-state-active]=\"col.value && col.value[col.valueField]===item[col.valueField]\"\n                    [class.ax-state-disabled]=\"col.disabled\" [class.ax-state-readonly]=\"col.readonly\">\n                    {{item[col.textField]}}\n                </li>\n            </ul>\n        </div>\n    </div>\n</div>","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { AXPickerComponent } from './picker.component';\nimport { AXPickerColumnDirective } from './picker-column.directive';\n\nconst COMPONENT = [AXPickerComponent, AXPickerColumnDirective];\nconst MODULES = [CommonModule];\n\n@NgModule({\n    declarations: [...COMPONENT],\n    imports: [...MODULES],\n    exports: [...COMPONENT],\n    providers: [],\n})\nexport class AXPickerModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/acorex-components-popover.mjs

@@ -1,121 +1,25 @@
-import { MXInteractiveComponent, MXBaseComponent, AXFocusableComponent } from '@acorex/components/common';
-import * as i0 from '@angular/core';
-import { EventEmitter, Injectable, inject, ElementRef, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, ViewChild, Output, NgModule } from '@angular/core';
-import { Overlay } from '@angular/cdk/overlay';
-import { TemplatePortal } from '@angular/cdk/portal';
-import { some, includes } from 'lodash-es';
-import { fromEvent, throttleTime } from 'rxjs';
+import { MXBaseComponent, convertToPlacement, AXFocusableComponent } from '@acorex/components/common';
 import { AXPlatform } from '@acorex/core/platform';
-import { AXDrawingUtil } from '@acorex/core/utils';
+import { Overlay } from '@angular/cdk/overlay';
+import { TemplatePortal, ComponentPortal } from '@angular/cdk/portal';
+import * as i0 from '@angular/core';
+import { inject, EventEmitter, ElementRef, TemplateRef, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, ViewChild, Output, NgModule } from '@angular/core';
+import { fromEvent, delay } from 'rxjs';
 import { CommonModule } from '@angular/common';
 
-class MXDropDownComponent extends MXInteractiveComponent {
-    constructor() {
-        super(...arguments);
-        this.onOpened = new EventEmitter();
-        this.onClosed = new EventEmitter();
-        this.popOverPositions = [];
-    }
-    initPopOverPositions() {
-        const offset = Number(getComputedStyle(document.documentElement).getPropertyValue('--ax-base-size').replace('px', ''));
-        const list = [
-            {
-                originX: 'start',
-                originY: 'bottom',
-                overlayX: 'start',
-                overlayY: 'top',
-                offsetY: offset,
-            },
-            {
-                originX: 'start',
-                originY: 'top',
-                overlayX: 'start',
-                overlayY: 'bottom',
-                offsetY: -offset,
-            },
-            {
-                originX: 'end',
-                originY: 'bottom',
-                overlayX: 'end',
-                overlayY: 'top',
-                offsetY: offset,
-            },
-            {
-                originX: 'end',
-                originY: 'top',
-                overlayX: 'end',
-                overlayY: 'bottom',
-                offsetY: -offset,
-            },
-        ];
-        this.popOverPositions.push(...list);
-    }
-    toggle() {
-        if (this.disabled !== true) {
-            this.popover.toggle();
-        }
-    }
-    close() {
-        if (!this.isOpen || this.disabled) {
-            return;
-        }
-        this.popover.close();
-        this?.focus();
-    }
-    open() {
-        if (this.isOpen || this.disabled) {
-            return;
-        }
-        this.popover.open();
-        this.popover.focus();
-    }
-    get isOpen() {
-        return this.popover?.isOpen;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: MXDropDownComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: MXDropDownComponent }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: MXDropDownComponent, decorators: [{
-            type: Injectable
-        }] });
-
 class AXPopoverComponent extends MXBaseComponent {
     constructor() {
         super(...arguments);
         this._platform = inject(AXPlatform);
         this._overlay = inject(Overlay);
-        this.offset = Number(getComputedStyle(document.documentElement).getPropertyValue('--ax-base-size').replace('px', ''));
-        this.position = [
-            {
-                originX: 'start',
-                originY: 'bottom',
-                overlayX: 'start',
-                overlayY: 'top',
-                offsetY: this.offset,
-            },
-            {
-                originX: 'start',
-                originY: 'top',
-                overlayX: 'start',
-                overlayY: 'bottom',
-                offsetY: -this.offset,
-            },
-            {
-                originX: 'end',
-                originY: 'bottom',
-                overlayX: 'end',
-                overlayY: 'top',
-                offsetY: this.offset,
-            },
-            {
-                originX: 'end',
-                originY: 'top',
-                overlayX: 'end',
-                overlayY: 'bottom',
-                offsetY: -this.offset,
-            },
-        ];
-        this._subs = [];
+        this._isMouseOverButton = false;
+        this._isMouseOverTooltip = false;
+        this._targetEvents = {};
+        this._overlayEvents = {};
+        //
+        this._defautPlacements = convertToPlacement('bottom-start');
+        this._placements = [...this._defautPlacements];
+        this._placement = this._placements;
         //
         this._openOn = 'toggle';
         //
@@ -124,34 +28,75 @@ class AXPopoverComponent extends MXBaseComponent {
         this.hasBackdrop = false;
         this.adaptivityEnabled = false;
         //
-        this._mousePos = { x: 0, y: 0 };
-        this._isScrollAttached = false;
-        //
         this.onOpened = new EventEmitter();
         this.onClosed = new EventEmitter();
     }
+    get offsetX() {
+        return this._offsetX;
+    }
+    set offsetX(v) {
+        this.setOption({
+            name: 'offsetX',
+            value: v,
+            afterCallback: () => {
+                this.updateOffset();
+            },
+        });
+    }
+    get offsetY() {
+        return this._offsetY;
+    }
+    set offsetY(v) {
+        this.setOption({
+            name: 'offsetY',
+            value: v,
+            afterCallback: () => {
+                this.updateOffset();
+            },
+        });
+    }
     get target() {
         return this._target;
     }
     set target(v) {
+        this.removeTargetEvents();
         if (v instanceof HTMLElement)
             this._target = v;
         else if (v instanceof ElementRef)
             this._target = v.nativeElement;
         else if (typeof v.getHostElement == 'function')
             this._target = v.getHostElement();
+        //
+        this.bindTargetEvents();
+    }
+    get placement() {
+        return this._placement;
+    }
+    set placement(v) {
+        this.setOption({
+            name: 'placement',
+            value: v,
+            afterCallback: (o, n) => {
+                const converted = convertToPlacement(n);
+                this._placements = converted.length ? converted : this._defautPlacements;
+                this.updateOffset();
+                this.updatePositionStrategy();
+            },
+        });
+    }
+    get componentRef() {
+        return this._componentRef;
     }
     get openOn() {
         return this._openOn;
     }
     set openOn(v) {
-        debugger;
         this.setOption({
             name: 'openOn',
             value: v,
             afterCallback: () => {
-                this._config();
-            }
+                this.bindTargetEvents();
+            },
         });
     }
     get closeOn() {
@@ -162,8 +107,8 @@ class AXPopoverComponent extends MXBaseComponent {
             name: 'closeOn',
             value: v,
             afterCallback: () => {
-                this._config();
-            }
+                this.bindTargetEvents();
+            },
         });
     }
     _emitOnOpenedEvent() {
@@ -179,49 +124,90 @@ class AXPopoverComponent extends MXBaseComponent {
         });
     }
     //
-    ngAfterViewInit() {
-        this._config();
+    _handleMouseEnter(e) {
+        this._isMouseOverTooltip = true;
+    }
+    _handleMouseLeave(e) {
+        this._isMouseOverTooltip = false;
+        setTimeout(() => {
+            if (!this._isMouseOverButton && this.closeOn == 'leave') {
+                this.close();
+            }
+        }, 250);
+    }
+    removeTargetEvents() {
+        Object.entries(this._targetEvents).forEach((e) => {
+            e[1].unsubscribe();
+        });
+    }
+    bindTargetEvents() {
+        this.removeTargetEvents();
+        if (!this._target)
+            return;
+        const targetMouseEnter$ = fromEvent(this._target, 'mouseenter');
+        const targetMouseLeave$ = fromEvent(this._target, 'mouseleave');
+        if (this.openOn == 'hover') {
+            this._targetEvents.mouseenter = targetMouseEnter$.pipe(delay(200)).subscribe(() => {
+                this._isMouseOverButton = true;
+                this.open();
+            });
+        }
+        if (this.closeOn == 'leave') {
+            this._targetEvents.mouseleave = targetMouseLeave$.pipe(delay(200)).subscribe(() => {
+                this._isMouseOverButton = false;
+                if (!this._isMouseOverTooltip) {
+                    this.close();
+                }
+            });
+        }
+        if (this.openOn === 'click' || this.openOn === 'toggle') {
+            const click$ = fromEvent(this._target, 'click');
+            this._targetEvents.click = click$.subscribe((e) => {
+                this.openOn == 'toggle' ? this.toggle() : this.open();
+            });
+        }
     }
     //
-    _config() {
-        this.dispose();
-        if (this._target) {
-            if (this.openOn === 'mouseover') {
-                const mouseEnter$ = fromEvent(this._target, 'mouseover');
-                this._addSub(mouseEnter$.subscribe(e => {
-                    const point = { x: e.clientX, y: e.clientY };
-                    if (AXDrawingUtil.isInElementBound(point, this._target))
-                        this.open();
-                }));
+    bindOverlayEvents() {
+        this.removeOverlayEvents();
+        this._overlayEvents.attach = this._overlayRef.attachments().subscribe(() => {
+            if (this.openOn == 'hover') {
+                this._overlayRef.overlayElement.addEventListener('mouseenter', this._handleMouseEnter.bind(this));
             }
-            if (this.closeOn === 'mouseout') {
-                const mouseMove$ = fromEvent(document, 'mousemove');
-                this._addSub(mouseMove$.pipe(throttleTime(50)).subscribe(e => {
-                    debugger;
-                    this._mousePos.x = e.clientX;
-                    this._mousePos.y = e.clientY;
-                    if (this.isOpen) {
-                        setTimeout(() => {
-                            if (some([this._target, this._overlayRef.overlayElement], el => includes(document.elementsFromPoint(this._mousePos.x, this._mousePos.y), el)))
-                                this.close();
-                        }, 100);
-                    }
-                }));
+            if (this.closeOn == 'leave') {
+                this._overlayRef.overlayElement.addEventListener('mouseleave', this._handleMouseLeave.bind(this));
             }
             //
-            if (this.openOn === 'click' || this.openOn === 'toggle') {
-                const click$ = fromEvent(this._target, 'click');
-                this._addSub(click$.subscribe(e => {
-                    this.openOn == 'toggle' ? this.toggle() : this.open();
-                }));
-            }
-        }
+            this._overlayEvents.outside = this._overlayRef._outsidePointerEvents.subscribe((e) => {
+                const el = e.target;
+                if (this.closeOn == 'clickout' &&
+                    this.isOpen &&
+                    !this._target.contains(el) &&
+                    !this._overlayRef?.overlayElement?.contains(el)) {
+                    this.close();
+                }
+            });
+            //
+            this._overlayEvents.scroll = this._platform.scroll.subscribe((c) => {
+                const el = c.nativeEvent.target;
+                if (this.isOpen &&
+                    el?.closest &&
+                    !el.closest('.ax-overlay-pane') &&
+                    !this._target.contains(el) &&
+                    !this._overlayRef?.overlayElement?.contains(el)) {
+                    this.close();
+                }
+            });
+        });
     }
-    //
-    ngOnDestroy() {
-        this.dispose();
-        this._overlayRef?.dispose();
+    removeOverlayEvents() {
+        this._overlayRef?.overlayElement.removeEventListener('mouseenter', this._handleMouseEnter.bind(this));
+        this._overlayRef?.overlayElement.addEventListener('mouseleave', this._handleMouseLeave.bind(this));
+        Object.entries(this._overlayEvents).forEach((e) => {
+            e[1].unsubscribe();
+        });
     }
+    //
     toggle() {
         this.isOpen ? this.close() : this.open();
     }
@@ -231,108 +217,108 @@ class AXPopoverComponent extends MXBaseComponent {
             return;
         }
         this._overlayRef?.detach();
+        this.restoreFocus();
         this._emitOnClosedEvent();
-        //
-        if (this._lastActiveElement?.focus) {
-            this._lastActiveElement.focus();
-        }
-    }
-    dispose() {
-        this._overlayRef?.detach();
-        //this._overlayRef?.dispose();
-        this._subs.forEach(s => {
-            s?.unsubscribe();
-        });
     }
     //
     open() {
         if (this.isOpen) {
             return;
         }
-        this._lastActiveElement = document.activeElement;
-        this._ensureOverlayCreated();
-        this._overlayRef?.attach(this._templatePortal);
+        this.saveFocus();
+        this.openOverlayInternal();
         this._emitOnOpenedEvent();
     }
-    _ensureOverlayCreated() {
+    saveFocus() {
+        this._lastActiveElement = document.activeElement;
+    }
+    restoreFocus() {
+        if (this._lastActiveElement?.focus) {
+            this._lastActiveElement.focus();
+        }
+    }
+    openOverlayInternal() {
         const targetRef = this._target;
         if (!targetRef)
             return;
-        if (!this._overlayRef) {
-            if (this._platform.is('SM') && this.adaptivityEnabled) {
-                this._openAsActionsheet();
-            }
-            else {
-                this._openAsPopover(targetRef);
-            }
-            if (this.closeOn == 'clickout') {
-                debugger;
-                this._addSub(this._overlayRef._outsidePointerEvents.subscribe(c => {
-                    debugger;
-                    const target = c.target;
-                    const comElem = targetRef;
-                    if (!comElem.contains(target)) {
-                        this.close();
-                    }
-                }));
-            }
-            this._addSub(this._overlayRef.attachments().subscribe(() => {
-                if (!this._isScrollAttached) {
-                    this._addSub(this._platform.scroll.subscribe(c => {
-                        try {
-                            if (!c.nativeEvent.target?.closest('.ax-overlay-pane'))
-                                this.close();
-                        }
-                        catch (error) { }
-                    }));
-                    this._isScrollAttached = true;
-                }
-            }));
+        //if (!this._overlayRef) {
+        if (this._platform.is('SM') && this.adaptivityEnabled) {
+            this._overlayRef = this._overlay.create({
+                positionStrategy: this._overlay.position().global().bottom().centerHorizontally(),
+                disposeOnNavigation: true,
+                scrollStrategy: this._overlay.scrollStrategies.block(),
+                panelClass: ['ax-actionsheet-base', 'ax-animate-slideInUp', 'ax-animate-faster'],
+                hasBackdrop: true,
+                width: '100%',
+            });
+        }
+        else {
+            this._overlayRef = this._overlay.create({
+                positionStrategy: this._overlay
+                    .position()
+                    .flexibleConnectedTo(targetRef)
+                    .withPositions(this._placements)
+                    .withPush(false),
+                scrollStrategy: this._overlay.scrollStrategies.close(),
+                disposeOnNavigation: true,
+                panelClass: ['ax-animate-fadeIn', 'ax-animate-faster'],
+                maxHeight: 'unset',
+                hasBackdrop: this.hasBackdrop,
+                backdropClass: [this.backdropClass || 'cdk-overlay-transparent-backdrop'],
+            });
+        }
+        //
+        this.bindOverlayEvents();
+        //}
+        //
+        if (this.content instanceof TemplateRef) {
+            this._portal = new TemplatePortal(this.content, this.getViewContainer(), {
+                $implicit: this.context,
+                ref: this,
+            });
+            this._overlayRef?.attach(this._portal);
         }
-        if (!this._templatePortal) {
-            this._templatePortal = new TemplatePortal(this._baseTemplate, this.getViewContainer());
+        else if (typeof this.content === 'function') {
+            this._portal = new ComponentPortal(this.content);
+            this._componentRef = this._overlayRef?.attach(this._portal);
+            Object.assign(this._componentRef.instance, this.context);
         }
+        else {
+            this._portal = new TemplatePortal(this._baseTemplate, this.getViewContainer(), {
+                $implicit: this.context,
+                ref: this,
+            });
+            this._overlayRef?.attach(this._portal);
+        }
+    }
+    get isOpen() {
+        return this._overlayRef ? this._overlayRef.hasAttached() : false;
     }
-    _openAsPopover(targetRef) {
-        this._overlayRef = this._overlay.create({
-            positionStrategy: this._overlay
+    updatePositionStrategy() {
+        const targetRef = this._target;
+        if (!targetRef)
+            return;
+        let strategy;
+        if (this._platform.is('SM') && this.adaptivityEnabled) {
+            strategy = this._overlay.position().global().bottom().centerHorizontally();
+        }
+        else {
+            strategy = this._overlay
                 .position()
                 .flexibleConnectedTo(targetRef)
-                .withPositions(Array.isArray(this.position) ? this.position : [this.position])
-                .withPush(false),
-            scrollStrategy: this._overlay.scrollStrategies.reposition(),
-            disposeOnNavigation: true,
-            panelClass: ['ax-animate-fadeIn', 'ax-animate-faster'],
-            maxHeight: 'unset',
-            hasBackdrop: this.hasBackdrop,
-            backdropClass: [this.backdropClass || 'cdk-overlay-transparent-backdrop'],
-        });
+                .withPositions(this._placements)
+                .withPush(false);
+        }
+        this._overlayRef?.updatePositionStrategy(strategy);
     }
-    _openAsActionsheet() {
-        this._overlayRef = this._overlay.create({
-            positionStrategy: this._overlay
-                .position()
-                .flexibleConnectedTo(document.body)
-                .withPositions([
-                {
-                    originX: 'center',
-                    originY: 'bottom',
-                    overlayX: 'center',
-                    overlayY: 'bottom',
-                },
-            ]),
-            disposeOnNavigation: true,
-            panelClass: ['ax-animate-slideInUp', 'ax-animate-faster'],
-            hasBackdrop: true,
-            width: '100%',
+    updateOffset() {
+        this._placements?.forEach((p) => {
+            if (this.offsetY != null)
+                p.offsetY = this.offsetY;
+            if (this.offsetX != null)
+                p.offsetX = this.offsetX;
         });
     }
-    get isOpen() {
-        return this._overlayRef ? this._overlayRef.hasAttached() : false;
-    }
-    _addSub(sub) {
-        this._subs.push(sub);
-    }
     updatePosition() {
         this._overlayRef?.updatePosition();
         this.focus();
@@ -340,23 +326,32 @@ class AXPopoverComponent extends MXBaseComponent {
     focus() {
         //TODO: need this??
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: AXPopoverComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: AXPopoverComponent, selector: "ax-popover", inputs: { target: "target", position: "position", openOn: "openOn", closeOn: "closeOn", hasBackdrop: "hasBackdrop", backdropClass: "backdropClass", adaptivityEnabled: "adaptivityEnabled" }, outputs: { onOpened: "onOpened", onClosed: "onClosed" }, providers: [
-            { provide: AXFocusableComponent, useExisting: AXPopoverComponent }
-        ], viewQueries: [{ propertyName: "_baseTemplate", first: true, predicate: ["baseTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #baseTemplate>\n  <ng-content></ng-content>\n</ng-template>", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    //
+    ngOnDestroy() {
+        this.removeTargetEvents();
+        this.removeOverlayEvents();
+        this._overlayRef?.detach();
+        this._overlayRef?.dispose();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXPopoverComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.9", type: AXPopoverComponent, selector: "ax-popover", inputs: { offsetX: "offsetX", offsetY: "offsetY", target: "target", placement: "placement", content: "content", openOn: "openOn", closeOn: "closeOn", hasBackdrop: "hasBackdrop", backdropClass: "backdropClass", adaptivityEnabled: "adaptivityEnabled" }, outputs: { onOpened: "onOpened", onClosed: "onClosed" }, providers: [{ provide: AXFocusableComponent, useExisting: AXPopoverComponent }], viewQueries: [{ propertyName: "_baseTemplate", first: true, predicate: ["baseTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #baseTemplate>\n  <ng-content></ng-content>\n</ng-template>", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: AXPopoverComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXPopoverComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-popover', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
-                        { provide: AXFocusableComponent, useExisting: AXPopoverComponent }
-                    ], template: "<ng-template #baseTemplate>\n  <ng-content></ng-content>\n</ng-template>" }]
-        }], propDecorators: { target: [{
+            args: [{ selector: 'ax-popover', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXFocusableComponent, useExisting: AXPopoverComponent }], template: "<ng-template #baseTemplate>\n  <ng-content></ng-content>\n</ng-template>" }]
+        }], propDecorators: { offsetX: [{
                 type: Input
-            }], position: [{
+            }], offsetY: [{
+                type: Input
+            }], target: [{
+                type: Input
+            }], placement: [{
                 type: Input
             }], _baseTemplate: [{
                 type: ViewChild,
                 args: ['baseTemplate']
+            }], content: [{
+                type: Input
             }], openOn: [{
                 type: Input
             }], closeOn: [{
@@ -374,11 +369,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImpor
             }] } });
 
 class AXPopoverModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: AXPopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.8", ngImport: i0, type: AXPopoverModule, declarations: [AXPopoverComponent], imports: [CommonModule], exports: [AXPopoverComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: AXPopoverModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXPopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.9", ngImport: i0, type: AXPopoverModule, declarations: [AXPopoverComponent], imports: [CommonModule], exports: [AXPopoverComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXPopoverModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: AXPopoverModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXPopoverModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AXPopoverComponent],
@@ -392,5 +387,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AXPopoverComponent, AXPopoverModule, MXDropDownComponent };
+export { AXPopoverComponent, AXPopoverModule };
 //# sourceMappingURL=acorex-components-popover.mjs.map