A biblioteca POUI possibilita a customização de cores e fontes através da utilização de temas, para a TOTVS foi criado o pacote https://github.com/totvs/po-theme-totvs.
Porém os logos e imagens são propriedades intelectuais, por isso eles foram separados em um pacote e disponibilizado no npm privado mantido pela engenharia no endereço (https://npm.totvs.io/)
Esse tutorial demonstrará como utilizar esses recursos na sua aplicação, o exemplo completo está nesse repositório ( https://code.engpro.totvs.com.br/POUI-TOTVS/exemplo_totvs_common_assets)
Guia passo a passo
Em uma aplicação Angular com o POUI e o tema da TOTVS já instalados e configurados siga os seguintes passos:
Configure seu npm para o npm privado utilizando o seguinte comando:
npm set registry https://npm.totvs.io/
Realize o login com o comando a seguir e entre com seu usuário(sem o @totvs.com.br) e senha de rede da totvs.
npm login
- Instale a biblioteca de logos e imagens com o comando:
npm install @totvs/common-assets
- No seu projeto no arquivo angular.json localize a tag assets e adicione o seguinte conteúdo:
"assets": [ ... { "glob": "**/*", "input": "./node_modules/@totvs/common-assets/common-assets/logos/", "output": "assets/images" } ]
- Agora você pode referenciar as imagens direto da pasta assets. A seguir um exemplo de uso com o componente Page Login:
<po-page-login p-product-name="Human Resources" p-logo="./assets/images/totvs/totvs.svg" p-secondary-logo="./assets/images/totvs/totvs.svg" > </po-page-login>