@sixbell-telco/sdk/fesm2022/sixbell-telco-sdk-components-forms-form-error.mjs

A collection of reusable components designed for use in Sixbell Telco Angular projects

import * as i0 from '@angular/core';
import { input, computed, Component } from '@angular/core';
import { TranslatePipe } from '@ngx-translate/core';
import { TypographyDirective } from '@sixbell-telco/sdk/directives/typography';

class FormErrorsComponent {
    // Main properties
    parentForm = input.required();
    formField = input.required();
    formControl = computed(() => this.parentForm().get(this.formField()));
    customError = computed(() => {
        const errors = this.formControl()?.errors;
        const keys = Object.keys(errors || {});
        if (keys.length > 0) {
            return this.formControl().getError(keys[0]);
        }
        return null;
    });
    // Custom messages
    isRequired = input(undefined);
    isMinLength = input(undefined);
    isMaxLength = input(undefined);
    isMin = input(undefined);
    isMax = input(undefined);
    isPattern = input(undefined);
    isEmail = input(undefined);
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: FormErrorsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.0", type: FormErrorsComponent, isStandalone: true, selector: "st-form-errors", inputs: { parentForm: { classPropertyName: "parentForm", publicName: "parentForm", isSignal: true, isRequired: true, transformFunction: null }, formField: { classPropertyName: "formField", publicName: "formField", isSignal: true, isRequired: true, transformFunction: null }, isRequired: { classPropertyName: "isRequired", publicName: "isRequired", isSignal: true, isRequired: false, transformFunction: null }, isMinLength: { classPropertyName: "isMinLength", publicName: "isMinLength", isSignal: true, isRequired: false, transformFunction: null }, isMaxLength: { classPropertyName: "isMaxLength", publicName: "isMaxLength", isSignal: true, isRequired: false, transformFunction: null }, isMin: { classPropertyName: "isMin", publicName: "isMin", isSignal: true, isRequired: false, transformFunction: null }, isMax: { classPropertyName: "isMax", publicName: "isMax", isSignal: true, isRequired: false, transformFunction: null }, isPattern: { classPropertyName: "isPattern", publicName: "isPattern", isSignal: true, isRequired: false, transformFunction: null }, isEmail: { classPropertyName: "isEmail", publicName: "isEmail", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n\t[class]=\"\n\t\t!(formControl().errors && (formControl().dirty || formControl().touched))\n\t\t\t? 'text-error ease-ease-out-back invisible flex items-center justify-start px-1 opacity-0 transition-opacity duration-300 select-none'\n\t\t\t: 'text-error ease-ease-out-back visible flex items-center justify-start px-1 opacity-100 transition-opacity duration-300 select-none'\n\t\"\n>\n\t<span typography [tyVariant]=\"'body-xs'\" [tyColor]=\"'inherit'\" [tyFontWeight]=\"'normal'\">\n\t\t@if (formControl().errors && (formControl().dirty || formControl().touched)) {\n\t\t\t@if (formControl().getError('required')) {\n\t\t\t\t{{ isRequired() ?? 'sdk.formErrors.validation.required' | translate }}\n\t\t\t} @else if (formControl().getError('minlength')) {\n\t\t\t\t{{ isMinLength() ?? 'sdk.formErrors.validation.minLength' | translate: { min: formControl().getError('minlength').requiredLength } }}\n\t\t\t} @else if (formControl().getError('maxlength')) {\n\t\t\t\t{{ isMaxLength() ?? 'sdk.formErrors.validation.maxLength' | translate: { max: formControl().getError('maxlength').requiredLength } }}\n\t\t\t} @else if (formControl().getError('min')) {\n\t\t\t\t{{ isMin() ?? 'sdk.formErrors.validation.min' | translate: { min: formControl().getError('min').min } }}\n\t\t\t} @else if (formControl().getError('max')) {\n\t\t\t\t{{ isMax() ?? 'sdk.formErrors.validation.max' | translate: { max: formControl().getError('max').max } }}\n\t\t\t} @else if (formControl().getError('pattern')) {\n\t\t\t\t{{ isPattern() ?? 'sdk.formErrors.validation.pattern' | translate }}\n\t\t\t} @else if (formControl().getError('email')) {\n\t\t\t\t{{ isEmail() ?? 'sdk.formErrors.validation.email' | translate }}\n\t\t\t} @else if (customError()) {\n\t\t\t\t{{ customError() | translate }}\n\t\t\t}\n\t\t} @else {\n\t\t\t{{ 'sdk.formErrors.validation.unhandledError' | translate }}\n\t\t}\n\t</span>\n</div>\n", dependencies: [{ kind: "directive", type: TypographyDirective, selector: "[typography]", inputs: ["tyVariant", "tyColor", "tyFontWeight", "tyTextOverflow"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: FormErrorsComponent, decorators: [{
            type: Component,
            args: [{ selector: 'st-form-errors', imports: [TypographyDirective, TranslatePipe], template: "<div\n\t[class]=\"\n\t\t!(formControl().errors && (formControl().dirty || formControl().touched))\n\t\t\t? 'text-error ease-ease-out-back invisible flex items-center justify-start px-1 opacity-0 transition-opacity duration-300 select-none'\n\t\t\t: 'text-error ease-ease-out-back visible flex items-center justify-start px-1 opacity-100 transition-opacity duration-300 select-none'\n\t\"\n>\n\t<span typography [tyVariant]=\"'body-xs'\" [tyColor]=\"'inherit'\" [tyFontWeight]=\"'normal'\">\n\t\t@if (formControl().errors && (formControl().dirty || formControl().touched)) {\n\t\t\t@if (formControl().getError('required')) {\n\t\t\t\t{{ isRequired() ?? 'sdk.formErrors.validation.required' | translate }}\n\t\t\t} @else if (formControl().getError('minlength')) {\n\t\t\t\t{{ isMinLength() ?? 'sdk.formErrors.validation.minLength' | translate: { min: formControl().getError('minlength').requiredLength } }}\n\t\t\t} @else if (formControl().getError('maxlength')) {\n\t\t\t\t{{ isMaxLength() ?? 'sdk.formErrors.validation.maxLength' | translate: { max: formControl().getError('maxlength').requiredLength } }}\n\t\t\t} @else if (formControl().getError('min')) {\n\t\t\t\t{{ isMin() ?? 'sdk.formErrors.validation.min' | translate: { min: formControl().getError('min').min } }}\n\t\t\t} @else if (formControl().getError('max')) {\n\t\t\t\t{{ isMax() ?? 'sdk.formErrors.validation.max' | translate: { max: formControl().getError('max').max } }}\n\t\t\t} @else if (formControl().getError('pattern')) {\n\t\t\t\t{{ isPattern() ?? 'sdk.formErrors.validation.pattern' | translate }}\n\t\t\t} @else if (formControl().getError('email')) {\n\t\t\t\t{{ isEmail() ?? 'sdk.formErrors.validation.email' | translate }}\n\t\t\t} @else if (customError()) {\n\t\t\t\t{{ customError() | translate }}\n\t\t\t}\n\t\t} @else {\n\t\t\t{{ 'sdk.formErrors.validation.unhandledError' | translate }}\n\t\t}\n\t</span>\n</div>\n" }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { FormErrorsComponent };
//# sourceMappingURL=sixbell-telco-sdk-components-forms-form-error.mjs.map