@govbr-ds/webcomponents 2.1.0 → 2.1.1

package/dist/cjs/event-CmVdNHxl.js

@@ -0,0 +1,56 @@
+/*!
+ * Construído por SERPRO
+ * © https://serpro.gov.br/ - MIT License.
+ */
+'use strict';
+
+const getEventPath = (event) => {
+    if (typeof event.composedPath === 'function')
+        return event.composedPath();
+    return event.target ? [event.target] : [];
+};
+const getEventTarget = (event) => {
+    return getEventPath(event)[0] ?? null;
+};
+const isEventTargetInside = (event, element) => {
+    return !!element && getEventPath(event).includes(element);
+};
+const isEventTargetOutside = (event, ...elements) => {
+    return elements.every((element) => !isEventTargetInside(event, element));
+};
+/**
+ * Emite no host um evento de formulário real, impedindo que o evento originado
+ * dentro do Shadow DOM seja observado duas vezes pelo consumidor.
+ */
+const redispatchNativeEvent = (host, source, type = source.type, init = {
+    bubbles: source.bubbles,
+    composed: source.composed,
+    cancelable: source.cancelable,
+}) => {
+    source.stopPropagation();
+    const event = type === 'input' && typeof InputEvent !== 'undefined'
+        ? new InputEvent(type, {
+            ...init,
+            data: source instanceof InputEvent ? source.data : null,
+            inputType: source instanceof InputEvent ? source.inputType : '',
+        })
+        : typeof ToggleEvent !== 'undefined' && source instanceof ToggleEvent
+            ? new ToggleEvent(type, { ...init, newState: source.newState, oldState: source.oldState })
+            : new Event(type, init);
+    return host.dispatchEvent(event);
+};
+const redispatchNativeFormEvent = (host, source, type = source.type) => redispatchNativeEvent(host, source, type, { bubbles: true, composed: true, cancelable: false });
+/** Emite um evento nativo de formulário para interações sem evento DOM de origem. */
+const dispatchNativeFormEvent = (host, type) => {
+    const init = { bubbles: true, composed: true, cancelable: false };
+    const event = type === 'input' && typeof InputEvent !== 'undefined' ? new InputEvent(type, init) : new Event(type, init);
+    return host.dispatchEvent(event);
+};
+
+exports.dispatchNativeFormEvent = dispatchNativeFormEvent;
+exports.getEventPath = getEventPath;
+exports.getEventTarget = getEventTarget;
+exports.isEventTargetInside = isEventTargetInside;
+exports.isEventTargetOutside = isEventTargetOutside;
+exports.redispatchNativeEvent = redispatchNativeEvent;
+exports.redispatchNativeFormEvent = redispatchNativeFormEvent;

package/dist/cjs/floating-surface-dismiss-ccdiD0KF.js

@@ -0,0 +1,63 @@
+/*!
+ * Construído por SERPRO
+ * © https://serpro.gov.br/ - MIT License.
+ */
+'use strict';
+
+const BLOCKING_SURFACE_OPEN_EVENTS = ['brScrimOpen', 'brCookiebarShow', 'brMenuOpenChange'];
+const registries = new WeakMap();
+const isOpeningEvent = (event) => event.type !== 'brMenuOpenChange' || event.detail?.open === true;
+const notifySubscriptions = (registry, event) => {
+    const blocker = event.target;
+    for (const subscription of [...registry.subscriptions]) {
+        if (!subscription.host.isConnected) {
+            registry.subscriptions.delete(subscription);
+            continue;
+        }
+        if (blocker instanceof Element && (blocker === subscription.host || blocker.contains(subscription.host)))
+            continue;
+        subscription.dismiss();
+    }
+};
+/** Fecha uma superfície flutuante quando um bloqueador externo é aberto. */
+const listenForExternalBlockingSurface = (host, dismiss) => {
+    const ownerDocument = host.ownerDocument;
+    let registry = registries.get(ownerDocument);
+    if (registry === undefined) {
+        const subscriptions = new Set();
+        const handlers = new Map();
+        registry = { subscriptions, handlers };
+        BLOCKING_SURFACE_OPEN_EVENTS.forEach((eventName) => {
+            const handler = (event) => {
+                if (!isOpeningEvent(event))
+                    return;
+                const current = registries.get(ownerDocument);
+                if (current !== undefined)
+                    notifySubscriptions(current, event);
+            };
+            handlers.set(eventName, handler);
+            ownerDocument.addEventListener(eventName, handler);
+        });
+        registries.set(ownerDocument, registry);
+    }
+    const subscription = { host, dismiss };
+    registry.subscriptions.add(subscription);
+    let active = true;
+    return () => {
+        if (!active)
+            return;
+        active = false;
+        const current = registries.get(ownerDocument);
+        if (current === undefined)
+            return;
+        current.subscriptions.delete(subscription);
+        if (current.subscriptions.size > 0)
+            return;
+        current.handlers.forEach((handler, eventName) => {
+            ownerDocument.removeEventListener(eventName, handler);
+        });
+        registries.delete(ownerDocument);
+    };
+};
+
+exports.listenForExternalBlockingSurface = listenForExternalBlockingSurface;

package/dist/cjs/floating-ui-MBI1osio.js

