@nanoporetech-digital/components 3.7.1 → 3.8.1

package/dist/components/progress-bar.js

@@ -3,7 +3,7 @@
  */
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 
-const progressBarCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--height:1em;--track-color:rgba(var(--nano-track-rgb, 228, 230, 232), 1);--indicator-color:rgba(var(--nano-indicator-rgb, 84, 140, 175), 1);--label-color:var(--nano-color-white, white);display:block}.progress-bar{position:relative;background-color:var(--track-color);height:var(--height);border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));overflow:hidden}.progress-bar__indicator{height:100%;font-size:0.75em;background-color:var(--indicator-color);color:var(--label-color);text-align:center;white-space:nowrap;overflow:hidden;transition:0.4s width, 0.4s background-color;transform:translateZ(0);-webkit-user-select:none;user-select:none;transform-origin:left}.progress-bar--indeterminate .progress-bar__indicator{animation:indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1)}@keyframes indeterminate{0%{scale:1 1;transform:translateX(-100%) translateZ(0)}75%,100%{scale:1 1;transform:translateX(100%) translateZ(0)}}";
+const progressBarCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--height:1em;--track-color:rgb(var(--nano-track-rgb, 228 230 232) / 100%);--indicator-color:rgb(var(--nano-indicator-rgb, 84 140 175) / 100%);--label-color:var(--nano-color-white, white);display:block}.progress-bar{position:relative;background-color:var(--track-color);height:var(--height);border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));overflow:hidden}.progress-bar__indicator{height:100%;font-size:0.75em;background-color:var(--indicator-color);color:var(--label-color);text-align:center;white-space:nowrap;overflow:hidden;transition:0.4s width, 0.4s background-color;transform:translateZ(0);-webkit-user-select:none;user-select:none;transform-origin:left}.progress-bar--indeterminate .progress-bar__indicator{animation:indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1)}@keyframes indeterminate{0%{scale:1 1;transform:translateX(-100%) translateZ(0)}75%,100%{scale:1 1;transform:translateX(100%) translateZ(0)}}";
 
 const ProgressBar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/progress-bar.js.map

