@colijnit/corecomponents_v12 12.0.64 → 12.0.66

package/bundles/colijnit-corecomponents_v12.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/common/http'), require('@angular/platform-browser'), require('rxjs'), require('rxjs/operators'), require('@syncfusion/ej2-angular-splitbuttons'), require('three'), require('three/examples/jsm/renderers/CSS3DRenderer'), require('@tweenjs/tween.js'), require('@angular/animations'), require('@syncfusion/ej2-angular-popups'), require('@syncfusion/ej2-angular-kanban'), require('@syncfusion/ej2-angular-richtexteditor'), require('@angular/forms'), require('@syncfusion/ej2-angular-schedule'), require('@syncfusion/ej2-angular-navigations'), require('@syncfusion/ej2-angular-buttons'), require('@syncfusion/ej2-angular-dropdowns'), require('@syncfusion/ej2-angular-grids'), require('@syncfusion/ej2-base'), require('@syncfusion/ej2-angular-calendars'), require('@syncfusion/ej2-angular-inputs'), require('@syncfusion/ej2-angular-pivotview'), require('@angular/cdk/overlay'), require('@angular/cdk/portal'), require('@angular/cdk/drag-drop'), require('@angular/cdk/scrolling')) :
-    typeof define === 'function' && define.amd ? define('@colijnit/corecomponents_v12', ['exports', '@angular/core', '@angular/common', '@angular/common/http', '@angular/platform-browser', 'rxjs', 'rxjs/operators', '@syncfusion/ej2-angular-splitbuttons', 'three', 'three/examples/jsm/renderers/CSS3DRenderer', '@tweenjs/tween.js', '@angular/animations', '@syncfusion/ej2-angular-popups', '@syncfusion/ej2-angular-kanban', '@syncfusion/ej2-angular-richtexteditor', '@angular/forms', '@syncfusion/ej2-angular-schedule', '@syncfusion/ej2-angular-navigations', '@syncfusion/ej2-angular-buttons', '@syncfusion/ej2-angular-dropdowns', '@syncfusion/ej2-angular-grids', '@syncfusion/ej2-base', '@syncfusion/ej2-angular-calendars', '@syncfusion/ej2-angular-inputs', '@syncfusion/ej2-angular-pivotview', '@angular/cdk/overlay', '@angular/cdk/portal', '@angular/cdk/drag-drop', '@angular/cdk/scrolling'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.colijnit = global.colijnit || {}, global.colijnit.corecomponents_v12 = {}), global.ng.core, global.ng.common, global.ng.common.http, global.ng.platformBrowser, global.rxjs, global.rxjs.operators, global.ej2AngularSplitbuttons, global.three, global.CSS3DRenderer, global.TWEEN, global.ng.animations, global.ej2AngularPopups, global.ej2AngularKanban, global.ej2AngularRichtexteditor, global.ng.forms, global.ej2AngularSchedule, global.ej2AngularNavigations, global.ej2AngularButtons, global.ej2AngularDropdowns, global.ej2AngularGrids, global.ej2Base, global.ej2AngularCalendars, global.ej2AngularInputs, global.ej2AngularPivotview, global.ng.cdk.overlay, global.ng.cdk.portal, global.ng.cdk.dragDrop, global.ng.cdk.scrolling));
-})(this, (function (exports, core, common, http, platformBrowser, rxjs, operators, ej2AngularSplitbuttons, three, CSS3DRenderer, TWEEN, animations, ej2AngularPopups, ej2AngularKanban, ej2AngularRichtexteditor, forms, ej2AngularSchedule, ej2AngularNavigations, ej2AngularButtons, ej2AngularDropdowns, ej2AngularGrids, ej2Base, ej2AngularCalendars, ej2AngularInputs, ej2AngularPivotview, overlay, portal, dragDrop, scrolling) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/common/http'), require('@angular/platform-browser'), require('rxjs'), require('rxjs/operators'), require('@syncfusion/ej2-angular-splitbuttons'), require('three'), require('three/examples/jsm/renderers/CSS3DRenderer'), require('@tweenjs/tween.js'), require('hammerjs'), require('@angular/animations'), require('@syncfusion/ej2-angular-popups'), require('@syncfusion/ej2-angular-kanban'), require('@syncfusion/ej2-angular-richtexteditor'), require('@angular/forms'), require('@syncfusion/ej2-angular-schedule'), require('@syncfusion/ej2-angular-navigations'), require('@syncfusion/ej2-angular-buttons'), require('@syncfusion/ej2-angular-dropdowns'), require('@syncfusion/ej2-angular-grids'), require('@syncfusion/ej2-base'), require('@syncfusion/ej2-angular-calendars'), require('@syncfusion/ej2-angular-inputs'), require('@syncfusion/ej2-angular-pivotview'), require('@angular/cdk/overlay'), require('@angular/cdk/portal'), require('@angular/cdk/drag-drop'), require('@angular/cdk/scrolling')) :
+    typeof define === 'function' && define.amd ? define('@colijnit/corecomponents_v12', ['exports', '@angular/core', '@angular/common', '@angular/common/http', '@angular/platform-browser', 'rxjs', 'rxjs/operators', '@syncfusion/ej2-angular-splitbuttons', 'three', 'three/examples/jsm/renderers/CSS3DRenderer', '@tweenjs/tween.js', 'hammerjs', '@angular/animations', '@syncfusion/ej2-angular-popups', '@syncfusion/ej2-angular-kanban', '@syncfusion/ej2-angular-richtexteditor', '@angular/forms', '@syncfusion/ej2-angular-schedule', '@syncfusion/ej2-angular-navigations', '@syncfusion/ej2-angular-buttons', '@syncfusion/ej2-angular-dropdowns', '@syncfusion/ej2-angular-grids', '@syncfusion/ej2-base', '@syncfusion/ej2-angular-calendars', '@syncfusion/ej2-angular-inputs', '@syncfusion/ej2-angular-pivotview', '@angular/cdk/overlay', '@angular/cdk/portal', '@angular/cdk/drag-drop', '@angular/cdk/scrolling'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.colijnit = global.colijnit || {}, global.colijnit.corecomponents_v12 = {}), global.ng.core, global.ng.common, global.ng.common.http, global.ng.platformBrowser, global.rxjs, global.rxjs.operators, global.ej2AngularSplitbuttons, global.three, global.CSS3DRenderer, global.TWEEN, null, global.ng.animations, global.ej2AngularPopups, global.ej2AngularKanban, global.ej2AngularRichtexteditor, global.ng.forms, global.ej2AngularSchedule, global.ej2AngularNavigations, global.ej2AngularButtons, global.ej2AngularDropdowns, global.ej2AngularGrids, global.ej2Base, global.ej2AngularCalendars, global.ej2AngularInputs, global.ej2AngularPivotview, global.ng.cdk.overlay, global.ng.cdk.portal, global.ng.cdk.dragDrop, global.ng.cdk.scrolling));
+})(this, (function (exports, core, common, http, platformBrowser, rxjs, operators, ej2AngularSplitbuttons, three, CSS3DRenderer, TWEEN, hammerjs, animations, ej2AngularPopups, ej2AngularKanban, ej2AngularRichtexteditor, forms, ej2AngularSchedule, ej2AngularNavigations, ej2AngularButtons, ej2AngularDropdowns, ej2AngularGrids, ej2Base, ej2AngularCalendars, ej2AngularInputs, ej2AngularPivotview, overlay, portal, dragDrop, scrolling) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -3489,6 +3489,177 @@
                 },] }
     ];
 
