@po-ui/ng-components 20.4.0 → 20.6.0

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

@@ -387,6 +387,7 @@ const AnimaliaIconDictionary = {
     ICON_OK: 'an an-check',
     ICON_PARAMETERS: 'an an-sliders-horizontal',
     ICON_PICTURE: 'an an-image',
+    ICON_PICTURE_BROKEN: 'an an-image-broken',
     ICON_PUSH_PIN: 'an an-push-pin',
     ICON_PUSH_PIN_SLASH: 'an an-push-pin-slash',
     ICON_REFRESH: 'an an-arrow-clockwise',
@@ -7551,11 +7552,13 @@ class PoCheckboxComponent extends PoCheckboxBaseComponent {
         if (this.autoFocus) {
             this.focus();
         }
-        setTimeout(() => {
-            if (this.checkboxLabel?.nativeElement?.classList?.contains('enable-append-box')) {
-                this.appendBox = true;
-            }
-        }, 300);
+        if (this.checkboxLabel?.nativeElement?.closest('.components-form-custom-template')) {
+            setTimeout(() => {
+                if (this.checkboxLabel?.nativeElement?.classList?.contains('enable-append-box')) {
+                    this.appendBox = true;
+                }
+            }, 300);
+        }
     }
     ngOnChanges(changes) {
         if (changes.label || changes.additionalHelpTooltip || changes.helper || changes.size) {
@@ -16194,12 +16197,13 @@ class PoDatepickerComponent extends PoDatepickerBaseComponent {
             this.focus();
         }
         this.renderer.setAttribute(this.iconDatepicker.buttonElement.nativeElement, 'aria-label', this.literals.open);
-        // Necessário para edição fluída
-        setTimeout(() => {
-            if (this.inputEl?.nativeElement?.classList?.contains('enable-append-box')) {
-                this.appendBox = true;
-            }
-        }, 300);
+        if (this.inputEl?.nativeElement?.closest('.components-form-custom-template')) {
+            setTimeout(() => {
+                if (this.inputEl?.nativeElement?.classList?.contains('enable-append-box')) {
+                    this.appendBox = true;
+                }
+            }, 300);
+        }
     }
     ngOnDestroy() {
         this.subscriptionValidator?.unsubscribe();
@@ -21051,11 +21055,13 @@ class PoSwitchComponent extends PoFieldModel {
     }
     ngAfterViewInit() {
         this.setControl();
-        setTimeout(() => {
-            if (this.switchContainer?.nativeElement?.classList?.contains('enable-append-box')) {
-                this.appendBox = true;
-            }
-        }, 300);
+        if (this.switchContainer?.nativeElement?.closest('.components-form-custom-template')) {
+            setTimeout(() => {
+                if (this.switchContainer?.nativeElement?.classList?.contains('enable-append-box')) {
+                    this.appendBox = true;
+                }
+            }, 300);
+        }
     }
     setControl() {
         const ngControl = this.injector.get(NgControl, null, this.injectOptions);
@@ -27603,12 +27609,13 @@ class PoComboComponent extends PoComboBaseComponent {
             this.focus();
         }
         this.setContainerWidth();
-        // Necessário para edição fluída
-        setTimeout(() => {
-            if (this.inputEl?.nativeElement?.classList?.contains('enable-append-box')) {
-                this.appendBox = true;
-            }
-        }, 300);
+        if (this.inputEl?.nativeElement?.closest('.components-form-custom-template')) {
+            setTimeout(() => {
+                if (this.inputEl?.nativeElement?.classList?.contains('enable-append-box')) {
+                    this.appendBox = true;
+                }
+            }, 300);
+        }
     }
     ngOnChanges(changes) {
         if (changes.debounceTime) {
@@ -30497,11 +30504,13 @@ class PoDecimalComponent extends PoInputBaseComponent {
     ngAfterViewInit() {
         this.helperSettings = this.setHelper(this.label, this.additionalHelpTooltip).helperSettings;
         this.verifyAutoFocus();
-        setTimeout(() => {
-            if (this.inputEl?.nativeElement?.classList?.contains('enable-append-box')) {
-                this.appendBox = true;
-            }
-        }, 300);
+        if (this.inputEl?.nativeElement?.closest('.components-form-custom-template')) {
+            setTimeout(() => {
+                if (this.inputEl?.nativeElement?.classList?.contains('enable-append-box')) {
+                    this.appendBox = true;
+                }
+            }, 300);
+        }
     }
     ngOnDestroy() {
         this.subscriptionValidator?.unsubscribe();
@@ -31018,11 +31027,13 @@ class PoInputGeneric extends PoInputBaseComponent {
     afterViewInit() {
         this.helperSettings = this.setHelper(this.label, this.additionalHelpTooltip).helperSettings;
         this.verifyAutoFocus();
-        setTimeout(() => {
-            if (this.inputEl?.nativeElement?.classList?.contains('enable-append-box')) {
-                this.appendBox = true;
-            }
-        }, 300);
+        if (this.inputEl?.nativeElement?.closest('.components-form-custom-template')) {
+            setTimeout(() => {
+                if (this.inputEl?.nativeElement?.classList?.contains('enable-append-box')) {
+                    this.appendBox = true;
+                }
+            }, 300);
+        }
     }
     ngOnDestroy() {
         this.subscriptionValidator?.unsubscribe();
@@ -35063,12 +35074,13 @@ class PoMultiselectComponent extends PoMultiselectBaseComponent {
             this.focus();
         }
         this.initialized = true;
-        // Necessário para edição fluída
-        setTimeout(() => {
-            if (this.inputElement?.nativeElement?.classList?.contains('enable-append-box')) {
-                this.appendBox = true;
-            }
-        }, 300);
+        if (this.inputElement?.nativeElement?.closest('.components-form-custom-template')) {
+            setTimeout(() => {
+                if (this.inputElement?.nativeElement?.classList?.contains('enable-append-box')) {
+                    this.appendBox = true;
+                }
+            }, 300);
+        }
     }
     ngOnChanges(changes) {
         if (this.filterService && (changes.filterService || changes.fieldValue || changes.fieldLabel)) {
@@ -35792,11 +35804,13 @@ class PoNumberComponent extends PoNumberBaseComponent {
         event.preventDefault();
     }
     ngAfterViewInit() {
-        setTimeout(() => {
-            if (this.inputEl?.nativeElement?.classList?.contains('enable-append-box')) {
-                this.appendBox = true;
-            }
-        }, 300);
+        if (this.inputEl?.nativeElement?.closest('.components-form-custom-template')) {
+            setTimeout(() => {
+                if (this.inputEl?.nativeElement?.classList?.contains('enable-append-box')) {
+                    this.appendBox = true;
+                }
+            }, 300);
+        }
     }
     extraValidation(abstractControl) {
         // Verifica se já possui algum error pattern padrão.
@@ -36916,6 +36930,18 @@ class PoUploadFile {
     displayName;
     // porcentagem utilizada para repassar ao componente progress
     percent;
+    // indica que o tamanho do arquivo não é permitido
+    sizeNotAllowed;
+    // indica que a extensão do arquivo não é permitida
+    extensionNotAllowed;
+    // Propriedade interna que indica que o status de sucesso deve estar oculto
+    hideDoneContent;
+    // Propriedade interna para mensagem de erro
+    errorMessage;
+    // Propriedade interna para url da thumbnail
+    thumbnailUrl;
+    // Propriedade interna para controlar se houve erro ao carregar a imagem da thumbnail.
+    imageError;
     constructor(file) {
         if (file) {
             this.name = file.name;
@@ -37083,7 +37109,14 @@ const poUploadLiteralsDefault = {
         maxFileSizeAllowed: 'Size limit per file: {0} maximum',
         minFileSizeAllowed: 'Size limit per file: {0} minimum',
         errorOccurred: 'An error has occurred',
-        sentWithSuccess: 'Sent with success'
+        sentWithSuccess: 'Sent with success',
+        doneText: 'Done',
+        uploadingText: 'Uploading',
+        tryAgain: 'Try again',
+        close: 'Close file',
+        preview: 'Preview',
+        thumbnail: 'thumbnail',
+        continue: 'Continue'
     },
     es: {
         files: 'archivos',
@@ -37109,7 +37142,14 @@ const poUploadLiteralsDefault = {
         maxFileSizeAllowed: 'Limite de tamaño de archivo: hasta {0}',
         minFileSizeAllowed: 'Limite de tamaño de archivo: minimo {0}',
         errorOccurred: 'Ocurrio un error',
-        sentWithSuccess: 'Enviado con éxito'
+        sentWithSuccess: 'Enviado con éxito',
+        doneText: 'Hecho',
+        uploadingText: 'Subiendo',
+        tryAgain: 'Inténtalo de nuevo',
+        close: 'Cerrar archivo',
+        preview: 'Vista previa',
+        thumbnail: 'miniatura',
+        continue: 'Continuar'
     },
     pt: {
         files: 'arquivos',
@@ -37135,7 +37175,14 @@ const poUploadLiteralsDefault = {
         maxFileSizeAllowed: 'Limite de tamanho por arquivo: até {0}',
         minFileSizeAllowed: 'Limite de tamanho por arquivo: no mínimo {0}',
         errorOccurred: 'Ocorreu um erro',
-        sentWithSuccess: 'Enviado com sucesso'
+        sentWithSuccess: 'Enviado com sucesso',
+        doneText: 'Concluido',
+        uploadingText: 'Enviando',
+        tryAgain: 'Tente novamente',
+        close: 'Fechar arquivo',
+        preview: 'Pré-visualizar',
+        thumbnail: 'miniatura',
+        continue: 'Continuar'
     },
     ru: {
         files: 'файлы',
@@ -37161,7 +37208,14 @@ const poUploadLiteralsDefault = {
         maxFileSizeAllowed: 'Ограничение размера файла: до {0}',
         minFileSizeAllowed: 'Ограничение размера файла: не менее {0}',
         errorOccurred: 'Произошла ошибка.',
-        sentWithSuccess: 'Успешно отправлено'
+        sentWithSuccess: 'Успешно отправлено',
+        doneText: 'Сделанный',
+        uploadingText: 'Загрузка',
+        tryAgain: 'Попробуйте еще раз',
+        close: 'Закрыть файл',
+        preview: 'Просмотр',
+        thumbnail: 'миниатюра',
+        continue: 'Продолжить'
     }
 };
 const poUploadFormFieldDefault = 'files';
@@ -37180,6 +37234,44 @@ const poUploadMinFileSize = 0;
  *  - Função de sucesso que será disparada quando os arquivos forem enviados com sucesso.
  *  - Função de erro que será disparada quando houver erro no envio dos arquivos.
  *  - Permite habilitar uma área onde os arquivos podem ser arrastados.
+ *
+ * #### Tokens customizáveis
+ *
+ * É possível alterar o estilo do componente usando os seguintes tokens (CSS):
+ *
+ * > Para maiores informações, acesse o guia [Personalizando o Tema Padrão com Tokens CSS](https://po-ui.io/guides/theme-customization).
+ *
+ * | Propriedade                            | Descrição                                             | Valor Padrão                                      |
+ * |----------------------------------------|-------------------------------------------------------|---------------------------------------------------|
+ * | **TEXT SUPPORT**                       |                                                       |                                                   |
+ * | `--font-family-text-support`           | Família tipográfica usada no texto de suporte         | `var(--font-family-theme)`                        |
+ * | `--text-color-text-support`            | Cor da fonte no texto de suporte                      | `var(--color-neutral-dark-90)`                    |
+ * | **UPLOAD CONTENT**                     |                                                       |                                                   |
+ * | `--background-color-content`      | Cor de fundo                                          | `var(--color-neutral-light-10)`                   |
+ * | `--border-color-content`               | Cor da borda                                          | `var(--color-neutral-light-20)`                   |
+ * | `--border-radius-content`              | Contém o valor do raio dos cantos do elemento         | `var(--border-radius-md)`                         |
+ * | `--text-color-file-name`               | Cor do texto do nome do arquivo                       | `var(--color-neutral-dark-90)`                    |
+ * | `--font-family-file-name`              | Família tipográfica usada no texto do arquivo         | `var(--font-family-theme)`                        |
+ * | `--text-color-info-bar`                | Cor do texto de informação                            | `var(--color-neutral-mid-60)`                     |
+ * | `--font-family-info-bar`               | Família tipográfica usada no texto de informação      | `var(--font-family-theme)`                        |
+ * | **ERROR STATE**                        |                                                       |                                                   |
+ * | `--background-color-content-error`     | Cor de fundo do container de erro                     | `var(--color-neutral-light-00)`                   |
+ * | `--border-color-content-error`         | Cor da borda do container de erro                     | `var(--color-feedback-negative-base)`             |
+ * | `--text-color-error`                   | Cor do texto do container de erro                     | `var(--color-feedback-negative-dark)`             |
+ * | `--color-icon-error`                   | Cor do ícone no estado de erro                        | `var(--color-feedback-negative-base)`             |
+ * | `--font-family-error`                  | Família tipográfica usada no texto de erro            | `var(--font-family-theme)`                        |
+ * | **UPLOADED STATE**                     |                                                       |                                                   |
+ * | `--background-color-content-uploaded`  | Cor de fundo do container com status de enviado       | `var(--color-neutral-light-00)`                   |
+ * | `--border-color-content-uploaded`      | Cor da borda do container com status de enviado       | `var(--color-neutral-light-20)`                   |
+ * | **INTERACTIVE STATE**                  |                                                       |                                                   |
+ * | `--text-color-file-name-interactive`   | Cor do texto do nome do arquivo quando interativo     | `var(--color-action-default)`                     |
+ * | **THUMBNAIL**                          |                                                       |                                                   |
+ * | `--color-icon-thumbnail`               | Cor do ícone na thumbnail                             | `var(--color-action-default)`                     |
+ * | `--border-width-thumbnail`             | Tamanho da fonte na thumbnail                         | `var(--border-width-sm)`                          |
+ * | `--border-radius-thumbnail`            | Contém o valor do raio dos cantos na thumbnail        | `var(--border-radius-md)`                         |
+ * | `--background-color-thumbnail`         | Cor de fundo na thumbnail                             | `var(--color-neutral-light-05)`                   |
+ * | **Focused**                            |                                                       |                                                   |
+ * | `--outline-color-focused`              | Cor do outline do estado de focus                     | `var(--color-action-focus)`                       |
  */
 class PoUploadBaseComponent {
     uploadService;
@@ -37283,6 +37375,19 @@ class PoUploadBaseComponent {
      * @default `false`
      */
     optional;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Exibe a pré-visualização de imagens ao anexá-las.
+     *
+     * > Propriedade funciona apenas em arquivos de formato de imagem (`.png`, `.jpg`, `.jpeg` e `.gif`).
+     * Será ignorada em outros tipos de arquivo.
+     *
+     * @default `true`
+     */
+    showThumbnail = true;
     /** Objeto que contém os cabeçalhos que será enviado na requisição dos arquivos. */
     headers;
     /**
@@ -37379,6 +37484,38 @@ class PoUploadBaseComponent {
      * ```
      */
     customAction;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Define uma ou duas ações personalizadas do modal de pré-visualização, adicionando um botão ou dois botões no canto inferior direito
+     * do modal.
+     *
+     * A ação deve implementar a interface **PoModalAction**, permitindo configurar propriedades como:
+     * - `label`: Texto do botão.
+     * - `action`: Ícone a ser exibido no botão.
+     * - `danger`: Define a propriedade `p-danger` do botão.
+     * - `disabled`: Indica se o botão deve estar desabilitado.
+     * - `visible`: Indica se o botão deve estar visível.
+     *
+     * **Exemplo de uso:**
+     *
+     * ```html
+     * <po-upload
+     *  [p-custom-modal-actions]="customActions"
+     * </po-upload>
+     * ```
+     *
+     * ```typescript
+     * customActions:  Array<PoModalAction> = [
+     *  { label: 'Confirmar', action: this.confirmModal.bind(this) },
+     *  { label: 'Cancelar', action: this.closeModal.bind(this) }
+     *];
+     *
+     * ```
+     */
+    customModalActions;
     /**
      * @optional
      *
@@ -37449,6 +37586,33 @@ class PoUploadBaseComponent {
      * ```
      */
     onUpload = new EventEmitter();
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Evento será disparado ao clicar no ícone de fechar.
+     * > Por parâmetro será passado o objeto do arquivo.
+     */
+    onCancel = new EventEmitter();
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Evento será disparado ao abrir o modal de pré-visualização.
+     * > Por parâmetro será passado o objeto do arquivo.
+     */
+    onOpenModalPreview = new EventEmitter();
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Evento será disparado ao clicar no ícone de remover.
+     * > Por parâmetro será passado o objeto do arquivo.
+     */
+    onRemove = new EventEmitter();
     /**
      * @optional
      *
@@ -37798,9 +37962,28 @@ class PoUploadBaseComponent {
                 break;
             }
             const file = new PoUploadFile(files[i]);
-            if (this.checkRestrictions(file)) {
-                poUploadFiles = this.insertFileInFiles(file, poUploadFiles);
+            let currentFile = file;
+            if (!this.checkRestrictions(file)) {
+                currentFile = {
+                    uid: file.uid,
+                    displayName: file.displayName,
+                    name: file.name,
+                    extension: file.extension,
+                    size: file.size,
+                    status: 2,
+                    sizeNotAllowed: file.sizeNotAllowed,
+                    extensionNotAllowed: file.extensionNotAllowed,
+                    errorMessage: ''
+                };
             }
+            if (this.showThumbnail && currentFile.rawFile?.type?.startsWith('image/')) {
+                convertImageToBase64(currentFile.rawFile).then(base64 => {
+                    currentFile.thumbnailUrl = base64;
+                    this.cd.detectChanges();
+                });
+            }
+            poUploadFiles = this.insertFileInFiles(currentFile, poUploadFiles);
+            this.sendFeedback(currentFile);
         }
         this.sendFeedback();
         return poUploadFiles;
@@ -37820,8 +38003,12 @@ class PoUploadBaseComponent {
             const isAccept = allowedExtensions ? this.isAllowedExtension(file.extension, allowedExtensions) : true;
             const isAcceptSize = file.size >= minFileSize && file.size <= maxFileSize;
             if (!isAcceptSize) {
+                file.sizeNotAllowed = true;
                 this.sizeNotAllowed = this.sizeNotAllowed + 1;
             }
+            if (!isAccept) {
+                file.extensionNotAllowed = true;
+            }
             return isAccept && isAcceptSize;
         }
         return true;
@@ -37875,7 +38062,7 @@ 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 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.7", type: PoUploadBaseComponent, isStandalone: true, inputs: { additionalHelpEventTrigger: { classPropertyName: "additionalHelpEventTrigger", publicName: "additionalHelpEventTrigger", isSignal: false, isRequired: false, transformFunction: null }, additionalHelpTooltip: { classPropertyName: "additionalHelpTooltip", publicName: "p-additional-help-tooltip", isSignal: false, isRequired: false, transformFunction: null }, appendBox: { classPropertyName: "appendBox", publicName: "p-append-in-body", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, autoFocus: { classPropertyName: "autoFocus", publicName: "p-auto-focus", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, dragDropHeight: { classPropertyName: "dragDropHeight", publicName: "p-drag-drop-height", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "p-label", isSignal: false, isRequired: false, transformFunction: null }, help: { classPropertyName: "help", publicName: "p-help", isSignal: false, isRequired: false, transformFunction: null }, url: { classPropertyName: "url", publicName: "p-url", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, autoUpload: { classPropertyName: "autoUpload", publicName: "p-auto-upload", isSignal: false, isRequired: false, transformFunction: null }, disabledRemoveFile: { classPropertyName: "disabledRemoveFile", publicName: "p-disabled-remove-file", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, optional: { classPropertyName: "optional", publicName: "p-optional", isSignal: false, isRequired: false, transformFunction: null }, headers: { classPropertyName: "headers", publicName: "p-headers", isSignal: false, isRequired: false, transformFunction: null }, requiredUrl: { classPropertyName: "requiredUrl", publicName: "p-required-url", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, poHelperComponent: { classPropertyName: "poHelperComponent", publicName: "p-helper", isSignal: true, isRequired: false, transformFunction: null }, labelTextWrap: { classPropertyName: "labelTextWrap", publicName: "p-label-text-wrap", isSignal: true, isRequired: false, transformFunction: null }, customAction: { classPropertyName: "customAction", publicName: "p-custom-action", isSignal: false, isRequired: false, transformFunction: null }, directory: { classPropertyName: "directory", publicName: "p-directory", isSignal: false, isRequired: false, transformFunction: null }, dragDrop: { classPropertyName: "dragDrop", publicName: "p-drag-drop", isSignal: false, isRequired: false, transformFunction: null }, hideRestrictionsInfo: { classPropertyName: "hideRestrictionsInfo", publicName: "p-hide-restrictions-info", isSignal: false, isRequired: false, transformFunction: null }, hideSelectButton: { classPropertyName: "hideSelectButton", publicName: "p-hide-select-button", isSignal: false, isRequired: false, transformFunction: null }, hideSendButton: { classPropertyName: "hideSendButton", publicName: "p-hide-send-button", isSignal: false, isRequired: false, transformFunction: null }, literals: { classPropertyName: "literals", publicName: "p-literals", isSignal: false, isRequired: false, transformFunction: null }, fileRestrictions: { classPropertyName: "fileRestrictions", publicName: "p-restrictions", isSignal: false, isRequired: false, transformFunction: null }, formField: { classPropertyName: "formField", publicName: "p-form-field", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "p-disabled", isSignal: false, isRequired: false, transformFunction: null }, isMultiple: { classPropertyName: "isMultiple", publicName: "p-multiple", isSignal: false, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "p-required", isSignal: false, isRequired: false, transformFunction: null }, showRequired: { classPropertyName: "showRequired", publicName: "p-show-required", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "p-size", isSignal: false, isRequired: false, transformFunction: null } }, 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 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.7", type: PoUploadBaseComponent, isStandalone: true, inputs: { additionalHelpEventTrigger: { classPropertyName: "additionalHelpEventTrigger", publicName: "additionalHelpEventTrigger", isSignal: false, isRequired: false, transformFunction: null }, additionalHelpTooltip: { classPropertyName: "additionalHelpTooltip", publicName: "p-additional-help-tooltip", isSignal: false, isRequired: false, transformFunction: null }, appendBox: { classPropertyName: "appendBox", publicName: "p-append-in-body", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, autoFocus: { classPropertyName: "autoFocus", publicName: "p-auto-focus", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, dragDropHeight: { classPropertyName: "dragDropHeight", publicName: "p-drag-drop-height", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "p-label", isSignal: false, isRequired: false, transformFunction: null }, help: { classPropertyName: "help", publicName: "p-help", isSignal: false, isRequired: false, transformFunction: null }, url: { classPropertyName: "url", publicName: "p-url", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, autoUpload: { classPropertyName: "autoUpload", publicName: "p-auto-upload", isSignal: false, isRequired: false, transformFunction: null }, disabledRemoveFile: { classPropertyName: "disabledRemoveFile", publicName: "p-disabled-remove-file", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, optional: { classPropertyName: "optional", publicName: "p-optional", isSignal: false, isRequired: false, transformFunction: null }, showThumbnail: { classPropertyName: "showThumbnail", publicName: "p-show-thumbnail", isSignal: false, isRequired: false, transformFunction: null }, headers: { classPropertyName: "headers", publicName: "p-headers", isSignal: false, isRequired: false, transformFunction: null }, requiredUrl: { classPropertyName: "requiredUrl", publicName: "p-required-url", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, poHelperComponent: { classPropertyName: "poHelperComponent", publicName: "p-helper", isSignal: true, isRequired: false, transformFunction: null }, labelTextWrap: { classPropertyName: "labelTextWrap", publicName: "p-label-text-wrap", isSignal: true, isRequired: false, transformFunction: null }, customAction: { classPropertyName: "customAction", publicName: "p-custom-action", isSignal: false, isRequired: false, transformFunction: null }, customModalActions: { classPropertyName: "customModalActions", publicName: "p-custom-modal-actions", isSignal: false, isRequired: false, transformFunction: null }, directory: { classPropertyName: "directory", publicName: "p-directory", isSignal: false, isRequired: false, transformFunction: null }, dragDrop: { classPropertyName: "dragDrop", publicName: "p-drag-drop", isSignal: false, isRequired: false, transformFunction: null }, hideRestrictionsInfo: { classPropertyName: "hideRestrictionsInfo", publicName: "p-hide-restrictions-info", isSignal: false, isRequired: false, transformFunction: null }, hideSelectButton: { classPropertyName: "hideSelectButton", publicName: "p-hide-select-button", isSignal: false, isRequired: false, transformFunction: null }, hideSendButton: { classPropertyName: "hideSendButton", publicName: "p-hide-send-button", isSignal: false, isRequired: false, transformFunction: null }, literals: { classPropertyName: "literals", publicName: "p-literals", isSignal: false, isRequired: false, transformFunction: null }, fileRestrictions: { classPropertyName: "fileRestrictions", publicName: "p-restrictions", isSignal: false, isRequired: false, transformFunction: null }, formField: { classPropertyName: "formField", publicName: "p-form-field", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "p-disabled", isSignal: false, isRequired: false, transformFunction: null }, isMultiple: { classPropertyName: "isMultiple", publicName: "p-multiple", isSignal: false, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "p-required", isSignal: false, isRequired: false, transformFunction: null }, showRequired: { classPropertyName: "showRequired", publicName: "p-show-required", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "p-size", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { additionalHelp: "p-additional-help", customActionClick: "p-custom-action-click", keydown: "p-keydown", onUpload: "p-upload", onCancel: "p-cancel", onOpenModalPreview: "p-open-modal-preview", onRemove: "p-remove", 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
@@ -37914,6 +38101,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
             }], optional: [{
                 type: Input,
                 args: ['p-optional']
+            }], showThumbnail: [{
+                type: Input,
+                args: ['p-show-thumbnail']
             }], headers: [{
                 type: Input,
                 args: ['p-headers']
@@ -37929,6 +38119,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
             }], customAction: [{
                 type: Input,
                 args: ['p-custom-action']
+            }], customModalActions: [{
+                type: Input,
+                args: ['p-custom-modal-actions']
             }], customActionClick: [{
                 type: Output,
                 args: ['p-custom-action-click']
@@ -37938,6 +38131,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
             }], onUpload: [{
                 type: Output,
                 args: ['p-upload']
+            }], onCancel: [{
+                type: Output,
+                args: ['p-cancel']
+            }], onOpenModalPreview: [{
+                type: Output,
+                args: ['p-open-modal-preview']
+            }], onRemove: [{
+                type: Output,
+                args: ['p-remove']
             }], onError: [{
                 type: Output,
                 args: ['p-error']
@@ -38376,11 +38578,11 @@ class PoUploadFileRestrictionsComponent {
         this.changeDetector.detectChanges();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoUploadFileRestrictionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: PoUploadFileRestrictionsComponent, isStandalone: false, selector: "po-upload-file-restrictions", inputs: { maxFiles: ["p-max-files", "maxFiles"], allowedExtensions: ["p-allowed-extensions", "allowedExtensions"], maxFileSize: ["p-max-file-size", "maxFileSize"], minFileSize: ["p-min-file-size", "minFileSize"] }, ngImport: i0, template: "@if (maxFiles > 1) {\n  <p class=\"po-font-text-small\">\n    {{ literals?.numberOfFilesAllowed | poI18n: maxFiles }}\n  </p>\n}\n\n@if (allowedExtensions) {\n  <p class=\"po-font-text-small\">\n    {{ literals?.allowedFormats | poI18n: allowedExtensions }}\n  </p>\n}\n\n@if (minFileSize || maxFileSize) {\n  <p class=\"po-font-text-small\">\n    <span>{{ literals?.allowedSizes }}</span>\n    @if (minFileSize && maxFileSize) {\n      <span>\n        {{ literals?.allowedFileSizeRange | poI18n: [minFileSize, maxFileSize] }}\n      </span>\n    }\n    @if (minFileSize && !maxFileSize) {\n      <span>\n        {{ literals?.minFileSizeAllowed | poI18n: minFileSize }}\n      </span>\n    }\n    @if (maxFileSize && !minFileSize) {\n      <span>\n        {{ literals?.maxFileSizeAllowed | poI18n: maxFileSize }}\n      </span>\n    }\n  </p>\n}\n", dependencies: [{ kind: "pipe", type: PoI18nPipe, name: "poI18n" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: PoUploadFileRestrictionsComponent, isStandalone: false, selector: "po-upload-file-restrictions", inputs: { maxFiles: ["p-max-files", "maxFiles"], allowedExtensions: ["p-allowed-extensions", "allowedExtensions"], maxFileSize: ["p-max-file-size", "maxFileSize"], minFileSize: ["p-min-file-size", "minFileSize"] }, ngImport: i0, template: "@if (maxFiles > 1) {\n  <p>\n    {{ literals?.numberOfFilesAllowed | poI18n: maxFiles }}\n  </p>\n}\n\n@if (allowedExtensions) {\n  <p>\n    {{ literals?.allowedFormats | poI18n: allowedExtensions }}\n  </p>\n}\n\n@if (minFileSize || maxFileSize) {\n  <p>\n    <span>{{ literals?.allowedSizes }}</span>\n    @if (minFileSize && maxFileSize) {\n      <span>\n        {{ literals?.allowedFileSizeRange | poI18n: [minFileSize, maxFileSize] }}\n      </span>\n    }\n    @if (minFileSize && !maxFileSize) {\n      <span>\n        {{ literals?.minFileSizeAllowed | poI18n: minFileSize }}\n      </span>\n    }\n    @if (maxFileSize && !minFileSize) {\n      <span>\n        {{ literals?.maxFileSizeAllowed | poI18n: maxFileSize }}\n      </span>\n    }\n  </p>\n}\n", dependencies: [{ kind: "pipe", type: PoI18nPipe, name: "poI18n" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoUploadFileRestrictionsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'po-upload-file-restrictions', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (maxFiles > 1) {\n  <p class=\"po-font-text-small\">\n    {{ literals?.numberOfFilesAllowed | poI18n: maxFiles }}\n  </p>\n}\n\n@if (allowedExtensions) {\n  <p class=\"po-font-text-small\">\n    {{ literals?.allowedFormats | poI18n: allowedExtensions }}\n  </p>\n}\n\n@if (minFileSize || maxFileSize) {\n  <p class=\"po-font-text-small\">\n    <span>{{ literals?.allowedSizes }}</span>\n    @if (minFileSize && maxFileSize) {\n      <span>\n        {{ literals?.allowedFileSizeRange | poI18n: [minFileSize, maxFileSize] }}\n      </span>\n    }\n    @if (minFileSize && !maxFileSize) {\n      <span>\n        {{ literals?.minFileSizeAllowed | poI18n: minFileSize }}\n      </span>\n    }\n    @if (maxFileSize && !minFileSize) {\n      <span>\n        {{ literals?.maxFileSizeAllowed | poI18n: maxFileSize }}\n      </span>\n    }\n  </p>\n}\n" }]
+            args: [{ selector: 'po-upload-file-restrictions', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (maxFiles > 1) {\n  <p>\n    {{ literals?.numberOfFilesAllowed | poI18n: maxFiles }}\n  </p>\n}\n\n@if (allowedExtensions) {\n  <p>\n    {{ literals?.allowedFormats | poI18n: allowedExtensions }}\n  </p>\n}\n\n@if (minFileSize || maxFileSize) {\n  <p>\n    <span>{{ literals?.allowedSizes }}</span>\n    @if (minFileSize && maxFileSize) {\n      <span>\n        {{ literals?.allowedFileSizeRange | poI18n: [minFileSize, maxFileSize] }}\n      </span>\n    }\n    @if (minFileSize && !maxFileSize) {\n      <span>\n        {{ literals?.minFileSizeAllowed | poI18n: minFileSize }}\n      </span>\n    }\n    @if (maxFileSize && !minFileSize) {\n      <span>\n        {{ literals?.maxFileSizeAllowed | poI18n: maxFileSize }}\n      </span>\n    }\n  </p>\n}\n" }]
         }], ctorParameters: () => [], propDecorators: { maxFiles: [{
                 type: Input,
                 args: ['p-max-files']
@@ -38424,6 +38626,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
  *   <file name="sample-po-upload-download/sample-po-upload-download.component.html"> </file>
  *   <file name="sample-po-upload-download/sample-po-upload-download.component.ts"> </file>
  * </example>
+ *
+ * <example name="po-upload-preview" title="PO Upload - with Preview">
+ *   <file name="sample-po-upload-preview/sample-po-upload-preview.component.html"> </file>
+ *   <file name="sample-po-upload-preview/sample-po-upload-preview.component.ts"> </file>
+ * </example>
  */
 class PoUploadComponent extends PoUploadBaseComponent {
     renderer = inject(Renderer2);
@@ -38432,6 +38639,7 @@ class PoUploadComponent extends PoUploadBaseComponent {
     inputFile;
     poUploadDragDropComponent;
     uploadButton;
+    modalComponent;
     id = `po-upload[${uuid()}]`;
     infoByUploadStatus = {
         [PoUploadStatus.Uploaded]: {
@@ -38450,6 +38658,12 @@ class PoUploadComponent extends PoUploadBaseComponent {
         [PoUploadStatus.Error]: PoProgressStatus.Error
     };
     calledByCleanInputValue = false;
+    modalPrimaryAction;
+    modalSecondaryAction;
+    errorMessage;
+    tooltipTitle = '';
+    modalImageUrl = '';
+    errorModalImage = false;
     constructor() {
         const uploadService = inject(PoUploadService);
         const languageService = inject(PoLanguageService);
@@ -38482,7 +38696,7 @@ class PoUploadComponent extends PoUploadBaseComponent {
     }
     get hasFileNotUploaded() {
         if (Array.isArray(this.currentFiles)) {
-            return this.currentFiles.some(file => file.status !== PoUploadStatus.Uploaded);
+            return this.currentFiles.some(file => file.status !== PoUploadStatus.Uploaded && file.status !== PoUploadStatus.Error);
         }
         return false;
     }
@@ -38501,13 +38715,35 @@ class PoUploadComponent extends PoUploadBaseComponent {
     get maxFiles() {
         return this.isMultiple && this.fileRestrictions && this.fileRestrictions.maxFiles;
     }
-    cancel(file) {
+    cancel(file, keydown) {
+        if (this.disabledRemoveFile || (keydown && keydown.code !== 'Enter' && keydown.code !== 'Space'))
+            return;
         if (file.status === PoUploadStatus.Uploading) {
             return this.stopUpload(file);
         }
         this.removeFile(file);
+        if (file.status !== PoUploadStatus.Uploaded) {
+            this.onCancel.emit(file);
+        }
+        else {
+            this.onRemove.emit(file);
+        }
+    }
+    ngOnChanges(changes) {
+        if (changes['customModalActions']) {
+            if (this.customModalActions?.length > 0) {
+                this.modalPrimaryAction = this.customModalActions[0];
+                this.modalSecondaryAction = this.customModalActions[1] || undefined;
+            }
+            else {
+                this.setPrimaryActionModal();
+            }
+        }
     }
     ngAfterViewInit() {
+        if (!this.customModalActions?.length) {
+            this.setPrimaryActionModal();
+        }
         if (this.autoFocus) {
             this.focus();
         }
@@ -38587,9 +38823,30 @@ class PoUploadComponent extends PoUploadBaseComponent {
             this.keydown.emit(event);
         }
     }
+    /**
+     * Método responsável por fechar o modal.
+     */
+    closeModal() {
+        this.errorModalImage = false;
+        this.modalComponent.close();
+        this.modalImageUrl = '';
+    }
+    openModal(file, keydown) {
+        if (keydown && keydown.code !== 'Enter' && keydown.code !== 'Space')
+            return;
+        if (file?.thumbnailUrl && !file.errorMessage) {
+            this.errorModalImage = false;
+            this.modalComponent.open();
+            this.modalImageUrl = file.thumbnailUrl;
+            this.onOpenModalPreview.emit(file);
+        }
+    }
+    // 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);
+        const index = this.currentFiles.findIndex(f => f.uid === file.uid);
+        if (index !== -1) {
+            this.currentFiles.splice(index, 1);
+        }
         this.updateModel([...this.currentFiles]);
     }
     /** Método responsável por **abrir** a janela para seleção de arquivo(s). */
@@ -38598,21 +38855,29 @@ class PoUploadComponent extends PoUploadBaseComponent {
         this.calledByCleanInputValue = false;
         this.inputFile.nativeElement.click();
     }
-    sendFeedback() {
-        if (this.sizeNotAllowed > 0) {
+    sendFeedback(file) {
+        let sizeNotAllowed = this.sizeNotAllowed;
+        let extensionNotAllowed = this.extensionNotAllowed;
+        let quantityNotAllowed = this.quantityNotAllowed;
+        if (file) {
+            sizeNotAllowed = file.sizeNotAllowed ? 1 : undefined;
+            extensionNotAllowed = file.extensionNotAllowed ? 1 : undefined;
+            quantityNotAllowed = undefined;
+        }
+        if (sizeNotAllowed > 0) {
             const minFileSize = formatBytes(this.fileRestrictions.minFileSize);
             const maxFileSize = formatBytes(this.fileRestrictions.maxFileSize);
             const args = [this.sizeNotAllowed, minFileSize || '0', maxFileSize];
-            this.setPipeArguments('invalidSize', args);
+            this.setPipeArguments('invalidSize', args, file);
             this.sizeNotAllowed = 0;
         }
-        if (this.extensionNotAllowed > 0) {
+        if (extensionNotAllowed > 0) {
             const allowedExtensionsFormatted = this.fileRestrictions.allowedExtensions.join(', ').toUpperCase();
             const args = [this.extensionNotAllowed, allowedExtensionsFormatted];
-            this.setPipeArguments('invalidFormat', args);
+            this.setPipeArguments('invalidFormat', args, file);
             this.extensionNotAllowed = 0;
         }
-        if (this.quantityNotAllowed > 0) {
+        if (quantityNotAllowed > 0) {
             const args = [this.quantityNotAllowed];
             this.setPipeArguments('invalidAmount', args);
             this.quantityNotAllowed = 0;
@@ -38686,7 +38951,9 @@ class PoUploadComponent extends PoUploadBaseComponent {
         return file.uid;
     }
     uploadFiles(files) {
-        const filesFiltered = files.filter(file => file.status !== PoUploadStatus.Uploaded);
+        const filesFiltered = files.filter(file => file.status !== PoUploadStatus.Uploaded && !file.sizeNotAllowed && !file.extensionNotAllowed);
+        if (files.length === 0)
+            return;
         this.uploadService.upload(this.url, filesFiltered, this.headers, this.onUpload, (file, percent) => {
             // UPLOADING
             this.uploadingHandler(file, percent);
@@ -38694,6 +38961,14 @@ class PoUploadComponent extends PoUploadBaseComponent {
             // SUCCESS
             this.responseHandler(file, PoUploadStatus.Uploaded);
             this.onSuccess.emit(eventResponse);
+            // esconde o status de sucesso após 500ms
+            setTimeout(() => {
+                const currentFile = this.currentFiles.find(f => f.uid === file.uid);
+                if (currentFile) {
+                    currentFile.hideDoneContent = true;
+                    this.cd.detectChanges();
+                }
+            }, 500);
         }, (file, eventError) => {
             // Error
             this.responseHandler(file, PoUploadStatus.Error);
@@ -38708,6 +38983,33 @@ class PoUploadComponent extends PoUploadBaseComponent {
     setHelper(label, additionalHelpTooltip) {
         return setHelperSettings(label, additionalHelpTooltip, this.poHelperComponent(), this.size, this.isAdditionalHelpEventTriggered() ? this.additionalHelp : undefined);
     }
+    actionIsDisabled(action) {
+        return isTypeof(action.disabled, 'function') ? action.disabled(action) : action.disabled;
+    }
+    isActionVisible(action) {
+        if (!action || (!action.label && !action.icon)) {
+            return false;
+        }
+        if (action.visible === undefined) {
+            return true;
+        }
+        if (isTypeof(action.visible, 'function')) {
+            return action.visible();
+        }
+        return !!action.visible;
+    }
+    onImageError(file) {
+        file.imageError = true;
+    }
+    showTooltipText(e, text) {
+        const element = e.target;
+        if (element.offsetWidth < element.scrollWidth) {
+            this.tooltipTitle = text;
+        }
+        else {
+            this.tooltipTitle = undefined;
+        }
+    }
     cleanInputValue() {
         this.calledByCleanInputValue = true;
         this.inputFile.nativeElement.value = '';
@@ -38725,10 +39027,25 @@ class PoUploadComponent extends PoUploadBaseComponent {
         file.percent = 100;
         this.cd.markForCheck();
     }
-    setPipeArguments(literalAttributes, literalArguments) {
+    // método responsável por setar os argumentos do i18nPipe de acordo com a restrição.
+    setPipeArguments(literalAttributes, literalArguments, file) {
         const pipeArguments = this.i18nPipe.transform(this.literals[literalAttributes], literalArguments);
-        this.notification.information(pipeArguments);
+        this.errorMessage = pipeArguments;
+        if (literalAttributes === 'invalidAmount') {
+            this.notification.information(pipeArguments);
+        }
+        if (file) {
+            file.errorMessage = pipeArguments;
+        }
+    }
+    setPrimaryActionModal() {
+        this.modalPrimaryAction = {
+            label: this.literals.continue,
+            action: this.closeModal.bind(this)
+        };
+        this.modalSecondaryAction = undefined;
     }
+    // Função disparada ao parar um envio de arquivo.
     stopUploadHandler(file) {
         file.status = PoUploadStatus.None;
         file.percent = 0;
@@ -38753,6 +39070,7 @@ class PoUploadComponent extends PoUploadBaseComponent {
     mapCleanUploadFiles(files) {
         const mapedByUploadFile = progressFile => {
             const { percent, displayName, ...uploadFile } = progressFile;
+            delete uploadFile.thumbnailUrl;
             return uploadFile;
         };
         return files.map(mapedByUploadFile);
@@ -38771,7 +39089,7 @@ class PoUploadComponent extends PoUploadBaseComponent {
                 useExisting: forwardRef(() => PoUploadComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "inputFile", first: true, predicate: ["inputFile"], descendants: true, read: ElementRef, static: true }, { propertyName: "poUploadDragDropComponent", first: true, predicate: PoUploadDragDropComponent, descendants: true }, { propertyName: "uploadButton", first: true, predicate: ["uploadButton"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<po-field-container\n  [p-disabled]=\"isDisabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n  [p-show-helper]=\"displayAdditionalHelp\"\n  [p-helper]=\"setHelper(this.label, this.additionalHelpTooltip).helperSettings\"\n  [p-text-wrap]=\"labelTextWrap()\"\n>\n  <div class=\"po-field-container-content\">\n    <div class=\"po-upload\">\n      <input\n        #inputFile\n        class=\"po-upload-input\"\n        type=\"file\"\n        [accept]=\"allowedExtensions\"\n        [attr.name]=\"name\"\n        [id]=\"id\"\n        [disabled]=\"isDisabled\"\n        [multiple]=\"isMultiple\"\n        [required]=\"required\"\n        (change)=\"onFileChange($event)\"\n      />\n\n      @if (displayDragDrop) {\n        <po-upload-drag-drop\n          [p-directory-compatible]=\"canHandleDirectory\"\n          [p-disabled]=\"isDisabled\"\n          [p-drag-drop-height]=\"dragDropHeight\"\n          [p-literals]=\"literals\"\n          (p-file-change)=\"onFileChangeDragDrop($event)\"\n          (p-select-files)=\"selectFiles()\"\n        >\n        </po-upload-drag-drop>\n      }\n\n      @if (!hideSelectButton && !displayDragDrop) {\n        <po-button\n          #uploadButton\n          class=\"po-upload-button\"\n          for=\"file\"\n          [p-disabled]=\"isDisabled\"\n          [p-label]=\"selectFileButtonLabel\"\n          [p-size]=\"size\"\n          (p-blur)=\"onBlur()\"\n          (p-click)=\"selectFiles()\"\n          (keydown)=\"onKeyDown($event)\"\n        >\n        </po-button>\n      }\n\n      @if (fileRestrictions && !hideRestrictionsInfo) {\n        <po-upload-file-restrictions\n          class=\"po-upload-file-restrictions\"\n          [ngClass]=\"{ 'po-upload-file-restrictions-drag-drop': displayDragDrop }\"\n          [p-allowed-extensions]=\"fileRestrictions?.allowedExtensions\"\n          [p-max-files]=\"maxFiles\"\n          [p-max-file-size]=\"fileRestrictions?.maxFileSize\"\n          [p-min-file-size]=\"fileRestrictions?.minFileSize\"\n        >\n        </po-upload-file-restrictions>\n      }\n\n      @if (currentFiles && currentFiles.length) {\n        <div class=\"po-upload-progress-container\">\n          <po-container\n            [p-height]=\"hasMoreThanFourItems ? 280 : 'auto'\"\n            [p-no-border]=\"!hasMoreThanFourItems\"\n            [p-no-padding]=\"!hasMoreThanFourItems\"\n          >\n            <div [ngClass]=\"{ 'po-upload-progress-container-area po-pt-2 po-pl-1': hasMoreThanFourItems }\">\n              @for (file of currentFiles; track trackByFn($index, file)) {\n                <po-progress\n                  [p-disabled-cancel]=\"disabledRemoveFile\"\n                  [p-info]=\"infoByUploadStatus[file.status]?.text(file.percent)\"\n                  [p-info-icon]=\"infoByUploadStatus[file.status]?.icon\"\n                  [p-status]=\"progressStatusByFileStatus[file.status]\"\n                  [p-text]=\"file.displayName\"\n                  [p-value]=\"file.percent\"\n                  [p-custom-action]=\"customAction\"\n                  (p-custom-action-click)=\"customClick(file)\"\n                  (p-cancel)=\"cancel(file)\"\n                  (p-retry)=\"uploadFiles([file])\"\n                  [p-size-actions]=\"size\"\n                >\n                </po-progress>\n              }\n            </div>\n          </po-container>\n        </div>\n      }\n\n      @if (displaySendButton) {\n        <po-button\n          class=\"po-upload-send-button\"\n          [class.po-mt-3]=\"hasMoreThanFourItems\"\n          p-kind=\"primary\"\n          [p-disabled]=\"hasAnyFileUploading(currentFiles)\"\n          [p-label]=\"literals.startSending\"\n          [p-size]=\"size\"\n          (p-click)=\"uploadFiles(currentFiles)\"\n        ></po-button>\n      }\n    </div>\n  </div>\n  <po-field-container-bottom\n    [p-additional-help-tooltip]=\"getAdditionalHelpTooltip()\"\n    [p-append-in-body]=\"appendBox\"\n    [p-help]=\"help\"\n    [p-disabled]=\"disabled\"\n    [p-hide-additional-help-by-label]=\"setHelper(this.label, this.additionalHelpTooltip).hideAdditionalHelp\"\n    [p-show-additional-help]=\"displayAdditionalHelp\"\n    [p-show-additional-help-icon]=\"showAdditionalHelpIcon()\"\n    (p-additional-help)=\"emitAdditionalHelp()\"\n  ></po-field-container-bottom>\n</po-field-container>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PoButtonComponent, selector: "po-button" }, { kind: "component", type: PoContainerComponent, selector: "po-container" }, { kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-additional-help-tooltip", "p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-show-additional-help", "p-show-additional-help-icon", "p-hide-additional-help-by-label"], outputs: ["p-additional-help"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-helper", "p-show-helper", "p-text-wrap", "p-optional", "p-required", "p-show-required"] }, { kind: "component", type: PoProgressComponent, selector: "po-progress" }, { kind: "component", type: PoUploadDragDropComponent, selector: "po-upload-drag-drop", inputs: ["p-directory-compatible", "p-disabled", "p-literals", "p-drag-drop-height"], outputs: ["p-file-change", "p-select-files"] }, { kind: "component", type: PoUploadFileRestrictionsComponent, selector: "po-upload-file-restrictions", inputs: ["p-max-files", "p-allowed-extensions", "p-max-file-size", "p-min-file-size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "inputFile", first: true, predicate: ["inputFile"], descendants: true, read: ElementRef, static: true }, { propertyName: "poUploadDragDropComponent", first: true, predicate: PoUploadDragDropComponent, descendants: true }, { propertyName: "uploadButton", first: true, predicate: ["uploadButton"], descendants: true }, { propertyName: "modalComponent", first: true, predicate: ["modal"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<po-field-container\n  [p-disabled]=\"isDisabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n  [p-show-helper]=\"displayAdditionalHelp\"\n  [p-helper]=\"setHelper(this.label, this.additionalHelpTooltip).helperSettings\"\n  [p-text-wrap]=\"labelTextWrap()\"\n>\n  <div class=\"po-field-container-content\">\n    <div class=\"po-upload\">\n      <input\n        #inputFile\n        class=\"po-upload-input\"\n        type=\"file\"\n        [accept]=\"allowedExtensions\"\n        [attr.name]=\"name\"\n        [id]=\"id\"\n        [disabled]=\"isDisabled\"\n        [multiple]=\"isMultiple\"\n        [required]=\"required\"\n        (change)=\"onFileChange($event)\"\n      />\n\n      @if (displayDragDrop) {\n        <po-upload-drag-drop\n          [p-directory-compatible]=\"canHandleDirectory\"\n          [p-disabled]=\"isDisabled\"\n          [p-drag-drop-height]=\"dragDropHeight\"\n          [p-literals]=\"literals\"\n          (p-file-change)=\"onFileChangeDragDrop($event)\"\n          (p-select-files)=\"selectFiles()\"\n        >\n        </po-upload-drag-drop>\n      }\n\n      @if (fileRestrictions && !hideRestrictionsInfo) {\n        <po-upload-file-restrictions\n          class=\"po-upload-file-restrictions\"\n          [ngClass]=\"{ 'po-upload-file-restrictions-drag-drop': displayDragDrop }\"\n          [class.po-pb-1]=\"!displayDragDrop\"\n          [p-allowed-extensions]=\"fileRestrictions?.allowedExtensions\"\n          [p-max-files]=\"maxFiles\"\n          [p-max-file-size]=\"fileRestrictions?.maxFileSize\"\n          [p-min-file-size]=\"fileRestrictions?.minFileSize\"\n        >\n        </po-upload-file-restrictions>\n      }\n\n      @if (!hideSelectButton && !displayDragDrop) {\n        <po-button\n          #uploadButton\n          class=\"po-upload-button\"\n          for=\"file\"\n          [p-disabled]=\"isDisabled\"\n          [p-label]=\"selectFileButtonLabel\"\n          [p-size]=\"size\"\n          (p-blur)=\"onBlur()\"\n          (p-click)=\"selectFiles()\"\n          (keydown)=\"onKeyDown($event)\"\n        >\n        </po-button>\n      }\n\n      @if (currentFiles && currentFiles.length) {\n        <div class=\"po-upload-files-content\">\n          @for (file of currentFiles; track trackByFn($index, file)) {\n            <div\n              class=\"po-upload-progress-container\"\n              [class.po-upload-container-error]=\"file.status === 2\"\n              [class.po-upload-progress-container-aa]=\"size === 'small'\"\n              [class.po-upload-status-uploaded]=\"file.hideDoneContent\"\n            >\n              <po-container>\n                <div\n                  [ngClass]=\"showThumbnail && file.thumbnailUrl ? 'po-upload-content-thumbnail' : 'po-upload-content'\"\n                  class=\"po-upload-content\"\n                >\n                  <div class=\"po-upload-file-name\" [class.po-upload-file-name-aa]=\"size === 'small'\">\n                    <div class=\"po-upload-file-name-display\">\n                      @if (showThumbnail && file.thumbnailUrl) {\n                        <div class=\"po-upload-thumbnail\" (click)=\"openModal(file)\" (keydown)=\"openModal(file, $event)\">\n                          @if (!file.imageError) {\n                            <div class=\"po-upload-thumbnail-icon\">\n                              <po-icon p-icon=\"ICON_PICTURE\"></po-icon>\n                            </div>\n                            <img\n                              class=\"po-upload-thumbnail-img\"\n                              [src]=\"file.thumbnailUrl\"\n                              [alt]=\"literals.thumbnail\"\n                              (error)=\"onImageError(file)\"\n                            />\n                          } @else {\n                            <div class=\"po-upload-thumbnail-broken\">\n                              <po-icon p-icon=\"ICON_PICTURE_BROKEN\"></po-icon>\n                            </div>\n                          }\n                        </div>\n                      }\n                      <span\n                        class=\"po-upload-display-name\"\n                        [class.po-upload-name-interactive]=\"showThumbnail && file.thumbnailUrl\"\n                        [p-tooltip]=\"tooltipTitle\"\n                        (keydown)=\"openModal(file, $event)\"\n                        (click)=\"openModal(file)\"\n                        (mouseover)=\"showTooltipText($event, file?.displayName)\"\n                        (focus)=\"showTooltipText($event, file?.displayName)\"\n                        >{{ file.displayName }}</span\n                      >\n                    </div>\n                    <div class=\"po-upload-buttons-content\">\n                      @if (isActionVisible(customAction)) {\n                        <po-button\n                          class=\"po-upload-custom-action-button\"\n                          [p-danger]=\"customAction.type === 'danger'\"\n                          [p-disabled]=\"actionIsDisabled(customAction)\"\n                          [p-label]=\"customAction.label || ''\"\n                          [p-icon]=\"customAction.icon\"\n                          [p-size]=\"size\"\n                          (p-click)=\"customClick(file)\"\n                        >\n                        </po-button>\n                      }\n                      @if (file.status !== 0 || onRemove?.observers?.length > 0) {\n                        <div\n                          class=\"po-upload-icon-focus\"\n                          [class.po-upload-cancel-disabled]=\"disabledRemoveFile\"\n                          [class.po-upload-icon-focus-aa]=\"size === 'small'\"\n                          [attr.aria-label]=\"literals.close\"\n                          [tabindex]=\"disabledRemoveFile ? -1 : 0\"\n                          (keydown)=\"cancel(file, $event)\"\n                          (click)=\"cancel(file)\"\n                        >\n                          <po-icon\n                            class=\"po-upload-icon-close\"\n                            [class.po-upload-icon-remove]=\"file.status === 0\"\n                            [p-icon]=\"file.status === 0 ? 'ICON_DELETE' : 'ICON_CLOSE'\"\n                          >\n                          </po-icon>\n                        </div>\n                      }\n                    </div>\n                  </div>\n                  @if (!file.hideDoneContent) {\n                    <div class=\"po-upload-info-bar\" [class.fade-out]=\"file.status === 0\">\n                      @if (file.status === 0) {\n                        <span> {{ literals.doneText }} </span>\n                      } @else if (file.status === 2) {\n                        <div class=\"po-upload-content-error\">\n                          <po-icon class=\"po-upload-icon-error\" p-icon=\"ICON_EXCLAMATION\"></po-icon\n                          ><span class=\"po-upload-content-error-text\">\n                            {{ file?.errorMessage || literals?.errorOccurred }}\n                          </span>\n                          @if (!file.errorMessage) {\n                            <po-link\n                              class=\"po-upload-retry-link\"\n                              [p-label]=\"literals.tryAgain\"\n                              (p-action)=\"uploadFiles([file])\"\n                            ></po-link>\n                          }\n                        </div>\n                      } @else if (file.status === 1) {\n                        <span>{{ literals.uploadingText }}</span>\n                      } @else if (file.status === 3) {\n                        <span>{{ literals.startSending }}</span>\n                      }\n                      @if (file.status !== 2) {\n                        <span class=\"po-upload-value-percent\">{{ file.percent || 0 }}%</span>\n                      }\n                    </div>\n                  }\n                </div>\n                @if (file.status !== 2 && !file.hideDoneContent) {\n                  <po-progress\n                    [class.fade-out]=\"file.status === 0\"\n                    class=\"po-upload-progress\"\n                    p-size=\"medium\"\n                    [p-disabled-cancel]=\"disabledRemoveFile\"\n                    [p-value]=\"file.percent\"\n                    [p-status]=\"progressStatusByFileStatus[file.status]\"\n                    [p-size-actions]=\"size\"\n                  >\n                  </po-progress>\n                }\n              </po-container>\n            </div>\n          }\n        </div>\n      }\n\n      @if (displaySendButton) {\n        <po-button\n          class=\"po-upload-send-button\"\n          [class.po-mt-3]=\"hasMoreThanFourItems\"\n          p-kind=\"primary\"\n          [p-disabled]=\"hasAnyFileUploading(currentFiles)\"\n          [p-label]=\"literals.startSending\"\n          [p-size]=\"size\"\n          (p-click)=\"uploadFiles(currentFiles)\"\n        ></po-button>\n      }\n    </div>\n  </div>\n  <po-field-container-bottom\n    [p-additional-help-tooltip]=\"getAdditionalHelpTooltip()\"\n    [p-append-in-body]=\"appendBox\"\n    [p-help]=\"help\"\n    [p-disabled]=\"disabled\"\n    [p-hide-additional-help-by-label]=\"setHelper(this.label, this.additionalHelpTooltip).hideAdditionalHelp\"\n    [p-show-additional-help]=\"displayAdditionalHelp\"\n    [p-show-additional-help-icon]=\"showAdditionalHelpIcon()\"\n    (p-additional-help)=\"emitAdditionalHelp()\"\n  ></po-field-container-bottom>\n</po-field-container>\n\n<po-modal\n  #modal\n  [p-components-size]=\"size\"\n  [p-primary-action]=\"modalPrimaryAction\"\n  [p-secondary-action]=\"modalSecondaryAction\"\n  [p-title]=\"literals.preview\"\n  [p-click-out]=\"true\"\n  (p-close)=\"closeModal.bind(this)\"\n>\n  @if (!errorModalImage) {\n    <img [src]=\"modalImageUrl\" [alt]=\"literals.thumbnail\" (error)=\"errorModalImage = true\" />\n  } @else {\n    <div class=\"po-upload-thumbnail-broken\">\n      <po-icon p-icon=\"ICON_PICTURE_BROKEN\"></po-icon>\n    </div>\n  }\n</po-modal>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PoButtonComponent, selector: "po-button" }, { kind: "component", type: PoContainerComponent, selector: "po-container" }, { kind: "component", type: PoFieldContainerBottomComponent, selector: "po-field-container-bottom", inputs: ["p-additional-help-tooltip", "p-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-show-additional-help", "p-show-additional-help-icon", "p-hide-additional-help-by-label"], outputs: ["p-additional-help"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-helper", "p-show-helper", "p-text-wrap", "p-optional", "p-required", "p-show-required"] }, { kind: "component", type: PoModalComponent, selector: "po-modal" }, { kind: "component", type: PoProgressComponent, selector: "po-progress" }, { kind: "directive", type: PoTooltipDirective, selector: "[p-tooltip]" }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoLinkComponent, selector: "po-link" }, { kind: "component", type: PoUploadDragDropComponent, selector: "po-upload-drag-drop", inputs: ["p-directory-compatible", "p-disabled", "p-literals", "p-drag-drop-height"], outputs: ["p-file-change", "p-select-files"] }, { kind: "component", type: PoUploadFileRestrictionsComponent, selector: "po-upload-file-restrictions", inputs: ["p-max-files", "p-allowed-extensions", "p-max-file-size", "p-min-file-size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoUploadComponent, decorators: [{
             type: Component,
@@ -38788,7 +39106,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
                             useExisting: forwardRef(() => PoUploadComponent),
                             multi: true
                         }
-                    ], standalone: false, template: "<po-field-container\n  [p-disabled]=\"isDisabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n  [p-show-helper]=\"displayAdditionalHelp\"\n  [p-helper]=\"setHelper(this.label, this.additionalHelpTooltip).helperSettings\"\n  [p-text-wrap]=\"labelTextWrap()\"\n>\n  <div class=\"po-field-container-content\">\n    <div class=\"po-upload\">\n      <input\n        #inputFile\n        class=\"po-upload-input\"\n        type=\"file\"\n        [accept]=\"allowedExtensions\"\n        [attr.name]=\"name\"\n        [id]=\"id\"\n        [disabled]=\"isDisabled\"\n        [multiple]=\"isMultiple\"\n        [required]=\"required\"\n        (change)=\"onFileChange($event)\"\n      />\n\n      @if (displayDragDrop) {\n        <po-upload-drag-drop\n          [p-directory-compatible]=\"canHandleDirectory\"\n          [p-disabled]=\"isDisabled\"\n          [p-drag-drop-height]=\"dragDropHeight\"\n          [p-literals]=\"literals\"\n          (p-file-change)=\"onFileChangeDragDrop($event)\"\n          (p-select-files)=\"selectFiles()\"\n        >\n        </po-upload-drag-drop>\n      }\n\n      @if (!hideSelectButton && !displayDragDrop) {\n        <po-button\n          #uploadButton\n          class=\"po-upload-button\"\n          for=\"file\"\n          [p-disabled]=\"isDisabled\"\n          [p-label]=\"selectFileButtonLabel\"\n          [p-size]=\"size\"\n          (p-blur)=\"onBlur()\"\n          (p-click)=\"selectFiles()\"\n          (keydown)=\"onKeyDown($event)\"\n        >\n        </po-button>\n      }\n\n      @if (fileRestrictions && !hideRestrictionsInfo) {\n        <po-upload-file-restrictions\n          class=\"po-upload-file-restrictions\"\n          [ngClass]=\"{ 'po-upload-file-restrictions-drag-drop': displayDragDrop }\"\n          [p-allowed-extensions]=\"fileRestrictions?.allowedExtensions\"\n          [p-max-files]=\"maxFiles\"\n          [p-max-file-size]=\"fileRestrictions?.maxFileSize\"\n          [p-min-file-size]=\"fileRestrictions?.minFileSize\"\n        >\n        </po-upload-file-restrictions>\n      }\n\n      @if (currentFiles && currentFiles.length) {\n        <div class=\"po-upload-progress-container\">\n          <po-container\n            [p-height]=\"hasMoreThanFourItems ? 280 : 'auto'\"\n            [p-no-border]=\"!hasMoreThanFourItems\"\n            [p-no-padding]=\"!hasMoreThanFourItems\"\n          >\n            <div [ngClass]=\"{ 'po-upload-progress-container-area po-pt-2 po-pl-1': hasMoreThanFourItems }\">\n              @for (file of currentFiles; track trackByFn($index, file)) {\n                <po-progress\n                  [p-disabled-cancel]=\"disabledRemoveFile\"\n                  [p-info]=\"infoByUploadStatus[file.status]?.text(file.percent)\"\n                  [p-info-icon]=\"infoByUploadStatus[file.status]?.icon\"\n                  [p-status]=\"progressStatusByFileStatus[file.status]\"\n                  [p-text]=\"file.displayName\"\n                  [p-value]=\"file.percent\"\n                  [p-custom-action]=\"customAction\"\n                  (p-custom-action-click)=\"customClick(file)\"\n                  (p-cancel)=\"cancel(file)\"\n                  (p-retry)=\"uploadFiles([file])\"\n                  [p-size-actions]=\"size\"\n                >\n                </po-progress>\n              }\n            </div>\n          </po-container>\n        </div>\n      }\n\n      @if (displaySendButton) {\n        <po-button\n          class=\"po-upload-send-button\"\n          [class.po-mt-3]=\"hasMoreThanFourItems\"\n          p-kind=\"primary\"\n          [p-disabled]=\"hasAnyFileUploading(currentFiles)\"\n          [p-label]=\"literals.startSending\"\n          [p-size]=\"size\"\n          (p-click)=\"uploadFiles(currentFiles)\"\n        ></po-button>\n      }\n    </div>\n  </div>\n  <po-field-container-bottom\n    [p-additional-help-tooltip]=\"getAdditionalHelpTooltip()\"\n    [p-append-in-body]=\"appendBox\"\n    [p-help]=\"help\"\n    [p-disabled]=\"disabled\"\n    [p-hide-additional-help-by-label]=\"setHelper(this.label, this.additionalHelpTooltip).hideAdditionalHelp\"\n    [p-show-additional-help]=\"displayAdditionalHelp\"\n    [p-show-additional-help-icon]=\"showAdditionalHelpIcon()\"\n    (p-additional-help)=\"emitAdditionalHelp()\"\n  ></po-field-container-bottom>\n</po-field-container>\n" }]
+                    ], standalone: false, template: "<po-field-container\n  [p-disabled]=\"isDisabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n  [p-show-helper]=\"displayAdditionalHelp\"\n  [p-helper]=\"setHelper(this.label, this.additionalHelpTooltip).helperSettings\"\n  [p-text-wrap]=\"labelTextWrap()\"\n>\n  <div class=\"po-field-container-content\">\n    <div class=\"po-upload\">\n      <input\n        #inputFile\n        class=\"po-upload-input\"\n        type=\"file\"\n        [accept]=\"allowedExtensions\"\n        [attr.name]=\"name\"\n        [id]=\"id\"\n        [disabled]=\"isDisabled\"\n        [multiple]=\"isMultiple\"\n        [required]=\"required\"\n        (change)=\"onFileChange($event)\"\n      />\n\n      @if (displayDragDrop) {\n        <po-upload-drag-drop\n          [p-directory-compatible]=\"canHandleDirectory\"\n          [p-disabled]=\"isDisabled\"\n          [p-drag-drop-height]=\"dragDropHeight\"\n          [p-literals]=\"literals\"\n          (p-file-change)=\"onFileChangeDragDrop($event)\"\n          (p-select-files)=\"selectFiles()\"\n        >\n        </po-upload-drag-drop>\n      }\n\n      @if (fileRestrictions && !hideRestrictionsInfo) {\n        <po-upload-file-restrictions\n          class=\"po-upload-file-restrictions\"\n          [ngClass]=\"{ 'po-upload-file-restrictions-drag-drop': displayDragDrop }\"\n          [class.po-pb-1]=\"!displayDragDrop\"\n          [p-allowed-extensions]=\"fileRestrictions?.allowedExtensions\"\n          [p-max-files]=\"maxFiles\"\n          [p-max-file-size]=\"fileRestrictions?.maxFileSize\"\n          [p-min-file-size]=\"fileRestrictions?.minFileSize\"\n        >\n        </po-upload-file-restrictions>\n      }\n\n      @if (!hideSelectButton && !displayDragDrop) {\n        <po-button\n          #uploadButton\n          class=\"po-upload-button\"\n          for=\"file\"\n          [p-disabled]=\"isDisabled\"\n          [p-label]=\"selectFileButtonLabel\"\n          [p-size]=\"size\"\n          (p-blur)=\"onBlur()\"\n          (p-click)=\"selectFiles()\"\n          (keydown)=\"onKeyDown($event)\"\n        >\n        </po-button>\n      }\n\n      @if (currentFiles && currentFiles.length) {\n        <div class=\"po-upload-files-content\">\n          @for (file of currentFiles; track trackByFn($index, file)) {\n            <div\n              class=\"po-upload-progress-container\"\n              [class.po-upload-container-error]=\"file.status === 2\"\n              [class.po-upload-progress-container-aa]=\"size === 'small'\"\n              [class.po-upload-status-uploaded]=\"file.hideDoneContent\"\n            >\n              <po-container>\n                <div\n                  [ngClass]=\"showThumbnail && file.thumbnailUrl ? 'po-upload-content-thumbnail' : 'po-upload-content'\"\n                  class=\"po-upload-content\"\n                >\n                  <div class=\"po-upload-file-name\" [class.po-upload-file-name-aa]=\"size === 'small'\">\n                    <div class=\"po-upload-file-name-display\">\n                      @if (showThumbnail && file.thumbnailUrl) {\n                        <div class=\"po-upload-thumbnail\" (click)=\"openModal(file)\" (keydown)=\"openModal(file, $event)\">\n                          @if (!file.imageError) {\n                            <div class=\"po-upload-thumbnail-icon\">\n                              <po-icon p-icon=\"ICON_PICTURE\"></po-icon>\n                            </div>\n                            <img\n                              class=\"po-upload-thumbnail-img\"\n                              [src]=\"file.thumbnailUrl\"\n                              [alt]=\"literals.thumbnail\"\n                              (error)=\"onImageError(file)\"\n                            />\n                          } @else {\n                            <div class=\"po-upload-thumbnail-broken\">\n                              <po-icon p-icon=\"ICON_PICTURE_BROKEN\"></po-icon>\n                            </div>\n                          }\n                        </div>\n                      }\n                      <span\n                        class=\"po-upload-display-name\"\n                        [class.po-upload-name-interactive]=\"showThumbnail && file.thumbnailUrl\"\n                        [p-tooltip]=\"tooltipTitle\"\n                        (keydown)=\"openModal(file, $event)\"\n                        (click)=\"openModal(file)\"\n                        (mouseover)=\"showTooltipText($event, file?.displayName)\"\n                        (focus)=\"showTooltipText($event, file?.displayName)\"\n                        >{{ file.displayName }}</span\n                      >\n                    </div>\n                    <div class=\"po-upload-buttons-content\">\n                      @if (isActionVisible(customAction)) {\n                        <po-button\n                          class=\"po-upload-custom-action-button\"\n                          [p-danger]=\"customAction.type === 'danger'\"\n                          [p-disabled]=\"actionIsDisabled(customAction)\"\n                          [p-label]=\"customAction.label || ''\"\n                          [p-icon]=\"customAction.icon\"\n                          [p-size]=\"size\"\n                          (p-click)=\"customClick(file)\"\n                        >\n                        </po-button>\n                      }\n                      @if (file.status !== 0 || onRemove?.observers?.length > 0) {\n                        <div\n                          class=\"po-upload-icon-focus\"\n                          [class.po-upload-cancel-disabled]=\"disabledRemoveFile\"\n                          [class.po-upload-icon-focus-aa]=\"size === 'small'\"\n                          [attr.aria-label]=\"literals.close\"\n                          [tabindex]=\"disabledRemoveFile ? -1 : 0\"\n                          (keydown)=\"cancel(file, $event)\"\n                          (click)=\"cancel(file)\"\n                        >\n                          <po-icon\n                            class=\"po-upload-icon-close\"\n                            [class.po-upload-icon-remove]=\"file.status === 0\"\n                            [p-icon]=\"file.status === 0 ? 'ICON_DELETE' : 'ICON_CLOSE'\"\n                          >\n                          </po-icon>\n                        </div>\n                      }\n                    </div>\n                  </div>\n                  @if (!file.hideDoneContent) {\n                    <div class=\"po-upload-info-bar\" [class.fade-out]=\"file.status === 0\">\n                      @if (file.status === 0) {\n                        <span> {{ literals.doneText }} </span>\n                      } @else if (file.status === 2) {\n                        <div class=\"po-upload-content-error\">\n                          <po-icon class=\"po-upload-icon-error\" p-icon=\"ICON_EXCLAMATION\"></po-icon\n                          ><span class=\"po-upload-content-error-text\">\n                            {{ file?.errorMessage || literals?.errorOccurred }}\n                          </span>\n                          @if (!file.errorMessage) {\n                            <po-link\n                              class=\"po-upload-retry-link\"\n                              [p-label]=\"literals.tryAgain\"\n                              (p-action)=\"uploadFiles([file])\"\n                            ></po-link>\n                          }\n                        </div>\n                      } @else if (file.status === 1) {\n                        <span>{{ literals.uploadingText }}</span>\n                      } @else if (file.status === 3) {\n                        <span>{{ literals.startSending }}</span>\n                      }\n                      @if (file.status !== 2) {\n                        <span class=\"po-upload-value-percent\">{{ file.percent || 0 }}%</span>\n                      }\n                    </div>\n                  }\n                </div>\n                @if (file.status !== 2 && !file.hideDoneContent) {\n                  <po-progress\n                    [class.fade-out]=\"file.status === 0\"\n                    class=\"po-upload-progress\"\n                    p-size=\"medium\"\n                    [p-disabled-cancel]=\"disabledRemoveFile\"\n                    [p-value]=\"file.percent\"\n                    [p-status]=\"progressStatusByFileStatus[file.status]\"\n                    [p-size-actions]=\"size\"\n                  >\n                  </po-progress>\n                }\n              </po-container>\n            </div>\n          }\n        </div>\n      }\n\n      @if (displaySendButton) {\n        <po-button\n          class=\"po-upload-send-button\"\n          [class.po-mt-3]=\"hasMoreThanFourItems\"\n          p-kind=\"primary\"\n          [p-disabled]=\"hasAnyFileUploading(currentFiles)\"\n          [p-label]=\"literals.startSending\"\n          [p-size]=\"size\"\n          (p-click)=\"uploadFiles(currentFiles)\"\n        ></po-button>\n      }\n    </div>\n  </div>\n  <po-field-container-bottom\n    [p-additional-help-tooltip]=\"getAdditionalHelpTooltip()\"\n    [p-append-in-body]=\"appendBox\"\n    [p-help]=\"help\"\n    [p-disabled]=\"disabled\"\n    [p-hide-additional-help-by-label]=\"setHelper(this.label, this.additionalHelpTooltip).hideAdditionalHelp\"\n    [p-show-additional-help]=\"displayAdditionalHelp\"\n    [p-show-additional-help-icon]=\"showAdditionalHelpIcon()\"\n    (p-additional-help)=\"emitAdditionalHelp()\"\n  ></po-field-container-bottom>\n</po-field-container>\n\n<po-modal\n  #modal\n  [p-components-size]=\"size\"\n  [p-primary-action]=\"modalPrimaryAction\"\n  [p-secondary-action]=\"modalSecondaryAction\"\n  [p-title]=\"literals.preview\"\n  [p-click-out]=\"true\"\n  (p-close)=\"closeModal.bind(this)\"\n>\n  @if (!errorModalImage) {\n    <img [src]=\"modalImageUrl\" [alt]=\"literals.thumbnail\" (error)=\"errorModalImage = true\" />\n  } @else {\n    <div class=\"po-upload-thumbnail-broken\">\n      <po-icon p-icon=\"ICON_PICTURE_BROKEN\"></po-icon>\n    </div>\n  }\n</po-modal>\n" }]
         }], ctorParameters: () => [], propDecorators: { inputFile: [{
                 type: ViewChild,
                 args: ['inputFile', { read: ElementRef, static: true }]
@@ -38798,6 +39116,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
             }], uploadButton: [{
                 type: ViewChild,
                 args: ['uploadButton']
+            }], modalComponent: [{
+                type: ViewChild,
+                args: ['modal']
             }] } });
 
 /**
@@ -40004,11 +40325,13 @@ class PoSelectComponent extends PoFieldValidateModel {
         }
     }
     ngAfterViewInit() {
-        setTimeout(() => {
-            if (this.selectElement?.nativeElement?.classList?.contains('enable-append-box')) {
-                this.appendBox = true;
-            }
-        }, 300);
+        if (this.selectElement?.nativeElement?.closest('.components-form-custom-template')) {
+            setTimeout(() => {
+                if (this.selectElement?.nativeElement?.classList?.contains('enable-append-box')) {
+                    this.appendBox = true;
+                }
+            }, 300);
+        }
     }
     /**
      * Função que atribui foco ao componente.
@@ -41199,6 +41522,7 @@ class PoFieldModule {
             PoCheckboxModule,
             PoRadioModule,
             PoLabelModule,
+            PoLinkModule,
             PoListBoxModule,
             PoSwitchModule,
             PoTagModule,
@@ -41257,6 +41581,7 @@ class PoFieldModule {
             PoCheckboxModule,
             PoRadioModule,
             PoLabelModule,
+            PoLinkModule,
             PoListBoxModule,
             PoSwitchModule,
             PoTagModule,
@@ -41302,6 +41627,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
                         PoCheckboxModule,
                         PoRadioModule,
                         PoLabelModule,
+                        PoLinkModule,
                         PoListBoxModule,
                         PoSwitchModule,
                         PoTagModule,
@@ -42533,11 +42859,11 @@ class PoDynamicFormFieldsComponent extends PoDynamicFormFieldsBaseComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoDynamicFormFieldsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: PoDynamicFormFieldsComponent, isStandalone: false, selector: "po-dynamic-form-fields", providers: [PoDynamicFormValidationService], viewQueries: [{ propertyName: "components", predicate: ["component"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (visibleFields && visibleFields.length > 0) {\n  <div class=\"po-row\" [class.po-dynamic]=\"hasContainers\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        hasContainers ? poContentContainer : poContent;\n        context: { $implicit: hasContainers ? containerFields : visibleFields }\n      \"\n    ></ng-container>\n  </div>\n}\n\n<ng-template #poContent let-fields>\n  @for (field of fields; track trackBy($index, field)) {\n    @if (field?.divider?.trim()) {\n      <po-divider class=\"po-sm-12\" [p-label]=\"field.divider\"> </po-divider>\n    }\n    @if (compareTo(field.control, 'datepicker')) {\n      <po-datepicker\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-clean]=\"field.clean\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-error-pattern]=\"field.errorMessage\"\n        [p-error-limit]=\"field.errorLimit\"\n        [p-error-async]=\"field.errorAsyncFunction\"\n        [p-auto-focus]=\"field.focus\"\n        [p-format]=\"field.format\"\n        [p-help]=\"field.help\"\n        [p-iso-format]=\"field.isoFormat\"\n        [p-label]=\"field.label\"\n        [p-locale]=\"field.locale\"\n        [p-max-date]=\"field.maxValue\"\n        [p-min-date]=\"field.minValue\"\n        [p-no-autocomplete]=\"field.noAutocomplete\"\n        [p-optional]=\"field.optional\"\n        [p-readonly]=\"field.readonly\"\n        [p-required]=\"field.required\"\n        [p-required-field-error-message]=\"field.requiredFieldErrorMessage\"\n        [p-size]=\"field.size || componentsSize\"\n        [p-show-required]=\"field.showRequired\"\n        (p-change)=\"onChangeField(field)\"\n        [p-placeholder]=\"field.placeholder\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n      >\n      </po-datepicker>\n    }\n    @if (compareTo(field.control, 'datepickerrange')) {\n      <po-datepicker-range\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-clean]=\"field.clean\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-auto-focus]=\"field.focus\"\n        [p-help]=\"field.help\"\n        [p-label]=\"field.label\"\n        [p-literals]=\"field.literals\"\n        [p-max-date]=\"field.maxValue\"\n        [p-min-date]=\"field.minValue\"\n        [p-no-autocomplete]=\"field.noAutocomplete\"\n        [p-optional]=\"field.optional\"\n        [p-readonly]=\"field.readonly\"\n        [p-required]=\"field.required\"\n        [p-field-error-message]=\"field.errorMessage\"\n        [p-error-limit]=\"field.errorLimit\"\n        [p-show-required]=\"field.showRequired\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-change)=\"onChangeField(field)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n      >\n      </po-datepicker-range>\n    }\n    @if (compareTo(field.control, 'input')) {\n      <po-input\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-clean]=\"field.clean\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-error-pattern]=\"field.errorMessage\"\n        [p-error-limit]=\"field.errorLimit\"\n        [p-error-async-properties]=\"field.errorAsyncProperties\"\n        [p-auto-focus]=\"field.focus\"\n        [p-help]=\"field.help\"\n        [p-label]=\"field.label\"\n        [p-mask-format-model]=\"field.maskFormatModel\"\n        [p-mask]=\"field.mask\"\n        [p-maxlength]=\"field.maxLength\"\n        [p-minlength]=\"field.minLength\"\n        [p-no-autocomplete]=\"field.noAutocomplete\"\n        [p-optional]=\"field.optional\"\n        [p-pattern]=\"field.pattern\"\n        [p-required]=\"field.required\"\n        [p-required-field-error-message]=\"field.requiredFieldErrorMessage\"\n        [p-show-required]=\"field.showRequired\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-change)=\"onChangeField(field)\"\n        (p-change-model)=\"onChangeFieldModel(field)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n        [p-icon]=\"field.icon\"\n        [p-placeholder]=\"field.placeholder\"\n        [p-readonly]=\"field.readonly\"\n      >\n      </po-input>\n    }\n    @if (compareTo(field.control, 'number')) {\n      <po-number\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-clean]=\"field.clean\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-error-pattern]=\"field.errorMessage\"\n        [p-error-limit]=\"field.errorLimit\"\n        [p-error-async-properties]=\"field.errorAsyncProperties\"\n        [p-auto-focus]=\"field.focus\"\n        [p-help]=\"field.help\"\n        [p-label]=\"field.label\"\n        [p-min]=\"field.minValue\"\n        [p-max]=\"field.maxValue\"\n        [p-maxlength]=\"field.maxLength\"\n        [p-minlength]=\"field.minLength\"\n        [p-no-autocomplete]=\"field.noAutocomplete\"\n        [p-optional]=\"field.optional\"\n        [p-step]=\"field.step\"\n        [p-readonly]=\"field.readonly\"\n        [p-required]=\"field.required\"\n        [p-required-field-error-message]=\"field.requiredFieldErrorMessage\"\n        [p-show-required]=\"field.showRequired\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-change)=\"onChangeField(field)\"\n        (p-change-model)=\"onChangeFieldModel(field)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n        [p-icon]=\"field.icon\"\n        [p-placeholder]=\"field.placeholder\"\n      >\n      </po-number>\n    }\n    @if (compareTo(field.control, 'decimal')) {\n      <po-decimal\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-clean]=\"field.clean\"\n        [p-error-pattern]=\"field.errorMessage\"\n        [p-error-limit]=\"field.errorLimit\"\n        [p-error-async-properties]=\"field.errorAsyncProperties\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-decimals-length]=\"field.decimalsLength\"\n        [p-thousand-maxlength]=\"field.thousandMaxlength\"\n        [p-icon]=\"field.icon\"\n        [p-auto-focus]=\"field.focus\"\n        [p-help]=\"field.help\"\n        [p-label]=\"field.label\"\n        [p-locale]=\"field.locale\"\n        [p-min]=\"field.minValue\"\n        [p-max]=\"field.maxValue\"\n        [p-maxlength]=\"field.maxLength\"\n        [p-minlength]=\"field.minLength\"\n        [p-no-autocomplete]=\"field.noAutocomplete\"\n        [p-optional]=\"field.optional\"\n        [p-readonly]=\"field.readonly\"\n        [p-required]=\"field.required\"\n        [p-required-field-error-message]=\"field.requiredFieldErrorMessage\"\n        [p-show-required]=\"field.showRequired\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-change)=\"onChangeField(field)\"\n        (p-change-model)=\"onChangeFieldModel(field)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n        [p-placeholder]=\"field.placeholder\"\n      >\n      </po-decimal>\n    }\n    @if (compareTo(field.control, 'select')) {\n      <po-select\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-field-label]=\"field.fieldLabel\"\n        [p-field-value]=\"field.fieldValue\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-help]=\"field.help\"\n        [p-label]=\"field.label\"\n        [p-optional]=\"field.optional\"\n        [p-options]=\"field.options\"\n        [p-required]=\"field.required\"\n        [p-field-error-message]=\"field.errorMessage\"\n        [p-error-limit]=\"field.errorLimit\"\n        [p-show-required]=\"field.showRequired\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-change)=\"onChangeField(field)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n        [p-placeholder]=\"field.placeholder\"\n        [p-readonly]=\"field.readonly\"\n      >\n      </po-select>\n    }\n    @if (compareTo(field.control, 'radioGroup')) {\n      <po-radio-group\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-columns]=\"field.columns || 3\"\n        [p-auto-focus]=\"field.focus\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-help]=\"field.help\"\n        [p-label]=\"field.label\"\n        [p-optional]=\"field.optional\"\n        [p-options]=\"field.options\"\n        [p-required]=\"field.required\"\n        [p-field-error-message]=\"field.errorMessage\"\n        [p-error-limit]=\"field.errorLimit\"\n        [p-show-required]=\"field.showRequired\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-change)=\"onChangeField(field)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n      >\n      </po-radio-group>\n    }\n    @if (compareTo(field.control, 'switch')) {\n      <po-switch\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-error-limit]=\"field.errorLimit\"\n        [p-field-error-message]=\"field.errorMessage\"\n        [p-format-model]=\"field.formatModel\"\n        [p-help]=\"field.help\"\n        [p-label]=\"field.label\"\n        [p-label-off]=\"field.booleanFalse\"\n        [p-label-on]=\"field.booleanTrue\"\n        [p-label-position]=\"field.labelPosition\"\n        [p-hide-label-status]=\"field.hideLabelStatus\"\n        [p-invalid-value]=\"field.invalidValue\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-change)=\"onChangeField(field)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n      >\n      </po-switch>\n    }\n    @if (compareTo(field.control, 'checkbox')) {\n      <po-checkbox\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-auto-focus]=\"field.focus\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-help]=\"field.help\"\n        [p-label]=\"field.label\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-change)=\"onChangeField(field)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n      >\n      </po-checkbox>\n    }\n    @if (compareTo(field.control, 'combo')) {\n      <po-combo\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        p-emit-object-value\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-auto-focus]=\"field.focus\"\n        [p-clean]=\"field.clean\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-field-label]=\"field.fieldLabel\"\n        [p-field-value]=\"field.fieldValue\"\n        [p-filter-params]=\"field.params\"\n        [p-filter-service]=\"field.optionsService\"\n        [p-help]=\"field.help\"\n        [p-infinite-scroll]=\"field.infiniteScroll\"\n        [p-infinite-scroll-distance]=\"field.infiniteScrollDistance || 100\"\n        [p-label]=\"field.label\"\n        [p-literals]=\"field.literals\"\n        [p-options]=\"field.options\"\n        [p-optional]=\"field.optional\"\n        [p-sort]=\"field.sort\"\n        [p-required]=\"field.required\"\n        [p-field-error-message]=\"field.errorMessage\"\n        [p-error-limit]=\"field.errorLimit\"\n        [p-show-required]=\"field.showRequired\"\n        (p-change)=\"onChangeField(field, $event)\"\n        [p-icon]=\"field.icon\"\n        [p-placeholder]=\"field.placeholder\"\n        [p-filter-minlength]=\"field.filterMinlength\"\n        [p-filter-mode]=\"field.filterMode\"\n        [p-disabled-init-filter]=\"field.disabledInitFilter\"\n        [p-disabled-tab-filter]=\"field.disabledTabFilter\"\n        [p-debounce-time]=\"field.debounceTime\"\n        [p-change-on-enter]=\"field.changeOnEnter\"\n        [p-remove-initial-filter]=\"field.removeInitialFilter\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-keydown)=\"field.keydown?.($event)\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        [p-listbox-control-position]=\"field.listboxControlPosition\"\n      >\n      </po-combo>\n    }\n    @if (compareTo(field.control, 'lookup')) {\n      <po-lookup\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        p-field-label=\"label\"\n        p-field-value=\"value\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-clean]=\"field.clean\"\n        [p-columns]=\"field.columns\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-field-label]=\"field.fieldLabel || 'label'\"\n        [p-field-value]=\"field.fieldValue || 'value'\"\n        [p-filter-params]=\"field.params\"\n        [p-filter-service]=\"field.searchService\"\n        [p-auto-focus]=\"field.focus\"\n        [p-auto-height]=\"field.autoHeight\"\n        [p-help]=\"field.help\"\n        [p-field-format]=\"field.format\"\n        [p-infinite-scroll]=\"field.infiniteScroll\"\n        [p-label]=\"field.label\"\n        [p-literals]=\"field.literals\"\n        [p-multiple]=\"field.multiple\"\n        [p-no-autocomplete]=\"field.noAutocomplete\"\n        [p-optional]=\"field.optional\"\n        [p-required]=\"field.required\"\n        [p-field-error-message]=\"field.errorMessage\"\n        [p-error-limit]=\"field.errorLimit\"\n        [p-show-required]=\"field.showRequired\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-change)=\"onChangeField(field)\"\n        [p-placeholder]=\"field.placeholder\"\n        [p-advanced-filters]=\"field.advancedFilters\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-change-visible-columns)=\"field.changeVisibleColumns?.($event)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n        (p-restore-column-manager)=\"field.columnRestoreManager?.($event)\"\n      >\n      </po-lookup>\n    }\n    @if (compareTo(field.control, 'checkboxGroup')) {\n      <po-checkbox-group\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-columns]=\"field.columns || 3\"\n        [p-auto-focus]=\"field.focus\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-help]=\"field.help\"\n        [p-label]=\"field.label\"\n        [p-optional]=\"field.optional\"\n        [p-options]=\"field.options\"\n        [p-required]=\"field.required\"\n        [p-show-required]=\"field.showRequired\"\n        [p-field-error-message]=\"field.errorMessage\"\n        [p-error-limit]=\"field.errorLimit\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-change)=\"onChangeField(field)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n      >\n      </po-checkbox-group>\n    }\n    @if (compareTo(field.control, 'multiselect')) {\n      <po-multiselect\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-auto-focus]=\"field.focus\"\n        [p-auto-height]=\"field.autoHeight\"\n        [p-help]=\"field.help\"\n        [p-label]=\"field.label\"\n        [p-literals]=\"field.literals\"\n        [p-optional]=\"field.optional\"\n        [p-options]=\"field.options\"\n        [p-required]=\"field.required\"\n        [p-field-error-message]=\"field.errorMessage\"\n        [p-error-limit]=\"field.errorLimit\"\n        [p-show-required]=\"field.showRequired\"\n        (p-change)=\"onChangeField(field)\"\n        [p-placeholder]=\"field.placeholder\"\n        [p-field-label]=\"field.fieldLabel\"\n        [p-field-value]=\"field.fieldValue\"\n        [p-filter-service]=\"field.optionsService\"\n        [p-filter-mode]=\"field.filterMode\"\n        [p-debounce-time]=\"field.debounceTime\"\n        [p-sort]=\"field.sort\"\n        [p-placeholder-search]=\"field.placeholderSearch\"\n        [p-hide-search]=\"field.hideSearch\"\n        [p-hide-select-all]=\"field.hideSelectAll\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n        [p-listbox-control-position]=\"field.listboxControlPosition\"\n      >\n      </po-multiselect>\n    }\n    @if (compareTo(field.control, 'textarea')) {\n      <po-textarea\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-auto-focus]=\"field.focus\"\n        [p-help]=\"field.help\"\n        [p-label]=\"field.label\"\n        [p-maxlength]=\"field.maxLength\"\n        [p-minlength]=\"field.minLength\"\n        [p-optional]=\"field.optional\"\n        [p-readonly]=\"field.readonly\"\n        [p-required]=\"field.required\"\n        [p-field-error-message]=\"field.errorMessage\"\n        [p-error-limit]=\"field.errorLimit\"\n        [p-show-required]=\"field.showRequired\"\n        [p-rows]=\"field.rows\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-change)=\"onChangeField(field)\"\n        (p-change-model)=\"onChangeFieldModel(field)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n        [p-placeholder]=\"field.placeholder\"\n      >\n      </po-textarea>\n    }\n    @if (compareTo(field.control, 'password')) {\n      <po-password\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-clean]=\"field.clean\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-error-pattern]=\"field.errorMessage\"\n        [p-error-limit]=\"field.errorLimit\"\n        [p-error-async-properties]=\"field.errorAsyncProperties\"\n        [p-auto-focus]=\"field.focus\"\n        [p-help]=\"field.help\"\n        [p-hide-password-peek]=\"field.hidePasswordPeek\"\n        [p-icon]=\"field.icon\"\n        [p-label]=\"field.label\"\n        [p-maxlength]=\"field.maxLength\"\n        [p-minlength]=\"field.minLength\"\n        [p-no-autocomplete]=\"field.noAutocomplete\"\n        [p-optional]=\"field.optional\"\n        [p-pattern]=\"field.pattern\"\n        [p-readonly]=\"field.readonly\"\n        [p-required]=\"field.required\"\n        [p-required-field-error-message]=\"field.requiredFieldErrorMessage\"\n        [p-show-required]=\"field.showRequired\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-change)=\"onChangeField(field)\"\n        (p-change-model)=\"onChangeFieldModel(field)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n        [p-placeholder]=\"field.placeholder\"\n      >\n      </po-password>\n    }\n    @if (compareTo(field.control, 'upload')) {\n      <po-upload\n        #component\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-auto-upload]=\"field.autoUpload\"\n        [p-directory]=\"field.directory\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-drag-drop]=\"field.dragDrop\"\n        [p-drag-drop-height]=\"field.dragDropHeight\"\n        [p-restrictions]=\"field.restrictions\"\n        [p-form-field]=\"field.formField\"\n        [p-headers]=\"field.headers\"\n        [p-help]=\"field.help\"\n        [p-hide-restrictions-info]=\"field.hideRestrictionsInfo\"\n        [p-hide-select-button]=\"field.hideSelectButton\"\n        [p-hide-send-button]=\"field.hideSendButton\"\n        [p-multiple]=\"field.multiple\"\n        [p-label]=\"field.label\"\n        [p-literals]=\"field.literals\"\n        [name]=\"field.property\"\n        [p-custom-action]=\"field.customAction\"\n        (p-custom-action-click)=\"field.customActionClick($event)\"\n        (p-error)=\"field.onError($event)\"\n        (p-success)=\"field.onSuccess($event)\"\n        (p-upload)=\"field.onUpload($event)\"\n        [p-optional]=\"field.optional\"\n        [p-required]=\"field.required\"\n        [p-show-required]=\"field.showRequired\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-change)=\"onChangeField(field)\"\n        (p-change-model)=\"onChangeFieldModel(field)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n        [p-url]=\"field.url\"\n      >\n      </po-upload>\n    }\n  }\n</ng-template>\n\n<ng-template #poContentContainer let-fields>\n  <po-dynamic-container [p-fields]=\"fields\" [p-content]=\"poContent\"></po-dynamic-container>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: PoDividerComponent, selector: "po-divider" }, { kind: "component", type: PoCheckboxGroupComponent, selector: "po-checkbox-group" }, { kind: "component", type: PoRadioGroupComponent, selector: "po-radio-group", inputs: ["p-label", "p-help"] }, { kind: "component", type: PoDatepickerComponent, selector: "po-datepicker", inputs: ["p-label", "p-help"] }, { kind: "component", type: PoComboComponent, selector: "po-combo" }, { kind: "component", type: PoDecimalComponent, selector: "po-decimal", inputs: ["p-decimals-length", "p-thousand-maxlength", "p-locale", "p-min", "p-max"] }, { kind: "component", type: PoDatepickerRangeComponent, selector: "po-datepicker-range" }, { kind: "component", type: PoInputComponent, selector: "po-input" }, { kind: "component", type: PoLookupComponent, selector: "po-lookup" }, { kind: "component", type: PoMultiselectComponent, selector: "po-multiselect" }, { kind: "component", type: PoNumberComponent, selector: "po-number", inputs: ["p-step", "p-min", "p-max"] }, { kind: "component", type: PoPasswordComponent, selector: "po-password", inputs: ["p-hide-password-peek", "p-no-autocomplete"] }, { kind: "component", type: PoSelectComponent, selector: "po-select", inputs: ["p-readonly", "p-placeholder", "p-options", "p-field-label", "p-field-value", "p-control-value-with-label", "p-size", "p-helper", "p-label-text-wrap"], outputs: ["p-blur", "ngModelChange"] }, { kind: "component", type: PoTextareaComponent, selector: "po-textarea" }, { kind: "component", type: PoUploadComponent, selector: "po-upload" }, { kind: "component", type: PoCheckboxComponent, selector: "po-checkbox" }, { kind: "component", type: PoSwitchComponent, selector: "po-switch", inputs: ["p-value", "p-format-model", "p-hide-label-status", "p-label-position", "p-label-off", "p-label-on", "p-field-error-message", "p-error-limit", "p-invalid-value", "p-size", "p-helper", "p-label-text-wrap"] }, { kind: "component", type: PoDynamicContainerComponent, selector: "po-dynamic-container", inputs: ["p-content", "p-fields"] }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: PoDynamicFormFieldsComponent, isStandalone: false, selector: "po-dynamic-form-fields", providers: [PoDynamicFormValidationService], viewQueries: [{ propertyName: "components", predicate: ["component"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (visibleFields && visibleFields.length > 0) {\n  <div class=\"po-row\" [class.po-dynamic]=\"hasContainers\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        hasContainers ? poContentContainer : poContent;\n        context: { $implicit: hasContainers ? containerFields : visibleFields }\n      \"\n    ></ng-container>\n  </div>\n}\n\n<ng-template #poContent let-fields>\n  @for (field of fields; track trackBy($index, field)) {\n    @if (field?.divider?.trim()) {\n      <po-divider class=\"po-sm-12\" [p-label]=\"field.divider\"> </po-divider>\n    }\n    @if (compareTo(field.control, 'datepicker')) {\n      <po-datepicker\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-clean]=\"field.clean\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-error-pattern]=\"field.errorMessage\"\n        [p-error-limit]=\"field.errorLimit\"\n        [p-error-async]=\"field.errorAsyncFunction\"\n        [p-auto-focus]=\"field.focus\"\n        [p-format]=\"field.format\"\n        [p-help]=\"field.help\"\n        [p-iso-format]=\"field.isoFormat\"\n        [p-label]=\"field.label\"\n        [p-locale]=\"field.locale\"\n        [p-max-date]=\"field.maxValue\"\n        [p-min-date]=\"field.minValue\"\n        [p-no-autocomplete]=\"field.noAutocomplete\"\n        [p-optional]=\"field.optional\"\n        [p-readonly]=\"field.readonly\"\n        [p-required]=\"field.required\"\n        [p-required-field-error-message]=\"field.requiredFieldErrorMessage\"\n        [p-size]=\"field.size || componentsSize\"\n        [p-show-required]=\"field.showRequired\"\n        (p-change)=\"onChangeField(field)\"\n        [p-placeholder]=\"field.placeholder\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n      >\n      </po-datepicker>\n    }\n    @if (compareTo(field.control, 'datepickerrange')) {\n      <po-datepicker-range\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-clean]=\"field.clean\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-auto-focus]=\"field.focus\"\n        [p-help]=\"field.help\"\n        [p-label]=\"field.label\"\n        [p-literals]=\"field.literals\"\n        [p-max-date]=\"field.maxValue\"\n        [p-min-date]=\"field.minValue\"\n        [p-no-autocomplete]=\"field.noAutocomplete\"\n        [p-optional]=\"field.optional\"\n        [p-readonly]=\"field.readonly\"\n        [p-required]=\"field.required\"\n        [p-field-error-message]=\"field.errorMessage\"\n        [p-error-limit]=\"field.errorLimit\"\n        [p-show-required]=\"field.showRequired\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-change)=\"onChangeField(field)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n      >\n      </po-datepicker-range>\n    }\n    @if (compareTo(field.control, 'input')) {\n      <po-input\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-clean]=\"field.clean\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-error-pattern]=\"field.errorMessage\"\n        [p-error-limit]=\"field.errorLimit\"\n        [p-error-async-properties]=\"field.errorAsyncProperties\"\n        [p-auto-focus]=\"field.focus\"\n        [p-help]=\"field.help\"\n        [p-label]=\"field.label\"\n        [p-mask-format-model]=\"field.maskFormatModel\"\n        [p-mask]=\"field.mask\"\n        [p-maxlength]=\"field.maxLength\"\n        [p-minlength]=\"field.minLength\"\n        [p-no-autocomplete]=\"field.noAutocomplete\"\n        [p-optional]=\"field.optional\"\n        [p-pattern]=\"field.pattern\"\n        [p-required]=\"field.required\"\n        [p-required-field-error-message]=\"field.requiredFieldErrorMessage\"\n        [p-show-required]=\"field.showRequired\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-change)=\"onChangeField(field)\"\n        (p-change-model)=\"onChangeFieldModel(field)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n        [p-icon]=\"field.icon\"\n        [p-placeholder]=\"field.placeholder\"\n        [p-readonly]=\"field.readonly\"\n      >\n      </po-input>\n    }\n    @if (compareTo(field.control, 'number')) {\n      <po-number\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-clean]=\"field.clean\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-error-pattern]=\"field.errorMessage\"\n        [p-error-limit]=\"field.errorLimit\"\n        [p-error-async-properties]=\"field.errorAsyncProperties\"\n        [p-auto-focus]=\"field.focus\"\n        [p-help]=\"field.help\"\n        [p-label]=\"field.label\"\n        [p-min]=\"field.minValue\"\n        [p-max]=\"field.maxValue\"\n        [p-maxlength]=\"field.maxLength\"\n        [p-minlength]=\"field.minLength\"\n        [p-no-autocomplete]=\"field.noAutocomplete\"\n        [p-optional]=\"field.optional\"\n        [p-step]=\"field.step\"\n        [p-readonly]=\"field.readonly\"\n        [p-required]=\"field.required\"\n        [p-required-field-error-message]=\"field.requiredFieldErrorMessage\"\n        [p-show-required]=\"field.showRequired\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-change)=\"onChangeField(field)\"\n        (p-change-model)=\"onChangeFieldModel(field)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n        [p-icon]=\"field.icon\"\n        [p-placeholder]=\"field.placeholder\"\n      >\n      </po-number>\n    }\n    @if (compareTo(field.control, 'decimal')) {\n      <po-decimal\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-clean]=\"field.clean\"\n        [p-error-pattern]=\"field.errorMessage\"\n        [p-error-limit]=\"field.errorLimit\"\n        [p-error-async-properties]=\"field.errorAsyncProperties\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-decimals-length]=\"field.decimalsLength\"\n        [p-thousand-maxlength]=\"field.thousandMaxlength\"\n        [p-icon]=\"field.icon\"\n        [p-auto-focus]=\"field.focus\"\n        [p-help]=\"field.help\"\n        [p-label]=\"field.label\"\n        [p-locale]=\"field.locale\"\n        [p-min]=\"field.minValue\"\n        [p-max]=\"field.maxValue\"\n        [p-maxlength]=\"field.maxLength\"\n        [p-minlength]=\"field.minLength\"\n        [p-no-autocomplete]=\"field.noAutocomplete\"\n        [p-optional]=\"field.optional\"\n        [p-readonly]=\"field.readonly\"\n        [p-required]=\"field.required\"\n        [p-required-field-error-message]=\"field.requiredFieldErrorMessage\"\n        [p-show-required]=\"field.showRequired\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-change)=\"onChangeField(field)\"\n        (p-change-model)=\"onChangeFieldModel(field)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n        [p-placeholder]=\"field.placeholder\"\n      >\n      </po-decimal>\n    }\n    @if (compareTo(field.control, 'select')) {\n      <po-select\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-field-label]=\"field.fieldLabel\"\n        [p-field-value]=\"field.fieldValue\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-help]=\"field.help\"\n        [p-label]=\"field.label\"\n        [p-optional]=\"field.optional\"\n        [p-options]=\"field.options\"\n        [p-required]=\"field.required\"\n        [p-field-error-message]=\"field.errorMessage\"\n        [p-error-limit]=\"field.errorLimit\"\n        [p-show-required]=\"field.showRequired\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-change)=\"onChangeField(field)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n        [p-placeholder]=\"field.placeholder\"\n        [p-readonly]=\"field.readonly\"\n      >\n      </po-select>\n    }\n    @if (compareTo(field.control, 'radioGroup')) {\n      <po-radio-group\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-columns]=\"field.columns || 3\"\n        [p-auto-focus]=\"field.focus\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-help]=\"field.help\"\n        [p-label]=\"field.label\"\n        [p-optional]=\"field.optional\"\n        [p-options]=\"field.options\"\n        [p-required]=\"field.required\"\n        [p-field-error-message]=\"field.errorMessage\"\n        [p-error-limit]=\"field.errorLimit\"\n        [p-show-required]=\"field.showRequired\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-change)=\"onChangeField(field)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n      >\n      </po-radio-group>\n    }\n    @if (compareTo(field.control, 'switch')) {\n      <po-switch\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-error-limit]=\"field.errorLimit\"\n        [p-field-error-message]=\"field.errorMessage\"\n        [p-format-model]=\"field.formatModel\"\n        [p-help]=\"field.help\"\n        [p-label]=\"field.label\"\n        [p-label-off]=\"field.booleanFalse\"\n        [p-label-on]=\"field.booleanTrue\"\n        [p-label-position]=\"field.labelPosition\"\n        [p-hide-label-status]=\"field.hideLabelStatus\"\n        [p-invalid-value]=\"field.invalidValue\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-change)=\"onChangeField(field)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n      >\n      </po-switch>\n    }\n    @if (compareTo(field.control, 'checkbox')) {\n      <po-checkbox\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-auto-focus]=\"field.focus\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-help]=\"field.help\"\n        [p-label]=\"field.label\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-change)=\"onChangeField(field)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n      >\n      </po-checkbox>\n    }\n    @if (compareTo(field.control, 'combo')) {\n      <po-combo\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        p-emit-object-value\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-auto-focus]=\"field.focus\"\n        [p-clean]=\"field.clean\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-field-label]=\"field.fieldLabel\"\n        [p-field-value]=\"field.fieldValue\"\n        [p-filter-params]=\"field.params\"\n        [p-filter-service]=\"field.optionsService\"\n        [p-help]=\"field.help\"\n        [p-infinite-scroll]=\"field.infiniteScroll\"\n        [p-infinite-scroll-distance]=\"field.infiniteScrollDistance || 100\"\n        [p-label]=\"field.label\"\n        [p-literals]=\"field.literals\"\n        [p-options]=\"field.options\"\n        [p-optional]=\"field.optional\"\n        [p-sort]=\"field.sort\"\n        [p-required]=\"field.required\"\n        [p-field-error-message]=\"field.errorMessage\"\n        [p-error-limit]=\"field.errorLimit\"\n        [p-show-required]=\"field.showRequired\"\n        (p-change)=\"onChangeField(field, $event)\"\n        [p-icon]=\"field.icon\"\n        [p-placeholder]=\"field.placeholder\"\n        [p-filter-minlength]=\"field.filterMinlength\"\n        [p-filter-mode]=\"field.filterMode\"\n        [p-disabled-init-filter]=\"field.disabledInitFilter\"\n        [p-disabled-tab-filter]=\"field.disabledTabFilter\"\n        [p-debounce-time]=\"field.debounceTime\"\n        [p-change-on-enter]=\"field.changeOnEnter\"\n        [p-remove-initial-filter]=\"field.removeInitialFilter\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-keydown)=\"field.keydown?.($event)\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        [p-listbox-control-position]=\"field.listboxControlPosition\"\n      >\n      </po-combo>\n    }\n    @if (compareTo(field.control, 'lookup')) {\n      <po-lookup\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        p-field-label=\"label\"\n        p-field-value=\"value\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-clean]=\"field.clean\"\n        [p-columns]=\"field.columns\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-field-label]=\"field.fieldLabel || 'label'\"\n        [p-field-value]=\"field.fieldValue || 'value'\"\n        [p-filter-params]=\"field.params\"\n        [p-filter-service]=\"field.searchService\"\n        [p-auto-focus]=\"field.focus\"\n        [p-auto-height]=\"field.autoHeight\"\n        [p-help]=\"field.help\"\n        [p-field-format]=\"field.format\"\n        [p-infinite-scroll]=\"field.infiniteScroll\"\n        [p-label]=\"field.label\"\n        [p-literals]=\"field.literals\"\n        [p-multiple]=\"field.multiple\"\n        [p-no-autocomplete]=\"field.noAutocomplete\"\n        [p-optional]=\"field.optional\"\n        [p-required]=\"field.required\"\n        [p-field-error-message]=\"field.errorMessage\"\n        [p-error-limit]=\"field.errorLimit\"\n        [p-show-required]=\"field.showRequired\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-change)=\"onChangeField(field)\"\n        [p-placeholder]=\"field.placeholder\"\n        [p-advanced-filters]=\"field.advancedFilters\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-change-visible-columns)=\"field.changeVisibleColumns?.($event)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n        (p-restore-column-manager)=\"field.columnRestoreManager?.($event)\"\n      >\n      </po-lookup>\n    }\n    @if (compareTo(field.control, 'checkboxGroup')) {\n      <po-checkbox-group\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-columns]=\"field.columns || 3\"\n        [p-auto-focus]=\"field.focus\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-help]=\"field.help\"\n        [p-label]=\"field.label\"\n        [p-optional]=\"field.optional\"\n        [p-options]=\"field.options\"\n        [p-required]=\"field.required\"\n        [p-show-required]=\"field.showRequired\"\n        [p-field-error-message]=\"field.errorMessage\"\n        [p-error-limit]=\"field.errorLimit\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-change)=\"onChangeField(field)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n      >\n      </po-checkbox-group>\n    }\n    @if (compareTo(field.control, 'multiselect')) {\n      <po-multiselect\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-auto-focus]=\"field.focus\"\n        [p-auto-height]=\"field.autoHeight\"\n        [p-help]=\"field.help\"\n        [p-label]=\"field.label\"\n        [p-literals]=\"field.literals\"\n        [p-optional]=\"field.optional\"\n        [p-options]=\"field.options\"\n        [p-required]=\"field.required\"\n        [p-field-error-message]=\"field.errorMessage\"\n        [p-error-limit]=\"field.errorLimit\"\n        [p-show-required]=\"field.showRequired\"\n        (p-change)=\"onChangeField(field)\"\n        [p-placeholder]=\"field.placeholder\"\n        [p-field-label]=\"field.fieldLabel\"\n        [p-field-value]=\"field.fieldValue\"\n        [p-filter-service]=\"field.optionsService\"\n        [p-filter-mode]=\"field.filterMode\"\n        [p-debounce-time]=\"field.debounceTime\"\n        [p-sort]=\"field.sort\"\n        [p-placeholder-search]=\"field.placeholderSearch\"\n        [p-hide-search]=\"field.hideSearch\"\n        [p-hide-select-all]=\"field.hideSelectAll\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n        [p-listbox-control-position]=\"field.listboxControlPosition\"\n      >\n      </po-multiselect>\n    }\n    @if (compareTo(field.control, 'textarea')) {\n      <po-textarea\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-auto-focus]=\"field.focus\"\n        [p-help]=\"field.help\"\n        [p-label]=\"field.label\"\n        [p-maxlength]=\"field.maxLength\"\n        [p-minlength]=\"field.minLength\"\n        [p-optional]=\"field.optional\"\n        [p-readonly]=\"field.readonly\"\n        [p-required]=\"field.required\"\n        [p-field-error-message]=\"field.errorMessage\"\n        [p-error-limit]=\"field.errorLimit\"\n        [p-show-required]=\"field.showRequired\"\n        [p-rows]=\"field.rows\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-change)=\"onChangeField(field)\"\n        (p-change-model)=\"onChangeFieldModel(field)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n        [p-placeholder]=\"field.placeholder\"\n      >\n      </po-textarea>\n    }\n    @if (compareTo(field.control, 'password')) {\n      <po-password\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-clean]=\"field.clean\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-error-pattern]=\"field.errorMessage\"\n        [p-error-limit]=\"field.errorLimit\"\n        [p-error-async-properties]=\"field.errorAsyncProperties\"\n        [p-auto-focus]=\"field.focus\"\n        [p-help]=\"field.help\"\n        [p-hide-password-peek]=\"field.hidePasswordPeek\"\n        [p-icon]=\"field.icon\"\n        [p-label]=\"field.label\"\n        [p-maxlength]=\"field.maxLength\"\n        [p-minlength]=\"field.minLength\"\n        [p-no-autocomplete]=\"field.noAutocomplete\"\n        [p-optional]=\"field.optional\"\n        [p-pattern]=\"field.pattern\"\n        [p-readonly]=\"field.readonly\"\n        [p-required]=\"field.required\"\n        [p-required-field-error-message]=\"field.requiredFieldErrorMessage\"\n        [p-show-required]=\"field.showRequired\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-change)=\"onChangeField(field)\"\n        (p-change-model)=\"onChangeFieldModel(field)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n        [p-placeholder]=\"field.placeholder\"\n      >\n      </po-password>\n    }\n    @if (compareTo(field.control, 'upload')) {\n      <po-upload\n        #component\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-auto-upload]=\"field.autoUpload\"\n        [p-directory]=\"field.directory\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-drag-drop]=\"field.dragDrop\"\n        [p-drag-drop-height]=\"field.dragDropHeight\"\n        [p-restrictions]=\"field.restrictions\"\n        [p-form-field]=\"field.formField\"\n        [p-headers]=\"field.headers\"\n        [p-help]=\"field.help\"\n        [p-hide-restrictions-info]=\"field.hideRestrictionsInfo\"\n        [p-hide-select-button]=\"field.hideSelectButton\"\n        [p-hide-send-button]=\"field.hideSendButton\"\n        [p-multiple]=\"field.multiple\"\n        [p-label]=\"field.label\"\n        [p-literals]=\"field.literals\"\n        [name]=\"field.property\"\n        [p-custom-action]=\"field.customAction\"\n        (p-custom-action-click)=\"field.customActionClick($event)\"\n        (p-error)=\"field.onError($event)\"\n        (p-success)=\"field.onSuccess($event)\"\n        (p-upload)=\"field.onUpload($event)\"\n        [p-optional]=\"field.optional\"\n        [p-required]=\"field.required\"\n        [p-show-required]=\"field.showRequired\"\n        [p-show-thumbnail]=\"field.showThumbnail ?? true\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-change)=\"onChangeField(field)\"\n        (p-change-model)=\"onChangeFieldModel(field)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n        [p-url]=\"field.url\"\n      >\n      </po-upload>\n    }\n  }\n</ng-template>\n\n<ng-template #poContentContainer let-fields>\n  <po-dynamic-container [p-fields]=\"fields\" [p-content]=\"poContent\"></po-dynamic-container>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: PoDividerComponent, selector: "po-divider" }, { kind: "component", type: PoCheckboxGroupComponent, selector: "po-checkbox-group" }, { kind: "component", type: PoRadioGroupComponent, selector: "po-radio-group", inputs: ["p-label", "p-help"] }, { kind: "component", type: PoDatepickerComponent, selector: "po-datepicker", inputs: ["p-label", "p-help"] }, { kind: "component", type: PoComboComponent, selector: "po-combo" }, { kind: "component", type: PoDecimalComponent, selector: "po-decimal", inputs: ["p-decimals-length", "p-thousand-maxlength", "p-locale", "p-min", "p-max"] }, { kind: "component", type: PoDatepickerRangeComponent, selector: "po-datepicker-range" }, { kind: "component", type: PoInputComponent, selector: "po-input" }, { kind: "component", type: PoLookupComponent, selector: "po-lookup" }, { kind: "component", type: PoMultiselectComponent, selector: "po-multiselect" }, { kind: "component", type: PoNumberComponent, selector: "po-number", inputs: ["p-step", "p-min", "p-max"] }, { kind: "component", type: PoPasswordComponent, selector: "po-password", inputs: ["p-hide-password-peek", "p-no-autocomplete"] }, { kind: "component", type: PoSelectComponent, selector: "po-select", inputs: ["p-readonly", "p-placeholder", "p-options", "p-field-label", "p-field-value", "p-control-value-with-label", "p-size", "p-helper", "p-label-text-wrap"], outputs: ["p-blur", "ngModelChange"] }, { kind: "component", type: PoTextareaComponent, selector: "po-textarea" }, { kind: "component", type: PoUploadComponent, selector: "po-upload" }, { kind: "component", type: PoCheckboxComponent, selector: "po-checkbox" }, { kind: "component", type: PoSwitchComponent, selector: "po-switch", inputs: ["p-value", "p-format-model", "p-hide-label-status", "p-label-position", "p-label-off", "p-label-on", "p-field-error-message", "p-error-limit", "p-invalid-value", "p-size", "p-helper", "p-label-text-wrap"] }, { kind: "component", type: PoDynamicContainerComponent, selector: "po-dynamic-container", inputs: ["p-content", "p-fields"] }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PoDynamicFormFieldsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'po-dynamic-form-fields', viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], providers: [PoDynamicFormValidationService], standalone: false, template: "@if (visibleFields && visibleFields.length > 0) {\n  <div class=\"po-row\" [class.po-dynamic]=\"hasContainers\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        hasContainers ? poContentContainer : poContent;\n        context: { $implicit: hasContainers ? containerFields : visibleFields }\n      \"\n    ></ng-container>\n  </div>\n}\n\n<ng-template #poContent let-fields>\n  @for (field of fields; track trackBy($index, field)) {\n    @if (field?.divider?.trim()) {\n      <po-divider class=\"po-sm-12\" [p-label]=\"field.divider\"> </po-divider>\n    }\n    @if (compareTo(field.control, 'datepicker')) {\n      <po-datepicker\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-clean]=\"field.clean\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-error-pattern]=\"field.errorMessage\"\n        [p-error-limit]=\"field.errorLimit\"\n        [p-error-async]=\"field.errorAsyncFunction\"\n        [p-auto-focus]=\"field.focus\"\n        [p-format]=\"field.format\"\n        [p-help]=\"field.help\"\n        [p-iso-format]=\"field.isoFormat\"\n        [p-label]=\"field.label\"\n        [p-locale]=\"field.locale\"\n        [p-max-date]=\"field.maxValue\"\n        [p-min-date]=\"field.minValue\"\n        [p-no-autocomplete]=\"field.noAutocomplete\"\n        [p-optional]=\"field.optional\"\n        [p-readonly]=\"field.readonly\"\n        [p-required]=\"field.required\"\n        [p-required-field-error-message]=\"field.requiredFieldErrorMessage\"\n        [p-size]=\"field.size || componentsSize\"\n        [p-show-required]=\"field.showRequired\"\n        (p-change)=\"onChangeField(field)\"\n        [p-placeholder]=\"field.placeholder\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n      >\n      </po-datepicker>\n    }\n    @if (compareTo(field.control, 'datepickerrange')) {\n      <po-datepicker-range\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-clean]=\"field.clean\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-auto-focus]=\"field.focus\"\n        [p-help]=\"field.help\"\n        [p-label]=\"field.label\"\n        [p-literals]=\"field.literals\"\n        [p-max-date]=\"field.maxValue\"\n        [p-min-date]=\"field.minValue\"\n        [p-no-autocomplete]=\"field.noAutocomplete\"\n        [p-optional]=\"field.optional\"\n        [p-readonly]=\"field.readonly\"\n        [p-required]=\"field.required\"\n        [p-field-error-message]=\"field.errorMessage\"\n        [p-error-limit]=\"field.errorLimit\"\n        [p-show-required]=\"field.showRequired\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-change)=\"onChangeField(field)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n      >\n      </po-datepicker-range>\n    }\n    @if (compareTo(field.control, 'input')) {\n      <po-input\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-clean]=\"field.clean\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-error-pattern]=\"field.errorMessage\"\n        [p-error-limit]=\"field.errorLimit\"\n        [p-error-async-properties]=\"field.errorAsyncProperties\"\n        [p-auto-focus]=\"field.focus\"\n        [p-help]=\"field.help\"\n        [p-label]=\"field.label\"\n        [p-mask-format-model]=\"field.maskFormatModel\"\n        [p-mask]=\"field.mask\"\n        [p-maxlength]=\"field.maxLength\"\n        [p-minlength]=\"field.minLength\"\n        [p-no-autocomplete]=\"field.noAutocomplete\"\n        [p-optional]=\"field.optional\"\n        [p-pattern]=\"field.pattern\"\n        [p-required]=\"field.required\"\n        [p-required-field-error-message]=\"field.requiredFieldErrorMessage\"\n        [p-show-required]=\"field.showRequired\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-change)=\"onChangeField(field)\"\n        (p-change-model)=\"onChangeFieldModel(field)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n        [p-icon]=\"field.icon\"\n        [p-placeholder]=\"field.placeholder\"\n        [p-readonly]=\"field.readonly\"\n      >\n      </po-input>\n    }\n    @if (compareTo(field.control, 'number')) {\n      <po-number\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-clean]=\"field.clean\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-error-pattern]=\"field.errorMessage\"\n        [p-error-limit]=\"field.errorLimit\"\n        [p-error-async-properties]=\"field.errorAsyncProperties\"\n        [p-auto-focus]=\"field.focus\"\n        [p-help]=\"field.help\"\n        [p-label]=\"field.label\"\n        [p-min]=\"field.minValue\"\n        [p-max]=\"field.maxValue\"\n        [p-maxlength]=\"field.maxLength\"\n        [p-minlength]=\"field.minLength\"\n        [p-no-autocomplete]=\"field.noAutocomplete\"\n        [p-optional]=\"field.optional\"\n        [p-step]=\"field.step\"\n        [p-readonly]=\"field.readonly\"\n        [p-required]=\"field.required\"\n        [p-required-field-error-message]=\"field.requiredFieldErrorMessage\"\n        [p-show-required]=\"field.showRequired\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-change)=\"onChangeField(field)\"\n        (p-change-model)=\"onChangeFieldModel(field)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n        [p-icon]=\"field.icon\"\n        [p-placeholder]=\"field.placeholder\"\n      >\n      </po-number>\n    }\n    @if (compareTo(field.control, 'decimal')) {\n      <po-decimal\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-clean]=\"field.clean\"\n        [p-error-pattern]=\"field.errorMessage\"\n        [p-error-limit]=\"field.errorLimit\"\n        [p-error-async-properties]=\"field.errorAsyncProperties\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-decimals-length]=\"field.decimalsLength\"\n        [p-thousand-maxlength]=\"field.thousandMaxlength\"\n        [p-icon]=\"field.icon\"\n        [p-auto-focus]=\"field.focus\"\n        [p-help]=\"field.help\"\n        [p-label]=\"field.label\"\n        [p-locale]=\"field.locale\"\n        [p-min]=\"field.minValue\"\n        [p-max]=\"field.maxValue\"\n        [p-maxlength]=\"field.maxLength\"\n        [p-minlength]=\"field.minLength\"\n        [p-no-autocomplete]=\"field.noAutocomplete\"\n        [p-optional]=\"field.optional\"\n        [p-readonly]=\"field.readonly\"\n        [p-required]=\"field.required\"\n        [p-required-field-error-message]=\"field.requiredFieldErrorMessage\"\n        [p-show-required]=\"field.showRequired\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-change)=\"onChangeField(field)\"\n        (p-change-model)=\"onChangeFieldModel(field)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n        [p-placeholder]=\"field.placeholder\"\n      >\n      </po-decimal>\n    }\n    @if (compareTo(field.control, 'select')) {\n      <po-select\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-field-label]=\"field.fieldLabel\"\n        [p-field-value]=\"field.fieldValue\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-help]=\"field.help\"\n        [p-label]=\"field.label\"\n        [p-optional]=\"field.optional\"\n        [p-options]=\"field.options\"\n        [p-required]=\"field.required\"\n        [p-field-error-message]=\"field.errorMessage\"\n        [p-error-limit]=\"field.errorLimit\"\n        [p-show-required]=\"field.showRequired\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-change)=\"onChangeField(field)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n        [p-placeholder]=\"field.placeholder\"\n        [p-readonly]=\"field.readonly\"\n      >\n      </po-select>\n    }\n    @if (compareTo(field.control, 'radioGroup')) {\n      <po-radio-group\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-columns]=\"field.columns || 3\"\n        [p-auto-focus]=\"field.focus\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-help]=\"field.help\"\n        [p-label]=\"field.label\"\n        [p-optional]=\"field.optional\"\n        [p-options]=\"field.options\"\n        [p-required]=\"field.required\"\n        [p-field-error-message]=\"field.errorMessage\"\n        [p-error-limit]=\"field.errorLimit\"\n        [p-show-required]=\"field.showRequired\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-change)=\"onChangeField(field)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n      >\n      </po-radio-group>\n    }\n    @if (compareTo(field.control, 'switch')) {\n      <po-switch\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-error-limit]=\"field.errorLimit\"\n        [p-field-error-message]=\"field.errorMessage\"\n        [p-format-model]=\"field.formatModel\"\n        [p-help]=\"field.help\"\n        [p-label]=\"field.label\"\n        [p-label-off]=\"field.booleanFalse\"\n        [p-label-on]=\"field.booleanTrue\"\n        [p-label-position]=\"field.labelPosition\"\n        [p-hide-label-status]=\"field.hideLabelStatus\"\n        [p-invalid-value]=\"field.invalidValue\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-change)=\"onChangeField(field)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n      >\n      </po-switch>\n    }\n    @if (compareTo(field.control, 'checkbox')) {\n      <po-checkbox\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-auto-focus]=\"field.focus\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-help]=\"field.help\"\n        [p-label]=\"field.label\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-change)=\"onChangeField(field)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n      >\n      </po-checkbox>\n    }\n    @if (compareTo(field.control, 'combo')) {\n      <po-combo\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        p-emit-object-value\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-auto-focus]=\"field.focus\"\n        [p-clean]=\"field.clean\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-field-label]=\"field.fieldLabel\"\n        [p-field-value]=\"field.fieldValue\"\n        [p-filter-params]=\"field.params\"\n        [p-filter-service]=\"field.optionsService\"\n        [p-help]=\"field.help\"\n        [p-infinite-scroll]=\"field.infiniteScroll\"\n        [p-infinite-scroll-distance]=\"field.infiniteScrollDistance || 100\"\n        [p-label]=\"field.label\"\n        [p-literals]=\"field.literals\"\n        [p-options]=\"field.options\"\n        [p-optional]=\"field.optional\"\n        [p-sort]=\"field.sort\"\n        [p-required]=\"field.required\"\n        [p-field-error-message]=\"field.errorMessage\"\n        [p-error-limit]=\"field.errorLimit\"\n        [p-show-required]=\"field.showRequired\"\n        (p-change)=\"onChangeField(field, $event)\"\n        [p-icon]=\"field.icon\"\n        [p-placeholder]=\"field.placeholder\"\n        [p-filter-minlength]=\"field.filterMinlength\"\n        [p-filter-mode]=\"field.filterMode\"\n        [p-disabled-init-filter]=\"field.disabledInitFilter\"\n        [p-disabled-tab-filter]=\"field.disabledTabFilter\"\n        [p-debounce-time]=\"field.debounceTime\"\n        [p-change-on-enter]=\"field.changeOnEnter\"\n        [p-remove-initial-filter]=\"field.removeInitialFilter\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-keydown)=\"field.keydown?.($event)\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        [p-listbox-control-position]=\"field.listboxControlPosition\"\n      >\n      </po-combo>\n    }\n    @if (compareTo(field.control, 'lookup')) {\n      <po-lookup\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        p-field-label=\"label\"\n        p-field-value=\"value\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-clean]=\"field.clean\"\n        [p-columns]=\"field.columns\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-field-label]=\"field.fieldLabel || 'label'\"\n        [p-field-value]=\"field.fieldValue || 'value'\"\n        [p-filter-params]=\"field.params\"\n        [p-filter-service]=\"field.searchService\"\n        [p-auto-focus]=\"field.focus\"\n        [p-auto-height]=\"field.autoHeight\"\n        [p-help]=\"field.help\"\n        [p-field-format]=\"field.format\"\n        [p-infinite-scroll]=\"field.infiniteScroll\"\n        [p-label]=\"field.label\"\n        [p-literals]=\"field.literals\"\n        [p-multiple]=\"field.multiple\"\n        [p-no-autocomplete]=\"field.noAutocomplete\"\n        [p-optional]=\"field.optional\"\n        [p-required]=\"field.required\"\n        [p-field-error-message]=\"field.errorMessage\"\n        [p-error-limit]=\"field.errorLimit\"\n        [p-show-required]=\"field.showRequired\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-change)=\"onChangeField(field)\"\n        [p-placeholder]=\"field.placeholder\"\n        [p-advanced-filters]=\"field.advancedFilters\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-change-visible-columns)=\"field.changeVisibleColumns?.($event)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n        (p-restore-column-manager)=\"field.columnRestoreManager?.($event)\"\n      >\n      </po-lookup>\n    }\n    @if (compareTo(field.control, 'checkboxGroup')) {\n      <po-checkbox-group\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-columns]=\"field.columns || 3\"\n        [p-auto-focus]=\"field.focus\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-help]=\"field.help\"\n        [p-label]=\"field.label\"\n        [p-optional]=\"field.optional\"\n        [p-options]=\"field.options\"\n        [p-required]=\"field.required\"\n        [p-show-required]=\"field.showRequired\"\n        [p-field-error-message]=\"field.errorMessage\"\n        [p-error-limit]=\"field.errorLimit\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-change)=\"onChangeField(field)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n      >\n      </po-checkbox-group>\n    }\n    @if (compareTo(field.control, 'multiselect')) {\n      <po-multiselect\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-auto-focus]=\"field.focus\"\n        [p-auto-height]=\"field.autoHeight\"\n        [p-help]=\"field.help\"\n        [p-label]=\"field.label\"\n        [p-literals]=\"field.literals\"\n        [p-optional]=\"field.optional\"\n        [p-options]=\"field.options\"\n        [p-required]=\"field.required\"\n        [p-field-error-message]=\"field.errorMessage\"\n        [p-error-limit]=\"field.errorLimit\"\n        [p-show-required]=\"field.showRequired\"\n        (p-change)=\"onChangeField(field)\"\n        [p-placeholder]=\"field.placeholder\"\n        [p-field-label]=\"field.fieldLabel\"\n        [p-field-value]=\"field.fieldValue\"\n        [p-filter-service]=\"field.optionsService\"\n        [p-filter-mode]=\"field.filterMode\"\n        [p-debounce-time]=\"field.debounceTime\"\n        [p-sort]=\"field.sort\"\n        [p-placeholder-search]=\"field.placeholderSearch\"\n        [p-hide-search]=\"field.hideSearch\"\n        [p-hide-select-all]=\"field.hideSelectAll\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n        [p-listbox-control-position]=\"field.listboxControlPosition\"\n      >\n      </po-multiselect>\n    }\n    @if (compareTo(field.control, 'textarea')) {\n      <po-textarea\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-auto-focus]=\"field.focus\"\n        [p-help]=\"field.help\"\n        [p-label]=\"field.label\"\n        [p-maxlength]=\"field.maxLength\"\n        [p-minlength]=\"field.minLength\"\n        [p-optional]=\"field.optional\"\n        [p-readonly]=\"field.readonly\"\n        [p-required]=\"field.required\"\n        [p-field-error-message]=\"field.errorMessage\"\n        [p-error-limit]=\"field.errorLimit\"\n        [p-show-required]=\"field.showRequired\"\n        [p-rows]=\"field.rows\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-change)=\"onChangeField(field)\"\n        (p-change-model)=\"onChangeFieldModel(field)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n        [p-placeholder]=\"field.placeholder\"\n      >\n      </po-textarea>\n    }\n    @if (compareTo(field.control, 'password')) {\n      <po-password\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-clean]=\"field.clean\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-error-pattern]=\"field.errorMessage\"\n        [p-error-limit]=\"field.errorLimit\"\n        [p-error-async-properties]=\"field.errorAsyncProperties\"\n        [p-auto-focus]=\"field.focus\"\n        [p-help]=\"field.help\"\n        [p-hide-password-peek]=\"field.hidePasswordPeek\"\n        [p-icon]=\"field.icon\"\n        [p-label]=\"field.label\"\n        [p-maxlength]=\"field.maxLength\"\n        [p-minlength]=\"field.minLength\"\n        [p-no-autocomplete]=\"field.noAutocomplete\"\n        [p-optional]=\"field.optional\"\n        [p-pattern]=\"field.pattern\"\n        [p-readonly]=\"field.readonly\"\n        [p-required]=\"field.required\"\n        [p-required-field-error-message]=\"field.requiredFieldErrorMessage\"\n        [p-show-required]=\"field.showRequired\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-change)=\"onChangeField(field)\"\n        (p-change-model)=\"onChangeFieldModel(field)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n        [p-placeholder]=\"field.placeholder\"\n      >\n      </po-password>\n    }\n    @if (compareTo(field.control, 'upload')) {\n      <po-upload\n        #component\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-auto-upload]=\"field.autoUpload\"\n        [p-directory]=\"field.directory\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-drag-drop]=\"field.dragDrop\"\n        [p-drag-drop-height]=\"field.dragDropHeight\"\n        [p-restrictions]=\"field.restrictions\"\n        [p-form-field]=\"field.formField\"\n        [p-headers]=\"field.headers\"\n        [p-help]=\"field.help\"\n        [p-hide-restrictions-info]=\"field.hideRestrictionsInfo\"\n        [p-hide-select-button]=\"field.hideSelectButton\"\n        [p-hide-send-button]=\"field.hideSendButton\"\n        [p-multiple]=\"field.multiple\"\n        [p-label]=\"field.label\"\n        [p-literals]=\"field.literals\"\n        [name]=\"field.property\"\n        [p-custom-action]=\"field.customAction\"\n        (p-custom-action-click)=\"field.customActionClick($event)\"\n        (p-error)=\"field.onError($event)\"\n        (p-success)=\"field.onSuccess($event)\"\n        (p-upload)=\"field.onUpload($event)\"\n        [p-optional]=\"field.optional\"\n        [p-required]=\"field.required\"\n        [p-show-required]=\"field.showRequired\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-change)=\"onChangeField(field)\"\n        (p-change-model)=\"onChangeFieldModel(field)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n        [p-url]=\"field.url\"\n      >\n      </po-upload>\n    }\n  }\n</ng-template>\n\n<ng-template #poContentContainer let-fields>\n  <po-dynamic-container [p-fields]=\"fields\" [p-content]=\"poContent\"></po-dynamic-container>\n</ng-template>\n" }]
+            args: [{ selector: 'po-dynamic-form-fields', viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], providers: [PoDynamicFormValidationService], standalone: false, template: "@if (visibleFields && visibleFields.length > 0) {\n  <div class=\"po-row\" [class.po-dynamic]=\"hasContainers\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        hasContainers ? poContentContainer : poContent;\n        context: { $implicit: hasContainers ? containerFields : visibleFields }\n      \"\n    ></ng-container>\n  </div>\n}\n\n<ng-template #poContent let-fields>\n  @for (field of fields; track trackBy($index, field)) {\n    @if (field?.divider?.trim()) {\n      <po-divider class=\"po-sm-12\" [p-label]=\"field.divider\"> </po-divider>\n    }\n    @if (compareTo(field.control, 'datepicker')) {\n      <po-datepicker\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-clean]=\"field.clean\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-error-pattern]=\"field.errorMessage\"\n        [p-error-limit]=\"field.errorLimit\"\n        [p-error-async]=\"field.errorAsyncFunction\"\n        [p-auto-focus]=\"field.focus\"\n        [p-format]=\"field.format\"\n        [p-help]=\"field.help\"\n        [p-iso-format]=\"field.isoFormat\"\n        [p-label]=\"field.label\"\n        [p-locale]=\"field.locale\"\n        [p-max-date]=\"field.maxValue\"\n        [p-min-date]=\"field.minValue\"\n        [p-no-autocomplete]=\"field.noAutocomplete\"\n        [p-optional]=\"field.optional\"\n        [p-readonly]=\"field.readonly\"\n        [p-required]=\"field.required\"\n        [p-required-field-error-message]=\"field.requiredFieldErrorMessage\"\n        [p-size]=\"field.size || componentsSize\"\n        [p-show-required]=\"field.showRequired\"\n        (p-change)=\"onChangeField(field)\"\n        [p-placeholder]=\"field.placeholder\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n      >\n      </po-datepicker>\n    }\n    @if (compareTo(field.control, 'datepickerrange')) {\n      <po-datepicker-range\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-clean]=\"field.clean\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-auto-focus]=\"field.focus\"\n        [p-help]=\"field.help\"\n        [p-label]=\"field.label\"\n        [p-literals]=\"field.literals\"\n        [p-max-date]=\"field.maxValue\"\n        [p-min-date]=\"field.minValue\"\n        [p-no-autocomplete]=\"field.noAutocomplete\"\n        [p-optional]=\"field.optional\"\n        [p-readonly]=\"field.readonly\"\n        [p-required]=\"field.required\"\n        [p-field-error-message]=\"field.errorMessage\"\n        [p-error-limit]=\"field.errorLimit\"\n        [p-show-required]=\"field.showRequired\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-change)=\"onChangeField(field)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n      >\n      </po-datepicker-range>\n    }\n    @if (compareTo(field.control, 'input')) {\n      <po-input\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-clean]=\"field.clean\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-error-pattern]=\"field.errorMessage\"\n        [p-error-limit]=\"field.errorLimit\"\n        [p-error-async-properties]=\"field.errorAsyncProperties\"\n        [p-auto-focus]=\"field.focus\"\n        [p-help]=\"field.help\"\n        [p-label]=\"field.label\"\n        [p-mask-format-model]=\"field.maskFormatModel\"\n        [p-mask]=\"field.mask\"\n        [p-maxlength]=\"field.maxLength\"\n        [p-minlength]=\"field.minLength\"\n        [p-no-autocomplete]=\"field.noAutocomplete\"\n        [p-optional]=\"field.optional\"\n        [p-pattern]=\"field.pattern\"\n        [p-required]=\"field.required\"\n        [p-required-field-error-message]=\"field.requiredFieldErrorMessage\"\n        [p-show-required]=\"field.showRequired\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-change)=\"onChangeField(field)\"\n        (p-change-model)=\"onChangeFieldModel(field)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n        [p-icon]=\"field.icon\"\n        [p-placeholder]=\"field.placeholder\"\n        [p-readonly]=\"field.readonly\"\n      >\n      </po-input>\n    }\n    @if (compareTo(field.control, 'number')) {\n      <po-number\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-clean]=\"field.clean\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-error-pattern]=\"field.errorMessage\"\n        [p-error-limit]=\"field.errorLimit\"\n        [p-error-async-properties]=\"field.errorAsyncProperties\"\n        [p-auto-focus]=\"field.focus\"\n        [p-help]=\"field.help\"\n        [p-label]=\"field.label\"\n        [p-min]=\"field.minValue\"\n        [p-max]=\"field.maxValue\"\n        [p-maxlength]=\"field.maxLength\"\n        [p-minlength]=\"field.minLength\"\n        [p-no-autocomplete]=\"field.noAutocomplete\"\n        [p-optional]=\"field.optional\"\n        [p-step]=\"field.step\"\n        [p-readonly]=\"field.readonly\"\n        [p-required]=\"field.required\"\n        [p-required-field-error-message]=\"field.requiredFieldErrorMessage\"\n        [p-show-required]=\"field.showRequired\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-change)=\"onChangeField(field)\"\n        (p-change-model)=\"onChangeFieldModel(field)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n        [p-icon]=\"field.icon\"\n        [p-placeholder]=\"field.placeholder\"\n      >\n      </po-number>\n    }\n    @if (compareTo(field.control, 'decimal')) {\n      <po-decimal\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-clean]=\"field.clean\"\n        [p-error-pattern]=\"field.errorMessage\"\n        [p-error-limit]=\"field.errorLimit\"\n        [p-error-async-properties]=\"field.errorAsyncProperties\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-decimals-length]=\"field.decimalsLength\"\n        [p-thousand-maxlength]=\"field.thousandMaxlength\"\n        [p-icon]=\"field.icon\"\n        [p-auto-focus]=\"field.focus\"\n        [p-help]=\"field.help\"\n        [p-label]=\"field.label\"\n        [p-locale]=\"field.locale\"\n        [p-min]=\"field.minValue\"\n        [p-max]=\"field.maxValue\"\n        [p-maxlength]=\"field.maxLength\"\n        [p-minlength]=\"field.minLength\"\n        [p-no-autocomplete]=\"field.noAutocomplete\"\n        [p-optional]=\"field.optional\"\n        [p-readonly]=\"field.readonly\"\n        [p-required]=\"field.required\"\n        [p-required-field-error-message]=\"field.requiredFieldErrorMessage\"\n        [p-show-required]=\"field.showRequired\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-change)=\"onChangeField(field)\"\n        (p-change-model)=\"onChangeFieldModel(field)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n        [p-placeholder]=\"field.placeholder\"\n      >\n      </po-decimal>\n    }\n    @if (compareTo(field.control, 'select')) {\n      <po-select\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-field-label]=\"field.fieldLabel\"\n        [p-field-value]=\"field.fieldValue\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-help]=\"field.help\"\n        [p-label]=\"field.label\"\n        [p-optional]=\"field.optional\"\n        [p-options]=\"field.options\"\n        [p-required]=\"field.required\"\n        [p-field-error-message]=\"field.errorMessage\"\n        [p-error-limit]=\"field.errorLimit\"\n        [p-show-required]=\"field.showRequired\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-change)=\"onChangeField(field)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n        [p-placeholder]=\"field.placeholder\"\n        [p-readonly]=\"field.readonly\"\n      >\n      </po-select>\n    }\n    @if (compareTo(field.control, 'radioGroup')) {\n      <po-radio-group\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-columns]=\"field.columns || 3\"\n        [p-auto-focus]=\"field.focus\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-help]=\"field.help\"\n        [p-label]=\"field.label\"\n        [p-optional]=\"field.optional\"\n        [p-options]=\"field.options\"\n        [p-required]=\"field.required\"\n        [p-field-error-message]=\"field.errorMessage\"\n        [p-error-limit]=\"field.errorLimit\"\n        [p-show-required]=\"field.showRequired\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-change)=\"onChangeField(field)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n      >\n      </po-radio-group>\n    }\n    @if (compareTo(field.control, 'switch')) {\n      <po-switch\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-error-limit]=\"field.errorLimit\"\n        [p-field-error-message]=\"field.errorMessage\"\n        [p-format-model]=\"field.formatModel\"\n        [p-help]=\"field.help\"\n        [p-label]=\"field.label\"\n        [p-label-off]=\"field.booleanFalse\"\n        [p-label-on]=\"field.booleanTrue\"\n        [p-label-position]=\"field.labelPosition\"\n        [p-hide-label-status]=\"field.hideLabelStatus\"\n        [p-invalid-value]=\"field.invalidValue\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-change)=\"onChangeField(field)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n      >\n      </po-switch>\n    }\n    @if (compareTo(field.control, 'checkbox')) {\n      <po-checkbox\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-auto-focus]=\"field.focus\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-help]=\"field.help\"\n        [p-label]=\"field.label\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-change)=\"onChangeField(field)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n      >\n      </po-checkbox>\n    }\n    @if (compareTo(field.control, 'combo')) {\n      <po-combo\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        p-emit-object-value\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-auto-focus]=\"field.focus\"\n        [p-clean]=\"field.clean\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-field-label]=\"field.fieldLabel\"\n        [p-field-value]=\"field.fieldValue\"\n        [p-filter-params]=\"field.params\"\n        [p-filter-service]=\"field.optionsService\"\n        [p-help]=\"field.help\"\n        [p-infinite-scroll]=\"field.infiniteScroll\"\n        [p-infinite-scroll-distance]=\"field.infiniteScrollDistance || 100\"\n        [p-label]=\"field.label\"\n        [p-literals]=\"field.literals\"\n        [p-options]=\"field.options\"\n        [p-optional]=\"field.optional\"\n        [p-sort]=\"field.sort\"\n        [p-required]=\"field.required\"\n        [p-field-error-message]=\"field.errorMessage\"\n        [p-error-limit]=\"field.errorLimit\"\n        [p-show-required]=\"field.showRequired\"\n        (p-change)=\"onChangeField(field, $event)\"\n        [p-icon]=\"field.icon\"\n        [p-placeholder]=\"field.placeholder\"\n        [p-filter-minlength]=\"field.filterMinlength\"\n        [p-filter-mode]=\"field.filterMode\"\n        [p-disabled-init-filter]=\"field.disabledInitFilter\"\n        [p-disabled-tab-filter]=\"field.disabledTabFilter\"\n        [p-debounce-time]=\"field.debounceTime\"\n        [p-change-on-enter]=\"field.changeOnEnter\"\n        [p-remove-initial-filter]=\"field.removeInitialFilter\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-keydown)=\"field.keydown?.($event)\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        [p-listbox-control-position]=\"field.listboxControlPosition\"\n      >\n      </po-combo>\n    }\n    @if (compareTo(field.control, 'lookup')) {\n      <po-lookup\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        p-field-label=\"label\"\n        p-field-value=\"value\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-clean]=\"field.clean\"\n        [p-columns]=\"field.columns\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-field-label]=\"field.fieldLabel || 'label'\"\n        [p-field-value]=\"field.fieldValue || 'value'\"\n        [p-filter-params]=\"field.params\"\n        [p-filter-service]=\"field.searchService\"\n        [p-auto-focus]=\"field.focus\"\n        [p-auto-height]=\"field.autoHeight\"\n        [p-help]=\"field.help\"\n        [p-field-format]=\"field.format\"\n        [p-infinite-scroll]=\"field.infiniteScroll\"\n        [p-label]=\"field.label\"\n        [p-literals]=\"field.literals\"\n        [p-multiple]=\"field.multiple\"\n        [p-no-autocomplete]=\"field.noAutocomplete\"\n        [p-optional]=\"field.optional\"\n        [p-required]=\"field.required\"\n        [p-field-error-message]=\"field.errorMessage\"\n        [p-error-limit]=\"field.errorLimit\"\n        [p-show-required]=\"field.showRequired\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-change)=\"onChangeField(field)\"\n        [p-placeholder]=\"field.placeholder\"\n        [p-advanced-filters]=\"field.advancedFilters\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-change-visible-columns)=\"field.changeVisibleColumns?.($event)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n        (p-restore-column-manager)=\"field.columnRestoreManager?.($event)\"\n      >\n      </po-lookup>\n    }\n    @if (compareTo(field.control, 'checkboxGroup')) {\n      <po-checkbox-group\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-columns]=\"field.columns || 3\"\n        [p-auto-focus]=\"field.focus\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-help]=\"field.help\"\n        [p-label]=\"field.label\"\n        [p-optional]=\"field.optional\"\n        [p-options]=\"field.options\"\n        [p-required]=\"field.required\"\n        [p-show-required]=\"field.showRequired\"\n        [p-field-error-message]=\"field.errorMessage\"\n        [p-error-limit]=\"field.errorLimit\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-change)=\"onChangeField(field)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n      >\n      </po-checkbox-group>\n    }\n    @if (compareTo(field.control, 'multiselect')) {\n      <po-multiselect\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-auto-focus]=\"field.focus\"\n        [p-auto-height]=\"field.autoHeight\"\n        [p-help]=\"field.help\"\n        [p-label]=\"field.label\"\n        [p-literals]=\"field.literals\"\n        [p-optional]=\"field.optional\"\n        [p-options]=\"field.options\"\n        [p-required]=\"field.required\"\n        [p-field-error-message]=\"field.errorMessage\"\n        [p-error-limit]=\"field.errorLimit\"\n        [p-show-required]=\"field.showRequired\"\n        (p-change)=\"onChangeField(field)\"\n        [p-placeholder]=\"field.placeholder\"\n        [p-field-label]=\"field.fieldLabel\"\n        [p-field-value]=\"field.fieldValue\"\n        [p-filter-service]=\"field.optionsService\"\n        [p-filter-mode]=\"field.filterMode\"\n        [p-debounce-time]=\"field.debounceTime\"\n        [p-sort]=\"field.sort\"\n        [p-placeholder-search]=\"field.placeholderSearch\"\n        [p-hide-search]=\"field.hideSearch\"\n        [p-hide-select-all]=\"field.hideSelectAll\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n        [p-listbox-control-position]=\"field.listboxControlPosition\"\n      >\n      </po-multiselect>\n    }\n    @if (compareTo(field.control, 'textarea')) {\n      <po-textarea\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-auto-focus]=\"field.focus\"\n        [p-help]=\"field.help\"\n        [p-label]=\"field.label\"\n        [p-maxlength]=\"field.maxLength\"\n        [p-minlength]=\"field.minLength\"\n        [p-optional]=\"field.optional\"\n        [p-readonly]=\"field.readonly\"\n        [p-required]=\"field.required\"\n        [p-field-error-message]=\"field.errorMessage\"\n        [p-error-limit]=\"field.errorLimit\"\n        [p-show-required]=\"field.showRequired\"\n        [p-rows]=\"field.rows\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-change)=\"onChangeField(field)\"\n        (p-change-model)=\"onChangeFieldModel(field)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n        [p-placeholder]=\"field.placeholder\"\n      >\n      </po-textarea>\n    }\n    @if (compareTo(field.control, 'password')) {\n      <po-password\n        #component\n        [name]=\"field.property\"\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-clean]=\"field.clean\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-error-pattern]=\"field.errorMessage\"\n        [p-error-limit]=\"field.errorLimit\"\n        [p-error-async-properties]=\"field.errorAsyncProperties\"\n        [p-auto-focus]=\"field.focus\"\n        [p-help]=\"field.help\"\n        [p-hide-password-peek]=\"field.hidePasswordPeek\"\n        [p-icon]=\"field.icon\"\n        [p-label]=\"field.label\"\n        [p-maxlength]=\"field.maxLength\"\n        [p-minlength]=\"field.minLength\"\n        [p-no-autocomplete]=\"field.noAutocomplete\"\n        [p-optional]=\"field.optional\"\n        [p-pattern]=\"field.pattern\"\n        [p-readonly]=\"field.readonly\"\n        [p-required]=\"field.required\"\n        [p-required-field-error-message]=\"field.requiredFieldErrorMessage\"\n        [p-show-required]=\"field.showRequired\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-change)=\"onChangeField(field)\"\n        (p-change-model)=\"onChangeFieldModel(field)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n        [p-placeholder]=\"field.placeholder\"\n      >\n      </po-password>\n    }\n    @if (compareTo(field.control, 'upload')) {\n      <po-upload\n        #component\n        [(ngModel)]=\"value[field.property]\"\n        [ngClass]=\"field.componentClass\"\n        [additionalHelpEventTrigger]=\"field.additionalHelp ? 'event' : 'noEvent'\"\n        [p-additional-help-tooltip]=\"field.additionalHelpTooltip\"\n        [p-auto-upload]=\"field.autoUpload\"\n        [p-directory]=\"field.directory\"\n        [p-disabled]=\"isDisabled(field)\"\n        [p-drag-drop]=\"field.dragDrop\"\n        [p-drag-drop-height]=\"field.dragDropHeight\"\n        [p-restrictions]=\"field.restrictions\"\n        [p-form-field]=\"field.formField\"\n        [p-headers]=\"field.headers\"\n        [p-help]=\"field.help\"\n        [p-hide-restrictions-info]=\"field.hideRestrictionsInfo\"\n        [p-hide-select-button]=\"field.hideSelectButton\"\n        [p-hide-send-button]=\"field.hideSendButton\"\n        [p-multiple]=\"field.multiple\"\n        [p-label]=\"field.label\"\n        [p-literals]=\"field.literals\"\n        [name]=\"field.property\"\n        [p-custom-action]=\"field.customAction\"\n        (p-custom-action-click)=\"field.customActionClick($event)\"\n        (p-error)=\"field.onError($event)\"\n        (p-success)=\"field.onSuccess($event)\"\n        (p-upload)=\"field.onUpload($event)\"\n        [p-optional]=\"field.optional\"\n        [p-required]=\"field.required\"\n        [p-show-required]=\"field.showRequired\"\n        [p-show-thumbnail]=\"field.showThumbnail ?? true\"\n        [p-size]=\"field.size || componentsSize\"\n        (p-additional-help)=\"field.additionalHelp?.($event)\"\n        (p-change)=\"onChangeField(field)\"\n        (p-change-model)=\"onChangeFieldModel(field)\"\n        (p-keydown)=\"field.keydown?.($event)\"\n        [p-url]=\"field.url\"\n      >\n      </po-upload>\n    }\n  }\n</ng-template>\n\n<ng-template #poContentContainer let-fields>\n  <po-dynamic-container [p-fields]=\"fields\" [p-content]=\"poContent\"></po-dynamic-container>\n</ng-template>\n" }]
         }], ctorParameters: () => [], propDecorators: { components: [{
                 type: ViewChildren,
                 args: ['component']