@colijnit/corecomponents_v12 12.0.75 → 12.0.77

package/bundles/colijnit-corecomponents_v12.umd.js

@@ -6408,6 +6408,7 @@
             _this.formUserChangeListener = formUserChangeListener;
             _this.ngZoneWrapper = ngZoneWrapper;
             _this.elementRef = elementRef;
+            _this.clickableLabel = true;
             _this.modelChange = new i0.EventEmitter();
             return _this;
         }
@@ -6430,7 +6431,7 @@
     InputCheckboxComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "co-input-checkbox",
-                    template: "\n    <div class=\"checkbox\" (click)=\"handleModelChange($event)\" [class.checked]=\"model\">\n      <div class=\"checkmark\" [class.show]=\"model\"></div>\n    </div>\n    <div class=\"label\" *ngIf=\"label\" [textContent]=\"label\" (click)=\"handleModelChange($event)\"></div>\n  ",
+                    template: "\n    <div class=\"checkbox\" (click)=\"handleModelChange($event)\" [class.checked]=\"model\">\n      <div class=\"checkmark\" [class.show]=\"model\"></div>\n    </div>\n    <div class=\"label\" [class.clickable]=\"clickableLabel\" *ngIf=\"label\" [textContent]=\"label\"\n         (click)=\"clickableLabel ? handleModelChange($event) : true\"></div>\n  ",
                     providers: [{
                             provide: COMPONENT_INTERFACE_NAME,
                             useExisting: i0.forwardRef(function () { return InputCheckboxComponent; })
@@ -6453,6 +6454,7 @@
     ]; };
     InputCheckboxComponent.propDecorators = {
         cssClass: [{ type: i0.Input }],
+        clickableLabel: [{ type: i0.Input }],
         modelChange: [{ type: i0.Output }],
         showClass: [{ type: i0.HostBinding, args: ["class.co-input-checkbox",] }]
     };
@@ -11103,7 +11105,7 @@
     FilterItemComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "co-filter-item",
