@govbr-ds/webcomponents 2.1.0 → 2.1.2

package/dist/collection/components/loading/loading.js

@@ -0,0 +1,1169 @@
+/*!
+ * Construído por SERPRO
+ * © https://serpro.gov.br/ - MIT License.
+ */
+import { Host, h } from "@stencil/core";
+import { clampNumber } from "../../shared/utils/clamp";
+import { generateUniqueId } from "../../shared/utils/id";
+import { setPartAttributes } from "../../shared/utils/parts";
+/** Mapa que relaciona `LoadingMode` e `LoadingSize` com a dimensão do SVG em pixels. */
+const DIMENSION_MAP = {
+    spinner: {
+        small: 24,
+        medium: 44,
+        large: 64,
+    },
+    progress: {
+        small: 64,
+        medium: 84,
+        large: 104,
+    },
+};
+/** Mapa que relaciona `LoadingMode` e `LoadingSize` com a espessura do traço. */
+const STROKE_WIDTH_MAP = {
+    spinner: {
+        small: 2,
+        medium: 3,
+        large: 4,
+    },
+    progress: {
+        small: 3,
+        medium: 4,
+        large: 5,
+    },
+};
+/** Mapa que relaciona `LoadingSize` com o tamanho da fonte do percentual no modo `progress`. */
+const PERCENTAGE_FONT_SIZE_MAP = {
+    small: 'var(--font-size-scale-base)',
+    medium: 'var(--font-size-scale-up-02)',
+    large: 'var(--font-size-scale-up-03)',
+};
+/**
+ * Mapa que relaciona `LoadingSpeed` com a duração da animação (s)
+ */
+const SPEED_MAP = {
+    fast: 1.4,
+    normal: 2,
+    slow: 2.6,
+};
+/**
+ * Mapa que relaciona `LoadingSpeed` com a duração da transição (s) no modo `progress`.
+ */
+const TRANSITION_MAP = {
+    fast: 0.3,
+    normal: 0.5,
+    slow: 0.8,
+};
+/**
+ * Para a documentação completa, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o [Design System do GovBR](https://www.gov.br/ds/components/loading?tab=designer).
+ *
+ * @category Feedback
+ * @status stable
+ * @slot label - Rótulo customizado do loading. Quando utilizado, a prop `label` é ignorada.
+ * @slot cancel-button - Conteúdo customizado do botão de cancelar. Quando utilizado, a prop `cancelLabel` é ignorada.
+ *
+ * @part container - Wrapper principal do loading.
+ * @part wrapper - Wrapper do conteúdo do spinner/progress.
+ * @part svg - Elemento SVG principal do loading.
+ * @part percentage - Texto de percentual no modo `progress`.
+ * @part label-wrapper - Wrapper do rótulo no modo `spinner`.
+ * @part cancel-button - Botão de cancelamento no modo `progress` cancelável.
+ */
+export class Loading {
+    constructor() {
+        /**
+         * Valor exibido no texto de progresso durante a transição.
+         */
+        this.displayedValue = 0;
+        /**
+         * Define a posição da label em relação ao loading.
+         * @default 'bottom'
+         */
+        this.labelPosition = 'bottom';
+        /**
+         * Identificador único do componente.
+         * Quando omitido, um valor é gerado automaticamente.
+         *
+         * > **Padrão:** valor único gerado por generateUniqueId().
+         *
+         */
+        this.customId = generateUniqueId();
+        /**
+         * Define o modo de exibição do componente.
+         * @default 'spinner'
+         */
+        this.mode = 'spinner';
+        /**
+         * Define o tamanho visual nos modos `spinner` e `progress`.
+         * @default 'medium'
+         * @deprecated Use `density`.
+         */
+        this.size = 'medium';
+        /**
+         * Remove o espaçamento externo e oculta visualmente o rótulo, mantendo-o
+         * disponível para tecnologias assistivas. Use em áreas compactas, como
+         * controles de paginação ou campos de formulário.
+         * @default false
+         */
+        this.compact = false;
+        /**
+         * Define a velocidade da animação/transição.
+         * @default 'normal'
+         */
+        this.speed = 'normal';
+        /**
+         * Define o progresso no modo `progress`.
+         * No modo `spinner`, esta prop não tem efeito.
+         * Valores inválidos são normalizados para `0`.
+         * @default 0
+         */
+        this.value = 0;
+        /**
+         * Define o comportamento quando o progresso atinge 100.
+         * No modo `spinner`, esta prop não tem efeito.
+         * @default 'persist'
+         */
+        this.completion = 'persist';
+        /**
+         * Define se o botão de cancelamento será exibido.
+         * Ao pressionar o botão, o evento `brLoadingCancel` é emitido.
+         * No modo `spinner`, esta prop não tem efeito.
+         * @default false
+         */
+        this.cancelable = false;
+        /**
+         * Define o texto do botão de cancelamento.
+         * No modo `spinner`, esta prop não tem efeito.
+         * @default 'Cancelar'
+         */
+        this.cancelLabel = 'Cancelar';
+        /** Último estado lógico de atividade no modo `spinner`. */
+        this.isIndeterminateActive = false;
+        /**
+         * Trata o clique no botão de cancelamento.
+         */
+        this.handleCancelClick = () => {
+            if (this.mode !== 'progress' || !this.cancelable)
+                return;
+            this.brLoadingCancel.emit({ value: this.normalizedValue });
+        };
+    }
+    /**
+     * Reage a mudanças em `value` no modo `progress`.
+     * @param newValue Novo valor recebido.
+     */
+    handleCompletion(newValue) {
+        const sanitizedValue = this.normalizeInputValue(newValue);
+        if (sanitizedValue !== newValue) {
+            return;
+        }
+        if (this.mode !== 'progress')
+            return;
+        this.brLoadingChange.emit({ value: this.normalizedValue });
+        this.syncDisplayedProgress(this.normalizedValue);
+        this.applyCompletionBehavior(newValue);
+    }
+    /**
+     * Reage a mudanças em `mode` e atualiza o estado lógico de atividade.
+     */
+    handleModeChange() {
+        this.syncIndeterminateActiveState();
+    }
+    /**
+     * Etapa do ciclo de vida: desmontagem do componente.
+     * Libera recursos de animação pendentes.
+     */
+    disconnectedCallback() {
+        this.cleanupProgressResources();
+        if (this.isIndeterminateActive) {
+            this.isIndeterminateActive = false;
+            this.brIndeterminateStateChange.emit({ active: false });
+        }
+    }
+    /**
+     * Etapa do ciclo de vida: antes da primeira renderização.
+     * Inicializa o estado visual do progresso.
+     */
+    componentWillLoad() {
+        this.normalizeInputValue(this.value);
+        this.initializeProgressDisplay();
+        this.syncIndeterminateActiveState();
+    }
+    /**
+     * Define o valor do progresso.
+     * @param value Valor desejado.
+     * @returns Progresso normalizado.
+     */
+    async setValue(value) {
+        this.normalizeInputValue(value);
+        return { value: this.normalizedValue };
+    }
+    /**
+     * Soma um valor ao progresso atual.
+     * @param step Incremento aplicado.
+     * @returns Progresso normalizado.
+     */
+    async incrementValue(step = 1) {
+        this.value = this.normalizedValue + step;
+        return { value: this.normalizedValue };
+    }
+    /**
+     * Define o progresso como concluído.
+     * @returns Progresso normalizado.
+     */
+    async complete() {
+        this.value = 100;
+        return { value: this.normalizedValue };
+    }
+    /**
+     * Reinicia o progresso e exibe o componente.
+     * @returns Progresso normalizado.
+     */
+    async reset() {
+        this.value = 0;
+        this.setVisibility(true);
+        if (this.mode === 'progress') {
+            this.brLoadingReset.emit({ value: this.normalizedValue });
+        }
+        return { value: this.normalizedValue };
+    }
+    /**
+     * Exibe o componente.
+     * @returns Estado de visibilidade.
+     */
+    async show() {
+        this.setVisibility(true);
+        return { visible: true };
+    }
+    /**
+     * Oculta o componente.
+     * @returns Estado de visibilidade.
+     */
+    async hide() {
+        this.setVisibility(false);
+        return { visible: false };
+    }
+    /**
+     * Retorna o progresso no intervalo de 0 a 100.
+     * @private
+     */
+    get normalizedValue() {
+        return this.toValidProgressValue(this.value);
+    }
+    /**
+     * Retorna a dimensão do SVG.
+     * @private
+     */
+    get dimension() {
+        return DIMENSION_MAP[this.mode][this.density ?? this.size];
+    }
+    /**
+     * Retorna a espessura do traço do círculo.
+     * @private
+     */
+    get strokeWidth() {
+        return STROKE_WIDTH_MAP[this.mode][this.density ?? this.size];
+    }
+    /**
+     * Retorna o tamanho da fonte do percentual no modo `progress`.
+     * @private
+     */
+    get percentageFontSize() {
+        return PERCENTAGE_FONT_SIZE_MAP[this.density ?? this.size];
+    }
+    /**
+     * Retorna a coordenada central do SVG.
+     * @private
+     */
+    get center() {
+        return this.dimension / 2;
+    }
+    /**
+     * Retorna o raio útil do círculo.
+     * @private
+     */
+    get radius() {
+        return this.center - this.strokeWidth / 2;
+    }
+    /**
+     * Retorna a circunferência do círculo.
+     * @private
+     */
+    get circumference() {
+        return 2 * Math.PI * this.radius;
+    }
+    /**
+     * Retorna o deslocamento do traço conforme o progresso.
+     * @private
+     */
+    get progressOffset() {
+        const progress = this.normalizedValue / 100;
+        return this.circumference * (1 - progress);
+    }
+    /**
+     * Aplica a ação configurada ao atingir 100% no modo `progress`.
+     * @param value Valor atual do progresso.
+     */
+    applyCompletionBehavior(value) {
+        if (this.mode !== 'progress')
+            return;
+        if (value >= 100) {
+            this.brLoadingComplete.emit({ value: 100, completion: this.completion });
+            if (this.completion === 'reset') {
+                setTimeout(() => this.reset(), 300);
+            }
+            if (this.completion === 'hide') {
+                this.setVisibility(false);
+            }
+        }
+    }
+    /**
+     * Inicializa o valor exibido no texto de progresso.
+     */
+    initializeProgressDisplay() {
+        this.displayedValue = this.normalizedValue;
+    }
+    /**
+     * Libera recursos usados pela animação de progresso.
+     */
+    cleanupProgressResources() {
+        this.stopProgressAnimation();
+    }
+    /**
+     * Emite mudança de estado lógico para o modo `spinner` quando necessário.
+     */
+    syncIndeterminateActiveState() {
+        const shouldBeActive = this.mode === 'spinner' && this.el.style.display !== 'none';
+        if (this.isIndeterminateActive === shouldBeActive)
+            return;
+        this.isIndeterminateActive = shouldBeActive;
+        this.brIndeterminateStateChange.emit({ active: shouldBeActive });
+    }
+    /**
+     * Sincroniza o texto de percentual com a transição visual do círculo.
+     * @param targetValue Valor final do progresso normalizado.
+     */
+    syncDisplayedProgress(targetValue) {
+        if (this.mode !== 'progress') {
+            this.displayedValue = targetValue;
+            return;
+        }
+        this.stopProgressAnimation();
+        const from = this.displayedValue;
+        const to = targetValue;
+        const durationMs = TRANSITION_MAP[this.speed] * 1000;
+        if (from === to || durationMs <= 0) {
+            this.displayedValue = to;
+            return;
+        }
+        const startedAt = performance.now();
+        const step = (now) => {
+            if (typeof document !== 'undefined' && document.hidden) {
+                this.displayedValue = to;
+                this.progressAnimationFrameId = undefined;
+                return;
+            }
+            const elapsed = Math.min((now - startedAt) / durationMs, 1);
+            const eased = this.easeProgress(elapsed);
+            this.displayedValue = Math.round(from + (to - from) * eased);
+            if (elapsed < 1) {
+                this.progressAnimationFrameId = requestAnimationFrame(step);
+                return;
+            }
+            this.displayedValue = to;
+            this.progressAnimationFrameId = undefined;
+        };
+        this.progressAnimationFrameId = requestAnimationFrame(step);
+    }
+    /**
+     * Interpolação para suavizar a animação do percentual.
+     * @param time Progresso normalizado da animação (0 a 1).
+     * @returns Valor interpolado entre 0 e 1.
+     */
+    easeProgress(time) {
+        return time < 0.5 ? 2 * time * time : -1 + (4 - 2 * time) * time;
+    }
+    /** Cancela a animação de percentual em andamento. */
+    stopProgressAnimation() {
+        if (this.progressAnimationFrameId === undefined)
+            return;
+        cancelAnimationFrame(this.progressAnimationFrameId);
+        this.progressAnimationFrameId = undefined;
+    }
+    /**
+     * Atualiza a visibilidade e emite o evento correspondente.
+     * @param visible Define se o componente ficará visível.
+     * @private
+     */
+    setVisibility(visible) {
+        this.el.style.display = visible ? '' : 'none';
+        this.syncIndeterminateActiveState();
+        if (visible) {
+            this.brDidShow.emit();
+            this.brLoadingShow.emit();
+            return;
+        }
+        this.brDidHide.emit();
+        this.brLoadingHide.emit();
+    }
+    /**
+     * Normaliza um valor arbitrário de progresso para o intervalo de 0 a 100.
+     * Valores inválidos (incluindo string vazia e NaN) são convertidos para 0.
+     * Também sincroniza `this.value` internamente quando necessário.
+     */
+    normalizeInputValue(value) {
+        const normalizedValue = this.toValidProgressValue(value);
+        if (this.value !== normalizedValue) {
+            this.value = normalizedValue;
+        }
+        return normalizedValue;
+    }
+    toValidProgressValue(value) {
+        if (typeof value === 'string' && value.trim() === '') {
+            return 0;
+        }
+        const numericValue = typeof value === 'number' ? value : Number(value);
+        if (!Number.isFinite(numericValue)) {
+            return 0;
+        }
+        return clampNumber(numericValue, 0, 100, 0);
+    }
+    /**
+     * Monta o mapa de classes CSS do host interno.
+     * @returns Mapa de classes aplicadas.
+     * @private
+     */
+    getCssClassMap() {
+        const cssClassMap = {
+            'br-loading': true,
+            [`loading-mode-${this.mode}`]: true,
+            [`loading-${this.speed}`]: true,
+            [`loading-${this.density ?? this.size}`]: true,
+        };
+        return cssClassMap;
+    }
+    /**
+     * Renderiza o modo `spinner`.
+     * @returns Estrutura JSX do spinner.
+     */
+    renderIndeterminate() {
+        const duration = `${SPEED_MAP[this.speed]}s`;
+        return this.renderSpinnerWithLabelPosition(duration);
+    }
+    /**
+     * Renderiza spinner com label em qualquer posição.
+     */
+    renderSpinnerWithLabelPosition(duration) {
+        const label = this.label && (h("div", { class: `loading-label loading-label-${this.labelPosition}`, part: "label-wrapper" }, h("slot", { name: "label" }, this.label)));
+        const spinner = (h("svg", { part: "svg", class: "loading-spinner", width: this.dimension, height: this.dimension, viewBox: `0 0 ${this.dimension} ${this.dimension}`, role: "progressbar", "aria-busy": "true", "aria-label": this.label || 'Carregando', style: {
+                '--loading-animation-duration': duration,
+            } }, h("circle", { class: "loading-indicator", cx: this.center, cy: this.center, r: this.radius, fill: "none", "stroke-width": this.strokeWidth, "stroke-dasharray": this.circumference, "stroke-dashoffset": this.circumference * 0.75 })));
+        // Layout flexível para cada posição
+        switch (this.labelPosition) {
+            case 'top':
+                return (h("div", { class: "loading-wrapper loading-label-top", part: "wrapper" }, label, spinner));
+            case 'right':
+                return (h("div", { class: "loading-wrapper loading-label-right", part: "wrapper" }, spinner, label));
+            case 'left':
+                return (h("div", { class: "loading-wrapper loading-label-left", part: "wrapper" }, label, spinner));
+            default:
+                return (h("div", { class: "loading-wrapper loading-label-bottom", part: "wrapper" }, spinner, label));
+        }
+    }
+    /**
+     * Renderiza o modo `progress`.
+     * @returns Estrutura JSX do progresso circular.
+     * @private
+     */
+    renderDeterminate() {
+        const transitionDuration = `${TRANSITION_MAP[this.speed]}s`;
+        const progressStyle = {
+            '--loading-transition-duration': transitionDuration,
+            '--loading-percentage-font-size': this.percentageFontSize,
+        };
+        return (h("div", { class: "loading-wrapper", part: "wrapper" }, h("svg", { part: "svg", class: "loading-progress", width: this.dimension, height: this.dimension, viewBox: `0 0 ${this.dimension} ${this.dimension}`, role: "progressbar", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": this.normalizedValue, style: progressStyle }, h("circle", { class: "loading-spinner-track", cx: this.center, cy: this.center, r: this.radius, fill: "none", "stroke-width": this.strokeWidth }), h("circle", { class: "loading-indicator-progress", cx: this.center, cy: this.center, r: this.radius, fill: "none", "stroke-width": this.strokeWidth, "stroke-dasharray": this.circumference, "stroke-dashoffset": this.progressOffset }), h("text", { part: "percentage", class: "loading-percentage", x: "50%", y: "50%", dy: ".35em", "text-anchor": "middle" }, this.displayedValue, "%")), this.cancelable && (h("br-button", { ref: (el) => setPartAttributes(el, 'cancel-button', 'button: cancel-button-inner'), emphasis: "tertiary", type: "button", "prop:ariaLabel": this.cancelLabel, onClick: this.handleCancelClick }, h("slot", { name: "cancel-button" }, this.cancelLabel)))));
+    }
+    /**
+     * Renderiza o componente conforme o modo atual.
+     * @returns Estrutura JSX final.
+     */
+    render() {
+        return (h(Host, { key: '44a334442038cbd20c02bd5c6ebc1dca232c4023' }, h("div", { key: '42b32ce541fa6ff8e52c66423ae6f5a46d299a5e', class: this.getCssClassMap(), part: "container" }, this.mode === 'spinner' ? this.renderIndeterminate() : this.renderDeterminate())));
+    }
+    static get is() { return "br-loading"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["loading.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["loading.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "labelPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "LoadingLabelPosition",
+                    "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
+                    "references": {
+                        "LoadingLabelPosition": {
+                            "location": "import",
+                            "path": "./loading.types",
+                            "id": "src/components/loading/loading.types.ts::LoadingLabelPosition",
+                            "referenceLocation": "LoadingLabelPosition"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'bottom'"
+                        }],
+                    "text": "Define a posi\u00E7\u00E3o da label em rela\u00E7\u00E3o ao loading."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "label-position",
+                "defaultValue": "'bottom'"
+            },
+            "customId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Identificador \u00FAnico do componente.\nQuando omitido, um valor \u00E9 gerado automaticamente.\n\n> **Padr\u00E3o:** valor \u00FAnico gerado por generateUniqueId()."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "custom-id",
+                "defaultValue": "generateUniqueId()"
+            },
+            "mode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "LoadingMode",
+                    "resolved": "\"progress\" | \"spinner\"",
+                    "references": {
+                        "LoadingMode": {
+                            "location": "import",
+                            "path": "./loading.types",
+                            "id": "src/components/loading/loading.types.ts::LoadingMode",
+                            "referenceLocation": "LoadingMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'spinner'"
+                        }],
+                    "text": "Define o modo de exibi\u00E7\u00E3o do componente."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "mode",
+                "defaultValue": "'spinner'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "LoadingSize",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {
+                        "LoadingSize": {
+                            "location": "import",
+                            "path": "./loading.types",
+                            "id": "src/components/loading/loading.types.ts::LoadingSize",
+                            "referenceLocation": "LoadingSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'medium'"
+                        }, {
+                            "name": "deprecated",
+                            "text": "Use `density`."
+                        }],
+                    "text": "Define o tamanho visual nos modos `spinner` e `progress`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'medium'"
+            },
+            "density": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "LoadingSize",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {
+                        "LoadingSize": {
+                            "location": "import",
+                            "path": "./loading.types",
+                            "id": "src/components/loading/loading.types.ts::LoadingSize",
+                            "referenceLocation": "LoadingSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Densidade visual can\u00F4nica. Quando informada, tem preced\u00EAncia sobre `size`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "density"
+            },
+            "compact": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Remove o espa\u00E7amento externo e oculta visualmente o r\u00F3tulo, mantendo-o\ndispon\u00EDvel para tecnologias assistivas. Use em \u00E1reas compactas, como\ncontroles de pagina\u00E7\u00E3o ou campos de formul\u00E1rio."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "compact",
+                "defaultValue": "false"
+            },
+            "speed": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "LoadingSpeed",
+                    "resolved": "\"fast\" | \"normal\" | \"slow\"",
+                    "references": {
+                        "LoadingSpeed": {
+                            "location": "import",
+                            "path": "./loading.types",
+                            "id": "src/components/loading/loading.types.ts::LoadingSpeed",
+                            "referenceLocation": "LoadingSpeed"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'normal'"
+                        }],
+                    "text": "Define a velocidade da anima\u00E7\u00E3o/transi\u00E7\u00E3o."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "speed",
+                "defaultValue": "'normal'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "undefined"
+                        }],
+                    "text": "Define o r\u00F3tulo exibido no modo `spinner`.\nNo modo `progress`, esta prop n\u00E3o tem efeito."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "label"
+            },
+            "value": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "0"
+                        }],
+                    "text": "Define o progresso no modo `progress`.\nNo modo `spinner`, esta prop n\u00E3o tem efeito.\nValores inv\u00E1lidos s\u00E3o normalizados para `0`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value",
+                "defaultValue": "0"
+            },
+            "completion": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "LoadingCompletionBehavior",
+                    "resolved": "\"hide\" | \"persist\" | \"reset\"",
+                    "references": {
+                        "LoadingCompletionBehavior": {
+                            "location": "import",
+                            "path": "./loading.types",
+                            "id": "src/components/loading/loading.types.ts::LoadingCompletionBehavior",
+                            "referenceLocation": "LoadingCompletionBehavior"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'persist'"
+                        }],
+                    "text": "Define o comportamento quando o progresso atinge 100.\nNo modo `spinner`, esta prop n\u00E3o tem efeito."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "completion",
+                "defaultValue": "'persist'"
+            },
+            "cancelable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Define se o bot\u00E3o de cancelamento ser\u00E1 exibido.\nAo pressionar o bot\u00E3o, o evento `brLoadingCancel` \u00E9 emitido.\nNo modo `spinner`, esta prop n\u00E3o tem efeito."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "cancelable",
+                "defaultValue": "false"
+            },
+            "cancelLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'Cancelar'"
+                        }],
+                    "text": "Define o texto do bot\u00E3o de cancelamento.\nNo modo `spinner`, esta prop n\u00E3o tem efeito."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "cancel-label",
+                "defaultValue": "'Cancelar'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "displayedValue": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "brLoadingChange",
+                "name": "brLoadingChange",
+                "bubbles": true,
+                "cancelable": false,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "event",
+                            "text": "brLoadingChange\nPayload (`LoadingChangeDetail`):\n- `value` (`number`): progresso normalizado (0 a 100)."
+                        }],
+                    "text": "Notifica mudan\u00E7a de progresso no modo `progress`."
+                },
+                "complexType": {
+                    "original": "LoadingChangeDetail",
+                    "resolved": "{ value: number; }",
+                    "references": {
+                        "LoadingChangeDetail": {
+                            "location": "import",
+                            "path": "./loading.types",
+                            "id": "src/components/loading/loading.types.ts::LoadingChangeDetail",
+                            "referenceLocation": "LoadingChangeDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "brLoadingComplete",
+                "name": "brLoadingComplete",
+                "bubbles": true,
+                "cancelable": false,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "event",
+                            "text": "brLoadingComplete\nPayload (`LoadingCompleteDetail`):\n- `value` (`number`): progresso normalizado (0 a 100).\n- `completion` (`LoadingCompletionBehavior`): a\u00E7\u00E3o aplicada ao atingir 100%.\n- `persist`: mant\u00E9m o loading em 100%.\n- `reset`: reinicia o progresso para 0.\n- `hide`: oculta o componente."
+                        }],
+                    "text": "Notifica conclus\u00E3o do progresso no modo `progress`."
+                },
+                "complexType": {
+                    "original": "LoadingCompleteDetail",
+                    "resolved": "{ value: number; completion: LoadingCompletionBehavior; }",
+                    "references": {
+                        "LoadingCompleteDetail": {
+                            "location": "import",
+                            "path": "./loading.types",
+                            "id": "src/components/loading/loading.types.ts::LoadingCompleteDetail",
+                            "referenceLocation": "LoadingCompleteDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "brLoadingReset",
+                "name": "brLoadingReset",
+                "bubbles": true,
+                "cancelable": false,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "event",
+                            "text": "brLoadingReset\nPayload (`LoadingValueDetail`):\n- `value` (`number`): valor do progresso ap\u00F3s o reset."
+                        }],
+                    "text": "Notifica rein\u00EDcio do progresso no modo `progress`."
+                },
+                "complexType": {
+                    "original": "LoadingValueDetail",
+                    "resolved": "{ value: number; }",
+                    "references": {
+                        "LoadingValueDetail": {
+                            "location": "import",
+                            "path": "./loading.types",
+                            "id": "src/components/loading/loading.types.ts::LoadingValueDetail",
+                            "referenceLocation": "LoadingValueDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "brLoadingCancel",
+                "name": "brLoadingCancel",
+                "bubbles": true,
+                "cancelable": false,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "event",
+                            "text": "brLoadingCancel\nPayload (`LoadingValueDetail`):\n- `value` (`number`): valor de progresso no momento do cancelamento."
+                        }],
+                    "text": "Notifica clique no bot\u00E3o de cancelamento no modo `progress`.\nEste evento n\u00E3o altera o progresso automaticamente.\nA aplica\u00E7\u00E3o consumidora define a a\u00E7\u00E3o ap\u00F3s o cancelamento (ex.: limpar ou ocultar)."
+                },
+                "complexType": {
+                    "original": "LoadingValueDetail",
+                    "resolved": "{ value: number; }",
+                    "references": {
+                        "LoadingValueDetail": {
+                            "location": "import",
+                            "path": "./loading.types",
+                            "id": "src/components/loading/loading.types.ts::LoadingValueDetail",
+                            "referenceLocation": "LoadingValueDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "brIndeterminateStateChange",
+                "name": "brIndeterminateStateChange",
+                "bubbles": true,
+                "cancelable": false,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "event",
+                            "text": "brIndeterminateStateChange\nPayload (`LoadingIndeterminateStateDetail`):\n- `active` (`boolean`): `true` quando ativo; `false` quando inativo."
+                        }],
+                    "text": "Notifica mudan\u00E7a do estado l\u00F3gico no modo `spinner`."
+                },
+                "complexType": {
+                    "original": "LoadingIndeterminateStateDetail",
+                    "resolved": "{ active: boolean; }",
+                    "references": {
+                        "LoadingIndeterminateStateDetail": {
+                            "location": "import",
+                            "path": "./loading.types",
+                            "id": "src/components/loading/loading.types.ts::LoadingIndeterminateStateDetail",
+                            "referenceLocation": "LoadingIndeterminateStateDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "brDidShow",
+                "name": "brDidShow",
+                "bubbles": true,
+                "cancelable": false,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "event",
+                            "text": "brDidShow\nPayload: `void`."
+                        }],
+                    "text": "Notifica que o componente foi exibido."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "brLoadingShow",
+                "name": "brLoadingShow",
+                "bubbles": true,
+                "cancelable": false,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Evento can\u00F4nico emitido quando o loading \u00E9 exibido."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "brDidHide",
+                "name": "brDidHide",
+                "bubbles": true,
+                "cancelable": false,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "event",
+                            "text": "brDidHide\nPayload: `void`."
+                        }],
+                    "text": "Notifica que o componente foi ocultado."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "brLoadingHide",
+                "name": "brLoadingHide",
+                "bubbles": true,
+                "cancelable": false,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Evento can\u00F4nico emitido quando o loading \u00E9 ocultado."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setValue": {
+                "complexType": {
+                    "signature": "(value: number) => Promise<{ value: number; }>",
+                    "parameters": [{
+                            "name": "value",
+                            "type": "number",
+                            "docs": "Valor desejado."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<{ value: number; }>"
+                },
+                "docs": {
+                    "text": "Define o valor do progresso.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "value Valor desejado."
+                        }, {
+                            "name": "returns",
+                            "text": "Progresso normalizado."
+                        }]
+                }
+            },
+            "incrementValue": {
+                "complexType": {
+                    "signature": "(step?: number) => Promise<{ value: number; }>",
+                    "parameters": [{
+                            "name": "step",
+                            "type": "number",
+                            "docs": "Incremento aplicado."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<{ value: number; }>"
+                },
+                "docs": {
+                    "text": "Soma um valor ao progresso atual.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "step Incremento aplicado."
+                        }, {
+                            "name": "returns",
+                            "text": "Progresso normalizado."
+                        }]
+                }
+            },
+            "complete": {
+                "complexType": {
+                    "signature": "() => Promise<{ value: number; }>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<{ value: number; }>"
+                },
+                "docs": {
+                    "text": "Define o progresso como conclu\u00EDdo.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "Progresso normalizado."
+                        }]
+                }
+            },
+            "reset": {
+                "complexType": {
+                    "signature": "() => Promise<{ value: number; }>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<{ value: number; }>"
+                },
+                "docs": {
+                    "text": "Reinicia o progresso e exibe o componente.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "Progresso normalizado."
+                        }]
+                }
+            },
+            "show": {
+                "complexType": {
+                    "signature": "() => Promise<{ visible: boolean; }>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<{ visible: boolean; }>"
+                },
+                "docs": {
+                    "text": "Exibe o componente.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "Estado de visibilidade."
+                        }]
+                }
+            },
+            "hide": {
+                "complexType": {
+                    "signature": "() => Promise<{ visible: boolean; }>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<{ visible: boolean; }>"
+                },
+                "docs": {
+                    "text": "Oculta o componente.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "Estado de visibilidade."
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "handleCompletion"
+            }, {
+                "propName": "mode",
+                "methodName": "handleModeChange"
+            }];
+    }
+}