[Refazendo o shadcn para Angular] Criando o componente de modal do zero

com vocês. Eu acho que a gente tá online. Deixa eu mandar as mensagens nos grupos aqui avisando o pessoal. Como é que vocês estão? Quem tiver por aí já dá uma boa noite. Muito boa noite, muito boa noite! Tá chegando pessoal aí. Quem tiver por aí já manda um boa noite no chat para a gente ficar de olho. Buenas noites, mais um dia de live. Hoje a gente vai codar o componente de modal. Aí, ó, Pedro já tá por aí. Boa noite, meu amigo, você tá bom? Só mandando os links no grupo. Só para o pessoal já acessar. Show, show! Agora falta só um lugarzinho para compartilhar aqui. Show! Boa noite, boa noite, boa noite! Hoje eu vou fazer o componente de dialogue do zero, do completo absoluto zero. Vai ser bem legal, vai ser da hora. Show! Bora lá então, não vou perder muito tempo para a gente já ir direto para o que interessa. Deixa eu compartilhar minha tela aqui com vocês, um segundo. Compartilhar. Tela inteira aqui. Deixa eu fazer isso aqui. Show! Beleza, acho que vocês já estão vendo a tela aqui. Show! Antes de mais nada, eu quero só mostrar umas coisas que Luiz trabalhou e tá no ambiente de dev por enquanto, mas só para vocês verem um pouco da diferença, algumas atualizações. Uma delas foi a parte de código aqui, ó. Ele mexeu bastante nessa parte desse código que a gente tinha aqui de uma forma. Agora a gente tem a numeração, então mostra os números daqui. E agora a gente tem um tamanho máximo e tem um scroll tanto na horizontal quanto na vertical. Então antes a gente ficava assim, tinha esse código, ficava com código gigante aqui, e agora a gente tem um código mais simples. Outra coisa que ele adicionou foi uma etapa de instalação. Por enquanto a gente tem só a parte manual A gente tá trabalhando para ter uma instalação pela CLI, mas por enquanto tá só na parte manual. E essa parte do código. E a gente tem também, meus amigos, uma novidade, que é a parte da versão mobile aqui, que agora a gente tem o nosso menu que estava faltando. Então, na live passada a gente até chegou a comentar sobre isso, e agora a gente tem um menu no versão mobile aqui que já tá funcionando lindamente. Luiz é brabo, virou um dia trabalhando nisso aqui. O cara é maluco, velho. Lá na comunidade ele mandando as mensagens, falando com a gente de 1 hora da manhã. Ele tinha mensagem dele, 3 horas da manhã tinha mensagem dele, 6 horas da manhã tinha mensagem dele. 8 horas da manhã eu acordei falando, mano, vai dormir. Ele mandou mensagem, pior que eu não dormi ainda não, cara. Moleque brabo, maluco da cabeça. Mas agora a gente tem a versão o menu mobile. Então, para galera que acessa pelo celular já consegue ver certinho. E a gente tem essa parte aqui de componentização da documentação que tá ficando muito, muito boa. E hoje, meus amigos, a gente vai trabalhar no modal aqui nessa issue aqui. Tava com Henrique, eu já vou pegar aqui. Gente, eu vou fazer do zero, tá bom? Então, para esse, essa live aqui, eu acho que ela vai servir até para quem tiver. Deixa eu dar um zoom aqui que fica fácil para vocês verem também. Eu tenho que ficar de olho nisso aqui, cara. Deixa eu tirar por enquanto esse QR code daqui. Eu acho que fica de boa para vocês verem, tá? Deixa eu ver se tem mais alguma customização que eu consigo fazer aqui. Deixa aqui. Deixou. Só tô tentando ajeitar aqui para ficar fácil de vocês verem. Deixar no 100% e vou deixar aqui. Sim, perfeito. Show! Qualquer coisa vocês vão mandando aí, estiver difícil de enxergar, tá bom? Tá chegando mais uma galerinha por aqui. Quem tiver chegando, me dá uma boa noite para mim ver vocês aí, vocês conversarem comigo, tá bom? Para não ficar sozinho aqui. É minha segunda live, então é um pouco estranho ainda ficar falando aqui e ninguém, não ouvindo ninguém, né? A gente só fica estou aqui de olho no chat. Se vocês tiverem alguma dúvida, vocês podem me mandar uma mensagem por aqui no chat também, que aí eu paro aqui na hora da live, então dou uma olhada na mensagem, compartilha aqui, tiro dúvida de vocês, fechou? E qualquer coisa é só falar que eu vou estar sempre de olho aqui no chat, fechou, meus amigos? Então Eu vou trabalhar aqui. E o André tá por aí, ó. Boa noite, saudades, saudades também, mano. Você tá bom? Como é que estão as coisas por aí? Show, vamos lá. Então eu vou fazer do zero aqui, desde pegando uma issue aqui no GitHub. A gente vai criar a branch e a gente vai começar a codar, e eu vou mostrar o passo a passo, né, como que a gente contribui, qual que são as formas de contribuir aqui no projeto, como que a gente cria a documentação, como coloca o menu lá e tudo mais, tá? E vou estar sempre de olho aqui no que que tá acontecendo. Fechou? Deixa eu só preparar meu celular aqui. Beleza, fechou. Então, primeira coisa, cara, eu vou vir aqui no GitHub dos Arduai. Ele é público, tá, meus amigos? Não se esqueçam. Deixa eu mandar isso aqui no chat para vocês verem depois, se for necessário. Mas nosso GitHub, não se esqueça de chegar aqui no GitHub, tacar o botão aqui, ó, na estrelinha, para a gente crescer essa parte aqui também. Não se esqueça de você que tá no YouTube lançar o like, dá o seu like aí no vídeo. Para ajudar aqui também no canal. Então dá o seu star aqui. Aqui a gente tem as issues que a gente tem. Se quiser criar isso aqui, pode criar à vontade. A gente tem template para isso, tanto template de bug quanto um template de um novo componente. Fechou? Então, vindo aqui no do modal, eu vou tirar o Henrique aqui, colocar para mim. Eu já conversei com ele, ele falou que tá de boa, que ele tinha tentado pegar esse componente, fez algumas coisinhas, mas acabou que não conseguiu finalizar. Então eu vou pegar esse componente. E aí tem o nosso board aqui também, que eu vou pegar ele por aqui, ó, que eu sei que tá no modal aqui. Aqui já pegou para mim. E tem um confirm modal. Deixa eu voltar lá, que também tem esse confirm modal aqui que eu vou pegar para mim. Fechou, show! Tá com zoom bom aqui, né, para vocês verem. Beleza, então peguei aqui o componente de modal e a ideia aqui já tá em progress, então tá tudo certo. A ideia do modal, galera, é a gente usar a forma que o @ng-zorro usa de modal. Vou falar para vocês, cara, eu já programei em outras bibliotecas, eu já fiz outras, já trabalhei em outros projetos de Angular, mas, cara, nenhuma biblioteca de componentes Angular tem um modal tão completo quanto o do ng-zorro. E eu falo da experiência de você desenvolver o modal e tudo que você precisa fazer quando você tem um modal aberto. Então, no ng-zorro, quando a gente vem aqui em modal, existem várias formas. No ng-zorro, a documentação é até um pouco difícil. Eu lembro da gente, eu tentando explicar para o Henrique como é que funciona o modal, que quando ele viu aqui ele achou muito confuso. Então, por exemplo, tem a forma, tem como você criar um modal pelo HTML. Essa aqui para mim é a pior forma possível. Para mim isso aqui deveria nem existir, cara. Ficar criando um HTML toda vez você ter que criar um ng-modal e criar o HTML dele aqui todo completo e tudo mais, eu acho que isso aqui não é o ideal. Você criar isso aqui dentro do componente, se for ter que, se for criar um HTML, teria que criar um componente só para isso e colocar só HTML do componente, tá bom? Mas o ng-zorro Deixa eu dar um zoom aqui para ficar fácil para vocês verem também. Mas no NG-Zorro a gente tem um modal, cara, que é um modal de service. Isso aqui para mim é o ideal, e eu creio, e a ideia é do usar UI, é a gente juntar a beleza do ChatGPT com a experiência de desenvolvimento do NG-Zorro. Então a gente vai criar um modal dessa forma aqui, cara, onde a gente tem um service E a gente cria o modal dessa forma. Então a gente dá um this.modal.create e a gente passa o nz-title, o content, closeable, se ele é, se ele vai poder ser fechado, né? E a gente tem aqui, ó, as ações. Então quando eu abro o modal do NG Zorro, vamos criar aqui, ó, eu tenho um OK e um Cancel. Ele já cria para mim o header se eu passar o título. Se eu não passar, ele não vai colocar o header. E se eu passar o OK e tudo mais, ele já cria a parte de baixo aqui para quando eu clicar em OK, ele vai chamar essa função aqui, ó, e ele vai fazer exatamente isso aqui, cara. Isso aqui é muito bom de trabalhar dessa forma, cara. Isso aqui é uma maravilha, isso aqui é uma mão na roda. E, cara, o modal dele tem muitas, muitas, muitas opções. Então você consegue customizar o texto do OK, você consegue falar se OK Aqui na API, né, a gente tem tudo que a gente tem nesse modal. Então aqui, por exemplo, a gente tem um nz-on-ok, a gente tem um nz-on-cancel, quando ele clicar em cancelar. A gente tem um nz-width, visible, title, close-icon, o estilo nz-ok-danger, se a gente quer colocar esse botão de OK como um botão vermelho, como se fosse de perigo, né. O tipo do botão do OK, o texto dele. Cara, tem muita, muita, muita, muita coisa que a gente tem e a gente vai fazer algo bem parecido com isso. Show! A gente consegue também passar variáveis, né? A gente consegue passar valores para o modal do serviço. Então isso é uma outra coisa bem legal que quando Porque a ideia, né, quando a gente for criar um modal e a gente passar no content, em vez de passar uma string, a gente vai passar um componente. Então a gente vai fazer também um service que a gente vai receber tanto uma string, se a gente quiser passar, quanto um componente. Então normalmente, né, eu crio todos os meus modais assim lá do Ministério dessa forma: eu passo o título e eu passo o componente. E aí, para customizar e para ficar mais fácil ainda, eu tenho um componente que é um DynamicDialog. Que basicamente eu vou passar como parâmetro para ele o meu formulário. Aqui no canal eu tenho um vídeo ensinando a fazer um formulário dinâmico. Então eu passo para ele o objeto do meu formulário dinâmico, e quando eu abro o modal de formulário, ele já abre esse modal que eu só passo o DynamicDialog aqui e o formulário dinâmico, que eu já tenho um modal de formulário para mim pegar essas informações. Gente, é uma mão na roda, é a coisa mais maravilhosa do mundo programada desse jeito. Gente, é muito fácil, vocês vão ver isso na prática, como que a gente vai fazer isso. Fechou? Então, explicando um pouco da ideia do modal, como que a gente vai fazer isso. Vamos lá, então deixa eu abrir o nosso projeto aqui. Eu vou dar um zoom, bastante zoom aqui para vocês conseguirem ver. Peraí, aqui, beleza. Deixa eu só me achar aqui onde eu tô para mim ver aqui. Show! Que eu vou diminuir. npm start. Então eu já tô no projeto, é que eu tô na feature do command. Então eu vou abrir a alpha. Então só lembrando uma coisa, cara, deixa eu cancelar minhas coisas aqui. Eu tô no do command. Deixa eu desfazer todas as minhas alterações. Isso aqui foi da live passada. Eu vou abrir a alpha. Por quê? Porque a gente, por enquanto, a gente tá trabalhando como só na alpha como base, não na master. Então quando eu for criar alguma coisa nova, eu crio daqui. E aí, primeira coisa, cara, para mim criar uma branch, eu vou vir aqui na minha issue. Vou abrir aqui e vou pegar o ID dela. Então eu vou criar uma nova branch, create new branch, feature-10-modal. Então basicamente é uma das formas que a gente está criando aqui. Algumas pessoas estão criando com hashtag, acho que não tem muita diferença, tá? Então feature-10-modal, 10 o ID da issue, para a gente já, já linkar essa branch Lá, beleza, branch criada. A gente já tá com um projeto rodando aqui, então eu vou vir aqui dar um localhost:4200. Beleza, tá rodando aqui na alpha. A gente tem aqui o modal no menu, só que ele ainda não tá funcionando, e a gente vai criar ele aqui. Então primeira coisa é criar aqui em libs src/zard, src/lib/components. Aqui a gente tem todos os nossos componentes. Então vamos aqui, new folder, modal. Ah, só um detalhe, deixa eu vir aqui no ChatCN e aqui eu vou dar um Ctrl+C, dialogue, dialogue. Então eles chamam de dialogue, não tem problema. Então eu vou chamar de dialogue também para não confundir. A gente fala modal, mas a gente pode falar modal, dialogue, tanto faz, não tem problema, é tudo a mesma coisa. Se vocês tiverem com alguma dúvida, mandem aí no chat, meus amigos. Se ele dá um boa noite, falar só um oi para mim saber que vocês estão por aí, tá bom? Mas aqui, ó, do chat, CN, cara, ele tem essa estrutura. Então a gente vai tentar deixar o máximo possível dessa, com essa UI, o dialog, tá? Deixa eu vir aqui os exemplos. Então vou tentar deixar algo bem parecido com isso aqui. A gente vai criar do zero. Talvez hoje a gente não consiga criar tudo, então a gente na próxima live a gente continua a criação desse dialogue aqui, fechou. Mas eu vou deixar aqui aberto só para mim ter como referência tudo que tá acontecendo. ChatCN, outra coisa que eu faço, cara, é entrar no GitHub do ChatCN. Então aqui, ó, quando a gente vem aqui no GitHub, a gente tem UI, apps, www, register, default, UI. E dentro dessa pasta UI a gente tem todos os componentes do ChatCN. Como é open source, a gente pode vir aqui e ver como que funciona. E eu vou usar isso aqui também para pegar as classes do CSS, das classes do Tailwind, para a gente usar lá no nosso dialog, tá bom? Então aqui a gente tem várias classes, então aqui é o dialog-overlay, dialog-content, dialog-header, footer, title, description. E eu acho que é isso. Ele tem várias coisas aqui e é isso. Então a gente vai usar isso aqui como referência também, tá? Fechou. Então a gente tem o nosso dialogue aqui já de uma vez. Então vamos começar criando. Os nossos componentes aqui. O primeiro componente que a gente, primeira coisa que a gente vai ter, né, é um dialog component. Então aqui eu tenho uma extensão do NX, e quando eu venho aqui, ó, eu aperto com o botão direito, NX Generate UI, Schematics, Angular Component. Então schematics/angular Component. Aí ele me abre uma opção para mim colocar o nome. Eu vou chamar só de dialogue. Dialogue. Eu vou setar, eu vou querer usar SCSS. Talvez a gente vai excluir algumas coisas aqui depois, tá? Mas eu não vejo problema. Standalone. Eu clico em Generate e aqui ele já vai gerar tudo aqui para mim. Ele gerou uma pasta separada e eu vou remover essa pasta aqui. Fechou. Então aqui eu já tenho um dialog component, eu já tenho um componente de teste dele e eu já tenho um HTML que já tá funcionando aqui. A gente vai seguir a mesma estrutura que a gente segue aqui. Então eu vou criar um dialog variantes .ts, porque todos os nossos outros componentes, né, como a gente disse, a gente tá usando essas variantes aqui para a gente trabalhar. A gente também vai ter um dialog.service.ts, beleza? ng— ng-s. Quando a gente coloca isso aqui, a gente tem essa maravilha aqui que vai chamar dialog. Service, só que vai chamar ZardDialogService. Aqui vai ser o ZardDialogComponent. Beleza, essa estrutura que a gente tá usando, tá bom? Então, ZardButtonComponent, ZardDialogComponent. É, beleza. Então aqui eu tenho um seletor que vai ser o z-dialog. Eu tenho export as z-dialog. Eu vou às vezes olhar para cá, porque, porque eu vou copiar muitas coisas que eu já fiz uma vez esse componente de dialog na mão. Então eu já tenho muito código pronto dessa parte do dialog. Tá? Então pode ser que eu olho para cá às vezes para mim pegar e copiar um código, pegar algumas coisas para a gente colar aqui, tá bom? Então como eu já fiz isso uma vez, vai ficar um pouco mais fácil da gente desenvolver. O Lucas chegou aí, ó. Salve, salve, boa noite! Valeu, meu amigo! Você devia estar dormindo uma hora dessa, cara. Vai dormir, seu fuso horário. Eu acho que ele mora lá em Portugal, né, mano? Fuso horário do cara é umas 4, 5 horas à frente do nosso. São 8 horas aqui, tá de madrugada lá, mas valeu, mano, chegar na live aí, fechou? Tamo junto. Então temos algumas coisas aqui, a gente vai já mudar o change detection para ser um push, para a gente trabalhar bem aqui. Então a gente vai ter Deixa eu excluir esse CSS daqui. Aqui eu vou excluir também. Se a gente precisar, a gente cria. A gente tem que ter o teste, a gente vai ter o dialog service. É outra coisinha, a gente vai precisar de um dialog ref e uma interface. Para esse dialogue. Agora deixa eu ver aqui uma coisinha, se a gente tá criando algumas coisas aqui em outros, deixa eu ver o tooltip, tem um tooltip_positions.ts, beleza, tooltip_variants. Então aqui eu vou criar um dialogue_ref.ts Isso aqui vocês vão entender depois para que que vai servir esse carinha aqui. Mas basicamente é que quando a gente cria no ng-zorro um dialogue, deixa eu mostrar aqui para vocês, modal service. Mas quando a gente cria no ng-zorro um modal e a gente dá um create aqui, ó, a gente retorna a referência desse modal. Eu acho que aqui ele não tem, aqui, ó, perfeito. Então, quando a gente dá um create, a gente retorna a referência desse modal. Por quê? Porque com essa referência a gente vai conseguir trabalhar com algumas operações que acontecerem, né? Então, por exemplo, a gente vai ter um evento quando esse modal abrir, abrir, e a gente vai ter um evento quando esse modal fechar. Então eu consigo trabalhar dentro dessas operações quando a gente tiver que fazer alguma ação, quando o modal abrir ou quando o modal fechar. Uma coisa que eu faço muito no Ministério, cara, deixa eu abrir aqui o Ministério para vocês verem, é que, por exemplo, toda vez que a gente precisa criar alguma coisa, eu inicio o modal com o botão desabilitado e eu só habilito ele quando o formulário dentro desse modal tá válido. E eu faço isso com esse ref aqui. Então eu crio, eu dou um subscribe, eu pego a instância do meu componente, né, dou um subscribe no value changes do dialog, e quando ele tiver válido eu habilito o botão. Então, por exemplo, aqui ele tá desabilitado, mas quando eu preencher o formulário direitinho, teste, e quando eu vim aqui ele habilita. Então é dessa forma, cara. Isso aqui, isso aqui é maravilhoso de fazer isso. E eu faço isso ainda de forma dinâmica, tá bom? Então no meu DynamicDialog lá eu tenho um código que eu não preciso ficar fazendo isso em uma hora, não precisa nem fazer isso aqui, ó. Quando eu crio modal e passo DynamicDialog lá, eu já pego a instância lá dentro do do componente. Lucas mandou um boa noite também. Boa noite, meus amigos! Boa noite, meu amigo Lucas, tudo bem? Estamos criando aqui o componente de modal do Shadow dos Arduai, dos Arduai. Fechou, então beleza. Então a gente vai ter um dialog ref e a gente vai ter também, cara, uma interface. Agora eu tô só pensando aonde que eu vou colocar essa interface aqui, se vai ser um código a mais ou se eu vou lançar ele aqui dentro aqui para a gente não ter muito arquivo, cara. Uma das diferenças do React, né, é que eles botam tudo no arquivo só, cara. Então para o ChatGPT acaba que fica mais fácil, né, porque o ChatGPT ele pega esse arquivo aqui, copia para o seu código, então ele copia só um arquivo. O nosso caso, né, dos hardwares, a gente vai copiar essa pasta aqui para o projeto de quem tiver utilizando o projeto, e acaba que a gente vai acabar colocando muita, muita coisa aqui dentro do projeto. Então quanto menos arquivos a gente tiver aqui, é melhor. Então, por exemplo, no tooltip a gente copia só esses arquivinhos aqui. Então tem um tooltip, tem as variantes. Aqui a gente preferiu deixar no arquivo separado para ficar mais fácil de trabalhar. E as posições desse tooltip, tá bom? Então é por isso que eu tenho um dos meus medos é ficar criando muitos arquivos aqui. Mas por enquanto vamos só criar aqui, ó, export interface ZardDialogOptions. Beleza. Falando aqui, ó, não pode ser zero, eu tenho que criar alguma opção aqui, né? Então uma das opções que a gente vai ter é o z-title, beleza? A gente vai ter um z-title, eita, Giovana, dá aqui, ó, então z-content. Aí aqui ele vai ser uma string ou um template ref, ou um template ref, só que aqui a gente vai ter um T porque isso aqui vai ser dinâmico, tá bom? Então template ref de T. Ou um type de— deixa eu ver se é isso aqui mesmo. Aqui eu tenho que fechar, né, senão não vai funcionar. Beleza, perfeito. Esse type aqui, cara, ele vai vir como se fosse um componente, tá bom? Então eu posso passar um componente também que ele vai funcionar. Eu tenho z-widget, vai ser uma opção. Eu tenho um z-ok-text, que vai ser o texto do botão de OK. Eu tenho um z-ok-icon, caso eu queira customizar o ícone. Ou colocar um ícone no botão de OK. Eu tenho o Z OK aqui. Por enquanto eu não vou colocar o Danger não, porque eu acho que a gente até tá usando uma outra nomenclatura, não é Danger no ChatCN, a gente usa outro nome, cara, que eu esqueci. Destructive. OK, destructive, perfeito. Eu vou ter também, e aí é que eu vou ter um Z1, OK, OK, event emitter de um T ou Deixa eu pegar esse código aqui, copiar. onClickCallback recebe, é que é só para a gente ter aquele callback também. Deixa eu ver aqui, deixa eu ver aqui, deixa eu ver aqui. Que que ele tá reclamando? Deixa eu ver se eu esqueci de alguma coisa. Não, né? É porque eu tô criando como uma interface. Como a gente vai usar Detalhe, né, como a gente vai usar isso aqui. Object, perfeito. Como a gente vai usar isso aqui, a gente precisa de uma classe, tá bom? Então, z-ok, e a gente vai ter o z-cancel-text, z-cancel-icon e z-on-cancel. Perfeito, por enquanto a gente pode deixar assim. Deixa eu dar uma olhadinha aqui, NG-Zorro. Outra coisa que a gente pode fazer, cara, é vir aqui no NG-Zorro também, cara, é open source. Então eu vou vir aqui no modal e eu vou ver como é que funciona aqui, ó, modal config. Não, não é esse arquivo. Modal types aqui, ó. Nossa Senhora, olha isso aqui, gente! Quando eu falo que o modal do NG-SOUL é foda, velho, vocês não acreditam, cara. Olha o tanto de opção que tem para colocar no modal, cara, só para criar um modal, cara. Então ele tem um nz-center aqui, se o modal vai ser no centro. Se ele vai ser z-closable, tá, z-ok-disable. Então z-ok-disable, perfeito. Você quer, bem importante, z-draggable, z-no-animation, z-autofocus, z-mask. Por enquanto a gente não precisa criar tudo isso aqui não, tá. Depois, quando a gente sentir necessidade, a gente cria. Eita, Giovana! Deixa eu fechar isso aqui. Não sei o que que ele tirou aqui, velho. Espera, aqui, pronto. Até que tava, tá beleza. Z-mask, Z-index, Z-keyboard, Z-width a gente colocou, close icon, OK type a gente não precisa por enquanto, OK danger. O Hakawan aí, ó, caramba, mano! E aí, você tá bom? Esse eu já trampei com ele, cara, é bom, menina é brabo, brabo do ângulo também, sabe muito. Seja bem-vindo, mano! Tô criando aqui o modal, o modal do zero. Seria legal um z-autofocus para acessibilidade. Perfeito, mano, esse aqui é importante também. Aqui eu sei que ele tem, ele tem um OK, um cancel, um alto ou nulo, e por default ele é alto. Então já vamos botar um z-autofocus aqui, cara. Uma coisa que eu tenho muito toque em código que vocês podem perceber que tá tudo bagunçado. Normalmente, cara, eu dou um Sort Lines Ascending aqui, ó. Que que eu fiz aqui, ó? Selecionei Ctrl+P, Ctrl+Shift+P, Sort Lines Ascending, para deixar eles em ordem crescente. É só um toque que eu tenho, cara, literalmente um toque que eu tenho. Variáveis assim, coisas grandes assim, tá bom. Aí salvei aqui. Então a gente já tem uns autofocus, eu cancelo. Z data, esse aqui é muito importante, cara. Então aqui ele vai vir, que é o Z data, que é no caso é D que ele tem, porque aqui ele passou, putz, aqui ele tem um T, um D e um R. Olha que maravilha, é que eles atualizaram bastante coisa. E mano, o ng-zorro tem isso aqui, o Gleison que ficou maluco, cara. Ai, cara, os cara do safe N, o ng-zorro, cara, ele tem o nz-safe-n. Que que é isso aqui, cara? É isso aqui, ó, export type nz-safe-n é um N. É só para não— isso aqui é só para o TypeScript não dar um warning aqui para um N. Então ele cria um tipo N para ele dar um nz-safe-n, para ele ficar safe de colocar um N nas coisas aqui, cara. Isso aqui é maravilhoso, mano. Isso aqui é muito bom, cara. É muito engraçado. Vou tentar não fazer isso aqui, cara, até onde der, tá bom? Que você quer loucura. Mas vamos lá, usar data, body style, wrap class name, class name, Z style, Z title, Z footer. Z-footer é bem importante caso a gente não queira usar o footer. Então, bcd, e, f, z-footer. Então, string template ref, um array modal button options. Isso aqui provavelmente é quando a gente precisa passar, né, a gente passa um array de botões, mas ele pode ser um template ref. Mas aqui vai ser um objeto vazio, não vai ser do tipo— uma formiga subiu aqui em mim. Por enquanto assim. Modal array buttons, que que é isso aqui, cara? Um modal de arrays é o tipo do array que eu tenho aqui. Modal options, o tipo do botão que eu quero colocar no meu footer, tá bom, ou nulo. Perfeito. Ah, o z-content a gente já colocou aqui. Z-content, tipo, z-close ou navigation. Iniciar view container ref, não sei se a gente vai precisar. Quando eu criei o meu, eu coloquei isso também. Container ref, eu acho que a gente vai precisar algum momento. After open e after close, isso aqui é muito importante, cara. ZAfterOpen, zAfterClose. Então aqui é só um event emitter do tipo void e do tipo R. Cara, não sei o que que é o R aqui, cara. Esse aqui a gente vai ter que descobrir depois. Isso aqui é para o confirm. OK, type in the direction. Tem play to use only, então a gente não precisa. Eita, Giovanna, eu acho que a minha câmera desligou. Pera aí, meus amigos, um segundinho. Show! Tô de volta. Então a gente não precisa desse carinha aqui, é só o template only. A gente não vai usar o template, tá bom? Mas beleza, eu acho que com isso aqui a gente já consegue criar bastante coisa do modal, tá? Então a gente vai ter um autofocus, a gente vai ter um cancel icon, cancel text, exer content, a data, qualquer informação que a gente quiser passar para o nosso componente. Um footer que vai receber uma string, um template ref, um tipo ou nulo. O botão de OK, então ele pode ser destructive, se ele vai ser vermelho, se ele vai estar desabilitado, o ícone dele, o texto e o OK, um cancel e um OK. Beleza, o título e o widget. Deixa eu só ver se o título aqui é o título. Ele também pode ser um template ref. O template ref type T, não quero passar um, tá? Por enquanto vamos deixar assim. Beleza, que a gente não vai criar. Conforme eu ver que a gente tá precisando criar algumas coisas aqui. Eu vou mostrando para vocês, cara. Aqui eu vou colocar isso aqui porque o nosso modais também, também vão aceitar ser que— lembra que eu aqui na issue a gente tem uma issue de modal e a gente tem uma issue de confirm modal? No ng-zorro a gente consegue fazer isso numa sacada só. Olha que legal! Quando a gente vem aqui, ó, confirmation modal, a gente tem todos esses tipos aqui, ó. Info, success, ele já vem com ícone aqui, ó, com título, a descrição e as mensagens. E olha que coisa mais linda, para criar é só fazer isso aqui, ó, this.modal.info, título, conteúdo, nz1, ok. Gente, isso aqui é a coisa mais linda do mundo, cara. E pensar que o pessoal fica criando, talvez vocês continuem fazendo, vocês fazem isso lá com seu Angular Material, aquela biblioteca maravilhosa que vocês amam, mas vocês têm que criar só para fazer um OK desse, só para fazer isso aqui, é uma informação, você tem que criar um componente para isso ou criar um template, fazer toda uma gambiarra só para fazer uma bagaça dessa, cara. Eu não sei como que é no ChatCN, cara. Confirme, alguém sabe, cara, como é que funciona isso aqui no ChatCN? Se a gente tem um componente para isso. ChatCN, confirme modal, confirme dialog, alert, dialog. Isso aqui, cara, perfeito. Caramba, uma bela documentação, só um exemplo. É isso aqui, ó, esse modal aqui. Só que aqui, olha que maravilha, o tanto de coisa você tem que fazer. Se for no Spartan, alert dialog, que alert dialog, delete account. Ai, que maravilha! Olha isso aqui, gente, Spartan é lindo demais, né? Deixa eu dar zoom aqui para vocês verem direito. Essa maravilha desse, dessa biblioteca, meus amigos. Vê, um tá vindo aí. Expect more announcement in the coming weeks. Vê, um, os meus, by our partners. Eles acharam um partners aqui, ó. Caramba, acharam alguém para apoiar. Se alguém quiser apoiar o Zard White também, a gente tá Tá em busca, tá bom. Mas olha, gente, isso aqui para mim não existe não, cara. Você criar um dialogue para você fazer isso aqui, ó, isso aqui, ó, isso aqui. Olha o tanto de import e olha o tanto de código. Você importa tudo isso aqui, depois você importa tudo isso aqui, e depois você faz tudo isso aqui no Zorro. Tcharam! 3 linhas de código. 1, 2, 3, 4, 5. 5 linhas de código. A única coisa que você precisa fazer no Zorro é isso aqui para você fazer a mesma coisa que o Spartan tá fazendo com um troço, um milhão de linhas de código. Isso aqui não existe, mano. Isso aqui devia ser banido da comunidade Angular, cara. Mas a gente vai fazer algo parecido com isso aqui. Tá bom, então por isso que a gente tá criando esse z-icon-type aqui. Beleza, então só vou deixar aqui um confirm, porque o Njesor também colocou isso aqui. Beleza, então a gente já criou o tipo aqui do modal, né. Agora deixa eu dar uma olhada aqui, ó. Vamos, a gente tem o service Beleza, deixa eu ver qual que eu vou criar aqui primeiro, cara. A gente tem um componente com as coisas. Lucas tá perguntando, deixa eu chegar na live aqui, ó. Deixa eu botar minha carinha aqui, parar de compartilhar minha tela um pouco. E o Lucas mandou aqui, ó, já ouviu falar no Taiga UI? Mano, nunca ouvi falar, cara. Deixa eu dar uma pesquisada aqui. Vamos voltar para cá. Tiger Y, o que que é isso aqui? Pera, tô perdido. Tiger, pois, full set of pensas components for Angular, scroll, dozen of components, open source. Beleza, só isso aqui. Esse aqui ele é de peixe, tá bom. Nged Tiger NX aqui, está o Libraries, componentes, avatar. Deixa eu tirar do— pronto, dá um zoom aqui para vocês verem. Vamos ver aqui, ó, botões. Buttons. Nunca tinha ouvido falar desse aqui não, cara. Vamos ver aqui já para tirar a dúvida. Service, como é que é? Lança no provider. Vamos ver aqui o modal, como é que é. Preview, já abre aqui, já fecha aqui. Dialog with directive, component dialog. A gente tem um TypeScript dialog, dá Subscribe, mano. Ai, meu coração. Então subscribe. Será que ele fecha esse subscribe aqui quando ele termina? Read-only dialog, TUI dialog, dialog example. A gente pega o dialog aqui, cara. Nunca tinha ouvido falar desse aqui não, mano. Show dialog. Aí aqui o dialog example. E a gente consegue pegar aqui, injeta o dialog service, usa pelo service também, e o dialog template. Show! Tooltip tem? Toggle titles, tooltip não tem tooltip, ué? Tiger UI layout, header, form. Como é que é o form daqui? Vamos até os acessórios aqui. Show, mano! Esse aqui eu nunca tinha ouvido falar, cara. Nunca vi ninguém utilizando. Legalzinho, show! Vamos voltar aqui então. Então criamos o DialogComponent, a gente tem um componente aqui. Eu, deixa eu pensar o que que eu vou criar aqui primeiro. Para vocês verem como é que funciona. Para mim criar o service, eu preciso do componente. Eu vou criar o componente aqui para a gente ver, para a gente ver isso aqui funcionando. Então vamos, vamos para parte do componente aqui para mim ter pelo menos alguma coisa para mim mostrar. Galera, se estiverem alguma dúvida Manda aí, tá bom? Qualquer dúvida, qualquer coisa que vocês quiserem mandar aí, pode mandar que eu tô de olho no chat aqui. Beleza, então para o componente, cara, a gente vai fazer algumas coisas. Eu sei que aqui, cadê o chat.cn? Chat.cn dialog, a gente vai precisar, vamos voltar aqui no componente. Aqui eu já tenho esse carinha. A gente vai precisar de um header, depois a gente tem um body e depois o footer. Ok, e esse componente ele vai estar dentro de alguma outra coisa. No ChatCN a gente tem um dialog aqui. Eu não sei se eu vou separar isso aqui depois em componentes, mas por enquanto a gente vai deixar aqui dentro, tudo dentro de um lugar só, tá bom? Então a gente vai dar uma div aqui, a gente vai ter um header, a gente vai ter um main e a gente vai ter um footer. A base do componente é essa. E aí com isso aqui a gente vai customizar algumas coisas. Por enquanto eu vou arrancar isso aqui daqui, porque a base do componente, como a gente tá fazendo em todos os outros, a gente vai usar assim pela variante e a gente vai fazer aqui no host, tá bom? Então aqui eu vou criar um host que vai ter essas classes ali. E aqui eu vou vir e vou criar a minha variante do componente. Eu vou copiar tudo aqui, ó, Zard Badge, e que eu vou criar, deixa eu, dialog, e os que estão em minúsculo dialogue. Perfeito. Deixa eu tirar isso aqui daqui, tá? Dialogue variantes. Beleza. A variante principal do nosso dialogue, eu vou vir aqui agora, é achar aqui qual que é, cara, se é o content ou se é o over. Aqui a gente vai descobrir, cara. Vou ver aí, que eu sei que não é. Já tem um bg-black aqui, ó. Que é o que fica mais— isso aqui a gente vai usar outra coisa, é o Content. Perfeito. Então eu vou vir aqui, caramba, é bastante coisa aqui, ó. Eu pego isso aqui, coloco aqui, salvo as minhas variantes, cara, do meu modal. E eu vou ter que pensar aqui direito se eu vou ter alguma variante aqui dentro, mas por enquanto eu vou tirar, vou deixar somente essa parte aqui, tá? Então aqui tem um bad variant e que o componente eu vou fazer isso aqui, ó. E vou colar aqui. Eu vou tirar as minhas variantes daqui, vou tirar essa classe daqui, dialogueVariants, e eu vou dar um all aqui. Beleza. Então, o que que isso aqui já vai fazer, cara? Isso aqui, toda vez que eu criar um z-dialog, ele já vai colocar no root do meu component, no host do meu component, essas classes. Então, na div do meu componente, ele já vai colocar essas classes aqui, tá bom? Ele já vai criar o meu modal para mim. Beleza, aqui ele já tem algumas coisas. O header Ele tem isso aqui, eita, que eu já vou lançar um class. O footer, a mesma coisa. Aqui ele tem um dialog-content, title, description, content. Porque o modal é assim, tá? Então, mas não, pera aí, aqui ele tem um dialog, ele trigger dialog content reader, e aí é que ele passa o que ele quer aqui dentro. Que estranho. Então, title Description. Salve, nobre Daniel, cara! O brabo aí, ó, o cara que joga Airsoft. Show! E aí, mano, como é que você tá? Tranquilo? Salve! Tô aqui criando meu componente de dialogue aqui. Então a gente tem aqui, tem essas coisas aqui. Deixa eu ver meu componente aqui, cara. Main tá aqui, cara. Eu vou fazer isso aqui, ó, nesse main. E aí que eu já vou passar aqui. Eu copiei o código, cara, mas Basicamente, fsz-title1-content, e aqui vai ser o config, isso aqui, z-title. E aqui a mesma coisa. E aí, para isso eu tenho que criar o meu config aqui, né? Isso aqui é importante. Cadê o meu config? Meu config aqui vai ser um dialog options. Então vou dar um protect config e ele vai ser dos AddDialogOptions. Perfeito. Uma coisa que eu fiz aqui Foi estender do Base Portal Outlet, e para isso eu preciso criar o meu construtor e dar um super nele. Beleza, isso mesmo, tá. Aqui tá falando que ele não tem nenhum inicializador. Aqui eu vou implementar umas classes abstratas. Desse portal Outlet, tá? Aqui eu já tenho, e eu tenho o meu portal Outlet também. Onde que ele tá? Aqui, ó, Field Child. Cara, isso aqui ele vai trabalhar aqui, ó, vai ter aqui, a gente vai usar isso aqui caso a gente precise no modal. Beleza, se ele tiver um componente aqui, a gente vai instanciar ele aqui dentro do modal do Portal Outlet. Z title on content. Deixa eu entender o que que é isso aqui, cara. Eu acabei não criando esse carinha aqui, ó. Z title on content. Z-title, content, config. Deixa eu passar isso aqui. Z-title, Z-content. Content. Perfeito. Aqui, ó, aqui que eu vou te responder, o Daniel, no segundinho aqui. Deixa só terminar essa parada aqui. Exist string on content. Vou subir isso aqui para cá, vou fazer isso aqui. Exist string content. Thank you. Beleza, perfeito. Então, caso o nosso modal, cara, eu queira passar para ele, cara, não sei nem se isso tem no NG-SOAR, cara, mas eu acho que quando eu fiz isso aqui é quando eu queria passar. Deixa eu ver uma coisinha aqui, cara, se o Python content, cara. Acho que a gente não precisa disso, cara. Acho que eu fiz isso na época no projeto, mas eu acho que a gente não precisa disso aqui. Depois a gente tenta tirar, tá bom? Mas não vejo problema por enquanto não. Style.content. Beleza, então tô no meu componente. Deixa eu só voltar aqui, mas deixa eu falar aqui sobre essa perguntinha aqui, ó. Angular não é JS também? O ChatCN não funcionou para ele não, cara? Infelizmente não, mano, porque o ChatCN ele Basicamente, qual que é a ideia do ChatCn, cara? Quando você vai instalar esse abençoado, você tem os frameworks, então ele funciona para vários frameworks, só que para Angular não. Por quê? Porque ele copia, cara, os componentes, o código dos componentes. Então basicamente ele vai criar uma pasta no nosso projeto e copiar, por exemplo, se eu quiser usar o card, ele vai copiar o card.tsx. E o código é totalmente React, cara. Então ele vai copiar esse código aqui para dentro do meu projeto. E tipo assim, eu não vou conseguir usar esse código em um projeto Angular, porque a forma da gente trabalhar no Angular é bem diferente da forma que a gente trabalha com React. No React a gente tem um arquivo.tsx que vai ter o HTML, CSS, tá, JavaScript, tudo no mesmo arquivo, cara. Isso aqui para mim é loucura. Quem programa que isso aqui tem? Tem que ser maluco, mano, trabalhar tudo no mesmo arquivo, cara. No Angular a gente trabalha já com arquivos diferentes, a gente tem outras formas de abrir um modal, a gente tem outras formas de trabalhar no Angular. Então quando a gente, muitos devs Angular, a gente gosta muito do ChatCN, a gente sabe que o ChatCN ele é muito bom. E aí o objetivo dos Arduae é a gente ter um ChatCN para Angular, cara. Então, respondendo a sua pergunta, ele não funciona para o Angular, por mais que seja tudo JS no final. A forma de desenvolver é bem diferente, mano, bem diferente. Eu percebi que agora que eu tava falando aqui para tela e não tava compartilhando com vocês, mas tava mostrando o ChatGPT aqui, ó. Deixa eu voltar para cá, tava mostrando aqui, ó. Deixa eu lançar a perguntinha aqui. Tá dando para ver de boa? Mas no ChatGPT a gente tem a forma de instalar aqui, ó. E aí ele copia, cara, exatamente o arquivo, esse arquivo aqui para lá. E tipo, entendi, é tipo o Angular, é tipo um Laravel, cara. Sim, no Angular os componentes ficam separados, cara. A gente tem a separação Se você perceber aqui, ó, por exemplo, no Angular a gente tem um Button.component. Aqui, como é um componente mais simples, a gente acaba colocando HTML aqui dentro também para ficar. Não tem por que a gente separar em um arquivo, né? Mas quando o componente fica maior, a gente acaba separando ele em arquivos. Então a gente não tem No Angular não é normal a gente ter o JavaScript, o TypeScript, né, tudo dentro, e o HTML, tudo dentro do mesmo arquivo. Normalmente a gente deixa isso bem separado para não ficar muito grande os componentes e tudo mais, tá bom? Então basicamente é por isso que o ChatCN não vai funcionar para o Angular. Mas o Laravel, nunca usei, programei em Laravel, cara. Já programei em PHP, uma época muito triste na minha vida. Não conseguia programar, tipo assim, muito pouco. Quando eu usei o WordPress, cara, quando eu precisei customizar alguma coisa no WordPress, alguma coisa assim, eu tentei fazer alguma coisa PHP, cara, mas dá arrepio só de lembrar. Gosto de PHP não, mano, tô fora. Gosto do meu Angular aqui bonitinho, meus componentes, minhas coisinhas aqui, tudo certinho. Fechou. Deixa eu tirar aqui agora de novo, mas fechou. Então, voltando aqui, eu tenho já o meu componente. Quando eu dar um attach nele, ele já vai abrir. Agora vamos tentar fazer isso aqui funcionar. Então, para funcionar, a gente vai precisar de um service, a gente vai precisar trabalhar no service, tá? Então vamos trabalhar esse service aqui, ó. Então a primeira coisa que a gente vai ter que ter aqui no serviço é private Overlay, inject Overlay. Ele vai vir no Angular CDK Overlay, tá? A gente vai ter isso aqui, aqui, aqui, cara. Consigo dar um inject. Eu não sei se isso aqui vai ser um inject, cara, mas eu tenho quase certeza que sim. É isso mesmo, eu que errei mesmo aquela hora, mas vai ser a injeção, porque a gente vai injetar esse options aqui nesse componente depois, tá bom? Ele não é, ele não é uma variável não. A gente vai injetar esse cara aqui como se a gente tivesse colocando ele aqui no construtor. Cadê vocês? Tá, mandaram nada aqui ainda não. Deixa eu voltar para cá. Beleza, aqui, beleza. Então aqui no service, cara, a gente vai ter um create ZDialogRef. Aqui eu já vou precisar criar esse dialog ref aqui. Por enquanto eu vou deixar ele sem nada, tá bom? Ai, caramba! Zard, dialogue ref. Por enquanto vamos deixar com N aqui, depois a gente trabalha nisso. Mas aqui agora eu preciso do options, que é o Zard. Dialog options. Perfeito. Que eu vou ser content. Perfeito. Agora a gente vai ter aqui no service um open. Deixa eu criar aqui esse carinha. Então aqui eu tenho um content-type. Isso aqui vem de onde? Isso aqui vai vindo daqui, ó, um tipo que eu vou ter que criar. Importa aqui. Então tem um content-type, eu tenho um zard-dialog-options que eu vou criar essa função. Essa aqui também vou criar essa função. Então todas as funções aqui eu vou criar. O que que você tá reclamando aqui, ô caramba? Ah, tá perfeito. E agora a gente vai criar umas funções privadas aqui, ó. Então basicamente, ó, quando eu criar um open, eu vou chamar o createOverlay. Que que esse carinha aqui vai fazer, cara? Ele vai criar o overlay. Isso aqui é só uma forma da gente trabalhar com overlay, cara. Eu faço isso aqui, eu fiz como eu fiz o componente do chip, eu fiz a mesma coisa aqui, cara, tá vendo? Tem um overlay aqui, e aí aqui eu também crio um overlay. Tem várias formas da gente criar isso aqui no Angular, tá bom? Mas basicamente eu vou criar o overlay, que se resume um backdrop. Então lembra que aqui no ChatCN ele tem que adicionar esse backdrop aqui, ó. Cadê o dialog? Aqui, ó, dialog. Ele tem um dialog overlay, ele adiciona esse backdrop aqui, ó. No Angular a gente já faz isso aqui. No position strategy é basicamente a posição que a gente vai ter. A gente vai dar um overlay position global aqui, tá bom? Beleza. Próximo carinha que a gente vai criar é o attach, attach dialog component. Então deixa eu importar as coisinhas aqui. Eu vou dar um T aqui, Injector, this.injector. Então vou dar um private Injector aqui, perfeito. ZahandDialogOptions, componente zardialog.component. E eu vou importar esse. Ai, caramba, eu vou importar esse carinha daqui, ViewContainerRef. Viu por que que a gente tem aqui o negócio, cara? Então a gente tem que ter, mano, zViewContainerRef, stuv, zViewContainerRef. Perfeito. Aqui no meu caso, deixa eu pegar isso aqui, era do tipo ViewContainerRef. Perfeito. Então, então quando a gente vai criar um modal, o que que a gente faz? A gente cria o overlay do Angular CDK, tá bom? A gente dá uma attach nesse carinha aqui. Então a gente aqui, ó, tá fazendo uma injeção de dependência. Então lembra que eu falei com vocês, cara, que o nosso dialogue ele vai ter uma referência? Então eu injeto essa referência por aqui, ó. Então eu dou um overlay ref, eu tô falando, cara, esse injetor aqui, ó, esse injector, eu tô dando um providers aqui e eu falo, cara, quando vier um overlay ref, quando alguém chamar esse carinha aqui, que a gente vai chamar dentro do nosso componente, usa o meu overlay ref daqui, que eu já tenho esse carinha aqui. Quando eu usar os args de dialogue options, então lembra que eu tô aqui, ó, injetando os args de dialogue options? Perfeito. Eu vou usar o meu valor aqui do config, tá? Eu realmente não sei porque que ele tá dando esse problema aqui no tema, porque o meu dialogue service eu não tenho Deixa eu ver aqui, cara. Attach. Perfeito, perfeito. Dialog container config. Então aqui no meu componente eu tenho meu config. Aqui ele tá falando que usar as dialog options T não é igual usar dialog component. Perfeito, perfeito. Se eu botar readonly aqui, ele vai aceitar? Vai, por enquanto vai. Beleza, vamos setar aqui esse aqui. Se não der certo, a gente pode tirar, porque a ideia é ele seguir com ele aqui. Mas tá bom, que eu não aceito config. Por enquanto vamos comentar aqui porque eu já tô fazendo a injeção dessa dependência. Por último, a gente tem um attach. Que dia vai apresentar o Ministério no Wind? Calma aí que eu vou responder você, meu amigo. Deixa eu só explicar isso por último aqui. Attach dialogue. Na verdade, mano, já respondendo, ontem eu esqueci de entrar. Na verdade, qual que acontece? Toda quarta eu tenho célula da minha igreja, mano. Então para mim é difícil aparecer lá no Indie Hackers, aquele dia eu apareci antes da Célula, mas eu vou ter que faltar um dia de Célula só para aparecer lá. Então aqui, attachDialogContent. Então por último a gente vai fazer isso aqui, usar de dialogRef zard-dialog-component e zard-dialog-options, tá? Eu tenho um dialogueRef aqui, e é porque, ah tá, porque que eu tenho um construtor. Eu não vou passar isso aqui, aqui, meus amigos. Vou dar uma injeção lá nesse carinha depois. Template portal é do CDK. Esse createInjector é uma outra função que a gente tem aqui, que eu vou ter bem separadinho todas as nossas coisas. ZardDialogRef, ZardDialogRef. Então aqui mais uma forma, cara, de injetar esse dialog ref aqui, ó. Então createInjector dialogRef component instance. Isso aqui eu vou ter que ter aqui, cara. Então aqui eu vou ter isso aqui, tá? Então o que que a gente está fazendo aqui, ó? Que eu tô criando o meu dialogRef, tô vendo component or templateRef. Se o meu componente quando eu chamar ele aqui, ó, component or template ref, tá? Você quer o meu componente, então se ele for de uma instância de um template ref, eu vou fazer esse carinha aqui, cara. Então vou dar um dialog container, attach template portal, é aquele carinha. Lembra que a gente fez esse, essa parte aqui, ó? Do AttachComponentPortal é porque caso eu queira passar para o meu componente, explicando aqui bem detalhado para vocês, cara, caso eu queira passar no meu nz-content aqui, ó, um template ref, é dessa forma que eu faço no Angular, tá bom? Então por isso que eu preciso ter todos esses outros detalhes aqui. Em vez de passar tanto uma string quanto um componente em si, o código do componente, eu posso também passar um template. Aí é dessa forma que eu faço, tá? Deixa eu ver aqui que eu posso fazer aqui. Não sei se aqui vai funcionar, mas vai. Não sei se isso aqui vai funcionar, não, cara. Dialog container. No, porque aqui no meu portal eu vi um View Container Ref, Dialog Container. Por enquanto vamos deixar esse carinha aqui. O que que ele tá falando? Tipo, você tá, você tá logo. Vamos ver aqui, ó. SART dialog, FTN, template portal. Mas isso aqui, isso aqui, o context T undefined. Você viu o container ref? Deve ser por isso que aqui eu passo um sn, cara. Por enquanto vamos deixar assim, depois a gente tenta achar uma forma de mexer nisso aqui. Mas dessa forma eu passo meu template portal, se for uma instância de um template ref, se ele não for uma string Aí, que que eu faço? Eu vou criar um injector dele com meu dialogueRef e vou instanciar ele. Então, dialogueContainer, eu vou dar um attach no portal aqui novamente, criar um new ComponentPortal passando o injetor, passando o templateRef, o containerRef, o injector. Aí eu tenho um contentRef, aí eu venho aqui, dialogueRef, ComponentInstance. E passa a instância desse componente que eu acabei de criar dinamicamente aqui, ó, e retorno o meu dialogRef. Então lembra, cara, que eu falei— deixa eu ver aqui— lembra que eu falei quando a gente dá o open a gente retorna o dialogRef? E é isso que eu tô fazendo. Então aqui, ó, attachDialogContent, aqui eu vou retornar a instância do meu dialogRef, do meu componente, tá. Deixa eu só ver aqui. Dialog container, ele tá falando que ele não aceita um dialog ref. Start dialog component. Então eu tenho que vir aqui no meu componente dialog ref e eu tenho que criar esse dialog ref aqui. Então tem protect. Deixa eu ver aqui. Sei que eu quero tirar porque eu quero instanciar esse dialog ref, dialog ref, usarte dialog ref. Deixa eu ver aqui. Aqui no final, tá, logref. Recebe, inject, start, die, logref. Perfeito. Eu espero que aqui eu já receba a instância dele, tá bom? Então eu não quero passar isso aqui não. Vamos ver se isso aqui vai, vai funfar. Se não funfar, a gente muda ali depois. Beleza, a gente já tá com o nosso serviço criado. Depois eu vou tentar trabalhar nesse dialogue ref aqui, eu vou mostrar para vocês que que a gente vai fazer nele. Mas agora, cara, eu já tenho o meu componente. Por enquanto aqui tá sem nada, tá? Mas eu já tenho o meu componente, eu já tenho o meu service, e agora eu vou criar, eu vou fazer uma forma para mim testar isso aqui, tá? Porque por enquanto eu só tô criando código, mas se eu venho aqui no ZardUI e eu chego aqui no modal, não tem nada, cara. Aqui, ó, modal, tem nada. E aí que a gente vem na parte da nossa mágica que a gente fez aqui no ZardUI, da documentação. Então, como que funciona para a gente fazer essa documentação aqui? Isso aqui é tudo feito de forma dinâmica, tá bom? Então toda essa documentação bonitinha aqui a gente meio que cria de forma dinâmica para vocês entenderem como funciona. Então basicamente a gente tem duas pastas aqui, e eu acho que é uma pasta agora porque o Luiz, eu sei que ele mudou muita, muita coisa aqui na documentação, mas eu acho que a gente vai ter uma pasta só que vai ser a pasta de demo, demonstração, tá? Eu vou vir aqui, deixa eu pegar a demo do tooltip aqui. Então eu vou criar aqui uma pasta chamada demo. E eu vou chamar aqui de basic, tá, dialogue. Por enquanto esse aqui é o dialogue, porque agora a gente faz assim, tooltip. E aí aqui eu tenho o meu componente, então aqui vai ser o basic. Vai ser o BasicDialog. Aí eu vou chamar o Zard. Eu vou ter que criar um ZardDialogModule também, caso a gente já queira usar tudo isso. Então deixa eu vir aqui, ó, pegar esse carinha aqui. Em vez da gente importar tudo, deixa eu só mudar de FDS aqui para Zard. Importar tudo, tá, como um módulo. ZardIcon, a gente não tem. ZardButtonComponent, Espera aí. Perfeito. Então isso aqui eu vou tirar daqui. Zarte Dialog component. Perfeito. É só para a gente já ter o service aqui, tá? Zarte Dialog module. Pera aí, que que ele tá dando erro aqui? Caramba, viajou aqui, mano. Toda vez que acontece isso, eu dou um reload aqui no meu VS Code. Depois que eu dou um reload, eu dou um espaço e salvo novamente. Não quer funcionar, mano. Format document with Excelente, pronto, tá feito, tá. Então tem uns art-dialog-module aqui, perfeito. Aqui eu vou ter o botão, type outline. Vamos fazer, vamos tentar fazer algo parecido. Eita, caramba, tô abrindo o zoom aqui. Mas vamos tentar fazer algo parecido com o do ChatGPT. Dialog, e a gente vai criar um Edit Profile. Beleza. Open dialog, private. Dialog service, Zard dialog service. Então é assim que a gente vai usar o nosso modal, tá, meus amigos? This.dialog service. Olha que maravilha! Olha que maravilha! Title: Edit Profile. Por enquanto vamos deixar assim. E eu vou dar um Z. Por enquanto não vai ter action nenhuma, tá bom? Vamos tentar só deixar assim por enquanto, mas assim que vai ser, a gente vai começar por aqui. Então temos já um carinha aqui de demo. E aí outra coisa que a gente precisa fazer para ele aparecer aqui no nosso projeto, aqui, cara, é a gente vir aqui em apps, web, src, deixa eu achar aqui, cara. Components, calma aí que o Luiz mexeu em bastante coisa aqui, mas eu sei que a gente tem alguma coisa do menu. Aqui, cara, sidebar, aqui, ó, sidebar paths. Beleza, então o modal vai ser dialog, components dialog, eita, available true. Então, por enquanto, a gente vai ter um dialog aqui. Outra coisa que a gente precisa fazer é o app routes. Eu tenho um component routes, deixa eu ver aqui. Tá, então a gente já tem um dialog, ele não foi. Eita, Giovana! Aqui, ó, então component paths, a gente tem dialogue, components/dialogue. Tá certo, é isso aqui, mano. Calma aí que eu vou achar, tá? Cadê o Luiz para mim, para me ajudar nesse aqui? Porque até ele me bagunçou aqui agora. Default component, acorde, não, component name. Deixa eu ver aqui se no component aqui ele tá criando o dialog, tá? Mas eu sei que eu preciso adicionar esse aqui em outro lugar, cara. Só preciso achar aqui. Nossa, o Luiz mexeu muita coisa aqui na documentação, mano. Vamos fazer o seguinte, cara, a gente vem aqui, ó, e a gente descobre, por exemplo, o button. A gente tem um button aqui, ó. Esse carinha aqui tá sendo chamado onde? Aqui, ó, achei. BCD dialog. Beleza, então aqui, ó, no meu dialog Dialog. Aí, ó, foi, moleque! Dialog. E a gente vai ter um basic que vai ser esse carinha aqui, ó, ZardDialogComponent. Beleza, esse carinha aqui. Dialog Basic Component. Aqui eu vou importar ele. Beleza, então. Ai, caramba, ainda não mudei o meu carinha aqui, ó. Dialog. É maiúsculo, abençoado. Pronto, agora sim. Então a gente tem esse carinha aqui criado, o meu componente. Agora eu posso vir aqui, deixa eu dar um zoom aqui para vocês, e criar, clicar em dialog aqui, ó. E aí aqui ele já apareceu, dialog ali. Deixa eu achar aqui. Beleza, aqui, ó, aqui ele já tá aqui. Eu só vou precisar depois atualizar a questão da API, mas aqui agora a gente já tá mostrando o nosso componente de dialog. E aqui eu posso vir para mim testar ele e dar um basic aqui no dialog e ver se tá chamando. Não tá chamando, por quê? Porque o besta aqui não deu o clique no botão, né, cara? Aí fica difícil, muito difícil. Pronto. Beleza, já não achou o dialog overview e o dialog API. Então demo, new folder, fecha, doc. Aí aqui na doc eu preciso do API e overview. API ZDialog. Depois a gente mexe aqui, tá? Deixa eu parar o projeto, iniciar de novo. E aí eu preciso ver aqui, ó, public component dialog. Demo e Doc. Pronto, pronto, beleza. Então agora aqui, beleza, vamos ver. Deu erro. No provider for the dialog ref. Vamos ver o que que tá rolando aqui. Agora é a hora que, que é onde o filho chora e a mãe não vê, que a hora que a gente vai testar. Depois de quase uma hora e meia só codando, a gente vai testar. Mas vamos lá. No provider for z-dialog ref. Então lá no basic component, zardialog ref, ele tá falando que não tem a instância. Do dialogue ref. Agora deixa eu ver uma outra coisa aqui. Meu dialogue ref, destroy component instance trigger. Vamos primeiro achar. Agora a gente precisa debugar aqui para a gente achar. Tô achando que é essa instância desse carinha aqui, ó, que ele tá dando erro. Então vamos voltar aqui, clicar de novo. Olha, gente, olha isso! Abriu o dialog, meus amigos. Tá sem o título, tá sem o título porque eu não botei ele no header aqui, ó. Mas tá tudo bem, já abriu com o conteúdo aqui, ó. This is a dialog content. Isso não merece palmas não, gente, ó. Já foi, ó. O problema é a gente tá só com problema aqui nessa parte. ToDialogRef, tá? Porque eu tô tentando pegar a injeção dele. Mas, por exemplo, onInit, console.log, ponto, aqui, ó. Vamos ver se isso aqui vai dar um console.log aqui. Olha lá, olha isso aqui, gente! Eu já tô aqui, ó, pegando a injeção dos ArdDialogOptions no config. E já tá, ó, zContent e zTitle. Então aqui dentro do meu componente eu já tenho o que eu passei para esse carinha aqui, ó, tá? Então a gente precisa agora só trabalhar nesse dialogRef aqui porque ele é bem importante para gente. Então const dialog recebe console.log dialog, beleza. Que coisa linda, meus amigos! Cliquei, já abriu o meu dialog lindamente aqui. Depois a gente vai, a gente vai trabalhar, né, nessa parte da UI e tudo mais. Mas a gente já tá com um componente de dialog funcionando, tá? E olha aqui, ó, olha a mágica! Deixa eu criar um novo componente aqui, ó. Componente, ah, dialog-base. Vamos lá, ó, aqui agora eu quero criar um componente mesmo. Eu vou importar o ZardButton, ZardInputDirective. Aí aqui eu vou dar um input. Z-input. Aqui, não, meus amigos, vocês não estão entendendo. Isso aqui vai ser o meu modal, certo? Demo dialog basic, tá bom. Porque, porque eu quero utilizar esse carinha aqui. Vamos ver. Deu erro. Uhul! Foi quase, hein? Quase foi de primeira, tá? Ai, ai, tá. Vamos ver o que que tá rolando aqui, ó. Cliquei, portal outlet tá nulo. Então usar de dialog component. Deixa eu ver aqui no meu código que eu fiz com esse portal outlet aqui. Ele é um ViewChild, realmente ele pode vir nulo, cara. Prefiro fazer assim. Deixa eu ver por que que ele tá fazendo isso aqui, porque que ele tá vindo nulo, cara. Vamos descobrir isso aqui. Primeiro vamos deixar isso aqui assim, tá? Bora voltar aqui. Cliquei Instance lá. Injector, tá falando que não tá achando aqui, ó. Ele não tá criando o meu carinha, cara. Ele não tá dando um attach aqui no componente. Agora a gente precisa só descobrir o que que tá rolando, o que que a gente tá esquecendo aqui de colocar, velho. Então no meu service, dialog container, vamos aqui, ó, dialog service. Tá, tô só comparando os carinhas aqui. Beleza, então vamos aqui, vamos debugar aqui no service, cá em cima. Por enquanto ele não fecha sozinho, então tenho que atualizar a página. Eu tenho overlay, o container, e também a câmera travou de novo. Dá para tirar eu aqui por enquanto, vocês estão me ouvindo aí, né? Mas deixa eu aproveitar para dar um zoom aqui, cara. Como é que eu tiro isso aqui daqui? Enfim, beleza. Então, component template ref, dialogue container overlay ref, e o config. Então vem aqui, ó, esse carinha é um template ref? Não. Esse carinha é diferente de uma string? É. Então aqui eu dou um create injector passando o meu dialogue ref. Só que o meu dialog ref aqui, ó, a gente tá com problema aqui, ó, que o meu dialog ref tá com componente instance null. Então acho que aqui tá sendo problema, cara. Aqui, quando eu passo esse dialog ref aqui, eu dou um start dialog ref. Estamos caçando aqui o que que tá acontecendo aqui no meu dialogue ref. Tô olhando outro código aqui, tá, guys? Result. Componente Instance. Tá, beleza. Ele tem que estar no— por enquanto ele tem que estar no Lu mesmo, porque depois que eu crio a instância desse carinha aqui que eu coloco ele. Tá bom, deixa eu ver aqui no meu módulo se eu tô esquecendo alguma coisa. Pode ser, né, é uma grande possibilidade. Aqui, ó, importar o módulo, eu já tô importando, e o overlay módulo Eu tô importando, deixa eu importar esses carinhas aqui no meus AppComponent, porque eles são importantes para o meu, para tudo funcionar aqui do CDK. Então vamos voltar aqui, injector. Agora sim, agora eu já tenho a instância do meu componente. Olha aí, meus amigos, olha aí que maravilha! Type something. Toma aqui, ó. Toma ele, toma ele, toma ele. Tô digitando, meus amigos. Olha que coisa linda! Já tá perto aqui para fazer isso aqui, hein? Tá quase, hein? Tá quase. Show! Então agora a gente tem nosso dialog ref aqui, ó. Agora eu posso voltar com esse carinha para cá no dialog ref, e quando eu abrir o meu componente Eita, falou de novo que não tem o meu dialogue, cara. Caramba, velho, deixa eu ver aqui, mano. Injects art dialogue ref. Button, t, lip, pavé. Non, voilà. No provider for that dialog. Create injector. Passo o meu dialog ref que vem daqui. Beleza. Será, cara, que por eu estar usando esse inject novo do Angular aqui ele não tá pegando? Mas ele pegou, cara, do usar de dialog options. Não pegou aqui, ó. Dash dialogue options, use value injector. Então aqui, ó, injector, mesma coisa, new ComponentPortal, e aí eu passo, o component ou template ref, o config, ZView container ref. Deixa eu ver se é isso aqui que tá, tava calhando, cara. Config, ZView container ref e o injector. Ele deveria estar injetando esse carinha aqui, cara, no dialog component. Talvez seja por isso que aqui eu tinha criado ele na mão, cara, não tinha injetado ele com uma dependência. Agora, por quê? Eu não sei, cara. Dispondo injector. É uma grande possibilidade de eu estar usando esse inject aqui, eu perder esse injector daqui, cara. Deixa eu tentar. Deixa eu tentar dessa forma aqui. Não, também não foi. Houston, we have a problem. Ele tá falando que não tem um provider do ZardDialogRef. Só que no meu service eu crio o meu ZardDialogRef. Eu crio a instância do meu componente, retorno o meu start dialog. Provavelmente é porque quando eu tô criando o meu componente, realmente ele não vai ter, que ele tá no injector daqui, ó. Então eu dou, eu crio o meu componente primeiro, tá certo. Por isso que eu tava passando esse dialogRef aqui. Vocês lembram que aqui no— agora tá entendido. Aqui eu passava esse dialogRef assim, ó, dessa forma, porque primeiro eu crio o meu componente para mim ter o container dele, para mim depois ter o meu dialogRef. Então é por isso que eu não posso usar o dialogRef assim. Eu tenho que criar um protected readonly DialogRef::startDialogRef. Beleza, aqui ele vai ter que ser um public, cara. Se colocar protected também não vai. Beleza, então agora aqui eu vou ter o meu dialogRef. Talvez depois a gente encontre uma outra forma de fazer isso, talvez. Mas agora sim, meu componente está criado. E no meu ng1-init, this.dialogRef. Vou salvar aqui, ó. Então beleza, tá lá o meu dialogConfig e o meu dialogRef. O meu dialogRef, ele tem a instância do meu componente, tá? Que por enquanto não tem muita coisa, mas o que que a gente consegue fazer com esse? Porque, porque que é importante esse dialogue ref, velho? Por causa disso aqui, ó. Agora a gente vai fazer uma coisa bem interessante, cara. Já são 9:50, já tem quase 2 horas de live, mas esse dialogue ref aqui é muito importante, velho. Por quê? Porque aqui a gente consegue criar alguns triggers. Que vocês vão ver aqui, ó. Por exemplo, vamos aqui no nosso DialogRef constructor. Olha isso aqui, meus amigos. Vou dar um Import aqui de tudo. Eu vou criar um destroy aqui. Quando a gente destruir, eu tenho um container, container instance, private container instance, ftest component aqui, ó. Disponível, tá? Eu vou dar, eu vou criar, vou mostrar para vocês o que que eu tô fazendo aqui, meus amigos, só para vocês entenderem. Mas basicamente eu tô criando os triggers do OK e do cancel que a gente vai ter no nosso, no nosso componente. Então aqui, ó, a gente tem um OK trigger. No meu componente eu crio um OK trigger e o cancel trigger. Deixa eu ver se tá tudo por aqui. Tá. Então aqui, ó, não, a gente não vai usar mais event emitter. Eu vou dar um output aqui, void, que a gente aqui, a gente usa signals agora, transforma tudo para signals, tá? Ai, que maravilha! Nos signos eu não tenho um ponto pipe. Não temos o ponto pipe porque não é RJS. Faz sentido? This. Quebrou o vendim, deve, ou tá sendo o Luiz que chegou aí, ó. Como que eu vou fazer para mim pegar esse carinha aqui agora, meus amigos? Ok, trigger, output. Pô, mano, se ele tem um subscribe, por que que ele não tem o pipe? Caramba, será que não preciso mais? Será? Depois a gente vê isso. Mas tá, então aqui no nosso dialogue ref a gente tem esses carinhas aqui. No meu trigger, deixa eu abrir o meu dialog ref aqui. Eu tenho dis.config, que é do dialog options. Então, private config Start dialog options. Z1, OK. E Z1, cancel. Putz, agora não sei se aqui vai rolar não, hein. Vamos ver que a gente tá transformando isso aqui para signo também. Mas aqui eu tenho mais algumas coisitas. Eu tenho no meu dialogRef, eu tenho uma função de close. Esse result aqui, ó, é assim. E eu tenho meu overlayRef também. Private overlayRef, ele recebe um inject. Então beleza, eu tenho overlayRef aqui, eu não vou precisar colocar o destroy, mas cara, basicamente, o que que o nosso ZardDialogRef vai poder fazer, cara? A gente vai ter esses eventos de emitters. Ele vai emitir aqui os eventos, vai ficar ouvindo também as coisas. Então, por exemplo, quando eu clicar no trigger aqui, ele vai emitir this.trigger, a action de cancelar. E se clicar em OK, vai emitir a action de OK. Aí o que que eu faço? Eu dei um trigger OK, eu chamo NZON OK. Se for cancel, chamo NZON cancel. E aí, se for uma instância de event emitter, eu vou emitir esse carinha aqui. Se não, se for uma função, eu vou chamar essa função aqui, tá? Então basicamente é isso. Senão eu fecho o bendito do modal. Close with result. Vamos ver se aqui vai rolar. Outra coisa, cara, que eu vou colocar aqui é isso aqui, ó, no constructor. Container instance. Aqui no meu dialog component eu vou criar uma funçãozinha chama getNativeElement e eu vou precisar dar um private host aqui, read-only host. ElementRef, esse carinha aqui, ó, host, tá? Isso aqui é uma função para mim pegar o host do meu componente. Então dá um host nele. Quando a animação terminar, eu vou vir aqui no meu container instance e vou chamar a função overlayClickOutside. Essa função também vai estar no meu componente. Por quê? Porque a gente quer que o nosso componente feche quando a gente clicar fora dele, tá bom? Então aqui, ó, fromEvent funds.js, takeUntil, overlayRef. Esse overlayRef também é um private readonly overlayRef, overlay, overlayRef. Então, olha, O que que a gente tem aqui no nosso componente? Eita, overlay, click outside, pipe take until destroy. Vou ter que voltar com meu carinha do destroy aqui, porque aqui a gente tá usando RxJS, tá bom? O Signal chegou, mas ele não mata RxJS não, tá bom, gente? Beleza. Então, cara, que que a gente tá fazendo aqui, ó? Um modal que preste, quando a gente abre ele e a gente clica fora, ele fecha, tá? E é isso que a gente tá praticamente desenvolvendo aqui, ó. Então eu tenho uma função, chamou, ver ali, click outside, que quando o meu dialog se abrir, eu vou escutar um evento de clique e eu vou filtrar para saber se o usuário está clicando dentro ou fora do meu componente. Então aqui, ó, o target do meu clique, se for diferente do host-native-element ou se has-not-overlay, se não tiver overlay, e aí eu retorno true ou false. Se não tiver o origin e se não tiver no overlay, eu retorno true ou false. E aí que eu dou um takeUntil só para mim trabalhar nele. Então quando a gente criar o nosso componente, ele vai vir aqui, vai chamar essa função. Aqui também eu dou um pipe takeUntilDestroy e eu dou um subscribe para o close, porque quando ele retornar true eu quero que ele fecha o meu dialogue, tá? Aqui ele tá dando um erro. Inject must be called from a constructor or factory. Onde que eu chamei inject aqui, cara, que não tava dentro de um construtor? Provavelmente aqui. Provavelmente aqui no dialog ref, cara. Então aqui eu acho que eu vou ter que fazer isso aqui, mano. Search dialog options. Que que ele tá dando de hack? Aqui, ó, aqui. Perfeito, boa. Vamos ver aqui então. Abriu, cliquei fora, não foi. Provavelmente ele não foi porque eu tô esperando um evento aqui no meu dialog ref. Eu estou esperando um evento quando der um animation end aqui, ó. Isso aqui é um perigo, cara, que a gente vai ter que tratar aqui. Deixa eu ver se ele tá chegando aqui, pelo menos. Olha lá, ele não tá chegando, tá vendo? Tamo indo aqui. Então ele tá dando um container instance, get Native Element, ele tá dando um addEventListener. Então aqui no meu componente, dialog ref, get Native Element, this.host.nativeElement, e eu adiciono as classes. Só que a questão é essas classes Tem animation. Acho que a gente não tem animação aqui, cara, por causa de algumas coisas aqui, ó. State open, state closed. Isso aqui a gente fez no tooltip, cara, eu lembro. Open. Cadê? Volta aqui, tooltip closed state. E isso aqui no dialog também a gente tem, tá vendo que ele dá um data state igual a closed e open? Eu acho que a gente vai ter que trabalhar isso aqui também. Mas é estranho que ele já tá, ele já tá fazendo uma animaçãozinha, cara. Mas de qualquer forma, aqui no meu dialog eu vou ter que fazer algo parecido com o tooltip aqui, ó. Eu tenho um state, então depois de todas as variáveis aqui eu tenho um state que é um signal. Esse state aqui eu tô usando onde? Aqui, ó, o cara aqui. Então aqui eu faço isso. Então aqui eu vou dar um data state. Quando eu abrir o modal, eu vou dar um state opened. E aí aqui no tooltip, quando que eu dou um state open? Aqui, ó, quando eu dou um show. Então aqui no meu data service, volta aqui, component ref. Overlay attach aqui, container half. Não, vamos voltar aqui nosso carinha. Component have instance, isso mesmo, container have instance, instance state recebe opened, ah,.set. Pronto. Então, o que que a gente tá falando? Quando ele der um attach no nosso container ref aqui, a gente quer setar a instância do componente para OpenEdge. E ainda não chamou esse bendito desse negócio aqui, mano. É porque não é OpenEdge, é Open. Burro! Dá zero para ele. Close. Open, close e open. Chora, meus amigos! Deixa eu mostrar minha carinha aqui para vocês. Olha isso, meus amigos! Olha isso! Quem que chamou aqui? Por que que chamou? Porque eu botei o state aqui para o carinha do Opener. E aí o tailwind, que o nosso amigo Luiz ama, botou o state do cara e colocou animation-in. Agora que que a gente tem? Um overlay click outside. E quando eu clicar fora, fechou. Vocês viram isso? Fechou. Então se eu clico dentro, ele abre. Quando a minha animação terminar, que é quando ele já colocou o componente, ó, clico fora, fechou. Por que que ele fechou? Porque eu coloquei esse carinha aqui, ele vai chamar o close aqui no final. Então clico aqui, ó, chamou o close. De onde que veio o close? Daqui, ó, do meu subscribe. Por quê? Porque aqui no meu componente, olha que maravilha, olha que maravilha, Cliquei fora, olha lá, um evento, event target, origin true, not overlay. Se eu clico dentro, ó, true, false. Então ele vai retornar false, não vai fechar. Então eu posso clicar dentro aqui quantas vezes eu quiser, quantas vezes eu quiser. Se eu clico fora, fechou. Tá ganhando forma o nosso modal, meus amigos. Isso aqui tá lindo demais. Então a gente já tem um modal que já tá colocando. Esse aqui já tá melhor que o modal do Matheus. Isso aqui já tá melhor que o modal do Matheus, tá? Já tá funcionando aqui lindamente. A gente já tem aqui uma porrada de coisa. Eu já tenho aqui no meu Basic Dialog Demo. Eu já tenho aqui um dialog opened. Eu já tenho a minha instância aqui, ó, do meu carinha, que aqui eu consigo criar várias coisas se eu quiser, tá bom? Então já temos bastante coisa aqui, ó. Já temos o modal abrindo e fechando lindamente. A gente botar na versão do celular, ele tá abrindo e fechando lindamente, de uma forma horrível, e mexendo na tela inteira, que a gente vai tratar isso aqui depois. Mas aqui, ó, no mobile também tá funcionando. Ele abre no centro da tela, bonitinho, coisa linda, coisa mais linda, cara. Deixa eu tirar esses Que basic esse carinha daqui. Mas aqui, ó, eu tenho, cara, o dialog. Eu tenho um close aqui, ó. Eu tenho esse dialog ref aqui, ó, e eu posso, por exemplo, ponto component instance. Aqui é exatamente isso. Então se eu boto alguma coisa aqui, por exemplo, pudim recebe pudim, eu já tenho na instância do meu pudim. Então se eu precisar, por exemplo, que que eu faço no Ministério, né? Eu crio um formulário. Então eu tenho um form aqui, recebe new FormGroup. Vamos criar um FormGroup aqui, ó, de name, recebe new FormControl. Beleza, então olha o que que eu consigo fazer, cara. Eu consigo vir aqui, ó,.form.valueChanges.subscribe, form.valueChanged, e agora na instância do meu dialog, deixa eu colocar isso aqui. Eita, Giovana, tá passando alguma coisa aqui. Beleza. Então agora, depois que eu crio o meu modal, eu tenho o meu dialog aqui, que quando eu criar esse carinha aqui, eu posso criar um formulário dentro do meu do meu negócio aqui do chat, ele mostra o que é name mesmo. Name, que é Pedro Duarte. Caramba, já tá até com nome aqui, ó. Name, beleza. Aqui eu vou dar um form, forms module. Reactive forms module. Eu vou dar aqui um form, form group. Aqui quem sabe faz ao vivo, meus amigos, que eu não tô para brincadeira. Fecha o form. Então aqui eu já tenho form group. Agora aqui um form control name. Enter your name. E agora a gente deve dar um console.log aqui toda vez que a gente alterar alguma coisa, cara. Então se eu abro o modal, 1, 2, 3, olha isso, olha isso aqui, olha isso aqui! Deixa eu dar zoom para vocês, cara. Olha isso aqui, cara, olha isso aqui! Eu tenho as alterações do meu modal Eu peguei o que tá dentro do meu componente, tá? E eu dei um subscribe nas alterações do meu modal que tá dentro do meu componente. Isso aqui é maravilhoso, cara. Eu consigo fazer muita coisa com isso aqui. Tô falando que a gente já tá melhor que o Matheus, 2 horas de live coding aqui, ó, e a gente já tá melhor do que o Angular Material para criar um modal. Chora, Google, cara! Acho que desse jeito a gente nunca vai conseguir ter um apoio da Google, cara. Eu vou ter que falar, parar de falar mal do Angular Material. Ai, meu Deus, mano! Caramba, vocês estão aí, gente? Vocês estão vivos aí, cara? Mano, acho que tem— que horas são, mano? 22:15. Aí já tem 2 horas e 15 que eu tô codando aqui. Tempo passa, mano. Eu gosto de fazer isso, cara, é muito bom, muito bom, muito bom fazer isso. Vocês estão por aí? Dá um oi para mim aí, cara. Fala: tô aqui, cara, tô vendo essa loucura que você tá fazendo aí. Manda um oi. Vocês têm alguma dúvida? Ficou confuso alguma coisa que vocês viram aqui? Vocês querem que eu faça algum teste diferente, que eu teste alguma coisa? Tem um site novo para vocês mandarem? Live passada a gente viu o cara do bebê reborn, mano. É certidão qual que era o cara do bebê reborn, cara. Diz o cara lá. Nossa, mano, já tem um tanto de coisa, tá? Já tem até coisa na Shopee, cara. O cara tinha feito o Sasuke do bebê reborn, mano, mas tem aqui na Shopee também, cara. Certidão de nascimento do bebê reborn. Aí vocês estão aí, mano. Pô, vocês estão por aí mesmo? Brabo demais! Opa, opa, Paulo deu um oi aí. Lembrou no começo, Samuel, trampa de dev há mais tempo que eu. Show, mano, que bom que vocês estão por aí, cara. Vocês estão tudo calado vendo eu falar esse tanto de coisa aqui. Ô Luiz, você mudou tanta coisa nessa documentação aqui, mano, que eu já tô até— eu tava até perdido para atualizar as coisas aqui, tá? Vou falar nada não, mano, mas eu estava perdido aqui, ó. Dialog, Zard Dialog, módulo. Quando atualizo aqui, ó, ele já atualiza aqui, tá, meus amigos? Você quer a coisa mais linda do mundo, cara. Já atualizou aqui em cima e aqui embaixo o dialogue aqui, ó. Eita, caramba! API overview. Quando atualiza overview, ó, isso aqui é uma coisa que eu fiz, mano. Isso aqui ficou da hora, se liga. Eu tenho um script aqui, ó, generate_files.cts. Ele fica escutando qualquer alteração dentro da nossa pasta zard/src/lib/components. Toda vez que tem uma alteração dentro de algo aqui que tem demo ou doc, de uma pasta que seja demo ou doc, ele copia os arquivos dessa pasta e cola dentro do nosso public components aqui, ó. Então, dentro do nosso public components, a gente tem aqui o demo e o doc, para a gente não ter que ficar copiando e colando do lib para cá. A galera dando um boa noite aqui, ó. Aí, ó, diz o Luiz, ó, ó, aqui, ó, tá prometendo: farei um tutorial depois disso aí, quando eu chegar numa versão final. Tem 5 meses que o cara tá desenvolvendo a versão final desse negócio, cara. 5 meses, mano. A gente tem 5 meses não. O pessoal que deu boa noite aqui, ó, o Brenner, cara, é brabo também, mano. Desde o começo tá com a gente aí fazendo componente a rodo para nós, trabalhando, e a gente revisando. O Paulo também deu um opa. O Luiz, lembra eu no começo? O Matheus aqui, ó, Matheus Nunes Fernandes, tem um opa, boa noite, e falou que também, ó, eu tô extraindo tudo que o NGX Markdown oferece. Luiz, estranho. Você tá mexendo em tudo, mano. Você tá bagunçando é tudo, cara. Olha o tanto de coisa você já fez aqui, mano. Você tá maluco? Você já mexeu nesse trem todo aqui. Depois eu tenho que revisar as coisas que você faz, porque o Luiz, mano, ele faz as coisas, ele não manda nenhum PR para mim revisar não, mano. Luiz aí faz as coisas e comita direto na massa. Ai, velho, alguém tem que parar esse menino, pelo amor de Deus. Show, meus amigos! Acho que os comentários já foram todos aqui, cara. Mas, cara, fizemos bastante coisa hoje, mano. Eu já tô aqui para chegar no finalzinho da live. Fizemos bastante, bastante coisa, cara. Tipo assim, para quem não tinha nada de componente de modal, mano, olha o tanto de coisa que a gente já fez, cara. Criamos modal que tem, que a gente gera ele no service. Aqui, ó, a gente tem um service, a gente pausar o modal. Que coisa mais linda, cara. Depois a gente vai, próxima live, a gente vai ter o nz-ok-text, o cancel, ele já vai vir com um texto pronto, cara. Mas quando a gente dá um initial context aqui, a gente já vai abrir um dialogue. Por exemplo, aqui, ó, save changes, save changes. A gente vai ter isso aqui, cara. A gente vai ter que criar uma outra coisa aqui também, ó, para ter o tanto título no header, né? Porque aqui eu acho que ele é um header, cara. Ele é um componente à parte, ele tem um título e a descrição. Vamos criar esse aqui de uma vez. Isso aqui não é muito difícil não, cara. A gente tem aqui, ó, o title, e eu tenho também o z_description. Esse aqui vai ser só uma string. Por enquanto eu não quero colocar muita coisa nesse description aqui não, cara. Tá bom. Então, z-title, z-description. E aqui, cara, a gente tem um reader e a gente vai fazer assim, ó, if config.z-title, aqui, ó, nosso z-title. E aí o z-title, já vamos trabalhar aqui, ó, z-content, z-reader, z-footer, dialog-title, esse carinha aqui, ó. Caramba, config z-title. If config z-description, mesma coisa. E que eu tenho z-description, eu tenho esse carinha aqui, ó. Eita, caramba! Sequer para ficar aqui dentro do reader. Vocês querem ver a mágica acontecer agora? Vocês querem ver a mágica acontecer agora, meus amigos? Vamos vir aqui e copiar a mesma coisa. Isso aqui agora no nosso basic aqui. Deixa eu fechar tudo isso aqui, ó. Nosso basic, deixa eu tirar esse daqui. Z description. Ah, tem que ter isso aqui, cara, pelo amor de Deus. Pronto, então a gente tem um title, edit profile, um z-description e um OK text. Aqui não vai aparecer ainda não, mas o title e o description já estão aqui. Olha isso, mano, meu Deus, cara. A gente já tá quase igual do ChatGPT, né? Lá, edit profile, make change. Olha lá, ó, que coisa linda! Que coisa linda! Tá aqui, a gente vai ter que mexer alguma coisa. Eu acho que tem alguma coisa de, talvez seja, deixa eu ver aqui. Deixa eu tirar o zoom aqui. Aqui tá parecido, cara. Por algum motivo esse modal aqui ele tá com um widget, cara, que eu acho que eles devem setar por aqui, mano. Será? Desgrama! Tá setando a bagaça do widget aqui, mano. Z widget. Mas é que ele tá setando o Tailwind, né, mano? Vamos setar uns 500 pixels aqui, ó. E aí aqui, nosso carinha, eu tenho um componente Z widget. Deixa eu pensar como que a gente faria isso aqui, que ele tá no dialog content. Não é style, style.width, pixels. Configs é widget. Uma coisa linda. Outra coisa que eu esqueci, a gente colocou no content alguma coisa, mano. Header content. Ai, porque esse content aqui é o outro lá. Não sei, mas vamos fazer isso aqui para ver o que que vai acontecer. Ele ficou com o widget? Essa é uma boa pergunta. Caramba, tem tanta coisa aqui, cara. Man, não, não ficou. Mas mesmo se eu setar aqui, ele não vai mudar esse widget. Eu tenho que mudar aqui em cima, cara. Widget 500 pixels, tem que mudar ele cá em cima. Isso aqui a gente vai ter que tratar depois. Como que a gente faz isso? Z widget. Eu não posso setar esse widget aqui, não tem problema. Eu vou precisar setar esse widget aqui nesse host, cara. Perfeito. Vamos ver. Acho que foi. E foi mesmo, o width está 500. Coisa linda! Mas mesmo assim, por algum motivo, esse aqui ainda parece estar menor, cara. Acho que é o padding desse carinha aqui, ó. Porque esse aqui tá diferente, meus amigos. Me explica um negócio desse. 375 por 40, 450. 140 de zoom. Deixa eu dar um zoom aqui. 140 de zoom. Agora esse aqui tá com 425 de tamanho. Ai, que desgrama, cara! É porque 425 aqui mesmo, burro. 425 pixels. Beleza, perfeito. Eu que tava colocando o tamanho errado. Mas, ó, já tá bem parecido, cara. Mas as cores aqui estão diferentes. 7171A. Por que que a minha cor aqui tá diferente? Ô Luiz, por que que a cor tá diferente, mano? Você quer com o seu? Tá diferente essa cor aqui, tô gostando. Que desgrama de cor que é essa aqui? OKLCH Meu Deus, cara, qual que é o hexadecimal disso? 73. Tá errado, não é 73. Não é 73, não é 73. Luiz, muted foreground. Tá errado só a corinha aqui, ó. Tá errado, muito errado. Temas diferentes. Por que que você tá com tema diferente? Por que você colocou um tema diferente aqui, mano? Não, mano, tem que ser o mesmo do chatzinho, cara. Botei o tema default aqui. Mas uma coisa é certa, já temos aqui, ó, um edit profile. Depois a gente vai ter que criar um outro carinha aqui. Ele tem, cara, ele tá com botão de save changes aqui, ó. Depois a gente vai ter que criar um botãozinho ali de X. Não, mano, a gente tem que deixar o tema igualzinho do ChatCN, igualzinho, porque senão a gente não consegue comparar direito aqui, mano. Aí fica ruim, pô, que eu quero pelo menos deixar aqui certinho. Quero que fique bem parecido, cara. Aqui a gente tem um name aqui, ó. E esse carinha aqui do lado. Então, Pedro Duarte, vamos tentar fazer, deixar já bem parecido aqui, ó. Pedro Duarte. Então, quando eu abrir, Pedro Duarte. Só que vou dar um div, não, nem mexe de vai, não, mano. Perfeito. Aqui eu dou um class aqui que vai ser flex. Gap 2. Vamos ver o que vai acontecer. Tem que ter uma line, né? Aí tem center. Oh, oh, tá começando a funcionar, hein? Beleza. Depois a gente vai ter que tratar tudo isso aqui. Aqui a gente vai ter que dar um class w-full. Perfeito. Eu não sei o que que o ChatGPT faz aqui, mano, mas ele— caramba, que desgrama que é essa! Ele dá um grid, velho. Sei que os caras fizeram na mão, eu tenho certeza. Oh, caramba, viu, mano? Vamos tentar fazer igual com a bosta, é claro, porque Eita, caramba! Class name, quem que bota class name aqui, gente? É class, pronto. Aqui, ó, porque o ChatGPT usa class name, né? O ângulo aqui, ó. Agora sim tá ficando legal. Text-right, não é class name não, cara, é class só. Agora as coisas estão ficando iguais, cara. Perfeito. Agora eu preciso colocar o próximo, que é username. Aqui, ó, username. Aí deixa o Copilot trabalhar para mim, mano. @peduart, username @peduart. Se eu apago, ele não mostra nada. Então vou tirar o placeholder. Meus amigos, olha a evolução que tivemos! Caramba, esse label tá gigante, velho! Caramba, velho, label, o tamanho desse negócio aqui, mano! Depois a gente tem que mudar, cara. Que a gente não tem algo para isso aqui ainda não, mas já temos isso, já temos isso. E aí, por último, mas não menos importante, a gente tem nosso footer. If config.z-ok text foi igual a null, não foi igual a null. E aqui a gente faz a mágica, z_button. Então, cara, aqui é só Aqui eu preciso importar o ButtonComponent. Usar de ButtonComponent. Pera aí, mano. Ô caramba, viu. Perfeito. Aí aqui, dizer OK Text. Ou deixa eu ver aqui, Dona Jesô, ele mostra o quê, mano? Mostra o quê, não é? Ok, perfeito. Melhor fazer assim. Beleza, então a gente vem aqui. Meu Deus, meus amigos, vocês estão vendo isso aqui, cara? Vocês estão vendo isso aqui? Vocês estão vendo? Vocês estão vendo o que que a gente fez aqui em 3 horas? 3 horas! Pera aí, deixa eu jogar isso aqui para cá e isso aqui para cá. Vocês estão vendo o que que a gente fez em 3 horas, mano? Do zero, do completo zero, do absoluto zero. Vocês estão vendo isso aqui? Vocês entendem o que que aconteceu aqui nessa live? Do absoluto zero já temos um modal do Angular que funciona, ele fecha sozinho. Ainda vou colocar, quando a gente apertar ESC, ele fechar, a gente vai colocar um um botãozinho de X aqui, ó, de ícone para a gente fechar também. A gente precisa, a gente precisa, e eu quero muito fazer isso aqui. Isso aqui eu não vou deixar passar não. Mas agora, o que que eu quero fazer, mano? Se deixar aqui, eu fico até 1 hora da manhã programando, cara. Esse aqui é bom demais. Mas se liga, mano, agora a gente vai fazer aquele Z1, ok? Eu quero salvar E eu quero mostrar mágica para vocês, meus amigos. Nossa, eu fiquei muito empolgado agora, cara. Meu Deus! Ah, Z1, ok. Instance. Olha isso aqui, mano. Olha isso aqui, olha isso aqui, olha isso aqui. Por enquanto não vai acontecer nada. Tá, que que a gente vai fazer agora aqui? Deixa eu pegar aqui no meu código o botão de OK. Aqui, um OK Click, e a gente vai fazer só isso aqui, ó. Se liga aqui. Aqui, aqui, save. Lembra que a gente criou, cara, aqui, ó, um OK triggered, que lá no dialog ref ele espera um trigger e seta? Então vamos ver se tá funcionando. No meu dialog ref eu tenho um trigger que quando eu clicar em salvar, olha que maravilha, ele chama action OK. E eu vou verificar, é um evento emitter? É um evento emitter? Não. É uma função? É uma função. Olha, cara, o meu trigger é uma função. Que que eu vou fazer, cara? Deixa eu botar um breakpoint aqui. Que que eu vou fazer agora? Eu vou chamar a função. Olha, a minha função tem o meu formulário. Que está dentro do meu fucking component. E agora eu consigo dar um console.log nos valores do meu formulário. Meu Deus, mano, eu fico muito louco com isso. Eu fico muito louco com isso. Meu Deus, cara, olha isso, mano. Oh, prevent dialog for closing. Não quero isso não, cara. Quero só dar um console.log. Pronto. Se eu clico aqui, ó, ele fecha o meu dialog, ele fecha o meu dialog. E olha isso aqui, mano, olha isso aqui. Fechei. Pedro Duarte. Não, eu quero— meu nome não é Pedro Duarte, meu nome é Samuel Ison, mais conhecido como Samuel Rizon deve, ó, já pegou todas as alterações do meu formulário que a gente tinha colocado um negócio lá, ó. Save. Pronto. Olha que coisa linda, olha que coisa linda! A gente tem aqui, ó, lindamente o valor do meu formulário. Quando que eu só precisei colocar aqui, mano, NZ1, OK. Com isso, com isso Toda vez que você criar um dialog, você cria um componente. Nesse componente você cria o seu formulário. Como eu disse, um formulário é um componente dinâmico. Eu vou passar as informações do meu componente. E aí, quando eu preciso criar um formulário, por exemplo, ah, formulário de editar para perfil, isso aqui, ó. Quando eu clicar em Save Changes, aqui eu vou fazer aquela maravilha lá do Supabase, cara, que eu já ensinei para vocês aqui nos vídeos, mano. Aqui eu vou chamar um this.profileApi.update e eu vou passar um instanceFormValue. Isso aqui, ó, pronto, cara. Vou deixar comentado para não dar erro, mas aqui, ó, com isso aqui a gente teria um dialogue de atualizar perfil, que atualizaria o perfil do usuário. Olha que coisa linda! Luiz mandou aqui: a concorrência faz isso. Deixa eu, peraí, peraí, peraí, peraí, deixa eu botar isso aqui. Cadê, cara? Preciso botar em outro lugar. Pronto, tá minha carinha aqui em cima. Ele falando: a concorrência faz isso, mas você tem que invocar uma entidade de outro universo para funcionar. Zard, why é qualidade! Olha que coisa linda, mano, que coisa linda, cara! Isso aqui tá bonito demais, mano. Já temos um modal, já temos um dialogue. Vai vendo que recebe um título e uma descrição. Se eu não passar a descrição, ele não vai mostrar a descrição. Lembra disso? Só edit profile. Se eu não passar o título, ele também não vai mostrar o título, cara. Ele vai mostrar só o meu modal. Se, se no OK text eu passar nulo, cadê? Qual carinha que eu tinha colocado aqui, ó? NzOkText string ou nulo, tá? Se eu passar nulo é porque eu não quero que tenha um botão, mano. Eu não quero que tem um botão de OK, então eu passo nulo. Se eu não passar nada, deixa eu voltar aqui para o Save Changes, ele vai deixar como OK, cara. Opa, não tá como OK não. NZOK Text deveria estar como OK aqui, cara. Deveria estar como OK aqui. Então eu vou ter que fazer essa alteração aqui mesmo. OK, text, ou OK, perfeito. Tem problema não, eu não me importo com isso, cara. Salvei. Então se eu não passar, ele vai dar um OK. E, e mesma coisa para o cancel, if config z-cancel-text aqui, ó, aqui, ó, on close click. Olha aí que maravilha! Olha aí que maravilha! Que coisa linda! Só que aqui não é variante não, mano, é z-type outline. Olha aí, caramba, ele tá sumindo com o negócio quando eu atualizo. Update do ângulo aqui, ó. Já temos aqui, ó, um OK e um cancel, mano. Ele já vem padrão definido aqui, ó, lindamente. Dando um zoom aqui para vocês verem melhor. Um OK e um cancel. Aqui eu tô passando esse shape change. Aqui, ó, pronto, pronto, pronto. Olha o que que temos aqui, que coisa mais linda, cara, que coisa mais linda! O close dele, mano, eu não sei como é que é, cara. Não quer um botãozinho aqui mesmo. Vamos fazer esse close aqui já de uma vez para a gente terminar a live. Eu só posso, eu tenho 15 minutos, mano. A patroa aqui só deixa eu ir até 11 horas, tá bom? Mas eu quero aqui no— cadê? Close. Deixa eu ver aqui no meu código o close que eu tinha feito, mano. Close. Era um botãozinho mesmo. Z button. Z-type, caramba, até esqueci os tipos que a gente tem, mano. Variantes, Z-type, default, destrutural, ghost. Então a Z-type é ghost, tá bom, é um ghost aqui. Vou fazer isso aqui, ó. Eita caramba, eu acho que eu não preciso disso aqui tudo não, tá? Eu acho. Transition hover, sei que ele tá criando um botão todo de novo. Não preciso disso, vai ser um botão normal. Eu só quero deixar ele lá em cima agora. Icon, cara. E caramba, não lembro como é que a gente tá usando os ícones aqui, mano. On va— qu'est-ce que tu as dans l'équipe, Bâton? Quoi que tu as, c'est le problème. Sei para onde que foi que Button foi parar ali não, mas agora que a gente tem um Button aqui, temos um Button aqui. Agora a grande questão é o ícone. Lucid Icons Close. Tem close, X. Caramba, aí com X do X-Men. O ícone já tá aqui, coisa linda! O ícone já está aqui. Gigante, mano. Então vou dar um zsize aqui, sm, para ele ficar menorzinho. Perfeito, ficou menor. Cadê o button? Button demo size. This size is same. Não sei se isso aqui tem diferença, mas não gostei disso aqui não, mano. Depois a gente vai ter que melhorar um pouquinho e eu tô achando que ele tá um um pouco diferente aqui, mano. É porque a gente tá colocando com botão aqui no ChatCN. Talvez se a gente fizer como eles estão fazendo aqui, ó, por causa disso. Então aqui no meu botão, right 0, top 0. Se eu fizer isso— salve, Jean! E aí, mano, quanto tempo! Como é que você tá? Tranquilo? Você tá bom, mano? Tô aqui já no finalzinho, mano, acabando de fazer um modal completo do Angular aqui ao vivaço. Pô, que da hora, mano, que da hora! Que bom saber disso, velho. Essa área é boa, mano. Eu sou suspeito para falar, eu gosto demais de programar, mano. Sou muito suspeito para falar, cara. É, mano, botão, ele sempre vai ter esse negocinho aqui, cara. Faculdade, que maravilha! Faculdade é bom demais. Deixa eu botar um aqui. Perfeito, mano, por enquanto tá ótimo. Olha aqui, meus amigos, que maravilha tá isso aqui, mano! Um botão de close, edit profile, nome. Username, cancel, save changes. Clica aqui, ele cancela. Se eu clico aqui, ele já me mostra os valores do formulário quando eu clico. Fala, Caio! Deixa eu voltar aqui para live, aqui, ó. Deixa eu botar aqui na tela perguntinha do Caio, aqui, ó. Volta para cá, aqui, ó. Tá fazendo um chat pro Angular? Exato, meu amigo. A gente tá com um projeto que a gente tá passando, nossa ideia, né, criar uma biblioteca nova para o Angular chamada ZardUI. Eu já mandei aqui, é uma biblioteca open source. Deixa eu mostrar aqui a telinha para você, ó. A gente já tá com uma versão, a gente tá em alpha, tem pouco tempo que a gente começou a desenvolver. Mas a nossa ideia é criar uma biblioteca, o ChatCN pro Angular. A gente não tem um ChatCN pro Angular e a gente tá fazendo isso aqui ao vivo toda quinta-feira, faço live aqui. A gente já tem uma galera com que já fez vários componentes aqui, já criou várias coisas, a gente já tem bastante coisa. Mas a gente está criando aqui os hard UI para quem quiser dá uma olhada aqui, o link. No link a gente tem o GitHub, que é open source. A gente tem várias coisas aqui, e aqui toda quinta eu tô fazendo essa live aqui, criando o ChatCN para o Angular. Hoje eu comecei às 8 horas da noite fazer o dialog modal, fiz ele completamente do zero. Depois pode voltar aqui na live A gente criou tudo isso aqui hoje, cara. O componente, o dialog aqui, as opções do componente, como que a gente cria, como que a gente testa. Então estamos fazendo aqui, cara, já tão bem parecido com o que é do ChatCN. Você dá uma olhada aqui, a gente sempre tá se comparando, né? Então a nossa ideia é fazer o ChatCN, ter a beleza do ChatCN com experiência de desenvolvimento do ng-zorro. Então você quer o do chat CN, e esse aqui por enquanto tá sendo nosso. Começamos hoje e já estamos nessa etapa aqui, mano. Aqui, ó, 140%. Fala se não tá parecido, meus amigos! Fala se não tá parecido. É só a fonte, algumas coisas estão diferentes porque o bendito Luiz tá mexendo ali. O Brenner tá falando aqui, ó. Usando a classe hover-bg-transparent a gente consegue remover esse carinha aqui. Vamos ver se o Brenner tá certo. Hover-bg, eita caramba, transparente. Boa, mano! Só que aí a gente acaba perdendo um pouco da movimentação aqui, ó, porque aqui no ChatGPT ele tem esse negócio aqui, mano, só que ele bota aqui, né, cara? Cadê aqui o— aqui, ó, hover opacity 100, focus, ring point. Ele tem alguma coisinha aqui que ele coloca, cara. Eu não achei ruim não, cara, eu não achei de Acho que como eu coloquei um top aqui, ó, uma margem, um padding aqui para ele, mano, eu acho de boa por enquanto tá assim, ó. Acho que fica até legal, vejo problema não. Mas valeu pela sugestão, mano, que a coisa a gente muda isso aqui depois. Pô, mano, isso aqui é verdade, é porque por enquanto eu estou usando, mano, o stream Restream, aí, ó. E aí eu tenho que pagar, mano, para fazer, tem que pagar para fazer a live em 1080, se eu não me engano, tá bom? Mas eu vou dar uma olhadinha nisso aqui, que aí eu consigo tirar aqui a logo daqui do Restream também, da live, tudo mais. E a segunda live que eu tô fazendo, mano, no canal, mas vou melhorar aqui para trazer uma qualidade melhor para vocês, meus amigos. Parei de ficar, parei de ficar mudando de tema e voltei para o tema default do VS Code. Pô, mano, eu uso um tema, mano, tema é foda, mano. Eu uso um tema só, cara, já tem muito tempo, mano. Nem sei que tema que é mais, cara. Ctrl+Shift+P, theme, color theme aqui, ó, dark modern. Só isso, mano, mais nada. A única coisa que eu uso diferente aqui no VS Code, mano, tem algumas configurações aqui, né, mas é a fonte, mano. Essa fonte aqui que deixa esse cara, esse eu gosto aqui, mano. Quando você cria aqui, ó, ele já igual, igual, fica assim, igual, igual, igual, fica assim, ó. Aí se você coloca um assim, ó, ele já cria. Eu tenho uma fonte um pouco diferente. Só uma besteirinha para ficar mais bonitinho aqui, tá? Aí outra coisa que eu esqueci aqui, ó, é se o z, o config z-footer foi igual, igual a nulo, tem que ser diferente de nulo. Porque se eu passar— ah não, mano, esse aqui eu já fiz, caramba! O footer tá aqui, ó, tem que ser isso aqui, ó, aqui no footer. Porque se eu passar o config do footer nulo, z-footer igual a null, eu não quero que ele mostre, eu não quero que ele mostre o footer. Perfeito, tá? Então aqui já foi também. E eu tenho também uma outra configuração do nada, puxei para cá, mano, foi mal, galera. Deixa eu tirar daqui, ó. A gente tem também, cara, closeable. A gente tem aqui no ng-zorro aqui, ó, uma configuração. Se a gente close, cadê? FT close não. Aqui, ó, z-closeable. Então a gente vai criar esse aqui também, ó, z_closeable. O boolean ele já vai para true, porque quando o x-bunters visible on top of the world, tá? Mas basicamente é esse carinha aqui, ó, a gente bota um if config.z_closeable. Vamos ver se ele vai aparecer. Não tá aparecendo, porque eu acho que quando a gente tá dando esses Add Dialog Options aqui no Service, cadê, cadê, cadê, cadê, cadê, cadê, ele não tá pegando as os inícios daqui das minhas variáveis. StartDialogOptions. Tá, faz sentido, cara, porque eu tô setando o dialog options aqui. Aí ele tá passando como— cadê, cadê, cadê, cara? Me perdi aqui, mano. Aqui. Então ele tá passando como nulo, cara, no z_closeable aqui, ó. Só que aqui ele me deixa como se eu tivesse que passar obrigatoriamente esse carinha aqui, cara. Só que eu não quero passar ele obrigatoriamente aqui, mano. Então, então, se eu não passar, ele vai mostrar. Se eu passar aqui o z-closable como true, ele vai mostrar. Perfeito. Só que se eu passar como false, ele não vai mostrar. Perfeito. Só que de qualquer forma a gente fecha aqui clicando fora, tá? Então tem como aqui também, eu sei que Aqui, ó, mask closable. Esse aqui é um outro que a gente tem. Então tem o Z closable e eu tenho Z, ó, pequeno, Z mask closable. Porque a gente tem esse mask closable Esse mask closeable vai ficar aqui, ó. Aqui tem esse carinha aqui. If this.config.mask closeable, undefined. Então, se eu não passar o mask closeable, ele vai fechar. Se eu passar como true, z.mask.closeable como true, ele vai fechar quando eu clicar fora. E se eu passar como false, ele não vai fechar quando eu clicar fora. Perfeito, já tá ficando do jeito isso aqui, meus amigos. Então, se eu fecho por aqui, eu fecho por aqui. E aí, se eu tiro esses dois, a gente tem um modal que fecha tanto por aqui quanto pelo cancel e quanto aqui por fora. Show! Deixa eu ler uns comentários aqui, deixa eu dar uma olhadinha aqui nos comentários. Aqui, ó, parei de ficar mudando de tema, voltei para o tema default do VS Code. Falou que já se inscreveu para acompanhar mais. Seja bem-vindo, meu amigo! A gente tem uma comunidade no WhatsApp também, mano. Que a gente bate maior papo por lá. Deixa eu botar aqui, ó, tem um QR code se quiser acessar, você tá no celular, mas eu também tenho um link aqui, ó, caso você queira acessar. Deixa eu mandar aqui no chat. Então, comunidade por lá, a gente fala sobre programação, a gente tem um grupo dos Arduino também, e a gente tem até um grupo, mano, isso aqui, isso aqui é novo, tá? A gente tem um grupo, chama Refatorando o Shape. Que a gente tá se ajudando a fazer atividade física, mano. Está bem da hora, bem, bem da hora. Então estamos com grupo lá no aplicativo do Gym Rats e a galera tá, tá sangue no olho fazendo atividade física todo dia para ficar lá em primeiro no Gym Rats. Bem da hora, mano. Samuel, tem PC da NASA? O negócio é diferente, não é da NASA não, mano. Pô, já passou do meu horário aqui, mano. Já estamos finalizando a live, tá, galera? Eu vou só fazer essas perguntinhas finais aqui. Você usa o Semantic Highlights, mano? Eu acho que não, cara. De extensão? Não, não uso, mano. Nem sei o que que isso aqui faz, mano. Não uso não, mas ele já colore pelo tema aqui, mano, se eu não me engano, tá? Outra coisa, eu tô indo para a primeira vaga de júnior na segunda. Que da hora, mano! Começa uma empresa grande, porém tô com receio porque eu sou júnior. Empresa, mano, empresa grande é bom para júnior. Você vai aprender, você vai apanhar bastante. Apanhar no sentido de lidar com muitas coisas e tudo mais. Mas é bom, cara. Eu comecei, cara, minha primeira vaga, vou te falar, cara, minha história como deve. Minha primeira entrevista de emprego na vida, mano, de emprego na vida, foi na TOTUS, que é uma empresa gigante. Minha primeira entrevista de emprego, e lá eu passei. Eu lembro do meu primeiro dia no trabalho, mano. Imagina, um menino noob, não sabia de nada. Eu tinha o quê, 20 anos de idade, 20 20 anos de idade que eu tinha, se eu não me engano, cara. E aí eu fui para lá, primeiro dia de trabalho, chega o meu chefe, fala com tipo assim, ah, não sei o quê, beleza, me apresenta para galera. Aí eu lembro até hoje do Dundinha, cara, o cara engraçado, mano. Ele, o meu chefe virou para ele, ó, dá uma tarefa para ele aqui. Aí era presencial, triste, era presencial, 2016, vai fazer 10 anos que eu tô na área, mano, 2016. Aí o Dundinha vira para mim, cara, você sabe ligar o computador, mano? 'Você sabe conectar os cabos do computador?' Meu computador tava desligado. 'Sabe conectar os cabos do computador?' Eu falei: 'Sei, cara.' 'Uai, óbvio que eu sei.' 'Então liga lá.' Minha primeira tarefa foi essa, mano. Foi engraçado, cara. Mas fica com medo não, mano. Fica com medo não. Você é júnior, mano, você tá aprendendo. Com certeza vai ter gente para te ajudar, vai ter gente para te ensinar. A gente tá aqui também para ajudar, criando conteúdo. A galera da comunidade é bem da hora também. Então se você tiver dúvida, eu não sei se você tá, vai começar em Anglo React, ou qualquer outra coisa, se a front-end, back-end. Mas boa sorte, mano, boa sorte. Conta com a gente aí para ajudar você, fechou? A outra aqui, ó. Salve, meu amigo Adam! Esse aqui é meu parceiro de trabalho, meu amigão. Programando essas horas, você é louco, não compensa. Pois é, mano, 11 horas da noite na quinta-feira, eu tô aqui programando ao vivaço. Quem sabe faz ao vivo. Não, não, settings mesmo. Acho que você tá falando lá do highlights, que não uso não, mano. João aqui, ó. João Pedro Barros: parabéns pelo conteúdo, parceiro. Comecei no React, hoje tô Angular e engateando no Java. Caramba, troquei de projeto no trampo e tá sendo da hora demais. Que bom, mano, que bom. Você tá no Angular, você tá aqui no canal certo. Aqui eu sou fanboy de Angular mesmo. Eu falo mal de React, React é ruim. React não presta, tem muita coisa boa. React tem muita coisa, cara, tem muito conteúdo, tem, mas falta de Angular. Por isso que a gente tá aqui no canal lutando para falar bem do Angular, compartilhar do Angular, porque o Angular era muito bom. Agora, Java, você já me pegou, Java, Java, já vamos dar gatilhos. Ai, ai, vamos lá, Caio, daqui, ó. Então, não sei nem o horário de trabalho ainda, recebi a proposta, aceitei tudo, recebi a matrícula, porém vou assinar o contrato da admissão é na segunda. Manhã eu sei de mais nada. Pô, mano, é isso, mano. Primeiro emprego é isso aí, que tudo dê certo, mano. Você entrar lá na comunidade assim, você na segunda lá dá notícia para gente. Sei horário de nada, sei que é remoto, mas não mandaram as paradas. É assim mesmo, mano. Você vai ver quando você entrar, velho, você vai demorar. Dependendo da empresa, e principalmente empresa grande, você vai começar a programar E olha lá, mês que vem é um mês de onboarding, até você receber as coisas da empresa, até eles te liberarem acesso, até eles fazerem, mano, demora, mano, demora, demora. Conheço gente que, principalmente se for banco, você entrar em projeto de banco, mano, pode esperar 2 meses para você conseguir um acesso. Vai ser de react. Ai meu Deus, boa sorte, meu amigo. Boa sorte! Mas React é bom, mano. Que bom que você conseguiu uma vaga de React, mano. É difícil, mano, tem muita gente, muito dev React por aí, mano. Ayrton, e aí, meu amigo? Pera aí que tem um, pareceu um negócio aqui. Socorro, pensei que tinha acabado a live. Acho que tá por aí ainda. Espero que esteja. Você é fera, hein, Samuel! Tem indicação de curso Angular? Valeu, mano, valeu! Tamo aqui compartilhando conteúdo, ajudando a galera que tá começando aí também, a galera que já é mais avançada também. Tamo aqui, brigadão pelo apoio de vocês. Indicação de curso Angular, mano, se você tiver começando, começa pelo da Loiane. A Loiane, ela ensina muito básico já do Angular, básico bem feito, sabe? Então ela ensina tudo que você precisa aprender. Então é só botar Loiane Angular na internet, no Google aí mesmo, que você vai achar um curso. É um curso gratuito, é um dos mais completos que tem. Acho que ela fez na versão 12 do Angular. Hoje a gente tá, acabamos de lançar a 20, mas tem tipo assim a base inteira do Angular que você precisa tá lá no curso dela. A gente aqui no meu canal, cara, eu tenho, eu tenho uma série de vídeos que tá, a gente tá desenvolvendo ainda, mas eu tô desenvolvendo um SaaS do zero aqui no canal com Angular, só que aí já é um conteúdo mais avançado, já é um conteúdo para quem já sabe o Angular. Só que aqui eu já falo, cara, eu já mostrando para vocês um projeto real, um projeto que eu trabalho, a forma estrutura, tem estrutura de pastas. Isso não tem no curso da Loiane. E nenhum curso, nenhum lugar você vai encontrar um vídeo sobre como é que estrutura um projeto para ser escalável no Angular. E aqui já tem no meu canal, só dá uma olhada aqui no canal, tá bom? Mas tem curso também, cara. Tem o Henrique Custódia da Coldimension que também tá, vai lançar um curso de Angular básico. É um cara que a gente conhece, ele tá aqui apoiando a gente nos RDY também. Então É um cara legal para você ficar de olho. Ele vai lançar um curso dele daqui a pouco, se eu não me engano. Mas esse que eu tenho para indicar, cara, tá bom? Você, graças a Deus, tá fazendo conteúdo do ângulo. Tá precisando, mano. Eu comecei o canal porque precisava mesmo, cara. Ninguém fala de ângulo aqui no Brasil, mano. Conteúdo que tem é só na gringa e é bem pouco também. Vamos para o próximo aqui. Imagina, minha admissão é dia 2, porém a reunião Isso aqui é o puro suco de empresa grande, mano. Duas, quase uma semana, duas semanas depois da sua admissão que você vai fazer a sua reunião, primeira reunião. Isso é bom demais, cara. Eu amo empresa grande. A festa do use effect, meu Deus, sai até arrepio ouvir uns trem desse, mano. Aí, ó, via vaga através de, mano, isso é uma coisa que a galera não entende hoje, cara. Melhor coisa de você conseguir vaga é por indicação. Então, cara, tem que conhecer gente, mano. Comunidade tá aí para isso, conhecer pessoa. Galera indica. Empresa que eu trampo hoje foi o Adam, Adam que tava aqui na live aqui, que me indicou. Eu trampo hoje para uma empresa da gringa lá dos Estados Unidos, foi ele que me indicou, mano. Que se não for isso, mano, hoje em dia É difícil mesmo você conseguir vaga, cara. Aí, tô começando, não quero pegar padrão de projeto, boas práticas. Boa, mano, então tá aqui no canal certo, mano. Pode seguir lá a playlist Criando um SaaS do Zero. Lá eu tô criando bastante coisa, é bastante coisa avançada mesmo, que eu já uso já bastante tempo, que eu demorei muito tempo para aprender, e eu tô mandando aqui de graça para todo mundo. Não tem objetivo nenhum de ganhar dinheiro em cima da galera não, mano. Aqui eu tô criando conteúdo mesmo que nunca teve aqui, nunca vi, nunca achei, para criar, aprender na marra e tá por aí mesmo. Show, meu amigo! Se é isso que você precisa, se inscreve aí, deixa o seu like aqui no vídeo também. E todo vídeo que você achar aí, todo vídeo você abrir meu e dá seu like também, manda um comentário lá que ajuda para criar os conteúdos também. Fechou? Aqui tem um grupo do WhatsApp, que em cima tem um grupo, o link do grupo do WhatsApp, tá bom? Se você quiser entrar na comunidade. E por último, aqui finalizando, mano, o Caio aqui falando, pô, o papo tá bom, mano, desse eu ficava aqui o resto da noite com vocês, galera. Mas semana que vem a gente tá por aqui. Mas o Caio aqui tá falando, provavelmente vão mandar as coisas depois de segunda, depois que assinar o contrato. E é isso, meus amigos. Cara, que bom, mano, que da hora tá aqui com vocês. Muitíssimo obrigado a todo mundo que veio, muitíssimo obrigado todo mundo que participou. A live vai ficar gravada como sempre fica, tá bom? Valeu pela galera que chegou nova aqui, fico muito feliz, cara. A galera que chega aqui nova no canal, muito feliz de estar aqui com vocês, criando esse tipo de conteúdo, me ajuda bastante também. Quero dedicar e deixar aqui, mano, uma dedicatória ao meu filho, porque hoje tá fazendo 2 meses que ele se foi. Meu filhinho Isaac, de um aninho. No último vídeo que eu postei aqui no canal eu falei sobre ele, tá aqui o Paçoquinha, meu parceiro. Mas quero dedicar esse vídeo ao meu filho, mano. Meu filho, que foi a melhor coisa que aconteceu na minha vida. A gente ainda tá lidando muito com esse processo de perda dele. Ele tinha só um aninho e tem sido muito difícil para gente. A gente começou, comecei a criar conteúdo no início do ano, e aí em março, né, 2, dia 29 de março, ele se foi. Então fiquei um bom tempo sem criar conteúdo aqui. E tá aqui com vocês, tá aqui conversando, compartilhando as coisas com vocês, é bom. Para distrair um pouco a cabeça também, não ficar pensando nas coisas ruins que aconteceram. O grupo lá do WhatsApp também, do Refatorando Shape, que a gente tem lá, o Duginho Red está ajudando, e minha esposa também, a fazer atividade física, que é muito importante para a gente que fica sentado o dia inteiro. Então, meus amigos, eu agradeço muito a todo mundo que tem me ajudado aqui nesse processo de reconstrução da minha vida, e vocês são muito importantes para a gente. Obrigado pelo apoio, obrigado pelo carinho, obrigado todo mundo que apoia aqui a live, essas coisas. Criar conteúdo aqui é um desafio, mas obrigado, galera. Deus tem cuidado muito da gente nesse momento também. E valeu, Caio, pela mensagem. E dedico essa segunda live do canal a meu pequeno Zazaque, o amor da minha vida. E que um dia eu espero encontrar com ele. Valeu, meus amigos! Eu vou fechar por aqui. 3 horas e 14 de live, tamo junto! Semana que vem, quinta-feira, 8 horas da noite, a gente tá aqui de novo e a gente vai continuar criando aqui o conteúdo. A gente vai querer continuar criando modal, fizemos bastante coisa. Aí semana que vem a gente abre aqui de novo e continua de onde a gente parou para deixar tudo certinho, finalizar alguns últimos ajustes, mas já tá com bastante coisa desenvolvida. A gente fez bastante coisa aqui em 3 horas, fechou, meus amigos? Cara, obrigado de coração. Vou dar um tchau para vocês com Paçoca aqui no meu colo também. Paçoca, dá tchau para galera que tá aqui. Fala, dá tchau, dá tchau para galera. Esse aqui é o Paçoquinha, meu parceiro. Valeu, meus amigos, estamos juntos. Muitíssimo obrigado. Vocês são fera demais. Obrigado por acompanhar e tá por aqui, fechou? Te vejo, vejo vocês lá na comunidade que tá com o link aqui na descrição. Tamo junto, com Deus, é nós!