diff --git a/.eslintrc.json b/.eslintrc.json
deleted file mode 100644
index efa2465b8c..0000000000
--- a/.eslintrc.json
+++ /dev/null
@@ -1,278 +0,0 @@
-{
- "root": true,
- "ignorePatterns": ["projects/**/*"],
- "overrides": [
- {
- "files": ["*.ts"],
- "parserOptions": {
- "project": ["tsconfig.json"],
- "createDefaultProgram": true
- },
- "extends": [
- "plugin:@typescript-eslint/recommended",
- "plugin:@angular-eslint/recommended",
- "plugin:@angular-eslint/template/process-inline-templates"
- ],
- "plugins": ["sonarjs"],
- "rules": {
- "@typescript-eslint/no-explicit-any": "off",
- "@typescript-eslint/no-this-alias": "off",
- "@typescript-eslint/no-unused-vars": "off",
- "@typescript-eslint/no-array-constructor": "off",
- "@angular-eslint/component-selector": [
- "error",
- {
- "type": ["element", "attribute"],
- "prefix": "",
- "style": "kebab-case"
- }
- ],
- "@angular-eslint/directive-class-suffix": "off",
- "@angular-eslint/directive-selector": [
- "error",
- {
- "type": "attribute",
- "prefix": "",
- "style": "kebab-case"
- }
- ],
- "@angular-eslint/no-input-rename": "off",
- "@angular-eslint/no-output-rename": "off",
- "@angular-eslint/no-output-native": "off",
- "@angular-eslint/no-output-on-prefix": "off",
- "@angular-eslint/no-conflicting-lifecycle": "off",
- "@typescript-eslint/array-type": [
- "error",
- {
- "default": "generic"
- }
- ],
- "@typescript-eslint/await-thenable": "error",
- "@typescript-eslint/ban-types": [
- "off",
- {
- "types": {
- "String": {
- "message": "Use string instead",
- "fixWith": "string"
- },
- "Boolean": {
- "message": "Use boolean instead",
- "fixWith": "boolean"
- },
- "Number": {
- "message": "Use number instead",
- "fixWith": "number"
- }
- }
- }
- ],
- "@typescript-eslint/consistent-type-assertions": "off",
- "@typescript-eslint/consistent-type-definitions": "error",
- "@typescript-eslint/dot-notation": "off",
- "@typescript-eslint/explicit-member-accessibility": [
- "off",
- {
- "accessibility": "explicit"
- }
- ],
- "@typescript-eslint/member-delimiter-style": [
- "off",
- {
- "multiline": {
- "delimiter": "none",
- "requireLast": true
- },
- "singleline": {
- "delimiter": "semi",
- "requireLast": false
- }
- }
- ],
- "@typescript-eslint/no-empty-interface": "off",
- "@typescript-eslint/no-for-in-array": "error",
- "@typescript-eslint/no-inferrable-types": [
- "off",
- {
- "ignoreParameters": true
- }
- ],
- "@typescript-eslint/no-non-null-assertion": "off",
- "@typescript-eslint/no-unnecessary-type-assertion": "error",
- "@typescript-eslint/no-unused-expressions": "off",
- "@typescript-eslint/no-var-requires": "error",
- "@typescript-eslint/prefer-for-of": "off",
- "@typescript-eslint/quotes": [
- "off",
- "single",
- {
- "allowTemplateLiterals": true
- }
- ],
- "@typescript-eslint/require-array-sort-compare": [
- "error",
- {
- "ignoreStringArrays": true
- }
- ],
- "@typescript-eslint/semi": ["off", null],
- "@typescript-eslint/type-annotation-spacing": "off",
- "camelcase": "off",
- "@typescript-eslint/naming-convention": [
- "error",
- {
- "selector": "default",
- "format": ["camelCase"]
- },
- {
- "selector": "variable",
- "format": ["camelCase", "UPPER_CASE", "snake_case", "PascalCase"],
- "leadingUnderscore": "allow"
- },
- {
- "selector": "import",
- "format": ["camelCase", "PascalCase"],
- "leadingUnderscore": "allow"
- },
- {
- "selector": "classProperty",
- "format": ["camelCase", "UPPER_CASE", "snake_case", "PascalCase"],
- "leadingUnderscore": "allow"
- },
- {
- "selector": "parameter",
- "format": ["camelCase"],
- "leadingUnderscore": "allow"
- },
- {
- "selector": "memberLike",
- "modifiers": ["private"],
- "format": ["camelCase"],
- "leadingUnderscore": "allow"
- },
- {
- "selector": "typeLike",
- "format": ["PascalCase", "camelCase"]
- },
- {
- "selector": "enumMember",
- "format": ["UPPER_CASE", "camelCase", "PascalCase"],
- "leadingUnderscore": "allow"
- },
- {
- "selector": ["objectLiteralMethod"],
- "format": ["PascalCase", "camelCase", "snake_case", "UPPER_CASE"],
- "leadingUnderscore": "allow"
- },
- {
- "selector": ["objectLiteralProperty"],
- "format": null,
- "leadingUnderscore": "allow"
- },
- {
- "selector": "function",
- "format": ["PascalCase", "camelCase"],
- "leadingUnderscore": "allow"
- }
- ],
- "@typescript-eslint/member-ordering": [
- "error",
- {
- "default": ["signature", "field", "constructor", "method"]
- }
- ],
- "arrow-parens": ["off", "always"],
- "arrow-body-style": ["error", "as-needed"],
- "brace-style": ["off", "off"],
- "default-case-last": "error",
- "dot-notation": "off",
- "eol-last": "off",
- "id-blacklist": "off",
- "id-match": "off",
- "indent": "off",
- "linebreak-style": "off",
- "max-len": "off",
- "max-lines-per-function": [
- "off",
- {
- "max": 200
- }
- ],
- "max-params": [
- "error",
- {
- "max": 8
- }
- ],
- "new-parens": "off",
- "newline-per-chained-call": "off",
- "no-empty-function": "off",
- "no-empty-pattern": "off",
- "no-extra-parens": "off",
- "no-extra-semi": "error",
- "no-irregular-whitespace": "off",
- "no-multi-str": "error",
- "no-self-assign": "error",
- "no-shadow": "off",
- "no-trailing-spaces": "off",
- "no-underscore-dangle": "off",
- "no-unused-expressions": [
- "error",
- {
- "allowTernary": true
- }
- ],
- "no-use-before-define": "off",
- "object-shorthand": "off",
- "padded-blocks": [
- "off",
- {
- "blocks": "never"
- },
- {
- "allowSingleLineBlocks": true
- }
- ],
- "prefer-arrow/prefer-arrow-functions": "off",
- "quote-props": "off",
- "jsdoc/no-types": "off",
- "jsdoc/newline-after-description": "off",
- "semi": "off",
- "sonarjs/cognitive-complexity": "off",
- "sonarjs/max-switch-cases": "error",
- "sonarjs/no-all-duplicated-branches": "error",
- "sonarjs/no-collapsible-if": "error",
- "sonarjs/no-collection-size-mischeck": "error",
- "sonarjs/no-duplicate-string": "off",
- "sonarjs/no-duplicated-branches": "off",
- "sonarjs/no-element-overwrite": "error",
- "sonarjs/no-identical-conditions": "error",
- "sonarjs/no-identical-expressions": "error",
- "sonarjs/no-identical-functions": "off",
- "sonarjs/no-inverted-boolean-check": "error",
- "sonarjs/no-one-iteration-loop": "off",
- "sonarjs/no-redundant-boolean": "error",
- "sonarjs/no-redundant-jump": "error",
- "sonarjs/no-same-line-conditional": "error",
- "sonarjs/no-small-switch": "error",
- "sonarjs/no-unused-collection": "error",
- "sonarjs/no-use-of-empty-return-value": "error",
- "sonarjs/no-useless-catch": "error",
- "sonarjs/prefer-immediate-return": "error",
- "space-before-function-paren": "off",
- "space-in-parens": ["off", "never"],
- "@angular-eslint/prefer-standalone": "off",
- "@typescript-eslint/no-unsafe-function-type": "off",
- "@typescript-eslint/no-empty-object-type": "off",
- "@angular-eslint/prefer-inject": "off"
- }
- },
- {
- "files": ["*.html"],
- "extends": ["plugin:@angular-eslint/template/recommended"],
- "rules": {
- "@angular-eslint/template/prefer-control-flow": "warn"
- }
- }
- ]
-}
diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
index 556f001e5f..c45949889b 100644
--- a/.github/ISSUE_TEMPLATE/bug_report.md
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -10,7 +10,7 @@ assignees: ''
#### Reprodução
-Utilize StackBlitz (https://stackblitz.com/edit/po-ui) para reproduzir o bug relatado na issue.
+Utilize StackBlitz (https://stackblitz.com/edit/poui-module) para reproduzir o bug relatado na issue.
Passos para reproduzir:
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index e33fb6c51b..eacb97c1cc 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -94,6 +94,7 @@ jobs:
node-version: 24
- run: npm i
+ - run: npm run build:schematics
- run: npm run build:ui:lite
- run: npm run test:templates
- run: npm run test:templates:schematics
@@ -112,6 +113,7 @@ jobs:
node-version: 24
- run: npm i
+ - run: npm run build:schematics
- run: npm run test:code-editor
- run: npm run test:code-editor:schematics
@@ -178,6 +180,7 @@ jobs:
node-version: 24
- run: npm i
+ - run: npm run build:schematics
- run: npm run build:storage:lite
- run: npm run test:sync
- run: npm run test:sync:schematics
diff --git a/.github/workflows/publish_po_angular_ci.yml b/.github/workflows/publish_po_angular_ci.yml
index cbd8fa6446..a04ae8a8a7 100644
--- a/.github/workflows/publish_po_angular_ci.yml
+++ b/.github/workflows/publish_po_angular_ci.yml
@@ -58,7 +58,7 @@ jobs:
;;
next)
echo "npm_tag=next" >> "$GITHUB_OUTPUT"
- echo "required_branch=refs/heads/master" >> "$GITHUB_OUTPUT"
+ echo "required_branch=refs/heads/22.x.x" >> "$GITHUB_OUTPUT"
echo "with_mcp=true" >> "$GITHUB_OUTPUT"
;;
latest)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index e00cb74112..4033c4ea7d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,47 @@
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
+## [22.0.0-rc.0](https://github.com/po-ui/po-angular/compare/v22.0.0-next.0...v22.0.0-rc.0) (2026-10-28)
+
+### Features
+
+* **schematics:** detecta e preserva o nome da classe do App ([155530f](https://github.com/po-ui/po-angular/commit/155530fe7baa7db5fe958900c98582487979d72c))
+
+## [22.0.0-next.0](https://github.com/po-ui/po-angular/compare/v21.33.0...v22.0.0-next.0) (2026-10-09)
+
+
+### ⚠ BREAKING CHANGES
+
+* **schematics:** removidos os schematics de ng generate de páginas
+
+Os comandos "ng generate @po-ui/ng-templates:po-page-*" e
+"ng generate @po-ui/ng-components:po-page-*" para geração de páginas
+deixam de existir. A alternativa recomendada passa a ser o uso do
+MCP do PO UI para geração de páginas e componentes, conforme a
+documentação em https://po-ui.io/documentation/ia-tools-mcp.
+
+* **gauge:** removido componente po-gauge
+
+O componente po-gauge foi removido por completo da biblioteca.
+Utilize o po-chart com type=gauge como alternativa. A migração pode
+ser aplicada automaticamente via ng update do PO UI para a v22.
+
+Antes:
+
+
+Depois:
+
+
+### Features
+
+* **angular:** atualiza projeto para o Angular 22 ([cd1917c](https://github.com/po-ui/po-angular/commit/cd1917c47c9d42a3f38cee3da891282d52746c2e))
+* **gauge:** remove componente po-gauge depreciado ([8166802](https://github.com/po-ui/po-angular/commit/8166802a6571f7631d5aa3e7ad5b96a41a2c7fba))
+* **schematics:** remove ng generate de páginas e templates ([2900b06](https://github.com/po-ui/po-angular/commit/2900b06370dcd9485f0b53ae05d460383b00b563))
+
### [21.35.0](https://github.com/po-ui/po-angular/compare/v21.34.1...v21.35.0) (2026-10-27)
Compatibilidade com @totvs/thf-components@21.35.0
diff --git a/README.md b/README.md
index 836d8f29c2..1e1d6c255e 100644
--- a/README.md
+++ b/README.md
@@ -20,16 +20,16 @@ Biblioteca de componentes de UI para Angular.
### Pré-requisitos
-Para começar a utilizar o **PO UI** é pré-requisito ter o `Node.js` instalado (versão 20.11.x ou acima) e o seu gerenciador de pacote favorito na versão mais atual. Caso você ainda não tenha instalado o pacote `@angular/cli`, instale-o via `npm` ou `yarn`.
+Para começar a utilizar o **PO UI** é pré-requisito ter o `Node.js` instalado (versão 24.22.1 e acima) e o seu gerenciador de pacote favorito na versão mais atual. Caso você ainda não tenha instalado o pacote `@angular/cli`, instale-o via `npm` ou `yarn`.
Instalando com npm:
```
-npm i -g @angular/cli@21
+npm i -g @angular/cli@22
```
Caso prefira instalar com o yarn:
```
-yarn global add @angular/cli@21
+yarn global add @angular/cli@22
```
### Passo 1 - Crie o seu primeiro projeto
@@ -53,26 +53,24 @@ Veja abaixo a lista de dependências e as versões compatíveis, elas devem ser
```json
"dependencies": {
- "@angular/animations": "~21.2.17",
- "@angular/common": "~21.2.17",
- "@angular/compiler": "~21.2.17",
- "@angular/core": "~21.2.17",
- "@angular/forms": "~21.2.17",
- "@angular/platform-browser": "~21.2.17",
- "@angular/platform-browser-dynamic": "~21.2.17",
- "@angular/router": "~21.2.17",
+ "@angular/common": "~22.2.1",
+ "@angular/compiler": "~22.2.1",
+ "@angular/core": "~22.2.1",
+ "@angular/forms": "~22.2.1",
+ "@angular/platform-browser": "~22.2.1",
+ "@angular/router": "~22.2.1",
"rxjs": "~7.8.1",
"tslib": "^2.6.2",
"zone.js": "~0.15.0"
...
},
"devDependencies": {
- "@angular-devkit/build-angular": "~21.2.17",
- "@angular-devkit/schematics": "~21.2.17",
- "@angular/cli": "~21.2.17",
- "@angular/compiler-cli": "~21.2.17",
+ "@angular-devkit/schematics": "~22.2.1",
+ "@angular/build": "~22.2.1",
+ "@angular/cli": "~22.2.1",
+ "@angular/compiler-cli": "~22.2.1",
...
- "typescript": "~5.9.3"
+ "typescript": "~6.0.3"
}
```
@@ -90,14 +88,14 @@ Caso prefira instalar com o yarn:
yarn install
```
-### Passo 2 - Adiconando o pacote @po-ui/ng-components
+### Passo 2 - Adicionando o pacote @po-ui/ng-components
Utilizando o comando `ng add` do [Angular CLI](https://cli.angular.io/), vamos adicionar o **Po** em seu projeto e o mesmo se encarregará de configurar o tema, instalar o guia de primeiros passos **Po**. Além de importar também o modulo **HttpClientModule**.
Execute o comando abaixo na pasta raiz do seu projeto:
```
-ng add @po-ui/ng-components
+ng add @po-ui/ng-components@next
```
> Ao executar o comando acima, será perguntado se deseja incluir uma estrutura inicial em seu projeto com menu lateral, página e toolbar, utilizando componentes do **Po**, **caso desejar, apenas informe: `Y`**.
@@ -138,7 +136,7 @@ Agora é só abrir seu **editor / IDE** favorito e começar a trabalhar no seu p
Caso você queira utilizar nossos componentes de templates, como o **[po-page-login](https://po-ui.io/documentation/po-page-login)**, **[po-modal-password-recovery](https://po-ui.io/documentation/po-modal-password-recovery)**, **[po-page-blocked-user](https://po-ui.io/documentation/po-page-blocked-user)**, **[po-page-dynamic-table](https://po-ui.io/documentation/po-page-dynamic-table)** entre outros, basta adicionar o pacote `@po-ui/ng-templates` executando o comando abaixo:
```
-ng add @po-ui/ng-templates
+ng add @po-ui/ng-templates@next
```
> Ao executar este comando, será instalado o pacote `@po-ui/ng-templates` e configurado o `PoTemplatesModules` no `app.module`.
diff --git a/angular.json b/angular.json
index fdaee13f89..f532db6c94 100644
--- a/angular.json
+++ b/angular.json
@@ -10,7 +10,7 @@
"prefix": "po",
"architect": {
"build": {
- "builder": "@angular-devkit/build-angular:ng-packagr",
+ "builder": "@angular/build:ng-packagr",
"options": {
"tsConfig": "projects/ui/tsconfig.lib.json",
"project": "projects/ui/ng-package.json"
@@ -22,11 +22,12 @@
}
},
"test": {
- "builder": "@angular-devkit/build-angular:karma",
+ "builder": "@angular/build:karma",
"options": {
"main": "projects/ui/src/test.ts",
"tsConfig": "projects/ui/tsconfig.spec.json",
- "karmaConfig": "projects/ui/karma.conf.js"
+ "karmaConfig": "projects/ui/karma.conf.js",
+ "codeCoverageExclude": ["projects/ui/src/lib/components/po-grid/**"]
}
},
"lint": {
@@ -45,7 +46,7 @@
"prefix": "app",
"architect": {
"build": {
- "builder": "@angular-devkit/build-angular:application",
+ "builder": "@angular/build:application",
"options": {
"outputPath": {
"base": "dist/app"
@@ -112,7 +113,7 @@
}
},
"serve": {
- "builder": "@angular-devkit/build-angular:dev-server",
+ "builder": "@angular/build:dev-server",
"options": {
"open": true,
"host": "0.0.0.0",
@@ -138,7 +139,7 @@
"sourceRoot": "projects/storage/src",
"architect": {
"build": {
- "builder": "@angular-devkit/build-angular:ng-packagr",
+ "builder": "@angular/build:ng-packagr",
"options": {
"tsConfig": "projects/storage/tsconfig.lib.json",
"project": "projects/storage/ng-package.json"
@@ -150,7 +151,7 @@
}
},
"test": {
- "builder": "@angular-devkit/build-angular:karma",
+ "builder": "@angular/build:karma",
"options": {
"main": "projects/storage/src/test.ts",
"tsConfig": "projects/storage/tsconfig.spec.json",
@@ -171,7 +172,7 @@
"sourceRoot": "projects/sync/src",
"architect": {
"build": {
- "builder": "@angular-devkit/build-angular:ng-packagr",
+ "builder": "@angular/build:ng-packagr",
"options": {
"tsConfig": "projects/sync/tsconfig.lib.json",
"project": "projects/sync/ng-package.json"
@@ -183,8 +184,9 @@
}
},
"test": {
- "builder": "@angular-devkit/build-angular:karma",
+ "builder": "@angular/build:karma",
"options": {
+ "polyfills": ["zone.js", "zone.js/testing"],
"main": "projects/sync/src/test.ts",
"tsConfig": "projects/sync/tsconfig.spec.json",
"karmaConfig": "projects/sync/karma.conf.js"
@@ -205,7 +207,7 @@
"prefix": "po",
"architect": {
"build": {
- "builder": "@angular-devkit/build-angular:ng-packagr",
+ "builder": "@angular/build:ng-packagr",
"options": {
"tsConfig": "projects/templates/tsconfig.lib.json",
"project": "projects/templates/ng-package.json"
@@ -217,8 +219,9 @@
}
},
"test": {
- "builder": "@angular-devkit/build-angular:karma",
+ "builder": "@angular/build:karma",
"options": {
+ "polyfills": ["zone.js", "zone.js/testing"],
"main": "projects/templates/src/test.ts",
"tsConfig": "projects/templates/tsconfig.spec.json",
"karmaConfig": "projects/templates/karma.conf.js"
@@ -239,7 +242,7 @@
"prefix": "po",
"architect": {
"build": {
- "builder": "@angular-devkit/build-angular:ng-packagr",
+ "builder": "@angular/build:ng-packagr",
"options": {
"tsConfig": "projects/code-editor/tsconfig.lib.json",
"project": "projects/code-editor/ng-package.json"
@@ -251,8 +254,9 @@
}
},
"test": {
- "builder": "@angular-devkit/build-angular:karma",
+ "builder": "@angular/build:karma",
"options": {
+ "polyfills": ["zone.js", "zone.js/testing"],
"main": "projects/code-editor/src/test.ts",
"tsConfig": "projects/code-editor/tsconfig.spec.json",
"karmaConfig": "projects/code-editor/karma.conf.js"
@@ -274,7 +278,7 @@
"prefix": "app",
"architect": {
"build": {
- "builder": "@angular-devkit/build-angular:application",
+ "builder": "@angular/build:application",
"options": {
"outputPath": {
"base": "dist/portal"
@@ -322,7 +326,8 @@
"sourceMap": true,
"optimization": false,
"namedChunks": true,
- "browser": "projects/portal/src/main.ts"
+ "browser": "projects/portal/src/main.ts",
+ "externalDependencies": ["marked-katex-extension", "katex"]
},
"configurations": {
"production": {
@@ -353,7 +358,7 @@
}
},
"serve": {
- "builder": "@angular-devkit/build-angular:dev-server",
+ "builder": "@angular/build:dev-server",
"options": {
"buildTarget": "portal:build"
},
@@ -364,7 +369,7 @@
}
},
"extract-i18n": {
- "builder": "@angular-devkit/build-angular:extract-i18n",
+ "builder": "@angular/build:extract-i18n",
"options": {
"buildTarget": "portal:build"
}
diff --git a/docs/guides/browser-support.md b/docs/guides/browser-support.md
index 360cf8a145..58019c68f0 100644
--- a/docs/guides/browser-support.md
+++ b/docs/guides/browser-support.md
@@ -15,24 +15,16 @@ Atualmente o PO está homologado para os seguintes navegadores:
Chrome
-
versões mais recentes (latest)
+
2 versões mais recentes
Firefox
-
versões mais recentes (latest)
+
versão mais recente e versão de suporte estendido (ESR)
Edge
2 últimas versões principais
-
-
Safari
-
2 últimas versões principais
-
-
-
IOS
-
2 últimas versões principais
-
Android
2 últimas versões principais
@@ -43,10 +35,10 @@ Atualmente o PO está homologado para os seguintes navegadores:
> Nossa homologação tem como base os navegadores que o Angular suporta nativamente. Para saber mais, acesse o guia
-[*Browser support*](https://angular.io/guide/browser-support) do Angular.
+[*Browser support*](https://angular.dev/reference/versions#browser-support) do Angular.
> Caso precise de algum *polyfill* em sua aplicação ou precisa de mais informação sobre como funciona um *polyfill*
-acesse a documentação [*Browser support*](https://angular.io/guide/browser-support) do Angular.
+acesse a documentação [*Browser support*](https://angular.dev/reference/versions#browser-support) do Angular.
## Executando a aplicação localmente
diff --git a/docs/guides/deprecations.md b/docs/guides/deprecations.md
index e6318ac55f..d56d183f32 100644
--- a/docs/guides/deprecations.md
+++ b/docs/guides/deprecations.md
@@ -25,11 +25,16 @@ A tabela a seguir lista todos os recursos depreciados, organizados pelo release
@@ -71,6 +76,43 @@ A tabela a seguir lista todos os recursos depreciados, organizados pelo release
Esta seção contém uma lista completa de todos os recursos obsoletos com detalhes para ajudá-lo a planejar sua migração.
+### PoGauge
+
+
diff --git a/docs/guides/development-flow.md b/docs/guides/development-flow.md
index 7222cee2a4..e6d5e3ffd9 100644
--- a/docs/guides/development-flow.md
+++ b/docs/guides/development-flow.md
@@ -55,7 +55,7 @@ Este guia tem por objetivo definir as regras para criação de *Issues* relacion
Crie uma nova aplicação em Angular incluindo o componente e o comportamento reportado para nossa análise.
Adicione o mínimo de código necessário para reprodução do bug, facilitando assim a verificação da situação.
Publique a aplicação no GitHub e inclua o link ao criar a issue.
-
Pode-se também usar o Stackblitz para reproduzir o bug relatado na issue.
+
Pode-se também usar o Stackblitz para reproduzir o bug relatado na issue.
Certifique-se de incluir os passos para reprodução da issue. Estes passos devem ser claros e simples de seguir.
diff --git a/docs/guides/getting-started.md b/docs/guides/getting-started.md
index cac977a40b..4e2d43d6ad 100644
--- a/docs/guides/getting-started.md
+++ b/docs/guides/getting-started.md
@@ -3,16 +3,16 @@
### Pré-requisitos
-Para começar a utilizar o **PO UI** é pré-requisito ter o `Node.js` instalado (versão 20.11.x ou acima) e o seu gerenciador de pacote favorito na versão mais atual. Caso você ainda não tenha instalado o pacote `@angular/cli`, instale-o via `npm` ou `yarn`.
+Para começar a utilizar o **PO UI** é pré-requisito ter o `Node.js` instalado (versão 24.22.1 e acima) e o seu gerenciador de pacote favorito na versão mais atual. Caso você ainda não tenha instalado o pacote `@angular/cli`, instale-o via `npm` ou `yarn`.
Instalando com npm:
```
-npm i -g @angular/cli@21
+npm i -g @angular/cli@22
```
Caso prefira instalar com o yarn:
```
-yarn global add @angular/cli@21
+yarn global add @angular/cli@22
```
### Passo 1 - Crie o seu primeiro projeto
@@ -36,26 +36,24 @@ Veja abaixo a lista de dependências e as versões compatíveis, elas devem ser
```json
"dependencies": {
- "@angular/animations": "~21.2.17",
- "@angular/common": "~21.2.17",
- "@angular/compiler": "~21.2.17",
- "@angular/core": "~21.2.17",
- "@angular/forms": "~21.2.17",
- "@angular/platform-browser": "~21.2.17",
- "@angular/platform-browser-dynamic": "~21.2.17",
- "@angular/router": "~21.2.17",
+ "@angular/common": "~22.2.1",
+ "@angular/compiler": "~22.2.1",
+ "@angular/core": "~22.2.1",
+ "@angular/forms": "~22.2.1",
+ "@angular/platform-browser": "~22.2.1",
+ "@angular/router": "~22.2.1",
"rxjs": "~7.8.1",
"tslib": "^2.6.2",
"zone.js": "~0.15.0"
...
},
"devDependencies": {
- "@angular-devkit/build-angular": "~21.2.17",
- "@angular-devkit/schematics": "~21.2.17",
- "@angular/cli": "~21.2.17",
- "@angular/compiler-cli": "~21.2.17",
+ "@angular-devkit/schematics": "~22.2.1",
+ "@angular/build": "~22.2.1",
+ "@angular/cli": "~22.2.1",
+ "@angular/compiler-cli": "~22.2.1",
...
- "typescript": "~5.9.3"
+ "typescript": "~6.0.3"
}
```
@@ -71,27 +69,11 @@ Caso prefira instalar com o yarn:
yarn install
```
-### Observação para Angular 19+/21+
+### Observação para Angular 19+
-Em versões mais recentes do Angular, o projeto pode utilizar o novo build system baseado em **@angular/build**. Caso ocorra o erro:
+Em versões mais recentes do Angular, o projeto utiliza, por padrão, novo build system baseado em **@angular/build**.
-```
-Could not find the @angular/build:dev-server builder's package
-```
-
-Verifique se o pacote está declarado em **devDependencies**:
-
-```
-npm install -D @angular/build
-```
-
-ou
-
-```
-pnpm install -D @angular/build
-```
-
-Além disso, valide no arquivo angular.json se o builder está configurado para **@angular/build:***:
+Verifique se o pacote está declarado em **devDependencies**. Além disso, valide no arquivo angular.json se o builder está configurado para **@angular/build:***:
```
"projects": {
@@ -108,17 +90,16 @@ Além disso, valide no arquivo angular.json se o builder está configurado para
}
```
-Se o **builder** for **@angular/build:***, o pacote **@angular/build** deve estar instalado. Caso esteja utilizando **@angular-devkit/build-angular**, o comportamento será o modelo tradicional.
Para maiores informações veja na documentação oficial do [Angular](https://angular.dev/tools/cli/build-system-migration).
-### Passo 2 - Adiconando o pacote @po-ui/ng-components
+### Passo 2 - Adicionando o pacote @po-ui/ng-components
Utilizando o comando `ng add` do [Angular CLI](https://cli.angular.io/), vamos adicionar o **Po** em seu projeto e o mesmo se encarregará de configurar o tema, instalar o pacote e importar o módulo do **Po**. Além de importar também o modulo **HttpClientModule**.
Execute o comando abaixo na pasta raiz do seu projeto:
```
-ng add @po-ui/ng-components
+ng add @po-ui/ng-components@next
```
> Ao executar o comando acima, será perguntado se deseja incluir uma estrutura inicial em seu projeto com menu lateral, página e toolbar, utilizando componentes do **Po**, **caso desejar, apenas informe: `Y`**.
@@ -146,7 +127,7 @@ Agora é só abrir seu **editor / IDE** favorito e começar a trabalhar no seu p
Caso você queira utilizar nossos componentes de templates, como o **[po-page-login](/documentation/po-page-login)**, **[po-modal-password-recovery](/documentation/po-modal-password-recovery)**, **[po-page-blocked-user](/documentation/po-page-blocked-user)**, **[po-page-dynamic-table](/documentation/po-page-dynamic-table)** entre outros, basta adicionar o pacote `@po-ui/ng-templates` executando o comando abaixo:
```
-ng add @po-ui/ng-templates
+ng add @po-ui/ng-templates@next
```
> Ao executar este comando, será instalado o pacote `@po-ui/ng-templates` e configurado o `PoTemplatesModules` no `app.module` somente se sua aplicação for configurada com módulos.
diff --git a/docs/guides/migration-poui.md b/docs/guides/migration-poui.md
index 0cfa0cceae..0562c97e17 100644
--- a/docs/guides/migration-poui.md
+++ b/docs/guides/migration-poui.md
@@ -13,8 +13,7 @@ Antes de atualizar a versão do PO UI, é importante que você tenha atualizado
o Angular que o PO UI está homologado, veja nossa
[tabela de compatibilidade](https://github.com/po-ui/po-angular/wiki#vers%C3%B5es-angular-x-po-ui) em nosso Github Wiki.
-> Caso o seu projeto esteja na versão Angular@20:
-Realize a instalação do pacote Schematics do Angular para o nosso script de atualização funcionar corretamente:
+> Caso o seu projeto não possua a dependência `@angular-devkit/schematics`, realize a instalação do pacote para o nosso script de atualização funcionar corretamente:
```
npm install @angular-devkit/schematics --save-dev
@@ -29,7 +28,7 @@ ng update @angular/cli@ @angular/core@ --force
Por exemplo:
```
-ng update @angular/cli@21 @angular/core@21 --force
+ng update @angular/cli@22 @angular/core@22 --force
```
> Para realizar a migração completa e avaliar se não precisa fazer alguma alteração veja o [**Guia de Upgrade do Angular**](https://update.angular.io/).
@@ -60,21 +59,11 @@ ng update @po-ui/ng-components@ --allow-dirty --force
Por exemplo:
```
-ng update @po-ui/ng-components --allow-dirty --force
+ng update @po-ui/ng-components@next --allow-dirty --force
```
> Caso ocorra um erro ao concluir o comando acima pode ser necessário fazer uma instalação limpa no projeto apagando a pasta `node_modules` e o arquivo `package-lock.json` e executando o comando `npm i --legacy-peer-deps` antes de realizar o `ng update`.
-> Caso sua aplicação seja configurada com módulos, pode ser necessária a inclusão da seguinte `devDependencies`:
-
-```json
- "devDependencies": {
- ...,
- "@angular-devkit/schematics": "~21.2.17",
- ...
- }
-```
-
O `ng update` ajudará nas alterações necessárias para seu projeto seguir atualizado, que são elas:
- Caso houver *breaking changes*, serão realizados as alterações possíveis, mas fique atento ao
[CHANGELOG](https://github.com/po-ui/po-angular/blob/master/CHANGELOG.md);
@@ -103,13 +92,44 @@ ng update @po-ui/ng-sync@ --allow-dirty --force
Por exemplo:
```
-ng update @po-ui/ng-sync --allow-dirty --force
+ng update @po-ui/ng-sync@next --allow-dirty --force
```
O `ng update` ajudará nas alterações necessárias para seu projeto, que será atualizar as versões dos pacotes:
- `@po-ui/ng-sync`;
- `@po-ui/ng-storage`;
+> Pode ocorrer o seguinte erro `TypeError: Failed to fetch dynamically imported module...`, sendo necessário adicionar ao arquivo `angular.json` as seguintes configurações:
+> ```json
+> {
+> "projects": {
+> "app": {
+> ...
+> "architect": {
+> ...
+> "build": {
+> ...
+> "options": {
+> ...
+> "polyfills": ["zone.js"],
+> },
+> },
+> "serve": {
+> ...
+> "builder": "@angular/build:dev-server",
+> "options": {
+> ...
+> "prebundle": {
+> "exclude": ["@ionic/angular", "@ionic/core", "ionicons"]
+> }
+> }
+> },
+> }
+> }
+> },
+> }
+> ```
+
## Depreciações e Breaking Changes
Possuimos uma documentação que lista as depreciações correntes e os *breaking changes* já realizados na biblioteca,
diff --git a/docs/guides/releases.md b/docs/guides/releases.md
index 815ef7d455..6b46443a0a 100644
--- a/docs/guides/releases.md
+++ b/docs/guides/releases.md
@@ -41,7 +41,12 @@ Consulte abaixo nossos guias de migração de versão para obter mais informaç
diff --git a/docs/guides/schematics.md b/docs/guides/schematics.md
index 2a1a3c2643..fa5ced785a 100644
--- a/docs/guides/schematics.md
+++ b/docs/guides/schematics.md
@@ -13,7 +13,7 @@ Caso esteja iniciando uma aplicação com PO, indica-se utilizar o comando abaix
no qual será instalado o pacote `@po-ui/ng-components` e realizadas algumas configurações, que serão descritas em seguida:
```
-ng add @po-ui/ng-components
+ng add @po-ui/ng-components@next
```
- Substitui o `AppComponent` com uma estrutura incial de um projeto, utilizando os components `po-page-default`, `po-toolbar`, e `po-menu`;
@@ -26,127 +26,8 @@ Para a utilização de componentes de template o processo para inclusão é seme
Primeiramente, deve-se utilizar o comando abaixo, no qual será instalado o pacote `@po-ui/ng-templates`:
```
-ng add @po-ui/ng-templates
+ng add @po-ui/ng-templates@next
```
- Importa o módulo do PO;
- Configura o tema do PO no projeto caso não possua;
-
-## Generate Schematics
-
-O `PO` vem com vários `schematics` que podem ser usados para gerar componentes facilmente.
-
-Para gerar o componente, execute o comando abaixo, onde `package` é o pacote e ```schematic-name``` o componente que deseja:
-
-```
-ng generate :
-```
-
-> A lista de opções disponíveis que o CLI oferece para o *ng generate* é vista acrescentando `--help` no comando.
-
-### PO UI Components
-
-```
-ng generate @po-ui/ng-components:
-```
-
-
Página que exibe uma lista de registros em uma tabela baseado em uma lista de fields, o mesmo também suporta metadados conforme especificado na documentação.
-
Página que serve para criação e atualização de agendamentos da execução de processos (Job Scheduler), como por exemplo: a geração da folha de pagamento dos funcionários. Para utilizá-la, basta informar o serviço (endpoint) para consumo, sem a necessidade de criar componentes e tratamentos dos dados.
-
Página utilizada como template para tela de login. Com ele é possível definirmos valores para usuário, senha e definir ações para recuperação de senha e gravação de dados do usuário. Também é possível inserir uma imagem em conjunto com um texto de destaque.
-
Página utilizada como template para tela de bloqueio de usuário.
-
-
-
-
-
-
diff --git a/docs/guides/sync-get-started.md b/docs/guides/sync-get-started.md
index 6499a14c51..8e79ae9c26 100644
--- a/docs/guides/sync-get-started.md
+++ b/docs/guides/sync-get-started.md
@@ -9,13 +9,13 @@ Para maiores detalhes sobre os serviços e métodos utilizados neste tutorial, c
### Pré-requisitos
- [Node.js e NPM](https://nodejs.org/en/)
-- [Angular CLI](https://cli.angular.io/) (~21.2.17):
+- [Angular CLI](https://cli.angular.io/) (~22.2.1):
- ```shell
- npm install -g @angular/cli@21
+ npm install -g @angular/cli@22
```
-- [Ionic](https://ionicframework.com/docs/cli/) (^7.2.0):
+- [Ionic](https://ionicframework.com/docs/cli/):
- ```shell
- npm install -g @ionic/cli@7
+ npm install -g @ionic/cli
```
@@ -23,8 +23,6 @@ Para maiores detalhes sobre os serviços e métodos utilizados neste tutorial, c
### Passo 1 - Criando o aplicativo
-> Atualmente, a Ionic CLI cria novos projetos utilizando Angular 20 como versão base, independentemente da versão final desejada do Angular.
-
Para a aplicação de exemplo usaremos o template *blank* do Ionic. Para isso, execute o seguinte comando:
```shell
@@ -35,34 +33,24 @@ Caso surja a questão relacionada ao framework desejado, opte por `Angular`.
### Passo 2 - Instalando as dependências
-É necessário realizar alguns ajustes de compatibilidade do PO para o projeto criado.
+É necessário realizar alguns ajustes de compatibilidade do PO UI para o projeto criado.
Navegue até a pasta do aplicativo:
```shell
cd po-sync-getting-started
```
-Antes de instalar o po-sync, é necessário atualizar o projeto para o Angular 21, garantindo compatibilidade com o PO UI.
-
-```shell
-ng update @angular/core@21 @angular/cli@21
-```
-
-> Esse passo é necessário porque o projeto foi inicialmente criado com Angular 20, e o upgrade garante compatibilidade com as versões utilizadas pelo PO UI.
-
Veja abaixo a lista de dependências e as versões compatíveis, elas devem ser conferidas e se necessário, ajustadas no seu projeto.
```json
...
"dependencies": {
- "@angular/animations": "~21.2.17",
- "@angular/common": "~21.2.17",
- "@angular/compiler": "~21.2.17",
- "@angular/core": "~21.2.17",
- "@angular/forms": "~21.2.17",
- "@angular/platform-browser": "~21.2.17",
- "@angular/platform-browser-dynamic": "~21.2.17",
- "@angular/router": "~21.2.17",
+ "@angular/common": "~22.2.1",
+ "@angular/compiler": "~22.2.1",
+ "@angular/core": "~22.2.1",
+ "@angular/forms": "~22.2.1",
+ "@angular/platform-browser": "~22.2.1",
+ "@angular/router": "~22.2.1",
"@capacitor/app": "8.0.0",
"@capacitor/core": "8.0.1",
"@capacitor/haptics": "8.0.0",
@@ -76,22 +64,31 @@ Veja abaixo a lista de dependências e as versões compatíveis, elas devem ser
"zone.js": "~0.15.0"
},
"devDependencies": {
- "@angular-devkit/schematics": "~21.2.17",
- ...
- "@angular/cli": "~21.2.17",
- "@angular/compiler-cli": "~21.2.17",
- "@angular/language-service": "~21.2.17",
+ "@angular-devkit/schematics": "~22.2.1",
+ "@angular/build": "~22.2.1",
+ "@angular/cli": "~22.2.1",
+ "@angular/compiler-cli": "~22.2.1",
+ "@angular/language-service": "~22.2.1",
"@capacitor/cli": "8.0.1",
"@ionic/angular-toolkit": "^12.0.0",
...
- "typescript": "~5.9.3"
+ "typescript": "~6.0.3"
},
...
```
+> **Nota para projetos com módulos (NgModule)**: A CLI do Ionic pode gerar projetos com o arquivo `src/main.ts` utilizando o `platformBrowserDynamic`. Caso isso aconteça, será necessário adicionar o pacote `@angular/platform-browser-dynamic` no arquivo `package.json` (dentro de `dependencies`), juntamente com as outras dependências listadas acima:
+> ```json
+> "dependencies": {
+> ...
+> "@angular/platform-browser-dynamic": "~22.2.1",
+> ...
+> }
+> ```
+
> Após configurar seu arquivo, certifique-se de salvar as alterações realizadas.
-Execute o seguinte comando para instalar as dependências:
+Realize a limpeza do arquivo `package-lock.json` e da pasta `node_modules/`, para então executar o seguinte comando para instalar as dependências:
```shell
npm install
@@ -102,14 +99,14 @@ npm install
Para instalar o `po-sync` no aplicativo execute o seguinte comando:
```shell
-ng add @po-ui/ng-sync
+ng add @po-ui/ng-sync@next
```
### Passo 4 - Utilizando o po-sync
#### Passo 4.1 (NgModule) - Importando o `po-sync` e o `po-storage`
-No arquivo `src/app/app.module.ts`, adicione a importação dos módulos do `po-storage` e do `po-sync`:
+No arquivo `src/app/app.module.ts`, adicione a importação dos módulos do `po-storage` e do `po-sync`:
```typescript
import { NgModule } from '@angular/core';
@@ -145,7 +142,7 @@ export class AppModule {}
#### Passo 4.1 (Standalone) - Importando o `po-sync` e o `po-storage`
-No arquivo `src/main.ts`, adicione a importação dos módulos do `po-storage` e do `po-sync`:
+No arquivo `src/main.ts`, avalie se foi feita a importação dos módulos do `po-storage` e do `po-sync`:
```typescript
import { bootstrapApplication } from '@angular/platform-browser';
@@ -201,7 +198,7 @@ Após ter o seu primeiro *schema* criado, configure o seu aplicativo utilizando
Substitua o conteúdo do arquivo pelo conteúdo abaixo:
```typescript
-import { Component } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
import { Capacitor } from '@capacitor/core';
import { Platform } from '@ionic/angular';
import { SplashScreen } from '@capacitor/splash-screen';
@@ -215,8 +212,11 @@ import { conferenceSchema } from './home/conference-schema.constants';
styleUrls: ['app.component.scss'],
standalone: false
})
-export class AppComponent {
- constructor(private platform: Platform, private poSync: PoSyncService) {
+export class AppComponent implements OnInit {
+ private readonly platform = inject(Platform);
+ private readonly poSync = inject(PoSyncService);
+
+ ngOnInit() {
this.initializeApp();
}
@@ -249,7 +249,7 @@ Após utilizar o método `PoSyncService.prepare()`, a aplicação estará pronta
Substitua o conteúdo do arquivo pelo conteúdo abaixo:
```typescript
-import { Component } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
import { IonApp, IonRouterOutlet } from '@ionic/angular/standalone';
import { Capacitor } from '@capacitor/core';
import { Platform } from '@ionic/angular';
@@ -264,10 +264,11 @@ import { conferenceSchema } from './home/conference-schema.constants';
templateUrl: 'app.component.html',
imports: [IonApp, IonRouterOutlet],
})
-export class AppComponent {
- constructor(
- private platform: Platform, private poSync: PoSyncService
- ) {
+export class AppComponent implements OnInit {
+ private readonly platform = inject(Platform);
+ private readonly poSync = inject(PoSyncService);
+
+ ngOnInit() {
this.initializeApp();
}
@@ -297,10 +298,35 @@ export class AppComponent {
### Passo 6 (NgModule) - Acessando os dados
+Caso o projeto tenha sido gerado em uma versão anterior a 9.x do `@ionic/angular`, no arquivo `po-sync-getting-started/src/app/home/home.module.ts`, atualize a importação do `IonicModule` para utilizar o caminho `import { IonicModule } from '@ionic/angular';`:
+
+```typescript
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IonicModule } from '@ionic/angular';
+import { FormsModule } from '@angular/forms';
+import { HomePage } from './home.page';
+
+import { HomePageRoutingModule } from './home-routing.module';
+
+@NgModule({
+ imports: [
+ CommonModule,
+ FormsModule,
+ IonicModule,
+ HomePageRoutingModule
+ ],
+ declarations: [HomePage]
+})
+export class HomePageModule {}
+```
+
+> **Nota sobre importação do `IonicModule`**: As versões anteriores à 9.x do `@ionic/angular` não possuem o export `lazy`, devendo ser feito o import de `@ionic/angular`. A partir da versão 9.x, o import de `@ionic/angular/lazy` funciona normalmente (sendo o padrão da CLI do ionic para projetos standalone).
+
Localize o arquivo `src/app/home/home.page.ts` e faça as seguintes alterações:
```typescript
-import { Component } from '@angular/core';
+import { Component, inject, signal } from '@angular/core';
import { PoSyncService } from '@po-ui/ng-sync';
@@ -311,21 +337,21 @@ import { PoSyncService } from '@po-ui/ng-sync';
standalone: false
})
export class HomePage {
+ private readonly poSync = inject(PoSyncService);
- conference: any;
+ readonly conference = signal(null);
- constructor(private poSync: PoSyncService) {
+ constructor() {
this.poSync.onSync().subscribe(() => this.loadHomePage());
}
async loadHomePage() {
- this.conference = await this.poSync.getModel('conference').findOne().exec();
+ this.conference.set(await this.poSync.getModel('conference').findOne().exec());
}
clear() {
- this.conference = null;
+ this.conference.set(null);
}
-
}
```
@@ -336,31 +362,38 @@ No construtor, foi realizado uma inscrição no método `PoSyncService.onSync()`
Localize o arquivo `src/app/home/home.page.ts` e faça as seguintes alterações:
```typescript
-import { Component } from '@angular/core';
-import { NgIf } from '@angular/common';
-
-import { IonicModule } from '@ionic/angular';
+import { Component, inject, signal } from '@angular/core';
+
+import {
+ IonContent,
+ IonButton,
+ IonCard,
+ IonCardContent,
+ IonCardTitle
+} from '@ionic/angular/standalone';
import { PoSyncService } from '@po-ui/ng-sync';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
- imports: [IonicModule, NgIf],
+ imports: [IonContent, IonButton, IonCard, IonCardContent, IonCardTitle],
})
export class HomePage {
- conference: any;
+ private readonly poSync = inject(PoSyncService);
+
+ readonly conference = signal(null);
- constructor(private poSync: PoSyncService) {
+ constructor() {
this.poSync.onSync().subscribe(() => this.loadHomePage());
}
async loadHomePage() {
- this.conference = await this.poSync.getModel('conference').findOne().exec();
+ this.conference.set(await this.poSync.getModel('conference').findOne().exec());
}
clear() {
- this.conference = null;
+ this.conference.set(null);
}
}
@@ -371,18 +404,20 @@ export class HomePage {
No arquivo `src/app/home/home.page.html` crie a seguinte estrutura:
```html
- Buscar informações
- Apagar informações
-
-
-
-
- {{ conference.title }}
-
-