@colijnit/corecomponents_v12 12.0.60 → 12.0.62

package/bundles/colijnit-corecomponents_v12.umd.js

@@ -3480,33 +3480,70 @@
                 },] }
     ];
 
+    function showHideDialogAnimation(name) {
+        return window.innerWidth > 700 ?
+            animations.trigger(name, [
+                animations.state('*', animations.style({ opacity: 1 })),
+                animations.state('void', animations.style({ opacity: 0 })),
+                animations.transition('void => *', animations.animate('200ms 200ms')),
+                animations.transition('* => void', animations.animate(200))
+            ]) :
+            animations.trigger(name, [
+                animations.state('*', animations.style({ bottom: 0 })),
+                animations.state('void', animations.style({ bottom: '-100%' })),
+                animations.transition('void => *', animations.animate('200ms 200ms')),
+                animations.transition('* => void', animations.animate(200))
+            ]);
+    }
     var CoDialogComponent = /** @class */ (function () {
         function CoDialogComponent() {
             this.icons = exports.CoreComponentsIcon;
             this.showCloseIcon = true;
             this.modal = false;
             this.borderless = false;
-            this.animation = true;
             this.closeClick = new core.EventEmitter();
             this.overlayClick = new core.EventEmitter();
+            this.isTouch = false;
+            this.mobile = false;
+            this.show = false;
         }
         CoDialogComponent.prototype.showClass = function () {
             return true;
         };
+        CoDialogComponent.prototype.handleKeyDown = function (event) {
+            switch (event.code) {
+                case 'Escape':
+                    this.handleCloseDialog();
+            }
+        };
+        CoDialogComponent.prototype.ngOnInit = function () {
+            this._checkDevice();
+            this.show = true;
+        };
         CoDialogComponent.prototype.handleCloseDialog = function (event) {
-            this.closeClick.emit(event);
+            var _this = this;
+            this.show = false;
+            setTimeout(function () {
+                _this.closeClick.emit(event);
+            }, 400);
         };
         CoDialogComponent.prototype.handleOverlayClick = function (event) {
             if (!this.modal) {
                 this.overlayClick.emit(event);
             }
         };
+        CoDialogComponent.prototype._checkDevice = function () {
+            this.isTouch = ('ontouchstart' in window) ||
+                (navigator.maxTouchPoints > 0) ||
+                (navigator.msMaxTouchPoints > 0);
+            this.mobile = window.innerWidth < 700;
+        };
         return CoDialogComponent;
     }());
     CoDialogComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'co-dialog',
