@nanoporetech-digital/components 4.10.0 → 5.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanoporetech-digital/components",
-  "version": "4.10.0",
+  "version": "5.1.0",
   "repository": {
     "type": "git",
     "url": "https://git.oxfordnanolabs.local/Digital/nano-components"
@@ -131,7 +131,7 @@
     "nanopore",
     "digital"
   ],
-  "gitHead": "941784c8b8d9428861a3d25cc2ed23d17ce3ae43",
+  "gitHead": "467a4c6f441b604c55cef60fa1b9c4aa0ef637ff",
   "volta": {
     "node": "14.18.1",
     "npm": "8.6.0"

package/dist/cjs/form-control-2e900f54.js.map

@@ -1 +0,0 @@
-{"file":"form-control-2e900f54.js","mappings":"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","names":["h"],"sources":["./src/components/form-control/form-control.tsx"],"sourcesContent":["import { FunctionalComponent, h, VNode } from '@stencil/core';\nimport type { TextFieldTypes } from '../../interface';\n\ninterface FormControlWrapProps {\n  rtl: boolean;\n  floatLabel: boolean;\n  labelId: string;\n  label: string;\n  moreId: string;\n  helperEndId: string;\n  type?: TextFieldTypes;\n  showInlineError: boolean;\n  hasHelperSlot: boolean;\n  errorMessage: string;\n  controlId: string;\n  hasLabelSlot: boolean;\n  hideLabel: boolean;\n  placeholder: string;\n  hasValue: boolean;\n  showCharCount?: boolean;\n  maxlength?: number;\n  charCount?: number;\n  hasHelperEndSlot?: boolean;\n}\n\ninterface FormControlProps {\n  clearControl: boolean;\n  onClearText?: () => void;\n  readonly: boolean;\n  disabled: boolean;\n  control: HTMLNanoInputElement | HTMLNanoSelectElement;\n  ref?: (elm?: HTMLElement) => void;\n  endSlot?: VNode;\n  endValueSlot?: VNode;\n  startSlot?: VNode;\n}\n\ninterface LabelProps extends FormControlWrapProps {\n  rtl: boolean;\n}\n\nconst renderLabel = ({\n  label,\n  hasLabelSlot,\n  controlId,\n  labelId,\n  floatLabel,\n  placeholder,\n  hideLabel,\n  hasValue,\n  rtl,\n  showCharCount,\n  maxlength,\n  charCount,\n}: LabelProps) => {\n  if (!label && !hasLabelSlot) return;\n  if (floatLabel) {\n    return (\n      <label class=\"form-ctrl__float-label\" htmlFor={controlId} id={labelId}>\n        {label && label}\n        {!label && hasLabelSlot && <slot name=\"label\" />}\n        {showCharCount && (\n          <span class=\"form-ctrl__label-charcount\">\n            {maxlength ? ` ${charCount}/${maxlength}` : ` ${charCount}`}\n          </span>\n        )}\n      </label>\n    );\n  } else {\n    return (\n      <label\n        class={{ 'form-ctrl__label': true, 'visually-hide': hideLabel }}\n        htmlFor={controlId}\n        id={labelId}\n      >\n        <div class=\"form-ctrl__label-wrap\">\n          {placeholder && hasValue && rtl && (\n            <span class=\"form-ctrl__label-placeholder\">{placeholder} / </span>\n          )}\n          <span class=\"form-ctrl__labeltext\">\n            {label && label}\n            {!label && hasLabelSlot && <slot name=\"label\" />}\n          </span>\n          {placeholder && hasValue && !rtl && (\n            <span class=\"form-ctrl__label-placeholder\"> / {placeholder}</span>\n          )}\n        </div>\n        {showCharCount && (\n          <span class=\"form-ctrl__label-charcount\">\n            {maxlength\n              ? maxlength - charCount + ' left'\n              : charCount + ' characters'}\n          </span>\n        )}\n      </label>\n    );\n  }\n};\n\nexport const FormControlWrap: FunctionalComponent<FormControlWrapProps> = (\n  props: FormControlWrapProps,\n  children\n) => {\n  const {\n    rtl,\n    floatLabel,\n    label,\n    moreId,\n    helperEndId,\n    type,\n    hasHelperSlot,\n    showInlineError,\n    errorMessage,\n    hasHelperEndSlot,\n  } = props;\n\n  const MainTag = hasHelperEndSlot ? 'nano-resize-observe' : 'div';\n\n  return (\n    <MainTag\n      states=\"350w has-enough-width\"\n      class={{\n        'has-label': label !== null && !floatLabel,\n        'has-float-label': label !== null && floatLabel,\n        'has-helper-end': hasHelperEndSlot,\n        rtl,\n        'form-ctrl': true,\n      }}\n    >\n      <div class=\"form-ctrl__wrapper\">\n        {!floatLabel ? renderLabel({ ...props }) : ''}\n        <div\n          class={{\n            'form-ctrl__input': true,\n            'form-ctrl__textarea': type === 'textarea',\n          }}\n        >\n          {floatLabel && renderLabel({ ...props, rtl })}\n          {children}\n        </div>\n        {showInlineError || hasHelperSlot ? (\n          <div class=\"form-ctrl__more\" id={moreId}>\n            {!!showInlineError ? (\n              <div class=\"form-ctrl__error\" aria-live=\"polite\">\n                {errorMessage}\n              </div>\n            ) : (\n              ''\n            )}\n            <div class=\"form-ctrl__helper\">\n              <slot name=\"helper\" />\n            </div>\n          </div>\n        ) : (\n          ''\n        )}\n      </div>\n      {hasHelperEndSlot ? (\n        <div class=\"form-ctrl__helper-end\" id={helperEndId}>\n          <slot name=\"helper-end\" />\n        </div>\n      ) : (\n        ''\n      )}\n    </MainTag>\n  );\n};\n\nexport const FormControl: FunctionalComponent<FormControlProps> = (\n  props: FormControlProps,\n  children\n) => {\n  const {\n    clearControl,\n    onClearText,\n    readonly,\n    disabled,\n    control,\n    ref,\n    endSlot,\n    endValueSlot,\n    startSlot,\n  } = props;\n  const clickThrough = () => {\n    control.setFocus();\n  };\n\n  return (\n    <div\n      class=\"form-ctrl__input-wrap\"\n      ref={(el) => {\n        if (ref) ref(el);\n      }}\n    >\n      <span class=\"form-ctrl__slot-start\">\n        <slot name=\"start\" />\n        {startSlot}\n      </span>\n      {children}\n      {clearControl && !readonly && !disabled && (\n        <button\n          type=\"button\"\n          class=\"icon form-ctrl__clear-btn\"\n          tabindex=\"-1\"\n          onTouchStart={onClearText}\n          onMouseDown={onClearText}\n        >\n          <nano-icon name=\"light/times\"></nano-icon>\n        </button>\n      )}\n      <span class=\"form-ctrl__slot-value-end\" onClick={clickThrough}>\n        <slot name=\"value-end\" />\n        {endValueSlot}\n      </span>\n      <span class=\"form-ctrl__slot-end\">\n        <slot name=\"end\" />\n        {endSlot}\n      </span>\n    </div>\n  );\n};\n"],"version":3}

package/dist/cjs/nano-grid_3.cjs.entry.js

@@ -1,431 +0,0 @@
-/*!
- * Web Components for Nanopore digital Web Apps
- */
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-71f899a7.js');
-const throttle = require('./throttle-f55496c8.js');
-
-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))}";
-
-const STATEOPTS$1 = ['col-span', 'col-start', 'row-span', 'row-start'];
-const Grid = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.nanoBpChange = index.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.sSize = 300;
-    this.mSize = 550;
-    this.lSize = 800;
-    this.xlSize = 1000;
-    this.sCols = undefined;
-    this.mCols = undefined;
-    this.lCols = undefined;
-    this.xlCols = undefined;
-    this.xxlCols = undefined;
-    this.showHelper = false;
-    this.contentPanel = false;
-    this.fullHeight = false;
-    this.stateChange = throttle.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');
-    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);
-      });
-      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$1.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}`);
-          }
-        });
-      });
-    });
-  }
-  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();
-  }
-  render() {
-    return (index.h(index.Host, { class: {
-        [this.generalClasses.join(' ')]: true,
-        'has-grid': !!this.gridClass,
-        ready: this.ready,
-        [this.gridClass]: true,
-      } }, index.h("div", { class: {
-        grid: true,
-      } }, index.h("slot", null))));
-  }
-  get el() { return index.getElement(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"]
-  }; }
-};
-Grid.style = gridCss;
-
-const gridItemCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{display:inline-block}";
-
-const STATEOPTS = ['col-span', 'col-start', 'row-span', 'row-start'];
-const GridItem = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.currGridSizes = [null];
-    this.gridStates = '';
-  }
-  updateGridClasses() {
-    this.applyChildrenClasses();
-  }
-  /**
-   * Called by parent grid to trigger new classes
-   * @internal
-   */
-  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 index.h("slot", null);
-  }
-  get el() { return index.getElement(this); }
-  static get watchers() { return {
-    "gridStates": ["updateGridClasses"]
-  }; }
-};
-GridItem.style = gridItemCss;
-
-const imgCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--padding:0;display:inline-block;object-fit:cover;object-position:center;background-size:cover;background-position:center}:host *{border-radius:inherit}:host([background]:not([background=false])){display:block}.img{position:relative;object-fit:inherit;object-position:inherit;background-color:inherit;background-position:inherit;background-size:inherit;background-origin:inherit;background-attachment:inherit;background-repeat:inherit;flex:1 1 100%;display:flex;flex-direction:column;min-block-size:inherit;max-block-size:inherit;max-inline-size:inherit;min-height:inherit;min-width:inherit;block-size:inherit;inline-size:inherit;height:inherit;width:inherit;max-height:inherit;max-width:inherit;aspect-ratio:inherit}.img__loader,.img__observer{position:absolute;inset:0;block-size:100%;inline-size:100%;z-index:-1}.img__image,.img__bg{border-radius:inherit;display:block;opacity:0;transition:0.5s ease opacity, 0.3s ease filter 0.4s;filter:blur(5px);flex:1}.img__image.loaded,.img__bg.loaded{opacity:1;filter:blur(0)}@media not all and (min-resolution: 0.001dpcm){@supports (-webkit-appearance: none){.img__image.loaded,.img__bg.loaded{filter:blur(0)}}}.img__image{object-fit:inherit;object-position:inherit;max-inline-size:100%;min-block-size:inherit;max-block-size:inherit;min-height:inherit;min-width:inherit;block-size:auto;inline-size:inherit;height:inherit;width:inherit;max-height:inherit;max-width:inherit;aspect-ratio:inherit}.img__image.hide{visibility:hidden}.img__image.hide.no-height{block-size:1px;position:absolute;z-index:-1}.img__bg{background-color:inherit;background-position:inherit;background-size:inherit;background-origin:inherit;background-attachment:inherit;background-repeat:inherit;overflow:auto;padding:var(--padding)}.img__bg.no-height{position:absolute;inset:0}";
-
-const Img = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.nanoImgWillLoad = index.createEvent(this, "nanoImgWillLoad", 7);
-    this.nanoImgDidLoad = index.createEvent(this, "nanoImgDidLoad", 7);
-    this.nanoImgError = index.createEvent(this, "nanoImgError", 7);
-    this._srcSet = {};
-    this.onLoad = () => {
-      this.nanoImgDidLoad.emit();
-      setTimeout(() => (this.hasLoaded = true), 50);
-    };
-    this.onError = () => {
-      this.nanoImgError.emit();
-    };
-    this.onResize = (e) => {
-      Object.entries(e.detail).forEach(([bp, active]) => {
-        this._srcSet[bp].active = active;
-      });
-      // sort and find the highest sized matching image.
-      const srcOpts = [];
-      Object.keys(this._srcSet)
-        .sort()
-        .forEach((bp) => {
-        if (this._srcSet[bp].active)
-          srcOpts.push(this._srcSet[bp].src);
-      });
-      if (srcOpts.length)
-        this._src = srcOpts.slice(-1)[0];
-      // no matching image? Set back to default
-      else
-        this._src = this.src;
-    };
-    this.loadSrc = undefined;
-    this.loadError = undefined;
-    this.hasLoaded = false;
-    this.imgStates = null;
-    this._src = undefined;
-    this.alt = undefined;
-    this.src = undefined;
-    this.srcSet = undefined;
-    this.lazy = true;
-    this.background = undefined;
-    this.autoHeight = 'content';
-  }
-  _srcChanged() {
-    this.hasLoaded = false;
-    this.addIO();
-  }
-  srcChanged() {
-    this._src = this.src;
-  }
-  srcSetChanged() {
-    if (!this.srcSet)
-      return;
-    delete this._srcSet;
-    this._srcSet = {};
-    this.imgStates = this.srcSet
-      .split(',')
-      .map((bpSrc) => {
-      const [bp, src] = bpSrc.split(' ').filter((bp) => bp.length);
-      this._srcSet[bp] = { src: src, active: false };
-      return bp;
-    })
-      .join(', ');
-  }
-  lazyChanged() {
-    if (!this.lazy)
-      this.load();
-  }
-  addIO() {
-    if (!this._src || this.hasLoaded)
-      return;
-    if (!this.lazy) {
-      this.load();
-      return;
-    }
-    if (typeof window !== 'undefined' &&
-      'IntersectionObserver' in window) {
-      this.removeIO();
-      this.io = new IntersectionObserver((data) => {
-        if (data[0].isIntersecting) {
-          this.load();
-          this.removeIO();
-        }
-      });
-      this.io.observe(this.host);
-    }
-    else
-      setTimeout(() => this.load(), 200);
-  }
-  load() {
-    this.loadError = this.onError;
-    this.loadSrc = this._src;
-    this.nanoImgWillLoad.emit();
-  }
-  removeIO() {
-    if (this.io) {
-      this.io.disconnect();
-      this.io = undefined;
-    }
-  }
-  connectedCallback() {
-    this.srcChanged();
-    this.srcSetChanged();
-    this.lazyChanged();
-  }
-  componentDidLoad() {
-    this.addIO();
-  }
-  disconnectedCallback() {
-    this.removeIO();
-  }
-  render() {
-    const bgStyle = !!this.loadSrc
-      ? { 'background-image': `url(${this.loadSrc})` }
-      : {};
-    return (index.h("div", { class: "img" }, index.h("nano-skeleton", { class: "img__loader" }), !!this.background && (index.h("div", { class: {
-        loaded: this.hasLoaded,
-        img__bg: true,
-        'no-height': this.autoHeight === 'image',
-      }, style: bgStyle }, index.h("slot", null))), index.h("img", { class: {
-        img__image: true,
-        loaded: this.hasLoaded,
-        hide: this.background,
-        'no-height': this.autoHeight === 'content',
-      }, decoding: "async", src: this.loadSrc, loading: undefined, alt: this.alt, onLoad: this.onLoad, onError: this.loadError }), index.h("nano-resize-observe", { class: "img__observer", onNanoResizeStateChange: this.onResize, states: this.imgStates })));
-  }
-  get host() { return index.getElement(this); }
-  static get watchers() { return {
-    "_src": ["_srcChanged"],
-    "src": ["srcChanged"],
-    "srcSet": ["srcSetChanged"],
-    "lazy": ["lazyChanged"]
-  }; }
-};
-Img.style = imgCss;
-
-exports.nano_grid = Grid;
-exports.nano_grid_item = GridItem;
-exports.nano_img = Img;
-
-//# sourceMappingURL=nano-grid_3.cjs.entry.js.map

package/dist/cjs/nano-grid_3.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"nano-grid.nano-grid-item.nano-img.entry.cjs.js","mappings":"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","names":["STATEOPTS","debounce","h","Host"],"sources":["./src/components/grid/grid.scss?tag=nano-grid&encapsulation=shadow","./src/components/grid/grid.tsx","./src/components/grid/grid-item.scss?tag=nano-grid-item&encapsulation=shadow","./src/components/grid/grid-item.tsx","./src/components/img/img.scss?tag=nano-img&encapsulation=shadow","./src/components/img/img.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",":host {\n  display: inline-block;\n}\n","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",":host {\n  /**\n   * @prop --padding: padding around any content. Only relevent on `<nano-img background>`\n  */\n  --padding: 0;\n\n  display: inline-block;\n  object-fit: cover;\n  object-position: center;\n  background-size: cover;\n  background-position: center;\n\n  * {\n    border-radius: inherit;\n  }\n}\n\n:host([background]:not([background='false'])) {\n  display: block;\n}\n\n.img {\n  position: relative;\n  object-fit: inherit;\n  object-position: inherit;\n  background-color: inherit;\n  background-position: inherit;\n  background-size: inherit;\n  background-origin: inherit;\n  background-attachment: inherit;\n  background-repeat: inherit;\n  flex: 1 1 100%;\n  display: flex;\n  flex-direction: column;\n  min-block-size: inherit;\n  max-block-size: inherit;\n  max-inline-size: inherit;\n  min-height: inherit;\n  min-width: inherit;\n  block-size: inherit;\n  inline-size: inherit;\n  height: inherit;\n  width: inherit;\n  max-height: inherit;\n  max-width: inherit;\n  aspect-ratio: inherit;\n}\n\n.img__loader,\n.img__observer {\n  position: absolute;\n  inset: 0;\n  block-size: 100%;\n  inline-size: 100%;\n  z-index: -1;\n}\n\n.img__image,\n.img__bg {\n  border-radius: inherit;\n  display: block;\n  opacity: 0;\n  transition: 0.5s ease opacity, 0.3s ease filter 0.4s;\n  filter: blur(5px);\n  flex: 1;\n\n  &.loaded {\n    opacity: 1;\n    filter: blur(0);\n\n    @media not all and (min-resolution: 0.001dpcm) {\n      @supports (-webkit-appearance: none) {\n        filter: blur(0);\n      }\n    }\n  }\n}\n\n.img__image {\n  object-fit: inherit;\n  object-position: inherit;\n  max-inline-size: 100%;\n  min-block-size: inherit;\n  max-block-size: inherit;\n  min-height: inherit;\n  min-width: inherit;\n  block-size: auto;\n  inline-size: inherit;\n  height: inherit;\n  width: inherit;\n  max-height: inherit;\n  max-width: inherit;\n  aspect-ratio: inherit;\n\n  &.hide {\n    visibility: hidden;\n\n    &.no-height {\n      block-size: 1px;\n      position: absolute;\n      z-index: -1;\n    }\n  }\n}\n\n.img__bg {\n  background-color: inherit;\n  background-position: inherit;\n  background-size: inherit;\n  background-origin: inherit;\n  background-attachment: inherit;\n  background-repeat: inherit;\n  overflow: auto;\n  padding: var(--padding);\n\n  &.no-height {\n    position: absolute;\n    inset: 0;\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  State,\n  Prop,\n  Watch,\n  h,\n  ComponentInterface,\n  Build,\n} from '@stencil/core';\nimport type { ResizeStateChangeEventDetail } from '../../interface';\n\n/**\n * Img with benefits. Lazy loading. Simple `srcSet` solution for both `<img>` and `background-image` varieties.\n * @slot - Main slot. Only relevant with `<nano-img background>`\n */\n@Component({\n  tag: 'nano-img',\n  styleUrl: 'img.scss',\n  shadow: true,\n})\nexport class Img implements ComponentInterface {\n  private io?: IntersectionObserver;\n  private _srcSet: { [key: string]: { src: string; active: boolean } } = {};\n\n  @Element() host!: HTMLNanoImgElement;\n\n  @State() loadSrc?: string;\n  @State() loadError?: () => void;\n  @State() hasLoaded: boolean = false;\n  @State() imgStates: string = null;\n  @State() _src: string;\n  @Watch('_src')\n  _srcChanged() {\n    this.hasLoaded = false;\n    this.addIO();\n  }\n\n  /** This attribute defines the alternative text describing the image.\n   * Users will see this text displayed if the image URL is wrong, or if the image is not yet downloaded. */\n  @Prop() alt?: string;\n\n  /** The image URL. This attribute is mandatory for the `<img>` element. */\n  @Prop() src!: string;\n  @Watch('src')\n  srcChanged() {\n    this._src = this.src;\n  }\n\n  /** Optional list string providing media sizes with corresponding image srcs.\n   * i.e. show img-x at 300px wide. Format `srcSet=\"200w src/imgSmall.jpg, 500h src/imgMed.png\"` */\n  @Prop() srcSet?: string;\n  @Watch('srcSet')\n  srcSetChanged() {\n    if (!this.srcSet) return;\n\n    delete this._srcSet;\n    this._srcSet = {};\n\n    this.imgStates = this.srcSet\n      .split(',')\n      .map((bpSrc) => {\n        const [bp, src] = bpSrc.split(' ').filter((bp) => bp.length);\n        this._srcSet[bp] = { src: src, active: false };\n        return bp;\n      })\n      .join(', ');\n  }\n\n  /** Render image lazily, when it comes into the browser viewport **/\n  @Prop() lazy: boolean = true;\n  @Watch('lazy')\n  lazyChanged() {\n    if (!this.lazy) this.load();\n  }\n\n  /** Render the image as a background image **/\n  @Prop() background?: boolean;\n\n  /** When the image is rendered as a background, and there is no preset dimensions of the component,\n   * you can set how the component height will be set. Via image size or via the content **/\n  @Prop() autoHeight: 'content' | 'image' = 'content';\n\n  /** Emitted when the img src has been set */\n  @Event() nanoImgWillLoad!: EventEmitter<void>;\n\n  /** Emitted when the image has finished loading */\n  @Event() nanoImgDidLoad!: EventEmitter<void>;\n\n  /** Emitted when the img fails to load */\n  @Event() nanoImgError!: EventEmitter<void>;\n\n  private addIO() {\n    if (!this._src || this.hasLoaded) return;\n    if (!this.lazy) {\n      this.load();\n      return;\n    }\n    if (\n      typeof (window as any) !== 'undefined' &&\n      'IntersectionObserver' in window\n    ) {\n      this.removeIO();\n      this.io = new IntersectionObserver((data) => {\n        if (data[0].isIntersecting) {\n          this.load();\n          this.removeIO();\n        }\n      });\n\n      this.io.observe(this.host);\n    } else setTimeout(() => this.load(), 200);\n  }\n\n  private load() {\n    this.loadError = this.onError;\n    this.loadSrc = this._src;\n    this.nanoImgWillLoad.emit();\n  }\n\n  private onLoad = () => {\n    this.nanoImgDidLoad.emit();\n    setTimeout(() => (this.hasLoaded = true), 50);\n  };\n\n  private onError = () => {\n    this.nanoImgError.emit();\n  };\n\n  private onResize = (e: { detail: ResizeStateChangeEventDetail }) => {\n    Object.entries(e.detail).forEach(([bp, active]) => {\n      this._srcSet[bp].active = active;\n    });\n\n    // sort and find the highest sized matching image.\n    const srcOpts = [];\n    Object.keys(this._srcSet)\n      .sort()\n      .forEach((bp) => {\n        if (this._srcSet[bp].active) srcOpts.push(this._srcSet[bp].src);\n      });\n\n    if (srcOpts.length) this._src = srcOpts.slice(-1)[0];\n    // no matching image? Set back to default\n    else this._src = this.src;\n  };\n\n  private removeIO() {\n    if (this.io) {\n      this.io.disconnect();\n      this.io = undefined;\n    }\n  }\n\n  connectedCallback() {\n    this.srcChanged();\n    this.srcSetChanged();\n    this.lazyChanged();\n  }\n\n  componentDidLoad() {\n    this.addIO();\n  }\n\n  disconnectedCallback() {\n    this.removeIO();\n  }\n\n  render() {\n    const bgStyle = !!this.loadSrc\n      ? { 'background-image': `url(${this.loadSrc})` }\n      : {};\n\n    return (\n      <div class=\"img\">\n        <nano-skeleton class=\"img__loader\"></nano-skeleton>\n        {!!this.background && (\n          <div\n            class={{\n              loaded: this.hasLoaded,\n              img__bg: true,\n              'no-height': this.autoHeight === 'image',\n            }}\n            style={bgStyle}\n          >\n            <slot />\n          </div>\n        )}\n        <img\n          class={{\n            img__image: true,\n            loaded: this.hasLoaded,\n            hide: this.background,\n            'no-height': this.autoHeight === 'content',\n          }}\n          decoding=\"async\"\n          src={Build.isServer ? this.src : this.loadSrc}\n          loading={Build.isServer && this.lazy ? 'lazy' : undefined}\n          alt={this.alt}\n          onLoad={this.onLoad}\n          onError={this.loadError}\n        />\n        <nano-resize-observe\n          class=\"img__observer\"\n          onNanoResizeStateChange={this.onResize}\n          states={this.imgStates}\n        />\n      </div>\n    );\n  }\n}\n"],"version":3}