@webilix/ngx-form-m3 0.0.5 → 0.0.7

package/lib/inputs/date/input-date.interface.d.ts

@@ -2,7 +2,7 @@ import { ValidatorFn, FormControl } from '@angular/forms';
 import { InputMethods, IInput } from '../input.interface';
 export interface IInputDate extends Omit<IInput, 'english' | 'value' | 'autoFocus'> {
     readonly type: 'DATE';
-    readonly value?: Date;
+    readonly value?: Date | null;
     readonly minDate?: Date | 'NOW';
     readonly maxDate?: Date | 'NOW';
 }

package/lib/inputs/file/input-file.component.d.ts

@@ -0,0 +1,12 @@
+import { FormControl } from '@angular/forms';
+import { IInputConfig } from '../input.interface';
+import { IInputFile } from './input-file.interface';
+import * as i0 from "@angular/core";
+export declare class InputFileComponent {
+    formControl: FormControl;
+    input: IInputFile;
+    config: IInputConfig;
+    setFile(event: Event | null): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<InputFileComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<InputFileComponent, "ng-component", never, {}, {}, never, never, true, never>;
+}

package/lib/inputs/file/input-file.interface.d.ts

@@ -0,0 +1,10 @@
+import { ValidatorFn, FormControl } from '@angular/forms';
+import { InputMethods, IInput } from '../input.interface';
+export interface IInputFile extends Omit<IInput, 'value' | 'english' | 'autoFocus'> {
+    readonly type: 'FILE';
+    readonly mimes?: 'IMAGE' | string[];
+}
+export declare class InputFileMethods extends InputMethods<IInputFile, File | null> {
+    control(input: IInputFile, validators: ValidatorFn[]): FormControl<File | null>;
+    value(value: any, input: IInputFile): File | null;
+}

package/lib/inputs/index.d.ts

@@ -4,6 +4,8 @@ export * from './date/input-date.component';
 export * from './date/input-date.interface';
 export * from './email/input-email.component';
 export * from './email/input-email.interface';
+export * from './file/input-file.component';
+export * from './file/input-file.interface';
 export * from './mobile/input-mobile.component';
 export * from './mobile/input-mobile.interface';
 export * from './name/input-name.component';
@@ -16,6 +18,8 @@ export * from './text/input-text.component';
 export * from './text/input-text.interface';
 export * from './textarea/input-textarea.component';
 export * from './textarea/input-textarea.interface';
+export * from './url/input-url.component';
+export * from './url/input-url.interface';
 export * from './input.component';
 export * from './input.info';
 export * from './input.interface';

package/lib/inputs/input.component.d.ts

@@ -18,6 +18,11 @@ export declare class InputComponent implements OnInit {
             readonly methods: import("./input.interface").InputMethods<any, any>;
             readonly component: import("@angular/cdk/portal").ComponentType<any>;
         };
