@nanoporetech-digital/components 4.10.0 → 5.0.0

package/dist/components/grid.js

@@ -1,27 +1,204 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { d as debounce } from './throttle.js';
+import { h, Host, getElement, proxyCustomElement, HTMLElement as HTMLElement$1 } from '@stencil/core/internal/client';
 
-const gridCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--grid-col-gap:var(--nano-spacing-medium, 16px);--grid-row-gap:var(--nano-spacing-medium, 16px);--current-grid-size:\"'grid size: sm'\";display:block;opacity:0;transition:0.2s ease opacity;max-width:100%}:host .grid{display:grid;grid-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{position:relative}:host([show-helper]:not([show-helper=false])) .grid::after{content:\"\";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{content:var(--current-grid-size);font-size:30px;position:absolute;inline-size:100%;inset-inline-start:0;text-align:center;inset-block-start:50%;transform:translateY(-50%);color:rgba(0, 0, 0, 0.2);text-transform:uppercase;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))}";
+// import type { VNode, HTMLStencilElement } from "@stencil/core";
+const supportsConstructibleStylesheets = (() => {
+  try {
+    return !!new CSSStyleSheet();
+  }
+  catch (e) {
+    return false;
+  }
+})();
+const cacheKeys = new WeakMap();
+/**
+ * Dynamically create a constructible stylesheet which is applied to the component.
+ * The stylesheet is then cached for future instances of the component.
+ * @usage
+As a string:
+```
+@ConstructableStyle() style = `.bg { background: url('assets/${ this.mode }/bg.png'); }`;
+```
+As a function:
+```
+@ConstructableStyle() style = () => `.bg { background: url('assets/${ this.mode }/bg.png'); }`;
+```
+ * @param opts - optional `cacheKeyProperty` - in case an instance of a component could produce different styles based on variables.
+ * @returns `@ConstructableStyle` decorator
+ */
+function ConstructibleStyle(opts = {}) {
+  return (target, propertyKey) => {
+    if (!opts.cacheKeyProperty) {
+      opts.cacheKeyProperty = propertyKey;
+    }
+    const { componentWillLoad, render, componentWillRender } = target;
+    if (!componentWillLoad)
+      console.warn(`ConstructibleStyle requires you to have a \`componentWillLoad\` lifecycle method in \`${target.constructor.name}\`. Failure to add this function may cause ConstructibleStyle to fail due to StencilJS build optimizations.`);
+    if (supportsConstructibleStylesheets) {
+      const addStylesheet = (instance) => {
+        if (!instance[opts.cacheKeyProperty] ||
+          (cacheKeys.get(instance) &&
+            cacheKeys.get(instance) === instance[opts.cacheKeyProperty]))
+          return;
+        cacheKeys.set(instance, instance[opts.cacheKeyProperty]);
+        const host = getElement(instance);
+        const cssText = typeof instance[propertyKey] === 'function'
+          ? instance[propertyKey]()
+          : instance[propertyKey];
+        const root = (host.shadowRoot || document);
+        root.adoptedStyleSheets = [
+          ...(root.adoptedStyleSheets || []),
+          getOrCreateStylesheet(instance, target, cssText, opts),
+        ];
+      };
+      target.componentWillLoad = function () {
+        const willLoadResult = componentWillLoad && componentWillLoad.call(this);
+        addStylesheet(this);
+        return willLoadResult;
+      };
+      target.componentWillRender = function () {
+        const willRenderResult = componentWillRender && componentWillRender.call(this);
+        addStylesheet(this);
+        return willRenderResult;
+      };
+    }
+    else {
+      target.render = function () {
+        const cssText = typeof this[propertyKey] === 'function'
+          ? this[propertyKey]()
+          : this[propertyKey];
+        let renderedNode = render.call(this);
+        if (isHost(renderedNode)) {
+          appendStyleToHost(renderedNode, target.constructor.name, cssText);
+        }
+        else {
+          renderedNode = h(Host, null, renderedNode);
+          if (!('attachShadow' in HTMLElement.prototype)) {
+            appendStyleToHost(renderedNode, target.constructor.name, cssText);
+          }
+          else {
+            if (!target.__constructableStyle) {
+              const style = document.createElement('style');
+              style.setAttribute('type', 'text/css');
+              style.setAttribute('constructible-style', target.constructor.name);
+              style.innerHTML = cssText;
+              target.__constructableStyle = style;
+              document.head.appendChild(style);
+            }
+          }
+        }
+        return renderedNode;
+      };
+    }
+  };
+}
+function appendStyleToHost(node, targetName, cssText) {
+  (getHostChildren(node) || []).push(h("style", { type: "text/css", "constructible-style": targetName }, cssText));
+}
+function getOrCreateStylesheet(instance, target, cssText, opts) {
+  if (!target.__constructableStyle) {
+    target.__constructableStyle = {};
+  }
+  const key = instance[opts.cacheKeyProperty];
+  if (!target.__constructableStyle[key]) {
+    target.__constructableStyle[key] = new CSSStyleSheet();
+    target.__constructableStyle[key].replace(cssText);
+  }
+  return target.__constructableStyle[key];
+}
+function isHost(node) {
+  for (const prop in node) {
+    if (node.hasOwnProperty(prop)) {
+      if (node[prop] === Host) {
+        return true;
+      }
+    }
+  }
+  return false;
+}
+function getHostChildren(node) {
+  for (const prop in node) {
+    if (node.hasOwnProperty(prop)) {
+      if (Array.isArray(node[prop])) {
+        return node[prop];
+      }
+    }
+  }
+}
+
+const gridCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--grid-col-gap:var(--nano-spacing-medium, 16px);--grid-row-gap:var(--nano-spacing-medium, 16px);--current-grid-size:\"grid size: s\";container-type:inline-size;display:block}:host .grid{display:grid;gap:var(--grid-row-gap) var(--grid-col-gap);block-size:inherit;min-block-size:inherit}:host([show-helper]:not([show-helper=false])){position:relative}:host([show-helper]:not([show-helper=false])) .grid--helper{position:absolute;inset:0;pointer-events:none}:host([show-helper]:not([show-helper=false])) .grid--helper::before{content:var(--current-grid-size);font-size:30px;position:absolute;inline-size:100%;inset-inline-start:0;text-align:center;inset-block-start:50%;transform:translateY(-50%);color:rgba(0, 0, 0, 0.2);text-transform:uppercase;z-index:99;pointer-events:none}:host([show-helper]:not([show-helper=false])) .grid__helper-item{display:none;background:rgba(126, 195, 241, 0.25)}";
 
