{"version":3,"file":"dom.cjs","sources":["../packages/dom/css/css.js","../packages/dom/execute/execute.js","../packages/dom/interfaces.js","../packages/polyfill/setImmediate/setImmediate.js","../packages/dom/didPaint/didPaint.js","../packages/dom/html/html.js","../packages/dom/paint/paint.js","../packages/dom/paint/render/render.js","../packages/dom/repaint/repaint.js","../packages/dom/retouch/retouch.js","../packages/dom/willPaint/willPaint.js"],"sourcesContent":["/**\n * Template tag `css` que gera uma instância de `CSSStyleSheet` a partir de um template literal.\n *\n * @param {TemplateStringsArray} strings - Fragmentos de strings literais do template CSS.\n * @param {...any} values - Valores interpolados no template.\n * @returns {CSSStyleSheet} Uma instância de folha de estilo pronta para ser aplicada.\n *\n * @description\n * Ideal para uso em Web Components com `adoptedStyleSheets`, fornecendo uma API declarativa\n * para definir estilos encapsulados.\n *\n * @example\n * const primary = \"blue\";\n * const styleSheet = css`\n *   :host {\n *     color: ${primary};\n *     display: block;\n *   }\n * `;\n *\n * shadowRoot.adoptedStyleSheets = [styleSheet];\n */\nconst css = (strings, ...values) => {\n  const styleSheet = new CSSStyleSheet();\n  const text = String.raw({ raw: strings }, ...values);\n  styleSheet.replaceSync(text);\n  return styleSheet;\n};\n\nexport default css;\n","/**\n * Registra a execução de um método após um evento do ciclo de vida de um Custom Element.\n *\n * @param {string|Symbol} method - Nome do método a ser executado.\n * @returns {{ on: (target: Object) => { after: (event: string) => void } }}\n *\n * @description\n * A função `execute` permite registrar de forma fluente a execução de um método de instância\n * logo após a invocação de um evento de ciclo de vida padrão do Web Component,\n * como `connectedCallback`, `disconnectedCallback` ou `adoptedCallback`.\n *\n * Internamente, a função substitui o callback nativo com um Proxy que mantém o comportamento\n * original e executa o método decorado após a conclusão do callback.\n *\n * @example\n * import execute from '@directive/execute';\n *\n * execute('onConnect').on(MyElement.prototype).after('connectedCallback');\n *\n * // Equivalente a:\n * // MyElement.prototype.connectedCallback = new Proxy(...);\n */\nconst execute = (method) => ({\n  /**\n   * Define o alvo (normalmente o prototype do Custom Element).\n   *\n   * @param {Object} target - O protótipo onde o método de ciclo de vida será interceptado.\n   * @returns {{ after: (event: string) => void }}\n   */\n  on: (target) => ({\n    /**\n     * Registra o método para execução após o evento especificado.\n     *\n     * @param {string} event - Nome do evento de ciclo de vida (ex: 'connectedCallback').\n     * @returns {void}\n     */\n    after: (event) => {\n      target[event] = new Proxy(target[event] || (() => {}), {\n        async apply(original, context, args) {\n          await original.apply(context, args);\n          await context[method]();\n        },\n      });\n    },\n  }),\n});\n\nexport default execute;\n","/**\n * Propriedade simbólica usada para indicar se o componente já foi renderizado.\n *\n * Essa flag é automaticamente definida como `true` após a execução do `paintCallback`,\n * e é utilizada internamente por decorators como `@repaint` para condicionar a nova renderização\n * apenas quando o componente já passou por uma renderização inicial.\n */\nexport const isPainted = Symbol.for(\"isPainted\");\n\n/**\n * Identificador exclusivo para o callback executado após a renderização do componente.\n *\n * Usado internamente pelos decorators e helpers como `@didPaint` para garantir que o método\n * associado seja executado após a aplicação de estilos e atualização do DOM.\n */\nexport const didPaintCallback = Symbol(\"didPaintCallback\");\n\n/**\n * Identificador exclusivo para o callback de atualização do conteúdo HTML do componente.\n *\n * Esse callback é invocado durante o processo de `paint` ou `repaint`, e é responsável por\n * renderizar o HTML no `shadowRoot` (ou no elemento diretamente, caso o `shadowRoot` não exista).\n *\n * Pode ser usado isoladamente com decorators como `@html`, ou em conjunto com `@paint` e `@repaint`.\n */\nexport const htmlCallback = Symbol(\"htmlCallback\");\n\n/**\n * Identificador exclusivo para o callback de aplicação de estilos do componente.\n *\n * Esse callback é chamado para obter os estilos (CSSStyleSheet) que devem ser aplicados\n * via `adoptedStyleSheets`. Ele pode ser utilizado de forma isolada através do decorator `@retouch`\n * ou combinado em fluxos mais amplos como `@paint`.\n *\n * Deve retornar uma instância de `CSSStyleSheet` ou uma Promise que resolve para ela.\n */\nexport const cssCallback = Symbol(\"cssCallback\");\n\n/**\n * Identificador exclusivo para o callback executado antes da renderização do componente.\n *\n * É usado por decorators como `@willPaint` para indicar que um método deve ser executado\n * antes de qualquer manipulação de DOM, dentro do `connectedCallback`.\n */\nexport const willPaintCallback = Symbol(\"willPaintCallback\");\n","/**\n * Polyfill para `setImmediate`, utilizado para agendar a execução de uma função\n * imediatamente após o ciclo atual da stack de chamadas, antes do próximo tick do event loop.\n *\n * Caso o ambiente não possua suporte nativo a `setImmediate`, este polyfill\n * define `globalThis.setImmediate` utilizando `setTimeout(fn, 0)` como alternativa.\n *\n * Este comportamento é útil para executar tarefas de baixa prioridade de forma assíncrona,\n * mas com execução mais imediata do que Promises ou `requestAnimationFrame`.\n *\n * @example\n * setImmediate(() => {\n *   console.log(\"Executado após o ciclo atual\");\n * });\n */\nif (typeof globalThis.setImmediate !== \"function\") {\n  Reflect.defineProperty(globalThis, \"setImmediate\", {\n    value(fn) {\n      return setTimeout(fn, 0);\n    },\n  });\n}\n","import execute from \"@dom/execute\";\nimport { didPaintCallback } from \"@dom/interfaces\";\n\n/**\n * Decorator que executa um método após a renderização do componente no ciclo de vida do DOM.\n *\n * @param {Object} target - O protótipo do Custom Element decorado.\n * @param {string|symbol} method - Nome do método a ser executado após o render.\n * @returns {void}\n *\n * @description\n * O decorator `didPaint` registra um método para ser executado imediatamente após\n * a renderização do conteúdo do componente, dentro do `connectedCallback`, e após\n * a aplicação de estilos e atualização de `innerHTML`.\n *\n * Esse decorator é últil para realizar tarefas que dependem do DOM já renderizado,\n * como medição de layout, animações, foco ou integração com terceiros.\n * Ele é acionado após o `requestAnimationFrame`.\n *\n * @example\n * import { didPaint } from '@nodusjs/std/dom';\n *\n * class MyElement extends HTMLElement {\n *   @didPaint\n *   finalize() {\n *     console.log('render concluído');\n *   }\n * }\n */\nconst didPaint = (target, method) =>\n  execute(method).on(target).after(didPaintCallback);\n\nexport default didPaint;\n","/**\n * Template tag `html` para gerar strings HTML de forma segura e controlada.\n *\n * @param {TemplateStringsArray} strings - Array com os pedaços literais do template.\n * @param {...any} values - Valores interpolados no template.\n * @returns {string} HTML combinado como string.\n *\n * @description\n * Essa função será utilizada no helper `component` para definir o conteúdo HTML\n * dos Web Components de forma declarativa, usando template literals.\n *\n * O comportamento atual apenas concatena os valores e strings,\n * respeitando a interpolação dos dados sem aplicar nenhuma transformação\n * ou sanitização. Versões futuras podem incluir minificação, limpeza ou validação.\n *\n * @example\n * const name = \"Clebão\";\n * const text = html`<h1>Olá, ${name}!</h1>`;\n * console.log(text); // \"<h1>Olá, Clebão!</h1>\"\n */\nconst html = (strings, ...values) => {\n  return String.raw(\n    { raw: strings },\n    ...values.map((value) => [].concat(value).join(\"\")),\n  );\n};\n\nexport default html;\n","import render from \"@dom/paint/render\";\n\n/**\n * Decorator que renderiza um componente com estilos ao ser conectado ao DOM.\n *\n * @param {Function} component - Função responsável por retornar o HTML do componente. Recebe `this` como argumento.\n * @param {...Function} styles - Funções que retornam `CSSStyleSheet`. Cada uma recebe `this` como argumento.\n * @returns {void}\n *\n * @description\n * O decorator `paint` permite executar a renderização de um componente customizado\n * no momento em que ele é conectado ao DOM, aplicando também estilos encapsulados\n * via `adoptedStyleSheets` no `shadowRoot` ou diretamente no próprio elemento.\n *\n * Ele suporta a execução dos callbacks `willPaintCallback`, `paintCallback` e `didPaintCallback`\n * para permitir controle sobre o ciclo de renderização.\n *\n * @example\n * import { paint } from '@nodusjs/std/dom';\n *\n * const component = (el) => `<p>Hello, ${el.name}</p>`;\n * const style = (el) => new CSSStyleSheet();\n *\n * @paint(component, style)\n * class MyElement extends HTMLElement {\n *   name = 'world';\n * }\n */\nconst paint =\n  (component, ...styles) =>\n  (target) =>\n    render(component).with(styles).on(target).whenConnected();\n\nexport default paint;\n","import {\n  cssCallback,\n  didPaintCallback,\n  htmlCallback,\n  isPainted,\n  willPaintCallback,\n} from \"@dom/interfaces\";\n\n/**\n * Registra a renderização de um componente com estilos quando o Custom Element é conectado ao DOM.\n *\n * @param {Function} component - Função que retorna o HTML do componente. Recebe `this` como argumento.\n * @returns {{ with: (styles: Function[]) => { on: (target: Object) => { whenConnected: () => void } } }}\n *\n * @description\n * O helper `render` permite executar de forma fluente a renderização de um componente,\n * aplicando estilos dinâmicos ao `shadowRoot` (ou ao elemento diretamente),\n * logo após a execução do `connectedCallback`.\n *\n * Ele suporta os callbacks `willPaintCallback`, `paintCallback` e `didPaintCallback`,\n * além de aplicar folhas de estilo usando `adoptedStyleSheets`.\n *\n * @example\n * render(component)\n *   .with([style])\n *   .on(MyElement.prototype)\n *   .whenConnected();\n */\nconst render = (component) => ({\n  /**\n   * Define os estilos a serem aplicados ao shadowRoot ou document.\n   *\n   * @param {Function[]} styles - Lista de funções que retornam CSSStyleSheet (recebem `this`).\n   * @returns {{ on: (target: Object) => { whenConnected: () => void } }}\n   */\n  with: (styles) => ({\n    /**\n     * Define o protótipo alvo onde a lógica será aplicada.\n     *\n     * @param {Object} target - O prototype do Custom Element decorado.\n     * @returns {{ whenConnected: () => void }}\n     */\n    on: (target) => ({\n      /**\n       * Finaliza a definição e intercepta o connectedCallback para aplicar a renderização e os estilos.\n       *\n       * @returns {void}\n       */\n      whenConnected: () => {\n        target.prototype.connectedCallback = new Proxy(\n          target.prototype.connectedCallback || (() => {}),\n          {\n            async apply(original, context, args) {\n              await original.apply(context, args);\n\n              context[htmlCallback] = (resolve) => {\n                requestAnimationFrame(async () => {\n                  (context.shadowRoot ?? context).innerHTML =\n                    await component(context);\n                  resolve();\n                });\n              };\n\n              context[cssCallback] = (resolve) => {\n                requestAnimationFrame(async () => {\n                  const styleSheets = styles.map((style) => style(context));\n                  (context.shadowRoot ?? document).adoptedStyleSheets =\n                    await Promise.all(styleSheets);\n                  resolve();\n                });\n              };\n\n              await context[willPaintCallback]?.();\n              await Promise.all([\n                new Promise(context[htmlCallback]),\n                new Promise(context[cssCallback]),\n              ]);\n              context[isPainted] = true;\n              await context[didPaintCallback]?.();\n            },\n          },\n        );\n      },\n    }),\n  }),\n});\n\nexport default render;\n","import \"@polyfill/setImmediate\";\nimport {\n  cssCallback,\n  didPaintCallback,\n  htmlCallback,\n  isPainted,\n  willPaintCallback,\n} from \"@dom/interfaces\";\n\n/**\n * Decorator que força uma nova renderização do componente após a execução de um método ou setter.\n *\n * @param {Object} target - O protótipo do Custom Element decorado.\n * @param {string|symbol} propertyKey - O nome do método ou setter decorado.\n * @param {PropertyDescriptor} descriptor - O descritor do método ou setter.\n * @returns {void}\n *\n * @description\n * O decorator `repaint` intercepta a execução de métodos ou setters e,\n * caso o componente já tenha sido renderizado (`isPainted = true`),\n * executa novamente o ciclo de renderização através do `paintCallback`.\n *\n * Esse comportamento é útil para manter a UI atualizada automaticamente após alterações de estado.\n *\n * @example\n * import { repaint } from '@nodusjs/std/dom';\n *\n * class MyElement extends HTMLElement {\n *   @repaint\n *   set data(value) {\n *     this._data = value;\n *   }\n *\n *   @repaint\n *   update() {\n *     this._updated = true;\n *   }\n * }\n */\nconst repaint = (_target, _propertyKey, descriptor) => {\n  const apply = (original, context, args) => {\n    setImmediate(async () => {\n      if (context[isPainted]) {\n        await context[willPaintCallback]?.();\n        await Promise.all([\n          new Promise(context[htmlCallback]),\n          new Promise(context[cssCallback]),\n        ]);\n        await context[didPaintCallback]?.();\n      }\n    });\n\n    return original.apply(context, args);\n  };\n\n  if (descriptor.set) {\n    descriptor.set = new Proxy(descriptor.set, { apply });\n  }\n\n  if (descriptor.value) {\n    descriptor.value = new Proxy(descriptor.value, { apply });\n  }\n};\n\nexport default repaint;\n","import \"@polyfill/setImmediate\";\nimport { cssCallback, isPainted } from \"@dom/interfaces\";\n\n/**\n * Decorator que reaplica os estilos do componente após a execução de um método ou setter.\n *\n * @param {Object} target - O protótipo do Custom Element decorado.\n * @param {string|symbol} propertyKey - O nome do método ou setter decorado.\n * @param {PropertyDescriptor} descriptor - O descritor do método ou setter.\n * @returns {void}\n *\n * @description\n * O decorator `retouch` intercepta a execução de métodos ou setters e,\n * caso o componente já tenha sido renderizado (`isPainted = true`),\n * executa novamente a aplicação de estilos definidos no `cssCallback`.\n *\n * Isso é útil quando o estilo do componente depende de dados dinâmicos\n * que podem mudar durante a execução do componente.\n *\n * @example\n * import { retouch } from '@nodusjs/std/dom';\n *\n * class MyElement extends HTMLElement {\n *   static [cssCallback]() {\n *     const sheet = new CSSStyleSheet();\n *     sheet.replaceSync(`:host { color: ${this.color}; }`);\n *     return sheet;\n *   }\n *\n *   @retouch\n *   set color(value) {\n *     this._color = value;\n *   }\n *\n *   @retouch\n *   updateStyle() {\n *     this._refresh = true;\n *   }\n * }\n */\nconst retouch = (_target, _propertyKey, descriptor) => {\n  const apply = (original, context, args) => {\n    setImmediate(async () => {\n      if (context[isPainted]) {\n        await new Promise(context[cssCallback]);\n      }\n    });\n\n    return original.apply(context, args);\n  };\n\n  if (descriptor.set) {\n    descriptor.set = new Proxy(descriptor.set, { apply });\n  }\n\n  if (descriptor.value) {\n    descriptor.value = new Proxy(descriptor.value, { apply });\n  }\n};\n\nexport default retouch;\n","import execute from \"@dom/execute\";\nimport { willPaintCallback } from \"@dom/interfaces\";\n\n/**\n * Decorator que executa um método antes da renderização do componente no ciclo de vida do DOM.\n *\n * @param {Object} target - O protótipo do Custom Element decorado.\n * @param {string|symbol} method - Nome do método a ser executado antes do render.\n * @returns {void}\n *\n * @description\n * O decorator `willPaint` registra um método para ser executado imediatamente antes\n * da renderização do conteúdo do componente, dentro do `connectedCallback`, e antes\n * da aplicação de estilos e da atualização de `innerHTML`.\n *\n * Esse decorator é útil para preparar o estado do componente antes que ele seja pintado.\n * Ele é acionado antes da `requestAnimationFrame`, garantindo que qualquer lógica de pré-renderização\n * ocorra com antecedência.\n *\n * @example\n * import { willPaint } from '@nodusjs/std/dom';\n *\n * class MyElement extends HTMLElement {\n *   @willPaint\n *   prepare() {\n *     this.setAttribute('data-loading', 'true');\n *   }\n * }\n */\nconst willPaint = (target, method) =>\n  execute(method).on(target).after(willPaintCallback);\n\nexport default willPaint;\n"],"names":["execute","method","on","target","after","event","Proxy","apply","original","context","args","isPainted","Symbol","for","didPaintCallback","htmlCallback","cssCallback","willPaintCallback","globalThis","setImmediate","Reflect","defineProperty","value","fn","setTimeout","strings","values","styleSheet","CSSStyleSheet","text","String","raw","replaceSync","map","concat","join","component","styles","with","whenConnected","prototype","connectedCallback","resolve","requestAnimationFrame","async","shadowRoot","innerHTML","styleSheets","style","document","adoptedStyleSheets","Promise","all","_target","_propertyKey","descriptor","set","l"],"mappings":"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"}