@acorex/components 7.1.53 → 7.2.1

package/fesm2022/acorex-components-common.mjs

@@ -1,15 +1,15 @@
 import * as i0 from '@angular/core';
-import { Injectable, inject, ChangeDetectorRef, ElementRef, ViewContainerRef, EventEmitter, Directive, Host, Self, Optional, Input, Output, Inject, TemplateRef, NgModule } from '@angular/core';
-import { AXHtmlUtil, AXObjectUtil } from '@acorex/core/utils';
-import { coerceNumberProperty, coerceBooleanProperty } from '@angular/cdk/coercion';
-import { classes } from 'polytype';
-import { skip, distinctUntilChanged, debounceTime, fromEvent, merge } from 'rxjs';
+import { Injectable, Directive, Host, Self, Optional, Input, EventEmitter, Output, Inject, NgModule, inject, ChangeDetectorRef, ElementRef, ViewContainerRef, TemplateRef } from '@angular/core';
 import * as i1 from '@angular/forms';
+import { skip, distinctUntilChanged, debounceTime, fromEvent, merge } from 'rxjs';
 import * as i3 from '@angular/common';
 import { DOCUMENT } from '@angular/common';
-import { Observable } from 'rxjs/internal/Observable';
 import * as i1$1 from '@angular/platform-browser';
+import { Observable } from 'rxjs/internal/Observable';
 import { map, pairwise, filter, startWith, exhaustMap } from 'rxjs/operators';
+import { classes } from 'polytype';
+import { AXHtmlUtil, AXObjectUtil } from '@acorex/core/utils';
+import { coerceNumberProperty, coerceBooleanProperty } from '@angular/cdk/coercion';
 import * as i1$2 from '@angular/cdk/overlay';
 import { OverlayContainer, Overlay } from '@angular/cdk/overlay';
 import * as i2 from '@angular/cdk/bidi';
@@ -20,65 +20,53 @@ import { TemplatePortal, ComponentPortal } from '@angular/cdk/portal';
  * @category Events
  */
 class AXEvent {
-    /**
-     *  The sender component
-     */
-    component;
-    /**
-     *  The root native element
-     */
-    htmlElement;
-    isUserInteraction = false;
+    constructor() {
+        this.isUserInteraction = false;
+    }
 }
 /**
  *  Contains native event
  * @category Events
  */
 class AXHtmlEvent extends AXEvent {
-    nativeEvent;
 }
 /**
  *  Contains native event
  * @category Events
  */
 class AXValueChangedEvent extends AXEvent {
-    name;
-    value;
-    oldValue;
 }
 /**
  *  Contains native event
  * @category Events
  */
 class AXOptionChangedEvent extends AXEvent {
-    name;
-    newValue;
-    oldValue;
 }
 /**
  *  Fires each time the user click the element.
  * @category Events
  */
 class AXClickEvent extends AXHtmlEvent {
-    /**
-     *  uses for extra data
-     */
-    data = null;
-    nativeEvent = null;
+    constructor() {
+        super(...arguments);
+        /**
+         *  uses for extra data
+         */
+        this.data = null;
+        this.nativeEvent = null;
+    }
 }
 /**
  *  Fires each time the user click the element.
  * @category Events
  */
 class AXButtonClickEvent extends AXClickEvent {
-    name;
 }
 /**
  *  Fires each time the user click the element.
  * @category Events
  */
 class AXItemClickEvent extends AXHtmlEvent {
-    item;
 }
 /**
  *  Fires each time the component gets focused.
@@ -91,43 +79,35 @@ class AXFocusEvent extends AXHtmlEvent {
  * @category Events
  */
 class AXSelectionValueChangedEvent extends AXValueChangedEvent {
-    value = null;
-    oldValue = null;
-    selectedKeys = [];
-    selectedItems = [];
+    constructor() {
+        super(...arguments);
+        this.value = null;
+        this.oldValue = null;
+        this.selectedKeys = [];
+        this.selectedItems = [];
+    }
 }
 /**
  *  Contains range start & end values
  * @category Events
  */
 class AXRangeChangedEvent extends AXEvent {
-    /**
-     *  The range start value
-     */
-    start;
-    /**
-     *  The range end value
-     */
-    end;
 }
 
 const TAB_META_KEY = '__meta__';
 class AXComponentCloseEvent extends AXEvent {
-    data;
 }
 class AXComponentClosing {
-    cancel = false;
-    data;
+    constructor() {
+        this.cancel = false;
+    }
 }
 class AXComponentResult {
-    sender;
-    data;
 }
 /**
  *  Defines a CSS class—or multiple classes separated by spaces— which are applied to a span element inside the Button. Allows the usage of custom icons after the primary text.
  */
 class AXComponentClosedPromise extends Promise {
-    closeMethod;
     constructor(executor) {
         super(executor);
     }
@@ -138,43 +118,43 @@ class AXComponentClosedPromise extends Promise {
     }
 }
 class AXComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: AXComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: AXComponent });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: AXComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: AXComponent }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: AXComponent, decorators: [{
             type: Injectable
         }] });
 class AXClosbaleComponent extends AXComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: AXClosbaleComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: AXClosbaleComponent });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: AXClosbaleComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: AXClosbaleComponent }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: AXClosbaleComponent, decorators: [{
             type: Injectable
         }] });
 class AXSearchableComponent extends AXComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: AXSearchableComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: AXSearchableComponent });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: AXSearchableComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: AXSearchableComponent }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: AXSearchableComponent, decorators: [{
             type: Injectable
         }] });
 class AXValuableComponent extends AXComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: AXValuableComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: AXValuableComponent });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: AXValuableComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: AXValuableComponent }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: AXValuableComponent, decorators: [{
             type: Injectable
         }] });
 class AXFocusableComponent extends AXComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: AXFocusableComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: AXFocusableComponent });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: AXFocusableComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: AXFocusableComponent }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: AXFocusableComponent, decorators: [{
             type: Injectable
         }] });
 class AXPagedComponent extends AXComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: AXPagedComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: AXPagedComponent });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: AXPagedComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: AXPagedComponent }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: AXPagedComponent, decorators: [{
             type: Injectable
@@ -184,362 +164,639 @@ const AX_STYLE_COLOR_TYPES = ['primary', 'secondary', 'success', 'warning', 'dan
 const AX_LOCATIONS = ['bottom-start', 'bottom-center', 'bottom-end', 'top-start', 'top-center', 'top-end', 'center-end', 'center-start'];
 const AX_DIRECTIONS = ['vertical', 'horizontal'];
 
-const AXPositions = {
-    topStart: {
-        originX: 'start',
-        originY: 'top',
-        overlayX: 'start',
-        overlayY: 'bottom',
-    },
-    topCenter: {
-        originX: 'center',
-        originY: 'top',
-        overlayX: 'center',
-        overlayY: 'bottom',
-    },
-    topEnd: {
-        originX: 'end',
-        originY: 'top',
-        overlayX: 'end',
-        overlayY: 'bottom',
-    },
-    startStart: {
-        originX: 'start',
-        originY: 'top',
-        overlayX: 'end',
-        overlayY: 'top',
-    },
-    startCenter: {
-        originX: 'start',
-        originY: 'center',
-        overlayX: 'end',
-        overlayY: 'center',
-    },
-    startEnd: {
-        originX: 'start',
-        originY: 'bottom',
-        overlayX: 'end',
-        overlayY: 'bottom',
-    },
-    bottomStart: {
-        originX: 'start',
-        originY: 'bottom',
-        overlayX: 'start',
-        overlayY: 'top',
-    },
-    bottomCenter: {
-        originX: 'center',
-        originY: 'bottom',
-        overlayX: 'center',
-        overlayY: 'top',
-    },
-    bottomEnd: {
-        originX: 'end',
-        originY: 'bottom',
-        overlayX: 'end',
-        overlayY: 'top',
-    },
-    endStart: {
-        originX: 'end',
-        originY: 'top',
-        overlayX: 'start',
-        overlayY: 'top',
-    },
-    endCenter: {
-        originX: 'end',
-        originY: 'center',
-        overlayX: 'start',
-        overlayY: 'center',
-    },
-    endEnd: {
-        originX: 'end',
-        originY: 'bottom',
-        overlayX: 'start',
-        overlayY: 'bottom',
-    },
-};
-
-class MXBaseComponent {
-    id;
-    _cdr = inject(ChangeDetectorRef);
-    _elementRef = inject(ElementRef);
-    _viewRef = inject(ViewContainerRef);
-    get cdr() {
-        return this._cdr;
-    }
-    getHostElement() {
-        return this._elementRef.nativeElement;
-    }
-    getViewContainer() {
-        return this._viewRef;
-    }
-    onOptionChanging(option) {
-        return option?.value;
-    }
-    init() {
-        debugger;
-        this.getHostElement().__axContext__ = this;
+class AXAutoFocusDirective {
+    constructor(el, _host) {
+        this.el = el;
+        this._host = _host;
+        this.autoFocus = true;
+        this.time = 100;
     }
-    onOptionChanged = new EventEmitter();
-    setOption(option) {
-        const oldValue = this[option.name];
-        const newValue = this.onOptionChanging({
-            name: option.name,
-            value: option.value,
-        });
-        //TODO : check real changes
-        if (option.beforeCallback)
-            option.beforeCallback(oldValue, newValue);
-        if (oldValue != newValue) {
-            this[`_${option.name}`] = option.value;
-            this.onOptionChanged.emit({
-                component: this,
-                name: option.name,
-                newValue,
-                oldValue,
-            });
-            const emitter = this[`${option.name}Change`];
-            emitter?.emit(newValue);
+    ngAfterContentInit() {
+        if (this.autoFocus) {
+            const list = [
+                'button',
+                'input',
+                '[href]',
+                'select',
+                'textarea',
+                '[tabindex]',
+            ].map((c) => c + ':not([tabindex="-1"])');
+            const focusable = this.el.nativeElement.querySelector(list.join(', ')) ??
+                this.el.nativeElement;
+            const attr = document.createAttribute('autofocus');
+            focusable.setAttributeNode(attr);
+            const hasTabindex = focusable.hasAttribute('tabindex');
+            if (!hasTabindex) {
+                focusable.setAttribute('tabIndex', '0');
+            }
+            setTimeout(() => {
+                focusable.focus();
+            }, 100);
         }
-        if (option.afterCallback)
-            option.afterCallback(oldValue, newValue);
-    }
-    _rtl;
-    get rtl() {
-        if (this._rtl)
-            return this._rtl;
-        else
-            return this.getHostElement().classList.contains('ax-rtl') || window.getComputedStyle(this.getHostElement(), null).getPropertyValue('direction') === 'rtl';
-    }
-    set rtl(value) {
-        this.setOption({ name: 'rtl', value });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: MXBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: MXBaseComponent });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: AXAutoFocusDirective, deps: [{ token: i0.ElementRef }, { token: AXFocusableComponent, host: true, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.4", type: AXAutoFocusDirective, selector: "[axAutoFocus]", inputs: { autoFocus: ["axAutoFocus", "autoFocus"], time: ["focus-time", "time"] }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: MXBaseComponent, decorators: [{
-            type: Injectable
-        }] });
-const BASE_INPUTS = ['rtl'];
-const BASE_OUTPUT = [];
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: AXAutoFocusDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[axAutoFocus]',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: AXFocusableComponent, decorators: [{
+                    type: Host
+                }, {
+                    type: Self
+                }, {
+                    type: Optional
+                }] }]; }, propDecorators: { autoFocus: [{
+                type: Input,
+                args: ['axAutoFocus']
+            }], time: [{
+                type: Input,
+                args: ['focus-time']
+            }] } });
 
