onshore-forms 0.0.11 → 0.0.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/lib/components/form-input-item/form-input-item.component.mjs +8 -3
- package/esm2020/lib/components/form-item-container/form-item-container.component.mjs +3 -3
- package/esm2020/lib/components/form-validation-output/form-validation-output.component.mjs +5 -8
- package/esm2020/lib/models/form.models.mjs +1 -1
- package/esm2020/lib/onshore-forms.module.mjs +8 -4
- package/esm2020/lib/onshore-forms.service.mjs +3 -2
- package/esm2020/lib/validators/form.validators.mjs +15 -0
- package/esm2020/public-api.mjs +2 -1
- package/fesm2015/onshore-forms.mjs +39 -16
- package/fesm2015/onshore-forms.mjs.map +1 -1
- package/fesm2020/onshore-forms.mjs +38 -16
- package/fesm2020/onshore-forms.mjs.map +1 -1
- package/lib/components/form-validation-output/form-validation-output.component.d.ts +2 -4
- package/lib/models/form.models.d.ts +1 -6
- package/lib/onshore-forms.module.d.ts +2 -1
- package/lib/onshore-forms.service.d.ts +3 -3
- package/lib/validators/form.validators.d.ts +7 -0
- package/package.json +3 -3
- package/public-api.d.ts +1 -0
- package/styles/scss/main.css +1 -0
- package/styles/scss/theme1.css +1 -0
|
@@ -16,6 +16,7 @@ import { TooltipModule } from 'primeng/tooltip';
|
|
|
16
16
|
import * as i3 from 'primeng/togglebutton';
|
|
17
17
|
import { ToggleButtonModule } from 'primeng/togglebutton';
|
|
18
18
|
import * as i1 from '@ngx-translate/core';
|
|
19
|
+
import { TranslateModule } from '@ngx-translate/core';
|
|
19
20
|
import * as i2$2 from 'primeng/inputswitch';
|
|
20
21
|
import { InputSwitchModule } from 'primeng/inputswitch';
|
|
21
22
|
import * as i2$3 from 'primeng/dynamicdialog';
|
|
@@ -170,7 +171,8 @@ class OnshoreFormsService {
|
|
|
170
171
|
}, 100);
|
|
171
172
|
}
|
|
172
173
|
setError(control, error) {
|
|
173
|
-
this.formControl(control).
|
|
174
|
+
const errors = { ...this.formControl(control).errors ?? {}, ...error };
|
|
175
|
+
this.formControl(control).setErrors(errors);
|
|
174
176
|
}
|
|
175
177
|
setLoader(loaders$) {
|
|
176
178
|
loaders$.forEach($loader => {
|
|
@@ -244,16 +246,15 @@ class OnshoreFormValidationOutputComponent {
|
|
|
244
246
|
constructor(cdr, translate) {
|
|
245
247
|
this.cdr = cdr;
|
|
246
248
|
this.translate = translate;
|
|
247
|
-
this.externValidationPattern = "";
|
|
248
249
|
this.validationTranslation = '';
|
|
249
250
|
}
|
|
250
251
|
ngOnChanges(changes) {
|
|
251
252
|
this.validationTranslation = '';
|
|
252
253
|
if (changes['validationErrors'].currentValue && this.validationErrors) {
|
|
253
254
|
Object.keys(this.validationErrors).forEach(error => {
|
|
254
|
-
const exists = Object.values(this.validationItems ?? []).filter(validationItem => validationItem
|
|
255
|
+
const exists = Object.values(this.validationItems ?? []).filter(validationItem => validationItem == error);
|
|
255
256
|
if (exists && exists.length > 0) {
|
|
256
|
-
this.validationTranslation += this.translate.instant('
|
|
257
|
+
this.validationTranslation += this.translate.instant('form.validation.' + error) + '<br>';
|
|
257
258
|
}
|
|
258
259
|
else {
|
|
259
260
|
const errorValues = this.validationErrors[error];
|
|
@@ -265,14 +266,12 @@ class OnshoreFormValidationOutputComponent {
|
|
|
265
266
|
}
|
|
266
267
|
}
|
|
267
268
|
OnshoreFormValidationOutputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormValidationOutputComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
|
|
268
|
-
OnshoreFormValidationOutputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: OnshoreFormValidationOutputComponent, selector: "onshore-form-validation-output", inputs: { validationErrors: "validationErrors",
|
|
269
|
+
OnshoreFormValidationOutputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: OnshoreFormValidationOutputComponent, selector: "onshore-form-validation-output", inputs: { validationErrors: "validationErrors", validationItems: "validationItems" }, usesOnChanges: true, ngImport: i0, template: "<small class=\"onshore-color-danger\"\n *ngIf=\"validationTranslation\"\n [innerHTML]=\"validationTranslation\">\n</small>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
269
270
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormValidationOutputComponent, decorators: [{
|
|
270
271
|
type: Component,
|
|
271
|
-
args: [{ selector: 'onshore-form-validation-output', changeDetection: ChangeDetectionStrategy.OnPush, template: "<small class=\"onshore-color-danger\"\n
|
|
272
|
+
args: [{ selector: 'onshore-form-validation-output', changeDetection: ChangeDetectionStrategy.OnPush, template: "<small class=\"onshore-color-danger\"\n *ngIf=\"validationTranslation\"\n [innerHTML]=\"validationTranslation\">\n</small>\n" }]
|
|
272
273
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.TranslateService }]; }, propDecorators: { validationErrors: [{
|
|
273
274
|
type: Input
|
|
274
|
-
}], externValidationPattern: [{
|
|
275
|
-
type: Input
|
|
276
275
|
}], validationItems: [{
|
|
277
276
|
type: Input
|
|
278
277
|
}] } });
|
|
@@ -325,10 +324,10 @@ class OnshoreFormItemContainer {
|
|
|
325
324
|
}
|
|
326
325
|
}
|
|
327
326
|
OnshoreFormItemContainer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormItemContainer, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
328
|
-
OnshoreFormItemContainer.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: OnshoreFormItemContainer, selector: "onshore-form-item-container", inputs: { formTemplate: "formTemplate", ngControl: "ngControl" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"mb-4\">\n <div class=\"flex w-full\"\n [class.flex-column]=\"formTemplate.layout == OnshoreFormTemplateLayout.vertical\"\n [class.flex-row]=\"formTemplate.layout == OnshoreFormTemplateLayout.horizontal\"\n [class.justify-content-between]=\"formTemplate.layout == OnshoreFormTemplateLayout.horizontal\">\n\n <div #formLabel\n class=\"flex justify-content-between\"\n [style]=\"formTemplate.labelStyle ?? 'min-width: 200px'\">\n\n <b [class.mr-2]=\"formTemplate.layout == OnshoreFormTemplateLayout.horizontal\"\n [class.mb-2]=\"formTemplate.layout == OnshoreFormTemplateLayout.vertical\">\n {{formTemplate.label}}\n <small *ngIf=\"formTemplate.required\" class=\"onshore-color-danger\">*</small>\n </b>\n\n <div *ngIf=\"formTemplate.tooltip && formTemplate.layout == OnshoreFormTemplateLayout.vertical\" [pTooltip]=\"formTemplate.tooltip\" [escape]=\"false\" appendTo=\"body\"><i class=\"fa fa-circle-question onshore-color-gray-5\"></i></div>\n\n </div>\n\n <div class=\"flex w-full\">\n <p-toggleButton\n *ngIf=\"formTemplate.locked\"\n (onChange)=\"enabled($event.checked)\"\n onIcon=\"fa fa-lock-open\"\n offIcon=\"fa fa-lock\"\n class=\"mr-2\"\n [style]=\"{height: '36px'}\">\n </p-toggleButton>\n\n <ng-content></ng-content>\n </div>\n\n <div *ngIf=\"formTemplate.tooltip && formTemplate.layout == OnshoreFormTemplateLayout.horizontal\" class=\"ml-2 align-self-center\" [pTooltip]=\"formTemplate.tooltip\" [escape]=\"false\"><i class=\"fa fa-circle-question onshore-color-gray-5\"></i></div>\n </div>\n\n <div *ngIf=\"ngControl.control.touched\" [style]=\"{'margin-left': formTemplate.layout == OnshoreFormTemplateLayout.horizontal ? formLabel.clientWidth + 'px' : '0px'}\">\n <onshore-form-validation-output\n [validationItems]=\"formTemplate.validationItems\"\n [validationErrors]=\"ngControl.control.errors\"
|
|
327
|
+
OnshoreFormItemContainer.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: OnshoreFormItemContainer, selector: "onshore-form-item-container", inputs: { formTemplate: "formTemplate", ngControl: "ngControl" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"mb-4\">\n <div class=\"flex w-full\"\n [class.flex-column]=\"formTemplate.layout == OnshoreFormTemplateLayout.vertical\"\n [class.flex-row]=\"formTemplate.layout == OnshoreFormTemplateLayout.horizontal\"\n [class.justify-content-between]=\"formTemplate.layout == OnshoreFormTemplateLayout.horizontal\">\n\n <div #formLabel\n class=\"flex justify-content-between\"\n [style]=\"formTemplate.labelStyle ?? 'min-width: 200px'\">\n\n <b [class.mr-2]=\"formTemplate.layout == OnshoreFormTemplateLayout.horizontal\"\n [class.mb-2]=\"formTemplate.layout == OnshoreFormTemplateLayout.vertical\">\n {{formTemplate.label}}\n <small *ngIf=\"formTemplate.required\" class=\"onshore-color-danger\">*</small>\n </b>\n\n <div *ngIf=\"formTemplate.tooltip && formTemplate.layout == OnshoreFormTemplateLayout.vertical\" [pTooltip]=\"formTemplate.tooltip\" [escape]=\"false\" appendTo=\"body\"><i class=\"fa fa-circle-question onshore-color-gray-5\"></i></div>\n\n </div>\n\n <div class=\"flex w-full\">\n <p-toggleButton\n *ngIf=\"formTemplate.locked\"\n (onChange)=\"enabled($event.checked)\"\n onIcon=\"fa fa-lock-open\"\n offIcon=\"fa fa-lock\"\n class=\"mr-2\"\n [style]=\"{height: '36px'}\">\n </p-toggleButton>\n\n <ng-content></ng-content>\n </div>\n\n <div *ngIf=\"formTemplate.tooltip && formTemplate.layout == OnshoreFormTemplateLayout.horizontal\" class=\"ml-2 align-self-center\" [pTooltip]=\"formTemplate.tooltip\" [escape]=\"false\"><i class=\"fa fa-circle-question onshore-color-gray-5\"></i></div>\n </div>\n\n <div *ngIf=\"ngControl.control.touched\" [style]=\"{'margin-left': formTemplate.layout == OnshoreFormTemplateLayout.horizontal ? formLabel.clientWidth + 'px' : '0px'}\">\n <onshore-form-validation-output\n [validationItems]=\"formTemplate.validationItems\"\n [validationErrors]=\"ngControl.control.errors\">\n </onshore-form-validation-output>\n </div>\n\n <div [style]=\"{'margin-left': formTemplate.layout == OnshoreFormTemplateLayout.horizontal ? formLabel.clientWidth + 'px' : '0px'}\">\n <small *ngIf=\"formTemplate.description\" class=\"mt-2 onshore-color-gray-5\"><i class=\"fa fa-info-circle\"></i> {{formTemplate.description}}</small>\n </div>\n\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "fitContent", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i3.ToggleButton, selector: "p-toggleButton", inputs: ["onLabel", "offLabel", "onIcon", "offIcon", "ariaLabelledBy", "disabled", "style", "styleClass", "inputId", "tabindex", "iconPos"], outputs: ["onChange"] }, { kind: "component", type: OnshoreFormValidationOutputComponent, selector: "onshore-form-validation-output", inputs: ["validationErrors", "validationItems"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
329
328
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormItemContainer, decorators: [{
|
|
330
329
|
type: Component,
|
|
331
|
-
args: [{ selector: 'onshore-form-item-container', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"mb-4\">\n <div class=\"flex w-full\"\n [class.flex-column]=\"formTemplate.layout == OnshoreFormTemplateLayout.vertical\"\n [class.flex-row]=\"formTemplate.layout == OnshoreFormTemplateLayout.horizontal\"\n [class.justify-content-between]=\"formTemplate.layout == OnshoreFormTemplateLayout.horizontal\">\n\n <div #formLabel\n class=\"flex justify-content-between\"\n [style]=\"formTemplate.labelStyle ?? 'min-width: 200px'\">\n\n <b [class.mr-2]=\"formTemplate.layout == OnshoreFormTemplateLayout.horizontal\"\n [class.mb-2]=\"formTemplate.layout == OnshoreFormTemplateLayout.vertical\">\n {{formTemplate.label}}\n <small *ngIf=\"formTemplate.required\" class=\"onshore-color-danger\">*</small>\n </b>\n\n <div *ngIf=\"formTemplate.tooltip && formTemplate.layout == OnshoreFormTemplateLayout.vertical\" [pTooltip]=\"formTemplate.tooltip\" [escape]=\"false\" appendTo=\"body\"><i class=\"fa fa-circle-question onshore-color-gray-5\"></i></div>\n\n </div>\n\n <div class=\"flex w-full\">\n <p-toggleButton\n *ngIf=\"formTemplate.locked\"\n (onChange)=\"enabled($event.checked)\"\n onIcon=\"fa fa-lock-open\"\n offIcon=\"fa fa-lock\"\n class=\"mr-2\"\n [style]=\"{height: '36px'}\">\n </p-toggleButton>\n\n <ng-content></ng-content>\n </div>\n\n <div *ngIf=\"formTemplate.tooltip && formTemplate.layout == OnshoreFormTemplateLayout.horizontal\" class=\"ml-2 align-self-center\" [pTooltip]=\"formTemplate.tooltip\" [escape]=\"false\"><i class=\"fa fa-circle-question onshore-color-gray-5\"></i></div>\n </div>\n\n <div *ngIf=\"ngControl.control.touched\" [style]=\"{'margin-left': formTemplate.layout == OnshoreFormTemplateLayout.horizontal ? formLabel.clientWidth + 'px' : '0px'}\">\n <onshore-form-validation-output\n [validationItems]=\"formTemplate.validationItems\"\n [validationErrors]=\"ngControl.control.errors\"
|
|
330
|
+
args: [{ selector: 'onshore-form-item-container', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"mb-4\">\n <div class=\"flex w-full\"\n [class.flex-column]=\"formTemplate.layout == OnshoreFormTemplateLayout.vertical\"\n [class.flex-row]=\"formTemplate.layout == OnshoreFormTemplateLayout.horizontal\"\n [class.justify-content-between]=\"formTemplate.layout == OnshoreFormTemplateLayout.horizontal\">\n\n <div #formLabel\n class=\"flex justify-content-between\"\n [style]=\"formTemplate.labelStyle ?? 'min-width: 200px'\">\n\n <b [class.mr-2]=\"formTemplate.layout == OnshoreFormTemplateLayout.horizontal\"\n [class.mb-2]=\"formTemplate.layout == OnshoreFormTemplateLayout.vertical\">\n {{formTemplate.label}}\n <small *ngIf=\"formTemplate.required\" class=\"onshore-color-danger\">*</small>\n </b>\n\n <div *ngIf=\"formTemplate.tooltip && formTemplate.layout == OnshoreFormTemplateLayout.vertical\" [pTooltip]=\"formTemplate.tooltip\" [escape]=\"false\" appendTo=\"body\"><i class=\"fa fa-circle-question onshore-color-gray-5\"></i></div>\n\n </div>\n\n <div class=\"flex w-full\">\n <p-toggleButton\n *ngIf=\"formTemplate.locked\"\n (onChange)=\"enabled($event.checked)\"\n onIcon=\"fa fa-lock-open\"\n offIcon=\"fa fa-lock\"\n class=\"mr-2\"\n [style]=\"{height: '36px'}\">\n </p-toggleButton>\n\n <ng-content></ng-content>\n </div>\n\n <div *ngIf=\"formTemplate.tooltip && formTemplate.layout == OnshoreFormTemplateLayout.horizontal\" class=\"ml-2 align-self-center\" [pTooltip]=\"formTemplate.tooltip\" [escape]=\"false\"><i class=\"fa fa-circle-question onshore-color-gray-5\"></i></div>\n </div>\n\n <div *ngIf=\"ngControl.control.touched\" [style]=\"{'margin-left': formTemplate.layout == OnshoreFormTemplateLayout.horizontal ? formLabel.clientWidth + 'px' : '0px'}\">\n <onshore-form-validation-output\n [validationItems]=\"formTemplate.validationItems\"\n [validationErrors]=\"ngControl.control.errors\">\n </onshore-form-validation-output>\n </div>\n\n <div [style]=\"{'margin-left': formTemplate.layout == OnshoreFormTemplateLayout.horizontal ? formLabel.clientWidth + 'px' : '0px'}\">\n <small *ngIf=\"formTemplate.description\" class=\"mt-2 onshore-color-gray-5\"><i class=\"fa fa-info-circle\"></i> {{formTemplate.description}}</small>\n </div>\n\n</div>\n" }]
|
|
332
331
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { formTemplate: [{
|
|
333
332
|
type: Input
|
|
334
333
|
}], ngControl: [{
|
|
@@ -339,6 +338,11 @@ class OnshoreFormInputItemComponent {
|
|
|
339
338
|
constructor(ngControl, cdr) {
|
|
340
339
|
this.ngControl = ngControl;
|
|
341
340
|
this.cdr = cdr;
|
|
341
|
+
this.step = 1;
|
|
342
|
+
this.min = 0;
|
|
343
|
+
this.max = 999999;
|
|
344
|
+
this.minLength = 0;
|
|
345
|
+
this.maxLength = 999999;
|
|
342
346
|
this.OnshoreFormTemplateType = OnshoreFormTemplateType;
|
|
343
347
|
this.OnshoreFormTemplateLayout = OnshoreFormTemplateLayout;
|
|
344
348
|
this.passwordVisible = false;
|
|
@@ -366,10 +370,10 @@ class OnshoreFormInputItemComponent {
|
|
|
366
370
|
}
|
|
367
371
|
}
|
|
368
372
|
OnshoreFormInputItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormInputItemComponent, deps: [{ token: i1$1.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
369
|
-
OnshoreFormInputItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: OnshoreFormInputItemComponent, selector: "onshore-form-input-item", inputs: { formTemplate: "formTemplate", step: "step", min: "min", max: "max", minLength: "minLength", maxLength: "maxLength" }, usesOnChanges: true, ngImport: i0, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\" [ngControl]=\"ngControl\">\n <span class=\"p-inputgroup w-full\">\n\n <textarea *ngIf=\"formTemplate.type == OnshoreFormTemplateType.textarea\"\n class=\"w-full\"\n [name]=\"formTemplate.name\"\n [placeholder]=\"formTemplate.placeholder ?? ''\"\n [disabled]=\"disabled\"\n [rows]=\"3\"\n [cols]=\"30\"\n pInputTextarea\n [autoResize]=\"true\"\n [formControl]=\"ngControl.control\"\n [class.p-invalid]=\"ngControl.control?.touched && ngControl.control?.invalid\"\n [minLength]=\"minLength
|
|
373
|
+
OnshoreFormInputItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: OnshoreFormInputItemComponent, selector: "onshore-form-input-item", inputs: { formTemplate: "formTemplate", step: "step", min: "min", max: "max", minLength: "minLength", maxLength: "maxLength" }, usesOnChanges: true, ngImport: i0, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\" [ngControl]=\"ngControl\">\n <span class=\"p-inputgroup w-full\">\n\n <textarea *ngIf=\"formTemplate.type == OnshoreFormTemplateType.textarea\"\n class=\"w-full\"\n [name]=\"formTemplate.name\"\n [placeholder]=\"formTemplate.placeholder ?? ''\"\n [disabled]=\"disabled\"\n [rows]=\"3\"\n [cols]=\"30\"\n pInputTextarea\n [autoResize]=\"true\"\n [formControl]=\"ngControl.control\"\n [class.p-invalid]=\"ngControl.control?.touched && ngControl.control?.invalid\"\n [minLength]=\"minLength\"\n [maxLength]=\"maxLength\"></textarea>\n\n <input *ngIf=\"formTemplate.type == OnshoreFormTemplateType.text || formTemplate.type == OnshoreFormTemplateType.email || formTemplate.type == OnshoreFormTemplateType.phone\"\n class=\"w-full\"\n [type]=\"formTemplate.type\"\n [name]=\"formTemplate.name\"\n [placeholder]=\"formTemplate.placeholder ?? ''\"\n [disabled]=\"disabled\"\n pInputText\n [formControl]=\"ngControl.control\"\n [autocomplete]=\"'prevent-template-' + formTemplate.name\"\n [minLength]=\"minLength\"\n [maxLength]=\"maxLength\"/>\n\n <input *ngIf=\"formTemplate.type == OnshoreFormTemplateType.password\"\n class=\"w-full\"\n [type]=\"passwordVisible ? 'text' : formTemplate.type\"\n [name]=\"formTemplate.name\"\n [placeholder]=\"formTemplate.placeholder ?? ''\"\n [disabled]=\"disabled\"\n pInputText\n [formControl]=\"ngControl.control\"\n [autocomplete]=\"'prevent-template-' + formTemplate.name\"\n [minLength]=\"minLength\"\n [maxLength]=\"maxLength\"/>\n\n <p-inputNumber *ngIf=\"formTemplate.type == OnshoreFormTemplateType.number\"\n class=\"w-full\"\n [name]=\"formTemplate.name\"\n [placeholder]=\"formTemplate.placeholder ?? 0\"\n [disabled]=\"disabled\"\n [formControl]=\"ngControl.control\"\n [autocomplete]=\"'prevent-template-' + formTemplate.name\"\n [showButtons]=\"true\"\n [step]=\"step ?? 1\"\n [min]=\"min\"\n [max]=\"max\">\n </p-inputNumber>\n\n <span class=\"p-inputgroup-addon\" *ngIf=\"!disabled\">\n <i class=\"fa\"\n [class.fa-check]=\"formTemplate.required && (ngControl.control.valid || ngControl.control.untouched)\"\n [class.fa-exclamation-triangle]=\"ngControl.control.touched && ngControl.control.invalid\"\n [class.onshore-color-gray-3]=\"ngControl.control.untouched\"\n [class.onshore-color-success]=\"ngControl.control.touched && ngControl.control.valid\"\n [class.onshore-color-danger]=\"ngControl.control.touched && ngControl.control.invalid\">\n </i>\n </span>\n\n <span *ngIf=\"formTemplate.type == OnshoreFormTemplateType.password\"\n (click)=\"passwordVisible = !passwordVisible\"\n class=\"p-inputgroup-addon cursor-pointer\">\n <i class=\"fa\"\n [class.fa-eye-slash]=\"passwordVisible\"\n [class.fa-eye]=\"!passwordVisible\"\n ></i>\n </span>\n\n </span>\n</onshore-form-item-container>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3$1.InputNumber, selector: "p-inputNumber", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "disabled"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]" }, { kind: "directive", type: i5.InputTextarea, selector: "[pInputTextarea]", inputs: ["autoResize"], outputs: ["onResize"] }, { kind: "component", type: OnshoreFormItemContainer, selector: "onshore-form-item-container", inputs: ["formTemplate", "ngControl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
370
374
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormInputItemComponent, decorators: [{
|
|
371
375
|
type: Component,
|
|
372
|
-
args: [{ selector: 'onshore-form-input-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\" [ngControl]=\"ngControl\">\n <span class=\"p-inputgroup w-full\">\n\n <textarea *ngIf=\"formTemplate.type == OnshoreFormTemplateType.textarea\"\n class=\"w-full\"\n [name]=\"formTemplate.name\"\n [placeholder]=\"formTemplate.placeholder ?? ''\"\n [disabled]=\"disabled\"\n [rows]=\"3\"\n [cols]=\"30\"\n pInputTextarea\n [autoResize]=\"true\"\n [formControl]=\"ngControl.control\"\n [class.p-invalid]=\"ngControl.control?.touched && ngControl.control?.invalid\"\n [minLength]=\"minLength
|
|
376
|
+
args: [{ selector: 'onshore-form-input-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\" [ngControl]=\"ngControl\">\n <span class=\"p-inputgroup w-full\">\n\n <textarea *ngIf=\"formTemplate.type == OnshoreFormTemplateType.textarea\"\n class=\"w-full\"\n [name]=\"formTemplate.name\"\n [placeholder]=\"formTemplate.placeholder ?? ''\"\n [disabled]=\"disabled\"\n [rows]=\"3\"\n [cols]=\"30\"\n pInputTextarea\n [autoResize]=\"true\"\n [formControl]=\"ngControl.control\"\n [class.p-invalid]=\"ngControl.control?.touched && ngControl.control?.invalid\"\n [minLength]=\"minLength\"\n [maxLength]=\"maxLength\"></textarea>\n\n <input *ngIf=\"formTemplate.type == OnshoreFormTemplateType.text || formTemplate.type == OnshoreFormTemplateType.email || formTemplate.type == OnshoreFormTemplateType.phone\"\n class=\"w-full\"\n [type]=\"formTemplate.type\"\n [name]=\"formTemplate.name\"\n [placeholder]=\"formTemplate.placeholder ?? ''\"\n [disabled]=\"disabled\"\n pInputText\n [formControl]=\"ngControl.control\"\n [autocomplete]=\"'prevent-template-' + formTemplate.name\"\n [minLength]=\"minLength\"\n [maxLength]=\"maxLength\"/>\n\n <input *ngIf=\"formTemplate.type == OnshoreFormTemplateType.password\"\n class=\"w-full\"\n [type]=\"passwordVisible ? 'text' : formTemplate.type\"\n [name]=\"formTemplate.name\"\n [placeholder]=\"formTemplate.placeholder ?? ''\"\n [disabled]=\"disabled\"\n pInputText\n [formControl]=\"ngControl.control\"\n [autocomplete]=\"'prevent-template-' + formTemplate.name\"\n [minLength]=\"minLength\"\n [maxLength]=\"maxLength\"/>\n\n <p-inputNumber *ngIf=\"formTemplate.type == OnshoreFormTemplateType.number\"\n class=\"w-full\"\n [name]=\"formTemplate.name\"\n [placeholder]=\"formTemplate.placeholder ?? 0\"\n [disabled]=\"disabled\"\n [formControl]=\"ngControl.control\"\n [autocomplete]=\"'prevent-template-' + formTemplate.name\"\n [showButtons]=\"true\"\n [step]=\"step ?? 1\"\n [min]=\"min\"\n [max]=\"max\">\n </p-inputNumber>\n\n <span class=\"p-inputgroup-addon\" *ngIf=\"!disabled\">\n <i class=\"fa\"\n [class.fa-check]=\"formTemplate.required && (ngControl.control.valid || ngControl.control.untouched)\"\n [class.fa-exclamation-triangle]=\"ngControl.control.touched && ngControl.control.invalid\"\n [class.onshore-color-gray-3]=\"ngControl.control.untouched\"\n [class.onshore-color-success]=\"ngControl.control.touched && ngControl.control.valid\"\n [class.onshore-color-danger]=\"ngControl.control.touched && ngControl.control.invalid\">\n </i>\n </span>\n\n <span *ngIf=\"formTemplate.type == OnshoreFormTemplateType.password\"\n (click)=\"passwordVisible = !passwordVisible\"\n class=\"p-inputgroup-addon cursor-pointer\">\n <i class=\"fa\"\n [class.fa-eye-slash]=\"passwordVisible\"\n [class.fa-eye]=\"!passwordVisible\"\n ></i>\n </span>\n\n </span>\n</onshore-form-item-container>\n" }]
|
|
373
377
|
}], ctorParameters: function () { return [{ type: i1$1.NgControl, decorators: [{
|
|
374
378
|
type: Self
|
|
375
379
|
}, {
|
|
@@ -894,7 +898,8 @@ OnshoreFormsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", vers
|
|
|
894
898
|
DialogModule,
|
|
895
899
|
SelectButtonModule,
|
|
896
900
|
ToggleButtonModule,
|
|
897
|
-
CalendarModule
|
|
901
|
+
CalendarModule,
|
|
902
|
+
TranslateModule], exports: [OnshoreFormsComponent,
|
|
898
903
|
OnshoreFormInputItemComponent,
|
|
899
904
|
OnshoreFormSwitchItemComponent,
|
|
900
905
|
OnshoreFormValidationOutputComponent,
|
|
@@ -925,7 +930,8 @@ OnshoreFormsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", vers
|
|
|
925
930
|
DialogModule,
|
|
926
931
|
SelectButtonModule,
|
|
927
932
|
ToggleButtonModule,
|
|
928
|
-
CalendarModule
|
|
933
|
+
CalendarModule,
|
|
934
|
+
TranslateModule] });
|
|
929
935
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormsModule, decorators: [{
|
|
930
936
|
type: NgModule,
|
|
931
937
|
args: [{
|
|
@@ -961,7 +967,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
|
|
|
961
967
|
DialogModule,
|
|
962
968
|
SelectButtonModule,
|
|
963
969
|
ToggleButtonModule,
|
|
964
|
-
CalendarModule
|
|
970
|
+
CalendarModule,
|
|
971
|
+
TranslateModule
|
|
965
972
|
],
|
|
966
973
|
exports: [
|
|
967
974
|
OnshoreFormsComponent,
|
|
@@ -982,6 +989,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
|
|
|
982
989
|
}]
|
|
983
990
|
}] });
|
|
984
991
|
|
|
992
|
+
class OnshoreValidators {
|
|
993
|
+
}
|
|
994
|
+
OnshoreValidators.slug = (control) => {
|
|
995
|
+
return /^[a-zA-Z0-9_.+-].{1,}/.test(control.value) ? null : { slug: true };
|
|
996
|
+
};
|
|
997
|
+
OnshoreValidators.numeric = (control) => {
|
|
998
|
+
return /^[0-9]*$/.test(control.value) ? null : { numeric: true };
|
|
999
|
+
};
|
|
1000
|
+
OnshoreValidators.email = (control) => {
|
|
1001
|
+
return /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/.test(control.value) ? null : { email: true };
|
|
1002
|
+
};
|
|
1003
|
+
OnshoreValidators.cleanComment = (control) => {
|
|
1004
|
+
return /[A-Z]{5}\d{4}[A-Z]{1}/.test(control.value) ? null : { cleanComment: true };
|
|
1005
|
+
};
|
|
1006
|
+
|
|
985
1007
|
/*
|
|
986
1008
|
* Public API Surface of onshore-forms
|
|
987
1009
|
*/
|
|
@@ -990,5 +1012,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
|
|
|
990
1012
|
* Generated bundle index. Do not edit.
|
|
991
1013
|
*/
|
|
992
1014
|
|
|
993
|
-
export { OnshoreFormAutocompleteItemComponent, OnshoreFormCheckboxItemComponent, OnshoreFormColorpickerItemComponent, OnshoreFormDatetimeItemComponent, OnshoreFormDropdownItemComponent, OnshoreFormImageItemComponent, OnshoreFormInputItemComponent, OnshoreFormItemContainer, OnshoreFormSwitchItemComponent, OnshoreFormTemplateLayout, OnshoreFormTemplateType, OnshoreFormValidationOutputComponent, OnshoreFormsComponent, OnshoreFormsModule, OnshoreFormsService, OnshoreImageError };
|
|
1015
|
+
export { OnshoreFormAutocompleteItemComponent, OnshoreFormCheckboxItemComponent, OnshoreFormColorpickerItemComponent, OnshoreFormDatetimeItemComponent, OnshoreFormDropdownItemComponent, OnshoreFormImageItemComponent, OnshoreFormInputItemComponent, OnshoreFormItemContainer, OnshoreFormSwitchItemComponent, OnshoreFormTemplateLayout, OnshoreFormTemplateType, OnshoreFormValidationOutputComponent, OnshoreFormsComponent, OnshoreFormsModule, OnshoreFormsService, OnshoreImageError, OnshoreValidators };
|
|
994
1016
|
//# sourceMappingURL=onshore-forms.mjs.map
|