@po-ui/ng-components 19.28.0-beta.1 → 19.28.1

package/fesm2022/po-ui-ng-components.mjs

@@ -11993,10 +11993,7 @@ class PoDropdownComponent extends PoDropdownBaseComponent {
     hideDropdown() {
         this.icon = 'ICON_ARROW_DOWN';
         this.removeListeners();
-        if (this.popupRef.showPopup) {
-            this.popupRef.close();
-        }
-        this.dropdownRef.nativeElement.focus();
+        this.popupRef.close();
         this.open = false;
         this.changeDetector.detectChanges();
     }
@@ -12041,11 +12038,11 @@ class PoDropdownComponent extends PoDropdownBaseComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoDropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.7", type: PoDropdownComponent, isStandalone: false, selector: "po-dropdown", viewQueries: [{ propertyName: "dropdownRef", first: true, predicate: ["dropdownRef"], descendants: true, read: ElementRef, static: true }, { propertyName: "popupRef", first: true, predicate: ["popupRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n  #dropdownRef\n  class=\"po-dropdown\"\n  [class.po-dropdown-aa]=\"size === 'small'\"\n  [attr.disabled]=\"disabled\"\n  tabindex=\"{{ disabled ? -1 : 0 }}\"\n  (click)=\"toggleDropdown()\"\n  (keydown)=\"onKeyDown($event)\"\n>\n  <div\n    class=\"po-dropdown-button\"\n    [class.po-dropdown-button-aa]=\"size === 'small'\"\n    [ngClass]=\"{ 'po-dropdown-button-disabled': disabled, 'po-dropdown-button-open': open }\"\n  >\n    <span>{{ label }}</span>\n    <po-icon class=\"po-dropdown-icon\" [class.po-dropdown-icon-aa]=\"size === 'small'\" [p-icon]=\"icon\"></po-icon>\n  </div>\n</div>\n\n<po-popup\n  #popupRef\n  p-hide-arrow\n  p-is-corner-align\n  p-position=\"bottom-left\"\n  [p-actions]=\"actions\"\n  [p-custom-positions]=\"['bottom-left', 'top-left']\"\n  [p-size]=\"size\"\n  [p-target]=\"dropdownRef\"\n  (p-close)=\"hideDropdown()\"\n>\n</po-popup>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PoPopupComponent, selector: "po-popup" }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.7", type: PoDropdownComponent, isStandalone: false, selector: "po-dropdown", viewQueries: [{ propertyName: "dropdownRef", first: true, predicate: ["dropdownRef"], descendants: true, read: ElementRef, static: true }, { propertyName: "popupRef", first: true, predicate: ["popupRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n  #dropdownRef\n  class=\"po-dropdown\"\n  [class.po-dropdown-aa]=\"size === 'small'\"\n  [attr.disabled]=\"disabled\"\n  tabindex=\"{{ disabled ? -1 : 0 }}\"\n  (click)=\"toggleDropdown()\"\n  (keydown)=\"onKeyDown($event)\"\n>\n  <div\n    class=\"po-dropdown-button\"\n    [class.po-dropdown-button-aa]=\"size === 'small'\"\n    [ngClass]=\"{ 'po-dropdown-button-disabled': disabled, 'po-dropdown-button-open': open }\"\n  >\n    <span>{{ label }}</span>\n    <po-icon class=\"po-dropdown-icon\" [class.po-dropdown-icon-aa]=\"size === 'small'\" [p-icon]=\"icon\"></po-icon>\n  </div>\n</div>\n\n<po-popup\n  #popupRef\n  p-hide-arrow\n  p-is-corner-align\n  p-position=\"bottom-left\"\n  [p-actions]=\"actions\"\n  [p-custom-positions]=\"['bottom-left', 'top-left']\"\n  [p-size]=\"size\"\n  [p-target]=\"dropdownRef\"\n>\n</po-popup>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PoPopupComponent, selector: "po-popup" }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoDropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'po-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div\n  #dropdownRef\n  class=\"po-dropdown\"\n  [class.po-dropdown-aa]=\"size === 'small'\"\n  [attr.disabled]=\"disabled\"\n  tabindex=\"{{ disabled ? -1 : 0 }}\"\n  (click)=\"toggleDropdown()\"\n  (keydown)=\"onKeyDown($event)\"\n>\n  <div\n    class=\"po-dropdown-button\"\n    [class.po-dropdown-button-aa]=\"size === 'small'\"\n    [ngClass]=\"{ 'po-dropdown-button-disabled': disabled, 'po-dropdown-button-open': open }\"\n  >\n    <span>{{ label }}</span>\n    <po-icon class=\"po-dropdown-icon\" [class.po-dropdown-icon-aa]=\"size === 'small'\" [p-icon]=\"icon\"></po-icon>\n  </div>\n</div>\n\n<po-popup\n  #popupRef\n  p-hide-arrow\n  p-is-corner-align\n  p-position=\"bottom-left\"\n  [p-actions]=\"actions\"\n  [p-custom-positions]=\"['bottom-left', 'top-left']\"\n  [p-size]=\"size\"\n  [p-target]=\"dropdownRef\"\n  (p-close)=\"hideDropdown()\"\n>\n</po-popup>\n" }]
+            args: [{ selector: 'po-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div\n  #dropdownRef\n  class=\"po-dropdown\"\n  [class.po-dropdown-aa]=\"size === 'small'\"\n  [attr.disabled]=\"disabled\"\n  tabindex=\"{{ disabled ? -1 : 0 }}\"\n  (click)=\"toggleDropdown()\"\n  (keydown)=\"onKeyDown($event)\"\n>\n  <div\n    class=\"po-dropdown-button\"\n    [class.po-dropdown-button-aa]=\"size === 'small'\"\n    [ngClass]=\"{ 'po-dropdown-button-disabled': disabled, 'po-dropdown-button-open': open }\"\n  >\n    <span>{{ label }}</span>\n    <po-icon class=\"po-dropdown-icon\" [class.po-dropdown-icon-aa]=\"size === 'small'\" [p-icon]=\"icon\"></po-icon>\n  </div>\n</div>\n\n<po-popup\n  #popupRef\n  p-hide-arrow\n  p-is-corner-align\n  p-position=\"bottom-left\"\n  [p-actions]=\"actions\"\n  [p-custom-positions]=\"['bottom-left', 'top-left']\"\n  [p-size]=\"size\"\n  [p-target]=\"dropdownRef\"\n>\n</po-popup>\n" }]
         }], propDecorators: { dropdownRef: [{
                 type: ViewChild,
                 args: ['dropdownRef', { read: ElementRef, static: true }]
@@ -15899,11 +15896,11 @@ class PoModalComponent extends PoModalBaseComponent {
             this.modalContent.nativeElement.querySelector(this.focusableElements) || this.modalContent.nativeElement;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: PoModalComponent, isStandalone: false, selector: "po-modal", queries: [{ propertyName: "modalFooter", first: true, predicate: PoModalFooterComponent, descendants: true }], viewQueries: [{ propertyName: "modalContent", first: true, predicate: ["modalContent"], descendants: true, read: ElementRef }, { propertyName: "modalContainer", first: true, predicate: ["modalContainer"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "@if (!isHidden) {\n  <div #modalContainer class=\"po-modal\" tabindex=\"0\" (keydown.esc)=\"closeModalOnEscapeKey($event)\">\n    <div class=\"po-modal-overlay\" (mousedown)=\"onClickOut($event)\"></div>\n    <div class=\"po-modal-container po-pb-2 po-pt-2\">\n      <div class=\"po-modal-vertical-align\">\n        <div #modalContent class=\"po-modal-content po-modal-{{ size }}\" tabindex=\"-1\">\n          <div class=\"po-modal-header\">\n            <div class=\"po-modal-title po-text-ellipsis\">\n              @if (icon) {\n                <po-icon [p-icon]=\"icon\"></po-icon>\n              }\n              <div class=\"po-text-ellipsis\">\n                {{ title }}\n              </div>\n            </div>\n            @if (!hideClose) {\n              <po-button\n                [p-aria-label]=\"literals.close\"\n                p-icon=\"ICON_CLOSE\"\n                (p-click)=\"close(true)\"\n                p-kind=\"tertiary\"\n                [p-size]=\"componentsSize\"\n              >\n              </po-button>\n            }\n          </div>\n          <div class=\"po-modal-body\">\n            <ng-content></ng-content>\n          </div>\n          @if (modalFooter) {\n            <ng-content select=\"po-modal-footer\"></ng-content>\n          } @else {\n            <po-modal-footer>\n              <div class=\"po-modal-footer-basic\">\n                @if (secondaryAction) {\n                  <po-button\n                    [p-danger]=\"getSecondaryActionButtonDanger()\"\n                    [p-disabled]=\"secondaryAction.disabled\"\n                    [p-icon]=\"secondaryAction.icon\"\n                    [p-label]=\"secondaryAction.label\"\n                    [p-loading]=\"secondaryAction.loading\"\n                    p-kind=\"secondary\"\n                    [p-size]=\"componentsSize\"\n                    (p-click)=\"secondaryAction.action()\"\n                  >\n                  </po-button>\n                }\n                <po-button\n                  class=\"po-button-modal-first-action\"\n                  [p-danger]=\"primaryAction.danger\"\n                  [p-disabled]=\"primaryAction.disabled\"\n                  [p-icon]=\"primaryAction.icon\"\n                  [p-label]=\"primaryAction.label\"\n                  [p-loading]=\"primaryAction.loading\"\n                  p-kind=\"primary\"\n                  [p-size]=\"componentsSize\"\n                  (p-click)=\"primaryAction.action()\"\n                >\n                </po-button>\n              </div>\n            </po-modal-footer>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "component", type: PoButtonComponent, selector: "po-button" }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoModalFooterComponent, selector: "po-modal-footer", inputs: ["p-disabled-align"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: PoModalComponent, isStandalone: false, selector: "po-modal", queries: [{ propertyName: "modalFooter", first: true, predicate: PoModalFooterComponent, descendants: true }], viewQueries: [{ propertyName: "modalContent", first: true, predicate: ["modalContent"], descendants: true, read: ElementRef }, { propertyName: "modalContainer", first: true, predicate: ["modalContainer"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "@if (!isHidden) {\n  <div #modalContainer class=\"po-modal\" tabindex=\"0\" (keydown.esc)=\"closeModalOnEscapeKey($event)\">\n    <div class=\"po-modal-overlay\" (mousedown)=\"onClickOut($event)\"></div>\n    <div class=\"po-modal-container po-pb-2 po-pt-2\">\n      <div class=\"po-modal-vertical-align\">\n        <div #modalContent class=\"po-modal-content po-modal-{{ size }}\" tabindex=\"-1\">\n          <div class=\"po-modal-header\">\n            <div class=\"po-modal-title po-text-ellipsis\">\n              @if (icon) {\n                <po-icon [p-icon]=\"icon\"></po-icon>\n              }\n              <div class=\"po-text-ellipsis\">\n                {{ title }}\n              </div>\n            </div>\n            @if (!hideClose) {\n              <po-button\n                [p-aria-label]=\"literals.close\"\n                p-icon=\"ICON_CLOSE\"\n                (p-click)=\"close(true)\"\n                p-kind=\"tertiary\"\n                [p-size]=\"componentsSize\"\n              >\n              </po-button>\n            }\n          </div>\n          <div class=\"po-modal-body\">\n            <ng-content></ng-content>\n          </div>\n          @if (modalFooter) {\n            <ng-content select=\"po-modal-footer\"></ng-content>\n          } @else {\n            <po-modal-footer>\n              <div class=\"po-modal-footer-basic\">\n                @if (secondaryAction) {\n                  <po-button\n                    [p-danger]=\"getSecondaryActionButtonDanger()\"\n                    [p-disabled]=\"secondaryAction.disabled\"\n                    [p-label]=\"secondaryAction.label\"\n                    [p-loading]=\"secondaryAction.loading\"\n                    p-kind=\"secondary\"\n                    [p-size]=\"componentsSize\"\n                    (p-click)=\"secondaryAction.action()\"\n                  >\n                  </po-button>\n                }\n                <po-button\n                  class=\"po-button-modal-first-action\"\n                  [p-danger]=\"primaryAction.danger\"\n                  [p-disabled]=\"primaryAction.disabled\"\n                  [p-label]=\"primaryAction.label\"\n                  [p-loading]=\"primaryAction.loading\"\n                  p-kind=\"primary\"\n                  [p-size]=\"componentsSize\"\n                  (p-click)=\"primaryAction.action()\"\n                >\n                </po-button>\n              </div>\n            </po-modal-footer>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "component", type: PoButtonComponent, selector: "po-button" }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoModalFooterComponent, selector: "po-modal-footer", inputs: ["p-disabled-align"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'po-modal', standalone: false, template: "@if (!isHidden) {\n  <div #modalContainer class=\"po-modal\" tabindex=\"0\" (keydown.esc)=\"closeModalOnEscapeKey($event)\">\n    <div class=\"po-modal-overlay\" (mousedown)=\"onClickOut($event)\"></div>\n    <div class=\"po-modal-container po-pb-2 po-pt-2\">\n      <div class=\"po-modal-vertical-align\">\n        <div #modalContent class=\"po-modal-content po-modal-{{ size }}\" tabindex=\"-1\">\n          <div class=\"po-modal-header\">\n            <div class=\"po-modal-title po-text-ellipsis\">\n              @if (icon) {\n                <po-icon [p-icon]=\"icon\"></po-icon>\n              }\n              <div class=\"po-text-ellipsis\">\n                {{ title }}\n              </div>\n            </div>\n            @if (!hideClose) {\n              <po-button\n                [p-aria-label]=\"literals.close\"\n                p-icon=\"ICON_CLOSE\"\n                (p-click)=\"close(true)\"\n                p-kind=\"tertiary\"\n                [p-size]=\"componentsSize\"\n              >\n              </po-button>\n            }\n          </div>\n          <div class=\"po-modal-body\">\n            <ng-content></ng-content>\n          </div>\n          @if (modalFooter) {\n            <ng-content select=\"po-modal-footer\"></ng-content>\n          } @else {\n            <po-modal-footer>\n              <div class=\"po-modal-footer-basic\">\n                @if (secondaryAction) {\n                  <po-button\n                    [p-danger]=\"getSecondaryActionButtonDanger()\"\n                    [p-disabled]=\"secondaryAction.disabled\"\n                    [p-icon]=\"secondaryAction.icon\"\n                    [p-label]=\"secondaryAction.label\"\n                    [p-loading]=\"secondaryAction.loading\"\n                    p-kind=\"secondary\"\n                    [p-size]=\"componentsSize\"\n                    (p-click)=\"secondaryAction.action()\"\n                  >\n                  </po-button>\n                }\n                <po-button\n                  class=\"po-button-modal-first-action\"\n                  [p-danger]=\"primaryAction.danger\"\n                  [p-disabled]=\"primaryAction.disabled\"\n                  [p-icon]=\"primaryAction.icon\"\n                  [p-label]=\"primaryAction.label\"\n                  [p-loading]=\"primaryAction.loading\"\n                  p-kind=\"primary\"\n                  [p-size]=\"componentsSize\"\n                  (p-click)=\"primaryAction.action()\"\n                >\n                </po-button>\n              </div>\n            </po-modal-footer>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n}\n" }]
+            args: [{ selector: 'po-modal', standalone: false, template: "@if (!isHidden) {\n  <div #modalContainer class=\"po-modal\" tabindex=\"0\" (keydown.esc)=\"closeModalOnEscapeKey($event)\">\n    <div class=\"po-modal-overlay\" (mousedown)=\"onClickOut($event)\"></div>\n    <div class=\"po-modal-container po-pb-2 po-pt-2\">\n      <div class=\"po-modal-vertical-align\">\n        <div #modalContent class=\"po-modal-content po-modal-{{ size }}\" tabindex=\"-1\">\n          <div class=\"po-modal-header\">\n            <div class=\"po-modal-title po-text-ellipsis\">\n              @if (icon) {\n                <po-icon [p-icon]=\"icon\"></po-icon>\n              }\n              <div class=\"po-text-ellipsis\">\n                {{ title }}\n              </div>\n            </div>\n            @if (!hideClose) {\n              <po-button\n                [p-aria-label]=\"literals.close\"\n                p-icon=\"ICON_CLOSE\"\n                (p-click)=\"close(true)\"\n                p-kind=\"tertiary\"\n                [p-size]=\"componentsSize\"\n              >\n              </po-button>\n            }\n          </div>\n          <div class=\"po-modal-body\">\n            <ng-content></ng-content>\n          </div>\n          @if (modalFooter) {\n            <ng-content select=\"po-modal-footer\"></ng-content>\n          } @else {\n            <po-modal-footer>\n              <div class=\"po-modal-footer-basic\">\n                @if (secondaryAction) {\n                  <po-button\n                    [p-danger]=\"getSecondaryActionButtonDanger()\"\n                    [p-disabled]=\"secondaryAction.disabled\"\n                    [p-label]=\"secondaryAction.label\"\n                    [p-loading]=\"secondaryAction.loading\"\n                    p-kind=\"secondary\"\n                    [p-size]=\"componentsSize\"\n                    (p-click)=\"secondaryAction.action()\"\n                  >\n                  </po-button>\n                }\n                <po-button\n                  class=\"po-button-modal-first-action\"\n                  [p-danger]=\"primaryAction.danger\"\n                  [p-disabled]=\"primaryAction.disabled\"\n                  [p-label]=\"primaryAction.label\"\n                  [p-loading]=\"primaryAction.loading\"\n                  p-kind=\"primary\"\n                  [p-size]=\"componentsSize\"\n                  (p-click)=\"primaryAction.action()\"\n                >\n                </po-button>\n              </div>\n            </po-modal-footer>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n}\n" }]
         }], ctorParameters: () => [], propDecorators: { modalContent: [{
                 type: ViewChild,
                 args: ['modalContent', { read: ElementRef }]
@@ -50813,13 +50810,13 @@ class PoContextTabsComponent extends PoTabsComponent {
             }
             if (!currentTab) {
                 this.initialTabsWidth.push({ id: tab.nativeElement.id, width: tab.nativeElement.offsetWidth });
-                if (index > quantityTabs - 1) {
+                if (index > quantityTabs) {
                     tab.nativeElement.style.display = 'none';
                     tab.nativeElement.hidden = true;
                 }
                 this.tabsChildren['_results'] = this.tabsChildren['_results'].filter(item => !item.removed);
             }
-            if (tab.nativeElement.hidden && index <= quantityTabs - 1)
+            if (tab.nativeElement.hidden && index <= quantityTabs)
                 return;
             index++;
         });
@@ -54844,11 +54841,15 @@ const NO_MESSAGE_HEADER_PARAM = 'X-PO-No-Message';
  *
  * ## Configuração
  *
- * Para o correto funcionamento do interceptor `po-http-interceptor`, deve ser importado o `BrowserAnimationsModule` no
- * módulo principal da sua aplicação. Além disso, é necessário configurar o `HttpClient` para utilizar os interceptors
- * registrados no Dependency Injection (DI) por meio da função `provideHttpClient(withInterceptorsFromDi())`.
+ * 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())`.
+ *
+ * ### 1) NgModule
+ *
+ * No módulo principal da aplicação (geralmente `AppModule`), importe o `BrowserAnimationsModule` e configure o `HttpClient`,
+ * como no exemplo abaixo:
  *
- * Módulo da aplicação:
  * ```
  * import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  * import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
@@ -54878,6 +54879,32 @@ const NO_MESSAGE_HEADER_PARAM = 'X-PO-No-Message';
  * Ao importar o módulo `PoModule` na aplicação, o `po-http-interceptor` é automaticamente configurado sem a necessidade
  * de qualquer configuração extra.
  *
+ * ### 2) Standalone
+ *
+ * No arquivo contendo a configuração da aplicação (geralmente `src/app/app.config.ts`), adicione os providers e configure o `HttpClient`,
+ * como no exemplo abaixo:
+ *
+ * ```
+ * 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
+ *     ]),
+ *     ...
+ *   ]
+ * };
+ * ```
+ *
+ * ## Como usar
+ *
  * Ao realizar requisições utilize o `HttpClient`, conforme exemplo abaixo:
  *
  * ```
@@ -54901,8 +54928,6 @@ const NO_MESSAGE_HEADER_PARAM = 'X-PO-No-Message';
  * }
  * ```
  *
- * ## Como usar
- *
  * Para exibir as noticações é necessário informar a mensagem no retorno da requisição. A estrutura da mensagem
  * é feita com base no status da resposta, conforme será apresentado nos próximos tópicos.
  *
@@ -55206,9 +55231,63 @@ const screenLock = 'X-PO-Screen-Lock';
  * ```
  * > Após a validação no interceptor, o parâmetro será removido do cabeçalho da requisição.
  *
+ * ## Configuração
+ *
+ * É necessário configurar o `HttpClient` para utilizar os interceptors registrados via Dependency Injection (DI)
+ * por meio da função `provideHttpClient(withInterceptorsFromDi())`.
+ *
+ * ### 1) NgModule
+ *
+ * ```
+ * import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+ * import { PoModule } from '@po-ui/ng-components';
+ * ...
+ *
+ * @NgModule({
+ *   imports: [
+ *     ...
+ *     PoModule
+ *   ],
+ *   declarations: [
+ *     AppComponent,
+ *     ...
+ *   ],
+ *   providers: [
+ *     provideHttpClient(withInterceptorsFromDi()),
+ *     ...
+ *   ],
+ *   bootstrap: [AppComponent]
+ * })
+ * export class AppModule { }
+ * ```
+ *
  * Ao importar o módulo `PoModule` na aplicação, o `po-http-request-interceptor` é automaticamente configurado sem a necessidade
  * de qualquer configuração extra.
  *
+ * ### 2) Standalone
+ *
+ * No arquivo contendo a configuração da aplicação (geralmente `src/app/app.config.ts`), adicione os providers e configure o `HttpClient`,
+ * como no exemplo abaixo:
+ *
+ * ```
+ * 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 = {
+ *   providers: [
+ *     ...
+ *     provideHttpClient(withInterceptorsFromDi()),
+ *     importProvidersFrom([
+ *       PoHttpRequestModule
+ *     ]),
+ *     ...
+ *   ]
+ * };
+ * ```
+ *
+ * ## Como usar
  *
  * Segue abaixo um exemplo de uso:
  *