@teipublisher/pb-components 3.0.9 → 3.1.0

package/dist/pb-elements.json

@@ -10909,6 +10909,12 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "pagination-top",
+          "description": "If specified, render the pagination controls above the table instead of below.",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "per-page",
           "type": "number",
@@ -10983,6 +10989,13 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "paginationTop",
+          "attribute": "pagination-top",
+          "description": "If specified, render the pagination controls above the table instead of below.",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "perPage",
           "attribute": "per-page",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teipublisher/pb-components",
-  "version": "3.0.9",
+  "version": "3.1.0",
   "description": "Collection of webcomponents underlying TEI Publisher",
   "repository": "https://github.com/eeditiones/tei-publisher-components.git",
   "main": "index.html",

package/pb-elements.json

@@ -10909,6 +10909,12 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "pagination-top",
+          "description": "If specified, render the pagination controls above the table instead of below.",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "per-page",
           "type": "number",
@@ -10983,6 +10989,13 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "paginationTop",
+          "attribute": "pagination-top",
+          "description": "If specified, render the pagination controls above the table instead of below.",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "perPage",
           "attribute": "per-page",

package/src/pb-page.js

@@ -394,6 +394,10 @@ export class PbPage extends pbMixin(LitElement) {
     this._i18nInstance = i18next.createInstance();
     this._i18nInstance.use(LanguageDetector).use(Backend);
     this._i18nInstance.init(options).then(t => {
+      if (!this._i18nInstance) {
+        // We got deconstructed already
+        return;
+      }
       initTranslation(t);
       // initialized and ready to go!
       this._updateI18n(t);

package/src/pb-table-column.js

@@ -1,6 +1,5 @@
 import { LitElement } from 'lit-element';
 import { html } from 'gridjs';
-import './pb-popover.js';
 
 /**
  * Defines a column within `pb-table-grid`.

package/src/pb-table-grid.js

@@ -1,14 +1,15 @@
 import { LitElement, html, css } from 'lit-element';
-import { Grid } from 'gridjs';
+import { Grid, PluginPosition } from 'gridjs';
 import { pbMixin, waitOnce } from './pb-mixin.js';
 import { resolveURL } from './utils.js';
-import { loadStylesheets, importStyles } from './theming.js';
+import { importStyles, loadStylesheets, themableMixin } from './theming.js';
 import '@polymer/paper-input/paper-input';
 import '@polymer/iron-icons';
 import '@polymer/iron-form';
 import '@polymer/paper-icon-button';
 import './pb-table-column.js';
 import { registry } from './urls.js';
+import { translate } from './pb-i18n.js';
 
 /**
  * A table grid based on [gridjs](https://gridjs.io/), which loads its data from a server endpoint
@@ -39,7 +40,7 @@ import { registry } from './urls.js';
  * <pb-table-column label="Died" property="death"></pb-table-column>
  * ```
  */
-export class PbTableGrid extends pbMixin(LitElement) {
+export class PbTableGrid extends themableMixin(pbMixin(LitElement)) {
   static get properties() {
     return {
       /**
@@ -78,6 +79,13 @@ export class PbTableGrid extends pbMixin(LitElement) {
       search: {
         type: Boolean,
       },
+      /**
+       * If specified, render the pagination controls above the table instead of below.
+       */
+      paginationTop: {
+        type: Boolean,
+        attribute: 'pagination-top',
+      },
       _params: {
         type: Object,
       },
@@ -91,6 +99,7 @@ export class PbTableGrid extends pbMixin(LitElement) {
     this._params = {};
     this.resizable = false;
     this.search = false;
+    this.paginationTop = false;
     this.perPage = 10;
     this.height = null;
     this.fixedHeader = false;
@@ -130,11 +139,15 @@ export class PbTableGrid extends pbMixin(LitElement) {
     }
 
     const gridjsTheme = await loadStylesheets([`${resolveURL(this.cssPath)}/mermaid.min.css`]);
-    const theme = importStyles(this);
     const sheets = [...this.shadowRoot.adoptedStyleSheets, gridjsTheme];
+    // Manually import styles for backwards compatibility with pb-components < 3 importStyles
+    // extracts any relevant styling rules to this element and wraps them in `:host`. Which you can
+    // (and should) do manually anyway
+    const theme = importStyles(this);
     if (theme) {
       sheets.push(theme);
     }
+
     this.shadowRoot.adoptedStyleSheets = sheets;
   }
 
@@ -206,6 +219,9 @@ export class PbTableGrid extends pbMixin(LitElement) {
       };
 
       this.grid = new Grid(config);
+      if (this.paginationTop) {
+        this.grid.plugin.get('pagination').position = PluginPosition.Header;
+      }
       this.grid.on('load', () => {
         this.emitTo('pb-results-received', {
           params: this._params,
@@ -240,9 +256,9 @@ export class PbTableGrid extends pbMixin(LitElement) {
                 <paper-input
                   id="search"
                   name="search"
-                  label="Search"
+                  label="${translate('search.search')}"
                   value="${this._params.search || ''}"
-                  @keyup="${e => (e.keyCode == 13 ? this._submit() : null)}"
+                  @keyup="${e => (e.keyCode === 13 ? this._submit() : null)}"
                 >
                   <paper-icon-button
                     icon="search"