-class MXInteractiveComponent extends MXBaseComponent {
-    _disabled;
-    /**
-    *  If set to true, it disables the component.
-    */
-    get disabled() {
-        return this._disabled;
-    }
-    set disabled(value) {
-        this.setOption({ name: "disabled", value });
-    }
-    _tabIndex = 0;
-    /**
-    *  Specifies the tabindex of the component.
-    */
-    get tabIndex() { return this.disabled ? -1 : this._tabIndex; }
-    set tabIndex(value) {
-        this.setOption({ name: "tabIndex", value: value != null ? coerceNumberProperty(value) : 0 });
-    }
-    /**
-    *  Fires each time the component gets focused.
-    *  @event
-    */
-    onFocus = new EventEmitter();
-    emitOnFocusEvent(e) {
-        this.onFocus.emit({
-            component: this,
-            htmlElement: this.getHostElement(),
-            nativeEvent: e
-        });
+class AXNgModelChangeDebouncedDirective {
+    get ngModelChangeDebounceTime() {
+        return this._ngModelChangeDebounceTime;
     }
-    /**
-    *  Fires each time the component gets blurred.
-    *  @event
-    */
-    onBlur = new EventEmitter();
-    emitOnBlurEvent(e) {
-        this.onBlur.emit({
-            component: this,
-            htmlElement: this.getHostElement(),
-            nativeEvent: e
-        });
+    set ngModelChangeDebounceTime(v) {
+        if (v != this._ngModelChangeDebounceTime) {
+            this._ngModelChangeDebounceTime = v;
+            this.ngModelChangeDebounceTimeChange.emit(v);
+            this.update();
+        }
     }
-    constructor() {
-        super();
+    ngOnDestroy() {
+        this.subscription.unsubscribe();
     }
-    focus() {
-        AXHtmlUtil.focusElement(this.getHostElement());
+    constructor(ngModel) {
+        this.ngModel = ngModel;
+        this.ngModelChangeDebounced = new EventEmitter();
+        this.ngModelChangeDebounceTimeChange = new EventEmitter();
+        this._ngModelChangeDebounceTime = 0;
+        this.ngModelChangeDebounceTime = 0;
     }
-    /**
-    *  Check component is focused or has any focused element.
-    */
-    hasFocus() {
-        return AXHtmlUtil.hasFocus(this.getHostElement());
+    update() {
+        this.subscription?.unsubscribe();
+        //
+        this.subscription = this.ngModel.control.valueChanges.pipe(skip(1), // skip initial value
+        distinctUntilChanged(), debounceTime(this.ngModelChangeDebounceTime)).subscribe((value) => this.ngModelChangeDebounced.emit(value));
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: AXNgModelChangeDebouncedDirective, deps: [{ token: i1.NgModel }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.4", type: AXNgModelChangeDebouncedDirective, selector: "[ngModelChangeDebounced]", inputs: { ngModelChangeDebounceTime: "ngModelChangeDebounceTime" }, outputs: { ngModelChangeDebounced: "ngModelChangeDebounced", ngModelChangeDebounceTimeChange: "ngModelChangeDebounceTimeChange" }, ngImport: i0 }); }
 }
-const INTERACTIVE_INPUTS = ['disabled', 'tabIndex', ...BASE_INPUTS];
-const INTERACTIVE_OUTPUT = ['onFocus', 'onBlur', ...BASE_OUTPUT];
-
-class MXColorComponent extends MXBaseComponent {
-    constructor() {
-        super();
-    }
-    colorChange = new EventEmitter();
-    _color = 'default';
-    /**
-     *  Predefined color schemes
-     */
-    get color() {
-        return this._color;
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: AXNgModelChangeDebouncedDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngModelChangeDebounced]',
+                }]
+        }], ctorParameters: function () { return [{ type: i1.NgModel }]; }, propDecorators: { ngModelChangeDebounced: [{
+                type: Output
+            }], ngModelChangeDebounceTimeChange: [{
+                type: Output
+            }], ngModelChangeDebounceTime: [{
+                type: Input
+            }] } });
+
+class AXHotkeysService {
+    constructor(eventManager, document) {
+        this.eventManager = eventManager;
+        this.document = document;
+        this.defaults = {
+            element: this.document,
+        };
     }
-    set color(value) {
-        this.setOption({
-            name: 'color',
-            value,
-            afterCallback: () => {
-                this.cdr.markForCheck();
-            },
+    addShortcut(options) {
+        const merged = { ...this.defaults, ...options };
+        const event = `keydown.${merged.keys}`;
+        return new Observable(observer => {
+            const handler = (e) => {
+                e.preventDefault();
+                observer.next(e);
+            };
+            if (merged.element) {
+                // Todo: check addEventListener is not function
+                const dispose = this.eventManager.addEventListener(merged.element, event, handler);
+                return () => {
+                    dispose();
+                };
+            }
+            else {
+                // console.error('Element is not accessible');
+                return null;
+            }
         });
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: AXHotkeysService, deps: [{ token: i1$1.EventManager }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: AXHotkeysService, providedIn: 'root' }); }
 }
-const COLOR_INPUTS = ['color', ...BASE_INPUTS];
-const COLOR_OUTPUT = ['colorChange', ...BASE_OUTPUT];
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: AXHotkeysService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: function () { return [{ type: i1$1.EventManager }, { type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }]; } });
 
-class MXLookComponent extends MXBaseComponent {
-    constructor() {
-        super();
+class AXHotkeyDirective {
+    constructor(el, _host, hs) {
+        this.el = el;
+        this._host = _host;
+        this.hs = hs;
+        this.hotkey = '';
+        this._subs = [];
     }
-    lookChange = new EventEmitter();
-    _look = 'default';
-    /**
-    *  Predefined look schemes
-    */
-    get look() {
-        return this._look;
+    ngAfterViewInit() {
+        if (!this.hotkey || !this._host)
+            return;
+        if (typeof this.hotkey == 'string') {
+            this._addDefaultAction(this.hotkey);
+        }
+        else if (typeof this.hotkey == 'object' && !Array.isArray(this.hotkey)) {
+            this._addHotKeyAction([this.hotkey]);
+        }
+        else if (Array.isArray(this.hotkey)) {
+            this._addHotKeyAction(this.hotkey);
+        }
     }
-    set look(value) {
-        this.setOption({
-            name: 'look',
-            value,
-            afterCallback: () => {
-                this.cdr.markForCheck();
+    _addDefaultAction(hotkey) {
+        this._subs.push(this.hs.addShortcut({ keys: hotkey }).subscribe(() => {
+            ['click', 'toggle', 'open', 'focus'].forEach((a) => {
+                if (this._host[a]) {
+                    this._host[a]();
+                    return;
+                }
+            });
+        }));
+    }
+    _addHotKeyAction(hotkeys) {
+        hotkeys.forEach((k) => {
+            const hotkey = Object.entries(k)[0][0];
+            const action = Object.entries(k)[0][1];
+            if (!action)
+                this._addDefaultAction(hotkey);
+            else {
+                this._subs.push(this.hs.addShortcut({ keys: hotkey }).subscribe(() => {
+                    if (typeof action == 'string' && this._host[action]) {
+                        this._host[action]();
+                        return;
+                    }
+                    if (typeof action == 'function') {
+                        action();
+                        return;
+                    }
+                }));
             }
         });
     }
-}
-const LOOK_INPUTS = ['look', ...BASE_INPUTS];
-const LOOK_OUTPUT = ['lookChange', ...BASE_OUTPUT];
-
-class MXColorLookComponent extends classes(MXColorComponent, MXLookComponent) {
-    constructor() {
-        super();
+    ngOnDestroy() {
+        this._subs.forEach((s) => {
+            s.unsubscribe();
+        });
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: AXHotkeyDirective, deps: [{ token: i0.ElementRef }, { token: AXComponent, host: true, optional: true, self: true }, { token: AXHotkeysService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.4", type: AXHotkeyDirective, selector: "[hotkey]", inputs: { hotkey: "hotkey" }, ngImport: i0 }); }
 }
-const COLOR_LOOK_INPUTS = [...COLOR_INPUTS, ...LOOK_INPUTS];
-const COLOR_LOOK_OUTPUT = [...COLOR_OUTPUT, ...LOOK_OUTPUT];
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: AXHotkeyDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[hotkey]',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: AXComponent, decorators: [{
+                    type: Host
+                }, {
+                    type: Self
+                }, {
+                    type: Optional
+                }] }, { type: AXHotkeysService }]; }, propDecorators: { hotkey: [{
+                type: Input,
+                args: ['hotkey']
+            }] } });
 
-class MXButtonBaseComponent extends classes(MXInteractiveComponent, MXColorLookComponent) {
-    textChange = new EventEmitter();
-    _text;
-    /**
-    *  Defines the primary text to show inside the button.
-    */
-    get text() {
-        return this._text;
+;
+const AX_DEFAULT_SCROLL_POSITION = {
+    scrollHeight: 0,
+    scrollTop: 0,
+    clientHeight: 0
+};
+class AXInfiniteScrollerDirective {
+    constructor(elm) {
+        this.elm = elm;
+        this.scrollPercent = 70;
+        this.isUserScrollingDown = (positions) => {
+            return positions[0].sT < positions[1].sT;
+        };
+        this.isScrollExpectedPercent = (position) => {
+            return ((position.sT + position.cH) / position.sH) > (this.scrollPercent / 100);
+        };
     }
-    set text(v) {
-        this.setOption({
-            name: 'text',
-            value: v,
-            afterCallback: () => {
-                this.cdr.markForCheck();
-            }
-        });
+    ngAfterViewInit() {
+        this.registerScrollEvent();
+        this.streamScrollEvents();
+        this.requestCallbackOnScroll();
     }
-    toggleableChange = new EventEmitter();
-    _toggleable = false;
-    /**
-    *  Provides visual styling that indicates if the Button is active
-    */
-    get toggleable() {
-        return this._toggleable;
+    registerScrollEvent() {
+        this.scrollEvent$ = fromEvent(this.elm.nativeElement, 'scroll');
     }
-    set toggleable(value) {
-        this.setOption({
-            name: 'toggleable',
-            value
-        });
+    streamScrollEvents() {
+        this.userScrolledDown$ = this.scrollEvent$
+            .pipe(map((e) => ({
+            scrollHeight: e.target.scrollHeight,
+            scrollTop: e.target.scrollTop,
+            clientHeight: e.target.clientHeight
+        })), pairwise(), filter(positions => this.isUserScrollingDown(positions) && this.isScrollExpectedPercent(positions[1])));
     }
-    selectedChange = new EventEmitter();
-    _selected = false;
-    /**
-    *  Indicates if the Button is selected or not
-    */
-    get selected() {
-        return this._selected;
+    requestCallbackOnScroll() {
+        this.requestOnScroll$ = this.userScrolledDown$;
+        if (this.immediateCallback) {
+            this.requestOnScroll$ = this.requestOnScroll$.pipe(startWith([AX_DEFAULT_SCROLL_POSITION, AX_DEFAULT_SCROLL_POSITION]));
+        }
+        this.requestOnScroll$.pipe(exhaustMap(() => {
+            return this.scrollCallback();
+        }));
+        //.subscribe((data) => { console.log(data) }, (err) => console.log(err));
     }
-    set selected(value) {
-        this.setOption({
-            name: 'selected',
-            value,
-            afterCallback: () => {
-                this.cdr.markForCheck();
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: AXInfiniteScrollerDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.4", type: AXInfiniteScrollerDirective, selector: "[axInfiniteScroller]", inputs: { scrollCallback: "scrollCallback", immediateCallback: "immediateCallback", scrollPercent: "scrollPercent" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: AXInfiniteScrollerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[axInfiniteScroller]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { scrollCallback: [{
+                type: Input
+            }], immediateCallback: [{
+                type: Input
+            }], scrollPercent: [{
+                type: Input
+            }] } });
+
+class AXResponsiveDirective {
+    constructor(_elementRef) {
+        this._elementRef = _elementRef;
+        this._observer = new ResizeObserver(entries => {
+            for (let entry of entries) {
+                if (entry.target) {
+                    const e = entry.target;
+                    const elements = [e, ...Array.from(e.querySelectorAll(`[class*='sm:']`))];
+                    elements
+                        .map(c => ({
+                        element: c,
+                        classList: Array.from(c.classList)
+                            .filter(c => c.includes('sm'))
+                            .map(c => c.slice(3)),
+                    }))
+                        .forEach(c => {
+                        e.clientWidth < 320 ? c.element.classList.add(...c.classList) : c.element.classList.remove(...c.classList);
+                    });
+                }
             }
         });
+        this._observer.observe(_elementRef.nativeElement);
     }
-    constructor() {
-        super();
-    }
-    get cssClasses() {
-        const cssClasses = {
-            'ax-button-icon': !this.text,
-            'ax-state-disabled': this["disabled"],
-            'ax-state-selected': this.selected
-        };
-        cssClasses[`ax-${this['color'] || 'default'}${this['look'] ? '-' + this['look'] : '-default'}`] = true;
-        return cssClasses;
+    ngOnDestroy() {
+        this._observer?.disconnect();
+        this._observer?.unobserve(this._elementRef.nativeElement);
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: AXResponsiveDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.4", type: AXResponsiveDirective, selector: "[ax-responsive]", ngImport: i0 }); }
 }
-const BUTTON_INPUTS = ['text', 'toggleable', 'selected', ...INTERACTIVE_INPUTS, COLOR_LOOK_INPUTS];
-const BUTTON_OUTPUT = ['textChange', 'toggleableChange', 'selectedChange', ...INTERACTIVE_OUTPUT, COLOR_LOOK_OUTPUT];
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: AXResponsiveDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[ax-responsive]' }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
 
-class MXValueComponent extends MXBaseComponent {
-    /**
-     *  Fires each time the user press a key.
-     *  @event
-     */
-    onValueChanged = new EventEmitter();
-    valueChange = new EventEmitter();
-    stateChange = new EventEmitter();
-    _readonly = false;
-    /**
-     *  If set to true, user cannot change the value of component.
-     */
-    get readonly() {
-        return this._readonly;
-    }
-    set readonly(value) {
-        this._readonly = coerceBooleanProperty(value);
-    }
-    _name;
-    get name() {
-        return this._name;
-    }
-    set name(value) {
-        this._name = value;
-    }
-    _isUserInteraction = false;
-    get isUserInteraction() {
-        return this._isUserInteraction;
-    }
+class AXCommonModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: AXCommonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.4", ngImport: i0, type: AXCommonModule, declarations: [AXResponsiveDirective,
+            AXInfiniteScrollerDirective,
+            AXNgModelChangeDebouncedDirective,
+            AXAutoFocusDirective,
+            AXHotkeyDirective], exports: [AXResponsiveDirective,
+            AXInfiniteScrollerDirective,
+            AXAutoFocusDirective,
+            AXNgModelChangeDebouncedDirective,
+            AXHotkeyDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: AXCommonModule }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: AXCommonModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [],
+                    exports: [
+                        AXResponsiveDirective,
+                        AXInfiniteScrollerDirective,
+                        AXAutoFocusDirective,
+                        AXNgModelChangeDebouncedDirective,
+                        AXHotkeyDirective,
+                    ],
+                    declarations: [
+                        AXResponsiveDirective,
+                        AXInfiniteScrollerDirective,
+                        AXNgModelChangeDebouncedDirective,
+                        AXAutoFocusDirective,
+                        AXHotkeyDirective,
+                    ],
+                    providers: [],
+                }]
+        }] });
+
+class MXBaseComponent {
+    constructor() {
+        this._cdr = inject(ChangeDetectorRef);
+        this._elementRef = inject(ElementRef);
+        this._viewRef = inject(ViewContainerRef);
+        this.onOptionChanged = new EventEmitter();
+    }
+    get cdr() {
+        return this._cdr;
+    }
+    getHostElement() {
+        return this._elementRef.nativeElement;
+    }
+    getViewContainer() {
+        return this._viewRef;
+    }
+    onOptionChanging(option) {
+        return option?.value;
+    }
+    init() {
+        debugger;
+        this.getHostElement().__axContext__ = this;
+    }
+    setOption(option) {
+        const oldValue = this[option.name];
+        const newValue = this.onOptionChanging({
+            name: option.name,
+            value: option.value,
+        });
+        //TODO : check real changes
+        if (option.beforeCallback)
+            option.beforeCallback(oldValue, newValue);
+        if (oldValue != newValue) {
+            this[`_${option.name}`] = option.value;
+            this.onOptionChanged.emit({
+                component: this,
+                name: option.name,
+                newValue,
+                oldValue,
+            });
+            const emitter = this[`${option.name}Change`];
+            emitter?.emit(newValue);
+        }
+        if (option.afterCallback)
+            option.afterCallback(oldValue, newValue);
+    }
+    get rtl() {
+        if (this._rtl)
+            return this._rtl;
+        else
+            return (this.getHostElement().classList.contains('ax-rtl') ||
+                window.getComputedStyle(this.getHostElement(), null).getPropertyValue('direction') === 'rtl');
+    }
+    set rtl(value) {
+        this.setOption({ name: 'rtl', value });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: MXBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: MXBaseComponent }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: MXBaseComponent, decorators: [{
+            type: Injectable
+        }] });
+const BASE_INPUTS = ['rtl'];
+const BASE_OUTPUT = [];
+
+class MXColorComponent extends MXBaseComponent {
+    constructor() {
+        super();
+        this.colorChange = new EventEmitter();
+        this._color = 'default';
+    }
+    /**
+     *  Predefined color schemes
+     */
+    get color() {
+        return this._color;
+    }
+    set color(value) {
+        this.setOption({
+            name: 'color',
+            value,
+            afterCallback: () => {
+                this.cdr.markForCheck();
+            },
+        });
+    }
+}
+const COLOR_INPUTS = ['color', ...BASE_INPUTS];
+const COLOR_OUTPUT = ['colorChange', ...BASE_OUTPUT];
+
+class MXLookComponent extends MXBaseComponent {
+    constructor() {
+        super();
+        this.lookChange = new EventEmitter();
+        this._look = 'default';
+    }
+    /**
+     *  Predefined look schemes
+     */
+    get look() {
+        return this._look;
+    }
+    set look(value) {
+        this.setOption({
+            name: 'look',
+            value,
+            afterCallback: () => {
+                this.cdr.markForCheck();
+            },
+        });
+    }
+}
+const LOOK_INPUTS = ['look', ...BASE_INPUTS];
+const LOOK_OUTPUT = ['lookChange', ...BASE_OUTPUT];
+
+class MXColorLookComponent extends classes(MXColorComponent, MXLookComponent) {
+    constructor() {
+        super();
+    }
+}
+const COLOR_LOOK_INPUTS = [...COLOR_INPUTS, ...LOOK_INPUTS];
+const COLOR_LOOK_OUTPUT = [...COLOR_OUTPUT, ...LOOK_OUTPUT];
+
+class MXInteractiveComponent extends MXBaseComponent {
+    /**
+     *  If set to true, it disables the component.
+     */
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(value) {
+        this.setOption({ name: 'disabled', value });
+    }
+    /**
+     *  Specifies the tabindex of the component.
+     */
+    get tabIndex() {
+        return this.disabled ? -1 : this._tabIndex;
+    }
+    set tabIndex(value) {
+        this.setOption({ name: 'tabIndex', value: value != null ? coerceNumberProperty(value) : 0 });
+    }
+    emitOnFocusEvent(e) {
+        this.onFocus.emit({
+            component: this,
+            htmlElement: this.getHostElement(),
+            nativeEvent: e,
+        });
+    }
+    emitOnBlurEvent(e) {
+        this.onBlur.emit({
+            component: this,
+            htmlElement: this.getHostElement(),
+            nativeEvent: e,
+        });
+    }
+    constructor() {
+        super();
+        this._tabIndex = 0;
+        /**
+         *  Fires each time the component gets focused.
+         *  @event
+         */
+        this.onFocus = new EventEmitter();
+        /**
+         *  Fires each time the component gets blurred.
+         *  @event
+         */
+        this.onBlur = new EventEmitter();
+    }
+    focus() {
+        AXHtmlUtil.focusElement(this.getHostElement());
+    }
+    /**
+     *  Check component is focused or has any focused element.
+     */
+    hasFocus() {
+        return AXHtmlUtil.hasFocus(this.getHostElement());
+    }
+}
+const INTERACTIVE_INPUTS = ['disabled', 'tabIndex', ...BASE_INPUTS];
+const INTERACTIVE_OUTPUT = ['onFocus', 'onBlur', ...BASE_OUTPUT];
+
+class MXButtonBaseComponent extends classes(MXInteractiveComponent, MXColorLookComponent) {
+    /**
+     *  Defines the primary text to show inside the button.
+     */
+    get text() {
+        return this._text;
+    }
+    set text(v) {
+        this.setOption({
+            name: 'text',
+            value: v,
+            afterCallback: () => {
+                this.cdr.markForCheck();
+            },
+        });
+    }
+    /**
+     *  Provides visual styling that indicates if the Button is active
+     */
+    get toggleable() {
+        return this._toggleable;
+    }
+    set toggleable(value) {
+        this.setOption({
+            name: 'toggleable',
+            value,
+        });
+    }
+    /**
+     *  Indicates if the Button is selected or not
+     */
+    get selected() {
+        return this._selected;
+    }
+    set selected(value) {
+        this.setOption({
+            name: 'selected',
+            value,
+            afterCallback: () => {
+                this.cdr.markForCheck();
+            },
+        });
+    }
+    constructor() {
+        super();
+        this.textChange = new EventEmitter();
+        this.toggleableChange = new EventEmitter();
+        this._toggleable = false;
+        this.selectedChange = new EventEmitter();
+        this._selected = false;
+    }
+    get cssClasses() {
+        const cssClasses = {
+            'ax-button-icon': !this.text,
+            'ax-state-disabled': this['disabled'],
+            'ax-state-selected': this.selected,
+        };
+        cssClasses[`ax-${this['color'] || 'default'}${this['look'] ? '-' + this['look'] : '-default'}`] = true;
+        return cssClasses;
+    }
+}
+const BUTTON_INPUTS = [
+    'text',
+    'toggleable',
+    'selected',
+    ...INTERACTIVE_INPUTS,
+    COLOR_LOOK_INPUTS,
+];
+const BUTTON_OUTPUT = [
+    'textChange',
+    'toggleableChange',
+    'selectedChange',
+    ...INTERACTIVE_OUTPUT,
+    COLOR_LOOK_OUTPUT,
+];
+
+class MXValueComponent extends MXBaseComponent {
+    constructor() {
+        super(...arguments);
+        /**
+         *  Fires each time the user press a key.
+         *  @event
+         */
+        this.onValueChanged = new EventEmitter();
+        this.valueChange = new EventEmitter();
+        this.stateChange = new EventEmitter();
+        this._readonly = false;
+        this._isUserInteraction = false;
+        this._state = 'clear';
+    }
+    /**
+     *  If set to true, user cannot change the value of component.
+     */
+    get readonly() {
+        return this._readonly;
+    }
+    set readonly(value) {
+        this._readonly = coerceBooleanProperty(value);
+    }
+    get name() {
+        return this._name;
+    }
+    set name(value) {
+        this._name = value;
+    }
+    get isUserInteraction() {
+        return this._isUserInteraction;
+    }
     set isUserInteraction(value) {
         this._isUserInteraction = value;
     }
-    initValue;
-    defaultValue;
-    _value;
     get value() {
         return this.getValue(this._value) || this.defaultValue;
     }
@@ -564,7 +821,6 @@ class MXValueComponent extends MXBaseComponent {
         this._isUserInteraction = false;
         //}
     }
-    _state = 'clear';
     get state() {
         return this._state;
     }
@@ -586,449 +842,204 @@ class MXValueComponent extends MXBaseComponent {
     setValue(value) {
         return value;
     }
-    getValue(value) {
-        return value;
-    }
-    ngOnInit() {
-        super.init();
-        this.getHostElement().setAttribute('ax-form-input', 'true');
-    }
-    ngAfterViewInit() {
-        this._checkRequired();
-    }
-    ngOnDestroy() {
-        this.onValueChanged?.unsubscribe();
-        this.onOptionChanged?.unsubscribe();
-    }
-    clear() {
-        this.value = null;
-    }
-    _checkRequired() {
-        const isRequired = Array.from(this.getHostElement().querySelectorAll('ax-validation-rule')).some(c => c.__axContext__.enabled && c.__axContext__.rule == 'required');
-        //
-        if (isRequired) {
-            const container = this.getHostElement().classList.contains('ax-editor-container') ? this.getHostElement() : this.getHostElement().querySelector('.ax-editor-container');
-            const formField = container?.closest('.ax-form-field');
-            const label = formField?.querySelector('ax-label')?.__axContext__;
-            if (label)
-                label.required = true;
-        }
-    }
-    validate() {
-        debugger;
-        const rules = Array.from(this.getHostElement().querySelectorAll('ax-validation-rule')).filter(c => c.__axContext__.enabled);
-        //
-        if (!rules || rules.length === 0) {
-            this.setState('clear');
-            return Promise.resolve({
-                result: true,
-                value: this.value,
-                name: this.name,
-                id: this.id,
-            });
-        }
-        return new Promise(resolve => {
-            Promise.all(rules
-                .filter(c => typeof c?.validate === 'function')
-                .map(c => {
-                return c.validate(this.value);
-            })).then(d => {
-                const error = d.find(c => c.result === false);
-                if (error) {
-                    this.setState('error', error.message);
-                    resolve({
-                        result: false,
-                        value: this.value,
-                        message: error.message,
-                        name: this.name,
-                        id: this.id,
-                    });
-                }
-                else {
-                    this.setState('success');
-                    resolve({
-                        result: true,
-                        value: this.value,
-                        name: this.name,
-                        id: this.id,
-                    });
-                }
-            });
-        });
-    }
-    setState(state, ...args) {
-        const container = this.getHostElement().classList.contains('ax-editor-container') ? this.getHostElement() : this.getHostElement().querySelector('.ax-editor-container');
-        const formField = container?.closest('.ax-form-field');
-        const label = formField?.querySelector('ax-label') || formField?.querySelector('label');
-        let target = container || this.getHostElement().firstElementChild;
-        if (target?.querySelector('.ax-error-container')) {
-            target = target.querySelector('.ax-error-container');
-        }
-        const parent = target?.parentElement;
-        if (!target || !parent)
-            return;
-        switch (state) {
-            case 'clear':
-                this._state = 'clear';
-                if (parent.querySelector('span.ax-error-message')) {
-                    parent.removeChild(parent.querySelector('span.ax-error-message'));
-                }
-                label?.classList.remove('ax-state-error');
-                target.classList.remove('ax-state-error', 'ax-state-success');
-                break;
-            case 'success':
-                this.setState('clear');
-                target.classList.add('ax-state-success');
-                this._state = 'success';
-                break;
-            case 'error':
-                this.setState('clear');
-                if (args[0]) {
-                    const span = document.createElement('span');
-                    span.innerText = args[0];
-                    span.classList.add('ax-error-message');
-                    parent.appendChild(span);
-                }
-                label?.classList.add('ax-state-error');
-                target.classList.add('ax-state-error');
-                this._state = 'error';
-                break;
-        }
-        this.cdr.markForCheck();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: MXValueComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: MXValueComponent });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: MXValueComponent, decorators: [{
-            type: Injectable
-        }] });
-
-class AXAutoFocusDirective {
-    el;
-    _host;
-    autoFocus = true;
-    constructor(el, _host) {
-        this.el = el;
-        this._host = _host;
-    }
-    time = 100;
-    ngAfterContentInit() {
-        if (this.autoFocus) {
-            const list = [
-                'button',
-                'input',
-                '[href]',
-                'select',
-                'textarea',
-                '[tabindex]',
-            ].map((c) => c + ':not([tabindex="-1"])');
-            const focusable = this.el.nativeElement.querySelector(list.join(', ')) ??
-                this.el.nativeElement;
-            const attr = document.createAttribute('autofocus');
-            focusable.setAttributeNode(attr);
-            const hasTabindex = focusable.hasAttribute('tabindex');
-            if (!hasTabindex) {
-                focusable.setAttribute('tabIndex', '0');
-            }
-            setTimeout(() => {
-                focusable.focus();
-            }, 100);
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: AXAutoFocusDirective, deps: [{ token: i0.ElementRef }, { token: AXFocusableComponent, host: true, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.4", type: AXAutoFocusDirective, selector: "[axAutoFocus]", inputs: { autoFocus: ["axAutoFocus", "autoFocus"], time: ["focus-time", "time"] }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: AXAutoFocusDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[axAutoFocus]',
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: AXFocusableComponent, decorators: [{
-                    type: Host
-                }, {
-                    type: Self
-                }, {
-                    type: Optional
-                }] }]; }, propDecorators: { autoFocus: [{
-                type: Input,
-                args: ['axAutoFocus']
-            }], time: [{
-                type: Input,
-                args: ['focus-time']
-            }] } });
-
-class AXNgModelChangeDebouncedDirective {
-    ngModel;
-    ngModelChangeDebounced = new EventEmitter();
-    ngModelChangeDebounceTimeChange = new EventEmitter();
-    _ngModelChangeDebounceTime = 0;
-    get ngModelChangeDebounceTime() {
-        return this._ngModelChangeDebounceTime;
-    }
-    set ngModelChangeDebounceTime(v) {
-        if (v != this._ngModelChangeDebounceTime) {
-            this._ngModelChangeDebounceTime = v;
-            this.ngModelChangeDebounceTimeChange.emit(v);
-            this.update();
-        }
-    }
-    subscription;
-    ngOnDestroy() {
-        this.subscription.unsubscribe();
-    }
-    constructor(ngModel) {
-        this.ngModel = ngModel;
-        this.ngModelChangeDebounceTime = 0;
-    }
-    update() {
-        this.subscription?.unsubscribe();
-        //
-        this.subscription = this.ngModel.control.valueChanges.pipe(skip(1), // skip initial value
-        distinctUntilChanged(), debounceTime(this.ngModelChangeDebounceTime)).subscribe((value) => this.ngModelChangeDebounced.emit(value));
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: AXNgModelChangeDebouncedDirective, deps: [{ token: i1.NgModel }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.4", type: AXNgModelChangeDebouncedDirective, selector: "[ngModelChangeDebounced]", inputs: { ngModelChangeDebounceTime: "ngModelChangeDebounceTime" }, outputs: { ngModelChangeDebounced: "ngModelChangeDebounced", ngModelChangeDebounceTimeChange: "ngModelChangeDebounceTimeChange" }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: AXNgModelChangeDebouncedDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[ngModelChangeDebounced]',
-                }]
-        }], ctorParameters: function () { return [{ type: i1.NgModel }]; }, propDecorators: { ngModelChangeDebounced: [{
-                type: Output
-            }], ngModelChangeDebounceTimeChange: [{
-                type: Output
-            }], ngModelChangeDebounceTime: [{
-                type: Input
-            }] } });
-
-class AXHotkeysService {
-    eventManager;
-    document;
-    defaults = {
-        element: this.document,
-    };
-    constructor(eventManager, document) {
-        this.eventManager = eventManager;
-        this.document = document;
-    }
-    addShortcut(options) {
-        const merged = { ...this.defaults, ...options };
-        const event = `keydown.${merged.keys}`;
-        return new Observable(observer => {
-            const handler = (e) => {
-                e.preventDefault();
-                observer.next(e);
-            };
-            if (merged.element) {
-                // Todo: check addEventListener is not function
-                const dispose = this.eventManager.addEventListener(merged.element, event, handler);
-                return () => {
-                    dispose();
-                };
-            }
-            else {
-                // console.error('Element is not accessible');
-                return null;
-            }
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: AXHotkeysService, deps: [{ token: i1$1.EventManager }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: AXHotkeysService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: AXHotkeysService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: function () { return [{ type: i1$1.EventManager }, { type: Document, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }]; } });
-
-class AXHotkeyDirective {
-    el;
-    _host;
-    hs;
-    hotkey = '';
-    _subs = [];
-    constructor(el, _host, hs) {
-        this.el = el;
-        this._host = _host;
-        this.hs = hs;
-    }
-    ngAfterViewInit() {
-        if (!this.hotkey || !this._host)
-            return;
-        if (typeof this.hotkey == 'string') {
-            this._addDefaultAction(this.hotkey);
-        }
-        else if (typeof this.hotkey == 'object' && !Array.isArray(this.hotkey)) {
-            this._addHotKeyAction([this.hotkey]);
-        }
-        else if (Array.isArray(this.hotkey)) {
-            this._addHotKeyAction(this.hotkey);
-        }
-    }
-    _addDefaultAction(hotkey) {
-        this._subs.push(this.hs.addShortcut({ keys: hotkey }).subscribe(() => {
-            ['click', 'toggle', 'open', 'focus'].forEach((a) => {
-                if (this._host[a]) {
-                    this._host[a]();
-                    return;
-                }
-            });
-        }));
-    }
-    _addHotKeyAction(hotkeys) {
-        hotkeys.forEach((k) => {
-            const hotkey = Object.entries(k)[0][0];
-            const action = Object.entries(k)[0][1];
-            if (!action)
-                this._addDefaultAction(hotkey);
-            else {
-                this._subs.push(this.hs.addShortcut({ keys: hotkey }).subscribe(() => {
-                    if (typeof action == 'string' && this._host[action]) {
-                        this._host[action]();
-                        return;
-                    }
-                    if (typeof action == 'function') {
-                        action();
-                        return;
-                    }
-                }));
-            }
-        });
-    }
-    ngOnDestroy() {
-        this._subs.forEach((s) => {
-            s.unsubscribe();
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: AXHotkeyDirective, deps: [{ token: i0.ElementRef }, { token: AXComponent, host: true, optional: true, self: true }, { token: AXHotkeysService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.4", type: AXHotkeyDirective, selector: "[hotkey]", inputs: { hotkey: "hotkey" }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: AXHotkeyDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[hotkey]',
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: AXComponent, decorators: [{
-                    type: Host
-                }, {
-                    type: Self
-                }, {
-                    type: Optional
-                }] }, { type: AXHotkeysService }]; }, propDecorators: { hotkey: [{
-                type: Input,
-                args: ['hotkey']
-            }] } });
-
-;
-const AX_DEFAULT_SCROLL_POSITION = {
-    scrollHeight: 0,
-    scrollTop: 0,
-    clientHeight: 0
-};
-class AXInfiniteScrollerDirective {
-    elm;
-    scrollEvent$;
-    userScrolledDown$;
-    requestOnScroll$;
-    scrollCallback;
-    immediateCallback;
-    scrollPercent = 70;
-    constructor(elm) {
-        this.elm = elm;
-    }
+    getValue(value) {
+        return value;
+    }
+    ngOnInit() {
+        super.init();
+        this.getHostElement().setAttribute('ax-form-input', 'true');
+    }
     ngAfterViewInit() {
-        this.registerScrollEvent();
-        this.streamScrollEvents();
-        this.requestCallbackOnScroll();
+        this._checkRequired();
     }
-    registerScrollEvent() {
-        this.scrollEvent$ = fromEvent(this.elm.nativeElement, 'scroll');
+    ngOnDestroy() {
+        this.onValueChanged?.unsubscribe();
+        this.onOptionChanged?.unsubscribe();
     }
-    streamScrollEvents() {
-        this.userScrolledDown$ = this.scrollEvent$
-            .pipe(map((e) => ({
-            scrollHeight: e.target.scrollHeight,
-            scrollTop: e.target.scrollTop,
-            clientHeight: e.target.clientHeight
-        })), pairwise(), filter(positions => this.isUserScrollingDown(positions) && this.isScrollExpectedPercent(positions[1])));
+    clear() {
+        this.value = null;
     }
-    requestCallbackOnScroll() {
-        this.requestOnScroll$ = this.userScrolledDown$;
-        if (this.immediateCallback) {
-            this.requestOnScroll$ = this.requestOnScroll$.pipe(startWith([AX_DEFAULT_SCROLL_POSITION, AX_DEFAULT_SCROLL_POSITION]));
+    _checkRequired() {
+        const isRequired = Array.from(this.getHostElement().querySelectorAll('ax-validation-rule')).some(c => c.__axContext__.enabled && c.__axContext__.rule == 'required');
+        //
+        if (isRequired) {
+            const container = this.getHostElement().classList.contains('ax-editor-container') ? this.getHostElement() : this.getHostElement().querySelector('.ax-editor-container');
+            const formField = container?.closest('.ax-form-field');
+            const label = formField?.querySelector('ax-label')?.__axContext__;
+            if (label)
+                label.required = true;
         }
-        this.requestOnScroll$.pipe(exhaustMap(() => {
-            return this.scrollCallback();
-        }));
-        //.subscribe((data) => { console.log(data) }, (err) => console.log(err));
     }
-    isUserScrollingDown = (positions) => {
-        return positions[0].sT < positions[1].sT;
-    };
-    isScrollExpectedPercent = (position) => {
-        return ((position.sT + position.cH) / position.sH) > (this.scrollPercent / 100);
-    };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: AXInfiniteScrollerDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.4", type: AXInfiniteScrollerDirective, selector: "[axInfiniteScroller]", inputs: { scrollCallback: "scrollCallback", immediateCallback: "immediateCallback", scrollPercent: "scrollPercent" }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: AXInfiniteScrollerDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[axInfiniteScroller]'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { scrollCallback: [{
-                type: Input
-            }], immediateCallback: [{
-                type: Input
-            }], scrollPercent: [{
-                type: Input
-            }] } });
-
-class AXResponsiveDirective {
-    _elementRef;
-    _observer = new ResizeObserver(entries => {
-        for (let entry of entries) {
-            if (entry.target) {
-                const e = entry.target;
-                const elements = [e, ...Array.from(e.querySelectorAll(`[class*='sm:']`))];
-                elements
-                    .map(c => ({
-                    element: c,
-                    classList: Array.from(c.classList)
-                        .filter(c => c.includes('sm'))
-                        .map(c => c.slice(3)),
-                }))
-                    .forEach(c => {
-                    e.clientWidth < 320 ? c.element.classList.add(...c.classList) : c.element.classList.remove(...c.classList);
-                });
-            }
+    validate() {
+        debugger;
+        const rules = Array.from(this.getHostElement().querySelectorAll('ax-validation-rule')).filter(c => c.__axContext__.enabled);
+        //
+        if (!rules || rules.length === 0) {
+            this.setState('clear');
+            return Promise.resolve({
+                result: true,
+                value: this.value,
+                name: this.name,
+                id: this.id,
+            });
         }
-    });
-    constructor(_elementRef) {
-        this._elementRef = _elementRef;
-        this._observer.observe(_elementRef.nativeElement);
+        return new Promise(resolve => {
+            Promise.all(rules
+                .filter(c => typeof c?.validate === 'function')
+                .map(c => {
+                return c.validate(this.value);
+            })).then(d => {
+                const error = d.find(c => c.result === false);
+                if (error) {
+                    this.setState('error', error.message);
+                    resolve({
+                        result: false,
+                        value: this.value,
+                        message: error.message,
+                        name: this.name,
+                        id: this.id,
+                    });
+                }
+                else {
+                    this.setState('success');
+                    resolve({
+                        result: true,
+                        value: this.value,
+                        name: this.name,
+                        id: this.id,
+                    });
+                }
+            });
+        });
     }
-    ngOnDestroy() {
-        this._observer?.disconnect();
-        this._observer?.unobserve(this._elementRef.nativeElement);
+    setState(state, ...args) {
+        const container = this.getHostElement().classList.contains('ax-editor-container') ? this.getHostElement() : this.getHostElement().querySelector('.ax-editor-container');
+        const formField = container?.closest('.ax-form-field');
+        const label = formField?.querySelector('ax-label') || formField?.querySelector('label');
+        let target = container || this.getHostElement().firstElementChild;
+        if (target?.querySelector('.ax-error-container')) {
+            target = target.querySelector('.ax-error-container');
+        }
+        const parent = target?.parentElement;
+        if (!target || !parent)
+            return;
+        switch (state) {
+            case 'clear':
+                this._state = 'clear';
+                if (parent.querySelector('span.ax-error-message')) {
+                    parent.removeChild(parent.querySelector('span.ax-error-message'));
+                }
+                label?.classList.remove('ax-state-error');
+                target.classList.remove('ax-state-error', 'ax-state-success');
+                break;
+            case 'success':
+                this.setState('clear');
+                target.classList.add('ax-state-success');
+                this._state = 'success';
+                break;
+            case 'error':
+                this.setState('clear');
+                if (args[0]) {
+                    const span = document.createElement('span');
+                    span.innerText = args[0];
+                    span.classList.add('ax-error-message');
+                    parent.appendChild(span);
+                }
+                label?.classList.add('ax-state-error');
+                target.classList.add('ax-state-error');
+                this._state = 'error';
+                break;
+        }
+        this.cdr.markForCheck();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: AXResponsiveDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.4", type: AXResponsiveDirective, selector: "[ax-responsive]", ngImport: i0 });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: MXValueComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: MXValueComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: AXResponsiveDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: '[ax-responsive]' }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: MXValueComponent, decorators: [{
+            type: Injectable
+        }] });
+
+const AXPositions = {
+    topStart: {
+        originX: 'start',
+        originY: 'top',
+        overlayX: 'start',
+        overlayY: 'bottom',
+    },
+    topCenter: {
+        originX: 'center',
+        originY: 'top',
+        overlayX: 'center',
+        overlayY: 'bottom',
+    },
+    topEnd: {
+        originX: 'end',
+        originY: 'top',
+        overlayX: 'end',
+        overlayY: 'bottom',
+    },
+    startStart: {
+        originX: 'start',
+        originY: 'top',
+        overlayX: 'end',
+        overlayY: 'top',
+    },
+    startCenter: {
+        originX: 'start',
+        originY: 'center',
+        overlayX: 'end',
+        overlayY: 'center',
+    },
+    startEnd: {
+        originX: 'start',
+        originY: 'bottom',
+        overlayX: 'end',
+        overlayY: 'bottom',
+    },
+    bottomStart: {
+        originX: 'start',
+        originY: 'bottom',
+        overlayX: 'start',
+        overlayY: 'top',
+    },
+    bottomCenter: {
+        originX: 'center',
+        originY: 'bottom',
+        overlayX: 'center',
+        overlayY: 'top',
+    },
+    bottomEnd: {
+        originX: 'end',
+        originY: 'bottom',
+        overlayX: 'end',
+        overlayY: 'top',
+    },
+    endStart: {
+        originX: 'end',
+        originY: 'top',
+        overlayX: 'start',
+        overlayY: 'top',
+    },
+    endCenter: {
+        originX: 'end',
+        originY: 'center',
+        overlayX: 'start',
+        overlayY: 'center',
+    },
+    endEnd: {
+        originX: 'end',
+        originY: 'bottom',
+        overlayX: 'start',
+        overlayY: 'bottom',
+    },
+};
 
 class DynamicOverlayContainer extends OverlayContainer {
     setContainerElement(containerElement) {
         this._containerElement = containerElement;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DynamicOverlayContainer, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DynamicOverlayContainer, providedIn: 'root' });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DynamicOverlayContainer, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DynamicOverlayContainer, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DynamicOverlayContainer, decorators: [{
             type: Injectable,
@@ -1037,8 +1048,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImpor
                 }]
         }] });
 class DynamicOverlay extends Overlay {
-    _dynamicOverlayContainer;
-    renderer;
     constructor(scrollStrategies, _overlayContainer, _componentFactoryResolver, _positionBuilder, _keyboardDispatcher, _injector, _ngZone, _document, _directionality, rendererFactory, _location, _outsideClickDispatcher) {
         super(scrollStrategies, _overlayContainer, _componentFactoryResolver, _positionBuilder, _keyboardDispatcher, _injector, _ngZone, _document, _directionality, _location, _outsideClickDispatcher);
         this.renderer = rendererFactory.createRenderer(null, null);
@@ -1052,8 +1061,8 @@ class DynamicOverlay extends Overlay {
         this.setContainerElement(containerElement);
         return super.create(config);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DynamicOverlay, deps: [{ token: i1$2.ScrollStrategyOptions }, { token: DynamicOverlayContainer }, { token: i0.ComponentFactoryResolver }, { token: i1$2.OverlayPositionBuilder }, { token: i1$2.OverlayKeyboardDispatcher }, { token: i0.Injector }, { token: i0.NgZone }, { token: DOCUMENT }, { token: i2.Directionality }, { token: i0.RendererFactory2 }, { token: i3.Location }, { token: i1$2.OverlayOutsideClickDispatcher }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DynamicOverlay, providedIn: 'root' });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DynamicOverlay, deps: [{ token: i1$2.ScrollStrategyOptions }, { token: DynamicOverlayContainer }, { token: i0.ComponentFactoryResolver }, { token: i1$2.OverlayPositionBuilder }, { token: i1$2.OverlayKeyboardDispatcher }, { token: i0.Injector }, { token: i0.NgZone }, { token: DOCUMENT }, { token: i2.Directionality }, { token: i0.RendererFactory2 }, { token: i3.Location }, { token: i1$2.OverlayOutsideClickDispatcher }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DynamicOverlay, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DynamicOverlay, decorators: [{
             type: Injectable,
@@ -1066,10 +1075,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImpor
                 }] }, { type: i2.Directionality }, { type: i0.RendererFactory2 }, { type: i3.Location }, { type: i1$2.OverlayOutsideClickDispatcher }]; } });
 
 class AXOverlayService {
-    overlayService;
-    overlayService2;
-    appRef;
-    portal;
     constructor(overlayService, overlayService2, appRef) {
         this.overlayService = overlayService;
         this.overlayService2 = overlayService2;
@@ -1166,49 +1171,14 @@ class AXOverlayService {
             },
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: AXOverlayService, deps: [{ token: DynamicOverlay }, { token: i1$2.Overlay }, { token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: AXOverlayService, providedIn: 'root' });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: AXOverlayService, deps: [{ token: DynamicOverlay }, { token: i1$2.Overlay }, { token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: AXOverlayService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: AXOverlayService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: function () { return [{ type: DynamicOverlay }, { type: i1$2.Overlay }, { type: i0.ApplicationRef }]; } });
 
-class AXCommonModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: AXCommonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.4", ngImport: i0, type: AXCommonModule, declarations: [AXResponsiveDirective,
-            AXInfiniteScrollerDirective,
-            AXNgModelChangeDebouncedDirective,
-            AXAutoFocusDirective,
-            AXHotkeyDirective], exports: [AXResponsiveDirective,
-            AXInfiniteScrollerDirective,
-            AXAutoFocusDirective,
-            AXNgModelChangeDebouncedDirective,
-            AXHotkeyDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: AXCommonModule });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: AXCommonModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [],
-                    exports: [
-                        AXResponsiveDirective,
-                        AXInfiniteScrollerDirective,
-                        AXAutoFocusDirective,
-                        AXNgModelChangeDebouncedDirective,
-                        AXHotkeyDirective,
-                    ],
-                    declarations: [
-                        AXResponsiveDirective,
-                        AXInfiniteScrollerDirective,
-                        AXNgModelChangeDebouncedDirective,
-                        AXAutoFocusDirective,
-                        AXHotkeyDirective,
-                    ],
-                    providers: [],
-                }]
-        }] });
-
 /**
  * Generated bundle index. Do not edit.
  */