@nanoporetech-digital/components 3.2.0 → 3.3.0

package/dist/collection/components/progress-bar/progress-bar.css

@@ -40,45 +40,24 @@
   text-align: center;
   white-space: nowrap;
   overflow: hidden;
-  -webkit-transition: 0.4s width, 0.4s background-color;
   transition: 0.4s width, 0.4s background-color;
-  -webkit-transform: translateZ(0);
-          transform: translateZ(0);
+  transform: translateZ(0);
   -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
           user-select: none;
-  -webkit-transform-origin: left;
-          transform-origin: left;
+  transform-origin: left;
 }
 
 .progress-bar--indeterminate .progress-bar__indicator {
-  -webkit-animation: indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1);
-          animation: indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1);
-}
-
-@-webkit-keyframes indeterminate {
-  0% {
-    scale: 1 1;
-    -webkit-transform: translateX(-100%) translateZ(0);
-            transform: translateX(-100%) translateZ(0);
-  }
-  75%, 100% {
-    scale: 1 1;
-    -webkit-transform: translateX(100%) translateZ(0);
-            transform: translateX(100%) translateZ(0);
-  }
+  animation: indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1);
 }
 
 @keyframes indeterminate {
   0% {
     scale: 1 1;
-    -webkit-transform: translateX(-100%) translateZ(0);
-            transform: translateX(-100%) translateZ(0);
+    transform: translateX(-100%) translateZ(0);
   }
   75%, 100% {
     scale: 1 1;
-    -webkit-transform: translateX(100%) translateZ(0);
-            transform: translateX(100%) translateZ(0);
+    transform: translateX(100%) translateZ(0);
   }
 }

package/dist/collection/components/range/range.css

