@po-ui/ng-components 20.2.0 → 20.3.0

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

@@ -5608,6 +5608,7 @@ var PoCheckboxSize;
  *
  */
 class PoCheckboxBaseComponent {
+    cd;
     // Propriedade interna que define se o ícone de ajuda adicional terá cursor clicável (evento) ou padrão (tooltip).
     additionalHelpEventTrigger;
     /**
@@ -5737,6 +5738,9 @@ class PoCheckboxBaseComponent {
     get size() {
         return this._size ?? getDefaultSizeFn(PoCheckboxSize);
     }
+    constructor(cd) {
+        this.cd = cd;
+    }
     changeValue() {
         if (this.propagateChange) {
             this.propagateChange(this.checkboxValue);
@@ -5753,6 +5757,7 @@ class PoCheckboxBaseComponent {
     // Usada para interceptar os estados de habilitado via forms api
     setDisabledState(isDisabled) {
         this.disabled = isDisabled;
+        this.cd.markForCheck();
     }
     registerOnChange(fn) {
         this.propagateChange = fn;
@@ -5765,12 +5770,12 @@ class PoCheckboxBaseComponent {
             this.changeModelValue(value);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoCheckboxBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoCheckboxBaseComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.0.7", type: PoCheckboxBaseComponent, isStandalone: true, inputs: { additionalHelpEventTrigger: "additionalHelpEventTrigger", additionalHelpTooltip: ["p-additional-help-tooltip", "additionalHelpTooltip"], appendBox: ["p-append-in-body", "appendBox", convertToBoolean], help: ["p-help", "help"], name: "name", autoFocus: ["p-auto-focus", "autoFocus", convertToBoolean], label: ["p-label", "label"], checkboxValue: ["p-checkboxValue", "checkboxValue"], checkBoxRequired: ["p-required", "checkBoxRequired", convertToBoolean], disabladTabindex: ["p-disabled-tabindex", "disabladTabindex", convertToBoolean], disabled: ["p-disabled", "disabled"], size: ["p-size", "size"] }, outputs: { additionalHelp: "p-additional-help", blur: "p-blur", change: "p-change", keydown: "p-keydown" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoCheckboxBaseComponent, decorators: [{
             type: Directive
-        }], propDecorators: { additionalHelpEventTrigger: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { additionalHelpEventTrigger: [{
                 type: Input
             }], additionalHelpTooltip: [{
                 type: Input,
@@ -6118,12 +6123,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
  * </example>
  */
 class PoCheckboxComponent extends PoCheckboxBaseComponent {
-    changeDetector = inject(ChangeDetectorRef);
+    changeDetector;
     _iconToken;
     checkboxLabel;
     constructor() {
         const value = inject(ICONS_DICTIONARY, { optional: true });
-        super();
+        const changeDetector = inject(ChangeDetectorRef);
+        super(changeDetector);
+        this.changeDetector = changeDetector;
         this._iconToken = value ?? AnimaliaIconDictionary;
     }
     /**
@@ -13142,6 +13149,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
             }] } });
 
 class PoFieldModel {
+    cd;
     // Propriedade interna que define se o ícone de ajuda adicional terá cursor clicável (evento) ou padrão (tooltip).
     additionalHelpEventTrigger;
     /**
@@ -13212,11 +13220,14 @@ class PoFieldModel {
     value;
     onTouched;
     propagateChange;
-    constructor() { }
+    constructor(cd) {
+        this.cd = cd;
+    }
     // Função implementada do ControlValueAccessor
     // Usada para interceptar os estados de habilitado via forms api
     setDisabledState(isDisabled) {
         this.disabled = isDisabled;
+        this.cd?.markForCheck();
     }
     registerOnChange(fn) {
         this.propagateChange = fn;
@@ -13275,12 +13286,12 @@ class PoFieldModel {
             this.propagateChange(value);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoFieldModel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoFieldModel, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.0.7", type: PoFieldModel, isStandalone: true, inputs: { additionalHelpEventTrigger: "additionalHelpEventTrigger", additionalHelpTooltip: ["p-additional-help-tooltip", "additionalHelpTooltip"], appendBox: ["p-append-in-body", "appendBox", convertToBoolean], label: ["p-label", "label"], name: "name", help: ["p-help", "help"], disabled: ["p-disabled", "disabled", convertToBoolean] }, outputs: { additionalHelp: "p-additional-help", change: "p-change", keydown: "p-keydown" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoFieldModel, decorators: [{
             type: Directive
-        }], ctorParameters: () => [], propDecorators: { additionalHelpEventTrigger: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { additionalHelpEventTrigger: [{
                 type: Input
             }], additionalHelpTooltip: [{
                 type: Input,
@@ -14763,6 +14774,7 @@ class PoDatepickerBaseComponent {
     // Usada para interceptar os estados de habilitado via forms api
     setDisabledState(isDisabled) {
         this.disabled = isDisabled;
+        this.cd.markForCheck();
     }
     // Função implementada do ControlValueAccessor
     // Usada para interceptar as mudanças e não atualizar automaticamente o Model
@@ -26198,6 +26210,7 @@ class PoComboBaseComponent {
     // Usada para interceptar os estados de habilitado via forms api
     setDisabledState(isDisabled) {
         this.disabled = isDisabled;
+        this.changeDetector.markForCheck();
     }
     registerOnChange(fn) {
         this.onModelChange = fn;
@@ -27050,7 +27063,6 @@ class PoComboComponent extends PoComboBaseComponent {
             // Esconde Content do Combo quando for clicado fora
             this.controlComboVisibility(false);
             this.verifyValidOption();
-            // caso for changeOnEnter deve limpar o selectedView para reinicia-lo
             this.selectedView = this.changeOnEnter && !this.selectedValue ? undefined : this.selectedView;
         }
         else {
@@ -27213,7 +27225,6 @@ class PoComboComponent extends PoComboBaseComponent {
     setScrollingControl() {
         return this.infiniteScroll ? true : false;
     }
-    // Define o foco no item apropriado do listbox.
     focusItem() {
         this.poListbox?.listboxItemList?.nativeElement.focus();
         setTimeout(() => {
@@ -27235,7 +27246,6 @@ class PoComboComponent extends PoComboBaseComponent {
         event?.preventDefault();
         this.inputEl.nativeElement.focus();
     }
-    // Determina se o tab deve abrir o listbox.
     shouldHandleTab(event) {
         return this.comboOpen && this.appendBox && !event.shiftKey;
     }
@@ -27776,6 +27786,7 @@ class PoDatepickerRangeBaseComponent {
     // Usada para interceptar os estados de habilitado via forms api
     setDisabledState(isDisabled) {
         this.disabled = isDisabled;
+        this.changeDetector.markForCheck();
     }
     // Função implementada do ControlValueAccessor
     // Usada para interceptar as mudanças e não atualizar automaticamente o Model
@@ -35985,6 +35996,7 @@ const poUploadMinFileSize = 0;
  */
 class PoUploadBaseComponent {
     uploadService;
+    cd;
     // Propriedade interna que define se o ícone de ajuda adicional terá cursor clicável (evento) ou padrão (tooltip).
     additionalHelpEventTrigger;
     /**
@@ -36507,14 +36519,16 @@ class PoUploadBaseComponent {
     get size() {
         return this._size ?? getDefaultSizeFn(PoFieldSize);
     }
-    constructor(uploadService, languageService) {
+    constructor(uploadService, languageService, cd) {
         this.uploadService = uploadService;
+        this.cd = cd;
         this.language = languageService.getShortLanguage();
     }
     // Função implementada do ControlValueAccessor
     // Usada para interceptar os estados de habilitado via forms api
     setDisabledState(isDisabled) {
         this.disabled = isDisabled;
+        this.cd.markForCheck();
     }
     registerOnChange(fn) {
         this.onModelChange = fn;
@@ -36636,12 +36650,12 @@ class PoUploadBaseComponent {
         }
         return files;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoUploadBaseComponent, deps: [{ token: PoUploadService }, { token: PoLanguageService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoUploadBaseComponent, deps: [{ token: PoUploadService }, { token: PoLanguageService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.0.7", type: PoUploadBaseComponent, isStandalone: true, inputs: { additionalHelpEventTrigger: "additionalHelpEventTrigger", additionalHelpTooltip: ["p-additional-help-tooltip", "additionalHelpTooltip"], appendBox: ["p-append-in-body", "appendBox", convertToBoolean], autoFocus: ["p-auto-focus", "autoFocus", convertToBoolean], dragDropHeight: ["p-drag-drop-height", "dragDropHeight"], label: ["p-label", "label"], help: ["p-help", "help"], url: ["p-url", "url"], name: "name", autoUpload: ["p-auto-upload", "autoUpload"], disabledRemoveFile: ["p-disabled-remove-file", "disabledRemoveFile", convertToBoolean], optional: ["p-optional", "optional"], headers: ["p-headers", "headers"], requiredUrl: ["p-required-url", "requiredUrl", convertToBoolean], customAction: ["p-custom-action", "customAction"], directory: ["p-directory", "directory"], dragDrop: ["p-drag-drop", "dragDrop"], hideRestrictionsInfo: ["p-hide-restrictions-info", "hideRestrictionsInfo"], hideSelectButton: ["p-hide-select-button", "hideSelectButton"], hideSendButton: ["p-hide-send-button", "hideSendButton"], literals: ["p-literals", "literals"], fileRestrictions: ["p-restrictions", "fileRestrictions"], formField: ["p-form-field", "formField"], disabled: ["p-disabled", "disabled"], isMultiple: ["p-multiple", "isMultiple"], required: ["p-required", "required"], showRequired: ["p-show-required", "showRequired"], size: ["p-size", "size"] }, outputs: { additionalHelp: "p-additional-help", customActionClick: "p-custom-action-click", keydown: "p-keydown", onUpload: "p-upload", onError: "p-error", onSuccess: "p-success", ngModelChange: "ngModelChange" }, host: { properties: { "attr.p-required-url": "this.requiredUrl" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoUploadBaseComponent, decorators: [{
             type: Directive
-        }], ctorParameters: () => [{ type: PoUploadService }, { type: PoLanguageService }], propDecorators: { additionalHelpEventTrigger: [{
+        }], ctorParameters: () => [{ type: PoUploadService }, { type: PoLanguageService }, { type: i0.ChangeDetectorRef }], propDecorators: { additionalHelpEventTrigger: [{
                 type: Input
             }], additionalHelpTooltip: [{
                 type: Input,
@@ -37191,7 +37205,6 @@ class PoUploadComponent extends PoUploadBaseComponent {
     renderer = inject(Renderer2);
     i18nPipe = inject(PoI18nPipe);
     notification = inject(PoNotificationService);
-    cd = inject(ChangeDetectorRef);
     inputFile;
     poUploadDragDropComponent;
     uploadButton;
@@ -37216,7 +37229,8 @@ class PoUploadComponent extends PoUploadBaseComponent {
     constructor() {
         const uploadService = inject(PoUploadService);
         const languageService = inject(PoLanguageService);
-        super(uploadService, languageService);
+        const cd = inject(ChangeDetectorRef);
+        super(uploadService, languageService, cd);
     }
     get displayDragDrop() {
         return this.dragDrop && !isMobile();
@@ -37323,7 +37337,6 @@ class PoUploadComponent extends PoUploadBaseComponent {
         }
         return false;
     }
-    // retorna se o status do arquivo é diferente de enviado
     isAllowCancelEvent(status) {
         return status !== PoUploadStatus.Uploaded;
     }
@@ -37332,7 +37345,6 @@ class PoUploadComponent extends PoUploadBaseComponent {
             this.showAdditionalHelp();
         }
     }
-    // Função disparada ao selecionar algum arquivo.
     onFileChange(event) {
         // necessário este tratamento quando para IE, pois nele o change é disparado quando o campo é limpado também
         if (this.calledByCleanInputValue) {
@@ -37351,7 +37363,6 @@ class PoUploadComponent extends PoUploadBaseComponent {
             this.keydown.emit(event);
         }
     }
-    // Remove o arquivo passado por parâmetro da lista dos arquivos correntes.
     removeFile(file) {
         const index = this.currentFiles.indexOf(file);
         this.currentFiles.splice(index, 1);
@@ -37425,7 +37436,6 @@ class PoUploadComponent extends PoUploadBaseComponent {
     showAdditionalHelpIcon() {
         return !!this.additionalHelpTooltip || this.isAdditionalHelpEventTriggered();
     }
-    // Caso o componente estiver no modo AutoUpload, o arquivo também será removido da lista.
     stopUpload(file) {
         this.uploadService.stopRequestByFile(file, () => {
             if (this.autoUpload) {
@@ -37440,7 +37450,6 @@ class PoUploadComponent extends PoUploadBaseComponent {
     trackByFn(index, file) {
         return file.uid;
     }
-    // Envia os arquivos passados por parâmetro, exceto os que já foram enviados ao serviço.
     uploadFiles(files) {
         const filesFiltered = files.filter(file => file.status !== PoUploadStatus.Uploaded);
         this.uploadService.upload(this.url, filesFiltered, this.headers, this.onUpload, (file, percent) => {
@@ -37473,18 +37482,15 @@ class PoUploadComponent extends PoUploadBaseComponent {
     isUploadButtonFocused() {
         return document.activeElement === this.uploadButton.buttonElement.nativeElement;
     }
-    // função disparada na resposta do sucesso ou error
     responseHandler(file, status) {
         file.status = status;
         file.percent = 100;
         this.cd.markForCheck();
     }
-    // método responsável por setar os argumentos do i18nPipe de acordo com a restrição.
     setPipeArguments(literalAttributes, literalArguments) {
         const pipeArguments = this.i18nPipe.transform(this.literals[literalAttributes], literalArguments);
         this.notification.information(pipeArguments);
     }
-    // Função disparada ao parar um envio de arquivo.
     stopUploadHandler(file) {
         file.status = PoUploadStatus.None;
         file.percent = 0;
@@ -37497,18 +37503,15 @@ class PoUploadComponent extends PoUploadBaseComponent {
             this.uploadFiles(this.currentFiles);
         }
     }
-    // Atualiza o ngModel para os arquivos passados por parâmetro.
     updateModel(files) {
         const modelFiles = this.mapCleanUploadFiles(files);
         this.onModelChange ? this.onModelChange(modelFiles) : this.ngModelChange.emit(modelFiles);
     }
-    // Função disparada enquanto o arquivo está sendo enviado ao serviço.
     uploadingHandler(file, percent) {
         file.status = PoUploadStatus.Uploading;
         file.percent = percent;
         this.cd.markForCheck();
     }
-    // retorna os objetos do array sem as propriedades: percent e displayName
     mapCleanUploadFiles(files) {
         const mapedByUploadFile = progressFile => {
             const { percent, displayName, ...uploadFile } = progressFile;
@@ -38410,7 +38413,7 @@ class PoFieldValidateModel extends PoFieldModel {
     hasValidatorRequired = false;
     onValidatorChange;
     constructor(changeDetector) {
-        super();
+        super(changeDetector);
         this.changeDetector = changeDetector;
     }
     validate(abstractControl) {
@@ -50810,13 +50813,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++;
         });
@@ -54841,11 +54844,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';
@@ -54875,6 +54882,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:
  *
  * ```
@@ -54898,8 +54931,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.
  *
@@ -55203,9 +55234,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:
  *