@table-bro/native 0.0.0-stage → 1.2.0

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

@@ -0,0 +1,31 @@
+@use "table-bro-selector-map" as *;
+@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;
+  }
+
+  // The visually hidden end of the title of a link lies in the middle of the link: the native outline of WebKit takes
+  // in its box, which at the end of the text reached above the link and drew a step of the outline in its corner
+  .bro-nav-link {
+    position: relative;
+
+    > #{$bro-visually-hidden} {
+      top: 50%;
+      left: 50%;
+    }
+  }
+
+  .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,76 @@
+// 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();
+  }
+
+  /* A prerendered table (data-bro-prerender of prerenderTableBro) takes them in the critical CSS of its page too, as
+     Beasties writes it: it drops a selector of :where() alone, which nothing is left of without the pseudo-class */
+  table-bro:where([data-bro-prerender]#{$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;
+}

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

@@ -0,0 +1,149 @@
+@use "../../../../shared/mixins/shared" as *;
+@use "../../../../shared/mixins/sort-header" as *;
+
+/**
+ * @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
+ */
+
+// The box of the pseudo-element of the header below
+.bro-sort-header {
+  position: relative;
+}
+
+// The header is as wide as its title and arrow, as a button, so its focus ring keeps to them: the native outline of the
+// browser in the skin nv, the focus ring of Bootstrap in the skin bs
+.bro-sort-header-container {
+  display: flex;
+
+  // The native outline of Safari takes in the boxes of the content, and the arrow, turned by its transform, gave it a
+  // step below the arrow: a header that clips its content has the outline of its own box. The arrow stays within
+  // the header, and the pseudo-element below is positioned by .bro-sort-header outside it, so the clip leaves both whole
+  overflow: hidden;
+
+  width: fit-content;
+  max-width: 100%;
+
+  align-items: center;
+
+  letter-spacing: normal;
+
+  cursor: pointer;
+
+  // A click on the whole width of the column sorts it, also beside the title
+  &::after {
+    content: "";
+
+    position: absolute;
+
+    inset: 0;
+  }
+}
+
+// The icon that the configs of the bs and nv skins give the arrow (icon-html): a class, not a style attribute, which a
+// strict Content Security Policy blocks
+.bro-sort-header-arrow .bro-button-icon {
+  display: inline-block;
+
+  line-height: 1;
+  vertical-align: top;
+}
+
+.bro-sort-header-content {
+  @include sort-header-content();
+
+  @include table-width-transition();
+}
+
+.bro-sort-header-position-before {
+  flex-direction: row-reverse;
+
+  // The arrow before the title keeps them at the end of the header
+  margin-inline-start: auto;
+}
+
+@keyframes _bro-sort-header-recently-cleared-ascending {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  to {
+    opacity: 0;
+    transform: translateY(-25%);
+  }
+}
+
+.bro-sort-header-arrow {
+  $timing: 225ms cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+
+  overflow: visible;
+
+  width: 16px;
+  height: 16px;
+
+  opacity: 0;
+
+  transition: transform $timing, opacity $timing;
+
+  // A header without a title sorts nothing and is no control: no arrow
+  .bro-sort-header-container:not([role="button"]) & {
+    visibility: hidden;
+  }
+
+  .bro-sort-header:hover & {
+    opacity: 0.54;
+  }
+
+  .bro-sort-header .bro-sort-header-sorted & {
+    opacity: 1;
+  }
+
+  .bro-sort-header-descending & {
+    transform: rotate(180deg);
+  }
+
+  .bro-sort-header-recently-cleared-ascending & {
+    transform: translateY(-25%);
+
+    transition: none; // Without this the animation looks glitchy on Safari.
+    animation: _bro-sort-header-recently-cleared-ascending $timing forwards;
+  }
+
+  // Without motion the arrow takes its end state at once
+  @media (prefers-reduced-motion: reduce) {
+    .bro-sort-header & {
+      transition-duration: 0ms;
+      animation-duration: 0ms;
+    }
+  }
+
+  svg {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+
+    width: 16px;
+    height: 16px;
+    margin: -8px 0 0 -8px;
+
+    // Without this transform the element twitches at the end of the transition on Safari.
+    transform: translateZ(0);
+
+    fill: currentColor;
+  }
+
+  &,
+  [dir='rtl'] .bro-sort-header-position-before & {
+    margin: 0 0 0 6px;
+  }
+
+  .bro-sort-header-position-before &,
+  [dir='rtl'] & {
+    margin: 0 6px 0 0;
+  }
+}

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

@@ -0,0 +1,11 @@
+@mixin styles {
+  @at-root table-bro#{&} table {
+    tr.bro-header-row {
+      height: var(--bro-header-height);
+    }
+
+    tr.bro-row {
+      height: var(--bro-row-height);
+    }
+  }
+}

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

