@govbr-ds/webcomponents 2.1.0 → 2.1.1

package/dist/collection/components/table/table-header/table-header.js

@@ -0,0 +1,51 @@
+/*!
+ * Construído por SERPRO
+ * © https://serpro.gov.br/ - MIT License.
+ */
+import { Host, h } from "@stencil/core";
+/**
+ * ## Design System
+ *
+ * O br-table-header é um subcomponente estrutural da tabela, responsável por agrupar as linhas de cabeçalho da tabela, representadas pelo subcomponente br-table-row.
+ * Ele é utilizado para organizar e estruturar o conteúdo do cabeçalho da tabela, permitindo a definição de múltiplas linhas de cabeçalho, cada uma contendo células de cabeçalho representadas pelo subcomponente br-table-header-cell.
+ *
+ * @remarks
+ * Para a documentação completa de design, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o [Design System do GovBR](https://www.gov.br/ds/components/table?tab=designer).
+ *
+ * @Slot default: Área para inclusão do subcomponente br-table-row, que representa as linhas do cabeçalho da tabela.
+ *
+ * @part header - Wrapper do cabeçalho da tabela.
+ */
+export class TableHeader {
+    /**
+     * Retorna o mapa de classes base do componente.
+     *
+     * @returns Um objeto representando as classes CSS a serem aplicadas ao elemento do cabeçalho da tabela.
+     */
+    getHeaderCssClassMap() {
+        return {
+            'br-table-header': true,
+        };
+    }
+    /**
+     * Renderiza o host do componente.
+     *
+     * @returns JSX.Element representando o elemento host do componente, contendo a estrutura do cabeçalho da tabela.
+     */
+    render() {
+        return (h(Host, { key: 'c7d89021c515c8ff73f71159cb0e2017191e115f', role: "rowgroup" }, h("div", { key: '4d3bd0d24dfe904e5539e46981ba266265fae319', class: this.getHeaderCssClassMap(), role: "presentation", part: "header" }, h("slot", { key: '9205b717b16dcf66e269303027c04ddf62b95773' }))));
+    }
+    static get is() { return "br-table-header"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["table-header.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["table-header.css"]
+        };
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/components/table/table-header-cell/table-header-cell.css

@@ -0,0 +1 @@
+*,*::before,*::after{box-sizing:border-box}:host{line-height:var(--font-line-height-medium);-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}main{display:block}hr{box-sizing:content-box;height:0;overflow:visible}a{background-color:rgba(0,0,0,0)}b,strong{font-weight:bolder}code{font-family:monospace;font-size:1em}small{font-size:80%}img{border-style:none}button,input,select,textarea{font-family:inherit;font-size:100%;line-height:var(--font-line-height-medium);margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{appearance:none}::-webkit-file-upload-button{appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}.d-none{display:none !important}@media(min-width: 576px){.d-sm-block{display:block !important}.d-sm-flex{display:flex !important}}[data-toggle=dropdown]+*{position:absolute}.dropdown{position:relative}.dropdown [data-toggle=dropdown]+*{box-shadow:var(--surface-shadow-sm);left:0;position:absolute;top:100%}.dropdown>.br-notification{left:auto;right:0}.dropdown .br-item{--color: var(--color-light);--color-rgb: var(--color-light-rgb);--text-color: var(--color-light);--interactive: var(--interactive-light);--interactive-rgb: var(--color-rgb);--visited: var(--visited-light);--hover: var(--hover-light);--pressed: var(--pressed-light);--focus-color: var(--focus-color-light);--focus: var(--focus-color-light);--item-padding-y: var(--spacing-scale-2x);background-color:var(--background-light);color:var(--color)}.dropdown .br-item:not(:last-child){border-bottom:1px solid var(--border-color)}.dropdown .br-item.selected{--color: var(--color-dark);--color-rgb: var(--color-dark-rgb);--text-color: var(--color-dark);--interactive: var(--interactive-dark);--interactive-rgb: var(--interactive-dark-rgb);--visited: var(--visited-dark);--hover: var(--hover-dark);--pressed: var(--pressed-dark);--focus-color: var(--focus-color-dark);--focus: var(--focus-color-dark)}.justify-content-start{justify-content:flex-start !important}.justify-content-end{justify-content:flex-end !important}.justify-content-center{justify-content:center !important}.align-items-center{align-items:center !important}.col,[class*=col-]{padding-left:calc(var(--grid-gutter)*.5);padding-right:calc(var(--grid-gutter)*.5);width:100%}.col{flex:1 0 0%;min-width:8.3333333333%}.col-auto{flex:0 0 auto;width:auto}.col-2{flex-basis:16.6666666667%;max-width:16.6666666667%}.container,.container-fluid,.container-lg{--grid-margin: var(--grid-portrait-margin);--grid-maxwidth: var(--grid-portrait-maxwidth);margin-left:auto;margin-right:auto;max-width:var(--grid-maxwidth);padding-left:var(--grid-margin);padding-right:var(--grid-margin);width:100%}.row{--grid-gutter: var(--grid-portrait-gutter);display:flex;flex-wrap:wrap;margin-left:calc(var(--grid-gutter)*-0.5);margin-right:calc(var(--grid-gutter)*-0.5)}@media(min-width: 576px){.container,.container-lg,.container-fluid{--grid-margin: var(--grid-tablet-margin)}.row{--grid-gutter: var(--grid-tablet-gutter)}.container{--grid-maxwidth: calc(var(--grid-breakpoint-sm) - var(--grid-tablet-margin))}}@media(min-width: 992px){.container,.container-lg,.container-fluid{--grid-margin: var(--grid-tablet-margin)}.row{--grid-gutter: var(--grid-tablet-gutter)}.container{--grid-maxwidth: calc(var(--grid-breakpoint-md) - var(--grid-tablet-margin))}}@media(min-width: 1280px){.container,.container-lg,.container-fluid{--grid-margin: var(--grid-desktop-margin)}.row{--grid-gutter: var(--grid-desktop-gutter)}.container,.container-lg{--grid-maxwidth: calc(var(--grid-breakpoint-lg) - var(--grid-desktop-margin))}}@media(min-width: 1600px){.container,.container-lg,.container-fluid{--grid-margin: var(--grid-tv-margin)}.row{--grid-gutter: var(--grid-tv-gutter)}.container,.container-lg{--grid-maxwidth: calc(var(--grid-breakpoint-xl) - var(--grid-tv-margin))}}.ease{animation-timing-function:cubic-bezier(0.25, 0.1, 0.25, 1)}.ease-in-out{animation-timing-function:cubic-bezier(0.42, 0, 0.58, 1)}.mt-1{margin-top:var(--spacing-scale-half) !important}.mr-1{margin-right:var(--spacing-scale-half) !important}.mb-1{margin-bottom:var(--spacing-scale-half) !important}.ml-1{margin-left:var(--spacing-scale-half) !important}.mx-3{margin-left:var(--spacing-scale-2x) !important;margin-right:var(--spacing-scale-2x) !important}.mb-4{margin-bottom:var(--spacing-scale-3x) !important}.ml-auto{margin-left:auto !important}.pt-half{padding-top:var(--spacing-scale-half) !important}@media(min-width: 576px){.ml-sm-0{margin-left:var(--spacing-scale-default) !important}}.highlight{background:var(--status-highlight-background) linear-gradient(var(--status-highlight-overlay), var(--status-highlight-overlay));color:var(--status-highlight-text);padding:0 var(--spacing-scale-half)}[disabled],.disabled{cursor:not-allowed;opacity:var(--disabled)}[disabled] *,.disabled *{pointer-events:none}.text-center{text-align:center !important}.text-right{text-align:right !important}.text-nowrap{white-space:nowrap !important}.text-uppercase{text-transform:uppercase !important}.text-bold{font-weight:700 !important}.text-base{font-size:var(--font-size-scale-base) !important}.text-down-01{font-size:var(--font-size-scale-down-01) !important}@media(min-width: 576px){.text-sm-center{text-align:center !important}.text-sm-left{text-align:left !important}.text-sm-right{text-align:right !important}}p{color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-2x);margin-top:0}p a{text-decoration:underline}@media(min-width: 576px){p{font-size:var(--font-size-scale-up-01)}}a{--focus-offset: var(--spacing-scale-half)}a:focus{outline:none}a.focus-visible,a:focus-visible{outline-color:var(--focus);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}a:not(:disabled):hover{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}a:not(:disabled):active{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--pressed)), rgba(var(--interactive-rgb), var(--pressed)))}a{color:var(--interactive);text-decoration:none}.main-content a{text-decoration:underline}button{cursor:pointer}img{max-width:100%;vertical-align:middle}h2,.h2{color:var(--color);font-size:var(--font-size-scale-up-03);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-2xh);margin-top:var(--spacing-scale-3xh);padding-bottom:var(--spacing-scale-2xh)}@media(min-width: 576px){.h2,h2{font-size:var(--font-size-scale-up-05);font-weight:var(--font-weight-regular)}}ul,ol{margin-bottom:var(--spacing-scale-2x);margin-top:0;padding:0 0 0 var(--spacing-scale-5x)}table{--table-background: var(--background);--table-color: var(--color);--table-border-color: var(--gray-20);--table-border-style: solid;--table-border-width: 1px;--table-hover: var(--color-rgb);--table-padding: var(--spacing-scale-3x);--table-font-weight: var(--font-weight-medium);--table-th-background: var(--background-alternative);--table-th-font-weight: var(--font-weight-semi-bold);--table-row-size: var(--spacing-scale-2x);border-collapse:collapse;width:100%}tr.selected,tr.is-selected{--color: var(--color-dark);--color-rgb: var(--color-dark-rgb);--text-color: var(--color-dark);--interactive: var(--interactive-dark);--interactive-rgb: var(--interactive-dark-rgb);--visited: var(--visited-dark);--hover: var(--hover-dark);--pressed: var(--pressed-dark);--focus-color: var(--focus-color-dark);--focus: var(--focus-color-dark)}label,.label{color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half)}fieldset,.fieldset{border:var(--surface-width-none);margin-bottom:var(--spacing-scale-5x);margin-top:0;padding:0}legend,.legend{color:var(--color);font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-2x);margin-top:var(--spacing-scale-2x)}::placeholder,.placeholder{color:var(--color-light);font-size:var(--font-size-scale-base);font-style:italic;font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half);margin-top:var(--spacing-scale-half);opacity:1}input,textarea,.input{color:var(--color-light);font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-half)}.help{font-size:var(--font-size-scale-base)}code,.code{background:var(--gray-5);border-radius:4px;color:var(--gray-80);display:inline-block;font-family:monospace;font-size:var(--font-size-scale-base);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-low);padding:var(--spacing-scale-half)}*[data-toggle=collapse]:not(:disabled):hover{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}*[data-toggle=collapse]:focus{outline:none}*[data-toggle=collapse].focus-visible,*[data-toggle=collapse]:focus-visible{outline-color:var(--focus);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}:host{display:contents}.br-table-header-cell{min-width:0;padding:var(--br-table-density) var(--table-row-size);background-color:var(--background-alternative);border-right:calc(var(--br-table-divider-base-width, 0px)*var(--br-table-column-divider-factor, 0)) var(--br-table-divider-style, solid) var(--border-color);color:var(--blue-warm-vivid-70);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-semi-bold)}.br-table-header-cell-content{display:flex;align-items:var(--br-table-vertical-alignment);justify-content:var(--br-table-horizontal-alignment);min-width:0;height:100%}.br-table-header-cell-truncate{min-width:0;max-width:100%;overflow:var(--br-table-cell-overflow);text-overflow:var(--br-table-cell-text-overflow);white-space:var(--br-table-cell-white-space);word-break:break-all}:host([data-last-column]) .br-table-header-cell{border-right:none}

