@leanix/components 0.2.110 → 0.2.111

package/bundles/leanix-components.umd.js

@@ -3607,6 +3607,36 @@
                     args: ['itemTemplate']
                 }] } });
 
+    var ErrorMessageComponent = /** @class */ (function () {
+        function ErrorMessageComponent(cd) {
+            this.cd = cd;
+        }
+        Object.defineProperty(ErrorMessageComponent.prototype, "key", {
+            set: function (value) {
+                if (value !== this._key) {
+                    this._key = value;
+                    this.cd.detectChanges();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return ErrorMessageComponent;
+    }());
+    ErrorMessageComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: ErrorMessageComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ErrorMessageComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: ErrorMessageComponent, selector: "lx-error-message", inputs: { key: "key" }, ngImport: i0__namespace, template: "<div class=\"error\" *ngIf=\"_key\">{{ _key | translate }}</div>", isInline: true, styles: [".error{color:#f96464;padding:4px}"], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i1__namespace$2.TranslatePipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: ErrorMessageComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'lx-error-message',
+                        template: "<div class=\"error\" *ngIf=\"_key\">{{ _key | translate }}</div>",
+                        styleUrls: ['./error-message.component.scss'],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { key: [{
+                    type: i0.Input
+                }] } });
+
     var FormErrorComponent = /** @class */ (function () {
         function FormErrorComponent() {
             this.translationKeys = [];
@@ -5609,6 +5639,114 @@
                     type: i0.Output
                 }] } });
 
+    var FORM_CONTROL_ERROR_NAMESPACE = new i0.InjectionToken('FORM_CONTROL_ERROR_NAMESPACE');
+    var FORM_CONTROL_ERROR_DISPLAY_STRATEGY = new i0.InjectionToken('FORM_CONTROL_ERROR_DISPLAY_STRATEGY');
+    var provideFormControlErrorNamespace = function (namespace) { return ({
+        provide: FORM_CONTROL_ERROR_NAMESPACE,
+        useValue: namespace
+    }); };
+    var provideFormControlErrorDisplayStrategy = function (fn) { return ({
+        provide: FORM_CONTROL_ERROR_DISPLAY_STRATEGY,
+        useValue: fn
+    }); };
+    var FormErrorDirective = /** @class */ (function () {
+        function FormErrorDirective(viewContainer, componentFactoryResolver, ngControl, namespace, strategy) {
+            this.viewContainer = viewContainer;
+            this.componentFactoryResolver = componentFactoryResolver;
+            this.ngControl = ngControl;
+            this.namespace = namespace;
+            this.strategy = strategy;
+        }
+        Object.defineProperty(FormErrorDirective.prototype, "control", {
+            get: function () {
+                var _a;
+                return ((_a = this.ngControl) === null || _a === void 0 ? void 0 : _a.control) || this.ctrl;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(FormErrorDirective.prototype, "name", {
+            get: function () {
+                var _a;
+                return ((_a = this.ngControl) === null || _a === void 0 ? void 0 : _a.name) || this.controlName;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        FormErrorDirective.prototype.ngOnInit = function () {
+            var _this = this;
+            var control = this.control;
+            if (isAbstractControl(control)) {
+                this.subscritpion = control.valueChanges
+                    .pipe(operators.startWith(control.value), operators.map(function () { return (_this.strategy ? _this.strategy(control) : true); }))
+                    .subscribe(function (display) {
+                    var errors = control.errors;
+                    if (errors && display) {
+                        var firstErrorKey = Object.keys(errors)[0];
+                        var translationKey = _this.buildTranslationKey(firstErrorKey);
+                        _this.setError(translationKey);
+                    }
+                    else if (_this.ref) {
+                        _this.setError();
+                    }
+                });
+            }
+        };
+        FormErrorDirective.prototype.buildTranslationKey = function (errorKey) {
+            if (this.control) {
+                return (this.namespace || 'form') + ".errors." + (this.name ? this.name + "." : '') + errorKey;
+            }
+            else {
+                return '';
+            }
+        };
+        FormErrorDirective.prototype.setError = function (key) {
+            if (!this.ref) {
+                var factory = this.componentFactoryResolver.resolveComponentFactory(ErrorMessageComponent);
+                this.ref = this.viewContainer.createComponent(factory);
+            }
+            this.ref.instance.key = key;
+        };
+        FormErrorDirective.prototype.ngOnDestroy = function () {
+            if (this.subscritpion) {
+                this.subscritpion.unsubscribe();
+            }
+        };
+        return FormErrorDirective;
+    }());
+    FormErrorDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: FormErrorDirective, deps: [{ token: i0__namespace.ViewContainerRef }, { token: i0__namespace.ComponentFactoryResolver }, { token: i3__namespace$1.NgControl, optional: true, self: true }, { token: FORM_CONTROL_ERROR_NAMESPACE, optional: true }, { token: FORM_CONTROL_ERROR_DISPLAY_STRATEGY, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    FormErrorDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.1.4", type: FormErrorDirective, selector: "[lxFormError]", inputs: { ctrl: ["lxFormError", "ctrl"], controlName: "controlName" }, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: FormErrorDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: '[lxFormError]'
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: i0__namespace.ViewContainerRef }, { type: i0__namespace.ComponentFactoryResolver }, { type: i3__namespace$1.NgControl, decorators: [{
+                            type: i0.Optional
+                        }, {
+                            type: i0.Self
+                        }] }, { type: undefined, decorators: [{
+                            type: i0.Optional
+                        }, {
+                            type: i0.Inject,
+                            args: [FORM_CONTROL_ERROR_NAMESPACE]
+                        }] }, { type: undefined, decorators: [{
+                            type: i0.Optional
+                        }, {
+                            type: i0.Inject,
+                            args: [FORM_CONTROL_ERROR_DISPLAY_STRATEGY]
+                        }] }];
+        }, propDecorators: { ctrl: [{
+                    type: i0.Input,
+                    args: ['lxFormError']
+                }], controlName: [{
+                    type: i0.Input
+                }] } });
+    function isAbstractControl(ctrl) {
+        return !!ctrl;
+    }
+
     var FilterSelectionPipe = /** @class */ (function () {
         function FilterSelectionPipe() {
         }
@@ -5770,7 +5908,9 @@
             SortingDropdownComponent,
             SortingDropdownTriggerComponent,
             InputComponent,
-            FormatNumberPipe], imports: [i2.CommonModule,
+            FormatNumberPipe,
+            FormErrorDirective,
+            ErrorMessageComponent], imports: [i2.CommonModule,
             i3$3.DragDropModule,
             i3$2.FormsModule,
             i3$2.ReactiveFormsModule, i1__namespace$2.TranslateModule, i1$3.DatepickerModule,
@@ -5810,7 +5950,9 @@
             SliderToggleComponent,
             SortingDropdownComponent,
             SortingDropdownTriggerComponent,
-            FormatNumberPipe] });
+            FormatNumberPipe,
+            FormErrorDirective,
+            ErrorMessageComponent] });
     LxFormsModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: LxFormsModule, imports: [[
                 i2.CommonModule,
                 i3$3.DragDropModule,
@@ -5861,7 +6003,9 @@
                             SortingDropdownComponent,
                             SortingDropdownTriggerComponent,
                             InputComponent,
-                            FormatNumberPipe
+                            FormatNumberPipe,
+                            FormErrorDirective,
+                            ErrorMessageComponent
                         ],
                         imports: [
                             i2.CommonModule,
@@ -5909,7 +6053,9 @@
                             SliderToggleComponent,
                             SortingDropdownComponent,
                             SortingDropdownTriggerComponent,
-                            FormatNumberPipe
+                            FormatNumberPipe,
+                            FormErrorDirective,
+                            ErrorMessageComponent
                         ]
                     }]
             }] });
