@webilix/ngx-form-m3 0.0.14 → 0.0.16

package/lib/directives/form-error.directive.d.ts

@@ -6,6 +6,7 @@ export declare class FormErrorDirective {
     private formGroupDirective;
     onSubmit(): void;
     constructor(elementRef: ElementRef, formGroupDirective: FormGroupDirective);
+    private getElementTop;
     private scrollToElement;
     static ɵfac: i0.ɵɵFactoryDeclaration<FormErrorDirective, [null, { optional: true; }]>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<FormErrorDirective, "form.ngx-form", never, {}, {}, never, never, true, never>;

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

@@ -1,6 +1,6 @@
 import { ValidatorFn, FormControl } from '@angular/forms';
 import { InputMethods, IInput } from '../input.interface';
-export interface IInputCheckbox extends Omit<IInput, 'title' | 'value' | 'autoFocus'> {
+export interface IInputCheckbox extends Omit<IInput, 'title' | 'value' | 'optional' | 'autoFocus'> {
     readonly type: 'CHECKBOX';
     readonly message: string;
     readonly value?: boolean;

package/lib/inputs/index.d.ts

@@ -20,6 +20,8 @@ export * from './mobile/input-mobile.component';
 export * from './mobile/input-mobile.interface';
 export * from './moment/input-moment.component';
 export * from './moment/input-moment.interface';
+export * from './multi-select/input-multi-select.component';
+export * from './multi-select/input-multi-select.interface';
 export * from './name/input-name.component';
 export * from './name/input-name.interface';
 export * from './number/input-number.component';

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

@@ -74,6 +74,11 @@ export declare class InputComponent implements OnInit, OnChanges {
             readonly methods: import("./input.interface").InputMethods<any, any>;
             readonly component: import("@angular/cdk/portal").ComponentType<any>;
         };
+        "MULTI-SELECT": {
+            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/multi-select/input-multi-select.component.d.ts

@@ -0,0 +1,19 @@
+import { OnInit } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { INgxFormValues } from '../../ngx-form.interface';
+import { IInputConfig } from '../input.interface';
+import { IInputMultiSelect } from './input-multi-select.interface';
+import * as i0 from "@angular/core";
+export declare class InputMultiSelectComponent implements OnInit {
+    listHeight: string;
+    formControl: FormControl;
+    input: IInputMultiSelect;
+    config: IInputConfig;
+    values: INgxFormValues;
+    isButtonDisabled: boolean;
+    ids: string[];
+    ngOnInit(): void;
+    toggleValue(id: string): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<InputMultiSelectComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<InputMultiSelectComponent, "ng-component", never, { "values": { "alias": "values"; "required": true; }; "isButtonDisabled": { "alias": "isButtonDisabled"; "required": true; }; }, {}, never, never, true, never>;
+}

package/lib/inputs/multi-select/input-multi-select.interface.d.ts

@@ -0,0 +1,18 @@
+import { ValidatorFn, FormControl } from '@angular/forms';
+import { InputMethods, IInput } from '../input.interface';
+export interface IInputMultiSelect extends Omit<IInput, 'value' | 'optional' | 'autoFocus'> {
+    readonly type: 'MULTI-SELECT';
+    readonly title: string;
+    readonly value?: string[];
+    readonly options: {
+        readonly id: string;
+        readonly title: string;
+    }[];
+    readonly minCount?: number;
+    readonly maxCount?: number;
+    readonly listMaxHeight?: number;
+}
+export declare class InputMultiSelectMethods extends InputMethods<IInputMultiSelect, string[] | null> {
+    control(input: IInputMultiSelect, validators: ValidatorFn[]): FormControl<string[] | null>;
+    value(value: any, input: IInputMultiSelect): string[] | null;
+}

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

@@ -1,8 +1,8 @@
 import { InjectionToken } from '@angular/core';
 import { FormControl, FormGroup, NgForm } from '@angular/forms';
 import { MatFormFieldAppearance } from '@angular/material/form-field';
-import { IInputAutoComplete, IInputCheckbox, IInputColor, IInputComponent, IInputDate, IInputEmail, IInputFile, IInputIcon, IInputIp, IInputMobile, IInputMoment, IInputName, IInputNumber, IInputPassword, IInputSelect, IInputText, IInputTextarea, IInputUrl } from './inputs';
-export type NgxFormInputs = IInputAutoComplete | IInputCheckbox | IInputColor | IInputComponent | IInputDate | IInputEmail | IInputFile | IInputIcon | IInputIp | IInputMobile | IInputMoment | IInputName | IInputNumber | IInputPassword | IInputSelect | IInputText | IInputTextarea | IInputUrl;
+import { IInputAutoComplete, IInputCheckbox, IInputColor, IInputComponent, IInputDate, IInputEmail, IInputFile, IInputIcon, IInputIp, IInputMobile, IInputMoment, IInputMultiSelect, IInputName, IInputNumber, IInputPassword, IInputSelect, IInputText, IInputTextarea, IInputUrl } from './inputs';
+export type NgxFormInputs = IInputAutoComplete | IInputCheckbox | IInputColor | IInputComponent | IInputDate | IInputEmail | IInputFile | IInputIcon | IInputIp | IInputMobile | IInputMoment | IInputMultiSelect | IInputName | IInputNumber | IInputPassword | IInputSelect | IInputText | IInputTextarea | IInputUrl;
 type Inputs = NgxFormInputs | {
     readonly header: string;
     readonly input: NgxFormInputs;
@@ -41,5 +41,5 @@ export interface INgxFormValues {
     [key: string]: any;
 }
 export declare const NGX_FORM_CONTROL: InjectionToken<FormControl>;
-export declare const NGX_FORM_INPUT: InjectionToken<any>;
+export declare const NGX_FORM_INPUT: InjectionToken<IInputComponent>;
 export {};

package/lib/validators/count/max-count.validator.d.ts

@@ -0,0 +1,2 @@
+import { ValidatorFn } from '@angular/forms';
+export declare const MaxCountValidator: (max: number) => ValidatorFn;

package/lib/validators/count/min-count.validator.d.ts

@@ -0,0 +1,2 @@
+import { ValidatorFn } from '@angular/forms';
+export declare const MinCountValidator: (min: number) => ValidatorFn;

package/lib/validators/index.d.ts

@@ -1,3 +1,5 @@
+export * from './count/max-count.validator';
+export * from './count/min-count.validator';
 export * from './date/max-date.validator';
 export * from './date/min-date.validator';
 export * from './moment/max-moment.validator';

package/ngx-form-m3.css

@@ -154,6 +154,31 @@
     }
 }
 
+/* INPUTS: MULTI-SELECT */
+.ngx-helper-form-m3-multi-select-input {
+    .title {
+        padding-bottom: 0.5rem;
+    }
+
+    .options {
+        overflow: auto;
+        max-height: var(--listHeight);
+
+        .option {
+            display: inline-flex;
+            align-items: flex-start;
+            column-gap: 0.5rem;
+
+            cursor: pointer;
+
+            .message {
+                flex: 1;
+                text-align: right;
+            }
+        }
+    }
+}
+
 /* INPUTS: NAME */
 .ngx-helper-form-m3-name-input {
     display: flex;

package/package.json

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

package/public-api.d.ts

@@ -1,3 +1,4 @@
 export * from './lib/ngx-form.component';
 export * from './lib/ngx-form.config';
 export * from './lib/ngx-form.interface';
+export type { IInputComponent } from './lib/inputs/component/input-component.interface';