@cerca/design-system 1.0.2 → 1.0.3

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.
@@ -2043,7 +2043,7 @@ class AdLoginComponent {
2043
2043
  return (control && control.invalid && (control.dirty || control.touched)) || false;
2044
2044
  }
2045
2045
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: AdLoginComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2046
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: AdLoginComponent, isStandalone: true, selector: "ad-login", inputs: { resource: { classPropertyName: "resource", publicName: "resource", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { loginSubmit: "loginSubmit", forgotPasswordClick: "forgotPasswordClick" }, ngImport: i0, template: "<div class=\"w-full max-w-md space-y-8 bg-white p-8 rounded-xl shadow-lg border border-slate-100\">\r\n <div class=\"text-center\">\r\n @if (logo()) {\r\n <img [src]=\"logo()\" alt=\"Logo\" class=\"mx-auto h-12 w-auto\" />\r\n } @else if (icon()) {\r\n <div class=\"mx-auto h-12 w-12 flex items-center justify-center rounded-full bg-sky-100 text-sky-600\">\r\n <!-- Fallback icon or remove nz-icon -->\r\n <span class=\"text-2xl font-bold\">C</span>\r\n </div>\r\n }\r\n <h2 class=\"mt-6 text-3xl font-extrabold text-cerca-navy\">\r\n {{ title() }}\r\n @if (titleAccent()) {\r\n <span class=\"accent-text\">{{ titleAccent() }}</span>\r\n }\r\n </h2>\r\n <p class=\"mt-2 text-sm text-slate-600 uppercase tracking-wide\">{{ subtitle() }}</p>\r\n </div>\r\n\r\n @if (errorMessage()) {\r\n <div class=\"bg-red-50 border-l-4 border-red-500 p-4 mb-4 rounded-md\">\r\n <div class=\"flex\">\r\n <div class=\"ml-3\">\r\n <p class=\"text-sm text-red-700\">{{ errorMessage() }}</p>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n\r\n <form [formGroup]=\"loginForm\" class=\"mt-8 space-y-6\" (ngSubmit)=\"submitForm()\">\r\n <div class=\"space-y-4\">\r\n <div class=\"form-group\">\r\n <ad-input formControlName=\"email\" placeholder=\"correo@ejemplo.com\" label=\"Correo Electr\u00F3nico\"\r\n type=\"email\" prefix=\"user\" [error]=\"fieldInvalid('email')\">\r\n </ad-input>\r\n @if (fieldInvalid('email')) {\r\n <p class=\"mt-1 text-sm text-red-600\">\r\n @if (loginForm.get('email')?.hasError('required')) { El campo es requerido }\r\n @else { Ingrese un correo v\u00E1lido }\r\n </p>\r\n }\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <ad-input formControlName=\"password\" placeholder=\"********\" label=\"Contrase\u00F1a\" type=\"password\"\r\n prefix=\"lock\" [error]=\"fieldInvalid('password')\">\r\n </ad-input>\r\n @if (fieldInvalid('password')) {\r\n <p class=\"mt-1 text-sm text-red-600\">\r\n La contrase\u00F1a es requerida\r\n </p>\r\n }\r\n </div>\r\n </div>\r\n\r\n <div class=\"flex items-center justify-between\">\r\n <div class=\"flex items-center\">\r\n <input id=\"remember-me\" formControlName=\"remember\" type=\"checkbox\"\r\n class=\"h-4 w-4 rounded border-slate-300 text-sky-600 focus:ring-sky-600\">\r\n <label for=\"remember-me\" class=\"ml-2 block text-sm text-slate-900\">Recordarme</label>\r\n </div>\r\n\r\n @if (recoverPasswordUrl()) {\r\n <a [href]=\"recoverPasswordUrl()\" class=\"text-sm font-medium text-sky-600 hover:text-sky-500\">\r\n {{ forgotPasswordLabel() }}\r\n </a>\r\n } @else {\r\n <a class=\"text-sm font-medium text-sky-600 hover:text-sky-500 cursor-pointer\"\r\n (click)=\"forgotPasswordClick.emit()\">\r\n {{ forgotPasswordLabel() }}\r\n </a>\r\n }\r\n </div>\r\n\r\n <div>\r\n <div>\r\n <ad-button [loading]=\"loading()\" variant=\"primary\" type=\"submit\" [block]=\"true\"\r\n class=\"w-full justify-center\" [disabled]=\"loginForm.invalid || loading()\">\r\n Iniciar Sesi\u00F3n\r\n </ad-button>\r\n </div>\r\n </div>\r\n </form>\r\n\r\n <div class=\"mt-6 text-center text-xs text-slate-400\">\r\n <p>\u00BFNecesitas ayuda? Contacta a <a [href]=\"'mailto:' + supportEmail()\"\r\n class=\"hover:text-sky-600 transition-colors\">{{ supportEmail() }}</a></p>\r\n </div>\r\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: AdInputComponent, selector: "ad-input", inputs: ["type", "placeholder", "label", "error", "rows", "disabled", "size", "prefix", "suffix"] }, { kind: "component", type: AdButtonComponent, selector: "ad-button", inputs: ["variant", "type", "disabled", "loading", "icon", "size", "block"] }] });
2046
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: AdLoginComponent, isStandalone: true, selector: "ad-login", inputs: { resource: { classPropertyName: "resource", publicName: "resource", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { loginSubmit: "loginSubmit", forgotPasswordClick: "forgotPasswordClick" }, ngImport: i0, template: "<div class=\"min-h-screen flex items-center justify-center bg-auth-gradient py-12 px-4 sm:px-6 lg:px-8\">\r\n <div class=\"w-full max-w-md space-y-8 bg-white p-8 rounded-xl shadow-lg border border-slate-100\">\r\n <div class=\"text-center\">\r\n @if (logo()) {\r\n <img [src]=\"logo()\" alt=\"Logo\" class=\"mx-auto h-12 w-auto\" />\r\n } @else if (icon()) {\r\n <div class=\"mx-auto h-12 w-12 flex items-center justify-center rounded-full bg-sky-100 text-sky-600\">\r\n <!-- Fallback icon or remove nz-icon -->\r\n <span class=\"text-2xl font-bold\">C</span>\r\n </div>\r\n }\r\n <h2 class=\"mt-6 text-3xl font-extrabold text-cerca-navy\">\r\n {{ title() }}\r\n @if (titleAccent()) {\r\n <span class=\"accent-text\">{{ titleAccent() }}</span>\r\n }\r\n </h2>\r\n <p class=\"mt-2 text-sm text-slate-600 uppercase tracking-wide\">{{ subtitle() }}</p>\r\n </div>\r\n\r\n @if (errorMessage()) {\r\n <div class=\"bg-red-50 border-l-4 border-red-500 p-4 mb-4 rounded-md\">\r\n <div class=\"flex\">\r\n <div class=\"ml-3\">\r\n <p class=\"text-sm text-red-700\">{{ errorMessage() }}</p>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n\r\n <form [formGroup]=\"loginForm\" class=\"mt-8 space-y-6\" (ngSubmit)=\"submitForm()\">\r\n <div class=\"space-y-4\">\r\n <div class=\"form-group\">\r\n <ad-input formControlName=\"email\" placeholder=\"correo@ejemplo.com\" label=\"Correo Electr\u00F3nico\"\r\n type=\"email\" prefix=\"user\" [error]=\"fieldInvalid('email')\">\r\n </ad-input>\r\n @if (fieldInvalid('email')) {\r\n <p class=\"mt-1 text-sm text-red-600\">\r\n @if (loginForm.get('email')?.hasError('required')) { El campo es requerido }\r\n @else { Ingrese un correo v\u00E1lido }\r\n </p>\r\n }\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <ad-input formControlName=\"password\" placeholder=\"********\" label=\"Contrase\u00F1a\" type=\"password\"\r\n prefix=\"lock\" [error]=\"fieldInvalid('password')\">\r\n </ad-input>\r\n @if (fieldInvalid('password')) {\r\n <p class=\"mt-1 text-sm text-red-600\">\r\n La contrase\u00F1a es requerida\r\n </p>\r\n }\r\n </div>\r\n </div>\r\n\r\n <div class=\"flex items-center justify-between\">\r\n <div class=\"flex items-center\">\r\n <input id=\"remember-me\" formControlName=\"remember\" type=\"checkbox\"\r\n class=\"h-4 w-4 rounded border-slate-300 text-sky-600 focus:ring-sky-600\">\r\n <label for=\"remember-me\" class=\"ml-2 block text-sm text-slate-900\">Recordarme</label>\r\n </div>\r\n\r\n @if (recoverPasswordUrl()) {\r\n <a [href]=\"recoverPasswordUrl()\" class=\"text-sm font-medium text-sky-600 hover:text-sky-500\">\r\n {{ forgotPasswordLabel() }}\r\n </a>\r\n } @else {\r\n <a class=\"text-sm font-medium text-sky-600 hover:text-sky-500 cursor-pointer\"\r\n (click)=\"forgotPasswordClick.emit()\">\r\n {{ forgotPasswordLabel() }}\r\n </a>\r\n }\r\n </div>\r\n\r\n <div>\r\n <div>\r\n <ad-button [loading]=\"loading()\" variant=\"primary\" type=\"submit\" [block]=\"true\"\r\n class=\"w-full justify-center\" [disabled]=\"loginForm.invalid || loading()\">\r\n Iniciar Sesi\u00F3n\r\n </ad-button>\r\n </div>\r\n </div>\r\n </form>\r\n\r\n <div class=\"mt-6 text-center text-xs text-slate-400\">\r\n <p>\u00BFNecesitas ayuda? Contacta a <a [href]=\"'mailto:' + supportEmail()\"\r\n class=\"hover:text-sky-600 transition-colors\">{{ supportEmail() }}</a></p>\r\n </div>\r\n </div>\r\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: AdInputComponent, selector: "ad-input", inputs: ["type", "placeholder", "label", "error", "rows", "disabled", "size", "prefix", "suffix"] }, { kind: "component", type: AdButtonComponent, selector: "ad-button", inputs: ["variant", "type", "disabled", "loading", "icon", "size", "block"] }] });
2047
2047
  }
2048
2048
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: AdLoginComponent, decorators: [{
2049
2049
  type: Component,
@@ -2052,7 +2052,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImpor
2052
2052
  ReactiveFormsModule,
2053
2053
  AdInputComponent,
2054
2054
  AdButtonComponent
2055
- ], template: "<div class=\"w-full max-w-md space-y-8 bg-white p-8 rounded-xl shadow-lg border border-slate-100\">\r\n <div class=\"text-center\">\r\n @if (logo()) {\r\n <img [src]=\"logo()\" alt=\"Logo\" class=\"mx-auto h-12 w-auto\" />\r\n } @else if (icon()) {\r\n <div class=\"mx-auto h-12 w-12 flex items-center justify-center rounded-full bg-sky-100 text-sky-600\">\r\n <!-- Fallback icon or remove nz-icon -->\r\n <span class=\"text-2xl font-bold\">C</span>\r\n </div>\r\n }\r\n <h2 class=\"mt-6 text-3xl font-extrabold text-cerca-navy\">\r\n {{ title() }}\r\n @if (titleAccent()) {\r\n <span class=\"accent-text\">{{ titleAccent() }}</span>\r\n }\r\n </h2>\r\n <p class=\"mt-2 text-sm text-slate-600 uppercase tracking-wide\">{{ subtitle() }}</p>\r\n </div>\r\n\r\n @if (errorMessage()) {\r\n <div class=\"bg-red-50 border-l-4 border-red-500 p-4 mb-4 rounded-md\">\r\n <div class=\"flex\">\r\n <div class=\"ml-3\">\r\n <p class=\"text-sm text-red-700\">{{ errorMessage() }}</p>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n\r\n <form [formGroup]=\"loginForm\" class=\"mt-8 space-y-6\" (ngSubmit)=\"submitForm()\">\r\n <div class=\"space-y-4\">\r\n <div class=\"form-group\">\r\n <ad-input formControlName=\"email\" placeholder=\"correo@ejemplo.com\" label=\"Correo Electr\u00F3nico\"\r\n type=\"email\" prefix=\"user\" [error]=\"fieldInvalid('email')\">\r\n </ad-input>\r\n @if (fieldInvalid('email')) {\r\n <p class=\"mt-1 text-sm text-red-600\">\r\n @if (loginForm.get('email')?.hasError('required')) { El campo es requerido }\r\n @else { Ingrese un correo v\u00E1lido }\r\n </p>\r\n }\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <ad-input formControlName=\"password\" placeholder=\"********\" label=\"Contrase\u00F1a\" type=\"password\"\r\n prefix=\"lock\" [error]=\"fieldInvalid('password')\">\r\n </ad-input>\r\n @if (fieldInvalid('password')) {\r\n <p class=\"mt-1 text-sm text-red-600\">\r\n La contrase\u00F1a es requerida\r\n </p>\r\n }\r\n </div>\r\n </div>\r\n\r\n <div class=\"flex items-center justify-between\">\r\n <div class=\"flex items-center\">\r\n <input id=\"remember-me\" formControlName=\"remember\" type=\"checkbox\"\r\n class=\"h-4 w-4 rounded border-slate-300 text-sky-600 focus:ring-sky-600\">\r\n <label for=\"remember-me\" class=\"ml-2 block text-sm text-slate-900\">Recordarme</label>\r\n </div>\r\n\r\n @if (recoverPasswordUrl()) {\r\n <a [href]=\"recoverPasswordUrl()\" class=\"text-sm font-medium text-sky-600 hover:text-sky-500\">\r\n {{ forgotPasswordLabel() }}\r\n </a>\r\n } @else {\r\n <a class=\"text-sm font-medium text-sky-600 hover:text-sky-500 cursor-pointer\"\r\n (click)=\"forgotPasswordClick.emit()\">\r\n {{ forgotPasswordLabel() }}\r\n </a>\r\n }\r\n </div>\r\n\r\n <div>\r\n <div>\r\n <ad-button [loading]=\"loading()\" variant=\"primary\" type=\"submit\" [block]=\"true\"\r\n class=\"w-full justify-center\" [disabled]=\"loginForm.invalid || loading()\">\r\n Iniciar Sesi\u00F3n\r\n </ad-button>\r\n </div>\r\n </div>\r\n </form>\r\n\r\n <div class=\"mt-6 text-center text-xs text-slate-400\">\r\n <p>\u00BFNecesitas ayuda? Contacta a <a [href]=\"'mailto:' + supportEmail()\"\r\n class=\"hover:text-sky-600 transition-colors\">{{ supportEmail() }}</a></p>\r\n </div>\r\n</div>" }]
2055
+ ], template: "<div class=\"min-h-screen flex items-center justify-center bg-auth-gradient py-12 px-4 sm:px-6 lg:px-8\">\r\n <div class=\"w-full max-w-md space-y-8 bg-white p-8 rounded-xl shadow-lg border border-slate-100\">\r\n <div class=\"text-center\">\r\n @if (logo()) {\r\n <img [src]=\"logo()\" alt=\"Logo\" class=\"mx-auto h-12 w-auto\" />\r\n } @else if (icon()) {\r\n <div class=\"mx-auto h-12 w-12 flex items-center justify-center rounded-full bg-sky-100 text-sky-600\">\r\n <!-- Fallback icon or remove nz-icon -->\r\n <span class=\"text-2xl font-bold\">C</span>\r\n </div>\r\n }\r\n <h2 class=\"mt-6 text-3xl font-extrabold text-cerca-navy\">\r\n {{ title() }}\r\n @if (titleAccent()) {\r\n <span class=\"accent-text\">{{ titleAccent() }}</span>\r\n }\r\n </h2>\r\n <p class=\"mt-2 text-sm text-slate-600 uppercase tracking-wide\">{{ subtitle() }}</p>\r\n </div>\r\n\r\n @if (errorMessage()) {\r\n <div class=\"bg-red-50 border-l-4 border-red-500 p-4 mb-4 rounded-md\">\r\n <div class=\"flex\">\r\n <div class=\"ml-3\">\r\n <p class=\"text-sm text-red-700\">{{ errorMessage() }}</p>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n\r\n <form [formGroup]=\"loginForm\" class=\"mt-8 space-y-6\" (ngSubmit)=\"submitForm()\">\r\n <div class=\"space-y-4\">\r\n <div class=\"form-group\">\r\n <ad-input formControlName=\"email\" placeholder=\"correo@ejemplo.com\" label=\"Correo Electr\u00F3nico\"\r\n type=\"email\" prefix=\"user\" [error]=\"fieldInvalid('email')\">\r\n </ad-input>\r\n @if (fieldInvalid('email')) {\r\n <p class=\"mt-1 text-sm text-red-600\">\r\n @if (loginForm.get('email')?.hasError('required')) { El campo es requerido }\r\n @else { Ingrese un correo v\u00E1lido }\r\n </p>\r\n }\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <ad-input formControlName=\"password\" placeholder=\"********\" label=\"Contrase\u00F1a\" type=\"password\"\r\n prefix=\"lock\" [error]=\"fieldInvalid('password')\">\r\n </ad-input>\r\n @if (fieldInvalid('password')) {\r\n <p class=\"mt-1 text-sm text-red-600\">\r\n La contrase\u00F1a es requerida\r\n </p>\r\n }\r\n </div>\r\n </div>\r\n\r\n <div class=\"flex items-center justify-between\">\r\n <div class=\"flex items-center\">\r\n <input id=\"remember-me\" formControlName=\"remember\" type=\"checkbox\"\r\n class=\"h-4 w-4 rounded border-slate-300 text-sky-600 focus:ring-sky-600\">\r\n <label for=\"remember-me\" class=\"ml-2 block text-sm text-slate-900\">Recordarme</label>\r\n </div>\r\n\r\n @if (recoverPasswordUrl()) {\r\n <a [href]=\"recoverPasswordUrl()\" class=\"text-sm font-medium text-sky-600 hover:text-sky-500\">\r\n {{ forgotPasswordLabel() }}\r\n </a>\r\n } @else {\r\n <a class=\"text-sm font-medium text-sky-600 hover:text-sky-500 cursor-pointer\"\r\n (click)=\"forgotPasswordClick.emit()\">\r\n {{ forgotPasswordLabel() }}\r\n </a>\r\n }\r\n </div>\r\n\r\n <div>\r\n <div>\r\n <ad-button [loading]=\"loading()\" variant=\"primary\" type=\"submit\" [block]=\"true\"\r\n class=\"w-full justify-center\" [disabled]=\"loginForm.invalid || loading()\">\r\n Iniciar Sesi\u00F3n\r\n </ad-button>\r\n </div>\r\n </div>\r\n </form>\r\n\r\n <div class=\"mt-6 text-center text-xs text-slate-400\">\r\n <p>\u00BFNecesitas ayuda? Contacta a <a [href]=\"'mailto:' + supportEmail()\"\r\n class=\"hover:text-sky-600 transition-colors\">{{ supportEmail() }}</a></p>\r\n </div>\r\n </div>\r\n</div>" }]
2056
2056
  }], propDecorators: { resource: [{ type: i0.Input, args: [{ isSignal: true, alias: "resource", required: true }] }], loginSubmit: [{ type: i0.Output, args: ["loginSubmit"] }], forgotPasswordClick: [{ type: i0.Output, args: ["forgotPasswordClick"] }] } });
2057
2057
 
2058
2058
  const LoginResourceSchema = z.object({