@@ -6804,9 +6950,13 @@
     exports.ENTER = ENTER;
     exports.ESCAPE = ESCAPE;
     exports.EllipsisComponent = EllipsisComponent;
+    exports.ErrorMessageComponent = ErrorMessageComponent;
+    exports.FORM_CONTROL_ERROR_DISPLAY_STRATEGY = FORM_CONTROL_ERROR_DISPLAY_STRATEGY;
+    exports.FORM_CONTROL_ERROR_NAMESPACE = FORM_CONTROL_ERROR_NAMESPACE;
     exports.FilterSelectionPipe = FilterSelectionPipe;
     exports.FilterTermPipe = FilterTermPipe;
     exports.FormErrorComponent = FormErrorComponent;
+    exports.FormErrorDirective = FormErrorDirective;
     exports.FormatNumberPipe = FormatNumberPipe;
     exports.GLOBAL_TRANSLATION_OPTIONS = GLOBAL_TRANSLATION_OPTIONS;
     exports.HighlightRangePipe = HighlightRangePipe;
@@ -6879,6 +7029,8 @@
     exports.isValidHexColor = isValidHexColor;
     exports.isValidX = isValidX;
     exports.isValidY = isValidY;
+    exports.provideFormControlErrorDisplayStrategy = provideFormControlErrorDisplayStrategy;
+    exports.provideFormControlErrorNamespace = provideFormControlErrorNamespace;
     exports.shorthandHexHandle = shorthandHexHandle;
 
     Object.defineProperty(exports, '__esModule', { value: true });