@po-ui/ng-components 21.33.0 → 22.0.0-next.0

package/lib/components/index.d.ts

@@ -16,7 +16,6 @@ export * from './po-dropdown/index';
 export * from './po-dynamic/index';
 export * from './po-field/index';
 export * from './po-filter-chip/index';
-export * from './po-gauge/index';
 export * from './po-grid/index';
 export * from './po-helper/index';
 export * from './po-icon/index';

package/lib/components/po-accordion/po-accordion-item-body/po-accordion-item-body.component.d.ts

@@ -1,3 +1,7 @@
+import { AnimationCallbackEvent } from '@angular/core';
 export declare class PoAccordionItemBodyComponent {
     expanded: boolean;
+    animateEnter(event: AnimationCallbackEvent): void;
+    animateLeave(event: AnimationCallbackEvent): void;
+    private animateHeight;
 }

package/lib/components/po-accordion/po-accordion.module.d.ts

@@ -2,44 +2,6 @@
  * @description
  *
  * Módulo do componente `po-accordion`.
- *
- * > Para o correto funcionamento do componente `po-accordion`, deve ser importado o módulo `BrowserAnimationsModule` no
- * > módulo principal da sua aplicação.
- *
- * Módulo da aplicação:
- * ```
- * import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
- * import { PoModule } from '@po-ui/ng-components';
- * ...
- *
- * @NgModule({
- *   imports: [
- *     BrowserModule,
- *     BrowserAnimationsModule,
- *     ...
- *     PoModule
- *   ],
- *   declarations: [
- *     AppComponent,
- *     ...
- *   ],
- *   providers: [],
- *   bootstrap: [AppComponent]
- * })
- * export class AppModule { }
- * ```
- *
- * Em aplicações Standalone, utilize a seguinte configuração para o bootstrap:
- *
- * ```
- * import { bootstrapApplication } from '@angular/platform-browser';
- * import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
- * import { AppComponent } from './app.component';
- *
- * bootstrapApplication(AppComponent, {
- *   providers: [importProvidersFrom(BrowserAnimationsModule)]
- * }).catch(err => console.error(err));
- * ```
  */
 export declare class PoAccordionModule {
 }

package/lib/components/po-field/po-lookup/po-lookup-modal/po-lookup-modal.component.d.ts

@@ -15,6 +15,7 @@ export declare class PoLookupModalComponent extends PoLookupModalBaseComponent i
     tableHeight: number;
     componentRef: ComponentRef<any>;
     dynamicForm: NgForm;
+    private dynamicFormReady;
     constructor();
     ngOnInit(): void;
     onSelect(item: any): void;

package/lib/components/po-field/po-search-ai/po-search-ai-base.component.d.ts

@@ -15,10 +15,6 @@ import { PoSearchAiService } from './po-search-ai.service';
  * em um filtro estruturado (normalmente OData) que pode ser aplicado por outro componente,
  * como o [`po-table`](/documentation/po-table).
  *
- * > **Componente experimental:** o `po-search-ai` está em fase experimental. Sua API
- * > (propriedades, eventos e contrato com o backend) pode sofrer alterações
- * > entre versões. Utilize com cautela em ambientes de produção.
- *
  * O componente é **agnóstico ao provedor de IA**. Toda a comunicação ocorre através do
  * endpoint informado em `p-url`, que recebe `{ query, columns }` e deve retornar
  * `{ filter, description, confidence }`. Isso garante que nenhuma chave de IA seja

package/lib/components/po-listbox/po-listbox-base.component.d.ts

