@leanix/components 0.3.112 → 0.3.114

package/fesm2020/leanix-components.mjs

@@ -2880,6 +2880,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImpor
                 type: Input
             }], code$: [] } });
 
+class MarkInvalidDirective {
+    constructor(element, renderer) {
+        this.element = element;
+        this.renderer = renderer;
+        this.lxMarkInvalid = false;
+        this.destroyed$ = new Subject();
+    }
+    ngOnInit() {
+        this.lxMarkInvalid$.pipe(takeUntil(this.destroyed$)).subscribe((invalid) => {
+            const border = invalid ? `1px solid ${getCssVariable('--lx-color-danger')}` : '';
+            this.renderer.setStyle(this.element.nativeElement, 'border', border);
+        });
+    }
+    ngOnDestroy() {
+        this.destroyed$.next();
+    }
+}
+MarkInvalidDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: MarkInvalidDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+MarkInvalidDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.1", type: MarkInvalidDirective, selector: "[lxMarkInvalid]", inputs: { lxMarkInvalid: "lxMarkInvalid" }, ngImport: i0 });
+__decorate([
+    Observe('lxMarkInvalid')
+], MarkInvalidDirective.prototype, "lxMarkInvalid$", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: MarkInvalidDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[lxMarkInvalid]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { lxMarkInvalid: [{
+                type: Input
+            }], lxMarkInvalid$: [] } });
+
 class CurrencyInputComponent {
     constructor(changeDetector) {
         this.changeDetector = changeDetector;
@@ -2889,6 +2920,7 @@ class CurrencyInputComponent {
         this.mode = 'edit';
         this.iconPosition = 'first';
         this.format = '1.2-2';
+        this.markInvalid = false;
         this.onFocusLost = new EventEmitter();
         this.onChange = new EventEmitter();
         this.showCurrencyInput = false;
@@ -2965,13 +2997,13 @@ class CurrencyInputComponent {
     }
 }
 CurrencyInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: CurrencyInputComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-CurrencyInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", type: CurrencyInputComponent, selector: "lx-currency-input", inputs: { code: "code", decimalSeparator: "decimalSeparator", placeholder: "placeholder", data: "data", disabled: "disabled", mode: "mode", fieldDefinitionType: "fieldDefinitionType", iconPosition: "iconPosition", format: "format" }, outputs: { onFocusLost: "onFocusLost", onChange: "onChange" }, providers: [
+CurrencyInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", type: CurrencyInputComponent, selector: "lx-currency-input", inputs: { code: "code", decimalSeparator: "decimalSeparator", placeholder: "placeholder", data: "data", disabled: "disabled", mode: "mode", fieldDefinitionType: "fieldDefinitionType", iconPosition: "iconPosition", format: "format", markInvalid: "markInvalid" }, outputs: { onFocusLost: "onFocusLost", onChange: "onChange" }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => CurrencyInputComponent),
             multi: true
         }
-    ], viewQueries: [{ propertyName: "currencyInput", first: true, predicate: ["currencyInput"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"mode === 'edit'\" class=\"container input-group\">\n  <div *ngIf=\"iconPosition === 'first'\" class=\"labelContainer input-group-addon\">\n    <lx-currency-symbol [code]=\"code\"></lx-currency-symbol>\n  </div>\n  <input\n    [attr.disabled]=\"disabled ? true : null\"\n    *ngIf=\"!showCurrencyInput\"\n    type=\"text\"\n    class=\"form-control currencyDisplayValue\"\n    placeholder=\"{{ placeholder }}\"\n    [value]=\"dataValue$ | async | number : format\"\n    (focus)=\"focusCurrencyInput()\"\n  />\n  <input\n    [attr.disabled]=\"disabled ? true : null\"\n    [class.hideInput]=\"!showCurrencyInput\"\n    type=\"text\"\n    inputmode=\"numeric\"\n    class=\"form-control currencyInput\"\n    name=\"inputAmount\"\n    #currencyInput\n    placeholder=\"{{ placeholder }}\"\n    [ngModel]=\"dataValue$ | async\"\n    (blur)=\"onBlur()\"\n    (ngModelChange)=\"valueChanged($event)\"\n  />\n  <div *ngIf=\"iconPosition === 'end'\" class=\"labelContainer input-group-addon\">\n    <lx-currency-symbol [code]=\"code\"></lx-currency-symbol>\n  </div>\n</div>\n<span *ngIf=\"mode === 'view'\" [class.placeholder]=\"(dataValue$ | async) === null && placeholder\">\n  <!-- Not using Angular 2 currency pipe since a lot of currency symbols are missing: https://github.com/angular/angular/issues/6724 -->\n  <lx-currency-symbol *ngIf=\"iconPosition === 'first'\" [code]=\"code\"></lx-currency-symbol>\n  {{ (dataValue$ | async | number : format) || placeholder }}\n  <lx-currency-symbol *ngIf=\"iconPosition === 'end'\" [code]=\"code\"></lx-currency-symbol>\n</span>\n", styles: [".container{width:100%!important;padding:0}.labelContainer{width:5%!important;min-width:40px}input{width:100%}.hideInput{display:none}.placeholder{color:#99a5bb}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CurrencySymbolComponent, selector: "lx-currency-symbol", inputs: ["code"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], viewQueries: [{ propertyName: "currencyInput", first: true, predicate: ["currencyInput"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"mode === 'edit'\" class=\"container input-group\">\n  <div *ngIf=\"iconPosition === 'first'\" class=\"labelContainer input-group-addon\">\n    <lx-currency-symbol [code]=\"code\"></lx-currency-symbol>\n  </div>\n  <input\n    [attr.disabled]=\"disabled ? true : null\"\n    *ngIf=\"!showCurrencyInput\"\n    type=\"text\"\n    class=\"form-control currencyDisplayValue\"\n    placeholder=\"{{ placeholder }}\"\n    [lxMarkInvalid]=\"markInvalid\"\n    [value]=\"dataValue$ | async | number : format\"\n    (focus)=\"focusCurrencyInput()\"\n  />\n  <input\n    autocomplete=\"off\"\n    [attr.disabled]=\"disabled ? true : null\"\n    [class.hideInput]=\"!showCurrencyInput\"\n    type=\"text\"\n    inputmode=\"numeric\"\n    class=\"form-control currencyInput\"\n    name=\"inputAmount\"\n    #currencyInput\n    placeholder=\"{{ placeholder }}\"\n    [ngModel]=\"dataValue$ | async\"\n    (blur)=\"onBlur()\"\n    (ngModelChange)=\"valueChanged($event)\"\n  />\n  <div *ngIf=\"iconPosition === 'end'\" class=\"labelContainer input-group-addon\">\n    <lx-currency-symbol [code]=\"code\"></lx-currency-symbol>\n  </div>\n</div>\n<span *ngIf=\"mode === 'view'\" [class.placeholder]=\"(dataValue$ | async) === null && placeholder\">\n  <!-- Not using Angular 2 currency pipe since a lot of currency symbols are missing: https://github.com/angular/angular/issues/6724 -->\n  <lx-currency-symbol *ngIf=\"iconPosition === 'first'\" [code]=\"code\"></lx-currency-symbol>\n  {{ (dataValue$ | async | number : format) || placeholder }}\n  <lx-currency-symbol *ngIf=\"iconPosition === 'end'\" [code]=\"code\"></lx-currency-symbol>\n</span>\n", styles: [".container{width:100%!important;padding:0}.labelContainer{width:5%!important;min-width:40px}input{width:100%}.hideInput{display:none}.placeholder{color:#99a5bb}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CurrencySymbolComponent, selector: "lx-currency-symbol", inputs: ["code"] }, { kind: "directive", type: MarkInvalidDirective, selector: "[lxMarkInvalid]", inputs: ["lxMarkInvalid"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 __decorate([
     Observe('data')
 ], CurrencyInputComponent.prototype, "data$", void 0);
@@ -2983,7 +3015,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImpor
                             useExisting: forwardRef(() => CurrencyInputComponent),
                             multi: true
                         }
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"mode === 'edit'\" class=\"container input-group\">\n  <div *ngIf=\"iconPosition === 'first'\" class=\"labelContainer input-group-addon\">\n    <lx-currency-symbol [code]=\"code\"></lx-currency-symbol>\n  </div>\n  <input\n    [attr.disabled]=\"disabled ? true : null\"\n    *ngIf=\"!showCurrencyInput\"\n    type=\"text\"\n    class=\"form-control currencyDisplayValue\"\n    placeholder=\"{{ placeholder }}\"\n    [value]=\"dataValue$ | async | number : format\"\n    (focus)=\"focusCurrencyInput()\"\n  />\n  <input\n    [attr.disabled]=\"disabled ? true : null\"\n    [class.hideInput]=\"!showCurrencyInput\"\n    type=\"text\"\n    inputmode=\"numeric\"\n    class=\"form-control currencyInput\"\n    name=\"inputAmount\"\n    #currencyInput\n    placeholder=\"{{ placeholder }}\"\n    [ngModel]=\"dataValue$ | async\"\n    (blur)=\"onBlur()\"\n    (ngModelChange)=\"valueChanged($event)\"\n  />\n  <div *ngIf=\"iconPosition === 'end'\" class=\"labelContainer input-group-addon\">\n    <lx-currency-symbol [code]=\"code\"></lx-currency-symbol>\n  </div>\n</div>\n<span *ngIf=\"mode === 'view'\" [class.placeholder]=\"(dataValue$ | async) === null && placeholder\">\n  <!-- Not using Angular 2 currency pipe since a lot of currency symbols are missing: https://github.com/angular/angular/issues/6724 -->\n  <lx-currency-symbol *ngIf=\"iconPosition === 'first'\" [code]=\"code\"></lx-currency-symbol>\n  {{ (dataValue$ | async | number : format) || placeholder }}\n  <lx-currency-symbol *ngIf=\"iconPosition === 'end'\" [code]=\"code\"></lx-currency-symbol>\n</span>\n", styles: [".container{width:100%!important;padding:0}.labelContainer{width:5%!important;min-width:40px}input{width:100%}.hideInput{display:none}.placeholder{color:#99a5bb}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"mode === 'edit'\" class=\"container input-group\">\n  <div *ngIf=\"iconPosition === 'first'\" class=\"labelContainer input-group-addon\">\n    <lx-currency-symbol [code]=\"code\"></lx-currency-symbol>\n  </div>\n  <input\n    [attr.disabled]=\"disabled ? true : null\"\n    *ngIf=\"!showCurrencyInput\"\n    type=\"text\"\n    class=\"form-control currencyDisplayValue\"\n    placeholder=\"{{ placeholder }}\"\n    [lxMarkInvalid]=\"markInvalid\"\n    [value]=\"dataValue$ | async | number : format\"\n    (focus)=\"focusCurrencyInput()\"\n  />\n  <input\n    autocomplete=\"off\"\n    [attr.disabled]=\"disabled ? true : null\"\n    [class.hideInput]=\"!showCurrencyInput\"\n    type=\"text\"\n    inputmode=\"numeric\"\n    class=\"form-control currencyInput\"\n    name=\"inputAmount\"\n    #currencyInput\n    placeholder=\"{{ placeholder }}\"\n    [ngModel]=\"dataValue$ | async\"\n    (blur)=\"onBlur()\"\n    (ngModelChange)=\"valueChanged($event)\"\n  />\n  <div *ngIf=\"iconPosition === 'end'\" class=\"labelContainer input-group-addon\">\n    <lx-currency-symbol [code]=\"code\"></lx-currency-symbol>\n  </div>\n</div>\n<span *ngIf=\"mode === 'view'\" [class.placeholder]=\"(dataValue$ | async) === null && placeholder\">\n  <!-- Not using Angular 2 currency pipe since a lot of currency symbols are missing: https://github.com/angular/angular/issues/6724 -->\n  <lx-currency-symbol *ngIf=\"iconPosition === 'first'\" [code]=\"code\"></lx-currency-symbol>\n  {{ (dataValue$ | async | number : format) || placeholder }}\n  <lx-currency-symbol *ngIf=\"iconPosition === 'end'\" [code]=\"code\"></lx-currency-symbol>\n</span>\n", styles: [".container{width:100%!important;padding:0}.labelContainer{width:5%!important;min-width:40px}input{width:100%}.hideInput{display:none}.placeholder{color:#99a5bb}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { code: [{
                 type: Input
             }], decimalSeparator: [{
@@ -3002,6 +3034,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImpor
                 type: Input
             }], format: [{
                 type: Input
+            }], markInvalid: [{
+                type: Input
             }], onFocusLost: [{
                 type: Output
             }], onChange: [{
@@ -3813,7 +3847,7 @@ class BaseSelectDirective {
         this.optionsKeyboardSelectAction$ = new Subject();
         this.virtualCursorPosition = 0;
         this.inputWasFocused = false;
-        this.queryControl = new UntypedFormControl();
+        this.queryControl = new UntypedFormControl('');
         this.isInputFocused = false;
         this.destroyed$ = new Subject();
     }
@@ -4034,37 +4068,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImpor
                 args: ['inputWidth', { static: true }]
             }] } });
 