@@ -0,0 +1,13 @@
+@use "toolbar-search" as *;
+
+// The header of the filter drawer of the vanilla skins: its close button looks as the buttons of the toolbar search
+@mixin filter-drawer-header-content($nav-link-padding) {
+  .bro-filter-drawer-header .bro-toolbar-content {
+    @include toolbar-content-buttons($nav-link-padding);
+  }
+
+  // The title of the filter drawer keeps from the left edge the space that the close button keeps from the right one
+  .bro-filter-drawer-header .bro-filter-drawer-title {
+    padding-left: $nav-link-padding;
+  }
+}

package/styles/skin/vanilla-js/shared/table-bro/_paginator.scss

@@ -0,0 +1,5 @@
+@use "../../../shared/mixins/toolbar" as *;
+
+@mixin styles {
+  @include skin_paginator('.bro-paginator');
+}

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

@@ -0,0 +1,31 @@
+// The buttons of a toolbar content: the toolbar search and the header of the filter drawer (filter-drawer.scss) look the same
+@mixin toolbar-content-buttons($nav-link-padding) {
+  > bro-button {
+    display: flex;
+
+    a {
+      box-sizing: content-box;
+      width: 1rem;
+      padding: 0.75rem;
+    }
+
+    &:first-child a {
+      padding-left: $nav-link-padding;
+    }
+
+    // The icon of the last button keeps to the right edge, as the icon of the first one keeps to the left edge:
+    // a text icon of the nv skin is narrower than its box
+    &:last-child a {
+      padding-right: $nav-link-padding;
+
+      text-align: right;
+    }
+  }
+}
+
+// The buttons of the toolbar search
+@mixin toolbar-search-content($nav-link-padding) {
+  .bro-toolbar-search .bro-toolbar-content {
+    @include toolbar-content-buttons($nav-link-padding);
+  }
+}

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

@@ -0,0 +1,39 @@
+@use "../../../shared/variables" as *;
+@use "../../../shared/mixins/toolbar" as *;
+
+@mixin toolbar-links($toolbar-link-selector, $link-color) {
+  #{$toolbar-link-selector} {
+    color: $link-color;
+
+    &:hover,
+    &:focus {
+      color: $link-color;
+    }
+  }
+}
+
+@mixin toolbar-main-content($nav-link-padding) {
+  .bro-toolbar-content {
+    .bro-toolbar-title-space {
+      display: inline-block;
+
+      width: calc($nav-link-padding + 1rem + 0.75rem);
+    }
+  }
+
+  // The space between the title and the buttons, which keep their width: classes, not a style attribute, which a strict
+  // Content Security Policy blocks
+  .bro-toolbar-space {
+    flex: 1 1 auto;
+  }
+
+  .bro-toolbar-buttons {
+    flex-grow: 0;
+  }
+}
+
+@mixin styles {
+  #{$bro-skin} {
+    @include skin_toolbar('.bro-toolbar');
+  }
+}

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

@@ -0,0 +1,12 @@
+@use "../../../../shared/variables" as *;
+
+@mixin styles {
+  // The background of the paginator lies on this element, so it takes the corners of the paginator
+  .bro-paginator-outer-container {
+    border-radius: inherit;
+  }
+
+  .bro-paginator-inner-container {
+    height: $bro-paginator-height;
+  }
+}

package/styles/table-bro.native.scss

@@ -0,0 +1,43 @@
+// The native skin: @use prints its CSS. The variables and mixins of the skin without the CSS: table-bro.native.api
+@forward "./table-bro.native.api";
+@use "./skin/vanilla-js/native/variables" as *;
+@use "sass:meta";
+
+@use "./skin/vanilla-js/shared/skin" as shared-skin;
+@use "./skin/vanilla-js/native/themes" as native-themes;
+@use "./skin/vanilla-js/native/components/bootstrap-based/paginator" as native-bootstrap-based-paginator;
+@use "./skin/vanilla-js/native/table-bro/filter-drawer" as native-filter-drawer;
+@use "./skin/vanilla-js/native/table-bro/button" as native-button;
+@use "./skin/vanilla-js/native/table-bro/progress-bar" as native-progress-bar;
+@use "./skin/vanilla-js/native/table-bro/table" as native-table;
+@use "./skin/vanilla-js/native/table-bro/toolbar" as native-toolbar;
+@use "./skin/vanilla-js/native/table-bro/toolbar-search" as native-toolbar-search;
+
+
+/* Shared */
+@include shared-skin.styles('bro-nv-tags', 'mark') {
+  // The space after each tag of the skin
+  #{$bro-skin} bro-nv-tags > mark {
+    margin-right: 0.375rem;
+  }
+
+
+  /* Native components */
+  @include native-themes.styles;
+
+  @include native-bootstrap-based-paginator.styles;
+  @include meta.load-css("./skin/vanilla-js/native/components/bootstrap-based/toolbar");
+
+
+  /* Table-bro extensions */
+  #{$bro-skin} {
+    @include native-button.styles;
+    @include native-progress-bar.styles;
+    @include native-table.styles;
+    @include native-toolbar.styles;
+    @include native-toolbar-search.styles;
+
+    // The header of the filter drawer looks as the toolbar search, its rules follow it
+    @include native-filter-drawer.styles;
+  }
+}