@acorex/components 7.8.14 → 7.8.16

package/fesm2022/acorex-components-scheduler.mjs

@@ -94,7 +94,7 @@ class AXSchedulerComponent extends MXBaseComponent {
         this.current = this.current.add('month', -1);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXSchedulerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: AXSchedulerComponent, selector: "ax-scheduler", usesInheritance: true, ngImport: i0, template: "<div class=\"ax-flex ax-flex-col ax-h-full\">\n  <div class=\"scheduler-header\">\n    <p>\n      {{ current.format('MMMM yyyy') }}\n    </p>\n    <div class=\"scheduler-actions\">\n      <div class=\"ax-flex ax-border ax-rounded-md ax-items-center ax-px-1 ax-gap-0.5 ax-bg-surface\">\n        <button class=\"ax-w-8 ax-h-8 ax-rounded-md hover:ax-bg-neutral-100\" (click)=\"_handlePrevClick()\">\n          <ax-icon class=\"fa-solid fa-chevron-left\"> </ax-icon>\n        </button>\n        <ng-container *ngIf=\"_size === 'SM'; else elseTemplate\">\n          <span class=\"ax-text-neutral-200\">|</span>\n        </ng-container>\n        <ng-template #elseTemplate>\n          <ax-button look=\"blank\" class=\"ax-sm\" text=\"Today\"> </ax-button>\n        </ng-template>\n        <button class=\"ax-w-8 ax-h-8 ax-rounded-md hover:ax-bg-neutral-100\" (click)=\"_handleNextClick()\">\n          <ax-icon class=\"fa-solid fa-chevron-right\"> </ax-icon>\n        </button>\n      </div>\n      <ax-button [text]=\"_size === 'SM' ? '' : 'Week View'\" class=\"!ax-bg-surface ax-border\">\n        <ax-suffix>\n          <ax-icon [class]=\"\n              _size === 'SM'\n                ? 'fa-solid fa-ellipsis-vertical'\n                : 'fa-solid fa-chevron-down ax-text-neutral-400'\n            \">\n          </ax-icon>\n        </ax-suffix>\n        <ax-dropdown-panel (onItemClick)=\"handleOnItemClick()\" [adaptivityEnabled]=\"true\">\n          <ax-button-item *ngIf=\"_size === 'SM' || _size === 'MD'\" text=\"Add Event\" name=\"text\" [divided]=\"true\"\n            color=\"primary\">\n          </ax-button-item>\n          <ax-button-item *ngIf=\"_size === 'SM'\" text=\"Go to Today\" name=\"text\" [divided]=\"true\">\n          </ax-button-item>\n          <ax-button-item text=\"Day View\" name=\"text\"> </ax-button-item>\n          <ax-button-item text=\"Week View\" name=\"text\"> </ax-button-item>\n          <ax-button-item text=\"Month View\" name=\"text\"> </ax-button-item>\n          <ax-button-item text=\"Year View\" name=\"text\"> </ax-button-item>\n        </ax-dropdown-panel>\n        <ax-suffix>\n          <ax-icon icon=\"\"></ax-icon>\n        </ax-suffix>\n      </ax-button>\n      <ax-button color=\"primary\" text=\"Add Event\" class=\"ax-hidden lg:ax-block\">\n        <ax-prefix>\n          <ax-icon class=\"fa-solid fa-plus\"></ax-icon>\n        </ax-prefix>\n      </ax-button>\n    </div>\n  </div>\n  <ax-scheduler-month-view [date]=\"current\"></ax-scheduler-month-view>\n  <!-- <ax-scheduler-week-view></ax-scheduler-week-view> -->\n</div>", styles: ["ax-scheduler{height:100%;display:block;border-width:1px;border-radius:.75rem;@apply ax-bg-neutral-100;overflow:hidden}ax-scheduler .scheduler-header{display:flex;align-items:center;justify-content:space-between;padding:1rem;border-bottom-width:1px}ax-scheduler .scheduler-header p{margin:0;font-size:1rem;font-weight:500}ax-scheduler .scheduler-actions{display:flex;gap:.75rem}ax-scheduler ax-scheduler-month-view{display:flex;flex-direction:column;flex:1 1 auto}ax-scheduler ax-scheduler-month-view .mobile-task:hover ax-button{opacity:1}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "component", type: i2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { 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.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "adaptivityEnabled"], outputs: ["onOpened", "onClosed", "onItemClick"] }, { kind: "component", type: AXSchedulerMonthViewComponent, selector: "ax-scheduler-month-view", inputs: ["date"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: AXSchedulerComponent, selector: "ax-scheduler", usesInheritance: true, ngImport: i0, template: "<div class=\"ax-flex ax-flex-col ax-h-full\">\n  <div class=\"scheduler-header\">\n    <p>\n      {{ current.format('MMMM yyyy') }}\n    </p>\n    <div class=\"scheduler-actions\">\n      <div class=\"ax-flex ax-border ax-rounded-md ax-items-center ax-px-1 ax-gap-0.5 ax-bg-surface\">\n        <button class=\"ax-w-8 ax-h-8 ax-rounded-md hover:ax-bg-neutral-100\" (click)=\"_handlePrevClick()\">\n          <ax-icon class=\"fa-solid fa-chevron-left\"> </ax-icon>\n        </button>\n        <ng-container *ngIf=\"_size === 'SM'; else elseTemplate\">\n          <span class=\"ax-text-neutral-200\">|</span>\n        </ng-container>\n        <ng-template #elseTemplate>\n          <ax-button look=\"blank\" class=\"ax-sm\" text=\"Today\"> </ax-button>\n        </ng-template>\n        <button class=\"ax-w-8 ax-h-8 ax-rounded-md hover:ax-bg-neutral-100\" (click)=\"_handleNextClick()\">\n          <ax-icon class=\"fa-solid fa-chevron-right\"> </ax-icon>\n        </button>\n      </div>\n      <ax-button [text]=\"_size === 'SM' ? '' : 'Week View'\" class=\"!ax-bg-surface ax-border\">\n        <ax-suffix>\n          <ax-icon [class]=\"\n              _size === 'SM'\n                ? 'fa-solid fa-ellipsis-vertical'\n                : 'fa-solid fa-chevron-down ax-text-neutral-400'\n            \">\n          </ax-icon>\n        </ax-suffix>\n        <ax-dropdown-panel (onItemClick)=\"handleOnItemClick()\" [adaptivityEnabled]=\"true\">\n          <ax-button-item *ngIf=\"_size === 'SM' || _size === 'MD'\" text=\"Add Event\" name=\"text\" [divided]=\"true\"\n            color=\"primary\">\n          </ax-button-item>\n          <ax-button-item *ngIf=\"_size === 'SM'\" text=\"Go to Today\" name=\"text\" [divided]=\"true\">\n          </ax-button-item>\n          <ax-button-item text=\"Day View\" name=\"text\"> </ax-button-item>\n          <ax-button-item text=\"Week View\" name=\"text\"> </ax-button-item>\n          <ax-button-item text=\"Month View\" name=\"text\"> </ax-button-item>\n          <ax-button-item text=\"Year View\" name=\"text\"> </ax-button-item>\n        </ax-dropdown-panel>\n        <ax-suffix>\n          <ax-icon icon=\"\"></ax-icon>\n        </ax-suffix>\n      </ax-button>\n      <ax-button color=\"primary\" text=\"Add Event\" class=\"ax-hidden lg:ax-block\">\n        <ax-prefix>\n          <ax-icon class=\"fa-solid fa-plus\"></ax-icon>\n        </ax-prefix>\n      </ax-button>\n    </div>\n  </div>\n  <ax-scheduler-month-view [date]=\"current\"></ax-scheduler-month-view>\n  <!-- <ax-scheduler-week-view></ax-scheduler-week-view> -->\n</div>", styles: ["ax-scheduler{height:100%;display:block;border-width:1px;border-radius:.75rem;@apply ax-bg-neutral-100;overflow:hidden}ax-scheduler .scheduler-header{display:flex;align-items:center;justify-content:space-between;padding:1rem;border-bottom-width:1px}ax-scheduler .scheduler-header p{margin:0;font-size:1rem;font-weight:500}ax-scheduler .scheduler-actions{display:flex;gap:.75rem}ax-scheduler ax-scheduler-month-view{display:flex;flex-direction:column;flex:1 1 auto}ax-scheduler ax-scheduler-month-view .mobile-task:hover ax-button{opacity:1}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "component", type: i2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { 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.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXSchedulerMonthViewComponent, selector: "ax-scheduler-month-view", inputs: ["date"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXSchedulerComponent, decorators: [{
             type: Component,

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

@@ -1 +1 @@
-{"version":3,"file":"acorex-components-scheduler.mjs","sources":["../../../../libs/components/scheduler/src/lib/scheduler-month-view.component.ts","../../../../libs/components/scheduler/src/lib/scheduler-month-view.component.html","../../../../libs/components/scheduler/src/lib/scheduler-week-view.component.ts","../../../../libs/components/scheduler/src/lib/scheduler-week-view.component.html","../../../../libs/components/scheduler/src/lib/scheduler.component.ts","../../../../libs/components/scheduler/src/lib/scheduler.component.html","../../../../libs/components/scheduler/src/lib/scheduler.module.ts","../../../../libs/components/scheduler/src/acorex-components-scheduler.ts"],"sourcesContent":["import { MXBaseComponent } from '@acorex/components/common';\nimport { AXDateTime, AXDateTimeRange } from '@acorex/core/dateTime';\nimport { AXPlatform } from '@acorex/core/platform';\nimport { ChangeDetectionStrategy, Component, Input, ViewEncapsulation, inject } from '@angular/core';\n\n@Component({\n  selector: 'ax-scheduler-month-view',\n  templateUrl: './scheduler-month-view.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n})\nexport class AXSchedulerMonthViewComponent extends MXBaseComponent {\n  private _platform = inject(AXPlatform);\n\n  protected _slots: { date: AXDateTime; cssClass: { [key: string]: boolean }; isToday: boolean }[] = [];\n  protected get dayNames(): string[] {\n    return this._platform.is('SM')\n      ? this.date.calendar.dayNames.map((c) => c.letter)\n      : this.date.calendar.dayNames.map((c) => c.short);\n  }\n\n  private _date: AXDateTime;\n  @Input()\n  public get date(): AXDateTime {\n    return this._date;\n  }\n  public set date(v: AXDateTime) {\n    this._date = v;\n    this.generateSlots();\n  }\n\n  ngOnInit() {\n    super.ngOnInit();\n    this.generateSlots();\n    this._platform.resize.subscribe((c) => {\n      this.cdr.markForCheck();\n    });\n  }\n\n  generateSlots() {\n    const startDate = this.date.startOf('month').startOf('week');\n    const endDate = this.date.endOf('month').endOf('week');\n    const range = new AXDateTimeRange(startDate, endDate).enumurate('day');\n    this._slots = range.map((c: AXDateTime) => ({\n      date: c,\n      cssClass: {\n        '!ax-bg-neutral-100': c.monthOfYear != this.date.monthOfYear,\n      },\n      isToday: c.dayOfYear == this.date.dayOfYear,\n    }));\n  }\n}\n","<!-- <div class=\"ax-flex ax-flex-col ax-flex-auto ax-shadow-md\"> -->\n<div class=\"ax-grid ax-grid-cols-7 ax-gap-[1px] ax-w-full ax-bg-neutral-200 ax-border-b\">\n    <ng-container *ngFor=\"let item of dayNames\">\n        <div class=\"ax-flex ax-items-center ax-justify-center ax-py-2 ax-bg-white ax-font-medium\">\n            {{item}}\n        </div>\n    </ng-container>\n</div>\n<div class=\"ax-flex ax-flex-auto ax-bg-neutral-200\">\n    <div class=\"ax-grid ax-grid-cols-7 ax-gap-[1px] ax-w-full\">\n        <ng-container *ngFor=\"let item of _slots\">\n            <div class=\"ax-py-2 ax-px-3 ax-bg-white ax-cursor-pointer hover:ax-bg-neutral-100\n                ax-flex ax-flex-col ax-justify-between\" [ngClass]=\"item.cssClass\">\n                <time class=\"ax-text-sm ax-flex ax-items-center ax-justify-center ax-rounded-full ax-w-6 ax-h-6\"\n                    [class.ax-bg-primary-500]=\"item.isToday\" [class.ax-text-white]=\"item.isToday\"\n                    datetime=\"item.date.format('dd')\">{{item.date.format('d')}}</time>\n                <ol class=\"ax-mt-2 ax-hidden lg:ax-flex ax-flex-col ax-gap-1\">\n                    <li *ngIf=\"item.date.dayOfMonth % 6 === 0\">\n                        <a href=\"#\"\n                            class=\"ax-flex ax-justify-between ax-text-sm ax-bg-primary-500 ax-py-1 ax-px-2 ax-rounded ax-text-primary-fore\">\n                            <p class=\"ax-text-sm\">Launch Time</p>\n                            <time class=\"ax-ms-3\" datetime=\"item.date.format('HH A')\">\n                                {{item.date.format('hh A')}}\n                            </time>\n                        </a>\n                    </li>\n                    <li *ngIf=\"item.date.dayOfMonth % 5 === 0\">\n                        <a href=\"#\"\n                            class=\"ax-flex ax-justify-between ax-text-sm ax-bg-success-500 ax-py-1 ax-px-2 ax-rounded ax-text-success-fore\">\n                            <p class=\"ax-text-sm\">Daily meeting</p>\n                            <time class=\"ax-ms-3\" datetime=\"item.date.format('HH A')\">\n                                {{item.date.format('hh A')}}\n                            </time>\n                        </a>\n                    </li>\n                </ol>\n                <ol class=\"ax-flex ax-gap-1 ax-self-center md:ax-hidden\">\n                    <li *ngIf=\"item.date.dayOfMonth % 5 === 0\">\n                        <span class=\"ax-flex ax-w-1.5 ax-h-1.5 ax-rounded-full ax-bg-primary-500 lg:ax-hidden\"></span>\n                    </li>\n                    <li *ngIf=\"item.date.dayOfMonth % 6 === 0\">\n                        <span class=\"ax-flex ax-w-1.5 ax-h-1.5 ax-rounded-full ax-bg-danger-500 lg:ax-hidden\"></span>\n                    </li>\n                    <li *ngIf=\"item.date.dayOfMonth % 8 === 0\">\n                        <span class=\"ax-flex ax-w-1.5 ax-h-1.5 ax-rounded-full ax-bg-warning-500 lg:ax-hidden\"></span>\n                    </li>\n                    <li *ngIf=\"item.date.dayOfMonth % 3 === 0\">\n                        <span class=\"ax-flex ax-w-1.5 ax-h-1.5 ax-rounded-full ax-bg-success-500 lg:ax-hidden\"></span>\n                    </li>\n                </ol>\n            </div>\n        </ng-container>\n    </div>\n</div>\n<!-- </div> -->\n<div class=\"ax-p-4 lg:ax-hidden\">\n    <ol\n        class=\"ax-flex ax-flex-col ax-rounded-lg ax-border ax-bg-surface ax-divide-y ax-overflow-hidden ax-cursor-pointer\">\n        <li class=\"ax-flex ax-items-start ax-justify-between ax-p-4 hover:ax-bg-neutral-100 mobile-task\">\n            <div class=\"ax-flex ax-flex-col ax-gap-2\">\n                <p class=\"ax-font-medium\">Daily Meeting at the Office</p>\n                <div class=\"ax-flex ax-gap-2 ax-items-center\">\n                    <ax-icon class=\"fa-solid fa-clock ax-text-neutral-400\"></ax-icon>\n                    <p class=\"ax-text-sm\">3 PM</p>\n                </div>\n            </div>\n            <ax-button text=\"Edit\" class=\"!ax-bg-surface ax-border ax-sm ax-opacity-0\"></ax-button>\n        </li>\n    </ol>\n</div>","import { MXBaseComponent } from '@acorex/components/common';\nimport { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';\n\n@Component({\n  selector: 'ax-scheduler-week-view',\n  templateUrl: './scheduler-week-view.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n})\nexport class AXSchedulerWeekViewComponent extends MXBaseComponent {}\n","<div class=\"ax-flex ax-flex-col ax-flex-auto ax-isolate ax-overflow-auto ax-bg-white\">\n    <div class=\"ax-flex ax-flex-col ax-max-w-full\">\n        <div class=\"ax-shadow-md ax-pr-8 ax-z-30 ax-sticky ax-top-0\">\n            <div class=\"ax-grid ax-leading-6 ax-border-r ax-grid-cols-7\">\n                <div class=\"ax-w-14 ax-col-end-1\"></div>\n                <div\n                    class=\"ax-flex ax-items-center ax-justify-center ax-py-3 ax-bg-white ax-font-medium ax-border-l ax-border-r\">\n                    Mon 10\n                </div>\n                <div class=\"ax-flex ax-items-center ax-justify-center ax-py-3 ax-bg-white ax-font-medium ax-border-r\">\n                    Mon 10\n                </div>\n                <div class=\"ax-flex ax-items-center ax-justify-center ax-py-3 ax-bg-white ax-font-medium ax-border-r\">\n                    Mon 10\n                </div>\n                <div class=\"ax-flex ax-items-center ax-justify-center ax-py-3 ax-bg-white ax-font-medium ax-border-r\">\n                    Mon 10\n                </div>\n                <div class=\"ax-flex ax-items-center ax-justify-center ax-py-3 ax-bg-white ax-font-medium ax-border-r\">\n                    Mon 10\n                </div>\n                <div class=\"ax-flex ax-items-center ax-justify-center ax-py-3 ax-bg-white ax-font-medium ax-border-r\">\n                    Mon 10\n                </div>\n                <div class=\"ax-flex ax-items-center ax-justify-center ax-py-3 ax-bg-white ax-font-medium\">\n                    Mon 10\n                </div>\n            </div>\n        </div>\n        <div class=\"ax-flex ax-flex-auto\">\n            <div class=\"ax-w-14 ax-z-10 ax-sticky ax-left-0 ax-bg-white ax-shadow\"></div>\n            <div class=\"ax-grid ax-flex-auto ax-grid-cols-1 ax-grid-rows-1\">\n                <div class=\"ax-grid ax-col-start-1 ax-col-end-2 ax-row-start-1\"\n                    style=\"grid-template-rows: repeat(45, minmax(3.5rem, 1fr))\">\n                    <div class=\"ax-row-end-1 ax-h-7\"></div>\n                    <div class=\"ax-border-t ax-border-b\">\n                        <div class=\"ax-leading-5 ax-text-right ax-w-14 -ax-mt-[0.625rem] -ax-ml-14 ax-sticky ax-left-0\">\n                        </div>\n                    </div>\n                </div>\n                <div class=\"ax-grid ax-grid-rows-1 ax-grid-cols-7 ax-row-start-1 ax-col-end-2 ax-col-start-1\">\n                    <div class=\"ax-col-start-1 ax-row-start-1 ax-row-end-[-1]\"></div>\n                    <div class=\"ax-col-start-2 ax-row-start-1 ax-row-end-[-1] ax-border-l\"></div>\n                    <div class=\"ax-col-start-3 ax-row-start-1 ax-row-end-[-1] ax-border-l\"></div>\n                    <div class=\"ax-col-start-4 ax-row-start-1 ax-row-end-[-1] ax-border-l\"></div>\n                    <div class=\"ax-col-start-5 ax-row-start-1 ax-row-end-[-1] ax-border-l\"></div>\n                    <div class=\"ax-col-start-6 ax-row-start-1 ax-row-end-[-1] ax-border-l\"></div>\n                    <div class=\"ax-col-start-7 ax-row-start-1 ax-row-end-[-1] ax-border-l\"></div>\n                    <div class=\"ax-col-start-8 ax-row-start-1 ax-row-end-[-1] ax-border-l ax-w-8\"></div>\n                </div>\n                <ol class=\"ax-grid ax-pr-8 ax-grid-cols-7 ax-row-start-1 ax-col-end-2 ax-col-start-2\"\n                    style=\"grid-template-rows: 1.75rem repeat(288, minmax(0px, 1fr)) auto\"></ol>\n            </div>\n        </div>\n    </div>\n</div>","import { MXBaseComponent } from '@acorex/components/common';\nimport { AXCalendarService, AXDateTime } from '@acorex/core/dateTime';\nimport { AXPlatform, AXScreenSizes } from '@acorex/core/platform';\nimport { ChangeDetectionStrategy, Component, ViewEncapsulation, inject } from '@angular/core';\n\n@Component({\n  selector: 'ax-scheduler',\n  templateUrl: './scheduler.component.html',\n  styleUrls: ['./scheduler.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n})\nexport class AXSchedulerComponent extends MXBaseComponent {\n  private _calendarService: AXCalendarService = inject(AXCalendarService);\n  protected _platform: AXPlatform = inject(AXPlatform);\n  protected current: AXDateTime = this._calendarService.now();\n\n  protected _size: AXScreenSizes;\n\n  handleOnItemClick() {}\n\n  ngOnInit(): void {\n    super.ngOnInit();\n    this.detectSize();\n    this._platform.resize.subscribe(() => {\n      this.detectSize();\n      super.cdr.markForCheck();\n    });\n  }\n\n  private detectSize() {\n    this._size = this._platform.screenSize;\n  }\n\n  _handleNextClick() {\n    this.current = this.current.add('month', 1);\n  }\n\n  _handlePrevClick() {\n    this.current = this.current.add('month', -1);\n  }\n}\n","<div class=\"ax-flex ax-flex-col ax-h-full\">\n  <div class=\"scheduler-header\">\n    <p>\n      {{ current.format('MMMM yyyy') }}\n    </p>\n    <div class=\"scheduler-actions\">\n      <div class=\"ax-flex ax-border ax-rounded-md ax-items-center ax-px-1 ax-gap-0.5 ax-bg-surface\">\n        <button class=\"ax-w-8 ax-h-8 ax-rounded-md hover:ax-bg-neutral-100\" (click)=\"_handlePrevClick()\">\n          <ax-icon class=\"fa-solid fa-chevron-left\"> </ax-icon>\n        </button>\n        <ng-container *ngIf=\"_size === 'SM'; else elseTemplate\">\n          <span class=\"ax-text-neutral-200\">|</span>\n        </ng-container>\n        <ng-template #elseTemplate>\n          <ax-button look=\"blank\" class=\"ax-sm\" text=\"Today\"> </ax-button>\n        </ng-template>\n        <button class=\"ax-w-8 ax-h-8 ax-rounded-md hover:ax-bg-neutral-100\" (click)=\"_handleNextClick()\">\n          <ax-icon class=\"fa-solid fa-chevron-right\"> </ax-icon>\n        </button>\n      </div>\n      <ax-button [text]=\"_size === 'SM' ? '' : 'Week View'\" class=\"!ax-bg-surface ax-border\">\n        <ax-suffix>\n          <ax-icon [class]=\"\n              _size === 'SM'\n                ? 'fa-solid fa-ellipsis-vertical'\n                : 'fa-solid fa-chevron-down ax-text-neutral-400'\n            \">\n          </ax-icon>\n        </ax-suffix>\n        <ax-dropdown-panel (onItemClick)=\"handleOnItemClick()\" [adaptivityEnabled]=\"true\">\n          <ax-button-item *ngIf=\"_size === 'SM' || _size === 'MD'\" text=\"Add Event\" name=\"text\" [divided]=\"true\"\n            color=\"primary\">\n          </ax-button-item>\n          <ax-button-item *ngIf=\"_size === 'SM'\" text=\"Go to Today\" name=\"text\" [divided]=\"true\">\n          </ax-button-item>\n          <ax-button-item text=\"Day View\" name=\"text\"> </ax-button-item>\n          <ax-button-item text=\"Week View\" name=\"text\"> </ax-button-item>\n          <ax-button-item text=\"Month View\" name=\"text\"> </ax-button-item>\n          <ax-button-item text=\"Year View\" name=\"text\"> </ax-button-item>\n        </ax-dropdown-panel>\n        <ax-suffix>\n          <ax-icon icon=\"\"></ax-icon>\n        </ax-suffix>\n      </ax-button>\n      <ax-button color=\"primary\" text=\"Add Event\" class=\"ax-hidden lg:ax-block\">\n        <ax-prefix>\n          <ax-icon class=\"fa-solid fa-plus\"></ax-icon>\n        </ax-prefix>\n      </ax-button>\n    </div>\n  </div>\n  <ax-scheduler-month-view [date]=\"current\"></ax-scheduler-month-view>\n  <!-- <ax-scheduler-week-view></ax-scheduler-week-view> -->\n</div>","import { AXButtonModule } from '@acorex/components/button';\nimport { AXDecoratorModule } from '@acorex/components/decorators';\nimport { AXDropdownModule } from '@acorex/components/dropdown';\nimport { AXDateTimeModule } from '@acorex/core/dateTime';\nimport { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { AXSchedulerMonthViewComponent } from './scheduler-month-view.component';\nimport { AXSchedulerWeekViewComponent } from './scheduler-week-view.component';\nimport { AXSchedulerComponent } from './scheduler.component';\n\nconst COMPONENT = [AXSchedulerComponent, AXSchedulerMonthViewComponent, AXSchedulerWeekViewComponent];\nconst MODULES = [CommonModule, AXButtonModule, AXDecoratorModule, AXDropdownModule, AXDateTimeModule];\n\n@NgModule({\n  declarations: [...COMPONENT],\n  imports: [...MODULES],\n  exports: [...COMPONENT],\n  providers: [],\n})\nexport class AXSchedulerModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i5.AXSchedulerMonthViewComponent"],"mappings":"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"}
+{"version":3,"file":"acorex-components-scheduler.mjs","sources":["../../../../libs/components/scheduler/src/lib/scheduler-month-view.component.ts","../../../../libs/components/scheduler/src/lib/scheduler-month-view.component.html","../../../../libs/components/scheduler/src/lib/scheduler-week-view.component.ts","../../../../libs/components/scheduler/src/lib/scheduler-week-view.component.html","../../../../libs/components/scheduler/src/lib/scheduler.component.ts","../../../../libs/components/scheduler/src/lib/scheduler.component.html","../../../../libs/components/scheduler/src/lib/scheduler.module.ts","../../../../libs/components/scheduler/src/acorex-components-scheduler.ts"],"sourcesContent":["import { MXBaseComponent } from '@acorex/components/common';\nimport { AXDateTime, AXDateTimeRange } from '@acorex/core/dateTime';\nimport { AXPlatform } from '@acorex/core/platform';\nimport { ChangeDetectionStrategy, Component, Input, ViewEncapsulation, inject } from '@angular/core';\n\n@Component({\n  selector: 'ax-scheduler-month-view',\n  templateUrl: './scheduler-month-view.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n})\nexport class AXSchedulerMonthViewComponent extends MXBaseComponent {\n  private _platform = inject(AXPlatform);\n\n  protected _slots: { date: AXDateTime; cssClass: { [key: string]: boolean }; isToday: boolean }[] = [];\n  protected get dayNames(): string[] {\n    return this._platform.is('SM')\n      ? this.date.calendar.dayNames.map((c) => c.letter)\n      : this.date.calendar.dayNames.map((c) => c.short);\n  }\n\n  private _date: AXDateTime;\n  @Input()\n  public get date(): AXDateTime {\n    return this._date;\n  }\n  public set date(v: AXDateTime) {\n    this._date = v;\n    this.generateSlots();\n  }\n\n  ngOnInit() {\n    super.ngOnInit();\n    this.generateSlots();\n    this._platform.resize.subscribe((c) => {\n      this.cdr.markForCheck();\n    });\n  }\n\n  generateSlots() {\n    const startDate = this.date.startOf('month').startOf('week');\n    const endDate = this.date.endOf('month').endOf('week');\n    const range = new AXDateTimeRange(startDate, endDate).enumurate('day');\n    this._slots = range.map((c: AXDateTime) => ({\n      date: c,\n      cssClass: {\n        '!ax-bg-neutral-100': c.monthOfYear != this.date.monthOfYear,\n      },\n      isToday: c.dayOfYear == this.date.dayOfYear,\n    }));\n  }\n}\n","<!-- <div class=\"ax-flex ax-flex-col ax-flex-auto ax-shadow-md\"> -->\n<div class=\"ax-grid ax-grid-cols-7 ax-gap-[1px] ax-w-full ax-bg-neutral-200 ax-border-b\">\n    <ng-container *ngFor=\"let item of dayNames\">\n        <div class=\"ax-flex ax-items-center ax-justify-center ax-py-2 ax-bg-white ax-font-medium\">\n            {{item}}\n        </div>\n    </ng-container>\n</div>\n<div class=\"ax-flex ax-flex-auto ax-bg-neutral-200\">\n    <div class=\"ax-grid ax-grid-cols-7 ax-gap-[1px] ax-w-full\">\n        <ng-container *ngFor=\"let item of _slots\">\n            <div class=\"ax-py-2 ax-px-3 ax-bg-white ax-cursor-pointer hover:ax-bg-neutral-100\n                ax-flex ax-flex-col ax-justify-between\" [ngClass]=\"item.cssClass\">\n                <time class=\"ax-text-sm ax-flex ax-items-center ax-justify-center ax-rounded-full ax-w-6 ax-h-6\"\n                    [class.ax-bg-primary-500]=\"item.isToday\" [class.ax-text-white]=\"item.isToday\"\n                    datetime=\"item.date.format('dd')\">{{item.date.format('d')}}</time>\n                <ol class=\"ax-mt-2 ax-hidden lg:ax-flex ax-flex-col ax-gap-1\">\n                    <li *ngIf=\"item.date.dayOfMonth % 6 === 0\">\n                        <a href=\"#\"\n                            class=\"ax-flex ax-justify-between ax-text-sm ax-bg-primary-500 ax-py-1 ax-px-2 ax-rounded ax-text-primary-fore\">\n                            <p class=\"ax-text-sm\">Launch Time</p>\n                            <time class=\"ax-ms-3\" datetime=\"item.date.format('HH A')\">\n                                {{item.date.format('hh A')}}\n                            </time>\n                        </a>\n                    </li>\n                    <li *ngIf=\"item.date.dayOfMonth % 5 === 0\">\n                        <a href=\"#\"\n                            class=\"ax-flex ax-justify-between ax-text-sm ax-bg-success-500 ax-py-1 ax-px-2 ax-rounded ax-text-success-fore\">\n                            <p class=\"ax-text-sm\">Daily meeting</p>\n                            <time class=\"ax-ms-3\" datetime=\"item.date.format('HH A')\">\n                                {{item.date.format('hh A')}}\n                            </time>\n                        </a>\n                    </li>\n                </ol>\n                <ol class=\"ax-flex ax-gap-1 ax-self-center md:ax-hidden\">\n                    <li *ngIf=\"item.date.dayOfMonth % 5 === 0\">\n                        <span class=\"ax-flex ax-w-1.5 ax-h-1.5 ax-rounded-full ax-bg-primary-500 lg:ax-hidden\"></span>\n                    </li>\n                    <li *ngIf=\"item.date.dayOfMonth % 6 === 0\">\n                        <span class=\"ax-flex ax-w-1.5 ax-h-1.5 ax-rounded-full ax-bg-danger-500 lg:ax-hidden\"></span>\n                    </li>\n                    <li *ngIf=\"item.date.dayOfMonth % 8 === 0\">\n                        <span class=\"ax-flex ax-w-1.5 ax-h-1.5 ax-rounded-full ax-bg-warning-500 lg:ax-hidden\"></span>\n                    </li>\n                    <li *ngIf=\"item.date.dayOfMonth % 3 === 0\">\n                        <span class=\"ax-flex ax-w-1.5 ax-h-1.5 ax-rounded-full ax-bg-success-500 lg:ax-hidden\"></span>\n                    </li>\n                </ol>\n            </div>\n        </ng-container>\n    </div>\n</div>\n<!-- </div> -->\n<div class=\"ax-p-4 lg:ax-hidden\">\n    <ol\n        class=\"ax-flex ax-flex-col ax-rounded-lg ax-border ax-bg-surface ax-divide-y ax-overflow-hidden ax-cursor-pointer\">\n        <li class=\"ax-flex ax-items-start ax-justify-between ax-p-4 hover:ax-bg-neutral-100 mobile-task\">\n            <div class=\"ax-flex ax-flex-col ax-gap-2\">\n                <p class=\"ax-font-medium\">Daily Meeting at the Office</p>\n                <div class=\"ax-flex ax-gap-2 ax-items-center\">\n                    <ax-icon class=\"fa-solid fa-clock ax-text-neutral-400\"></ax-icon>\n                    <p class=\"ax-text-sm\">3 PM</p>\n                </div>\n            </div>\n            <ax-button text=\"Edit\" class=\"!ax-bg-surface ax-border ax-sm ax-opacity-0\"></ax-button>\n        </li>\n    </ol>\n</div>","import { MXBaseComponent } from '@acorex/components/common';\nimport { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';\n\n@Component({\n  selector: 'ax-scheduler-week-view',\n  templateUrl: './scheduler-week-view.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n})\nexport class AXSchedulerWeekViewComponent extends MXBaseComponent {}\n","<div class=\"ax-flex ax-flex-col ax-flex-auto ax-isolate ax-overflow-auto ax-bg-white\">\n    <div class=\"ax-flex ax-flex-col ax-max-w-full\">\n        <div class=\"ax-shadow-md ax-pr-8 ax-z-30 ax-sticky ax-top-0\">\n            <div class=\"ax-grid ax-leading-6 ax-border-r ax-grid-cols-7\">\n                <div class=\"ax-w-14 ax-col-end-1\"></div>\n                <div\n                    class=\"ax-flex ax-items-center ax-justify-center ax-py-3 ax-bg-white ax-font-medium ax-border-l ax-border-r\">\n                    Mon 10\n                </div>\n                <div class=\"ax-flex ax-items-center ax-justify-center ax-py-3 ax-bg-white ax-font-medium ax-border-r\">\n                    Mon 10\n                </div>\n                <div class=\"ax-flex ax-items-center ax-justify-center ax-py-3 ax-bg-white ax-font-medium ax-border-r\">\n                    Mon 10\n                </div>\n                <div class=\"ax-flex ax-items-center ax-justify-center ax-py-3 ax-bg-white ax-font-medium ax-border-r\">\n                    Mon 10\n                </div>\n                <div class=\"ax-flex ax-items-center ax-justify-center ax-py-3 ax-bg-white ax-font-medium ax-border-r\">\n                    Mon 10\n                </div>\n                <div class=\"ax-flex ax-items-center ax-justify-center ax-py-3 ax-bg-white ax-font-medium ax-border-r\">\n                    Mon 10\n                </div>\n                <div class=\"ax-flex ax-items-center ax-justify-center ax-py-3 ax-bg-white ax-font-medium\">\n                    Mon 10\n                </div>\n            </div>\n        </div>\n        <div class=\"ax-flex ax-flex-auto\">\n            <div class=\"ax-w-14 ax-z-10 ax-sticky ax-left-0 ax-bg-white ax-shadow\"></div>\n            <div class=\"ax-grid ax-flex-auto ax-grid-cols-1 ax-grid-rows-1\">\n                <div class=\"ax-grid ax-col-start-1 ax-col-end-2 ax-row-start-1\"\n                    style=\"grid-template-rows: repeat(45, minmax(3.5rem, 1fr))\">\n                    <div class=\"ax-row-end-1 ax-h-7\"></div>\n                    <div class=\"ax-border-t ax-border-b\">\n                        <div class=\"ax-leading-5 ax-text-right ax-w-14 -ax-mt-[0.625rem] -ax-ml-14 ax-sticky ax-left-0\">\n                        </div>\n                    </div>\n                </div>\n                <div class=\"ax-grid ax-grid-rows-1 ax-grid-cols-7 ax-row-start-1 ax-col-end-2 ax-col-start-1\">\n                    <div class=\"ax-col-start-1 ax-row-start-1 ax-row-end-[-1]\"></div>\n                    <div class=\"ax-col-start-2 ax-row-start-1 ax-row-end-[-1] ax-border-l\"></div>\n                    <div class=\"ax-col-start-3 ax-row-start-1 ax-row-end-[-1] ax-border-l\"></div>\n                    <div class=\"ax-col-start-4 ax-row-start-1 ax-row-end-[-1] ax-border-l\"></div>\n                    <div class=\"ax-col-start-5 ax-row-start-1 ax-row-end-[-1] ax-border-l\"></div>\n                    <div class=\"ax-col-start-6 ax-row-start-1 ax-row-end-[-1] ax-border-l\"></div>\n                    <div class=\"ax-col-start-7 ax-row-start-1 ax-row-end-[-1] ax-border-l\"></div>\n                    <div class=\"ax-col-start-8 ax-row-start-1 ax-row-end-[-1] ax-border-l ax-w-8\"></div>\n                </div>\n                <ol class=\"ax-grid ax-pr-8 ax-grid-cols-7 ax-row-start-1 ax-col-end-2 ax-col-start-2\"\n                    style=\"grid-template-rows: 1.75rem repeat(288, minmax(0px, 1fr)) auto\"></ol>\n            </div>\n        </div>\n    </div>\n</div>","import { MXBaseComponent } from '@acorex/components/common';\nimport { AXCalendarService, AXDateTime } from '@acorex/core/dateTime';\nimport { AXPlatform, AXScreenSizes } from '@acorex/core/platform';\nimport { ChangeDetectionStrategy, Component, ViewEncapsulation, inject } from '@angular/core';\n\n@Component({\n  selector: 'ax-scheduler',\n  templateUrl: './scheduler.component.html',\n  styleUrls: ['./scheduler.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n})\nexport class AXSchedulerComponent extends MXBaseComponent {\n  private _calendarService: AXCalendarService = inject(AXCalendarService);\n  protected _platform: AXPlatform = inject(AXPlatform);\n  protected current: AXDateTime = this._calendarService.now();\n\n  protected _size: AXScreenSizes;\n\n  handleOnItemClick() {}\n\n  ngOnInit(): void {\n    super.ngOnInit();\n    this.detectSize();\n    this._platform.resize.subscribe(() => {\n      this.detectSize();\n      super.cdr.markForCheck();\n    });\n  }\n\n  private detectSize() {\n    this._size = this._platform.screenSize;\n  }\n\n  _handleNextClick() {\n    this.current = this.current.add('month', 1);\n  }\n\n  _handlePrevClick() {\n    this.current = this.current.add('month', -1);\n  }\n}\n","<div class=\"ax-flex ax-flex-col ax-h-full\">\n  <div class=\"scheduler-header\">\n    <p>\n      {{ current.format('MMMM yyyy') }}\n    </p>\n    <div class=\"scheduler-actions\">\n      <div class=\"ax-flex ax-border ax-rounded-md ax-items-center ax-px-1 ax-gap-0.5 ax-bg-surface\">\n        <button class=\"ax-w-8 ax-h-8 ax-rounded-md hover:ax-bg-neutral-100\" (click)=\"_handlePrevClick()\">\n          <ax-icon class=\"fa-solid fa-chevron-left\"> </ax-icon>\n        </button>\n        <ng-container *ngIf=\"_size === 'SM'; else elseTemplate\">\n          <span class=\"ax-text-neutral-200\">|</span>\n        </ng-container>\n        <ng-template #elseTemplate>\n          <ax-button look=\"blank\" class=\"ax-sm\" text=\"Today\"> </ax-button>\n        </ng-template>\n        <button class=\"ax-w-8 ax-h-8 ax-rounded-md hover:ax-bg-neutral-100\" (click)=\"_handleNextClick()\">\n          <ax-icon class=\"fa-solid fa-chevron-right\"> </ax-icon>\n        </button>\n      </div>\n      <ax-button [text]=\"_size === 'SM' ? '' : 'Week View'\" class=\"!ax-bg-surface ax-border\">\n        <ax-suffix>\n          <ax-icon [class]=\"\n              _size === 'SM'\n                ? 'fa-solid fa-ellipsis-vertical'\n                : 'fa-solid fa-chevron-down ax-text-neutral-400'\n            \">\n          </ax-icon>\n        </ax-suffix>\n        <ax-dropdown-panel (onItemClick)=\"handleOnItemClick()\" [adaptivityEnabled]=\"true\">\n          <ax-button-item *ngIf=\"_size === 'SM' || _size === 'MD'\" text=\"Add Event\" name=\"text\" [divided]=\"true\"\n            color=\"primary\">\n          </ax-button-item>\n          <ax-button-item *ngIf=\"_size === 'SM'\" text=\"Go to Today\" name=\"text\" [divided]=\"true\">\n          </ax-button-item>\n          <ax-button-item text=\"Day View\" name=\"text\"> </ax-button-item>\n          <ax-button-item text=\"Week View\" name=\"text\"> </ax-button-item>\n          <ax-button-item text=\"Month View\" name=\"text\"> </ax-button-item>\n          <ax-button-item text=\"Year View\" name=\"text\"> </ax-button-item>\n        </ax-dropdown-panel>\n        <ax-suffix>\n          <ax-icon icon=\"\"></ax-icon>\n        </ax-suffix>\n      </ax-button>\n      <ax-button color=\"primary\" text=\"Add Event\" class=\"ax-hidden lg:ax-block\">\n        <ax-prefix>\n          <ax-icon class=\"fa-solid fa-plus\"></ax-icon>\n        </ax-prefix>\n      </ax-button>\n    </div>\n  </div>\n  <ax-scheduler-month-view [date]=\"current\"></ax-scheduler-month-view>\n  <!-- <ax-scheduler-week-view></ax-scheduler-week-view> -->\n</div>","import { AXButtonModule } from '@acorex/components/button';\nimport { AXDecoratorModule } from '@acorex/components/decorators';\nimport { AXDropdownModule } from '@acorex/components/dropdown';\nimport { AXDateTimeModule } from '@acorex/core/dateTime';\nimport { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { AXSchedulerMonthViewComponent } from './scheduler-month-view.component';\nimport { AXSchedulerWeekViewComponent } from './scheduler-week-view.component';\nimport { AXSchedulerComponent } from './scheduler.component';\n\nconst COMPONENT = [AXSchedulerComponent, AXSchedulerMonthViewComponent, AXSchedulerWeekViewComponent];\nconst MODULES = [CommonModule, AXButtonModule, AXDecoratorModule, AXDropdownModule, AXDateTimeModule];\n\n@NgModule({\n  declarations: [...COMPONENT],\n  imports: [...MODULES],\n  exports: [...COMPONENT],\n  providers: [],\n})\nexport class AXSchedulerModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i5.AXSchedulerMonthViewComponent"],"mappings":"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"}

package/fesm2022/acorex-components-uploader.mjs

@@ -1,18 +1,19 @@
 import { MXBaseComponent } from '@acorex/components/common';
 import * as i0 from '@angular/core';
-import { Component, ViewEncapsulation, inject, Directive, Injectable, NgModule } from '@angular/core';
+import { Component, ViewEncapsulation, inject, Injectable, afterNextRender, Directive, Input, HostBinding, NgModule } from '@angular/core';
 import * as i1 from '@acorex/components/decorators';
 import { AXDecoratorModule } from '@acorex/components/decorators';
 import { trigger, state, style, AUTO_STYLE, transition, animate } from '@angular/animations';
 import * as i1$1 from '@angular/cdk/dialog';
-import { Dialog } from '@angular/cdk/dialog';
+import { Dialog, DIALOG_DATA } from '@angular/cdk/dialog';
+import { GlobalPositionStrategy } from '@angular/cdk/overlay';
+import { HttpClient, HttpClientModule } from '@angular/common/http';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i3 from '@acorex/core/translation';
 import { AXTranslator, AXTranslationModule } from '@acorex/core/translation';
 import { AXFileService } from '@acorex/core/file';
 import { AXButtonModule } from '@acorex/components/button';
-import { GlobalPositionStrategy } from '@angular/cdk/overlay';
 
 class AXUploaderDropZoneComponent extends MXBaseComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXUploaderDropZoneComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
@@ -23,35 +24,58 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImpor
             args: [{ selector: 'ax-uploader-drop-zone', encapsulation: ViewEncapsulation.None, template: "<div class=\"ax-uploader-drop-zone-container\">\n  <ax-icon class=\"ax-icon ax-icon-upload\"></ax-icon>\n  <div class=\"ax-uploader-drop-zone-description\">\n    <span>Drag & Drop or <a href=\"#\">Choose file</a> to upload</span>\n    <p>SVG, PNG, JPG or GIF (MAX. 800x400px)</p>\n  </div>\n</div>\n" }]
         }] });
 
