@table-bro/native 0.0.0-stage → 1.1.0

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

@@ -0,0 +1,134 @@
+@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
+ */
+
+.bro-sort-header-container {
+  display: flex;
+
+  align-items: center;
+
+  // Needs to be reset since we don't want an outline around the inner
+  // div which is focusable. We have our own alternate focus styling.
+  outline: 0;
+
+  letter-spacing: normal;
+
+  cursor: pointer;
+
+  // The focus from the keyboard shows a ring in the color of the title, inside the header: the cell component clips
+  // what is outside it. A click shows no ring
+  &:focus-visible {
+    outline: 2px solid currentColor;
+
+    outline-offset: -2px;
+  }
+}
+
+// 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;
+}
+
+@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;
+  }
+}