@table-bro/native 0.0.0-stage → 1.1.0

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);
+  }
+}

package/styles/skin/vanilla-js/native/_themes.scss

@@ -0,0 +1,45 @@
+@use "variables" as *;
+@use "../../shared/mixins/skin-colors" as *;
+
+$bro-border-color: #dee2e6;
+$bro-border-color-dark: #495057;
+
+@mixin styles {
+  // The table has the text and the color scheme of its theme: native controls follow the scheme, and a table with
+  // a theme of its own does not take the text of a page of the other theme
+  #{$bro-skin} {
+    color: #212529;
+
+    color-scheme: light;
+
+    @include bro-table-theme(
+        '.bro-table',
+        '.bro-toolbar',
+        #fff,
+        $bro-border-color,
+        #212529,
+        rgba(#212529, .75)
+    );
+  }
+
+  // Apply the dark theme only when the `.bro-dark-theme` CSS class is applied
+  // to an ancestor element of the components (such as `body`) or to the table host.
+  // A table with its own light theme, the class bro-light-theme, stays light under a dark ancestor
+  .bro-dark-theme {
+    #{$bro-skin}:not(.bro-light-theme),
+    &#{$bro-skin} {
+      color: #dee2e6;
+
+      color-scheme: dark;
+
+      @include bro-table-theme(
+          '.bro-table',
+          '.bro-toolbar',
+          #2b3035,
+          $bro-border-color-dark,
+          #dee2e6,
+          rgba(#dee2e6, .75)
+      );
+    }
+  }
+}

package/styles/skin/vanilla-js/native/_variables.scss

@@ -0,0 +1,54 @@
+// The values of the native skin for the variables every skin has (skin/shared/_variables.scss)
+@forward "../../shared/variables" with (
+  $bro-skin: '.nv',
+
+  $bro-table-width: 100% !default, // or px-value, or 100%;
+
+  $bro-table-header-height: 40px !default,
+  $bro-table-row-height: 40px !default,
+  $bro-row-horizontal-padding: 1.25rem !default,
+
+  $bro-table-shadow-size: 48px !default,
+
+  $bro-toolbar-height: 64px !default,
+  $bro-paginator-height: 56px !default,
+  $bro-table-min-width: 594px !default,
+
+  $bro-corner-radius: 12px !default, // the corner-medium of Material 3, as its cards
+
+  $bro-filter-drawer-width: 320px !default,
+  $bro-filter-drawer-corner-radius: 16px !default, // the corner-large of Material 3, as its side sheets
+  $bro-scrim-color: rgba(#000, .32) !default, // the scrim of Material 3
+
+
+  $bro-global-progress: 10px !default,
+  $bro-details-progress: 6px !default,
+
+
+  // Layers
+  $bro-table-container-z-index: 2 !default,
+  $bro-shadow-z-index: -1 !default,
+
+
+  // Read by the table script (skin/shared/mixins/_custom-properties.scss)
+  $bro-refresh-overlay-opacity: .5 !default,
+  $bro-refresh-overlay-opacity-dark: .5 !default,
+  $bro-column-width-duration: 500ms !default, // read by the CSS alone
+  $bro-details-duration: 350ms !default,
+  $bro-details-easing: cubic-bezier(.37, 0, .63, 1) !default, // the curve of easeInOutSine
+  $bro-filter-drawer-duration: 400ms !default,
+  $bro-kinetic-time-constant: 280ms !default, // the time constant of the exponential decay, not its duration
+  $bro-state-icon-duration: 500ms !default,
+  $bro-state-message-duration: 750ms !default,
+
+
+  // State
+  $bro-state-icon-size: 28px !default,
+  $bro-state-icon-margin-right: 16px !default,
+  $bro-state-line-height: 33px !default,
+  $bro-state-message-font-size: 28px !default,
+
+
+  // Table cells
+  $bro-cell-number-width: 45px !default
+);

package/styles/skin/vanilla-js/native/components/bootstrap-based/_paginator.scss

@@ -0,0 +1,50 @@
+@use "../../variables" as *;
+
+$bro-margin: 0.5rem;
+$bro-padding: $bro-margin;
+
+$bro-link-color: #00e;
+$bro-link-color-dark: #7dafff;
+
+@mixin styles {
+  .bro-pagination { // copies styles of bs `.pagination`
+    display: flex;
+
+    // The links have no padding of their own: the last one stands as far from the edge as the links of Bootstrap do
+    margin-right: 0.75rem;
+    margin-bottom: 0;
+    padding-left: 0;
+
+    list-style: none;
+
+    cursor: pointer;
+  }
+
+  .bro-page-link {
+    position: relative;
+
+    display: block;
+
+    color: $bro-link-color;
+  }
+
+  .bro-dark-theme #{$bro-skin}:not(.bro-light-theme),
+  #{$bro-skin}.bro-dark-theme {
+    .bro-page-link {
+      color: $bro-link-color-dark;
+    }
+  }
+
+  .bro-page-item {
+    &:not(:first-child) .bro-page-link {
+      margin-left: $bro-margin;
+    }
+
+    // The paginator gives the class disabled to the item of a page that does not exist; after the colors of the themes
+    &.disabled .bro-page-link {
+      color: GrayText;
+
+      pointer-events: none;
+    }
+  }
+}

