Refazendo o shadcn para Angular ao vivo | Criando o modal do ZardUI (parte 2)

Tudo bem com vocês? Samuel Rizon por aqui, também live. Demorei um pouquinho para começar a live, mas já estou por aqui. Quem tiver por aí vendo, dá um oi também. Eu vou só mandar o link da live aqui nos grupos para a gente começando. Quem tiver por aí já pode mandar um oi.

E a gente vai conversar e hoje a gente vai codar um pouco.

Hoje a gente vai continuar nosso modal, nosso dialogue, né? A gente vai continuar nosso dialogue.

A gente vai continuar nosso modal dos Arduino UI, que semana passada a gente já fez bastante, bastante coisa, e agora a gente vai fazer um pouco diferente, vai terminar, né, tudo que a gente está fazendo. Fechou. Esperando o pessoal chegar aqui. Deixa eu ir mandando nos grupos.

Bora, bora, meu povo, que hoje a gente termina esse dialogue lindamente. Olha quem tá aqui para dar oi, o Paçoca aqui, ó. Fala, dá oi para o pessoal da live. Fala aí, galera. Boa noite, Wallace! Você tá bom, meu amigo? Tudo certo?

Vai lá, vai. Pronto, passar.

Chegou aqui para dar um oi. O Wallace tá por aí, já lançou um boa noite. Boa noite, meu amigo!

Como é que foi seu dia aí?

Tranquilo? Tudo certo? Show.

Bom, sem mais delongas, deixa eu só preparar aqui para compartilhar a tela.

Bora de clone do ChatGPT, meu amigo! Bora clonar essa biblioteca para o Angular que tá precisando, cara.

Estamos precisando, estamos precisando.

Para a galera que tá chegando aí, muito boa noite! Deixa o seu like aí no vídeo. Eu ainda não tenho costume de fazer isso, cara. Para mim é muito difícil lembrar que eu tô numa live, tô no YouTube, precisa dar like. Então deixa seu like aí no vídeo, se inscreve no canal quem não é inscrito.

Vai, Paçoca!

Paçoca quer ficar grudado aqui em mim, meu cachorrinho.

Mas se inscreve no canal, deixa o seu like e bora codar, porque essa live é um live coding. Hoje eu vou tentar, cara, codar olhando para cá, para outra tela, para ver se fica melhor a visualização, tá bom? E eu tô tentando melhorar um pouco a qualidade da live também, que a galera na semana passada falou, né, que tá com 720p. No programa que eu uso, que é o Restream, a gente— eu não consigo melhorar isso sem pagar uma mensalidade de R$300. É bem caro só para a gente conseguir colocar em 720p. Então eu tô me programando A câmera deu uma falhada aqui.

Pronto, deixa eu ver se voltou. Estão me vendo aí? Acho que sim.

Mas eu tô me programando para transferir as lives para OBS, e aí vai mudar um pouco do visual de tudo que tá fazendo aqui, mas vai dar certo, tá? Então deixa eu mudar aqui rapidinho.

E já compartilhar a tela inteira aqui. Vamos ver aqui, ó. E aí eu coloco nessa visualização aqui. Deixa eu tentar melhorar um pouco para ficar fácil de vocês verem. Maximize. Deixa eu achar um jeito ideal aqui. Acho que assim tá bom, né? Tá, vou aumentar um pouquinho a minha posição aqui.

Tá de boa para vocês verem a tela?

Deixa eu ver se eu consigo aumentar um pouco aqui, deixar em 100%. Beleza. Vou deixar aqui em 100% na esquerda. Beleza. Eita, não, aqui, show! Beleza, acho que na live também tá de boa de ver.

Vocês vão dando feedback aí, tá? Se não tiver dando para ver direito as coisas, tá bom? Mas eu vou tentar codar para cá, eu vou estar olhando para aqui às vezes para mexer em algumas coisas. E bom, já entrando para dentro do código aqui, a gente tá com o mesmo, mesmo ponto que a gente parou na live passada. A única coisa que eu fiz Foi um commit, cara, que eu fiz. Eu comitei as nossas alterações.

Deixa eu mostrar esse aqui para vocês.

Então eu comitei as nossas alterações e aí eu tenho que mudar só aqui para branch de dialog.

É dialog, deixa eu ver o nome da branch. Modal, modal. Então aqui, ó, é de dialogue component, tá?

Então foi o único commit que eu fiz com todas as alterações que a gente tinha feito, tá? E a gente tá com tudo aqui ainda. E agora a gente tem que avançar com algumas outras coisas aqui, tá bom? A gente ainda falta algumas coisas para a gente melhorar. Deixa eu rodar o projeto aqui.

Npm run start e já deixar ele rodando.

Eu já vou abrir aqui o projeto.

Beleza, então aqui, ó, temos o nosso projeto aqui, o nosso dialog.

E uma coisa que eu vi, cara, o ChatGPT quebra nossas pernas, mano. Os caras atualizaram a biblioteca. Você acredita nisso? Então, live passada, por exemplo, o dialogue, o name tava aqui na esquerda, ó. Então eles estavam na mesma linha, tava na mesma linha, o name aqui na esquerda, username aqui na esquerda, e o campo de input estava na frente. Então tava dois campos na horizontal, não tava com o label em cima. Eu mudei isso aqui porque eu fiz um post no LinkedIn, mas a única, basicamente a única alteração que eu fiz foi aqui nesse carinha, no componente, um dialog component, para colocar essa label aqui para cima, tá?

Na verdade foi aqui na demo basic.

Então eu coloquei esse carinha aqui, ó, para eles ficarem na mesma linha, tá bom? Foi uma alteração simples. O código copiei lá do ChatCN mesmo. Esse mesmo código aqui, ó, como é tudo Tailwind. Então o grid-cap: 4 aqui é só o exemplo, tá bom, que a gente deu aqui, mas foi só uma coisa para a gente ficar com o dialog bem parecido. Então quando a gente pega o dialog aqui do ChatGPT, vamos comparar lá, cara, tá praticamente a mesma coisa. Então tá bem, bem igualzinho. O que a gente precisa fazer agora é dar algumas, finalizar alguns ajustes e algumas configurações no nosso dialogue para deixar ele 100%, tá? E é isso que a gente vai fazer hoje. E eu também pretendo criar um teste unitário desse dialogue juntos, fechou? Então, objetivo da live hoje é a gente dar um tapa nesse componente de dialogue Principalmente com todas essas configurações, né, do dialog options, a gente deixar isso aqui tudo, tudo feito dessas configurações para a gente conseguir utilizar isso aqui. Se alguma a gente não tiver utilizando, a gente remove, e se alguma a gente não tiver utilizando que precisa, a gente adiciona. E a gente dá uma revisada no componente, vê se tá tudo certo, faz alguns testes, cria alguns outros exemplos na documentação para deixar tudo ok, atualizar também a nossa documentação aqui, ó, na doc com API, para vocês verem como que é fácil da gente atualizar isso aqui, tá bom? Na nossa documentação, que no caso é esse carinha aqui, ó, vou mostrar para vocês. E se tudo der certo, a gente criar também os testes unitários, fechou?

Eu acho que a câmera ainda tá me pegando, cara. Eu não tenho certeza. Deixa eu fazer um teste aqui.

Na verdade, eu acho que eu não tô usando a câmera certa.

Um segundinho aqui.

Show!

Agora sim, agora sim, com a câmera certa.

Tava usando a webcam, mas estou por aqui.

Show!

Então vamos lá, galera, vamos continuar aqui nosso desenvolvimento do nosso componente.

Deixa eu abrir aqui.

E aí a gente vai dar uma analisada aqui no que que tá faltando, tá? Então eu já tenho o dialog aqui, dialog component, esse carinha aqui, dialog ref, e o dialog service. A gente tem todos esses caras, a gente tem que dar uma melhorada em algumas coisas aqui, tá? O botão, pessoal, o que que eu fiz com o botão? Eu deixei ele menor, com SM, o tamanho SM, tá bom? Então ele não tá 100% igual o do ChatCN, tá? Do ChatCN eles fizeram uma customização neste botão, e aqui no dialog, aqui no Chat Scene eles customizaram esse botão, cara.

Então ele fica um pouco diferente, tá vendo?

Então aqui eu usei um botão mesmo, o nosso botão do componente botão, tá?

Eu achei que fica até melhorzinho, então coloquei ele do tamanho menor do botão.

E tipo ghost com absolute right one top one para ele ficar com uma bordinha. Não sei se dá para perceber, mas quando a gente dá zoom aqui, ó, tá vendo? Ele fica com essa bordinha aqui. Para mim ficou perfeito, cara.

Para mim isso aqui tá ótimo.

Quando a gente clica nele, ele emite o cancel triggered. E aí dentro lá do nosso a demo, né, do Basic, a gente consegue pegar ele aqui.

Então, z onCancel instance cancelDialogCancelled. E aí, se a gente vier aqui e fechar, a gente chama ele.

Então, a gente tem tanto o evento do botão OK quanto o evento do botão cancelar, fechou. E quando a gente cancela esse evento, ele retorna para a gente, né, instância do nosso componente. Então aqui, ó, você pode ver, ó, useArtDemoBasicInputComponent, que é a instância desse NzContent aqui, ó. Isso aqui é maravilhoso, cara, porque a gente passa o tipo T aqui e vai passando tudo aqui, ó, data, content, ele já, TypeScript já faz e fala que isso aqui é da instância desse cara. E aí com isso a gente consegue pegar tudo que a gente tem dentro do nosso componente. Então pra gente fica bem, bem fácil trabalhar o nosso, no nosso código aqui, tá bom? Então a gente, a parte de fechar, para mim tá ok. O header, para mim, eu creio que tá ok também. Então isso aqui são classes que eu não acho que a gente tem que deixar como variante. A variante que ela tá só a classe base do dialog, isso aqui eu não vejo problema a gente deixar aqui, tá bom. Description, então se tiver description a gente coloca, se tiver o texto a gente coloca isso aqui. O texto, tá tudo certo. Então se tiver o texto, a gente coloca o texto. Se tiver description, a gente coloca description. A parte principal do componente, que a gente tem uma classe flex aqui.

Se tiver o título aqui, a gente coloca.

Se o título tiver no conteúdo, né, e se for uma string como conteúdo a gente coloca essa string aqui. Esse carinha, a gente só verifica se o z_content é do tipo string, porque senão ele vai vir aqui, ó, ele vai ser instanciado aqui, que é o que normalmente a gente tem que tá fazendo.

Agora, esse z_title_content aqui, eu não sei o que que é, cara.

Eu acho que a gente nem precisa disso. Acho que a gente não precisa disso, z-title content.

Isso aqui a gente pode arrancar, não acho que faz sentido nenhum.

Quando der esses erros aqui, a gente dá um reload.

Deixa eu ver, vocês estão por aí?

Tem 7 pessoas assistindo aí. Quem tiver por aí, dá um oi também, guys, para mim saber que vocês estão por aí. Dá uma boa noite para mim. Acho que a câmera tá travada, cara.

Ô meu Deus, será que volta?

Alô, alô, alô, alô, alô!

Aqui, deixa eu ver se minha câmera tá travou mesmo.

Vamos para outra aqui.

Tem problema não, fechou. Tem problema não. Valeu, Wallace.

Então aqui deu esse probleminha lá. Quando a gente dá um reload, ele já volta a funcionar. Mas beleza. Então se o componente for uma string, a gente coloca ele aqui. Senão ele vai ser instanciado aqui, tá?

Então a parte de main basicamente é isso.

Aí tudo que a gente colocar aqui nesse meio ele vai instanciar. E o footer, se o footer for diferente de null, porque se eu passar o footer null eu não quero mostrar o footer, cara, é uma forma que eu tenho de não querer mostrar. Mas se eu passar, eu vou colocar ele com essas classes aqui E eu tenho um text, o cancelText e o okText, que aí eu passo o valor deles. Se eu não passar nada, ele vai ser OK e vai ser cancel, certo? Se eu não passar nada, uma coisa que a gente tem é o nz-ok-destructive, que aqui no z-button eu sei que eu acho que eu tenho type destructive, então z_type, se a gente tiver config, config OK destructive, destructive default.

Deixa eu pegar os tipos aqui. Destructive, meu Deus, beleza.

Isso aqui é para qual caso?

Isso aqui é para o caso que eu queira colocar o OK aqui, ó, Z OK Destructive True.

É só no caso de eu deixar o meu modal com o botão de OK Eita, tô no chatzinho. Vermelho. Então eu quero dar um aviso ou mostrar alguma coisa diferente, eu vou mostrar esse OK aqui vermelho, tá? Beleza. Então isso aqui seria para um exemplo de VC Save Changes.

Excluir, tá?

