@table-bro/native 0.0.0-stage → 1.1.0

package/package.json

@@ -1,6 +1,64 @@
 {
   "name": "@table-bro/native",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "1.1.0",
+  "description": "Pixel-perfect Material data tables for Angular, and more. A Web Components table engine on top of existing UI components.",
+  "keywords": [
+    "table",
+    "data-table",
+    "datatable",
+    "data-grid",
+    "web-components",
+    "native"
+  ],
+  "author": "table-bro",
+  "homepage": "https://table-bro.com",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/table-bro/table-bro.git",
+    "directory": "packages/skins/native"
+  },
+  "bugs": {
+    "url": "https://github.com/table-bro/table-bro/issues"
+  },
+  "license": "MIT",
+  "type": "module",
+  "main": "dist/table-bro.native.esm.js",
+  "module": "dist/table-bro.native.esm.js",
+  "types": "dist/table-bro.native.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/table-bro.native.d.ts",
+      "import": "./dist/table-bro.native.esm.js",
+      "default": "./dist/table-bro.native.esm.js"
+    },
+    "./dist/*.css": "./dist/*.css",
+    "./styles/*": "./styles/*"
+  },
+  "unpkg": "dist/table-bro.native.umd.js",
+  "jsdelivr": "dist/table-bro.native.umd.js",
+  "sideEffects": [
+    "./js/index.ts",
+    "./js/table-bro.native.ts",
+    "./dist/table-bro.native.esm.js",
+    "./dist/table-bro.native.umd.js",
+    "./dist/*.css"
+  ],
+  "files": [
+    "dist/",
+    "styles/",
+    "THIRD_PARTY_NOTICES.md"
+  ],
+  "scripts": {
+    "build": "tsdown && node ../../../scripts/build-css.mjs . table-bro.native",
+    "build:js": "tsdown",
+    "build:css": "node ../../../scripts/build-css.mjs . table-bro.native",
+    "watch": "tsdown --watch"
+  },
+  "peerDependencies": {
+    "@table-bro/core": "^1.1.0"
+  },
+  "devDependencies": {
+    "tsdown": "^0.23.0",
+    "typescript": "^5.8.3"
+  }
+}

package/styles/_table-bro.api.scss

@@ -0,0 +1,3 @@
+// The SCSS API of the core without its CSS: the mixins for custom table styles, the same for every skin.
+// A stylesheet that needs only them, such as the styles of a page or of a component, uses this module: @use "table-bro.api" as *.
+@forward "./mixins/text-ellipsis" show bro-text-ellipsis-width;

package/styles/_table-bro.native.api.scss

@@ -0,0 +1,5 @@
+// The SCSS API of the native skin without its CSS: the variables of the skin and the mixins of table-bro.api.
+// A stylesheet that needs only them, such as the styles of a component, uses this module instead of table-bro.native,
+// whose @use prints the CSS of the skin. It takes the same configuration: @use "table-bro.native.api" with (...).
+@forward "./skin/vanilla-js/native/variables";
+@forward "./table-bro.api";

package/styles/mixins/_text-ellipsis.scss

@@ -0,0 +1,5 @@
+@mixin bro-text-ellipsis-width($column-classname, $width) {
+  #{$column-classname} .bro-cell_component {
+    width: $width;
+  }
+}

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,87 @@
+@use "../variables" 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 {
+      position: absolute;
+
+      overflow: hidden;
+
+      width: 1px;
+      height: 1px;
+
+      white-space: nowrap;
+
+      clip-path: inset(50%);
+    }
+  }
+}
+
+// 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;
+    }
+  }
+}