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

package/styles/skin/angular-material/table-bro/_toolbar-search.scss

@@ -0,0 +1,27 @@
+@use "../variables" as *;
+@use "shared-selector-map" as *;
+
+@mixin styles {
+  // The buttons and the field of the search lie in the toolbar itself, so it lays them out in a row as Material does,
+  // and the field takes the width between the buttons
+  #{$bro-table-toolbar_container} #{$mat-toolbar-selector}.bro-toolbar-search {
+    display: flex;
+
+    align-items: center;
+  }
+
+  // The field has the title text of the toolbar, of the theme of the application
+  #{$mat-toolbar-selector} #{$bro-toolbar_content-search} {
+    line-height: inherit;
+
+    input {
+      font-weight: inherit;
+      font-size: inherit;
+      line-height: inherit;
+
+      &::placeholder {
+        color: $mat-text-secondary-color;
+      }
+    }
+  }
+}

package/styles/skin/angular-material/table-bro/_toolbar.scss

@@ -0,0 +1,14 @@
+@use "../variables" as *;
+@use "shared-selector-map" as *;
+@use "../../shared/mixins/toolbar" as *;
+
+@mixin styles {
+  @include skin_toolbar($mat-toolbar-selector);
+
+  #{$bro-table-toolbar_container} {
+    #{$mat-toolbar-selector} {
+      border-bottom-width: 1px;
+      border-bottom-style: solid;
+    }
+  }
+}

package/styles/skin/shared/_variables.scss

@@ -0,0 +1,94 @@
+// The variables every skin has. Each skin forwards this file with its own values (skin/<skin>/_variables.scss),
+// and users change them with @use "table-bro.<skin>" with (...). A variable of one skin lives in the file of that skin.
+// The sizes and timings that the table script reads too go to the host as custom properties
+// (skin/shared/mixins/_custom-properties.scss).
+$bro-skin: null !default;
+
+
+// Table
+$bro-table-width: null !default; // or px-value, or 100%;
+$bro-table-header-height: null !default;
+$bro-table-row-height: null !default;
+$bro-row-horizontal-padding: null !default;
+$bro-table-shadow-size: null !default;
+
+// The space between the islands of the table, as between the table and its filter drawer
+$bro-island-space-size: null !default;
+
+// The radius of the corners of the table; 0 keeps them square
+$bro-corner-radius: null !default;
+
+
+// Toolbar and paginator
+$bro-toolbar-height: null !default;
+$bro-paginator-height: null !default;
+
+// The narrowest table, as wide as its paginator in one line, and the filter drawer lies over a table that would be narrower
+// next to it. The range of the paginator writes the number of rows, so 1000 rows, as 996 – 1,000 of 1,000 on their
+// last page, need a wider table than fewer rows: the skins take this width, and a page with fewer rows may set a smaller one
+$bro-table-min-width: null !default;
+
+
+// Table cells
+$bro-cell-number-width: null !default;
+
+
+// Filter drawer
+$bro-filter-drawer-width: null !default;
+$bro-filter-drawer-corner-radius: null !default;
+
+// The scrim over the table of the modal filter drawer
+$bro-scrim-color: null !default;
+
+
+// Progress
+$bro-global-progress: null !default;
+$bro-details-progress: null !default;
+
+// How much the body fades during a refresh, from 0 to 1, in the light and the dark theme
+$bro-refresh-overlay-opacity: null !default;
+$bro-refresh-overlay-opacity-dark: null !default;
+
+
+// State
+$bro-state-icon-size: null !default;
+$bro-state-icon-margin-right: null !default;
+$bro-state-line-height: null !default;
+$bro-state-message-font-size: null !default;
+
+
+// Motion
+$bro-column-width-duration: null !default; // the motion of the columns to their new widths
+$bro-details-duration: null !default;
+$bro-details-easing: null !default; // the curve of the eased row details and of the turn of their button
+$bro-filter-drawer-duration: null !default;
+$bro-kinetic-time-constant: null !default; // the time constant of the exponential decay, not its duration
+$bro-state-icon-duration: null !default;
+$bro-state-message-duration: null !default;
+
+
+// Layers: the containers of the table and the shadows under them
+$bro-table-container-z-index: null !default;
+$bro-shadow-z-index: null !default;
+
+// The layers above the containers of the table, from the bottom up: the header and the paginator over the rows,
+// the filter drawer next to the table, the toolbar with its menus over that drawer, and the modal filter drawer
+// over the whole table, its toolbar too
+$bro-header-paginator-z-index: $bro-table-container-z-index + 1;
+$bro-filter-drawer-scrim-z-index: $bro-table-container-z-index + 2;
+$bro-filter-drawer-card-z-index: $bro-table-container-z-index + 3;
+$bro-filter-drawer-content-z-index: $bro-table-container-z-index + 4;
+$bro-toolbar-z-index: $bro-table-container-z-index + 5;
+$bro-modal-filter-drawer-scrim-z-index: $bro-table-container-z-index + 6;
+$bro-modal-filter-drawer-card-z-index: $bro-table-container-z-index + 7;
+$bro-modal-filter-drawer-content-z-index: $bro-table-container-z-index + 8;
+
+
+// Derived values: a skin or a user may set them, otherwise they follow the values above
+@if not $bro-island-space-size {
+  $bro-island-space-size: $bro-table-shadow-size * .5;
+}
+
+@if not $bro-state-line-height {
+  $bro-state-line-height: $bro-state-icon-size;
+}