Deseja excluir esse cadastro?

Aí, se a gente marca que sim, a gente vem com excluir aqui, tá bom? É bem, bem de boa de trabalhar nisso. Luciano mandou um boa noite. Deixa eu ver aqui, ó. Luciano mandou um buenas.

William mandou: minha câmera congelou, cara. Eu uso aqui uma Canon e aí ela fica conectada e eu não sei por que, cara, que às vezes ela dá, parece que ela não entende que ela tá conectada, tá sendo utilizada, e ela para. Aí ela para e desliga sozinha, tipo assim, pum, desligou.

Aí fica desse jeitinho aí que aconteceu, mas valeu por avisar, meu amigo.

A galera que tá por aí também quiser dar um boa noite, manda um boa noite.

E vamos lá, vamos continuar aqui, tá? Aqui, beleza.

Então, no caso da gente fazer um OK, eu acho que seria legal também a gente ter um exemplo da gente ter esse destructive aqui. Para caso que a gente queira excluir alguma coisa e tem que fazer uma validação. Por quê? Porque quando a gente dá um OK, que, ó, z OK disable, a gente tem que fazer isso aqui também, ó, disable true. Esse aqui é outro que eu uso muito no ng-sort, cara, mas pensa no negócio que eu uso. Não tá desabilitado.

Então o que que a gente tem que fazer? A gente tem que vir aqui no nosso dialog component deixa eu diminuir isso aqui ainda. E aqui eu tenho um disable, se o config.z OK, disable. Perfeito.

Então agora ele tá desabilitado. Eu uso isso aqui muito no ng-sort, cara, porque quando eu tô com formulário eu faço uma validação se o formulário tá válido, e eu começo com ele desabilitado. Então, quando o meu formulário ficar válido, eu habilito o meu botão. Enquanto ele tiver inválido, eu não habilito o botão. Isso a gente consegue automatizar aqui, fazer uma, um bem bolado dentro do componente, que fica bem, bem fácil de trabalhar. Tá, então isso aqui é uma outra coisa que a gente mexe bastante. Deixa eu abrir o options aqui, ó.

É, eu coloquei também um ícone tanto do OK quanto do cancel.

Então para isso eu tenho que verificar aqui, ó, if config z OK icon.

Beleza, deixa eu ver aqui no botão de demo como que a gente tá com os ícones. Eu acho que a gente não colocou nenhum, nenhuma demo para o ícone, cara.

Sei, com certeza foi o Luiz, porque eu lembro que eu tinha colocado exemplo de ícone com botão, mas Luiz mexeu na documentação inteira, ficou ruim não, ficou bom, e faltou um botãozinho aqui com ícone.

Mas isso não é um problema para a gente. Vamos abrir o dialog aqui, z-icon, e a mesma coisa para o cancel. Que eu amo o Copilot, cara, ele trabalha muito bem. E aí aqui eu vou pegar o meu basic e passar Z, OK, icon trash. Será? Não, porque o ícone, a gente está usando um outro tipo de ícone, cara. Onde que eu tenho exemplo de ícone aqui? Checkbox, card. Acho que aqui eu tenho, no Base, que eu tenho um exemplo de ícone.

Aqui, ó.

Icon traço alguma coisa. Assim que que é o ícone aqui. Então aqui a gente vai dar um class icon-trash. Vamos ver. Beleza, perfeito. Então a gente tem Esse carinha aqui, uma coisa que eu quero ver é se esse MR2 está fazendo alguma diferença, tá? Mas eu acho que a gente não precisa. Perfeito.

Beleza.

Outra coisa que, outra forma que a gente pode fazer isso aqui, cara, é assim, ó. Eu preferiria fazer cancel icon. No Angular 20 a gente vai ter algo um pouco diferente, né, cara, que a gente consegue fazer um template aqui, vai ficar bem, bem legal. Então aqui, e o zcancel, cancel icon, close. Vamos ver se vai funcionar. Nope. Ele não tá mostrando o ícone. Icon close. Aí eu acho que é o fa-icons. Qual que são os ícones que a gente tá usando mesmo? Socorro. Styles, Lucid Icons. Lucid Icons, esse carinha aqui, close. A gente não tem, vamos colocar só um X mesmo. X, beleza, perfeito. Então a gente consegue colocar os ícones também. É, então, ok.

Eu vou só dando um ok aqui para saber os que a gente já passou, tá?

O cancel text tá ok. Z-closable, eu acho que isso aqui ainda não. Esse aqui tá ok.

Esse aqui a gente tem que trabalhar ainda.

Z-description, ok. Z-footer Tá ok também. Na verdade, acho que não, né? A gente não tá no footer, a gente recebe uma string. Deixa eu ver aqui. É no footer, é só se ele é nulo ou não. Eu não sei. Eu não me lembro. O Caio mandou um boa noite aqui, ó.

Boa noite, Caio, você tá bom, mano?

Tudo certo? Responde aí também, fala se você tá acompanhando aí, tá dando certo para acompanhar.

Eu quero ver, cara, se o NG Zorro Vamos aqui, ó, ng-zorro.

Aqui quero ver como é que é o footer dele, do modal.

Footer.

Aqui, isso aqui, beleza. Ele recebe uma string, um template ref, um modal button options. Então a gente tem aqui esse customize-head-footer aqui, ó, mas cara Sei não, viu. Gosto muito dessa diferenciação, não sei como que a gente customizaria tanto esse footer. Eu particularmente usei bem pouco essa customização aqui, cara. Mas a gente tem um NZ modal footer que a gente pode passar. Aqui, e a maioria é feito por um template. Então eu acho que por enquanto Que o footer aqui a gente vai ter só a ideia, ter só os botões de cancelar ou OK. Como que é o chatzinho? Caio, tô bem, mano, graças a Deus, tudo certo por aqui.

Porque aqui eu sei que ele tem esse carinha aqui, só que eu acho que eles colocam isso no código, cara, eles não tem nenhum footer.

Eles têm sim, tem um dialogue footer aqui. E só que aí você tem que colocar ele na mão e colocar quantos botões você quer aqui.

E por enquanto, o que que vocês acham aí do footer, hein?

Se tem alguma opinião, como que a gente pode usar o footer aqui, ó. Porque aqui passar uma string não vale muito a pena no footer.

Então aqui, por enquanto, a gente está só recebendo.

Se eu passo ele como nulo, a gente não vai mostrar os botões, tá vendo? A gente não mostra os botões.

É possível também colocar esses botões aqui dentro do componente.

Tem problema nenhum, que é basicamente o que o ChatCN faz, a gente coloca esses botões aqui dentro do componente. Mas hoje o footer tá assim, cara, hoje o footer a gente passa, não acho que faz sentido passar uma string, um componente um template ref. Não sei se faz sentido passar algo desse tipo para cá, cara. Ou a gente pode só mudar aqui para z-hide-footer.

Boolean.

E se por algum acaso a gente E no basic é uma possibilidade também. E aí, se eu passar o z-hide-footer true—

olha quem tá aí, mano! Eduardo! Edu, que saudade, mano!

Valeu, saudades!

Eu já trabalhei com ele junto, cara, é o fera, o brabo, cara, é brabo, brabo, brabo!

Boa noite, mano, feliz de você estar aqui na live com a gente. Mas então, se a gente passa o Hide Filter aqui, ele vai sumir.

E aí, se a gente precisar mexer nisso aqui depois, a gente mexe, tá bom? Mas por mim pode ser aqui.

A gente tem esses mask close aqui, OK Destructive, a gente já colocou isso aqui também. OK Disable também já foi, OK Aqua também já foi, OK Text também já foi, aqui também, aqui também. ZView container ref.

Isso aqui, cara, eu sei que a gente já usou em outro lugar.

Aqui, ó, a gente passa o viewContainerRef da configuração se a gente quiser utilizar. Então, se a gente quiser passar um, a referência, né? Então aqui a gente utiliza Nesse caso, a gente quiser parar, passar essa referência de containerRef aqui para o nosso DialogComponent, a gente pode passar quando a gente cria o componente, tá?

Então é uma customização, caso a gente queira fazer isso, caso o usuário queira fazer.

É, usei o widget, cara, eu acho que a gente não colocou isso aqui. Ou colocou seu widget, tá? Já sim, tá aqui. Então se eu passar o basic widget, já tá até funcionando aqui, ó. Então tá certinho. Então aqui a gente dá um OK. Isso aqui a gente vai usar mais tarde. Com zconfirm quando a gente criar um modal, um confirm.

Vamos trabalhar então nesses carinhas que estão faltando, que é o closable, o mask closable, e esse data aqui para a gente passar, é, inferir, passar parâmetros para dentro do nosso componente. Deixa eu já colocar uma perguntinha do Caio aqui, ó: qual o IA que você usa no VS Code? Mano, eu uso só o Copilot. Eu ainda, esse dia eu até baixei o Curso para tentar usar o Curso, só que eu não consegui, cara. Eu não consegui me adaptar direito. Acho que foi preguiça mesmo de ter que configurar tudo de novo, porque o VS Code eu já uso ele há muito tempo.

Deixa eu sair dessa tela aqui, pera aí. Como é que eu faço para tirar isso aqui daqui? Show!

Então deixa eu responder aqui sobre essa questão de IA no VS Code, cara. Eu tentei usar o Cursor, que é um fork do VS Code que usa muita IA, só que ele mudou muito, cara, os shortcuts que eu uso no VS Code. Então quando eu comecei a usar, eu tentei, eu vi que minha produtividade abaixou um pouco porque eu tava tentando fazer, né, usar os shortcuts que eu uso no meu VS Code. E aí, cara, eu tentei usar por um tempo, vi que não deu muito certo. Ele tem muita coisa de, ah, muita coisa, muita gente, muita tarefa em background. Eu vi que lançou a versão 1 dele agora. E aí depois talvez eu vou tentar dar uma dar mais uma tentativa, sabe, fazer mais uma tentativa de usar o cursor. Mas por enquanto, cara, eu fico só no VS Code aqui mesmo. De IA que eu uso é o Copilot. E quando eu preciso ter alguma dúvida do ChatGPT, alguma coisa do tipo, eu venho aqui, ó, eu tenho uma, esse Genie aqui, ó, que é uma extensão, Genie, uma extensão ChatGPT que eu coloco a minha, eu coloquei minha aqui do da OpenAI aqui, e eu tenho um ChatGPT aqui. Não sei nem se tá funcionando ainda, mas aqui, ó, é só uma forma mais rápida de eu resolver problemas. Então, por exemplo, eu consigo selecionar aqui isso aqui, apertar com o botão direito.

Ai, meu Deus, eu não tô compartilhando a tela, perdão.

Então aqui, ó, é essa extensão aqui que eu uso. Eu esqueço que eu tenho que compartilhar a tela, cara. Genie. E aí eu coloco a minha, a minha key do VS Code, da OpenAI, nele, e eu tenho essa aba aqui que eu consigo mandar mensagem. Tem um ChatGPT aqui do meu lado, cara. E aí eu tenho algumas facilidades que eu posso selecionar aqui, vir aqui no Genie e falar: adiciona teste unitário, acha bug, otimiza, explica, adiciona comentários, completa o código, e é de rock prompt, não sei o que que é isso aqui. Mas, por exemplo, eu quero otimizar, eu mando aqui, ele já faz aqui uma otimização, eu consigo pegar uma diferença, alguma coisa assim. Eu sei, cara, que o Copilot também tem isso, só que o Copilot eu tenho usado menos, tá? Eu uso Copilot mais para esse autocomplete aqui, que, cara, para mim isso é bom para caramba, isso facilitou muito, adiantou muito minha vida. Com essas questões desses autocompletos. Então eu apago aqui, ó, ele já me dá o que que eu vou completar lá, eu só dou um Tab e acabou. O Copilot eu já uso menos para essa questão de AI explain. Ele abre o lado direito. Tenho usado menos, confesso, mas eu acho que eu poderia usar mais, que talvez ele é até mais completo que esse Genie. Ainda tô dando uma olhada ainda, tá bom?

Mas só respondendo a dúvida do Caio aqui.

Pode mandar mais dúvidas se estiverem, tá, galera?

Se estiverem, quiserem saber como é que eu faço aqui no VS Code, configuração que eu tenho, manda aí que eu explico também. Mas tá, onde que eu parei? Deixa eu ver aqui, deixa eu ver aqui, deixa eu ver aqui.

