@webilix/ngx-form-m3 0.0.45 → 0.0.48

package/index.d.ts

@@ -5,7 +5,7 @@ import { Router } from '@angular/router';
 import { MatFormFieldAppearance } from '@angular/material/form-field';
 import { ComponentType } from '@angular/cdk/portal';
 
-type NgxFormInputs = IInputAutoComplete | IInputBankCard | IInputBankSheba | IInputCheckbox | IInputColor | IInputComponent | IInputCoordinates | IInputDate | IInputEmail | IInputFile | IInputIcon | IInputIp | IInputItemList | IInputMobile | IInputMoment | IInputMultiSelect | IInputName | IInputNumber | IInputOptionList | IInputPassword | IInputPrice | IInputRoute | IInputSelect | IInputTag | IInputText | IInputTextarea | IInputUrl;
+type NgxFormInputs = IInputAutoComplete | IInputBankCard | IInputBankSheba | IInputCheckbox | IInputColor | IInputComponent | IInputCoordinates | IInputDate | IInputEmail | IInputFile | IInputIcon | IInputIp | IInputItemList | IInputMobile | IInputMoment | IInputMultiSelect | IInputName | IInputNumber | IInputOptionList | IInputPassword | IInputPrice | IInputRoute | IInputSelect | IInputTag | IInputText | IInputTextarea | IInputTime | IInputUrl | IInputUsername;
 type Inputs = NgxFormInputs | {
     readonly header: string;
     readonly input: NgxFormInputs;
@@ -293,11 +293,27 @@ interface IInputTextarea extends IInput {
     readonly counter?: boolean;
 }
 
+interface IInputTime extends Omit<IInput, 'english' | 'autoFocus'> {
+    readonly type: 'TIME';
+    readonly showSeconds?: boolean;
+}
+
 interface IInputUrl extends Omit<IInput, 'english'> {
     readonly type: 'URL';
     readonly showIcon?: boolean;
 }
 
+interface IInputUsername extends Omit<IInput, 'english'> {
+    readonly type: 'USERNAME';
+    readonly verify?: {
+        readonly minLength?: number;
+        readonly useDash?: boolean;
+        readonly useDot?: boolean;
+        readonly startWithChar?: boolean;
+        readonly endWithChar?: boolean;
+    };
+}
+
 interface INgxFormConfig {
     readonly mobileWidth: number;
     readonly submitTimeout: number;

package/ngx-form-m3.css

@@ -297,3 +297,88 @@
         opacity: 1;
     }
 }
+
+/* INPUTS: TIME */
+.ngx-helper-form-m3-time-input {
+    display: flex;
+    flex-direction: row-reverse;
+    column-gap: 0.75rem;
+    align-items: center;
+
+    button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        padding: 0;
+        width: 24px;
+        height: 24px;
+        min-width: auto;
+        border-radius: 0;
+        color: var(--on-background) !important;
+        line-height: 0;
+    }
+}
+
+.ngx-helper-form-m3-time-input-hour {
+    .mat-mdc-menu-content {
+        padding: 0;
+
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
+        width: fit-content !important;
+
+        button {
+            padding: 0.75rem;
+            min-width: auto;
+            min-height: auto;
+            border-radius: 0;
+
+            span.hour {
+                font-size: 90%;
+            }
+        }
+    }
+}
+
+.ngx-helper-form-m3-time-input-minute {
+    .mat-mdc-menu-content {
+        padding: 0;
+
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+        width: fit-content !important;
+
+        button {
+            padding: 0.75rem 0.5rem;
+            min-width: auto;
+            min-height: auto;
+            border-radius: 0;
+
+            span.minute {
+                font-size: 90%;
+            }
+        }
+    }
+}
+
+.ngx-helper-form-m3-time-input-second {
+    .mat-mdc-menu-content {
+        padding: 0;
+
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+        width: fit-content !important;
+
+        button {
+            padding: 0.75rem 0.5rem;
+            min-width: auto;
+            min-height: auto;
+            border-radius: 0;
+
+            span.second {
+                font-size: 90%;
+            }
+        }
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webilix/ngx-form-m3",
-  "version": "0.0.45",
+  "version": "0.0.48",
   "author": "Ali Amirnezhad",
   "description": "Persian form library for Angular and Material 3",
   "repository": {