@@ -44,19 +44,11 @@
 }
 
 .range-wrap {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
   position: relative;
-  -webkit-box-flex: 3;
-      -ms-flex: 3;
-          flex: 3;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  flex: 3;
+  align-items: center;
   -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
           user-select: none;
 }
 .range-wrap ::slotted(ion-icon[slot]) {
@@ -75,20 +67,15 @@
 
 .range-slider {
   position: relative;
-  -webkit-box-flex: 1;
-      -ms-flex: 1;
-          flex: 1;
+  flex: 1;
   width: 100%;
   height: var(--height);
   contain: size layout style;
-  cursor: -webkit-grab;
   cursor: grab;
-  -ms-touch-action: pan-y;
-      touch-action: pan-y;
+  touch-action: pan-y;
 }
 
 :host(.range-pressed) .range-slider {
-  cursor: -webkit-grabbing;
   cursor: grabbing;
 }
 
@@ -123,31 +110,22 @@
   width: var(--knob-size);
   height: var(--knob-size);
   background: var(--knob-background);
-  -webkit-box-shadow: var(--knob-box-shadow);
-          box-shadow: var(--knob-box-shadow);
+  box-shadow: var(--knob-box-shadow);
   z-index: 2;
   pointer-events: none;
-  -webkit-transform: scale(0.67);
-          transform: scale(0.67);
-  -webkit-transition-duration: 120ms;
-          transition-duration: 120ms;
-  -webkit-transition-property: background-color, border, -webkit-transform;
-  transition-property: background-color, border, -webkit-transform;
+  transform: scale(0.67);
+  transition-duration: 120ms;
   transition-property: transform, background-color, border;
-  transition-property: transform, background-color, border, -webkit-transform;
-  -webkit-transition-timing-function: ease;
-          transition-timing-function: ease;
+  transition-timing-function: ease;
 }
 :host(:not(.range-has-pin)) .range-knob-pressed .range-knob {
-  -webkit-transform: scale(1);
-          transform: scale(1);
+  transform: scale(1);
 }
 
 .range-knob-handle {
   inset-block-start: calc((var(--height) - var(--knob-handle-size)) / 2);
   inset-inline-start: 0;
-  -webkit-margin-start: calc(0px - var(--knob-handle-size) / 2);
-          margin-inline-start: calc(0px - var(--knob-handle-size) / 2);
+  margin-inline-start: calc(0px - var(--knob-handle-size) / 2);
   position: absolute;
   width: calc(var(--knob-handle-size));
   height: calc(var(--knob-handle-size));
@@ -157,8 +135,7 @@
   outline: none;
 }
 .range-knob-handle:active .range-knob, .range-knob-handle:focus .range-knob {
-  -webkit-box-shadow: var(--knob-box-shadow), var(--focus-style);
-          box-shadow: var(--knob-box-shadow), var(--focus-style);
+  box-shadow: var(--knob-box-shadow), var(--focus-style);
 }
 
 .range-tick {
@@ -181,23 +158,17 @@
 }
 
 .range-pin {
-  -webkit-transform: translate3d(0, 0, 0) scale(0.01);
-          transform: translate3d(0, 0, 0) scale(0.01);
-  -webkit-transform-origin: center top;
-          transform-origin: center top;
+  transform: translate3d(0, 0, 0) scale(0.01);
+  transform-origin: center top;
   padding: 0.66em 0;
   border-radius: 50%;
   text-align: center;
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
+  box-sizing: border-box;
   display: inline-block;
   position: relative;
   min-width: 2.33em;
   height: 2.33em;
-  -webkit-transition: background 120ms ease, -webkit-transform 120ms ease;
-  transition: background 120ms ease, -webkit-transform 120ms ease;
   transition: transform 120ms ease, background 120ms ease;
-  transition: transform 120ms ease, background 120ms ease, -webkit-transform 120ms ease;
   background: var(--pin-background);
   color: var(--pin-color);
   font-size: 0.75em;
@@ -205,25 +176,20 @@
 .range-pin::before {
   inset-block-start: 0.25em;
   inset-inline-start: 50%;
-  -webkit-margin-start: -1.08em;
-          margin-inline-start: -1.08em;
+  margin-inline-start: -1.08em;
   border-radius: 50% 50% 50% 0;
   position: absolute;
   width: 2.16em;
   height: 2.16em;
-  -webkit-transform: rotate(-45deg);
-          transform: rotate(-45deg);
-  -webkit-transition: background 120ms ease;
+  transform: rotate(-45deg);
   transition: background 120ms ease;
   background: var(--pin-background);
   content: "";
   z-index: -1;
 }
 .range-knob-pressed .range-pin {
-  -webkit-transform: translate3d(0, -50%, 0) scale(1);
-          transform: translate3d(0, -50%, 0) scale(1);
-  -webkit-transform: translate3d(0, calc((100% - var(--bar-height)) * -1), 0) scale(1);
-          transform: translate3d(0, calc((100% - var(--bar-height)) * -1), 0) scale(1);
+  transform: translate3d(0, -50%, 0) scale(1);
+  transform: translate3d(0, calc((100% - var(--bar-height)) * -1), 0) scale(1);
 }
 
 :host(.range-disabled) {
@@ -235,8 +201,7 @@
   background-color: rgba(var(--rgb-inactive), 0.5);
 }
 :host(.range-disabled) .range-knob {
-  -webkit-transform: scale(0.55);
-          transform: scale(0.55);
+  transform: scale(0.55);
   outline: 5px solid #fff;
   background-color: rgba(var(--rgb-inactive), 0.5);
 }
@@ -253,6 +218,5 @@
   background: rgba(var(--nano-color-base-rgb), 0.26);
 }
 :host(.nano-color) .range-knob-handle:active .range-knob, :host(.nano-color) .range-knob-handle:focus .range-knob {
-  -webkit-box-shadow: var(--knob-box-shadow), 0 0 0 5px rgba(var(--nano-color-tint-rgb), 0.56);
-          box-shadow: var(--knob-box-shadow), 0 0 0 5px rgba(var(--nano-color-tint-rgb), 0.56);
+  box-shadow: var(--knob-box-shadow), 0 0 0 5px rgba(var(--nano-color-tint-rgb), 0.56);
 }

package/dist/collection/components/rating/rating.css

