@po-ui/ng-components 21.0.0 → 21.1.0

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

@@ -6658,7 +6658,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
 
 const PO_POPOVER_DEFAULT_POSITION = 'right';
 const PO_POPOVER_DEFAULT_TRIGGER = 'click';
-const PO_POPOVER_TRIGGERS = ['click', 'hover'];
+const PO_POPOVER_TRIGGERS = ['click', 'hover', 'function'];
 /**
  * @description
  *
@@ -6739,6 +6739,8 @@ class PoPopoverBaseComponent {
     title;
     /** Evento disparado ao fechar o popover. */
     closePopover = new EventEmitter();
+    /** Evento disparado ao abrir o popover. */
+    openPopover = new EventEmitter();
     // Controla se o popover fica oculto ou visível, por padrão é oculto.
     isHidden = true;
     clickoutListener;
@@ -6803,6 +6805,7 @@ class PoPopoverBaseComponent {
      * Valores válidos:
      *  - `click`: Abre ao clicar no componente alvo.
      *  - `hover`: Abre ao passar o mouse sobre o componente alvo.
+     *  - `function`: Abre através de funções públicas do componente.
      *
      * @default click
      * @optional
@@ -6826,7 +6829,7 @@ class PoPopoverBaseComponent {
      */
     customClasses = input(undefined, { ...(ngDevMode ? { debugName: "customClasses" } : {}), alias: 'p-custom-classes' });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoPopoverBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.9", type: PoPopoverBaseComponent, isStandalone: false, selector: "po-popover-base", inputs: { appendBox: { classPropertyName: "appendBox", publicName: "p-append-in-body", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, target: { classPropertyName: "target", publicName: "p-target", isSignal: false, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "p-title", isSignal: false, isRequired: false, transformFunction: null }, hideArrow: { classPropertyName: "hideArrow", publicName: "p-hide-arrow", isSignal: false, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "p-position", isSignal: false, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "p-trigger", isSignal: false, isRequired: false, transformFunction: null }, customClasses: { classPropertyName: "customClasses", publicName: "p-custom-classes", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closePopover: "p-close" }, ngImport: i0, template: '', isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.9", type: PoPopoverBaseComponent, isStandalone: false, selector: "po-popover-base", inputs: { appendBox: { classPropertyName: "appendBox", publicName: "p-append-in-body", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, target: { classPropertyName: "target", publicName: "p-target", isSignal: false, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "p-title", isSignal: false, isRequired: false, transformFunction: null }, hideArrow: { classPropertyName: "hideArrow", publicName: "p-hide-arrow", isSignal: false, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "p-position", isSignal: false, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "p-trigger", isSignal: false, isRequired: false, transformFunction: null }, customClasses: { classPropertyName: "customClasses", publicName: "p-custom-classes", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closePopover: "p-close", openPopover: "p-open" }, ngImport: i0, template: '', isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoPopoverBaseComponent, decorators: [{
             type: Component,
@@ -6847,6 +6850,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
             }], closePopover: [{
                 type: Output,
                 args: ['p-close']
+            }], openPopover: [{
+                type: Output,
+                args: ['p-open']
             }], hideArrow: [{
                 type: Input,
                 args: ['p-hide-arrow']
@@ -6934,6 +6940,9 @@ class PoPopoverComponent extends PoPopoverBaseComponent {
     close() {
         this.isHidden = true;
         this.closePopover.emit();
+        if (this.trigger === 'function' && this.clickoutListener) {
+            this.clickoutListener();
+        }
         this.cd.detectChanges();
     }
     debounceResize() {
@@ -6950,8 +6959,14 @@ class PoPopoverComponent extends PoPopoverBaseComponent {
             this.setElementsControlPosition();
             this.setPopoverPosition();
             this.setOpacity(1);
+            this.openPopover.emit();
             this.cd.detectChanges();
         });
+        if (this.trigger === 'function') {
+            this.clickoutListener = this.renderer.listen('document', 'click', (event) => {
+                this.togglePopup(event);
+            });
+        }
         this.cd.detectChanges();
     }
     ensurePopoverPosition() {
@@ -6982,7 +6997,7 @@ class PoPopoverComponent extends PoPopoverBaseComponent {
                 this.close();
             });
         }
-        else {
+        else if (this.trigger === 'click') {
             this.clickoutListener = this.renderer.listen('document', 'click', (event) => {
                 this.togglePopup(event);
             });
@@ -7010,7 +7025,7 @@ class PoPopoverComponent extends PoPopoverBaseComponent {
                 this.close();
             }
         }
-        else if (this.targetElement?.contains(event.target)) {
+        else if (this.targetElement?.contains(event.target) && this.trigger !== 'function') {
             this.popoverElement.nativeElement.hidden ? this.open() : this.close();
         }
     }
@@ -7211,8 +7226,6 @@ class PoHelperComponent extends PoHelperBaseComponent {
     }
     ngAfterViewInit() {
         PoHelperComponent.instances.push(this);
-        this.boundFocusIn = this.closePopoverOnFocusOut.bind(this);
-        window.addEventListener('focusin', this.boundFocusIn, true);
         queueMicrotask(() => {
             this.setPopoverPositionByScreen();
         });
@@ -7236,9 +7249,7 @@ class PoHelperComponent extends PoHelperBaseComponent {
     }
     ngOnDestroy() {
         PoHelperComponent.instances = PoHelperComponent.instances.filter(i => i !== this);
-        if (this.boundFocusIn) {
-            window.removeEventListener('focusin', this.boundFocusIn, true);
-        }
+        this.handleClose();
     }
     openHelperPopover() {
         requestAnimationFrame(() => {
@@ -7246,6 +7257,9 @@ class PoHelperComponent extends PoHelperBaseComponent {
                 (this.helper()['content'] || typeof this.helper() === 'string' || this.helper()['title'])) {
                 this.popover.open();
             }
+            else {
+                this.popover.close();
+            }
         });
     }
     helperIsVisible() {
@@ -7337,12 +7351,21 @@ class PoHelperComponent extends PoHelperBaseComponent {
         const literals = this.poHelperLiterals[lang] || this.poHelperLiterals['en'];
         return literals[type];
     }
+    handleOpen() {
+        this.boundFocusIn = this.closePopoverOnFocusOut.bind(this);
+        window.addEventListener('focusin', this.boundFocusIn, true);
+    }
+    handleClose() {
+        if (this.boundFocusIn) {
+            window.removeEventListener('focusin', this.boundFocusIn, true);
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoHelperComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: PoHelperComponent, isStandalone: false, selector: "po-helper", viewQueries: [{ propertyName: "target", first: true, predicate: ["target"], descendants: true, read: ElementRef, static: true }, { propertyName: "popover", first: true, predicate: ["popover"], descendants: true }, { propertyName: "poButton", first: true, predicate: PoButtonComponent, descendants: true, read: ElementRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n  (mouseenter)=\"setPopoverPositionByScreen()\"\n  class=\"po-helper-container po-helper-target\"\n  [attr.p-size]=\"this.size()\"\n  #target\n  [attr.tabindex]=\"disabled() ? null : 0\"\n  role=\"button\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-haspopup]=\"'dialog'\"\n  [attr.aria-expanded]=\"!popover.isHidden\"\n  [attr.aria-controls]=\"'popover-content-' + id\"\n  [attr.aria-describedby]=\"!popover.isHidden ? 'popover-content-' + id : null\"\n  [class.po-helper-disabled]=\"disabled()\"\n  (keydown)=\"onKeyDown($event)\"\n  (click)=\"emitClick($event); popover.ensurePopoverPosition()\"\n>\n  <po-icon [p-icon]=\"helper()?.type === 'info' ? 'ICON_INFO' : 'ICON_HELP'\"></po-icon>\n  <po-popover\n    (click)=\"$event.stopPropagation()\"\n    #popover\n    [p-position]=\"popoverPosition\"\n    [p-target]=\"target\"\n    [p-title]=\"helper()?.title\"\n    [p-append-in-body]=\"appendBox()\"\n    p-custom-classes=\"po-helper-popover\"\n  >\n    <div [id]=\"'popover-content-' + id\" role=\"dialog\" aria-modal=\"false\" tabindex=\"-1\">\n      {{ helper()?.content }}\n      @if (helper()?.type === 'help' && helper()?.footerAction) {\n        <po-divider></po-divider>\n        <po-link\n          class=\"po-helper-footer-action-link\"\n          (keydown.enter)=\"$event.stopPropagation()\"\n          (keydown.space)=\"$event.stopPropagation()\"\n          (p-action)=\"helper()?.footerAction?.action()\"\n          [p-label]=\"helper()?.footerAction?.label\"\n        >\n        </po-link>\n      }\n    </div>\n  </po-popover>\n</div>\n", dependencies: [{ kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoPopoverComponent, selector: "po-popover" }, { kind: "component", type: PoLinkComponent, selector: "po-link" }, { kind: "component", type: PoDividerComponent, selector: "po-divider" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: PoHelperComponent, isStandalone: false, selector: "po-helper", viewQueries: [{ propertyName: "target", first: true, predicate: ["target"], descendants: true, read: ElementRef, static: true }, { propertyName: "popover", first: true, predicate: ["popover"], descendants: true }, { propertyName: "poButton", first: true, predicate: PoButtonComponent, descendants: true, read: ElementRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"po-helper-container po-helper-target\"\n  [attr.p-size]=\"this.size()\"\n  #target\n  [attr.tabindex]=\"disabled() ? null : 0\"\n  role=\"button\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-haspopup]=\"'dialog'\"\n  [attr.aria-expanded]=\"!popover.isHidden\"\n  [attr.aria-controls]=\"'popover-content-' + id\"\n  [attr.aria-describedby]=\"!popover.isHidden ? 'popover-content-' + id : null\"\n  [class.po-helper-disabled]=\"disabled()\"\n  (keydown)=\"onKeyDown($event)\"\n  (click)=\"openHelperPopover(); emitClick($event); popover.ensurePopoverPosition()\"\n>\n  <po-icon [p-icon]=\"helper()?.type === 'info' ? 'ICON_INFO' : 'ICON_HELP'\"></po-icon>\n  <po-popover\n    #popover\n    [p-position]=\"popoverPosition\"\n    [p-target]=\"target\"\n    [p-title]=\"helper()?.title\"\n    [p-append-in-body]=\"appendBox()\"\n    p-custom-classes=\"po-helper-popover\"\n    p-trigger=\"function\"\n    (p-close)=\"handleClose()\"\n    (p-open)=\"handleOpen()\"\n  >\n    <div [id]=\"'popover-content-' + id\" role=\"dialog\" aria-modal=\"false\" tabindex=\"-1\">\n      {{ helper()?.content }}\n      @if (helper()?.type === 'help' && helper()?.footerAction) {\n        <po-divider></po-divider>\n        <po-link\n          class=\"po-helper-footer-action-link\"\n          (keydown.enter)=\"$event.stopPropagation()\"\n          (keydown.space)=\"$event.stopPropagation()\"\n          (p-action)=\"helper()?.footerAction?.action()\"\n          [p-label]=\"helper()?.footerAction?.label\"\n        >\n        </po-link>\n      }\n    </div>\n  </po-popover>\n</div>\n", dependencies: [{ kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoPopoverComponent, selector: "po-popover" }, { kind: "component", type: PoLinkComponent, selector: "po-link" }, { kind: "component", type: PoDividerComponent, selector: "po-divider" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PoHelperComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'po-helper', standalone: false, template: "<div\n  (mouseenter)=\"setPopoverPositionByScreen()\"\n  class=\"po-helper-container po-helper-target\"\n  [attr.p-size]=\"this.size()\"\n  #target\n  [attr.tabindex]=\"disabled() ? null : 0\"\n  role=\"button\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-haspopup]=\"'dialog'\"\n  [attr.aria-expanded]=\"!popover.isHidden\"\n  [attr.aria-controls]=\"'popover-content-' + id\"\n  [attr.aria-describedby]=\"!popover.isHidden ? 'popover-content-' + id : null\"\n  [class.po-helper-disabled]=\"disabled()\"\n  (keydown)=\"onKeyDown($event)\"\n  (click)=\"emitClick($event); popover.ensurePopoverPosition()\"\n>\n  <po-icon [p-icon]=\"helper()?.type === 'info' ? 'ICON_INFO' : 'ICON_HELP'\"></po-icon>\n  <po-popover\n    (click)=\"$event.stopPropagation()\"\n    #popover\n    [p-position]=\"popoverPosition\"\n    [p-target]=\"target\"\n    [p-title]=\"helper()?.title\"\n    [p-append-in-body]=\"appendBox()\"\n    p-custom-classes=\"po-helper-popover\"\n  >\n    <div [id]=\"'popover-content-' + id\" role=\"dialog\" aria-modal=\"false\" tabindex=\"-1\">\n      {{ helper()?.content }}\n      @if (helper()?.type === 'help' && helper()?.footerAction) {\n        <po-divider></po-divider>\n        <po-link\n          class=\"po-helper-footer-action-link\"\n          (keydown.enter)=\"$event.stopPropagation()\"\n          (keydown.space)=\"$event.stopPropagation()\"\n          (p-action)=\"helper()?.footerAction?.action()\"\n          [p-label]=\"helper()?.footerAction?.label\"\n        >\n        </po-link>\n      }\n    </div>\n  </po-popover>\n</div>\n" }]
+            args: [{ selector: 'po-helper', standalone: false, template: "<div\n  class=\"po-helper-container po-helper-target\"\n  [attr.p-size]=\"this.size()\"\n  #target\n  [attr.tabindex]=\"disabled() ? null : 0\"\n  role=\"button\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-haspopup]=\"'dialog'\"\n  [attr.aria-expanded]=\"!popover.isHidden\"\n  [attr.aria-controls]=\"'popover-content-' + id\"\n  [attr.aria-describedby]=\"!popover.isHidden ? 'popover-content-' + id : null\"\n  [class.po-helper-disabled]=\"disabled()\"\n  (keydown)=\"onKeyDown($event)\"\n  (click)=\"openHelperPopover(); emitClick($event); popover.ensurePopoverPosition()\"\n>\n  <po-icon [p-icon]=\"helper()?.type === 'info' ? 'ICON_INFO' : 'ICON_HELP'\"></po-icon>\n  <po-popover\n    #popover\n    [p-position]=\"popoverPosition\"\n    [p-target]=\"target\"\n    [p-title]=\"helper()?.title\"\n    [p-append-in-body]=\"appendBox()\"\n    p-custom-classes=\"po-helper-popover\"\n    p-trigger=\"function\"\n    (p-close)=\"handleClose()\"\n    (p-open)=\"handleOpen()\"\n  >\n    <div [id]=\"'popover-content-' + id\" role=\"dialog\" aria-modal=\"false\" tabindex=\"-1\">\n      {{ helper()?.content }}\n      @if (helper()?.type === 'help' && helper()?.footerAction) {\n        <po-divider></po-divider>\n        <po-link\n          class=\"po-helper-footer-action-link\"\n          (keydown.enter)=\"$event.stopPropagation()\"\n          (keydown.space)=\"$event.stopPropagation()\"\n          (p-action)=\"helper()?.footerAction?.action()\"\n          [p-label]=\"helper()?.footerAction?.label\"\n        >\n        </po-link>\n      }\n    </div>\n  </po-popover>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { target: [{
                 type: ViewChild,
                 args: ['target', { read: ElementRef, static: true }]
@@ -7809,13 +7832,6 @@ class PoCheckboxComponent extends PoCheckboxBaseComponent {
         if (this.autoFocus) {
             this.focus();
         }
-        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) {
@@ -16843,13 +16859,6 @@ class PoDatepickerComponent extends PoDatepickerBaseComponent {
             this.focus();
         }
         this.renderer.setAttribute(this.iconDatepicker.buttonElement.nativeElement, 'aria-label', this.literals.open);
-        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.label) {
@@ -21768,13 +21777,6 @@ class PoSwitchComponent extends PoFieldModel {
     }
     ngAfterViewInit() {
         this.setControl();
-        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);
@@ -27844,11 +27846,13 @@ class PoComboBaseComponent {
     }
     // Recebe as alterações do model
     writeValue(value) {
+        const originalValue = value;
         value = this.getValueWrite(value);
         this.fromWriteValue = true;
         if (validValue(value) && !this.service && this.comboOptionsList && this.comboOptionsList.length) {
             const option = this.getOptionFromValue(value, this.comboOptionsList);
             this.updateSelectedValue(option);
+            this.normalizeModelIfNeeded(originalValue, option);
             this.comboOptionsList = this.comboOptionsList.map((option) => {
                 if (this.isEqual(option[this.dynamicValue], value)) {
                     return { ...option, selected: true };
@@ -27888,14 +27892,15 @@ class PoComboBaseComponent {
         if (!this.hasValidatorRequired && this.fieldErrorMessage && abstractControl.hasValidator(Validators.required)) {
             this.hasValidatorRequired = true;
         }
-        if (PoValidators.requiredFailed(this.required || this.hasValidatorRequired, this.disabled, abstractControl.value)) {
+        let valueToValidate = abstractControl.value;
+        if (this.controlValueWithLabel && valueToValidate && typeof valueToValidate === 'object') {
+            valueToValidate = valueToValidate.value;
+        }
+        if (PoValidators.requiredFailed(this.required || this.hasValidatorRequired, this.disabled, valueToValidate)) {
             this.changeDetector.markForCheck();
-            return {
-                required: {
-                    valid: false
-                }
-            };
+            return { required: { valid: false } };
         }
+        return {};
     }
     clear(value) {
         this.callModelChange(value);
@@ -27958,20 +27963,32 @@ class PoComboBaseComponent {
     }
     getValueUpdate(data, selectedOption) {
         const { [this.dynamicValue]: value, [this.dynamicLabel]: label } = selectedOption || {};
-        if (this.controlValueWithLabel && value) {
-            return {
-                value,
-                label
-            };
+        if (this.controlValueWithLabel && value !== null && value !== undefined) {
+            return { value, label };
         }
         return data;
     }
     getValueWrite(data) {
-        if (this.controlValueWithLabel && data?.value) {
+        if (this.controlValueWithLabel && data?.value !== null && data?.value !== undefined) {
             return data?.value;
         }
         return data;
     }
+    normalizeModelIfNeeded(originalValue, option) {
+        if (!this.controlValueWithLabel) {
+            return;
+        }
+        const isPrimitive = typeof originalValue === 'number' || typeof originalValue === 'string';
+        if (!isPrimitive || !option) {
+            return;
+        }
+        const value = option[this.dynamicValue];
+        const label = option[this.dynamicLabel];
+        if (value === null) {
+            return;
+        }
+        this.callModelChange({ value, label });
+    }
     hasDuplicatedOption(options, currentOption, accumulatedGroupOptions) {
         if (accumulatedGroupOptions) {
             return accumulatedGroupOptions.some(option => option[this.dynamicLabel] === currentOption);
@@ -28390,13 +28407,6 @@ class PoComboComponent extends PoComboBaseComponent {
             this.focus();
         }
         this.setContainerWidth();
-        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) {
@@ -31341,13 +31351,6 @@ class PoDecimalComponent extends PoInputBaseComponent {
     }
     ngAfterViewInit() {
         this.verifyAutoFocus();
-        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();
@@ -31859,13 +31862,6 @@ class PoInputGeneric extends PoInputBaseComponent {
     }
     afterViewInit() {
         this.verifyAutoFocus();
-        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();
@@ -36183,7 +36179,11 @@ class PoMultiselectBaseComponent {
         this.updateVisibleItems();
     }
     writeValue(values) {
-        values = this.getValueWrite(values) || [];
+        values = this.getValueWrite(values);
+        if (values !== null && values !== undefined && !Array.isArray(values)) {
+            values = [values];
+        }
+        values = values ?? [];
         if (this.service && values.length) {
             this.getObjectsByValuesSubscription = this.service.getObjectsByValues(values).subscribe(options => {
                 this.updateSelectedOptions(options);
@@ -36219,9 +36219,15 @@ class PoMultiselectBaseComponent {
         return this.getValuesFromOptions(selectedOptions);
     }
     getValueWrite(data) {
-        if (this.controlValueWithLabel && data?.length && data.every(x => x?.value !== undefined)) {
+        if (!this.controlValueWithLabel || data == null) {
+            return data;
+        }
+        if (Array.isArray(data) && data.every(item => item?.value !== undefined)) {
             return data.map(option => option.value);
         }
+        if (data?.value !== undefined) {
+            return data.value;
+        }
         return data;
     }
     setLabelsAndValuesOptions() {
@@ -36711,13 +36717,6 @@ class PoMultiselectComponent extends PoMultiselectBaseComponent {
             this.focus();
         }
         this.initialized = true;
-        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 (changes.label) {
@@ -37454,15 +37453,6 @@ class PoNumberComponent extends PoNumberBaseComponent {
     onWheel(event) {
         event.preventDefault();
     }
-    ngAfterViewInit() {
-        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.label) {
             this.displayAdditionalHelp = false;
@@ -42005,15 +41995,6 @@ class PoSelectComponent extends PoFieldValidateModel {
             this.options = changes.options.currentValue;
         }
     }
-    ngAfterViewInit() {
-        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.
      *
@@ -42163,8 +42144,11 @@ class PoSelectComponent extends PoFieldValidateModel {
         return option[this.fieldValue];
     }
     getValueWrite(data) {
-        if (this.controlValueWithLabel && data?.value) {
-            return data?.value;
+        if (!this.controlValueWithLabel || data == null) {
+            return data;
+        }
+        if (data?.value !== undefined) {
+            return data.value;
         }
         return data;
     }