ng-prime-tools 1.0.90 → 1.0.91

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.
Files changed (5) hide show
  1. package/fesm2022/ng-prime-tools.mjs +149 -5
  2. package/fesm2022/ng-prime-tools.mjs.map +1 -1
  3. package/package.json +1 -1
  4. package/types/ng-prime-tools.d.ts +31 -3
  5. package/types/ng-prime-tools.d.ts.map +1 -1
package/fesm2022/ng-prime-tools.mjs CHANGED
@@ -3236,6 +3236,110 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
3236
3236
  type: Input
3237
3237
  }] } });
3238
3238
 
3239
+ class PTPasswordInputComponent {
3240
+ constructor() {
3241
+ this.characterCount = 0;
3242
+ }
3243
+ ngOnInit() {
3244
+ this.setupControl();
3245
+ this.updateCharacterCount();
3246
+ }
3247
+ ngOnDestroy() {
3248
+ this.valueChangesSubscription?.unsubscribe();
3249
+ }
3250
+ get inputId() {
3251
+ return `pt-password-${this.formField?.name || 'field'}`;
3252
+ }
3253
+ setupControl() {
3254
+ const control = this.formGroup.get(this.formField.name);
3255
+ if (!control) {
3256
+ return;
3257
+ }
3258
+ control.setValidators(this.getValidators());
3259
+ this.valueChangesSubscription?.unsubscribe();
3260
+ if (this.formField.disabled) {
3261
+ control.disable({ emitEvent: false });
3262
+ }
3263
+ else {
3264
+ control.enable({ emitEvent: false });
3265
+ this.valueChangesSubscription = control.valueChanges.subscribe(() => {
3266
+ this.updateCharacterCount();
3267
+ });
3268
+ }
3269
+ control.updateValueAndValidity({ emitEvent: false });
3270
+ }
3271
+ updateCharacterCount() {
3272
+ const control = this.formGroup.get(this.formField.name);
3273
+ if (!control) {
3274
+ this.characterCount = 0;
3275
+ return;
3276
+ }
3277
+ const value = control.value;
3278
+ this.characterCount = value != null ? String(value).length : 0;
3279
+ }
3280
+ getPasswordToggleMask() {
3281
+ return this.formField.toggleMask ?? true;
3282
+ }
3283
+ getPasswordFeedback() {
3284
+ return this.formField.feedback ?? false;
3285
+ }
3286
+ getValidators() {
3287
+ const validators = [];
3288
+ if (this.formField.required) {
3289
+ validators.push(Validators.required);
3290
+ }
3291
+ if (this.formField.minLength !== undefined) {
3292
+ validators.push(Validators.minLength(this.formField.minLength));
3293
+ }
3294
+ if (this.formField.maxLength !== undefined) {
3295
+ validators.push(Validators.maxLength(this.formField.maxLength));
3296
+ }
3297
+ if (this.formField.inputValidation) {
3298
+ validators.push(this.validateWithInputValidation(this.formField.inputValidation));
3299
+ }
3300
+ return validators;
3301
+ }
3302
+ validateWithInputValidation(inputValidation) {
3303
+ return Validators.pattern(new RegExp(inputValidation));
3304
+ }
3305
+ getErrorMessage() {
3306
+ const control = this.formGroup.get(this.formField.name);
3307
+ if (control?.hasError('required')) {
3308
+ return this.formField.errorText ?? `${this.formField.label} is required`;
3309
+ }
3310
+ if (control?.hasError('minlength')) {
3311
+ return `${this.formField.label} must be at least ${this.formField.minLength} characters`;
3312
+ }
3313
+ if (control?.hasError('maxlength')) {
3314
+ return `${this.formField.label} must be at most ${this.formField.maxLength} characters`;
3315
+ }
3316
+ if (control?.hasError('pattern')) {
3317
+ return this.formField.errorText ?? `${this.formField.label} is invalid`;
3318
+ }
3319
+ return '';
3320
+ }
3321
+ hasError() {
3322
+ const control = this.formGroup.get(this.formField.name);
3323
+ return !!(control?.invalid && (control.touched || control.dirty));
3324
+ }
3325
+ hasCharacterCounter() {
3326
+ return !this.formField.disabled && this.formField.maxLength !== undefined;
3327
+ }
3328
+ hasInfoRow() {
3329
+ return this.hasError() || this.hasCharacterCounter();
3330
+ }
3331
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTPasswordInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
3332
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTPasswordInputComponent, isStandalone: false, selector: "pt-password-input", inputs: { formGroup: "formGroup", formField: "formField" }, ngImport: i0, template: "@if (!formField.hidden) {\n <div\n [formGroup]=\"formGroup\"\n class=\"form-field\"\n [ngStyle]=\"{\n width: formField.width || '100%',\n height: formField.height || 'auto',\n margin: formField.margin || null,\n }\"\n >\n @if (formField.label) {\n <label [for]=\"inputId\" class=\"field-label\">\n {{ formField.label }}\n </label>\n }\n\n @if (formField.iconClass) {\n <p-iconField [iconPosition]=\"formField.iconPosition || 'left'\">\n <p-inputIcon [styleClass]=\"formField.iconClass\"></p-inputIcon>\n\n <p-password\n [inputId]=\"inputId\"\n [formControlName]=\"formField.name\"\n [placeholder]=\"formField.placeholder ?? ''\"\n [toggleMask]=\"getPasswordToggleMask()\"\n [feedback]=\"getPasswordFeedback()\"\n [attr.name]=\"formField.name\"\n [inputStyle]=\"{\n width: formField.width || '100%',\n height: formField.height || 'auto',\n }\"\n styleClass=\"pt-password-input\"\n ></p-password>\n </p-iconField>\n } @else {\n <p-password\n [inputId]=\"inputId\"\n [formControlName]=\"formField.name\"\n [placeholder]=\"formField.placeholder ?? ''\"\n [toggleMask]=\"getPasswordToggleMask()\"\n [feedback]=\"getPasswordFeedback()\"\n [attr.name]=\"formField.name\"\n [inputStyle]=\"{\n width: formField.width || '100%',\n height: formField.height || 'auto',\n }\"\n styleClass=\"pt-password-input\"\n ></p-password>\n }\n\n @if (hasInfoRow()) {\n <div class=\"form-info-row\">\n @if (hasError()) {\n <small class=\"field-error\">\n {{ getErrorMessage() }}\n </small>\n }\n\n <div class=\"spacer\"></div>\n\n @if (hasCharacterCounter()) {\n <div class=\"character-counter\">\n {{ characterCount }}/{{ formField.maxLength }} characters\n </div>\n }\n </div>\n }\n </div>\n}\n", styles: [":host{display:block;width:100%}.form-field{width:100%}.field-label{display:block;margin-bottom:.5rem;font-weight:700}.form-info-row{display:flex;align-items:center;gap:.5rem;min-height:1.25rem;margin-top:.35rem}.spacer{flex:1 1 auto}.field-error{display:block;color:#dc2626;font-size:.8rem;font-weight:500;line-height:1.2}.character-counter{font-size:.8rem;font-weight:500;color:#64748b;white-space:nowrap}::ng-deep .pt-password-input{display:block!important;width:100%!important}::ng-deep .pt-password-input .p-password{display:block!important;width:100%!important}::ng-deep .pt-password-input .p-password-input{width:100%!important}::ng-deep .pt-password-input input{box-sizing:border-box;width:100%!important}::ng-deep .pt-password-input.ng-invalid.ng-touched input,::ng-deep .pt-password-input.ng-invalid.ng-dirty input,::ng-deep .pt-password-input input.ng-invalid.ng-touched,::ng-deep .pt-password-input input.ng-invalid.ng-dirty{border-color:#dc2626}::ng-deep .pt-password-input .p-password-toggle-mask-icon,::ng-deep .pt-password-input .p-password-toggle-mask{right:1rem}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i10.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i11.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "component", type: i6$1.Password, selector: "p-password", inputs: ["ariaLabel", "ariaLabelledBy", "label", "promptLabel", "mediumRegex", "strongRegex", "weakLabel", "mediumLabel", "maxLength", "strongLabel", "inputId", "feedback", "toggleMask", "inputStyleClass", "styleClass", "inputStyle", "showTransitionOptions", "hideTransitionOptions", "autocomplete", "placeholder", "showClear", "autofocus", "tabindex", "appendTo", "motionOptions", "overlayOptions"], outputs: ["onFocus", "onBlur", "onClear"] }] }); }
3333
+ }
3334
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTPasswordInputComponent, decorators: [{
3335
+ type: Component,
3336
+ args: [{ selector: 'pt-password-input', standalone: false, template: "@if (!formField.hidden) {\n <div\n [formGroup]=\"formGroup\"\n class=\"form-field\"\n [ngStyle]=\"{\n width: formField.width || '100%',\n height: formField.height || 'auto',\n margin: formField.margin || null,\n }\"\n >\n @if (formField.label) {\n <label [for]=\"inputId\" class=\"field-label\">\n {{ formField.label }}\n </label>\n }\n\n @if (formField.iconClass) {\n <p-iconField [iconPosition]=\"formField.iconPosition || 'left'\">\n <p-inputIcon [styleClass]=\"formField.iconClass\"></p-inputIcon>\n\n <p-password\n [inputId]=\"inputId\"\n [formControlName]=\"formField.name\"\n [placeholder]=\"formField.placeholder ?? ''\"\n [toggleMask]=\"getPasswordToggleMask()\"\n [feedback]=\"getPasswordFeedback()\"\n [attr.name]=\"formField.name\"\n [inputStyle]=\"{\n width: formField.width || '100%',\n height: formField.height || 'auto',\n }\"\n styleClass=\"pt-password-input\"\n ></p-password>\n </p-iconField>\n } @else {\n <p-password\n [inputId]=\"inputId\"\n [formControlName]=\"formField.name\"\n [placeholder]=\"formField.placeholder ?? ''\"\n [toggleMask]=\"getPasswordToggleMask()\"\n [feedback]=\"getPasswordFeedback()\"\n [attr.name]=\"formField.name\"\n [inputStyle]=\"{\n width: formField.width || '100%',\n height: formField.height || 'auto',\n }\"\n styleClass=\"pt-password-input\"\n ></p-password>\n }\n\n @if (hasInfoRow()) {\n <div class=\"form-info-row\">\n @if (hasError()) {\n <small class=\"field-error\">\n {{ getErrorMessage() }}\n </small>\n }\n\n <div class=\"spacer\"></div>\n\n @if (hasCharacterCounter()) {\n <div class=\"character-counter\">\n {{ characterCount }}/{{ formField.maxLength }} characters\n </div>\n }\n </div>\n }\n </div>\n}\n", styles: [":host{display:block;width:100%}.form-field{width:100%}.field-label{display:block;margin-bottom:.5rem;font-weight:700}.form-info-row{display:flex;align-items:center;gap:.5rem;min-height:1.25rem;margin-top:.35rem}.spacer{flex:1 1 auto}.field-error{display:block;color:#dc2626;font-size:.8rem;font-weight:500;line-height:1.2}.character-counter{font-size:.8rem;font-weight:500;color:#64748b;white-space:nowrap}::ng-deep .pt-password-input{display:block!important;width:100%!important}::ng-deep .pt-password-input .p-password{display:block!important;width:100%!important}::ng-deep .pt-password-input .p-password-input{width:100%!important}::ng-deep .pt-password-input input{box-sizing:border-box;width:100%!important}::ng-deep .pt-password-input.ng-invalid.ng-touched input,::ng-deep .pt-password-input.ng-invalid.ng-dirty input,::ng-deep .pt-password-input input.ng-invalid.ng-touched,::ng-deep .pt-password-input input.ng-invalid.ng-dirty{border-color:#dc2626}::ng-deep .pt-password-input .p-password-toggle-mask-icon,::ng-deep .pt-password-input .p-password-toggle-mask{right:1rem}\n"] }]
3337
+ }], propDecorators: { formGroup: [{
3338
+ type: Input
3339
+ }], formField: [{
3340
+ type: Input
3341
+ }] } });
3342
+
3239
3343
  class PTDynamicFormFieldComponent {
3240
3344
  constructor() {
3241
3345
  this.FormInputTypeEnum = FormInputTypeEnum;
@@ -3268,11 +3372,11 @@ class PTDynamicFormFieldComponent {
3268
3372
  return field;
3269
3373
  }
3270
3374
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTDynamicFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
3271
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTDynamicFormFieldComponent, isStandalone: false, selector: "pt-dynamic-form-field", inputs: { field: "field", form: "form", inputWidth: "inputWidth" }, ngImport: i0, template: "<div\n [formGroup]=\"form\"\n class=\"form-field\"\n [ngStyle]=\"{\n width:\n field.type !== FormInputTypeEnum.CHECKBOX\n ? field.width || inputWidth\n : 'auto',\n }\"\n>\n @switch (field.type) {\n <!-- TEXT -->\n @case (FormInputTypeEnum.TEXT) {\n <pt-text-input\n [formGroup]=\"form\"\n [formField]=\"asTextField(field)\"\n ></pt-text-input>\n }\n\n <!-- EMAIL -->\n @case (FormInputTypeEnum.EMAIL) {\n <pt-text-input\n [formGroup]=\"form\"\n [formField]=\"asTextField(field)\"\n ></pt-text-input>\n }\n\n <!-- NUMBER -->\n @case (FormInputTypeEnum.NUMBER) {\n <pt-number-input\n [formGroup]=\"form\"\n [formField]=\"asNumberField(field)\"\n ></pt-number-input>\n }\n\n <!-- AMOUNT -->\n @case (FormInputTypeEnum.AMOUNT) {\n <pt-number-input\n [formGroup]=\"form\"\n [formField]=\"asNumberField(field)\"\n ></pt-number-input>\n }\n\n <!-- TEXTAREA -->\n @case (FormInputTypeEnum.TEXTAREA) {\n <pt-text-area-input\n [formGroup]=\"form\"\n [formField]=\"asTextAreaField(field)\"\n ></pt-text-area-input>\n }\n\n <!-- DATE -->\n @case (FormInputTypeEnum.DATE) {\n <pt-date-input\n [formGroup]=\"form\"\n [formField]=\"asDateField(field)\"\n ></pt-date-input>\n }\n\n <!-- MULTISELECT -->\n @case (FormInputTypeEnum.MULTISELECT) {\n <pt-multi-select\n [formGroup]=\"form\"\n [formField]=\"asMultiSelectField(field)\"\n ></pt-multi-select>\n }\n\n <!-- SELECT -->\n @case (FormInputTypeEnum.SELECT) {\n <pt-dropdown\n [formGroup]=\"form\"\n [formField]=\"asSelectField(field)\"\n ></pt-dropdown>\n }\n\n <!-- OTP -->\n @case (FormInputTypeEnum.OTP) {\n <pt-otp-input\n [formGroup]=\"form\"\n [formField]=\"asOtpField(field)\"\n ></pt-otp-input>\n }\n\n <!-- CHECKBOX -->\n @case (FormInputTypeEnum.CHECKBOX) {\n <pt-check-box-input\n [formGroup]=\"form\"\n [formField]=\"asCheckboxField(field)\"\n ></pt-check-box-input>\n }\n\n <!-- SWITCH -->\n @case (FormInputTypeEnum.SWITCH) {\n <pt-switch-input\n [formGroup]=\"form\"\n [formField]=\"asSwitchField(field)\"\n ></pt-switch-input>\n }\n }\n</div>\n", styles: [".form-field{margin-bottom:1rem}.form-field label{display:block;margin-bottom:.5rem;font-weight:700}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: PTCheckBoxInputComponent, selector: "pt-check-box-input", inputs: ["formGroup", "formField"] }, { kind: "component", type: PTDateInputComponent, selector: "pt-date-input", inputs: ["formGroup", "formField", "config", "value"], outputs: ["valueChange", "dateChange"] }, { kind: "component", type: PTNumberInputComponent, selector: "pt-number-input", inputs: ["formGroup", "formField"] }, { kind: "component", type: PTSwitchInputComponent, selector: "pt-switch-input", inputs: ["formGroup", "formField", "config", "value"], outputs: ["valueChange", "switchChange"] }, { kind: "component", type: PTTextAreaInputComponent, selector: "pt-text-area-input", inputs: ["formGroup", "formField"] }, { kind: "component", type: PTTextInputComponent, selector: "pt-text-input", inputs: ["formGroup", "formField"] }, { kind: "component", type: PTDropdownComponent, selector: "pt-dropdown", inputs: ["formGroup", "formField", "config", "value"], outputs: ["valueChange", "selectionChange"] }, { kind: "component", type: PTMultiSelectComponent, selector: "pt-multi-select", inputs: ["formGroup", "formField", "config", "value"], outputs: ["valueChange", "selectionChange"] }, { kind: "component", type: PTOtpInputComponent, selector: "pt-otp-input", inputs: ["formGroup", "formField"] }] }); }
3375
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTDynamicFormFieldComponent, isStandalone: false, selector: "pt-dynamic-form-field", inputs: { field: "field", form: "form", inputWidth: "inputWidth" }, ngImport: i0, template: "<!-- projects/ng-prime-tools/src/lib/pt-form-builder/pt-dynamic-form-field/pt-dynamic-form-field.component.html -->\n\n<div\n [formGroup]=\"form\"\n class=\"form-field\"\n [ngStyle]=\"{\n width:\n field.type !== FormInputTypeEnum.CHECKBOX\n ? field.width || inputWidth\n : 'auto',\n }\"\n>\n @switch (field.type) {\n <!-- TEXT -->\n @case (FormInputTypeEnum.TEXT) {\n <pt-text-input\n [formGroup]=\"form\"\n [formField]=\"asTextField(field)\"\n ></pt-text-input>\n }\n\n <!-- EMAIL -->\n @case (FormInputTypeEnum.EMAIL) {\n <pt-text-input\n [formGroup]=\"form\"\n [formField]=\"asTextField(field)\"\n ></pt-text-input>\n }\n\n <!-- PASSWORD -->\n @case (FormInputTypeEnum.PASSWORD) {\n <pt-password-input\n [formGroup]=\"form\"\n [formField]=\"asTextField(field)\"\n ></pt-password-input>\n }\n\n <!-- NUMBER -->\n @case (FormInputTypeEnum.NUMBER) {\n <pt-number-input\n [formGroup]=\"form\"\n [formField]=\"asNumberField(field)\"\n ></pt-number-input>\n }\n\n <!-- AMOUNT -->\n @case (FormInputTypeEnum.AMOUNT) {\n <pt-number-input\n [formGroup]=\"form\"\n [formField]=\"asNumberField(field)\"\n ></pt-number-input>\n }\n\n <!-- TEXTAREA -->\n @case (FormInputTypeEnum.TEXTAREA) {\n <pt-text-area-input\n [formGroup]=\"form\"\n [formField]=\"asTextAreaField(field)\"\n ></pt-text-area-input>\n }\n\n <!-- DATE -->\n @case (FormInputTypeEnum.DATE) {\n <pt-date-input\n [formGroup]=\"form\"\n [formField]=\"asDateField(field)\"\n ></pt-date-input>\n }\n\n <!-- MULTISELECT -->\n @case (FormInputTypeEnum.MULTISELECT) {\n <pt-multi-select\n [formGroup]=\"form\"\n [formField]=\"asMultiSelectField(field)\"\n ></pt-multi-select>\n }\n\n <!-- SELECT -->\n @case (FormInputTypeEnum.SELECT) {\n <pt-dropdown\n [formGroup]=\"form\"\n [formField]=\"asSelectField(field)\"\n ></pt-dropdown>\n }\n\n <!-- OTP -->\n @case (FormInputTypeEnum.OTP) {\n <pt-otp-input\n [formGroup]=\"form\"\n [formField]=\"asOtpField(field)\"\n ></pt-otp-input>\n }\n\n <!-- CHECKBOX -->\n @case (FormInputTypeEnum.CHECKBOX) {\n <pt-check-box-input\n [formGroup]=\"form\"\n [formField]=\"asCheckboxField(field)\"\n ></pt-check-box-input>\n }\n\n <!-- SWITCH -->\n @case (FormInputTypeEnum.SWITCH) {\n <pt-switch-input\n [formGroup]=\"form\"\n [formField]=\"asSwitchField(field)\"\n ></pt-switch-input>\n }\n }\n</div>\n", styles: [".form-field{margin-bottom:1rem}.form-field label{display:block;margin-bottom:.5rem;font-weight:700}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: PTCheckBoxInputComponent, selector: "pt-check-box-input", inputs: ["formGroup", "formField"] }, { kind: "component", type: PTDateInputComponent, selector: "pt-date-input", inputs: ["formGroup", "formField", "config", "value"], outputs: ["valueChange", "dateChange"] }, { kind: "component", type: PTNumberInputComponent, selector: "pt-number-input", inputs: ["formGroup", "formField"] }, { kind: "component", type: PTSwitchInputComponent, selector: "pt-switch-input", inputs: ["formGroup", "formField", "config", "value"], outputs: ["valueChange", "switchChange"] }, { kind: "component", type: PTTextAreaInputComponent, selector: "pt-text-area-input", inputs: ["formGroup", "formField"] }, { kind: "component", type: PTTextInputComponent, selector: "pt-text-input", inputs: ["formGroup", "formField"] }, { kind: "component", type: PTDropdownComponent, selector: "pt-dropdown", inputs: ["formGroup", "formField", "config", "value"], outputs: ["valueChange", "selectionChange"] }, { kind: "component", type: PTMultiSelectComponent, selector: "pt-multi-select", inputs: ["formGroup", "formField", "config", "value"], outputs: ["valueChange", "selectionChange"] }, { kind: "component", type: PTOtpInputComponent, selector: "pt-otp-input", inputs: ["formGroup", "formField"] }, { kind: "component", type: PTPasswordInputComponent, selector: "pt-password-input", inputs: ["formGroup", "formField"] }] }); }
3272
3376
  }
3273
3377
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTDynamicFormFieldComponent, decorators: [{
3274
3378
  type: Component,
3275
- args: [{ selector: 'pt-dynamic-form-field', standalone: false, template: "<div\n [formGroup]=\"form\"\n class=\"form-field\"\n [ngStyle]=\"{\n width:\n field.type !== FormInputTypeEnum.CHECKBOX\n ? field.width || inputWidth\n : 'auto',\n }\"\n>\n @switch (field.type) {\n <!-- TEXT -->\n @case (FormInputTypeEnum.TEXT) {\n <pt-text-input\n [formGroup]=\"form\"\n [formField]=\"asTextField(field)\"\n ></pt-text-input>\n }\n\n <!-- EMAIL -->\n @case (FormInputTypeEnum.EMAIL) {\n <pt-text-input\n [formGroup]=\"form\"\n [formField]=\"asTextField(field)\"\n ></pt-text-input>\n }\n\n <!-- NUMBER -->\n @case (FormInputTypeEnum.NUMBER) {\n <pt-number-input\n [formGroup]=\"form\"\n [formField]=\"asNumberField(field)\"\n ></pt-number-input>\n }\n\n <!-- AMOUNT -->\n @case (FormInputTypeEnum.AMOUNT) {\n <pt-number-input\n [formGroup]=\"form\"\n [formField]=\"asNumberField(field)\"\n ></pt-number-input>\n }\n\n <!-- TEXTAREA -->\n @case (FormInputTypeEnum.TEXTAREA) {\n <pt-text-area-input\n [formGroup]=\"form\"\n [formField]=\"asTextAreaField(field)\"\n ></pt-text-area-input>\n }\n\n <!-- DATE -->\n @case (FormInputTypeEnum.DATE) {\n <pt-date-input\n [formGroup]=\"form\"\n [formField]=\"asDateField(field)\"\n ></pt-date-input>\n }\n\n <!-- MULTISELECT -->\n @case (FormInputTypeEnum.MULTISELECT) {\n <pt-multi-select\n [formGroup]=\"form\"\n [formField]=\"asMultiSelectField(field)\"\n ></pt-multi-select>\n }\n\n <!-- SELECT -->\n @case (FormInputTypeEnum.SELECT) {\n <pt-dropdown\n [formGroup]=\"form\"\n [formField]=\"asSelectField(field)\"\n ></pt-dropdown>\n }\n\n <!-- OTP -->\n @case (FormInputTypeEnum.OTP) {\n <pt-otp-input\n [formGroup]=\"form\"\n [formField]=\"asOtpField(field)\"\n ></pt-otp-input>\n }\n\n <!-- CHECKBOX -->\n @case (FormInputTypeEnum.CHECKBOX) {\n <pt-check-box-input\n [formGroup]=\"form\"\n [formField]=\"asCheckboxField(field)\"\n ></pt-check-box-input>\n }\n\n <!-- SWITCH -->\n @case (FormInputTypeEnum.SWITCH) {\n <pt-switch-input\n [formGroup]=\"form\"\n [formField]=\"asSwitchField(field)\"\n ></pt-switch-input>\n }\n }\n</div>\n", styles: [".form-field{margin-bottom:1rem}.form-field label{display:block;margin-bottom:.5rem;font-weight:700}\n"] }]
3379
+ args: [{ selector: 'pt-dynamic-form-field', standalone: false, template: "<!-- projects/ng-prime-tools/src/lib/pt-form-builder/pt-dynamic-form-field/pt-dynamic-form-field.component.html -->\n\n<div\n [formGroup]=\"form\"\n class=\"form-field\"\n [ngStyle]=\"{\n width:\n field.type !== FormInputTypeEnum.CHECKBOX\n ? field.width || inputWidth\n : 'auto',\n }\"\n>\n @switch (field.type) {\n <!-- TEXT -->\n @case (FormInputTypeEnum.TEXT) {\n <pt-text-input\n [formGroup]=\"form\"\n [formField]=\"asTextField(field)\"\n ></pt-text-input>\n }\n\n <!-- EMAIL -->\n @case (FormInputTypeEnum.EMAIL) {\n <pt-text-input\n [formGroup]=\"form\"\n [formField]=\"asTextField(field)\"\n ></pt-text-input>\n }\n\n <!-- PASSWORD -->\n @case (FormInputTypeEnum.PASSWORD) {\n <pt-password-input\n [formGroup]=\"form\"\n [formField]=\"asTextField(field)\"\n ></pt-password-input>\n }\n\n <!-- NUMBER -->\n @case (FormInputTypeEnum.NUMBER) {\n <pt-number-input\n [formGroup]=\"form\"\n [formField]=\"asNumberField(field)\"\n ></pt-number-input>\n }\n\n <!-- AMOUNT -->\n @case (FormInputTypeEnum.AMOUNT) {\n <pt-number-input\n [formGroup]=\"form\"\n [formField]=\"asNumberField(field)\"\n ></pt-number-input>\n }\n\n <!-- TEXTAREA -->\n @case (FormInputTypeEnum.TEXTAREA) {\n <pt-text-area-input\n [formGroup]=\"form\"\n [formField]=\"asTextAreaField(field)\"\n ></pt-text-area-input>\n }\n\n <!-- DATE -->\n @case (FormInputTypeEnum.DATE) {\n <pt-date-input\n [formGroup]=\"form\"\n [formField]=\"asDateField(field)\"\n ></pt-date-input>\n }\n\n <!-- MULTISELECT -->\n @case (FormInputTypeEnum.MULTISELECT) {\n <pt-multi-select\n [formGroup]=\"form\"\n [formField]=\"asMultiSelectField(field)\"\n ></pt-multi-select>\n }\n\n <!-- SELECT -->\n @case (FormInputTypeEnum.SELECT) {\n <pt-dropdown\n [formGroup]=\"form\"\n [formField]=\"asSelectField(field)\"\n ></pt-dropdown>\n }\n\n <!-- OTP -->\n @case (FormInputTypeEnum.OTP) {\n <pt-otp-input\n [formGroup]=\"form\"\n [formField]=\"asOtpField(field)\"\n ></pt-otp-input>\n }\n\n <!-- CHECKBOX -->\n @case (FormInputTypeEnum.CHECKBOX) {\n <pt-check-box-input\n [formGroup]=\"form\"\n [formField]=\"asCheckboxField(field)\"\n ></pt-check-box-input>\n }\n\n <!-- SWITCH -->\n @case (FormInputTypeEnum.SWITCH) {\n <pt-switch-input\n [formGroup]=\"form\"\n [formField]=\"asSwitchField(field)\"\n ></pt-switch-input>\n }\n }\n</div>\n", styles: [".form-field{margin-bottom:1rem}.form-field label{display:block;margin-bottom:.5rem;font-weight:700}\n"] }]
3276
3380
  }], propDecorators: { field: [{
3277
3381
  type: Input
3278
3382
  }], form: [{
@@ -3634,6 +3738,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
3634
3738
  }]
3635
3739
  }] });
