@inchurch/matcha-theme 20.0.3

package/components/matcha-table.scss

@@ -0,0 +1,785 @@
+@use "sass:map";
+
+@mixin _matcha-table-theme-container-shadow-property($theme) {
+    box-shadow:
+        0px -16px 0px 0px inset getSurface($theme),
+        20px 0 16px -24px inset rgba(#212121, 0.15), // ok: structural
+        -20px 0 16px -24px inset rgba(#212121, 0.15), // ok: structural
+        0px 2px 2px 0px rgba(#212121, 0.035), // ok: structural
+        0px 2px 2px 0px rgba(#212121, 0.035), // ok: structural
+        0px 2px 2px 0px rgba(#212121, 0.035); // ok: structural
+}
+
+@mixin _matcha-table-theme-shadow-property($theme) {
+    background: var(--matcha-color-surface, #{getSurface($theme)});
+    background: linear-gradient(
+        90deg,
+        getSurface($theme) 0px,
+        getSurface($theme) 10px,
+        rgba(#ffffff, 0) calc(0% + 110px), // ok: structural
+        rgba(#ffffff, 0) calc(100% - 110px), // ok: structural
+        getSurface($theme) calc(100% - 10px)
+    );
+    background: -moz-linear-gradient(
+        90deg,
+        getSurface($theme) 0px,
+        getSurface($theme) 10px,
+        rgba(#ffffff, 0) calc(0% + 110px), // ok: structural
+        rgba(#ffffff, 0) calc(100% - 110px), // ok: structural
+        getSurface($theme) calc(100% - 10px)
+    );
+    background: -webkit-linear-gradient(
+        0deg,
+        getSurface($theme) 0px,
+        getSurface($theme) 10px,
+        rgba(#ffffff, 0) calc(0% + 110px), // ok: structural
+        rgba(#ffffff, 0) calc(100% - 110px), // ok: structural
+        getSurface($theme) calc(100% - 10px)
+    );
+}
+
+@mixin matcha-table-theme($theme) {
+    $is-dark: map.get($theme, is-dark);
+
+    // Vai direto na tag body
+    body.is-mobile {
+        .table-container {
+            .table-container-shadow {
+                overflow: auto;
+                @include _matcha-table-theme-container-shadow-property($theme);
+
+                .mat-table,
+                .mat-sort {
+                    tbody {
+                        @include _matcha-table-theme-shadow-property($theme);
+                    }
+                }
+            }
+        }
+    }
+
+    .table-container {
+        width: 100%;
+
+        .mat-table,
+        .mat-sort {
+            .published {
+                color: getGreen($theme);
+            }
+
+            .notPublished {
+                color: getAmber($theme);
+            }
+        }
+
+        .table-container-shadow {
+            overflow: auto;
+            background: var(--matcha-color-surface, #{getSurface($theme)});
+            border-radius: var(--matcha-radius-lg, 8px);
+            @include _matcha-table-theme-container-shadow-property($theme);
+
+            .mat-table,
+            .mat-sort {
+                tbody {
+                    @include _matcha-table-theme-shadow-property($theme);
+                }
+            }
+
+            &.ps--active-x {
+                @include _matcha-table-theme-container-shadow-property($theme);
+
+                .mat-table,
+                .mat-sort {
+                    @include _matcha-table-theme-shadow-property($theme);
+                }
+            }
+        }
+
+        .mat-table,
+        .mat-sort,
+        .mat-expansion-panel {
+            thead {
+                background: var(--matcha-color-surface, #{getSurface($theme)});
+
+                th {
+                    height: var(--matcha-space-800, 64px);
+                }
+            }
+
+            tr {
+                &.mat-row {
+                    // &:nth-child(even){background: map-get($background, card);}
+                    &:nth-child(odd) {
+                        background: getBackgroundAlpha($theme);
+                    }
+                }
+
+                td,
+                th {
+                    touch-action: unset !important;
+                    font-size: var(--matcha-text-body-md, 14px);
+
+                    &:first-child {
+                        padding-left: var(--matcha-space-300, 24px);
+                    }
+
+                    .clickable {
+                        cursor: pointer;
+                    }
+                }
+            }
+
+            .td-duble-line {
+                height: var(--matcha-space-600, 48px);
+            }
+
+            .td-with-image,
+            .td-with-checkbox,
+            .td-with-icon,
+            .td-duble-line {
+                display: flex;
+                align-items: center;
+
+                .td-text-aside {
+                    display: inline-block;
+                    width: calc(100% - var(--matcha-space-600, 48px));
+                }
+
+                .avatar {
+                    width: var(--matcha-space-600, 48px);
+                    min-width: var(--matcha-space-600, 48px);
+                    height: var(--matcha-space-600, 48px);
+                    line-height: var(--matcha-space-600, 48px);
+                    border-width: 0;
+                    margin-right: var(--matcha-space-300, 24px);
+                }
+
+                .thumbnail {
+                    width: calc(var(--matcha-space-600, 48px) + var(--matcha-space-300, 24px)); // 72
+                    min-width: calc(var(--matcha-space-600, 48px) + var(--matcha-space-300, 24px));
+                    height: var(--matcha-space-600, 48px);
+                    border-radius: var(--matcha-radius-lg, 8px);
+                    margin: 0 var(--matcha-space-100, 8px) 0 0;
+
+                    &-portrait {
+                        width: var(--matcha-avatar-lg, 56px);
+                        min-width: var(--matcha-avatar-lg, 56px);
+                        height: calc(var(--matcha-space-600, 48px) + var(--matcha-space-300, 24px)); // 72
+                        border-radius: var(--matcha-radius-lg, 8px);
+                        margin: 0 var(--matcha-space-100, 8px) 0 0;
+                    }
+                }
+            }
+
+            .mat-header-cell {
+                color: var(--matcha-color-fg, #{getForeground($theme)});
+                font-family: var(--matcha-font-family);
+                font-weight: 500;
+                font-size: var(--matcha-text-body-md, 14px);
+                padding-left: var(--matcha-space-100, 8px);
+                padding-right: var(--matcha-space-100, 8px);
+                border-bottom: var(--matcha-border-hairline, 1px) solid var(--matcha-color-border, #{getDisabled($theme)});
+            }
+
+            .mat-cell {
+                color: var(--matcha-color-text-label, #{getBlueGrey($theme)});
+                font-size: var(--matcha-text-body-md, 14px);
+                padding-left: var(--matcha-space-100, 8px);
+                padding-right: var(--matcha-space-100, 8px);
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                text-align: start;
+                border-bottom: var(--matcha-border-hairline, 1px) solid var(--matcha-color-border, #{getDisabled($theme)});
+
+                &.cdk-column-menu {
+                    text-align: left;
+                }
+            }
+
+            .last {
+                display: flex;
+                justify-content: space-between;
+                width: 100%;
+                align-items: center;
+
+                span {
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                }
+
+                mat-menu {
+                    display: none;
+                }
+            }
+        }
+
+        table {
+            width: 100%;
+        }
+
+        .badge {
+            border-radius: var(--matcha-radius-lg, 8px);
+            padding: var(--matcha-space-100, 8px);
+            color: var(--matcha-color-text-inverse, #{getForegroundInverse($theme)});
+
+            &.live-badge {
+                background-color: getCyan($theme);
+                font-size: var(--matcha-text-body-md, 14px);
+            }
+
+            &.cell-badge {
+                background-color: getPurple($theme);
+                font-size: var(--matcha-text-body-md, 14px);
+            }
+
+            &.cult-badge {
+                background-color: getBlue($theme);
+                font-size: var(--matcha-text-body-md, 14px);
+            }
+
+            &.new-visitor-badge {
+                background-color: var(--matcha-color-primary, #{getPrimary($theme)});
+                color: var(--matcha-color-accent-contrast, #{getPrimaryContrast($theme)});
+                font-size: var(--matcha-text-body-md, 14px);
+                line-height: var(--matcha-leading-caption, 14px);
+                display: inline-block;
+                width: auto;
+            }
+        }
+    }
+
+    // X-Large devices (big desktops, 1440px and up < 1920)
+    @include media-breakpoint('gt-md') {
+        .table-container {
+            .mat-table,
+            .mat-sort {
+                .mat-cell {
+                    font-size: var(--matcha-text-title-sm, 16px);
+                }
+            }
+        }
+    }
+
+    //---------------------------------------------------------------------------
+    // ESTILOS PARA O COMPONENTE MATCHA-TABLE
+    //---------------------------------------------------------------------------
+    // Estilos para tabelas nativas com a classe matcha-table
+
+    .matcha-table {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        gap: var(--matcha-space-200, 16px);
+        border-collapse: collapse;
+        border-spacing: 0;
+    }
+
+    // Vai direto na tag body
+    body.is-mobile {
+        .matcha-table {
+            .matcha-table-container-shadow {
+                overflow: auto;
+                @include _matcha-table-theme-container-shadow-property($theme);
+                table.matcha-table-content {
+                    tbody {
+                        @include _matcha-table-theme-shadow-property($theme);
+                    }
+                }
+            }
+        }
+    }
+
+// Estrutura
+// matcha-table
+//     matcha-table-container
+//         matcha-table-container-shadow
+//             table.matcha-table-content
+//                 thead
+//                 tbody
+
+    .matcha-table {
+        --table-row-height: 64px; // comfortable = default (alinhado com Figma)
+        --table-shadow-alpha: rgba(#{getForeground($theme)}, 0.05);
+        .matcha-table-container-shadow {
+            overflow: auto;
+            background: var(--matcha-color-surface, #{getSurface($theme)});
+            border-radius: var(--matcha-radius-lg, 8px);
+            @include _matcha-table-theme-container-shadow-property($theme);
+
+            table.matcha-table-content {
+                width: 100%;
+                border-collapse: collapse;
+                border-spacing: 0;
+                @include _matcha-table-theme-shadow-property($theme);
+                thead {
+                    th {
+                        height: var(--table-row-height);
+                        background: var(--matcha-color-surface-hover, #{getBackgroundAlpha($theme)});
+                        color: var(--matcha-color-fg, #{getForeground($theme)});
+                        font-family: var(--matcha-font-family);
+                        font-weight: 600; // SemiBold (Figma Header)
+                        font-size: var(--matcha-text-body-md, 14px);
+                        text-align: left;
+                        padding-left: var(--matcha-space-300, 24px);
+                        padding-right: var(--matcha-space-200, 16px);
+                        border-bottom: var(--matcha-border-hairline, 1px) solid var(--matcha-color-border, #{getDisabled($theme)});
+                    }
+                }
+
+                tbody {
+                    tr {
+                        height: var(--table-row-height);
+                        // &:nth-child(even){background: map-get($background, card);}
+                        // &:nth-child(odd) {
+                        //     background: getBackgroundAlpha($theme);
+                        // }
+
+
+
+                        td{
+                            color: var(--matcha-color-text-label, #{getBlueGrey($theme)});
+                            font-family: var(--matcha-font-family);
+                            font-size: var(--matcha-text-body-md, 14px); // body-md (Figma)
+                            padding-left: var(--matcha-space-100, 8px);
+                            padding-right: var(--matcha-space-100, 8px);
+                            white-space: nowrap;
+                            text-overflow: ellipsis;
+                            text-align: start;
+                            border-bottom: var(--matcha-border-hairline, 1px) solid var(--matcha-color-border, #{getDisabled($theme)});
+                            touch-action: unset !important;
+                            min-width: 120px;
+
+                            &:first-child {
+                                padding-left: var(--matcha-space-300, 24px);
+                            }
+
+                        }
+                    }
+
+                    // esse é um caso especifico para as tabelas que tem aninhamento de itens
+                    tr {
+                        &.equal {
+
+                            td,
+                            th {
+                                &:first-child {
+                                    box-shadow: 4px 0 0 0 inset getBlue($theme), 10px 0 10px -10px getDisabled($theme);
+                                }
+                            }
+
+                            &.child-item {
+
+                                td,
+                                th {
+                                    &:first-child {
+                                        box-shadow: 4px 0 0 0 inset getBlueAlpha($theme), 10px 0 10px -10px getDisabled($theme);
+                                    }
+                                }
+                            }
+                        }
+
+                        &.plus {
+
+                            td,
+                            th {
+                                &:first-child {
+                                    box-shadow: 4px 0 0 0 inset getGreen($theme), 10px 0 10px -10px getDisabled($theme);
+                                }
+                            }
+
+                            &.child-item {
+                                td,
+                                th {
+                                    &:first-child {
+                                        box-shadow: 4px 0 0 0 inset getGreenAlpha($theme), 10px 0 10px -10px getDisabled($theme);
+                                    }
+                                }
+                            }
+                        }
+
+                        &.minus {
+
+                            td,
+                            th {
+                                &:first-child {
+                                    box-shadow: 4px 0 0 0 inset getRed($theme), 10px 0 10px -10px getDisabled($theme);
+                                }
+                            }
+
+                            &.child-item {
+
+                                td,
+                                th {
+                                    &:first-child {
+                                        box-shadow: 4px 0 0 0 inset getRedAlpha($theme), 10px 0 10px -10px getDisabled($theme);
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    // X-Large devices (big desktops, 1440px and up < 1920)
+    @include media-breakpoint('gt-md') {
+        .matcha-table {
+            .matcha-table-container-shadow {
+                table.matcha-table-content {
+                    .td {
+                        font-size: var(--matcha-text-title-sm, 16px);
+                    }
+                }
+            }
+        }
+    }
+
+    // Variações de tamanho/densidade
+    .matcha-table-compact {
+        .matcha-table-container-shadow {
+            table.matcha-table-content {
+                --table-row-height: 48px;
+
+                thead th {
+                    height: var(--table-row-height);
+                    padding-top: var(--matcha-space-100, 8px);
+                    padding-bottom: var(--matcha-space-100, 8px);
+                    font-size: var(--matcha-text-body-md, 14px);
+                }
+
+                tbody tr {
+                    height: var(--table-row-height);
+
+                    td {
+                        padding-top: var(--matcha-space-100, 8px);
+                        padding-bottom: var(--matcha-space-100, 8px);
+                        font-size: var(--matcha-text-body-md, 14px);
+                    }
+                }
+            }
+        }
+    }
+
+    .matcha-table-comfortable {
+        // Estilo padrão de densidade (já aplicado na estrutura base)
+        .matcha-table-container-shadow {
+            table.matcha-table-content {
+                --table-row-height: 64px;
+
+                thead th {
+                    height: var(--table-row-height);
+                    padding-top: var(--matcha-space-150, 12px);
+                    padding-bottom: var(--matcha-space-150, 12px);
+                }
+
+                tbody tr {
+                    height: var(--table-row-height);
+
+                    td {
+                        padding-top: var(--matcha-space-150, 12px);
+                        padding-bottom: var(--matcha-space-150, 12px);
+                    }
+                }
+            }
+        }
+    }
+
+    .matcha-table-spacious {
+        .matcha-table-container-shadow {
+            table.matcha-table-content {
+                --table-row-height: 80px;
+
+                thead th {
+                    height: var(--table-row-height);
+                    padding-top: var(--matcha-space-200, 16px);
+                    padding-bottom: var(--matcha-space-200, 16px);
+                    font-size: var(--matcha-text-title-md, 18px);
+                }
+
+                tbody tr {
+                    height: var(--table-row-height);
+
+                    td {
+                        padding-top: var(--matcha-space-200, 16px);
+                        padding-bottom: var(--matcha-space-200, 16px);
+                        font-size: var(--matcha-text-title-md, 18px);
+                    }
+                }
+            }
+        }
+    }
+
+    // Linhas zebras
+    .matcha-table-striped {
+        .matcha-table-container-shadow {
+            table.matcha-table-content {
+                tbody tr {
+                    &:nth-child(odd) {
+                        background: var(--table-shadow-alpha);
+                    }
+
+                    &:nth-child(even) {
+                        background: transparent;
+                    }
+                }
+            }
+        }
+    }
+
+    // Hover nas linhas — Template A: tr é a área interativa
+    .matcha-table-hover {
+        .matcha-table-container-shadow {
+            table.matcha-table-content {
+                tbody tr {
+                    position: relative;
+                    overflow: hidden;
+                    cursor: pointer;
+
+                    &::before {
+                        content: '';
+                        position: absolute;
+                        inset: 0;
+                        background: currentColor;
+                        opacity: 0;
+                        border-radius: inherit;
+                        pointer-events: none;
+                        transition: opacity var(--matcha-duration-instant, 80ms) linear;
+                    }
+
+                    &:hover:not([disabled])::before  { opacity: var(--matcha-state-hover, 0.08); }
+                    &:active:not([disabled])::before { opacity: var(--matcha-state-active, 0.12); }
+                    &[disabled] { pointer-events: none; cursor: default; }
+
+                    @media (prefers-reduced-motion: reduce) {
+                        &::before { transition: none; }
+                    }
+
+                    &:focus-visible:not([disabled]) {
+                        outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent, #{getAccent($theme)});
+                        outline-offset: var(--matcha-state-focus-ring-offset, 2px);
+                    }
+                }
+            }
+        }
+    }
+
+    // Bordas visíveis
+    .matcha-table-bordered {
+        .matcha-table-container-shadow {
+            table.matcha-table-content {
+                border: var(--matcha-border-hairline, 1px) solid var(--matcha-color-border, #{getDisabled($theme)});
+
+                thead th {
+                    border-bottom: var(--matcha-border-hairline, 1px) solid var(--matcha-color-border, #{getDisabled($theme)});
+                    border-right: var(--matcha-border-hairline, 1px) solid var(--matcha-color-border, #{getDisabled($theme)});
+
+                    &:last-child {
+                        border-right: none;
+                    }
+                }
+
+                tbody tr {
+                    td {
+                        border-bottom: var(--matcha-border-hairline, 1px) solid var(--matcha-color-border, #{getDisabled($theme)});
+                        border-right: var(--matcha-border-hairline, 1px) solid var(--matcha-color-border, #{getDisabled($theme)});
+
+                        &:last-child {
+                            border-right: none;
+                        }
+                    }
+
+                    &:last-child td {
+                        border-bottom: none;
+                    }
+                }
+            }
+        }
+    }
+
+    // Cabeçalho fixo (sticky)
+    .matcha-table-sticky-header {
+        .matcha-table-container-shadow {
+            table.matcha-table-content {
+                thead {
+                    position: sticky;
+                    top: 0;
+                    z-index: 10;
+                    display: table-header-group;
+                }
+
+                thead th {
+                    position: sticky;
+                    top: 0;
+                    z-index: 11;
+                    box-shadow: 0 2px 4px var(--table-shadow-alpha);
+                }
+            }
+        }
+    }
+
+    // Colunas fixas (sticky columns) - primeira coluna fixa por padrão quando há scroll
+    .matcha-table-sticky-start {
+        .matcha-table-container-shadow {
+            table.matcha-table-content {
+                thead th:first-child,
+                tbody tr td:first-child {
+                    position: sticky;
+                    left: 0;
+                    z-index: 5;
+                    background: var(--matcha-color-surface, #{getSurface($theme)});
+                }
+
+                thead th:first-child {
+                    z-index: 15;
+                    box-shadow: 10px 0 10px -10px getDisabled($theme);
+
+                }
+
+                tbody tr td:first-child {
+                    box-shadow: 10px 0 10px -10px getDisabled($theme);
+
+                }
+            }
+        }
+
+        // Para múltiplas colunas fixas no início
+        &.matcha-table-sticky-start-2 {
+            .matcha-table-container-shadow {
+                table.matcha-table-content {
+                    thead th:nth-child(1),
+                    thead th:nth-child(2),
+                    tbody tr td:nth-child(1),
+                    tbody tr td:nth-child(2) {
+                        position: sticky;
+                        z-index: 5;
+                        background: var(--matcha-color-surface, #{getSurface($theme)});
+                    }
+
+                    thead th:nth-child(1),
+                    tbody tr td:nth-child(1) {
+                        left: 0;
+                        z-index: 15;
+                        box-shadow: 2px 0 4px var(--table-shadow-alpha);
+                    }
+
+                    thead th:nth-child(2),
+                    tbody tr td:nth-child(2) {
+                        left: 200px; // Ajustar conforme largura da primeira coluna
+                        z-index: 14;
+                        box-shadow: 2px 0 4px var(--table-shadow-alpha);
+                    }
+                }
+            }
+        }
+
+        &.matcha-table-sticky-start-3 {
+            .matcha-table-container-shadow {
+                table.matcha-table-content {
+                    thead th:nth-child(1),
+                    thead th:nth-child(2),
+                    thead th:nth-child(3),
+                    tbody tr td:nth-child(1),
+                    tbody tr td:nth-child(2),
+                    tbody tr td:nth-child(3) {
+                        position: sticky;
+                        z-index: 5;
+                        background: var(--matcha-color-surface, #{getSurface($theme)});
+                    }
+
+                    thead th:nth-child(1),
+                    tbody tr td:nth-child(1) {
+                        left: 0;
+                        z-index: 17;
+                        box-shadow: 2px 0 4px var(--table-shadow-alpha);
+                    }
+
+                    thead th:nth-child(2),
+                    tbody tr td:nth-child(2) {
+                        left: 200px;
+                        z-index: 16;
+                        box-shadow: 2px 0 4px var(--table-shadow-alpha);
+                    }
+
+                    thead th:nth-child(3),
+                    tbody tr td:nth-child(3) {
+                        left: 400px;
+                        z-index: 15;
+                        box-shadow: 2px 0 4px var(--table-shadow-alpha);
+                    }
+                }
+            }
+        }
+    }
+
+    .matcha-table-sticky-end {
+        .matcha-table-container-shadow {
+            table.matcha-table-content {
+                thead th:last-child,
+                tbody tr td:last-child {
+                    position: sticky;
+                    right: 0;
+                    z-index: 5;
+                    background: var(--matcha-color-surface, #{getSurface($theme)});
+                }
+
+                thead th:last-child {
+                    z-index: 15;
+                    box-shadow: -2px 0 4px var(--table-shadow-alpha);
+                }
+
+                tbody tr td:last-child {
+                    box-shadow: -2px 0 2px var(--table-shadow-alpha);
+                }
+            }
+        }
+
+        // Para múltiplas colunas fixas no final
+        &.matcha-table-sticky-end-2 {
+            .matcha-table-container-shadow {
+                table.matcha-table-content {
+                    thead th:nth-last-child(1),
+                    thead th:nth-last-child(2),
+                    tbody tr td:nth-last-child(1),
+                    tbody tr td:nth-last-child(2) {
+                        position: sticky;
+                        z-index: 5;
+                        background: var(--matcha-color-surface, #{getSurface($theme)});
+                    }
+
+                    thead th:nth-last-child(1),
+                    tbody tr td:nth-last-child(1) {
+                        right: 0;
+                        z-index: 15;
+                        box-shadow: -2px 0 4px var(--table-shadow-alpha);
+                    }
+
+                    thead th:nth-last-child(2),
+                    tbody tr td:nth-last-child(2) {
+                        right: 200px; // Ajustar conforme largura da última coluna
+                        z-index: 14;
+                        box-shadow: -2px 0 4px var(--table-shadow-alpha);
+                    }
+                }
+            }
+        }
+    }
+
+    // ── Alinhamento de colunas (espelhado com Figma Alinhamento variant) ──
+    .matcha-table {
+        .matcha-table-container-shadow {
+            table.matcha-table-content {
+                th.text-center,
+                td.text-center {
+                    text-align: center;
+                }
+
+                th.text-right,
+                td.text-right {
+                    text-align: right;
+                }
+            }
+        }
+    }
+}