@wrrdev/fenix-ui 1.1.2 → 1.1.3
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 +2 -2
- package/dist/_virtual/preload-helper.js +6 -3
- package/dist/_virtual/preload-helper.js.map +1 -1
- package/dist/components/alert/alert.js +2 -3
- package/dist/components/alert/alert.js.map +1 -1
- package/dist/components/confirmpopup/confirmpopup.js +2 -3
- package/dist/components/confirmpopup/confirmpopup.js.map +1 -1
- package/dist/components/timeline/timeline.js +2 -3
- package/dist/components/timeline/timeline.js.map +1 -1
- package/dist/components/toast/toast.js +2 -3
- package/dist/components/toast/toast.js.map +1 -1
- package/dist/fenix-ui3.esm.js +9 -7
- package/dist/fenix-ui3.esm.js.map +1 -1
- package/package.json +2 -2
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.
|
|
21
|
+
> 📦 npm: [`@wrrdev/fenix-ui`](https://www.npmjs.com/package/@wrrdev/fenix-ui) — **v1.1.3**, 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.
|
|
68
|
+
🔗 Links diretos para CDN (versão 1.1.3):
|
|
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,9 +1,12 @@
|
|
|
1
|
-
const scriptRel =
|
|
1
|
+
const scriptRel = function detectScriptRel() {
|
|
2
|
+
const relList = typeof document !== "undefined" && document.createElement("link").relList;
|
|
3
|
+
return relList && relList.supports && relList.supports("modulepreload") ? "modulepreload" : "preload";
|
|
4
|
+
}();
|
|
2
5
|
const assetsURL = function(dep, importerUrl) {
|
|
3
6
|
return new URL(dep, importerUrl).href;
|
|
4
7
|
};
|
|
5
8
|
const seen = {};
|
|
6
|
-
const
|
|
9
|
+
const __fenixPreload = function preload(baseModule, deps, importerUrl) {
|
|
7
10
|
let promise = Promise.resolve();
|
|
8
11
|
if (deps && deps.length > 0) {
|
|
9
12
|
const links = document.getElementsByTagName("link");
|
|
@@ -71,6 +74,6 @@ const __vitePreload = function preload(baseModule, deps, importerUrl) {
|
|
|
71
74
|
});
|
|
72
75
|
};
|
|
73
76
|
export {
|
|
74
|
-
|
|
77
|
+
__fenixPreload
|
|
75
78
|
};
|
|
76
79
|
//# sourceMappingURL=preload-helper.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"preload-helper.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"preload-helper.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
import { __vitePreload } from "../../_virtual/preload-helper.js";
|
|
1
|
+
import { __fenixPreload } from "../../_virtual/preload-helper.js";
|
|
3
2
|
import { FxElement } from "../../core/base.js";
|
|
4
3
|
import { css } from "../../core/css.js";
|
|
5
4
|
import { defineElement } from "../../core/define.js";
|
|
@@ -13,7 +12,7 @@ const _FxAlert = class _FxAlert extends FxElement {
|
|
|
13
12
|
const variant = this.getAttr("variant", "info");
|
|
14
13
|
const title = this.getAttr("title");
|
|
15
14
|
const iconName = this.getAttr("icon");
|
|
16
|
-
if (isFenixIconName(iconName)) void
|
|
15
|
+
if (isFenixIconName(iconName)) void __fenixPreload(() => import("../../icons/index.js"), true ? [] : void 0, import.meta.url);
|
|
17
16
|
const icons = {
|
|
18
17
|
info: "ℹ",
|
|
19
18
|
success: "✓",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"
|
|
1
|
+
{"version":3,"mappings":";;;;;;AAaO,MAAM,WAAN,MAAM,iBAAgB,UAAU;AAAA,EAsCrC,WAAoB,qBAA+B;AACjD,WAAO,CAAC,WAAW,SAAS,eAAe,MAAM;AAAA,EACnD;AAAA,EAEmB,SAAe;AAChC,UAAM,UAAU,KAAK,QAAQ,WAAW,MAAM;AAC9C,UAAM,QAAQ,KAAK,QAAQ,OAAO;AAClC,UAAM,WAAW,KAAK,QAAQ,MAAM;AACpC,QAAI,gBAAgB,QAAQ,EAAG,0BAAK,OAAO,sBAAa;AACxD,UAAM,QAAgC;AAAA,MACpC,MAAM;AAAA,MAAK,SAAS;AAAA,MAAK,SAAS;AAAA,MAAK,QAAQ;AAAA;AAEjD,UAAM,WAAW,WACb,oBAAoB,gBAAgB,QAAQ,IAAI,aAAa,EAAE,oCAAoC,IAAI,QAAQ,CAAC,YAChH,sBAAsB,MAAM,OAAO,KAAK,GAAG;AAE/C,SAAK,YAAY;AAAA;AAAA,UAEX,QAAQ;AAAA;AAAA,YAEN,QAAQ,sBAAsB,IAAI,KAAK,CAAC,WAAW,EAAE;AAAA;AAAA;AAAA,UAGvD,KAAK,QAAQ,aAAa,IAAI,uEAAuE,EAAE;AAAA;AAAA,KAE5G;AAED,SAAK,KAAK,cAAc,QAAQ,GAAG,iBAAiB,SAAS,MAAM;AACjE,WAAK,SAAS;AACd,WAAK,cAAc,IAAI,YAAY,WAAW,EAAE,SAAS,MAAM,UAAU,MAAM,CAAC;AAAA,IAClF,CAAC;AAAA,EACH;AACF;AArEE,SAAgB,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAwBrB,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAzBlB,IAAM,UAAN;AAwEA,SAAS,gBAAgC;AAC9C,SAAO,cAAc,YAAY,OAAO;AAC1C","names":[],"ignoreList":[],"sources":["../../../src/components/alert/alert.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-alert> — Aviso inline com variantes semânticas.\n *\n * Atributos: variant (info|success|warning|danger, padrão info), title, dismissible,\n * icon (nome da Fenix Icons, ex.: icon=\"notification\" — substitui o glifo padrão).\n * Slot padrão: conteúdo da mensagem. Evento `dismiss`.\n */\nexport class FxAlert extends FxElement {\n static override styles = css`\n :host {\n display: block;\n font-family: var(--fx-font-family);\n --_color: var(--fx-color-primary);\n --_bg: color-mix(in srgb, var(--fx-color-primary) 10%, var(--fx-surface-background));\n }\n :host([variant='info']) { --_color: var(--fx-color-info); --_bg: color-mix(in srgb, var(--fx-color-info) 10%, var(--fx-surface-background)); }\n :host([variant='success']) { --_color: var(--fx-color-success); --_bg: color-mix(in srgb, var(--fx-color-success) 10%, var(--fx-surface-background)); }\n :host([variant='warning']) { --_color: var(--fx-color-warning); --_bg: color-mix(in srgb, var(--fx-color-warning) 12%, var(--fx-surface-background)); }\n :host([variant='danger']) { --_color: var(--fx-color-danger); --_bg: color-mix(in srgb, var(--fx-color-danger) 10%, var(--fx-surface-background)); }\n .alert {\n display: flex;\n align-items: flex-start;\n gap: var(--fx-space-md);\n background: var(--_bg);\n border: 1px solid color-mix(in srgb, var(--_color) 30%, transparent);\n border-radius: var(--fx-radius-md);\n padding: var(--fx-space-md) var(--fx-space-lg);\n font-size: var(--fx-font-size);\n color: var(--fx-text-default);\n }\n :host([hidden]) { display: none; }\n .icon { color: var(--_color); font-weight: bold; line-height: 1.4; }\n ${FENIX_ICON_BASE_CSS}\n .icon.fx-icon { font-size: 20px; line-height: 1.2; }\n .content { flex: 1; }\n .title { font-weight: 600; }\n .body { margin-top: 2px; }\n .close {\n border: none; background: transparent; cursor: pointer;\n color: var(--fx-text-muted); font-size: calc(var(--fx-font-size) + 2px);\n line-height: 1; padding: 0; border-radius: var(--fx-radius-full);\n }\n .close:hover { color: var(--_color); }\n `;\n\n static override get observedAttributes(): string[] {\n return ['variant', 'title', 'dismissible', 'icon'];\n }\n\n protected override render(): void {\n const variant = this.getAttr('variant', 'info');\n const title = this.getAttr('title');\n const iconName = this.getAttr('icon');\n if (isFenixIconName(iconName)) void import('../../icons');\n const icons: Record<string, string> = {\n info: 'ℹ', success: '✓', warning: '⚠', danger: '✕',\n };\n const iconHtml = iconName\n ? `<span class=\"icon${isFenixIconName(iconName) ? ' fx-icon' : ''}\" part=\"icon\" aria-hidden=\"true\">${esc(iconName)}</span>`\n : `<span class=\"icon\">${icons[variant] ?? 'ℹ'}</span>`;\n\n this.setTemplate(`\n <div class=\"alert\" part=\"alert\" role=\"alert\">\n ${iconHtml}\n <div class=\"content\">\n ${title ? `<div class=\"title\">${esc(title)}</div>` : ''}\n <div class=\"body\"><slot></slot></div>\n </div>\n ${this.hasAttr('dismissible') ? '<button type=\"button\" class=\"close\" aria-label=\"Fechar\">×</button>' : ''}\n </div>\n `);\n\n this.root.querySelector('.close')?.addEventListener('click', () => {\n this.hidden = true;\n this.dispatchEvent(new CustomEvent('dismiss', { bubbles: true, composed: true }));\n });\n }\n}\n\nexport function defineFxAlert(): typeof FxAlert {\n return defineElement('fx-alert', FxAlert);\n}\n"],"file":"components/alert/alert.js"}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
import { __vitePreload } from "../../_virtual/preload-helper.js";
|
|
1
|
+
import { __fenixPreload } from "../../_virtual/preload-helper.js";
|
|
3
2
|
import { FxElement } from "../../core/base.js";
|
|
4
3
|
import { css } from "../../core/css.js";
|
|
5
4
|
import { defineElement } from "../../core/define.js";
|
|
@@ -28,7 +27,7 @@ const _FxConfirmPopup = class _FxConfirmPopup extends FxElement {
|
|
|
28
27
|
const message = this.getAttr("message");
|
|
29
28
|
const icon = this.getAttr("icon");
|
|
30
29
|
const iconIsFx = isFenixIconName(icon);
|
|
31
|
-
if (iconIsFx) void
|
|
30
|
+
if (iconIsFx) void __fenixPreload(() => import("../../icons/index.js"), true ? [] : void 0, import.meta.url);
|
|
32
31
|
const acceptLabel = this.getAttr("accept-label", "Sim");
|
|
33
32
|
const rejectLabel = this.getAttr("reject-label", "Não");
|
|
34
33
|
this.setTemplate(`
|
|
@@ -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 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,5 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
import { __vitePreload } from "../../_virtual/preload-helper.js";
|
|
1
|
+
import { __fenixPreload } from "../../_virtual/preload-helper.js";
|
|
3
2
|
import { FxElement } from "../../core/base.js";
|
|
4
3
|
import { css } from "../../core/css.js";
|
|
5
4
|
import { defineElement } from "../../core/define.js";
|
|
@@ -34,7 +33,7 @@ const _FxTimeline = class _FxTimeline extends FxElement {
|
|
|
34
33
|
const dot = icon ? `<span class="dot fx-icon" part="marker" aria-hidden="true">${esc(icon)}</span>` : `<span class="dot" part="marker" aria-hidden="true">${esc(marker)}</span>`;
|
|
35
34
|
return `<li class="event" part="event">${dot}<div class="head">${head}</div><div class="content">${item.innerHTML}</div></li>`;
|
|
36
35
|
}).join("");
|
|
37
|
-
if (items.some((item) => item.hasAttribute("icon"))) void
|
|
36
|
+
if (items.some((item) => item.hasAttribute("icon"))) void __fenixPreload(() => import("../../icons/index.js"), true ? [] : void 0, import.meta.url);
|
|
38
37
|
}
|
|
39
38
|
connectedCallback() {
|
|
40
39
|
super.connectedCallback();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"
|
|
1
|
+
{"version":3,"mappings":";;;;;AAmBO,MAAM,cAAN,MAAM,oBAAmB,UAAU;AAAA,EA0GxC,WAAoB,qBAA+B;AACjD,WAAO,CAAC,UAAU,QAAQ,aAAa;AAAA,EACzC;AAAA,EAEmB,SAAe;AAChC,SAAK,YAAY,sCAAsC;AACvD,SAAK;AAAA,EACP;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOQ,YAAkB;AACxB,UAAM,OAAO,KAAK,YAAY,cAAc,IAAI;AAChD,QAAI,CAAC,KAAM;AACX,UAAM,SAAS,KAAK,QAAQ,UAAU,GAAG;AACzC,UAAM,QAAQ,MAAM,KAAK,KAAK,iBAAiB,eAAe,CAAC;AAC/D,QAAI,CAAC,MAAM,OAAQ;AAEnB,SAAK,YAAY,MACd,IAAI,CAAC,SAAS;AACb,YAAM,OAAO,KAAK,aAAa,MAAM,KAAK;AAC1C,YAAM,QAAQ,KAAK,aAAa,OAAO,KAAK;AAC5C,YAAM,OAAO;AAAA,QACX,OAAO,sBAAsB,IAAI,IAAI,CAAC,YAAY;AAAA,QAClD,QAAQ,uBAAuB,IAAI,KAAK,CAAC,YAAY;AAAA,QACrD,KAAK,EAAE;AAET,YAAM,OAAO,KAAK,aAAa,MAAM;AACrC,YAAM,MAAM,OACR,8DAA8D,IAAI,IAAI,CAAC,YACvE,sDAAsD,IAAI,MAAM,CAAC;AACrE,aAAO,kCAAkC,GAAG,qBAAqB,IAAI,8BAA8B,KAAK,SAAS;AAAA,IACnH,CAAC,EACA,KAAK,EAAE;AAEV,QAAI,MAAM,KAAK,CAAC,SAAS,KAAK,aAAa,MAAM,CAAC,EAAG,0BAAK,OAAO,sBAAa;EAChF;AAAA,EAImB,oBAA0B;AAC3C,UAAM;AAEN,SAAK,YAAY,IAAI,iBAAiB,MAAM,KAAK,WAAW;AAC5D,SAAK,UAAU,QAAQ,MAAM,EAAE,WAAW,MAAM,SAAS,OAAO;AAChE,SAAK;AAAA,EACP;AAAA,EAEmB,uBAA6B;AAC9C,UAAM;AACN,SAAK,WAAW;AAChB,SAAK,YAAY;AAAA,EACnB;AACF;AAjKE,YAAgB,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AADpB,IAAM,aAAN;AAoKA,SAAS,mBAAsC;AACpD,SAAO,cAAc,eAAe,UAAU;AAChD","names":[],"ignoreList":[],"sources":["../../../src/components/timeline/timeline.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-timeline> — Linha do tempo vertical com eventos.\n *\n * Atributos: marker (glifo do marcador, padrão '●'), size (sm|md|lg).\n * Slot `item`: cada elemento com [slot=\"item\"] vira um evento. Use os\n * atributos `time` (texto do horário/data), `title` e `icon` (glifo da\n * fonte Fenix Icons, ex.: \"check_circle\") no item.\n *\n * Exemplo:\n * <fx-timeline>\n * <div slot=\"item\" time=\"09:00\" title=\"Reunião\">Detalhes…</div>\n * <div slot=\"item\" time=\"14:00\" title=\"Deploy\">Detalhes…</div>\n * </fx-timeline>\n */\nexport class FxTimeline extends FxElement {\n static override styles = css`\n :host {\n display: block;\n font-family: var(--fx-font-family);\n font-size: var(--fx-font-size);\n --_marker: calc(var(--fx-font-size) + 6px);\n }\n :host([size='sm']) { --_marker: calc(var(--fx-font-size) - 2px); }\n :host([size='lg']) { --_marker: calc(var(--fx-font-size) + 14px); }\n\n .tl {\n list-style: none;\n margin: 0;\n padding: 0;\n position: relative;\n }\n /* linha vertical centralizada no eixo dos marcadores */\n .tl::before {\n content: '';\n position: absolute;\n left: calc(var(--_marker) / 2 - 1px);\n top: calc(var(--_marker) / 2);\n bottom: 6px;\n width: 2px;\n background: var(--fx-border-default);\n }\n .event {\n position: relative;\n padding: 0 0 var(--fx-space-lg) calc(var(--_marker) + var(--fx-space-lg));\n }\n .event:last-child { padding-bottom: 0; }\n /* marcador circular centralizado no eixo da linha */\n .dot {\n position: absolute;\n left: 0;\n top: 0;\n width: var(--_marker);\n height: var(--_marker);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: calc(var(--_marker) * 0.5);\n color: var(--fx-color-primary);\n line-height: 1;\n }\n /* marcador com ícone da fonte Fenix Icons (atributo icon no item) */\n .dot.fx-icon {\n font-family: var(--fx-icon-font, 'Fenix Icons');\n font-weight: normal;\n font-style: normal;\n font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;\n -webkit-font-smoothing: antialiased;\n user-select: none;\n background: color-mix(in srgb, var(--fx-color-primary) 14%, transparent);\n border-radius: 50%;\n font-size: calc(var(--_marker) * 0.55);\n }\n .head {\n display: flex;\n align-items: baseline;\n gap: var(--fx-space-sm);\n flex-wrap: wrap;\n min-height: var(--_marker);\n }\n .time {\n font-size: calc(var(--fx-font-size) - 2px);\n color: var(--fx-text-muted);\n white-space: nowrap;\n }\n .title {\n font-weight: 600;\n color: var(--fx-text-default);\n }\n .content {\n margin-top: 2px;\n color: var(--fx-text-default);\n line-height: 1.5;\n }\n .event[hidden] { display: none; }\n\n /* ---- modo horizontal ---- */\n :host([orientation='horizontal']) .tl {\n display: flex;\n }\n :host([orientation='horizontal']) .tl::before {\n left: calc(var(--_marker) / 2 - 1px);\n right: calc(var(--_marker) / 2);\n top: calc(var(--_marker) / 2 - 1px);\n bottom: auto;\n width: auto;\n height: 2px;\n }\n :host([orientation='horizontal']) .event {\n flex: 1;\n display: flex;\n flex-direction: column;\n padding: 0 var(--fx-space-lg) 0 0;\n }\n :host([orientation='horizontal']) .event:last-child { padding-right: 0; }\n :host([orientation='horizontal']) .event .dot {\n position: static;\n margin-bottom: var(--fx-space-sm);\n }\n `;\n\n static override get observedAttributes(): string[] {\n return ['marker', 'size', 'orientation'];\n }\n\n protected override render(): void {\n this.setTemplate(`<ol class=\"tl\" part=\"timeline\"></ol>`);\n this._decorate();\n }\n\n /**\n * Monta os eventos a partir dos itens do light DOM.\n * Os itens permanecem no light DOM (sem slot correspondente, não são\n * renderizados) — assim a decoração é idempotente e sobrevive a re-renders.\n */\n private _decorate(): void {\n const list = this.shadowRoot?.querySelector('ol');\n if (!list) return;\n const marker = this.getAttr('marker', '●');\n const items = Array.from(this.querySelectorAll('[slot=\"item\"]'));\n if (!items.length) return;\n\n list.innerHTML = items\n .map((item) => {\n const time = item.getAttribute('time') ?? '';\n const title = item.getAttribute('title') ?? '';\n const head = [\n time ? `<span class=\"time\">${esc(time)}</span>` : '',\n title ? `<span class=\"title\">${esc(title)}</span>` : '',\n ].join('');\n // Ícone por item (atributo icon) tem prioridade sobre o glifo global (marker).\n const icon = item.getAttribute('icon');\n const dot = icon\n ? `<span class=\"dot fx-icon\" part=\"marker\" aria-hidden=\"true\">${esc(icon)}</span>`\n : `<span class=\"dot\" part=\"marker\" aria-hidden=\"true\">${esc(marker)}</span>`;\n return `<li class=\"event\" part=\"event\">${dot}<div class=\"head\">${head}</div><div class=\"content\">${item.innerHTML}</div></li>`;\n })\n .join('');\n // Garante a fonte de ícones quando algum item usa icon=\"…\" (auto-injeção única).\n if (items.some((item) => item.hasAttribute('icon'))) void import('../../icons');\n }\n\n private _observer?: MutationObserver;\n\n protected override connectedCallback(): void {\n super.connectedCallback();\n // filhos podem chegar depois (innerHTML do playground)\n this._observer = new MutationObserver(() => this._decorate());\n this._observer.observe(this, { childList: true, subtree: false });\n this._decorate();\n }\n\n protected override disconnectedCallback(): void {\n super.disconnectedCallback();\n this._observer?.disconnect();\n this._observer = undefined;\n }\n}\n\nexport function defineFxTimeline(): typeof FxTimeline {\n return defineElement('fx-timeline', FxTimeline);\n}"],"file":"components/timeline/timeline.js"}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["../../icons/index.js","../../icons/names.js","../../icons/base-css.js"])))=>i.map(i=>d[i]);
|
|
2
1
|
var __typeError = (msg) => {
|
|
3
2
|
throw TypeError(msg);
|
|
4
3
|
};
|
|
@@ -6,7 +5,7 @@ var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot
|
|
|
6
5
|
var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
|
|
7
6
|
var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
|
|
8
7
|
var _FxToast_instances, render_fn;
|
|
9
|
-
import {
|
|
8
|
+
import { __fenixPreload } from "../../_virtual/preload-helper.js";
|
|
10
9
|
const KIND_COLOR = {
|
|
11
10
|
success: "var(--fx-color-success, #10b981)",
|
|
12
11
|
error: "var(--fx-color-danger, #f43f5e)",
|
|
@@ -135,7 +134,7 @@ render_fn = function() {
|
|
|
135
134
|
const color = KIND_COLOR[kind] ?? KIND_COLOR.info;
|
|
136
135
|
const iconName = this.getAttribute("icon");
|
|
137
136
|
const isFxIcon = !!iconName && /^[a-z][a-z0-9_]*$/.test(iconName);
|
|
138
|
-
if (isFxIcon) void
|
|
137
|
+
if (isFxIcon) void __fenixPreload(() => import("../../icons/index.js"), true ? [] : void 0, import.meta.url);
|
|
139
138
|
const iconContent = isFxIcon ? iconName : KIND_ICON[kind] ?? KIND_ICON.info;
|
|
140
139
|
this.shadowRoot.innerHTML = `
|
|
141
140
|
<style>${CARD_CSS}</style>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"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","names":[],"ignoreList":[],"sources":["../../../src/components/toast/toast.ts"],"sourcesContent":["/**\n * <fx-toast> — notificações imperativas com posição e duração configuráveis.\n *\n * Atributos: kind (success|error|info|warning), title, message,\n * position (top-left|top-center|top-right|bottom-left|bottom-center|bottom-right),\n * duration (ms; 0 = fixo até fechar), mode ('light'|'dark' — força o esquema de\n * cores do card independentemente do tema global).\n */\nconst POSITIONS = [\n 'top-left', 'top-center', 'top-right',\n 'bottom-left', 'bottom-center', 'bottom-right',\n] as const;\nexport type ToastPosition = (typeof POSITIONS)[number];\ntype ToastKind = 'success' | 'error' | 'info' | 'warning';\n\nconst KIND_COLOR: Record<ToastKind, string> = {\n success: 'var(--fx-color-success, #10b981)',\n error: 'var(--fx-color-danger, #f43f5e)',\n info: 'var(--fx-color-info, #0ea5e9)',\n warning: 'var(--fx-color-warning, #f59e0b)',\n};\n\n/** Ícone exibido no lugar da bolinha, conforme a variante. */\nconst KIND_ICON: Record<ToastKind, string> = {\n success: '✓',\n error: '✕',\n warning: '!',\n info: 'i',\n};\n\nconst CARD_CSS = `\n:host { display: contents; pointer-events: auto; }\n/* Modo explícito: sobrepõe os tokens herdados do tema global SOMENTE neste card. */\n:host([mode='dark']) {\n --fx-surface-background: #1e293b;\n --fx-text-default: #f1f5f9;\n --fx-text-muted: #94a3b8;\n --fx-border-default: #334155;\n --fx-shadow-lg: 0 10px 30px rgba(0, 0, 0, .5);\n --fx-surface-surface-hover: rgba(255, 255, 255, .08);\n}\n:host([mode='light']) {\n --fx-surface-background: #ffffff;\n --fx-text-default: #1e293b;\n --fx-text-muted: #64748b;\n --fx-border-default: #e2e8f0;\n --fx-shadow-lg: 0 10px 30px rgba(0, 0, 0, .14);\n --fx-surface-surface-hover: rgba(0, 0, 0, .05);\n}\n.fx-icon {\n font-family: var(--fx-icon-font, 'Fenix Icons');\n font-weight: normal;\n font-style: normal;\n line-height: 1;\n letter-spacing: normal;\n display: inline-block;\n white-space: nowrap;\n direction: ltr;\n font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;\n -webkit-font-smoothing: antialiased;\n user-select: none;\n}\n.card {\n display: flex; align-items: flex-start; gap: 10px;\n min-width: 260px; max-width: 360px;\n background: var(--fx-surface-background, #fff);\n color: var(--fx-text-default, #1e293b);\n border: 1px solid var(--fx-border-default, #e2e8f0);\n border-left: 4px solid var(--kind);\n border-radius: var(--fx-radius-md, 8px);\n box-shadow: var(--fx-shadow-lg, 0 10px 30px rgba(0,0,0,.14));\n padding: var(--fx-space-sm, 8px) var(--fx-space-md, 12px);\n font-family: inherit;\n animation: fx-toast-in .25s ease;\n}\n@keyframes fx-toast-in { from { opacity: 0; transform: translateY(-6px); } }\n.card.leaving { opacity: 0; transition: opacity .2s ease; }\n.icon {\n width: 22px; height: 22px; border-radius: 50%;\n background: var(--kind);\n color: #fff;\n display: flex; align-items: center; justify-content: center;\n font-size: 12px; font-weight: 700;\n flex: none; margin-top: 2px;\n user-select: none;\n}\n.body { flex: 1; min-width: 0; }\n.title { font-weight: 600; font-size: 14px; }\n.msg { font-size: calc(var(--fx-font-size, 14px) - 2px); color: var(--fx-text-muted, #64748b); margin-top: 2px; word-break: break-word; white-space: pre-line; }\n.close {\n all: unset; cursor: pointer; flex: none; line-height: 1;\n color: var(--fx-text-muted, #64748b); font-size: 15px; padding: 2px 4px; border-radius: 4px;\n}\n.close:hover { color: var(--fx-color-danger, #f43f5e); background: var(--fx-surface-surface-hover, rgba(0,0,0,.05)); }\n`;\n\nexport class FxToast extends HTMLElement {\n static get observedAttributes() {\n return ['kind', 'title', 'message', 'duration', 'icon', 'mode'];\n }\n\n /** Esquema de cores forçado do card: 'light' | 'dark' | undefined (segue o tema). */\n get mode(): 'light' | 'dark' | undefined {\n const m = this.getAttribute('mode');\n return m === 'light' || m === 'dark' ? m : undefined;\n }\n set mode(value: 'light' | 'dark' | undefined) {\n if (value) this.setAttribute('mode', value);\n else this.removeAttribute('mode');\n }\n\n private timer: ReturnType<typeof setTimeout> | null = null;\n\n constructor() {\n super();\n this.attachShadow({ mode: 'open' });\n }\n\n connectedCallback() {\n if (!this.shadowRoot!.firstChild) this.#render();\n const dur = Number(this.getAttribute('duration') ?? '4000');\n // Durações mínimas: valores muito baixos (ex.: digitação parcial no\n // playground) são elevados para 1s; 0 permanece fixo até fechar.\n const safe = dur === 0 ? 0 : Math.max(Number.isNaN(dur) ? 4000 : dur, 1000);\n if (!Number.isNaN(safe) && safe > 0 && !this.timer) {\n this.timer = setTimeout(() => this.dismiss(), safe);\n }\n }\n\n disconnectedCallback() {\n if (this.timer) clearTimeout(this.timer);\n this.timer = null;\n }\n\n dismiss() {\n if (this.timer) clearTimeout(this.timer);\n this.timer = null;\n const card = this.shadowRoot!.querySelector('.card');\n if (card) {\n card.classList.add('leaving');\n setTimeout(() => this.remove(), 200);\n } else {\n this.remove();\n }\n }\n\n #render() {\n const kind = (this.getAttribute('kind') || 'info') as ToastKind;\n const title = this.getAttribute('title') ?? '';\n const msg = this.getAttribute('message') ?? '';\n const color = KIND_COLOR[kind] ?? KIND_COLOR.info;\n const iconName = this.getAttribute('icon');\n const isFxIcon = !!iconName && /^[a-z][a-z0-9_]*$/.test(iconName);\n if (isFxIcon) void import('../../icons');\n const iconContent = isFxIcon ? iconName : KIND_ICON[kind] ?? KIND_ICON.info;\n this.shadowRoot!.innerHTML = `\n <style>${CARD_CSS}</style>\n <div class=\"card\" style=\"--kind:${color}\" role=\"status\" part=\"card\">\n <span class=\"icon${isFxIcon ? ' fx-icon' : ''}\">${iconContent}</span>\n <div class=\"body\">\n ${title ? '<div class=\"title\"></div>' : ''}\n ${msg ? '<div class=\"msg\"></div>' : ''}\n </div>\n <button class=\"close\" aria-label=\"Fechar\">✕</button>\n </div>`;\n const t = this.shadowRoot!.querySelector<HTMLElement>('.title');\n const m = this.shadowRoot!.querySelector<HTMLElement>('.msg');\n if (t) t.textContent = title;\n if (m) m.textContent = msg;\n this.shadowRoot!.querySelector('.close')!.addEventListener('click', () => this.dismiss());\n }\n}\n\n/* ---------- Regiões por posição na tela ---------- */\nfunction regionFor(position: ToastPosition): HTMLElement {\n let region = document.querySelector<HTMLElement>(`[data-fx-toast-region=\"${position}\"]`);\n if (!region) {\n region = document.createElement('div');\n region.setAttribute('data-fx-toast-region', position);\n const [vertical, horizontal] = position.split('-') as [string, string];\n const style = region.style as CSSStyleDeclaration & Record<string, string>;\n style.position = 'fixed';\n style[vertical] = '16px';\n if (horizontal === 'center') {\n style.left = '50%';\n style.transform = 'translateX(-50%)';\n } else {\n style[horizontal] = '16px';\n }\n style.display = 'flex';\n style.flexDirection = 'column';\n style.gap = '8px';\n style.zIndex = '1100';\n style.pointerEvents = 'none';\n // Os cards reabilitam pointer-events via `:host { pointer-events: auto }` (herança),\n // sem necessidade de MutationObserver.\n document.body.appendChild(region);\n }\n return region;\n}\n\nexport interface ToastOptions {\n /** Texto secundário (também aceito como 2º argumento dos métodos). */\n message?: string;\n position?: ToastPosition;\n /** Tempo em ms até sumir. 0 = fixo até fechar. Padrão: 4000 */\n duration?: number;\n /** Força o esquema de cores do card, independentemente do tema global. */\n mode?: 'light' | 'dark';\n}\n\nclass ToastApi {\n private seq = 0;\n private map = new Map<number, FxToast>();\n\n push(kind: ToastKind, title: string, messageOrOpts?: string | ToastOptions, opts?: ToastOptions): number {\n const id = ++this.seq;\n // Assinaturas suportadas:\n // push(kind, title, options)\n // push(kind, title, message, options) <- usada pela doc e mais intuitiva\n const message = typeof messageOrOpts === 'string' ? messageOrOpts : messageOrOpts?.message;\n const o: ToastOptions = { ...(typeof messageOrOpts === 'object' && messageOrOpts ? messageOrOpts : undefined), ...opts };\n const el = document.createElement('fx-toast') as FxToast;\n el.setAttribute('kind', kind);\n el.setAttribute('title', title);\n if (message) el.setAttribute('message', message);\n el.setAttribute('position', o.position ?? 'top-right');\n el.setAttribute('duration', String(o.duration ?? 4000));\n if (o.mode) el.setAttribute('mode', o.mode);\n regionFor(o.position ?? 'top-right').appendChild(el);\n this.map.set(id, el);\n return id;\n }\n\n close(id: number) {\n this.map.get(id)?.dismiss();\n this.map.delete(id);\n }\n\n success = (t: string, m?: string, o?: ToastOptions) => this.push('success', t, m, o);\n error = (t: string, m?: string, o?: ToastOptions) => this.push('error', t, m, o);\n info = (t: string, m?: string, o?: ToastOptions) => this.push('info', t, m, o);\n warning = (t: string, m?: string, o?: ToastOptions) => this.push('warning', t, m, o);\n}\n\nexport const FenixToast = new ToastApi();\n// Exposto globalmente para uso em HTML puro (onclick=\"FenixToast.success(...)\")\n(globalThis as unknown as Record<string, unknown>).FenixToast = FenixToast;\n\nexport function defineFxToast() {\n if (!customElements.get('fx-toast')) customElements.define('fx-toast', FxToast);\n}\n\n"],"file":"components/toast/toast.js"}
|
|
1
|
+
{"version":3,"mappings":"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","names":[],"ignoreList":[],"sources":["../../../src/components/toast/toast.ts"],"sourcesContent":["/**\n * <fx-toast> — notificações imperativas com posição e duração configuráveis.\n *\n * Atributos: kind (success|error|info|warning), title, message,\n * position (top-left|top-center|top-right|bottom-left|bottom-center|bottom-right),\n * duration (ms; 0 = fixo até fechar), mode ('light'|'dark' — força o esquema de\n * cores do card independentemente do tema global).\n */\nconst POSITIONS = [\n 'top-left', 'top-center', 'top-right',\n 'bottom-left', 'bottom-center', 'bottom-right',\n] as const;\nexport type ToastPosition = (typeof POSITIONS)[number];\ntype ToastKind = 'success' | 'error' | 'info' | 'warning';\n\nconst KIND_COLOR: Record<ToastKind, string> = {\n success: 'var(--fx-color-success, #10b981)',\n error: 'var(--fx-color-danger, #f43f5e)',\n info: 'var(--fx-color-info, #0ea5e9)',\n warning: 'var(--fx-color-warning, #f59e0b)',\n};\n\n/** Ícone exibido no lugar da bolinha, conforme a variante. */\nconst KIND_ICON: Record<ToastKind, string> = {\n success: '✓',\n error: '✕',\n warning: '!',\n info: 'i',\n};\n\nconst CARD_CSS = `\n:host { display: contents; pointer-events: auto; }\n/* Modo explícito: sobrepõe os tokens herdados do tema global SOMENTE neste card. */\n:host([mode='dark']) {\n --fx-surface-background: #1e293b;\n --fx-text-default: #f1f5f9;\n --fx-text-muted: #94a3b8;\n --fx-border-default: #334155;\n --fx-shadow-lg: 0 10px 30px rgba(0, 0, 0, .5);\n --fx-surface-surface-hover: rgba(255, 255, 255, .08);\n}\n:host([mode='light']) {\n --fx-surface-background: #ffffff;\n --fx-text-default: #1e293b;\n --fx-text-muted: #64748b;\n --fx-border-default: #e2e8f0;\n --fx-shadow-lg: 0 10px 30px rgba(0, 0, 0, .14);\n --fx-surface-surface-hover: rgba(0, 0, 0, .05);\n}\n.fx-icon {\n font-family: var(--fx-icon-font, 'Fenix Icons');\n font-weight: normal;\n font-style: normal;\n line-height: 1;\n letter-spacing: normal;\n display: inline-block;\n white-space: nowrap;\n direction: ltr;\n font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;\n -webkit-font-smoothing: antialiased;\n user-select: none;\n}\n.card {\n display: flex; align-items: flex-start; gap: 10px;\n min-width: 260px; max-width: 360px;\n background: var(--fx-surface-background, #fff);\n color: var(--fx-text-default, #1e293b);\n border: 1px solid var(--fx-border-default, #e2e8f0);\n border-left: 4px solid var(--kind);\n border-radius: var(--fx-radius-md, 8px);\n box-shadow: var(--fx-shadow-lg, 0 10px 30px rgba(0,0,0,.14));\n padding: var(--fx-space-sm, 8px) var(--fx-space-md, 12px);\n font-family: inherit;\n animation: fx-toast-in .25s ease;\n}\n@keyframes fx-toast-in { from { opacity: 0; transform: translateY(-6px); } }\n.card.leaving { opacity: 0; transition: opacity .2s ease; }\n.icon {\n width: 22px; height: 22px; border-radius: 50%;\n background: var(--kind);\n color: #fff;\n display: flex; align-items: center; justify-content: center;\n font-size: 12px; font-weight: 700;\n flex: none; margin-top: 2px;\n user-select: none;\n}\n.body { flex: 1; min-width: 0; }\n.title { font-weight: 600; font-size: 14px; }\n.msg { font-size: calc(var(--fx-font-size, 14px) - 2px); color: var(--fx-text-muted, #64748b); margin-top: 2px; word-break: break-word; white-space: pre-line; }\n.close {\n all: unset; cursor: pointer; flex: none; line-height: 1;\n color: var(--fx-text-muted, #64748b); font-size: 15px; padding: 2px 4px; border-radius: 4px;\n}\n.close:hover { color: var(--fx-color-danger, #f43f5e); background: var(--fx-surface-surface-hover, rgba(0,0,0,.05)); }\n`;\n\nexport class FxToast extends HTMLElement {\n static get observedAttributes() {\n return ['kind', 'title', 'message', 'duration', 'icon', 'mode'];\n }\n\n /** Esquema de cores forçado do card: 'light' | 'dark' | undefined (segue o tema). */\n get mode(): 'light' | 'dark' | undefined {\n const m = this.getAttribute('mode');\n return m === 'light' || m === 'dark' ? m : undefined;\n }\n set mode(value: 'light' | 'dark' | undefined) {\n if (value) this.setAttribute('mode', value);\n else this.removeAttribute('mode');\n }\n\n private timer: ReturnType<typeof setTimeout> | null = null;\n\n constructor() {\n super();\n this.attachShadow({ mode: 'open' });\n }\n\n connectedCallback() {\n if (!this.shadowRoot!.firstChild) this.#render();\n const dur = Number(this.getAttribute('duration') ?? '4000');\n // Durações mínimas: valores muito baixos (ex.: digitação parcial no\n // playground) são elevados para 1s; 0 permanece fixo até fechar.\n const safe = dur === 0 ? 0 : Math.max(Number.isNaN(dur) ? 4000 : dur, 1000);\n if (!Number.isNaN(safe) && safe > 0 && !this.timer) {\n this.timer = setTimeout(() => this.dismiss(), safe);\n }\n }\n\n disconnectedCallback() {\n if (this.timer) clearTimeout(this.timer);\n this.timer = null;\n }\n\n dismiss() {\n if (this.timer) clearTimeout(this.timer);\n this.timer = null;\n const card = this.shadowRoot!.querySelector('.card');\n if (card) {\n card.classList.add('leaving');\n setTimeout(() => this.remove(), 200);\n } else {\n this.remove();\n }\n }\n\n #render() {\n const kind = (this.getAttribute('kind') || 'info') as ToastKind;\n const title = this.getAttribute('title') ?? '';\n const msg = this.getAttribute('message') ?? '';\n const color = KIND_COLOR[kind] ?? KIND_COLOR.info;\n const iconName = this.getAttribute('icon');\n const isFxIcon = !!iconName && /^[a-z][a-z0-9_]*$/.test(iconName);\n if (isFxIcon) void import('../../icons');\n const iconContent = isFxIcon ? iconName : KIND_ICON[kind] ?? KIND_ICON.info;\n this.shadowRoot!.innerHTML = `\n <style>${CARD_CSS}</style>\n <div class=\"card\" style=\"--kind:${color}\" role=\"status\" part=\"card\">\n <span class=\"icon${isFxIcon ? ' fx-icon' : ''}\">${iconContent}</span>\n <div class=\"body\">\n ${title ? '<div class=\"title\"></div>' : ''}\n ${msg ? '<div class=\"msg\"></div>' : ''}\n </div>\n <button class=\"close\" aria-label=\"Fechar\">✕</button>\n </div>`;\n const t = this.shadowRoot!.querySelector<HTMLElement>('.title');\n const m = this.shadowRoot!.querySelector<HTMLElement>('.msg');\n if (t) t.textContent = title;\n if (m) m.textContent = msg;\n this.shadowRoot!.querySelector('.close')!.addEventListener('click', () => this.dismiss());\n }\n}\n\n/* ---------- Regiões por posição na tela ---------- */\nfunction regionFor(position: ToastPosition): HTMLElement {\n let region = document.querySelector<HTMLElement>(`[data-fx-toast-region=\"${position}\"]`);\n if (!region) {\n region = document.createElement('div');\n region.setAttribute('data-fx-toast-region', position);\n const [vertical, horizontal] = position.split('-') as [string, string];\n const style = region.style as CSSStyleDeclaration & Record<string, string>;\n style.position = 'fixed';\n style[vertical] = '16px';\n if (horizontal === 'center') {\n style.left = '50%';\n style.transform = 'translateX(-50%)';\n } else {\n style[horizontal] = '16px';\n }\n style.display = 'flex';\n style.flexDirection = 'column';\n style.gap = '8px';\n style.zIndex = '1100';\n style.pointerEvents = 'none';\n // Os cards reabilitam pointer-events via `:host { pointer-events: auto }` (herança),\n // sem necessidade de MutationObserver.\n document.body.appendChild(region);\n }\n return region;\n}\n\nexport interface ToastOptions {\n /** Texto secundário (também aceito como 2º argumento dos métodos). */\n message?: string;\n position?: ToastPosition;\n /** Tempo em ms até sumir. 0 = fixo até fechar. Padrão: 4000 */\n duration?: number;\n /** Força o esquema de cores do card, independentemente do tema global. */\n mode?: 'light' | 'dark';\n}\n\nclass ToastApi {\n private seq = 0;\n private map = new Map<number, FxToast>();\n\n push(kind: ToastKind, title: string, messageOrOpts?: string | ToastOptions, opts?: ToastOptions): number {\n const id = ++this.seq;\n // Assinaturas suportadas:\n // push(kind, title, options)\n // push(kind, title, message, options) <- usada pela doc e mais intuitiva\n const message = typeof messageOrOpts === 'string' ? messageOrOpts : messageOrOpts?.message;\n const o: ToastOptions = { ...(typeof messageOrOpts === 'object' && messageOrOpts ? messageOrOpts : undefined), ...opts };\n const el = document.createElement('fx-toast') as FxToast;\n el.setAttribute('kind', kind);\n el.setAttribute('title', title);\n if (message) el.setAttribute('message', message);\n el.setAttribute('position', o.position ?? 'top-right');\n el.setAttribute('duration', String(o.duration ?? 4000));\n if (o.mode) el.setAttribute('mode', o.mode);\n regionFor(o.position ?? 'top-right').appendChild(el);\n this.map.set(id, el);\n return id;\n }\n\n close(id: number) {\n this.map.get(id)?.dismiss();\n this.map.delete(id);\n }\n\n success = (t: string, m?: string, o?: ToastOptions) => this.push('success', t, m, o);\n error = (t: string, m?: string, o?: ToastOptions) => this.push('error', t, m, o);\n info = (t: string, m?: string, o?: ToastOptions) => this.push('info', t, m, o);\n warning = (t: string, m?: string, o?: ToastOptions) => this.push('warning', t, m, o);\n}\n\nexport const FenixToast = new ToastApi();\n// Exposto globalmente para uso em HTML puro (onclick=\"FenixToast.success(...)\")\n(globalThis as unknown as Record<string, unknown>).FenixToast = FenixToast;\n\nexport function defineFxToast() {\n if (!customElements.get('fx-toast')) customElements.define('fx-toast', FxToast);\n}\n\n"],"file":"components/toast/toast.js"}
|
package/dist/fenix-ui3.esm.js
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["./fenix-ui2.esm.js","./assets/base-css-BifSeW2H.js"])))=>i.map(i=>d[i]);
|
|
2
1
|
var __typeError = (msg) => {
|
|
3
2
|
throw TypeError(msg);
|
|
4
3
|
};
|
|
@@ -4201,12 +4200,15 @@ function defineFxDialog() {
|
|
|
4201
4200
|
return defineElement("fx-dialog", FxDialog);
|
|
4202
4201
|
}
|
|
4203
4202
|
defineFxDialog();
|
|
4204
|
-
const scriptRel =
|
|
4203
|
+
const scriptRel = function detectScriptRel() {
|
|
4204
|
+
const relList = typeof document !== "undefined" && document.createElement("link").relList;
|
|
4205
|
+
return relList && relList.supports && relList.supports("modulepreload") ? "modulepreload" : "preload";
|
|
4206
|
+
}();
|
|
4205
4207
|
const assetsURL = function(dep, importerUrl) {
|
|
4206
4208
|
return new URL(dep, importerUrl).href;
|
|
4207
4209
|
};
|
|
4208
4210
|
const seen = {};
|
|
4209
|
-
const
|
|
4211
|
+
const __fenixPreload = function preload(baseModule, deps, importerUrl) {
|
|
4210
4212
|
let promise = Promise.resolve();
|
|
4211
4213
|
if (deps && deps.length > 0) {
|
|
4212
4214
|
const links = document.getElementsByTagName("link");
|
|
@@ -4296,7 +4298,7 @@ const _FxConfirmPopup = class _FxConfirmPopup extends FxElement {
|
|
|
4296
4298
|
const message = this.getAttr("message");
|
|
4297
4299
|
const icon = this.getAttr("icon");
|
|
4298
4300
|
const iconIsFx = isFenixIconName(icon);
|
|
4299
|
-
if (iconIsFx) void
|
|
4301
|
+
if (iconIsFx) void __fenixPreload(() => import("./fenix-ui2.esm.js"), true ? [] : void 0, import.meta.url);
|
|
4300
4302
|
const acceptLabel = this.getAttr("accept-label", "Sim");
|
|
4301
4303
|
const rejectLabel = this.getAttr("reject-label", "Não");
|
|
4302
4304
|
this.setTemplate(`
|
|
@@ -6336,7 +6338,7 @@ const _FxTimeline = class _FxTimeline extends FxElement {
|
|
|
6336
6338
|
const dot = icon ? `<span class="dot fx-icon" part="marker" aria-hidden="true">${esc(icon)}</span>` : `<span class="dot" part="marker" aria-hidden="true">${esc(marker)}</span>`;
|
|
6337
6339
|
return `<li class="event" part="event">${dot}<div class="head">${head}</div><div class="content">${item.innerHTML}</div></li>`;
|
|
6338
6340
|
}).join("");
|
|
6339
|
-
if (items.some((item) => item.hasAttribute("icon"))) void
|
|
6341
|
+
if (items.some((item) => item.hasAttribute("icon"))) void __fenixPreload(() => import("./fenix-ui2.esm.js"), true ? [] : void 0, import.meta.url);
|
|
6340
6342
|
}
|
|
6341
6343
|
connectedCallback() {
|
|
6342
6344
|
super.connectedCallback();
|
|
@@ -6897,7 +6899,7 @@ render_fn = function() {
|
|
|
6897
6899
|
const color = KIND_COLOR[kind] ?? KIND_COLOR.info;
|
|
6898
6900
|
const iconName = this.getAttribute("icon");
|
|
6899
6901
|
const isFxIcon = !!iconName && /^[a-z][a-z0-9_]*$/.test(iconName);
|
|
6900
|
-
if (isFxIcon) void
|
|
6902
|
+
if (isFxIcon) void __fenixPreload(() => import("./fenix-ui2.esm.js"), true ? [] : void 0, import.meta.url);
|
|
6901
6903
|
const iconContent = isFxIcon ? iconName : KIND_ICON[kind] ?? KIND_ICON.info;
|
|
6902
6904
|
this.shadowRoot.innerHTML = `
|
|
6903
6905
|
<style>${CARD_CSS}</style>
|
|
@@ -7657,7 +7659,7 @@ const _FxAlert = class _FxAlert extends FxElement {
|
|
|
7657
7659
|
const variant = this.getAttr("variant", "info");
|
|
7658
7660
|
const title = this.getAttr("title");
|
|
7659
7661
|
const iconName = this.getAttr("icon");
|
|
7660
|
-
if (isFenixIconName(iconName)) void
|
|
7662
|
+
if (isFenixIconName(iconName)) void __fenixPreload(() => import("./fenix-ui2.esm.js"), true ? [] : void 0, import.meta.url);
|
|
7661
7663
|
const icons = {
|
|
7662
7664
|
info: "ℹ",
|
|
7663
7665
|
success: "✓",
|