Aí eu tava falando do z-data, que é o z-data, é só a forma da gente passar parâmetros para dentro do componente. Mas vamos começar com esse z-closable aqui. Como que a gente vai saber o que que é isso aqui, cara? Eu vou vir aqui no NG-Zorro e ele tem um ng-closable, quando tem que ter ou não um botão botão aqui em cima, tá? Então é só true ou false. Eu acho que o z-closable já tá funcionando. Então esse aqui também já tá ok. É só se eu quero ou não deixar um botão de X ali em cima, tá? Eu tenho z-closable e eu tenho mask-closable. É quando eu quero ou não que o usuário feche o modal quando ele clicar fora. Tá, e eu acho que esse aqui a gente já fez também, tá bom. Eu lembro que semana passada eu já fiz. Ela já tem até aqui no dialogueRef.

Perfeito.

Que no dialogueRef, o que que a gente faz? A gente espera, quando a gente constrói o componente, né, a gente pega a instância dele, dá um addEventListener. Quando a animação terminar, quando terminar de montar o componente Eu vou lá na instância do meu componente e chama esse carinha aqui, ó, overlayClickOutside, outside, que ele fica esperando um clique. Ele filtra por algum clique que não é dentro do meu modal, dentro do meu componente. E se tiver algum clique que é fora do meu componente, eu dou um subscribe aqui, subscribe aqui, até fechar ele. E fecha, chama o close. Aí no close ele dá o result aqui, que ele vai retornar o resultado lá para o close, dá o overlayRef e destroy e fecha todos os subscriptions que a gente tem aqui, tá bom? Então isso aqui é outro carinha que já tá funcionando.

Então dá um OK aqui também. Então aqui já tá funcionando, aqui já tá funcionando.

A única coisa que falta então é o zdata. Cara, a gente já tá com modal praticamente pronto, cara. O dialog já tá pronto. A gente só precisa agora achar uma forma da gente passar parâmetros. O que que seriam esses parâmetros? Aqui no nz_content eu tenho um zdata e aqui, ó, no ng-zorro, como é que funciona?

ZData.

Deixa eu achar um exemplo aqui para vocês.

Aqui, ó, é basicamente, cara, um objeto, um array que a gente passa, que a gente consegue passar, por exemplo, favorite library aqui no caso. A gente vai receber esse ZData aqui, ó, dentro do nosso componente.

Então a gente tem uma interface que ele vai vir aqui, eu tenho esse ZData aqui dentro do meu componente, tá? Então a gente vai ter um ZData aqui, e aqui eu vou passar, por exemplo, eu não quero passar o meu formulário, eu quero passar Vamos pensar no que que a gente pode colocar aqui, meu carinho. Basic. Eu tenho esses caras aqui, então, first name, name, and username. Aqui no meu ZData eu não posso esperar só um T desse aqui não, cara. Deixa eu vir aqui no meu dialog, meu modal aqui no Nivezor, modal, modal config, não, modal types, ZData, ele tem um D. Que que é esse D? Essa é uma excelente pergunta, cara. Agora aqui a gente vai ter que dar uma olhada boa, cara. Cadê o Z content? Esse dele só tá usando aqui, cara, o objeto. Perfeito. Então esse dele é um objeto.

E o que que a gente precisa, cara?

A gente precisa que isso seja injetado no nosso componente. Perfeito. A gente precisa injetar isso no nosso componente, porque aqui, ó, se data Aqui, esse carinha aqui, ó. NZ modal data. Aqui a gente não tem nada, mas eu sei que provavelmente modal service, vamos ver, ele tem um modal data. Então no meu service, quando ele dá esse provide. zDialogRef, verdade, é aqui, ó, no createInjector. Beleza. User Injector, esse aqui tá onde? Aquele Jesus já mudou bastante coisa aqui, mas quando ele chama Script Injector aqui, é aqui mesmo. CreateInjector. Então aqui ele passa tanto esse cara quanto o NzModalData e o config. Só que esse nzModalData vem de onde? Do modal.config. Que que é isso?

Ele é só um injection token, cara, que a gente pode deixar ele Mm, okay.

ZModalData, zModalData. Eu vou passar o zData para ele aqui e aqui vou passar o config, tá? E aí, quando a gente fizer isso aqui, por exemplo, então private ZData, recebe inject ZModelData. Constructor console.log. Vamos ver se vai dar certo. Ah, ok. Dialog component. Deixa eu tirar isso aqui daqui. Beleza, então agora a gente já tem certinho aqui, ó.

Então a gente já tá passando as informações que a gente tem lá do nosso modal quando a gente cria ele. Então quando eu passei o zdata aqui, ó, eu passei, quando eu abro ele aparece lá Pedro Duarte, Pedro Duarte.

Então aqui eu consigo dar um if this.zdata.form.value E aí que eu vou passar aqui, no caso, Samuel Rizon. Samuel Rizon dev. Vai colocar. Olha que maravilha!

Olha isso, meus amigos, que coisa linda! Que coisa mais linda que a gente tem aqui! Então a gente tá passando informações para o nosso componente ZData, só que o ideal seria a gente tipar isso aqui, cara.

O ideal é a gente achar uma forma de tipar esses e-data para a gente não ficar com esse N aqui. Deixa eu, deixa eu ver como que eu faço hoje no Ministério. Nem aqui eu tô tipando ele, ele não vem tipado porque ele é um JSON Token N. Para mim tipar, eu tenho que passar o tipo dele. Que aqui eu tenho algumas opções que o NG-SOHO fala aqui, né, é que a gente pode, ó, tipar dessa forma aqui, ó. E esse modal data, ele tá onde? Caramba, que tanto de código! Aqui, ó, é uma interface. Então aqui, e dialog data, a gente tem o name e username. E aí eu posso passar esse cara aqui, e agora eu tenho o meu data tipado. Show!

Então, mais uma coisa que a gente tem, cara.

Se eu não passar isso aqui, ele consequentemente vai vir nulo, undefined, e eu não mostro. Perfeito.

Se eu passar, eu tô conseguindo passar as informações e alterar os parâmetros. Do meu componente. Então, do meu componente eu consigo pegar informações do meu, do meu dialog quando eu criar ele, tá? Então, nesse caso aqui eu tô pegando essas informações do ZData, e aqui eu já mato dois coelhos numa cajadada só. Perfeito. Então tá bom, para galera que tá chegando, deixe seu like, se inscreve no canal. Que a gente tá refazendo o chat ao vivo para Angular. Tá ficando bom, tá ficando ruim não, viu?

Então aqui, ó, já temos um OK aqui também para esse cara. Perfeito, então a gente tem praticamente OK para tudo.

Temos aqui para esse aqui, a única coisa que tá faltando é esse autofocus aqui, cara.

Esse autofocus eu não sei como é que ele funciona no NGZO, tá?

Aqui, ó, o Caio mandou aqui: hoje eu utilizei minhas habilidades programador para clonar algo que é pago. Que isso, cara? Que que é isso? Que que você tava clonando, mano? Clonou alguma coisa? Eu normalmente utilizo minhas habilidades programador para baixar as coisas. Para baixar imagem do Instagram, que não deixa você apertar com botão direito e baixar imagem, aí eu abro o navegador aqui, vou lá na imagem, pego o link da imagem e baixo. Essas são as habilidades que eu normalmente uso no dia a dia.

Coisa besta! Mas clonar algo que é pago é loucura, aí é, aí você tá num nível acima. Mas autofocus, vamos ver aqui como é que funciona esse autofocus. Eu não sei nem o que que é isso, cara, eu nunca usei.

Ah, foi você que tava falando lá no grupo do Drácula, do tema do Drácula, né, mano?

É você mesmo, cara.

Muito bom, o cara faz o próprio tema dele só que sem pagar. Perfeito, mano. Cara, o tema que eu uso aqui no VS Code, mano, falando em tema, tema, cara, eu nem sei se eu uso Dark Modern.

Eu acho que esse aqui é do próprio VS Code, mano. Default themes. Parece que eu uso esse cara aqui, não é do próprio VS Code, tema do próprio VS Code.

Eu não tenho, não sou muito ligado a tema não, cara. A única coisa que eu tenho aqui no VS Code são algumas configurações bem simples, mas o resto tudo é o padrão mesmo.

É o que ele já manda para gente. Aí fiz um fork, caramba, vamos ver essa história aqui, ó. Eu fiz um fork do Dracula normal, aí eu peguei imagem do site do Dracula Pro, fui usando o pick color.

E peguei o Dracula Pro. Procurei nas extensões Caio Velani.

Vamos ver aqui, ó, quem sabe faz ao vivo. Deixa eu só botar aqui, Caio Velani.

Deixa eu mostrar isso aqui, mano. Ai, ai, cara, Caio Velani, Darkula Pro Free. Tem 2 downloads, mano. Ô, louco, velho! O cara não é que o cara botou o Dark Cloud. Ai, meu Deus, mano! Mas você, como é que você fez aí, cara? Você comprou o Pro?

Não entendi não, hein? Marketplace, Dark Cloud Pro Free. Brabo, brabo!

Mano, vou te falar, eu nunca usei esse tema do Drácula, velho.

Drácula Pro Theme, esse carinha aqui deve ser isso aqui, né? As cores. Entendi. Meu Deus, que que é isso aqui, cara? Entendi, mano. Caramba, olha isso, velho!

Ai, meu olho! tinha que dói, dói, dói! E que desgrama de negócio que é esse aqui, mano! E esse aqui deve ser o Pro, né, que é mais roxinho. Entendi, mano. Caramba, o cara criou a história do cara, mano. O notebook dele foi roubado, ele teve que configurar tudo de novo, velho. Caramba, que doido, mano!

Oficial Light Team. Quem que usa tema branco, mano? Tema branco eu uso para poucos sistemas. O Ministério é um deles, né? Todo sistema que sabe fazer um tema escuro bem feito no mesmo, não, cara, é difícil.

Caramba, o cara, o Kai tá querendo que eu baixe aqui, ó.

Querendo que eu baixe e instalo. Vamos ver.

Será, Kai? Será que eu confio no cê, mano? Almeida. E o medo, mano?

Ô meu Deus, pera aí, volta para cá.

Cadê?

Passcode. Será a extension foi publicada? Isso é a primeira extensão que você tá instalando desse cara, você não é verificado, mano.

Que que você tá fazendo isso aqui? Isso aqui eu consigo ver o código disso aqui.

Cadê o código para mim saber que eu não tô instalando nada?

Você, 7 horas atrás, mano. Ai, que medo, mano, de instalar esse negócio aqui. É, o Thiago, esse é o que o Caio fez, mano. Esse é o que o Caio, que dá live, acabou de— ele fez, ó, tem 7 horas que publicou esse negócio aqui, pô.

[LAUGHTER] Cai, cai!

Nossa, tudo roxo!

Você tá doido!

E ficou mesmo, ficou parecidão com o Drácula aqui, velho.

Caramba, cara!

Ficou mesmo, que da hora! Brabo, hein? Brabo!

Olha lá, brabo, brabo, brabo!

Mesmas cores.

Você é louco!

Bravo, mano! Aí você teve a manha, pô! Aí, qual que era o outro que eu usava, mano?

Ai, ai, agora é saber qual que era o tema que eu te usava.

Esse aqui.

Ai, meus olhos, socorro! Qualquer Dark Modern, esse aqui.

Ufa!

Vai, top, mano! Ficou da hora o tema, velho! Ficou igualzinho do Drácula, mano. Bem que eu vi que você estava falando lá no grupo mesmo, na comunidade do Zap.

Ou falando nisso, deixa eu ver se eu consigo botar aqui o QR code do grupo do WhatsApp, só que eu não quero que ele fique em cima da live não, quero para cá.

Boa, show!

A minha imagem que eu vou descer aqui para cá, e show!

Top, Caião! Mandou bem demais no tema, mano. Eu nem sei como é que publica esse negócio aqui no VS Code.

Show!

Vamos voltar para o nosso dialogue aqui, né?

Voltemos para o nosso dialogue.

Então eu tava olhando o autofocus, então aqui no ng-zorro, disable ns-no.

Auto Focus. Que que esse Auto Focus faz, mano? Que que esse Auto Focus faz? Então vamos caçar aqui. Eu sei que aqui, modal, modal component, olha lá, z-auto-focus. Z-Auto Focus, tá.

Mas onde que ele é utilizado?

Aqui, ó, CDK Focus Initial. Aqui, ó, isso aqui, ó, é no botãozinho que o nosso autofocus, ele pode ser OK, Cancel ou Auto. E aí, aqui ele tem um cancel, só que você quer o modal confirm container, tá? Eu tenho modal footer aqui, aqui eu tenho outro focus, tenho lá, perfeito. Então esse cara tá aqui, ó. Aqui e aqui. Só que esse aqui é igual. Ok, show.

Respondendo o Thiago aqui, ó, esse framework é novo, cara? Sim, a gente tá criando ele. Eu mais uma galera da comunidade de Angular, a gente tá criando os ArdUI, que o nosso objetivo é criar uma alternativa para o Angular do ChatCN. Então é completamente novo, cara. A gente começou a desenvolver ele em março, início de março, e a gente já tem, já tá com bastante componente, cara. A gente já tem bastante coisa aqui.

