@govbr-ds/webcomponents 2.0.0-next.4 → 2.0.0-next.40

package/dist/collection/components/scrim/scrim.js

@@ -0,0 +1,806 @@
+/*!
+ * Construído por SERPRO
+ * © https://serpro.gov.br/ - MIT License.
+ */
+import { h, Host, } from "@stencil/core";
+/**
+ * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/scrim?tab=designer).
+ *
+ * @slot default - Elemento que será exibido junto com o Scrim, devendo ser fornecido através do slot. Esse elemento representa o conteúdo principal a ser destacado sobre o fundo escurecido.
+ * @slot activator - Elemento que, quando clicado, ativa/desativa o scrim. Tem prioridade sobre a propriedade 'activator'.
+ */
+export class Scrim {
+    /**
+     * Referência ao elemento host do componente.
+     */
+    el;
+    elementInternals;
+    /**
+     * Identificador único.
+     * Caso não seja fornecido, um ID gerado automaticamente será usado.
+     */
+    customId = `br-scrim-${ScrimId++}`;
+    /**
+     * Ativa/desativa o scrim
+     */
+    isOpen = false;
+    /**
+     * Posiciona o conteúdo no topo, centro, direita, esquerda, abaixo dentro do scrim
+     */
+    positionContent;
+    /**
+     * Desativa o fechamento do scrim ao ser clicado
+     */
+    disableCloseOnClick = false;
+    /**
+     * Define o valor de z-index do scrim
+     */
+    zIndex = null;
+    /**
+     * Define um valor CSS personalizado para o background do scrim
+     */
+    customBackground = null;
+    /**
+     * Define a opacidade personalizada do scrim
+     */
+    customOpacity = null;
+    /**
+     * Define o modo de exibição do scrim:
+     * - 'fullscreen': Ocupa toda a tela (position: fixed).
+     * - 'parent': Ocupa apenas o elemento pai (position: absolute).
+     * O elemento pai deve ter `position: relative` ou outro valor de posicionamento diferente de `static`.
+     */
+    displayMode = 'fullscreen';
+    /**
+     * Define a estratégia de manipulação de rolagem quando scrim está aberto
+     * - 'block': Impede a rolagem completamente
+     * - 'close': Fecha o scrim quando ocorre rolagem
+     */
+    scrollStrategy;
+    /**
+     * Determina quanto de rolagem (em pixels) é necessário para acionar a ação de fechamento automático do scrim.
+     */
+    scrollThreshold = 50;
+    /**
+     * Define o seletor para o elemento activator.
+     * Pode ser:
+     * - Um seletor CSS (ex: '.button-class', '#button-id')
+     * - A string 'parent' para usar o elemento pai como activator
+     * Nota: O slot 'activator' tem prioridade sobre esta propriedade.
+     */
+    activator = null;
+    /** Indica que o scrim foi aberto. */
+    brScrimOpen;
+    /** Indica que o scrim foi fechado */
+    brScrimClose;
+    isActive = false;
+    hasActivatorSlot = false;
+    // ======================================================================
+    // PROPRIEDADES PRIVADAS E VARIÁVEIS INTERNAS
+    // ======================================================================
+    contentRef = null;
+    activatorElement = null;
+    scrollOffset = 0;
+    lastScrollTop = 0;
+    previouslyFocusedElement = null;
+    static FOCUSABLE_SELECTORS = [
+        'a[href]:not([disabled])',
+        'button:not([disabled])',
+        'br-button:not([disabled])',
+        'input:not([disabled])',
+        'br-input:not([disabled])',
+        'select:not([disabled])',
+        'br-select:not([disabled])',
+        'textarea:not([disabled])',
+        'br-textarea:not([disabled])',
+        '[tabindex]:not([tabindex="-1"])',
+    ].join(',');
+    // ======================================================================
+    // LIFECYCLE HOOKS E WATCHERS
+    // ======================================================================
+    handleOpenChange(newValue) {
+        this.isActive = newValue;
+        this.updateStyles();
+        if (this.isActive) {
+            this.previouslyFocusedElement = document.activeElement;
+            this.applyScrollStrategy();
+            setTimeout(() => {
+                this.focusFirstElement();
+            }, 100);
+            this.brScrimOpen.emit();
+        }
+        else {
+            this.resetScrolling();
+            this.restoreFocus();
+            this.brScrimClose.emit();
+        }
+    }
+    updateStyles() {
+        if (this.zIndex !== null && this.zIndex !== undefined) {
+            this.el.style.zIndex = `${this.zIndex}`;
+            this.el.style.setProperty('--z-index-layer-4', `${this.zIndex}`);
+        }
+        if (this.customBackground !== null) {
+            this.el.style.setProperty('--surface-overlay-scrim', this.customBackground);
+        }
+        if (this.customOpacity !== null) {
+            this.el.style.setProperty('--br-scrim-opacity', `${this.customOpacity}`);
+        }
+    }
+    handleActivatorChange() {
+        this.removeActivatorClickListener();
+        this.setupActivator();
+    }
+    componentWillLoad() {
+        this.hasActivatorSlot = this.checkActivatorSlot('activator');
+    }
+    componentDidLoad() {
+        this.isActive = this.isOpen;
+        this.updateStyles();
+        if (this.isActive) {
+            this.applyScrollStrategy();
+            this.focusFirstElement();
+        }
+        this.setupActivator();
+        this.setupActivatorSlotClick();
+        this.contentRef.addEventListener('keydown', this.handleKeyDown);
+    }
+    connectedCallback() {
+        if (this.scrollStrategy === 'close') {
+            window.addEventListener('scroll', this.handleScrollClose);
+        }
+    }
+    disconnectedCallback() {
+        window.removeEventListener('scroll', this.handleScrollClose);
+        this.contentRef.removeEventListener('keydown', this.handleKeyDown);
+        this.removeActivatorClickListener();
+        this.cleanupActivatorSlotClick();
+    }
+    // ======================================================================
+    // GERENCIAMENTO DO ACTIVATOR (ELEMENTO ACIONADOR)
+    // ======================================================================
+    checkActivatorSlot(slotName) {
+        return this.el.querySelector(`[slot="${slotName}"]`) !== null;
+    }
+    setupActivatorSlotClick() {
+        const slotEl = this.el.shadowRoot?.querySelector('slot[name="activator"]');
+        if (slotEl === null || slotEl === undefined)
+            return;
+        const assignedElements = slotEl.assignedElements?.() ?? [];
+        if (assignedElements.length === 1) {
+            const el = assignedElements[0];
+            el.addEventListener('click', this.handleActivatorClick);
+        }
+        else if (assignedElements.length > 1) {
+            console.warn('br-scrim: Slot "activator" deve conter apenas um elemento para aplicar o onClick automaticamente.');
+        }
+    }
+    setupActivator() {
+        this.removeActivatorClickListener();
+        this.activatorElement = null;
+        if (this.hasActivatorSlot || this.activator == null || this.activator === '') {
+            return;
+        }
+        if (this.activator === 'parent') {
+            const parentElement = this.el.parentElement;
+            if (parentElement !== null) {
+                this.activatorElement = parentElement;
+            }
+        }
+        else {
+            try {
+                const element = document.querySelector(this.activator);
+                if (element instanceof HTMLElement) {
+                    this.activatorElement = element;
+                }
+            }
+            catch {
+                console.warn(`br-scrim: Seletor activator inválido: ${this.activator}`);
+            }
+        }
+        this.addActivatorClickListener();
+    }
+    handleActivatorClick = () => {
+        this.toggle();
+    };
+    addActivatorClickListener() {
+        if (this.activatorElement === null || this.activatorElement === undefined)
+            return;
+        this.activatorElement.addEventListener('click', this.handleActivatorClick);
+    }
+    removeActivatorClickListener() {
+        if (this.activatorElement === null || this.activatorElement === undefined)
+            return;
+        this.activatorElement.removeEventListener('click', this.handleActivatorClick);
+    }
+    cleanupActivatorSlotClick() {
+        const slotEl = this.el.shadowRoot?.querySelector('slot[name="activator"]');
+        const assignedElements = slotEl?.assignedElements?.() ?? [];
+        if (assignedElements.length === 1) {
+            assignedElements[0].removeEventListener('click', this.handleActivatorClick);
+        }
+    }
+    // ======================================================================
+    // ESTRATÉGIAS DE ROLAGEM (SCROLL)
+    // ======================================================================
+    applyScrollStrategy() {
+        if (this.scrollStrategy === 'block') {
+            this.enableScrollBlock();
+        }
+        else if (this.scrollStrategy === 'close') {
+            this.enableScrollWatcher();
+        }
+    }
+    enableScrollBlock() {
+        this.scrollOffset = window.scrollY;
+        document.body.style.setProperty('position', 'fixed');
+        document.body.style.setProperty('top', `-${this.scrollOffset}px`);
+        document.body.style.setProperty('left', '0');
+        document.body.style.setProperty('right', '0');
+        document.body.style.setProperty('width', '100%');
+        document.documentElement.style.setProperty('overflow', 'hidden');
+        window.addEventListener('scroll', this.handleBlockScroll);
+    }
+    enableScrollWatcher() {
+        window.addEventListener('scroll', this.handleScrollClose);
+    }
+    handleBlockScroll = (e) => {
+        if (this.scrollStrategy === 'block' && this.isActive) {
+            window.scrollTo(0, this.scrollOffset);
+            e.preventDefault();
+            e.stopPropagation();
+        }
+    };
+    resetScrolling() {
+        if (this.scrollStrategy === 'block') {
+            document.body.style.removeProperty('position');
+            document.body.style.removeProperty('top');
+            document.body.style.removeProperty('left');
+            document.body.style.removeProperty('right');
+            document.body.style.removeProperty('width');
+            document.documentElement.style.removeProperty('overflow');
+            window.removeEventListener('scroll', this.handleBlockScroll);
+            window.scrollTo(0, this.scrollOffset);
+        }
+        window.removeEventListener('scroll', this.handleScrollClose);
+    }
+    handleScrollClose = () => {
+        if (this.scrollStrategy === 'close' && this.isActive) {
+            const currentScroll = window.scrollY;
+            if (Math.abs(currentScroll - this.lastScrollTop) > this.scrollThreshold) {
+                this.handleOpenChange(false);
+            }
+            this.lastScrollTop = currentScroll;
+        }
+    };
+    // ======================================================================
+    // ACESSIBILIDADE E GERENCIAMENTO DE FOCO
+    // ======================================================================
+    focusFirstElement() {
+        if (this.contentRef == null)
+            return;
+        this.contentRef.setAttribute('tabindex', '-1');
+        this.contentRef.focus();
+        const focusableElements = this.getFocusableElements();
+        if (focusableElements.length > 0) {
+            const firstElement = focusableElements[0];
+            if (firstElement !== null && firstElement !== undefined) {
+                firstElement.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+                firstElement.focus({ preventScroll: true });
+            }
+        }
+    }
+    restoreFocus() {
+        let targetElement = null;
+        if (this.previouslyFocusedElement instanceof HTMLElement && this.previouslyFocusedElement.isConnected) {
+            targetElement = this.previouslyFocusedElement;
+        }
+        else if (this.activatorElement instanceof HTMLElement) {
+            targetElement = this.activatorElement;
+        }
+        else {
+            const slotEl = this.el.shadowRoot?.querySelector('slot[name="activator"]');
+            if (this.hasActivatorSlot) {
+                const assignedElements = slotEl.assignedElements?.() ?? [];
+                if (assignedElements.length > 0 && assignedElements[0] instanceof HTMLElement) {
+                    targetElement = assignedElements[0];
+                }
+            }
+        }
+        if (targetElement !== null && targetElement !== undefined) {
+            setTimeout(() => {
+                try {
+                    targetElement?.focus();
+                }
+                catch (error) {
+                    console.warn('br-scrim: Erro ao restaurar foco:', error);
+                }
+            }, 100);
+        }
+    }
+    getFocusableElements() {
+        if (this.contentRef == null)
+            return [];
+        const defaultSlot = this.contentRef.querySelector('slot:not([name])');
+        if (defaultSlot === null || defaultSlot === undefined)
+            return [];
+        const assignedElements = defaultSlot.assignedElements({ flatten: true });
+        const focusableElements = [];
+        assignedElements.forEach((el) => {
+            if (!(el instanceof HTMLElement))
+                return;
+            if (el.matches(Scrim.FOCUSABLE_SELECTORS)) {
+                focusableElements.push(el);
+            }
+            const nestedFocusables = Array.from(el.querySelectorAll(Scrim.FOCUSABLE_SELECTORS));
+            focusableElements.push(...nestedFocusables);
+        });
+        return this.filterVisibleElements(focusableElements);
+    }
+    filterVisibleElements(elements) {
+        return elements.filter((el) => el.offsetWidth > 0 && el.offsetHeight > 0 && getComputedStyle(el).visibility !== 'hidden');
+    }
+    // ======================================================================
+    // NAVEGAÇÃO POR TECLADO
+    // ======================================================================
+    handleKeyDown = (event) => {
+        if (!this.isActive)
+            return;
+        if (this.shouldHandleEscape(event)) {
+            this.handleOpenChange(false);
+            return;
+        }
+        if (event.key === 'Tab') {
+            this.handleTabNavigation(event);
+        }
+    };
+    shouldHandleEscape(event) {
+        return (event.key === 'Escape' || event.key === 'Esc') && this.isActive && !this.disableCloseOnClick;
+    }
+    handleTabNavigation(event) {
+        const focusableElements = this.getFocusableElements();
+        if (focusableElements.length === 0) {
+            event.preventDefault();
+            return;
+        }
+        const firstElement = focusableElements[0];
+        const lastElement = focusableElements[focusableElements.length - 1];
+        const isTabForward = !event.shiftKey;
+        if (this.shouldTrapFocus(isTabForward, firstElement, lastElement)) {
+            event.preventDefault();
+            this.wrapFocus(isTabForward, firstElement, lastElement);
+        }
+    }
+    shouldTrapFocus(isTabForward, firstElement, lastElement) {
+        return ((isTabForward && document.activeElement === lastElement) ||
+            (!isTabForward && document.activeElement === firstElement));
+    }
+    wrapFocus(isTabForward, firstElement, lastElement) {
+        ;
+        (isTabForward ? firstElement : lastElement).focus();
+    }
+    // ======================================================================
+    // MANIPULAÇÃO DE EVENTOS E UTILITÁRIOS
+    // ======================================================================
+    handleMaskClick = (_event) => {
+        if (!this.disableCloseOnClick) {
+            this.close();
+        }
+    };
+    getCssClassMap() {
+        return {
+            'br-scrim': true,
+            opened: this.isActive,
+            'scroll-block': this.scrollStrategy === 'block',
+            'position-top': this.positionContent === 'top',
+            'position-bottom': this.positionContent === 'bottom',
+            'position-left': this.positionContent === 'left',
+            'position-right': this.positionContent === 'right',
+            'position-center': this.positionContent === 'center',
+            'mode-fullscreen': this.displayMode === 'fullscreen',
+            'mode-parent': this.displayMode === 'parent',
+        };
+    }
+    // ======================================================================
+    // MÉTODOS PÚBLICOS (API)
+    // ======================================================================
+    /**
+     * Define o limite de rolagem para o fechamento automático do scrim.
+     */
+    async setScrollThreshold(threshold) {
+        this.scrollThreshold = threshold;
+    }
+    /**
+     * Método público para exibir o scrim
+     */
+    async open() {
+        this.handleOpenChange(true);
+    }
+    /**
+     * Método público para esconder o scrim
+     */
+    async close() {
+        this.handleOpenChange(false);
+    }
+    /**
+     * Método público para alternar o estado de exibição do scrim
+     */
+    async toggle() {
+        this.handleOpenChange(!this.isActive);
+    }
+    render() {
+        return (h(Host, { key: '726270b843306b74811d9a3701388e435ae0d60f' }, h("slot", { key: 'afe3186b8c03dd5844ad026007d32859689de79c', name: "activator" }), h("div", { key: '7c82048a23457cbce4bfef25d8d1101b83e11ffd', class: this.getCssClassMap(), id: this.customId, role: "dialog", "aria-modal": "true", "aria-hidden": this.isActive ? 'false' : 'true', "data-visible": this.isActive ? 'true' : 'false' }, h("div", { key: 'f76fc233cc3fa30c5cc96a6561394491292b4a91', class: "mask", onClick: this.handleMaskClick }), h("div", { key: '10b9e4b6053ae0446a1c8ca739b517f288de7c72', ref: (el) => (this.contentRef = el), class: "content", tabIndex: -1, onKeyDown: this.handleKeyDown, "aria-label": "Conte\u00FAdo do di\u00E1logo" }, h("slot", { key: 'cd893c727204ec5f908714bc4e30d0f020d9d19e' })))));
+    }
+    static get is() { return "br-scrim"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["scrim.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["scrim.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "customId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Identificador \u00FAnico.\nCaso n\u00E3o seja fornecido, um ID gerado automaticamente ser\u00E1 usado."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "custom-id",
+                "reflect": true,
+                "defaultValue": "`br-scrim-${ScrimId++}`"
+            },
+            "isOpen": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Ativa/desativa o scrim"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "is-open",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "positionContent": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'top' | 'center' | 'right' | 'left' | 'bottom'",
+                    "resolved": "\"bottom\" | \"center\" | \"left\" | \"right\" | \"top\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Posiciona o conte\u00FAdo no topo, centro, direita, esquerda, abaixo dentro do scrim"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "position-content",
+                "reflect": false
+            },
+            "disableCloseOnClick": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Desativa o fechamento do scrim ao ser clicado"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disable-close-on-click",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "zIndex": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | null",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define o valor de z-index do scrim"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "z-index",
+                "reflect": false,
+                "defaultValue": "null"
+            },
+            "customBackground": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define um valor CSS personalizado para o background do scrim"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "custom-background",
+                "reflect": false,
+                "defaultValue": "null"
+            },
+            "customOpacity": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | null",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define a opacidade personalizada do scrim"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "custom-opacity",
+                "reflect": false,
+                "defaultValue": "null"
+            },
+            "displayMode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'fullscreen' | 'parent'",
+                    "resolved": "\"fullscreen\" | \"parent\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define o modo de exibi\u00E7\u00E3o do scrim:\n- 'fullscreen': Ocupa toda a tela (position: fixed).\n- 'parent': Ocupa apenas o elemento pai (position: absolute).\nO elemento pai deve ter `position: relative` ou outro valor de posicionamento diferente de `static`."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "display-mode",
+                "reflect": false,
+                "defaultValue": "'fullscreen'"
+            },
+            "scrollStrategy": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'block' | 'close'",
+                    "resolved": "\"block\" | \"close\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define a estrat\u00E9gia de manipula\u00E7\u00E3o de rolagem quando scrim est\u00E1 aberto\n- 'block': Impede a rolagem completamente\n- 'close': Fecha o scrim quando ocorre rolagem"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "scroll-strategy",
+                "reflect": false
+            },
+            "scrollThreshold": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Determina quanto de rolagem (em pixels) \u00E9 necess\u00E1rio para acionar a a\u00E7\u00E3o de fechamento autom\u00E1tico do scrim."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "scroll-threshold",
+                "reflect": false,
+                "defaultValue": "50"
+            },
+            "activator": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define o seletor para o elemento activator.\nPode ser:\n- Um seletor CSS (ex: '.button-class', '#button-id')\n- A string 'parent' para usar o elemento pai como activator\nNota: O slot 'activator' tem prioridade sobre esta propriedade."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "activator",
+                "reflect": false,
+                "defaultValue": "null"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isActive": {},
+            "hasActivatorSlot": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "brScrimOpen",
+                "name": "brScrimOpen",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Indica que o scrim foi aberto."
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "brScrimClose",
+                "name": "brScrimClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Indica que o scrim foi fechado"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setScrollThreshold": {
+                "complexType": {
+                    "signature": "(threshold: number) => Promise<void>",
+                    "parameters": [{
+                            "name": "threshold",
+                            "type": "number",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Define o limite de rolagem para o fechamento autom\u00E1tico do scrim.",
+                    "tags": []
+                }
+            },
+            "open": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "M\u00E9todo p\u00FAblico para exibir o scrim",
+                    "tags": []
+                }
+            },
+            "close": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "M\u00E9todo p\u00FAblico para esconder o scrim",
+                    "tags": []
+                }
+            },
+            "toggle": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "M\u00E9todo p\u00FAblico para alternar o estado de exibi\u00E7\u00E3o do scrim",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "isOpen",
+                "methodName": "handleOpenChange"
+            }, {
+                "propName": "zIndex",
+                "methodName": "updateStyles"
+            }, {
+                "propName": "customBackground",
+                "methodName": "updateStyles"
+            }, {
+                "propName": "customOpacity",
+                "methodName": "updateStyles"
+            }, {
+                "propName": "activator",
+                "methodName": "handleActivatorChange"
+            }];
+    }
+    static get attachInternalsMemberName() { return "elementInternals"; }
+}
+let ScrimId = 0;
+//# sourceMappingURL=scrim.js.map