@@ -27,14 +27,10 @@
 
 .rating-wrap {
   position: relative;
-  -webkit-margin-before: 0;
-          margin-block-start: 0;
-  -webkit-margin-after: 0;
-          margin-block-end: 0;
-  -webkit-margin-start: calc(var(--symbol-spacing) * -1);
-          margin-inline-start: calc(var(--symbol-spacing) * -1);
-  -webkit-margin-end: calc(var(--symbol-spacing) * -1);
-          margin-inline-end: calc(var(--symbol-spacing) * -1);
+  margin-block-start: 0;
+  margin-block-end: 0;
+  margin-inline-start: calc(var(--symbol-spacing) * -1);
+  margin-inline-end: calc(var(--symbol-spacing) * -1);
 }
 
 .rating {
@@ -42,34 +38,24 @@
   border-radius: 5px;
   vertical-align: middle;
   inline-size: 100%;
-  -webkit-transition: -webkit-box-shadow 0.15s ease;
-  transition: -webkit-box-shadow 0.15s ease;
   transition: box-shadow 0.15s ease;
-  transition: box-shadow 0.15s ease, -webkit-box-shadow 0.15s ease;
 }
 .rating:focus {
   outline: none;
 }
 .rating.focus-visible:focus {
-  -webkit-box-shadow: var(--focus-shadow);
-          box-shadow: var(--focus-shadow);
+  box-shadow: var(--focus-shadow);
 }
 .rating__symbols {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
   position: relative;
   font-size: var(--symbol-size);
   color: var(--symbol-color);
   white-space: nowrap;
   cursor: pointer;
   line-height: 0;
-  -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
+  justify-content: space-between;
 }
 .rating__symbols--inactive .rating__symbol > :not(nano-icon) {
   background-color: currentColor !important;
@@ -86,22 +72,17 @@
   inline-size: 100%;
 }
 .rating__symbol {
-  -webkit-transition: 0.2s -webkit-transform;
-  transition: 0.2s -webkit-transform;
   transition: 0.2s transform;
-  transition: 0.2s transform, 0.2s -webkit-transform;
   text-align: center;
 }
 .rating__symbol--hover {
-  -webkit-transform: scale(1.2);
-          transform: scale(1.2);
+  transform: scale(1.2);
 }
 .rating--disabled .rating__symbols, .rating--readonly .rating__symbols {
   cursor: default;
 }
 .rating--disabled .rating__symbol, .rating--readonly .rating__symbol {
-  -webkit-transform: none !important;
-          transform: none !important;
+  transform: none !important;
 }
 .rating--disabled {
   opacity: 0.5;

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

@@ -2,7 +2,6 @@
  * Web Components for Nanopore digital Web Apps
  */
 import { h, Host, readTask, } from '@stencil/core';
-import { debounce } from '../../utils/throttle';
 /**
  * A Resize-Observer utility component.
  * Takes a string list of sizes and optional class-names. Adds class-names and fires `nanoResizeStateChange` events when the component reaches those sizes.
@@ -10,6 +9,7 @@ import { debounce } from '../../utils/throttle';
  */
 export class ResizeObserve {
   constructor() {
+    this.isReady = false;
     this.assessChanges = () => {
       if (!this.currentWidth && !this.currentHeight)
         return;
@@ -44,6 +44,13 @@ export class ResizeObserve {
     this.classNames = [];
     this.states = undefined;
   }
+  classNameChange() {
+    this.host.className = this.classNames.join(' ');
+    if (!this.isReady && this.classNames.includes('is-ready')) {
+      this.isReady = true;
+      this.nanoResizeObserverReady.emit();
+    }
+  }
   dimensionChanged() {
     this.assessChanges();
   }
@@ -81,10 +88,14 @@ export class ResizeObserve {
         if (!state.states)
           return;
         state.states.map((st) => {
-          if (state.applied)
+          if (state.applied) {
             classNames.push(st);
-          else
+            classNames = classNames.filter((cl) => cl !== 'not-' + st);
+          }
+          else {
+            classNames.push('not-' + st);
             classNames = classNames.filter((cl) => cl !== st);
+          }
         });
       });
     });
@@ -109,10 +120,8 @@ export class ResizeObserve {
     });
     this.ro.observe(this.host);
   }
-  connectedCallback() {
-    this.assessChanges = debounce(this.assessChanges, 50);
-  }
-  componentDidLoad() {
+  componentWillLoad() {
+    this.classNames = Array.from(this.host.classList);
     if (!this.states)
       return;
     if (!this.currentWidth || !this.currentHeight) {
@@ -123,19 +132,18 @@ export class ResizeObserve {
       });
     }
     this.statesChanged();
+    // set all class as 'not-' by deafult
+    this.applyChanges(this.appliedStates);
   }
   disconnectedCallback() {
     if (this.ro)
       this.ro.disconnect();
   }
   render() {
-    return (h(Host, { class: {
-        [this.classNames.join(' ')]: true,
-      } }, h("slot", null)));
+    return (h(Host, null, h("slot", null)));
   }
   static get is() { return "nano-resize-observe"; }