Que a gente já fez, a galera tem feito.

A gente tem um grupo no WhatsApp para a gente conversar e falar.

Tem um projeto open source, né?

Então tudo que você tá vendo aqui consegue contribuir. Mas a gente já tem bastante coisa, cara. A gente já tem acordeon, o alert, avatar, bad. Então a nossa ideia é copiar e ter a beleza do ChatGPT.

Então tá vendo?

Por isso que a gente chegou Aqui na live eu tô fazendo o dialogue, né? Então é até a beleza do ChatCN, só que com o poder do ng-zorro, cara. Porque o ng-zorro, como biblioteca de componentes, é uma biblioteca que tem uma experiência de desenvolvimento muito boa para desenvolvedor Angular. Então a gente tinha, a gente sabe, né, que tem um Spartan UI, só que o Spartan, cara, Já falando aqui, mostrando para vocês, né, o Spartan é tipo assim, quando eu conheci o Spartan eu fiquei muito empolgado porque, cara, o chat é muito foda, cara, o chat é muito bom, a lib é muito boa, é muito bonito, e a gente não tem nada disso para o Angular. Só que o cara, velho, pegou muito a ideia de como desenvolver no React e passou isso para o Angular, cara. Então, por exemplo, deixa eu dar um exemplo bem fácil para você aqui, ó. AlertDialog ou o próprio componente de dialog mostrar para vocês, ó. Então vamos comparando aqui, ó, o que que a gente tem, ó. No Spartan, o componente de dialog é isso aqui. Chegou aqui, clicou em Edit Profile, roda. No ZardUI a gente tem, a gente está fazendo isso aqui agora, ó. Clicou em Edit Profile, ele abre aqui, ele tá com a configuração lá que eu acabei de mexer aqui.

Mas espera aí, peraí, peraí, peraí, peraí, peraí, aqui na demo basic. Deixa eu tirar esse footer daqui, ó. Deixa eu tirar o OK Destructive, o ícone também, e o cancel ícone também. Beleza, aqui se eu não me engano é Save Changes.

Então aqui, ó, a gente tem a mesma coisa. Deixa eu tirar o Disable dele para a gente ficar bem parecido.

Mas aqui eu tenho Save Changes no ChatCN, tem um Cancel e o Save Changes aqui.

Eu tenho cancel, save, tinha, está bem parecido. Só que vamos olhar código, cara, vamos olhar código. ChatCN, tanto de coisa que a gente tem para fazer. A gente vai importar tudo aqui, ó, a gente vai importar o dialog, o close, content, description, footer, tudo aqui na mão. E no React, né, a gente cria o HTML, né? Então no HTML a gente chama esse cara aqui, chama o trigger dele aqui, chama o content tran tran, e faz tudo aqui na mão, no HTML, certo? É forma de programar React, cara. Tudo bem, para mim não tem problema nenhum, tá? Spartan, que que ele fez? Mesma coisa, mano. Só que olha isso aqui, velho.

Deixa eu dar zoom para vocês, mano. Aqui, ó.

Olha isso aqui, mano.

Ele vai diminuir, não. Ai, caramba, ele não vai tirar esse carinha daqui não.

Enfim, olha isso aqui, mano, para a gente usar um dialog, tá? O mesmo código que a gente tá fazendo ali no nosso, para a gente usar um dialog, eu tenho que importar tudo isso aqui. E ele fez uma diferença entre Helm e até eBrain. Cara, eu nunca vi isso aqui no Angular. Aqui, ó, então umas coisas a gente importa do tal do @spartan-ng/helm/input e outras a gente vai @spartan-ng/helm/dialog. E aqui a gente @spartan-ng/brain/dialog. Então eu tenho tudo isso aqui, importo tudo isso aqui, e mano, olha que maravilha desse dialog aqui, cara. É tudo componente diretiva, mano. Tá vendo? E eu tenho que criar o dialog aqui. Como que eu abro esse dialog? Eu tenho que criar um botão aqui para fazer um trigger HTML, HTML button, é o edit. Aí ele triga o HTML dialog content, passa a classe aqui, ó, brn-dialog-content, let context para passar o contexto. Enfim, olha a zona que é só para a gente fazer isso aqui, cara. E aí, qual que é a nossa proposta do ChatCN? Do ChatCN não, qual a nossa proposta dos Artify? Olha o nosso código, cara. Aquele tá grande porque a gente criou o componente inteiro para isso, tá bom? Mas na prática É isso aqui, ó. Na prática, o nosso dialogue é um service, é um service que eu passo o título, a descrição, o conteúdo, que pode ser tanto uma string quanto um componente. E isso aqui a gente consegue componentizar, né, para ficar fácil para a gente criar componentes dinâmicos aqui. E se eu quiser passar algum parâmetro para dentro dele, eu passo aqui no data. E aqui eu tenho várias outras configurações do meu botão e tudo mais, porque já tem tudo pronto aqui, cara, no service. Então o meu componente em si, preciso fazer um diálogo, alguma coisa assim, eu vou ter isso aqui, cara, um botão, e vou chamar o service e vou criar esse diálogo para mim. E aí no meu botão aqui eu já, eu coloquei mais coisas, mas abrindo aqui no para você ver, fica bem simples, cara. Aqui eu coloquei isso aqui para a gente ter um controle de outras coisas, que tem essa forma da gente setar as coisas, mas isso aqui é tudo opcional. E isso aqui é o que tem dentro do meu componente. Isso aqui a gente tem que ter, eu normalmente não tenho, porque eu também crio componente de forma dinâmica, né? Eu crio formulário dinamicamente. Vou ensinar vocês fazer isso aqui mais para frente, mas eu ensinei, na verdade eu ensinei um vídeo que a gente tem aqui no canal, o vídeo aqui do canal que eu faço formulário dinâmico.

Cadê? Deixa eu mostrar para vocês aqui, ó, tela de assinatura com formulário dinâmico.

Então aqui eu ensinei como que eu uso esse formulário dinâmico para criar as coisas para mim, cara.

Deixa eu ver se eu acho aqui um exemplo. Aqui não. Caramba, tudo do formulário ali explicando os componentes. Formulário dinâmico na tela de esqueci minha senha. É isso aqui mesmo. Então eu tenho minha rota aqui, aqui é o formulário dinâmico.

Então se eu der o zoom aqui para você ver, eu passo, eu normalmente quando eu vou criar um dialog, eu passo isso aqui, ó. Eu tenho meu formulário dinâmico, então no data dele aqui, ó, do meu dialog Nesse carinha aqui eu vou passar um array com meu formulário dinâmico. E aí o componente que eu passo para ele é um componente que eu tenho de formulário dinâmico, e ele vai montar esse formulário para mim. Então, cara, eu não vou ter dor de cabeça nem de criar um componente para isso, para gerenciar o meu formulário. E outra coisa que a gente ganha aqui é que quando a gente clicar nesse OK aqui, a gente tem a instância do meu formulário, do meu componente, que já tem os valores do meu formulário.

Então, gente, é muito mais fácil.

Então, explicando para você, usar UI visa facilitar a vida da gente como desenvolvedor, tá?

Facilitar bastante.

Porque o Spartan UI não facilita muito não, cara.

Eu não gostei.

Aqui, tudo isso aqui para usar um dialogue, tudo isso aqui, cara. E aí você tem que ficar colocando na mão lá o HTML, dar ele content, você tem que colocar o contexto Aí sim, tem que dar esse let context aqui para você pegar as coisas. Aí você tem que colocar o reader, colocar tudo na mão, H3, BRN, dialog title, HLM. Olha isso aqui, cara, imagina você ter que fazer isso aqui para tudo que você vai fazer.

É muito mais fácil criar ele só com um service aqui e mandar brasa, fechou? Então voltemos aqui no nosso NG Zoo, que a gente tem um CDK Focus Initial. Beleza, agora eu preciso saber, eu preciso saber se Eu preciso saber se o focus, z-focus, autofocus, ok. Preciso saber se ele vai dar um autofocus no botão de ok, cara. Como que eu vou saber disso? Porque aqui Eu tô usando esse CDK Focus Initial. Será que eu tenho que importar alguma coisa? Dialog, que é tudo que tem do modal. Eita, falta, eu tenho modal container directive com isso aqui, cara. Você quer mais complicado que a gente Pensa, eu tenho esse trap focus aqui. Se ele tiver o autofocus, se não, eu pego elemento atual, dá um focus nele. Cara, shed scene do vivo eu nunca vi não, velho. Nunca tinha visto.

É a mesma coisa, né, cara?

Só que para view. Caramba, bem completo mesmo.

E open Sans pela comunidade também, que da hora.

Caramba, 147 pessoas. Contribuíram. Tem chat CN esvelto também. Caramba, tem chat CN para tudo, cara!

Ficou muito famosa a Lib, mano.

Que da hora, que da hora! Agora não sei como que eu vou fazer para que ele dê um focus aqui, ó. Eu preciso que o meu autofocus, ele tá lá no meu botão ainda, cara. Eu preciso que ele venha para cá, que ele dê um foco aqui no meu carinho. No ng-zorro, ele faz trap focus aqui, ó. modal-container directive, base-modal-container-component.

Valeu, mano!

Valeu, Tiagão! Obrigadão, mano!

Valeu por participar da live aí.

Deus abençoe, boa noite para você também, tamo junto! Caramba, tem muita lógica aqui, cara. Só para achar o componente que ele deve focar, mano. Olha que bagunça, cara.

Saindo do view, indo para react.

Para o Next, né? Next React, show, mano.

Eu nunca programei nenhum dos dois, o Vue nada, React também. Se eu tiver feito, criado um projeto em React, foi pouco, cara. Eu comecei do Angular já tem bastante tempo e fiquei nele mesmo. Mas é tudo, cara, tudo JavaScript.

Eu sempre falo, no final é tudo JavaScript, não importa o que a gente tá fazendo, não é tudo JavaScript, forma diferente fazer a mesma coisa. Angla neles aí, ó. É isso aí, meu amigo, que é time Angla.

Eu gosto do Angla e vou defender o Angla para sempre.

É isso aí, show! E agora, cara, eu acho que isso aqui eu vou ter que deixar para outra live, mano, para fazer essa parada do autofoco aqui, ó. E porque pelo visto, mano, vai dar um trampo do caramba.

Eu queria pelo menos começar a parte de teste unitário desse modal aqui com vocês, cara, que eu sei que teste unitário é uma coisa, caramba, mano.

Esse aqui eu vou até parar.

Vim para cá para responder, ó, se liga. Samuca, você já trampou com Pioi lá da TOTUS?

Mano do céu, ai, dá até arrepio de ouvir esse nome, cara.

Meu Deus, mano, eu já tenho, cara, eu já trampei na TOTUS. Deixa eu contar a história para vocês, mas essa aqui é boa. Eu já trampei na TOTUS, fui na verdade, cara, a TOTUS foi minha primeira entrevista de emprego que eu fiz na vida. Primeira entrevista de emprego. E aí eu entrei, entrei como técnico mesmo, não era antes de ser júnior, entrei com nível técnico. E aí, cara, lá tipo assim, eu fiquei 5 anos na TOTUS, cara. Sempre gostei, caí numa squad que era muito boa, meu gestor também era muito bom, tipo assim, gente, tinha uma puta união lá, cara, era muito legal. E aí, cara, lá na TOTUS eu tive a oportunidade de começar o projeto de assinatura eletrônica, cara, da TOTUS, que hoje é o TOTUS Assinatura Eletrônica. E ele, eu comecei, cara, só que eu comecei o projeto e aí eu comecei usando o Angular e comecei usando o ng-zorro, cara, que é a biblioteca que eu defendo com unhas e dentes. E aí chegou num tempo, cara, que eles começaram a pedir para a gente mudar para o POI, mano. Aí doía no coração, cara. E aí eu falei, cara, não, acho que a gente já tá com NG Zorro. E aí eu tentei, né, cara, já até a gente tava até conversando com o pessoal lá da comunidade do Fábio Miranda sobre essa questão, cara, que tipo assim, eu tentei, cara, manter e falar, cara, é o NG Zorro, é o que a gente tem hoje, é uma biblioteca muito boa e tudo mais. Só que eles queriam que a gente usasse PWA, né? Só que aí, aí acabou que não foi para frente e ficou, cara. Hoje eu acho que, se eu não me engano, é o único produto da TOTUS que não usa o POI, que eu não curto, cara. Falar que sei que é bom, não é, mano, não é, não curto, cara. Já eu tentei usar uma vez, cara, tentei, eu juro para vocês, cara, eu tentei, só que não vai, mano, não é, não é funcional, não é bonito, não tipo assim, não vai para frente, sabe? Então você, igual por exemplo, você vem aqui, ó, PY, não sei, você chega aqui, você fala, que que é isso aqui, cara, sabe?

