@abp/ng.components 10.0.0-rc.3 → 10.0.1

package/extensible/index.d.ts

@@ -176,8 +176,6 @@ declare class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
     first?: boolean;
     isFirstGroup?: boolean;
     private fieldRef;
-    private shouldFocus;
-    private isViewReady;
     injectorForCustomComponent?: Injector;
     asterisk: string;
     containerClassName: string;
@@ -189,7 +187,6 @@ declare class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
     passwordKey: eExtensibleComponents;
     disabledFn: (data: PropData) => boolean;
     get disabled(): boolean;
-    constructor();
     setTypeaheadValue(selectedOption: ABP.Option<string>): void;
     search: (text$: Observable<string>) => Observable<any[]>;
     typeaheadFormatter: (option: ABP.Option<any>) => string;
@@ -197,7 +194,6 @@ declare class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
     get isInvalid(): boolean;
     private getTypeaheadControls;
     private setAsterisk;
-    private focusElement;
     ngAfterViewInit(): void;
     getComponent(prop: FormProp): string;
     getType(prop: FormProp): string;

package/fesm2022/abp-ng.components-extensible.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, ChangeDetectorRef, input, Optional, SkipSelf, ViewChild, ChangeDetectionStrategy, Component, InjectionToken, Injectable, forwardRef, Injector, signal, effect, Input, TemplateRef, ViewContainerRef, Directive, ViewChildren, LOCALE_ID, PLATFORM_ID, EventEmitter, computed, Output, Pipe, NgModule } from '@angular/core';
+import { inject, ChangeDetectorRef, input, Optional, SkipSelf, ViewChild, ChangeDetectionStrategy, Component, InjectionToken, Injectable, forwardRef, Injector, Input, TemplateRef, ViewContainerRef, Directive, ViewChildren, LOCALE_ID, PLATFORM_ID, EventEmitter, signal, computed, Output, Pipe, NgModule } from '@angular/core';
 import * as i2 from '@angular/forms';
 import { ControlContainer, ReactiveFormsModule, Validators, NG_VALUE_ACCESSOR, FormGroupDirective, FormsModule, UntypedFormGroup, UntypedFormControl } from '@angular/forms';
 import * as i1 from '@ng-bootstrap/ng-bootstrap';