package/styles/skin/shared/mixins/_custom-properties.scss

@@ -0,0 +1,39 @@
+@use "../variables" as *;
+
+// The sizes and timings of the skin as custom properties on the host. The rules of the skin size the table with them,
+// and the table script reads them at render (packages/core/shared/styles.ts) as numbers for the geometry
+// of the rows, the kinetic scroll, the shadows and the animations; only the header height, the corner radii and
+// the duration of the motion of the column widths are for the CSS alone.
+// A value set on the table changes the CSS and the script together, without a new build of the skin.
+// The core CSS registers the properties (_custom-properties.scss).
+@mixin bro-skin-custom-properties() {
+  --bro-row-height: #{$bro-table-row-height};
+  --bro-header-height: #{$bro-table-header-height};
+  --bro-shadow-size: #{$bro-table-shadow-size};
+  --bro-corner-radius: #{$bro-corner-radius};
+  --bro-island-space-size: #{$bro-island-space-size};
+  --bro-table-min-width: #{$bro-table-min-width};
+  --bro-filter-drawer-width: #{$bro-filter-drawer-width};
+  --bro-filter-drawer-corner-radius: #{$bro-filter-drawer-corner-radius};
+
+  --bro-table-body-container-z-index: #{$bro-table-container-z-index};
+  --bro-refresh-overlay-opacity: #{$bro-refresh-overlay-opacity};
+  --bro-refresh-overlay-opacity-dark: #{$bro-refresh-overlay-opacity-dark};
+
+  --bro-column-width-duration: #{$bro-column-width-duration};
+  --bro-details-duration: #{$bro-details-duration};
+  --bro-details-easing: #{$bro-details-easing};
+  --bro-filter-drawer-duration: #{$bro-filter-drawer-duration};
+  --bro-kinetic-time-constant: #{$bro-kinetic-time-constant};
+  --bro-state-icon-duration: #{$bro-state-icon-duration};
+  --bro-state-message-duration: #{$bro-state-message-duration};
+
+  // The factor of every animation of the table; without motion each one draws its end at once
+  --bro-duration-scale: 1;
+
+  @media (prefers-reduced-motion: reduce) {
+    @at-root #{&} {
+      --bro-duration-scale: 0;
+    }
+  }
+}

package/styles/skin/shared/mixins/_progress-bar.scss

