JK Frontend Library

Librería de componentes de Angular de JK Software S.A

La librería usa las siguientes tecnologías

• Angular 18
• Node 22
• Tailwindcss

Instalar

 npm i jk-frontend-library

La librería usa clases de Tailwindcss por o que deberás integrarla a tu proyecto de Angular a través de la CDN dentro del head del index.html

  <script src="https://cdn.tailwindcss.com"><script>

Componentes

Navbar

<JK-library-navbar [links]="mis_links">
 <div logo>
  <img  src="https://www.jk.com.py/assets/images/JK.png"            
  alt="jk
  logo" width="50">
 </div>
</JK-library-navbar>

  El parámetro [links] recibe un array de objetos:

mis_links:Links[] = [
 { 
  name:  'Home',
  router: ['/']
 },

 {
  name:  'Servicios',
  router: ['/servicios']
 }
]

Haciendo uso del atributo logo puedes colocar una imagen o un texto

Login

Para el correcto funcionamiento de este componente deberás tener el main.ts de tu proyecto de está manera:

  bootstrapApplication(AppComponent, {
  providers: [
    importProvidersFrom(HttpClientModule),
    provideRouter([])
  ]
})
  .catch((err) => console.error(err));

Cómo hacer uso de ella

  <JK-library-login (loginSuccess)="onLoginSuccess($event)" (loginError)="onLoginError($event)">
    <h1 class="text-4xl my-10 font-extrabold text-center" logo-login>
      JK <span class="font-normal">Software</span>
    </h1>
  </JK-library-login>

Se pasa a loginSucces y a loginError métodos tal que así

onLoginSuccess(response:  any) {
  console.log('Login response:', response);
  console.log(response.token);
}

onLoginError(error:  any) {
  console.error('Login error:', error);
}

Definir la ruta del login

constructor(authService:  AuthService){
 authService.setApiLoginUrl('https://miapi.com/api/login')
}

Haciendo uso del atributo logo-login puedes colocar una imagen o un texto