keevo-components 2.0.105 → 2.0.107

package/src/lib/components/kv-layout/layout/kv-layout.component.ts

@@ -0,0 +1,502 @@
+import { ActivatedRoute, Router } from '@angular/router';
+
+import {
+  ChangeDetectorRef,
+  Component,
+  computed,
+  contentChildren,
+  effect,
+  EventEmitter,
+  HostListener,
+  input,
+  Input,
+  model,
+  OnChanges,
+  OnInit,
+  Output,
+  signal,
+  SimpleChanges,
+  TemplateRef,
+  ViewChild,
+  WritableSignal,
+} from '@angular/core';
+
+import { OverlayPanel } from 'primeng/overlaypanel';
+import { Sidebar } from 'primeng/sidebar';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import {
+  animate,
+  state,
+  style,
+  transition,
+  trigger,
+} from '@angular/animations';
+import { TopActionsModel } from '../top-icons/top-icons.component';
+import { link } from 'd3';
+import { MenuItem } from 'primeng/api';
+
+export interface LayoutMenuItem {
+  idmenu: number;
+  idmenupai: number | null;
+  idaplicativo: number;
+  descricaomenu: string;
+  link: string | null;
+  icone: string | null;
+  indpublicado: boolean;
+  indmenupai: boolean;
+  listaidvisaomenu: number[];
+  bgColor?: string;
+  textColor?: string;
+}
+
+@Component({
+  selector: 'kv-layout',
+  templateUrl: './kv-layout.component.html',
+  styleUrls: ['./kv-layout.component.scss'],
+})
+export class KvLayoutComponent implements OnInit, OnChanges {
+  @Input() apps: {
+    idaplicativo: number;
+    idsistema: number;
+    nomeaplicativo: string;
+    descricaoaplicativo: string;
+    rotapadrao: string;
+    indpublicado: boolean;
+    indpublicacaogradativa: boolean;
+    indexigeempresaentrada: boolean;
+    urlicone?: string;
+  }[] = [];
+
+  @Input() actions: { icon: string; label: string; action: () => void }[] = [];
+
+  @Input() useCard = true;
+
+  /**
+   * Indica quais menus são visíveis no topo.
+   * 
+   * @type {Array<{id: number, numNotifications?: number, action?: (e: any) => void}>}
+   * 
+   * Opções disponíveis:
+   * - 2 - Kiara 
+   * - 3 - Notificações
+   * - 4 - Tarefas
+   * - 5 - Comunicador
+   * 
+   * @property {number} id - identificador do menu.
+   * @property {number} [numNotifications] - Número de notificações (opcional).
+   * @property {(e: any) => void} [action] - Ação do clique, que retorna o evento do clique (optional).
+   * 
+   */
+  topMenusVisible = input<{ id: number, numNotifications?: number, boolNotifications?: boolean, action?: (e: any) => void }[]>([]);
+
+  topMenuOptions: TopActionsModel[] = [
+    { id: 1, visible: true, icon: 'person', tooltip: 'Meus Dados', numNotifications: 0, action: (e: any) => { this.meusDadosPanel.toggle(e) } },
+    { id: 2, visible: false, icon: 'kiara', tooltip: 'Kiara', numNotifications: 0, action: () => { } },
+    { id: 3, visible: false, icon: 'notifications', tooltip: 'Notificações', numNotifications: 0, action: () => { } },
+    { id: 4, visible: false, icon: 'checklist', tooltip: 'Tarefas', numNotifications: 0, action: () => { } },
+    { id: 5, visible: false, icon: 'chat', tooltip: 'Comunicador', numNotifications: 0, action: () => { } },
+  ];
+
+  topMenuOptionsReversed = false;
+
+  processar_menus = effect(() => {
+    const menusVisiveis = this.topMenusVisible();
+
+    if (this.profileImage()) {
+      this.topMenuOptions[0].img = this.profileImage();
+    }
+
+    //inverter o topMenuOptions
+    if (!this.topMenuOptionsReversed) {
+      this.topMenuOptions.reverse();
+      this.topMenuOptionsReversed = true;
+    }
+
+    menusVisiveis.forEach((item: any) => {
+      let menu = this.topMenuOptions.find((x) => x.id === item.id);
+      if (menu) {
+        menu.visible = true;
+        if (item.action) {
+          menu.action = item.action;
+        }
+        if (item.numNotifications != undefined && item.numNotifications != null) {
+          menu.numNotifications = item.numNotifications;
+        }
+        if (item.boolNotifications != undefined && item.boolNotifications != null) {
+          menu.boolNotifications = item.boolNotifications;
+        }
+      }
+    });
+  });
+
+  profileImage = input<string>('');
+
+  @Input() breadCrumbItems: {
+    label: string;
+    routerLink: string;
+  }[] = [];
+
+  @Input() masters: {
+    idmaster: number;
+    cpfcnpj: string;
+    nome: string;
+    idmasternome: string;
+  }[] = [];
+
+  menus = model<LayoutMenuItem[]>([]);
+  menuVisivel = signal<number | undefined>(undefined);
+  showMenuSistemas = signal<boolean>(false);
+
+  expandMenu = model<boolean>(true);
+
+  @Input() logoMenuExpand!: any;
+  @Input() logoMenuHide!: any;
+
+  @Input() selectedApp!: number;
+  @Input() selectedEmpresa!: any;
+  @Input() selectedMaster!: number;
+
+  @Input() showButtonApps: boolean = true;
+  @Input() showButtonUser: boolean = true;
+  @Input() showExpandMenu: boolean = true;
+  @Input() showDropdownLicenca: boolean = true;
+  @Input() showMenu: boolean = true;
+  @Input() showTrocaEmpresa: boolean = false;
+  @Input() showBreadcrumb: boolean = true;
+  @Input() userName: string = 'Usuário';
+  @Input() userEmail: string = '';
+  @Input() masterName!: string;
+  @Input() empresaName!: string;
+  @Input() idsAplicativosMenuHide: number[] = [];
+  @Input() useSelectionApps = true;
+  @Input() showTrilhaConhecimento = false;
+  @Input() isDisableSelectionEmpresa = false;
+
+  @Output() accessKeePassEmit: EventEmitter<any> = new EventEmitter();
+  @Output() changeEmpresaEmit: EventEmitter<boolean> = new EventEmitter();
+  @Output() changeLicenseEmit: EventEmitter<number> = new EventEmitter();
+  @Output() expandMenuEmit: EventEmitter<boolean> = new EventEmitter();
+  @Output() logoutEmit: EventEmitter<any> = new EventEmitter();
+  @Output() selectAppEmit: EventEmitter<number> = new EventEmitter();
+  @Output() navigateToDefaultRouteEmit: EventEmitter<any> = new EventEmitter();
+
+  @Output() downloadDocEmit: EventEmitter<number> = new EventEmitter();
+  @Output() showVideoDocEmit: EventEmitter<number> = new EventEmitter();
+
+
+  @ViewChild('meusDadosPanel') meusDadosPanel!: OverlayPanel;
+
+  // topMenuActions = contentChildren<TemplateRef<any>>('topMenuAction');
+
+  formGroup!: FormGroup;
+  heightCard!: number;
+  mouseOverFilhoIndex: any;
+  mouseOverIndex: any;
+  widthCard!: number;
+
+  widthPage = signal<number>(0);
+
+  trilhaConhecimento = [
+    {
+      title: 'Cadastre as suas empresas',
+      icon: 'business',
+      subtitle: 'Saiba como cadastrar informações essenciais das empresas.',
+      doc: 'https://work-assets.keevo.com.br/keevo-center/1+-+Cadastro+de+Empresas.pdf',
+      video: 'https://work-assets.keevo.com.br/keevo-center/1+-+Cadastro+de+Empresas+no+Keevo+Center.mp4'
+    },
+    {
+      title: 'Cadastro de Certificados e Procuração',
+      icon: 'verified_user',
+      subtitle:
+        'Veja como cadastrar um certificado e procuração necessários para as empresas.',
+      doc: 'https://work-assets.keevo.com.br/keevo-center/2+-+Cadastro+de+Certificados+e+Procura%C3%A7%C3%B5es.pdf',
+      video: 'https://work-assets.keevo.com.br/keevo-center/2+-+Cadastro+de+Certificados+e+Procura%C3%A7%C3%B5es.mp4',
+    },
+    {
+      title: 'Configuração da Gestão de Licença',
+      icon: 'fact_check',
+      subtitle: 'Aprenda a vincular as licenças para cada empresa aqui.',
+      doc: 'https://work-assets.keevo.com.br/keevo-center/3+-+Configura%C3%A7%C3%A3o+da+Gest%C3%A3o+de+Licen%C3%A7a.pdf',
+      video: 'https://work-assets.keevo.com.br/keevo-center/3+-+Configura%C3%A7%C3%A3o+de+Gest%C3%A3o+de+Licen%C3%A7as.mp4',
+    },
+    {
+      title: 'Cadastro de Usuário',
+      icon: 'person_add',
+      subtitle:
+        'Saiba como cadastrar usuários que terão acesso aos sistemas da Keevo.',
+      doc: 'https://work-assets.keevo.com.br/keevo-center/4+-+Cadastro+de+Usu%C3%A1rio.pdf',
+      video: 'https://work-assets.keevo.com.br/keevo-center/4+-+Cadastro+de+Usu%C3%A1rio.mp4',
+    },
+    {
+      title: 'Papéis e Permissões',
+      icon: 'manage_accounts',
+      subtitle:
+        'Descubra como configurar papéis e permissões dos seus usuários registrados.',
+      doc: 'https://work-assets.keevo.com.br/keevo-center/5+-+Pap%C3%A9is+e+Permiss%C3%B5es.pdf',
+      video: 'https://work-assets.keevo.com.br/keevo-center/5+-+Pap%C3%A9is+e+Permiss%C3%B5es.mp4',
+    },
+    {
+      title: 'Cadastro de Contadores',
+      icon: 'badge',
+      subtitle: 'Aprenda como cadastrar seus contadores.',
+      doc: 'https://work-assets.keevo.com.br/keevo-center/6+-+Cadastro+de+Contadores.pdf',
+      video: 'https://work-assets.keevo.com.br/keevo-center/6+-+Cadastro+de+Contadores.mp4',
+    },
+  ];
+
+  constructor(
+    private cdr: ChangeDetectorRef,
+    private fb: FormBuilder,
+    protected router: Router,
+    protected activatedRoute: ActivatedRoute
+  ) {
+  }
+
+  public ngOnInit(): void {
+    this.formGroup = this.fb.group({
+      idmaster: [this.selectedMaster, []],
+    });
+
+    // this.processarMenus();
+    this.adjustWidthCard();
+    this.verifyMenuBehavior();
+    this.expandMenuEvent();
+  }
+
+
+
+  // processarMenus() {
+  // }
+
+  public accessKeePass(event: any) {
+    this.accessKeePassEmit.emit(event);
+  }
+
+  public adjustHeightCard(): number {
+    if (this.widthCard > 400) {
+      if (this.widthPage() < 992 && this.showLicencas()) return 145;
+
+      if (this.breadCrumbItems.length > 0) return 95;
+      else return 85;
+    }
+
+    return 125;
+  }
+
+  private adjustWidthCard() {
+    this.widthPage.set(window.innerWidth);
+
+    this.heightCard = Number(
+      document.getElementById('page-content')?.offsetHeight
+    );
+    if (this.showMenu)
+      this.widthCard =
+        Number(window.innerWidth) - (this.expandMenu() ? 333 : 93);
+    else this.widthCard = Number(window.innerWidth);
+  }
+
+  public callRoute(rota: any, expand?: boolean) {
+    if (!expand && !this.expandMenu() && this.showExpandMenu)
+      this.expandMenu.update((currentValue: boolean) => !currentValue);
+
+    if (this.widthPage() != 0 && this.widthPage() < 800 && this.expandMenu() && this.showExpandMenu)
+      this.expandMenu.set(false);
+
+    this.router.navigateByUrl(rota);
+  }
+
+  public changeEmpresa(event: any) {
+    this.changeEmpresaEmit.emit(event);
+  }
+
+  public changeLicense(event: any) {
+    this.changeLicenseEmit.emit(event);
+  }
+
+  private verifyMenuBehavior() {
+    if (this.widthPage() < 800)
+      this.expandMenu.set(false);
+  }
+
+  private expandMenuEvent() {
+    this.expandMenuEmit.emit(this.expandMenu());
+  }
+
+  public logout(event: any) {
+    this.logoutEmit.emit(event);
+  }
+
+  private menusPerApp() {
+    if (this.router.url && this.menus() && this.menus().length > 0) {
+      if (this.router.url === '/') {
+        // this.navigateToFirstMenu();
+      } else {
+        const menuSelecionado = this.menus().find(
+          (menu: any) =>
+            menu.link && menu.link.includes(this.router.url.slice(1))
+        );
+        if (menuSelecionado) {
+          this.navigateToMenu(menuSelecionado);
+        }
+      }
+    }
+  }
+
+  public nameEmpresa(nomeLicenca: any): string {
+    if (nomeLicenca) {
+      if (nomeLicenca.length > 23) return nomeLicenca.substring(0, 23) + '...';
+      else return nomeLicenca;
+    } else return '';
+  }
+
+  private navigateToFirstMenu(): void {
+    const firstMenu = this.menus()[0];
+    if (firstMenu.indmenupai) {
+      const filhos = this.returnMenuChild(firstMenu.idmenu);
+      if (filhos) {
+        this.callRoute(filhos[0].link, true);
+      }
+    } else {
+      this.callRoute(firstMenu.link, true);
+    }
+  }
+
+  private navigateToMenu(menu: any): void {
+    if (menu.menupai) {
+      const filhos = this.returnMenuChild(menu.idmenu);
+      if (filhos) {
+        this.callRoute(filhos[0].link, true);
+      }
+    } else {
+      this.callRoute(menu.link, true);
+    }
+  }
+
+  menuSelecionado = signal<any>(null);
+
+  ngOnChanges(changes: SimpleChanges): void {
+    const latestRequest = changes['menus'];
+    if (latestRequest?.currentValue) {
+      this.menusPerApp();
+    }
+
+    this.selecionarMenu();
+  }
+
+  @HostListener('window:resize', ['$event'])
+  public onWindowResize() {
+    this.adjustWidthCard();
+    // this.verifyMenuBehavior();
+    this.cdr.detectChanges();
+  }
+
+  isSelectedMenuPai(menu: any) {
+    if (!this.expandMenu() && menu.indmenupai)
+      return menu.idmenu === this.menuSelecionado()?.idmenupai;
+
+    return false;
+  }
+
+  selecionarMenu() {
+    const url = new URL(this.router.url, window.origin);
+
+    const currentPath = url.pathname;
+    const purePath = currentPath.match(/^[^;]*/i);
+
+    const paths = purePath![0];
+
+    this.menus.set(
+      this.menus().map((menu) => {
+        if (menu.link) {
+          return {
+            ...menu,
+            bgColor: paths.includes(menu.link!) ? 'rgb(41, 185, 45)' : '',
+            textColor: paths.includes(menu.link!) ? 'text-white' : '',
+          };
+        }
+        return menu;
+      })
+    )
+
+    const menu = this.menus().find((menu: any) => {
+      return menu.link && paths.includes(menu.link!);
+    });
+
+    this.menuSelecionado.set(menu);
+  }
+
+  public returnMenuChild(idmenu: number) {
+    return this.menus().filter((x: any) => x.idmenupai == idmenu);
+  }
+
+
+  public selectApp(idaplicativo: number) {
+    this.selectAppEmit.emit(idaplicativo);
+  }
+
+  public showLicencas(): boolean {
+    return this.showDropdownLicenca && (this.masters || []).length > 1;
+  }
+
+  public toggleMenu() {
+    this.expandMenu.update((currentValue: boolean) => !currentValue);
+    this.expandMenuEvent();
+  }
+
+  navigateToDefaultRoute() {
+    if (this.widthPage() < 800 && this.expandMenu())
+      this.expandMenu.set(false);
+
+    this.navigateToDefaultRouteEmit.emit();
+  }
+
+  get exibirNomes() {
+    return !this.showLicencas() && (this.masterName || this.empresaName);
+  }
+
+  exibirMenuChild(event: any, index: number) {
+    this.menuVisivel.set(index);
+    let menuParent;
+    let menuChild;
+    if (index === -1) {
+      menuParent = document.getElementById(`menu-sistemas-parent`);
+      menuChild = document.getElementById(`menu-sistemas-child`);
+    }
+    else {
+      menuParent = document.getElementById(`menu-parent-${index}`);
+      menuChild = document.getElementById(`menu-child-${index}`);
+    }
+
+    if (menuParent) {
+      const rect_parent = menuParent.getBoundingClientRect();
+      let x = rect_parent.right - 20;
+      let y = rect_parent.top - 15;
+
+      if (menuChild) {
+        const rect_child = menuChild.getBoundingClientRect();
+        const viewportHeight = window.innerHeight;
+
+        //Verifica se o menu filho vai utrapassar o final do viewport pra baixo
+        if (rect_parent.bottom + rect_child.height > viewportHeight) {
+          y = rect_parent.bottom - rect_child.height - 10;
+        }
+
+        // Verifica se o menu pai está muito em cima
+        if (rect_parent.top <= 0) {
+          y = rect_parent.bottom + 5;
+        }
+
+        menuChild.style.top = `${y}px`;
+        menuChild.style.left = `${x}px`;
+      }
+    }
+  }
+
+  downloadDoc(trilha: any) {
+    this.downloadDocEmit.emit(trilha);
+  }
+
+  showVideoDoc(trilha: any) {
+    this.showVideoDocEmit.emit(trilha);
+  }
+}

