{"version":3,"file":"toolbox-forms.mjs","sources":["../../../projects/toolbox/forms/validation/validators.ts","../../../projects/toolbox/forms/validation/validation.service.ts","../../../projects/toolbox/forms/validation/validation.component.ts","../../../projects/toolbox/forms/validation/directives/currency.directive.ts","../../../projects/toolbox/forms/validation/directives/upper.directive.ts","../../../projects/toolbox/forms/validation/directives/not-equal.directive.ts","../../../projects/toolbox/forms/validation/directives/equal.directive.ts","../../../projects/toolbox/forms/validation/index.ts","../../../projects/toolbox/forms/form-helpers.ts","../../../projects/toolbox/forms/base-form.component.ts","../../../projects/toolbox/forms/autofocus/autofocus.directive.ts","../../../projects/toolbox/forms/guards/can-deactivate.guard.ts","../../../projects/toolbox/forms/controls/accessor-base.directive.ts","../../../projects/toolbox/forms/controls/input-base.directive.ts","../../../projects/toolbox/forms/controls/form-actions/form-actions.component.ts","../../../projects/toolbox/forms/controls/label/label.component.ts","../../../projects/toolbox/forms/controls/input/input.component.ts","../../../projects/toolbox/forms/controls/select/select.component.ts","../../../projects/toolbox/forms/controls/switch/switch.component.ts","../../../projects/toolbox/forms/controls/text-area/text-area.component.ts","../../../projects/toolbox/forms/controls/index.ts","../../../projects/toolbox/forms/forms.module.ts","../../../projects/toolbox/forms/toolbox-forms.ts"],"sourcesContent":["/* eslint-disable max-len,@typescript-eslint/strict-boolean-expressions */\r\nimport { AbstractControl, ValidationErrors, ValidatorFn } from \"@angular/forms\";\r\n\r\nimport {\r\n isInputValueEmpty,\r\n isDateValid,\r\n isSsn,\r\n isNumber,\r\n isCurrency,\r\n isCreditCard,\r\n isEmail\r\n} from \"@lacera/ngx-toolbox/utilities\";\r\n\r\n/**\r\n * Validator that requires a date. It uses {@link isDateValid}, which checks if\r\n * the date is of types {@link Date} or {@link String} ignoring numbers.\r\n * @param control The control to validate.\r\n * @returns 'invalidDate' as true if validation fails, otherwise null.\r\n */\r\nexport const dateValidator = ( control: AbstractControl ): ValidationErrors | null =>\r\n // Don't validate empty values to allow optional controls\r\n isInputValueEmpty( control.value )\r\n ? null\r\n : isDateValid( control.value ) ? null : { invalidDate: true };\r\n\r\n\r\n/**\r\n * Validator that requires a social security number with or without dashes.\r\n * @param control The control to validate.\r\n * @returns 'invalidSSN' as true if validation fails, otherwise null.\r\n */\r\nexport const ssnValidator = ( control: AbstractControl ): ValidationErrors | null =>\r\n isInputValueEmpty( control.value )\r\n ? null\r\n : isSsn( control.value ) ? null : { invalidSSN: true };\r\n\r\n/**\r\n * Validator that performs validation on an Internet email address (SMTP). It\r\n * uses an RFC 2822 compliant regex match.\r\n * @param control The control to validate.\r\n * @returns 'invalidEmailAddress' as true if validation fails, otherwise null.\r\n */\r\nexport const emailValidator = ( control: AbstractControl ): ValidationErrors | null =>\r\n !isInputValueEmpty( control.value ) && isEmail( control.value )\r\n ? null\r\n : { invalidEmailAddress: true };\r\n\r\n/**\r\n * Validator that performs validation on a credit card number\r\n * (Visa, MasterCard, American Express, Diners Club, Discover, and JCB).\r\n * @param control The control to validate.\r\n * @returns 'invalidCreditCard' as true if validation fails, otherwise null.\r\n */\r\nexport const creditCardValidator =\r\n ( control: AbstractControl ): ValidationErrors | null =>\r\n // Visa, MasterCard, American Express, Diners Club, Discover, JCB\r\n !isInputValueEmpty( control.value ) && isCreditCard( control.value )\r\n ? null\r\n : { invalidCreditCard: true };\r\n\r\n/**\r\n * Validator that requires the control value to be equal to a specified value.\r\n * @param value The value the compare against.\r\n * @returns 'equal' as true if validation fails, otherwise null.\r\n */\r\nexport const equalValidator = ( value: any ): ValidatorFn =>\r\n ( c: AbstractControl ): ValidationErrors | null =>\r\n isInputValueEmpty( c.value )\r\n ? null\r\n : c.value === value ? null : { equal: { equalValue: value } };\r\n\r\n/**\r\n * Validator that requires the control value to not be equal to a specified value.\r\n * @param value The value the compare against.\r\n * @returns 'notEqual' as true if validation fails, otherwise null.\r\n */\r\nexport const notEqualValidator = ( value: any ): ValidatorFn =>\r\n ( c: AbstractControl ): ValidationErrors | null =>\r\n isInputValueEmpty( c.value )\r\n ? null\r\n : c.value !== value ? null : { notEqual: { notEqualValue: value } };\r\n\r\n/**\r\n * Validator that requires the control value to be a number.\r\n * @param control The control to validate.\r\n * @returns 'invalidNumber' as false if validation fails, otherwise null.\r\n */\r\nexport const numericValidator =\r\n ( control: AbstractControl ): ValidationErrors | null =>\r\n isInputValueEmpty( control.value )\r\n ? null\r\n : isNumber( control.value ) ? null : { invalidNumber: true };\r\n\r\n/**\r\n * Validator that requires the control value to be of currency format ($0.00).\r\n * @param control The control to validate.\r\n * @returns 'invalidCurrency' as false if validation fails, otherwise null.\r\n */\r\nexport const currencyValidator =\r\n ( control: AbstractControl ): ValidationErrors | null =>\r\n isInputValueEmpty( control.value )\r\n ? null\r\n : isCurrency( control.value ) ? null : { invalidCurrency: true };\r\n","import { Injectable } from \"@angular/core\";\r\n\r\nimport { isNotNullOrEmpty } from \"@lacera/ngx-toolbox/utilities\";\r\nimport {\r\n TbxValidationControlMessages,\r\n TbxValidationMessage\r\n} from \"./validation.interface\";\r\n\r\n/**\r\n * Provides form validation services to be shared in the application.\r\n */\r\n@Injectable()\r\nexport class TbxValidationService {\r\n /**\r\n * The messages for a form that are provided when the form is instantiated. These\r\n * are used instead of the standard message for the various validators.\r\n */\r\n public static formMessages: TbxValidationControlMessages[] = [];\r\n\r\n /**\r\n * Gets the validation error message for the specified code.\r\n * @param code The validator code.\r\n * @param validatorValue The validator value.\r\n * @param controlName The name of the control.\r\n * @returns The validator error message if found.\r\n */\r\n public static getValidatorErrorMessage(\r\n code: string, validatorValue: any, controlName?: string ): string | null {\r\n const messages: TbxValidationMessage = {\r\n required: \"This is a required field\",\r\n minlength: `Minimum required length is ${validatorValue.requiredLength}`,\r\n maxlength: `Maximum allowed length is ${validatorValue.requiredLength}`,\r\n max: `The maximum range allowed is ${validatorValue.max}`,\r\n min: `The minimum range allowed is ${validatorValue.min}`,\r\n invalidCreditCard: \"Invalid credit card number\",\r\n invalidDate: \"This is not a valid date\",\r\n email: \"Invalid email address\",\r\n invalidSSN: \"This SSN is not valid\",\r\n equal: `This field must equal '${validatorValue.equalValue}'`,\r\n notEqual: `This field must not equal '${validatorValue.notEqualValue}'`,\r\n invalidNumber: \"This is not a valid number\",\r\n invalidCurrency: \"This is not valid currency\"\r\n };\r\n\r\n // Check if we have a message to use from the back-end\r\n const message = TbxValidationService.getControlMessage( code, controlName );\r\n if( message !== null ) {\r\n return message;\r\n }\r\n\r\n // No back-end message, check the array above and if none, return the\r\n // validator value which is probably validator not handled by us\r\n return isNotNullOrEmpty( messages[code] )\r\n ? messages[code]\r\n : validatorValue;\r\n }\r\n\r\n /**\r\n * Gets the message if controlName is specified, and form control messages\r\n * have been provided.\r\n * @param code The validator code.\r\n * @param controlName The control name to find.\r\n * @returns The control message if found, null otherwise.\r\n */\r\n public static getControlMessage( code: string, controlName?: string ): string | null {\r\n if( controlName === undefined || TbxValidationService.formMessages.length === 0 ) {\r\n return null;\r\n }\r\n\r\n for( const messages of TbxValidationService.formMessages ) {\r\n // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions\r\n if( messages[controlName] ) {\r\n for( const message of messages[controlName] ) {\r\n // tslint:disable-next-line: strict-boolean-expressions\r\n if( message[code] ) {\r\n return message[code];\r\n }\r\n }\r\n }\r\n }\r\n\r\n return null;\r\n }\r\n}\r\n","import { Component, input, computed } from \"@angular/core\";\r\nimport { AbstractControl } from \"@angular/forms\";\r\n\r\nimport { isNotNullOrEmpty } from \"@lacera/ngx-toolbox/utilities\";\r\nimport { getControlName } from \"../form-helpers\";\r\nimport { TbxValidationService } from \"./validation.service\";\r\n\r\n/**\r\n * Displays error messages for the specified control.\r\n */\r\n@Component( {\r\n selector: \"tbx-validation-message\",\r\n standalone: false,\r\n template: `\r\n @if(errorMessage) {\r\n
\r\n {{ errorMessage }}\r\n
\r\n }\r\n `\r\n} )\r\nexport class TbxValidationComponent {\r\n /** Gets or sets the control for which to check for errors. */\r\n public readonly control = input.required();\r\n\r\n /** Gets or sets an optional message to display when there is an error. */\r\n public readonly message = input( \"\" );\r\n\r\n /** Gets the error message for the control, or null if none. */\r\n public get errorMessage(): string | null {\r\n const ctrl = this.control();\r\n\r\n if( !ctrl || !ctrl.touched ) {\r\n return null;\r\n }\r\n\r\n const errors = ctrl.errors;\r\n if( !errors ) {\r\n return null;\r\n }\r\n\r\n for( const propName in errors ) {\r\n if( Object.prototype.hasOwnProperty.call( errors, propName ) ) {\r\n return isNotNullOrEmpty( this.message() )\r\n ? this.message()\r\n : TbxValidationService.getValidatorErrorMessage(\r\n propName,\r\n errors[propName],\r\n getControlName( ctrl )\r\n );\r\n }\r\n }\r\n\r\n return null;\r\n }\r\n}\r\n","import { Directive, Input, forwardRef } from \"@angular/core\";\r\nimport {\r\n NG_VALIDATORS,\r\n Validator,\r\n AbstractControl,\r\n ValidationErrors\r\n} from \"@angular/forms\";\r\n\r\nimport { currencyValidator } from \"../validators\";\r\n\r\n/**\r\n * Directive that requires a control value to be of currency format ($0.00).\r\n */\r\n@Directive( {\r\n selector: \"[tbx-currency][formControlName],[tbx-currency][formControl],[tbx-currency][ngModel]\",\r\n standalone: true,\r\n providers: [\r\n {\r\n provide: NG_VALIDATORS,\r\n useExisting: forwardRef( () => TbxCurrencyValidator ),\r\n multi: true\r\n }\r\n ]\r\n} )\r\nexport class TbxCurrencyValidator implements Validator {\r\n /** Indicates whether the validator is enabled. */\r\n private enabled = false;\r\n\r\n /** Stores the function to call when value changes. */\r\n private onChange: ( () => void ) | undefined;\r\n\r\n /**\r\n * Sets the currency value when it changes.\r\n * @param value The changed value.\r\n */\r\n @Input( \"tbx-currency\" )\r\n public set currency( value: boolean | string ) {\r\n this.enabled = value === \"\" || value === true || value === \"true\";\r\n\r\n if( this.onChange !== undefined ) {\r\n this.onChange();\r\n }\r\n }\r\n\r\n /**\r\n * Called to validate the specified control value.\r\n * @param c The control to validate.\r\n * @returns The validation errors or null if validation succeeds.\r\n */\r\n public validate( c: AbstractControl ): ValidationErrors | null {\r\n return this.enabled ? currencyValidator( c ) : null;\r\n }\r\n\r\n /**\r\n * Called when the validator is changed.\r\n * @param fn The function to be called when the validator changes.\r\n */\r\n public registerOnValidatorChange( fn: () => void ): void {\r\n this.onChange = fn;\r\n }\r\n}\r\n","import { Directive, HostListener, ElementRef, Attribute } from \"@angular/core\";\r\n\r\n/**\r\n * Directive that requires a control value to be uppercase.\r\n */\r\n@Directive( {\r\n selector: \"[tbx-upper][formControlName],[tbx-upper][formControl],[tbx-upper][ngModel]\",\r\n standalone: true\r\n} )\r\nexport class TbxUpperDirective {\r\n private inputEl?: HTMLInputElement;\r\n\r\n public constructor( public ref: ElementRef ) {\r\n }\r\n\r\n @HostListener( \"input\", [\"$event\"] )\r\n public onInput( _: any ): void {\r\n if( !this.inputEl ) {\r\n this.inputEl = this.ref.nativeElement.querySelector( \".form-control\" );\r\n }\r\n\r\n if( this.inputEl != null ) {\r\n const start = this.inputEl.selectionStart;\r\n const end = this.inputEl.selectionEnd;\r\n this.inputEl.value = this.inputEl.value.toUpperCase();\r\n this.inputEl.setSelectionRange( start, end );\r\n }\r\n }\r\n}\r\n","import {\r\n Directive,\r\n Input,\r\n forwardRef,\r\n OnInit,\r\n SimpleChanges,\r\n OnChanges\r\n} from \"@angular/core\";\r\n\r\nimport {\r\n NG_VALIDATORS,\r\n Validator,\r\n ValidatorFn,\r\n AbstractControl,\r\n ValidationErrors\r\n} from \"@angular/forms\";\r\n\r\nimport { notEqualValidator } from \"../validators\";\r\n\r\n/**\r\n * Directive that requires a control value to be equal to a specified value.\r\n */\r\n@Directive( {\r\n selector: \"[tbx-notEqual][formControlName],[tbx-notEqual][formControl],[tbx-notEqual][ngModel]\",\r\n standalone: true,\r\n providers: [\r\n {\r\n provide: NG_VALIDATORS,\r\n useExisting: forwardRef( () => TbxNotEqualValidator ),\r\n multi: true\r\n }\r\n ]\r\n} )\r\nexport class TbxNotEqualValidator implements Validator, OnInit, OnChanges {\r\n /** Gets or sets the value the control value should not equal to. */\r\n @Input( \"tbx-notEqual\" )\r\n public equal: any;\r\n\r\n /** Stores the validator function called when the control value changes. */\r\n private validator!: ValidatorFn;\r\n\r\n /** Stores the function to call when value changes. */\r\n private onChange!: () => void;\r\n\r\n public ngOnInit(): void {\r\n this.validator = notEqualValidator( this.equal );\r\n }\r\n\r\n public ngOnChanges( changes: SimpleChanges ): void {\r\n for( const key in changes ) {\r\n if( key === \"notEqual\" ) {\r\n this.validator = notEqualValidator( changes[key].currentValue );\r\n\r\n // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions\r\n if( this.onChange ) {\r\n this.onChange();\r\n }\r\n }\r\n }\r\n }\r\n\r\n /**\r\n * Called to validate the specified control value.\r\n * @param c The control to validate.\r\n * @returns The validation errors or null if validation succeeds.\r\n */\r\n public validate( c: AbstractControl ): ValidationErrors | null {\r\n return this.validator( c );\r\n }\r\n\r\n /**\r\n * Called when the validator is changed.\r\n * @param fn The function to be called when the validator changes.\r\n */\r\n public registerOnValidatorChange( fn: () => void ): void {\r\n this.onChange = fn;\r\n }\r\n}\r\n","import {\r\n Directive,\r\n Input,\r\n forwardRef,\r\n OnInit,\r\n SimpleChanges,\r\n OnChanges\r\n} from \"@angular/core\";\r\n\r\nimport {\r\n NG_VALIDATORS,\r\n Validator,\r\n ValidatorFn,\r\n AbstractControl,\r\n ValidationErrors\r\n} from \"@angular/forms\";\r\n\r\nimport { equalValidator } from \"../validators\";\r\n\r\n/**\r\n * Directive that requires a control value to be equal to a specified value.\r\n */\r\n@Directive( {\r\n selector: \"[tbx-equal][formControlName],[tbx-equal][formControl],[tbx-equal][ngModel]\",\r\n standalone: true,\r\n providers: [\r\n {\r\n provide: NG_VALIDATORS,\r\n useExisting: forwardRef( () => TbxEqualValidator ),\r\n multi: true\r\n }\r\n ]\r\n} )\r\nexport class TbxEqualValidator implements Validator, OnInit, OnChanges {\r\n /** Gets or sets the value the control value should equal to. */\r\n @Input( \"tbx-equal\" )\r\n public equal: any;\r\n\r\n /** Stores the validator function called when the control value changes. */\r\n private validator!: ValidatorFn;\r\n\r\n /** Stores the function to call when value changes. */\r\n private onChange!: () => void;\r\n\r\n /**\r\n * Invoked only once when the directive is instantiated.\r\n */\r\n public ngOnInit(): void {\r\n this.validator = equalValidator( this.equal );\r\n }\r\n\r\n /**\r\n * Called when the content has changed.\r\n * @param changes Contains the changed properties.\r\n */\r\n public ngOnChanges( changes: SimpleChanges ): void {\r\n for( const key in changes ) {\r\n if( key === \"equal\" ) {\r\n this.validator = equalValidator( changes[key].currentValue );\r\n\r\n // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions\r\n if( this.onChange ) {\r\n this.onChange();\r\n }\r\n }\r\n }\r\n }\r\n\r\n /**\r\n * Called to validate the specified control value.\r\n * @param c The control to validate.\r\n * @returns The validation errors or null if validation succeeds.\r\n */\r\n public validate( c: AbstractControl ): ValidationErrors | null {\r\n return this.validator( c );\r\n }\r\n\r\n /**\r\n * Called when the validator is changed.\r\n * @param fn The function to be called when the validator changes.\r\n */\r\n public registerOnValidatorChange( fn: () => void ): void {\r\n this.onChange = fn;\r\n }\r\n}\r\n","export { TbxValidationService } from \"./validation.service\";\r\n\r\nimport { TbxValidationComponent } from \"./validation.component\";\r\nimport { TbxCurrencyValidator } from \"./directives/currency.directive\";\r\nimport { TbxUpperDirective } from \"./directives/upper.directive\";\r\nimport { TbxNotEqualValidator } from \"./directives/not-equal.directive\";\r\nimport { TbxEqualValidator } from \"./directives/equal.directive\";\r\n\r\nexport const validation = [\r\n TbxValidationComponent,\r\n];\r\n\r\nexport const standaloneValidation = [\r\n TbxCurrencyValidator,\r\n TbxUpperDirective,\r\n TbxNotEqualValidator,\r\n TbxEqualValidator\r\n];\r\n","import { formatDate } from \"@angular/common\";\r\nimport {\r\n AbstractControl,\r\n FormControl,\r\n FormGroup,\r\n ValidationErrors,\r\n ValidatorFn,\r\n Validators\r\n} from \"@angular/forms\";\r\nimport {\r\n isCurrency,\r\n isNotNullOrEmpty,\r\n isNumber,\r\n toDate,\r\n toFloat,\r\n toNumber\r\n} from \"@lacera/ngx-toolbox/utilities\";\r\nimport {\r\n currencyValidator,\r\n dateValidator,\r\n numericValidator\r\n} from \"./validation/validators\";\r\nimport {\r\n TbxValidationCode,\r\n TbxValidationMessage\r\n} from \"./validation/validation.interface\";\r\nimport { TbxMetadata, TbxModelMetadata } from \"@lacera/ngx-toolbox/http\";\r\nimport { TbxValidationService } from \"./validation\";\r\n\r\n/**\r\n * Gets the control name by querying the parent of the control.\r\n * @param control The control for which to get the name.\r\n * @exception control must be provided to the function.\r\n * @returns The control name or undefined\r\n */\r\nexport const getControlName = ( control?: AbstractControl ): string | undefined => {\r\n if( control === undefined || control.parent === null ) {\r\n throw new Error( \"Invalid control provided to the function.\" );\r\n }\r\n\r\n const parent = control.parent;\r\n\r\n return Object.keys( parent.controls )\r\n .find( name => control === parent.get( name ) );\r\n};\r\n\r\n/**\r\n * Gets the Bootstrap CSS classes to show errors for when a field is invalid.\r\n * @param fieldName The field to validate.\r\n * @param form The form that contains the field.\r\n * @param className The class name to apply to the control (defaults to 'is-invalid').\r\n * @returns The CSS classes.\r\n */\r\nexport const getFieldErrorCss = (\r\n fieldName: string, form: FormGroup, className = \"is-invalid\" ): {} =>\r\n(\r\n {\r\n // eslint-disable-next-line @typescript-eslint/naming-convention\r\n [className]: isFieldValid( fieldName, form )\r\n }\r\n);\r\n\r\n/**\r\n * A shortcut to sets errors on a form control when running validations manually\r\n * instead of having to get the control and validate.\r\n * @param field The name of the field to set in the form.\r\n * @param errors The map of errors to set for the field control.\r\n * @param form The form to search for the field. If not specified,\r\n * the local form is searched.\r\n * @throws The field does not exist in the local form or the specified one.\r\n * @returns Nothing.\r\n */\r\nexport const setFieldErrors = (\r\n field: string, errors: ValidationErrors | null, form: FormGroup ): void => {\r\n const ctrl = form.get( field );\r\n if( ctrl === null ) {\r\n throw new Error( `The field \"${field}\" was not found in the form.` );\r\n }\r\n\r\n ctrl.setErrors( errors );\r\n ctrl.markAsTouched();\r\n};\r\n\r\n/**\r\n * Checks if a field is valid by checking the control's Valid value and whether\r\n * the control has been touched.\r\n * @param fieldName The field to check.\r\n * @param form The form that contains the control.\r\n * @returns true if valid, false otherwise.\r\n */\r\nexport const isFieldValid = ( fieldName: string, form: FormGroup ): boolean => {\r\n const control = form.get( fieldName );\r\n\r\n if( control instanceof FormControl ) {\r\n return !control.valid && control.touched;\r\n }\r\n\r\n return false;\r\n};\r\n\r\n/**\r\n * Validates all fields in the specified form, and causes validation messages.\r\n * @param form The form to validate.\r\n * @returns The list of errors found in the fields, if any.\r\n */\r\nexport const validateAllFields = ( form: FormGroup ): string[] => {\r\n const returnErrors: string[] = [];\r\n\r\n Object.keys( form.controls ).forEach( ( field: string ) => {\r\n const control = form.get( field );\r\n if( control instanceof FormControl ) {\r\n control.markAsTouched( { onlySelf: true } );\r\n\r\n const errors = control.errors;\r\n if( errors !== null ) {\r\n Object.keys( errors ).forEach( key => {\r\n const message = TbxValidationService.getValidatorErrorMessage(\r\n key as TbxValidationCode,\r\n errors[key],\r\n getControlName( control )\r\n );\r\n\r\n returnErrors.push( message !== null ? message : errors[key] );\r\n } );\r\n }\r\n }\r\n else if( control instanceof FormGroup ) {\r\n returnErrors.push( ...validateAllFields( control ) );\r\n }\r\n } );\r\n\r\n return returnErrors;\r\n};\r\n\r\n/**\r\n * Determines if the given data type is a C# numeric type such as Int32,\r\n * Int32?, int, or int?.\r\n * @param type The C# data type to check.\r\n * @returns true if the data type is numeric, false otherwise.\r\n */\r\nexport const isNumberDataType = ( type: string | null ) =>\r\n type != null && [\"Int32\", \"Int32?\", \"int\", \"int?\"].includes( type );\r\n\r\n/**\r\n * Determines if the given data type is a C# date type such as DateTime,\r\n * DateTime?, Date, or Date?.\r\n * @param type The C# data type to check.\r\n * @returns true if the data type is a DateTime, false otherwise.\r\n */\r\nexport const isDateDataType = ( type: string | null ) =>\r\n type != null && [\"DateTime\", \"DateTime?\", \"Date\", \"Date?\"].includes( type );\r\n\r\n/**\r\n * Determines if the given data type is a C# float type such as Decimal,\r\n * Decimal?, Double, or Double?.\r\n * @param type The C# data type to check.\r\n * @returns true if the data type is numeric, false otherwise.\r\n */\r\nexport const isFloatDateType = ( type: string | null ) =>\r\n type != null && [\"Decimal\", \"Decimal?\", \"Double\", \"Double?\"].includes( type );\r\n\r\n/**\r\n * Creates the form based on the specified model (received from the back-end).\r\n * @param model The model received from the server.\r\n * @param dateFormat The format for the dates if requested as string.\r\n * @param convertDates Indicates to convert the values to {@link Date}\r\n * @throws The model must be provided.\r\n */\r\nexport const createReactiveForm = (\r\n model: TbxModelMetadata,\r\n dateFormat = \"yyyy-MM-dd\",\r\n convertDates = false\r\n): FormGroup => {\r\n if( model == null || model.metadata == null ) {\r\n throw new Error(\r\n \"The model received from the server must be specified to build the form. \" +\r\n \"It is also expected the model to include a metadata property.\" );\r\n }\r\n\r\n // Clear the validation form messages (and the form group to be safe)\r\n TbxValidationService.formMessages = [];\r\n\r\n // Create a new form for all controls and validation\r\n const tempForm = new FormGroup( {} );\r\n\r\n // Loop through all the received metadata and create the form\r\n for( const meta of model.metadata ) {\r\n if( meta.name === null ||\r\n meta.dataType === null ||\r\n meta.dataType.indexOf( \"Enumerable\" ) !== -1 ) {\r\n continue;\r\n }\r\n\r\n const isNumberType = isNumberDataType( meta.dataType );\r\n const isDateTimeType = isDateDataType( meta.dataType );\r\n const isFloatType = isFloatDateType( meta.dataType );\r\n\r\n // Convert the date to a real date if requested\r\n let value = meta.value;\r\n if( isDateTimeType && isNotNullOrEmpty( value ) ) {\r\n value = convertDates\r\n ? toDate( value )\r\n : formatDate( value, dateFormat, \"en\" );\r\n }\r\n\r\n if( isNumberType && isNumber( value ) ) {\r\n value = toNumber( value );\r\n }\r\n\r\n if( isFloatType && isCurrency( value ) ) {\r\n value = toFloat( value );\r\n }\r\n\r\n // Configure the validators retrieved from the metadata\r\n const { validators, messages } = getValidatorsFromMeta( meta );\r\n\r\n // Add the control to the Angular form\r\n tempForm.addControl( meta.name, new FormControl( value, validators ) );\r\n\r\n // Add the custom validation messages to the validation service\r\n TbxValidationService.formMessages.push( { [meta.name]: messages } );\r\n }\r\n\r\n tempForm.markAsPristine();\r\n\r\n return tempForm;\r\n};\r\n\r\nexport const getValidatorsFromMeta = ( meta: TbxMetadata ): {\r\n /** The validators for the form. */\r\n validators: ValidatorFn[];\r\n\r\n /** The validation messages to display on violations. */\r\n messages: TbxValidationMessage[];\r\n} => {\r\n const validators: ValidatorFn[] = [];\r\n const messages: TbxValidationMessage[] = [{}];\r\n\r\n if( meta.required ) {\r\n validators.push( Validators.required );\r\n messages.push( { required: meta.requiredMessage ?? \"\" } );\r\n }\r\n\r\n if( meta.maxLength != null && meta.maxLength > 0 ) {\r\n validators.push( Validators.maxLength( meta.maxLength ) );\r\n messages.push( { maxlength: meta.maxLenMessage ?? \"\" } );\r\n }\r\n\r\n if( meta.minLength != null && meta.minLength > 0 ) {\r\n validators.push( Validators.minLength( meta.minLength ) );\r\n messages.push( { minlength: meta.minLenMessage ?? \"\" } );\r\n }\r\n\r\n if( meta.maxRange != null && meta.maxRange > 0 ) {\r\n validators.push( Validators.max( meta.maxRange ) );\r\n messages.push( { max: meta.rangeMessage ?? \"\" } );\r\n }\r\n\r\n if( meta.minRange != null && meta.minRange > 0 ) {\r\n validators.push( Validators.min( meta.minRange ) );\r\n messages.push( { min: meta.rangeMessage ?? \"\" } );\r\n }\r\n\r\n if( isDateDataType( meta.dataType ) ) {\r\n validators.push( dateValidator );\r\n }\r\n\r\n if( isNumberDataType( meta.dataType ) ) {\r\n validators.push( numericValidator );\r\n }\r\n\r\n if( isFloatDateType( meta.dataType ) ) {\r\n validators.push( currencyValidator );\r\n }\r\n\r\n return {\r\n validators,\r\n messages\r\n };\r\n};\r\n","import { Injectable } from \"@angular/core\";\r\nimport {\r\n FormGroup,\r\n FormControl,\r\n ValidationErrors,\r\n ValidatorFn,\r\n AbstractControl\r\n} from \"@angular/forms\";\r\n\r\nimport { TbxError, TbxModelMetadata } from \"@lacera/ngx-toolbox/http\";\r\nimport { TbxBaseComponent } from \"@lacera/ngx-toolbox/components\";\r\n\r\nimport {\r\n createReactiveForm,\r\n getFieldErrorCss,\r\n isFieldValid,\r\n setFieldErrors,\r\n validateAllFields\r\n} from \"./form-helpers\";\r\n\r\nimport { TbxCanDeactivate } from \"./guards/can-deactivate.interface\";\r\nimport { TbxValidationService } from \"./validation\";\r\n\r\n/**\r\n * Displays error messages for the specified control.\r\n */\r\n@Injectable()\r\nexport abstract class TbxBaseFormComponent\r\n extends TbxBaseComponent implements TbxCanDeactivate {\r\n /** Stores the form for the view. */\r\n public form!: FormGroup;\r\n\r\n /** Gets or sets a value indicating whether we're in edit mode. */\r\n public editMode = false;\r\n\r\n /**\r\n * Let Angular know whether the user can navigate away from this component.\r\n * @see TbxCanDeactivateGuard\r\n * @returns true if navigation allowed, false otherwise.\r\n */\r\n public get canDeactivate(): boolean {\r\n if( !this.form.dirty ) {\r\n return true;\r\n }\r\n\r\n const title = \"You have unsaved changes\";\r\n const msg = \"Are you sure you want to navigate away from this page?\";\r\n\r\n return confirm( `${title}. ${msg}` );\r\n }\r\n\r\n /**\r\n * Gets the Bootstrap CSS classes to show errors for when a field is invalid.\r\n * @param fieldName The field to validate.\r\n * @returns The CSS classes.\r\n */\r\n public getFieldErrorCss( fieldName: string ): {} {\r\n return getFieldErrorCss( fieldName, this.form );\r\n }\r\n\r\n /**\r\n * Checks if a field is valid by checking the control's Valid value and whether\r\n * the control has been touched.\r\n * @param fieldName - The field to check.\r\n * @returns true if valid, false otherwise.\r\n */\r\n public isFieldValid( fieldName: string ): boolean {\r\n TbxBaseFormComponent.ensureFormObject( this.form );\r\n\r\n return isFieldValid( fieldName, this.form );\r\n }\r\n\r\n /**\r\n * Validates the form and if not valid, it displays a message to the user.\r\n * @param theForm The form to validate.\r\n * @returns true if the form is valid, false otherwise.\r\n */\r\n public isFormValid( theForm?: FormGroup ): boolean {\r\n const f = theForm ?? this.form;\r\n TbxBaseFormComponent.ensureFormObject( f );\r\n\r\n if( f.valid ) {\r\n return true;\r\n }\r\n\r\n // Force the fields to validate so they can show errors\r\n const errors = this.validateAllFields();\r\n\r\n let message = \"Please correct the errors on the form and try again\\n\";\r\n if( errors.length > 0 ) {\r\n message += errors.join( \"\\n\" );\r\n }\r\n\r\n this.errorMessage.set( message );\r\n\r\n // The form is not valid\r\n return false;\r\n }\r\n\r\n /**\r\n * Validates all fields in the specified form, and causes validation messages.\r\n * @returns The list of errors found in the fields, if any.\r\n */\r\n public validateAllFields(): string[] {\r\n TbxBaseFormComponent.ensureFormObject( this.form );\r\n\r\n return validateAllFields( this.form );\r\n }\r\n\r\n /**\r\n * Creates the form based on the specified model (received from the back-end).\r\n * @param model The model received from the server.\r\n * @param dateFormat The format for the dates if requested as string.\r\n * @param convertDates Indicates to convert the values to {@link Date}\r\n * or leave as received/string.\r\n * @throws The model must be provided.\r\n */\r\n public createForm(\r\n model: TbxModelMetadata,\r\n dateFormat = \"yyyy-MM-dd\",\r\n convertDates = false ): void {\r\n // Save the form in the base class\r\n this.form = createReactiveForm( model, dateFormat, convertDates );\r\n }\r\n\r\n /**\r\n * A shortcut to sets errors on a form control when running validations manually\r\n * instead of having to get the control and validate.\r\n * @param field The name of the field to set in the form.\r\n * @param errors The map of errors to set for the field control.\r\n * @throws The field does not exist in the local form or the specified one.\r\n * @returns Nothing.\r\n */\r\n public setFieldErrors( field: string, errors: ValidationErrors | null ): void {\r\n TbxBaseFormComponent.ensureFormObject( this.form );\r\n setFieldErrors( field, errors, this.form );\r\n }\r\n\r\n /**\r\n * Handles errors encountered while saving a record in the form.\r\n * @param error The error received from the service.\r\n * @param theForm The optional form to validate.\r\n * @returns Nothing.\r\n */\r\n public handleSaveError( error: TbxError, theForm?: FormGroup ): void {\r\n const f = theForm ?? this.form;\r\n TbxBaseFormComponent.ensureFormObject( f );\r\n\r\n for( const val of error.validationErrors ) {\r\n const ctrl = f.get( val.key );\r\n\r\n if( ctrl !== null ) {\r\n ctrl.setErrors( { invalid: val.message } );\r\n ctrl.markAsTouched( { onlySelf: true } );\r\n }\r\n }\r\n\r\n this.errorMessage.set( error.message );\r\n this.busy.set( false );\r\n }\r\n\r\n /**\r\n * Adds a new control to the current form.\r\n * @param name The name of the field that matches 'fieldControlName' in the form.\r\n * @param value The initial value of the control.\r\n * @param validators The validators to add to the form control.\r\n * @param messages The messages to add to the {@link TbxValidationComponent} control.\r\n * @returns The control added to the form.\r\n */\r\n public addFormField(\r\n name: string,\r\n value: any,\r\n validators?: ValidatorFn[],\r\n messages?: any ): AbstractControl {\r\n TbxBaseFormComponent.ensureFormObject( this.form );\r\n\r\n const control = new FormControl( value, validators );\r\n this.form.addControl( name, control );\r\n\r\n // Add the validations messages if any\r\n if( messages !== undefined ) {\r\n TbxValidationService.formMessages.push( { [name]: messages } );\r\n }\r\n\r\n return control;\r\n }\r\n\r\n /**\r\n * Adds additional validators to the given control name and its messages.\r\n * @param name The name of the field that matches 'fieldControlName' in the form.\r\n * @param validators The validators to add to the form control.\r\n * @param messages The messages to add to the {@link TbxValidationComponent} control.\r\n * @returns The form control that was modified.\r\n */\r\n public addFormFieldValidators(\r\n name: string,\r\n validators: ValidatorFn[],\r\n messages?: any ): AbstractControl {\r\n TbxBaseFormComponent.ensureFormObject( this.form );\r\n\r\n const control = this.form.get( name );\r\n if( control === null ) {\r\n throw new Error( `The control with name ${name} was not found in the form.` );\r\n }\r\n\r\n // Get the existing validators in the control\r\n const currentValidators = control.validator;\r\n\r\n // Start fresh\r\n control.clearValidators();\r\n\r\n // Add the additional validators including existing ones\r\n control.setValidators(\r\n currentValidators !== null\r\n ? [currentValidators, ...validators]\r\n : [...validators]\r\n );\r\n\r\n // Add the validations messages if any\r\n if( messages !== undefined ) {\r\n TbxValidationService.formMessages.push( {\r\n [name]: messages\r\n } );\r\n }\r\n\r\n this.form.updateValueAndValidity();\r\n\r\n return control;\r\n }\r\n\r\n // eslint-disable-next-line @typescript-eslint/member-ordering\r\n private static ensureFormObject( form: FormGroup ): void {\r\n if( form == null ) {\r\n throw new Error( \"Form must be created first.\" );\r\n }\r\n }\r\n}\r\n","import {\r\n Directive,\r\n input,\r\n model,\r\n OnChanges,\r\n OnDestroy,\r\n SimpleChanges,\r\n ElementRef,\r\n AfterContentInit\r\n} from \"@angular/core\";\r\n\r\n/**\r\n * Directive sets the focus on an element.\r\n */\r\n@Directive( {\r\n selector: \"[autofocus], [tbxAutoFocus], [tbxAutofocus]\",\r\n standalone: true\r\n} )\r\nexport class TbxAutofocusDirective implements AfterContentInit, OnChanges, OnDestroy {\r\n /** Indicates whether to focus the element. */\r\n public shouldFocusElement = input( \"\" );\r\n\r\n /** The delay before taking the focus. */\r\n public timerDelay = model( 10 );\r\n\r\n /** The timer to know when to focus. */\r\n private timer?: number;\r\n\r\n /**\r\n * Initializes a new instance of the {@link TbxAutofocusDirective} class.\r\n * @param elementRef The element to set the focus to.\r\n */\r\n public constructor( private readonly elementRef: ElementRef ) {\r\n }\r\n\r\n /** Called once after the contents have been fully initialized. */\r\n public ngAfterContentInit(): void {\r\n // Because this directive can act on the stand-only \"autofocus\" attribute or\r\n // the more specialized \"tbx-autofocus\" property, we need to check to see if the\r\n // \"shouldFocusElement\" input property is the empty string. This will signify\r\n // that the focus it not being data-driven and should be performed automatically.\r\n if( this.shouldFocusElement() === \"\" ) {\r\n this.startFocusWorkflow();\r\n }\r\n }\r\n\r\n /**\r\n * Called every time the input bindings are updated.\r\n * @param changes The changes that cause the update.\r\n */\r\n public ngOnChanges( changes: SimpleChanges ): void {\r\n // If the timer delay is being passed-in as a string (ie, someone is using\r\n // attribute-input syntax, not property-input syntax), let's coalesce the\r\n // attribute to a numeric value so that our type-annotations are consistent.\r\n if( typeof this.timerDelay() !== \"number\" ) {\r\n // If coalesce fails, just fall-back to a same value.\r\n if( isNaN( +this.timerDelay() ) ) {\r\n this.timerDelay.set( 10 );\r\n }\r\n }\r\n\r\n // If the focus input is being data-driven, then we either need to start the\r\n // focus workflow if focus is required; or, clear any existing workflow if focus\r\n // is no longer required (so that we don't steal focus from another element).\r\n // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions\r\n if( changes[\"shouldFocusElement\"] ) {\r\n if( typeof this.shouldFocusElement() === \"string\" || this.shouldFocusElement() ) {\r\n this.startFocusWorkflow();\r\n }\r\n else {\r\n this.stopFocusWorkflow();\r\n }\r\n }\r\n }\r\n\r\n /** Called when the directive is destroyed. */\r\n public ngOnDestroy(): void {\r\n this.stopFocusWorkflow();\r\n }\r\n\r\n // I start the timer-based workflow that will focus the current element.\r\n private startFocusWorkflow(): void {\r\n // If there is already a timer running for this element, just let it play out -\r\n // resetting it at this point will only push-out the time at which the focus is\r\n // applied to the element.\r\n if( this.timer !== undefined ) {\r\n return;\r\n }\r\n\r\n this.timer = window.setTimeout(\r\n (): void => {\r\n console.log( \"setting focus\", this.elementRef.nativeElement );\r\n this.timer = undefined;\r\n this.elementRef.nativeElement.focus();\r\n },\r\n +this.timerDelay\r\n );\r\n }\r\n\r\n // I stop the timer-based workflow, preventing focus from taking place.\r\n private stopFocusWorkflow(): void {\r\n window.clearTimeout( this.timer );\r\n this.timer = undefined;\r\n }\r\n}\r\n","import { Injectable } from \"@angular/core\";\r\nimport { TbxCanDeactivate } from \"./can-deactivate.interface\";\r\nimport {\r\n ActivatedRouteSnapshot,\r\n CanDeactivate,\r\n GuardResult,\r\n MaybeAsync,\r\n RouterStateSnapshot\r\n} from \"@angular/router\";\r\n\r\n/**\r\n * Determines if a component can be deactivated. It calls the component's\r\n * implementation of the {@link TbxCanDeactivate} interface.\r\n */\r\nexport const tbxCanDeactivateFn =\r\n ( component: TbxCanDeactivate ) => component.canDeactivate;\r\n\r\n/**\r\n * Determines if a component can be deactivated. It calls the component's\r\n * implementation of the {@link canDeactivate} function.\r\n */\r\n@Injectable( { providedIn: \"root\" } )\r\nexport class TbxCanDeactivateGuard implements CanDeactivate\r\n{\r\n public canDeactivate(\r\n component: TbxCanDeactivate,\r\n _currentRoute: ActivatedRouteSnapshot,\r\n _currentState: RouterStateSnapshot,\r\n _nextState: RouterStateSnapshot\r\n ): MaybeAsync\r\n {\r\n return component.canDeactivate;\r\n }\r\n}\r\n","import { distinctUntilChanged, Subscription } from \"rxjs\";\r\n\r\nimport {\r\n Directive,\r\n Inject,\r\n Injector,\r\n input,\r\n linkedSignal,\r\n OnDestroy,\r\n OnInit\r\n} from \"@angular/core\";\r\n\r\nimport {\r\n ControlValueAccessor,\r\n FormControl,\r\n FormControlDirective,\r\n FormControlName,\r\n FormGroupDirective,\r\n NgControl,\r\n Validators\r\n} from \"@angular/forms\";\r\n\r\n@Directive( {\r\n selector: \"[tbxControlValueAccessor]\",\r\n standalone: false\r\n} )\r\nexport class TbxAccessorBaseDirective\r\n implements OnInit, OnDestroy, ControlValueAccessor {\r\n\r\n public required = input( false );\r\n public requiredValue = linkedSignal( () => this.required() );\r\n\r\n public formControl!: FormControl;\r\n public disabled = false;\r\n public onTouched!: () => void;\r\n public onChange!: ( val: T | null ) => T;\r\n\r\n private changeSub?: Subscription;\r\n\r\n public constructor( @Inject( Injector ) private readonly injector: Injector ) {}\r\n\r\n public ngOnInit(): void {\r\n this.setFormControl();\r\n\r\n // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions\r\n if( !this.required() ) {\r\n this.requiredValue.set( this.formControl.hasValidator( Validators.required ) );\r\n }\r\n }\r\n\r\n public ngOnDestroy(): void {\r\n this.changeSub?.unsubscribe();\r\n }\r\n\r\n public registerOnChange( fn: ( val: T | null ) => T ): void {\r\n this.changeSub =\r\n this.formControl?.valueChanges\r\n .pipe(\r\n distinctUntilChanged() )\r\n .subscribe( val => fn( val ) );\r\n }\r\n\r\n public writeValue( value: T ): void {\r\n if( this.onChange != null ) {\r\n this.onChange( value );\r\n }\r\n }\r\n\r\n public registerOnTouched( fn: () => void ): void { this.onTouched = fn; }\r\n\r\n public setDisabledState?( isDisabled: boolean ): void { this.disabled = isDisabled; }\r\n\r\n private setFormControl() {\r\n try {\r\n const formControl = this.injector.get( NgControl );\r\n\r\n switch( formControl.constructor ) {\r\n case FormControlName:\r\n this.formControl = this.injector\r\n .get( FormGroupDirective )\r\n .getControl( formControl as FormControlName );\r\n break;\r\n default:\r\n this.formControl = (formControl as FormControlDirective).form;\r\n }\r\n }\r\n catch( error ) {\r\n console.error( \"error - control: \", error );\r\n this.formControl = new FormControl();\r\n }\r\n }\r\n}\r\n","import { Directive, input } from \"@angular/core\";\r\nimport { TbxAccessorBaseDirective } from \"./accessor-base.directive\";\r\n\r\n@Directive( {\r\n selector: \"[tbxInputBaseDirective]\",\r\n standalone: false\r\n} )\r\nexport class TbxInputBaseDirective extends TbxAccessorBaseDirective {\r\n /**\r\n * The input ID (usually the form control name. This input is used\r\n * for the {@link formControlName}, the ID of the HTML element and the \"for\"\r\n * attribute of the label.\r\n */\r\n public inputId = input.required();\r\n\r\n /**\r\n * The control name for a reactive form control.\r\n */\r\n public formControlName = input.required();\r\n\r\n /**\r\n * The label caption to display on the control. If left blank, the label\r\n * will not be displayed.\r\n */\r\n public label = input( \"\" );\r\n\r\n /**\r\n * Any additional classes to add to the div that contains the label, input,\r\n * and validation message controls.\r\n */\r\n public class = input( \"\" );\r\n\r\n /**\r\n * Any additional classes to add to the Input element (defaults to form-control).\r\n */\r\n public inputClass = input( \"\" );\r\n\r\n /**\r\n * The error message to display when the control is invalid. If left blank,\r\n * the default message will be used such as required message.\r\n */\r\n public errorMessage = input( \"\" );\r\n\r\n /**\r\n * Indicates to show the validation error messages (defaults to show).\r\n */\r\n public showValidationErrors = input( true );\r\n\r\n /**\r\n * Indicates whether the control is read-only (defaults to false).\r\n */\r\n public readonly = input( false );\r\n\r\n /**\r\n * The text to display in the input element as a placeholder.\r\n */\r\n public placeholder = input( \"\" );\r\n\r\n /**\r\n * The data list to attach to the input element.\r\n */\r\n public dataList = input( \"\" );\r\n\r\n public get internalClass(): string {\r\n return [\r\n \"form-control\",\r\n this.inputClass\r\n ].filter( Boolean ).join( \" \" );\r\n }\r\n}\r\n","import { Component, input, output } from \"@angular/core\";\r\n\r\n@Component( {\r\n selector: \"tbx-form-actions\",\r\n standalone: true,\r\n template: `\r\n \r\n\r\n \r\n\r\n @if(showCancel()) {\r\n \r\n }\r\n `\r\n} )\r\nexport class TbxFormActionsComponent {\r\n /** The type of button Save is (defaults to 'submit'). */\r\n public saveButtonType = input( \"submit\" );\r\n\r\n /** The text to display in the save button. */\r\n public saveText = input( \"Save\" );\r\n\r\n /** Indicates to show or hide the Cancel button. */\r\n public showCancel = input( true );\r\n\r\n /** Indicates to disable the controls. */\r\n public disabled = input( false );\r\n\r\n public saveClick = output();\r\n\r\n public cancelClick = output();\r\n}\r\n","import { Component, input } from \"@angular/core\";\r\nimport { NG_VALUE_ACCESSOR } from \"@angular/forms\";\r\n\r\nimport { TbxAccessorBaseDirective } from \"../accessor-base.directive\";\r\n\r\n@Component( {\r\n selector: \"tbx-label\",\r\n providers: [\r\n {\r\n provide: NG_VALUE_ACCESSOR,\r\n useExisting: TbxLabelComponent,\r\n multi: true\r\n }\r\n ],\r\n standalone: false,\r\n template: `\r\n @if(label()) {\r\n \r\n }\r\n `\r\n} )\r\nexport class TbxLabelComponent extends TbxAccessorBaseDirective {\r\n /**\r\n * The input ID (usually the form control name. This input is used\r\n * for the {@link formControlName}, the ID of the HTML element and the \"for\"\r\n * attribute of the label.\r\n */\r\n public inputId = input.required();\r\n\r\n /**\r\n * The label caption to display on the control. If left blank, the label\r\n * will not be displayed.\r\n */\r\n public label = input( \"\" );\r\n\r\n /**\r\n * Any additional classes to add to the Input element (defaults to form-control).\r\n */\r\n public inputClass = input( \"\" );\r\n\r\n public get internalClass(): string {\r\n return [\r\n \"form-label\",\r\n this.inputClass\r\n ].filter( Boolean ).join( \" \" );\r\n }\r\n}\r\n","import { Component, input } from \"@angular/core\";\r\nimport { NG_VALUE_ACCESSOR } from \"@angular/forms\";\r\n\r\nimport { TbxInputBaseDirective } from \"../input-base.directive\";\r\n\r\n@Component( {\r\n selector: \"tbx-input\",\r\n providers: [\r\n {\r\n provide: NG_VALUE_ACCESSOR,\r\n useExisting: TbxInputComponent,\r\n multi: true\r\n }\r\n ],\r\n standalone: false,\r\n template: `\r\n @if(formControl) {\r\n
\r\n }\r\n `\r\n} )\r\nexport class TbxInputComponent extends TbxInputBaseDirective {\r\n /**\r\n * The type of input HTML element to set such as text, phone, password,\r\n * date, time, image, color, etc. (defaults to 'text').\r\n */\r\n public type = input( \"text\" );\r\n}\r\n","import { Component } from \"@angular/core\";\r\nimport { NG_VALUE_ACCESSOR, ReactiveFormsModule } from \"@angular/forms\";\r\n\r\nimport { TbxInputBaseDirective } from \"../input-base.directive\";\r\n\r\n@Component( {\r\n selector: \"tbx-select\",\r\n providers: [\r\n {\r\n provide: NG_VALUE_ACCESSOR,\r\n useExisting: TbxSelectComponent,\r\n multi: true\r\n }\r\n ],\r\n standalone: false,\r\n template: `\r\n