@wrrdev/fenix-ui 1.1.3 → 1.1.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -18,7 +18,7 @@ import { FenixUI } from '@wrrdev/fenix-ui'; // API de tema/tokens (índice)
18
18
  FenixUI.theme('dark');
19
19
  ```
20
20
 
21
- > 📦 npm: [`@wrrdev/fenix-ui`](https://www.npmjs.com/package/@wrrdev/fenix-ui) — **v1.1.3**, acesso público.
21
+ > 📦 npm: [`@wrrdev/fenix-ui`](https://www.npmjs.com/package/@wrrdev/fenix-ui) — **v1.1.4**, acesso público.
22
22
  > Subpaths disponíveis: `./theme`, `./tokens`, `./jsx`, `./vue`, `./button`, `./badge`, `./spinner`, `./select`, `./input`, `./switch`, `./textarea`, `./checkbox`, `./radio`, `./calendar`, `./datepicker`, `./multiselect`, `./table`, `./floatlabel`, `./dialog`, `./toast`, `./tooltip`, `./tabs`, `./progress`, `./skeleton`, `./alert`, `./drawer`, `./dropdown`, `./sidebar`, `./pagination`, `./autocomplete`, `./auto-import` e o curinga `./components/*`.
23
23
 
24
24
 
@@ -65,7 +65,7 @@ Carregue o bundle **UMD** único: ele registra todos os componentes e expõe os
65
65
  <fx-toast></fx-toast>
66
66
 
67
67
  <!--
68
- 🔗 Links diretos para CDN (versão 1.1.3):
68
+ 🔗 Links diretos para CDN (versão 1.1.4):
69
69
  • https://cdn.jsdelivr.net/npm/@wrrdev/fenix-ui@latest/dist/fenix-ui.umd.min.js
70
70
  • https://unpkg.com/@wrrdev/fenix-ui@latest/dist/fenix-ui.umd.min.js
71
71
  -->
@@ -1 +1 @@
1
- {"version":3,"file":"confirmpopup.d.ts","sourceRoot":"","sources":["../../../src/components/confirmpopup/confirmpopup.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAM5C;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,qBAAa,cAAe,SAAQ,SAAS;IAC3C,OAAgB,MAAM,SAkFpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAEjD;IAED,IAAI,IAAI,IAAI,OAAO,CAAiC;IACpD,IAAI,IAAI,CAAC,KAAK,EAAE,OAAO,EAAqC;cAEzC,MAAM,IAAI,IAAI;IAiEjC,OAAO,CAAC,QAAQ,CAAC,CAAa;IAC9B,OAAO,CAAC,kBAAkB,CAA4B;IAEtD,OAAO,CAAC,OAAO;IAUf;;;;OAIG;IACH,OAAO,CAAC,SAAS;IA+BjB,OAAO,CAAC,aAAa;IAKZ,iBAAiB,IAAI,IAAI;IAOzB,oBAAoB,IAAI,IAAI;IASrC,OAAO,CAAC,aAAa,CAInB;CACH;AAED,wBAAgB,oBAAoB,IAAI,OAAO,cAAc,CAE5D"}
1
+ {"version":3,"file":"confirmpopup.d.ts","sourceRoot":"","sources":["../../../src/components/confirmpopup/confirmpopup.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAM5C;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,qBAAa,cAAe,SAAQ,SAAS;IAC3C,OAAgB,MAAM,SAkFpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAEjD;IAED,IAAI,IAAI,IAAI,OAAO,CAAiC;IACpD,IAAI,IAAI,CAAC,KAAK,EAAE,OAAO,EAAqC;cAEzC,MAAM,IAAI,IAAI;IAsEjC,OAAO,CAAC,QAAQ,CAAC,CAAa;IAC9B,OAAO,CAAC,kBAAkB,CAA4B;IAEtD,OAAO,CAAC,OAAO;IAUf;;;;OAIG;IACH,OAAO,CAAC,SAAS;IA+BjB,OAAO,CAAC,aAAa;IAKZ,iBAAiB,IAAI,IAAI;IAOzB,oBAAoB,IAAI,IAAI;IASrC,OAAO,CAAC,aAAa,CAInB;CACH;AAED,wBAAgB,oBAAoB,IAAI,OAAO,cAAc,CAE5D"}
@@ -49,6 +49,8 @@ const _FxConfirmPopup = class _FxConfirmPopup extends FxElement {
49
49
  if (!this.open) return;
50
50
  const popup = this.root.querySelector(".popup");
51
51
  if (!popup) return;
52
+ this._cleanup?.();
53
+ this._cleanup = void 0;
52
54
  const close = (event) => {
53
55
  this.open = false;
54
56
  this._cleanup?.();
@@ -1 +1 @@
1
- {"version":3,"mappings":"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","names":[],"ignoreList":[],"sources":["../../../src/components/confirmpopup/confirmpopup.ts"],"sourcesContent":["import { FxElement } from '../../core/base';\nimport { css } from '../../core/css';\nimport { defineElement } from '../../core/define';\nimport { esc } from '../../core/sanitize';\nimport { FENIX_ICON_BASE_CSS, isFenixIconName } from '../../icons/base-css';\n\n/**\n * <fx-confirmpopup> — Popup de confirmação não-modal ancorado em um elemento,\n * exibido acima ou abaixo dinamicamente (com flip automático quando não há\n * espaço na viewport), no estilo ConfirmPopup do PrimeVue.\n *\n * Atributos:\n * - target (seletor CSS do elemento âncora — obrigatório para abrir);\n * - message (texto da mensagem, quando o slot padrão não é usado);\n * - icon (emoji/glifo exibido antes da mensagem; se for um nome da Fenix Icons,\n * ex.: icon=\"help\", é renderizado com a fonte de ícones);\n * - accept-label / reject-label (textos dos botões padrão);\n * - position (top|bottom|auto — padrão `auto`, que faz flip conforme o espaço);\n * - open (exibe o popup).\n *\n * Slots:\n * - padrão: corpo da mensagem (template \"message\");\n * - `accept`: conteúdo do botão de confirmação (template \"accept\");\n * - `reject`: conteúdo do botão de rejeição (template \"reject\").\n *\n * Eventos (composed): `accept` e `reject` — ambos fecham o popup.\n */\nexport class FxConfirmPopup extends FxElement {\n static override styles = css`\n :host { display: contents; }\n .popup {\n position: fixed;\n margin: 0;\n background: var(--fx-surface-background);\n border: 1px solid var(--fx-border-default);\n border-radius: var(--fx-radius-md);\n box-shadow: var(--fx-shadow-lg);\n padding: var(--fx-space-md) var(--fx-space-lg);\n min-width: 220px;\n max-width: min(380px, calc(100vw - 24px));\n font-family: var(--fx-font-family);\n font-size: var(--fx-font-size);\n color: var(--fx-text-default);\n z-index: var(--fx-z-modal, 1100);\n animation: fxcp-pop var(--fx-motion-duration-fast, 150ms) var(--fx-motion-easing, ease);\n }\n .popup[hidden] { display: none; }\n @keyframes fxcp-pop { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }\n /* seta indicadora */\n .popup::before {\n content: '';\n position: absolute;\n left: var(--fxcp-arrow-x, 50%);\n border: 7px solid transparent;\n }\n .popup[data-side='bottom']::before {\n top: -14px;\n border-bottom-color: var(--fx-border-default);\n }\n .popup[data-side='top']::before {\n bottom: -14px;\n border-top-color: var(--fx-border-default);\n }\n .popup::after {\n content: '';\n position: absolute;\n left: var(--fxcp-arrow-x, 50%);\n border: 6px solid transparent;\n }\n .popup[data-side='bottom']::after {\n top: -12px;\n border-bottom-color: var(--fx-surface-background);\n }\n .popup[data-side='top']::after {\n bottom: -12px;\n border-top-color: var(--fx-surface-background);\n }\n .message {\n display: flex;\n align-items: flex-start;\n gap: var(--fx-space-sm);\n }\n .icon { font-size: calc(var(--fx-font-size) + 4px); line-height: 1.2; }\n ${FENIX_ICON_BASE_CSS}\n .icon.fx-icon { font-size: calc(var(--fx-font-size) + 6px); color: var(--fx-color-primary); }\n .text { margin: 0; }\n footer {\n display: flex;\n justify-content: flex-end;\n gap: var(--fx-space-sm);\n margin-top: var(--fx-space-md);\n }\n footer button {\n font-family: var(--fx-font-family);\n font-size: calc(var(--fx-font-size) - 2px);\n padding: var(--fx-space-xs) var(--fx-space-md);\n border-radius: var(--fx-radius-sm);\n border: 1px solid var(--fx-border-default);\n background: var(--fx-surface-background);\n color: var(--fx-text-default);\n cursor: pointer;\n transition: background var(--fx-motion-duration-fast) var(--fx-motion-easing);\n }\n footer button:hover { background: var(--fx-surface-surface-hover, rgba(0, 0, 0, 0.04)); }\n footer button.accept {\n background: var(--fx-color-primary);\n border-color: var(--fx-color-primary);\n color: #fff;\n }\n footer button.accept:hover { filter: brightness(0.92); background: var(--fx-color-primary); }\n `;\n\n static override get observedAttributes(): string[] {\n return ['open', 'target', 'message', 'icon', 'accept-label', 'reject-label', 'position'];\n }\n\n get open(): boolean { return this.hasAttr('open'); }\n set open(value: boolean) { this.toggleAttr('open', value); }\n\n protected override render(): void {\n const message = this.getAttr('message');\n const icon = this.getAttr('icon');\n const iconIsFx = isFenixIconName(icon);\n if (iconIsFx) void import('../../icons');\n const acceptLabel = this.getAttr('accept-label', 'Sim');\n const rejectLabel = this.getAttr('reject-label', 'Não');\n\n this.setTemplate(`\n <div class=\"popup\" part=\"popup\" role=\"alertdialog\" aria-modal=\"false\" ${this.open ? '' : 'hidden'}>\n <div class=\"message\" part=\"message\">\n ${icon ? `<span class=\"icon${iconIsFx ? ' fx-icon' : ''}\" aria-hidden=\"true\">${esc(icon)}</span>` : ''}\n <p class=\"text\"><slot>${esc(message)}</slot></p>\n </div>\n <footer part=\"footer\">\n <slot name=\"reject\">\n <button type=\"button\" class=\"reject\" part=\"reject-button\">${esc(rejectLabel)}</button>\n </slot>\n <slot name=\"accept\">\n <button type=\"button\" class=\"accept\" part=\"accept-button\">${esc(acceptLabel)}</button>\n </slot>\n </footer>\n </div>\n `);\n\n if (!this.open) return;\n\n const popup = this.root.querySelector<HTMLElement>('.popup');\n if (!popup) return;\n\n const close = (event: 'accept' | 'reject'): void => {\n this.open = false;\n this._cleanup?.();\n this._cleanup = undefined;\n this._restoreFocus();\n this.dispatchEvent(new CustomEvent(event, { bubbles: true, composed: true }));\n };\n\n this.root.querySelector('.reject')?.addEventListener('click', () => close('reject'));\n this.root.querySelector('.accept')?.addEventListener('click', () => close('accept'));\n\n // ESC fecha (reject) — clique fora fecha (reject)\n const onKey = (e: KeyboardEvent): void => {\n if (e.key === 'Escape') { e.stopPropagation(); close('reject'); }\n };\n const onPointerDown = (e: MouseEvent): void => {\n const path = e.composedPath();\n const anchor = this._anchor();\n const hitAnchor = anchor ? path.includes(anchor) : false;\n if (!path.includes(popup) && !hitAnchor) close('reject');\n };\n document.addEventListener('keydown', onKey);\n document.addEventListener('pointerdown', onPointerDown, true);\n this._cleanup = () => {\n document.removeEventListener('keydown', onKey);\n document.removeEventListener('pointerdown', onPointerDown, true);\n };\n\n this._position(popup);\n this._previouslyFocused = document.activeElement as HTMLElement | null;\n requestAnimationFrame(() => {\n this.root.querySelector<HTMLElement>('button.accept')?.focus();\n });\n }\n\n private _cleanup?: () => void;\n private _previouslyFocused: HTMLElement | null = null;\n\n private _anchor(): HTMLElement | null {\n const selector = this.getAttr('target');\n if (!selector) return null;\n try {\n return document.querySelector<HTMLElement>(selector);\n } catch {\n return null;\n }\n }\n\n /**\n * Posiciona o popup fixo junto ao âncora, acima ou abaixo dinamicamente:\n * `position=\"auto\"` (padrão) prefere abaixo e faz flip para cima quando\n * não há espaço; `top`/`bottom` forçam o lado.\n */\n private _position(popup: HTMLElement): void {\n const anchor = this._anchor();\n if (!anchor) return;\n popup.hidden = false;\n\n const a = anchor.getBoundingClientRect();\n const p = popup.getBoundingClientRect();\n const gap = 8;\n const margin = 8;\n\n let side: 'top' | 'bottom';\n const pos = this.getAttr('position', 'auto');\n if (pos === 'top') side = 'top';\n else if (pos === 'bottom') side = 'bottom';\n else side = a.bottom + gap + p.height <= window.innerHeight - margin ? 'bottom' : 'top';\n\n // clamp horizontal para nunca sair da viewport\n const left = Math.min(\n Math.max(margin, a.left + a.width / 2 - p.width / 2),\n window.innerWidth - p.width - margin,\n );\n const top = side === 'bottom' ? a.bottom + gap : a.top - gap - p.height;\n\n popup.dataset.side = side;\n popup.style.left = `${Math.round(left)}px`;\n popup.style.top = `${Math.round(Math.max(margin, top))}px`;\n // posição da seta relativa ao popup\n const arrowX = Math.min(Math.max(a.left + a.width / 2 - left, 16), p.width - 16);\n popup.style.setProperty('--fxcp-arrow-x', `${Math.round(arrowX)}px`);\n }\n\n private _restoreFocus(): void {\n if (this._previouslyFocused?.isConnected) this._previouslyFocused.focus();\n this._previouslyFocused = null;\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n // reposiciona em scroll/resize enquanto aberto\n window.addEventListener('scroll', this._onReposition, true);\n window.addEventListener('resize', this._onReposition);\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n window.removeEventListener('scroll', this._onReposition, true);\n window.removeEventListener('resize', this._onReposition);\n this._cleanup?.();\n this._cleanup = undefined;\n this._restoreFocus();\n }\n\n private _onReposition = (): void => {\n if (!this.open) return;\n const popup = this.root.querySelector<HTMLElement>('.popup');\n if (popup && !popup.hidden) this._position(popup);\n };\n}\n\nexport function defineFxConfirmPopup(): typeof FxConfirmPopup {\n return defineElement('fx-confirmpopup', FxConfirmPopup);\n}\n\n"],"file":"components/confirmpopup/confirmpopup.js"}
1
+ {"version":3,"mappings":"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","names":[],"ignoreList":[],"sources":["../../../src/components/confirmpopup/confirmpopup.ts"],"sourcesContent":["import { FxElement } from '../../core/base';\nimport { css } from '../../core/css';\nimport { defineElement } from '../../core/define';\nimport { esc } from '../../core/sanitize';\nimport { FENIX_ICON_BASE_CSS, isFenixIconName } from '../../icons/base-css';\n\n/**\n * <fx-confirmpopup> — Popup de confirmação não-modal ancorado em um elemento,\n * exibido acima ou abaixo dinamicamente (com flip automático quando não há\n * espaço na viewport), no estilo ConfirmPopup do PrimeVue.\n *\n * Atributos:\n * - target (seletor CSS do elemento âncora — obrigatório para abrir);\n * - message (texto da mensagem, quando o slot padrão não é usado);\n * - icon (emoji/glifo exibido antes da mensagem; se for um nome da Fenix Icons,\n * ex.: icon=\"help\", é renderizado com a fonte de ícones);\n * - accept-label / reject-label (textos dos botões padrão);\n * - position (top|bottom|auto — padrão `auto`, que faz flip conforme o espaço);\n * - open (exibe o popup).\n *\n * Slots:\n * - padrão: corpo da mensagem (template \"message\");\n * - `accept`: conteúdo do botão de confirmação (template \"accept\");\n * - `reject`: conteúdo do botão de rejeição (template \"reject\").\n *\n * Eventos (composed): `accept` e `reject` — ambos fecham o popup.\n */\nexport class FxConfirmPopup extends FxElement {\n static override styles = css`\n :host { display: contents; }\n .popup {\n position: fixed;\n margin: 0;\n background: var(--fx-surface-background);\n border: 1px solid var(--fx-border-default);\n border-radius: var(--fx-radius-md);\n box-shadow: var(--fx-shadow-lg);\n padding: var(--fx-space-md) var(--fx-space-lg);\n min-width: 220px;\n max-width: min(380px, calc(100vw - 24px));\n font-family: var(--fx-font-family);\n font-size: var(--fx-font-size);\n color: var(--fx-text-default);\n z-index: var(--fx-z-modal, 1100);\n animation: fxcp-pop var(--fx-motion-duration-fast, 150ms) var(--fx-motion-easing, ease);\n }\n .popup[hidden] { display: none; }\n @keyframes fxcp-pop { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }\n /* seta indicadora */\n .popup::before {\n content: '';\n position: absolute;\n left: var(--fxcp-arrow-x, 50%);\n border: 7px solid transparent;\n }\n .popup[data-side='bottom']::before {\n top: -14px;\n border-bottom-color: var(--fx-border-default);\n }\n .popup[data-side='top']::before {\n bottom: -14px;\n border-top-color: var(--fx-border-default);\n }\n .popup::after {\n content: '';\n position: absolute;\n left: var(--fxcp-arrow-x, 50%);\n border: 6px solid transparent;\n }\n .popup[data-side='bottom']::after {\n top: -12px;\n border-bottom-color: var(--fx-surface-background);\n }\n .popup[data-side='top']::after {\n bottom: -12px;\n border-top-color: var(--fx-surface-background);\n }\n .message {\n display: flex;\n align-items: flex-start;\n gap: var(--fx-space-sm);\n }\n .icon { font-size: calc(var(--fx-font-size) + 4px); line-height: 1.2; }\n ${FENIX_ICON_BASE_CSS}\n .icon.fx-icon { font-size: calc(var(--fx-font-size) + 6px); color: var(--fx-color-primary); }\n .text { margin: 0; }\n footer {\n display: flex;\n justify-content: flex-end;\n gap: var(--fx-space-sm);\n margin-top: var(--fx-space-md);\n }\n footer button {\n font-family: var(--fx-font-family);\n font-size: calc(var(--fx-font-size) - 2px);\n padding: var(--fx-space-xs) var(--fx-space-md);\n border-radius: var(--fx-radius-sm);\n border: 1px solid var(--fx-border-default);\n background: var(--fx-surface-background);\n color: var(--fx-text-default);\n cursor: pointer;\n transition: background var(--fx-motion-duration-fast) var(--fx-motion-easing);\n }\n footer button:hover { background: var(--fx-surface-surface-hover, rgba(0, 0, 0, 0.04)); }\n footer button.accept {\n background: var(--fx-color-primary);\n border-color: var(--fx-color-primary);\n color: #fff;\n }\n footer button.accept:hover { filter: brightness(0.92); background: var(--fx-color-primary); }\n `;\n\n static override get observedAttributes(): string[] {\n return ['open', 'target', 'message', 'icon', 'accept-label', 'reject-label', 'position'];\n }\n\n get open(): boolean { return this.hasAttr('open'); }\n set open(value: boolean) { this.toggleAttr('open', value); }\n\n protected override render(): void {\n const message = this.getAttr('message');\n const icon = this.getAttr('icon');\n const iconIsFx = isFenixIconName(icon);\n if (iconIsFx) void import('../../icons');\n const acceptLabel = this.getAttr('accept-label', 'Sim');\n const rejectLabel = this.getAttr('reject-label', 'Não');\n\n this.setTemplate(`\n <div class=\"popup\" part=\"popup\" role=\"alertdialog\" aria-modal=\"false\" ${this.open ? '' : 'hidden'}>\n <div class=\"message\" part=\"message\">\n ${icon ? `<span class=\"icon${iconIsFx ? ' fx-icon' : ''}\" aria-hidden=\"true\">${esc(icon)}</span>` : ''}\n <p class=\"text\"><slot>${esc(message)}</slot></p>\n </div>\n <footer part=\"footer\">\n <slot name=\"reject\">\n <button type=\"button\" class=\"reject\" part=\"reject-button\">${esc(rejectLabel)}</button>\n </slot>\n <slot name=\"accept\">\n <button type=\"button\" class=\"accept\" part=\"accept-button\">${esc(acceptLabel)}</button>\n </slot>\n </footer>\n </div>\n `);\n\n if (!this.open) return;\n\n const popup = this.root.querySelector<HTMLElement>('.popup');\n if (!popup) return;\n\n // Evita listeners duplicados em re-renders enquanto aberto\n // (ex.: mudança de message/icon/accept-label com o popup aberto).\n this._cleanup?.();\n this._cleanup = undefined;\n\n const close = (event: 'accept' | 'reject'): void => {\n this.open = false;\n this._cleanup?.();\n this._cleanup = undefined;\n this._restoreFocus();\n this.dispatchEvent(new CustomEvent(event, { bubbles: true, composed: true }));\n };\n\n this.root.querySelector('.reject')?.addEventListener('click', () => close('reject'));\n this.root.querySelector('.accept')?.addEventListener('click', () => close('accept'));\n\n // ESC fecha (reject) — clique fora fecha (reject)\n const onKey = (e: KeyboardEvent): void => {\n if (e.key === 'Escape') { e.stopPropagation(); close('reject'); }\n };\n const onPointerDown = (e: MouseEvent): void => {\n const path = e.composedPath();\n const anchor = this._anchor();\n const hitAnchor = anchor ? path.includes(anchor) : false;\n if (!path.includes(popup) && !hitAnchor) close('reject');\n };\n document.addEventListener('keydown', onKey);\n document.addEventListener('pointerdown', onPointerDown, true);\n this._cleanup = () => {\n document.removeEventListener('keydown', onKey);\n document.removeEventListener('pointerdown', onPointerDown, true);\n };\n\n this._position(popup);\n this._previouslyFocused = document.activeElement as HTMLElement | null;\n requestAnimationFrame(() => {\n this.root.querySelector<HTMLElement>('button.accept')?.focus();\n });\n }\n\n private _cleanup?: () => void;\n private _previouslyFocused: HTMLElement | null = null;\n\n private _anchor(): HTMLElement | null {\n const selector = this.getAttr('target');\n if (!selector) return null;\n try {\n return document.querySelector<HTMLElement>(selector);\n } catch {\n return null;\n }\n }\n\n /**\n * Posiciona o popup fixo junto ao âncora, acima ou abaixo dinamicamente:\n * `position=\"auto\"` (padrão) prefere abaixo e faz flip para cima quando\n * não há espaço; `top`/`bottom` forçam o lado.\n */\n private _position(popup: HTMLElement): void {\n const anchor = this._anchor();\n if (!anchor) return;\n popup.hidden = false;\n\n const a = anchor.getBoundingClientRect();\n const p = popup.getBoundingClientRect();\n const gap = 8;\n const margin = 8;\n\n let side: 'top' | 'bottom';\n const pos = this.getAttr('position', 'auto');\n if (pos === 'top') side = 'top';\n else if (pos === 'bottom') side = 'bottom';\n else side = a.bottom + gap + p.height <= window.innerHeight - margin ? 'bottom' : 'top';\n\n // clamp horizontal para nunca sair da viewport\n const left = Math.min(\n Math.max(margin, a.left + a.width / 2 - p.width / 2),\n window.innerWidth - p.width - margin,\n );\n const top = side === 'bottom' ? a.bottom + gap : a.top - gap - p.height;\n\n popup.dataset.side = side;\n popup.style.left = `${Math.round(left)}px`;\n popup.style.top = `${Math.round(Math.max(margin, top))}px`;\n // posição da seta relativa ao popup\n const arrowX = Math.min(Math.max(a.left + a.width / 2 - left, 16), p.width - 16);\n popup.style.setProperty('--fxcp-arrow-x', `${Math.round(arrowX)}px`);\n }\n\n private _restoreFocus(): void {\n if (this._previouslyFocused?.isConnected) this._previouslyFocused.focus();\n this._previouslyFocused = null;\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n // reposiciona em scroll/resize enquanto aberto\n window.addEventListener('scroll', this._onReposition, true);\n window.addEventListener('resize', this._onReposition);\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n window.removeEventListener('scroll', this._onReposition, true);\n window.removeEventListener('resize', this._onReposition);\n this._cleanup?.();\n this._cleanup = undefined;\n this._restoreFocus();\n }\n\n private _onReposition = (): void => {\n if (!this.open) return;\n const popup = this.root.querySelector<HTMLElement>('.popup');\n if (popup && !popup.hidden) this._position(popup);\n };\n}\n\nexport function defineFxConfirmPopup(): typeof FxConfirmPopup {\n return defineElement('fx-confirmpopup', FxConfirmPopup);\n}\n\n"],"file":"components/confirmpopup/confirmpopup.js"}
@@ -1 +1 @@
1
- {"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../src/components/dialog/dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAK5C;;;;;;GAMG;AACH,qBAAa,QAAS,SAAQ,SAAS;IACrC,OAAgB,MAAM,SA6EpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAEjD;IAED,IAAI,IAAI,IAAI,OAAO,CAAiC;IACpD,IAAI,IAAI,CAAC,KAAK,EAAE,OAAO,EAAqC;cAEzC,MAAM,IAAI,IAAI;IA8CjC,OAAO,CAAC,QAAQ,CAAC,CAAa;IAC9B,OAAO,CAAC,kBAAkB,CAA4B;IAEtD,0DAA0D;IAC1D,OAAO,CAAC,UAAU;IAmBlB,OAAO,CAAC,aAAa;IAKZ,oBAAoB,IAAI,IAAI;CAMtC;AAED,wBAAgB,cAAc,IAAI,OAAO,QAAQ,CAEhD"}
1
+ {"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../src/components/dialog/dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAK5C;;;;;;GAMG;AACH,qBAAa,QAAS,SAAQ,SAAS;IACrC,OAAgB,MAAM,SA6EpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAEjD;IAED,IAAI,IAAI,IAAI,OAAO,CAAiC;IACpD,IAAI,IAAI,CAAC,KAAK,EAAE,OAAO,EAAqC;cAEzC,MAAM,IAAI,IAAI;IAoDjC,OAAO,CAAC,QAAQ,CAAC,CAAa;IAC9B,OAAO,CAAC,kBAAkB,CAA4B;IAEtD,0DAA0D;IAC1D,OAAO,CAAC,UAAU;IAmBlB,OAAO,CAAC,aAAa;IAKZ,oBAAoB,IAAI,IAAI;CAMtC;AAED,wBAAgB,cAAc,IAAI,OAAO,QAAQ,CAEhD"}
@@ -32,6 +32,8 @@ const _FxDialog = class _FxDialog extends FxElement {
32
32
  </div>
33
33
  `);
34
34
  if (!isOpen) return;
35
+ this._cleanup?.();
36
+ this._cleanup = void 0;
35
37
  const overlay = this.root.querySelector(".overlay");
36
38
  const closeBtn = this.root.querySelector(".close");
37
39
  const close = () => {
@@ -1 +1 @@
1
- {"version":3,"file":"dialog.js","sources":["../../../src/components/dialog/dialog.ts"],"sourcesContent":["import { FxElement } from '../../core/base';\nimport { css } from '../../core/css';\nimport { defineElement } from '../../core/define';\nimport { esc } from '../../core/sanitize';\n\n/**\n * <fx-dialog> — Janela modal com overlay, ESC para fechar e foco preso.\n *\n * Atributos: open, size (sm|md|lg), heading (título).\n * Slots: padrão (conteúdo), footer (botões de ação).\n * Eventos: `open`, `close` (composed).\n */\nexport class FxDialog extends FxElement {\n static override styles = css`\n :host { display: contents; }\n .overlay {\n position: fixed;\n inset: 0;\n background: color-mix(in srgb, var(--fx-text-default, #000) 45%, transparent);\n backdrop-filter: blur(3px);\n -webkit-backdrop-filter: blur(3px);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: var(--fx-z-modal, 1100);\n animation: fade var(--fx-motion-duration-fast) var(--fx-motion-easing);\n }\n .overlay[hidden] { display: none; }\n @keyframes fade { from { opacity: 0; } to { opacity: 1; } }\n .dialog {\n background: var(--fx-surface-background);\n border: 1px solid var(--fx-border-default);\n border-radius: var(--fx-radius-lg);\n box-shadow: var(--fx-shadow-xl);\n /* Largura customizável por instância: defina --fx-dialog-width no elemento. */\n width: min(var(--fx-dialog-width, 560px), calc(100vw - 32px));\n max-height: calc(100vh - 64px);\n display: flex;\n flex-direction: column;\n font-family: var(--fx-font-family);\n animation: pop var(--fx-motion-duration-normal) var(--fx-motion-easing);\n }\n @keyframes pop { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }\n :host([size='sm']) .dialog { width: min(var(--fx-dialog-width, 400px), calc(100vw - 32px)); }\n :host([size='lg']) .dialog { width: min(var(--fx-dialog-width, 800px), calc(100vw - 32px)); }\n /* Mobile: dialog ocupa praticamente toda a largura da tela. */\n @media (max-width: 640px) {\n .dialog, :host([size='sm']) .dialog, :host([size='lg']) .dialog {\n width: calc(100vw - 16px);\n max-width: calc(100vw - 16px);\n }\n }\n header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: var(--fx-space-lg) var(--fx-space-xl);\n border-bottom: 1px solid var(--fx-border-default);\n }\n h2 {\n margin: 0;\n font-size: calc(var(--fx-font-size) + 2px);\n font-weight: 600;\n color: var(--fx-text-default);\n }\n .close {\n border: none;\n background: transparent;\n color: var(--fx-text-muted);\n font-size: calc(var(--fx-font-size) + 6px);\n cursor: pointer;\n line-height: 1;\n padding: 0 var(--fx-space-xs);\n border-radius: var(--fx-radius-full);\n }\n .close:hover { color: var(--fx-color-danger); }\n .body {\n padding: var(--fx-space-lg) var(--fx-space-xl);\n overflow-y: auto;\n color: var(--fx-text-default);\n font-size: var(--fx-font-size);\n }\n footer {\n padding: var(--fx-space-md) var(--fx-space-xl);\n border-top: 1px solid var(--fx-border-default);\n display: flex;\n justify-content: flex-end;\n gap: var(--fx-space-sm);\n }\n footer[hidden] { display: none; }\n `;\n\n static override get observedAttributes(): string[] {\n return ['open', 'size', 'heading'];\n }\n\n get open(): boolean { return this.hasAttr('open'); }\n set open(value: boolean) { this.toggleAttr('open', value); }\n\n protected override render(): void {\n const isOpen = this.open;\n const heading = this.getAttr('heading');\n\n this.setTemplate(`\n <div class=\"overlay\" part=\"overlay\" ${isOpen ? '' : 'hidden'}>\n <div class=\"dialog\" role=\"dialog\" aria-modal=\"true\" aria-label=\"${esc(heading)}\" tabindex=\"-1\">\n <header>\n <h2>${esc(heading)}</h2>\n <button type=\"button\" class=\"close\" part=\"close\" aria-label=\"Fechar\">×</button>\n </header>\n <div class=\"body\"><slot></slot></div>\n <footer part=\"footer\"><slot name=\"footer\"></slot></footer>\n </div>\n </div>\n `);\n\n if (!isOpen) return;\n\n const overlay = this.root.querySelector<HTMLElement>('.overlay');\n const closeBtn = this.root.querySelector<HTMLButtonElement>('.close');\n const close = (): void => {\n this.open = false;\n this._cleanup?.();\n this._cleanup = undefined;\n this._restoreFocus();\n this.dispatchEvent(new CustomEvent('close', { bubbles: true, composed: true }));\n };\n overlay?.addEventListener('click', (e) => { if (e.target === overlay) close(); });\n closeBtn?.addEventListener('click', close);\n\n // ESC fecha + foco preso no diálogo\n const onKey = (e: KeyboardEvent): void => {\n if (e.key === 'Escape') { e.stopPropagation(); close(); return; }\n if (e.key === 'Tab') this._trapFocus(e);\n };\n document.addEventListener('keydown', onKey);\n this._cleanup = () => document.removeEventListener('keydown', onKey);\n\n requestAnimationFrame(() => {\n this._previouslyFocused = document.activeElement as HTMLElement | null;\n this.root.querySelector<HTMLElement>('.dialog')?.focus();\n });\n this.dispatchEvent(new CustomEvent('open', { bubbles: true, composed: true }));\n }\n\n private _cleanup?: () => void;\n private _previouslyFocused: HTMLElement | null = null;\n\n /** Mantém o foco dentro do modal (WCAG 2.4.3 / 2.1.2). */\n private _trapFocus(e: KeyboardEvent): void {\n const dialog = this.root.querySelector<HTMLElement>('.dialog');\n if (!dialog) return;\n const focusables = dialog.querySelectorAll<HTMLElement>(\n 'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n );\n if (!focusables.length) return;\n const first = focusables[0];\n const last = focusables[focusables.length - 1];\n const active = this.root.activeElement;\n if (e.shiftKey && (active === first || active === dialog)) {\n e.preventDefault();\n last.focus();\n } else if (!e.shiftKey && active === last) {\n e.preventDefault();\n first.focus();\n }\n }\n\n private _restoreFocus(): void {\n if (this._previouslyFocused?.isConnected) this._previouslyFocused.focus();\n this._previouslyFocused = null;\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this._cleanup?.();\n this._cleanup = undefined;\n this._restoreFocus();\n }\n}\n\nexport function defineFxDialog(): typeof FxDialog {\n return defineElement('fx-dialog', FxDialog);\n}\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"dialog.js","sources":["../../../src/components/dialog/dialog.ts"],"sourcesContent":["import { FxElement } from '../../core/base';\nimport { css } from '../../core/css';\nimport { defineElement } from '../../core/define';\nimport { esc } from '../../core/sanitize';\n\n/**\n * <fx-dialog> — Janela modal com overlay, ESC para fechar e foco preso.\n *\n * Atributos: open, size (sm|md|lg), heading (título).\n * Slots: padrão (conteúdo), footer (botões de ação).\n * Eventos: `open`, `close` (composed).\n */\nexport class FxDialog extends FxElement {\n static override styles = css`\n :host { display: contents; }\n .overlay {\n position: fixed;\n inset: 0;\n background: color-mix(in srgb, var(--fx-text-default, #000) 45%, transparent);\n backdrop-filter: blur(3px);\n -webkit-backdrop-filter: blur(3px);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: var(--fx-z-modal, 1100);\n animation: fade var(--fx-motion-duration-fast) var(--fx-motion-easing);\n }\n .overlay[hidden] { display: none; }\n @keyframes fade { from { opacity: 0; } to { opacity: 1; } }\n .dialog {\n background: var(--fx-surface-background);\n border: 1px solid var(--fx-border-default);\n border-radius: var(--fx-radius-lg);\n box-shadow: var(--fx-shadow-xl);\n /* Largura customizável por instância: defina --fx-dialog-width no elemento. */\n width: min(var(--fx-dialog-width, 560px), calc(100vw - 32px));\n max-height: calc(100vh - 64px);\n display: flex;\n flex-direction: column;\n font-family: var(--fx-font-family);\n animation: pop var(--fx-motion-duration-normal) var(--fx-motion-easing);\n }\n @keyframes pop { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }\n :host([size='sm']) .dialog { width: min(var(--fx-dialog-width, 400px), calc(100vw - 32px)); }\n :host([size='lg']) .dialog { width: min(var(--fx-dialog-width, 800px), calc(100vw - 32px)); }\n /* Mobile: dialog ocupa praticamente toda a largura da tela. */\n @media (max-width: 640px) {\n .dialog, :host([size='sm']) .dialog, :host([size='lg']) .dialog {\n width: calc(100vw - 16px);\n max-width: calc(100vw - 16px);\n }\n }\n header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: var(--fx-space-lg) var(--fx-space-xl);\n border-bottom: 1px solid var(--fx-border-default);\n }\n h2 {\n margin: 0;\n font-size: calc(var(--fx-font-size) + 2px);\n font-weight: 600;\n color: var(--fx-text-default);\n }\n .close {\n border: none;\n background: transparent;\n color: var(--fx-text-muted);\n font-size: calc(var(--fx-font-size) + 6px);\n cursor: pointer;\n line-height: 1;\n padding: 0 var(--fx-space-xs);\n border-radius: var(--fx-radius-full);\n }\n .close:hover { color: var(--fx-color-danger); }\n .body {\n padding: var(--fx-space-lg) var(--fx-space-xl);\n overflow-y: auto;\n color: var(--fx-text-default);\n font-size: var(--fx-font-size);\n }\n footer {\n padding: var(--fx-space-md) var(--fx-space-xl);\n border-top: 1px solid var(--fx-border-default);\n display: flex;\n justify-content: flex-end;\n gap: var(--fx-space-sm);\n }\n footer[hidden] { display: none; }\n `;\n\n static override get observedAttributes(): string[] {\n return ['open', 'size', 'heading'];\n }\n\n get open(): boolean { return this.hasAttr('open'); }\n set open(value: boolean) { this.toggleAttr('open', value); }\n\n protected override render(): void {\n const isOpen = this.open;\n const heading = this.getAttr('heading');\n\n this.setTemplate(`\n <div class=\"overlay\" part=\"overlay\" ${isOpen ? '' : 'hidden'}>\n <div class=\"dialog\" role=\"dialog\" aria-modal=\"true\" aria-label=\"${esc(heading)}\" tabindex=\"-1\">\n <header>\n <h2>${esc(heading)}</h2>\n <button type=\"button\" class=\"close\" part=\"close\" aria-label=\"Fechar\">×</button>\n </header>\n <div class=\"body\"><slot></slot></div>\n <footer part=\"footer\"><slot name=\"footer\"></slot></footer>\n </div>\n </div>\n `);\n\n if (!isOpen) return;\n\n // Evita listeners duplicados em re-renders enquanto aberto\n // (ex.: mudança de heading/size com o dialog aberto sobrescreveria\n // o _cleanup anterior, deixando listeners de document órfãos).\n this._cleanup?.();\n this._cleanup = undefined;\n\n const overlay = this.root.querySelector<HTMLElement>('.overlay');\n const closeBtn = this.root.querySelector<HTMLButtonElement>('.close');\n const close = (): void => {\n this.open = false;\n this._cleanup?.();\n this._cleanup = undefined;\n this._restoreFocus();\n this.dispatchEvent(new CustomEvent('close', { bubbles: true, composed: true }));\n };\n overlay?.addEventListener('click', (e) => { if (e.target === overlay) close(); });\n closeBtn?.addEventListener('click', close);\n\n // ESC fecha + foco preso no diálogo\n const onKey = (e: KeyboardEvent): void => {\n if (e.key === 'Escape') { e.stopPropagation(); close(); return; }\n if (e.key === 'Tab') this._trapFocus(e);\n };\n document.addEventListener('keydown', onKey);\n this._cleanup = () => document.removeEventListener('keydown', onKey);\n\n requestAnimationFrame(() => {\n this._previouslyFocused = document.activeElement as HTMLElement | null;\n this.root.querySelector<HTMLElement>('.dialog')?.focus();\n });\n this.dispatchEvent(new CustomEvent('open', { bubbles: true, composed: true }));\n }\n\n private _cleanup?: () => void;\n private _previouslyFocused: HTMLElement | null = null;\n\n /** Mantém o foco dentro do modal (WCAG 2.4.3 / 2.1.2). */\n private _trapFocus(e: KeyboardEvent): void {\n const dialog = this.root.querySelector<HTMLElement>('.dialog');\n if (!dialog) return;\n const focusables = dialog.querySelectorAll<HTMLElement>(\n 'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n );\n if (!focusables.length) return;\n const first = focusables[0];\n const last = focusables[focusables.length - 1];\n const active = this.root.activeElement;\n if (e.shiftKey && (active === first || active === dialog)) {\n e.preventDefault();\n last.focus();\n } else if (!e.shiftKey && active === last) {\n e.preventDefault();\n first.focus();\n }\n }\n\n private _restoreFocus(): void {\n if (this._previouslyFocused?.isConnected) this._previouslyFocused.focus();\n this._previouslyFocused = null;\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this._cleanup?.();\n this._cleanup = undefined;\n this._restoreFocus();\n }\n}\n\nexport function defineFxDialog(): typeof FxDialog {\n return defineElement('fx-dialog', FxDialog);\n}\n"],"names":[],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../src/components/popover/popover.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAI5C;;;;;;;;;;;;;;GAcG;AACH,qBAAa,SAAU,SAAQ,SAAS;IACtC,OAAgB,MAAM,SA2DpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAEjD;IAED,IAAI,IAAI,IAAI,OAAO,CAAiC;IACpD,IAAI,IAAI,CAAC,KAAK,EAAE,OAAO,EAAqC;cAEzC,MAAM,IAAI,IAAI;IA8CjC,OAAO,CAAC,QAAQ,CAAC,CAAa;IAC9B,OAAO,CAAC,kBAAkB,CAA4B;IAEtD,OAAO,CAAC,OAAO;IAOf,OAAO,CAAC,UAAU;IAWlB,OAAO,CAAC,SAAS;IAoCjB,OAAO,CAAC,aAAa;IAKZ,iBAAiB,IAAI,IAAI;IAOzB,oBAAoB,IAAI,IAAI;IAWrC,OAAO,CAAC,aAAa,CAInB;IAEF,OAAO,CAAC,YAAY;IAkBpB,OAAO,CAAC,eAAe,CAAC,CAAa;IACrC,OAAO,CAAC,QAAQ,CAAqC;IACrD,OAAO,CAAC,QAAQ,CAAsC;IACtD,OAAO,CAAC,QAAQ,CAA2C;CAC5D;AAED,wBAAgB,eAAe,IAAI,OAAO,SAAS,CAElD"}
1
+ {"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../src/components/popover/popover.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAI5C;;;;;;;;;;;;;;GAcG;AACH,qBAAa,SAAU,SAAQ,SAAS;IACtC,OAAgB,MAAM,SA2DpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAEjD;IAED,IAAI,IAAI,IAAI,OAAO,CAAiC;IACpD,IAAI,IAAI,CAAC,KAAK,EAAE,OAAO,EAAqC;cAEzC,MAAM,IAAI,IAAI;IAmDjC,OAAO,CAAC,QAAQ,CAAC,CAAa;IAC9B,OAAO,CAAC,kBAAkB,CAA4B;IAEtD,OAAO,CAAC,OAAO;IAOf,OAAO,CAAC,UAAU;IAWlB,OAAO,CAAC,SAAS;IAoCjB,OAAO,CAAC,aAAa;IAKZ,iBAAiB,IAAI,IAAI;IAOzB,oBAAoB,IAAI,IAAI;IAWrC,OAAO,CAAC,aAAa,CAInB;IAEF,OAAO,CAAC,YAAY;IAkBpB,OAAO,CAAC,eAAe,CAAC,CAAa;IACrC,OAAO,CAAC,QAAQ,CAAqC;IACrD,OAAO,CAAC,QAAQ,CAAsC;IACtD,OAAO,CAAC,QAAQ,CAA2C;CAC5D;AAED,wBAAgB,eAAe,IAAI,OAAO,SAAS,CAElD"}
@@ -40,6 +40,8 @@ const _FxPopover = class _FxPopover extends FxElement {
40
40
  if (!this.open) return;
41
41
  const popup = this.root.querySelector(".popup");
42
42
  if (!popup) return;
43
+ this._cleanup?.();
44
+ this._cleanup = void 0;
43
45
  const close = () => {
44
46
  this.open = false;
45
47
  this._cleanup?.();
@@ -1 +1 @@
1
- {"version":3,"file":"popover.js","sources":["../../../src/components/popover/popover.ts"],"sourcesContent":["import { FxElement } from '../../core/base';\nimport { css } from '../../core/css';\nimport { defineElement } from '../../core/define';\n\n/**\n * <fx-popover> — Painel flutuante ancorado em um elemento, com posicionamento\n * automático (flip para cima quando não há espaço abaixo), no estilo Popover do PrimeVue.\n *\n * Atributos:\n * - target (seletor CSS do elemento âncora — obrigatório);\n * - trigger (click|hover, padrão click);\n * - position (top|bottom|auto, padrão auto — faz flip conforme o espaço);\n * - open (exibe o popover);\n * - dismissible (fecha ao clicar fora, padrão true).\n *\n * Slots: `header`, padrão (conteúdo), `footer`.\n *\n * Eventos (composed): `show` e `hide`.\n */\nexport class FxPopover extends FxElement {\n static override styles = css`\n :host { display: contents; }\n .popup {\n position: fixed;\n margin: 0;\n background: var(--fx-surface-background);\n border: 1px solid var(--fx-border-default);\n border-radius: var(--fx-radius-md);\n box-shadow: var(--fx-shadow-lg);\n padding: 0;\n min-width: 220px;\n max-width: min(380px, calc(100vw - 24px));\n font-family: var(--fx-font-family);\n font-size: var(--fx-font-size);\n color: var(--fx-text-default);\n z-index: var(--fx-z-modal, 1100);\n animation: fxpp-pop var(--fx-motion-duration-fast, 150ms) var(--fx-motion-easing, ease);\n overflow: hidden;\n }\n .popup[hidden] { display: none; }\n @keyframes fxpp-pop { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }\n .popup::before, .popup::after {\n content: '';\n position: absolute;\n border: 7px solid transparent;\n }\n .popup[data-side='bottom']::before {\n top: -14px; left: var(--fxpp-arrow-x, 50%);\n border-bottom-color: var(--fx-border-default);\n }\n .popup[data-side='bottom']::after {\n top: -12px; left: var(--fxpp-arrow-x, 50%);\n border-bottom-color: var(--fx-surface-background);\n }\n .popup[data-side='top']::before {\n bottom: -14px; left: var(--fxpp-arrow-x, 50%);\n border-top-color: var(--fx-border-default);\n }\n .popup[data-side='top']::after {\n bottom: -12px; left: var(--fxpp-arrow-x, 50%);\n border-top-color: var(--fx-surface-background);\n }\n header {\n padding: var(--fx-space-md) var(--fx-space-lg);\n border-bottom: 1px solid var(--fx-border-default);\n font-weight: 600;\n font-size: calc(var(--fx-font-size) + 1px);\n color: var(--fx-text-default);\n }\n header[hidden] { display: none; }\n .body { padding: var(--fx-space-md) var(--fx-space-lg); }\n footer {\n padding: var(--fx-space-md) var(--fx-space-lg);\n border-top: 1px solid var(--fx-border-default);\n display: flex;\n justify-content: flex-end;\n gap: var(--fx-space-sm);\n }\n footer[hidden] { display: none; }\n `;\n\n static override get observedAttributes(): string[] {\n return ['open', 'target', 'trigger', 'position', 'dismissible'];\n }\n\n get open(): boolean { return this.hasAttr('open'); }\n set open(value: boolean) { this.toggleAttr('open', value); }\n\n protected override render(): void {\n this.setTemplate(`\n <div class=\"popup\" part=\"popover\" role=\"dialog\" aria-modal=\"false\" ${this.open ? '' : 'hidden'}>\n <header part=\"header\" hidden><slot name=\"header\"></slot></header>\n <div class=\"body\" part=\"content\"><slot></slot></div>\n <footer part=\"footer\" hidden><slot name=\"footer\"></slot></footer>\n </div>\n `);\n\n if (!this.open) return;\n const popup = this.root.querySelector<HTMLElement>('.popup');\n if (!popup) return;\n\n const close = (): void => {\n this.open = false;\n this._cleanup?.();\n this._cleanup = undefined;\n this._restoreFocus();\n this.dispatchEvent(new CustomEvent('hide', { bubbles: true, composed: true }));\n };\n\n const onKey = (e: KeyboardEvent): void => {\n if (e.key === 'Escape') { e.stopPropagation(); close(); }\n };\n const onPointerDown = (e: MouseEvent): void => {\n if (!this.hasAttr('dismissible')) return;\n const path = e.composedPath();\n const anchor = this._anchor();\n const hitAnchor = anchor ? path.includes(anchor) : false;\n if (!path.includes(popup) && !hitAnchor) close();\n };\n document.addEventListener('keydown', onKey);\n document.addEventListener('pointerdown', onPointerDown, true);\n this._cleanup = () => {\n document.removeEventListener('keydown', onKey);\n document.removeEventListener('pointerdown', onPointerDown, true);\n };\n\n // sincroniza slots ANTES de posicionar (header/footer alteram a altura)\n this._syncSlots();\n this._position(popup);\n this._previouslyFocused = document.activeElement as HTMLElement | null;\n requestAnimationFrame(() => popup.focus({ preventScroll: true }));\n this.dispatchEvent(new CustomEvent('show', { bubbles: true, composed: true }));\n }\n\n private _cleanup?: () => void;\n private _previouslyFocused: HTMLElement | null = null;\n\n private _anchor(): HTMLElement | null {\n const selector = this.getAttr('target');\n if (!selector) return null;\n try { return document.querySelector<HTMLElement>(selector); }\n catch { return null; }\n }\n\n private _syncSlots(): void {\n const header = this.root.querySelector<HTMLSlotElement>('slot[name=\"header\"]');\n const footer = this.root.querySelector<HTMLSlotElement>('slot[name=\"footer\"]');\n const headerWrap = this.root.querySelector<HTMLElement>('header');\n const footerWrap = this.root.querySelector<HTMLElement>('footer');\n const hasHeader = !!header && header.assignedNodes().length > 0;\n const hasFooter = !!footer && footer.assignedNodes().length > 0;\n headerWrap?.toggleAttribute('hidden', !hasHeader);\n footerWrap?.toggleAttribute('hidden', !hasFooter);\n }\n\n private _position(popup: HTMLElement): void {\n const anchor = this._anchor();\n if (!anchor) return;\n popup.hidden = false;\n\n const a = anchor.getBoundingClientRect();\n const p = popup.getBoundingClientRect();\n const gap = 8;\n const margin = 8;\n\n let side: 'top' | 'bottom';\n const pos = this.getAttr('position', 'auto');\n if (pos === 'top') side = 'top';\n else if (pos === 'bottom') side = 'bottom';\n else side = a.bottom + gap + p.height <= window.innerHeight - margin ? 'bottom' : 'top';\n\n // flip quando o lado forçado não cabe (evita sobrepor o anchor)\n if (side === 'top' && a.top - gap - p.height < margin && a.bottom + gap + p.height <= window.innerHeight - margin) {\n side = 'bottom';\n } else if (side === 'bottom' && a.bottom + gap + p.height > window.innerHeight - margin && a.top - gap - p.height >= margin) {\n side = 'top';\n }\n\n const left = Math.min(\n Math.max(margin, a.left + a.width / 2 - p.width / 2),\n window.innerWidth - p.width - margin,\n );\n const top = side === 'bottom' ? a.bottom + gap : a.top - gap - p.height;\n\n popup.dataset.side = side;\n popup.style.left = `${Math.round(left)}px`;\n popup.style.top = `${Math.round(Math.max(margin, top))}px`;\n const arrowX = Math.min(Math.max(a.left + a.width / 2 - left, 16), p.width - 16);\n popup.style.setProperty('--fxpp-arrow-x', `${Math.round(arrowX)}px`);\n }\n\n private _restoreFocus(): void {\n if (this._previouslyFocused?.isConnected) this._previouslyFocused.focus();\n this._previouslyFocused = null;\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n window.addEventListener('scroll', this._onReposition, true);\n window.addEventListener('resize', this._onReposition);\n this._bindTrigger();\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n window.removeEventListener('scroll', this._onReposition, true);\n window.removeEventListener('resize', this._onReposition);\n this._triggerCleanup?.();\n this._triggerCleanup = undefined;\n this._cleanup?.();\n this._cleanup = undefined;\n this._restoreFocus();\n }\n\n private _onReposition = (): void => {\n if (!this.open) return;\n const popup = this.root.querySelector<HTMLElement>('.popup');\n if (popup && !popup.hidden) this._position(popup);\n };\n\n private _bindTrigger(): void {\n const anchor = this._anchor();\n if (!anchor) return;\n const trigger = this.getAttr('trigger', 'click');\n\n if (trigger === 'hover') {\n anchor.addEventListener('mouseenter', this._onEnter);\n anchor.addEventListener('mouseleave', this._onLeave);\n this._triggerCleanup = () => {\n anchor.removeEventListener('mouseenter', this._onEnter);\n anchor.removeEventListener('mouseleave', this._onLeave);\n };\n } else {\n anchor.addEventListener('pointerdown', this._onClick);\n this._triggerCleanup = () => anchor.removeEventListener('pointerdown', this._onClick);\n }\n }\n\n private _triggerCleanup?: () => void;\n private _onEnter = (): void => { this.open = true; };\n private _onLeave = (): void => { this.open = false; };\n private _onClick = (): void => { this.open = !this.open; };\n}\n\nexport function defineFxPopover(): typeof FxPopover {\n return defineElement('fx-popover', FxPopover);\n}\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"popover.js","sources":["../../../src/components/popover/popover.ts"],"sourcesContent":["import { FxElement } from '../../core/base';\nimport { css } from '../../core/css';\nimport { defineElement } from '../../core/define';\n\n/**\n * <fx-popover> — Painel flutuante ancorado em um elemento, com posicionamento\n * automático (flip para cima quando não há espaço abaixo), no estilo Popover do PrimeVue.\n *\n * Atributos:\n * - target (seletor CSS do elemento âncora — obrigatório);\n * - trigger (click|hover, padrão click);\n * - position (top|bottom|auto, padrão auto — faz flip conforme o espaço);\n * - open (exibe o popover);\n * - dismissible (fecha ao clicar fora, padrão true).\n *\n * Slots: `header`, padrão (conteúdo), `footer`.\n *\n * Eventos (composed): `show` e `hide`.\n */\nexport class FxPopover extends FxElement {\n static override styles = css`\n :host { display: contents; }\n .popup {\n position: fixed;\n margin: 0;\n background: var(--fx-surface-background);\n border: 1px solid var(--fx-border-default);\n border-radius: var(--fx-radius-md);\n box-shadow: var(--fx-shadow-lg);\n padding: 0;\n min-width: 220px;\n max-width: min(380px, calc(100vw - 24px));\n font-family: var(--fx-font-family);\n font-size: var(--fx-font-size);\n color: var(--fx-text-default);\n z-index: var(--fx-z-modal, 1100);\n animation: fxpp-pop var(--fx-motion-duration-fast, 150ms) var(--fx-motion-easing, ease);\n overflow: hidden;\n }\n .popup[hidden] { display: none; }\n @keyframes fxpp-pop { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }\n .popup::before, .popup::after {\n content: '';\n position: absolute;\n border: 7px solid transparent;\n }\n .popup[data-side='bottom']::before {\n top: -14px; left: var(--fxpp-arrow-x, 50%);\n border-bottom-color: var(--fx-border-default);\n }\n .popup[data-side='bottom']::after {\n top: -12px; left: var(--fxpp-arrow-x, 50%);\n border-bottom-color: var(--fx-surface-background);\n }\n .popup[data-side='top']::before {\n bottom: -14px; left: var(--fxpp-arrow-x, 50%);\n border-top-color: var(--fx-border-default);\n }\n .popup[data-side='top']::after {\n bottom: -12px; left: var(--fxpp-arrow-x, 50%);\n border-top-color: var(--fx-surface-background);\n }\n header {\n padding: var(--fx-space-md) var(--fx-space-lg);\n border-bottom: 1px solid var(--fx-border-default);\n font-weight: 600;\n font-size: calc(var(--fx-font-size) + 1px);\n color: var(--fx-text-default);\n }\n header[hidden] { display: none; }\n .body { padding: var(--fx-space-md) var(--fx-space-lg); }\n footer {\n padding: var(--fx-space-md) var(--fx-space-lg);\n border-top: 1px solid var(--fx-border-default);\n display: flex;\n justify-content: flex-end;\n gap: var(--fx-space-sm);\n }\n footer[hidden] { display: none; }\n `;\n\n static override get observedAttributes(): string[] {\n return ['open', 'target', 'trigger', 'position', 'dismissible'];\n }\n\n get open(): boolean { return this.hasAttr('open'); }\n set open(value: boolean) { this.toggleAttr('open', value); }\n\n protected override render(): void {\n this.setTemplate(`\n <div class=\"popup\" part=\"popover\" role=\"dialog\" aria-modal=\"false\" ${this.open ? '' : 'hidden'}>\n <header part=\"header\" hidden><slot name=\"header\"></slot></header>\n <div class=\"body\" part=\"content\"><slot></slot></div>\n <footer part=\"footer\" hidden><slot name=\"footer\"></slot></footer>\n </div>\n `);\n\n if (!this.open) return;\n const popup = this.root.querySelector<HTMLElement>('.popup');\n if (!popup) return;\n\n // Evita listeners duplicados em re-renders enquanto aberto\n // (ex.: mudança de target/position/trigger com o popover aberto).\n this._cleanup?.();\n this._cleanup = undefined;\n\n const close = (): void => {\n this.open = false;\n this._cleanup?.();\n this._cleanup = undefined;\n this._restoreFocus();\n this.dispatchEvent(new CustomEvent('hide', { bubbles: true, composed: true }));\n };\n\n const onKey = (e: KeyboardEvent): void => {\n if (e.key === 'Escape') { e.stopPropagation(); close(); }\n };\n const onPointerDown = (e: MouseEvent): void => {\n if (!this.hasAttr('dismissible')) return;\n const path = e.composedPath();\n const anchor = this._anchor();\n const hitAnchor = anchor ? path.includes(anchor) : false;\n if (!path.includes(popup) && !hitAnchor) close();\n };\n document.addEventListener('keydown', onKey);\n document.addEventListener('pointerdown', onPointerDown, true);\n this._cleanup = () => {\n document.removeEventListener('keydown', onKey);\n document.removeEventListener('pointerdown', onPointerDown, true);\n };\n\n // sincroniza slots ANTES de posicionar (header/footer alteram a altura)\n this._syncSlots();\n this._position(popup);\n this._previouslyFocused = document.activeElement as HTMLElement | null;\n requestAnimationFrame(() => popup.focus({ preventScroll: true }));\n this.dispatchEvent(new CustomEvent('show', { bubbles: true, composed: true }));\n }\n\n private _cleanup?: () => void;\n private _previouslyFocused: HTMLElement | null = null;\n\n private _anchor(): HTMLElement | null {\n const selector = this.getAttr('target');\n if (!selector) return null;\n try { return document.querySelector<HTMLElement>(selector); }\n catch { return null; }\n }\n\n private _syncSlots(): void {\n const header = this.root.querySelector<HTMLSlotElement>('slot[name=\"header\"]');\n const footer = this.root.querySelector<HTMLSlotElement>('slot[name=\"footer\"]');\n const headerWrap = this.root.querySelector<HTMLElement>('header');\n const footerWrap = this.root.querySelector<HTMLElement>('footer');\n const hasHeader = !!header && header.assignedNodes().length > 0;\n const hasFooter = !!footer && footer.assignedNodes().length > 0;\n headerWrap?.toggleAttribute('hidden', !hasHeader);\n footerWrap?.toggleAttribute('hidden', !hasFooter);\n }\n\n private _position(popup: HTMLElement): void {\n const anchor = this._anchor();\n if (!anchor) return;\n popup.hidden = false;\n\n const a = anchor.getBoundingClientRect();\n const p = popup.getBoundingClientRect();\n const gap = 8;\n const margin = 8;\n\n let side: 'top' | 'bottom';\n const pos = this.getAttr('position', 'auto');\n if (pos === 'top') side = 'top';\n else if (pos === 'bottom') side = 'bottom';\n else side = a.bottom + gap + p.height <= window.innerHeight - margin ? 'bottom' : 'top';\n\n // flip quando o lado forçado não cabe (evita sobrepor o anchor)\n if (side === 'top' && a.top - gap - p.height < margin && a.bottom + gap + p.height <= window.innerHeight - margin) {\n side = 'bottom';\n } else if (side === 'bottom' && a.bottom + gap + p.height > window.innerHeight - margin && a.top - gap - p.height >= margin) {\n side = 'top';\n }\n\n const left = Math.min(\n Math.max(margin, a.left + a.width / 2 - p.width / 2),\n window.innerWidth - p.width - margin,\n );\n const top = side === 'bottom' ? a.bottom + gap : a.top - gap - p.height;\n\n popup.dataset.side = side;\n popup.style.left = `${Math.round(left)}px`;\n popup.style.top = `${Math.round(Math.max(margin, top))}px`;\n const arrowX = Math.min(Math.max(a.left + a.width / 2 - left, 16), p.width - 16);\n popup.style.setProperty('--fxpp-arrow-x', `${Math.round(arrowX)}px`);\n }\n\n private _restoreFocus(): void {\n if (this._previouslyFocused?.isConnected) this._previouslyFocused.focus();\n this._previouslyFocused = null;\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n window.addEventListener('scroll', this._onReposition, true);\n window.addEventListener('resize', this._onReposition);\n this._bindTrigger();\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n window.removeEventListener('scroll', this._onReposition, true);\n window.removeEventListener('resize', this._onReposition);\n this._triggerCleanup?.();\n this._triggerCleanup = undefined;\n this._cleanup?.();\n this._cleanup = undefined;\n this._restoreFocus();\n }\n\n private _onReposition = (): void => {\n if (!this.open) return;\n const popup = this.root.querySelector<HTMLElement>('.popup');\n if (popup && !popup.hidden) this._position(popup);\n };\n\n private _bindTrigger(): void {\n const anchor = this._anchor();\n if (!anchor) return;\n const trigger = this.getAttr('trigger', 'click');\n\n if (trigger === 'hover') {\n anchor.addEventListener('mouseenter', this._onEnter);\n anchor.addEventListener('mouseleave', this._onLeave);\n this._triggerCleanup = () => {\n anchor.removeEventListener('mouseenter', this._onEnter);\n anchor.removeEventListener('mouseleave', this._onLeave);\n };\n } else {\n anchor.addEventListener('pointerdown', this._onClick);\n this._triggerCleanup = () => anchor.removeEventListener('pointerdown', this._onClick);\n }\n }\n\n private _triggerCleanup?: () => void;\n private _onEnter = (): void => { this.open = true; };\n private _onLeave = (): void => { this.open = false; };\n private _onClick = (): void => { this.open = !this.open; };\n}\n\nexport function defineFxPopover(): typeof FxPopover {\n return defineElement('fx-popover', FxPopover);\n}\n"],"names":[],"mappings":"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"}