package/src/lib/components/kv-layout/top-icons/top-icons.component.html

@@ -0,0 +1,26 @@
+<div class="top-icons-container">
+    @for (item of topActions(); track $index) {
+        @if(item.visible){
+            <div class="icon-container clickable" (click)="item.action($event)">
+                @if(item.numNotifications && item.numNotifications>=0 && !item.boolNotifications){
+                    <span class="badge">{{item.numNotifications > 999 ? (item.numNotifications / 1000).toFixed(1) + 'K' : item.numNotifications}}</span>
+                }
+                @if(item.boolNotifications) {
+                    <span class="badge-chat"></span>
+                }
+                @if(item.icon == 'kiara'){
+                    <svg class="" id="Camada_1" data-name="Camada 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" style="width: 1.6rem; height: 1.6rem;" stroke="#212121" stroke-width="1.5">
+                        <path d="M84.17,47.93a24.61,24.61,0,0,1-1,8.4,17.78,17.78,0,0,1-6.39,8.44c-4,2.85-8.42,3.3-13.16,3.3H43a4.5,4.5,0,0,0-2.6.5c-2.75,1.64-5.4,3.5-8,5.32V69.5A1.88,1.88,0,0,0,31,67.72,18,18,0,0,1,16.8,50.39a22.51,22.51,0,0,1,1.39-9.34,17.9,17.9,0,0,1,7.25-8.3c4.15-2.48,8.5-2.51,13.11-2.51H66.49a1.85,1.85,0,0,0,0-3.69H37.93c-5.47,0-10.68.45-15.38,3.67a21.75,21.75,0,0,0-7.84,9.64,26,26,0,0,0-1.6,10.49A21.72,21.72,0,0,0,28.66,70.93v6.45A1.86,1.86,0,0,0,31.44,79l10.39-6.92.38-.23c.28,0,.62-.06.79-.06H64.19c5.34,0,10.39-.83,14.82-4.09a21.79,21.79,0,0,0,7.34-9.44c1.35-3.34,1.51-6.75,1.51-10.3A1.85,1.85,0,0,0,84.17,47.93Z" />
+                        <path d="M60.41,60,51,47.92l8.92-8.41a1.37,1.37,0,0,0,.44-1,1.52,1.52,0,0,0-.4-1,1.22,1.22,0,0,0-1-.47,1.52,1.52,0,0,0-1.12.54l-13.58,13v-12a1.51,1.51,0,0,0-.39-1,1.42,1.42,0,0,0-1.09-.44,1.53,1.53,0,0,0-1.12.44,1.46,1.46,0,0,0-.43,1V60.92a1.46,1.46,0,0,0,.42,1,1.43,1.43,0,0,0,1.1.43,1.44,1.44,0,0,0,1.51-1.48V54.26l4.42-4.16,9.34,11.83a1.24,1.24,0,0,0,1,.55,1.89,1.89,0,0,0,1.12-.4A1.32,1.32,0,0,0,60.77,61,1.61,1.61,0,0,0,60.41,60Z" />
+                        <path d="M78.84,45.51h-.51a5.44,5.44,0,0,0-5.44-5.44v-.51a5.44,5.44,0,0,0,5.44-5.45h.51a5.45,5.45,0,0,0,5.45,5.45v.51A5.45,5.45,0,0,0,78.84,45.51Z" />
+                        <path d="M71.44,36.35h-.2a2.13,2.13,0,0,0-2.13-2.14V34a2.13,2.13,0,0,0,2.13-2.13h.2A2.13,2.13,0,0,0,73.57,34v.2A2.14,2.14,0,0,0,71.44,36.35Z" />
+                        <path d="M83.29,31.83h-.2A2.13,2.13,0,0,0,81,29.7v-.2a2.13,2.13,0,0,0,2.13-2.13h.2a2.14,2.14,0,0,0,2.13,2.13v.2A2.13,2.13,0,0,0,83.29,31.83Z" />
+                    </svg>
+                }
+                @else {
+                    <span class="material-symbols-outlined">{{item.icon}}</span>
+                }
+            </div>
+        }
+    }
+</div>

