@nanoporetech-digital/components 4.9.4 → 5.0.0

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

@@ -2,152 +2,27 @@
  * Web Components for Nanopore digital Web Apps
  */
 import { h } from '@stencil/core';
-const STATEOPTS = ['col-span', 'col-start', 'row-span', 'row-start'];
+// import type { GridSizes } from '../../interface';
+// const STATEOPTS = ['col-span', 'col-start', 'row-span', 'row-start'];
 /**
+ * @deprecated - you can now use `grid-states="..."`
+ * on any direct `nano-grid` descendent without limitation rendering `nano-grid-item` obsolete.
+ *
  * Grid items to be used with [grid](/story/nano-components-grid) elements
  */
 export class GridItem {
-  constructor() {
-    this.currGridSizes = [null];
-    this.gridStates = '';
-  }
-  updateGridClasses() {
-    this.applyChildrenClasses();
-  }
   /**
-   * Called by parent grid to trigger new classes
-   * @internal
+   * How to position this item within it's parent grid at different break points. Examples:
+   * xl-col-span-2
+   * l-col-start-2
+   * xxl-row-span-2
+   * m-row-start-2
    */
-  async changeBP(newGridSizes) {
-    if (this.currGridSizes === newGridSizes)
-      return;
-    this.currGridSizes = newGridSizes;
-    if (!this.gridStates.length)
-      return;
-    this.applyChildrenClasses();
-  }
-  applyChildrenClasses() {
-    let stateArr = [''];
-    let itemState = '';
-    let found;
-    let classes;
-    // 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
-    // clear all previous grid state classnames
-    classes = this.el.className
-      .split(' ')
-      .filter((c) => !c.startsWith('nano-grid-'));
-    this.el.className = classes.join(' ').trim();
-    // get all potential states this element can have
-    const itemStates = this.gridStates.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.currGridSizes
-        .slice()
-        .reverse()
-        .forEach((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 = this.el.className
-            .split(' ')
-            .filter((c) => !c.includes('nano-grid-${stateOpt}'));
-          this.el.className = classes.join(' ').trim();
-          stateArr = found.split('-');
-          // remove the size of the state
-          stateArr.shift();
-          itemState = stateArr.join('-');
-          // add new class
-          this.el.classList.add(`nano-grid-${itemState}`);
-        }
-      });
-    });
-  }
   render() {
     return h("slot", null);
   }
   static get is() { return "nano-grid-item"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["grid-item.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["grid-item.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "gridStates": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "How to position this item within it's parent grid at different break points. Examples:\nxl-col-span-2\nl-col-start-2\nxxl-row-span-2\nm-row-start-2"
-        },
-        "getter": false,
-        "setter": false,
-        "attribute": "grid-states",
-        "reflect": false,
-        "defaultValue": "''"
-      }
-    };
-  }
-  static get methods() {
-    return {
-      "changeBP": {
-        "complexType": {
-          "signature": "(newGridSizes: GridSizes[]) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global"
-            },
-            "GridSizes": {
-              "location": "import",
-              "path": "../../interface"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Called by parent grid to trigger new classes",
-          "tags": [{
-              "name": "internal",
-              "text": undefined
-            }]
-        }
-      }
-    };
-  }
-  static get elementRef() { return "el"; }
-  static get watchers() {
-    return [{
-        "propName": "gridStates",
-        "methodName": "updateGridClasses"
-      }];
-  }
+  static get styles() { return ":host { display: inline-block; }"; }
 }
 //# sourceMappingURL=grid-item.js.map