-                    template: "\n    <div class=\"co-filter-item-header\">\n      <co-collapsible\n        [headerTitle]=\"placeholder\"\n        [expandButtonLast]=\"true\"\n        [iconData]=\"iconService.getIcon(icons.ArrowPointDown)\"\n        [expanded]=\"expanded\"\n        [showButton]=\"showButton\"\n        [buttonText]=\"filterButtonLabel\"\n        (buttonClicked)=\"onButtonClicked()\"\n      >\n        <div class=\"co-filter-item-collapsable-content\">\n          <div class=\"co-filter-item-custom-content\" *ngIf=\"customContent; else collectionContent\"\n               (keydown)=\"showButton=true\" (click)=\"showButton=true\">\n            <ng-content></ng-content>\n          </div>\n          <ng-template #collectionContent>\n            <div class=\"co-filter-item-collection-content\">\n              <co-input-text\n                *ngIf=\"collection?.length > 10 || minSearchCharsToLoadCollection\"\n                [placeholder]=\"searchPlaceholder\"\n                [model]=\"filterText\"\n                (modelChange)=\"applyFilter($event)\"\n              >\n              </co-input-text>\n              <div class=\"no-results\" *ngIf=\"filteredCollection?.length === 0\">\n                <span [textContent]=\"noResultsLabel\"></span>\n              </div>\n              <div class=\"co-filter-item-collection-results\">\n                <ng-container\n                  *ngFor=\"let option of filteredCollection; let index = index\">\n                  <div class=\"co-filter-item-collection-result-item\" *ngIf=\"index < limitTo || showAllResults\">\n                    <co-input-checkbox *ngIf=\"!singleSelect\"\n                                       [label]=\"option.description\"\n                                       [model]=\"option.checked\"\n                                       (modelChange)=\"handleModelChange(option)\"\n                    ></co-input-checkbox>\n                    <co-input-radio-button *ngIf=\"singleSelect\"\n                                           [label]=\"option.description\"\n                                           [model]=\"option.checked\"\n                                           (modelChange)=\"handleModelChange(option)\"\n                    ></co-input-radio-button>\n                    <div class=\"co-filter-item-amount\" *ngIf=\"option.count\"\n                         [textContent]=\"option.count.toString() | append: ')' | prepend: '      ('\"\n                    ></div>\n                  </div>\n\n                </ng-container>\n              </div>\n              <div class=\"co-filter-show-more-or-less\" *ngIf=\"!showAllResults\">\n                <div class=\"co-filter-show-more clickable\"\n                     *ngIf=\"moreToShow()\">\n                  <a (click)=\"increaseLimit()\">\n                    <co-icon [iconData]=\"iconService.getIcon(icons.ArrowPointDown)\"></co-icon>\n                    <span [textContent]=\"showMoreLabel\"></span>\n                  </a>\n                </div>\n                <div class=\"co-filter-show-less clickable\"\n                     *ngIf=\"lessToShow()\">\n                  <a (click)=\"setToInitialLimit()\">\n                    <co-icon [iconData]=\"iconService.getIcon(icons.ArrowPointUp)\"></co-icon>\n                    <span [textContent]=\"showLessLabel\"></span>\n                  </a>\n                </div>\n              </div>\n            </div>\n          </ng-template>\n        </div>\n      </co-collapsible>\n    </div>\n\n  ",
+                    template: "\n    <div class=\"co-filter-item-header\">\n      <co-collapsible\n        [headerTitle]=\"placeholder\"\n        [expandButtonLast]=\"true\"\n        [iconData]=\"iconService.getIcon(icons.ArrowPointDown)\"\n        [expanded]=\"expanded\"\n        [showButton]=\"showButton\"\n        [buttonText]=\"filterButtonLabel\"\n        (buttonClicked)=\"onButtonClicked()\"\n      >\n        <div class=\"co-filter-item-collapsable-content\">\n          <div class=\"co-filter-item-custom-content\" *ngIf=\"customContent; else collectionContent\"\n               (keydown)=\"showButton=true\" (click)=\"showButton=true\">\n            <ng-content></ng-content>\n          </div>\n          <ng-template #collectionContent>\n            <div class=\"co-filter-item-collection-content\">\n              <co-input-text\n                *ngIf=\"collection?.length > 10 || minSearchCharsToLoadCollection\"\n                [placeholder]=\"searchPlaceholder\"\n                [model]=\"filterText\"\n                (modelChange)=\"applyFilter($event)\"\n              >\n              </co-input-text>\n              <div class=\"no-results\" *ngIf=\"filteredCollection?.length === 0\">\n                <span [textContent]=\"noResultsLabel\"></span>\n              </div>\n              <div class=\"co-filter-item-collection-results\">\n                <ng-container\n                  *ngFor=\"let option of filteredCollection; let index = index\">\n                  <div class=\"co-filter-item-collection-result-item\" *ngIf=\"index < limitTo || showAllResults\">\n                    <co-input-checkbox *ngIf=\"!singleSelect\"\n                                       [label]=\"option.description\"\n                                       [model]=\"option.checked\"\n                                       [clickableLabel]=\"false\"\n                                       (modelChange)=\"handleModelChange(option)\"\n                    ></co-input-checkbox>\n                    <co-input-radio-button *ngIf=\"singleSelect\"\n                                           [label]=\"option.description\"\n                                           [model]=\"option.checked\"\n                                           (modelChange)=\"handleModelChange(option)\"\n                    ></co-input-radio-button>\n                    <div class=\"co-filter-item-amount\" *ngIf=\"option.count\"\n                         [textContent]=\"option.count.toString() | append: ')' | prepend: '      ('\"\n                    ></div>\n                  </div>\n\n                </ng-container>\n              </div>\n              <div class=\"co-filter-show-more-or-less\" *ngIf=\"!showAllResults\">\n                <div class=\"co-filter-show-more clickable\"\n                     *ngIf=\"moreToShow()\">\n                  <a (click)=\"increaseLimit()\">\n                    <co-icon [iconData]=\"iconService.getIcon(icons.ArrowPointDown)\"></co-icon>\n                    <span [textContent]=\"showMoreLabel\"></span>\n                  </a>\n                </div>\n                <div class=\"co-filter-show-less clickable\"\n                     *ngIf=\"lessToShow()\">\n                  <a (click)=\"setToInitialLimit()\">\n                    <co-icon [iconData]=\"iconService.getIcon(icons.ArrowPointUp)\"></co-icon>\n                    <span [textContent]=\"showLessLabel\"></span>\n                  </a>\n                </div>\n              </div>\n            </div>\n          </ng-template>\n        </div>\n      </co-collapsible>\n    </div>\n\n  ",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
@@ -11425,6 +11427,109 @@
                 },] }
     ];
 
