@nanoporetech-digital/components 6.0.1 → 6.2.0

package/dist/collection/components/intersection-observe/intersection-observe.js

@@ -0,0 +1,256 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import { h, } from '@stencil/core';
+import { findScrollParent } from '../../utils/scroll-parent';
+/**
+ * A thin, declarative interface to the IntersectionObserver API.
+ * @slot - Main slot for any content.
+ */
+export class IntersectionObserve {
+  constructor() {
+    this.ioCallback = (entries) => {
+      entries.forEach((entry) => {
+        this.nanoIntersectionChange.emit(entry);
+        if (entry.isIntersecting)
+          this.nanoIntersecting.emit(entry);
+        if (!entry.isIntersecting)
+          this.nanoNotIntersecting.emit(entry);
+      });
+    };
+    this.handleSlotChange = () => {
+      this.addIO();
+    };
+    this.root = 'auto';
+    this.rootMargin = undefined;
+    this.threshold = undefined;
+  }
+  get observerOptions() {
+    const opts = {};
+    if (!!this._root)
+      opts.root = this._root;
+    if (this.rootMargin)
+      opts.rootMargin = this.rootMargin;
+    if (this.threshold)
+      opts.threshold = this._threshold;
+    return opts;
+  }
+  get elements() {
+    const slotted = this.defaultSlot?.assignedElements() || [];
+    return slotted.flatMap((el) => {
+      const style = getComputedStyle(el);
+      if (style.display.includes('contents'))
+        return Array.from(el.children);
+      else
+        return el;
+    });
+  }
+  handleRootChange() {
+    if (!this.root) {
+      this._root = undefined;
+      this.removeIO();
+      return;
+    }
+    let newRoot;
+    if (this.root === 'auto') {
+      // try to find nearest scrolling parent
+      newRoot = findScrollParent(this.host);
+    }
+    else if (this.root === 'root') {
+      newRoot = undefined;
+    }
+    else {
+      // root is set explicitly
+      newRoot = this.root;
+    }
+    // if it's the document - unset as that's IO's default
+    if (newRoot === document.documentElement)
+      newRoot = undefined;
+    // if new root is what we already have - ignore
+    if (newRoot === this._root)
+      return;
+    // cache and setup io
+    this._root = newRoot;
+    this.addIO();
+  }
+  handleThresholdChange() {
+    if (!this.threshold) {
+      this._threshold = undefined;
+      return;
+    }
+    if (this.threshold.includes(',')) {
+      this._threshold = this.threshold
+        .split(',')
+        .map((numStr) => Number(numStr));
+      return;
+    }
+    this._threshold = Number(this.threshold);
+  }
+  addIO() {
+    if (!window['IntersectionObserver'] || !this.elements?.length)
+      return;
+    if (this.io)
+      this.removeIO();
+    const io = (this.io = new IntersectionObserver(this.ioCallback, this.observerOptions));
+    this.elements?.forEach((el) => {
+      io.observe(el);
+    });
+  }
+  removeIO() {
+    if (!this.io)
+      return;
+    this.io.disconnect();
+    this.io = undefined;
+  }
+  connectedCallback() {
+    this.handleThresholdChange();
+    this.handleRootChange();
+  }
+  disconnectedCallback() {
+    this.removeIO();
+    this.root = this._root = undefined;
+  }
+  render() {
+    return (h("slot", { ref: (slot) => (this.defaultSlot = slot), onSlotchange: this.handleSlotChange }));
+  }
+  static get is() { return "nano-intersection-observe"; }
+  static get encapsulation() { return "shadow"; }
+  static get styles() { return "nano-intersection-observe { display: contents }"; }
+  static get properties() {
+    return {
+      "root": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "globalThis.Element | 'root' | 'auto'",
+          "resolved": "\"auto\" | \"root\" | Element",
+          "references": {
+            "globalThis": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The element that is used as the viewport for checking visibility of the target. Must be the ancestor of the target.\nDefaults to an automatic check for ancestors that `overflow: auto` or otherwise the `Document`."
+        },
+        "getter": false,
+        "setter": false,
+        "attribute": "root",
+        "reflect": false,
+        "defaultValue": "'auto'"
+      },
+      "rootMargin": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Margin around the root. Can be similar to CSS margins property, e.g. \"10px 20px 30px 40px\" (top, right, bottom, left).\nThe values can be percentages. This set of values serves to grow or shrink each side of the root element's\nbounding box before computing intersections. Defaults to zeros."
+        },
+        "getter": false,
+        "setter": false,
+        "attribute": "root-margin",
+        "reflect": false
+      },
+      "threshold": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Indicate at what percentage of the target's visibility the observer's callback should be executed.\nIf you only want to detect when visibility passes the 50% mark, you can use a value of '0.5'.\nIf you want the callback to run every time visibility passes another '25%',\nyou would specify a string of values (separated by ',') array '0, 0.25, 0.5, 0.75, 1'.\nA value of '1.0' means that the threshold isn't considered passed until every pixel is visible."
+        },
+        "getter": false,
+        "setter": false,
+        "attribute": "threshold",
+        "reflect": false
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "nanoIntersectionChange",
+        "name": "nanoIntersectionChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "A resize break point is switched on or off"
+        },
+        "complexType": {
+          "original": "IntersectionObserverEntry",
+          "resolved": "IntersectionObserverEntry",
+          "references": {
+            "IntersectionObserverEntry": {
+              "location": "global"
+            }
+          }
+        }
+      }, {
+        "method": "nanoIntersecting",
+        "name": "nanoIntersecting",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "A resize break point is switched on or off"
+        },
+        "complexType": {
+          "original": "IntersectionObserverEntry",
+          "resolved": "IntersectionObserverEntry",
+          "references": {
+            "IntersectionObserverEntry": {
+              "location": "global"
+            }
+          }
+        }
+      }, {
+        "method": "nanoNotIntersecting",
+        "name": "nanoNotIntersecting",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "A resize break point is switched on or off"
+        },
+        "complexType": {
+          "original": "IntersectionObserverEntry",
+          "resolved": "IntersectionObserverEntry",
+          "references": {
+            "IntersectionObserverEntry": {
+              "location": "global"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "host"; }
+  static get watchers() {
+    return [{
+        "propName": "root",
+        "methodName": "handleRootChange"
+      }, {
+        "propName": "threshold",
+        "methodName": "handleThresholdChange"
+      }];
+  }
+}
+//# sourceMappingURL=intersection-observe.js.map

package/dist/collection/components/intersection-observe/intersection-observe.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"intersection-observe.js","sourceRoot":"","sources":["../../../src/components/intersection-observe/intersection-observe.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  h,\n  Prop,\n  Element,\n  Watch,\n  ComponentInterface,\n  Event,\n  EventEmitter,\n} from '@stencil/core';\nimport { findScrollParent } from '../../utils/scroll-parent';\n\n/**\n * A thin, declarative interface to the IntersectionObserver API.\n * @slot - Main slot for any content.\n */\n@Component({\n  tag: 'nano-intersection-observe',\n  styles: `nano-intersection-observe { display: contents }`,\n  shadow: true,\n})\nexport class IntersectionObserve implements ComponentInterface {\n  private io: IntersectionObserver;\n  private _root: Element | Document;\n  private _threshold: number | number[];\n  private defaultSlot: HTMLSlotElement;\n\n  get observerOptions() {\n    const opts: IntersectionObserverInit = {};\n\n    if (!!this._root) opts.root = this._root;\n    if (this.rootMargin) opts.rootMargin = this.rootMargin;\n    if (this.threshold) opts.threshold = this._threshold;\n\n    return opts;\n  }\n\n  get elements(): Element[] | undefined {\n    const slotted = this.defaultSlot?.assignedElements() || [];\n\n    return slotted.flatMap((el) => {\n      const style = getComputedStyle(el);\n      if (style.display.includes('contents')) return Array.from(el.children);\n      else return el;\n    });\n  }\n\n  @Element() host: HTMLNanoIntersectionObserveElement;\n\n  /** The element that is used as the viewport for checking visibility of the target. Must be the ancestor of the target.\n   * Defaults to an automatic check for ancestors that `overflow: auto` or otherwise the `Document`. */\n  @Prop() root: globalThis.Element | 'root' | 'auto' = 'auto';\n\n  @Watch('root')\n  handleRootChange() {\n    if (!this.root) {\n      this._root = undefined;\n      this.removeIO();\n      return;\n    }\n\n    let newRoot;\n\n    if (this.root === 'auto') {\n      // try to find nearest scrolling parent\n      newRoot = findScrollParent(this.host);\n    } else if (this.root === 'root') {\n      newRoot = undefined;\n    } else {\n      // root is set explicitly\n      newRoot = this.root;\n    }\n\n    // if it's the document - unset as that's IO's default\n    if (newRoot === document.documentElement) newRoot = undefined;\n    // if new root is what we already have - ignore\n    if (newRoot === this._root) return;\n\n    // cache and setup io\n    this._root = newRoot;\n    this.addIO();\n  }\n\n  /**\n   * Margin around the root. Can be similar to CSS margins property, e.g. \"10px 20px 30px 40px\" (top, right, bottom, left).\n   * The values can be percentages. This set of values serves to grow or shrink each side of the root element's\n   * bounding box before computing intersections. Defaults to zeros. */\n  @Prop() rootMargin?: string;\n\n  /**\n   * Indicate at what percentage of the target's visibility the observer's callback should be executed.\n   * If you only want to detect when visibility passes the 50% mark, you can use a value of '0.5'.\n   * If you want the callback to run every time visibility passes another '25%',\n   * you would specify a string of values (separated by ',') array '0, 0.25, 0.5, 0.75, 1'.\n   * A value of '1.0' means that the threshold isn't considered passed until every pixel is visible.\n   */\n  @Prop() threshold?: string;\n\n  @Watch('threshold')\n  handleThresholdChange() {\n    if (!this.threshold) {\n      this._threshold = undefined;\n      return;\n    }\n\n    if (this.threshold.includes(',')) {\n      this._threshold = this.threshold\n        .split(',')\n        .map((numStr) => Number(numStr));\n      return;\n    }\n\n    this._threshold = Number(this.threshold);\n  }\n\n  /** A resize break point is switched on or off */\n  @Event() nanoIntersectionChange!: EventEmitter<IntersectionObserverEntry>;\n\n  /** A resize break point is switched on or off */\n  @Event() nanoIntersecting!: EventEmitter<IntersectionObserverEntry>;\n\n  /** A resize break point is switched on or off */\n  @Event() nanoNotIntersecting!: EventEmitter<IntersectionObserverEntry>;\n\n  private ioCallback: IntersectionObserverCallback = (entries) => {\n    entries.forEach((entry) => {\n      this.nanoIntersectionChange.emit(entry);\n      if (entry.isIntersecting) this.nanoIntersecting.emit(entry);\n      if (!entry.isIntersecting) this.nanoNotIntersecting.emit(entry);\n    });\n  };\n\n  private handleSlotChange = () => {\n    this.addIO();\n  };\n\n  private addIO() {\n    if (!window['IntersectionObserver'] || !this.elements?.length) return;\n    if (this.io) this.removeIO();\n\n    const io = (this.io = new IntersectionObserver(\n      this.ioCallback,\n      this.observerOptions\n    ));\n    this.elements?.forEach((el) => {\n      io.observe(el);\n    });\n  }\n\n  private removeIO() {\n    if (!this.io) return;\n\n    this.io.disconnect();\n    this.io = undefined;\n  }\n\n  connectedCallback(): void {\n    this.handleThresholdChange();\n    this.handleRootChange();\n  }\n\n  disconnectedCallback(): void {\n    this.removeIO();\n    this.root = this._root = undefined;\n  }\n\n  render() {\n    return (\n      <slot\n        ref={(slot) => (this.defaultSlot = slot as HTMLSlotElement)}\n        onSlotchange={this.handleSlotChange}\n      />\n    );\n  }\n}\n"]}

