@acorex/components 7.1.0 → 7.1.2

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

@@ -19,266 +19,266 @@ import { FormsModule } from '@angular/forms';
 import { AXButtonModule } from '@acorex/components/button';
 import { AXTextBoxModule } from '@acorex/components/textbox';
 
-const AXBaseDatePickerMixin = _InteractiveComponenetMixin(_DropdownComponenetMixin(_ValueComponenetMixin(AXCalendarBaseComponent)));
-class AXDatePickerComponent extends AXBaseDatePickerMixin {
-    _platform;
-    popover = null;
-    _calendar;
-    _target;
-    displayText;
-    _calendarValue;
-    _cursorPos = 0;
-    _isMobile = false;
-    _popoverTitle;
-    _popoverWidth;
-    formatChange = new EventEmitter();
-    _format = 'YYYY-MM-dd';
-    get format() {
-        return this._format;
-    }
-    set format(v) {
-        this._setOption({
-            name: 'format',
-            value: v,
-        });
-    }
-    placeholder;
-    interface = 'calendar';
-    constructor(_elementRef, _cdr, _platform) {
-        super(_elementRef, _cdr);
-        this._platform = _platform;
-        this._target = this._getHostElement();
-        this._isMobile = this._platform.is('Mobile') || this._platform.is('SM');
-        this._platform.resize.subscribe(() => {
-            this._isMobile = this._platform.is('Mobile') || this._platform.is('SM');
-            this.popover.dispose();
-        });
-    }
-    onInit() {
-        this._popoverTitle = this.placeholder || AXTranslator.get('datepicker.popover.title');
-    }
-    _updateDisplayText() {
-        this.displayText = this.value ? AXDateTime.convert(this.value, this.type).format(this._format) : '';
-    }
-    _handlePopoverOpened(e) {
-        setTimeout(() => {
-            this._calendar?.navTo(this.value || new AXDateTime(new Date(), this.type));
-        }, 10);
-    }
-    _handleArrowClickEvent() {
-        this.toggle();
-    }
-    _onValueChanged(oldValue, newValue) {
-        this._updateDisplayText();
-        this.close();
-    }
-    _onOptionChanged(option) {
-        super._onOptionChanged(option);
-        if (option.name == 'type') {
-            this._updateDisplayText();
-        }
-    }
-    _handleOnKeydownEvent(e) {
-        const ignore = () => {
-            e.preventDefault();
-            e.stopPropagation();
-        };
-        const nums = Array(10)
-            .fill(0)
-            .map((v, i) => i.toString());
-        const chars = ['Backspace', 'ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft', 'Tab', 'Enter'];
-        const input = e.target;
-        const key = e.key;
-        const valStr = input.value;
-        const sStart = input.selectionStart || 0;
-        const sEnd = input.selectionEnd || 0;
-        const dateVal = new AXDateTime(this.value);
-        //
-        const re = /[a-zA-Z0-9]+/gi;
-        const parts = Array.from(this.format.matchAll(re));
-        const word = valStr.substring(sStart, sEnd);
-        const part = parts.find((c) => c.index >= sStart);
-        //
-        //
-        if ([...nums].includes(key)) {
-            if (part) {
-                switch (part[0]) {
-                    case 'dd':
-                    case 'DD':
-                        const newVal = Math.max(1, Math.min(31, Number(word + e.key)));
-                        this.value = dateVal.set('day', newVal).date;
-                        break;
-                    case 'mm':
-                        break;
-                    case 'yy':
-                    case 'YYYY':
-                        break;
-                }
-                setTimeout(() => {
-                    this._highlightPart(input, sStart);
-                }, 10);
-                ignore();
-            }
-        }
-        else if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
-            const next = Array.from(valStr.substr(sEnd).matchAll(re));
-            const prev = Array.from(valStr.substring(0, sStart).matchAll(re));
-            ignore();
-            this._highlightPart(input, e.key === 'ArrowRight' ? sEnd + (next[0]?.index || 0) : prev[prev.length - 1]?.index);
-        }
-        else if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
-            if (e.ctrlKey && e.key === 'ArrowDown') {
-                this.open();
-            }
-            else {
-                const sign = e.key === 'ArrowUp' ? +1 : -1;
-                if (part) {
-                    switch (part[0]) {
-                        case 'dd':
-                        case 'DD':
-                            this.value = dateVal.add('day', sign).date;
-                            break;
-                        case 'mm':
-                        case 'MMM':
-                        case 'MMMM':
-                            this.value = dateVal.add('month', sign).date;
-                            break;
-                        case 'yy':
-                        case 'YYYY':
-                            this.value = dateVal.add('year', sign).date;
-                            break;
-                    }
-                    setTimeout(() => {
-                        this._highlightPart(input, sStart);
-                    }, 10);
-                }
-            }
-            ignore();
-        }
-        else if (e.key == 'Backspace') {
-            if (this.allowNull) {
-                this.value = null;
-            }
-            ignore();
-        }
-        // else if (nums.includes(key)) {
-        // }
-        // super._emitOnKeydownEvent(e);
-    }
-    _handleOnInputClickEvent(e) {
-        const input = e.target;
-        this._highlightPart(input);
-        e.preventDefault();
-        e.stopPropagation();
-    }
-    _handleOnNavigate(e) {
-        this.onNavigate.emit(e);
-    }
-    _highlightPart(input, pos) {
-        const { start, end } = AXStringUtil.getWordBoundsAtPosition(input.value, pos != null ? pos : input.selectionStart || 0);
-        input.setSelectionRange(start, end);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXDatePickerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.AXPlatform }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: AXDatePickerComponent, selector: "ax-date-picker", inputs: { rtl: "rtl", isOpen: "isOpen", fitParent: "fitParent", dropdownWidth: "dropdownWidth", position: "position", disabled: "disabled", tabIndex: "tabIndex", readonly: "readonly", allowNull: "allowNull", value: "value", name: "name", checked: "checked", placeholder: "placeholder", maxLength: "maxLength", type: "type", autoComplete: "autoComplete", depth: "depth", activeView: "activeView", min: "min", max: "max", disabledDates: "disabledDates", holidayDates: "holidayDates", format: "format", interface: "interface" }, outputs: { onOpened: "onOpened", onClosed: "onClosed", onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged", depthChange: "depthChange", typeChange: "typeChange", disabledDatesChange: "disabledDatesChange", holidayDatesChange: "holidayDatesChange", onNavigate: "onNavigate", formatChange: "formatChange" }, host: { classAttribute: "ax-editor-container ax-drop-down" }, providers: [{ provide: AXClosbaleComponent, useExisting: AXDatePickerComponent }], viewQueries: [{ propertyName: "popover", first: true, predicate: AXPopoverComponent, descendants: true, static: true }, { propertyName: "_calendar", first: true, predicate: AXCalendarComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\"> </ng-content>\r\n<div class=\"ax-dropdown-content ax-cursor-pointer\" (click)=\"toggle()\">\r\n  <input\r\n    class=\"ax-input\"\r\n    type=\"text\"\r\n    [attr.placeholder]=\"placeholder\"\r\n    [class.ax-state-disabled]=\"disabled\"\r\n    [class.ax-state-readonly]=\"readonly\"\r\n    [disabled]=\"disabled\"\r\n    [readonly]=\"true\"\r\n    [attr.tabindex]=\"_isMobile ? -1 : tabIndex\"\r\n    [ngModel]=\"displayText\"\r\n    (focus)=\"_emitOnFocusEvent($event)\"\r\n    (mouseup)=\"_handleOnInputClickEvent($event)\"\r\n    (blur)=\"_emitOnBlurEvent($event)\"\r\n    (keydown)=\"_handleOnKeydownEvent($event)\" />\r\n</div>\r\n<button\r\n  [disabled]=\"disabled\"\r\n  [tabIndex]=\"-1\"\r\n  class=\"ax-editor-control\"\r\n  (click)=\"_handleArrowClickEvent()\">\r\n  <span class=\"ax-icon ax-icon-calendar\"></span>\r\n</button>\r\n<ng-content select=\"ax-suffix\"> </ng-content>\r\n<ng-content select=\"ax-validation-rule\"> </ng-content>\r\n<ax-popover\r\n  [target]=\"_target\"\r\n  [position]=\"position\"\r\n  [openTrigger]=\"'manual'\"\r\n  [closeTrigger]=\"'clickout'\"\r\n  [adaptivityEnabled]=\"true\"\r\n  (onOpened)=\"_handlePopoverOpened($event)\">\r\n  <div class=\"ax-overlay-pane\" [class.ax-w-full]=\"_isMobile\">\r\n    <ax-header *ngIf=\"_isMobile\">\r\n      <ax-title>\r\n        {{ placeholder || 'Choose a date' }}\r\n      </ax-title>\r\n      <ax-close-button></ax-close-button>\r\n    </ax-header>\r\n    <ng-container\r\n      *ngIf=\"\r\n        interface === 'calendar';\r\n        then calendarTemplate;\r\n        else pickerTemplate\r\n      \"></ng-container>\r\n    <ng-template #calendarTemplate>\r\n      <ax-calendar\r\n        #calendar\r\n        [disabled]=\"disabled\"\r\n        [readonly]=\"readonly\"\r\n        [(value)]=\"value\"\r\n        [min]=\"min\"\r\n        [max]=\"max\"\r\n        [rtl]=\"rtl\"\r\n        [disabledDates]=\"disabledDates\"\r\n        [holidayDates]=\"holidayDates\"\r\n        [depth]=\"depth\"\r\n        (onNavigate)=\"_handleOnNavigate($event)\"\r\n        [type]=\"type\">\r\n      </ax-calendar>\r\n    </ng-template>\r\n    <ng-template #pickerTemplate> </ng-template>\r\n  </div>\r\n</ax-popover>\r\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.AXCalendarComponent, selector: "ax-calendar", inputs: ["rtl", "readonly", "value", "name", "disabled", "depth", "activeView", "min", "max", "disabledDates", "holidayDates", "type", "cellTemplate", "cellClass", "showNavigation"], outputs: ["onOptionChanged", "valueChange", "onValueChanged", "onBlur", "onFocus", "depthChange", "typeChange", "activeViewChange", "disabledDatesChange", "holidayDatesChange", "onNavigate", "onSlotClick"] }, { kind: "component", type: i4.AXPopoverComponent, selector: "ax-popover", inputs: ["target", "position", "openTrigger", "closeTrigger", "hasBackdrop", "backdropClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: i5.AXDecoratorHeaderComponent, selector: "ax-header" }, { kind: "component", type: i5.AXDecoratorTitleComponent, selector: "ax-title" }, { kind: "component", type: i5.AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["icon"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXDatePickerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ax-date-picker', inputs: [
-                        'rtl',
-                        'isOpen',
-                        'fitParent',
-                        'dropdownWidth',
-                        'position',
-                        'disabled',
-                        'tabIndex',
-                        'readonly',
-                        'allowNull',
-                        'value',
-                        'name',
-                        'checked',
-                        'placeholder',
-                        'maxLength',
-                        'allowNull',
-                        'type',
-                        'autoComplete',
-                        'readonly',
-                        'allowNull',
-                        'value',
-                        'name',
-                        'checked',
-                        'depth',
-                        'activeView',
-                        'min',
-                        'max',
-                        'disabledDates',
-                        'type',
-                        'holidayDates',
-                    ], outputs: [
-                        'onOpened',
-                        'onClosed',
-                        'onBlur',
-                        'onFocus',
-                        'valueChange',
-                        'onValueChanged',
-                        'valueChange',
-                        'onValueChanged',
-                        'depthChange',
-                        'typeChange',
-                        'disabledDatesChange',
-                        'holidayDatesChange',
-                        'onNavigate',
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [{ provide: AXClosbaleComponent, useExisting: AXDatePickerComponent }], host: { class: 'ax-editor-container ax-drop-down' }, template: "<ng-content select=\"ax-prefix\"> </ng-content>\r\n<div class=\"ax-dropdown-content ax-cursor-pointer\" (click)=\"toggle()\">\r\n  <input\r\n    class=\"ax-input\"\r\n    type=\"text\"\r\n    [attr.placeholder]=\"placeholder\"\r\n    [class.ax-state-disabled]=\"disabled\"\r\n    [class.ax-state-readonly]=\"readonly\"\r\n    [disabled]=\"disabled\"\r\n    [readonly]=\"true\"\r\n    [attr.tabindex]=\"_isMobile ? -1 : tabIndex\"\r\n    [ngModel]=\"displayText\"\r\n    (focus)=\"_emitOnFocusEvent($event)\"\r\n    (mouseup)=\"_handleOnInputClickEvent($event)\"\r\n    (blur)=\"_emitOnBlurEvent($event)\"\r\n    (keydown)=\"_handleOnKeydownEvent($event)\" />\r\n</div>\r\n<button\r\n  [disabled]=\"disabled\"\r\n  [tabIndex]=\"-1\"\r\n  class=\"ax-editor-control\"\r\n  (click)=\"_handleArrowClickEvent()\">\r\n  <span class=\"ax-icon ax-icon-calendar\"></span>\r\n</button>\r\n<ng-content select=\"ax-suffix\"> </ng-content>\r\n<ng-content select=\"ax-validation-rule\"> </ng-content>\r\n<ax-popover\r\n  [target]=\"_target\"\r\n  [position]=\"position\"\r\n  [openTrigger]=\"'manual'\"\r\n  [closeTrigger]=\"'clickout'\"\r\n  [adaptivityEnabled]=\"true\"\r\n  (onOpened)=\"_handlePopoverOpened($event)\">\r\n  <div class=\"ax-overlay-pane\" [class.ax-w-full]=\"_isMobile\">\r\n    <ax-header *ngIf=\"_isMobile\">\r\n      <ax-title>\r\n        {{ placeholder || 'Choose a date' }}\r\n      </ax-title>\r\n      <ax-close-button></ax-close-button>\r\n    </ax-header>\r\n    <ng-container\r\n      *ngIf=\"\r\n        interface === 'calendar';\r\n        then calendarTemplate;\r\n        else pickerTemplate\r\n      \"></ng-container>\r\n    <ng-template #calendarTemplate>\r\n      <ax-calendar\r\n        #calendar\r\n        [disabled]=\"disabled\"\r\n        [readonly]=\"readonly\"\r\n        [(value)]=\"value\"\r\n        [min]=\"min\"\r\n        [max]=\"max\"\r\n        [rtl]=\"rtl\"\r\n        [disabledDates]=\"disabledDates\"\r\n        [holidayDates]=\"holidayDates\"\r\n        [depth]=\"depth\"\r\n        (onNavigate)=\"_handleOnNavigate($event)\"\r\n        [type]=\"type\">\r\n      </ax-calendar>\r\n    </ng-template>\r\n    <ng-template #pickerTemplate> </ng-template>\r\n  </div>\r\n</ax-popover>\r\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.AXPlatform }]; }, propDecorators: { popover: [{
-                type: ViewChild,
-                args: [AXPopoverComponent, { static: true }]
-            }], _calendar: [{
-                type: ViewChild,
-                args: [AXCalendarComponent, { static: true }]
-            }], formatChange: [{
-                type: Output
-            }], format: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], interface: [{
-                type: Input
+const AXBaseDatePickerMixin = _InteractiveComponenetMixin(_DropdownComponenetMixin(_ValueComponenetMixin(AXCalendarBaseComponent)));
+class AXDatePickerComponent extends AXBaseDatePickerMixin {
+    _platform;
+    popover = null;
+    _calendar;
+    _target;
+    displayText;
+    _calendarValue;
+    _cursorPos = 0;
+    _isMobile = false;
+    _popoverTitle;
+    _popoverWidth;
+    formatChange = new EventEmitter();
+    _format = 'YYYY-MM-dd';
+    get format() {
+        return this._format;
+    }
+    set format(v) {
+        this._setOption({
+            name: 'format',
+            value: v,
+        });
+    }
+    placeholder;
+    interface = 'calendar';
+    constructor(_elementRef, _cdr, _platform) {
+        super(_elementRef, _cdr);
+        this._platform = _platform;
+        this._target = this._getHostElement();
+        this._isMobile = this._platform.is('Mobile') || this._platform.is('SM');
+        this._platform.resize.subscribe(() => {
+            this._isMobile = this._platform.is('Mobile') || this._platform.is('SM');
+            this.popover.dispose();
+        });
+    }
+    onInit() {
+        this._popoverTitle = this.placeholder || AXTranslator.get('datepicker.popover.title');
+    }
+    _updateDisplayText() {
+        this.displayText = this.value ? AXDateTime.convert(this.value, this.type).format(this._format) : '';
+    }
+    _handlePopoverOpened(e) {
+        setTimeout(() => {
+            this._calendar?.navTo(this.value || new AXDateTime(new Date(), this.type));
+        }, 10);
+    }
+    _handleArrowClickEvent() {
+        this.toggle();
+    }
+    _onValueChanged(oldValue, newValue) {
+        this._updateDisplayText();
+        this.close();
+    }
+    _onOptionChanged(option) {
+        super._onOptionChanged(option);
+        if (option.name == 'type') {
+            this._updateDisplayText();
+        }
+    }
+    _handleOnKeydownEvent(e) {
+        const ignore = () => {
+            e.preventDefault();
+            e.stopPropagation();
+        };
+        const nums = Array(10)
+            .fill(0)
+            .map((v, i) => i.toString());
+        const chars = ['Backspace', 'ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft', 'Tab', 'Enter'];
+        const input = e.target;
+        const key = e.key;
+        const valStr = input.value;
+        const sStart = input.selectionStart || 0;
+        const sEnd = input.selectionEnd || 0;
+        const dateVal = new AXDateTime(this.value);
+        //
+        const re = /[a-zA-Z0-9]+/gi;
+        const parts = Array.from(this.format.matchAll(re));
+        const word = valStr.substring(sStart, sEnd);
+        const part = parts.find((c) => c.index >= sStart);
+        //
+        //
+        if ([...nums].includes(key)) {
+            if (part) {
+                switch (part[0]) {
+                    case 'dd':
+                    case 'DD':
+                        const newVal = Math.max(1, Math.min(31, Number(word + e.key)));
+                        this.value = dateVal.set('day', newVal).date;
+                        break;
+                    case 'mm':
+                        break;
+                    case 'yy':
+                    case 'YYYY':
+                        break;
+                }
+                setTimeout(() => {
+                    this._highlightPart(input, sStart);
+                }, 10);
+                ignore();
+            }
+        }
+        else if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
+            const next = Array.from(valStr.substr(sEnd).matchAll(re));
+            const prev = Array.from(valStr.substring(0, sStart).matchAll(re));
+            ignore();
+            this._highlightPart(input, e.key === 'ArrowRight' ? sEnd + (next[0]?.index || 0) : prev[prev.length - 1]?.index);
+        }
+        else if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+            if (e.ctrlKey && e.key === 'ArrowDown') {
+                this.open();
+            }
+            else {
+                const sign = e.key === 'ArrowUp' ? +1 : -1;
+                if (part) {
+                    switch (part[0]) {
+                        case 'dd':
+                        case 'DD':
+                            this.value = dateVal.add('day', sign).date;
+                            break;
+                        case 'mm':
+                        case 'MMM':
+                        case 'MMMM':
+                            this.value = dateVal.add('month', sign).date;
+                            break;
+                        case 'yy':
+                        case 'YYYY':
+                            this.value = dateVal.add('year', sign).date;
+                            break;
+                    }
+                    setTimeout(() => {
+                        this._highlightPart(input, sStart);
+                    }, 10);
+                }
+            }
+            ignore();
+        }
+        else if (e.key == 'Backspace') {
+            if (this.allowNull) {
+                this.value = null;
+            }
+            ignore();
+        }
+        // else if (nums.includes(key)) {
+        // }
+        // super._emitOnKeydownEvent(e);
+    }
+    _handleOnInputClickEvent(e) {
+        const input = e.target;
+        this._highlightPart(input);
+        e.preventDefault();
+        e.stopPropagation();
+    }
+    _handleOnNavigate(e) {
+        this.onNavigate.emit(e);
+    }
+    _highlightPart(input, pos) {
+        const { start, end } = AXStringUtil.getWordBoundsAtPosition(input.value, pos != null ? pos : input.selectionStart || 0);
+        input.setSelectionRange(start, end);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXDatePickerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.AXPlatform }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: AXDatePickerComponent, selector: "ax-date-picker", inputs: { rtl: "rtl", isOpen: "isOpen", fitParent: "fitParent", dropdownWidth: "dropdownWidth", position: "position", disabled: "disabled", tabIndex: "tabIndex", readonly: "readonly", allowNull: "allowNull", value: "value", name: "name", checked: "checked", placeholder: "placeholder", maxLength: "maxLength", type: "type", autoComplete: "autoComplete", depth: "depth", activeView: "activeView", min: "min", max: "max", disabledDates: "disabledDates", holidayDates: "holidayDates", format: "format", interface: "interface" }, outputs: { onOpened: "onOpened", onClosed: "onClosed", onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged", depthChange: "depthChange", typeChange: "typeChange", disabledDatesChange: "disabledDatesChange", holidayDatesChange: "holidayDatesChange", onNavigate: "onNavigate", formatChange: "formatChange" }, host: { classAttribute: "ax-editor-container ax-drop-down" }, providers: [{ provide: AXClosbaleComponent, useExisting: AXDatePickerComponent }], viewQueries: [{ propertyName: "popover", first: true, predicate: AXPopoverComponent, descendants: true, static: true }, { propertyName: "_calendar", first: true, predicate: AXCalendarComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\"> </ng-content>\r\n<div class=\"ax-dropdown-content ax-cursor-pointer\" (click)=\"toggle()\">\r\n  <input\r\n    class=\"ax-input\"\r\n    type=\"text\"\r\n    [attr.placeholder]=\"placeholder\"\r\n    [class.ax-state-disabled]=\"disabled\"\r\n    [class.ax-state-readonly]=\"readonly\"\r\n    [disabled]=\"disabled\"\r\n    [readonly]=\"true\"\r\n    [attr.tabindex]=\"_isMobile ? -1 : tabIndex\"\r\n    [ngModel]=\"displayText\"\r\n    (focus)=\"_emitOnFocusEvent($event)\"\r\n    (mouseup)=\"_handleOnInputClickEvent($event)\"\r\n    (blur)=\"_emitOnBlurEvent($event)\"\r\n    (keydown)=\"_handleOnKeydownEvent($event)\" />\r\n</div>\r\n<button\r\n  [disabled]=\"disabled\"\r\n  [tabIndex]=\"-1\"\r\n  class=\"ax-editor-control\"\r\n  (click)=\"_handleArrowClickEvent()\">\r\n  <span class=\"ax-icon ax-icon-calendar\"></span>\r\n</button>\r\n<ng-content select=\"ax-suffix\"> </ng-content>\r\n<ng-content select=\"ax-validation-rule\"> </ng-content>\r\n<ax-popover\r\n  [target]=\"_target\"\r\n  [position]=\"position\"\r\n  [openTrigger]=\"'manual'\"\r\n  [closeTrigger]=\"'clickout'\"\r\n  [adaptivityEnabled]=\"true\"\r\n  (onOpened)=\"_handlePopoverOpened($event)\">\r\n  <div class=\"ax-overlay-pane\" [class.ax-w-full]=\"_isMobile\">\r\n    <ax-header *ngIf=\"_isMobile\">\r\n      <ax-title>\r\n        {{ placeholder || 'Choose a date' }}\r\n      </ax-title>\r\n      <ax-close-button></ax-close-button>\r\n    </ax-header>\r\n    <ng-container\r\n      *ngIf=\"\r\n        interface === 'calendar';\r\n        then calendarTemplate;\r\n        else pickerTemplate\r\n      \"></ng-container>\r\n    <ng-template #calendarTemplate>\r\n      <ax-calendar\r\n        #calendar\r\n        [disabled]=\"disabled\"\r\n        [readonly]=\"readonly\"\r\n        [(value)]=\"value\"\r\n        [min]=\"min\"\r\n        [max]=\"max\"\r\n        [rtl]=\"rtl\"\r\n        [disabledDates]=\"disabledDates\"\r\n        [holidayDates]=\"holidayDates\"\r\n        [depth]=\"depth\"\r\n        (onNavigate)=\"_handleOnNavigate($event)\"\r\n        [type]=\"type\">\r\n      </ax-calendar>\r\n    </ng-template>\r\n    <ng-template #pickerTemplate> </ng-template>\r\n  </div>\r\n</ax-popover>\r\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.AXCalendarComponent, selector: "ax-calendar", inputs: ["rtl", "readonly", "value", "name", "disabled", "depth", "activeView", "min", "max", "disabledDates", "holidayDates", "type", "cellTemplate", "cellClass", "showNavigation"], outputs: ["onOptionChanged", "valueChange", "onValueChanged", "onBlur", "onFocus", "depthChange", "typeChange", "activeViewChange", "disabledDatesChange", "holidayDatesChange", "onNavigate", "onSlotClick"] }, { kind: "component", type: i4.AXPopoverComponent, selector: "ax-popover", inputs: ["target", "position", "openTrigger", "closeTrigger", "hasBackdrop", "backdropClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: i5.AXDecoratorHeaderComponent, selector: "ax-header" }, { kind: "component", type: i5.AXDecoratorTitleComponent, selector: "ax-title" }, { kind: "component", type: i5.AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["icon"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXDatePickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-date-picker', inputs: [
+                        'rtl',
+                        'isOpen',
+                        'fitParent',
+                        'dropdownWidth',
+                        'position',
+                        'disabled',
+                        'tabIndex',
+                        'readonly',
+                        'allowNull',
+                        'value',
+                        'name',
+                        'checked',
+                        'placeholder',
+                        'maxLength',
+                        'allowNull',
+                        'type',
+                        'autoComplete',
+                        'readonly',
+                        'allowNull',
+                        'value',
+                        'name',
+                        'checked',
+                        'depth',
+                        'activeView',
+                        'min',
+                        'max',
+                        'disabledDates',
+                        'type',
+                        'holidayDates',
+                    ], outputs: [
+                        'onOpened',
+                        'onClosed',
+                        'onBlur',
+                        'onFocus',
+                        'valueChange',
+                        'onValueChanged',
+                        'valueChange',
+                        'onValueChanged',
+                        'depthChange',
+                        'typeChange',
+                        'disabledDatesChange',
+                        'holidayDatesChange',
+                        'onNavigate',
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [{ provide: AXClosbaleComponent, useExisting: AXDatePickerComponent }], host: { class: 'ax-editor-container ax-drop-down' }, template: "<ng-content select=\"ax-prefix\"> </ng-content>\r\n<div class=\"ax-dropdown-content ax-cursor-pointer\" (click)=\"toggle()\">\r\n  <input\r\n    class=\"ax-input\"\r\n    type=\"text\"\r\n    [attr.placeholder]=\"placeholder\"\r\n    [class.ax-state-disabled]=\"disabled\"\r\n    [class.ax-state-readonly]=\"readonly\"\r\n    [disabled]=\"disabled\"\r\n    [readonly]=\"true\"\r\n    [attr.tabindex]=\"_isMobile ? -1 : tabIndex\"\r\n    [ngModel]=\"displayText\"\r\n    (focus)=\"_emitOnFocusEvent($event)\"\r\n    (mouseup)=\"_handleOnInputClickEvent($event)\"\r\n    (blur)=\"_emitOnBlurEvent($event)\"\r\n    (keydown)=\"_handleOnKeydownEvent($event)\" />\r\n</div>\r\n<button\r\n  [disabled]=\"disabled\"\r\n  [tabIndex]=\"-1\"\r\n  class=\"ax-editor-control\"\r\n  (click)=\"_handleArrowClickEvent()\">\r\n  <span class=\"ax-icon ax-icon-calendar\"></span>\r\n</button>\r\n<ng-content select=\"ax-suffix\"> </ng-content>\r\n<ng-content select=\"ax-validation-rule\"> </ng-content>\r\n<ax-popover\r\n  [target]=\"_target\"\r\n  [position]=\"position\"\r\n  [openTrigger]=\"'manual'\"\r\n  [closeTrigger]=\"'clickout'\"\r\n  [adaptivityEnabled]=\"true\"\r\n  (onOpened)=\"_handlePopoverOpened($event)\">\r\n  <div class=\"ax-overlay-pane\" [class.ax-w-full]=\"_isMobile\">\r\n    <ax-header *ngIf=\"_isMobile\">\r\n      <ax-title>\r\n        {{ placeholder || 'Choose a date' }}\r\n      </ax-title>\r\n      <ax-close-button></ax-close-button>\r\n    </ax-header>\r\n    <ng-container\r\n      *ngIf=\"\r\n        interface === 'calendar';\r\n        then calendarTemplate;\r\n        else pickerTemplate\r\n      \"></ng-container>\r\n    <ng-template #calendarTemplate>\r\n      <ax-calendar\r\n        #calendar\r\n        [disabled]=\"disabled\"\r\n        [readonly]=\"readonly\"\r\n        [(value)]=\"value\"\r\n        [min]=\"min\"\r\n        [max]=\"max\"\r\n        [rtl]=\"rtl\"\r\n        [disabledDates]=\"disabledDates\"\r\n        [holidayDates]=\"holidayDates\"\r\n        [depth]=\"depth\"\r\n        (onNavigate)=\"_handleOnNavigate($event)\"\r\n        [type]=\"type\">\r\n      </ax-calendar>\r\n    </ng-template>\r\n    <ng-template #pickerTemplate> </ng-template>\r\n  </div>\r\n</ax-popover>\r\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.AXPlatform }]; }, propDecorators: { popover: [{
+                type: ViewChild,
+                args: [AXPopoverComponent, { static: true }]
+            }], _calendar: [{
+                type: ViewChild,
+                args: [AXCalendarComponent, { static: true }]
+            }], formatChange: [{
+                type: Output
+            }], format: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], interface: [{
+                type: Input
             }] } });
 