Tipo assim, acorde, exemplos, tá? É isso aqui, mano.

Como que eu vou programar numa biblioteca dessa, cara? Não faz sentido, mano, não vai, sabe? Aí eu, essa minha questão com o P.O.Y., cara, não desce não, sabe? Já tentei, já tentei fazer um projeto com ele. Ele tem muito, como é que eu falo isso, cara? Como é que é o nome? Caramba, mano, ele componentiza muito, né? Componentiza, cara. Ele tem uns negócios que você consegue, por exemplo, criar um componente que já tem uma tabela, que já tem uma lista, só que é tudo parametrizado deles, mano. E aí você acaba que fica, você fica preso nele, sabe? Você fica muito preso, você não consegue customizar uma coisa aqui, outra ali, sabe, quando você precisa. Aí acaba que não dá muito certo, mano.

Eu não gostei, mano, não gostei, cara.

Gostei. Não vai, mano, a documentação disso aqui, cara. Você vai ter que trabalhar uma documentação dessa, é choro, mano.

Você fala, meu Deus, o cara falando aqui documentação, imagina aplicação.

Trampei com Angular. Caramba, mano.

Fluig.

Ai meu Deus, trampei com o ângulo na aplicação, meu RH tem um trauma até hoje do pior, do Fluig da TOTUS. Ai cara, coitado, mano. É treta, mano, é treta. Só que tipo assim, mano, como é uma biblioteca que foi criada pela TOTUS e é mantida pela TOTUS, eles de uma forma ou outra vai falar, mano, vocês têm que usar, velho. E aí fica Tipo assim, o que que eu vou fazer, sabe? Se você não tiver um peito para falar, tipo assim, não, não vou usar, ou não sei o quê, cara, não consegue, mano. No meu caso, graças a Deus, deu certo de a gente continuar usando o NG Zorro lá no TOTS assinatura eletrônica, e a gente não foi para o POI, cara. Mas tipo assim, é um caso só na TOTS que eu conheço, cara. Mas eu entendo, mas é porque o projeto já tava bem avançado, a gente já tinha muita coisa. Parar e mudar tudo para o POI, mano, é tipo assim, é literalmente fazer o projeto inteiro, sabe? Então não fazia muito sentido. POI na época não tava do que tá hoje, tinha iniciado, era o início do projeto, início assim, né? Quando eu comecei, é praticamente o início, cara. Quando eu comecei o Senatório Eletrônico era 2019, 2020, uma coisa assim, sabe? Mas foi basicamente por causa disto. Mas é loucura, mano.

Aqui, ó, mais uma perguntinha. Pera aí.

Qual livro de competência com experiência você vê que o mercado mais pede para Angular nas vagas? Cara, o que o mercado pede é Angular Material, que é o que normalmente a galera utiliza, cara. E é outra biblioteca que eu odeio, cara, com todas as minhas forças. Acho que é um descaso com a comunidade anglo-americana ser do jeito que é, cara. Para a gente, não acho que é nada funcional, tem muita, muita coisa que dá para melhorar na biblioteca, mas por ser a biblioteca oficial, acaba que muitas empresas utilizam, cara. E aí é Anglo-Matthew, e o que um que é muito conhecido também é o PrimeNG, que a galera gosta. Luiz gosta, né, Luiz? Luiz Arte gosta do PrimeNG, a galera gosta muito. Eu sou defensor do NG-Zorro, mano, eu sou defensor do NG-Zorro. Para mim, eu falo do NG-Zorro, falo bem, uso NG-Zorro há muito tempo, cara, e não conheço outra biblioteca melhor que o NG-Zorro para Angular, cara, não tem, cara. Pode tentar procurar, o dia que vocês usarem no dia a dia mesmo e criarem um sistema que usa tudo que o ng-resolve tem, mano, vocês vão ver, é fácil, é muito fácil. É por isso que a gente quer, a proposta do usar UI é ser, é usar a beleza do ChatGPT e o poder do ng-resolve para a gente juntar esses dois e fazer a melhor biblioteca de componentes para Angular. Porque as bibliotecas de componentes para Angular que a gente tem hoje é tipo assim, o Material, o Material é a biblioteca oficial, tem as coisas lá do Google. Só que, mano, você precisa fazer uma coisa, customizar uma coisa, mano, Cara, chora, mano. Sente e chora. Você sente e chora. Além de, cara, a maioria da galera não sabe utilizar da forma certa. Isso também conta muito. Acaba utilizando de um jeito errado, acaba não sabendo usar os componentes bem. Porque, tipo assim, a Google utiliza, cara, utiliza muito bem, sabe? Só que a experiência de desenvolvimento também eu não curto, cara. Vai mexer na tabela do Material, vai customizar aquela merda, mano. Você vê que loucura que é, cara. Uma tabela ou um dialogue também, que você tem que fazer várias coisas para você ter umas coisas simples, sabe? Então acaba que não dá muito certo. O Primary G, cara, antes da versão, das versões mais novas, eu tentei usar uma vez e eu não gostei. Eu sei que ele atualizou bastante, tanto a interface quanto a parte de experiência de desenvolvimento. Só que para quem usava o Primary G antes disso, mano, e agora tem que migrar e atualizar para versão nova. Os cara quebraram tudo, mano, fizeram tipo assim o PrimeNG 2 e cagaram para todo mundo que utilizava antes. Então quem usou PrimeNG antes da versão 18, se eu não me engano, 16, e tem que atualizar, por exemplo, se for na 16, né, tem que atualizar da 15 para 16, esquece, mano, porque é muito break change. Então eles assim pegaram, mudaram a biblioteca da água para o vinho e falaram: vocês se virem para atualizar.

Entendeu? Isso aí para mim é uma bosta.

Agora, o NG Zorro, cara, tipo assim, a única coisa que é ruim dele é que ele não é conhecido, cara, porque é uma biblioteca chinesa, é a galera da China que mantém. É só que o NG Zorro, aí deixa eu compartilhar para vocês aqui para mostrar para vocês, ele usa o Ent Design, cara. O NG Zorro usa o Ent Design, que é, olha lá, aqui fala, né, que é a segunda biblioteca de React mais popular do mundo. Então, cara, o ng-zorro é o ng-design para Angular, cara. Então, tipo assim, eu curto para caramba a interface. O Luiz fala que não gosta, que acha feio, mas, cara, eu acho ótimo, mano. Então aqui é o ng-design, só que o ng-zorro, só que para Angular, cara. E é uma biblioteca muito bem feita, mano, muito bem feita. Então ela usa tudo que o Angular tem, que acabaram de lançar essa parada do splitter aqui também.

Achei foda pra cacete, velho, esse splitter aqui, ó.

Isso aqui ficou bom pra caramba, mano.

Olha isso, velho. Deixa eu dar um aqui, ó.

Isso aqui ficou bom pra caramba, mano.

Olha, a gente consegue dar um split nas coisas aqui, ó. Isso aqui ficou bem da hora, mano. Não tinha isso aqui não, lançou na versão 19.

E aí, cara, o NGZorro traz uma experiência de desenvolvimento que, cara, não existe em outra biblioteca, mano, não existe, cara. E eu falo isso, tipo assim, a galera, a galera não acredita, cara, a galera não acredita. E uma, por exemplo, uma das experiências de desenvolvimento é essa parte do dialogue. Eu uso dialogue o tempo inteiro no ministério, cara, mas o tempo inteiro, o tempo inteiro uso dialogue. E aí em outras bibliotecas você vai usar um dialogue, você tem que ficar criando um componente. Aí você vai lá, cria um componente de dialogue. Aí você cria o formulário, aí você cria todas as coisas. Aí você tem que chamar ele de uma forma que esse componente tá no HTML. E aí, mano, só nisso aí já foi um dia de desenvolvimento só para você fazer um dialogue. Que coisa que no Ministério, por exemplo, eu faço um dialogue em 1 minuto, 2 minutos. Eu só dou um create lá, um service lá, cria o dialogue e passo. As coisas que eu preciso para ele e acabou. Não tem segredo, sabe? Então é bem simples, é bem fácil. E aí essa experiência, desenvolvimento que o NG Zorro tem, para mim ela bate qualquer um, cara. Ela bate qualquer biblioteca de Angular. Os comentários aqui, ó, que eu falei muito, mano.

Eu tava falando aqui do—

a pergunta foi essa. Aí ele continua aqui, ó: tem que customizar também. Esse material é foda, o dele muito fechado para customização. E aí, mano, onde que o ChatGPT se destaca? O ChatGPT se destaca nessa, nessa parte de customização, porque o ChatGPT foi a primeira biblioteca que veio com a ideia de que de você, é, o componente ele não tá no NodeModules lá da biblioteca. O ChatCN você instala o código do componente na sua aplicação, e aí você tem total controle sobre aquele componente, você tem total controle sobre as classes, sobre a forma que você vai utilizar o componente. Cara, você tem controle de tudo porque ele literalmente pega o código do botão Cola no seu projeto e você tem um botão feito lá no seu projeto. Isso é fantástico, cara. A gente não tem, a gente não tinha, não tinha esse Angular, né? Não tem ainda. O Spartan trouxe, tá trazendo essa ideia do ChatGPT. A gente nos Arduai pretende fazer isso, a gente só não sabe como, não fez isso ainda, né? A gente tá trabalhando, Luiz tá trabalhando com isso, com o Henrique, para fazer essa CLI, para a gente conseguir instalar as coisas. Mas a gente vai ter essa customização muito, muito tranquila. Por quê? Porque nos Art UI, por exemplo, se a gente no botão, a gente tem as variantes do botão. Então aqui que a customização vem, ó. Então você precisa customizar, você quer criar uma variante diferente para você usar no seu projeto, você vem aqui e coloca pudim, cara. Eu quero a variante de pudim. A variante pudim vai ter BG Pudding, Text Pudding, Hover BG Pudding 90, pronto. E aí você consegue usar no seu projeto essa variante com um tipo pudim e acabou, mano. Você tem uma customização 100%, cara. O código desse botão vai estar dentro do seu projeto como se você tivesse criado ele. Isso é maravilhoso, cara. Isso é maravilhoso para a gente trabalhar. Uma peleja customizar o estilo de um simples input nesse material. Exato, mano, customizar o material é um senta e chora. O Edu falando aqui, ó, deve experiência essencial para adoção. Isso é verdade, mano. A galera que tá acostumada a sofrer, tá acostumada a sofrer com as coisas ruins, não tem uma experiência de desenvolvimento boa, cara. Já ouviu falar do Daisy? Uai, ele fez um barulho na bolha, deve também, cara. Já Cara, eu já até comentei, eu comentei isso com a galera esses dias, cara. DaisyUI para mim é um Bootstrap de Tailwind, nada mais que isso, cara. Que o Bootstrap foi uma das bibliotecas mais famosas, né? Então deixa eu compartilhar a tela aqui, ó. Bootstrap, mano, ela só foi a biblioteca mais famosa de HTML e CSS, mano. E cara, para mim, o O Daisy UI é um Bootstrap, cara, é um Bootstrap, só que ele usa Tailwind por trás. Nada mais do que isso, mano. Então, ó lá, em vez de você usar o Tailwind nas classes aqui no HTML, é o Tailwind Button. Porrada de coisa, mano, tem muita desgrama mesmo, velho. Ah, ele dá um btn que, mano, é o Bootstrap, só que A diferença é que o Tailwind, ele vai, o Daisy UI vai usar o Tailwind para transformar em CSS. O Bootstrap já vai usar a classe do CSS, já vai transformar direto para CSS. Então, tipo assim, eu não entendi o hype que a galera deu nesse carinha aqui, cara. Eu realmente não entendi, porque para mim é Bootstrap, mesma coisa de usar Bootstrap. E parece as mesmas classes, cara, o mesmo nome para tudo, mesma coisa lá, BTN, BTN neutral, bootstrap purinho, cara. Então para mim faz muita diferença não, cara. O Henrique Custódia, que é o amante de Days Y, que não tá na live não, mas ele que é o amante de Days Y.

Show!

Deixa eu fechar aqui, cara.

Eu já não sei nem onde que eu parei, mano. Ai, onde que a gente parou aqui? Eu tô no Focus lá, cara. Esse Focus eu vou deixar para outro dia, tá? Porque vai dar um trabalhinho bem bom de mexer nesse Focus aqui. Por enquanto eu vou deixar isso aqui, depois a gente trabalha nele. E vou tirar todos esses OK daqui.