package/styles/skin/vanilla-js/native/components/bootstrap-based/_toolbar.scss

@@ -0,0 +1,99 @@
+@use "../../variables" as *;
+@use "paginator" as *;
+@use "../../../shared/table-bro/toolbar" as *;
+
+$bro-margin: 0.5rem;
+$bro-padding: $bro-margin;
+
+
+/** Bootstrap-based (5.3) styles: */
+.bro-navbar {
+  position: relative;
+
+  display: flex;
+
+  padding: $bro-padding;
+
+  flex-wrap: wrap; // allow us to do the line break for collapsing content
+  align-items: center;
+  justify-content: space-between; // space out brand from logo
+}
+
+div.bro-toolbar-content { // styles of `.container-fluid`
+  display: flex;
+
+  width: 100%;
+
+  flex-wrap: inherit;
+  align-items: center;
+  justify-content: space-between;
+}
+
+
+.bro-navbar-brand {
+  margin-right: $bro-padding;
+  padding-top: $bro-padding;
+  padding-bottom: $bro-padding;
+
+  font-weight: bold;
+
+  white-space: nowrap;
+}
+
+ul.bro-navbar-nav {
+  display: flex;
+
+  // The links have no padding of their own: the last one stands as far from the edge as the links of Bootstrap do
+  margin-right: 0.75rem;
+  margin-bottom: 0;
+  padding-left: 0;
+
+  flex-direction: column; // cannot use `inherit` to get the `.navbar`s value
+
+  list-style: none;
+}
+
+.bro-navbar-collapse {
+  flex-grow: 1;
+  flex-basis: 100%;
+
+  // For always expanded or extra full navbars, ensure content aligns itself
+  // properly vertically. Can be easily overridden with flex utilities.
+  align-items: center;
+}
+
+.bro-navbar-expand {
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+
+  .bro-navbar-nav {
+    flex-direction: row;
+  }
+
+  .bro-navbar-collapse {
+    display: flex;
+
+    flex-basis: auto;
+  }
+}
+
+
+/** Custom styles: */
+.bro-nav-item {
+  &:not(:first-child) .bro-nav-link {
+    margin-left: $bro-margin;
+  }
+
+  select {
+    width: 60px;
+
+    margin-left: $bro-margin;
+  }
+}
+
+@include toolbar-links('.bro-nav-link', $bro-link-color);
+
+.bro-dark-theme #{$bro-skin}:not(.bro-light-theme),
+#{$bro-skin}.bro-dark-theme {
+  @include toolbar-links('.bro-nav-link', $bro-link-color-dark);
+}

package/styles/skin/vanilla-js/native/table-bro/_button.scss

@@ -0,0 +1,16 @@
+@use "../components/bootstrap-based/paginator" as *;
+
+@mixin styles {
+  bro-button {
+    a {
+      color: $bro-link-color;
+    }
+  }
+
+  .bro-dark-theme &:not(.bro-light-theme),
+  &.bro-dark-theme {
+    a {
+      color: $bro-link-color-dark;
+    }
+  }
+}