-                    template: "\n    <div class=\"co-dialog-overlay\" (click)=\"handleOverlayClick($event)\" [@showHideOverlay]=\"animation\"></div>\n    <div class=\"co-dialog-wrapper\" [@showHideDialog]=\"animation\">\n      <div class=\"dialog-header\" *ngIf=\"!borderless\">\n        <div class=\"dialog-header-caption\">\n            <ng-content select=\"[header]\"></ng-content>\n        </div>\n        <div class=\"dialog-close-button\" *ngIf=\"showCloseIcon\" (click)=\"handleCloseDialog($event)\">\n          <co-icon [icon]=\"icons.Cancel\"></co-icon>\n        </div>\n      </div>\n      <div class=\"dialog-content\">\n        <ng-content></ng-content>\n      </div>\n      <div class=\"dialog-footer\">\n        <ng-content select=\"[footer]\"></ng-content>\n      </div>\n    </div>\n  ",
+                    template: "\n    <div class=\"co-dialog-overlay\" *ngIf=\"show\" (click)=\"handleOverlayClick($event)\" @showHideOverlay></div>\n    <div class=\"co-dialog-wrapper\" *ngIf=\"show\" @showHideDialog>\n      <div class=\"dialog-header\" *ngIf=\"!borderless\">\n        <div class=\"dialog-header-caption\" *ngIf=\"headerTemplate\">\n          <ng-container [ngTemplateOutlet]=\"headerTemplate\"></ng-container>\n        </div>\n        <div class=\"dialog-close-button\" *ngIf=\"showCloseIcon\" (click)=\"handleCloseDialog($event)\">\n          <co-icon [icon]=\"icons.Cancel\"></co-icon>\n        </div>\n      </div>\n      <div class=\"dialog-content\">\n        <ng-content></ng-content>\n      </div>\n      <div class=\"dialog-footer\" *ngIf=\"footerTemplate\">\n        <ng-container [ngTemplateOutlet]=\"footerTemplate\"></ng-container>\n      </div>\n    </div>\n  ",
                     animations: [
                         animations.trigger('showHideOverlay', [
                             animations.state('*', animations.style({ opacity: 1 })),
@@ -3514,24 +3551,23 @@
                             animations.transition('void => *', animations.animate(200)),
                             animations.transition('* => void', animations.animate('200ms 200ms'))
                         ]),
-                        animations.trigger('showHideDialog', [
-                            animations.state('*', animations.style({ opacity: 1 })),
-                            animations.state('void', animations.style({ opacity: 0 })),
-                            animations.transition('void => *', animations.animate('200ms 200ms')),
-                            animations.transition('* => void', animations.animate(200))
-                        ])
+                        showHideDialogAnimation('showHideDialog')
                     ],
                     encapsulation: core.ViewEncapsulation.None
                 },] }
     ];
     CoDialogComponent.propDecorators = {
+        headerTemplate: [{ type: core.Input }],
+        footerTemplate: [{ type: core.Input }],
         showCloseIcon: [{ type: core.Input }],
         modal: [{ type: core.Input }],
         borderless: [{ type: core.HostBinding, args: ['class.borderless',] }, { type: core.Input }],
-        animation: [{ type: core.Input }],
         closeClick: [{ type: core.Output }],
         overlayClick: [{ type: core.Output }],
-        showClass: [{ type: core.HostBinding, args: ["class.co-dialog",] }]
+        showClass: [{ type: core.HostBinding, args: ['class.co-dialog',] }],
+        handleKeyDown: [{ type: core.HostListener, args: ['window:keydown', ['$event'],] }],
+        isTouch: [{ type: core.HostBinding, args: ['class.is-touch',] }],
+        mobile: [{ type: core.HostBinding, args: ['class.is-mobile',] }]
     };
 
     var CoDialogModule = /** @class */ (function () {
@@ -4920,21 +4956,23 @@
                             _a = event.code;
                             switch (_a) {
                                 case 'Enter': return [3 /*break*/, 1];
-                                case 'Tab': return [3 /*break*/, 3];
-                                case 'Escape': return [3 /*break*/, 5];
+                                case 'Tab': return [3 /*break*/, 4];
+                                case 'Escape': return [3 /*break*/, 6];
                             }
-                            return [3 /*break*/, 6];
+                            return [3 /*break*/, 7];
                         case 1:
+                            if (!!event.shiftKey) return [3 /*break*/, 3];
                             event.preventDefault();
                             return [4 /*yield*/, this.commitClick()];
                         case 2:
                             _b.sent();
                             return [2 /*return*/, false];
-                        case 3:
+                        case 3: return [2 /*return*/, true];
+                        case 4:
                             nextSiblingToFocus = event.shiftKey ? event.currentTarget.previousSibling : event.currentTarget.nextSibling;
                             event.preventDefault();
                             return [4 /*yield*/, this.commitClick()];
-                        case 4:
+                        case 5:
                             success = _b.sent();
                             if (success) {
                                 if (nextSiblingToFocus) {
@@ -4946,11 +4984,11 @@
                                 }
                             }
                             return [2 /*return*/, false];
-                        case 5:
+                        case 6:
                             this.cancelClick();
                             event.preventDefault();
                             return [2 /*return*/, false];
-                        case 6: return [2 /*return*/];
+                        case 7: return [2 /*return*/];
                     }
                 });
             });