@@ -1 +1 @@
-{"file":"progress-bar.js","mappings":";;;;;AAAA,MAAM,cAAc,GAAG,8iCAA8iC;;MCiBxjC,WAAW;;;;;iBAIN,CAAC;yBAGO,KAAK;uBAGP,KAAK;;EAE3B,MAAM;IACJ,QACE,WACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;QACL,cAAc,EAAE,IAAI;QACpB,6BAA6B,EAAE,IAAI,CAAC,aAAa;OAClD,EACD,IAAI,EAAC,aAAa,EAClB,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,SAAS,gBACxB,UAAU,mBACP,GAAG,mBACH,KAAK,mBACJ,IAAI,CAAC,aAAa,GAAG,IAAI,GAAG,IAAI,CAAC,KAAK,IAErD,WACE,IAAI,EAAC,WAAW,EAChB,KAAK,EAAC,yBAAyB,EAC/B,KAAK,EAAE;QACL,KAAK,EAAE,CAAC,IAAI,CAAC,aAAa,GAAG,GAAG,IAAI,CAAC,KAAK,GAAG,GAAG,SAAS;OAC1D,IAED,YAAM,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,qBAAqB,IAC5C,gBACG,CAAC,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,WAAW,GAAG,GAAG,IAAI,CAAC,KAAK,GAAG,GAAG,EAAE,CAC3D,CACF,CACH,CACF,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/progress-bar/progress-bar.scss?tag=nano-progress-bar&encapsulation=shadow","./src/components/progress-bar/progress-bar.tsx"],"sourcesContent":["@import '../../global/style/nano-theme/components';\n@import '../../global/style/nano-theme/layers';\n\n/**\n * @prop --height: The progress bar's height. Default 1em\n * @prop --track-color: The track color. Default rgba(#{$progress-track-color-rgb}, 1);\n * @prop --indicator-color: The indicator color. Default rgba(#{$progress-indicator-color-rgb}, 1);\n * @prop --label-color: The label color. Default var(--nano-color-white, white);\n */\n:host {\n  --height: 1em;\n  --track-color: rgba(#{$progress-track-color-rgb}, 1);\n  --indicator-color: rgba(#{$progress-indicator-color-rgb}, 1);\n  --label-color: var(--nano-color-white, white);\n\n  display: block;\n}\n\n.progress-bar {\n  position: relative;\n  background-color: var(--track-color);\n  height: var(--height);\n  border-radius: $layer-border-radius;\n  overflow: hidden;\n}\n\n.progress-bar__indicator {\n  height: 100%;\n  font-size: 0.75em;\n  background-color: var(--indicator-color);\n  color: var(--label-color);\n  text-align: center;\n  white-space: nowrap;\n  overflow: hidden;\n  transition: 0.4s width, 0.4s background-color;\n  transform: translateZ(0);\n  user-select: none;\n  transform-origin: left;\n}\n\n// Indeterminate\n.progress-bar--indeterminate .progress-bar__indicator {\n  animation: indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1);\n}\n\n@keyframes indeterminate {\n  0% {\n    scale: 1 1;\n    transform: translateX(-100%) translateZ(0);\n  }\n\n  75%,\n  100% {\n    scale: 1 1;\n    transform: translateX(100%) translateZ(0);\n  }\n}\n","import { Component, Prop, h, Element } from '@stencil/core';\n\n/**\n * Used to show the status of an ongoing operation.\n *\n * @slot - A label to show inside the indicator.\n *\n * @part base - The component's base wrapper.\n * @part indicator - The progress bar indicator.\n * @part label - The progress bar label.\n */\n\n@Component({\n  tag: 'nano-progress-bar',\n  styleUrl: 'progress-bar.scss',\n  shadow: true,\n})\nexport class ProgressBar {\n  @Element() host: HTMLNanoProgressBarElement;\n\n  /** The progress bar's percentage, 0 to 100. */\n  @Prop() value = 0;\n\n  /** When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state. */\n  @Prop() indeterminate = false;\n\n  /** Whether to show the progress bar's current percent as text. Will be overwritten if you use the default slot.  */\n  @Prop() showPercent = false;\n\n  render() {\n    return (\n      <div\n        part=\"base\"\n        class={{\n          'progress-bar': true,\n          'progress-bar--indeterminate': this.indeterminate,\n        }}\n        role=\"progressbar\"\n        title={this.host.title || undefined}\n        aria-label=\"Progress\"\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n        aria-valuenow={this.indeterminate ? null : this.value}\n      >\n        <div\n          part=\"indicator\"\n          class=\"progress-bar__indicator\"\n          style={{\n            width: !this.indeterminate ? `${this.value}%` : undefined,\n          }}\n        >\n          <span part=\"label\" class=\"progress-bar__label\">\n            <slot>\n              {!this.indeterminate && this.showPercent ? `${this.value}%` : ''}\n            </slot>\n          </span>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"progress-bar.js","mappings":";;;;;AAAA,MAAM,cAAc,GAAG,gjCAAgjC;;MCiB1jC,WAAW;;;;;iBAIN,CAAC;yBAGO,KAAK;uBAGP,KAAK;;EAE3B,MAAM;IACJ,QACE,WACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;QACL,cAAc,EAAE,IAAI;QACpB,6BAA6B,EAAE,IAAI,CAAC,aAAa;OAClD,EACD,IAAI,EAAC,aAAa,EAClB,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,SAAS,gBACxB,UAAU,mBACP,GAAG,mBACH,KAAK,mBACJ,IAAI,CAAC,aAAa,GAAG,IAAI,GAAG,IAAI,CAAC,KAAK,IAErD,WACE,IAAI,EAAC,WAAW,EAChB,KAAK,EAAC,yBAAyB,EAC/B,KAAK,EAAE;QACL,KAAK,EAAE,CAAC,IAAI,CAAC,aAAa,GAAG,GAAG,IAAI,CAAC,KAAK,GAAG,GAAG,SAAS;OAC1D,IAED,YAAM,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,qBAAqB,IAC5C,gBACG,CAAC,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,WAAW,GAAG,GAAG,IAAI,CAAC,KAAK,GAAG,GAAG,EAAE,CAC3D,CACF,CACH,CACF,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/progress-bar/progress-bar.scss?tag=nano-progress-bar&encapsulation=shadow","./src/components/progress-bar/progress-bar.tsx"],"sourcesContent":["@import '../../global/style/nano-theme/components';\n@import '../../global/style/nano-theme/layers';\n\n/**\n * @prop --height: The progress bar's height. Default 1em\n * @prop --track-color: The track color. Default rgba(#{$progress-track-color-rgb}, 1);\n * @prop --indicator-color: The indicator color. Default rgba(#{$progress-indicator-color-rgb}, 1);\n * @prop --label-color: The label color. Default var(--nano-color-white, white);\n */\n:host {\n  --height: 1em;\n  --track-color: rgb(#{$progress-track-color-rgb} / 100%);\n  --indicator-color: rgb(#{$progress-indicator-color-rgb} / 100%);\n  --label-color: var(--nano-color-white, white);\n\n  display: block;\n}\n\n.progress-bar {\n  position: relative;\n  background-color: var(--track-color);\n  height: var(--height);\n  border-radius: $layer-border-radius;\n  overflow: hidden;\n}\n\n.progress-bar__indicator {\n  height: 100%;\n  font-size: 0.75em;\n  background-color: var(--indicator-color);\n  color: var(--label-color);\n  text-align: center;\n  white-space: nowrap;\n  overflow: hidden;\n  transition: 0.4s width, 0.4s background-color;\n  transform: translateZ(0);\n  user-select: none;\n  transform-origin: left;\n}\n\n// Indeterminate\n.progress-bar--indeterminate .progress-bar__indicator {\n  animation: indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1);\n}\n\n@keyframes indeterminate {\n  0% {\n    scale: 1 1;\n    transform: translateX(-100%) translateZ(0);\n  }\n\n  75%,\n  100% {\n    scale: 1 1;\n    transform: translateX(100%) translateZ(0);\n  }\n}\n","import { Component, Prop, h, Element } from '@stencil/core';\n\n/**\n * Used to show the status of an ongoing operation.\n *\n * @slot - A label to show inside the indicator.\n *\n * @part base - The component's base wrapper.\n * @part indicator - The progress bar indicator.\n * @part label - The progress bar label.\n */\n\n@Component({\n  tag: 'nano-progress-bar',\n  styleUrl: 'progress-bar.scss',\n  shadow: true,\n})\nexport class ProgressBar {\n  @Element() host: HTMLNanoProgressBarElement;\n\n  /** The progress bar's percentage, 0 to 100. */\n  @Prop() value = 0;\n\n  /** When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state. */\n  @Prop() indeterminate = false;\n\n  /** Whether to show the progress bar's current percent as text. Will be overwritten if you use the default slot.  */\n  @Prop() showPercent = false;\n\n  render() {\n    return (\n      <div\n        part=\"base\"\n        class={{\n          'progress-bar': true,\n          'progress-bar--indeterminate': this.indeterminate,\n        }}\n        role=\"progressbar\"\n        title={this.host.title || undefined}\n        aria-label=\"Progress\"\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n        aria-valuenow={this.indeterminate ? null : this.value}\n      >\n        <div\n          part=\"indicator\"\n          class=\"progress-bar__indicator\"\n          style={{\n            width: !this.indeterminate ? `${this.value}%` : undefined,\n          }}\n        >\n          <span part=\"label\" class=\"progress-bar__label\">\n            <slot>\n              {!this.indeterminate && this.showPercent ? `${this.value}%` : ''}\n            </slot>\n          </span>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/resize-observe.js

@@ -59,6 +59,9 @@ const ResizeObserve = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       this.nanoResizeObserverReady.emit();
     }
   }
+  newStatesProp() {
+    this.statesChanged();
+  }
   dimensionChanged() {
     this.assessChanges();
   }
@@ -105,7 +108,7 @@ const ResizeObserve = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     let didChange = false;
     const measureEle = findNonContentsEle(this.host.firstElementChild);
     if (measureEle) {
-      if (this.notifyContentFit?.includes('x')) {
+      if (this.notifyContentFit && this.notifyContentFit.includes('x')) {
         if (this.currentWidth < measureEle.scrollWidth &&
           this.contentFitX !== false) {
           didChange = true;
@@ -117,7 +120,7 @@ const ResizeObserve = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
           this.contentFitX = true;
         }
       }
-      if (this.notifyContentFit?.includes('y')) {
+      if (this.notifyContentFit && this.notifyContentFit.includes('y')) {
         if (this.currentHeight < measureEle.scrollHeight &&
           this.contentFitY !== false) {
           didChange = true;
@@ -170,6 +173,8 @@ const ResizeObserve = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     return retObj;
   }
   attachRO() {
+    if (!window['ResizeObserver'])
+      return;
     this.ro = new ResizeObserver(() => {
       const { width, height } = this.host.getBoundingClientRect();
       this.currentWidth = Math.ceil(width);
@@ -178,17 +183,20 @@ const ResizeObserve = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.ro.observe(this.host);
   }
   componentWillLoad() {
+    this.statesChanged();
+    // set all class as 'not-' by deafult
+    this.applyChanges(this.appliedStates);
     this.classNames = Array.from(this.host.classList);
-    if (!this.currentWidth || !this.currentHeight) {
+    if (!this.currentWidth && !this.currentHeight) {
       readTask(() => {
         const { width, height } = this.host.getBoundingClientRect();
         this.currentWidth = Math.ceil(width);
         this.currentHeight = Math.ceil(height);
       });
     }
-    this.statesChanged();
-    // set all class as 'not-' by deafult
-    this.applyChanges(this.appliedStates);
+    else {
+      this.assessChanges();
+    }
   }
   connectedCallback() {
     if (!this.ro)
@@ -208,9 +216,9 @@ const ResizeObserve = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   get host() { return this; }
   static get watchers() { return {
     "classNames": ["classNameChange"],
+    "states": ["newStatesProp", "statesChanged"],
     "currentHeight": ["dimensionChanged"],
-    "currentWidth": ["dimensionChanged"],
-    "states": ["statesChanged"]
+    "currentWidth": ["dimensionChanged"]
   }; }
   static get style() { return "nano-resize-observe { display: block }"; }
 }, [1, "nano-resize-observe", {

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

@@ -1 +1 @@
-{"file":"resize-observe.js","mappings":";;;;;MAqCa,aAAa;;;;;;;;IAGhB,YAAO,GAAG,KAAK,CAAC;IAoIhB,kBAAa,GAAG;MACtB,IAAI,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,IAAI,CAAC,aAAa;QAAE,OAAO;MACtD,QAAQ,CAAC,MAAM,IAAI,CAAC,eAAe,EAAE,CAAC,CAAC;MAEvC,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,aAAa;QAAE,OAAO;MAEhD,MAAM,aAAa,GAAc,EAAE,CAAC,EAAE,IAAI,GAAG,EAAE,EAAE,CAAC,EAAE,IAAI,GAAG,EAAE,EAAE,CAAC;MAChE,IAAI,UAAU,GAAG,KAAK,CAAC;MAEvB,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,OAAO,CAAC,CAAC,OAAO;QAC9C,IAAI,GAAW,CAAC;QAChB,IAAI,OAAO,KAAK,GAAG;UAAE,GAAG,GAAG,IAAI,CAAC,aAAa,CAAC;;UACzC,GAAG,GAAG,IAAI,CAAC,YAAY,CAAC;QAE7B,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,OAAO,CACjC,CAAC,KAA0B,EAAE,EAAU;UACrC,IAAI,GAAG,IAAI,EAAE,IAAI,KAAK,CAAC,OAAO,KAAK,KAAK,EAAE;YACxC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC;YACrB,aAAa,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC;YACtC,UAAU,GAAG,IAAI,CAAC;WACnB;eAAM,IAAI,GAAG,GAAG,EAAE,IAAI,KAAK,CAAC,OAAO,KAAK,IAAI,EAAE;YAC7C,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC;YACtB,aAAa,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC;YACtC,UAAU,GAAG,IAAI,CAAC;WACnB;SACF,CACF,CAAC;OACH,CAAC,CAAC;MACH,IAAI,UAAU;QAAE,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,CAAC;WAC5C,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,UAAU,CAAC;QAC5C,IAAI,CAAC,UAAU,GAAG,CAAC,UAAU,CAAC,CAAC;KAClC,CAAC;;;sBA9J8B,EAAE;uBACX,IAAI;uBACJ,IAAI;;;;EAG3B,eAAe;IACb,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAChD,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE;MACzD,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;MACpB,IAAI,CAAC,uBAAuB,CAAC,IAAI,EAAE,CAAC;KACrC;GACF;EAyBD,gBAAgB;IACd,IAAI,CAAC,aAAa,EAAE,CAAC;GACtB;EAGD,aAAa;IACX,IAAI,CAAC,IAAI,CAAC,MAAM;MAAE,OAAO;IAEzB,MAAM,OAAO,GAAG,CAAC,KAAa;MAC5B,MAAM,QAAQ,GAAG,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,MAAM,CAAC,CAAC;MAChE,OAAO,EAAE,EAAE,EAAE,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;KACxD,CAAC;IACF,IAAI,CAAC,aAAa,GAAG,EAAE,CAAC,EAAE,IAAI,GAAG,EAAE,EAAE,CAAC,EAAE,IAAI,GAAG,EAAE,EAAE,CAAC;;IAGpD,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE;MAC5B,EAAE,GAAG,EAAE,CAAC,IAAI,EAAE,CAAC;MACf,IAAI,EAAE,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;QACpB,MAAM,CAAC,GAAG,EAAE,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QACxC,MAAM,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC;QACjC,IAAI,CAAC,aAAa,CAAC,GAAsB,CAAC,CAAC,GAAG,CAAC,EAAE,EAAE;UACjD,MAAM,EAAE,OAAO;UACf,OAAO,EAAE,KAAK;SACf,CAAC,CAAC;OACJ;WAAM;QACL,MAAM,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,OAAO,CAAC,EAAE,CAAC,CAAC;QAChC,IAAI,CAAC,aAAa,CAAC,GAAsB,CAAC,CAAC,GAAG,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC;OACxE;KACF,CAAC,CAAC;GACJ;EAEO,eAAe;IACrB,IAAI,CAAC,IAAI,CAAC,gBAAgB;MAAE,OAAO;IAEnC,MAAM,kBAAkB,GAAG,CAAC,GAAY;MACtC,IAAI,MAAM,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,OAAO,KAAK,UAAU;QAAE,OAAO,GAAG,CAAC;MAEpE,MAAM,OAAO,GAAG,CAAC,CAAU;QACzB,OAAO,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,IAAiB;UACnD,IAAI,MAAM,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,OAAO,KAAK,UAAU;YAAE,OAAO,IAAI,CAAC;UACtE,OAAO,CAAC,IAAI,CAAC,CAAC;SACf,CAAC,CAAC;OACJ,CAAC;MACF,OAAO,OAAO,CAAC,GAAG,CAAC,CAAC;KACrB,CAAC;IAEF,IAAI,SAAS,GAAG,KAAK,CAAC;IACtB,MAAM,UAAU,GAAG,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;IAEnE,IAAI,UAAU,EAAE;MACd,IAAI,IAAI,CAAC,gBAAgB,EAAE,QAAQ,CAAC,GAAG,CAAC,EAAE;QACxC,IACE,IAAI,CAAC,YAAY,GAAG,UAAU,CAAC,WAAW;UAC1C,IAAI,CAAC,WAAW,KAAK,KAAK,EAC1B;UACA,SAAS,GAAG,IAAI,CAAC;UACjB,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;SAC1B;aAAM,IACL,IAAI,CAAC,YAAY,IAAI,UAAU,CAAC,WAAW;UAC3C,IAAI,CAAC,WAAW,KAAK,IAAI,EACzB;UACA,SAAS,GAAG,IAAI,CAAC;UACjB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;SACzB;OACF;MAED,IAAI,IAAI,CAAC,gBAAgB,EAAE,QAAQ,CAAC,GAAG,CAAC,EAAE;QACxC,IACE,IAAI,CAAC,aAAa,GAAG,UAAU,CAAC,YAAY;UAC5C,IAAI,CAAC,WAAW,KAAK,KAAK,EAC1B;UACA,SAAS,GAAG,IAAI,CAAC;UACjB,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;SAC1B;aAAM,IACL,IAAI,CAAC,aAAa,IAAI,UAAU,CAAC,YAAY;UAC7C,IAAI,CAAC,WAAW,KAAK,IAAI,EACzB;UACA,SAAS,GAAG,IAAI,CAAC;UACjB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;SACzB;OACF;MAED,IAAI,SAAS,EAAE;QACb,IAAI,CAAC,0BAA0B,CAAC,IAAI,CAAC;UACnC,CAAC,EAAE,IAAI,CAAC,WAAW;UACnB,CAAC,EAAE,IAAI,CAAC,WAAW;SACpB,CAAC,CAAC;OACJ;KACF;GACF;EAmCO,YAAY,CAAC,OAAkB;IACrC,IAAI,CAAC,IAAI,CAAC,MAAM;MAAE,OAAO;IAEzB,IAAI,UAAU,GAAG,CAAC,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC;IACtC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC,OAAwB;MACpD,OAAO,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC,KAAK;QAC7B,IAAI,CAAC,KAAK,CAAC,MAAM;UAAE,OAAO;QAC1B,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE;UAClB,IAAI,KAAK,CAAC,OAAO,EAAE;YACjB,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;YACpB,UAAU,GAAG,UAAU,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,MAAM,GAAG,EAAE,CAAC,CAAC;WAC5D;eAAM;YACL,UAAU,CAAC,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;YAC7B,UAAU,GAAG,UAAU,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC;WACnD;SACF,CAAC,CAAC;OACJ,CAAC,CAAC;KACJ,CAAC,CAAC;IACH,IAAI,CAAC,UAAU,GAAG,CAAC,UAAU,EAAE,GAAG,UAAU,CAAC,CAAC;IAC9C,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC;GAC5D;EAEO,WAAW,CAAC,SAAoB;IACtC,MAAM,MAAM,GAAG,EAAE,CAAC;IAClB,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,OAAO,CAAC,CAAC,OAAwB;MACtD,SAAS,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC,KAA0B,EAAE,EAAU;QAChE,MAAM,CAAC,EAAE,GAAG,OAAO,CAAC,GAAG,KAAK,CAAC,OAAO,CAAC;OACtC,CAAC,CAAC;KACJ,CAAC,CAAC;IACH,OAAO,MAAM,CAAC;GACf;EAEO,QAAQ;IACd,IAAI,CAAC,EAAE,GAAG,IAAI,cAAc,CAAC;MAC3B,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,qBAAqB,EAAE,CAAC;MAC5D,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;MACrC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KACxC,CAAC,CAAC;IACH,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GAC5B;EAED,iBAAiB;IACf,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAElD,IAAI,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;MAC7C,QAAQ,CAAC;QACP,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAC5D,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACrC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;OACxC,CAAC,CAAC;KACJ;IACD,IAAI,CAAC,aAAa,EAAE,CAAC;;IAErB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;GACvC;EAED,iBAAiB;IACf,IAAI,CAAC,IAAI,CAAC,EAAE;MAAE,IAAI,CAAC,QAAQ,EAAE,CAAC;GAC/B;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,EAAE;MAAE,IAAI,CAAC,EAAE,CAAC,UAAU,EAAE,CAAC;GACnC;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,eAAQ,EACP,CAAC,CAAC,IAAI,CAAC,gBAAgB;OACrB,IAAI,CAAC,WAAW,KAAK,IAAI,IAAI,IAAI,CAAC,WAAW,KAAK,IAAI,CAAC,IAAI;MAC1D,CAAC,CAAC,IAAI,CAAC,WAAW,IAChB,YAAM,IAAI,EAAC,eAAe,GAAG,KAE7B,YAAM,IAAI,EAAC,iBAAiB,GAAG,CAChC;MACD,CAAC,CAAC,IAAI,CAAC,WAAW,IAChB,YAAM,IAAI,EAAC,eAAe,GAAG,KAE7B,YAAM,IAAI,EAAC,iBAAiB,GAAG,CAChC;KACF,CACE,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/resize-observe/resize-observe.tsx"],"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. 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  /** Fires when the content either begins or stops to fit. Will only work when `notifyContentFit` is set. */\n  @Event() nanoResizeContentFitChange!: EventEmitter<{\n    x: boolean;\n    y: boolean;\n  }>;\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?.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?.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 = ['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    this.ro = new ResizeObserver(() => {\n      const { width, height } = this.host.getBoundingClientRect();\n      this.currentWidth = Math.ceil(width);\n      this.currentHeight = Math.ceil(height);\n    });\n    this.ro.observe(this.host);\n  }\n\n  componentWillLoad() {\n    this.classNames = Array.from(this.host.classList);\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    }\n    this.statesChanged();\n    // set all class as 'not-' by deafult\n    this.applyChanges(this.appliedStates);\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","mappings":"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","names":[],"sources":["./src/components/resize-observe/resize-observe.tsx"],"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. 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 to fit. Will only work when `notifyContentFit` is set. */\n  @Event() nanoResizeContentFitChange!: EventEmitter<{\n    x: boolean;\n    y: boolean;\n  }>;\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 = ['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(() => {\n      const { width, height } = this.host.getBoundingClientRect();\n      this.currentWidth = Math.ceil(width);\n      this.currentHeight = Math.ceil(height);\n    });\n    this.ro.observe(this.host);\n  }\n\n  componentWillLoad() {\n    this.statesChanged();\n    // set all class as 'not-' by deafult\n    this.applyChanges(this.appliedStates);\n\n    this.classNames = Array.from(this.host.classList);\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}

package/dist/components/select.js

@@ -13,10 +13,37 @@ import { d as defineCustomElement$3 } from './icon.js';
 import { d as defineCustomElement$2 } from './menu.js';
 import { d as defineCustomElement$1 } from './option.js';
 
-const selectCss = ".sc-nano-select-h{box-sizing:border-box}*.sc-nano-select,*.sc-nano-select::before,*.sc-nano-select::after{box-sizing:border-box}[hidden].sc-nano-select{display:none !important}[disabled].sc-nano-select-h:not([disabled=false]){opacity:0.5}.form-ctrl.sc-nano-select{min-inline-size:100%;display:block}.form-ctrl.has-helper-end.sc-nano-select{display:flex;gap:1rem;opacity:0}.form-ctrl.has-helper-end.is-ready.sc-nano-select{opacity:1}.form-ctrl.has-helper-end.sc-nano-select .form-ctrl__wrapper.sc-nano-select{flex:1 1 100%}.form-ctrl.has-helper-end.sc-nano-select .form-ctrl__helper-end.sc-nano-select{display:none}.form-ctrl.has-helper-end.has-enough-width.sc-nano-select .form-ctrl__helper-end.sc-nano-select{display:block}.form-ctrl.has-helper-end.has-enough-width.sc-nano-select .form-ctrl__helper.sc-nano-select{display:none}.form-ctrl__wrapper.sc-nano-select{display:block}label.sc-nano-select,.form-ctrl__more.sc-nano-select,.form-ctrl__error.sc-nano-select,.form-ctrl__helper.sc-nano-select{display:block;inline-size:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}label.visually-hide.sc-nano-select,.form-ctrl__more.visually-hide.sc-nano-select,.form-ctrl__error.visually-hide.sc-nano-select,.form-ctrl__helper.visually-hide.sc-nano-select{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.form-ctrl__float-label.sc-nano-select{padding-block:0;padding-inline-end:0;padding-inline-start:var(--padding-start);color:var(--label-color);position:absolute;font-size:1.15em;transform:translateY(-50%);transform-origin:top left;inset-block-start:50%;transition:all 0.125s ease-in;opacity:1}.has-focus.sc-nano-select-h .form-ctrl__float-label.sc-nano-select,.has-value.sc-nano-select-h .form-ctrl__float-label.sc-nano-select{transform:translateY(-110%);font-size:0.8em;opacity:0.7}.form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select{opacity:0;transition:opacity 0.125s ease-in}.has-focus.sc-nano-select-h .form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select,.has-value.sc-nano-select-h .form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select{opacity:1}.form-ctrl__textarea.sc-nano-select .form-ctrl__float-label.sc-nano-select{inset-block-start:50%}.has-focus.sc-nano-select-h .form-ctrl__textarea.sc-nano-select .form-ctrl__float-label.sc-nano-select{inset-block-start:0;transform:translateY(38%)}.has-value.sc-nano-select-h .form-ctrl__textarea.sc-nano-select .form-ctrl__float-label.sc-nano-select{inset-block-start:0;transform:translateY(38%)}.form-ctrl__label.sc-nano-select{color:var(--label-color);font-size:var(--label-font-size);padding-block-end:var(--padding-bottom);line-height:1;display:flex}.form-ctrl__label.sc-nano-select .form-ctrl__label-wrap.sc-nano-select{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.form-ctrl__label.sc-nano-select .form-ctrl__label-placeholder.sc-nano-select{margin-block:unset;margin-inline-end:5px;margin-inline-start:0;opacity:0;-webkit-appearance:none;appearance:none;transition:0.3s ease opacity;font-size:0.9em}.form-ctrl__label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select{margin-block:unset;margin-inline-end:0;margin-inline-start:auto;font-size:0.9em;opacity:0.5}.has-value.sc-nano-select-h .form-ctrl__label.sc-nano-select .form-ctrl__label-placeholder.sc-nano-select{opacity:0.5}.has-focus.sc-nano-select-h .form-ctrl__label.sc-nano-select{color:var(--label-color--focus)}.is-invalid.sc-nano-select-h .form-ctrl__label.sc-nano-select{color:var(--label-color--invalid)}.has-float-label.sc-nano-select .select__multi-input.sc-nano-select,.has-float-label.sc-nano-select .select__native-input.sc-nano-select,.has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select{opacity:0;transition:opacity 0.125s ease-in}.has-focus.sc-nano-select-h .has-float-label.sc-nano-select .select__multi-input.sc-nano-select,.has-value.sc-nano-select-h .has-float-label.sc-nano-select .select__multi-input.sc-nano-select,.has-focus.sc-nano-select-h .has-float-label.sc-nano-select .select__native-input.sc-nano-select,.has-value.sc-nano-select-h .has-float-label.sc-nano-select .select__native-input.sc-nano-select,.has-focus.sc-nano-select-h .has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select,.has-value.sc-nano-select-h .has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select{opacity:1}.form-ctrl__more.sc-nano-select{block-size:1em;position:relative;margin-block:4px var(--padding-bottom);margin-inline:3px 0}.form-ctrl__helper.sc-nano-select,.form-ctrl__error.sc-nano-select{inset-block-start:0;inset-inline-start:0;position:absolute;font-size:var(--invalid-msg-font-size);line-height:1.2;transition:0.3s ease-out opacity}.form-ctrl__helper.sc-nano-select{font-style:italic;color:var(--help-msg-color)}[show-inline-error].sc-nano-select-h:not([show-inline-error=false]).is-invalid .form-ctrl__helper.sc-nano-select{opacity:0}.form-ctrl__helper-end.sc-nano-select{flex:1 1 30%;min-inline-size:150px;font-size:var(--invalid-msg-font-size);color:var(--help-msg-color);font-style:italic}.form-ctrl__error.sc-nano-select{opacity:0;color:var(--invalid-msg-color);font-stretch:condensed}.is-invalid.sc-nano-select-h .form-ctrl__error.sc-nano-select{opacity:1}.form-ctrl__input.sc-nano-select{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;border-radius:var(--input-border-radius);inline-size:100%;padding:0 !important;position:relative;flex:1 0 auto;display:flex;background:var(--input-bg-color);border:var(--input-border-style);border-width:var(--input-border-width);font-size:var(--input-font-size);padding-inline-start:calc(var(--input-border-hint-width) - var(--input-border-width)) !important}.has-focus.sc-nano-select-h .form-ctrl__input.sc-nano-select{background:var(--input-bg-color--focus);border:var(--input-border-style--focus);border-width:var(--input-border-width);padding-inline-start:calc(var(--input-border-hint-width) - var(--input-border-width)) !important}.is-invalid.sc-nano-select-h .form-ctrl__input.sc-nano-select{background:var(--input-bg-color--invalid);border:var(--input-border-style--invalid);border-width:var(--input-border-width);border-inline-start:var(--input-border-style--invalid-focus) var(--input-border-hint-width);padding-inline-start:0 !important}.is-invalid.has-focus.sc-nano-select-h .form-ctrl__input.sc-nano-select{background:var(--input-bg-color--invalid);border:var(--input-border-style--invalid-focus);border-width:var(--input-border-width);border-inline-start:var(--input-border-style--invalid-focus) var(--input-border-hint-width);padding-inline-start:0 !important}.form-ctrl__input-wrap.sc-nano-select{display:flex;align-items:stretch;flex:1;max-inline-size:100%}.form-ctrl__clear-btn.sc-nano-select,.form-ctrl__slot-end.sc-nano-select,.form-ctrl__slot-start.sc-nano-select,.form-ctrl__slot-value-end.sc-nano-select{--nano-icon-size:1.4em;margin-block:0;margin-inline:0;font-size:1em;border:0;outline:none;background-color:transparent;background-repeat:no-repeat;display:flex;align-items:stretch;inline-size:auto}.has-float-label.sc-nano-select .form-ctrl__slot-start.sc-nano-select{display:none}.form-ctrl__slot-start.sc-nano-select-s>*,.form-ctrl__slot-start .sc-nano-select-s>*,.form-ctrl__slot-end.sc-nano-select-s>*,.form-ctrl__slot-end .sc-nano-select-s>*,.form-ctrl__slot-value-end.sc-nano-select-s>*,.form-ctrl__slot-value-end .sc-nano-select-s>*,.form-ctrl__slot-value-end.sc-nano-select *.sc-nano-select{--nano-icon-size:1.4em;padding-inline:unset;padding-inline-start:var(--padding-start);padding-inline-end:var(--padding-end);font-size:1em;align-items:center;display:flex;block-size:100%;z-index:1}.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-start.sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-start .sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-end.sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-end .sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end .sc-nano-select-s>*,[disabled].sc-nano-select-h:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-select *.sc-nano-select{pointer-events:none}.form-ctrl__slot-value-end.sc-nano-select-s>*,.form-ctrl__slot-value-end .sc-nano-select-s>*,.form-ctrl__slot-value-end.sc-nano-select *.sc-nano-select{pointer-events:none}.form-ctrl__clear-btn.sc-nano-select{color:var(--clear-btn-color);padding:0;opacity:0;inline-size:0;-webkit-appearance:none;appearance:none;align-items:center;overflow:hidden}.is-invalid.sc-nano-select-h .form-ctrl__clear-btn.sc-nano-select{color:var(--clear-btn-color--invalid)}.has-value.sc-nano-select-h .form-ctrl__clear-btn.sc-nano-select{padding-block:0;padding-inline:var(--padding-start) var(--padding-end);opacity:1;inline-size:auto}.form-ctrl__clear-btn.sc-nano-select:hover{color:var(--clear-btn-color--hover)}.sc-nano-select-h{--placeholder-color:var(--nano-input-placeholder-color, initial);--placeholder-font-style:var(--nano-input-placeholder-style, initial);--placeholder-font-weight:var(--nano-input-placeholder-weight, initial);--placeholder-opacity:var(--nano-input-placeholder-opacity, 0.5);--padding-top:var(--nano-input-padding-top, var(--nano-input-padding, 8px));--padding-end:var(--nano-input-padding-end, var(--nano-input-padding, 8px));--padding-bottom:var(--nano-input-padding-bottom, var(--nano-input-padding, 6px));--padding-start:var(--nano-input-padding-start, var(--nano-input-padding, 8px));--color-invalid:var(--nano-color-danger-rgb, 239, 65, 53);--color--focus-rgb:var(\n      --nano-color-base-rgb,\n      var(--nano-color-primary-rgb, 0, 116, 149)\n    );--input-font-size:var(--nano-input-font-size, 0.87em);--input-text-color:var(--nano-input-text-color, #4a4a4a);--input-border-width:var(--nano-input-border-width, 1px);--input-border-hint-width:3px;--input-border-color:var(--nano-input-border-color, #e4e6e8);--input-border-radius:var(--nano-input-border-radius, 0);--input-border-style:var(--nano-input-border-style, solid) var(--nano-input-border-color, #e4e6e8);--input-border-style--focus:var(--nano-input-border-style, solid) var(--nano-input-border-color--focus, #90c6e7);--input-border-style--invalid:var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #e4e6e8);--input-border-style--invalid-focus:var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #ef4135);--input-bg-color:var(--nano-input-background-color, #fff);--input-bg-color--focus:var(--input-bg-color);--input-bg-color--invalid:var(--nano-input-background-color, white);--invalid-msg-color:rgba(var(--color-invalid), 1);--invalid-msg-font-size:var(--nano-input-help-font-size, 0.75em);--help-msg-color:var(--nano-input-help-color, #616d6e);--clear-btn-color:var(--nano-clear-btn-color, rgba(0, 0, 0, 0.3));--clear-btn-color--hover:rgba(var(--color--focus-rgb), 1);--clear-btn-color--invalid:rgba(var(--color-invalid), 1);--label-color:var(--nano-input-label-color, \"currentColor\");--label-color--focus:var(--label-color);--label-color--invalid:var(--nano-input-label-color-invalid, \"currentColor\");--label-font-size:var(--nano-input-label-color, 1em);--multi-input-value-bg:var(--nano-input-tag-bg, 186, 220, 240);--multi-input-value-text-color:var(--nano-input-tag-color, #455556);--multi-input-value-border:var(--nano-input-tag-color, #badcf0);position:relative;width:100%;padding:0 !important;font-family:var(--nano-font-family, inherit);display:block}.nano-color.sc-nano-select-h{--input-border-style--focus:var(--nano-input-border-style, solid) var(--nano-color-tint, var(--nano-color-primary-tint, #2689a5));--multi-input-value-bg:var(--nano-color-tint-rgb);--multi-input-value-border:var(--nano-color-shade);--multi-input-value-text-color:var(--nano-color-contrast);color:var(--nano-color-base)}nano-item.sc-nano-select-h:not(.item-label),nano-item:not(.item-label) .sc-nano-select-h{--padding-start:0}[disabled].sc-nano-select-h:not([disabled=false]) *.sc-nano-select{pointer-events:none !important}select.sc-nano-select{display:none}.select__native-input.sc-nano-select{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;padding:unset;padding-inline:var(--padding-start) var(--padding-end);padding-block:0;border-radius:var(--input-border-radius);text-overflow:ellipsis;color:var(--input-text-color);display:inline-block;flex:1;width:100%;max-width:100%;max-height:100%;border:0;outline:none;background:transparent;-webkit-appearance:none;appearance:none;margin:0;box-sizing:border-box;resize:none;overflow:hidden;cursor:default;line-height:2.5em}.has-float-label.sc-nano-select .select__native-input.sc-nano-select{line-height:2.1em;min-height:2.1em;padding-block-start:1.4em}.select__native-input.sc-nano-select::selection{background:transparent}.select__native-input.sc-nano-select::-moz-selection{background:transparent}.select__native-input.sc-nano-select::placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:inherit;min-height:initial}.select__native-input.sc-nano-select::-moz-placeholder{line-height:2.8em;text-overflow:ellipsis}.select__native-input.sc-nano-select:-webkit-autofill{background-color:transparent}.select__native-input.sc-nano-select::-webkit-search-decoration,.select__native-input.sc-nano-select::-webkit-search-cancel-button,.select__native-input.sc-nano-select::-webkit-search-results-button,.select__native-input.sc-nano-select::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}.select__native-input.sc-nano-select:invalid{box-shadow:none}.select__native-input.sc-nano-select::-ms-clear,.select__native-input.sc-nano-select::-ms-reveal{display:none}.select__native-input.resizable.sc-nano-select{resize:vertical;overflow:auto}.form-ctrl__textarea.sc-nano-select .select__native-input.sc-nano-select{line-height:1.5em;padding-block:var(--padding-top) var(--padding-bottom);white-space:pre-wrap}.form-ctrl__textarea.sc-nano-select .select__native-input.sc-nano-select::placeholder{line-height:1.5em}.has-float-label.textarea.sc-nano-select .select__native-input.sc-nano-select{padding-block-start:1.8em}.masked.sc-nano-select-h .select__native-input.sc-nano-select{opacity:0;position:absolute;inset-inline-start:0;inset-block-start:0}.select__mask.sc-nano-select{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;padding-inline:var(--padding-start) var(--padding-end);padding-block:0;border-radius:var(--input-border-radius);pointer-events:none;line-height:2.5em;min-height:2.5em}.select__multi-wrap.sc-nano-select{padding-block:0 var(--padding-bottom);padding-inline:0 0;display:flex;flex:1;flex-wrap:wrap;overflow:hidden;align-items:flex-start}.has-float-label.sc-nano-select-h .select__multi-wrap.sc-nano-select{padding-block-start:1em}.select__multi-input.sc-nano-select{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;padding-inline:var(--padding-start) var(--padding-end);padding-block:var(--padding-bottom) 0;min-width:50px;width:100%;max-height:100%;-webkit-appearance:none;appearance:none;border:0;outline:none;display:inline-block;background:transparent;flex:0;position:relative;box-sizing:border-box;line-height:calc(2.5em - var(--padding-bottom));height:calc(2.5em - var(--padding-bottom))}.select__multi-input.sc-nano-select:last-child{flex:1}.select__multi-value.sc-nano-select{margin-block:var(--padding-bottom) 0;margin-inline:var(--padding-start) -3px;background:rgba(var(--multi-input-value-bg), 0.8);color:var(--multi-input-value-text-color);border:1px solid;border-color:var(--multi-input-value-border);padding:0.35em 0.5em;max-width:100%;display:flex;align-items:center;font-size:var(--input-font-size);letter-spacing:1px;max-height:calc(2.5em - 8px)}.select__multi-value.sc-nano-select span.sc-nano-select{text-overflow:ellipsis;white-space:nowrap;max-width:100%;overflow:hidden;line-height:1}.select__multi-value-remove.sc-nano-select{background-position:center;padding-inline-start:0.5em;margin:0;color:inherit;border:0;outline:none;background-color:transparent;background-repeat:no-repeat;-webkit-appearance:none;appearance:none;display:flex;align-items:center;inset-block-start:0;font-size:1em}.select__multi-value-remove.sc-nano-select nano-icon.sc-nano-select{--color:var(--multi-input-value-text-color)}.form-ctrl__float-label.sc-nano-select{width:calc(100% - (1em + var(--padding-start) * 2))}.has-focus.has-multiple.sc-nano-select-h .form-ctrl__float-label.sc-nano-select{transform:translateY(-110%);font-size:0.8em}.has-value.has-multiple.sc-nano-select-h .form-ctrl__float-label.sc-nano-select{transform:translateY(21%);inset-block-start:0}.has-focus.sc-nano-select-h select.sc-nano-select,.has-focus.sc-nano-select-h a.sc-nano-select,.has-focus.sc-nano-select-h button.sc-nano-select{pointer-events:auto}";
+const selectCss = ".sc-nano-select-h{box-sizing:border-box}*.sc-nano-select,*.sc-nano-select::before,*.sc-nano-select::after{box-sizing:border-box}[hidden].sc-nano-select{display:none !important}[disabled].sc-nano-select-h:not([disabled=false]){opacity:0.5}.form-ctrl.sc-nano-select{min-inline-size:100%;display:block}.form-ctrl.has-helper-end.sc-nano-select{display:flex;gap:1rem;opacity:0}.form-ctrl.has-helper-end.is-ready.sc-nano-select{opacity:1}.form-ctrl.has-helper-end.sc-nano-select .form-ctrl__wrapper.sc-nano-select{flex:1 1 100%}.form-ctrl.has-helper-end.sc-nano-select .form-ctrl__helper-end.sc-nano-select{display:none}.form-ctrl.has-helper-end.has-enough-width.sc-nano-select .form-ctrl__helper-end.sc-nano-select{display:block}.form-ctrl.has-helper-end.has-enough-width.sc-nano-select .form-ctrl__helper.sc-nano-select{display:none}.form-ctrl__wrapper.sc-nano-select{display:block}label.sc-nano-select,.form-ctrl__more.sc-nano-select,.form-ctrl__error.sc-nano-select,.form-ctrl__helper.sc-nano-select{display:block;inline-size:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}label.visually-hide.sc-nano-select,.form-ctrl__more.visually-hide.sc-nano-select,.form-ctrl__error.visually-hide.sc-nano-select,.form-ctrl__helper.visually-hide.sc-nano-select{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.form-ctrl__float-label.sc-nano-select{padding-block:0;-webkit-padding-end:0;padding-inline-end:0;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);color:var(--label-color);position:absolute;font-size:1.15em;transform:translateY(-50%);transform-origin:top left;inset-block-start:50%;transition:all 0.125s ease-in;opacity:1}.has-focus.sc-nano-select-h .form-ctrl__float-label.sc-nano-select,.has-value.sc-nano-select-h .form-ctrl__float-label.sc-nano-select{transform:translateY(-110%);font-size:0.8em;opacity:0.7}.form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select{opacity:0;transition:opacity 0.125s ease-in}.has-focus.sc-nano-select-h .form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select,.has-value.sc-nano-select-h .form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select{opacity:1}.form-ctrl__textarea.sc-nano-select .form-ctrl__float-label.sc-nano-select{inset-block-start:50%}.has-focus.sc-nano-select-h .form-ctrl__textarea.sc-nano-select .form-ctrl__float-label.sc-nano-select{inset-block-start:0;transform:translateY(38%)}.has-value.sc-nano-select-h .form-ctrl__textarea.sc-nano-select .form-ctrl__float-label.sc-nano-select{inset-block-start:0;transform:translateY(38%)}.form-ctrl__label.sc-nano-select{color:var(--label-color);font-size:var(--label-font-size);-webkit-padding-after:var(--padding-bottom);padding-block-end:var(--padding-bottom);line-height:1;display:flex}.form-ctrl__label.sc-nano-select .form-ctrl__label-wrap.sc-nano-select{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.form-ctrl__label.sc-nano-select .form-ctrl__label-placeholder.sc-nano-select{margin-block:unset;-webkit-margin-end:5px;margin-inline-end:5px;-webkit-margin-start:0;margin-inline-start:0;opacity:0;-webkit-appearance:none;appearance:none;transition:0.3s ease opacity;font-size:0.9em}.form-ctrl__label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select{margin-block:unset;-webkit-margin-end:0;margin-inline-end:0;-webkit-margin-start:auto;margin-inline-start:auto;font-size:0.9em;opacity:0.5}.has-value.sc-nano-select-h .form-ctrl__label.sc-nano-select .form-ctrl__label-placeholder.sc-nano-select{opacity:0.5}.has-focus.sc-nano-select-h .form-ctrl__label.sc-nano-select{color:var(--label-color--focus)}.is-invalid.sc-nano-select-h .form-ctrl__label.sc-nano-select{color:var(--label-color--invalid)}.has-float-label.sc-nano-select .select__multi-input.sc-nano-select,.has-float-label.sc-nano-select .select__native-input.sc-nano-select,.has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select{opacity:0;transition:opacity 0.125s ease-in}.has-focus.sc-nano-select-h .has-float-label.sc-nano-select .select__multi-input.sc-nano-select,.has-value.sc-nano-select-h .has-float-label.sc-nano-select .select__multi-input.sc-nano-select,.has-focus.sc-nano-select-h .has-float-label.sc-nano-select .select__native-input.sc-nano-select,.has-value.sc-nano-select-h .has-float-label.sc-nano-select .select__native-input.sc-nano-select,.has-focus.sc-nano-select-h .has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select,.has-value.sc-nano-select-h .has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select{opacity:1}.form-ctrl__more.sc-nano-select{block-size:1em;position:relative;margin-block:4px var(--padding-bottom);margin-inline:3px 0}.form-ctrl__helper.sc-nano-select,.form-ctrl__error.sc-nano-select{inset-block-start:0;inset-inline-start:0;position:absolute;font-size:var(--invalid-msg-font-size);line-height:1.2;transition:0.3s ease-out opacity}.form-ctrl__helper.sc-nano-select{font-style:italic;color:var(--help-msg-color)}[show-inline-error].sc-nano-select-h:not([show-inline-error=false]).is-invalid .form-ctrl__helper.sc-nano-select{opacity:0}.form-ctrl__helper-end.sc-nano-select{flex:1 1 30%;min-inline-size:150px;font-size:var(--invalid-msg-font-size);color:var(--help-msg-color);font-style:italic}.form-ctrl__error.sc-nano-select{opacity:0;color:var(--invalid-msg-color);font-stretch:condensed}.is-invalid.sc-nano-select-h .form-ctrl__error.sc-nano-select{opacity:1}.form-ctrl__input.sc-nano-select{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;border-radius:var(--input-border-radius);inline-size:100%;padding:0 !important;position:relative;flex:1 0 auto;display:flex;background:var(--input-bg-color);border:var(--input-border-style);border-width:var(--input-border-width);font-size:var(--input-font-size);-webkit-padding-start:calc(var(--input-border-hint-width) - var(--input-border-width)) !important;padding-inline-start:calc(var(--input-border-hint-width) - var(--input-border-width)) !important}.has-focus.sc-nano-select-h .form-ctrl__input.sc-nano-select{background:var(--input-bg-color--focus);border:var(--input-border-style--focus);border-width:var(--input-border-width);-webkit-padding-start:calc(var(--input-border-hint-width) - var(--input-border-width)) !important;padding-inline-start:calc(var(--input-border-hint-width) - var(--input-border-width)) !important}.is-invalid.sc-nano-select-h .form-ctrl__input.sc-nano-select{background:var(--input-bg-color--invalid);border:var(--input-border-style--invalid);border-width:var(--input-border-width);-webkit-border-start:var(--input-border-style--invalid-focus) var(--input-border-hint-width);border-inline-start:var(--input-border-style--invalid-focus) var(--input-border-hint-width);-webkit-padding-start:0 !important;padding-inline-start:0 !important}.is-invalid.has-focus.sc-nano-select-h .form-ctrl__input.sc-nano-select{background:var(--input-bg-color--invalid);border:var(--input-border-style--invalid-focus);border-width:var(--input-border-width);-webkit-border-start:var(--input-border-style--invalid-focus) var(--input-border-hint-width);border-inline-start:var(--input-border-style--invalid-focus) var(--input-border-hint-width);-webkit-padding-start:0 !important;padding-inline-start:0 !important}.form-ctrl__input-wrap.sc-nano-select{display:flex;align-items:stretch;flex:1;max-inline-size:100%}.form-ctrl__clear-btn.sc-nano-select,.form-ctrl__slot-end.sc-nano-select,.form-ctrl__slot-start.sc-nano-select,.form-ctrl__slot-value-end.sc-nano-select{--nano-icon-size:1.4em;margin-block:0;margin-inline:0;font-size:1em;border:0;outline:none;background-color:transparent;background-repeat:no-repeat;display:flex;align-items:stretch;inline-size:auto}.has-float-label.sc-nano-select .form-ctrl__slot-start.sc-nano-select{display:none}.form-ctrl__slot-start.sc-nano-select-s>*,.form-ctrl__slot-start .sc-nano-select-s>*,.form-ctrl__slot-end.sc-nano-select-s>*,.form-ctrl__slot-end .sc-nano-select-s>*,.form-ctrl__slot-value-end.sc-nano-select-s>*,.form-ctrl__slot-value-end .sc-nano-select-s>*,.form-ctrl__slot-value-end.sc-nano-select *.sc-nano-select{--nano-icon-size:1.4em;padding-inline:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);font-size:1em;align-items:center;display:flex;block-size:100%;z-index:1}.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-start.sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-start .sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-end.sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-end .sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end .sc-nano-select-s>*,[disabled].sc-nano-select-h:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-select *.sc-nano-select{pointer-events:none}.form-ctrl__slot-value-end.sc-nano-select-s>*,.form-ctrl__slot-value-end .sc-nano-select-s>*,.form-ctrl__slot-value-end.sc-nano-select *.sc-nano-select{pointer-events:none}.form-ctrl__clear-btn.sc-nano-select{color:var(--clear-btn-color);padding:0;opacity:0;inline-size:0;-webkit-appearance:none;appearance:none;align-items:center;overflow:hidden}.is-invalid.sc-nano-select-h .form-ctrl__clear-btn.sc-nano-select{color:var(--clear-btn-color--invalid)}.has-value.sc-nano-select-h .form-ctrl__clear-btn.sc-nano-select{padding-block:0;padding-inline:var(--padding-start) var(--padding-end);opacity:1;inline-size:auto}.form-ctrl__clear-btn.sc-nano-select:hover{color:var(--clear-btn-color--hover)}.sc-nano-select-h{--placeholder-color:var(--nano-input-placeholder-color, initial);--placeholder-font-style:var(--nano-input-placeholder-style, initial);--placeholder-font-weight:var(--nano-input-placeholder-weight, initial);--placeholder-opacity:var(--nano-input-placeholder-opacity, 0.5);--padding-top:var(--nano-input-padding-top, var(--nano-input-padding, 8px));--padding-end:var(--nano-input-padding-end, var(--nano-input-padding, 8px));--padding-bottom:var(--nano-input-padding-bottom, var(--nano-input-padding, 6px));--padding-start:var(--nano-input-padding-start, var(--nano-input-padding, 8px));--color-invalid:var(--nano-color-danger-rgb, 239 65 53);--color--focus-rgb:var(\n      --nano-color-base-rgb,\n      var(--nano-color-primary-rgb, 0 116 149)\n    );--input-font-size:var(--nano-input-font-size, 0.87em);--input-text-color:var(--nano-input-text-color, #4a4a4a);--input-border-width:var(--nano-input-border-width, 1px);--input-border-hint-width:3px;--input-border-color:var(--nano-input-border-color, #e4e6e8);--input-border-radius:var(--nano-input-border-radius, 0);--input-border-style:var(--nano-input-border-style, solid) var(--nano-input-border-color, #e4e6e8);--input-border-style--focus:var(--nano-input-border-style, solid) var(--nano-input-border-color--focus, #90c6e7);--input-border-style--invalid:var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #e4e6e8);--input-border-style--invalid-focus:var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #ef4135);--input-bg-color:var(--nano-input-background-color, #fff);--input-bg-color--focus:var(--input-bg-color);--input-bg-color--invalid:var(--nano-input-background-color, white);--invalid-msg-color:rgb(var(--color-invalid) / 100%);--invalid-msg-font-size:var(--nano-input-help-font-size, 0.75em);--help-msg-color:var(--nano-input-help-color, #616d6e);--clear-btn-color:var(--nano-clear-btn-color, rgba(0, 0, 0, 0.3));--clear-btn-color--hover:rgb(var(--color--focus-rgb) / 100%);--clear-btn-color--invalid:rgb(var(--color-invalid) / 100%);--label-color:var(--nano-input-label-color, \"currentcolor\");--label-color--focus:var(--label-color);--label-color--invalid:var(--nano-input-label-color-invalid, \"currentcolor\");--label-font-size:var(--nano-input-label-color, 1em);--multi-input-value-bg:var(--nano-input-tag-bg, 186 220 240);--multi-input-value-text-color:var(--nano-input-tag-color, #455556);--multi-input-value-border:var(--nano-input-tag-color, #badcf0);position:relative;width:100%;padding:0 !important;font-family:var(--nano-font-family, inherit);display:block}.nano-color.sc-nano-select-h{--input-border-style--focus:var(--nano-input-border-style, solid) var(\n      --nano-color-tint,\n      var(--nano-color-primary-tint, #2689a5)\n    );--multi-input-value-bg:var(--nano-color-tint-rgb);--multi-input-value-border:var(--nano-color-shade);--multi-input-value-text-color:var(--nano-color-contrast);color:var(--nano-color-base)}nano-item.sc-nano-select-h:not(.item-label),nano-item:not(.item-label) .sc-nano-select-h{--padding-start:0}[disabled].sc-nano-select-h:not([disabled=false]) *.sc-nano-select{pointer-events:none !important}select.sc-nano-select{display:none}.select__native-input.sc-nano-select{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;padding:unset;padding-inline:var(--padding-start) var(--padding-end);padding-block:0;border-radius:var(--input-border-radius);text-overflow:ellipsis;color:var(--input-text-color);display:inline-block;flex:1;width:100%;max-width:100%;max-height:100%;border:0;outline:none;background:transparent;-webkit-appearance:none;appearance:none;margin:0;box-sizing:border-box;resize:none;overflow:hidden;cursor:default;line-height:2.5em}.has-float-label.sc-nano-select .select__native-input.sc-nano-select{line-height:2.1em;min-height:2.1em;-webkit-padding-before:1.4em;padding-block-start:1.4em}.select__native-input.sc-nano-select::selection{background:transparent}.select__native-input.sc-nano-select::-moz-selection{background:transparent}.select__native-input.sc-nano-select::placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:inherit;min-height:initial}.select__native-input.sc-nano-select::-moz-placeholder{line-height:2.8em;text-overflow:ellipsis}.select__native-input.sc-nano-select:-webkit-autofill{background-color:transparent}.select__native-input.sc-nano-select::-webkit-search-decoration,.select__native-input.sc-nano-select::-webkit-search-cancel-button,.select__native-input.sc-nano-select::-webkit-search-results-button,.select__native-input.sc-nano-select::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}.select__native-input.sc-nano-select:invalid{box-shadow:none}.select__native-input.sc-nano-select::-ms-clear,.select__native-input.sc-nano-select::-ms-reveal{display:none}.select__native-input.resizable.sc-nano-select{resize:vertical;overflow:auto}.form-ctrl__textarea.sc-nano-select .select__native-input.sc-nano-select{line-height:1.5em;padding-block:var(--padding-top) var(--padding-bottom);white-space:pre-wrap}.form-ctrl__textarea.sc-nano-select .select__native-input.sc-nano-select::placeholder{line-height:1.5em}.has-float-label.textarea.sc-nano-select .select__native-input.sc-nano-select{-webkit-padding-before:1.8em;padding-block-start:1.8em}.masked.sc-nano-select-h .select__native-input.sc-nano-select{opacity:0;position:absolute;inset-inline-start:0;inset-block-start:0}.select__mask.sc-nano-select{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;padding-inline:var(--padding-start) var(--padding-end);padding-block:0;border-radius:var(--input-border-radius);pointer-events:none;line-height:2.5em;min-height:2.5em}.select__multi-wrap.sc-nano-select{padding-block:0 var(--padding-bottom);padding-inline:0 0;display:flex;flex:1;flex-wrap:wrap;overflow:hidden;align-items:flex-start}.has-float-label.sc-nano-select-h .select__multi-wrap.sc-nano-select{-webkit-padding-before:1em;padding-block-start:1em}.select__multi-input.sc-nano-select{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;padding-inline:var(--padding-start) var(--padding-end);padding-block:var(--padding-bottom) 0;min-width:50px;width:100%;max-height:100%;-webkit-appearance:none;appearance:none;border:0;outline:none;display:inline-block;background:transparent;flex:0;position:relative;box-sizing:border-box;line-height:calc(2.5em - var(--padding-bottom));height:calc(2.5em - var(--padding-bottom))}.select__multi-input.sc-nano-select:last-child{flex:1}.select__multi-value.sc-nano-select{margin-block:var(--padding-bottom) 0;margin-inline:var(--padding-start) -3px;background:rgb(var(--multi-input-value-bg)/80%);color:var(--multi-input-value-text-color);border:1px solid;border-color:var(--multi-input-value-border);padding:0.35em 0.5em;max-width:100%;display:flex;align-items:center;font-size:var(--input-font-size);letter-spacing:1px;max-height:calc(2.5em - 8px)}.select__multi-value.sc-nano-select span.sc-nano-select{text-overflow:ellipsis;white-space:nowrap;max-width:100%;overflow:hidden;line-height:1}.select__multi-value-remove.sc-nano-select{background-position:center;-webkit-padding-start:0.5em;padding-inline-start:0.5em;margin:0;color:inherit;border:0;outline:none;background-color:transparent;background-repeat:no-repeat;-webkit-appearance:none;appearance:none;display:flex;align-items:center;inset-block-start:0;font-size:1em}.select__multi-value-remove.sc-nano-select nano-icon.sc-nano-select{--color:var(--multi-input-value-text-color)}.form-ctrl__float-label.sc-nano-select{width:calc(100% - (1em + var(--padding-start) * 2))}.has-focus.has-multiple.sc-nano-select-h .form-ctrl__float-label.sc-nano-select{transform:translateY(-110%);font-size:0.8em}.has-value.has-multiple.sc-nano-select-h .form-ctrl__float-label.sc-nano-select{transform:translateY(21%);inset-block-start:0}.has-focus.sc-nano-select-h select.sc-nano-select,.has-focus.sc-nano-select-h a.sc-nano-select,.has-focus.sc-nano-select-h button.sc-nano-select{pointer-events:auto}";
 
 let selectIds = 0;
 const Select = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  get inputCtrl() {
+    return this._inputCtrl;
+  }
+  set inputCtrl(input) {
+    if (input === this._inputCtrl)
+      return;
+    this._inputCtrl = input;
+    this.setDataListOpts();
+  }
+  get selectWrap() {
+    return this._selectWrap;
+  }
+  set selectWrap(ele) {
+    if (this._selectWrap === ele)
+      return;
+    this._selectWrap = ele;
+    this.setDataListOpts();
+  }
+  get datalist() {
+    return this._datalist;
+  }
+  set datalist(ele) {
+    if (this._datalist === ele)
+      return;
+    this._datalist = ele;
+    this.setDataListOpts();
+  }
   constructor() {
     super();
     this.__registerHost();
@@ -35,7 +62,9 @@ const Select = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this._value = this.multiple ? [] : '';
     this._options = [];
     this.customValidate = () => {
-      if (!this.nativeSelect || !!this.customError)
+      if (!this.nativeSelect ||
+        !!this.customError ||
+        !this.nativeSelect['setCustomValidity'])
         return;
       this.nativeSelect.setCustomValidity('');
       // add custom validations 'cos html5 validations are a bit rubbish on selects
@@ -260,33 +289,6 @@ const Select = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.dropDownConfig = {};
     this.showInlineValidation = debounce(this.showInlineValidation, 50);
   }
-  get inputCtrl() {
-    return this._inputCtrl;
-  }
-  set inputCtrl(input) {
-    if (input === this._inputCtrl)
-      return;
-    this._inputCtrl = input;
-    this.setDataListOpts();
-  }
-  get selectWrap() {
-    return this._selectWrap;
-  }
-  set selectWrap(ele) {
-    if (this._selectWrap === ele)
-      return;
-    this._selectWrap = ele;
-    this.setDataListOpts();
-  }
-  get datalist() {
-    return this._datalist;
-  }
-  set datalist(ele) {
-    if (this._datalist === ele)
-      return;
-    this._datalist = ele;
-    this.setDataListOpts();
-  }
   /**
    * This will be true when the control is in an invalid state.
    * Validity is determined by the `required` prop. Or if custom validity message is set.
@@ -362,7 +364,7 @@ const Select = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   /**
    * Update the native select element when the value changes
    */
-  // eslint-disable-next-line @stencil/no-unused-watch
+  // eslint-disable-next-line @stencil-community/no-unused-watch
   valueChanged() {
     this.customValidate();
     if (this.onInit) {
@@ -380,11 +382,7 @@ const Select = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       return;
     this.datalist.input = this.inputCtrl;
     const currDWConfig = this.datalist.dropDownConfig || {};
-    this.datalist.dropDownConfig = {
-      ...currDWConfig,
-      ...this.dropDownConfig,
-      tetherTo: this.selectWrap,
-    };
+    this.datalist.dropDownConfig = Object.assign(Object.assign(Object.assign({}, currDWConfig), this.dropDownConfig), { tetherTo: this.selectWrap });
   }
   // Public Methods
   /**
@@ -445,6 +443,8 @@ const Select = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     return this.valArray.find((val) => this.options.find((opt) => opt.value === val));
   }
   slotChangeObserver() {
+    if (!window['MutationObserver'])
+      return;
     const mo = (this.mo = new MutationObserver(() => this.processSlottedContent()));
     mo.observe(this.el, { childList: true, subtree: true });
   }
@@ -456,7 +456,8 @@ const Select = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   getLabel(toFind) {
     const label = this.options.find((opt) => {
-      return !opt.disabled && opt.value?.length && opt.value === toFind;
+      var _a;
+      return !opt.disabled && ((_a = opt.value) === null || _a === void 0 ? void 0 : _a.length) && opt.value === toFind;
     });
     return label && label.label ? label.label : toFind;
   }
@@ -535,37 +536,23 @@ const Select = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       placeholder,
       rtl,
     }))(this);
-    const wrapOptions = {
-      ...compWrapOptions,
-      labelId,
+    const wrapOptions = Object.assign(Object.assign({}, compWrapOptions), { labelId,
       moreId,
-      helperEndId,
-      hasValue: !!this.value.length || !!this.inputSearchVal.length,
-      controlId: this.selectId,
-    };
+      helperEndId, hasValue: !!this.value.length || !!this.inputSearchVal.length, controlId: this.selectId });
     const controlOptions = (({ readonly, disabled }) => ({
       readonly,
       disabled,
       clearControl: this.clearSelect,
     }))(this);
-    return (h(Host, { type: this.multiple ? 'select-multiple' : 'select-one', "aria-disabled": this.disabled ? 'true' : null, class: {
-        ...createColorClasses(this.color),
-        'has-value': !!this.value.length || !!this.inputSearchVal.length,
-        'has-focus': this.hasFocus,
-        'is-invalid': this.invalid,
-        'has-label': this.label !== null && !this.floatLabel,
-        'has-float-label': this.label !== null && this.floatLabel,
-        rtl: this.rtl,
-        'has-multiple': this.multiple,
-        'has-clr-btn': this.clearSelect,
-        masked: this.mask,
-      } }, h(FormControlWrap, { ...wrapOptions }, h(FormControl, { ...controlOptions, onClearText: this.clearSelectValue, control: this.el, ref: (el) => (this.selectWrap = el), endValueSlot: h("slot", { name: "down-arrow" }, h("nano-icon", { slot: "value-end", name: "light/chevron-down" })) }, this.multiple && (h("div", { class: "select__multi-wrap select" }, this.multipleValues(labelId, moreId, helperEndId))), !this.multiple && [
+    return (h(Host, { type: this.multiple ? 'select-multiple' : 'select-one', "aria-disabled": this.disabled ? 'true' : null, class: Object.assign(Object.assign({}, createColorClasses(this.color)), { 'has-value': !!this.value.length || !!this.inputSearchVal.length, 'has-focus': this.hasFocus, 'is-invalid': this.invalid, 'has-label': this.label !== null && !this.floatLabel, 'has-float-label': this.label !== null && this.floatLabel, rtl: this.rtl, 'has-multiple': this.multiple, 'has-clr-btn': this.clearSelect, masked: this.mask }) }, h(FormControlWrap, Object.assign({}, wrapOptions), h(FormControl, Object.assign({}, controlOptions, { onClearText: this.clearSelectValue, control: this.el, ref: (el) => (this.selectWrap = el), endValueSlot: h("slot", { name: "down-arrow" }, h("nano-icon", { slot: "value-end", name: "light/chevron-down" })) }), this.multiple && (h("div", { class: "select__multi-wrap select" }, this.multipleValues(labelId, moreId, helperEndId))), !this.multiple && [
       this.mask && (h("div", { class: "select__mask" }, this.getLabel(this.value))),
       h("input", { id: this.selectId, class: "select__native-input", ref: (input) => (this.inputCtrl = input), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, form: this.form, placeholder: this.placeholder, readOnly: true, required: this.required, value: this.getLabel(this.value), onFocus: this.onFocus }),
     ])), !this.readonly && !this.disabled && (h("nano-datalist", { onNanoOptionsUpdated: this.setOptions, ref: (el) => (this.datalist = el), selected: this.valArray, type: this.multiple ? 'selctMulti' : 'select', onNanoSelect: this.setValue, onNanoDeselect: (e) => {
         e.preventDefault();
         this.removeValue(e.detail.value);
-      }, options: this._options.length ? this._options : undefined }, this.allowCustomValues && this.multiple && !!this.inputSearchVal && (h("nano-option", { slot: "list-top", value: this.inputSearchVal, selected: false, label: this.inputSearchVal, onNanoSelect: () => this.inputCtrl.focus() }, h("span", { slot: "check-icon" }), "Add '", this.inputSearchVal, "'")), h("slot", null))), h("select", { id: this.selectId + '-hidden', class: "select__native-ctrl", ref: (select) => (this.nativeSelect = select), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, form: this.form, multiple: this.multiple, name: this.name, required: this.required, onInvalid: this.handleInvalid }, this.allowCustomValues &&
+      }, options: this._options.length ? this._options : undefined }, this.allowCustomValues &&
+      this.multiple &&
+      !!this.inputSearchVal && (h("nano-option", { slot: "list-top", value: this.inputSearchVal, selected: false, label: this.inputSearchVal, onNanoSelect: () => this.inputCtrl.focus() }, h("span", { slot: "check-icon" }), "Add '", this.inputSearchVal, "'")), h("slot", null))), h("select", { id: this.selectId + '-hidden', class: "select__native-ctrl", ref: (select) => (this.nativeSelect = select), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, form: this.form, multiple: this.multiple, name: this.name, required: this.required, onInvalid: this.handleInvalid }, this.allowCustomValues &&
       this.valArray.map((val) => {
         return (h("option", { value: val, selected: true }, val));
       }), !this.allowCustomValues &&