@colijnit/corecomponents_v12 12.0.97 → 12.0.99

package/bundles/colijnit-corecomponents_v12.umd.js

@@ -1091,7 +1091,7 @@
         "logo": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><rect x=\"10\" y=\"21.19\" width=\"2.04\" height=\"6.32\" fill=\"#484f60\"/><path d=\"M18.66,29.24a3.84,3.84,0,0,1-2.85-1.19,4.19,4.19,0,0,1,0-5.77,4,4,0,0,1,5.71,0,4.19,4.19,0,0,1,0,5.77A3.85,3.85,0,0,1,18.66,29.24Zm0-6.16a1.79,1.79,0,0,0-1.38.58,2.12,2.12,0,0,0-.57,1.51,2,2,0,0,0,.57,1.49,1.94,1.94,0,0,0,2.76,0,2.08,2.08,0,0,0,.56-1.5,2.15,2.15,0,0,0-.56-1.51A1.76,1.76,0,0,0,18.67,23.08Z\" fill=\"#484f60\"/><polygon points=\"31.05 29.18 27.33 25.02 27.33 29.14 25.29 29.14 25.29 21.15 26.57 21.15 30.29 25.33 30.29 21.19 32.33 21.19 32.33 29.18 31.05 29.18\" fill=\"#484f60\"/><polygon points=\"35.34 29.14 35.34 21.19 39.9 21.19 39.9 23.17 37.38 23.17 37.38 23.9 39.66 23.9 39.66 25.87 37.38 25.87 37.38 27.14 40 27.14 40 29.14 35.34 29.14\" fill=\"#484f60\"/></svg>",
         "logout": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><polygon points=\"27.33 34.17 12.33 34.17 12.33 11.17 27.33 11.17 27.33 17.63 28.33 17.63 28.33 10.17 11.33 10.17 11.33 35.17 28.33 35.17 28.33 27.71 27.33 27.71 27.33 34.17\" fill=\"#484f60\"/><polygon points=\"22.33 40.17 11.33 35.17 11.33 10.17 22.33 14.17 22.33 40.17\" fill=\"#484f60\"/><polygon points=\"38.67 22.66 30.63 14.63 30.63 19.63 24.33 19.63 24.33 25.71 30.63 25.71 30.63 30.71 38.67 22.66\" fill=\"#484f60\"/></svg>",
         "magic_wand": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><g style=\"isolation:isolate\"><path d=\"M20.45,10.71a.28.28,0,0,1,.49-.19l1.4,1.25a.93.93,0,0,0,.83.23L25,11.62a.29.29,0,0,1,.34.41l-.76,1.71a.93.93,0,0,0,0,.86l.93,1.62c.12.26,0,.45-.29.45l-1.86-.2a1,1,0,0,0-.81.32l-1.26,1.38a.28.28,0,0,1-.5-.14l-.39-1.83a1,1,0,0,0-.55-.67l-1.71-.77a.28.28,0,0,1,0-.52l1.62-.94a1,1,0,0,0,.48-.73Z\" fill=\"#484f60\"/><g style=\"mix-blend-mode:lighten\"><path d=\"M23.3,16.21a1,1,0,0,0-.8.31l-1,1.13a.29.29,0,0,1-.51-.14L20.66,16a1,1,0,0,0-.55-.68l-1.39-.62a.28.28,0,0,1,0-.52L20,13.45a1,1,0,0,0,.48-.73l.16-1.5a.29.29,0,0,1,.49-.2l1.13,1a.93.93,0,0,0,.83.23L24.58,12a.29.29,0,0,1,.34.41l-.62,1.38a.91.91,0,0,0,.05.86l.75,1.32a.29.29,0,0,1-.29.44Z\" fill=\"#484f60\"/></g><path d=\"M33.57,36.76a.53.53,0,0,1,0,.72l-2.37,2.18a.48.48,0,0,1-.7,0L18,25.34a.51.51,0,0,1,0-.71l2.36-2.19a.49.49,0,0,1,.7,0Z\" fill=\"#484f60\"/><path d=\"M18.6,19.94a.51.51,0,0,1,0,.71L16.2,22.84a.48.48,0,0,1-.7,0l-2.76-3.13a.51.51,0,0,1,0-.71l2.37-2.19a.48.48,0,0,1,.7,0Z\" fill=\"#484f60\"/><path d=\"M30.67,10.55a.29.29,0,0,1,.47.24v1.12a1,1,0,0,0,.4.77l.9.66a.29.29,0,0,1-.08.52l-1.07.35a1,1,0,0,0-.61.61l-.35,1.06a.28.28,0,0,1-.51.09l-.67-.91a1,1,0,0,0-.77-.4H27.27a.29.29,0,0,1-.25-.47l.66-.9a.93.93,0,0,0,.14-.85l-.35-1.07a.29.29,0,0,1,.38-.38l1.07.35a1,1,0,0,0,.85-.13Z\" fill=\"#484f60\"/><g style=\"mix-blend-mode:lighten\"><path d=\"M29.25,14.88a1,1,0,0,0-.77-.4h-.86a.29.29,0,0,1-.24-.47l.5-.69a.93.93,0,0,0,.14-.85l-.26-.82c-.07-.27.1-.44.37-.37l.82.26a1,1,0,0,0,.85-.13l.69-.51a.29.29,0,0,1,.47.25V12a.94.94,0,0,0,.39.76l.7.51a.29.29,0,0,1-.09.52l-.81.26a1,1,0,0,0-.62.61l-.26.82a.29.29,0,0,1-.52.08Z\" fill=\"#484f60\"/></g><path d=\"M37,15.81a.29.29,0,0,1,.32.43l-.13.26a.91.91,0,0,0,0,.85l.15.26A.29.29,0,0,1,37,18l-.29,0a.93.93,0,0,0-.81.27l-.2.21a.28.28,0,0,1-.5-.16l0-.29a1,1,0,0,0-.52-.69l-.27-.13a.28.28,0,0,1,0-.52l.26-.13a.93.93,0,0,0,.5-.71l0-.29a.29.29,0,0,1,.5-.17l.21.21a.92.92,0,0,0,.82.26Z\" fill=\"#484f60\"/><g style=\"mix-blend-mode:lighten\"><path d=\"M35.25,18a1,1,0,0,0-.52-.7l-.12-.05a.28.28,0,0,1,0-.52l.12-.06a1,1,0,0,0,.51-.7V15.8a.29.29,0,0,1,.5-.18l.09.1a.92.92,0,0,0,.82.26l.13,0a.29.29,0,0,1,.32.42L37,16.5a.91.91,0,0,0,0,.85l.07.12a.29.29,0,0,1-.31.43l-.13,0a1,1,0,0,0-.82.28l-.09.1a.28.28,0,0,1-.5-.16Z\" fill=\"#484f60\"/></g></g></svg>",