+    var CarouselComponent = /** @class */ (function () {
+        function CarouselComponent() {
+            var _this = this;
+            this.canNavigateLeft = false;
+            this.canNavigateRight = false;
+            this.activeIndex = 0;
+            this.ro = new ResizeObserver(function (entries) {
+                _this._checkNavigationButtons();
+            });
+            this._disableButtons = false;
+        }
+        Object.defineProperty(CarouselComponent.prototype, "containerChild", {
+            set: function (child) {
+                if (child) {
+                    this.container = child;
+                    this._checkNavigationButtons();
+                    this.ro.observe(this.container.nativeElement);
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(CarouselComponent.prototype, "contentChildren", {
+            set: function (content) {
+                if (content) {
+                    this.carouselItems = content.toArray();
+                }
+                this._checkNavigationButtons();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        CarouselComponent.prototype.showClass = function () {
+            return true;
+        };
+        CarouselComponent.prototype.ngOnDestroy = function () {
+            for (var i = this.carouselItems.length - 1; i >= 0; i--) {
+                this.carouselItems[i] = undefined;
+            }
+            this.container = undefined;
+        };
+        CarouselComponent.prototype.handlePress = function (event) {
+            console.log(event);
+        };
+        CarouselComponent.prototype.handleSwipe = function (event) {
+            var x = Math.abs(event.deltaX) > 40 ? (event.deltaX > 0 ? 'right' : 'left') : '';
+            var y = Math.abs(event.deltaY) > 40 ? (event.deltaY > 0 ? 'down' : 'up') : '';
+            console.log(x + " " + y);
+        };
+        CarouselComponent.prototype.handleButtonLeftClick = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    this._navigate();
+                    return [2 /*return*/];
+                });
+            });
+        };
+        CarouselComponent.prototype.handleButtonRightClick = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    this._navigate(true);
+                    return [2 /*return*/];
+                });
+            });
+        };
+        CarouselComponent.prototype._navigate = function (right) {
+            if (right === void 0) { right = false; }
+            return __awaiter(this, void 0, void 0, function () {
+                var wantedIndex, left;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            if (this._disableButtons) {
+                                return [2 /*return*/];
+                            }
+                            this._disableButtons = true;
+                            wantedIndex = this.activeIndex + (right ? 1 : -1);
+                            left = this._getLeftPositionFromActiveItem(wantedIndex);
+                            if (!(left !== null)) return [3 /*break*/, 2];
+                            return [4 /*yield*/, this._scrollWrapper(left)];
+                        case 1:
+                            if (_a.sent()) {
+                                this.activeIndex = wantedIndex;
+                            }
+                            _a.label = 2;
+                        case 2:
+                            this._checkNavigationButtons();
+                            this._disableButtons = false;
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        CarouselComponent.prototype._checkNavigationButtons = function () {
+            if (this.container && this.container.nativeElement) {
+                this.canNavigateLeft = this.container.nativeElement.scrollLeft > 0;
+                this.canNavigateRight = this.container.nativeElement.scrollLeft + this.container.nativeElement.clientWidth < this.container.nativeElement.scrollWidth;
+            }
+        };
+        CarouselComponent.prototype._getLeftPositionFromActiveItem = function (index) {
+            var element = this.carouselItems[index];
+            return element ? element.nativeElement.offsetLeft : null;
+        };
+        CarouselComponent.prototype._scrollWrapper = function (left) {
+            return __awaiter(this, void 0, void 0, function () {
+                var _this = this;
+                return __generator(this, function (_a) {
+                    return [2 /*return*/, new Promise(function (resolve) {
+                            if (_this.container && _this.container.nativeElement) {
+                                var oldScroll_1 = _this.container.nativeElement.scrollLeft;
+                                _this.container.nativeElement.scrollLeft = left;
+                                setTimeout(function () {
+                                    return resolve(oldScroll_1 !== _this.container.nativeElement.scrollLeft);
+                                }, 400);
+                            }
+                            else {
+                                return resolve(false);
+                            }
+                        })];
+                });
+            });
+        };
+        return CarouselComponent;
+    }());
+    CarouselComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'co-carousel',
+                    template: "\n    <div class=\"carousel-wrapper\" #container (swipeleft)=\"handleButtonRightClick()\" (swiperight)=\"handleButtonLeftClick()\">\n      <ng-content></ng-content>\n    </div>\n    <div class=\"carousel-navigate-button left\">\n      <div class=\"carousel-navigate-button-wrapper\" *ngIf=\"canNavigateLeft\" (click)=\"handleButtonLeftClick()\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 256 512\">\n          <path\n            d=\"M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z\"></path>\n        </svg>\n      </div>\n    </div>\n    <div class=\"carousel-navigate-button right\">\n      <div class=\"carousel-navigate-button-wrapper\" *ngIf=\"canNavigateRight\" (click)=\"handleButtonRightClick()\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 256 512\">\n          <path\n            d=\"M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z\"></path>\n        </svg>\n      </div>\n    </div>\n  ",
+                    encapsulation: core.ViewEncapsulation.None
+                },] }
+    ];
+    CarouselComponent.propDecorators = {
+        containerChild: [{ type: core.ViewChild, args: ['container', { read: core.ElementRef },] }],
+        contentChildren: [{ type: core.ContentChildren, args: ['carouselItem', { read: core.ElementRef, descendants: true },] }],
+        showClass: [{ type: core.HostBinding, args: ['class.co-carousel',] }]
+    };
+
+    var CarouselHammerConfig = /** @class */ (function (_super) {
+        __extends(CarouselHammerConfig, _super);
+        function CarouselHammerConfig() {
+            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
+            _this.overrides = {
+                swipe: { direction: Hammer.DIRECTION_HORIZONTAL },
+            };
+            return _this;
+        }
+        return CarouselHammerConfig;
+    }(platformBrowser.HammerGestureConfig));
+    var CarouselModule = /** @class */ (function () {
+        function CarouselModule() {
+        }
+        return CarouselModule;
+    }());
+    CarouselModule.decorators = [
+        { type: core.NgModule, args: [{
+                    imports: [
+                        common.CommonModule,
+                        platformBrowser.HammerModule
+                    ],
+                    declarations: [
+                        CarouselComponent
+                    ],
+                    exports: [
+                        CarouselComponent
+                    ],
+                    providers: [
+                        { provide: platformBrowser.HAMMER_GESTURE_CONFIG, useClass: CarouselHammerConfig },
+                    ]
+                },] }
+    ];
+
     function showHideDialogAnimation(name) {
         return window.innerWidth > 700 ?
             animations.trigger(name, [
@@ -6409,6 +6580,8 @@
             _this.elementRef = elementRef;
             _this.shopPopup = true;
             _this.valueChange = new core.EventEmitter();
+            _this.isSmall = false;
+            _this.customHeight = false;
             _super.prototype._markAsOnPush.call(_this);
             return _this;
         }
@@ -6454,6 +6627,8 @@
         popupHeight: [{ type: core.Input }],
         popupWidth: [{ type: core.Input }],
         valueChange: [{ type: core.Output }],
+        isSmall: [{ type: core.HostBinding, args: ['class.is-small',] }, { type: core.Input }],
+        customHeight: [{ type: core.HostBinding, args: ['class.custom-height',] }, { type: core.Input }],
         showClass: [{ type: core.HostBinding, args: ["class.co-input-combo-box",] }]
     };
 
@@ -7510,6 +7685,8 @@
             _this.showPlaceholderOnFocus = true;
             _this.hasOwnLabel = true;
             _this.hideArrowButtons = false;
+            _this.isSmall = false;
+            _this.customHeight = false;
             _super.prototype._markAsOnPush.call(_this);
             return _this;
         }
