@acorex/components 5.0.21 → 5.0.22

package/fesm2020/acorex-components.mjs

@@ -222,7 +222,7 @@ function _ButtonComponentMixin(Base) {
                 'ax-state-disabled': this["disabled"],
                 'ax-state-selected': this.selected
             };
-            cssClasses[`ax-${this.color || 'primary'}${this.look ? '-' + this.look : ''}`] = true;
+            cssClasses[`ax-${this.color || 'primary'}${this.look ? '-' + this.look : '-default'}`] = true;
             return cssClasses;
         }
     };
@@ -1077,7 +1077,7 @@ class AXAlertComponent extends AXBaseComponentMixin {
         }
     }
     get hostClass() {
-        return `ax-${this.color}`;
+        return `ax-${this.color}-default`;
     }
     /**
     *  set the visibility of the Alert
@@ -1632,7 +1632,7 @@ class AXButtonItemComponent extends AXBaseItemButtonMixin {
             'ax-state-disabled': this.disabled,
             'ax-state-selected': this.selected,
         };
-        cssClasses[`ax-${this.color || 'primary'}`] = true;
+        cssClasses[`ax-${this.color || 'primary'}-default`] = true;
         return Object.entries(cssClasses).filter(c => c[1]).map(c => c[0]).join(' ');
     }
 }
@@ -1692,7 +1692,7 @@ class AXDecoratorPrefixComponent extends AXBaseComponentMixin {
 }
 AXDecoratorPrefixComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXDecoratorPrefixComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 AXDecoratorPrefixComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AXDecoratorPrefixComponent, selector: "ax-prefix", usesInheritance: true, ngImport: i0, template: `
-        <ng-content select="ax-button,ax-loading,ax-icon,ax-badge">
+        <ng-content select="ax-button,ax-loading,ax-icon,ax-content">
         </ng-content>
     `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXDecoratorPrefixComponent, decorators: [{
@@ -1700,7 +1700,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
             args: [{
                     selector: 'ax-prefix',
                     template: `
-        <ng-content select="ax-button,ax-loading,ax-icon,ax-badge">
+        <ng-content select="ax-button,ax-loading,ax-icon,ax-content">
         </ng-content>
     `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -1715,7 +1715,7 @@ class AXDecoratorSuffixComponent extends AXBaseComponentMixin {
 }
 AXDecoratorSuffixComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXDecoratorSuffixComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 AXDecoratorSuffixComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AXDecoratorSuffixComponent, selector: "ax-suffix", usesInheritance: true, ngImport: i0, template: `
-        <ng-content select="ax-button,ax-icon,ax-badge">
+        <ng-content select="ax-button,ax-icon,ax-badge,ax-content">
         </ng-content>
     `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXDecoratorSuffixComponent, decorators: [{
@@ -1723,7 +1723,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
             args: [{
                     selector: 'ax-suffix',
                     template: `
-        <ng-content select="ax-button,ax-icon,ax-badge">
+        <ng-content select="ax-button,ax-icon,ax-badge,ax-content">
         </ng-content>
     `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -2038,6 +2038,8 @@ class AXCalendarComponent extends AXCalendarComponentMixin {
                         // 'ax-state-event': d.dayOfMonth == 12,
                     };
                 }
+                // just for tailwind
+                //'ax-col-start-1','ax-col-start-2','ax-col-start-3','ax-col-start-4','ax-col-start-5','ax-col-start-6','ax-col-start-7'
                 r.cssClass[`ax-col-start-${vr.startTime.dayOfWeek}`] = i == 0;
                 return r;
             });
@@ -3152,42 +3154,66 @@ class AXDatePickerComponent extends AXBaseDatePickerMixin {
         const sStart = input.selectionStart;
         const sEnd = input.selectionEnd;
         const dateVal = new AXDateTime(this.value);
-        // //
-        if (![...nums, ...chars].includes(key)) {
-            ignore();
-        }
-        if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
-            const re = /[a-zA-Z0-9]+/ig;
-            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') {
-            const re = /[a-zA-Z0-9]+/ig;
-            const sign = e.key === 'ArrowUp' ? +1 : -1;
-            const parts = Array.from(this.format.matchAll(re));
-            const word = valStr.substring(sStart, sEnd);
-            const part = parts[Array.from(valStr.matchAll(re)).findIndex(c => c[0] == word)];
+        //
+        const re = /[a-zA-Z0-9]+/ig;
+        const parts = Array.from(this.format.matchAll(re));
+        const word = valStr.substring(sStart, sEnd);
+        const part = parts[Array.from(valStr.matchAll(re)).findIndex(c => c[0] == word)];
+        //
+        //
+        if ([...nums].includes(key)) {
             if (part) {
                 switch (part[0]) {
                     case 'dd':
                     case 'DD':
-                        this.value = dateVal.add('day', sign).date;
+                        debugger;
+                        const newVal = Math.max(1, Math.min(31, Number(word + e.key)));
+                        this.value = dateVal.set('day', newVal).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, sEnd - 1);
+                    this._highlightPart(input, sStart);
                 }, Math.max(10, this.debounceTime));
+                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);
+                    }, Math.max(10, this.debounceTime));
+                }
             }
             ignore();
         }
@@ -3436,10 +3462,10 @@ class AXDialogComponent extends AXBaseComponentMixin {
     }
 }
 AXDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXDialogComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AXDialogComponent, selector: "ax-dialog", usesInheritance: true, ngImport: i0, template: "<div class=\"ax-popup-wrapper\" aria-modal=\"true\" cdkTrapFocus>\r\n    <div class=\"ax-dialog ax-{{options.type}}\" tabindex=\"0\" cdkDrag role=\"alert\" cdkDragHandle>\r\n        <div class=\"ax-dialog-icon-side\">\r\n            <i class=\"ax-dialog-icon {{_icon}}\"></i>\r\n        </div>\r\n        <div class=\"ax-dialog-content-side\">\r\n            <div class=\"ax-dialog-title\">{{options.title}}</div>\r\n            <div class=\"ax-dialog-content\">{{options.content}}</div>\r\n        </div>\r\n        <div class=\"ax-dialog-dismiss-icon\">\r\n            <i class=\"ax-ic ax-ic-close\" *ngIf=\"options.dismissible\" (click)=\"close()\"></i>\r\n        </div>\r\n        <footer class=\"ax-dialog-footer\">\r\n            <ng-container *ngFor=\"let button of options.buttons\">\r\n                <ax-button [text]=\"button.text\"  [submitBehavior]=\"button.submitBehavior\" [cancelBehavior]=\"button.cancelBehavior\" (onClick)=\"_handleButtonClick(button)\" [class]=\"button.cssClass\" [look]=\"button.look\" [color]=\"button.color\"></ax-button>\r\n                <div class=\"ax-ml-2\"></div>\r\n            </ng-container>\r\n        </footer>\r\n    </div>\r\n\r\n</div>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "text", "submitBehavior", "cancelBehavior", "color", "look", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }], directives: [{ type: i2$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i3$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragDisabled", "cdkDragStartDelay", "cdkDragLockAxis", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragBoundary", "cdkDragRootElement", "cdkDragPreviewContainer", "cdkDragData", "cdkDragFreeDragPosition"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i3$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AXDialogComponent, selector: "ax-dialog", usesInheritance: true, ngImport: i0, template: "<div class=\"ax-popup-wrapper\" aria-modal=\"true\" cdkTrapFocus>\r\n    <div class=\"ax-dialog ax-{{options.type}}-default\" tabindex=\"0\" cdkDrag role=\"alert\" cdkDragHandle>\r\n        <div class=\"ax-dialog-icon-side\">\r\n            <i class=\"ax-dialog-icon {{_icon}}\"></i>\r\n        </div>\r\n        <div class=\"ax-dialog-content-side\">\r\n            <div class=\"ax-dialog-title\">{{options.title}}</div>\r\n            <div class=\"ax-dialog-content\">{{options.content}}</div>\r\n        </div>\r\n        <div class=\"ax-dialog-dismiss-icon\">\r\n            <i class=\"ax-ic ax-ic-close\" *ngIf=\"options.dismissible\" (click)=\"close()\"></i>\r\n        </div>\r\n        <footer class=\"ax-dialog-footer\">\r\n            <ng-container *ngFor=\"let button of options.buttons\">\r\n                <ax-button [text]=\"button.text\"  [submitBehavior]=\"button.submitBehavior\" [cancelBehavior]=\"button.cancelBehavior\" (onClick)=\"_handleButtonClick(button)\" [class]=\"button.cssClass\" [look]=\"button.look\" [color]=\"button.color\"></ax-button>\r\n                <div class=\"ax-ml-2\"></div>\r\n            </ng-container>\r\n        </footer>\r\n    </div>\r\n\r\n</div>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "text", "submitBehavior", "cancelBehavior", "color", "look", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }], directives: [{ type: i2$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i3$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragDisabled", "cdkDragStartDelay", "cdkDragLockAxis", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragBoundary", "cdkDragRootElement", "cdkDragPreviewContainer", "cdkDragData", "cdkDragFreeDragPosition"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i3$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-dialog', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"ax-popup-wrapper\" aria-modal=\"true\" cdkTrapFocus>\r\n    <div class=\"ax-dialog ax-{{options.type}}\" tabindex=\"0\" cdkDrag role=\"alert\" cdkDragHandle>\r\n        <div class=\"ax-dialog-icon-side\">\r\n            <i class=\"ax-dialog-icon {{_icon}}\"></i>\r\n        </div>\r\n        <div class=\"ax-dialog-content-side\">\r\n            <div class=\"ax-dialog-title\">{{options.title}}</div>\r\n            <div class=\"ax-dialog-content\">{{options.content}}</div>\r\n        </div>\r\n        <div class=\"ax-dialog-dismiss-icon\">\r\n            <i class=\"ax-ic ax-ic-close\" *ngIf=\"options.dismissible\" (click)=\"close()\"></i>\r\n        </div>\r\n        <footer class=\"ax-dialog-footer\">\r\n            <ng-container *ngFor=\"let button of options.buttons\">\r\n                <ax-button [text]=\"button.text\"  [submitBehavior]=\"button.submitBehavior\" [cancelBehavior]=\"button.cancelBehavior\" (onClick)=\"_handleButtonClick(button)\" [class]=\"button.cssClass\" [look]=\"button.look\" [color]=\"button.color\"></ax-button>\r\n                <div class=\"ax-ml-2\"></div>\r\n            </ng-container>\r\n        </footer>\r\n    </div>\r\n\r\n</div>" }]
+            args: [{ selector: 'ax-dialog', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"ax-popup-wrapper\" aria-modal=\"true\" cdkTrapFocus>\r\n    <div class=\"ax-dialog ax-{{options.type}}-default\" tabindex=\"0\" cdkDrag role=\"alert\" cdkDragHandle>\r\n        <div class=\"ax-dialog-icon-side\">\r\n            <i class=\"ax-dialog-icon {{_icon}}\"></i>\r\n        </div>\r\n        <div class=\"ax-dialog-content-side\">\r\n            <div class=\"ax-dialog-title\">{{options.title}}</div>\r\n            <div class=\"ax-dialog-content\">{{options.content}}</div>\r\n        </div>\r\n        <div class=\"ax-dialog-dismiss-icon\">\r\n            <i class=\"ax-ic ax-ic-close\" *ngIf=\"options.dismissible\" (click)=\"close()\"></i>\r\n        </div>\r\n        <footer class=\"ax-dialog-footer\">\r\n            <ng-container *ngFor=\"let button of options.buttons\">\r\n                <ax-button [text]=\"button.text\"  [submitBehavior]=\"button.submitBehavior\" [cancelBehavior]=\"button.cancelBehavior\" (onClick)=\"_handleButtonClick(button)\" [class]=\"button.cssClass\" [look]=\"button.look\" [color]=\"button.color\"></ax-button>\r\n                <div class=\"ax-ml-2\"></div>\r\n            </ng-container>\r\n        </footer>\r\n    </div>\r\n\r\n</div>" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
 
 /**