-        "magnifier": "<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" x=\"0px\" y=\"0px\" viewBox=\"0 0 50 50\" enable-background=\"new 0 0 50 50\" ><g><path fill=\"#29363E\" d=\"M27.8,15.5c-3.4-3.4-8.9-3.4-12.3,0c-3.4,3.4-3.4,8.9,0,12.3c3.4,3.4,8.9,3.4,12.3,0C31.2,24.4,31.2,18.9,27.8,15.5z M26.4,26.4c-2.6,2.6-6.8,2.6-9.4,0c-2.6-2.6-2.6-6.8,0-9.4c2.6-2.6,6.8-2.6,9.4,0C29,19.6,29,23.8,26.4,26.4z\"/><path fill=\"#29363E\" d=\"M36.4,32.8l-4.3-4.3c-0.8-0.8-2.1-0.8-2.9,0l-0.7,0.7c-0.8,0.8-0.8,2.1,0,2.9l4.3,4.3c0.8,0.8,2.1,0.8,2.9,0l0.7-0.7C37.2,34.9,37.2,33.6,36.4,32.8z\"/></g></svg>",
+        "magnifier": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path d=\"M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z\"/></svg>",
         "manager": "<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" x=\"0px\" y=\"0px\" viewBox=\"0 0 51 51\" enable-background=\"new 0 0 51 51\" ><g><path fill=\"#484F5F\" d=\"M31.5,23h-0.5c-0.9,1.2-2.4,2.6-4.1,3.2c0.1,0.2,0.2,0.4,0.2,0.6c0,0.4-0.2,0.7-0.6,1l1.5,6.9l-2.5,2.5L23,34.7l1.5-6.9c-0.4-0.2-0.6-0.6-0.6-1c0-0.2,0.1-0.4,0.2-0.6c-1.7-0.6-3.2-2-4.1-3.2h-0.5c-2.2,0-4,2.1-4,3.9l2.7,3c0,1.8,1.8,8.1,4,8.1h6.7c2.2,0,4-6.4,4-8.1l2.7-3C35.6,25.1,33.8,23,31.5,23z\"/><path fill=\"#484F5F\" d=\"M31.7,18.1c0,2.7-2.8,5.8-6.2,5.8c-3.4,0-6.2-3.1-6.2-5.8c0-2.7,2.8-5.1,6.2-5.1C28.9,13,31.7,15.4,31.7,18.1z\"/></g></svg>",
         "mask": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><path d=\"M30,11V30H11V11H30m1-1H10V31H31V10Z\" fill=\"#484f60\"/><rect x=\"19\" y=\"19\" width=\"21\" height=\"21\" fill=\"#484f60\" opacity=\"0.5\"/><rect x=\"19\" y=\"19\" width=\"12\" height=\"12\" fill=\"#484f60\"/><path d=\"M39,20V39H20V20H39m1-1H19V40H40V19Z\" fill=\"#484f60\" opacity=\"0.5\"/></svg>",
         "master_detail": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><rect x=\"22\" y=\"32.17\" width=\"18\" height=\"4\" transform=\"translate(62 68.33) rotate(180)\" fill=\"#484f60\"/><rect x=\"22\" y=\"26.17\" width=\"18\" height=\"4\" transform=\"translate(62 56.33) rotate(180)\" fill=\"#484f60\"/><rect x=\"22\" y=\"20.17\" width=\"18\" height=\"4\" transform=\"translate(62 44.33) rotate(180)\" fill=\"#484f60\"/><rect x=\"22\" y=\"14.17\" width=\"18\" height=\"4\" transform=\"translate(62 32.33) rotate(180)\" fill=\"#484f60\"/><rect x=\"10\" y=\"14.17\" width=\"10\" height=\"22\" transform=\"translate(30 50.33) rotate(180)\" fill=\"#484f60\"/></svg>",
