@colijnit/corecomponents_v12 12.2.0 → 12.2.2

package/bundles/colijnit-corecomponents_v12.umd.js

@@ -2263,6 +2263,7 @@
             this.customWidth = false;
             this.customHeight = false;
             this.noTriangleGraphic = false;
+            this.keepFocussed = false;
             this.halfWidth = false;
             this.fullWidth = false;
             this.excludeUserModelChange = false;
@@ -2537,7 +2538,6 @@
             configurable: true
         });
         BaseInputComponent.prototype.onClick = function (event) {
-            event.stopPropagation();
             if (this.canChange && !this.noClickFocus) {
                 this.requestFocus();
                 if (!this.excludeUserModelChange) {
@@ -2755,7 +2755,7 @@
         BaseInputComponent.prototype.doBlur = function (event) {
             var _this = this;
             setTimeout(function () {
-                if (_this.keepFocus) {
+                if (_this.keepFocus || _this.keepFocussed) {
                     if (event) {
                         event.preventDefault;
                     }
@@ -3125,6 +3125,7 @@
         customWidth: [{ type: i0.Input }, { type: i0.HostBinding, args: ["class.custom-width",] }],
         customHeight: [{ type: i0.Input }, { type: i0.HostBinding, args: ['class.custom-height',] }],
         noTriangleGraphic: [{ type: i0.Input }],
+        keepFocussed: [{ type: i0.Input }],
         halfWidth: [{ type: i0.Input }, { type: i0.HostBinding, args: ["class.half-width",] }],
         fullWidth: [{ type: i0.Input }, { type: i0.HostBinding, args: ["class.full-width-important",] }],
         excludeUserModelChange: [{ type: i0.Input }],
@@ -3164,6 +3165,9 @@
     __decorate([
         InputBoolean()
     ], BaseInputComponent.prototype, "noTriangleGraphic", void 0);
+    __decorate([
+        InputBoolean()
+    ], BaseInputComponent.prototype, "keepFocussed", void 0);
     __decorate([
         InputBoolean()
     ], BaseInputComponent.prototype, "halfWidth", void 0);
@@ -6256,7 +6260,7 @@
     InputTextComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'co-input-text',
-                    template: "\n    <div class=\"input-text-wrapper\" overlayParent #parentForOverlay=\"overlayParent\">\n      <co-icon *ngIf=\"leftIcon || leftIconData\" class=\"input-text-left-icon\" [icon]=\"leftIcon\" [iconData]=\"leftIconData\"\n               (click)=\"handleLeftIconClick($event)\" (mousedown)=\"handleLeftIconMouseDown($event)\"\n               (mouseup)=\"handleLeftIconMouseUp($event)\"></co-icon>\n      <div *ngIf=\"leftIcon || leftIconData\" class=\"spacer left-icon\"></div>\n      <div class=\"input-wrapper\">\n        <label *ngIf=\"showPlaceholderOnFocus || (!showPlaceholderOnFocus && !hasValue && !focused)\"\n               [textContent]=\"placeholder\"></label>\n        <input #input\n               [ngClass]=\"align\"\n               [hidden]=\"useContent\"\n               [type]=\"digitsOnly ? 'number' : type\"\n               [pattern]=\"type === 'date' ? pattern : undefined\"\n               [ngModel]=\"model\"\n               [min]=\"(type === 'number' || type === 'date') && this.min ? this.min : undefined\"\n               [max]=\"(type === 'number' || type === 'date') && this.max ? this.max : undefined\"\n               [readonly]=\"readonly\"\n               [required]=\"required\"\n               (ngModelChange)=\"modelChange.emit($event)\"\n               (keydown)=\"digitsOnly ? excludeNonDigitChars($event) : true\"\n        >\n        <co-icon [class.show]=\"showClearButton && hasValue && focused && !readonly\" class=\"input-text-clear-button\" [icon]=\"icons.CrossSkinny\" (click)=\"clearInput($event)\"></co-icon>\n        <div class=\"required-indicator\"></div>\n      </div>\n      <div *ngIf=\"rightIcon || rightIconData\" class=\"spacer right-icon\"></div>\n      <co-icon *ngIf=\"rightIcon || rightIconData\" class=\"input-text-right-icon\" [icon]=\"rightIcon\" [iconData]=\"rightIconData\"\n               (click)=\"handleRightIconClick($event)\" (mousedown)=\"handleRightIconMouseDown($event)\" (mouseup)=\"handleRightIconMouseUp($event)\"></co-icon>\n    </div>\n    <!--\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    -->\n  ",
+                    template: "\n    <div class=\"input-text-wrapper\" overlayParent #parentForOverlay=\"overlayParent\">\n      <co-icon *ngIf=\"leftIcon || leftIconData\" class=\"input-text-left-icon\" [icon]=\"leftIcon\" [iconData]=\"leftIconData\"\n               (click)=\"handleLeftIconClick($event)\" (mousedown)=\"handleLeftIconMouseDown($event)\"\n               (mouseup)=\"handleLeftIconMouseUp($event)\"></co-icon>\n      <div *ngIf=\"leftIcon || leftIconData\" class=\"spacer left-icon\"></div>\n      <div class=\"input-wrapper\">\n        <label *ngIf=\"showPlaceholderOnFocus || (!showPlaceholderOnFocus && !hasValue && !focused)\"\n               [textContent]=\"placeholder\"></label>\n        <input #input\n               [class.input-input-hidden]=\"useContent\"\n               [ngClass]=\"align\"\n               [type]=\"digitsOnly ? 'number' : type\"\n               [pattern]=\"type === 'date' ? pattern : undefined\"\n               [ngModel]=\"model\"\n               [min]=\"(type === 'number' || type === 'date') && this.min ? this.min : undefined\"\n               [max]=\"(type === 'number' || type === 'date') && this.max ? this.max : undefined\"\n               [readonly]=\"readonly\"\n               [required]=\"required\"\n               (ngModelChange)=\"modelChange.emit($event)\"\n               (keydown)=\"digitsOnly ? excludeNonDigitChars($event) : true\"\n        >\n        <ng-container *ngIf=\"useContent\">\n          <div class=\"input-content-wrapper\">\n            <ng-content></ng-content>\n          </div>\n        </ng-container>\n        <co-icon [class.show]=\"showClearButton && hasValue && focused && !readonly\" class=\"input-text-clear-button\" [icon]=\"icons.CrossSkinny\" (click)=\"clearInput($event)\"></co-icon>\n        <div class=\"required-indicator\"></div>\n      </div>\n      <div *ngIf=\"rightIcon || rightIconData\" class=\"spacer right-icon\"></div>\n      <co-icon *ngIf=\"rightIcon || rightIconData\" class=\"input-text-right-icon\" [icon]=\"rightIcon\" [iconData]=\"rightIconData\"\n               (click)=\"handleRightIconClick($event)\" (mousedown)=\"handleRightIconMouseDown($event)\" (mouseup)=\"handleRightIconMouseUp($event)\"></co-icon>\n    </div>\n    <!--\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    -->\n  ",
                     providers: [
                         OverlayService, {
                             provide: SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME,
@@ -10882,12 +10886,14 @@
     ];
 
     var ListOfValuesPopupComponent = /** @class */ (function () {
-        function ListOfValuesPopupComponent() {
+        function ListOfValuesPopupComponent(_elementRef) {
+            this._elementRef = _elementRef;
             this.multiselect = false;
             this.displayField = 'description';
             this.searchDisabled = false;
             this.modelChange = new i0.EventEmitter();
             this.closePopup = new i0.EventEmitter();
+            this.keyDown = new i0.EventEmitter();
             this.viewModels = [];
             this.viewModelsMain = [];
             this._collection = [];
@@ -10973,8 +10979,14 @@
                     case KeyboardKey.SpaceBar:
                         if (this.highLightModel) {
                             this.selectViewModel(this.highLightModel, false);
-                            return false;
                         }
+                        else {
+                            this.keyDown.next(event);
+                        }
+                        return false;
+                    default:
+                        this.keyDown.next(event);
+                        return true;
                 }
             }
         };
@@ -11047,6 +11059,9 @@
             if (!this.multiselect) {
                 this.selectViewModel(nextModel, false);
             }
+            else {
+                this._scrollIntoView();
+            }
         };
         ListOfValuesPopupComponent.prototype._prepareViewModelsMain = function () {
             var _this = this;
@@ -11075,7 +11090,8 @@
                 return;
             }
             var offsetHeight = activeItem.offsetHeight, offsetTop = activeItem.offsetTop;
-            var parentOffsetHeight = scrollParent.offsetHeight, scrollTop = scrollParent.scrollTop;
+            var parentOffsetHeight = scrollParent.offsetHeight, scrollTop = scrollParent.scrollTop, parentOffsetTop = scrollParent.offsetTop;
+            offsetTop = offsetTop - parentOffsetTop;
             var isAbove = offsetTop < scrollTop;
             var isBelow = offsetTop + offsetHeight > scrollTop + parentOffsetHeight;
             if (isAbove) {
@@ -11090,10 +11106,13 @@
     ListOfValuesPopupComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'co-list-of-values-popup',
-                    template: "\n        <div class=\"lov-options\" [overlay]=\"parentForOverlay\" [inheritWidth]=\"true\" [ngClass]=\"customCssClass\" id=\"lov-popup\"\n             [tabIndex]=\"-1\" role=\"listbox\"\n             (clickOutside)=\"closePopup.emit($event)\">\n            <co-input-search *ngIf=\"multiselect\" \n                             [(model)]=\"searchTerm\"\n                             [placeholder]=\"searchPlaceholder\"\n                             (keydown)=\"handleInputKeyDown($event)\"\n                             (modelChange)=\"filterViewModels()\"></co-input-search>\n            <ul class=\"dropdown-list\" #dropDownList>\n                <li #lovItem *ngFor=\"let viewModel of viewModels; let index = index\" [class.selected]=\"viewModel === highLightModel\"\n                    (click)=\"selectViewModel(viewModel, false)\" role=\"option\">\n                    <ng-container *ngIf=\"!multiselect\">\n                        <span class=\"lov-options-text\" [textContent]=\"viewModel.model[displayField]\"></span>\n                    </ng-container>\n                    <ng-container *ngIf=\"multiselect\">\n                        <co-input-checkbox [model]=\"viewModel.checked\" (modelChange)=\"selectViewModel(viewModel, false)\"></co-input-checkbox>\n                        <span class=\"lov-options-text\" [textContent]=\"viewModel.model[displayField]\"></span>\n                    </ng-container>\n                </li>\n            </ul>\n        </div>\n    ",
+                    template: "\n        <div class=\"lov-options\" [overlay]=\"parentForOverlay\" [inheritWidth]=\"true\" [ngClass]=\"customCssClass\" id=\"lov-popup\"\n             role=\"listbox\" [tabindex]=\"-1\"\n             (clickOutside)=\"closePopup.emit($event)\">\n            <co-input-search *ngIf=\"multiselect\"\n                             tabindex=\"-1\"\n                             [(model)]=\"searchTerm\"\n                             [placeholder]=\"searchPlaceholder\"\n                             (keydown)=\"handleInputKeyDown($event)\"\n                             (modelChange)=\"filterViewModels()\"></co-input-search>\n            <ul class=\"dropdown-list\" #dropDownList>\n                <li #lovItem *ngFor=\"let viewModel of viewModels; let index = index\" [class.selected]=\"viewModel === highLightModel\"\n                    (click)=\"selectViewModel(viewModel, !multiselect)\" role=\"option\">\n                    <ng-container *ngIf=\"!multiselect\">\n                        <span class=\"lov-options-text\" [textContent]=\"viewModel.model[displayField]\"></span>\n                    </ng-container>\n                    <ng-container *ngIf=\"multiselect\">\n                        <co-input-checkbox [model]=\"viewModel.checked\" (modelChange)=\"selectViewModel(viewModel, false)\"></co-input-checkbox>\n                        <span class=\"lov-options-text\" [textContent]=\"viewModel.model[displayField]\"></span>\n                    </ng-container>\n                </li>\n            </ul>\n        </div>\n    ",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
+    ListOfValuesPopupComponent.ctorParameters = function () { return [
+        { type: i0.ElementRef }
+    ]; };
     ListOfValuesPopupComponent.propDecorators = {
         lovItems: [{ type: i0.ViewChildren, args: ['lovItem', { read: i0.ElementRef },] }],
         dropDownList: [{ type: i0.ViewChild, args: ['dropDownList', { read: i0.ElementRef },] }],
@@ -11108,6 +11127,7 @@
         collection: [{ type: i0.Input }],
         modelChange: [{ type: i0.Output }],
         closePopup: [{ type: i0.Output }],
+        keyDown: [{ type: i0.Output }],
         showClass: [{ type: i0.HostBinding, args: ['class.co-list-of-values-popup',] }]
     };
 
@@ -11119,7 +11139,6 @@
             _this.multiselect = false;
             _this.displayField = 'description';
             _this.searchDisabled = false;
-            _this.closeAfterOptionChosen = true;
             _this.isSelectOpen = false;
             _this.state = 'default';
             _this.selectedModels = [];
@@ -11158,6 +11177,9 @@
             if (this._lovPopupComponentRef) {
                 this._lovPopupComponentRef.instance.searchTerm = model;
             }
+            if (!this.selectedModel && model) {
+                this.openPopup();
+            }
             this.selectedModel = model;
         };
         ListOfValuesComponent.prototype.handleInputKeyDown = function (event) {
@@ -11216,8 +11238,10 @@
                 collection: this.collection
             }, {
                 modelChange: function (value) { return _this.optionChosen(value); },
-                closePopup: function () { return _this.closePopup(); }
+                closePopup: function () { return _this.closePopup(); },
+                keyDown: function (event) { return _this.handleInputKeyDown(event); }
             });
+            this.keepFocussed = true;
         };
         ListOfValuesComponent.prototype.removeOptionFromModel = function (chip) {
             if (this.multiselect) {
@@ -11234,15 +11258,13 @@
                 }
                 else {
                     this.selectedModel = option[this.displayField];
-                    if (this.closeAfterOptionChosen) {
-                        this.toggleSelect();
-                    }
                 }
             }
             this.model = option;
             this.modelChange.emit(this.model);
         };
         ListOfValuesComponent.prototype.closePopup = function () {
+            this.keepFocussed = false;
             this.isSelectOpen = false;
             this.overlayService.removeComponent(this._lovPopupComponentRef);
             this._lovPopupComponentRef = undefined;
@@ -11288,7 +11310,7 @@
     ListOfValuesComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'co-list-of-values',
-                    template: "\n        <co-input-text aria-haspopup=\"listbox\" [attr.aria-expanded]=\"isSelectOpen\" aria-controls=\"lov-popup\" role=\"combobox\"\n                       class=\"no-focus-line\"\n                       overlayParent\n                       #parentForOverlay=\"overlayParent\" type=\"text\" [id]=\"label\"\n                       [model]=\"multiselect ? selectedModels : selectedModel\"\n                       [placeholder]=\"label\"\n                       [readonly]=\"readonly\"\n                       [disabled]=\"disabled\"\n                       [required]=\"required\"\n                       [noClickFocus]=\"false\"\n                       [leftIconData]=\"leftIconData\"\n                       [rightIcon]=\"isSelectOpen ? icons.ChevronUpRegular : icons.ChevronDownRegular\"\n                       [showClearButton]=\"true\"\n                       [useContent]=\"multiselect\"\n                       (modelChange)=\"handleInputModelChange($event)\"\n                       (click)=\"openPopup()\"\n                       (rightIconClick)=\"toggleSelect()\"\n                       (keydown)=\"handleInputKeyDown($event)\"\n                       (clearIconClick)=\"clearModel($event)\"\n                       (blur)=\"checkModel()\"\n        >\n        </co-input-text>\n        <ng-container *ngIf=\"multiselect\">\n            <div class=\"multiselect-chips-wrapper\">\n                <div class=\"chips\" *ngFor=\"let chip of model\">\n                    <span class=\"chips-description\" [textContent]=\"chip[displayField]\"></span>\n                    <co-icon class=\"remove-chip-icon\" [icon]=\"icons.CrossSkinny\" (click)=\"removeOptionFromModel(chip)\"></co-icon>\n                </div>\n            </div>\n        </ng-container>\n    ",
+                    template: "\n        <co-input-text aria-haspopup=\"listbox\" [attr.aria-expanded]=\"isSelectOpen\" aria-controls=\"lov-popup\" role=\"combobox\"\n                       class=\"no-focus-line\"\n                       overlayParent\n                       #parentForOverlay=\"overlayParent\" type=\"text\" [id]=\"label\"\n                       [model]=\"multiselect ? selectedModels : selectedModel\"\n                       [placeholder]=\"label\"\n                       [readonly]=\"readonly\"\n                       [disabled]=\"disabled\"\n                       [required]=\"required\"\n                       [noClickFocus]=\"false\"\n                       [leftIconData]=\"leftIconData\"\n                       [rightIcon]=\"isSelectOpen ? icons.ChevronUpRegular : icons.ChevronDownRegular\"\n                       [showClearButton]=\"true\"\n                       [useContent]=\"multiselect\"\n                       [customHeight]=\"multiselect\"\n                       [keepFocussed]=\"keepFocussed\"\n                       (modelChange)=\"handleInputModelChange($event)\"\n                       (click)=\"openPopup()\"\n                       (rightIconClick)=\"toggleSelect()\"\n                       (keydown)=\"handleInputKeyDown($event)\"\n                       (clearIconClick)=\"clearModel($event)\"\n                       (blur)=\"checkModel()\"\n        >\n            <ng-container *ngIf=\"multiselect\">\n                <div class=\"multiselect-chips-wrapper\">\n                    <div class=\"chips\" *ngFor=\"let chip of model\">\n                        <span class=\"chips-description\" [textContent]=\"chip[displayField]\"></span>\n                        <co-icon class=\"remove-chip-icon\" [icon]=\"icons.CrossSkinny\" (click)=\"removeOptionFromModel(chip)\"></co-icon>\n                    </div>\n                </div>\n            </ng-container>\n        </co-input-text>\n    ",
                     providers: [
                         OverlayService
                     ],
@@ -11306,7 +11328,6 @@
         label: [{ type: i0.Input }],
         customCssClass: [{ type: i0.Input }],
         searchDisabled: [{ type: i0.Input }],
-        closeAfterOptionChosen: [{ type: i0.Input }],
         showClass: [{ type: i0.HostBinding, args: ['class.co-list-of-values',] }]
     };