@festo-ui/angular 9.0.1-dev.793 → 9.0.1-dev.799

package/fesm2022/festo-ui-angular.mjs

@@ -3129,7 +3129,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
  * A custom form element for text inputs.
  */
 class FngTextInputComponent {
-    constructor() {
+    constructor(cdr) {
+        this.cdr = cdr;
         /**
          * The text input label.
          */
@@ -3243,6 +3244,7 @@ class FngTextInputComponent {
         }
         this.innerValue = value;
         this.focused = !!value;
+        this.cdr.markForCheck();
     }
     /**
      * Registers a function to onChange.
@@ -3278,8 +3280,9 @@ class FngTextInputComponent {
      */
     setDisabledState(isDisabled) {
         this.disabled = isDisabled;
+        this.cdr.markForCheck();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FngTextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FngTextInputComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: FngTextInputComponent, isStandalone: true, selector: "fng-text-input", inputs: { label: "label", showValidationIcons: "showValidationIcons", type: "type", readonly: "readonly", step: "step", min: "min", max: "max", tabindex: "tabindex", placeholder: "placeholder", name: "name", disabled: "disabled", value: "value", required: "required", error: "error", hint: "hint" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -3297,7 +3300,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                             multi: true
                         }
                     ], encapsulation: ViewEncapsulation.None, template: "<label class=\"fwe-input-text\" [class.fwe-no-pointer-events]=\"readonly === true\" [ngClass]=\"{ 'fng-input-text--with-icon': showValidationIcons }\">\n  <input\n    #inputElement\n    [disabled]=\"disabled\"\n    [required]=\"required === true || false\"\n    [attr.readonly]=\"readonly === true || null\"\n    [attr.placeholder]=\"placeholder || null\"\n    [attr.type]=\"type\"\n    [attr.step]=\"step\"\n    [attr.min]=\"min\"\n    [attr.max]=\"max\"\n    [attr.name]=\"name || null\"\n    [attr.tabindex]=\"tabindex\"\n    [class.fng-has-value]=\"value != null && value !== ''\"\n    autocomplete=\"off\"\n    (focus)=\"onFocus()\"\n    [(ngModel)]=\"value\"\n    (blur)=\"onBlur()\"\n  />\n  <span class=\"fwe-input-text-label\">{{ label }}</span>\n  @if (hint) {\n  <span class=\"fwe-input-text-info\">{{ hint }}</span>\n  } @else {\n  <span class=\"fwe-input-text-info fng-projected\"><ng-content select=\".fng-hint\"></ng-content></span>\n  } @if (error) {\n  <span class=\"fwe-input-text-invalid\">{{ error }}</span>\n  } @else {\n  <span class=\"fwe-input-text-invalid fng-projected\"><ng-content select=\".fng-error\"></ng-content></span>\n  } @if(showValidationIcons){\n  <i class=\"fng-icon-svg-validation-state\" aria-hidden=\"true\"></i>\n  }\n</label>\n", styles: ["fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=text],fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=password],fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=date],fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=datetime-local],fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=number]{border-bottom:1px solid var(--fwe-red)!important;box-shadow:none;outline:none}fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=text]:focus,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=password]:focus,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=date]:focus,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=datetime-local]:focus,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=number]:focus{border-bottom:1px solid var(--fwe-red)!important}fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=text]:disabled,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=password]:disabled,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=date]:disabled,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=datetime-local]:disabled,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=number]:disabled{border-bottom:1px solid var(--fwe-control-disabled)!important}fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=text]:disabled~.fwe-input-text-label,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=text]:disabled~.fwe-input-text-invalid,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=text]:disabled~.fwe-input-text-info,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=password]:disabled~.fwe-input-text-label,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=password]:disabled~.fwe-input-text-invalid,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=password]:disabled~.fwe-input-text-info,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=date]:disabled~.fwe-input-text-label,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=date]:disabled~.fwe-input-text-invalid,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=date]:disabled~.fwe-input-text-info,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=datetime-local]:disabled~.fwe-input-text-label,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=datetime-local]:disabled~.fwe-input-text-invalid,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=datetime-local]:disabled~.fwe-input-text-info,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=number]:disabled~.fwe-input-text-label,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=number]:disabled~.fwe-input-text-invalid,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=number]:disabled~.fwe-input-text-info{color:var(--fwe-text-disabled)}fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text .fwe-input-text-info{display:none!important}fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text .fwe-input-text-invalid{display:block!important}fng-text-input.ng-valid label.fwe-input-text input[type=text]:hover:not(:disabled),fng-text-input.ng-valid label.fwe-input-text input[type=password]:hover:not(:disabled),fng-text-input.ng-valid label.fwe-input-text input[type=date]:hover:not(:disabled),fng-text-input.ng-valid label.fwe-input-text input[type=time]:hover:not(:disabled),fng-text-input.ng-valid label.fwe-input-text input[type=datetime-local]:hover:not(:disabled),fng-text-input.ng-valid label.fwe-input-text input[type=number]:hover:not(:disabled){border-bottom:1px solid var(--fwe-hero)!important}fng-text-input label.fwe-input-text.fwe-no-pointer-events{pointer-events:none!important}fng-text-input label.fwe-input-text:has(input:disabled){cursor:not-allowed!important}.fwe-input-text-invalid.fng-projected:empty{display:none}.fwe-input-text-info.fng-projected:empty{display:none}.fng-input-text--with-icon input{padding-right:24px}.fng-input-text--with-icon i{position:absolute;line-height:1;bottom:26px;right:4px;height:16px;width:16px;visibility:hidden}.fng-input-text--with-icon input.ng-valid.ng-touched~i.fng-icon-svg-validation-state{visibility:visible;background-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='13' height='10' viewBox='0 0 13 10' fill='none'><path d='M4.207 9.621L0 5.414L1.414 4L4.207 6.793L11 0L12.414 1.414L4.207 9.621Z' fill='%230091DC'/></svg>\");background-repeat:no-repeat;background-size:13px 13px;background-position:center center}.fng-input-text--with-icon input.ng-invalid.ng-touched:not(.ng-pristine)~i.fng-icon-svg-validation-state{visibility:visible;background-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none'><path d='M9.9 1.414L8.486 0L4.95 3.536L1.414 0L0 1.414L3.536 4.95L0 8.486L1.414 9.9L4.95 6.364L8.486 9.9L9.9 8.486L6.364 4.95L9.9 1.414Z' fill='%23D50000'/></svg>\");background-repeat:no-repeat;background-position:center center;background-size:10px 10px}\n"] }]