package/styles/skin/vanilla-js/native/table-bro/_filter-drawer.scss

@@ -0,0 +1,10 @@
+@use "toolbar" as *;
+@use "../../shared/table-bro/filter-drawer" as *;
+
+@mixin styles {
+  .bro-filter-drawer-header .bro-nav-link {
+    text-decoration: none;
+  }
+
+  @include filter-drawer-header-content($bro-nav-link-padding);
+}

package/styles/skin/vanilla-js/native/table-bro/_progress-bar.scss

@@ -0,0 +1,24 @@
+@use "../variables" as *;
+@use "shared-selector-map" as *;
+@use "../../../shared/mixins/progress-bar" as *;
+
+@mixin styles {
+  @include table-header-progress-bar('bro-nv-progress-bar progress');
+  @include table-aux-progress-bar('bro-nv-progress-bar progress');
+
+  $bro-nv-global-progress-inner-vertical-space: 3px; // inner top/bottom space if height is 10px
+
+  #{$bro-table-header} {
+    bro-nv-progress-bar progress {
+      top: calc(var(--bro-header-height) - #{$bro-global-progress - $bro-nv-global-progress-inner-vertical-space});
+    }
+  }
+
+  $bro-nv-details-progress-inner-vertical-space: 2px; // inner top/bottom space if height is 6px
+
+  #{$bro-table-aux} {
+    bro-nv-progress-bar progress {
+      top: calc(var(--bro-row-height) - #{$bro-details-progress - $bro-nv-details-progress-inner-vertical-space});
+    }
+  }
+}

package/styles/skin/vanilla-js/native/table-bro/_table.scss

@@ -0,0 +1,16 @@
+@use "../themes" as *;
+
+@mixin styles {
+  @at-root table-bro#{&} table {
+    border-color: $bro-border-color;
+
+    > :not(caption) > * > * {
+      border-bottom-width: 1px;
+    }
+  }
+
+  @at-root .bro-dark-theme table-bro#{&}:not(.bro-light-theme) table,
+  table-bro#{&}.bro-dark-theme table {
+    border-color: $bro-border-color-dark;
+  }
+}

package/styles/skin/vanilla-js/native/table-bro/_toolbar-search.scss

@@ -0,0 +1,17 @@
+@use "toolbar" as *;
+@use "shared-selector-map" as *;
+@use "../../shared/table-bro/toolbar-search" as *;
+
+@mixin styles {
+  #{$bro-toolbar_content-search} {
+    input {
+      font-weight: bold;
+    }
+  }
+
+  .bro-toolbar-search .bro-nav-link {
+    text-decoration: none;
+  }
+
+  @include toolbar-search-content($bro-nav-link-padding);
+}

package/styles/skin/vanilla-js/native/table-bro/_toolbar.scss

@@ -0,0 +1,19 @@
+@use "../themes" as *;
+@use "../../shared/table-bro/toolbar" as *;
+
+$bro-nav-link-padding: 0.5rem;
+
+@mixin styles {
+  @include toolbar-main-content($bro-nav-link-padding);
+
+  .bro-navbar {
+    border-bottom: 1px solid $bro-border-color;
+  }
+
+  .bro-dark-theme &:not(.bro-light-theme),
+  &.bro-dark-theme {
+    .bro-navbar {
+      border-bottom: 1px solid $bro-border-color-dark;
+    }
+  }
+}

package/styles/skin/vanilla-js/shared/_bootstrap-adapter.scss

@@ -0,0 +1,9 @@
+// Bootstrap 5 has no Sass modules, so this adapter is the only file that imports it.
+// The skins take its functions, variables and mixins with @use, and Bootstrap 6 will change only this file.
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/variables-dark";
+
+@import "bootstrap/scss/mixins/caret";
+@import "bootstrap/scss/mixins/gradients";
+@import "bootstrap/scss/mixins/transition";

package/styles/skin/vanilla-js/shared/_skin.scss