@@ -486,10 +486,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
         }] });
 
 class ExtensibleFormPropComponent {
-    #groupDirective;
-    get disabled() {
-        return this.disabledFn(this.data);
-    }
     constructor() {
         this.service = inject(ExtensibleFormPropService);
         this.cdRef = inject(ChangeDetectorRef);
@@ -497,8 +493,6 @@ class ExtensibleFormPropComponent {
         this.#groupDirective = inject(FormGroupDirective);
         this.injector = inject(Injector);
         this.form = this.#groupDirective.form;
-        this.shouldFocus = signal(false);
-        this.isViewReady = signal(false);
         this.asterisk = '';
         this.containerClassName = 'mb-2';
         this.showPassword = false;
@@ -511,12 +505,10 @@ class ExtensibleFormPropComponent {
             : of([]);
         this.typeaheadFormatter = (option) => option.key;
         this.meridian$ = this.service.meridian$;
-        // Effect to handle focus when both conditions are met
-        effect(() => {
-            if (this.shouldFocus() && this.isViewReady() && this.fieldRef?.nativeElement) {
-                this.focusElement();
-            }
-        });
+    }
+    #groupDirective;
+    get disabled() {
+        return this.disabledFn(this.data);
     }
     setTypeaheadValue(selectedOption) {
         this.typeaheadModel = selectedOption || { key: null, value: null };
@@ -542,19 +534,11 @@ class ExtensibleFormPropComponent {
     setAsterisk() {
         this.asterisk = this.service.calcAsterisks(this.validators);
     }
-    focusElement() {
-        try {
-            this.fieldRef.nativeElement.focus();
-            this.shouldFocus.set(false);
-        }
-        catch (error) {
-            console.error('Error focusing field:', error);
-        }
-    }
     ngAfterViewInit() {
-        this.isViewReady.set(true);
-        if (this.isFirstGroup && this.first) {
-            this.shouldFocus.set(true);
+        if (this.isFirstGroup && this.first && this.fieldRef) {
+            requestAnimationFrame(() => {
+                this.fieldRef.nativeElement.focus();
+            });
         }
     }
     getComponent(prop) {
@@ -640,7 +624,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
                         { provide: NgbDateAdapter, useClass: DateAdapter },
                         { provide: NgbTimeAdapter, useClass: TimeAdapter },
                     ], template: "<ng-container *abpPermission=\"prop.permission; runChangeDetection: false\">\r\n  @switch (getComponent(prop)) {\r\n    @case ('template') {\r\n      <ng-container *ngComponentOutlet=\"prop.template; injector: injectorForCustomComponent\" />\r\n    }\r\n  }\r\n\r\n  <div [ngClass]=\"containerClassName\" class=\"mb-2\">\r\n    @switch (getComponent(prop)) {\r\n      @case ('input') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\r\n        <input\r\n          #field\r\n          [id]=\"prop.id\"\r\n          [formControlName]=\"prop.name\"\r\n          [autocomplete]=\"prop.autocomplete\"\r\n          [type]=\"getType(prop)\"\r\n          [abpDisabled]=\"disabled\"\r\n          [readonly]=\"readonly\"\r\n          class=\"form-control\"\r\n        />\r\n      }\r\n      @case ('hidden') {\r\n        <input [formControlName]=\"prop.name\" type=\"hidden\" />\r\n      }\r\n      @case ('checkbox') {\r\n        <div class=\"form-check\" validationTarget>\r\n          <input\r\n            #field\r\n            [id]=\"prop.id\"\r\n            [formControlName]=\"prop.name\"\r\n            [abpDisabled]=\"disabled\"\r\n            type=\"checkbox\"\r\n            class=\"form-check-input\"\r\n          />\r\n          <ng-template\r\n            [ngTemplateOutlet]=\"label\"\r\n            [ngTemplateOutletContext]=\"{ $implicit: 'form-check-label' }\"\r\n          />\r\n        </div>\r\n      }\r\n      @case ('select') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\r\n        <select\r\n          #field\r\n          [id]=\"prop.id\"\r\n          [formControlName]=\"prop.name\"\r\n          [abpDisabled]=\"disabled\"\r\n          class=\"form-select form-control\"\r\n        >\r\n          @for (option of options$ | async; track option.value) {\r\n            <option [ngValue]=\"option.value\">\r\n              @if (prop.isExtra) {\r\n                {{ '::' + option.key | abpLocalization }}\r\n              } @else {\r\n                {{ option.key }}\r\n              }\r\n            </option>\r\n          }\r\n        </select>\r\n      }\r\n      @case ('multiselect') {\r\n        <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\r\n        <abp-extensible-form-multi-select\r\n          [prop]=\"prop\"\r\n          [options]=\"options$ | async\"\r\n          [formControlName]=\"prop.name\"\r\n          [abpDisabled]=\"disabled\"\r\n        />\r\n      }\r\n      @case ('typeahead') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\r\n        <div #typeahead class=\"position-relative\" validationStyle validationTarget>\r\n          <input\r\n            #field\r\n            [id]=\"prop.id\"\r\n            [autocomplete]=\"prop.autocomplete\"\r\n            [abpDisabled]=\"disabled\"\r\n            [ngbTypeahead]=\"search\"\r\n            [editable]=\"false\"\r\n            [inputFormatter]=\"typeaheadFormatter\"\r\n            [resultFormatter]=\"typeaheadFormatter\"\r\n            [ngModelOptions]=\"{ standalone: true }\"\r\n            [(ngModel)]=\"typeaheadModel\"\r\n            (selectItem)=\"setTypeaheadValue($event.item)\"\r\n            (blur)=\"setTypeaheadValue(typeaheadModel)\"\r\n            [class.is-invalid]=\"typeahead.classList.contains('is-invalid')\"\r\n            class=\"form-control\"\r\n          />\r\n          <input [formControlName]=\"prop.name\" type=\"hidden\" />\r\n        </div>\r\n      }\r\n      @case ('date') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\r\n        <input\r\n          [id]=\"prop.id\"\r\n          [formControlName]=\"prop.name\"\r\n          (click)=\"datepicker.open()\"\r\n          (keyup.space)=\"datepicker.open()\"\r\n          ngbDatepicker\r\n          #datepicker=\"ngbDatepicker\"\r\n          type=\"text\"\r\n          class=\"form-control\"\r\n        />\r\n      }\r\n      @case ('time') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\r\n        <ngb-timepicker [formControlName]=\"prop.name\" />\r\n      }\r\n      @case ('dateTime') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\r\n        <abp-extensible-date-time-picker [prop]=\"prop\" [meridian]=\"meridian$ | async\" />\r\n      }\r\n      @case ('textarea') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\r\n        <textarea\r\n          #field\r\n          [id]=\"prop.id\"\r\n          [formControlName]=\"prop.name\"\r\n          [abpDisabled]=\"disabled\"\r\n          [readonly]=\"readonly\"\r\n          class=\"form-control\"\r\n        ></textarea>\r\n      }\r\n      @case ('passwordinputgroup') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\r\n        <div class=\"input-group form-group\" validationTarget>\r\n          <input\r\n            class=\"form-control\"\r\n            [id]=\"prop.id\"\r\n            [formControlName]=\"prop.name\"\r\n            [abpShowPassword]=\"showPassword\"\r\n          />\r\n          <button class=\"btn btn-secondary\" type=\"button\" (click)=\"showPassword = !showPassword\">\r\n            <i\r\n              class=\"fa\"\r\n              aria-hidden=\"true\"\r\n              [ngClass]=\"{\r\n                'fa-eye-slash': !showPassword,\r\n                'fa-eye': showPassword,\r\n              }\"\r\n            ></i>\r\n          </button>\r\n        </div>\r\n      }\r\n    }\r\n\r\n    @if (prop.formText) {\r\n      <small class=\"text-muted d-block\">{{ prop.formText | abpLocalization }}</small>\r\n    }\r\n  </div>\r\n</ng-container>\r\n\r\n<ng-template #label let-classes>\r\n  <label [htmlFor]=\"prop.id\" [ngClass]=\"classes || 'form-label d-inline-block'\">\r\n    <span class=\"d-inline-flex align-items-center gap-1 text-nowrap\">\r\n      @if (prop.displayTextResolver) {\r\n        {{ prop.displayTextResolver(data) | abpLocalization }}\r\n      } @else {\r\n        @if (prop.isExtra) {\r\n          {{ '::' + prop.displayName | abpLocalization }}\r\n        } @else {\r\n          {{ prop.displayName | abpLocalization }}\r\n        }\r\n      }\r\n      {{ asterisk }}\r\n      @if (prop.tooltip) {\r\n        <i\r\n          [ngbTooltip]=\"prop.tooltip.text | abpLocalization\"\r\n          [placement]=\"prop.tooltip.placement || 'auto'\"\r\n          container=\"body\"\r\n          class=\"bi bi-info-circle\"\r\n        ></i>\r\n      }\r\n    </span>\r\n  </label>\r\n</ng-template>\r\n" }]
-        }], ctorParameters: () => [], propDecorators: { data: [{
+        }], propDecorators: { data: [{
                 type: Input
             }], prop: [{
                 type: Input