-        }], propDecorators: { label: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { label: [{
                 type: Input
             }], showValidationIcons: [{
                 type: Input
@@ -3566,12 +3569,11 @@ class FngModalService {
             const positionStrategy = options.positionStrategy || this.overlay.position().global().centerHorizontally().centerVertically();
             const scrollStrategy = this.overlay.scrollStrategies.block();
             const overlayRef = this.overlay.create({
-                panelClass: options.overlayClass,
                 positionStrategy,
                 scrollStrategy,
-                backdropClass: 'fwe-modal-backdrop',
-                hasBackdrop: true,
-                ...options
+                panelClass: options.overlayClass,
+                backdropClass: options.backdropClass ?? 'fwe-modal-backdrop',
+                hasBackdrop: options.hasBackdrop ?? true,
             });
             if (options.closeOnNavigation) {
                 this.router.events
@@ -5853,6 +5855,7 @@ class FngSelectComponent {
     }
     setDisabledState(shouldDisable) {
         this.disabled = shouldDisable;
+        this.cd.markForCheck();
     }
     writeValue(value) {
         if (value === undefined) {
@@ -5870,6 +5873,7 @@ class FngSelectComponent {
         else {
             this._value = value;
         }
+        this.cd.markForCheck();
     }
     getOptionText(index) {
         if (this.options[index] && this.optionsTextKey && this.options[index][this.optionsTextKey] != null) {