3636
3740
 
3741
+ class PTPasswordInputModule {
3742
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTPasswordInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
3743
+ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.14", ngImport: i0, type: PTPasswordInputModule, declarations: [PTPasswordInputComponent], imports: [CommonModule,
3744
+ FormsModule,
3745
+ ReactiveFormsModule,
3746
+ IconFieldModule,
3747
+ InputIconModule,
3748
+ PasswordModule], exports: [PTPasswordInputComponent] }); }
3749
+ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTPasswordInputModule, imports: [CommonModule,
3750
+ FormsModule,
3751
+ ReactiveFormsModule,
3752
+ IconFieldModule,
3753
+ InputIconModule,
3754
+ PasswordModule] }); }
3755
+ }
3756
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTPasswordInputModule, decorators: [{
3757
+ type: NgModule,
3758
+ args: [{
3759
+ declarations: [PTPasswordInputComponent],
3760
+ imports: [
3761
+ CommonModule,
3762
+ FormsModule,
3763
+ ReactiveFormsModule,
3764
+ IconFieldModule,
3765
+ InputIconModule,
3766
+ PasswordModule,
3767
+ ],
3768
+ exports: [PTPasswordInputComponent],
3769
+ }]
3770
+ }] });
3771
+
3637
3772
  class PTDynamicFormFieldModule {
3638
3773
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTDynamicFormFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
3639
3774
  static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.14", ngImport: i0, type: PTDynamicFormFieldModule, declarations: [PTDynamicFormFieldComponent], imports: [CommonModule,
@@ -3647,7 +3782,8 @@ class PTDynamicFormFieldModule {
3647
3782
  PTTextInputModule,
3648
3783
  PTDropdownModule,
3649
3784
  PTMultiSelectModule,
3650
- PTOtpInputModule], exports: [PTDynamicFormFieldComponent] }); }
3785
+ PTOtpInputModule,
3786
+ PTPasswordInputModule], exports: [PTDynamicFormFieldComponent] }); }
3651
3787
  static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTDynamicFormFieldModule, imports: [CommonModule,
3652
3788
  ReactiveFormsModule,
3653
3789
  // Inputs
@@ -3659,7 +3795,8 @@ class PTDynamicFormFieldModule {
3659
3795
  PTTextInputModule,
3660
3796
  PTDropdownModule,
3661
3797
  PTMultiSelectModule,
3662
- PTOtpInputModule] }); }
3798
+ PTOtpInputModule,
3799
+ PTPasswordInputModule] }); }
3663
3800
  }