+    var CheckmarkOverlayComponent = /** @class */ (function () {
+        function CheckmarkOverlayComponent(_renderer) {
+            var _this = this;
+            this._renderer = _renderer;
+            this.showOverlay = false;
+            this.showWrapper = false;
+            this._visible = false;
+            this._handleAnimationIteration = function (event) {
+                _this.animateDivs.forEach(function (a) { return _this._renderer.removeClass(a.nativeElement, 'animate'); });
+                event.currentTarget.removeEventListener('animationiteration', _this._handleAnimationIteration);
+            };
+        }
+        Object.defineProperty(CheckmarkOverlayComponent.prototype, "content", {
+            set: function (children) {
+                this.animateDivs = children.toArray();
+                this._checkAnimation();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(CheckmarkOverlayComponent.prototype, "visible", {
+            get: function () {
+                return this._visible;
+            },
+            set: function (value) {
+                var _this = this;
+                if (value) {
+                    this.showOverlay = true;
+                    this.showWrapper = true;
+                }
+                else {
+                    setTimeout(function () { return _this.showOverlay = false; }, 800);
+                    setTimeout(function () { return _this.showWrapper = false; }, 600);
+                }
+                this._visible = value;
+                this._checkAnimation();
+                this._checkAnimationFinished();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        CheckmarkOverlayComponent.prototype.showClass = function () {
+            return true;
+        };
+        CheckmarkOverlayComponent.prototype._checkAnimation = function () {
+            var _this = this;
+            if (this.visible && this.animateDivs) {
+                this.animateDivs.forEach(function (a) { return _this._renderer.addClass(a.nativeElement, 'animate'); });
+            }
+        };
+        CheckmarkOverlayComponent.prototype._checkAnimationFinished = function () {
+            var _this = this;
+            if (!this.visible && this.animateDivs) {
+                this.animateDivs.forEach(function (a) {
+                    a.nativeElement.addEventListener('animationiteration', _this._handleAnimationIteration);
+                });
+            }
+        };
+        return CheckmarkOverlayComponent;
+    }());
+    CheckmarkOverlayComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: "co-checkmark-overlay",
+                    template: "\n    <div *ngIf=\"showOverlay\">\n      <div class=\"checkmark-overlay-wrapper\" *ngIf=\"showWrapper\" @showHideSaveCancel>\n        <div class=\"checkmark-buttons-button save\" [class.finished]=\"!visible\">\n          <div class=\"save-button-spinner\">\n            <div #animatediv></div>\n            <div #animatediv></div>\n            <div #animatediv></div>\n            <div #animatediv></div>\n          </div>\n          <div class=\"spinner-checkmark\" *ngIf=\"!visible && successful\"></div>\n        </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: i0.ViewEncapsulation.None
+                },] }
+    ];
+    CheckmarkOverlayComponent.ctorParameters = function () { return [
+        { type: i0.Renderer2 }
+    ]; };
+    CheckmarkOverlayComponent.propDecorators = {
+        content: [{ type: i0.ViewChildren, args: ['animatediv', { read: i0.ElementRef },] }],
+        visible: [{ type: i0.Input }],
+        successful: [{ type: i0.Input }],
+        showClass: [{ type: i0.HostBinding, args: ["class.co-checkmark-overlay",] }]
+    };
+
+    var CheckmarkOverlayModule = /** @class */ (function () {
+        function CheckmarkOverlayModule() {
+        }
+        return CheckmarkOverlayModule;
+    }());
+    CheckmarkOverlayModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [
+                        common.CommonModule
+                    ],
+                    declarations: [
+                        CheckmarkOverlayComponent
+                    ],
+                    exports: [
+                        CheckmarkOverlayComponent
+                    ]
+                },] }
+    ];
+
     var ColorSequenceService = /** @class */ (function () {
         function ColorSequenceService() {
             this.colors = new Map();
@@ -11469,6 +11574,7 @@
     exports.CarouselComponent = CarouselComponent;
     exports.CarouselHammerConfig = CarouselHammerConfig;
     exports.CarouselModule = CarouselModule;
+    exports.CheckmarkOverlayModule = CheckmarkOverlayModule;
     exports.ClickoutsideModule = ClickoutsideModule;
     exports.CoDialogComponent = CoDialogComponent;
     exports.CoDialogModule = CoDialogModule;
@@ -11566,6 +11672,7 @@
     exports["ɵbe"] = PrependPipe;
     exports["ɵbf"] = ClickOutsideDirective;
     exports["ɵbg"] = ClickOutsideMasterService;
+    exports["ɵbh"] = CheckmarkOverlayComponent;
     exports["ɵc"] = CoRippleDirective;
     exports["ɵd"] = CoViewportRulerService;
     exports["ɵe"] = CoScrollDispatcherService;