package/src/lib/components/kv-layout/top-icons/top-icons.component.scss

@@ -0,0 +1,71 @@
+.top-icons-container{
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    align-items: center;
+    gap: .8rem;
+    color: rgb(var(--kv-color-text), .7);
+    
+}
+
+svg {
+    stroke-width: 1.2;
+}
+
+.clickable{
+    cursor: pointer;
+
+    span, svg {
+        transition: all 0.3s ease;
+    }
+    transition: all 0.2s ease;
+    &:hover {
+        // background-color: rgba(10, 58, 120, 0.25);
+        scale: 1.1;
+        span{
+            font-weight: 600;
+        }
+        svg {
+            stroke-width: 4;
+        }
+    }
+}
+
+.material-symbols-outlined{
+    font-size: 1.4rem;
+}
+
+.icon-container{
+    position: relative;
+}
+
+.badge{
+    font-size: .6rem;
+    padding: .1rem;
+    height: .8rem;
+    min-width: .8rem;
+    border-radius: .4rem;
+    background-color: red;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    top: -0.2rem;
+    left: .757rem;
+}
+
+.badge-chat{
+    padding: .1rem;
+    height: .7rem;
+    min-width: .7rem;
+    border-radius: .4rem;
+    background-color: red;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    top: -0.2rem;
+    left: .757rem;
+}