@@ -0,0 +1,27 @@
+@use "../variables" as *;
+@use "shared-selector-map" as *;
+
+@mixin table-header-progress-bar($progress-bar-selector) {
+  #{$bro-table-header} {
+    #{$progress-bar-selector} {
+      position: absolute;
+      top: calc(var(--bro-header-height) - #{$bro-global-progress});
+
+      width: 100%;
+      height: $bro-global-progress;
+    }
+  }
+}
+
+@mixin table-aux-progress-bar($progress-bar-selector) {
+  #{$bro-table-aux} {
+    #{$progress-bar-selector} {
+      position: absolute;
+      z-index: $bro-table-container-z-index;
+      top: calc(var(--bro-row-height) - #{$bro-details-progress});
+
+      width: 100%;
+      height: $bro-details-progress;
+    }
+  }
+}

package/styles/skin/shared/mixins/_shared.scss

@@ -0,0 +1,79 @@
+@use "../variables" as *;
+@use "../../../mixins/visually-hidden" as *;
+
+// The same mixin is in components/material-based/_table.scss of the core: the core and the skins are separate packages,
+// which share no Sass module but the maps of the selectors
+@mixin table-width-transition() {
+  // --bro-duration-scale is 0 under prefers-reduced-motion: reduce
+  transition: width calc(var(--bro-column-width-duration) * var(--bro-duration-scale)) ease;
+}
+
+// The items of a component cell, such as tags, keep to one line, so the row keeps its height. The component calls
+// fitCellItems() of the core: the items that do not fit whole give way to an ellipsis after the items that show.
+// The first item always shows and shrinks with its own ellipsis in a narrow cell.
+// @param $row - the element that holds the items in its line
+// @param $item - an item
+// @param $text - the text inside an item; without it the item holds its text itself
+@mixin bro-cell-items($row, $item, $text: null) {
+  #{$row} {
+    display: flex;
+    overflow: hidden;
+
+    box-sizing: border-box;
+    width: 100%;
+    min-width: 0;
+
+    flex-wrap: nowrap;
+    align-items: center;
+
+    > #{$item} {
+      flex: none;
+    }
+
+    > #{$item}:first-child {
+      min-width: 0;
+
+      flex-shrink: 1;
+
+      // The boxes inside the item shrink with it down to its text
+      * {
+        min-width: 0;
+      }
+
+      @if $text {
+        #{$text} {
+          overflow: hidden;
+
+          text-overflow: ellipsis;
+        }
+      } @else {
+        overflow: hidden;
+
+        text-overflow: ellipsis;
+      }
+    }
+
+    > .bro-cell-items-ellipsis {
+      flex: none;
+    }
+
+    // An item that does not fit the line: hidden from the eye, not from screen readers (fitCellItems)
+    > .bro-cell-item-hidden {
+      @include bro-visually-hidden;
+    }
+  }
+}
+
+// A container of the table on the page lines the table up with its content: the table moves left by its shadow size,
+// so its visible part starts at the content and its shadows fall into the margins around it. The table knows its skin,
+// so the rule needs no skin class around the container. A full width table takes the full width of the container,
+// its shadows falling into the margins.
+@mixin bro-table-shadow-container() {
+  @at-root .bro-table-shadow-container > table-bro#{&} {
+    margin-left: calc(var(--bro-shadow-size) * -1);
+
+    @if $bro-table-width == 100% {
+      width: 100%;
+    }
+  }
+}

package/styles/skin/shared/mixins/_skin-colors.scss

@@ -0,0 +1,64 @@
+@use "sass:selector";
+@use "shared-selector-map" as *;
+
+@mixin bro-table-theme($table-selector, $toolbar-selector, $bro-bg, $bro-border-color, $bro-text-color, $bro-text-secondary-color) {
+  #{$table-selector} {
+    background: transparent;
+  }
+
+  #{$bro-table-header_container} {
+    > table {
+      background: $bro-bg;
+    }
+  }
+
+  #{$bro-table-toolbar_container} #{$toolbar-selector},
+  .bro-filter-drawer-header #{$toolbar-selector} {
+    border-bottom-color: $bro-border-color;
+
+    background: $bro-bg;
+  }
+
+  // The table with the filter drawer carries the class of the skin itself, so do the drawer of the mat skin and
+  // the card in it. Unify keeps the dark theme class where it is: on an ancestor
+  // (.bro-dark-theme table-bro-filter-drawer-container.bs) or on this element (table-bro-filter-drawer-container.bro-dark-theme.bs)
+  @at-root #{selector.unify(&, 'table-bro-filter-drawer-container')} {
+    > .bro-filter-drawer-header,
+    > [slot="filters"] {
+      color: $bro-text-color;
+    }
+  }
+
+  // The ellipsis after the items of a component cell that show (fitCellItems)
+  .bro-cell-items-ellipsis {
+    color: $bro-text-color;
+  }
+
+  // The card of the drawer under its header and its filters
+  .bro-filter-drawer-card {
+    background: $bro-bg;
+    color: $bro-text-color;
+  }
+
+  // The rows of the table of the body: the aux table measures the same rows, and its rows stay transparent
+  .bro-table tr.bro-row {
+    background: $bro-bg;
+  }
+
+  .bro-table #{$bro-details_tr} {
+    background-color: $bro-bg;
+  }
+
+  #{$bro-toolbar_content-search} input {
+    background: $bro-bg;
+    color: $bro-text-color;
+
+    &::placeholder {
+      color: $bro-text-secondary-color;
+    }
+  }
+
+  .bro-paginator-outer-container {
+    background-color: $bro-bg;
+  }
+}

package/styles/skin/shared/mixins/_slide-toggle.scss

@@ -0,0 +1,5 @@
+@mixin slide-toggle($slide-toggle-selector: 'bro-mat-slide-toggle') {
+  #{$slide-toggle-selector} {
+    overflow: visible;
+  }
+}

package/styles/skin/shared/mixins/_sort-header.scss

@@ -0,0 +1,11 @@
+@mixin sort-header-content() {
+  // A block, not a flex container: text-overflow does not apply to the anonymous flex item of the title. The container of
+  // the sort header centers the content as its flex item
+  display: block;
+
+  overflow: hidden;
+
+  text-overflow: ellipsis;
+
+  white-space: nowrap;
+}

package/styles/skin/shared/mixins/_toolbar.scss

@@ -0,0 +1,61 @@
+@use "../variables" as *;
+@use "shared-selector-map" as *;
+
+// The component and its shadow take the same corners: the shadow follows the rounded shape of the component
+@mixin toolbar_or_paginator-container($container-selector, $shadow-selector, $component-selector, $component-height, $component-z-index, $border-radius: null) {
+  #{$container-selector} {
+    width: $bro-table-width;
+
+    #{$shadow-selector} {
+      z-index: $bro-shadow-z-index;
+      left: var(--bro-shadow-size);
+
+      height: $component-height;
+
+      border-radius: $border-radius;
+    }
+
+    #{$component-selector} {
+      position: relative;
+      z-index: $component-z-index;
+      left: var(--bro-shadow-size);
+
+      border-radius: $border-radius;
+    }
+  }
+}
+
+
+@mixin skin_toolbar($toolbar-selector) {
+  #{$bro-table-toolbar_container} {
+    top: 0;
+
+    .bro-toolbar {
+      display: block;
+
+      height: $bro-toolbar-height;
+
+      > nav {
+        box-sizing: border-box;
+        height: 100%;
+      }
+    }
+  }
+
+  // The menus of the toolbar lie above the filter drawer next to the table (the scale of the layers, skin/shared/_variables.scss).
+  // The toolbar has the top corners of the table.
+  @include toolbar_or_paginator-container($bro-table-toolbar_container, $bro-table-toolbar_shadow, $toolbar-selector, $bro-toolbar-height, $bro-toolbar-z-index, var(--bro-corner-radius) var(--bro-corner-radius) 0 0);
+}
+
+@mixin skin_table-header() {
+  @include toolbar_or_paginator-container($bro-table-header_container, $bro-table-header_shadow, $bro-table-header, var(--bro-header-height), $bro-header-paginator-z-index);
+}
+
+@mixin skin_paginator($paginator-selector) {
+  #{$bro-paginator-container} {
+    top: calc(var(--bro-shadow-size) * -2);
+  }
+
+  // The paginator has the bottom corners of the table
+  @include toolbar_or_paginator-container($bro-paginator-container, $bro-paginator-shadow, $paginator-selector, $bro-paginator-height, $bro-header-paginator-z-index, 0 0 var(--bro-corner-radius) var(--bro-corner-radius));
+}

package/styles/skin/shared/table-bro/_details.scss

@@ -0,0 +1,11 @@
+@use "shared-selector-map" as *;
+
+@mixin styles {
+  #{$bro-details_tr} {
+    > td > :first-child > * {
+      > div {
+        padding: calc(var(--bro-row-height) / 2);
+      }
+    }
+  }
+}

package/styles/skin/shared/table-bro/_filter-drawer.scss

@@ -0,0 +1,62 @@
+@use "../variables" as *;
+
+// The table with the filter drawer carries the class of the skin itself:
+// table-bro-filter-drawer-container#{&} is table-bro-filter-drawer-container.nv and the like
+@mixin styles {
+  // The drawer lies above a table that does not fit its narrowed regions, and the scrim of the modal drawer between them
+  @at-root table-bro-filter-drawer-container#{&} {
+    > .bro-filter-drawer-scrim {
+      z-index: $bro-filter-drawer-scrim-z-index;
+
+      background: $bro-scrim-color;
+    }
+
+    > .bro-filter-drawer-card {
+      z-index: $bro-filter-drawer-card-z-index;
+    }
+
+    > .bro-filter-drawer-header,
+    > [slot="filters"] {
+      z-index: $bro-filter-drawer-content-z-index;
+    }
+
+    // The modal drawer and its scrim lie over the whole table, its toolbar too
+    &[modal] {
+      > .bro-filter-drawer-scrim {
+        z-index: $bro-modal-filter-drawer-scrim-z-index;
+      }
+
+      > .bro-filter-drawer-card {
+        z-index: $bro-modal-filter-drawer-card-z-index;
+      }
+
+      > .bro-filter-drawer-header,
+      > [slot="filters"] {
+        z-index: $bro-modal-filter-drawer-content-z-index;
+      }
+    }
+
+    // The filters of the application under the header
+    > [slot="filters"] > * {
+      padding: $bro-row-horizontal-padding;
+    }
+  }
+
+  // The filters of the application under the header in the card of mat-drawer of the mat skin
+  .bro-filter-drawer-card > .bro-filter-drawer-header ~ * {
+    padding: $bro-row-horizontal-padding;
+  }
+
+  .bro-filter-drawer-header {
+    .bro-toolbar {
+      display: block;
+
+      height: $bro-toolbar-height;
+
+      > nav {
+        box-sizing: border-box;
+        height: 100%;
+      }
+    }
+  }
+}

package/styles/skin/shared/table-bro/_shadows.scss

@@ -0,0 +1,19 @@
+@use "../variables" as *;
+@use "shared-selector-map" as *;
+
+@mixin styles {
+  #{$bro-shadow} {
+    padding-right: var(--bro-shadow-size);
+    padding-left: var(--bro-shadow-size);
+  }
+
+  #{$bro-table-shadows} {
+    z-index: $bro-shadow-z-index;
+
+    width: calc(100% - var(--bro-shadow-size) * 2);
+
+    .bro-row {
+      height: var(--bro-row-height);
+    }
+  }
+}

package/styles/skin/shared/table-bro/_state.scss