+        URL: {
+            readonly title: string;
+            readonly methods: import("./input.interface").InputMethods<any, any>;
+            readonly component: import("@angular/cdk/portal").ComponentType<any>;
+        };
         MOBILE: {
             readonly title: string;
             readonly methods: import("./input.interface").InputMethods<any, any>;
@@ -33,6 +38,11 @@ export declare class InputComponent implements OnInit {
             readonly methods: import("./input.interface").InputMethods<any, any>;
             readonly component: import("@angular/cdk/portal").ComponentType<any>;
         };
+        FILE: {
+            readonly title: string;
+            readonly methods: import("./input.interface").InputMethods<any, any>;
+            readonly component: import("@angular/cdk/portal").ComponentType<any>;
+        };
         NAME: {
             readonly title: string;
             readonly methods: import("./input.interface").InputMethods<any, any>;

package/lib/inputs/input.interface.d.ts

@@ -5,7 +5,7 @@ import { INgxFormValues } from '../ngx-form.interface';
 export interface IInput {
     readonly name: string;
     readonly title?: string;
-    readonly value?: string;
+    readonly value?: string | null;
     readonly hint?: string;
     readonly description?: string;
     readonly optional?: boolean;

package/lib/inputs/name/input-name.interface.d.ts

@@ -6,7 +6,7 @@ interface IName {
 }
 export interface IInputName extends Omit<IInput, 'value' | 'hint' | 'english' | 'description'> {
     readonly type: 'NAME';
-    readonly value?: IName;
+    readonly value?: IName | null;
 }
 export declare class InputNameMethods extends InputMethods<IInputName, IName | null> {
     control(input: IInputName, validators: ValidatorFn[]): FormControl<IName | null>;

package/lib/inputs/text/input-text.interface.d.ts

@@ -5,6 +5,7 @@ export interface IInputText extends IInput {
     readonly title: string;
     readonly minLength?: number;
     readonly maxLength?: number;
+    readonly readonly?: boolean;
 }
 export declare class InputTextMethods extends InputMethods<IInputText, string | null> {
     control(input: IInputText, validators: ValidatorFn[]): FormControl<string | null>;

package/lib/inputs/url/input-url.component.d.ts

@@ -0,0 +1,11 @@
+import { FormControl } from '@angular/forms';
+import { IInputConfig } from '../input.interface';
+import { IInputUrl } from './input-url.interface';
+import * as i0 from "@angular/core";
+export declare class InputUrlComponent {
+    formControl: FormControl;
+    input: IInputUrl;
+    config: IInputConfig;
+    static ɵfac: i0.ɵɵFactoryDeclaration<InputUrlComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<InputUrlComponent, "ng-component", never, {}, {}, never, never, true, never>;
+}

package/lib/inputs/url/input-url.interface.d.ts

@@ -0,0 +1,10 @@
+import { ValidatorFn, FormControl } from '@angular/forms';
+import { InputMethods, IInput } from '../input.interface';
+export interface IInputUrl extends Omit<IInput, 'english'> {
+    readonly type: 'URL';
+    readonly showIcon?: boolean;
+}
+export declare class InputUrlMethods extends InputMethods<IInputUrl, string | null> {
+    control(input: IInputUrl, validators: ValidatorFn[]): FormControl<string | null>;
+    value(value: any, input: IInputUrl): string | null;
+}

package/lib/ngx-form.interface.d.ts

@@ -1,7 +1,7 @@
 import { FormGroup, NgForm } from '@angular/forms';
 import { MatFormFieldAppearance } from '@angular/material/form-field';
-import { IInputColor, IInputDate, IInputEmail, IInputMobile, IInputName, IInputPassword, IInputSelect, IInputText, IInputTextarea } from './inputs';
-export type NgxFormInputs = IInputColor | IInputDate | IInputEmail | IInputMobile | IInputName | IInputPassword | IInputSelect | IInputText | IInputTextarea;
+import { IInputColor, IInputDate, IInputEmail, IInputFile, IInputMobile, IInputName, IInputPassword, IInputSelect, IInputText, IInputTextarea, IInputUrl } from './inputs';
+export type NgxFormInputs = IInputColor | IInputDate | IInputEmail | IInputFile | IInputMobile | IInputName | IInputPassword | IInputSelect | IInputText | IInputTextarea | IInputUrl;
 type Inputs = NgxFormInputs | {
     readonly header: string;
     readonly input: NgxFormInputs;

package/ngx-form-m3.css

@@ -58,3 +58,74 @@
     opacity: 0.4;
     cursor: default;
 }
+
+/* INPUTS: COLOR */
+.ngx-helper-form-m3-color-input {
+    display: flex;
+    align-items: center;
+
+    section {
+        flex: 1;
+
+        display: block;
+        position: relative;
+
+        .color {
+            cursor: pointer;
+            border-width: 0px;
+        }
+
+        input[type='color'] {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 0 !important;
+            opacity: 0;
+            z-index: -1;
+        }
+    }
+
+    .value {
+        width: 90px;
+        text-align: left;
+        cursor: pointer;
+        text-transform: uppercase;
+    }
+}
+
+/* INPUTS: FILE */
+.ngx-helper-form-m3-file-input {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+
+    .size {
+        font-size: 90%;
+    }
+
+    .name {
+        flex: 1;
+        width: 0;
+
+        direction: ltr;
+        text-align: left;
+
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    input {
+        width: 0.5rem;
+    }
+}
+
+/* INPUTS: NAME */
+.ngx-helper-form-m3-name-input {
+    display: flex;
+    column-gap: 1rem;
+
+    mat-form-field {
+        flex: 1;
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webilix/ngx-form-m3",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "author": "Ali Amirnezhad",
   "description": "Persian form library for Angular and Material 3",
   "repository": {
@@ -26,8 +26,8 @@
     "@angular/material": ">=19.0.3",
     "@webilix/helper-library": ">=6.0.2",
     "@webilix/jalali-date-time": ">=2.0.5",
-    "@webilix/ngx-calendar-m3": ">=0.0.4",
-    "@webilix/ngx-helper-m3": ">=0.0.10",
+    "@webilix/ngx-calendar-m3": ">=0.0.6",
+    "@webilix/ngx-helper-m3": ">=0.0.12",
     "ngx-mask": ">=19.0.4"
   },
   "dependencies": {