-  static get encapsulation() { return "shadow"; }
-  static get styles() { return ":host { display: block }"; }
+  static get styles() { return "nano-resize-observe { display: block }"; }
   static get properties() {
     return {
       "states": {
@@ -187,11 +195,29 @@ export class ResizeObserve {
             }
           }
         }
+      }, {
+        "method": "nanoResizeObserverReady",
+        "name": "nanoResizeObserverReady",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Fires after the initial loading and assessment"
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
       }];
   }
   static get elementRef() { return "host"; }
   static get watchers() {
     return [{
+        "propName": "classNames",
+        "methodName": "classNameChange"
+      }, {
         "propName": "currentHeight",
         "methodName": "dimensionChanged"
       }, {

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 { debounce } from '../../utils/throttle';\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. Adds class-names and fires `nanoResizeStateChange` events when the component reaches those sizes.\n * @slot - Main slot for any content.\n */\n@Component({\n  tag: 'nano-resize-observe',\n  shadow: true,\n  styles: `:host { display: block }`,\n})\nexport class ResizeObserve implements ComponentInterface {\n  private ro: ResizeObserver;\n  private appliedStates: StateMaps;\n\n  @Element() host: HTMLNanoResizeObserveElement;\n  @State() currentWidth: number;\n  @State() currentHeight: number;\n  @State() classNames: string[] = [];\n\n  /** string list of sizes and optional class-names. Adds class-names and fires nanoResizeStateChange events. Upon hitting breakpoints.\n   * Format: `states=\"800w, 300h class1 class2\"` */\n  @Prop() states: string;\n\n  /** A resize break point is switched on or off */\n  @Event() nanoResizeStateChange!: EventEmitter<ResizeStateChangeEventDetail>;\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    if (!this.ro) this.attachRO();\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 assessChanges = () => {\n    if (!this.currentWidth && !this.currentHeight) return;\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 = ['is-ready'];\n  };\n\n  private applyChanges(changes: StateMaps) {\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) classNames.push(st);\n          else classNames = classNames.filter((cl) => cl !== st);\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    this.ro = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        this.currentWidth = entry.contentRect.width;\n        this.currentHeight = entry.contentRect.height;\n      }\n    });\n    this.ro.observe(this.host);\n  }\n\n  connectedCallback() {\n    this.assessChanges = debounce(this.assessChanges, 50);\n  }\n\n  componentDidLoad() {\n    if (!this.states) return;\n    if (!this.currentWidth || !this.currentHeight) {\n      readTask(() => {\n        const { width, height } = this.host.getBoundingClientRect();\n        this.currentWidth = width;\n        this.currentHeight = height;\n      });\n    }\n    this.statesChanged();\n  }\n\n  disconnectedCallback() {\n    if (this.ro) this.ro.disconnect();\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          [this.classNames.join(' ')]: true,\n        }}\n      >\n        <slot />\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';\n// import { debounce } from '../../utils/throttle';\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. Adds class-names and fires `nanoResizeStateChange` events when the component reaches those sizes.\n * @slot - Main slot for any content.\n */\n@Component({\n  tag: 'nano-resize-observe',\n  styles: `nano-resize-observe { display: block }`,\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\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  /** string list of sizes and optional class-names. Adds class-names and fires nanoResizeStateChange events. Upon hitting breakpoints.\n   * Format: `states=\"800w, 300h class1 class2\"` */\n  @Prop() states: string;\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  @Watch('currentHeight')\n  @Watch('currentWidth')\n  dimensionChanged() {\n    this.assessChanges();\n  }\n\n  @Watch('states')\n  statesChanged() {\n    if (!this.states) return;\n    if (!this.ro) this.attachRO();\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 assessChanges = () => {\n    if (!this.currentWidth && !this.currentHeight) return;\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 = ['is-ready'];\n  };\n\n  private applyChanges(changes: StateMaps) {\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    this.ro = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        this.currentWidth = entry.contentRect.width;\n        this.currentHeight = entry.contentRect.height;\n      }\n    });\n    this.ro.observe(this.host);\n  }\n\n  componentWillLoad() {\n    this.classNames = Array.from(this.host.classList);\n    if (!this.states) return;\n\n    if (!this.currentWidth || !this.currentHeight) {\n      readTask(() => {\n        const { width, height } = this.host.getBoundingClientRect();\n        this.currentWidth = width;\n        this.currentHeight = height;\n      });\n    }\n    this.statesChanged();\n    // set all class as 'not-' by deafult\n    this.applyChanges(this.appliedStates);\n  }\n\n  disconnectedCallback() {\n    if (this.ro) this.ro.disconnect();\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot />\n      </Host>\n    );\n  }\n}\n"]}