@acorex/components 7.2.8 → 7.3.1

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

@@ -1 +1 @@
-{"version":3,"file":"acorex-components-drawer.mjs","sources":["../../../../libs/components/drawer/src/lib/drawer-container.component.ts","../../../../libs/components/drawer/src/lib/drawer.component.ts","../../../../libs/components/drawer/src/lib/drawer.module.ts","../../../../libs/components/drawer/src/acorex-components-drawer.ts"],"sourcesContent":["import { AXBaseComponentMixin } from '@acorex/components/mixin';\nimport {\n  Component,\n  ViewEncapsulation,\n  ChangeDetectionStrategy,\n  ElementRef,\n  ChangeDetectorRef,\n  NgZone,\n} from '@angular/core';\nimport { AXDrawerComponent } from './drawer.component';\n\n@Component({\n  selector: 'ax-drawer-container',\n  template: `\n    <ng-content select=\"ax-drawer[location='start']\"> </ng-content>\n    <ng-content select=\"ax-content\"> </ng-content>\n    <ng-content select=\"ax-drawer[location='end']\"> </ng-content>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n})\nexport class AXDrawerContainerComponent extends AXBaseComponentMixin {\n  constructor(\n    elementRef: ElementRef,\n    cdr: ChangeDetectorRef,\n    private _zone: NgZone\n  ) {\n    super(elementRef, cdr);\n  }\n\n  ngDoCheck() {\n    const host = this._getHostElement();\n    Array.from(host.querySelectorAll('ax-drawer'))\n      .map((c) => c['__axContext__'] as AXDrawerComponent)\n      .some((c) => !c?.collapsed)\n      ? host.classList.add('ax-visible')\n      : host.classList.remove('ax-visible');\n  }\n}\n","import { AXClosbaleComponent, AXComponent } from '@acorex/components/common';\nimport { AXBaseComponentMixin, AXComponentOptionChanged } from '@acorex/components/mixin';\nimport {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ElementRef,\n  EventEmitter,\n  HostBinding,\n  Input,\n  NgZone,\n  Output,\n  ViewEncapsulation,\n} from '@angular/core';\n\nexport type AXDrawerMode = 'push' | 'overlay';\nexport type AXDrawerLocation = 'start' | 'end';\n\n@Component({\n  selector: 'ax-drawer',\n  template: `\n    <ng-content select=\"ax-header\"></ng-content>\n    <ng-content select=\"ax-content\"></ng-content>\n  `,\n  styleUrls: ['./drawer.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  providers: [\n    { provide: AXComponent, useExisting: AXDrawerComponent },\n    { provide: AXClosbaleComponent, useExisting: AXDrawerComponent },\n  ],\n})\nexport class AXDrawerComponent extends AXBaseComponentMixin {\n  constructor(private _elementRef: ElementRef, _cdr: ChangeDetectorRef, private _zone: NgZone) {\n    super(_elementRef, _cdr);\n  }\n\n  @Output()\n  public locationChange: EventEmitter<AXDrawerLocation> = new EventEmitter<AXDrawerLocation>();\n\n  private _location: AXDrawerLocation = 'start';\n  @Input()\n  public get location(): AXDrawerLocation {\n    return this._location;\n  }\n  public set location(v: AXDrawerLocation) {\n    this._setOption({\n      name: 'location',\n      value: v,\n    });\n  }\n\n  @Output()\n  public modeChange: EventEmitter<AXDrawerMode> = new EventEmitter<AXDrawerMode>();\n\n  private _mode: AXDrawerMode = 'overlay';\n  @Input()\n  public get mode(): AXDrawerMode {\n    return this._mode;\n  }\n  public set mode(v: AXDrawerMode) {\n    this._setOption({\n      name: 'mode',\n      value: v,\n    });\n  }\n\n  @Output()\n  public collapsedChange: EventEmitter<boolean> = new EventEmitter<boolean>();\n\n  private _collapsed: boolean = true;\n  @Input()\n  public get collapsed(): boolean {\n    return this._collapsed;\n  }\n  public set collapsed(v: boolean) {\n    this._setOption({\n      name: 'collapsed',\n      value: v,\n    });\n  }\n\n  override onViewInit(): void {\n    // setTimeout(() => {\n    //     this._loaded = true;\n    //     this._checkProps();\n    // }, 1000);\n    this._detectBoundingSize();\n  }\n\n  override _onOptionChanged(option: AXComponentOptionChanged): void {\n    this._checkProps();\n  }\n\n  ngDoCheck() {\n    this._detectBoundingSize();\n  }\n\n  private _detectBoundingSize() {\n    this._zone.runOutsideAngular(() => {\n      const host = this._getHostElement();\n      if (host.clientWidth) host.style.setProperty('--ax-el-width', `${host.clientWidth}px`);\n    });\n  }\n\n  private _checkProps() {\n    this._detectBoundingSize();\n    this._removeBackdrop();\n    if (this.mode == 'overlay') {\n      if (!this.collapsed) {\n        this._addBackdrop();\n      }\n    }\n  }\n\n  toggle() {\n    this.collapsed = !this.collapsed;\n  }\n\n  close() {\n    this.collapsed = true;\n  }\n\n  open() {\n    this.collapsed = false;\n  }\n\n  @HostBinding('class')\n  private get __hostClass(): string {\n    //return `ax-drawer-${this.mode} ax-drawer-${this.location} ${this.collapsed ? 'ax-collapsed' : 'ax-expanded'} ${!this._loaded ? 'ax-preload' : ''}`;\n    return `ax-drawer-${this.mode} ax-drawer-${this.location} ${\n      this.collapsed ? 'ax-collapsed' : 'ax-expanded'\n    }`;\n  }\n\n  private _backdropElement: HTMLElement | any;\n  // private _loaded: boolean = false;\n\n  private _addBackdrop() {\n    this._zone.runOutsideAngular(() => {\n      this._backdropElement = document.createElement('div');\n      this._backdropElement.classList.add('ax-backdrop');\n      this._backdropElement.onclick = () => {\n        this._zone.run(() => {\n          this.close();\n        });\n      };\n      this._getHostElement().parentElement?.appendChild(this._backdropElement);\n    });\n  }\n  private _removeBackdrop() {\n    this._zone.runOutsideAngular(() => {\n      if (this._backdropElement) {\n        this._getHostElement().parentElement?.removeChild(this._backdropElement);\n        this._backdropElement = null;\n      }\n    });\n  }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { AXDrawerComponent } from './drawer.component';\nimport { AXDrawerContainerComponent } from './drawer-container.component';\n\nconst COMPONENT = [AXDrawerComponent, AXDrawerContainerComponent];\nconst MODULES = [CommonModule];\n\n@NgModule({\n    declarations: [...COMPONENT],\n    imports: [...MODULES],\n    exports: [...COMPONENT],\n    providers: [],\n})\nexport class AXDrawerModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"acorex-components-drawer.mjs","sources":["../../../../libs/components/drawer/src/lib/drawer-container.component.ts","../../../../libs/components/drawer/src/lib/drawer.component.ts","../../../../libs/components/drawer/src/lib/drawer.module.ts","../../../../libs/components/drawer/src/acorex-components-drawer.ts"],"sourcesContent":["import {\n  Component,\n  ViewEncapsulation,\n  ChangeDetectionStrategy,\n} from '@angular/core';\nimport { AXDrawerComponent } from './drawer.component';\nimport { MXBaseComponent } from '@acorex/components/common';\n\n@Component({\n  selector: 'ax-drawer-container',\n  template: `\n    <ng-content select=\"ax-drawer[location='start']\"> </ng-content>\n    <ng-content select=\"ax-content\"> </ng-content>\n    <ng-content select=\"ax-drawer[location='end']\"> </ng-content>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n})\nexport class AXDrawerContainerComponent extends MXBaseComponent {\n\n  ngDoCheck() {\n    const host = this.getHostElement();\n    Array.from(host.querySelectorAll('ax-drawer'))\n      .map((c) => c['__axContext__'] as AXDrawerComponent)\n      .some((c) => !c?.collapsed)\n      ? host.classList.add('ax-visible')\n      : host.classList.remove('ax-visible');\n  }\n}\n","import { AXClosbaleComponent, AXComponent, MXBaseComponent, MXComponentOptionChanged } from '@acorex/components/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  EventEmitter,\n  HostBinding,\n  Input,\n  NgZone,\n  Output,\n  ViewEncapsulation,\n} from '@angular/core';\n\nexport type AXDrawerMode = 'push' | 'overlay';\nexport type AXDrawerLocation = 'start' | 'end';\n\n@Component({\n  selector: 'ax-drawer',\n  template: `\n    <ng-content select=\"ax-header\"></ng-content>\n    <ng-content select=\"ax-content\"></ng-content>\n  `,\n  styleUrls: ['./drawer.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  providers: [\n    { provide: AXComponent, useExisting: AXDrawerComponent },\n    { provide: AXClosbaleComponent, useExisting: AXDrawerComponent },\n  ],\n})\nexport class AXDrawerComponent extends MXBaseComponent {\n\n  constructor(private _zone: NgZone) {\n    super();\n  }\n\n  @Output()\n  public locationChange: EventEmitter<AXDrawerLocation> = new EventEmitter<AXDrawerLocation>();\n\n  private _location: AXDrawerLocation = 'start';\n  @Input()\n  public get location(): AXDrawerLocation {\n    return this._location;\n  }\n  public set location(v: AXDrawerLocation) {\n    this.setOption({\n      name: 'location',\n      value: v,\n    });\n  }\n\n  @Output()\n  public modeChange: EventEmitter<AXDrawerMode> = new EventEmitter<AXDrawerMode>();\n\n  private _mode: AXDrawerMode = 'overlay';\n  @Input()\n  public get mode(): AXDrawerMode {\n    return this._mode;\n  }\n  public set mode(v: AXDrawerMode) {\n    this.setOption({\n      name: 'mode',\n      value: v,\n    });\n  }\n\n  @Output()\n  public collapsedChange: EventEmitter<boolean> = new EventEmitter<boolean>();\n\n  private _collapsed: boolean = true;\n  @Input()\n  public get collapsed(): boolean {\n    return this._collapsed;\n  }\n  public set collapsed(v: boolean) {\n    this.setOption({\n      name: 'collapsed',\n      value: v,\n    });\n  }\n\n\n  ngAfterViewInit(): void {\n    this._detectBoundingSize();\n  }\n\n  override internalOptionChanged(option: MXComponentOptionChanged): void {\n    this._checkProps();\n  }\n\n  ngDoCheck() {\n    this._detectBoundingSize();\n  }\n\n  private _detectBoundingSize() {\n    this._zone.runOutsideAngular(() => {\n      const host = this.getHostElement();\n      if (host.clientWidth) {\n        host.style.setProperty('--ax-el-width', `${host.clientWidth}px`);\n      }\n    });\n  }\n\n  private _checkProps() {\n    this._detectBoundingSize();\n    this._removeBackdrop();\n    if (this.mode == 'overlay') {\n      if (!this.collapsed) {\n        this._addBackdrop();\n      }\n    }\n  }\n\n  toggle() {\n    this.collapsed = !this.collapsed;\n  }\n\n  close() {\n    this.collapsed = true;\n  }\n\n  open() {\n    this.collapsed = false;\n  }\n\n  @HostBinding('class')\n  private get __hostClass(): string {\n    //return `ax-drawer-${this.mode} ax-drawer-${this.location} ${this.collapsed ? 'ax-collapsed' : 'ax-expanded'} ${!this._loaded ? 'ax-preload' : ''}`;\n    return `ax-drawer-${this.mode} ax-drawer-${this.location} ${this.collapsed ? 'ax-collapsed' : 'ax-expanded'\n      }`;\n  }\n\n  private _backdropElement: HTMLElement | any;\n  // private _loaded: boolean = false;\n\n  private _addBackdrop() {\n    this._zone.runOutsideAngular(() => {\n      this._backdropElement = document.createElement('div');\n      this._backdropElement.classList.add('ax-backdrop');\n      this._backdropElement.onclick = () => {\n        this._zone.run(() => {\n          this.close();\n        });\n      };\n      this.getHostElement().parentElement?.appendChild(this._backdropElement);\n    });\n  }\n\n  private _removeBackdrop() {\n    this._zone.runOutsideAngular(() => {\n      if (this._backdropElement) {\n        this.getHostElement().parentElement?.removeChild(this._backdropElement);\n        this._backdropElement = null;\n      }\n    });\n  }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { AXDrawerComponent } from './drawer.component';\nimport { AXDrawerContainerComponent } from './drawer-container.component';\n\nconst COMPONENT = [AXDrawerComponent, AXDrawerContainerComponent];\nconst MODULES = [CommonModule];\n\n@NgModule({\n    declarations: [...COMPONENT],\n    imports: [...MODULES],\n    exports: [...COMPONENT],\n    providers: [],\n})\nexport class AXDrawerModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/acorex-components-dropdown.mjs

@@ -86,10 +86,10 @@ class AXDropdownPanelComponent extends AXBaseDropdownMixin {
         this.close();
         this._emitOnItemClickEvent(e, e.component);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AXDropdownPanelComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.AXButtonComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: { isOpen: "isOpen", fitParent: "fitParent", dropdownWidth: "dropdownWidth", position: "position", target: "target" }, outputs: { onOpened: "onOpened", onClosed: "onClosed", onItemClick: "onItemClick" }, host: { classAttribute: "ax-dropdown-panel" }, queries: [{ propertyName: "_contentButtons", predicate: AXButtonItemComponent }], viewQueries: [{ propertyName: "popover", first: true, predicate: AXPopoverComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ax-popover [target]=\"target\" [position]=\"position\" [openTrigger]=\"'toggle'\" [closeTrigger]=\"'clickout'\" [adaptivityEnabled]=\"false\" >\n    <div class=\"ax-overlay-pane\" [class.ax-dropdown-list]=\"_needBorder\" >\n        <ng-content select=\"[panel],ax-button-item\">\n        </ng-content>\n    </div>\n</ax-popover>", styles: [""], dependencies: [{ kind: "component", type: i2.AXPopoverComponent, selector: "ax-popover", inputs: ["target", "position", "openTrigger", "closeTrigger", "hasBackdrop", "backdropClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AXDropdownPanelComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.AXButtonComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: { isOpen: "isOpen", fitParent: "fitParent", dropdownWidth: "dropdownWidth", position: "position", target: "target" }, outputs: { onOpened: "onOpened", onClosed: "onClosed", onItemClick: "onItemClick" }, host: { classAttribute: "ax-dropdown-panel" }, queries: [{ propertyName: "_contentButtons", predicate: AXButtonItemComponent }], viewQueries: [{ propertyName: "popover", first: true, predicate: AXPopoverComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ax-popover [target]=\"target\" [position]=\"position\" [openTrigger]=\"'toggle'\" [closeTrigger]=\"'clickout'\" [adaptivityEnabled]=\"false\" >\n    <div class=\"ax-overlay-pane\" [class.ax-dropdown-list]=\"_needBorder\" >\n        <ng-content select=\"[panel],ax-button-item\">\n        </ng-content>\n    </div>\n</ax-popover>", styles: [""], dependencies: [{ kind: "component", type: i2.AXPopoverComponent, selector: "ax-popover", inputs: ["target", "position", "openTrigger", "closeTrigger", "hasBackdrop", "backdropClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AXDropdownPanelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AXDropdownPanelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-dropdown-panel', inputs: ['isOpen', 'fitParent', 'dropdownWidth', 'position'], outputs: ['onOpened', 'onClosed'], host: { class: 'ax-dropdown-panel' }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ax-popover [target]=\"target\" [position]=\"position\" [openTrigger]=\"'toggle'\" [closeTrigger]=\"'clickout'\" [adaptivityEnabled]=\"false\" >\n    <div class=\"ax-overlay-pane\" [class.ax-dropdown-list]=\"_needBorder\" >\n        <ng-content select=\"[panel],ax-button-item\">\n        </ng-content>\n    </div>\n</ax-popover>" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.AXButtonComponent, decorators: [{
@@ -107,11 +107,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
             }] } });
 
 class AXDropdownModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AXDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.6", ngImport: i0, type: AXDropdownModule, declarations: [AXDropdownPanelComponent], imports: [CommonModule, AXCommonModule, A11yModule, AXButtonModule, OverlayModule, AXDecoratorModule, AXPopoverModule], exports: [AXDropdownPanelComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AXDropdownModule, imports: [CommonModule, AXCommonModule, A11yModule, AXButtonModule, OverlayModule, AXDecoratorModule, AXPopoverModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AXDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: AXDropdownModule, declarations: [AXDropdownPanelComponent], imports: [CommonModule, AXCommonModule, A11yModule, AXButtonModule, OverlayModule, AXDecoratorModule, AXPopoverModule], exports: [AXDropdownPanelComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AXDropdownModule, imports: [CommonModule, AXCommonModule, A11yModule, AXButtonModule, OverlayModule, AXDecoratorModule, AXPopoverModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AXDropdownModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AXDropdownModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, AXCommonModule, A11yModule, AXButtonModule, OverlayModule, AXDecoratorModule, AXPopoverModule],

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

@@ -1 +1 @@
-{"version":3,"file":"acorex-components-dropdown.mjs","sources":["../../../../libs/components/dropdown/src/lib/dropdown-panel.component.ts","../../../../libs/components/dropdown/src/lib/dropdown-panel.component.html","../../../../libs/components/dropdown/src/lib/dropdown.module.ts","../../../../libs/components/dropdown/src/acorex-components-dropdown.ts"],"sourcesContent":["import {\n  Component,\n  ViewEncapsulation,\n  ChangeDetectionStrategy,\n  ElementRef,\n  ChangeDetectorRef,\n  ContentChildren,\n  QueryList,\n  EventEmitter,\n  Output,\n  ViewChild,\n  Optional,\n  Input,\n  HostListener,\n} from '@angular/core';\nimport { Subscription } from 'rxjs';\n\nimport { AXButtonClickEvent, AXClickEvent } from '@acorex/components/common';\nimport { AXButtonComponent, AXButtonItemComponent } from '@acorex/components/button';\nimport { AXPopoverComponent } from '@acorex/components/popover';\nimport { AXBaseDropdownMixin } from '@acorex/components/mixin';\n\n@Component({\n  selector: 'ax-dropdown-panel',\n  templateUrl: './dropdown-panel.component.html',\n  styleUrls: ['./dropdown-panel.component.scss'],\n  inputs: ['isOpen', 'fitParent', 'dropdownWidth', 'position'],\n  outputs: ['onOpened', 'onClosed'],\n  host: { class: 'ax-dropdown-panel' },\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n})\nexport class AXDropdownPanelComponent extends AXBaseDropdownMixin {\n  constructor(\n    elementRef: ElementRef,\n    cdr: ChangeDetectorRef,\n    @Optional()\n    public _parent?: AXButtonComponent\n  ) {\n    super(elementRef, cdr);\n    this._target = this._parent?.getHostElement();\n  }\n\n  @ContentChildren(AXButtonItemComponent)\n  _contentButtons: QueryList<AXButtonItemComponent>;\n\n  @Output()\n  onItemClick: EventEmitter<AXButtonClickEvent> = new EventEmitter<AXButtonClickEvent>();\n\n  @ViewChild(AXPopoverComponent, { static: true })\n  override popover: AXPopoverComponent = null;\n\n  _needBorder: boolean = false;\n  _subs: Subscription[] = [];\n\n  private _target: HTMLElement;\n  @Input()\n  public get target(): HTMLElement {\n    return this._target;\n  }\n  public set target(v: HTMLElement) {\n    this._target = v;\n  }\n\n  override onViewInit(): void {\n    super.onViewInit();\n    [this.target, this._getHostElement()].forEach((el) => {\n      el.addEventListener('keydown', (e) => {\n        if (e.code == 'Escape' && this.isOpen) {\n          e.stopPropagation();\n          this.close();\n        }\n      });\n    });\n  }\n\n  ngAfterContentInit() {\n    this._initContents();\n    this._contentButtons.changes.subscribe(() => {\n      this._initContents();\n    });\n  }\n\n  private _initContents() {\n    this._needBorder = this._contentButtons.length > 0;\n    this._bindEvents();\n    this._bindProps();\n    this._cdr.markForCheck();\n  }\n\n  private _bindEvents() {\n    this._contentButtons?.forEach((b) => {\n      if (!b.onClick.length)\n        b.onClick.subscribe((c) => {\n          this._handleOnItemClick(c);\n        });\n    });\n  }\n\n  private _bindProps() {\n    this._contentButtons?.forEach((b) => {\n      //b.look = this.look ?? this.look;\n      b.disabled = b.disabled ?? this.disabled;\n      //b.toggleable = false;\n    });\n  }\n\n  onOptionChanged(options) {\n    this._bindProps();\n  }\n\n  override onDestroy(): void {\n    this._subs.forEach((s) => {\n      s?.unsubscribe();\n    });\n  }\n\n  _emitOnItemClickEvent(e: AXClickEvent, item: AXButtonItemComponent): void {\n    this.onItemClick.emit({\n      component: this,\n      htmlElement: this._getHostElement(),\n      nativeEvent: e.nativeEvent,\n      name: item.name,\n      data: item.data,\n    });\n  }\n\n  private _handleOnItemClick(e: AXClickEvent) {\n    this.close();\n    this._emitOnItemClickEvent(e, e.component);\n  }\n}\n","<ax-popover [target]=\"target\" [position]=\"position\" [openTrigger]=\"'toggle'\" [closeTrigger]=\"'clickout'\" [adaptivityEnabled]=\"false\" >\n    <div class=\"ax-overlay-pane\" [class.ax-dropdown-list]=\"_needBorder\" >\n        <ng-content select=\"[panel],ax-button-item\">\n        </ng-content>\n    </div>\n</ax-popover>","import { OverlayModule } from '@angular/cdk/overlay';\nimport { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { AXButtonModule } from '@acorex/components/button';\nimport { AXDecoratorModule } from '@acorex/components/decorators';\nimport { AXPopoverModule } from '@acorex/components/popover';\nimport { AXDropdownPanelComponent } from './dropdown-panel.component';\nimport { A11yModule } from '@angular/cdk/a11y';\nimport { AXCommonModule } from '@acorex/components/common';\n\n@NgModule({\n    imports: [CommonModule,AXCommonModule, A11yModule, AXButtonModule, OverlayModule, AXDecoratorModule, AXPopoverModule],\n    exports: [AXDropdownPanelComponent],\n    declarations: [AXDropdownPanelComponent],\n    providers: [],\n})\nexport class AXDropdownModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;;;;AAgCM,MAAO,wBAAyB,SAAQ,mBAAmB,CAAA;AAC/D,IAAA,WAAA,CACE,UAAsB,EACtB,GAAsB,EAEf,OAA2B,EAAA;AAElC,QAAA,KAAK,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;QAFhB,IAAO,CAAA,OAAA,GAAP,OAAO,CAAoB;AAUpC,QAAA,IAAA,CAAA,WAAW,GAAqC,IAAI,YAAY,EAAsB,CAAC;QAG9E,IAAO,CAAA,OAAA,GAAuB,IAAI,CAAC;QAE5C,IAAW,CAAA,WAAA,GAAY,KAAK,CAAC;QAC7B,IAAK,CAAA,KAAA,GAAmB,EAAE,CAAC;QAbzB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,EAAE,cAAc,EAAE,CAAC;KAC/C;AAeD,IAAA,IACW,MAAM,GAAA;QACf,OAAO,IAAI,CAAC,OAAO,CAAC;KACrB;IACD,IAAW,MAAM,CAAC,CAAc,EAAA;AAC9B,QAAA,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC;KAClB;IAEQ,UAAU,GAAA;QACjB,KAAK,CAAC,UAAU,EAAE,CAAC;AACnB,QAAA,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,eAAe,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,KAAI;YACnD,EAAE,CAAC,gBAAgB,CAAC,SAAS,EAAE,CAAC,CAAC,KAAI;gBACnC,IAAI,CAAC,CAAC,IAAI,IAAI,QAAQ,IAAI,IAAI,CAAC,MAAM,EAAE;oBACrC,CAAC,CAAC,eAAe,EAAE,CAAC;oBACpB,IAAI,CAAC,KAAK,EAAE,CAAC;AACd,iBAAA;AACH,aAAC,CAAC,CAAC;AACL,SAAC,CAAC,CAAC;KACJ;IAED,kBAAkB,GAAA;QAChB,IAAI,CAAC,aAAa,EAAE,CAAC;QACrB,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,SAAS,CAAC,MAAK;YAC1C,IAAI,CAAC,aAAa,EAAE,CAAC;AACvB,SAAC,CAAC,CAAC;KACJ;IAEO,aAAa,GAAA;QACnB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,eAAe,CAAC,MAAM,GAAG,CAAC,CAAC;QACnD,IAAI,CAAC,WAAW,EAAE,CAAC;QACnB,IAAI,CAAC,UAAU,EAAE,CAAC;AAClB,QAAA,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;KAC1B;IAEO,WAAW,GAAA;QACjB,IAAI,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC,CAAC,KAAI;AAClC,YAAA,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM;gBACnB,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,KAAI;AACxB,oBAAA,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC;AAC7B,iBAAC,CAAC,CAAC;AACP,SAAC,CAAC,CAAC;KACJ;IAEO,UAAU,GAAA;QAChB,IAAI,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC,CAAC,KAAI;;YAElC,CAAC,CAAC,QAAQ,GAAG,CAAC,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC;;AAE3C,SAAC,CAAC,CAAC;KACJ;AAED,IAAA,eAAe,CAAC,OAAO,EAAA;QACrB,IAAI,CAAC,UAAU,EAAE,CAAC;KACnB;IAEQ,SAAS,GAAA;QAChB,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,KAAI;YACvB,CAAC,EAAE,WAAW,EAAE,CAAC;AACnB,SAAC,CAAC,CAAC;KACJ;IAED,qBAAqB,CAAC,CAAe,EAAE,IAA2B,EAAA;AAChE,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;AACpB,YAAA,SAAS,EAAE,IAAI;AACf,YAAA,WAAW,EAAE,IAAI,CAAC,eAAe,EAAE;YACnC,WAAW,EAAE,CAAC,CAAC,WAAW;YAC1B,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,IAAI,EAAE,IAAI,CAAC,IAAI;AAChB,SAAA,CAAC,CAAC;KACJ;AAEO,IAAA,kBAAkB,CAAC,CAAe,EAAA;QACxC,IAAI,CAAC,KAAK,EAAE,CAAC;QACb,IAAI,CAAC,qBAAqB,CAAC,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC;KAC5C;8GAlGU,wBAAwB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,UAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,iBAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,iBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAAxB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,wBAAwB,EAWlB,QAAA,EAAA,mBAAA,EAAA,MAAA,EAAA,EAAA,MAAA,EAAA,QAAA,EAAA,SAAA,EAAA,WAAA,EAAA,aAAA,EAAA,eAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,EAAA,OAAA,EAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,UAAA,EAAA,WAAA,EAAA,aAAA,EAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,mBAAA,EAAA,EAAA,OAAA,EAAA,CAAA,EAAA,YAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,qBAAqB,EAM3B,CAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,SAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,kBAAkB,qFCjD/B,2UAKa,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,kBAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,UAAA,EAAA,aAAA,EAAA,cAAA,EAAA,aAAA,EAAA,eAAA,EAAA,mBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,UAAA,EAAA,UAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA,EAAA;;2FD2BA,wBAAwB,EAAA,UAAA,EAAA,CAAA;kBAVpC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,mBAAmB,EAGrB,MAAA,EAAA,CAAC,QAAQ,EAAE,WAAW,EAAE,eAAe,EAAE,UAAU,CAAC,EACnD,OAAA,EAAA,CAAC,UAAU,EAAE,UAAU,CAAC,EAC3B,IAAA,EAAA,EAAE,KAAK,EAAE,mBAAmB,EAAE,EACnB,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAChC,aAAA,EAAA,iBAAiB,CAAC,IAAI,EAAA,QAAA,EAAA,2UAAA,EAAA,CAAA;;0BAMlC,QAAQ;4CAQX,eAAe,EAAA,CAAA;sBADd,eAAe;uBAAC,qBAAqB,CAAA;gBAItC,WAAW,EAAA,CAAA;sBADV,MAAM;gBAIE,OAAO,EAAA,CAAA;sBADf,SAAS;AAAC,gBAAA,IAAA,EAAA,CAAA,kBAAkB,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,CAAA;gBAQpC,MAAM,EAAA,CAAA;sBADhB,KAAK;;;MExCK,gBAAgB,CAAA;8GAAhB,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA,EAAA;AAAhB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,gBAAgB,iBAHV,wBAAwB,CAAA,EAAA,OAAA,EAAA,CAF7B,YAAY,EAAC,cAAc,EAAE,UAAU,EAAE,cAAc,EAAE,aAAa,EAAE,iBAAiB,EAAE,eAAe,aAC1G,wBAAwB,CAAA,EAAA,CAAA,CAAA,EAAA;AAIzB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,gBAAgB,EALf,OAAA,EAAA,CAAA,YAAY,EAAC,cAAc,EAAE,UAAU,EAAE,cAAc,EAAE,aAAa,EAAE,iBAAiB,EAAE,eAAe,CAAA,EAAA,CAAA,CAAA,EAAA;;2FAK3G,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAN5B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACN,oBAAA,OAAO,EAAE,CAAC,YAAY,EAAC,cAAc,EAAE,UAAU,EAAE,cAAc,EAAE,aAAa,EAAE,iBAAiB,EAAE,eAAe,CAAC;oBACrH,OAAO,EAAE,CAAC,wBAAwB,CAAC;oBACnC,YAAY,EAAE,CAAC,wBAAwB,CAAC;AACxC,oBAAA,SAAS,EAAE,EAAE;AAChB,iBAAA,CAAA;;;ACfD;;AAEG;;;;"}
+{"version":3,"file":"acorex-components-dropdown.mjs","sources":["../../../../libs/components/dropdown/src/lib/dropdown-panel.component.ts","../../../../libs/components/dropdown/src/lib/dropdown-panel.component.html","../../../../libs/components/dropdown/src/lib/dropdown.module.ts","../../../../libs/components/dropdown/src/acorex-components-dropdown.ts"],"sourcesContent":["import {\n  Component,\n  ViewEncapsulation,\n  ChangeDetectionStrategy,\n  ElementRef,\n  ChangeDetectorRef,\n  ContentChildren,\n  QueryList,\n  EventEmitter,\n  Output,\n  ViewChild,\n  Optional,\n  Input,\n} from '@angular/core';\nimport { Subscription } from 'rxjs';\n\nimport { AXButtonClickEvent, AXClickEvent } from '@acorex/components/common';\nimport { AXButtonComponent, AXButtonItemComponent } from '@acorex/components/button';\nimport { AXPopoverComponent } from '@acorex/components/popover';\nimport { AXBaseDropdownMixin } from '@acorex/components/mixin';\n\n@Component({\n  selector: 'ax-dropdown-panel',\n  templateUrl: './dropdown-panel.component.html',\n  styleUrls: ['./dropdown-panel.component.scss'],\n  inputs: ['isOpen', 'fitParent', 'dropdownWidth', 'position'],\n  outputs: ['onOpened', 'onClosed'],\n  host: { class: 'ax-dropdown-panel' },\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n})\nexport class AXDropdownPanelComponent extends AXBaseDropdownMixin {\n  constructor(\n    elementRef: ElementRef,\n    cdr: ChangeDetectorRef,\n    @Optional()\n    public _parent?: AXButtonComponent\n  ) {\n    super(elementRef, cdr);\n    this._target = this._parent?.getHostElement();\n  }\n\n  @ContentChildren(AXButtonItemComponent)\n  _contentButtons: QueryList<AXButtonItemComponent>;\n\n  @Output()\n  onItemClick: EventEmitter<AXButtonClickEvent> = new EventEmitter<AXButtonClickEvent>();\n\n  @ViewChild(AXPopoverComponent, { static: true })\n  override popover: AXPopoverComponent = null;\n\n  _needBorder: boolean = false;\n  _subs: Subscription[] = [];\n\n  private _target: HTMLElement;\n  @Input()\n  public get target(): HTMLElement {\n    return this._target;\n  }\n  public set target(v: HTMLElement) {\n    this._target = v;\n  }\n\n  override onViewInit(): void {\n    super.onViewInit();\n    [this.target, this._getHostElement()].forEach((el) => {\n      el.addEventListener('keydown', (e) => {\n        if (e.code == 'Escape' && this.isOpen) {\n          e.stopPropagation();\n          this.close();\n        }\n      });\n    });\n  }\n\n  ngAfterContentInit() {\n    this._initContents();\n    this._contentButtons.changes.subscribe(() => {\n      this._initContents();\n    });\n  }\n\n  private _initContents() {\n    this._needBorder = this._contentButtons.length > 0;\n    this._bindEvents();\n    this._bindProps();\n    this._cdr.markForCheck();\n  }\n\n  private _bindEvents() {\n    this._contentButtons?.forEach((b) => {\n      if (!b.onClick.length)\n        b.onClick.subscribe((c) => {\n          this._handleOnItemClick(c);\n        });\n    });\n  }\n\n  private _bindProps() {\n    this._contentButtons?.forEach((b) => {\n      //b.look = this.look ?? this.look;\n      b.disabled = b.disabled ?? this.disabled;\n      //b.toggleable = false;\n    });\n  }\n\n  onOptionChanged(options) {\n    this._bindProps();\n  }\n\n  override onDestroy(): void {\n    this._subs.forEach((s) => {\n      s?.unsubscribe();\n    });\n  }\n\n  _emitOnItemClickEvent(e: AXClickEvent, item: AXButtonItemComponent): void {\n    this.onItemClick.emit({\n      component: this,\n      htmlElement: this._getHostElement(),\n      nativeEvent: e.nativeEvent,\n      name: item.name,\n      data: item.data,\n    });\n  }\n\n  private _handleOnItemClick(e: AXClickEvent) {\n    this.close();\n    this._emitOnItemClickEvent(e, e.component);\n  }\n}\n","<ax-popover [target]=\"target\" [position]=\"position\" [openTrigger]=\"'toggle'\" [closeTrigger]=\"'clickout'\" [adaptivityEnabled]=\"false\" >\n    <div class=\"ax-overlay-pane\" [class.ax-dropdown-list]=\"_needBorder\" >\n        <ng-content select=\"[panel],ax-button-item\">\n        </ng-content>\n    </div>\n</ax-popover>","import { OverlayModule } from '@angular/cdk/overlay';\nimport { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { AXButtonModule } from '@acorex/components/button';\nimport { AXDecoratorModule } from '@acorex/components/decorators';\nimport { AXPopoverModule } from '@acorex/components/popover';\nimport { AXDropdownPanelComponent } from './dropdown-panel.component';\nimport { A11yModule } from '@angular/cdk/a11y';\nimport { AXCommonModule } from '@acorex/components/common';\n\n@NgModule({\n    imports: [CommonModule,AXCommonModule, A11yModule, AXButtonModule, OverlayModule, AXDecoratorModule, AXPopoverModule],\n    exports: [AXDropdownPanelComponent],\n    declarations: [AXDropdownPanelComponent],\n    providers: [],\n})\nexport class AXDropdownModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/acorex-components-form.mjs

@@ -1,7 +1,7 @@
-import { AXBaseComponentMixin } from '@acorex/components/mixin';
+import * as i1 from '@acorex/components/common';
+import { MXBaseComponent, AXEvent, AXValuableComponent } from '@acorex/components/common';
 import * as i0 from '@angular/core';
 import { Component, ViewEncapsulation, ChangeDetectionStrategy, EventEmitter, Input, Output, Optional, Inject, NgModule } from '@angular/core';
-import { AXEvent } from '@acorex/components/common';
 import * as i4 from '@acorex/components/alert';
 import { AXAlertModule } from '@acorex/components/alert';
 import * as i5 from '@acorex/components/button';
@@ -12,19 +12,16 @@ import { AXConfig } from '@acorex/core/config';
 import { AXTranslator } from '@acorex/core/translation';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i1 from '@acorex/components/toast';
+import * as i1$1 from '@acorex/components/toast';
 
-class AXFormFieldComponent extends AXBaseComponentMixin {
-    constructor(elementRef, cdr) {
-        super(elementRef, cdr);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AXFormFieldComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: AXFormFieldComponent, selector: "ax-form-field", host: { classAttribute: "ax-form-field" }, usesInheritance: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [".ax-dark ax-form.ax-form-normal .ax-error-message{background:rgba(var(--ax-color-danger-900));border-color:rgba(var(--ax-color-danger-700));color:rgba(var(--ax-color-danger-100))}.ax-dark ax-form.ax-form-normal .ax-error-message:before,.ax-dark ax-form.ax-form-normal .ax-error-message:after{border-bottom-color:rgba(var(--ax-color-danger-900))}.ax-dark ax-form.ax-form-normal .ax-error-message:before{border-bottom-color:rgba(var(--ax-color-danger-700))}.ax-form-field{position:relative}.ax-form-field .ax-error-message{font-size:.75rem}form.ax-normal-error .ax-error-message{color:rgba(var(--ax-color-danger-500))}form.ax-tooltip-error .ax-error-message{position:absolute;display:block;border:1px solid;background:rgba(var(--ax-color-danger-50));color:rgba(var(--ax-color-danger-500));border-radius:.375rem;border-color:rgba(var(--ax-color-danger-200));z-index:10;padding:.25rem .5rem;bottom:-2.25rem;font-weight:400;width:-moz-fit-content;width:fit-content}form.ax-tooltip-error .ax-error-message:before,form.ax-tooltip-error .ax-error-message:after{position:absolute;bottom:100%;inset-inline-start:10px;z-index:15;width:0;height:0;pointer-events:none;content:\" \";border:solid transparent;border-bottom-color:rgba(var(--ax-color-danger-50))}form.ax-tooltip-error .ax-error-message:before{margin-inline-start:-1px;border-width:.375rem;border-bottom-color:rgba(var(--ax-color-danger-200))}form.ax-tooltip-error .ax-error-message:after{border-width:5px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+class AXFormFieldComponent extends MXBaseComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AXFormFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: AXFormFieldComponent, selector: "ax-form-field", usesInheritance: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [".ax-dark ax-form.ax-form-normal .ax-error-message{background:rgba(var(--ax-color-danger-900));border-color:rgba(var(--ax-color-danger-700));color:rgba(var(--ax-color-danger-100))}.ax-dark ax-form.ax-form-normal .ax-error-message:before,.ax-dark ax-form.ax-form-normal .ax-error-message:after{border-bottom-color:rgba(var(--ax-color-danger-900))}.ax-dark ax-form.ax-form-normal .ax-error-message:before{border-bottom-color:rgba(var(--ax-color-danger-700))}ax-form-field{position:relative}ax-form-field .ax-error-message{font-size:.75rem}form.ax-bottom-error .ax-error-message{color:rgba(var(--ax-color-danger-500))}form.ax-tooltip-error .ax-error-message{position:absolute;display:block;border:1px solid;background:rgba(var(--ax-color-danger-50));color:rgba(var(--ax-color-danger-500));border-radius:.375rem;border-color:rgba(var(--ax-color-danger-200));z-index:10;padding:.25rem .5rem;bottom:-2.25rem;font-weight:400;width:-moz-fit-content;width:fit-content}form.ax-tooltip-error .ax-error-message:before,form.ax-tooltip-error .ax-error-message:after{position:absolute;bottom:100%;inset-inline-start:10px;z-index:15;width:0;height:0;pointer-events:none;content:\" \";border:solid transparent;border-bottom-color:rgba(var(--ax-color-danger-50))}form.ax-tooltip-error .ax-error-message:before{margin-inline-start:-1px;border-width:.375rem;border-bottom-color:rgba(var(--ax-color-danger-200))}form.ax-tooltip-error .ax-error-message:after{border-width:5px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AXFormFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AXFormFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-form-field', template: `<ng-content></ng-content>`, host: { class: 'ax-form-field' }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".ax-dark ax-form.ax-form-normal .ax-error-message{background:rgba(var(--ax-color-danger-900));border-color:rgba(var(--ax-color-danger-700));color:rgba(var(--ax-color-danger-100))}.ax-dark ax-form.ax-form-normal .ax-error-message:before,.ax-dark ax-form.ax-form-normal .ax-error-message:after{border-bottom-color:rgba(var(--ax-color-danger-900))}.ax-dark ax-form.ax-form-normal .ax-error-message:before{border-bottom-color:rgba(var(--ax-color-danger-700))}.ax-form-field{position:relative}.ax-form-field .ax-error-message{font-size:.75rem}form.ax-normal-error .ax-error-message{color:rgba(var(--ax-color-danger-500))}form.ax-tooltip-error .ax-error-message{position:absolute;display:block;border:1px solid;background:rgba(var(--ax-color-danger-50));color:rgba(var(--ax-color-danger-500));border-radius:.375rem;border-color:rgba(var(--ax-color-danger-200));z-index:10;padding:.25rem .5rem;bottom:-2.25rem;font-weight:400;width:-moz-fit-content;width:fit-content}form.ax-tooltip-error .ax-error-message:before,form.ax-tooltip-error .ax-error-message:after{position:absolute;bottom:100%;inset-inline-start:10px;z-index:15;width:0;height:0;pointer-events:none;content:\" \";border:solid transparent;border-bottom-color:rgba(var(--ax-color-danger-50))}form.ax-tooltip-error .ax-error-message:before{margin-inline-start:-1px;border-width:.375rem;border-bottom-color:rgba(var(--ax-color-danger-200))}form.ax-tooltip-error .ax-error-message:after{border-width:5px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
+            args: [{ selector: 'ax-form-field', template: `<ng-content></ng-content>`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".ax-dark ax-form.ax-form-normal .ax-error-message{background:rgba(var(--ax-color-danger-900));border-color:rgba(var(--ax-color-danger-700));color:rgba(var(--ax-color-danger-100))}.ax-dark ax-form.ax-form-normal .ax-error-message:before,.ax-dark ax-form.ax-form-normal .ax-error-message:after{border-bottom-color:rgba(var(--ax-color-danger-900))}.ax-dark ax-form.ax-form-normal .ax-error-message:before{border-bottom-color:rgba(var(--ax-color-danger-700))}ax-form-field{position:relative}ax-form-field .ax-error-message{font-size:.75rem}form.ax-bottom-error .ax-error-message{color:rgba(var(--ax-color-danger-500))}form.ax-tooltip-error .ax-error-message{position:absolute;display:block;border:1px solid;background:rgba(var(--ax-color-danger-50));color:rgba(var(--ax-color-danger-500));border-radius:.375rem;border-color:rgba(var(--ax-color-danger-200));z-index:10;padding:.25rem .5rem;bottom:-2.25rem;font-weight:400;width:-moz-fit-content;width:fit-content}form.ax-tooltip-error .ax-error-message:before,form.ax-tooltip-error .ax-error-message:after{position:absolute;bottom:100%;inset-inline-start:10px;z-index:15;width:0;height:0;pointer-events:none;content:\" \";border:solid transparent;border-bottom-color:rgba(var(--ax-color-danger-50))}form.ax-tooltip-error .ax-error-message:before{margin-inline-start:-1px;border-width:.375rem;border-bottom-color:rgba(var(--ax-color-danger-200))}form.ax-tooltip-error .ax-error-message:after{border-width:5px}\n"] }]
+        }] });
 
 /**
  *  Contains native event
@@ -37,12 +34,21 @@ class AXFormValidationEvent extends AXEvent {
  *
  * @category Components
  */
-class AXFormComponent extends AXBaseComponentMixin {
+class AXFormComponent extends MXBaseComponent {
+    constructor() {
+        super(...arguments);
+        this.messageStyle = 'bottom';
+        this.onValidate = new EventEmitter();
+        this.updateOnChange = new EventEmitter();
+        this._updateOn = 'blur';
+        this.validateInitValues = false;
+        this._subs = [];
+    }
     get updateOn() {
         return this._updateOn;
     }
     set updateOn(v) {
-        this._setOption({
+        this.setOption({
             name: 'updateOn',
             value: v,
             afterCallback: (oldValue, newValue) => {
@@ -50,19 +56,6 @@ class AXFormComponent extends AXBaseComponentMixin {
             },
         });
     }
-    /**
-     *  @ignore
-     */
-    constructor(elementRef, cdr) {
-        super(elementRef, cdr);
-        this.cdr = cdr;
-        this.validationMessageMode = 'normal';
-        this.onValidate = new EventEmitter();
-        this.updateOnChange = new EventEmitter();
-        this._updateOn = 'blur';
-        this.validateInitValues = false;
-        this._subs = [];
-    }
     _handleSubmit(e) {
         e.preventDefault();
         this.validate();
@@ -71,24 +64,24 @@ class AXFormComponent extends AXBaseComponentMixin {
         this.clear();
     }
     _getComponenets() {
-        return Array.from(this._getHostElement().querySelectorAll('[ax-form-input="true"]'))
+        return Array.from(this.getHostElement().querySelectorAll('[ax-form-input="true"]'))
             .map((c) => c.__axContext__)
             .filter((c) => c != null);
     }
-    onViewInit() {
+    ngAfterViewInit() {
         if (this.validateInitValues) {
             this._validateInitValues();
         }
         this._bindEvents();
-        const config = { attributes: false, childList: true, subtree: true };
-        const callback = (mutationList, observer) => {
-            this._bindEvents();
-        };
-        // Create an observer instance linked to the callback function
-        if (typeof MutationObserver !== 'undefined') {
-            this._observer = new MutationObserver(callback);
-        }
-        this._observer.observe(this._getHostElement(), config);
+        // const config = { attributes: false, childList: true, subtree: true };
+        // const callback = (mutationList, observer) => {
+        //   this._bindEvents();
+        // };
+        // // Create an observer instance linked to the callback function
+        // if (typeof MutationObserver !== 'undefined') {
+        //   this._observer = new MutationObserver(callback);
+        // }
+        // this._observer.observe(this.getHostElement(), config);
     }
     _bindEvents() {
         this._clearSubs();
@@ -97,7 +90,8 @@ class AXFormComponent extends AXBaseComponentMixin {
         widgets.forEach((w) => {
             if (this.updateOn == 'change') {
                 this._subs.push(w.onValueChanged?.subscribe((v) => {
-                    w.validate();
+                    if (v.isUserInteraction)
+                        w.validate();
                 }));
             }
             else if (this.updateOn == 'blur') {
@@ -108,7 +102,7 @@ class AXFormComponent extends AXBaseComponentMixin {
         });
     }
     _clearSubs() {
-        this._subs.forEach((c) => c.unsubscribe());
+        this._subs.forEach((c) => c?.unsubscribe());
         this._subs = [];
     }
     _validateInitValues() {
@@ -123,7 +117,7 @@ class AXFormComponent extends AXBaseComponentMixin {
             return Promise.resolve({ result: true });
         }
         //
-        return new Promise((resolve, reject) => {
+        return new Promise((resolve) => {
             Promise.all(widgets
                 .filter((c) => args == null || args.length == 0 || args.includes(c.name))
                 .map((c) => c.validate())).then((rules) => {
@@ -149,32 +143,32 @@ class AXFormComponent extends AXBaseComponentMixin {
         this.onValidate.emit({
             component: this,
             result: e,
-            htmlElement: this._getHostElement(),
+            htmlElement: this.getHostElement(),
         });
     }
     clear() {
         const widgets = this._getComponenets();
         widgets.forEach((w) => {
-            w.clear();
+            if (typeof w?.clear === 'function')
+                w.clear(false);
         });
     }
-    onDestroy() {
+    ngOnDestroy() {
         this._observer?.disconnect();
-        this._observer = null;
         this._clearSubs();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AXFormComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: AXFormComponent, selector: "ax-form", inputs: { validationMessageMode: "validationMessageMode", updateOn: "updateOn", validateInitValues: "validateInitValues" }, outputs: { onValidate: "onValidate", updateOnChange: "updateOnChange" }, usesInheritance: true, ngImport: i0, template: '<form (submit)="_handleSubmit($event)" (reset)="_handleReset($event)" class="ax-{{validationMessageMode}}-error"><ng-content></ng-content></form>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AXFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: AXFormComponent, selector: "ax-form", inputs: { messageStyle: "messageStyle", updateOn: "updateOn", validateInitValues: "validateInitValues" }, outputs: { onValidate: "onValidate", updateOnChange: "updateOnChange" }, usesInheritance: true, ngImport: i0, template: '<form (submit)="_handleSubmit($event)" (reset)="_handleReset($event)" class="ax-{{messageStyle}}-error"><ng-content></ng-content></form>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AXFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AXFormComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-form',
-                    template: '<form (submit)="_handleSubmit($event)" (reset)="_handleReset($event)" class="ax-{{validationMessageMode}}-error"><ng-content></ng-content></form>',
+                    template: '<form (submit)="_handleSubmit($event)" (reset)="_handleReset($event)" class="ax-{{messageStyle}}-error"><ng-content></ng-content></form>',
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { validationMessageMode: [{
+        }], propDecorators: { messageStyle: [{
                 type: Input
             }], onValidate: [{
                 type: Output
@@ -186,16 +180,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
                 type: Input
             }] } });
 
-class AXValidationRuleComponent extends AXBaseComponentMixin {
-    constructor(elementRef, cdr) {
-        super(elementRef, cdr);
+class AXValidationRuleComponent extends MXBaseComponent {
+    ngOnInit() {
+        this.getHostElement().validate = this.validate.bind(this);
+    }
+    /**
+     * @ignore
+     */
+    constructor(control) {
+        super();
+        this.control = control;
         this.rule = 'required';
         this.showMessage = true;
         this.enabled = true;
     }
-    onInit() {
-        this._getHostElement().validate = this.validate.bind(this);
-    }
     validate(value) {
         if (this.enabled === false) {
             return Promise.resolve({ result: true });
@@ -214,7 +212,7 @@ class AXValidationRuleComponent extends AXBaseComponentMixin {
                 case 'required':
                     resolve({
                         message: this.showMessage
-                            ? message || AXTranslator.get('validation.messages.required')
+                            ? message || AXTranslator.get('validation.messages.required', { name: this.control?.name })
                             : '',
                         result: !this._isNullOrEmpty(value),
                     });
@@ -269,14 +267,13 @@ class AXValidationRuleComponent extends AXBaseComponentMixin {
         return (value === undefined ||
             value === null ||
             Number.isNaN(value) ||
-            //(typeof value === 'object' && Object.keys(value).length === 0) ||
             (Array.isArray(value) && value.length == 0) ||
             (typeof value === 'string' && value.trim().length === 0));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AXValidationRuleComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: AXValidationRuleComponent, selector: "ax-validation-rule", inputs: { rule: "rule", message: "message", showMessage: "showMessage", value: "value", enabled: "enabled" }, usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AXValidationRuleComponent, deps: [{ token: AXValuableComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: AXValidationRuleComponent, selector: "ax-validation-rule", inputs: { rule: "rule", message: "message", showMessage: "showMessage", value: "value", enabled: "enabled" }, usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AXValidationRuleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AXValidationRuleComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-validation-rule',
@@ -284,7 +281,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { rule: [{
+        }], ctorParameters: function () { return [{ type: i1.AXValuableComponent, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [AXValuableComponent]
+                }] }]; }, propDecorators: { rule: [{
                 type: Input
             }], message: [{
                 type: Input
@@ -296,15 +298,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
                 type: Input
             }] } });
 
-class AXValidationSummaryComponent extends AXBaseComponentMixin {
+class AXValidationSummaryComponent extends MXBaseComponent {
     get title() {
         return this._title;
     }
     set title(v) {
         this._title = v;
     }
-    constructor(_elementRef, _cdr, _tosatService, _parent) {
-        super(_elementRef, _cdr);
+    constructor(_tosatService, _parent) {
+        super();
         this._tosatService = _tosatService;
         this._parent = _parent;
         this._content = '';
@@ -320,24 +322,25 @@ class AXValidationSummaryComponent extends AXBaseComponentMixin {
                 if (this.displayMode == 'toast') {
                     this._tosatService.show({
                         color: 'danger',
-                        closeable: true,
+                        closeButton: true,
                         timeOut: this._timeOut,
                         content: this._content,
-                        title: this.title
+                        title: this.title,
+                        location: "bottom-center"
                     });
                 }
             }
             else {
                 this._content = '';
             }
-            _cdr.markForCheck();
+            this.cdr.markForCheck();
         });
     }
     _handleOnDismissed(e) {
         this._content = '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AXValidationSummaryComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.AXToastService }, { token: AXFormComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: AXValidationSummaryComponent, selector: "ax-validation-summary", inputs: { title: "title", displayMode: "displayMode", timeOut: "timeOut", autoHide: "autoHide" }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AXValidationSummaryComponent, deps: [{ token: i1$1.AXToastService }, { token: AXFormComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: AXValidationSummaryComponent, selector: "ax-validation-summary", inputs: { title: "title", displayMode: "displayMode", timeOut: "timeOut", autoHide: "autoHide" }, usesInheritance: true, ngImport: i0, template: `
       <ax-alert color="danger" *ngIf="displayMode=='alert' && _content" [timeOut]="_timeOut" #a (onClosed)="_handleOnDismissed($event)">
           <ax-icon></ax-icon>
           <ax-title>{{title}}</ax-title>
@@ -351,9 +354,9 @@ class AXValidationSummaryComponent extends AXBaseComponentMixin {
         </ax-suffix>
         </ax-footer>
       </ax-alert>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.AXDecoratorSuffixComponent, selector: "ax-suffix" }, { kind: "component", type: i3.AXDecoratorContentComponent, selector: "ax-content" }, { kind: "component", type: i3.AXDecoratorFooterComponent, selector: "ax-footer" }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorTitleComponent, selector: "ax-title" }, { kind: "component", type: i4.AXAlertComponent, selector: "ax-alert", inputs: ["color", "timeOut", "visible"], outputs: ["colorChange", "onClosed"] }, { kind: "component", type: i5.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title , ax-sub-title" }, { kind: "component", type: i4.AXAlertComponent, selector: "ax-alert", inputs: ["color", "timeOut", "visible"], outputs: ["colorChange", "onClosed"] }, { kind: "component", type: i5.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AXValidationSummaryComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AXValidationSummaryComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-validation-summary',
@@ -375,7 +378,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.AXToastService }, { type: AXFormComponent, decorators: [{
+        }], ctorParameters: function () { return [{ type: i1$1.AXToastService }, { type: AXFormComponent, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
@@ -411,17 +414,17 @@ class AXFormModule {
             },
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AXFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.6", ngImport: i0, type: AXFormModule, declarations: [AXFormFieldComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AXFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: AXFormModule, declarations: [AXFormFieldComponent,
             AXFormComponent,
             AXValidationRuleComponent,
             AXValidationSummaryComponent], imports: [CommonModule, AXDecoratorModule, AXAlertModule, AXButtonModule], exports: [AXFormFieldComponent,
             AXFormComponent,
             AXValidationRuleComponent,
             AXValidationSummaryComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AXFormModule, imports: [CommonModule, AXDecoratorModule, AXAlertModule, AXButtonModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AXFormModule, imports: [CommonModule, AXDecoratorModule, AXAlertModule, AXButtonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AXFormModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AXFormModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [