@exmg/exm-grid 1.0.4 → 1.0.7

package/src/styles/exm-grid-styles-css.js

@@ -1,4 +1,412 @@
 import { css } from 'lit';
-export const style = css `:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-font-family, Roboto, sans-serif);display:block;--exm-arrow-upward-url: url("/node_modules/@exmg/exm-grid/assets/arrow-upward.svg");--exm-table-card-width: var(--exm-theme-table-card-width, 100%);--exm-table-card-margin-bottom: var(--exm-theme-table-card-margin-bottom, 5px);--exm-table-color: var(--exm-theme-table-on-surface, var(--md-sys-color-on-surface-container));--exm-table-card-background-color: var(--exm-theme-table-surface, var(--md-sys-color-surface-container));--exm-table-row-divider-color: var(--exm-theme-table-row-divider-color, var(--md-sys-color-surface-variant));--exm-table-row-selected-color: var(--exm-theme-table-row-selected-color, var(--md-sys-color-on-secondary-container));--exm-table-row-selected-background-color: var( --exm-theme-table-row-selected-background-color, var(--md-sys-color-secondary-container) );--exm-table-row-hover-color: var(--exm-theme-table-row-hover-color, var(--md-sys-color-on-surface));--exm-table-row-hover-background-color: var( --exm-theme-table-row-hover-background-color, var(--md-sys-color-surface-container-highest) );--exm-table-row-dragged-background-color: var( --exm-theme-table-row-dragged-background-color, var(--md-sys-color-surface-container-low) );--exm-table-rows-expanded-divider-border: var(--exm-theme-table-rows-expanded-divider-border, none);--exm-table-rows-expanded-border: var(--exm-theme-table-rows-expanded-border, none);--exm-table-rows-expanded-background-color: var( --exm-theme-table-rows-expanded-background-color, var(--md-sys-color-surface-container-low) );--exm-table-rows-expanded-color: var(--exm-theme-table-rows-expanded-color, var(--md-sys-color-on-surface));--exm-table-th-color: var(--exm-theme-table-th-on-surface, var(--md-sys-color-on-surface-container));--exm-table-th-background-color: var(--exm-theme-table-th-surface, var(--md-sys-color-surface-container));--exm-table-th-sortable-hover-color: var(--exm-theme-table-th-sortable-hover-color, var(--md-sys-color-on-surface));--exm-table-columns-background-color: var(--exm-theme-table-columns-background-color, var(--md-sys-color-surface));--exm-table-th-height: var(--exm-theme-table-th-height, 48px);--exm-table-th-sort-margin-left: var(--exm-theme-table-th-sort-margin-left, 0px);--exm-table-td-height: var(--exm-theme-table-td-height, 48px);--exm-table-th-sort-icon-height: var(--exm-theme-table-th-sort-icon-height, 1em);--exm-table-th-sort-icon-width: var(--exm-theme-table-th-sort-icon-width, 1em);--exm-table-col-number-padding-right: var(--exm-theme-table-col-number-padding-right, 10px);--exm-table-checkbox-cell-width: var(--exm-theme-table-checkbox-cell-width, 24px);--exm-paper-combobox-selected-item-color: var(var(--md-sys-color-primary), #000000);--exm-paper-combobox-color: var(--md-sys-color-on-surface);--exm-table-toolbar-setting-position: var(--exm-theme-table-toolbar-setting-position, absolute)}::slotted([slot=pagination]){display:flex;align-items:center;justify-content:flex-end;border-top:1px solid var(--exm-table-row-divider-color)}::slotted([slot=toolbar]){display:block}.table-card-container{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-font-family, Roboto, sans-serif);border:none;width:var(--exm-table-card-width);margin:0;padding:0;box-shadow:var(--exm-theme-table-box-shadow, none)}:host([with-toolbar]) .table-card{border-top:1px solid var(--exm-table-row-divider-color)}.table-card{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-font-family, Roboto, sans-serif);border:none;border-bottom-left-radius:4px;border-bottom-right-radius:4px;width:var(--exm-table-card-width);background-color:var(--exm-table-card-background-color);margin-bottom:var(--exm-table-card-margin-bottom);border-top-left-radius:var(--exm-theme-table-radius, var(--exm-surface-border-radius, 16px));border-top-right-radius:var(--exm-theme-table-radius, var(--exm-surface-border-radius, 16px));border-bottom-left-radius:var(--exm-theme-table-radius, var(--exm-surface-border-radius, 16px));border-bottom-right-radius:var(--exm-theme-table-radius, var(--exm-surface-border-radius, 16px))}table{width:100%;color:var(--exm-table-color);border-spacing:0;border:none}table[data-table-layout=fixed]{table-layout:fixed}table[data-table-layout=fixed] td:not(.grid-checkbox-cell):not(.menu-cell){overflow:hidden;white-space:nowrap;text-overflow:ellipsis}table[data-table-layout=fixed] th.grid-checkbox-cell,table[data-table-layout=fixed] td.grid-checkbox-cell{width:var(--exm-table-checkbox-cell-width)}table[data-table-layout=fixed] th.no-ellipsis,table[data-table-layout=fixed] td.no-ellipsis{text-overflow:initial}table thead tr,table thead th{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:0.75rem;font-size:var(--mdc-typography-caption-font-size, 0.75rem);line-height:1.25rem;line-height:var(--mdc-typography-caption-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-caption-font-weight, 400);letter-spacing:0.0333333333em;letter-spacing:var(--mdc-typography-caption-letter-spacing, 0.0333333333em);text-decoration:inherit;text-decoration:var(--mdc-typography-caption-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform, inherit)}table tbody tr,table tbody td,table tfoot tr,table tfoot td{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-body2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:0.875rem;font-size:var(--mdc-typography-body2-font-size, 0.875rem);line-height:1.25rem;line-height:var(--mdc-typography-body2-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-body2-font-weight, 400);letter-spacing:0.0178571429em;letter-spacing:var(--mdc-typography-body2-letter-spacing, 0.0178571429em);text-decoration:inherit;text-decoration:var(--mdc-typography-body2-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-body2-text-transform, inherit)}td{height:var(--exm-table-td-height)}.grid-toolbar th{padding:0;text-align:left}.grid-toolbar th>*{overflow-x:auto}.grid-columns th{height:var(--exm-table-th-height);font-weight:500;font-style:normal;font-stretch:normal;text-transform:uppercase;line-height:1.33;letter-spacing:2px;color:var(--exm-table-th-color);background-color:var(--exm-table-th-background-color);vertical-align:middle;text-align:left;user-select:none;white-space:nowrap}.grid-columns th>span{vertical-align:middle;max-width:100%;display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.grid-columns th svg{fill:var(--exm-table-th-color)}.grid-columns th,tbody td{padding-left:16px}.grid-columns th:last-child,tbody td:last-child{padding-right:10px}th,td{border-top:1px solid var(--exm-table-row-divider-color)}tbody td{height:var(--exm-table-td-height);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-body2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:0.875rem;font-size:var(--mdc-typography-body2-font-size, 0.875rem);line-height:1.25rem;line-height:var(--mdc-typography-body2-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-body2-font-weight, 400);letter-spacing:0.0178571429em;letter-spacing:var(--mdc-typography-body2-letter-spacing, 0.0178571429em);text-decoration:inherit;text-decoration:var(--mdc-typography-body2-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-body2-text-transform, inherit);font-weight:normal;font-style:normal;font-stretch:normal;line-height:1.43px;letter-spacing:.3px;color:var(--exm-table-color)}tbody td svg{fill:var(--exm-table-color)}th[data-sort]{cursor:pointer}th[data-sort]:hover{color:var(--exm-table-th-sortable-hover-color)}th[data-sort]::after{display:inline-block;content:"";-webkit-mask-image:var(--exm-arrow-upward-url);mask-image:var(--exm-arrow-upward-url);background-color:currentColor;background-size:contain;height:var(--exm-table-th-sort-icon-height);width:var(--exm-table-th-sort-icon-width);margin-left:var(--exm-table-th-sort-margin-left);vertical-align:middle;opacity:0}th[data-sort-direction]::after{opacity:1;transition:transform .1s linear}th[data-sort-direction=ASC]::after{transform:rotate(0deg)}th[data-sort-direction=DESC]::after{transform:rotate(180deg)}tbody>tr:not(.grid-row-detail):hover{color:var(--exm-table-row-hover-color);background-color:var(--exm-table-row-hover-background-color)}tbody>tr:not(.grid-row-detail):hover td{color:var(--exm-table-row-hover-color)}tbody>tr:not(.grid-row-detail):hover svg{fill:var(--exm-table-row-hover-color)}tr[data-selected]{color:var(--exm-table-row-selected-color);background-color:var(--exm-table-row-selected-background-color)}tr[data-selected] td{color:var(--exm-table-row-selected-color)}tr[data-selected] svg{fill:var(--exm-table-row-selected-color)}tbody tr[data-has-expanded-detail],tbody tr[data-has-expanded-detail]:hover,tbody tr[data-is-row-expanded]{background-color:var(--exm-table-rows-expanded-background-color);border:var(--exm-table-rows-expanded-border)}tbody tr[data-has-expanded-detail] td,tbody tr[data-has-expanded-detail]:hover td,tbody tr[data-is-row-expanded] td{color:var(--exm-table-rows-expanded-color)}tbody tr[data-has-expanded-detail] td svg,tbody tr[data-has-expanded-detail]:hover td svg,tbody tr[data-is-row-expanded] td svg{fill:var(--exm-table-rows-expanded-color)}tbody tr[data-is-row-expanded] td{border-bottom:none}tbody tr[data-has-expanded-detail] td,tbody tr[data-has-expanded-detail]:hover td{border-bottom:var(--exm-table-rows-expanded-divider-border)}tr.grid-row-detail{display:none}tr.grid-row-detail[data-is-row-expanded]{display:table-row}tr.grid-row-detail td{padding:20px}tr .grid-icon-rotate[data-is-expanded]>*{transition:transform .1s linear;transform:rotate(180deg)}tr .grid-icon-rotate[data-is-expandable]:not([data-is-expanded])>*{transition:transform .1s linear;transform:rotate(0deg)}.grid-row-drag-handler{cursor:move;vertical-align:middle}.grid-row-drag-handler>*{vertical-align:middle}tr.dragged{background-color:var(--exm-table-row-dragged-background-color);opacity:.25;box-shadow:2px 2px 5px rgba(0,0,0,.5) inset}tr.cloned{background-color:var(--exm-table-row-dragged-background-color);width:100%;box-sizing:border-box;box-shadow:2px 2px 5px rgba(0,0,0,.5);opacity:.9}tr td.grid-cell-visible-on-hover{text-align:center}tr td.grid-cell-visible-on-hover>*{visibility:hidden}tr:hover td.grid-cell-visible-on-hover>*,tr[data-has-expanded-detail] td.grid-cell-visible-on-hover>*{visibility:visible}tr td.grid-col-number,tr th.grid-col-number{padding-right:var(--exm-table-col-number-padding-right);text-align:right}tr th.grid-col-number>span{width:100%}`;
-export default style;
+export const style = css `
+  :host {
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    font-family: Roboto, sans-serif;
+    font-family: var(--mdc-typography-font-family, Roboto, sans-serif);
+    display: block;
+    --exm-arrow-upward-url: url('/node_modules/@exmg/exm-grid/assets/arrow-upward.svg');
+    --exm-table-card-width: var(--exm-theme-table-card-width, 100%);
+    --exm-table-card-margin-bottom: var(--exm-theme-table-card-margin-bottom, 5px);
+    --exm-table-color: var(--exm-theme-table-on-surface, var(--md-sys-color-on-surface-container));
+    --exm-table-card-background-color: var(--exm-theme-table-surface, var(--md-sys-color-surface-container));
+    --exm-table-row-divider-color: var(--exm-theme-table-row-divider-color, var(--md-sys-color-surface-variant));
+    --exm-table-row-selected-color: var(
+      --exm-theme-table-row-selected-color,
+      var(--md-sys-color-on-secondary-container)
+    );
+    --exm-table-row-selected-background-color: var(
+      --exm-theme-table-row-selected-background-color,
+      var(--md-sys-color-secondary-container)
+    );
+    --exm-table-row-hover-color: var(--exm-theme-table-row-hover-color, var(--md-sys-color-on-surface));
+    --exm-table-row-hover-background-color: var(
+      --exm-theme-table-row-hover-background-color,
+      var(--md-sys-color-surface-container-highest)
+    );
+    --exm-table-row-dragged-background-color: var(
+      --exm-theme-table-row-dragged-background-color,
+      var(--md-sys-color-surface-container-low)
+    );
+    --exm-table-rows-expanded-divider-border: var(--exm-theme-table-rows-expanded-divider-border, none);
+    --exm-table-rows-expanded-border: var(--exm-theme-table-rows-expanded-border, none);
+    --exm-table-rows-expanded-background-color: var(
+      --exm-theme-table-rows-expanded-background-color,
+      var(--md-sys-color-surface-container-low)
+    );
+    --exm-table-rows-expanded-color: var(--exm-theme-table-rows-expanded-color, var(--md-sys-color-on-surface));
+    --exm-table-th-color: var(--exm-theme-table-th-on-surface, var(--md-sys-color-on-surface-container));
+    --exm-table-th-background-color: var(--exm-theme-table-th-surface, var(--md-sys-color-surface-container));
+    --exm-table-th-sortable-hover-color: var(--exm-theme-table-th-sortable-hover-color, var(--md-sys-color-on-surface));
+    --exm-table-columns-background-color: var(--exm-theme-table-columns-background-color, var(--md-sys-color-surface));
+    --exm-table-th-height: var(--exm-theme-table-th-height, 48px);
+    --exm-table-th-sort-margin-left: var(--exm-theme-table-th-sort-margin-left, 0px);
+    --exm-table-td-height: var(--exm-theme-table-td-height, 48px);
+    --exm-table-th-sort-icon-height: var(--exm-theme-table-th-sort-icon-height, 1em);
+    --exm-table-th-sort-icon-width: var(--exm-theme-table-th-sort-icon-width, 1em);
+    --exm-table-col-number-padding-right: var(--exm-theme-table-col-number-padding-right, 10px);
+    --exm-table-checkbox-cell-width: var(--exm-theme-table-checkbox-cell-width, 24px);
+    --exm-paper-combobox-selected-item-color: var(var(--md-sys-color-primary), #000000);
+    --exm-paper-combobox-color: var(--md-sys-color-on-surface);
+    --exm-table-toolbar-setting-position: var(--exm-theme-table-toolbar-setting-position, absolute);
+  }
+
+  ::slotted([slot='pagination']) {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    border-top: 1px solid var(--exm-table-row-divider-color);
+  }
+
+  ::slotted([slot='toolbar']) {
+    display: block;
+  }
+
+  .table-card-container {
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    font-family: Roboto, sans-serif;
+    font-family: var(--mdc-typography-font-family, Roboto, sans-serif);
+    border: none;
+    width: var(--exm-table-card-width);
+    margin: 0;
+    padding: 0;
+    box-shadow: var(--exm-theme-table-box-shadow, none);
+  }
+
+  :host([with-toolbar]) .table-card {
+    border-top: 1px solid var(--exm-table-row-divider-color);
+  }
+
+  .table-card {
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    font-family: Roboto, sans-serif;
+    font-family: var(--mdc-typography-font-family, Roboto, sans-serif);
+    border: none;
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+    width: var(--exm-table-card-width);
+    background-color: var(--exm-table-card-background-color);
+    margin-bottom: var(--exm-table-card-margin-bottom);
+    border-top-left-radius: var(--exm-theme-table-radius, var(--exm-surface-border-radius, 16px));
+    border-top-right-radius: var(--exm-theme-table-radius, var(--exm-surface-border-radius, 16px));
+    border-bottom-left-radius: var(--exm-theme-table-radius, var(--exm-surface-border-radius, 16px));
+    border-bottom-right-radius: var(--exm-theme-table-radius, var(--exm-surface-border-radius, 16px));
+  }
+
+  table {
+    width: 100%;
+    color: var(--exm-table-color);
+    border-spacing: 0;
+    border: none;
+  }
+
+  table[data-table-layout='fixed'] {
+    table-layout: fixed;
+  }
+
+  table[data-table-layout='fixed'] td:not(.grid-checkbox-cell):not(.menu-cell) {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  table[data-table-layout='fixed'] th.grid-checkbox-cell,
+  table[data-table-layout='fixed'] td.grid-checkbox-cell {
+    width: var(--exm-table-checkbox-cell-width);
+  }
+
+  table[data-table-layout='fixed'] th.no-ellipsis,
+  table[data-table-layout='fixed'] td.no-ellipsis {
+    text-overflow: initial;
+  }
+
+  table thead tr,
+  table thead th {
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    font-family: Roboto, sans-serif;
+    font-family: var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));
+    font-size: 0.75rem;
+    font-size: var(--mdc-typography-caption-font-size, 0.75rem);
+    line-height: 1.25rem;
+    line-height: var(--mdc-typography-caption-line-height, 1.25rem);
+    font-weight: 400;
+    font-weight: var(--mdc-typography-caption-font-weight, 400);
+    letter-spacing: 0.0333333333em;
+    letter-spacing: var(--mdc-typography-caption-letter-spacing, 0.0333333333em);
+    text-decoration: inherit;
+    text-decoration: var(--mdc-typography-caption-text-decoration, inherit);
+    text-transform: inherit;
+    text-transform: var(--mdc-typography-caption-text-transform, inherit);
+  }
+
+  table tbody tr,
+  table tbody td,
+  table tfoot tr,
+  table tfoot td {
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    font-family: Roboto, sans-serif;
+    font-family: var(--mdc-typography-body2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));
+    font-size: 0.875rem;
+    font-size: var(--mdc-typography-body2-font-size, 0.875rem);
+    line-height: 1.25rem;
+    line-height: var(--mdc-typography-body2-line-height, 1.25rem);
+    font-weight: 400;
+    font-weight: var(--mdc-typography-body2-font-weight, 400);
+    letter-spacing: 0.0178571429em;
+    letter-spacing: var(--mdc-typography-body2-letter-spacing, 0.0178571429em);
+    text-decoration: inherit;
+    text-decoration: var(--mdc-typography-body2-text-decoration, inherit);
+    text-transform: inherit;
+    text-transform: var(--mdc-typography-body2-text-transform, inherit);
+  }
+
+  td {
+    height: var(--exm-table-td-height);
+  }
+
+  .grid-toolbar th {
+    padding: 0;
+    text-align: left;
+  }
+
+  .grid-toolbar th > * {
+    overflow-x: auto;
+  }
+
+  .grid-columns th {
+    height: var(--exm-table-th-height);
+    font-weight: 500;
+    font-style: normal;
+    font-stretch: normal;
+    text-transform: uppercase;
+    line-height: 1.33;
+    letter-spacing: 2px;
+    color: var(--exm-table-th-color);
+    background-color: var(--exm-table-th-background-color);
+    vertical-align: middle;
+    text-align: left;
+    user-select: none;
+    white-space: nowrap;
+  }
+
+  .grid-columns th > span {
+    vertical-align: middle;
+    max-width: 100%;
+    display: inline-block;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .grid-columns th svg {
+    fill: var(--exm-table-th-color);
+  }
+
+  .grid-columns th,
+  tbody td {
+    padding-left: 16px;
+  }
+
+  .grid-columns th:last-child,
+  tbody td:last-child {
+    padding-right: 10px;
+  }
+
+  th,
+  td {
+    border-top: 1px solid var(--exm-table-row-divider-color);
+  }
+
+  tbody td {
+    height: var(--exm-table-td-height);
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    font-family: Roboto, sans-serif;
+    font-family: var(--mdc-typography-body2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));
+    font-size: 0.875rem;
+    font-size: var(--mdc-typography-body2-font-size, 0.875rem);
+    line-height: 1.25rem;
+    line-height: var(--mdc-typography-body2-line-height, 1.25rem);
+    font-weight: 400;
+    font-weight: var(--mdc-typography-body2-font-weight, 400);
+    letter-spacing: 0.0178571429em;
+    letter-spacing: var(--mdc-typography-body2-letter-spacing, 0.0178571429em);
+    text-decoration: inherit;
+    text-decoration: var(--mdc-typography-body2-text-decoration, inherit);
+    text-transform: inherit;
+    text-transform: var(--mdc-typography-body2-text-transform, inherit);
+    font-weight: normal;
+    font-style: normal;
+    font-stretch: normal;
+    line-height: 1.43px;
+    letter-spacing: 0.3px;
+    color: var(--exm-table-color);
+  }
+
+  tbody td svg {
+    fill: var(--exm-table-color);
+  }
+
+  th[data-sort] {
+    cursor: pointer;
+  }
+
+  th[data-sort]:hover {
+    color: var(--exm-table-th-sortable-hover-color);
+  }
+
+  th[data-sort]::after {
+    display: inline-block;
+    content: '';
+    -webkit-mask-image: var(--exm-arrow-upward-url);
+    mask-image: var(--exm-arrow-upward-url);
+    background-color: currentColor;
+    background-size: contain;
+    height: var(--exm-table-th-sort-icon-height);
+    width: var(--exm-table-th-sort-icon-width);
+    margin-left: var(--exm-table-th-sort-margin-left);
+    vertical-align: middle;
+    opacity: 0;
+  }
+
+  th[data-sort-direction]::after {
+    opacity: 1;
+    transition: transform 0.1s linear;
+  }
+
+  th[data-sort-direction='ASC']::after {
+    transform: rotate(0deg);
+  }
+
+  th[data-sort-direction='DESC']::after {
+    transform: rotate(180deg);
+  }
+
+  tbody > tr:not(.grid-row-detail):hover {
+    color: var(--exm-table-row-hover-color);
+    background-color: var(--exm-table-row-hover-background-color);
+  }
+
+  tbody > tr:not(.grid-row-detail):hover td {
+    color: var(--exm-table-row-hover-color);
+  }
+
+  tbody > tr:not(.grid-row-detail):hover svg {
+    fill: var(--exm-table-row-hover-color);
+  }
+
+  tr[data-selected] {
+    color: var(--exm-table-row-selected-color);
+    background-color: var(--exm-table-row-selected-background-color);
+  }
+
+  tr[data-selected] td {
+    color: var(--exm-table-row-selected-color);
+  }
+
+  tr[data-selected] svg {
+    fill: var(--exm-table-row-selected-color);
+  }
+
+  tbody tr[data-has-expanded-detail],
+  tbody tr[data-has-expanded-detail]:hover,
+  tbody tr[data-is-row-expanded] {
+    background-color: var(--exm-table-rows-expanded-background-color);
+    border: var(--exm-table-rows-expanded-border);
+  }
+
+  tbody tr[data-has-expanded-detail] td,
+  tbody tr[data-has-expanded-detail]:hover td,
+  tbody tr[data-is-row-expanded] td {
+    color: var(--exm-table-rows-expanded-color);
+  }
+
+  tbody tr[data-has-expanded-detail] td svg,
+  tbody tr[data-has-expanded-detail]:hover td svg,
+  tbody tr[data-is-row-expanded] td svg {
+    fill: var(--exm-table-rows-expanded-color);
+  }
+
+  tbody tr[data-is-row-expanded] td {
+    border-bottom: none;
+  }
+
+  tbody tr[data-has-expanded-detail] td,
+  tbody tr[data-has-expanded-detail]:hover td {
+    border-bottom: var(--exm-table-rows-expanded-divider-border);
+  }
+
+  tr.grid-row-detail {
+    display: none;
+  }
+
+  tr.grid-row-detail[data-is-row-expanded] {
+    display: table-row;
+  }
+
+  tr.grid-row-detail td {
+    padding: 20px;
+  }
+
+  tr .grid-icon-rotate[data-is-expanded] > * {
+    transition: transform 0.1s linear;
+    transform: rotate(180deg);
+  }
+
+  tr .grid-icon-rotate[data-is-expandable]:not([data-is-expanded]) > * {
+    transition: transform 0.1s linear;
+    transform: rotate(0deg);
+  }
+
+  .grid-row-drag-handler {
+    cursor: move;
+    vertical-align: middle;
+  }
+
+  .grid-row-drag-handler > * {
+    vertical-align: middle;
+  }
+
+  tr.dragged {
+    background-color: var(--exm-table-row-dragged-background-color);
+    opacity: 0.25;
+    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5) inset;
+  }
+
+  tr.cloned {
+    background-color: var(--exm-table-row-dragged-background-color);
+    width: 100%;
+    box-sizing: border-box;
+    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
+    opacity: 0.9;
+  }
+
+  tr td.grid-cell-visible-on-hover {
+    text-align: center;
+  }
+
+  tr td.grid-cell-visible-on-hover > * {
+    visibility: hidden;
+  }
+
+  tr:hover td.grid-cell-visible-on-hover > *,
+  tr[data-has-expanded-detail] td.grid-cell-visible-on-hover > * {
+    visibility: visible;
+  }
+
+  tr td.grid-col-number,
+  tr th.grid-col-number {
+    padding-right: var(--exm-table-col-number-padding-right);
+    text-align: right;
+  }
+
+  tr th.grid-col-number > span {
+    width: 100%;
+  }
+`;
 //# sourceMappingURL=exm-grid-styles-css.js.map

package/src/styles/exm-grid-base-toolbar-styles.scss

@@ -1,89 +0,0 @@
-@use '@material/typography/mixins' as typography;
-
-$exm-grid-toolbar-bg-color: #ffffff;
-$exm-grid-toolbar-active-bg-color: #e1f0fe;
-$exm-grid-toolbar-color: #02182b;
-$exm-grid-toolbar-active-color: #000000;
-
-:host {
-  display: block;
-  @include typography.base;
-
-  border-top-left-radius: var(--exm-theme-table-radius, var(--exm-surface-border-radius, 16px));
-  border-top-right-radius: var(--exm-theme-table-radius, var(--exm-surface-border-radius, 16px));
-
-  --toolbar-bg-color: var(--exm-theme-table-toolbar-background-color, var(--md-sys-color-surface-container));
-  --toolbar-color: var(--exm-theme-table-toolbar-color, var(--md-sys-color-on-surface-container));
-  background-color: var(--toolbar-bg-color);
-  color: var(--toolbar-color);
-}
-.wrapper {
-  display: flex;
-  flex: 1;
-  flex-direction: row;
-  align-items: center;
-  padding: 10px 16px 10px 16px;
-
-  overflow-x: var(--exm-theme-table-toolbar-overflow-x, initial);
-  white-space: nowrap;
-
-  &.active {
-    --active-toolbar-bg-color: var(--exm-theme-table-toolbar-active-bg-color, var(--md-sys-color-secondary-container));
-    --active-toolbar-color: var(--exm-theme-table-toolbar-active-color, var(--md-sys-color-on-secondary-container));
-
-    background-color: var(--active-toolbar-bg-color);
-    color: var(--active-toolbar-color);
-    border-top-left-radius: var(--exm-theme-table-radius, var(--exm-surface-border-radius, 16px));
-    border-top-right-radius: var(--exm-theme-table-radius, var(--exm-surface-border-radius, 16px));
-
-    .seperator {
-      &.with-action-separator {
-        border-left: 1px solid var(--active-toolbar-color);
-      }
-    }
-    .description {
-      color: var(--active-toolbar-color);
-      flex: 1;
-      margin-left: 8px;
-    }
-  }
-  .seperator {
-    min-height: 32px;
-    &.with-action-separator {
-      border-left: 1px solid var(--active-toolbar-color);
-    }
-  }
-  .description {
-    @include typography.typography('headline5');
-    color: var(--toolbar-color);
-    font-size: 1.25rem;
-    padding: 0;
-    height: 48px;
-    flex: 1;
-    display: flex;
-    align-items: center;
-  }
-}
-
-.actions {
-  padding: 0 8px 0 0;
-  color: var(--mdc-theme-primary);
-}
-
-.filters {
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-end;
-}
-
-.settings {
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-end;
-}
-
-@media (max-width: 500px) {
-  .wrapper .description {
-    display: none;
-  }
-}

package/src/styles/exm-grid-common-styles.scss

@@ -1 +0,0 @@
-@import "exm-grid-pagination-styles";

package/src/styles/exm-grid-pagination-styles.scss

@@ -1,69 +0,0 @@
-@use '@material/typography/mixins' as typography;
-
-:host {
-  display: block;
-  @include typography.base;
-  // background-color: var(--exm-theme-table-pagination-bg-color, var(--md-sys-color-surface-container));
-  color: var(--exm-theme-table-pagination-color, var(--md-sys-color-on-surface-container));
-  border-bottom-left-radius: var(--exm-theme-table-radius, var(--exm-surface-border-radius, 16px));
-  border-bottom-right-radius: var(--exm-theme-table-radius, var(--exm-surface-border-radius, 16px));
-}
-.wrapper {
-  display: flex;
-  flex: 1;
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-end;
-  padding: 8px 10px;
-
-  // overflow-x: auto;
-  white-space: nowrap;
-  .page-size {
-    display: flex;
-    flex-direction: row;
-    margin-right: 26px;
-    align-items: center;
-
-    .page-size-label {
-      margin-right: 10px;
-      @include typography.typography(body2);
-    }
-  }
-
-  .page-range {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-
-    .page-range-label {
-      margin-right: 44px;
-      @include typography.typography(body2);
-    }
-
-    .page-range-actions {
-      user-select: none;
-    }
-  }
-}
-
-@media (max-width: 600px) {
-  .page-size-label {
-    display: none;
-  }
-}
-
-@media (max-width: 500px) {
-  .wrapper .page-size {
-    display: none;
-  }
-}
-
-@media (max-width: 450px) {
-  .wrapper {
-    overflow-x: auto;
-    white-space: nowrap;
-    .page-range {
-      min-width: 1px;
-    }
-  }
-}

package/src/styles/exm-grid-setting-selection-list-styles.scss

@@ -1,8 +0,0 @@
-:host {
-  display: block;
-  position: relative;
-}
-
-.action {
-  color: var(--mdc-theme-primary);
-}