package/src/lib/components/kv-layout/top-icons/top-icons.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TopIconsComponent } from './top-icons.component';
+
+describe('TopIconsComponent', () => {
+  let component: TopIconsComponent;
+  let fixture: ComponentFixture<TopIconsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TopIconsComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(TopIconsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/kv-layout/top-icons/top-icons.component.ts

@@ -0,0 +1,26 @@
+import { Component, input } from '@angular/core';
+import { TooltipModule } from 'primeng/tooltip';
+
+export interface TopActionsModel {
+  id: number;
+  visible: boolean;
+  icon?: string;
+  tooltip?: string;
+  numNotifications?: number;
+  boolNotifications?: boolean;
+  img?: string;
+  action: (e:any) => void;
+}
+
+@Component({
+  selector: 'kv-top-icons',
+  standalone: true,
+  imports: [TooltipModule],
+  templateUrl: './top-icons.component.html',
+  styleUrl: './top-icons.component.scss'
+})
+export class TopIconsComponent {
+
+  topActions = input<TopActionsModel[]>([]);
+
+}

package/src/lib/components/kv-loader/kv-loader.component.html

@@ -0,0 +1 @@
+<ngx-loading [show]="loading() > 0"></ngx-loading>

package/src/lib/components/kv-loader/kv-loader.component.ts

@@ -0,0 +1,11 @@
+import { Component, type Signal } from '@angular/core';
+
+import { KvLoaderService } from './kv-loader.service';
+
+@Component({
+  selector: 'kv-loader',
+  templateUrl: './kv-loader.component.html'
+})
+export class KvLoaderComponent {
+  public loading: Signal<number> = KvLoaderService.loading;
+}

package/src/lib/components/kv-loader/kv-loader.module.ts

@@ -0,0 +1,17 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { NgxLoadingModule } from 'ngx-loading';
+
+import { KvLoaderComponent } from './kv-loader.component';
+
+@NgModule({
+  declarations: [KvLoaderComponent],
+  exports: [KvLoaderComponent],
+  imports: [
+    CommonModule,
+    NgxLoadingModule.forRoot({
+      fullScreenBackdrop: true
+    })
+  ]
+})
+export class KvLoaderModule { }