@@ -0,0 +1,70 @@
+// The CSS that the vanilla skins bs and nv share, in the order of their entry points: the shared parts, the parts of the
+// skin, which @content gives, then the shadow container and the sizes and timings for the table script
+@use "sass:meta";
+@use "../../shared/variables" as *;
+
+/* Mixins */
+@use "../../shared/mixins/custom-properties" as *;
+@use "../../shared/mixins/shared" as *;
+
+@use "../../shared/table-bro/details" as shared-details;
+@use "../../shared/table-bro/filter-drawer" as shared-filter-drawer;
+@use "../../shared/table-bro/shadows" as shared-shadows;
+@use "../../shared/table-bro/state" as shared-state;
+@use "../../shared/table-bro/table" as shared-table;
+@use "../../shared/table-bro/text-ellipsis" as shared-text-ellipsis;
+@use "./components/bootstrap-based/button" as bootstrap-based-button;
+@use "./components/material-based/table" as material-based-table;
+@use "./vendor-extensions/material-based/paginator" as material-based-paginator-extension;
+@use "./table-bro/paginator" as vanilla-paginator;
+@use "./table-bro/toolbar" as vanilla-toolbar;
+
+// @param $tags - the element of the tags of the skin in a cell
+// @param $tag - a tag in it
+@mixin styles($tags, $tag) {
+  #{$bro-skin} {
+    @include shared-details.styles;
+    @include shared-filter-drawer.styles;
+    @include shared-shadows.styles;
+    @include shared-state.styles;
+    @include shared-table.styles;
+    @include shared-text-ellipsis.styles;
+
+    // The tags of the skin in a cell
+    @include bro-cell-items($tags, $tag);
+  }
+
+
+  /* Shared VanillaJS components */
+  @include meta.load-css("./components/material-based/paginator");
+  @include meta.load-css("./components/material-based/sort-header");
+
+  #{$bro-skin} {
+    @include bootstrap-based-button.styles;
+    @include material-based-table.styles;
+
+    @include material-based-paginator-extension.styles;
+  }
+
+
+  /* Shared Table-bro extensions */
+  #{$bro-skin} {
+    @include vanilla-paginator.styles;
+  }
+  @include vanilla-toolbar.styles;
+  @include meta.load-css("./table-bro/toolbar-search");
+
+
+  @content;
+
+
+  #{$bro-skin} {
+    @include bro-table-shadow-container();
+  }
+
+
+  /* The sizes and timings for the table script; :where() lets a plain table-bro selector override them */
+  :where(#{$bro-skin}) {
+    @include bro-skin-custom-properties();
+  }
+}

package/styles/skin/vanilla-js/shared/components/bootstrap-based/_button.scss

@@ -0,0 +1,9 @@
+@use "../../bootstrap-adapter" as *;
+
+@mixin styles {
+  .bro-button-toggle {
+    display: inline-block;
+
+    @include caret();
+  }
+}

package/styles/skin/vanilla-js/shared/components/material-based/_paginator.scss

@@ -0,0 +1,62 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+$padding: 0 8px;
+$page-size-margin-right: 8px;
+
+$items-per-page-label-margin: 0 4px;
+
+$range-label-margin: 0 32px 0 24px;
+
+.bro-paginator {
+  display: block;
+}
+
+// Note: this wrapper element is only used to get the flexbox vertical centering to work
+// with the `min-height` on IE11. It can be removed if we drop support for IE.
+.bro-paginator-outer-container {
+  display: flex;
+}
+
+.bro-paginator-inner-container {
+  display: flex;
+
+  width: 100%;
+  padding: $padding;
+
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.bro-paginator-page-size {
+  display: flex;
+
+  margin-right: $page-size-margin-right;
+
+  align-items: baseline;
+
+  [dir='rtl'] & {
+    margin-right: 0;
+    margin-left: $page-size-margin-right;
+  }
+}
+
+.bro-paginator-page-size-label {
+  margin: $items-per-page-label-margin;
+}
+
+.bro-paginator-range-label {
+  margin: $range-label-margin;
+}
+
+.bro-paginator-range-actions {
+  display: flex;
+
+  align-items: center;
+}