-class MarkInvalidDirective {
-    constructor(element, renderer) {
-        this.element = element;
-        this.renderer = renderer;
-        this.lxMarkInvalid = false;
-        this.destroyed$ = new Subject();
-    }
-    ngOnInit() {
-        this.lxMarkInvalid$.pipe(takeUntil(this.destroyed$)).subscribe((invalid) => {
-            const border = invalid ? `1px solid ${getCssVariable('--lx-color-danger')}` : '';
-            this.renderer.setStyle(this.element.nativeElement, 'border', border);
-        });
-    }
-    ngOnDestroy() {
-        this.destroyed$.next();
-    }
-}
-MarkInvalidDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: MarkInvalidDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-MarkInvalidDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.1", type: MarkInvalidDirective, selector: "[lxMarkInvalid]", inputs: { lxMarkInvalid: "lxMarkInvalid" }, ngImport: i0 });
-__decorate([
-    Observe('lxMarkInvalid')
-], MarkInvalidDirective.prototype, "lxMarkInvalid$", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: MarkInvalidDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[lxMarkInvalid]'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { lxMarkInvalid: [{
-                type: Input
-            }], lxMarkInvalid$: [] } });
-
 class MultiSelectComponent extends BaseSelectDirective {
     constructor(cd) {
         super();