@nanoporetech-digital/components 4.10.0 → 5.1.0

package/dist/collection/components/grid/grid.js

@@ -1,24 +1,95 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import { h, Host, } from '@stencil/core';
-import { debounce } from '../../utils/throttle';
-const STATEOPTS = ['col-span', 'col-start', 'row-span', 'row-start'];
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+    r = Reflect.decorate(decorators, target, key, desc);
+  else
+    for (var i = decorators.length - 1; i >= 0; i--)
+      if (d = decorators[i])
+        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+  if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
+    return Reflect.metadata(k, v);
+};
+import { h, Host } from '@stencil/core';
+import { ConstructibleStyle } from '../../utils/constructible-style';
 /**
- * A context-aware CSS grid implementation.
- * Uses it's own width to choose column number - not screen width.
+ * A lightweight, context-aware CSS grid implementation.
+ *
+ * - Define multiple grids templates at different breakpoints
+ * - Uses `@container` queries to select the correct grid depending on the current dimensions
+ * - Use `grid-states="..."` on direct descendants for `column` / `row` - `start` / `end`
+ * - SSR optimised
+
+ * @part grid - the main grid element.
+ * Use this to set css such as `justify-items|content` / `align-items|content` / `place-content`
+ * @part helper - a replica grid showed when `show-helper` is true
+ *
+ * @slot - default slot. Use this to place grid items. Use `grid-states="..."` attribute to opt-out of auto / sequential placement.
  */
 export class Grid {
   constructor() {
-    this.generalClasses = [''];
-    this.gridClass = null;
-    this.isSizes = [null];
-    this.ready = false;
-    this.isSmall = false;
-    this.isMedium = false;
-    this.isLarge = false;
-    this.isXL = false;
-    this.isXXL = false;
+    this.grids = [];
+    this.styles = () => {
+      const css = /* css */ `
+      ${this.grids
+        .map((bp) => /* css */ `
+          @container (min-width: ${typeof bp.breakpoint === 'number'
+        ? bp.breakpoint + 1 + 'px'
+        : bp.breakpoint}) {
+            .grid {
+              --current-grid-size: "grid size: ${bp.name}";
+              ${bp.template
+        ? `grid-template: ${bp.template};`
+        : `grid-template-columns: repeat(${bp.cols}, minmax(calc((100% / ${bp.cols}) - var(--grid-col-gap)), 1fr));`}
+            }
+            ${[...Array(bp.cols)]
+        .map((_, i) => {
+        const gItm = i + 1;
+        return /* css */ `
+                  .grid > [grid-states~="${bp.name}-col-start-${gItm}"],
+                  ::slotted([grid-states~="${bp.name}-col-start-${gItm}"]) {
+                    grid-column-start: ${gItm} !important;
+                  }
+                  .grid > [grid-states~="${bp.name}-col-span-${gItm}"],
+                  ::slotted([grid-states~="${bp.name}-col-span-${gItm}"]) {
+                    grid-column-end: span ${gItm} !important;
+                  }
+              `;
+      })
+        .join('')}
+              ${[...Array(24)]
+        .map((_, i) => {
+        const gItm = i + 1;
+        return /* css */ `
+                    .grid > [grid-states~="${bp.name}-row-start-${gItm}"],
+                    ::slotted([grid-states~="${bp.name}-row-start-${gItm}"]) {
+                      grid-row-start: ${gItm} !important;
+                    }
+                    .grid > [grid-states~="${bp.name}-row-span-${gItm}"],
+                    ::slotted([grid-states~="${bp.name}-row-span-${gItm}"]) {
+                      grid-row-end: span ${gItm} !important;
+                    }
+                `;
+      })
+        .join('')}
+            ${this.showHelper &&
+        /* css */ `
+              .grid--helper :nth-child(-n+${bp.cols}) {
+                display: block !important;
+              }
+            `}
+          }
+        `)
+        .join('')}
+    `;
+      return css;
+    };
+    this.cacheKey = undefined;
     this.sSize = 300;
     this.mSize = 550;
     this.lSize = 800;
@@ -28,156 +99,62 @@ export class Grid {
     this.lCols = undefined;
     this.xlCols = undefined;
     this.xxlCols = undefined;
+    this.sTpl = undefined;
+    this.mTpl = undefined;
+    this.lTpl = undefined;
+    this.xlTpl = undefined;
+    this.xxlTpl = undefined;
     this.showHelper = false;
-    this.contentPanel = false;
-    this.fullHeight = false;
-    this.stateChange = debounce(this.stateChange.bind(this), 100);
   }
-  propChanged() {
-    this.applySizeClasses();
-  }
-  applySizeClasses() {
-    const size = this.currentWidth;
-    this.isSmall = false;
-    this.isMedium = false;
-    this.isLarge = false;
-    this.isXL = false;
-    this.isXXL = false;
-    this.generalClasses = [];
-    this.gridClass = null;
-    this.isSizes = [null];
-    this.isSmall = true;
-    this.generalClasses.push('is-small');
+  constructSizeArray() {
+    this.grids = [];
     if (this.sCols)
-      this.gridClass = `nano-grid-${this.sCols}`;
-    this.isSizes.push({ size: 's', active: true });
-    if (size > this.sSize) {
-      this.isMedium = true;
-      this.generalClasses.push('is-medium');
-      if (this.mCols)
-        this.gridClass = `nano-grid-${this.mCols}`;
-      this.isSizes.push({ size: 'm', active: true });
-    }
-    if (size > this.mSize) {
-      this.isLarge = true;
-      this.generalClasses.push('is-large');
-      if (this.lCols)
-        this.gridClass = `nano-grid-${this.lCols}`;
-      this.isSizes.push({ size: 'l', active: true });
-    }
-    if (size > this.lSize) {
-      this.isXL = true;
-      this.generalClasses.push('is-xl');
-      if (this.xlCols)
-        this.gridClass = `nano-grid-${this.xlCols}`;
-      this.isSizes.push({ size: 'xl', active: true });
-    }
-    if (size > this.xlSize) {
-      this.isXXL = true;
-      this.generalClasses.push('is-xxl');
-      if (this.xxlCols)
-        this.gridClass = `nano-grid-${this.xxlCols}`;
-      this.isSizes.push({ size: 'xxl', active: true });
-    }
-    this.el.style.setProperty('--current-grid-size', `'grid size: ${this.isSizes.slice().pop().size}'`);
-    this.applyChildrenClasses();
-    setTimeout(() => (this.ready = true), 0);
-  }
-  stateChange() {
-    this.nanoBpChange.emit(this.generalClasses);
-  }
-  applyChildrenClasses() {
-    const gridItems = this.el.querySelectorAll('nano-grid-item');
-    if (gridItems.length) {
-      gridItems.forEach((gridItem) => {
-        gridItem.changeBP(this.isSizes);
+      this.grids.push({
+        cols: this.sCols,
+        breakpoint: 0,
+        name: 's',
+        template: this.sTpl,
       });
-      return;
-    }
-    // this logic has been put into grid-item. Keep here for legacy for now
-    let stateArr = [''];
-    let itemState = '';
-    let found;
-    let classes;
-    const ctx = this.el;
-    // item states come in 4 possible flavours at every breakpoint. E.g.
-    // xl-col-span-2
-    // xl-col-start-2
-    // xl-row-span-2
-    // xl-row-start-2
-    // loop through all grid items with states.
-    [].map.call(ctx.children, (gItem) => {
-      if (!gItem.hasAttribute('grid-states'))
-        return;
-      // gridItems.forEach(gItem => {
-      // clear all previous grid state classnames
-      classes = gItem.className
-        .split(' ')
-        .filter((c) => !c.startsWith('nano-grid-'));
-      gItem.className = classes.join(' ').trim();
-      // get all potential states this element can have
-      const itemStates = gItem.getAttribute('grid-states').split(' ');
-      // loop through all potential state options: col & row span & start
-      STATEOPTS.forEach((stateOpt) => {
-        // reset found flag
-        found = false;
-        // loop through all the current valid breakpoints / sizes backwards because
-        // we only care about the item's state at the largest current breakpoint.
-        this.isSizes
-          .slice()
-          .reverse()
-          .forEach(function (size) {
-          if (found || !size)
-            return;
-          found = itemStates.find((state) => state.indexOf(`${size.size}-${stateOpt}`) === 0);
-          // found a state at this current size. apply class.
-          if (found) {
-            // clear previous grid state classname
-            classes = gItem.className
-              .split(' ')
-              .filter((c) => !c.includes('nano-grid-${stateOpt}'));
-            gItem.className = classes.join(' ').trim();
-            stateArr = found.split('-');
-            // remove the size of the state
-            stateArr.shift();
-            itemState = stateArr.join('-');
-            // add new class
-            gItem.classList.add(`nano-grid-${itemState}`);
-          }
-        });
+    if (this.mCols)
+      this.grids.push({
+        cols: this.mCols,
+        breakpoint: this.sSize,
+        name: 'm',
+        template: this.mTpl,
+      });
+    if (this.lSize)
+      this.grids.push({
+        cols: this.lCols,
+        breakpoint: this.mSize,
+        name: 'l',
+        template: this.lTpl,
       });
-    });
+    if (this.xlCols)
+      this.grids.push({
+        cols: this.xlCols,
+        breakpoint: this.lSize,
+        name: 'xl',
+        template: this.xlTpl,
+      });
+    if (this.xxlCols)
+      this.grids.push({
+        cols: this.xxlCols,
+        breakpoint: this.xlSize,
+        name: 'xxl',
+        template: this.xxlTpl,
+      });
+    this.cacheKey =
+      this.grids
+        .map((bp) => `${bp.cols}-${bp.breakpoint}-${bp.template || ''}`)
+        .join('') +
+        '-helper-' +
+        this.showHelper;
   }
   componentWillLoad() {
-    const ctx = this.el;
-    [].map.call(ctx.children, (ele) => ele.classList.add('nano-griditem'));
-  }
-  componentDidLoad() {
-    if (!window['ResizeObserver'])
-      return;
-    this.ro = new ResizeObserver((entries) => {
-      for (const entry of entries) {
-        if (!entry.contentRect.width)
-          return;
-        this.currentWidth = entry.contentRect.width;
-        this.applySizeClasses();
-      }
-    });
-    this.ro.observe(this.el);
-  }
-  disconnectedCallback() {
-    if (this.ro)
-      this.ro.disconnect();
+    this.constructSizeArray();
   }
   render() {
-    return (h(Host, { class: {
-        [this.generalClasses.join(' ')]: true,
-        'has-grid': !!this.gridClass,
-        ready: this.ready,
-        [this.gridClass]: true,
-      } }, h("div", { class: {
-        grid: true,
-      } }, h("slot", null))));
+    return (h(Host, null, h("div", { part: "grid", class: "grid" }, h("slot", null)), this.showHelper && (h("div", { class: "grid grid--helper", part: "helper" }, [...Array(24)].map(() => (h("div", { class: "grid__helper-item" })))))));
   }
   static get is() { return "nano-grid"; }
   static get encapsulation() { return "shadow"; }
@@ -194,18 +171,18 @@ export class Grid {
   static get properties() {
     return {
       "sSize": {
-        "type": "number",
+        "type": "any",
         "mutable": false,
         "complexType": {
-          "original": "number",
-          "resolved": "number",
+          "original": "number | string",
+          "resolved": "number | string",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "the component's small breakpoint. Note - all breakpoints are based on component width, not screen width."
+          "text": "the component's small breakpoint. Note - all breakpoints are based on component width, not screen width.\nWill default to `px` if no unit supplied e.g. `20rem`"
         },
         "getter": false,
         "setter": false,
@@ -214,18 +191,18 @@ export class Grid {
         "defaultValue": "300"
       },
       "mSize": {
-        "type": "number",
+        "type": "any",
         "mutable": false,
         "complexType": {
-          "original": "number",
-          "resolved": "number",
+          "original": "number | string",
+          "resolved": "number | string",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "the component's medium breakpoint. Note - all breakpoints are based on component width, not screen width."
+          "text": "the component's medium breakpoint. Note - all breakpoints are based on component width, not screen width.\nWill default to `px` if no unit supplied e.g. `20rem`"
         },
         "getter": false,
         "setter": false,
@@ -234,18 +211,18 @@ export class Grid {
         "defaultValue": "550"
       },
       "lSize": {
-        "type": "number",
+        "type": "any",
         "mutable": false,
         "complexType": {
-          "original": "number",
-          "resolved": "number",
+          "original": "number | string",
+          "resolved": "number | string",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "the component's large breakpoint. Note - all breakpoints are based on component width, not screen width."
+          "text": "the component's large breakpoint. Note - all breakpoints are based on component width, not screen width.\nWill default to `px` if no unit supplied e.g. `20rem`"
         },
         "getter": false,
         "setter": false,
@@ -254,18 +231,18 @@ export class Grid {
         "defaultValue": "800"
       },
       "xlSize": {
-        "type": "number",
+        "type": "any",
         "mutable": false,
         "complexType": {
-          "original": "number",
-          "resolved": "number",
+          "original": "number | string",
+          "resolved": "number | string",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "the component's xl breakpoint. Note - all breakpoints are based on component width, not screen width."
+          "text": "the component's xl breakpoint. Note - all breakpoints are based on component width, not screen width.\nWill default to `px` if no unit supplied e.g. `20rem`"
         },
         "getter": false,
         "setter": false,
@@ -368,47 +345,102 @@ export class Grid {
         "attribute": "xxl-cols",
         "reflect": false
       },
-      "showHelper": {
-        "type": "boolean",
+      "sTpl": {
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
+          "original": "string",
+          "resolved": "string",
           "references": {}
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
-          "text": "shows a grid helper to visualise where columns are"
+          "text": "Optional small `grid-template`. *Note* - you must set `sCols` for this to take affect"
         },
         "getter": false,
         "setter": false,
-        "attribute": "show-helper",
-        "reflect": true,
-        "defaultValue": "false"
+        "attribute": "s-tpl",
+        "reflect": false
       },
-      "contentPanel": {
-        "type": "boolean",
+      "mTpl": {
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
+          "original": "string",
+          "resolved": "string",
           "references": {}
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
-          "text": "shortcut for a traditional website like grid (requires more than one row). The second row will auto expand to fill the grid height. The first row and > 2nd row will be the size of their content. e.g. header, body and footer."
+          "text": "Optional medium `grid-template`. *Note* - you must set `mCols` for this to take affect"
         },
         "getter": false,
         "setter": false,
-        "attribute": "content-panel",
-        "reflect": true,
-        "defaultValue": "false"
+        "attribute": "m-tpl",
+        "reflect": false
       },
-      "fullHeight": {
+      "lTpl": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Optional large `grid-template`. *Note* - you must set `lCols` for this to take affect"
+        },
+        "getter": false,
+        "setter": false,
+        "attribute": "l-tpl",
+        "reflect": false
+      },
+      "xlTpl": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Optional xl `grid-template`. *Note* - you must set `xlCols` for this to take affect"
+        },
+        "getter": false,
+        "setter": false,
+        "attribute": "xl-tpl",
+        "reflect": false
+      },
+      "xxlTpl": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Optional xxl `grid-template`. *Note* - you must set `xxlCols` for this to take affect"
+        },
+        "getter": false,
+        "setter": false,
+        "attribute": "xxl-tpl",
+        "reflect": false
+      },
+      "showHelper": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -420,11 +452,11 @@ export class Grid {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Helper to make grid items expand to full height in IE11"
+          "text": "shows a grid helper to visualise where columns are"
         },
         "getter": false,
         "setter": false,
-        "attribute": "full-height",
+        "attribute": "show-helper",
         "reflect": true,
         "defaultValue": "false"
       }
@@ -432,77 +464,60 @@ export class Grid {
   }
   static get states() {
     return {
-      "ready": {},
-      "isSmall": {},
-      "isMedium": {},
-      "isLarge": {},
-      "isXL": {},
-      "isXXL": {}
+      "cacheKey": {}
     };
   }
-  static get events() {
-    return [{
-        "method": "nanoBpChange",
-        "name": "nanoBpChange",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the `nano-grid` changes breakpoint"
-        },
-        "complexType": {
-          "original": "string[]",
-          "resolved": "string[]",
-          "references": {}
-        }
-      }];
-  }
-  static get elementRef() { return "el"; }
   static get watchers() {
     return [{
+        "propName": "sTpl",
+        "methodName": "constructSizeArray"
+      }, {
+        "propName": "mTpl",
+        "methodName": "constructSizeArray"
+      }, {
+        "propName": "lTpl",
+        "methodName": "constructSizeArray"
+      }, {
+        "propName": "xlTpl",
+        "methodName": "constructSizeArray"
+      }, {
+        "propName": "xxlTpl",
+        "methodName": "constructSizeArray"
+      }, {
         "propName": "sSize",
-        "methodName": "propChanged"
+        "methodName": "constructSizeArray"
       }, {
         "propName": "mSize",
-        "methodName": "propChanged"
+        "methodName": "constructSizeArray"
       }, {
         "propName": "lSize",
-        "methodName": "propChanged"
+        "methodName": "constructSizeArray"
       }, {
         "propName": "xlSize",
-        "methodName": "propChanged"
+        "methodName": "constructSizeArray"
       }, {
         "propName": "sCols",
-        "methodName": "propChanged"
+        "methodName": "constructSizeArray"
       }, {
         "propName": "mCols",
-        "methodName": "propChanged"
+        "methodName": "constructSizeArray"
       }, {
         "propName": "lCols",
-        "methodName": "propChanged"
+        "methodName": "constructSizeArray"
       }, {
         "propName": "xlCols",
-        "methodName": "propChanged"
+        "methodName": "constructSizeArray"
       }, {
         "propName": "xxlCols",
-        "methodName": "propChanged"
-      }, {
-        "propName": "isSmall",
-        "methodName": "stateChange"
-      }, {
-        "propName": "isMedium",
-        "methodName": "stateChange"
-      }, {
-        "propName": "isLarge",
-        "methodName": "stateChange"
-      }, {
-        "propName": "isXL",
-        "methodName": "stateChange"
+        "methodName": "constructSizeArray"
       }, {
-        "propName": "isXXL",
-        "methodName": "stateChange"
+        "propName": "showHelper",
+        "methodName": "constructSizeArray"
       }];
   }
 }
+__decorate([
+  ConstructibleStyle({ cacheKeyProperty: 'cacheKey' }),
+  __metadata("design:type", Object)
+], Grid.prototype, "styles", void 0);
 //# sourceMappingURL=grid.js.map