@po-ui/ng-components 21.24.0 → 21.25.0

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

@@ -7012,6 +7012,18 @@ class PoPopoverBaseComponent {
     appendBox = false;
     // Indica se o elemento filho será alinhado nos cantos do elemento pai.
     cornerAligned = false;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Define o espaçamento (em pixels) entre o componente alvo (`p-target`) e o `po-popover`.
+     * Útil para componentes com targets pequenos (como ícones) onde o espaçamento padrão é
+     * proporcionalmente muito grande e cria desalinhamento visual.
+     *
+     * @default `8`
+     */
+    offset = 8;
     /**
      * @description
      *
@@ -7150,7 +7162,7 @@ class PoPopoverBaseComponent {
      */
     customClasses = input(undefined, { ...(ngDevMode ? { debugName: "customClasses" } : /* istanbul ignore next */ {}), alias: 'p-custom-classes' });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: PoPopoverBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.18", type: PoPopoverBaseComponent, isStandalone: false, selector: "po-popover-base", inputs: { appendBox: { classPropertyName: "appendBox", publicName: "p-append-in-body", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, cornerAligned: { classPropertyName: "cornerAligned", publicName: "p-corner-aligned", isSignal: false, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "p-target", isSignal: false, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "p-title", isSignal: false, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "p-width", 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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.18", type: PoPopoverBaseComponent, isStandalone: false, selector: "po-popover-base", inputs: { appendBox: { classPropertyName: "appendBox", publicName: "p-append-in-body", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, cornerAligned: { classPropertyName: "cornerAligned", publicName: "p-corner-aligned", isSignal: false, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "p-offset", isSignal: false, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "p-target", isSignal: false, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "p-title", isSignal: false, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "p-width", 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.2.18", ngImport: i0, type: PoPopoverBaseComponent, decorators: [{
             type: Component,
@@ -7165,6 +7177,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
             }], cornerAligned: [{
                 type: Input,
                 args: ['p-corner-aligned']
+            }], offset: [{
+                type: Input,
+                args: ['p-offset']
             }], target: [{
                 type: Input,
                 args: ['p-target']
@@ -7316,6 +7331,7 @@ class PoPopoverComponent extends PoPopoverBaseComponent {
     }
     showPopover() {
         requestAnimationFrame(() => {
+            this.stabilizePopoverWidth();
             this.setElementsControlPosition();
             this.setPopoverPosition();
             this.setOpacity(1);
@@ -7324,6 +7340,40 @@ class PoPopoverComponent extends PoPopoverBaseComponent {
             this.cd.detectChanges();
         });
     }
+    stabilizePopoverWidth() {
+        if (this.width != null || this.widthPopover != null)
+            return;
+        const el = this.popoverElement?.nativeElement;
+        const target = this.targetElement;
+        if (!el || !target)
+            return;
+        el.style.left = '0px';
+        el.style.top = '0px';
+        const natural = el.getBoundingClientRect().width;
+        const tRect = target.getBoundingClientRect();
+        const cx = tRect.left + tRect.width / 2;
+        const halfTarget = tRect.width / 2;
+        const vp = window.innerWidth;
+        const safety = 2;
+        const candidates = [];
+        if (cx + 15 <= vp)
+            candidates.push(cx + 15 - safety);
+        if (cx - 15 >= 0)
+            candidates.push(vp - cx + 15 - safety);
+        const centered = 2 * Math.min(cx, vp - cx) - safety;
+        if (centered > 0)
+            candidates.push(centered);
+        const leftMax = cx - halfTarget - this.offset - safety;
+        if (leftMax > 0)
+            candidates.push(leftMax);
+        const rightMax = vp - cx - halfTarget - this.offset - safety;
+        if (rightMax > 0)
+            candidates.push(rightMax);
+        const minWidth = 240;
+        const maxFit = candidates.length ? Math.max(...candidates) : natural;
+        this.widthPopover = Math.max(minWidth, Math.min(natural, maxFit));
+        this.cd.detectChanges();
+    }
     ensurePopoverPosition() {
         setTimeout(() => {
             this.setElementsControlPosition();
@@ -7408,8 +7458,7 @@ class PoPopoverComponent extends PoPopoverBaseComponent {
         this.keydownPopoverListener?.();
     }
     setElementsControlPosition() {
-        const popoverOffset = 8;
-        this.poControlPosition.setElements(this.popoverElement.nativeElement, popoverOffset, this.target, undefined, false, this.cornerAligned);
+        this.poControlPosition.setElements(this.popoverElement.nativeElement, this.offset, this.target, undefined, false, this.cornerAligned);
     }
     focusOnTarget() {
         const el = this.targetElement;
@@ -7518,10 +7567,10 @@ class PoPopoverComponent extends PoPopoverBaseComponent {
         this.disconnectResizeObserver();
         if (!this.popoverElement?.nativeElement)
             return;
-        let initialCall = true;
+        let baselineFired = false;
         this.resizeObserver = new ResizeObserver(() => {
-            if (initialCall) {
-                initialCall = false;
+            if (!baselineFired) {
+                baselineFired = true;
                 return;
             }
             this.setElementsControlPosition();
@@ -7613,21 +7662,6 @@ class PoHelperComponent extends PoHelperBaseComponent {
     }
     ngAfterViewInit() {
         PoHelperComponent.instances.push(this);
-        queueMicrotask(() => {
-            this.setPopoverPositionByScreen();
-        });
-    }
-    setPopoverPositionByScreen() {
-        if (!this.target?.nativeElement)
-            return;
-        const rect = this.target.nativeElement.getBoundingClientRect();
-        const screenWidth = window.innerWidth || document.documentElement.clientWidth;
-        if (rect.right + 400 > screenWidth) {
-            this.popoverPosition = 'left';
-        }
-        else {
-            this.popoverPosition = 'right';
-        }
     }
     ngOnChanges(changes) {
         if (changes.size) {
@@ -7748,11 +7782,11 @@ class PoHelperComponent extends PoHelperBaseComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: PoHelperComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", 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  #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      <span class=\"po-helper-content-text\">\n        @for (fragment of contentFragments(); track $index) {\n          <span\n            [class.po-text-bold]=\"fragment.bold\"\n            [class.po-text-italic]=\"fragment.italic\"\n            [class.po-text-underline]=\"fragment.underline\"\n            >{{ fragment.text }}</span\n          >\n        }\n      </span>\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.2.18", 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  #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)\"\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-offset]=\"8\"\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      <span class=\"po-helper-content-text\">\n        @for (fragment of contentFragments(); track $index) {\n          <span\n            [class.po-text-bold]=\"fragment.bold\"\n            [class.po-text-italic]=\"fragment.italic\"\n            [class.po-text-underline]=\"fragment.underline\"\n            >{{ fragment.text }}</span\n          >\n        }\n      </span>\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.2.18", ngImport: i0, type: PoHelperComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'po-helper', standalone: false, template: "<div\n  class=\"po-helper-container po-helper-target\"\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      <span class=\"po-helper-content-text\">\n        @for (fragment of contentFragments(); track $index) {\n          <span\n            [class.po-text-bold]=\"fragment.bold\"\n            [class.po-text-italic]=\"fragment.italic\"\n            [class.po-text-underline]=\"fragment.underline\"\n            >{{ fragment.text }}</span\n          >\n        }\n      </span>\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  #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)\"\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-offset]=\"8\"\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      <span class=\"po-helper-content-text\">\n        @for (fragment of contentFragments(); track $index) {\n          <span\n            [class.po-text-bold]=\"fragment.bold\"\n            [class.po-text-italic]=\"fragment.italic\"\n            [class.po-text-underline]=\"fragment.underline\"\n            >{{ fragment.text }}</span\n          >\n        }\n      </span>\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 }]