@porscheinformatik/clr-addons 21.11.0 → 21.11.1

package/fesm2022/porscheinformatik-clr-addons.mjs

@@ -14286,8 +14286,20 @@ class ClrStringFilterComponent {
         this._lowerCaseValue = '';
         this.inputChanges = new Subject();
         this._changes = new Subject();
+        this.isOpen = false;
         filterContainer.setFilter(this);
         this.restartDebounce();
+        this.openChangeSubscription = filterContainer.openChange.subscribe((open) => {
+            this.isOpen = open;
+            if (open) {
+                this.focusInput();
+            }
+        });
+    }
+    ngAfterViewInit() {
+        if (this.isOpen) {
+            this.focusInput();
+        }
     }
     onInput(value) {
         this.inputChanges.next(value);
@@ -14321,6 +14333,15 @@ class ClrStringFilterComponent {
     }
     ngOnDestroy() {
         this.debounceSubscription.unsubscribe();
+        this.openChangeSubscription.unsubscribe();
+    }
+    /**
+     * Focuses the filter input. Deferred to a microtask because the popover
+     * content (and therefore the input element) isn't rendered yet when the
+     * `openChange` event fires or during `ngAfterViewInit`.
+     */
+    focusInput() {
+        Promise.resolve().then(() => this.inputRef?.nativeElement.focus());
     }
     /**
      * (Re)subscribes to the input debounce pipeline, discarding any pending
@@ -14345,12 +14366,15 @@ class ClrStringFilterComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ClrStringFilterComponent, deps: [{ token: i1$2.ClrCommonStringsService }, { token: i1$2.ClrDatagridFilter }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.23", type: ClrStringFilterComponent, isStandalone: false, selector: "clr-string-filter", inputs: { property: ["clrProperty", "property"], placeholder: ["clrFilterPlaceholder", "placeholder"], value: ["clrFilterValue", "value"] }, outputs: { filterValueChange: "clrFilterValueChange" }, ngImport: i0, template: "<clr-filter-clear-button testId=\"string-filter-clear-button\" (clear)=\"clearFilter()\"></clr-filter-clear-button>\n<clr-input-container class=\"filter-selection\">\n  <input\n    clrInput\n    type=\"text\"\n    autocomplete=\"off\"\n    name=\"value\"\n    [(ngModel)]=\"inputValue\"\n    (ngModelChange)=\"onInput($event)\"\n    [placeholder]=\"placeholderValue\"\n    [attr.aria-label]=\"placeholderValue\"\n    data-testid=\"string-filter-input\"\n  />\n</clr-input-container>\n", styles: [".filter-selection{margin-top:.5rem}\n"], dependencies: [{ kind: "directive", type: i2$7.ClrInput, selector: "[clrInput]" }, { kind: "component", type: i2$7.ClrInputContainer, selector: "clr-input-container" }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ClrFilterClearButtonComponent, selector: "clr-filter-clear-button", inputs: ["testId"], outputs: ["clear"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.23", type: ClrStringFilterComponent, isStandalone: false, selector: "clr-string-filter", inputs: { property: ["clrProperty", "property"], placeholder: ["clrFilterPlaceholder", "placeholder"], value: ["clrFilterValue", "value"] }, outputs: { filterValueChange: "clrFilterValueChange" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<clr-filter-clear-button testId=\"string-filter-clear-button\" (clear)=\"clearFilter()\"></clr-filter-clear-button>\n<clr-input-container class=\"filter-selection\">\n  <input\n    #input\n    clrInput\n    type=\"text\"\n    autocomplete=\"off\"\n    name=\"value\"\n    [(ngModel)]=\"inputValue\"\n    (ngModelChange)=\"onInput($event)\"\n    [placeholder]=\"placeholderValue\"\n    [attr.aria-label]=\"placeholderValue\"\n    data-testid=\"string-filter-input\"\n  />\n</clr-input-container>\n", styles: [".filter-selection{margin-top:.5rem}\n"], dependencies: [{ kind: "directive", type: i2$7.ClrInput, selector: "[clrInput]" }, { kind: "component", type: i2$7.ClrInputContainer, selector: "clr-input-container" }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ClrFilterClearButtonComponent, selector: "clr-filter-clear-button", inputs: ["testId"], outputs: ["clear"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ClrStringFilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'clr-string-filter', standalone: false, template: "<clr-filter-clear-button testId=\"string-filter-clear-button\" (clear)=\"clearFilter()\"></clr-filter-clear-button>\n<clr-input-container class=\"filter-selection\">\n  <input\n    clrInput\n    type=\"text\"\n    autocomplete=\"off\"\n    name=\"value\"\n    [(ngModel)]=\"inputValue\"\n    (ngModelChange)=\"onInput($event)\"\n    [placeholder]=\"placeholderValue\"\n    [attr.aria-label]=\"placeholderValue\"\n    data-testid=\"string-filter-input\"\n  />\n</clr-input-container>\n", styles: [".filter-selection{margin-top:.5rem}\n"] }]
-        }], ctorParameters: () => [{ type: i1$2.ClrCommonStringsService }, { type: i1$2.ClrDatagridFilter }], propDecorators: { property: [{
+            args: [{ selector: 'clr-string-filter', standalone: false, template: "<clr-filter-clear-button testId=\"string-filter-clear-button\" (clear)=\"clearFilter()\"></clr-filter-clear-button>\n<clr-input-container class=\"filter-selection\">\n  <input\n    #input\n    clrInput\n    type=\"text\"\n    autocomplete=\"off\"\n    name=\"value\"\n    [(ngModel)]=\"inputValue\"\n    (ngModelChange)=\"onInput($event)\"\n    [placeholder]=\"placeholderValue\"\n    [attr.aria-label]=\"placeholderValue\"\n    data-testid=\"string-filter-input\"\n  />\n</clr-input-container>\n", styles: [".filter-selection{margin-top:.5rem}\n"] }]
+        }], ctorParameters: () => [{ type: i1$2.ClrCommonStringsService }, { type: i1$2.ClrDatagridFilter }], propDecorators: { inputRef: [{
+                type: ViewChild,
+                args: ['input', { static: false }]
+            }], property: [{
                 type: Input,
                 args: ['clrProperty']
             }], placeholder: [{
@@ -14454,8 +14478,20 @@ class ClrNumericFilterComponent {
         this.pendingHigh = null;
         this.inputChanges = new Subject();
         this._changes = new Subject();
+        this.isOpen = false;
         filterContainer.setFilter(this);
         this.restartDebounce();
+        this.openChangeSubscription = filterContainer.openChange.subscribe((open) => {
+            this.isOpen = open;
+            if (open) {
+                this.focusInput();
+            }
+        });
+    }
+    ngAfterViewInit() {
+        if (this.isOpen) {
+            this.focusInput();
+        }
     }
     onLowInput(value) {
         const normalized = this.normalizeValue(value);
@@ -14510,6 +14546,15 @@ class ClrNumericFilterComponent {
     }
     ngOnDestroy() {
         this.debounceSubscription.unsubscribe();
+        this.openChangeSubscription.unsubscribe();
+    }
+    /**
+     * Focuses the low-value filter input. Deferred to a microtask because the
+     * popover content (and therefore the input element) isn't rendered yet
+     * when the `openChange` event fires or during `ngAfterViewInit`.
+     */
+    focusInput() {
+        Promise.resolve().then(() => this.lowInputElRef?.nativeElement.focus());
     }
     /**
      * (Re)subscribes to the input debounce pipeline, discarding any pending
@@ -14542,12 +14587,15 @@ class ClrNumericFilterComponent {
         return Number.isFinite(numericValue) ? numericValue : null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ClrNumericFilterComponent, deps: [{ token: i1$2.ClrCommonStringsService }, { token: i1$2.ClrDatagridFilter }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.23", type: ClrNumericFilterComponent, isStandalone: false, selector: "clr-numeric-filter", inputs: { property: ["clrProperty", "property"], minPlaceholder: ["clrFilterMinPlaceholder", "minPlaceholder"], maxPlaceholder: ["clrFilterMaxPlaceholder", "maxPlaceholder"], size: ["clrFilterSize", "size"], value: ["clrFilterValue", "value"] }, outputs: { filterValueChange: "clrFilterValueChange" }, ngImport: i0, template: "<clr-filter-clear-button testId=\"numeric-filter-clear-button\" (clear)=\"clearFilter()\"></clr-filter-clear-button>\n<clr-number-input-container class=\"filter-selection\">\n  <input\n    type=\"number\"\n    clrNumberInput\n    name=\"low\"\n    [(ngModel)]=\"lowInput\"\n    (ngModelChange)=\"onLowInput($event)\"\n    [placeholder]=\"minPlaceholderValue\"\n    [attr.aria-label]=\"minPlaceholderValue\"\n    [class]=\"inputSizeClass\"\n    data-testid=\"numeric-filter-low-input\"\n  />\n</clr-number-input-container>\n<clr-number-input-container class=\"filter-selection\">\n  <input\n    type=\"number\"\n    clrNumberInput\n    name=\"high\"\n    [(ngModel)]=\"highInput\"\n    (ngModelChange)=\"onHighInput($event)\"\n    [placeholder]=\"maxPlaceholderValue\"\n    [attr.aria-label]=\"maxPlaceholderValue\"\n    [class]=\"inputSizeClass\"\n    data-testid=\"numeric-filter-high-input\"\n  />\n</clr-number-input-container>\n", styles: [".filter-selection{margin-top:.5rem}.filter-input-s{width:10ch!important}.filter-input-m{width:13ch!important}.filter-input-l{width:17ch!important}\n"], dependencies: [{ kind: "directive", type: i2$8.ClrNumberInput, selector: "input[type=\"number\"][clrNumberInput]" }, { kind: "component", type: i2$8.ClrNumberInputContainer, selector: "clr-number-input-container" }, { kind: "directive", type: i3.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: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ClrFilterClearButtonComponent, selector: "clr-filter-clear-button", inputs: ["testId"], outputs: ["clear"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.23", type: ClrNumericFilterComponent, isStandalone: false, selector: "clr-numeric-filter", inputs: { property: ["clrProperty", "property"], minPlaceholder: ["clrFilterMinPlaceholder", "minPlaceholder"], maxPlaceholder: ["clrFilterMaxPlaceholder", "maxPlaceholder"], size: ["clrFilterSize", "size"], value: ["clrFilterValue", "value"] }, outputs: { filterValueChange: "clrFilterValueChange" }, viewQueries: [{ propertyName: "lowInputElRef", first: true, predicate: ["lowInputEl"], descendants: true }], ngImport: i0, template: "<clr-filter-clear-button testId=\"numeric-filter-clear-button\" (clear)=\"clearFilter()\"></clr-filter-clear-button>\n<clr-number-input-container class=\"filter-selection\">\n  <input\n    #lowInputEl\n    type=\"number\"\n    clrNumberInput\n    name=\"low\"\n    [(ngModel)]=\"lowInput\"\n    (ngModelChange)=\"onLowInput($event)\"\n    [placeholder]=\"minPlaceholderValue\"\n    [attr.aria-label]=\"minPlaceholderValue\"\n    [class]=\"inputSizeClass\"\n    data-testid=\"numeric-filter-low-input\"\n  />\n</clr-number-input-container>\n<clr-number-input-container class=\"filter-selection\">\n  <input\n    type=\"number\"\n    clrNumberInput\n    name=\"high\"\n    [(ngModel)]=\"highInput\"\n    (ngModelChange)=\"onHighInput($event)\"\n    [placeholder]=\"maxPlaceholderValue\"\n    [attr.aria-label]=\"maxPlaceholderValue\"\n    [class]=\"inputSizeClass\"\n    data-testid=\"numeric-filter-high-input\"\n  />\n</clr-number-input-container>\n", styles: [".filter-selection{margin-top:.5rem}.filter-input-s{width:10ch!important}.filter-input-m{width:13ch!important}.filter-input-l{width:17ch!important}\n"], dependencies: [{ kind: "directive", type: i2$8.ClrNumberInput, selector: "input[type=\"number\"][clrNumberInput]" }, { kind: "component", type: i2$8.ClrNumberInputContainer, selector: "clr-number-input-container" }, { kind: "directive", type: i3.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: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ClrFilterClearButtonComponent, selector: "clr-filter-clear-button", inputs: ["testId"], outputs: ["clear"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ClrNumericFilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'clr-numeric-filter', standalone: false, template: "<clr-filter-clear-button testId=\"numeric-filter-clear-button\" (clear)=\"clearFilter()\"></clr-filter-clear-button>\n<clr-number-input-container class=\"filter-selection\">\n  <input\n    type=\"number\"\n    clrNumberInput\n    name=\"low\"\n    [(ngModel)]=\"lowInput\"\n    (ngModelChange)=\"onLowInput($event)\"\n    [placeholder]=\"minPlaceholderValue\"\n    [attr.aria-label]=\"minPlaceholderValue\"\n    [class]=\"inputSizeClass\"\n    data-testid=\"numeric-filter-low-input\"\n  />\n</clr-number-input-container>\n<clr-number-input-container class=\"filter-selection\">\n  <input\n    type=\"number\"\n    clrNumberInput\n    name=\"high\"\n    [(ngModel)]=\"highInput\"\n    (ngModelChange)=\"onHighInput($event)\"\n    [placeholder]=\"maxPlaceholderValue\"\n    [attr.aria-label]=\"maxPlaceholderValue\"\n    [class]=\"inputSizeClass\"\n    data-testid=\"numeric-filter-high-input\"\n  />\n</clr-number-input-container>\n", styles: [".filter-selection{margin-top:.5rem}.filter-input-s{width:10ch!important}.filter-input-m{width:13ch!important}.filter-input-l{width:17ch!important}\n"] }]
-        }], ctorParameters: () => [{ type: i1$2.ClrCommonStringsService }, { type: i1$2.ClrDatagridFilter }], propDecorators: { property: [{
+            args: [{ selector: 'clr-numeric-filter', standalone: false, template: "<clr-filter-clear-button testId=\"numeric-filter-clear-button\" (clear)=\"clearFilter()\"></clr-filter-clear-button>\n<clr-number-input-container class=\"filter-selection\">\n  <input\n    #lowInputEl\n    type=\"number\"\n    clrNumberInput\n    name=\"low\"\n    [(ngModel)]=\"lowInput\"\n    (ngModelChange)=\"onLowInput($event)\"\n    [placeholder]=\"minPlaceholderValue\"\n    [attr.aria-label]=\"minPlaceholderValue\"\n    [class]=\"inputSizeClass\"\n    data-testid=\"numeric-filter-low-input\"\n  />\n</clr-number-input-container>\n<clr-number-input-container class=\"filter-selection\">\n  <input\n    type=\"number\"\n    clrNumberInput\n    name=\"high\"\n    [(ngModel)]=\"highInput\"\n    (ngModelChange)=\"onHighInput($event)\"\n    [placeholder]=\"maxPlaceholderValue\"\n    [attr.aria-label]=\"maxPlaceholderValue\"\n    [class]=\"inputSizeClass\"\n    data-testid=\"numeric-filter-high-input\"\n  />\n</clr-number-input-container>\n", styles: [".filter-selection{margin-top:.5rem}.filter-input-s{width:10ch!important}.filter-input-m{width:13ch!important}.filter-input-l{width:17ch!important}\n"] }]
+        }], ctorParameters: () => [{ type: i1$2.ClrCommonStringsService }, { type: i1$2.ClrDatagridFilter }], propDecorators: { lowInputElRef: [{
+                type: ViewChild,
+                args: ['lowInputEl', { static: false }]
+            }], property: [{
                 type: Input,
                 args: ['clrProperty']
             }], minPlaceholder: [{