@@ -0,0 +1,38 @@
+@use 'sass:math';
+@use "../variables" as *;
+@use "shared-selector-map" as *;
+
+@mixin styles {
+  $bro-state-icon-rotate-offset: math.ceil(math.sqrt(2) * $bro-state-icon-size) - $bro-state-icon-size;
+
+  #{$bro-state-container}  {
+    padding-right: $bro-state-icon-rotate-offset;
+    padding-left: $bro-state-icon-rotate-offset;
+
+    font-size: $bro-state-message-font-size;
+    line-height: $bro-state-line-height;
+
+    .bro-state-icon {
+      top: $bro-state-line-height;
+
+      width: $bro-state-icon-size;
+      height: $bro-state-icon-size;
+
+      margin-right: $bro-state-icon-margin-right;
+
+      font-size: $bro-state-icon-size;
+      line-height: $bro-state-line-height;
+
+      & > svg {
+        width: $bro-state-icon-size;
+        height: $bro-state-icon-size;
+
+        vertical-align: top;
+      }
+    }
+
+    lottie-player {
+      height: $bro-state-icon-size * 3;
+    }
+  }
+}

package/styles/skin/shared/table-bro/_table.scss

@@ -0,0 +1,70 @@
+// The skin class is on the table element itself: table-bro#{&} is table-bro.nv and the like
+// The visible table starts one shadow size into the element and keeps its width, so a full width leaves room
+// for both shadows
+
+@use "../variables" as *;
+@use "shared-selector-map" as *;
+@use "../mixins/toolbar" as *;
+
+@mixin styles {
+  @at-root table-bro#{&} {
+    @if $bro-table-width == 100% {
+      width: calc(100% - var(--bro-shadow-size) * 2);
+    } @else {
+      width: $bro-table-width;
+    }
+
+    // A narrower table would wrap its paginator; a narrow screen is for the adaptive layout of the next versions
+    min-width: var(--bro-table-min-width);
+  }
+
+  @at-root table-bro#{&} table {
+    th.bro-header-cell,
+    td.bro-cell {
+      box-sizing: border-box;
+
+      padding: 0 0 0 $bro-row-horizontal-padding;
+    }
+
+    // The last column keeps the same space at the right edge of the table, as Material gives it: a value at the right
+    // edge of its column does not touch the edge of the table
+    th.bro-header-cell:last-child,
+    td.bro-cell:last-child {
+      padding-right: $bro-row-horizontal-padding;
+    }
+  }
+
+
+  @include skin_table-header();
+
+
+  #{$bro-table-body_container} {
+    // The body runs on under the paginator by one shadow size, with the rows of the next page; the rounded bottom
+    // corners of the paginator would show them. Under the paginator the body ends above its corners, and beside it
+    // the shadow of the body keeps its size. An extension of the layout of the body that draws its own decorations of the
+    // rows hides the rows out of the window itself, so they stay whole
+    $cut: max(0px, var(--bro-shadow-size) + var(--bro-corner-radius) - #{$bro-paginator-height});
+
+    z-index: $bro-table-container-z-index;
+    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% - #{$cut}), var(--bro-shadow-size) calc(100% - #{$cut}), var(--bro-shadow-size) 100%, 0 100%);
+  }
+
+  #{$bro-table-body} {
+    z-index: $bro-table-container-z-index;
+
+    > .bro-table {
+      z-index: $bro-table-container-z-index;
+    }
+  }
+
+  #{$bro-table-body},
+  #{$bro-table-shadows} {
+    padding-top: var(--bro-shadow-size);
+  }
+
+  #{$bro-table-aux} {
+    top: var(--bro-shadow-size);
+  }
+}

package/styles/skin/shared/table-bro/_text-ellipsis.scss

@@ -0,0 +1,14 @@
+@use "../variables" as *;
+@use "shared-selector-map" as *;
+@use "../../../mixins/text-ellipsis" as *;
+
+@mixin styles {
+  #{$bro-cell_text-ellipsis-container} {
+    line-height: 1.5;
+  }
+
+  // The width of the row counter column of the skin; the skin class is on the table element itself
+  @at-root table-bro#{&} {
+    @include bro-text-ellipsis-width('.bro-cell-number', $bro-cell-number-width);
+  }
+}