@@ -0,0 +1,136 @@
+/*!
+ * Construído por SERPRO
+ * © https://serpro.gov.br/ - MIT License.
+ */
+'use strict';
+
+var floatingUi_dom = require('./floating-ui.dom-BUSTaaxR.js');
+
+/**
+ * Utilitários para gerenciamento de posicionamento flutuante (Floating UI).
+ *
+ * Inclui classe e tipos para facilitar tooltips, popovers e overlays usando a biblioteca Floating UI.
+ */
+/**
+ * FloatingUIManager é uma classe utilitária que gerencia o posicionamento de elementos flutuantes
+ * como tooltips ou popovers em relação a um elemento de disparo (trigger).
+ * Ela utiliza a biblioteca Floating UI para calcular posições e lidar com atualizações.
+ */
+class FloatingUIManager {
+    constructor(options) {
+        this.triggerElement = options.triggerElement;
+        this.contentElement = options.contentElement;
+        this.arrowElement = options.arrowElement;
+        this.placement = options.placement ?? 'top';
+        this.strategy = options.strategy ?? 'absolute';
+        this.boundary = options.boundary ?? 'clippingAncestors';
+        this.offsetDistance = options.offset ?? 8;
+        this.onUpdate = options.onUpdate;
+    }
+    /**
+     * Inicia o gerenciador Floating UI configurando a atualização automática da posição.
+     */
+    start() {
+        this.stop();
+        this.contentElement.style.position = this.strategy;
+        this.cleanupAutoUpdate = floatingUi_dom.autoUpdate(this.triggerElement, this.contentElement, () => this.updatePosition());
+    }
+    /**
+     * Para o gerenciador Floating UI e limpa os recursos utilizados.
+     */
+    stop() {
+        const cleanup = this.cleanupAutoUpdate;
+        this.cleanupAutoUpdate = undefined;
+        cleanup?.();
+    }
+    /**
+     * Atualiza a posição do elemento flutuante com base no elemento disparador e no elemento de conteúdo.
+     * Esta função é chamada automaticamente quando o gerenciador está ativo.
+     * Ela calcula a nova posição usando a biblioteca Floating UI e aplica as transformações necessárias.
+     * Também atualiza a posição da seta, se fornecida.
+     * Além disso, define o atributo de dados `data-placement` no elemento de conteúdo para refletir a posição atual.
+     * @returns {Promise<void>} Uma promessa que resolve quando a posição é atualizada.
+     */
+    async updatePosition() {
+        const data = await floatingUi_dom.computePosition(this.triggerElement, this.contentElement, {
+            placement: this.placement,
+            strategy: this.strategy,
+            middleware: this.buildMiddleware(),
+        });
+        this.updateTooltipPosition(data);
+        this.updateArrowPosition(data);
+        this.setPlacementDataAttribute(data);
+        this.onUpdate?.(data);
+    }
+    /**
+     * Constrói os middlewares necessários para o Floating UI.
+     * Esses middlewares são usados para ajustar o posicionamento do elemento flutuante,
+     * incluindo offset, flip, shift e hide. Se uma seta for fornecida, o middleware de seta também é adicionado.
+     * @returns {Middleware[]} Retorna um array de middlewares configurados para o Floating UI.
+     */
+    buildMiddleware() {
+        const middleware = [
+            floatingUi_dom.offset(this.offsetDistance),
+            floatingUi_dom.flip({ boundary: this.boundary }),
+            floatingUi_dom.shift({ boundary: this.boundary, padding: 5 }),
+            floatingUi_dom.hide({ boundary: this.boundary }),
+        ];
+        if (this.arrowElement != null) {
+            middleware.push(floatingUi_dom.arrow({ element: this.arrowElement }));
+        }
+        return middleware;
+    }
+    /**
+     * Adiciona o estilo necessário para posicionar o tooltip com base nas coordenadas fornecidas.
+     * Esta função é chamada após o cálculo da posição do tooltip.
+     * Ela aplica as propriedades CSS `left` e `top` ao elemento de conteúdo do tooltip.
+     * @param data Contém as coordenadas x e y para posicionar o tooltip.
+     */
+    updateTooltipPosition(data) {
+        const { x, y } = data;
+        Object.assign(this.contentElement.style, {
+            left: `${x}px`,
+            top: `${y}px`,
+            position: this.strategy,
+        });
+    }
+    /**
+     * Adiciona o estilo necessário para posicionar a seta do tooltip com base nos dados de middleware.
+     * Esta função é chamada após o cálculo da posição do tooltip.
+     * Ela aplica as propriedades CSS `left`, `top`, `right`, `bottom` e a posição estática da seta.
+     * A posição estática é determinada com base na colocação do tooltip (top, right, bottom, left).
+     * Se a seta não estiver presente ou os dados de middleware não contiverem informações sobre a seta, nada será feito.
+     * @param data Contém a posição da seta e os dados de middleware.
+     */
+    updateArrowPosition(data) {
+        if (this.arrowElement == null || data.middlewareData.arrow == null)
+            return;
+        const { x: arrowX, y: arrowY } = data.middlewareData.arrow;
+        const basePlacement = data.placement.split('-')[0];
+        const staticSide = {
+            top: 'bottom',
+            right: 'left',
+            bottom: 'top',
+            left: 'right',
+        }[basePlacement];
+        Object.assign(this.arrowElement.style, {
+            left: arrowX == null ? '' : `${arrowX}px`,
+            top: arrowY == null ? '' : `${arrowY}px`,
+            right: '',
+            bottom: '',
+            [staticSide]: '-4px',
+        });
+    }
+    /**
+     * Define o atributo de dados `data-placement` no elemento de conteúdo.
+     * Este atributo é usado para indicar a posição atual do tooltip ou popover.
+     * Ele é útil para fins de acessibilidade e para permitir que estilos CSS sejam aplicados com base na posição.
+     * @param data Objeto contendo a propriedade `placement` que define a posição do tooltip ou popover.
+     *            A propriedade `placement` deve ser uma string representando a posição, como 'top', 'bottom', 'left', 'right', etc.
+     */
+    setPlacementDataAttribute(data) {
+        this.contentElement.setAttribute('data-placement', data.placement);
+    }
+}
+
+exports.FloatingUIManager = FloatingUIManager;