@table-bro/angular-material 0.0.0-stage → 1.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Table, Bro
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,175 @@
-# Temporary Holding Version
+# @table-bro/angular-material
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+The Angular Material skin of [Table, Bro](https://table-bro.com): pixel-perfect Material data tables built from the
+components of Angular Material, in the theme of the application. The skin is `mat`.
+
+The package holds the config of the skin, its elements (Angular components that the table creates as Custom Elements),
+its CSS and its filter drawer container. The table itself is `<table-bro-ng>` of `@table-bro/angular`.
+
+## Install
+
+In a project with Angular Material (`ng add @angular/material` adds it):
+
+```sh
+npm install @table-bro/core @table-bro/angular @table-bro/angular-material @angular/elements
+```
+
+`@angular/elements` turns the components of the skin and of your cells into Custom Elements.
+
+## Set up
+
+Add the CSS of the core and of the skin to `"styles"` of `angular.json`:
+
+```json
+"styles": [
+  "src/styles.scss",
+  "node_modules/@table-bro/core/dist/table-bro.min.css",
+  "node_modules/@table-bro/angular-material/dist/table-bro.material.min.css"
+]
+```
+
+Register the skin and its elements in the providers of `app.config.ts`:
+
+```ts
+import type {ApplicationConfig} from '@angular/core';
+
+import {provideTableBroMatSkin} from '@table-bro/angular-material';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideTableBroMatSkin()
+  ]
+};
+```
+
+The elements that only some tables use are optional: a table carries their code only when the application adds them
+with their functions. `withTags()` adds the tags, `withSwitch()` the switch, `withToolbarMenu()` the menu of the toolbar,
+a button of `components.toolbarMain.buttons` with the mode `navbar-dropdown`:
+
+```ts
+provideTableBroMatSkin(withTags(), withSwitch(), withToolbarMenu())
+```
+
+In the dev mode a table that uses an optional element without its function writes the function to add in the console.
+
+The skin shows the ligature icons of Material. Load the font in `index.html`:
+
+```html
+<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+```
+
+## Use
+
+```ts
+import {ChangeDetectionStrategy, Component, signal} from '@angular/core';
+
+import {TableBroNg}                     from '@table-bro/angular';
+import type {BroCol, BroConfig, BroRow} from '@table-bro/core';
+
+interface Order extends BroRow {
+  description: string;
+  price: number;
+}
+
+@Component({
+  selector: 'app-orders',
+  template: `<table-bro-ng [cols]="cols()" [rows]="rows()" [conf]="conf()"></table-bro-ng>`,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    TableBroNg
+  ]
+})
+export class OrdersComponent {
+  cols = signal<BroCol<Order>[]>([
+    {title: 'Description', name: 'description'},
+    {title: 'Price', name: 'price', dataType: 'number', className: 'bro-col_text-right'}
+  ]);
+
+  rows = signal<Order[]>([
+    {description: 'Modern Cotton Chair', price: 100},
+    {description: 'Awesome Concrete Ball', price: 200}
+  ]);
+
+  conf = signal<BroConfig>({skin: 'mat', toolbarTitle: 'Orders'});
+}
+```
+
+The README of `@table-bro/angular` describes the inputs and outputs of the table and the server mode.
+
+## Theme
+
+The skin has no theme of its own: it takes the Angular Material theme of the application, as the components of
+Angular Material do, and the table looks as a `mat-table` of the application. Its parts read the tokens of `mat-table`,
+`--mat-table-*`, and else the system tokens, `--mat-sys-*`, which `mat.theme()` of the application gives. A table in the
+dark theme sets `color-scheme: dark` on itself: a theme with both color schemes turns dark there.
+
+The skin does not theme the components of Angular Material outside the table. An override of the application, as
+`mat.table-overrides()`, reaches the table when it is scoped to `table-bro`.
+
+## The filter drawer
+
+`<table-bro-filter-drawer-container-ng>` is `<table-bro-ng>` in the content of a `mat-drawer-container`, with the
+filters of the application, the content of the component, in the drawer. It takes the inputs and gives the outputs of
+`<table-bro-ng>`; `[(opened)]` binds the drawer, and `mode` is the mode of `mat-drawer`. The Filters button of the
+toolbar of the table opens the drawer, any other button of the page calls its `toggle()`. The toolbar has only its
+search by default, so the config adds the button:
+
+```ts
+import {TableBroFilterDrawerContainerNg} from '@table-bro/angular-material';
+import {type BroConfig, events}          from '@table-bro/core';
+
+const conf: BroConfig = {
+  skin: 'mat',
+  components: {
+    toolbarMain: {
+      buttons: [{buttonTitle: 'Filters', eventType: events.filtersToggleEvent, iconHTML: 'filter_list', buttonTooltip: 'Filters'}]
+    }
+  }
+};
+```
+
+```html
+<table-bro-filter-drawer-container-ng [cols]="cols()" [rows]="rows()" [conf]="conf()" [filter]="filter()">
+  <app-order-filters (changeFilter)="filter.set($event)"></app-order-filters>
+</table-bro-filter-drawer-container-ng>
+```
+
+## Elements for cells
+
+The elements of the cells are optional: `withTags()` adds `bro-mat-tags`, `withSwitch()` adds `bro-mat-slide-toggle`.
+
+| Element | Value |
+| --- | --- |
+| `bro-mat-tags` | An array of strings in `row[col.name]`, as the chips of Material; the chips that do not fit become an ellipsis |
+| `bro-mat-slide-toggle` | A boolean in `row[col.name]`, as a slide toggle. With the attribute `name` and `event: 'action'` a change sends the action `name` with the column and the row; the title of the column names the toggle |
+
+```ts
+{title: 'Done', name: 'done', component: {selector: 'bro-mat-slide-toggle', attrs: {name: 'order-done'}, event: 'action'}}
+```
+
+## Settings
+
+`matSkinConfig` is the config of the skin. `config.components` and `config.css` of a table change any of its values or
+functions, at any depth, for that table. The sizes and timings are CSS variables of the table, as
+`--bro-row-height`: see the README of `@table-bro/core`.
+
+## Versions of Angular Material
+
+The skin and this package are built for Angular Material 20, 21 and 22. The skin can work with another version of
+Angular Material too, but that takes a build from the sources and a check of the result: the SCSS of the skin compiled
+with the Sass of that version, as the theme writes the token names of the version it is compiled with, and the
+templates of this package with the selectors of that version, as `matButton` and `matIconButton` exist only from
+Angular Material 20.
+
+## Build
+
+```sh
+npm run build:material
+```
+
+The root of the repository builds the package into `dist/table-bro.angular-material`, after the core and
+`@table-bro/angular`.
+
+## License
+
+MIT

package/THIRD_PARTY_NOTICES.md

@@ -0,0 +1,69 @@
+# Third-party notices
+
+Table, Bro is MIT-licensed (LICENSE). Parts of it come from or are built with the code of other projects, under their
+licenses below.
+
+## Angular Components (Angular Material)
+
+Ported from Angular Material and carrying its license header:
+
+- `packages/skins/shared/js/material-based/paginator/bro-paginator.ts`: the paginator of the vanilla skins, a port of
+  `MatPaginator`;
+- `packages/skins/shared/styles/vanilla-js/shared/components/material-based/_paginator.scss` and `_sort-header.scss`:
+  the styles of the paginator and of the sort header of the vanilla skins.
+
+The CSS of the skin `mat` (`table-bro.material.min.css`) is built with the Sass of `@angular/material`, and the CSS of
+the vanilla skins contains the styles above. Minified CSS keeps no comments, so this file carries the notice for it.
+
+```
+The MIT License
+
+Copyright (c) 2026 Google LLC.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+```
+
+## Bootstrap
+
+The CSS of the skin `bs` (`table-bro.bootstrap.min.css`) and of the shared elements of the vanilla skins is built with
+the Sass functions, variables and mixins of Bootstrap 5.
+
+```
+The MIT License (MIT)
+
+Copyright (c) 2011-2025 The Bootstrap Authors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+```

package/dist/table-bro.material.min.css

@@ -0,0 +1 @@
+.mat .bro-details_tr>td>:first-child>*>div{padding:calc(var(--bro-row-height)/2)}table-bro-filter-drawer-container.mat>.bro-filter-drawer-scrim{z-index:4}table-bro-filter-drawer-container.mat>.bro-filter-drawer-card{z-index:5}table-bro-filter-drawer-container.mat>.bro-filter-drawer-header,table-bro-filter-drawer-container.mat>[slot=filters]{z-index:6}table-bro-filter-drawer-container.mat[modal]>.bro-filter-drawer-scrim{z-index:8}table-bro-filter-drawer-container.mat[modal]>.bro-filter-drawer-card{z-index:9}table-bro-filter-drawer-container.mat[modal]>.bro-filter-drawer-header,table-bro-filter-drawer-container.mat[modal]>[slot=filters]{z-index:10}table-bro-filter-drawer-container.mat>[slot=filters]>*,.mat .bro-filter-drawer-card>.bro-filter-drawer-header~*{padding:24px}.mat .bro-filter-drawer-header .bro-toolbar{height:64px;display:block}.mat .bro-filter-drawer-header .bro-toolbar>nav{box-sizing:border-box;height:100%}.mat .bro-shadow{padding-right:var(--bro-shadow-size);padding-left:var(--bro-shadow-size)}.mat .bro-table-shadows{z-index:-1;width:calc(100% - var(--bro-shadow-size)*2)}.mat .bro-table-shadows .bro-row{height:var(--bro-row-height)}.mat .bro-state-container{padding-left:17px;padding-right:17px;font-size:28px;line-height:40px}.mat .bro-state-container .bro-state-icon{width:40px;height:40px;margin-right:16px;font-size:40px;line-height:40px;top:40px}.mat .bro-state-container .bro-state-icon>svg{vertical-align:top;width:40px;height:40px}.mat .bro-state-container lottie-player{height:120px}table-bro.mat{width:calc(100% - var(--bro-shadow-size)*2);min-width:var(--bro-table-min-width)}table-bro.mat table th.bro-header-cell,table-bro.mat table td.bro-cell{box-sizing:border-box;padding:0 0 0 24px}table-bro.mat table th.bro-header-cell:last-child,table-bro.mat table td.bro-cell:last-child{padding-right:24px}.mat .bro-table-header_container{width:100%}.mat .bro-table-header_container .bro-table-header_shadow{z-index:-1;left:var(--bro-shadow-size);height:var(--bro-header-height)}.mat .bro-table-header_container .bro-table-header{z-index:3;left:var(--bro-shadow-size);position:relative}.mat .bro-table-body_container{z-index:2;top:calc(var(--bro-shadow-size)*-1);clip-path:polygon(0 0, 100% 0, 100% 100%, calc(100% - var(--bro-shadow-size)) 100%, calc(100% - var(--bro-shadow-size)) calc(100% - max(0px, var(--bro-shadow-size) + var(--bro-corner-radius) - 56px)), var(--bro-shadow-size) calc(100% - max(0px, var(--bro-shadow-size) + var(--bro-corner-radius) - 56px)), var(--bro-shadow-size) 100%, 0 100%)}.mat .bro-table-body,.mat .bro-table-body>.bro-table{z-index:2}.mat .bro-table-body,.mat .bro-table-shadows{padding-top:var(--bro-shadow-size)}.mat .bro-table-aux{top:var(--bro-shadow-size)}.mat .bro-cell_text-ellipsis-container{line-height:1.5}table-bro.mat .bro-cell-number .bro-cell_component{width:45.5px}.mat bro-mat-tags .mdc-evolution-chip-set__chips{box-sizing:border-box;flex-wrap:nowrap;align-items:center;width:100%;min-width:0;display:flex;overflow:hidden}.mat bro-mat-tags .mdc-evolution-chip-set__chips>mat-chip{flex:none}.mat bro-mat-tags .mdc-evolution-chip-set__chips>mat-chip:first-child{flex-shrink:1;min-width:0}.mat bro-mat-tags .mdc-evolution-chip-set__chips>mat-chip:first-child *{min-width:0}.mat bro-mat-tags .mdc-evolution-chip-set__chips>mat-chip:first-child .mdc-evolution-chip__text-label{text-overflow:ellipsis;overflow:hidden}.mat bro-mat-tags .mdc-evolution-chip-set__chips>.bro-cell-items-ellipsis{flex:none}.mat bro-mat-tags .mdc-evolution-chip-set__chips>.bro-cell-item-hidden{white-space:nowrap;clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}.mat .mat-elevation-z16{box-shadow:0 8px 10px -5px #0003,0 16px 24px 2px #00000024,0 6px 30px 5px #0000001f}table-bro-filter-drawer-container-ng.mat .mat-drawer{--mat-sidenav-container-background-color:transparent;bottom:calc(var(--bro-shadow-size)*2);width:calc(var(--bro-filter-drawer-width) + var(--bro-island-space-size));padding-left:var(--bro-island-space-size);overflow:visible}table-bro-filter-drawer-container-ng.mat .mat-drawer .mat-drawer-inner-container{overflow:visible}table-bro-filter-drawer-container-ng.mat .mat-drawer:not(.mat-drawer-opened):not(.mat-drawer-animating) .mat-drawer-inner-container{display:block}table-bro-filter-drawer-container-ng.mat .mat-drawer.mat-drawer-end{border-left:0}table-bro-filter-drawer-container-ng.mat .mat-drawer.mat-drawer-end:not(.mat-drawer-opened){transform:translate(0,0)}table-bro-filter-drawer-container-ng.mat .mat-drawer.mat-drawer-end.bro-filter-drawer_no-shadow{right:var(--bro-shadow-size)}table-bro-filter-drawer-container-ng.mat .mat-drawer .bro-filter-drawer-card{--bro-filter-drawer-opened:0;box-sizing:border-box;width:max(0px,var(--bro-filter-drawer-opened)*100% - (1 - var(--bro-filter-drawer-opened))*var(--bro-island-space-size));height:100%;margin-left:calc(100% - max(0px, var(--bro-filter-drawer-opened) * 100% - (1 - var(--bro-filter-drawer-opened)) * var(--bro-island-space-size)));border-radius:var(--bro-filter-drawer-corner-radius);overflow:hidden auto}table-bro-filter-drawer-container-ng.mat .mat-drawer .bro-filter-drawer-card>*{box-sizing:border-box;width:var(--bro-filter-drawer-width)}table-bro-filter-drawer-container-ng.mat .mat-drawer.mat-drawer-over .bro-filter-drawer-card{border-top-right-radius:var(--bro-corner-radius);border-bottom-right-radius:var(--bro-corner-radius)}table-bro-filter-drawer-container-ng .mat-drawer-container{--mat-sidenav-content-background-color:transparent}table-bro-filter-drawer-container-ng .mat-drawer-backdrop{bottom:calc(var(--bro-shadow-size)*2);border-radius:var(--bro-corner-radius)}table-bro-filter-drawer-container-ng .bro-filter-drawer_no-shadow>.mat-drawer-backdrop{right:var(--bro-shadow-size);left:var(--bro-shadow-size)}table-bro-filter-drawer-container-ng.mat .mat-drawer-opened .bro-filter-drawer-card{--bro-filter-drawer-opened:1}.mat .bro-filter-drawer-header .mat-toolbar{border-bottom-style:solid;border-bottom-width:1px}.mat .bro-paginator-container{top:calc(var(--bro-shadow-size)*-2);width:100%}.mat .bro-paginator-container .bro-paginator-shadow{z-index:-1;left:var(--bro-shadow-size);border-radius:0 0 var(--bro-corner-radius) var(--bro-corner-radius);height:56px}.mat .bro-paginator-container .mat-mdc-paginator{z-index:3;left:var(--bro-shadow-size);border-radius:0 0 var(--bro-corner-radius) var(--bro-corner-radius);background-color:var(--mat-table-background-color,var(--mat-sys-surface));position:relative}.mat .bro-table-header .mat-mdc-progress-bar{top:calc(var(--bro-header-height) - 3px);width:100%;height:3px;position:absolute}.mat .bro-table-aux .mat-mdc-progress-bar{z-index:2;top:calc(var(--bro-row-height) - 2px);width:100%;height:2px;position:absolute}.mat bro-mat-slide-toggle.bro-cell_component{overflow:visible}table-bro.mat .mat-sort-header-content{text-overflow:ellipsis;white-space:nowrap;transition:width calc(var(--bro-column-width-duration)*var(--bro-duration-scale)) ease;display:block;overflow:hidden}.mat table.mat-table{border-spacing:0}.mat tr.mat-header-row{height:var(--bro-header-height)}.mat tr.mat-row,.mat tr.mat-footer-row{height:var(--bro-row-height)}.mat th.mat-header-cell,.mat td.mat-cell,.mat td.mat-footer-cell{border-color:var(--mat-table-row-item-outline-color,var(--mat-sys-outline));font-weight:var(--mat-table-row-item-label-text-weight,var(--mat-sys-body-medium-weight));font-size:var(--mat-table-row-item-label-text-size,var(--mat-sys-body-medium-size));line-height:var(--mat-table-row-item-label-text-line-height,var(--mat-sys-body-medium-line-height));font-family:var(--mat-table-row-item-label-text-font,var(--mat-sys-body-medium-font));letter-spacing:var(--mat-table-row-item-label-text-tracking,var(--mat-sys-body-medium-tracking));color:var(--mat-table-row-item-label-text-color,var(--mat-sys-on-surface));border-bottom-style:solid;border-bottom-width:1px;padding:0}.mat th.mat-header-cell:first-of-type,.mat td.mat-cell:first-of-type,.mat td.mat-footer-cell:first-of-type{padding-left:24px}[dir=rtl] .mat th.mat-header-cell:first-of-type:not(:only-of-type),[dir=rtl] .mat td.mat-cell:first-of-type:not(:only-of-type),[dir=rtl] .mat td.mat-footer-cell:first-of-type:not(:only-of-type){padding-left:0;padding-right:24px}.mat th.mat-header-cell:last-of-type,.mat td.mat-cell:last-of-type,.mat td.mat-footer-cell:last-of-type{padding-right:24px}[dir=rtl] .mat th.mat-header-cell:last-of-type:not(:only-of-type),[dir=rtl] .mat td.mat-cell:last-of-type:not(:only-of-type),[dir=rtl] .mat td.mat-footer-cell:last-of-type:not(:only-of-type){padding-left:24px;padding-right:0}.mat th.mat-header-cell{font-weight:var(--mat-table-header-headline-weight,var(--mat-sys-title-small-weight));font-size:var(--mat-table-header-headline-size,var(--mat-sys-title-small-size));line-height:var(--mat-table-header-headline-line-height,var(--mat-sys-title-small-line-height));font-family:var(--mat-table-header-headline-font,var(--mat-sys-title-small-font));letter-spacing:var(--mat-table-header-headline-tracking,var(--mat-sys-title-small-tracking));text-align:left;color:var(--mat-table-header-headline-color,var(--mat-sys-on-surface))}[dir=rtl] .mat th.mat-header-cell{text-align:right}.mat bro-mat-tags .mdc-evolution-chip-set__chips>.bro-cell-items-ellipsis{color:var(--mat-chip-label-text-color,var(--mat-sys-on-surface-variant));margin-left:4px}.mat .bro-table-toolbar_container{top:0}.mat .bro-table-toolbar_container .bro-toolbar{height:64px;display:block}.mat .bro-table-toolbar_container .bro-toolbar>nav{box-sizing:border-box;height:100%}.mat .bro-table-toolbar_container{width:100%}.mat .bro-table-toolbar_container .bro-table-toolbar_shadow{z-index:-1;left:var(--bro-shadow-size);border-radius:var(--bro-corner-radius) var(--bro-corner-radius) 0 0;height:64px}.mat .bro-table-toolbar_container .mat-toolbar{z-index:7;left:var(--bro-shadow-size);border-radius:var(--bro-corner-radius) var(--bro-corner-radius) 0 0;border-bottom-style:solid;border-bottom-width:1px;position:relative}.mat .bro-table-toolbar_container .mat-toolbar.bro-toolbar-search{align-items:center;display:flex}.mat .mat-toolbar .bro-toolbar_content-search{line-height:inherit}.mat .mat-toolbar .bro-toolbar_content-search input{font-weight:inherit;font-size:inherit;line-height:inherit}.mat .mat-toolbar .bro-toolbar_content-search input::placeholder{color:var(--mat-sys-on-surface-variant)}.mat .mat-table{background:0 0}.mat .bro-table-header_container>table{background:var(--mat-table-background-color,var(--mat-sys-surface))}.mat .bro-table-toolbar_container .mat-toolbar,.mat .bro-filter-drawer-header .mat-toolbar{border-bottom-color:var(--mat-table-row-item-outline-color,var(--mat-sys-outline));background:var(--mat-table-background-color,var(--mat-sys-surface))}table-bro-filter-drawer-container.mat>.bro-filter-drawer-header,table-bro-filter-drawer-container.mat>[slot=filters],.mat .bro-cell-items-ellipsis{color:var(--mat-table-row-item-label-text-color,var(--mat-sys-on-surface))}.mat .bro-filter-drawer-card{background:var(--mat-table-background-color,var(--mat-sys-surface));color:var(--mat-table-row-item-label-text-color,var(--mat-sys-on-surface))}.mat .bro-table tr.bro-row{background:var(--mat-table-background-color,var(--mat-sys-surface))}.mat .bro-table .bro-details_tr{background-color:var(--mat-table-background-color,var(--mat-sys-surface))}.mat .bro-toolbar_content-search input{background:var(--mat-table-background-color,var(--mat-sys-surface));color:var(--mat-table-row-item-label-text-color,var(--mat-sys-on-surface))}.mat .bro-toolbar_content-search input::placeholder{color:var(--mat-sys-on-surface-variant)}.mat .bro-paginator-outer-container{background-color:var(--mat-table-background-color,var(--mat-sys-surface))}.bro-dark-theme .mat,.bro-dark-theme.mat{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}.mat.bro-light-theme{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}.bro-table-shadow-container>table-bro.mat{margin-left:calc(var(--bro-shadow-size)*-1);width:100%}:where(.mat){--bro-row-height:52px;--bro-header-height:56px;--bro-shadow-size:42px;--bro-corner-radius:12px;--bro-island-space-size:21px;--bro-table-min-width:541px;--bro-filter-drawer-width:320px;--bro-filter-drawer-corner-radius:16px;--bro-table-body-container-z-index:2;--bro-refresh-overlay-opacity:.5;--bro-refresh-overlay-opacity-dark:.5;--bro-column-width-duration:.5s;--bro-details-duration:.35s;--bro-details-easing:cubic-bezier(.37, 0, .63, 1);--bro-filter-drawer-duration:.4s;--bro-kinetic-time-constant:.28s;--bro-state-icon-duration:.5s;--bro-state-message-duration:.75s;--bro-duration-scale:1}@media (prefers-reduced-motion:reduce){:where(.mat){--bro-duration-scale:0}}