@leanix/components 0.2.109 → 0.2.113

package/bundles/leanix-components.umd.js

@@ -256,7 +256,7 @@
         return CollapsibleComponent;
     }());
     CollapsibleComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: CollapsibleComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    CollapsibleComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: CollapsibleComponent, selector: "lx-collapsible", inputs: { disableSectionToggle: "disableSectionToggle", hideSectionToggle: "hideSectionToggle", toggleSize: "toggleSize", toggleTitle: "toggleTitle", collapsed: "collapsed" }, outputs: { collapsedChange: "collapsedChange" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.notClickable": "this.notClickable" } }, ngImport: i0__namespace, template: "<button\n  *ngIf=\"!hideSectionToggle\"\n  lx-button\n  mode=\"link\"\n  [title]=\"toggleTitle\"\n  [size]=\"toggleSize\"\n  class=\"sectionToggle\"\n  type=\"button\"\n  [attr.disabled]=\"disableSectionToggle ? true : null\"\n  [square]=\"true\"\n  (click)=\"onToggleSection($event)\"\n>\n  <i class=\"far fa-angle-down\" [class.collapsed]=\"collapsed\"></i>\n</button>\n<div class=\"collapsible-title\">\n  <ng-content></ng-content>\n</div>\n", styles: [":root{--lx-color-danger:#f96464;--lx-color-grey80:#c2c9d6;--lx-color-grey90:#e1e5eb}:host{position:relative;cursor:pointer;display:flex;border-bottom:1px solid #e1e5eb;padding-bottom:2px;margin-bottom:4px}:host.notClickable{cursor:default}.sectionToggle{font-size:16px;width:32px}.sectionToggle .fa-angle-down{transition:transform .2s linear}.sectionToggle .fa-angle-down.collapsed{transform:rotate(-90deg)}.collapsible-title{align-self:center;width:100%}:host(.align-left) .sectionToggle{text-align:left;width:24px}"], components: [{ type: ButtonComponent, selector: "button[lx-button]", inputs: ["size", "color", "mode", "pressed", "selected", "square", "circle", "disabled", "showSpinner"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    CollapsibleComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: CollapsibleComponent, selector: "lx-collapsible", inputs: { disableSectionToggle: "disableSectionToggle", hideSectionToggle: "hideSectionToggle", toggleSize: "toggleSize", toggleTitle: "toggleTitle", collapsed: "collapsed" }, outputs: { collapsedChange: "collapsedChange" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.notClickable": "this.notClickable" } }, ngImport: i0__namespace, template: "<button\n  *ngIf=\"!hideSectionToggle\"\n  lx-button\n  mode=\"link\"\n  [title]=\"toggleTitle\"\n  [size]=\"toggleSize\"\n  class=\"sectionToggle\"\n  type=\"button\"\n  [disabled]=\"disableSectionToggle\"\n  [square]=\"true\"\n  (click)=\"onToggleSection($event)\"\n>\n  <i class=\"far fa-angle-down\" [class.collapsed]=\"collapsed\"></i>\n</button>\n<div class=\"collapsible-title\">\n  <ng-content></ng-content>\n</div>\n", styles: [":root{--lx-color-danger:#f96464;--lx-color-grey80:#c2c9d6;--lx-color-grey90:#e1e5eb}:host{position:relative;cursor:pointer;display:flex;border-bottom:1px solid #e1e5eb;padding-bottom:2px;margin-bottom:4px}:host.notClickable{cursor:default}.sectionToggle{font-size:16px;width:32px}.sectionToggle .fa-angle-down{transition:transform .2s linear}.sectionToggle .fa-angle-down.collapsed{transform:rotate(-90deg)}.collapsible-title{align-self:center;width:100%}:host(.align-left) .sectionToggle{text-align:left;width:24px}"], components: [{ type: ButtonComponent, selector: "button[lx-button]", inputs: ["size", "color", "mode", "pressed", "selected", "square", "circle", "disabled", "showSpinner"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: CollapsibleComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -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,153 @@
                     type: i0.Output
                 }] } });
 
+    var FormSubmitDirective = /** @class */ (function () {
+        function FormSubmitDirective(elementRef) {
+            var _this = this;
+            this.elementRef = elementRef;
+            this.submitted$ = new i6.BehaviorSubject(false);
+            this.subscription = i6.fromEvent(this.elementRef.nativeElement, 'submit')
+                .pipe(operators.take(1))
+                .subscribe(function () { return _this.submitted$.next(true); });
+        }
+        FormSubmitDirective.prototype.ngOnDestroy = function () {
+            if (this.subscription) {
+                this.subscription.unsubscribe();
+            }
+        };
+        return FormSubmitDirective;
+    }());
+    FormSubmitDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: FormSubmitDirective, deps: [{ token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    FormSubmitDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.1.4", type: FormSubmitDirective, selector: "[lxFormSubmit]", ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: FormSubmitDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: '[lxFormSubmit]'
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }]; } });
+
+    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, formSubmitDirective, namespace, strategy) {
+            this.viewContainer = viewContainer;
+            this.componentFactoryResolver = componentFactoryResolver;
+            this.ngControl = ngControl;
+            this.formSubmitDirective = formSubmitDirective;
+            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
+        });
+        Object.defineProperty(FormErrorDirective.prototype, "formSubmitted", {
+            get: function () {
+                return this.formSubmitDirective ? this.formSubmitDirective.submitted$ : i6.of(undefined);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        FormErrorDirective.prototype.ngOnInit = function () {
+            var _this = this;
+            var control = this.control;
+            if (isAbstractControl(control)) {
+                this.subscritpion = i6.combineLatest([control.valueChanges.pipe(operators.startWith(control.value)), this.formSubmitted])
+                    .pipe(operators.map(function (_b) {
+                    var _c = __read(_b, 2), submitted = _c[1];
+                    return submitted;
+                }), operators.map(resolveStrategy(this.strategy, control)))
+                    .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: FormSubmitDirective, host: true, optional: 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: FormSubmitDirective, decorators: [{
+                            type: i0.Optional
+                        }, {
+                            type: i0.Host
+                        }] }, { 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
+                }] } });
+    var isAbstractControl = function (ctrl) { return !!ctrl; };
+    var resolveStrategy = _.curry(function (strategy, control, submitted) { return strategy ? strategy({ control: control, submitted: submitted }) : true; });
+
     var FilterSelectionPipe = /** @class */ (function () {
         function FilterSelectionPipe() {
         }
@@ -5770,7 +5947,10 @@
             SortingDropdownComponent,
             SortingDropdownTriggerComponent,
             InputComponent,
-            FormatNumberPipe], imports: [i2.CommonModule,
+            FormatNumberPipe,
+            FormErrorDirective,
+            ErrorMessageComponent,
+            FormSubmitDirective], imports: [i2.CommonModule,
             i3$3.DragDropModule,
             i3$2.FormsModule,
             i3$2.ReactiveFormsModule, i1__namespace$2.TranslateModule, i1$3.DatepickerModule,
@@ -5810,7 +5990,10 @@
             SliderToggleComponent,
             SortingDropdownComponent,
             SortingDropdownTriggerComponent,
-            FormatNumberPipe] });
+            FormatNumberPipe,
+            FormErrorDirective,
+            FormSubmitDirective,
+            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 +6044,10 @@
                             SortingDropdownComponent,
                             SortingDropdownTriggerComponent,
                             InputComponent,
-                            FormatNumberPipe
+                            FormatNumberPipe,
+                            FormErrorDirective,
+                            ErrorMessageComponent,
+                            FormSubmitDirective
                         ],
                         imports: [
                             i2.CommonModule,
@@ -5909,7 +6095,10 @@
                             SliderToggleComponent,
                             SortingDropdownComponent,
                             SortingDropdownTriggerComponent,
-                            FormatNumberPipe
+                            FormatNumberPipe,
+                            FormErrorDirective,
+                            FormSubmitDirective,
+                            ErrorMessageComponent
                         ]
                     }]
             }] });
@@ -6804,9 +6993,14 @@
     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.FormSubmitDirective = FormSubmitDirective;
     exports.FormatNumberPipe = FormatNumberPipe;
     exports.GLOBAL_TRANSLATION_OPTIONS = GLOBAL_TRANSLATION_OPTIONS;
     exports.HighlightRangePipe = HighlightRangePipe;
@@ -6879,6 +7073,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 });