@@ -7588,7 +7765,9 @@
         hasLeftIcon: [{ type: core.HostBinding, args: ['class.has-left-icon',] }],
         hasRightIcon: [{ type: core.HostBinding, args: ['class.has-right-icon',] }],
         hasOwnLabel: [{ type: core.HostBinding, args: ["class.has-own-label",] }],
-        hideArrowButtons: [{ type: core.Input }, { type: core.HostBinding, args: ['class.hideArrows',] }]
+        hideArrowButtons: [{ type: core.Input }, { type: core.HostBinding, args: ['class.hideArrows',] }],
+        isSmall: [{ type: core.HostBinding, args: ['class.is-small',] }, { type: core.Input }],
+        customHeight: [{ type: core.HostBinding, args: ['class.custom-height',] }, { type: core.Input }]
     };
 
     var ValidationErrorModule = /** @class */ (function () {
@@ -11234,6 +11413,9 @@
     exports.CardModule = CardModule;
     exports.Carousel3dComponent = Carousel3dComponent;
     exports.Carousel3dModule = Carousel3dModule;
+    exports.CarouselComponent = CarouselComponent;
+    exports.CarouselHammerConfig = CarouselHammerConfig;
+    exports.CarouselModule = CarouselModule;
     exports.ClickoutsideModule = ClickoutsideModule;
     exports.CoDialogComponent = CoDialogComponent;
     exports.CoDialogModule = CoDialogModule;