E aí a única coisa que eu vou— eita caramba—

a única coisa que eu vou deixar aqui vai ser um todo implement autofocus. Pronto, então esse aqui é o único, a única opção do nosso, das opções do nosso dialog que tá faltando, essa e essa aqui. Só que essa aqui a gente também vai ter que fazer em outro momento, cara, porque isso aqui, esse confirm, ele nada mais é do que esse carinha aqui, ó. No meu modal, eu tenho dois tipos de modais aqui no ng-zorro. Eu tenho um modal normal que ele tem um header, um body e um footer, e eu tenho os confirmes, cara. É isso aqui, ó. A gente tem um título, uma descrição e um ícone para eles, tá vendo?

Então tem um ícone de info, eu tenho um ícone de success, erro e warning, tá?

Então essa é uma diferença. E a gente chama eles diferentes aqui, ó, no service. Então this.model.info Título content, ok, tá vendo? Success, erro e warning. Eu sei que no ChatCN, cadê o ChatCN?

Caramba, aqui componentes, tá? Caramba, o ChatCN atualizou a biblioteca inteira, cara. Aqui, ó. Eu acho que esse alert dialog aqui, não é? Eu acho que é, cara. O Black mandou aqui, ó.

Não sei qual que é seu nome, eu tô te chamando de Black, mas ele não— exato, esse modal de confirmação, se você clicar fora, ele não deve fechar o modal. Exato, mano. Eu só consigo fechar se eu fechar por aqui.

Ou se eu der um OK aqui, tá? Isso mesmo, perfeito.

E eu acho que o do ChatGPT seria esse alert dialog aqui, ó.

Are you absolutely sure? Se eu quero continuar, se eu quero cancelar.

Só que eu não sei se ele tem algumas variantes, cara.

Não fala nada aqui. Não sei se tem um outro componente para isso, mas a ideia seria a gente usar esse carinha aqui para a gente dar uma mensagem de confirmação. Mas, por exemplo, se a gente não passar nada, se a gente passar, se a gente vier aqui no nosso código, o basic Não passar nada aqui.

Ele quase que vira esse, esse alert aqui, ó.

Se eu tirar também esse carinha daqui, vamos ver. Olha lá, praticamente vira ele, tá vendo? Que tem um título e uma descrição.

Aí aqui eu só tenho que mudar as coisas aqui, mas eu tenho, a gente consegue com o nosso dialogue normal fazer com as configurações que a gente tem, né, fazer isso. Só que é aquele negócio, né, eu Eu posso fazer esse dialogue assim, aí eu terei que colocar, né, z closable false e z mask closable false. Eu teria que fazer tudo isso aqui para mim criar esse modal.

De confirmação, certo? Ele deu um erro aqui no console. Ah, que ele tava tentando ler o componente.

Mas o que que é uma experiência de desenvolvimento que a gente quer trazer? Que que é uma experiência de desenvolvimento? É isso aqui, ó. Em vez de eu ter que Quando eu for criar um modal de alert, um alert modal, em vez de eu ter que ficar passando título, descrição, e eu ter que passar isso aqui manualmente, ó, eu tenho que lembrar de fazer isso aqui. O que que eu vou fazer? Eu vou no create, em vez de eu chamar um create, eu vou chamar um confirm, this.dialogService.confirm. Isso aqui é uma experiência de desenvolvimento, cara. É isso aqui que eu falo que o ng-zorro tem que as outras bibliotecas não tem, cara. Que eu só passo isso aqui, ó, tá vendo? Tá vendo que é diferente, cara? Tipo assim, vai me matar eu ter que ficar fazendo isso aqui toda hora que eu tiver que confirmar? Não. Mas fala se não é muito mais fácil, cara. Fala se não é muito mais fácil. Eu tenho que só lembrar de, em vez de dar um create, dar um zclosable false, zmsclosable false, eu só dar um confirm aqui. E aí, já atrás do código, né, que esse confirm ele já vai abrir o meu modal com isso aqui, ó. Então isso aqui é uma experiência de desenvolvimento que a gente muitas vezes a gente não tá acostumado a ter, mas depois que a gente tem com o NG-Zorro, a gente fala, cara, isso aqui faz diferença no dia a dia.

Entendeu? Então deixa eu só dar um Ctrl+Z em tudo aqui, cara.

Sim, eu quero, na verdade eu quero já ir para essa parte de teste agora para eu conseguir criar pelo menos alguma coisinha aqui de teste unitário, tá? Então depois a gente vai criar esse autofocus aqui e depois a gente vai criar essa parte do confirm aqui, tá bom? Porque hoje na live eu quero criar um teste unitário para gente, fechou? Então nosso modal já tá funcionando bastante coisa.

Calma aí que eu tô me perdido aqui.

E aí, antes do teste unitário Só antes do teste unitário, o que que eu quero fazer? Eu quero aqui dialog módulo, que já tá ok. Eu quero só atualizar essa API aqui para ficar já com as alterações que a gente tem.

Então dialog.component.

E aí, como que a gente atualiza a nossa API aqui, ó?

Isso aqui é muito da hora, velho. Então tem que, ó, fazer autofocus, e eu vou pegar todos esses caras aqui. E aí, para o Copilot me ajudar, o que que eu vou fazer?

Vou colar isso aqui, aqui, e vou fazer isso aqui, ó.

Olha que maravilha, Copilot trabalhando para mim. Data já foi. Perfeito, tá vendo, gente, como que aí é boa?

Eu copiei tudo que eu tenho aqui, colei para cá.

Aí aqui no caso, vamos ver no ng-zorro aqui, ó, eu tenho API e aqui, ó, NZ modal service. Aqui nosso service, cadê? XardialogService.

Service.

E a gente vem aqui e aqui é só uma descrição pequena. Perfeito, salvei, gente.

Olha a documentação dos AdWords, como é que funciona, que coisa mais linda. Salvei, já tá aqui, meus amigos. Tudo aqui, ó, ele já cria documentação automática para mim pelo markdown que atualizei aqui, ó, dentro do meu dialog-demo-api.md. E eu tenho overview, que é a parte de cima, e o API, que é a parte de baixo.

Então tá tudo atualizado aqui, meu dialog, tá vendo? Bem simples.

Bem prático.

E a gente já tem um exemplo aqui rodando.

Depois a gente cria outros exemplos.

Vamos então tentar criar um teste unitário agora para o nosso componente, nosso dialog component. Vamos criar teste unitário para ele. Então a gente vai criar um teste unitário para esse carinha aqui, ó. É que ele tá achando ruim, tá? Vocês estão por aí? Então, por aí, show. Então vamos dar uma olhada aqui nessa parte de que que a gente pode fazer de teste unitário aqui para o nosso componente, cara. Eu tô vendo aqui no outro projeto que eu tenho que eu criei essa parte de teste, dar o component, um OK click, um close click, os componentes que eu tinha feito aqui. Agora a gente vai tentar criar.

E aí eu quero criar um teste unitário para quê, cara?

Para o meu componente quando ele tiver aberto, eu quero ter certeza de que ele vai fechar o componente quando eu clicar em OK ou em Cancel. Então, o que que a gente vai testar nesse componente aqui, cara? Eu tenho meu dialog component.

Então eu quero testar esses carinhas aqui que eu tenho que testar. Então se eu clicar em OK, o meu dialog tem que fechar, ele tem que emitir, né, esse carinha aqui, ó, onClick e onCloseClick. Ele tem que fechar também, eu tenho que fazer um teste unitário para isso aqui, ó. Quando eu clicar no botão de fechar, tá?

Então aqui a gente vai vir, aqui eu vou criar.

Como que eu crio teste unitário normalmente, cara? Primeiro eu vou pensar em algumas coisas que eu preciso testar aqui dentro do componente, tá? Então quando ele— eu quero testar essa função, essa função. Depois a gente pode tentar testar isso aqui também, mas basicamente as funções que eu quero testar por agora vai ser— são essas duas aqui, um teste mais simples. Só que a gente vai gastar um bom tempo para a gente preparar esse teste unitário para estar tudo funcionando e a gente conseguir testar isso aqui de uma forma OK. Tá, que normalmente a gente pensa em teste unitário, cara, às vezes dá desânimo de falar de teste unitário na cara. E eu super entendo, porque às vezes é muito chato, cara, a gente—

deixa eu abrir aqui—

é muito chato, cara, a gente trabalhar e ficar gastando mó tempão para a gente só fazer o componente, o teste unitário funcionar, cara. A única coisa que a gente quer fazer é o teste unitário funcionar, e normalmente a gente não consegue.

É chato pra caramba, eu entendo. Então deixa eu ver aqui no tooltip algumas coisas que a gente vai ter que fazer aqui pra gente fazer esse teste unitário funcionar.

E só pra mim já pegar coisas de outros, é um teste unitário de outro componente, cara. Então vamos lá, aqui no Tooltip o que que eu fiz? Eu criei um teste host component e na verdade é assim que a gente tem que fazer teste unitário, cara. Então aqui, isso aqui a gente não vai utilizar.

Na verdade, o que a gente vai utilizar aqui é o TestDialog, TestHostComponent. Aí a gente vai usar o @usardialogModule. Perfeito. E aqui a gente vai ter, vai ser exatamente esse demo que a gente tem aqui, ó, isso aqui. Então deixa eu copiar esse carinha aqui, exatamente isso aqui, ó. Porque a gente vai ter um botãozinho, open modal, open dialog, modal é do NG-SOUL, é que ele tem que acostumar a falar dialog.

E aí a gente vai chamar, cara, a gente vai ter esse botãozinho aqui, ó, e a gente vai chamar o modal no nosso teste unitário, nosso host component.

Beleza, aqui eu vou criar só uma string teste. Beleza, vamos importar esse carinha aqui também.

Por que que eu tô fazendo isso aqui, cara?

Esse aqui eu não preciso, eu não quero nada disso, cara. Quero só um título, descrição. Perfeito. E a gente vai testar esse componente aqui, cara. Deixa eu fechar isso aqui. A gente vai testar esse componente aqui.

Porque, cara, no teste unitário, para galera que tá aí olhando sobre teste unitário e às vezes tem muita dúvida e tem medo de teste unitário, o teste unitário, cara, o que que eu preciso pensar no teste unitário? Eu preciso testar o que que eu tô fazendo com meu, que que eu vou fazer na mínima versão que eu tenho do meu componente para mim testar. Eu preciso testar o que que ele tá fazendo e as ações que o usuário vai fazer nele. Então eu preciso simular um componente disso. Normalmente a gente cria um host component para isso, para a gente simular as ações que o usuário faria. E eu preciso ter certeza, né, de que essas ações vão fazer alguma coisa. Então, por exemplo, o que que a gente vai testar aqui? A gente vai testar se Quando a gente abrir o modal e o usuário clicar no botão de OK, ele vai fechar o modal. Isso é um teste válido que a gente tem que pensar, certo? Então o botão de OK tem que emitir um trigger para fechar. Isso a gente tem que— a gente consegue validar e ver se tá tudo certo. Tá, então a gente vai criar um aqui, um describe, e eu vou testar um OK Click, porque aqui eu quero testar, não vou testar só meu componente, eu vou testar o service, eu vou testar o dialog ref, vou testar bastante coisa aqui. De uma vez. Eu não quero testar só o meu, meu componente aqui.

Aqui eu posso mudar até para dialogue spec para não ficar, para não ter dúvidas, tá?

Então eu tô testando aqui o meu dialogue como um todo. Eu quero ter um teste completo para o meu dialogue.

Então A gente vai vir aqui no nosso componente com OK Click. Olha, mano, que que o Copilot já faz, velho. Ai, ai, Copilot, calma, mano, tá muito apressado. Abre aqui, fecha, fecha, fecha e fecha. Perfeito. Should call NZ, um OK callback when button is clicked. Então ele tá falando que exatamente eu tenho que ter certeza de que ele deu um trigger nesse carinha aqui. E a mesma coisa do should close the dialog when OK button is clicked.

Beleza, mas primeiro vamos, vamos fazer esse cara aqui. E aí a gente tem que fazer o quê?

A gente vai ter que primeiro, para cada teste, a gente tá chamando o host component. Perfeito. Tá, a gente provavelmente vai precisar do VLM module aqui. E aí é que agora deixa eu dar um NX. Test start.

Watch.

Que foi, beleza.

Agora eu preciso fazer com que no meu teste unitário ele clique no meu botão.

Certo, certo.

O TubeChip aqui, então vamos lá.

Perfeito.

Aqui ele já tá viajando. E aí, se eu chamei esse carinha aqui, se eu cliquei no botão O Dialog Service. Vocês estão por aí? Tá. Quando clicar em Create, tem que abrir o meu modal. Yeah, he's kind of trying to give me a spy here, man.