-const COMPONENT = [AXDatePickerComponent];
-const MODULES = [
-    CommonModule,
-    AXCalendarModule,
-    AXTextBoxModule,
-    AXButtonModule,
-    AXPopoverModule,
-    AXDecoratorModule,
-    AXDateTimeModule,
-    FormsModule
-];
-class AXDatepickerModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.0", ngImport: i0, type: AXDatepickerModule, declarations: [AXDatePickerComponent], imports: [CommonModule,
-            AXCalendarModule,
-            AXTextBoxModule,
-            AXButtonModule,
-            AXPopoverModule,
-            AXDecoratorModule,
-            AXDateTimeModule,
-            FormsModule], exports: [AXDatePickerComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXDatepickerModule, imports: [MODULES] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXDatepickerModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [...COMPONENT],
-                    imports: [...MODULES],
-                    exports: [...COMPONENT],
-                    providers: [],
-                }]
+const COMPONENT = [AXDatePickerComponent];
+const MODULES = [
+    CommonModule,
+    AXCalendarModule,
+    AXTextBoxModule,
+    AXButtonModule,
+    AXPopoverModule,
+    AXDecoratorModule,
+    AXDateTimeModule,
+    FormsModule
+];
+class AXDatepickerModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.0", ngImport: i0, type: AXDatepickerModule, declarations: [AXDatePickerComponent], imports: [CommonModule,
+            AXCalendarModule,
+            AXTextBoxModule,
+            AXButtonModule,
+            AXPopoverModule,
+            AXDecoratorModule,
+            AXDateTimeModule,
+            FormsModule], exports: [AXDatePickerComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXDatepickerModule, imports: [MODULES] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXDatepickerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [...COMPONENT],
+                    imports: [...MODULES],
+                    exports: [...COMPONENT],
+                    providers: [],
+                }]
         }] });
 
-/**
- * Generated bundle index. Do not edit.
+/**
+ * Generated bundle index. Do not edit.
  */
 
 export { AXBaseDatePickerMixin, AXDatePickerComponent, AXDatepickerModule };