ngx-nz-formly 0.0.2 → 0.0.3

package/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/ngx-nz-formly",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/package.json

@@ -1,31 +1,18 @@
-{
-  "name": "ngx-nz-formly",
-  "version": "0.0.2",
-  "peerDependencies": {
-    "@angular/common": "^16.2.0",
-    "@angular/core": "^16.2.0",
-    "@ngx-formly/core": "6",
-    "@ngx-formly/ng-zorro-antd": "6",
-    "bootstrap": "^5.2.3",
-    "ng-zorro-antd": "^16.1.0",
-    "ngx-mask": "^13.1.3",
-    "rxjs": "~7.5.0"
-  },
-  "dependencies": {
-    "tslib": "^2.3.0"
-  },
-  "sideEffects": false,
-  "module": "fesm2022/ngx-nz-formly.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "esm2022": "./esm2022/ngx-nz-formly.mjs",
-      "esm": "./esm2022/ngx-nz-formly.mjs",
-      "default": "./fesm2022/ngx-nz-formly.mjs"
-    }
-  }
-}
+{
+  "name": "ngx-nz-formly",
+  "version": "0.0.3",
+  "peerDependencies": {
+    "@angular/common": "^16.2.0",
+    "@angular/core": "^16.2.0",
+    "@ngx-formly/core": "6",
+    "@ngx-formly/ng-zorro-antd": "6",
+    "bootstrap": "^5.2.3",
+    "ng-zorro-antd": "^16.1.0",
+    "ngx-mask": "^13.1.3",
+    "rxjs": "~7.5.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false
+}

package/src/lib/components/formly-button/formly-button.component.html

@@ -0,0 +1,16 @@
+<button
+  nz-button
+  type="button"
+  [disabled]="props.disabled"
+  [nzGhost]="props.nzGhost"
+  [nzLoading]="props.nzLoading"
+  [nzShape]="props.nzShape"
+  [nzSize]="props.nzSize"
+  [nzType]="props.nzType"
+  [nzBlock]="props.nzBlock"
+  [nzDanger]="props.nzDanger"
+  [ngClass]="props.classList"
+  (click)="onClick()"
+>
+  {{props.text}}
+</button>

package/src/lib/components/formly-button/formly-button.component.ts

@@ -0,0 +1,18 @@
+import { Component } from "@angular/core";
+import { FieldType, FormlyFieldConfig } from "@ngx-formly/core";
+import { NzFormlyButtonProps } from "../../ngx-nz-formly-props.model";
+
+@Component({
+  selector: "app-formly-button",
+  templateUrl: "./formly-button.component.html",
+  styleUrls: ["./formly-button.component.scss"],
+})
+export class FormlyButtonComponent extends FieldType<
+  FormlyFieldConfig<NzFormlyButtonProps>
+> {
+  onClick() {
+    if (typeof this.props?.click == "function") {
+      this.props.click();
+    }
+  }
+}

package/src/lib/components/formly-field-checkbox/formly-field-checkbox.component.html

@@ -0,0 +1,9 @@
+<label
+  nz-checkbox
+  [nzId]="fieldID"
+  [formControl]="formControl"
+  [formlyAttributes]="field"
+  [nzDisabled]="props.disabled"
+>
+  {{props.label}}
+</label>

package/src/lib/components/formly-field-checkbox/formly-field-checkbox.component.scss

@@ -0,0 +1,8 @@
+label {
+  display: flex;
+  font-size: 100%;
+  font-weight: 600;
+  min-height: 30px;
+  width: fit-content;
+  align-items: center;
+}

package/src/lib/components/formly-field-checkbox/formly-field-checkbox.component.ts

@@ -0,0 +1,38 @@
+import { Component, OnDestroy, OnInit } from "@angular/core";
+import { FieldType, FieldTypeConfig } from "@ngx-formly/core";
+import { NzFormlyCheckboxProps } from "../../ngx-nz-formly-props.model";
+import { Subject, takeUntil, tap } from "rxjs";
+
+@Component({
+  selector: "app-formly-field-checkbox",
+  templateUrl: "./formly-field-checkbox.component.html",
+  styleUrls: ["./formly-field-checkbox.component.scss"],
+})
+export class FormlyFieldCheckboxComponent
+  extends FieldType<FieldTypeConfig<NzFormlyCheckboxProps>>
+  implements OnInit, OnDestroy
+{
+  unSubscribeAll$ = new Subject<void>();
+
+  ngOnInit() {
+    this.formControl.valueChanges
+      .pipe(
+        takeUntil(this.unSubscribeAll$),
+        tap((value: string) => {
+          if (typeof this.props?.change == "function") {
+            this.props.change(this.field, value);
+          }
+        }),
+      )
+      .subscribe();
+  }
+
+  get fieldID() {
+    return "control-" + this.field.key;
+  }
+
+  ngOnDestroy() {
+    this.unSubscribeAll$.next();
+    this.unSubscribeAll$.complete();
+  }
+}

package/src/lib/components/formly-field-input/formly-field-input.component.html

@@ -0,0 +1,33 @@
+<nz-input-group
+  [nzAddOnAfter]="props.nzAddOnAfter"
+  [nzAddOnBefore]="props.nzAddOnBefore"
+  [nzAddOnAfterIcon]="props.nzAddOnAfterIcon"
+  [nzAddOnBeforeIcon]="props.nzAddOnBeforeIcon"
+  [nzPrefix]="props.nzPrefix"
+  [nzSuffix]="props.nzSuffix"
+  [nzSize]="props.nzSize || 'default'"
+>
+  <input
+      #input
+      nz-input
+      [id]="fieldID"
+      [formControl]="formControl"
+      [formlyAttributes]="field"
+      [mask]="mask"
+      [thousandSeparator]="props.thousandSeparator"
+      [type]="type"
+      [nzStatus]="status"
+      [disabled]="props.disabled"
+      [readonly]="props.readonly"
+      [placeholder]="props.placeholder"
+      [nzBorderless]="props.nzBorderless"
+  />
+  <div class="show-password" *ngIf="props.type === 'password'">
+    <span
+      nz-icon
+      nzTheme="outline"
+      (click)="changeShowPassword(input)"
+      [nzType]="showPassword(input) ? 'eye-invisible' : 'eye'"
+    ></span>
+  </div>
+</nz-input-group>

package/src/lib/components/formly-field-input/formly-field-input.component.scss

@@ -0,0 +1,7 @@
+.show-password {
+  z-index: 5;
+  opacity: 0.6;
+  cursor: pointer;
+  position: absolute;
+  inset-inline-end: 10px;
+}

package/src/lib/components/formly-field-input/formly-field-input.component.ts

@@ -0,0 +1,118 @@
+import { AfterViewInit, Component, OnDestroy } from "@angular/core";
+import { FieldType, FieldTypeConfig } from "@ngx-formly/core";
+import { NzFormlyInputProps } from "../../ngx-nz-formly-props.model";
+import { debounceTime, Subject, takeUntil, tap } from "rxjs";
+import { CountryCodeMask, CountryMasks2 } from "./phone-mask.config";
+
+const DefaultPhoneMask: CountryCodeMask = {
+  countryShortName: "IR",
+  prefix: "+98",
+  globalMask: "+00(000)000-0000",
+};
+
+@Component({
+  selector: "app-formly-field-input",
+  templateUrl: "./formly-field-input.component.html",
+  styleUrls: ["./formly-field-input.component.scss"],
+})
+export class FormlyFieldInputComponent
+  extends FieldType<FieldTypeConfig<NzFormlyInputProps>>
+  implements AfterViewInit, OnDestroy
+{
+  mask: string | undefined;
+  unSubscribeAll$ = new Subject<void>();
+
+  ngAfterViewInit() {
+    this.createInitState();
+    this.onValueChange();
+  }
+
+  createInitState() {
+    if (this.props.mask === "phone") {
+      this.mask = DefaultPhoneMask.globalMask;
+      this.handlePhoneMask();
+    } else {
+      this.mask = this.props.mask;
+    }
+  }
+
+  handlePhoneMask() {
+    this.formControl.valueChanges
+      .pipe(
+        takeUntil(this.unSubscribeAll$),
+        tap((value: string) => {
+          if (value == "") {
+            // hint: without setTimeout we don't have Ctrl + A -> delete
+            setTimeout(() => {
+              this.mask = DefaultPhoneMask.globalMask;
+            });
+          } else {
+            let mask = this.findAppropriateMask(value);
+            if (mask && this.mask !== mask.globalMask) {
+              this.mask = mask.globalMask?.replace(/#|[1-9]/g, "0");
+            }
+          }
+        }),
+      )
+      .subscribe();
+  }
+
+  onValueChange() {
+    this.formControl.valueChanges
+      .pipe(
+        takeUntil(this.unSubscribeAll$),
+        debounceTime(300),
+        tap((value: string) => {
+          if (typeof this.props?.change == "function") {
+            this.props.change(this.field, value);
+          }
+        }),
+      )
+      .subscribe();
+  }
+
+  findAppropriateMask(value: string): CountryCodeMask | null {
+    let newMask = CountryMasks2.filter(item =>
+      this.exactEquality(value, item.prefix),
+    ).find(item => value.length <= item.globalMask.length);
+    if (newMask) return newMask;
+    return null;
+  }
+
+  exactEquality(str: string, prefix: string): boolean {
+    // hint: replace function removes all characters except numbers to return clean numeric string
+    // hint: index of convince us to match prefix on first index of input value
+    let new_str = str.replace(/[^0-9.]/g, "");
+    let new_prefix = prefix.replace(/[^0-9.]/g, "");
+    return new_str.indexOf(new_prefix) == 0;
+  }
+
+  changeShowPassword(input: any) {
+    if (input.type === "password") {
+      input.type = "text";
+    } else {
+      input.type = "password";
+    }
+  }
+
+  showPassword(input: any): boolean {
+    return input.type === "text";
+  }
+
+  get type() {
+    return this.props.type ?? "text";
+  }
+
+  get fieldID() {
+    return "control-" + this.field.key;
+  }
+
+  get status() {
+    return this.formControl.touched && this.formControl.invalid ? "error" : "";
+  }
+
+  ngOnDestroy() {
+    this.unSubscribeAll$.next();
+    this.unSubscribeAll$.complete();
+  }
+}