Copilot é foda, viu? Será que isso aqui vai rolar?

Isso aqui não vai rolar, mano, tem quase certeza, velho.

Ele tá pensando que eu tô acordando e já as mina, mano.

Não, então aqui, ó, deixa eu ver se no tooltip eu fiz a mesma coisa aqui, ó. Click to chip. Ah, ele pegou ali. Fez o dispatch.

Wait.

Auto chip to go.

Perfeito.

Então, antes de tudo, o que que eu preciso saber? Eu preciso saber se meu modal tá sendo criado, velho.

Se ele tá sendo criado na tela, eu preciso que a gente veja. Tem o Zdialog aqui, tem várias formas da gente ver.

Se o dialogue for criado.

Então vou só mudar o nome do teste, que é should create, when the button should create a dialogue.

Perfeito.

Zdialog.

Não é possível que ele já— que deu certo, mano. Se eu botar as artdialog aqui Falhou, caramba!

Então ele achou o Zedalog, tá?

Achou. Copilot, não, pedir para ele otimizar para ver aqui se ele consegue otimizar isso aqui. Não, mano, só piorou a situação.

Mas parece que tá sendo criado, cara, por incrível que pareça.

E eu não tinha botado fé não, tá? Deixa eu botar um console log aqui. Tá sendo criado, mano, por parece que incrível, tá, meus amigos? Tá sendo criado. Tá, então outro teste aí, ó. Esse aqui é um outro teste da hora, vamos ver.

Só que aí eu acho que ele não é, ele não vai usar esse Z dialogue, tá?

Taito, né?

Porque aqui ele tá pegando pelo Z, tá? Logo, Taito. Caramba, mano, eu esqueci o nome do data test ID.

Eu sabia, eu só não lembrava se era junto ou separado, cara.

C title aqui, vou passar um data test ID. C description.

Tá. Melissa.

Perfeito, meus amigos, tá funcionando.

Teste dialogue.

Se eu vier aqui e mudar isso aqui para pudim, ele tem que dar erro, cara.

Não deu erro.

Por quê? Porque ele contém o— meu Deus, agora sim vai dar erro. Deu erro. Should display title and description. Perfeito, mano, tá funcionando, cara.

Teste unitário tá aqui. Uma coisa, cara, que tipo assim, eu não costumo criar teste unitário sem nenhuma biblioteca externa, né? Explicando já outra coisa para vocês, eu não costumo, eu costumo normalmente usar uma outra biblioteca, por exemplo, ng-mocks, para mocar as coisas para mim. Ou um Test Library para facilitar um pouco o teste unitário. Só que com os hardwire a gente não pode fazer isso, cara. A gente não pode usar, por exemplo, tem outra coisa que eu uso bastante em teste unitário, é Angular Testing.

Caramba, cara, tem um site de teste unitário de Angular. Que eu curto para caramba, mano.

E ele tem uns utilitários de teste, cara.

Putz, realmente não lembro onde que tá. Eu sei que eu tenho aqui, cara. Deixa eu trazer um ouro para vocês aqui, meus amigos.

Eu sei que eu tenho aqui, ó, um modelo de mentoria que aqui eu coloco, cara, aqui, ó, esse carinha aqui, ó, melhor guia sobre teste unitário. Tem tudo uma parte de material e recurso que a gente pode ter aqui, mas eu tenho esse site aqui, ó, testingangular.com.

Deixa eu deixar aqui na live para vocês, cara.

testingangular.com, cara, isso aqui é o melhor site que existe para teste unitário em Angular. Ele explica tudo, cara. E ele tem, cara, é, eu só não sei se eu vou achar isso aqui, tá bom? Mas ele tem exemplos de tudo, ele tem tipo assim, mostra tudo, sabe? Ele tem aqui um GitHub que mostra as coisas de teste unitário. E ele tem um utilitário para teste unitário que eu sempre usei bastante, cara.

Spec Helper.

Isso aqui, ó, isso aqui é maravilhoso, cara.

Caramba, como é que eu vou mostrar isso aqui de uma forma mais simples para vocês?

Spec Helper. Então ele tem esse aqui, por exemplo, test ID selector. Eu uso isso aqui bastante em projetos, cara. Eu copio esse cara, que eu pego esse cara aqui, copio, e eu uso ele para mim fazer os meus testes unitários, que ele tem vários utilitários para mim usar no meu teste unitário. Então, por exemplo, em vez de eu fazer no Zard aqui, né, usar, a gente vai ter que fazer praticamente na mão, né? Em vez de eu ter que ficar fazendo isso aqui toda hora, document.querySelector, document.querySelector, zTestId, zTitle, ele cria, cara, vários utilitários para mim. Por exemplo, eu dou um findElement aqui, ó, e passo o meu componente e o testId que eu quero. E aí ele já faz isso aqui, ó, ele já faz lá o fixture debugElementQueryByCssSelector, e ele pega esse carinha aqui, ele pega o testIdSelector, então dá um dataTestId igual E aí ele vai e me dá vários utilitários para mim utilizar. Eu costumo usar bastante isso aqui, tá bom, nos meus testes unitários, quando eu não tô usando uma outra biblioteca. O Testing Library, por exemplo, ele dá alguns utilitários para gente, mas esse é um que eu uso bastante, tá. Então só dando uma dica para vocês. No nosso caso aqui, cara, por enquanto eu acho que a gente vai ter que fazer na mão mesmo, tá, porque a ideia dos hardwire, como a ideia da gente copiar o código do componente para dentro do projeto a gente vai acabar copiando o teste unitário, creio eu. E a gente não pode usar biblioteca externa para a gente fazer, então a gente tem que fazer tudo com o que o Angular oferece para gente, com as coisas mais simples e básicas que a gente pode, tá? Então aqui a gente já tem um dialogue que a gente está verificando pelo título, pela descrição.

Aqui eu coloquei uns data.testId para ele.

Content.

Vamos ver aqui se vai, se o content vai funcionar aqui também, cara.

Content element. Teste. Perfeito, meus amigos, tá funcionando. Então a parte do dialogue ele já tá mostrando, ele já tá, a gente já consegue testar, né, se o título tá sendo inserido corretamente, se a descrição tá sendo inserida corretamente.

Depois a gente pode pensar de uma forma de fazer isso aqui melhor. A gente pode tentar criar um utilitário, mas aqui a gente já tá verificando se o dialog tá sendo criado, se o dialog tem título, description, content. No caso aqui, a gente tá olhando o dialog mais simples, tá? Depois a gente vai ter que criar teste unitário mais complexos com todas as outras opções que a gente tem.

Agora vamos ver outra coisa aqui, ó, mano. Copilot é foda, mano. O Copilot é foda para caramba, velho. Meu Deus, mano, olha isso, velho. Should close. Eita, tem algum bug aqui, velho. Tá certo.

Então, should close the dialog when the cancel button is clicked.

Então eu abro o dialog Pego a instância do dialog, do um querySelector aqui, z-cancel-button. Então, data-test-id, que a gente tem que colocar, cara. Perfeito, cancel button. Perfeito.

Tô só botando que ele é um elemento button aqui, e se eu clicar nele, o cDialog tem que ser nulo.

Caramba, já passou, velho!

Olha que coisa linda! Então Tamo literalmente simulando. Agora vamos fazer um teste. Se eu clicar no botão de cancelar e eu não emitir esse carinha aqui e salvar o meu código, ele tem que dar erro.

É assim que a gente testa se o teste unitário tá funcionando.

Olha lá, should close the dialog when the cancel button is clicked. E a mesma coisa que acontece aqui, ó. No Service, não, no DialogRef.

Acho que é o DialogRef que tem um Close. Quando eu clico, cadê o meu trigger? Aqui, ó, cancel trigger. Então, se eu mexer em qualquer coisa aqui, ó, e por exemplo, em vez de ser o cancel, eu dar um OK, salvei, ele tem que dar erro.

Vamos ver. Não, não deu erro, porque não faz sentido, não tinha que dar erro mesmo não, porque de qualquer forma ele trigou aqui, ó, ele trigou no OK e no Cancel.

Aqui, se for um evento emite, no caso esses carinhas aqui, eu tenho um trigger.emit A questão é, se eu copiar isso aqui, deu erro.

Tá falando que ele tem que fechar o dialog quando eu clicar no meu botão de cancelar, e a mesma coisa quando eu clicar no meu botão de OK, certo?

E eu tenho que colocar um data-test ID, dizer OK button aqui. Eita, caramba, cancel button tá para cá, cara. Cadê, cadê, cadê? Aqui e aqui.

Perfeito.

E aqui, cara, o should close, close the dialog when clicking outside.

Esse aqui é doideira.

Quando eu clicar fora, simulate click outside the dialog, eu tenho que fechar o modal, cara. Que não funcionou, não, tá. Aqui é uma boa forma.

Fala, Ricardo!

Deixa eu dar um oi para vocês aqui que estão mandando aqui, ó.

Acabou de fazer uma pergunta: por que reinventar a roda? Já conhece o Spartan? Cara, eu falei disso mais cedo e a gente conhece o Spartan sim, só que a forma que o Spartan usa os componentes não é legal, cara. Ele trouxe muita forma de programar no React pro Angular, só que no Angular a gente programa de uma forma completamente diferente, cara. E aí, por exemplo, deixa eu só dar uma outra explicação aqui de novo, porque eu acho que você não tava aqui na live. Qualquer coisa você pode voltar lá mais tarde, mas eu consigo te dar uma explicação aqui. Eu já tô até com código dele aberto aqui, ó. Por exemplo, uma coisa que o Spartan faz, cara, que me deixa maluco. Isso aqui, ó, é o componente de dialogue dele. Então, para a gente fazer isso aqui, isso aqui é o componente que a gente tá criando hoje, tá, o dialogue. Então, para a gente fazer isso aqui, isso aqui, para quem tá vendo, tá ótimo, mas para quem tá codando, olha o que que a pessoa tem que importar, cara, na mão: brn-dialog-content-directive, todas as diretivas do dialogue. Tá. E aí tem diretiva que vem do Brain e tem diretiva que vem do Helm, que eu não entendi por que que o cara fez isso, tá. A gente tem que importar todas as diretivas de trigger, content, dialog component, content reader, footer, title, description. Alguém tem que importar o HTML label, HLM, helmet, label directive, input directive, button directive. E aí, para você criar o dialog, você tem que, além de importar todas essas diretivas aqui, você tem que colocar elas na mão aqui. Então eu tenho que importar o HTML dialog button, brn de brain dialog trigger. Então eu tenho, cara, que ficar sabendo e decorando isso aqui. Eu posso vir aqui copiar e colar? Posso, cara, mas a gente no dia a dia a gente não faz isso. Certo, então, mano, que desgreta de dialogue, cara. E aí, qual que é a nossa proposta, cara? A nossa proposta é trazer um dialogue da experiência de desenvolvimento do NG Zorro, cara, que é o quê? É isso aqui que eu tô fazendo, ó. O meu dialogue aqui é isso aqui, ó. Eu passo o título, a descrição eu tenho um componente que vai ser renderizado dentro dele, né? No nosso caso aqui, o nosso componente tá aqui em cima, é só um componente que tem um formulário. E isso aqui mais para frente tem aqui no canal, né, que eu já fiz um formulário dinâmico, que eu não fico fazendo isso aqui nos meus projetos. E eu passo, cara, se quiser passar alguma informação para o meu componente, eu passo um z-data aqui. E aqui eu tenho todos os eventos que tem. E aqui dentro do nz-ok, ó, eu tenho a instância do meu componente que eu consigo pegar o valor do formulário. Então, por exemplo, eu preciso fazer um modal para editar o perfil da pessoa, para ele passar o nome e username. Eu crio isso aqui no meu TypeScript, eu não preciso criar HTML para isso. Se provavelmente vai ser dinâmico meu formulário, eu passo informações do meu formulário. Quando ele clicar no OK, aqui eu salvo no banco de dados, mano. E aí, aqui, ó, esse mesmo código faz a mesma bosta que o Spartan faz na interface. Mesma coisinha. Se eu não passar essa data aqui, ó, ele vai criar um default lá que eu deixei ali.

Ele vai criar o Pedro Duarte, Pedro Duarte, entendeu?