@@ -4968,6 +5006,9 @@
         };
         BaseInputComponent.prototype._setFocusOnNextPossibleInput = function (element, previous) {
             var elementColl = element.getElementsByTagName('input');
+            if (!elementColl || elementColl.length < 1) {
+                elementColl = element.getElementsByTagName('textarea');
+            }
             if (elementColl && elementColl.length > 0) {
                 var inputElement = elementColl[0];
                 if (inputElement.disabled || inputElement.readOnly) {
@@ -6194,7 +6235,7 @@
     InputCheckboxComponent.decorators = [
         { type: core.Component, args: [{
                     selector: "co-input-checkbox",
-                    template: "\n    <ejs-checkbox [label]=\"label\"\n                  [name]=\"name\"\n                  [cssClass]=\"cssClass\"\n                  [ngModel]=\"model\"\n                  [disabled]=\"disabled\"\n                  (ngModelChange)=\"handleModelChange($event)\"\n    ></ejs-checkbox>\n  ",
+                    template: "\n    <ejs-checkbox [label]=\"label\"\n                  [name]=\"name\"\n                  [cssClass]=\"cssClass\"\n                  [ngModel]=\"model\"\n                  [disabled]=\"disabled\"\n                  [style.pointer-events]=\"(readonly == true) ? 'none' : 'auto'\"\n                  (click)=\"!readonly\"\n                  (ngModelChange)=\"handleModelChange($event)\"\n    ></ejs-checkbox>\n  ",
                     providers: [{
                             provide: COMPONENT_INTERFACE_NAME,
                             useExisting: core.forwardRef(function () { return InputCheckboxComponent; })
@@ -6729,7 +6770,6 @@
             _this.collection = [];
             _this.customHeight = true;
             _this.selectionSettings = { mode: 'Multiple' };
-            _super.prototype._markAsOnPush.call(_this);
             return _this;
         }
         Object.defineProperty(InputListboxComponent.prototype, "singleSelect", {
@@ -6767,7 +6807,7 @@
     InputListboxComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'co-input-listbox',
-                    template: "\n    <div class=\"co-input-listbox-header\" [textContent]=\"placeholder\"></div>\n    <div class=\"co-input-listbox-content\">\n      <ejs-listbox\n        [ngModel]=\"value\"\n        [dataSource]=\"collection\"\n        [fields]=\"fields\"\n        [selectionSettings]=\"selectionSettings\"\n        (ngModelChange)=\"modelChange.emit($event)\"\n      ></ejs-listbox>\n    </div>\n    <div class=\"required-indicator\"></div>\n    <ng-template #validationError></ng-template>\n  ",
+                    template: "\n    <div class=\"co-input-listbox-header\" [textContent]=\"placeholder\"></div>\n    <div class=\"co-input-listbox-content\">\n      <ejs-listbox\n        [ngModel]=\"value\"\n        [dataSource]=\"collection\"\n        [fields]=\"fields\"\n        [disabled]=\"readonly\"\n        [selectionSettings]=\"selectionSettings\"\n        (ngModelChange)=\"modelChange.emit($event)\"\n      ></ejs-listbox>\n    </div>\n    <div class=\"required-indicator\"></div>\n    <ng-template #validationError></ng-template>\n  ",
                     providers: [{
                             provide: COMPONENT_INTERFACE_NAME, useExisting: core.forwardRef(function () { return InputListboxComponent; })
                         }, {
@@ -7767,7 +7807,7 @@
     InputTextareaComponent.decorators = [
         { type: core.Component, args: [{
                     selector: "co-input-textarea",
-                    template: "\n    <label [textContent]=\"placeholder\"></label>\n    <textarea\n      #input\n      type=\"textarea\"\n      [ngModel]=\"model\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      (ngModelChange)=\"modelChange.emit($event)\"\n    ></textarea>\n    <div class=\"required-indicator\"></div>\n    <ng-template #validationError></ng-template>\n  ",
+                    template: "\n    <label [textContent]=\"placeholder\"></label>\n    <textarea\n      #input\n      type=\"textarea\"\n      [ngModel]=\"model\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      (ngModelChange)=\"modelChange.emit($event)\"\n    ></textarea>\n    <co-commit-buttons *ngIf=\"showSaveCancel && focused && canSaveOrCancel\"\n                       [committing]=\"committing\"\n                       [commitFinished]=\"commitFinished\"\n                       (commitClick)=\"commitClick($event)\"\n                       (cancelClick)=\"cancelClick($event)\"\n    >\n    </co-commit-buttons>\n    <div class=\"required-indicator\"></div>\n    <ng-template #validationError></ng-template>\n  ",
                     providers: [{
                             provide: COMPONENT_INTERFACE_NAME,
                             useExisting: core.forwardRef(function () { return InputTextareaComponent; })
@@ -7803,7 +7843,8 @@
                     imports: [
                         common.CommonModule,
                         forms.FormsModule,
-                        ValidationErrorModule
+                        ValidationErrorModule,
+                        CommitButtonsModule
                     ],
                     declarations: [
                         InputTextareaComponent
@@ -11267,6 +11308,7 @@
     exports.TextInputPopupComponent = TextInputPopupComponent;
     exports.TileComponent = TileComponent;
     exports.TileModule = TileModule;
+    exports.showHideDialogAnimation = showHideDialogAnimation;
     exports["ɵa"] = RippleModule;
     exports["ɵb"] = MD_RIPPLE_GLOBAL_OPTIONS;
     exports["ɵba"] = PaginationService;