-const STATEOPTS = ['col-span', 'col-start', 'row-span', 'row-start'];
-const Grid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+var __decorate = (undefined && undefined.__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 = (undefined && undefined.__metadata) || function (k, v) {
+  if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
+    return Reflect.metadata(k, v);
+};
+const Grid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
   constructor() {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.nanoBpChange = createEvent(this, "nanoBpChange", 7);
-    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}, 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}-row-start-${gItm}"],
+                  ::slotted([grid-states~="${bp.name}-row-start-${gItm}"]) {
+                    grid-row-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;
+                  }
+                  .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;
@@ -31,195 +208,103 @@ const Grid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     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" })))))));
   }
-  get el() { return this; }
   static get watchers() { return {
-    "sSize": ["propChanged"],
-    "mSize": ["propChanged"],
-    "lSize": ["propChanged"],
-    "xlSize": ["propChanged"],
-    "sCols": ["propChanged"],
-    "mCols": ["propChanged"],
-    "lCols": ["propChanged"],
-    "xlCols": ["propChanged"],
-    "xxlCols": ["propChanged"],
-    "isSmall": ["stateChange"],
-    "isMedium": ["stateChange"],
-    "isLarge": ["stateChange"],
-    "isXL": ["stateChange"],
-    "isXXL": ["stateChange"]
+    "sTpl": ["constructSizeArray"],
+    "mTpl": ["constructSizeArray"],
+    "lTpl": ["constructSizeArray"],
+    "xlTpl": ["constructSizeArray"],
+    "xxlTpl": ["constructSizeArray"],
+    "sSize": ["constructSizeArray"],
+    "mSize": ["constructSizeArray"],
+    "lSize": ["constructSizeArray"],
+    "xlSize": ["constructSizeArray"],
+    "sCols": ["constructSizeArray"],
+    "mCols": ["constructSizeArray"],
+    "lCols": ["constructSizeArray"],
+    "xlCols": ["constructSizeArray"],
+    "xxlCols": ["constructSizeArray"],
+    "showHelper": ["constructSizeArray"]
   }; }
   static get style() { return gridCss; }
 }, [1, "nano-grid", {
-    "sSize": [2, "s-size"],
-    "mSize": [2, "m-size"],
-    "lSize": [2, "l-size"],
-    "xlSize": [2, "xl-size"],
+    "sSize": [8, "s-size"],
+    "mSize": [8, "m-size"],
+    "lSize": [8, "l-size"],
+    "xlSize": [8, "xl-size"],
     "sCols": [2, "s-cols"],
     "mCols": [2, "m-cols"],
     "lCols": [2, "l-cols"],
     "xlCols": [2, "xl-cols"],
     "xxlCols": [2, "xxl-cols"],
+    "sTpl": [1, "s-tpl"],
+    "mTpl": [1, "m-tpl"],
+    "lTpl": [1, "l-tpl"],
+    "xlTpl": [1, "xl-tpl"],
+    "xxlTpl": [1, "xxl-tpl"],
     "showHelper": [516, "show-helper"],
-    "contentPanel": [516, "content-panel"],
-    "fullHeight": [516, "full-height"],
-    "ready": [32],
-    "isSmall": [32],
-    "isMedium": [32],
-    "isLarge": [32],
-    "isXL": [32],
-    "isXXL": [32]
+    "cacheKey": [32]
   }]);
+__decorate([
+  ConstructibleStyle({ cacheKeyProperty: 'cacheKey' }),
+  __metadata("design:type", Object)
+], Grid.prototype, "styles", void 0);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;

package/dist/components/grid.js.map