package/dist/collection/components/resize-observe/resize-observe.js

@@ -220,7 +220,7 @@ export class ResizeObserve {
   }
   static get is() { return "nano-resize-observe"; }
   static get encapsulation() { return "shadow"; }
-  static get styles() { return "nano-resize-observe { display: contents }"; }
+  static get styles() { return "nano-resize-observe { display: block }"; }
   static get properties() {
     return {
       "notifyContentFit": {

package/dist/collection/components/resize-observe/resize-observe.js.map

@@ -1 +1 @@
-{"version":3,"file":"resize-observe.js","sourceRoot":"","sources":["../../../src/components/resize-observe/resize-observe.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  h,\n  Prop,\n  Element,\n  Host,\n  State,\n  Watch,\n  ComponentInterface,\n  Event,\n  EventEmitter,\n  readTask,\n} from '@stencil/core';\nimport type { ResizeStateChangeEventDetail } from '../../interface';\n\ntype ResizeObserverState = { states?: string[]; applied?: boolean };\ninterface StateMaps {\n  h: Map<number, ResizeObserverState>;\n  w: Map<number, ResizeObserverState>;\n}\n\n/**\n * A Resize-Observer utility component.\n * Takes a string list of sizes and optional class-names.\n * Adds class-names and fires `nanoResizeStateChange` events when the component reaches those sizes.\n * Additionally, can fire events when content no-longer fits within the element.\n * @slot - Main slot for any content.\n * @slot content-fit-x - optional slot (when `notifyContentFit` is set). Shows when content fits / doesn't get cut off\n * @slot content-nofit-x - optional slot (when `notifyContentFit` is set). Shows when content doesn't get cut off\n * @slot content-fit-y - optional slot (when `notifyContentFit` is set). Shows when content fits / doesn't get cut off\n * @slot content-nofit-y - optional slot (when `notifyContentFit` is set). Shows when content doesn't get cut off\n */\n@Component({\n  tag: 'nano-resize-observe',\n  styles: `nano-resize-observe { display: contents }`,\n  shadow: true,\n})\nexport class ResizeObserve implements ComponentInterface {\n  private ro: ResizeObserver;\n  private appliedStates: StateMaps;\n  private isReady = false;\n\n  @Element() host: HTMLNanoResizeObserveElement;\n  @State() currentWidth: number;\n  @State() currentHeight: number;\n  @State() classNames: string[] = [];\n  @State() contentFitX = null;\n  @State() contentFitY = null;\n\n  @Watch('classNames')\n  classNameChange() {\n    this.host.className = this.classNames.join(' ');\n    if (!this.isReady && this.classNames.includes('is-ready')) {\n      this.isReady = true;\n      this.nanoResizeObserverReady.emit();\n    }\n  }\n\n  /** Fire `nanoResizeContentFitChange` events notifying\n   * whether content currently fits or does not on the x, y or both axis'.\n   * Also makes the `content-fit-...` slots available */\n  @Prop() notifyContentFit: 'x' | 'y' | 'xy';\n\n  /** string list of sizes and optional class-names.\n   * Adds class-names and fires nanoResizeStateChange events. Upon hitting breakpoints.\n   * Format: `states=\"800w, 300h class1 class2\"` */\n  @Prop() states: string;\n\n  @Watch('states')\n  newStatesProp() {\n    this.statesChanged();\n  }\n\n  /** A resize break point is switched on or off */\n  @Event() nanoResizeStateChange!: EventEmitter<ResizeStateChangeEventDetail>;\n\n  /** Fires after the initial loading and assessment */\n  @Event() nanoResizeObserverReady!: EventEmitter<void>;\n\n  /** Fires when the content either begins or stops fitting.\n   * Will only work when `notifyContentFit` is set. */\n  @Event() nanoResizeContentFitChange!: EventEmitter<{\n    x: boolean;\n    y: boolean;\n  }>;\n\n  /** Fires after any resizing */\n  @Event() nanoResize!: EventEmitter<ResizeObserverEntry[]>;\n\n  @Watch('currentHeight')\n  @Watch('currentWidth')\n  dimensionChanged() {\n    this.assessChanges();\n  }\n\n  @Watch('states')\n  statesChanged() {\n    if (!this.states) return;\n\n    const toBpDir = (bpDir: string) => {\n      const bpDirSpl = bpDir.split(/(\\d+)/).filter((bs) => bs.length);\n      return { bp: parseInt(bpDirSpl[0]), dir: bpDirSpl[1] };\n    };\n    this.appliedStates = { h: new Map(), w: new Map() };\n\n    // parse state string\n    this.states.split(',').map((st) => {\n      st = st.trim();\n      if (st.includes(' ')) {\n        const [key, ...classes] = st.split(' ');\n        const { bp, dir } = toBpDir(key);\n        this.appliedStates[dir as keyof StateMaps].set(bp, {\n          states: classes,\n          applied: false,\n        });\n      } else {\n        const { bp, dir } = toBpDir(st);\n        this.appliedStates[dir as keyof StateMaps].set(bp, { applied: false });\n      }\n    });\n  }\n\n  private assesContentFit() {\n    if (!this.notifyContentFit) return;\n\n    const findNonContentsEle = (ele: Element) => {\n      if (window.getComputedStyle(ele).display !== 'contents') return ele;\n\n      const recurse = (e: Element): Element | null => {\n        return Array.from(e.children).find((cEle: HTMLElement) => {\n          if (window.getComputedStyle(cEle).display !== 'contents') return cEle;\n          recurse(cEle);\n        });\n      };\n      return recurse(ele);\n    };\n\n    let didChange = false;\n    const measureEle = findNonContentsEle(this.host.firstElementChild);\n\n    if (measureEle) {\n      if (this.notifyContentFit && this.notifyContentFit.includes('x')) {\n        if (\n          this.currentWidth < measureEle.scrollWidth &&\n          this.contentFitX !== false\n        ) {\n          didChange = true;\n          this.contentFitX = false;\n        } else if (\n          this.currentWidth >= measureEle.scrollWidth &&\n          this.contentFitX !== true\n        ) {\n          didChange = true;\n          this.contentFitX = true;\n        }\n      }\n\n      if (this.notifyContentFit && this.notifyContentFit.includes('y')) {\n        if (\n          this.currentHeight < measureEle.scrollHeight &&\n          this.contentFitY !== false\n        ) {\n          didChange = true;\n          this.contentFitY = false;\n        } else if (\n          this.currentHeight >= measureEle.scrollHeight &&\n          this.contentFitY !== true\n        ) {\n          didChange = true;\n          this.contentFitY = true;\n        }\n      }\n\n      if (didChange) {\n        this.nanoResizeContentFitChange.emit({\n          x: this.contentFitX,\n          y: this.contentFitY,\n        });\n      }\n    }\n  }\n\n  private assessChanges = () => {\n    if (!this.currentWidth && !this.currentHeight) return;\n    readTask(() => this.assesContentFit());\n\n    if (!this.states || !this.appliedStates) return;\n\n    const changedStates: StateMaps = { h: new Map(), w: new Map() };\n    let hasChanged = false;\n\n    Object.keys(this.appliedStates).forEach((dimType) => {\n      let dim: number;\n      if (dimType === 'h') dim = this.currentHeight;\n      else dim = this.currentWidth;\n\n      this.appliedStates[dimType].forEach(\n        (state: ResizeObserverState, bp: number) => {\n          if (dim >= bp && state.applied === false) {\n            state.applied = true;\n            changedStates[dimType].set(bp, state);\n            hasChanged = true;\n          } else if (dim < bp && state.applied === true) {\n            state.applied = false;\n            changedStates[dimType].set(bp, state);\n            hasChanged = true;\n          }\n        }\n      );\n    });\n    if (hasChanged) this.applyChanges(changedStates);\n    else if (!this.classNames.includes('is-ready'))\n      this.classNames = [...this.classNames, 'is-ready'];\n  };\n\n  private applyChanges(changes: StateMaps) {\n    if (!this.states) return;\n\n    let classNames = [...this.classNames];\n    Object.keys(changes).forEach((dimType: keyof StateMaps) => {\n      changes[dimType].forEach((state) => {\n        if (!state.states) return;\n        state.states.map((st) => {\n          if (state.applied) {\n            classNames.push(st);\n            classNames = classNames.filter((cl) => cl !== 'not-' + st);\n          } else {\n            classNames.push('not-' + st);\n            classNames = classNames.filter((cl) => cl !== st);\n          }\n        });\n      });\n    });\n    this.classNames = ['is-ready', ...classNames];\n    this.nanoResizeStateChange.emit(this.toSimpleObj(changes));\n  }\n\n  private toSimpleObj(stateMaps: StateMaps) {\n    const retObj = {};\n    Object.keys(stateMaps).forEach((dimType: keyof StateMaps) => {\n      stateMaps[dimType].forEach((state: ResizeObserverState, bp: number) => {\n        retObj[bp + dimType] = state.applied;\n      });\n    });\n    return retObj;\n  }\n\n  private attachRO() {\n    if (!window['ResizeObserver']) return;\n\n    this.ro = new ResizeObserver((ro) => {\n      const { width, height } = this.host.getBoundingClientRect();\n      this.currentWidth = Math.ceil(width);\n      this.currentHeight = Math.ceil(height);\n      this.nanoResize.emit(ro);\n    });\n    this.ro.observe(this.host);\n  }\n\n  componentWillLoad() {\n    this.classNames = Array.from(this.host.classList);\n\n    this.statesChanged();\n    // set all class as 'not-' by deafult\n    this.applyChanges(this.appliedStates);\n\n    if (!this.currentWidth && !this.currentHeight) {\n      readTask(() => {\n        const { width, height } = this.host.getBoundingClientRect();\n        this.currentWidth = Math.ceil(width);\n        this.currentHeight = Math.ceil(height);\n      });\n    } else {\n      this.assessChanges();\n    }\n  }\n\n  connectedCallback() {\n    if (!this.ro) this.attachRO();\n  }\n\n  disconnectedCallback() {\n    if (this.ro) this.ro.disconnect();\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot />\n        {!!this.notifyContentFit &&\n          (this.contentFitX !== null || this.contentFitY !== null) && [\n            !!this.contentFitX ? (\n              <slot name=\"content-fit-x\" />\n            ) : (\n              <slot name=\"content-nofit-x\" />\n            ),\n            !!this.contentFitY ? (\n              <slot name=\"content-fit-y\" />\n            ) : (\n              <slot name=\"content-nofit-y\" />\n            ),\n          ]}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"resize-observe.js","sourceRoot":"","sources":["../../../src/components/resize-observe/resize-observe.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  h,\n  Prop,\n  Element,\n  Host,\n  State,\n  Watch,\n  ComponentInterface,\n  Event,\n  EventEmitter,\n  readTask,\n} from '@stencil/core';\nimport type { ResizeStateChangeEventDetail } from '../../interface';\n\ntype ResizeObserverState = { states?: string[]; applied?: boolean };\ninterface StateMaps {\n  h: Map<number, ResizeObserverState>;\n  w: Map<number, ResizeObserverState>;\n}\n\n/**\n * A Resize-Observer utility component.\n * Takes a string list of sizes and optional class-names.\n * Adds class-names and fires `nanoResizeStateChange` events when the component reaches those sizes.\n * Additionally, can fire events when content no-longer fits within the element.\n * @slot - Main slot for any content.\n * @slot content-fit-x - optional slot (when `notifyContentFit` is set). Shows when content fits / doesn't get cut off\n * @slot content-nofit-x - optional slot (when `notifyContentFit` is set). Shows when content doesn't get cut off\n * @slot content-fit-y - optional slot (when `notifyContentFit` is set). Shows when content fits / doesn't get cut off\n * @slot content-nofit-y - optional slot (when `notifyContentFit` is set). Shows when content doesn't get cut off\n */\n@Component({\n  tag: 'nano-resize-observe',\n  styles: `nano-resize-observe { display: block }`,\n  shadow: true,\n})\nexport class ResizeObserve implements ComponentInterface {\n  private ro: ResizeObserver;\n  private appliedStates: StateMaps;\n  private isReady = false;\n\n  @Element() host: HTMLNanoResizeObserveElement;\n  @State() currentWidth: number;\n  @State() currentHeight: number;\n  @State() classNames: string[] = [];\n  @State() contentFitX = null;\n  @State() contentFitY = null;\n\n  @Watch('classNames')\n  classNameChange() {\n    this.host.className = this.classNames.join(' ');\n    if (!this.isReady && this.classNames.includes('is-ready')) {\n      this.isReady = true;\n      this.nanoResizeObserverReady.emit();\n    }\n  }\n\n  /** Fire `nanoResizeContentFitChange` events notifying\n   * whether content currently fits or does not on the x, y or both axis'.\n   * Also makes the `content-fit-...` slots available */\n  @Prop() notifyContentFit: 'x' | 'y' | 'xy';\n\n  /** string list of sizes and optional class-names.\n   * Adds class-names and fires nanoResizeStateChange events. Upon hitting breakpoints.\n   * Format: `states=\"800w, 300h class1 class2\"` */\n  @Prop() states: string;\n\n  @Watch('states')\n  newStatesProp() {\n    this.statesChanged();\n  }\n\n  /** A resize break point is switched on or off */\n  @Event() nanoResizeStateChange!: EventEmitter<ResizeStateChangeEventDetail>;\n\n  /** Fires after the initial loading and assessment */\n  @Event() nanoResizeObserverReady!: EventEmitter<void>;\n\n  /** Fires when the content either begins or stops fitting.\n   * Will only work when `notifyContentFit` is set. */\n  @Event() nanoResizeContentFitChange!: EventEmitter<{\n    x: boolean;\n    y: boolean;\n  }>;\n\n  /** Fires after any resizing */\n  @Event() nanoResize!: EventEmitter<ResizeObserverEntry[]>;\n\n  @Watch('currentHeight')\n  @Watch('currentWidth')\n  dimensionChanged() {\n    this.assessChanges();\n  }\n\n  @Watch('states')\n  statesChanged() {\n    if (!this.states) return;\n\n    const toBpDir = (bpDir: string) => {\n      const bpDirSpl = bpDir.split(/(\\d+)/).filter((bs) => bs.length);\n      return { bp: parseInt(bpDirSpl[0]), dir: bpDirSpl[1] };\n    };\n    this.appliedStates = { h: new Map(), w: new Map() };\n\n    // parse state string\n    this.states.split(',').map((st) => {\n      st = st.trim();\n      if (st.includes(' ')) {\n        const [key, ...classes] = st.split(' ');\n        const { bp, dir } = toBpDir(key);\n        this.appliedStates[dir as keyof StateMaps].set(bp, {\n          states: classes,\n          applied: false,\n        });\n      } else {\n        const { bp, dir } = toBpDir(st);\n        this.appliedStates[dir as keyof StateMaps].set(bp, { applied: false });\n      }\n    });\n  }\n\n  private assesContentFit() {\n    if (!this.notifyContentFit) return;\n\n    const findNonContentsEle = (ele: Element) => {\n      if (window.getComputedStyle(ele).display !== 'contents') return ele;\n\n      const recurse = (e: Element): Element | null => {\n        return Array.from(e.children).find((cEle: HTMLElement) => {\n          if (window.getComputedStyle(cEle).display !== 'contents') return cEle;\n          recurse(cEle);\n        });\n      };\n      return recurse(ele);\n    };\n\n    let didChange = false;\n    const measureEle = findNonContentsEle(this.host.firstElementChild);\n\n    if (measureEle) {\n      if (this.notifyContentFit && this.notifyContentFit.includes('x')) {\n        if (\n          this.currentWidth < measureEle.scrollWidth &&\n          this.contentFitX !== false\n        ) {\n          didChange = true;\n          this.contentFitX = false;\n        } else if (\n          this.currentWidth >= measureEle.scrollWidth &&\n          this.contentFitX !== true\n        ) {\n          didChange = true;\n          this.contentFitX = true;\n        }\n      }\n\n      if (this.notifyContentFit && this.notifyContentFit.includes('y')) {\n        if (\n          this.currentHeight < measureEle.scrollHeight &&\n          this.contentFitY !== false\n        ) {\n          didChange = true;\n          this.contentFitY = false;\n        } else if (\n          this.currentHeight >= measureEle.scrollHeight &&\n          this.contentFitY !== true\n        ) {\n          didChange = true;\n          this.contentFitY = true;\n        }\n      }\n\n      if (didChange) {\n        this.nanoResizeContentFitChange.emit({\n          x: this.contentFitX,\n          y: this.contentFitY,\n        });\n      }\n    }\n  }\n\n  private assessChanges = () => {\n    if (!this.currentWidth && !this.currentHeight) return;\n    readTask(() => this.assesContentFit());\n\n    if (!this.states || !this.appliedStates) return;\n\n    const changedStates: StateMaps = { h: new Map(), w: new Map() };\n    let hasChanged = false;\n\n    Object.keys(this.appliedStates).forEach((dimType) => {\n      let dim: number;\n      if (dimType === 'h') dim = this.currentHeight;\n      else dim = this.currentWidth;\n\n      this.appliedStates[dimType].forEach(\n        (state: ResizeObserverState, bp: number) => {\n          if (dim >= bp && state.applied === false) {\n            state.applied = true;\n            changedStates[dimType].set(bp, state);\n            hasChanged = true;\n          } else if (dim < bp && state.applied === true) {\n            state.applied = false;\n            changedStates[dimType].set(bp, state);\n            hasChanged = true;\n          }\n        }\n      );\n    });\n    if (hasChanged) this.applyChanges(changedStates);\n    else if (!this.classNames.includes('is-ready'))\n      this.classNames = [...this.classNames, 'is-ready'];\n  };\n\n  private applyChanges(changes: StateMaps) {\n    if (!this.states) return;\n\n    let classNames = [...this.classNames];\n    Object.keys(changes).forEach((dimType: keyof StateMaps) => {\n      changes[dimType].forEach((state) => {\n        if (!state.states) return;\n        state.states.map((st) => {\n          if (state.applied) {\n            classNames.push(st);\n            classNames = classNames.filter((cl) => cl !== 'not-' + st);\n          } else {\n            classNames.push('not-' + st);\n            classNames = classNames.filter((cl) => cl !== st);\n          }\n        });\n      });\n    });\n    this.classNames = ['is-ready', ...classNames];\n    this.nanoResizeStateChange.emit(this.toSimpleObj(changes));\n  }\n\n  private toSimpleObj(stateMaps: StateMaps) {\n    const retObj = {};\n    Object.keys(stateMaps).forEach((dimType: keyof StateMaps) => {\n      stateMaps[dimType].forEach((state: ResizeObserverState, bp: number) => {\n        retObj[bp + dimType] = state.applied;\n      });\n    });\n    return retObj;\n  }\n\n  private attachRO() {\n    if (!window['ResizeObserver']) return;\n\n    this.ro = new ResizeObserver((ro) => {\n      const { width, height } = this.host.getBoundingClientRect();\n      this.currentWidth = Math.ceil(width);\n      this.currentHeight = Math.ceil(height);\n      this.nanoResize.emit(ro);\n    });\n    this.ro.observe(this.host);\n  }\n\n  componentWillLoad() {\n    this.classNames = Array.from(this.host.classList);\n\n    this.statesChanged();\n    // set all class as 'not-' by deafult\n    this.applyChanges(this.appliedStates);\n\n    if (!this.currentWidth && !this.currentHeight) {\n      readTask(() => {\n        const { width, height } = this.host.getBoundingClientRect();\n        this.currentWidth = Math.ceil(width);\n        this.currentHeight = Math.ceil(height);\n      });\n    } else {\n      this.assessChanges();\n    }\n  }\n\n  connectedCallback() {\n    if (!this.ro) this.attachRO();\n  }\n\n  disconnectedCallback() {\n    if (this.ro) this.ro.disconnect();\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot />\n        {!!this.notifyContentFit &&\n          (this.contentFitX !== null || this.contentFitY !== null) && [\n            !!this.contentFitX ? (\n              <slot name=\"content-fit-x\" />\n            ) : (\n              <slot name=\"content-nofit-x\" />\n            ),\n            !!this.contentFitY ? (\n              <slot name=\"content-fit-y\" />\n            ) : (\n              <slot name=\"content-nofit-y\" />\n            ),\n          ]}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/select/select.js

@@ -1107,7 +1107,7 @@ export class Select {
             },
             "OptionInterface": {
               "location": "import",
-              "path": "../option/option-interface"
+              "path": "../../interface"
             }
           }
         },
@@ -1184,15 +1184,15 @@ export class Select {
         "type": "unknown",
         "mutable": true,
         "complexType": {
-          "original": "Partial<Dropdown>",
+          "original": "Partial<DropdownInterface>",
           "resolved": "{ host?: HTMLNanoDropdownElement; autoOpen?: boolean; open?: boolean; handleOpenChange?: () => void; closeOnSelect?: boolean; containingElement?: HTMLElement; tetherTo?: HTMLElement; handleTetherToChange?: () => void; placement?: PopoverPlacement; distance?: number; skidding?: number; hoist?: boolean; handlePopoverOptionsChange?: () => void; dialogTitle?: string; nanoShow?: EventEmitter<any>; nanoAfterShow?: EventEmitter<any>; nanoHide?: EventEmitter<any>; nanoAfterHide?: EventEmitter<any>; eventType?: EventEmitter<any>; secondaryOpen?: (ev: CustomEvent<any>) => void; secondaryClose?: (ev: CustomEvent<any>) => void; handlePanelSelect?: (event: CustomEvent<any>) => void; show?: () => Promise<void>; hide?: () => Promise<void>; connectedCallback?: () => void; componentDidLoad?: () => void; disconnectedCallback?: () => void; render?: () => any; }",
           "references": {
             "Partial": {
               "location": "global"
             },
-            "Dropdown": {
+            "DropdownInterface": {
               "location": "import",
-              "path": "../dropdown/dropdown"
+              "path": "../../interface"
             }
           }
         },
@@ -1215,7 +1215,7 @@ export class Select {
           "references": {
             "OptionInterface": {
               "location": "import",
-              "path": "../option/option-interface"
+              "path": "../../interface"
             }
           }
         },