npm - @nanoporetech-digital/components - Versions diffs - 3.7.0 → 3.8.0 - Mend

@nanoporetech-digital/components 3.7.0 → 3.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (783) hide show

package/dist/collection/components/hero/hero.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"hero.js","sourceRoot":"","sources":["../../../src/components/hero/hero.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Prop,\n h,\n ComponentInterface,\n VNode,\n State,\n Element,\n Watch,\n Host,\n} from '@stencil/core';\n/*\n Hero components are designed to be used once per content page to add visual impact to the introductory section of a page.\n * @slot primary-content - title, leading paragraph and CTA\n * @slot breadcrumb - each individual bread crumb should be assigned seperately\n * @slot secondary-content - free form secondary content.\n * @slot icon-box - free form icon box container\n * @slot icon-box-item - seperate icon box items. Designed to contain 1 icon and 1 text element.\n * @slot secondary-ctas - CTAs. each individual button should be assigned seperately\n * @slot quote - quote content\n * @slot quote-author - quote author\n * @slot scrim - optional background overlay (e.g. faded colour or gradient)\n * @slot background - custom background. Only active when img-src is empty\n * @slot back-btn - a back button.\n /\n@Component({\n tag: 'nano-hero',\n styleUrl: 'hero.scss',\n shadow: true,\n})\nexport class Hero implements ComponentInterface {\n private mo?: MutationObserver;\n\n @Element() host: HTMLNanoHeroElement;\n\n @State() gridSizes: string[] = [];\n @State() hasIconBox: boolean;\n @State() hasScrim: boolean;\n @State() hasSecondaryContent: boolean;\n @State() hasQuote: boolean;\n @State() hasBg: boolean;\n @State() hasBackBtn: boolean;\n @State() hasCtas: boolean;\n @State() breadCrumbs: Element[];\n @Watch('breadCrumbs')\n breadCrumbChange() {\n // safari doesn't support ::slotted()::after ... so this :/\n this.breadCrumbs\n .filter(\n (crumb) =>\n crumb.tagName === 'A' &&\n !crumb.nextElementSibling.classList.contains('slash')\n )\n .forEach((crumb) => {\n crumb.insertAdjacentHTML(\n 'afterend',\n '<span slot=\"breadcrumb\" class=\"slash\">/</span>'\n );\n });\n }\n @State() iconBoxItems: Element[];\n @Watch('iconBoxItems')\n iconBoxItemChange() {\n this.iconBoxItems.forEach((item) => item.classList.remove('last'));\n if (\n this.iconBoxItems[this.iconBoxItems.length - 1] &&\n this.iconBoxItems[this.iconBoxItems.length - 1].classList\n )\n this.iconBoxItems[this.iconBoxItems.length - 1].classList.add('last');\n }\n\n /* src for backgronund image. For more control use the `background` slot instead. /\n @Prop() imgSrc?: string;\n\n /* Optional list string providing media sizes with corresponding image srcs.\n * i.e. show img-x at 300px wide. Format `srcSet=\"200w src/imgSmall.jpg, 500h src/imgMed.png\"` /\n @Prop() imgSrcSet?: string = null;\n\n /* The Break Point width that the hero component will change to the large view. Defaults to the XL grid size (900px) /\n @Prop() largeScreenBP: number = 900;\n\n /* Base style for the hero. Either 'light' (white bg / dark text), or 'dark' (dark bg / white text) /\n @Prop() theme: 'dark' \| 'light' = 'dark';\n\n /* Set the content structure level of the hero. Defaults to 'top' */\n @Prop() level: 'top' \| 'sub' = 'top';\n\n private slotChangeObserver() {\n if (this.mo) this.mo.disconnect();\n const mo = (this.mo = new MutationObserver(() =>\n this.processSlottedContent()\n ));\n mo.observe(this.host, { childList: true });\n }\n\n // Event handlers\n\n private processSlottedContent() {\n this.hasCtas = !!this.host.querySelector('[slot=\"secondary-ctas\"]');\n this.iconBoxItems = Array.from(\n this.host.querySelectorAll('[slot=\"icon-box-item\"]')\n );\n this.hasIconBox =\n !!this.host.querySelector('[slot=\"icon-box\"]') \|\|\n !!this.iconBoxItems.length;\n this.hasScrim = !!this.host.querySelector('[slot=\"scrim\"]');\n this.breadCrumbs = Array.from(\n this.host.querySelectorAll('[slot=\"breadcrumb\"]')\n );\n this.hasSecondaryContent =\n !!this.host.querySelector('[slot=\"icon-box\"]') \|\|\n !!this.host.querySelector('[slot=\"quote\"]') \|\|\n !!this.host.querySelector('[slot=\"icon-box-item\"]') \|\|\n !!this.host.querySelector('[slot=\"secondary-content\"]');\n this.hasBg =\n !!this.host.querySelector('[slot=\"background\"]') \|\| !!this.imgSrc;\n this.hasBackBtn = !!this.host.querySelector('[slot=\"back-btn\"]');\n this.hasQuote = !!this.host.querySelector('[slot=\"quote\"]');\n }\n\n private handleGridChange = (e: CustomEvent & { detail: string[] }) => {\n this.gridSizes = e.detail;\n };\n\n // Component lifecycle\n\n disconnectedCallback() {\n if (this.mo) this.mo.disconnect();\n }\n\n componentDidLoad() {\n this.slotChangeObserver();\n }\n\n componentWillLoad() {\n this.processSlottedContent();\n }\n\n private HeroContent = (): VNode[] => {\n return [\n !this.hasIconBox && this.hasCtas ? (\n <div class=\"hero__ctas\">\n <slot name=\"secondary-ctas\" />\n </div>\n ) : (\n ''\n ),\n <div class=\"hero__scrim\">\n <slot name=\"scrim\" />\n </div>,\n <nano-grid\n onNanoBpChange={this.handleGridChange}\n class=\"hero__content\"\n xlCols={2}\n xlSize={this.largeScreenBP}\n >\n <nano-grid-item gridStates=\"xl-col-span-2\">\n <div class=\"hero__breadcrumbs\">\n <slot name=\"breadcrumb\" />\n </div>\n </nano-grid-item>\n <nano-grid-item\n gridStates={\n this.hasSecondaryContent\n ? 'xl-col-span-1 xl-col-start-1 xl-row-start-2'\n : 'xl-col-span-2 xl-col-start-1 xl-row-start-2'\n }\n >\n <div class=\"hero__primary\">\n <div class=\"hero__primary-content\">\n <slot name=\"back-btn\" />\n <div>\n <slot name=\"primary-content\" />\n </div>\n </div>\n </div>\n </nano-grid-item>\n {this.hasSecondaryContent && (\n <nano-grid-item gridStates=\"xl-col-span-1 xl-col-start-2 xl-row-start-2\">\n <div class=\"hero__secondary\">\n <slot name=\"secondary-content\" />\n {this.hasIconBox && (\n <div class=\"hero__icon-box\">\n <slot name=\"icon-box\" />\n <slot name=\"icon-box-item\" />\n </div>\n )}\n {this.hasQuote && (\n <div class=\"hero__quote-content\">\n <span class=\"hero__quote\">\n <slot name=\"quote\" />\n </span>\n <div class=\"hero__quote-author\">\n <slot name=\"quote-author\" />\n </div>\n </div>\n )}\n </div>\n </nano-grid-item>\n )}\n </nano-grid>,\n ];\n };\n\n render() {\n const rtl =\n this.host.dir === 'rtl' \|\|\n (this.host.ownerDocument as Document).dir === 'rtl';\n\n return (\n <Host\n class={{\n [this.gridSizes.join(' ')]: true,\n }}\n >\n <div\n class={{\n hero: true,\n 'hero--light': this.theme === 'light',\n 'hero--secondary': this.hasSecondaryContent,\n 'hero--iconbox': this.hasIconBox,\n 'hero--rtl': rtl,\n 'hero--scrim': this.hasScrim,\n 'hero--breadcrumb': !!this.breadCrumbs.length,\n 'hero--hasbg': this.hasBg,\n 'hero--backbtn': this.hasBackBtn,\n 'hero--sub': this.level === 'sub',\n }}\n >\n <div class=\"hero__bg-wrap\">\n {!!this.imgSrc && (\n <nano-img\n class=\"hero__img\"\n lazy={false}\n background\n srcSet={this.imgSrcSet}\n src={this.imgSrc}\n >\n <this.HeroContent />\n </nano-img>\n )}\n {!this.imgSrc && [\n <div class=\"hero__bg-slot\">\n <slot name=\"background\" />\n </div>,\n <this.HeroContent />,\n ]}\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"hero.js","sourceRoot":"","sources":["../../../src/components/hero/hero.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Prop,\n h,\n ComponentInterface,\n VNode,\n State,\n Element,\n Watch,\n Host,\n} from '@stencil/core';\n/*\n Hero components are designed to be used once per content page to add visual impact to the introductory section of a page.\n * @slot primary-content - title, leading paragraph and CTA\n * @slot breadcrumb - each individual bread crumb should be assigned seperately\n * @slot secondary-content - free form secondary content.\n * @slot icon-box - free form icon box container\n * @slot icon-box-item - seperate icon box items. Designed to contain 1 icon and 1 text element.\n * @slot secondary-ctas - CTAs. each individual button should be assigned seperately\n * @slot quote - quote content\n * @slot quote-author - quote author\n * @slot scrim - optional background overlay (e.g. faded colour or gradient)\n * @slot background - custom background. Only active when img-src is empty\n * @slot back-btn - a back button.\n /\n@Component({\n tag: 'nano-hero',\n styleUrl: 'hero.scss',\n shadow: true,\n})\nexport class Hero implements ComponentInterface {\n private mo?: MutationObserver;\n\n @Element() host: HTMLNanoHeroElement;\n\n @State() gridSizes: string[] = [];\n @State() hasIconBox: boolean;\n @State() hasScrim: boolean;\n @State() hasSecondaryContent: boolean;\n @State() hasQuote: boolean;\n @State() hasBg: boolean;\n @State() hasBackBtn: boolean;\n @State() hasCtas: boolean;\n @State() breadCrumbs: Element[];\n @Watch('breadCrumbs')\n breadCrumbChange() {\n // safari doesn't support ::slotted()::after ... so this :/\n this.breadCrumbs\n .filter(\n (crumb) =>\n crumb.tagName === 'A' &&\n !crumb.nextElementSibling.classList.contains('slash')\n )\n .forEach((crumb) => {\n crumb.insertAdjacentHTML(\n 'afterend',\n '<span slot=\"breadcrumb\" class=\"slash\">/</span>'\n );\n });\n }\n @State() iconBoxItems: Element[];\n @Watch('iconBoxItems')\n iconBoxItemChange() {\n this.iconBoxItems.forEach((item) => item.classList.remove('last'));\n if (\n this.iconBoxItems[this.iconBoxItems.length - 1] &&\n this.iconBoxItems[this.iconBoxItems.length - 1].classList\n )\n this.iconBoxItems[this.iconBoxItems.length - 1].classList.add('last');\n }\n\n /* src for backgronund image. For more control use the `background` slot instead. /\n @Prop() imgSrc?: string;\n\n /* Optional list string providing media sizes with corresponding image srcs.\n * i.e. show img-x at 300px wide. Format `srcSet=\"200w src/imgSmall.jpg, 500h src/imgMed.png\"` /\n @Prop() imgSrcSet?: string = null;\n\n /* The Break Point width that the hero component will change to the large view. Defaults to the XL grid size (900px) /\n @Prop() largeScreenBP: number = 900;\n\n /* Base style for the hero. Either 'light' (white bg / dark text), or 'dark' (dark bg / white text) /\n @Prop() theme: 'dark' \| 'light' = 'dark';\n\n /* Set the content structure level of the hero. Defaults to 'top' */\n @Prop() level: 'top' \| 'sub' = 'top';\n\n private slotChangeObserver() {\n if (!window['MutationObserver']) return;\n\n if (this.mo) this.mo.disconnect();\n const mo = (this.mo = new MutationObserver(() =>\n this.processSlottedContent()\n ));\n mo.observe(this.host, { childList: true });\n }\n\n // Event handlers\n\n private processSlottedContent() {\n this.hasCtas = !!this.host.querySelector('[slot=\"secondary-ctas\"]');\n this.iconBoxItems = Array.from(\n this.host.querySelectorAll('[slot=\"icon-box-item\"]')\n );\n this.hasIconBox =\n !!this.host.querySelector('[slot=\"icon-box\"]') \|\|\n !!this.iconBoxItems.length;\n this.hasScrim = !!this.host.querySelector('[slot=\"scrim\"]');\n this.breadCrumbs = Array.from(\n this.host.querySelectorAll('[slot=\"breadcrumb\"]')\n );\n this.hasSecondaryContent =\n !!this.host.querySelector('[slot=\"icon-box\"]') \|\|\n !!this.host.querySelector('[slot=\"quote\"]') \|\|\n !!this.host.querySelector('[slot=\"icon-box-item\"]') \|\|\n !!this.host.querySelector('[slot=\"secondary-content\"]');\n this.hasBg =\n !!this.host.querySelector('[slot=\"background\"]') \|\| !!this.imgSrc;\n this.hasBackBtn = !!this.host.querySelector('[slot=\"back-btn\"]');\n this.hasQuote = !!this.host.querySelector('[slot=\"quote\"]');\n }\n\n private handleGridChange = (e: CustomEvent & { detail: string[] }) => {\n this.gridSizes = e.detail;\n };\n\n // Component lifecycle\n\n disconnectedCallback() {\n if (this.mo) this.mo.disconnect();\n }\n\n componentDidLoad() {\n this.slotChangeObserver();\n }\n\n componentWillLoad() {\n this.processSlottedContent();\n }\n\n private HeroContent = (): VNode[] => {\n return [\n !this.hasIconBox && this.hasCtas ? (\n <div class=\"hero__ctas\">\n <slot name=\"secondary-ctas\" />\n </div>\n ) : (\n ''\n ),\n <div class=\"hero__scrim\">\n <slot name=\"scrim\" />\n </div>,\n <nano-grid\n onNanoBpChange={this.handleGridChange}\n class=\"hero__content\"\n xlCols={2}\n xlSize={this.largeScreenBP}\n >\n <nano-grid-item gridStates=\"xl-col-span-2\">\n <div class=\"hero__breadcrumbs\">\n <slot name=\"breadcrumb\" />\n </div>\n </nano-grid-item>\n <nano-grid-item\n gridStates={\n this.hasSecondaryContent\n ? 'xl-col-span-1 xl-col-start-1 xl-row-start-2'\n : 'xl-col-span-2 xl-col-start-1 xl-row-start-2'\n }\n >\n <div class=\"hero__primary\">\n <div class=\"hero__primary-content\">\n <slot name=\"back-btn\" />\n <div>\n <slot name=\"primary-content\" />\n </div>\n </div>\n </div>\n </nano-grid-item>\n {this.hasSecondaryContent && (\n <nano-grid-item gridStates=\"xl-col-span-1 xl-col-start-2 xl-row-start-2\">\n <div class=\"hero__secondary\">\n <slot name=\"secondary-content\" />\n {this.hasIconBox && (\n <div class=\"hero__icon-box\">\n <slot name=\"icon-box\" />\n <slot name=\"icon-box-item\" />\n </div>\n )}\n {this.hasQuote && (\n <div class=\"hero__quote-content\">\n <span class=\"hero__quote\">\n <slot name=\"quote\" />\n </span>\n <div class=\"hero__quote-author\">\n <slot name=\"quote-author\" />\n </div>\n </div>\n )}\n </div>\n </nano-grid-item>\n )}\n </nano-grid>,\n ];\n };\n\n render() {\n const rtl =\n this.host.dir === 'rtl' \|\|\n (this.host.ownerDocument as Document).dir === 'rtl';\n\n return (\n <Host\n class={{\n [this.gridSizes.join(' ')]: true,\n }}\n >\n <div\n class={{\n hero: true,\n 'hero--light': this.theme === 'light',\n 'hero--secondary': this.hasSecondaryContent,\n 'hero--iconbox': this.hasIconBox,\n 'hero--rtl': rtl,\n 'hero--scrim': this.hasScrim,\n 'hero--breadcrumb': !!this.breadCrumbs.length,\n 'hero--hasbg': this.hasBg,\n 'hero--backbtn': this.hasBackBtn,\n 'hero--sub': this.level === 'sub',\n }}\n >\n <div class=\"hero__bg-wrap\">\n {!!this.imgSrc && (\n <nano-img\n class=\"hero__img\"\n lazy={false}\n background\n srcSet={this.imgSrcSet}\n src={this.imgSrc}\n >\n <this.HeroContent />\n </nano-img>\n )}\n {!this.imgSrc && [\n <div class=\"hero__bg-slot\">\n <slot name=\"background\" />\n </div>,\n <this.HeroContent />,\n ]}\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/icon/icon.css CHANGED Viewed

