Merge pull request #10 from RandomSoftwareSL/feature/disable-warning-fixes

Update primeNG version and resolving the console warning form disable…

Author: sachith94-lion

package.json

@@ -20,16 +20,16 @@
     "@angular/platform-browser-dynamic": "^17.2.3",
     "@angular/router": "^17.2.3",
     "primeflex": "^3.3.1",
-    "primeicons": "^6.0.1",
-    "primeng": "^17.11.0",
+    "primeicons": "^7.0.0",
+    "primeng": "^17.18.0",
     "rxjs": "~7.8.1",
     "tslib": "^2.3.0",
     "zone.js": "^0.14.0"
   },
   "peerDependencies": {
     "primeflex": "^3.3.1",
-    "primeicons": "^6.0.1",
-    "primeng": "^17.11.0"
+    "primeicons": "^7.0.0",
+    "primeng": "^17.18.0"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "^17.2.2",

projects/consumer/src/app/app.component.html

@@ -17,3 +17,6 @@
     placeholder="Year"
   ></typeHeadInput>
 </form>
+
+<button (click)="disabled()">disabled</button>
+<button (click)="enable()">enable</button>

projects/consumer/src/app/app.component.ts

@@ -19,7 +19,7 @@ export class AppComponent {
   customSelectInputClass = "w-full text-sm h-3rem";
   typeHeadYearDataSet!: SelectItem[];
 
-  yearSource = new BehaviorSubject<any>(null!);
+  yearSource = new BehaviorSubject<string[]>(null!);
   yearObs$ = this.yearSource.asObservable();
 
   constructor(private formBuilder: UntypedFormBuilder) {
@@ -76,27 +76,31 @@ export class AppComponent {
     if (!this.typeHeadYearDataSet) {
       return this.yearObs$.pipe(
         map((years) => {
-          const yearsArray: any = [];
-          years.forEach((yearValue: any) => {
-            let year = { year: yearValue };
+          const yearsArray: { year: string }[] = [];
+          years.forEach((yearValue: string) => {
+            const year = { year: yearValue };
             yearsArray.push(year);
           });
-          this.typeHeadYearDataSet = yearsArray.map((years: { year: any }) => {
-            return {
-              label: years.year,
-              value: years.year,
-            };
-          });
+          this.typeHeadYearDataSet = yearsArray.map(
+            (years: { year: string }) => {
+              return {
+                label: years.year,
+                value: years.year,
+              };
+            }
+          );
           return this.typeHeadYearDataSet;
         })
       );
     }
     return of();
   };
 
-  changeSelectedText(event: any) {
-    this.consumerForm.patchValue({
-      year: event?.addedValue,
-    });
-  }
+  disabled = () => {
+    this.getFormControl["year"].disable();
+  };
+
+  enable = () => {
+    this.getFormControl["year"].enable();
+  };
 }

projects/type-head-input/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@randomsoftwareltd/type-head-input",
-  "version": "2.0.8",
+  "version": "2.1.0",
   "peerDependencies": {
     "@angular/common": "^17.2.3",
     "@angular/core": "^17.2.3",
     "primeflex": "^3.3.1",
-    "primeicons": "^6.0.1",
-    "primeng": "^17.11.0"
+    "primeicons": "^7.0.0",
+    "primeng": "^17.18.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"

projects/type-head-input/src/lib/type-head-input.component.html

@@ -19,7 +19,6 @@
   [showClear]="showClear"
   [styleClass]="dropDownStyleClass"
   [panelStyleClass]="panelStyleClass"
-  [disabled]="disabled"
   [name]="name"
   class="{{ typeHeadStyleClass }} {{
     control.touched && control.invalid ? 'ng-invalid ng-dirty' : ''

projects/type-head-input/src/lib/type-head-input.component.ts

@@ -4,6 +4,7 @@ import {
   EventEmitter,
   Input,
   Output,
+  SimpleChanges,
   TemplateRef,
   ViewChild,
 } from "@angular/core";
@@ -24,7 +25,7 @@ import {
 } from "./directive/form-template.directive";
 import { SelectItem } from "primeng/api";
 import { UntypedFormControl } from "@angular/forms";
-import { Dropdown } from "primeng/dropdown";
+import { Dropdown, DropdownChangeEvent } from "primeng/dropdown";
 
 @Component({
   selector: "typeHeadInput",
@@ -58,6 +59,7 @@ export class TypeHeadInputComponent {
   @Input() isFormLabel = true;
   @Input() typeHeadStyleClass!: string;
   @Input() labelText!: string;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   selectedTypeHeadSource = new BehaviorSubject<any>(null);
   selectedTypeHead$ = this.selectedTypeHeadSource.asObservable();
   loading = false;
@@ -66,14 +68,17 @@ export class TypeHeadInputComponent {
 
   // custom templates
   @ContentChild(NgTypeHeadInputItemTemplateDirective, { read: TemplateRef })
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   itemTemplate: TemplateRef<any> | undefined;
   @ContentChild(NgTypeHeadInputFilterTemplateDirective, { read: TemplateRef })
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   filterTemplate: TemplateRef<any> | undefined;
 
   //Extract label data
   optionLabels!: (string | undefined)[];
 
   newCreatedValue!: string;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   newValueSource = new BehaviorSubject<any>(null);
   newValueObs$ = this.newValueSource.asObservable();
   isAvailability: boolean = false;
@@ -82,6 +87,9 @@ export class TypeHeadInputComponent {
   constructor() {}
 
   ngOnInit(): void {
+    if (this.disabled) {
+      this.control.disable();
+    }
     if (this.isNumberInput) {
       this.allowNumberInput();
     }
@@ -130,10 +138,12 @@ export class TypeHeadInputComponent {
     }
   }
 
+   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   onShowDropdown(event: any) {
     if (this.enableServerSideData) this.selectedTypeHeadSource.next(event);
   }
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   addNewValue(inputValue?: any) {
     if (inputValue) {
       if (this.enableServerSideData) {
@@ -177,14 +187,15 @@ export class TypeHeadInputComponent {
     this.optionLabels = this.items?.map((item) => item.label);
   }
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   checkInitialData(select: any) {
     return (
       select?.value?.length > 0 &&
       !this.items?.map((item) => item.label)?.includes(select?.value)
     );
   }
 
-  onFilterEmitter(event: any) {
+  onFilterEmitter(event: DropdownChangeEvent) {
     this.setEmptyHandler();
     this.searchValue =
       typeof this.select?.value === "object" &&
@@ -224,4 +235,14 @@ export class TypeHeadInputComponent {
       this.control.patchValue(null);
     }
   };
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes["disabled"] && !changes["disabled"].isFirstChange()) {
+      if (this.disabled) {
+        this.control.disable();
+      } else {
+        this.control.enable();
+      }
+    }
+  }
 }