@colijnit/corecomponents_v12 12.0.57 → 12.0.59

package/bundles/colijnit-corecomponents_v12.umd.js

@@ -6034,6 +6034,135 @@
                 },] }
     ];
 
+    // Direction type for regular straight directions.
+    exports.CoDirection = void 0;
+    (function (CoDirection) {
+        CoDirection["Right"] = "right";
+        CoDirection["Left"] = "left";
+        CoDirection["Up"] = "top";
+        CoDirection["Down"] = "bottom";
+    })(exports.CoDirection || (exports.CoDirection = {}));
+
+    // Represents a bi-directional orientation.
+    exports.CoOrientation = void 0;
+    (function (CoOrientation) {
+        CoOrientation["Horizontal"] = "horizontal";
+        CoOrientation["Vertical"] = "vertical";
+    })(exports.CoOrientation || (exports.CoOrientation = {}));
+    var _orientationsOfDirections = new Map([
+        [exports.CoDirection.Right, exports.CoOrientation.Vertical],
+        [exports.CoDirection.Left, exports.CoOrientation.Vertical],
+        [exports.CoDirection.Up, exports.CoOrientation.Horizontal],
+        [exports.CoDirection.Down, exports.CoOrientation.Horizontal]
+    ]);
+    function OrientationOfDirection(direction) {
+        return _orientationsOfDirections.get(direction);
+    }
+
+    // @dynamic
+    var DirectionEnumUtils = /** @class */ (function () {
+        function DirectionEnumUtils() {
+        }
+        DirectionEnumUtils.OppositeOf = function (direction) {
+            return this._OppositeDirections.get(direction);
+        };
+        return DirectionEnumUtils;
+    }());
+    DirectionEnumUtils._OppositeDirections = new Map([
+        [exports.CoDirection.Right, exports.CoDirection.Left],
+        [exports.CoDirection.Left, exports.CoDirection.Right],
+        [exports.CoDirection.Up, exports.CoDirection.Down],
+        [exports.CoDirection.Down, exports.CoDirection.Up]
+    ]);
+
+    var IconCollapseHandleComponent = /** @class */ (function () {
+        function IconCollapseHandleComponent() {
+            this.orientation = exports.CoOrientation.Horizontal;
+            this.twoArrows = false;
+            this.iconColorClass = "action-color";
+            this.Icons = exports.CoreComponentsIcon;
+            this._arrowDirection = exports.CoDirection.Up;
+            this._oppositeArrowDirection = exports.CoDirection.Down;
+        }
+        IconCollapseHandleComponent.prototype.showClass = function () {
+            return true;
+        };
+        Object.defineProperty(IconCollapseHandleComponent.prototype, "arrowDirection", {
+            get: function () {
+                return this._arrowDirection;
+            },
+            set: function (arrowDirection) {
+                this._arrowDirection = arrowDirection;
+                this._oppositeArrowDirection = DirectionEnumUtils.OppositeOf(this._arrowDirection);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(IconCollapseHandleComponent.prototype, "isVertical", {
+            get: function () {
+                return this.orientation === exports.CoOrientation.Vertical;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(IconCollapseHandleComponent.prototype, "arrowsOrientatedHorizontally", {
+            get: function () {
+                return OrientationOfDirection(this._arrowDirection) === exports.CoOrientation.Horizontal;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(IconCollapseHandleComponent.prototype, "oppositeArrowDirection", {
+            get: function () {
+                return this._oppositeArrowDirection;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return IconCollapseHandleComponent;
+    }());
+    IconCollapseHandleComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: "co-icon-collapse-handle",
+                    template: "\n    <div class=\"wrap\">\n      <co-icon [icon]=\"Icons.ArrowPointUp\" [class]=\"'first ' + arrowDirection + ' ' + iconColorClass\"></co-icon>\n      <co-icon *ngIf=\"twoArrows\" [icon]=\"Icons.ArrowPointUp\"\n            [class]=\"'second ' + oppositeArrowDirection + ' ' + iconColorClass\"></co-icon>\n    </div>\n    <div class=\"absolute-fill-parent\" md-ripple></div>\n    ",
+                    encapsulation: core.ViewEncapsulation.None
+                },] }
+    ];
+    IconCollapseHandleComponent.ctorParameters = function () { return []; };
+    IconCollapseHandleComponent.propDecorators = {
+        showClass: [{ type: core.HostBinding, args: ["class.co-icon-collapse-handle",] }],
+        orientation: [{ type: core.Input }],
+        arrowDirection: [{ type: core.Input }],
+        twoArrows: [{ type: core.Input }, { type: core.HostBinding, args: ["class.two-arrows",] }],
+        isVertical: [{ type: core.HostBinding, args: ["class.vertical",] }],
+        arrowsOrientatedHorizontally: [{ type: core.HostBinding, args: ["class.arrows-orientated-horizontally",] }],
+        hidden: [{ type: core.HostBinding, args: ["class.hidden",] }]
+    };
+    __decorate([
+        InputBoolean()
+    ], IconCollapseHandleComponent.prototype, "twoArrows", void 0);
+
+    var IconCollapseHandleModule = /** @class */ (function () {
+        function IconCollapseHandleModule() {
+        }
+        return IconCollapseHandleModule;
+    }());
+    IconCollapseHandleModule.decorators = [
+        { type: core.NgModule, args: [{
+                    imports: [
+                        common.CommonModule,
+                        IconModule,
+                        RippleModule
+                    ],
+                    declarations: [
+                        IconCollapseHandleComponent
+                    ],
+                    exports: [
+                        IconCollapseHandleComponent
+                    ]
+                },] }
+    ];
+
     var InputCheckboxComponent = /** @class */ (function (_super) {
         __extends(InputCheckboxComponent, _super);
         function InputCheckboxComponent(formComponent, iconCacheService, changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) {
@@ -6352,7 +6481,7 @@
     InputDatePickerComponent.decorators = [
         { type: core.Component, args: [{
                     selector: "co-input-date",
-                    template: "\n    <ejs-datepicker #ejsDatePicker\n                    floatLabelType=\"Auto\"\n                    [format]=\"dateFormat\"\n                    [placeholder]=\"placeholder\"\n                    [ngModel]=\"model\"\n                    (ngModelChange)=\"modelChange.emit($event)\"\n    ></ejs-datepicker>\n    <div class=\"required-indicator\"></div>\n    <ng-template #validationError></ng-template>\n  ",
+                    template: "\n    <ejs-datepicker #ejsDatePicker\n                    floatLabelType=\"Auto\"\n                    [format]=\"dateFormat\"\n                    [placeholder]=\"placeholder\"\n                    [ngModel]=\"model\"\n                    [readonly]=\"readonly\"\n                    (ngModelChange)=\"modelChange.emit($event)\"\n    ></ejs-datepicker>\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 InputDatePickerComponent; })
                         }, {
@@ -6382,6 +6511,115 @@
         showClass: [{ type: core.HostBinding, args: ["class.co-input-date",] }]
     };
 
+    var CommitButtonsComponent = /** @class */ (function () {
+        function CommitButtonsComponent(_renderer) {
+            var _this = this;
+            this._renderer = _renderer;
+            this.cancelClick = new core.EventEmitter();
+            this.commitClick = new core.EventEmitter();
+            this._committing = false;
+            this._commitFinished = false;
+            this._handleAnimationIteration = function (event) {
+                _this._renderer.removeClass(event.currentTarget, 'animate');
+                event.currentTarget.removeEventListener('animationiteration', _this._handleAnimationIteration);
+                // elem.removeEventListener('webkitAnimationIteration', () => this._handleAnimationIteration(elem));
+            };
+        }
+        Object.defineProperty(CommitButtonsComponent.prototype, "content", {
+            set: function (children) {
+                this.animateDivs = children.toArray();
+                this._checkAnimation();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(CommitButtonsComponent.prototype, "committing", {
+            get: function () {
+                return this._committing;
+            },
+            set: function (value) {
+                this._committing = value;
+                this._checkAnimation();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(CommitButtonsComponent.prototype, "commitFinished", {
+            get: function () {
+                return this._commitFinished;
+            },
+            set: function (value) {
+                this._commitFinished = value;
+                this._checkAnimationFinished();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        CommitButtonsComponent.prototype.showClass = function () {
+            return true;
+        };
+        CommitButtonsComponent.prototype._checkAnimation = function () {
+            var _this = this;
+            if (this.committing && this.animateDivs) {
+                this.animateDivs.forEach(function (a) { return _this._renderer.addClass(a.nativeElement, 'animate'); });
+            }
+        };
+        CommitButtonsComponent.prototype._checkAnimationFinished = function () {
+            var _this = this;
+            if (this.commitFinished && this.animateDivs) {
+                this.animateDivs.forEach(function (a) {
+                    a.nativeElement.addEventListener('animationiteration', _this._handleAnimationIteration);
+                    // a.nativeElement.addEventListener('webkitAnimationIteration', (event) => this._handleAnimationIteration(event));
+                });
+            }
+        };
+        return CommitButtonsComponent;
+    }());
+    CommitButtonsComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: "co-commit-buttons",
+                    template: "\n    <div class=\"commit-buttons-wrapper\" @showHideSaveCancel>\n      <div class=\"commit-buttons-button save\" [class.finished]=\"commitFinished\"\n           (click)=\"commitClick.emit($event)\">\n        <div class=\"save-button-spinner\" *ngIf=\"committing || commitFinished\">\n          <div #animatediv></div>\n          <div #animatediv></div>\n          <div #animatediv></div>\n          <div #animatediv></div>\n        </div>\n        <div class=\"spinner-checkmark\" *ngIf=\"!committing || commitFinished\"></div>\n      </div>\n      <div class=\"commit-buttons-button cancel\" (click)=\"cancelClick.emit($event)\">\n        <div class=\"cancel-button\"></div>\n      </div>\n    </div>\n  ",
+                    animations: [
+                        animations.trigger('showHideSaveCancel', [
+                            animations.state('*', animations.style({ transform: 'scaleY(1)', opacity: 1 })),
+                            animations.state('void', animations.style({ transform: 'scaleY(0)', opacity: 0 })),
+                            animations.transition('void <=> *', animations.animate(200))
+                        ]),
+                    ],
+                    encapsulation: core.ViewEncapsulation.None
+                },] }
+    ];
+    CommitButtonsComponent.ctorParameters = function () { return [
+        { type: core.Renderer2 }
+    ]; };
+    CommitButtonsComponent.propDecorators = {
+        content: [{ type: core.ViewChildren, args: ['animatediv', { read: core.ElementRef },] }],
+        committing: [{ type: core.Input }],
+        commitFinished: [{ type: core.Input }],
+        cancelClick: [{ type: core.Output }],
+        commitClick: [{ type: core.Output }],
+        showClass: [{ type: core.HostBinding, args: ["class.co-commit-buttons",] }]
+    };
+
+    var CommitButtonsModule = /** @class */ (function () {
+        function CommitButtonsModule() {
+        }
+        return CommitButtonsModule;
+    }());
+    CommitButtonsModule.decorators = [
+        { type: core.NgModule, args: [{
+                    imports: [
+                        common.CommonModule
+                    ],
+                    declarations: [
+                        CommitButtonsComponent
+                    ],
+                    exports: [
+                        CommitButtonsComponent
+                    ]
+                },] }
+    ];
+
     var InputDatePickerModule = /** @class */ (function () {
         function InputDatePickerModule() {
         }
@@ -6395,7 +6633,8 @@
                         forms.FormsModule,
                         IconModule,
                         AppendPipeModule,
-                        ej2AngularCalendars.DatePickerModule
+                        ej2AngularCalendars.DatePickerModule,
+                        CommitButtonsModule
                     ],
                     schemas: [
                         core.NO_ERRORS_SCHEMA
@@ -6434,7 +6673,7 @@
     InputDateRangePickerComponent.decorators = [
         { type: core.Component, args: [{
                     selector: "co-input-date-range",
-                    template: "\n    <ejs-daterangepicker\n      [format]=\"dateFormat\"\n      [placeholder]=\"placeholder\"\n      [ngModel]=\"model\"\n      (ngModelChange)=\"rangeChange()\"\n      (close)=\"close.next($event)\"\n      (select)=\"select.next($event)\"\n      (cleared)=\"cleared.next($event)\"\n      [(startDate)]=\"startDate\"\n      [(endDate)]=\"endDate\"\n    ></ejs-daterangepicker>\n    <div class=\"required-indicator\"></div>\n    <ng-template #validationError></ng-template>\n  ",
+                    template: "\n    <ejs-daterangepicker\n      [format]=\"dateFormat\"\n      [placeholder]=\"placeholder\"\n      [ngModel]=\"model\"\n      [(startDate)]=\"startDate\"\n      [(endDate)]=\"endDate\"\n      [readonly]=\"readonly\"\n      (ngModelChange)=\"rangeChange()\"\n      (close)=\"close.next($event)\"\n      (select)=\"select.next($event)\"\n      (cleared)=\"cleared.next($event)\"\n    ></ejs-daterangepicker>\n    <div class=\"required-indicator\"></div>\n    <ng-template #validationError></ng-template>\n  ",
                     encapsulation: core.ViewEncapsulation.None
                 },] }
     ];
@@ -7321,115 +7560,6 @@
                 },] }
     ];
 
-    var CommitButtonsComponent = /** @class */ (function () {
-        function CommitButtonsComponent(_renderer) {
-            var _this = this;
-            this._renderer = _renderer;
-            this.cancelClick = new core.EventEmitter();
-            this.commitClick = new core.EventEmitter();
-            this._committing = false;
-            this._commitFinished = false;
-            this._handleAnimationIteration = function (event) {
-                _this._renderer.removeClass(event.currentTarget, 'animate');
-                event.currentTarget.removeEventListener('animationiteration', _this._handleAnimationIteration);
-                // elem.removeEventListener('webkitAnimationIteration', () => this._handleAnimationIteration(elem));
-            };
-        }
-        Object.defineProperty(CommitButtonsComponent.prototype, "content", {
-            set: function (children) {
-                this.animateDivs = children.toArray();
-                this._checkAnimation();
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(CommitButtonsComponent.prototype, "committing", {
-            get: function () {
-                return this._committing;
-            },
-            set: function (value) {
-                this._committing = value;
-                this._checkAnimation();
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(CommitButtonsComponent.prototype, "commitFinished", {
-            get: function () {
-                return this._commitFinished;
-            },
-            set: function (value) {
-                this._commitFinished = value;
-                this._checkAnimationFinished();
-            },
-            enumerable: false,
-            configurable: true
-        });
-        CommitButtonsComponent.prototype.showClass = function () {
-            return true;
-        };
-        CommitButtonsComponent.prototype._checkAnimation = function () {
-            var _this = this;
-            if (this.committing && this.animateDivs) {
-                this.animateDivs.forEach(function (a) { return _this._renderer.addClass(a.nativeElement, 'animate'); });
-            }
-        };
-        CommitButtonsComponent.prototype._checkAnimationFinished = function () {
-            var _this = this;
-            if (this.commitFinished && this.animateDivs) {
-                this.animateDivs.forEach(function (a) {
-                    a.nativeElement.addEventListener('animationiteration', _this._handleAnimationIteration);
-                    // a.nativeElement.addEventListener('webkitAnimationIteration', (event) => this._handleAnimationIteration(event));
-                });
-            }
-        };
-        return CommitButtonsComponent;
-    }());
-    CommitButtonsComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: "co-commit-buttons",
-                    template: "\n    <div class=\"commit-buttons-wrapper\" @showHideSaveCancel>\n      <div class=\"commit-buttons-button save\" [class.finished]=\"commitFinished\"\n           (click)=\"commitClick.emit($event)\">\n        <div class=\"save-button-spinner\" *ngIf=\"committing || commitFinished\">\n          <div #animatediv></div>\n          <div #animatediv></div>\n          <div #animatediv></div>\n          <div #animatediv></div>\n        </div>\n        <div class=\"spinner-checkmark\" *ngIf=\"!committing || commitFinished\"></div>\n      </div>\n      <div class=\"commit-buttons-button cancel\" (click)=\"cancelClick.emit($event)\">\n        <div class=\"cancel-button\"></div>\n      </div>\n    </div>\n  ",
-                    animations: [
-                        animations.trigger('showHideSaveCancel', [
-                            animations.state('*', animations.style({ transform: 'scaleY(1)', opacity: 1 })),
-                            animations.state('void', animations.style({ transform: 'scaleY(0)', opacity: 0 })),
-                            animations.transition('void <=> *', animations.animate(200))
-                        ]),
-                    ],
-                    encapsulation: core.ViewEncapsulation.None
-                },] }
-    ];
-    CommitButtonsComponent.ctorParameters = function () { return [
-        { type: core.Renderer2 }
-    ]; };
-    CommitButtonsComponent.propDecorators = {
-        content: [{ type: core.ViewChildren, args: ['animatediv', { read: core.ElementRef },] }],
-        committing: [{ type: core.Input }],
-        commitFinished: [{ type: core.Input }],
-        cancelClick: [{ type: core.Output }],
-        commitClick: [{ type: core.Output }],
-        showClass: [{ type: core.HostBinding, args: ["class.co-commit-buttons",] }]
-    };
-
-    var CommitButtonsModule = /** @class */ (function () {
-        function CommitButtonsModule() {
-        }
-        return CommitButtonsModule;
-    }());
-    CommitButtonsModule.decorators = [
-        { type: core.NgModule, args: [{
-                    imports: [
-                        common.CommonModule
-                    ],
-                    declarations: [
-                        CommitButtonsComponent
-                    ],
-                    exports: [
-                        CommitButtonsComponent
-                    ]
-                },] }
-    ];
-
     var InputTextModule = /** @class */ (function () {
         function InputTextModule() {
         }
@@ -11084,6 +11214,8 @@
     exports.GridToolbarComponent = GridToolbarComponent;
     exports.GridToolbarModule = GridToolbarModule;
     exports.IconCacheService = IconCacheService;
+    exports.IconCollapseHandleComponent = IconCollapseHandleComponent;
+    exports.IconCollapseHandleModule = IconCollapseHandleModule;
     exports.IconComponent = IconComponent;
     exports.IconModule = IconModule;
     exports.ImageComponent = ImageComponent;
@@ -11115,6 +11247,7 @@
     exports.MultiSelectListComponent = MultiSelectListComponent;
     exports.MultiSelectListModule = MultiSelectListModule;
     exports.ObserveVisibilityModule = ObserveVisibilityModule;
+    exports.OrientationOfDirection = OrientationOfDirection;
     exports.PaginationBarComponent = PaginationBarComponent;
     exports.PaginationBarModule = PaginationBarModule;
     exports.PaginationComponent = PaginationComponent;
@@ -11158,10 +11291,10 @@
     exports["ɵq"] = BaseGridComponent;
     exports["ɵr"] = AppendPipeModule;
     exports["ɵs"] = AppendPipe;
-    exports["ɵt"] = ValidationErrorModule;
-    exports["ɵu"] = ValidationErrorComponent;
-    exports["ɵv"] = CommitButtonsModule;
-    exports["ɵw"] = CommitButtonsComponent;
+    exports["ɵt"] = CommitButtonsModule;
+    exports["ɵu"] = CommitButtonsComponent;
+    exports["ɵv"] = ValidationErrorModule;
+    exports["ɵw"] = ValidationErrorComponent;
     exports["ɵx"] = PopupShowerService;
     exports["ɵy"] = BaseSimpleGridComponent;
     exports["ɵz"] = ObserveVisibilityDirective;