package/dist/collection/components/table/table-header-cell/table-header-cell.js

@@ -0,0 +1,402 @@
+/*!
+ * Construído por SERPRO
+ * © https://serpro.gov.br/ - MIT License.
+ */
+import { Host, h } from "@stencil/core";
+import { TABLE_TOOLTIP_MODE, TABLE_TOOLTIP_STATE } from "../table-constants";
+/**
+ * ## Design System
+ *
+ * O br-table-header-cell é um subcomponente da table que representa uma célula de cabeçalho dentro da tabela, sendo utilizado para definir o conteúdo e as propriedades de formatação do cabeçalho da tabela.
+ * Ele é projetado para ser utilizado dentro do subcomponente br-table-row, que representa uma linha da tabela, permitindo a organização e estruturação do conteúdo do cabeçalho da tabela.
+ *
+ * @remarks
+ * Para a documentação completa de design, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o [Design System do GovBR](https://www.gov.br/ds/components/table?tab=designer).
+ *
+ * @Slot default: Área para inclusão de conteúdo da célula de cabeçalho da tabela.
+ *
+ * @part cell - Wrapper da célula de cabeçalho.
+ * @part content - Área de conteúdo da célula de cabeçalho.
+ */
+export class TableHeaderCell {
+    constructor() {
+        /**
+         * Controla a visibilidade do tooltip associado ao conteúdo truncado.
+         */
+        this.isTooltipVisible = false;
+        /**
+         * Armazena o texto completo exibido no tooltip.
+         */
+        this.tooltipContent = '';
+        this.tooltipRef = null;
+        this.truncateContentRef = null;
+        this.contentSlotRef = null;
+        this.handleMouseEnter = async () => {
+            if (this.resolveTooltipMode() !== TABLE_TOOLTIP_MODE.ENABLED) {
+                return;
+            }
+            const truncateContent = this.truncateContentRef;
+            if (truncateContent === null) {
+                return;
+            }
+            this.tooltipContent = this.getFullCellContent();
+            if (this.tooltipContent.length === 0) {
+                return;
+            }
+            this.isTooltipVisible = true;
+            await requestAnimationFramePromise();
+            if (this.tooltipRef !== null) {
+                await this.tooltipRef.setTriggerElement(truncateContent);
+                await this.tooltipRef.showTooltip();
+            }
+        };
+        this.handleMouseLeave = async () => {
+            if (this.tooltipRef !== null) {
+                await this.tooltipRef.hideTooltip();
+            }
+            this.isTooltipVisible = false;
+        };
+    }
+    /**
+     * Observa mudanças no token de largura da coluna, emitindo um evento para notificar que a largura foi alterada, permitindo que as células reajam dinamicamente a mudanças no layout.
+     */
+    handleColumnWidthChange() {
+        this.notifyColumnWidthChange();
+    }
+    /**
+     * Observa mudanças nos tokens de alinhamento horizontal e vertical, emitindo um evento para notificar que o alinhamento foi alterado, permitindo que a célula de cabeçalho reaja dinamicamente a essas mudanças.
+     */
+    handleAlignmentChange() {
+        this.notifyAlignmentChange();
+    }
+    /**
+     * Observa mudanças no token de overflow, emitindo um evento para notificar que a configuração de overflow foi alterada, permitindo que a célula de cabeçalho reaja dinamicamente a essa mudança.
+     */
+    handleOverflowChange() {
+        this.notifyOverflowChange();
+    }
+    componentDidLoad() {
+        this.notifyColumnWidthChange();
+        this.notifyAlignmentChange();
+        this.notifyOverflowChange();
+    }
+    getFullCellContent() {
+        if (this.contentSlotRef === null) {
+            return '';
+        }
+        return this.contentSlotRef
+            .assignedNodes({ flatten: true })
+            .map((node) => node.textContent?.trim() || '')
+            .filter((text) => text.length > 0)
+            .join(' ');
+    }
+    resolveTooltipState() {
+        const cellValue = this.el.getAttribute('tooltip-state');
+        if (cellValue !== null)
+            return cellValue;
+        const row = this.el.closest('br-table-row');
+        const rowValue = row?.getAttribute('tooltip-state');
+        if (rowValue !== null)
+            return rowValue;
+        const table = this.el.closest('br-table');
+        const tableValue = table?.getAttribute('tooltip-state');
+        if (tableValue !== null)
+            return tableValue;
+        return TABLE_TOOLTIP_STATE.INFO;
+    }
+    resolveTooltipMode() {
+        const cellValue = this.el.getAttribute('tooltip-mode');
+        if (cellValue !== null && cellValue !== TABLE_TOOLTIP_MODE.INHERIT)
+            return cellValue;
+        const row = this.el.closest('br-table-row');
+        const rowValue = row?.getAttribute('tooltip-mode');
+        if (rowValue !== null && rowValue !== TABLE_TOOLTIP_MODE.INHERIT)
+            return rowValue;
+        const table = this.el.closest('br-table');
+        const tableValue = table?.getAttribute('tooltip-mode');
+        if (tableValue !== null && tableValue !== TABLE_TOOLTIP_MODE.INHERIT)
+            return tableValue;
+        return TABLE_TOOLTIP_MODE.DISABLED;
+    }
+    /**
+     * Notifica que a largura da coluna foi alterada, emitindo o evento customizado correspondente.
+     */
+    notifyColumnWidthChange() {
+        this.brColumnWidthChange.emit();
+    }
+    /**
+     * Notifica que o alinhamento foi alterado, emitindo o evento customizado correspondente.
+     */
+    notifyAlignmentChange() {
+        this.brAlignmentChange.emit();
+    }
+    /**
+     * Notifica que a configuração de overflow foi alterada, emitindo o evento customizado correspondente.
+     */
+    notifyOverflowChange() {
+        this.brOverflowChange.emit();
+    }
+    /**
+     * Retorna o mapa de classes base do componente.
+     *
+     * @returns Um objeto representando as classes CSS a serem aplicadas ao elemento da célula de cabeçalho da tabela.
+     */
+    getHeaderCellCssClassMap() {
+        return {
+            'br-table-header-cell': true,
+        };
+    }
+    /**
+     * Renderiza o host do componente.
+     *
+     * @returns JSX.Element representando o elemento host do componente, contendo a estrutura da célula de cabeçalho da tabela.
+     */
+    render() {
+        return (h(Host, { key: '93ca4d3f7b7c3b054a977f3301ddb90167c5dc39', role: "columnheader" }, h("div", { key: '30c44a4a12fb6e1a4b2fc1e1d75fc6c2736ec830', class: this.getHeaderCellCssClassMap(), role: "presentation", part: "cell" }, h("div", { key: '09a3bbc7df54d490bcabeb44e77567c51131b07b', class: "br-table-header-cell-content", role: "presentation", part: "content" }, h("div", { key: '8cbaa401399a2edff7206bd53c07749538d9bdda', class: "br-table-header-cell-truncate", role: "presentation", ref: (el) => (this.truncateContentRef = el), onPointerEnter: this.handleMouseEnter, onPointerLeave: this.handleMouseLeave }, h("slot", { key: 'e8eb1495eba48b9a731b09fc9014f2f76ee98303', ref: (el) => (this.contentSlotRef = el) })), this.isTooltipVisible && (h("br-tooltip", { key: '4ec87008ba8a14ec3c92424c2371881a094a59b3', ref: (el) => (this.tooltipRef = el), position: "top", state: this.resolveTooltipState() === TABLE_TOOLTIP_STATE.DANGER ? 'danger' : this.resolveTooltipState() }, h("span", { key: 'a390ef9cda2cd64dfa35c7f63533e4600dd143f7', slot: "content" }, this.tooltipContent)))))));
+    }
+    static get is() { return "br-table-header-cell"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["table-header-cell.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["table-header-cell.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "columnWidth": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ColumnWidth",
+                    "resolved": "\"content\" | \"fill\" | `${number}fr` | `${number}px`",
+                    "references": {
+                        "ColumnWidth": {
+                            "location": "import",
+                            "path": "../table-types",
+                            "id": "src/components/table/table-types.ts::ColumnWidth",
+                            "referenceLocation": "ColumnWidth"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Define a largura da coluna."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "column-width"
+            },
+            "horizontalAlignment": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TableAlignment",
+                    "resolved": "\"center\" | \"end\" | \"start\"",
+                    "references": {
+                        "TableAlignment": {
+                            "location": "import",
+                            "path": "../table-types",
+                            "id": "src/components/table/table-types.ts::TableAlignment",
+                            "referenceLocation": "TableAlignment"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Define o alinhamento horizontal do conte\u00FAdo dentro da c\u00E9lula de cabe\u00E7alho, permitindo a heran\u00E7a de alinhamento para as c\u00E9lulas filhas com base no valor definido."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "horizontal-alignment"
+            },
+            "verticalAlignment": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TableAlignment",
+                    "resolved": "\"center\" | \"end\" | \"start\"",
+                    "references": {
+                        "TableAlignment": {
+                            "location": "import",
+                            "path": "../table-types",
+                            "id": "src/components/table/table-types.ts::TableAlignment",
+                            "referenceLocation": "TableAlignment"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Define o alinhamento vertical do conte\u00FAdo dentro da c\u00E9lula de cabe\u00E7alho, permitindo a heran\u00E7a de alinhamento para as c\u00E9lulas filhas com base no valor definido."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "vertical-alignment"
+            },
+            "overflow": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TableOverflow",
+                    "resolved": "\"truncate\" | \"wrap\"",
+                    "references": {
+                        "TableOverflow": {
+                            "location": "import",
+                            "path": "../table-types",
+                            "id": "src/components/table/table-types.ts::TableOverflow",
+                            "referenceLocation": "TableOverflow"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Define se o conte\u00FAdo dentro da c\u00E9lula de cabe\u00E7alho deve ser truncado, permitindo a heran\u00E7a dessa configura\u00E7\u00E3o para as c\u00E9lulas filhas com base no valor definido."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "overflow"
+            },
+            "tooltipState": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TableTooltipState",
+                    "resolved": "\"danger\" | \"info\" | \"success\" | \"warning\"",
+                    "references": {
+                        "TableTooltipState": {
+                            "location": "import",
+                            "path": "../table-types",
+                            "id": "src/components/table/table-types.ts::TableTooltipState",
+                            "referenceLocation": "TableTooltipState"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Define o estado sem\u00E2ntico do tooltip nesta coluna/c\u00E9lula de cabe\u00E7alho."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "tooltip-state"
+            },
+            "tooltipMode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TableTooltipMode",
+                    "resolved": "\"disabled\" | \"enabled\" | \"inherit\"",
+                    "references": {
+                        "TableTooltipMode": {
+                            "location": "import",
+                            "path": "../table-types",
+                            "id": "src/components/table/table-types.ts::TableTooltipMode",
+                            "referenceLocation": "TableTooltipMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Define o modo de resolu\u00E7\u00E3o do tooltip nesta coluna/c\u00E9lula de cabe\u00E7alho."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "tooltip-mode"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isTooltipVisible": {},
+            "tooltipContent": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "brColumnWidthChange",
+                "name": "brColumnWidthChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Evento customizado emitido quando a largura da coluna \u00E9 alterada, permitindo que as c\u00E9lulas reajam dinamicamente a mudan\u00E7as no layout."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "brAlignmentChange",
+                "name": "brAlignmentChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Evento customizado emitido quando o alinhamento \u00E9 alterado, permitindo que a c\u00E9lula de cabe\u00E7alho reaja dinamicamente a mudan\u00E7as nos tokens de alinhamento."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "brOverflowChange",
+                "name": "brOverflowChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Evento customizado emitido quando a configura\u00E7\u00E3o de overflow \u00E9 alterada, permitindo que a c\u00E9lula de cabe\u00E7alho reaja dinamicamente a mudan\u00E7as no token de overflow."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "columnWidth",
+                "methodName": "handleColumnWidthChange"
+            }, {
+                "propName": "horizontalAlignment",
+                "methodName": "handleAlignmentChange"
+            }, {
+                "propName": "verticalAlignment",
+                "methodName": "handleAlignmentChange"
+            }, {
+                "propName": "overflow",
+                "methodName": "handleOverflowChange"
+            }];
+    }
+}
+const requestAnimationFramePromise = () => new Promise((resolve) => {
+    requestAnimationFrame(() => resolve());
+});

package/dist/collection/components/table/table-row/table-row.css

@@ -0,0 +1 @@
+*,*::before,*::after{box-sizing:border-box}:host{line-height:var(--font-line-height-medium);-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}main{display:block}hr{box-sizing:content-box;height:0;overflow:visible}a{background-color:rgba(0,0,0,0)}b,strong{font-weight:bolder}code{font-family:monospace;font-size:1em}small{font-size:80%}img{border-style:none}button,input,select,textarea{font-family:inherit;font-size:100%;line-height:var(--font-line-height-medium);margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{appearance:none}::-webkit-file-upload-button{appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}.d-none{display:none !important}@media(min-width: 576px){.d-sm-block{display:block !important}.d-sm-flex{display:flex !important}}[data-toggle=dropdown]+*{position:absolute}.dropdown{position:relative}.dropdown [data-toggle=dropdown]+*{box-shadow:var(--surface-shadow-sm);left:0;position:absolute;top:100%}.dropdown>.br-notification{left:auto;right:0}.dropdown .br-item{--color: var(--color-light);--color-rgb: var(--color-light-rgb);--text-color: var(--color-light);--interactive: var(--interactive-light);--interactive-rgb: var(--color-rgb);--visited: var(--visited-light);--hover: var(--hover-light);--pressed: var(--pressed-light);--focus-color: var(--focus-color-light);--focus: var(--focus-color-light);--item-padding-y: var(--spacing-scale-2x);background-color:var(--background-light);color:var(--color)}.dropdown .br-item:not(:last-child){border-bottom:1px solid var(--border-color)}.dropdown .br-item.selected{--color: var(--color-dark);--color-rgb: var(--color-dark-rgb);--text-color: var(--color-dark);--interactive: var(--interactive-dark);--interactive-rgb: var(--interactive-dark-rgb);--visited: var(--visited-dark);--hover: var(--hover-dark);--pressed: var(--pressed-dark);--focus-color: var(--focus-color-dark);--focus: var(--focus-color-dark)}.justify-content-start{justify-content:flex-start !important}.justify-content-end{justify-content:flex-end !important}.justify-content-center{justify-content:center !important}.align-items-center{align-items:center !important}.col,[class*=col-]{padding-left:calc(var(--grid-gutter)*.5);padding-right:calc(var(--grid-gutter)*.5);width:100%}.col{flex:1 0 0%;min-width:8.3333333333%}.col-auto{flex:0 0 auto;width:auto}.col-2{flex-basis:16.6666666667%;max-width:16.6666666667%}.container,.container-fluid,.container-lg{--grid-margin: var(--grid-portrait-margin);--grid-maxwidth: var(--grid-portrait-maxwidth);margin-left:auto;margin-right:auto;max-width:var(--grid-maxwidth);padding-left:var(--grid-margin);padding-right:var(--grid-margin);width:100%}.row{--grid-gutter: var(--grid-portrait-gutter);display:flex;flex-wrap:wrap;margin-left:calc(var(--grid-gutter)*-0.5);margin-right:calc(var(--grid-gutter)*-0.5)}@media(min-width: 576px){.container,.container-lg,.container-fluid{--grid-margin: var(--grid-tablet-margin)}.row{--grid-gutter: var(--grid-tablet-gutter)}.container{--grid-maxwidth: calc(var(--grid-breakpoint-sm) - var(--grid-tablet-margin))}}@media(min-width: 992px){.container,.container-lg,.container-fluid{--grid-margin: var(--grid-tablet-margin)}.row{--grid-gutter: var(--grid-tablet-gutter)}.container{--grid-maxwidth: calc(var(--grid-breakpoint-md) - var(--grid-tablet-margin))}}@media(min-width: 1280px){.container,.container-lg,.container-fluid{--grid-margin: var(--grid-desktop-margin)}.row{--grid-gutter: var(--grid-desktop-gutter)}.container,.container-lg{--grid-maxwidth: calc(var(--grid-breakpoint-lg) - var(--grid-desktop-margin))}}@media(min-width: 1600px){.container,.container-lg,.container-fluid{--grid-margin: var(--grid-tv-margin)}.row{--grid-gutter: var(--grid-tv-gutter)}.container,.container-lg{--grid-maxwidth: calc(var(--grid-breakpoint-xl) - var(--grid-tv-margin))}}.ease{animation-timing-function:cubic-bezier(0.25, 0.1, 0.25, 1)}.ease-in-out{animation-timing-function:cubic-bezier(0.42, 0, 0.58, 1)}.mt-1{margin-top:var(--spacing-scale-half) !important}.mr-1{margin-right:var(--spacing-scale-half) !important}.mb-1{margin-bottom:var(--spacing-scale-half) !important}.ml-1{margin-left:var(--spacing-scale-half) !important}.mx-3{margin-left:var(--spacing-scale-2x) !important;margin-right:var(--spacing-scale-2x) !important}.mb-4{margin-bottom:var(--spacing-scale-3x) !important}.ml-auto{margin-left:auto !important}.pt-half{padding-top:var(--spacing-scale-half) !important}@media(min-width: 576px){.ml-sm-0{margin-left:var(--spacing-scale-default) !important}}.highlight{background:var(--status-highlight-background) linear-gradient(var(--status-highlight-overlay), var(--status-highlight-overlay));color:var(--status-highlight-text);padding:0 var(--spacing-scale-half)}[disabled],.disabled{cursor:not-allowed;opacity:var(--disabled)}[disabled] *,.disabled *{pointer-events:none}.text-center{text-align:center !important}.text-right{text-align:right !important}.text-nowrap{white-space:nowrap !important}.text-uppercase{text-transform:uppercase !important}.text-bold{font-weight:700 !important}.text-base{font-size:var(--font-size-scale-base) !important}.text-down-01{font-size:var(--font-size-scale-down-01) !important}@media(min-width: 576px){.text-sm-center{text-align:center !important}.text-sm-left{text-align:left !important}.text-sm-right{text-align:right !important}}p{color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-2x);margin-top:0}p a{text-decoration:underline}@media(min-width: 576px){p{font-size:var(--font-size-scale-up-01)}}a{--focus-offset: var(--spacing-scale-half)}a:focus{outline:none}a.focus-visible,a:focus-visible{outline-color:var(--focus);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}a:not(:disabled):hover{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}a:not(:disabled):active{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--pressed)), rgba(var(--interactive-rgb), var(--pressed)))}a{color:var(--interactive);text-decoration:none}.main-content a{text-decoration:underline}button{cursor:pointer}img{max-width:100%;vertical-align:middle}h2,.h2{color:var(--color);font-size:var(--font-size-scale-up-03);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-2xh);margin-top:var(--spacing-scale-3xh);padding-bottom:var(--spacing-scale-2xh)}@media(min-width: 576px){.h2,h2{font-size:var(--font-size-scale-up-05);font-weight:var(--font-weight-regular)}}ul,ol{margin-bottom:var(--spacing-scale-2x);margin-top:0;padding:0 0 0 var(--spacing-scale-5x)}table{--table-background: var(--background);--table-color: var(--color);--table-border-color: var(--gray-20);--table-border-style: solid;--table-border-width: 1px;--table-hover: var(--color-rgb);--table-padding: var(--spacing-scale-3x);--table-font-weight: var(--font-weight-medium);--table-th-background: var(--background-alternative);--table-th-font-weight: var(--font-weight-semi-bold);--table-row-size: var(--spacing-scale-2x);border-collapse:collapse;width:100%}tr.selected,tr.is-selected{--color: var(--color-dark);--color-rgb: var(--color-dark-rgb);--text-color: var(--color-dark);--interactive: var(--interactive-dark);--interactive-rgb: var(--interactive-dark-rgb);--visited: var(--visited-dark);--hover: var(--hover-dark);--pressed: var(--pressed-dark);--focus-color: var(--focus-color-dark);--focus: var(--focus-color-dark)}label,.label{color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half)}fieldset,.fieldset{border:var(--surface-width-none);margin-bottom:var(--spacing-scale-5x);margin-top:0;padding:0}legend,.legend{color:var(--color);font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-2x);margin-top:var(--spacing-scale-2x)}::placeholder,.placeholder{color:var(--color-light);font-size:var(--font-size-scale-base);font-style:italic;font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half);margin-top:var(--spacing-scale-half);opacity:1}input,textarea,.input{color:var(--color-light);font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-half)}.help{font-size:var(--font-size-scale-base)}code,.code{background:var(--gray-5);border-radius:4px;color:var(--gray-80);display:inline-block;font-family:monospace;font-size:var(--font-size-scale-base);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-low);padding:var(--spacing-scale-half)}*[data-toggle=collapse]:not(:disabled):hover{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}*[data-toggle=collapse]:focus{outline:none}*[data-toggle=collapse].focus-visible,*[data-toggle=collapse]:focus-visible{outline-color:var(--focus);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}:host{display:contents}.br-table-row{display:contents}