@bnsights/bbsf-controls 1.0.187 → 1.0.189
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/README.md +15 -1
- package/esm2022/lib/Shared/Components/app-base-component.mjs +2 -2
- package/esm2022/lib/Shared/Models/TextBoxOptions.mjs +2 -1
- package/esm2022/lib/controls/TextBox/TextBox.component.mjs +42 -4
- package/fesm2022/bnsights-bbsf-controls.mjs +43 -4
- package/fesm2022/bnsights-bbsf-controls.mjs.map +1 -1
- package/lib/Shared/Models/TextBoxOptions.d.ts +1 -0
- package/lib/controls/TextBox/TextBox.component.d.ts +9 -0
- package/package.json +2 -2
- package/src/lib/assets/sass/base.scss +72 -7
|
@@ -2582,6 +2582,7 @@ class TextBoxOptions extends ControlOptionsBase {
|
|
|
2582
2582
|
this.iconPosition = IconPosition.left;
|
|
2583
2583
|
this.noMargin = false;
|
|
2584
2584
|
this.validationRules = [];
|
|
2585
|
+
this.showPasswordRequirements = false;
|
|
2585
2586
|
}
|
|
2586
2587
|
get displayValue() {
|
|
2587
2588
|
return this.value;
|
|
@@ -6153,6 +6154,12 @@ class TextboxComponent {
|
|
|
6153
6154
|
this.hasCharsLimitValidationError = false;
|
|
6154
6155
|
this.minCharsLimit = -1; //To disable chars limit feature by default
|
|
6155
6156
|
this.maxLimitWarningMsg = '';
|
|
6157
|
+
this.passwordMinLength = 8; // Default value, will be updated based on actual validator
|
|
6158
|
+
this.hasNumber = false;
|
|
6159
|
+
this.hasCapitalLetter = false;
|
|
6160
|
+
this.hasSmallLetter = false;
|
|
6161
|
+
this.hasSpecialLetter = false;
|
|
6162
|
+
this.hasMinLength = false;
|
|
6156
6163
|
this.resetError = () => {
|
|
6157
6164
|
this.controlValidationService.removeGlobalError();
|
|
6158
6165
|
};
|
|
@@ -6238,6 +6245,8 @@ class TextboxComponent {
|
|
|
6238
6245
|
break;
|
|
6239
6246
|
case InputType.Password:
|
|
6240
6247
|
if (!this.options.removeDefaultPasswordValidation) {
|
|
6248
|
+
// Use options.minLength if set, otherwise default to 8
|
|
6249
|
+
this.passwordMinLength = this.options.minLength > 0 ? this.options.minLength : 8;
|
|
6241
6250
|
this.validationRules.push(Validators.compose([
|
|
6242
6251
|
this.controlUtility.patternValidator(/\d/, {
|
|
6243
6252
|
passwordComplexityHasNumber: this.passwordComplexityHasNumber,
|
|
@@ -6251,7 +6260,7 @@ class TextboxComponent {
|
|
|
6251
6260
|
this.controlUtility.patternValidator(/[!@#$%^&*(),.?":{}|<>]/, {
|
|
6252
6261
|
passwordComplexityHasSpecialLetter: this.passwordComplexityHasSpecialLetter,
|
|
6253
6262
|
}),
|
|
6254
|
-
Validators.minLength(
|
|
6263
|
+
Validators.minLength(this.passwordMinLength),
|
|
6255
6264
|
]));
|
|
6256
6265
|
}
|
|
6257
6266
|
break;
|
|
@@ -6298,6 +6307,10 @@ class TextboxComponent {
|
|
|
6298
6307
|
this.markAllAsTouched = true;
|
|
6299
6308
|
});
|
|
6300
6309
|
this.options.validationRules = this.validationRules;
|
|
6310
|
+
// Initialize password complexity check if it's a password field with existing value
|
|
6311
|
+
if (this.options.type == InputType.Password && !this.options.removeDefaultPasswordValidation && this.options.value) {
|
|
6312
|
+
this.checkPasswordComplexity(this.options.value);
|
|
6313
|
+
}
|
|
6301
6314
|
}
|
|
6302
6315
|
ngAfterViewInit() {
|
|
6303
6316
|
this.controlUtility.setAttributeForControl(this.options);
|
|
@@ -6337,6 +6350,9 @@ class TextboxComponent {
|
|
|
6337
6350
|
this.maxWordCountValidationKey = this.utilityService.getResourceValue('MaxWordCountValidationKey');
|
|
6338
6351
|
this.arabicLetterOnly = this.utilityService.getResourceValue('VAL_ArabicIsRequiredAndOnly50CharactersEnglish');
|
|
6339
6352
|
this.englishLetterOnly = this.utilityService.getResourceValue('EnglishLetterOnly');
|
|
6353
|
+
// Password disclaimer messages
|
|
6354
|
+
this.passwordRequirementsTitle = this.utilityService.getResourceValue('PasswordRequirementsTitle');
|
|
6355
|
+
this.minLengthRequirement = this.utilityService.getResourceValue('MinLengthRequirement').replace('${minLength}', this.passwordMinLength.toString());
|
|
6340
6356
|
}
|
|
6341
6357
|
onTextChange() {
|
|
6342
6358
|
if (this.options.type == InputType.Number)
|
|
@@ -6344,11 +6360,23 @@ class TextboxComponent {
|
|
|
6344
6360
|
this.textBoxFormControl.setErrors({ integerNumberValidationKey: '' });
|
|
6345
6361
|
return;
|
|
6346
6362
|
}
|
|
6363
|
+
// Check password complexity requirements in real-time
|
|
6364
|
+
if (this.options.type == InputType.Password && !this.options.removeDefaultPasswordValidation) {
|
|
6365
|
+
this.checkPasswordComplexity(this.textBoxFormControl.value || '');
|
|
6366
|
+
}
|
|
6347
6367
|
if (this.textBoxFormControl.value == '') {
|
|
6348
6368
|
this.wordCountArray = 0;
|
|
6349
6369
|
this.wordCount = 0;
|
|
6350
6370
|
this.showCharsLimitMsg = false;
|
|
6351
6371
|
this.hasCharsLimitValidationError = false;
|
|
6372
|
+
// Reset password complexity flags when field is empty
|
|
6373
|
+
if (this.options.type == InputType.Password && !this.options.removeDefaultPasswordValidation) {
|
|
6374
|
+
this.hasNumber = false;
|
|
6375
|
+
this.hasCapitalLetter = false;
|
|
6376
|
+
this.hasSmallLetter = false;
|
|
6377
|
+
this.hasSpecialLetter = false;
|
|
6378
|
+
this.hasMinLength = false;
|
|
6379
|
+
}
|
|
6352
6380
|
}
|
|
6353
6381
|
else {
|
|
6354
6382
|
this.wordCountArray = this.textBoxFormControl.value?.split(' ').length;
|
|
@@ -6406,14 +6434,25 @@ class TextboxComponent {
|
|
|
6406
6434
|
this.showCharsLimitMsg = false;
|
|
6407
6435
|
}
|
|
6408
6436
|
onTextBlur() {
|
|
6437
|
+
// Check password complexity on blur as well
|
|
6438
|
+
if (this.options.type == InputType.Password && !this.options.removeDefaultPasswordValidation) {
|
|
6439
|
+
this.checkPasswordComplexity(this.textBoxFormControl.value || '');
|
|
6440
|
+
}
|
|
6409
6441
|
this.onBlur.emit(this.textBoxFormControl.value);
|
|
6410
6442
|
}
|
|
6443
|
+
checkPasswordComplexity(password) {
|
|
6444
|
+
this.hasNumber = /\d/.test(password);
|
|
6445
|
+
this.hasCapitalLetter = /[A-Z]/.test(password);
|
|
6446
|
+
this.hasSmallLetter = /[a-z]/.test(password);
|
|
6447
|
+
this.hasSpecialLetter = /[!@#$%^&*(),.?":{}|<>]/.test(password);
|
|
6448
|
+
this.hasMinLength = password.length >= this.passwordMinLength;
|
|
6449
|
+
}
|
|
6411
6450
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TextboxComponent, deps: [{ token: ControlUtility }, { token: i2.ControlContainer, optional: true }, { token: i2.FormGroupDirective }, { token: i3.UtilityService }, { token: i3.ControlValidationService }, { token: GlobalSettings }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6412
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: TextboxComponent, selector: "BBSF-TextBox", inputs: { group: "group", options: "options" }, outputs: { onChange: "onChange", onBlur: "onBlur" }, ngImport: i0, template: "<div class=\"form-group bbsf-control bbsf-textbox\" [formGroup]=\"group\">\r\n <div [ngClass]=\"options.viewType == 1 ? 'bbsf-vertical' : 'bbsf-horizontal'\">\r\n <!--label-->\r\n <label *ngIf=\"!options.hideLabel\" class=\"bbsf-label {{ options.labelExtraClasses }}\">\r\n {{ options.labelValue }}\r\n <!--Asterisk-->\r\n @if (((options.showAsterisk && options.isRequired) || options.isRequired) && !options.isReadonly) {\r\n <span class=\"text-danger\">*</span>\r\n }\r\n </label>\r\n <!--MaskPattern-->\r\n @if (maskPattern != null && maskPattern != '' && !options.isReadonly) {\r\n <div class=\"bbsf-input-container\" [ngClass]=\"options.enableCopyToClipboard ? 'p-40px' : ''\">\r\n <!--Icon-->\r\n <div *ngIf=\"options.icon != null\" class=\"svg svg-icon-grey bbsf-icon\"\r\n [ngClass]=\"options.iconPosition == 1 ? 'bbsf-left-icon' : 'bbsf-right-icon'\">\r\n <span [inlineSVG]=\"options.icon\"></span>\r\n </div>\r\n <!--input-->\r\n <input class=\"form-control {{ options.extraClasses }}\" [mask]=\"maskPattern\" placeHolderCharacter=\" \"\r\n [showMaskTyped]=\"true\" [validation]=\"true\" [dir]=\"textDir\" aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n formControlName=\"{{ options.name }}\" type=\"{{ getInputType(options.type) }}\" [(ngModel)]=\"options.value\"\r\n [class.is-invalid]=\"textBoxFormControl.invalid && textBoxFormControl.touched\"\r\n placeholder=\"{{ options.placeholder }}\" id=\"{{ options.name }}\" autocomplete=\"{{ options.autoComplete }}\"\r\n (change)=\"trimControlValue()\" (keyup)=\"onTextChange()\" [readonly]=\"options.isReadonly\"\r\n (keydown)=\"wordCountArray > options.maxWordCount && $event.keyCode != 8 ? $event.preventDefault() : null\"\r\n #userInput (blur)=\"onTextBlur()\" />\r\n <!--CopyToClipboard-->\r\n <span class=\"copy-clipboard\" ngbTooltip=\"Copied!\" *ngIf=\"options.enableCopyToClipboard\"\r\n (click)=\"copyInputMessage(userInput)\">\r\n <i class=\"fas fa-copy\"></i>\r\n </span>\r\n </div>\r\n }\r\n <!--NoMaskPattern-->\r\n <div *ngIf=\"maskPattern == null || (maskPattern == '' && !options.isReadonly)\" class=\"bbsf-input-container\"\r\n [ngClass]=\"options.enableCopyToClipboard ? 'p-40px' : ''\">\r\n <!--Icon-->\r\n <div class=\"svg svg-icon-grey bbsf-icon\"\r\n [ngClass]=\"options.iconPosition == 1 ? 'bbsf-left-icon' : 'bbsf-right-icon'\" *ngIf=\"options.icon != null\">\r\n <span [inlineSVG]=\"options.icon\"></span>\r\n </div>\r\n <!--input-->\r\n <input class=\"form-control {{ options.extraClasses }} \" [dir]=\"textDir\" (focus)=\"onFocus(true)\"\r\n (focusout)=\"onFocus(false)\" maxlength=\"{{ options.maxLength }}\" minlength=\"{{ options.minLength }}\"\r\n aria-describedby=\"email-error\" aria-invalid=\"true\" formControlName=\"{{ options.name }}\"\r\n type=\"{{ getInputType(options.type) }}\"\r\n [class.is-invalid]=\"textBoxFormControl.invalid && textBoxFormControl.touched\"\r\n placeholder=\"{{ options.placeholder }}\" id=\"{{ options.name }}\" autocomplete=\"{{ options.autoComplete }}\"\r\n (change)=\"trimControlValue()\" (keyup)=\"onTextChange()\" [(ngModel)]=\"options.value\"\r\n (keydown)=\"wordCountArray > options.maxWordCount && $event.keyCode != 8 ? $event.preventDefault() : null\"\r\n [readonly]=\"options.isReadonly\" #userInput (blur)=\"onTextBlur()\" />\r\n <!--CopyToClipboard-->\r\n <span class=\"copy-clipboard\" ngbTooltip=\"Copied!\" triggers=\"click:blur\" *ngIf=\"options.enableCopyToClipboard\"\r\n (click)=\"copyInputMessage(userInput)\">\r\n <i class=\"fas fa-copy\"></i>\r\n </span>\r\n </div>\r\n <!-- readonly -->\r\n @if (options.isReadonly) {\r\n <div>\r\n <a *ngIf=\"options.type == inputType.Email\" href=\"mailto: {{ options.value }}\">{{ options.value }}</a>\r\n <a *ngIf=\"options.type == inputType.URL\" href=\"{{ options.value }}\" target=\"_blank\">{{ options.value }}</a>\r\n <span *ngIf=\"options.type != inputType.URL && options.type != inputType.Email\"\r\n class=\"readonly-view\">{{ options.value }}</span>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"subtext-container\">\r\n <!--wordCount-->\r\n <div class=\"bbsf-word-count\" *ngIf=\"options.maxWordCount > 0 && isShowWordCount\">\r\n {{ wordCount }}/{{ options.maxWordCount }} Words</div>\r\n <!-- CharsLimitMsg-->\r\n <div class=\"bbsf-character-count\" *ngIf=\"showCharsLimitMsg\"\r\n [ngClass]=\"{ 'badge-light-warning': charsLimitMsgClass === 'warning', 'badge-light-danger': charsLimitMsgClass === 'danger' }\">\r\n {{ maxLimitWarningMsg }}\r\n </div>\r\n <!-- LabelDescription-->\r\n <div class=\"bbsf-control-desc\" *ngIf=\"options.labelDescription != null\">{{ options.labelDescription }}</div>\r\n <!-- requiredText-->\r\n <div class=\"bbsf-validation\" [dir]=\"textDir\" *ngIf=\"textBoxFormControl.invalid && textBoxFormControl.touched\">\r\n {{ getErrorValidation(textBoxFormControl.errors | keyvalue) }}\r\n </div>\r\n </div>\r\n\r\n @if ((group.valid && group.dirty && group.touched) || (group.untouched && group.invalid && group.dirty)) {\r\n <div>{{ resetError() }}</div>\r\n }\r\n</div>", dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i7$3.NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "directive", type: i6.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "directive", type: i7.NativeElementInjectorDirective, selector: "[ngModel], [formControl], [formControlName]" }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { 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: "directive", type: i8$3.InlineSVGDirective, selector: "[inlineSVG]", inputs: ["inlineSVG", "resolveSVGUrl", "replaceContents", "prepend", "injectComponent", "cacheSVG", "setSVGAttributes", "removeSVGAttributes", "forceEvalStyles", "evalScripts", "fallbackImgUrl", "fallbackSVG", "onSVGLoaded"], outputs: ["onSVGInserted", "onSVGFailed"] }, { kind: "pipe", type: i5.KeyValuePipe, name: "keyvalue" }] }); }
|
|
6451
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: TextboxComponent, selector: "BBSF-TextBox", inputs: { group: "group", options: "options" }, outputs: { onChange: "onChange", onBlur: "onBlur" }, ngImport: i0, template: "<div class=\"form-group bbsf-control bbsf-textbox\" [formGroup]=\"group\">\r\n <div [ngClass]=\"options.viewType == 1 ? 'bbsf-vertical' : 'bbsf-horizontal'\">\r\n <!--label-->\r\n <label *ngIf=\"!options.hideLabel\" class=\"bbsf-label {{ options.labelExtraClasses }}\">\r\n {{ options.labelValue }}\r\n <!--Asterisk-->\r\n @if (((options.showAsterisk && options.isRequired) || options.isRequired) && !options.isReadonly) {\r\n <span class=\"text-danger\">*</span>\r\n }\r\n </label>\r\n <!--MaskPattern-->\r\n @if (maskPattern != null && maskPattern != '' && !options.isReadonly) {\r\n <div class=\"bbsf-input-container\" [ngClass]=\"options.enableCopyToClipboard ? 'p-40px' : ''\">\r\n <!--Icon-->\r\n <div *ngIf=\"options.icon != null\" class=\"svg svg-icon-grey bbsf-icon\"\r\n [ngClass]=\"options.iconPosition == 1 ? 'bbsf-left-icon' : 'bbsf-right-icon'\">\r\n <span [inlineSVG]=\"options.icon\"></span>\r\n </div>\r\n <!--input-->\r\n <input class=\"form-control {{ options.extraClasses }}\" [mask]=\"maskPattern\" placeHolderCharacter=\" \"\r\n [showMaskTyped]=\"true\" [validation]=\"true\" [dir]=\"textDir\" aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n formControlName=\"{{ options.name }}\" type=\"{{ getInputType(options.type) }}\" [(ngModel)]=\"options.value\"\r\n [class.is-invalid]=\"textBoxFormControl.invalid && textBoxFormControl.touched\"\r\n placeholder=\"{{ options.placeholder }}\" id=\"{{ options.name }}\" autocomplete=\"{{ options.autoComplete }}\"\r\n (change)=\"trimControlValue()\" (keyup)=\"onTextChange()\" [readonly]=\"options.isReadonly\"\r\n (keydown)=\"wordCountArray > options.maxWordCount && $event.keyCode != 8 ? $event.preventDefault() : null\"\r\n #userInput (blur)=\"onTextBlur()\" />\r\n <!--CopyToClipboard-->\r\n <span class=\"copy-clipboard\" ngbTooltip=\"Copied!\" *ngIf=\"options.enableCopyToClipboard\"\r\n (click)=\"copyInputMessage(userInput)\">\r\n <i class=\"fas fa-copy\"></i>\r\n </span>\r\n </div>\r\n }\r\n <!--NoMaskPattern-->\r\n <div *ngIf=\"maskPattern == null || (maskPattern == '' && !options.isReadonly)\" class=\"bbsf-input-container\"\r\n [ngClass]=\"options.enableCopyToClipboard ? 'p-40px' : ''\">\r\n <!--Icon-->\r\n <div class=\"svg svg-icon-grey bbsf-icon\"\r\n [ngClass]=\"options.iconPosition == 1 ? 'bbsf-left-icon' : 'bbsf-right-icon'\" *ngIf=\"options.icon != null\">\r\n <span [inlineSVG]=\"options.icon\"></span>\r\n </div>\r\n <!--input-->\r\n <input class=\"form-control {{ options.extraClasses }} \" [dir]=\"textDir\" (focus)=\"onFocus(true)\"\r\n (focusout)=\"onFocus(false)\" maxlength=\"{{ options.maxLength }}\" minlength=\"{{ options.minLength }}\"\r\n aria-describedby=\"email-error\" aria-invalid=\"true\" formControlName=\"{{ options.name }}\"\r\n type=\"{{ getInputType(options.type) }}\"\r\n [class.is-invalid]=\"textBoxFormControl.invalid && textBoxFormControl.touched\"\r\n placeholder=\"{{ options.placeholder }}\" id=\"{{ options.name }}\" autocomplete=\"{{ options.autoComplete }}\"\r\n (change)=\"trimControlValue()\" (keyup)=\"onTextChange()\" [(ngModel)]=\"options.value\"\r\n (keydown)=\"wordCountArray > options.maxWordCount && $event.keyCode != 8 ? $event.preventDefault() : null\"\r\n [readonly]=\"options.isReadonly\" #userInput (blur)=\"onTextBlur()\" />\r\n <!--CopyToClipboard-->\r\n <span class=\"copy-clipboard\" ngbTooltip=\"Copied!\" triggers=\"click:blur\" *ngIf=\"options.enableCopyToClipboard\"\r\n (click)=\"copyInputMessage(userInput)\">\r\n <i class=\"fas fa-copy\"></i>\r\n </span>\r\n </div>\r\n <!-- readonly -->\r\n @if (options.isReadonly) {\r\n <div>\r\n <a *ngIf=\"options.type == inputType.Email\" href=\"mailto: {{ options.value }}\">{{ options.value }}</a>\r\n <a *ngIf=\"options.type == inputType.URL\" href=\"{{ options.value }}\" target=\"_blank\">{{ options.value }}</a>\r\n <span *ngIf=\"options.type != inputType.URL && options.type != inputType.Email\"\r\n class=\"readonly-view\">{{ options.value }}</span>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"subtext-container\">\r\n <!--wordCount-->\r\n <div class=\"bbsf-word-count\" *ngIf=\"options.maxWordCount > 0 && isShowWordCount\">\r\n {{ wordCount }}/{{ options.maxWordCount }} Words</div>\r\n <!-- CharsLimitMsg-->\r\n <div class=\"bbsf-character-count\" *ngIf=\"showCharsLimitMsg\"\r\n [ngClass]=\"{ 'badge-light-warning': charsLimitMsgClass === 'warning', 'badge-light-danger': charsLimitMsgClass === 'danger' }\">\r\n {{ maxLimitWarningMsg }}\r\n </div>\r\n <!-- Password Disclaimer -->\r\n <div class=\"bbsf-password-disclaimer\"\r\n *ngIf=\"options.type == inputType.Password && !options.removeDefaultPasswordValidation && !options.isReadonly && options.showPasswordRequirements\">\r\n <div class=\"password-requirements\">\r\n <div class=\"requirement-title\">{{ passwordRequirementsTitle }}</div>\r\n <ul class=\"requirements-list\">\r\n <li [ngClass]=\"{'requirement-met': hasNumber, 'requirement-not-met': !hasNumber}\">\r\n <i class=\"fas\" [ngClass]=\"hasNumber ? 'fa-check text-success' : 'fa-times text-danger'\"></i>\r\n {{ passwordComplexityHasNumber }}\r\n </li>\r\n <li [ngClass]=\"{'requirement-met': hasCapitalLetter, 'requirement-not-met': !hasCapitalLetter}\">\r\n <i class=\"fas\" [ngClass]=\"hasCapitalLetter ? 'fa-check text-success' : 'fa-times text-danger'\"></i>\r\n {{ passwordComplexityHasCapitalLetter }}\r\n </li>\r\n <li [ngClass]=\"{'requirement-met': hasSmallLetter, 'requirement-not-met': !hasSmallLetter}\">\r\n <i class=\"fas\" [ngClass]=\"hasSmallLetter ? 'fa-check text-success' : 'fa-times text-danger'\"></i>\r\n {{ passwordComplexityHasSmallLetter }}\r\n </li>\r\n <li [ngClass]=\"{'requirement-met': hasSpecialLetter, 'requirement-not-met': !hasSpecialLetter}\">\r\n <i class=\"fas\" [ngClass]=\"hasSpecialLetter ? 'fa-check text-success' : 'fa-times text-danger'\"></i>\r\n {{ passwordComplexityHasSpecialLetter }}\r\n </li>\r\n <li [ngClass]=\"{'requirement-met': hasMinLength, 'requirement-not-met': !hasMinLength}\">\r\n <i class=\"fas\" [ngClass]=\"hasMinLength ? 'fa-check text-success' : 'fa-times text-danger'\"></i>\r\n {{ minLengthRequirement }}\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n <!-- LabelDescription-->\r\n <div class=\"bbsf-control-desc\" *ngIf=\"options.labelDescription != null\">{{ options.labelDescription }}</div>\r\n <!-- requiredText-->\r\n <div class=\"bbsf-validation\" [dir]=\"textDir\" *ngIf=\"textBoxFormControl.invalid && textBoxFormControl.touched\">\r\n {{ getErrorValidation(textBoxFormControl.errors | keyvalue) }}\r\n </div>\r\n </div>\r\n\r\n @if ((group.valid && group.dirty && group.touched) || (group.untouched && group.invalid && group.dirty)) {\r\n <div>{{ resetError() }}</div>\r\n }\r\n</div>", dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i7$3.NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "directive", type: i6.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "directive", type: i7.NativeElementInjectorDirective, selector: "[ngModel], [formControl], [formControlName]" }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { 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: "directive", type: i8$3.InlineSVGDirective, selector: "[inlineSVG]", inputs: ["inlineSVG", "resolveSVGUrl", "replaceContents", "prepend", "injectComponent", "cacheSVG", "setSVGAttributes", "removeSVGAttributes", "forceEvalStyles", "evalScripts", "fallbackImgUrl", "fallbackSVG", "onSVGLoaded"], outputs: ["onSVGInserted", "onSVGFailed"] }, { kind: "pipe", type: i5.KeyValuePipe, name: "keyvalue" }] }); }
|
|
6413
6452
|
}
|
|
6414
6453
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TextboxComponent, decorators: [{
|
|
6415
6454
|
type: Component,
|
|
6416
|
-
args: [{ selector: 'BBSF-TextBox', template: "<div class=\"form-group bbsf-control bbsf-textbox\" [formGroup]=\"group\">\r\n <div [ngClass]=\"options.viewType == 1 ? 'bbsf-vertical' : 'bbsf-horizontal'\">\r\n <!--label-->\r\n <label *ngIf=\"!options.hideLabel\" class=\"bbsf-label {{ options.labelExtraClasses }}\">\r\n {{ options.labelValue }}\r\n <!--Asterisk-->\r\n @if (((options.showAsterisk && options.isRequired) || options.isRequired) && !options.isReadonly) {\r\n <span class=\"text-danger\">*</span>\r\n }\r\n </label>\r\n <!--MaskPattern-->\r\n @if (maskPattern != null && maskPattern != '' && !options.isReadonly) {\r\n <div class=\"bbsf-input-container\" [ngClass]=\"options.enableCopyToClipboard ? 'p-40px' : ''\">\r\n <!--Icon-->\r\n <div *ngIf=\"options.icon != null\" class=\"svg svg-icon-grey bbsf-icon\"\r\n [ngClass]=\"options.iconPosition == 1 ? 'bbsf-left-icon' : 'bbsf-right-icon'\">\r\n <span [inlineSVG]=\"options.icon\"></span>\r\n </div>\r\n <!--input-->\r\n <input class=\"form-control {{ options.extraClasses }}\" [mask]=\"maskPattern\" placeHolderCharacter=\" \"\r\n [showMaskTyped]=\"true\" [validation]=\"true\" [dir]=\"textDir\" aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n formControlName=\"{{ options.name }}\" type=\"{{ getInputType(options.type) }}\" [(ngModel)]=\"options.value\"\r\n [class.is-invalid]=\"textBoxFormControl.invalid && textBoxFormControl.touched\"\r\n placeholder=\"{{ options.placeholder }}\" id=\"{{ options.name }}\" autocomplete=\"{{ options.autoComplete }}\"\r\n (change)=\"trimControlValue()\" (keyup)=\"onTextChange()\" [readonly]=\"options.isReadonly\"\r\n (keydown)=\"wordCountArray > options.maxWordCount && $event.keyCode != 8 ? $event.preventDefault() : null\"\r\n #userInput (blur)=\"onTextBlur()\" />\r\n <!--CopyToClipboard-->\r\n <span class=\"copy-clipboard\" ngbTooltip=\"Copied!\" *ngIf=\"options.enableCopyToClipboard\"\r\n (click)=\"copyInputMessage(userInput)\">\r\n <i class=\"fas fa-copy\"></i>\r\n </span>\r\n </div>\r\n }\r\n <!--NoMaskPattern-->\r\n <div *ngIf=\"maskPattern == null || (maskPattern == '' && !options.isReadonly)\" class=\"bbsf-input-container\"\r\n [ngClass]=\"options.enableCopyToClipboard ? 'p-40px' : ''\">\r\n <!--Icon-->\r\n <div class=\"svg svg-icon-grey bbsf-icon\"\r\n [ngClass]=\"options.iconPosition == 1 ? 'bbsf-left-icon' : 'bbsf-right-icon'\" *ngIf=\"options.icon != null\">\r\n <span [inlineSVG]=\"options.icon\"></span>\r\n </div>\r\n <!--input-->\r\n <input class=\"form-control {{ options.extraClasses }} \" [dir]=\"textDir\" (focus)=\"onFocus(true)\"\r\n (focusout)=\"onFocus(false)\" maxlength=\"{{ options.maxLength }}\" minlength=\"{{ options.minLength }}\"\r\n aria-describedby=\"email-error\" aria-invalid=\"true\" formControlName=\"{{ options.name }}\"\r\n type=\"{{ getInputType(options.type) }}\"\r\n [class.is-invalid]=\"textBoxFormControl.invalid && textBoxFormControl.touched\"\r\n placeholder=\"{{ options.placeholder }}\" id=\"{{ options.name }}\" autocomplete=\"{{ options.autoComplete }}\"\r\n (change)=\"trimControlValue()\" (keyup)=\"onTextChange()\" [(ngModel)]=\"options.value\"\r\n (keydown)=\"wordCountArray > options.maxWordCount && $event.keyCode != 8 ? $event.preventDefault() : null\"\r\n [readonly]=\"options.isReadonly\" #userInput (blur)=\"onTextBlur()\" />\r\n <!--CopyToClipboard-->\r\n <span class=\"copy-clipboard\" ngbTooltip=\"Copied!\" triggers=\"click:blur\" *ngIf=\"options.enableCopyToClipboard\"\r\n (click)=\"copyInputMessage(userInput)\">\r\n <i class=\"fas fa-copy\"></i>\r\n </span>\r\n </div>\r\n <!-- readonly -->\r\n @if (options.isReadonly) {\r\n <div>\r\n <a *ngIf=\"options.type == inputType.Email\" href=\"mailto: {{ options.value }}\">{{ options.value }}</a>\r\n <a *ngIf=\"options.type == inputType.URL\" href=\"{{ options.value }}\" target=\"_blank\">{{ options.value }}</a>\r\n <span *ngIf=\"options.type != inputType.URL && options.type != inputType.Email\"\r\n class=\"readonly-view\">{{ options.value }}</span>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"subtext-container\">\r\n <!--wordCount-->\r\n <div class=\"bbsf-word-count\" *ngIf=\"options.maxWordCount > 0 && isShowWordCount\">\r\n {{ wordCount }}/{{ options.maxWordCount }} Words</div>\r\n <!-- CharsLimitMsg-->\r\n <div class=\"bbsf-character-count\" *ngIf=\"showCharsLimitMsg\"\r\n [ngClass]=\"{ 'badge-light-warning': charsLimitMsgClass === 'warning', 'badge-light-danger': charsLimitMsgClass === 'danger' }\">\r\n {{ maxLimitWarningMsg }}\r\n </div>\r\n <!-- LabelDescription-->\r\n <div class=\"bbsf-control-desc\" *ngIf=\"options.labelDescription != null\">{{ options.labelDescription }}</div>\r\n <!-- requiredText-->\r\n <div class=\"bbsf-validation\" [dir]=\"textDir\" *ngIf=\"textBoxFormControl.invalid && textBoxFormControl.touched\">\r\n {{ getErrorValidation(textBoxFormControl.errors | keyvalue) }}\r\n </div>\r\n </div>\r\n\r\n @if ((group.valid && group.dirty && group.touched) || (group.untouched && group.invalid && group.dirty)) {\r\n <div>{{ resetError() }}</div>\r\n }\r\n</div>" }]
|
|
6455
|
+
args: [{ selector: 'BBSF-TextBox', template: "<div class=\"form-group bbsf-control bbsf-textbox\" [formGroup]=\"group\">\r\n <div [ngClass]=\"options.viewType == 1 ? 'bbsf-vertical' : 'bbsf-horizontal'\">\r\n <!--label-->\r\n <label *ngIf=\"!options.hideLabel\" class=\"bbsf-label {{ options.labelExtraClasses }}\">\r\n {{ options.labelValue }}\r\n <!--Asterisk-->\r\n @if (((options.showAsterisk && options.isRequired) || options.isRequired) && !options.isReadonly) {\r\n <span class=\"text-danger\">*</span>\r\n }\r\n </label>\r\n <!--MaskPattern-->\r\n @if (maskPattern != null && maskPattern != '' && !options.isReadonly) {\r\n <div class=\"bbsf-input-container\" [ngClass]=\"options.enableCopyToClipboard ? 'p-40px' : ''\">\r\n <!--Icon-->\r\n <div *ngIf=\"options.icon != null\" class=\"svg svg-icon-grey bbsf-icon\"\r\n [ngClass]=\"options.iconPosition == 1 ? 'bbsf-left-icon' : 'bbsf-right-icon'\">\r\n <span [inlineSVG]=\"options.icon\"></span>\r\n </div>\r\n <!--input-->\r\n <input class=\"form-control {{ options.extraClasses }}\" [mask]=\"maskPattern\" placeHolderCharacter=\" \"\r\n [showMaskTyped]=\"true\" [validation]=\"true\" [dir]=\"textDir\" aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n formControlName=\"{{ options.name }}\" type=\"{{ getInputType(options.type) }}\" [(ngModel)]=\"options.value\"\r\n [class.is-invalid]=\"textBoxFormControl.invalid && textBoxFormControl.touched\"\r\n placeholder=\"{{ options.placeholder }}\" id=\"{{ options.name }}\" autocomplete=\"{{ options.autoComplete }}\"\r\n (change)=\"trimControlValue()\" (keyup)=\"onTextChange()\" [readonly]=\"options.isReadonly\"\r\n (keydown)=\"wordCountArray > options.maxWordCount && $event.keyCode != 8 ? $event.preventDefault() : null\"\r\n #userInput (blur)=\"onTextBlur()\" />\r\n <!--CopyToClipboard-->\r\n <span class=\"copy-clipboard\" ngbTooltip=\"Copied!\" *ngIf=\"options.enableCopyToClipboard\"\r\n (click)=\"copyInputMessage(userInput)\">\r\n <i class=\"fas fa-copy\"></i>\r\n </span>\r\n </div>\r\n }\r\n <!--NoMaskPattern-->\r\n <div *ngIf=\"maskPattern == null || (maskPattern == '' && !options.isReadonly)\" class=\"bbsf-input-container\"\r\n [ngClass]=\"options.enableCopyToClipboard ? 'p-40px' : ''\">\r\n <!--Icon-->\r\n <div class=\"svg svg-icon-grey bbsf-icon\"\r\n [ngClass]=\"options.iconPosition == 1 ? 'bbsf-left-icon' : 'bbsf-right-icon'\" *ngIf=\"options.icon != null\">\r\n <span [inlineSVG]=\"options.icon\"></span>\r\n </div>\r\n <!--input-->\r\n <input class=\"form-control {{ options.extraClasses }} \" [dir]=\"textDir\" (focus)=\"onFocus(true)\"\r\n (focusout)=\"onFocus(false)\" maxlength=\"{{ options.maxLength }}\" minlength=\"{{ options.minLength }}\"\r\n aria-describedby=\"email-error\" aria-invalid=\"true\" formControlName=\"{{ options.name }}\"\r\n type=\"{{ getInputType(options.type) }}\"\r\n [class.is-invalid]=\"textBoxFormControl.invalid && textBoxFormControl.touched\"\r\n placeholder=\"{{ options.placeholder }}\" id=\"{{ options.name }}\" autocomplete=\"{{ options.autoComplete }}\"\r\n (change)=\"trimControlValue()\" (keyup)=\"onTextChange()\" [(ngModel)]=\"options.value\"\r\n (keydown)=\"wordCountArray > options.maxWordCount && $event.keyCode != 8 ? $event.preventDefault() : null\"\r\n [readonly]=\"options.isReadonly\" #userInput (blur)=\"onTextBlur()\" />\r\n <!--CopyToClipboard-->\r\n <span class=\"copy-clipboard\" ngbTooltip=\"Copied!\" triggers=\"click:blur\" *ngIf=\"options.enableCopyToClipboard\"\r\n (click)=\"copyInputMessage(userInput)\">\r\n <i class=\"fas fa-copy\"></i>\r\n </span>\r\n </div>\r\n <!-- readonly -->\r\n @if (options.isReadonly) {\r\n <div>\r\n <a *ngIf=\"options.type == inputType.Email\" href=\"mailto: {{ options.value }}\">{{ options.value }}</a>\r\n <a *ngIf=\"options.type == inputType.URL\" href=\"{{ options.value }}\" target=\"_blank\">{{ options.value }}</a>\r\n <span *ngIf=\"options.type != inputType.URL && options.type != inputType.Email\"\r\n class=\"readonly-view\">{{ options.value }}</span>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"subtext-container\">\r\n <!--wordCount-->\r\n <div class=\"bbsf-word-count\" *ngIf=\"options.maxWordCount > 0 && isShowWordCount\">\r\n {{ wordCount }}/{{ options.maxWordCount }} Words</div>\r\n <!-- CharsLimitMsg-->\r\n <div class=\"bbsf-character-count\" *ngIf=\"showCharsLimitMsg\"\r\n [ngClass]=\"{ 'badge-light-warning': charsLimitMsgClass === 'warning', 'badge-light-danger': charsLimitMsgClass === 'danger' }\">\r\n {{ maxLimitWarningMsg }}\r\n </div>\r\n <!-- Password Disclaimer -->\r\n <div class=\"bbsf-password-disclaimer\"\r\n *ngIf=\"options.type == inputType.Password && !options.removeDefaultPasswordValidation && !options.isReadonly && options.showPasswordRequirements\">\r\n <div class=\"password-requirements\">\r\n <div class=\"requirement-title\">{{ passwordRequirementsTitle }}</div>\r\n <ul class=\"requirements-list\">\r\n <li [ngClass]=\"{'requirement-met': hasNumber, 'requirement-not-met': !hasNumber}\">\r\n <i class=\"fas\" [ngClass]=\"hasNumber ? 'fa-check text-success' : 'fa-times text-danger'\"></i>\r\n {{ passwordComplexityHasNumber }}\r\n </li>\r\n <li [ngClass]=\"{'requirement-met': hasCapitalLetter, 'requirement-not-met': !hasCapitalLetter}\">\r\n <i class=\"fas\" [ngClass]=\"hasCapitalLetter ? 'fa-check text-success' : 'fa-times text-danger'\"></i>\r\n {{ passwordComplexityHasCapitalLetter }}\r\n </li>\r\n <li [ngClass]=\"{'requirement-met': hasSmallLetter, 'requirement-not-met': !hasSmallLetter}\">\r\n <i class=\"fas\" [ngClass]=\"hasSmallLetter ? 'fa-check text-success' : 'fa-times text-danger'\"></i>\r\n {{ passwordComplexityHasSmallLetter }}\r\n </li>\r\n <li [ngClass]=\"{'requirement-met': hasSpecialLetter, 'requirement-not-met': !hasSpecialLetter}\">\r\n <i class=\"fas\" [ngClass]=\"hasSpecialLetter ? 'fa-check text-success' : 'fa-times text-danger'\"></i>\r\n {{ passwordComplexityHasSpecialLetter }}\r\n </li>\r\n <li [ngClass]=\"{'requirement-met': hasMinLength, 'requirement-not-met': !hasMinLength}\">\r\n <i class=\"fas\" [ngClass]=\"hasMinLength ? 'fa-check text-success' : 'fa-times text-danger'\"></i>\r\n {{ minLengthRequirement }}\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n <!-- LabelDescription-->\r\n <div class=\"bbsf-control-desc\" *ngIf=\"options.labelDescription != null\">{{ options.labelDescription }}</div>\r\n <!-- requiredText-->\r\n <div class=\"bbsf-validation\" [dir]=\"textDir\" *ngIf=\"textBoxFormControl.invalid && textBoxFormControl.touched\">\r\n {{ getErrorValidation(textBoxFormControl.errors | keyvalue) }}\r\n </div>\r\n </div>\r\n\r\n @if ((group.valid && group.dirty && group.touched) || (group.untouched && group.invalid && group.dirty)) {\r\n <div>{{ resetError() }}</div>\r\n }\r\n</div>" }]
|
|
6417
6456
|
}], ctorParameters: () => [{ type: ControlUtility }, { type: i2.ControlContainer, decorators: [{
|
|
6418
6457
|
type: Optional
|
|
6419
6458
|
}] }, { type: i2.FormGroupDirective }, { type: i3.UtilityService }, { type: i3.ControlValidationService }, { type: GlobalSettings }], propDecorators: { group: [{
|
|
@@ -10532,7 +10571,7 @@ class AppBaseComponent {
|
|
|
10532
10571
|
}
|
|
10533
10572
|
calculateInitials(name) {
|
|
10534
10573
|
let language = localStorage.getItem('language');
|
|
10535
|
-
let currentUser =
|
|
10574
|
+
let currentUser = AuthService.user.profile;
|
|
10536
10575
|
console.log(currentUser);
|
|
10537
10576
|
let userName = language == 'en' ? currentUser.given_nameEn : currentUser.given_nameAr;
|
|
10538
10577
|
if (currentUser) {
|