@@ -24,7 +24,7 @@ export declare class PoListBoxBaseComponent {
     private _size?;
     private _initialSize?;
     listboxSubitems: boolean;
-    visible: import("@angular/core").InputSignalWithTransform<boolean, boolean>;
+    visible: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
     set type(value: string);
     get type(): PoItemListType;
     set items(items: Array<PoItemListAction | PoItemListOption | PoItemListOptionGroup | any>);

package/lib/components/po-navbar/po-navbar.component.d.ts

@@ -9,7 +9,6 @@ import { PoNavbarItemsComponent } from './po-navbar-items/po-navbar-items.compon
  */
 export declare class PoNavbarComponent extends PoNavbarBaseComponent implements AfterViewInit, OnDestroy, OnInit {
     private readonly renderer;
-    private readonly builder;
     private readonly changeDetector;
     private readonly menuGlobalService;
     navbarItemsElement: ElementRef;
@@ -22,7 +21,8 @@ export declare class PoNavbarComponent extends PoNavbarBaseComponent implements
     private readonly id;
     private mediaQuery;
     private offset;
-    private player;
+    private currentAnimation;
+    private previousAnimatedOffset;
     private readonly menuItems;
     private previousMenuComponentId;
     private previousMenusItems;
@@ -41,7 +41,6 @@ export declare class PoNavbarComponent extends PoNavbarBaseComponent implements
     protected validateMenuLogo(): void;
     private allNavbarItemsWidth;
     private animate;
-    private buildTransitionAnimation;
     private changeNavbarMenuItems;
     private calculateLeftNavigation;
     private calculateRightNavigation;

package/lib/components/po-navbar/po-navbar.module.d.ts

@@ -7,44 +7,6 @@
  * > Esse componente está **depreciado** e será removido na `v23.x.x`. Recomendamos utilizar o componente
  * [po-header](https://po-ui.io/documentation/po-header), que oferece compatibilidade com todas as funcionalidades do
  * `po-navbar`, além de maior flexibilidade, usabilidade e acessibilidade.
- * >
- * > Para o correto funcionamento do componente `po-navbar`, deve ser importado o módulo `BrowserAnimationsModule` no
- * módulo principal da sua aplicação.
- *
- * Módulo da aplicação:
- * ```
- * import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
- * import { PoModule } from '@po-ui/ng-components';
- * ...
- *
- * @NgModule({
- *   imports: [
- *     BrowserModule,
- *     BrowserAnimationsModule,
- *     ...
- *     PoModule
- *   ],
- *   declarations: [
- *     AppComponent,
- *     ...
- *   ],
- *   providers: [],
- *   bootstrap: [AppComponent]
- * })
- * export class AppModule { }
- * ```
- *
- * Em aplicações Standalone, utilize a seguinte configuração para o bootstrap:
- *
- * ```
- * import { bootstrapApplication } from '@angular/platform-browser';
- * import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
- * import { AppComponent } from './app.component';
- *
- * bootstrapApplication(AppComponent, {
- *   providers: [importProvidersFrom(BrowserAnimationsModule)]
- * }).catch(err => console.error(err));
- * ```
  */
 export declare class PoNavbarModule {
 }

package/lib/components/po-page/po-page-slide/po-page-slide-base.component.d.ts

@@ -11,45 +11,6 @@ import { PoPageSlideSize } from './po-page-slide-size.type';
  * através do botão que encontra-se no cabeçalho do mesmo ou através do método
  * `#close()`.
  *
- * > Para o correto funcionamento do componente `po-page-slide`, deve ser
- * > importado o módulo `BrowserAnimationsModule` no módulo principal da sua
- * > aplicação.
- *
- * Módulo da aplicação:
- * ```
- * import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
- * import { PoModule } from '@po-ui/ng-components';
- * ...
- *
- * @NgModule({
- *   imports: [
- *     BrowserModule,
- *     BrowserAnimationsModule,
- *     ...
- *     PoModule
- *   ],
- *   declarations: [
- *     AppComponent,
- *     ...
- *   ],
- *   providers: [],
- *   bootstrap: [AppComponent]
- * })
- * export class AppModule { }
- * ```
- *
- * Em aplicações Standalone, utilize a seguinte configuração para o bootstrap:
- *
- * ```
- * import { bootstrapApplication } from '@angular/platform-browser';
- * import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
- * import { AppComponent } from './app.component';
- *
- * bootstrapApplication(AppComponent, {
- *   providers: [importProvidersFrom(BrowserAnimationsModule)]
- * }).catch(err => console.error(err));
- * ```
- *
  *  Caso utilize componentes de field dentro do page-slide, recomenda-se o uso do [Grid System](https://po-ui.io/guides/grid-system).
  *
  * No rodapé é possível utilizar o componente [`PoPageSlideFooter`](/documentation/po-page-slide-footer) para customização do template.

package/lib/components/po-page/po-page-slide/po-page-slide.component.d.ts

@@ -1,4 +1,4 @@
-import { ElementRef } from '@angular/core';
+import { AnimationCallbackEvent, ElementRef } from '@angular/core';
 import { PoPageSlideLiterals } from './interfaces/po-page-slide-literals.interface';
 import { PoPageSlideBaseComponent } from './po-page-slide-base.component';
 import { PoPageSlideFooterComponent } from './po-page-slide-footer/po-page-slide-footer.component';
@@ -50,6 +50,10 @@ export declare class PoPageSlideComponent extends PoPageSlideBaseComponent {
     protected hasAlternativeCloseAction(): boolean;
     close(): void;
     onClickOut(event: MouseEvent): void;
+    animateEnter(event: AnimationCallbackEvent): void;
+    animateLeave(event: AnimationCallbackEvent): void;
+    private parseDuration;
+    private parseTiming;
     private setTimeFromCSS;
     private getTextDefault;
     private getLabelDefault;
@@ -57,16 +61,4 @@ export declare class PoPageSlideComponent extends PoPageSlideBaseComponent {
     private initFocus;
     private loadFirstElement;
     private removeEventListeners;
-    get fadeParams(): {
-        value: boolean;
-        params: {
-            duration: string;
-        };
-    };
-    get slideParams(): {
-        value: boolean;
-        params: {
-            timing: string;
-        };
-    };
 }

package/lib/components/po-slide/po-slide.component.d.ts

@@ -32,7 +32,6 @@ import { PoSlideItem } from './interfaces/po-slide-item.interface';
  * </example>
  */
 export declare class PoSlideComponent extends PoSlideBaseComponent implements OnInit, DoCheck, OnChanges, OnDestroy {
-    private readonly builder;
     slideContentTemplate: PoSlideContentTemplateDirective;
     private readonly slide;
     private readonly itemsElements;
@@ -41,7 +40,8 @@ export declare class PoSlideComponent extends PoSlideBaseComponent implements On
     slideItems: Array<PoSlideItem | any>;
     slideItemWidth: number;
     private isLoaded;
-    private player;
+    private currentAnimation;
+    private previousOffset;
     private setInterval;
     private readonly resize$;
     private resizeSubscription;
@@ -99,7 +99,6 @@ export declare class PoSlideComponent extends PoSlideBaseComponent implements On
     protected startSlide(): void;
     protected startInterval(): void;
     private animate;
-    private buildTransitionAnimation;
     private createArrayForTemplate;
     private createArrayFromSlides;
     private setDefaultHeight;

package/lib/components/po-slide/po-slide.module.d.ts

@@ -3,43 +3,6 @@
  *
  * Módulo do componente `po-slide`.
  *
- * > Para o correto funcionamento do componente `po-slide`, deve ser importado o módulo `BrowserAnimationsModule` no
- * > módulo principal da sua aplicação.
- *
- * Módulo da aplicação:
- * ```
- * import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
- * import { PoModule } from '@po-ui/ng-components';
- * ...
- *
- * @NgModule({
- *   imports: [
- *     BrowserModule,
- *     BrowserAnimationsModule,
- *     ...
- *     PoModule
- *   ],
- *   declarations: [
- *     AppComponent,
- *     ...
- *   ],
- *   providers: [],
- *   bootstrap: [AppComponent]
- * })
- * export class AppModule { }
- * ```
- *
- * Em aplicações Standalone, utilize a seguinte configuração para o bootstrap:
- *
- * ```
- * import { bootstrapApplication } from '@angular/platform-browser';
- * import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
- * import { AppComponent } from './app.component';
- *
- * bootstrapApplication(AppComponent, {
- *   providers: [importProvidersFrom(BrowserAnimationsModule)]
- * }).catch(err => console.error(err));
- * ```
  */
 export declare class PoSlideModule {
 }

package/lib/components/po-stepper/po-stepper.component.d.ts

@@ -79,7 +79,6 @@ export declare class PoStepperComponent extends PoStepperBaseComponent implement
     isDashedBorder(step: PoStepComponent, index: number): boolean;
     isDashedBorderTop(step: PoStepComponent, index: number): boolean;
     onStepActive(step: PoStepComponent): void;
-    trackByFn(step: PoStepComponent): string;
     private activeFirstStep;
     private allowNextStep;
     private canActiveNextStep;

package/lib/components/po-table/po-table.component.d.ts

@@ -72,7 +72,7 @@ import { PoTableColumnSpacing } from './enums/po-table-spacing.enum';
  *  <file name="sample-po-table-draggable/sample-po-table-draggable.component.ts"> </file>
  * </example>
  *
- * <example name="po-table-search-ai" title="PO Table - Search A.I. (EXPERIMENTAL)">
+ * <example name="po-table-search-ai" title="PO Table - Search A.I.">
  *  <file name="sample-po-table-search-ai/sample-po-table-search-ai.component.html"> </file>
  *  <file name="sample-po-table-search-ai/sample-po-table-search-ai.component.ts"> </file>
  * </example>

package/lib/components/po-tree-view/po-tree-view.module.d.ts

@@ -2,6 +2,7 @@
  * @description
  *
  * Módulo do componente `po-tree-view`.
+ *
  */
 export declare class PoTreeViewModule {
 }

package/lib/components/po-widget/po-widget-base.component.d.ts

@@ -41,7 +41,6 @@ import { PoWidgetSelection } from './interfaces/po-widget-selection.interface';
  * | `--font-size`                                | Tamanho da fonte                                                 | `var(--font-size-sm)`                                                       |
  * | `--font-weight`                              | Peso da fonte                                                    | `var(--font-weight-bold)`                                                   |
  * | `--font-color`                               | Cor da fonte                                                     | `var(--color-neutral-dark-95)`                                              |
- * | `--padding` - `@deprecated 21.x.x`           | Preenchimento do componente                                      | `1rem`                                                                      |
  * | `--padding-header`                           | Preenchimento do header                                          | `var(--spacing-sm) var(--spacing-sm) var(--spacing-xs) var(--spacing-sm)`   |
  * | `--padding-body`                             | Preenchimento do body                                            | `var(--spacing-xs) var(--spacing-sm) var(--spacing-xs) var(--spacing-sm)`   |
  * | `--padding-avatar`                           | Preenchimento do avatar                                          | `var(--spacing-sm) 0 var(--spacing-xs) var(--spacing-sm)`                   |

package/lib/interceptors/po-http-interceptor/po-http-interceptor-base.service.d.ts

@@ -12,17 +12,15 @@ import { PoLanguageService } from '../../services/po-language/po-language.servic
  *
  * ## Configuração
  *
- * Para o correto funcionamento do interceptor `po-http-interceptor`, deve ser importado o `BrowserAnimationsModule` na
- * aplicação. Além disso, é necessário configurar o `HttpClient` para utilizar os interceptors registrados via Dependency
- * Injection (DI) por meio da função `provideHttpClient(withInterceptorsFromDi())`.
+ * Para o correto funcionamento do interceptor `po-http-interceptor`, é necessário configurar o `HttpClient` para utilizar
+ * os interceptors registrados via Dependency Injection (DI) por meio da função `provideHttpClient(withInterceptorsFromDi())`.
  *
  * ### 1) NgModule
  *
- * No módulo principal da aplicação (geralmente `AppModule`), importe o `BrowserAnimationsModule` e configure o `HttpClient`,
+ * No módulo principal da aplicação (geralmente `AppModule`), configure o `HttpClient`,
  * como no exemplo abaixo:
  *
  * ```
- * import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  * import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
  * import { PoModule } from '@po-ui/ng-components';
  * ...
@@ -30,7 +28,6 @@ import { PoLanguageService } from '../../services/po-language/po-language.servic
  * @NgModule({
  *   imports: [
  *     BrowserModule,
- *     BrowserAnimationsModule,
  *     ...
  *     PoModule
  *   ],
@@ -58,13 +55,11 @@ import { PoLanguageService } from '../../services/po-language/po-language.servic
  * ```
  * import { ApplicationConfig, importProvidersFrom } from '@angular/core';
  * import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
- * import { provideAnimations } from '@angular/platform-browser/animations';
  * import { PoHttpInterceptorModule } from '@po-ui/ng-components';
  *
  * export const appConfig: ApplicationConfig = {
  *   providers: [
  *     ...
- *     provideAnimations(),
  *     provideHttpClient(withInterceptorsFromDi()),
  *     importProvidersFrom([
  *       PoHttpInterceptorModule

package/lib/interceptors/po-http-request/po-http-request-interceptor.service.d.ts

@@ -79,7 +79,6 @@ import { PoHttpRequesControltService } from './po-http-request-control-service';
  * ```
  * import { ApplicationConfig, importProvidersFrom } from '@angular/core';
  * import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
- * import { provideAnimations } from '@angular/platform-browser/animations';
  * import { PoHttpRequestModule } from '@po-ui/ng-components';
  *
  * export const appConfig: ApplicationConfig = {

package/lib/services/po-component-injector/po-component-injector.service.d.ts

@@ -1,9 +1,16 @@
-import { ComponentRef, ComponentFactoryResolver, ApplicationRef, Injector } from '@angular/core';
+import { ComponentRef, ApplicationRef, Injector, Type } from '@angular/core';
 export declare class PoComponentInjectorService {
-    private readonly componentResolver;
     private readonly applicationRef;
     private readonly injector;
-    constructor(componentResolver: ComponentFactoryResolver, applicationRef: ApplicationRef, injector: Injector);
-    createComponentInApplication(component: any): ComponentRef<any>;
-    destroyComponentInApplication(componentRef: any): void;
+    constructor(applicationRef: ApplicationRef, injector: Injector);
+    /**
+     * Cria dinamicamente um componente no ApplicationRef e o anexa ao body do documento.
+     * @param component Classe do componente Angular (ex: MeuComponente)
+     */
+    createComponentInApplication<T>(component: Type<T>): ComponentRef<T>;
+    /**
+     * Destrói o componente e remove suas referências do ApplicationRef e do DOM.
+     * @param componentRef Referência do componente que foi criado dinamicamente
+     */
+    destroyComponentInApplication<T>(componentRef: ComponentRef<T>): void;
 }

package/lib/utils/util.d.ts

@@ -1,7 +1,6 @@
 import { PoDensityMode } from '../enums/po-density-mode.enum';
 import { ElementRef } from '@angular/core';
 import { PoThemeA11yEnum } from '../services/po-theme/enum/po-theme-a11y.enum';
-import { PoThemeService } from '../services/po-theme/po-theme.service';
 /**
  * Converte e formata os bytes em formato mais legível para o usuário.
  *
@@ -18,12 +17,6 @@ export declare function formatBytes(bytes: number, decimals?: number): string;
  * Retorna o idioma atual do navegador
  */
 export declare function getBrowserLanguage(): string;
-/**
- * @deprecated use getDefaultSizeFn
- *
- * Retorna o tamanho padrão dos componentes conforme o nível de acessibilidade.
- */
-export declare function getDefaultSize<T>(poThemeService: PoThemeService, sizeEnum: T): T[keyof T];
 /**
  * Retorna o tamanho padrão dos componentes conforme o nível de acessibilidade.
  */
@@ -252,12 +245,6 @@ export declare function replaceFormatSeparator(format: string, separator: string
  * @param isAscendingOrder : ordenação crescente ou descrescente.
  */
 export declare function sortArrayOfObjects(items: any, key: any, isAscendingOrder: any): any;
-/**
- * @deprecated use validateSizeFn
- *
- * Valida e retorna um tamanho permitido para os componentes, considerando a acessibilidade.
- */
-export declare function validateSize<T>(value: string, poThemeService: PoThemeService, sizeEnum: T): T[keyof T];
 /**
  * Valida e retorna um tamanho permitido para os componentes, considerando a acessibilidade.
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@po-ui/ng-components",
-  "version": "21.33.0",
+  "version": "22.0.0-next.0",
   "description": "PO UI - Components",
   "author": "PO UI",
   "license": "MIT",
@@ -21,25 +21,23 @@
     ]
   },
   "dependencies": {
-    "@angular/cdk": "~21.2.14",
-    "@po-ui/style": "21.33.0",
-    "@po-ui/ng-schematics": "21.33.0",
+    "@angular/cdk": "~22.0.1",
+    "@po-ui/style": "22.0.0-next.0",
+    "@po-ui/ng-schematics": "22.0.0-next.0",
     "driver.js": "~1.4.0",
     "echarts": "^6.1.0",
     "tslib": "^2.6.2"
   },
   "peerDependencies": {
-    "@angular/animations": "^21",
-    "@angular/cdk": "^21",
-    "@angular/common": "^21",
-    "@angular/compiler": "^21",
-    "@angular/core": "^21",
-    "@angular/forms": "^21",
-    "@angular/platform-browser": "^21",
-    "@angular/platform-browser-dynamic": "^21",
-    "@angular/router": "^21",
-    "@angular-devkit/schematics": "^21",
-    "@po-ui/style": "21.33.0",
+    "@angular/cdk": "^22",
+    "@angular/common": "^22",
+    "@angular/compiler": "^22",
+    "@angular/core": "^22",
+    "@angular/forms": "^22",
+    "@angular/platform-browser": "^22",
+    "@angular/router": "^22",
+    "@angular-devkit/schematics": "^22",
+    "@po-ui/style": "22.0.0-next.0",
     "rxjs": "~7.8.1",
     "zone.js": "~0.15.0"
   },

package/schematics/collection.json

@@ -15,26 +15,6 @@
       "description": "Crate a app.component with sidemenu layout configured and create a component how sample",
       "factory": "./ng-generate/sidemenu/index",
       "schema": "./ng-generate/sidemenu/schema.json"
-    },
-    "po-page-list": {
-      "description": "Crate a component with po-page-list",
-      "factory": "./ng-generate/po-page-list/index",
-      "schema": "./ng-generate/po-page-list/schema.json"
-    },
-    "po-page-edit": {
-      "description": "Crate a component with po-page-edit",
-      "factory": "./ng-generate/po-page-edit/index",
-      "schema": "./ng-generate/po-page-edit/schema.json"
-    },
-    "po-page-detail": {
-      "description": "Crate a component with po-page-detail",
-      "factory": "./ng-generate/po-page-detail/index",
-      "schema": "./ng-generate/po-page-detail/schema.json"
-    },
-    "po-page-default": {
-      "description": "Crate a component with po-page-default",
-      "factory": "./ng-generate/po-page-default/index",
-      "schema": "./ng-generate/po-page-default/schema.json"
     }
   }
 }

package/schematics/migrations.json

@@ -65,6 +65,11 @@
       "version": "21",
       "description": "Atualiza @po-ui/ng-components para v21",
       "factory": "./ng-update/v21/index"
+    },
+    "migration-v22": {
+      "version": "22",
+      "description": "Atualiza @po-ui/ng-components para v22",
+      "factory": "./ng-update/v22/index"
     }
   }
 }

package/schematics/ng-add/index.js

@@ -18,7 +18,7 @@ function default_1(options) {
 }
 function addPoPackageAndInstall() {
     return (tree, context) => {
-        (0, package_config_1.addPackageToPackageJson)(tree, '@po-ui/ng-components', '21.33.0');
+        (0, package_config_1.addPackageToPackageJson)(tree, '@po-ui/ng-components', '22.0.0-next.0');
         // install packages
         context.addTask(new tasks_1.NodePackageInstallTask());
     };

package/schematics/ng-add/setup-project.d.ts

@@ -4,6 +4,7 @@ import { Rule, Tree } from '@angular-devkit/schematics';
  *  - Add PO Module to app root module
  *  - Adds themes to styles
  *  - Run sidemenu schematic
+ *  - Add provideZoneChangeDetection: standalone via app.config.ts, module-based via main.ts
  */
 export default function (options: any): Rule;
 export declare function addImportOnly(options: any, moduleNames: string | Array<string>, importPath: string): (host: Tree) => import("@angular-devkit/schematics/src/tree/interface").Tree;