+class AXUploaderService {
+    constructor() {
+        this.dialog = inject(Dialog);
+        this.http = inject(HttpClient);
+        this.files = [];
+    }
+    openDialog(data) {
+        this.files = [...data];
+        const positionStrategy = new GlobalPositionStrategy();
+        this.dialogRef = this.dialog.open(AXUploaderListComponent, {
+            hasBackdrop: false,
+            closeOnNavigation: false,
+            width: '320px',
+            maxWidth: 320,
+            panelClass: ['ax-uploader-list-pane', 'ax-animate-animated', 'ax-animate-fadeIn', 'ax-animate-faster'],
+            positionStrategy: positionStrategy.bottom().end('24px'),
+            data,
+        });
+    }
+    closeDialog() {
+        this.dialogRef.close();
+    }
+    upload(requestUrl, file, options) {
+        const formData = new FormData();
+        formData.append(file.name, file);
+        return this.http.post(requestUrl, formData, options);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXUploaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXUploaderService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXUploaderService, decorators: [{
+            type: Injectable
+        }] });
+
 class AXUploaderListComponent extends MXBaseComponent {
     constructor(dialogRef) {
         super();
         this.dialogRef = dialogRef;
-        this.items = [
-            {
-                name: 'avatar.png',
-                size: 2048,
-                type: 'picture',
-                description: 'Upload canceled',
-            },
-            {
-                name: 'intro.mkv',
-                size: 10024,
-                type: 'video',
-            },
-            {
-                name: 'time.xls',
-                size: 10024,
-                type: 'doc',
-            },
-            {
-                name: 'resume.pdf',
-                size: 10024,
-                type: 'pdf',
-            },
-        ];
+        this.items = inject(DIALOG_DATA);
+        this.uploadService = inject(AXUploaderService);
         this.leftTime = 5;
         this.isCollapsed = false;
+        afterNextRender(() => {
+            this.uploadService.upload('http://api.acorexui.com/api/v1/files', this.items[0]).subscribe({
+                next: (e) => {
+                    console.log(e);
+                },
+                error: (err) => {
+                    console.error(err);
+                },
+            });
+        });
     }
     toggle() {
         this.isCollapsed = !this.isCollapsed;
@@ -60,7 +84,7 @@ class AXUploaderListComponent extends MXBaseComponent {
         this.dialogRef.close();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXUploaderListComponent, deps: [{ token: i1$1.DialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: AXUploaderListComponent, selector: "ax-uploader-list", usesInheritance: true, ngImport: i0, template: "<div class=\"ax-uploader-list-header\">\n  <div>Uploader list</div>\n  <div>\n    <i\n      class=\"ax-icon\"\n      [ngClass]=\"{ 'ax-icon-chevron-down': !isCollapsed, 'ax-icon-chevron-up': isCollapsed }\"\n      (click)=\"toggle()\"\n    ></i>\n\n    <i class=\"ax-icon ax-icon-close\" (click)=\"close()\"></i>\n  </div>\n</div>\n\n<div [@collapse]=\"isCollapsed\">\n  <div class=\"ax-uploader-progress-status\">\n    <div>{{ leftTime }}min left</div>\n    <button>{{ 'common.cancel' | trans }}</button>\n  </div>\n  <ul class=\"ax-uploader-list-items\">\n    <ng-container *ngFor=\"let item of items\">\n      <li>\n        <div>\n          <i class=\"ax-icon ax-icon-inbox\"></i>\n          <div class=\"ax-uploader-item-text\">\n            <strong>{{ item.name }}</strong>\n            <small>{{ item.description }}</small>\n          </div>\n        </div>\n        <div></div>\n      </li>\n    </ng-container>\n  </ul>\n</div>\n", styles: [".ax-dark ax-uploader-list .ax-uploader-progress-status{background-color:rgba(var(--ax-color-primary-500),.25);color:rgba(var(--ax-color-primary-50));border-color:rgba(var(--ax-color-primary-500))}ax-uploader-list{display:block;background-color:rgba(var(--ax-color-surface));-webkit-border-top-left-radius:.75rem;-webkit-border-top-right-radius:.75rem;-moz-border-radius-topleft:.75rem;-moz-border-radius-topright:.75rem;border-top-left-radius:.75rem;border-top-right-radius:.75rem;overflow:hidden;box-shadow:-1px -1px 10px #00000029;border:1px solid;border-color:rgba(var(--ax-color-border-default));outline-color:rgba(var(--ax-color-primary-500))}ax-uploader-list .ax-uploader-list-header{display:flex;justify-content:space-between;padding:.75rem 1rem;background-color:rgba(var(--ax-color-on-surface));color:rgba(var(--ax-color-on-surface-fore));font-weight:500}ax-uploader-list .ax-uploader-list-header .ax-icon{font-size:1.5rem;cursor:pointer;margin-inline-start:.5rem}ax-uploader-list .ax-uploader-list-header .ax-icon:hover{opacity:.6}ax-uploader-list .ax-uploader-progress-status{display:flex;align-items:center;justify-content:space-between;font-size:.875rem;background-color:rgba(var(--ax-color-primary-100));color:rgba(var(--ax-color-primary-700));padding:.5rem .75rem;border-top:1px solid;border-bottom:1px solid;border-color:rgba(var(--ax-color-primary-200))}ax-uploader-list .ax-uploader-list-items{padding:.5rem 0}ax-uploader-list .ax-uploader-list-items li{font-size:.875rem;padding:.75rem;display:flex;align-items:center;justify-content:space-between}ax-uploader-list .ax-uploader-list-items li>div{display:flex}ax-uploader-list .ax-uploader-list-items li>div .ax-icon{display:flex;font-size:1.5rem;margin-inline-end:.5rem}ax-uploader-list .ax-uploader-list-items li>div .ax-uploader-item-text{display:flex;flex-direction:column}ax-uploader-list .ax-uploader-list-items li>div .ax-uploader-item-text strong{font-weight:500;display:block}ax-uploader-list .ax-uploader-list-items li>div .ax-uploader-item-text small{color:rgba(var(--ax-color-on-surface-fore),.75)}.ax-uploader-list-pane .cdk-dialog-container:focus,.ax-uploader-list-pane .cdk-dialog-container:focus-visible,.ax-uploader-list-pane .cdk-dialog-container:focus-within{outline:none}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "trans" }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: AXUploaderListComponent, selector: "ax-uploader-list", usesInheritance: true, ngImport: i0, template: "<div class=\"ax-uploader-list-header\">\n  <div>Uploader list</div>\n  <div>\n    <i\n      class=\"ax-icon\"\n      [ngClass]=\"{ 'ax-icon-chevron-down': !isCollapsed, 'ax-icon-chevron-up': isCollapsed }\"\n      (click)=\"toggle()\"\n    ></i>\n\n    <i class=\"ax-icon ax-icon-close\" (click)=\"close()\"></i>\n  </div>\n</div>\n\n<div [@collapse]=\"isCollapsed\">\n  <div class=\"ax-uploader-progress-status\">\n    <div>{{ leftTime }}min left</div>\n    <button>{{ 'common.cancel' | trans }}</button>\n  </div>\n  <ul class=\"ax-uploader-list-items\">\n    <ng-container *ngFor=\"let item of items\">\n      <li>\n        <div>\n          <i class=\"ax-icon ax-icon-inbox\"></i>\n          <div class=\"ax-uploader-item-text\">\n            <strong>{{ item.name }}</strong>\n            <small>{{ item.size }}</small>\n          </div>\n        </div>\n        <div></div>\n      </li>\n    </ng-container>\n  </ul>\n</div>\n", styles: [".ax-dark ax-uploader-list .ax-uploader-progress-status{background-color:rgba(var(--ax-color-primary-500),.25);color:rgba(var(--ax-color-primary-50));border-color:rgba(var(--ax-color-primary-500))}ax-uploader-list{display:block;background-color:rgba(var(--ax-color-surface));-webkit-border-top-left-radius:.75rem;-webkit-border-top-right-radius:.75rem;-moz-border-radius-topleft:.75rem;-moz-border-radius-topright:.75rem;border-top-left-radius:.75rem;border-top-right-radius:.75rem;overflow:hidden;box-shadow:-1px -1px 10px #00000029;border:1px solid;border-color:rgba(var(--ax-color-border-default));outline-color:rgba(var(--ax-color-primary-500))}ax-uploader-list .ax-uploader-list-header{display:flex;justify-content:space-between;padding:.75rem 1rem;background-color:rgba(var(--ax-color-on-surface));color:rgba(var(--ax-color-on-surface-fore));font-weight:500}ax-uploader-list .ax-uploader-list-header .ax-icon{font-size:1.5rem;cursor:pointer;margin-inline-start:.5rem}ax-uploader-list .ax-uploader-list-header .ax-icon:hover{opacity:.6}ax-uploader-list .ax-uploader-progress-status{display:flex;align-items:center;justify-content:space-between;font-size:.875rem;background-color:rgba(var(--ax-color-primary-100));color:rgba(var(--ax-color-primary-700));padding:.5rem .75rem;border-top:1px solid;border-bottom:1px solid;border-color:rgba(var(--ax-color-primary-200))}ax-uploader-list .ax-uploader-list-items{padding:.5rem 0;max-height:50vh;overflow-y:auto;overflow-x:hidden}ax-uploader-list .ax-uploader-list-items li{font-size:.875rem;padding:.75rem;display:flex;align-items:center;justify-content:space-between}ax-uploader-list .ax-uploader-list-items li>div{display:flex}ax-uploader-list .ax-uploader-list-items li>div .ax-icon{display:flex;font-size:1.5rem;margin-inline-end:.5rem}ax-uploader-list .ax-uploader-list-items li>div .ax-uploader-item-text{display:flex;flex-direction:column}ax-uploader-list .ax-uploader-list-items li>div .ax-uploader-item-text strong{font-weight:500;display:block}ax-uploader-list .ax-uploader-list-items li>div .ax-uploader-item-text small{color:rgba(var(--ax-color-on-surface-fore),.75)}.ax-uploader-list-pane .cdk-dialog-container:focus,.ax-uploader-list-pane .cdk-dialog-container:focus-visible,.ax-uploader-list-pane .cdk-dialog-container:focus-within{outline:none}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "trans" }], animations: [
             trigger('collapse', [
                 state('false', style({ height: AUTO_STYLE, visibility: AUTO_STYLE })),
                 state('true', style({ height: '0', visibility: 'hidden' })),
@@ -78,7 +102,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImpor
                             transition('false => true', animate(150 + 'ms ease-in')),
                             transition('true => false', animate(150 + 'ms ease-out')),
                         ]),
-                    ], template: "<div class=\"ax-uploader-list-header\">\n  <div>Uploader list</div>\n  <div>\n    <i\n      class=\"ax-icon\"\n      [ngClass]=\"{ 'ax-icon-chevron-down': !isCollapsed, 'ax-icon-chevron-up': isCollapsed }\"\n      (click)=\"toggle()\"\n    ></i>\n\n    <i class=\"ax-icon ax-icon-close\" (click)=\"close()\"></i>\n  </div>\n</div>\n\n<div [@collapse]=\"isCollapsed\">\n  <div class=\"ax-uploader-progress-status\">\n    <div>{{ leftTime }}min left</div>\n    <button>{{ 'common.cancel' | trans }}</button>\n  </div>\n  <ul class=\"ax-uploader-list-items\">\n    <ng-container *ngFor=\"let item of items\">\n      <li>\n        <div>\n          <i class=\"ax-icon ax-icon-inbox\"></i>\n          <div class=\"ax-uploader-item-text\">\n            <strong>{{ item.name }}</strong>\n            <small>{{ item.description }}</small>\n          </div>\n        </div>\n        <div></div>\n      </li>\n    </ng-container>\n  </ul>\n</div>\n", styles: [".ax-dark ax-uploader-list .ax-uploader-progress-status{background-color:rgba(var(--ax-color-primary-500),.25);color:rgba(var(--ax-color-primary-50));border-color:rgba(var(--ax-color-primary-500))}ax-uploader-list{display:block;background-color:rgba(var(--ax-color-surface));-webkit-border-top-left-radius:.75rem;-webkit-border-top-right-radius:.75rem;-moz-border-radius-topleft:.75rem;-moz-border-radius-topright:.75rem;border-top-left-radius:.75rem;border-top-right-radius:.75rem;overflow:hidden;box-shadow:-1px -1px 10px #00000029;border:1px solid;border-color:rgba(var(--ax-color-border-default));outline-color:rgba(var(--ax-color-primary-500))}ax-uploader-list .ax-uploader-list-header{display:flex;justify-content:space-between;padding:.75rem 1rem;background-color:rgba(var(--ax-color-on-surface));color:rgba(var(--ax-color-on-surface-fore));font-weight:500}ax-uploader-list .ax-uploader-list-header .ax-icon{font-size:1.5rem;cursor:pointer;margin-inline-start:.5rem}ax-uploader-list .ax-uploader-list-header .ax-icon:hover{opacity:.6}ax-uploader-list .ax-uploader-progress-status{display:flex;align-items:center;justify-content:space-between;font-size:.875rem;background-color:rgba(var(--ax-color-primary-100));color:rgba(var(--ax-color-primary-700));padding:.5rem .75rem;border-top:1px solid;border-bottom:1px solid;border-color:rgba(var(--ax-color-primary-200))}ax-uploader-list .ax-uploader-list-items{padding:.5rem 0}ax-uploader-list .ax-uploader-list-items li{font-size:.875rem;padding:.75rem;display:flex;align-items:center;justify-content:space-between}ax-uploader-list .ax-uploader-list-items li>div{display:flex}ax-uploader-list .ax-uploader-list-items li>div .ax-icon{display:flex;font-size:1.5rem;margin-inline-end:.5rem}ax-uploader-list .ax-uploader-list-items li>div .ax-uploader-item-text{display:flex;flex-direction:column}ax-uploader-list .ax-uploader-list-items li>div .ax-uploader-item-text strong{font-weight:500;display:block}ax-uploader-list .ax-uploader-list-items li>div .ax-uploader-item-text small{color:rgba(var(--ax-color-on-surface-fore),.75)}.ax-uploader-list-pane .cdk-dialog-container:focus,.ax-uploader-list-pane .cdk-dialog-container:focus-visible,.ax-uploader-list-pane .cdk-dialog-container:focus-within{outline:none}\n"] }]
+                    ], template: "<div class=\"ax-uploader-list-header\">\n  <div>Uploader list</div>\n  <div>\n    <i\n      class=\"ax-icon\"\n      [ngClass]=\"{ 'ax-icon-chevron-down': !isCollapsed, 'ax-icon-chevron-up': isCollapsed }\"\n      (click)=\"toggle()\"\n    ></i>\n\n    <i class=\"ax-icon ax-icon-close\" (click)=\"close()\"></i>\n  </div>\n</div>\n\n<div [@collapse]=\"isCollapsed\">\n  <div class=\"ax-uploader-progress-status\">\n    <div>{{ leftTime }}min left</div>\n    <button>{{ 'common.cancel' | trans }}</button>\n  </div>\n  <ul class=\"ax-uploader-list-items\">\n    <ng-container *ngFor=\"let item of items\">\n      <li>\n        <div>\n          <i class=\"ax-icon ax-icon-inbox\"></i>\n          <div class=\"ax-uploader-item-text\">\n            <strong>{{ item.name }}</strong>\n            <small>{{ item.size }}</small>\n          </div>\n        </div>\n        <div></div>\n      </li>\n    </ng-container>\n  </ul>\n</div>\n", styles: [".ax-dark ax-uploader-list .ax-uploader-progress-status{background-color:rgba(var(--ax-color-primary-500),.25);color:rgba(var(--ax-color-primary-50));border-color:rgba(var(--ax-color-primary-500))}ax-uploader-list{display:block;background-color:rgba(var(--ax-color-surface));-webkit-border-top-left-radius:.75rem;-webkit-border-top-right-radius:.75rem;-moz-border-radius-topleft:.75rem;-moz-border-radius-topright:.75rem;border-top-left-radius:.75rem;border-top-right-radius:.75rem;overflow:hidden;box-shadow:-1px -1px 10px #00000029;border:1px solid;border-color:rgba(var(--ax-color-border-default));outline-color:rgba(var(--ax-color-primary-500))}ax-uploader-list .ax-uploader-list-header{display:flex;justify-content:space-between;padding:.75rem 1rem;background-color:rgba(var(--ax-color-on-surface));color:rgba(var(--ax-color-on-surface-fore));font-weight:500}ax-uploader-list .ax-uploader-list-header .ax-icon{font-size:1.5rem;cursor:pointer;margin-inline-start:.5rem}ax-uploader-list .ax-uploader-list-header .ax-icon:hover{opacity:.6}ax-uploader-list .ax-uploader-progress-status{display:flex;align-items:center;justify-content:space-between;font-size:.875rem;background-color:rgba(var(--ax-color-primary-100));color:rgba(var(--ax-color-primary-700));padding:.5rem .75rem;border-top:1px solid;border-bottom:1px solid;border-color:rgba(var(--ax-color-primary-200))}ax-uploader-list .ax-uploader-list-items{padding:.5rem 0;max-height:50vh;overflow-y:auto;overflow-x:hidden}ax-uploader-list .ax-uploader-list-items li{font-size:.875rem;padding:.75rem;display:flex;align-items:center;justify-content:space-between}ax-uploader-list .ax-uploader-list-items li>div{display:flex}ax-uploader-list .ax-uploader-list-items li>div .ax-icon{display:flex;font-size:1.5rem;margin-inline-end:.5rem}ax-uploader-list .ax-uploader-list-items li>div .ax-uploader-item-text{display:flex;flex-direction:column}ax-uploader-list .ax-uploader-list-items li>div .ax-uploader-item-text strong{font-weight:500;display:block}ax-uploader-list .ax-uploader-list-items li>div .ax-uploader-item-text small{color:rgba(var(--ax-color-on-surface-fore),.75)}.ax-uploader-list-pane .cdk-dialog-container:focus,.ax-uploader-list-pane .cdk-dialog-container:focus-visible,.ax-uploader-list-pane .cdk-dialog-container:focus-within{outline:none}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$1.DialogRef }]; } });
 
 class AXUploaderOverlayComponent extends MXBaseComponent {
@@ -91,33 +115,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImpor
         }] });
 
 class AXUploaderZoneDirective {
+    initElement() {
+        this.element = this.elementRef.nativeElement;
+        this.element.style.position = 'relative';
+    }
     constructor(elementRef) {
         this.elementRef = elementRef;
         this.fileService = inject(AXFileService);
+        this.uploadService = inject(AXUploaderService);
+        this.multiple = true;
         this.stateClass = 'ax-uploader-overlay-state';
-    }
-    ngOnInit() {
-        this.element = this.elementRef.nativeElement;
-        this.element.style.position = 'relative';
-        this.init();
-    }
-    init() {
+        this.files = [];
+        this.initElement();
         this.element.addEventListener('dragenter', this.handleDragEnter.bind(this));
+        this.element.addEventListener('dragover', this.handleDragOver.bind(this));
+        this.element.addEventListener('drop', this.handleOnDrop.bind(this));
         this.element.addEventListener('dragleave', this.handleDragLeave.bind(this));
     }
     ngOnDestroy() {
         this.element.removeEventListener('dragenter', this.handleDragEnter.bind(this));
-        this.element.removeEventListener('dragover', this.handleDragEnter.bind(this));
+        this.element.removeEventListener('drop', this.handleOnDrop.bind(this));
+        this.element.removeEventListener('dragover', this.handleDragOver.bind(this));
+        this.element.removeEventListener('dragleave', this.handleDragLeave.bind(this));
     }
     handleDragEnter(event) {
         this.createZone();
         event.preventDefault();
     }
-    handleDragLeave(event) {
+    handleOnDrop(event) {
+        event.preventDefault();
+        this.uploadService.openDialog(event.dataTransfer?.files);
         this.removeZone();
-        this.fileService.choose();
+    }
+    handleDragOver(event) {
         event.preventDefault();
     }
+    handleDragLeave(event) {
+        event.preventDefault();
+        this.removeZone();
+    }
     createZone() {
         this.overlayElement = document.createElement('div');
         this.overlayElement.classList.add('ax-uploader-overlay-state');
@@ -132,51 +168,34 @@ class AXUploaderZoneDirective {
     removeZone() {
         this.overlayElement.remove();
     }
+    get __hostClass() {
+        return `ax-drop-zone`;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXUploaderZoneDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.6", type: AXUploaderZoneDirective, selector: "[axUploaderZone]", ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.6", type: AXUploaderZoneDirective, selector: "[axUploaderZone]", inputs: { multiple: "multiple" }, host: { properties: { "class": "this.__hostClass" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXUploaderZoneDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[axUploaderZone]',
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
-
-class AXUploaderService {
-    constructor() {
-        this.dialog = inject(Dialog);
-    }
-    openDialog() {
-        const positionStrategy = new GlobalPositionStrategy();
-        this.dialogRef = this.dialog.open(AXUploaderListComponent, {
-            hasBackdrop: false,
-            closeOnNavigation: false,
-            width: '320px',
-            maxWidth: 320,
-            panelClass: ['ax-uploader-list-pane', 'ax-animate-animated', 'ax-animate-fadeIn', 'ax-animate-faster'],
-            positionStrategy: positionStrategy.bottom().end('24px'),
-        });
-    }
-    closeDialog() {
-        this.dialogRef.close();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXUploaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXUploaderService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXUploaderService, decorators: [{
-            type: Injectable
-        }] });
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { multiple: [{
+                type: Input
+            }], __hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
 
 class AXUploaderModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXUploaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.6", ngImport: i0, type: AXUploaderModule, declarations: [AXUploaderDropZoneComponent,
             AXUploaderListComponent,
             AXUploaderOverlayComponent,
-            AXUploaderZoneDirective], imports: [CommonModule, AXDecoratorModule, AXButtonModule, AXTranslationModule], exports: [AXUploaderDropZoneComponent,
+            AXUploaderZoneDirective], imports: [CommonModule, AXDecoratorModule, AXButtonModule, AXTranslationModule, HttpClientModule], exports: [AXUploaderDropZoneComponent,
             AXUploaderListComponent,
             AXUploaderOverlayComponent,
             AXUploaderZoneDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXUploaderModule, providers: [AXUploaderService, AXFileService], imports: [CommonModule, AXDecoratorModule, AXButtonModule, AXTranslationModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXUploaderModule, providers: [AXUploaderService, AXFileService], imports: [CommonModule, AXDecoratorModule, AXButtonModule, AXTranslationModule, HttpClientModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXUploaderModule, decorators: [{
             type: NgModule,
@@ -187,7 +206,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImpor
                         AXUploaderOverlayComponent,
                         AXUploaderZoneDirective,
                     ],
-                    imports: [CommonModule, AXDecoratorModule, AXButtonModule, AXTranslationModule],
+                    imports: [CommonModule, AXDecoratorModule, AXButtonModule, AXTranslationModule, HttpClientModule],
                     exports: [
                         AXUploaderDropZoneComponent,
                         AXUploaderListComponent,

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

@@ -1 +1 @@
-{"version":3,"file":"acorex-components-uploader.mjs","sources":["../../../../libs/components/uploader/src/lib/uploader-drop-zone.component.ts","../../../../libs/components/uploader/src/lib/uploader-drop-zone.component.html","../../../../libs/components/uploader/src/lib/uploader-list.component.ts","../../../../libs/components/uploader/src/lib/uploader-list.component.html","../../../../libs/components/uploader/src/lib/uploader-overlay.component.ts","../../../../libs/components/uploader/src/lib/uploader-overlay.component.html","../../../../libs/components/uploader/src/lib/uploader-zone.directive.ts","../../../../libs/components/uploader/src/lib/uploader.service.ts","../../../../libs/components/uploader/src/lib/uploader.module.ts","../../../../libs/components/uploader/src/acorex-components-uploader.ts"],"sourcesContent":["import { MXBaseComponent } from '@acorex/components/common';\nimport { Component, ViewEncapsulation } from '@angular/core';\n\n@Component({\n  selector: 'ax-uploader-drop-zone',\n  templateUrl: './uploader-drop-zone.component.html',\n  styleUrls: ['./uploader.component.scss'],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class AXUploaderDropZoneComponent extends MXBaseComponent {}\n","<div class=\"ax-uploader-drop-zone-container\">\n  <ax-icon class=\"ax-icon ax-icon-upload\"></ax-icon>\n  <div class=\"ax-uploader-drop-zone-description\">\n    <span>Drag & Drop or <a href=\"#\">Choose file</a> to upload</span>\n    <p>SVG, PNG, JPG or GIF (MAX. 800x400px)</p>\n  </div>\n</div>\n","import { AXComponentCloseEvent, MXBaseComponent } from '@acorex/components/common';\nimport { AUTO_STYLE, animate, state, style, transition, trigger } from '@angular/animations';\nimport { DialogRef } from '@angular/cdk/dialog';\nimport { Component, ViewEncapsulation } from '@angular/core';\n\nexport interface AXUploaderItem {\n  type: 'picture' | 'doc' | 'pdf' | 'archive' | 'video' | 'unknow';\n  name: string;\n  size: number;\n  description?: string;\n}\n\n@Component({\n  selector: 'ax-uploader-list',\n  templateUrl: './uploader-list.component.html',\n  styleUrls: ['./uploader-list.component.scss'],\n  encapsulation: ViewEncapsulation.None,\n  animations: [\n    trigger('collapse', [\n      state('false', style({ height: AUTO_STYLE, visibility: AUTO_STYLE })),\n      state('true', style({ height: '0', visibility: 'hidden' })),\n      transition('false => true', animate(150 + 'ms ease-in')),\n      transition('true => false', animate(150 + 'ms ease-out')),\n    ]),\n  ],\n})\nexport class AXUploaderListComponent extends MXBaseComponent {\n  items: AXUploaderItem[] = [\n    {\n      name: 'avatar.png',\n      size: 2048,\n      type: 'picture',\n      description: 'Upload canceled',\n    },\n    {\n      name: 'intro.mkv',\n      size: 10024,\n      type: 'video',\n    },\n    {\n      name: 'time.xls',\n      size: 10024,\n      type: 'doc',\n    },\n    {\n      name: 'resume.pdf',\n      size: 10024,\n      type: 'pdf',\n    },\n  ];\n\n  leftTime = 5;\n  isCollapsed = false;\n  constructor(private dialogRef: DialogRef<AXComponentCloseEvent>) {\n    super();\n  }\n\n  toggle() {\n    this.isCollapsed = !this.isCollapsed;\n  }\n  close() {\n    this.dialogRef.close();\n  }\n}\n","<div class=\"ax-uploader-list-header\">\n  <div>Uploader list</div>\n  <div>\n    <i\n      class=\"ax-icon\"\n      [ngClass]=\"{ 'ax-icon-chevron-down': !isCollapsed, 'ax-icon-chevron-up': isCollapsed }\"\n      (click)=\"toggle()\"\n    ></i>\n\n    <i class=\"ax-icon ax-icon-close\" (click)=\"close()\"></i>\n  </div>\n</div>\n\n<div [@collapse]=\"isCollapsed\">\n  <div class=\"ax-uploader-progress-status\">\n    <div>{{ leftTime }}min left</div>\n    <button>{{ 'common.cancel' | trans }}</button>\n  </div>\n  <ul class=\"ax-uploader-list-items\">\n    <ng-container *ngFor=\"let item of items\">\n      <li>\n        <div>\n          <i class=\"ax-icon ax-icon-inbox\"></i>\n          <div class=\"ax-uploader-item-text\">\n            <strong>{{ item.name }}</strong>\n            <small>{{ item.description }}</small>\n          </div>\n        </div>\n        <div></div>\n      </li>\n    </ng-container>\n  </ul>\n</div>\n","import { MXBaseComponent } from '@acorex/components/common';\nimport { Component, ViewEncapsulation } from '@angular/core';\n\n@Component({\n  selector: 'ax-uploader-overlay',\n  templateUrl: './uploader-overlay.component.html',\n  styleUrls: ['./uploader.component.scss'],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class AXUploaderOverlayComponent extends MXBaseComponent {}\n","<div\n    class=\"ax-flex ax-flex-col ax-gap-4 ax-items-center ax-justify-center ax-h-[95vh] hover:ax-bg-primary-50 ax-m-2 hover:ax-border-2 ax-rounded-lg hover:ax-border-primary-500\">\n\n</div>","import { AXFileService } from '@acorex/core/file';\nimport { AXTranslator } from '@acorex/core/translation';\nimport { Directive, ElementRef, OnDestroy, OnInit, inject } from '@angular/core';\n\n@Directive({\n  selector: '[axUploaderZone]',\n})\nexport class AXUploaderZoneDirective implements OnInit, OnDestroy {\n  private fileService: AXFileService = inject(AXFileService);\n  private element: HTMLElement;\n\n  stateClass = 'ax-uploader-overlay-state';\n  overlayElement: HTMLDivElement;\n\n  constructor(private elementRef: ElementRef) {}\n\n  ngOnInit(): void {\n    this.element = this.elementRef.nativeElement as HTMLElement;\n    this.element.style.position = 'relative';\n    this.init();\n  }\n\n  init(): void {\n    this.element.addEventListener('dragenter', this.handleDragEnter.bind(this));\n    this.element.addEventListener('dragleave', this.handleDragLeave.bind(this));\n  }\n\n  ngOnDestroy(): void {\n    this.element.removeEventListener('dragenter', this.handleDragEnter.bind(this));\n    this.element.removeEventListener('dragover', this.handleDragEnter.bind(this));\n  }\n\n  private handleDragEnter(event: MouseEvent) {\n    this.createZone();\n    event.preventDefault();\n  }\n  private handleDragLeave(event: MouseEvent) {\n    this.removeZone();\n    this.fileService.choose();\n    event.preventDefault();\n  }\n\n  private createZone() {\n    this.overlayElement = document.createElement('div');\n    this.overlayElement.classList.add('ax-uploader-overlay-state');\n\n    const icon: HTMLSpanElement = document.createElement('span');\n    icon.classList.add('ax-icon', 'ax-icon-upload');\n\n    const text = document.createElement('span');\n    text.innerText = AXTranslator.get('uploader.zone.text');\n    this.overlayElement.appendChild(icon);\n    this.overlayElement.appendChild(text);\n\n    this.element.appendChild(this.overlayElement);\n  }\n  private removeZone() {\n    this.overlayElement.remove();\n  }\n}\n","import { Dialog, DialogRef } from '@angular/cdk/dialog';\nimport { GlobalPositionStrategy } from '@angular/cdk/overlay';\nimport { Injectable, inject } from '@angular/core';\nimport { AXUploaderListComponent } from './uploader-list.component';\n\n@Injectable()\nexport class AXUploaderService {\n  private dialog: Dialog = inject(Dialog);\n  dialogRef: DialogRef;\n\n  openDialog() {\n    const positionStrategy = new GlobalPositionStrategy();\n    this.dialogRef = this.dialog.open(AXUploaderListComponent, {\n      hasBackdrop: false,\n      closeOnNavigation: false,\n      width: '320px',\n      maxWidth: 320,\n      panelClass: ['ax-uploader-list-pane', 'ax-animate-animated', 'ax-animate-fadeIn', 'ax-animate-faster'],\n      positionStrategy: positionStrategy.bottom().end('24px'),\n    }) as DialogRef;\n  }\n\n  closeDialog() {\n    this.dialogRef.close();\n  }\n}\n","import { AXButtonModule } from '@acorex/components/button';\nimport { AXDecoratorModule } from '@acorex/components/decorators';\nimport { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\n\nimport { AXFileService } from '@acorex/core/file';\nimport { AXTranslationModule } from '@acorex/core/translation';\nimport { AXUploaderDropZoneComponent } from './uploader-drop-zone.component';\nimport { AXUploaderListComponent } from './uploader-list.component';\nimport { AXUploaderOverlayComponent } from './uploader-overlay.component';\nimport { AXUploaderZoneDirective } from './uploader-zone.directive';\nimport { AXUploaderService } from './uploader.service';\n\n@NgModule({\n  declarations: [\n    AXUploaderDropZoneComponent,\n    AXUploaderListComponent,\n    AXUploaderOverlayComponent,\n    AXUploaderZoneDirective,\n  ],\n  imports: [CommonModule, AXDecoratorModule, AXButtonModule, AXTranslationModule],\n  exports: [\n    AXUploaderDropZoneComponent,\n    AXUploaderListComponent,\n    AXUploaderOverlayComponent,\n    AXUploaderZoneDirective,\n  ],\n  providers: [AXUploaderService, AXFileService],\n})\nexport class AXUploaderModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i1"],"mappings":"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"}
+{"version":3,"file":"acorex-components-uploader.mjs","sources":["../../../../libs/components/uploader/src/lib/uploader-drop-zone.component.ts","../../../../libs/components/uploader/src/lib/uploader-drop-zone.component.html","../../../../libs/components/uploader/src/lib/uploader.service.ts","../../../../libs/components/uploader/src/lib/uploader-list.component.ts","../../../../libs/components/uploader/src/lib/uploader-list.component.html","../../../../libs/components/uploader/src/lib/uploader-overlay.component.ts","../../../../libs/components/uploader/src/lib/uploader-overlay.component.html","../../../../libs/components/uploader/src/lib/uploader-zone.directive.ts","../../../../libs/components/uploader/src/lib/uploader.module.ts","../../../../libs/components/uploader/src/acorex-components-uploader.ts"],"sourcesContent":["import { MXBaseComponent } from '@acorex/components/common';\nimport { Component, ViewEncapsulation } from '@angular/core';\n\n@Component({\n  selector: 'ax-uploader-drop-zone',\n  templateUrl: './uploader-drop-zone.component.html',\n  styleUrls: ['./uploader.component.scss'],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class AXUploaderDropZoneComponent extends MXBaseComponent {}\n","<div class=\"ax-uploader-drop-zone-container\">\n  <ax-icon class=\"ax-icon ax-icon-upload\"></ax-icon>\n  <div class=\"ax-uploader-drop-zone-description\">\n    <span>Drag & Drop or <a href=\"#\">Choose file</a> to upload</span>\n    <p>SVG, PNG, JPG or GIF (MAX. 800x400px)</p>\n  </div>\n</div>\n","import { Dialog, DialogRef } from '@angular/cdk/dialog';\nimport { GlobalPositionStrategy } from '@angular/cdk/overlay';\nimport { HttpClient } from '@angular/common/http';\nimport { Injectable, inject } from '@angular/core';\nimport { AXUploaderListComponent } from './uploader-list.component';\n\n@Injectable()\nexport class AXUploaderService {\n  private dialog: Dialog = inject(Dialog);\n  private http: HttpClient = inject(HttpClient);\n  dialogRef: DialogRef;\n  files: any[] = [];\n  openDialog(data: any) {\n    this.files = [...data];\n    const positionStrategy = new GlobalPositionStrategy();\n    this.dialogRef = this.dialog.open(AXUploaderListComponent, {\n      hasBackdrop: false,\n      closeOnNavigation: false,\n      width: '320px',\n      maxWidth: 320,\n      panelClass: ['ax-uploader-list-pane', 'ax-animate-animated', 'ax-animate-fadeIn', 'ax-animate-faster'],\n      positionStrategy: positionStrategy.bottom().end('24px'),\n      data,\n    }) as DialogRef;\n  }\n\n  closeDialog() {\n    this.dialogRef.close();\n  }\n\n  upload(requestUrl: string, file: File, options?: any) {\n    const formData = new FormData();\n    formData.append(file.name, file);\n    return this.http.post(requestUrl, formData, options);\n  }\n}\n","import { AXComponentCloseEvent, MXBaseComponent } from '@acorex/components/common';\nimport { AUTO_STYLE, animate, state, style, transition, trigger } from '@angular/animations';\nimport { DIALOG_DATA, DialogRef } from '@angular/cdk/dialog';\nimport { Component, ViewEncapsulation, afterNextRender, inject } from '@angular/core';\nimport { AXUploaderService } from './uploader.service';\n\nexport interface AXUploaderItem {\n  type: 'picture' | 'doc' | 'pdf' | 'archive' | 'video' | 'unknow';\n  name: string;\n  size: number;\n  description?: string;\n}\n\n@Component({\n  selector: 'ax-uploader-list',\n  templateUrl: './uploader-list.component.html',\n  styleUrls: ['./uploader-list.component.scss'],\n  encapsulation: ViewEncapsulation.None,\n  animations: [\n    trigger('collapse', [\n      state('false', style({ height: AUTO_STYLE, visibility: AUTO_STYLE })),\n      state('true', style({ height: '0', visibility: 'hidden' })),\n      transition('false => true', animate(150 + 'ms ease-in')),\n      transition('true => false', animate(150 + 'ms ease-out')),\n    ]),\n  ],\n})\nexport class AXUploaderListComponent extends MXBaseComponent {\n  items: any[] = inject(DIALOG_DATA);\n  private uploadService: AXUploaderService = inject(AXUploaderService);\n\n  leftTime = 5;\n  isCollapsed = false;\n  constructor(private dialogRef: DialogRef<AXComponentCloseEvent>) {\n    super();\n    afterNextRender(() => {\n      this.uploadService.upload('http://api.acorexui.com/api/v1/files', this.items[0]).subscribe({\n        next: (e: any) => {\n          console.log(e);\n        },\n        error: (err: any) => {\n          console.error(err);\n        },\n      });\n    });\n  }\n\n  toggle() {\n    this.isCollapsed = !this.isCollapsed;\n  }\n  close() {\n    this.dialogRef.close();\n  }\n}\n","<div class=\"ax-uploader-list-header\">\n  <div>Uploader list</div>\n  <div>\n    <i\n      class=\"ax-icon\"\n      [ngClass]=\"{ 'ax-icon-chevron-down': !isCollapsed, 'ax-icon-chevron-up': isCollapsed }\"\n      (click)=\"toggle()\"\n    ></i>\n\n    <i class=\"ax-icon ax-icon-close\" (click)=\"close()\"></i>\n  </div>\n</div>\n\n<div [@collapse]=\"isCollapsed\">\n  <div class=\"ax-uploader-progress-status\">\n    <div>{{ leftTime }}min left</div>\n    <button>{{ 'common.cancel' | trans }}</button>\n  </div>\n  <ul class=\"ax-uploader-list-items\">\n    <ng-container *ngFor=\"let item of items\">\n      <li>\n        <div>\n          <i class=\"ax-icon ax-icon-inbox\"></i>\n          <div class=\"ax-uploader-item-text\">\n            <strong>{{ item.name }}</strong>\n            <small>{{ item.size }}</small>\n          </div>\n        </div>\n        <div></div>\n      </li>\n    </ng-container>\n  </ul>\n</div>\n","import { MXBaseComponent } from '@acorex/components/common';\nimport { Component, ViewEncapsulation } from '@angular/core';\n\n@Component({\n  selector: 'ax-uploader-overlay',\n  templateUrl: './uploader-overlay.component.html',\n  styleUrls: ['./uploader.component.scss'],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class AXUploaderOverlayComponent extends MXBaseComponent {}\n","<div\n    class=\"ax-flex ax-flex-col ax-gap-4 ax-items-center ax-justify-center ax-h-[95vh] hover:ax-bg-primary-50 ax-m-2 hover:ax-border-2 ax-rounded-lg hover:ax-border-primary-500\">\n\n</div>","import { AXFileService } from '@acorex/core/file';\nimport { AXTranslator } from '@acorex/core/translation';\nimport { Directive, ElementRef, HostBinding, Input, OnDestroy, inject } from '@angular/core';\nimport { AXUploaderService } from './uploader.service';\n@Directive({\n  selector: '[axUploaderZone]',\n})\nexport class AXUploaderZoneDirective implements OnDestroy {\n  private fileService: AXFileService = inject(AXFileService);\n  private uploadService: AXUploaderService = inject(AXUploaderService);\n  private element: HTMLElement;\n\n  @Input() multiple = true;\n\n  stateClass = 'ax-uploader-overlay-state';\n  overlayElement: HTMLDivElement;\n  files: File[] = [];\n  initElement() {\n    this.element = this.elementRef.nativeElement as HTMLElement;\n    this.element.style.position = 'relative';\n  }\n\n  constructor(private elementRef: ElementRef) {\n    this.initElement();\n    this.element.addEventListener('dragenter', this.handleDragEnter.bind(this));\n    this.element.addEventListener('dragover', this.handleDragOver.bind(this));\n    this.element.addEventListener('drop', this.handleOnDrop.bind(this));\n    this.element.addEventListener('dragleave', this.handleDragLeave.bind(this));\n  }\n\n  ngOnDestroy(): void {\n    this.element.removeEventListener('dragenter', this.handleDragEnter.bind(this));\n    this.element.removeEventListener('drop', this.handleOnDrop.bind(this));\n    this.element.removeEventListener('dragover', this.handleDragOver.bind(this));\n    this.element.removeEventListener('dragleave', this.handleDragLeave.bind(this));\n  }\n  private handleDragEnter(event: Event) {\n    this.createZone();\n    event.preventDefault();\n  }\n  private handleOnDrop(event: DragEvent) {\n    event.preventDefault();\n    this.uploadService.openDialog(event.dataTransfer?.files);\n    this.removeZone();\n  }\n\n  private handleDragOver(event: Event) {\n    event.preventDefault();\n  }\n\n  private handleDragLeave(event: Event) {\n    event.preventDefault();\n    this.removeZone();\n  }\n\n  private createZone() {\n    this.overlayElement = document.createElement('div');\n    this.overlayElement.classList.add('ax-uploader-overlay-state');\n\n    const icon: HTMLSpanElement = document.createElement('span');\n    icon.classList.add('ax-icon', 'ax-icon-upload');\n\n    const text = document.createElement('span');\n    text.innerText = AXTranslator.get('uploader.zone.text');\n\n    this.overlayElement.appendChild(icon);\n    this.overlayElement.appendChild(text);\n\n    this.element.appendChild(this.overlayElement);\n  }\n  private removeZone() {\n    this.overlayElement.remove();\n  }\n  @HostBinding('class')\n  get __hostClass(): string {\n    return `ax-drop-zone`;\n  }\n}\n","import { AXButtonModule } from '@acorex/components/button';\nimport { AXDecoratorModule } from '@acorex/components/decorators';\nimport { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\n\nimport { AXFileService } from '@acorex/core/file';\nimport { AXTranslationModule } from '@acorex/core/translation';\nimport { HttpClientModule } from '@angular/common/http';\nimport { AXUploaderDropZoneComponent } from './uploader-drop-zone.component';\nimport { AXUploaderListComponent } from './uploader-list.component';\nimport { AXUploaderOverlayComponent } from './uploader-overlay.component';\nimport { AXUploaderZoneDirective } from './uploader-zone.directive';\nimport { AXUploaderService } from './uploader.service';\n\n@NgModule({\n  declarations: [\n    AXUploaderDropZoneComponent,\n    AXUploaderListComponent,\n    AXUploaderOverlayComponent,\n    AXUploaderZoneDirective,\n  ],\n  imports: [CommonModule, AXDecoratorModule, AXButtonModule, AXTranslationModule, HttpClientModule],\n  exports: [\n    AXUploaderDropZoneComponent,\n    AXUploaderListComponent,\n    AXUploaderOverlayComponent,\n    AXUploaderZoneDirective,\n  ],\n  providers: [AXUploaderService, AXFileService],\n})\nexport class AXUploaderModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i1"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@acorex/components",
-  "version": "7.8.14",
+  "version": "7.8.16",
   "sideEffects": false,
   "peerDependencies": {
     "@angular/common": ">=16.2.0",
@@ -118,18 +118,18 @@
       "esm": "./esm2022/data-table/acorex-components-data-table.mjs",
       "default": "./fesm2022/acorex-components-data-table.mjs"
     },
-    "./datetime-box": {
-      "types": "./datetime-box/index.d.ts",
-      "esm2022": "./esm2022/datetime-box/acorex-components-datetime-box.mjs",
-      "esm": "./esm2022/datetime-box/acorex-components-datetime-box.mjs",
-      "default": "./fesm2022/acorex-components-datetime-box.mjs"
-    },
     "./datetime-input": {
       "types": "./datetime-input/index.d.ts",
       "esm2022": "./esm2022/datetime-input/acorex-components-datetime-input.mjs",
       "esm": "./esm2022/datetime-input/acorex-components-datetime-input.mjs",
       "default": "./fesm2022/acorex-components-datetime-input.mjs"
     },
+    "./datetime-box": {
+      "types": "./datetime-box/index.d.ts",
+      "esm2022": "./esm2022/datetime-box/acorex-components-datetime-box.mjs",
+      "esm": "./esm2022/datetime-box/acorex-components-datetime-box.mjs",
+      "default": "./fesm2022/acorex-components-datetime-box.mjs"
+    },
     "./datetime-picker": {
       "types": "./datetime-picker/index.d.ts",
       "esm2022": "./esm2022/datetime-picker/acorex-components-datetime-picker.mjs",

package/uploader/lib/uploader-list.component.d.ts

@@ -9,7 +9,8 @@ export interface AXUploaderItem {
 }
 export declare class AXUploaderListComponent extends MXBaseComponent {
     private dialogRef;
-    items: AXUploaderItem[];
+    items: any[];
+    private uploadService;
     leftTime: number;
     isCollapsed: boolean;
     constructor(dialogRef: DialogRef<AXComponentCloseEvent>);

package/uploader/lib/uploader-zone.directive.d.ts

@@ -1,19 +1,24 @@
-import { ElementRef, OnDestroy, OnInit } from '@angular/core';
+import { ElementRef, OnDestroy } from '@angular/core';
 import * as i0 from "@angular/core";
-export declare class AXUploaderZoneDirective implements OnInit, OnDestroy {
+export declare class AXUploaderZoneDirective implements OnDestroy {
     private elementRef;
     private fileService;
+    private uploadService;
     private element;
+    multiple: boolean;
     stateClass: string;
     overlayElement: HTMLDivElement;
+    files: File[];
+    initElement(): void;
     constructor(elementRef: ElementRef);
-    ngOnInit(): void;
-    init(): void;
     ngOnDestroy(): void;
     private handleDragEnter;
+    private handleOnDrop;
+    private handleDragOver;
     private handleDragLeave;
     private createZone;
     private removeZone;
+    get __hostClass(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<AXUploaderZoneDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<AXUploaderZoneDirective, "[axUploaderZone]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<AXUploaderZoneDirective, "[axUploaderZone]", never, { "multiple": { "alias": "multiple"; "required": false; }; }, {}, never, never, false, never>;
 }