3664
3801
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTDynamicFormFieldModule, decorators: [{
3665
3802
  type: NgModule,
@@ -3678,6 +3815,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
3678
3815
  PTDropdownModule,
3679
3816
  PTMultiSelectModule,
3680
3817
  PTOtpInputModule,
3818
+ PTPasswordInputModule,
3681
3819
  ],
3682
3820
  exports: [PTDynamicFormFieldComponent],
3683
3821
  }]
@@ -7158,6 +7296,7 @@ class NgPrimeToolsModule {
7158
7296
  PTTextInputModule,
7159
7297
  PTMultiSelectModule,
7160
7298
  PTOtpInputModule,
7299
+ PTPasswordInputModule,
7161
7300
  // Dashboard
7162
7301
  PTMetricCardModule,
7163
7302
  PTMetricCardGroupModule,
@@ -7198,6 +7337,7 @@ class NgPrimeToolsModule {
7198
7337
  PTTextInputModule,
7199
7338
  PTMultiSelectModule,
7200
7339
  PTOtpInputModule,
7340
+ PTPasswordInputModule,
7201
7341
  // Dashboard
7202
7342
  PTMetricCardModule,
7203
7343
  PTMetricCardGroupModule,
@@ -7242,6 +7382,7 @@ class NgPrimeToolsModule {
7242
7382
  PTTextInputModule,
7243
7383
  PTMultiSelectModule,
7244
7384
  PTOtpInputModule,
7385
+ PTPasswordInputModule,
7245
7386
  // Dashboard
7246
7387
  PTMetricCardModule,
7247
7388
  PTMetricCardGroupModule,
@@ -7282,6 +7423,7 @@ class NgPrimeToolsModule {
7282
7423
  PTTextInputModule,
7283
7424
  PTMultiSelectModule,
7284
7425
  PTOtpInputModule,
7426
+ PTPasswordInputModule,
7285
7427
  // Dashboard
7286
7428
  PTMetricCardModule,
7287
7429
  PTMetricCardGroupModule,
@@ -7331,6 +7473,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
7331
7473
  PTTextInputModule,
7332
7474
  PTMultiSelectModule,
7333
7475
  PTOtpInputModule,
7476
+ PTPasswordInputModule,
7334
7477
  // Dashboard
7335
7478
  PTMetricCardModule,
7336
7479
  PTMetricCardGroupModule,
@@ -7374,6 +7517,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
7374
7517
  PTTextInputModule,
7375
7518
  PTMultiSelectModule,
7376
7519
  PTOtpInputModule,
7520
+ PTPasswordInputModule,
7377
7521
  // Dashboard
7378
7522
  PTMetricCardModule,
7379
7523
  PTMetricCardGroupModule,
@@ -8180,5 +8324,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
8180
8324
  * Generated bundle index. Do not edit.
8181
8325
  */
8182
8326
 
8183
- export { AlignEnum, BadgeType, BadgeTypeStyles, ButtonColorEnum, DateUtilityService, FormInputTypeEnum, InputValidationEnum, MultiSearchCriteriaComponent, MultiSearchCriteriaModule, NgPrimeToolsModule, PTAdvancedPrimeTableComponent, PTAdvancedPrimeTableModule, PTBreadCrumbComponent, PTBreadCrumbModule, PTButtonComponent, PTButtonModule, PTCardComponent, PTCardModule, PTChangePasswordPageComponent, PTChangePasswordPageModule, PTChartComparisonComponent, PTChartComparisonModule, PTChartComponent, PTChartModule, PTCheckBoxInputComponent, PTCheckBoxInputModule, PTConfirmDialogComponent, PTConfirmDialogModule, PTDateInputComponent, PTDateInputModule, PTDialogComponent, PTDialogModule, PTDropdownComponent, PTDropdownModule, PTFooterComponent, PTFooterModule, PTFormBuilderComponent, PTFormBuilderModule, PTGroupComponent, PTGroupModule, PTLineChartComponent, PTLineChartModule, PTLoginPageComponent, PTLoginPageModule, PTMenuComponent, PTMenuFancyComponent, PTMenuFancyModule, PTMenuModule, PTMetricCardComponent, PTMetricCardGroupComponent, PTMetricCardGroupModule, PTMetricCardModule, PTMetricPanelComponent, PTMetricPanelModule, PTMultiSelectComponent, PTMultiSelectModule, PTNavbarMenuComponent, PTNavbarMenuModule, PTNumberInputComponent, PTNumberInputModule, PTOtpInputComponent, PTOtpInputModule, PTOtpPageComponent, PTOtpPageModule, PTPageSkeletonComponent, PTPageSkeletonModule, PTSideBarMenuComponent, PTSideBarMenuModule, PTSwitchInputComponent, PTSwitchInputModule, PTTextAreaInputComponent, PTTextAreaInputModule, PTTextInputComponent, PTTextInputModule, PTToastNotifierComponent, PTToastNotifierModule, SearchCriteriaTypeEnum, SeverityEnum, TableTypeEnum };
8327
+ export { AlignEnum, BadgeType, BadgeTypeStyles, ButtonColorEnum, DateUtilityService, FormInputTypeEnum, InputValidationEnum, MultiSearchCriteriaComponent, MultiSearchCriteriaModule, NgPrimeToolsModule, PTAdvancedPrimeTableComponent, PTAdvancedPrimeTableModule, PTBreadCrumbComponent, PTBreadCrumbModule, PTButtonComponent, PTButtonModule, PTCardComponent, PTCardModule, PTChangePasswordPageComponent, PTChangePasswordPageModule, PTChartComparisonComponent, PTChartComparisonModule, PTChartComponent, PTChartModule, PTCheckBoxInputComponent, PTCheckBoxInputModule, PTConfirmDialogComponent, PTConfirmDialogModule, PTDateInputComponent, PTDateInputModule, PTDialogComponent, PTDialogModule, PTDropdownComponent, PTDropdownModule, PTFooterComponent, PTFooterModule, PTFormBuilderComponent, PTFormBuilderModule, PTGroupComponent, PTGroupModule, PTLineChartComponent, PTLineChartModule, PTLoginPageComponent, PTLoginPageModule, PTMenuComponent, PTMenuFancyComponent, PTMenuFancyModule, PTMenuModule, PTMetricCardComponent, PTMetricCardGroupComponent, PTMetricCardGroupModule, PTMetricCardModule, PTMetricPanelComponent, PTMetricPanelModule, PTMultiSelectComponent, PTMultiSelectModule, PTNavbarMenuComponent, PTNavbarMenuModule, PTNumberInputComponent, PTNumberInputModule, PTOtpInputComponent, PTOtpInputModule, PTOtpPageComponent, PTOtpPageModule, PTPageSkeletonComponent, PTPageSkeletonModule, PTPasswordInputComponent, PTPasswordInputModule, PTSideBarMenuComponent, PTSideBarMenuModule, PTSwitchInputComponent, PTSwitchInputModule, PTTextAreaInputComponent, PTTextAreaInputModule, PTTextInputComponent, PTTextInputModule, PTToastNotifierComponent, PTToastNotifierModule, SearchCriteriaTypeEnum, SeverityEnum, TableTypeEnum };
8184
8328
  //# sourceMappingURL=ng-prime-tools.mjs.map