onshore-forms 0.0.11 → 0.0.12
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
|
@@ -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';
|
|
@@ -178,7 +179,9 @@ class OnshoreFormsService {
|
|
|
178
179
|
}, 100);
|
|
179
180
|
}
|
|
180
181
|
setError(control, error) {
|
|
181
|
-
|
|
182
|
+
var _a;
|
|
183
|
+
const errors = Object.assign(Object.assign({}, (_a = this.formControl(control).errors) !== null && _a !== void 0 ? _a : {}), error);
|
|
184
|
+
this.formControl(control).setErrors(errors);
|
|
182
185
|
}
|
|
183
186
|
setLoader(loaders$) {
|
|
184
187
|
loaders$.forEach($loader => {
|
|
@@ -254,7 +257,6 @@ class OnshoreFormValidationOutputComponent {
|
|
|
254
257
|
constructor(cdr, translate) {
|
|
255
258
|
this.cdr = cdr;
|
|
256
259
|
this.translate = translate;
|
|
257
|
-
this.externValidationPattern = "";
|
|
258
260
|
this.validationTranslation = '';
|
|
259
261
|
}
|
|
260
262
|
ngOnChanges(changes) {
|
|
@@ -262,9 +264,9 @@ class OnshoreFormValidationOutputComponent {
|
|
|
262
264
|
if (changes['validationErrors'].currentValue && this.validationErrors) {
|
|
263
265
|
Object.keys(this.validationErrors).forEach(error => {
|
|
264
266
|
var _a;
|
|
265
|
-
const exists = Object.values((_a = this.validationItems) !== null && _a !== void 0 ? _a : []).filter(validationItem => validationItem
|
|
267
|
+
const exists = Object.values((_a = this.validationItems) !== null && _a !== void 0 ? _a : []).filter(validationItem => validationItem == error);
|
|
266
268
|
if (exists && exists.length > 0) {
|
|
267
|
-
this.validationTranslation += this.translate.instant('
|
|
269
|
+
this.validationTranslation += this.translate.instant('form.validation.' + error) + '<br>';
|
|
268
270
|
}
|
|
269
271
|
else {
|
|
270
272
|
const errorValues = this.validationErrors[error];
|
|
@@ -276,14 +278,12 @@ class OnshoreFormValidationOutputComponent {
|
|
|
276
278
|
}
|
|
277
279
|
}
|
|
278
280
|
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 });
|
|
279
|
-
OnshoreFormValidationOutputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: OnshoreFormValidationOutputComponent, selector: "onshore-form-validation-output", inputs: { validationErrors: "validationErrors",
|
|
281
|
+
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 });
|
|
280
282
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormValidationOutputComponent, decorators: [{
|
|
281
283
|
type: Component,
|
|
282
|
-
args: [{ selector: 'onshore-form-validation-output', changeDetection: ChangeDetectionStrategy.OnPush, template: "<small class=\"onshore-color-danger\"\n
|
|
284
|
+
args: [{ selector: 'onshore-form-validation-output', changeDetection: ChangeDetectionStrategy.OnPush, template: "<small class=\"onshore-color-danger\"\n *ngIf=\"validationTranslation\"\n [innerHTML]=\"validationTranslation\">\n</small>\n" }]
|
|
283
285
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.TranslateService }]; }, propDecorators: { validationErrors: [{
|
|
284
286
|
type: Input
|
|
285
|
-
}], externValidationPattern: [{
|
|
286
|
-
type: Input
|
|
287
287
|
}], validationItems: [{
|
|
288
288
|
type: Input
|
|
289
289
|
}] } });
|
|
@@ -337,10 +337,10 @@ class OnshoreFormItemContainer {
|
|
|
337
337
|
}
|
|
338
338
|
}
|
|
339
339
|
OnshoreFormItemContainer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormItemContainer, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
340
|
-
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
|
|
340
|
+
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 [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 });
|
|
341
341
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormItemContainer, decorators: [{
|
|
342
342
|
type: Component,
|
|
343
|
-
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
|
|
343
|
+
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 [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" }]
|
|
344
344
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { formTemplate: [{
|
|
345
345
|
type: Input
|
|
346
346
|
}], ngControl: [{
|
|
@@ -351,6 +351,11 @@ class OnshoreFormInputItemComponent {
|
|
|
351
351
|
constructor(ngControl, cdr) {
|
|
352
352
|
this.ngControl = ngControl;
|
|
353
353
|
this.cdr = cdr;
|
|
354
|
+
this.step = 1;
|
|
355
|
+
this.min = 0;
|
|
356
|
+
this.max = 999999;
|
|
357
|
+
this.minLength = 0;
|
|
358
|
+
this.maxLength = 999999;
|
|
354
359
|
this.OnshoreFormTemplateType = OnshoreFormTemplateType;
|
|
355
360
|
this.OnshoreFormTemplateLayout = OnshoreFormTemplateLayout;
|
|
356
361
|
this.passwordVisible = false;
|
|
@@ -380,10 +385,10 @@ class OnshoreFormInputItemComponent {
|
|
|
380
385
|
}
|
|
381
386
|
}
|
|
382
387
|
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 });
|
|
383
|
-
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
|
|
388
|
+
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 });
|
|
384
389
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormInputItemComponent, decorators: [{
|
|
385
390
|
type: Component,
|
|
386
|
-
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
|
|
391
|
+
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" }]
|
|
387
392
|
}], ctorParameters: function () {
|
|
388
393
|
return [{ type: i1$1.NgControl, decorators: [{
|
|
389
394
|
type: Self
|
|
@@ -947,7 +952,8 @@ OnshoreFormsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", vers
|
|
|
947
952
|
DialogModule,
|
|
948
953
|
SelectButtonModule,
|
|
949
954
|
ToggleButtonModule,
|
|
950
|
-
CalendarModule
|
|
955
|
+
CalendarModule,
|
|
956
|
+
TranslateModule], exports: [OnshoreFormsComponent,
|
|
951
957
|
OnshoreFormInputItemComponent,
|
|
952
958
|
OnshoreFormSwitchItemComponent,
|
|
953
959
|
OnshoreFormValidationOutputComponent,
|
|
@@ -978,7 +984,8 @@ OnshoreFormsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", vers
|
|
|
978
984
|
DialogModule,
|
|
979
985
|
SelectButtonModule,
|
|
980
986
|
ToggleButtonModule,
|
|
981
|
-
CalendarModule
|
|
987
|
+
CalendarModule,
|
|
988
|
+
TranslateModule] });
|
|
982
989
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormsModule, decorators: [{
|
|
983
990
|
type: NgModule,
|
|
984
991
|
args: [{
|
|
@@ -1014,7 +1021,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
|
|
|
1014
1021
|
DialogModule,
|
|
1015
1022
|
SelectButtonModule,
|
|
1016
1023
|
ToggleButtonModule,
|
|
1017
|
-
CalendarModule
|
|
1024
|
+
CalendarModule,
|
|
1025
|
+
TranslateModule
|
|
1018
1026
|
],
|
|
1019
1027
|
exports: [
|
|
1020
1028
|
OnshoreFormsComponent,
|
|
@@ -1035,6 +1043,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
|
|
|
1035
1043
|
}]
|
|
1036
1044
|
}] });
|
|
1037
1045
|
|
|
1046
|
+
class OnshoreValidators {
|
|
1047
|
+
}
|
|
1048
|
+
OnshoreValidators.slug = (control) => {
|
|
1049
|
+
return /^[a-zA-Z0-9_.+-].{1,}/.test(control.value) ? null : { slug: true };
|
|
1050
|
+
};
|
|
1051
|
+
OnshoreValidators.numeric = (control) => {
|
|
1052
|
+
return /^[0-9]*$/.test(control.value) ? null : { numeric: true };
|
|
1053
|
+
};
|
|
1054
|
+
OnshoreValidators.email = (control) => {
|
|
1055
|
+
return /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/.test(control.value) ? null : { email: true };
|
|
1056
|
+
};
|
|
1057
|
+
OnshoreValidators.cleanComment = (control) => {
|
|
1058
|
+
return /[A-Z]{5}\d{4}[A-Z]{1}/.test(control.value) ? null : { cleanComment: true };
|
|
1059
|
+
};
|
|
1060
|
+
|
|
1038
1061
|
/*
|
|
1039
1062
|
* Public API Surface of onshore-forms
|
|
1040
1063
|
*/
|
|
@@ -1043,5 +1066,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
|
|
|
1043
1066
|
* Generated bundle index. Do not edit.
|
|
1044
1067
|
*/
|
|
1045
1068
|
|
|
1046
|
-
export { OnshoreFormAutocompleteItemComponent, OnshoreFormCheckboxItemComponent, OnshoreFormColorpickerItemComponent, OnshoreFormDatetimeItemComponent, OnshoreFormDropdownItemComponent, OnshoreFormImageItemComponent, OnshoreFormInputItemComponent, OnshoreFormItemContainer, OnshoreFormSwitchItemComponent, OnshoreFormTemplateLayout, OnshoreFormTemplateType, OnshoreFormValidationOutputComponent, OnshoreFormsComponent, OnshoreFormsModule, OnshoreFormsService, OnshoreImageError };
|
|
1069
|
+
export { OnshoreFormAutocompleteItemComponent, OnshoreFormCheckboxItemComponent, OnshoreFormColorpickerItemComponent, OnshoreFormDatetimeItemComponent, OnshoreFormDropdownItemComponent, OnshoreFormImageItemComponent, OnshoreFormInputItemComponent, OnshoreFormItemContainer, OnshoreFormSwitchItemComponent, OnshoreFormTemplateLayout, OnshoreFormTemplateType, OnshoreFormValidationOutputComponent, OnshoreFormsComponent, OnshoreFormsModule, OnshoreFormsService, OnshoreImageError, OnshoreValidators };
|
|
1047
1070
|
//# sourceMappingURL=onshore-forms.mjs.map
|