package/dist/collection/components/grid/grid-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"grid-item.js","sourceRoot":"","sources":["../../../src/components/grid/grid-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Element, Method, Watch } from '@stencil/core';\nimport type { GridSizes } from '../../interface';\n\nconst STATEOPTS = ['col-span', 'col-start', 'row-span', 'row-start'];\n\n/**\n * Grid items to be used with [grid](/story/nano-components-grid) elements\n */\n@Component({\n  tag: 'nano-grid-item',\n  styleUrl: 'grid-item.scss',\n  shadow: true,\n})\nexport class GridItem {\n  private currGridSizes: GridSizes[] = [null];\n\n  @Element() private el: HTMLNanoGridItemElement;\n  /**\n   * How to position this item within it's parent grid at different break points. Examples:\n   * xl-col-span-2\n   * l-col-start-2\n   * xxl-row-span-2\n   * m-row-start-2\n   */\n  @Prop() gridStates: string = '';\n\n  @Watch('gridStates')\n  updateGridClasses() {\n    this.applyChildrenClasses();\n  }\n\n  /**\n   * Called by parent grid to trigger new classes\n   * @internal\n   */\n  @Method()\n  async changeBP(newGridSizes: GridSizes[]) {\n    if (this.currGridSizes === newGridSizes) return;\n    this.currGridSizes = newGridSizes;\n\n    if (!this.gridStates.length) return;\n    this.applyChildrenClasses();\n  }\n\n  private applyChildrenClasses() {\n    let stateArr: Array<string> = [''];\n    let itemState: string = '';\n    let found: any;\n    let classes: Array<string>;\n\n    // item states come in 4 possible flavours at every breakpoint. E.g.\n    // xl-col-span-2\n    // xl-col-start-2\n    // xl-row-span-2\n    // xl-row-start-2\n\n    // clear all previous grid state classnames\n    classes = this.el.className\n      .split(' ')\n      .filter((c) => !c.startsWith('nano-grid-'));\n    this.el.className = classes.join(' ').trim();\n\n    // get all potential states this element can have\n    const itemStates = this.gridStates.split(' ');\n\n    // loop through all potential state options: col & row span & start\n    STATEOPTS.forEach((stateOpt) => {\n      // reset found flag\n      found = false;\n\n      // loop through all the current valid breakpoints / sizes backwards because\n      // we only care about the item's state at the largest current breakpoint.\n      this.currGridSizes\n        .slice()\n        .reverse()\n        .forEach((size) => {\n          if (found || !size) return;\n          found = itemStates.find(\n            (state) => state.indexOf(`${size.size}-${stateOpt}`) === 0\n          );\n\n          // found a state at this current size. apply class.\n          if (found) {\n            // clear previous grid state classname\n            classes = this.el.className\n              .split(' ')\n              .filter((c) => !c.includes('nano-grid-${stateOpt}'));\n            this.el.className = classes.join(' ').trim();\n\n            stateArr = found.split('-');\n\n            // remove the size of the state\n            stateArr.shift();\n            itemState = stateArr.join('-');\n\n            // add new class\n            this.el.classList.add(`nano-grid-${itemState}`);\n          }\n        });\n    });\n  }\n\n  render() {\n    return <slot />;\n  }\n}\n"]}
+{"version":3,"file":"grid-item.js","sourceRoot":"","sources":["../../../src/components/grid/grid-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAC7C,oDAAoD;AAEpD,wEAAwE;AAExE;;;;;GAKG;AAMH,MAAM,OAAO,QAAQ;EACnB;;;;;;KAMG;EAEH,MAAM;IACJ,OAAO,eAAQ,CAAC;EAClB,CAAC;;;;CACF","sourcesContent":["import { Component, h } from '@stencil/core';\n// import type { GridSizes } from '../../interface';\n\n// const STATEOPTS = ['col-span', 'col-start', 'row-span', 'row-start'];\n\n/**\n * @deprecated - you can now use `grid-states=\"...\"`\n * on any direct `nano-grid` descendent without limitation rendering `nano-grid-item` obsolete.\n *\n * Grid items to be used with [grid](/story/nano-components-grid) elements\n */\n@Component({\n  tag: 'nano-grid-item',\n  styles: /* css */ `:host { display: inline-block; }`,\n  shadow: true,\n})\nexport class GridItem {\n  /**\n   * How to position this item within it's parent grid at different break points. Examples:\n   * xl-col-span-2\n   * l-col-start-2\n   * xxl-row-span-2\n   * m-row-start-2\n   */\n\n  render() {\n    return <slot />;\n  }\n}\n"]}

package/dist/collection/components/grid/grid.css

@@ -17,173 +17,26 @@
   */
   --grid-col-gap: var(--nano-spacing-medium, 16px);
   --grid-row-gap: var(--nano-spacing-medium, 16px);
-  --current-grid-size: "'grid size: sm'";
+  --current-grid-size: "grid size: s";
+  container-type: inline-size;
   display: block;
-  opacity: 0;
-  transition: 0.2s ease opacity;
-  max-width: 100%;
 }
 :host .grid {
-  /* autoprefixer: ignore next */
   display: grid;
-  /* autoprefixer: ignore next */
-  grid-gap: var(--grid-row-gap) var(--grid-col-gap);
+  gap: var(--grid-row-gap) var(--grid-col-gap);
   block-size: inherit;
   min-block-size: inherit;
 }
 
