@colijnit/corecomponents_v12 12.0.19 → 12.0.20

package/bundles/colijnit-corecomponents_v12.umd.js

@@ -3101,7 +3101,9 @@
     }
 
     var ValidationErrorComponent = /** @class */ (function () {
-        function ValidationErrorComponent() {
+        function ValidationErrorComponent(icons) {
+            this.icons = icons;
+            this.Icons = exports.CoreComponentsIcon;
         }
         ValidationErrorComponent.prototype.showClass = function () {
             return true;
@@ -3111,13 +3113,18 @@
     ValidationErrorComponent.decorators = [
         { type: core.Component, args: [{
                     selector: "co-validation-error",
-                    template: "\n    <div class=\"validation-error-content\">\n        <div class=\"validation-error-message\" [textContent]=\"error\"></div>\n    </div>\n  ",
+                    template: "\n    <div class=\"validation-error-content\">\n      <co-icon [iconData]=\"icons.getIcon(Icons.InformationRoundOpen)\"></co-icon>\n        <div class=\"validation-error-message\" [textContent]=\"error\"></div>\n    </div>\n  ",
                     animations: [],
                     encapsulation: core.ViewEncapsulation.None
                 },] }
     ];
+    ValidationErrorComponent.ctorParameters = function () { return [
+        { type: IconCacheService }
+    ]; };
     ValidationErrorComponent.propDecorators = {
         error: [{ type: core.Input }],
+        top: [{ type: core.HostBinding, args: ['style.top.px',] }, { type: core.Input }],
+        left: [{ type: core.HostBinding, args: ['style.left.px',] }, { type: core.Input }],
         showClass: [{ type: core.HostBinding, args: ['class.co-validation-error',] }]
     };
 
@@ -3435,27 +3442,27 @@
             enumerable: false,
             configurable: true
         });
-        BaseInputComponent.prototype.showValidationError = function (error) {
-            if (this.validationErrorContainer) {
-                if (this._errorValidationComponent) {
-                    this._clearErrorComponent();
-                }
-                var componentFactory = this.componentFactoryResolver.resolveComponentFactory(ValidationErrorComponent);
-                this._errorValidationComponent = this.validationErrorContainer.createComponent(componentFactory);
-                this._errorValidationComponent.instance.error = error;
-            }
-        };
         BaseInputComponent.prototype.ngOnInit = function () {
             var _this = this;
             this._modelChangeSub = this.modelChange.subscribe(function (val) {
                 _this.model = val;
             });
+            var iOptions = {
+                trackVisibility: true,
+                // 🆕 Set a minimum delay between notifications
+                delay: 100,
+                // root: document,
+                // rootMargin: "1px",
+                threshold: 1
+            };
+            this.intersectionObserver = new IntersectionObserver(function (entries, observer) { return _this._handleElementPositionChange(entries, observer); }, iOptions);
             // if (this.speechInput) {
             //     this._subscribeToSpeechInput();
             // }
         };
         BaseInputComponent.prototype.ngAfterViewInit = function () {
             var _this = this;
+            this._prepareInput();
             this._updateControlValidatorsAndOwnFlags();
             this._addOrRemoveSelfFromForm();
             if (this.formComponent) {
@@ -3469,6 +3476,11 @@
             }
         };
         BaseInputComponent.prototype.ngOnDestroy = function () {
+            var _this = this;
+            if (this.input) {
+                this.input.removeEventListener('blur', function () { return _this.doBlur(); });
+                this.input.removeEventListener('focus', function () { return _this.doFocus(); });
+            }
             this._destroyed = true;
             this._clearErrorComponent();
             // if (this.tooltipManager && this.elementRef) {
@@ -3492,7 +3504,21 @@
             // this._removeSelfFromForm();
             this.elementRef = undefined;
             this.changeDetector = undefined;
-            // this.input = undefined;
+            this.input = undefined;
+        };
+        BaseInputComponent.prototype.showValidationError = function (error) {
+            if (this.validationErrorContainer) {
+                if (this._errorValidationComponent) {
+                    this._clearErrorComponent();
+                }
+                var clientRect = this.elementRef.nativeElement.getBoundingClientRect();
+                var componentFactory = this.componentFactoryResolver.resolveComponentFactory(ValidationErrorComponent);
+                this._errorValidationComponent = this.validationErrorContainer.createComponent(componentFactory);
+                this._errorValidationComponent.instance.top = clientRect.bottom;
+                this._errorValidationComponent.instance.left = clientRect.left;
+                this._errorValidationComponent.instance.error = error;
+                this.intersectionObserver.observe(this.elementRef.nativeElement);
+            }
         };
         /**
          * Emits a modelChange event with given value, indicating that the model of this form input
@@ -3528,9 +3554,13 @@
                 this.focused = true;
             }
         };
+        BaseInputComponent.prototype.doFocus = function () {
+            this.focused = true;
+            this.focus.next();
+        };
         BaseInputComponent.prototype.doBlur = function () {
-            this.input.blur();
             this.focused = false;
+            this.blur.next();
         };
         BaseInputComponent.prototype.detectChanges = function () {
             if (!this._destroyed) {
@@ -3583,7 +3613,7 @@
             if (notNill(this.forcedMaxLength) || maxLength === this._maxLength) {
                 return;
             }
-            if (maxLength > 0) { // not maxLength is 0
+            if (!isNaN(maxLength)) {
                 this._maxLength = maxLength;
                 this._updateControlValidatorsAndOwnFlags();
             }
@@ -3648,6 +3678,9 @@
                     this._errorValidationComponent.destroy();
                     this._errorValidationComponent = undefined;
                 }
+                if (this.elementRef && this.elementRef.nativeElement) {
+                    this.intersectionObserver.unobserve(this.elementRef.nativeElement);
+                }
             }
         };
         // whether this.ngModel.control has safe access
@@ -3663,7 +3696,7 @@
             }
         };
         BaseInputComponent.prototype._setNativeMaxLength = function (maxlength) {
-            if (this.input) {
+            if (this.input && !isNaN(maxlength)) {
                 this.input.maxLength = maxlength;
             }
         };
@@ -3709,6 +3742,34 @@
                 this.formComponent.addFormInput(this.myFormInputInstance ? this.myFormInputInstance : this);
             }
         };
+        BaseInputComponent.prototype._prepareInput = function () {
+            var _this = this;
+            if (this.elementRef && this.elementRef.nativeElement) {
+                //try to find input element
+                this.input = this._findInputNode(this.elementRef.nativeElement.children);
+                if (this.input) {
+                    this.input.addEventListener('blur', function () { return _this.doBlur(); });
+                    this.input.addEventListener('focus', function () { return _this.doFocus(); });
+                }
+            }
+        };
+        BaseInputComponent.prototype._findInputNode = function (nodes) {
+            for (var i = 0; i < nodes.length; i++) {
+                var node = nodes[i];
+                if (node instanceof HTMLInputElement || node instanceof HTMLTextAreaElement) {
+                    return node;
+                }
+                else if (node.children.length > 0) {
+                    return this._findInputNode(node.children);
+                }
+            }
+        };
+        BaseInputComponent.prototype._handleElementPositionChange = function (entries, observer) {
+            if (this._errorValidationComponent && entries && entries.length > 0) {
+                this._errorValidationComponent.instance.top = entries[0].boundingClientRect.bottom;
+                this._errorValidationComponent.instance.left = entries[0].boundingClientRect.left;
+            }
+        };
         return BaseInputComponent;
     }());
     BaseInputComponent.BaseFormInputComponentIndex = 0;
@@ -3726,6 +3787,7 @@
     ]; };
     BaseInputComponent.propDecorators = {
         validationErrorContainer: [{ type: core.ViewChild, args: ["validationError", { read: core.ViewContainerRef },] }],
+        _ngModel: [{ type: core.ViewChild, args: [forms.NgModel, { static: true },] }],
         model: [{ type: core.Input }],
         label: [{ type: core.Input }],
         noValidation: [{ type: core.Input }],
@@ -3755,7 +3817,6 @@
         modelChange: [{ type: core.Output }],
         userModelChange: [{ type: core.Output }],
         hiddenChange: [{ type: core.Output }],
-        _ngModel: [{ type: core.ViewChild, args: [forms.NgModel, { static: true },] }],
         focused: [{ type: core.HostBinding, args: ["class.cc-input-focused",] }],
         formInput: [{ type: core.HostBinding, args: ["class.form-input",] }],
         customWidth: [{ type: core.Input }, { type: core.HostBinding, args: ["class.custom-width",] }],
@@ -5287,7 +5348,7 @@
     InputTextComponent.decorators = [
         { type: core.Component, args: [{
                     selector: "co-input-text",
-                    template: "\n    <label [textContent]=\"placeholder\"></label>\n    <input [type]=\"type\"\n           [ngModel]=\"model\"\n           [readonly]=\"readonly\"\n           [required]=\"required\"\n           (ngModelChange)=\"modelChange.emit($event)\"\n           (focus)=\"focused = true\"\n           (blur)=\"focused = false\"\n    >\n    <div class=\"required-indicator\"></div>\n    <ng-template #validationError></ng-template>\n  ",
+                    template: "\n    <label [textContent]=\"placeholder\"></label>\n    <input #input\n           [type]=\"type\"\n           [ngModel]=\"model\"\n           [readonly]=\"readonly\"\n           [required]=\"required\"\n           (ngModelChange)=\"modelChange.emit($event)\"\n    >\n    <div class=\"required-indicator\"></div>\n    <ng-template #validationError></ng-template>\n  ",
                     providers: [{
                             provide: COMPONENT_INTERFACE_NAME,
                             useExisting: core.forwardRef(function () { return InputTextComponent; })
@@ -5617,7 +5678,8 @@
     ValidationErrorModule.decorators = [
         { type: core.NgModule, args: [{
                     imports: [
-                        common.CommonModule
+                        common.CommonModule,
+                        IconModule
                     ],
                     declarations: [
                         ValidationErrorComponent
@@ -5764,7 +5826,7 @@
     InputTextareaComponent.decorators = [
         { type: core.Component, args: [{
                     selector: "co-input-textarea",
-                    template: "\n    <label [textContent]=\"placeholder\"></label>\n    <textarea type=\"textarea\"\n              [ngModel]=\"model\"\n              [readonly]=\"readonly\"\n              [required]=\"required\"\n              (ngModelChange)=\"modelChange.emit($event)\"\n              (focus)=\"focused = true\"\n              (blur)=\"focused = false\"\n    ></textarea>\n    <div class=\"required-indicator\"></div>\n    <ng-template #validationError></ng-template>\n  ",
+                    template: "\n    <label [textContent]=\"placeholder\"></label>\n    <textarea\n      #input\n      type=\"textarea\"\n      [ngModel]=\"model\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      (ngModelChange)=\"modelChange.emit($event)\"\n    ></textarea>\n    <div class=\"required-indicator\"></div>\n    <ng-template #validationError></ng-template>\n  ",
                     providers: [{
                             provide: COMPONENT_INTERFACE_NAME,
                             useExisting: core.forwardRef(function () { return InputTextareaComponent; })