@@ -1 +1 @@
-{"file":"grid.js","mappings":"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","names":[],"sources":["./src/components/grid/grid.scss?tag=nano-grid&encapsulation=shadow","./src/components/grid/grid.tsx"],"sourcesContent":["@use 'sass:math';\n\n@import '../../global/style/nano-theme/base';\n\n// ie 11 fixes ... maximum numbers we can place on the grid ... upping this number decreases performance a lot.\n$max-grid-cols: 10;\n\n@mixin grid($size: 1) {\n  @at-root :host(.nano-grid-#{$size}) {\n    --current-grid-size: 'grid size: #{$size}';\n    --col-width: calc(#{math.div(100, $size)}% - var(--grid-col-gap));\n    --repeat-width: calc(100% / #{$size});\n\n    .grid {\n      grid-template-columns: repeat(#{$size}, minmax(var(--col-width), 1fr));\n\n      $current-column: 1;\n      $current-row: 1;\n\n      @for $i from 1 through ($max-grid-cols * 2) {\n        @if $current-column > $size {\n          $current-column: 1;\n          $current-row: $current-row + 1;\n        }\n        $current-column: $current-column + 1;\n      }\n    }\n  }\n}\n\n@mixin grid-spans {\n  @for $i from 1 through $max-grid-cols {\n    ::slotted(.nano-grid-col-start-#{$i}) {\n      grid-column-start: #{$i} !important;\n    }\n\n    ::slotted(.nano-grid-row-start-#{$i}) {\n      grid-row-start: #{$i} !important;\n    }\n\n    ::slotted(.nano-grid-col-span-#{$i}) {\n      grid-column-end: span #{$i} !important;\n    }\n\n    ::slotted(.nano-grid-row-span-#{$i}) {\n      grid-row-end: span #{$i} !important;\n    }\n  }\n}\n\n:host {\n  /**\n  * @prop --grid-col-gap: gap between all columns. Defaults to theme's global padding\n  * @prop --grid-row-gap: gap between all rows. Defaults to theme's global padding\n  */\n\n  --grid-col-gap: #{$spacing-medium};\n  --grid-row-gap: #{$spacing-medium};\n  --current-grid-size: \"'grid size: sm'\";\n\n  display: block;\n  opacity: 0;\n  transition: 0.2s ease opacity;\n  max-width: 100%;\n\n  .grid {\n    /* autoprefixer: ignore next */\n    display: grid;\n\n    /* autoprefixer: ignore next */\n    grid-gap: var(--grid-row-gap) var(--grid-col-gap);\n    block-size: inherit;\n    min-block-size: inherit;\n  }\n}\n\n:host(.ready) {\n  opacity: 1;\n}\n\n:host(.has-grid) {\n  .grid {\n    display: grid;\n\n    @include grid-spans;\n  }\n}\n\n:host([content-panel]:not([content-panel='false'])) {\n  .grid {\n    grid-template-rows: auto 1fr;\n  }\n}\n\n:host([full-height]:not([full-height='false'])) {\n  block-size: 100%;\n\n  .grid {\n    grid-template-rows: 1fr;\n  }\n}\n\n:host([show-helper]:not([show-helper='false'])) {\n  .grid {\n    position: relative;\n\n    &::after {\n      content: '';\n      position: absolute;\n      inset: 0;\n      pointer-events: none;\n      background-image:\n        repeating-linear-gradient(\n          to right,\n          hsl(204deg 80% 72% / 25%),\n          hsl(204deg 80% 72% / 25%) var(--col-width),\n          transparent var(--col-width),\n          transparent var(--repeat-width)\n        );\n      background-size: calc(100% + var(--grid-col-gap)) 100%;\n      z-index: 100;\n    }\n\n    &::before {\n      content: var(--current-grid-size);\n      font-size: 30px;\n      position: absolute;\n      inline-size: 100%;\n      inset-inline-start: 0;\n      text-align: center;\n      inset-block-start: 50%;\n      transform: translateY(-50%);\n      color: rgb(0 0 0 / 20%);\n      text-transform: uppercase;\n      z-index: 99;\n      pointer-events: none;\n    }\n  }\n}\n\n@for $i from 1 through $max-grid-cols {\n  @include grid($i);\n}\n","import {\n  Component,\n  h,\n  Prop,\n  Element,\n  Host,\n  State,\n  Watch,\n  Event,\n  EventEmitter,\n} from '@stencil/core';\nimport { debounce } from '../../utils/throttle';\nimport type { GridSizes } from '../../interface';\n\nconst STATEOPTS = ['col-span', 'col-start', 'row-span', 'row-start'];\n\n/**\n * A context-aware CSS grid implementation.\n * Uses it's own width to choose column number - not screen width.\n */\n@Component({\n  tag: 'nano-grid',\n  styleUrl: 'grid.scss',\n  shadow: true,\n})\nexport class Grid {\n  @Element() private el: HTMLNanoGridElement;\n  private ro: ResizeObserver;\n  private generalClasses: Array<string> = [''];\n  private gridClass: string = null;\n  private isSizes: GridSizes[] = [null];\n  private currentWidth: number;\n\n  constructor() {\n    this.stateChange = debounce(this.stateChange.bind(this), 100);\n  }\n\n  @State() ready: boolean = false;\n  @State() isSmall = false;\n  @State() isMedium = false;\n  @State() isLarge = false;\n  @State() isXL = false;\n  @State() isXXL = false;\n\n  /**\n   * the component's small breakpoint. Note - all breakpoints are based on component width, not screen width.\n   */\n  @Prop() sSize: number = 300;\n\n  /**\n   * the component's medium breakpoint. Note - all breakpoints are based on component width, not screen width.\n   */\n  @Prop() mSize: number = 550;\n\n  /**\n   * the component's large breakpoint. Note - all breakpoints are based on component width, not screen width.\n   */\n  @Prop() lSize: number = 800;\n\n  /**\n   * the component's xl breakpoint. Note - all breakpoints are based on component width, not screen width.\n   */\n  @Prop() xlSize: number = 1000;\n\n  /**\n   * the number of columns the grid has at the small breakpoint.\n   */\n  @Prop() sCols: number;\n\n  /**\n   * the number of columns the grid has at the medium breakpoint.\n   */\n  @Prop() mCols: number;\n\n  /**\n   * the number of columns the grid has at the large breakpoint.\n   */\n  @Prop() lCols: number;\n\n  /**\n   * the number of columns the grid has at the xl breakpoint.\n   */\n  @Prop() xlCols: number;\n\n  /**\n   * the number of columns the grid has at the xxl breakpoint (anything greater than the xl breakpoint)\n   */\n  @Prop() xxlCols: number;\n\n  /**\n   * shows a grid helper to visualise where columns are\n   */\n  @Prop({ reflect: true }) showHelper: boolean = false;\n\n  /**\n   * 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.\n   */\n  @Prop({ reflect: true }) contentPanel: boolean = false;\n\n  /**\n   * Helper to make grid items expand to full height in IE11\n   */\n  @Prop({ reflect: true }) fullHeight: boolean = false;\n\n  /**\n   * Emitted when the `nano-grid` changes breakpoint\n   */\n  @Event() nanoBpChange: EventEmitter<string[]>;\n\n  @Watch('sSize')\n  @Watch('mSize')\n  @Watch('lSize')\n  @Watch('xlSize')\n  @Watch('sCols')\n  @Watch('mCols')\n  @Watch('lCols')\n  @Watch('xlCols')\n  @Watch('xxlCols')\n  propChanged() {\n    this.applySizeClasses();\n  }\n\n  private applySizeClasses() {\n    const size = this.currentWidth;\n\n    this.isSmall = false;\n    this.isMedium = false;\n    this.isLarge = false;\n    this.isXL = false;\n    this.isXXL = false;\n\n    this.generalClasses = [];\n    this.gridClass = null;\n    this.isSizes = [null];\n\n    this.isSmall = true;\n    this.generalClasses.push('is-small');\n    if (this.sCols) this.gridClass = `nano-grid-${this.sCols}`;\n    this.isSizes.push({ size: 's', active: true });\n\n    if (size > this.sSize) {\n      this.isMedium = true;\n      this.generalClasses.push('is-medium');\n      if (this.mCols) this.gridClass = `nano-grid-${this.mCols}`;\n      this.isSizes.push({ size: 'm', active: true });\n    }\n\n    if (size > this.mSize) {\n      this.isLarge = true;\n      this.generalClasses.push('is-large');\n      if (this.lCols) this.gridClass = `nano-grid-${this.lCols}`;\n      this.isSizes.push({ size: 'l', active: true });\n    }\n\n    if (size > this.lSize) {\n      this.isXL = true;\n      this.generalClasses.push('is-xl');\n      if (this.xlCols) this.gridClass = `nano-grid-${this.xlCols}`;\n      this.isSizes.push({ size: 'xl', active: true });\n    }\n\n    if (size > this.xlSize) {\n      this.isXXL = true;\n      this.generalClasses.push('is-xxl');\n      if (this.xxlCols) this.gridClass = `nano-grid-${this.xxlCols}`;\n      this.isSizes.push({ size: 'xxl', active: true });\n    }\n\n    this.el.style.setProperty(\n      '--current-grid-size',\n      `'grid size: ${this.isSizes.slice().pop().size}'`\n    );\n    this.applyChildrenClasses();\n    setTimeout(() => (this.ready = true), 0);\n  }\n\n  @Watch('isSmall')\n  @Watch('isMedium')\n  @Watch('isLarge')\n  @Watch('isXL')\n  @Watch('isXXL')\n  stateChange() {\n    this.nanoBpChange.emit(this.generalClasses);\n  }\n\n  private applyChildrenClasses() {\n    const gridItems = this.el.querySelectorAll('nano-grid-item');\n    if (gridItems.length) {\n      gridItems.forEach((gridItem: HTMLNanoGridItemElement) => {\n        gridItem.changeBP(this.isSizes);\n      });\n      return;\n    }\n\n    // this logic has been put into grid-item. Keep here for legacy for now\n    let stateArr: Array<string> = [''];\n    let itemState: string = '';\n    let found: any;\n    let classes: Array<string>;\n\n    const ctx = this.el;\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    // loop through all grid items with states.\n    [].map.call(ctx.children, (gItem: HTMLElement) => {\n      if (!gItem.hasAttribute('grid-states')) return;\n\n      // gridItems.forEach(gItem => {\n\n      // clear all previous grid state classnames\n      classes = gItem.className\n        .split(' ')\n        .filter((c) => !c.startsWith('nano-grid-'));\n      gItem.className = classes.join(' ').trim();\n\n      // get all potential states this element can have\n      const itemStates = gItem.getAttribute('grid-states').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.isSizes\n          .slice()\n          .reverse()\n          .forEach(function (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 = gItem.className\n                .split(' ')\n                .filter((c) => !c.includes('nano-grid-${stateOpt}'));\n              gItem.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              gItem.classList.add(`nano-grid-${itemState}`);\n            }\n          });\n      });\n    });\n  }\n\n  componentWillLoad() {\n    const ctx = this.el;\n    [].map.call(ctx.children, (ele: HTMLElement) =>\n      ele.classList.add('nano-griditem')\n    );\n  }\n\n  componentDidLoad() {\n    if (!window['ResizeObserver']) return;\n\n    this.ro = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        if (!entry.contentRect.width) return;\n        this.currentWidth = entry.contentRect.width;\n        this.applySizeClasses();\n      }\n    });\n    this.ro.observe(this.el);\n  }\n\n  disconnectedCallback() {\n    if (this.ro) this.ro.disconnect();\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          [this.generalClasses.join(' ')]: true,\n          'has-grid': !!this.gridClass,\n          ready: this.ready,\n          [this.gridClass]: true,\n        }}\n      >\n        <div\n          class={{\n            grid: true,\n          }}\n        >\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"grid.js","mappings":";;;;;AACA;AAEA,MAAM,gCAAgC,GAAG,CAAC;EACxC,IAAI;IACF,OAAO,CAAC,CAAC,IAAI,aAAa,EAAE,CAAC;GAC9B;EAAC,OAAO,CAAC,EAAE;IACV,OAAO,KAAK,CAAC;GACd;AACH,CAAC,GAAG,CAAC;AAEL,MAAM,SAAS,GAAwC,IAAI,OAAO,EAAE,CAAC;AAOrE;;;;;;;;;;;;;;;SAegB,kBAAkB,CAChC,OAAkC,EAAE;EAEpC,OAAO,CAAC,MAA0B,EAAE,WAAmB;IACrD,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE;MAC1B,IAAI,CAAC,gBAAgB,GAAG,WAAW,CAAC;KACrC;IAED,MAAM,EAAE,iBAAiB,EAAE,MAAM,EAAE,mBAAmB,EAAE,GAAG,MAAM,CAAC;IAClE,IAAI,CAAC,iBAAiB;MACpB,OAAO,CAAC,IAAI,CACV,yFAAyF,MAAM,CAAC,WAAW,CAAC,IAAI,6GAA6G,CAC9N,CAAC;IAEJ,IAAI,gCAAgC,EAAE;MACpC,MAAM,aAAa,GAAG,CAAC,QAA4B;QACjD,IACE,CAAC,QAAQ,CAAC,IAAI,CAAC,gBAAgB,CAAC;WAC/B,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC;YACtB,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,KAAK,QAAQ,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;UAE9D,OAAO;QAET,SAAS,CAAC,GAAG,CAAC,QAAQ,EAAE,QAAQ,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC;QACzD,MAAM,IAAI,GAAG,UAAU,CAAC,QAAQ,CAAC,CAAC;QAClC,MAAM,OAAO,GACX,OAAO,QAAQ,CAAC,WAAW,CAAC,KAAK,UAAU;YACvC,QAAQ,CAAC,WAAW,CAAC,EAAE;YACvB,QAAQ,CAAC,WAAW,CAAC,CAAC;QAC5B,MAAM,IAAI,IAAI,IAAI,CAAC,UAAU,IAAI,QAAQ,CAAQ,CAAC;QAClD,IAAI,CAAC,kBAAkB,GAAG;UACxB,IAAI,IAAI,CAAC,kBAAkB,IAAI,EAAE,CAAC;UAClC,qBAAqB,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,CAAC;SACvD,CAAC;OACH,CAAC;MAEF,MAAM,CAAC,iBAAiB,GAAG;QACzB,MAAM,cAAc,GAClB,iBAAiB,IAAI,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACpD,aAAa,CAAC,IAAI,CAAC,CAAC;QACpB,OAAO,cAAc,CAAC;OACvB,CAAC;MAEF,MAAM,CAAC,mBAAmB,GAAG;QAC3B,MAAM,gBAAgB,GACpB,mBAAmB,IAAI,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACxD,aAAa,CAAC,IAAI,CAAC,CAAC;QACpB,OAAO,gBAAgB,CAAC;OACzB,CAAC;KACH;SAAM;MACL,MAAM,CAAC,MAAM,GAAG;QACd,MAAM,OAAO,GACX,OAAO,IAAI,CAAC,WAAW,CAAC,KAAK,UAAU;YACnC,IAAI,CAAC,WAAW,CAAC,EAAE;YACnB,IAAI,CAAC,WAAW,CAAC,CAAC;QACxB,IAAI,YAAY,GAAU,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAE5C,IAAI,MAAM,CAAC,YAAY,CAAC,EAAE;UACxB,iBAAiB,CAAC,YAAY,EAAE,MAAM,CAAC,WAAW,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;SACnE;aAAM;UACL,YAAY,GAAG,EAAC,IAAI,QAAE,YAAY,CAAQ,CAAC;UAE3C,IAAI,EAAE,cAAc,IAAI,WAAW,CAAC,SAAS,CAAC,EAAE;YAC9C,iBAAiB,CAAC,YAAY,EAAE,MAAM,CAAC,WAAW,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;WACnE;eAAM;YACL,IAAI,CAAC,MAAM,CAAC,oBAAoB,EAAE;cAChC,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;cAC9C,KAAK,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;cACvC,KAAK,CAAC,YAAY,CAChB,qBAAqB,EACrB,MAAM,CAAC,WAAW,CAAC,IAAI,CACxB,CAAC;cACF,KAAK,CAAC,SAAS,GAAG,OAAO,CAAC;cAC1B,MAAM,CAAC,oBAAoB,GAAG,KAAK,CAAC;cACpC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;aAClC;WACF;SACF;QAED,OAAO,YAAY,CAAC;OACrB,CAAC;KACH;GACF,CAAC;AACJ,CAAC;AAED,SAAS,iBAAiB,CAAC,IAAI,EAAE,UAAU,EAAE,OAAO;EAClD,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,IAAI,CAChC,aAAO,IAAI,EAAC,UAAU,yBAAsB,UAAU,IACnD,OAAO,CACF,CACT,CAAC;AACJ,CAAC;AAED,SAAS,qBAAqB,CAC5B,QAA4B,EAC5B,MAA0B,EAC1B,OAAe,EACf,IAA+B;EAE/B,IAAI,CAAC,MAAM,CAAC,oBAAoB,EAAE;IAChC,MAAM,CAAC,oBAAoB,GAAG,EAAE,CAAC;GAClC;EAED,MAAM,GAAG,GAAG,QAAQ,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;EAE5C,IAAI,CAAC,MAAM,CAAC,oBAAoB,CAAC,GAAG,CAAC,EAAE;IACrC,MAAM,CAAC,oBAAoB,CAAC,GAAG,CAAC,GAAG,IAAI,aAAa,EAAE,CAAC;IACvD,MAAM,CAAC,oBAAoB,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;GACnD;EAED,OAAO,MAAM,CAAC,oBAAoB,CAAC,GAAG,CAAC,CAAC;AAC1C,CAAC;AAED,SAAS,MAAM,CAAC,IAAI;EAClB,KAAK,MAAM,IAAI,IAAI,IAAI,EAAE;IACvB,IAAI,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE;MAC7B,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE;QACvB,OAAO,IAAI,CAAC;OACb;KACF;GACF;EACD,OAAO,KAAK,CAAC;AACf,CAAC;AAED,SAAS,eAAe,CAAC,IAAI;EAC3B,KAAK,MAAM,IAAI,IAAI,IAAI,EAAE;IACvB,IAAI,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE;MAC7B,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE;QAC7B,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC;OACnB;KACF;GACF;AACH;;ACrKA,MAAM,OAAO,GAAG,0+BAA0+B;;;;;;;;;;;;;;;;MCsB7+B,IAAI;;;;;IACP,UAAK,GAKP,EAAE,CAAC;IAkHuD,WAAM,GACpE;MACE,MAAM,GAAG,aAAa;QACpB,IAAI,CAAC,KAAK;SACT,GAAG,CACF,CAAC,EAAE,eAAe;mCAEhB,OAAO,EAAE,CAAC,UAAU,KAAK,QAAQ;UAC7B,EAAE,CAAC,UAAU,GAAG,CAAC,GAAG,IAAI;UACxB,EAAE,CAAC,UACT;;iDAEuC,EAAE,CAAC,IAAI;gBAExC,EAAE,CAAC,QAAQ;UACP,kBAAkB,EAAE,CAAC,QAAQ,GAAG;UAChC,iCAAiC,EAAE,CAAC,IAAI,SAC9C;;cAEA,CAAC,GAAG,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC;SAClB,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;QACR,MAAM,IAAI,GAAG,CAAC,GAAG,CAAC,CAAC;QACnB,iBAAiB;2CACU,EAAE,CAAC,IAAI,cAAc,IAAI;6CACvB,EAAE,CAAC,IAAI,cAAc,IAAI;yCAC7B,IAAI;;2CAEF,EAAE,CAAC,IAAI,cAAc,IAAI;6CACvB,EAAE,CAAC,IAAI,cAAc,IAAI;sCAChC,IAAI;;2CAEC,EAAE,CAAC,IAAI,aAAa,IAAI;6CACtB,EAAE,CAAC,IAAI,aAAa,IAAI;4CACzB,IAAI;;2CAEL,EAAE,CAAC,IAAI,aAAa,IAAI;6CACtB,EAAE,CAAC,IAAI,aAAa,IAAI;yCAC5B,IAAI;;eAE9B,CAAC;OACD,CAAC;SACD,IAAI,CAAC,EAAE,CAAC;cAET,IAAI,CAAC,UAAU;kBACL;4CACoB,EAAE,CAAC,IAAI;;;aAIvC;;SAEH,CACA;SACA,IAAI,CAAC,EAAE,CAAC;KACZ,CAAC;MACA,OAAO,GAAG,CAAC;KACZ,CAAC;;iBArK6B,GAAG;iBAIH,GAAG;iBAIH,GAAG;kBAIF,IAAI;;;;;;;;;;;sBAiCS,KAAK;;EAiBpD,kBAAkB;IAChB,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;IAEhB,IAAI,IAAI,CAAC,KAAK;MACZ,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC;QACd,IAAI,EAAE,IAAI,CAAC,KAAK;QAChB,UAAU,EAAE,CAAC;QACb,IAAI,EAAE,GAAG;QACT,QAAQ,EAAE,IAAI,CAAC,IAAI;OACpB,CAAC,CAAC;IACL,IAAI,IAAI,CAAC,KAAK;MACZ,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC;QACd,IAAI,EAAE,IAAI,CAAC,KAAK;QAChB,UAAU,EAAE,IAAI,CAAC,KAAK;QACtB,IAAI,EAAE,GAAG;QACT,QAAQ,EAAE,IAAI,CAAC,IAAI;OACpB,CAAC,CAAC;IACL,IAAI,IAAI,CAAC,KAAK;MACZ,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC;QACd,IAAI,EAAE,IAAI,CAAC,KAAK;QAChB,UAAU,EAAE,IAAI,CAAC,KAAK;QACtB,IAAI,EAAE,GAAG;QACT,QAAQ,EAAE,IAAI,CAAC,IAAI;OACpB,CAAC,CAAC;IACL,IAAI,IAAI,CAAC,MAAM;MACb,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC;QACd,IAAI,EAAE,IAAI,CAAC,MAAM;QACjB,UAAU,EAAE,IAAI,CAAC,KAAK;QACtB,IAAI,EAAE,IAAI;QACV,QAAQ,EAAE,IAAI,CAAC,KAAK;OACrB,CAAC,CAAC;IACL,IAAI,IAAI,CAAC,OAAO;MACd,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC;QACd,IAAI,EAAE,IAAI,CAAC,OAAO;QAClB,UAAU,EAAE,IAAI,CAAC,MAAM;QACvB,IAAI,EAAE,KAAK;QACX,QAAQ,EAAE,IAAI,CAAC,MAAM;OACtB,CAAC,CAAC;IAEL,IAAI,CAAC,QAAQ;MACX,IAAI,CAAC,KAAK;SACP,GAAG,CAAC,CAAC,EAAE,KAAK,GAAG,EAAE,CAAC,IAAI,IAAI,EAAE,CAAC,UAAU,IAAI,EAAE,CAAC,QAAQ,IAAI,EAAE,EAAE,CAAC;SAC/D,IAAI,CAAC,EAAE,CAAC;QACX,UAAU;QACV,IAAI,CAAC,UAAU,CAAC;GACnB;EA4DD,iBAAiB;IACf,IAAI,CAAC,kBAAkB,EAAE,CAAC;GAC3B;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WAAK,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,MAAM,IAC3B,eAAQ,CACJ,EACL,IAAI,CAAC,UAAU,KACd,WAAK,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAC,QAAQ,IACzC,CAAC,GAAG,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,OAClB,WAAK,KAAK,EAAC,mBAAmB,GAAG,CAClC,CAAC,CACE,CACP,CACI,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA7ED;EAAC,kBAAkB,CAAC,EAAE,gBAAgB,EAAE,UAAU,EAAE,CAAC;;oCAwDjD;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/utils/constructible-style.tsx","./src/components/grid/grid.scss?tag=nano-grid&encapsulation=shadow","./src/components/grid/grid.tsx"],"sourcesContent":["import { h, Host, getElement, VNode, ComponentInterface } from '@stencil/core';\n// import type { VNode, HTMLStencilElement } from \"@stencil/core\";\n\nconst supportsConstructibleStylesheets = (() => {\n  try {\n    return !!new CSSStyleSheet();\n  } catch (e) {\n    return false;\n  }\n})();\n\nconst cacheKeys: WeakMap<ComponentInterface, string> = new WeakMap();\n\ndeclare type ConstructibleStyleDecorator = (\n  target: ComponentInterface,\n  propertyKey: string\n) => void;\n\n/**\n * Dynamically create a constructible stylesheet which is applied to the component.\n * The stylesheet is then cached for future instances of the component.\n * @usage\nAs a string:\n```\n@ConstructableStyle() style = `.bg { background: url('assets/${ this.mode }/bg.png'); }`;\n```\nAs a function:\n```\n@ConstructableStyle() style = () => `.bg { background: url('assets/${ this.mode }/bg.png'); }`;\n```\n * @param opts - optional `cacheKeyProperty` - in case an instance of a component could produce different styles based on variables.\n * @returns `@ConstructableStyle` decorator\n */\nexport function ConstructibleStyle(\n  opts: ConstructibleStyleOptions = {}\n): ConstructibleStyleDecorator {\n  return (target: ComponentInterface, propertyKey: string) => {\n    if (!opts.cacheKeyProperty) {\n      opts.cacheKeyProperty = propertyKey;\n    }\n\n    const { componentWillLoad, render, componentWillRender } = target;\n    if (!componentWillLoad)\n      console.warn(\n        `ConstructibleStyle requires you to have a \\`componentWillLoad\\` lifecycle method in \\`${target.constructor.name}\\`. Failure to add this function may cause ConstructibleStyle to fail due to StencilJS build optimizations.`\n      );\n\n    if (supportsConstructibleStylesheets) {\n      const addStylesheet = (instance: ComponentInterface) => {\n        if (\n          !instance[opts.cacheKeyProperty] ||\n          (cacheKeys.get(instance) &&\n            cacheKeys.get(instance) === instance[opts.cacheKeyProperty])\n        )\n          return;\n\n        cacheKeys.set(instance, instance[opts.cacheKeyProperty]);\n        const host = getElement(instance);\n        const cssText =\n          typeof instance[propertyKey] === 'function'\n            ? instance[propertyKey]()\n            : instance[propertyKey];\n        const root = (host.shadowRoot || document) as any;\n        root.adoptedStyleSheets = [\n          ...(root.adoptedStyleSheets || []),\n          getOrCreateStylesheet(instance, target, cssText, opts),\n        ];\n      };\n\n      target.componentWillLoad = function () {\n        const willLoadResult =\n          componentWillLoad && componentWillLoad.call(this);\n        addStylesheet(this);\n        return willLoadResult;\n      };\n\n      target.componentWillRender = function () {\n        const willRenderResult =\n          componentWillRender && componentWillRender.call(this);\n        addStylesheet(this);\n        return willRenderResult;\n      };\n    } else {\n      target.render = function () {\n        const cssText =\n          typeof this[propertyKey] === 'function'\n            ? this[propertyKey]()\n            : this[propertyKey];\n        let renderedNode: VNode = render.call(this);\n\n        if (isHost(renderedNode)) {\n          appendStyleToHost(renderedNode, target.constructor.name, cssText);\n        } else {\n          renderedNode = <Host>{renderedNode}</Host>;\n\n          if (!('attachShadow' in HTMLElement.prototype)) {\n            appendStyleToHost(renderedNode, target.constructor.name, cssText);\n          } else {\n            if (!target.__constructableStyle) {\n              const style = document.createElement('style');\n              style.setAttribute('type', 'text/css');\n              style.setAttribute(\n                'constructible-style',\n                target.constructor.name\n              );\n              style.innerHTML = cssText;\n              target.__constructableStyle = style;\n              document.head.appendChild(style);\n            }\n          }\n        }\n\n        return renderedNode;\n      };\n    }\n  };\n}\n\nfunction appendStyleToHost(node, targetName, cssText) {\n  (getHostChildren(node) || []).push(\n    <style type=\"text/css\" constructible-style={targetName}>\n      {cssText}\n    </style>\n  );\n}\n\nfunction getOrCreateStylesheet(\n  instance: ComponentInterface,\n  target: ComponentInterface,\n  cssText: string,\n  opts: ConstructibleStyleOptions\n): CSSStyleSheet {\n  if (!target.__constructableStyle) {\n    target.__constructableStyle = {};\n  }\n\n  const key = instance[opts.cacheKeyProperty];\n\n  if (!target.__constructableStyle[key]) {\n    target.__constructableStyle[key] = new CSSStyleSheet();\n    target.__constructableStyle[key].replace(cssText);\n  }\n\n  return target.__constructableStyle[key];\n}\n\nfunction isHost(node): boolean {\n  for (const prop in node) {\n    if (node.hasOwnProperty(prop)) {\n      if (node[prop] === Host) {\n        return true;\n      }\n    }\n  }\n  return false;\n}\n\nfunction getHostChildren(node): Array<VNode> {\n  for (const prop in node) {\n    if (node.hasOwnProperty(prop)) {\n      if (Array.isArray(node[prop])) {\n        return node[prop];\n      }\n    }\n  }\n}\n\nexport interface ConstructibleStyleOptions {\n  /**\n   * Set this in case an instance of a component could produce different styles based on variables.\n   * This will ensure that you get new styles for each mode.\n   * @example\n```\n@Prop() mode: string;\n@ConstructableStyle({ cacheKeyProperty: \"mode\" }) style = `.bg { background: url('assets/${ this.mode }/bg.png'); }`;\n```\n   */\n  cacheKeyProperty?: string;\n}\n","@use 'sass:math';\n\n@import '../../global/style/nano-theme/base';\n\n:host {\n  /**\n  * @prop --grid-col-gap: gap between all columns. Defaults to theme's global padding\n  * @prop --grid-row-gap: gap between all rows. Defaults to theme's global padding\n  */\n\n  --grid-col-gap: #{$spacing-medium};\n  --grid-row-gap: #{$spacing-medium};\n  --current-grid-size: \"grid size: s\";\n\n  container-type: inline-size;\n  display: block;\n\n  .grid {\n    display: grid;\n    gap: var(--grid-row-gap) var(--grid-col-gap);\n    block-size: inherit;\n    min-block-size: inherit;\n  }\n}\n\n:host([show-helper]:not([show-helper='false'])) {\n  position: relative;\n\n  .grid--helper {\n    position: absolute;\n    inset: 0;\n    pointer-events: none;\n\n    &::before {\n      content: var(--current-grid-size);\n      font-size: 30px;\n      position: absolute;\n      inline-size: 100%;\n      inset-inline-start: 0;\n      text-align: center;\n      inset-block-start: 50%;\n      transform: translateY(-50%);\n      color: rgb(0 0 0 / 20%);\n      text-transform: uppercase;\n      z-index: 99;\n      pointer-events: none;\n    }\n  }\n\n  .grid__helper-item {\n    display: none;\n    background: hsl(204deg 80% 72% / 25%);\n  }\n}\n","import { Component, h, Prop, Host, State, Watch } from '@stencil/core';\nimport { ConstructibleStyle } from '../../utils/constructible-style';\n\n/**\n * A lightweight, context-aware CSS grid implementation.\n *\n * - Define multiple grids templates at different breakpoints\n * - Uses `@container` queries to select the correct grid depending on the current dimensions\n * - Use `grid-states=\"...\"` on direct descendants for `column` / `row` - `start` / `end`\n * - SSR optimised\n\n * @part grid - the main grid element.\n * Use this to set css such as `justify-items|content` / `align-items|content` / `place-content`\n * @part helper - a replica grid showed when `show-helper` is true\n *\n * @slot - default slot. Use this to place grid items. Use `grid-states=\"...\"` attribute to opt-out of auto / sequential placement.\n */\n@Component({\n  tag: 'nano-grid',\n  styleUrl: 'grid.scss',\n  shadow: true,\n})\nexport class Grid {\n  private grids: {\n    cols: number;\n    breakpoint: number | string;\n    name: string;\n    template?: string;\n  }[] = [];\n  @State() cacheKey: string;\n\n  /** the component's small breakpoint. Note - all breakpoints are based on component width, not screen width.\n   * Will default to `px` if no unit supplied e.g. `20rem` */\n  @Prop() sSize: number | string = 300;\n\n  /** the component's medium breakpoint. Note - all breakpoints are based on component width, not screen width.\n   * Will default to `px` if no unit supplied e.g. `20rem` */\n  @Prop() mSize: number | string = 550;\n\n  /** the component's large breakpoint. Note - all breakpoints are based on component width, not screen width.\n   * Will default to `px` if no unit supplied e.g. `20rem` */\n  @Prop() lSize: number | string = 800;\n\n  /** the component's xl breakpoint. Note - all breakpoints are based on component width, not screen width.\n   * Will default to `px` if no unit supplied e.g. `20rem` */\n  @Prop() xlSize: number | string = 1000;\n\n  /** the number of columns the grid has at the small breakpoint. */\n  @Prop() sCols: number;\n\n  /** the number of columns the grid has at the medium breakpoint. */\n  @Prop() mCols: number;\n\n  /** the number of columns the grid has at the large breakpoint. */\n  @Prop() lCols: number;\n\n  /** the number of columns the grid has at the xl breakpoint. */\n  @Prop() xlCols: number;\n\n  /** the number of columns the grid has at the xxl breakpoint (anything greater than the xl breakpoint) */\n  @Prop() xxlCols: number;\n\n  /** Optional small `grid-template`. *Note* - you must set `sCols` for this to take affect */\n  @Prop() sTpl?: string;\n\n  /** Optional medium `grid-template`. *Note* - you must set `mCols` for this to take affect */\n  @Prop() mTpl?: string;\n\n  /** Optional large `grid-template`. *Note* - you must set `lCols` for this to take affect */\n  @Prop() lTpl?: string;\n\n  /** Optional xl `grid-template`. *Note* - you must set `xlCols` for this to take affect */\n  @Prop() xlTpl?: string;\n\n  /** Optional xxl `grid-template`. *Note* - you must set `xxlCols` for this to take affect */\n  @Prop() xxlTpl?: string;\n\n  /** shows a grid helper to visualise where columns are */\n  @Prop({ reflect: true }) showHelper: boolean = false;\n\n  @Watch('sTpl')\n  @Watch('mTpl')\n  @Watch('lTpl')\n  @Watch('xlTpl')\n  @Watch('xxlTpl')\n  @Watch('sSize')\n  @Watch('mSize')\n  @Watch('lSize')\n  @Watch('xlSize')\n  @Watch('sCols')\n  @Watch('mCols')\n  @Watch('lCols')\n  @Watch('xlCols')\n  @Watch('xxlCols')\n  @Watch('showHelper')\n  constructSizeArray() {\n    this.grids = [];\n\n    if (this.sCols)\n      this.grids.push({\n        cols: this.sCols,\n        breakpoint: 0,\n        name: 's',\n        template: this.sTpl,\n      });\n    if (this.mCols)\n      this.grids.push({\n        cols: this.mCols,\n        breakpoint: this.sSize,\n        name: 'm',\n        template: this.mTpl,\n      });\n    if (this.lSize)\n      this.grids.push({\n        cols: this.lCols,\n        breakpoint: this.mSize,\n        name: 'l',\n        template: this.lTpl,\n      });\n    if (this.xlCols)\n      this.grids.push({\n        cols: this.xlCols,\n        breakpoint: this.lSize,\n        name: 'xl',\n        template: this.xlTpl,\n      });\n    if (this.xxlCols)\n      this.grids.push({\n        cols: this.xxlCols,\n        breakpoint: this.xlSize,\n        name: 'xxl',\n        template: this.xxlTpl,\n      });\n\n    this.cacheKey =\n      this.grids\n        .map((bp) => `${bp.cols}-${bp.breakpoint}-${bp.template || ''}`)\n        .join('') +\n      '-helper-' +\n      this.showHelper;\n  }\n\n  @ConstructibleStyle({ cacheKeyProperty: 'cacheKey' }) protected styles =\n    () => {\n      const css = /* css */ `\n      ${this.grids\n        .map(\n          (bp) => /* css */ `\n          @container (min-width: ${\n            typeof bp.breakpoint === 'number'\n              ? bp.breakpoint + 1 + 'px'\n              : bp.breakpoint\n          }) {\n            .grid {\n              --current-grid-size: \"grid size: ${bp.name}\";\n              ${\n                bp.template\n                  ? `grid-template: ${bp.template};`\n                  : `grid-template-columns: repeat(${bp.cols}, 1fr);`\n              }\n            }\n            ${[...Array(bp.cols)]\n              .map((_, i) => {\n                const gItm = i + 1;\n                return /* css */ `\n                  .grid > [grid-states~=\"${bp.name}-col-start-${gItm}\"],\n                  ::slotted([grid-states~=\"${bp.name}-col-start-${gItm}\"]) {\n                    grid-column-start: ${gItm} !important;\n                  }\n                  .grid > [grid-states~=\"${bp.name}-row-start-${gItm}\"],\n                  ::slotted([grid-states~=\"${bp.name}-row-start-${gItm}\"]) {\n                    grid-row-start: ${gItm} !important;\n                  }\n                  .grid > [grid-states~=\"${bp.name}-col-span-${gItm}\"],\n                  ::slotted([grid-states~=\"${bp.name}-col-span-${gItm}\"]) {\n                    grid-column-end: span ${gItm} !important;\n                  }\n                  .grid > [grid-states~=\"${bp.name}-row-span-${gItm}\"],\n                  ::slotted([grid-states~=\"${bp.name}-row-span-${gItm}\"]) {\n                    grid-row-end: span ${gItm} !important;\n                  }\n              `;\n              })\n              .join('')}\n            ${\n              this.showHelper &&\n              /* css */ `\n              .grid--helper :nth-child(-n+${bp.cols}) {\n                display: block !important;\n              }\n            `\n            }\n          }\n        `\n        )\n        .join('')}\n    `;\n      return css;\n    };\n\n  componentWillLoad() {\n    this.constructSizeArray();\n  }\n\n  render() {\n    return (\n      <Host>\n        <div part=\"grid\" class=\"grid\">\n          <slot />\n        </div>\n        {this.showHelper && (\n          <div class=\"grid grid--helper\" part=\"helper\">\n            {[...Array(24)].map(() => (\n              <div class=\"grid__helper-item\" />\n            ))}\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/icon-button.js

@@ -6,7 +6,7 @@ import { f as focusVisible } from './focus-visible.js';
 import { d as defineCustomElement$2 } from './icon.js';
 import { d as defineCustomElement$1 } from './tooltip.js';
 
-const iconButtonCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--border-radius:var(--nano-border-radius-medium, 4px);--active-color:#005c75;--hover-color:#007495;--nano-color-base:var(--color, #687576);--background:transparent;--padding:var(--nano-spacing-small, 8px);--box-shadow:none;border-radius:var(--border-radius);display:inline-block}.icon-button{flex:0 0 auto;display:flex;align-items:center;border:none;border-radius:inherit;background:var(--background);font-size:inherit;color:var(--color);padding:var(--padding);cursor:pointer;-webkit-appearance:none;appearance:none;transition:box-shadow var(--nano-transition-fast, 0.1s) ease-in-out;box-shadow:var(--box-shadow)}.icon-button:hover:not(.icon-button--disabled),.icon-button:focus:not(.icon-button--disabled){color:var(--hover-color);--nano-color-base:var(--hover-color)}.icon-button:active:not(.icon-button--disabled){color:var(--active-color);--nano-color-base:var(--active-color)}.icon-button:focus{outline:none}.icon-button--disabled{opacity:0.5;cursor:not-allowed;pointer-events:none}.focus-visible.icon-button:focus{box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}";
+const iconButtonCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--border-radius:var(--nano-border-radius-medium, 4px);--active-color:#005c75;--hover-color:#007495;--nano-color-base:var(--color, #687576);--background:transparent;--padding:var(--nano-spacing-small, 8px);--box-shadow:none;border-radius:var(--border-radius);display:inline-block}.icon-button{flex:0 0 auto;display:flex;align-items:center;border:none;border-radius:inherit;background:var(--background);font-size:inherit;color:var(--color);padding:var(--padding);cursor:pointer;-webkit-appearance:none;appearance:none;transition:box-shadow var(--nano-transition-fast, 0.1s) ease-in-out;box-shadow:var(--box-shadow)}.icon-button:hover:not(.icon-button--disabled),.icon-button:focus:not(.icon-button--disabled){color:var(--hover-color);--nano-color-base:var(--hover-color)}.icon-button:active:not(.icon-button--disabled){color:var(--active-color);--nano-color-base:var(--active-color)}.icon-button:focus{outline:none}.icon-button__label{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.icon-button--disabled{opacity:0.5;cursor:not-allowed;pointer-events:none}.focus-visible.icon-button:focus{box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}";
 
 const IconButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -79,7 +79,7 @@ const IconButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     return (h(Host, { "aria-disabled": this.disabled ? 'true' : null }, h(TagType, { onClick: this.handleClick, part: "base", ref: (el) => (this.button = el), class: {
         'icon-button': true,
         'icon-button--disabled': this.disabled,
-      }, "aria-label": this.label, name: this.name, value: this.value, href: this.href || undefined, target: this.href && this.target ? this.target : undefined, rel: this.rel || undefined, type: !this.href && this.type ? this.type : undefined }, h("nano-icon", { name: this.iconName, src: this.iconSrc, "aria-hidden": "true", lazy: false, part: "icon" }))));
+      }, name: this.name, value: this.value, href: this.href || undefined, target: this.href && this.target ? this.target : undefined, rel: this.rel || undefined, type: !this.href && this.type ? this.type : undefined }, h("span", { class: "icon-button__label" }, this.label), h("nano-icon", { name: this.iconName, src: this.iconSrc, "aria-hidden": "true", lazy: false, part: "icon" }))));
   }
   render() {
     if (this.showTooltip) {