@@ -7610,7 +7610,6 @@
             _this.showPlaceholderOnFocus = true;
             _this.noStyle = false;
             _this.hideArrowButtons = false;
-            _this.isSmall = false;
             _this.leftIconClick = new i0.EventEmitter();
             _this.rightIconClick = new i0.EventEmitter();
             _this.hasOwnLabel = true;
@@ -7709,7 +7708,6 @@
         rightIconData: [{ type: i0.Input }],
         noStyle: [{ type: i0.HostBinding, args: ['class.no-style',] }, { type: i0.Input }],
         hideArrowButtons: [{ type: i0.Input }, { type: i0.HostBinding, args: ['class.hide-arrows',] }],
-        isSmall: [{ type: i0.HostBinding, args: ['class.is-small',] }, { type: i0.Input }],
         leftIconClick: [{ type: i0.Output }],
         rightIconClick: [{ type: i0.Output }],
         showClass: [{ type: i0.HostBinding, args: ["class.co-input-text",] }],
@@ -10786,10 +10784,9 @@
     var ObserveVisibilityDirective = /** @class */ (function () {
         function ObserveVisibilityDirective(_element) {
             this._element = _element;
-            this.debounceTime = 0;
             this.threshold = 0;
-            this.visible = new i0.EventEmitter();
-            this._subject = new rxjs.Subject();
+            this.visibilityChange = new i0.EventEmitter();
+            this.visible = false;
         }
         ObserveVisibilityDirective.prototype.ngOnInit = function () {
             this._createObserver();
@@ -10802,19 +10799,6 @@
                 this._observer.disconnect();
                 this._observer = undefined;
             }
-            this._subject.next();
-            this._subject.complete();
-        };
-        ObserveVisibilityDirective.prototype._isVisible = function (element) {
-            var _this = this;
-            return new Promise(function (resolve) {
-                var observer = new IntersectionObserver(function (_a) {
-                    var _b = __read(_a, 1), entry = _b[0];
-                    resolve(entry.isIntersecting && entry.intersectionRatio >= _this.threshold);
-                    observer.disconnect();
-                });
-                observer.observe(element);
-            });
         };
         ObserveVisibilityDirective.prototype._createObserver = function () {
             var _this = this;
@@ -10822,58 +10806,33 @@
                 rootMargin: '0px',
                 threshold: this.threshold,
             };
-            var isIntersecting = function (entry) { return entry.isIntersecting || entry.intersectionRatio > 0; };
             this._observer = new IntersectionObserver(function (entries, observer) {
                 entries.forEach(function (entry) {
-                    if (isIntersecting(entry)) {
-                        _this._subject.next({ entry: entry, observer: observer });
-                    }
+                    _this.visible = entry.isIntersecting || entry.intersectionRatio > 0;
+                    _this.visibilityChange.emit(_this.visible);
                 });
             }, options);
         };
         ObserveVisibilityDirective.prototype._startObservingElements = function () {
-            var _this = this;
             if (!this._observer) {
                 return;
             }
             this._observer.observe(this._element.nativeElement);
-            this._subject
-                .pipe(operators.delay(this.debounceTime), operators.filter(Boolean))
-                .subscribe(function (_a) {
-                var entry = _a.entry, observer = _a.observer;
-                return __awaiter(_this, void 0, void 0, function () {
-                    var target, isStillVisible;
-                    return __generator(this, function (_a) {
-                        switch (_a.label) {
-                            case 0:
-                                target = entry.target;
-                                return [4 /*yield*/, this._isVisible(target)];
-                            case 1:
-                                isStillVisible = _a.sent();
-                                if (isStillVisible) {
-                                    this.visible.emit(target);
-                                    observer.unobserve(target);
-                                }
-                                return [2 /*return*/];
-                        }
-                    });
-                });
-            });
         };
         return ObserveVisibilityDirective;
     }());
     ObserveVisibilityDirective.decorators = [
         { type: i0.Directive, args: [{
                     selector: '[observeVisibility]',
+                    exportAs: 'visibilityObserve'
                 },] }
     ];
     ObserveVisibilityDirective.ctorParameters = function () { return [
         { type: i0.ElementRef }
     ]; };
     ObserveVisibilityDirective.propDecorators = {
-        debounceTime: [{ type: i0.Input }],
         threshold: [{ type: i0.Input }],
-        visible: [{ type: i0.Output }]
+        visibilityChange: [{ type: i0.Output }]
     };
 
     var ObserveVisibilityModule = /** @class */ (function () {
@@ -11164,7 +11123,8 @@
         { 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\" (mousedown)=\"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
+                    encapsulation: i0.ViewEncapsulation.None,
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush
                 },] }
     ];
     FilterItemComponent.ctorParameters = function () { return [