Isso aqui é só uma forma da gente passar parâmetros para o nosso componente, tá vendo? Então, cara, respondendo a sua pergunta, por que reinventar a roda? Porque os cara cagaram no Spartan UI, cara. Literalmente isso. Eu, tipo assim, quando eu vi o Spartan, eu fiquei muito, muito empolgado. Quando eu entrei para dentro do código, eu falei, que merda! Vamos fazer um diferente. E aí, por isso que a gente tá fazendo. Deu azoado mesmo, ele separou em cérebro e capacete. Mano, eu não entendi por que que o cara fez isso, mano. Nunca vi, nunca vi ninguém programar em Angular desse jeito, cara. Por que que tem um cérebro, ele tem um capacete? Qual que é a diferença do cérebro para o capacete? Me diz. Cérebro é lógica e capacete visual. Para mim continua não fazendo sentido, cara. Que dia que eu vou ter que decorar qual que é cérebro e qual que é capacete, cara? Porque além do cara separar isso em código, ele separou na nomenclatura. O cérebro, ele tem BRN, que é de Brain Dialog Content Directive, e o capacete é helmet, HLM. E aí eu tenho que importar isso aqui. Imagina o caos que deve ser, cara. Eu tenho que ficar importando isso aqui toda hora. E não só importar, mas usar isso aqui, tá vendo? Usar isso aqui deve ser horrível, cara. Aí assim, caguei, cara. Aí a gente, eu e Luiz, a gente juntou, a gente chamou uma galera, comunidade anglo, abrimos para comunidade, fala, cara, vamos criar um usar UI, que é o, a proposta, né, é ser uma alternativa ao ChatGPT para Angular. E a nossa proposta é ter a beleza do ChatGPT com o poder do NG-SOUL, cara, abrindo para comunidade. A gente quer que seja a biblioteca criada por brasileiros, meu amigo.

É, realmente tem gente que usa isso, cara.

Só que eles ficaram, cara, eles estão, eles estão nesse projeto já muito tempo e agora que ele está saindo a ver uma Mas tipo assim, tem muitos anos, cara, deve ter uns 2, mas tem mais de 1 ano, cara, mais de 2 anos, se eu não me engano, que o cara tá desenvolvendo isso aqui. E agora que tá saindo a v1, usar UI, mano, a gente começou em março, abril, maio, junho, tem 3 meses e a gente já tem uma porrada de componente, mano. A gente já tem muita coisa, cara. Tamo longe de lançar v1? Tamo, cara, mas tem só 3 meses que a gente começou a biblioteca, mano. Tipo assim, tem muito pouco tempo, cara, que a gente começou e a gente já tem bastante coisa, sabe? Tem bastante coisa para a gente trabalhar aqui ainda, tem muita coisa para a gente desenvolver, mas a galera tem ajudado bastante. Então, respondendo a sua pergunta, por isso que a gente tá reinventando a roda, porque a roda que os cara fizeram para o ângulo não tava funcionando não. Foi uma roda quadrada que os malucos fizeram, cara. O cara fez uma roda quadrada. Voltando para o nosso dialogue aqui, cara, eu tenho que simular um clique no meu documento, cara.

New Mouse Click. Só que ele não tá funcionando. Ele tá falando que o Zdialog ainda existe. Deixa eu ver se tem alguma coisa relacionada a isso aqui, cara, porque ele demora um pouco mesmo para fechar. Não, o Zendaya, que não tá sendo fechado. A pergunta é, tá, eu só tenho que achar um jeito de clicar na tela, cara. Será que isso aqui vai? Também não. Deixa eu criar uma funçãozinha aqui para abrir o dialog.

Perfecto.

Só para a gente não ter que ficar copiando bastante coisa aqui. Isso aqui eu não preciso dela aqui, ela mente. Tá, esse aqui eu vou precisar agora. Esse aqui, mano, eu tenho que simular um clique fora do dialogue. Só que pensando em Tetsunetaro, eu quero saber se realmente tá funcionando, cara. Perfeito. Uma outra forma da gente clicar no CDK Overlay Backdrop. Ele tá achando, cara, tá achando CDK Overlay Backdrop.

Notch.

Deixa eu ver aqui. Tá certo.

A grande questão é por que que ele não tá fechando quando eu clico fora.

Ah, acho que eu já sei o que que é, mano. Vamos botar um browser animation. Ah, caramba, qual que é, cara? Ah, tela component, não. Tô achando que ele não tá fazendo animação, cara.

Porque, porque o nosso dialogue—

lembra que o nosso dialogueRef aqui, ó, ele só chama esse cara quando a animação já terminou, certo? E pensando em um teste unitário Que que é isso? Provation Animations, mano. Caramba, é config.

Até o em português aqui.

C'est gentil, c'est qui? Non, caramba, frère. Por que que não tá chamando aqui? Console.log. Vamos ver se tá chamando esse carinha aqui. Tá chamando. Edge Click, Outside, List, para todos. Tá chamando lindamente. Console, Darla container animation ended, setting up click outside listener. Olha lá, tá vendo? Ele não tá chegando aqui, ó. Aí, como que a gente faz? Angular Unit Test.

Cadê o nosso código?

A call animation aqui, ó. Será que se a gente importar o AnimationsModule vai funcionar, cara? Isso que eu tava tentando. Browser AnimationsModule. Ainda não chamou, cara. Eu preciso que ele chame aqui, cara, só isso aqui. Quando ele terminar a minha animação, console.log. Deixa eu ver isso aqui.

E é assim que a gente faz teste unitário, meus amigos, tomando erro na cara o tempo inteiro, só apanhando. A gente só apanha nessa merda aqui, velho.

Ai ai ai! Olha lá, get Native Element. Que que a gente pode mostrar aqui? Class List tá chegando aqui, pô. Só que por algum raio de motivo a animação não tá funcionando, velho. Por quê? Testing Animations Angular. Browser Animations Module. Deixa eu ver se eu tô importando no lugar certo. Isso é importante. Angular Platform Browser Animations, tá certo.

Tá certo.

Nope. Caramba, mano. Olha a treta, velho. É, meus amigos, olha lá, não vai dar, mano. Será que o nosso GPT consegue ajudar a gente?

Más, más.

E aí, cara, essa aqui vai ser um grande desafio. Container instance, aquele tá chegando, cara. A gente tá dando um AddEventListener para o AnimationEnd aqui, certo? Ah, já sei, já sei, já sei, já sei, já sei, já sei. Ah, já sei, já sei, já sei. Ele tá sem os plugins do Tailwind, mano.

Com certeza que é isso.

A gente precisa desse plugin do Tailwind aqui, ó, para fazer nosso teste unitário, cara. A gente precisa desse plugin do Tailwind porque sem ele o teu Wind não faz animação e consequentemente não chega lá. Vamos ver se é isso, cara. Ah, eu sei que a gente tem um project.json aqui. LibsArt teste project.json da web. Cómo que eu faço para adicionar No, ChatGPT não vai me ajudar não. Too bad.

I think that's style!

Preciso saber como é que eu adiciono o meu styles.css. Esse carinha aqui, ó, styles. Só que eu preciso adicionar ele no meu project.json. Não sei, cara, não sei como é que eu faço isso. Eu preciso de alguma forma botar.

Gente, vocês sabem de alguma forma fazer isso, cara?

Meu Deus, eu preciso fazer o Tailwind funcionar. Precisa fazer o teu Wind funcionar, cara. Só que é no meu teste unitário. Test options styles. Lá no meu ProcJSON. E eu tenho test options. Não, não tem styles aqui. Edge, Edge, SSS to test in environment Angular.

Não, cara, eu sei que tem como a gente passar alguma configuração, cara.

Eu sei, eu sei, eu só não tô sabendo como que eu faço isso. Tem o gesto config, tá? Caramba, será, será no teste setup? É um teste setup, é no teste setup. Import. Essa aí, esse, como é que eu vou importar isso aqui? Eita, caramba, onde que eu acho o styles? Styles, apps, web, src. Não tá aqui, mas é porque eu não vou conseguir importar o styles aqui, mano. É, cara, meus amigos, eu não sei como eu vou importar isso aqui. Aqui, cara, eu só preciso fazer minutos e horas.

Já tá dando o horário de ir embora.

Está, deve contar, adicionar o AngularJS dentro de teste, opções, teste setup. Esse aqui também não vai funcionar, cara.

Talvez a gente vai ter que dar o skip nesse teste aqui, cara, por enquanto.

Jest config, não, esse é CSS styles. Ele não vai importar esse aqui, cara.

Veremos.

Para o projeto, roda de novo. Não foi, não foi. Browser Animations Module, não foi, meus amigos.

Vamos ter que dar o skip nesse aqui, cara. Porque estamos com um grande probleminha aqui, que as animações— aí, isso aqui já é treta do Tailwind, mano.

Animações Tailwind, a gente precisa desse cara aqui, ó, desse Tailwind Animate, que é um plugin do Tailwind.

Então, sem isso aqui nem as animações, nem o projeto aqui, ó, vai funcionar.

Você vai ver, deixa eu mostrar para vocês, só para vocês entenderem o B.O.

que a gente tá tentando resolver aqui. Aqui, ó, cliquei, cliquei fora, não funciona. Por quê? Porque no nosso caso, como que a gente fez essa parte daqui, quando animação terminar, animação do meu componente terminou, eu adiciono um event listener para ficar escutando um clique fora do meu componente.

Como animação não tá terminando porque a gente não tá importando o TU-EngineAnimate, não funciona, entendeu?

E esse tá sendo o nosso problema aqui no teste unitário, tá?

Então, só para mostrar para vocês esse pequeno problema, que eu vou remover. Eu vou criar outro, shootclosed, one click. The x buttons clicked. Vamos só colocar nesse close button aqui, ah, data test ID.

The close, the matter.

Perfeito, beleza, show, meus amigos. Vamos só revisar aqui. Teu WinDev 4 não precisa desse animate porque você importa direto no Global CSS. Mano, não sei dizer, cara.

Não sou usuário de Tailwind, vocês que são, mano. Vocês que são usuários de Tailwind, cara. Por algum motivo essa porcaria não funcionou aqui sem, não, cara. Você viu? Tentei tirar aqui, não foi, mano. Não sei o que que é não. E a gente tá usando o Tailwind 4 já, se eu não me engano. Tá bom, mas só revisando então o que que a gente fez hoje, cara. A gente terminou de colocar todos os nossos componentes aqui, todos os nossos opções aqui. Então já tá praticamente tudo funcionando. A única coisa que tá faltando é o autofoco e o ícone, o tipo de confirmação de modal que a gente vai criar depois. Tá, então criamos algumas coisas aqui, mexemos algumas coisas no dialogue component aqui e já criamos alguns testes unitários, cara. A gente já criou teste unitário para o modal sendo criado, para quando a gente clicar, para a gente verificar, né, o título, a descrição e o conteúdo quando for simples como uma string. A gente tá verificando quando tá clicando no botão de fechar, quando tá clicando no botão de OK e quando tá clicando no botão de fechar lá no reader. Então a gente tá verificando isso e tendo certeza de que o dialog tá sendo fechado quando isso acontece. Então alguns testes unitários um pouco mais simples de um dialog simples. Depois o ideal seria a gente criar um outro teste aqui mais avançado, um teste host components mais avançado com opções do dialog mais avançadas para a gente ir testando cada uma delas. Tá, mas por enquanto, cara, as principais funções de um diálogo de sendo aberto e sendo fechado a gente já tá verificando. E se a gente fizer qualquer alteração do nosso código, porque para que que serve o teste unitário? Para quando a gente fizer refatoração no código, a gente ter certeza que tá tudo funcionando, certo? Para isso que vocês vão testar, né? Espero que sim. Mas aqui a gente sabe que já tá funcionando porque Quando, se eu vier aqui e comentar isso aqui, por exemplo, o teste unitário não deve funcionar. Quando eu clico no close, should close the dialog window, quando eu clico no cancel button, no OK button, não tá funcionando. Por quê? Porque eu mexi no meu código e agora eu tenho que, eu sei que tem algum problema que tá acontecendo, eu tenho que corrigir para É para isso que serve teste unitário, tá bom? Se vocês não sabiam, mas beleza, cara. Fechamos teste unitário. O componente de dialogue, cara, já tá praticamente pronto. A gente tem pouquíssimas coisas que a gente precisa corrigir. A gente colocou também a opção da gente enviar ele, enviar parâmetros para dentro, para ele, né, pelo nosso service com ZData. Então, cara, a gente já tem um diálogo funcionando. Eu já, eu já vou comitar todas essas alterações aqui.

Então deixa eu já colocar no commit aqui. Antes dela, o component, o data injection update, update documentation. English tests. Perfeito, guys.

Copilo. Estou também criando meu commit. Comitei. E verificar se não tem nada. Não tem.

Vou dar um sync aqui e já tá online, já tá lá no nosso componente aqui, ó.

Se vocês quiserem ver, se vocês quiserem olhar Depois eu vou ver se eu abro por request desse carinha aqui já, para galera já dar uma olhada para ver como é que tá funcionando. Mas live de hoje praticamente finalizamos o Dialog. A gente precisa sim criar teste unitário, mas alguns testes unitários a gente precisa