@@ -36,7 +36,7 @@
   min-width: var(--icon-size);
   min-height: var(--icon-size);
   contain: strict;
-  fill: currentColor;
+  fill: currentcolor;
   box-sizing: content-box !important;
   transition: opacity 0.3s ease;
   color: var(--color);
@@ -45,7 +45,7 @@
 }
 :host .nanoicon {
-  stroke: currentColor;
+  stroke: currentcolor;
 }
 .nanoicon-fill-none {

package/dist/collection/components/icon/icon.js CHANGED Viewed

@@ -5,7 +5,6 @@ import { Build, Host, h, } from '@stencil/core';
 import { createColorClasses } from '../../utils/theme';
 import { getSvgContent, iconContent } from './request';
 import { getName, getUrl } from './utils';
-const CANSHADOW = !!document.head.attachShadow;
 /**
  * An SVG loader / helper. Comes bundled with all fontawesome pro icons by default but can use any custom SVG (with an correct path). Lazily loads SVG for each icon, so will only request the icons that you're using and that are visible.
  */
@@ -53,7 +52,6 @@ export class Icon {
   }
   waitUntilVisible(el, rootMargin, cb) {
     if (Build.isBrowser &&
-      CANSHADOW &&
       this.lazy &&
       typeof window !== 'undefined' &&
       window.IntersectionObserver) {
@@ -79,13 +77,13 @@ export class Icon {
         if (iconContent.has(url)) {
           // sync if it's already loaded
           this.svgContent = iconContent.get(url);
-          this.isLoading = false;
+          requestAnimationFrame(() => (this.isLoading = false));
         }
         else {
           // async if it hasn't been loaded
           getSvgContent(url).then(() => {
             this.svgContent = iconContent.get(url);
-            this.isLoading = false;
+            requestAnimationFrame(() => (this.isLoading = false));
           });
         }
       }
@@ -99,12 +97,7 @@ export class Icon {
           this.name.indexOf('chevron') > -1) &&
         this.el.ownerDocument.dir === 'rtl' &&
         this.flipRtl !== false);
-    return (h(Host, { role: "img", class: {
-        ...createColorClasses(this.color),
-        loading: this.isLoading,
-        [`icon-${this.size}`]: !!this.size,
-        'flip-rtl': !!flipRtl,
-      } }, Build.isBrowser && this.svgContent ? (h("div", { class: "icon-inner", innerHTML: this.svgContent })) : (h("div", { class: "icon-inner" }))));
+    return (h(Host, { role: "img", class: Object.assign(Object.assign({}, createColorClasses(this.color)), { loading: this.isLoading, [`icon-${this.size}`]: !!this.size, 'flip-rtl': !!flipRtl }) }, Build.isBrowser && this.svgContent ? (h("div", { class: "icon-inner", innerHTML: this.svgContent })) : (h("div", { class: "icon-inner" }))));
   }
   static get is() { return "nano-icon"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/icon/icon.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"icon.js","sourceRoot":"","sources":["../../../src/components/icon/icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,EACL,SAAS,EACT,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,KAAK,EACL,CAAC,GACF,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AAG1C~~,MAAM,SAAS,GAAG,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC;AAE/C~~;;GAEG;AAOH,MAAM,OAAO,IAAI;;;~~qBAMc~~,KAAK;qBACL,IAAI;;;;;;;;~~gBA6ClB~~,IAAI;;EAEX,YAAY;IAClB,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;MACnB,MAAM,KAAK,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;MAC5C,+BAA+B;MAC/B,gDAAgD;MAChD,IAAI,KAAK,EAAE;QACT,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;OACpE;KACF;EACH,CAAC;EAED,iBAAiB;IACf,2DAA2D;IAC3D,kDAAkD;IAClD,oCAAoC;IACpC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE;MAC1C,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;MACtB,IAAI,CAAC,QAAQ,EAAE,CAAC;IAClB,CAAC,CAAC,CAAC;EACL,CAAC;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,EAAE,EAAE;MACX,IAAI,CAAC,EAAE,CAAC,UAAU,EAAE,CAAC;MACrB,IAAI,CAAC,EAAE,GAAG,SAAS,CAAC;KACrB;EACH,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,YAAY,EAAE,CAAC;EACtB,CAAC;EAEO,gBAAgB,CACtB,EAAe,EACf,UAAkB,EAClB,EAAc;IAEd,IACE,KAAK,CAAC,SAAS;MACf,~~SAAS;MACT,~~IAAI,CAAC,IAAI;MACT,OAAO,MAAM,KAAK,WAAW;MAC5B,MAAc,CAAC,oBAAoB,EACpC;MACA,MAAM,EAAE,GAAG,CAAC,IAAI,CAAC,EAAE,GAAG,IAAK,MAAc,CAAC,oBAAoB,CAC5D,CAAC,IAAiC,EAAE,EAAE;QACpC,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,cAAc,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,EAAE;UACjE,EAAE,CAAC,UAAU,EAAE,CAAC;UAChB,IAAI,CAAC,EAAE,GAAG,SAAS,CAAC;UACpB,EAAE,EAAE,CAAC;SACN;MACH,CAAC,EACD,EAAE,UAAU,EAAE,CACf,CAAC,CAAC;MAEH,EAAE,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;KAChB;SAAM;MACL,+CAA+C;MAC/C,qCAAqC;MACrC,EAAE,EAAE,CAAC;KACN;EACH,CAAC;EAKD,QAAQ;IACN,IAAI,KAAK,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,EAAE;MACrC,MAAM,GAAG,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;MACzB,IAAI,GAAG,EAAE;QACP,IAAI,WAAW,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE;UACxB,8BAA8B;UAC9B,IAAI,CAAC,UAAU,GAAG,WAAW,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;UACvC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;~~SACxB~~;aAAM;UACL,iCAAiC;UACjC,aAAa,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,EAAE;YAC3B,IAAI,CAAC,UAAU,GAAG,WAAW,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;YACvC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;~~UACzB~~,CAAC,CAAC,CAAC;SACJ;OACF;KACF;IACD,IAAI,CAAC,YAAY,EAAE,CAAC;EACtB,CAAC;EAED,MAAM;IACJ,MAAM,OAAO,GACX,IAAI,CAAC,OAAO;MACZ,CAAC,IAAI,CAAC,IAAI;QACR,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;UAC9B,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC;QACnC,IAAI,CAAC,EAAE,CAAC,aAA0B,CAAC,GAAG,KAAK,KAAK;QACjD,IAAI,CAAC,OAAO,KAAK,KAAK,CAAC,CAAC;IAE5B,OAAO,CACL,EAAC,IAAI,IACH,IAAI,EAAC,KAAK,EACV,KAAK,~~EAAE;QACL~~,~~GAAG,~~kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC~~;QACjC~~,OAAO,EAAE,IAAI,CAAC,SAAS~~;QACvB~~,CAAC,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI~~;QAClC~~,UAAU,EAAE,CAAC,CAAC,OAAO~~;OACtB~~,~~IAEA~~,KAAK,CAAC,SAAS,IAAI,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CACpC,WAAK,KAAK,EAAC,YAAY,EAAC,SAAS,EAAE,IAAI,CAAC,UAAU,GAAQ,CAC3D,CAAC,CAAC,CAAC,CACF,WAAK,KAAK,EAAC,YAAY,GAAO,CAC/B,CACI,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n Build,\n Component,\n Element,\n Host,\n Prop,\n State,\n Watch,\n h,\n} from '@stencil/core';\nimport { createColorClasses } from '../../utils/theme';\nimport { getSvgContent, iconContent } from './request';\nimport { getName, getUrl } from './utils';\nimport type { Color } from '../../interface';\n\~~nconst CANSHADOW = !!document.head.attachShadow;\~~n\n/*\n An SVG loader / helper. Comes bundled with all fontawesome pro icons by default but can use any custom SVG (with an correct path). Lazily loads SVG for each icon, so will only request the icons that you're using and that are visible.\n /\n@Component({\n tag: 'nano-icon',\n assetsDirs: ['../../../node_modules/@fortawesome/fontawesome-pro/svgs'],\n styleUrl: 'icon.scss',\n shadow: true,\n})\nexport class Icon {\n private io?: IntersectionObserver;\n\n @Element() el!: HTMLNanoIconElement;\n\n @State() ~~private~~ svgContent?: string;\n @State() ~~private~~ isVisible = false;\n @State() ~~private~~ isLoading = true;\n\n /\n Color to use from your application's color palette.\n * Default options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\n /\n @Prop() color?: Color;\n\n /\n Specifies the label to use for accessibility. Defaults to the icon name.\n /\n @Prop({ mutable: true, reflect: true }) ariaLabel: string;\n\n /\n Specifies whether the icon should horizontally flip when `dir` is `\"rtl\"`.\n /\n @Prop() flipRtl?: boolean;\n\n /\n Specifies which icon to use from the built-in set of icons.\n /\n @Prop() name?: string;\n\n /\n Specifies the exact `src` of an SVG file to use.\n /\n @Prop() src?: string;\n\n /\n A combination of both `name` and `src`. If a `src` url is detected\n * it will set the `src` property. Otherwise it assumes it's a built-in named\n * SVG and set the `name` property.\n /\n @Prop() icon?: any;\n\n /\n The size of the icon.\n * Available options are: `\"small\"` and `\"large\"`.\n /\n @Prop() size?: 'small' \| 'large';\n\n /\n If enabled, nano-icon will be loaded lazily when it's visible in the viewport.\n * Default, `true`.\n */\n @Prop() lazy = true;\n\n private setAriaLabel() {\n if (!this.ariaLabel) {\n const label = getName(this.name, this.icon);\n // user did not provide a label\n // come up with the label based on the icon name\n if (label) {\n this.ariaLabel = label.split('/').slice(-1)[0].replace(/\\-/g, ' ');\n }\n }\n }\n\n connectedCallback() {\n // purposely do not return the promise here because loading\n // the svg file should not hold up loading the app\n // only load the svg if it's visible\n this.waitUntilVisible(this.el, '50px', () => {\n this.isVisible = true;\n this.loadIcon();\n });\n }\n\n disconnectedCallback() {\n if (this.io) {\n this.io.disconnect();\n this.io = undefined;\n }\n }\n\n componentWillLoad() {\n this.setAriaLabel();\n }\n\n private waitUntilVisible(\n el: HTMLElement,\n rootMargin: string,\n cb: () => void\n ) {\n if (\n Build.isBrowser &&\n ~~CANSHADOW &&\n~~ this.lazy &&\n typeof window !== 'undefined' &&\n (window as any).IntersectionObserver\n ) {\n const io = (this.io = new (window as any).IntersectionObserver(\n (data: IntersectionObserverEntry[]) => {\n if (data[0].isIntersecting \|\| (data[1] && data[1].isIntersecting)) {\n io.disconnect();\n this.io = undefined;\n cb();\n }\n },\n { rootMargin }\n ));\n\n io.observe(el);\n } else {\n // browser doesn't support IntersectionObserver\n // so just fallback to always show it\n cb();\n }\n }\n\n @Watch('name')\n @Watch('src')\n @Watch('icon')\n loadIcon() {\n if (Build.isBrowser && this.isVisible) {\n const url = getUrl(this);\n if (url) {\n if (iconContent.has(url)) {\n // sync if it's already loaded\n this.svgContent = iconContent.get(url);\n this.isLoading = false;\n } else {\n // async if it hasn't been loaded\n getSvgContent(url).then(() => {\n this.svgContent = iconContent.get(url);\n this.isLoading = false;\n });\n }\n }\n }\n this.setAriaLabel();\n }\n\n render() {\n const flipRtl =\n this.flipRtl \|\|\n (this.name &&\n (this.name.indexOf('arrow') > -1 \|\|\n this.name.indexOf('chevron') > -1) &&\n (this.el.ownerDocument as Document).dir === 'rtl' &&\n this.flipRtl !== false);\n\n return (\n <Host\n role=\"img\"\n class={{\n ...createColorClasses(this.color),\n loading: this.isLoading,\n [`icon-${this.size}`]: !!this.size,\n 'flip-rtl': !!flipRtl,\n }}\n >\n {Build.isBrowser && this.svgContent ? (\n <div class=\"icon-inner\" innerHTML={this.svgContent}></div>\n ) : (\n <div class=\"icon-inner\"></div>\n )}\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"icon.js","sourceRoot":"","sources":["../../../src/components/icon/icon.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Build,\n Component,\n Element,\n Host,\n Prop,\n State,\n Watch,\n h,\n} from '@stencil/core';\nimport { createColorClasses } from '../../utils/theme';\nimport { getSvgContent, iconContent } from './request';\nimport { getName, getUrl } from './utils';\nimport type { Color } from '../../interface';\n\n/*\n An SVG loader / helper. Comes bundled with all fontawesome pro icons by default but can use any custom SVG (with an correct path). Lazily loads SVG for each icon, so will only request the icons that you're using and that are visible.\n /\n@Component({\n tag: 'nano-icon',\n assetsDirs: ['../../../node_modules/@fortawesome/fontawesome-pro/svgs'],\n styleUrl: 'icon.scss',\n shadow: true,\n})\nexport class Icon {\n private io?: IntersectionObserver;\n\n @Element() el!: HTMLNanoIconElement;\n\n @State() svgContent?: string;\n @State() isVisible = false;\n @State() isLoading = true;\n\n /\n Color to use from your application's color palette.\n * Default options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\n /\n @Prop() color?: Color;\n\n /\n Specifies the label to use for accessibility. Defaults to the icon name.\n /\n @Prop({ mutable: true, reflect: true }) ariaLabel: string;\n\n /\n Specifies whether the icon should horizontally flip when `dir` is `\"rtl\"`.\n /\n @Prop() flipRtl?: boolean;\n\n /\n Specifies which icon to use from the built-in set of icons.\n /\n @Prop() name?: string;\n\n /\n Specifies the exact `src` of an SVG file to use.\n /\n @Prop() src?: string;\n\n /\n A combination of both `name` and `src`. If a `src` url is detected\n * it will set the `src` property. Otherwise it assumes it's a built-in named\n * SVG and set the `name` property.\n /\n @Prop() icon?: any;\n\n /\n The size of the icon.\n * Available options are: `\"small\"` and `\"large\"`.\n /\n @Prop() size?: 'small' \| 'large';\n\n /\n If enabled, nano-icon will be loaded lazily when it's visible in the viewport.\n * Default, `true`.\n */\n @Prop() lazy = true;\n\n private setAriaLabel() {\n if (!this.ariaLabel) {\n const label = getName(this.name, this.icon);\n // user did not provide a label\n // come up with the label based on the icon name\n if (label) {\n this.ariaLabel = label.split('/').slice(-1)[0].replace(/\\-/g, ' ');\n }\n }\n }\n\n connectedCallback() {\n // purposely do not return the promise here because loading\n // the svg file should not hold up loading the app\n // only load the svg if it's visible\n this.waitUntilVisible(this.el, '50px', () => {\n this.isVisible = true;\n this.loadIcon();\n });\n }\n\n disconnectedCallback() {\n if (this.io) {\n this.io.disconnect();\n this.io = undefined;\n }\n }\n\n componentWillLoad() {\n this.setAriaLabel();\n }\n\n private waitUntilVisible(\n el: HTMLElement,\n rootMargin: string,\n cb: () => void\n ) {\n if (\n Build.isBrowser &&\n this.lazy &&\n typeof window !== 'undefined' &&\n (window as any).IntersectionObserver\n ) {\n const io = (this.io = new (window as any).IntersectionObserver(\n (data: IntersectionObserverEntry[]) => {\n if (data[0].isIntersecting \|\| (data[1] && data[1].isIntersecting)) {\n io.disconnect();\n this.io = undefined;\n cb();\n }\n },\n { rootMargin }\n ));\n\n io.observe(el);\n } else {\n // browser doesn't support IntersectionObserver\n // so just fallback to always show it\n cb();\n }\n }\n\n @Watch('name')\n @Watch('src')\n @Watch('icon')\n loadIcon() {\n if (Build.isBrowser && this.isVisible) {\n const url = getUrl(this);\n if (url) {\n if (iconContent.has(url)) {\n // sync if it's already loaded\n this.svgContent = iconContent.get(url);\n requestAnimationFrame(() => (this.isLoading = false));\n } else {\n // async if it hasn't been loaded\n getSvgContent(url).then(() => {\n this.svgContent = iconContent.get(url);\n requestAnimationFrame(() => (this.isLoading = false));\n });\n }\n }\n }\n this.setAriaLabel();\n }\n\n render() {\n const flipRtl =\n this.flipRtl \|\|\n (this.name &&\n (this.name.indexOf('arrow') > -1 \|\|\n this.name.indexOf('chevron') > -1) &&\n (this.el.ownerDocument as Document).dir === 'rtl' &&\n this.flipRtl !== false);\n\n return (\n <Host\n role=\"img\"\n class={{\n ...createColorClasses(this.color),\n loading: this.isLoading,\n [`icon-${this.size}`]: !!this.size,\n 'flip-rtl': !!flipRtl,\n }}\n >\n {Build.isBrowser && this.svgContent ? (\n <div class=\"icon-inner\" innerHTML={this.svgContent}></div>\n ) : (\n <div class=\"icon-inner\"></div>\n )}\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/icon-button/icon-button.css CHANGED Viewed

@@ -40,8 +40,8 @@
   color: var(--color);
   padding: var(--padding);
   cursor: pointer;
-  appearance: none;
   -webkit-appearance: none;
+          appearance: none;
   transition: box-shadow var(--nano-transition-fast, 0.1s) ease-in-out;
 }
 .icon-button:hover:not(.icon-button--disabled), .icon-button:focus:not(.icon-button--disabled) {

package/dist/collection/components/img/img.css CHANGED Viewed

@@ -32,7 +32,6 @@
 .img {
   position: relative;
   min-block-size: inherit;
-  block-size: 100%;
   display: block;
   object-fit: inherit;
   object-position: inherit;

package/dist/collection/components/img/img.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import { h, } from '@stencil/core';
+import { h, Build, } from '@stencil/core';
 /**
  * Img with benefits. Lazy loading. Simple `srcSet` solution for both `<img>` and `background-image` varieties.
  * @slot - Main slot. Only relevant with `<nano-img background>`
@@ -79,8 +79,7 @@ export class Img {
       return;
     }
     if (typeof window !== 'undefined' &&
-      'IntersectionObserver' in window &&
-      'isIntersecting' in window.IntersectionObserverEntry.prototype) {
+      'IntersectionObserver' in window) {
       this.removeIO();
       this.io = new IntersectionObserver((data) => {
         if (data[0].isIntersecting) {
@@ -128,7 +127,7 @@ export class Img {
         loaded: this.hasLoaded,
         hide: this.background,
         'no-height': this.autoHeight === 'content',
-      }, decoding: "async", src: this.loadSrc, alt: this.alt, onLoad: this.onLoad, onError: this.loadError }), h("nano-resize-observe", { class: "img__observer", onNanoResizeStateChange: this.onResize, states: this.imgStates })));
+      }, decoding: "async", src: Build.isServer ? this.src : this.loadSrc, loading: Build.isServer && this.lazy ? 'lazy' : undefined, alt: this.alt, onLoad: this.onLoad, onError: this.loadError }), h("nano-resize-observe", { class: "img__observer", onNanoResizeStateChange: this.onResize, states: this.imgStates })));
   }
   static get is() { return "nano-img"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/img/img.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"img.js","sourceRoot":"","sources":["../../../src/components/img/img.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n Event,\n EventEmitter,\n State,\n Prop,\n Watch,\n h,\n ComponentInterface,\n} from '@stencil/core';\nimport type { ResizeStateChangeEventDetail } from '../../interface';\n\n/*\n Img with benefits. Lazy loading. Simple `srcSet` solution for both `<img>` and `background-image` varieties.\n * @slot - Main slot. Only relevant with `<nano-img background>`\n /\n@Component({\n tag: 'nano-img',\n styleUrl: 'img.scss',\n shadow: true,\n})\nexport class Img implements ComponentInterface {\n private io?: IntersectionObserver;\n private _srcSet: { [key: string]: { src: string; active: boolean } } = {};\n\n @Element() host!: HTMLNanoImgElement;\n\n @State() loadSrc?: string;\n @State() loadError?: () => void;\n @State() hasLoaded: boolean = false;\n @State() imgStates: string = null;\n @State() _src: string;\n @Watch('_src')\n _srcChanged() {\n this.hasLoaded = false;\n this.addIO();\n }\n\n /* This attribute defines the alternative text describing the image.\n * Users will see this text displayed if the image URL is wrong, or if the image is not yet downloaded. /\n @Prop() alt?: string;\n\n /* The image URL. This attribute is mandatory for the `<img>` element. /\n @Prop() src!: string;\n @Watch('src')\n srcChanged() {\n this._src = this.src;\n }\n\n /* Optional list string providing media sizes with corresponding image srcs.\n * i.e. show img-x at 300px wide. Format `srcSet=\"200w src/imgSmall.jpg, 500h src/imgMed.png\"` /\n @Prop() srcSet?: string;\n @Watch('srcSet')\n srcSetChanged() {\n if (!this.srcSet) return;\n\n delete this._srcSet;\n this._srcSet = {};\n\n this.imgStates = this.srcSet\n .split(',')\n .map((bpSrc) => {\n const [bp, src] = bpSrc.split(' ').filter((bp) => bp.length);\n this._srcSet[bp] = { src: src, active: false };\n return bp;\n })\n .join(', ');\n }\n\n /* Render image lazily, when it comes into the browser viewport /\n @Prop() lazy: boolean = true;\n @Watch('lazy')\n lazyChanged() {\n if (!this.lazy) this.load();\n }\n\n / Render the image as a background image /\n @Prop() background?: boolean;\n\n / When the image is rendered as a background, and there is no preset dimensions of the component,\n * you can set how the component height will be set. Via image size or via the content /\n @Prop() autoHeight: 'content' \| 'image' = 'content';\n\n / Emitted when the img src has been set /\n @Event() nanoImgWillLoad!: EventEmitter<void>;\n\n /* Emitted when the image has finished loading /\n @Event() nanoImgDidLoad!: EventEmitter<void>;\n\n /* Emitted when the img fails to load */\n @Event() nanoImgError!: EventEmitter<void>;\n\n private addIO() {\n if (!this._src \|\| this.hasLoaded) return;\n if (!this.lazy) {\n this.load();\n return;\n }\n if (\n typeof (window as any) !== 'undefined' &&\n 'IntersectionObserver' in window &&\n 'isIntersecting' in window.IntersectionObserverEntry.prototype\n ) {\n this.removeIO();\n this.io = new IntersectionObserver((data) => {\n if (data[0].isIntersecting) {\n this.load();\n this.removeIO();\n }\n });\n\n this.io.observe(this.host);\n } else setTimeout(() => this.load(), 200);\n }\n\n private load() {\n this.loadError = this.onError;\n this.loadSrc = this._src;\n this.nanoImgWillLoad.emit();\n }\n\n private onLoad = () => {\n this.nanoImgDidLoad.emit();\n setTimeout(() => (this.hasLoaded = true), 50);\n };\n\n private onError = () => {\n this.nanoImgError.emit();\n };\n\n private onResize = (e: { detail: ResizeStateChangeEventDetail }) => {\n Object.entries(e.detail).forEach(([bp, active]) => {\n this._srcSet[bp].active = active;\n });\n\n // sort and find the highest sized matching image.\n const srcOpts = [];\n Object.keys(this._srcSet)\n .sort()\n .forEach((bp) => {\n if (this._srcSet[bp].active) srcOpts.push(this._srcSet[bp].src);\n });\n\n if (srcOpts.length) this._src = srcOpts.slice(-1)[0];\n // no matching image? Set back to default\n else this._src = this.src;\n };\n\n private removeIO() {\n if (this.io) {\n this.io.disconnect();\n this.io = undefined;\n }\n }\n\n connectedCallback() {\n this.srcChanged();\n this.srcSetChanged();\n this.lazyChanged();\n }\n\n componentDidLoad() {\n this.addIO();\n }\n\n disconnectedCallback() {\n this.removeIO();\n }\n\n render() {\n const bgStyle = !!this.loadSrc\n ? { 'background-image': `url(${this.loadSrc})` }\n : {};\n return (\n <div class=\"img\">\n <nano-skeleton class=\"img__loader\"></nano-skeleton>\n {!!this.background && (\n <div\n class={{\n loaded: this.hasLoaded,\n img__bg: true,\n 'no-height': this.autoHeight === 'image',\n }}\n style={bgStyle}\n >\n <slot />\n </div>\n )}\n <img\n class={{\n img__image: true,\n loaded: this.hasLoaded,\n hide: this.background,\n 'no-height': this.autoHeight === 'content',\n }}\n decoding=\"async\"\n src={this.loadSrc}\n alt={this.alt}\n onLoad={this.onLoad}\n onError={this.loadError}\n />\n <nano-resize-observe\n class=\"img__observer\"\n onNanoResizeStateChange={this.onResize}\n states={this.imgStates}\n />\n </div>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"img.js","sourceRoot":"","sources":["../../../src/components/img/img.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,KAAK,EACL,IAAI,EACJ,KAAK,EACL,CAAC,EAED,KAAK,GACN,MAAM,eAAe,CAAC;AAGvB;;;GAGG;AAMH,MAAM,OAAO,GAAG;;IAEN,YAAO,GAAwD,EAAE,CAAC;IAiGlE,WAAM,GAAG,GAAG,EAAE;MACpB,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;MAC3B,UAAU,CAAC,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC;IAChD,CAAC,CAAC;IAEM,YAAO,GAAG,GAAG,EAAE;MACrB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;IAC3B,CAAC,CAAC;IAEM,aAAQ,GAAG,CAAC,CAA2C,EAAE,EAAE;MACjE,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,MAAM,CAAC,EAAE,EAAE;QAChD,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,MAAM,GAAG,MAAM,CAAC;MACnC,CAAC,CAAC,CAAC;MAEH,kDAAkD;MAClD,MAAM,OAAO,GAAG,EAAE,CAAC;MACnB,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC;SACtB,IAAI,EAAE;SACN,OAAO,CAAC,CAAC,EAAE,EAAE,EAAE;QACd,IAAI,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,MAAM;UAAE,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC;MAClE,CAAC,CAAC,CAAC;MAEL,IAAI,OAAO,CAAC,MAAM;QAAE,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;MACrD,yCAAyC;;QACpC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC;IAC5B,CAAC,CAAC;;;qBApH4B,KAAK;qBACN,IAAI;;;;;gBAwCT,IAAI;;sBAWc,SAAS;;EAhDnD,WAAW;IACT,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;IACvB,IAAI,CAAC,KAAK,EAAE,CAAC;EACf,CAAC;EASD,UAAU;IACR,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC;EACvB,CAAC;EAMD,aAAa;IACX,IAAI,CAAC,IAAI,CAAC,MAAM;MAAE,OAAO;IAEzB,OAAO,IAAI,CAAC,OAAO,CAAC;IACpB,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC;IAElB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,MAAM;OACzB,KAAK,CAAC,GAAG,CAAC;OACV,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;MACb,MAAM,CAAC,EAAE,EAAE,GAAG,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC;MAC7D,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC;MAC/C,OAAO,EAAE,CAAC;IACZ,CAAC,CAAC;OACD,IAAI,CAAC,IAAI,CAAC,CAAC;EAChB,CAAC;EAKD,WAAW;IACT,IAAI,CAAC,IAAI,CAAC,IAAI;MAAE,IAAI,CAAC,IAAI,EAAE,CAAC;EAC9B,CAAC;EAkBO,KAAK;IACX,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,SAAS;MAAE,OAAO;IACzC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;MACd,IAAI,CAAC,IAAI,EAAE,CAAC;MACZ,OAAO;KACR;IACD,IACE,OAAQ,MAAc,KAAK,WAAW;MACtC,sBAAsB,IAAI,MAAM,EAChC;MACA,IAAI,CAAC,QAAQ,EAAE,CAAC;MAChB,IAAI,CAAC,EAAE,GAAG,IAAI,oBAAoB,CAAC,CAAC,IAAI,EAAE,EAAE;QAC1C,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,cAAc,EAAE;UAC1B,IAAI,CAAC,IAAI,EAAE,CAAC;UACZ,IAAI,CAAC,QAAQ,EAAE,CAAC;SACjB;MACH,CAAC,CAAC,CAAC;MAEH,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC5B;;MAAM,UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,GAAG,CAAC,CAAC;EAC5C,CAAC;EAEO,IAAI;IACV,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC;IAC9B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC;IACzB,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC;EAC9B,CAAC;EA6BO,QAAQ;IACd,IAAI,IAAI,CAAC,EAAE,EAAE;MACX,IAAI,CAAC,EAAE,CAAC,UAAU,EAAE,CAAC;MACrB,IAAI,CAAC,EAAE,GAAG,SAAS,CAAC;KACrB;EACH,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,UAAU,EAAE,CAAC;IAClB,IAAI,CAAC,aAAa,EAAE,CAAC;IACrB,IAAI,CAAC,WAAW,EAAE,CAAC;EACrB,CAAC;EAED,gBAAgB;IACd,IAAI,CAAC,KAAK,EAAE,CAAC;EACf,CAAC;EAED,oBAAoB;IAClB,IAAI,CAAC,QAAQ,EAAE,CAAC;EAClB,CAAC;EAED,MAAM;IACJ,MAAM,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;MAC5B,CAAC,CAAC,EAAE,kBAAkB,EAAE,OAAO,IAAI,CAAC,OAAO,GAAG,EAAE;MAChD,CAAC,CAAC,EAAE,CAAC;IAEP,OAAO,CACL,WAAK,KAAK,EAAC,KAAK;MACd,qBAAe,KAAK,EAAC,aAAa,GAAiB;MAClD,CAAC,CAAC,IAAI,CAAC,UAAU,IAAI,CACpB,WACE,KAAK,EAAE;UACL,MAAM,EAAE,IAAI,CAAC,SAAS;UACtB,OAAO,EAAE,IAAI;UACb,WAAW,EAAE,IAAI,CAAC,UAAU,KAAK,OAAO;SACzC,EACD,KAAK,EAAE,OAAO;QAEd,eAAQ,CACJ,CACP;MACD,WACE,KAAK,EAAE;UACL,UAAU,EAAE,IAAI;UAChB,MAAM,EAAE,IAAI,CAAC,SAAS;UACtB,IAAI,EAAE,IAAI,CAAC,UAAU;UACrB,WAAW,EAAE,IAAI,CAAC,UAAU,KAAK,SAAS;SAC3C,EACD,QAAQ,EAAC,OAAO,EAChB,GAAG,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,EAC7C,OAAO,EAAE,KAAK,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EACzD,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,SAAS,GACvB;MACF,2BACE,KAAK,EAAC,eAAe,EACrB,uBAAuB,EAAE,IAAI,CAAC,QAAQ,EACtC,MAAM,EAAE,IAAI,CAAC,SAAS,GACtB,CACE,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n Component,\n Element,\n Event,\n EventEmitter,\n State,\n Prop,\n Watch,\n h,\n ComponentInterface,\n Build,\n} from '@stencil/core';\nimport type { ResizeStateChangeEventDetail } from '../../interface';\n\n/*\n Img with benefits. Lazy loading. Simple `srcSet` solution for both `<img>` and `background-image` varieties.\n * @slot - Main slot. Only relevant with `<nano-img background>`\n /\n@Component({\n tag: 'nano-img',\n styleUrl: 'img.scss',\n shadow: true,\n})\nexport class Img implements ComponentInterface {\n private io?: IntersectionObserver;\n private _srcSet: { [key: string]: { src: string; active: boolean } } = {};\n\n @Element() host!: HTMLNanoImgElement;\n\n @State() loadSrc?: string;\n @State() loadError?: () => void;\n @State() hasLoaded: boolean = false;\n @State() imgStates: string = null;\n @State() _src: string;\n @Watch('_src')\n _srcChanged() {\n this.hasLoaded = false;\n this.addIO();\n }\n\n /* This attribute defines the alternative text describing the image.\n * Users will see this text displayed if the image URL is wrong, or if the image is not yet downloaded. /\n @Prop() alt?: string;\n\n /* The image URL. This attribute is mandatory for the `<img>` element. /\n @Prop() src!: string;\n @Watch('src')\n srcChanged() {\n this._src = this.src;\n }\n\n /* Optional list string providing media sizes with corresponding image srcs.\n * i.e. show img-x at 300px wide. Format `srcSet=\"200w src/imgSmall.jpg, 500h src/imgMed.png\"` /\n @Prop() srcSet?: string;\n @Watch('srcSet')\n srcSetChanged() {\n if (!this.srcSet) return;\n\n delete this._srcSet;\n this._srcSet = {};\n\n this.imgStates = this.srcSet\n .split(',')\n .map((bpSrc) => {\n const [bp, src] = bpSrc.split(' ').filter((bp) => bp.length);\n this._srcSet[bp] = { src: src, active: false };\n return bp;\n })\n .join(', ');\n }\n\n /* Render image lazily, when it comes into the browser viewport /\n @Prop() lazy: boolean = true;\n @Watch('lazy')\n lazyChanged() {\n if (!this.lazy) this.load();\n }\n\n / Render the image as a background image /\n @Prop() background?: boolean;\n\n / When the image is rendered as a background, and there is no preset dimensions of the component,\n * you can set how the component height will be set. Via image size or via the content /\n @Prop() autoHeight: 'content' \| 'image' = 'content';\n\n / Emitted when the img src has been set /\n @Event() nanoImgWillLoad!: EventEmitter<void>;\n\n /* Emitted when the image has finished loading /\n @Event() nanoImgDidLoad!: EventEmitter<void>;\n\n /* Emitted when the img fails to load */\n @Event() nanoImgError!: EventEmitter<void>;\n\n private addIO() {\n if (!this._src \|\| this.hasLoaded) return;\n if (!this.lazy) {\n this.load();\n return;\n }\n if (\n typeof (window as any) !== 'undefined' &&\n 'IntersectionObserver' in window\n ) {\n this.removeIO();\n this.io = new IntersectionObserver((data) => {\n if (data[0].isIntersecting) {\n this.load();\n this.removeIO();\n }\n });\n\n this.io.observe(this.host);\n } else setTimeout(() => this.load(), 200);\n }\n\n private load() {\n this.loadError = this.onError;\n this.loadSrc = this._src;\n this.nanoImgWillLoad.emit();\n }\n\n private onLoad = () => {\n this.nanoImgDidLoad.emit();\n setTimeout(() => (this.hasLoaded = true), 50);\n };\n\n private onError = () => {\n this.nanoImgError.emit();\n };\n\n private onResize = (e: { detail: ResizeStateChangeEventDetail }) => {\n Object.entries(e.detail).forEach(([bp, active]) => {\n this._srcSet[bp].active = active;\n });\n\n // sort and find the highest sized matching image.\n const srcOpts = [];\n Object.keys(this._srcSet)\n .sort()\n .forEach((bp) => {\n if (this._srcSet[bp].active) srcOpts.push(this._srcSet[bp].src);\n });\n\n if (srcOpts.length) this._src = srcOpts.slice(-1)[0];\n // no matching image? Set back to default\n else this._src = this.src;\n };\n\n private removeIO() {\n if (this.io) {\n this.io.disconnect();\n this.io = undefined;\n }\n }\n\n connectedCallback() {\n this.srcChanged();\n this.srcSetChanged();\n this.lazyChanged();\n }\n\n componentDidLoad() {\n this.addIO();\n }\n\n disconnectedCallback() {\n this.removeIO();\n }\n\n render() {\n const bgStyle = !!this.loadSrc\n ? { 'background-image': `url(${this.loadSrc})` }\n : {};\n\n return (\n <div class=\"img\">\n <nano-skeleton class=\"img__loader\"></nano-skeleton>\n {!!this.background && (\n <div\n class={{\n loaded: this.hasLoaded,\n img__bg: true,\n 'no-height': this.autoHeight === 'image',\n }}\n style={bgStyle}\n >\n <slot />\n </div>\n )}\n <img\n class={{\n img__image: true,\n loaded: this.hasLoaded,\n hide: this.background,\n 'no-height': this.autoHeight === 'content',\n }}\n decoding=\"async\"\n src={Build.isServer ? this.src : this.loadSrc}\n loading={Build.isServer && this.lazy ? 'lazy' : undefined}\n alt={this.alt}\n onLoad={this.onLoad}\n onError={this.loadError}\n />\n <nano-resize-observe\n class=\"img__observer\"\n onNanoResizeStateChange={this.onResize}\n states={this.imgStates}\n />\n </div>\n );\n }\n}\n"]}

package/dist/collection/components/input/input.css CHANGED Viewed

@@ -70,8 +70,10 @@ label.visually-hide,
 .form-ctrl__float-label {
   padding-block: 0;
-  padding-inline-end: 0;
-  padding-inline-start: var(--padding-start);
+  -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;
@@ -108,7 +110,8 @@ label.visually-hide,
 .form-ctrl__label {
   color: var(--label-color);
   font-size: var(--label-font-size);
-  padding-block-end: var(--padding-bottom);
+  -webkit-padding-after: var(--padding-bottom);
+          padding-block-end: var(--padding-bottom);
   line-height: 1;
   display: flex;
 }
@@ -120,8 +123,10 @@ label.visually-hide,
 }
 .form-ctrl__label .form-ctrl__label-placeholder {
   margin-block: unset;
-  margin-inline-end: 5px;
-  margin-inline-start: 0;
+  -webkit-margin-end: 5px;
+          margin-inline-end: 5px;
+  -webkit-margin-start: 0;
+          margin-inline-start: 0;
   opacity: 0;
   -webkit-appearance: none;
           appearance: none;
@@ -130,8 +135,10 @@ label.visually-hide,
 }
 .form-ctrl__label .form-ctrl__label-charcount {
   margin-block: unset;
-  margin-inline-end: 0;
-  margin-inline-start: auto;
+  -webkit-margin-end: 0;
+          margin-inline-end: 0;
+  -webkit-margin-start: auto;
+          margin-inline-start: auto;
   font-size: 0.9em;
   opacity: 0.5;
 }
@@ -224,27 +231,33 @@ label.visually-hide,
   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;
+  -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;
 }
 :host(.has-focus) .form-ctrl__input {
   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;
+  -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;
 }
 :host(.is-invalid) .form-ctrl__input {
   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;
+  -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;
 }
 :host(.is-invalid.has-focus) .form-ctrl__input {
   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;
+  -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 {
@@ -284,8 +297,10 @@ label.visually-hide,
 .form-ctrl__slot-value-end * {
   --nano-icon-size: 1.4em;
   padding-inline: unset;
-  padding-inline-start: var(--padding-start);
-  padding-inline-end: var(--padding-end);
+  -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;
@@ -343,8 +358,8 @@ label.visually-hide,
   * @prop --padding-bottom: defaults to var(--nano-input-padding-bottom, var(--nano-input-padding, 6px));
   * @prop --padding-start: defaults to var(--nano-input-padding-start, var(--nano-input-padding, 8px));
-  * @prop --color-invalid: defaults to var(--nano-color-danger-rgb, 239, 65, 53);
-  * @prop --color--focus-rgb: defaults to var(--nano-color-base-rgb, var(--nano-color-primary-rgb, 0, 116, 149));
+  * @prop --color-invalid: defaults to var(--nano-color-danger-rgb, 239 65 53);
+  * @prop --color--focus-rgb: defaults to var(--nano-color-base-rgb, var(--nano-color-primary-rgb, 0 116 149));
   * @prop --input-font-size: defaults to var(--nano-input-font-size, 0.87em);
   * @prop --input-text-color: defaults to var(--nano-input-text-color, #4a4a4a);
@@ -368,12 +383,12 @@ label.visually-hide,
   * @prop --clear-btn-color--hover: defaults to rgba(var(--color--focus-rgb), 1);
   * @prop --clear-btn-color--invalid: defaults to rgba(var(--color-invalid), 1);
-  * @prop --label-color: defaults to var(--nano-input-label-color, "currentColor");
+  * @prop --label-color: defaults to var(--nano-input-label-color, "currentcolor");
   * @prop --label-color--focus: defaults to var(--label-color);
-  * @prop --label-color-invalid: defaults to var(--nano-input-label-color-invalid, "currentColor");
+  * @prop --label-color-invalid: defaults to var(--nano-input-label-color-invalid, "currentcolor");
   * @prop --label-font-size: defaults to var(--nano-input-label-color, 1em);
-  * @prop --multi-input-value-bg: Tag / multivalue bg. defaults to var(--nano-input-tag-bg, 186, 220, 240);
+  * @prop --multi-input-value-bg: Tag / multivalue bg. defaults to var(--nano-input-tag-bg, 186 220 240);
   * @prop --multi-input-value-text-color: Tag / multivalue text. defaults to var(--nano-input-tag-color, #455556);
   * @prop --multi-input-value-border: Tag / multivalue border. defaults to var(--nano-input-tag-color, #badcf0);
   */
@@ -385,11 +400,11 @@ label.visually-hide,
   --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-invalid: var(--nano-color-danger-rgb, 239 65 53);
   --color--focus-rgb:
     var(
       --nano-color-base-rgb,
-      var(--nano-color-primary-rgb, 0, 116, 149)
+      var(--nano-color-primary-rgb, 0 116 149)
     );
   --input-font-size: var(--nano-input-font-size, 0.87em);
   --input-text-color: var(--nano-input-text-color, #4a4a4a);
@@ -404,29 +419,33 @@ label.visually-hide,
   --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-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: rgba(var(--color--focus-rgb), 1);
-  --clear-btn-color--invalid: rgba(var(--color-invalid), 1);
-  --label-color: var(--nano-input-label-color, "currentColor");
+  --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-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-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;
   inline-size: 100%;
   padding: 0 !important;
-  color: currentColor;
+  color: currentcolor;
   display: block;
 }
 :host(.nano-color) {
   color: var(--nano-color-base);
-  --input-border-style--focus: var(--nano-input-border-style, solid) var(--nano-color-tint, var(--nano-color-primary-tint, #2689a5));
+  --input-border-style--focus:
+    var(--nano-input-border-style, solid) var(
+      --nano-color-tint,
+      var(--nano-color-primary-tint, #2689a5)
+    );
 }
 .input__native-ctrl {
@@ -462,11 +481,13 @@ label.visually-hide,
   resize: none;
   overflow: hidden;
   line-height: 2.5em;
+  /* stylelint-disable-next-line selector-no-vendor-prefix */
 }
 .has-float-label .input__native-ctrl {
   line-height: 2.1em;
   min-height: 2.1em;
-  padding-block-start: 1.4em;
+  -webkit-padding-before: 1.4em;
+          padding-block-start: 1.4em;
 }
 .input__native-ctrl::placeholder {
   color: var(--placeholder-color);
@@ -507,7 +528,8 @@ label.visually-hide,
   line-height: 1.5em;
 }
 .has-float-label .form-ctrl__textarea .input__native-ctrl {
-  padding-block-start: 1.75em;
+  -webkit-padding-before: 1.75em;
+          padding-block-start: 1.75em;
 }
 :host([readonly]:not([readonly=false])) .input__native-ctrl {
   -webkit-user-select: none;

package/dist/collection/components/input/input.js CHANGED Viewed

@@ -22,6 +22,15 @@ The default styling reference comes from the [ONT styleguide](https://nanoporete
  * @slot - can be used with a `nano-datalist`. See the `nano-datalist` docs for more information
  */
 export class Input {
+  get nativeInputWrap() {
+    return this._nativeInputWrap;
+  }
+  set nativeInputWrap(ele) {
+    if (this._nativeInputWrap === ele)
+      return;
+    this._nativeInputWrap = ele;
+    this.setDataListOpts();
+  }
   constructor() {
     this.inputId = `nano-input-${inputIds++}`;
     this.didBlurAfterEdit = false;
@@ -49,7 +58,7 @@ export class Input {
     };
     this.onInput = (ev) => {
       const input = ev.target;
-      this.value = input?.value || '';
+      this.value = (input === null || input === void 0 ? void 0 : input.value) || '';
       this.nanoInput.emit(ev);
     };
     this.onBlur = () => {
@@ -130,24 +139,11 @@ export class Input {
     this.validate = debounce(this.validate, 50);
     this.handleBlur = this.handleBlur.bind(this);
   }
-  get nativeInputWrap() {
-    return this._nativeInputWrap;
-  }
-  set nativeInputWrap(ele) {
-    if (this._nativeInputWrap === ele)
-      return;
-    this._nativeInputWrap = ele;
-    this.setDataListOpts();
-  }
   setDataListOpts() {
     if (!this.datalist)
       return;
     const currDWConfig = this.datalist.dropDownConfig || {};
-    this.datalist.dropDownConfig = {
-      ...currDWConfig,
-      skidding: -1,
-      tetherTo: this.nativeInputWrap,
-    };
+    this.datalist.dropDownConfig = Object.assign(Object.assign({}, currDWConfig), { skidding: -1, tetherTo: this.nativeInputWrap });
   }
   /**
    * This will be true when the control is in an invalid state.
@@ -355,26 +351,16 @@ export class Input {
       rtl,
       hasHelperEndSlot,
     }))(this);
-    const wrapOptions = {
-      ...compWrapOptions,
-      labelId,
+    const wrapOptions = Object.assign(Object.assign({}, compWrapOptions), { labelId,
       moreId,
-      helperEndId,
-      hasValue: this.hasValue(),
-      controlId: this.inputId,
-    };
+      helperEndId, hasValue: this.hasValue(), controlId: this.inputId });
     const controlOptions = (({ clearInput, readonly, disabled }) => ({
       clearInput,
       readonly,
       disabled,
       clearControl: this.clearInput,
     }))(this);
-    return (h(Host, { "aria-disabled": this.disabled ? 'true' : null, dir: this.rtl ? 'rtl' : null, class: {
-        ...createColorClasses(this.color),
-        'has-value': this.hasValue(),
-        'has-focus': this.hasFocus,
-        'is-invalid': this._invalid,
-      } }, h(FormControlWrap, { ...wrapOptions }, h(FormControl, { ...controlOptions, onClearText: this.clearTextInput, control: this.el, ref: (el) => (this.nativeInputWrap = el) }, this.type !== 'textarea' && (h("input", { id: this.inputId, class: "input__native-ctrl", ref: (input) => (this.nativeInput = input), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, accept: this.accept, autoCapitalize: this.autocapitalise, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, inputMode: this.inputmode, form: this.form, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, size: this.size, type: this.type, value: value, onInput: this.onInput, onChange: this.onInput, onFocus: this.onFocus, onBlur: this.handleBlur, onKeyDown: this.onKeydown, onInvalid: this.validate })), this.type === 'textarea' && (h("textarea", { rows: this.floatLabel ? 1 : this.rows, id: this.inputId, class: {
+    return (h(Host, { "aria-disabled": this.disabled ? 'true' : null, dir: this.rtl ? 'rtl' : null, class: Object.assign(Object.assign({}, createColorClasses(this.color)), { 'has-value': this.hasValue(), 'has-focus': this.hasFocus, 'is-invalid': this._invalid }) }, h(FormControlWrap, Object.assign({}, wrapOptions), h(FormControl, Object.assign({}, controlOptions, { onClearText: this.clearTextInput, control: this.el, ref: (el) => (this.nativeInputWrap = el) }), this.type !== 'textarea' && (h("input", { id: this.inputId, class: "input__native-ctrl", ref: (input) => (this.nativeInput = input), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, accept: this.accept, autoCapitalize: this.autocapitalise, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, inputMode: this.inputmode, form: this.form, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, size: this.size, type: this.type, value: value, onInput: this.onInput, onChange: this.onInput, onFocus: this.onFocus, onBlur: this.handleBlur, onKeyDown: this.onKeydown, onInvalid: this.validate })), this.type === 'textarea' && (h("textarea", { rows: this.floatLabel ? 1 : this.rows, id: this.inputId, class: {
         'input__native-ctrl': true,
         input__resizable: this.resize === 'true',
       }, ref: (input) => (this.nativeInput = input), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, autoCapitalize: this.autocapitalise, autoCorrect: this.autocorrect, autoFocus: this.autofocus, inputMode: this.inputmode, form: this.form, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, value: value, onInput: this.onInput, onChange: this.onInput, onFocus: this.onFocus, onKeyDown: this.onKeydown, onInvalid: this.validate, onBlur: this.handleBlur }))), h("slot", null))));