-:host(.ready) {
-  opacity: 1;
-}
-
-:host(.has-grid) .grid {
-  display: grid;
-}
-:host(.has-grid) .grid ::slotted(.nano-grid-col-start-1) {
-  grid-column-start: 1 !important;
-}
-:host(.has-grid) .grid ::slotted(.nano-grid-row-start-1) {
-  grid-row-start: 1 !important;
-}
-:host(.has-grid) .grid ::slotted(.nano-grid-col-span-1) {
-  grid-column-end: span 1 !important;
-}
-:host(.has-grid) .grid ::slotted(.nano-grid-row-span-1) {
-  grid-row-end: span 1 !important;
-}
-:host(.has-grid) .grid ::slotted(.nano-grid-col-start-2) {
-  grid-column-start: 2 !important;
-}
-:host(.has-grid) .grid ::slotted(.nano-grid-row-start-2) {
-  grid-row-start: 2 !important;
-}
-:host(.has-grid) .grid ::slotted(.nano-grid-col-span-2) {
-  grid-column-end: span 2 !important;
-}
-:host(.has-grid) .grid ::slotted(.nano-grid-row-span-2) {
-  grid-row-end: span 2 !important;
-}
-:host(.has-grid) .grid ::slotted(.nano-grid-col-start-3) {
-  grid-column-start: 3 !important;
-}
-:host(.has-grid) .grid ::slotted(.nano-grid-row-start-3) {
-  grid-row-start: 3 !important;
-}
-:host(.has-grid) .grid ::slotted(.nano-grid-col-span-3) {
-  grid-column-end: span 3 !important;
-}
-:host(.has-grid) .grid ::slotted(.nano-grid-row-span-3) {
-  grid-row-end: span 3 !important;
-}
-:host(.has-grid) .grid ::slotted(.nano-grid-col-start-4) {
-  grid-column-start: 4 !important;
-}
-:host(.has-grid) .grid ::slotted(.nano-grid-row-start-4) {
-  grid-row-start: 4 !important;
-}
-:host(.has-grid) .grid ::slotted(.nano-grid-col-span-4) {
-  grid-column-end: span 4 !important;
-}
-:host(.has-grid) .grid ::slotted(.nano-grid-row-span-4) {
-  grid-row-end: span 4 !important;
-}
-:host(.has-grid) .grid ::slotted(.nano-grid-col-start-5) {
-  grid-column-start: 5 !important;
-}
-:host(.has-grid) .grid ::slotted(.nano-grid-row-start-5) {
-  grid-row-start: 5 !important;
-}
-:host(.has-grid) .grid ::slotted(.nano-grid-col-span-5) {
-  grid-column-end: span 5 !important;
-}
-:host(.has-grid) .grid ::slotted(.nano-grid-row-span-5) {
-  grid-row-end: span 5 !important;
-}
-:host(.has-grid) .grid ::slotted(.nano-grid-col-start-6) {
-  grid-column-start: 6 !important;
-}
-:host(.has-grid) .grid ::slotted(.nano-grid-row-start-6) {
-  grid-row-start: 6 !important;
-}
-:host(.has-grid) .grid ::slotted(.nano-grid-col-span-6) {
-  grid-column-end: span 6 !important;
-}
-:host(.has-grid) .grid ::slotted(.nano-grid-row-span-6) {
-  grid-row-end: span 6 !important;
-}
-:host(.has-grid) .grid ::slotted(.nano-grid-col-start-7) {
-  grid-column-start: 7 !important;
-}
-:host(.has-grid) .grid ::slotted(.nano-grid-row-start-7) {
-  grid-row-start: 7 !important;
-}
-:host(.has-grid) .grid ::slotted(.nano-grid-col-span-7) {
-  grid-column-end: span 7 !important;
-}
-:host(.has-grid) .grid ::slotted(.nano-grid-row-span-7) {
-  grid-row-end: span 7 !important;
-}
-:host(.has-grid) .grid ::slotted(.nano-grid-col-start-8) {
-  grid-column-start: 8 !important;
-}
-:host(.has-grid) .grid ::slotted(.nano-grid-row-start-8) {
-  grid-row-start: 8 !important;
-}
-:host(.has-grid) .grid ::slotted(.nano-grid-col-span-8) {
-  grid-column-end: span 8 !important;
-}
-:host(.has-grid) .grid ::slotted(.nano-grid-row-span-8) {
-  grid-row-end: span 8 !important;
-}
-:host(.has-grid) .grid ::slotted(.nano-grid-col-start-9) {
-  grid-column-start: 9 !important;
-}
-:host(.has-grid) .grid ::slotted(.nano-grid-row-start-9) {
-  grid-row-start: 9 !important;
-}
-:host(.has-grid) .grid ::slotted(.nano-grid-col-span-9) {
-  grid-column-end: span 9 !important;
-}
-:host(.has-grid) .grid ::slotted(.nano-grid-row-span-9) {
-  grid-row-end: span 9 !important;
-}
-:host(.has-grid) .grid ::slotted(.nano-grid-col-start-10) {
-  grid-column-start: 10 !important;
-}
-:host(.has-grid) .grid ::slotted(.nano-grid-row-start-10) {
-  grid-row-start: 10 !important;
-}
-:host(.has-grid) .grid ::slotted(.nano-grid-col-span-10) {
-  grid-column-end: span 10 !important;
-}
-:host(.has-grid) .grid ::slotted(.nano-grid-row-span-10) {
-  grid-row-end: span 10 !important;
-}
-
-:host([content-panel]:not([content-panel=false])) .grid {
-  grid-template-rows: auto 1fr;
-}
-
-:host([full-height]:not([full-height=false])) {
-  block-size: 100%;
-}
-:host([full-height]:not([full-height=false])) .grid {
-  grid-template-rows: 1fr;
-}
-
-:host([show-helper]:not([show-helper=false])) .grid {
+:host([show-helper]:not([show-helper=false])) {
   position: relative;
 }
-:host([show-helper]:not([show-helper=false])) .grid::after {
-  content: "";
+:host([show-helper]:not([show-helper=false])) .grid--helper {
   position: absolute;
   inset: 0;
   pointer-events: none;
-  background-image: repeating-linear-gradient(to right, rgba(126, 195, 241, 0.25), rgba(126, 195, 241, 0.25) var(--col-width), transparent var(--col-width), transparent var(--repeat-width));
-  background-size: calc(100% + var(--grid-col-gap)) 100%;
-  z-index: 100;
 }
-:host([show-helper]:not([show-helper=false])) .grid::before {
+:host([show-helper]:not([show-helper=false])) .grid--helper::before {
   content: var(--current-grid-size);
   font-size: 30px;
   position: absolute;
@@ -197,93 +50,7 @@
   z-index: 99;
   pointer-events: none;
 }
-
-:host(.nano-grid-1) {
-  --current-grid-size: "grid size: 1";
-  --col-width: calc(100% - var(--grid-col-gap));
-  --repeat-width: calc(100% / 1);
-}
-:host(.nano-grid-1) .grid {
-  grid-template-columns: repeat(1, minmax(var(--col-width), 1fr));
-}
-
-:host(.nano-grid-2) {
-  --current-grid-size: "grid size: 2";
-  --col-width: calc(50% - var(--grid-col-gap));
-  --repeat-width: calc(100% / 2);
-}
-:host(.nano-grid-2) .grid {
-  grid-template-columns: repeat(2, minmax(var(--col-width), 1fr));
-}
-
-:host(.nano-grid-3) {
-  --current-grid-size: "grid size: 3";
-  --col-width: calc(33.3333333333% - var(--grid-col-gap));
-  --repeat-width: calc(100% / 3);
-}
-:host(.nano-grid-3) .grid {
-  grid-template-columns: repeat(3, minmax(var(--col-width), 1fr));
-}
-
-:host(.nano-grid-4) {
-  --current-grid-size: "grid size: 4";
-  --col-width: calc(25% - var(--grid-col-gap));
-  --repeat-width: calc(100% / 4);
-}
-:host(.nano-grid-4) .grid {
-  grid-template-columns: repeat(4, minmax(var(--col-width), 1fr));
-}
-
-:host(.nano-grid-5) {
-  --current-grid-size: "grid size: 5";
-  --col-width: calc(20% - var(--grid-col-gap));
-  --repeat-width: calc(100% / 5);
-}
-:host(.nano-grid-5) .grid {
-  grid-template-columns: repeat(5, minmax(var(--col-width), 1fr));
-}
-
-:host(.nano-grid-6) {
-  --current-grid-size: "grid size: 6";
-  --col-width: calc(16.6666666667% - var(--grid-col-gap));
-  --repeat-width: calc(100% / 6);
-}
-:host(.nano-grid-6) .grid {
-  grid-template-columns: repeat(6, minmax(var(--col-width), 1fr));
-}
-
-:host(.nano-grid-7) {
-  --current-grid-size: "grid size: 7";
-  --col-width: calc(14.2857142857% - var(--grid-col-gap));
-  --repeat-width: calc(100% / 7);
-}
-:host(.nano-grid-7) .grid {
-  grid-template-columns: repeat(7, minmax(var(--col-width), 1fr));
-}
-
-:host(.nano-grid-8) {
-  --current-grid-size: "grid size: 8";
-  --col-width: calc(12.5% - var(--grid-col-gap));
-  --repeat-width: calc(100% / 8);
-}
-:host(.nano-grid-8) .grid {
-  grid-template-columns: repeat(8, minmax(var(--col-width), 1fr));
-}
-
-:host(.nano-grid-9) {
-  --current-grid-size: "grid size: 9";
-  --col-width: calc(11.1111111111% - var(--grid-col-gap));
-  --repeat-width: calc(100% / 9);
-}
-:host(.nano-grid-9) .grid {
-  grid-template-columns: repeat(9, minmax(var(--col-width), 1fr));
-}
-
-:host(.nano-grid-10) {
-  --current-grid-size: "grid size: 10";
-  --col-width: calc(10% - var(--grid-col-gap));
-  --repeat-width: calc(100% / 10);
-}
-:host(.nano-grid-10) .grid {
-  grid-template-columns: repeat(10, minmax(var(--col-width), 1fr));
+:host([show-helper]:not([show-helper=false])) .grid__helper-item {
+  display: none;
+  background: rgba(126, 195, 241, 0.25);
 }