@webilix/ngx-form-m3 0.0.24 → 0.0.25

package/fesm2022/webilix-ngx-form-m3.mjs

@@ -1288,6 +1288,75 @@ class InputPasswordMethods extends InputMethods {
     }
 }
 
+class InputPriceComponent {
+    formControl = inject(INPUT_CONTROL);
+    input = inject(INPUT_TYPE);
+    config = inject(INPUT_CONFIG);
+    values;
+    isButtonDisabled;
+    maxLength = 15;
+    hintText;
+    isFocused = false;
+    inputTransformFn = (value) => Helper.STRING.changeNumbers(value.toString(), 'EN');
+    ngOnInit() {
+        if (!this.input.fractionDigits && this.input.maximum)
+            this.maxLength = Helper.NUMBER.format(this.input.maximum, 'EN').length;
+        this.updateHint();
+    }
+    setValue(input) {
+        const value = input.length === 0 ? null : +input.replace(/,/gi, '');
+        this.formControl.setValue(Helper.IS.number(value) ? value : null);
+        this.formControl.markAllAsTouched();
+    }
+    updateHint() {
+        const value = this.formControl.value;
+        this.hintText =
+            this.input.hideText || !Helper.IS.number(value)
+                ? undefined
+                : Helper.NUMBER.getTitle(Math.abs(value)) + (this.input.currency ? ` ${this.input.currency}` : '');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: InputPriceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: InputPriceComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-price" } }, providers: [provideNgxMask()], ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n    <mat-label>{{ input.title || '\u0642\u06CC\u0645\u062A' }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint|| (isFocused && hintText)) { <mat-hint>{{ isFocused && hintText ? hintText : input.hint }}</mat-hint> }\n\n    <!-- CURRENCY -->\n    @if (input.currency) {\n    <span matTextSuffix class=\"ngx-form-m3-input-suffix\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n        <span>{{ input.currency }}</span>\n    </span>\n    }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <!-- INPUT -->\n    <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n    <input\n        matInput\n        type=\"text\"\n        inputmode=\"numeric\"\n        class=\"ngx-form-m3-en\"\n        [ngModel]=\"formControl.value?.toString() || ''\"\n        [AutoFocusDirective]=\"config.autoFocus === input.name\"\n        [mask]=\"\n            input.fractionDigits === true\n                ? 'separator.3'\n                : !!input.fractionDigits && input.fractionDigits > 0\n                ? 'separator.' + input.fractionDigits.toString()\n                : 'separator.0'\n        \"\n        thousandSeparator=\",\"\n        decimalMarker=\".\"\n        [allowNegativeNumbers]=\"false\"\n        [inputTransformFn]=\"inputTransformFn\"\n        [maxlength]=\"maxLength\"\n        (input)=\"setValue(numberInput.value); updateHint()\"\n        [disabled]=\"formControl.disabled\"\n        (focus)=\"isFocused = true; updateHint()\"\n        (blur)=\"isFocused = false\"\n        #numberInput\n    />\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: [".ngx-form-m3-input-suffix{padding-right:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "directive", type: AutoCompleteDirective, selector: "input[type=\"text\"]" }, { kind: "directive", type: AutoFocusDirective, selector: "[AutoFocusDirective]", inputs: ["AutoFocusDirective"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: InputPriceComponent, decorators: [{
+            type: Component,
+            args: [{ host: { selector: 'input-price' }, imports: [
+                        FormsModule,
+                        ReactiveFormsModule,
+                        MatFormField,
+                        MatIcon,
+                        MatIconButton,
+                        MatInputModule,
+                        NgxMaskDirective,
+                        AutoCompleteDirective,
+                        AutoFocusDirective,
+                        InputErrorPipe,
+                        MultiLinePipe,
+                    ], providers: [provideNgxMask()], template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n    <mat-label>{{ input.title || '\u0642\u06CC\u0645\u062A' }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint|| (isFocused && hintText)) { <mat-hint>{{ isFocused && hintText ? hintText : input.hint }}</mat-hint> }\n\n    <!-- CURRENCY -->\n    @if (input.currency) {\n    <span matTextSuffix class=\"ngx-form-m3-input-suffix\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n        <span>{{ input.currency }}</span>\n    </span>\n    }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <!-- INPUT -->\n    <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n    <input\n        matInput\n        type=\"text\"\n        inputmode=\"numeric\"\n        class=\"ngx-form-m3-en\"\n        [ngModel]=\"formControl.value?.toString() || ''\"\n        [AutoFocusDirective]=\"config.autoFocus === input.name\"\n        [mask]=\"\n            input.fractionDigits === true\n                ? 'separator.3'\n                : !!input.fractionDigits && input.fractionDigits > 0\n                ? 'separator.' + input.fractionDigits.toString()\n                : 'separator.0'\n        \"\n        thousandSeparator=\",\"\n        decimalMarker=\".\"\n        [allowNegativeNumbers]=\"false\"\n        [inputTransformFn]=\"inputTransformFn\"\n        [maxlength]=\"maxLength\"\n        (input)=\"setValue(numberInput.value); updateHint()\"\n        [disabled]=\"formControl.disabled\"\n        (focus)=\"isFocused = true; updateHint()\"\n        (blur)=\"isFocused = false\"\n        #numberInput\n    />\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: [".ngx-form-m3-input-suffix{padding-right:.5rem}\n"] }]
+        }], propDecorators: { values: [{
+                type: Input,
+                args: [{ required: true }]
+            }], isButtonDisabled: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
+
+class InputPriceMethods extends InputMethods {
+    control(input, validators) {
+        if (input.minimum)
+            validators.push(MinNumberValidator(input.minimum));
+        if (input.maximum)
+            validators.push(MaxNumberValidator(input.maximum));
+        if (input.multiplyOf)
+            validators.push(MultiplyOfNumberValidator(input.multiplyOf));
+        const value = input.value !== undefined && Helper.IS.number(input.value) ? input.value : null;
+        return new FormControl(value, validators);
+    }
+    value(value, input) {
+        return Helper.IS.number(value) ? value : null;
+    }
+}
+
 class InputSelectComponent {
     formControl = inject(INPUT_CONTROL);
     input = inject(INPUT_TYPE);
@@ -1540,6 +1609,7 @@ const InputInfo = {
     NAME: { title: 'نام و نام خانوادگی', methods: new InputNameMethods(), component: InputNameComponent },
     NUMBER: { title: 'مقدار عددی', methods: new InputNumberMethods(), component: InputNumberComponent },
     PASSWORD: { title: 'کلمه عبور', methods: new InputPasswordMethods(), component: InputPasswordComponent },
+    PRICE: { title: 'قیمت', methods: new InputPriceMethods(), component: InputPriceComponent },
     SELECT: { title: 'لیست کشویی', methods: new InputSelectMethods(), component: InputSelectComponent },
     TEXT: { title: 'متن یک خطی', methods: new InputTextMethods(), component: InputTextComponent },
     TEXTAREA: { title: 'متن چند خطی', methods: new InputTextareaMethods(), component: InputTextareaComponent },